@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

:root {
  --paper: #f4f1e8;
  --paper-2: #fbf9f3;
  --ink: #1a1916;
  --muted: #69655d;
  --faint: #9b9589;
  --rule: #cfc9bc;
  --rule-dark: #8d877d;
  --accent: #304e5c;
  --accent-2: #704f3b;
  --serif: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', 'Batang', serif;
  --sans: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --measure: 42rem;
  --step--1: .78rem;
  --step-0: 1rem;
  --step-1: 1.18rem;
  --step-2: 1.48rem;
  --step-3: 1.92rem;
  --step-4: 2.62rem;
  --step-5: 3.65rem;
}

* { box-sizing: border-box; }
html { color-scheme: light; background: var(--paper); font-kerning: normal; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.92;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: 'kern' 1, 'palt' 1;
}
a { color: inherit; text-decoration-color: #80786d; text-underline-offset: .18em; text-decoration-thickness: .06em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
::selection { background: #d7dfdc; }

.masthead {
  height: 66px;
  border-bottom: 1px solid var(--rule-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 4vw;
  font: 600 .72rem/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.masthead a { text-decoration: none; }
.masthead .edition { color: var(--muted); font-weight: 500; }

.page { width: min(1180px, 92vw); margin: 0 auto; }
.article-header { padding: clamp(4.5rem, 10vw, 8rem) 0 3.5rem; border-bottom: 1px solid var(--rule-dark); }
.kicker { font: 600 .72rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.35rem; }
h1.article-title {
  max-width: 17ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.65rem, 6vw, var(--step-5));
  line-height: 1.16;
  letter-spacing: -.055em;
  font-weight: 700;
  text-wrap: balance;
}
.deck { margin: 1.6rem 0 0; max-width: 50rem; color: #3e3b36; font-size: 1.14rem; line-height: 1.75; }
.article-meta { margin-top: 2.4rem; display: flex; gap: .9rem 1.5rem; flex-wrap: wrap; color: var(--muted); font: 500 .76rem/1.5 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.article-meta span + span::before { content: '·'; margin-right: 1.5rem; color: var(--faint); }

.article-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(180px, 1fr); gap: clamp(3rem, 8vw, 7.5rem); align-items: start; padding: 4.4rem 0 7rem; }
.article-body { width: 100%; min-width: 0; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.35em; orphans: 3; widows: 3; }
.article-body h2 { margin: 3.7rem 0 1.25rem; padding-top: .8rem; border-top: 1px solid var(--rule); font: 700 var(--step-3)/1.35 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.article-body h3 { margin: 2.7rem 0 1rem; font: 700 var(--step-2)/1.4 var(--serif); letter-spacing: -.025em; }
.article-body strong { font-weight: 700; }
.article-body em { font-style: normal; text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .15em; }
.article-body code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .83em; background: #e9e5dc; padding: .12em .34em; border-radius: 2px; word-break: break-all; }
.article-body pre { margin: 2rem 0; padding: 1.25rem 1.35rem; overflow-x: auto; background: #e7e2d8; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); font: .82rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.article-body pre code { padding: 0; background: transparent; }
.article-body ul, .article-body ol { margin: 1.1rem 0 1.8rem; padding-left: 1.35rem; }
.article-body li { margin: .35rem 0; padding-left: .2rem; }
.article-body hr { border: 0; border-top: 1px solid var(--rule-dark); margin: 3.6rem 0; }

.evidence-note { margin: 0 0 3rem; padding: 1.2rem 1.25rem 1.25rem; border: 1px solid var(--rule-dark); border-left: 4px solid var(--accent); background: var(--paper-2); font: .86rem/1.75 var(--sans); color: #3f3b35; }
.pullquote { margin: 2.8rem -.5rem 3rem; padding: 1.6rem .5rem 1.5rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-dark); font: 600 clamp(1.35rem, 3vw, 1.8rem)/1.62 var(--serif); letter-spacing: -.028em; }
.pullquote p { margin: 0; }

.figure { margin: 2.5rem 0 3.2rem; }
.figure img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); background: #fbfaf7; }
.figure figcaption { margin-top: .75rem; color: var(--muted); font: .72rem/1.6 var(--sans); }

.table-wrap { overflow-x: auto; margin: 2rem 0 3rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-dark); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font: .76rem/1.62 var(--sans); font-variant-numeric: tabular-nums; }
th, td { padding: .8rem .72rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; background: rgba(255,255,255,.25); }
tbody tr:last-child td { border-bottom: 0; }
td:nth-child(n+2), th:nth-child(n+2) { font-variant-numeric: tabular-nums; }

.margin-note { position: sticky; top: 2rem; color: var(--muted); font: .72rem/1.72 var(--sans); border-top: 1px solid var(--rule-dark); padding-top: .9rem; }
.margin-note strong { color: var(--ink); display: block; margin-bottom: .55rem; font-weight: 700; }
.margin-note .folio { display: inline-block; margin-bottom: 1.2rem; font-size: 1.7rem; line-height: 1; color: var(--faint); font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

.issue-nav { border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); display: grid; grid-template-columns: 1fr 1fr; margin-top: 4rem; }
.issue-nav a { padding: 1.2rem 0; font: .76rem/1.5 var(--sans); text-decoration: none; }
.issue-nav a:last-child { text-align: right; }

.index-hero { padding: clamp(4.5rem, 10vw, 7.5rem) 0 4rem; border-bottom: 1px solid var(--rule-dark); }
.index-hero h1 { margin: 0; max-width: 13ch; font: 700 clamp(3rem, 8vw, 5.6rem)/1.04 var(--serif); letter-spacing: -.065em; }
.index-hero p { max-width: 43rem; margin: 1.8rem 0 0; color: #48443e; font-size: 1.08rem; }
.index-label { font: 600 .72rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; }
.feed { padding: 0 0 8rem; }
.feed-article { padding: clamp(5.5rem, 10vw, 8.5rem) 0 clamp(6.5rem, 12vw, 10rem); border-bottom: 1px solid var(--rule-dark); }
.feed-article:last-child { border-bottom: 0; }
.feed-header { max-width: 58rem; margin-bottom: 3.4rem; }
.feed-header .kicker { margin-bottom: 1.2rem; }
.feed-title { max-width: 17ch; margin: 0; font: 700 clamp(2.55rem, 6vw, 4.2rem)/1.15 var(--serif); letter-spacing: -.055em; text-wrap: balance; }
.feed-title a { text-decoration: none; }
.feed-deck { max-width: 49rem; margin: 1.45rem 0 0; color: #3e3b36; font-size: 1.12rem; line-height: 1.78; }
.feed-meta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; color: var(--muted); font: 500 .74rem/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.feed-meta span + span::before { content: '·'; margin-right: 1.2rem; color: var(--faint); }
.feed-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(180px, 1fr); gap: clamp(3rem, 8vw, 7.5rem); align-items: start; }
.feed-note { position: sticky; top: 2rem; color: var(--muted); font: .72rem/1.72 var(--sans); border-top: 1px solid var(--rule-dark); padding-top: .9rem; }
.feed-note .folio { display: block; margin-bottom: 1.1rem; color: var(--faint); font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.feed-permalink { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); font: 600 .72rem/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.feed-permalink a { text-decoration: none; }

.style-guide { max-width: 54rem; padding: 5rem 0 8rem; }
.style-guide h1 { font-size: var(--step-4); line-height: 1.2; letter-spacing: -.045em; }
.swatch { display: inline-block; width: 1.2rem; height: 1.2rem; vertical-align: -.2rem; border: 1px solid var(--rule-dark); margin-right: .35rem; }
.type-sample-serif { font: 500 1.65rem/1.75 var(--serif); }
.type-sample-sans { font: 500 .92rem/1.7 var(--sans); }

.site-footer { border-top: 1px solid var(--rule-dark); padding: 2.2rem 0 3rem; color: var(--muted); font: .7rem/1.65 var(--sans); display: flex; justify-content: space-between; gap: 2rem; }
.site-footer a { text-decoration: none; }

@media (max-width: 820px) {
  body { font-size: 17px; line-height: 1.88; }
  .masthead { padding: 0 5vw; height: 58px; }
  .masthead .edition { display: none; }
  .page { width: min(90vw, 44rem); }
  .article-header { padding: 4.1rem 0 2.7rem; }
  h1.article-title { font-size: clamp(2.4rem, 11vw, 3.45rem); max-width: 15ch; }
  .deck { font-size: 1.02rem; }
  .article-grid { grid-template-columns: 1fr; gap: 0; padding-top: 3rem; }
  .margin-note { position: static; order: -1; margin-bottom: 2.7rem; padding: .9rem 0; display: grid; grid-template-columns: 4rem 1fr; gap: .9rem; }
  .margin-note .folio { margin: .1rem 0 0; }
  .pullquote { margin-left: 0; margin-right: 0; }
  .feed-grid { grid-template-columns: 1fr; gap: 0; }
  .feed-note { position: static; order: -1; margin-bottom: 2.5rem; display: grid; grid-template-columns: 4rem 1fr; gap: .9rem; }
  .feed-note .folio { margin: .1rem 0 0; }
  .feed-title { max-width: 15ch; }
  .index-hero h1 { max-width: 11ch; }
  .site-footer { display: block; }
  .site-footer > * + * { margin-top: .6rem; }
}

@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .page { width: 88vw; }
  .article-body h2 { font-size: 1.65rem; margin-top: 3.15rem; }
  .table-wrap { width: 100vw; margin-left: calc((88vw - 100vw)/2); padding-left: 6vw; padding-right: 6vw; border-left: 0; border-right: 0; }
  table { min-width: 620px; }
  .article-meta span + span::before { display: none; }
  .article-meta { display: grid; gap: .35rem; }
}

@media print {
  @page { size: A4; margin: 18mm 18mm 20mm 18mm; }
  html, body { background: white; }
  body { font-size: 10.5pt; line-height: 1.75; }
  .masthead, .issue-nav, .site-footer, .margin-note, .feed-note { display: none !important; }
  .page { width: auto; max-width: none; margin: 0; }
  .article-header { padding: 0 0 12mm; }
  h1.article-title { font-size: 28pt; max-width: 15ch; }
  .article-grid, .feed-grid { display: block; padding: 12mm 0 0; }
  .feed-article { break-before: page; padding: 0; border: 0; }
  .feed-article:first-child { break-before: auto; }
  .article-body { max-width: none; }
  .article-body h2, .article-body h3 { break-after: avoid; }
  p, li, blockquote, figure, table { break-inside: avoid; }
  .figure img { max-height: 110mm; object-fit: contain; }
  a { text-decoration: none; }
  a[href^='http']::after { content: ' [' attr(href) ']'; font: 7pt/1.2 var(--sans); color: #666; word-break: break-all; }
}