/* marginalia — 화면 규칙. 값은 tokens.css 변수만(raw 색 0).
 * 뼈대: .cols 격자 하나가 세 단계로 칸 수를 바꾼다 — <960 한 열 · 960~1199 body+margin · ≥1200 meta+body+margin.
 * 여백 메모(.note)는 앵커 문단 바로 뒤 DOM 하나. ≥960 은 margin 칸(같은 행 = 문단 위쪽에서 시작), <960 은 접힌 줄. */

/* ── 리셋 (:where 로 특이도 0) ── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, figure, blockquote, ol, ul, table, caption) { margin: 0; padding: 0; }
:where(ol, ul) { list-style: none; }
:where(button, input) { font: inherit; color: inherit; }
:where(a) { color: inherit; }
[hidden] { display: none !important; }

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--text-body--line-height);
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
@media (min-width: 960px) { body { font-size: var(--text-body); } }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-hair); }
::selection { background: var(--color-surface-mark); color: var(--color-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--spacing-4); top: var(--spacing-2); z-index: 10;
  display: inline-flex; align-items: center; min-height: var(--spacing-tap);
  padding: 0 var(--spacing-4); background: var(--color-ink); color: var(--color-on-ink);
  font-size: var(--text-small); text-decoration: none; transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ── 격자 ── */
.wrap { padding-inline: var(--spacing-page); }
.cols {
  --cols-w: var(--spacing-col-body);
  display: grid;
  grid-template-columns: [meta-start body-start margin-start] minmax(0, 1fr) [meta-end body-end margin-end];
  max-width: var(--cols-w);
  margin-inline: auto;
}
.cols > * { grid-column: body; min-width: 0; }
.cols > .c-meta { grid-column: meta; }
.cols > .c-margin { grid-column: margin; }

@media (min-width: 960px) {
  .cols {
    --cols-w: calc(var(--spacing-col-body) + var(--spacing-gutter) + var(--spacing-col-margin-s));
    grid-template-columns:
      [meta-start body-start] minmax(0, var(--spacing-col-body))
      [meta-end body-end] var(--spacing-gutter)
      [margin-start] var(--spacing-col-margin-s) [margin-end];
  }
}
@media (min-width: 1200px) {
  .cols {
    --cols-w: calc(var(--spacing-col-meta) + var(--spacing-7) + var(--spacing-col-body) + var(--spacing-gutter) + var(--spacing-col-margin));
    grid-template-columns:
      [meta-start] var(--spacing-col-meta) [meta-end] var(--spacing-7)
      [body-start] minmax(0, var(--spacing-col-body)) [body-end] var(--spacing-gutter)
      [margin-start] var(--spacing-col-margin) [margin-end];
  }
}

/* ── 머리 center-wordmark ── */
.mast { border-bottom: var(--spacing-hair) solid var(--color-rule); }
.mast__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 3.5rem;
}
.mast__nav { display: none; }
.mast__nav ul { display: flex; gap: var(--spacing-2); margin-inline-start: calc(var(--spacing-2) * -1); }
.mast__link, .menu-panel__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--spacing-tap); min-width: var(--spacing-tap);
  font-size: var(--text-small); font-weight: 700; text-decoration: underline 1px;
  text-decoration-color: transparent; text-underline-offset: 0.35em;
  transition: text-decoration-color 160ms var(--ease-out), text-underline-offset 160ms var(--ease-out);
}
.mast__link:hover, .menu-panel__link:hover { text-decoration-color: var(--color-ink); text-underline-offset: 0.45em; }
.mast__link:active { text-decoration-thickness: 2px; }
.mast__link[aria-current="page"] { text-decoration-color: var(--color-ink); }
.mast__menu {
  grid-column: 1; justify-self: start;
  min-width: var(--spacing-tap); min-height: var(--spacing-tap);
  margin-inline-start: calc(var(--spacing-3) * -1);
  padding: 0 var(--spacing-3); border: 0; background: none; cursor: pointer;
  font-size: var(--text-small); font-weight: 700;
}
.mast__menu:active { color: var(--color-ink-mute); }
html:not(.js) .mast__menu { visibility: hidden; }
.wordmark {
  grid-column: 2;
  display: inline-flex; align-items: center; min-height: var(--spacing-tap);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.03em;
  line-height: 1; text-decoration: none;
}
.mast__sub { grid-column: 3; justify-self: end; margin-inline-end: calc(var(--spacing-2) * -1); }

.menu-panel { border-top: var(--spacing-hair) solid var(--color-rule); }
.menu-panel ul { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-3); padding-block: var(--spacing-2); }
.js .menu-panel:not(.is-open) { display: none; }

@media (min-width: 960px) {
  .mast__in { min-height: 4.5rem; }
  .mast__nav { display: block; grid-column: 1; }
  .mast__menu { display: none; }
  .wordmark { font-size: var(--text-wordmark); }
  .menu-panel, .js .menu-panel.is-open { display: none; }
}

/* ── 연재 띠 (hero=sequence) ── */
.band { background: var(--color-surface-sunk); }
.band__in { display: none; }
.band-m {
  display: flex; align-items: center; gap: var(--spacing-3);
  min-height: 3rem; max-width: var(--spacing-col-body); margin-inline: auto;
  font-size: var(--text-small); text-decoration: none;
}
.band-m__name { font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band-m__count { color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
.band-m__ticks { margin-inline-start: auto; }
.band-m:active .band-m__name { text-decoration: underline; }

.ticks, .band-m__ticks { display: inline-flex; gap: var(--spacing-1); align-items: center; }
.tick { width: 3px; height: 0.875rem; background: var(--color-rule); border-radius: 1px; }
.tick.is-read { background: var(--color-ink); }
.tick.is-current { background: var(--color-accent); }

@media (min-width: 960px) {
  .band-m { display: none; }
  .band__in { display: grid; align-items: center; padding-block: var(--spacing-3) var(--spacing-6); }
  .band__main { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-5); }
  .band__name { font-size: var(--text-small); color: var(--color-ink-mute); white-space: nowrap; }
  .band__name b { color: var(--color-ink); font-weight: 700; }
  .band__status { font-size: var(--text-micro); color: var(--color-ink-mute); line-height: 1.5; }
  .band__count { display: block; color: var(--color-ink); font-weight: 700; font-size: var(--text-small); font-variant-numeric: tabular-nums; }
}
.eps { display: flex; }
.ep {
  position: relative;
  display: grid; place-items: center;
  min-width: var(--spacing-tap); min-height: var(--spacing-tap);
  font-size: var(--text-h3); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.ep__n { padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color 140ms var(--ease-out); }
a.ep:active .ep__n { border-bottom-color: var(--color-ink); }
.ep.is-current { color: var(--color-accent); }
.ep.is-future { color: var(--color-ink-faint); cursor: default; }
.ep__t {
  position: absolute; top: calc(100% - var(--spacing-1)); left: 50%;
  translate: -50% 0;
  white-space: nowrap; pointer-events: none;
  font-size: var(--text-micro); font-weight: 400; color: var(--color-ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.eps li:nth-last-child(-n + 3) .ep__t { left: auto; right: 0; translate: none; }
.eps li:nth-child(-n + 2) .ep__t { left: 0; translate: none; }
.ep.is-future .ep__t { color: var(--color-ink-mute); }
@media (hover: hover) { .ep:hover .ep__t { opacity: 1; transform: none; } }
.ep:focus-visible .ep__t { opacity: 1; transform: none; }
@media (hover: hover) { a.ep:hover .ep__n { border-bottom-color: var(--color-rule); } }

/* ── 구간 ── */
main { display: block; }
.feature { padding-block: var(--spacing-5) 0; }
@media (min-width: 960px) { .feature { padding-block: var(--spacing-8) 0; } }
.block { margin-top: var(--spacing-section); }
.sec-head { align-items: baseline; margin-bottom: var(--spacing-5); }
.sec-head__h { font-size: var(--text-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.sec-head__aside { font-size: var(--text-small); color: var(--color-ink-mute); }
.sec-head__aside a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); margin-block: calc(var(--spacing-3) * -1); text-underline-offset: 0.3em; text-decoration-color: var(--color-ink-mute); }
.sec-head__aside a:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
@media (min-width: 960px) { .sec-head__h { font-size: var(--text-h2); } }
@media (max-width: 959.98px) { .sec-head__aside { margin-top: var(--spacing-1); } }

/* ── 글 머리: 회차 숫자 + H1 ── */
.emeta { margin-bottom: var(--spacing-2); }
.numeral { display: none; }
.emeta__line { font-size: var(--text-micro); color: var(--color-ink-mute); line-height: 1.8; font-variant-numeric: tabular-nums; }
.h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing);
  text-wrap: balance;
}
.h1 .l { display: inline-block; }
.h1 a { text-decoration: none; }
.h1 a:hover { text-decoration: underline 2px; text-underline-offset: 0.12em; }
.lead { margin-top: var(--spacing-3); font-size: var(--text-body); line-height: 1.5; color: var(--color-ink-mute); text-wrap: pretty; }
.ehead { margin-bottom: var(--spacing-5); }
@media (min-width: 960px) {
  .numeral {
    display: block;
    font-family: var(--font-display); font-weight: 900;
    font-size: var(--text-numeral); line-height: var(--text-numeral--line-height); letter-spacing: var(--text-numeral--letter-spacing);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--spacing-4);
  }
  .emeta__ep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .emeta { margin-bottom: var(--spacing-5); }
  .lead { font-size: var(--text-lead); margin-top: var(--spacing-4); }
  .ehead { margin-bottom: var(--spacing-7); }
}
@media (min-width: 1200px) {
  .emeta { margin-bottom: 0; padding-top: var(--spacing-1); }
  .numeral { margin-bottom: var(--spacing-3); }
  .emeta__sep { display: none; }
  .emeta__more { display: block; }
}

/* ── 본문 (prose) ── */
.prose > p, .prose > .prose__h2, .prose > .quote, .prose > .table-box, .prose > .ph { margin-bottom: var(--spacing-5); }
.prose > p { text-wrap: pretty; hanging-punctuation: first; }
.prose__h2 {
  margin-top: var(--spacing-7);
  font-size: var(--text-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em;
}
@media (min-width: 960px) { .prose__h2 { font-size: var(--text-h2); margin-top: var(--spacing-8); } }

.anchor {
  text-decoration: underline dotted var(--color-rule) 1px; text-underline-offset: 0.3em;
  border-radius: var(--radius-hair);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-color 160ms var(--ease-out);
}
.anchor.is-paired, .anchor.is-pinned { background: var(--color-surface-mark); }
.ref { font-size: var(--text-small); line-height: 0; vertical-align: baseline; position: relative; top: -0.55em; margin-inline: 1px 2px; }
.ref a {
  position: relative;
  font-family: var(--font-display); font-weight: 700; color: var(--color-accent);
  text-decoration: none; font-variant-numeric: tabular-nums; padding-inline: 2px;
}
.ref a::before { content: ""; position: absolute; inset: -14px -10px; }

/* 여백 메모 — 공통 */
.note { font-family: var(--font-note); }
.note__num {
  font-family: var(--font-display); font-size: var(--text-small); font-weight: 700; line-height: 1;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.note__text { font-size: var(--text-note); line-height: var(--text-note--line-height); color: var(--color-ink-mute); font-weight: 400; }

/* <960 — 앵커 문단 뒤 접힌 줄 */
@media (max-width: 959.98px) {
  .note { margin: calc(var(--spacing-2) * -1) 0 var(--spacing-5); }
  .note__fold { display: none; }
  .js .note__fold {
    display: flex; align-items: center; gap: var(--spacing-3);
    width: 100%; min-height: 3rem; padding: var(--spacing-2) 0;
    border: 0; border-block: var(--spacing-hair) solid var(--color-rule);
    background: none; cursor: pointer; text-align: left;
    font-family: var(--font-note); font-size: var(--text-note); color: var(--color-ink-mute);
    transition: background-color 160ms var(--ease-out);
  }
  .js .note__fold:active { background: var(--color-surface-raise); }
  .note__lede, .note__shut { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note__shut { display: none; font-family: var(--font-body); font-size: var(--text-micro); }
  .note__fold[aria-expanded="true"] .note__lede { display: none; }
  .note__fold[aria-expanded="true"] .note__shut { display: block; }
  .note__chev {
    flex: none; width: 0.5rem; height: 0.5rem; margin-inline: var(--spacing-1) var(--spacing-2);
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 220ms var(--ease-out);
  }
  .note__fold[aria-expanded="true"] .note__chev { transform: translateY(2px) rotate(225deg); }

  .note__body { display: grid; grid-template-rows: 1fr; }
  .note__in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: var(--spacing-5) minmax(0, 1fr); align-items: baseline; padding-block: var(--spacing-3); }
  .js .note__in { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-raise); }
  .js .note__in .note__num { display: none; }
  .js .note__body {
    transition: grid-template-rows 220ms var(--ease-out), opacity 220ms var(--ease-out);
  }
  .js .note:not(.is-open) .note__body {
    grid-template-rows: 0fr; opacity: 0; visibility: hidden;
    transition: grid-template-rows 160ms var(--ease-exit), opacity 160ms var(--ease-exit), visibility 0s 160ms;
  }
  .js .note:not(.is-open) .note__in { padding-block: 0; }
  .note.is-pinned .note__fold { border-color: var(--color-accent); }
}

/* ≥960 — 오른쪽 여백 칸, 앵커 줄 높이(main.js 가 margin-top 으로 맞추고 겹치면 민다) */
@media (min-width: 960px) {
  .prose > .note {
    grid-column: margin;
    align-self: start;
    /* 행 높이에 기여하지 않게 — 메모가 문단보다 길어도 본문에 빈 줄이 생기지 않는다 */
    margin-block-end: calc(var(--spacing-11) * -5);
  }
  .note__fold { display: none; }
  .note__in {
    display: grid; grid-template-columns: var(--spacing-5) minmax(0, 1fr); align-items: baseline;
    margin-inline: calc(var(--spacing-4) * -1);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-field);
    transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  }
  .note.is-paired .note__in, .note.is-pinned .note__in { background: var(--color-surface-raise); box-shadow: var(--shadow-lift); }
  .note.is-paired .note__text, .note.is-pinned .note__text { color: var(--color-ink); }
}
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .js .note--enter { opacity: 0; animation: note-safety 1ms 1.6s forwards; }
  .js .is-set .note--enter { animation: note-in 420ms var(--ease-settle) 160ms both; }
}
@keyframes note-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes note-safety { to { opacity: 1; } }

/* 인용 */
.quote {
  margin-block: var(--spacing-6) var(--spacing-7);
  padding: var(--spacing-5) 0 var(--spacing-5) var(--spacing-5);
  border-block: var(--spacing-hair) solid var(--color-rule);
}
.quote blockquote p { font-family: var(--font-note); font-size: 1.25rem; font-weight: 450; line-height: 1.55; text-wrap: balance; }
.quote figcaption { margin-top: var(--spacing-3); font-size: var(--text-micro); color: var(--color-ink-mute); }
@media (min-width: 960px) {
  .quote { padding-inline-start: var(--spacing-7); }
  .quote blockquote p { font-size: var(--text-h3); line-height: 1.5; }
}

/* 도판 판 — 이중 테 */
.fig { margin-block: var(--spacing-5) var(--spacing-6); }
.plate { padding: 6px; background: var(--color-surface-sunk); border-radius: var(--radius-plate); }
.plate .ph, .plate .photo { border-radius: var(--radius-plate-inner); }

/* 도판 — 사진 위 글자 없음. 비율은 width·height 속성 + 아래 고정 비율로 자리부터 잡는다(CLS 0) */
.photo { display: block; width: 100%; height: auto; background: var(--color-surface-sunk); object-fit: cover; }
.photo--3x2 { aspect-ratio: 3 / 2; }
.photo--4x5 { aspect-ratio: 4 / 5; }
.photo--half { width: min(100%, 20rem); aspect-ratio: 1; margin-bottom: var(--spacing-6); border-radius: var(--radius-hair); }
.fig__cap { margin-top: var(--spacing-3); font-family: var(--font-note); font-size: var(--text-note); line-height: var(--text-note--line-height); color: var(--color-ink-mute); }
@media (min-width: 960px) {
  .prose > .fig { grid-column: body-start / margin-end; display: grid; grid-template-columns: subgrid; align-items: end; }
  .fig > .plate { grid-column: body; }
  .fig > .fig__cap { grid-column: margin; margin: 0; padding-bottom: var(--spacing-2); }
}

/* 자리표시자 */
.ph {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-3);
  width: 100%; padding: var(--spacing-4);
  background: var(--color-surface-raise);
  border: var(--spacing-hair) dashed var(--color-ink-mute);
  color: var(--color-ink-mute); font-size: var(--text-micro); line-height: 1.5;
}
/* 자리표시자 안의 여백 선 — 이 장의 문법(본문 | 여백)을 빈 자리에도 긋는다 */
.ph::before { content: ""; position: absolute; inset-block: 0; right: 28%; border-left: var(--spacing-hair) solid var(--color-rule); }
.ph > * { position: relative; }
.ph[data-ratio="3:2"] { aspect-ratio: 3 / 2; }
.ph[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.ph[data-ratio="1:1"] { aspect-ratio: 1; }
.ph__ratio { align-self: flex-start; padding: 2px var(--spacing-2); background: var(--color-surface-raise); border: var(--spacing-hair) solid var(--color-ink-mute); font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ph__use { max-width: 32em; padding: var(--spacing-2) var(--spacing-3); background: var(--color-surface-raise); }
.ph__use b { display: block; color: var(--color-ink); font-weight: 700; }
.ph--half { width: min(100%, 20rem); margin-bottom: var(--spacing-6); }

/* 표 */
.table-box { overflow-x: auto; margin-block: var(--spacing-3) var(--spacing-6); scroll-padding-inline: var(--spacing-4); }
.table-box table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--text-small); line-height: 1.5; }
.table-box caption { text-align: left; padding-bottom: var(--spacing-3); font-size: var(--text-micro); color: var(--color-ink-mute); }
.table-box th, .table-box td { padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0; border-bottom: var(--spacing-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.table-box thead th { font-size: var(--text-micro); font-weight: 700; color: var(--color-ink-mute); border-bottom-color: var(--color-ink); }
.table-box tbody th { font-weight: 700; white-space: nowrap; }
.table-box .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-box td:last-child { padding-left: var(--spacing-4); }

/* 이어 읽기 */
.more { margin-top: var(--spacing-1); }
.more a {
  display: inline-block; padding-block: var(--spacing-3); margin-block: calc(var(--spacing-3) * -1);
  font-weight: 700; text-decoration: underline 1px; text-underline-offset: 0.35em;
  transition: text-underline-offset 160ms var(--ease-out);
}
.more a::after { content: ""; display: inline-block; vertical-align: 0.12em; width: 0.45em; height: 0.45em; margin-inline-start: 0.5em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 160ms var(--ease-out); }
.more a:hover { text-underline-offset: 0.5em; }
.more a:hover::after { transform: translateX(3px) rotate(45deg); }
.more__min { font-weight: 400; color: var(--color-ink-mute); }

/* ── 글 목록 행 ── */
.rows > :last-child { border-bottom: var(--spacing-hair) solid var(--color-rule); }
.row { position: relative; padding-block: var(--spacing-5); border-top: var(--spacing-hair) solid var(--color-rule); row-gap: var(--spacing-1); border-radius: var(--radius-hair); }
.row__date { font-size: var(--text-micro); color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
.row__title { font-size: 1.25rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.row__title a { display: inline-block; padding-block: var(--spacing-3); margin-block: calc(var(--spacing-3) * -1); text-decoration: underline 1px transparent; text-underline-offset: 0.25em; transition: text-decoration-color 160ms var(--ease-out); }
.row__title a::after { content: ""; position: absolute; inset: 0; }
.row__title a:focus-visible { outline: none; }
.row:has(.row__title a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.row:hover .row__title a { text-decoration-color: var(--color-ink); }
.row:active .row__title a { text-decoration-thickness: 2px; }
.row__line { margin-top: var(--spacing-1); font-size: var(--text-small); line-height: 1.7; color: var(--color-ink-mute); }
.row__series { margin-top: var(--spacing-2); font-size: var(--text-micro); color: var(--color-ink-mute); }
.row__quote { margin-top: var(--spacing-2); font-family: var(--font-note); font-size: var(--text-note); line-height: var(--text-note--line-height); color: var(--color-ink-mute); }
.row__qlabel { font-family: var(--font-body); font-size: var(--text-micro); font-weight: 700; color: var(--color-ink); margin-inline-end: var(--spacing-1); }
.row__nums { font-size: var(--text-micro); color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .row { padding-block: var(--spacing-6); }
  .row__title { font-size: var(--text-h3); }
  .row__quote, .row__nums { margin-top: 0; padding-top: var(--spacing-1); }
  .row__qlabel { display: block; margin-bottom: var(--spacing-1); }
}
@media (min-width: 1200px) { .row__date { padding-top: var(--spacing-1); } }

/* 연재 행 (홈) */
.srow { padding-block: var(--spacing-5); border-top: var(--spacing-hair) solid var(--color-rule); align-items: start; }
.srow__word { font-family: var(--font-display); font-weight: 900; font-size: var(--text-year); line-height: 0.9; letter-spacing: -0.04em; margin-bottom: var(--spacing-3); }
.srow__name { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.srow__name a { display: inline-block; padding-block: var(--spacing-3); margin-block: calc(var(--spacing-3) * -1); text-decoration: underline 1px transparent; text-underline-offset: 0.25em; transition: text-decoration-color 160ms var(--ease-out); }
.srow__name a:hover { text-decoration-color: var(--color-ink); }
.srow__line { margin-block: var(--spacing-1) var(--spacing-3); font-size: var(--text-small); color: var(--color-ink-mute); line-height: 1.7; }
.srow__status { margin-top: var(--spacing-2); font-size: var(--text-micro); color: var(--color-ink-mute); }
.srow__count { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; margin-inline-end: var(--spacing-1); }
@media (min-width: 960px) {
  .srow { padding-block: var(--spacing-6); }
  .srow__name { font-size: var(--text-h3); }
  .srow__status { margin-top: 0; padding-top: var(--spacing-2); }
  .srow__count { display: block; font-size: var(--text-h3); line-height: 1.2; margin-bottom: var(--spacing-1); }
}
@media (min-width: 1200px) { .srow__word { margin-bottom: 0; } }

/* 저자 */
.author__sign { margin-top: var(--spacing-1); font-size: var(--text-small); font-weight: 700; }
.author__sign a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); margin-block: calc(var(--spacing-3) * -1); font-weight: 400; color: var(--color-ink-mute); text-underline-offset: 0.3em; }
.author__sign a:hover { color: var(--color-ink); }
.author .prose > p:first-child::first-letter { font-weight: 700; }

/* ── 구독 판 — 이중 테, 강조색 면 없음 ── */
.sub-sec { margin-top: var(--spacing-section); }
.sub { padding: 6px; background: var(--color-surface-sunk); border-radius: var(--radius-plate); }
.sub__in { padding: var(--spacing-6) var(--spacing-5); background: var(--color-surface-raise); border-radius: var(--radius-plate-inner); box-shadow: var(--shadow-plate); }
.sub__h { font-size: var(--text-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.sub__p { margin-block: var(--spacing-2) var(--spacing-5); font-size: var(--text-small); line-height: 1.75; color: var(--color-ink-mute); }
.sub__label { display: block; margin-bottom: var(--spacing-2); font-size: var(--text-micro); font-weight: 700; }
.sub__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-2); }
.sub__input {
  min-height: 3rem; padding: 0 var(--spacing-4);
  background: var(--color-surface-raise); border: var(--spacing-hair) solid var(--color-ink-mute); border-radius: var(--radius-field);
  font-size: var(--text-body-m); /* 16 이상 — iOS 확대 방지 */
}
.sub__input::placeholder { color: var(--color-ink-mute); }
.sub__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.sub__input:disabled { border-style: dashed; }
.sub__btn {
  min-height: 3rem; padding: 0 var(--spacing-5);
  background: var(--color-ink); color: var(--color-on-ink); border: 0; border-radius: var(--radius-field);
  font-weight: 700; font-size: var(--text-small); cursor: pointer;
  text-decoration: underline 1px transparent; text-underline-offset: 0.3em;
  transition: transform 100ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
.sub__btn:hover { text-decoration-color: var(--color-on-ink); }
.sub__btn:active { transform: scale(0.98); }
.sub__btn:disabled { background: var(--color-surface-raise); color: var(--color-ink-mute); box-shadow: inset 0 0 0 1px var(--color-ink-mute); cursor: default; text-decoration: none; transform: none; }
.sub__msg { margin-top: var(--spacing-4); padding-top: var(--spacing-3); border-top: var(--spacing-hair) solid var(--color-rule); font-size: var(--text-small); line-height: 1.7; animation: fade-in 200ms var(--ease-out); }
.sub__fine { margin-top: var(--spacing-4); font-size: var(--text-micro); color: var(--color-ink-mute); }
@keyframes fade-in { from { opacity: 0; } }
@media (min-width: 720px) { .sub__row { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 960px) { .sub__in { padding: var(--spacing-7); } .sub__h { font-size: var(--text-h2); } }

/* ── 상세: 읽은 위치 선 · 글 끝 · 이전/다음 · 회차 목록 ── */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 5; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; }
.article { padding-top: var(--spacing-5); }
@media (min-width: 960px) { .article { padding-top: var(--spacing-8); } }
.endline { margin-top: var(--spacing-6); padding-top: var(--spacing-5); border-top: var(--spacing-hair) solid var(--color-rule); font-size: var(--text-small); color: var(--color-ink-mute); }
.byline { margin-top: var(--spacing-5); font-size: var(--text-small); line-height: 1.75; color: var(--color-ink-mute); }
.byline b { color: var(--color-ink); margin-inline-end: var(--spacing-2); }
.byline a { color: var(--color-ink); text-underline-offset: 0.3em; }

.pn-sec { margin-top: var(--spacing-8); }
.pn { display: grid; grid-template-columns: minmax(0, 1fr); border-block: var(--spacing-hair) solid var(--color-rule); }
.pn__i { display: grid; gap: var(--spacing-1); padding: var(--spacing-4) 0; text-decoration: none; }
.pn__i + .pn__i { border-top: var(--spacing-hair) solid var(--color-rule); }
.pn__k { font-size: var(--text-micro); color: var(--color-ink-mute); }
.pn__t { font-weight: 700; font-size: 1.125rem; line-height: 1.4; text-decoration: underline 1px transparent; text-underline-offset: 0.25em; transition: text-decoration-color 160ms var(--ease-out); }
a.pn__i:hover .pn__t { text-decoration-color: var(--color-ink); }
a.pn__i:active .pn__t { text-decoration-thickness: 2px; }
.pn__next .pn__t { color: var(--color-ink-mute); }
@media (min-width: 720px) {
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pn__i + .pn__i { border-top: 0; border-left: var(--spacing-hair) solid var(--color-rule); padding-left: var(--spacing-5); text-align: right; }
}
@media (min-width: 960px) { .pn-sec .cols > .pn { grid-column: body-start / margin-end; } }

.eplist { border-bottom: var(--spacing-hair) solid var(--color-rule); }
.eplist__i { display: grid; grid-template-columns: var(--spacing-7) minmax(0, 1fr); column-gap: var(--spacing-3); align-items: baseline; padding-block: var(--spacing-3); border-top: var(--spacing-hair) solid var(--color-rule); }
.eplist__n { font-size: var(--text-h3); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; grid-row: span 2; }
.eplist__t { font-weight: 700; font-size: var(--text-small); line-height: 1.5; }
a.eplist__t { display: inline-flex; align-items: center; min-height: var(--spacing-tap); margin-block: calc(var(--spacing-3) * -1); text-underline-offset: 0.25em; text-decoration-color: transparent; transition: text-decoration-color 160ms var(--ease-out); }
a.eplist__t:hover { text-decoration-color: var(--color-ink); }
.eplist__d { grid-column: 2; font-size: var(--text-micro); color: var(--color-ink-mute); }
.eplist__i.is-current .eplist__n { color: var(--color-accent); }
.eplist__now { margin-inline-start: var(--spacing-2); font-size: var(--text-micro); font-weight: 400; color: var(--color-ink-mute); }
.eplist__i.is-future .eplist__n { color: var(--color-ink-faint); }
.eplist__i.is-future .eplist__t { color: var(--color-ink-mute); font-weight: 400; }
@media (min-width: 720px) {
  .eplist__i { grid-template-columns: var(--spacing-7) minmax(0, 1fr) auto; }
  .eplist__n { grid-row: auto; }
  .eplist__d { grid-column: 3; }
}

/* ── 쪽 머리 (연재·모든 글·소개) ── */
.phead { padding-block: var(--spacing-7) var(--spacing-6); }
.phead__h { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing); text-wrap: balance; }
.phead__line { margin-top: var(--spacing-3); color: var(--color-ink-mute); font-size: var(--text-body); line-height: 1.6; text-wrap: pretty; }
@media (min-width: 960px) { .phead { padding-block: var(--spacing-9) var(--spacing-8); } }

/* ── 연재 쪽 ── */
.season { max-width: var(--cols-max, 76rem); margin-inline: auto; padding-block: var(--spacing-7); border-top: var(--spacing-hair) solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); }
.season:last-child { border-bottom: var(--spacing-hair) solid var(--color-rule); }
.season__word { font-family: var(--font-display); font-weight: 900; font-size: var(--text-season); line-height: 0.82; letter-spacing: -0.05em; }
.season__state { margin-top: var(--spacing-4); font-size: var(--text-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.season__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); }
.season__cover { order: -1; max-width: 22rem; }
.season__name { font-size: var(--text-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.season__span { margin-top: var(--spacing-1); font-size: var(--text-micro); color: var(--color-ink-mute); }
.season__intro { margin-block: var(--spacing-4) var(--spacing-5); font-size: var(--text-small); line-height: 1.8; color: var(--color-ink-mute); max-width: 36em; }
.seps { border-bottom: var(--spacing-hair) solid var(--color-rule); }
.sep { display: grid; grid-template-columns: var(--spacing-6) minmax(0, 1fr); column-gap: var(--spacing-3); align-items: baseline; padding-block: var(--spacing-2); border-top: var(--spacing-hair) solid var(--color-rule); }
.sep__n { font-weight: 700; font-size: var(--text-small); font-variant-numeric: tabular-nums; grid-row: span 2; }
.sep__t { font-size: var(--text-small); font-weight: 700; line-height: 1.5; }
a.sep__t { display: inline-flex; align-items: center; min-height: var(--spacing-tap); margin-block: calc(var(--spacing-3) * -1); text-underline-offset: 0.25em; text-decoration-color: transparent; transition: text-decoration-color 160ms var(--ease-out); }
a.sep__t:hover { text-decoration-color: var(--color-ink); }
a.sep__t:active { text-decoration-thickness: 2px; }
.sep__d { grid-column: 2; font-size: var(--text-micro); color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
.sep.is-current .sep__n { color: var(--color-accent); }
.sep.is-future .sep__n { color: var(--color-ink-faint); }
.sep.is-future .sep__t { color: var(--color-ink-mute); font-weight: 400; }
@media (min-width: 720px) {
  .sep { grid-template-columns: var(--spacing-6) minmax(0, 1fr) auto; }
  .sep__n { grid-row: auto; }
  .sep__d { grid-column: 3; }
}
@media (min-width: 960px) {
  .season { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--spacing-7); padding-block: var(--spacing-8); }
  .season__main { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: var(--spacing-gutter); align-items: start; }
  .season__cover { order: 0; max-width: none; }
  .season__name { font-size: var(--text-h2); }
}
.seasons { --cols-max: calc(var(--spacing-col-meta) + var(--spacing-7) + var(--spacing-col-body) + var(--spacing-gutter) + var(--spacing-col-margin)); }

/* ── 모든 글 ── */
.filter-sec { margin-bottom: var(--spacing-7); }
.filter {
  display: flex; gap: var(--spacing-2);
  overflow-x: auto; scroll-padding-inline: var(--spacing-page); scrollbar-width: none;
  margin-inline: calc(var(--spacing-page) * -1); padding: var(--spacing-1) var(--spacing-page);
}
.filter::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: var(--spacing-2);
  min-height: var(--spacing-tap); padding: 0 var(--spacing-4);
  background: none; border: var(--spacing-hair) solid var(--color-ink-mute); border-radius: var(--radius-field);
  font-size: var(--text-small); font-weight: 700; cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.chip__n { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-ink-mute); }
.chip:hover { border-color: var(--color-ink); }
.chip:active { transform: scale(0.98); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.chip[aria-pressed="true"] .chip__n { color: var(--color-on-ink); }
.filter__out { margin-top: var(--spacing-3); font-size: var(--text-micro); color: var(--color-ink-mute); }
@media (min-width: 960px) { .filter { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.archive { transition: opacity 160ms var(--ease-out); }
.archive.is-swapping { opacity: 0; transition: opacity 100ms var(--ease-exit); }
.ygroup + .ygroup { margin-top: var(--spacing-8); }
.yhead { align-items: end; margin-bottom: var(--spacing-3); }
.yhead__y { font-family: var(--font-display); font-weight: 900; font-size: var(--text-year); line-height: 0.85; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.yhead__n { font-size: var(--text-small); color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 1199.98px) { .yhead__n { margin-top: var(--spacing-2); } }
.alist > li:has(~ li:not([hidden])) { border-bottom: 0; }
.alist > li:not([hidden]):not(:has(~ li:not([hidden]))) { border-bottom: var(--spacing-hair) solid var(--color-rule); }
.arow { padding-block: var(--spacing-3); border-top: var(--spacing-hair) solid var(--color-rule); align-items: baseline; }
.arow[hidden] { display: none; }
.arow__date { font-size: var(--text-micro); color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
.arow__main { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-3); }
.arow__title { display: inline-flex; align-items: center; min-height: var(--spacing-tap); font-weight: 700; line-height: 1.4; text-underline-offset: 0.25em; text-decoration-color: transparent; transition: text-decoration-color 160ms var(--ease-out); }
.arow__title:hover { text-decoration-color: var(--color-ink); }
.arow__title:active { text-decoration-thickness: 2px; }
.arow__series { font-size: var(--text-micro); color: var(--color-ink-mute); }
.arow__nums { font-size: var(--text-micro); color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) { .arow__nums { text-align: right; } }
.empty__in { padding: var(--spacing-7) 0; border-block: var(--spacing-hair) solid var(--color-rule); }
.empty__h { font-weight: 700; font-size: 1.125rem; line-height: 1.5; }
.empty__btn {
  margin-top: var(--spacing-4); min-height: var(--spacing-tap); padding: 0 var(--spacing-4);
  background: none; border: var(--spacing-hair) solid var(--color-ink-mute); border-radius: var(--radius-field);
  font-weight: 700; font-size: var(--text-small); cursor: pointer;
}
.empty__btn:hover { border-color: var(--color-ink); }

/* ── 소개 ── */
.contact__p { font-size: var(--text-body); line-height: 1.8; }
.contact__p a { font-weight: 700; text-underline-offset: 0.3em; }
.contact__fine { font-size: var(--text-micro); color: var(--color-ink-mute); }

/* ── 꼬리 ── */
.foot { margin-top: var(--spacing-section); background: var(--color-surface-sunk); padding-block: var(--spacing-7) calc(var(--spacing-7) + env(safe-area-inset-bottom)); }
.foot__in { row-gap: var(--spacing-4); }
.foot__mark { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1; }
.foot__links { display: flex; flex-wrap: wrap; column-gap: var(--spacing-3); margin-inline-start: calc(var(--spacing-2) * -1); }
.foot__links a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--spacing-tap); min-width: var(--spacing-tap); font-size: var(--text-small); font-weight: 700; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color 160ms var(--ease-out); }
.foot__links a:hover { text-decoration-color: var(--color-ink); }
.foot__note { margin-top: var(--spacing-2); font-size: var(--text-micro); color: var(--color-ink-mute); line-height: 1.7; }
.foot__meta { font-size: var(--text-micro); color: var(--color-ink-mute); line-height: 1.7; }
.foot__meta a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); color: var(--color-ink); text-underline-offset: 0.3em; }

/* ── 줄인 움직임 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}