:root {
  --bg: #f7f5f0;
  --paper: #fff;
  --ink: #191816;
  --muted: #625f59;
  --line: #d8d4cc;
  --accent: #7d3327;
  --accent-soft: #f3e9e5;
  --code: #efede7;
  --content: 780px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: var(--bg);
}
/* The document column is declared once, here, on the container that holds it.
   It used to be declared on `body > *` instead — every top-level block given the column
   width plus `margin-inline: auto` of its own — which put the column inside the reach of
   every rule that styles one of those blocks, and three of them took it:

     - a `margin: … 0` shorthand cancels the auto side margins, so the block keeps the
       column's width but sits at the viewport's left edge (`.evidence-mount`, and `table`
       before this commit — every table on the record shipped that way);
     - a `width` in a later rule of equal specificity replaces the column outright, and its
       `100%` resolves against `body`, i.e. the whole viewport (`table`, same commit);
     - a narrower `max-width` leaves the auto margins with slack to distribute, so the block
       drifts to the middle of the page instead of staying on the column's left rail
       (`p` at 72ch, the landing `h1` at 19ch).

   None of those are errors — the page renders, and nothing reports a misplaced block. So
   the fix is structural rather than three overrides: with the column on `body`, children
   fill it by simply being blocks, side margins mean what they say, `max-width` narrows a
   block in place, and no child rule can take the column away again. */
body {
  width: min(calc(100% - 40px), var(--content));
  margin: 0 auto;
  color: var(--ink);
  background: var(--bg);
  font: 17px/1.72 "Noto Sans CJK KR", "Noto Sans KR", system-ui, sans-serif;
  overflow-wrap: break-word;
  word-break: keep-all;
}
body > header {
  padding: 64px 0 26px;
  border-bottom: 1px solid var(--line);
}
body > header h1 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.15rem, 6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
body > header .author,
body > header .date {
  display: inline-block;
  margin: 1.15rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
body > header .date::before {
  content: "·";
  padding-inline: 0.55rem;
  color: var(--line);
}

h1, h2, h3 {
  line-height: 1.28;
  letter-spacing: -0.025em;
  text-wrap: balance;
  scroll-margin-top: 28px;
}
h1 {
  margin-top: 4.25rem;
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 4vw, 2.75rem);
}
h2 {
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.45rem, 3vw, 1.75rem);
}
h3 {
  margin-top: 2.4rem;
  margin-bottom: 0.7rem;
  font-size: 1.18rem;
}
p, li { max-width: 72ch; }
p { margin-block: 0.8rem 1.15rem; }
ul, ol { padding-left: 1.35rem; }
li { margin: 0.4em 0; }
strong { font-weight: 720; }

a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 0.14em; }
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

code {
  padding: 0.1em 0.32em;
  border-radius: 4px;
  background: var(--code);
  font-size: 0.9em;
}
pre {
  max-width: 100%;
  padding: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code);
  line-height: 1.55;
}

/* Pandoc emits images at their intrinsic pixel width — 1600px here — with no max-width, so
   on a phone the bitmap runs past the box that holds it and takes the page's horizontal
   scroll with it. That is the whole of the overflow, and `max-width: 100%` is the whole of
   the fix; `width`/`height: auto` keep the aspect ratio while it scales.

   The figure box itself was never the problem. `figure` is a block child of the column, so
   it fills the column on its own; this rule only replaces the UA stylesheet's `margin:
   1em 40px` — whose 40px sides would inset the figure off the column's rails — with this
   document's vertical rhythm and no side inset. Said plainly because the first version of
   this comment claimed the page overflowed twice — once for those 40px margins and once for
   the image — and the next person to read it would go looking for a second overflow that
   was never there. */
figure {
  margin: 1.8rem auto 2.4rem;
}
figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
figcaption {
  max-width: 72ch;
  margin: 0.75rem auto 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Declare no `width` here. `display: block` already fills the column, and the `width: 100%`
   this rule used to carry is what made every table on the record ship viewport-wide and hard
   left, sliding under the fixed #TOC rail on wide screens — see the note on `body`. It reads
   harmless next to the column rule, which is exactly why it is spelled out here as well.
   `max-width` and `overflow-x` stay: they are what makes a table too wide for the column
   scroll inside itself instead of widening the page. */
table {
  display: block;
  max-width: 100%;
  margin: 1.6rem 0 2.5rem;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
  -webkit-overflow-scrolling: touch;
}
th, td {
  min-width: 8rem;
  padding: 0.72rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 700;
}

/* The landing is the only view where the title header is followed directly by an h1.
   Strengthen that existing hierarchy without moving, hiding, or duplicating content. */
body > header + h1 {
  max-width: 19ch;
  margin-top: 3.25rem;
  font-size: clamp(2rem, 4.5vw, 3.15rem);
}
body > header + h1 ~ ul:last-of-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: none;
  margin-block: 2rem;
  padding: 0;
  list-style: none;
}
body > header + h1 ~ ul:last-of-type > li {
  min-width: 0;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
body > header + h1 ~ ul:last-of-type > li:first-child {
  grid-column: 1 / -1;
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}
body > header + h1 ~ ul:last-of-type > li:last-child {
  grid-column: 1 / -1;
  color: var(--muted);
}
body > header + h1 ~ ul:last-of-type a { display: inline-block; }
body > header + h1 ~ ul:last-of-type + p {
  margin-top: 2.75rem;
  padding: 1.2rem 1.3rem;
  border-left: 3px solid var(--accent);
  background: var(--paper);
}

/* Pandoc's own TOC is the record navigation. It remains in normal document flow by
   default (including mobile and no-JS); wide screens have enough margin to make it a
   persistent sidebar without narrowing the reading column. */
#TOC {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  padding: 1.1rem 1.2rem;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.42;
}
#TOC::before {
  content: "이 문서에서";
  display: block;
  margin-bottom: 0.7rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#TOC ul {
  margin: 0;
  padding-left: 1.1rem;
}
#TOC > ul {
  columns: 2;
  column-gap: 2rem;
  padding-left: 0;
  list-style: none;
}
#TOC > ul > li {
  break-inside: avoid;
  margin: 0 0 0.8rem;
}
#TOC li { max-width: none; }
#TOC a {
  color: inherit;
  text-decoration-color: transparent;
}
#TOC a:hover,
#TOC a:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.evidence-mount {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--paper);
}

/* 390px content half-width + 24px gutter + 230px sidebar = 644px from center.
   Enable the fixed rail only once that geometry also leaves a 20px viewport margin:
   2 * (644px + 20px) = 1328px. At 1440px the rail ends at x=306 and content
   begins at x=330, preserving the same 24px gutter. */
@media (min-width: 1328px) {
  #TOC {
    position: fixed;
    top: 22px;
    left: calc(50% - 644px);
    width: 230px;
    max-height: calc(100vh - 44px);
    margin: 0;
    padding: 0.9rem 1rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }
  #TOC > ul {
    columns: 1;
  }
  #TOC ul { padding-left: 0.9rem; }
  #TOC > ul { padding-left: 0; }
}

@media (max-width: 680px) {
  body {
    font-size: 16px;
    line-height: 1.68;
    word-break: normal;
  }
  body { width: min(calc(100% - 28px), var(--content)); }
  body > header { padding-top: 38px; }
  body > header h1 { font-size: clamp(2rem, 12vw, 3rem); }
  h1 { margin-top: 3.2rem; }
  h2 { margin-top: 2.8rem; }
  #TOC {
    margin-top: 1rem;
    padding-inline: 0;
  }
  #TOC > ul { columns: 1; }
  body > header + h1 ~ ul:last-of-type { grid-template-columns: 1fr; }
  body > header + h1 ~ ul:last-of-type > li:first-child,
  body > header + h1 ~ ul:last-of-type > li:last-child { grid-column: auto; }
  th, td { min-width: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  :root { --bg: white; }
  body { font-size: 11pt; }
  a { color: inherit; }
  #TOC { break-after: page; }
}