/* web4-flipbook viewer styles.
 *
 * テーマでデザインを上書きしたい場合:
 *   方法A: テーマの style.css などで .web4-flipbook-body { ... } 等を直接指定
 *   方法B: テーマディレクトリに /web4-flipbook/viewer.css を置く
 *          (プラグインCSSの後に自動 enqueue されるので確実に上書きされる)
 */

.web4-flipbook {
	--w4fb-bg: #1c1c1c;
	--w4fb-surface: #2a2a2a;
	--w4fb-border: #444;
	--w4fb-text: #f0f0f0;
	--w4fb-accent: #4a90e2;
	/* PC: アイコン + ラベル縦積みのため高さを 64px に拡張。
	   モバイル時 (max-width:720px) は 56px へ戻す (mobile media query 内で再宣言)。 */
	--w4fb-toolbar-h: 64px;

	box-sizing: border-box;
	width: 100%;
	background: var(--w4fb-bg);
	color: var(--w4fb-text);
	border-radius: 6px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
	position: relative;
	user-select: none;
	display: flex;
	flex-direction: column;
}
/* ツールバー位置 (data-toolbar-position 属性) — デフォルトは下部 (industry標準)。
   flex-direction だけ反転させて、DOM順を変えずに視覚順を切替える。
   ボーダーの上下は方向に応じて再宣言する。 */
.web4-flipbook[data-toolbar-position="bottom"] {
	flex-direction: column-reverse;
}
.web4-flipbook[data-toolbar-position="bottom"] .web4-flipbook-toolbar {
	border-bottom: 0;
	border-top: 1px solid var(--w4fb-border);
}
.web4-flipbook *, .web4-flipbook *::before, .web4-flipbook *::after { box-sizing: border-box; }

.web4-flipbook-error {
	padding: 16px;
	background: #8b1a1a;
	color: #fff;
	border-radius: 4px;
}

/* Toolbar */
.web4-flipbook-toolbar {
	display: flex;
	align-items: center;
	justify-content: center; /* ボタン群を中央寄せ */
	/* gap: 4px; */
	gap: 0px;
	/* ラベル付き縦積みボタンに合わせて min-height にし、複数行折り返し時にも追従させる */
	min-height: var(--w4fb-toolbar-h);
	padding: 0 8px;
	background: var(--w4fb-surface);
	border-bottom: 1px solid var(--w4fb-border);
	flex-wrap: wrap;
}
/* PC: アイコン (上) + ラベル (下) の縦積みレイアウト。
   モバイル時 (max-width:720px) はラベルを非表示にして従来の横並びレイアウトへ戻す。 */
.web4-flipbook .w4fb-btn {
	background: transparent;
	color: var(--w4fb-text);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 48px;
	min-height: 56px;
	/* モバイル時の連打でダブルタップ判定 → 自動ズームが走るのを抑止。
	   manipulation はシングルタップ・スクロール・ピンチを許可しつつ
	   ダブルタップズームと down delay を無効化する標準値。 */
	touch-action: manipulation;
}
.web4-flipbook .w4fb-btn-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}
.web4-flipbook .w4fb-btn-glyph svg {
	width: 100%;
	height: 100%;
	display: block;
}
.web4-flipbook .w4fb-btn-label {
	font-size: 10px;
	line-height: 1.1;
	opacity: 0.85;
	white-space: nowrap;
}
.web4-flipbook .w4fb-btn:hover {
	background: rgba(255,255,255,.08);
	border-color: var(--w4fb-border);
}
.web4-flipbook .w4fb-spacer { flex: 0 0 12px; }
.web4-flipbook .w4fb-page-input {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	margin: 0 4px;
}
.web4-flipbook .w4fb-page-input input {
	width: 56px;
	text-align: center;
	background: var(--w4fb-bg);
	color: var(--w4fb-text);
	border: 1px solid var(--w4fb-border);
	border-radius: 3px;
	padding: 4px 6px;
	font-size: 13px;
}

/* Stage layout
   サイズ規則 (埋め込みモード):
     viewer_width  = min(親コンテナ幅, 95vh × pdf_ratio)
     viewer_height = viewer_width / pdf_ratio   (= aspect-ratio)
   --w4fb-book-ratio は viewer.js の boot 時に PDF 実比から JS で注入される (技術的に必要)。
   テーマで寸法を変えたい場合は max-width / aspect-ratio / height などを直接上書き。 */
.web4-flipbook-body {
	display: flex;
	width: 100%;
	/* dvh = 動的ビューポート高。iOS Safari (iPad / iPhone) はアドレスバーが見えている時
	 * vh が「アドレスバー込みの最大値」を返すため、 95vh のままだとカタログがブラウザ実領域
	 * を超えてはみ出る。 dvh は現に可視な viewport を返すので追従する。
	 * 古いブラウザは vh フォールバック。 */
	max-width: calc(95vh * var(--w4fb-book-ratio, 0.75));
	max-width: calc(95dvh * var(--w4fb-book-ratio, 0.75));
	aspect-ratio: var(--w4fb-book-ratio, 3 / 4);
	min-height: 360px;
	margin: 0 auto;
	background: #111;
}
.web4-flipbook-sidebar {
	width: 220px;
	flex: 0 0 220px;
	background: var(--w4fb-surface);
	border-right: 1px solid var(--w4fb-border);
	overflow: auto;
	display: none;
}
.web4-flipbook-sidebar.w4fb-thumbs-wide {
	width: 280px;
	flex-basis: 280px;
}
.web4-flipbook-sidebar.w4fb-open { display: block; }

.web4-flipbook-stage {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111;
	--w4fb-scale: 1;
	--w4fb-tx: 0px;
	--w4fb-ty: 0px;
	transform-origin: center center;
	transition: transform .15s ease;
}
/* zoom 中の transform は flip-mode (.w4fb-book) など、自身で transform 合成していない
   direct child に対して適用する。slide-mode の strip は除外 (strip 全体に scale をかけると
   隣接アイテムが stage 内に侵入する問題が起きるため、slide では別ルールで現在アイテムのみ
   ズームする)。 */
.web4-flipbook-stage.w4fb-zoomed > *:not(.w4fb-slide-strip) {
	transform: translate(var(--w4fb-tx), var(--w4fb-ty)) scale(var(--w4fb-scale));
	transform-origin: center center;
	transition: transform .12s ease-out;
}
/* slide-mode 用ズーム: strip ではなく現在アイテムのみに transform を適用する。
   strip 自体は scale 1 のまま (= strip-tx は素のピクセル数で機能)、現在アイテムが
   自分のスロット内で拡縮する。隣接アイテムは natural な位置 (隣のスロット = stage 外) に
   留まるので、ズームアウトで隣ページが見える不具合が構造的に発生しない。 */
.web4-flipbook-stage.w4fb-zoomed .w4fb-slide-item--current {
	transform: translate(var(--w4fb-tx, 0px), var(--w4fb-ty, 0px)) scale(var(--w4fb-scale, 1));
	transform-origin: center center;
	transition: transform .12s ease-out;
}
.web4-flipbook-stage.w4fb-zoomed { cursor: grab; }

/* Slide mode (strip 版、Swiper.js 風アーキテクチャ)
   stage (overflow:hidden、CSS で touch-action 制御)
	 strip (display:flex, width = itemCount × 100%, transform:translateX で位置決め)
	   item (width = 100%/itemCount = stage 幅と同等)
		 win (overflow:hidden で半面クリップ。spread mode では実質ノーオプ)
		   img (width:200% で見開き WebP の半分を margin-left で見せる)

   1 swipe = 1 アイテム送り。strip 全体を translateX するだけのシンプル設計で、
   clip-path も per-img scale も不要。スワイプ・遷移はネイティブの translateX
   1 個のアニメで完結する。 */
.w4fb-slide-strip {
	--w4fb-item-count: 1;
	/* swipe / 遷移用 translate (slide-mode.js が % 単位で書き換え)。
	   ズーム (--w4fb-tx/--w4fb-ty/--w4fb-scale) は strip ではなく現在アイテム
	   (.w4fb-slide-item--current) に独立適用する設計。strip 自体に scale をかけると
	   隣接アイテムが stage の overflow:hidden 内に侵入してしまうため。 */
	--w4fb-strip-tx: 0%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	height: 100%;
	width: calc(var(--w4fb-item-count) * 100%);
	transform: translate3d(var(--w4fb-strip-tx), 0, 0);
	transform-origin: 0 50%;
	will-change: transform;
	/* 標準的なスライド duration + snappy easing (ネイティブカルーセル相当のテンポ) */
	transition: transform 260ms cubic-bezier(.25, .8, .25, 1);
	/* iOS Safari の合成最適化を引き出す */
	backface-visibility: hidden;
}
.w4fb-slide-item {
	flex: 0 0 calc(100% / var(--w4fb-item-count));
	height: 100%;
	position: relative;
}
/* 半面切り抜きウィンドウ。img が 200% 幅で入っていて、margin-left で左右どちらを
   見せるかを切替える。spread アイテム (data-side="spread") はそのまま 100% 表示。
   注: flex/justify-content:center を付けると img が win 中央に揃って「画像の真ん中」
   が見えてしまう (旧バグ)。block layout で左端原点を維持する。 */
.w4fb-slide-win {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #111;
}
.w4fb-slide-img {
	display: block;
	box-shadow: 0 4px 24px rgba(0,0,0,.5);
	user-select: none;
	-webkit-user-drag: none;
}
.w4fb-slide-item[data-side="spread"] .w4fb-slide-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.w4fb-slide-item[data-side="left"] .w4fb-slide-img,
.w4fb-slide-item[data-side="right"] .w4fb-slide-img {
	/* 見開き WebP を 2 倍幅で配置。win.overflow:hidden で半分が見える。
	   左半分: margin-left:0 (デフォルト) → img の x=0..50% が win の 0..100% に出る
	   右半分: margin-left:-100% で img を左へ 100% シフト → img の x=50..100% が見える */
	width: 200%;
	height: 100%;
	object-fit: contain;
}
.w4fb-slide-item[data-side="right"] .w4fb-slide-img {
	margin-left: -100%;
}

/* Flip mode */
.w4fb-book {
	width: 100%;
	height: 100%;
}
/* StPageFlip は portrait 強制のため minWidth: 9999 を渡しているが、
   その副作用として bookEl 自身 (.stf__parent) にインラインで
   min-width: 9999px; min-height: 9999/ratio px が設定されてしまう。
   さらに内側の .stf__wrapper にも同様の影響があるので両方リセットして
   親コンテナにフィットさせる。これがないとページ画像が 9999px幅で描画され、
   ステージ (overflow:hidden) からはみ出した一部だけが極端な拡大表示になる。 */
.web4-flipbook .stf__parent,
.web4-flipbook .stf__wrapper {
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
}
/* loadFromHTML 方式のページ要素。
   StPageFlip は渡された要素に .stf__item を付与し、position:absolute と
   width/height (px) をインラインで設定する。内側の <img> は object-fit:contain
   でアスペクト比を保ったまま親領域に確実にフィットする (拡大表示の不具合対策)。 */
.web4-flipbook .w4fb-flip-page {
	width: 100%;
	height: 100%;
	background: #fff;
	overflow: hidden;
}
.web4-flipbook .w4fb-flip-page img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Thumbs sidebar */
.web4-flipbook-thumbs .w4fb-thumbs-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	padding: 8px;
}
/* 横長PDF (両開きA3カタログ等) は1列にして幅を活かす */
.web4-flipbook-thumbs.w4fb-thumbs-wide .w4fb-thumbs-list {
	grid-template-columns: 1fr;
}
.web4-flipbook-thumbs .w4fb-thumb {
	background: transparent;
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	position: relative;
	/* PDF実アスペクト比を JS から CSS変数で渡される */
	aspect-ratio: var(--w4fb-thumb-ratio, 3 / 4);
	overflow: hidden;
	border-radius: 3px;
}
.web4-flipbook-thumbs .w4fb-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #222;
}
.web4-flipbook-thumbs .w4fb-thumb.w4fb-active {
	border-color: var(--w4fb-accent);
}
.web4-flipbook-thumbs .w4fb-thumb-num {
	position: absolute;
	bottom: 2px;
	right: 4px;
	color: #fff;
	font-size: 11px;
	background: rgba(0,0,0,.6);
	padding: 1px 4px;
	border-radius: 2px;
}

/* -------- 付箋ページ一覧パネル (N2) --------
   サムネ一覧と排他で開閉する。1 列固定 (横長 PDF でも視認性優先)、
   カード = サムネ + ページ番号 + 付箋色ドット の構造。 */
.web4-flipbook-stickies {
	padding: 8px;
}
.web4-flipbook-stickies .w4fb-stickies-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.web4-flipbook-stickies .w4fb-stickies-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px;
	background: var(--w4fb-bg, #1a1a1a);
	border: 1px solid var(--w4fb-border);
	border-radius: 4px;
	cursor: pointer;
	color: inherit;
	text-align: left;
	font: inherit;
}
.web4-flipbook-stickies .w4fb-stickies-card:hover {
	border-color: var(--w4fb-accent);
}
.web4-flipbook-stickies .w4fb-stickies-thumb-wrap {
	aspect-ratio: var(--w4fb-thumb-ratio, 3 / 4);
	overflow: hidden;
	background: #000;
	border-radius: 3px;
}
.web4-flipbook-stickies .w4fb-stickies-thumb {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.web4-flipbook-stickies .w4fb-stickies-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	font-size: 12px;
}
.web4-flipbook-stickies .w4fb-stickies-page-num {
	opacity: 0.85;
}
.web4-flipbook-stickies .w4fb-stickies-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex-wrap: wrap;
}
.web4-flipbook-stickies .w4fb-stickies-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.25);
}
/* 付箋色は .w4fb-pin と同じ色値を共有 (Material 500 系、annotations.css と同期) */
.web4-flipbook-stickies .w4fb-stickies-dot.w4fb-color-yellow { background: #fbc02d; }
.web4-flipbook-stickies .w4fb-stickies-dot.w4fb-color-red    { background: #f44336; }
.web4-flipbook-stickies .w4fb-stickies-dot.w4fb-color-blue   { background: #2196f3; }
.web4-flipbook-stickies .w4fb-stickies-dot.w4fb-color-green  { background: #4caf50; }
.web4-flipbook-stickies .w4fb-stickies-more {
	font-size: 11px;
	opacity: 0.7;
	margin-left: 2px;
}
/* ペン描画があるページのマーク。 色 dot とは区別がつくよう、 SVG アイコン + 中間色 (グレー) で表示。
 * 付箋ドット (8px) と視覚バランスを揃え、 dot の右に並ぶ形にする。 */
.web4-flipbook-stickies .w4fb-stickies-pen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	color: #888;
	margin-left: 2px;
}
.web4-flipbook-stickies .w4fb-stickies-pen svg {
	width: 100%;
	height: 100%;
	display: block;
}
.web4-flipbook-stickies .w4fb-stickies-empty {
	padding: 20px 8px;
	text-align: center;
	opacity: 0.6;
	font-size: 13px;
}

/* Fullscreen 共通サイズ規則
 * 2つのフルスクリーン動線で共有:
 *   1. ブラウザのフルスクリーンAPI (.web4-flipbook:fullscreen) — toolbar の "⛶" ボタン
 *   2. URL ベースの専用ページ (body.web4-flipbook-fs-page) — 一覧→別タブ
 * いずれも埋め込みモードの max-width / aspect-ratio を viewport ベースに上書き、
 * 画面サイズいっぱいに広げる。
 *
 * specificity: .web4-flipbook:fullscreen .web4-flipbook-body = (0,0,3,0)
 * これにより、テーマ override の .web4-flipbook-body (0,0,1,0) を !important なしに上書き可能。
 */
.web4-flipbook:fullscreen,
body.web4-flipbook-fs-page .web4-flipbook {
	width: 100vw;
	/* dvh = 動的ビューポート高。iOS Safari / Android Chrome 等のアドレスバー
	   伸縮に追従するため、100vh のように「ブラウザ UI 領域も含めた最大値」を
	   返さず、現に可視な viewport 高にぴったり収まる。これでツールバーが
	   ブラウザのボトムバーに隠れる現象を解消できる。
	   (古いブラウザは 100vh にフォールバック) */
	height: 100vh;
	height: 100dvh;
	border-radius: 0;
}
.web4-flipbook:fullscreen .web4-flipbook-body,
body.web4-flipbook-fs-page .web4-flipbook-body {
	/* 縦は画面全高 - ツールバー、横は短辺ベースで PDF 比に合わせる */
	max-width: calc((100dvh - var(--w4fb-toolbar-h, 44px)) * var(--w4fb-book-ratio, 0.75));
	max-height: calc(100dvh - var(--w4fb-toolbar-h, 44px));
	min-height: 0;
	/* タブレット縦持ち (768〜) 等で body の aspect-ratio が viewport より小さい場合、
	   余白が上端に集中して「カタログが下に寄る」現象を防ぐ。column-reverse 配下の
	   flex item に margin:auto を当てると、main 軸 (縦) の残余白を上下均等配分する。 */
	margin: auto;
}

/* フルスクリーン時のサイドバー (サムネ一覧 / 付箋ページ一覧): overlay 風 left fixed
 * 通常モードは flex で stage を圧迫するが、フルスクリーン時は PDF カタログに
 * できるだけ被らないよう左側に固定パネルとして overlay 表示する。
 * 開閉 (.w4fb-open) は通常モードと同じ setOpen()/toggle() で動く。
 *
 * 位置はツールバー位置 (data-toolbar-position) に追従:
 *   - top    (デフォルト): top = ツールバー高、bottom: 0
 *   - bottom              : top: 0、bottom = ツールバー高
 *
 * 副次効果: 2D フリップでは stage が圧迫されないため、サイドバー開閉時の
 * 紙片アニメ残像 / 右ずれ問題も構造的に発生しない (タスク 3 の代替策)。
 *
 * N2 でサムネ一覧と排他切替する付箋ページ一覧パネルが追加されたため、
 * 両 .web4-flipbook-thumbs / .web4-flipbook-stickies を共通ルールで扱う。
 */
.web4-flipbook:fullscreen .web4-flipbook-sidebar.web4-flipbook-thumbs,
.web4-flipbook:fullscreen .web4-flipbook-sidebar.web4-flipbook-stickies,
body.web4-flipbook-fs-page .web4-flipbook .web4-flipbook-sidebar.web4-flipbook-thumbs,
body.web4-flipbook-fs-page .web4-flipbook .web4-flipbook-sidebar.web4-flipbook-stickies {
	position: fixed;
	left: 0;
	width: 180px;
	z-index: 100;
	/* fullscreen 時は常時 DOM 上は表示し transform で隠す。
	 * これにより w4fb-open の付与/解除で transform アニメが効く。 */
	display: block;
	transform: translateX(-100%);
	background: var(--w4fb-surface);
	border-right: 1px solid var(--w4fb-border);
	box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4);
	/* デフォルト: ツールバーが上にある場合 (top) */
	top: var(--w4fb-toolbar-h, 44px);
	bottom: 0;
}
/* ツールバーが下にある場合 (bottom) は top/bottom を入れ替え */
.web4-flipbook:fullscreen[data-toolbar-position="bottom"] .web4-flipbook-sidebar.web4-flipbook-thumbs,
.web4-flipbook:fullscreen[data-toolbar-position="bottom"] .web4-flipbook-sidebar.web4-flipbook-stickies,
body.web4-flipbook-fs-page .web4-flipbook[data-toolbar-position="bottom"] .web4-flipbook-sidebar.web4-flipbook-thumbs,
body.web4-flipbook-fs-page .web4-flipbook[data-toolbar-position="bottom"] .web4-flipbook-sidebar.web4-flipbook-stickies {
	top: 0;
	bottom: var(--w4fb-toolbar-h, 44px);
}
/* transition は w4fb-ready が付与されてから有効化。ページロード直後の
 * 「初期 transform (= 0) → translateX(-100%) への一瞬の遷移」が
 * サイドバーを開いて閉じるように見える現象を防ぐ。viewer.js の boot で
 * 1 RAF 後に root へ w4fb-ready を付与する。 */
.web4-flipbook.w4fb-ready:fullscreen .web4-flipbook-sidebar.web4-flipbook-thumbs,
.web4-flipbook.w4fb-ready:fullscreen .web4-flipbook-sidebar.web4-flipbook-stickies,
body.web4-flipbook-fs-page .web4-flipbook.w4fb-ready .web4-flipbook-sidebar.web4-flipbook-thumbs,
body.web4-flipbook-fs-page .web4-flipbook.w4fb-ready .web4-flipbook-sidebar.web4-flipbook-stickies {
	transition: transform 0.22s ease;
}
/* w4fb-open でスライドイン */
.web4-flipbook:fullscreen .web4-flipbook-sidebar.web4-flipbook-thumbs.w4fb-open,
.web4-flipbook:fullscreen .web4-flipbook-sidebar.web4-flipbook-stickies.w4fb-open,
body.web4-flipbook-fs-page .web4-flipbook .web4-flipbook-sidebar.web4-flipbook-thumbs.w4fb-open,
body.web4-flipbook-fs-page .web4-flipbook .web4-flipbook-sidebar.web4-flipbook-stickies.w4fb-open {
	transform: translateX(0);
}

/* URL ベースのフルスクリーン専用ページ
 * single-flipbook-fullscreen.php が <body class="web4-flipbook-fs-page"> を出力する。
 * テーマヘッダー・フッターなしで viewer のみが viewport いっぱいに広がる。 */
body.web4-flipbook-fs-page {
	margin: 0;
	padding: 0;
	background: #000;
	overflow: hidden;
	/* 子の .web4-flipbook を 100dvh で正しく収めるため、body 自身も同じ高さに揃える */
	height: 100vh;
	height: 100dvh;
}
body.web4-flipbook-fs-page .web4-flipbook {
	border-radius: 0;
}
/* iOS / Android の Home インジケータ・下部ジェスチャ領域分のセーフエリアを
   ツールバーの下に確保する。data-toolbar-position="bottom" の時のみ。
   ブラウザのアドレスバー自体は dvh で別途回避済み。これは「Home バー」のような
   常時表示される画面端マージン用。 */
body.web4-flipbook-fs-page .web4-flipbook[data-toolbar-position="bottom"] .web4-flipbook-toolbar {
	padding-bottom: env(safe-area-inset-bottom);
}
body.web4-flipbook-fs-page .web4-flipbook[data-toolbar-position="top"] .web4-flipbook-toolbar {
	padding-top: env(safe-area-inset-top);
}
/* fullscreen URL モードでは overlay サイドバー (position:fixed, z-index:100) が
   toolbar を覆ってしまうため、toolbar 自身を更に上のレイヤに上げて常時タップ可能にする。
   タブレット幅 (mobile @media が効かないサイズ) でも有効。 */
body.web4-flipbook-fs-page .web4-flipbook-toolbar {
	position: relative;
	z-index: 200;
}
/* フルスクリーンページモード時のみ表示する × クローズボタン */
.web4-flipbook .w4fb-btn-close {
	display: none;
}
body.web4-flipbook-fs-page .web4-flipbook .w4fb-btn-close {
	display: inline-flex;
}

/* PC ではオーバーフロー (⋯) ボタンは常時非表示。モバイル時のみ可視化する。 */
.web4-flipbook .w4fb-btn-overflow {
	display: none;
}

/* スライドモードのステージ:
   - 横方向の pan は JS swipe ハンドラに渡す (touch-action リストに含めない)
   - 縦方向の pan はブラウザのページスクロールに渡す (pan-y)
   - 2 本指のピンチはブラウザのネイティブズームに渡す (pinch-zoom)
   - ダブルタップズームと down delay は抑止 (連打時の意図せざる拡大を防ぐ) */
.web4-flipbook[data-mode="slide"] [data-flipbook-stage] {
	touch-action: pan-y pinch-zoom;
}

/* Mobile */
@media (max-width: 720px) {
	/* スマホは画面が小さいので縦方向制約をやや厳しく (75dvh)。
	   横持ちで画面下端を超えて巨大表示にならないよう抑える。
	   dvh = 動的ビューポート高 (iOS Safari / Android Chrome のアドレスバー伸縮に追従)。 */
	.web4-flipbook {
		/* モバイルはラベル非表示のためツールバー高を従来の 56px に戻す */
		--w4fb-toolbar-h: 56px;
	}
	.web4-flipbook-body {
		max-width: calc(75vh * var(--w4fb-book-ratio, 0.75));
		max-width: calc(75dvh * var(--w4fb-book-ratio, 0.75));
		min-height: 280px;
		/* モバイル時はカタログを画面の垂直中央に配置する。
		   margin: auto は flex item に対して両軸方向の余白を均等配分する
		   ため、column 方向 (flex-direction: column / column-reverse) で
		   上下中央寄せが効く。toolbar は flex の通常順序で端に残る。 */
		margin: auto;
	}
	.web4-flipbook-sidebar { width: 160px; flex-basis: 160px; }

	/* モバイル時のツールバー: 1 行固定 (wrap させない) + ボタン群を等間隔配分。
	   space-between で先頭が左端、末尾が右端に貼り付き、間は均等に展開される。
	   現在の DOM 順: thumbs / first / prev / [page input] / next / last / (close: fullscreen URL のみ)
	   結果: [☐] [⏮] [◀] [N/N] [▶] [⏭] [✕] が画面幅いっぱいに自然分配される。 */
	.web4-flipbook .web4-flipbook-toolbar {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 2px;
		/* サイドバーが上に乗らないように z-index を持ち上げる
		   (フルスクリーン URL モードのオーバーレイサイドバーは z-index:100) */
		position: relative;
		z-index: 200;
	}
	/* モバイルでは PC 用のグループ間 spacer は不要 (横幅を浪費するだけ) */
	.web4-flipbook .w4fb-spacer { display: none; }

	/* ===== 片面表示 (splitSupport 有効 + モバイル) =====
	   strip 化により clip-path / transform: scale(2) は不要になった (slide-mode が
	   1 半ページ = 1 strip アイテムとして DOM レベルで分割)。
	   ただしステージのアスペクト比は片面 (A4 縦) に合わせる必要がある。 */
	.web4-flipbook[data-side="left"] .web4-flipbook-body,
	.web4-flipbook[data-side="right"] .web4-flipbook-body {
		aspect-ratio: 1 / 1.414;
		max-width: calc(75vh * (1 / 1.414));
		max-width: calc(75dvh * (1 / 1.414));
		min-height: 360px;
	}
	/* ページ番号入力 (input + "/ N" 表示) はモバイルでは完全非表示。
	   - ジャンプは「最初/最後/サムネ」で代替可能 (ただし first/last も hidden になったため
	     現状はサムネ一覧のみ)。
	   - input そのものはタップ時の iOS Safari 自動ズーム問題があり、表示専用にしても
	     画面の幅を消費するだけで操作性に寄与しない判断。 */
	.web4-flipbook .w4fb-page-input { display: none; }

	/* モバイル: ラベル非表示 + 横並びレイアウト (44×44px のタッチターゲットを維持) */
	.web4-flipbook .w4fb-btn-label { display: none; }
	.web4-flipbook .w4fb-btn {
		flex-direction: row;
		gap: 0;
		min-width: 44px;
		min-height: 44px;
		height: 44px;
		padding: 10px 8px;
	}

	/* モバイルツールバーの可視性振り分け (toolbar.js の MOBILE_TIER に対応):
	   - hidden:   完全非表示 (ピンチズーム代替 / 操作性悪い等)
	   - overflow: toolbar 直下なら非表示。⋯ をタップして開くと
	               .w4fb-overflow-overlay 内に DOM 移動されて可視化される。
	   - always:   常時表示 (デフォルト、ルール不要) */
	.web4-flipbook [data-flipbook-toolbar] .w4fb-btn[data-mobile-tier="hidden"] {
		display: none;
	}
	.web4-flipbook [data-flipbook-toolbar] > .w4fb-btn[data-mobile-tier="overflow"] {
		display: none;
	}
	/* ⋯ ボタンを可視化 */
	.web4-flipbook .w4fb-btn-overflow {
		display: inline-flex;
	}
}

/* ======================================================================
   オーバーフローメニュー (モバイル時の ⋯ タップで開く中央モーダル)
   document.body 直下に append されるため .web4-flipbook の overflow:hidden を
   完全に脱出する。media query 外で常に有効 (PC は ⋯ ボタンが出ないため
   起動経路がない)。
   ====================================================================== */

/* オーバーレイ (背景半透明 + フル画面、タップで閉じる) */
.w4fb-overflow-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	padding: 16px;
	/* iOS Safari でも全画面を埋めるよう dvh を使う (動的ビューポート) */
	height: 100dvh;
}

/* パネル (中央配置、メニュー項目を縦並びで保持) */
.w4fb-overflow-panel {
	background: #fff;
	color: #222;
	border-radius: 12px;
	padding: 8px;
	width: 100%;
	max-width: 340px;
	max-height: calc(100dvh - 32px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	overflow-y: auto;
}

/* ヘッダ (右上に ✕ 閉じるボタン) */
.w4fb-overflow-panel__header {
	display: flex;
	justify-content: flex-end;
	padding: 4px 4px 0 4px;
}
.w4fb-overflow-panel__close {
	background: transparent;
	border: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #555;
	border-radius: 6px;
}
.w4fb-overflow-panel__close:hover {
	background: rgba(0, 0, 0, 0.06);
}
.w4fb-overflow-panel__close svg {
	width: 22px;
	height: 22px;
}

/* メニュー内のボタン: アイコン + テキストラベルを横並び大型表示 */
.w4fb-overflow-panel .w4fb-btn {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	height: auto;
	min-height: 52px;
	width: 100%;
	border-radius: 8px;
	color: inherit;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
}
.w4fb-overflow-panel .w4fb-btn:hover,
.w4fb-overflow-panel .w4fb-btn:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	outline: 0;
}
.w4fb-overflow-panel .w4fb-btn-glyph svg {
	width: 24px;
	height: 24px;
}
.w4fb-overflow-panel .w4fb-btn-label {
	display: inline-block; /* モバイル時に隠した label を復活 */
	font-size: 16px;
	line-height: 1.2;
	opacity: 1;
}

/* ======================================================================
   Popover メニュー (PC のみ、印刷 / ダウンロードボタン直下に表示)
   document.body 直下に position: fixed でマウントされる。
   フェーズ 6 で導入。モバイルでは toolbar 側でボタン自体が hidden のため、
   PC 専用扱い。
   ====================================================================== */
.w4fb-popover-menu {
	position: fixed;
	z-index: 999999;
	min-width: 200px;
	max-width: 280px;
	padding: 4px;
	/* ツールバーと同じダーク配色で統一 (カタログ紙面の大半が白背景なため、
	   白背景ポップオーバーだと視認性が低い)。--w4fb-* は .web4-flipbook で
	   定義されるが、popover は document.body 直下にマウントされるため
	   :root に届かない → ここで直接同じ色値を指定する。 */
	background: #2a2a2a;
	color: #f0f0f0;
	border: 1px solid #444;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* 表示位置は JS が top/left を直接書く。初期値は画面外に飛ばして
	   位置確定前の一瞬のチラつきを防ぐ */
	top: -9999px;
	left: -9999px;
}
.w4fb-popover-menu__item {
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	padding: 10px 14px;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}
/* ダーク背景に合わせて hover/focus も明色の薄レイヤーで反転 */
.w4fb-popover-menu__item:hover,
.w4fb-popover-menu__item:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	outline: 0;
}
.w4fb-popover-menu__item:active {
	background: rgba(255, 255, 255, 0.16);
}

/* 項目内のスピナー枠 (デフォルト非表示、loading 中のみ可視)。
   gap で label との間隔を取りつつ、非表示時は spinner span 自体が 0px 幅で
   レイアウトに影響しないように。 */
.w4fb-popover-menu__item {
	display: flex;
	align-items: center;
	gap: 0;
}
.w4fb-popover-menu__spinner {
	display: inline-block;
	width: 0;
	height: 16px;
	border: 0;
	margin: 0;
	transition: width 120ms ease, margin 120ms ease;
	flex: 0 0 auto;
}
/* loading 状態: スピナーを 16px 幅で表示 + 回転、項目はクリック不可 */
.w4fb-popover-menu__item--loading {
	cursor: progress;
}
.w4fb-popover-menu__item--loading .w4fb-popover-menu__spinner {
	width: 16px;
	margin-right: 8px;
	/* ダーク背景に合わせて明色のスピナーに */
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-top-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	animation: w4fb-spin 720ms linear infinite;
}
/* busy 中は他の項目もクリック不可 (連打防止)、視覚的にうっすら抑止 */
.w4fb-popover-menu--busy .w4fb-popover-menu__item:not(.w4fb-popover-menu__item--loading) {
	pointer-events: none;
	opacity: 0.5;
}
@keyframes w4fb-spin {
	to { transform: rotate(360deg); }
}

/* ======================================================================
   Toast (画面下部の短時間メッセージ)
   PopoverMenu の async 失敗時のエラー通知に使う。
   ====================================================================== */
.w4fb-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translate(-50%, 12px);
	background: rgba(20, 20, 20, 0.92);
	color: #fff;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	max-width: 90vw;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	z-index: 1000000; /* popover (999999) より上 */
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
}
.w4fb-toast--visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* @page ルールについて (削除済、2026-05-21):
 *
 * 過去に `@page { size: landscape; margin: 0; }` を入れて印刷ダイアログの
 * 初期値を制御しようとしたが、Chrome の実装では以下の挙動になるため削除した:
 *   - size: landscape  → orientation セレクタが完全に非表示になり変更不可
 *   - margin: 0        → ユーザが前回選んだ margin 設定が優先されて反映されない
 *
 * Chrome では @page ルールは「強制指定」として扱われ、
 * 「初期値だけ提示してユーザに自由に変更させる」用途には使えない。
 * よって用紙の向きと余白はユーザの選択に委ねる。
 * Cmd+P 時の portrait+default ダイアログ不安定問題は、JS 側の
 * beforeprint で先回りクラスを当てる方式 (.w4fb-is-printing) で対処する。
 */

/* ======================================================================
   印刷時のスタイル (Cmd/Ctrl+P / 「画面印刷」ボタン)
   ----------------------------------------------------------------------
   設計方針 (2026-05-21 改修):
     - 主に `html.w4fb-is-printing` クラスベースで実装 (JS の beforeprint で付与)
     - @media print は最小限のフォールバック (Cmd+P で beforeprint が発火しない
       極稀な状況や、他ブラウザ向けの保険)
   なぜ @media print ベースを避けるか:
     portrait + 余白デフォルト時の印刷プレビュー幅が ~720px ぴったりで
     `@media (max-width: 720px)` が発火/不発火の境界に乗り、
     プレビュー描画中にレイアウトが揺れて Chrome のダイアログが
     不安定になる問題を構造的に回避するため。
     beforeprint で先回りクラスを当てれば Chrome がプレビュー描画を
     開始する時点でレイアウトが確定 → preview pipeline 安定。
   ====================================================================== */

/* UI chrome を非表示。印刷物にはカタログ + 付箋だけ残す。 */
html.w4fb-is-printing .web4-flipbook-toolbar,
html.w4fb-is-printing .web4-flipbook-sidebar,
html.w4fb-is-printing .w4fb-popover-menu,
html.w4fb-is-printing .w4fb-toast,
html.w4fb-is-printing .w4fb-overflow-overlay {
	display: none !important;
}

/* 背景色や影もインク節約のため除去。 */
html.w4fb-is-printing .web4-flipbook,
html.w4fb-is-printing .web4-flipbook-body,
html.w4fb-is-printing .web4-flipbook-stage {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* 付箋パネル: 印刷用の固定配置 (PC layout を強制)。
   portrait + 余白あり時の `@media (max-width:720px)` 誤発火に対する
   恒久的な防御。サイズも viewer 内に収まる小型値で固定。 */
html.w4fb-is-printing .w4fb-panel-layer {
	position: absolute !important;
	top: 12% !important;
	right: 4% !important;
	left: auto !important;
	width: min(300px, 40%) !important;
	z-index: 100 !important;
}
html.w4fb-is-printing .w4fb-sticky-panel {
	/* 内容に応じた自然サイズ。max-height をクリアして viewer 内に収まりやすく。 */
	max-height: 30vh !important;
	min-height: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* リンク先 select / 移動ボタン等のフッターは印刷不要 */
html.w4fb-is-printing .w4fb-sticky-foot {
	display: none !important;
}

/* フォールバック: beforeprint が発火しないケース向けに最小限の @media print。
   レイアウト変動を避けるため、ここでは chrome 非表示と背景クリアのみ。
   panel 位置等のレイアウト調整は class ベースに任せる。 */
@media print {
	.web4-flipbook-toolbar,
	.web4-flipbook-sidebar,
	.w4fb-popover-menu,
	.w4fb-toast,
	.w4fb-overflow-overlay {
		display: none !important;
	}
	.web4-flipbook,
	.web4-flipbook-body,
	.web4-flipbook-stage {
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}
}