/* book.css ── デジタルブック本体（book.html）専用スタイル
   現状は簡易ビューア。StPageFlip組み込みはフェーズ3。 */

/* デジタルブックのビューア背景は、ごく薄い暖色グレー（紙のような落ち着いた地色）。
   ひとりごこち作品集の地色に寄せた値。誌面（白）が背景に浮いて見える効果も兼ねる。
   book.css は book.html 専用に読み込まれるため、本棚(index.html)の暗い配色には影響しない。 */
html, body { background: #ebeae7; }
/* 号タイトル(#book-meta)は通常フローで本文末尾に流れ、position:fixed の操作バー(.viewer-controls)と
   下部で重なってしまう。ビューア下部に号タイトルの表示枠は無く（ページャーが情報を兼ねる）、
   本棚側(shelf.css)でも非表示にしているので、ここでも隠す。 */
.footer-meta { display: none; }

.book-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#book-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- StPageFlip 本体 --- */
.flip-wrap {
  position: fixed;
  inset: 0 0 104px 0;         /* 下部の操作バーとの間に“ほどよい”余白を確保（旧64px→104px） */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* StPageFlip(stretch)は #flip の親要素の幅を計測して伸縮する。
   その親(.flip-sizer)の幅を「画面の高さ」基準でクランプして縦はみ出しを防ぐ。
   2ページ分 × ページ横縦比。横縦比は号ごとに違う（9号以降=A4 0.708／4〜8号=210×250mm 0.84）ため
   book.js が issues.json の pageWidth/pageHeight から --page-ratio を入れる。未設定時は A4 の 0.708。 */
.flip-sizer {
  width: min(96vw, calc((100vh - 150px) * 2 * var(--page-ratio, 0.708)));
}
#flip { width: 100%; margin: 0 auto; }

@media (max-width: 760px) {
  /* 単ページ表示。1ページ分の横縦比（号ごと。上の --page-ratio 参照） */
  .flip-sizer { width: min(96vw, calc((100vh - 150px) * var(--page-ratio, 0.708))); }
}
/* StPageFlipが生成するページ面（HTML描画モード）。 */
.stf__parent { margin: 0 auto; }
/* 本の落ち影（薄グレー地に本がそっと浮く、ひとりごこちのカード影に相当）。
   drop-shadow は透明部分を無視し“見えているページの形”に沿って影を落とすため、
   表紙・裏表紙（単独＝見開き枠の半分だけが中身）でも、その半分だけに正しく影が付く。
   box-shadow だと常に見開き全幅(2ページ分)の箱に落ち、表紙では空いた半分にも影が回って破綻する。
   中央の綴じ影(.fold-shadow)とは別物。めくり中(.flipping)は3D回転と相性が悪く毎フレーム再計算も重いので外す。
   ※ StPageFlip は #flip 自身に .stf__parent を付与する（子要素ではない）ので #flip に直接かける。 */
/* 影の数値は大島さん指定（Illustratorドロップシャドウのスクショ準拠）：
   描画モード=乗算 / 不透明度=13% / Xオフセット=0 / Yオフセット=0 / ぼかし=5px / 黒。
   乗算13%黒は薄い地色(#ebeae7)の上では rgba(0,0,0,.13) のdrop-shadowでほぼ等価。 */
#flip:not(.flipping) {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.13));
}
/* 見開きは元々1枚の誌面を左右に割ったもの。中央の継ぎ目（黒線/白線）を完全に消すため、
   各ページ画像を左右へ1pxずつはみ出させて重ねる（隙間ゼロ・背景色に依存しない）。
   重なる中央1〜2pxは同じ写真の連続なので見た目に影響しない。 */
#flip .page { background: transparent; overflow: visible; }
/* まだ読み込んでいないページ（data-src が残っている）は紙の白で置いておく＝抜けて見えない */
#flip .page img[data-src] { background: #fff; }
#flip .page img {
  width: calc(100% + 2px);
  height: 100%;
  margin-left: -1px;
  display: block;
  object-fit: fill;
}

/* --- 右綴じ（RTL）：#flip 自体を左右反転して右→左に読む配置・めくり方向にし、
       画像だけ再反転して中身は正立させる（#flipはStPageFlipのinline styleが付かない）。 --- */
#flip.rtl { transform: scaleX(-1); }
.rtl .page img { transform: scaleX(-1); }

/* 表紙・裏表紙の中央寄せ（transform）と、端ページのクロスフェード（opacity）を両立。
   端ページのめくりは3D回転を使わず opacity フェードで開閉する（右綴じの鏡像とhard回転の衝突回避）。
   transform は transition から外す（横スライドが煩わしいため瞬時切替・opacity フェードのみ残す）。 */
#flip { transition: opacity .22s ease; }

/* 自前の綴じ影（薄め）：見開き中央に置く柔らかいグラデ。位置・高さはJSで誌面に合わせる。
   ハードな継ぎ目線は画像の重ね合わせで消し、これは“紙が綴じで少し沈む”影だけを薄く再現。 */
.fold-shadow {
  position: fixed;
  z-index: 5;          /* ページ画像(#flip内 z:auto)より前面に。左右矢印とは中央で交差しない */
  width: 96px;
  transform: translateX(-50%);
  pointer-events: none;
  display: none;
  opacity: 1;
  transition: opacity .18s ease;   /* めくり中はopacity:0へフェード退避（めくれるページに乗らない） */
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.033) 22%,
    rgba(0, 0, 0, 0.115) 44%,
    rgba(0, 0, 0, 0.135) 50%,
    rgba(0, 0, 0, 0.115) 56%,
    rgba(0, 0, 0, 0.033) 78%,
    rgba(0, 0, 0, 0) 100%);
}

/* 綴じをシミュレーションした中央の影（stf__innerShadow系）は残す。
   ※ハードな継ぎ目線は別途、画像の重ね合わせで消している。 */

/* --- 簡易ビューア（フォールバック） --- */
.viewer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  user-select: none;
}

/* 画面左右半分を送りゾーンに（透明・ホバーで薄く明示） */
.nav-zone {
  position: fixed;
  top: 0;
  width: 30vw;
  height: 100vh;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
/* 右綴じ：左ゾーン=進む / 右ゾーン=戻る */
.nav-next { left: 0; }
.nav-prev { right: 0; }
.nav-zone:hover { background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent); }
.nav-prev:hover { background: linear-gradient(270deg, rgba(255,255,255,0.04), transparent); }

/* 本の左右の送りボタン（常時表示・分かりやすい矢印）
   ※見た目・配置の本定義はすべて下の「左右サイド矢印（SVG版）」ブロックに集約した。
     以前ここにあった円形ボタン版の :hover ルールは background ショートハンドで
     矢印SVG(background-image)を打ち消し、ホバー時に矢印が消える原因だったため撤去。 */

/* 下部の操作バー（半透明・控えめ） */
.viewer-controls {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--overlay);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(159, 179, 173, 0.2);
}
.viewer-controls .btn-overlay { padding: 6px 14px; }
.viewer-controls .btn-overlay[disabled] { opacity: 0.35; cursor: default; }
.indicator {
  color: var(--ink-sub);
  font-size: 13px;
  min-width: 110px;
  text-align: center;
  letter-spacing: 0.03em;
}

/* フェーズ3未実装時／号未指定時の案内表示 */
.book-placeholder {
  text-align: center;
  color: var(--ink-sub);
  max-width: 480px;
  padding: 24px;
}
.book-placeholder h2 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 500;
}
.book-placeholder a { color: var(--accent); text-decoration: underline; }

/* ===========================================================================
   ニューモーフィズム上書き（参考イメージ準拠）
   誌面画像（#flip / .page）は一切触らず、操作系（下部バー・左右矢印）だけを
   「地色と同色＋左上=白／右下=濃グレーの二重影」で柔らかく浮き出るボタンにする。
   アクセントはコーラルピンク。常時アクティブな“進む”だけ淡いピンクで差す。
   common.css の暗いトークン(--overlay/--bg-navy/--ink 等)を後勝ちで上書きする。
   =========================================================================== */


/* ===========================================================================
   操作系UI＝支給見本SVG（アセット2/3=サイド矢印・4=TOP・5=ページャー）通りに復元。
   上のニューモーフィズム指定を、この最終ブロックが後勝ちで上書きする。
   白ピル＋薄灰の丸ボタン＋白丸＋細線シェブロンのフラットデザイン。誌面画像には触れない。
   =========================================================================== */

/* --- 左右サイド矢印：白丸＋細線＋シェブロンのSVGをそのまま表示。
       JS内の‹›グリフは font-size:0 で隠す（このCSSだけで完結させるため）。 --- */
.side-arrow {
  position: fixed;              /* 配置（旧ブロック撤去に伴いここへ集約） */
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  cursor: pointer;
  width: 116px;
  height: 52px;
  border-radius: 0;             /* ← 重要：元の50%円形クリップを解除（SVGが楕円に切れる原因） */
  font-size: 0;                 /* JSの‹›グリフを隠す */
  color: transparent;
  background: transparent center / contain no-repeat;
  border: none;
  box-shadow: none;
  padding: 0;
  opacity: 1;                   /* 常時くっきり表示 */
  transition: none;
}
/* ブラウザ枠から 28px 離す（大島さん指示） */
.side-left  { left: 28px;  background-image: url(../assets/ui/arrow-left.svg); }
.side-right { right: 28px; background-image: url(../assets/ui/arrow-right.svg); }
/* ホバーでも消さない・薄くしない（常時表示のまま） */
.side-arrow:hover,
.side-arrow:focus-visible { background-color: transparent; box-shadow: none; opacity: 1; outline: none; }
.side-arrow:active { box-shadow: none; }
.side-arrow[disabled] { opacity: .25; box-shadow: none; cursor: default; }

/* ホバーで進行方向へ「チョンチョン」と軽く2回ナッジ（指で軽くつつく動き）。
   ベースの translateY(-50%)（縦中央寄せ）を保持したまま translateX を振る。
   左矢印=進む方向＝左へ、右矢印=戻る方向＝右へ。無効時は動かさない。 */
@keyframes side-nudge-left {
  0%   { transform: translateY(-50%) translateX(0); }
  25%  { transform: translateY(-50%) translateX(-7px); }
  50%  { transform: translateY(-50%) translateX(0); }
  75%  { transform: translateY(-50%) translateX(-7px); }
  100% { transform: translateY(-50%) translateX(0); }
}
@keyframes side-nudge-right {
  0%   { transform: translateY(-50%) translateX(0); }
  25%  { transform: translateY(-50%) translateX(7px); }
  50%  { transform: translateY(-50%) translateX(0); }
  75%  { transform: translateY(-50%) translateX(7px); }
  100% { transform: translateY(-50%) translateX(0); }
}
.side-left:not([disabled]):hover  { animation: side-nudge-left  .5s ease; }
.side-right:not([disabled]):hover { animation: side-nudge-right .5s ease; }
/* 「動きを減らす」設定の端末ではアニメを無効化（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .side-left:not([disabled]):hover,
  .side-right:not([disabled]):hover { animation: none; }
}

/* 画面幅に応じて左右矢印を段階的に縮小（狭いほど小さく・端からの距離も詰める）。
   既定(大画面)=116×52。760px以下は非表示（下の専用ブロック）。 */
@media (max-width: 1024px) {
  .side-arrow { width: 96px; height: 44px; }
  .side-left  { left: 22px; }
  .side-right { right: 22px; }
}
@media (max-width: 880px) {
  .side-arrow { width: 74px; height: 34px; }
  .side-left  { left: 16px; }
  .side-right { right: 16px; }
}

@media (max-width: 760px) {
  /* スマホは画面いっぱいに誌面が出るため、左右の矢印が本文に被ってしまう。
     送りはスワイプ／誌面の左右タップ(nav-zone)／下部の◀▶で可能なので、矢印は非表示にする。
     （矢印＋ホバーのチョンチョンは PC 向けの演出として残す） */
  .side-arrow { display: none; }
}

/* --- 下部バー：TOPピルとページャーピルを中央に横並び（コンテナ自体は透明） --- */
.viewer-controls {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 16px;
  bottom: 24px;
}

/* TOP（本棚へ）ピル：白角丸＋家アイコン＋文字（見本アセット4） */
.ui-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 26px;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.08);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.ui-top:hover { color: #000; }
.ui-home { width: 14px; height: 16px; fill: #000; display: block; flex: none; }

/* ページャーピル：白角丸＋両端に薄灰の丸ボタン（◀▶）＋中央テキスト（見本アセット5） */
.ui-pager {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 9px;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.08);
}
.pager-circle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: none;
  background: #ecebe8;
  color: #000;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background 0.2s ease;
}
.pager-circle:hover,
.pager-circle:focus-visible { background: #e0dfdb; outline: none; }
.pager-circle[disabled] { opacity: 0.4; cursor: default; }
.ui-pager .indicator {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #000;
  min-width: auto;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

/* --- 拡大ボタン（下部バー右）：白丸＋虫めがね＋。スマホ専用（PCは非表示・下のmediaで表示） --- */
.ui-zoom {
  display: none;                 /* 既定(PC)は非表示。スマホ時のみ表示する */
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.08);
  color: #000;
  cursor: pointer;
  flex: none;
  padding: 0;
}
.ui-zoom .zoom-ico { width: 22px; height: 22px; display: block; }
.ui-zoom:hover { background: #f3f2ef; }

/* --- タップで拡大ビュー（全画面オーバーレイ）。閉じるボタンは変形外＝固定 --- */
.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0.92);
  overflow: hidden;
  touch-action: none;          /* ピンチ/パンは自前ジェスチャで処理 */
}
.zoom-overlay.open { display: flex; }
.zoom-overlay .zoom-img {
  max-width: 100%;
  max-height: 100%;
  transform: translate(0, 0) scale(1);
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.zoom-close {
  position: fixed;
  z-index: 51;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.zoom-hint {
  position: fixed;
  z-index: 51;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* --- スマホ：下部UI（TOPピル＋ページャーピル）が画面のフチに接触しないよう
       左右余白＋下のセーフエリア(ホームバー)分を確保。横並びが全幅で端に当たるのを防ぐ。 --- */
@media (max-width: 760px) {
  .viewer-controls {
    left: 0;
    right: 0;
    transform: none;                              /* 中央寄せ(left:50%/translateX)を解除して全幅基準に */
    justify-content: center;
    gap: 10px;
    padding: 0 16px;                              /* 左右の画面フチから16px離す */
    box-sizing: border-box;
    bottom: calc(16px + env(safe-area-inset-bottom));  /* 下フチ＋iPhoneホームバー分浮かせる */
  }
  /* TOPピルは「TOP」だけに短縮（（本棚へ）を隠す）＝3つ目の拡大ボタンが入る余白を作る */
  .ui-top   { height: 46px; padding: 0 14px; letter-spacing: 0.08em; font-size: 12px; }
  .ui-top-sub { display: none; }
  .ui-pager { height: 46px; gap: 8px; }
  .ui-pager .indicator { max-width: 96px; }
  /* 拡大ボタンはスマホの時だけ表示（大島さん指示）。読みづらい誌面を全画面で拡大する入口。 */
  .ui-zoom { display: inline-flex; width: 46px; height: 46px; }
}