/* ════════════════════════════════════════════════════════════════
   Bohrline · Component Styles (v0.2 — glass-forward, icon-free)
   ────────────────────────────────────────────────────────────────
   No emoji decorations. All section markers are text + accent color
   per [[feedback_atomverse_no_unexplained_numbers]] editorial tone.
   ════════════════════════════════════════════════════════════════ */

/* ─── Skip-to-content (first Tab stop, hidden until focused) ─── */
.skip-link {
  position: fixed; top: 0; left: 16px; z-index: 300;
  transform: translateY(-130%);
  background: var(--accent); color: var(--bg);
  padding: 10px 18px; border-radius: 0 0 var(--r-2) var(--r-2);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-decoration: none;
  box-shadow: 0 8px 24px rgba(94, 234, 212, 0.30);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}

/* ─── Reading progress (top-edge HUD bar) ─── */
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 120;
  background: rgba(94, 234, 212, 0.06);
  pointer-events: none;
}
.reading-progress-bar {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.30), var(--accent));
  will-change: transform;
}

/* ─── Corner marks ─── */
.corner {
  position: fixed;
  width: 22px; height: 22px;
  border: 1px solid var(--accent);
  z-index: 50; opacity: 0.55;
  pointer-events: none;
}
.corner.tl { top: 16px; left: 16px;  border-right: 0; border-bottom: 0; }
.corner.tr { top: 16px; right: 16px; border-left: 0;  border-bottom: 0; }
.corner.bl { bottom: 16px; left: 16px;  border-right: 0; border-top: 0; }
.corner.br { bottom: 16px; right: 16px; border-left: 0;  border-top: 0; }

/* ─── Floating top-left back link ─── */
.back-link {
  position: fixed; top: 26px; left: 26px; z-index: 100;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-2);
  padding: 8px 14px;
  border-radius: var(--r-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: all var(--dur-med) var(--ease-out);
}
.back-link:hover {
  color: var(--accent);
  border-color: var(--glass-border);
  box-shadow: var(--glass-glow);
}

/* ─── Floating top-right badge ─── */
.badge {
  position: fixed; top: 26px; right: 26px; z-index: 100;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  padding: 8px 14px;
  border-radius: var(--r-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--accent-2);
}

/* ─── Top toggle controls ─── */
/* badge width varies (CH.NN · LNN · 한글제목 → ~260px 까지 가능).
   28px breathing gap 확보 — 더 떨어뜨려 한글 lesson 명과 겹치지 않게. */
.top-controls {
  /* Only the language toggle remains (layer toggle removed). It sits to the LEFT
     of the status badge (badge is at right:26px and can be ~280px wide), so keep
     a generous right offset to avoid overlapping the badge text. */
  position: fixed; top: 26px; right: 330px; z-index: 100;
  display: flex; gap: 8px;
  font-family: var(--font-mono);
}
@media (max-width: 1280px) {
  .top-controls { right: 310px; }
}

.toggle-group {
  display: flex;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-2);
  padding: 2px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.toggle-group button {
  background: none; border: 0; cursor: pointer;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  padding: 6px 12px;
  border-radius: var(--r-1);
  transition: all var(--dur-fast) var(--ease-out);
}
.toggle-group button.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.toggle-group button:hover:not(.active) { color: var(--text); }

/* ─── Cmd+K search trigger (sits beside the language toggle) ─── */
.cmdk-trigger {
  display: flex; align-items: center; gap: 7px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-2);
  padding: 6px 11px;
  color: var(--text-dim);
  cursor: pointer;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: all var(--dur-fast) var(--ease-out);
}
.cmdk-trigger svg { display: block; opacity: 0.85; }
.cmdk-trigger .cmdk-label {
  font-family: var(--font-sans); font-size: 11.5px;
  letter-spacing: 0.02em; font-weight: 500;
}
body.lang-en .cmdk-trigger .cmdk-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
}
.cmdk-trigger .cmdk-kbd {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  padding-left: 6px; margin-left: 4px;
  border-left: 1px solid var(--glass-border-2);
  color: var(--text-very-dim);
}
.cmdk-trigger:hover {
  color: var(--accent);
  border-color: var(--glass-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
@media (max-width: 880px) {
  .cmdk-trigger .cmdk-kbd { display: none; }
  .cmdk-trigger .cmdk-label { display: none; }  /* icon-only on small screens */
}

@media (max-width: 880px) {
  .top-controls { top: 64px; right: 14px; flex-direction: column; gap: 4px; }
  .badge, .back-link { padding: 6px 11px; font-size: 9.5px; }
}

/* ─── Meta strip ─── */
.meta-strip {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 36px;
  padding: 10px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.meta-strip .item { display: flex; gap: 7px; align-items: center; }
.meta-strip .lbl  { color: var(--text-very-dim); }
.meta-strip .val  { color: var(--accent); }
.meta-strip .val::before { content: '› '; opacity: 0.6; }
.meta-strip .sep  { color: var(--text-very-dim); opacity: 0.4; }

/* ─── Buttons ─── */
/* CTA 한글에서 mono 폰트는 fallback + 답답함. 한글일 때 sans, 영문일 때 mono 로 분기.
   영문 CTA 는 코드/HUD 결, 한글 CTA 는 본문 결 — 페어로 자연스럽다. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
  transition: all var(--dur-fast) var(--ease-out);
  font-weight: 500;
  border-radius: var(--r-2);
}
body.lang-en .btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn.primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
}
.btn.ghost {
  background: var(--glass-bg-strong);
  color: var(--accent);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn.ghost:hover { border-color: var(--accent); background: rgba(94, 234, 212, 0.08); }

/* ─── Structure pills ─── */
.pills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pill {
  padding: 9px 16px;
  background: var(--glass-bg);
  color: var(--text-dim);
  border: 1px solid var(--glass-border-2);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  transition: all var(--dur-fast) var(--ease-out);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.pill:hover {
  color: var(--text);
  border-color: var(--glass-border);
}
.pill.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}

/* ─── Section ─── */
.section { padding: 80px 0; border-top: 1px solid var(--rule); }
.section:first-child { border-top: 0; }

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  font-weight: 500;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--text-warm);
  margin-bottom: 14px;
}
.section-title em { font-style: normal; color: var(--accent); letter-spacing: -0.015em; }
body.lang-en .section-title em { letter-spacing: -0.035em; }
/* 한글 em 은 spacing 좁히지 않음, 영문 em (Cormorant) 은 그대로 -0.035 유지 */

.section-title-kr {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;        /* Noto Serif KR 300 → 400. 큰 화면에서 얇음 해소 */
  color: var(--text-dim);
  letter-spacing: -0.015em; /* 한글 letter-spacing -0.025 → -0.015 (덜 붙임) */
  line-height: 1.55;
  margin-bottom: 48px;
}

/* ─── Fact card (premium glass) ─── */
.fact-card {
  margin-top: 40px;
  padding: 36px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  box-shadow: var(--glass-shadow-lg);
  position: relative;
  border-radius: var(--r-3);
}
/* Verified Fact 라벨 — marketing 결 약화, 절제된 mono 표식으로 */
.fact-card::before {
  content: 'Verified';
  position: absolute; top: -10px; left: 28px;
  background: var(--bg);
  color: var(--text-very-dim);
  padding: 3px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 500;
  text-transform: uppercase;
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-1);
}
/* 인용 결: italic + 좌측 quote 마크 (hero-lead 와 페어, editorial 결 일관성) */
.fact-card .claim {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  color: var(--text-warm);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.020em;
  padding-left: 28px;
  position: relative;
}
.fact-card .claim::before {
  content: '"';
  position: absolute; left: 0; top: -10px;
  font-size: 52px; font-style: normal;
  color: var(--text-very-dim); opacity: 0.55;
  font-family: var(--font-display); line-height: 1;
}
.fact-card .claim em { font-style: normal; color: var(--accent); font-weight: 400; }
.fact-card .claim-kr {
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--text-dim);
  line-height: 1.85;
  margin-top: 16px;
  font-weight: 400;
  letter-spacing: -0.013em;
  padding-left: 28px;
}
.fact-card .src {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.9;
}
.fact-card .src .tag {
  display: inline-block;
  padding: 2px 7px;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 8px;
  font-weight: 600;
  border-radius: 2px;
}
.fact-card .src .tag.alt { background: var(--accent-2); }

/* ─── Source side panel (premium glass) ─── */
.source-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(440px, 92vw);
  height: 100vh;
  background: rgba(10, 14, 26, 0.85);
  border-left: 1px solid var(--glass-border);
  padding: 80px 32px 32px;
  overflow-y: auto;
  z-index: 90;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  box-shadow: -20px 0 60px rgba(6, 8, 15, 0.6);
}
.source-panel.open { transform: translateX(0); }
.source-panel h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  font-weight: 500;
}
.source-panel h4::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 10px;
}
.source-panel .src-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
}
.source-panel .src-item .tag {
  display: inline-block;
  padding: 1px 7px;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 8px;
  font-weight: 600;
  border-radius: 2px;
}
.source-panel .src-item .tag.alt { background: var(--accent-2); }
.source-panel .src-item .loc { color: var(--text); }
.source-panel .src-item a { color: var(--accent); }
.source-panel-close {
  position: absolute; top: 22px; right: 22px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-dim);
  font-size: 20px;
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: all var(--dur-fast);
}
.source-panel-close:hover { color: var(--accent); background: var(--glass-bg-strong); }

.source-panel-toggle {
  position: fixed;
  bottom: 26px; right: 26px; z-index: 85;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  cursor: pointer;
  border-radius: var(--r-2);
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(94, 234, 212, 0.28);
  transition: all var(--dur-fast);
}
.source-panel-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(94, 234, 212, 0.40);
}

/* ─── Scroll-to-top (glass HUD circle, stacked above Sources) ─── */
.scroll-top {
  position: fixed;
  bottom: 78px; right: 26px; z-index: 85;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  color: var(--accent);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast),
              background var(--dur-fast), border-color var(--dur-fast),
              box-shadow var(--dur-fast);
}
.scroll-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

/* ─── Command palette (Cmd/Ctrl + K quick-jump) ─── */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  background: rgba(5, 8, 10, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast);
}
.cmdk-overlay.open { opacity: 1; pointer-events: auto; }
.cmdk-modal {
  width: min(640px, 92vw); max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg);
  border-radius: var(--r-3);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(94, 234, 212, 0.08);
  overflow: hidden;
  transform: translateY(-8px) scale(0.99);
  transition: transform var(--dur-fast);
}
.cmdk-overlay.open .cmdk-modal { transform: translateY(0) scale(1); }
.cmdk-input {
  width: 100%; box-sizing: border-box;
  padding: 20px 22px;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text-warm);
  font-family: var(--font-serif);
  font-size: 19px; letter-spacing: -0.01em;
  outline: none;
}
.cmdk-input::placeholder { color: var(--text-dim); opacity: 0.7; }
.cmdk-list {
  list-style: none; margin: 0; padding: 8px;
  overflow-y: auto; flex: 1;
}
.cmdk-item {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 14px; border-radius: var(--r-2, 8px);
  cursor: pointer; transition: background var(--dur-fast);
}
.cmdk-item.active { background: rgba(94, 234, 212, 0.10); }
.cmdk-item.current { box-shadow: inset 3px 0 0 var(--accent); }
.cmdk-item.current .cmdk-ch { opacity: 1; font-weight: 700; }
/* Section labels in the empty-query view (Resume + each chapter). */
.cmdk-group {
  list-style: none;
  padding: 13px 14px 5px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.cmdk-list > .cmdk-group:first-child { padding-top: 4px; }
/* The single "resume / start here" pin sits under its own label. */
.cmdk-item.resume { background: rgba(94, 234, 212, 0.05); }
.cmdk-item.resume .cmdk-ch { opacity: 1; }
.cmdk-ch {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--accent); opacity: 0.85;
  min-width: 74px;
}
.cmdk-title {
  font-family: var(--font-serif); font-size: 15px;
  color: var(--text-warm); line-height: 1.4;
}
.cmdk-done {
  margin-left: auto; flex: 0 0 auto;
  color: var(--accent); font-size: 13px; font-weight: 700;
  opacity: 0.9;
}
.cmdk-empty {
  list-style: none; padding: 26px 14px; text-align: center;
  color: var(--text-dim); font-family: var(--font-serif); font-size: 14px;
}
.cmdk-hint {
  padding: 10px 16px; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--text-dim);
}

/* ─── Keyboard-shortcuts help (press ?) ─── */
.kbd-help-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 10, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast);
}
.kbd-help-overlay.open { opacity: 1; pointer-events: auto; }
.kbd-help-modal {
  width: min(380px, 90vw);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg);
  border-radius: var(--r-3);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  padding: 24px 26px;
}
.kbd-help-title {
  font-family: var(--font-serif); font-size: 17px;
  color: var(--text-warm); margin-bottom: 16px; letter-spacing: -0.01em;
}
.kbd-help-row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.kbd-help-row:first-of-type { border-top: 0; }
.kbd-help-row kbd {
  flex: 0 0 auto; min-width: 96px; text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); background: rgba(94, 234, 212, 0.10);
  border: 1px solid var(--glass-border); border-radius: var(--r-1);
  padding: 4px 8px;
}
.kbd-help-row span { font-family: var(--font-serif); font-size: 14px; color: var(--text); }

/* ─── Report error button ─── */
.report-btn {
  position: fixed;
  bottom: 26px; left: 26px; z-index: 85;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--glass-bg-strong);
  color: var(--text-dim);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: all var(--dur-fast);
}
.report-btn:hover { color: var(--accent); border-color: var(--glass-border); }
/* Chapter-nav 가 좌측 240px 사이드바라 report-btn 이 마지막 챕터(Ch.14)를 가린다.
   nav 폭만큼 옆으로 밀어 겹침 제거. 모바일(nav 가 burger 로 숨음)은 원위치 유지. */
body.has-chapter-nav .report-btn { left: 264px; }
@media (max-width: 980px) { body.has-chapter-nav .report-btn { left: 26px; } }

/* ─── Lesson nav footer ─── */
/* 한글 sans / 영문 mono 분기 (R4 패턴), prev / next 보조 라벨 + 중앙 위치감. */
.lesson-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  margin-top: 60px;
  flex-wrap: wrap;
  gap: 24px;
}
.lesson-nav a {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--text-dim);
  transition: color var(--dur-fast);
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
  max-width: 38%;
}
body.lang-en .lesson-nav a {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.lesson-nav a.next { text-align: right; align-items: flex-end; }
.lesson-nav a .ln-sup {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-very-dim);
}
.lesson-nav a .ln-main {
  font-size: 14px; line-height: 1.4;
  color: var(--text-dim);
  transition: color var(--dur-fast);
}
.lesson-nav a:hover .ln-main { color: var(--accent); }
.lesson-nav a.next .ln-main { color: var(--accent); }
.lesson-nav a.next:hover .ln-main { color: var(--accent-bright); }

/* 중앙 lesson 위치감 — "3 / 7  이 챕터" */
.lesson-nav .ln-position {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-display); font-style: normal;
  color: var(--text-very-dim);
  flex: 0 0 auto;
}
.lesson-nav .ln-position .ln-pos-num {
  font-size: 22px; color: var(--accent); font-weight: 400;
  letter-spacing: -0.02em;
}
.lesson-nav .ln-position .ln-pos-sep {
  font-size: 18px; opacity: 0.5; margin: 0 1px;
}
.lesson-nav .ln-position .ln-pos-total {
  font-size: 18px;
}
.lesson-nav .ln-position .ln-pos-label {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-very-dim);
  margin-left: 10px;
}
@media (max-width: 760px) {
  .lesson-nav a { max-width: 100%; }
  .lesson-nav .ln-position { order: -1; flex: 1 1 100%; justify-content: center; padding-bottom: 8px; border-bottom: 1px dashed var(--rule); }
}

/* ─── Main container ─── */
main.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px var(--container-pad) 60px;
  position: relative;
  z-index: 2;
}
@media (max-width: 880px) {
  main.container { padding: 80px 16px 32px; }
}

/* ════════════════════════════════════════════════════════════════
   Principle cards (shared across all chapters/lessons)
   ════════════════════════════════════════════════════════════════ */

.principle-grid {
  display: flex; flex-direction: column; gap: 28px;
  margin-top: 40px;
}
.principle {
  padding: 36px 40px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  position: relative;
  border-radius: var(--r-3);
  transition: border-color var(--dur-med), box-shadow var(--dur-med);
}
.principle:hover {
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
}
.principle::before {
  content: attr(data-num);
  position: absolute; top: 26px; right: 36px;
  font-family: var(--font-display); font-style: normal;
  font-size: 68px; color: var(--accent); opacity: 0.32;
  line-height: 1; font-weight: 400; pointer-events: none;
}
.principle h3 {
  font-family: var(--font-serif); font-size: 28px; font-weight: 400;
  letter-spacing: -0.03em; line-height: 1.25;
  margin-bottom: 6px; color: var(--text-warm); max-width: 78%;
}
.principle h3 .en {
  font-family: var(--font-display); font-style: normal;
  font-size: 20px; color: var(--accent); margin-left: 10px;
}
.principle .one-liner {
  font-family: var(--font-display); font-style: normal;
  font-size: 19px; color: var(--text-dim);
  margin-bottom: 24px; font-weight: 300;
  letter-spacing: -0.015em; max-width: 720px;
}

.principle-section {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--rule);
}
.principle-section .h {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 12px; font-weight: 500;
  color: var(--accent);
}
/* No emoji prefixes — color/weight distinguishes categories */
.principle-section.intuition       .h { color: var(--accent); }
.principle-section.principle-body  .h { color: var(--accent-2); }
.principle-section.derivation      .h { color: var(--accent); }
.principle-section.examples        .h { color: var(--accent-2); }
.principle-section.source          .h { color: var(--text-dim); }
.principle-section .h::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0.6;
}

.principle-section p, .principle-section li {
  font-family: var(--font-serif); font-size: 15.5px;
  color: var(--text); line-height: 1.95; font-weight: 300;
}
.principle-section p { margin-bottom: 10px; }
.principle-section ul, .principle-section ol { padding-left: 22px; }
.principle-section li { margin-bottom: 6px; }
.principle-section li::marker { color: var(--accent); }

.derive-steps {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 12px;
}
.derive-step {
  padding: 18px 2px;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}
.derive-step .step-n {
  display: inline-block;
  padding: 2px 9px; background: var(--accent); color: var(--bg);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; margin-right: 10px; border-radius: 2px;
}
.derive-step .step-text {
  font-family: var(--font-serif); font-size: 14.5px;
  color: var(--text); line-height: 1.8;
}
.derive-step .formula { margin-top: 8px; font-size: 15px; }
.derive-step .why {
  margin-top: 6px; font-size: 12.5px;
  color: var(--text-dim); font-style: normal;
}

.examples-table {
  width: 100%; margin-top: 10px;
  border-collapse: collapse;
  font-family: var(--font-mono); font-size: 12.5px;
}
.examples-table th {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--text-very-dim);
  font-weight: 500; letter-spacing: 0.06em;
}
.examples-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--rule);
  color: var(--text);
}
.examples-table tr.active td {
  background: rgba(94, 234, 212, 0.07);
  color: var(--accent);
}
.examples-table td.val { color: var(--accent); text-align: right; }
.examples-table td.alt { color: var(--accent-2); }

.principle-section.source {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text-dim); line-height: 1.85;
}
.principle-section.source .tag {
  display: inline-block; padding: 2px 7px;
  background: var(--accent); color: var(--bg);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-right: 8px; font-weight: 600; border-radius: 2px;
}
.principle-section.source .tag.alt { background: var(--accent-2); }

/* ─── Principle viz (embedded mini WebGL widgets) ─── */
.principle-viz {
  margin: 20px 0 4px;
  height: 280px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-2);
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.principle-viz canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.principle-viz .viz-caption {
  position: absolute; bottom: 12px; left: 16px; right: 16px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.04em;
  z-index: 2; pointer-events: none;
  background: rgba(6,8,15,0.65); padding: 6px 10px;
  border-radius: 3px; backdrop-filter: blur(8px);
}
.principle-viz .viz-controls {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 6px;
  z-index: 2;
}
.principle-viz .viz-controls .pill { font-size: 10px; padding: 6px 12px; }
.principle-viz .viz-readout {
  position: absolute; top: 12px; left: 16px;
  z-index: 2; font-family: var(--font-mono);
  font-size: 12px; color: var(--accent);
  background: rgba(6,8,15,0.65); padding: 8px 12px;
  border-radius: 3px; backdrop-filter: blur(8px);
  line-height: 1.6;
}
.principle-viz .viz-readout .lbl { color: var(--text-very-dim); margin-right: 6px; font-size: 10px; letter-spacing: 0.08em; }
.principle-viz .viz-readout .val { color: var(--accent-2); font-weight: 600; }
.principle-viz .viz-slider {
  position: absolute; bottom: 50px; left: 16px; right: 16px;
  z-index: 2;
}
.principle-viz .viz-slider input[type=range] {
  width: 100%; accent-color: var(--accent);
}
.principle-viz .viz-slider label {
  display: block; font-family: var(--font-mono); font-size: 10px;
  color: var(--text-very-dim); margin-bottom: 4px; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Inline SVG illustration block (e.g. Bragg) */
.principle-svg {
  margin: 20px 0 4px; padding: 24px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-2);
  backdrop-filter: var(--glass-blur);
  text-align: center;
}
.principle-svg svg { max-width: 100%; height: auto; }
.principle-svg .caption {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.04em;
}

/* Viewport zoom hint */
.zoom-hint {
  position: absolute; top: 12px; right: 12px;
  z-index: 3;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-very-dim); letter-spacing: 0.06em;
  text-transform: uppercase; pointer-events: none;
}
.zoom-hint::before { content: '+ '; color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
   Chapter Nav (left sidebar) + Page TOC (right sidebar)
   ════════════════════════════════════════════════════════════════ */

/* Body shifts to make room for sidebars */
body.has-chapter-nav main.container {
  margin-left: 240px;
}
body.has-chapter-nav .back-link { display: none; }  /* sidebar replaces it */

@media (min-width: 1380px) {
  body.has-page-toc main.container { margin-right: 220px; }
}

@media (max-width: 980px) {
  body.has-chapter-nav main.container { margin-left: 0; padding-top: 88px; }
}

/* ─── Chapter Nav ─── */
.chapter-nav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 240px;
  background: rgba(6, 8, 15, 0.92);
  border-right: 1px solid var(--glass-border-2);
  padding: 32px 0 24px;
  overflow-y: auto;
  z-index: 80;
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  display: flex; flex-direction: column;
  box-shadow: 2px 0 20px rgba(6, 8, 15, 0.4);
}
.chapter-nav::-webkit-scrollbar { width: 4px; }
.chapter-nav::-webkit-scrollbar-track { background: transparent; }
.chapter-nav::-webkit-scrollbar-thumb { background: var(--glass-border-2); border-radius: 2px; }

.chapter-nav .chap-logo {
  padding: 0 24px 22px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 26px;
  color: var(--text-warm);
  font-weight: 400;
  letter-spacing: -0.025em;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
  transition: color var(--dur-fast);
}
.chapter-nav .chap-logo .accent { color: var(--accent); }
.chapter-nav .chap-logo:hover { color: var(--accent); }

.chapter-nav .chap-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-very-dim);
  padding: 18px 24px 6px;
  text-transform: uppercase;
}

.chapter-nav .chap-link {
  display: block;
  padding: 8px 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: -0.005em;
  transition: all var(--dur-fast);
  position: relative;
}
.chapter-nav .chap-link:hover {
  color: var(--text);
  background: rgba(94, 234, 212, 0.04);
}
.chapter-nav .chap-link.active {
  color: var(--accent);
  background: rgba(94, 234, 212, 0.10);
  font-weight: 500;
}
.chapter-nav .chap-link.preview::after {
  content: '  · preview';
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-very-dim);
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* ─── Chapter overview card grid ─── */
.chapter-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px; margin-top: 40px;
}
.chapter-card-grid .ch-group {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding: 4px 2px 10px; margin-top: 18px;
  border-bottom: 1px solid var(--rule);
}
.chapter-card-grid .ch-group:first-child { margin-top: 0; }

/* ─── First-visit welcome hint (home, one-time, dismissible) ─── */
/* border-left 컬러바 금지 (CLAUDE.md). 좌측 small dot + 균일 border 로 대체. */
.welcome-hint {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 0 0 30px; padding: 16px 20px 16px 22px;
  background: var(--glass-bg); border: 1px solid var(--glass-border-2);
  border-radius: var(--r-3);
  font-family: var(--font-serif); font-size: 14.5px; line-height: 1.75;
  color: var(--text-dim);
  position: relative;
}
.welcome-hint::before {
  content: '';
  position: absolute; left: 18px; top: 24px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.welcome-hint .wh-text { padding-left: 16px; }
.welcome-hint .wh-text strong { color: var(--text-warm); font-weight: 500; }
.welcome-hint kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  background: rgba(94, 234, 212, 0.08); border: 1px solid var(--glass-border);
  border-radius: 4px; padding: 1px 6px;
}
.welcome-hint .wh-close {
  margin-left: auto; flex: 0 0 auto; background: none; border: 0;
  color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer;
  padding: 0 4px;
}
.welcome-hint .wh-close:hover { color: var(--accent); }
.chapter-card {
  display: block; text-decoration: none; color: inherit;
  padding: 28px 26px; position: relative; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-border-2);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-3); box-shadow: var(--glass-shadow);
  transition: all var(--dur-med) var(--ease-out);
  min-height: 200px; display: flex; flex-direction: column;
}
.chapter-card:hover {
  border-color: var(--glass-border);
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-lg), var(--glass-glow);
}
.chapter-card .ch-num {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-display); font-style: normal;
  font-size: 44px; color: var(--accent); opacity: 0.50; /* 0.32 → 0.50 (WCAG 4.5:1) */
  line-height: 1; font-weight: 400;
}
.chapter-card.built .ch-num { opacity: 0.75; }
.chapter-card .ch-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-very-dim); margin-bottom: 14px;
}
.chapter-card.built .ch-tag {
  color: var(--accent-2);
}
.chapter-card.built .ch-tag::before { content: '● '; }
.chapter-card .ch-progress {
  align-self: flex-start; margin-top: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(94, 234, 212, 0.10);
  border: 1px solid var(--glass-border);
  padding: 3px 9px; border-radius: var(--r-2);
}
.chapter-card .ch-progress.complete {
  background: var(--accent); color: var(--bg); font-weight: 700;
}
.chapter-card h3 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 400;
  letter-spacing: -0.015em;       /* 한글 -0.025 → -0.015 */
  line-height: 1.45;              /* 1.3 → 1.45 (한글 답답 해소) */
  color: var(--text-warm); margin-bottom: 8px;
}
.chapter-card .ch-en {
  font-family: var(--font-display); font-style: italic;  /* normal → italic 으로 한·영 결 분리 */
  font-size: 16px; font-weight: 400;
  color: var(--text-dim); margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.chapter-card .ch-desc {
  font-family: var(--font-serif); font-size: 14px;       /* 13.5 → 14 (한글 본문 가독) */
  font-weight: 400;
  color: var(--text-dim); line-height: 1.75;
  letter-spacing: -0.013em;
  flex: 1;
}
.chapter-card .ch-meta {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-very-dim); letter-spacing: 0.04em;
}

/* ─── Lesson list (chapter overview pages) ─── */
.lesson-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 36px;
}
.lesson-item {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 28px;
  background: var(--glass-bg); border: 1px solid var(--glass-border-2);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-2); text-decoration: none; color: inherit;
  transition: all var(--dur-fast) var(--ease-out);
}
.lesson-item.built {
  cursor: pointer;
}
.lesson-item.built:hover {
  border-color: var(--glass-border);
  background: var(--glass-bg-strong);
  transform: translateX(4px);
}
.lesson-item.coming {
  opacity: 0.55;
  cursor: default;
}
.lesson-item .l-num {
  font-family: var(--font-display); font-style: normal;
  font-size: 36px; color: var(--accent); line-height: 1;
  font-weight: 400; min-width: 60px;
}
.lesson-item .l-body { flex: 1; }
.lesson-item .l-title {
  font-family: var(--font-serif); font-size: 18px; font-weight: 400;
  color: var(--text-warm); margin-bottom: 4px; letter-spacing: -0.02em;
}
.lesson-item .l-en {
  font-family: var(--font-display); font-style: normal;
  font-size: 13px; color: var(--text-dim); margin-bottom: 6px;
}
.lesson-item .l-desc {
  font-family: var(--font-serif); font-size: 13px;
  color: var(--text-dim); line-height: 1.6;
}
.lesson-item .l-status {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-very-dim); white-space: nowrap;
}
.lesson-item.built .l-status { color: var(--accent-2); }
.lesson-item.built .l-status::before { content: '● '; }
.lesson-item.coming .l-status::before { content: '○ '; }

.chapter-nav-burger {
  display: none;
  position: fixed; top: 22px; left: 22px; z-index: 110;
  width: 42px; height: 42px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2);
  backdrop-filter: var(--glass-blur);
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
  align-items: center; justify-content: center;
}

@media (max-width: 980px) {
  .chapter-nav {
    transform: translateX(-100%);
    transition: transform var(--dur-med) var(--ease-out);
    width: 280px;
  }
  .chapter-nav.open { transform: translateX(0); }
  .chapter-nav-burger { display: flex; }
}

/* ─── Page TOC ─── */
.page-toc {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 220px;
  padding: 100px 24px 24px 0;
  z-index: 70;
  overflow-y: auto;
  display: none;
  pointer-events: none;
}
.page-toc > * { pointer-events: auto; }
@media (min-width: 1380px) {
  .page-toc { display: block; }
}
.page-toc::-webkit-scrollbar { width: 0; }

.page-toc .toc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-very-dim);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-left: 16px;
}
.page-toc .toc-list, .page-toc .toc-sub {
  list-style: none; padding: 0; margin: 0;
}
.page-toc .toc-sub {
  padding-left: 14px; margin-top: 2px; margin-bottom: 4px;
}
.page-toc .toc-link {
  display: block;
  padding: 6px 0 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-dim);
  border-left: 2px solid var(--rule);
  transition: all var(--dur-fast);
  line-height: 1.4;
}
.page-toc .toc-link:hover {
  color: var(--text);
  border-left-color: var(--text-dim);
}
.page-toc .toc-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}
.page-toc .toc-sub-link {
  font-size: 11.5px;
  padding-left: 12px;
  color: var(--text-very-dim);
}

/* ════════════════════════════════════════════════════════════════
   Cinematic transitions (page load, section reveal, smooth toggles)
   ════════════════════════════════════════════════════════════════ */

/* Page fade-in on load */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.container > * {
  animation: pageFadeIn 0.7s var(--ease-out) backwards;
}
main.container > *:nth-child(1) { animation-delay: 0.02s; }
main.container > *:nth-child(2) { animation-delay: 0.08s; }
main.container > *:nth-child(3) { animation-delay: 0.14s; }
main.container > *:nth-child(4) { animation-delay: 0.18s; }
main.container > *:nth-child(5) { animation-delay: 0.20s; }

.chapter-nav { animation: navSlideIn 0.6s var(--ease-out); }
.page-toc    { animation: tocSlideIn 0.6s var(--ease-out) 0.2s backwards; }
@keyframes navSlideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes tocSlideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Smooth stat-row expand */
.stat-row-expand {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  transition: max-height 0.4s var(--ease-out),
              opacity 0.3s var(--ease-out),
              margin-top 0.3s var(--ease-out),
              padding-top 0.3s var(--ease-out);
}
.stat-row.open .stat-row-expand {
  max-height: 240px;
  opacity: 1;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px dashed var(--rule) !important;
}

/* Layer toggle removed — academic blocks are always visible (unified view). */
.academic-only { opacity: 1; transform: none; }

/* Pill selection uses static .active styling only (cyan click-pulse removed for a calmer, less effecty feel). */

/* Chapter nav link hover bar */
.chapter-nav .chap-link {
  position: relative;
  transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}
.chapter-nav .chap-link:hover:not(.soon):not(.active) {
  padding-left: 28px;
}

/* Buttons get tactile lift */
.btn.primary:active,
.btn.ghost:active { transform: translateY(0); transition-duration: 0.08s; }

/* Source panel toggle subtle bounce */
/* Source-panel toggle: no infinite pulsing glow (removed an AI-ish attention pulse for a calmer surface). */

/* Fact card subtle hover float */
.fact-card { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.fact-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg), var(--glass-glow); }

/* Lang toggle EN notice toast */
.lang-notice {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 200;
  padding: 12px 22px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-2);
  backdrop-filter: var(--glass-blur);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  box-shadow: var(--glass-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.lang-notice.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════════
   Mobile + Touch — global lesson polish
   - Touch-friendly canvas containers (min-height + touch-action)
   - Tighter principle / fact-card padding < 780px
   - Workbench grid stacks (lessons already do this individually,
     but this catches any missed page)
   - Buttons/pills enlarge tap target on touch
   ════════════════════════════════════════════════════════════════ */
canvas { touch-action: none; }

@media (max-width: 980px) {
  .workbench { grid-template-columns: 1fr !important; gap: 18px !important; padding: 24px 0 !important; }
  .viewport, .canvas-wrap, .stage { min-height: 320px; }
  .params-panel, .controls, .panel { max-height: none !important; }
}

@media (max-width: 780px) {
  main.container { padding: 76px 14px 24px; }
  .ch-hero { padding: 24px 0 32px !important; }
  .principle { padding: 22px 20px !important; }
  .principle .p-num { font-size: 11px !important; }
  .fact-card { padding: 22px 20px !important; }
  .section { padding: 36px 0 !important; }
  .section-title { font-size: clamp(28px, 6vw, 40px) !important; }
  .lesson-nav { flex-direction: column; gap: 12px; }
  .meta-strip { gap: 8px; font-size: 9.5px; padding: 8px 12px; }
  .meta-strip .sep { display: none; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; text-align: center; }
}

/* Touch-target enlargement for pills/buttons (44px Apple HIG min) */
@media (pointer: coarse) {
  .btn, .pill, .toggle-group button { min-height: 44px; }
  .cmdk-trigger, .source-panel-toggle, .report-btn { min-height: 44px; }
  .scroll-top { width: 46px; height: 46px; }
  .cmdk-item { padding: 14px 14px; }
  .lesson-item { padding: 18px 16px !important; }
}

/* ════════════════════════════════════════════════════════════════
   Print — students print / save lessons as PDF. This is a dark theme
   and browsers drop background colors by default, so light text would
   print invisibly. Redefine the palette to ink-friendly dark-on-white,
   hide all interactive chrome, flatten glass, and avoid bad breaks.
   The data-lang-only toggle still applies, so print follows the
   currently selected language.
   ════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --bg: #ffffff;
    --text: #15171c; --text-warm: #0c0d10; --text-dim: #3a3f4a; --text-very-dim: #555b66;
    --accent: #0c7a6c; --accent-2: #4a6a12;
    --rule: #cfd4dc;
    --glass-bg: transparent; --glass-bg-strong: transparent;
    --glass-border: #d2d7df; --glass-border-2: #e0e4ea;
    --glass-shadow: none; --glass-shadow-lg: none; --glass-glow: none;
  }
  html, body { background: #fff !important; color: var(--text) !important; }

  /* Hide interactive / fixed chrome */
  .chapter-nav, .chapter-nav-burger, .page-toc, .top-controls, .badge,
  .back-link, .corner, .reading-progress, .scroll-top, .source-panel,
  .source-panel-toggle, .report-btn, .cmdk-overlay, .cmdk-trigger,
  .skip-link, .lang-notice { display: none !important; }

  /* Reclaim full width once the sidebars are gone */
  body.has-chapter-nav main.container,
  body.has-page-toc main.container { margin: 0 !important; padding: 0 0 24px !important; }
  main.container { max-width: 100% !important; }

  /* Flatten glass + effects for clean ink */
  * {
    box-shadow: none !important; text-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .glass, .fact-card, .principle, .chapter-card, .formula-block,
  [class*="-card"] { background: transparent !important; border-color: var(--glass-border) !important; }

  /* Avoid awkward page breaks */
  .principle, .fact-card, .formula-block .step, .lesson-prose p,
  .app-card, figure, .src, table { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, .section-title, .lesson-title { break-after: avoid; page-break-after: avoid; }

  a { color: var(--accent) !important; text-decoration: underline; }
}

/* ════════════════════════════════════════════════════════════════
   Language toggle — visible response
   Until full English translations land, EN mode hides Korean
   descriptions/subtitles and shows a sticky banner explaining the
   status. English italic display titles stay visible in both modes.
   ════════════════════════════════════════════════════════════════ */
body.lang-en .ch-title-kr,
body.lang-en .ch-lead-kr,
body.lang-en .lesson-title-kr,
body.lang-en .lesson-lead-kr,
body.lang-en .section-title-kr,
body.lang-en .p-title-kr,
body.lang-en .p-body-kr,
body.lang-en .claim-kr,
body.lang-en .l-title,
body.lang-en .l-desc,
body.lang-en .params-narrative,
body.lang-en .case-card .reason,
body.lang-en .params-narrative em {
  display: none !important;
}
body.lang-en .l-en,
body.lang-en .case-card .head {
  /* English already present — keep, just emphasize */
  color: var(--text-warm);
}

/* Chapter lead: the English .ch-lead is a full body paragraph that mirrors the
   Korean .ch-lead-kr. Style them identically so toggling KO/EN never shifts
   color or size, and show .ch-lead only in EN (Korean lead shows only in KO),
   so each mode shows exactly one lead. */
.ch-lead {
  font-family: var(--font-serif); font-size: 15.5px; font-style: normal;
  color: var(--text-dim); line-height: 1.9; max-width: 680px;
  margin-bottom: 28px; font-weight: 300; border-top: 0; padding-top: 0;
}
body:not(.lang-en) .ch-lead { display: none; }
/* EN 모드: 한국어 .l-title 이 숨겨지므로 영문 .l-en 이 제목 역할을 한다.
   Cormorant Garamond italic 은 대형 hero 전용 디스플레이 서체라 작은
   리스트 크기에서 획이 얇고 x-height 가 낮아 흐릿하게 읽힌다. 또 Cormorant
   은 300/400 weight 만 로드되어 굵게도 못 만든다. → EN 제목은 직립 세리프
   (Noto Serif KR, 한국어 제목과 동일 서체, 500 weight 사용 가능)로 키워서
   또렷하게. italic 디스플레이는 hero 대형 타이틀에만 남긴다. */
body.lang-en .lesson-item .l-en {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-warm);
  margin-bottom: 4px;
}

/* The persistent EN notice banner was removed (flagged as intrusive). The brief
   toast from showLangNotice() on toggle already tells EN users that most body
   text is still Korean, so no always-on bar is needed. With the banner gone the
   top controls/badge keep their normal top:26px and content needs no extra
   headroom. */

/* ════════════════════════════════════════════════════════════════
   HIGH-END UI POLISH — global overrides for all lessons
   Inspired by Vision OS depth, Linear precision, Stripe restraint.
   - Range sliders: gradient track, glow thumb, hover lift
   - Buttons / pills: layered gradient + inset highlight + drop shadow
   - Value labels: tabular-nums + subtle accent chip background
   - Focus rings: cyan inner glow, never default browser blue
   ════════════════════════════════════════════════════════════════ */

/* Focus state — clear cyan ring (never default browser blue). Covers
   links too: chapter nav, page-TOC, prev/next, footer are all <a> and
   are the primary keyboard-navigation targets. */
button:focus-visible,
a:focus-visible,
input[type=range]:focus-visible,
.pill:focus-visible,
.btn:focus-visible {
  outline: 2px solid rgba(94, 234, 212, 0.65);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12);
}

/* Respect prefers-reduced-motion: neutralize CSS transitions/animations
   (scroll-top, palette, skip-link, card hovers, reveal-on-enter). WebGL
   viewports are content, not decoration, so they're intentionally left. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── RANGE SLIDER (full WebKit + Firefox restyle) ── */
input[type=range].polish,
.workbench input[type=range],
.vp-controls input[type=range],
.slider-row input[type=range],
.controls-line input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 0;
  padding: 0;
}
/* Track — WebKit */
.workbench input[type=range]::-webkit-slider-runnable-track,
.vp-controls input[type=range]::-webkit-slider-runnable-track,
.slider-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.45) 0%, rgba(94, 234, 212, 0.18) 60%, rgba(94, 234, 212, 0.06) 100%);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(94, 234, 212, 0.15);
}
/* Thumb — WebKit */
.workbench input[type=range]::-webkit-slider-thumb,
.vp-controls input[type=range]::-webkit-slider-thumb,
.slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E0FFF8 0%, #5EEAD4 55%, #3DB6A1 100%);
  border: 1px solid rgba(232, 253, 247, 0.85);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
  transition: transform 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.workbench input[type=range]:hover::-webkit-slider-thumb,
.vp-controls input[type=range]:hover::-webkit-slider-thumb,
.slider-row input[type=range]:hover::-webkit-slider-thumb {
  transform: scale(1.14);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.65),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.workbench input[type=range]:active::-webkit-slider-thumb,
.vp-controls input[type=range]:active::-webkit-slider-thumb,
.slider-row input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.05);
}
/* Track + thumb — Firefox */
.workbench input[type=range]::-moz-range-track,
.vp-controls input[type=range]::-moz-range-track,
.slider-row input[type=range]::-moz-range-track {
  height: 4px;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.45) 0%, rgba(94, 234, 212, 0.18) 60%, rgba(94, 234, 212, 0.06) 100%);
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.15);
}
.workbench input[type=range]::-moz-range-thumb,
.vp-controls input[type=range]::-moz-range-thumb,
.slider-row input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E0FFF8 0%, #5EEAD4 55%, #3DB6A1 100%);
  border: 1px solid rgba(232, 253, 247, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ── BUTTONS — flat, quiet, intentional (no gradient / shimmer / glow) ── */
.btn,
.controls-line button,
.vp-controls button:not(.pill),
.psi-toggle button,
.mode-toggle button {
  position: relative;
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.24);
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  border-radius: var(--r-1);
  cursor: pointer;
  transition:
    background 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    color 0.18s var(--ease-out);
}
.btn:hover,
.controls-line button:hover,
.vp-controls button:not(.pill):hover,
.psi-toggle button:hover,
.mode-toggle button:hover {
  background: rgba(94, 234, 212, 0.13);
  border-color: rgba(94, 234, 212, 0.5);
  color: var(--text-warm);
}
.btn:active,
.controls-line button:active,
.vp-controls button:not(.pill):active,
.psi-toggle button:active,
.mode-toggle button:active {
  background: rgba(94, 234, 212, 0.18);
}
.psi-toggle button.on,
.mode-toggle button.on {
  background: rgba(94, 234, 212, 0.18);
  border-color: rgba(94, 234, 212, 0.6);
  color: var(--text-warm);
}

/* Primary CTA — solid, confident, no gradient/glow */
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.btn.primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--bg);
}

/* ── PILLS (mode-pills, gas-pills, def-pills, dopant-pills, case-pills, etc) ── */
.pill,
.mode-pills .pill,
.gas-pills .pill,
.def-pills .pill,
.dopant-pills .pill,
.case-pills .pill,
.orb-pills .pill,
.elem-grid .pill,
.preset-pills .pill {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 28, 42, 0.6) 0%, rgba(12, 18, 28, 0.6) 100%);
  border: 1px solid rgba(94, 234, 212, 0.14);
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  border-radius: var(--r-1);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.20s var(--ease-out),
    background 0.30s var(--ease-out),
    border-color 0.30s var(--ease-out),
    box-shadow 0.30s var(--ease-out),
    color 0.30s var(--ease-out);
  box-shadow:
    inset 0 1px 0 rgba(232, 253, 247, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3);
}
.pill::before,
.mode-pills .pill::before,
/* Pill top-edge shimmer highlight removed for a flatter, less effecty surface. */
.pill:hover:not(.active),
.mode-pills .pill:hover:not(.active),
.gas-pills .pill:hover:not(.active),
.def-pills .pill:hover:not(.active),
.dopant-pills .pill:hover:not(.active),
.orb-pills .pill:hover:not(.active),
.elem-grid .pill:hover:not(.active) {
  border-color: rgba(94, 234, 212, 0.4);
  color: var(--text);
  background: linear-gradient(180deg, rgba(28, 38, 56, 0.7) 0%, rgba(16, 22, 34, 0.7) 100%);
  transform: translateY(-1px);
}
/* Active pill: glow + accent border + bottom underline ribbon */
.pill.active,
.mode-pills .pill.active,
.gas-pills .pill.active,
.def-pills .pill.active,
.dopant-pills .pill.active,
.orb-pills .pill.active,
.elem-grid .pill.active {
  background: rgba(94, 234, 212, 0.16);
  border-color: rgba(94, 234, 212, 0.55);
  color: #E0FFF8;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── VALUE LABELS — tabular nums + subtle chip ── */
.slider-row .val,
.param-row .v,
.formula-step .step-num,
.q-hud .v,
.t-hud .v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.slider-row .val {
  padding: 3px 10px;
  background: rgba(94, 234, 212, 0.06);
  border: 1px solid rgba(94, 234, 212, 0.16);
  border-radius: 999px;
  display: inline-block;
}

/* ── HUD overlays — glass elevation upgrade ── */
.q-hud, .t-hud, .energy-ladder {
  background: linear-gradient(180deg, rgba(6, 10, 18, 0.85) 0%, rgba(6, 10, 18, 0.65) 100%);
  border: 1px solid rgba(94, 234, 212, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(232, 253, 247, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(94, 234, 212, 0.06);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* ── Section divider in panels — cleaner typographic rhythm ── */
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.4), transparent);
}

/* ── Workbench heads — subtle status indicator dot
       (raise specificity to override lesson inline `content: ' ]'`) ── */
.viewport-block .vp-head .id::before,
.viewport-block .vp-head .id::after {
  content: '' !important;
}
.viewport-block .vp-head .id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.viewport-block .vp-head .id::after {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: liveBlink 2.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── EN 모드에서 viewport-id 한글 leak 시각 약화 ──
       vp-id 는 JS-set 디버그성 텍스트 (Material · 두께 · 경도 식).
       91 lesson 모두 lang-aware 재작성은 비효율이라 EN 에서는 흐림 처리해
       메인 콘텐츠로의 시선 빼앗김을 줄인다 (정보는 보존). */
body.lang-en .viewport-block .vp-head .id {
  opacity: 0.42;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ── Formula live numbers — soft pulse on value change (JS toggles .pulse) ── */
.formula-step span[id^="step"] {
  display: inline-block;
  transition: color 0.3s, transform 0.18s;
}

/* ── Reduce motion preference ── */
/* ── 수렴 블룸 — 레슨 완주 시네마틱 페이오프 (1회) ── */
.cbloom {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none; opacity: 0;
  display: grid; place-items: center;
  transition: opacity 0.5s ease;
}
.cbloom.show { opacity: 1; }
.cbloom canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cbloom-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 56% at 50% 50%, transparent 28%, rgba(2, 5, 12, 0.62) 82%);
}
.cbloom-text {
  position: relative; z-index: 1; text-align: center;
  opacity: 0; animation: cbloomTextIn 0.9s ease 0.35s forwards;
}
.cbloom-line {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 5vw, 46px); color: var(--text-warm);
  letter-spacing: -0.02em; text-shadow: 0 0 24px rgba(94, 234, 212, 0.28);
}
.cbloom-count {
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
@keyframes cbloomTextIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cbloom-skip {
  position: absolute; bottom: 30px; right: 30px; z-index: 2;
  pointer-events: auto; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-2);
  background: var(--glass-bg); border: 1px solid var(--glass-border-2);
  color: var(--text-dim); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.cbloom-skip:hover { color: var(--text-warm); border-color: var(--glass-border); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* 페이오프 overlay 는 페이드만 허용 (텍스트 정적 표시) */
  .cbloom { transition: opacity 0.3s ease !important; }
  .cbloom-text { opacity: 1 !important; animation: none !important; }
}