/* ============================================================================
   메모리코드 · senior.css   (L3 — /senior 화면 전용)
   ----------------------------------------------------------------------------
   글자 크기·줄간·터치영역 같은 **축척은 여기서 정하지 않는다.**
   tokens.css 의 .track-senior 가 이미 정해 두었다(본문 20px · 줄간 1.9 · 탭 56px).
   여기에는 그 축척 위에 얹는 «생김새»만 둔다.

   ⚠ 두 트랙이 함께 쓰는 부품은 여기 두지 말 것 → base.css 로.
      (patch31·38 에서 두 번 난 사고: .xlinks · .chip--new 가 한쪽 CSS 에만 있었다)
   ⚠ 이 화면에는 점수·타이머·진도율 막대가 없다. 그래서 .bar / .chip--done 계열을
      쓰지 않는다 — 스타일을 만들어 두면 언젠가 누가 쓴다.
   ========================================================================== */

/* 한 단계 더 큰 글씨. 어르신 화면에서 가장 많이 필요한 조절 하나만 남긴다. */
.track-senior--xl {
  --font-body:    24px;
  --font-title:   33px;
  --font-caption: 20px;
}

/* ── 머리글 ──────────────────────────────────────────────────────────── */
.sr-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper-0);
  border-bottom: 2px solid var(--paper-edge);
}
.sr-head__in {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: calc(var(--tap) + 14px); flex-wrap: wrap; padding: 8px 0;
}
.sr-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.sr-brand__mark {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--ink-1); color: var(--paper-0);
  font-family: var(--font-serif); font-size: 26px;
}
.sr-brand__name { display: block; font-weight: 800; font-size: var(--font-body); letter-spacing: -.02em; }
.sr-brand__track { display: block; font-size: var(--font-caption); color: var(--ink-2); }

.sr-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 18px; border-radius: 10px; text-decoration: none;
  font-size: var(--font-body); font-weight: 700; color: var(--ink-2);
  border: 2px solid transparent;
}
.sr-nav a:hover { background: var(--paper-2); color: var(--ink-1); }
.sr-nav a[aria-current="page"] { background: var(--ink-1); color: var(--paper-0); }

/* ── 단추 ────────────────────────────────────────────────────────────── */
.sr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 22px;
  border: 2px solid var(--paper-edge); border-radius: 12px;
  background: var(--paper-0); color: var(--ink-1);
  font-size: var(--font-body); font-weight: 700; line-height: 1.3;
  text-decoration: none; cursor: pointer;
}
.sr-btn:hover { background: var(--paper-2); }
.sr-btn:active { transform: translateY(1px); }
.sr-btn--go { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }
.sr-btn--go:hover { background: var(--ink-2); }
.sr-btn--quiet { border-color: transparent; color: var(--ink-2); padding: 0 14px; }
.sr-btn--quiet:hover { border-color: var(--paper-edge); }
.sr-btn--quiet[aria-pressed="true"] { background: var(--ink-1); color: var(--paper-0); }
.sr-btn--sm { min-height: 48px; padding: 0 16px; font-size: var(--font-caption); }
.sr-btn--back { border-color: transparent; padding-left: 6px; }
.sr-btn--speak[aria-pressed="true"] { background: var(--cat-grace); color: #fff; border-color: transparent; }
.sr-btn--love[aria-pressed="true"] { border-color: var(--cat-relation); color: var(--cat-relation); }
.sr-speak { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-speak__rate { display: inline-flex; gap: 4px; }

/* ── 지면 ────────────────────────────────────────────────────────────── */
.sr-page { padding: calc(var(--space-4) * var(--density)) 0 var(--space-5); }
.sr-page > * + * { margin-top: calc(var(--space-4) * var(--density)); }

.sr-hero { text-align: center; padding: var(--space-4) 0 var(--space-2); }
.sr-hero--sm { text-align: left; padding-bottom: 0; }
.sr-hero__t {
  font-family: var(--font-serif); font-size: calc(var(--font-title) + 8px);
  margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.35;
}
.sr-hero__d { margin: 0; color: var(--ink-2); font-size: var(--font-body); }
.sr-hero__n { margin: 10px 0 0; color: var(--ink-3); font-size: var(--font-caption); font-weight: 700; }

.sr-h2 {
  font-family: var(--font-serif); font-size: var(--font-title);
  margin: 0 0 6px; letter-spacing: -.02em;
}
.sr-h3 { font-size: calc(var(--font-body) + 2px); margin: var(--space-4) 0 4px; }
.sr-lead { margin: 0 0 var(--space-3); color: var(--ink-2); }
.sr-body { margin: 0 0 .7em; }
.sr-body:last-child { margin-bottom: 0; }
.sr-note {
  margin: var(--space-3) 0 0; padding: 14px 18px;
  background: var(--paper-2); border-radius: 10px;
  color: var(--ink-2); font-size: var(--font-caption); line-height: 1.7;
}
.sr-panel {
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-radius: 16px; padding: var(--space-4);
}
.sr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-3) 0 0; }
.sr-actions--foot { margin-top: var(--space-4); }

/* ── 이어서 보기 ─────────────────────────────────────────────────────── */
.sr-resume {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  /* ⚠ 색을 못박지 않는다 — 어두운 모드에서 밝은 바탕에 밝은 글자가 되어 안 보였다.
     바탕색에 갈래색을 아주 옅게 섞는다. 두 모드 모두 저절로 맞는다. */
  background: color-mix(in srgb, var(--cat-grace) 12%, var(--paper-0));
  border: 2px solid var(--cat-grace);
  border-radius: 16px; padding: var(--space-3) var(--space-4);
}
.sr-resume__t { margin: 0; font-weight: 700; }

/* ── 주차 타일 ───────────────────────────────────────────────────────── */
.sr-weeks,
.sr-eras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
/* 인쇄 고르기 화면에는 시대 타일이 두 벌 선다 — 인물 7 + 한국사 7.
   그릇을 나눈 것은 세는 쪽을 위해서지만(qa3), 어르신 눈에도 두 벌이 구분되어야 한다.
   왼쪽에 갈래 색 띠 한 줄을 둔다 — 글자를 늘리지 않고 구분한다. */
.sr-eras--people  .sr-week { border-left: 6px solid var(--cat-wisdom); }
.sr-eras--history .sr-week { border-left: 6px solid var(--cat-life); }
.sr-eras--things  .sr-week { border-left: 6px solid var(--cat-effort); }
/* 다섯째 갈래(patch51). 그릇을 나누는 까닭은 색만이 아니다 — 인쇄 고르기 타일을
   세는 검수가 «타일 합계 ≠ 데이터»로 잡으려면 갈래마다 그릇이 달라야 한다. */
.sr-eras--customs .sr-week { border-left: 6px solid var(--cat-relation); }
.sr-week {
  display: block; text-decoration: none;
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-radius: 14px; padding: 16px 18px; min-height: var(--tap);
}
.sr-week:hover { border-color: var(--ink-2); }
.sr-week__hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sr-week__no { font-weight: 800; font-size: calc(var(--font-body) + 3px); flex: none; }
.sr-week__theme { color: var(--ink-2); }
.sr-week__n { display: block; margin-top: 4px; color: var(--ink-3); font-size: var(--font-caption); }
.sr-week__how { display: block; margin-top: 6px; color: var(--ink-3); font-size: var(--font-caption); }

/* 본 것에만 색이 든다. 안 본 것은 «비어 있다»고 말하지 않는다. */
.sr-dots { display: flex; gap: 6px; margin-top: 8px; }
.sr-dots--none { display: none; }
.sr-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--paper-edge);
}
.sr-dot--on { background: var(--cat-grace); border-color: var(--cat-grace); }

/* ── 갈래 ────────────────────────────────────────────────────────────── */
.sr-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sr-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; min-height: var(--tap);
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-left: 10px solid var(--cat, var(--ink-3));
  border-radius: 12px; padding: 12px 18px;
}
.sr-cat:hover { border-color: var(--ink-2); border-left-color: var(--cat, var(--ink-3)); }
.sr-cat__n { font-weight: 700; }
.sr-cat__c { color: var(--ink-3); font-size: var(--font-caption); }

/* ── 묶음 고르기 · 목록 ──────────────────────────────────────────────── */
.sr-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-pick {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px;
  border: 2px solid var(--paper-edge); border-radius: 10px;
  background: var(--paper-0); color: var(--ink-2);
  text-decoration: none; font-size: var(--font-caption); font-weight: 700;
}
.sr-pick:hover { background: var(--paper-2); color: var(--ink-1); }
.sr-pick--on { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }

/* ⚠ `display:grid` 만 두면 칸(track)이 **auto** 라 min-content 만큼 넓어진다.
   목록 줄 하나가 400px 을 원하면 칸이 400px 이 되고, 그래서 360px 화면에서
   화면 전체가 옆으로 밀린다(2026-08-18 발견). `minmax(0, 1fr)` 로 못박아
   «칸은 절대로 화면보다 넓어지지 않는다» 를 먼저 세운다 — 이것이 없으면
   아래 줄바꿈 손질이 전부 소용없다. */
.sr-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sr-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: calc(var(--tap) + 16px); padding: 12px 18px; text-align: left;
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-radius: 12px; cursor: pointer;
}
.sr-row:hover { border-color: var(--ink-2); }
.sr-row--seen { background: var(--paper-1); }
.sr-row__hanja {
  font-family: var(--font-serif); font-size: calc(var(--font-title) - 2px);
  letter-spacing: .06em; flex: none; white-space: nowrap;
}
.sr-row__main { flex: 1 1 auto; min-width: 0; }
.sr-row__ko { display: block; font-weight: 700; }
.sr-row__meaning { display: block; color: var(--ink-2); font-size: var(--font-caption); }
/* ⚠ 여기 `flex: none` 이 사고의 진짜 원인이었다. 꼬리표가 한 치도 안 줄어드니
   가운데 본문(.sr-row__main, min-width:0)이 대신 다 줄어, 360px 화면에서
   「가 / 마 / 솥 / 과」처럼 **한 글자씩 세로로** 떨어졌다. 눈으로 스크롤만
   해서는 못 본다 — 화면 아래쪽 줄에서만 벌어지기 때문이다.
   꼬리표도 같이 줄게 두고(0 1 auto), 낱낱의 알약도 화면을 넘지 않게 묶는다. */
.sr-row__tags {
  display: flex; gap: 6px; flex: 0 1 auto; min-width: 0;
  flex-wrap: wrap; justify-content: flex-end;
}
.sr-row__tags .sr-tag { min-width: 0; max-width: 100%; }

/* ── 꼬리표 ──────────────────────────────────────────────────────────── */
.sr-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: var(--font-caption); font-weight: 700;
  background: var(--paper-0); color: var(--ink-2);
  border: 2px solid var(--cat, var(--paper-edge));
}
.sr-tag--plain { border-color: var(--paper-edge); }
/* ⚠ #7a5c00 · #0d5c40 처럼 색을 못박아 두면 어두운 모드에서 가라앉는다
   (★ 대비 2.69 였다 · 2026-08-19). 먹빛을 쓰고 «색»은 테두리가 나른다.
   글자는 언제나 읽혀야 하고, 색은 곁들이는 것이다. */
.sr-tag--star { border-color: var(--cat-wisdom); color: var(--ink-1); }
.sr-tag--seen { border-color: var(--cat-grace);  color: var(--ink-1); }

/* ── 성어 카드 (5분할) ───────────────────────────────────────────────── */
.sr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sr-card {
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-radius: 18px; padding: var(--space-4);
}
.sr-card > * + * { margin-top: calc(var(--space-3) * var(--density)); }

.sr-card__head { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.sr-card__text { flex: 1 1 320px; min-width: 0; }
/* ⚠ 그림 칸을 px 로 못박으면 «글자만 커지는 화면»이 된다.
   시니어 트랙은 본문이 20px(청소년 15px)이고 「가 크게」를 누르면 24px 이 되는데,
   그림만 그대로 있으면 글자가 커질수록 그림이 상대적으로 작아진다.
   KW 가 「답답하다」고 한 것이 이 자리다(2026-08-17).
   그래서 **글자 크기에 매단다** — 본문이 커지면 그림도 함께 커진다.
   em 이 아니라 calc(var(--font-body) * N) 을 쓰는 까닭은, em 은 그 요소가
   물려받은 글자 크기(설명문·꼬리표마다 다르다)에 걸려 자리마다 달라지기 때문이다. */
.sr-card__fig {
  flex: 0 1 calc(var(--font-body) * 31);      /* 20px → 620 · 24px → 744 */
  /* ⚠ min-width 를 그냥 380px 로 두면 «글자에 매단다» 는 위 뜻이 360px 화면에서
     오히려 독이 된다 — 화면이 380px 보다 좁으면 카드가 화면 밖으로 나간다.
     「가 크게」를 누르면 20px→24px 이 되어 min-width 도 456px 로 자라니 더 심해진다.
     min() 으로 «화면 폭 또는 글자 19배 중 작은 쪽» 을 쓴다. */
  min-width: min(100%, calc(var(--font-body) * 19));
}
.sr-card__fig img, .sr-card__fig .ph {
  width: 100%; border-radius: 12px; border: 1px solid var(--paper-line);
}
.sr-card__hanja { margin: 0 0 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.sr-card__ch {
  font-family: var(--font-serif); font-weight: 700; line-height: 1.1;
  font-size: calc(var(--font-title) + 20px);
}
.sr-card__ko {
  font-family: var(--font-serif); font-size: var(--font-title);
  margin: 0 0 4px; letter-spacing: -.01em;
}
.sr-card__meaning { margin: 0 0 10px; color: var(--ink-2); }
.sr-card__tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

.sr-sec { }
.sr-sec__t {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: var(--font-caption); font-weight: 800; color: var(--ink-3);
  letter-spacing: .04em;
}
/* ①②③ 차례 번호. 갈래색(주홍)을 쓰니 한지 위 대비 3.01 로 미달이었다 —
   번호는 «읽는 것»이지 «구분하는 색»이 아니다. 먹빛으로 되돌린다. */
.sr-sec__no { color: var(--ink-2); font-size: calc(var(--font-caption) + 3px); font-weight: 800; }

.sr-clue {
  margin: 0; padding: 14px 18px; border-radius: 10px;
  background: var(--paper-2); font-weight: 700;
}
.sr-bd { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.sr-bd li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border: 2px solid var(--paper-line); border-radius: 10px;
}
.sr-bd__ch { font-family: var(--font-serif); font-size: calc(var(--font-body) + 8px); font-weight: 700; }
.sr-bd__gl { color: var(--ink-2); font-size: var(--font-caption); }

.sr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }

.sr-ask {
  /* ⚠ 색을 못박지 않는다 — 어두운 모드에서 밝은 바탕에 밝은 글자가 되어 안 보였다.
     바탕색에 갈래색을 아주 옅게 섞는다. 두 모드 모두 저절로 맞는다. */
  background: color-mix(in srgb, var(--cat-grace) 12%, var(--paper-0));
  border: 2px solid var(--cat-grace);
  border-radius: 12px; padding: var(--space-3) var(--space-4);
}
.sr-ask__t { margin: 0 0 6px; font-size: var(--font-caption); font-weight: 800; color: var(--ink-1); }
.sr-ask__q { margin: 0; font-weight: 700; }

/* 읽는 중인 문단 — 옅은 배경만. 글자를 움직이거나 스크롤을 끌지 않는다. */
.sr-reading {
  /* 읽는 중 표시. 못박은 노랑(#fdf3d6)은 어두운 모드에서 눈을 찌른다 — 섞어서 쓴다. */
  background: color-mix(in srgb, var(--status-warning) 22%, var(--paper-0));
  border-radius: 8px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-warning) 22%, var(--paper-0));
}

/* ── 갈래 고르는 문 (홈 · patch42) ────────────────────────────────────
   어르신 화면에는 큰 문이 한 번에 둘까지다. 셋이 되면 고르는 것 자체가 일이 된다. */
.sr-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--space-4); }
/* 문이 넷이 되면 auto-fit 이 한 줄에 넷을 세워 하나하나가 좁아진다.
   **두 줄에 둘씩** 놓는다 — 눈이 한 번 훑으면 끝난다(patch49). */
.sr-doors--4 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (min-width: 980px) { .sr-doors--4 { grid-template-columns: 1fr 1fr; } }
.sr-door {
  display: flex; gap: var(--space-3); align-items: flex-start; text-decoration: none;
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-top: 10px solid var(--accent, var(--ink-3));
  border-radius: 16px; padding: var(--space-4);
}
.sr-door:hover { border-color: var(--ink-2); border-top-color: var(--accent, var(--ink-3)); }
.sr-door__glyph {
  flex: none; width: 64px; height: 64px; border-radius: 14px;
  display: grid; place-items: center;
  /* ⚠ 글리프에 갈래색을 그대로 얹으니 대비 1.77~2.62 였다(語·人·節·物).
     노란 계열이 한지 위에서 거의 안 보인다. **색은 «칸»이 나르고 글자는 먹빛**으로.
     칸에 갈래색을 옅게 깔면 정체성은 그대로 남는다. */
  background: color-mix(in srgb, var(--accent, var(--ink-3)) 16%, var(--paper-2));
  color: var(--ink-1);
  font-family: var(--font-serif); font-size: 34px; font-weight: 700;
}
.sr-door__body { flex: 1 1 auto; min-width: 0; }
.sr-door__t {
  display: block; font-family: var(--font-serif); font-size: var(--font-title);
  letter-spacing: -.02em; margin-bottom: 6px;
}
.sr-door__d { display: block; color: var(--ink-2); font-size: var(--font-caption); line-height: 1.7; }
.sr-door__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sr-door__n { display: block; margin-top: 10px; color: var(--ink-3); font-size: var(--font-caption); font-weight: 700; }

/* ── 오늘은 무엇을 보실까요 — 다섯 줄 (patch51) ───────────────────────────
   갈래가 다섯이 되며 격자를 버렸다. 2×2 에 다섯을 넣으면 하나가 혼자 남고,
   혼자 남은 칸은 «덜 중요한 것»으로 읽힌다. 한 줄에 하나씩 아래로 내려간다 —
   여섯째가 생겨도 이 모양은 그대로 늘어난다. */
.sr-choose { display: block; }
.sr-choose__t {
  margin: 0 0 var(--space-3); font-family: var(--font-serif);
  font-size: calc(var(--font-title) + 2px);
}
.sr-doors--list { grid-template-columns: 1fr; gap: 12px; }
.sr-door--row {
  align-items: center; padding: var(--space-3) var(--space-4);
  border-top-width: 2px;
}
/* 왼쪽 글자·가운데 글·오른쪽 「몇 장 중 몇 장」. 셋이 한 줄에 선다. */
.sr-door--row .sr-door__glyph { flex: 0 0 auto; }
.sr-door--row .sr-door__n {
  flex: 0 0 auto; margin-top: 0; margin-left: var(--space-3);
  text-align: right; white-space: nowrap;
}
@media (max-width: 720px) {
  /* 좁으면 「몇 장」을 아래로 내린다. 줄바꿈으로 뭉개지는 것보다 낫다. */
  .sr-door--row { flex-wrap: wrap; }
  .sr-door--row .sr-door__n { width: 100%; margin-left: 0; text-align: left; margin-top: 8px; }
}

/* ── 이맘때 (patch51) ─────────────────────────────────────────────────────
   세시풍속에만 있다. 「이어서 보기」와 나란히 서지만 색이 다르다 —
   하나는 «하시던 것», 하나는 «오늘 권하는 것»이라 같은 것으로 보이면 안 된다. */
.sr-now {
  display: block; padding: var(--space-3) var(--space-4);
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-left: 6px solid var(--cat-relation, var(--ink-3));
  border-radius: 14px; text-decoration: none; color: inherit;
}
.sr-now__t {
  display: block; margin: 0 0 4px; color: var(--ink-3);
  font-size: var(--font-caption); font-weight: 800; letter-spacing: .02em;
}
.sr-now__go { display: block; text-decoration: none; color: inherit; }
.sr-now__ko {
  display: block; font-family: var(--font-serif);
  font-size: calc(var(--font-title) + 2px); font-weight: 700; line-height: 1.35;
}
.sr-now__when { display: block; color: var(--ink-2); font-size: var(--font-caption); }
.sr-now__food { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--font-caption); }
.sr-now:hover, .sr-now__go:hover { border-color: var(--ink-2); }
.sr-now--home:hover { background: var(--paper-2); }

/* ── 그날 먹던 것 (patch51) ───────────────────────────────────────────────
   세시풍속 카드에만 있는 줄이다. ① 보다 **위**에 둔다 — 절기 회상은 음식에서
   가장 빨리 열린다. 「추석」보다 「송편」이 먼저 온다. */
.sr-food {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 10px 0 0; padding: 8px 14px;
  background: var(--paper-2); border-radius: 10px;
}
.sr-food__t { color: var(--ink-3); font-size: var(--font-caption); font-weight: 800; }
.sr-food__v { font-size: var(--font-body); font-weight: 700; }

/* ── 인물 카드 (4칸 · patch42) ────────────────────────────────────────
   초상 사진을 쓰지 않는다. 자체 작도 아이콘 + 한자 워터마크로 그린다.
   그래서 이 트랙에는 라이선스 자리표(.ph)가 나올 일이 없다. */
/* 삽화가 없어 성어 카드보다 세로가 짧다 — 칸 사이를 한 단 더 벌려 숨통을 준다. */
.sr-pcard > * + * { margin-top: calc(var(--space-4) * var(--density)); }
/* ① 이 머리 칸 안으로 들어오면서 글 쪽이 초상만큼 길어졌다 — 위를 맞춘다. */
.sr-pcard__head, .sr-hcard__head { align-items: flex-start; }
.sr-pcard__head .sr-sec, .sr-hcard__head .sr-sec { margin-top: var(--space-3); }
.sr-pcard__name { font-size: calc(var(--font-title) + 6px); margin-bottom: 2px; }
.sr-pcard__hanja {
  margin: 0 0 8px; font-family: var(--font-serif);
  font-size: calc(var(--font-body) + 4px); color: var(--ink-2); letter-spacing: .04em;
}
/* 초상 — **3:4 세로**다. 칸 비율과 그림 비율이 다르면 cover 가 갓·왕관을 잘라 낸다
   (image_license_plan.md 2026-08-15 의 교훈). contain 으로 통째로 보여 준다. */
.sr-pcard__por {
  flex: 0 0 auto; width: calc(var(--font-body) * 21); aspect-ratio: 3 / 4;   /* 20px → 420 */
  background: var(--paper-2); border: 1px solid var(--paper-line);
  border-radius: 14px; overflow: hidden;
}
.sr-pcard__por img {
  width: 100%; height: 100%; object-fit: contain; background: var(--paper-2);
}
.sr-pcard__por .ph { width: 100%; height: 100%; }

.sr-pcard__mark {
  flex: 0 0 auto; position: relative;
  width: calc(var(--font-body) * 19); height: calc(var(--font-body) * 19);
  display: grid; place-items: center;
  background: var(--paper-2); border-radius: 16px; border: 1px solid var(--paper-line);
  overflow: hidden;
}
.sr-pcard__wm {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: calc(var(--font-body) * 4.8); font-weight: 700;
  color: var(--ink-1); opacity: .10; letter-spacing: .04em; line-height: 1;
  pointer-events: none;
  /* 워터마크는 대개 한자 두 자(檀君·樞機)다. 줄바꿈되면 세로로 쌓여 이상해진다. */
  white-space: nowrap;
}
.sr-pcard__icon {
  position: relative; stroke: var(--ink-2);
  width: calc(var(--font-body) * 7); height: calc(var(--font-body) * 7);
}
.sr-pcard__tagline {
  margin: 0; padding: 16px 20px; border-radius: 12px;
  background: var(--paper-2); font-family: var(--font-serif);
  font-size: calc(var(--font-body) + 4px); line-height: 1.55; font-weight: 700;
}

/* ③ 기억의 실마리 — 원본이 정확히 4개씩 준다 */
.sr-trig { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sr-trig li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border: 2px solid var(--paper-line); border-radius: 10px;
  background: var(--paper-0);
}
.sr-trig__box {
  flex: none; width: 18px; height: 18px; margin-top: 4px;
  border: 1.5px solid var(--ink-3); border-radius: 3px;
}
.sr-trig__t { flex: 1 1 auto; min-width: 0; }

.sr-row__no {
  flex: none; font-family: var(--font-mono); font-weight: 800;
  font-size: var(--font-caption); color: var(--ink-3); min-width: 2.2em;
}
/* 목록의 작은 얼굴. 없으면 한자 한 자 */
.sr-row__face {
  flex: none; width: calc(var(--font-body) * 5); aspect-ratio: 3 / 4; border-radius: 10px;
  overflow: hidden; background: var(--paper-2); border: 1px solid var(--paper-line);
  display: grid; place-items: center;
}
.sr-row__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.sr-row__face .ph { width: 100%; height: 100%; }
.sr-row__glyph { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--ink-3); }

@media (max-width: 620px) {
  /* 좁은 화면에서는 그림이 한 줄을 통째로 쓴다 — 글자 옆에 끼우면 둘 다 답답해진다. */
  .sr-pcard__mark { width: 100%; height: calc(var(--font-body) * 9); }
  .sr-pcard__wm { font-size: calc(var(--font-body) * 2.8); }
  .sr-pcard__por { width: calc(var(--font-body) * 11); }
}

/* ── 안내 화면 표 ────────────────────────────────────────────────────── */
.sr-tbl {
  width: 100%; border-collapse: collapse; margin: var(--space-3) 0;
  font-size: var(--font-caption);
}
.sr-tbl th, .sr-tbl td {
  border: 1px solid var(--paper-line); padding: 10px 14px;
  text-align: left; vertical-align: top; line-height: 1.7;
}
.sr-tbl th { background: var(--paper-2); font-weight: 800; }
.sr-guide .sr-panel + .sr-panel { margin-top: calc(var(--space-4) * var(--density)); }

/* ── 인쇄 지면 ───────────────────────────────────────────────────────── */
.sr-sheet {
  background: var(--paper-0); border: 2px solid var(--paper-line);
  border-radius: 14px; padding: var(--space-4); margin-top: var(--space-4);
}
.sr-sheet--cover { text-align: center; }
.sr-sheet__kicker { margin: 0; color: var(--ink-3); font-size: var(--font-caption); font-weight: 700; }
.sr-sheet__t { font-family: var(--font-serif); font-size: calc(var(--font-title) + 6px); margin: 10px 0 4px; }
.sr-sheet__d { margin: 0 0 var(--space-4); color: var(--ink-2); }
.sr-sheet__list { list-style: decimal; margin: 0 auto; padding-left: 1.6em; text-align: left; max-width: 34em; }
.sr-sheet__list li { margin: 10px 0; }
.sr-sheet__hanja { font-family: var(--font-serif); font-weight: 700; letter-spacing: .05em; margin-right: 10px; }
.sr-sheet__ko { font-weight: 700; margin-right: 8px; }
.sr-sheet__mn { color: var(--ink-2); font-size: var(--font-caption); }
.sr-sheet__how { margin: var(--space-4) 0 0; color: var(--ink-2); font-weight: 700; }
.sr-sheet__foot { margin: 6px 0 0; color: var(--ink-3); font-size: var(--font-caption); }

/* 손으로 적는 줄 — 종이에만 나온다 */
.sr-write { margin-top: 14px; display: grid; gap: 18px; }
.sr-write__line { display: block; border-bottom: 1px solid var(--paper-edge); height: 1px; }

/* ── 꼬리글 ──────────────────────────────────────────────────────────── */
.sr-foot {
  margin-top: var(--space-5); padding: var(--space-4) 0;
  border-top: 2px solid var(--paper-edge); color: var(--ink-2);
  font-size: var(--font-caption); line-height: 1.8;
}
.sr-foot p { margin: 0 0 6px; }
.sr-foot__meta { color: var(--ink-3); }

/* ── 인쇄 ────────────────────────────────────────────────────────────────
   성어 한 개 = A4 한 장. 두 쪽에 걸쳐 끊기지 않게 한다.
   종이에서 못 누르는 것(단추·메뉴·주소)은 전부 지운다. */
@page { size: A4; margin: 15mm; }

@media print {
  html, body { background: #fff; }
  body.track-senior { --font-body: 14pt; --font-title: 20pt; --font-caption: 11pt; --line-body: 1.65; }
  body.track-senior--xl { --font-body: 14pt; --font-title: 20pt; --font-caption: 11pt; }

  .sr-head, .sr-foot, .sr-noprint, .sr-bar, .skip-link, .toast-host,
  .sr-actions, .sr-picks, .sr-picks__t, .sr-resume,
  .sr-bands, .sr-birth__note { display: none !important; }

  .wrap, .sr-page { width: 100%; max-width: none; padding: 0; margin: 0; }
  .sr-page > * + * { margin-top: 0; }

  .sr-sheet {
    border: 0; border-radius: 0; padding: 0; margin: 0;
    break-after: page; page-break-after: always;
    break-inside: avoid; page-break-inside: avoid;
  }
  .sr-sheet:last-child { break-after: auto; page-break-after: auto; }

  .sr-card {
    border: 0; border-radius: 0; padding: 0;
    break-inside: avoid; page-break-inside: avoid;
  }
  .sr-card > * + * { margin-top: 10pt; }
  .sr-card__ch { font-size: 44pt; }
  .sr-card__fig { flex: 0 1 80mm; min-width: 60mm; }
  .sr-card__fig img { border: 1px solid #bbb; border-radius: 0; }

  /* 인물 — 워터마크는 종이에서 잉크만 먹고 잘 안 보인다. 아이콘만 남긴다. */
  .sr-doors, .sr-door, .sr-choose__t, .sr-now { display: none !important; }
  /* 「그날 먹던 것」은 **종이에도 나온다** — 복지관에서 이 줄 하나로
     이야기가 열리는 것을 보고 남겼다. 색면만 회색조로 낮춘다. */
  .sr-food { background: #f0f0f0 !important; padding: 6pt 10pt; }
  /* ① 을 머리 칸 안으로 올린 뒤로 **글 쪽이 카드 높이를 정한다**(글 317px vs 초상 252px).
     그래서 초상은 글 높이에 닿을 때까지 세로를 한 푼도 더 쓰지 않는다 — 60mm 까지 공짜다.
     그 위로 올리면 1mm 마다 세로가 1.33mm 씩 붙기 시작한다.
     이 값을 올리려면 반드시 audit_senior_print.js 로 여유를 먼저 확인할 것. */
  .sr-pcard__por { width: 60mm; border: 1px solid #bbb; border-radius: 0; background: none; }
  .sr-pcard__por img { background: none; }
  .sr-row__face { display: none !important; }
  .sr-pcard__mark { width: 60mm; height: 60mm; background: none !important; border: 0; }
  .sr-pcard__wm { display: none !important; }
  .sr-pcard__icon { width: 44mm; height: 44mm; }
  .sr-pcard__tagline { background: #f0f0f0 !important; font-size: 15pt; }
  /* ── A4 한 장에 카드 하나 ──────────────────────────────────────────────
     그림을 키우려면 세로를 어디선가 되찾아야 한다. 재어 보니 가장 큰 칸은
     ③ 기억의 실마리 넉 줄(302px)이었고, 상자마다 붙은 여백이 그 절반이었다.
     **글자 크기는 그대로 두고 여백만 줄인다** — 어르신 화면에서 줄일 것은
     글자가 아니라 여백이다. 이렇게 되찾은 약 100px 로 초상을 44 → 52mm 키웠다.
     ⚠ 이 값들을 만질 때는 반드시 audit_senior_print.js 를 돌릴 것.
        A4 폭(186mm)에서 재야 한다 — 브라우저 폭에서 재면 글이 덜 접혀 낮게 나온다. */
  .sr-card > * + * { margin-top: 9pt; }
  .sr-trig { gap: 6pt; }
  .sr-trig li {
    border-color: #bbb !important; break-inside: avoid; page-break-inside: avoid;
    padding: 7pt 10pt;
  }
  .sr-pcard__tagline { padding: 10pt 13pt; }
  .sr-sec__t { margin-bottom: 4pt; }

  /* 흑백 인쇄 전제 — 색면을 회색조로 낮춘다 */
  .sr-clue, .sr-note { background: #f0f0f0 !important; }
  .sr-ask { background: #f6f6f6 !important; border-color: #999 !important; padding: 10pt 13pt; }
  /* 손으로 적을 줄. 종이에서만 나오는 것이라 화면 값(14/18px)과 따로 잡는다. */
  .sr-write { margin-top: 10pt; gap: 13pt; }
  .sr-ask__t { color: #333 !important; }
  .sr-tag { border-color: #999 !important; color: #333 !important; }
  .sr-bd li { border-color: #bbb !important; }
  .sr-sheet__list li { break-inside: avoid; page-break-inside: avoid; }
  .sr-reading { background: none !important; box-shadow: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   우리가 지나온 길 — 한국사 68장 (patch46)
   인물 카드와 뼈대를 함께 쓰므로 여기서는 **다른 곳만** 적는다.
   ══════════════════════════════════════════════════════════════════════════ */
.sr-hcard > * + * { margin-top: calc(var(--space-4) * var(--density)); }
.sr-hcard__title { font-size: calc(var(--font-title) + 6px); margin-bottom: 2px; }
.sr-hcard__hanja {
  margin: 0 0 8px; font-family: var(--font-serif);
  font-size: calc(var(--font-body) + 4px); color: var(--ink-2); letter-spacing: .04em;
}
/* 사건 그림은 16:9, 문화재 그림은 3:4 다. 칸을 비율로 못박으면 한쪽이 잘린다 —
   폭만 정하고 높이는 그림이 정하게 둔다(초상 칸의 contain 과 같은 판단). */
.sr-hcard__fig {
  flex: 0 0 auto; width: calc(var(--font-body) * 26);            /* 20px → 520 */
  /* 문화재는 3:4 세로라 폭만 정하면 507px 까지 자란다. 높이도 함께 묶는다. */
  max-height: calc(var(--font-body) * 29);
  background: var(--paper-2); border: 1px solid var(--paper-line);
  border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
}
.sr-hcard__fig img {
  display: block; max-width: 100%; max-height: calc(var(--font-body) * 29);
  width: auto; height: auto;
}
.sr-hcard__fig .ph { width: 100%; }

/* 「그해 어르신은 37세」 — 점수가 아니다. 그해 자신을 불러오는 고리다.
   그래서 표식은 조용하고, 태어난 해를 안 알려 주시면 아예 안 나온다. */
.sr-tag--age { border-color: var(--cat-life); color: var(--ink-1); font-weight: 700; }

/* 목록 줄의 연도 칸. 폭을 고정해 눈이 세로로 훑을 수 있게 한다. */
.sr-row__when {
  flex: none; min-width: 7.5em; font-family: var(--font-serif);
  font-weight: 700; color: var(--ink-2); font-size: var(--font-caption);
}

/* ── 태어나신 해 여쭙기 ──────────────────────────────────────────────────
   막아서는 창이 아니다. 목록 위 한 칸으로 놓고, 닫으시면 다시 안 나온다. */
.sr-birth {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  background: var(--paper-2); border: 2px solid var(--paper-line); border-radius: 14px;
}
.sr-birth__t { margin: 0 0 6px; font-weight: 700; font-size: var(--font-body); }
.sr-birth__sub { margin: 0 0 12px; color: var(--ink-3); font-size: var(--font-caption); line-height: 1.6; }
.sr-birth__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sr-birth__in {
  width: 7em; padding: 10px 12px; font: inherit; font-size: var(--font-body);
  border: 2px solid var(--ink-3); border-radius: 10px;
  background: var(--paper-0); color: var(--ink-1);
}
.sr-birth__unit { color: var(--ink-2); margin-right: 6px; }

/* ── 연대 단추 다섯 (patch50) ─────────────────────────────────────────────
   숫자 입력 대신 **한 번 누르면 끝나는** 길을 앞에 놓는다.
   ⚠ 단추가 좁으면 이 화면에서는 못 누르신다. 자동 폭이 아니라 1fr 로 나눠
      다섯 칸이 똑같이 넓게 서게 한다. 좁은 화면에서는 세 칸으로 접힌다. */
.sr-birth__decades {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-bottom: var(--space-3);
}
.sr-btn--decade {
  padding: 0 8px; min-height: calc(var(--tap) + 10px);
  font-size: calc(var(--font-body) + 2px);
}
.sr-birth__foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* 정확한 해 칸은 접혀 있다가 열린다 — 열리면 위와 간격을 둔다.
   ⚠ [hidden] 을 **다시 적어 준다.** 브라우저 기본값은 [hidden]{display:none} 인데
      그건 홑선택자라 .sr-birth__row{display:flex} 에 진다 — 감춘 줄 알았던 칸이
      그대로 보인다. 화면이 깨지지 않아서 눈으로만 보면 못 잡는다(patch50 에서 겪음). */
.sr-birth__row { margin-top: var(--space-3); }
.sr-birth__row[hidden] { display: none; }
@media (max-width: 560px) {
  .sr-birth__decades { grid-template-columns: repeat(3, 1fr); }
}

/* 알려 주신 뒤의 조용한 한 줄. 안내가 아니라 **고칠 길**이라 작고 흐리게 둔다. */
.sr-birth__note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; color: var(--ink-3); font-size: var(--font-caption);
}
.sr-birth__noteT { font-weight: 700; }

/* ── 어르신 시절로 보기 (patch50) ─────────────────────────────────────────
   고르개(.sr-picks)가 아니라 **따로 선 자리**다. 1980년대는 바깥 시간이고
   「스무 살 무렵」은 어르신 안쪽 시간이라, 같은 줄에 세우면 둘이 같은 것으로 읽힌다.
   ⚠ 단추 안에 세 줄(20대 무렵 / 1971~1980년 / 14장)이 들어간다. 세로로 쌓고
      가운데 맞춘다 — 어르신은 「몇 년도인가」를 확인하고 누르신다. */
.sr-bands {
  padding: var(--space-3) var(--space-4);
  background: var(--paper-2); border: 2px solid var(--paper-line); border-radius: 14px;
}
.sr-bands__t { margin: 0 0 4px; font-size: calc(var(--font-body) + 2px); font-weight: 800; }
.sr-bands__d { margin: 0 0 12px; color: var(--ink-3); font-size: var(--font-caption); }
.sr-bands__row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 10px;
}
.sr-btn--band {
  flex-direction: column; gap: 2px; padding: 12px 8px;
  min-height: calc(var(--tap) + 26px); text-align: center;
}
.sr-btn--on { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }
.sr-band__t { font-size: calc(var(--font-body) + 1px); font-weight: 800; }
.sr-band__y { font-size: var(--font-caption); font-weight: 600; opacity: .75; }
.sr-band__n { font-size: var(--font-caption); font-weight: 600; opacity: .6; }
@media (max-width: 560px) {
  .sr-bands__row { grid-template-columns: repeat(2, 1fr); }
}

/* ── 고르개 머리 (patch50) ────────────────────────────────────────────────
   고르개가 둘이 되었다(자리·때). 머리말이 없으면 열두 칸이 한 덩어리로 보여
   어르신이 «무엇을 고르는 것인지» 알 수 없다. */
.sr-picks__t {
  margin: 0 0 -4px; color: var(--ink-3);
  font-size: var(--font-caption); font-weight: 700;
}

/* 「우리가 지나온 길 68장」은 폭이 좁으면 «68» 과 «장» 사이에서 줄이 바뀐다.
   한국어는 글자 사이 어디서나 끊을 수 있어 벌어지는 일이다 — 낱말 단위로 끊게 한다.
   base.css 가 본문에는 이미 keep-all 을 걸어 두었는데 이 제목은 그 밖이었다. */
.sr-door__t { word-break: keep-all; }

@media (max-width: 620px) {
  .sr-hcard__fig { width: 100%; }
  .sr-row__when { min-width: 0; }
}

@media print {
  /* 종이에서는 여쭐 수 없다 — 누를 수 없는 것을 인쇄하면 혼란만 준다. */
  .sr-birth, .sr-bands, .sr-birth__note { display: none !important; }
  /* ⚠ 이 블록은 파일 끝에 있어 위쪽 @media print 의 `.sr-card > * + *` 보다 나중이다.
     그래서 한국사 카드만 화면용 간격을 그대로 들고 종이로 넘어가 **한 장이 두 쪽**이 됐다
     (근현대 14장 → 24쪽). 같은 자리를 여기서 다시 적어 준다. */
  .sr-hcard > * + * { margin-top: 10pt; }
  /* 사건·연도 그림은 16:9(가로), 문화재 그림은 3:4(세로)다. 폭만 정해 두면
     세로 그림이 52mm × 69mm 로 자라 카드가 A4 한 쪽을 넘긴다.
     **폭과 높이를 둘 다 묶고** 그림이 그 안에서 비율대로 줄어들게 한다 —
     16:9 는 52×29mm, 3:4 는 34×46mm 가 되어 둘 다 한 쪽에 들어온다. */
  .sr-hcard__fig {
    width: auto; max-width: 78mm; max-height: 68mm;
    border: 1px solid #bbb; border-radius: 0; background: none;
  }
  .sr-hcard__fig img { max-width: 78mm; max-height: 68mm; width: auto; height: auto; }
}


/* ── 청소년 화면으로 가는 다리 (patch56) ──────────────────────────────────
   「이 성어는 손주가 보는 청소년 화면에도 있습니다」의 그 링크다.
   밑줄 하나만 그어 두었더니 **어르신이 누를 수 있는 것인 줄 모르셨다.**
   밑줄은 젊은 사람에게나 「누르는 곳」이지, 종이에서 밑줄은 그냥 강조다.

   ⚠ 이 링크를 만드는 곳은 page-senior-idioms.js · page-senior-people.js 인데
      두 파일 다 patch44 이전 것이라 손에 없다. 그래서 **CSS 로만** 고친다 —
      시니어 화면(.track-senior) 안에서 youth/ 로 가는 링크는 이것뿐이라
      낱낱이 집지 않고 통째로 집어도 안전하다. 나중에 그 파일이 오면
      글까지 다듬으면 되고, 그때까지도 이 모양은 그대로 산다.
   ⚠ 화살표(↗)를 붙인다. 「여기서 다른 곳으로 갑니다」를 글자 없이 말해 주는 표다. */
.track-senior a[href*="youth/"] {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 4px 16px; margin: 0 2px;
  border: 2px solid var(--ink-2); border-radius: 10px;
  background: var(--paper-0); color: var(--ink-1);
  font-weight: 800; text-decoration: none;
  vertical-align: middle;
}
.track-senior a[href*="youth/"]::after { content: "↗"; font-weight: 700; }
.track-senior a[href*="youth/"]:hover,
.track-senior a[href*="youth/"]:focus-visible {
  background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1);
}

/* ── 꼬리글의 「처음 화면(현관)」 (patch56) ───────────────────────────────
   여기도 밑줄뿐이었다. 꼬리글은 «길을 잃었을 때 내려오는 곳»이라
   오히려 여기가 더 또렷해야 한다. */
.sr-foot__home {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 4px 18px;
  border: 2px solid var(--ink-2); border-radius: 10px;
  background: var(--paper-0); color: var(--ink-1);
  font-size: var(--font-body); font-weight: 800; text-decoration: none;
}
.sr-foot__home:hover, .sr-foot__home:focus-visible {
  background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1);
}
@media print { .sr-foot__home { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   patch58 · 좁은 화면(360~412px)에서 목록 줄이 무너지던 것
   --------------------------------------------------------------------------
   어르신이 실제로 쓰시는 폭은 360px(갤럭시 A·아이폰 SE)이다. 그 폭에서
   「우리 살림」·「열두 달 세시풍속」·「지나온 길」의 목록 줄이

       [번호] [사진] [제목·설명] [꼬리표]

   넉 칸을 **한 줄에** 세우려다, 꼬리표가 안 줄어들어 가운데 글이
   한 글자 폭까지 눌렸다. 위에서 꼬리표를 줄게 만들었지만 그것만으로는
   글자 폭이 여전히 답답하다. 좁은 화면에서는 아예 **두 줄로 접는다**.

       [번호] [사진] [제목·설명]
       [때]  [꼬리표]

   ⚠ 줄바꿈을 «어디서» 시킬지가 요령이다. 꼬리표에 flex-basis:100% 를 주면
      한 줄을 통째로 먹어 「때」와 갈라선다. 그래서 보이지 않는 칸(::after)을
      본문과 꼬리표 **사이 차례(order:8)** 에 하나 세워 그 자리에서만 끊는다.
      이러면 「때」와 「꼬리표」는 둘째 줄에서 나란히 설 수 있다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .sr-row { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
  .sr-row::after { content: ""; flex: 0 0 100%; height: 0; order: 8; }
  .sr-row__main { flex: 1 1 45%; }
  .sr-row__when { order: 9; flex: 0 0 auto; min-width: 0; }
  .sr-row__tags { order: 10; flex: 1 1 auto; justify-content: flex-start; }
  /* 사진도 조금 줄인다 — 글 자리를 먼저 준다 */
  .sr-row__face { width: calc(var(--font-body) * 3.8); }
}

/* ── 「이맘때입니다」가 누르는 것으로 안 보였다 (patch58) ────────────────────
   patch51 에서 만든 이 자리는 겉테두리(.sr-now)만 카드처럼 보이고, 정작
   누르는 것(.sr-now__go)에는 밑줄도 테두리도 없었다. KW 가 patch56 에서
   지적한 것과 **똑같은 사고**다 — 「밑줄만으로는 어르신이 링크인 줄 모른다」.
   여기는 밑줄조차 없었으니 더 나쁘다. 다른 곳과 같은 모양의 단추를 붙인다. */
.sr-now__go { display: block; text-decoration: none; color: inherit; }
.sr-now__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  min-height: var(--tap); padding: 4px 18px;
  border: 2px solid var(--ink-2); border-radius: 10px;
  background: var(--paper-0); color: var(--ink-1);
  font-size: var(--font-body); font-weight: 800;
}
.sr-now__go:hover .sr-now__cta,
.sr-now__go:focus-visible .sr-now__cta {
  background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1);
}
@media print { .sr-now__cta { display: none !important; } }

/* 머리글의 「記 메모리코드」도 현관으로 가는 링크인데 아무 표도 없었다.
   나란한 「처음으로」가 이미 있어 급하진 않지만, 어르신이 로고를 눌러 보시는
   일은 흔하다 — 눌리면 눌린다는 것만 보이게 이름에 옅은 밑줄을 둔다. */
.sr-brand__name { text-decoration: underline; text-decoration-color: var(--paper-edge);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sr-brand:hover .sr-brand__name, .sr-brand:focus-visible .sr-brand__name {
  text-decoration-color: var(--ink-2); }
@media print { .sr-brand__name { text-decoration: none; } }

/* 이용 조건상 반드시 적어야 하는 출처 한 줄 (patch59).
   어르신께 읽히려는 글이 아니라 «지켜야 하는 표기» 다 — 작고 조용하게 두되,
   인쇄에서도 사라지지 않게 한다(종이도 배포다). */
.sr-credit {
  margin: 6px 0 0; color: var(--ink-3);
  font-size: var(--font-caption); line-height: 1.45; word-break: keep-all;
}
@media print {
  .sr-credit { display: block !important; font-size: 7.5pt; color: #666; margin-top: 3pt; }
}

/* ============================================================================
   patch60 · 어르신 입구 — 그림이 맨 위로
   ----------------------------------------------------------------------------
   2026-08-19 실측: 어르신 홈 첫 화면의 그림 면적이 **0.0%** 였다.
   살림 76·세시 12·인물 50의 그림을 다 만들어 두고 홈에는 글자 문 다섯 개뿐이었다.
   ⚠ 크기를 px 로 못박지 않는다. 시니어 트랙의 크기는 전부 «글자»에 매달린다 —
      px 로 두면 「가 크게」를 켤 때 오히려 나빠진다(patch58 에서 배운 것).
   ========================================================================== */
.sr-hero2 { margin: 0 0 var(--space-4); }

.sr-hero2__card {
  display: block;
  text-decoration: none; color: inherit;
  background: var(--paper-0);
  border: 2px solid var(--paper-line);
  border-radius: 18px;
  overflow: hidden;
}
.sr-hero2__card:hover, .sr-hero2__card:focus-visible { border-color: var(--ink-2); }

.sr-hero2__fig {
  background: var(--paper-2);
  /* ⚠ 청소년 쪽에서 겪은 그대로 — width 를 안 두면 max-height 가 폭까지 줄인다. */
  width: 100%;
  aspect-ratio: 4 / 3;
  /* 그림이 화면을 다 먹으면 「이 이야기 보기」 단추가 첫 화면 밖으로 밀린다.
     52vh 는 그 단추가 남을 만큼만 준다. */
  max-height: 52vh;
  overflow: hidden;
}
.sr-hero2__fig img, .sr-hero2__fig .ph {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

.sr-hero2__body { padding: var(--space-4); }
.sr-hero2__eyebrow {
  margin: 0 0 6px; color: var(--ink-3);
  font-size: var(--font-caption); font-weight: 800; letter-spacing: .02em;
}
.sr-hero2__t {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: calc(var(--font-title) + 6px);
  line-height: 1.25; letter-spacing: -.01em;
}
.sr-hero2__sub { margin: 0 0 var(--space-3); color: var(--ink-2); font-size: var(--font-body); }

/* 첫 화면의 «할 것»은 이 하나뿐이다. 어르신 손가락 자리라 넉넉히 준다. */
.sr-hero2__go {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: calc(var(--font-body) * 3);
  padding: 0 var(--space-4);
  border-radius: 14px;
  background: var(--ink-1); color: var(--paper-0);
  font-size: calc(var(--font-body) + 2px); font-weight: 800;
}

/* 이어서 보기 — 히어로 바로 아래 한 줄. 하던 것을 잊지 않는다. */
.sr-resume--slim { margin: 0 0 var(--space-4); }

/* ── 이런 것도 있습니다 — 두 줄 ──────────────────────────────────────── */
.sr-also { margin: 0 0 var(--space-4); }
.sr-also__t {
  margin: 0 0 10px; font-size: var(--font-body); font-weight: 800; color: var(--ink-2);
}
/* ⚠ minmax(0,1fr) 로 못박는다. 그냥 두면 칸이 min-content 만큼 넓어져
   360px 에서 글자가 한 글자씩 세로로 떨어진다(patch58 에서 겪은 그대로). */
.sr-also__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.sr-also__row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: calc(var(--font-body) * 3.4);
  padding: 10px var(--space-3);
  background: var(--paper-0);
  border: 2px solid var(--paper-line); border-radius: 14px;
  text-decoration: none; color: inherit;
}
.sr-also__row:hover, .sr-also__row:focus-visible { border-color: var(--ink-2); background: var(--paper-2); }

.sr-also__face {
  flex: none; width: calc(var(--font-body) * 4.4); aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--paper-line);
}
.sr-also__face img, .sr-also__face .ph { width: 100%; height: 100%; object-fit: cover; display: block; }

.sr-also__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-also__tag  { font-size: var(--font-caption); color: var(--ink-3); font-weight: 700; }
.sr-also__name { font-size: calc(var(--font-body) + 2px); font-weight: 800; }
.sr-also__sub  { font-size: var(--font-caption); color: var(--ink-2); }
.sr-also__arrow { margin-left: auto; flex: none; color: var(--ink-3); font-size: calc(var(--font-body) + 4px); }

/* ── 모두 보기 ─────────────────────────────────────────────────────────
   어르신 화면에서 무언가를 «접는» 것은 조심해야 한다. 그래서 접은 자리에
   무엇이 얼마나 있는지 한 줄로 적어 둔다 — 감추는 것이 아니다. */
.sr-more {
  border: 2px solid var(--paper-line); border-radius: 18px;
  background: var(--paper-0); margin-bottom: var(--space-4);
}
.sr-more__sum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  min-height: calc(var(--font-body) * 3.2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer; list-style: none; border-radius: 16px;
}
.sr-more__sum::-webkit-details-marker { display: none; }
.sr-more__sum__t {
  font-size: calc(var(--font-body) + 3px); font-weight: 800; color: var(--ink-1);
}
.sr-more__sum__n {
  flex: 1 1 100%; min-width: 0;
  font-size: var(--font-caption); color: var(--ink-2);
}
.sr-more__sum__chev { margin-left: auto; color: var(--ink-3); font-size: calc(var(--font-body) + 2px); }
.sr-more__sum:hover { background: var(--paper-2); }
.sr-more[open] .sr-more__sum { border-bottom: 2px solid var(--paper-line); border-radius: 16px 16px 0 0; }
.sr-more[open] .sr-more__sum__chev { transform: rotate(180deg); }
.sr-more__body { padding: var(--space-4); }
.sr-more__body > section:first-child { margin-top: 0; }

/* 종이에는 «누를 것»이 없다 — 인쇄에서는 저절로 펼친다. */
@media print {
  .sr-more__body { display: block !important; }
  .sr-more__sum__chev { display: none; }
  .sr-hero2__go { display: none; }
}

/* ── 현관에서는 메뉴줄을 걷는다 (patch60) ────────────────────────────────
   어르신 머리글의 갈래 링크 일곱 개가 390px 화면에서 **네 줄**로 접히며
   첫 화면의 절반(415px/844px)을 먹고 있었다. 그림이 화면 아래로 밀려났다.
   홈에서는 화면 자체가 메뉴다 — 오늘의 한 장 · 이어서 · 이런 것도 · 모두 보기.
   ⚠ 지우는 것이 아니라 **홈에서만** 감춘다. 안쪽 화면에서는 그대로 나온다.
      링크는 문서에 그대로 남아 audit_links 가 계속 검사한다.
   ⚠ 인쇄에서도 감춘다 — 종이에 메뉴는 쓸모가 없다. */
.sr-home .sr-nav { display: none; }
.sr-home .sr-head__in { gap: var(--space-3); }

/* ============================================================================
   patch62 · 머리글을 «한 줄»로 — 414px(49%) → 약 72px(8.5%)
   ----------------------------------------------------------------------------
   2026-08-19 KW 가 폰에서 잡았다. 안쪽 화면 머리글이 화면의 **49%** 를
   sticky 로 계속 차지하고 있었다. 청소년은 93px(11%) 인데 어르신이 414px 이었다.
   갈래 링크 일곱 개가 390px 에서 네 줄로 접혔기 때문이다.
   ⚠ 덮는 팝업이 아니라 **밀어내는 서랍**이다. 어르신께 「화면이 사라졌다」가
      가장 위험하다 — 본문은 아래로 내려갈 뿐 없어지지 않는다.
   ========================================================================== */
.sr-head__in { flex-wrap: nowrap; gap: 8px; }
.sr-brand__name  { white-space: nowrap; }
.sr-brand__track { white-space: nowrap; }
/* ⚠ 줄 안의 단추는 절대 쪼그라들지 않게 못박는다. flex 는 자리가 모자라면
   글자를 «가/크/게» 로 세로로 쪼갠다 — 2026-08-19 실제로 그렇게 났다. */
.sr-head__in > .sr-btn { flex: none; white-space: nowrap; }
.sr-brand { min-width: 0; }
.sr-brand__name, .sr-brand__track { overflow: hidden; text-overflow: ellipsis; }

/* [메뉴] — 어르신 손가락 자리라 넉넉히 준다 */
.sr-menu-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: calc(var(--tap) + 6px);
  font-weight: 800;
}
.sr-menu-btn__bars { display: grid; gap: 3px; }
.sr-menu-btn__bars > span {
  display: block; width: 18px; height: 2.5px; border-radius: 2px; background: currentColor;
}

/* 서랍 — 닫혀 있을 때는 자리를 아예 안 먹는다 */
.sr-menu { display: none; border-top: 2px solid var(--paper-line); padding: 6px 0 10px; }
.sr-head.is-menu .sr-menu { display: block; }

/* 펼쳤을 때는 «한 줄에 하나». 좌우로 눈이 오가지 않게 위에서 아래로 한 번 내려간다. */
.sr-head.is-menu .sr-nav {
  display: flex; flex-direction: column; gap: 4px;
}
.sr-head.is-menu .sr-nav a {
  display: flex; align-items: center;
  min-height: calc(var(--font-body) * 2.6);
  padding: 8px 14px; border-radius: 12px;
  font-size: calc(var(--font-body) + 2px); font-weight: 700;
}
.sr-head.is-menu .sr-nav a[aria-current="page"] { background: var(--ink-1); color: var(--paper-0); }

/* 서랍 바닥 — 한 번 정하면 그만인 설정이 여기 산다 */
.sr-menu__foot { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--paper-line); }
.sr-menu__set  { width: 100%; justify-content: center; min-height: calc(var(--font-body) * 2.4); }

/* 아주 좁은 화면(≤430px)에서는 이름표를 접고 **記 표식만** 남긴다.
   記 를 누르면 처음 화면으로 간다(aria-label 로 읽어 준다).
   ⚠ 이름표를 남겨 두었더니 «메모리코…» 가 [메뉴] 단추에 잘려 들어갔다
      (2026-08-19 실측). 잘린 글자는 없느니만 못하다.
   ⚠ 서랍 첫 줄이 「처음으로」라 길은 그대로 있다. 잃는 것이 없다. */
@media (max-width: 430px) {
  .sr-brand__track, .sr-brand__name { display: none; }
  .sr-brand { gap: 0; flex: none; }
  .sr-brand__mark { width: 44px; height: 44px; font-size: 25px; }
}

/* ══════════════════════════════════════════════════════════════════════
   640px 부터 — 지금까지처럼 링크가 늘 펼쳐져 있다
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .sr-head__in { flex-wrap: wrap; gap: var(--space-3); }
  .sr-menu-btn { display: none; }
  .sr-menu { display: block; border-top: 0; padding: 0 0 6px; }
  .sr-menu__foot { border-top: 0; margin: 0; padding: 0; display: inline-block; }
  .sr-menu__set { width: auto; min-height: 0; }
  .sr-brand__track { display: block; }
  .sr-head .sr-nav { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
  .sr-head .sr-nav a { min-height: 0; padding: 0; border-radius: 0; font-size: inherit; font-weight: inherit; }
  .sr-head .sr-nav a[aria-current="page"] { background: none; color: inherit; }
}

/* 인쇄에는 메뉴가 필요 없다 */
@media print { .sr-menu, .sr-menu-btn { display: none !important; } }

/* 의견 보내기 (patch65) — 어르신께는 단추 모양으로. 밑줄은 누르는 곳으로 안 읽힌다. */
/* 어르신 손가락 자리는 --tap(56px) 을 따른다. 48px 은 감사 기준(44)은 넘지만
   시니어 트랙이 스스로 정해 둔 기준보다 작다. 자기 기준을 어기지 않는다. */
.sr-foot__fb { min-height: var(--tap); font-weight: 800; }