/* ============================================================
   ブルアカ 募集リニューアル シミュレーター
   ============================================================ */

:root {
  --bg:        #eef5fb;
  --bg-soft:   #f7fbff;
  --card:      #ffffff;
  --ink:       #1b2b3d;
  --ink-soft:  #5c7186;
  --line:      #d9e6f2;

  --old:       #7b8ca0;
  --old-soft:  #eef1f5;
  --new:       #2196f3;
  --new-soft:  #e3f2fd;

  --accent:    #00b8d4;
  --good:      #14b881;
  --bad:       #ef5b6b;
  --warn:      #f5a623;

  --radius:    16px;
  --shadow:    0 2px 4px rgba(27,43,61,.04), 0 8px 24px rgba(27,43,61,.07);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #101821;
    --bg-soft:  #16202b;
    --card:     #1a2532;
    --ink:      #e6eef7;
    --ink-soft: #93a7bb;
    --line:     #2a3949;
    --old:      #8697a9;
    --old-soft: #232f3d;
    --new:      #4dabf7;
    --new-soft: #17303f;
    --shadow:   0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--new); }

/* ---------------- Hero ---------------- */

.hero {
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(0,184,212,.35), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(33,150,243,.30), transparent 60%),
    linear-gradient(160deg, #2c6fd1, #37a3e0 55%, #4fc3e8);
  color: #fff;
  padding: 56px 20px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 -1px 0; height: 40px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(26px, 5.2vw, 42px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0,60,110,.28);
}
.hero h1 span { color: #d9f6ff; }
.hero .lead { margin: 0; font-size: clamp(13px, 2.6vw, 16px); opacity: .95; }

/* ---------------- Layout ---------------- */

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.panel > h2 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel > h2 .num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--new), var(--accent));
  color: #fff;
  font-size: 14px;
  display: grid; place-items: center;
}

.lead-in {
  margin: -8px 0 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---------------- ルール対比 ---------------- */

.rule-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rc {
  border-radius: 13px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.rc h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.rc h3 small { font-size: 11.5px; font-weight: 700; opacity: .75; }
.rc p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--ink-soft); }

/* ---------------- Strategy tabs ---------------- */

.strategy-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.strat {
  appearance: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  padding: 16px 18px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: .16s;
}
.strat:hover { border-color: #a9cdea; }
.strat[aria-pressed="true"] {
  border-color: var(--new);
  background: var(--new-soft);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(33,150,243,.18);
}
.strat-title { font-size: 16px; font-weight: 800; }
.strat-desc { font-size: 12.5px; line-height: 1.6; }
.strat-desc b { color: var(--new); }

/* ---------------- Controls ---------------- */

.control-grid { display: flex; flex-direction: column; gap: 22px; }

.control[hidden] { display: none; }

.control > label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
.tag {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--new-soft);
  color: var(--new);
  vertical-align: 2px;
}

.slider-row { display: flex; align-items: center; gap: 14px; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--new) var(--fill, 20%), var(--line) var(--fill, 20%));
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--new);
  box-shadow: 0 2px 8px rgba(33,150,243,.4);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--new); cursor: pointer;
}

.xout {
  flex: none;
  min-width: 108px;
  text-align: right;
  font-size: 30px;
  font-weight: 800;
  color: var(--new);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.xout small { font-size: 14px; margin-left: 3px; color: var(--ink-soft); }

.hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.tag.old { background: var(--old-soft); color: var(--ink-soft); }

.xout.small { font-size: 19px; min-width: 132px; }
.xout.small small { font-size: 12px; }

/* segmented control */
.seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.seg.two { grid-template-columns: 1fr 1fr; }
.seg button {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 6px;
  border-radius: 11px;
  border: 2px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: .16s;
}
.seg button small { font-size: 11px; font-weight: 600; opacity: .8; }
.seg button:hover { border-color: #a9cdea; }
.seg button[aria-pressed="true"] {
  border-color: var(--new); background: var(--new-soft); color: var(--new);
}

/* ---------------- Run button ---------------- */

.run-row {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-calc {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  flex: none;
  padding: 13px 40px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e88e5, #35b6e8);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(33,150,243,.35);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn-calc:hover { filter: brightness(1.07); box-shadow: 0 6px 20px rgba(33,150,243,.45); }
.btn-calc:active { transform: translateY(1px); }

/* 設定を触ったあと、まだ計算していない状態 */
body.stale .btn-calc {
  background: linear-gradient(135deg, #f0921a, #f5b642);
  box-shadow: 0 4px 14px rgba(245,166,35,.4);
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
body.stale .status { color: var(--warn); font-weight: 700; }
body.stale .result-only { opacity: .4; transition: opacity .2s; }

/* 一度も計算していない間は結果セクションを出さない */
body.no-result .result-only { display: none; }

.status {
  font-size: 12.5px;
  color: var(--ink-soft);
  min-height: 20px;
}

/* ---------------- Verdict ---------------- */

.verdict {
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, #0fa97a, #14b881 60%, #4fd1a5);
  transition: .3s;
}
.verdict.is-old { background: linear-gradient(135deg, #5f7183, #7b8ca0 60%, #9aa9b9); }
.verdict.is-tie { background: linear-gradient(135deg, #7a6cc4, #9b8ad6 60%, #b7a9e6); }

.verdict-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.verdict-main {
  margin: 0 0 10px;
  font-size: clamp(20px, 4vw, 29px);
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.verdict-main b { color: #fffbd6; }
.verdict-sub { margin: 0; font-size: 13px; opacity: .95; line-height: 1.9; }

/* ---------------- Compare cards ---------------- */

.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}
.vs {
  align-self: center;
  font-weight: 900;
  font-size: 15px;
  color: var(--ink-soft);
  opacity: .5;
  letter-spacing: .05em;
}

.spec-card {
  border-radius: 14px;
  border: 2px solid var(--line);
  overflow: hidden;
  background: var(--bg-soft);
  display: flex; flex-direction: column;
}
.spec-card.old { border-color: #c8d3de; }
.spec-card.new { border-color: var(--new); box-shadow: 0 4px 18px rgba(33,150,243,.15); }

.spec-card header {
  padding: 13px 16px;
  color: #fff;
}
.spec-card.old header { background: linear-gradient(135deg, #6c7d90, #90a1b3); }
.spec-card.new header { background: linear-gradient(135deg, #1e88e5, #42b6e8); }
.spec-card header h3 { margin: 0; font-size: 17px; font-weight: 800; }
.spec-card header p { margin: 2px 0 0; font-size: 12px; opacity: .92; line-height: 1.5; }
.spec-card header small { font-size: 11px; opacity: .85; }

.spec-card dl { margin: 0; padding: 6px 16px 16px; flex: 1; }
.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.stat[hidden] { display: none; }
/* 末尾の行は条件によって非表示になるので、その手前を最終行として扱う */
.stat:last-child,
.stat:has(+ .stat[hidden]) { border-bottom: none; }
.stat dt { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.stat dd {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.stat dd small { font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-left: 2px; }
.stat.primary dd { font-size: 19px; }
.stat.hero-stat {
  margin: 6px -16px;
  padding: 11px 16px;
  border-bottom: none;
  background: var(--old-soft);
}
.spec-card.new .stat.hero-stat { background: var(--new-soft); }
.stat.hero-stat dt { font-weight: 800; color: var(--ink); font-size: 12.5px; }
.stat.hero-stat dd { font-size: 22px; letter-spacing: -.02em; }
.spec-card.new .stat.hero-stat dd { color: var(--new); }
.stat.hero-stat.sub { margin-top: -6px; }
.stat.hero-stat.sub dd { font-size: 17px; }

/* diff bar */
.diffbar {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dbar-item { font-size: 12.5px; }
.dbar-item .dbar-label { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 5px; }
.dbar-track { height: 26px; border-radius: 8px; background: var(--old-soft); overflow: hidden; display: flex; }
.dbar-fill { height: 100%; display: flex; align-items: center; padding: 0 9px; color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap; transition: width .4s ease; }
.dbar-fill.old { background: linear-gradient(90deg, #7b8ca0, #94a4b5); }
.dbar-fill.new { background: linear-gradient(90deg, #1e88e5, #4fc3e8); }

/* ---------------- Spec table ---------------- */

.spec-table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 480px; }
th, td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.65; }
thead th { background: var(--bg-soft); font-size: 12px; color: var(--ink-soft); }
tbody th { width: 26%; font-weight: 700; background: var(--bg-soft); }
tr.highlight td { background: rgba(33,150,243,.07); }
tr.highlight th { background: rgba(33,150,243,.12); }
td b { color: var(--new); }
td.span { background: var(--new-soft); }


/* ---------------- Responsive ---------------- */

@media (max-width: 720px) {
  .strategy-tabs { grid-template-columns: 1fr; }
  .seg { grid-template-columns: 1fr 1fr; }
  .rule-compare { grid-template-columns: 1fr; }
  .btn-calc { flex: 1 1 100%; padding: 15px 20px; }
  .compare { grid-template-columns: 1fr; }
  .vs { justify-self: center; padding: 2px 0; }
  .panel { padding: 20px 16px; }
  .xout { min-width: 92px; font-size: 25px; }
}