/* frontend/css/bookPage.css — 책 「頁」 뷰(계약 ~/Desktop/control/BOOK-PAGE-READER.md §0·§3).
 *
 * 쪽이 전부다: 화면에는 책의 한 쪽만. 테두리·그림자·종이 질감·페이지 컬·아이콘 없음.
 * 기하(px)는 js/book/pageRender.js가 책의 pt × 배율 k로 인라인에 적는다 — 여기는 활자·색·상태만.
 * 색은 전부 css/theme.css 토큰(리터럴 금지). 상태 표시는 글자색 하나: ON = --text, OFF = --tertiary.
 */

/* 바탕 = 리더 모드 본문 토큰(--reader-bg: 라이트 #fafaf6 / 다크 #121712) — 쪽 상자와 상자 밖이 같은 색(테두리 없음). */
body.pg-mode { overflow: hidden; background: var(--reader-bg); }

.pg-view {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--reader-bg);
  touch-action: none;                    /* 가로 끌기·길게 누름은 우리가 받는다(js/book/pageInput.js) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* 폰(맞춤 배율로 본문 활자 14px 미만): 높이만 맞추고 쪽 상자를 가로로 스크롤. 시작 = 오른쪽 끝. 스냅 없음. */
.pg-view.is-scroll { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; }

.pg-stage { position: absolute; }

.pg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  background: var(--reader-bg);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 400;
  color: var(--reader-body-text, var(--text));
  font-kerning: none;
  font-synthesis: none;
}

/* ===== 본문 열 — 縦書き, ベタ組み(字送り = 활자 + letter-spacing) ===== */
.pg-col {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;                   /* 열 = 책의 한 행. 열 끝은 쪽 모델이 정한다(줄바꿈 없음) */
  font-size: var(--pg-font);
  letter-spacing: var(--pg-ls);
  line-height: var(--pg-line);
  width: var(--pg-line);
  height: var(--pg-band);
  font-kerning: none;
  /* ベタ組み 격자: 연속 약물(。」 등)을 반각으로 줄이지 않는다(Chrome text-spacing-trim 기본값이 열 끝을 0.5em
     당긴다) · 한자-영숫자 사이 자동 간격 없음. 꽉 찬 열은 모두 본문 띠 끝에서 끝난다(책의 열 끝 = 화면의 열 끝). */
  text-spacing-trim: space-all;
  text-autospace: no-autospace;
}
.pg-col.pg-ch { height: auto; }

/* ===== 가로쓰기(横書き, 가로 화면 — .pg-h) — 열이 행이 된다. 쪽·행 나눔 동일, 쓰기 방향만 ===== */
.pg-h .pg-col {
  writing-mode: horizontal-tb;
  width: var(--pg-band);                 /* 행 길이 */
  height: var(--pg-line);
}
.pg-h .pg-col.pg-ch { width: auto; height: auto; }
.pg-h .pg-rule { width: auto; height: 0; border-left: 0; border-top: 1px dotted var(--tertiary); }
.pg-h .pg-rt {                           /* 루비는 글자 위에 */
  left: 50%;
  top: auto;
  bottom: 100%;
  transform: translateX(-50%);
  margin: 0 0 0.02em 0;
  writing-mode: horizontal-tb;
}
.pg-h .pg-tcy, .pg-h .pg-up { text-combine-upright: none; -webkit-text-combine: none; }
/* 가로 화면이어도 여백의 세로쓰기(장면 정보·頭注 카드)는 세운다 */
.pg-h .pg-scene .pg-tcy, .pg-h .pg-scene .pg-up, .pg-h .pg-hn-side .pg-tcy, .pg-h .pg-hn-side .pg-up { text-combine-upright: all; -webkit-text-combine: horizontal; }
/* 扉 — 장 라벨·제목 열을 가르는 점선(책에 인쇄된 괘선, 장식 아님). 기하는 js/book/pageGeometry.js CHAPTER_PAGE. */
.pg-ch-title { letter-spacing: 0; }
.pg-rule { position: absolute; width: 0; border-left: 1px dotted var(--tertiary); }

/* 루비 — 열 오른쪽 틈에 절대 배치(.pg-rb는 base, .pg-rt는 읽기). 본문 배치에 관여하지 않으므로 한자 영역 밖으로
   자유롭게 넘친다(크기 = pageRender.js RUBY_EM 0.6em, 이웃과 겹칠 때만 rubySizes가 줄인다). 끄기 = visibility:hidden
   (WebKit은 display:ruby-text 값을 버린다 — 10/5 실측). ON = 쪽 전체(「ルビ」) · 注가 열린 문장(.pg-note) · 작가 루비(.pg-ar, 항상). */
.pg-rb { position: relative; }
.pg-rt {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.06em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  font-weight: 400;
  color: inherit;
  visibility: hidden;
  pointer-events: none;
}
.pg-view.ruby-all .pg-rt,
.pg .pg-s.is-cur .pg-rt,                  /* 현재 문장(음영)은 「ルビ」가 꺼져 있어도 루비(10/6 형권님) */
.pg .pg-s.pg-note .pg-rt,
.pg .pg-rb.pg-ar .pg-rt { visibility: visible; }

/* 訳 = 덩어리 직역(js/book/pageGloss.js, 10/6) — 현재 문장의 의미 덩어리 곁, 루비 반대편 틈(세로쓰기 = 열 왼쪽 · 가로쓰기 = 행 아래).
   자리·크기는 JS가 정한다(덩어리 가운데 맞춤, 이웃 겹침 축소·밀기, 화면 경계 축소). 누름은 본문으로 흘려보낸다. */
.pg-gl {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0;
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 400;
  color: var(--gloss);
  pointer-events: none;
}
.pg-h .pg-gl { writing-mode: horizontal-tb; }
/* 직역과 겹친 루비(pageGloss.js apply) — 현재 문장 루비는 반대쪽으로(.rb-flip), 갈 곳이 없거나 다른 문장 루비면 숨김(.rb-hide) */
.pg-rb.rb-flip > .pg-rt { left: auto; right: 100%; margin-left: 0; margin-right: 0.06em; }
.pg-h .pg-rb.rb-flip > .pg-rt { left: 50%; right: auto; bottom: auto; top: 100%; margin: 0.02em 0 0 0; }
.pg-view .pg .pg-rb.rb-hide > .pg-rt { visibility: hidden; }

/* 책갈피(js/book/pageMarks.js, 10/6) — 문장과 문장의 경계에 색 막대 하나. 최근 = 藍 · 최원 = 朱 · 같은 자리면 반씩 */
.pg-bm { position: absolute; pointer-events: none; border-radius: 1px; }
.pg-bm.bm-recent { background: var(--bm-recent); }
.pg-bm.bm-far { background: var(--bm-far); }
.pg-bm.bm-scene { background: var(--bm-scene); }          /* 장면 경계 — 새 장면 첫 줄 첫머리(目次에는 없다) */
.pg-bm.bm-both { background: linear-gradient(to right, var(--bm-recent) 50%, var(--bm-far) 50%); }
.pg-h .pg-bm.bm-both { background: linear-gradient(to bottom, var(--bm-far) 50%, var(--bm-recent) 50%); }

/* 傍点 — 글자마다 점 하나를 열 오른쪽(가로쓰기 = 위)에 절대 배치. 네이티브 text-emphasis는 쓰지 않는다: WebKit이 점 자리만큼
   그 열의 줄 상자를 넓혀 글자가 격자에서 0.58em 왼쪽으로 밀리고(직역이 글자를 덮음) 루비가 점 바깥으로 밀려난다(10/6 실측).
   점은 루비처럼 본문 배치에 관여하지 않는다. 모양 = filled sesame(U+FE45). */
.pg-em { position: relative; }
.pg-em::after {
  content: "\FE45";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.02em;
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  pointer-events: none;
}
.pg-h .pg-em::after { left: 50%; top: auto; bottom: 100%; transform: translateX(-50%); margin: 0 0 0.02em 0; writing-mode: horizontal-tb; }
/* 縦中横 — ASCII 숫자 1~2자 연속만 이 요소로 감싼다(= text-combine-upright: digits 2; Blink·WebKit은 digits 미지원) */
.pg-tcy { text-combine-upright: all; -webkit-text-combine: horizontal; letter-spacing: 0; }
/* 縦中横 밖의 ASCII 영문·숫자 한 글자 — 세워서 한 칸(1em)에 하나(원본 조판: BMW·1800cc·6800円). 한 글자 縦中横 = 칸 폭이 정확히 1em */
.pg-up { text-combine-upright: all; -webkit-text-combine: horizontal; letter-spacing: 0; }

/* 음성 띠 — 선택(=재생) 문장의 모든 조각, 즉시(전환 없음) */
.pg-s.is-cur { background: var(--sentence-cur-bg); border-radius: 2px; }

/* ===== 여백의 글자 — 柱와 같은 활자(명조), 가로 한 줄 ===== */
.pg-row {
  position: absolute;
  display: flex;
  height: 44px;
  white-space: nowrap;
}
.pg-row-l { margin-left: -0.75em; }      /* 글자 끝이 여백 기준선에 오도록 패딩만큼 바깥으로 */
.pg-row-r { margin-right: -0.75em; }
.pg-row-c { left: 50%; transform: translateX(-50%); }   /* 「前」「再生」「次」 가운데 */
.pg-row-l .pg-ctl { text-align: left; }                  /* 44px 터치 폭 안에서 글자는 여백 기준선에 */
.pg-row-r .pg-ctl { text-align: right; }
.pg-num { color: var(--muted); font-variant-numeric: tabular-nums; }   /* 쪽 번호 — 왼쪽 아래 구석, 숫자만, 탭 = 目次 */
.pg-more { letter-spacing: 0.1em; }                                   /* 「…」 설정 */
/* 장면 정보(js/book/pageMarks.js) — 柱 자리: 세로 화면 위 띠 가운데 한 줄 / 가로 화면 왼쪽 여백 세로쓰기. 章 제목만 말줄임, 번호는 늘 보임. 탭 = 目次 */
.pg-scene { position: absolute; display: flex; justify-content: center; align-items: center; min-width: 0; padding: 0;
  color: var(--muted); white-space: nowrap; overflow: hidden; }
.pg-scene-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-scene-n { flex: none; margin-left: 1em; }
.pg-h .pg-scene-n { margin-left: 0; margin-top: 1em; }
.pg-h .pg-scene { writing-mode: vertical-rl; height: auto; line-height: 1.2; justify-content: flex-start; }

/* ===== 조작 캡슐(js/book/pageCapsule.js) — 보기에 붙는 알약 하나: 「次」「再生/停止」「前」 =====
   겹치지 않을 때: 글자만(테두리는 가는 선). 본문과 겹칠 때(.is-over): 글자를 지우고 구역을 가는 선·옅은 음영으로만.
   들림(.is-lift): 테두리가 진해지고 살짝 떠 보인다. 색은 토큰만. */
.pg-cap {
  position: absolute;
  z-index: 3;
  width: 168px;
  height: 44px;
  display: flex;
  border: 1px solid var(--line-faint);
  border-radius: 22px;
  background: none;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.pg-cap-z {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  line-height: 42px;
  font-size: 15px;
  text-align: center;
  color: var(--tertiary);
  background: none;
}
.pg-cap-z + .pg-cap-z { border-left: 1px solid var(--line-faint); }
.pg-cap-z.is-press { background: var(--line-faint-8); color: var(--text); }   /* 누르는 동안 — 본문 위(글자 없음)에서도 눌림이 보인다 */
.pg-cap.is-over .pg-cap-z.is-press { color: transparent; }
.pg-view.is-h .pg-cap { flex-direction: row-reverse; }                         /* 가로쓰기(횡서): 前 · 再生 · 次 */
/* 가로쓰기 좌우 여백의 글자(戻る · … · 쪽 번호) — 여백(≈67px) 안에 들어가게 패딩을 줄인다(터치 높이 44는 유지) */
.pg-h .pg-row-l, .pg-h .pg-row-r { margin: 0; }
.pg-h .pg-row-l .pg-ctl, .pg-h .pg-row-r .pg-ctl { padding: 0 0.3em; min-width: 0; }
.pg-view.is-h .pg-cap-z + .pg-cap-z { border-left: 0; border-right: 1px solid var(--line-faint); }
.pg-cap .pg-play.is-on,
.pg-cap.is-playing .pg-play { color: var(--text); }
.pg-cap.is-over { border-color: var(--line-faint-8); background: var(--line-faint-4); }   /* 본문 위: 알약 윤곽은 보이되 글자는 비치게 */
.pg-cap.is-over .pg-cap-z { color: transparent; }
.pg-cap.is-over .pg-cap-z + .pg-cap-z { border-left-color: var(--line-faint-8); }
/* 가운데 구역 음영은 두지 않는다(10/5 형권님: 신경 쓰임) — 구역은 선으로만, 재생 중일 때만 가운데 아래 밑줄 */
.pg-cap.is-over.is-playing .pg-play { box-shadow: inset 0 -2px 0 var(--muted); }
.pg-cap.is-lift { border-color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }

/* 「頁」 보기가 떠 있는 동안 시트(目次·설정)도 더블탭 줌 없음 */
body.pg-mode .bk-sheet { touch-action: manipulation; }

/* ===== 설정 시트 행 — ルビ · 訳 · 自動 (켜짐 = --text, 꺼짐 = --tertiary) ===== */
.pg-set-row {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 17px;
  color: var(--tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pg-set-row.is-on { color: var(--text); }
.pg-set-row + .pg-set-row { border-top: 1px solid var(--line-faint); }
.pg-set-row:focus { outline: none; }
.pg-num.is-press { color: var(--text); }
.pg-ctl {
  display: block;
  height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 0.75em;                     /* 글자 사이 1.5em · 터치 44×44(보이지 않음) */
  border: 0;
  background: none;
  font: inherit;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  color: var(--tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pg-ctl:focus { outline: none; }
.pg-ctl:focus-visible,
.pg-ctl.is-on,
.pg-ctl.is-press { color: var(--text); }
.pg-back { color: var(--muted); }
.pg-back.is-press { color: var(--text); }

/* ===== 注 — 여백에 적는다(본문 위에 띄우지 않는다) ===== */
.pg-hn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  white-space: nowrap;
  line-height: 1.2;
  overflow: hidden;
}
.pg-hn-w { color: var(--text); font-weight: 600; flex: 0 0 auto; }
.pg-hn-r { color: var(--muted); flex: 0 0 auto; }
.pg-hn-m { color: var(--text); font-weight: 400; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-hn-wait { color: var(--tertiary); }
.pg-hn-add {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 28px;
  color: var(--tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pg-hn-add.is-press,
.pg-hn-add.is-done { color: var(--text); }
.pg-hn-add:focus { outline: none; }

/* 번역 — 위 줄 가운데(「戻る」와 토글 사이), 두 줄까지(넘치면 말줄임). 본문 위에 띄우지 않는다. 訳 모드가 꺼지면 요소 없음. */
/* ===== 가로쓰기 오른쪽 여백 세로 단(js/book/pageSide.js) — 어휘(頭注). 세로쓰기, 단은 오른쪽부터 왼쪽으로 ===== */
.pg-hn.pg-hn-side {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  overflow: hidden;
  white-space: normal;
  line-height: 1.5;
  color: var(--text);
}
.pg-hn.pg-hn-side.is-wait { color: var(--tertiary); }
.pg-sidecol {                           /* 단 하나 = 직접 끊은 한 줄(줄바꿈 없음) */
  display: block;
  writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: 0;
}
.pg-hn.pg-hn-side .pg-hw { color: var(--text); font-weight: 600; margin-left: 0.2em; }
.pg-hn.pg-hn-side .pg-mean { color: var(--text); font-weight: 400; }
.pg-hw-rb { position: relative; }
.pg-hw-rt {                             /* 한자 run의 읽기 — 본문 루비와 같은 자리(오른쪽 틈)·같은 비율(0.6em) */
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.05em;
  font-size: 0.6em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  writing-mode: vertical-rl;
  color: var(--text);
}
.pg-hn.pg-hn-side .pg-hn-add { display: block; width: auto; height: auto; min-width: 0; line-height: 1; margin-top: 0.5em; padding: 0; }

/* 이야기 「頁」 目次 = 이야기 목록(STORY-PAGE-READER §4-1, js/book/storySource.js) — 행 오른쪽 날짜(데이터) */
.bk-toc-date { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }