/* ============================================================================
   메모리코드 · youth.css   (L3 — /youth 전용 화면)
   ----------------------------------------------------------------------------
   고밀도 14px · SRS · 타이머 · 오답 판정이 있는 화면. 시니어는 이 파일을 읽지 않는다.
   ========================================================================== */

/* ── 페이지 머리 ───────────────────────────────────────────────────────── */
.page-head { padding: var(--space-4) 0 var(--space-3); }
.page-head h1 {
  margin: 0 0 4px; font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: -.03em; line-height: 1.25;
}
.page-head p { margin: 0; color: var(--ink-2); }
.page-head .kicker {
  display: inline-block; font-size: var(--font-caption); font-weight: 800;
  letter-spacing: .12em; color: var(--ink-3); margin-bottom: 6px;
}

/* ── 히어로(청소년 홈) ─────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.25fr .95fr; gap: var(--space-4);
  align-items: stretch; padding: var(--space-4) 0;
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.hero__title { font-size: clamp(26px, 4.6vw, 42px); line-height: 1.18; letter-spacing: -.035em; margin: 0 0 10px; }
.hero__title em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--chart-4) 45%, transparent) 0); }
.hero__lead { color: var(--ink-2); margin: 0 0 var(--space-3); max-width: 46ch; }

.gate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 720px) { .gate { grid-template-columns: 1fr; } }
.gate__door {
  position: relative; display: block; text-decoration: none;
  border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  padding: var(--space-4); background: var(--paper-0);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.gate__door:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.10); border-color: var(--ink-3); }
.gate__door::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--accent, var(--ink-1));
}
.gate__door[aria-disabled="true"] { opacity: .62; pointer-events: none; }
.gate__ico { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.gate__t { font-size: calc(var(--font-title) + 3px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.gate__d { color: var(--ink-2); margin: 0 0 12px; }
.gate__meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 학습 코스 카드 ────────────────────────────────────────────────────── */
.courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.course {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  background: var(--paper-0); padding: var(--space-3) var(--space-4) var(--space-4);
  transition: transform .12s ease, box-shadow .18s ease;
}
.course:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.course__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.course__t { font-size: calc(var(--font-title)); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.course__d { color: var(--ink-2); margin: 0; font-size: var(--font-caption); }
.course__n { font-family: var(--font-mono); font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 인물 격자 ─────────────────────────────────────────────────────────── */
.grid-people {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
.pcard {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--paper-line); border-radius: var(--radius-md);
  background: var(--paper-0); overflow: hidden; cursor: pointer;
  text-align: left; padding: 0; width: 100%; font: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); border-color: var(--era-c, var(--paper-edge)); }
.pcard__band { height: 4px; background: var(--era-c, var(--ink-3)); flex: none; }
/* 초상 칸은 그림과 같은 **세로 3:4**.
   전에는 가로 4:3 칸에 세로 3:4 초상을 넣고 잘라 채웠는데(cover), 그러면 세로의 56%만
   보여서 갓·모자·왕관이 잘려 나갔다. 칸을 그림 비율에 맞추고 `contain` 으로 바꿔
   **어떤 초상도 잘리지 않게** 한다. 3:4 그림은 칸을 정확히 채우므로 여백도 생기지 않는다. */
.pcard__fig {
  position: relative; aspect-ratio: 3 / 4; background: var(--paper-2);
  overflow: hidden; display: grid; place-items: center;
}
.pcard__fig img { width: 100%; height: 100%; object-fit: contain; }
.pcard__no {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; font-weight: 800;
  background: color-mix(in srgb, var(--ink-1) 82%, transparent); color: var(--paper-0);
  padding: 2px 6px; border-radius: 5px; letter-spacing: .02em;
}
.pcard__side {
  position: absolute; right: 7px; top: 7px; z-index: 2;
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper-0) 88%, transparent);
  border: 1px solid var(--paper-edge); color: var(--ink-2);
}
.pcard__body { padding: 9px 11px 12px; display: grid; gap: 3px; }
.pcard__name { font-weight: 800; font-size: calc(var(--font-body) + 2px); letter-spacing: -.02em; }
.pcard__sub { color: var(--ink-3); font-size: var(--font-caption); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ⚠ 시대색을 **글자색으로 쓰지 않는다**(patch63).
   11px 짜리 시대 이름에 시대색을 얹으니 밝은 모드 3.61 · 어두운 모드 3.01~4.1 로
   양쪽 다 작은 글자 AA(4.5) 미달이었다(2026-08-19 실측).
   시대색은 위쪽 4px 띠(.pcard__band)가 이미 나르고 있고, 이름은 «글자»로 적혀 있다 —
   색이 더 나르는 뜻이 없다. tokens.css [2] 의 «시대색은 정체성 전용» 이라는 규칙
   그대로다. 넓은 면에는 쓰되 작은 글자에는 쓰지 않는다. */
.pcard__era {
  margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--ink-2);
  letter-spacing: .02em;
}
.pcard__mem {
  position: absolute; right: 7px; bottom: 7px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: var(--paper-0);
}

/* 자리표(.ph)는 **두 트랙이 함께 쓰는 부품**이라 base.css 로 옮겼다(2026-08-17).
   media.js 가 만드는 것이므로 /senior 화면에서도 그대로 나온다 —
   여기 두면 시니어 화면에서만 스타일이 빠진다(patch31·38 과 같은 사고). */

/* ── 인물 상세 ─────────────────────────────────────────────────────────── */
.detail__hero { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .detail__hero { grid-template-columns: 1fr; } }
/* 상세 화면의 초상도 3:4. 아래 '장면으로 기억하기' 칸은 인라인으로 16/9 를 덮어쓴다.
   둘 다 contain 이라 어느 쪽도 잘리지 않는다. */
.detail__fig { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--paper-line); aspect-ratio: 3/4; background: var(--paper-2); }
.detail__fig img { width: 100%; height: 100%; object-fit: contain; }
.detail__name { font-size: clamp(24px, 3.6vw, 32px); margin: 6px 0 2px; letter-spacing: -.03em; }
.detail__sub { color: var(--ink-2); margin: 0 0 10px; }
.detail__years {
  font-family: var(--font-mono); font-weight: 800; color: var(--era-c, var(--ink-2));
  background: color-mix(in srgb, var(--era-c, var(--ink-3)) 12%, transparent);
  display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: var(--font-caption);
}

.sec { margin-top: var(--space-4); }
.sec__h {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: calc(var(--font-title) - 1px); letter-spacing: -.02em;
}
.sec__h::after { content: ""; flex: 1; height: 1px; background: var(--paper-line); }
.sec__badge {
  font-size: 11px; font-weight: 800; color: var(--paper-0); background: var(--ink-3);
  border-radius: 999px; padding: 2px 8px;
}

.factbox {
  background: var(--paper-2); border-left: 4px solid var(--era-c, var(--ink-3));
  border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 12px 14px;
}
.kw { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* 연표 */
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 5px; bottom: 5px; width: 2px; background: var(--paper-line); }
.tl__i { position: relative; padding: 6px 0 6px 4px; display: grid; grid-template-columns: 88px 1fr; gap: 10px; }
.tl__i::before {
  content: ""; position: absolute; left: -19px; top: 13px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--paper-0); border: 2px solid var(--era-c, var(--ink-3));
}
.tl__y { font-family: var(--font-mono); font-weight: 800; font-size: var(--font-caption); color: var(--ink-2); padding-top: 2px; }
@media (max-width: 560px) { .tl__i { grid-template-columns: 1fr; gap: 2px; } }

/* 한능검 패턴 */
.exam { display: grid; gap: 7px; }
.exam__i {
  display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: start;
  background: var(--paper-0); border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm); padding: 9px 11px;
}
.exam__m { font-weight: 800; color: var(--chart-1); }

/* 짝 인물 */
.pair {
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  border: 1px dashed var(--paper-edge); border-radius: var(--radius-md);
  padding: 12px 14px; background: var(--paper-0); width: 100%; text-align: left;
  cursor: pointer; font: inherit; color: inherit;
}
.pair:hover { background: var(--paper-2); }
.pair__ico { font-size: 22px; }
.pair__t { font-weight: 800; }
.pair__d { color: var(--ink-2); font-size: var(--font-caption); }

/* ── 사자성어 ──────────────────────────────────────────────────────────── */
.grid-idioms { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.icard {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--paper-line); border-radius: var(--radius-md);
  background: var(--paper-0); padding: 13px 14px 14px; cursor: pointer;
  text-align: left; width: 100%; font: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .18s ease;
}
.icard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.icard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cat, var(--ink-3)); }
.icard__top { display: flex; gap: 10px; align-items: flex-start; }
.icard__thumb {
  width: 62px; height: 62px; flex: none; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--paper-2); border: 1px solid var(--paper-line);
}
.icard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.icard__thumb .ph { font-size: 10px; }
.icard__hanja {
  font-family: var(--font-serif); font-size: 25px; font-weight: 700;
  letter-spacing: .1em; line-height: 1.2;
}
.icard__ko { font-weight: 800; font-size: calc(var(--font-body) + 1px); letter-spacing: -.01em; }
.icard__mean { color: var(--ink-2); font-size: var(--font-caption); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.icard__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 4px; border: 1px solid var(--paper-line);
  background: var(--paper-2); color: var(--ink-2);
}
/* 초등 → 중등 → 고등 순으로 색이 진해진다. 색만 봐도 난이도가 읽히게. */
.tag--elem { color: #fff; background: var(--chart-3); border-color: transparent; }
.tag--mid { color: #fff; background: var(--chart-1); border-color: transparent; }
.tag--high { color: #fff; background: var(--chart-7); border-color: transparent; }
.tag--must { color: #fff; background: var(--chart-8); border-color: transparent; }

/* 성어 상세 */
.idiom-hero { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .idiom-hero { grid-template-columns: 1fr; } }
.idiom-hero__hanja { font-family: var(--font-serif); font-size: clamp(38px, 7vw, 58px); letter-spacing: .12em; line-height: 1.1; margin: 0; }
.idiom-hero__ko { font-size: calc(var(--font-title) + 2px); font-weight: 800; color: var(--ink-2); margin: 4px 0 10px; letter-spacing: .02em; }
.idiom-hero__fig { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--paper-line); background: var(--paper-2); min-height: 120px; }
.idiom-hero__fig .ph { aspect-ratio: 4 / 3; }
.idiom-hero__fig img { width: 100%; height: auto; }

.hanja-break { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.hb {
  border: 1px solid var(--paper-line); border-radius: var(--radius-md);
  background: var(--paper-0); padding: 10px; text-align: center;
}
.hb__c { font-family: var(--font-serif); font-size: 34px; line-height: 1.1; }
.hb__g { font-weight: 800; margin-top: 4px; }
.hb__r { font-size: var(--font-caption); color: var(--ink-3); margin-top: 2px; }

.quote {
  background: var(--paper-2); border-radius: var(--radius-md); padding: 13px 15px;
  border-left: 4px solid var(--chart-7);
}
.quote__t { font-family: var(--font-serif); font-size: calc(var(--font-body) + 3px); letter-spacing: .04em; }
.quote__k { color: var(--ink-2); margin-top: 6px; }
.quote__s { color: var(--ink-3); font-size: var(--font-caption); margin-top: 6px; }

/* ── 복습(SRS) ─────────────────────────────────────────────────────────── */
.srs-stage { display: grid; gap: var(--space-3); }
.srs-bar { display: flex; align-items: center; gap: 12px; }
.srs-bar__c { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.srs-card {
  background: var(--paper-0); border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4);
  min-height: 290px; display: grid; align-content: center; justify-items: center;
  text-align: center; gap: var(--space-3);
}
.srs-card__type {
  font-size: var(--font-caption); font-weight: 800; letter-spacing: .1em;
  color: var(--ink-3); text-transform: uppercase;
}
.srs-card__q { font-size: clamp(19px, 3vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.4; max-width: 34ch; }
.srs-card__hanja { font-family: var(--font-serif); font-size: clamp(34px, 6vw, 52px); letter-spacing: .12em; }
.srs-card__a {
  font-size: calc(var(--font-body) + 4px); color: var(--ink-1); max-width: 44ch;
  background: var(--paper-2); border-radius: var(--radius-md); padding: 14px 18px;
}
.srs-card__hint { color: var(--ink-3); font-size: var(--font-caption); }

.mcq { display: grid; gap: 8px; width: min(560px, 100%); }
.mcq__b {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--paper-edge); background: var(--paper-0);
  border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer;
  min-height: var(--tap, 44px); font-weight: 600; transition: background .12s ease;
}
.mcq__b:hover:not([disabled]) { background: var(--paper-2); }
.mcq__b .k {
  width: 24px; height: 24px; flex: none; border-radius: 6px; display: grid; place-items: center;
  background: var(--paper-2); font-family: var(--font-mono); font-weight: 800; font-size: 12px;
}
.mcq__b[data-state="right"] { border-color: var(--status-good); background: color-mix(in srgb, var(--status-good) 12%, var(--paper-0)); }
.mcq__b[data-state="wrong"] { border-color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 12%, var(--paper-0)); }
.mcq__b[data-state="right"] .k { background: var(--status-good); color: #fff; }
.mcq__b[data-state="wrong"] .k { background: var(--status-critical); color: #fff; }

.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(560px, 100%); }
.rate__b {
  border: 1px solid var(--paper-edge); background: var(--paper-0);
  border-radius: var(--radius-md); padding: 10px 6px; cursor: pointer;
  display: grid; gap: 2px; justify-items: center; min-height: var(--tap, 44px);
}
.rate__b:hover { background: var(--paper-2); }
.rate__b b { font-size: var(--font-body); }
.rate__b span { font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); }
.rate__b[data-q="0"] b { color: var(--status-critical); }
.rate__b[data-q="1"] b { color: var(--status-serious); }
.rate__b[data-q="2"] b { color: var(--chart-1); }
.rate__b[data-q="3"] b { color: var(--status-good); }

.timer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 700; }

/* 히트맵 */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat__d { width: 11px; height: 11px; border-radius: 2px; background: var(--paper-2); }
.heat__d[data-l="1"] { background: var(--chart-seq-200); }
.heat__d[data-l="2"] { background: var(--chart-seq-300); }
.heat__d[data-l="3"] { background: var(--chart-seq-400); }
.heat__d[data-l="4"] { background: var(--chart-seq-500); }

/* ── /method 도식 ──────────────────────────────────────────────────────── */
.figure { margin: var(--space-4) 0; }
.figure svg { width: 100%; height: auto; display: block; }
.figure__cap { font-size: var(--font-caption); color: var(--ink-3); margin-top: 8px; text-align: center; }
.principle {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px;
  padding: var(--space-4) 0; border-top: 1px solid var(--paper-line);
}
.principle__n {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ink-1); color: var(--paper-0); font-family: var(--font-mono);
  font-weight: 800; font-size: 19px;
}
.principle h3 { margin: 2px 0 6px; font-size: calc(var(--font-title)); letter-spacing: -.02em; }
.principle p { margin: 0 0 8px; color: var(--ink-2); }
.evidence {
  font-size: var(--font-caption); color: var(--ink-3);
  border-left: 3px solid var(--chart-3); padding-left: 10px;
}

/* 초상이 없어 삽화로 대신 채운 칸 — 그 그림을 얼굴로 오해하지 않게 아래에 한 줄 적는다. */
.pcard__wrapfig { position: absolute; inset: 0; display: block; }
.pcard__wrapfig img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pcard__alt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  padding: 4px 8px 5px; color: var(--paper-0);
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================================
   patch60 · 입구 — 그림 한 장 + 오늘 할 일 하나
   ----------------------------------------------------------------------------
   2026-08-19 실측: 청소년 홈 첫 화면의 그림 면적이 **0.0%** 였다.
   그림을 715장 만들어 두고 첫 화면에 한 장도 안 보였다. 이 칸이 그것을 고친다.
   ⚠ 그림칸 높이를 px 로 못박지 않는다 — 시니어 트랙에서 겪은 그대로다(patch58).
      대신 vh 와 aspect-ratio 로 잡는다. 글이 커져도 그림이 화면을 다 먹지 않는다.
   ========================================================================== */
.entry { margin-top: var(--space-4); }

.entry__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: var(--paper-0);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.entry__fig {
  position: relative;
  background: var(--paper-2);
  overflow: hidden;
  /* ⚠ width 를 못박지 않으면 aspect-ratio 와 max-height 가 만나 **폭까지 줄인다.**
     3/4 × 46vh 로 두었더니 390px 화면에서 그림이 291px 로 쪼그라들고
     오른쪽에 흰 띠가 생겼다(2026-08-19). 높이만 자르고 폭은 100% 로 둔다. */
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 42vh;
}
.entry__fig img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* ⚠ 확대 금지 규칙(images_pipeline). 원본보다 크게 늘리지 않는다 —
     object-fit:cover 는 «잘라서 채우는» 것이지 «늘리는» 것이 아니다. */
}
/* 초상은 세로가 길다. 4:3 칸에 넣으면 얼굴 위아래가 잘린다. */
.entry__fig--people { aspect-ratio: 3 / 4; max-height: 46vh; }
.entry__fig--none   { display: none; }

.entry__body { padding: var(--space-4); }

.entry__eyebrow {
  margin: 0 0 6px;
  font-size: var(--font-caption);
  letter-spacing: .04em;
  color: var(--ink-3);
}
.entry__t {
  margin: 0 0 6px;
  font-size: clamp(24px, 6.4vw, 34px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink-1);
}
.entry__t em { font-style: normal; color: var(--accent-1); }
.entry__d {
  margin: 0 0 var(--space-3);
  font-size: calc(var(--font-body) + 1px);
  color: var(--ink-2);
}

/* 첫 화면의 «할 것»은 이 하나뿐이다. 나머지는 전부 접었다. */
/* ⚠ 검정이었다. 트렌드의 «고채도»가 붙을 자리는 팔레트 전체가 아니라 **이 단추 하나**다
   (patch64). 단청청 — 한지 대비 4.37 · 흰 글자 대비 4.85 로 검증한 값. */
.entry__go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-1);
  color: var(--accent-ink);
  font-size: 17px; font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.entry__go:hover, .entry__go:focus-visible { filter: brightness(1.08); }
.entry__go:active { transform: scale(.985); }   /* 눌리는 느낌 — 0.12초 */
.entry__go__arrow { font-weight: 400; }

.entry__meta {
  margin: var(--space-3) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: var(--font-caption);
  color: var(--ink-3);
}
.entry__meta b { color: var(--ink-1); font-size: calc(var(--font-caption) + 3px); }

/* ── 오늘 얼마나 왔나 ─────────────────────────────────────────────────── */
.prog { margin: var(--space-3) 0 0; }
.prog__track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--paper-line);
}
.prog__fill {
  height: 100%; border-radius: 999px;
  background: var(--accent-1);
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.prog--done .prog__fill { background: var(--status-good); }
.prog__t { margin: 6px 0 0; font-size: var(--font-caption); color: var(--ink-2); }
.prog__t b { color: var(--ink-1); font-weight: 800; }
.entry__dot { color: var(--paper-edge); }

@media (min-width: 720px) {
  .entry__card { grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; }
  .entry__fig, .entry__fig--people { aspect-ratio: auto; max-height: none; height: 100%; min-height: 300px; }
  .entry__body { padding: var(--space-5); align-self: center; }
  .entry__go { display: inline-flex; }
}

/* ── 모두 보기 ─────────────────────────────────────────────────────────
   지우지 않고 접는다. 지우면 «없앤 것»이고 접으면 «찾을 수 있는 것»이다.
   ⚠ summary 는 누르는 자리다 — 44px 을 반드시 넘긴다(audit_ux ②).
   ⚠ 링크처럼 보여야 누른다(audit_ux ⑦) — 테두리와 꺾쇠를 준다. */
.more {
  margin-top: var(--space-4);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  background: var(--paper-0);
}
.more__sum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}
.more__sum::-webkit-details-marker { display: none; }
.more__sum__t { font-weight: 700; font-size: 16px; color: var(--ink-1); }
.more__sum__n { flex: 1 1 100%; font-size: var(--font-caption); color: var(--ink-3); }
.more__sum__chev { margin-left: auto; color: var(--ink-3); font-size: 15px; }
.more[open] .more__sum { border-bottom: 1px solid var(--paper-line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.more[open] .more__sum__chev { transform: rotate(180deg); }
.more__sum:hover { background: var(--paper-1); }
.more__body { padding: var(--space-4); }
.more__body > section:first-child { margin-top: 0; }

@media (min-width: 720px) {
  .more__sum__n { flex: 0 1 auto; }
}

/* 인쇄에는 접힌 것을 펼쳐서 낸다 — 종이에는 «누를 것»이 없다. */
@media print {
  .more__body { display: block !important; }
  .more__sum__chev { display: none; }
}

/* ============================================================================
   patch61 · 목록을 «줄»로 — 좁은 화면이 기본이 된다
   ----------------------------------------------------------------------------
   2026-08-19 실측(390×844). 목록 화면이 폰에서 이렇게 길었다.

       인물카드  한 칸 572px × 123 = **81.1화면**
       사자성어  한 칸 147px × 234 = **45.6화면**

   까닭은 «카드»를 목록에 그대로 깐 것이다. 넓은 화면에서는 6열로 예쁘게 깔리지만
   폰에서는 1열이 되어 카드 하나가 화면의 3분의 2를 먹는다.

   ⚠ **여기서부터 기준을 뒤집는다.** 이 아래 규칙은 «좁은 화면»이 기본이고,
      640px 부터 지금까지의 격자 카드로 되돌린다(min-width). 앞쪽의 옛 규칙들을
      전부 다시 쓰지는 않았다 — 눈에 보이는 값이 없는 데다, 20화면을 한꺼번에
      건드리는 위험이 이득보다 크다. **목록만 뒤집는다.**
   ⚠ 마크업은 한 줄도 안 고쳤다. 카드가 이미 «그림 + 글» 두 덩이라 방향만 눕히면 된다.
   ========================================================================== */

/* ── 머리글 — 폰에서는 설명을 두 줄로 접는다 ────────────────────────────
   목록 화면마다 제목+설명이 163~185px 를 먹었다. 설명은 «처음 한 번» 읽는 글이고,
   목록은 «올 때마다» 보는 것이다. 폰에서는 목록이 먼저 보여야 한다.
   ⚠ 지우지 않는다 — 두 줄까지는 그대로 보이고, 640px 부터는 전문이 나온다. */
.page-head { padding: var(--space-3) 0 10px; }
.page-head p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--font-caption); line-height: 1.5;
}

/* ── 인물카드 — 572px → 88px ────────────────────────────────────────── */
.grid-people { gap: 8px; }
.pcard { flex-direction: row; align-items: stretch; }
.pcard:hover { transform: none; }              /* 줄에서는 떠오르는 효과가 어지럽다 */
.pcard__band { height: auto; width: 4px; }
.pcard__fig  { width: 66px; flex: none; }      /* 3/4 비율이라 높이 88px 로 정해진다 */
.pcard__fig img { object-fit: cover; }         /* 작은 칸에서는 여백보다 얼굴이 낫다 */
.pcard__side { display: none; }                /* 66px 안에서 번호와 겹친다. 진영은 고르개에 있다 */
.pcard__body {
  flex: 1 1 auto; min-width: 0;
  align-content: center; padding: 8px 12px; gap: 2px;
}
.pcard__sub { -webkit-line-clamp: 1; }

/* ── 사자성어 — 147px → 약 94px ─────────────────────────────────────── */
.grid-idioms { gap: 8px; }
.icard { padding: 10px 12px; gap: 4px; }
.icard:hover { transform: none; }
.icard__top   { gap: 10px; align-items: center; }
.icard__thumb { width: 52px; height: 52px; }
.icard__hanja { font-size: 20px; line-height: 1.15; letter-spacing: .06em; }
.icard__ko    { font-size: calc(var(--font-body) - 1px); }
.icard__mean  { -webkit-line-clamp: 1; }
.icard__tags  { display: none; }               /* 갈래·난이도는 고르개가 이미 말한다 */

/* ── 고르개 접기 ───────────────────────────────────────────────────────
   `.filters` 가 폰에서 244~405px 를 먹고 있었다. 접되 **검색칸은 꺼내 둔다.** */
.ffold {
  margin: 0 auto var(--space-3);
  width: min(1160px, 100% - 32px);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--paper-0);
}
.ffold__sum {
  display: flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 8px 14px;
  cursor: pointer; list-style: none; border-radius: var(--radius-md);
}
.ffold__sum::-webkit-details-marker { display: none; }
.ffold__sum__t { font-weight: 800; font-size: var(--font-body); flex: none; }
.ffold__now {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--font-caption); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ffold__chev { flex: none; color: var(--ink-3); }
.ffold[open] .ffold__chev { transform: rotate(180deg); }
.ffold[open] .ffold__sum  { border-bottom: 1px solid var(--paper-line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.ffold__sum:hover { background: var(--paper-1); }
.ffold .filters { padding: 10px 14px 12px; width: auto; }
.ffold__search  { margin: 0 auto var(--space-2); width: min(1160px, 100% - 32px); }
.ffold__search label { display: flex; width: 100%; }
.ffold__search input { width: 100%; }
/* 덩이 접기(도식 등)는 고르개 접기와 같은 생김새를 쓴다 — 두 벌을 만들지 않는다. */
.ffold--sec { margin-bottom: var(--space-3); }
.ffold--sec > .wrap { width: auto; padding: 10px 14px 12px; }

/* ══════════════════════════════════════════════════════════════════════
   640px 부터 — 지금까지의 격자 카드로 되돌린다
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .page-head { padding: var(--space-4) 0 var(--space-3); }
  .page-head p { display: block; overflow: visible; font-size: inherit; line-height: inherit; }

  .grid-people, .grid-idioms { gap: var(--space-3); }

  .pcard { flex-direction: column; }
  .pcard:hover { transform: translateY(-3px); }
  .pcard__band { height: 4px; width: auto; }
  .pcard__fig  { width: auto; }
  .pcard__fig img { object-fit: contain; }
  .pcard__side { display: block; }
  .pcard__body { padding: 9px 11px 12px; gap: 3px; align-content: start; }
  .pcard__sub  { -webkit-line-clamp: 2; }

  .icard { padding: 13px 14px 14px; gap: 6px; }
  .icard:hover { transform: translateY(-2px); }
  .icard__top   { gap: 10px; align-items: flex-start; }
  .icard__thumb { width: 62px; height: 62px; }
  .icard__hanja { font-size: 25px; line-height: 1.2; letter-spacing: .1em; }
  .icard__ko    { font-size: calc(var(--font-body) + 1px); }
  .icard__mean  { -webkit-line-clamp: 2; }
  .icard__tags  { display: flex; }

  /* 넓은 화면에는 `.ffold` 가 **문서에 아예 없다** — JS 가 걷어 낸다(core.js tear()).
     그래서 여기에 되돌리는 규칙을 둘 필요가 없다. 문서가 patch61 이전과 똑같아진다. */
}

/* 의견 보내기 (patch65) — 주소를 넣기 전에는 문서에 아예 없다 */
.site-foot__fb { font-weight: 800; text-decoration: underline; }