/* ========================================
   全画面リーダー
======================================== */

/* =====================================
[REF]
- HTML: .fullscreen-reader（全画面リーダー）
- JS: class付与（.epub-scroll 等）
- STATE: .epub-scroll
- LAYER: なし
- SPLIT: GROUP
===================================== */
.fullscreen-reader {
  position: fixed;
  inset: 0;
  background: var(--reader-bg);
  color: var(--reader-text);
}

/* モードインジケーター (Paginated / Scroll) */
.fullscreen-reader.show-mode-indicator::after {
  content: "PAGINATED";
  position: absolute;
  bottom: 8px;
  right: 12px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--font-family-mono, monospace);
  letter-spacing: 0.5px;
  background: rgba(128, 128, 128, 0.2);
  color: var(--reader-text);
  border-radius: 4px;
  opacity: 0.4;
  pointer-events: none;
  z-index: var(--z-float-ui, 2000);
  transition: opacity 0.3s ease;
}

.fullscreen-reader.show-mode-indicator.epub-scroll-mode::after {
  content: "SCROLL";
  background: rgba(128, 128, 128, 0.4);
  opacity: 0.6;
}

/* =====================================
[REF]
- HTML: #fullscreenReader（リーダーコンテナ）
- JS: なし
- STATE: なし
- LAYER: z-index
- SPLIT: GROUP
===================================== */
#fullscreenReader {
  z-index: var(--z-reader);
}

/* =====================================
[REF]
- HTML: #fullscreenReader iframe（EPUB iframe）
- JS: iframe生成/更新（JSで制御）
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
#fullscreenReader iframe {
  pointer-events: auto;
}

/* =====================================
[REF]
- HTML: .viewer（ビューア）
- JS: class操作（.visible等）
- STATE: .visible
- LAYER: なし
- SPLIT: GROUP
===================================== */
.viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 縦書きモード用の調整 */
.viewer[style*="writing-mode: vertical-rl"] {
  overflow-y: hidden;
  overflow-x: auto;
}

/* =====================================
[REF]
- HTML: .epub-page（EPUBページ）
- JS: CSS変数（--reader-*）をJSで更新
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
/* EPUBコンテンツのレスポンシブレイアウト */
.epub-page {
  max-width: var(--reader-max-width);
  margin: 0 auto;
  text-align: var(--reader-text-align);
  line-break: var(--reader-line-break);
  word-break: var(--reader-word-break);
}

/* 表示側のタイポグラフィを計算側と同期（SSOT） */
.epub-page {
  line-height: var(--reader-line-height) !important;
  orphans: var(--reader-orphans) !important;
  widows: var(--reader-widows) !important;
}

.epub-page p {
  margin: 0 0 var(--reader-paragraph-margin) 0 !important;
}

/* =====================================
[REF]
- HTML: .epub-page ruby/img（ルビ・画像）
- JS: なし
- STATE: なし
- LAYER: なし
- SPLIT: GROUP
===================================== */
/* ルビ・画像の途中改ページ防止 */
.epub-page ruby,
.epub-page img {
  break-inside: avoid;
}

/* =====================================
[REF]
- HTML: .reader-fullscreen-img / .reader-gaiji-img
- JS: reader.js (画像サイズ調整)
- STATE: なし
- LAYER: なし
- SPLIT: COMPONENT
===================================== */
.reader-fullscreen-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.reader-gaiji-img {
  width: var(--img-gaiji-size, 1em);
  height: var(--img-gaiji-size, 1em);
  object-fit: contain;
  display: inline-block;
  vertical-align: text-bottom;
  margin: 0;
  padding: 0;
}

/* =====================================
[REF]
- HTML: .fullscreen-reader.epub-scroll .viewer（スクロールモード）
- JS: .epub-scroll を付与
- STATE: .epub-scroll
- LAYER: なし
- SPLIT: GROUP
===================================== */
/* EPUBスクロールモード */
.fullscreen-reader.epub-scroll-mode .viewer {
  overflow-y: scroll !important;
  /* スクロールバー用のガターを常に確保し、レイアウトシフトを防ぐ */
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.fullscreen-reader.epub-scroll-mode .viewer[style*="writing-mode: vertical-rl"] {
  overflow-y: hidden !important;
  overflow-x: scroll !important;
  /* 横方向のスクロールバーを強制 */
}

/* Join Mode (継続スクロール) 用の章ごとのラップ要素 */
.joined-spine-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 縦書きモード時のラップ要素調整 */
.viewer[style*="writing-mode: vertical-rl"] .joined-spine-item {
  width: auto;
  height: 100%;
  display: inline-block;
}

/* スクロールモードでは click-overlay のイベント検知を無効化し、
   ビューア内のナビゲーションボタンへクリックが透過するようにする。
   M3（中央クリックでメニュー開閉）は document レベルの click リスナーで
   検知しているため、引き続き動作する。 */
.fullscreen-reader.epub-scroll-mode .click-overlay {
  pointer-events: none;
}

/* =====================================
[REF]
- HTML: .click-overlay（クリック検知）
- JS: .visible による表示制御
- STATE: .viewer.visible
- LAYER: z-index
- SPLIT: GROUP
===================================== */
/* クリチE��検知用オーバ�Eレイ */
.click-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-click-overlay);
  pointer-events: all;
  background: transparent;
  display: none;
}

/* =====================================
[REF]
- HTML: .viewer.visible ~ .click-overlay（可視状態）
- JS: .visible 切替
- STATE: .visible
- LAYER: なし
- SPLIT: GROUP
===================================== */
.viewer.visible~.click-overlay {
  display: block;
}

/* =====================================
[REF]
- HTML: .fullscreen-reader.epub-scroll-mode .click-overlay（スクロール時無効）
- JS: .epub-scroll-mode
- STATE: .epub-scroll-mode
- LAYER: なし
- SPLIT: GROUP
===================================== */
.fullscreen-reader.epub-scroll-mode .click-overlay {
  display: none !important;
  pointer-events: none !important;
}

/* =====================================
[REF]
- HTML: .epub-scroll-nav-group / .epub-scroll-nav-btn
- JS: reader.js (injectScrollNavigationButtons)
- STATE: epub-scroll-mode
- LAYER: なし
- SPLIT: COMPONENT
===================================== */
.epub-scroll-nav-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px auto;
}

.viewer[style*="writing-mode: vertical-rl"] .epub-scroll-nav-group {
  flex-direction: row;
  margin: auto 32px;
}

.epub-scroll-nav-btn {
  padding: 12px 24px;
  margin: 8px;
  font-size: 1rem;
  border-radius: 24px;
  background-color: var(--theme-surface-2, rgba(128, 128, 128, 0.2));
  color: var(--theme-text-1, inherit);
  border: 1px solid var(--theme-border, rgba(128, 128, 128, 0.5));
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.epub-scroll-nav-btn:hover {
  opacity: 0.8;
  background-color: var(--theme-surface-3, rgba(128, 128, 128, 0.3));
}