/* EINSTEIN, RETESTED — readability-first interface */
:root {
  color-scheme: light;
  --paper: #f7f2e9;
  --paper-2: #fffdf8;
  --paper-3: #eee5d8;
  --ink: #20211f;
  --ink-soft: #585853;
  --ink-faint: #77766f;
  --line: #d9cfc1;
  --line-strong: #bfb2a2;
  --main: #b45335;
  --main-dark: #843b27;
  --main-soft: #f2ddd2;
  --main-pale: #fbede5;
  --sage: #596b60;
  --shadow: 0 18px 50px rgba(74, 51, 36, .10);
  --header-h: 72px;
  --reader-size: 18px;
  --reader-line: 1.78;
  --reading-width: 760px;
  --wide: 1180px;

  --confirmed: #2f6c57;
  --confirmed-bg: #e7f1ec;
  --refined: #35677b;
  --refined-bg: #e5eff2;
  --corrected: #99601f;
  --corrected-bg: #f6ead5;
  --overturned: #9b3d35;
  --overturned-bg: #f7e2df;
  --open: #715374;
  --open-bg: #eee6ef;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171816;
  --paper-2: #20211f;
  --paper-3: #292824;
  --ink: #f1ece3;
  --ink-soft: #c4beb5;
  --ink-faint: #9f9990;
  --line: #3d3b36;
  --line-strong: #5b5750;
  --main: #e47c5a;
  --main-dark: #f09a7d;
  --main-soft: #4b2b23;
  --main-pale: #2e211d;
  --sage: #aabcae;
  --shadow: 0 20px 60px rgba(0, 0, 0, .35);

  --confirmed: #7ec5a9;
  --confirmed-bg: #1e352d;
  --refined: #83b7cb;
  --refined-bg: #1d3037;
  --corrected: #e1b26d;
  --corrected-bg: #3c2e1c;
  --overturned: #e08e86;
  --overturned-bg: #3f2422;
  --open: #c3a0c5;
  --open-bg: #332535;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  background: var(--paper);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--line-strong);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--main); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* 버튼·입력창은 body 글꼴을 물려받지 않는다(브라우저 기본 글꼴을 쓴다).
   이것 때문에 목차·설정 버튼만 시스템 글꼴로 그려지고 있었다 — 실측으로 잡았다. */
button, input, select, textarea { font-family: inherit; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

body.dialog-open { overflow: hidden; }

button,
input,
select { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

img {
  display: block;
  max-width: 100%;
}

button { color: inherit; }

::selection {
  background: var(--main);
  color: #fff;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  transform: translateY(-180%);
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper-2);
  text-decoration: none;
  font-weight: 800;
}

.skip-link:focus { transform: translateY(0); }

.page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1200;
  height: 3px;
  pointer-events: none;
}

.page-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--main);
}

.section-shell {
  width: min(calc(100% - 48px), var(--wide));
  margin-inline: auto;
}

.section-anchor { scroll-margin-top: calc(var(--header-h) + 18px); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  background: color-mix(in srgb, var(--paper-2) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header-inner {
  width: min(calc(100% - 40px), 1280px);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-weight: 700;
  font-size: 20px;
}

.brand-copy {
  display: grid;
  line-height: 1;
  letter-spacing: .03em;
}

.brand-copy strong {
  font-size: 15px;
  letter-spacing: .12em;
}

.brand-copy small {
  margin-top: 5px;
  color: var(--main);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .27em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.desktop-nav a {
  position: relative;
  padding: 25px 0 23px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 16px;
  height: 2px;
  background: var(--main);
  transition: right .2s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible { color: var(--ink); }

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after { right: 0; }

.reader-tools {
  display: flex;
  gap: 5px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.tool-button {
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.tool-button:hover,
.tool-button:focus-visible {
  border-color: var(--main);
  color: var(--main);
}

.theme-button { font-size: 18px; }

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 23px;
  height: 2px;
  margin: 6px auto;
  background: var(--ink);
  transition: transform .2s ease;
}

.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  padding: 12px 22px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}

.mobile-nav a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 750;
}

/* Hero */
.hero {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--main-soft) 75%, transparent) 0 12%, transparent 35%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
}

.hero-inner {
  width: min(calc(100% - 48px), 1180px);
  min-height: 700px;
  margin-inline: auto;
  padding: 76px 0 58px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
  align-items: center;
  gap: 80px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 18px;
  color: var(--main);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: clamp(64px, 8vw, 116px);
  line-height: .84;
  letter-spacing: -.065em;
  font-weight: 500;
}

.hero h1 span {
  color: var(--ink);
}

.hero h1 em { color: var(--main); font-style: normal; }

.hero-subtitle {
  margin: 34px 0 0;
  font-size: clamp(25px, 2.5vw, 36px);
  line-height: 1.42;
  letter-spacing: -.035em;
  font-weight: 760;
}

.hero-description {
  max-width: 680px;
  margin: 26px 0 0;
  color: var(--ink-soft);
  font-size: var(--reader-size);
  line-height: var(--reader-line);
  word-break: keep-all;
}

.hero-description strong { color: var(--ink); }

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 34px;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 9px;
  background: var(--main);
  color: #fff;
  text-decoration: none;
  font-weight: 850;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--main) 24%, transparent);
}

.primary-button:hover,
.primary-button:focus-visible { background: var(--main-dark); }

.text-link {
  color: var(--ink-soft);
  text-underline-offset: 5px;
  font-weight: 750;
}

.text-link:hover,
.text-link:focus-visible { color: var(--main); }

.data-cut {
  margin: 25px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .045em;
}

.portrait-card {
  position: relative;
  width: min(100%, 420px);
  margin: 0 auto;
}

.portrait-card::before {
  content: "E = mc²";
  position: absolute;
  z-index: 2;
  top: -34px;
  right: -24px;
  color: color-mix(in srgb, var(--main) 75%, transparent);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 28px;
  font-style: italic;
  transform: rotate(5deg);
}

.portrait-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-strong);
  border-radius: 180px 180px 18px 18px;
  background: var(--paper-3);
  box-shadow: var(--shadow);
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(25, 19, 16, .32));
  pointer-events: none;
}

.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
  filter: sepia(.14) contrast(1.04);
}

.portrait-year {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 20px;
  color: #fff;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 16px;
  letter-spacing: .12em;
}

.portrait-card figcaption {
  display: grid;
  gap: 5px;
  margin-top: 15px;
  padding-inline: 8px;
}

.portrait-card figcaption strong {
  font-size: 14px;
  letter-spacing: .14em;
}

.portrait-card figcaption span {
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.5;
}

.hero-stats {
  width: min(calc(100% - 48px), 1180px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

.hero-stat {
  min-height: 128px;
  padding: 27px 28px 28px;
  border-right: 1px solid var(--line);
}

.hero-stat:first-child { border-left: 1px solid var(--line); }

.hero-stat small {
  display: block;
  color: var(--main);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .13em;
}

.hero-stat strong {
  display: block;
  margin-top: 9px;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
}

.hero-stat span {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

/* Reading note */
.reading-note {
  padding: 90px 0;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 50px;
  border-bottom: 1px solid var(--line);
}

.note-label {
  padding-top: 8px;
  color: var(--main);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .16em;
}

.note-copy {
  max-width: 900px;
}

.note-copy h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.22;
  letter-spacing: -.045em;
  font-weight: 720;
  word-break: keep-all;
}

.note-copy h2 em {
  color: var(--main);
  font-style: normal;
}

.note-copy p {
  max-width: var(--reading-width);
  margin: 27px 0 0;
  color: var(--ink-soft);
  font-size: var(--reader-size);
  line-height: var(--reader-line);
  word-break: keep-all;
}

.note-copy p strong { color: var(--ink); }

/* Section headings */
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 70px;
  align-items: end;
  margin-bottom: 42px;
}

.section-heading.compact { margin-bottom: 30px; }

.section-heading h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.12;
  letter-spacing: -.055em;
  font-weight: 720;
  word-break: keep-all;
}

.section-heading > p {
  margin: 0 0 5px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
}

.verdict-section { padding: 92px 0 110px; }

.verdict-ledger {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.verdict-item {
  position: relative;
  padding: 24px 20px 26px;
  border-right: 1px solid var(--line);
  background: transparent;
}

.verdict-item:last-child { border-right: 0; }

.verdict-item::before {
  content: "";
  display: block;
  width: 18px;
  height: 4px;
  margin-bottom: 18px;
  border-radius: 99px;
  background: var(--status-color);
}

.verdict-item strong {
  display: block;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 38px;
  line-height: 1;
  font-weight: 500;
}

.verdict-item span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 850;
}

.verdict-item p {
  margin: 9px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.55;
}

/* Statements */
.statements {
  padding: 112px 0 130px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.explorer {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  z-index: 100;
  margin-bottom: 42px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper-2) 94%, transparent);
  box-shadow: 0 12px 32px rgba(57, 42, 31, .07);
  backdrop-filter: blur(16px);
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
}

.search-field:focus-within {
  border-color: var(--main);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 14%, transparent);
}

.search-icon {
  padding-left: 17px;
  color: var(--main);
  font-size: 23px;
}

.search-field input {
  width: 100%;
  height: 52px;
  padding: 0 50px 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.search-field input::placeholder { color: var(--ink-faint); }

.search-field kbd {
  position: absolute;
  right: 13px;
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink-faint);
  font-family: inherit;
  font-size: 14px;
}

.filter-group {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 16px;
}

.filter-label {
  padding-top: 8px;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filter-chip {
  min-height: 35px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.filter-chip b {
  margin-left: 4px;
  color: var(--ink-faint);
  font-size: 14px;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  border-color: var(--main);
  color: var(--main);
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-2);
}

.filter-chip[aria-pressed="true"] b { color: color-mix(in srgb, var(--paper-2) 72%, transparent); }

.result-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.result-tools p {
  margin: 0 auto 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.result-tools p strong {
  color: var(--main);
  font-size: 16px;
}

.select-label {
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 750;
}

.select-label select {
  height: 34px;
  margin-left: 7px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
}

.reset-button {
  height: 34px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.statement-list {
  display: grid;
  gap: 18px;
}

.statement-card {
  --status-color: var(--refined);
  --status-bg: var(--refined-bg);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr) 178px;
  gap: 30px;
  align-items: start;
  padding: 34px;
  border: 2px solid color-mix(in srgb, var(--status-color) 42%, var(--line));
  border-radius: 13px;
  background: var(--paper-2);
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--status-color) 16%, transparent);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.statement-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--status-color) 75%, var(--line));
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--status-color) 30%, transparent), 0 15px 38px rgba(57, 42, 31, .08);
}

.statement-index {
  padding-left: 6px;
}

.statement-index strong {
  display: block;
  color: var(--status-color);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
}

.statement-index span {
  display: block;
  margin-top: 9px;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
}

.statement-main {
  min-width: 0;
}

.statement-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.status-pill,
.theme-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 850;
}

.status-pill {
  background: var(--status-bg);
  color: var(--status-color);
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.theme-pill {
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

.statement-title {
  margin: 0;
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.35;
  letter-spacing: -.035em;
  word-break: keep-all;
}

.statement-quote {
  margin: 18px 0 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: calc(var(--reader-size) + 1px);
  line-height: 1.65;
  font-style: italic;
  word-break: normal;
}

.statement-korean {
  margin: 7px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.65;
  word-break: keep-all;
}

.statement-summary {
  max-width: var(--reading-width);
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: var(--reader-size);
  line-height: var(--reader-line);
  word-break: keep-all;
}

.statement-action {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding-left: 25px;
  border-left: 1px solid var(--line);
}

.statement-action .key-mini {
  display: grid;
  gap: 7px;
}

.key-mini small {
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .11em;
}

.key-mini strong {
  color: var(--status-color);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 23px;
  line-height: 1.15;
  word-break: break-word;
}

.key-mini span {
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.45;
}

.read-button {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--status-color);
  border-radius: 8px;
  background: transparent;
  color: var(--status-color);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.read-button:hover,
.read-button:focus-visible {
  background: var(--status-color);
  color: #fff;
}

.status-confirmed { --status-color: var(--confirmed); --status-bg: var(--confirmed-bg); }
.status-refined { --status-color: var(--refined); --status-bg: var(--refined-bg); }
.status-corrected { --status-color: var(--corrected); --status-bg: var(--corrected-bg); }
.status-overturned { --status-color: var(--overturned); --status-bg: var(--overturned-bg); }
.status-open { --status-color: var(--open); --status-bg: var(--open-bg); }

.empty-state {
  margin: 36px 0 0;
  padding: 60px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--ink-faint);
  text-align: center;
  font-size: 16px;
}

/* Quote break */
.mid-quote {
  padding: 110px 0;
  background: var(--main);
  color: #fff8f2;
}

.mid-quote blockquote {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding-left: 64px;
}

.mid-quote blockquote > span {
  position: absolute;
  left: 0;
  top: -24px;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 92px;
  line-height: 1;
  opacity: .38;
}

.mid-quote p {
  margin: 0;
  font-size: clamp(29px, 4.2vw, 52px);
  line-height: 1.42;
  letter-spacing: -.045em;
  font-weight: 430;
  word-break: keep-all;
}

.mid-quote strong { font-weight: 800; }

/* Timeline */
.timeline {
  padding: 120px 0 130px;
  border-bottom: 1px solid var(--line);
}

.timeline-reader {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 480px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.timeline-years {
  padding: 18px 0;
  border-right: 1px solid var(--line);
}

.timeline-year {
  width: 100%;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-faint);
  text-align: left;
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 19px;
  cursor: pointer;
}

.timeline-year:hover,
.timeline-year:focus-visible { color: var(--main); }

.timeline-year[aria-current="true"] {
  border-color: var(--main);
  background: var(--main-pale);
  color: var(--main);
  font-size: 26px;
  font-weight: 700;
}

.timeline-detail {
  min-height: 100%;
  padding: 52px 60px 55px;
  background: var(--paper-2);
}

.timeline-detail .timeline-count {
  color: var(--main);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .13em;
}

.timeline-detail time {
  display: block;
  margin-top: 10px;
  color: var(--main);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: clamp(64px, 8vw, 104px);
  line-height: .95;
}

.timeline-detail h3 {
  max-width: 760px;
  margin: 24px 0 0;
  font-size: clamp(28px, 3.7vw, 44px);
  line-height: 1.25;
  letter-spacing: -.04em;
  word-break: keep-all;
}

.timeline-detail p {
  max-width: var(--reading-width);
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: var(--reader-size);
  line-height: var(--reader-line);
  word-break: keep-all;
}

.timeline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.timeline-links button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.timeline-links button:hover,
.timeline-links button:focus-visible {
  border-color: var(--main);
  color: var(--main);
}

/* Method */
.method {
  padding: 120px 0 130px;
  background: var(--paper-2);
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.method-step {
  min-height: 270px;
  padding: 28px 24px 32px;
  border-right: 1px solid var(--line);
}

.method-step:last-child { border-right: 0; }

.method-step span {
  color: var(--main);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 31px;
}

.method-step h3 {
  margin: 42px 0 0;
  font-size: 20px;
  line-height: 1.4;
}

.method-step p {
  margin: 15px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
  word-break: keep-all;
}

.method-caution {
  margin-top: 30px;
  padding: 28px 32px;
  border: 2px solid color-mix(in srgb, var(--main) 45%, var(--line));
  border-radius: 12px;
  background: var(--main-pale);
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--main) 14%, transparent);
}

.method-caution strong {
  display: block;
  font-size: 17px;
}

.method-caution p {
  max-width: 900px;
  margin: 9px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
  word-break: keep-all;
}

/* References */
.references {
  padding: 120px 0 130px;
}

.references-heading { align-items: center; }

.reference-total {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 15px;
}

.reference-total strong {
  color: var(--main);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 58px;
  line-height: 1;
  font-weight: 500;
}

.reference-total span {
  max-width: 130px;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.5;
}

.reference-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, auto) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 30px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}

.reference-search { min-height: 46px; }
.reference-search input { height: 44px; font-size: 14px; }

.print-button {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--main);
  border-radius: 8px;
  background: transparent;
  color: var(--main);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.print-button:hover,
.print-button:focus-visible {
  background: var(--main);
  color: #fff;
}

.reference-list {
  border-top: 1px solid var(--line-strong);
}

.reference-item {
  display: grid;
  grid-template-columns: 62px 116px minmax(0, 1fr) 42px;
  gap: 18px;
  align-items: start;
  padding: 23px 8px;
  border-bottom: 1px solid var(--line);
}

.reference-id {
  color: var(--main);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 18px;
  font-weight: 700;
}

.reference-kind {
  display: inline-flex;
  width: fit-content;
  min-height: 25px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 850;
}

.reference-main h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 760;
  word-break: keep-all;
}

.reference-main .citation-line {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.reference-main .reference-note-text {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.6;
}

.reference-open {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-faint);
  text-decoration: none;
}

.reference-open:hover,
.reference-open:focus-visible {
  border-color: var(--main);
  color: var(--main);
}

.reference-note {
  max-width: var(--reading-width);
  margin: 28px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.7;
}

/* Footer */
.site-footer {
  padding: 55px 0 60px;
  background: var(--ink);
  color: var(--paper-2);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer-inner strong {
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: .06em;
}

.footer-inner p {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--paper-2) 67%, transparent);
  font-size: 14px;
}

.footer-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: color-mix(in srgb, var(--paper-2) 55%, transparent);
  font-size: 14px;
  letter-spacing: .06em;
}

/* Statement dialog */
.statement-dialog {
  --status-color: var(--refined);
  --status-bg: var(--refined-bg);
  width: min(1080px, calc(100% - 36px));
  max-width: 1080px;
  height: min(92vh, 1000px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .28);
}

.statement-dialog::backdrop {
  background: rgba(26, 22, 19, .72);
  backdrop-filter: blur(5px);
}

.dialog-frame {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dialog-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 58px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 94%, transparent);
  backdrop-filter: blur(15px);
}

.dialog-close {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.dialog-close span {
  margin-left: 5px;
  color: var(--main);
  font-size: 18px;
  vertical-align: -1px;
}

.dialog-reading-tools { display: flex; gap: 5px; }

.dialog-reading-tools button {
  min-width: 37px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.dialog-hero {
  position: relative;
  overflow: hidden;
  padding: 54px max(38px, calc((100% - 820px) / 2)) 48px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, var(--status-bg), var(--paper-2) 70%);
}

.dialog-hero::after {
  content: attr(data-number);
  position: absolute;
  right: 28px;
  bottom: -27px;
  color: color-mix(in srgb, var(--status-color) 12%, transparent);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 180px;
  line-height: .8;
  pointer-events: none;
}

.dialog-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--status-color);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}

.dialog-meta .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-color);
}

.dialog-title {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 18px 0 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.18;
  letter-spacing: -.055em;
  word-break: keep-all;
}

.dialog-quote {
  position: relative;
  z-index: 2;
  max-width: var(--reading-width);
  margin: 28px 0 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: calc(var(--reader-size) + 3px);
  line-height: 1.7;
  font-style: italic;
}

.dialog-korean {
  position: relative;
  z-index: 2;
  max-width: var(--reading-width);
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
  word-break: keep-all;
}

.source-note {
  position: relative;
  z-index: 2;
  max-width: var(--reading-width);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--status-color) 25%, var(--line));
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.65;
}

.dialog-body {
  width: min(calc(100% - 64px), 820px);
  margin-inline: auto;
  padding: 52px 0 66px;
}

.dialog-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 32px;
  align-items: start;
  padding-bottom: 45px;
  border-bottom: 1px solid var(--line-strong);
}

.dialog-summary > p {
  margin: 0;
  color: var(--ink);
  font-size: calc(var(--reader-size) + 2px);
  line-height: 1.82;
  font-weight: 570;
  word-break: keep-all;
}

.key-observation {
  padding: 20px 19px;
  border: 1px solid color-mix(in srgb, var(--status-color) 35%, var(--line));
  border-radius: 10px;
  background: var(--status-bg);
}

.key-observation small {
  display: block;
  color: var(--status-color);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
}

.key-observation strong {
  display: block;
  margin-top: 10px;
  color: var(--status-color);
  font-family: Georgia, "Times New Roman", "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo, Batang, serif;
  font-size: 28px;
  line-height: 1.15;
  word-break: break-word;
}

.key-observation em {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 14px;
  font-style: normal;
  font-weight: 750;
}

.key-observation p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.analysis-section {
  padding: 45px 0;
  border-bottom: 1px solid var(--line);
}

.analysis-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--status-color);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .13em;
}

.analysis-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: color-mix(in srgb, var(--status-color) 28%, var(--line));
}

.analysis-section h3 {
  margin: 13px 0 0;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: -.025em;
  word-break: keep-all;
}

.analysis-section p {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: var(--reader-size);
  line-height: var(--reader-line);
  word-break: keep-all;
}

.dialog-sources {
  padding: 48px 0 0;
}

.dialog-sources-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.dialog-sources-head h3 {
  margin: 0;
  font-size: 24px;
}

.dialog-sources-head span {
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .07em;
}

.dialog-reference {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 35px;
  gap: 14px;
  align-items: start;
  padding: 17px 0;
  border-top: 1px solid var(--line);
}

.dialog-reference .reference-id {
  font-size: 15px;
}

.dialog-reference h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
}

.dialog-reference p {
  margin: 4px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.55;
}

.dialog-reference a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-faint);
  text-decoration: none;
}

.dialog-reference a:hover,
.dialog-reference a:focus-visible {
  border-color: var(--main);
  color: var(--main);
}

.dialog-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--line-strong);
}

.dialog-nav button {
  min-height: 100px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  line-height: 1.45;
  font-weight: 750;
  cursor: pointer;
}

.dialog-nav button:last-child { text-align: right; }

.dialog-nav button small {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: .08em;
}

.dialog-nav button:hover,
.dialog-nav button:focus-visible {
  border-color: var(--status-color);
  color: var(--status-color);
}

.noscript {
  padding: 20px;
  background: #7b2f22;
  color: #fff;
  text-align: center;
}

/* Focus and motion */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--main) 45%, transparent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Responsive */
@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .reader-tools { margin-left: auto; }
  .hero-inner { gap: 42px; }
  .statement-card { grid-template-columns: 112px minmax(0, 1fr) 160px; gap: 22px; }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .method-step:nth-child(2) { border-right: 0; }
  .method-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .reference-tools { grid-template-columns: 1fr auto; }
  .reference-tools .filter-chips { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  :root { --header-h: 64px; }

  .section-shell,
  .hero-inner,
  .hero-stats { width: min(calc(100% - 32px), var(--wide)); }

  .header-inner { width: calc(100% - 24px); }
  .brand-copy { display: none; }
  .reader-tools { padding-left: 0; border-left: 0; }
  .tool-button { min-width: 34px; height: 34px; }
  .menu-button { margin-left: 4px; }

  .hero-inner {
    min-height: auto;
    padding: 58px 0 45px;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero h1 { font-size: clamp(59px, 17vw, 92px); }
  .hero-subtitle { font-size: 25px; }
  .portrait-card { width: min(82vw, 370px); }
  .portrait-card::before { right: 0; }

  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stat:nth-child(2) { border-right: 1px solid var(--line); }
  .hero-stat:nth-child(n+3) { border-top: 1px solid var(--line); }

  .reading-note {
    padding: 74px 0;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .section-heading > p { max-width: 680px; }

  .verdict-ledger {
    grid-template-columns: 1fr 1fr;
  }

  .verdict-item {
    border-bottom: 1px solid var(--line);
  }

  .verdict-item:nth-child(2n) { border-right: 0; }
  .verdict-item:last-child { grid-column: 1 / -1; border-bottom: 0; }

  .explorer {
    position: relative;
    top: auto;
  }

  .statement-card {
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 28px 24px 28px 22px;
  }

  .statement-action {
    grid-column: 2;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    flex-direction: row;
    align-items: end;
  }

  .statement-action .key-mini { max-width: 55%; }
  .read-button { width: auto; min-width: 135px; }

  .timeline-reader { grid-template-columns: 1fr; }
  .timeline-years {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
  }

  .timeline-year {
    flex: 0 0 auto;
    width: auto;
    padding: 14px 16px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    font-size: 17px;
  }

  .timeline-year[aria-current="true"] {
    border-left: 0;
    border-bottom-color: var(--main);
    font-size: 20px;
  }

  .timeline-detail { padding: 42px 30px 46px; }

  .reference-item {
    grid-template-columns: 52px minmax(0, 1fr) 38px;
  }

  .reference-kind { display: none; }
  .reference-tools { grid-template-columns: 1fr; }
  .reference-tools .filter-chips { grid-column: auto; }
  .print-button { justify-self: start; }

  .dialog-summary { grid-template-columns: 1fr; }
  .key-observation { max-width: 330px; }
}

@media (max-width: 560px) {
  :root {
    --reader-size: 17px;
    --reader-line: 1.76;
  }

  .site-header { height: var(--header-h); }
  .brand-mark { width: 34px; height: 34px; }
  .reader-tools { gap: 3px; }
  .theme-button { display: none; }

  .hero-inner { padding-top: 44px; }
  .eyebrow { font-size: 14px; }
  .hero h1 { font-size: clamp(53px, 18vw, 76px); }
  .hero-subtitle { margin-top: 27px; font-size: 22px; }
  .hero-description { margin-top: 20px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .primary-button { width: 100%; }
  .data-cut { line-height: 1.6; }

  .portrait-card { width: min(90vw, 340px); }
  .portrait-card::before { top: -25px; font-size: 22px; }

  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stat { min-height: 112px; padding: 22px 17px; }
  .hero-stat strong { font-size: 29px; }
  .hero-stat span { font-size: 14px; }

  .reading-note { padding: 65px 0; }
  .note-copy h2 { font-size: 34px; }
  .note-copy p { margin-top: 21px; }

  .verdict-section { padding: 70px 0 85px; }
  .section-heading { margin-bottom: 31px; }
  .section-heading h2 { font-size: 40px; }

  .verdict-item { padding: 20px 15px 22px; }
  .verdict-item p { display: none; }

  .statements { padding: 82px 0 92px; }
  .explorer { margin-inline: -4px; padding: 16px; }
  .filter-group { grid-template-columns: 1fr; gap: 6px; }
  .filter-label { padding-top: 0; }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .filter-chip { flex: 0 0 auto; }
  .result-tools { flex-wrap: wrap; }
  .result-tools p { width: 100%; }
  .select-label { margin-right: auto; }

  .statement-card {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 26px 21px 24px;
  }

  .statement-index {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
  }

  .statement-index strong { font-size: 27px; }
  .statement-index span { margin-top: 0; }

  .statement-title { font-size: 25px; }
  .statement-quote { margin-top: 15px; }
  .statement-summary { margin-top: 15px; }

  .statement-action {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .statement-action .key-mini { max-width: none; }
  .read-button { width: 100%; }

  .mid-quote { padding: 82px 0; }
  .mid-quote blockquote { padding-left: 34px; }
  .mid-quote blockquote > span { left: -7px; font-size: 70px; }
  .mid-quote p { font-size: 29px; }
  .mid-quote p br { display: none; }

  .timeline { padding: 86px 0 90px; }
  .timeline-detail { padding: 34px 21px 40px; }
  .timeline-detail time { font-size: 67px; }
  .timeline-detail h3 { margin-top: 18px; font-size: 28px; }

  .method { padding: 86px 0 90px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-step,
  .method-step:nth-child(2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .method-step:last-child { border-bottom: 0; }
  .method-step h3 { margin-top: 22px; }
  .method-caution { padding: 23px 21px; }

  .references { padding: 86px 0 90px; }
  .reference-total { justify-self: start; }
  .reference-item {
    grid-template-columns: 43px minmax(0, 1fr) 34px;
    gap: 9px;
    padding: 19px 0;
  }
  .reference-main h3 { font-size: 14px; }
  .reference-main .citation-line { font-size: 14px; }
  .reference-main .reference-note-text { display: none; }
  .reference-open { width: 32px; height: 32px; }

  .footer-inner { flex-direction: column; }
  .footer-meta { justify-items: start; }

  .statement-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .dialog-toolbar { height: 56px; }
  .dialog-hero {
    padding: 40px 22px 36px;
  }
  .dialog-hero::after { right: 4px; bottom: -12px; font-size: 115px; }
  .dialog-title { font-size: 35px; }
  .dialog-quote { margin-top: 22px; font-size: calc(var(--reader-size) + 1px); }

  .dialog-body {
    width: calc(100% - 40px);
    padding: 36px 0 48px;
  }

  .dialog-summary > p { font-size: calc(var(--reader-size) + 1px); }
  .analysis-section { padding: 36px 0; }
  .analysis-section h3 { font-size: 22px; }
  .dialog-sources-head { align-items: start; flex-direction: column; gap: 6px; }
  .dialog-reference { grid-template-columns: 42px minmax(0, 1fr) 32px; gap: 8px; }
  .dialog-nav { grid-template-columns: 1fr; }
  .dialog-nav button:last-child { text-align: left; }
}

@media print {
  :root {
    --paper: #fff;
    --paper-2: #fff;
    --ink: #111;
    --ink-soft: #333;
    --line: #bbb;
    --reader-size: 11pt;
  }

  .site-header,
  .page-progress,
  .hero-actions,
  .portrait-card,
  .explorer,
  .mid-quote,
  .timeline,
  .reader-tools,
  .menu-button,
  .print-button,
  .statement-action,
  .site-footer,
  .statement-dialog { display: none !important; }

  .hero-inner {
    min-height: 0;
    padding: 30px 0;
    grid-template-columns: 1fr;
  }

  .hero h1 { font-size: 50pt; }
  .hero-stats { display: none; }
  .reading-note,
  .verdict-section,
  .statements,
  .method,
  .references { padding: 28px 0; }

  .statement-card {
    break-inside: avoid;
    grid-template-columns: 60px 1fr;
    padding: 18px;
    box-shadow: none;
  }

  .statement-list { gap: 10px; }
  .statement-action { display: none; }
  .reference-item { break-inside: avoid; }
}

/* ── UI 아이콘: 인라인 SVG 공통 ─────────────────────────────── */
.ui-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -.16em;
}

.search-icon {
  display: inline-flex;
  align-items: center;
  padding-left: 17px;
  color: var(--main);
  font-size: 14px;
}

.search-icon .ui-icon { width: 22px; height: 22px; }

.read-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.read-button .ui-icon { width: 17px; height: 17px; }

.dialog-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dialog-close span {
  margin: 0;
  color: inherit;
  font-size: 14px;
  vertical-align: 0;
}

.dialog-close .ui-icon { width: 17px; height: 17px; color: var(--main); }

.dialog-reference a .ui-icon,
.reference-open .ui-icon { width: 17px; height: 17px; }

.dialog-nav button .ui-icon { width: 16px; height: 16px; color: var(--ink-faint); }
.dialog-nav button:first-child .ui-icon { margin-right: 6px; }
.dialog-nav button:last-child .ui-icon { margin-left: 6px; }

.theme-button { display: inline-grid; place-items: center; }
.theme-button .ui-icon { width: 18px; height: 18px; }

.font-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.font-button span { font-size: 14px; font-weight: 850; line-height: 1; }
.font-button .ui-icon { width: 13px; height: 13px; vertical-align: 0; }

.desktop-nav a.home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--main);
}

.desktop-nav a.home-link .ui-icon { width: 15px; height: 15px; }

.footer-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.footer-home:hover,
.footer-home:focus-visible { color: var(--paper-2); text-decoration: underline; }

.footer-home .ui-icon { width: 15px; height: 15px; }