/* ═══════════════════════════════════════════════════════════════════════════
   design.hyunsu.co.kr — 갤러리 (홈 · 카테고리 7 · 404). 방향 A. 교정쇄.

   이 화면은 **전시물이 아니라 전시장**이다. 액자(종이·대지·선·모노 라벨)는 어떤 썸네일 옆에서도 같은 색이고,
   화면에서 가장 큰 것은 워드마크 하나뿐이다. 장식은 인쇄 제작의 기호 넷 — 재단 표시·색 교정 막대·
   슬러그 라인·틴트 스케일 — 밖에 없다. 그림자 0 · 그라데이션 0 · 모서리 0 · 1px 선.

   값은 전부 tokens.css 의 변수다(raw 색 0). 규칙의 이유는 _design/DESIGN.md, 배치는 _design/wireframe.md.
   브레이크포인트 680 · 1100 은 tokens.css 의 --breakpoint-md·lg 와 같은 숫자다(미디어 쿼리는 변수를 못 읽는다).
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* hidden 속성이 display 규칙에 지지 않게 — 필터 바·빈 상태·카드는 hidden 으로 켜고 끈다. */
[hidden] {
  display: none !important;
}

html {
  font-family: var(--font-sans);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* height: auto 가 없으면 HTML 의 height 속성(750)이 그대로 CSS 높이가 되어
   aspect-ratio 가 무시된다 (2026-09-23 실측 — 썸네일이 세로로 늘어났다). */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--line-w-current) solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1;
  background: var(--color-plate);
  border: var(--line-w) solid var(--color-ink);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  font-size: var(--text-sm);
}

.skip-link:focus {
  left: calc(var(--spacing) * 4);
  top: calc(var(--spacing) * 4);
}

/* 내용 폭 = --container-gallery. 좌우 여백은 그 밖에 붙는다(1440 에서 내용 1296 → 카드 ≈ 413). */
.wrap {
  max-width: calc(var(--container-gallery) + 2 * var(--spacing-page-x));
  margin-inline: auto;
  padding-inline: var(--spacing-page-x);
}

/* ── 머리 ─────────────────────────────────────────────────────────────────── */

.masthead {
  padding-top: var(--spacing-masthead-top);
}

/* 교정쇄 여백의 작업 줄 — 로고 마크 · 슬러그 라인 · 색 교정 막대 */
.slug-line {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}

.mark {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--color-ink);
}

.mark--sm {
  width: 16px;
  height: 16px;
  color: var(--color-sub);
}

.mark-crop {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.mark-dot {
  fill: var(--color-accent);
}

/* 한글이 섞여 12px(--text-xs) — 11px 은 라틴·숫자 모노 라벨에만 쓴다(DESIGN.md 서체 규칙). */
.slug {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--spacing) * 2);
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-sub);
  font-variant-numeric: tabular-nums;
}

.bar {
  flex: none;
  width: auto;
  height: 12px;
  margin-left: auto;
  align-self: flex-start;
  margin-top: 6px;
}

.bar-100 {
  fill: var(--color-ink);
}

.bar-60 {
  fill: var(--color-tint-60);
}

.bar-30 {
  fill: var(--color-tint-30);
}

.bar-accent {
  fill: var(--color-accent);
}

/* 화면에서 가장 큰 것 — 이것 하나. */
.wordmark {
  margin-top: calc(var(--spacing) * 7);
  font-family: var(--font-display);
  font-size: var(--text-wordmark);
  line-height: var(--text-wordmark--line-height);
  font-weight: 800;
  letter-spacing: var(--tracking-wordmark);
}

/* 재단 표시를 두르는 상자. 위는 대문자 높이 가까이, 아래는 g 의 내림 획까지 들어오게 행간을 잡는다. */
.crop {
  position: relative;
  display: inline-block;
  padding: 0.02em 0.06em 0.07em 0.02em;
  line-height: 1;
}

/* 상자를 대문자 높이~기준선으로 잘라 재단 표시가 글자에서 위아래 같은 거리에 서게 한다.
   아래는 g 의 내림 획(≈0.2em)만큼 더 연다. text-box 를 모르는 브라우저는 위의 행간 상자 — 조금 넓을 뿐이다. */
@supports (text-box: trim-both cap alphabetic) {
  .crop {
    text-box: trim-both cap alphabetic;
    padding: 0.07em 0.06em 0.27em 0.03em;
  }

  .crop--figures {
    padding-bottom: 0.07em;
  }
}

.crop-mark {
  position: absolute;
  width: 0.14em;
  height: 0.14em;
  min-width: 10px;
  min-height: 10px;
  overflow: visible;
  color: var(--color-ink);
}

.crop-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--line-w-mark);
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.crop-mark--tl {
  top: calc(-1 * var(--spacing-mark-gap));
  left: calc(-1 * var(--spacing-mark-gap));
}

.crop-mark--tr {
  top: calc(-1 * var(--spacing-mark-gap));
  right: calc(-1 * var(--spacing-mark-gap));
}

.crop-mark--br {
  right: calc(-1 * var(--spacing-mark-gap));
  bottom: calc(-1 * var(--spacing-mark-gap));
}

.crop-mark--bl {
  bottom: calc(-1 * var(--spacing-mark-gap));
  left: calc(-1 * var(--spacing-mark-gap));
}

/* Line drawing — 홈 로드 때 한 번(320ms). 네 선 동시, stagger 없음. 기본 상태가 "그려진 것" 이라
   애니메이션이 없거나 꺼져도 표시는 온전하다. */
[data-draw] .crop-mark path {
  stroke-dasharray: 1;
  animation: crop-draw var(--duration-draw) var(--ease-draw) both;
}

@keyframes crop-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

a.crop:hover {
  color: var(--color-ink);
}

a.crop:focus-visible {
  outline-offset: calc(var(--spacing-mark-gap) + 4px);
}

.purpose {
  margin-top: calc(var(--spacing) * 6);
  max-width: 42ch;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  color: var(--color-prose);
}

/* 카테고리 페이지 — 워드마크 아래, 목적 한 줄 자리에 */
.page-title {
  margin-top: calc(var(--spacing) * 6);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
}

.page-sub {
  margin-top: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-sub);
}

/* ── 카테고리 줄 (생산 라인) ──────────────────────────────────────────────── */

.lines {
  margin-top: calc(var(--spacing) * 8);
}

.lines ul {
  display: flex;
  gap: 0 calc(var(--spacing) * 6);
  border-block: var(--line-w) solid var(--color-line);
}

.lines a {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: 48px;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-prose);
  transition: color var(--default-transition-duration) var(--ease-out-quart);
}

.lines a.is-empty {
  color: var(--color-sub);
  font-weight: 400;
}

.lines a:hover,
.lines a[aria-current="page"] {
  color: var(--color-ink);
}

/* 현재 라인 — 먹 2px 밑선이 위아래 선 중 아래 선 위에 겹친다. */
.lines a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--line-w-current);
  background: var(--color-ink);
}

.lines .n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1;
  color: var(--color-sub);
  font-variant-numeric: tabular-nums;
}

/* ── 필터 바 (gallery.js 가 켠다) ─────────────────────────────────────────── */

.filters {
  display: grid;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 3);
}

.filters-head {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
}

.panel-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
}

.group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}

.group-label {
  margin-right: calc(var(--spacing) * 1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-sub);
}

.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: 32px;
  margin: 0;
  padding: 0 calc(var(--spacing) * 3);
  border: var(--line-w) solid var(--color-ink);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: background-color var(--default-transition-duration) var(--ease-out-quart);
}

.chip:hover {
  background: var(--color-plate);
}

.chip[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.chip .n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-sub);
  font-variant-numeric: tabular-nums;
}

.chip[aria-pressed="true"] .n {
  color: var(--color-on-ink);
}

/* 필터 토글의 펼침 표시 — 아이콘 대신 교정 부호처럼 +/−. 상태는 aria-expanded 가 읽어 주므로 글자는 읽히지 않게. */
.chip--toggle::after {
  content: "+" / "";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.chip--toggle[aria-expanded="true"]::after {
  content: "\2212" / "";
}

/* 정렬 — 칩 셋을 붙인 세그먼트. 꼬리의 방문 통계 스위치(.optout-opts)도 같은 모양이다 —
   클래스를 따로 두는 것은 .sort 가 필터 바의 표지라서다(shoot-gallery A 가 .sort 로 필터 바를 찾는다). */
.sort,
.optout-opts {
  display: inline-flex;
}

.sort .chip + .chip,
.optout-opts .chip + .chip {
  margin-left: calc(-1 * var(--line-w));
}

.count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-sub);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.clear,
.text-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: var(--line-w);
  cursor: pointer;
  touch-action: manipulation;
}

.clear {
  min-height: 32px;
}

.clear:hover,
.text-link:hover {
  color: var(--color-accent);
}

/* 1100 미만 — 한 줄로 접는다: [필터 n] [최신|이름|섞기] 결과 수. 칩 묶음은 아래로 펼쳐진다(accordion). */
@media (max-width: 1099px) {
  .chip,
  .clear {
    min-height: var(--spacing-touch);
  }

  .count {
    margin-left: auto;
  }

  .panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows var(--duration-accordion) var(--ease-out-quart),
      visibility 0s linear var(--duration-accordion);
  }

  .filters[data-open="true"] .panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
      grid-template-rows var(--duration-accordion) var(--ease-out-quart),
      visibility 0s;
  }

  /* 좌우로 6px 넓혀 자른다 — 첫 칸 칩의 포커스 링(2px + 간격 3px)이 잘리지 않게. 내용 위치는 그대로. */
  .panel-clip {
    min-height: 0;
    overflow: hidden;
    margin-inline: -6px;
    padding-inline: 6px;
  }

  .filters {
    gap: 0;
  }

  .panel-body {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3) calc(var(--spacing) * 1.5);
  }
}

/* 1100 이상 — 칩 묶음이 왼쪽에 펼쳐져 있고, 정렬·결과 수는 오른쪽 끝. 토글은 없다. */
@media (min-width: 1100px) {
  /* 목적 한 줄은 한 문장이다 — 넓은 화면에서는 정말 한 줄로(42ch 에서 두 줄로 꺾이면 첫 화면 29px 를 잃는다). */
  .purpose {
    max-width: 64ch;
  }

  .filters {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .filters-head {
    grid-column: 2;
    grid-row: 1;
  }

  .panel {
    grid-column: 1;
    grid-row: 1;
  }

  .chip--toggle {
    display: none;
  }
}

/* ── 격자 · 카드 ──────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-gutter);
  margin-top: calc(var(--spacing) * 6);
}

/* 필터 바가 켜져 있으면 그 바의 아래 여백이 간격이다. 없으면(JS 꺼짐 · 카드 1장 이하) 카테고리 줄에서 24px. */
.filters:not([hidden]) + .grid,
.filters:not([hidden]) ~ .empty {
  margin-top: calc(var(--spacing) * 1);
}

@media (min-width: 680px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 대지에 올린 견본 한 장 — 흰 대지 + 1px 선. hover 는 선 색만 바뀐다(들림·그림자·확대 없음). */
.card {
  position: relative; /* 이름 링크가 카드 전체를 덮는다 (.name a::after) */
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--spacing-plate);
  background: var(--color-plate);
  border: var(--line-w) solid var(--color-line);
  transition: border-color var(--default-transition-duration) var(--ease-out-quart);
}

.card:hover,
.card:focus-within {
  border-color: var(--color-ink);
}

.thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-paper);
}

/* 줄1 — 번호 · 카테고리·분야 · 날짜 (모노, 라틴·숫자라 11px) */
.spec {
  display: flex;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--text-2xs--line-height);
  color: var(--color-sub);
  font-variant-numeric: tabular-nums;
}

.spec .no {
  color: var(--color-ink);
  transition: color var(--default-transition-duration) var(--ease-out-quart);
}

.card:hover .no,
.card:focus-within .no {
  color: var(--color-accent);
}

.spec time {
  margin-left: auto;
}

.name {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
}

.name .latin {
  display: block;
  margin-top: calc(var(--spacing) * 0.5);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-sub);
}

/* 카드 전체가 클릭 영역이다. 클릭 가능한 div 를 만들지 않으려고 진짜 링크를 늘린다 —
   접근 이름은 템플릿 이름 그대로이고, 포커스 링도 카드 전체에 생긴다. */
.name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.name a:focus-visible {
  outline: none;
}

.name a:focus-visible::after {
  outline: var(--line-w-current) solid var(--color-accent);
  outline-offset: 3px;
}

.tagline {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-prose);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 줄5 — 팔레트 칩 4 + 서체 이름. 흰 칩이 대지에 묻히지 않게 1px 선. */
.specimen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 3);
}

.swatches {
  display: flex;
  gap: calc(var(--spacing) * 1);
}

.swatches > span {
  width: var(--spacing-swatch);
  height: var(--spacing-swatch);
  border: var(--line-w) solid var(--color-line);
  background: var(--swatch);
}

.type {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--text-2xs--line-height);
  color: var(--color-sub);
}

/* 줄6 — 배지 + 출처. 카드 높이가 달라도 바닥에 붙는다. */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-top: auto;
  padding-top: calc(var(--spacing) * 3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--text-2xs--line-height);
  color: var(--color-sub);
}

.source {
  margin-left: auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 calc(var(--spacing) * 2);
  border: var(--line-w) dashed var(--color-sub);
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-sub);
  white-space: nowrap;
}

.badge--candidate {
  border-style: solid;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.badge--promoted {
  border-style: solid;
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
}


/* ── 빈 상태 ──────────────────────────────────────────────────────────────── */

.empty {
  margin-top: calc(var(--spacing) * 6);
  padding: var(--spacing-block) calc(var(--spacing) * 6);
  border: var(--line-w) dashed var(--color-line);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  color: var(--color-prose);
  text-align: center;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
  margin-top: calc(var(--spacing) * 6);
}

/* ── 소개 (홈만) ── 격자 아래, 꼬리 앞 ─────────────────────────────────────── */

.about {
  max-width: 64ch;
  margin-top: var(--spacing-block);
  padding-top: calc(var(--spacing) * 6);
  border-top: var(--line-w) solid var(--color-line);
}

.about h2 {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
}

.about p {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  color: var(--color-prose);
}

/* ── 꼬리 ─────────────────────────────────────────────────────────────────── */

.colophon {
  margin-top: var(--spacing-block);
  padding-bottom: calc(var(--spacing) * 12);
}

.colophon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  border-top: var(--line-w) solid var(--color-line);
  padding-top: calc(var(--spacing) * 6);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-sub);
}

.colophon-id {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-mono);
}

.colophon a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: var(--line-w);
}

.colophon a:hover {
  color: var(--color-accent);
}

/* ── 404 — 교정쇄에서 빠진 면 ─────────────────────────────────────────────── */

.numeral {
  display: block;
  margin-top: calc(var(--spacing) * 12);
  font-family: var(--font-display);
  font-size: var(--text-404);
  line-height: var(--text-404--line-height);
  font-weight: 800;
  letter-spacing: var(--tracking-wordmark);
}

.missing {
  display: block;
  margin-top: calc(var(--spacing) * 10);
  font-weight: 400;
  max-width: 42ch;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  color: var(--color-prose);
}

.missing-actions {
  margin-top: calc(var(--spacing) * 6);
}

.missing-actions .text-link {
  font-size: var(--text-base);
}

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

@media (max-width: 679px) {
  .wordmark {
    margin-top: calc(var(--spacing) * 6);
  }

  .purpose {
    margin-top: calc(var(--spacing) * 5);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }

  .page-title {
    margin-top: calc(var(--spacing) * 5);
  }

  .lines {
    margin-top: calc(var(--spacing) * 6);
  }

  /* 카테고리 줄은 가로로 민다(sticky 아님). 오른쪽 끝 24px 을 흐리게 해 더 있다는 것을 알린다 —
     색이 아니라 마스크라 토큰 밖 색이 생기지 않는다. */
  .lines ul {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-right: calc(var(--spacing) * 6);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }

  .lines ul::-webkit-scrollbar {
    display: none;
  }

  .lines a {
    min-height: var(--spacing-touch);
  }

  /* 가로 스크롤 상자가 바깥 링을 자른다 — 좁은 화면에서는 링을 안쪽으로 */
  .lines a:focus-visible {
    outline-offset: -2px;
  }

  .colophon-row {
    flex-direction: column;
  }

  /* 글 속 링크는 줄 높이를 안 바꾸고 누를 자리만 44px 로 넓힌다(인라인 요소의 세로 여백은 줄 상자에 안 든다). */
  .colophon a {
    padding-block: 15px;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--spacing-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-draw] .crop-mark path {
    animation: none;
  }

  .panel,
  .filters[data-open="true"] .panel {
    transition: none;
  }
}

/* ── 방문 통계 고지 + 끄기 스위치 (ADR-050 · analytics.md 6-1) ──────────────────
   꼬리 아래 작은 글자 한 단. 액자의 일부라 강조색·면을 쓰지 않는다 — 스위치는 정렬과 같은 칩 세그먼트. */
.notice {
  margin-top: calc(var(--spacing) * 6);
  max-width: 72ch;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-sub);
}

.notice-title {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 600;
  color: var(--color-ink);
}

.notice p {
  margin: calc(var(--spacing) * 1) 0 0;
}

.notice code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

.optout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 3);
}

.optout-label {
  color: var(--color-ink);
}

/* ── 개인정보처리방침 (site/privacy/ — 생성물, 2026-10-02) ──────────────────────
   읽는 쪽이라 카드 격자 대신 한 단 글. 절마다 위 대지선 + 모노 번호(교정쇄의 쪽 번호 결). 강조색·면은 쓰지 않는다. */
/* 폭은 .wrap 그대로(머리·꼬리와 같은 왼쪽 선) — 줄 길이만 절에서 72ch 로 묶는다 */
.privacy {
  margin-top: calc(var(--spacing) * 12);
}

.privacy-sec {
  max-width: 72ch;
  padding-top: calc(var(--spacing) * 6);
  margin-top: calc(var(--spacing) * 8);
  border-top: var(--line-w) solid var(--color-line);
}

.privacy-sec:first-child {
  margin-top: 0;
}

.privacy-sec h2 {
  display: flex;
  gap: calc(var(--spacing) * 3);
  align-items: baseline;
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: 600;
  color: var(--color-ink);
}

.privacy-no {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--text-2xs--line-height);
  font-weight: 400;
  color: var(--color-sub);
}

.privacy-sec p,
.privacy-sec li {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  color: var(--color-prose);
}

.privacy-sec p {
  margin: calc(var(--spacing) * 3) 0 0;
}

.privacy-sec ul {
  margin: calc(var(--spacing) * 3) 0 0;
  padding-left: calc(var(--spacing) * 6);
}

.privacy-sec a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: var(--line-w);
}