/* ═══════════════════════════════════════════════════════════════
   Control Room · theme.css  (port of v13-control-room onto deck-core R1)
   결정 하나: 계기판은 장식이 아니라 실제 텔레메트리다.
   - 상단 56px 상태 스트립(#cr-strip) · 하단 64px 타임코드 바(#cr-tc)는 theme.js가
     #deck 안(무대 1920×H)에 주입하고 코어 훅으로 api.state()를 읽어 그린다.
   - 슬라이드는 그 높이만큼 padding을 가져 크롬과 절대 겹치지 않는다(JS 꺼짐·인쇄 포함).
   - 절제된 계기판: 1px 괘선 · 패널 면 · 모노 라벨 · tabular-nums. 네온·스캔라인 없음.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 팔레트 (코어 토큰 덮어쓰기 + 계기판 전용) ───────── */
:root{
  --bg:#E3E5E1; --panel:#F1F2EF; --panel2:#FAFAF8; --line:#C2C6C0; --line2:#D4D7D2;
  --fg:#131513; --dim:#4B4F4A; --faint:#7E827D; --muted:var(--dim);
  --accent:var(--cmds-green); --accent-on:#FFFFFF; --acc-tint:rgba(19,69,56,.10);
  --font-mono:"SF Mono","SFMono-Regular","Menlo","JetBrains Mono","Pretendard",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --cr-strip:56px; --cr-tc:64px; --pad-x:120px; --pad-t:40px; --pad-b:36px; --gap:28px;
  --dk-panel-bg:var(--panel); --dk-panel-fg:var(--dim); --dk-panel-line:var(--line);
  --dk-font:var(--font-mono); --dk-accent:var(--accent);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0B0C0D; --panel:#121416; --panel2:#181B1E; --line:#2A2E33; --line2:#1E2226;
  --fg:#ECEDE9; --dim:#A3A7A1; --faint:#6B6F6A; --muted:var(--dim);
  --accent:var(--cmds-pink); --accent-on:#1B1B1B; --acc-tint:rgba(233,133,162,.14);
  --dk-panel-bg:var(--panel); --dk-panel-fg:var(--dim); --dk-panel-line:var(--line);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:#0B0C0D; --panel:#121416; --panel2:#181B1E; --line:#2A2E33; --line2:#1E2226;
    --fg:#ECEDE9; --dim:#A3A7A1; --faint:#6B6F6A; --muted:var(--dim);
    --accent:var(--cmds-pink); --accent-on:#1B1B1B; --acc-tint:rgba(233,133,162,.14);
    --dk-panel-bg:var(--panel); --dk-panel-fg:var(--dim); --dk-panel-line:var(--line);
    color-scheme:dark;
  }
}
html[data-aspect="16x10"]{ --pad-t:56px; --pad-b:48px; --gap:36px; }

body{ font-size:24px; line-height:1.5; letter-spacing:-.012em; overflow-wrap:anywhere; }
b,strong{ font-weight:700; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ───────── 코어 패널 재스킨 (browse/panels/notes 모드에서만 보임) ───────── */
.dk-panel{ letter-spacing:.12em; font-weight:500; }
.dk-brand{ color:var(--fg); letter-spacing:.22em; font-weight:600; }
.dk-brand i{ border-radius:0; }
.dk-btn{ border-radius:0; letter-spacing:.1em; }
.dk-progress{ border-radius:0; }
#dk-notes{ background:var(--panel2); color:var(--fg); }
#dk-notes .nw-body{ color:var(--dim); }
#dk-help .card,#dk-toast{ border-radius:0; }

/* ───────── 슬라이드 공통 ───────── */
.slide{
  padding:calc(var(--cr-strip) + var(--pad-t)) var(--pad-x) calc(var(--cr-tc) + var(--pad-b));
  gap:var(--gap); background:var(--bg); color:var(--fg);
}
html:not(.js) .slide{ padding:var(--pad-t) var(--pad-x) var(--pad-b); border-bottom:1px solid var(--line); }
p{ margin:0; text-wrap:pretty; }
.kicker{
  margin:0 0 -6px; font:400 18px/1 var(--font-mono); letter-spacing:.1em; color:var(--dim);
  display:flex; align-items:center; gap:16px;
}
.kicker::before{ content:""; width:10px; height:10px; background:var(--accent); flex:0 0 auto; }
.headline{ margin:0; font:700 88px/1.1 var(--font-display); letter-spacing:-.035em; word-break:keep-all; max-width:1700px; }
.headline em{ font-style:normal; color:var(--accent); }
.headline .sub{ display:block; margin-top:.28em; font:500 .42em/1.2 var(--font-sans); letter-spacing:-.02em; color:var(--dim); }
.lead{ margin:0; font:400 32px/1.5 var(--font-sans); color:var(--dim); max-width:1440px; }
.lead b{ color:var(--fg); }
.foot{
  margin-top:auto; position:relative; padding:18px 0 0 40px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:40px;
  font:400 21px/1.5 var(--font-sans); color:var(--dim);
}
.foot::before{ content:""; position:absolute; left:0; top:28px; width:10px; height:10px; background:var(--accent); }
.foot b{ color:var(--fg); }
.foot-src{ font:400 16px/1.5 var(--font-mono); letter-spacing:.14em; color:var(--faint); white-space:nowrap; }
.pnl,.cell,.step,.stat,.tick,.tg,.col{ background:var(--panel); border:1px solid var(--line); }

/* ───────── 모션 (진입 rise · 순차 공개) ───────── */
html.js .slide[data-active] > *{ animation:cr-rise .55s var(--ease) both; }
html.js .slide[data-active] > *:nth-child(1){ animation-delay:0ms; }
html.js .slide[data-active] > *:nth-child(2){ animation-delay:80ms; }
html.js .slide[data-active] > *:nth-child(3){ animation-delay:160ms; }
html.js .slide[data-active] > *:nth-child(4){ animation-delay:240ms; }
html.js .slide[data-active] > *:nth-child(5){ animation-delay:320ms; }
html.js .slide[data-active] > *:nth-child(n+6){ animation-delay:400ms; }
@keyframes cr-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
html.js [data-step]{ transform:translateY(14px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
html.js [data-step].in{ transform:none; }
html.js svg [data-step]{ transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .slide[data-active] > *{ animation:none !important; }
  #cr-tc .seg i,.toggle-ctl button{ transition:none !important; }
}
html[data-print="1"] .slide > *{ animation:none !important; opacity:1 !important; transform:none !important; }

/* ───────── 상태 스트립 (theme.js 주입 · #deck 안 · 실제 텔레메트리) ───────── */
#cr-strip{
  position:absolute; left:0; right:0; top:0; height:var(--cr-strip); z-index:5;
  display:flex; align-items:stretch; background:var(--panel); border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:14px; letter-spacing:.12em; color:var(--dim); user-select:none;
}
#cr-strip .rc{ display:flex; align-items:center; gap:14px; padding:0 22px; border-right:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums; }
#cr-strip .rc .k{ color:var(--faint); font-size:12px; letter-spacing:.2em; }
#cr-strip .rc .v{ color:var(--fg); }
#cr-strip .brand{ padding:0 22px 0 24px; color:var(--fg); letter-spacing:.22em; font-weight:600; font-size:13px; gap:12px; }
#cr-strip .brand i{ width:16px; height:16px; background:var(--accent); display:block; }
#cr-strip button.rc{ color:var(--dim); }
#cr-strip button.rc:hover{ background:var(--panel2); }
#cr-strip .log{ flex:1; border-right:0; overflow:hidden; }
#cr-strip .log .v{ color:var(--dim); overflow:hidden; text-overflow:ellipsis; }
#cr-strip .log .v em{ font-style:normal; color:var(--fg); }

/* ───────── 타임코드 바 (theme.js 주입 · 세그먼트 수 = api.slides.length) ───────── */
#cr-tc{
  position:absolute; left:0; right:0; bottom:0; height:var(--cr-tc); z-index:5;
  background:var(--panel); border-top:1px solid var(--line);
  display:grid; grid-template-columns:230px 1fr; align-items:center; padding:0 24px; column-gap:28px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; color:var(--faint); user-select:none;
}
#cr-tc .t{ color:var(--fg); font-variant-numeric:tabular-nums; font-size:16px; display:flex; align-items:baseline; gap:14px; }
#cr-tc .t .k{ color:var(--faint); font-size:12px; letter-spacing:.2em; }
#cr-tc .track{ display:grid; grid-template-columns:repeat(var(--n,24),1fr); gap:5px; align-items:start; padding-top:12px; }
#cr-tc .track button{ display:block; text-align:left; color:var(--faint); letter-spacing:.1em; padding:0 0 6px; }
#cr-tc .seg{ display:block; height:6px; background:var(--line); position:relative; overflow:hidden; }
#cr-tc .seg i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); transition:width .3s var(--ease); }
#cr-tc .n{ display:block; margin-top:9px; font-size:11px; font-variant-numeric:tabular-nums; }
#cr-tc button.past .seg{ background:var(--dim); }
#cr-tc button.cur .n{ color:var(--accent); }
#cr-tc button:hover .n{ color:var(--fg); }

/* ───────── 격자 · 카드 (k-grid · k-cards · k-outro) ───────── */
.grid{ display:grid; gap:16px; }
.cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); }
.cell{ padding:30px 32px 32px; display:flex; flex-direction:column; gap:0; min-height:0; }
.cell-no{ font:600 16px/1 var(--font-mono); letter-spacing:.2em; color:var(--accent); }
.cell-title{ font:700 36px/1.2 var(--font-display); letter-spacing:-.03em; margin:22px 0 auto; }
.cell-text{ font:400 20px/1.5 var(--font-sans); color:var(--dim); margin-top:18px; text-wrap:balance; }
.cols-4 .cell{ min-height:380px; }
.nine{ gap:12px; }
.nine .cell{ padding:22px 26px 24px; }
.nine .cell-title{ font-size:30px; margin:14px 0 8px; }
.nine .cell-text{ font-size:19px; margin-top:0; }
.constellation .cell-title{ font-family:var(--font-mono); font-size:28px; letter-spacing:-.02em; }
.cards .cell,.links .cell{ min-height:380px; }
.cards .cell-text,.links .cell-text{ font-size:22px; }
.links .cell-title{ font-family:var(--font-mono); font-size:30px; letter-spacing:-.02em; color:var(--accent); }

/* ───────── 단계 (k-steps 4열 · k-ladder 세로) ───────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step{ padding:28px 30px 30px; display:flex; flex-direction:column; border-top:3px solid var(--line); min-height:340px; }
.step-no{ font:600 16px/1 var(--font-mono); letter-spacing:.2em; color:var(--accent); }
.step-title{ font:700 34px/1.2 var(--font-display); letter-spacing:-.03em; margin:22px 0 auto; }
.step-text{ font:400 20px/1.5 var(--font-sans); color:var(--dim); margin-top:18px; }
.step.hi{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); }
.step.hi .step-no,.step.hi .step-text{ color:var(--accent-on); }
.step.hi .step-text{ opacity:.9; }
.steps.ladder{ grid-template-columns:1fr; gap:8px; max-width:1680px; }
.ladder .step{
  border:0; background:transparent; min-height:0; padding:0;
  display:grid; grid-template-columns:120px 200px 1fr; gap:0 28px; align-items:stretch;
}
.ladder .step-no{ display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line); font-size:17px; color:var(--dim); }
.ladder .step-title{ display:flex; align-items:center; margin:0; font-size:27px; padding:20px 0; border-bottom:1px solid var(--line); color:var(--fg); }
.ladder .step-text{ display:flex; align-items:center; margin:0; padding:20px 0; border-bottom:1px solid var(--line); font-size:23px; }
.ladder .step.hi{ background:transparent; color:var(--fg); }
.ladder .step.hi .step-no{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); font-weight:600; }
.ladder .step.hi .step-title,.ladder .step.hi .step-text{ background:var(--panel); border:1px solid var(--line); padding:22px 28px; color:var(--fg); opacity:1; }

/* ───────── 리드아웃 (k-stats) ───────── */
.stats{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:16px; }
.stat{ padding:24px 28px 26px; display:grid; grid-template-columns:auto auto; grid-template-rows:170px auto; align-items:end; justify-content:start; column-gap:12px; }
.num{ font:600 96px/1 var(--font-mono); letter-spacing:-.05em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--fg); }
.unit{ font:600 30px/1 var(--font-sans); letter-spacing:-.02em; color:var(--dim); padding-bottom:6px; }
.label{ grid-column:1/-1; font:400 18px/1.45 var(--font-sans); color:var(--dim); margin-top:18px; align-self:start; }
.stat:first-child .num{ color:var(--accent); font-size:116px; }
.k-stats .lead{ margin-top:12px; font-size:28px; max-width:1500px; }

/* ───────── 표 (k-table) ───────── */
.tbl{ border-collapse:collapse; width:100%; font:400 24px/1.4 var(--font-sans); background:var(--panel); border:1px solid var(--line); }
.tbl th,.tbl td{ text-align:left; padding:15px 22px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl th{ font:600 14px/1 var(--font-mono); letter-spacing:.18em; color:var(--faint); text-transform:uppercase; padding:16px 22px; background:var(--panel2); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl td:first-child{ color:var(--dim); }
.tbl td.hi{ color:var(--fg); font-weight:600; background:var(--acc-tint); }
.tbl th.hi{ color:var(--accent); background:var(--acc-tint); }
.compare-tbl td:first-child{ font-family:var(--font-mono); font-size:20px; letter-spacing:.02em; }

/* ───────── 인용 (k-quote) ───────── */
.quote{ margin:0; padding-left:40px; border-left:3px solid var(--accent); }
.quote p{ font:700 74px/1.2 var(--font-display); letter-spacing:-.035em; margin:0 0 24px; color:var(--fg); }
.quote cite{ display:block; font:400 20px/1.4 var(--font-mono); letter-spacing:.12em; color:var(--faint); font-style:normal; }
.quote cite::before{ content:"— "; }
.k-quote .lead{ margin-top:8px; }

/* ───────── 도해 (k-diagram) ───────── */
.diagram{ width:100%; max-height:520px; display:block; color:var(--fg); overflow:visible; }
.diagram rect{ fill:var(--panel2); stroke:var(--line); stroke-width:2; }
.diagram .dg-t{ font:700 40px var(--font-display); letter-spacing:-.02em; fill:var(--fg); }
.diagram .dg-s{ font:400 17px var(--font-sans); fill:var(--dim); }
.diagram .dg-v{ font:600 15px var(--font-mono); letter-spacing:.06em; fill:var(--accent); }
.diagram .dg-arrow path{ stroke:var(--accent); stroke-width:3; fill:none; }
.diagram .dg-loop path{ stroke:var(--faint); stroke-width:2; fill:none; stroke-dasharray:6 6; }
.diagram .dg-loop .dg-v{ fill:var(--dim); font-size:18px; letter-spacing:.04em; }

/* ───────── 대비 (k-compare) ───────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.col{ padding:34px 38px 38px; }
.compare h3{ margin:0 0 22px; font:700 40px/1.2 var(--font-display); letter-spacing:-.03em; }
.compare .b{ border-color:var(--accent); background:var(--acc-tint); }
.compare .b h3{ color:var(--accent); }
.compare ul,.body-list{ margin:0; padding:0; list-style:none; }
.compare li,.body-list li{ position:relative; padding-left:34px; font:400 26px/1.5 var(--font-sans); color:var(--dim); }
.compare li + li,.body-list li + li{ margin-top:14px; }
.compare li::before,.body-list li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:10px; background:var(--accent); }
.compare .a li::before{ background:var(--faint); }
.body-list li{ font-size:30px; color:var(--fg); padding-left:40px; }
.body-list li b{ color:var(--accent); font-family:var(--font-mono); font-size:.86em; letter-spacing:.02em; }
.body-list li::before{ top:.72em; }

/* ───────── 콘솔 (k-terminal · 양 테마에서 다크 면) ───────── */
.terminal{
  margin:0; background:#0B0C0D; color:#ECEDE9; border:1px solid var(--line);
  padding:30px 34px; font:400 22px/1.8 var(--font-mono); letter-spacing:0; white-space:pre; overflow:hidden;
}
html[data-theme="light"] .terminal{ border-color:#0B0C0D; }
.terminal .prompt{ color:var(--cmds-pink); }
.terminal .dim{ color:#8E928D; }
.terminal .ok{ color:#ECEDE9; font-weight:600; }

/* ───────── 타임라인 (k-timeline) ───────── */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.tick{ padding:26px 26px 28px; border-top:3px solid var(--line); display:flex; flex-direction:column; min-height:300px; }
.tick-when{ font:600 30px/1 var(--font-mono); letter-spacing:-.02em; color:var(--accent); font-variant-numeric:tabular-nums; }
.tick-lv{ font:400 14px/1 var(--font-mono); letter-spacing:.2em; color:var(--faint); margin:16px 0 auto; text-transform:uppercase; }
.tick-what{ font:400 20px/1.5 var(--font-sans); color:var(--dim); margin-top:22px; }
.tick:nth-child(4){ border-top-color:var(--accent); }
.tick:nth-child(4) .tick-lv{ color:var(--accent); }

/* ───────── 막대 (k-bars) ───────── */
.bars{ display:grid; gap:10px; background:var(--panel); border:1px solid var(--line); padding:12px 28px; }
.bar{ display:grid; grid-template-columns:1fr 620px 90px; align-items:center; gap:28px; padding:14px 0; border-bottom:1px solid var(--line2); }
.bar:last-child{ border-bottom:0; }
.bar-label{ font:400 24px/1.4 var(--font-sans); color:var(--dim); }
.bar-label b{ font:600 15px/1 var(--font-mono); letter-spacing:.2em; color:var(--accent); margin-right:14px; }
.bar-track{ display:block; height:10px; background:var(--line2); position:relative; overflow:hidden; }
.bar-track i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--w) * 1%); background:var(--dim); }
.bar-val{ font:600 24px/1 var(--font-mono); letter-spacing:-.02em; text-align:right; font-variant-numeric:tabular-nums; color:var(--fg); }
.bar.hi .bar-label{ color:var(--fg); }
.bar.hi .bar-track i{ background:var(--accent); }
.bar.hi .bar-val{ color:var(--accent); }
.k-bars .lead{ font-size:27px; max-width:1680px; }

/* ───────── 토글 (k-toggle) ───────── */
.toggle{ display:flex; flex-direction:column; gap:28px; }
.toggle-ctl{ display:inline-flex; align-self:flex-start; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); }
.toggle-ctl button{
  font:600 20px/1 var(--font-sans); letter-spacing:-.01em; padding:14px 26px; color:var(--dim);
  display:flex; align-items:center; gap:12px; transition:background .25s var(--ease), color .25s var(--ease);
}
.toggle-ctl button::before{ content:""; width:10px; height:10px; border:1.5px solid var(--faint); border-radius:50%; }
.toggle-ctl button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-on); }
.toggle-ctl button[aria-pressed="true"]::before{ background:var(--accent-on); border-color:var(--accent-on); }
.toggle-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tg{ padding:30px 32px 32px; display:flex; flex-direction:column; min-height:280px; }
.tg-a,.tg-b{ font:700 44px/1.15 var(--font-display); letter-spacing:-.03em; margin-bottom:auto; }
.toggle[data-view="harness"] .tg-b{ color:var(--accent); }
.toggle[data-view="note"] .tg-b,.toggle[data-view="harness"] .tg-a{ display:none; }
.tg-desc{ font:400 19px/1.5 var(--font-sans); color:var(--dim); margin-top:22px; }
.toggle-verdict{ position:relative; padding-left:40px; font:400 30px/1.45 var(--font-sans); color:var(--fg); max-width:1680px; }
.toggle-verdict::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:10px; background:var(--accent); }
.toggle-verdict:empty{ display:none; }

/* ───────── 슬라이드 종류별 조정 ───────── */
.k-cover .headline{ font-size:124px; margin-top:120px; }
.k-cover .lead{ font-size:34px; }
.k-cover .foot-note{ font-family:var(--font-mono); font-size:17px; letter-spacing:.14em; color:var(--faint); }
.k-section .headline{ font-size:120px; margin-top:150px; }
.k-section .lead{ font:500 26px/1 var(--font-mono); letter-spacing:.14em; color:var(--accent); margin-top:20px; }
.k-statement .headline{ font-size:92px; }
.k-statement .lead{ margin-top:8px; }
.k-steps .headline,.k-ladder .headline{ font-size:96px; }
.k-grid .headline{ font-size:96px; }
.k-grid.k-grid .nine ~ .foot{ margin-top:auto; }
#s06 .headline,#s22 .headline{ font-size:84px; }
.k-stats .headline{ font-size:104px; }
.k-table .headline{ font-size:76px; }
.k-quote .headline{ font-size:96px; }
.k-diagram .headline{ font-size:104px; }
.k-compare .headline{ font-size:92px; }
.k-terminal .headline{ font-size:96px; }
.k-timeline .headline{ font-size:80px; }
.k-bars .headline{ font-size:80px; }
.k-cards .headline{ font-size:76px; }
.k-toggle .headline{ font-size:104px; }
.k-outro .headline{ font-size:120px; }
.k-outro .lead{ font-size:30px; }
html[data-aspect="16x10"] .k-cover .headline{ margin-top:170px; }
html[data-aspect="16x10"] .k-section .headline{ margin-top:210px; }
html[data-aspect="16x10"] .cols-4 .cell,html[data-aspect="16x10"] .steps:not(.ladder) .step{ min-height:360px; }
html[data-aspect="16x10"] .tick,html[data-aspect="16x10"] .cards .cell,html[data-aspect="16x10"] .links .cell{ min-height:380px; }

/* ───────── 인쇄 · 정적 폴백 ───────── */
@media print{
  #cr-strip,#cr-tc{ display:none !important; }
  .slide > *{ animation:none !important; opacity:1 !important; transform:none !important; }
  .slide{ padding-top:var(--pad-t); padding-bottom:var(--pad-b); }
  .terminal{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
html[data-print="1"] #cr-strip,html[data-print="1"] #cr-tc{ display:none; }