/* ══════════════════════════════════════════════════════════════════════════
   THEME · blueprint (설계도) — engine: scroll
   v8 Blueprint 이식. 제도판 어휘: 점 격자 지면 · 한 가지 잉크 · 도면 시트 프레임
   · 치수선 · 인덱스 버블 · 우하단 표제란(theme.js). 카드·그림자·이모지·그라디언트 없음.
   크기는 --u = 덱 폭/1920 에 비례(스크롤 엔진에서 폭 기준 스케일 → 16x9·16x10 동일).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 블루프린트 토큰 (코어 팔레트 위에 얹는 제도 어휘) ────────────────── */
:root{
  --u: calc(var(--dk-w, 1920px) / 1920px);   /* 폭 비례 스케일 (verify=1) */
  --bp-paper: var(--bg);
  --bp-ink:   var(--fg);
  --bp-dim:   var(--muted);
  --bp-rule:  var(--line);
  --bp-rule2: color-mix(in srgb, var(--fg) 7%, transparent);
  --bp-acc:   var(--accent);
  --bp-on:    var(--accent-on);
  --bp-dot:   rgba(19,27,22,.07);
  --bp-frame: calc(20px * var(--u));
  --bp-gut:   calc(120px * var(--u));
  /* 터미널: 라이트 지면에서 녹색 잉크가 안 읽혀 밝은 녹색 사용(v8 계승) */
  --bp-term-bg:  #101412;
  --bp-term-fg:  #E8ECE9;
  --bp-term-acc: #2FB488;
  --bp-term-dim: #8C948F;
}
html[data-theme="dark"]{
  --bp-dot: rgba(238,241,238,.08);
  --bp-term-bg:  #0A0D0B;
  --bp-term-acc: var(--cmds-pink);
  --bp-term-dim: #6B746E;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bp-dot: rgba(238,241,238,.08);
    --bp-term-bg:  #0A0D0B;
    --bp-term-acc: var(--cmds-pink);
    --bp-term-dim: #6B746E;
  }
}

/* ── 시트(슬라이드) ──────────────────────────────────────────────────── */
.slide{
  padding: calc(78px * var(--u)) var(--bp-gut) calc(216px * var(--u));
  justify-content:center; gap: calc(22px * var(--u));
  /* 점 격자 지면 — 색 그라디언트가 아니라 24px 피치 텍스처 */
  background-image: radial-gradient(var(--bp-dot) calc(1.4px * var(--u)), transparent calc(1.7px * var(--u)));
  background-size: calc(24px * var(--u)) calc(24px * var(--u));
  background-position: calc(12px * var(--u)) calc(12px * var(--u));
}
/* 도면 시트 프레임 + 내부 안전선 */
.slide::before{ content:""; position:absolute; inset:var(--bp-frame); border:1px solid var(--bp-rule); pointer-events:none; z-index:0; }
.slide::after { content:""; position:absolute; inset:calc(var(--bp-frame) + 6px * var(--u)); border:1px solid var(--bp-rule2); pointer-events:none; z-index:0; }
.slide > *{ position:relative; z-index:1; max-width:100%; }

/* 클로징(k-outro) 시트는 두꺼운 강조 프레임 */
.k-outro::before{ border-width:2px; border-color:var(--bp-acc); }

/* ── 표제란 · 폴리오 (theme.js 주입) ─────────────────────────────────── */
.bp-tb{
  position:absolute; z-index:2; right:calc(var(--bp-frame) + 6px * var(--u)); bottom:calc(var(--bp-frame) + 6px * var(--u));
  display:grid; grid-template-columns:auto auto; background:var(--bp-paper);
  border:1px solid var(--bp-rule); border-right:0; border-bottom:0;
  font:500 calc(11px * var(--u))/1.05 var(--font-mono); letter-spacing:.03em; color:var(--bp-dim);
  max-width:calc(560px * var(--u));
}
.bp-tb .row{ display:contents; }
.bp-tb span, .bp-tb b{ padding:calc(6px * var(--u)) calc(12px * var(--u)); border-right:1px solid var(--bp-rule); border-bottom:1px solid var(--bp-rule); white-space:nowrap; }
.bp-tb span{ color:var(--bp-dim); font-size:calc(9px * var(--u)); letter-spacing:.14em; text-transform:uppercase; min-width:calc(72px * var(--u)); opacity:.75; }
.bp-tb b{ font-weight:600; color:var(--bp-ink); min-width:calc(220px * var(--u)); max-width:calc(360px * var(--u)); overflow:hidden; text-overflow:ellipsis; }
.bp-tb b.no{ color:var(--bp-acc); }
.bp-tb b.sec{ color:var(--bp-acc); }

.bp-folio{
  position:absolute; z-index:2; left:calc(var(--bp-frame) + 12px * var(--u)); bottom:calc(var(--bp-frame) + 12px * var(--u));
  display:flex; align-items:center; gap:calc(12px * var(--u));
  font:600 calc(11px * var(--u))/1 var(--font-mono); letter-spacing:.12em; color:var(--bp-dim);
}
.bp-folio .no{ color:var(--bp-acc); }
.bp-folio .track{ width:calc(120px * var(--u)); height:1px; background:var(--bp-rule2); position:relative; overflow:hidden; }
.bp-folio .track i{ position:absolute; inset:0; background:var(--bp-acc); transform-origin:left; }

/* 측정된 치수선 (theme.js — 표지·섹션 헤드라인 폭) */
.bp-mdim{ display:block; position:relative; height:1px; background:var(--bp-rule); margin:calc(20px * var(--u)) 0 0; }
.bp-mdim::before, .bp-mdim::after{ content:""; position:absolute; top:calc(-5px * var(--u)); width:1px; height:calc(11px * var(--u)); background:var(--bp-rule); }
.bp-mdim::before{ left:0; } .bp-mdim::after{ right:0; }
.bp-mdim .val{ position:absolute; top:calc(-9px * var(--u)); left:50%; transform:translateX(-50%); background:var(--bp-paper); padding:0 calc(8px * var(--u)); font:600 calc(11px * var(--u))/1 var(--font-mono); letter-spacing:.06em; color:var(--bp-acc); }

/* ── 공통 타이포 ─────────────────────────────────────────────────────── */
.kicker{
  font:600 calc(15px * var(--u))/1 var(--font-mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--bp-acc); margin:0; display:flex; align-items:center; gap:calc(14px * var(--u));
}
.kicker::before{ content:""; width:calc(30px * var(--u)); height:1px; background:var(--bp-acc); flex:none; }

.headline{
  font:800 calc(84px * var(--u))/1.12 var(--font-display); letter-spacing:-.03em; margin:0; text-wrap:balance;
}
.headline em{ font-style:normal; color:var(--bp-acc); }
.headline .sub{ display:block; font-size:.5em; font-weight:600; color:var(--bp-dim); margin-top:.28em; letter-spacing:-.02em; }

.lead{
  font:400 calc(28px * var(--u))/1.55 var(--font-sans); color:var(--bp-dim); margin:0; max-width:calc(1360px * var(--u)); text-wrap:pretty;
}
.lead strong{ color:var(--bp-ink); font-weight:600; }
.lead em{ font-style:normal; color:var(--bp-acc); font-weight:700; }

/* ── FOOT (지시선 달린 얇은 각주 · 표제란/폴리오 위 밴드) ─────────────── */
.foot{
  margin-top:auto; display:flex; justify-content:space-between; gap:calc(40px * var(--u));
  padding:calc(16px * var(--u)) 0 0; border-top:1px solid var(--bp-rule);
  font:400 calc(17px * var(--u))/1.45 var(--font-sans); color:var(--bp-dim);
  padding-right:calc(380px * var(--u));   /* 우하단 표제란 열 확보 */
}
.foot-note{ position:relative; padding-left:calc(16px * var(--u)); max-width:calc(1000px * var(--u)); }
.foot-note::before{ content:""; position:absolute; left:0; top:.72em; width:calc(8px * var(--u)); height:1px; background:var(--bp-acc); }
.foot-src{ font-family:var(--font-mono); font-size:calc(14px * var(--u)); color:var(--bp-dim); white-space:nowrap; opacity:.8; }

/* ── 인덱스 버블 ①②③ ────────────────────────────────────────────────── */
.cell-no, .step-no, .tick-when{ font-family:var(--font-mono); }

/* ── GRID (cols-3 / cols-4 / nine) ───────────────────────────────────── */
.grid{ display:grid; gap:calc(1px * var(--u)); background:var(--bp-rule); border:1px solid var(--bp-rule); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.cell{ background:var(--bp-paper); padding:calc(24px * var(--u)) calc(26px * var(--u)); display:flex; flex-direction:column; gap:calc(9px * var(--u)); }
.cell-no{ font:600 calc(15px * var(--u))/1 var(--font-mono); letter-spacing:.08em; color:var(--bp-acc); }
.cell-title{ font:700 calc(27px * var(--u))/1.18 var(--font-display); letter-spacing:-.02em; color:var(--bp-ink); }
.cell-text{ font:400 calc(19px * var(--u))/1.42 var(--font-sans); color:var(--bp-dim); }
/* 9칸: 조밀 조판 */
.grid.nine .cell{ padding:calc(18px * var(--u)) calc(22px * var(--u)); gap:calc(6px * var(--u)); }
.grid.nine .cell-title{ font-size:calc(24px * var(--u)); }
.grid.nine .cell-text{ font-size:calc(16px * var(--u)); line-height:1.38; }
.grid.constellation .cell-title{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.01em; }
/* cards: 순차 공개 · 3칸 */
.grid.cards .cell{ padding:calc(26px * var(--u)) calc(28px * var(--u)); gap:calc(11px * var(--u)); }
.grid.cards .cell-no{ font-size:calc(13px * var(--u)); letter-spacing:.16em; }
.grid.cards .cell-text{ font-size:calc(18px * var(--u)); }
/* links(outro): 강조 프레임 안의 3칸 */
.grid.links .cell-title{ font-family:var(--font-mono); font-weight:600; font-size:calc(23px * var(--u)); color:var(--bp-acc); letter-spacing:-.01em; }

/* ── STEPS (4열) · LADDER (세로) ──────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(24px * var(--u)); }
.step{ border-top:2px solid var(--bp-rule); padding-top:calc(16px * var(--u)); display:grid; gap:calc(8px * var(--u)); position:relative; }
.step::before{ content:""; position:absolute; top:-2px; left:0; width:calc(11px * var(--u)); height:2px; background:var(--bp-ink); }
.step-no{ font:600 calc(18px * var(--u))/1 var(--font-mono); letter-spacing:.04em; color:var(--bp-acc); }
.step-title{ font:700 calc(28px * var(--u))/1.18 var(--font-display); letter-spacing:-.02em; color:var(--bp-ink); }
.step-text{ font:400 calc(19px * var(--u))/1.44 var(--font-sans); color:var(--bp-dim); }
.step.hi{ border-top-color:var(--bp-acc); } .step.hi::before{ background:var(--bp-acc); } .step.hi .step-title{ color:var(--bp-acc); }

.steps.ladder{ grid-template-columns:60px 1fr; gap:0; border-top:1px solid var(--bp-rule); border-bottom:1px solid var(--bp-ink); max-width:calc(1200px * var(--u)); }
.steps.ladder .step{ display:contents; border:0; }
.steps.ladder .step::before{ display:none; }
.steps.ladder .step-no{ grid-column:1; border-right:1px solid var(--bp-rule); border-bottom:1px solid var(--bp-rule); display:flex; align-items:center; justify-content:center; padding:calc(14px * var(--u)) 0; letter-spacing:0; }
.steps.ladder .step-title, .steps.ladder .step-text{ grid-column:2; border-bottom:1px solid var(--bp-rule); }
.steps.ladder .step-title{ padding:calc(14px * var(--u)) calc(26px * var(--u)) calc(2px * var(--u)); font-size:calc(25px * var(--u)); }
.steps.ladder .step-text{ padding:0 calc(26px * var(--u)) calc(14px * var(--u)); }
.steps.ladder .step.hi .step-no{ color:var(--bp-acc); border-color:var(--bp-acc); }
.steps.ladder .step.hi .step-title{ color:var(--bp-acc); border-color:var(--bp-acc); }

/* ── STATEMENT (대활자 선언 + body-list) ─────────────────────────────── */
.k-statement .headline{ font-size:calc(58px * var(--u)); line-height:1.2; }
.body-list{ margin:0; padding:0; list-style:none; display:grid; gap:calc(12px * var(--u)); max-width:calc(1200px * var(--u)); }
.body-list li{ position:relative; padding-left:calc(30px * var(--u)); font:400 calc(24px * var(--u))/1.5 var(--font-sans); color:var(--bp-dim); }
.body-list li::before{ content:""; position:absolute; left:0; top:.7em; width:calc(16px * var(--u)); height:1px; background:var(--bp-acc); }
.body-list li b{ color:var(--bp-ink); font-family:var(--font-mono); font-weight:600; font-size:.9em; letter-spacing:.02em; }

/* ── STATS (치수선 양식 숫자) ─────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(40px * var(--u)); }
.stat{ position:relative; padding-top:calc(18px * var(--u)); border-top:1px solid var(--bp-rule); display:grid; }
.stat::before, .stat::after{ content:""; position:absolute; top:calc(-5px * var(--u)); width:1px; height:calc(11px * var(--u)); background:var(--bp-rule); }
.stat::before{ left:0; } .stat::after{ right:0; }
.num{ font:600 calc(88px * var(--u))/1 var(--font-mono); letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--bp-acc); }
.unit{ font:600 calc(30px * var(--u))/1 var(--font-mono); color:var(--bp-dim); margin-top:calc(6px * var(--u)); }
.label{ font:500 calc(17px * var(--u))/1.4 var(--font-mono); letter-spacing:.02em; color:var(--bp-dim); margin-top:calc(10px * var(--u)); }
.k-stats .lead{ margin-top:calc(6px * var(--u)); }

/* ── TABLE (괘선 도면 표) ─────────────────────────────────────────────── */
.tbl{ border-collapse:collapse; width:100%; font:400 calc(23px * var(--u))/1.4 var(--font-sans); }
.tbl th, .tbl td{ text-align:left; padding:calc(12px * var(--u)) calc(16px * var(--u)); border:1px solid var(--bp-rule); }
.tbl thead th{ font:600 calc(19px * var(--u))/1.3 var(--font-mono); letter-spacing:.02em; color:var(--bp-dim); text-transform:none; background:color-mix(in srgb, var(--bp-acc) 5%, transparent); }
.tbl tbody td:first-child{ font-weight:600; color:var(--bp-ink); }
.tbl .hi{ color:var(--bp-acc); font-weight:600; }
.tbl thead th.hi{ color:var(--bp-acc); background:color-mix(in srgb, var(--bp-acc) 12%, transparent); }
.compare-tbl{ font-size:calc(21px * var(--u)); }
.compare-tbl th, .compare-tbl td{ padding:calc(10px * var(--u)) calc(14px * var(--u)); }

/* ── QUOTE ────────────────────────────────────────────────────────────── */
.quote{ margin:0; border-left:2px solid var(--bp-acc); padding-left:calc(36px * var(--u)); }
.quote p{ font:700 calc(58px * var(--u))/1.28 var(--font-display); letter-spacing:-.02em; margin:0 0 calc(22px * var(--u)); color:var(--bp-ink); }
.quote cite{ font:500 calc(22px * var(--u))/1.4 var(--font-mono); letter-spacing:.02em; color:var(--bp-dim); font-style:normal; }

/* ── DIAGRAM (k-diagram · 도면의 본령) ───────────────────────────────── */
.diagram{ width:100%; max-height:calc(560px * var(--u)); display:block; color:var(--bp-ink); }
.diagram rect{ fill:var(--bp-paper); stroke:currentColor; stroke-width:1.5; }
.diagram .dg-layer text.dg-t{ font:700 calc(38px) var(--font-display); fill:currentColor; letter-spacing:-.01em; }
.diagram .dg-s{ font:400 calc(21px) var(--font-sans); fill:var(--bp-dim); }
.diagram .dg-arrow path{ stroke:var(--bp-acc); stroke-width:2.5; fill:none; marker-end:none; }
.diagram .dg-v{ font:600 calc(22px) var(--font-mono); fill:var(--bp-acc); letter-spacing:.02em; }
.diagram .dg-loop path{ stroke:var(--bp-acc); stroke-width:1.5; stroke-dasharray:4 4; fill:none; }
/* 화살촉을 CSS 로 못 넣으므로 arrow 끝을 치수선 틱처럼 — path 자체로 충분 */

/* ── COMPARE (2평면 도해) ─────────────────────────────────────────────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:calc(1px * var(--u)); background:var(--bp-rule); border:1px solid var(--bp-rule); }
.compare .col{ background:var(--bp-paper); padding:calc(28px * var(--u)) calc(32px * var(--u)); }
.compare h3{ font:700 calc(32px * var(--u))/1.2 var(--font-display); letter-spacing:-.02em; margin:0 0 calc(18px * var(--u)); color:var(--bp-ink); position:relative; padding-bottom:calc(12px * var(--u)); border-bottom:1px solid var(--bp-rule); }
.compare .b h3{ color:var(--bp-acc); border-color:var(--bp-acc); }
.compare ul{ margin:0; padding:0; list-style:none; display:grid; gap:calc(12px * var(--u)); }
.compare li{ position:relative; padding-left:calc(26px * var(--u)); font:400 calc(23px * var(--u))/1.45 var(--font-sans); color:var(--bp-dim); }
.compare li::before{ content:""; position:absolute; left:0; top:.72em; width:calc(13px * var(--u)); height:1px; background:var(--bp-rule); }
.compare .b li::before{ background:var(--bp-acc); }

/* ── TERMINAL (DETAIL 인셋) ──────────────────────────────────────────── */
.terminal{
  margin:0; background:var(--bp-term-bg); color:var(--bp-term-fg);
  border:1px solid var(--bp-rule); position:relative;
  padding:calc(30px * var(--u)) calc(30px * var(--u)) calc(26px * var(--u));
  font:400 calc(21px * var(--u))/1.62 var(--font-mono); letter-spacing:0; white-space:pre; overflow:hidden;
}
.terminal::before{
  content:"DETAIL"; position:absolute; top:calc(-9px * var(--u)); left:calc(20px * var(--u));
  background:var(--bp-paper); padding:0 calc(8px * var(--u));
  font:600 calc(11px * var(--u))/1 var(--font-mono); letter-spacing:.16em; color:var(--bp-acc);
}
.terminal .prompt{ color:var(--bp-term-acc); font-weight:600; }
.terminal .dim{ color:var(--bp-term-dim); }
.terminal .ok{ color:var(--bp-term-acc); }

/* ── TIMELINE (치수선 틱) ─────────────────────────────────────────────── */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:calc(24px * var(--u)); }
.tick{ position:relative; padding-top:calc(20px * var(--u)); border-top:1px solid var(--bp-rule); display:grid; gap:calc(8px * var(--u)); }
.tick::before{ content:""; position:absolute; top:calc(-5px * var(--u)); left:0; width:1px; height:calc(11px * var(--u)); background:var(--bp-acc); }
.tick-when{ font:700 calc(26px * var(--u))/1 var(--font-mono); letter-spacing:-.01em; color:var(--bp-acc); }
.tick-lv{ font:600 calc(17px * var(--u))/1 var(--font-mono); letter-spacing:.04em; color:var(--bp-dim); }
.tick-what{ font:400 calc(18px * var(--u))/1.42 var(--font-sans); color:var(--bp-dim); }

/* ── BARS (치수 바) ──────────────────────────────────────────────────── */
.bars{ display:grid; gap:calc(15px * var(--u)); }
.bar{ display:grid; grid-template-columns:1fr calc(560px * var(--u)) calc(84px * var(--u)); align-items:center; gap:calc(22px * var(--u)); font:400 calc(23px * var(--u))/1.35 var(--font-sans); }
.bar-label{ color:var(--bp-dim); }
.bar-label b{ font-family:var(--font-mono); font-weight:700; color:var(--bp-acc); margin-right:calc(8px * var(--u)); }
.bar-track{ height:calc(16px * var(--u)); background:var(--bp-rule); position:relative; }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 1%); background:var(--bp-acc); }
.bar-val{ font:600 calc(24px * var(--u))/1 var(--font-mono); text-align:right; color:var(--bp-ink); }
.bar.hi .bar-label b, .bar.hi .bar-val{ color:var(--bp-acc); }
.bar.hi .bar-track i{ background:var(--bp-acc); }
.k-bars .lead{ margin-top:calc(8px * var(--u)); }

/* ── TOGGLE (관점 전환) ──────────────────────────────────────────────── */
.toggle-ctl{ display:flex; gap:calc(10px * var(--u)); margin-bottom:calc(24px * var(--u)); }
.toggle-ctl button{
  font:600 calc(21px * var(--u))/1 var(--font-mono); letter-spacing:.02em; padding:calc(13px * var(--u)) calc(20px * var(--u));
  border:1px solid var(--bp-rule); background:var(--bp-paper); color:var(--bp-dim); cursor:pointer;
}
.toggle-ctl button[aria-pressed="true"]{ background:var(--bp-acc); color:var(--bp-on); border-color:var(--bp-acc); }
.toggle-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(1px * var(--u)); background:var(--bp-rule); border:1px solid var(--bp-rule); }
.tg{ background:var(--bp-paper); padding:calc(24px * var(--u)) calc(24px * var(--u)); display:grid; gap:calc(8px * var(--u)); }
.tg-a, .tg-b{ font:700 calc(36px * var(--u))/1.1 var(--font-display); letter-spacing:-.02em; color:var(--bp-ink); }
.tg-b{ color:var(--bp-acc); }
.toggle[data-view="note"] .tg-b, .toggle[data-view="harness"] .tg-a{ display:none; }
.tg-desc{ font:400 calc(17px * var(--u))/1.4 var(--font-sans); color:var(--bp-dim); }
.toggle-verdict{ font:400 calc(28px * var(--u))/1.5 var(--font-sans); margin:calc(24px * var(--u)) 0 0; color:var(--bp-acc); position:relative; padding-left:calc(16px * var(--u)); }
.toggle-verdict::before{ content:""; position:absolute; left:0; top:.72em; width:calc(8px * var(--u)); height:1px; background:var(--bp-acc); }

/* ── 순차 공개 (블루프린트: 8px 상승 페이드; svg 는 페이드만) ────────── */
html.js [data-step]{ opacity:0; transform:translateY(calc(8px * var(--u))); transition:opacity .42s cubic-bezier(.22,.8,.3,1), transform .42s cubic-bezier(.22,.8,.3,1); }
html.js [data-step].in{ opacity:1; transform:none; }
html.js svg [data-step]{ transform:none; }
@media (prefers-reduced-motion: reduce){ html.js [data-step]{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ── 패널(코어 크롬) 재스킨 — 제도판 톤 ─────────────────────────────── */
:root{
  --dk-font: var(--font-mono);
  --dk-panel-bg: color-mix(in srgb, var(--bg) 92%, transparent);
  --dk-panel-line: var(--bp-rule);
  --dk-accent: var(--bp-acc);
}

/* ── 인쇄: 표제란·폴리오·프레임 유지, 점 격자 유지, 코어 크롬만 숨김 ── */
@media print{
  .slide{ background-image:radial-gradient(var(--bp-dot) 1.4px, transparent 1.7px); background-size:24px 24px; }
  .bp-tb, .bp-folio{ position:absolute; }
}