/* hyunsu-blog — 쪽 스타일. 값은 tokens.css 의 var() 만(raw 색 0). 중단점 45rem(720) · 64rem(1024) 은 리터럴 — 미디어 쿼리 안에서는 var 를 못 쓴다.
   클래스는 BEM 풍 = 승급 때 컴포넌트 이름(wireframe 12절). `.prose` 아래 맨 태그(p·h2·ul·blockquote·code…)는 마크다운 렌더러가 내는 모양 그대로 칠한다.
   원칙 3(DESIGN): 강조색은 글자와 선으로만 — 면(fill)으로 쓰는 규칙이 이 파일에 0 이어야 한다. */

/* ── 리셋 — :where() 로 특이도 0 (lessons #49) ─────────────────────────── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre) { margin: 0; }
:where(ul, ol) { padding: 0; }
:where(ul[class], ol[class]) { list-style: none; }
:where(img, svg) { display: block; max-width: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius-none); padding: 0; cursor: pointer; }
:where(a) { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--spacing-8); /* 앵커 여백은 여기 한 곳 — 요소 scroll-margin 과 더하지 않는다(lessons #90) */
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  word-break: keep-all; /* 한글 어절 지키기(lessons #85) */
  overflow-wrap: break-word;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; outline: none; }
::selection { background: var(--color-selection); color: var(--color-ink); }

/* 포커스 링 = 선(2px 바탕 틈 + 2px 강조) — 링크는 outline, 상자 부품은 --shadow-focus */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
:where(button, .chip, summary, .how-link__a, .table, .code__body):focus-visible { outline: none; box-shadow: var(--shadow-focus); }

a, button, .chip, .toc__link {
  transition-property: color, background-color, border-color, text-decoration-color, text-decoration-thickness;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--ease-out);
}
/* 테마 전환에는 색 전환 애니메이션을 두지 않는다(DESIGN 모션 표) — main.js 가 바꾸는 한 프레임 동안만 붙인다 */
.is-theme-switching *, .is-theme-switching *::before, .is-theme-switching *::after { transition: none !important; }

.skip-link {
  position: absolute;
  left: var(--spacing-gutter);
  top: var(--spacing-2);
  z-index: 10;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.arrow { font-family: var(--font-sans); } /* JetBrains Mono 에는 화살표가 없다 — 모노 줄 안에서도 sans 로 */

/* ── 틀 — 한 폭(2회차, wireframe 3-3): 헤더 안쪽 · <main> · 꼬리 안쪽이 이 열 하나. 넓은 화면에서 늘어나는 것은 열 밖 여백뿐 ── */
.page { width: min(100% - 2 * var(--spacing-gutter), var(--spacing-page)); margin-inline: auto; }

/* ── 러닝 헤더 — 이름 + 카테고리만. 띠·바탕 없음, 아래 선은 열(.page)의 border 라 열 폭에서 끝난다 ── */
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: calc(var(--spacing-touch) + var(--spacing-4)); /* 60 = 내비 44 + 위아래 8 */
  border-bottom: 1px solid var(--color-line);
}
.masthead__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-touch);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  white-space: nowrap;
}
.masthead__nav { display: flex; gap: var(--spacing-1); margin-inline-end: -8px; /* 마지막 항목의 글자 끝 = 열 오른 끝 */ }
.masthead__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-touch);
  min-height: var(--spacing-touch);
  padding-inline: 8px; /* 리터럴 — 폭 표(§3-1 166px)가 이 값으로 계산됐다 */
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-ink-soft);
  white-space: nowrap;
  text-underline-offset: 6px;
}
.masthead__link[aria-current="page"] { color: var(--color-ink); text-decoration-line: underline; text-decoration-thickness: 2px; }
@media (min-width: 45rem) {
  .masthead__in { min-height: calc(var(--spacing-16) + var(--spacing-2)); } /* 72 */
}

/* ── 러닝 꼬리 — 1줄 링크 + 테마 토글 · 2줄 man 꼬리 줄. 위 선도 열 폭 ── */
.colophon { margin-top: var(--spacing-section); padding-bottom: calc(var(--spacing-12) + env(safe-area-inset-bottom)); }
.colophon__in { border-top: 1px solid var(--color-line); }
.colophon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-2); /* RSS 상자가 44 로 넓어져 글자 사이는 ≈ 24(§3-2) */
  padding-top: var(--spacing-3);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.colophon__link {
  display: inline-flex;
  align-items: center;
  min-width: var(--spacing-touch); /* RSS 세 글자도 44 — 글자는 열 왼 끝에서 시작 */
  min-height: var(--spacing-touch);
  color: var(--color-ink-soft);
  text-underline-offset: 4px;
}
.colophon__man {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-top: var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
@media (min-width: 45rem) {
  .colophon__man { flex-direction: row; justify-content: space-between; gap: var(--spacing-6); }
}

/* 테마 토글 — 아이콘 하나(§3-4). 그림 = 지금 테마 · 강조색·모션 없음 · 교체는 속성 선택자가(JS 는 data-theme·aria-pressed 만) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-touch);
  height: var(--spacing-touch);
  margin-inline-start: auto;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink-soft);
}
.theme-toggle__icon { width: var(--spacing-icon); height: var(--spacing-icon); }
.theme-toggle__icon--sun,
:root[data-theme="light"] .theme-toggle__icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: block; }

/* ── 작은 부품: 분류 표지 · AI 칩 · 예시 라벨 · 라벨 ─────────────────── */
.kind-mark {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: var(--spacing-2);
  vertical-align: 0.06em;
}
.kind-mark--note { background: var(--color-ink); }
.kind-mark--brief {
  width: 7px;
  height: 7px;
  margin-inline: 1px calc(var(--spacing-2) + 1px);
  border: 1.5px solid var(--color-ink);
  transform: rotate(45deg);
}
.kind-mark--lg { width: 10px; height: 10px; margin-right: var(--spacing-3); }
.kind-mark--brief.kind-mark--lg { width: 9px; height: 9px; margin-inline: 1px calc(var(--spacing-3) + 1px); }
.kind-mark--xl { width: 14px; height: 14px; margin-right: var(--spacing-4); }
.kind-mark--brief.kind-mark--xl { width: 12px; height: 12px; border-width: 2px; margin-inline: 2px calc(var(--spacing-4) + 2px); }

.ai-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 1px 6px;
  border: 1px solid var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.example-label {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: var(--spacing-2);
  border: 1px dashed var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1;
  letter-spacing: var(--tracking-meta);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.part-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
/* 탐색 링크 한 벌 — ink + 선 밑줄, hover 에 강조 밑줄(글자는 강조색 아님) */
.stream__all a,
.listing__other a,
.notfound__way,
.feeds__link,
.tag-filter__status a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: var(--spacing-touch);
  min-height: var(--spacing-touch);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--color-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── 홈: 사이트 머리(2회차 H-C) — h1 · 한 문장 · 사이트 표제란(글 머리와 같은 .titleblock) ── */
.site-head { padding-top: var(--spacing-8); }
.site-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-display);
}
.site-head__lead {
  margin-top: var(--spacing-3);
  max-width: var(--spacing-measure);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-ink-soft);
}
.site-head > .titleblock { margin-top: var(--spacing-5); }
@media (min-width: 45rem) {
  .site-head { padding-top: var(--spacing-12); }
  .site-head > .titleblock { margin-top: var(--spacing-6); }
}

/* ── 홈: 두 흐름 — 첫 행 = 그 흐름의 최신(다른 행과 같은 부품·같은 크기) ── */
.streams { display: grid; gap: var(--spacing-12); margin-top: var(--spacing-10); }
@media (min-width: 45rem) {
  .streams { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-10); margin-top: var(--spacing-12); }
}
@media (min-width: 64rem) { .streams { column-gap: var(--spacing-12); margin-top: var(--spacing-16); } }
.stream { min-width: 0; outline: none; }
.stream__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-ink);
}
.stream__title {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  letter-spacing: var(--tracking-tight);
}
.stream__count { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }
.stream__all { margin-top: var(--spacing-3); }

/* ── 흐름 행 (홈·목록·관련 글·404 공통) ─────────────────────────────── */
.stream-row { position: relative; padding-block: var(--spacing-4); border-bottom: 1px solid var(--color-line); }
.stream-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1) var(--spacing-3);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.stream-row__id { position: relative; display: inline-flex; align-items: center; color: var(--color-ink-soft); }
.stream-row__end { display: inline-flex; align-items: center; gap: var(--spacing-3); margin-left: auto; }
.stream-row__title {
  margin-top: var(--spacing-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}
/* 제목 링크가 행 전체를 덮는다(::after). 링크 상자는 위아래 8px 넓혀 한 줄 제목도 44px — 자리는 음수 여백으로 되돌린다 */
.stream-row__title a {
  display: block;
  padding-block: 0.625rem; /* 18px × 1.4 + 20 = 45 — 한 줄 제목도 44 넘게 */
  margin-block: -0.625rem;
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.stream-row__title a::after { content: ""; position: absolute; inset: 0; }
.stream-row__title a:focus-visible { text-decoration-line: underline; outline-offset: -2px; }
.stream-row__summary {
  display: -webkit-box;
  margin-top: var(--spacing-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-soft);
}

/* ── 홈: 태그 상위 10 · 구독 목록(소개 쪽) ─────────────────────────────── */
.home-tags { margin-top: var(--spacing-section); padding-top: var(--spacing-4); border-top: 1px solid var(--color-line); }
.tag-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-2);
  margin-top: var(--spacing-1);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.tag-line__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  min-width: var(--spacing-touch);
  min-height: var(--spacing-touch);
  color: var(--color-ink-soft);
  text-underline-offset: 4px;
}
.tag-line__n { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }
.tag-line__dot { color: var(--color-muted); }

.feeds { display: grid; margin-top: var(--spacing-2); border-top: 1px solid var(--color-line); }
.feeds__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--spacing-4);
  border-bottom: 1px solid var(--color-line);
}
.feeds__url { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }

/* ── 목록 (노트 · AI 브리핑) ─────────────────────────────────────────── */
.listing { padding-top: var(--spacing-8); }
.category-head { display: grid; gap: var(--spacing-3); }
.category-head__title {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-display);
}
.category-head__intro { max-width: var(--spacing-measure); color: var(--color-ink-soft); }
.category-head__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-muted);
}
.category-head__meta a { display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--spacing-touch); color: var(--color-ink-soft); text-underline-offset: 4px; }
.category-head__rules { margin-top: var(--spacing-3); padding-top: var(--spacing-4); border-top: 1px solid var(--color-line); }
.principles { display: grid; gap: var(--spacing-2); margin-top: var(--spacing-3); max-width: var(--spacing-measure); }
.principles__item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--spacing-2);
  font-size: var(--text-h4);
  line-height: 1.6;
}
.principles__no { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }

.tag-filter { display: grid; gap: var(--spacing-2); margin-top: var(--spacing-8); }
.tag-filter__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
.tag-filter__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--spacing-touch);
  padding-inline: var(--spacing-3);
  border: 1px solid var(--color-line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: 1;
  color: var(--color-ink-soft);
}
.chip__n { color: var(--color-muted); }
/* 선택 칩 = ink 면 + 바탕 글자 — 강조색 면이 아니다(lessons #52) */
.chip[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }
.chip[aria-current="true"] .chip__n { color: var(--color-bg); }
@media (min-width: 45rem) { .chip { min-height: 36px; } }
.tag-filter__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-soft);
}
.tag-filter__status a { font-family: var(--font-sans); }

.year { margin-top: var(--spacing-8); }
.year__title {
  padding-bottom: var(--spacing-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--color-ink);
}
.listing__empty {
  margin-top: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-line-strong);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-soft);
}
.listing__empty a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; }
.listing__other { margin-top: var(--spacing-8); }

@media (min-width: 64rem) {
  .listing {
    display: grid;
    grid-template-columns: var(--spacing-rail) minmax(0, var(--spacing-article));
    column-gap: var(--spacing-rail-gap);
    padding-top: var(--spacing-16);
  }
  .listing > * { grid-column: 2; }
  .listing > .year { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .year__title { grid-column: 1; align-self: start; padding-top: var(--spacing-3); border-bottom: 0; border-top: 1px solid var(--color-ink); }
  .year__rows { grid-column: 2; border-top: 1px solid var(--color-ink); }
}

/* ── 글 쪽 격자 · 레일 · 목차 ────────────────────────────────────────── */
.post { padding-top: var(--spacing-6); }
.post__rail { display: none; }
.post__article { min-width: 0; }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-2);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-muted);
}
.crumbs a { display: inline-flex; align-items: center; min-height: var(--spacing-touch); color: var(--color-ink-soft); text-underline-offset: 4px; }
.crumbs__sep { font-family: var(--font-mono); color: var(--color-muted); }

.toc { margin-top: var(--spacing-8); }
.toc__label {
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
.toc__list { display: grid; margin-top: var(--spacing-2); }
.toc__link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  min-height: var(--spacing-8);
  padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-3);
  border-left: 2px solid transparent;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--color-ink-soft);
}
.toc__no { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }
.toc__link[aria-current="true"],
.toc__link[aria-current="true"] .toc__no { color: var(--color-accent); }
.toc__link[aria-current="true"] { border-left-color: var(--color-accent); }

@media (min-width: 64rem) {
  .post {
    display: grid;
    grid-template-columns: var(--spacing-rail) minmax(0, var(--spacing-article));
    column-gap: var(--spacing-rail-gap);
    padding-top: var(--spacing-16);
  }
  .post__rail { display: block; min-width: 0; }
  .post__rail .crumbs a { min-height: 0; }
  .post__rail .example-label { margin-top: var(--spacing-3); }
  .post-head__crumbs, .toc-fold { display: none; }
}
/* 붙는 목차의 높이 제한은 붙는 조건 안에만 — 안 붙는 뷰포트에서 레일 안 스크롤이 생기지 않게(lessons #91) */
@media (min-width: 64rem) and (min-height: 37.5rem) {
  .toc {
    position: sticky;
    top: var(--spacing-8);
    max-height: calc(100svh - var(--spacing-16));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* ── 글 머리 ─────────────────────────────────────────────────────────── */
.post-head { display: grid; }
.post-head__crumbs { margin-bottom: var(--spacing-2); }
.post-head__crumbs .example-label { margin-left: var(--spacing-1); }
.post-head__series {
  margin-bottom: var(--spacing-2);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
.post-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.post-head > .titleblock { margin-top: var(--spacing-6); }

/* ── 표제란 (이 템플릿만의 한 가지) — 1px 격자: 틈(gap) 1px 에 선 색이 비친다 ── */
.titleblock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
@media (min-width: 45rem) { .titleblock { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.titleblock__cell {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  background: var(--color-bg);
}
.titleblock__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
.titleblock__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.titleblock__kind { margin-right: 0.45em; font-family: var(--font-sans); font-weight: 600; }
.titleblock__none { color: var(--color-muted); }
.titleblock__cell--byline {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--spacing-4);
}
.titleblock__mark { font-size: var(--text-small); line-height: var(--text-small--line-height); font-weight: 600; color: var(--color-ink); }
.titleblock__hands { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }
/* "이 글을 만든 방법" — 같은 격자를 2열(라벨 | 값) 4행으로 편다 */
.titleblock.titleblock--how { grid-template-columns: minmax(0, 1fr); }
.titleblock--how .titleblock__cell { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; column-gap: var(--spacing-3); }
@media (min-width: 45rem) { .titleblock--how .titleblock__cell { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.titleblock__text { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink); }
/* 사이트 표제란(홈) — 분류 두 칸·쓰는 사람 칸은 칸 전체가 누를 곳(링크 ::after 가 덮는다) · hover = 값 밑줄, 면 없음 */
.titleblock__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-touch); /* 링크 상자 자체도 44 — 자리는 음수 여백으로 되돌린다(값 줄 1.45em) */
  margin-block: calc((var(--spacing-touch) - 1.45em) / -2);
  color: var(--color-ink);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.titleblock__link::after { content: ""; position: absolute; inset: 0; }
.titleblock__link:focus-visible { outline: none; }
.titleblock__link:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.titleblock--site .titleblock__cell--link { min-height: 4rem; } /* 64 — 누를 곳 44 넘게 */
.titleblock__more { flex: none; }
.titleblock__principle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  min-width: var(--spacing-touch);
  min-height: var(--spacing-touch);
  margin-block: calc((var(--spacing-touch) - var(--text-small--line-height) * 1em) / -2); /* 44 상자, 자리는 한 줄 높이 */
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-accent); /* 홈 첫 화면의 유일한 강조색 — 글자 */
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── 글 머리 부속: 태그 · 요약 상자 · 방법 앵커 · 접힌 목차 ──────────── */
.post-tags { display: flex; flex-wrap: wrap; column-gap: var(--spacing-4); margin-top: var(--spacing-2); }
.post-tags__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-touch);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-ink-soft);
  text-underline-offset: 4px;
}
@media (min-width: 64rem) { .post-tags__link { min-height: var(--spacing-8); } }

.summary-box { margin-top: var(--spacing-4); padding: var(--spacing-4) var(--spacing-5); background: var(--color-panel); }
@media (min-width: 45rem) { .summary-box { padding: var(--spacing-5) var(--spacing-6); } }
.summary-box__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
.summary-box__text {
  margin-top: var(--spacing-2);
  max-width: var(--spacing-measure);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-ink);
}

.how-link { margin-top: var(--spacing-3); }
.how-link__a,
.toc-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  min-height: var(--spacing-touch);
  padding-inline: var(--spacing-4);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 600;
  color: var(--color-ink);
}
.how-link__a { border: 1px solid var(--color-line-strong); }
/* 셰브런 = 테두리 두 변 회전(글리프 아님, DESIGN 글리프 표) */
.how-link__a::after,
.toc-fold__summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.toc-fold { margin-top: var(--spacing-3); border: 1px solid var(--color-line-strong); }
.toc-fold__summary { cursor: pointer; list-style: none; }
.toc-fold__summary::-webkit-details-marker { display: none; }
.toc-fold[open] > .toc-fold__summary::after { transform: translateY(2px) rotate(-135deg); }
.toc-fold__list { display: grid; padding: var(--spacing-1) var(--spacing-4) var(--spacing-2); border-top: 1px solid var(--color-line); }
.toc-fold__link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  min-height: var(--spacing-touch);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--color-ink-soft);
}

/* ── 본문 (.prose) — 산문은 29em, 코드·표·그림·h2 선은 글 칸 전폭 ────── */
.prose { margin-top: var(--spacing-10); font-size: var(--text-body); line-height: var(--text-body--line-height); }
.prose > :where(p, ul, ol) { margin-block: 0 1em; }
.prose > :where(p, ul:not([class]), ol:not([class]), .quote, .callout, .checklist, .principles) { max-width: var(--spacing-measure); }
.prose > p,
.prose li,
.callout__text,
.summary-box__text { overflow-wrap: anywhere; } /* 긴 URL 대비 — keep-all 과 짝(B-01) */
.prose strong { font-weight: 700; }
.prose em { font-style: italic; } /* Pretendard 에 italic 이 없어 합성 — 굵게보다 약한 강조로만 */
.prose del { color: var(--color-muted); text-decoration-line: line-through; }
.prose a:not([class]),
.summary-box a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:not([class]):focus-visible { text-decoration-thickness: 2px; }

.prose h2 {
  position: relative;
  margin-block: var(--spacing-16) var(--spacing-3);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.heading-anchor {
  display: block;
  width: fit-content;
  margin-bottom: var(--spacing-1);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 400;
  line-height: var(--text-meta--line-height);
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
  text-underline-offset: 4px;
}
@media (min-width: 64rem) {
  /* 걸린 절 번호 — 레일과 글 칸 사이 48px 틈에 오른쪽 정렬, 글 칸 왼 끝에서 12px */
  .heading-anchor {
    position: absolute;
    top: var(--spacing-4);
    right: calc(100% + var(--spacing-3));
    margin: 0;
    line-height: calc(var(--text-h2) * var(--text-h2--line-height));
  }
}
.prose h3 {
  margin-block: var(--spacing-10) var(--spacing-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  letter-spacing: var(--tracking-tight);
}
.prose h4 {
  margin-block: calc(var(--spacing-6) + var(--spacing-1)) var(--spacing-1);
  font-size: var(--text-h4);
  line-height: var(--text-h4--line-height);
  font-weight: 700;
}
.prose ul:not([class]) { padding-left: 1.4em; list-style: none; }
.prose ol:not([class]) { padding-left: 2.2em; list-style: none; counter-reset: li; }
.prose :where(ul:not([class]), ol:not([class])) > li { position: relative; }
.prose :where(ul:not([class]), ol:not([class])) > li + li { margin-top: 0.35em; }
.prose ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: calc(0.9em - 3px);
  width: 6px;
  height: 6px;
  background: var(--color-muted);
}
.prose ol:not([class]) > li { counter-increment: li; }
.prose ol:not([class]) > li::before {
  content: counter(li) ".";
  position: absolute;
  left: -2.2em;
  width: 1.6em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.875em;
  line-height: calc(var(--text-body--line-height) * 1em / 0.875);
  color: var(--color-muted);
}
.prose hr { margin-block: var(--spacing-12); border: 0; border-top: 1px dashed var(--color-line-strong); }

/* 인라인 코드 — 판 면, 테두리 없음. 판 위(요약·주의·표 짝수 줄)에서는 쪽 바탕으로 뒤집는다 */
code:not(.hljs) {
  padding: 0.1em 0.35em;
  background: var(--color-panel);
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--color-ink);
  overflow-wrap: normal;
  word-break: keep-all;
}
.summary-box code, .callout--warning code, .table tbody tr:nth-child(even) code { background: var(--color-bg); }

/* 체크리스트 — 읽기 전용. 상자·V 는 CSS 두 변 */
.checklist { display: grid; gap: 0.4em; margin-block: 0 1em; }
.checklist__item { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--spacing-3); align-items: start; }
.checklist__box {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: calc((var(--text-body--line-height) * 1em - 16px) / 2);
  border: 1.5px solid var(--color-line-strong);
}
.checklist__item.is-done .checklist__box { background: var(--color-ink); border-color: var(--color-ink); }
.checklist__item.is-done .checklist__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--color-bg);
  border-bottom: 2px solid var(--color-bg);
  transform: rotate(45deg);
}
.checklist__text { position: relative; min-width: 0; }
.checklist__item.is-done .checklist__text { color: var(--color-ink-soft); }

/* 인용 */
.quote { margin-block: var(--spacing-8); padding-left: var(--spacing-5); border-left: 2px solid var(--color-ink-soft); }
.quote blockquote { color: var(--color-ink-soft); }
.quote__source { margin-top: var(--spacing-2); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }

/* 콜아웃 — NOTE 네 변 1px · TIP 왼 3px 강조 선 · WARNING 판 면 + 왼 4px·위 1px ink + 반전 라벨(경고는 색이 아니라 무게) */
.callout { margin-block: var(--spacing-8); padding: var(--spacing-4) var(--spacing-5); }
.callout__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
.callout__text { margin-top: var(--spacing-2); font-size: var(--text-h4); line-height: 1.75; color: var(--color-ink); }
.callout--note { border: 1px solid var(--color-line); }
/* impeccable-disable-next-line side-tab: TIP 콜아웃의 왼 3px 강조 선은 wireframe 6절 컴포넌트 표가 정했다. 강조색은 선과 글자로만(원칙 3), GFM 알림 문법의 표지다 */
.callout--tip { border-left: 3px solid var(--color-accent); }
.callout--tip .callout__label { color: var(--color-accent); }
/* impeccable-disable-next-line side-tab: WARNING 은 색이 아니라 무게(왼 4px·위 1px ink 선 + 반전 라벨)로 경고한다 — wireframe 6절 컴포넌트 표 */
.callout--warning { background: var(--color-panel); border-left: 4px solid var(--color-ink); border-top: 1px solid var(--color-ink); }
.callout--warning .callout__label {
  display: inline-block;
  padding: 2px 6px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 700;
}

/* 코드 블록 — 우물 면 + 1px 선 · 머리 줄(언어 · 복사) · 가로 스크롤 */
.code { margin-block: var(--spacing-8); border: 1px solid var(--color-line); background: var(--color-code-bg); }
.code__head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: var(--spacing-touch);
  border-bottom: 1px solid var(--color-line);
}
.code__lang {
  display: inline-flex;
  align-items: center;
  padding-left: var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-meta);
  color: var(--color-code-gutter);
}
@media (min-width: 45rem) { .code__head { min-height: 36px; } }
.code__body {
  overflow-x: auto;
  padding: var(--spacing-4) var(--spacing-5);
  font-family: var(--font-mono);
  font-size: var(--text-code-sm);
  line-height: var(--text-code--line-height);
  color: var(--color-code-ink);
  white-space: pre;
  tab-size: 4;
  word-break: normal;
  overflow-wrap: normal;
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) transparent;
}
@media (min-width: 45rem) { .code__body { font-size: var(--text-code); } }
.code__body code { font: inherit; }
.code--numbered .code__body code { counter-reset: line; }
.code--numbered .code__line { counter-increment: line; }
.code--numbered .code__line::before {
  content: counter(line);
  display: inline-block;
  width: 2.5em;
  margin-right: 1em;
  text-align: right;
  color: var(--color-code-gutter);
  user-select: none;
}

/* 복사 버튼 — 복사 ↔ 복사됨 Crossfade 150ms(= 120ms × 1.25, reduced-motion 0) */
.copy-btn {
  display: inline-grid;
  place-items: center;
  min-width: var(--spacing-touch);
  min-height: var(--spacing-touch);
  padding-inline: var(--spacing-3);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-ink-soft);
}
.code__copy { min-height: 0; border-left: 1px solid var(--color-line-strong); }
.copy-btn__idle, .copy-btn__done { grid-area: 1 / 1; transition: opacity calc(var(--default-transition-duration) * 1.25) var(--ease-out); }
.copy-btn__done { opacity: 0; }
.copy-btn.is-done { color: var(--color-ink); border-color: var(--color-ink); }
.copy-btn.is-done .copy-btn__idle { opacity: 0; }
.copy-btn.is-done .copy-btn__done { opacity: 1; }

/* 하이라이트 — 정적 hljs-* 스팬 · 두 테마 4.5:1(DESIGN 코드 문법 표) · diff 는 글자색만(줄 면 없음) */
.hljs-keyword, .hljs-meta, .hljs-selector-tag { color: var(--color-code-keyword); }
.hljs-string, .hljs-regexp, .hljs-symbol { color: var(--color-code-string); }
.hljs-number, .hljs-literal { color: var(--color-code-number); }
.hljs-comment, .hljs-quote { color: var(--color-code-comment); font-style: normal; }
.hljs-title.function_, .hljs-section { color: var(--color-code-function); }
.hljs-type, .hljs-built_in, .hljs-title.class_ { color: var(--color-code-type); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-property, .hljs-params { color: var(--color-code-attr); }
.hljs-punctuation, .hljs-operator { color: var(--color-code-ink); }
.hljs-addition { color: var(--color-code-add); }
.hljs-deletion { color: var(--color-code-del); }

/* 표 — 머리 모노 12 · 짝수 줄 판 · 좁으면 제 안에서 가로 스크롤 */
.table { margin-block: var(--spacing-8); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-line-strong) transparent; }
.table table { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: var(--text-small--line-height); }
.table th, .table td { padding: 0.625rem 0.75rem; text-align: left; vertical-align: top; }
.table thead th {
  border-bottom: 1px solid var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
  white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--color-line); }
.table tbody tr:nth-child(even) { background: var(--color-panel); }
.table tbody th { font-weight: 600; white-space: nowrap; }
.table .is-num { font-family: var(--font-mono); font-size: var(--text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 그림 — 인라인 SVG 2벌(≥720 가로 · <720 세로). 도형 색은 여기서 토큰으로 */
.figure { margin-block: var(--spacing-10); }
.figure__art { width: 100%; height: auto; border: 1px solid var(--color-line); }
.figure__art--wide { display: none; }
@media (min-width: 45rem) {
  .figure__art--wide { display: block; }
  .figure__art--tall { display: none; }
}
.figure__caption { margin-top: var(--spacing-2); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }
.figure__no { margin-right: 0.3em; font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-ink); }
.fig-frame { fill: none; stroke: var(--color-line); stroke-width: 1; }
.fig-box { stroke-width: 1.5; }
.fig-box--on { fill: none; stroke: var(--color-ink); }
.fig-box--down { stroke: var(--color-line-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.fig-hatch { stroke: var(--color-line-strong); stroke-width: 1; }
.fig-name, .fig-state, .fig-flag {
  paint-order: stroke;
  stroke: var(--color-bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.fig-name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; fill: var(--color-ink); }
.fig-box--down ~ .fig-name { fill: var(--color-ink-soft); }
.fig-state { font-family: var(--font-mono); font-size: 12px; fill: var(--color-muted); }
.fig-cmd { font-family: var(--font-mono); font-size: 13px; fill: var(--color-accent); }
.fig-sub { font-family: var(--font-sans); font-size: 14px; fill: var(--color-ink-soft); }
.fig-label { font-family: var(--font-mono); font-size: 12px; fill: var(--color-muted); }
.fig-flag { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--color-ink); } /* 한글 문장 — 모노로 두면 빈칸이 0.6em 이라 벌어진다 */
.fig-bracket { fill: none; stroke: var(--color-ink); stroke-width: 1; }

/* ── 글 꼬리: 정정 · 만든 방법 · 참고 자료 · 관련 글 · 이전/다음 ─────── */
.post-part__title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  color: var(--color-muted);
}
.erratum { margin-top: var(--spacing-16); padding-top: var(--spacing-3); border-top: 1px solid var(--color-line); }
.erratum__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--spacing-3);
  margin-top: var(--spacing-2);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.erratum__date { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }

.how { margin-top: var(--spacing-16); outline: none; }
.erratum + .how { margin-top: var(--spacing-10); }
.how__title {
  margin-bottom: var(--spacing-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  letter-spacing: var(--tracking-tight);
}
.how__note { margin-top: var(--spacing-4); max-width: var(--spacing-measure); font-size: var(--text-small); line-height: 1.75; color: var(--color-ink-soft); }

.refs { margin-top: var(--spacing-10); }
/* 둘째 보기(이 글을 만든 방법 안) — 번호 + 제목 한 줄, 아래 참고 자료 항목으로 간다 */
.refs__list--compact { margin-top: var(--spacing-4); }
.refs__list--compact .refs__item { padding-block: 0; align-items: center; }
.refs__list--compact .refs__item::before { grid-row: auto; }
.refs__jump {
  display: flex;
  align-items: center;
  min-height: var(--spacing-touch);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink);
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: 4px;
}
.refs__list { display: grid; margin-top: var(--spacing-2); border-top: 1px solid var(--color-line); counter-reset: ref; }
.refs__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: var(--spacing-2);
  row-gap: 2px;
  padding-block: var(--spacing-3);
  border-bottom: 1px solid var(--color-line);
  counter-increment: ref;
}
.refs__item::before {
  content: counter(ref);
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: var(--text-small--line-height);
  color: var(--color-muted);
}
.refs__item--internal { counter-increment: none; }
.refs__item--internal::before { content: "—"; }
.refs__item:target { background: var(--color-panel); }
.refs__title { grid-column: 2; font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink); }
.refs__item--internal .refs__title { color: var(--color-ink-soft); }
.refs__url {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.5;
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.refs__date { grid-column: 2; font-family: var(--font-mono); font-size: var(--text-micro); line-height: 1.5; color: var(--color-muted); }

.related { margin-top: var(--spacing-16); }
.related__rows { margin-top: var(--spacing-2); border-top: 1px solid var(--color-ink); }
.pager {
  display: grid;
  gap: 1px;
  margin-top: var(--spacing-10);
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
@media (min-width: 45rem) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pager__cell { display: grid; align-content: start; gap: 2px; padding: var(--spacing-4); background: var(--color-bg); }
a.pager__cell { color: var(--color-ink); }
.pager__dir { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }
.pager__no { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }
.pager__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--tracking-tight);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}
.pager__cell--none .pager__dir,
.pager__cell--none .pager__title { color: var(--color-muted); }
.pager__cell--none .pager__title { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-small); letter-spacing: 0; }

/* ── 소개 ─────────────────────────────────────────────────────────────── */
.about .prose > h2:first-child { margin-top: 0; }
.made { margin-block: 0 1em; border-top: 1px solid var(--color-line); }
.made__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 2px var(--spacing-3); padding-block: var(--spacing-3); border-bottom: 1px solid var(--color-line); }
.made__row > :not(.made__no) { grid-column: 2; }
@media (min-width: 45rem) {
  .made__row { grid-template-columns: 2rem 10rem minmax(0, 1fr) 7rem; align-items: baseline; column-gap: var(--spacing-4); }
  .made__row > :not(.made__no) { grid-column: auto; }
}
.made__no { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }
.made__name, .made__text { font-size: var(--text-small); line-height: var(--text-small--line-height); }
.made__host { font-family: var(--font-mono); font-size: var(--text-meta); }
/* 표의 자리 칸 — 상자 대신 글자 muted + 점선 밑줄(표 격자가 이미 상자다) */
.made__slot { color: var(--color-muted); text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: var(--color-line-strong); text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* 자리표시 상자 — 사람에 관한 칸(피드백 6). 점선 · 90° · 바탕 없음. 결함처럼 비어 보이지 않게 라벨을 단다 */
.slot {
  max-width: var(--spacing-measure);
  margin-block: 0 1em;
  padding: 12px 16px; /* 리터럴 — 테두리 상자 padding 은 단계 값(lessons #50) */
  border: 1px dashed var(--color-line-strong);
}
.slot__label { font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--text-micro--line-height); letter-spacing: var(--tracking-meta); color: var(--color-muted); }
.prose .slot__text { margin-top: var(--spacing-1); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }
.prose .slot-note { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.notfound { padding-top: var(--spacing-10); }
.notfound > :not(.notfound__code) { max-width: var(--spacing-article); }
.notfound__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-404);
  line-height: var(--text-404--line-height);
  letter-spacing: calc(var(--tracking-display) * 2);
  font-variant-numeric: tabular-nums;
}
.notfound__title {
  margin-top: var(--spacing-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-display);
}
.notfound__text { margin-top: var(--spacing-3); max-width: var(--spacing-measure); color: var(--color-ink-soft); }
.notfound__latest { margin-top: var(--spacing-12); }
.notfound__rows { margin-top: var(--spacing-2); border-top: 1px solid var(--color-ink); }
.notfound__ways { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-6); margin-top: var(--spacing-6); }
@media (min-width: 64rem) { .notfound { padding-top: var(--spacing-16); } }

/* ── hover — 누를 수 있는 기기에서만(터치에서 붙는 hover 방지) ──────── */
@media (hover: hover) {
  .masthead__link:hover { color: var(--color-ink); text-decoration-line: underline; text-decoration-thickness: 1px; }
  .masthead__link[aria-current="page"]:hover { text-decoration-thickness: 2px; }
  .theme-toggle:hover { color: var(--color-ink); border-color: var(--color-ink-soft); }
  .colophon__link:hover, .crumbs a:hover, .category-head__meta a:hover, .tag-line__link:hover, .post-tags__link:hover, .titleblock__link:hover {
    color: var(--color-ink);
    text-decoration-line: underline;
  }
  .heading-anchor:hover { color: var(--color-ink); text-decoration-line: underline; }
  .stream-row:hover .stream-row__title a, a.pager__cell:hover .pager__title { text-decoration-line: underline; }
  .titleblock__principle:hover, .prose a:not([class]):hover, .summary-box a:hover { text-decoration-thickness: 2px; }
  .stream__all a:hover, .listing__other a:hover, .notfound__way:hover, .feeds__link:hover, .tag-filter__status a:hover, .listing__empty a:hover {
    text-decoration-color: var(--color-accent);
  }
  .chip:hover { color: var(--color-ink); border-color: var(--color-ink); }
  .chip[aria-current="true"]:hover { color: var(--color-bg); }
  .toc__link:hover, .toc-fold__link:hover { color: var(--color-ink); }
  .refs__jump:hover { text-decoration-line: underline; text-decoration-color: var(--color-accent); }
  .toc__link[aria-current="true"]:hover { color: var(--color-accent); }
  .how-link__a:hover { border-color: var(--color-ink); }
  .copy-btn:hover { color: var(--color-ink); }
}