/* ============================================================================
   메모리코드 · base.css   (L0 공통 인프라 — /youth 와 /senior 가 공유)
   ----------------------------------------------------------------------------
   여기에는 "두 트랙이 똑같이 쓰는 것"만 둔다.
   글자 크기·밀도·터치영역 같은 트랙 차이는 tokens.css 의 .track-youth /
   .track-senior 가 정하고, 화면 차이(L3)는 youth.css 가 맡는다.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--paper-1);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--font-body, 15px);
  line-height: var(--line-body, 1.6);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-1); color: var(--paper-0);
  padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ── 지면 ──────────────────────────────────────────────────────────────── */
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 32px); margin-inline: auto; }

.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* ── 머리글 ────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper-1) 88%, transparent);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--paper-line);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px;
}
/* 메뉴가 일곱 개가 되면 태블릿 폭에서도 한 줄에 안 들어간다.
   줄을 바꿔 메뉴만 가로로 스크롤되게 한다 — 글자를 접는 것보다 읽기 쉽다.
   2026-08-16 영단어를 더해 **여덟 개**가 되면서 기준을 900px 로 올렸다.
   760px 에 그대로 두면 800px 안팎에서 메뉴가 브랜드·복습뱃지를 밀어낸다. */
@media (max-width: 900px) {
  .site-head__in { flex-wrap: wrap; row-gap: 0; }
  .nav {
    order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .brand__track { display: none; }     /* 「청소년」 배지는 좁은 화면에서 자리만 차지한다 */
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand__mark {
  width: 28px; height: 28px; flex: none;
  border-radius: 7px; display: grid; place-items: center;
  background: var(--ink-1); color: var(--paper-0);
  font-family: var(--font-serif); font-size: 16px; line-height: 1;
}
.brand__name { font-size: calc(var(--font-body) + 2px); }
.brand__track {
  font-size: var(--font-caption); font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--paper-line);
}

/* 넓은 화면에서도 메뉴가 넘치면 헤더를 밀지 말고 **메뉴만** 옆으로 밀리게 한다.
   (min-width:0 이 없으면 flex 항목이 줄어들지 못해 브랜드가 잘린다) */
.nav { display: flex; gap: 2px; align-items: center; min-width: 0; overflow-x: auto;
       scrollbar-width: none; -ms-overflow-style: none; }
.nav a {
  text-decoration: none; padding: 8px 12px; border-radius: var(--radius-md);
  color: var(--ink-2); font-weight: 600;
  min-height: var(--tap, 44px); display: inline-flex; align-items: center;
  /* 좁은 화면에서 메뉴가 서로를 눌러 «메 모 리 코 드» 처럼 세로로 쪼개졌다.
     글자는 절대 접지 않고, 대신 메뉴 줄 자체가 옆으로 밀리게 한다.
     (2026-08-16 수학공식 메뉴를 더하며 발견 — 6개일 때도 이미 그랬다) */
  white-space: nowrap; flex: none;
}
.nav a:hover { background: var(--paper-2); color: var(--ink-1); }
.nav a[aria-current="page"] { background: var(--ink-1); color: var(--paper-0); }

.icon-btn {
  width: var(--tap, 44px); height: var(--tap, 44px); flex: none;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-md); cursor: pointer; color: var(--ink-2);
}
.icon-btn:hover { background: var(--paper-2); border-color: var(--paper-line); color: var(--ink-1); }

/* ── 버튼 ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap, 44px); padding: 0 18px;
  border-radius: var(--radius-md); border: 1px solid var(--paper-edge);
  background: var(--paper-0); color: var(--ink-1);
  font-weight: 700; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }
.btn--primary:hover { background: var(--ink-2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink-1); }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: var(--font-caption); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── 카드 · 패널 ───────────────────────────────────────────────────────── */
.panel {
  background: var(--paper-0);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.panel--flat { background: var(--paper-2); border-color: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--font-caption); font-weight: 700; line-height: 1.7;
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--paper-line); white-space: nowrap;
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }

/* 색으로만 의미를 나르지 않는다 — 칩에는 항상 글자 라벨이 함께 있다 */
.chip--cat { background: var(--paper-0); }
.chip--cat .chip__dot { background: var(--cat, var(--ink-3)); }
/* 「★ 신규」·「다 익힘」 칩. 수학·영단어 두 화면이 함께 쓰므로 base.css 에 둔다.
   처음엔 math.css 에 있었고, 영단어를 붙이자 그 화면에서만 스타일이 빠졌다(patch31 규칙). */
.chip--new { background: var(--chart-4); color: #1c1a16; border-color: transparent; }
.chip--done { border-color: var(--status-good); color: var(--status-good); }

/* ── 필터 바 ───────────────────────────────────────────────────────────── */
.filters { display: grid; gap: var(--space-2); }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-row__label {
  font-size: var(--font-caption); font-weight: 800; color: var(--ink-3);
  min-width: 52px; letter-spacing: .04em;
}
.toggle {
  border: 1px solid var(--paper-edge); background: var(--paper-0);
  color: var(--ink-2); border-radius: 999px; cursor: pointer;
  padding: 6px 13px; font-size: var(--font-caption); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.toggle:hover { background: var(--paper-2); }
.toggle[aria-pressed="true"] {
  background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1);
}
.toggle[aria-pressed="true"] .toggle__dot { box-shadow: 0 0 0 2px var(--paper-0) inset; }
.toggle__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.toggle__n { opacity: .65; font-variant-numeric: tabular-nums; font-weight: 600; }

.search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 220px;
  background: var(--paper-0); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md); padding: 0 12px; min-height: var(--tap, 44px);
}
.search input { border: 0; background: transparent; outline: none; width: 100%; }
.search svg { flex: none; color: var(--ink-3); }

/* ── 진행 막대 ─────────────────────────────────────────────────────────── */
.bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.bar__fill { height: 100%; background: var(--chart-1); border-radius: 999px; transition: width .4s ease; }

/* ── 통계 타일 ─────────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.tile {
  background: var(--paper-0); border: 1px solid var(--paper-line);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.tile__k { font-size: var(--font-caption); color: var(--ink-3); font-weight: 700; }
.tile__v {
  font-family: var(--font-mono); font-size: calc(var(--font-title) + 4px);
  font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.tile__u { font-size: var(--font-caption); color: var(--ink-3); font-weight: 600; }

/* ── 대화상자 ──────────────────────────────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,18,14,.52); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 20px;
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  background: var(--paper-1); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg); width: min(880px, 100%);
  max-height: min(88vh, 980px); overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.sheet__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--paper-line);
  background: color-mix(in srgb, var(--paper-1) 92%, transparent);
  backdrop-filter: blur(6px);
}
.sheet__body { padding: var(--space-4); }

/* ── 토스트 ────────────────────────────────────────────────────────────── */
.toast-host { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; }
.toast {
  background: var(--ink-1); color: var(--paper-0);
  padding: 10px 16px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── 바닥글 ────────────────────────────────────────────────────────────── */
.site-foot {
  margin-top: var(--space-5);
  border-top: 1px solid var(--paper-line);
  padding: var(--space-4) 0 var(--space-5);
  color: var(--ink-3); font-size: var(--font-caption);
}
.site-foot a { color: var(--ink-2); }
/* 바닥글 둘째 줄(버전·기록 안내) — 규칙이 아예 없어서 첫 줄과 같은 크기로 나왔다 */
.site-foot__meta { margin-top: 6px; opacity: .85; }

/* ── 크로스 링크 ────────────────────────────────────────────────────────
   "이 인물이 나오는 카드" 처럼 **갈래를 건너뛰는 링크** 묶음.
   원래 history.css 에만 있었는데, 인물카드 화면(history.css 를 안 읽는다)에서도
   쓰게 되면서 스타일이 통째로 빠져 «문화재칠지도문화재광개토대왕릉비» 처럼
   글자가 다 붙어 버렸다(2026-08-16 KW 발견). 공용이므로 base.css 로 옮긴다.
   → 여러 화면이 쓰는 부품은 그 화면들이 **모두** 읽는 CSS 에 둔다. */
.xlinks { display: flex; flex-wrap: wrap; gap: 6px; }
.xlink {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  font-size: 12.5px; line-height: 1.5; padding: 3px 10px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--paper-line); color: var(--ink-1);
}
.xlink:hover, .xlink:focus-visible { border-color: var(--h-c, var(--paper-edge)); }
.xlink__k { font-size: 10.5px; color: var(--ink-3); flex: none; }

/* ── 표 ────────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--font-caption); }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.tbl th { color: var(--ink-3); font-weight: 800; letter-spacing: .03em; }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── 빈 상태 ───────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--space-5) var(--space-3); color: var(--ink-3); }
.empty__big { font-size: 34px; margin-bottom: 8px; opacity: .5; }

/* ── 수식 조판 (공용) ───────────────────────────────────────────────────
   수학 공식 화면(youth/math)과 복습 화면(youth/review)이 **함께** 쓴다.
   복습 화면은 math.css 를 읽지 않으므로 여기 둔다 — .xlinks 를 옮긴 것과 같은 이유.
   KaTeX 가 없거나 실패하면 .mathx--plain 으로 떨어지고, 그때는 원본 유니코드가
   줄바꿈까지 그대로 보여야 한다(교재가 세 식을 한 항목에 묶어 둔 경우가 있다). */
.mathx { display: inline-block; max-width: 100%; line-height: 1.5; }
.mathx--block { display: block; text-align: center; }
.mathx--plain {
  font-family: var(--font-mono); font-size: .96em; white-space: pre-line;
  word-break: keep-all; overflow-wrap: anywhere; letter-spacing: -.005em;
}
.mathx .katex { font-size: 1.06em; }
.mathx .katex-display { margin: .35em 0; }
/* 긴 수식은 잘라 내지 말고 그 칸 안에서만 가로로 밀리게 한다 */
.mathx .katex-display > .katex { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* 복습 카드 안의 수식·그림 자리 */
.srs-card__math { max-width: 100%; overflow-x: auto; }
.srs-card__img { width: min(420px, 100%); }
.srs-card__img img {
  width: 100%; height: auto; display: block; border-radius: var(--radius-md);
  border: 1px solid var(--paper-line); background: var(--paper-0);
}
/* 4지선다 보기에 수식이 통째로 들어가는 문항(운율 → 공식)은 글자를 조금 줄인다 */
.mcq__long { font-size: 13.5px; line-height: 1.5; }

/* ── 어르신 화면으로 돌아가는 띠 (patch54) ────────────────────────────────
   시니어 카드에서 「손주가 보는 청소년 화면」으로 건너오신 분에게만 나온다.
   ⚠ 청소년 화면의 글자 크기를 따르지 않는다. 이 띠를 읽는 분은 어르신이다 —
      본문보다 크게, 대비를 세게 둔다. 청소년에게는 애초에 안 보이는 띠라
      화면이 커 보이는 부작용도 없다.
   ⚠ 화면에 붙여 둔다(sticky). 어르신이 아래로 내려가 읽다가 「어떻게 돌아가지」
      하실 때 위로 다시 올라오게 만들면 그 순간 길을 잃는다. */
/* ⚠ **아래에 붙인다. 위가 아니다.**
   처음에는 머리글 아래 sticky 로 두었는데, 어르신이 실제로 도착하는 화면이
   성어 상세 «모달»(.sheet-backdrop · z-index 60)이라 띠가 그 뒤에 깔려
   보이지도 눌리지도 않았다 — 정작 필요한 그 한 화면에서만 죽는 띠였다.
   위로 올리면 모달의 «중등본/고등본/✕» 단추를 덮는다. 그래서 아래다.
   모달 위(z-index 95)에 뜨고, 토스트(90)보다도 위다 — 돌아가는 길이 가장 위다. */
.cross-back {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--era-goryeo, #6b5b95); color: #fff;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .22);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cross-back__in {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 0; min-height: 56px;
}
/* 띠가 가리는 만큼 본문 끝에 자리를 비운다 — 마지막 줄이 띠 뒤로 숨지 않게. */
body:has(.cross-back) .site-foot { padding-bottom: 84px; }
.cross-back__t { font-size: 16px; font-weight: 700; line-height: 1.5; }
.cross-back__go {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border-radius: 10px; background: #fff; color: #2b2724;
  font-size: 17px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.cross-back__go:hover { background: #f2ede4; }
.cross-back__x {
  min-width: 44px; min-height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: #fff; font-size: 18px; cursor: pointer;
}
.cross-back__x:hover { background: rgba(255, 255, 255, .18); }
.cross-back__more {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px;
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 10px;
  background: transparent; color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cross-back__more:hover { background: rgba(255, 255, 255, .16); }

/* ── 건너오신 동안 잠금 (patch56) ─────────────────────────────────────────
   성어 하나 보러 오신 분께 수학공식·영단어·복습 스케줄러까지 열어 두면
   그 순간 「내가 지금 어디지」가 된다. 메뉴와 복습 뱃지를 감춘다.
   ⚠ 아주 없애지 않고 «감추기»다 — 띠의 「손주와 더 둘러보기」를 누르면 그대로 돌아온다.
   ⚠ 로고(brand)는 남긴다. 눌러도 청소년 홈이고, 거기서도 돌아가는 띠가 따라간다. */
body.cross-locked .site-head .nav,
body.cross-locked .site-head #due-chip { display: none !important; }

/* ── 꼬리글의 현관 단추 (patch56) ─────────────────────────────────────────
   청소년 화면에는 현관으로 가는 길이 아예 없었다. 밑줄만 긋지 않는다 —
   여기까지 내려오는 분 중에 어르신이 있다. */
.site-foot__home {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 16px; margin-top: 4px;
  border: 2px solid var(--ink-2, #5b544d); border-radius: 10px;
  color: var(--ink-1, #2b2724);
  font-size: 15px; font-weight: 800; text-decoration: none;
}
.site-foot__home:hover, .site-foot__home:focus-visible {
  background: var(--ink-1, #2b2724); color: var(--paper-0, #fff);
  border-color: var(--ink-1, #2b2724);
}
@media print { .site-foot__home { display: none !important; } }
@media (max-width: 640px) {
  /* 좁으면 안내 문구를 줄이고 단추를 살린다 — 돌아가는 길이 먼저다. */
  .cross-back__t { font-size: 15px; width: 100%; }
  .cross-back__go { flex: 1 1 auto; justify-content: center; }
}
@media print { .cross-back { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   patch58 · 청소년 화면에서 «누르는 것이 손가락보다 작던» 자리
   --------------------------------------------------------------------------
   360px 폭에서 재어 보니 관련어 고리(.xlink) 27px · 칩(.chip) 28px ·
   찾기 칸 속의 input 24px 이었다. 애플·구글이 함께 권하는 최소는 44px 이고
   빽빽한 목록이라 거기까지는 못 가더라도, **32px 아래는 헛누름이 잦다**.
   시니어 트랙은 이미 44px(--tap)로 맞춰 두었고 여기서 걸린 것이 없었다.

   ⚠ 높이만 올리면 줄 간격이 벌어져 목록이 성기어진다. 그래서 padding 이 아니라
      min-height 로 «누를 수 있는 넓이»만 넓히고 글자 크기는 그대로 둔다.       */
.xlink { min-height: 32px; padding: 4px 11px; }
.chip { min-height: 32px; padding: 4px 11px; }
/* 찾기 칸은 겉상자가 이미 44px 인데 **속의 input 이 24px** 이라, 상자의
   위아래 여백을 눌러도 글쇠가 열리지 않았다. 속을 겉만큼 키워 상자 어디를
   눌러도 바로 쓸 수 있게 한다. */
.search input { min-height: var(--tap, 44px); }
.brand { min-height: 40px; }

/* 10.5px 은 휴대폰에서 읽기에 너무 작다 — 꼬리표·갈래 이름이 다 이 크기였다.
   11.5px 로만 올려도 눈에 띄게 낫고, 자리 차지는 거의 안 늘어난다. */
.xlink__k { font-size: 11.5px; }

/* 사건 카드의 「계백 →」 — 인물 카드로 건너가는 링크인데 밑줄도 테두리도 없고
   높이가 22px 이었다. 글 속이 아니라 **칸 안에 홀로 선** 링크라 크기를 줄 수 있다. */
.actor-go {
  display: inline-flex; align-items: center; min-height: 32px;
  font-weight: 700; color: var(--ink-1);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.actor-go:hover, .actor-go:focus-visible { text-decoration-thickness: 2.5px; }