/* ============================================================
   사주 보고서 — 디자인 토큰 + 커스텀 스타일
   기술: Tailwind CDN + 본 파일 + script.js
   ============================================================ */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  /* Surface */
  --bg:                #fafafa;
  --bg-elevated:       #ffffff;
  --bg-subtle:         #f4f4f5;
  --bg-inset:          #ffffff;

  /* Text */
  --text:              #18181b;
  --text-secondary:    #3f3f46;
  --text-muted:        #71717a;
  --text-on-accent:    #ffffff;

  /* Primary (회의·증거) */
  --accent-primary:        #6366f1;
  --accent-primary-hover:  #4f46e5;
  --accent-primary-soft:   #eef2ff;
  --accent-primary-end:    #8b5cf6;

  /* Secondary (옹호) */
  --accent-secondary:      #f59e0b;
  --accent-secondary-soft: #fffbeb;

  /* Neutral (합의) */
  --accent-neutral:        #10b981;
  --accent-neutral-soft:   #ecfdf5;

  --border:        #e4e4e7;
  --border-strong: #d4d4d8;
  --ring:          rgba(99, 102, 241, 0.35);

  --glow-primary:   0 0 0 1px rgba(99, 102, 241, 0.20),
                    0 8px 24px -8px rgba(99, 102, 241, 0.30);
  --glow-secondary: 0 0 0 1px rgba(245, 158, 11, 0.22),
                    0 8px 24px -8px rgba(245, 158, 11, 0.28);
  --glow-neutral:   0 0 0 1px rgba(16, 185, 129, 0.20),
                    0 8px 24px -8px rgba(16, 185, 129, 0.28);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
  --duration-xslow: 1200ms;

  /* Fonts */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg:              #0a0a0f;
  --bg-elevated:     #111118;
  --bg-subtle:       #18181f;
  --bg-inset:        #0f0f15;

  --text:            #f4f4f5;
  --text-secondary:  #d4d4d8;
  --text-muted:      #a1a1aa;
  --text-on-accent:  #0a0a0f;

  --accent-primary:        #818cf8;
  --accent-primary-hover:  #a5b4fc;
  --accent-primary-soft:   rgba(99, 102, 241, 0.10);
  --accent-primary-end:    #a78bfa;

  --accent-secondary:      #fbbf24;
  --accent-secondary-soft: rgba(245, 158, 11, 0.10);

  --accent-neutral:        #34d399;
  --accent-neutral-soft:   rgba(16, 185, 129, 0.10);

  --border:        #27272a;
  --border-strong: #3f3f46;
  --ring:          rgba(129, 140, 248, 0.45);

  --glow-primary:   0 0 0 1px rgba(129, 140, 248, 0.30),
                    0 12px 32px -8px rgba(129, 140, 248, 0.35);
  --glow-secondary: 0 0 0 1px rgba(251, 191, 36, 0.30),
                    0 12px 32px -8px rgba(251, 191, 36, 0.30);
  --glow-neutral:   0 0 0 1px rgba(52, 211, 153, 0.30),
                    0 12px 32px -8px rgba(52, 211, 153, 0.30);
}

/* ---------- 2. 베이스 ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.75;
  word-break: keep-all;
  line-break: strict;
  transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out);
  font-feature-settings: "ss01", "ss02";
}

::selection {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. 타이포 유틸 ---------- */
.t-display {
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-optical-sizing: auto;
}
.t-h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.t-h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.t-h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.t-body-lg {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.7;
}
.t-body-sm {
  font-size: 0.9375rem;
  line-height: 1.6;
}
.t-mono-stat {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.t-mono-inline {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}
.t-caption {
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* ---------- 4. 그라디언트 텍스트 ---------- */
.gradient-text {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-end) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ---------- 5. Hero 배경 부유 그라디언트 ---------- */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-blob {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.hero-blob-1 {
  background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
  opacity: 0.18;
  top: -10%;
  left: -10%;
  animation: float-1 28s var(--ease-in-out) infinite;
}
.hero-blob-2 {
  background: radial-gradient(circle, var(--accent-primary-end) 0%, transparent 70%);
  opacity: 0.14;
  bottom: -10%;
  right: -10%;
  filter: blur(100px);
  animation: float-2 35s var(--ease-in-out) infinite;
}
[data-theme="dark"] .hero-blob-1 { opacity: 0.28; }
[data-theme="dark"] .hero-blob-2 { opacity: 0.22; }

@keyframes float-1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 30px); }
}
@keyframes float-2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-30px, -40px); }
}

/* 노이즈 오버레이 */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ---------- 6. 등장 애니메이션 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }
[data-reveal-delay="5"] { transition-delay: 500ms; }

/* Hero 진입 (페이지 로드시) */
.hero-anim {
  opacity: 0;
  transform: translateY(8px);
  animation: hero-rise 800ms var(--ease-out) forwards;
}
.hero-anim-d-1 { animation-delay: 0ms; }
.hero-anim-d-2 { animation-delay: 150ms; }
.hero-anim-d-3 { animation-delay: 350ms; }
.hero-anim-d-4 { animation-delay: 550ms; }
.hero-anim-d-5 { animation-delay: 630ms; }
.hero-anim-d-6 { animation-delay: 710ms; }
.hero-anim-d-7 { animation-delay: 1100ms; }
@keyframes hero-rise {
  to { opacity: 1; transform: none; }
}

/* 스크롤 인디케이터 bounce */
.scroll-bounce {
  animation: bounce-y 1.6s var(--ease-in-out) infinite;
}
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- 7. 카드 컴포넌트 ---------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
@media (max-width: 640px) {
  .card { padding: 24px; }
}
.card-hover:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-primary);
  transform: translateY(-2px);
}
.card-hover:hover .card-num { opacity: 1; }

.card-meta {
  border-left: 4px solid var(--accent-neutral);
}
.card-amber {
  border-left: 4px solid var(--accent-secondary);
}
.card-indigo {
  border-left: 4px solid var(--accent-primary);
}
.card-emerald {
  border-left: 4px solid var(--accent-neutral);
}

.card-num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--accent-primary);
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-out);
  letter-spacing: -0.02em;
}

.card-highlight {
  padding: 32px;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-primary);
}

/* ---------- 8. 칩 ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.chip-amber { color: var(--accent-secondary); border-color: rgba(245,158,11,0.3); background: var(--accent-secondary-soft); }
.chip-indigo { color: var(--accent-primary); border-color: rgba(99,102,241,0.3); background: var(--accent-primary-soft); }
.chip-emerald { color: var(--accent-neutral); border-color: rgba(16,185,129,0.3); background: var(--accent-neutral-soft); }
.chip:hover { border-color: var(--accent-primary); }

/* ---------- 9. 각주 ---------- */
.fn-link {
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
  padding: 0 2px;
  vertical-align: super;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-out);
}
.fn-link:hover { color: var(--accent-primary-hover); text-decoration: underline; }

.fn-tooltip {
  position: fixed;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.15);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.fn-tooltip.is-visible { opacity: 1; }

/* References 항목 점프 시 highlight */
.ref-highlight {
  animation: ref-pulse 1200ms var(--ease-out);
}
@keyframes ref-pulse {
  0%   { background: var(--accent-primary-soft); }
  100% { background: transparent; }
}

/* ---------- 10. 본문 단락 ---------- */
.prose {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.prose p + p { margin-top: 1.25rem; }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { font-style: italic; }
.prose a:not(.fn-link) { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; }

/* 정의 박스 */
.defbox {
  background: var(--bg-subtle);
  border-left: 4px solid var(--accent-primary);
  padding: 24px;
  border-radius: var(--radius-md);
  margin: 32px 0;
}

/* Pull quote */
.pullquote {
  position: relative;
  padding: 64px;
  background: var(--bg-subtle);
  border-radius: var(--radius-xl);
  margin: 48px 0;
}
@media (max-width: 640px) {
  .pullquote { padding: 32px; }
}
.pullquote::before {
  content: '“';
  position: absolute;
  top: 8px;
  left: 24px;
  font-family: var(--font-sans);
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 800;
  color: var(--accent-primary);
  opacity: 0.3;
  line-height: 1;
}
.pullquote-text {
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.pullquote-source {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.pullquote-inline {
  border-left: 4px solid var(--accent-primary);
  padding: 16px 24px;
  margin: 32px 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--accent-primary-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pullquote-inline.is-neutral {
  border-color: var(--accent-neutral);
  background: var(--accent-neutral-soft);
}

/* ---------- 11. 스크롤 진척 ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--border);
  z-index: 60;
}
.scroll-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary-end));
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* ---------- 12. 사이드 ToC ---------- */
.toc {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  z-index: 30;
  display: none;
}
@media (min-width: 1280px) {
  .toc { display: block; }
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toc-link {
  display: block;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: var(--font-mono);
}
.toc-link:hover { color: var(--text); }
.toc-link.active {
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
  font-weight: 600;
}

/* ---------- 13. 다크/라이트 토글 ---------- */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-spring);
}
.theme-toggle:hover {
  border-color: var(--accent-primary);
}
.theme-toggle .icon {
  width: 20px;
  height: 20px;
  transition: transform var(--duration-base) var(--ease-spring);
}
.theme-toggle:active .icon { transform: rotate(180deg) scale(0.85); }

[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none;  }
[data-theme="dark"] .theme-toggle .icon-moon  { display: none;  }
[data-theme="dark"] .theme-toggle .icon-sun   { display: block; }

/* ---------- 14. 누적 막대 차트 (§2) ---------- */
.bar-chart-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity var(--duration-fast) var(--ease-out);
}
@media (max-width: 640px) {
  .bar-chart-row {
    grid-template-columns: 110px 1fr 44px;
    gap: 8px;
  }
}
.bar-chart-row.is-dimmed { opacity: 0.35; }
.bar-chart-row .label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.bar-chart-row .total {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: right;
}
.bar-track {
  display: flex;
  height: 24px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.bar-segment {
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out);
  cursor: pointer;
  position: relative;
}
.is-visible .bar-segment { transform: scaleX(1); }
.bar-grade-A { background: var(--accent-primary); }
.bar-grade-B { background: var(--accent-primary-end); }
.bar-grade-C { background: var(--text-muted); }
.bar-grade-D { background: var(--border-strong); }
.bar-segment:hover { filter: brightness(1.1); }

/* ---------- 15. 호라이즌 막대 차트 (§6) ---------- */
.horizon-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast) var(--ease-out);
}
@media (max-width: 768px) {
  .horizon-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
}
.horizon-row:hover {
  background: var(--bg-subtle);
}
.horizon-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.horizon-bar-track {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.horizon-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.horizon-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary-end));
  border-radius: 3px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out);
}
.is-visible .horizon-bar-fill { transform: scaleX(var(--bar-fill, 0)); }
.horizon-bar-fill.is-amber {
  background: var(--accent-secondary);
}

/* ---------- 16. 변증법 좌우 분할 (§5) ---------- */
.dialectic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .dialectic-grid {
    grid-template-columns: 5fr 1fr 5fr;
    gap: 24px;
  }
}
.dialectic-divider {
  display: none;
  position: relative;
  width: 1px;
  margin: 0 auto;
  background: linear-gradient(180deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1200ms var(--ease-out);
  transition-delay: 100ms;
}
@media (min-width: 1024px) {
  .dialectic-divider { display: block; }
}
.dialectic-grid.is-visible .dialectic-divider { transform: scaleY(1); }

.dialectic-side h3 {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dialectic-side .side-title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 24px;
}

/* 모바일 토글 탭 */
.dialectic-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  position: sticky;
  top: 60px;
  background: var(--bg);
  z-index: 20;
  padding: 12px 0;
}
@media (min-width: 1024px) {
  .dialectic-tabs { display: none; }
}
.dialectic-tab {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.dialectic-tab.is-active[data-side="a"] {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary-soft);
  color: var(--accent-secondary);
}
.dialectic-tab.is-active[data-side="b"] {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
}

@media (max-width: 1023px) {
  .dialectic-side { display: none; }
  .dialectic-side.is-active { display: block; animation: fadein 300ms var(--ease-out); }
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 17. 타임라인 (§7) ---------- */
.timeline {
  position: relative;
  padding-left: 24px;
}
@media (min-width: 768px) {
  .timeline { padding-left: 64px; }
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border-strong);
}
@media (min-width: 768px) {
  .timeline::before { left: 32px; }
}
.timeline-item {
  position: relative;
  margin-bottom: 24px;
}
.timeline-node {
  position: absolute;
  left: -22px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-primary);
  z-index: 1;
}
@media (min-width: 768px) {
  .timeline-node { left: -39px; }
}
.timeline-item.is-highlight .timeline-node {
  width: 18px;
  height: 18px;
  left: -25px;
  top: 21px;
  background: var(--accent-primary);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px 2px var(--accent-primary);
}
@media (min-width: 768px) {
  .timeline-item.is-highlight .timeline-node { left: -42px; }
}

/* ---------- 18. 부록 다이어그램 ---------- */
.process-diagram {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .process-diagram {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px;
  position: relative;
  transition: transform var(--duration-fast) var(--ease-out);
}
.process-step:hover { transform: scale(1.02); }
.process-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent-primary);
  margin-bottom: 12px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.process-step:hover .process-circle {
  border-color: var(--accent-primary);
}
.process-arrow {
  display: none;
  position: absolute;
  right: -8px;
  top: 36px;
  width: 16px;
  height: 2px;
  background: var(--border-strong);
}
@media (min-width: 1024px) {
  .process-arrow { display: block; }
  .process-step:last-child .process-arrow { display: none; }
}

/* ---------- 19. 기타 ---------- */
.divider {
  height: 1px;
  background: var(--border);
  margin: 64px 0;
}

.section-padding {
  padding-top: 96px;
  padding-bottom: 96px;
}
@media (max-width: 640px) {
  .section-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.container-x {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  .container-x { padding-left: 48px; padding-right: 48px; }
}

.container-prose {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.bg-elevated { background: var(--bg-elevated); }
.bg-subtle { background: var(--bg-subtle); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.border-default { border-color: var(--border); }

/* 키보드 토스트 */
.kbd-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.875rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  z-index: 50;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
}
.kbd-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* References 목록 */
.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ref;
}
.ref-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  transition: background 1200ms var(--ease-out);
  border-radius: var(--radius-sm);
  scroll-margin-top: 96px;
}
.ref-list li > .ref-num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-primary);
  text-align: right;
}

/* ---------- 방법론 비교 표 (§4.2) ---------- */
.method-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  -webkit-overflow-scrolling: touch;
}
.method-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.method-table thead th {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-align: left;
  padding: 16px 18px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.method-table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}
.method-table thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}
.method-table tbody td {
  padding: 16px 18px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  transition: background var(--duration-fast) var(--ease-out);
}
.method-table tbody tr:last-child td {
  border-bottom: none;
}
.method-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-lg);
}
.method-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-lg);
}
.method-table tbody tr:hover td {
  background: var(--bg-subtle);
}
.method-table .cell-source {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.method-table .cell-absent,
.method-table .cell-na {
  color: var(--text-muted);
  font-style: normal;
}
.method-table .cell-na {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.method-table .cell-positive {
  color: var(--accent-neutral);
  font-weight: 600;
}
.method-table .cell-partial {
  color: var(--accent-secondary);
  font-weight: 600;
}
.method-table .cell-warn {
  color: var(--accent-secondary);
}
.method-table .cell-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
@media (max-width: 640px) {
  .method-table thead th,
  .method-table tbody td {
    padding: 14px 14px;
    font-size: 0.875rem;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-anim { opacity: 1; transform: none; animation: none; }
  .scroll-bounce { animation: none; }
  .hero-blob-1, .hero-blob-2 { animation: none; }
  .bar-segment { transform: scaleX(1); }
  .horizon-bar-fill { transform: scaleX(var(--bar-fill, 0)); }
  .dialectic-divider { transform: scaleY(1); }
}