/* Hallmark · macrostructure: Split Studio · nav: N9 edge-aligned · footer: Ft4 dense colophon
 * genre: editorial · theme: custom (vibe: "1998 구리빛 판타지 로고, 아카이브 지면")
 * paper oklch(95.0% 0.014 84.6) light · display classical-serif · accent oklch(54.4% 0.173 28.4) warm
 * enrichment: 실제 현지화 로고 PNG (제작물 원본, 생성물 아님)
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 *
 * 서풍의 광시곡 리마스터 영어·일본어 현지화 안내 페이지.
 * 독립 스타일시트다. krondor.css 를 부르지 않는다 — 종이·먹·금색만 사이트 계열값을 공유하고
 * 나머지는 이 파일 안에서 끝낸다. 강조색은 로고 아트워크에서 뽑았다.
 * 이식용 토큰 원본은 저장소의 tokens.css 에 따로 둔다.
 */

/* ── 토큰 ──────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --color-paper:        oklch(95.0% 0.014 84.6);
  --color-paper-2:      oklch(90.1% 0.025 81.1);
  --color-paper-3:      oklch(99.4% 0.007 88.6);
  --color-ink:          oklch(22.7% 0.011 60.9);
  --color-muted:        oklch(51.8% 0.017 70.7);
  --color-rule:         oklch(22.7% 0.011 60.9 / 0.17);
  --color-rule-strong:  oklch(22.7% 0.011 60.9 / 0.34);

  --color-night:        oklch(20.0% 0.035 261.4);
  --color-night-2:      oklch(25.7% 0.047 261.2);
  --color-night-ink:    oklch(94.0% 0.012 85.0);
  --color-night-muted:  oklch(72.0% 0.020 250.0);
  --color-night-rule:   oklch(94.0% 0.012 85.0 / 0.20);

  --color-ember:        oklch(54.4% 0.173 28.4);
  --color-ember-lift:   oklch(69.2% 0.165 35.2);
  --color-ember-deep:   oklch(44.7% 0.131 25.7);
  --color-gold:         oklch(71.3% 0.116 80.3);
  --color-focus:        oklch(44.7% 0.131 25.7);
  --color-ok:           oklch(45.0% 0.090 155.0);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
                  "Source Han Serif", Georgia, serif;
  --font-body:    "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
                  "Source Han Serif", Georgia, serif;
  --font-ui:      ui-sans-serif, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
                  "Yu Gothic UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
                  "Roboto Mono", Menlo, Consolas, monospace;

  --text-2xs:  0.75rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-display-s: clamp(2rem, 4.2vw, 3rem);
  --text-display:   clamp(2.5rem, 6vw, 4.25rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --rule-hair: 1px;
  --rule-thick: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 420ms;

  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --shell: min(1140px, calc(100vw - 2 * var(--page-gutter)));
}

/* ── 바탕 ──────────────────────────────────────────────────────────── */

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

html, body {
  overflow-x: clip;
  margin: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--color-ember-lift); color: var(--color-paper-3); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* 포커스 링은 절대 애니메이트하지 않는다 */
  transition: none;
}

.z-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.z-skip {
  position: absolute;
  left: var(--space-sm);
  top: -4rem;
  z-index: 40;
  padding: var(--space-2xs) var(--space-sm);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--color-ink);
  color: var(--color-paper-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.z-skip:focus { top: var(--space-sm); }

/* ── N9 · 가장자리 정렬 머리글 ─────────────────────────────────────── */

.z-mast {
  width: var(--shell);
  margin: 0 auto;
  padding: var(--space-md) 0 var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.z-mast__home {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.25;
  text-decoration: none;
  color: var(--color-ink);
  display: inline-flex;
  flex-direction: column;
  min-height: 44px;
  justify-content: center;
}

.z-mast__home b {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.z-mast__home span {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.z-mast__home:hover b { color: var(--color-ember); }

.z-mast__nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.z-mast__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-xs);
  text-decoration: none;
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.z-mast__link:hover { color: var(--color-ember); }
.z-mast__link:active { color: var(--color-ember-deep); }
.z-mast__link[aria-current="page"] { color: var(--color-ink); }

.z-mast__sep {
  width: var(--rule-hair);
  height: 1.1rem;
  background: var(--color-rule-strong);
}

/* ── 히어로 · H2 분할 ──────────────────────────────────────────────── */

.z-hero {
  background:
    radial-gradient(85% 120% at 88% 12%, oklch(54.4% 0.173 28.4 / 0.20), transparent 62%),
    linear-gradient(168deg, var(--color-night-2), var(--color-night));
  color: var(--color-night-ink);
  border-radius: var(--radius-lg);
  width: var(--shell);
  margin: 0 auto var(--space-2xl);
  padding: clamp(var(--space-lg), 5vw, var(--space-2xl)) clamp(var(--space-md), 4vw, var(--space-2xl));
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: center;
}

.z-hero--compact { margin-bottom: var(--space-xl); }

.z-hero__title {
  font-size: var(--text-display);
  margin: 0 0 var(--space-sm);
  color: var(--color-paper-3);
}

.z-hero--compact .z-hero__title { font-size: var(--text-display-s); }

.z-hero__lede {
  color: var(--color-night-ink);
  opacity: 0.84;
  max-width: 46ch;
  font-size: var(--text-lg);
  margin-bottom: var(--space-lg);
}

.z-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
}

.z-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  padding: var(--space-sm) 0 0;
  border-top: var(--rule-hair) solid var(--color-night-rule);
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-night-muted);
}

.z-hero__meta b {
  color: var(--color-gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.z-hero__art { margin: 0; }

.z-hero__art img {
  width: 100%;
  /* 로고는 어두운 배경을 전제로 그려진 그림이다. 밝은 면에 올리지 않는다. */
  filter: drop-shadow(0 18px 40px oklch(0% 0 0 / 0.5));
}

.z-hero__art figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--color-night-muted);
  text-align: center;
}

/* ── 단추와 링크 ───────────────────────────────────────────────────── */

.z-btn {
  --btn-bg: var(--color-ember);
  --btn-ink: var(--color-paper-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 46px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.z-btn:hover, .z-btn.is-hover { --btn-bg: var(--color-ember-lift); }
.z-btn:active, .z-btn.is-active { --btn-bg: var(--color-ember-deep); transform: translateY(1px); }
.z-btn:disabled, .z-btn[aria-disabled="true"], .z-btn.is-disabled {
  --btn-bg: var(--color-rule-strong);
  --btn-ink: var(--color-paper-3);
  cursor: not-allowed;
  transform: none;
}
.z-btn[data-state="loading"] { cursor: progress; --btn-bg: var(--color-ember-deep); }
.z-btn[data-state="error"] { --btn-bg: var(--color-ember-deep); }
.z-btn[data-state="success"] { --btn-bg: var(--color-ok); }

.z-btn--onnight:disabled, .z-btn--onnight[aria-disabled="true"] {
  --btn-bg: oklch(94.0% 0.012 85.0 / 0.16);
  --btn-ink: var(--color-night-ink);
}

/* C3 · 타이포그래픽 링크 */
.z-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.7em);
  background-size: 100% var(--rule-hair);
  transition: background-size var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.z-link:hover { background-size: 100% 2px; }
.z-link:active { color: var(--color-ember-deep); }

.z-prose a {
  color: var(--color-ember-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: var(--rule-hair);
}
.z-prose a:hover { text-decoration-thickness: 2px; }

/* ── Split Studio · 2단 띠 ─────────────────────────────────────────── */

.z-band {
  width: var(--shell);
  margin: 0 auto;
  padding-block: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.z-band:first-of-type { border-top: 0; padding-top: 0; }

.z-split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
.z-split--flip > :first-child { order: 2; }
.z-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.z-h2 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-sm);
}

.z-h3 {
  font-size: var(--text-lg);
  margin: var(--space-lg) 0 var(--space-2xs);
}
.z-col > .z-h3:first-child { margin-top: 0; }

.z-prose { max-width: 62ch; }
.z-prose p + p { margin-top: var(--space-sm); }

.z-note {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 58ch;
}

/* ── 정보 목록 ─────────────────────────────────────────────────────── */

.z-facts {
  margin: 0;
  display: grid;
  gap: 0;
}

.z-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding: var(--space-xs) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.z-facts > div:first-child { border-top: 0; padding-top: 0; }

.z-facts dt {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.z-facts dd { margin: 0; }

/* ── F3 · 표 ───────────────────────────────────────────────────────── */

.z-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.z-table caption {
  /* 아래로 내린다. 위에 두면 뒤집힌 2단에서 왼쪽 작은 라벨 + 오른쪽 제목 모양이 되는데,
     그 배치는 가장 흔한 '틀에서 찍어낸 편집물' 신호다. */
  caption-side: bottom;
  padding-top: var(--space-2xs);
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.z-table th,
.z-table td {
  text-align: left;
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}

.z-table thead th {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom-color: var(--color-rule-strong);
}

.z-table tbody th { font-weight: 400; }
.z-table .num {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.z-table .yes { color: var(--color-ink); }
.z-table .no { color: var(--color-muted); }

/* ── F4 · 단계 ─────────────────────────────────────────────────────── */

.z-steps {
  list-style: none;
  counter-reset: zstep;
  margin: 0;
  padding: 0;
}

.z-steps > li {
  counter-increment: zstep;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.z-steps > li:first-child { border-top: 0; padding-top: 0; }

.z-steps > li::before {
  content: counter(zstep, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--color-ember);
  font-variant-numeric: tabular-nums;
}

.z-list {
  margin: 0;
  padding-left: 1.1em;
  max-width: 62ch;
}
.z-list li { margin-bottom: var(--space-2xs); }
.z-list li::marker { color: var(--color-muted); }

/* ── 스크린샷 대조 ─────────────────────────────────────────────────── */

.z-shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
  margin: 0;
}

.z-shot { margin: 0; min-width: 0; }

.z-shot img,
.z-shot__slot {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);
}

.z-shot img { object-fit: cover; background: var(--color-night); }

.z-shot__slot {
  display: grid;
  place-content: center;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  text-align: center;
  border-style: dashed;
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
}
.z-shot__slot code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  opacity: 0.8;
  overflow-wrap: anywhere;
}

.z-shot figcaption {
  margin-top: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.z-shot figcaption b { color: var(--color-ink); font-weight: 600; }

/* ── 내려받기 카드 ─────────────────────────────────────────────────── */

.z-file {
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-lg);
  background: var(--color-paper-3);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-xs);
}

.z-file__name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.z-file__meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.z-hash {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--color-muted);
  overflow-wrap: anywhere;
  margin: 0;
}

/* 공식이 아니라서 생기는 것들. 경고가 아니라 사실 고지라 조용하게 둔다. */
.z-rough {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
  border-left: var(--rule-hair) solid var(--color-rule);
  padding-left: var(--space-md);
  max-width: 58ch;
}

.z-notice {
  border: var(--rule-hair) solid var(--color-gold);
  border-left-width: var(--rule-thick);
  border-radius: var(--radius-sm);
  background: oklch(71.3% 0.116 80.3 / 0.12);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  max-width: 58ch;
}
.z-notice b { font-weight: 600; }

/* ── 갱신 이력 ─────────────────────────────────────────────────────── */

.z-log { display: grid; gap: var(--space-md); }

.z-log__entry {
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.z-log__entry:first-child { border-top: 0; padding-top: 0; }

.z-log__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-2xs);
}

.z-log__ver {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.z-tag {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 2px var(--space-2xs);
  border-radius: 999px;
  border: var(--rule-hair) solid var(--color-rule-strong);
  color: var(--color-muted);
}
.z-tag--live { border-color: var(--color-ember); color: var(--color-ember-deep); }

/* ── 피드백 서식 ───────────────────────────────────────────────────── */

.z-form { display: grid; gap: var(--space-sm); max-width: 60ch; }

.z-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}

.z-field { display: grid; gap: var(--space-3xs); min-width: 0; }

.z-field__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

.z-field__hint {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

.z-input, .z-select, .z-textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.z-textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.z-select { font-family: var(--font-ui); font-size: var(--text-sm); }

.z-input:hover, .z-select:hover, .z-textarea:hover { border-color: var(--color-muted); }
.z-input:disabled, .z-select:disabled, .z-textarea:disabled {
  background: var(--color-paper-2);
  color: var(--color-muted);
  cursor: not-allowed;
}
.z-field[data-state="error"] .z-input,
.z-field[data-state="error"] .z-select,
.z-field[data-state="error"] .z-textarea { border-color: var(--color-ember); }

.z-input[type="file"] {
  padding: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}

.z-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: start;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-muted);
}
.z-check input { margin-top: 0.3em; width: 1rem; height: 1rem; accent-color: var(--color-ember); }

.z-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.cf-turnstile { margin-top: var(--space-2xs); min-height: 65px; }

.z-status {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.55;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  border-left: var(--rule-thick) solid var(--color-rule-strong);
  background: var(--color-paper-2);
  color: var(--color-muted);
}
.z-status:empty { display: none; }
.z-status[data-state="error"] { border-left-color: var(--color-ember); color: var(--color-ember-deep); }
.z-status[data-state="success"] { border-left-color: var(--color-ok); color: var(--color-ok); }
.z-status[data-state="loading"] { border-left-color: var(--color-gold); }

/* ── 받은 보고 ─────────────────────────────────────────────────────── */

.z-board { display: grid; gap: var(--space-md); }

.z-post {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-sm);
}
.z-post:first-child { border-top: 0; padding-top: 0; }

.z-post__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-3xs);
}

.z-post__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.z-post__meta {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-2xs);
}

.z-post__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  margin: 0;
}

.z-post__shots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}
.z-post__shots img {
  width: 132px;
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule);
}

.z-reply {
  margin-top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-left: var(--rule-thick) solid var(--color-gold);
  background: var(--color-paper-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.z-reply b {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3xs);
}

.z-empty {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding: var(--space-md) 0;
}

/* ── Ft4 · 콜로폰 ──────────────────────────────────────────────────── */

.z-colophon {
  width: var(--shell);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-md) 0 var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-muted);
}
.z-colophon p { max-width: 78ch; margin: 0 0 var(--space-2xs); }
.z-colophon a { color: var(--color-muted); text-underline-offset: 3px; }
.z-colophon a:hover { color: var(--color-ember); }

/* ── 움직임 ────────────────────────────────────────────────────────── */

/* 스크롤 연동 등장은 넣었다가 뺐다. animation-timeline: view() 가 지원되면
   화면 밖 섹션이 opacity 0 으로 묶여 있다가, 인쇄나 화면 캡처에서 통째로 빈 면이 된다.
   이 페이지가 그 위험을 감수하고 얻을 것이 없다. 움직임은 누르기·밑줄·색 변화 셋뿐이다. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 좁은 화면 ─────────────────────────────────────────────────────── */

@media (max-width: 56rem) {
  .z-hero,
  .z-split,
  .z-split--even {
    grid-template-columns: minmax(0, 1fr);
  }
  .z-split--flip > :first-child { order: 0; }
  .z-hero__art { order: -1; max-width: 32rem; }
  .z-hero__lede { max-width: none; }
}

@media (max-width: 40rem) {
  .z-mast {
    padding-top: var(--space-sm);
    gap: var(--space-2xs);
  }
  .z-mast__nav { width: 100%; justify-content: flex-start; margin-left: calc(var(--space-xs) * -1); }
  .z-shots { grid-template-columns: minmax(0, 1fr); }
  .z-row { grid-template-columns: minmax(0, 1fr); }
  .z-band { padding-block: var(--space-lg); }
  .z-hero { border-radius: var(--radius-md); }
  .z-steps > li { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .z-hero__actions .z-btn { width: 100%; }
}