/* 성경 본문 읽기 화면 (2026-09-04)
 *
 * ⭐ 성경책 테마에서는 **기존 책 골격을 그대로 쓴다.** 종이는 .container::before 가
 *    이미 그리므로 여기서 카드 배경을 또 깔지 않는다. 처음에 그렇게 만들었다가
 *    "성경책을 다 만들어 놓고 왜 또 다른 걸 쓰냐"는 지적을 받고 다시 썼다.
 *
 * ⭐ 지면 동작이 테마마다 다르다(의도한 것이다):
 *      성경책 — 본문이 왼쪽 면에서 오른쪽 면으로 이어지고(CSS 다단) 넘김이 '면 단위'
 *      기본   — 익숙한 세로 스크롤. 넘김은 '장 단위'
 *    §22: 새 방식을 넣으면서 잘 되던 것(세로 스크롤)을 없애지 않는다.
 *
 * ⚠️ 색은 여기서 한 벌로 정의하고 테마별로 값만 덮는다(§6). 기본값을 반드시 두어
 *    어떤 조건에서도 색이 비지 않게 한다.
 */

.read-book {
  /* 기본(classic 밝은 화면)
     ⚠️ 글자로 쓰이는 색은 전부 흰 바탕에서 **4.5:1 이상**이어야 한다(tests/test_web.py 가 계산해 지킨다).
        #667eea 위 흰 글자는 3.66:1, 절 번호 #9ca3af 는 2.54:1 이라 검수에서 잡혔다(2026-09-05 #8). */
  --rp-ink: #1f2937;
  --rp-ink-soft: #5b6270;        /* 6.1:1 — 도크 라벨(base.html)과 같은 회색 */
  --rp-accent: #5566d6;          /* 흰 글자 4.9:1 */
  --rp-accent-2: #764ba2;        /* 그라데이션 끝 — 달력 .nav-btn 과 같은 보라(흰 글자 6.4:1) */
  --rp-rule: rgba(31, 41, 55, 0.10);
  --rp-rule-strong: rgba(31, 41, 55, 0.22);
  --rp-chip: #f3f4f6;
  --rp-chip-on: #5566d6;         /* 흰 글자 4.9:1 */
  --rp-chip-on-ink: #ffffff;
  --rp-shadow: 0 10px 30px rgba(31, 41, 55, 0.12);
  --rp-serif: inherit;
  --rp-num: #6b7280;             /* 4.8:1 */
  --rp-sheet-bg: transparent;
  --rp-highlight-rgb: 255, 235, 59; /* 대표 형광 노랑(Material Yellow 500) */
  /* 장 제목은 버튼이다 — 제목 위계는 유지하고 기본 테마 버튼보다 훨씬 옅게만 구분한다. */
  --read-ref-bg: rgba(102, 126, 234, 0.08);
  --read-ref-border: rgba(85, 102, 214, 0.24);
  --read-ref-hover: rgba(102, 126, 234, 0.15);

  color: var(--rp-ink);
  position: relative;
  /* 책 폭·여백은 달력 .container 와 같은 값 — calendar.css 가 이 화면에 없어 1180 vs 1160 으로 달랐다
     (2026-09-06 검수 #11, 두 화면을 오갈 때 판이 뛴다). book.css 가 그 위에 같은 방식으로 덮는다. */
  max-width: 1200px;
  margin: 10px auto;
  width: calc(100% - 20px);
  min-width: 320px;
  box-sizing: border-box;
}

html[data-theme="classic"][data-sys="dark"] .read-book {
  --rp-ink: #e5e7eb;
  --rp-ink-soft: #9ca3af;
  --rp-accent: #8b9cf7;
  --rp-accent-2: #8b9cf7;
  --read-ref-bg: rgba(139, 156, 247, 0.12);
  --read-ref-border: rgba(139, 156, 247, 0.30);
  --read-ref-hover: rgba(139, 156, 247, 0.20);
  --rp-rule: rgba(229, 231, 235, 0.12);
  --rp-rule-strong: rgba(229, 231, 235, 0.26);
  --rp-chip: #1f2937;
  --rp-chip-on: #8b9cf7;
  --rp-chip-on-ink: #111827;
  --rp-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --rp-num: #9ca3af;             /* #111827 바탕 7.0:1 (#6b7280 은 3.4:1 이었다) */
}

/* 성경책 — 가죽·종이 팔레트를 그대로 쓴다. 배경은 깔지 않는다(종이는 이미 있다). */
html[data-theme="book"] .read-book {
  --rp-ink: var(--ink, #2e2620);
  --rp-ink-soft: var(--ink-soft, #6b573c);
  --rp-accent: var(--gilt, #b08a3c);
  --rp-rule: var(--rule, rgba(120, 90, 45, 0.16));
  --rp-rule-strong: var(--rule-strong, rgba(120, 90, 45, 0.34));
  --rp-chip: rgba(120, 90, 45, 0.10);
  /* 선택 탭은 도크 토글(.seg-opt.on)과 **같은 토큰**(--control-on-bg/--control-on-fg, book.css 662줄)을 참조한다 —
     값을 따로 적으면 두 벌이 된다(§6). 성경책에서는 둘 다 가죽/종이색. */
  --rp-chip-on: var(--control-on-bg, var(--leather, #4a2f1e));
  --rp-chip-on-ink: var(--control-on-fg, var(--paper, #f3e9d6));
  --rp-shadow: 0 10px 30px rgba(51, 32, 15, 0.28);
  --rp-serif: var(--serif, "EB Garamond", "Nanum Myeongjo", serif);
  /* 절 번호는 실물처럼 작아도 **잉크**다. 금박(--mark, 반투명)은 종이 위 1.57:1 이라 안 읽혔다
     (2026-09-05 PC 검수 #3). 잉크색(--ink-soft)은 종이 위 5.7:1. */
  --rp-num: var(--ink-soft, #6b573c);
  /* 권 버튼 — 테두리 없이 종이보다 살짝 어두운 갈색 바탕(2026-10-01 사용자 결정).
     역본 알약은 같은 모양에 권 버튼과 종이의 **중간** 농도(--read-ver-bg = 권 버튼의 절반). */
  --read-ref-bg: rgba(120, 90, 45, 0.16);
  --read-ref-border: transparent;
  --read-ref-hover: rgba(120, 90, 45, 0.24);
  --read-ver-bg: rgba(120, 90, 45, 0.08);
  --read-ver-hover: rgba(120, 90, 45, 0.14);
}

/* 기본 테마에서는 본문이 놓일 흰 면이 필요하다(성경책은 종이가 이미 있다). */
html:not([data-theme="book"]) .read-book .read-sheet {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--rp-shadow);
  padding: 6px 18px;
}

html[data-theme="classic"][data-sys="dark"] .read-book .read-sheet {
  background: #111827;
}

/* ── 기본(classic) 테마의 골격 ─────────────────────────────
   ⚠️ calendar.css 는 달력 화면(bundle-index.css)에만 실린다 — 이 화면에는 **없다.**
      그래서 기본 테마에서 body 글꼴·.nav-btn·.header 가 브라우저 기본값(Times New Roman·
      파란 밑줄 링크·세로로 쌓인 머리말)으로 떨어졌다(2026-09-05 검수 #10).
      성경책 테마는 book.css 가 같은 클래스를 칠하므로 여기서는 기본 테마만 잡는다.
   값은 calendar.css 의 body 글꼴 스택·.nav-btn 모양(둥글기·굵기·그림자)과 같다 —
   두 벌이 어긋나면 tests/test_web.py 가 잡는다. 색만 이 화면의 토큰을 쓴다(대비 4.5:1). */
html:not([data-theme="book"]) body {
  font-family: 'Segoe UI', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

html:not([data-theme="book"]) .read-book .nav-btn {
  background: linear-gradient(135deg, var(--rp-chip-on) 0%, var(--rp-accent-2) 100%);
  color: var(--rp-chip-on-ink);
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  box-shadow:
    0 6px 20px rgba(103, 126, 234, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html:not([data-theme="book"]) .read-book .read-ref {
  font-size: 22px;
  font-weight: 700;
  color: var(--rp-ink);
}

html:not([data-theme="book"]) .read-header .month-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* ⚠️ hidden 속성이 아래 규칙들의 display:flex 에 밀린다(브라우저 기본
   [hidden]{display:none} 은 우선순위가 가장 낮다). 닫아 둔 패널이 열린 채로
   화면을 덮는 결함이 실제로 났다(2026-09-04). 여기서 되돌려 놓는다. */
.read-book [hidden],
.read-picker[hidden],
.read-record[hidden],
.read-toast[hidden] {
  display: none !important;
}

/* ⚠️⚠️ book.css 의 `html[data-theme="book"] .container > * { position: relative }` 가
   이 화면의 **떠 있어야 하는 것 전부**를 문서 흐름으로 끌어내린다. 특이도가 같은데
   그쪽이 나중에 실리기 때문이다(read.css 는 bundle-themes.css 앞에 온다).
   기록 버튼이 지면 위에 얹혀 본문을 가리는 결함이 실제로 났다(2026-09-04).
   ⭐ `.container` 의 직계 자식이면서 fixed 여야 하는 것은 **여기 빠짐없이** 적는다.
      하나만 빠뜨려도 그것만 조용히 흐름으로 돌아간다. */
.read-book > .read-record,
.read-book > .read-picker,
.read-book > .read-toast,
.read-book > .mobile-month-nav,
.read-book > .tutorial-overlay {
  position: fixed !important;
}

/* 같은 이유로 z-index 도 여기서 정한다(book.css 가 z-index:1 로 덮는다).
   고르기 패널은 화면을 덮는 대화상자라 커피(9990)·도크(9990)·이메일 배너(9995)보다 위,
   튜토리얼 막(10000)보다는 아래. 예전 60 이라 커피·도크가 책 이름 칸을 덮었다(검수 #5). */
.read-book > .read-record { z-index: 998 !important; }
.read-book > .read-picker { z-index: 9996 !important; }
.read-book > .read-toast  { z-index: 9997 !important; }
.read-book > .mobile-month-nav { z-index: 9985 !important; }   /* 달력 폰 막대와 같은 층(도크 아래) */
.read-book > .tutorial-overlay { z-index: 10000 !important; }   /* 튜토리얼 막 — tutorial.css 와 같은 값. 빠지면 book.css 의 relative·z-index:1 로 떨어져 막이 높이 0 짜리 상자가 되고, 도크·후원·월 이동 줄(9985~9990)이 막 위로 올라온다(2026-09-21) */

/* base.html·book.css 가 body 바닥을 74~146px 비워 둔다(떠 있는 버튼·달력의 월 이동 줄 자리).
   이 화면은 read.js 의 layout() 이 떠 있는 버튼 높이를 지면에서 빼므로 그 여백이 겹으로 들어가
   문서가 화면을 넘쳤다(1280×800 에서 4px, 폰에서 60px — 2026-09-05 PC 검수 #18). 여기서는 0. */
/* ⚠️ book.css 의 `html[data-theme="book"] body { … !important }`(0,1,2)와 같은 명시도라
   뒤에 실리는 그쪽이 이겼다(가로 폰 로그인에서 80px 이 남아 39px 넘침). 속성 선택자를 하나 더 얹는다. */
html[data-theme] body:has(.read-book),
html body:has(.read-book) { padding-bottom: 0 !important; }

/* 책 폭·자리를 달력과 같게 — calendar.css 의 body 는 flex(가운데·위 정렬)라 .container 폭이 거기서 결정된다
   (1280: 달력 1160 / 읽기 1180 으로 달랐다, 2026-09-06 검수 #11). 같은 flex 로 둔다.
   ⚠️ 이 화면은 이메일 배너가 문서 흐름에 있어(read.html nudge_pos) 한 줄에 나란히 서지 않게 wrap. */
body:has(.read-book) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
body:has(.read-book) > #email-nudge { flex: 1 1 100%; }

/* ── 머리말 ──────────────────────────────────────────────
   .header·.nav-btn·.today-link·.month-title 는 달력과 같은 클래스다. 테마가 이미 칠해 준다.
   구성도 달력 PC 머리글과 같다(2026-09-06 검수 #1·#5): [◀ 이전 면][제목+달력으로+금박선][다음 면 ▶],
   둘째 줄 왼쪽에 역본 러닝헤드. 지면 아래 조작 줄은 없다 — 실물 면 아래엔 폴리오뿐. */
.read-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 8px 0 10px;
}
.read-header > .read-turn[data-step="-1"] { grid-column: 1; grid-row: 1; justify-self: start; }
.read-header > .month-title-container     { grid-column: 2; grid-row: 1; }
.read-header > .read-turn[data-step="1"]  { grid-column: 3; grid-row: 1; justify-self: end; }
/* 역본 줄의 격자 자리는 아래 역본 절(.read-versions 규칙 뒤)에 있다 */

/* calendar.css 가 없는 이 화면에서는 <a> 기본 밑줄이 남는다 — 어느 테마든 버튼에 밑줄은 없다 */
.read-book .nav-btn,
.read-book .today-link { text-decoration: none; }

/* 성경책 — 릴리즈 노트용 `.container:not(:has(> .page)) .header { display:block; 3px double }`(book.css) 가
   이 화면에도 걸려 '달력으로' 가 제목 위에 얹히고 쌍선이 책등을 가로질렀다. 달력 .header 는 border none. */
/* .bc-peel-stage--read = 넘김 무대(body 직속 복제본) — 같은 규칙을 받아야 여백·정렬이 안 흔들린다(핸드북 4-12) */
html[data-theme="book"] :is(.container.read-book, .bc-peel-stage--read) .header.read-header {
  display: grid !important;
  text-align: center;
  border-bottom: 0 !important;
}
/* 제목 묶음 — 달력 펼침면(book.css §13)처럼 세로: 제목 · '달력으로'(.today-link, 달력의 '이번달로' 자리) · 금박선 */
html[data-theme="book"] .read-header > .month-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.4vh, 6px);
}

/* '◀ 이전 면'·'다음 면 ▶'·'달력으로' — 달력의 .nav-btn/.today-link 와 같은 규칙.
   색·테두리·둥글기·글꼴·크기는 book.css 가 이미 덮는다. calendar.css 가 이 화면에 없어
   **빠지던 선언**(display·굵기·글자 그림자·전환)만 calendar.css 의 값 그대로 둔다 —
   tests/test_web.py 가 두 벌을 대조한다. .nav-icon 은 book.css(0.8em·--gilt)가 칠하고 굵기는 물려받는다. */
html[data-theme="book"] .read-book .nav-btn {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}
html[data-theme="book"] .read-book .today-link {
  display: inline-block;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s ease;
}
/* <button> 인 이동 버튼 — base.html 이 모든 button 에 거는 hover 떠오름·그림자를 달력 <a> 와 같게 되돌린다 */
html[data-theme="book"] .read-book button.nav-btn:hover,
html[data-theme="book"] .read-book button.nav-btn:active,
html[data-theme="book"] .read-book button.today-link:hover,
html[data-theme="book"] .read-book button.today-link:active { transform: none; filter: none; }
.read-turn:disabled { opacity: 0.3; cursor: default; }

/* 장 제목 — 명조 제목의 위계는 유지하되 **버튼임을 알 만큼만** 배경과 구분한다.
   작은 ▾만으로는 hover가 없는 폰에서 장 선택 버튼인 줄 모른다는 테스터 피드백(2026-09-23).
   ⚠️ base.html 이 모든 <button> 에 거는 두꺼운 그림자·떠오름은 여전히 끈다. */
.read-ref {
  border: 1px solid var(--read-ref-border, rgba(85, 102, 214, 0.24));
  border-radius: 999px;
  background: var(--read-ref-bg, rgba(102, 126, 234, 0.08));
  cursor: pointer;
  font: inherit;
  padding: 4px 10px;
}
.read-ref,
.read-ref:hover,
.read-ref:active {
  box-shadow: none !important;
  transform: none;
  filter: none;
}
.read-ref:hover,
.read-ref:focus-visible {
  background: var(--read-ref-hover, rgba(102, 126, 234, 0.15));
}
.read-ref::after {
  content: "\25BE";
  font-size: 0.5em;
  margin-left: 0.3em;
  vertical-align: 0.2em;
  opacity: 0.6;
}
@media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) {
  /* 달력 펼침면의 월 제목(book.css `.page-right .month-title`)과 같은 값 */
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-ref.month-title { font-size: clamp(16px, 1.8vw, 23px) !important; }
}

/* ── 역본 — 활자 러닝헤드(2026-09-06 검수 #2) ──
   알약·테두리·그림자·이모지 없음. 12px 명조 --ink-soft, 현재 역본만 --ink + 금박 밑줄 2px
   (달력 제목 밑줄 .month-title-container::after 와 같은 그라데이션 — 선택 표시의 통일 근거).
   잠긴 역본은 '(준비 중)' 활자 + 흐림, 누르면 사유 토스트.
   ⚠️ 한 줄로 둔다 — 줄을 바꾸면 지면이 짧아진다(2026-09-05 재검수 ①-1). 오른쪽에 더 있으면
      끝을 종이에 스미듯 흐려서(mask) 잘렸음을 보인다. 흐림은 read.js 가 scrollWidth 를 재서 .is-cut 으로 켠다. */
.read-versions {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  scroll-padding-right: 32px;
}
.read-versions::-webkit-scrollbar { display: none; }
/* 역본 줄은 머리글 둘째 줄 **왼쪽 면 안**(1열) — 머리글이 책등을 가로지르지 않는다(검수 #3) */
.read-header > .read-versions { grid-column: 1; grid-row: 2; justify-self: start; min-width: 0; }
.read-versions.is-cut {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.read-version-sep { color: var(--rp-ink-soft); font-size: 12px; user-select: none; }

/* 기본 테마 — 칩(달력 도크 토글과 같은 토큰) */
.read-version {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--rp-rule-strong);
  border-radius: 999px;
  background: var(--rp-chip);
  color: var(--rp-ink);
  cursor: pointer;
  white-space: nowrap;
}
.read-version[aria-selected="true"] {
  background: var(--rp-chip-on);
  color: var(--rp-chip-on-ink);
  border-color: transparent;
  font-weight: 700;
}
.read-version.is-locked { opacity: 0.5; cursor: not-allowed; }

/* 성경책 — 권 버튼(.read-ref)과 같은 테두리 없는 알약, 바탕은 권 버튼과 종이의 중간 농도(2026-10-01 사용자 결정).
   현재 역본은 먹 글자 + 알약 안쪽 아래의 금박선으로 가린다(달력 제목 밑줄과 같은 그라데이션). */
html[data-theme="book"] .read-versions { gap: 6px; }
html[data-theme="book"] .read-version,
html[data-theme="book"] .read-version[aria-selected="true"] {
  font-family: var(--rp-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--rp-ink-soft);
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--read-ver-bg);
  box-shadow: none !important;
}
html[data-theme="book"] .read-version:hover { color: var(--rp-ink); background-color: var(--read-ver-hover); transform: none; filter: none; }
html[data-theme="book"] .read-versions .read-version[aria-selected="true"] {
  color: var(--rp-ink);
  background: linear-gradient(90deg, transparent, var(--gilt, #b08a3c), transparent) no-repeat 50% calc(100% - 2px) / calc(100% - 20px) 2px,
              var(--read-ver-bg);
}
html[data-theme="book"] .read-version.is-locked { opacity: 0.55; cursor: not-allowed; }
html[data-theme="book"] .read-version.is-locked:hover { color: var(--rp-ink-soft); background-color: var(--read-ver-bg); }
/* 알약끼리는 간격으로 갈리므로 활자 시절의 가운뎃점은 뺀다 */
html[data-theme="book"] .read-versions > .read-version-sep { display: none; }

/* ── 모든 폭 — 머리글엔 제목만. 이동·달력으로·기록은 아래 막대(.mobile-month-nav)로 ──
   ⭐ 2026-09-09 사용자 결정: 달력과 **같은 쪽**을 고른다. 달력의 달 이동 줄이 2026-09-08 부터
      모든 폭에서 바닥에 뜨는데(book.css), 그때 읽기 화면은 머리말 조작과 두 벌이 된다는 이유로
      바닥 줄을 껐다 — 달력에서 내린 판단과 정반대였고, 그래서 900px 부터 조작 자리가 갈렸다.
      겹칠 때 걷을 것은 새 줄이 아니라 **옛 자리(머리말 버튼·떠 있는 기록 버튼)** 다.
   ⚠️ 이 블록을 다시 미디어 쿼리로 감싸면 그 갈림이 그대로 돌아온다. 테스트가 지킨다
      (`test_month_nav_bar_is_not_phone_only` — 달력과 읽기 화면을 함께 본다). */
.mobile-month-nav { display: none; }
.read-header > .read-turn,
.read-header > .month-title-container > .read-back { display: none !important; }
.read-header > .read-versions { grid-column: 1 / -1; justify-self: stretch; }
/* 떠 있는 기록 버튼은 막대 안 칸으로 들어갔다(막대 64~120px 와 겹친다) */
.read-book > .read-record { display: none !important; }
/* 달력 막대는 네 칸(이전달·이번달로·성경 읽기·다음달) — 여기도 넷(이전 면·달력으로·기록·다음 면), 같은 격자 */
.read-mobile-nav { display: grid; }
html[data-theme="book"] .read-mobile-nav .read-record-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; display: block;
}
/* 기본 테마 — calendar.css 의 .mobile-month-nav(768px 규칙)와 같은 값. 성경책은 book.css §17 이 그린다. */
html:not([data-theme="book"]) .read-mobile-nav {
  position: fixed;
  z-index: 9985;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0; /* 2026-09-06: 줄은 맨 바닥, 후원·설정은 그 위(base.html) */
  width: min(calc(100vw - 28px), 440px);
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(103, 126, 234, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(50, 50, 93, 0.18);
}
html:not([data-theme="book"]) .read-mobile-nav .nav-btn,
html:not([data-theme="book"]) .read-mobile-nav .today-link {
  min-height: 42px;
  margin: 0;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  font-size: clamp(11px, 3vw, 13px);
  border-radius: 999px;
  border: 0;
  cursor: pointer;
}
html:not([data-theme="book"]) .read-mobile-nav .today-link {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  font-weight: 700;
  /* font 축약은 공용 규칙의 11~13px·700까지 부모의 16px·400으로 되돌린다. family만 물려받는다. */
  font-family: inherit;
}


/* 낮은 화면(가로로 눕힌 폰)에서는 머리글 여백을 줄인다 — 오른쪽은 가름끈 자리를 비운다 */
@media (max-height: 560px) {
  html[data-theme="book"] :is(.container.read-book, .bc-peel-stage--read) .header.read-header {
    row-gap: 2px;
    padding: 6px calc(clamp(28px, 6vw, 80px) + clamp(10px, 1.6vw, 18px) + 8px - clamp(16px, 2.6vw, 34px)) 4px 8px !important;
  }
  html[data-theme="book"] .read-header > .month-title-container { gap: 0; }
  html[data-theme="book"] .read-header > .month-title-container::after { display: none; }
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-ref.month-title { font-size: 20px !important; }
}
/* 가로 폰 — 역본을 한 줄로 둔다(2026-10-02 사용자: 가로 화면은 지면 높이가 가장 큰 문제다).
   세로 폰의 두 줄(아래 <900px 규칙)은 폭이 좁아서 고른 것이고, 가로 폰은 폭이 남는 대신 높이가 모자란다.
   넘치는 역본은 옆으로 스크롤하고 끝을 흐린다(.is-cut, read.js). 규칙은 아래 <900px 머리글 블록 **바로 뒤**에 둔다 — 그보다 뒤에 와야 이긴다. */

/* ── 한쪽 면(<900px) 머리글 한 줄 — [책·장 제목 ▾][역본 두 줄, 옆으로 스크롤](2026-10-01 사용자 결정) ──
   폰은 본문이 보이는 면적이 작다. 제목 아래 둘째 줄을 통째로 쓰던 역본을 제목 오른쪽으로 올려 그 높이를 지면에 돌려준다.
   역본은 두 줄 격자로 위→아래, 왼→오른쪽 순서로 채우고, 넘치면 옆으로 스크롤한다(끝 흐림 .is-cut 은 그대로).
   두 줄이 되면 줄 사이 가운뎃점은 위아래 항목을 잇는 표시가 아니게 되므로 폰에서는 숨긴다.
   책등은 한쪽 면의 왼쪽 변에 선다(핸드북 §15) — 맨 왼쪽에 오는 제목을 본문 글이 시작하는 자리(--rp-gutter-1)에 맞춘다.
   clamp(8px, 2vw, 28px) 는 머리글의 왼쪽 여백(book.css 의 .header padding)과 **같은 식**이다(2026-09-21 실측: 책등 26~42).
   넘김 무대(.bc-peel-stage--read)도 같은 규칙을 받는다(핸드북 4-12). */
@media (max-width: 899px), (max-width: 999px) and (max-height: 500px) {
  :is(.read-book, .bc-peel-stage--read) .read-header {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
  }
  :is(.read-book, .bc-peel-stage--read) .read-header > .month-title-container {
    grid-column: 1; grid-row: 1;
    justify-self: start;
  }
  :is(.read-book, .bc-peel-stage--read) .read-header > .read-versions {
    grid-column: 2; grid-row: 1;
    justify-self: stretch;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    justify-content: start;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 4px;
    min-width: 0;
  }
  :is(.read-book, .bc-peel-stage--read) .read-versions > .read-version-sep { display: none; }
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-header > .month-title-container {
    padding-left: max(0px, calc(var(--rp-gutter-1, 22px) - clamp(8px, 2vw, 28px)));
  }
}
@media (max-width: 999px) and (max-height: 500px) {
  :is(.read-book, .bc-peel-stage--read) .read-header > .read-versions {
    grid-template-rows: auto;
    row-gap: 0;
    align-self: center;
  }
  /* 제목 알약을 한 단 낮추고(20→17px), 지면 아래 쪽번호 자리(32px)를 쪽번호 높이(바닥 6px + 12px 글자)에 맞춰 22px 로 줄인다.
     832x333 실측: 책을 키운 28px 만으로는 줄간(23.5px) 배수 내림에 걸려 본문이 한 줄도 늘지 않았다. */
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-ref.month-title { font-size: 17px !important; padding: 2px 10px; }
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-sheet { padding-bottom: 22px; }
}

/* ── 펼침면(≥900px) 머리글 한 줄 — 장 제목은 왼쪽 면 위, 역본은 오른쪽 면 위(2026-09-21 사용자 결정) ──
   두 줄(제목 / 역본)이던 머리글을 한 줄로 접어 그 높이를 지면에 돌려준다. 두 면은 책등을 가운데 둔
   거울 대칭이라 머리글을 반반으로 나누면 각 칸이 곧 그 면의 위다 — 어느 쪽도 책등을 가로지르지 않는다(검수 #3).
   ⚠️ 한쪽 면(<900px)은 면이 하나뿐이라 두 줄 그대로다. 넘김 무대(.bc-peel-stage--read)도 같은 규칙을 받는다(핸드북 4-12). */
@media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) {
  html[data-theme="book"] :is(.container.read-book, .bc-peel-stage--read) .header.read-header {
    grid-template-columns: 1fr 1fr;
    /* = .book-spine 의 width(book.css 의 펼침면 column-gap 과 같은 식). 좌우 여백을 0 으로 두어야 각 칸이 지면과 같은 자리·같은 폭이 된다
       (2026-09-21 실측: 여백을 남기면 역본 칸이 62px 왼쪽으로 밀리고 900px 에서는 책등 밑으로 들어갔다). */
    column-gap: clamp(30px, 4.4vw, 64px);
    row-gap: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-header > .month-title-container {
    grid-column: 1; grid-row: 1;
    justify-self: center;
  }
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-header > .read-versions {
    grid-column: 2; grid-row: 1;
    justify-self: center;
    min-width: 0;
    /* 오른쪽 면 위쪽에는 가름끈이 내려온다 — 끈 자리(오른쪽에서 6vw + 끈 폭 + 8px)를 비우고 남은 폭의 가운데에 둔다.
       자리가 모자라면 기존처럼 옆으로 스크롤하고 끝을 흐린다(.is-cut). */
    margin-right: calc(clamp(28px, 6vw, 80px) + clamp(10px, 1.6vw, 18px) + 8px);
    max-width: calc(100% - (clamp(28px, 6vw, 80px) + clamp(10px, 1.6vw, 18px) + 8px));
  }
}

/* ── 지면 ────────────────────────────────────────────────
   펼침면에서는 종이가 두 장이다(.read-sheet--left / --right).
   각 장은 높이가 고정된 창이고, 그 안의 .read-flow 가 옆으로 이어진다.
   두 장은 **같은 본문**을 담고 보여주는 단(column)만 다르다 —
   왼쪽이 2n번째, 오른쪽이 2n+1번째. JS 가 폭·높이·이동량을 재서 넣는다. */
.read-spread {
  display: flex;
  gap: var(--rp-spread-gap, 0px);
  margin: 6px 0 0;
}
/* 손가락으로 끌어 넘기기(read.js attachDrag) — 가로 손짓은 우리가, 세로 스크롤은 브라우저가.
   ⚠️ classic 테마(세로 스크롤)에는 걸지 않는다 — 거기서는 드래그 넘김 자체를 잡지 않는다. */
html[data-theme="book"] .read-header,
html[data-theme="book"] .read-spread { touch-action: pan-y; }
/* 역본 탭 줄은 제가 옆으로 스크롤한다 — 스크롤 주체가 이 요소라 위의 pan-y 에 안 묶인다. read.js 도 여기서는 끌기를 안 잡는다 */
html[data-theme="book"] .read-versions { touch-action: pan-x pan-y; }

.read-sheet {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;   /* JS 가 넣는 높이가 padding 을 포함해야 화면 안에 맞는다 */
}

/* 오른쪽 장은 펼침면(성경책 테마·넓은 화면)에서만 쓴다 */
.read-sheet--right { display: none; }

/* ── 지면 여백 (성경책) ──
   본문이 종이 가장자리(0.7px)·책등 그늘(0px)에 여백 없이 붙어 있었다(2026-09-05 PC 검수 #7).
   실물처럼 바깥 여백·안쪽 여백(거터)·위 여백을 둔다. 한 장(폰)은 사방 조금씩.
   ⚠️ 다단 흐름은 padding 을 모른다 — read.js 가 단 폭을 clientWidth−padding 으로 재고,
      단 사이 간격을 padding 합보다 크게 두어 옆 단이 여백 안으로 비치지 않게 한다. */
/* ⚠️ 폰은 12/14/8 로 두었더니 단이 좁아져 창세기 1장이 4면→5면이 됐다(재검수 ①-1). 면당 절 수가
   먼저다(사용자 지시) — 한 장 화면은 종이 결이 보일 만큼만 띄운다. 펼침면은 아래에서 따로 준다. */
/* ⭐ 2026-09-06 사용자: "실제라면 가운데 접힌 쪽에는 글자가 적혀 있지도 않다." 안여백(거터)이 바깥보다
   넓다 — 한 장(폰) 본문은 오른쪽 면이므로 왼쪽이 책등(거터), 오른쪽이 바깥이다.
   아래 shorthand는 top / right(outer) / bottom / left(gutter) 순서다.
   값은 토큰 한 곳(--rp-gutter-1/--rp-outer-1)에서만 조절한다.
   면당 절 수(창세기 1장 '중' 4면)를 넘지 않게 바깥을 좁게 둔다. */
html[data-theme="book"] .read-book { --rp-gutter-1: 22px; --rp-outer-1: 14px; --rp-folio-x: var(--rp-outer-1); }
/* 아래 여백은 폴리오(면 번호) 띠 — 한 장에도 폴리오 하나가 바깥(오른쪽) 아래 모서리에 온다(2026-09-06) */
/* ⭐ 아래 22px 은 폴리오 띠 — 면 번호(바닥 6px + 12px 글자) 높이만큼이다. 가로 폰이 이미 22px 로 쓰고 있다.
   20px 띠에서는 글줄 바닥 691 > 폴리오 위 687 로 겹쳤다(2026-09-07). 32px 로 두었더니 줄간 배수 내림 자투리와 겹쳐
   마지막 글줄 아래가 57px(두 줄 남짓) 비었다(2026-10-06 Flip6 15:10 캡처) — 22px 면 같은 화면에 한 줄이 더 들어간다.
   펼침면(≥900px)은 아래 미디어 규칙이 32px 로 따로 준다. read.js 가 이 padding 을 뺀 안쪽 높이를 줄간 배수로 맞춘다. */
html[data-theme="book"] .read-sheet { padding: 8px var(--rp-outer-1) 22px var(--rp-gutter-1); }

/* 면 번호 — 실물처럼 면마다 바깥 아래 모서리(왼쪽 면은 왼쪽, 오른쪽 면은 오른쪽). 면 수 표시는 이것뿐이다.
   ⭐ 2026-09-28 사용자: 쪽번호를 안쪽으로 밀어 넣고 폰·PC 를 통일하라. 바깥 끝은 **본문 바깥 가장자리**(--rp-folio-x =
      그 면의 바깥 여백)에 맞춘다 — 색인 열 밑이 아니라 글줄 끝 아래다. 그래서 색인이 면 바닥까지 내려올 수 있다.
      높이도 한 값(6px)이다. 예전에는 폰이 4px·오른쪽 12px, PC 가 6px·16px 로 갈렸다. */
.read-folio { display: none; }
html[data-theme="book"] .read-folio {
  display: block;
  position: absolute;
  bottom: 6px;
  right: var(--rp-folio-x, 50px);
  font-family: var(--rp-serif);
  font-size: 12px;
  color: var(--rp-ink-soft);
  letter-spacing: 0.04em;
  user-select: none;
}

/* 책등은 base.html 의 .book-spine 이 책 한가운데에 그린다(달력과 같은 요소). 두 면이 거울 대칭이라
   두 장 사이 틈이 정확히 그 자리에 온다(2026-09-06 검수 #3 실측 612~668). 예전엔 여기서 숨기고
   .read-spread::after 로 따로 그렸는데 머리글·아래 줄 구간엔 책등이 없어 한 장 판처럼 보였다 — 걷었다.
   ⭐ 2026-09-07: 읽기 화면의 책등은 **접힘 그늘 하나**(base.html 의 --spine-shade — 달력 펼침면과 같은 값)만.
      가운데 심(--spine-crease)은 글줄 사이에 남아 '씹힌' 띠로 보였다(PC 1366×650).
      ⚠️ 어미(▼▲)는 2026-09-08 에 달력에서도 걷었다 — 성경책에 없는 고서 장식이었다(book.css §5).
      지면 안쪽 inset 그림자도 걷는다 — 지면 구간에서만 진해져 머리글 구간과 끊겨 보였다. 그늘은 책 위아래를 잇는다. */
@media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) {
  html[data-theme="book"] .read-book .book-spine { background: var(--spine-shade); }
  html[data-theme="book"] .read-book .book-spine::before,
  html[data-theme="book"] .read-book .book-spine::after { content: none; display: none; }
  html[data-theme="book"] .read-sheet--left,
  html[data-theme="book"] .read-sheet--right { box-shadow: none; }
}

@media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) {
  html[data-theme="book"] .read-sheet--right { display: block; }

  /* 바깥 여백은 색인 폭 + 숨 쉴 틈. 두 면이 거울 대칭이라야 접힘선이 표지 가운데에 온다(PC 검수 #8).
     ⭐ 2026-09-06 사용자: "가운데 접힌 쪽에는 글자가 적혀 있지도 않다" — 실물은 책등 쪽 안여백(거터)이
        접힘 때문에 바깥보다 넓다. 예전엔 바깥 77 / 안 22 로 거꾸로였다.
     ⭐ 2026-09-22 사용자: "넓은 화면에서 가운데 여백이 너무 넓다" — 62px 는 책등 그늘이 면 위에 얹힌다는
        전제로 잡은 값이었는데, read.js 가 책등 폭(clamp(30px,4.4vw,64px), base.html)을 두 면 사이 flex 간격
        (--rp-spread-gap)에 그대로 넣으므로 그늘은 면 밖 틈에만 있다. 그래서 글 사이 빈 폭이 62+64+62=188px
        (1920px 실측)로 바깥 60px 의 세 배였다. 글에서 접힘선까지 = 거터 + 책등 절반이므로 거터는 그만큼만:
        34px 이면 900px(책등 39.6 → 53.8 vs 바깥 52)부터 1920px(64/2+34=66 vs 60)까지 모든 폭에서
        안여백이 바깥보다 넓다는 원칙이 유지된다. 30px 는 900px 에서 49.8 < 52 로 깨진다.
     ⭐ 2026-09-22 사용자(같은 날 두 번째): 34px 도 "더 줄여" — 16px 로 내린다. 이 값에서는 글~접힘선
        (16 + 책등 절반 32 = 48px, 1920px)이 바깥 60px 보다 좁아지므로 2026-09-06 의 "안여백 ≥ 바깥" 원칙은
        이 지시로 대체된다. 책등 그늘 띠(64px)가 두 면 사이에 따로 있으므로 글 사이 빈 폭은 여전히 96px 다. */
  html[data-theme="book"] .read-book {
    --rp-index-w: clamp(44px, 4vw, 52px);
    --rp-outer: calc(var(--rp-index-w) + 8px);
    --rp-gutter: 16px;
    --rp-folio-x: var(--rp-outer);
  }
  html[data-theme="book"] .read-sheet--left  { padding: 14px var(--rp-gutter) 32px var(--rp-outer); }
  html[data-theme="book"] .read-sheet--right { padding: 14px var(--rp-outer) 32px var(--rp-gutter); }

  html[data-theme="book"] .read-sheet--left  .read-folio { left: var(--rp-folio-x); right: auto; }
  html[data-theme="book"] .read-sheet--right .read-folio { right: var(--rp-folio-x); }
}

/* ── 글자 크기 (도크의 '글자 크기' 막대가 고른다, 2026-09-06) ──────────
   값은 read.js 가 .read-book 의 --rp-body 에 px 로 직접 넣는다(12~24px, 0.5 단계, 기본 14.5).
   여기에는 단계를 두지 않는다 — 막대가 연속값이다. 기본값은 .read-flow 의 var() 대체값 하나뿐. */

.read-flow {
  font-family: var(--rp-serif);
  /* 조판은 실물 성경책 기준이다(폰 390px 실측 2026-09-04).
     줄간 1.95·본문 16px 이던 것은 한 면에 여섯 절밖에 못 담아 창세기 1장이 6면이었다 —
     실물은 한 면에 수십 절이 들어간다. 글자를 줄이고 줄간을 좁혀 면당 절 수를 늘린다.
     --rp-body 는 나중에 '글자 크기' 설정이 덮을 자리다. */
  font-size: var(--rp-body, clamp(14.5px, 3.7vw, 16.5px));
  line-height: 1.62;
  word-break: keep-all;
  overflow-wrap: break-word;
  will-change: transform;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  /* ⚠️ 성경책 테마의 .container 가 가운데 정렬이라 본문까지 가운데로 몰린다.
     책 조판은 왼쪽 정렬이라야 읽힌다. */
  text-align: left;
}

/* 지면 위 머리글(.read-ref)이 이미 '창세기 1장'을 보여 준다 — 실물의 러닝 헤드가 그것이다.
   지면 안에서 한 번 더 그리면 첫 면에서만 두 줄을 잡아먹는다. 그래서 숨긴다. */
.read-chapter-head { display: none; }

/* 성경책 — 면 단위로 이어지는 다단 */
html[data-theme="book"] .read-flow {
  height: 100%;
  column-fill: auto;
  column-width: var(--rp-col-w, 320px);
  column-gap: var(--rp-col-gap, 48px);
}

/* 기본 테마 — 익숙한 세로 스크롤(다단으로 만들지 않는다). 장은 하나뿐이다. */
html:not([data-theme="book"]) .read-sheet {
  overflow-y: auto;
  overflow-x: hidden;
}

html:not([data-theme="book"]) .read-spread { gap: 0; }

html:not([data-theme="book"]) .read-flow {
  transform: none !important;
  height: auto;
  /* ⚠️ 예전엔 문서 전체가 스크롤하고 아래를 112px 비워 두었는데, 스크롤 중에는 떠 있는
     버튼이 늘 어느 절인가를 덮었고 끝까지 내려도 ◀▶·출처를 덮었다(2026-09-05 검수 #6).
     이제 지면(.read-sheet)이 성경책 테마와 같은 높이 계산으로 화면 안에 들어오고
     그 안에서 스크롤한다 — 떠 있는 것들은 지면 밖에 있으니 아무것도 덮지 않는다. */
  padding-bottom: 6px;
}

/* 실물 성경책은 절 사이가 붙어 있다. 0.62em 은 문단처럼 떠 보였고, 0.3em 도 글줄을 줄 격자에서 밀어내
   면 바닥에 1.8줄(48px)이 비었다(2026-09-06 검수 #10). 여백 0 — 절의 경계는 상첨자 번호가 이미 보여 준다.
   read.js 가 판면 높이를 줄간의 배수로 맞추므로 마지막 글줄이 판면 바닥에 닿는다.
   그리고 절은 **면 경계를 걸쳐 이어진다** — avoid-column 으로 통째로 밀어 두었더니
   면 아래에 120px 씩 빈 곳이 남았다(390px 실측). 실물에는 그런 여백이 없다. */
.read-verse { margin: 0; orphans: 1; widows: 1; }   /* 기본 2 는 단 끝에서 두 줄을 통째로 밀어 한 줄을 비웠다(실측 26.9px) */

/* 형광펜 — 밑줄이 아니라 **글자 조각 위**에 반투명 색을 겹친다(핸드북 §16).
   inline span이라 줄바꿈을 따라가며, 문단의 빈 오른쪽 폭까지 칠하지 않는다. */
.read-verse-text {
  border-radius: 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.read-verse-text.is-highlighted {
  background: linear-gradient(
    to bottom,
    transparent 10%,
    rgba(var(--rp-highlight-rgb), 0.48) 10%,
    rgba(var(--rp-highlight-rgb), 0.48) 90%,
    transparent 90%
  );
  box-shadow: 0.08em 0 0 rgba(var(--rp-highlight-rgb), 0.48),
             -0.08em 0 0 rgba(var(--rp-highlight-rgb), 0.48);
}
.read-verse.is-speaking .read-verse-text {
  outline: 1px solid var(--rp-accent);
  outline-offset: 2px;
}

/* 도크의 본문 도구도 테마·언어와 같은 분절 컨트롤을 쓴다. */
/* 버튼 다섯 개가 한 줄이면 폰 카드(390px 에서 344px)보다 넓어 '관련 구절'·'내 구절 보기'가 카드 밖으로
   잘렸다(2026-09-29 실측: 오른끝 503px). 카드 안에서 줄을 바꾼다 — 격자 칸이 내용 폭보다 좁아질 수 있게 min-width:0. */
.read-tool-switcher {
  flex-wrap: wrap;
  min-width: 0;
}
.read-tool-switcher .seg-opt {
  min-width: 4.8em;
}
.read-tool-switcher .read-highlight-opt::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.55em;
  margin-right: 0.35em;
  border-radius: 0.12em;
  vertical-align: -0.02em;
  background: rgb(var(--rp-highlight-rgb));
  box-shadow: inset 0 0 0 1px rgba(80, 65, 0, 0.16);
}

.read-verse-num {
  color: var(--rp-num);
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: 0.35em;
  /* ⚠️ line-height 0 — 올려 붙인 절 번호가 글줄 상자를 키우면 줄 격자(줄간 배수)가 밀려 마지막 글줄이
     판면 밑으로 내려간다. 0 이면 번호는 줄 높이에 아무 몫도 없다(2026-09-07). */
  line-height: 0;
  margin-inline-end: 0.4em;
  user-select: none;
}

/* 장이 바뀌는 자리 — 이어 읽을 때 어디서 넘어갔는지 보이게 */
.read-chapter-head {
  font-family: var(--rp-serif);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--rp-ink-soft);
  margin: 0 0 0.7em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rp-rule);
  break-after: avoid-column;
}

.read-loading,
.read-error {
  color: var(--rp-ink-soft);
  text-align: center;
  padding: 32px 0;
}

/* ── 책 색인 ─────────────────────────────────────────────
   실물 색인 성경대로 **세 권씩 묶어 22개**다('창출레'·'민신수'·'학슥말' …).

   ⭐ 달력의 월 색인과 **같은 규칙**을 쓴다(2026-09-06 사용자: "색인은 왜 이전의 생김새랑 달라졌는지").
      read.js 가 링크에 .month-index-link, 글자에 .month-index-label 을 주면 book.css §19 가
      '종이 책배에서 이어지는 밝은 절삭 통로 끝의 검은 반원 라벨' 을 그대로 그린다(agent-handbook §4).
      여기서는 **자리와 크기만** 정한다 — 22칸이라 통로·라벨 높이를 칸에 맞춰 줄이되 모양·색·재질은 손대지 않는다.
   ⚠️ 통(nav)에는 .month-index 를 주지 않는다 — book.css 가 body:has(.month-index) 로 도크 위치까지
      옮기므로(낮은 가로 화면) 이 화면의 도크가 딸려 움직인다. 통의 배치(절대 위치·격자)는 여기서 쓴다.
   ⚠️ 통로·라벨 높이는 칸 높이에서 나온다 — read.js 의 layout() 이 --rp-index-row(px) 를 넣어 준다.
      칸이 달력만큼 크면 달력과 같은 값(통로 최대 24px·라벨 최대 21px)에서 멈춘다.
   폰(<900px)도 그린다(사용자 결정 2026-09-22 — 달력과 같은 오른쪽 책배 색인). 성경책 테마가 아니면 숨긴다. */
.book-index { display: none !important; }

@media (min-width: 1000px), (min-width: 900px) and (min-height: 501px) {
  html[data-theme="book"] .read-book > .book-index {
    display: grid !important;
    position: absolute !important;
    z-index: 5 !important;
    top: clamp(150px, 17vh, 210px);       /* read.js 가 지면 윗변·높이로 덮어쓴다 */
    /* 종이(.container::before)의 오른쪽 가장자리 = 책 안쪽 여백. 실물 색인은 오른쪽 면 책배에 파여 있다
       (펼침면 오른쪽에 자리를 따로 빼면 접힘선이 표지 가운데를 벗어난다 — 2026-09-05 PC 검수 #8). */
    right: var(--cover-pad);
    bottom: clamp(78px, 10vh, 120px);
    width: var(--rp-index-w, clamp(44px, 4vw, 52px));
    /* 구약 13묶음 · 신약 9묶음. 경계는 탭 색으로만 나눈다(2026-09-23 사용자: 금박 줄 제거). */
    grid-template-rows: repeat(22, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;
  }

  /* <button> 이라 <a> 와 다른 기본값만 지운다. 모양은 전부 book.css 의 .month-index-link 규칙이다. */
  html[data-theme="book"] .read-book .month-index-link {
    pointer-events: auto;
    cursor: pointer;
    height: auto;
    min-height: 0;
    margin: 0;
    text-align: left;
  }
  /* base.html 이 모든 button 에 hover 그림자·떠오름을 건다 — 파인 홈은 떠오르지 않는다 */
  html[data-theme="book"] .read-book .month-index-link:hover,
  html[data-theme="book"] .read-book .month-index-link:active {
    transform: none;
    filter: none;
    box-shadow: none;
  }
  /* 달력은 이번달 홈을 못 누르게 두지만, 여기서는 같은 묶음을 다시 짚으면 그 안의 다음 책으로 간다 */
  html[data-theme="book"] .read-book .month-index-link.is-current { pointer-events: auto; }

  /* 22칸에 맞춘 크기 — 세 글자('창출레')라 달력(두 글자)보다 넓고, 칸이 낮아 통로도 낮다.
     달력: 통로 31×clamp(19,2.4vh,24) · 라벨 27×clamp(17,2.1vh,21) · 글자 24px clamp(8,0.82vw,10). */
  html[data-theme="book"] .read-book .month-index-link::before {
    width: 40px;
    height: min(24px, calc(var(--rp-index-row, 20px) * 0.8));
  }
  html[data-theme="book"] .read-book .month-index-link::after,
  html[data-theme="book"] .read-book .month-index-link.is-current::after {
    width: 34px;
    height: min(21px, calc(var(--rp-index-row, 20px) * 0.7));
  }
  html[data-theme="book"] .read-book .month-index-label {
    width: 32px;
    right: 1px;
  }
}

/* 폰(<900px) 한 면 — 달력의 폰 월 색인(bundle-themes.css 899px 규칙: 오른쪽 clamp(14px,5vw,20px)·폭 42px)과
   같은 자리에 22칸을 세운다. 본문 오른쪽 여백(--rp-outer-1)을 색인 폭만큼 넓혀 글자가 색인 밑으로 가지 않게 한다. */
@media (max-width: 899px), (max-width: 999px) and (max-height: 500px) {
  html[data-theme="book"] .read-book { --rp-outer-1: 50px; --rp-folio-x: var(--rp-outer-1); }
  html[data-theme="book"] .read-book > .book-index {
    display: grid !important;
    position: absolute !important;
    z-index: 5 !important;
    top: clamp(108px, 14vh, 138px);        /* read.js 가 지면 윗변·높이로 덮어쓴다 */
    /* 종이(.container::before)는 컨테이너 안쪽으로 --cover-pad(book.css, 폰 16px)만큼 들어가 있다.
       색인 right 는 컨테이너 기준이므로 그보다 작으면 가죽 표지 위로 나간다 — clamp(6px,2vw,12px) 는
       390px 에서 8px 라 종이 끝(366)을 374 까지 8px 넘었다(2026-09-22 사용자 지적). 종이 끝에 딱 맞춘다. */
    right: var(--cover-pad, 16px);
    bottom: clamp(70px, 9vh, 100px);
    width: 38px;
    grid-template-rows: repeat(22, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;
  }
  html[data-theme="book"] .read-book .month-index-link {
    pointer-events: auto;
    cursor: pointer;
    height: auto;
    min-height: 0;
    margin: 0;
    text-align: left;
    font-size: 11px;   /* 2026-10-13 평가: 9px 는 읽기 어렵다. 세 글자(창출레)가 38px 탭에 들어가는 한계 크기 */
    letter-spacing: -0.5px;
    transform: none;
  }
  html[data-theme="book"] .read-book .month-index-link:hover,
  html[data-theme="book"] .read-book .month-index-link:active { transform: none; filter: none; box-shadow: none; }
  html[data-theme="book"] .read-book .month-index-link.is-current { pointer-events: auto; width: auto; }
  html[data-theme="book"] .read-book .month-index-link::before {
    width: 32px;
    height: min(20px, calc(var(--rp-index-row, 16px) * 0.8));
  }
  html[data-theme="book"] .read-book .month-index-link::after,
  html[data-theme="book"] .read-book .month-index-link.is-current::after {
    width: 27px;
    height: min(17px, calc(var(--rp-index-row, 16px) * 0.7));
  }
  html[data-theme="book"] .read-book .month-index-label { width: 26px; right: 1px; }
  /* 색인이 종이 최상단부터 머리말 옆을 지나므로(read.js) 머리말 오른쪽을 색인 폭만큼 비운다. */
  html[data-theme="book"] .container.read-book .header.read-header { padding-right: 44px; }
  /* 머리말 윗여백 — book.css 의 clamp(10px, 2.2vh, 26px) 가 폰에서 20px 이라 본문 위가 비었다(2026-10-06 Flip6). */
  html[data-theme="book"] :is(.container.read-book, .bc-peel-stage--read) .header.read-header { padding-top: 8px !important; }
}

/* 색인 자리를 펼침면 바깥(padding-right)에서 빼던 규칙은 걷었다 — 두 면이 비대칭이 되어
   접힘선이 표지 가운데를 벗어났다(PC 검수 #8). 이제 오른쪽 면의 바깥 여백(--rp-outer)이
   색인 폭을 품고, read.js 가 단 폭을 padding 을 뺀 값으로 재므로 글자가 색인 아래로 가지 않는다. */

/* ── 기록 버튼 ──────────────────────────────────────────
   커피 후원 버튼(.coffee-button — fixed, 왼쪽 아래 15px, 알약)·설정 도크(오른쪽 아래)와
   같은 계열의 떠 있는 버튼이다. 셋을 한 줄에 나란히 세우기에는 커피 버튼이 넓어서
   (폰에서 셋을 넣으면 남는 폭이 50px 이 안 된다) **커피 버튼 바로 위**에 얹는다.
   그 둘을 읽기 화면에서 숨기지 않는다 — 다 필요한 것들이다(사용자 지시 2026-09-04). */
.read-record {
  position: fixed;
  left: 15px;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  z-index: 998;   /* 커피 버튼(999)·도크(9990)보다 아래 — 겹치면 그쪽이 위로 */
  max-width: calc(100vw - 30px);
}

.read-record-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  border-radius: 25px;   /* .coffee-button 과 같은 값 */
  background: var(--rp-chip-on);
  color: var(--rp-chip-on-ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.read-record-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.read-record-btn:disabled { opacity: 0.55; cursor: default; transform: none; }

/* 성경책 — 커피 후원 버튼(.coffee-button, book.css)과 **같은 값**(2026-09-06 검수 #8: 같은 역할 = 같은 모양).
   ⚠️ base.html 의 `button:not(.flat)`(0,1,1)·`button:hover`(0,2,1) 그림자·떠오름보다 세게(0,3,1) 둔다. */
html[data-theme="book"] .read-record-btn,
html[data-theme="book"] .read-record-btn:hover {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa);
  color: var(--ink, #2e2620);
  border: 1px solid rgba(150, 118, 62, 0.28);
  border-radius: clamp(10px, 1.4vw, 16px);
  font-family: var(--rp-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: none;
  box-shadow: 0 1px clamp(4px, 0.8vw, 9px) rgba(90, 68, 40, 0.14);
  transform: none;
  filter: none;
}

.read-record-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 낮은 화면(가로로 눕힌 폰 780×390 등) — 커피 버튼이 잔(44px 원)만 남는 조건(base.html)과 같다.
   위에 얹으면 지면이 그만큼 짧아져 240px 아래로 못 내려가고 본문을 덮었다(2026-09-05 검수 #4).
   옆으로 나란히 세우면 가로 화면엔 폭이 남는다. */
@media (max-height: 560px) {
  .read-record {
    left: 68px;   /* 커피 15px + 44px + 9px */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 책·장 고르기 ─────────────────────────────────────────
   껍데기는 달력 모달(book.css §20 — 막·속지·머리·닫기·바닥)과 같은 값, 내용은 실물 성경의 **목차 면**
   (구약·신약 두 단 활자, 현재 책만 굵게+금박 밑줄, 장은 숫자 열). 버튼 격자·카드 그림자는 없다(2026-09-06 검수 #6). */
.read-picker {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.read-picker-panel {
  width: min(560px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--rp-chip-on-ink);
  color: var(--rp-ink);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--rp-shadow);
}

html:not([data-theme="book"]) .read-picker-panel { background: #fff; }
html[data-theme="classic"][data-sys="dark"] .read-picker-panel { background: #111827; }

@media (min-width: 640px) {
  .read-picker { align-items: center; }
  .read-picker-panel { border-radius: 16px; max-height: 76vh; }
}

.read-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rp-rule);
  font-family: var(--rp-serif);
}
.read-picker-head h3 { margin: 0; font: inherit; font-size: 16px; font-weight: 700; }

.read-picker-close {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rp-ink-soft);
  cursor: pointer;
}

.read-picker-scroll {
  overflow-y: auto;
  padding: 4px 16px 16px;
  -webkit-overflow-scrolling: touch;
}
.read-picker-foot {
  padding: 8px 16px;
  border-top: 1px solid var(--rp-rule);
  font-size: 11px;
  color: var(--rp-ink-soft);   /* opacity 로 흐리면 대비가 깎인다(검수 #8) */
  text-align: center;
}
.read-copyright { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.read-picker-section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rp-ink-soft);
  margin: 14px 2px 6px;
}

/* 목차 두 단(구약 | 신약). 좁으면 위아래로 */
.read-picker-toc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
@media (max-width: 480px) { .read-picker-toc { grid-template-columns: 1fr; } }
.read-book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 10px; }
.read-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px 4px; }

/* 목차 활자 — 테두리·채움·그림자 0, 현재만 굵게+밑줄, hover 밑줄.
   ⚠️ 이름은 .read-toc-* 다. 예전 .read-book 은 화면 컨테이너(.container.read-book)와 같은 이름이라
      버튼 규칙(border·padding·13px·nowrap)이 책 전체에 새어 들어갔다(2026-09-06 실측: 본문이 줄바꿈을 못 함). */
.read-toc-book,
.read-toc-chapter {
  font: inherit;
  font-size: 13px;
  padding: 3px 2px;
  line-height: 1.5;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rp-ink);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none !important;
}
.read-toc-chapter { text-align: center; font-variant-numeric: tabular-nums; }
.read-toc-book:hover,
.read-toc-chapter:hover {
  transform: none;
  filter: none;
  background: linear-gradient(90deg, transparent, var(--rp-accent), transparent) no-repeat 50% 100% / 100% 1px;
}
.read-toc-book[aria-current="true"],
.read-toc-chapter[aria-current="true"] {
  font-weight: 700;
  background: linear-gradient(90deg, transparent, var(--rp-accent), transparent) no-repeat 50% 100% / 100% 2px;
}

/* 성경책 — book.css §20 의 모달 값 그대로(막 · 속지 · 머리 · 닫기 · 바닥) */
html[data-theme="book"] .read-picker {
  background: rgba(35, 24, 16, 0.46);
  backdrop-filter: blur(4px) sepia(0.22);
  -webkit-backdrop-filter: blur(4px) sepia(0.22);
}
html[data-theme="book"] .read-picker-panel {
  background:
    repeating-linear-gradient(0deg, rgba(89, 63, 35, 0.022) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, rgba(126, 91, 47, 0.08), transparent 9%, transparent 91%, rgba(126, 91, 47, 0.06)),
    #f4ead5;
  color: var(--ink, #2e2620);
  border: 1px solid rgba(151, 115, 57, 0.48);
  border-radius: 5px 12px 12px 5px;
  box-shadow:
    0 18px 36px rgba(24, 14, 8, 0.34),
    0 5px 12px rgba(24, 14, 8, 0.22),
    inset 4px 0 8px rgba(113, 80, 42, 0.08);
  font-family: var(--serif);
}
html[data-theme="book"] .read-picker-head {
  background:
    linear-gradient(90deg, rgba(142, 105, 51, 0.10), transparent 18%),
    rgba(242, 230, 207, 0.92);
  border-bottom: 1px solid rgba(151, 115, 57, 0.42);
  border-radius: 4px 11px 0 0;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.48);
}
html[data-theme="book"] .read-picker-head h3 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
html[data-theme="book"] .read-picker-close,
html[data-theme="book"] .read-picker-close:hover {
  color: #654a2d;
  background: rgba(255, 252, 242, 0.48);
  border: 1px solid rgba(151, 115, 57, 0.32);
  box-shadow: none !important;
  transform: none;
  filter: none;
}
html[data-theme="book"] .read-picker-close:hover,
html[data-theme="book"] .read-picker-close:focus-visible { color: #402b19; background: rgba(221, 198, 150, 0.34); }
html[data-theme="book"] .read-picker-foot {
  background: rgba(239, 225, 199, 0.82);
  border-top: 1px solid rgba(151, 115, 57, 0.30);
  border-radius: 0 0 11px 4px;
  color: var(--ink-soft);
  font-family: var(--serif);
}
html[data-theme="book"] .read-picker-section { color: var(--ink-soft); font-family: var(--serif-display); font-weight: 400; font-size: 13px; letter-spacing: 0.08em; }
html[data-theme="book"] .read-toc-book,
html[data-theme="book"] .read-toc-chapter { font-family: var(--serif); color: var(--ink); }
html[data-theme="book"] .read-toc-book:hover,
html[data-theme="book"] .read-toc-chapter:hover,
html[data-theme="book"] .read-toc-book[aria-current="true"],
html[data-theme="book"] .read-toc-chapter[aria-current="true"] {
  background-image: linear-gradient(90deg, transparent, var(--gilt), transparent);   /* 달력 제목 밑줄과 같은 금박선 */
}

/* ── 알림 ── */
/* ⚠️ 화면 아래(bottom 84px)에 두었더니 넘김 줄·기록 버튼을 3초씩 덮었고(검수 #13), 지면 위쪽으로
   옮기니 1~3절을 덮었다(재검수 ①-4). 본문 위에 종이를 얹지 않는다 — **머리말 줄 위**(러닝 헤드 자리)에
   잠깐 얹는다. read.js 가 머리말 상자를 재서 --rp-toast-top 으로 넣는다. */
.read-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: var(--rp-toast-top, 96px);
  bottom: auto;
  /* ⚠️ left:50% 인 fixed 상자는 shrink-to-fit 폭이 화면의 절반으로 잡혀 780px 에서 두 줄로 접혔고
     그만큼 키가 커져 머리말 아래 1절을 3~8px 덮었다(재검수). 내용 폭만큼 넓힌다. */
  width: max-content;
  z-index: 9997;
  padding: 11px 18px;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 14px;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.read-toast.is-error { background: rgba(153, 27, 27, 0.94); }

/* 성경책 — 설정 카드(.dock-items, base.html)와 같은 종이 쪽지 토큰. 오류는 가름끈색(--ribbon) 테두리+글자.
   폰은 13px·padding 9px 14px 한 줄(2026-09-06 검수 #7 — 남색 카드가 종이 위에 있었다). */
html[data-theme="book"] .read-toast {
  background:
    repeating-linear-gradient(0deg, rgba(70, 45, 20, 0.018) 0 1px, transparent 1px 3px),
    rgba(246, 236, 216, 0.97);
  color: var(--ink, #2e2620);
  border: 1px solid rgba(164, 126, 63, 0.34);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(22, 13, 9, 0.30);
  font-family: var(--serif);
}
html[data-theme="book"] .read-toast.is-error {
  color: var(--ribbon, #8e2b2b);
  border-color: var(--ribbon, #8e2b2b);
}
@media (max-width: 899px), (max-width: 999px) and (max-height: 500px) {
  html[data-theme="book"] .read-toast { font-size: 13px; padding: 9px 14px; }
}

@media print {
  .read-header, .read-record, .read-picker, .mobile-month-nav,
  .read-toast, .book-index { display: none !important; }
  .read-sheet { overflow: visible; height: auto !important; }
  .read-flow { transform: none !important; height: auto !important; }
}


/* 즐겨찾기(좋아하는 구절) — 절 번호 앞 별표. 형광펜과 겹쳐도 서로 가리지 않는다(2026-09-23). */
.read-verse.is-favorite .read-verse-num::before {
  content: "★";
  margin-right: 0.15em;
  font-size: 0.85em;
  color: #c9a227;
}
/* 밑줄·정렬은 공용 .seg-opt 규칙이 맡는다(language-switcher.css) — 여기서 밑줄만 지우면
   글자가 상자 맨 위에 붙은 것을 오히려 못 알아챈다(2026-09-23, 핸드북 §23). */

/* 관주 패널 — 지면 밖에 떠 있는 아래쪽 시트. 지면 높이 계산(read.js layout)에 끼지 않도록 문서 흐름 밖에 둔다. */
.read-crossref {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(720px, 100vw); max-height: 55vh; overflow: auto;
  background: var(--rp-paper, #fbf7ee); color: var(--rp-ink, #2e2620);
  border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
  padding: 12px 16px 16px; z-index: 9990; font-size: 0.95rem;
}
.read-crossref[hidden] { display: none; }
.read-crossref-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; }
.read-crossref-close { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: inherit; }
.read-crossref-list { list-style: none; margin: 0; padding: 0; }
.read-crossref-item { padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.08); cursor: pointer; }
.read-crossref-item b { display: block; }
.read-crossref-item span { opacity: 0.85; }
.read-crossref-source { margin: 10px 0 0; font-size: 0.78rem; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════════════════
   가로 폰 성경 읽기 (2026-10-02 사용자 결정) — 화면 높이 ≤500px · 폭 ≤899px · 가로 방향
   문제(Flip6 가로 캡처): 본문이 3~4줄뿐이고 한 줄이 화면 폭 전부(약 1000px)라 읽기 어렵다. 아래 이동 막대·푸터와 위
   제목·역본 두 줄이 세로를 먹고, 오른쪽 색인 22칸은 칸 높이 6~8px 로 겹쳐 읽을 수 없다.
   ① 본문 두 단 — 한 장 안에 단 둘(read.js layout() 이 isLandscapePhone() 일 때 폭을 반으로 나누고 한 면 = 두 단).
   ② 이동 막대를 왼쪽 세로 띠로, 머리글(제목+역본)을 한 줄로 압축 — 세로 높이를 지면에 돌려준다.
   ③ 세로 색인은 끄고 가장자리 손잡이 하나 → 누르면 66권 격자 패널.
   ④ 몰입 — 본문을 한 번 탭하면 띠·머리글·손잡이가 숨고 종이만 남는다(read.js setImmersive, .is-immersive).
   ⚠️ 이 질의는 read.js LANDSCAPE_PHONE_MQ 와 같은 문자열이다. 세로 폰(≥ 높이)·PC 는 이 블록을 안 탄다.
   ⚠️ 이 블록은 파일 맨 끝에 둔다 — 위의 899px·560px 규칙과 명시도가 같아 뒤에 와야 이긴다. */

/* 손잡이·패널은 가로 폰이 아니면 없다 */
.read-index-handle, .read-index-panel { display: none !important; }

@media (max-width: 999px) and (max-height: 500px) and (orientation: landscape) {
  /* ── 틀: 가죽 테두리를 얇게, 바닥 띠는 정책 푸터 한 줄만(이동 막대가 옆으로 갔다) ── */
  /* 바닥 띠 없음 · 후원/설정 자리 · 정책 링크 · 네 모서리 — 달력과 같은 판단이라 book.css 끝 "가로 폰 공용" 블록 한 곳에 둔다 */
  /* 책은 화면 왼쪽 끝까지 깔고 띠는 그 위에 뜬다(2026-10-02 사용자: "네비바 밑은 성경이 채워졌으면, 세로 폰처럼").
     왼쪽 가장자리에는 가죽 한 줄(--cover-pad-left)을 남겨 세로 폰처럼 경계가 화면 끝에 보이게 한다 — 잘린 느낌을 줄인다.
     글은 띠 밑으로 들어가지 않는다: 본문 거터·머리글 왼쪽 여백을 --lp-strip(띠 오른쪽 끝 54px + 틈)만큼 둔다. */
  html[data-theme="book"] .container.read-book {
    --cover-pad: 8px;
    --cover-pad-left: 4px;
    margin: 6px 8px 6px 0 !important;
    max-width: none;
    padding-left: var(--cover-pad-left) !important;
  }
  html[data-theme="book"] .container.read-book::before { left: var(--cover-pad-left) !important; }
  html[data-theme="book"] .container.read-book::after { display: none; }   /* 가름끈 — 머리글 자리를 막는다 */

  /* ── ① 두 단 — 여백: 왼쪽 거터 · 오른쪽은 손잡이 자리만 ── */
  html[data-theme="book"] .read-book { --rp-gutter-1: calc(var(--lp-strip) - var(--cover-pad-left, 4px)); --rp-outer-1: 26px; --rp-folio-x: 26px; }

  /* ── ② 머리글 한 줄 — [제목 알약][역본 …] ── */
  html[data-theme="book"] :is(.container.read-book, .bc-peel-stage--read) .header.read-header {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 2px 8px 0 calc(var(--lp-strip) - var(--cover-pad-left, 4px)) !important;
    row-gap: 0;
  }
  html[data-theme="book"] .read-header > .month-title-container { flex: 0 0 auto; margin: 0; padding-left: 0 !important; }   /* 세로 폰의 거터 맞춤 여백 — 여기서는 머리글 왼쪽 여백이 이미 거터와 같다 */
  html[data-theme="book"] :is(.read-book, .bc-peel-stage--read) .read-ref.month-title {
    font-size: 15px !important;
    padding: 1px 9px;
    min-height: 0;
    line-height: 1.3;
  }
  html[data-theme="book"] .read-header > .read-versions {
    flex: 1 1 0;
    min-width: 0;
    grid-column: auto;
    align-self: center;
    margin: 0;
    padding-left: 0;
  }
  html[data-theme="book"] .read-versions > * { font-size: 11px; padding-top: 2px; padding-bottom: 2px; min-height: 0; line-height: 1.3; }
  html[data-theme="book"] .read-spread { margin-top: 3px; }
  html[data-theme="book"] .read-sheet { padding-top: 4px; }

  /* ── ② 이동 막대 → 왼쪽 세로 띠 ── */
  /* 왼쪽 띠·후원·설정·설정 카드 정책 링크의 자리는 book.css "가로 폰 공용" 블록(달력과 같은 선택자) */
  html[data-theme="book"] .read-book > .read-mobile-nav > * {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0 !important;
    padding: 2px !important;
    flex-direction: column;
    font-size: 10px !important;
    line-height: 1.15;
    gap: 1px;
    white-space: normal;
    text-align: center;
    word-break: keep-all;
    overflow: hidden;
  }
  html[data-theme="book"] .read-mobile-nav .read-record-label { max-width: 100%; white-space: normal; }
  /* 이전·다음 칸은 화살표만 — 띠가 좁다. 글자는 aria-label 이 맡는다 */
  html[data-theme="book"] .read-mobile-nav .read-turn > span:not([aria-hidden="true"]) { display: none; }
  html[data-theme="book"] .read-mobile-nav .read-turn > span[aria-hidden="true"] { font-size: 16px; }

  /* ── ③ 세로 색인 → 손잡이 + 격자 패널 ── */
  html[data-theme="book"] .read-book > .book-index { display: none !important; }
  html[data-theme="book"] .read-book > .read-index-handle {
    display: flex !important;
    position: absolute !important;
    z-index: 9984;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 64px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(164, 126, 63, 0.55);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(90deg, #3a2615, #52341c);
    color: #e9d4a1;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.35);
  }
  .read-book > .read-index-panel:not([hidden]) {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 9996;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: rgba(35, 24, 16, 0.55);
  }
  html[data-theme="book"] .read-index-card {
    width: min(100%, 720px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 8px 12px 10px;
    border-radius: 12px;
    background: var(--rp-paper, #f6ecd8);
    color: var(--rp-ink, #3a2a18);
    border: 1px solid rgba(164, 126, 63, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  html[data-theme="book"] .read-index-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 4px;
    font-family: var(--rp-serif);
    font-weight: 700;
    font-size: 14px;
  }
  html[data-theme="book"] .read-index-close {
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: inherit; font-size: 16px; cursor: pointer;
  }
  html[data-theme="book"] .read-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 3px;
    overflow-y: auto;
    min-height: 0;
  }
  html[data-theme="book"] .read-index-book {
    min-height: 0; height: 30px; padding: 0 2px; margin: 0;
    border: 0; border-radius: 6px;
    font: inherit; font-size: 13px; font-family: var(--rp-serif);
    color: #f3e6c4; cursor: pointer; white-space: nowrap;
    box-shadow: none !important;
  }
  html[data-theme="book"] .read-index-book.is-old-testament { background: var(--book-index-old, #243a5e); }
  html[data-theme="book"] .read-index-book.is-new-testament { background: var(--book-index-new, #7a2b2b); }
  html[data-theme="book"] .read-index-book[aria-current="true"] {
    outline: 2px solid #c9a24a; outline-offset: 1px; font-weight: 700;
  }

  /* ── ④ 몰입 — 종이만 ── */
  html[data-theme="book"] .container.read-book.is-immersive > .header.read-header,
  html[data-theme="book"] .container.read-book.is-immersive > .read-mobile-nav,
  html[data-theme="book"] .container.read-book.is-immersive > .read-index-handle { display: none !important; }
}

/* 읽기 화면 아래 줄 — 비로그인에는 기록 칸이 없어 셋([이전 면][달력으로][다음 면])이다(2026-10-13).
   넷을 가정한 `1fr auto auto 1fr` 가 그대로면 「달력으로」가 한쪽으로 쏠린다. 세로 띠(가로 폰)는 flex 라 영향이 없다. */
html .read-mobile-nav.read-mobile-nav--guest { grid-template-columns: 1fr auto 1fr !important; }