/* ── themes/book.css ── */
/* ============================================================
   테마: 성경책 (id=book) — 달력을 펼친 성경책 안에 그린다.

   ⭐ **이 파일의 모든 규칙은 `html[data-theme="book"]` 아래에 있어야 한다.**
      스코프를 벗어나면 다른 테마를 오염시킨다. 테마는 서로를 몰라야 한다.
   ⭐ 수치는 화면 크기 대비 비율(clamp/vw/%)로 잡는다 — 특정 기기 px 고정 금지.
   ⚠️ 이 파일은 calendar.css 를 **덮어쓰는 층**이다. 원본은 건드리지 않는다.
      테마를 '기본'으로 바꾸면 이 파일의 규칙이 통째로 꺼진다.
   ============================================================ */

html[data-theme="book"] {
  --paper:      #f3e9d6;
  --paper-back: #e9dcc2;
  --ink:        #2e2620;
  /* ⚠️ --ink-soft 는 원래 #8a7659 였다 — 종이(#f3e9d6) 대비 3.5:1 로 본문에 못 쓴다(WCAG AA 4.5:1).
     요일·보조 글자가 전부 이 값이라 "예쁜데 안 읽힌다"의 주범이었다(2026-08-21 검수).
     #6b573c = 5.7:1. 분위기(세피아)는 그대로 두고 명도만 내렸다. */
  --ink-soft:   #6b573c;
  /* 표 머리(요일)처럼 작고 굵은 글자용 — 7.0:1 */
  --ink-head:   #5c4a2e;
  --leather:    #4a2f1e;
  --leather2:   #33200f;
  --gilt:       #b08a3c;
  --ribbon:     #8e2b2b;
  --rule:       rgba(120, 90, 45, 0.16);
  --rule-strong:rgba(120, 90, 45, 0.34);
  --mark:       rgba(176, 138, 60, 0.5);

  /* ── 활자 ────────────────────────────────────────────────
     ⚠️ 예전엔 시스템 글꼴에만 기댔다(`"Nanum Myeongjo", "Batang", …`).
        **리눅스에는 그 셋이 다 없어서** 밋밋한 기본 serif 로 떨어졌다.
        이제 themes.py 가 웹폰트를 실어 준다(EB Garamond · 나눔명조 · 송명조).
     ⭐ 라틴·숫자를 **앞에** 둔다 — 한글은 EB Garamond 에 없으므로 자동으로
        나눔명조가 받는다. 달력은 숫자가 주인공이라 이 순서가 중요하다.
     ⚠️ 이름을 바꾸면 themes.py 의 폰트 주소도 같이 고칠 것. 한쪽만 바꾸면
        조용히 시스템 글꼴로 떨어진다(오류도 경고도 안 난다). */
  --serif:         "EB Garamond", "Nanum Myeongjo", "Batang", "AppleMyungjo", serif;
  /* 제목용 — 송명조는 붓에서 온 획이라 본문보다 훨씬 고서에 가깝다. 굵기가 400 한 벌뿐이라
     bold 를 주면 브라우저가 가짜 굵기를 만든다(획이 뭉갠다) → 쓰는 곳마다 400 으로 못 박는다. */
  --serif-display: "EB Garamond", "Song Myung", "Nanum Myeongjo", "Batang", serif;
}

/* ── 책상 ─────────────────────────────────────────────── */
html[data-theme="book"] body {
  background:
    radial-gradient(120% 90% at 50% 0%, #4a3a2c 0%, transparent 60%),
    linear-gradient(160deg, #2e2118 0%, #1c1410 100%) !important;
  color: var(--ink);
  font-family: var(--serif);
}

/* ── 책 (가죽 표지 + 속지) ────────────────────────────── */
html[data-theme="book"] .container {
  position: relative;
  max-width: min(96vw, 1180px);
  margin: clamp(12px, 3vh, 40px) auto;
  padding: clamp(16px, 2.6vw, 34px);
  background: linear-gradient(152deg, var(--leather) 0%, var(--leather2) 100%);
  border-radius: clamp(6px, 0.9vw, 14px);
  box-shadow:
    0 clamp(10px, 2vh, 26px) clamp(20px, 4vh, 60px) rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* calendar.css 의 backdrop-filter 는 fixed 자식의 containing block 을 이 책으로 바꾼다.
     모바일 월 도크가 화면 바닥이 아니라 책 내용 아래(y=882)에 생긴 원인이라 걷는다.
     가죽 바탕은 불투명하므로 시각적으로 잃는 흐림은 없다. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 속지 — 책등 그늘과 종이 결 */
html[data-theme="book"] .container::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 2.6vw, 34px);
  border-radius: clamp(3px, 0.4vw, 6px);
  background:
    linear-gradient(90deg, rgba(70, 45, 20, 0.18) 0%, rgba(70, 45, 20, 0.05) 4%, transparent 9%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 2px, transparent 2px 4px),
    var(--paper);
  box-shadow: inset 0 0 clamp(20px, 3vw, 50px) rgba(120, 96, 60, 0.18);
  pointer-events: none;
}
html[data-theme="book"] .container > * { position: relative; z-index: 1; }

/* 가름끈 — 책 위에서 내려온다 */
html[data-theme="book"] .container::after {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(10px, 2vh, 22px));
  right: clamp(28px, 6vw, 80px);
  width: clamp(10px, 1.6vw, 18px);
  height: clamp(70px, 12vh, 130px);
  background: linear-gradient(180deg, var(--ribbon) 0%, #6d1f1f 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 0;
  pointer-events: none;
}

/* ── 머리말 ───────────────────────────────────────────── */
html[data-theme="book"] .header {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: clamp(10px, 2.2vh, 26px) clamp(8px, 2vw, 28px) clamp(6px, 1.2vh, 14px);
}
html[data-theme="book"] .month-title {
  font-family: var(--serif);
  /* ⚠️ 원본이 그라데이션을 글자에 넣고 -webkit-text-fill-color:transparent 로 비운다.
     그래서 color 만 바꾸면 **아무 일도 안 일어난다.** 셋을 다 되돌려야 한다. */
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  font-size: clamp(20px, 3.4vw, 32px) !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
html[data-theme="book"] .month-title-container { min-width: max-content; }
/* 금박 밑줄 */
html[data-theme="book"] .month-title-container::after {
  content: "";
  display: block;
  height: 2px;
  margin: clamp(4px, 0.8vh, 10px) auto 0;
  width: clamp(60px, 22%, 180px);
  background: linear-gradient(90deg, transparent, var(--gilt), transparent);
}
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link {
  background: none !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  border-radius: 999px !important;
  box-shadow: none !important;
}
html[data-theme="book"] .nav-btn:hover,
html[data-theme="book"] .today-link:hover { background: rgba(184, 145, 47, 0.12) !important; }

/* ── 달력 — 괘선만 남긴다 ─────────────────────────────── */
html[data-theme="book"] .calendar-table {
  background: none !important;
  border-collapse: collapse !important;
  box-shadow: none !important;
}
html[data-theme="book"] .calendar-table th {
  background: none !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  font-weight: 600;
  border: none !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  padding-bottom: clamp(4px, 0.8vh, 10px) !important;
}
html[data-theme="book"] .calendar-table td {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  vertical-align: top;
}
html[data-theme="book"] .calendar-table td.empty-day { border-bottom-color: transparent !important; }

/* ⭐ 펼침면(PC)에서 칸이 허전하던 것 — 괘선 위에 글자를 앉힌다.
   책을 펼치면 달력이 지면의 절반만 쓰므로 칸이 63x100 짜리 **세로로 긴 빈 상자**가 되고,
   calendar.css 의 height:100px 은 154px 폭 칸을 전제로 만든 값이라 숫자가 상자 맨 위에
   붙고 아래로 70px 이 죽는다. 실측: 칸 63x100 · 숫자 19px · 아래 여백 ~64px(2026-08-27).
   ⚠️ 칸을 줄이는 쪽은 못 쓴다 — 지면 높이(940px)는 왼쪽 면이 정하므로, 줄이면 빈자리가
      칸 안에서 **지면 아래로 옮겨갈 뿐**이다(74px 로 줄여 재봤더니 표만 657→441 로 줄고
      container 940 · scrollH 1068 은 그대로였다).
   그래서 높이는 그대로 두고 **글자를 괘선 한가운데에 앉힌다** —
   빈 상자가 아니라 줄 쳐진 장부로 읽힌다. 폭이 좁은 화면은 손대지 않는다.
   ⚠️ 글자 크기는 여기서 건드리지 않는다. `.day-number` 의 font-size 는 이 파일 700줄쯤에서
      !important 로 이미 정해져 있어서(clamp(14px,3.1vw,19px)) 여기 한 줄을 더 두면
      **먹지도 않으면서 규칙만 네 벌**이 된다(핸드북 0절 — 규칙 수를 줄여서 통일을 지킨다).
      실제로 21px 로 키워 봤지만 계산값은 19px 그대로였다(2026-08-27 실측). */
@media (min-width: 900px) {
  html[data-theme="book"] .page-right .calendar-table td { vertical-align: middle; }
}

/* 날짜 숫자 — calendar.css 가 안쪽 요소에 색을 걸어 두므로 여기까지 내려가야 이긴다 */
html[data-theme="book"] .day-number {
  color: var(--ink) !important;
  background: none !important;
  font-family: var(--serif);
  font-weight: 600;
}
/* 오늘 — 손으로 두른 동그라미.
   ⚠️ 칸 가운데에 그리면 안 된다. 날짜 숫자는 칸 **왼쪽 위**에 있어서 동그라미만 따로 논다
      (2026-08-20 실제로 그랬다). 숫자 자체에 두른다 — 숫자가 어디로 가든 따라간다. */
html[data-theme="book"] .today .day-number {
  color: var(--ribbon) !important;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border: 1.6px solid rgba(142, 43, 43, 0.5);
  border-radius: 50%;
  transform: rotate(-4deg);
  background: none !important;
}
/* 읽은 날 — 형광펜 자국(칸 전체를 칠하지 않는다) */
html[data-theme="book"] .calendar-table td.day-with-reading { background: none !important; }
html[data-theme="book"] .day-with-reading .day-number {
  background: linear-gradient(180deg, transparent 55%, var(--mark) 55%) !important;
  padding: 0 0.18em;
  color: var(--ink) !important;
}
html[data-theme="book"] .day-chapters-badge {
  background: rgba(200, 137, 47, 0.2) !important;
  color: var(--ink-soft) !important;
  border: none !important;
  font-family: var(--serif);
}
html[data-theme="book"] .reading-item,
html[data-theme="book"] .verse-abbr,
html[data-theme="book"] .verse-full,
html[data-theme="book"] .verse-range {
  color: var(--ink-soft) !important;
  font-family: var(--serif);
}

/* ── 범례·통계·버튼 — 종이 톤으로 ─────────────────────── */
html[data-theme="book"] .legend,
html[data-theme="book"] .legend-item,
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .stats-section,
html[data-theme="book"] .stat-card,
html[data-theme="book"] .goal-section {
  background: rgba(255, 253, 246, 0.72) !important;
  border: 1px solid rgba(120, 96, 60, 0.22) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}
html[data-theme="book"] .legend-item span,
html[data-theme="book"] .stats-section *,
html[data-theme="book"] .monthly-stats-section * { color: var(--ink) !important; }

html[data-theme="book"] [class*="goal"],
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .submit-btn {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  font-family: var(--serif);
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ── 광고 — 책 사이에 끼운 쪽지 ───────────────────────
   규격을 바꾸려면 --ad-w/--ad-h 두 줄만 고친다(애드핏 광고 단위 크기와 맞출 것). */
html[data-theme="book"] .ad-banner {
  /* 애드핏 승인 규격 = 320×50 (2026-08-20 확인).
     규격을 바꾸면 여기 두 줄과 index.html 의 data-ad-width/height 를 함께 고친다. */
  --ad-w: 320px;
  --ad-h: 50px;
  width: min(100%, var(--ad-w));
  min-height: var(--ad-h);
  margin: clamp(10px, 2vh, 22px) auto !important;
  padding: 6px;
  background: #fffdf6;
  border: 1px solid rgba(120, 96, 60, 0.3);
  border-radius: 2px;
  transform: rotate(-0.5deg);
  box-shadow: 0 2px 6px rgba(60, 44, 26, 0.18), 0 0 0 6px rgba(246, 239, 226, 0.6);
}
html[data-theme="book"] .ad-notice {
  font-family: var(--serif);
  color: var(--ink-soft) !important;
  font-size: clamp(10px, 1.5vw, 12px);
  text-align: center;
}

/* ── 좁은 화면: 펼침이 아니라 한 장 ───────────────────── */
@media (max-width: 700px) {
  html[data-theme="book"] .container::after { right: clamp(14px, 5vw, 28px); }
}

/* 남은 원본 강조색 — 그라데이션을 쓰는 것들을 종이 톤으로 눕힌다.
   ⚠️ 클래스가 제각각이라 배경 이미지를 쓰는 것을 넓게 잡는다. 스코프 안이라 다른 테마엔 영향 없다. */
html[data-theme="book"] .container [style*="linear-gradient"],
html[data-theme="book"] .stat-progress,
html[data-theme="book"] .progress-bar {
  background-image: none !important;
}
html[data-theme="book"] .legend-item .legend-color { border: 1px solid rgba(120,96,60,.35); }

/* ── 난외주(欄外註) — 그 달 읽은 곳 ───────────────────
   성경에서 각주·관주가 놓이는 자리. 날짜 칸에 구절까지 넣으면 표가 되므로 여기로 옮겼다. */
html[data-theme="book"] .margin-note {
  margin: clamp(8px, 1.6vh, 16px) clamp(4px, 1vw, 14px) 0;
  padding-top: clamp(6px, 1.2vh, 12px);
  border-top: 1px solid var(--rule-strong);
  font-family: var(--serif);
  color: var(--ink-soft);
  font-size: clamp(11px, 1.7vw, 13px);
  line-height: 1.9;
}
html[data-theme="book"] .margin-note-title {
  font-size: clamp(10px, 1.5vw, 12px);
  letter-spacing: 0.1em;
  color: var(--gilt);
  font-weight: 700;
  margin-bottom: 2px;
}
html[data-theme="book"] .mn-entry { margin-right: 0.9em; white-space: nowrap; }
html[data-theme="book"] .mn-entry b { color: var(--ink); font-weight: 600; margin-right: 0.15em; }
html[data-theme="book"] .margin-note-empty { color: var(--ink-soft); }

/* 난외주로 옮겼으니 날짜 칸의 구절 글자는 숨긴다 — 장수 뱃지는 남긴다 */
html[data-theme="book"] .day-content .reading-item { display: none; }

/* ⭐ 펼침면(PC)에서는 **축약형만** 칸에 되살린다 (2026-08-27 사용자 결정).
   구절을 통째로 감춘 탓에 칸에 숫자밖에 없어 "기본 테마가 훨씬 읽기 편하다"는 검수를 받았다.
   난외주(전체 표기)는 그대로 두고, 칸에는 "오늘 뭘 읽었나"만 짧게 얹는다.
   ⚠️ 약어는 새로 만들지 않는다 — `bible_parser.abbreviate()` 가 만들어 템플릿이 이미
      `.verse-abbr` 로 그려 두었다(난외주가 쓰는 것과 **같은 문자열**이다). 여기서는
      calendar.css 가 넓은 화면에서 켜 두는 `.verse-full` 을 끄고 축약형으로 바꾸기만 한다.
   ⚠️ 칸 폭은 63px 그대로다. 넘치는 것은 `.verse-range` 가 이미 가진
      `overflow:hidden + text-overflow:ellipsis` 가 받는다 — 글자가 칸 밖으로 나가지 않는다.
   ⚠️ 폰·기본 테마는 손대지 않는다(`.page-right` 는 펼침면에만 있다). */
@media (min-width: 900px) {
  /* ⚠️ **한 건만** 보인다. 칸 안에서 글자가 놓일 자리는 32px 뿐이라(행 100px − 안쪽여백 16px
        − 머리(날짜+뱃지) 52px), 한 줄 21px 은 들어가지만 두 줄 46px 은 넘친다 —
        실측으로 행이 100→118→143→168px 로 자라 **달마다 책 높이가 달라졌다**(고친 지 얼마 안 된
        결함이 되살아난다). 그래서 칸은 첫 건만 맡고, 나머지는 난외주와 날짜 모달이 맡는다. */
  html[data-theme="book"] .page-right .day-content .reading-item { display: none; }
  html[data-theme="book"] .page-right .day-content .reading-item:first-child { display: block; }
  /* 가려진 것이 있으면 그렇다고 말해 준다 — 마크업을 안 늘리고 형제 유무로만 판단한다 */
  html[data-theme="book"] .page-right .day-content .reading-item:first-child:not(:last-child) .verse-range::after {
    content: " 외";
  }
  html[data-theme="book"] .page-right .verse-full { display: none; }
  html[data-theme="book"] .page-right .verse-abbr { display: inline; }
  /* ⚠️ 글자가 놓일 폭은 34px 밖에 없었다(칸 63 − td 여백 16 − .verse-range 여백 12).
        긴 이름("고전 15장")이 9px 넘쳤다. 글꼴을 줄이는 것보다 **여백을 줄이는 쪽이
        같은 값을 더 싸게 번다** — 좌우 여백 6→2px 로 8px 을 되찾는다. */
  html[data-theme="book"] .page-right .verse-range {
    font-size: clamp(9px, 0.78vw, 10px);
    padding: 1px 2px;
  }
}

/* 기본 테마에서는 난외주를 보이지 않는다 (원래 화면 그대로) */
html:not([data-theme="book"]) .margin-note { display: none; }

/* ============================================================
   다른 화면들 — 로그인·가입·릴리즈 노트도 같은 결로.
   ⚠️ 이 화면들은 .container 안에 카드가 하나 더 있는 구조다.
      책(가죽) 안에 카드가 또 뜨면 이중 액자가 되므로 카드 테두리를 눕힌다.
   ============================================================ */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ink);
  font-family: var(--serif);
}
html[data-theme="book"] .form-label,
html[data-theme="book"] .form-help { color: var(--ink-soft) !important; font-family: var(--serif); }
html[data-theme="book"] .form-input {
  background: rgba(255, 253, 246, 0.85) !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}
html[data-theme="book"] .form-input:focus {
  border-color: var(--gilt) !important;
  outline: 2px solid rgba(184, 145, 47, 0.35);
  outline-offset: 1px;
}
html[data-theme="book"] .back-btn {
  background: none !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}

/* 제목류 — 그라데이션 글자를 쓰는 것이 여럿이라 함께 되돌린다 */
html[data-theme="book"] h1,
html[data-theme="book"] h2,
html[data-theme="book"] h3 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  font-family: var(--serif);
}

/* 링크 */
html[data-theme="book"] a { color: #7a5c2e; }
html[data-theme="book"] a:hover { color: var(--ribbon); }

/* ── 튜토리얼 ────────────────────────────────────────
   ⭐ 위치는 손댈 것이 없다. 튜토리얼이 선택자(.month-title, .calendar-table …)로 요소를 잡고
      좌표를 그 요소에서 계산하므로, 테마가 배치를 바꿔도 **저절로 따라간다.**
      여기서 바꾸는 건 색뿐이다 — 원본이 보라(103,126,234)를 쓴다. */
html[data-theme="book"] .tutorial-modal,
html[data-theme="book"] .tutorial-tooltip,
html[data-theme="book"] .tutorial-popup {
  background: #fffdf6 !important;
  border: 1px solid rgba(120, 96, 60, 0.3) !important;
  box-shadow: 0 6px 20px rgba(60, 44, 26, 0.25) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
}
html[data-theme="book"] .tutorial-modal *,
html[data-theme="book"] .tutorial-tooltip * { font-family: var(--serif); }
html[data-theme="book"] #tutorialSpotlight {
  box-shadow: 0 0 0 3px rgba(184, 145, 47, 0.75), 0 0 0 9999px rgba(28, 20, 16, 0.55) !important;
  border-radius: 6px !important;
}
/* 다음/이전 버튼 */
html[data-theme="book"] .tutorial-btn,
html[data-theme="book"] [class*="tutorial"] button {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  font-family: var(--serif);
  box-shadow: none !important;
}
html[data-theme="book"] [class*="tutorial"] p,
html[data-theme="book"] [class*="tutorial"] span,
html[data-theme="book"] [class*="tutorial"] div { color: var(--ink) !important; }
html[data-theme="book"] [class*="tutorial"] .step,
html[data-theme="book"] [class*="tutorial"] [class*="count"] { color: var(--ink-soft) !important; }

/* ============================================================
   글자 크기·색 마무리 (2026-08-20 사용자 지적)
   ⚠️ 명조 계열은 같은 px 라도 고딕보다 넓게 잡힌다 — 원본 크기를 그대로 두면
      버튼 글자가 줄바뀜한다(실제로 "이전달"이 두 줄로 깨졌다).
   ============================================================ */
html[data-theme="book"] .nav-btn {
  font-size: clamp(11px, 1.9vw, 13px) !important;
  padding: clamp(5px, 1vw, 8px) clamp(8px, 1.6vw, 14px) !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  gap: 4px;
}
html[data-theme="book"] .nav-btn span { white-space: nowrap; }
html[data-theme="book"] .today-link {
  font-size: clamp(10px, 1.7vw, 12px) !important;
  padding: clamp(4px, 0.8vw, 7px) clamp(7px, 1.4vw, 12px) !important;
  white-space: nowrap !important;
}
html[data-theme="book"] .month-title {
  font-size: clamp(17px, 3vw, 28px) !important;
}
html[data-theme="book"] .calendar-table th { font-size: clamp(10px, 1.6vw, 13px) !important; }
html[data-theme="book"] .day-number { font-size: clamp(11px, 1.8vw, 14px) !important; }
html[data-theme="book"] .day-chapters-badge { font-size: clamp(8px, 1.3vw, 10px) !important; }

/* 범례 색칠 — 원본의 주황·파랑이 그대로 남아 있었다 */
html[data-theme="book"] .legend-item .legend-color,
html[data-theme="book"] .legend-color,
html[data-theme="book"] .legend-item > span:first-child {
  background: var(--mark) !important;
  border: 1px solid rgba(120, 96, 60, 0.4) !important;
  box-shadow: none !important;
}
html[data-theme="book"] .legend-item:last-child .legend-color,
html[data-theme="book"] .legend-item:last-child > span:first-child {
  background: rgba(142, 43, 43, 0.35) !important;
}

/* 배지·작은 버튼 글자도 명조로, 크기는 한 단계 내린다 */
html[data-theme="book"] .version-badge,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .goal-btn {
  font-size: clamp(10px, 1.6vw, 12px) !important;
  white-space: nowrap;
}
html[data-theme="book"] .legend,
html[data-theme="book"] .legend-item { font-size: clamp(11px, 1.7vw, 13px) !important; }

/* 통계 숫자·라벨 */
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .stats-section { font-size: clamp(11px, 1.7vw, 13px) !important; }

/* 진행 막대 — 원본 파랑/초록을 금박으로
   ⚠️ **채움만** 칠한다. `.progress-bar` 는 트랙(빈 홈)이고 `.progress-fill` 이 채움이다.
      둘 다 금박으로 칠했더니 "18장 · 6 읽은 날"인데도 막대가 **꽉 찬 것처럼** 읽혔다
      (2026-08-21 검수). 트랙은 종이에 눌린 빈 홈으로 남겨 둔다. */
html[data-theme="book"] [class*="progress"] > div {
  background: linear-gradient(90deg, var(--gilt), #d8b96a) !important;
}
html[data-theme="book"] .progress-bar,
html[data-theme="book"] .stat-progress {
  background: rgba(120, 96, 60, 0.16) !important;
  background-image: none !important;
}

/* ============================================================
   가독성 수리 (2026-08-21 사용자 검수)
   ⭐ 이 절의 원칙: **분위기는 지키되 읽히는 것이 먼저다.**
      색을 바꿀 땐 종이색(#f3e9d6) 대비 4.5:1 을 넘기는지 확인하고 값을 적는다.
   ============================================================ */

/* ── 1. 로그인·가입 화면 — 책이 아예 안 그려지고 있었다 ─────────
   ⚠️ 원인: 이 두 화면에는 `.container` 가 **없다**. base.html 이 <main> 안에
      `.login-container` 카드 하나만 넣는다. 그런데 이 파일은 책(가죽+속지)을
      `.container::before/::after` 로만 그리고, 카드는 `background: transparent` 로
      눕혀 놓았다 — 그래서 **어두운 책상 위에 잉크색 글자**만 남아 대비가 1:1 이었다.
   → 카드 자체를 속지로 만들고, 가죽 표지는 box-shadow 링으로 두른다
      (요소를 못 늘리므로 링이 가장 싸다). */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container {
  --cover: clamp(10px, 2.6vw, 22px);   /* 가죽 표지 두께 */
  background:
    linear-gradient(90deg, rgba(70, 45, 20, 0.16) 0%, rgba(70, 45, 20, 0.05) 5%, transparent 12%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 2px, transparent 2px 4px),
    var(--paper) !important;
  border: 1px solid rgba(184, 145, 47, 0.45) !important;
  border-radius: clamp(3px, 0.5vw, 6px) !important;
  /* 링이 화면 밖으로 잘리지 않도록 표지 두께보다 큰 여백을 둔다 */
  margin: clamp(14px, 3.4vw, 30px) !important;
  padding: clamp(20px, 4vw, 40px) !important;
  color: var(--ink) !important;
  backdrop-filter: none !important;
  box-shadow:
    0 0 0 var(--cover) var(--leather),
    0 0 0 calc(var(--cover) + 1px) rgba(0, 0, 0, 0.45),
    inset 0 0 clamp(20px, 3vw, 50px) rgba(120, 96, 60, 0.18),
    0 clamp(8px, 2vh, 22px) clamp(18px, 4vh, 50px) rgba(0, 0, 0, 0.55) !important;
}

/* 제목 — 원본이 보라 그라데이션을 글자에 부어 넣는다. 셋을 다 되돌려야 색이 먹는다. */
html[data-theme="book"] .login-title,
html[data-theme="book"] .register-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  font-family: var(--serif);
  font-size: clamp(21px, 4.4vw, 30px) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
html[data-theme="book"] .login-subtitle,
html[data-theme="book"] .register-subtitle {
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  font-size: clamp(13px, 2.4vw, 16px) !important;
}
/* 머리말 밑 금박 괘선 — 속표지처럼 */
html[data-theme="book"] .login-header,
html[data-theme="book"] .register-header {
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: clamp(8px, 1.6vh, 16px);
}

html[data-theme="book"] .form-input::placeholder { color: rgba(107, 87, 60, 0.75) !important; }
html[data-theme="book"] .form-label { color: var(--ink-head) !important; }
html[data-theme="book"] .form-help  { color: var(--ink-soft) !important; }

/* 안내줄 — "계정이 없으신가요?" 가 안 보이던 자리 */
html[data-theme="book"] .register-link,
html[data-theme="book"] .login-link {
  border-top: 1px solid var(--rule-strong) !important;
  color: var(--ink) !important;
}
html[data-theme="book"] .register-link p,
html[data-theme="book"] .login-link p {
  color: var(--ink) !important;
  font-family: var(--serif);
}
html[data-theme="book"] .register-link a,
html[data-theme="book"] .login-link a {
  color: #7a4a1e !important;          /* 종이 대비 6.2:1 */
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-theme="book"] .register-link a:hover,
html[data-theme="book"] .login-link a:hover { color: var(--ribbon) !important; }

/* 🔑 로그인 버튼 — 혼자 보라 그라데이션으로 남아 있었다.
   가죽색 바탕 + 크림 글자(10.4:1). 표지와 같은 재질이라 화면 안에서 겉돌지 않는다. */
html[data-theme="book"] .btn-primary,
html[data-theme="book"] .btn.btn-primary,
html[data-theme="book"] button.btn-primary {
  background: linear-gradient(180deg, #6b4a2a 0%, var(--leather) 100%) !important;
  color: #f6ecd8 !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--serif);
}
html[data-theme="book"] .btn-secondary {
  background: rgba(255, 253, 246, 0.55) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(120, 96, 60, 0.45) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--serif);
}

/* ── 2. 범례 줄 — 크림 속지 위의 흰 종이(#f8f9fa)를 걷어낸다 ──── */
html[data-theme="book"] .legend-container {
  background: none !important;
  background-color: transparent !important;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0 !important;
  padding: clamp(8px, 1.6vh, 14px) clamp(4px, 1vw, 12px) !important;
  gap: clamp(8px, 2vw, 20px) !important;
}
/* 범례 항목도 판을 깔지 않는다 — 속지 위에 바로 얹힌다 */
html[data-theme="book"] .legend,
html[data-theme="book"] .legend-item {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

/* ── 3. 남은 파랑/보라 ────────────────────────────────────── */
/* 푸터 링크(이용약관·개인정보처리방침·환불정책·고객센터) — rgb(102,126,234) 였다.
   ⚠️ 선택자가 `.business-info-line.policy-links a`(0,2,1) 라 이 파일의 `a` 규칙(0,1,2)으로는 못 이긴다. */
html[data-theme="book"] .business-info-compact {
  color: var(--ink-soft) !important;
  border-top-color: var(--rule-strong) !important;
  font-family: var(--serif);
}
html[data-theme="book"] .business-info-line,
html[data-theme="book"] .business-info-line span { color: var(--ink-soft) !important; }
html[data-theme="book"] .business-info-line.policy-links a { color: #7a4a1e !important; }
html[data-theme="book"] .business-info-line.policy-links a:hover { color: var(--ribbon) !important; }
html[data-theme="book"] .business-info-copyright { color: var(--ink-soft) !important; }

/* 도움말 ? 버튼 — tutorial.css 가 !important 로 보라를 박아 둬서 스코프로 눌러 이긴다.
   ⚠️ 옆의 .theme-switcher 는 건드리지 않는다(모든 테마에서 보여야 한다). */
html[data-theme="book"] .tutorial-help-button {
  background: rgba(243, 233, 214, 0.96) !important;
  color: var(--leather) !important;
  border: 1px solid rgba(120, 96, 60, 0.45) !important;
  box-shadow: 0 2px 8px rgba(28, 20, 16, 0.35) !important;
}
html[data-theme="book"] .tutorial-help-button:hover {
  background: #fffdf6 !important;
  box-shadow: 0 5px 16px rgba(28, 20, 16, 0.4) !important;
}

/* 한/영 버튼 — 밑줄·활성 배경이 보라였다 */
html[data-theme="book"] .language-switcher {
  background: rgba(243, 233, 214, 0.96) !important;
  border: 1px solid rgba(120, 96, 60, 0.35) !important;
  box-shadow: 0 2px 10px rgba(28, 20, 16, 0.35) !important;
}
/* 선택 표시는 테마 줄과 같은 가죽 채움 — 카드 안 세 줄이 한 언어를 쓴다(핸드북 0절) */
html[data-theme="book"] { --control-on-bg: var(--leather); --control-on-fg: #f3e9d6; }
/* 도크 막대(읽기 화면 '글자 크기') — 트랙은 괘선색, 채움은 금박, 값은 잉크(2026-09-06 검수 #9) */
html[data-theme="book"] { --dock-range-track: rgba(120, 90, 45, 0.22); --dock-range-fill: var(--gilt); --dock-range-ink: var(--ink); }
html[data-theme="book"] .lang-btn { font-family: var(--serif) !important; }

/* 튜토리얼 강조 테두리 — 보라 3px 가 남아 있었다(스포트라이트 그림자만 금박이었다) */
html[data-theme="book"] .tutorial-spotlight,
html[data-theme="book"] #tutorialSpotlight {
  border-color: rgba(184, 145, 47, 0.95) !important;
}
html[data-theme="book"] .tutorial-text { color: var(--ink) !important; }

/* ── 4. 작은 알약 버튼 — 글자가 잘리고, 흰 글자가 크림 위에 있었다 ──
   ⚠️ 원인 둘. (a) calendar.css 가 좁은 화면에서 `height: 32/36/40px` 을 **고정**하는데
      명조는 같은 px 라도 넓어서 두 줄이 되고 위아래가 깎였다.
      (b) 안쪽 span(.version-number/.update-date/.auth-text)이 `color: white` 라
      크림 바탕 위에서 사라졌다 — 바깥 색만 바꿔서는 안 보인다. */
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge {
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(5px, 1.1vw, 9px) clamp(9px, 1.8vw, 15px) !important;
  line-height: 1.4 !important;
  font-size: clamp(11px, 1.8vw, 13px) !important;
  gap: clamp(3px, 0.8vw, 8px) !important;
  border-radius: 999px !important;
  align-items: center !important;
}
html[data-theme="book"] .version-number,
html[data-theme="book"] .update-date,
html[data-theme="book"] .auth-text,
html[data-theme="book"] .auth-icon,
html[data-theme="book"] .admin-text,
html[data-theme="book"] .admin-icon {
  color: var(--ink) !important;
  background: none !important;
  text-shadow: none !important;
  font-size: inherit !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  font-family: var(--serif);
}
/* 판번호는 금박 칩으로 남겨 둔다 — 날짜와 구분이 필요하다 */
html[data-theme="book"] .version-number {
  background: rgba(176, 138, 60, 0.22) !important;
  padding: 1px clamp(5px, 1.1vw, 8px) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
/* 로그아웃 칩 — 원본은 빨강 그라데이션. 가름끈 색으로 눕힌다 */
html[data-theme="book"] .auth-action {
  background: rgba(142, 43, 43, 0.16) !important;
  color: var(--ribbon) !important;
  text-shadow: none !important;
  font-size: inherit !important;
  line-height: 1.4 !important;
  padding: 1px clamp(5px, 1.1vw, 8px) !important;
  border-radius: 999px !important;
  font-family: var(--serif);
}

/* ── 5. 요일 글자 — 3.5:1 이라 옅었다 → 7.0:1 ─────────────── */
html[data-theme="book"] .calendar-table th {
  color: var(--ink-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  font-size: clamp(12px, 2.2vw, 15px) !important;
}

/* ── 6. 가독성 전반 ───────────────────────────────────────
   기본 테마의 날짜는 18px 인데 여기는 11~14px 이었다. 명조는 같은 px 에서
   고딕보다 작아 보이므로 오히려 **기본보다 크게** 잡아야 비슷하게 읽힌다. */
html[data-theme="book"] .day-number {
  font-size: clamp(14px, 3.1vw, 19px) !important;
  width: auto !important;
  height: auto !important;
  min-width: 1.5em;
  line-height: 1.5 !important;
  color: #241d17 !important;   /* 종이 대비 13:1 */
  font-weight: 700 !important;
}
/* 오늘 동그라미는 위에서 width/height 를 auto 로 눕혔으니 여기서 되살린다 */
html[data-theme="book"] .today .day-number {
  width: 1.85em !important;
  height: 1.85em !important;
  min-width: 0 !important;
  border-width: 2px !important;
  border-color: rgba(142, 43, 43, 0.75) !important;
  line-height: 1 !important;
}
/* 읽은 날 형광펜 — 숫자가 커진 만큼 자국도 같이 키운다 */
html[data-theme="book"] .day-with-reading .day-number { padding: 0 0.22em !important; }

/* 통계 상자 — 원본 회색(#374151 / #6b7280)이 남아 있었다 */
html[data-theme="book"] .stats-container,
html[data-theme="book"] .stat-box { color: var(--ink) !important; font-family: var(--serif); }
html[data-theme="book"] .stat-box {
  background: rgba(255, 253, 246, 0.72) !important;
  border: 1px solid rgba(120, 96, 60, 0.22) !important;
  box-shadow: none !important;
}
html[data-theme="book"] .stat-title { color: var(--ink) !important; font-weight: 700 !important; }
html[data-theme="book"] .stat-details,
html[data-theme="book"] .stat-details * { color: var(--ink-soft) !important; }
html[data-theme="book"] .stats-container * { font-family: var(--serif); }

/* 머리말이 가름끈보다 앞에 와야 한다 — 안 그러면 '다음달' 버튼을 끈이 덮는다.
   ⚠️ z-index 만으로는 안 됐다. 이동 버튼이 `background: none` 이라 **투명해서**
      뒤의 가름끈이 글자 뒤로 비쳤다(대비 붕괴). 옅은 종이 바탕을 깔아 끈을 가린다. */
html[data-theme="book"] .header { position: relative; z-index: 2; }
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link {
  background: rgba(255, 253, 246, 0.62) !important;
  color: var(--ink-head) !important;
}
html[data-theme="book"] .nav-btn:hover,
html[data-theme="book"] .today-link:hover { background: rgba(232, 214, 176, 0.9) !important; }

/* ============================================================
   펼침면 — 넓은 화면에서 좌우 두 지면으로 가른다 (2026-08-21)
   ⭐ 시안 4차 「PC·태블릿 — 펼침」 그대로:
      **왼쪽 지면이 그달 읽은 기록, 오른쪽이 달력.**
   ⚠️ 900px 은 base.html 의 .book-spine 이 나타나는 폭과 **같아야 한다.**
      한쪽만 바꾸면 선은 있는데 지면이 안 갈리거나 그 반대가 되어,
      접힘선이 달력 한가운데를 세로로 관통한다(고치기 전이 그랬다).
   ⚠️ column-gap 과 .book-spine 의 width 도 같은 값이라야 선이 두 지면 사이에 앉는다.
   ============================================================ */
@media (min-width: 900px) {
  /* ⚠️ `:has(> .page)` 가 **꼭 있어야 한다.** `.container` 는 달력 화면만의 것이 아니다 —
        릴리즈 노트 화면도 같은 클래스를 쓰는데 거기엔 지면(.page)이 없다. 조건 없이 걸었더니
        뒤로가기 상자·제목·판번호가 두 열로 흩어지고 제목이 "업데이/트 내역"으로 접혔다
        (2026-08-21 캡처). 지면이 있는 컨테이너에서만 펼친다. */
  html[data-theme="book"] .container:has(> .page) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(30px, 4.4vw, 64px);   /* = .book-spine 의 width */
    /* ⚠️ start 로 두면 지면 높이가 제 내용만큼이라 왼쪽이 짧게 끝난다 —
          판권지(사업자 정보)의 margin-top:auto 가 먹지 않아 통계에 붙어 버렸다.
          두 지면 키를 맞춰야 펼친 책처럼 보이고 아래쪽 것이 바닥에 앉는다. */
    align-items: stretch;
  }
  html[data-theme="book"] .page {
    display: flex;
    flex-direction: column;
    min-width: 0;            /* 표가 제 열을 밀어내지 못하게 */
  }
  /* DOM 은 달력(오른쪽)이 먼저다 — order 로 지면 순서를 바로잡는다 */
  html[data-theme="book"] .page-left  { grid-column: 1; order: 1; }
  html[data-theme="book"] .page-right { grid-column: 2; order: 2; }

  /* 두 지면 밖 — 펼침면 위·아래로 전체 폭을 쓴다 */
  html[data-theme="book"] .container > #successMessage {
    grid-column: 1 / -1; order: 0;
  }
  /* ⚠️ 사업자 정보는 이제 .page-left 안에 있다 — 그리드 아이템이 아니다.
        전체 폭에 걸쳐 두었더니 책등이 글자 한가운데를 관통했다(2026-08-21).
        왼쪽 지면 맨 아래에 작게 붙인다 — 책의 판권지 자리다. */
  html[data-theme="book"] .page-left > .business-info-compact {
    margin-top: auto;              /* 지면이 짧아도 바닥에 붙는다 */
    padding-top: clamp(12px, 2vh, 22px);
    border-top: 1px solid var(--rule);
  }

  /* 왼쪽 지면은 오른쪽(달력)보다 글이 성기다 — 위쪽에 붙여 두면 허전하지 않다 */
  html[data-theme="book"] .page-left > .margin-note { margin-top: 0; }
}

/* 성구 — 지면마다 한 줄. 시안의 VERSES 자리다. */
html[data-theme="book"] .page-verse {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  font-size: clamp(11px, 1.5vw, 13.5px);
  line-height: 1.7;
  /* ⚠️ 한국어는 기본이 **글자 단위** 줄바꿈이라 성경 책 이름이 잘렸다
        ("…묵상하여 · 여/호수아 1:8"). keep-all 이라야 낱말째로 넘어간다.
        단 keep-all 만 두면 긴 낱말이 상자를 삐져나가므로 break-word 를 같이 준다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: clamp(10px, 2vh, 20px) 0;
  padding: 0 clamp(8px, 2vw, 20px);
}
/* 기본 테마에는 없던 것이다 — 흔적도 남기지 않는다 */
html:not([data-theme="book"]) .page-verse { display: none !important; }

/* ⚠️ 속지(.container::before)보다 위로 올리는 규칙은 `.container > *` 로 걸려 있다.
      지면 래퍼가 생기면서 그 안쪽 요소들은 **더 이상 .container 의 직계가 아니다** —
      래퍼가 display:contents 인 좁은 화면·기본 테마에서는 래퍼 자신도 박스를 안 만들어
      z-index 가 무효가 된다. 그래서 안쪽 요소에 같은 규칙을 한 번 더 건다.
      (안 걸면 난외주·통계·광고가 속지 밑으로 숨는다) */
html[data-theme="book"] .page > * { position: relative; z-index: 1; }

/* ── 왼쪽 지면 안쪽 — 열이 절반이 되면 가로로 늘어선 것들이 깨진다 ──────
   ⚠️ 한 줄이던 것들이 열 폭 안에서 글자 단위로 접혔다:
      "이번 달 통/계", "성경 읽은/날", "오/늘"(2026-08-21 펼침면 첫 캡처).
      폭을 못 늘리므로 **세로로 세워** 각자 제 줄을 갖게 한다. */
@media (min-width: 900px) {
  html[data-theme="book"] .page-left .stats-container {
    display: flex !important;
    flex-direction: column;
    gap: clamp(10px, 1.6vh, 18px);
  }
  html[data-theme="book"] .page-left .legend-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
  }
  html[data-theme="book"] .page-left .legend { flex-wrap: wrap; }
  /* 낱말이 글자 단위로 쪼개지지 않게 — 못 들어가면 통째로 다음 줄에 간다 */
  html[data-theme="book"] .page-left .legend-item span,
  html[data-theme="book"] .page-left .stat-title,
  html[data-theme="book"] .page-left .stat-details span { white-space: nowrap; }
}

/* 오른쪽 지면 머리말 — 열이 절반이라 제목이 버튼에 닿는다.
   ⚠️ 제목 크기가 3.4vw 라 **화면 폭**을 따라 커지는데, 펼침면에서 제목이 앉는 곳은
      화면이 아니라 **절반 열**이다. 그래서 열 기준으로 다시 잡는다. */
@media (min-width: 900px) {
  /* ⚠️ flex-wrap 으로 두었더니 제목이 한 글자 길어지는 달(9월)에 **"다음달 ▶"이
        아래 줄로 떨어졌다.** 3열 격자로 못 박아 무슨 달이든 한 줄을 지킨다.
        (가운데 1fr 이 남는 폭을 다 먹으므로 양쪽 버튼은 항상 끝에 붙는다) */
  html[data-theme="book"] .page-right .header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(4px, 0.8vw, 12px);
    flex-wrap: nowrap;
  }
  /* 제목+"이번달로" 묶음이 max-content 라 안 줄어든다 — 펼침면에서는 풀어 준다 */
  html[data-theme="book"] .page-right .month-title-container {
    min-width: 0;
    justify-self: center;
  }
  html[data-theme="book"] .page-right .month-title {
    font-size: clamp(16px, 1.8vw, 23px) !important;
  }
}

/* ============================================================
   책장 넘김 (2026-08-21) — 지면을 **띠로 복제해** 원기둥에 감는다.
   ⭐ 띠 안에 든 것은 진짜 DOM 복제다. 베낀 그림이 아니라 **화면 그 자체**라
      글자 크기·자리·밑줄이 어긋날 수가 없다.
   ⚠️ 각도·위치 계산은 book-turn.js 의 bend() 가 한다. 여기는 **무대와 재질**만 정한다.
   ============================================================ */
.bc-turn-stage {
  perspective: 2600px;
  perspective-origin: center center;
  transform-style: preserve-3d;
}
.bc-strip {
  /* ⚠️ 지면(.page-*)은 배경이 없다 — 종이 바탕은 속지(.container::before)가 그린다.
        띠에 종이색을 깔지 않으면 돌아가는 내내 **아래(새 달)가 그대로 비친다.** */
  background: var(--paper);
  backface-visibility: visible;   /* 뒤집힌 띠는 종이 뒷면처럼 비쳐 보인다 */
  /* ⚠️ 띠마다 그림자를 주면 **이음새가 세로 줄로** 드러난다. 입체감은 명암(filter:
        brightness — book-turn.js 가 굽은 각도로 계산한다)만으로 낸다. */
}
/* 넘기는 동안에는 아래 지면을 만지지 못하게 — 띠가 덮고 있어 잘못 눌린다 */
.container.bc-turning .page-left,
.container.bc-turning .page-right,
.container.bc-turning .calendar-frame { pointer-events: none; }

/* 종이 뒷면 — **아무것도 안 그린다.** 종이색과 음영만으로 충분하다(사용자 결정).
   거울상 글자를 비치게 해 봤지만 어수선하기만 했다.
   ⚠️ 뒷면 막(.bc-back-face)은 book-turn.js 가 띠 안에 **종이 영역 크기로** 넣고 켠다 —
      예전의 .bc-strip::after 는 띠 전체를 덮어, 무대가 탭까지 넓어진 뒤로는 가죽 위에도
      막이 생겨 뺐다(2026-09-03). */

/* ============================================================
   페이지 필 (2026-09-06) — 읽기 화면의 책장 넘김. 네이버 시리즈 뷰어 벤치마크.
   ⭐ 층은 book-turn.js 의 peelMake 가 만든다(무대·앞면·뒷면·그림자·반대 장 덮개).
      기하(접힘선·clip-path·반사 변환·명암 그라데이션)는 전부 JS 가 인라인으로 넣는다.
      여기는 **재질**만 — 종이색·뒷면색·글자 선택 금지.
   ⚠️ 지면(.read-sheet)은 배경이 없다(종이 바탕은 속지 ::before). 앞면·뒷면 층에 종이색을
      깔지 않으면 접히는 동안 아래 새 면이 그대로 비친다.
   ============================================================ */
html[data-theme="book"] .bc-peel-stage { contain: layout style; }
html[data-theme="book"] .bc-peel-front,
html[data-theme="book"] .bc-peel-cover { background: var(--paper); overflow: hidden; }
html[data-theme="book"] .bc-peel-front { will-change: clip-path; }
html[data-theme="book"] .bc-peel-back {
  background: var(--paper);
  overflow: hidden;
  will-change: transform, clip-path;
}
/* 폰(한 장): 뒷면은 종이 뒷면색. 앞면 글자는 얇은 종이처럼 아주 옅게만 비친다(JS 가 0.08) */
html[data-theme="book"] .bc-peel-back--paper { background: var(--paper-back); }
html[data-theme="book"] .bc-peel-shadow { overflow: hidden; }
/* 명암 — 접힘선이 가운데(50%)인 큰 정사각형을 JS 가 접힘선 방향으로 돌려 놓는다.
   폭(--peel-w1/--peel-w2)은 JS 가 지면 폭 비율로 넣는다.
   ⚠️ 인라인 그라데이션은 위 `[style*="linear-gradient"]` 규칙이 지우므로 반드시 여기 둔다. */
html[data-theme="book"] .bc-peel-shadow-g {            /* 들린 종이가 새 면에 드리우는 그림자(접힘선 바깥) */
  background-image: linear-gradient(90deg,
    transparent calc(50% - 1px), rgba(40, 25, 10, 0.34) 50%,
    rgba(40, 25, 10, 0.20) calc(50% + var(--peel-w1, 24px)),
    transparent calc(50% + var(--peel-w2, 80px)));
}
html[data-theme="book"] .bc-peel-front-g {             /* 앞면 접힘선 안쪽 — 종이가 굽는 자리 */
  background-image: linear-gradient(90deg,
    transparent calc(50% - var(--peel-w1, 30px)), rgba(40, 25, 10, 0.18) 50%,
    transparent calc(50% + 1px));
}
html[data-theme="book"] .bc-peel-back-g {              /* 뒷면 원통 명암 — 접힘선 가까이 밝고 멀수록 살짝 어둡다 */
  background-image: linear-gradient(90deg,
    transparent calc(50% - 1px), rgba(255, 255, 255, 0.30) 50%,
    rgba(40, 25, 10, 0.16) calc(50% + var(--peel-w1, 30px)),
    rgba(40, 25, 10, 0.06) calc(50% + var(--peel-w2, 140px)),
    rgba(40, 25, 10, 0.06) 100%);
}
html[data-theme="book"] .bc-peel-stage .read-sheet { box-shadow: none; }
html[data-theme="book"] .bc-peel-stage .read-flow { transition: none !important; }
/* 끌어 넘기는 동안 글자가 선택되지 않게. 아래 지면은 덮여 있으니 누르지도 못하게 */
html[data-theme="book"] .read-book.bc-peeling { user-select: none; -webkit-user-select: none; }
html[data-theme="book"] .read-book.bc-peeling .read-spread { pointer-events: none; }
/* 복제본 안의 머리글·아래 줄은 .container > * 규칙(z-index 층)을 안 받는다 — 종이 위에 평평하게 */
html[data-theme="book"] .bc-peel-stage .read-header,
html[data-theme="book"] .bc-peel-stage .read-foot { z-index: auto; }
/* ⚠️ 필은 첫 픽셀부터 아래 새 면을 드러낸다. .read-flow 의 transform 전환(280ms)이 살아 있으면
      새 면이 미끄러져 들어오는 도중이 접힌 자리로 비친다(첫 캡처에서 단이 조각나 보였다). */
html[data-theme="book"] .read-book.bc-peeling .read-flow { transition: none !important; }

/* ============================================================
   고전 판면 (2026-08-21) — "모든 걸 고전 느낌으로" (사용자 요청)

   ⭐ 이 절의 원칙은 위 「가독성 수리」와 같다. **분위기보다 읽히는 것이 먼저다.**
      색을 새로 쓰면 종이색(#f3e9d6) 대비를 계산해 값 옆에 적는다.
   ⭐ 여기서 하는 일은 넷이다.
      1) 활자 — 웹폰트로 실제 명조·가라몽을 신는다(위 --serif 참고)
      2) 판면 — 광곽(匡郭)·계선(界線)·어미(魚尾) 같은 고서 요소를 넣는다
      3) 금속 — 둥근 알약을 네모난 활판 상자로 바꾼다
      4) 그림 — 컬러 이모지를 걷어내고 활자 장식으로 대신한다
   ============================================================ */

html[data-theme="book"] {
  /* 장식용 마름모 — 고서의 어절 구분표(❖)에서 가져왔다. 글자색이 아니라 장식색이다. */
  --ornament: rgba(176, 138, 60, 0.85);
  /* 계선은 괘선보다 옅게 — 같은 굵기로 두면 달력이 장부(스프레드시트)처럼 보인다 */
  --rule-v: rgba(120, 90, 45, 0.10);
}

/* ── 1. 활자 다듬기 ───────────────────────────────────────
   ⚠️ 한국어는 기본이 **글자 단위** 줄바꿈이다. 낱말째 넘기려면 keep-all 이 필요하고,
      그것만 두면 긴 낱말이 상자를 삐져나가므로 break-word 를 짝으로 준다. */
html[data-theme="book"] body {
  font-family: var(--serif);
  /* 가라몽은 합자(fi·fl)와 커닝이 살아 있을 때 제 모양이 난다 */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 제목은 송명조로 — 붓에서 온 획이라 본문 명조보다 훨씬 고서에 가깝다.
   ⚠️ 송명조는 400 한 벌뿐이다. 굵기를 올리면 브라우저가 획을 부풀려 뭉갠다 → 400 고정. */
html[data-theme="book"] .month-title,
html[data-theme="book"] .login-title,
html[data-theme="book"] .register-title,
html[data-theme="book"] .header h1,
html[data-theme="book"] h1 {
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
}

/* 숫자 ────────────────────────────────────────────────────
   ⚠️ EB Garamond 의 기본 숫자는 **옛숫자(oldstyle)** 라 3·4·5·7·9 가 밑으로 내려간다.
      본문 속에서는 그게 고전적이지만, 달력처럼 **격자에 줄 맞춰 서는 숫자**에 쓰면
      같은 칸의 숫자끼리 높이가 달라 보인다. 그래서 자리를 갈라 쓴다:
        · 격자·수치(달력 날짜·통계·판번호) → lining  (줄 맞춤이 먼저)
        · 산문(난외주 날짜·판권지·성구)     → oldstyle (고서의 맛) */
html[data-theme="book"] .day-number,
html[data-theme="book"] .day-chapters-badge,
html[data-theme="book"] .stats-container,
html[data-theme="book"] .stat-details,
html[data-theme="book"] .version-number,
html[data-theme="book"] .update-date,
html[data-theme="book"] .calendar-table {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
html[data-theme="book"] .margin-note,
html[data-theme="book"] .page-verse,
html[data-theme="book"] .business-info-compact,
html[data-theme="book"] .release-date,
html[data-theme="book"] .release-section li {
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "onum" 1, "pnum" 1;
}

/* ── 2. 종이 — 세월 얼룩(foxing) ──────────────────────────
   ⚠️ 위쪽 `.container::before` 규칙을 **통째로 다시 적는다.** background 는 층 목록이라
      한 층만 덧붙일 수 없다. 기존 층(책등 그늘·종이 결·종이색)은 그대로 두고 얼룩을 얹었다.
   ⚠️ 알파는 0.05 를 넘기지 않는다 — 넘기면 그 자리의 글자 대비가 떨어진다. */
html[data-theme="book"] .container::before {
  background:
    radial-gradient(ellipse 6% 4% at 12% 22%, rgba(150, 110, 55, 0.05), transparent 70%),
    radial-gradient(ellipse 4% 3% at 84% 12%, rgba(150, 110, 55, 0.045), transparent 70%),
    radial-gradient(ellipse 8% 3% at 70% 78%, rgba(150, 110, 55, 0.04), transparent 70%),
    radial-gradient(ellipse 5% 4% at 28% 88%, rgba(150, 110, 55, 0.05), transparent 70%),
    linear-gradient(90deg, rgba(70, 45, 20, 0.18) 0%, rgba(70, 45, 20, 0.05) 4%, transparent 9%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 2px, transparent 2px 4px),
    var(--paper);
}

/* 표지 — 고서는 모서리가 거의 각지다. 둥근 정도를 확 줄이고 가장자리에 금박 테를 두른다 */
html[data-theme="book"] .container {
  border-radius: 3px;
  box-shadow:
    0 clamp(10px, 2vh, 26px) clamp(20px, 4vh, 60px) rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 clamp(5px, 0.7vw, 9px) rgba(0, 0, 0, 0.14),
    inset 0 0 0 calc(clamp(5px, 0.7vw, 9px) + 1px) rgba(184, 145, 47, 0.30);
}
html[data-theme="book"] .container::before { border-radius: 1px; }

/* ── 3. 광곽(匡郭) — 판면을 두 줄로 두른다 ────────────────
   고서의 사주쌍변(四周雙邊). `outline` 은 바깥으로 그려지고 offset 을 줄 수 있어
   테두리 한 벌만으로 **두 줄**이 된다(가짜 요소를 하나 더 만들 필요가 없다).
   ⚠️ 표(.calendar-table)가 아니라 틀(.calendar-frame)에 건다 — book-turn.js 가
      넘길 때 표를 통째로 갈아 끼우므로 표에 걸면 테가 같이 사라진다. */
html[data-theme="book"] .calendar-frame {
  border: 1px solid rgba(120, 90, 45, 0.42);
  outline: 1px solid rgba(120, 90, 45, 0.22);
  outline-offset: 4px;
  padding: clamp(6px, 1.2vw, 14px) clamp(4px, 0.9vw, 12px);
  /* 테가 화면·이웃 요소에 닿지 않게 outline 두께+offset 만큼 자리를 비운다 */
  margin: clamp(8px, 1.6vh, 16px) 6px clamp(12px, 2.2vh, 22px);
  background: rgba(255, 253, 246, 0.28);
}

/* ── 4. 계선(界線) — 칸 사이 세로줄 ───────────────────────
   고서에서 글줄을 가르던 선. 가로 괘선보다 **옅게** 둔다(같으면 장부처럼 보인다). */
html[data-theme="book"] .calendar-table th,
html[data-theme="book"] .calendar-table td {
  border-right: 1px solid var(--rule-v) !important;
}
html[data-theme="book"] .calendar-table th:last-child,
html[data-theme="book"] .calendar-table td:last-child {
  border-right-color: transparent !important;
}
/* 요일줄 아래는 쌍선 — 머리와 본문을 가르는 자리다 */
html[data-theme="book"] .calendar-table thead th {
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 3px double var(--rule-strong) !important;
  padding-top: clamp(4px, 0.8vh, 9px) !important;
}

/* ── 5. 어미(魚尾) — 책등 한가운데 물고기 꼬리 ────────────
   고서의 판심(가운데 접힌 자리)에 찍히던 표. 위·아래 두 개가 마주 본다.
   ⚠️ `.book-spine` 자체는 base.html 이 그린다 — 여기서는 **덧그리기만** 한다.
   ⚠️ 어미는 **두 구획선 사이에 놓일 때라야** 어미로 읽힌다. 삼각형만 두었더니
      책등에 붙은 회색 조각으로 보였다(2026-08-21 첫 캡처).
   ⚠️ clip-path 로 꼬리를 깎으면 **box-shadow 로 그린 구획선까지 같이 잘린다**
      (clip-path 는 그림자를 포함해 상자 전체를 자른다). 그래서 꼬리는 도형이 아니라
      **글자(▼▲)** 로 찍고, 구획선은 위아래 테두리로 둔다 — 잘릴 것이 없다. */
html[data-theme="book"] .book-spine::before,
html[data-theme="book"] .book-spine::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(14px, 1.9vw, 21px);
  text-align: center;
  font-size: clamp(7px, 0.9vw, 10px);
  line-height: 1;
  padding: 3px 0;
  color: rgba(70, 45, 20, 0.38);
  border-top: 1px solid rgba(70, 45, 20, 0.30);
  border-bottom: 1px solid rgba(70, 45, 20, 0.30);
}
html[data-theme="book"] .book-spine::before { content: "▼"; top: 10%; }
html[data-theme="book"] .book-spine::after  { content: "▲"; bottom: 10%; }

/* ── 6. 활판 상자 — 둥근 알약을 네모로 ────────────────────
   ⚠️ 위 「가독성 수리」에서 `border-radius: 999px !important` 로 못 박아 둔 것들이라
      여기서 다시 !important 로 눌러야 이긴다(같은 파일 안이라 순서로도 이기지만,
      원본 calendar.css 의 !important 도 함께 눌러야 해서 그대로 둔다).
   활판 느낌 = 얇은 테두리 + 안쪽 실선 한 겹(눌린 자국). 그림자는 쓰지 않는다. */
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge,
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .coffee-button,
html[data-theme="book"] .submit-btn,
html[data-theme="book"] .btn,
html[data-theme="book"] .form-input,
html[data-theme="book"] .back-btn {
  border-radius: 2px !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.03em;
  word-break: keep-all;
}
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge,
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .coffee-button {
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, 0.55) !important;
}
/* 금박 칩(판번호)·로그아웃 칩은 안쪽 조각이라 네모로만 맞춘다 */
html[data-theme="book"] .version-number,
html[data-theme="book"] .auth-action { border-radius: 2px !important; }

/* 이동 화살표 — 글자보다 한 단 작게, 잉크빛을 옅게 */
html[data-theme="book"] .nav-icon {
  font-size: 0.8em;
  color: var(--gilt);
  vertical-align: 0.05em;
}

/* 범례 색칠 — 도장처럼 각지게 */
html[data-theme="book"] .legend-item .legend-color,
html[data-theme="book"] .legend-color {
  border-radius: 0 !important;
  width: 0.85em; height: 0.85em;
}

/* ── 7. 진행 막대 — 종이에 눌린 홈과 금박 채움 ────────────
   ⚠️ 트랙과 채움을 **갈라** 칠한다. 둘 다 칠하면 늘 100% 처럼 보인다(이미 겪었다).
      여기서는 모양만 네모로 바꾸고 색 규칙은 위 절을 그대로 따른다. */
html[data-theme="book"] .progress-bar,
html[data-theme="book"] .stat-progress {
  border-radius: 0 !important;
  height: 7px !important;
  border: 1px solid rgba(120, 90, 45, 0.30) !important;
  box-shadow: inset 0 1px 2px rgba(90, 70, 40, 0.16) !important;
}
html[data-theme="book"] [class*="progress"] > div { border-radius: 0 !important; }

/* ── 8. 장식 괘선 — 마름모를 문 가는 줄 ───────────────────
   가운데 ❖ 하나에 양쪽으로 가늘어지는 금박 선. 고서의 어절 구분표에서 가져왔다. */
html[data-theme="book"] .page-verse::before,
html[data-theme="book"] .page-verse::after {
  content: "❖";
  display: block;
  text-align: center;
  color: var(--ornament);
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 0;
  margin: 0.5em auto;
  width: 60%;
  /* 마름모 좌우로 뻗는 실선 — 글자 가운데 높이에 걸린다 */
  background:
    linear-gradient(90deg, transparent, var(--gilt) 45%, transparent 46%,
                    transparent 54%, var(--gilt) 55%, transparent) center/100% 1px no-repeat;
}
/* 성구 자체는 인용이므로 조금 더 눕히고 자간을 준다 */
html[data-theme="book"] .page-verse {
  font-family: var(--serif) !important;
  letter-spacing: 0.02em;
}

/* 난외주 머리 — 고서의 어깨표처럼 마름모를 앞에 세운다 */
html[data-theme="book"] .margin-note-title::before {
  content: "❖ ";
  color: var(--ornament);
  font-weight: 400;
}
html[data-theme="book"] .margin-note-title {
  font-family: var(--serif) !important;
  letter-spacing: 0.14em;
}
/* 난외주 본문 — 관주는 원래 잔글씨다. 자간을 조금 벌려 읽기를 지킨다 */
html[data-theme="book"] .margin-note { letter-spacing: 0.01em; }

/* 범례줄 위 괘선을 쌍선으로 — 판면과 주석을 가르는 자리 */
html[data-theme="book"] .legend-container {
  border-top: 3px double var(--rule-strong) !important;
}

/* ── 9. 컬러 이모지를 걷어낸다 ────────────────────────────
   ⭐ 이모지는 글자색(color)으로 안 바뀐다 — **색 그림**이라 테마를 덮어도 혼자 남는다.
      본문 뜻을 지고 있지 않은 장식 이모지만 지운다(기능 아이콘은 아래에서 활자로 바꾼다).
   ⚠️ 붙박이 텍스트로 박힌 것은 CSS 로 못 잡는다 → 템플릿에서 `.ui-emoji` 로 감쌌다
      (index/login/register/release_notes). 기본 테마에서는 그냥 span 이라 아무 변화가 없다. */
html[data-theme="book"] .ui-emoji,
html[data-theme="book"] .auth-icon,
html[data-theme="book"] .admin-icon,
html[data-theme="book"] .btn-primary > span:first-child,
html[data-theme="book"] .btn-secondary > span:first-child { display: none !important; }

/* CSS 로 박힌 것들 — 마름모나 빈 값으로 갈아 끼운다 */
html[data-theme="book"] .stat-title::before {
  content: "❖ " !important;
  color: var(--ornament);
}
html[data-theme="book"] .coffee-button::before { content: "" !important; }
html[data-theme="book"] .header h1::before { content: "" !important; }

/* 도움말 ? — 컬러 이모지(❓)를 활자 물음표로 바꾼다.
   ⚠️ 글자를 지우는 게 아니라 크기를 0 으로 만들고 가짜 요소로 다시 그린다
      (버튼 안의 텍스트 노드는 CSS 로 지울 수 없다). title 속성은 그대로라 읽어 주기에는 영향 없다. */
html[data-theme="book"] .tutorial-help-button {
  font-size: 0 !important;
  font-family: var(--serif-display) !important;
}
html[data-theme="book"] .tutorial-help-button::before {
  content: "?";
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1;
  color: var(--leather);
}

/* 설정 카드 — 흰 유리 대신 책 위에 놓인 종이 쪽지로 */
html[data-theme="book"] .dock-items {
  background: rgba(246, 236, 216, 0.97) !important;
  border: 1px solid rgba(164, 126, 63, 0.34);
  box-shadow: 0 8px 24px rgba(22, 13, 9, 0.30) !important;
}
html[data-theme="book"] .dock-row-label {
  font-family: var(--serif) !important;
  color: var(--ink) !important;
}

/* 커피 후원 — 책 사이에 끼운 쪽지처럼 */
html[data-theme="book"] .coffee-button {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  text-shadow: none !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.02em;
}

/* ── 10. 로그인·가입 — 속표지처럼 ────────────────────────── */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container { border-radius: 2px !important; }
/* 표제 아래위로 장식 괘선 — 옛 속표지의 두 줄 */
html[data-theme="book"] .login-header,
html[data-theme="book"] .register-header {
  border-bottom: 3px double var(--rule-strong) !important;
}
html[data-theme="book"] .login-title::after,
html[data-theme="book"] .register-title::after {
  content: "❖";
  display: block;
  color: var(--ornament);
  font-size: 0.42em;
  line-height: 1;
  margin-top: 0.5em;
  -webkit-text-fill-color: var(--ornament);
}
html[data-theme="book"] .form-input {
  border-radius: 2px !important;
  letter-spacing: 0.02em;
}
/* 라벨 — 고서의 항목표처럼 자간을 벌린다 */
html[data-theme="book"] .form-label {
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ── 11. 릴리즈 노트 — 판목(版木) 기록처럼 ────────────────
   ⚠️ 이 화면의 스타일은 release_notes.html 안 <style> 에 있다. 그 규칙이 이 파일보다
      **먼저** 실리므로(base.html 은 페이지 CSS 뒤에 테마 CSS 를 싣는다) 여기서 덮인다. */
html[data-theme="book"] .release-item {
  background: rgba(255, 253, 246, 0.72) !important;
  border: 1px solid rgba(120, 96, 60, 0.28) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
/* 판번호 — 보라 그라데이션이 그대로 남아 있었다. 가죽 표지와 같은 재질로 눕힌다(크림 글자 10.4:1) */
html[data-theme="book"] .release-version {
  background: linear-gradient(180deg, #6b4a2a 0%, var(--leather) 100%) !important;
  color: #f6ecd8 !important;
  border-radius: 2px !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.04em;
}
html[data-theme="book"] .release-date { color: var(--ink-soft) !important; }
html[data-theme="book"] .release-commit {
  background: rgba(176, 138, 60, 0.16) !important;
  color: var(--ink-head) !important;
  border: 1px solid rgba(120, 96, 60, 0.30) !important;
  border-radius: 2px !important;
}
html[data-theme="book"] .release-title {
  color: var(--ink) !important;
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4em;
}
html[data-theme="book"] .release-section h4 {
  color: var(--ink-head) !important;
  font-family: var(--serif) !important;
  letter-spacing: 0.08em;
}
html[data-theme="book"] .release-section h4::before {
  content: "❖";
  color: var(--ornament);
  font-weight: 400;
}
html[data-theme="book"] .release-section li { color: var(--ink) !important; }
html[data-theme="book"] .release-section ul { list-style: none; padding-left: 1.1em; }
/* 글머리 — 검은 동그라미 대신 고서의 가운뎃점 */
html[data-theme="book"] .release-section li::before {
  content: "·";
  color: var(--ornament);
  font-weight: 700;
  display: inline-block;
  width: 1.1em;
  margin-left: -1.1em;
}
html[data-theme="book"] .release-footer {
  border-top: 3px double var(--rule-strong) !important;
  color: var(--ink-soft) !important;
}
html[data-theme="book"] .release-footer p { color: var(--ink-soft) !important; }
html[data-theme="book"] .release-footer a { color: #7a4a1e !important; }
/* 이 화면의 머리말은 달력의 .header 와 클래스가 같다 — 가운데로 모으고 쌍선을 두른다 */
html[data-theme="book"] .release-notes ~ * { font-family: var(--serif); }

/* ── 12. 통계 상자·목표 버튼 ─────────────────────────────── */
html[data-theme="book"] .stat-box,
html[data-theme="book"] .stats-section,
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .goal-section { border-radius: 2px !important; }
html[data-theme="book"] .stat-title {
  font-family: var(--serif) !important;
  letter-spacing: 0.06em;
}
html[data-theme="book"] .goal-setting-btn {
  background: linear-gradient(180deg, #f3e6c9, #e6d3aa) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(184, 145, 47, 0.55) !important;
  text-shadow: none !important;
  white-space: nowrap;
}

/* ── 13. 펼침면 머리말 — 제목이 '이전달' 버튼을 파고들던 것 ────
   ⚠️ 실측(2026-08-21): 폭 920 에서 **17px**, 1000 에서 **6px** 겹쳤다. 1280 은 21px 남았다.
      → 900~1050 구간에서만 나던 것이라 캡처를 1280 만 보면 못 잡는다.
   원인: `.month-title` 이 `white-space: nowrap` 이라 **줄어들 수가 없는데**,
      `.month-title-container` 가 제목과 '이번달로'를 **가로로** 안고 있어 묶음 폭이
      절반 열보다 넓어졌다. 가운데 정렬이라 넘친 만큼 좌우로 똑같이 삐져나가고,
      왼쪽으로 삐져나간 부분이 '이전달' 버튼 위에 얹혔다.
   → 펼침면에서는 둘을 **세로로** 세운다. 묶음 폭이 둘 중 넓은 쪽으로 줄어 열 안에 들어오고,
      제목 아래 부제가 붙은 책의 머리말 모양이 되어 오히려 고전에 가깝다. */
@media (min-width: 900px) {
  html[data-theme="book"] .page-right .month-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, 0.4vh, 6px);
  }
}

/* ── 14. 릴리즈 노트 — 판목 기록을 이어진 종이 위에 ──────────
   ⚠️ `.container:not(:has(> .page))` = 지면이 없는 컨테이너 = 릴리즈 노트 화면.
      달력(펼침면)에는 걸리지 않는다. */
html[data-theme="book"] .container:not(:has(> .page)) .header {
  display: block !important;
  text-align: center;
  border-bottom: 3px double var(--rule-strong) !important;
}
html[data-theme="book"] .container:not(:has(> .page)) .header p {
  color: var(--ink-soft) !important;
  font-family: var(--serif);
  margin-top: 0.5em;
}
/* 판마다 크림 판을 깔면 종이가 조각조각 끊긴다. 책은 한 장으로 이어진다 —
   판을 걷고 쌍선으로만 가른다. */
html[data-theme="book"] .release-item {
  background: none !important;
  border: none !important;
  border-bottom: 3px double var(--rule-strong) !important;
  padding: clamp(14px, 2.4vw, 26px) clamp(4px, 1vw, 14px) !important;
  margin-bottom: 0 !important;
}
html[data-theme="book"] .release-notes .release-item:last-child {
  border-bottom: none !important;
}
/* 뒤로 가기 — 커다란 흰 상자였다. 활판 상자로 눕히고 왼쪽에 붙인다 */
html[data-theme="book"] .back-btn {
  display: inline-block;
  background: rgba(255, 253, 246, 0.62) !important;
  color: var(--ink-head) !important;
  border: 1px solid rgba(120, 96, 60, 0.40) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, 0.55) !important;
  padding: clamp(5px, 1vw, 9px) clamp(9px, 1.8vw, 16px) !important;
  letter-spacing: 0.04em;
}

/* 속표지 마름모는 표제 크기의 절반쯤이 보기 좋다 — 0.42em 은 티가 안 났다 */
html[data-theme="book"] .login-title::after,
html[data-theme="book"] .register-title::after { font-size: 0.5em; }

/* ── 15. 난외주 머리 글자 대비 ────────────────────────────
   ⚠️ `.margin-note-title` 은 예전부터 통째로 금박(--gilt #b08a3c)이었다.
      종이(#f3e9d6) 대비 **2.66:1** — 장식이면 몰라도 이건 "이 달 읽은 곳"이라는
      **읽어야 하는 글**이다(2026-08-21 계산으로 잡았다. 눈으로는 안 보였다).
   → 글자는 --ink-head(7.0:1)로 내리고, 금박은 앞의 마름모에만 남긴다.
      분위기는 마름모가 지고, 읽기는 글자가 진다. */
html[data-theme="book"] .margin-note-title { color: var(--ink-head) !important; }
html[data-theme="book"] .margin-note-title::before { color: var(--ornament); }

/* ============================================================
   15. 각 죽이기 — "그은 선"을 "스민 결"로 (2026-08-22, 사용자 지시)
   지시: "다 너무 딱딱하고 각졌다. 테두리에 명확한 선이 딱 나 있는 게 거슬린다."
   ⭐ 선을 없애는 게 아니라 **끝이 흐려지게** 만든다. 고서의 판면 느낌은 남기고
      직각·실선만 걷어낸다(§22 — 지금 잘 되는 것을 죽이지 않는다).
   ⚠️ 여기가 파일 끝인 이유: 앞 절들이 !important 로 못 박아 둔 값을 순서로 이긴다.
   ============================================================ */

/* ── 15-1. 광곽 — 사주쌍변(두 줄 직각 테)을 걷는다 ──────────
   outline 은 radius 를 따라가긴 하나 두 줄이면 무조건 '틀'로 읽힌다.
   테 대신 **판면만 아주 옅게 떠 있게** 한다. */
html[data-theme="book"] .calendar-frame {
  border-color: transparent !important;
  outline: none !important;
  border-radius: clamp(12px, 1.8vw, 24px) !important;
  background: rgba(255, 253, 246, 0.34) !important;
  box-shadow: inset 0 0 clamp(16px, 2.4vw, 34px) rgba(120, 96, 60, 0.10) !important;
}

/* ── 15-2. 계선(세로줄) — 통째로 뺀다 ─────────────────────
   ⭐ 화면이 '표'로 읽히던 가장 큰 원인. 가로 괘선만 남으면 장부가 아니라 글줄이 된다. */
html[data-theme="book"] .calendar-table th,
html[data-theme="book"] .calendar-table td {
  border-right-color: transparent !important;
}

/* ── 15-3. 괘선(가로줄) — 양 끝이 흐려지는 선으로 ──────────
   실선을 배경 그라데이션으로 바꾼다. 끝이 사라지므로 '그은 자국'이 아니라 '결'로 보인다. */
html[data-theme="book"] .calendar-table td,
html[data-theme="book"] .calendar-table thead th {
  border-bottom-color: transparent !important;
  border-top: none !important;
}
/* ⚠️ 페이드는 **줄(tr)** 에 건다. 칸(td)에 걸면 7칸이 각각 흐려져
      셀마다 짧은 호가 반복되는 물결이 된다(2026-08-22 첫 시도에서 실제로 그랬다).
   ⚠️⚠️ 그런데 `border-collapse: collapse` 에서는 **접힌 테두리가 차지하는 자리가
      줄 배경 칠에서 빠진다** — 그래서 tr 로 옮겨도 칸 경계마다 1px 씩 끊겨 여전히
      물결로 보였다. 칸 사이를 안 벌리는 separate 로 바꿔야 한 줄로 이어진다.
      (칸 테두리는 이 절에서 전부 투명으로 눕혔으므로 collapse 가 할 일이 없다.) */
html[data-theme="book"] .calendar-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
/* ⚠️ separate 로 바꾸면 collapse 가 눌러 두던 **칸별 카드**(원본 calendar.css 의
      배경·모서리·그림자)가 되살아난다 — 달력이 타일 무더기가 된다. 다시 눕힌다. */
html[data-theme="book"] .calendar-table td,
html[data-theme="book"] .calendar-table th {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-theme="book"] .calendar-table tbody tr {
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.15) 8%,
      rgba(120, 90, 45, 0.15) 92%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important;
  background-size: 100% 1px !important;
}
/* 요일줄 아래 쌍선(3px double) → 흐려지는 한 줄 */
html[data-theme="book"] .calendar-table thead tr {
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.30) 6%,
      rgba(120, 90, 45, 0.30) 94%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important;
  background-size: 100% 1px !important;
}

/* ── 15-4. 구획선들 — 범례줄·난외주 위의 실선도 같은 결로 ── */
html[data-theme="book"] .legend-container,
html[data-theme="book"] .margin-note {
  border-top-color: transparent !important;
  border-top-style: solid !important;
  border-top-width: 1px !important;
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.26) 15%,
      rgba(120, 90, 45, 0.26) 85%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 0 !important;
  background-size: 100% 1px !important;
}

/* ── 15-5. 상자류 — 테두리를 지우고 종이 결로만 구분 ──────── */
html[data-theme="book"] .stat-box,
html[data-theme="book"] .stats-section,
html[data-theme="book"] .monthly-stats-section,
html[data-theme="book"] .goal-section {
  border-color: transparent !important;
  border-radius: clamp(10px, 1.5vw, 20px) !important;
  box-shadow: 0 1px clamp(6px, 1vw, 14px) rgba(90, 68, 40, 0.10) !important;
}

/* ── 15-6. 활판 상자 → 모서리를 눕힌다 ─────────────────────
   ⚠️ 어제 넣은 `border-radius: 2px`(6절 '활판 상자')를 **사용자 지시로 되돌린다.**
      알약(999px)은 그대로 두고, 네모였던 것만 둥글린다. */
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .coffee-button,
html[data-theme="book"] .submit-btn,
html[data-theme="book"] .btn,
html[data-theme="book"] .form-input,
html[data-theme="book"] .back-btn {
  border-radius: clamp(10px, 1.4vw, 16px) !important;
}
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge { border-radius: 999px !important; }
html[data-theme="book"] .version-number,
html[data-theme="book"] .auth-action { border-radius: 999px !important; }

/* 테두리를 옅게 — 선이 '보이는' 대신 '있는 줄만 아는' 세기로 */
html[data-theme="book"] .nav-btn,
html[data-theme="book"] .today-link,
html[data-theme="book"] .version-badge,
html[data-theme="book"] .auth-badge,
html[data-theme="book"] .admin-badge,
html[data-theme="book"] .goal-setting-btn,
html[data-theme="book"] .goal-btn,
html[data-theme="book"] .login-btn,
html[data-theme="book"] .donate-btn,
html[data-theme="book"] .coffee-button,
html[data-theme="book"] .submit-btn {
  border-color: rgba(150, 118, 62, 0.28) !important;
  /* 안쪽 흰 실선(눌린 자국)이 한 겹 더 각을 만들고 있었다 → 부드러운 그림자로 */
  box-shadow: 0 1px clamp(4px, 0.8vw, 9px) rgba(90, 68, 40, 0.14) !important;
}

/* 버튼 **안쪽** 조각에 남은 직각 테 — 바깥을 둥글려도 이건 따로 남는다 */
html[data-theme="book"] .goal-btn-text,
html[data-theme="book"] .goal-setting-btn span,
html[data-theme="book"] .coffee-button span {
  border: none !important;
  box-shadow: none !important;
}

/* ── 15-7. 책 자체의 모서리 ───────────────────────────── */
html[data-theme="book"] .container { border-radius: clamp(14px, 2.2vw, 30px) !important; }
html[data-theme="book"] .container::before { border-radius: clamp(10px, 1.6vw, 22px) !important; }

/* ── 15-8. 어미(魚尾) 구획선도 옅게 ───────────────────── */
html[data-theme="book"] .book-spine::before,
html[data-theme="book"] .book-spine::after {
  border-top-color: rgba(70, 45, 20, 0.16) !important;
  border-bottom-color: rgba(70, 45, 20, 0.16) !important;
}

/* ── 15-9. 다른 화면들(로그인·가입·릴리즈 노트)도 같은 결로 ──
   같은 지시가 이 화면들에도 걸린다 — 달력만 눕히면 페이지를 옮길 때 다시 각져 보인다. */
html[data-theme="book"] .login-container,
html[data-theme="book"] .register-container,
html[data-theme="book"] .release-item {
  border-radius: clamp(12px, 1.8vw, 22px) !important;
}
html[data-theme="book"] .release-item {
  border-color: transparent !important;
  box-shadow: 0 1px clamp(6px, 1vw, 14px) rgba(90, 68, 40, 0.10) !important;
}
html[data-theme="book"] .release-version,
html[data-theme="book"] .release-commit {
  border-radius: 999px !important;
}
html[data-theme="book"] .release-commit { border-color: rgba(150, 118, 62, 0.28) !important; }

/* ============================================================
   16. 월 색인 — 실제 색인 성경처럼 책배를 반달로 파낸다 (2026-08-24)

   ⭐ 바깥으로 붙은 탭이 아니다. 가죽색 홈을 종이 안쪽으로 걸쳐 놓고,
      왼쪽 가장자리에 종이 단면의 밝은 림을 남겨 **오목한 구멍**으로 읽히게 한다.
   ⭐ 각 홈은 실제 월 링크다. 현재 달은 조금 더 깊고 금박이 밝다.
   ============================================================ */
html[data-theme="book"] .month-index {
  position: absolute !important;
  z-index: 5 !important;
  top: clamp(118px, 14vh, 156px);
  right: 0;
  bottom: clamp(72px, 9vh, 108px);
  width: var(--index-width, clamp(42px, 4vw, 50px));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  pointer-events: none;
}
html[data-theme="book"] .month-index-link {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  width: clamp(38px, 3.5vw, 46px);
  min-height: clamp(23px, 2.7vh, 29px);
  padding: 2px 5px 2px 8px;
  border: 1px solid rgba(238, 220, 180, 0.34);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(90deg, rgba(43, 27, 17, 0.98), rgba(77, 48, 29, 0.96) 74%, rgba(37, 23, 15, 0.98));
  box-shadow:
    inset 5px 0 7px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 248, 224, 0.20),
    -1px 0 0 rgba(226, 205, 164, 0.82),
    -3px 0 5px rgba(59, 39, 23, 0.22);
  color: #d7c18d;
  font-family: var(--serif-display);
  font-size: clamp(10px, 1.05vw, 12px);
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 1px #1e140d;
  transform: translateX(0);
  transition: width 160ms ease, transform 160ms ease, color 160ms ease;
}
html[data-theme="book"] .month-index-link::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 248, 224, 0.46), rgba(151, 119, 72, 0.08));
  opacity: 0.78;
}
html[data-theme="book"] .month-index-link small {
  font-size: 0.72em;
  color: inherit;
}
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible {
  width: clamp(43px, 4vw, 52px);
  transform: translateX(0);
  color: #f1daa0;
  opacity: 1;
}
html[data-theme="book"] .month-index-link:focus-visible {
  outline: 2px solid #d2ae58;
  outline-offset: 2px;
}
html[data-theme="book"] .month-index-link.is-current {
  width: clamp(46px, 4.3vw, 56px);
  transform: translateX(0);
  color: #f4dc97;
  background: linear-gradient(90deg, #352116, #6a4328 72%, #2d1c13);
  box-shadow:
    inset 7px 0 9px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 246, 208, 0.28),
    -1px 0 0 rgba(238, 216, 168, 0.92),
    -4px 0 7px rgba(46, 28, 17, 0.30);
  pointer-events: none;
}

/* ============================================================
   17. 좁은 화면의 월 이동 — 머리말에서 화면 아래 손가락 자리로
   ============================================================ */
@media (max-width: 899px) {
  html[data-theme="book"] .page-right > .header {
    justify-content: center !important;
    padding-left: calc(clamp(14px, 5vw, 28px) + clamp(10px, 1.6vw, 18px) + 8px - clamp(16px, 2.6vw, 34px)) !important;
  }
  html[data-theme="book"] .page-right > .header > .nav-btn,
  html[data-theme="book"] .page-right > .header .today-link {
    display: none !important;
  }
  html[data-theme="book"] .page-right > .header .month-title-container {
    margin-inline: auto;
  }

  html[data-theme="book"] .month-index {
    top: clamp(108px, 14vh, 138px);
    /* display:contents 인 한 장 화면에서는 containing block 이 책 전체다.
       책 안쪽여백만큼 되짚어야 속지의 실제 책배에 홈이 열린다. */
    right: clamp(14px, 5vw, 20px);
    bottom: auto;
    height: min(58vh, 430px);
    width: 42px;
  }
  html[data-theme="book"] .month-index-link {
    width: 39px;
    min-height: 24px;
    font-size: 10px;
    transform: translateX(0);
  }
  html[data-theme="book"] .month-index-link.is-current { width: 47px; transform: translateX(0); }

  /* ⚠️ .container > * 가 지면(.page)에 z-index:1 스태킹 컨텍스트를 만들어
     그 안의 fixed 월 이동 줄(z 9985)이 **뒤 형제(page-left 통계 카드) 아래** 깔린다
     (CDP 실측: elementFromPoint = stat-box). 줄이 든 지면만 한 층 올린다 —
     문서 흐름상 지면끼리 실제로 겹치는 건 fixed 인 이 줄뿐이라 다른 영향이 없다. */
  html[data-theme="book"] .page-right { z-index: 2; }

  html[data-theme="book"] .mobile-month-nav {
    position: fixed !important;
    z-index: 9985 !important;
    left: 50%;
    right: auto;
    /* ⭐ 2026-09-06 사용자 결정: 월 이동 줄이 맨 바닥, 후원·설정은 그 위(base.html bottom 80px). */
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(calc(100vw - 28px), 440px);
    display: grid;
    grid-template-columns: 1fr auto auto 1fr; /* 이전달 · 이번달로 · 성경 읽기 · 다음달 (calendar.css 와 같다) */
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(164, 126, 63, 0.34);
    border-radius: 999px;
    background:
      repeating-linear-gradient(0deg, rgba(70, 45, 20, 0.018) 0 1px, transparent 1px 3px),
      rgba(246, 236, 216, 0.96);
    box-shadow: 0 8px 24px rgba(22, 13, 9, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  html[data-theme="book"] .mobile-month-nav .nav-btn,
  html[data-theme="book"] .mobile-month-nav .today-link {
    min-height: 42px;
    margin: 0 !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    font-size: clamp(11px, 3vw, 13px) !important;
    border-radius: 999px !important;
    background: rgba(255, 252, 242, 0.58) !important;
  }
  html[data-theme="book"] .mobile-month-nav .today-link {
    color: #6b4b20 !important;
    border-color: rgba(176, 138, 60, 0.48) !important;
    font-weight: 700;
  }
  html[data-theme="book"] body { padding-bottom: 146px !important; }

  /* 설정 도크를 펼쳐도 월 막대는 바닥에 그대로 — 카드는 손잡이 위로 자란다(2026-09-06). */
}

/* ============================================================
   20. 모달 — 성경책 위에 놓인 기록용 속지 (2026-08-24 / 범위 확대 2026-08-27)

   ⭐ **모달 하나마다 규칙을 한 벌씩 쓰지 않는다.** 예전엔 이 절이 `#inputModal` 만
      맡았고("목표·로그아웃·년월 선택 모달은 공용 모습을 유지한다"), 그 결과 나머지
      모달 다섯이 보라 헤더·흰 유리 카드로 남아 사용자가 "모달에 테마 적용 안 된 게
      남아있다"고 지적했다(2026-08-27). 개별 모달을 하나씩 칠하면 다음 모달에서 또 어긋난다.
      그래서 **껍데기(막·카드·머리·바닥·버튼·입력칸)는 아래 한 목록이 통째로** 맡는다.
      새 모달이 생기면 고칠 곳은 이 목록 하나뿐이다.

   ⚠️ 목록에 든 것: 날짜 기록(#inputModal) · 목표(#goalModal) · 로그아웃(#logoutModal) ·
      년월 선택(#monthYearPickerModal) · 후원 결제(#payment-modal) · 축하(#celebrationOverlay).
   ⚠️ 목록 밖: 튜토리얼은 위 절(396줄쯤)이 이미 맡는다. 미리보기(.preview-modal)와
      플래시 토스트는 **JS가 style 을 직접 박아** CSS로 덮을 수 없다 — 그쪽을 고쳐야 한다.
      confirm()/alert() 24곳은 OS 대화상자라 원리상 테마를 못 입힌다.
   ⚠️ 속지 무늬·팝오버 화살표·기록 목록·모드 토글처럼 **날짜 기록 모달에만 있는 것**은
      아래에서 계속 `#inputModal` 로 좁혀 둔다. 넓히면 남의 모달에 없는 것을 칠하게 된다.
   ============================================================ */
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) {
  background: rgba(35, 24, 16, 0.46) !important;
  backdrop-filter: blur(4px) sepia(0.22) !important;
  -webkit-backdrop-filter: blur(4px) sepia(0.22) !important;
}
/* popover의 부모에 filter가 있으면 모바일의 position:fixed 내용물이 작은 popover 상자를
   기준으로 배치되어 화면 밖으로 밀린다. 팝오버는 종이 본체만 꾸미고 부모는 투명하게 둔다. */
html[data-theme="book"] #inputModal.popover-style {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) :is(.modal-content, .payment-modal-content, .celebration-content),
html[data-theme="book"] #inputModal.popover-style .modal-content {
  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 !important;
  color: var(--ink) !important;
  border: 1px solid rgba(151, 115, 57, 0.48) !important;
  border-radius: 5px 12px 12px 5px !important;
  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) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--serif) !important;
}

/* 공용 modal.css가 취소·삭제·상세 추가 버튼에 Arial을 직접 지정한다.
   모달 안의 모든 조작 활자도 기록지 본문과 같은 명조로 통일한다. */
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) button {
  font-family: var(--serif) !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-header {
  background:
    linear-gradient(90deg, rgba(142, 105, 51, 0.10), transparent 18%),
    rgba(242, 230, 207, 0.92) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid rgba(151, 115, 57, 0.42) !important;
  border-radius: 4px 11px 0 0 !important;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.48) !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-header h3 {
  color: var(--ink) !important;
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0.01em;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-control-btn {
  color: #654a2d !important;
  background: rgba(255, 252, 242, 0.48) !important;
  border: 1px solid rgba(151, 115, 57, 0.32) !important;
  box-shadow: none !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-control-btn:hover,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-control-btn:focus-visible {
  color: #402b19 !important;
  background: rgba(221, 198, 150, 0.34) !important;
  transform: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-body {
  color: var(--ink) !important;
  background: transparent !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .modal-footer {
  background: rgba(239, 225, 199, 0.82) !important;
  border-top: 1px solid rgba(151, 115, 57, 0.30) !important;
  border-radius: 0 0 11px 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .form-group label,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .input-header label,
html[data-theme="book"] #inputModal .legend-item,
html[data-theme="book"] #inputModal .record-verse {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}
html[data-theme="book"] #inputModal .help-text,
html[data-theme="book"] #inputModal .example,
html[data-theme="book"] #inputModal .no-records-msg,
html[data-theme="book"] #inputModal .record-chapters {
  color: var(--ink-soft) !important;
}

html[data-theme="book"] #inputModal .chapter-count-input-group,
html[data-theme="book"] #inputModal .mode-legend,
html[data-theme="book"] #inputModal .record-item {
  background: rgba(255, 252, 242, 0.34) !important;
  border: 1px solid rgba(151, 115, 57, 0.28) !important;
  border-radius: 7px !important;
  box-shadow: inset 3px 0 rgba(176, 138, 60, 0.12) !important;
}
html[data-theme="book"] #inputModal .record-item:hover {
  background: rgba(255, 252, 242, 0.54) !important;
  border-color: rgba(151, 115, 57, 0.42) !important;
  transform: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input[type="text"],
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input[type="number"],
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input[type="date"],
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) select {
  color: var(--ink) !important;
  background: rgba(255, 253, 246, 0.56) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(118, 86, 45, 0.52) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.48) !important;
  font-family: var(--serif) !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input:focus,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) select:focus {
  outline: 2px solid rgba(176, 138, 60, 0.34) !important;
  outline-offset: 1px !important;
  border-bottom-color: #8b672f !important;
  background: rgba(255, 253, 246, 0.82) !important;
  box-shadow: none !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) input::placeholder {
  color: rgba(78, 61, 43, 0.56) !important;
}

html[data-theme="book"] #inputModal .help-icon {
  color: #8a672e !important;
}
html[data-theme="book"] #inputModal .example {
  background: rgba(176, 138, 60, 0.07) !important;
  border-left-color: rgba(139, 103, 47, 0.66) !important;
  border-radius: 2px !important;
}

html[data-theme="book"] #inputModal .toggle-btn {
  color: #664a2b !important;
  background: rgba(255, 252, 242, 0.52) !important;
  border: 1px solid rgba(151, 115, 57, 0.38) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  transform: none !important;
}
html[data-theme="book"] #inputModal .toggle-btn.text-mode::before {
  content: "✎";
  font-size: 15px;
}
html[data-theme="book"] #inputModal .toggle-btn.dropdown-mode::before {
  content: "▤";
  font-size: 14px;
}
html[data-theme="book"] #inputModal .toggle-btn.chapter-mode::before {
  content: "¶";
  font-size: 15px;
}
html[data-theme="book"] #inputModal .toggle-btn.active {
  color: #3e2918 !important;
  background: linear-gradient(180deg, #ead8ae, #d7bc7e) !important;
  border-color: rgba(139, 103, 47, 0.78) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.62), 0 1px 3px rgba(80, 53, 25, 0.18) !important;
  transform: none !important;
}
html[data-theme="book"] #inputModal .toggle-btn:hover:not(.active),
html[data-theme="book"] #inputModal .toggle-btn:focus-visible:not(.active) {
  background: rgba(226, 207, 168, 0.56) !important;
  transform: none !important;
}

html[data-theme="book"] #inputModal .record-index {
  color: #674819 !important;
  background: rgba(176, 138, 60, 0.15) !important;
  border: 1px solid rgba(151, 115, 57, 0.24) !important;
  border-radius: 3px !important;
}
html[data-theme="book"] #inputModal .record-chapters {
  background: rgba(142, 43, 43, 0.08) !important;
  border-radius: 2px !important;
}
/* 삭제 버튼의 🗑️ 는 JS 가 textContent 로 박아 CSS 로 지울 수 없다 —
   도움말 ? 와 **같은 방식**을 쓴다(글자 크기 0 + 가짜 요소로 활자 다시 그리기).
   title 속성은 그대로라 화면 낭독기에는 영향이 없다. */
html[data-theme="book"] #inputModal .delete-record-btn {
  font-size: 0 !important;
}
html[data-theme="book"] #inputModal .delete-record-btn::before {
  content: "✕";
  font-size: 13px;
  font-family: var(--serif);
  line-height: 1;
}
html[data-theme="book"] #inputModal .delete-record-btn {
  color: #fff7e7 !important;
  background: #7d312c !important;
  border: 1px solid rgba(77, 25, 21, 0.48) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .submit-btn,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .add-btn {
  color: #3f2c19 !important;
  background: linear-gradient(180deg, #ead8ae, #d7bc7e) !important;
  border: 1px solid rgba(139, 103, 47, 0.56) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.64), 0 2px 5px rgba(79, 53, 27, 0.16) !important;
}
html[data-theme="book"] #inputModal .submit-btn::before {
  content: "✦ ";
}
html[data-theme="book"] #inputModal .add-btn::before {
  content: "+ ";
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .cancel-btn {
  color: #65503a !important;
  background: rgba(255, 252, 242, 0.42) !important;
  border: 1px solid rgba(118, 86, 45, 0.34) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .submit-btn:hover,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .add-btn:hover,
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) .cancel-btn:hover {
  transform: none !important;
  filter: brightness(0.98);
}

html[data-theme="book"] #inputModal .resize-handle {
  border-color: rgba(139, 103, 47, 0.52) !important;
  background-color: rgba(176, 138, 60, 0.24) !important;
}
html[data-theme="book"] #inputModal .resize-handle-se {
  background-image:
    linear-gradient(135deg, transparent 54%, rgba(116, 83, 39, 0.68) 54%, rgba(116, 83, 39, 0.68) 59%, transparent 59%),
    linear-gradient(135deg, transparent 70%, rgba(116, 83, 39, 0.68) 70%, rgba(116, 83, 39, 0.68) 75%, transparent 75%) !important;
}

html[data-theme="book"] #inputModal.popover-style .modal-content::before {
  border-bottom-color: #efe2c9 !important;
  filter: drop-shadow(0 -1px 1px rgba(72, 47, 23, 0.20)) !important;
}
/* ── 20-1. 껍데기로 안 덮이는 조각들 — **역할별로 한 벌씩** ────────────
   위 목록이 막·카드·머리·바닥·입력칸·주버튼/취소버튼을 이미 맡는다. 여기 남은 것은
   모달마다 **이름이 다른** 같은 역할들이다. 이름이 다를 뿐 역할이 같으므로,
   모달별로 쓰지 않고 **역할별로 묶어** 한 벌씩만 쓴다.
   ⚠️ 색은 전부 이 파일 맨 위 토큰에서 온다 — 여기에 새 색을 지어내지 않는다. */

/* (1) 주 버튼 — 초록(기록)·빨강(로그아웃)·보라(QR·축하·년월 이동)로 흩어져 있던 것 */
html[data-theme="book"] :is(
  .logout-confirm-btn,
  .celebration-close-btn,
  .kakaopay-btn,
  .view-header .nav-btn
) {
  background: linear-gradient(180deg, #5c3b23, var(--leather)) !important;
  background-image: linear-gradient(180deg, #5c3b23, var(--leather)) !important;
  color: #f6ecd8 !important;
  border: 1px solid rgba(151, 115, 57, 0.55) !important;
  box-shadow: 0 2px 6px rgba(24, 14, 8, 0.28) !important;
  font-family: var(--serif) !important;
}
/* ⚠️ 카카오페이 송금은 브랜드색(#FEE500)이 곧 식별표다. 가죽으로 덮으면 못 알아본다 —
      이것만 예외로 두되 글자·테두리는 책의 잉크로 맞춘다. */
html[data-theme="book"] .kakaopay-btn.link-btn {
  background: #f7e6a6 !important;
  background-image: none !important;
  color: var(--ink) !important;
}

/* (2) 보조 버튼 — 주황(목표 미리설정)·보라(월·년·연대 고르기) */
html[data-theme="book"] :is(
  .preset-btn,
  .month-btn, .year-btn, .decade-btn,
  .view-title
) {
  background: rgba(255, 252, 242, 0.62) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid rgba(151, 115, 57, 0.40) !important;
  box-shadow: none !important;
  font-family: var(--serif) !important;
}
/* 지금 고른 것 — 선택색은 토큰이 정한다(공용 CSS에 테마색을 박지 않는다는 원칙) */
html[data-theme="book"] :is(.month-btn, .year-btn, .decade-btn).current,
html[data-theme="book"] :is(.month-btn, .year-btn, .decade-btn).selected,
html[data-theme="book"] :is(.month-btn, .year-btn, .decade-btn).active {
  background: var(--leather) !important;
  background-image: none !important;
  color: #f6ecd8 !important;
  border-color: var(--gilt) !important;
}

/* (3) 닫기 버튼 */
html[data-theme="book"] .payment-modal-close {
  color: var(--ink-soft) !important;
  font-family: var(--serif) !important;
}

/* (4) ⚠️ **`color` 로는 절대 안 바뀌는 것** — 글자에 그라데이션을 깔고
       `-webkit-text-fill-color: transparent` 로 비워 둔 제목들. 세 속성을 다 되돌려야 한다.
       (`.month-title` 에서 이미 한 번 겪은 유형이다 — 이 파일 109줄 참고) */
html[data-theme="book"] :is(
  .amount-display,
  .donation-header h1,
  .donation-header-compact h1,
  .celebration-title
) {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  font-family: var(--serif-display) !important;
  font-weight: 400 !important;
}

/* (5) 옅은 판때기들 — 회색·연보라 상자를 종이 톤으로 */
html[data-theme="book"] :is(
  .payment-amount,
  .donation-details,
  .donation-amount-section,
  .usage-list,
  .faq-item,
  .celebration-stats
) {
  background: rgba(255, 252, 242, 0.55) !important;
  background-image: none !important;
  border: 1px solid rgba(151, 115, 57, 0.30) !important;
  color: var(--ink) !important;
}
html[data-theme="book"] .usage-list { border-left: 4px solid var(--gilt) !important; }
html[data-theme="book"] .donation-header,
html[data-theme="book"] .donation-header-compact {
  border-bottom-color: rgba(151, 115, 57, 0.40) !important;
}

/* (6) 축하 오버레이 — 카드는 위 목록이 종이로 만들었다. 그 위 글자가 아직 흰색이라
       종이 위에서 안 보인다(공용 celebration.css 가 `color: white` 로 박아 둔다). */
html[data-theme="book"] :is(
  .celebration-message,
  .celebration-stat-item
) {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}
/* 색종이 — 형광 자홍·청록을 금박·세피아로 눕힌다(한 벌로, nth-child 20벌을 덮는다) */
html[data-theme="book"] .confetti {
  background: var(--gilt) !important;
}
html[data-theme="book"] .confetti:nth-child(3n) { background: var(--leather) !important; }
html[data-theme="book"] .confetti:nth-child(3n + 1) { background: var(--ribbon) !important; }

/* (8) 본문 글자·링크 — 공용 CSS 가 회청색(#374151)과 보라(#667eea)를 **태그에 직접**
       걸어 둔 자리들. 클래스가 없어 위 규칙들이 못 닿는다. 역할별로 한 벌로 묶는다.
   ⚠️ 넓게 잡으면 안 된다(`div`·`span` 까지 잡으면 가죽 버튼 안 글자까지 먹으로 뒤집힌다).
      실제로 어긋난 자리만 이름으로 짚는다 — 실측으로 고른 목록이다(2026-08-27). */
html[data-theme="book"] :is(
  .logout-message,
  .usage-list, .usage-list li,
  .faq-item, .faq-item p, .faq-item strong,
  .donation-details summary,
  .donation-subtitle, .donation-usage-list, .donation-usage-list li,
  .donation-faq, .donation-faq p, .donation-faq strong,
  .donation-thanks,
  .donation-note, .payment-notice
) {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}
html[data-theme="book"] :is(#inputModal, #goalModal, #logoutModal, #monthYearPickerModal, #payment-modal, #celebrationOverlay) a {
  color: #7a5c2e !important;
}

/* (7) 결제 입력칸 — 위 목록의 input 규칙이 `#payment-modal` 안쪽까지 닿지만,
       payment.css 가 `#payment-form input` 으로 더 좁게 박아 둔 테두리만 남는다 */
html[data-theme="book"] #payment-form input {
  border: 1px solid rgba(151, 115, 57, 0.45) !important;
}

html[data-theme="book"] #inputModal.popover-style .modal-content.arrow-bottom::before {
  border-bottom-color: transparent !important;
  border-top-color: #efe2c9 !important;
  filter: drop-shadow(0 1px 1px rgba(72, 47, 23, 0.20)) !important;
}

/* 낮은 가로 화면에서는 좌우 모서리 도크 사이가 비어 있다.
   월 막대를 그 자리에 내려 달력의 날짜 행을 덮지 않게 한다.
   설정을 펼치면 위의 더 구체적인 :has 규칙이 계속 122px로 피한다. */
@media (max-width: 899px) and (max-height: 500px) {
  html[data-theme="book"] .mobile-month-nav {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  html[data-theme="book"] body {
    padding-bottom: 80px !important;
  }
}

/* ============================================================
   18. 색인·모바일 월 이동 교정 — 버튼을 얹지 않고 책배를 판다

   month-index 전체가 가죽 단면이고, ::before가 그 위의 종이 책배다.
   반복 마스크의 투명 반달 12개를 통해 아래 가죽이 보이므로 홈들이
   서로 떨어진 버튼이 아니라 한 장의 종이에서 실제로 파인 것으로 읽힌다.
   ============================================================ */
html[data-theme="book"] .month-index {
  display: grid !important;
  /* 칸 수는 변수로 받는다. 달력은 12(기본값), 성경 본문 읽기 화면은 22묶음이다.
     ⚠️ 값을 안 주면 12 — 달력 동작은 그대로다. */
  grid-template-rows: repeat(var(--index-count, 12), minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: linear-gradient(90deg, #29180f 0%, #50301d 58%, #21130c 100%);
  border-right: 1px solid rgba(25, 13, 8, 0.86);
  box-shadow:
    inset 8px 0 12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 235, 190, 0.10);
}
html[data-theme="book"] .month-index::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(80, 58, 30, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(225, 211, 181, 0.72), transparent 18%),
    var(--paper);
  /* 파인 홈의 크기도 변수로 받는다. 달력은 12칸에 두 글자('1월')라 31×14 로 충분하지만,
     성경 본문 읽기 화면은 23칸에 세 글자('창출레')라 더 넓고 낮아야 글자가 홈 안에 든다.
     ⚠️ 값을 안 주면 31px 14px — 달력 동작은 그대로다. */
  -webkit-mask-image:
    radial-gradient(ellipse var(--index-notch-w, 31px) var(--index-notch-h, 14px) at 100% 50%, transparent 0 92%, #000 100%);
  mask-image:
    radial-gradient(ellipse var(--index-notch-w, 31px) var(--index-notch-h, 14px) at 100% 50%, transparent 0 92%, #000 100%);
  -webkit-mask-size: 100% calc(100% / var(--index-count, 12));
  mask-size: 100% calc(100% / var(--index-count, 12));
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  filter: drop-shadow(-2px 0 1px rgba(92, 65, 34, 0.38));
}
html[data-theme="book"] .month-index-link,
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible,
html[data-theme="book"] .month-index-link.is-current {
  z-index: 1;
  width: 100% !important;
  min-height: 0;
  padding: 0 3px 0 14px;
  justify-content: flex-end;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none;
  color: #d7c18d;
  opacity: 0.88;
}
html[data-theme="book"] .month-index-link::before {
  display: none;
}
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible {
  color: #fff0bc;
  opacity: 1;
}
html[data-theme="book"] .month-index-link:focus-visible {
  outline: 1px solid rgba(222, 183, 91, 0.9);
  outline-offset: -2px;
}
html[data-theme="book"] .month-index-link.is-current {
  color: #ffe5a0;
  opacity: 1;
  text-shadow: 0 1px 1px #160b07, 0 0 5px rgba(219, 171, 67, 0.72);
}
html[data-theme="book"] .month-index-link.is-current::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9ae50, transparent);
}

@media (max-width: 899px) {
  html[data-theme="book"] .page-right {
    display: block !important;
    position: relative;
  }

  html[data-theme="book"] .month-index {
    height: auto;
    bottom: 72px;
  }

  /* 월 이동 줄은 16절의 **하단 고정(플로팅 알약)** 그대로 둔다 —
     예전엔 여기서 정적 배치로 되돌렸는데, 후원·설정처럼 항상 아래 떠 있는 것이
     사용자 결정이다(2026-08-31). body 바닥 여백도 16절 것이 유효해야 한다. */
}

/* 표제 아래 쌍선·실선 → 끝이 흐려지는 한 줄 */
html[data-theme="book"] .login-header,
html[data-theme="book"] .register-header,
html[data-theme="book"] .release-title {
  border-bottom-color: transparent !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  background-image: linear-gradient(90deg,
      transparent 0%, rgba(120, 90, 45, 0.26) 12%,
      rgba(120, 90, 45, 0.26) 88%, transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important;
  background-size: 100% 1px !important;
}

@media (max-width: 899px) and (max-height: 500px) {
  /* 낮은 가로 화면의 우측 아래 설정 손잡이가 4·5월 색인을 덮는다.
     색인이 시작되기 전인 우측 위로 올려 월 라벨과 누르기 영역을 모두 지킨다. */
  html[data-theme="book"] body:has(.month-index) .fixed-dock {
    top: 10px !important;
    bottom: auto !important;
  }
  /* ⚠️ 손잡이만 위로 올리면 안 된다. 설정 카드(.dock-items)는 손잡이 **바닥**에 붙어
        위로 자라도록(bottom:0) 되어 있어서, 손잡이가 맨 위로 가면 카드가 화면 밖으로
        솟는다 — 780x390 에서 카드가 y=-100 부터 시작해 도움말·테마 두 줄이 통째로
        안 보였다(2026-08-27 실측). 손잡이가 위에 있으면 카드도 **아래로** 자라야 한다. */
  html[data-theme="book"] body:has(.month-index) .fixed-dock .dock-items {
    top: 0 !important;
    bottom: auto !important;
  }
  html[data-theme="book"] .month-index {
    height: min(70vh, 320px);
  }
}


/* ============================================================
   19. 실물 thumb-indexed Bible 기준 교정 (2026-08-24)

   실제 색인은 검은 버튼을 책 위에 붙이지 않는다.
   종이 책배에서 안쪽으로 파인 밝은 통로의 끝에 검은 반원 라벨이 있다.
   이 화면에서는 달력 폭을 지키기 위해 12개 홈을 한 열로 곧게 배열한다.
   ============================================================ */
html[data-theme="book"] .page-right .calendar-frame {
  margin-right: clamp(38px, 3.4vw, 44px);
}

html[data-theme="book"] .month-index {
  width: clamp(38px, 3.4vw, 44px);
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="book"] .month-index::before {
  display: none;
}

html[data-theme="book"] .month-index-link,
html[data-theme="book"] .month-index-link:hover,
html[data-theme="book"] .month-index-link:focus-visible,
html[data-theme="book"] .month-index-link.is-current {
  position: relative;
  width: 100% !important;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  outline: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none;
  opacity: 1;
}

/* 종이를 도려낸 통로 — 바깥 책배에서 반원 라벨까지 이어지는 밝은 절삭면 */
html[data-theme="book"] .month-index-link::before {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -1px;
  width: 31px;
  height: clamp(19px, 2.4vh, 24px);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(180deg,
      rgba(174, 151, 111, 0.72) 0%,
      #fff9e9 18%,
      #eadcc1 68%,
      rgba(145, 119, 78, 0.52) 100%);
  box-shadow:
    inset 1px 2px 3px rgba(82, 57, 27, 0.26),
    inset 0 -2px 2px rgba(255, 255, 255, 0.62),
    -1px 0 1px rgba(100, 72, 38, 0.20);
}

/* 통로 안쪽 끝의 검은 반원 라벨 */
html[data-theme="book"] .month-index-link::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  bottom: auto;
  width: 27px;
  height: clamp(17px, 2.1vh, 21px);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background:
    linear-gradient(90deg, #24130c 0%, #4a2b1a 72%, #28160e 100%);
  box-shadow:
    inset 3px 0 4px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 232, 180, 0.12);
}

html[data-theme="book"] .month-index-label {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 2px;
  width: 24px;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  color: #d9bd78;
  font-family: var(--serif-display);
  font-size: clamp(8px, 0.82vw, 10px);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 1px 1px #110906;
  pointer-events: none;
}
html[data-theme="book"] .month-index-label b {
  font: inherit;
  font-weight: 500;
}
html[data-theme="book"] .month-index-label small {
  font-size: 0.68em;
  color: inherit;
}
html[data-theme="book"] .month-index-link:hover::after,
html[data-theme="book"] .month-index-link:focus-visible::after {
  background: linear-gradient(90deg, #321b10, #684226 72%, #2a170e);
}
html[data-theme="book"] .month-index-link.is-current::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  width: 27px;
  height: clamp(17px, 2.1vh, 21px);
  transform: translateY(-50%);
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, #3a2113, #79502b 72%, #321b10);
  box-shadow:
    inset 3px 0 4px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(221, 174, 77, 0.58),
    0 0 4px rgba(205, 156, 60, 0.30);
}
html[data-theme="book"] .month-index-link.is-current .month-index-label {
  color: #ffe291;
}

/* 실제 책에서는 현재 위치보다 앞선 색인이 넘긴 종이 묶음과 함께 오른쪽 책배에서 사라진다.
   이 UI에서는 과거 월로 돌아가는 기능을 남겨야 하므로, 클릭 영역은 유지하고 잔상처럼 비친다.

   ⚠️ 예전엔 링크 **전체**에 opacity 를 걸었다. opacity 는 자식이 되돌릴 수 없어서
      라벨(글자)과 홈(그림)이 **같이** 종이 쪽으로 흐려졌고, 그러면 둘의 대비가 무너진다 —
      실측 1.77:1 로 누를 수 있는 것이 안 읽혔다(2026-08-27, WCAG AA 는 4.5:1).
      opacity 를 올려서 푸는 방법은 0.85 는 되어야 4.5 를 넘어(4.88:1) **잔상 연출이 사라진다.**
   ⭐ 그래서 흐리는 대상을 **그림(홈·로젠지)으로만** 좁힌다. 잔상은 그대로 두고 글자만 건져낸다.
      흐려진 로젠지는 밝은 베이지(rgb 167~181)가 되므로 라벨은 금박이 아니라 **먹**이어야 읽힌다. */
html[data-theme="book"] .month-index-link.is-past::before,
html[data-theme="book"] .month-index-link.is-past::after {
  opacity: 0.38;
}
html[data-theme="book"] .month-index-link.is-past:hover::before,
html[data-theme="book"] .month-index-link.is-past:hover::after,
html[data-theme="book"] .month-index-link.is-past:focus-visible::before,
html[data-theme="book"] .month-index-link.is-past:focus-visible::after {
  opacity: 0.72;
}
/* ⚠️ 그림자는 금박 글자를 검은 로젠지에서 띄우려던 것이다. 밝아진 로젠지 위에서는
      글자를 흐리게만 만든다. 이번달 탭(밝은 금박 on 가죽)과는 **색으로** 구분된다. */
html[data-theme="book"] .month-index-link.is-past .month-index-label {
  color: var(--ink);
  text-shadow: none;
}

@media (max-width: 899px) {
  html[data-theme="book"] .page-right .calendar-frame {
    margin-right: 40px;
  }
  html[data-theme="book"] .month-index {
    right: 0;
    width: 40px;
    bottom: 72px;
    height: auto;
  }
}

/* ── themes/dark.css ── */
/* ============================================================
   자동 테마의 어두운 판 — 기본(classic) 화면을 어둡게.
   ⭐ 스코프는 한 벌뿐이다:
      html[data-theme="classic"][data-sys="dark"]     — '자동' + 기기(브라우저)가 어두움
      (data-sys 는 base.html 부트 스크립트가 그리기 전에 찍는다)
   별도 '다크'·'자동' 선택지는 2026-09-02 에 뺐다 — 옛 쿠키 dark/auto 는 themes.py 가
   classic 으로 흡수한다.
   ⚠️ 새 배치는 만들지 않는다 — 색·명암만 바꾼다. 배치가 갈라지면 테마마다
      버그가 두 벌이 된다(플레이북 룰 6).
   ============================================================ */

html[data-theme="classic"][data-sys="dark"] {
  color-scheme: dark;
}

html[data-theme="classic"][data-sys="dark"] body {
  background: linear-gradient(135deg, #191d2e 0%, #241f36 100%);
  color: #dfe4f5;
}

html[data-theme="classic"][data-sys="dark"] .container {
  background: rgba(24, 27, 41, 0.96);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── 머리말·월 제목 ── */
html[data-theme="classic"][data-sys="dark"] .header {
  border-bottom-color: rgba(139, 156, 255, 0.14);
}
html[data-theme="classic"][data-sys="dark"] .month-title,
html[data-theme="classic"][data-sys="dark"] .header h1 {
  color: #eceffc;
}

/* ── 달력 ── */
html[data-theme="classic"][data-sys="dark"] .calendar-table th {
  background: linear-gradient(135deg, #3d4a86 0%, #4c3d78 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}
html[data-theme="classic"][data-sys="dark"] .calendar-table td {
  background: linear-gradient(135deg, #232840 0%, #262b45 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
}
html[data-theme="classic"][data-sys="dark"] .calendar-table td:hover {
  border-color: rgba(139, 156, 255, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
html[data-theme="classic"][data-sys="dark"] .day-number {
  color: #9daeff;
}

/* ── 범례·버전 배지 ── */
html[data-theme="classic"][data-sys="dark"] .legend-container {
  background-color: #1e2338;
}

/* ── 통계 카드 ── */
html[data-theme="classic"][data-sys="dark"] .stat-box {
  background: linear-gradient(135deg, rgba(32, 36, 56, 0.95) 0%, rgba(28, 32, 50, 0.95) 100%);
  border-color: rgba(139, 156, 255, 0.14);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── 항상 떠 있는 월 이동 줄 ── */
@media (max-width: 768px) {
  html[data-theme="classic"][data-sys="dark"] .mobile-month-nav {
    border-color: rgba(139, 156, 255, 0.3);
    background: rgba(26, 29, 46, 0.94);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}

/* ── 모달·입력 ── */
html[data-theme="classic"][data-sys="dark"] .modal-content,
html[data-theme="classic"][data-sys="dark"] .goal-modal-content {
  background: #20243a;
  color: #dfe4f5;
}
html[data-theme="classic"][data-sys="dark"] input,
html[data-theme="classic"][data-sys="dark"] select,
html[data-theme="classic"][data-sys="dark"] textarea {
  background: #171a2b;
  color: #e5e9f8;
  border-color: rgba(139, 156, 255, 0.25);
}

/* ── 바닥 사업자 정보 ── */
html[data-theme="classic"][data-sys="dark"] .business-info-compact {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #8a93b4;
}

/* ── 설정 도크 카드 ── */
html[data-theme="classic"][data-sys="dark"] .dock-items {
  background: #20243a;
  color: #dfe4f5;
}

/* ── 어두운 바탕 위 글자 — 1차 캡처에서 안 읽히던 것들 ── */
html[data-theme="classic"][data-sys="dark"] .legend,
html[data-theme="classic"][data-sys="dark"] .legend-item,
html[data-theme="classic"][data-sys="dark"] .stat-header,
html[data-theme="classic"][data-sys="dark"] .stat-box {
  color: #d6dbf0;
}
html[data-theme="classic"][data-sys="dark"] .business-info-line a,
html[data-theme="classic"][data-sys="dark"] .policy-links a {
  color: #9daeff;
}
html[data-theme="classic"][data-sys="dark"] .stats-days,
html[data-theme="classic"][data-sys="dark"] .stat-header h3 {
  color: #d6dbf0;
}
html[data-theme="classic"][data-sys="dark"] #monthly-stats-text,
html[data-theme="classic"][data-sys="dark"] #yearly-stats-text {
  color: #d6dbf0;
}
/* 통계 카드 제목 — calendar.css 가 #374151 로 박아 두어 어두운 카드에서 대비 1.5 였다
   (2026-09-02 tools/darkscan.mjs 실측, PC·모바일 공통). */
html[data-theme="classic"][data-sys="dark"] .stat-title {
  color: #eceffc;
}