/* ============================================================
   閲覧ビューワーのスタイル
   ------------------------------------------------------------
   色・書体・余白・角丸はすべて assets/ui.css のトークンから来る。
   ここに生のhex値・書体名を書かないこと（DESIGN.md 参照）。

   【以前との違い】
   かつては viewer.css / viewer-vanilla.css / viewer-bootstrap.css /
   viewer-shadcn.css の4本があり、同じ変数名に4組の値が入っていた。
   「ビューワーの色を変える」だけで直す場所が4箇所あり、実際に
   3ファイルの内容が少しずつ食い違っていた。
   現在は1本に統合し、操作パネルの置き方だけを <body> の
   pack-* クラスで切り替える（末尾の「操作パネルの置き方」を参照）。

   読書テーマ（light / sepia / dark）は ui.css がトークンを
   上書きする形で定義しているので、ここでは何もしなくてよい。
   ============================================================ */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* 全画面モード：ヘッダー・ツールバーを完全に隠し、ステージだけの
   本当の全画面にする。戻れなくならないよう隅に小さな終了ボタンだけ残す。 */
body.fs-active #vw-header,
body.fs-active #vw-toolbar,
body.fs-active #vw-credit { display: none; }
#fs-exit {
  display: none; position: fixed; top: 10px; right: 10px; z-index: 70;
  width: 32px; height: 32px; border: none; border-radius: var(--radius); cursor: pointer;
  background: rgba(28,28,27,.5); color: var(--white); font-size: 14px; line-height: 32px; text-align: center;
}
body.fs-active #fs-exit { display: block; }
#fs-exit:hover { background: rgba(28,28,27,.75); }
/* 全画面中はヘッダー・ツールバーごと隠れ、拡大縮小（表示100%）等のメニューへ辿り着けなくなるため、
   終了ボタンと対になる形でメニューだけ呼び出せる小さなボタンを残す（新しいメニューの定位置＝左下に合わせる） */
#fs-menu {
  display: none; position: fixed; bottom: 10px; left: 10px; z-index: 70;
  width: 32px; height: 32px; border: none; border-radius: var(--radius); cursor: pointer;
  background: rgba(28,28,27,.5); color: var(--white); font-size: 14px; line-height: 32px; text-align: center;
}
body.fs-active #fs-menu { display: block; }
#fs-menu:hover { background: rgba(28,28,27,.75); }

/* テーマ（閲覧者が「配色」ボタンで自由に変更できる）。
   色の実体は ui.css の body.theme-sepia / body.theme-dark が
   トークンを上書きすることで切り替わるので、ここでは何も指定しない。
   ヘッダー・ツールバーはあえて別背景を持たせず、本文と地続きの「一枚の紙」にする。
   区切りは色の塊ではなく、1本の罫線（border-top/bottom）だけで表現する。 */

/* ヘッダー（控えめな罫線の下に書名。書名もゴシック＝LINE Seed JP でそろえる）
   左＝目次ショートカット／中央＝書名／右＝本文検索の3枠。
   3列グリッドにして、長い書名でも左右の操作枠を押し出さないようにする。 */
#vw-header {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center; gap: var(--sp-3);
  padding: 4px 24px;
  font-family: var(--font-sans);
  font-size: 16px; font-weight:var(--fw-bold); letter-spacing: .02em;
  border-bottom: 1px solid var(--accent);
  flex: 0 0 auto; position: relative; z-index: 10;
}
/* 中央列の範囲内でだけ書名を見せる。全文はtitle属性を持たせず、読書画面では
   操作を優先する。入りきらない分は省略記号にして検索枠・目次を必ず残す。 */
.vw-title-wrap {
  grid-column: 2; min-width: 0; text-align: center; pointer-events: none;
}
.vw-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ヘッダー左側の枠（目次ショートカット＋残り時間）。どちらも無ければ幅0で場所を取らない */
.hdr-left { grid-column: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }

/* 目次ショートカット（左） */
.hdr-toc {
  display: none; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; background: none; color: inherit;
  cursor: pointer; border-radius: var(--radius);
}
.hdr-toc.show { display: flex; }
.hdr-toc:hover { background: rgba(166,87,46,.10); color: var(--accent); }

/* 本文検索（右）。書名列とは独立して右端に留まる。 */
.hdr-search { grid-column: 3; justify-self: end; display: none; align-items: center; gap: 6px; min-width: 0; }
.hdr-search.show { display: flex; }
.hdr-search input {
  width: 132px; padding: 6px 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.hdr-search button {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; background: none; color: inherit;
  cursor: pointer; border-radius: var(--radius);
}
.hdr-search button:hover { background: rgba(166,87,46,.10); color: var(--accent); }

/* 公開終了までの残り時間（期限付きブックのみ表示される）。
   以前は書名の下に重ねていたため、書名の縦センタリングと衝突してヘッダーからはみ出していた。
   ヘッダー左側（目次ボタンの隣）に横並びの1行で収め、はみ出さないよう幅を切る。 */
.vw-expiry {
  flex: 0 1 auto; min-width: 0;
  font-family: var(--font-sans); font-size: 11px; font-weight: 400;
  letter-spacing: 0; line-height: 1.3; white-space: nowrap;
  color: var(--ink-soft);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.vw-expiry.soon { color: var(--warn); }
.vw-expiry b { font-weight:var(--fw-bold); }
@media (max-width: 600px) {
  #vw-header { padding: 4px 14px; gap: var(--sp-2); }
  .hdr-search input { width: 88px; }
  .vw-expiry { max-width: 110px; font-size: 10px; }
}
@media (max-width: 460px) {
  /* 幅が足りない画面では検索枠を隠し、メニュー内の本文検索だけにする */
  .hdr-search.show { display: none; }
  .vw-expiry { max-width: 80px; }
}

/* ステージ（本の表示領域）
   グラデーションのビネットは使わず、地の紙色をそのまま見せる。
   overflow:hidden … 拡大した本がヘッダー/ツールバーへはみ出さないようにする */
#vw-stage {
  flex: 1 1 auto; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 72px; min-height: 0;
  overflow: hidden;
}

/* 拡大縮小用ラッパー。
   will-changeは使わない（描画が低解像度のまま固定されて“ぼやけ”の原因になるため） */
#book-scaler { position: relative; transition: transform .12s ease-out; }
#vw-stage.zoomed #book-scaler { transition: none; }
#vw-stage.zoomed { cursor: grab; }
#vw-stage.panning { cursor: grabbing; }
#vw-zoom-readout {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 23;
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink); font-size: var(--fs-caption);
  font-family: var(--font-sans); pointer-events: none;
}
#vw-zoom-readout[hidden] { display: none; }

/* 高精細（HD）静止レイヤー：静止中の見開きを実解像度で上描きする。
   pointer-events:none なので、めくり・ドラッグ操作はそのまま下へ届く */
#hd-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
#hd-layer canvas { display: block; }

/* 読み込み中インジケーター：回線が細いときに離脱を防ぐための細いバー */
#load-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 25; display: none; }
#load-bar.show { display: block; }
#load-bar .load-bar-track { position: absolute; inset: 0; overflow: hidden; background: rgba(166,87,46,.15); }
#load-bar .load-bar-track::after {
  content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: var(--accent); animation: load-bar-sweep 1.1s ease-in-out infinite;
}
@keyframes load-bar-sweep { 0% { left: -30%; } 100% { left: 100%; } }
/* ラベルはトラック（overflow:hidden）の兄弟にして、クリップされないようにする */
#load-bar .load-bar-label {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: var(--scrim); color: var(--paper); font-size: 12px;
  padding: 5px 14px; border-radius: var(--radius); white-space: nowrap;
}

/* PDF内リンクのクリックエリア（発行時にPDFから自動検出）。
   色は --hs-rgb（"r,g,b"）と --hs-color（#RRGGBB）で受ける。ブックごとの指定があれば
   viewer.js が <html> に設定し、無ければ下の標準（テラコッタ）になる。 */
#link-hotspots { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#link-hotspots .link-hotspot {
  display: block; pointer-events: auto; background: rgba(var(--hs-rgb, 166,87,46),.12);
  border-radius: 2px; transition: background .15s; cursor: pointer;
}
#link-hotspots .link-hotspot:hover, #link-hotspots .link-hotspot:focus {
  background: rgba(var(--hs-rgb, 166,87,46),.28); outline: none;
}

/* ページを開いた瞬間だけ、リンク・動画の場所をマーカーのように色づけして知らせる。
   viewer.js の flashHotspots() が、レイヤーに .hs-flash を付けて約1.8秒後に外す。
   すぐ色が付き（0.1秒）→ 1秒のあいだ色が付いたまま → 0.7秒かけてすうっと消える（計1.7秒）。
   終わり（100%）は書かない＝元のうっすらした色へ自然に戻る。 */
@keyframes hotspot-flash {
  0%   { background-color: rgba(var(--hs-rgb, 166,87,46),0); }
  6%   { background-color: rgba(var(--hs-rgb, 166,87,46),.42); }
  59%  { background-color: rgba(var(--hs-rgb, 166,87,46),.42); animation-timing-function: ease-out; }
}
#link-hotspots.hs-flash .link-hotspot, #page-hotspots.hs-flash .page-hotspot { animation: hotspot-flash 1.7s linear 1; }
@media (prefers-reduced-motion: reduce) {
  #link-hotspots.hs-flash .link-hotspot, #page-hotspots.hs-flash .page-hotspot { animation: none; background-color: rgba(var(--hs-rgb, 166,87,46),.34); }
}

/* 管理画面で後付けした動画・外部リンク範囲 */
#page-hotspots { position:absolute; inset:0; z-index:11; pointer-events:none; }
#page-hotspots .page-hotspot { pointer-events:auto; cursor:pointer; background:rgba(var(--hs-rgb, 166,87,46),.14); border:1px solid var(--hs-color, var(--accent)); overflow:hidden; padding:0; font-family:inherit; }
#page-hotspots .page-hotspot:hover, #page-hotspots .page-hotspot:focus { background:rgba(var(--hs-rgb, 166,87,46),.28); outline:2px solid var(--hs-color, var(--accent)); outline-offset:1px; }
.page-hotspot-badge { position:absolute; left:4px; bottom:4px; max-width:calc(100% - 8px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 6px; background:var(--scrim); color:var(--paper); font-size:11px; pointer-events:none; }
.hotspot-player { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--ink-dark); z-index:2; pointer-events:auto; }
.hotspot-choice { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:var(--sp-4); background:rgba(28,28,27,.64); }
.hotspot-choice-panel { width:min(340px, 100%); padding:var(--sp-5); border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.hotspot-choice-panel strong { display:block; margin-bottom:var(--sp-2); font-family:var(--font-sans); font-weight:var(--fw-bold); }
.hotspot-choice-panel p { margin:0 0 var(--sp-4); color:var(--ink-soft); font-size:var(--fs-sm); }
.hotspot-choice-panel button { display:block; width:100%; margin-top:var(--sp-2); padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); color:var(--ink); font-family:inherit; cursor:pointer; }
.hotspot-choice-panel .hotspot-choice-primary { border-color:var(--accent); background:var(--accent); color:var(--white); }
.hotspot-choice-panel .hotspot-choice-cancel { background:transparent; color:var(--ink-soft); }

/* ============================================================
   マンガモード：コマ送り（viewer.js の「コマ送り」）
   ------------------------------------------------------------
   カメラの移動は #book-scaler の transform。0.26秒でなめらかに寄る。
   「視覚効果を減らす」の端末では viewer.js 側が .guide-anim を付けず、瞬時に切り替える。
   ============================================================ */
#vw-stage.guide-anim #book-scaler,
#vw-stage.guide-anim.zoomed #book-scaler { transition: transform .26s cubic-bezier(.25, .8, .3, 1); }
/* いま読んでいるコマの外側を薄く暗くする（コマの形の穴を開けたSVG。scaler の中なので一緒に動く） */
#guide-mask { position: absolute; inset: 0; z-index: 12; pointer-events: none; display: none; }
#guide-mask svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#guide-mask path { fill: var(--ink-dark); fill-opacity: .56; fill-rule: evenodd; }
/* 「コマ 3/6」の表示。手動のときは「コマ送りに戻る」ボタンになる */
.guide-chip {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 24;
  padding: 4px 10px; border-radius: var(--radius); background: var(--scrim); color: var(--paper);
  font-size: 12px; letter-spacing: .04em; white-space: nowrap; pointer-events: none;
}
.guide-chip[hidden] { display: none; }
/* コマ送りを終了するボタン（グレーの帯の右端）。いつでも通常の表示に戻れる */
.guide-exit {
  position: absolute; right: 8px; top: 8px; z-index: 24;
  padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--scrim); color: var(--paper);
  font: inherit; font-size: 12px; letter-spacing: .04em; white-space: nowrap; cursor: pointer;
}
.guide-exit[hidden] { display: none; }
.guide-chip.is-button { pointer-events: auto; cursor: pointer; padding: 9px 16px; font-size: 13px; background: var(--accent); color: var(--white); }
#vw-stage.guide-on .rot-fab { display: none; }

/* ページマーカー：常時表示レイヤー（保存済みのアンダーライン・丸囲みを見せ続ける） */
#marks-layer { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
#marks-layer canvas { display: block; }

/* ページマーカー：編集用オーバーレイ（マーカーモード中のみ） */
#marker-overlay { position: absolute; inset: 0; z-index: 15; }
#marker-overlay .marker-canvas { display: block; cursor: crosshair; touch-action: none; }
#vw-stage.marker-active .nav-arrow { display: none; }

/* マーカーの操作バー：ステージ内に浮かせる小さめのパネル。
   半透明＋backdrop-filterで、下に隠れた紙面がうっすら透けて見えるようにする
   （スマホで紙面を大きく覆ってしまう問題への対策。詳細はモバイル用の調整も参照） */
#marker-bar {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: calc(100% - 16px);
  background: rgba(28,28,27,.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: var(--paper); border-radius: var(--radius);
  padding: 7px 10px; font-size: 12.5px;
}
#marker-bar .marker-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
#marker-bar button {
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--paper);
  border-radius: var(--radius); padding: 5px 10px; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; line-height: 1.2;
}
#marker-bar button:hover { border-color: var(--white); }
#marker-bar .mk-tool.active { background: rgba(255,255,255,.16); border-color: var(--white); }
#marker-bar .mk-color {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); /* design-check:allow 色見本は丸が分かりやすい */
}
#marker-bar .mk-color.active { border-color: var(--white); box-shadow: 0 0 0 2px rgba(0,0,0,.4); } /* design-check:allow 選択中の色見本を縁取る */
#marker-bar .marker-sep { width: 1px; height: 18px; background: rgba(255,255,255,.25); margin: 0 2px; }
#marker-bar #marker-done { background: var(--accent); border-color: var(--accent); }
#marker-bar #marker-done:hover { background: var(--accent-dark); }
#marker-bar .marker-privacy { font-size: 10.5px; color: rgba(251,250,247,.72); text-align: center; line-height: 1.4; }
#marker-bar .mk-size { display: inline-flex; align-items: center; gap: 4px; }
#marker-bar .mk-size button { padding: 4px 9px; font-weight: 700; }
#marker-bar #mk-size-label { min-width: 1.6em; text-align: center; font-weight:var(--fw-bold); }

/* スマホ：紙面をできるだけ隠さないよう、アイコンのみの最小限の帯にする */
@media (max-width: 640px) {
  #marker-bar { bottom: 0; left: 0; right: 0; transform: none; max-width: none; border-radius: 0; padding: 5px 6px; gap: 4px; }
  #marker-bar .marker-row { gap: 4px; }
  #marker-bar button { padding: 5px 7px; }
  #marker-bar .mk-tool .mk-label,
  #marker-bar #marker-clear .mk-label,
  #marker-bar #marker-share .mk-label,
  #marker-bar .marker-privacy { display: none; } /* テキストラベルと説明文を省略してアイコンだけにする */
  #marker-bar #marker-done .mk-label { display: inline; } /* 「完了」だけは押し間違い防止のため文字を残す */
}

/* マーカー：文字入力欄 */
#marker-text-input {
  position: absolute; z-index: 16; min-width: 140px; max-width: 70%;
  background: rgba(255,255,255,.96); border: 2px solid; border-radius: 3px;
  padding: 4px 7px; font-size: 15px; font-family: var(--font-sans); font-weight: 700;
  resize: none; line-height: 1.3;
}
#marker-overlay[data-tool="text"] .marker-canvas { cursor: text; }

/* マーカー：既存マーカーをタップした時に出るサイズ変更・削除の小さなツールバー
   （ドラッグすれば移動、動かさず指を離すとこれが出る） */
#mark-resize-toolbar {
  position: fixed; z-index: 60; display: flex; gap: 2px;
  background: rgba(28,28,27,.92); border-radius: 3px; padding: 3px;
  box-shadow: var(--shadow-pop);
}
#mark-resize-toolbar button {
  min-width: 30px; height: 28px; padding: 0 6px; border: none; border-radius: 2px;
  background: rgba(255,255,255,.12); color: var(--white); font-size: 12px; font-weight: 700;
  font-family: var(--font-sans); cursor: pointer;
}
#mark-resize-toolbar button:hover, #mark-resize-toolbar button:active { background: rgba(255,255,255,.28); }
#mark-resize-toolbar .mrz-del { color: var(--warn); }

/* めくり操作中（タッチ中〜アニメ終了まで）だけ、ページをGPUレイヤーに
   昇格させて動きを滑らかにする。静止したら解除する（常時レイヤー化は
   低解像度ラスタの固定＝ぼやけと、メモリ増の原因になるため）。
   静止時の精細さはHDレイヤーが上描きで担保している。 */
#vw-stage.touching .stf__item,
#vw-stage.flipping .stf__item { will-change: transform; }

/* 本の縁は影ではなく1pxの罫線で定義する（印刷物のフチのような佇まい） */
#flipbook .stf__block { border: 1px solid var(--line); }
body.theme-dark #flipbook .stf__block { border-color: rgba(237,232,221,.16); }

/* 紙の色と地の色が近いとき（白い紙×明るい地など）だけ、
   ページの輪郭が背景に溶けないよう罫線と影を強める。
   PHP側で明度差を測り、必要なときだけ body に .paper-edge が付く。 */
body.paper-edge #flipbook .stf__block { border-color: rgba(61,58,52,.26); }
body.paper-edge.theme-dark #flipbook .stf__block { border-color: rgba(237,232,221,.34); }
/* 影は本1冊の外周（.stf__block）だけに掛ける。ページ1枚ずつ（.stf__item）に
   掛けると、綴じ側の辺の影が見開きの中央でにじみ、うっすら筋になって見える。 */
body.paper-edge #flipbook .stf__block { box-shadow: var(--shadow-pop); }
body.paper-edge.theme-dark #flipbook .stf__block { box-shadow: var(--shadow-drawer); }

#flipbook { width: 100%; height: 100%; }
#flipbook .stf__parent { margin: 0 auto; }
#flipbook img { user-select: none; -webkit-user-drag: none; }
/* HTML描画モードのページ（<img>を実寸で表示するので高精細） */
.fb-page { background: var(--white); }
.fb-page img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* 見開きの中央（綴じ側）は紙と紙をぴったり突き合わせる。
   ページの縦横比が枠とわずかに違うと contain の余白が左右に等分され、
   中央に1〜2pxの細い筋になって見えてしまうため、余白は必ず外側へ寄せる。
   （--left / --right は StPageFlip が表示中のページに付けるクラス。
     viewer.js の gutterAlign() と必ず同じ向きにそろえること） */
#flipbook.is-spread .fb-page[class~="--left"] img { object-position: left center; }
#flipbook.is-spread .fb-page[class~="--right"] img { object-position: right center; }

/* ============================================================
   基準と違う向きのページ（回して表示するページ）
   ------------------------------------------------------------
   1冊の中に縦長と横長が混ざっている場合、少数派の向きのページは
   そのまま枠に入れると上下（または左右）が大きく余り、紙面が
   小さくしか出ない。90度回して枠いっぱいに使う。

   回す前の箱は縦横を入れ替えた大きさ（--pg-h × --pg-w）で作る。
   これを90度回すと、ちょうど枠（--pg-w × --pg-h）に収まる。
   ============================================================ */
.fb-page.rot90 { position: relative; overflow: hidden; }
.fb-page.rot90 img {
  position: absolute; left: 50%; top: 50%;
  width: var(--pg-h); height: var(--pg-w);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

/* 左右の矢印：円形の塗りつぶしをやめ、細い罫線だけの静かなボタンにする */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 1px solid var(--line); cursor: pointer;
  background: var(--paper); color: var(--ink);
  font-size: 22px; line-height: 1; border-radius: var(--radius);
  transition: border-color .15s, color .15s; z-index: 20;
}
.nav-arrow:hover { border-color: var(--accent); color: var(--accent); }
#nav-prev { left: 12px; }
#nav-next { right: 12px; }

/* 紙面を回すボタン：向きの違うページで見開きが解けたときだけ出す。
   メニューは右下にあるので、押し間違えないよう左下に離して置く。
   元のPDFがどちら向きに寝ていたかはページごとに違い、正しい向きは
   システム側では分からないため、反時計回り・時計回りの2つを並べて出し、
   読み手に選んでもらう。 */
.rot-fab {
  position: absolute; left: 12px; bottom: 12px; z-index: 22;
  display: none; gap: 6px;
}
.rot-fab.show { display: flex; }
.rot-fab-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.rot-fab-btn:hover { border-color: var(--accent); color: var(--accent); }
/* 「左に回す」は同じアイコンを左右反転させて表現する（専用アイコンを増やさないため） */
.ui-icon-mirror { transform: scaleX(-1); }
/* マーカーを引いている間・拡大中は紙面の邪魔になるので引っ込める */
#vw-stage.marker-active .rot-fab, #vw-stage.zoomed .rot-fab { display: none; }

/* ============================================================
   本文検索
   ============================================================ */
/* 見つかった箇所の光らせ。紙面の文字を隠さないよう、塗りは薄くして枠で示す */
#search-hits { position: absolute; inset: 0; pointer-events: none; z-index: 11; }
/* 色は検索パネルで選ぶ（--sc-hit-rgb。未設定なら黄）。既定の見た目は「マーカー」 */
.search-hit {
  background: rgba(var(--sc-hit-rgb, 255, 209, 0), .38);  /* design-check:allow 紙面に重ねる蛍光色。画面の配色とは別物 */
  outline: 1px solid rgba(var(--sc-hit-rgb, 255, 209, 0), .9); /* design-check:allow 同上 */
  border-radius: 2px;
}
/* 「ライン」表示：字面やルビを塗りつぶさず線だけで示す。横組みは下線、縦組みは脇の線。 */
#search-hits.is-line .search-hit {
  background: transparent; outline: none; border-radius: 0;
  border-bottom: 2px solid rgb(var(--sc-hit-rgb, 255, 209, 0)); /* design-check:allow 同上 */
}
#search-hits.is-line .search-hit-vertical {
  border-right: 2px solid rgb(var(--sc-hit-rgb, 255, 209, 0)); /* design-check:allow 同上 */
  border-top: 1px solid rgb(var(--sc-hit-rgb, 255, 209, 0));   /* design-check:allow 同上 */
  border-bottom: 1px solid rgb(var(--sc-hit-rgb, 255, 209, 0)); /* design-check:allow 同上 */
}
/* 検索中に紙面の上へ出る細い帯 */
.sc-bar {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  z-index: 23; display: none; align-items: center; gap: var(--sp-3);
  max-width: 92%; padding: var(--sp-2) var(--sp-3);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--ink);
}
.sc-bar.show { display: flex; }
.sc-bar-q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-bar-mark {
  flex: 0 0 auto; border: 1px solid var(--accent); background: none; color: var(--accent-dark);
  border-radius: var(--radius); padding: 2px var(--sp-3); cursor: pointer; font-size: var(--fs-caption);
  font-family: inherit;
}
.sc-bar-mark:hover { background: var(--accent); color: var(--white); }
.sc-bar-close {
  flex: 0 0 auto; border: none; background: none; color: var(--ink-soft);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}
#vw-stage.marker-active .sc-bar { display: none; }

/* 検索パネルの中身 */
.sc-form { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.sc-form input {
  flex: 1 1 auto; padding: var(--sp-2) var(--sp-3); font-size: 16px; font-family: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.sc-go {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); cursor: pointer; font-family: inherit;
  border: 1px solid var(--accent); background: var(--accent); color: var(--white);
  border-radius: var(--radius); font-size: var(--fs-sm);
}
/* 光らせ方（マーカー／ライン）と色の切り替え */
.sc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-soft); }
.sc-opt-group { display: flex; align-items: center; gap: var(--sp-1); }
.sc-opt-style {
  border: 1px solid var(--line-strong); background: none; color: var(--ink-soft);
  border-radius: var(--radius); padding: 2px var(--sp-2); cursor: pointer;
  font-family: inherit; font-size: var(--fs-caption);
}
.sc-opt-style:hover { border-color: var(--accent); color: var(--accent-dark); }
.sc-opt-style[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }
.sc-opt-color {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.sc-opt-color[aria-pressed="true"] { border: 2px solid var(--ink); }
.sc-status { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.sc-results { max-height: 48vh; overflow-y: auto; }
.sc-hit {
  display: flex; align-items: baseline; gap: var(--sp-3); width: 100%; text-align: left;
  padding: var(--sp-3) var(--sp-2); border: none; border-bottom: 1px solid var(--line);
  background: none; color: inherit; cursor: pointer; font-family: inherit; font-size: var(--fs-sm);
}
.sc-hit:hover { background: var(--accent-tint); }
.sc-hit .sc-pg { flex: 0 0 auto; font-weight: var(--fw-bold); color: var(--accent-dark); }
.sc-hit .sc-snip { flex: 1 1 auto; line-height: 1.7; }
.sc-hit .sc-cnt { flex: 0 0 auto; font-size: var(--fs-caption); color: var(--ink-mute); }
.sc-none { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }
.sc-garbled-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-caption); color: var(--ink-soft); line-height: 1.7;
  margin: var(--sp-3) 0 var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--line);
}
.sc-garbled-note .ui-icon { flex: 0 0 auto; margin-top: 2px; }
.sc-ai-note {
  font-size: var(--fs-caption); color: var(--ink-soft);
  margin: var(--sp-3) 0 var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--line);
}

/* 検索ドック：幕を敷かず、紙面の左右（狭い画面では下）に常駐させる。
   閲覧と同時に使えるよう、本の側はドックの幅（--sc-dock-w／--sc-dock-h）だけ避けて収まる */
.sc-dock {
  position: absolute; z-index: 35; display: none; flex-direction: column; min-height: 0;
  background: var(--paper-raised); color: var(--ink); cursor: auto;
}
#vw-stage.sc-dock-open .sc-dock { display: flex; }
#vw-stage.sc-dock-left .sc-dock   { top: 0; bottom: 0; left: 0;  width: var(--sc-dock-w); border-right: 1px solid var(--line-strong); }
#vw-stage.sc-dock-right .sc-dock  { top: 0; bottom: 0; right: 0; width: var(--sc-dock-w); border-left: 1px solid var(--line-strong); }
#vw-stage.sc-dock-bottom .sc-dock { left: 0; right: 0; bottom: 0; height: var(--sc-dock-h); border-top: 1px solid var(--line-strong); }
#vw-stage.sc-dock-left #book-scaler   { margin-left: var(--sc-dock-w); }
#vw-stage.sc-dock-right #book-scaler  { margin-right: var(--sc-dock-w); }
#vw-stage.sc-dock-bottom #book-scaler { margin-bottom: var(--sc-dock-h); }
/* ドックで隠れないよう、紙面まわりの部品もドックの内側へ寄せる */
#vw-stage.sc-dock-left #nav-prev   { left: calc(var(--sc-dock-w) + 12px); }
#vw-stage.sc-dock-right #nav-next  { right: calc(var(--sc-dock-w) + 12px); }
#vw-stage.sc-dock-bottom .nav-arrow { top: calc((100% - var(--sc-dock-h)) / 2); }
#vw-stage.sc-dock-left .rot-fab    { left: calc(var(--sc-dock-w) + 12px); }
#vw-stage.sc-dock-bottom .rot-fab  { bottom: calc(var(--sc-dock-h) + 12px); }
#vw-stage.sc-dock-right #vw-zoom-readout { right: calc(var(--sc-dock-w) + var(--sp-3)); }
#vw-stage.sc-dock-left .sc-bar  { left: calc(var(--sc-dock-w) + (100% - var(--sc-dock-w)) / 2); }
#vw-stage.sc-dock-right .sc-bar { left: calc((100% - var(--sc-dock-w)) / 2); }

.sc-dock-head {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
}
.sc-dock-title { font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-bold); }
.sc-dock-tools { display: flex; align-items: center; gap: var(--sp-1); }
.sc-dock-btn {
  border: 1px solid var(--line-strong); background: none; color: var(--ink-soft);
  border-radius: var(--radius); padding: 2px var(--sp-2); cursor: pointer;
  font-family: inherit; font-size: var(--fs-caption); white-space: nowrap;
}
.sc-dock-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.sc-dock-btn:disabled { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); cursor: default; }
#vw-stage.sc-dock-bottom .sc-dock-side { display: none; }
.sc-dock-close {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 2px 6px;
}
.sc-dock-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: var(--sp-3) var(--sp-4) 0;
}
.sc-dock .sc-results { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.sc-dock .sc-hit.is-current {
  background: var(--accent-tint); border-left: 3px solid var(--accent);
  padding-left: calc(var(--sp-2) - 3px);
}
.sc-dock-foot {
  flex: 0 0 auto; margin: 0; padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--line); font-size: var(--fs-caption);
  line-height: 1.6; color: var(--ink-mute);
}

/* 下部ツールバー：影を使わず、1本の罫線だけでステージと分ける */
#vw-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  position: relative; z-index: 10;
}
#vw-toolbar button {
  border: none; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight:var(--fw-bold); font-family: inherit; color: inherit;
  padding: 7px 12px; border-radius: var(--radius); white-space: nowrap;
}
#vw-toolbar button:hover { background: rgba(166,87,46,.10); color: var(--accent); }
.tb-center { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; }
#tb-slider { width: min(320px, 40vw); accent-color: var(--accent); height: 5px; }
#tb-pageinfo { font-size: 13px; font-weight:var(--fw-bold); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

/* メニューボタン：唯一の常時アクセント塗りつぶし（この画面で最も押してほしい操作） */
#vw-toolbar .tb-menu {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--white); font-weight:var(--fw-bold);
  padding: 8px 18px; border-radius: var(--radius);
}
#vw-toolbar .tb-menu:hover { background: var(--accent-dark); color: var(--white); }
/* 操作パネルをしまう／出す。標準・フローティングのときだけ（サイドレールは縦に並ぶ別の置き方、没入型は最初から隠れる）。
   しまうと、操作パネルの高さ分だけ紙面が大きくなり、細い帯（ページ番号＋「出す」ボタン）だけが残る。 */
#vw-toolbar .tb-hide { flex: 0 0 auto; color: var(--ink-soft); order: 99; }
body.pack-bootstrap #tb-hide, body.pack-vanilla #tb-hide { display: none; }
#vw-mini {
  display: none; flex: 0 0 auto; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0px); position: relative; z-index: 10;
}
#vw-mini button {
  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 16px;
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper-raised); color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: var(--fs-caption); font-variant-numeric: tabular-nums;
}
#vw-mini button:hover, #vw-mini button:focus-visible { color: var(--accent); border-color: var(--accent); }
body.dock-hidden #vw-toolbar { display: none; }
body.dock-hidden:not(.pack-bootstrap):not(.pack-vanilla) #vw-mini { display: flex; }
body.pack-shadcn #vw-mini { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40; }
body.fs-active #vw-mini, body.vv-zoomed #vw-mini { display: none; }
/* 数秒さわらないと操作パネルを薄くして、紙面に目が行くようにする。さわる・近づける・キー操作で、すぐ戻る */
body.pack-default #vw-toolbar, body.pack-shadcn #vw-toolbar { transition: opacity .4s; }
body.dock-dim.pack-default #vw-toolbar, body.dock-dim.pack-shadcn #vw-toolbar { opacity: .3; }
body.dock-dim #vw-toolbar:hover, body.dock-dim #vw-toolbar:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.pack-default #vw-toolbar, body.pack-shadcn #vw-toolbar { transition: none; }
}
#survey-mobile-button {
  display: none; position: fixed; right: var(--sp-2); bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 12;
  align-items: stretch;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper-raised);
  color: var(--ink-soft); font: inherit; font-size: 11px;
}
#survey-mobile-button button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
#survey-mobile-button .sv-m-open { padding: 6px 4px 6px 8px; }
#survey-mobile-button .sv-m-close { padding: 6px 9px; min-width: 32px; font-size: 15px; line-height: 1; border-left: 1px solid var(--line); }
#survey-mobile-button:hover { color: var(--accent); border-color: var(--accent); }
#survey-mobile-button[hidden] { display: none !important; }
.sv-buttons { margin-top: var(--sp-3); }

/* メニュー（ボトムシート）：索引ページのような、罫線で仕切られた静かな一覧 */
#menu-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--paper-raised); border-top: 1px solid var(--line);
  transform: translateY(105%); transition: transform .28s ease;
  max-height: 78vh; display: flex; flex-direction: column;
}
#menu-sheet.open { transform: translateY(0); }
.menu-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--line);
}
.menu-head button { border: none; background: none; font-size: 20px; cursor: pointer; color: inherit; line-height: 1; }
.menu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px; padding: 20px 22px 28px; overflow-y: auto;
}
.menu-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  padding: 14px 6px; cursor: pointer; font-family: inherit; color: inherit;
  font-size: 12px; text-align: center; line-height: 1.3;
}
.menu-item:hover { border-color: var(--accent); background: rgba(166,87,46,.06); }
.menu-item .mi-icon { font-size: 20px; line-height: 1; color: var(--ink-soft); }
.menu-item:hover .mi-icon { color: var(--accent); }
.menu-item .mi-label { white-space: nowrap; }
body.theme-dark .menu-item:hover { border-color: var(--accent); background: rgba(217,138,94,.08); }

/* 目次ドロワー */
#toc-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 85vw);
  background: var(--paper-raised); border-right: 1px solid var(--line);
  transform: translateX(-105%); transition: transform .25s ease;
  z-index: 50; display: flex; flex-direction: column;
}
#toc-drawer.open { transform: translateX(0); }
.toc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--line);
}
.toc-head button { border: none; background: none; font-size: 20px; cursor: pointer; color: inherit; }
#toc-list { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; }
#toc-list li {
  padding: 11px 20px; cursor: pointer; font-size: 14px;
  display: flex; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line);
}
#toc-list li:hover { background: rgba(166,87,46,.07); color: var(--accent); }
#toc-list li .pg { color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
#toc-list li.empty { cursor: default; color: var(--ink-soft); border-bottom: none; }

/* AI検索：範囲選択オーバーレイ */
#select-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(28,28,27,.22); cursor: crosshair; touch-action: none;
}
#select-overlay .select-tip {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(28,28,27,.88); color: var(--paper); font-size: 13px;
  padding: 8px 18px; border-radius: var(--radius); pointer-events: none; white-space: nowrap;
}
/* 選択した範囲：蛍光マーカーの色（検索パネルで選んだ色。未設定なら黄）で塗り、白とテラコッタの二重の枠で囲む。
   明るい紙面でも暗い絵でも見えるよう、外側を少し暗くして範囲を浮かせる */
#select-overlay .select-rect {
  position: absolute; display: none; pointer-events: none;
  border: 2px solid var(--accent);
  outline: 2px solid var(--white);
  background: rgba(var(--sc-hit-rgb, 255, 209, 0), .34);  /* design-check:allow 紙面に重ねる蛍光色。画面の配色とは別物 */
  box-shadow: 0 0 0 9999px rgba(28,28,27,.34); /* design-check:allow 範囲の外側を覆う */
}

/* AI検索：切り出し画像とアクション */
.ai-crop { text-align: center; margin-bottom: 12px; max-height: 180px; overflow: auto; background: var(--paper-raised); border-radius: var(--radius); padding: 8px; border: 1px solid var(--line); }
.ai-crop-canvas { max-width: 100%; max-height: 300px; border: 1px solid var(--line); }
.ai-actions { display: flex; flex-direction: column; gap: 8px; }
.ai-actions button {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: 11px 12px; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.ai-actions button:hover { border-color: var(--accent); }
.ai-actions .ai-primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
.ai-actions .ai-primary:hover { background: var(--accent-dark); }
.ai-dl { display: block; text-align: center; margin-top: 8px; font-size: 13px; color: var(--accent); }
#ai-ocr-area { margin-top: 12px; }
#ai-ocr-text {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; resize: vertical;
}

/* 拡大鏡（範囲を囲む→原寸表示） */
.mag-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(20,19,17,.9);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  padding: 20px;
}
.mag-body { max-width: 96vw; max-height: 84vh; overflow: auto; background: var(--white); border: 1px solid var(--line); }
.mag-canvas { display: block; max-width: 94vw; }
.mag-close {
  border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--white); font-family: inherit;
  font-size: 14px; padding: 10px 22px; border-radius: var(--radius); cursor: pointer;
}
.mag-close:hover { border-color: var(--accent); color: var(--accent); }

/* テーマ選択（スウォッチは新しい配色をそのまま表示）／表示サイズ選択で共用。
   表示サイズは項目数が多いため（7択）、flex-wrapで複数行に折り返す。 */
.theme-list { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-opt {
  flex: 1 1 72px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 8px;
  font-family: inherit; font-size: 13.5px; cursor: pointer;
}
.theme-opt:hover { border-color: var(--accent); }
.theme-opt-light { background: var(--paper); color: var(--ink); }
.theme-opt-sepia { background: #EFE4D0; color: #3B2F1E; } /* design-check:allow テーマの見本 */
.theme-opt-dark  { background: #1B1A17; color: #EDE8DD; } /* design-check:allow テーマの見本 */

/* コメント */
.cmt-list { max-height: 220px; overflow-y: auto; margin-bottom: 12px; }
.cmt-item { border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 13.5px; }
.cmt-item.cmt-reply { margin-left: 22px; background: var(--paper-raised); padding-left: 10px; border-radius: var(--radius); }
.cmt-head { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 2px; }
.cmt-reply-btn { border: none; background: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 2px 0; font-family: inherit; }
.cmt-form input, .cmt-form textarea, .dm-box input, .dm-box textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; border: 1px solid var(--line); border-radius: var(--radius); resize: vertical;
}
.cmt-send {
  border: none; border-radius: var(--radius); padding: 9px 20px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; background: var(--accent); color: var(--white);
}
.cmt-send:hover { background: var(--accent-dark); }
.cmt-replying { font-size: 12.5px; color: var(--accent); margin-bottom: 6px; }
.cmt-replying button { border: none; background: none; cursor: pointer; color: inherit; }
.dm-box { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.dm-title { font-size: 13.5px; font-weight:var(--fw-bold); margin-bottom: 8px; }

/* 発行者リンク集 */
/* リンクは件数の制限をなくしたため、多いときは枠内でスクロールさせる
   （画面の高さを超えて、下のリンクに手が届かなくなるのを防ぐ） */
.links-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: min(58vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  margin: -4px -4px 0; padding: 4px;
}
.link-row {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 14px;
  color: var(--ink); font-size: 14.5px; font-weight:var(--fw-bold); transition: border-color .15s, background .15s;
}
.link-row:hover { border-color: var(--accent); background: rgba(166,87,46,.05); }
.link-ic {
  width: 30px; height: 30px; border-radius: var(--radius); flex: 0 0 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--white);
}
.sns-fb   { background: #1877F2; } /* design-check:allow 各社のブランド色 */
.sns-x    { background: #111111; } /* design-check:allow 各社のブランド色 */
.sns-line { background: #06C755; font-size: 9px; } /* design-check:allow 各社のブランド色 */
.sns-ig   { background: #B54B7C; } /* design-check:allow 各社のブランド色 */
.sns-yt   { background: #C4291E; font-size: 12px; } /* design-check:allow 各社のブランド色 */
.sns-web  { background: var(--accent); font-size: 15px; }
.link-label { flex: 1; }
.link-arrow { color: var(--accent); }

/* ツールバーの機能解説ツールチップ */
#tb-tooltip {
  position: fixed; display: none; z-index: 120; pointer-events: none;
  background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.6;
  padding: 8px 14px; border-radius: var(--radius); max-width: 280px;
}

/* しおり */
.bm-list { margin-top: 14px; border-top: 1px solid var(--line); }
.bm-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 9px 2px; font-size: 14px; }
.bm-jump { flex: 1; cursor: pointer; color: var(--accent); }
.bm-jump:hover { text-decoration: underline; }
.bm-del { border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: 15px; }
.resume-toast {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 30; border: 1px solid rgba(255,255,255,.18); cursor: pointer; font-family: inherit;
  background: var(--ink); color: var(--paper); font-size: 13.5px;
  padding: 11px 22px; border-radius: var(--radius);
}
.resume-toast:hover { border-color: var(--accent); color: var(--accent-dark); }
/* マーカーモード中は下部の操作バーと重なるため、トーストをその上に出す */
#vw-stage.marker-active .resume-toast { bottom: 74px; z-index: 31; }

/* アンケート */
.sv-req { color: var(--accent); font-size: 11.5px; }
.sv-label { display: block; font-size: 13px; color: var(--ink-soft); margin: 10px 0 4px; }
/* 「先に利用規約にチェックをいれさせる」がONのブックだけ出る同意チェック */
.sv-consent {
  display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.sv-consent input { margin-top: 3px; flex: 0 0 auto; }
.sv-consent a { color: var(--accent); }
.vw-panel-body select {
  width: 100%; padding: 9px 12px; font-size: 14.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}

/* クレジット：奥付（コロフォン）のような小さな表記。書体は他の表示と同じLINE Seed JPにそろえる。
   既定値はどのデザインパターンからも参照される土台（サイドレール等は下で個別に配置し直す）。 */
#vw-credit {
  position: fixed; right: 12px; bottom: 54px;
  font-size: 10.5px; font-family: var(--font-sans); color: var(--ink-soft);
}
#vw-credit a { color: inherit; }
/* 標準デザインだけ、下の操作バーの帯の中に収める。
   以前は帯の外＝紙面側の余白に浮いていて、単独の要素のように見えてしまっていた。
   メニューボタンを左に置くほうが自然なため、メニューを左端・利用規約を右端に入れ替えている。 */
@media (min-width: 641px) {
  body.pack-default #vw-toolbar .tb-menu { order: -1; }
  body.pack-default #vw-credit { right: 24px; left: auto; bottom: 20px; }
}

/* エラー／パスワード画面 */
.msg-screen {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--paper);
}
.msg-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px 36px; max-width: 420px; width: 100%; text-align: center;
}
.msg-card h1 { font-family: var(--font-sans); font-size: 20px; font-weight: var(--fw-bold); margin: 0 0 12px; color: var(--ink); }
.msg-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.msg-card input {
  width: 100%; padding: 11px 14px; font-size: 15px; margin: 10px 0;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.msg-card button {
  width: 100%; padding: 11px; border: none; border-radius: var(--radius);
  background: var(--accent); color: var(--white); font-size: 15px; cursor: pointer; font-family: inherit;
}
.msg-card button:hover { background: var(--accent-dark); }
.pw-error { color: var(--warn) !important; }
.msg-footer { font-size: 11.5px !important; margin-top: 22px; opacity: .8; }

/* メール認証つき閲覧：認証画面（背景は暗転し、紙面は出さない。viewer/assets/auth.js） */
.auth-screen {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--sp-4); background: var(--ink);
}
.auth-card {
  width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
}
.auth-card h1 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h3); margin: 0 0 var(--sp-3); }
.auth-card p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; margin: 0 0 var(--sp-3); }
.auth-card p strong { color: var(--ink); word-break: break-all; }
.auth-field { margin-bottom: var(--sp-4); }
.auth-field label { display: block; font-size: var(--fs-sm); color: var(--ink); margin-bottom: var(--sp-1); }
.auth-card input[type=email], .auth-card input[type=text] {
  width: 100%; padding: var(--sp-3); font-size: 16px; /* 16px未満だとスマホが入力時に拡大する */
  background: var(--white); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.auth-card input.auth-code { font-family: var(--font-mono); font-size: var(--fs-h3); letter-spacing: .4em; text-align: center; }
.auth-field label.auth-check { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.7; margin-bottom: 0; }
.auth-check input { margin-top: var(--sp-1); flex: none; }
.auth-check a { color: var(--accent-dark); text-decoration: underline; }
.auth-btn {
  width: 100%; padding: var(--sp-3); border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--white); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold); cursor: pointer;
}
.auth-btn:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.auth-btn:disabled { background: var(--paper-raised); border-color: var(--line); color: var(--ink-mute); cursor: not-allowed; }
.auth-msg { color: var(--warn) !important; font-size: var(--fs-sm); }
.auth-notice, .auth-purpose {
  padding: var(--sp-3); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink) !important;
}
.auth-sub { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.auth-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--accent-dark); text-decoration: underline; cursor: pointer; }
.auth-link:disabled { color: var(--ink-mute); text-decoration: none; cursor: default; }
.auth-help { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.auth-help summary { cursor: pointer; color: var(--ink); }
.auth-help ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); color: var(--ink-soft); line-height: 1.8; }

/* ============================================================
   オプション機能のUI（共有・一覧・自動めくり・印刷・AI検索）
   ============================================================ */

/* 初回操作ヒント */
.flip-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-size: 13px; padding: 9px 20px; border-radius: var(--radius);
  pointer-events: none; white-space: nowrap; z-index: 20;
  animation: hint-in .5s ease; transition: opacity .5s;
}
.flip-hint.hide { opacity: 0; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 汎用パネル（共有・AI検索）：ぼかしは使わず、フラットな幕でスクリムする */
.vw-backdrop {
  position: fixed; inset: 0; background: rgba(28,28,27,.5);
  display: none; align-items: center; justify-content: center; z-index: 90; padding: 16px;
}
.vw-backdrop.open { display: flex; }
.vw-panel {
  background: var(--paper-raised); color: var(--ink); border-radius: var(--radius);
  border: 1px solid var(--line);
  width: 100%; max-width: 420px; overflow: hidden;
}
.vw-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-bold);
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.vw-panel-close { border: none; background: none; font-size: 20px; cursor: pointer; color: inherit; padding: 4px 8px; }
.vw-panel-body { padding: 18px 20px 22px; }

/* クロージング：最初・最後の「ご案内表示」（文字とリンク中心）。パネルの部品はそのまま使う */
.vw-notice { max-width: 480px; }
.vw-notice-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; }
.vw-notice-links { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.vw-notice-link {
  display: block; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--accent); font-weight: var(--fw-bold); font-size: 13.5px; text-decoration: none; overflow-wrap: anywhere;
}
.vw-notice-link:hover, .vw-notice-link:focus-visible { border-color: var(--accent); background: var(--paper); }
.vw-notice-check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }

/* 共有パネル */
.share-url { display: flex; gap: 8px; margin-bottom: 14px; }
.share-url input { flex: 1; padding: 9px 12px; font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); min-width: 0; }
.share-url button, .share-native {
  border: none; background: var(--accent); color: var(--white); border-radius: var(--radius);
  padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.share-url button:hover, .share-native:hover { background: var(--accent-dark); }
.share-qr { display: flex; justify-content: center; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.share-qr img, .share-qr canvas { display: block; }
.share-qr-note { font-size: 11.5px; color: var(--ink-soft); text-align: center; margin: 8px 0 14px; }
.share-sns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.share-sns a {
  font-size: 12.5px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 14px;
}
.share-sns a:hover { border-color: var(--accent); color: var(--accent); }
.share-native { display: block; width: 100%; margin-top: 12px; }

/* AI検索パネル */
.ai-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.vw-panel-body #ai-query {
  width: 100%; padding: 11px 14px; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--radius); box-sizing: border-box;
}
.ai-buttons { display: flex; gap: 8px; margin-top: 12px; }
.ai-buttons button {
  flex: 1; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: 10px 8px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.ai-buttons .ai-primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
.ai-buttons .ai-primary:hover { background: var(--accent-dark); }
.ai-buttons button:hover { border-color: var(--accent); }

/* サムネイル一覧（下からせり上がるシート） */
#thumbs-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 55vh; z-index: 80;
  background: var(--paper-raised); color: var(--ink);
  border-top: 1px solid var(--line);
  transform: translateY(105%); transition: transform .28s ease;
  display: flex; flex-direction: column;
}
#thumbs-sheet.open { transform: translateY(0); }
.thumbs-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--line);
}
.thumbs-head button { border: none; background: none; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.thumbs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px; padding: 16px 20px; overflow-y: auto;
}
.thumbs-cell {
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius);
  padding: 6px; cursor: pointer; font-family: inherit;
}
.thumbs-cell:hover { border-color: var(--accent); }
.thumbs-cell img { width: 100%; display: block; background: var(--white); }
.thumbs-cell span { font-size: 11px; color: var(--ink-soft); }

/* スマホ最適化 */
@media (max-width: 640px) {
  #vw-stage { padding: 12px 6px; }
  .nav-arrow { display: none; }             /* スマホはタップ／スワイプでめくる */
  #tb-slider { width: 26vw; }
  /* 指で押しやすいサイズ（44px目安）を確保しつつ、文字ラベルは隠してアイコンのみに。
     ボタンが多いときは2段に折り返す（1段目:スライダー / 2段目:機能ボタン） */
  #vw-toolbar { padding: 6px 10px 8px; gap: 2px; flex-wrap: wrap; justify-content: center; }
  #vw-toolbar .tb-center { flex: 1 1 100%; order: -1; }
  #vw-toolbar button { min-width: 40px; min-height: 40px; padding: 6px 8px; font-size: 15px; }
  #survey-mobile-button { display: flex; }
  /* スマホでは操作パネルが紙面の下の帯なので、しまったあとの細い帯も、浮かせず同じ流れに置く */
  body.pack-shadcn #vw-mini { position: static; transform: none; left: auto; }
  #vw-toolbar .tb-label { display: none; }
  #tb-pageinfo { min-width: 48px; font-size: 11.5px; }
  /* スマホでは提供元クレジットを画面右上に控えめに（設定が空なら中身が無く目立たない） */
  #vw-credit {
    position: fixed; top: 6px; right: 10px; bottom: auto; left: auto;
    font-size: 9px; opacity: .55; z-index: 11; max-width: 45vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .flip-hint { font-size: 12px; bottom: 14px; max-width: 92vw; white-space: normal; text-align: center; }
  #thumbs-sheet { max-height: 65vh; }
}

/* ============================================================
   操作パネルの置き方（books.design_pack → <body class="pack-*">）
   ------------------------------------------------------------
   配色・書体は上と共通。ここで変えるのは「操作をどこに置くか」だけ。
   以前はこの4通りのためにCSSファイルを4本持っていた。
   ============================================================ */

/* --- pack-default：上に細い帯、下に操作バー（既定） --- */
/* 追加の指定は不要。上で定義した並びがそのまま既定になる。 */

/* --- pack-bootstrap：左に縦のレール --- */
/* 目次・一覧・全画面を画面の左端にまとめ、紙面を中央に大きく取る。
   机の上に本を置いたような佇まいにする。 */
@media (min-width: 861px) {
  body.pack-bootstrap { flex-direction: row; }
  body.pack-bootstrap #vw-header {
    order: 2; flex: 1 1 auto; border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line-strong);
  }
  /* このレールだけは読書テーマ（ライト/セピア/ダーク）で色を変えない固定の墨色。
     --ink は読書テーマで反転する（ダークテーマでは明るくなる）ため、常に濃い
     操作レールを保つには専用の --rail-* を使う。 */
  body.pack-bootstrap #vw-toolbar {
    order: 1; flex: 0 0 60px; width: 60px; height: 100%;
    flex-direction: column; justify-content: flex-start; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-2);
    background: var(--rail-ink); border-top: none; border-right: 1px solid var(--ink-dark);
  }
  body.pack-bootstrap #vw-toolbar button { color: var(--rail-paper); }
  body.pack-bootstrap #vw-toolbar button:hover { color: var(--accent-on-dark); }
  body.pack-bootstrap #vw-toolbar .tb-center { flex-direction: column; gap: var(--sp-3); }
  body.pack-bootstrap #vw-toolbar #tb-slider { display: none; }
  body.pack-bootstrap #vw-stage { order: 3; }
  /* 本文側をまとめて右へ寄せる */
  body.pack-bootstrap { display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto 1fr auto; }
  body.pack-bootstrap #vw-toolbar { grid-row: 1 / -1; grid-column: 1; }
  body.pack-bootstrap #vw-header  { grid-row: 1; grid-column: 2; }
  body.pack-bootstrap #vw-stage   { grid-row: 2; grid-column: 2; }
  body.pack-bootstrap #vw-credit  { grid-row: 3; grid-column: 2; }
}

/* --- pack-vanilla：没入。操作を隠し、紙面だけを見せる --- */
/* ページ番号だけを右下にごく薄く残し、それ以外は触れたときに出す。 */
body.pack-vanilla #vw-header { opacity: 0; transition: opacity .2s; }
body.pack-vanilla #vw-header:hover,
body.pack-vanilla #vw-header:focus-within { opacity: 1; }
body.pack-vanilla #vw-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--paper); border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .2s;
}
body.pack-vanilla #vw-toolbar:hover,
body.pack-vanilla #vw-toolbar:focus-within,
body.pack-vanilla.show-chrome #vw-toolbar { transform: none; }
/* 隠れている間も、どこまで読んだかは分かるようにする */
body.pack-vanilla #vw-stage::after {
  content: attr(data-page-label); position: absolute; right: var(--sp-4); bottom: var(--sp-3);
  font-size: var(--fs-caption); color: var(--ink-soft); opacity: .6; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
body.pack-vanilla #vw-stage { padding-bottom: var(--sp-5); }

/* --- pack-shadcn：操作を画面に浮かせたドックにする --- */
body.pack-shadcn #vw-toolbar {
  position: fixed; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  z-index: 40; width: auto; max-width: calc(100% - var(--sp-6));
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-raised); box-shadow: var(--shadow-pop);
  padding: var(--sp-1) var(--sp-3);
}
/* ドックの高さ分を下に空け、紙面と重ならないようにする（--dock-reserve は viewer.js が測る。上の余白と釣り合わせて本を中央に置く） */
body.pack-shadcn #vw-stage { padding-bottom: calc(var(--dock-reserve, 36px) + 28px); }

/* ============================================================
   右綴じ（縦書き冊子）
   ------------------------------------------------------------
   ページめくり自体の向きは、同梱のStPageFlip（右綴じ対応の独自ビルド）が
   rtl設定で受け持つ。ここでは、その読み進める向きに合わせて
   操作パネル側の並びをそろえる。
   矢印ボタンは位置も見た目も変えず、押したときの役割だけを
   viewer.js側で入れ替えている（左向きの矢印＝次のページ）。
   ============================================================ */

/* 右綴じのスライダーはviewer.jsで値そのものを反転する。transformだけで
   見た目を反転する方法はブラウザごとにクリック位置が異なるため使わない。 */
body.rtl-book #tb-slider { transform: none; }

/* ページ一覧は右上から左へ流す（誌面をめくる順と同じ並びにする） */
body.rtl-book .thumbs-grid { direction: rtl; }
body.rtl-book .thumbs-cell { direction: ltr; } /* ページ番号まで反転しないよう戻す */

/* いいねエリア（範囲の枠はリンクと同じく開いた瞬間だけ色づく。押せるのは角のボタンだけで、範囲そのものはページ操作を妨げない） */
#page-hotspots .like-hotspot { pointer-events:none; cursor:default; background:transparent; border-color:transparent; }
#page-hotspots.hs-flash .like-hotspot { border-color:var(--hs-color, var(--accent)); }
.like-btn { position:absolute; right:4px; bottom:4px; pointer-events:auto; display:inline-flex; align-items:center; gap:4px; min-height:30px; padding:4px 8px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--ink-soft); font:inherit; font-size:12px; line-height:1; cursor:pointer; }
.like-btn:hover, .like-btn:focus-visible { color:var(--accent-dark); border-color:var(--accent); }
.like-btn.is-liked { color:var(--white); background:var(--accent); border-color:var(--accent); }
.like-btn .like-count:empty { display:none; }
@media (pointer: coarse) { .like-btn { min-height:36px; padding:6px 10px; } }

/* フォームを開く範囲と、冊子の上に開くフォーム */
.form-modal { position:fixed; inset:0; z-index:200; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:16px; }
.form-modal-panel { width:min(720px, 100%); height:min(90vh, 900px); background:var(--paper); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; }
.form-modal-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }
.form-modal-bar button { font:inherit; padding:6px 14px; border:1px solid var(--line-strong); background:var(--paper); border-radius:var(--radius); cursor:pointer; }
.form-modal-panel iframe { flex:1; width:100%; border:0; background:var(--paper); }
@media (max-width: 760px) { .form-modal { padding:0; } .form-modal-panel { height:100%; border-radius:0; } }

/* 範囲コメント（校正レビュー・公開の範囲コメント）：囲んだ範囲の枠と、番号の印 */
#range-pins { position:absolute; inset:0; z-index:12; pointer-events:none; }
.range-box { position:absolute; border:2px solid var(--accent); background:rgba(166,87,46,.06); box-sizing:border-box; }
.range-box.is-review { border-style:dashed; border-color:var(--warn); background:rgba(163,64,43,.06); }
.range-box.is-done { border-color:var(--ok); background:transparent; opacity:.7; }
.range-pin { position:absolute; left:-12px; top:-12px; pointer-events:auto; min-width:24px; height:24px; padding:0 6px; border:0; border-radius:var(--radius); background:var(--accent); color:var(--white); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.range-box.is-review .range-pin { background:var(--warn); }
.range-box.is-done .range-pin { background:var(--ok); }
@media (pointer: coarse) { .range-pin { min-width:30px; height:30px; left:-15px; top:-15px; } }
.rc-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.rc-form { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.rc-row { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px; border:0; border-bottom:1px solid var(--line); background:transparent; font:inherit; cursor:pointer; color:inherit; }
.rc-row:hover { background:var(--paper-raised); }
.rc-no { min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--white); border-radius:var(--radius); font-size:12px; }
.rc-page { color:var(--ink-soft); font-size:12px; flex:0 0 auto; }
.rc-text { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rc-rep { font-size:11px; color:var(--ink-soft); flex:0 0 auto; }
.rc-status { font-size:11px; padding:1px 6px; border:1px solid var(--warn); color:var(--warn); border-radius:var(--radius); flex:0 0 auto; }
.rc-status.is-done { border-color:var(--ok); color:var(--ok); }
.rc-thread-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cmt-item.is-publisher { border-left:3px solid var(--accent); padding-left:8px; }
.review-banner { position:fixed; left:50%; top:8px; transform:translateX(-50%); z-index:150; max-width:calc(100% - 24px); padding:6px 12px; background:var(--warn); color:var(--white); border-radius:var(--radius); font-size:12px; pointer-events:none; text-align:center; }

/* ============================================================
   ノート（notes.js）：紙面に書き込む画面
   ============================================================ */
html.kn-lock, html.kn-lock body { overflow:hidden; overscroll-behavior:none; }
.kn-root { position:fixed; inset:0; z-index:300; display:none; flex-direction:column; background:var(--paper-raised); color:var(--ink); }
.kn-root.is-open { display:flex; }
.kn-bar, .kn-tools { display:flex; align-items:center; gap:6px; padding:6px 10px; background:var(--paper); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:thin; flex:0 0 auto; }
.kn-styles { flex-wrap:wrap; overflow-x:visible; row-gap:8px; }
.kn-btn, .kn-tool, .kn-seg { flex:0 0 auto; min-height:36px; padding:6px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; touch-action:manipulation; }
.kn-arrow { display:inline-flex; align-items:center; justify-content:center; min-width:40px; padding:6px 10px; }
.kn-small { min-height:30px; padding:3px 10px; font-size:12px; }
.kn-group { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
.kn-lbl { font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.kn-hint { font-size:12px; color:var(--ink-soft); }
.kn-seg + .kn-seg { margin-left:-6px; }
.kn-brush { flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:center; gap:1px; padding:3px 6px 2px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; touch-action:manipulation; }
.kn-brush canvas { width:84px; height:23px; display:block; }
.kn-brush-name { font-size:11px; line-height:1.2; }
.kn-brush.is-on { background:var(--paper-raised); border-color:var(--ink); outline:2px solid var(--ink); outline-offset:-2px; }
.kn-btn:disabled { opacity:.4; cursor:default; }
.kn-primary { background:var(--accent); border-color:var(--accent); color:var(--white); }
.kn-tool.is-on, .kn-seg.is-on { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.kn-btn.is-on { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.kn-color { flex:0 0 auto; width:30px; height:30px; border:2px solid var(--line-strong); border-radius:var(--radius); cursor:pointer; padding:0; touch-action:manipulation; }
.kn-color.is-on { outline:3px solid var(--accent); outline-offset:1px; }
.kn-color-pick { background:conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.kn-color.is-del { position:relative; }
.kn-color.is-del::after { content:"\d7"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--scrim); color:var(--white); font-size:18px; line-height:1; }
.kn-swlist { flex-wrap:wrap; max-width:340px; gap:4px; }
.kn-wp { flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:stretch; justify-content:center; gap:3px; width:52px; min-height:36px; padding:4px 6px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; touch-action:manipulation; }
.kn-wp-line { display:block; background:currentColor; border-radius:1px; }
.kn-wp-name { font-size:10px; line-height:1; text-align:center; }
.kn-wp.is-on { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.kn-widthgroup { flex-wrap:wrap; }
.kn-slider { width:130px; accent-color:var(--accent); }
.kn-wval { min-width:2em; font-size:13px; text-align:right; font-variant-numeric:tabular-nums; }
.kn-wprev { width:150px; height:34px; border:1px solid var(--line-strong); background:var(--line); }
.kn-erasegroup { margin-left:8px; }
.kn-pop { position:fixed; z-index:6; display:none; flex-direction:column; gap:8px; width:252px; padding:10px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); }
.kn-pop.is-open { display:flex; }
.kn-sv { width:230px; height:156px; touch-action:none; cursor:crosshair; border:1px solid var(--line-strong); }
.kn-hue { width:230px; accent-color:var(--ink); }
.kn-pop-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kn-chip { width:30px; height:30px; border:1px solid var(--line-strong); flex:0 0 auto; }
.kn-hex { width:92px; min-height:30px; padding:2px 6px; border:1px solid var(--line-strong); background:var(--white); font:inherit; font-size:13px; font-variant-numeric:tabular-nums; }
.kn-leaf { z-index:2; pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform; }
.kn-sep { flex:0 0 auto; width:1px; align-self:stretch; background:var(--line-strong); margin:0 4px; }
.kn-gap { flex:1 0 8px; }
.kn-pinfo { flex:0 0 auto; font-size:13px; color:var(--ink-soft); min-width:4.5em; text-align:center; }
.kn-view { position:relative; flex:1 1 auto; overflow:hidden; perspective:1800px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:crosshair; }
.kn-stage { position:absolute; left:0; top:0; transform-origin:0 0; background:var(--white); }
.kn-stage > img, .kn-stage > canvas { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.kn-fill { mix-blend-mode:multiply; }
.kn-notes { position:absolute; inset:0; pointer-events:none; }
.kn-note { position:absolute; width:16%; aspect-ratio:1 / 1; padding:6px; overflow:hidden; text-align:left; border:0; border-radius:2px; background:rgba(255,230,120,.95); color:var(--ink); font:inherit; font-size:12px; line-height:1.4; pointer-events:auto; cursor:pointer; white-space:pre-wrap; word-break:break-all; }
.kn-msg { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); max-width:calc(100% - 32px); padding:8px 14px; background:var(--ink); color:var(--paper); border-radius:var(--radius); font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; }
.kn-msg.is-on { opacity:.92; }
.kn-dlg-bg { position:absolute; inset:0; z-index:5; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:16px; }
.kn-dlg { width:min(420px, 100%); background:var(--paper); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px; }
.kn-dlg textarea { width:100%; font:inherit; }
.kn-dlg-row { display:flex; gap:8px; flex-wrap:wrap; }
.kn-dlg-note { margin:0; font-size:12px; color:var(--ink-soft); line-height:1.7; }
.kn-wide { width:100%; }
/* ふだんの閲覧画面に重ねる書き込み */
.kn-overlay { position:absolute; inset:0; z-index:9; pointer-events:none; }
.kn-ov { position:absolute; }
.kn-ov.has-fill { mix-blend-mode:multiply; }
@media (max-width: 760px) { .kn-btn, .kn-tool, .kn-seg { min-height:40px; padding:6px 10px; } .kn-small { min-height:34px; } .kn-color { width:34px; height:34px; } .kn-slider { width:110px; } .kn-wprev { width:110px; } }

/* アプリ内ブラウザで画面全体が拡大されたとき：下のボタン類を隠し、元に戻し方を知らせる（viewer.js の browserZoomed） */
html:not(.vv-zoomed), html:not(.vv-zoomed) body { touch-action: pan-x pan-y; }
body.vv-zoomed #vw-toolbar, body.vv-zoomed #vw-header, body.vv-zoomed #fs-menu, body.vv-zoomed #fs-exit, body.vv-zoomed .nav-arrow { visibility: hidden; }
.vv-zoom-tip { position:fixed; left:0; top:0; z-index:400; transform-origin:0 0; margin:8px; padding:8px 12px; max-width:280px; background:var(--ink); color:var(--paper); border-radius:var(--radius); font-size:13px; line-height:1.6; pointer-events:none; }

/* ============================================================
   スマホ：下の操作は「細い1段のフッター」だけにする（どのデザインパターンでも共通）
   ------------------------------------------------------------
   以前は、デザインパターン「ドック」で、操作が紙面の上に浮かぶ大きなカードになり、
   2段に折り返して紙面の下の部分を隠していた（LINEなどのアプリ内ブラウザで目立った）。
   スマホでは、紙面の下に高さを確保した1段の帯（前へ・スライダー・ページ・次へ・メニュー）にして、
   紙面と重ならないようにする。メニューを開いた画面も、帯の上に低く収める。
   没入型（pack-vanilla）は、操作を隠すこと自体が目的なので、従来のままにする。
   ============================================================ */
@media (max-width: 640px) {
  body:not(.pack-vanilla) #vw-toolbar {
    position: static; transform: none; left: auto; bottom: auto; width: auto; max-width: none;
    flex-wrap: nowrap; justify-content: space-between; gap: 4px;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: var(--paper-raised); box-shadow: none;
    min-height: 48px;
  }
  body:not(.pack-vanilla) #vw-toolbar .tb-center { flex: 1 1 auto; order: 0; min-width: 0; gap: 2px; }
  body:not(.pack-vanilla) #tb-slider { flex: 1 1 auto; width: auto; min-width: 40px; }
  body:not(.pack-vanilla) #tb-pageinfo { min-width: 44px; font-size: 12px; }
  body:not(.pack-vanilla) #vw-toolbar button { min-width: 38px; min-height: 38px; padding: 4px; }
  body:not(.pack-vanilla) #vw-toolbar .tb-menu { order: 0; padding: 4px 10px; min-height: 38px; }
  #vw-toolbar .tb-menu-label { display: none; }
  /* ドック型・没入型が足していた、下の余白（浮かぶカードの逃げ）は要らない */
  body.pack-shadcn #vw-stage { padding: 12px 6px; }
  /* アドレスバーの出し入れがあるブラウザでも、いま見えている高さに操作帯が収まるようにする */
  @supports (height: 100dvh) { body { height: 100dvh; } }

  /* メニュー：画面の半分以内の、低く小さなシートにする（帯の上に重ねる） */
  #menu-sheet { max-height: 46vh; }
  .menu-head { padding: 8px 14px; font-size: 14px; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .menu-item { padding: 8px 4px; gap: 3px; font-size: 11px; }
  .menu-item .mi-icon { font-size: 18px; }
}
.kn-icobtn { display:inline-flex; align-items:center; gap:5px; }
.kn-more { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.kn-morebtn { display:none; }
.kn-toolsbtn { display:inline-flex; align-items:center; gap:8px; padding:3px 10px; }
.kn-toolsbtn canvas { width:56px; height:23px; display:block; }
.kn-tb-name { font-size:13px; }
.kn-tb-hint { font-size:12px; color:var(--ink-soft); }
.kn-toolsbtn.is-on .kn-tb-hint { color:var(--paper); }
.kn-btn.is-on { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.kn-panel { display:none; position:fixed; z-index:5; width:min(640px, calc(100vw - 16px)); max-height:calc(100vh - 80px); overflow:auto; background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius); }
.kn-panel.is-open { display:block; }
.kn-panel .kn-tools { flex-wrap:wrap; overflow-x:visible; border-bottom:0; }
.kn-panel .kn-tools .kn-group { flex-wrap:wrap; max-width:100%; }
@media (max-width: 900px) {
  .kn-bar { flex-wrap:nowrap; gap:4px; padding:6px; }
  .kn-bar .kn-sep, .kn-bt, .kn-tb-hint { display:none; }
  .kn-bar .kn-btn { padding:6px 8px; min-height:40px; }
  .kn-bar .kn-arrow { min-width:36px; padding:6px; }
  .kn-pinfo { min-width:3.6em; font-size:12px; }
  .kn-toolsbtn { flex-direction:column; justify-content:center; gap:0; padding:3px 6px; }
  .kn-toolsbtn canvas { width:44px; height:18px; }
  .kn-tb-name { font-size:10px; line-height:1.2; }
  .kn-morebtn { display:inline-flex; align-items:center; justify-content:center; min-width:38px; }
  .kn-panel { left:0 !important; right:0; top:auto !important; bottom:0; width:auto; max-height:72vh; border-width:1px 0 0; border-radius:0; padding-bottom:env(safe-area-inset-bottom); }
  .kn-panel .kn-tools .kn-sep { display:none; }
  .kn-more { display:none; position:fixed; right:8px; z-index:5; flex-direction:column; align-items:stretch; gap:10px; padding:10px; background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius); }
  .kn-more.is-open { display:flex; }
  .kn-more .kn-btn { min-height:44px; }
}
@media (max-width: 900px) {
  .kn-bar { overflow-x:hidden; }
  .kn-panel { max-height:72dvh; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .kn-bar { padding-top:max(6px, env(safe-area-inset-top)); }
}
@media (max-width: 420px) {
  .kn-bar { gap:2px; padding-left:4px; padding-right:4px; }
  .kn-bar .kn-btn { padding:6px 5px; }
  .kn-bar .kn-arrow, .kn-bar .kn-icobtn, .kn-bar .kn-morebtn { min-width:32px; }
  .kn-bar .kn-gap { flex:1 1 0; min-width:0; }
  .kn-pinfo { flex:1 1 0; min-width:2.4em; font-size:11px; white-space:nowrap; }
  .kn-toolsbtn { padding:3px 4px; }
}
@media (max-height: 500px) and (max-width: 900px) {
  .kn-panel { left:auto !important; right:0; top:60px !important; bottom:0; width:min(440px, 62vw); max-height:none; border-width:0 0 0 1px; }
}

/* 共有の安全性（任意。BOOK.protect がある場合のみ protect.js が使う） */
body.prot-guard { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.prot-guard input, body.prot-guard textarea { -webkit-user-select: text; user-select: text; }
body.prot-guard img { -webkit-user-drag: none; }
.prot-mark { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background-repeat: repeat; }
@media print { body.prot-guard * { display: none !important; } }