/* Color scheme: LIGHT by default, DARK when the OS asks for it.
   Page chrome (bg/text/cards/borders/accents) flips; code blocks and Mermaid
   diagrams stay dark in BOTH modes (their inner colors are hand-tuned for a
   dark canvas) — a deliberate "light page, dark code/diagram panels" look. */
:root {
  /* ── flips with color scheme (light values) ── */
  --bg: #ffffff;
  --panel: #f6f8fa;
  --border: #d0d7de;
  --text: #1f2328;
  --muted: #656d76;
  --accent: #0969da;
  --accent2: #1a7f37;
  /* ── fixed dark surfaces (same in both modes) ── */
  --code-bg: #1f2630;    /* code blocks */
  --code-text: #e6edf3;  /* text on code/diagram surfaces */
  --diagram-bg: #161b22; /* .mermaid + fx-* widgets */
  --diagram-border: #30363d;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --panel: #161b22;
    --border: #30363d;
    --text: #e6edf3;
    --muted: #9198a1;
    --accent: #58a6ff;
    --accent2: #3fb950;
  }
}
:root { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Apple SD Gothic Neo", "Pretendard",
    "Noto Sans KR", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 3rem 1.25rem 6rem;
}

header.hero {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

h1 { font-size: 2rem; margin: 0 0 .5rem; letter-spacing: -.02em; }
h2 {
  font-size: 1.4rem;
  margin: 3rem 0 .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  letter-spacing: -.01em;
}
h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; color: var(--accent); }

p { margin: .6rem 0; }
.muted { color: var(--muted); }
a { color: var(--accent); }

nav.toc {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
nav.toc ul { margin: .4rem 0 0; padding-left: 1.2rem; columns: 2; }
nav.toc li { margin: .15rem 0; }

/* ── single sidebar w/ toggle (injected by nav.js) ──────────────── */
.layout {
  display: flex;
  align-items: flex-start;
  max-width: 1240px;
  margin: 0 auto;
}
.layout > .wrap { flex: 1 1 auto; min-width: 0; margin: 0; max-width: none; }

.rail {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 234px;
  flex-shrink: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 1.6rem .85rem 2rem;
  border-right: 1px solid var(--border);
  font-size: .82rem;
  line-height: 1.45;
}
/* collapse/expand handle */
.rail-handle {
  display: block;
  margin: 0 0 .8rem auto;
  padding: .25rem .55rem;
  font: inherit;
  font-size: .76rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.rail-handle:hover { color: var(--text); border-color: var(--accent); }

/* one continuous outline: modules + their section sub-links */
.rail-outline { display: flex; flex-direction: column; }
.rail-mod {
  display: block;
  margin-top: .55rem;
  padding: .3rem .55rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
}
.rail-mod:first-child { margin-top: 0; }
.rail-mod:hover { background: var(--panel); }
.rail-mod.current-mod { color: var(--accent); background: var(--panel); }
.rail-subs {
  display: flex;
  flex-direction: column;
  gap: .02rem;
  margin: .12rem 0 .25rem .35rem;
  border-left: 1px solid var(--border);
}
.rail-sub {
  display: block;
  margin-left: -1px;
  padding: .22rem .55rem;
  font-size: .77rem;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.rail-sub:hover { color: var(--text); background: var(--panel); }
.rail-sub.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--panel);
  border-left-color: var(--accent);
}
.rail .rail-num {
  display: inline-block;
  min-width: 2.2em;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}
/* Two-part rail: a compact module jump-list on top, the current page's
   sections in detail below (Part 1 / Part 2 built in nav.js). */
.rail-mods { display: flex; flex-direction: column; }
.rail-mods .rail-mod { margin-top: 0; font-weight: 600; }
.rail-mods .rail-mod.current-mod { font-weight: 700; }
.rail-detail {
  margin-top: 1.1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.rail-detail-title {
  padding: 0 .55rem;
  margin-bottom: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Indented project links under each module in the top rail (Part 1). */
.rail-proj {
  display: block;
  margin-left: 1.35rem;
  padding: .16rem .55rem;
  font-size: .77rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 6px;
}
.rail-proj::before { content: "↳ "; color: var(--accent2); }
.rail-proj:hover { color: var(--text); background: var(--panel); }
.rail-proj.current-mod { color: var(--accent); background: var(--panel); font-weight: 600; }

/* ── Flow-animation layer (paired with flow-anim.js) ──────────────────────
   The touring ball (green = the common path, yellow = a special-case branch),
   the freeze/train contrast, and the fx-* teaching widgets. */
.mermaid svg .flowdot { fill: #3fb950; filter: drop-shadow(0 0 5px rgba(63, 185, 80, .9)); }
.mermaid svg .flowdot.alt { fill: #e3b341; filter: drop-shadow(0 0 5px rgba(227, 179, 65, .9)); }
.mermaid svg .fnode-frozen { opacity: .72; filter: grayscale(.75); }
@keyframes fbreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.mermaid svg .fnode-breathe { animation: fbreathe 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .mermaid svg .fnode-breathe { animation: none; }
}

/* fx-* teaching widgets — kept dark in both modes (their bars are tuned for a
   dark canvas), so text/labels use fixed-light colors, not the flipping tokens. */
.fx-morph, .fx-mismatch {
  position: relative; background: var(--diagram-bg); border: 1px solid var(--diagram-border);
  color: var(--code-text);
  border-radius: 10px; padding: 1.1rem 1.1rem 1.3rem; margin: 1.2rem 0;
}
.fx-morph { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fx-morph-text { font-family: var(--mono); font-size: .92rem; color: var(--code-text); transition: opacity .4s; }
.fx-morph-arrow { color: #3fb950; font-size: .85rem; white-space: nowrap; }
.fx-morph-bars, .fx-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.fx-bar {
  width: 13px; background: #58a6ff; border-radius: 3px 3px 0 0;
  transition: height .4s ease, opacity .35s, width .35s; height: 24px;
}
.fx-label { font-size: .78rem; color: #9198a1; margin-top: .3rem; }
.fx-row { margin: .35rem 0; }
.fx-mismatch .model .fx-bar { background: var(--accent); }
.fx-mismatch .sim .fx-bar { background: #2a2410; border: 1px solid #d29322; }
@keyframes fxshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.fx-mismatch .fx-bar.shake { background: #f85149; animation: fxshake .35s ease 2; }
.fx-mismatch .fx-bar.cut { width: 0; opacity: 0; margin: 0; }
.fx-mismatch .fx-bar.pad { background: #30363d; border-style: dashed; }
.fx-verdict { margin-top: .6rem; font-size: .88rem; color: #e3b341; min-height: 1.3rem; }

/* The live app, embedded right in the page once the launcher says ready. */
.runframe {
  display: block; width: 100%; height: 480px; margin-top: .8rem;
  border: 1px solid var(--border); border-radius: 10px; background: #000;
}

/* collapsed: hide the outline, keep just the handle; main content reflows wide */
body.rail-collapsed .rail {
  width: auto;
  border-right: none;
  padding: 1.6rem .5rem 2rem;
}
body.rail-collapsed .rail-outline { display: none; }

/* Mobile: the rail becomes an off-canvas drawer toggled by the same handle.
   We slide it with `left` (not transform) so the fixed handle inside stays
   pinned to the viewport and is always tappable — even when the rail is off. */
@media (max-width: 720px) {
  .layout { display: block; }
  .layout > .wrap { max-width: 880px; margin: 0 auto; }
  .rail {
    display: block;
    position: fixed; top: 0; left: 0; z-index: 200;
    width: 260px; max-width: 82vw; height: 100vh;
    background: var(--bg); border-right: 1px solid var(--border);
    box-shadow: 2px 0 18px rgba(0, 0, 0, .5);
    transition: left .22s ease;
  }
  body.rail-collapsed .rail { left: -280px; }        /* slid off-canvas */
  /* the handle floats above everything so it can always reopen the drawer */
  .rail-handle {
    position: fixed; top: .55rem; left: .55rem; z-index: 201; margin: 0;
    padding: .45rem .75rem; font-size: .9rem;
    background: var(--panel); color: var(--text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  }
}
@media (min-width: 721px) {
  nav.toc { display: none; } /* the rail replaces it on wide screens */
}

code {
  font-family: var(--mono);
  background: var(--code-bg);
  color: var(--code-text);
  padding: .1rem .35rem;
  border-radius: 5px;
  font-size: .9em;
}
pre {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--diagram-border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
pre code { background: none; padding: 0; color: inherit; }

.concept {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}
.concept .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--accent2);
  border: 1px solid var(--accent2);
  border-radius: 999px;
  padding: .05rem .55rem;
  margin-bottom: .5rem;
}

.callout {
  border-left: 3px solid var(--accent);
  background: rgba(88, 166, 255, .08);
  padding: .6rem 1rem;
  border-radius: 0 8px 8px 0;
  margin: 1rem 0;
}
.callout.cs {
  border-left-color: var(--accent2);
  background: rgba(63, 185, 80, .08);
}
.callout strong { color: var(--text); }
.callout.analogy {
  border-left-color: #d29922;
  background: rgba(210, 153, 34, .1);
}

/* opt-in deeper explanation — hidden by default so the page stays light */
details.more {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem 1rem;
  margin: 1rem 0;
}
details.more summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  list-style: none;
}
details.more summary::before { content: "▸ "; }
details.more[open] summary::before { content: "▾ "; }
details.more[open] summary { margin-bottom: .6rem; }
details.more p:first-of-type { margin-top: 0; }

.tldr {
  font-size: 1.05rem;
  font-weight: 600;
  margin: .2rem 0 .8rem;
}

/* slide-number chip — links a note section to the official deck slide */
.slide {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: .02rem .5rem;
  margin-left: .5rem;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
}
.slide:hover { background: rgba(88, 166, 255, .15); }
h2 .slide, h3 .slide { letter-spacing: 0; }

/* english title shown above a localized note heading */
.entitle {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  margin: 1.5rem 0 -.2rem;
}

/* per-concept multiple-choice quiz with instant feedback */
.quiz {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.quiz .q { font-weight: 600; margin: 0 0 .75rem; }
.quiz .q::before { content: "❓ "; }
.quiz .opt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .9rem;
  margin: .4rem 0;
  cursor: pointer;
  font: inherit;
  font-size: .95rem;
  transition: border-color .15s, background .15s;
}
.quiz .opt:hover:not(:disabled) { border-color: var(--accent); }
.quiz .opt:disabled { cursor: not-allowed; }
.quiz .opt.correct {
  border-color: var(--accent2);
  background: rgba(63, 185, 80, .18);
}
.quiz .opt.correct::after { content: "  ✓ 정답!"; color: var(--accent2); font-weight: 700; }
.quiz .opt.wrong {
  border-color: #f85149;
  background: rgba(248, 81, 73, .15);
  opacity: .8;
}
.quiz .opt.wrong::after { content: "  ✗ 다시"; color: #f85149; font-weight: 700; }
.quiz .explain {
  display: none;
  margin: .7rem 0 0;
  padding: .6rem .9rem;
  border-left: 3px solid var(--accent2);
  background: rgba(63, 185, 80, .08);
  border-radius: 0 8px 8px 0;
  font-size: .9rem;
}
.quiz.solved .explain { display: block; }

.mermaid {
  background: #ffffff;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
}

/* history page */
.commit {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.commit .meta {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .3rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.commit .sha { color: var(--accent); }
.commit .subject { font-weight: 600; font-size: 1.05rem; }
.commit .body { color: var(--muted); white-space: pre-wrap; margin-top: .4rem; }

/* "Run it live" button on project pages */
.runbox {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 1.25rem 0;
}
.runbtn {
  font: inherit;
  font-weight: 700;
  color: #0d1117;
  background: var(--accent2);
  border: none;
  border-radius: 8px;
  padding: .6rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s;
}
.runbtn:hover:not(:disabled) { filter: brightness(1.1); }
.runbtn:disabled { opacity: .7; cursor: progress; }
.runstate { color: var(--muted); font-size: .9rem; }

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .85rem;
}

/* ── Shared mermaid visual system (paired with mermaid-fx.js) ──────────────
   Every diagram sits in a dark card; the reveal animation fades nodes in and
   draws edges; a node tagged `core` glows. Defined once here for all pages. */
.mermaid {
  position: relative;
  background: var(--diagram-bg);
  border: 1px solid var(--diagram-border);
  border-radius: 10px;
  padding: 1.1rem;
  margin: 1.2rem 0;
  overflow-x: auto;
}
.mermaid svg { max-width: 100%; }
/* 04B wraps each diagram in its own .diagram card — don't double-card there. */
.diagram .mermaid { background: transparent; border: 0; padding: 0; margin: 0; }
@keyframes mreveal { from { opacity: 0; } to { opacity: 1; } }
.mermaid svg .reveal { animation: mreveal .5s ease both; }
@keyframes corepulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(63, 185, 80, .45)); }
  50%      { filter: drop-shadow(0 0 9px rgba(63, 185, 80, .9)); }
}
.mermaid svg .core { animation: corepulse 2.6s ease-in-out infinite; }
.mreplay {
  position: absolute; top: .5rem; right: .5rem; z-index: 2; line-height: 1;
  font: inherit; font-size: .8rem; cursor: pointer; opacity: .5;
  background: var(--code-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: .2rem .5rem;
}
.mreplay:hover { opacity: 1; border-color: var(--accent); }