/* 레이아웃: 교안 본문과 같은 흰 바탕의 업무 도구 화면. 왼쪽 레일을 따라 다섯 과정이 이어지고,
   장마다 설명 한 단과 직접 조작하는 화면 한 개를 둔다. 색은 교안의 토큰(style.css)을 그대로 쓰고,
   과정 색은 Project 보드 상태 색 계열에서 고른다: Level 1 파랑, A 황토, B 자홍, C 보라, D 초록.
   그라데이션, 발광, 점무늬 배경은 쓰지 않는다. */
:root {
  --bg: #ffffff;
  --bg-alt: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --ink: #17202c;
  --muted: #566274;
  --faint: #6b7789;
  --line: #d6dce5;
  --line-strong: #b9c2cf;
  --accent: #1d55c9;
  --accent-hover: #1847ab;
  --accent-soft: #e4ecfb;
  --on-color: #ffffff;
  --shadow: 0 1px 2px rgba(23, 32, 44, 0.06), 0 4px 12px rgba(23, 32, 44, 0.05);

  --term-bg: #121822;
  --term-head: #1b2330;
  --term-fg: #dce3ee;
  --term-out: #aeb9c9;
  --term-dim: #8593a8;
  --term-line: #2a3444;
  --term-ps: #55c486;

  /* 과정 색: 선과 면(mark), 글자(text), 옅은 바탕(soft) */
  --l1: #1d55c9; --l1-text: #1d55c9; --l1-soft: #e4ecfb;
  --la: #8f6200; --la-text: #8a5d00; --la-soft: #fbf0dc;
  --lb: #c8266c; --lb-text: #b81f62; --lb-soft: #fbe4ee;
  --lc: #7246c0; --lc-text: #6a3fb8; --lc-soft: #f0e9fb;
  --ld: #1d7f47; --ld-text: #1a7340; --ld-soft: #e2f4e9;

  --pass: #1d7f47;
  --pass-soft: #cfe9d9;
  --bad: #c0362c;

  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: 20px;
  --max: 1160px;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --top-h: 3.5rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141b; --bg-alt: #131922; --surface: #161c26; --surface-2: #1d2531;
    --ink: #e2e7ee; --muted: #9aa5b6; --faint: #8693a6; --line: #2a3341; --line-strong: #3a4556;
    --accent: #84a9ff; --accent-hover: #a3bfff; --accent-soft: #1b2944; --on-color: #0f141b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --term-bg: #0a0e14; --term-head: #121822; --term-line: #222b38;
    --l1: #4f80e6; --l1-text: #84a9ff; --l1-soft: #1b2944;
    --la: #ad7c00; --la-text: #e3b04f; --la-soft: #33280f;
    --lb: #e2506a; --lb-text: #f58aa6; --lb-soft: #3a1a26;
    --lc: #9370e0; --lc-text: #b597f2; --lc-soft: #2a2140;
    --ld: #2fa060; --ld-text: #55c486; --ld-soft: #13301f;
    --pass: #55c486; --pass-soft: #1d4a31; --bad: #f2776c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141b; --bg-alt: #131922; --surface: #161c26; --surface-2: #1d2531;
  --ink: #e2e7ee; --muted: #9aa5b6; --faint: #8693a6; --line: #2a3341; --line-strong: #3a4556;
  --accent: #84a9ff; --accent-hover: #a3bfff; --accent-soft: #1b2944; --on-color: #0f141b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --term-bg: #0a0e14; --term-head: #121822; --term-line: #222b38;
  --l1: #4f80e6; --l1-text: #84a9ff; --l1-soft: #1b2944;
  --la: #ad7c00; --la-text: #e3b04f; --la-soft: #33280f;
  --lb: #e2506a; --lb-text: #f58aa6; --lb-soft: #3a1a26;
  --lc: #9370e0; --lc-text: #b597f2; --lc-soft: #2a2140;
  --ld: #2fa060; --ld-text: #55c486; --ld-soft: #13301f;
  --pass: #55c486; --pass-soft: #1d4a31; --bad: #f2776c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 1rem); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
code { font-family: var(--f-mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--line); padding: 0 0.3em; border-radius: var(--r-sm); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--surface); color: var(--ink); padding: 0.5rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 과정 색: data-lv가 붙은 요소 안에서 --lv, --lv-text, --lv-soft를 쓴다 */
[data-lv="l1"] { --lv: var(--l1); --lv-text: var(--l1-text); --lv-soft: var(--l1-soft); }
[data-lv="a"] { --lv: var(--la); --lv-text: var(--la-text); --lv-soft: var(--la-soft); }
[data-lv="b"] { --lv: var(--lb); --lv-text: var(--lb-text); --lv-soft: var(--lb-soft); }
[data-lv="c"] { --lv: var(--lc); --lv-text: var(--lc-text); --lv-soft: var(--lc-soft); }
[data-lv="d"] { --lv: var(--ld); --lv-text: var(--ld-text); --lv-soft: var(--ld-soft); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.2rem;
  border-radius: var(--r); border: 1px solid transparent;
  font: 700 0.95rem/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-sm { min-height: 2.2rem; padding: 0 0.9rem; font-size: 0.86rem; }
.btn-primary { background: var(--accent); color: var(--on-color); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-lv { background: var(--lv, var(--accent)); color: var(--on-color); }
.btn-lv:hover { filter: brightness(0.92); }
.text-link { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }

/* ---------- 상단 막대 ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 1.25rem; height: var(--top-h); }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.logo-mark {
  font: 600 0.8rem/1 var(--f-mono); color: var(--bg);
  background: var(--ink); padding: 0.32rem 0.42rem; border-radius: var(--r-sm);
}
.logo-name { font: 700 0.98rem/1.2 var(--f-body); white-space: nowrap; }
.topnav { display: flex; gap: 0.1rem; margin-left: auto; }
.topnav a {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.35rem 0.65rem; border-radius: var(--r); text-decoration: none;
  color: var(--muted); font-size: 0.88rem;
}
.topnav a b { font: 600 0.8rem var(--f-mono); color: var(--lv-text); }
.topnav a:hover { background: var(--surface-2); color: var(--ink); }
.topnav a.on { color: var(--ink); background: var(--surface-2); }
@media (max-width: 1020px) { .topnav a span { display: none; } }
@media (max-width: 760px) { .topnav { display: none; } .topbar .btn { margin-left: auto; } }
@media (max-width: 420px) { .logo-name { display: none; } }

/* ---------- 첫 화면 ---------- */
.hero { padding-block: clamp(2rem, 4.5vw, 3.25rem); border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas: "head viewer" "body viewer";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 4vw, 3.25rem); row-gap: 0;
}
.hero-head { grid-area: head; min-width: 0; }
.hero-body { grid-area: body; min-width: 0; }
.viewer { grid-area: viewer; min-width: 0; margin: 0; align-self: start; display: flex; flex-direction: column; gap: 0.6rem; }
.eyebrow { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; margin: 0 0 1rem; font-size: 0.88rem; color: var(--muted); }
.eyebrow span { color: var(--accent); font-weight: 700; }
.eyebrow span::before { content: "·"; color: var(--faint); margin-right: 0.6rem; font-weight: 400; }
.hero-title { margin: 0; font: 700 clamp(2rem, 3.5vw, 3rem)/1.25 var(--f-body); letter-spacing: -0.02em; text-wrap: balance; }
.hero-title span { display: block; }
.hl { font-style: normal; }
.hl-l1 { color: var(--l1-text); }
.hl-c { color: var(--lc-text); }
.hl-b { color: var(--lb-text); }
.hero-lead { margin: 1.25rem 0 0; color: var(--muted); max-width: 36em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.75rem 0 0; border-top: 1px solid var(--line); }
.stats div { padding: 0.9rem 0.75rem 0 0; min-width: 0; }
.stats div + div { padding-left: 0.9rem; border-left: 1px solid var(--line); }
.stats dt { font-size: 0.8rem; color: var(--faint); }
.stats dd { margin: 0.2rem 0 0; font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats small { font: 500 0.8rem var(--f-body); color: var(--muted); margin-left: 0.2rem; }

/* 터미널 */
.hero-term { min-width: 0; }
.term { background: var(--term-bg); border: 1px solid var(--term-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.term-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0.85rem; background: var(--term-head); border-bottom: 1px solid var(--term-line);
  font: 500 0.78rem var(--f-mono); color: var(--term-dim);
}
.term-lv { color: #ffffff; background: var(--lv, var(--l1)); padding: 0.08rem 0.5rem; border-radius: var(--r-sm); font: 600 0.74rem var(--f-body); }
.term-body {
  margin: 0; padding: 0.9rem 1rem;
  height: 21rem; overflow: auto; overscroll-behavior: contain;
  font: 0.8rem/1.6 var(--f-mono); color: var(--term-fg);
  white-space: pre-wrap; overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: var(--term-line) transparent;
}
.term-body .ps { color: var(--term-ps); }
.term-body .cmd { color: #ffffff; }
.term-body .out { color: var(--term-out); }
.term-body .caret { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: text-bottom; background: var(--term-fg); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--term-line); }
.term-steps li {
  padding: 0.5rem 0.3rem; text-align: center; background: var(--term-head);
  font: 600 0.74rem var(--f-body); color: var(--term-dim);
  border-top: 2px solid transparent; transition: color 0.3s, border-color 0.3s;
}
.term-steps li + li { border-left: 1px solid var(--term-line); }
.term-steps li.on { color: #ffffff; border-top-color: var(--lv); }
.term-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--faint); }

/* ---------- 섹션 공통 ---------- */
section, .chapters { position: relative; }
.kicker { margin: 0 0 0.5rem; font: 700 0.86rem var(--f-body); color: var(--accent); }
.sec-title { margin: 0; font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.3 var(--f-body); letter-spacing: -0.015em; text-wrap: balance; }
.sec-lead { margin: 0.8rem 0 0; color: var(--muted); max-width: 44em; }
.paper { background: var(--bg-alt); }

/* ---------- 다섯 질문 ---------- */
.questions { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.qa { list-style: none; margin: 2rem 0 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.qa-row {
  display: grid; grid-template-columns: 6.25rem minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.35rem 1.5rem;
  align-items: baseline; padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--line);
}
.qa-row:last-child { border-bottom: 0; }
.badge {
  display: inline-block; justify-self: start;
  font: 700 0.76rem/1 var(--f-body); color: var(--lv-text); background: var(--lv-soft);
  padding: 0.38rem 0.55rem; border-radius: var(--r-sm); white-space: nowrap;
}
.q { margin: 0; font: 700 clamp(1.02rem, 1.5vw, 1.18rem)/1.5 var(--f-body); text-wrap: balance; }
.a { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.a b { font: 700 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--f-body); color: var(--lv-text); font-variant-numeric: tabular-nums; }
.a span { font-size: 0.88rem; color: var(--muted); }
.src { grid-column: 2 / -1; margin: 0; font-size: 0.8rem; color: var(--faint); }
@media (max-width: 760px) {
  .qa-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1rem; }
  .src { grid-column: 1; }
}

/* ---------- 로드맵 ---------- */
.roadmap { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.fork { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1.25fr); align-items: stretch; margin-top: 2.25rem; }
.fork a { text-decoration: none; }
.fork-root, .fork-tracks a {
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color 0.15s, background-color 0.15s;
}
.fork-root { justify-content: center; padding: 1.5rem; border-top: 4px solid var(--l1); box-shadow: var(--shadow); }
.fork-root strong { font: 700 clamp(1.35rem, 2.2vw, 1.75rem)/1.3 var(--f-body); }
.fork-meta { font-size: 0.86rem; color: var(--muted); }
.fork-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.fork-tag { font: 700 0.8rem var(--f-body); color: var(--lv-text); }
.fork-lines { width: 100%; height: 100%; }
.fl { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fl-a { stroke: var(--la); } .fl-b { stroke: var(--lb); } .fl-c { stroke: var(--lc); } .fl-d { stroke: var(--ld); }
.fork-tracks { display: grid; grid-template-rows: repeat(4, 1fr); gap: 0.5rem; }
.fork-tracks a { padding: 0.8rem 1rem; border-left: 4px solid var(--lv); }
.fork-tracks strong { font: 700 1rem/1.35 var(--f-body); }
.fork-root:hover, .fork-tracks a:hover { background: var(--surface-2); }
@media (max-width: 760px) {
  .fork { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .fork-lines { display: none; }
  .fork-tracks { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 과정별 장 ---------- */
.chapters { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.chapters-in { position: relative; padding-left: 4rem; }
.rail { position: absolute; left: 1.3rem; top: 0.5rem; bottom: 0; width: 2px; background: var(--line); }
.rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ink); opacity: 0.55; transform-origin: top; transform: scaleY(var(--fill, 1)); }
.chapter { position: relative; padding-bottom: clamp(3rem, 6vw, 5rem); }
.chapter + .chapter { padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--line); }
.node {
  position: absolute; left: -4rem; top: 0.1rem;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--lv); color: var(--lv-text);
  font: 700 0.95rem var(--f-mono);
  transition: background-color 0.25s, color 0.25s;
}
.chapter + .chapter .node { top: clamp(1.1rem, 2.1vw, 1.6rem); }
.chapter.on .node { background: var(--lv); color: var(--on-color); }
.ch-head { max-width: 50rem; }
.ch-eyebrow { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.4rem 0 0.5rem; font-size: 0.86rem; color: var(--faint); }
.ch-eyebrow b { color: var(--lv-text); }
.chapter h2 { margin: 0; font: 700 clamp(1.8rem, 3.4vw, 2.6rem)/1.25 var(--f-body); letter-spacing: -0.02em; }
.ch-lead { margin: 0.9rem 0 0; color: var(--muted); }
.ch-body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.75rem; align-items: start; }
.ch-text { min-width: 0; display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
@media (max-width: 980px) { .ch-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .chapters-in { padding-left: 2.5rem; }
  .rail { left: 0.8rem; }
  .node { left: -2.5rem; width: 1.85rem; height: 1.85rem; font-size: 0.78rem; top: 0.35rem; }
}

.sessions, .mods { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--line); }
.sessions li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.sessions b { font-size: 0.86rem; color: var(--lv-text); padding-top: 0.05rem; }
.sessions span { color: var(--muted); }
.mods li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.mods b { font: 700 0.85rem var(--f-mono); color: var(--lv-text); padding-top: 0.12rem; }
.mods strong { display: block; font-size: 1rem; line-height: 1.45; }
.mods span { display: block; color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin-top: 0.1rem; }
.deliver h3 { margin: 0 0 0.5rem; font-size: 0.84rem; color: var(--faint); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chips li { font-size: 0.84rem; padding: 0.25rem 0.6rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }

/* 조작 화면 */
.demo {
  min-width: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem; display: flex; flex-direction: column; gap: 0.85rem;
  box-shadow: var(--shadow);
}
.demo-head { display: flex; flex-direction: column; gap: 0.5rem; }
.demo-label { font: 700 0.8rem var(--f-body); color: var(--lv-text); }
.demo h3 { margin: 0; font: 700 1.1rem/1.45 var(--f-body); }
.demo-note { margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--faint); }
.demo-foot { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.demo-foot .demo-note { flex: 1 1 18rem; }
.chapter > .demo.sim { margin-top: 1.5rem; }

.seg { display: flex; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r); overflow-x: auto; scrollbar-width: none; max-width: 100%; align-self: flex-start; background: var(--surface); }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: 0 0 auto; border: 0; cursor: pointer; white-space: nowrap;
  padding: 0.42rem 0.8rem; background: transparent;
  font: 500 0.84rem var(--f-body); color: var(--muted);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--surface-2); color: var(--ink); }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--lv-soft); color: var(--lv-text); font-weight: 700; }
.seg-wrap { flex-wrap: wrap; }

.shot-frame { background: #ffffff; border-radius: var(--r); overflow: hidden; aspect-ratio: 704 / 700; display: grid; place-items: center; border: 1px solid var(--line); }
.shot-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shots figcaption { font-size: 0.86rem; color: var(--muted); line-height: 1.6; min-height: 2.8em; }

.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.readout > div { background: var(--surface-2); padding: 0.55rem 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.r-label { font-size: 0.76rem; color: var(--faint); line-height: 1.35; }
.r-value { font: 700 1.3rem/1.2 var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }

.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--f-body); font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart text.t-strong { fill: var(--ink); }
.chart text.t-lim { fill: var(--bad); }

/* 몬테카를로 */
.sim-grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.sim-controls { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.sim-view { min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.field { margin: 0; font-size: 0.86rem; color: var(--muted); }
.field output { font: 700 1.1rem var(--f-body); color: var(--ink); margin-inline: 0.2rem; }
.field-note { margin: 0; font-size: 0.78rem; color: var(--faint); line-height: 1.6; }
.sim-controls .btn { align-self: flex-start; margin-top: 0.3rem; }
input[type="range"] { width: 100%; accent-color: var(--lv, var(--accent)); }
.tp { display: flex; gap: 0.25rem; margin: 0; flex-wrap: wrap; }
.tp span { font: 600 0.82rem var(--f-mono); width: 1.55rem; height: 1.6rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.mc-bar { fill: var(--l1); }
.mc-bar.late { fill: var(--line-strong); }
.mc-pct { font-weight: 600; }
.mc-mark { stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 4 3; }
@media (max-width: 700px) { .sim-grid { grid-template-columns: minmax(0, 1fr); } }

/* XmR */
.x-line { fill: none; stroke: var(--la); stroke-width: 2; }
.x-dot { fill: var(--surface); stroke: var(--la); stroke-width: 2; }
.x-dot.sig { fill: var(--la); stroke: var(--surface); }
.x-cl { stroke: var(--muted); stroke-width: 1.25; }
.x-lim { stroke: var(--bad); stroke-width: 1.25; stroke-dasharray: 6 4; }
.x-sig2 { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 4; }
.x-base { fill: var(--la-soft); }
.x-event { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }

/* PR 격자 */
.toggles { display: grid; gap: 0.45rem; }
.switch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: center; cursor: pointer; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw { grid-row: 1; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--line-strong); position: relative; transition: background-color 0.2s; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px); border-radius: 50%; background: #ffffff; transition: transform 0.2s; }
.switch input:checked + .sw { background: var(--lb); }
.switch input:checked + .sw::after { transform: translateX(1rem); }
.switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch code { background: none; border: 0; padding: 0; font-size: 0.8rem; color: var(--ink); overflow-wrap: anywhere; }
.switch small { display: block; font-size: 0.78rem; color: var(--faint); line-height: 1.45; }
@media (max-width: 560px) { .switch code { font-size: 0.72rem; } }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.15rem, 1fr)); gap: 3px; }
.pr { aspect-ratio: 1; border-radius: 2px; border: 0; padding: 0; cursor: default; background: var(--pass-soft); transition: background-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.pr.v { background: var(--lb); cursor: pointer; }
.pr.blocked { background: var(--surface); box-shadow: inset 0 0 0 2px var(--lb); transform: scale(0.86); }
.pr.v:hover, .pr.v:focus-visible, .pr.v.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.pr-detail { margin: 0; font-size: 0.86rem; color: var(--muted); min-height: 3.2em; line-height: 1.6; }
.pr-detail b { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--muted); margin: 0; padding: 0; list-style: none; }
.legend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; vertical-align: -0.1rem; margin-right: 0.35rem; }

/* 대기열 */
.queue-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.queue-box canvas { display: block; width: 100%; }

/* 간트 */
.gantt { --g-lab: 10rem; --g-cost: 6.6rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 0.75rem; }
.g-head, .g-row { display: grid; grid-template-columns: var(--g-lab) minmax(0, 1fr) var(--g-cost); gap: 0.6rem; align-items: center; }
.g-head { font-size: 0.78rem; color: var(--faint); margin-bottom: 0.35rem; }
.g-head span:last-child { text-align: right; }
.g-rows { position: relative; }
.g-row { position: absolute; left: 0; right: 0; top: 0; height: 42px; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.g-lab { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.g-lab b { font: 600 0.76rem var(--f-mono); color: var(--ld-text); }
.g-lab span { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-track { position: relative; height: 28px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 20% 100%; }
.g-bar {
  position: absolute; top: 0; height: 100%; border-radius: var(--r-sm);
  background: var(--ld); opacity: var(--heat, 0.6);
  transition: left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.g-cost { font: 600 0.8rem var(--f-body); text-align: right; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-axis { position: relative; height: 1.1rem; margin: 0.3rem calc(var(--g-cost) + 0.6rem) 0 calc(var(--g-lab) + 0.6rem); font: 0.7rem var(--f-mono); color: var(--faint); }
.g-axis span { position: absolute; transform: translateX(-50%); }
.g-key { margin: 0.4rem 0 0; font-size: 0.76rem; color: var(--faint); }
@media (max-width: 560px) {
  .gantt { --g-lab: 2.8rem; --g-cost: 5.4rem; padding: 0.6rem; }
  .g-lab span { display: none; }
}

/* 트랙별 실습 터미널 녹화 */
.term-gif { margin: 1.5rem 0 0; display: grid; grid-template-columns: minmax(0, 704px) minmax(0, 1fr); gap: 1.5rem; align-items: end; }
.term-gif img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--term-bg); }
.term-gif figcaption { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.95rem; line-height: 1.65; color: var(--muted); padding-bottom: 0.25rem; }
@media (max-width: 980px) { .term-gif { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } }

/* ---------- 첫 화면의 교안 화면 보기 ---------- */
.viewer-frame { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font: 0.76rem var(--f-mono); color: var(--faint); }
.viewer-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-bar b { font: 700 0.78rem var(--f-body); color: var(--lv-text); white-space: nowrap; }
.viewer-shot { display: block; background: #ffffff; }
.viewer-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 740; object-fit: cover; object-position: top; transition: opacity 0.25s; }
.viewer-shot img.swap { opacity: 0.25; }
.viewer figcaption { font-size: 0.88rem; color: var(--muted); line-height: 1.6; min-height: 3.2em; }
.viewer-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.viewer-tabs button {
  display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  font: 500 0.8rem var(--f-body); color: var(--muted); cursor: pointer; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer-tabs button b { flex: none; font: 700 0.7rem var(--f-mono); color: var(--lv-text); background: var(--lv-soft); padding: 0.1rem 0.3rem; border-radius: 3px; }
.viewer-tabs button:hover { background: var(--surface-2); color: var(--ink); }
.viewer-tabs button[aria-selected="true"] { border-color: var(--lv); color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--lv); }
@media (max-width: 560px) {
  .viewer-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 명령과 출력 ---------- */
.cli { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.cli-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cli-copy { min-width: 0; }
@media (max-width: 860px) { .cli-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 결과물 ---------- */
.outputs { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.outputs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.facts li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.facts b { font: 700 1.45rem/1 var(--f-body); color: var(--accent); }
.facts span { color: var(--muted); font-size: 0.95rem; }
.tree { margin: 0; padding: 1.1rem 1.25rem; border-radius: var(--r-lg); background: var(--term-bg); border: 1px solid var(--term-line); color: var(--term-fg); font: 0.82rem/1.75 var(--f-mono); overflow-x: auto; }
.t-dim { color: var(--term-dim); }
.t-l1 { color: #84a9ff; } .t-a { color: #e3b04f; } .t-b { color: #f58aa6; } .t-c { color: #b597f2; } .t-d { color: #55c486; }
@media (max-width: 860px) { .outputs-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 커리큘럼 ---------- */
.curriculum { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.curriculum .wrap { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); }
.cur-list { margin-top: 1.75rem; display: grid; gap: 0.5rem; }
.cur { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); border-left: 4px solid var(--lv); }
.cur summary { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.9rem 1.15rem; cursor: pointer; list-style: none; }
.cur summary::-webkit-details-marker { display: none; }
.cur summary strong { font: 700 1.05rem/1.4 var(--f-body); }
.cur-meta { font-size: 0.84rem; color: var(--muted); white-space: nowrap; }
.cur-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 1.75rem; padding: 0.25rem 1.15rem 1.25rem; }
.cur-body h4 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.cur-body p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
@media (max-width: 640px) {
  .cur summary { grid-template-columns: minmax(0, 1fr) auto; }
  .cur summary .badge { grid-column: 1 / -1; }
}

/* ---------- 대상 ---------- */
.audience { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.aud-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.65rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.5em; width: 0.9rem; height: 0.5rem; border-left: 2px solid var(--ld); border-bottom: 2px solid var(--ld); transform: rotate(-45deg); transform-origin: 30% 60%; }
.prep { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem; box-shadow: var(--shadow); }
.prep h3 { margin: 0 0 0.9rem; font: 700 1.1rem var(--f-body); }
.prep dl { margin: 0 0 1.1rem; display: grid; gap: 0.65rem; }
.prep dl div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; }
.prep dt { font: 700 0.84rem var(--f-body); color: var(--faint); padding-top: 0.05rem; }
.prep dd { margin: 0; font-size: 0.94rem; }
@media (max-width: 860px) { .aud-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 자주 묻는 질문 ---------- */
.faq { padding-block: clamp(3rem, 6vw, 5rem); }
.faq-in { max-width: 52rem; }
.faq .sec-title { margin-bottom: 1.25rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.4rem; top: 1.35rem; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq details p { margin: 0 0 1.1rem; color: var(--muted); }

/* ---------- 마지막 안내 ---------- */
.final { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--bg-alt); border-top: 1px solid var(--line); }
.final-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.final h2 { margin: 0; font: 700 clamp(1.7rem, 3.2vw, 2.5rem)/1.3 var(--f-body); letter-spacing: -0.015em; text-wrap: balance; }
.final p { margin: 0.9rem 0 0; color: var(--muted); max-width: 38em; }
.final .hero-cta { justify-content: center; }

/* ---------- 바닥글 ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 1.75rem calc(1.75rem + 4.5rem); font-size: 0.84rem; color: var(--faint); }
.foot-in { display: grid; gap: 0.45rem; }
.foot p { margin: 0; }
.foot .logo-mark { margin-right: 0.4rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.4rem; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 761px) { .foot { padding-bottom: 1.75rem; } }

/* ---------- 폰용 하단 막대 ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--muted);
}
@media (max-width: 760px) { .dock { display: flex; } }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "viewer" "body"; grid-template-rows: none; }
  .viewer { margin-top: 1.5rem; }
  .term-body { height: 18rem; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 0.9rem; }
  .term-body { height: 17rem; font-size: 0.74rem; }
  .demo { padding: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .fork-root, .fork-tracks a, .pr, .g-row, .g-bar, .term-steps li, .node, .viewer-shot img { transition: none; }
  .term-body .caret { animation: none; }
}