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

:root {
  --column-ink: #18211a;
  --column-paper: #f0ede2;
  --column-white: #fbfaf4;
  --column-muted: #687269;
  --column-line: #c7cbc2;
  --column-orange: #f05e32;
  --column-lime: #c8ef4e;
  --column-blue: #2e63d5;
  --column-sans: "Noto Sans KR", sans-serif;
  --column-serif: "Noto Serif KR", serif;
  --column-mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--column-paper); color: var(--column-ink); font-family: var(--column-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

.column-archive-hero {
  min-height: 620px;
  padding: 90px clamp(22px, 6vw, 100px) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  gap: clamp(55px, 8vw, 130px);
  align-items: end;
  background: var(--column-ink);
  color: var(--column-white);
}
.column-archive-hero .eyebrow { margin: 0 0 30px; color: var(--column-orange); font-family: var(--column-mono); font-size: 10px; letter-spacing: .12em; }
.column-archive-hero h1 { margin: 0; font-size: clamp(66px, 10vw, 150px); line-height: .86; letter-spacing: -.09em; }
.column-archive-hero h1 em { color: var(--column-orange); font-style: normal; }
.column-archive-lead { padding-bottom: 10px; }
.column-archive-lead > p { margin: 0; color: #bac3bc; font-family: var(--column-serif); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.9; word-break: keep-all; }
.column-archive-lead .archive-rule { margin-top: 45px; padding-top: 20px; display: flex; justify-content: space-between; border-top: 1px solid #536057; color: #8f9a92; font-family: var(--column-mono); font-size: 9px; letter-spacing: .08em; }

.column-library { padding: 110px clamp(22px, 6vw, 100px) 140px; }
.column-library-heading { margin-bottom: 50px; display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.column-library-heading p { margin: 0 0 10px; color: var(--column-orange); font-family: var(--column-mono); font-size: 10px; letter-spacing: .1em; }
.column-library-heading h2 { margin: 0; font-size: clamp(36px, 4.7vw, 70px); letter-spacing: -.065em; }
.column-library-heading > span { max-width: 400px; color: var(--column-muted); font-size: 12px; line-height: 1.7; }

.featured-column { display: grid; grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr); border-top: 2px solid var(--column-ink); border-bottom: 1px solid var(--column-ink); text-decoration: none; }
.featured-column-number { min-height: 470px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; background: var(--column-orange); border-right: 1px solid var(--column-ink); }
.featured-column-number span { font-family: var(--column-mono); font-size: 10px; letter-spacing: .09em; }
.featured-column-period { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.featured-column-period strong { font-family: var(--column-sans); font-size: clamp(60px, 7.5vw, 108px); font-weight: 900; line-height: .8; letter-spacing: -.1em; }
.featured-column-period em { font-family: var(--column-serif); font-size: clamp(25px, 2.8vw, 42px); font-style: normal; font-weight: 700; letter-spacing: -.05em; }
.featured-column-copy { padding: clamp(38px, 5vw, 75px); display: flex; flex-direction: column; background: var(--column-white); }
.featured-column-meta { display: flex; gap: 20px; color: var(--column-muted); font-family: var(--column-mono); font-size: 9px; letter-spacing: .08em; }
.featured-column-copy h3 { max-width: 900px; margin: 45px 0 28px; font-family: var(--column-serif); font-size: clamp(35px, 4.6vw, 66px); line-height: 1.28; letter-spacing: -.055em; word-break: keep-all; }
.featured-column-copy > p { max-width: 760px; margin: 0; color: #515c53; font-family: var(--column-serif); font-size: 16px; line-height: 1.95; word-break: keep-all; }
.featured-column-cta { margin-top: auto; padding-top: 45px; display: flex; justify-content: space-between; border-top: 1px solid var(--column-line); font-size: 12px; font-weight: 900; }
.featured-column:hover .featured-column-cta strong { text-decoration: underline; text-underline-offset: 6px; }

.column-article-header { border-bottom: 1px solid var(--column-line); }
.column-article-hero { padding: 82px clamp(22px, 6vw, 100px) 75px; display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 950px); gap: clamp(40px, 7vw, 110px); }
.column-issue-mark { min-height: 420px; padding-right: 34px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--column-line); }
.column-issue-mark span { color: var(--column-orange); font-family: var(--column-sans); font-size: clamp(60px, 7.5vw, 108px); font-weight: 900; line-height: .8; letter-spacing: -.1em; }
.column-issue-mark p { margin: 0; color: var(--column-muted); font-family: var(--column-mono); font-size: 9px; line-height: 1.7; letter-spacing: .08em; }
.column-article-kicker { margin: 0 0 27px; color: var(--column-blue); font-family: var(--column-mono); font-size: 10px; letter-spacing: .11em; }
.column-article-hero h1 { max-width: 920px; margin: 0; font-family: var(--column-serif); font-size: clamp(45px, 6.4vw, 92px); line-height: 1.18; letter-spacing: -.07em; word-break: keep-all; }
.column-article-dek { max-width: 770px; margin: 35px 0 0; color: #4d584f; font-family: var(--column-serif); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.85; word-break: keep-all; }
.column-article-meta { margin-top: 42px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 16px 28px; border-top: 1px solid var(--column-line); color: var(--column-muted); font-family: var(--column-mono); font-size: 9px; letter-spacing: .07em; }

.column-article-layout { padding: 95px clamp(22px, 6vw, 100px) 150px; display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 760px); gap: clamp(40px, 7vw, 110px); justify-content: start; }
.column-toc { position: sticky; top: 34px; align-self: start; }
.column-toc > p { margin: 0 0 20px; color: var(--column-orange); font-family: var(--column-mono); font-size: 9px; letter-spacing: .1em; }
.column-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--column-line); }
.column-toc li { border-bottom: 1px solid var(--column-line); }
.column-toc a { padding: 14px 0; display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: var(--column-muted); font-size: 11px; line-height: 1.55; text-decoration: none; }
.column-toc a span { color: var(--column-orange); font-family: var(--column-mono); font-size: 9px; }
.column-toc a:hover { color: var(--column-ink); }

.column-body { font-family: var(--column-serif); }
.column-body .opening { margin-bottom: 88px; padding-bottom: 58px; border-bottom: 1px solid var(--column-ink); }
.column-body p { margin: 0 0 1.25em; font-size: clamp(17px, 1.45vw, 20px); line-height: 2.02; letter-spacing: -.012em; word-break: keep-all; }
.column-body .opening p:first-child::first-letter { margin: .1em .08em 0 0; float: left; color: var(--column-orange); font-family: var(--column-sans); font-size: 4.4em; font-weight: 900; line-height: .78; }
.column-section { scroll-margin-top: 34px; }
.column-section + .column-section { margin-top: 100px; padding-top: 82px; border-top: 1px solid var(--column-line); }
.column-section-number { margin: 0 0 18px; color: var(--column-orange); font-family: var(--column-mono); font-size: 10px; letter-spacing: .1em; }
.column-body h2 { margin: 0 0 38px; font-family: var(--column-sans); font-size: clamp(31px, 3.7vw, 50px); line-height: 1.3; letter-spacing: -.055em; word-break: keep-all; }
.column-source-list { margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--column-line); font-family: var(--column-sans); }
.column-source-list a { margin-top: 8px; display: block; color: var(--column-blue); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; text-underline-offset: 3px; }
.column-conclusion { margin-top: 110px; padding: clamp(34px, 5vw, 64px); background: var(--column-ink); color: var(--column-white); }
.column-conclusion .column-section-number { color: var(--column-lime); }
.column-conclusion h2 { color: var(--column-white); }
.column-conclusion p { color: #dce2dd; }
.column-back { margin: 0 clamp(22px, 6vw, 100px) 110px; padding: 30px 0; display: flex; justify-content: space-between; border-top: 1px solid var(--column-ink); border-bottom: 1px solid var(--column-ink); text-decoration: none; }
.column-back span { color: var(--column-muted); font-family: var(--column-mono); font-size: 9px; letter-spacing: .08em; }
.column-back strong { font-size: clamp(18px, 2.2vw, 29px); }

@media (max-width: 860px) {
  .column-archive-hero { grid-template-columns: 1fr; min-height: auto; }
  .featured-column { grid-template-columns: 1fr; }
  .featured-column-number { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--column-ink); }
  .column-article-hero, .column-article-layout { grid-template-columns: 1fr; }
  .column-issue-mark { min-height: 135px; padding: 0 0 25px; flex-direction: row; align-items: end; border-right: 0; border-bottom: 1px solid var(--column-line); }
  .column-toc { position: static; }
}

@media (max-width: 620px) {
  .column-archive-hero { padding-top: 75px; }
  .column-archive-hero h1 { font-size: clamp(62px, 20vw, 94px); }
  .column-library { padding-top: 78px; padding-bottom: 90px; }
  .column-library-heading { align-items: flex-start; flex-direction: column; }
  .featured-column-copy { padding: 34px 24px; }
  .featured-column-copy h3 { margin-top: 34px; font-size: 35px; }
  .column-article-hero { padding-top: 58px; }
  .column-article-hero h1 { font-size: clamp(39px, 12vw, 58px); }
  .column-article-layout { padding-top: 65px; padding-bottom: 95px; }
  .column-body p { font-size: 17px; line-height: 1.95; }
  .column-section + .column-section { margin-top: 72px; padding-top: 62px; }
  .column-back { align-items: flex-start; flex-direction: column; gap: 13px; }
}

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