/* frontend/css/book.css — 책 리더(NOA-BOOKS-CONTRACT v1 §5).
 *
 * 색은 전부 css/theme.css 토큰. 리터럴 색 금지(웹 다크모드 규약, 2026-09-09).
 * 본문 조판(.rv-kanji/.rv-read)과 단어 팝오버(.word-popover)는 이야기 리더와 같은
 * DOM 계약을 쓴다 — 규칙만 이 페이지 선택자 아래로 옮겨 적었다(reader.css·components.css
 * 원본은 #textDisplay/.reader-sent-current에 묶여 있어 그대로는 걸리지 않는다).
 * 반대로 「詳しく」 시트의 어휘 행은 reader.css 원본을 그대로 쓴다(book.html이 함께 로드).
 */

* { box-sizing: border-box; }
/* ★display를 지정한 클래스(.bk-reader·.bk-sheet)가 UA의 [hidden]{display:none}을
   눌러버린다 — 저자 스타일이 UA보다 우선이므로 여기서 다시 세운다. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* 홈 v1.3.1(§9-13): 가로 쓸어넘기기 내비 억제(크롬 안드로이드 — 뿌리에는 뒤로 갈 기록도 없다). 더블탭 확대는 theme.css. */
html, body { overscroll-behavior-x: none; }

/* ===== 책 목록 ===== */
/* 맨 위 줄 = 「은하」(.bk-list-top) — index 머리와 같은 기하: 윗 여백 = 텍스트 분석 화면의 여백(--page-pad 18/12)
   + 상단 인셋(--safe-top), 줄 높이 52(<700 48), 가운데 정렬(§9-2·§9-8). */
.bk-list {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  padding-top: calc(var(--page-pad, 18px) + var(--safe-top, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bk-list-top { display: flex; align-items: center; min-height: 52px; }
@media (max-width: 699px) { .bk-list-top { min-height: 48px; } }
.bk-card {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
}
.bk-card:hover { background: var(--hover-bg); }
.bk-card-title { font-size: 17px; font-weight: 700; color: var(--text-strong-b); }
.bk-card-author { font-size: 13px; color: var(--muted); flex: 1; }
.bk-card-progress { font-size: 13px; color: var(--tertiary); font-variant-numeric: tabular-nums; }

/* ===== 리더 뼈대 ===== */
.bk-reader {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.bk-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px;
  /* 상단 안전 여백(홈 v1.3 §9-8) — 인셋 + 홈 화면 앱에서는 텍스트 분석 화면의 윗 여백(theme.css --safe-gap).
     막대 높이는 그만큼 늘린다(종전 env()는 48 안에서 내용 칸을 깎았다). 브라우저(0)에서는 48·0 = 무변화. */
  height: calc(48px + var(--safe-top, 0px) + var(--safe-gap, 0px));
  padding-top: calc(var(--safe-top, 0px) + var(--safe-gap, 0px));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
html.app-shell .bk-top { height: 48px; padding-top: env(safe-area-inset-top); }   /* 앱 셸 무접촉(종전 값) */
.bk-book-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-body-2);
  border-radius: 10px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.bk-chip:hover { background: var(--hover-bg); }
/* 머리 모드 칸(BOOK-APP-READER §1) — 모양은 css/reader.css .header-mode-seg*(메인 헤더 세그먼트와 같은 규칙·토큰).
   여기서는 자리만: 줄어들지 않고 오른쪽 끝. ≤1023은 메인 헤더처럼 아이콘만(라벨은 aria-label). */
.bk-mode-seg { flex: 0 0 auto; }
.bk-mode-seg .header-mode-seg-cell { font-family: var(--home-font, inherit); }   /* 메인 헤더와 같은 글꼴(「은하」와 같음) */

/* ===== 본문 ===== */
.bk-body {
  flex: 1;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 12px;
  font-family: "Iowan Old Style", "Charter", "Georgia", "Noto Serif KR",
               "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 18px;
  line-height: 2.35;           /* 위 후리가나 자리 확보 */
  color: var(--reader-body-text);
  /* ★일본어 산문은 아무 글자에서나 줄을 바꾼다 — reader.css의 word-break:keep-all(한국어용)을
     그대로 쓰면 문장 하나가 끊기지 않는 덩어리가 되어 문장마다 줄이 바뀐다. */
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  /* 롱프레스 시 iOS 텍스트 선택 콜아웃(복사 메뉴) 차단 — reader.css와 같은 처리 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.bk-para { margin: 0 0 1.1em; text-indent: 1em; }
.bk-pause { min-height: 1em; margin-bottom: 1.1em; }   /* 공백 행(pause): 책의 빈 줄 */
.bk-sent {
  display: inline;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 2px;
  margin: 0 -2px;
  transition: background 0.18s;
}
.bk-sent:hover { background: var(--hover-bg); }
.bk-sent.is-active { background: var(--sentence-cur-bg); }
.bk-sent.is-loading { opacity: 0.55; }
.bk-sent.long-pressed {
  background: rgba(var(--green-rgb), 0.42);
  color: var(--gloss-active-deep);
  box-shadow: 0 0 0 2px rgba(var(--green-rgb), 0.5);
  transition: background 0.1s, box-shadow 0.1s;
}

/* 후리가나 — 한자 '구간' 위에만 (reader.css .reader-sent-current .rv-* 이식).
   ::before의 font-size는 .rv-read와 반드시 같아야 한다(보이지 않는 폭 사이저). */
.bk-body .rv-kanji {
  position: relative;
  display: inline-block;
  text-align: center;
  text-indent: 0; /* .bk-para 첫 줄 들여쓰기가 루비 상자·폭 사이저에 상속되면 상자마다 +1em 빈틈·루비 치우침 */
}
.bk-body .rv-kanji::before {
  content: attr(data-read);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-size: 10px;
  white-space: nowrap;
  padding: 0 1px;
}
.bk-body .rv-kanji .rv-read {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 500;
  color: var(--ruby);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
/* 조회된 단어 — components.css `#textDisplay p.current span.vh`와 같은 모양 */
.bk-body span.vh {
  padding: 0 1px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--line-faint-8);
}
.bk-body span.vh.hl { background: var(--hl-row); }

/* ===== 행동 줄 (§9-1) — 선택된 문장 바로 아래 한 줄 =====
   ★`<p>` 안에 들어가므로 블록 요소가 아니라 span(display:flex)이다. */
.bk-actions {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}
.bk-act {
  flex: 1;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-body-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.bk-act:hover { background: var(--hover-bg); }
.bk-act.is-busy { opacity: 0.45; }

/* ===== 하단(次へ·前へ + 상태줄) ===== */
.bk-foot {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bk-nav {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  padding: 10px 16px 6px;
}
.bk-nav-btn {
  flex: 1;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text-body-2);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.bk-nav-btn:hover:not(:disabled) { background: var(--hover-bg); }
.bk-nav-btn:disabled { opacity: 0.35; cursor: default; }
/* 상태줄 — 워프로 状態行과 같은 자리 감각(옅게, 한 줄) */
.bk-status {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px 16px 10px;
  color: var(--tertiary);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}

/* ===== 시트(目次 · 액션) ===== */
.bk-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bk-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-45);
}
.bk-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow: auto;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow);
}
.bk-sheet-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong-b);
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--line-faint);
}
.bk-toc-list { padding-top: 6px; }
.bk-toc-chapter + .bk-toc-chapter { margin-top: 12px; }
.bk-toc-chapter-title {
  margin: 10px 4px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.bk-toc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 9px 6px;
  font-size: 14px;
  color: var(--text-body-3);
  text-align: left;
  cursor: pointer;
}
.bk-toc-row:hover { background: var(--hover-bg); }
.bk-toc-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-idle);
}
.bk-toc-row.is-opened .bk-toc-mark { background: var(--green); }
.bk-toc-row.is-bookmark {
  background: rgba(var(--green-rgb), 0.12);
  color: var(--text-strong-b);
  font-weight: 700;
}
.bk-toc-row.is-current { box-shadow: inset 0 0 0 1px rgba(var(--green-rgb), 0.35); }
.bk-toc-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「頁」 책갈피 아이콘(10/6) — 쪽 위 막대와 같은 색. 보이는 것은 3×14 막대, 누르는 자리는 패딩으로 넓게(탭 = 책갈피 자리로) */
.bk-toc-bm { flex: none; display: inline-block; box-sizing: content-box; width: 3px; height: 14px; padding: 10px 9px; margin: -10px -6px -10px 0;
  background-clip: content-box; border-radius: 1px; }    /* content-box: 앱 전역 border-box면 패딩이 막대를 0으로 먹는다(10/6 실기기에서 안 보임) */
.bk-toc-bm.bm-recent { background-color: var(--bm-recent); }
.bk-toc-bm.bm-far { background-color: var(--bm-far); }
/* 오늘 눈금 — 문구 없는 옅은 선 하나 */
.bk-toc-tick {
  height: 1px;
  margin: 6px 6px;
  background: var(--line-faint-8);
}

/* ===== 「詳しく」 시트 (§9-2) =====
   어휘 행 자체는 css/reader.css의 .reader-vocab-table 규칙을 그대로 받는다.
   여기서는 시트 안에 놓기 위한 여백·＋ 칸·JLPT 칩만 더한다. */
.bk-detail .bk-sheet-panel { padding-top: 10px; }
.bk-detail-body { min-height: 60px; }
.bk-detail-body .reader-vocab-table { margin-top: 2px; }
.bk-detail-body .reader-vocab-table tbody tr { cursor: default; }
.bk-detail-body .rv-add { width: 44px; text-align: right; }
.bk-detail-body .bk-add {
  border: none;
  background: none;
  color: var(--green);
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.bk-detail-body .bk-add:disabled { opacity: 0.45; cursor: default; }
.bk-detail-body .rv-jlpt {
  display: inline-block;
  border-radius: 6px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  color: var(--on-accent);
}
.bk-detail-body .rv-jlpt.jlpt-n5 { background: var(--jlpt-n5-bg); }
.bk-detail-body .rv-jlpt.jlpt-n4 { background: var(--jlpt-n4-bg); }
.bk-detail-body .rv-jlpt.jlpt-n3 { background: var(--jlpt-n3-bg); }
.bk-detail-body .rv-jlpt.jlpt-n2 { background: var(--jlpt-n2-bg); }
.bk-detail-body .rv-jlpt.jlpt-n1 { background: var(--jlpt-n1-bg); }
html[data-theme="dark"] .bk-detail-body .rv-jlpt.jlpt-n5 { color: var(--jlpt-n5); }
html[data-theme="dark"] .bk-detail-body .rv-jlpt.jlpt-n4 { color: var(--jlpt-n4); }
html[data-theme="dark"] .bk-detail-body .rv-jlpt.jlpt-n3 { color: var(--jlpt-n3); }
html[data-theme="dark"] .bk-detail-body .rv-jlpt.jlpt-n2 { color: var(--jlpt-n2); }
html[data-theme="dark"] .bk-detail-body .rv-jlpt.jlpt-n1 { color: var(--jlpt-n1); }
/* 번역 — 문구 없이 문장만 */
.bk-detail-trans {
  margin: 2px 4px 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body-2);
}
/* 오류 — api.js가 던진 문구 그대로 */
.bk-detail-error {
  margin: 8px 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger-bright);
}
/* 대기 — 문구 없는 옅은 맥박 */
.bk-detail-wait {
  height: 3px;
  margin: 10px 4px;
  border-radius: 2px;
  background: var(--line-faint-8);
  animation: bk-wait 1.1s ease-in-out infinite;
}
@keyframes bk-wait { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }

/* ===== 단어 팝오버 (components.css .word-popover 이식) ===== */
.word-popover {
  position: fixed;
  z-index: 1200;
  width: 270px;
  max-width: calc(100vw - 24px);
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 10px 34px var(--overlay-35), 0 2px 8px var(--overlay-35);
  padding: 8px 12px;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  touch-action: none;
}
.word-popover .wp-subs { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
.word-popover .wp-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 9px 6px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  text-align: left;
}
.word-popover .wp-row:active { background: rgba(var(--green-rgb), 0.12); }
.word-popover .wp-row-word { font-weight: 700; color: var(--text-strong-b); flex-shrink: 0; }
.word-popover .wp-row-read { color: var(--ruby-2); font-size: 12px; flex-shrink: 0; }
.word-popover .wp-row-mean {
  color: var(--gloss);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.word-popover .wp-row-add { color: var(--green); font-weight: 800; font-size: 17px; flex-shrink: 0; }
.word-popover .wp-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--card);
  transform: rotate(45deg);
  bottom: -6px;
  margin-left: -6px;
}
.word-popover.below .wp-arrow { bottom: auto; top: -6px; }

/* ===== 토스트 (korzina.js 폴백이 쓰는 클래스, main.css 이식) ===== */
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 10px;
  color: var(--toast-fg);
  font-size: 14px;
  font-weight: 600;
  z-index: 100000;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger-bright); }
.toast-info { background: var(--info); }

/* ===== 데스크탑 ===== */
@media (min-width: 900px) {
  .bk-body { font-size: 19px; padding: 40px 24px 20px; }
  .bk-top { height: 52px; }
}