@charset "utf-8";
/* ============================================================
   국민대학교 사이버역사관 — 디자인 시스템
   설계안 7장(톤·구조 원칙 5개) / 6-6(접근성) / 6-7(폰트 전략)

   원칙: 사료가 주인공, 연출은 조연. 색은 KMU Blue + 먹색 + 종이색.
   그라디언트·카드 그림자 없음. 위계는 서체 크기·여백·괘선으로만.
   ============================================================ */

/* 웹폰트는 별도 작업자가 assets/fonts/fonts.css 로 제공한다.
   파일이 아직 없어도 아래 폴백만으로 정상 렌더된다. */
@import url("/assets/fonts/fonts.css") screen;

/* ── 1. 토큰 ───────────────────────────────────────────────── */
:root {
  /* 색: KMU Blue(Pantone 2728C) + 먹색 + 종이색. 서브 컬러는 최소. */
  --kmu-blue: #004f9f;
  --kmu-blue-deep: #003a75;
  --kmu-blue-tint: #e8eef6;

  --ink: #16161a;          /* 본문 먹색 */
  --ink-soft: #4a4a52;     /* 보조 텍스트 (대비 7.4:1 on paper) */
  --ink-faint: #6b6b74;    /* 캡션·메타 (대비 4.9:1 on paper) */

  --paper: #fbf9f5;        /* 종이색 배경 */
  --paper-deep: #f2eee6;   /* 구획 배경 */
  --paper-card: #ffffff;

  --rule: #ddd8cd;         /* 괘선 */
  --rule-strong: #b8b2a4;
  /* 입력창·체크박스처럼 「그 선이 없으면 컨트롤이 어디까지인지 알 수 없는」 경계 전용.
     장식 괘선(--rule/--rule-strong)과 달리 WCAG 2.2 SC 1.4.11 에 따라 배경 대비 3:1 이상이어야 한다.
     paper 3.36:1 · paper-deep 3.05:1 · paper-card 3.53:1 (--rule-strong 은 2.0:1 로 미달) */
  --rule-control: #8f8876;

  --focus: #b34700;        /* 포커스 링(파랑과 구분되는 단일 강조색) */

  /* 타이포 — 제목은 KMU80, 제목 이외의 본문·UI는 Pretendard Light.
     KMU80 제목 서체는 굵기 축이 없고 "세리프 강도" 축(SERF 300~900)만 있다.
     세리프가 강할수록 격식·역사성이 높다.
     ※ 정본은 assets/fonts/fonts.css 다. 아래 값은 그 파일과 같아야 하며,
        폰트 파일이 아직 없을 때도 폴백만으로 렌더되도록 여기 한 벌 더 둔다. */
  --font-display: "KMU80 Sungkok Serif", "Noto Serif KR", "Apple SD Gothic Neo",
    serif; /* 대제목 — 세리프 최강 */
  --font-title: "KMU80 Sungkok SemiSerif", "Noto Serif KR",
    "Apple SD Gothic Neo", serif; /* 소제목·연표 표제 */
  --font-body: "Pretendard Light", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo",
    sans-serif; /* 제목 외 본문 — Pretendard Light */
  --font-ui: "Pretendard Light", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo",
    sans-serif; /* 내비게이션·캡션·메타 — Pretendard Light */
  --font-quote: "Pretendard Light", Pretendard, "Noto Sans KR", sans-serif;
  /* 한자·국한문 사료 전용: KMU80 은 한자 글리프가 0자라 폴백을 주 서체로 둔다 */
  --font-hanja: "Noto Serif KR", "Source Han Serif K", "Apple SD Gothic Neo",
    serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* 타이포 스케일 (모바일 360px 기준 → clamp 로 데스크톱 확장) */
  --fs-hero: clamp(2.5rem, 9vw, 5.5rem);
  --fs-h1: clamp(1.9rem, 6vw, 3.1rem);
  --fs-h2: clamp(1.4rem, 4vw, 2rem);
  --fs-h3: clamp(1.15rem, 3vw, 1.45rem);
  --fs-lead: clamp(1.05rem, 2.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;

  /* 제목 이외의 기본 굵기 */
  --fw: 300;

  /* 간격 (8px 격자, 여백을 넉넉하게) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --measure: 34rem;        /* 본문 1행 길이 */
  --wrap: 72rem;           /* 최대 폭 */
  --wrap-narrow: 48rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --radius: 2px;           /* 둥근 모서리는 거의 쓰지 않는다 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --kmu-blue: #7fb2e8;
    --kmu-blue-deep: #a9cdf3;
    --kmu-blue-tint: #16243a;
    --ink: #ece9e3;
    --ink-soft: #bdb9b1;
    --ink-faint: #9a968e;
    --paper: #14140f;
    --paper-deep: #1c1c18;
    --paper-card: #1f1f1a;
    --rule: #383830;
    --rule-strong: #55554b;
    /* 다크에서 #55554b 은 paper 대비 2.45:1 로 미달 — 컨트롤 경계만 밝게 든다.
       paper 3.63:1 · paper-deep 3.36:1 · paper-card 3.25:1 */
    --rule-control: #6f6f63;
    --focus: #ffb066;
  }
}

/* ── 2. 리셋·기본 ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--fw);
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: -0.005em;
  word-break: keep-all;          /* 한국어 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
  /* 사용하지 않는 굵기를 브라우저가 임의 합성하지 않게 한다. */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  /* 제목은 기존 KMU80과 원래 굵기를 유지한다. */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-family: var(--font-display); font-size: var(--fs-h1); }
h2 { font-family: var(--font-title); font-size: var(--fs-h2); }
h3 { font-family: var(--font-title); font-size: var(--fs-h3); }
h4, h5, h6 { font-family: var(--font-title); font-size: 1.05rem; }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--kmu-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
  text-decoration-color: color-mix(in srgb, var(--kmu-blue) 40%, transparent);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-7) 0;
}

strong, b {
  /* 굵기 대신 색과 자간으로 강조(굵기 축 없음) */
  font-weight: var(--fw);
  color: var(--kmu-blue-deep);
}

ul, ol { padding-left: 1.2em; margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); }

blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--kmu-blue);
  font-family: var(--font-quote);
  font-size: var(--fs-lead);
  color: var(--ink);
}

table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--ink-faint); font-weight: var(--fw); }

/* ── 3. 레이아웃 ───────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.prose { max-width: var(--measure); }
/* 본문 마크다운에서 중복 이미지를 걷어내면 <p></p> 빈 문단이 남는다.
   내용이 없는 문단이 여백만 벌리지 않도록 자리를 없앤다. */
.prose p:empty { display: none; }
.stack > * + * { margin-top: var(--sp-5); }

.section { padding-block: var(--sp-8); }
.section + .section { border-top: 1px solid var(--rule); }
.section--tint { background: var(--paper-deep); }

.grid {
  display: grid;
  align-items: start;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
/* 장면 80개·꼭지 목록은 1열이면 모바일 문서 높이가 3만 px 를 넘어 스크롤이 끝나지 않는다.
   좁은 화면에서도 2열로 접고, 그 폭에서만 카드 제목을 한 단계 낮춰 줄바꿈을 줄인다. */
@media (min-width: 23.5rem) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .grid--3 .card__title { font-size: 1.05rem; }
}
@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { gap: var(--sp-6); }
  .grid--3 .card__title { font-size: var(--fs-h3); }
}
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* 본문 + 사이드(시대 연표 유지 — 한진 차용) */
.with-aside { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }
@media (min-width: 64rem) {
  .with-aside { grid-template-columns: minmax(0, 1fr) 17rem; }
  .with-aside__side {
    position: sticky;
    top: var(--sp-5);
    align-self: start;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    /* 사이드에서 굴린 스크롤이 본문으로 번지지 않게 한다 */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* 아래쪽 페이드는 장식이 아니라 「여기서 잘렸고 더 있다」는 표시다.
       색을 늘리지 않도록 배경 그라디언트가 아니라 mask 로만 처리한다.
       내려간 만큼(--sp-7) 여백을 두어 마지막 항목이 글줄 한가운데서 흐려지지 않게 한다. */
    padding-bottom: var(--sp-7);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  }
}

/* ── 4. 스킵 내비 · 헤더 · 푸터 ────────────────────────────── */
.skip-nav {
  position: absolute;
  left: var(--sp-4);
  top: -4rem;
  z-index: 100;
  background: var(--kmu-blue);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-nav:focus { top: var(--sp-4); }

.site-header {
  border-bottom: 1px solid #28425a;
  background: #071421;
  position: relative;
  z-index: 20;
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-4);
}
.site-header__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: #f8fafc;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__brand:hover { color: #ffffff; }
.site-header__brand .mark { color: #8fc7f4; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; }
.site-nav a {
  font-family: var(--font-ui);
  color: #c8d3dd;
  text-decoration: none;
  font-size: var(--fs-sm);
  padding-block: var(--sp-1);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #ffffff; }
.site-nav a[aria-current="page"] { color: #ffffff; border-bottom-color: #8fc7f4; }

.site-header__search { margin-left: auto; }

.site-footer {
  border-top: 1px solid #28425a;
  margin-top: var(--sp-9);
  padding-block: var(--sp-7);
  background: #071421;
  font-size: var(--fs-sm);
  color: #c8d3dd;
}
.site-footer__slogan {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: #8fc7f4;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer a { color: #dce7f0; }
.site-footer .eyebrow { color: #8fc7f4; }
.site-footer hr { border-top-color: #28425a; }

/* ── 5. 검색 ───────────────────────────────────────────────── */
.searchbox { display: flex; gap: var(--sp-2); align-items: stretch; }
.searchbox input[type="search"] {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--rule-control);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  min-width: 0;
  width: 100%;
  max-width: 20rem;
}
.searchbox button {
  font: inherit;
  font-size: var(--fs-sm);
  border: 1px solid var(--kmu-blue);
  background: var(--kmu-blue);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  cursor: pointer;
}
.searchbox button:hover { background: var(--kmu-blue-deep); border-color: var(--kmu-blue-deep); }

/* 내부 전시실에서도 입구의 어두운 안내대와 같은 색·재료를 유지한다. */
.site-header .searchbox input[type="search"] {
  color: #15202b;
  background: #ffffff;
  border-color: #b7c8d6;
}
.site-header .searchbox button {
  background: #0b67b2;
  border-color: #5da4dc;
}
.site-header .searchbox button:hover {
  background: #075391;
  border-color: #8fc7f4;
}

@media (max-width: 54rem) {
  .site-header__inner { align-items: center; }
  .site-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .site-nav ul { flex-wrap: nowrap; min-width: max-content; }
}

@media (max-width: 40rem) {
  .site-header__search {
    order: 4;
    width: 100%;
    margin-left: 0;
  }
  .site-header__search .searchbox input[type="search"] { max-width: none; }
}

/* Pagefind UI 를 사이트 팔레트에 맞춤 */
.pagefind-ui {
  --pagefind-ui-primary: var(--kmu-blue);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper);
  --pagefind-ui-border: var(--rule-strong);
  --pagefind-ui-tag: var(--paper-deep);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 2px;
  --pagefind-ui-font: var(--font-body);
}
/* --pagefind-ui-border 는 결과 구분선 같은 장식 괘선에도 함께 쓰인다.
   컨트롤(검색창·필터 체크박스)의 경계만 3:1 색으로 따로 든다.
   pagefind-ui.css 가 main.css 뒤에 실려 같은 특이도로는 지므로 태그를 하나 더 붙인다. */
.pagefind-ui input.pagefind-ui__search-input,
.pagefind-ui .pagefind-ui__filter-panel input.pagefind-ui__filter-checkbox { border-color: var(--rule-control); }

/* Pagefind 기본 UI의 700 굵기를 Pretendard Light 300으로 되돌린다.
   `all: unset`으로 사라지는 font-synthesis 설정도 함께 복원한다. */
.pagefind-ui :is(
  .pagefind-ui__result-title,
  .pagefind-ui__result-title a,
  .pagefind-ui__filter-name,
  .pagefind-ui__filter-value,
  .pagefind-ui__message,
  .pagefind-ui__button,
  .pagefind-ui__search-input
) {
  font-weight: var(--fw);
  font-synthesis: none;
}

/* ── 6. 히어로 · 홈 ────────────────────────────────────────── */
.hero { padding-block: var(--sp-8) var(--sp-7); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0 0 var(--sp-5);
}
.hero__title .num { color: var(--kmu-blue); font-feature-settings: "tnum" 1; }
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}
.hero__subtitle {
  margin: calc(var(--sp-3) * -1) 0 var(--sp-3);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}
.hero__search { max-width: 30rem; }
.hero__search input[type="search"] { max-width: none; }

/* 3축 진입 */
.axes { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.axis {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--rule);
}
.axis__label {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--ink);
  display: block;
  margin-bottom: var(--sp-2);
}
.axis:hover .axis__label { color: var(--kmu-blue); }
.axis__desc { color: var(--ink-faint); font-size: var(--fs-sm); margin: 0; }
.axis__count { font-variant-numeric: tabular-nums; color: var(--kmu-blue); }
@media (min-width: 48rem) {
  .axes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .axis { border-bottom: 0; }
}

/* 시대 바로가기 칩 — 어느 폭에서도 줄바꿈으로 7개를 모두 펼친다.
   가로 스크롤로 두면 390px 에서 시대명이 길어(「성곡의 국민학원 인수와 학교 중흥」) 칩 하나가
   ~325px 라 7개 중 1.2개만 보인다. 이 줄은 사이트의 주축(7개 시대)으로 들어가는 길목이라
   나머지 6개를 스크롤 뒤에 숨기는 대가가 세로 300px 보다 크다. 줄바꿈은 덤으로
   스크롤러가 잘라 먹던 포커스 링 문제도 없앤다. */
.era-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  list-style: none;
}
.era-chips li { margin: 0; }
.era-chip {
  display: block;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.era-chip:hover { border-color: var(--kmu-blue); color: var(--kmu-blue); }
.era-chip .yr { font-variant-numeric: tabular-nums; color: var(--ink-faint); margin-right: var(--sp-2); }

/* ── 7. 카드 (그림자 없음, 괘선과 여백으로만) ──────────────── */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.card__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--kmu-blue);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.card__title { font-family: var(--font-title); font-size: var(--fs-h3); margin: 0; }
.card:hover .card__title { color: var(--kmu-blue); }
.card__desc { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.card__meta { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-faint); margin: 0; }
.card__thumb {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-height: 18rem;
  background: var(--paper-deep);
  overflow: hidden;
}
.card__thumb img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: contain;
  object-position: center top;
}

/* 인물 카드 */
.person-card {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  text-decoration: none;
  color: inherit;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.person-card__portrait {
  width: 4.5rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--paper-deep);
}
.person-card__portrait--empty {
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  font-family: var(--font-display);
}
.person-card__name { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 var(--sp-1); }
.person-card:hover .person-card__name { color: var(--kmu-blue); }
.person-card__hanja { font-family: var(--font-hanja); color: var(--ink-faint); font-size: 0.9em; margin-left: var(--sp-2); }
.person-card__role { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.person-card__term { font-size: var(--fs-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; margin: 0; }

/* ── 8. 연표 (좌우 지그재그 대신 모바일 우선 좌측 레일) ────── */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.timeline__item {
  position: relative;
  margin: 0;
  padding: 0 0 var(--sp-6) var(--sp-5);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.7em;
  width: 7px;
  height: 7px;
  background: var(--kmu-blue);
  border-radius: 50%;
}
.timeline__date {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--kmu-blue);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-1);
}
.timeline__title { font-family: var(--font-title); font-size: 1.1rem; margin: 0 0 var(--sp-2); }
.timeline__detail { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 var(--sp-2); }
.timeline__links { font-size: var(--fs-xs); color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (min-width: 64rem) {
  .timeline--zigzag { border-left: 0; }
  .timeline--zigzag .timeline__item {
    width: 50%;
    padding-left: var(--sp-6);
    border-left: 1px solid var(--rule);
  }
  .timeline--zigzag .timeline__item:nth-child(even) {
    margin-left: 50%;
  }
  .timeline--zigzag .timeline__item:nth-child(odd) {
    text-align: right;
    padding-left: 0;
    padding-right: var(--sp-6);
    border-left: 0;
    border-right: 1px solid var(--rule);
  }
  .timeline--zigzag .timeline__item:nth-child(odd)::before { left: auto; right: -4px; }
  .timeline--zigzag .timeline__item:nth-child(odd) .timeline__links { justify-content: flex-end; }
}

/* 사이드에 유지되는 축약 연표 */
.mini-timeline { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.mini-timeline li { margin: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.mini-timeline .yr { color: var(--kmu-blue); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
.mini-timeline a { color: var(--ink-soft); text-decoration: none; }
.mini-timeline a:hover { color: var(--kmu-blue); }

/* ── 세로형 연표: 연도 하나가 사진+사건 표 한 패키지 ───────── */
.timeline-hero {
  display: grid;
  gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  padding-block: var(--sp-8);
  border-block: 1px solid var(--rule);
}
.timeline-hero--all { grid-template-columns: minmax(17rem, 0.75fr) minmax(30rem, 1.25fr); }
.timeline-hero--era { grid-template-columns: minmax(18rem, 0.9fr) minmax(24rem, 1.1fr); align-items: center; }
.timeline-hero__copy { align-self: start; }
.timeline-hero__copy h1 { max-width: 12em; margin-bottom: var(--sp-4); }
.timeline-hero__index {
  margin: 0 0 var(--sp-5);
  color: var(--kmu-blue);
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.timeline-hero__subtitle { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); color: var(--ink-faint); }
.timeline-hero__tagline { max-width: var(--measure); color: var(--ink-soft); font-size: var(--fs-lead); }
.timeline-hero__meta {
  margin: var(--sp-5) 0 0;
  color: var(--kmu-blue);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.timeline-hero__media { margin: 0; }
.timeline-hero__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 34rem;
  margin-inline: auto;
  background: var(--paper-deep);
  object-fit: contain;
}
.timeline-hero__media figcaption {
  margin-top: var(--sp-2);
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-align: right;
}

.timeline-hero__toc ol { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.timeline-hero__toc li { margin: 0; }
.timeline-hero__toc a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  min-height: 3.6rem;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.timeline-hero__toc a:hover,
.timeline-hero__toc a[aria-current="true"] { color: var(--kmu-blue); border-bottom-color: var(--kmu-blue); }
.timeline-hero__toc-index,
.timeline-hero__toc-meta { color: var(--ink-faint); font-family: var(--font-ui); font-size: var(--fs-xs); }
.timeline-hero__toc-name { font-family: var(--font-title); line-height: 1.4; }
.timeline-hero__toc-name small { display: block; color: var(--ink-faint); font-family: var(--font-body); font-size: var(--fs-xs); }
.timeline-hero__toc-meta { font-variant-numeric: tabular-nums; white-space: nowrap; }

.timeline-jump,
.timeline-year-jump {
  margin: var(--sp-5) 0;
  border-block: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
}
.timeline-jump,
.timeline-year-jump nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); padding-block: var(--sp-3); }
.timeline-jump a,
.timeline-year-jump a {
  display: inline-grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.timeline-year-jump summary {
  display: none;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--ink-soft);
}
.timeline-year-jump summary span { color: var(--ink-faint); }

.timeline-origin {
  position: relative;
  width: min(100%, 55rem);
  min-height: 5rem;
  padding: var(--sp-4) 0 0 2.1rem;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
}
.timeline-origin::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0.72rem; width: 1px; background: var(--rule-strong); }
.timeline-origin span { position: absolute; top: 0; left: 0.38rem; width: 0.72rem; height: 0.72rem; border: 2px solid var(--kmu-blue); background: var(--paper); transform: rotate(45deg); }
.timeline-origin p { margin: 0; }

.timeline-stream {
  position: relative;
  width: min(100%, 55rem);
  padding-bottom: var(--sp-8);
}
.timeline-stream::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0.72rem;
  width: 1px;
  background: var(--rule-strong);
}
.timeline-stream__start { position: absolute; }
.timeline-year {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 47.5rem);
  margin: 0 0 var(--sp-8);
  scroll-margin-top: var(--sp-4);
  content-visibility: auto;
  contain-intrinsic-size: auto 28rem;
}
.timeline-year__marker { position: relative; min-height: 4rem; padding: 0.6rem var(--sp-3) 0 2rem; }
.timeline-year__marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1.32rem;
  right: 0;
  left: 0.72rem;
  height: 1px;
  background: var(--ink);
}
.timeline-year__dot {
  position: absolute;
  top: 0.98rem;
  left: 0.38rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--kmu-blue);
  border-radius: 50%;
  background: var(--paper);
}
.timeline-year__marker h2 {
  position: relative;
  width: fit-content;
  margin: 0;
  padding-inline: 0.25rem;
  background: var(--paper);
  color: var(--kmu-blue);
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.timeline-year__marker a { color: inherit; text-decoration: none; }

.timeline-package {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper-card);
}
.timeline-package__photo { margin: 0; padding: var(--sp-5); border-bottom: 1px solid var(--rule-strong); }
.timeline-package__photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 38rem;
  margin-inline: auto;
  background: var(--paper-deep);
  object-fit: contain;
}
.timeline-package__photo figcaption {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.timeline-package__photo figcaption span { display: block; margin-top: var(--sp-1); color: var(--ink-faint); }
.timeline-package__events { table-layout: fixed; margin: 0; font-size: var(--fs-sm); }
.timeline-package__events tr:last-child > td { border-bottom: 0; }
.timeline-package__events .timeline-package__month-break > td { border-top: 2px solid var(--rule-strong); }
.timeline-table__when {
  width: 7.5rem;
  padding: var(--sp-5) var(--sp-4);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timeline-table__day { color: var(--ink-faint); font-size: 0.78em; }
.timeline-table__what { padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4); }
.timeline-table__title { margin: 0; color: var(--ink); font-family: var(--font-title); font-size: 1.06rem; line-height: 1.55; }
.timeline-table__title .badge { margin: 0 var(--sp-1) 0 0; }
.timeline-table__detail { margin: var(--sp-1) 0 0; color: var(--ink-soft); line-height: 1.65; }
.timeline-table__note {
  margin: var(--sp-2) 0 0;
  padding: 0.3rem 0.5rem;
  border-left: 3px solid #d9a400;
  background: #fff8e1;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.timeline-table__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-2) 0 0;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.timeline-table__src { color: var(--ink-faint); }
.timeline-table__src a { color: inherit; }
.badge--muted { border-color: var(--rule-strong); color: var(--ink-faint); }
.badge--tiny { padding-inline: 0.38rem; border-style: dashed; color: var(--ink-faint); font-size: 0.68rem; line-height: 1.45; }

.timeline-era-break {
  position: relative;
  z-index: 2;
  margin: var(--sp-7) 0 var(--sp-7);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) 7.5rem;
  border-block: 2px solid var(--kmu-blue);
  background: var(--kmu-blue-tint);
  scroll-margin-top: var(--sp-4);
}
.timeline-era-break__dot {
  position: absolute;
  top: calc(var(--sp-6) + 0.4rem);
  left: 0.38rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 2px solid var(--kmu-blue);
  background: var(--paper-card);
  transform: rotate(45deg);
}
.timeline-era-break__index { margin: 0 0 var(--sp-2); color: var(--kmu-blue); font-family: var(--font-ui); font-size: var(--fs-xs); }
.timeline-era-break h2 { margin: 0; font-size: var(--fs-h2); }
.timeline-era-break__subtitle { margin: var(--sp-1) 0 0; color: var(--ink-faint); font-size: var(--fs-sm); }
.timeline-era-break__tagline { max-width: 44rem; margin: var(--sp-3) 0 0; color: var(--ink-soft); }
.timeline-era-break__link { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); }

@media (prefers-color-scheme: dark) {
  .timeline-table__note { background: #2a2412; border-left-color: #c79a1e; }
}

@media (max-width: 51.25rem) {
  .timeline-hero,
  .timeline-hero--all,
  .timeline-hero--era { grid-template-columns: 1fr; gap: var(--sp-7); }
  .timeline-hero__index { font-size: 4.5rem; }
  .timeline-hero__toc a { grid-template-columns: 2rem minmax(0, 1fr); }
  .timeline-hero__toc-meta { grid-column: 2; }
  .timeline-hero__media img { max-height: none; }
  .timeline-year-jump summary { display: flex; }
  .timeline-year-jump:not([open]) nav { display: none; }
  .timeline-year-jump nav { gap: 0; }
  .timeline-stream::before,
  .timeline-origin::before { left: 0.72rem; }
  .timeline-year {
    display: block;
    margin-bottom: var(--sp-7);
    padding-left: 2.4rem;
    scroll-margin-top: 3.35rem;
  }
  .timeline-year__marker {
    position: sticky;
    z-index: 4;
    top: 0;
    width: calc(100% + 2.4rem);
    min-height: 3.1rem;
    margin-left: -2.4rem;
    padding: 0.72rem 0 0.55rem 2.4rem;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(8px);
  }
  .timeline-year__marker::after { top: 1.52rem; left: 0.72rem; }
  .timeline-year__dot { top: 1.16rem; left: 0.38rem; }
  .timeline-year__marker h2 { font-size: 1.3rem; }
  .timeline-package__photo { padding: var(--sp-3); }
  .timeline-package__photo img { max-height: none; }
  .timeline-table__when { width: 4.35rem; padding: var(--sp-4) var(--sp-2); font-size: var(--fs-xs); }
  .timeline-table__what { padding: var(--sp-4) var(--sp-3); }
  .timeline-table__title { font-size: 0.98rem; }
  .timeline-era-break { margin-block: var(--sp-6); padding: var(--sp-5) var(--sp-4) var(--sp-5) 2.4rem; }
  .timeline-era-break__dot { top: calc(var(--sp-5) + 0.35rem); }
}

/* 스크롤 진행률 */
.progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: transparent;
  z-index: 50;
}
.progress__bar { height: 100%; width: 0; background: var(--kmu-blue); }

/* ── 9. 사진 ───────────────────────────────────────────────── */
.photo { margin: var(--sp-6) 0; }
.photo img { width: 100%; background: var(--paper-deep); }
.photo__stage {
  position: relative;
  display: block;
  color: inherit;
  cursor: zoom-in;
  text-decoration: none;
}
.photo__stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.photo__restore-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(7, 20, 33, 0.9);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1;
}
.photo figcaption {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--rule-strong);
  line-height: 1.6;
}
.photo__meta { display: block; color: var(--ink-faint); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.photo__original {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.photo__original summary {
  width: fit-content;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--kmu-blue);
  cursor: pointer;
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.photo__original summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.photo__original-open { display: none; }
.photo__original[open] .photo__original-open { display: inline; }
.photo__original[open] .photo__original-closed { display: none; }
.photo__original-panel {
  padding: var(--sp-3);
  border: 1px solid var(--rule);
  background: var(--paper-deep);
}
.photo__original-panel img { max-height: 32rem; object-fit: contain; }
.photo__original-panel p { margin: var(--sp-2) 0 0; color: var(--ink-faint); font-size: var(--fs-xs); }
.photo--hero { margin-top: 0; }
.photo--hero > .photo__stage > img { max-height: 42rem; object-fit: contain; }

/* 사진 목록은 265장이라 1열이면 모바일 문서 높이가 10만 px 에 가깝다 — 좁은 화면도 2열로 둔다. */
/* minmax(0,·) 가 없으면 열의 자동 최소폭이 원본 사진의 실제 픽셀 폭이 되어 격자가 화면 밖으로 밀린다. */
.photo-grid { display: grid; align-items: start; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-grid .photo { margin: 0; }
.photo-grid .photo__stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-height: 16rem;
  background: var(--paper-deep);
}
.photo-grid .photo__stage > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 16rem;
  aspect-ratio: auto;
  object-fit: contain;
}
/* 2열에서는 캡션 폭이 좁다 — 글자와 괘선 여백을 한 단계씩 줄여 읽히게 한다. */
.photo-grid .photo figcaption {
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
  padding-left: var(--sp-2);
}
@media (min-width: 34rem) {
  .photo-grid { gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .photo-grid .photo figcaption {
    font-size: var(--fs-sm);
    margin-top: var(--sp-3);
    padding-left: var(--sp-3);
  }
}

/* ── 사료 사진 확대 보기 ────────────────────────────── */
.photo-lightbox {
  width: min(90rem, calc(100vw - 2rem));
  max-width: none;
  height: min(60rem, calc(100dvh - 2rem));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.photo-lightbox::backdrop { background: rgb(2 10 17 / 0.88); }
.photo-lightbox__shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.photo-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3.5rem;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.photo-lightbox__tools { display: flex; align-items: center; gap: var(--sp-2); }
.photo-lightbox__button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.photo-lightbox__button:hover { border-color: var(--kmu-blue); color: var(--kmu-blue); }
.photo-lightbox__button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-lightbox__button:disabled { cursor: default; opacity: 0.38; }
.photo-lightbox__close { min-width: 4.5rem; }
.photo-lightbox__viewport {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: #06101a;
}
.photo-lightbox__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 11rem);
  object-fit: contain;
}
.photo-lightbox__caption { margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.photo-lightbox__caption strong { display: block; font-family: var(--font-ui); font-weight: var(--fw-medium); }
.photo-lightbox__meta { display: block; margin-top: var(--sp-1); color: var(--ink-faint); font-size: var(--fs-xs); }
.photo-lightbox__status { margin: 0; color: var(--ink-faint); font-size: var(--fs-xs); }
body.has-photo-lightbox { overflow: hidden; }
@media (max-width: 40rem) {
  .photo-lightbox { width: 100vw; height: 100dvh; border: 0; }
  .photo-lightbox__viewport { padding: var(--sp-2); }
  .photo-lightbox__caption { padding-inline: var(--sp-3); }
  .photo-lightbox__image { max-height: calc(100dvh - 10rem); }
}

/* ── 10. 인물 상세 4탭 ─────────────────────────────────────── */
.person-hero { padding-block: var(--sp-7) var(--sp-6); }
.person-hero__name { font-family: var(--font-display); font-size: var(--fs-h1); margin: 0 0 var(--sp-3); }
.person-hero__hanja { font-family: var(--font-hanja); color: var(--ink-faint); font-size: 0.55em; margin-left: var(--sp-3); letter-spacing: 0.05em; }
.person-hero__pen { color: var(--kmu-blue); }
/* 사실 목록은 한 줄로 흘러 붙으면 어디까지가 한 항목인지 읽히지 않는다.
   좁은 화면에서는 아예 항목마다 줄을 바꾸고, */
.person-hero__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-soft); }
.person-hero__facts li { margin: 0; }
.person-hero__facts dt, .person-hero__facts .k { color: var(--ink-faint); margin-right: var(--sp-2); }
/* 넓은 화면에서는 한 줄로 흘리되 항목 사이를 벌리고 옅은 세로 괘선으로 경계를 만든다.
   (색이 아니라 괘선으로 구분 — 설계안 6-6) */
@media (min-width: 48rem) {
  .person-hero__facts { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
  .person-hero__facts li { padding-right: var(--sp-5); border-right: 1px solid var(--rule); }
  .person-hero__facts li:last-child { padding-right: 0; border-right: 0; }
}

.tabs { border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-6); }
.tabs ul { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.tabs li { margin: 0; flex: 0 0 auto; }
.tabs a {
  display: block;
  padding: var(--sp-3) 0;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-title);
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-selected="true"], .tabs a.is-active { color: var(--kmu-blue); border-bottom-color: var(--kmu-blue); }

.tabpanel { scroll-margin-top: var(--sp-6); }
.tabpanel + .tabpanel { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--rule); }
/* JS 가 동작할 때만 탭 전환. JS 없으면 전 패널이 문서로 이어져 보인다. */
.js .tabpanel[hidden] { display: none; }
.js .tabpanel + .tabpanel { margin-top: 0; padding-top: 0; border-top: 0; }
.js .tabpanel__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 어록 */
.quote { margin: 0 0 var(--sp-6); padding-left: var(--sp-5); border-left: 2px solid var(--kmu-blue); }
.quote__text { font-family: var(--font-quote); font-size: var(--fs-lead); line-height: 1.7; margin: 0 0 var(--sp-3); }
.quote__source { font-size: var(--fs-xs); color: var(--ink-faint); font-style: normal; }

/* 연보 */
.annals { list-style: none; margin: 0; padding: 0; }
.annals li { display: grid; grid-template-columns: 4rem 1fr; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--rule); margin: 0; }
.annals .yr { font-family: var(--font-display); color: var(--kmu-blue); font-variant-numeric: tabular-nums; }

/* ── 11. 태그·배지·메타 ───────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.tags li { margin: 0; }
.tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem var(--sp-3);
  text-decoration: none;
}
.tag:hover { border-color: var(--kmu-blue); color: var(--kmu-blue); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--kmu-blue);
  text-transform: none;
  margin: 0 0 var(--sp-3);
  display: block;
}

.breadcrumb { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-faint); padding-block: var(--sp-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--sp-2); color: var(--rule-strong); }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--kmu-blue); text-decoration: underline; }

.notice {
  border-left: 2px solid var(--rule-strong);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-deep);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: var(--sp-5) 0;
}
.notice--todo { border-left-color: var(--focus); }

/* 「집필 예정」 배지 — 80장면 쿼터의 빈자리(placeholder: true)를 한눈에 구분한다.
   색만으로 구분하지 않도록 글자로 상태를 적는다(설계안 6-6). */
.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.6;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 var(--sp-3);
  vertical-align: middle;
  white-space: nowrap;
}
.badge--todo { color: var(--focus); }
/* 「AI 초안 · 역사 교수 검수 전」 배지(draft: true). 「집필 예정」과 상태가 다르다 —
   글은 있으나 사실 확인이 끝나지 않았다는 뜻이라 색이 아니라 글자로 구분한다. */
.badge--draft { color: var(--kmu-blue); border-style: dashed; }
.card--placeholder { border-top-style: dashed; }
.card--placeholder .card__desc { color: var(--ink-faint); }
.card--draft { border-top-color: var(--kmu-blue); }

/* 초안 안내 상자. 본문 시작 전에 한 번, 눈에 띄되 사료보다 앞서지 않게. */
.notice--draft { border-left-color: var(--kmu-blue); background: var(--kmu-blue-tint); color: var(--ink); }
.notice--draft .card__meta { display: block; margin-top: var(--sp-2); }

/* 본문의 `[검수 필요]` 표기. 노란 밑줄로 문장 흐름을 끊지 않으면서 눈에 걸리게 한다.
   색만으로 알리지 않도록 글자("검수 필요")가 그대로 남고, 밑줄이 형태 신호가 된다. */
.review-flag {
  background: linear-gradient(transparent 60%, #ffe9a8 60%);
  border-bottom: 2px solid #a06a00;
  font-family: var(--font-ui);
  font-size: 0.9em;
  padding: 0 0.1em;
  white-space: nowrap;
}

/* 「출처」 절 — 신규 원고의 근거 목록. 번호를 남겨 검수 때 가리키기 쉽게 한다. */
.sources__list { padding-left: var(--sp-5); font-size: var(--fs-sm); }
.sources__list li { padding-block: var(--sp-2); border-bottom: 1px solid var(--rule); }
.sources__list .card__meta { margin-left: var(--sp-2); }

/* 꼭지 하단의 고유명사 목록. 옛 이름으로 찾는 사람을 위한 안내이자 검색 색인용이다. */
.glossary-list { margin: 0; font-size: var(--fs-sm); }
.glossary-list dt { font-family: var(--font-title); margin-top: var(--sp-3); }
.glossary-list dd { margin: var(--sp-1) 0 0; padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--rule); }

.pager { display: flex; justify-content: space-between; gap: var(--sp-4); border-top: 1px solid var(--rule); padding-top: var(--sp-5); margin-top: var(--sp-8); font-size: var(--fs-sm); }
.pager a { text-decoration: none; color: var(--ink-soft); max-width: 45%; }
.pager a:hover { color: var(--kmu-blue); }
.pager .dir { display: block; font-size: var(--fs-xs); color: var(--ink-faint); }

.related { border-top: 1px solid var(--rule); margin-top: var(--sp-8); padding-top: var(--sp-6); }
.related h2 { font-size: var(--fs-h3); }
.related ul { list-style: none; padding: 0; }
.related li { padding-block: var(--sp-2); border-bottom: 1px solid var(--rule); }

.embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.filelist { list-style: none; padding: 0; }
.filelist li { border-bottom: 1px solid var(--rule); padding-block: var(--sp-3); }
.filelist .ext { display: inline-block; min-width: 3.2rem; font-size: var(--fs-xs); color: var(--ink-faint); text-transform: uppercase; }

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

.lede { font-size: var(--fs-lead); color: var(--ink-soft); max-width: var(--measure); }

/* GSAP 진입 연출 — GSAP 로딩이 확인된 뒤 JS 가 .has-gsap 을 붙일 때만 적용된다.
   (CDN 차단·스크립트 실패 시 콘텐츠가 사라지지 않게 하는 안전장치) */
.has-gsap .reveal { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .has-gsap .reveal { opacity: 1 !important; transform: none !important; }
}

/* 인쇄 */
@media print {
  .site-header, .site-footer, .skip-nav, .progress, .searchbox { display: none; }
  body { background: #fff; color: #000; }
  a { text-decoration: none; color: #000; }
}