/* Fly 콘솔 — 토스 디자인 시스템 토큰 (블루 단일 강조 · 1px 헤어라인 · 라운드 ladder · Pretendard · 숫자 고정폭). */
:root {
  /* base palette (oklch) */
  --blue-500: oklch(0.624 0.176 254); --blue-600: oklch(0.522 0.176 257); --blue-50: oklch(0.965 0.020 250);
  --grey-900: oklch(0.234 0.030 254); --grey-800: oklch(0.342 0.030 253); --grey-700: oklch(0.452 0.028 253); --grey-600: oklch(0.555 0.022 253);
  --grey-500: oklch(0.652 0.020 252); --grey-400: oklch(0.752 0.016 251); --grey-300: oklch(0.840 0.012 248); --grey-200: oklch(0.913 0.008 247);
  --grey-100: oklch(0.957 0.005 247); --grey-50: oklch(0.978 0.003 247);
  --yellow-500: oklch(0.853 0.156 86); --orange-500: oklch(0.748 0.183 56); --red-500: oklch(0.628 0.218 22); --green-500: oklch(0.493 0.143 154);
  --navy-900: oklch(0.155 0.060 261);
  --green-bg: oklch(0.940 0.045 155); --red-bg: oklch(0.940 0.040 18);
  --fg-tertiary: oklch(0.155 0.060 261 / 0.58); --fg-quaternary: oklch(0.155 0.060 261 / 0.28);
  --line-subtle: oklch(0 0 0 / 0.08);
  /* semantic */
  --bg: var(--grey-100); --surface: #fff; --text: var(--grey-900); --text-2: var(--grey-700); --text-3: var(--grey-600); --line: var(--grey-200);
  --brand: var(--blue-500); --brand-press: var(--blue-600); --brand-weak: var(--blue-50);
  /* viz */
  --viz-input: var(--blue-500); --viz-hidden: var(--grey-400); --viz-kc: var(--yellow-500); --viz-output: var(--grey-900);
  --viz-c0: var(--blue-500); --viz-diff: var(--grey-900); --viz-same: var(--grey-400); --viz-chosen: var(--green-500);
  /* elevation · motion · radius */
  --shadow-1: 0 1px 2px oklch(0.155 0.060 261 / 0.04), 0 1px 1px oklch(0.155 0.060 261 / 0.04);
  --shadow-2: 0 4px 12px oklch(0.155 0.060 261 / 0.06), 0 1px 2px oklch(0.155 0.060 261 / 0.04);
  --shadow-3: 0 12px 32px oklch(0.155 0.060 261 / 0.10), 0 2px 6px oklch(0.155 0.060 261 / 0.06);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms;
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 14px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px; --r-full: 999px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
body.tabular { font-variant-numeric: tabular-nums; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-press); }
b, strong { font-weight: 600; color: var(--text); }
code { font: 500 0.9em var(--font); background: var(--grey-100); padding: 0 0.3em; border-radius: var(--r-xs); }
h1, h2, h3, p { margin: 0; }
button, select, input { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-s); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.small { font-size: 13px; font-weight: 500; color: var(--text-3); }
.caption { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-3); }
#debug-log { display: none; }

/* ---------- 앱 셸 ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: inherit; }
.brand-mark { width: 36px; height: 36px; border-radius: var(--r-m); background: var(--brand-weak); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.brand-sub { font-size: 11px; font-weight: 500; color: var(--text-3); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { height: 44px; border-radius: var(--r-m); padding: 0 14px; display: flex; align-items: center; color: var(--text-2); font-size: 15px; font-weight: 500; transition: background var(--dur-base) var(--ease); }
.nav a:hover { background: var(--grey-100); color: var(--text-2); }
.nav a[aria-current="page"] { background: var(--brand-weak); color: var(--brand); font-weight: 600; }
/* 파랑 하이라이트는 '지금 보고 있는 화면' 하나에만 쓴다 (aria-current). 대전에도 상시 강조를 두지 않는다. */
.nav a[data-route="versus"] { justify-content: space-between; gap: 8px; }
.nav a[data-route="versus"] span { font-size: 11.5px; font-weight: 500; color: var(--text-3); letter-spacing: -0.01em; }
.nav a[data-route="versus"][aria-current="page"] span { color: var(--brand); opacity: 0.75; }
.nav-sec { padding: 14px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--fg-quaternary); }
.nav-sec:empty { padding: 6px 0 0; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.info-card { border-radius: var(--r-xl); background: var(--grey-100); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.info-card b { font-size: 13px; }
.info-card span { font-size: 12px; font-weight: 500; color: var(--text-3); line-height: 1.4; }
.source-row { height: 56px; border-radius: var(--r-l); padding: 0 12px; display: flex; align-items: center; gap: 10px; color: inherit; transition: background var(--dur-base) var(--ease); }
.source-row:hover { background: var(--grey-100); color: inherit; }
.source-avatar { width: 36px; height: 36px; border-radius: var(--r-l); background: var(--grey-200); overflow: hidden; flex: 0 0 auto; }
.source-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.source-row b { font-size: 14px; display: block; line-height: 1.2; }
.source-row span { font-size: 12px; font-weight: 500; color: var(--text-3); }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { min-height: 72px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 12px 32px; position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.topbar .sub { font-size: 13px; font-weight: 500; color: var(--text-3); }
.topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.page-body { flex: 1; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 20px; }
.page-body.narrow { max-width: 808px; width: 100%; margin: 0 auto; }

/* ---------- 컴포넌트 ---------- */
.btn { height: 40px; padding: 0 16px; border-radius: var(--r-m); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-press); color: #fff; }
.btn-secondary { background: var(--grey-100); color: var(--text); }
.btn-secondary:hover { background: var(--grey-200); color: var(--text); }
.btn-icon { width: 40px; padding: 0; background: var(--grey-100); color: var(--text-2); }
.btn-icon:hover { background: var(--grey-200); }
.btn-icon.plain { background: transparent; }
.btn-icon.plain:hover { background: var(--grey-100); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--r-full); }
.btn[disabled] { opacity: 0.3; pointer-events: none; }
.btn[aria-pressed="true"] { background: var(--brand-weak); color: var(--brand); }
.link { font-size: 13px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: var(--brand-press); }
.link svg { width: 16px; height: 16px; }
.btn svg { width: 18px; height: 18px; }

.chip { height: 34px; padding: 0 16px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.chip:hover { background: var(--grey-100); }
.chip[aria-pressed="true"], .chip.on { background: var(--grey-900); border-color: var(--grey-900); color: #fff; }
.chip.static { cursor: default; }
.chip.static:hover { background: var(--surface); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips .count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text-3); }

.tag { height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; background: var(--grey-100); color: var(--text-2); }
.tag-blue { background: var(--brand-weak); color: var(--brand); }
.tag-green { background: var(--green-bg); color: var(--green-500); }
.tag-red { background: var(--red-bg); color: var(--red-500); }
.tag-white { background: var(--surface); color: var(--brand); }

.card { background: var(--surface); border-radius: var(--r-2xl); border: 1px solid var(--line-subtle); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card.pad-lg { padding: 24px; }
.card-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.card-head .grow { flex: 1; min-width: 0; }
.card-head .right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; }
.card-sub { font-size: 13px; font-weight: 500; color: var(--text-3); margin-top: 3px; }
.card-note { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--text-3); }
.card.tint { background: var(--brand-weak); border-color: transparent; }
.card.tint .card-title { font-size: 14px; color: var(--brand); }
.card.tint p { font-size: 14px; font-weight: 500; color: var(--text-2); }
.callout { display: flex; align-items: center; gap: 12px; border-radius: var(--r-xl); background: var(--brand-weak); padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.callout .tag { flex: 0 0 auto; }
.notice { display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.notice .grow { flex: 1; min-width: 240px; }
.notice .title { font-size: 15px; font-weight: 600; line-height: 1.45; }
.notice .sub { font-size: 13px; font-weight: 500; color: var(--text-3); margin-top: 3px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { gap: 10px; }
.kpi .label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.kpi .value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }

.seg { height: 44px; border-radius: var(--r-l); background: var(--grey-200); padding: 4px; display: inline-flex; gap: 4px; max-width: 100%; }
.seg button { flex: 1; min-width: 0; padding: 0 14px; border-radius: 11px; font-size: 14px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }
.seg.sm { height: 34px; padding: 3px; }
.seg.sm button { font-size: 13px; padding: 0 12px; border-radius: 9px; }

.switch { position: relative; width: 44px; height: 26px; flex: 0 0 auto; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-full); background: var(--grey-300); transition: background var(--dur-base) var(--ease); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--dur-base) var(--ease); }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }

.row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-size: 15px; font-weight: 500; }
.row .desc { font-size: 13px; font-weight: 500; color: var(--text-3); }
.row .val { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.row.lg { min-height: 60px; }
.divider { height: 1px; background: var(--line); }
.label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field { height: 48px; border-radius: var(--r-m); background: var(--grey-100); border: 1px solid var(--line); padding: 0 14px; display: flex; align-items: center; gap: 10px; font-size: 15px; width: 100%; }
.field:focus-within { border-color: var(--brand); border-width: 1.5px; background: var(--surface); }
.field input, .field select { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; height: 100%; padding: 0; appearance: none; -webkit-appearance: none; }
.field input::placeholder { color: var(--fg-quaternary); }
.field select { cursor: pointer; padding-right: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234b5765' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; }
.field svg { width: 20px; height: 20px; color: var(--text-3); flex: 0 0 auto; }
.field.sm { height: 40px; }

.list { display: flex; flex-direction: column; }
.list-row { min-height: 64px; border-radius: var(--r-l); padding: 8px 16px; display: flex; align-items: center; gap: 14px; color: inherit; text-align: left; width: 100%; transition: background var(--dur-base) var(--ease); }
.list-row:hover { background: var(--grey-100); color: inherit; }
.list-row .avatar { width: 44px; height: 44px; border-radius: var(--r-l); background: var(--grey-100); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--text-2); flex: 0 0 auto; }
.list-row .avatar.on { background: var(--brand-weak); color: var(--brand); }
.list-row .main { min-width: 0; }
.list-row .main b { font-size: 15px; display: block; line-height: 1.3; }
.list-row .main span { font-size: 13px; color: var(--text-3); }
.list-row .end { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.list-row .end b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.list-row .end b.brand { color: var(--brand); }
.list-row .end span { font-size: 12px; font-weight: 500; color: var(--text-3); }
.list .divider { margin: 0 16px; }
.list-more { height: 44px; margin: 0 16px; border-radius: var(--r-m); display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-2); }
.list-more svg { margin-left: auto; width: 20px; height: 20px; color: var(--grey-400); }
.chev { width: 20px; height: 20px; color: var(--grey-400); flex: 0 0 auto; }

/* 표 (실험 목록) */
.table-wrap { overflow-x: auto; }
.table { min-width: 760px; display: flex; flex-direction: column; padding: 0 0 4px; }
.table .thead, .table .tr { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(120px, 1.1fr) 100px 100px 90px 120px; align-items: center; padding: 0 16px; gap: 12px; }
.table .thead { height: 44px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.table .tr { min-height: 60px; border-radius: var(--r-l); color: inherit; text-align: left; width: 100%; transition: background var(--dur-base) var(--ease); }
.table .tr:hover { background: var(--grey-100); color: inherit; }
.table .tr[aria-current="true"] { background: var(--brand-weak); }
.table .td-name b { font-size: 15px; font-weight: 600; display: block; line-height: 1.3; }
.table .td-name span { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.table .td-cond { font-size: 14px; font-weight: 500; color: var(--text-2); }
.table .r { text-align: right; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.table .r.brand { font-weight: 700; color: var(--brand); }
.table .r.dim { color: var(--text-3); }
.table .td-status { display: flex; justify-content: flex-end; }
.table .divider { margin: 0 8px; }
.empty { padding: 32px 16px; text-align: center; font-size: 14px; font-weight: 500; color: var(--text-3); }

/* 축 없는 막대차트 (홈) */
.bars { flex: 1; display: flex; align-items: flex-end; gap: 16px; padding: 0 4px; min-height: 200px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.bar .v { font-size: 13px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bar .b { width: 100%; height: 10px; border-radius: 6px 6px 0 0; background: var(--grey-200); transition: height var(--dur-base) var(--ease); }
.bar .k { font-size: 13px; font-weight: 500; color: var(--text-2); }
.bar.on .v, .bar.on .k { color: var(--brand); font-weight: 600; }
.bar.on .b { background: var(--brand); }
.bar.diff .b { background: var(--grey-900); }
.bar.diff .k { font-weight: 600; }
.bar.diff .v { color: var(--text); }

/* ---------- 홈 ---------- */
.hero { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.hero .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--brand); text-transform: uppercase; }
.hero h2 { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin: 8px 0 10px; }
.hero .lede { font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 66ch; }
.hero-models { position: relative; height: 200px; border-radius: var(--r-xl); background: var(--grey-100); overflow: hidden; }
#hero-canvas { width: 100%; height: 100%; display: block; }
.home-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.home-grid .list { padding: 0 8px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.3fr 1fr; } .hero-models { height: 240px; } }

/* ---------- 실험 상세 ---------- */
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kv { display: flex; flex-direction: column; }
.kv .row { min-height: 48px; }
.kv .row .title { font-size: 14px; font-weight: 500; color: var(--text-2); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-3); height: 36px; border-bottom: 1px solid var(--line); }
.mini-table th.r, .mini-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.mini-table td { height: 44px; border-bottom: 1px solid var(--line); font-weight: 500; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table tr.on td { color: var(--brand); font-weight: 700; }
.viz-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 커넥톰 ---------- */
.connectome-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.viewport { position: relative; height: clamp(360px, 58vh, 640px); border-radius: var(--r-xl); background: var(--grey-100); border: 1px solid var(--line); overflow: hidden; transition: background var(--dur-base) var(--ease); }
.viewport.dark { background: var(--navy-900); border-color: transparent; }
.viewport canvas { display: block; width: 100%; height: 100%; }
.fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: var(--text-3); text-align: center; font-size: 14px; font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.swatch.input { background: var(--viz-input); } .swatch.hidden { background: var(--viz-hidden); } .swatch.kc { background: var(--viz-kc); } .swatch.output { background: var(--viz-output); }
.play-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.play-row .small { margin-left: 4px; }
.heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 3px; }
.heatmap .cell { aspect-ratio: 1; border-radius: var(--r-xs); background: var(--grey-100); position: relative; }
.heatmap .cell.changed::after { content: ""; position: absolute; inset: -2px; border: 1.5px solid var(--orange-500); border-radius: 5px; pointer-events: none; }
.heat-scale { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.heat-scale i { flex: 1; height: 6px; border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand-weak), var(--brand)); }

/* ---------- 결정 탐색 ---------- */
.decision { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .decision { grid-template-columns: 272px minmax(0, 1fr) minmax(0, 1fr); } }
.row-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-controls .small { flex: 1; min-width: 0; }
#dec-board { width: 200px; height: 400px; background: var(--grey-100); border: 1px solid var(--line); border-radius: var(--r-m); display: block; margin: 0 auto; }
.board-info { font-size: 13px; font-weight: 500; color: var(--text-3); line-height: 1.5; }
.board-info b { color: var(--text); }
.board-info .chosen { color: var(--green-500); font-weight: 600; }
.candidate-strip { display: flex; flex-wrap: wrap; gap: 4px; max-height: 220px; overflow: auto; }
.candidate-strip canvas { width: 30px; height: 60px; border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer; image-rendering: pixelated; background: var(--grey-100); }
/* 선택은 2px 색 테두리 대신 1.5px 링 + 약한 배경 (토스 방식) */
.candidate-strip canvas.selected { border-color: transparent; box-shadow: 0 0 0 1.5px var(--brand); background: var(--brand-weak); }
.candidate-strip canvas.chosen { border-color: var(--green-500); }
.candidate-strip canvas.chosen.selected { box-shadow: 0 0 0 1.5px var(--green-500); border-color: transparent; background: oklch(0.940 0.045 155); }
.bump { width: 100%; height: auto; display: block; }
.spikes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .spikes { grid-template-columns: 1.4fr 1fr; } }
.raster, .layer-chart { width: 100%; height: 420px; display: block; border-radius: var(--r-m); background: var(--grey-50); border: 1px solid var(--line); }

/* ---------- 조건 비교 ---------- */
.charts { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } }
.chart svg { width: 100%; max-width: 560px; height: auto; display: block; }
.chart .note { font-size: 13px; font-weight: 500; color: var(--text-3); line-height: 1.5; }
svg text { fill: var(--text-2); font-size: 11px; font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; }
svg .axis text { fill: var(--text-3); font-size: 10px; }
svg .grid line, svg .axis line { stroke: var(--line); }
.foot { font-size: 13px; font-weight: 500; color: var(--text-3); line-height: 1.6; max-width: 90ch; }

/* ---------- 설정 ---------- */
.settings-card { padding: 8px 20px 12px; gap: 0; }
.settings-card .section { height: 52px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-3); }
.settings-card .row.lg .val { font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.settings-card a.row { color: inherit; }
.settings-card a.row:hover .val { color: var(--text); }

/* ---------- 반응형 ---------- */
@media (max-width: 899px) {
  .app { flex-direction: column; }
  .sidebar { width: auto; flex: none; height: auto; position: sticky; top: 0; z-index: 10; padding: 10px 12px; gap: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-foot { display: none; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { height: 36px; padding: 0 12px; font-size: 14px; flex: 0 0 auto; }
  /* 가로 스크롤 메뉴에서는 섹션 라벨과 부제를 접는다 */
  .nav-sec { display: none; }
  .nav a[data-route="versus"] span { display: none; }
  .topbar { position: static; padding: 14px 16px; }
  .topbar h1 { font-size: 20px; }
  .page { min-height: 0; }
  .page-body { padding: 16px 16px 32px; gap: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .value { font-size: 26px; }
  .home-grid, .detail-grid, .connectome-grid { grid-template-columns: 1fr; }
  .hero-models { height: 160px; }
  .viewport { height: clamp(280px, 50vh, 460px); }
  .raster, .layer-chart { height: 320px; }
  .card { padding: 16px; border-radius: var(--r-xl); }
  .card.pad-lg { padding: 16px; }
  .seg button { padding: 0 10px; font-size: 13px; }
  .topbar .actions { margin-left: 0; width: 100%; }
  .topbar .actions .field { width: 100% !important; }
  .settings-card { padding: 4px 16px 8px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 빈 상태 (대전 전에는 보여줄 값이 없다) ---------- */
.empty-state { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.empty-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: var(--r-full); background: #ffcf32; display: flex; align-items: center; justify-content: center; }
.empty-icon i { width: 36px; height: 8px; border-radius: var(--r-full); background: #59371e; }
.empty-title { font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.empty-desc { margin: 8px auto 20px; max-width: 380px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-2); }
.empty-hint { margin: 12px 0 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-3); }
.btn-lg { height: 48px; padding: 0 22px; border-radius: var(--r-l); font-size: 17px; font-weight: 700; }
.btn-xl { height: 56px; border-radius: var(--r-xl); font-size: 17px; font-weight: 700; }

/* ---------- 홈: 내 전적 ---------- */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 20px; }
.ms { display: flex; align-items: baseline; gap: 6px; min-height: 34px; }
.ms .k { font-size: 13px; font-weight: 500; color: var(--text-3); flex: 1; min-width: 0; }
.ms .a { font-size: 17px; font-weight: 700; color: var(--brand); }
.ms .vs { font-size: 11px; font-weight: 500; color: var(--fg-quaternary); }
.ms .b { font-size: 17px; font-weight: 700; color: var(--text); }

/* ---------- 대전 기록 ---------- */
.timeline { width: 100%; height: auto; display: block; }
.list-row.as-button { background: none; border: 0; font: inherit; cursor: pointer; }
.list-row.on, .list-row.on:hover { background: var(--brand-weak); }

/* ---------- 실험: 이전 단계 보관 ---------- */
.archive summary { font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; list-style: none; }
.archive summary::-webkit-details-marker { display: none; }
.archive summary::before { content: "\25B8  "; color: var(--grey-400); }
.archive[open] summary::before { content: "\25BE  "; }

/* ---------- 게이트 통과/미달 ---------- */
.kv .val b.ok { color: var(--green-500); }
.kv .val b.no { color: var(--red-500); }
.kv .val .muted { font-weight: 500; color: var(--text-3); }

/* ---------- 설정: 슬라이더 · 키 ---------- */
.slider { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: min(240px, 46%); }
.slider output { font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.slider input[type=range] { width: 100%; accent-color: var(--brand); }
.keys { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.keys span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.keys em { font-style: normal; color: var(--text-2); font-weight: 500; margin-left: 3px; }
kbd { font: 500 11.5px ui-monospace, Menlo, Consolas, monospace; background: var(--grey-100); border: 1px solid var(--line);
      border-bottom-width: 2px; border-radius: var(--r-xs); padding: 2px 6px; color: var(--text); }

/* ---------- 대전 화면 (SPA 라우트 #/versus) ---------- */
/* 게임 화면만 스크롤되지 않는다. body.playing 은 대전 라우트에 있는 동안만 붙는다. */
:root { --cell: 30px; }
body.playing { overflow: hidden; overscroll-behavior: none; }
body.playing .app { height: 100vh; min-height: 100vh; }
.vs-page { height: 100vh; min-height: 0; overflow: hidden; }
.vs-body { flex: 1; min-height: 0; padding: 20px 32px 24px; background: var(--bg); display: flex; }
.vs-row { display: flex; gap: 16px; align-items: stretch; justify-content: center; width: 100%; min-height: 0; }
/* 패널은 내용 폭에 맞춘다 — 보드가 10:22 비율이라 늘리면 안쪽에 죽은 여백이 생긴다 */
.vs-panel { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line-subtle);
            border-radius: var(--r-2xl); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.vs-phead { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vs-avatar { width: 44px; height: 44px; border-radius: var(--r-l); display: grid; place-items: center; flex: 0 0 auto; }
.vs-avatar.me { background: var(--brand-weak); color: var(--brand); font-size: 13px; font-weight: 700; }
.vs-avatar.fly { background: var(--grey-100); font-size: 20px; }
.vs-who { min-width: 0; }
.vs-who b { font-size: 15px; display: block; line-height: 1.3; }
.vs-who span { font-size: 13px; color: var(--text-3); }
.vs-badge { margin-left: auto; height: 22px; padding: 0 8px; border-radius: var(--r-s);
            background: var(--brand-weak); color: var(--brand); font-size: 12px; font-weight: 600;
            display: inline-flex; align-items: center; white-space: nowrap; }
.vs-badge.quiet { background: var(--grey-100); color: var(--text-3); }

/* 아래 치수는 모두 --cell 에 비례한다 (셀 30px 기준: side 84 · hold 64 · gap 14 · 가비지 10) */
.vs-play { display: flex; gap: calc(var(--cell) * 0.4667); align-items: flex-start; justify-content: center; flex: 1; min-height: 0; }
.vs-side { width: calc(var(--cell) * 2.8); flex: 0 0 auto; display: flex; flex-direction: column; gap: calc(var(--cell) * 0.333); }
.vs-lab { font-size: clamp(11px, calc(var(--cell) * 0.4), 16px); font-weight: 600; color: var(--text-3); }
.vs-holdbox { height: calc(var(--cell) * 2.133); border-radius: calc(var(--cell) * 0.4); background: var(--grey-100); display: grid; place-items: center; }
.vs-holdbox .empty { font-size: clamp(10px, calc(var(--cell) * 0.36), 14px); color: var(--text-3); white-space: nowrap; padding: 0; }
.vs-nextbox { border-radius: calc(var(--cell) * 0.4); background: var(--grey-100); padding: calc(var(--cell) * 0.4) 0;
              display: flex; flex-direction: column; gap: calc(var(--cell) * 0.4); align-items: center; }
.vs-mini { display: grid; gap: 2px; }
.vs-mini > div { border-radius: calc(var(--cell) * 0.1); }
.vs-holdbox .vs-mini.used > div { opacity: 0.35; }
.vs-garbage { width: calc(var(--cell) * 0.333); flex: 0 0 auto; border-radius: var(--r-full); background: var(--grey-200);
              position: relative; overflow: hidden; align-self: flex-start; }
.vs-garbage > div { position: absolute; left: 0; right: 0; bottom: 0; border-radius: var(--r-full);
                    background: var(--orange-500); transition: height 90ms var(--ease); }
.vs-garbage > div.high { background: var(--red-500); }
.vs-boardwrap { position: relative; flex: 0 0 auto; }
.vs-boardwrap canvas { display: block; border-radius: calc(var(--cell) * 0.4); }
.vs-combo { position: absolute; left: 0; right: 0; top: 44%; text-align: center; font-size: calc(var(--cell) * 1.27); font-weight: 700;
            letter-spacing: -0.02em; color: var(--brand); font-variant-numeric: tabular-nums; pointer-events: none; }
.vs-combo span { font-size: calc(var(--cell) * 0.5); font-weight: 600; letter-spacing: 0; margin-left: 4px; }
/* 오른쪽 초파리 — 두 판 옆에 남는 폭을 쓴다 (7~12셀). 자리가 모자라면 versus.js 가 .with-fly 를 떼서 두 판만 가운데 둔다.
   위: KEYS(누르는 버튼) · LOG(결정 로그) 카드, 아래: 패드를 두드리는 3D. 치수는 --cell 에 비례한다 (가장 좁은 7셀에도 패드가 들어간다). */
.vs-flymodel { display: none; flex: 1 1 0; min-width: calc(var(--cell) * 7); max-width: calc(var(--cell) * 12);
               flex-direction: column; gap: 14px; pointer-events: none; }
.vs-row.with-fly .vs-flymodel { display: flex; }
.vs-flyhud { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line-subtle); border-radius: var(--r-2xl);
             padding: calc(var(--cell) * 0.5); display: flex; flex-direction: column; gap: calc(var(--cell) * 0.3); }
.vs-pad { display: flex; align-items: center; justify-content: space-evenly; gap: calc(var(--cell) * 0.4);
          background: var(--grey-100); border-radius: calc(var(--cell) * 0.9); padding: calc(var(--cell) * 0.35) calc(var(--cell) * 0.3); }
/* 버튼: 꺼지면 흰 바탕 회색 · 누르는 순간 브랜드 블루로 바로 켜지고, 뗄 때만 짧게 흐려진다 */
.vs-pad [data-key] { display: grid; place-items: center; background: var(--surface); color: var(--grey-400); box-shadow: var(--shadow-1);
                     transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.vs-pad [data-key].on { background: var(--brand); color: #fff; transform: scale(0.92); transition-duration: 0ms; }
.vs-dpad { display: grid; grid-template-columns: repeat(3, calc(var(--cell) * 0.8)); grid-template-rows: repeat(3, calc(var(--cell) * 0.8)); gap: 2px; }
.vs-dpad .k, .vs-dpad .hub { border-radius: calc(var(--cell) * 0.14); }
.vs-dpad .up { grid-area: 1 / 2; } .vs-dpad .left { grid-area: 2 / 1; } .vs-dpad .right { grid-area: 2 / 3; } .vs-dpad .down { grid-area: 3 / 2; }
.vs-dpad .hub { grid-area: 2 / 2; background: var(--surface); box-shadow: var(--shadow-1); }
.vs-dpad .k i { width: 38%; aspect-ratio: 1; background: currentColor; clip-path: polygon(50% 14%, 94% 86%, 6% 86%); }
.vs-dpad .right i { transform: rotate(90deg); } .vs-dpad .down i { transform: rotate(180deg); } .vs-dpad .left i { transform: rotate(270deg); }
.vs-btns { display: grid; grid-template-columns: repeat(2, var(--cell)); gap: calc(var(--cell) * 0.2) calc(var(--cell) * 0.25); }
.vs-btns .pill { grid-column: 1 / -1; height: calc(var(--cell) * 0.6); border-radius: var(--r-full);
                 font-size: clamp(9px, calc(var(--cell) * 0.3), 12px); font-weight: 700; letter-spacing: 0.04em; }
.vs-btns .round { height: var(--cell); border-radius: 50%; }
.vs-btns svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 로그: 최근 4줄, 새 줄은 맨 아래 · 위로 갈수록 흐리다. 한 줄이 넘치면 말줄임. */
.vs-log { --logfs: clamp(10px, calc(var(--cell) * 0.32), 13px); height: calc(var(--logfs) * 6); overflow: hidden;
          display: flex; flex-direction: column; justify-content: flex-end;
          font: 500 var(--logfs)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--brand); }
#vs-flyLog { transition: transform var(--dur-base) var(--ease); }
.vs-logline { display: flex; white-space: nowrap; overflow: hidden; opacity: 0.25; }
.vs-logline span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 생각 쪽만 줄이고 착수·결과는 남긴다 */
.vs-logline span + span { flex: none; }
.vs-logline:nth-last-child(3) { opacity: 0.45; }
.vs-logline:nth-last-child(2) { opacity: 0.7; }
.vs-logline:last-child { opacity: 1; }
.vs-flystage { flex: 1 1 auto; min-height: 0; position: relative; }
.vs-flystage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 결과 모달 — 화면 정중앙 */
.scrim { position: fixed; inset: 0; background: oklch(0 0 0 / 0.56); display: none; z-index: 40; align-items: center; justify-content: center; padding: 24px; }
.scrim.open { display: flex; }
.sheet { width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--r-2xl);
         padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 16px;
         box-shadow: var(--shadow-3); max-height: 100%; overflow: auto; }
.sheet .title { text-align: center; }
.sheet .title b { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.sheet .title div { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.sheet .rows { display: flex; flex-direction: column; }
.sheet .rows .r { min-height: 44px; display: flex; align-items: center; gap: 12px; }
.sheet .rows .r span.k { font-size: 15px; color: var(--text-2); }
.sheet .rows .r b { margin-left: auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sheet .rows .r b.brand { color: var(--brand); }
.sheet .rows .r span.v2 { font-size: 13px; color: var(--text-3); width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.sheet .rows .sep { height: 1px; background: var(--line); }
.sheet .legend { justify-content: center; text-align: center; font-size: 12px; color: var(--text-3); }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .btn { flex: 1; }

@media (max-width: 899px) {
  /* 좁은 화면에서는 두 판을 세로로 쌓고 페이지를 스크롤시킨다 (가로로 나란히 두면 보드가 잘린다) */
  .vs-body { padding: 12px; display: block; }
  .vs-row { flex-direction: column; align-items: center; gap: 12px; }
  .vs-panel { padding: 12px; width: 100%; max-width: 520px; }
  .vs-page { height: auto; overflow: visible; }
  body.playing { overflow: auto; }
  body.playing .app { height: auto; }
  .slider { width: 44%; }
}