/* ═══════════════════════════════════════════════════════════════
   Section Drawing (단면도) · theme.css  — port of v9-section-drawing
   engine: stage (1920×1080 / 1920×1200)
   언어: v7 Cinema 고정 캔버스 + v8 Blueprint 도면 어휘 → 단면(Section).
         좌측 세로 눈금자가 절단선 A–A′ 그 자체이고, 24장은 그 위의
         스테이션. 치수 버블이 현재 스테이션 번호를 *대체*한다(이중 번호 없음).
   라이트=제도 벨럼 + 녹색 잉크 · 다크=칠판 슬레이트 + 분홍 잉크.
   장식 DOM(프레임·눈금자·표제·시트 라벨)은 theme.js 가 주입한다.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 팔레트 (코어 토큰 덮어쓰기 + 테마 고유 변수) ───────── */
:root{
  --bg:#FAF9F3; --fg:#131813; --muted:#4C554D; --faint:#8B938A;
  --line:#D3D6CC; --line2:#E7E9E0; --panel:#F1F0E7;
  --accent:var(--cmds-green); --accent-on:#FFFFFF;
  --tint:rgba(19,69,56,.06); --tint2:rgba(19,69,56,.11);
  --term-bg:#0E1512; --term-fg:#E8ECE7; --term-dim:#8B938A;
  --term-acc:var(--cmds-pink); --term-ok:color-mix(in srgb, var(--cmds-green) 45%, #FFFFFF);
  --ease:cubic-bezier(.22,.78,.28,1);
  /* 코어 패널 재스킨 */
  --dk-panel-bg:rgba(241,240,231,.94); --dk-panel-fg:#131813; --dk-panel-line:#D3D6CC;
  --dk-font:var(--font-mono); --dk-accent:var(--accent);
  /* 눈금자 기하 (16x10 은 stage-h 로 span 이 늘어남) */
  --rul-w:244px; --rul-x:150px; --rul-top:150px; --rul-bottom:150px;
  --pad-t:118px; --pad-b:132px; --pad-r:150px;
}
html[data-theme="dark"]{
  --bg:#0D1211; --fg:#EDEFEA; --muted:#9BA39C; --faint:#606860;
  --line:#242B27; --line2:#171C19; --panel:#131917;
  --accent:var(--cmds-pink); --accent-on:#1B1B1B;
  --tint:rgba(233,133,162,.10); --tint2:rgba(233,133,162,.16);
  --term-bg:#080B0A; --term-fg:#EDEFEA; --term-dim:#6C746D;
  --term-acc:var(--cmds-pink); --term-ok:color-mix(in srgb, var(--cmds-green) 40%, #FFFFFF);
  --dk-panel-bg:rgba(19,25,23,.94); --dk-panel-fg:#EDEFEA; --dk-panel-line:#242B27;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:#0D1211; --fg:#EDEFEA; --muted:#9BA39C; --faint:#606860;
    --line:#242B27; --line2:#171C19; --panel:#131917;
    --accent:var(--cmds-pink); --accent-on:#1B1B1B;
    --tint:rgba(233,133,162,.10); --tint2:rgba(233,133,162,.16);
    --term-bg:#080B0A; --term-fg:#EDEFEA; --term-dim:#6C746D;
    --term-acc:var(--cmds-pink); --term-ok:color-mix(in srgb, var(--cmds-green) 40%, #FFFFFF);
    --dk-panel-bg:rgba(19,25,23,.94); --dk-panel-fg:#EDEFEA; --dk-panel-line:#242B27;
  }
}
html[data-aspect="16x10"]{ --pad-t:150px; --pad-b:150px; }

body{ font-size:24px; line-height:1.5; letter-spacing:-.012em; font-feature-settings:"kern","liga","calt"; }
b,strong{ font-weight:700; color:var(--accent); }
code{ font-family:var(--font-mono); font-size:.86em; letter-spacing:0; padding:.06em .34em; border:1px solid var(--line); border-radius:3px; }

/* ───────── 지면: 제도 벨럼 (수평 눈금 결 · 32px 피치) ─────────
   [사용자 수정 1] 눈금이 본문과 경쟁하지 않도록 — 알파를 낮추고
   좌측 눈금자 영역에서 본문 쪽으로 mask 그라디언트로 사라지게 한다. */
html[data-engine="stage"] #deck{ overflow:hidden; }
html[data-engine="stage"] #deck::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(to bottom, var(--line2) 0 1px, transparent 1px 32px);
  opacity:.5;
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 var(--rul-w), rgba(0,0,0,.35) 560px, rgba(0,0,0,.08) 1100px, transparent 1700px);
          mask-image:linear-gradient(to right, #000 0, #000 var(--rul-w), rgba(0,0,0,.35) 560px, rgba(0,0,0,.08) 1100px, transparent 1700px);
}
/* 도면 프레임 이중 괘선 (theme.js 주입) */
.sd-frame,.sd-frame2{ position:absolute; pointer-events:none; z-index:1; }
.sd-frame{ inset:28px; border:1.5px solid var(--line); }
.sd-frame2{ inset:34px; border:1px solid var(--line2); }

/* ───────── 좌측 세로 눈금자 = 절단선 A–A′ (theme.js 주입) ───────── */
.sd-ruler{ position:absolute; left:0; top:0; width:var(--rul-w); height:100%; z-index:3; pointer-events:none; font-family:var(--font-mono); }
.sd-ruler .axis{ position:absolute; left:var(--rul-x); top:var(--rul-top); bottom:var(--rul-bottom); width:1.5px; background:var(--line); }
.sd-ruler .cap{ position:absolute; left:calc(var(--rul-x) - 30px); width:60px; text-align:center; font-size:19px; letter-spacing:.16em; color:var(--accent); font-weight:700; line-height:1; }
.sd-ruler .cap.top{ top:calc(var(--rul-top) - 34px); }
.sd-ruler .cap.bot{ top:calc(100% - var(--rul-bottom) + 14px); }
.sd-ruler .sect{ position:absolute; left:34px; top:calc(50% + 96px); transform:rotate(-90deg); transform-origin:left center; white-space:nowrap; font-size:14px; letter-spacing:.42em; color:var(--faint); line-height:1; }
.sd-stations{ position:absolute; left:0; top:var(--rul-top); bottom:var(--rul-bottom); width:var(--rul-w); }
.stn{ position:absolute; left:0; width:var(--rul-w); height:0; top:calc(var(--p) * 100%); }
.stn .stn-tick{ position:absolute; left:calc(var(--rul-x) - 12px); top:-.75px; width:14px; height:1.5px; background:var(--line); }
.stn .no{ position:absolute; left:calc(var(--rul-x) - 62px); top:-8px; width:42px; text-align:right; font-size:14px; line-height:16px; letter-spacing:.06em; color:var(--faint); font-variant-numeric:tabular-nums; }
/* 섹션 시작 스테이션 — 긴 눈금 + 섹션 문자 */
.stn.sec .stn-tick{ left:calc(var(--rul-x) - 24px); width:26px; background:var(--muted); }
.stn .lbl{ position:absolute; left:calc(var(--rul-x) - 104px); top:-8px; width:30px; text-align:right; font-size:13px; line-height:16px; letter-spacing:.1em; font-weight:700; color:var(--accent); }
.stn.pass .no{ color:var(--muted); }
/* [사용자 수정 2] 현재 스테이션: 눈금자 번호를 숨기고 치수 버블이 그 자리를 정확히 덮는다 */
.stn.cur .no{ visibility:hidden; }
.stn.cur .stn-tick{ background:var(--accent); }
.sd-head{ position:absolute; left:var(--rul-x); top:calc(var(--p) * 100%); width:0; height:0; z-index:4; transition:top .5s var(--ease); }
.sd-head .tri{ position:absolute; left:-13px; top:-9px; width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:13px solid var(--accent); }
/* datum — 절단선 위 깊이 측정선. 본문을 관통하지 않도록 420px 안에서 사라진다 */
.sd-head .datum{ position:absolute; left:0; top:-.75px; width:300px; height:1.5px; background:var(--accent); opacity:.34;
  -webkit-mask-image:linear-gradient(to right,#000,transparent); mask-image:linear-gradient(to right,#000,transparent); }
.sd-head .bub{ position:absolute; left:-84px; top:-20px; width:64px; height:40px; border:1.5px solid var(--accent); border-radius:4px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:21px; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1; }
@media (prefers-reduced-motion: reduce){ .sd-head{ transition:none; } }

/* 우하단 도면 표제 (theme.js 주입) */
.sd-legend{ position:absolute; right:44px; bottom:7px; z-index:3; pointer-events:none; font:500 12px/1 var(--font-mono); letter-spacing:.14em; color:var(--faint); font-variant-numeric:tabular-nums; }
.sd-legend b{ color:var(--accent); font-weight:700; }
/* 시트 우상단 섹션 라벨 (theme.js 가 각 슬라이드에 주입) */
.sd-sheet{ position:absolute; right:var(--pad-r); top:82px; font-family:var(--font-mono); font-size:19px; letter-spacing:.14em; color:var(--faint); white-space:nowrap; }
.sd-sheet b{ color:var(--accent); font-weight:700; }

/* ───────── 슬라이드 공통 ───────── */
html[data-engine="stage"] .slide{ padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--rul-w); z-index:2; gap:0; }
html[data-engine="stage"] .slide[data-active]{ animation:sd-fade .5s var(--ease) both; }
@keyframes sd-fade{ from{ opacity:0 } to{ opacity:1 } }
.kicker{ position:absolute; left:var(--rul-w); top:82px; margin:0; font-family:var(--font-mono); font-size:19px; letter-spacing:.14em; color:var(--muted); display:inline-flex; align-items:center; gap:16px; line-height:1; text-transform:none; }
.kicker::before{ content:"⌐"; color:var(--accent); font-size:22px; line-height:1; }
.headline{ margin:0; font-family:var(--font-display); font-weight:800; font-size:60px; line-height:1.13; letter-spacing:-.035em; text-wrap:balance; color:var(--fg); }
.headline em{ font-style:normal; color:var(--accent); }
.headline .sub{ display:block; font-size:.42em; font-weight:600; letter-spacing:-.02em; color:var(--muted); margin-top:.28em; }
.lead{ margin:22px 0 0; font-size:30px; line-height:1.5; color:var(--muted); max-width:1400px; }
.lead b{ color:var(--fg); }
/* 각주 = 지시선 캡션 + 도면 출처 */
.foot{ margin-top:auto; padding-top:26px; display:flex; justify-content:space-between; align-items:baseline; gap:40px; }
.foot-note{ position:relative; padding-left:40px; font-size:21px; line-height:1.5; color:var(--faint); max-width:1180px; }
.foot-note::before{ content:""; position:absolute; left:0; top:15px; width:26px; height:1px; background:var(--accent); }
.foot-note b{ color:var(--muted); }
.foot-src{ font-family:var(--font-mono); font-size:16px; letter-spacing:.12em; color:var(--faint); white-space:nowrap; }

/* 인덱스 버블 (원+숫자/코드) */
.ix{ display:inline-grid; place-items:center; height:30px; min-width:30px; padding:0 8px; border:1.5px solid var(--accent); border-radius:15px; font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--accent); letter-spacing:.04em; }

/* ───────── 모션 ───────── */
html.js [data-step]{ opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js [data-step].in{ opacity:1; transform:none; }
html.js svg [data-step]{ transform:none; }

/* ═════════ k-cover ═════════ */
.k-cover .headline{ font-size:134px; margin-top:auto; }
.k-cover .lead{ margin-top:40px; font-size:32px; max-width:1500px; }
.k-cover .foot{ margin-top:auto; }
.k-cover .foot-note{ font-size:22px; color:var(--muted); }

/* ═════════ k-section ═════════ */
.k-section .headline{ font-size:118px; margin-top:auto; }
.k-section .headline .sub{ font-size:.4em; }
.k-section .lead{ margin-top:44px; margin-bottom:auto; font-family:var(--font-mono); font-size:24px; letter-spacing:.12em; color:var(--accent); }

/* ═════════ k-statement ═════════ */
.k-statement .headline{ font-size:88px; margin-top:8px; }
.k-statement .lead{ margin-top:34px; font-size:30px; max-width:1500px; }
.body-list{ margin:36px 0 0; padding:0; list-style:none; max-width:1500px; border-left:1.5px solid var(--fg); }
.body-list li{ position:relative; padding:18px 0 18px 30px; border-top:1px solid var(--line); font-size:28px; line-height:1.45; color:var(--muted); }
.body-list li:first-child{ border-top:0; }
.body-list li::before{ content:""; position:absolute; left:-1.5px; top:0; width:14px; height:1.5px; background:var(--fg); }
.body-list li b{ color:var(--accent); font-family:var(--font-mono); font-size:.8em; letter-spacing:.08em; margin-right:6px; }

/* ═════════ k-steps (4열 시연 패널) ═════════ */
.steps{ margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--fg); }
.step{ position:relative; padding:32px 32px 36px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:14px; min-height:360px; }
.step + .step{ padding-left:32px; border-left:1px solid var(--line); }
.step-no{ font-family:var(--font-mono); font-size:18px; letter-spacing:.1em; color:var(--accent); font-weight:700; }
.step-title{ font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1.2; color:var(--fg); margin-top:4px; }
.step-text{ margin-top:14px; font-size:22px; line-height:1.55; color:var(--muted); }
.step.hi{ border-bottom:2px solid var(--accent); }

/* ═════════ k-ladder (4단 입면 단면) ═════════ */
.steps.ladder{ grid-template-columns:1fr; border-top:0; border-left:1.5px solid var(--fg); margin-top:36px; max-width:1520px; }
.ladder .step{ min-height:0; display:grid; grid-template-columns:110px 300px 1fr; align-items:center; gap:28px; padding:22px 28px 22px 30px; border-bottom:0; border-top:1px solid var(--line); border-left:0; }
.ladder .step:first-child{ border-top:0; }
.ladder .step::before{ content:""; position:absolute; left:-1.5px; top:0; width:14px; height:1.5px; background:var(--fg); }
.ladder .step-title{ font-size:32px; margin:0; }
.ladder .step-text{ margin:0; font-size:22px; color:var(--muted); }
.ladder .step.hi{ border-top:1.5px solid var(--accent); background:var(--tint); margin-top:-1px; overflow:hidden; }
.ladder .step.hi::before{ background:var(--accent); }
.ladder .step.hi::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.13;
  background:repeating-linear-gradient(45deg, var(--accent) 0 1.4px, transparent 1.4px 9px); }
.ladder .step.hi .step-title,.ladder .step.hi .step-text{ color:var(--fg); }
.ladder .step.hi .step-no{ color:var(--accent); }
.ladder .step > *{ position:relative; z-index:1; }

/* ═════════ k-grid · k-cards · k-outro (베이 = 단면 슬라이스) ═════════ */
.grid{ margin-top:40px; display:grid; border:1.5px solid var(--fg); }
.cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); }
.cell{ position:relative; padding:28px 30px 26px; display:flex; flex-direction:column; gap:10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.cols-4 .cell:nth-child(4n),.cols-3 .cell:nth-child(3n){ border-right:0; }
.cols-4 .cell:nth-last-child(-n+4),.cols-3 .cell:nth-last-child(-n+3){ border-bottom:0; }
.cell-no{ font-family:var(--font-mono); font-size:17px; letter-spacing:.08em; color:var(--faint); font-weight:600; }
.cell-title{ font-family:var(--font-display); font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1.2; color:var(--fg); margin-top:8px; }
.cell-text{ font-size:20px; line-height:1.5; color:var(--muted); margin-top:14px; padding-top:14px; }
.cols-4 .cell{ min-height:300px; }
.cols-4 .cell-text{ border-top:1px solid var(--line); }
.nine .cell{ padding:22px 28px 22px; }
.nine .cell-title{ font-size:30px; margin-top:4px; }
.nine .cell-text{ font-size:19px; padding-top:6px; margin-top:6px; }
.nine .cell-no{ color:var(--accent); }
.constellation .cell-title{ font-family:var(--font-mono); font-size:27px; letter-spacing:-.01em; }
.cards .cell{ min-height:330px; }
.cards .cell-no{ color:var(--accent); }
.cards .cell-text{ border-top:1px solid var(--line); }
.links .cell{ min-height:240px; }
.links .cell-title{ font-family:var(--font-mono); font-size:27px; color:var(--accent); letter-spacing:-.01em; }
.k-outro .lead{ margin-top:40px; font-size:30px; color:var(--fg); }
.k-outro .headline{ font-size:96px; }

/* ═════════ k-stats (치수선 스테이션) ═════════ */
.stats{ margin-top:52px; display:grid; grid-template-columns:1.45fr 1fr 1fr 1fr; column-gap:32px; }
.stat{ position:relative; padding-top:22px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:baseline; column-gap:10px; }
.stat::before,.stat::after{ content:""; position:absolute; top:-6px; width:1px; height:13px; background:var(--line); }
.stat::before{ left:0 } .stat::after{ right:0 }
.stat:first-child{ border-top-color:var(--accent); } .stat:first-child::before,.stat:first-child::after{ background:var(--accent); }
.num{ grid-row:1; grid-column:1; font-family:var(--font-display); font-size:116px; font-weight:800; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--fg); }
.stat:first-child .num{ color:var(--accent); }
.unit{ grid-row:1; grid-column:2; font-size:34px; font-weight:700; color:var(--muted); align-self:baseline; }
.label{ grid-row:2; grid-column:1 / -1; margin-top:16px; font-family:var(--font-mono); font-size:18px; letter-spacing:.04em; color:var(--muted); }
.k-stats .lead{ margin-top:48px; font-size:27px; max-width:1500px; }

/* ═════════ k-table ═════════ */
.tbl{ margin-top:36px; width:100%; border-collapse:collapse; font-size:23px; line-height:1.4; border-top:1.5px solid var(--fg); }
.tbl th{ font-family:var(--font-mono); font-weight:600; font-size:16px; letter-spacing:.1em; color:var(--faint); text-align:left; padding:14px 18px 12px; border-bottom:1px solid var(--line); }
.tbl td{ padding:13px 18px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
.tbl td:first-child{ color:var(--fg); font-weight:600; }
.tbl .hi{ color:var(--accent); font-weight:700; }
.tbl th.hi{ color:var(--accent); }
.compare-tbl td.hi{ background:var(--tint); }
.compare-tbl th.hi{ background:var(--tint); border-top:1.5px solid var(--accent); }
.k-table .headline{ font-size:58px; }

/* ═════════ k-quote ═════════ */
.quote{ margin:auto 0 0; padding-left:40px; border-left:1.5px solid var(--accent); max-width:1500px; }
.quote p{ margin:0; font-family:var(--font-display); font-size:72px; font-weight:800; line-height:1.18; letter-spacing:-.035em; color:var(--fg); }
.quote cite{ display:block; margin-top:28px; font-family:var(--font-mono); font-style:normal; font-size:19px; letter-spacing:.14em; color:var(--accent); }
.k-quote .lead{ margin-top:44px; margin-bottom:auto; font-size:30px; }

/* ═════════ k-diagram (SVG · 테마 상속) ═════════ */
.diagram{ margin-top:36px; width:100%; max-width:1440px; max-height:470px; height:auto; display:block; color:var(--fg); overflow:visible; }
.diagram rect{ fill:var(--panel); stroke:var(--line); stroke-width:1.5; }
.dg-layer:nth-of-type(3) rect{ fill:var(--accent); stroke:var(--accent); }
.dg-t{ font-family:var(--font-display); font-size:36px; font-weight:700; letter-spacing:-.02em; fill:var(--fg); }
.dg-s{ font-family:var(--font-sans); font-size:19px; fill:var(--muted); }
.dg-layer:nth-of-type(3) .dg-t,.dg-layer:nth-of-type(3) .dg-s{ fill:var(--accent-on); }
.dg-arrow path{ stroke:var(--accent); stroke-width:2.5; fill:none; marker-end:none; }
.dg-arrow path{ stroke-linecap:round; }
.dg-v{ font-family:var(--font-mono); font-size:14px; letter-spacing:.04em; fill:var(--accent); font-weight:700; }
.dg-loop .dg-v{ font-size:18px; letter-spacing:.12em; }
.dg-loop path{ stroke:var(--accent); stroke-width:1.5; stroke-dasharray:5 5; fill:none; }

/* ═════════ k-compare (두 스트라텀) ═════════ */
.compare{ margin-top:40px; display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--fg); }
.compare .col{ position:relative; padding:34px 40px 36px; }
.compare .col.a{ border-right:1px solid var(--line); }
.compare .col.b{ background:var(--tint); }
.compare .col.b::before{ content:""; position:absolute; left:0; right:0; top:-1.5px; height:2px; background:var(--accent); }
.compare h3{ margin:0 0 20px; font-family:var(--font-display); font-size:36px; font-weight:700; letter-spacing:-.03em; color:var(--fg); display:flex; align-items:center; gap:16px; }
.compare .col.b h3{ color:var(--accent); }
.compare ul{ margin:0; padding:0; list-style:none; }
.compare li{ position:relative; padding:14px 0 14px 30px; border-top:1px solid var(--line); font-size:26px; line-height:1.45; color:var(--muted); }
.compare li::before{ content:""; position:absolute; left:0; top:33px; width:16px; height:1px; background:var(--faint); }
.compare .col.b li{ color:var(--fg); } .compare .col.b li::before{ background:var(--accent); }

/* ═════════ k-terminal (DETAIL 인셋) ═════════ */
.terminal{ position:relative; margin:76px 0 0; max-width:1500px; background:var(--term-bg); color:var(--term-fg); border:1px solid var(--line); padding:30px 34px; font-family:var(--font-mono); font-size:23px; line-height:1.65; letter-spacing:0; white-space:pre; overflow:hidden; border-radius:0; }
.terminal::before{ content:"DETAIL · 터미널 출력"; position:absolute; left:0; top:-38px; font-size:15px; letter-spacing:.16em; color:var(--accent); font-weight:600; }
.terminal::after{ content:""; position:absolute; left:-40px; top:-31px; width:28px; height:1px; background:var(--accent); }
.terminal code{ font:inherit; letter-spacing:0; padding:0; border:0; border-radius:0; background:none; }
.terminal .prompt{ color:var(--term-acc); font-weight:700; }
.terminal .dim{ color:var(--term-dim); }
.terminal .ok{ color:var(--term-ok); font-weight:600; }

/* ═════════ k-timeline (치수 스테이션 5) ═════════ */
.timeline{ margin-top:52px; display:grid; grid-template-columns:repeat(5,1fr); column-gap:28px; }
.tick{ position:relative; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.tick::before,.tick::after{ content:""; position:absolute; top:-6px; width:1px; height:13px; background:var(--line); }
.tick::before{ left:0 } .tick::after{ right:0 }
.tick-when{ font-family:var(--font-display); font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--fg); font-variant-numeric:tabular-nums; }
.tick-lv{ font-family:var(--font-mono); font-size:16px; letter-spacing:.14em; color:var(--accent); font-weight:700; }
.tick-what{ margin-top:8px; font-size:20px; line-height:1.5; color:var(--muted); }
.tick:nth-child(4){ border-top:1.5px solid var(--accent); } .tick:nth-child(4)::before,.tick:nth-child(4)::after{ background:var(--accent); }
.tick:nth-child(4) .tick-when{ color:var(--accent); }

/* ═════════ k-bars ═════════ */
.bars{ margin-top:40px; display:grid; row-gap:0; max-width:1520px; border-top:1.5px solid var(--fg); }
.bar{ display:grid; grid-template-columns:1fr 520px 90px; align-items:center; column-gap:28px; padding:15px 0; border-bottom:1px solid var(--line); font-size:23px; color:var(--muted); }
.bar-label b{ display:inline-grid; place-items:center; width:32px; height:32px; margin-right:12px; border:1.5px solid var(--accent); border-radius:50%; font-family:var(--font-mono); font-size:15px; color:var(--accent); }
.bar-track{ position:relative; display:block; height:14px; background:var(--line2); border:1px solid var(--line); }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 3.6%); background:var(--faint); transition:width .6s var(--ease); }
.bar-val{ font-family:var(--font-mono); font-size:22px; font-weight:700; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.bar.hi{ color:var(--fg); }
.bar.hi .bar-track i{ background:var(--accent); } .bar.hi .bar-val{ color:var(--accent); }
.bar.hi .bar-label b{ background:var(--accent); color:var(--accent-on); }
.k-bars .lead{ margin-top:36px; font-size:26px; max-width:1500px; }

/* ═════════ k-toggle ═════════ */
.toggle{ margin-top:36px; }
.toggle-ctl{ display:flex; gap:12px; margin-bottom:34px; }
.toggle-ctl button{ appearance:none; font:700 19px/1 var(--font-mono); letter-spacing:.02em; padding:16px 24px; border:1px solid var(--line); background:var(--bg); color:var(--muted); cursor:pointer; border-radius:4px; }
.toggle-ctl button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.toggle-grid{ display:grid; grid-template-columns:repeat(4,1fr); border:1.5px solid var(--fg); }
.tg{ padding:30px 30px 28px; display:flex; flex-direction:column; gap:10px; min-height:230px; border-right:1px solid var(--line); }
.tg:last-child{ border-right:0; }
.tg-a,.tg-b{ font-family:var(--font-display); font-size:40px; font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--fg); }
.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{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:19px; line-height:1.5; color:var(--muted); }
.toggle-verdict{ margin:34px 0 0; font-size:28px; line-height:1.45; color:var(--fg); max-width:1500px; }
.toggle-verdict::before{ content:"판정"; display:inline-block; margin-right:18px; font-family:var(--font-mono); font-size:15px; letter-spacing:.16em; color:var(--accent); font-weight:700; vertical-align:middle; }

/* ═════════ 16x10 여분 흡수 ═════════ */
html[data-aspect="16x10"] .k-grid .grid{ margin-top:52px; }
html[data-aspect="16x10"] .cols-4 .cell{ min-height:340px; }
html[data-aspect="16x10"] .cards .cell{ min-height:370px; }
html[data-aspect="16x10"] .k-steps .step{ min-height:400px; }
html[data-aspect="16x10"] .nine .cell{ padding:30px 28px; }
html[data-aspect="16x10"] .tbl td{ padding:16px 18px; }
html[data-aspect="16x10"] .ladder .step{ padding-top:28px; padding-bottom:28px; }
html[data-aspect="16x10"] .tg{ min-height:260px; }
html[data-aspect="16x10"] .diagram{ max-height:520px; }

/* ═════════ 인쇄 — 1 시트 = 1 페이지 · 종이(라이트) 팔레트 강제 · 크롬 생략 ═════════ */
@media print{
  :root,html[data-theme="dark"]{
    --bg:#FAF9F3; --fg:#131813; --muted:#4C554D; --faint:#8B938A; --line:#D3D6CC; --line2:#E7E9E0; --panel:#F1F0E7;
    --accent:var(--cmds-green); --accent-on:#FFFFFF; --tint:rgba(19,69,56,.06); --tint2:rgba(19,69,56,.11);
    --term-bg:#0E1512; --term-fg:#E8ECE7; --term-dim:#8B938A; --term-acc:var(--cmds-pink); color-scheme:light;
  }
  *{ print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  html[data-engine="stage"] #deck::before, .sd-frame, .sd-frame2, .sd-ruler, .sd-legend{ display:none !important; }
  .slide{ animation:none !important; background:#fff; padding-left:150px !important; }
  .kicker{ left:150px; }
  [data-step]{ transition:none !important; }
}