/* 성경 본문 읽기 화면 (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;

  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;
  --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);
}

/* 기본 테마에서는 본문이 놓일 흰 면이 필요하다(성경책은 종이가 이미 있다). */
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 {
  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; }   /* 달력 폰 막대와 같은 층(도크 아래) */

/* 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. */
html[data-theme="book"] .container.read-book .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 가 없는 폰에서도 보인다).
   ⚠️ base.html 이 모든 <button> 에 그림자(`button:not(.flat)`)와 hover 떠오름을 건다 — 그게 제목 둘레의
      상자였다(2026-09-06 사용자 지적). 마크업의 .flat 과 여기서 둘 다 끈다. */
.read-ref {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.read-ref,
.read-ref:hover,
.read-ref:active {
  box-shadow: none !important;
  transform: none;
  filter: none;
}
.read-ref::after {
  content: "\25BE";
  font-size: 0.5em;
  margin-left: 0.3em;
  vertical-align: 0.2em;
  opacity: 0.6;
}
@media (min-width: 900px) {
  /* 달력 펼침면의 월 제목(book.css `.page-right .month-title`)과 같은 값 */
  html[data-theme="book"] .read-book .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; }

/* 성경책 — 활자만 */
html[data-theme="book"] .read-versions { gap: 9px; }
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: 2px 1px 5px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none !important;
}
html[data-theme="book"] .read-version:hover { color: var(--rp-ink); 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% 100% / 100% 2px;
}
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); }

/* ── 폰(<900px) — 달력 폰처럼 머리글엔 제목만. 이동·달력으로·기록은 아래 막대(.mobile-month-nav)로 ── */
.mobile-month-nav { display: none; }
@media (max-width: 899px) {
  .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: calc(10px + env(safe-area-inset-bottom, 0px)); /* 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: inherit;
  }
}


/* 낮은 화면(가로로 눕힌 폰)에서는 머리글 여백을 줄인다 — 오른쪽은 가름끈 자리를 비운다 */
@media (max-height: 560px) {
  html[data-theme="book"] .container.read-book .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"] .read-book .read-ref.month-title { font-size: 20px !important; }
}

/* ── 지면 ────────────────────────────────────────────────
   펼침면에서는 종이가 두 장이다(.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 사용자: "실제라면 가운데 접힌 쪽에는 글자가 적혀 있지도 않다." 안여백(거터)이 바깥보다
   넓다 — 한 장(폰)도 왼쪽 변이 책등이다. 값은 토큰 한 곳(--rp-gutter-1/--rp-outer-1)에서만 조절한다.
   면당 절 수(창세기 1장 '중' 4면)를 넘지 않게 바깥을 좁게 둔다. */
html[data-theme="book"] .read-book { --rp-gutter-1: 22px; --rp-outer-1: 14px; }
/* 아래 여백은 폴리오(면 번호) 띠 — 한 장에도 폴리오 하나가 바깥(오른쪽) 아래 모서리에 온다(2026-09-06) */
html[data-theme="book"] .read-sheet { padding: 8px var(--rp-outer-1) 20px var(--rp-gutter-1); }

/* 면 번호 — 실물처럼 면마다 바깥 아래 모서리(왼쪽 면은 왼쪽, 오른쪽 면은 오른쪽). 면 수 표시는 이것뿐이다. */
.read-folio { display: none; }
html[data-theme="book"] .read-folio {
  display: block;
  position: absolute;
  bottom: 4px;
  right: 12px;
  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 로 따로 그렸는데 머리글·아래 줄 구간엔 책등이 없어 한 장 판처럼 보였다 — 걷었다. */
@media (min-width: 900px) {
  /* 지면 안쪽 모서리에 옅은 그늘 — 종이가 책등으로 휘어 들어간다 */
  html[data-theme="book"] .read-sheet--left {
    box-shadow: inset -14px 0 16px -16px rgba(70, 45, 20, 0.38);
  }
  html[data-theme="book"] .read-sheet--right {
    box-shadow: inset 14px 0 16px -16px rgba(70, 45, 20, 0.38);
  }
}

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

  /* 바깥 여백은 색인 폭 + 숨 쉴 틈. 두 면이 거울 대칭이라야 접힘선이 표지 가운데에 온다(PC 검수 #8).
     ⭐ 2026-09-06 사용자: "가운데 접힌 쪽에는 글자가 적혀 있지도 않다" — 실물은 책등 쪽 안여백(거터)이
        접힘 때문에 바깥보다 넓다. 예전엔 바깥 77 / 안 22 로 거꾸로였다. 안여백 ≥ 56px(책등 그늘 시작까지),
        바깥은 색인이 파인 폭만큼만. 색인 폭을 조금 줄여 바깥 < 안 이 되게 했다. */
  html[data-theme="book"] .read-book {
    --rp-index-w: clamp(44px, 4vw, 52px);
    --rp-outer: calc(var(--rp-index-w) + 8px);
    --rp-gutter: 62px;
  }
  html[data-theme="book"] .read-sheet--left  { padding: 14px var(--rp-gutter) 26px var(--rp-outer); }
  html[data-theme="book"] .read-sheet--right { padding: 14px var(--rp-outer) 26px var(--rp-gutter); }

  html[data-theme="book"] .read-folio { bottom: 6px; }
  html[data-theme="book"] .read-sheet--left  .read-folio { left: 16px; right: auto; }
  html[data-theme="book"] .read-sheet--right .read-folio { right: 16px; }
}

/* ── 글자 크기 (도크의 '글자 크기' 막대가 고른다, 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) */

.read-verse-num {
  color: var(--rp-num);
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: 0.35em;
  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)은 숨긴다(사용자 결정 대기). book.css 의 display:grid !important 보다 세야 한다. */
.book-index,
html[data-theme="book"] .read-book > .book-index { display: none !important; }

@media (min-width: 900px) {
  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: clamp(16px, 2.6vw, 34px);
    bottom: clamp(78px, 10vh, 120px);
    width: var(--rp-index-w, clamp(44px, 4vw, 52px));
    /* 구약 13묶음 · 금박 줄 · 신약 9묶음 */
    grid-template-rows: repeat(13, minmax(0, 1fr)) 6px repeat(9, 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;
  }

  html[data-theme="book"] .book-index-sep {
    align-self: center;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(176, 138, 60, 0.9), rgba(176, 138, 60, 0.5));
  }
}

/* 색인 자리를 펼침면 바깥(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) {
  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; }
}