/* ==========================================================================
   guide.css — `/guide` (T.O.P ACADEMY · 신입 육성 가이드) 화면 스타일
   --------------------------------------------------------------------------
   ── 이 파일이 맡는 범위 ──────────────────────────────────────────────────
   셸(worker/src/guide.ts)이 내려보내는 뼈대와, guide.js 가 그 안에 세우는
   화면(관문 · 머리 띠 · HOME · READER · SEARCH · LIBRARY)까지만 맡는다.
   교재 조각 **안쪽**(`.gb` / `.mn`)은 book.css · manual.css 의 몫이다.
   여기서는 그 컨테이너에 바탕색 · 본문 크기 · 최대폭만 얹고 안으로 들어가지 않는다.
   두 파일이 같은 요소를 두고 다투면 조각이 챕터마다 다르게 보인다.

   ── reset 이 없다 ───────────────────────────────────────────────────────
   셸에는 normalize 도 reset 도 없다. 그래서 `[hidden]{display:none!important}`
   를 이 파일이 직접 깐다. guide.js 가 관문 · 띠 · 바닥글을 `el.hidden` 으로만
   켜고 끄기 때문에, 이 한 줄이 없으면 로그인 전 화면과 로그인 후 화면이 겹쳐 보인다.

   ── 가로 스크롤을 막는 방식 ─────────────────────────────────────────────
   `body{overflow-x:hidden}` 을 쓰지 않았다. 그걸 걸면 브라우저에 따라 안쪽
   `position:sticky`(리더의 목차 · 상단 줄)가 죽는다. 대신 넘칠 만한 자리를
   전부 막았다 — `*{min-width:0}`(그리드/플렉스 칸이 내용에 밀려 커지는 것 차단),
   `img,video{max-width:100%}`, 긴 URL·영문 낱말은 `overflow-wrap:break-word`(국문 어절은 `word-break:keep-all` 로 지킨다),
   히어로의 조명 그래픽은 `overflow:hidden` 안에, 폰의 내비 다섯 칸은 **자기**
   가로 스크롤 스트립(`.gnav{overflow-x:auto}`)으로 뺐다. 몸통은 절대 안 밀린다.

   ── 색과 위계 ───────────────────────────────────────────────────────────
   면적의 주인은 잉크 블랙 · 다크 네이비 · (리더만) 종이색이고 골드는 포인트다.
   영문 세리프 대문자 + 넓은 자간이 항상 위, 국문 산세리프 얇은 굵기가 아래.
   모서리는 0~2px, 모션은 느린 페이드와 미세 이동뿐이다.

   ── 글자 크기 ───────────────────────────────────────────────────────────
   보이는 글자는 **전부 15px 이상**이다. 40~50대 사원이 폰으로 읽는 화면이라
   「작게 줄여 예쁘게」를 포기했다. 리더 본문은 16.5px / 1.85 / 최대폭 820px.
   ========================================================================== */

/* ── ⓪ 토대 ─────────────────────────────────────────────────────────────── */

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

/* reset 이 없으므로 이 한 줄이 화면 전환의 전부다. 위 머리말 참조. */
[hidden] { display: none !important; }

:root {
  /* ── JFP 공통 토큰 한 벌 ────────────────────────────────────────────────
     guide.css 가 셋 중 가장 먼저 로드되므로 여기 :root 에 둔 값이 문서
     전체(`.gb` · `.mn` 조각 포함)에 걸린다. book.css 와 manual.css 는
     자기 하드코드를 버리고 아래 토큰을 **별칭(alias)** 만 한다.
     색을 새로 만들지 마라 — 여기 있는 값은 전부 세 파일에 이미 있던 값이다. */

  /* 다크 면 */
  --jfp-ink:        #050302;           /* 잉크 블랙 — 다크 배경의 주인 */
  --jfp-ink-2:      #0D0A07;           /* 한 겹 옅은 잉크 */
  --jfp-navy:       #000024;           /* 다크 네이비 — 보조 배경 */
  --jfp-card:       #0B0A12;           /* 다크 카드 바탕 */
  --jfp-espresso:   #2B2118;           /* 표 머리 · 눌린 토글 등 짙은 갈색 */

  /* 골드 */
  --jfp-gold:       #D7BC97;           /* 브랜드 골드 */
  --jfp-gold-a:     #D9A94E;           /* 액센트 골드 (그라데이션 · 세로선) */
  --jfp-gold-soft:  #E6CFA8;           /* CTA 그라디언트의 밝은 끝 */
  --jfp-gold-deep:  #A8823A;           /* 종이 위 골드 선 · 테두리 */
  --jfp-gold-ink:   #8A6A2E;           /* 종이 위 골드 선 (더 짙게) */

  /* ── 밝은 면 위 골드 글자 ────────────────────────────────────────────
     위 브랜드 골드는 **검은 면 전용**이다. --jfp-gold(#D7BC97) 는 잉크 블랙
     헤더 위에서 11.30:1 로 훌륭하지만, 같은 값을 크림 종이(--jfp-paper
     #FCFAF6) 위에 얹으면 1.75:1 밖에 나오지 않아 사실상 안 읽힌다.
     (--jfp-gold-a 2.07:1 · --jfp-dim 2.89:1 도 마찬가지다.)
     색조는 그대로 두고 명도만 낮춘 값을 따로 둔다. 아래 대비는 전부
     --jfp-paper(#FCFAF6) 를 바탕으로 잰 실측값이다.
     ★ 종이 위 **글자**에는 이 셋만 쓴다. 어두운 면은 위 골드 그대로 간다. */
  --jfp-gold-on-light:    #81715B;     /* 4.53:1 — 본문 · 목록 글자 */
  --jfp-gold-on-light-lg: #A18D71;     /* 3.07:1 — 큰 제목(18px 이상) 전용 */
  --jfp-golda-on-light:   #8D6E33;     /* 4.57:1 — 번호 · 라벨 등 액센트 */
  /* 같은 골드, 한 눈금 더 어둡게. 종이색(#FCFAF6)이 아니라 **눌린 크림**
     위에 얹히는 글자용이다 — 박스 바탕(--jfp-paper-2 #F5F1E9),
     사례 박스(--jfp-paper-3 #EFE9DE), 목차의 현재 줄(#F0EADD).
     위 두 값은 #FCFAF6 기준으로 딱 4.5:1 이라 바탕이 조금만 눌려도
     4.2:1 로 내려간다. 아래 두 값은 가장 어두운 크림(#EFE9DE) 에서도
     4.55 · 4.51:1 이라 어느 밝은 면에 놓아도 기준을 넘는다. */
  /* 바깥 틀. 화면이 넓으면 따라 늘어나되 1560 에서 멈춘다 — 그보다 넓어지면
     머리글 로고와 오른쪽 단추가 너무 멀어져 한 줄로 안 읽힌다. */
  --jfp-frame:      min(1560px, 100%);
  --jfp-frame-pad:  clamp(20px, 3vw, 48px);
  --jfp-gold-on-tint:     #756753;     /* 4.55:1 (#EFE9DE 기준) */
  --jfp-golda-on-tint:    #82652F;     /* 4.51:1 (#EFE9DE 기준) */

  /* 종이 면 */
  --jfp-white:      #FFFFFF;
  --jfp-paper:      #FCFAF6;           /* 리더 종이색 */
  --jfp-paper-2:    #F5F1E9;           /* 박스 바탕 */
  --jfp-paper-3:    #EFE9DE;           /* 한 단계 더 눌린 바탕 */
  /* 좌측 목차 바탕 — 종이색과 같은 값이다. 위 on-light 골드 셋이 #FCFAF6
     기준으로 딱 4.5:1 이라, 여기만 조금 어두우면(#F6F2EA → 4.25:1) 기준이
     깨진다. 칸 구분은 --hairl 골드 세로선이 맡는다. */
  --jfp-paper-toc:  var(--jfp-paper);

  /* 글자 */
  --jfp-ivory:      #F0E7D6;           /* 다크 배경 위 본문 */
  --jfp-dim:        #A4936F;           /* 다크 배경 위 딤 */
  --jfp-text:       #231916;           /* 종이 위 본문 */
  --jfp-text-2:     #57514A;           /* 종이 위 보조 */
  --jfp-text-3:     #867F74;           /* 종이 위 더 옅은 보조 */

  /* 선 */
  --jfp-hair:       rgba(217, 169, 78, .16);   /* 헤어라인 (다크) */
  --jfp-hair-2:     rgba(217, 169, 78, .30);   /* 강조 헤어라인 (다크) */
  --jfp-line:       rgba(34, 32, 28, .11);     /* 헤어라인 (종이) */
  --jfp-line-2:     rgba(34, 32, 28, .06);     /* 옅은 헤어라인 (종이) */
  --jfp-gline:      rgba(168, 130, 58, .30);   /* 골드 헤어라인 (종이) */
  --jfp-gline-soft: rgba(168, 130, 58, .14);   /* 옅은 골드 헤어라인 (종이) */

  /* 의미색 — 경고와 침착 두 갈래만 남긴다. 나머지 의미색은 여기로 흡수했다. */
  --jfp-warn:       #9E4726;
  --jfp-warn-bg:    #FBF2EE;
  --jfp-calm:       #3D5B50;
  --jfp-calm-bg:    #F1F4F3;
  /* 다크 배경 위 경고 글자(관문 오류 줄). --jfp-warn 은 어두워 다크면에서 안 읽힌다. */
  --jfp-warn-lt:    #E8A38A;

  /* 글꼴 — 폰트 파일은 셸이 <link> 로 부른다. 여기서 @import 하지 않는다.
     구글 폰트가 막히거나 늦어도 읽히도록 폴백 스택을 길게 깔았다. */
  --jfp-serif:    'Cormorant Garamond', 'Noto Serif KR', Garamond, Georgia,
                  'Times New Roman', 'Batang', serif;
  --jfp-serif-ko: 'Noto Serif KR', 'Nanum Myeongjo', Georgia, 'Batang', serif;
  --jfp-sans:     'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic',
                  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* 모서리 · 선 굵기 — 모든 모서리는 --jfp-r 하나로 통일한다. */
  --jfp-r:    2px;
  --jfp-r-0:  0;
  --jfp-bw:   1px;
  --jfp-bw-2: 2px;

  /* 간격 (4의 배수) */
  --jfp-s1: 4px;
  --jfp-s2: 8px;
  --jfp-s3: 12px;
  --jfp-s4: 18px;
  --jfp-s5: 26px;
  --jfp-s6: 40px;
  --jfp-s7: 62px;

  /* 읽는 글자 위계 — 이 여섯이 전부다. 바닥값은 --jfp-fs-sm(15px).
     --jfp-fs-label 은 대문자 + 넓은 자간 장식 라벨 전용이며 읽는 글자가 아니다. */
  --jfp-fs-h1:    clamp(26px, 3.6vw, 35px);
  --jfp-fs-h2:    21.5px;
  --jfp-fs-h3:    17px;
  --jfp-fs-body:  16.5px;
  --jfp-fs-sm:    15px;
  --jfp-fs-label: 12px;

  /* 전시용 큰 글자 — HOME · 관문의 화면 카피다. 읽는 글자(위 여섯)와 다른 축이며,
     여기까지 15~35px 로 눌러 버리면 히어로가 무너진다. */
  --jfp-fs-d1: clamp(34px, 7.4vw, 76px);
  --jfp-fs-d2: clamp(30px, 5vw, 48px);
  --jfp-fs-d3: clamp(22px, 3.2vw, 32px);
  --jfp-fs-d4: clamp(17px, 2.4vw, 22px);

  /* 리더 지면 — .rdtop · .rdbody · .rdnav 가 공유하는 하나의 기준선.
     --rd-gut 은 .rdmain 의 좌우 padding 과 **같은 값**이어야 한다.
     어두운 띠(.part-cover · .hero)가 이 값만큼 좌우로 흘러 나가기 때문이다. */
  --rd-gut:     24px;
  /* ── 읽는 지면은 **두 층**이다 (2026-09-07 본부장 지시) ──────────────────
     「오른쪽 여백이 너무 많아. 최대한 없게. 대신 비어 보이면 안 돼.」

     ① **글**(문단 · 목록 · 인용)은 --rd-measure 에서 멈춘다. 화면 끝까지 늘리면
        한 줄이 80자를 넘어 눈이 줄을 놓친다.
     ② **표 · 상자 · 그림 · 코드 · 체크리스트**는 그 밖으로 나가 **단 전체**를 쓴다.
        왼쪽 끝선은 글과 같고 오른쪽만 밖으로 — 그래서 「의도된 설계」로 읽힌다.
        오른쪽 여백은 이것들이 채운다(아래 「넓은 것은 …」 절).

     1040px 고정이던 것을 글자 크기에 **묶었다**. 폭만 넓히면 한 줄 글자 수가
     늘어 읽기가 나빠진다 — 폭과 글자를 같은 비율로 키워 한 줄 45~60자를 지킨다.
       --rd-fs   : ~1300px 아래는 16.5px 그대로, 1920px 부근에서 19.5px 까지
                   천천히 큰다(0.5vw + 10px 이 그 기울기다). 목차가 접히는
                   1100px 이하에서는 하한에 붙어 있어 **지금 동작 그대로**다.
       --rd-measure = 글자 60개 폭. 한글은 거의 정확히 1em 이라 60em ≈ 60자다.
     ★ 이 두 값을 손대면 `tests/unit_guidecss.mjs` 가 먼저 막는다. */
  --rd-fs:      clamp(16.5px, calc(0.5vw + 10px), 19.5px);
  --rd-measure: min(100%, calc(var(--rd-fs) * 60));

  /* ── 기존 짧은 이름은 남기되 값은 전부 공통 토큰을 가리킨다 ────────────
     이 이름들을 지우면 아래 규칙이 통째로 깨진다. 값만 바꾼다. */
  --ink:    var(--jfp-ink);
  --navy:   var(--jfp-navy);
  --gold:   var(--jfp-gold);
  --golda:  var(--jfp-gold-a);
  --ivory:  var(--jfp-ivory);
  --dim:    var(--jfp-dim);
  --hair:   var(--jfp-hair);
  --hair2:  var(--jfp-hair-2);
  --paper:  var(--jfp-paper);
  --read:   var(--jfp-text);
  --readdim:var(--jfp-text-2);
  --hairl:  var(--jfp-gline-soft);
  --gold-on-light:    var(--jfp-gold-on-light);
  --gold-on-light-lg: var(--jfp-gold-on-light-lg);
  --golda-on-light:   var(--jfp-golda-on-light);
  --gold-on-tint:     var(--jfp-gold-on-tint);
  --golda-on-tint:    var(--jfp-golda-on-tint);
  --card:   var(--jfp-card);
  /* 2026-09-25: 머리 줄(shell.ts)이 읽는 좌우 여백 — /app · /notice · /claim · /bojang 과 **같은 값 ·
     같은 분기**(48 · 1180 아래 28 · 980 아래 20)다. 문서를 옮겨도 로고와 탭이 한 픽셀도 움직이지
     않게 이 화면의 틀 여백(--jfp-frame-pad)이 아니라 그쪽에 맞췄다. 분기는 이 파일 맨 아래에 있다. */
  --gut:    48px;
  --serif:  var(--jfp-serif);
  --sans:   var(--jfp-sans);
}

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

body {
  margin: 0;
  max-width: 100%;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--jfp-fs-body);
  line-height: 1.7;
  letter-spacing: .01em;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* 포커스 링은 **반드시 보인다**. 목차를 키보드로 훑는 사람이 있다. */
:focus-visible { outline: 2px solid var(--golda); outline-offset: 3px; }
/* :focus-visible 을 모르는 브라우저용 폴백 */
a:focus, button:focus, input:focus { outline: 2px solid var(--golda); outline-offset: 3px; }
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) { outline: none; }
/* 종이 면(리더) 위에서는 --golda 가 2.07:1 이라 포커스 링이 안 보인다.
   3:1 을 넘는 밝은 면용 골드로 바꾼다. 어두운 면은 위 규칙 그대로. */
.rd :focus-visible,
.rd a:focus,
.rd button:focus,
.rd input:focus { outline-color: var(--golda-on-light); }

/* 순차 Fade In. guide.js 가 IntersectionObserver 로 `.on` 을 붙인다.
   관찰자가 없는 환경(jsdom 등)에서는 즉시 `.on` 이 붙으므로 화면이 비지 않는다. */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}
.rv.on { opacity: 1; transform: none; }

/* 모션을 원하지 않는 사람에게는 한 프레임도 움직이지 않는다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  /* 히어로 배경 영상은 guide.js 가 아예 받지 않는다(REDUCE). matchMedia 를 못
     읽는 환경 대비로 여기서 한 번 더 막는다 — 배경은 그라디언트만 남는다. */
  .hero-bg video { display: none !important; }
  .hero.has-video .hero-scrim { opacity: 0; }
  .home .hero.has-video .wrap::before { opacity: 0; }
}

/* 공통 폭. 화면 전체가 이 안에서 논다. */
/* 2026-09-05: 1180px 에 묶여 있어 넓은 화면에서 내용이 가운데로 몰려 보였다 —
   1900px 모니터에서 양쪽에 360px 씩 빈다. 화면을 따라가되 상한을 둔다.
   읽는 폭(--rd-measure 820px)은 별개라 이 값을 키워도 본문 줄 길이는 그대로다. */
.wrap { width: 100%; max-width: var(--jfp-frame); margin: 0 auto; padding: 0 var(--jfp-frame-pad); }

/* 영문 상위 / 국문 하위 — 브랜드 위계를 두 클래스로 못 박아 둔다. */
.en {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
}
.ko { font-family: var(--sans); font-weight: 300; }

/* ── ① 관문 (gate) ──────────────────────────────────────────────────────── */

.gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 8%, rgba(217, 169, 78, .13), rgba(217, 169, 78, 0) 55%),
    radial-gradient(circle at 50% 110%, rgba(215, 188, 151, .08), rgba(215, 188, 151, 0) 60%),
    var(--ink);
}

.gatebox {
  width: 100%;
  max-width: 420px;
  text-align: center;
  padding: 40px 26px 32px;
  border: 1px solid var(--hair);
  background: rgba(0, 0, 36, .38);
}

.gatelogo { width: 72px; height: 72px; margin: 0 auto 22px; object-fit: contain; }

.gate-en {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .30em;
  font-size: var(--jfp-fs-h2);
  line-height: 1.3;
  color: var(--gold);
  text-indent: .30em;          /* 자간이 넓으면 가운데가 왼쪽으로 밀린다 */
}
.gate-ko {
  margin-top: 8px;
  font-size: var(--jfp-fs-sm);
  font-weight: 300;
  color: var(--dim);
  letter-spacing: .08em;
}
.gate-msg {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-size: var(--jfp-fs-sm);
  color: var(--ivory);
}

.gate-form { margin-top: 18px; text-align: left; }
.gate-lab {
  display: block;
  font-size: var(--jfp-fs-sm);
  color: var(--dim);
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.gate-in {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--hair2);
  border-radius: var(--jfp-r);
  background: rgba(5, 3, 2, .72);
  color: var(--ivory);
  font-size: var(--jfp-fs-body);   /* iOS 가 16px 미만이면 확대한다 — 16.5px 은 안전 */
  letter-spacing: .10em;
}
.gate-in::placeholder { color: rgba(164, 147, 111, .6); }

/* CTA — 골드 그라디언트 + 다크 텍스트 (브랜드 규정) */
.gate-go {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--jfp-r);
  background: linear-gradient(135deg, var(--jfp-gold-soft) 0%, var(--golda) 100%);
  color: var(--jfp-ink-2);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-body);
  text-transform: uppercase;
  letter-spacing: .20em;
  transition: filter .3s ease;
}
.gate-go:hover { filter: brightness(1.06); }
.gate-go[disabled] { opacity: .55; cursor: default; }
.gate-retry { margin-top: 18px; }

.gate-err {
  margin-top: 14px;
  min-height: 21px;
  font-size: var(--jfp-fs-sm);
  color: var(--jfp-warn-lt);
  letter-spacing: .02em;
}
.gate-err:empty { min-height: 0; margin-top: 0; }

.gate-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: var(--jfp-fs-sm);
  color: rgba(164, 147, 111, .72);
  letter-spacing: .10em;
}

/* ── ② 머리 줄 · 알약 줄 · 발 (2026-09-25 본부장 확정 시안) ──────────────
   머리 줄(.gnb)과 발(.foot)의 모양은 셸 문서에 인라인으로 실리는 shell.ts SHELL_CSS 가 정한다 —
   /app · /notice · /claim · /bojang 과 **같은 상수**다. 여기에는 이 화면만의 자리 잡기만 둔다.
   예전의 잉크 머리 띠(.band · .bandin · .bandtop · .brand · .who-id · .deskbtn · .outbtn)와
   두 줄 내비(.gtab 의 영문 + 국문)는 걷었다. 영문은 발의 슬로건에만 남는다.
   ★ 본문(.view)은 2단계 전까지 어두운 그대로다 — 이번 단계는 껍데기만 바꾼다. */
.gtop {
  position: sticky;               /* body 에 overflow-x 를 걸지 않은 이유가 이것이다 */
  top: 0;
  z-index: 60;
  background: var(--one-paper);
}
/* 이 화면의 여섯 칸 — /app 탭 안의 알약과 같은 모양(.subtab)이다. 줄이 넘치면 **이 줄만** 옆으로 흐른다. */
.gnav { background: var(--one-paper); border-bottom: 1px solid var(--one-hair); }
/* ★ 선택자를 .gnav 안으로 한 겹 묶는다 — 셸 문서의 인라인 SHELL_CSS(.subtabs 의 여백 · 밑선)가
     이 파일보다 **뒤에** 실려서, 같은 무게의 선택자로는 그쪽이 이긴다(헤드리스 Edge 에서 알약이 왼쪽
     끝 0 에 붙어 선 것을 보고 잡았다). 가로 틀은 머리 줄과 같다(최대 1560 · 좌우 --gut). */
.gnav .gnav-in {
  max-width: 1560px;
  margin: 0 auto;
  padding: 12px var(--gut);
  border-bottom: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.gnav .gnav-in::-webkit-scrollbar { display: none; }
.gtab { flex: 0 0 auto; }
/* 발 — 몸통이 어두워도 발은 밝은 종이다(/app 과 같은 발). 가로 틀은 머리 줄과 같다. */
#foot { margin-top: 0; }
#foot .foot-in { max-width: 1560px; margin: 0 auto; padding: 24px var(--gut); }

/* 섹션 머리 */
.sec { padding: clamp(46px, 7vw, 84px) 0; }
.sec + .sec { border-top: 1px solid var(--hair); }
.sec-hd { margin-bottom: 30px; }
.sec-en {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-d3);
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--gold);
}
.sec-ko { margin-top: 8px; font-size: var(--jfp-fs-body); font-weight: 300; color: var(--dim); }
.sec-note { margin-top: 10px; font-size: var(--jfp-fs-sm); color: rgba(164, 147, 111, .82); }

/* 골드 아웃라인 배지 (JFP EXCLUSIVE 등) */
.badge {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--hair2);
  border-radius: var(--jfp-r);
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-sm);
  text-transform: uppercase;
  letter-spacing: .20em;
  color: var(--golda);
}

/* CTA 두 종류 */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--jfp-r);
  background: linear-gradient(135deg, var(--jfp-gold-soft) 0%, var(--golda) 100%);
  color: var(--jfp-ink-2);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-body);
  text-transform: uppercase;
  letter-spacing: .20em;
  transition: filter .3s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta.ghost {
  background: transparent;
  border-color: var(--hair2);
  color: var(--gold);
}
.cta.ghost:hover { background: rgba(217, 169, 78, .10); border-color: var(--gold); }

.msg {
  padding: 26px 0;
  font-size: var(--jfp-fs-body);
  color: var(--dim);
  word-break: keep-all; overflow-wrap: break-word;
}
.msg.err { color: var(--jfp-warn-lt); }

/* ── ④ HOME ────────────────────────────────────────────────────────────── */

.home { display: block; }

/* Hero — 여백 최대 + 한 줄의 강한 카피. 무대 조명 두 개는 ::before/::after 다. */
.hero {
  position: relative;
  overflow: hidden;               /* 조명이 몸통을 넓히지 못하게 가둔다 */
  padding: clamp(60px, 11vw, 132px) 0 clamp(52px, 8vw, 104px);
  background: linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
}
.hero::before, .hero::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; }
.hero::before {
  width: 820px; height: 820px; left: 50%; top: -430px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(217, 169, 78, .17), rgba(217, 169, 78, 0) 62%);
}
.hero::after {
  width: 640px; height: 640px; left: -160px; bottom: -400px;
  background: radial-gradient(circle, rgba(215, 188, 151, .11), rgba(215, 188, 151, 0) 65%);
}
.hero .wrap { position: relative; }

/* ── 히어로 배경 영상 (2026-09-06) ─────────────────────────────────────────
   본부장 지시로 승격 리워드 구역을 없애고 그 영상을 히어로 배경으로 올렸다
   (guide.js `buildHero` · `heroVideo`). 층은 넷이고 순서가 전부다:
     .hero-bg (z 0)  영상          — 없으면 그냥 비어 있다
     ::before/::after (z 1)  골드 무대 조명
     .hero-scrim (z 2)  스크림      — ★ 조명보다 **위**여야 글자가 읽힌다
     .wrap (z 3)  글자
   `.hero` 는 챕터 본문(.rdbody.mn article.chapter .hero)에도 쓰여서, 높이·
   층 규칙은 `.home` 안으로만 건다. 벗겨 두면 읽는 화면의 표지가 같이 늘어난다. */
.home .hero {
  isolation: isolate;             /* z-index 를 이 안에서만 논다 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 영상이 오든 안 오든 높이가 같아야 늦게 붙는 영상에 화면이 튀지 않는다.
     svh 를 모르는 브라우저는 앞줄(vh)로 떨어진다. */
  min-height: 76vh;
  min-height: min(76svh, 760px);
}
.home .hero::before, .home .hero::after { z-index: 1; }
.home .hero .wrap { z-index: 3; }

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;              /* 세로(9:16) 영상이라 넘치는 쪽을 잘라 낸다 */
  object-position: 50% 35%;       /* 얼굴이 있는 위쪽을 남긴다 */
}

/* 스크림 — 영상과 글자 사이를 잉크 블랙으로 덮는다. 아래로 갈수록 짙어진다.
   2026-09-07 본부장 지시(「영상이 너무 어둡다, 더 밝게」)로 **두 층**으로 나눴다.
   구도·위치는 그대로다:
     ① .hero-scrim   — 화면 전체에 옅게(.35 → .45 → .75). 영상이 「보이는」 층.
     ② .wrap::before — 글자 덩어리 뒤에만 잉크 타원(.54). 62% 까지 평평하고
        가장자리에서 0 으로 사라진다 — 경계가 없어 상자처럼 보이지 않는다.
        PC 는 글자가 왼쪽에 몰리니 타원도 왼쪽(34%)에, 폰은 가운데(아래 720px).
   글자 뒤 실효 알파 = 1 − (1 − ①)(1 − ②) ≈ .70(위) ~ .89(아래).
   ★ 기준은 「흰 프레임」이 아니라 **실제 영상**이다 — promotion-v4.mp4 를 2fps 로
   뽑은 56 프레임을 히어로 크기(1920×760 · 1440×760 · 390×574)에 cover · 50% 35%
   로 맞춰 얹고, 무대 조명까지 합성한 뒤 글자 영역 8px 블록 가운데 **가장 밝은
   블록** 위에서 잰 최소 대비(1920 / 1440 / 폰) — 2026-09-07 `.hero-sub` 를
   640px → 880px 로 넓히고 다시 잰 값이다:
     .hero-kicker  --jfp-gold-a #D9A94E → 5.12 / 5.22 / 5.29  (본문 크기 · 4.5:1 필요)
     .hero-en      --jfp-ivory  #F0E7D6 → 8.76 / 8.68 / 8.36  (큰 글자 · 3:1 필요)
     .hero-ko      --jfp-gold   #D7BC97 → 6.59 / 6.58 / 6.06  (4.5:1 필요)
     .hero-sub     ivory 78%            → 6.63 / 6.60 / 6.71  (4.5:1 필요)
   넓힌 본문(1920 에서 x 228~956)은 여전히 타원의 평평한 구역(.54) 안이라 값이
   거의 그대로다 — 여기서 더 넓히면 오른쪽 끝이 타원 가장자리로 나간다.
   가장 밝은 순간은 후미등 궤적(흰색에 가깝다)과 흰 차체다. 거기서 ② 를 빼고
   ① 만 두면 kicker 가 1.8:1 로 깨진다. **더 옅게 하려면** 위 표를 다시 재고
   tests/unit_guide.mjs [6]-⑤ 를 같이 고칠 것. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(5, 3, 2, .35) 0%,
      rgba(5, 3, 2, .45) 50%,
      rgba(5, 3, 2, .75) 100%);
  opacity: 0;                     /* 영상이 붙기 전에는 화면을 건드리지 않는다 */
  transition: opacity 1.2s ease;  /* 느리고 절제되게, 한 번만 */
}
/* 영상이 실제로 붙은 뒤에만 켠다 — 영상이 없는데 덮으면 무대 조명이 죽어
   히어로가 그냥 검은 칸이 된다. guide.js 가 `has-video` 를 그때 붙인다. */
.hero.has-video .hero-scrim { opacity: 1; }
/* ── ③ 히어로 아래 경계 페이드 (2026-09-07) ──────────────────────
   본부장 지시: 「아래쪽에 마크 아래 파이넨셜 파트너스 짤린부분 때문에 좀 지저분하네」.
   promotion-v4.mp4 는 1080×1920 세로인데 히어로는 가로로 넓다(1920×760). cover 로
   채우면 세로로 27%~50% 구간만 보이고, 22 초부터 나오는 엔딩 카드의
   **「FINANCIAL PARTNERS」 워드마크(원본 48.8%~50.7%)가 하필 아래 경계(49.5%)에
   걸려 글자가 가로로 뚝 잘린다.** 그 잘린 자국이 지저분하다.

   `object-position` 만 옮기는 것으로는 못 고친다 — 엔딩 카드를 피하면 다른 장면의
   얼굴·차가 그 자리에 와서 또 걸린다. 그래서 **어느 프레임이 걸리든** 아래 경계를
   잉크 블랙으로 녹인다. 경계선이 보이면 안 되므로 여섯 단계로 나눴다.

   자리는 `.hero-scrim::after` 다. 이유가 셋이다.
     ① `.hero-scrim` 이 z-index 2 라 쌓임 맥락을 만든다 → 그 안의 ::after 는
        영상(z 0)·무대 조명(z 1)·스크림 자신보다 **위**, 글자(.wrap z 3)보다
        **아래**에 앉는다. 지시받은 층 그대로다.
     ② 스크림의 `opacity` 를 그대로 탄다 → **영상이 붙었을 때만**(`has-video`)
        켜지고, `prefers-reduced-motion` 에서는 스크림과 함께 꺼진다. 영상이 없는
        화면은 한 픽셀도 바뀌지 않는다.
     ③ guide.js 를 건드리지 않는다(요소를 새로 만들 필요가 없다).

   높이 22% · 아래 12% 는 알파 1 로 눌러 둔다. 데스크톱 1920×760 에서 워드마크가
   보이는 조각은 화면 y 737~760(아래 3%)이라 그 구간이 완전한 잉크여야 자국이
   사라진다. 아래로 -2px 빼 둔 것은 퍼센트 반올림으로 마지막 한 줄이 뜨는 것을
   막기 위해서다(`.hero{overflow:hidden}` 이 잘라 낸다).

   ★ 히어로 **아래에 이어지는 구역**(.sec — 진행률·주차 요약)의 바탕도 --ink 다.
   페이드가 아래 끝에서 정확히 #050302 로 끝나므로 두 구역 사이에 색 단차가 없다.
   여기 색을 --ink 아닌 값으로 바꾸면 그 경계에 띠가 생긴다. */
.hero-scrim::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: calc(22% + 2px);
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(5, 3, 2, 0) 0%,
      rgba(5, 3, 2, .18) 28%,
      rgba(5, 3, 2, .50) 55%,
      rgba(5, 3, 2, .82) 72%,
      rgba(5, 3, 2, 1) 88%,
      rgba(5, 3, 2, 1) 100%);
}
/* ② 글자 뒤 국소 잉크 타원. .wrap 은 z-index 3 의 쌓임 맥락이라 z-index:-1 이
   글자 아래 · 스크림 위에 앉는다. 음수 inset 으로 .wrap 밖까지 넓게 깔아 타원의
   사라지는 가장자리가 글자 상자와 겹치지 않게 한다(.hero 가 overflow 로 자른다). */
.home .hero .wrap::before {
  content: "";
  position: absolute; z-index: -1;
  top: -60%; bottom: -60%; left: -20%; right: -20%;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 62% at 34% 50%,
      rgba(5, 3, 2, .54) 0%,
      rgba(5, 3, 2, .54) 62%,
      rgba(5, 3, 2, 0) 100%);
  opacity: 0;
  transition: opacity 1.2s ease;  /* 스크림과 같은 박자로 */
}
.home .hero.has-video .wrap::before { opacity: 1; }
/* (2026-09-07) 히어로에서 단추를 없앴다 — `.hero.has-video .cta.ghost` 로 유령 단추
   테두리를 골드 실선까지 올려 두었던 규칙은 더 볼 것이 없어 지웠다. 다른 화면의
   `.cta.ghost`(진행률 구역의 「이어서 읽기」 · hub 가 없을 때의 히어로 폴백)는 그대로다. */

.hero-kicker {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-body);
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--golda);
}
.hero-en {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-d1);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ivory);
  word-break: keep-all; overflow-wrap: break-word;
}
.hero-ko {
  margin-top: 18px;
  font-size: var(--jfp-fs-d4);
  font-weight: 300;
  color: var(--gold);
  letter-spacing: .04em;
}
/* 2026-09-07 본부장 지시 — 「끝까지 한 줄에 다 쓴다」. 640px 안에서는 59자짜리
   문장이 두 줄로 접혔고, `word-break` 기본값 탓에 「트레이닝으 / 로」처럼 낱말 가운데가
   끊겼다. 글자를 줄이는 대신 **측정선을 넓혔다** — 데스크톱에서 한 줄에 들어가는
   실측 너비는 약 800px 이라 880px 로 둔다(--jfp-fs-body 16.5px 그대로, 저장소 최소
   15px 규칙을 건드리지 않는다). 폰에서는 `min(100%, …)` 로 화면을 넘지 않고,
   `keep-all` 이 낱말 가운데를 끊지 못하게 막는다. */
.hero-sub {
  margin-top: 16px;
  max-width: min(100%, 880px);
  font-size: var(--jfp-fs-body);
  color: rgba(240, 231, 214, .78);
  word-break: keep-all; overflow-wrap: break-word;
}
.hero-btns { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Stats 띠 */
.stats {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--ink);
}
.stats-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--hair);
}
.stat { background: var(--ink); padding: 32px 20px; text-align: center; }
.stat-v {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-d2);
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat-l { margin-top: 8px; font-size: var(--jfp-fs-body); color: var(--ivory); }
.stat-n { margin-top: 4px; font-size: var(--jfp-fs-sm); color: rgba(164, 147, 111, .82); }

/* 나의 학습 진행 */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.prog-card { padding: 22px; border: 1px solid var(--hair); background: var(--card); }
.prog-t {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-h3);
  text-transform: uppercase;
  letter-spacing: .20em;
  color: var(--gold);
}
.prog-k { margin-top: 6px; font-size: var(--jfp-fs-sm); color: var(--dim); }
.prog-n {
  margin-top: 14px;
  font-size: var(--jfp-fs-body);
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.prog-n b { font-family: var(--serif); font-size: var(--jfp-fs-h1); font-weight: 600; color: var(--golda); }
.bar { margin-top: 12px; height: 3px; background: rgba(217, 169, 78, .14); }
.bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--golda));
  transition: width .9s ease;
}
.prog-go { margin-top: 22px; }

/* Systems 4카드 */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}
.sys-card {
  padding: 26px 24px 28px;
  border: 1px solid var(--hair);
  background:
    radial-gradient(circle at 88% 0%, rgba(217, 169, 78, .10), rgba(217, 169, 78, 0) 58%),
    linear-gradient(160deg, var(--jfp-card) 0%, var(--jfp-ink) 100%);
  transition: border-color .4s ease, transform .4s ease;
}
.sys-card:hover { border-color: var(--hair2); transform: translateY(-2px); }
.sys-en {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-h2);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ivory);
}
.sys-ko { margin-top: 8px; font-size: var(--jfp-fs-body); color: var(--gold); }
.sys-d { margin-top: 14px; font-size: var(--jfp-fs-sm); color: rgba(240, 231, 214, .76); }
.sys-p { margin-top: 16px; display: grid; gap: 8px; }
.sys-p li { position: relative; padding-left: 16px; font-size: var(--jfp-fs-sm); color: var(--dim); }
.sys-p li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 4px; height: 4px; background: var(--golda);
}

/* Journey — 세로 타임라인 (폰에서도 세로) */
.jour { position: relative; display: grid; gap: 0; }
.jstep { position: relative; padding: 0 0 34px 34px; border-left: 1px solid var(--hair); }
.jstep:last-child { border-left-color: transparent; padding-bottom: 0; }
.jstep::before {
  content: ''; position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px; background: var(--golda); border-radius: 50%;
}
.jweek {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--hair2);
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-sm);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--golda);
}
.jt { margin-top: 12px; font-size: var(--jfp-fs-h3); font-weight: 400; color: var(--ivory); }
.jl { margin-top: 10px; display: grid; gap: 7px; }
.jl li { position: relative; padding-left: 15px; font-size: var(--jfp-fs-sm); color: var(--dim); }
.jl li::before { content: ''; position: absolute; left: 0; top: .68em; width: 4px; height: 1px; background: var(--dim); }
/* ── Journey · DAY 0~20 일차 카드 (2026-09-06) ────────────────────────────
   위 .jour/.jstep 는 **지우지 않았다** — days 가 없는 hub.json 을 받으면 화면이
   그리로 내려간다. 아래가 일차 구조의 새 어휘다.

   ① 색은 전부 기존 토큰이다. 여기는 잉크 블랙 위이므로 브랜드 골드(--gold)를
      그대로 쓴다(11.30:1). 밝은 면 위 골드(--*-on-light)는 리더 쪽 몫이다.
   ② 보이는 글자는 전부 15px(--jfp-fs-sm) 이상이다. 라벨도 줄이지 않았다 —
      이 화면은 첫날 신입이 폰으로 본다.
   ③ 가로 넘침: 카드 안 모든 격자 칸이 minmax(0,1fr) 이고, 국문은 keep-all,
      긴 영문·URL 은 break-word 다. 몸통은 밀리지 않는다.
   ④ 20일을 한 번에 펴면 홈이 다시 길어진다. 주차는 <details> 로 접고 guide.js 가
      「이번 주」 하나만 open 으로 연다. 접고 펴는 데 자바스크립트가 없다. */

/* ── 홈의 주차 요약 네 줄 (2026-09-07) ────────────────────────────────────
   일차 카드를 `#journey` 탭으로 옮기면서 홈에 남긴 것이다. 한 줄이 통째로 링크라
   어디를 눌러도 여정 탭으로 간다. 격자는 [WEEK n] [주차 이름] [DAY a–b] 세 칸이고,
   가운데 칸만 늘어난다(1fr) — 그래야 오른쪽 DAY 범위가 줄마다 같은 선에 선다.
   글자는 전부 15px(--jfp-fs-sm) 이상, 국문은 keep-all 이다. 폰에서는 두 줄로
   접어 DAY 범위를 주차 번호 옆에 붙인다(아래 720px). */
.jbrief { display: grid; }
.jb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 16px;
  padding: 15px 4px;
  border-top: 1px solid var(--hair);
  transition: background-color .3s ease;
}
.jbrief .jb-row:last-child { border-bottom: 1px solid var(--hair); }
.jb-row:hover { background: rgba(217, 169, 78, .06); }
.jb-row:focus-visible { outline: 2px solid var(--golda); outline-offset: -2px; }
/* 세리프(Cormorant Garamond)의 기본 숫자는 옛날식(oldstyle)이라 0 이 소문자 o 처럼
   작게 앉는다. 「DAY 0–5」가 「DAY o–5」로 읽혔다. 숫자를 읽히는 자리이므로 대문자
   높이의 lining 숫자로 바꾸고, 줄마다 폭이 같도록 tabular 도 같이 건다 —
   .stat-v · .prog-n · .lib-s 가 이미 쓰는 그 어휘다. */
.jb-w {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-sm);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}
.jb-t {
  font-size: var(--jfp-fs-sm);
  color: var(--ivory);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.jb-d {
  font-family: var(--serif);
  font-size: var(--jfp-fs-sm);
  letter-spacing: .10em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--dim);
  white-space: nowrap;
}
/* 단추 글자도 세리프다 — 「30일」의 0 이 소문자 o 로 앉지 않게 여기서도 lining. */
.jb-go { margin-top: 20px; }
.jb-go .cta { font-variant-numeric: lining-nums; }

.dsum {
  padding: 18px 20px 20px;
  border: 1px solid var(--hair);
  background: linear-gradient(160deg, var(--jfp-card) 0%, var(--jfp-ink) 100%);
}
.dsum-t { font-size: var(--jfp-fs-h3); font-weight: 400; color: var(--ivory); }
.dsum-t b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-d4);
  letter-spacing: .04em;
  color: var(--gold);
}
.dsum .bar { margin-top: 12px; }
.dsum-n { margin-top: 10px; font-size: var(--jfp-fs-sm); color: var(--dim); }

/* 주차 — 접히는 덩어리 */
.dwk {
  margin-top: 14px;
  border: 1px solid var(--hair);
  background: var(--jfp-ink-2);
}
.dwk[open] { border-color: var(--hair2); }
.dwk-s {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.dwk-s::-webkit-details-marker { display: none; }
.dwk-s::marker { content: ''; }
.dwk-s:focus-visible { outline: 2px solid var(--golda); outline-offset: -2px; }
.dwk-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-h3);
  letter-spacing: .14em;
  color: var(--gold);
}
.dwk-t {
  flex: 1 1 200px;
  font-size: var(--jfp-fs-sm);
  color: var(--ivory);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.dwk-c {
  padding: 3px 9px;
  border: 1px solid var(--hair2);
  font-size: var(--jfp-fs-sm);
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
}
.dwk-g {
  margin: 0 20px 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  font-size: var(--jfp-fs-sm);
  color: var(--dim);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 하루 */
.dday {
  padding: 20px 20px 22px;
  border-top: 1px solid var(--hair);
}
.dwk > .dday:first-of-type { border-top: 0; }
.dday.is-done { background: rgba(217, 169, 78, .045); }
.dday-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.dday-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-d4);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--golda);
}
.dday-l { font-size: var(--jfp-fs-sm); color: var(--ivory); }
.dday-ok {
  padding: 2px 9px;
  border: 1px solid var(--hair2);
  font-size: var(--jfp-fs-sm);
  color: var(--gold);
  white-space: nowrap;
}

.dday-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 4px 18px;
  align-items: start;
}
.dday-c { display: grid; gap: 8px; min-width: 0; }
.dday-lb {
  font-size: var(--jfp-fs-sm);
  letter-spacing: .04em;
  color: var(--golda);
  word-break: keep-all;
}
.dday-am {
  font-size: var(--jfp-fs-h3);
  font-weight: 400;
  color: var(--ivory);
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 그날의 출력물이 있는 과목명은 **눌러서 열린다**(#file/<id>).
   ★ 링크인 것이 보이되 요란하면 안 된다 — 골드는 포인트다. 옅은 골드 밑줄 하나가
     전부이고, hover · focus 에서만 또렷해진다(그것도 느리게).
   ★ 링크가 있는 날과 없는 날의 **글자 크기 · 굵기 · 색 · 줄 간격이 똑같아야 한다.**
     둘 다 `.dday-am` 을 쓰므로 글자는 이미 같다. 남는 문제는 상자 모양 둘이다.
       (1) 부모 `.dday-c` 가 그리드라 자식은 block 으로 눌린다 — 그대로 두면 밑줄이
           칸 전체로 늘어난다. justify-self·fit-content 로 글자 폭에 맞춘다.
       (2) 밑줄을 띄우는 padding-bottom 2px 만큼 줄이 아래로 밀린다 — 같은 값의
           음수 margin 으로 정확히 되돌려 `<p class="dday-am">` 인 날과 높이를 맞춘다. */
.dday-am-l {
  display: inline-block;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 169, 78, .28);
  padding-bottom: 2px;
  margin-bottom: -2px;
  transition: border-bottom-color .35s ease;
}
.dday-am-l:hover,
.dday-am-l:focus-visible { border-bottom-color: var(--golda); }
.dday-tx,
.dday-q,
.dday-task,
.dday-gate,
.dday-wk,
.dday-next {
  font-size: var(--jfp-fs-sm);
  color: var(--dim);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.dday-k { font-weight: 500; color: var(--gold); }
.dday-q,
.dday-task { color: rgba(240, 231, 214, .82); }

/* 챕터 링크 — 눌러서 그 챕터로 간다 */
.dch-l { display: flex; flex-wrap: wrap; gap: 7px; }
.dch {
  display: inline-block;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--hair2);
  font-size: var(--jfp-fs-sm);
  line-height: 1.45;
  color: var(--ivory);
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.dch:hover,
.dch:focus-visible {
  border-color: var(--gold);
  background: rgba(217, 169, 78, .08);
  color: var(--gold);
}

/* 첫날의 절차 · 세팅 · 체크리스트, 그리고 「함께 보면 좋은 것」 */
.dday-box {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  display: grid;
  gap: 9px;
}
.dday-todo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 7px 16px;
}
.dday-todo li {
  position: relative;
  padding-left: 15px;
  font-size: var(--jfp-fs-sm);
  color: var(--dim);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.dday-todo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 4px;
  height: 1px;
  background: var(--dim);
}

.dday-gate,
.dday-wk,
.dday-next { margin-top: 12px; }
.dday-gate,
.dday-next {
  padding: 11px 14px;
  border-left: 2px solid var(--hair2);
  background: rgba(217, 169, 78, .05);
}
.dday-next { border-left-color: var(--golda); color: var(--ivory); }

@media (max-width: 720px) {
  /* 폰에서는 세 칸이 한 줄에 안 들어간다. 주차 번호와 DAY 범위를 윗줄 양 끝에 두고
     주차 이름을 아랫줄 통으로 내린다 — 이름이 잘리지 않는다.
     ★ 자리를 **명시**해야 한다. 자동 배치에 맡기면 1/-1 로 늘린 이름이 첫 줄에
       못 들어가 둘째 줄로 가고, DAY 가 셋째 줄까지 밀려 세 줄이 된다. */
  .jb-row { grid-template-columns: auto auto; justify-content: space-between; gap: 4px 12px; }
  .jb-w { grid-area: 1 / 1; }
  .jb-d { grid-area: 1 / 2; }
  .jb-t { grid-area: 2 / 1 / 3 / -1; }
  .dsum { padding: 16px 15px 18px; }
  .dwk-s { padding: 14px 15px; }
  .dwk-g { margin: 0 15px 4px; }
  .dday { padding: 16px 15px 18px; }
  .dday-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dday-todo { grid-template-columns: minmax(0, 1fr); }
  .dch-l { display: grid; gap: 6px; }
  .dch { display: block; }
}


/* Curriculum */
.trk + .trk { margin-top: 28px; }
.trk-t {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-h3);
  text-transform: uppercase;
  letter-spacing: .20em;
  color: var(--gold);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.trk-g {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.trk-g li {
  padding: 11px 13px;
  border: 1px solid var(--hair);
  font-size: var(--jfp-fs-sm);
  color: var(--ivory);
  word-break: keep-all; overflow-wrap: break-word;
}

/* Volumes 13칸 */
.vol-g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.vol { background: var(--ink); padding: 20px 18px; }
.vol-no {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--jfp-fs-d2);
  line-height: 1;
  color: var(--golda);
}
.vol-en {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-body);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ivory);
  word-break: keep-all; overflow-wrap: break-word;
}
.vol-ko { margin-top: 5px; font-size: var(--jfp-fs-sm); color: var(--dim); }

/* Reward 구역(rew-* · vframe · vwait 규칙)은 2026-09-06 에 통째로 없앴다.
   그 영상은 이제 히어로 배경이다 — 위 hero-bg · hero-scrim 규칙 참고. */

/* Tools */
.tool-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.tool {
  display: block;
  padding: 22px;
  border: 1px solid var(--hair);
  background: var(--card);
  transition: border-color .4s ease, transform .4s ease;
}
.tool:hover { border-color: var(--hair2); transform: translateY(-2px); }
.tool-n { font-size: var(--jfp-fs-h3); font-weight: 400; color: var(--gold); word-break: keep-all; overflow-wrap: break-word; }
.tool-d { margin-top: 8px; font-size: var(--jfp-fs-sm); color: rgba(240, 231, 214, .76); }
.tool-h { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: var(--jfp-fs-sm); color: var(--dim); }

/* Resources */
.res-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.res {
  display: block;
  padding: 22px;
  border: 1px solid var(--hair);
  background: var(--card);
  transition: border-color .4s ease, transform .4s ease;
}
.res:hover { border-color: var(--hair2); transform: translateY(-2px); }
.res-t { font-size: var(--jfp-fs-h3); color: var(--ivory); word-break: keep-all; overflow-wrap: break-word; }
.res-d { margin-top: 8px; font-size: var(--jfp-fs-sm); color: var(--dim); }

/* Library (PDF 목록) */
.lib-l { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.lib-i {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 18px 20px;
  background: var(--ink);
}
.lib-tx { flex: 1 1 240px; }
.lib-t { font-size: var(--jfp-fs-body); color: var(--ivory); word-break: keep-all; overflow-wrap: break-word; }
/* id 가 있는 자료는 제목이 링크다 — 눌러서 그 자리에서 연다(#file/<id>).
   `.dday-am-l` 과 **같은 표시**를 쓴다: 옅은 골드 밑줄 하나, hover·focus 에서만 또렷.
   같은 뜻(눌러서 열린다)에 다른 모양을 주면 화면이 두 벌처럼 보인다.
   여기 부모(.lib-tx)는 그리드가 아니라 inline-block 이 그대로 먹는다. */
.lib-t-l {
  display: inline-block;
  max-width: 100%;
  border-bottom: 1px solid rgba(217, 169, 78, .28);
  padding-bottom: 2px;
  transition: border-bottom-color .35s ease;
}
.lib-t-l:hover,
.lib-t-l:focus-visible { border-bottom-color: var(--golda); }
.lib-d { margin-top: 5px; font-size: var(--jfp-fs-sm); color: var(--dim); }
.lib-s {
  font-size: var(--jfp-fs-sm);
  color: rgba(164, 147, 111, .82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 자료실 목록(.lib-b)과 자료 화면(.fv-b)의 내려받기 단추는 **같은 물건**이다 —
   같은 동작(bindDownload)을 같은 모양으로 낸다. 규칙을 묶어 두면 갈라질 수 없다. */
.lib-b,
.fv-b {
  padding: 10px 18px;
  border: 1px solid var(--hair2);
  border-radius: var(--jfp-r);
  background: transparent;
  color: var(--gold);
  font-family: var(--serif);
  font-size: var(--jfp-fs-sm);
  text-transform: uppercase;
  letter-spacing: .18em;
  white-space: nowrap;
  transition: background-color .3s ease;
}
.lib-b:hover,
.fv-b:hover { background: rgba(217, 169, 78, .10); }
.lib-b[disabled],
.fv-b[disabled] { opacity: .5; cursor: default; }

/* ── 자료 한 편 화면 (#file/<id> · 2026-09-08) ─────────────────────────────
   PDF 는 기기 토큰 뒤에 있어 `<iframe src>` · `<embed src>` 로는 못 연다(그 태그에
   Authorization 이 안 실린다). guide.js 가 fetch 로 받아 pdf.js 로 **캔버스에 직접**
   그린다 — 그래서 이 구역의 종이 면은 `<canvas>` 다.
   ★ 이 구역이 지켜야 하는 것은 하나다: **390px 폰에서 종이가 단을 넘지 않는다.**
     캔버스의 픽셀 폭은 선명함을 위해 devicePixelRatio 만큼 크지만, CSS 폭은 아래
     `.fv-cv` 가 100% 로 묶는다. 그래도 넘칠 여지를 남기지 않으려 `.fv-doc` 에
     자기 가로 스크롤을 두었다 — 몸통(body)이 가로로 밀리는 것보다 낫다.
   ★ 폭은 `.wrap`(--jfp-frame 1560px)보다 좁은 900px 이다. 종이는 읽는 물건이라
     화면 끝까지 늘리면 오히려 글이 작아 보인다. */
.fv {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 52px) var(--jfp-frame-pad) 80px;
  background: var(--ink);
  color: var(--ivory);
}
/* 되돌아가는 문. 옅은 골드 · 작은 글자 — 화면의 주인공이 아니다. */
.fv-back {
  display: inline-block;
  font-family: var(--serif);
  font-size: var(--jfp-fs-sm);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--golda);
  transition: color .35s ease;
}
.fv-back:hover { color: var(--gold); }

.fv-hd {
  margin: 18px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
/* 국문 제목이라 산세리프 · 중간 굵기다(영문 세리프 위계는 위 섹션 제목이 맡는다). */
.fv-t {
  font-family: var(--sans);
  font-size: var(--jfp-fs-h2);
  font-weight: 400;
  color: var(--ivory);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.fv-d {
  margin-top: 8px;
  font-size: var(--jfp-fs-sm);
  color: var(--dim);
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 좁은 화면에서는 크기와 단추가 두 줄로 내려간다. */
.fv-act {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.fv-s {
  font-size: var(--jfp-fs-sm);
  color: rgba(164, 147, 111, .82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fv-msg { font-size: var(--jfp-fs-sm); color: var(--dim); }
.fv-msg.err { color: var(--jfp-warn-lt); }

/* 종이 면. 캔버스가 흰색이므로 **쪽 사이 간격만** 잉크로 보인다. */
.fv-doc {
  display: grid;
  gap: 14px;
  overflow-x: auto;
}
.fv-cv {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--hair);
}

/* ── 홈의 소리 토글 (2026-09-08) ──────────────────────────────────────────
   `/app` 홈의 것과 **같은 단추**다(web.ts 의 .hh-snd). 본부장 지시로 두 화면 모두
   오른쪽 아래에 고정한다 — 상태가 바뀌어도 자리 · 크기 · 모양은 그대로이고 아이콘만
   바뀐다. 같은 것을 가리키는 단추가 자리를 옮기면 사람은 그것을 같은 단추로 보지 않는다.

   ★ 글자가 없다. 아이콘 둘(스피커 · 빗금 친 스피커)이 서 있고 aria-pressed 가 그중
     하나만 그린다 — guide.js 는 속성만 만지고 글자를 짓지 않는다.
   ★ 골드는 **테두리로만** 쓴다. 어두운 판 위에 골드 아이콘을 채워 넣으면 면이 된다.
   ★ 이 화면에는 하단 고정 요소가 이것 하나뿐이다(다른 position:fixed 는 관문 ·
     리더 드로어 · 그 스크림뿐이고 셋 다 홈에 없다). 그래도 폰의 제스처 바를 피해
     safe-area 만큼 더 올린다.
   ★ 홈이 아닐 때는 아예 없다 — 단추가 홈 루트 안에 있어 라우트가 바뀌면
     route() 의 clear($view) 가 통째로 걷어 간다(guide.js 의 bgmMake 주석). */
.gsnd {
  position: fixed;
  z-index: 40;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 169, 78, .55);
  background: rgba(5, 3, 2, .72);
  color: var(--ivory);
  cursor: pointer;
  /* 느리게. 이 브랜드는 화려한 모션을 금한다 — 밝아지는 것도 커지는 것도 눈에 띄기
     전에 끝나면 안 되고, 튀어도 안 된다. */
  transition: border-color .45s ease, background-color .45s ease, transform .45s ease;
}
.gsnd:hover { border-color: var(--gold); transform: scale(1.08); }
.gsnd:focus-visible { outline: 2px solid var(--golda); outline-offset: 3px; }
/* 아이콘은 인라인 SVG 다(이모지 · 외부 이미지 금지 — CSP 가 img-src 'self' data: blob: 다).
   선으로만 그린다 — 채우면 골드도 아이보리도 면이 되어 버린다. */
.gsnd svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 상태는 aria-pressed **하나**가 정한다 — 보조기기가 읽는 값과 눈에 보이는 그림이
   같은 한 속성에 매달려 있어 서로 어긋날 수가 없다.
   true = 지금 나고 있다(스피커) · false = 꺼져 있거나 막혔다(빗금 친 스피커). */
.gsnd .i-off { display: none; }
.gsnd[aria-pressed="false"] .i-on { display: none; }
.gsnd[aria-pressed="false"] .i-off { display: block; }
/* 자동재생이 막혔을 때만 붙는다(.pulse). 아무 일도 안 일어나면 사원은 음악이 있다는
   것조차 모른다 — 그렇다고 글자를 띄우면 홈이 상태판이 된다. 2초 주기로 **테두리
   밝기만** 오간다. 움직이는 것도 커지는 것도 없다. */
@keyframes gsnd-pulse {
  0%, 100% { border-color: rgba(217, 169, 78, .30); }
  50% { border-color: var(--gold); }
}
.gsnd.pulse { animation: gsnd-pulse 2s ease-in-out infinite; }
/* 모션을 줄여 달라고 한 사람에게는 맥동을 끄고 **테두리를 굵게** 해서 같은 말을 한다.
   (알림을 없애는 것이 아니라 움직이지 않는 방식으로 바꾸는 것이다.)
   ⚠ 소리 자체는 이 설정과 무관하다 — 모션 설정이지 소리가 아니다(guide.js 참조). */
@media (prefers-reduced-motion: reduce) {
  .gsnd { transition: none; }
  .gsnd:hover { transform: none; }
  .gsnd.pulse { animation: none; border-width: 2px; border-color: var(--gold); }
}

/* ── ⑤ READER (라이트) ─────────────────────────────────────────────────── */

.rd {
  display: grid;
  /* 좌측 목차 칸. 320px 에서 312px 로 **압축**했다(본부장 지적: 「왼쪽 목차글들을
     좀 더 좌우를 압축해서」). 이 8px 은 그대로 본문 칸으로 넘어간다 —
     본문은 절대 좁아지지 않는다.
     ★ 312 는 임의의 값이 아니다. 아래 .rdtoc · .toc-a · .toc-no 의 좌우 여백을
       함께 줄인 상태에서 제목 칸(.toc-t)이 **239px** 로 서는 폭이고, 그 239px 이
       가장 긴 두 제목(「왜 그 시기에 그 상품이 쏟아졌는가…」·「운전자보험: 형사
       합의금…」)이 두 줄 안에 **잘리지 않고** 들어가는 하한선이다. 304px 로
       내리면 231px 이 되어 곧바로 뒤가 잘린다. 더 줄이지 마라.
     ★ 980px 이하는 목차가 드로어(고정 340px)라 아래 반응형 블록이 이 줄을 덮는다. */
  grid-template-columns: 312px minmax(0, 1fr);
  background: var(--paper);
  color: var(--read);
  min-height: 70vh;
}

/* 좌측 목차 */
.rdtoc {
  border-right: 1px solid var(--hairl);
  background: var(--jfp-paper-toc);
  /* 아래 여백은 **항목 한 개 높이 이상**이어야 한다. 40px 이면 두 줄짜리
     마지막 항목(약 66px)이 화면 바닥에 붙어 더 있는지 없는지 알 수 없다. */
  /* 좌우 여백을 18px → 10px 로 줄였다. **글자 크기는 건드리지 않는다** — 여백부터
     줄이라는 지시대로다. 이 8px x 2 는 고스란히 제목 칸(.toc-t)의 폭이 된다. */
  padding: 24px 10px 72px;
  scroll-padding-block-end: 72px;
  position: sticky;
  top: 117px;                     /* 머리 줄(57) + 알약 줄(60) 높이만큼 내려 붙인다 — 2026-09-25 새 껍데기(옛 머리 띠 118) */
  align-self: start;
  max-height: calc(100vh - 117px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rdtoc-hd {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--golda-on-light);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairl);
}
.rdtoc-x { display: none; }       /* 드로어일 때만 보이는 닫기 단추 */

/* 사원용 / 관리자용 전환 (관리자에게만 그려진다) */
.side { display: flex; gap: 6px; margin: 14px 0 4px; }
.side-b {
  flex: 1 1 0;
  padding: 9px 8px;
  border: 1px solid var(--hairl);
  border-radius: var(--jfp-r);
  background: transparent;
  color: var(--readdim);
  font-size: var(--jfp-fs-sm);
  transition: background-color .3s ease, color .3s ease;
}
.side-b[aria-pressed="true"] { background: var(--jfp-espresso); border-color: var(--jfp-espresso); color: var(--gold); }

.part { margin-top: 22px; }
.part-k {
  font-family: var(--serif);
  font-size: var(--jfp-fs-sm);
  text-transform: uppercase;
  letter-spacing: .20em;
  color: var(--golda-on-light);
}
.part-t { margin-top: 3px; font-size: var(--jfp-fs-body); font-weight: 400; color: var(--read); }
.part-l { margin-top: 10px; display: grid; gap: 1px; }
/* 한 줄 높이는 세 칸(번호 · 제목 · 체크)이 모두 같아야 한다.
   .toc-t 가 -webkit-box(line-clamp) 라서 baseline 정렬이 어긋난다 —
   flex-start 로 두고 세 칸의 line-height 를 1.55 로 못 박는다. */
.toc-a {
  display: flex;
  /* gap 10 → 8, 좌우 padding 10 → 6. 위아래(9px)는 그대로다 — 줄 간격이 좁아지면
     손가락으로 짚기 어려워진다. 좁힌 것은 **좌우뿐**이다. */
  gap: 8px;
  align-items: flex-start;
  padding: 9px 6px;
  border-left: 2px solid transparent;
  font-size: var(--jfp-fs-sm);
  line-height: 1.55;
  color: var(--jfp-text);
  transition: background-color .3s ease, color .3s ease;
}
/* 현재 줄 · 손 얹은 줄은 바탕이 눌려(#F0EADD 근처) --golda-on-light 가
   3.97:1 로 내려간다. 그 두 줄 **안에서만** 한 눈금 어두운 값을 쓴다.
   커스텀 속성은 상속되므로 .toc-no · .toc-ck 가 자동으로 따라온다. */
.toc-a:hover,
.toc-a[aria-current="true"] { --golda-on-light: var(--jfp-golda-on-tint); }
.toc-a:hover { background: rgba(160, 124, 51, .09); }
.toc-a[aria-current="true"] {
  background: rgba(160, 124, 51, .13);
  border-left-color: var(--golda-on-light);
  color: var(--read);
  font-weight: 500;
}
.toc-no {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: var(--jfp-fs-sm);
  line-height: inherit;
  letter-spacing: .10em;
  color: var(--golda-on-light);
  /* 2.2em → 2em. 두 자리 번호(「14」)와 자간 .10em 까지 재어 본 값이라 여전히
     한 줄에 들어간다. 번호 칸이 줄바꿈하면 즉시 눈에 띄니 더 줄이지는 마라. */
  min-width: 2em;
}
/* 한국어는 어절을 통째로 유지한다(`anywhere` 는 「보험 시」 처럼 낱말을 쪼갠다).
   긴 영문·URL 만 break-word 로 끊는다. 넘치면 두 줄에서 말줄임하고,
   잘린 전체 제목은 guide.js 가 title 속성으로 남긴다. */
.toc-t {
  flex: 1 1 auto;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: inherit;
  /* 한 줄짜리 제목도 두 줄 자리를 차지한다 — 줄마다 높이가 달라
     목차가 들쭉날쭉하던 것을 없앤다. 3.1em = 2줄 x line-height 1.55. */
  min-height: 3.1em;
}
.toc-ck { flex: 0 0 auto; color: var(--golda-on-light); font-size: var(--jfp-fs-sm); line-height: inherit; }

/* 본문 쪽.
   ★ 좌우 padding 은 반드시 --rd-gut 이다. 어두운 띠(.part-cover · .mn .hero)가
     이 값만큼 음수 마진으로 흘러 나가므로, 둘이 어긋나면 가로 스크롤이 생긴다. */
.rdmain { padding: 26px var(--rd-gut) 72px; min-width: 0; }

/* ── 읽는 단의 글자 위계를 **여기서만** 키운다 ───────────────────────────
   본문 폭(--rd-measure)이 화면을 따라 넓어지므로 글자도 같은 비율로 커야
   한 줄 글자 수가 유지된다. 공통 토큰을 이 단 안에서만 갈아 끼우면 안쪽
   교재 조각(book.css 의 `--fs:var(--jfp-fs-body)` · manual.css 의
   `.mn{font-size:var(--jfp-fs-body)}`)까지 한 번에 따라온다 —
   두 파일을 건드리지 않아도 된다.
   ★ 좌측 목차(.rdtoc)에는 걸지 않는다. 320px 칸에서 글자만 키우면
     제목이 두 줄 말줄임에 더 많이 걸린다.
   ★ 바닥은 그대로 15px 이다 — --rd-fs 의 하한 16.5px 에서 sm 이 정확히 15px.
     (16.5 / 15 / 17 / 21.5 = :root 의 원래 네 값과 같다.) */
.rdmain {
  --jfp-fs-body: var(--rd-fs);
  --jfp-fs-sm:   calc(var(--rd-fs) - 1.5px);
  --jfp-fs-h3:   calc(var(--rd-fs) + 0.5px);
  --jfp-fs-h2:   calc(var(--rd-fs) + 5px);
}
/* ── 왼쪽 기준선은 **하나**다 ─────────────────────────────────────────────
   예전에는 `align-items:center` 로 「목차」 단추와 머리말을 한 줄에 나란히
   놓았다. ≤980px 에서 단추가 보이면 머리말이 단추 너비 + gap 만큼 오른쪽으로
   밀려(390px 에서 x=89.6px), 바로 아래 본문(x=16px)과 왼쪽 끝이 어긋났다.
   단추를 자기 줄에 세우고 머리말을 그 아래 한 줄 통째로 두면, 단추가 있든
   없든 머리말 · 본문 · 이동 줄의 x 가 --rd-gut 하나로 같아진다. */
.rdtop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairl);
}
.tocbtn { order: 1; }
.rdtop-tx { order: 2; flex: 1 1 100%; min-width: 0; }
.rd-part { font-size: var(--jfp-fs-sm); color: var(--readdim); word-break: keep-all; overflow-wrap: break-word; }
.rd-ch {
  margin-top: 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--jfp-fs-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--golda-on-light);
}
.tocbtn {
  display: none;                  /* ≤980px 에서만 보인다 */
  padding: 10px 16px;
  border: 1px solid var(--hairl);
  border-radius: var(--jfp-r);
  background: var(--jfp-white);
  color: var(--read);
  font-size: var(--jfp-fs-sm);
}

/* 본문 컨테이너.
   ★ 이 요소는 `.gb` / `.mn` 을 함께 달고 있다. 여기서는 **컨테이너 자신**의
     폭 · 글자 크기 · 줄간만 정한다. 안쪽 규칙은 book.css / manual.css 것이다. */
.rdbody {
  font-size: var(--jfp-fs-body);
  line-height: 1.85;
  color: var(--read);
  word-break: keep-all; overflow-wrap: break-word;
}
/* 그림도 왼쪽 기준선에 붙인다 — 단이 넓어진 뒤 `auto` 로 가운데 두면
   글 · 표와 왼쪽 끝이 어긋나 「가운데 뜬」 그림이 된다. */
.rdbody img { margin: 18px 0; }

/* ── ①-a 하나의 측정선 ────────────────────────────────────────────────────
   `.rdbody` 는 `.gb` / `.mn` 을 함께 달고 있고, 뒤에 오는 book.css 의
   `.gb{margin:0}` 이 같은 특이도(0,1,0)로 `.rdbody{margin:0 auto}` 를 덮어
   본문만 왼쪽에 붙어 있었다. 자식 선택자로 특이도를 (0,2,0) 으로 올려
   머리 띠 · 본문 · 이동 줄 셋이 같은 폭 · 같은 왼쪽 끝선을 갖게 한다.
   !important 는 쓰지 않는다. */
.rdmain > .rdtop,
.rdmain > .rdbody,
.rdmain > .rdnav,
.rdmain > .msg {          /* 「불러오는 중입니다」 줄도 같은 자리에서 시작한다 */
  max-width: none;
  margin-inline: 0;
}

/* ── ①-a-2 폭을 거는 자리를 **컨테이너에서 글로** 옮겼다 (2026-09-07) ─────
   예전에는 위 넷이 통째로 --rd-measure(1040px)에 갇혔다. 그래서 1920 화면에서
   오른쪽 약 560px 이 그냥 비었고 표도 상자도 본문과 같은 폭에서 멈췄다.
   이제 넷은 단 전체를 쓰고, 폭을 제한하는 것은 **글**뿐이다. 표 · 상자 · 그림은
   아무것도 안 해도 저절로 오른쪽 끝까지 간다.

   --rd-text 를 한 단계 두는 이유: 상자·표 **안**에서는 이 상한을 풀어야 하는데,
   커스텀 속성은 상속되므로 컨테이너에 한 번만 none 을 얹으면 그 안의 문단 ·
   목록 · 인용이 전부 따라 풀린다. 새 상자가 생기면 아래 목록에 이름만 더하면
   된다 — 선택자를 다시 짜지 않는다.
   ★ 제목(h2~h4)에는 상한을 걸지 않는다. 절 제목의 윗줄(`.gb h3.sec` 의
     border-top)과 `.ts` 시각 표시가 오른쪽 끝까지 가야 지면이 비어 보이지 않는다. */
.rdbody { --rd-text: var(--rd-measure); }
.rdbody p,
.rdbody li,
.rdbody dt,
.rdbody dd,
.rdbody blockquote { max-width: var(--rd-text); }

/* 넓을수록 좋은 것들 — 여기서 상한이 풀린다(자기 자신과 그 안의 글 모두).
   .gb(가이드북) · .mn(실무 매뉴얼) 양쪽 이름을 한 자리에 모아 둔다. */
.rdbody table,
.rdbody .tbl-wrap,
.rdbody figure,
.rdbody pre,
.rdbody .box,
.rdbody .objectives,
.rdbody .script,
.rdbody .activity,
.rdbody .checklist,
.rdbody .quiz,
.rdbody .recap,
.rdbody .writein,
.rdbody .part-cover,
.rdbody .hero,
.rdbody .chips,
.rdbody .principle,
.rdbody .ban,
.rdbody .cklist,
.rdbody .fail,
.rdbody details.rp,
.rdbody .navfoot { --rd-text: none; }

/* ── ①-b 안쪽 오프셋 제거 ────────────────────────────────────────────────
   교재 조각은 통짜 인쇄본으로도 쓰이므로 자기 안에서 다시 가운데 정렬 +
   좌우 padding 을 건다. 리더 안에서는 그 두 번째 · 세 번째 기준선을 지운다.
   (`.rdbody.gb …` = 0,3,0 > `.gb …` = 0,2,0. 세로 padding 은 그대로 둔다.) */
.rdbody.gb .chapter,
.rdbody.gb .part-close {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.rdbody.gb .part-cover > * { max-width: none; }
.rdbody.mn article.chapter .body {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.rdbody.mn article.chapter .hero .in { max-width: none; margin-inline: 0; }

/* 자기 배경을 가진 어두운 띠만 좌우로 흘려 보낸다 — 글자는 기준선에 남고
   배경만 --rd-gut 만큼 번져 나간다. 그 값이 .rdmain 의 좌우 padding 과
   정확히 같으므로 가로 넘침이 생기지 않는다(390px 에서 확인). */
.rdbody.gb .part-cover,
.rdbody.mn article.chapter .hero,
.rdbody.mn .chips {
  margin-inline: calc(var(--rd-gut) * -1);
  padding-inline: var(--rd-gut);
}

/* 검색어 하이라이트 */
mark.hit { background: rgba(217, 169, 78, .38); color: inherit; padding: 0 2px; }

/* 아래 이동 줄 */
.rdnav {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--hairl);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rdnav-sp { flex: 1 1 auto; }
.nbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--hairl);
  border-radius: var(--jfp-r);
  background: var(--jfp-white);
  color: var(--read);
  font-size: var(--jfp-fs-sm);
  transition: border-color .3s ease, background-color .3s ease;
}
.nbtn:hover { border-color: var(--jfp-gold-deep); background: var(--jfp-paper); }
.nbtn b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donebtn {
  padding: 12px 20px;
  border: 1px solid var(--jfp-gold-deep);
  border-radius: var(--jfp-r);
  background: linear-gradient(135deg, var(--jfp-gold-soft) 0%, var(--golda) 100%);
  color: var(--jfp-ink-2);
  font-size: var(--jfp-fs-sm);
  letter-spacing: .04em;
}
.donebtn.on {
  background: transparent;
  color: var(--golda-on-light);
}

/* 드로어 스크림 */
.scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(5, 3, 2, .55);
}
.rd.open .scrim { display: block; }

/* ── ⑥ SEARCH ──────────────────────────────────────────────────────────── */

.sch { padding: clamp(34px, 6vw, 64px) 0 80px; }
.sch-hd { margin-bottom: 22px; }
.sch-in {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--hair2);
  border-radius: var(--jfp-r);
  background: rgba(0, 0, 36, .40);
  color: var(--ivory);
  font-size: var(--jfp-fs-body);
  letter-spacing: .02em;
}
.sch-cnt { margin-top: 16px; font-size: var(--jfp-fs-sm); color: var(--dim); }
.sch-l { margin-top: 18px; display: grid; gap: 12px; }
.sch-r {
  display: block;
  padding: 20px;
  border: 1px solid var(--hair);
  background: var(--card);
  transition: border-color .4s ease;
}
.sch-r:hover { border-color: var(--hair2); }
.sch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sch-bk {
  padding: 3px 9px;
  border: 1px solid var(--hair2);
  font-size: var(--jfp-fs-sm);
  color: var(--golda);
  letter-spacing: .06em;
}
.sch-pt { font-size: var(--jfp-fs-sm); color: var(--dim); word-break: keep-all; overflow-wrap: break-word; }
.sch-t { margin-top: 10px; font-size: var(--jfp-fs-h3); color: var(--ivory); word-break: keep-all; overflow-wrap: break-word; }
.sch-sn { margin-top: 8px; font-size: var(--jfp-fs-sm); color: rgba(240, 231, 214, .70); word-break: keep-all; overflow-wrap: break-word; }
.sch-sn mark { background: rgba(217, 169, 78, .30); color: var(--ivory); padding: 0 2px; }

/* ── ⑦ 반응형 ──────────────────────────────────────────────────────────── */

/* 태블릿 — 목차가 드로어로 접힌다 */
@media (max-width: 980px) {
  .rd { grid-template-columns: minmax(0, 1fr); }
  .tocbtn { display: inline-block; }
  .rdtoc {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 80;
    width: min(340px, 88vw);
    max-height: none;
    border-right: 1px solid var(--hairl);
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    transform: translateX(-101%);
    transition: transform .35s ease;
  }
  .rd.open .rdtoc { transform: none; }
  .rdtoc-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .rdtoc-x {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--hairl);
    border-radius: var(--jfp-r);
    background: var(--jfp-white);
    color: var(--read);
    font-family: var(--sans);
    font-size: var(--jfp-fs-sm);
    letter-spacing: 0;
    text-transform: none;
  }
}

/* 폰 */
@media (max-width: 720px) {
  /* 리더의 좌우 여백도 같이 줄인다 — .rdmain 의 padding 과 어두운 띠의
     음수 마진이 이 토큰 하나를 함께 읽는다. */
  :root { --rd-gut: 16px; }
  .wrap { padding: 0 16px; }
  /* 2026-09-25: 옛 머리 띠(.bandtop · .who-id · .deskbtn)의 폰 규칙은 새 머리 줄(shell.ts)이 맡는다.
     ★ 머리가 두 줄 이상이라 붙박이면 화면을 먹는다 — 폰에서는 붙이지 않는다(옛 규칙 그대로). */
  .gtop { position: static; }
  .rdtoc { top: 0; }
  .rdmain { padding: 20px var(--rd-gut) 64px; }
  /* 폰에서는 「목차」 단추가 머리말 텍스트를 오른쪽으로 밀어, 데스크톱에서 맞춰 둔
     왼쪽 기준선이 다시 둘로 갈린다. 단추를 제 줄에 놓고 텍스트를 다음 줄 맨 앞에
     내려서, 폰에서도 머리말·본문·아래 이동 줄이 --rd-gut 한 선에서 시작하게 한다. */
  .rdtop-tx { flex: 1 1 100%; }
  .sec { padding: 44px 0; }
  .stat { padding: 26px 16px; }
  /* 폰에서는 히어로 문구가 길어 세 줄 넘게 흐른다. 최소 높이를 조금 낮춰
     글자가 화면 한가운데 몰리지 않게 한다(넘치면 min-height 는 그냥 밀린다). */
  .home .hero { min-height: 68vh; min-height: min(68svh, 620px); }
  /* 폰에서는 글자가 폭을 다 쓰니 글자 뒤 잉크 타원(.wrap::before)을 가운데로
     넓힌다. 알파는 PC 와 같다 — 대비 표는 .hero-scrim 주석. */
  .home .hero .wrap::before {
    background: radial-gradient(ellipse 70% 62% at 50% 50%,
        rgba(5, 3, 2, .54) 0%,
        rgba(5, 3, 2, .54) 62%,
        rgba(5, 3, 2, 0) 100%);
  }
  /* ★ 매뉴얼 표에는 감싸개가 없다 ─────────────────────────────────────────
     가이드북 표는 `.gb .tbl-wrap{overflow-x:auto}` 안에 들어 있어 폰에서
     자기 스트립으로 밀린다. 매뉴얼 표(`.mn table`)는 맨몸이라 열 폭이 정해진
     표(`<th style="width:140px">` · `td.label{width:104px}`)가 375px 화면에서
     370~492px 을 요구하고, 그만큼 **문서 전체**가 가로로 밀렸다.
     감싸개를 만들려면 guide.js 를 고쳐야 하므로, 표 자신을 스크롤 상자로
     바꾼다 — `display:block` 이면 안쪽 행들이 익명 표를 이루어 원래 폭을
     유지하고, 바깥 상자만 화면 폭에 맞아 거기서 가로로 굴러간다.
     (몸통은 안 밀린다 = 머리말 「가로 스크롤을 막는 방식」 그대로다.) */
  .rdbody.mn table { display: block; overflow-x: auto; width: 100%; }
  .lib-i { align-items: flex-start; }
  .lib-b { width: 100%; text-align: center; }
  .jstep { padding-left: 24px; }
}

/* ── ⑧ 인쇄 ────────────────────────────────────────────────────────────── */

@media print {
  .gtop, .gate, .foot, .rdtoc, .rdnav, .tocbtn, .scrim, .hero-btns,
  .hero-bg, .hero-scrim, .home .hero .wrap::before { display: none !important; }
  body { background: #fff; color: #000; }
  /* 인쇄에는 지면 여백이 따로 있다. 측정선 · 좌우 여백을 함께 풀지 않으면
     본문이 820px 에 갇히고 어두운 띠의 음수 마진이 종이 밖으로 나간다. */
  /* 종이에는 vw 가 없다 — 창 폭을 따라가는 --rd-fs 가 의미를 잃는다.
     화면에서 쓰던 클램프의 **하한**으로 되돌려 인쇄 위계를 예전 그대로 둔다
     (body 16.5 · sm 15 · h3 17 · h2 21.5 = :root 의 원래 값).
     본문 폭도 지면 폭에 맡긴다 — A4 여백은 book.css 의 @page 가 잡는다. */
  .rd { display: block; background: #fff; color: #000; --rd-gut: 0px;
        --rd-fs: 16.5px; --rd-measure: 100%; }
  .rdmain { padding: 0; }
  .rdmain > .rdtop,
  .rdmain > .rdbody,
  .rdmain > .rdnav,
  .rdmain > .msg { max-width: none; margin-inline: 0; }
  .rdbody { max-width: none; color: #000; font-size: 12pt; line-height: 1.65; }
  /* 화면에서 어두운 띠를 좌우로 흘리던 규칙(①-b)은 인쇄에서 되돌린다.
     안 되돌리면 book.css 의 `@media print{.gb .part-cover{padding:56mm 10mm}}`
     좌우 10mm 가 특이도에 밀려 0 이 된다. */
  .rdbody.gb .part-cover { margin-inline: 0; padding-inline: 10mm; }
  .rdbody.mn article.chapter .hero { margin-inline: 0; padding-inline: 24px; }
  .rdbody.mn .chips { margin-inline: 0; padding-inline: 16px; }
  .rdtop { border-color: #999; }
  .rd-part, .rd-ch { color: #333; }
  mark.hit { background: none; }
  a { color: #000; text-decoration: none; }
  .rv { opacity: 1 !important; transform: none !important; }
}


/* ── 넓은 것은 읽는 폭을 넘어간다 ─────────────────────────────────────────
   본부장 지적: 「표나 칸 같은 것은 늘릴 수 있으면 자연스럽게 늘리고 아니면
   왼쪽 끝으로 정렬」. 읽는 줄은 눈이 따라가야 하니 폭을 제한하지만, 표와 그림은
   넓을수록 읽기 쉽다. 그래서 그것들만 오른쪽으로 더 나가게 둔다.

   ── 2026-09-07 이 규칙은 **한 번도 듣지 않았다** ─────────────────────────
   ① 이름이 틀렸다. 교재의 표 감싸개는 `.tbl-wrap`(하이픈)인데 `.tblwrap` 을
      찾고 있었다. 그런 요소는 문서에 하나도 없다.
   ② 이름이 맞았어도 소용없었다. `width: min(100%, …)` 의 `100%` 는 부모
      (`.rdbody`)의 폭이고 그 부모가 --rd-measure 에 갇혀 있었다 —
      min(1040, 1462) = 1040. 즉 표는 늘 본문과 **같은 폭**이었다.
   그래서 「본문 폭을 푸는」 쪽으로 뒤집었다(위 ①-a-2). 이제 부모가 단 전체라
   width:100% 만으로 표가 오른쪽 끝(--rd-gut 24px 앞)까지 간다. 여기서는 그
   100% 를 확실히 잡아 주기만 한다 — book.css 의 `table.tbl{width:100%}` 는
   감싸개 안에서만 도는 값이라, 감싸개가 없는 매뉴얼 표(`.mn table`)는
   내버려 두면 자기 내용만큼만 늘어난다. */
.rdbody .tbl-wrap,
.rdbody figure,
.rdbody pre { width: 100%; max-width: none; }
.rdbody table { display: table; width: 100%; max-width: none; }

/* ── 한글은 낱말 가운데서 끊지 않는다 — 읽는 영역의 **기본값** ────────────
   본부장 지적: 「한글 단어 짤리는 일 매번처럼 있으면 안 돼.」 매번 나왔다.
   그때마다 문제가 된 요소 **하나**에만 규칙을 붙였기 때문이다(목차 · 히어로
   본문 · 카드 …). 새로 만든 요소는 또 기본값으로 돌아갔다. 그래서 이번에는
   **읽는 영역 루트와 그 자손 전부**에 못 박는다. 여기 안에서 새 요소를
   만들어도 자동으로 지켜진다.

   ★ overflow-wrap 의 `anywhere` 값은 절대 쓰지 마라 — 그것은 한글을 음절
     단위로 쪼갠다(「보험 / 시」). `break-word` 는 **다른 데서 끊을 수 없을 때만**
     끊으므로 긴 영문 · URL 만 잡히고 한글 어절은 통째로 남는다.
     (`tests/unit_guidecss.mjs` [3] 이 이 파일에서 그 값을 찾으면 즉시 깬다.
      그래서 이 주석도 두 낱말을 붙여 쓰지 않는다.)
   ★ 자리: 파일 뒤쪽이라 특이도가 같은(0,1,0) 앞선 개별 규칙을 이긴다.
     읽는 영역 안에서는 이 값이 최종이다. */
.rd,
.rd::before,
.rd::after,
.rd *,
.rd *::before,
.rd *::after {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 머리글은 **어느 화면에서나 같은 자리**에 선다 ───────────────────────
   ⚠ 여기에는 예전에 `:root[data-view="read"] .bandin` 규칙이 있었다. 읽기 화면
   에서만 머리 띠를 `320px + --rd-gut`(=344px) 만큼 들여써서, 마크와 탭 줄을 본문
   칸의 첫 글자에 맞추던 규칙이다.

   그것을 **지웠다.** 이유는 본부장 지적 그대로다 —
     「가이드나 실무매뉴얼 들어갔을 때는 마크랑 탭들이 오른쪽으로 밀리네.
      왼쪽 목차글들을 좀 더 좌우를 압축해서 홈이나 30일여정 쪽으로 맞춰」
   들여쓰기 값이 **고정 344px** 이라 창이 좁을수록 어긋남이 커졌다(1024px 에서
   홈은 30.7px, 읽기 화면은 344px — 313px 차이). 탭을 옮길 때마다 로고가 좌우로
   튀는 것이 그래서였다.

   지금은 `.bandin` 하나만 쓴다(위 ④ 참조: --jfp-frame + --jfp-frame-pad).
   여섯 탭(HOME·JOURNEY·GUIDEBOOK·MANUAL·LIBRARY·SEARCH)이 한 폭 안에서 로고
   왼쪽 끝도, 첫 탭 글자 왼쪽 끝도 **같은 x** 에 선다.

   ★ 대신 읽기 화면의 왼쪽 목차를 좌우로 압축했다(.rd / .rdtoc / .toc-a / .toc-no).
     목차 칸 320px → 312px, 목차 좌우 여백 18px → 10px, 항목 여백 10px → 6px.
     그 결과 제목 칸은 218px → 239px 로 **넓어져서**, 예전부터 뒤가 잘리던 긴
     제목 두 개까지 두 줄 안에 온전히 들어간다.
   ★ 이 규칙을 되살리지 마라. 되살리면 머리글이 다시 탭마다 움직인다.
     `tests/unit_guide.mjs` 가 이 파일에서 그 형태를 찾으면 즉시 깬다. */

/* ── 자료실 카드가 눌리는 것으로 보이게 ─────────────────────────────────
   본부장 지적: 「현장 화법 모음 등에서 뭘 클릭해야 내용이 보이는지 모르겠다」.
   전체가 링크인데 그렇게 안 보였다 — 테두리가 옅고 「READ」가 장식처럼 읽혔다.
   카드 전체를 누를 수 있다는 것을 테두리·커서·화살표·움직임으로 말한다. */
.res { cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.res:hover, .res:focus-visible {
  border-color: var(--jfp-golda-on-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(35, 25, 22, .10);
}

/* ── 머리 줄 여백의 분기 (2026-09-25) ── /app · /notice · /claim · /bojang 의 --gut 과 같은 값 · 같은 폭이다.
   문서를 옮겨 다녀도 로고 · 탭 · 이름표가 같은 자리에 선다(위 :root 의 --gut 주석). */
@media (max-width: 1180px) { :root { --gut: 28px; } }
@media (max-width: 980px) { :root { --gut: 20px; } }