/* =========================================================
   どど3Dブック☆ フロントエンド スタイル
   本（フリップブック）と書庫（棚グリッド）の両方を含む。
   ========================================================= */

.dodo3db-book-wrap {
	--dodo3db-accent: #7a4b2a;
	--dodo3db-paper: #fbf7ee;
	--dodo3db-paper-shade: #efe7d6;
	box-sizing: border-box;
	max-width: 980px;
	margin: 0 auto;
}

.dodo3db-book-wrap *,
.dodo3db-book-wrap *::before,
.dodo3db-book-wrap *::after {
	box-sizing: border-box;
}

.dodo3db-loading {
	text-align: center;
	padding: 60px 20px;
	color: #8a7a63;
	font-size: 15px;
}

.dodo3db-error {
	text-align: center;
	padding: 40px 20px;
	color: #b3402e;
	background: #fff3f0;
	border-radius: 8px;
}

/* ---------- ツールバー ---------- */

.dodo3db-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 10px;
	background: linear-gradient( to bottom, #2b2118, #1c150f );
	border-radius: 10px 10px 0 0;
	color: #f1e9db;
}

.dodo3db-toolbar-spacer {
	flex: 1 1 auto;
	min-width: 6px;
}

.dodo3db-btn {
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: #f1e9db;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	cursor: pointer;
	line-height: 1.4;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.1s ease;
}

.dodo3db-btn:hover:not(:disabled) {
	background: rgba( 255, 255, 255, 0.18 );
}

.dodo3db-btn:active:not(:disabled) {
	transform: scale( 0.96 );
}

.dodo3db-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.dodo3db-btn-prev,
.dodo3db-btn-next {
	font-weight: bold;
	min-width: 34px;
}

.dodo3db-pageindicator {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: #f1e9db;
	gap: 2px;
	background: rgba( 0, 0, 0, 0.25 );
	border-radius: 6px;
	padding: 2px 6px;
}

.dodo3db-page-input {
	width: 46px;
	background: transparent;
	border: none;
	color: #f1e9db;
	text-align: right;
	font-size: 13px;
	-moz-appearance: textfield;
}

.dodo3db-page-input::-webkit-outer-spin-button,
.dodo3db-page-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dodo3db-volume {
	width: 90px;
	accent-color: var( --dodo3db-accent );
	vertical-align: middle;
}

/* =========================================================
   ステージ／本体（1.5 リアル装丁版）

   構造:
   .dodo3db-perspective ─ 机（perspective を持つ）
     .dodo3db-scene     ─ 見開き2ページ幅の枠。本はこの中で横にずれる
       .dodo3db-book    ─ 本そのもの（--dodo3db-shift で左右へ）
         .dodo3db-floor-shadow  床への落ち影
         .dodo3db-block-left/right  紙束の厚み（斜めの小口）＋その下の表紙板
         .dodo3db-leaves  紙（リーフ）。JSが1枚ずつ角度を与える
           .dodo3db-cast  めくり中の紙が下のページへ落とす影
         .dodo3db-gutter  のど（綴じ目）の折れ影
   ========================================================= */

.dodo3db-book-wrap {
	--dodo3db-paper-edge-a: #f7f1e3;
	--dodo3db-paper-edge-b: #d2c6aa;
	--dodo3db-endpaper: #ede4cf;
	--dodo3db-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.07  0 0 0 0 0.02  0.33 0.33 0.33 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--dodo3db-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.1' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.03  0 0 0 0 0.01  0.4 0.4 0.4 0 -0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.dodo3db-perspective {
	position: relative;
	background:
		radial-gradient( ellipse at 50% 20%, rgba( 255, 255, 255, 0.06 ), rgba( 0, 0, 0, 0 ) 60% ),
		repeating-linear-gradient(
			100deg,
			#3a2d21 0px,
			#3a2d21 44px,
			#34281d 44px,
			#34281d 88px
		);
	padding: 34px 20px 58px;
	perspective: 3200px;
	perspective-origin: 50% 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: pan-y;
}

.dodo3db-perspective::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( ellipse at 50% 35%, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
	pointer-events: none;
}

.dodo3db-scene {
	position: relative;
	flex: 0 0 auto;
	width: min( 900px, 92vw );
	aspect-ratio: 8 / 5.2;
	transform-style: preserve-3d;
}

.is-single-mode .dodo3db-scene {
	width: calc( 2 * min( 480px, 88vw ) );
}

.dodo3db-book {
	--dodo3db-ov: 10px;      /* 表紙板がページより大きい分（チリ） */
	--dodo3db-tilt: 0deg;
	--dodo3db-mirror: 1;
	--dodo3db-shift: 0%;
	--dodo3db-tl: 0px;
	--dodo3db-tr: 0px;
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform-origin: 50% 100%;
	transform: rotateX( var( --dodo3db-tilt ) ) scaleX( var( --dodo3db-mirror ) ) translateX( var( --dodo3db-shift ) );
	transition: transform 0.95s cubic-bezier( 0.45, 0.05, 0.2, 1 );
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.dodo3db-book.is-grabbing {
	cursor: grabbing;
}

.dodo3db-book.dodo3db-no-anim,
.dodo3db-book.dodo3db-no-anim .dodo3db-block,
.dodo3db-book.dodo3db-no-anim .dodo3db-block *,
.dodo3db-book.dodo3db-no-anim .dodo3db-floor-shadow,
.dodo3db-book.dodo3db-no-anim .dodo3db-gutter {
	transition: none !important;
}

.is-rtl .dodo3db-book {
	--dodo3db-mirror: -1;
}

/* 右とじ（漫画式）：本全体を鏡像にして表紙・綴じの位置を反転させ、
   ページの中身（画像・文字）だけを内側で打ち消して正しい向きに戻す。 */
.is-rtl .dodo3db-page {
	transform: scaleX( -1 );
}

/* ---------- 床への落ち影 ---------- */

.dodo3db-floor-shadow {
	position: absolute;
	top: 3%;
	bottom: -1%;
	left: var( --dodo3db-occ-l, 0% );
	right: var( --dodo3db-occ-r, 0% );
	transform: translateZ( -36px );
	background: transparent;
	border-radius: 10px;
	box-shadow: 0 0 22px 14px rgba( 0, 0, 0, 0.32 ), -14px 26px 26px 4px rgba( 0, 0, 0, 0.45 );
	transition: left 0.95s cubic-bezier( 0.45, 0.05, 0.2, 1 ), right 0.95s cubic-bezier( 0.45, 0.05, 0.2, 1 );
	pointer-events: none;
}

/* ---------- 紙束の厚み（小口）と表紙板 ----------
   斜め投影（右下へ --t ずつ）で「上から少し覗き込んだ本」の厚みを描く。
   3D計算に頼らないので、どのブラウザでも確実に同じ見た目になる。 */

.dodo3db-block {
	--t: 0px;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease 0.05s;
}

.dodo3db-block.is-on {
	opacity: 1;
	transition: opacity 0.25s ease 0.5s;
}

.dodo3db-block-left {
	left: 0;
	--t: var( --dodo3db-tl );
}

.dodo3db-block-right {
	left: 50%;
	--t: var( --dodo3db-tr );
}

/* 表紙板：紙束の厚み(--t)ぶん「左下」へずらして置く（transformは使わない＝3D合成の順序に巻き込まれない）。
   奥行きの向きを左下にしているのは、閉じた本で「背」が見えるようにするため。 */
.dodo3db-block-board {
	position: absolute;
	top: calc( var( --t ) - var( --dodo3db-ov ) );
	bottom: calc( -1 * var( --t ) - var( --dodo3db-ov ) );
	left: calc( -1 * var( --t ) );
	right: var( --t );
	transition: top 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 ), bottom 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 ), left 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 ), right 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 );
	background: var( --dodo3db-accent );
	box-shadow:
		-1px 1px 0 var( --dodo3db-board-edge ),
		-2px 2px 0 var( --dodo3db-board-edge ),
		-3px 3px 0 var( --dodo3db-board-edge ),
		-4px 4px 0 var( --dodo3db-board-edge-2 ),
		-5px 5px 0 var( --dodo3db-board-edge-2 ),
		-6px 6px 0 var( --dodo3db-board-edge-2 ),
		-7px 9px 8px rgba( 0, 0, 0, 0.4 );
}

.dodo3db-block-left .dodo3db-block-board {
	left: calc( -1 * var( --t ) - var( --dodo3db-ov ) );
	border-radius: 6px 0 0 6px;
}

.dodo3db-block-right .dodo3db-block-board {
	right: calc( var( --t ) - var( --dodo3db-ov ) );
	border-radius: 0 6px 6px 0;
}

/* 小口（紙の断面）：clip-path で平行四辺形に切る（transformは使わない） */
.dodo3db-block-edge {
	position: absolute;
	transition: width 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 ), height 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 ), clip-path 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 ), left 0.9s cubic-bezier( 0.45, 0.05, 0.2, 1 );
}

/* 下の小口（左右共通）：上辺がページの下端、下辺が --t ぶん左へずれる */
.dodo3db-block-edge-bottom {
	top: 100%;
	left: calc( -1 * var( --t ) );
	width: calc( 100% + var( --t ) );
	height: var( --t );
	clip-path: polygon( var( --t ) 0, 100% 0, calc( 100% - var( --t ) ) 100%, 0 100% );
	background:
		linear-gradient( to right, rgba( 0, 0, 0, 0.12 ), rgba( 0, 0, 0, 0 ) 12%, rgba( 0, 0, 0, 0 ) 88%, rgba( 0, 0, 0, 0.2 ) ),
		repeating-linear-gradient( to bottom, var( --dodo3db-paper-edge-a ) 0, var( --dodo3db-paper-edge-a ) 1px, var( --dodo3db-paper-edge-b ) 1px, var( --dodo3db-paper-edge-b ) 2px );
	box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.2 );
}

/* 左の束の左側面＝小口（読み終えたページの断面） */
.dodo3db-block-left .dodo3db-block-edge-side {
	top: 0;
	right: 100%;
	width: var( --t );
	height: calc( 100% + var( --t ) );
	clip-path: polygon( 100% 0, 100% calc( 100% - var( --t ) ), 0 100%, 0 var( --t ) );
	background:
		linear-gradient( to bottom, rgba( 0, 0, 0, 0.12 ), rgba( 0, 0, 0, 0 ) 10%, rgba( 0, 0, 0, 0 ) 90%, rgba( 0, 0, 0, 0.18 ) ),
		repeating-linear-gradient( to right, var( --dodo3db-paper-edge-a ) 0, var( --dodo3db-paper-edge-a ) 1px, var( --dodo3db-paper-edge-b ) 1px, var( --dodo3db-paper-edge-b ) 2px );
	box-shadow: inset -1px 0 0 rgba( 0, 0, 0, 0.18 );
}

/* 右の束の左側面＝背（表紙と同じ素材／背表紙画像）。閉じた本で見える。開いている間は左の束の下に隠れる */
.dodo3db-block-right .dodo3db-block-edge-side {
	top: calc( -1 * var( --dodo3db-ov ) );
	right: 100%;
	width: var( --t );
	height: calc( 100% + 2 * var( --dodo3db-ov ) + var( --t ) );
	clip-path: polygon( 100% 0, 100% calc( 100% - var( --t ) ), 0 100%, 0 var( --t ) );
	background: linear-gradient( to right, rgba( 0, 0, 0, 0.4 ), rgba( 0, 0, 0, 0.1 ) 60%, rgba( 0, 0, 0, 0.35 ) ), var( --dodo3db-accent );
}

/* ---------- リーフ（紙） ---------- */

.dodo3db-leaves {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.dodo3db-leaf {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 50%;
	transform-style: preserve-3d;
	transform-origin: left center;
}

/* めくっている最中の紙だけ合成レイヤーに昇格させる（全ページを常時レイヤー化しない） */
.dodo3db-leaf.is-flipping {
	will-change: transform;
}

/* 現在位置から遠いリーフは描画対象から外す（数百ページでも軽く） */
.dodo3db-leaf.is-far {
	display: none;
}

.dodo3db-leaf-hard {
	top: calc( -1 * var( --dodo3db-ov ) );
	bottom: calc( -1 * var( --dodo3db-ov ) );
	width: calc( 50% + var( --dodo3db-ov ) );
}

/* 紙束の下に埋まった表紙板は隠す（静的な板 .dodo3db-block-board が代わりに描かれる） */
.dodo3db-leaf.is-buried {
	visibility: hidden;
}

.dodo3db-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	background: var( --dodo3db-paper );
	overflow: hidden;
}

/* 表と裏を紙の面からわずかに浮かせる。同一平面だとブラウザのクリック判定が裏面側に取られ、
   ページ内の動画・音声のボタンや文章のスクロールが操作できなくなるため */
.dodo3db-face-front {
	transform: translateZ( 0.1px );
}

.dodo3db-face-back {
	transform: rotateY( 180deg ) translateZ( 0.1px );
}

/* 紙の繊維 */
.dodo3db-face::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --dodo3db-noise );
	opacity: 0.5;
	pointer-events: none;
}

/* のど側の折れ影：ページが綴じ目へ向かって沈み込む */
.dodo3db-face::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.dodo3db-face-front::after {
	background: linear-gradient( to right, rgba( 40, 26, 10, 0.28 ) 0%, rgba( 40, 26, 10, 0.1 ) 3.5%, rgba( 40, 26, 10, 0.03 ) 8%, rgba( 40, 26, 10, 0 ) 14% );
}

.dodo3db-face-back::after {
	background: linear-gradient( to left, rgba( 40, 26, 10, 0.28 ) 0%, rgba( 40, 26, 10, 0.1 ) 3.5%, rgba( 40, 26, 10, 0.03 ) 8%, rgba( 40, 26, 10, 0 ) 14% );
}

/* 通常ページの外周：紙の端の微妙な段差 */
.dodo3db-leaf:not( .dodo3db-leaf-hard ) .dodo3db-face-front {
	box-shadow: inset -1px 0 0 rgba( 0, 0, 0, 0.06 ), inset 0 1px 0 rgba( 255, 255, 255, 0.5 );
}

.dodo3db-leaf:not( .dodo3db-leaf-hard ) .dodo3db-face-back {
	box-shadow: inset 1px 0 0 rgba( 0, 0, 0, 0.06 ), inset 0 1px 0 rgba( 255, 255, 255, 0.5 );
}

/* めくり中の明暗（JSが --dodo3db-shf / --dodo3db-shb を 0〜1 で更新） */
.dodo3db-face-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	opacity: var( --dodo3db-shf, 0 );
	background: linear-gradient( to right, rgba( 24, 14, 4, 0.3 ), rgba( 24, 14, 4, 0.7 ) );
}

.dodo3db-face-back .dodo3db-face-shade {
	opacity: var( --dodo3db-shb, 0 );
	background: linear-gradient( to left, rgba( 24, 14, 4, 0.3 ), rgba( 24, 14, 4, 0.7 ) );
}

/* 紙のカーブに光が走るハイライト（JSが位置 --dodo3db-glx と強さ --dodo3db-glf を更新） */
.dodo3db-face-gloss {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
	opacity: var( --dodo3db-glf, 0 );
	background: linear-gradient(
		to right,
		rgba( 255, 255, 255, 0 ) calc( var( --dodo3db-glx, 50% ) - 26% ),
		rgba( 255, 255, 255, 0.5 ) var( --dodo3db-glx, 50% ),
		rgba( 255, 255, 255, 0 ) calc( var( --dodo3db-glx, 50% ) + 26% )
	);
}

.dodo3db-face-back .dodo3db-face-gloss {
	opacity: var( --dodo3db-glb, 0 );
	background: linear-gradient(
		to right,
		rgba( 255, 255, 255, 0 ) calc( var( --dodo3db-glbx, 50% ) - 26% ),
		rgba( 255, 255, 255, 0.5 ) var( --dodo3db-glbx, 50% ),
		rgba( 255, 255, 255, 0 ) calc( var( --dodo3db-glbx, 50% ) + 26% )
	);
}

/* めくり中の紙が下のページへ落とす影（JSが幅・向き・濃さを更新） */
.dodo3db-cast {
	position: absolute;
	top: -2%;
	bottom: -2%;
	left: 50%;
	width: 0;
	transform: translateZ( 16.3px ); /* 一番上の紙(16px)のすぐ上 */
	opacity: 0;
	pointer-events: none;
	background: linear-gradient( to right, rgba( 0, 0, 0, 0.55 ), rgba( 0, 0, 0, 0.45 ) 55%, rgba( 0, 0, 0, 0.18 ) 80%, rgba( 0, 0, 0, 0 ) );
	-webkit-mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ), #000 4%, #000 96%, rgba( 0, 0, 0, 0 ) );
	mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ), #000 4%, #000 96%, rgba( 0, 0, 0, 0 ) );
}

.dodo3db-cast.is-left {
	background: linear-gradient( to left, rgba( 0, 0, 0, 0.55 ), rgba( 0, 0, 0, 0.45 ) 55%, rgba( 0, 0, 0, 0.18 ) 80%, rgba( 0, 0, 0, 0 ) );
}

/* のど（綴じ目）の影。開いている時だけ */
.dodo3db-gutter {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 8%;
	margin-left: -4%;
	transform: translateZ( 16.5px ); /* 一番上の紙(16px)のすぐ上 */
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
	background: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0 ) 0%,
		rgba( 0, 0, 0, 0.1 ) 30%,
		rgba( 0, 0, 0, 0.32 ) 47%,
		rgba( 0, 0, 0, 0.42 ) 50%,
		rgba( 0, 0, 0, 0.32 ) 53%,
		rgba( 0, 0, 0, 0.1 ) 70%,
		rgba( 0, 0, 0, 0 ) 100%
	);
}

.is-open .dodo3db-gutter {
	opacity: 1;
}

/* ---------- 表紙板（ハードカバー） ---------- */

.dodo3db-leaf-hard .dodo3db-face {
	background: var( --dodo3db-accent );
}

.dodo3db-leaf-hard .dodo3db-face::before {
	background-image: var( --dodo3db-grain );
	opacity: 0.9;
}

.dodo3db-leaf-hard .dodo3db-face::after {
	background: none;
}

/* 板の外周：外側の角だけ丸め、板の厚み（右下へ1pxずつ積む）を描く */
.dodo3db-book {
	--dodo3db-board-edge: rgba( 28, 16, 6, 0.82 );
	--dodo3db-board-edge-2: rgba( 28, 16, 6, 0.6 );
}

.dodo3db-leaf-hard .dodo3db-face-front {
	border-radius: 0 6px 6px 0;
	box-shadow:
		inset 0 0 0 1px rgba( 255, 255, 255, 0.08 ),
		inset -2px 0 0 rgba( 0, 0, 0, 0.18 ),
		-1px 1px 0 var( --dodo3db-board-edge ),
		-2px 2px 0 var( --dodo3db-board-edge ),
		-3px 3px 0 var( --dodo3db-board-edge ),
		-4px 4px 0 var( --dodo3db-board-edge-2 ),
		-5px 5px 0 var( --dodo3db-board-edge-2 ),
		-6px 6px 0 var( --dodo3db-board-edge-2 ),
		-7px 9px 8px rgba( 0, 0, 0, 0.4 );
}

.dodo3db-leaf-hard .dodo3db-face-back {
	border-radius: 6px 0 0 6px;
	box-shadow:
		inset 0 0 0 1px rgba( 255, 255, 255, 0.08 ),
		inset 2px 0 0 rgba( 0, 0, 0, 0.18 ),
		1px 1px 0 var( --dodo3db-board-edge ),
		2px 2px 0 var( --dodo3db-board-edge ),
		3px 3px 0 var( --dodo3db-board-edge ),
		4px 4px 0 var( --dodo3db-board-edge-2 ),
		5px 5px 0 var( --dodo3db-board-edge-2 ),
		6px 6px 0 var( --dodo3db-board-edge-2 ),
		7px 9px 8px rgba( 0, 0, 0, 0.4 );
}

/* 見返し（表紙の裏・裏表紙の裏）：画像があれば板いっぱいに貼る、無ければ無地の紙 */
.dodo3db-page-endpaper {
	padding: 0;
	background-color: var( --dodo3db-endpaper );
	background-size: cover;
	background-position: center;
}

/* 画像ありの見返しは板いっぱい（折り返しごと画像に任せる） */
.dodo3db-leaf-front-board .dodo3db-face-back .dodo3db-page-endpaper.has-image,
.dodo3db-leaf-back-board .dodo3db-face-front .dodo3db-page-endpaper.has-image {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	box-shadow: none;
}

/* 画像なしの見返しは、チリ分の折り返し（表紙素材）の内側に無地の紙 */
.dodo3db-leaf-front-board .dodo3db-face-back .dodo3db-page-endpaper:not( .has-image ),
.dodo3db-leaf-back-board .dodo3db-face-front .dodo3db-page-endpaper:not( .has-image ) {
	background-color: var( --dodo3db-endpaper );
	background-image: linear-gradient( to right, rgba( 0, 0, 0, 0.06 ), rgba( 0, 0, 0, 0 ) 12% );
}

/* 板の内側（見返し）：チリ分は表紙素材の折り返し、内側にページ（または見返し画像）を収める */
.dodo3db-leaf-front-board .dodo3db-face-back,
.dodo3db-leaf-back-board .dodo3db-face-front {
	background: var( --dodo3db-endpaper );
}

.dodo3db-leaf-front-board .dodo3db-face-back::before,
.dodo3db-leaf-back-board .dodo3db-face-front::before {
	background-image: var( --dodo3db-noise );
	opacity: 0.6;
}

.dodo3db-leaf-front-board .dodo3db-face-back .dodo3db-page {
	position: absolute;
	left: var( --dodo3db-ov );
	top: var( --dodo3db-ov );
	bottom: var( --dodo3db-ov );
	right: 0;
	width: auto;
	height: auto;
	background: var( --dodo3db-paper );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.08 );
}

.dodo3db-leaf-back-board .dodo3db-face-front .dodo3db-page {
	position: absolute;
	right: var( --dodo3db-ov );
	top: var( --dodo3db-ov );
	bottom: var( --dodo3db-ov );
	left: 0;
	width: auto;
	height: auto;
	background: var( --dodo3db-paper );
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.08 );
}

/* ---------- ページ中身 ---------- */

.dodo3db-page {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4%;
	font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", "IPAexMincho", serif;
	background: transparent;
	z-index: 1;
}

.dodo3db-page-blank {
	background: transparent;
}

.dodo3db-page img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.12 );
	-webkit-user-drag: none;
}

.dodo3db-page-pdf {
	padding: 0;
}

.dodo3db-page-pdf .dodo3db-pdf-holder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dodo3db-page-pdf img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	box-shadow: none;
}

.dodo3db-page-video video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.dodo3db-page-text {
	align-items: stretch;
	justify-content: flex-start;
	overflow-y: auto;
	cursor: auto;
}

.dodo3db-page-text-inner {
	width: 100%;
	line-height: 1.9;
	font-size: 15px;
	color: #2c2418;
	word-break: break-word;
}

.dodo3db-page-text-inner img {
	max-width: 100%;
	box-shadow: none;
}

.dodo3db-page-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	text-align: center;
	font-size: 11px;
	color: #8a7a63;
	padding: 0 8px;
}

/* ---------- レイアウトページ（複数ブロックを自由配置） ----------
   ブロックの位置・大きさはページに対する %。文字の大きさはページ幅に比例（cqw）させ、
   本の表示サイズが変わっても同じ見た目の比率を保つ。 */

.dodo3db-page-layout {
	padding: 0;
	display: block;
	container-type: size;
}

.dodo3db-lblock {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
}

.dodo3db-lblock img,
.dodo3db-lblock video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	box-shadow: none;
	background: transparent;
}

.dodo3db-lblock.has-caption img,
.dodo3db-lblock.has-caption video {
	height: calc( 100% - 1.6em );
}

.dodo3db-lblock-caption {
	font-size: 2.6cqw;
	line-height: 1.6em;
	height: 1.6em;
	text-align: center;
	color: #8a7a63;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dodo3db-lblock-text {
	display: flex;
	flex-direction: column;
	overflow: auto;
	scrollbar-width: thin;
	color: #2c2418;
	line-height: 1.75;
	padding: 1.2cqw 1.6cqw;
	cursor: auto;
}

.dodo3db-lblock-text.dodo3db-valign-middle {
	justify-content: center;
}

.dodo3db-lblock-text.dodo3db-valign-bottom {
	justify-content: flex-end;
}

.dodo3db-lblock-text-inner {
	word-break: break-word;
}

.dodo3db-lblock-text-inner > :first-child {
	margin-top: 0;
}

.dodo3db-lblock-text-inner > :last-child {
	margin-bottom: 0;
}

.dodo3db-lblock-text-inner p {
	margin: 0 0 0.8em;
}

.dodo3db-size-s { font-size: 2.6cqw; }
.dodo3db-size-m { font-size: 3.2cqw; }
.dodo3db-size-l { font-size: 4.2cqw; }
.dodo3db-size-xl { font-size: 5.6cqw; }
.dodo3db-size-xxl { font-size: 8cqw; font-weight: 700; line-height: 1.3; }

/* 縦書き：右から左へ行が進む。縦位置の指定は横方向に読み替える */
.dodo3db-lblock-text.is-vertical {
	writing-mode: vertical-rl;
	flex-direction: column;
	line-height: 1.8;
}

.dodo3db-lblock-text.is-vertical .dodo3db-lblock-text-inner {
	text-orientation: mixed;
}

/* 枠の飾り */
.dodo3db-frame-shadow {
	box-shadow: 0 0.6cqw 2.4cqw rgba( 0, 0, 0, 0.28 );
}

.dodo3db-frame-border {
	border: 1px solid rgba( 60, 45, 25, 0.45 );
}

.dodo3db-frame-photo {
	background: #fff;
	padding: 1.6cqw 1.6cqw 1.2cqw;
	box-shadow: 0 0.6cqw 2cqw rgba( 0, 0, 0, 0.3 );
}

.dodo3db-frame-round {
	border-radius: 3cqw;
}

/* 音声ブロック：小さなカード */
.dodo3db-lblock-audio {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dodo3db-audio-card {
	width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1cqw;
	padding: 1.6cqw 2cqw;
	border-radius: 2cqw;
	background: rgba( 255, 255, 255, 0.6 );
	box-sizing: border-box;
	cursor: auto;
}

.dodo3db-lblock-audio.has-bg .dodo3db-audio-card {
	background: transparent;
}

.dodo3db-audio-title {
	font-size: 3cqw;
	color: #3a2f1e;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dodo3db-audio-card audio {
	width: 100%;
	height: max( 28px, 7cqw );
}

/* 表紙の面（画像あり／なし共通）：革の質感と周辺の落ち込み */
.dodo3db-page-cover {
	padding: 0;
	background-size: cover;
	background-position: center;
	color: #fff;
}

/* 革目（表紙は2面しか無いので multiply を使っても軽い）。素材画像がある時は素材の目を重ねる */
.dodo3db-page-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --dodo3db-grain );
	opacity: 0.5;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.has-material .dodo3db-page-cover::before {
	background-image: var( --dodo3db-material );
	background-size: 420px auto;
	opacity: 0.35;
	filter: grayscale( 1 ) contrast( 1.3 );
}

/* マットな陰影：周辺の落ち込み＋板の面取り＋背側のヒンジ溝（ハードカバーの継ぎ目）。
   テカる斜めのハイライトは入れない＝ビニールっぽさを避ける */
.dodo3db-page-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	--dodo3db-hinge: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0.32 ) 0%,
		rgba( 0, 0, 0, 0.1 ) 2.2%,
		rgba( 0, 0, 0, 0 ) 3.8%,
		rgba( 0, 0, 0, 0.42 ) 4.6%,
		rgba( 0, 0, 0, 0.18 ) 5.3%,
		rgba( 255, 255, 255, 0.1 ) 6.1%,
		rgba( 0, 0, 0, 0 ) 7.4%
	);
	background:
		var( --dodo3db-hinge ),
		radial-gradient( ellipse at 50% 45%, rgba( 0, 0, 0, 0 ) 40%, rgba( 0, 0, 0, 0.28 ) 100% );
	box-shadow:
		inset 0 0 0 1px rgba( 0, 0, 0, 0.35 ),
		inset 1px 1px 0 1px rgba( 255, 255, 255, 0.14 ),
		inset -2px -2px 0 1px rgba( 0, 0, 0, 0.28 ),
		inset 0 0 46px rgba( 0, 0, 0, 0.32 );
}

/* 裏表紙（裏面）は背が右側なので溝も右側 */
.dodo3db-face-back .dodo3db-page-cover::after {
	--dodo3db-hinge: linear-gradient(
		to left,
		rgba( 0, 0, 0, 0.32 ) 0%,
		rgba( 0, 0, 0, 0.1 ) 2.2%,
		rgba( 0, 0, 0, 0 ) 3.8%,
		rgba( 0, 0, 0, 0.42 ) 4.6%,
		rgba( 0, 0, 0, 0.18 ) 5.3%,
		rgba( 255, 255, 255, 0.1 ) 6.1%,
		rgba( 0, 0, 0, 0 ) 7.4%
	);
	box-shadow:
		inset 0 0 0 1px rgba( 0, 0, 0, 0.35 ),
		inset -1px 1px 0 1px rgba( 255, 255, 255, 0.14 ),
		inset 2px -2px 0 1px rgba( 0, 0, 0, 0.28 ),
		inset 0 0 46px rgba( 0, 0, 0, 0.32 );
}

/* 表紙が画像の時は少し落ち着かせる（印刷クロス風） */
.dodo3db-page-cover[style*="background-image"]::after {
	background:
		var( --dodo3db-hinge ),
		radial-gradient( ellipse at 50% 45%, rgba( 0, 0, 0, 0 ) 55%, rgba( 0, 0, 0, 0.22 ) 100% );
}

.dodo3db-cover-fallback {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 12%;
	color: #fff8ea;
	z-index: 1;
}

/* 箔押し風の二重罫（画像なし表紙のみ） */
.dodo3db-cover-fallback::before {
	content: "";
	position: absolute;
	inset: 5%;
	border: 1px solid rgba( 232, 200, 120, 0.55 );
	outline: 1px solid rgba( 232, 200, 120, 0.25 );
	outline-offset: 3px;
	border-radius: 2px;
	pointer-events: none;
}

.dodo3db-cover-fallback-title {
	font-size: clamp( 18px, 4vw, 30px );
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #f3dfa6;
	text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.25 ), 0 -1px 0 rgba( 0, 0, 0, 0.5 ), 0 2px 8px rgba( 0, 0, 0, 0.4 );
}

.dodo3db-cover-fallback-subtitle {
	font-size: clamp( 12px, 2.4vw, 16px );
	opacity: 0.85;
	letter-spacing: 0.05em;
}

/* ---------- ページ端のナビ矢印 ---------- */

.dodo3db-edge-nav {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 64px;
	margin-top: -32px;
	border: none;
	border-radius: 8px;
	background: rgba( 0, 0, 0, 0.35 );
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.2s ease;
	z-index: 20;
	padding: 0;
}

.dodo3db-edge-nav-left {
	left: 6px;
}

.dodo3db-edge-nav-right {
	right: 6px;
}

.dodo3db-perspective:hover .dodo3db-edge-nav,
.dodo3db-edge-nav:focus-visible {
	opacity: 1;
}

.dodo3db-edge-nav:hover {
	background: rgba( 0, 0, 0, 0.6 );
}

.dodo3db-edge-nav.is-hidden {
	display: none;
}

@media ( hover: none ) {
	.dodo3db-edge-nav {
		opacity: 0.55;
	}
}

/* =========================================================
   テーマ（表紙の素材）
   ========================================================= */

/* レザー装丁（既定）：革目・厚い板・大きめのチリ */
.dodo3db-theme-leather .dodo3db-book {
	--dodo3db-ov: 10px;
}

.dodo3db-theme-leather .dodo3db-leaf-hard .dodo3db-face,
.dodo3db-theme-leather .dodo3db-block-board,
.dodo3db-theme-leather .dodo3db-block-right .dodo3db-block-edge-side {
	background-image:
		radial-gradient( ellipse at 50% 40%, rgba( 255, 255, 255, 0.05 ), rgba( 0, 0, 0, 0 ) 55%, rgba( 0, 0, 0, 0.3 ) 100% );
	background-color: var( --dodo3db-accent );
}

/* ---------- 装丁の素材画像（管理画面で指定） ----------
   板の外面（画像なし表紙）・チリ・見返し側の折り返し・裏の板・背に貼る。
   テーマカラーを下に敷いておくので、半透明PNGなら色付けもできる。 */
.dodo3db-book.has-material .dodo3db-leaf-hard .dodo3db-face,
.dodo3db-book.has-material .dodo3db-block-board,
.dodo3db-book.has-material .dodo3db-block-right .dodo3db-block-edge-side {
	background-image:
		radial-gradient( ellipse at 50% 40%, rgba( 0, 0, 0, 0 ) 50%, rgba( 0, 0, 0, 0.32 ) 100% ),
		var( --dodo3db-material );
	background-size: auto, 420px auto;
	background-color: var( --dodo3db-accent );
}

.dodo3db-book.has-material .dodo3db-leaf-hard .dodo3db-face::before,
.dodo3db-book.has-material .dodo3db-leaf-front-board .dodo3db-face-back::before,
.dodo3db-book.has-material .dodo3db-leaf-back-board .dodo3db-face-front::before {
	opacity: 0.25;
}

/* 背表紙画像：閉じた状態（裏表紙側）で見える背の面に、上下いっぱいに貼る */
.dodo3db-book.has-spine .dodo3db-block-right .dodo3db-block-edge-side {
	background-image: linear-gradient( to right, rgba( 0, 0, 0, 0.35 ), rgba( 0, 0, 0, 0 ) 55%, rgba( 0, 0, 0, 0.25 ) ), var( --dodo3db-spine );
	background-size: auto, 100% 100%;
	background-position: center;
}

/* シンプル（ソフトカバー）：薄い板・小さなチリ・明るい紙 */
.dodo3db-theme-flat .dodo3db-book {
	--dodo3db-ov: 3px;
}

.dodo3db-theme-flat .dodo3db-leaf-hard .dodo3db-face,
.dodo3db-theme-flat .dodo3db-block-board,
.dodo3db-theme-flat .dodo3db-block-right .dodo3db-block-edge-side {
	background-image: linear-gradient( 160deg, rgba( 255, 255, 255, 0.35 ), rgba( 0, 0, 0, 0.06 ) );
	background-color: #efe7d6;
}

.dodo3db-theme-flat .dodo3db-leaf-hard .dodo3db-face::before {
	opacity: 0.3;
}

.dodo3db-theme-flat .dodo3db-leaf-hard .dodo3db-face-front,
.dodo3db-theme-flat .dodo3db-leaf-hard .dodo3db-face-back {
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ), -1px 1px 0 rgba( 0, 0, 0, 0.25 ), -2px 3px 4px rgba( 0, 0, 0, 0.25 );
}

.dodo3db-theme-flat .dodo3db-block-board {
	box-shadow: -1px 1px 0 rgba( 0, 0, 0, 0.25 ), -3px 4px 6px rgba( 0, 0, 0, 0.3 );
}

.dodo3db-theme-flat .dodo3db-page-cover::before {
	opacity: 0.2;
	mix-blend-mode: normal;
}

.dodo3db-theme-flat .dodo3db-page-cover::after {
	background: none;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.12 ), inset 0 0 18px rgba( 0, 0, 0, 0.14 );
}

.dodo3db-theme-flat .dodo3db-cover-fallback-title {
	color: #3a2f1e;
	text-shadow: none;
}

.dodo3db-theme-flat .dodo3db-cover-fallback-subtitle {
	color: #6d5d44;
}

.dodo3db-theme-flat .dodo3db-cover-fallback::before {
	border-color: rgba( 0, 0, 0, 0.25 );
	outline-color: rgba( 0, 0, 0, 0.1 );
}

/* コミック風：黒い太縁・白い罫・角ばった板 */
.dodo3db-theme-comic .dodo3db-book {
	--dodo3db-ov: 7px;
}

.dodo3db-theme-comic .dodo3db-leaf-hard .dodo3db-face,
.dodo3db-theme-comic .dodo3db-block-board,
.dodo3db-theme-comic .dodo3db-block-right .dodo3db-block-edge-side {
	background-image: none;
	background-color: #17140f;
}

.dodo3db-theme-comic .dodo3db-leaf-hard .dodo3db-face::before {
	opacity: 0.4;
}

.dodo3db-theme-comic .dodo3db-leaf-hard .dodo3db-face-front,
.dodo3db-theme-comic .dodo3db-leaf-hard .dodo3db-face-back,
.dodo3db-theme-comic .dodo3db-block-board {
	border-radius: 0;
}

.dodo3db-theme-comic .dodo3db-leaf-hard .dodo3db-face-front {
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #17140f, -3px 3px 0 #000, -6px 8px 0 rgba( 0, 0, 0, 0.5 );
}

.dodo3db-theme-comic .dodo3db-leaf-hard .dodo3db-face-back {
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #17140f, 3px 3px 0 #000, 6px 8px 0 rgba( 0, 0, 0, 0.5 );
}

.dodo3db-theme-comic .dodo3db-block-board {
	box-shadow: -3px 3px 0 #000, -8px 10px 0 rgba( 0, 0, 0, 0.5 );
}

.dodo3db-theme-comic .dodo3db-page-cover::before {
	opacity: 0.25;
}

.dodo3db-theme-comic .dodo3db-cover-fallback::before {
	border-color: #fff;
	outline: none;
}

.dodo3db-theme-comic .dodo3db-cover-fallback-title {
	color: #fff;
	text-shadow: 3px 3px 0 #000;
}

/* 画像で：表紙・素材・背表紙の画像を加工せずそのまま使う（革目・溝・周辺の落ち込みを入れない） */
.dodo3db-theme-image .dodo3db-book {
	--dodo3db-ov: 8px;
}

.dodo3db-theme-image .dodo3db-leaf-hard .dodo3db-face,
.dodo3db-theme-image .dodo3db-block-board,
.dodo3db-theme-image .dodo3db-block-right .dodo3db-block-edge-side {
	background-image: none;
	background-color: var( --dodo3db-accent );
}

.dodo3db-theme-image.dodo3db-render-2d .dodo3db-book.has-material .dodo3db-leaf-hard .dodo3db-face,
.dodo3db-theme-image .dodo3db-book.has-material .dodo3db-leaf-hard .dodo3db-face,
.dodo3db-theme-image .dodo3db-book.has-material .dodo3db-block-board,
.dodo3db-theme-image .dodo3db-book.has-material .dodo3db-block-right .dodo3db-block-edge-side {
	background-image: var( --dodo3db-material );
	background-size: 420px auto;
}

.dodo3db-theme-image .dodo3db-book.has-spine .dodo3db-block-right .dodo3db-block-edge-side {
	background-image: var( --dodo3db-spine );
	background-size: 100% 100%;
	background-position: center;
}

.dodo3db-theme-image .dodo3db-leaf-hard .dodo3db-face::before,
.dodo3db-theme-image .dodo3db-page-cover::before {
	display: none;
}

.dodo3db-theme-image .dodo3db-page-cover::after {
	background: none;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.25 );
}

.dodo3db-theme-image .dodo3db-leaf-hard .dodo3db-face-front,
.dodo3db-theme-image .dodo3db-leaf-hard .dodo3db-face-back {
	border-radius: 3px;
}

/* =========================================================
   3D表示モード（設定で選択可）
   本を傾け、木目の机に置く。厚み・落ち影がより強く見える。
   ========================================================= */

.dodo3db-render-3d .dodo3db-perspective {
	background:
		radial-gradient( ellipse at 50% 15%, rgba( 255, 240, 210, 0.12 ), rgba( 0, 0, 0, 0 ) 60% ),
		repeating-linear-gradient(
			95deg,
			#a9805a 0px,
			#a9805a 46px,
			#9c7550 46px,
			#9c7550 92px
		);
	padding: 44px 24px 80px;
	perspective-origin: 50% 30%;
}

.dodo3db-render-3d .dodo3db-perspective::before {
	background: radial-gradient( ellipse at 50% 25%, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.42 ) 100% );
}

.dodo3db-render-3d .dodo3db-book {
	--dodo3db-tilt: 12deg;
}

.dodo3db-render-3d .dodo3db-floor-shadow {
	background: rgba( 0, 0, 0, 0.5 );
	box-shadow: -18px 34px 26px rgba( 0, 0, 0, 0.55 );
}

/* ---------- 全画面表示 ---------- */

.dodo3db-stage-wrap.is-fullscreen {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	border-radius: 0;
}

.dodo3db-stage-wrap.is-fullscreen .dodo3db-perspective {
	flex: 1 1 auto;
	padding: 20px;
}

.dodo3db-stage-wrap.is-fullscreen .dodo3db-scene {
	width: min( 1400px, 90vw, calc( ( 100vh - 130px ) * 8 / 5.2 ) );
}

.dodo3db-stage-wrap.is-fullscreen.is-single-mode .dodo3db-scene {
	width: calc( 2 * min( 640px, 88vw, ( 100vh - 130px ) * 0.72 ) );
}

/* ---------- 効果音のクレジット表示（CC BY 等のライセンス表示） ---------- */

.dodo3db-credit {
	font-size: 11px;
	color: #a08f75;
	text-align: right;
	padding: 4px 12px 6px;
	background: #171009;
}

/* ---------- パネル（目次・サムネイル） ---------- */

.dodo3db-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 320px, 88%);
	background: #fffdf8;
	border-left: 1px solid #e5dcc8;
	box-shadow: -6px 0 24px rgba( 0, 0, 0, 0.25 );
	overflow-y: auto;
	z-index: 500;
	padding: 0 0 16px;
}

.dodo3db-stage-wrap {
	position: relative;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	background: #171009;
}

.dodo3db-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #eee2c9;
	position: sticky;
	top: 0;
	background: #fffdf8;
}

.dodo3db-panel-head h3 {
	margin: 0;
	font-size: 15px;
	color: #4a3a22;
}

.dodo3db-panel-close {
	border: none;
	background: none;
	font-size: 16px;
	cursor: pointer;
	color: #8a7a63;
}

.dodo3db-toc-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.dodo3db-toc-list li button {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background: none;
	padding: 10px 16px;
	font-size: 14px;
	color: #3a2f1e;
	cursor: pointer;
}

.dodo3db-toc-list li button:hover {
	background: #f4ecd8;
}

.dodo3db-thumbs-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px;
	padding: 12px;
}

.dodo3db-thumb {
	border: 1px solid #e5dcc8;
	background: #fff;
	border-radius: 6px;
	padding: 4px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.dodo3db-thumb:hover {
	border-color: var( --dodo3db-accent );
}

.dodo3db-thumb-media {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: #f4ecd8;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 4px;
	font-size: 20px;
}

.dodo3db-thumb-media.dodo3db-thumb-layout {
	position: relative;
	display: block;
	background: var( --dodo3db-paper );
	font-size: 11px;
}

.dodo3db-thumb-block {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.06 );
}

.dodo3db-thumb-media .dodo3db-thumb-block img {
	width: 100%;
	height: 100%;
}

.dodo3db-thumb-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dodo3db-thumb-loading {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #d8cdb2;
	border-top-color: var( --dodo3db-accent );
	animation: dodo3db-spin 0.8s linear infinite;
}

@keyframes dodo3db-spin {
	to {
		transform: rotate( 360deg );
	}
}

.dodo3db-thumb-label {
	font-size: 11px;
	color: #8a7a63;
}

/* =========================================================
   書庫（棚）グリッド
   ========================================================= */

.dodo3db-shelf-wrap {
	max-width: 1200px;
	margin: 0 auto;
}

.dodo3db-shelf-title {
	margin-bottom: 20px;
}

.dodo3db-shelf-empty {
	text-align: center;
	color: #8a7a63;
	padding: 40px 0;
}

.dodo3db-shelf-grid {
	display: grid;
	grid-template-columns: repeat( var( --dodo3db-columns, 4 ), 1fr );
	gap: 28px 22px;
}

@media ( max-width: 900px ) {
	.dodo3db-shelf-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 600px ) {
	.dodo3db-shelf-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 20px 14px;
	}
}

.dodo3db-shelf-book {
	--dodo3db-accent: #7a4b2a;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}

.dodo3db-shelf-book:hover {
	transform: translateY( -6px );
}

.dodo3db-shelf-cover {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4.2;
	border-radius: 3px 6px 6px 3px;
	overflow: hidden;
	box-shadow:
		0 10px 20px rgba( 0, 0, 0, 0.22 ),
		inset -6px 0 10px rgba( 0, 0, 0, 0.18 );
	background: var( --dodo3db-accent );
}

.dodo3db-shelf-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dodo3db-shelf-cover-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff8ea;
	font-weight: 700;
	font-size: 14px;
	padding: 14%;
	background: linear-gradient( 160deg, rgba( 255, 255, 255, 0.12 ), rgba( 0, 0, 0, 0.3 ) );
}

.dodo3db-shelf-spine {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 8%;
	background: linear-gradient( to right, rgba( 0, 0, 0, 0.35 ), rgba( 0, 0, 0, 0 ) );
}

.dodo3db-shelf-info {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dodo3db-shelf-book-title {
	font-weight: 600;
	font-size: 14px;
	color: #2c2418;
	line-height: 1.4;
}

.dodo3db-shelf-book-subtitle {
	font-size: 12px;
	color: #8a7a63;
}

/* ---------- ジャンルごとの棚（セクション） ---------- */

.dodo3db-shelf-section {
	margin: 0 0 44px;
}

.dodo3db-shelf-section-title {
	font-size: 20px;
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 2px solid #d8cdb2;
	color: #3a2f1e;
}

.dodo3db-shelf-section-title a {
	color: inherit;
	text-decoration: none;
}

.dodo3db-shelf-section-title a:hover {
	color: var( --dodo3db-accent, #7a4b2a );
}

.dodo3db-shelf-count {
	font-size: 13px;
	font-weight: normal;
	color: #8a7a63;
	margin-left: 8px;
}

.dodo3db-shelf-section-desc {
	color: #6d5d44;
	margin: 0 0 14px;
}

/* ---------- 本棚に背表紙を並べる ----------
   1段の高さ = 本の高さ(--dodo3db-spine-row) + 棚板(--dodo3db-shelf-board)。
   本は段の下端に立ち、段ごとに棚板を繰り返しグラデーションで描く。 */

.dodo3db-shelf-spines {
	--dodo3db-spine-row: 230px;
	--dodo3db-shelf-board: 22px;
	--dodo3db-wood-a: #7a5236;
	--dodo3db-wood-b: #5c3b25;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-start;
	gap: 0 3px;
	padding: 18px 26px 0;
	border: 14px solid var( --dodo3db-wood-b );
	border-top-width: 10px;
	border-bottom-width: 0;
	border-radius: 6px 6px 0 0;
	background:
		repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent var( --dodo3db-spine-row ),
			var( --dodo3db-wood-a ) var( --dodo3db-spine-row ),
			#8a5f40 calc( var( --dodo3db-spine-row ) + 3px ),
			var( --dodo3db-wood-a ) calc( var( --dodo3db-spine-row ) + 10px ),
			var( --dodo3db-wood-b ) calc( var( --dodo3db-spine-row ) + var( --dodo3db-shelf-board ) )
		),
		linear-gradient( to bottom, rgba( 0, 0, 0, 0.35 ), rgba( 0, 0, 0, 0 ) 40px ),
		repeating-linear-gradient( 92deg, #4a3020 0 60px, #43291b 60px 120px );
	background-origin: content-box, padding-box, padding-box;
	background-clip: padding-box;
	box-shadow: 0 16px 30px rgba( 0, 0, 0, 0.25 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.25 );
}

/* 棚板の手前の縁（最後の段の下） */
.dodo3db-shelf-spines::after {
	content: "";
	flex-basis: 100%;
	height: 0;
}

.dodo3db-spine-book {
	position: relative;
	display: block;
	height: var( --dodo3db-spine-row );
	width: var( --dodo3db-spine-w, 42px );
	margin-bottom: var( --dodo3db-shelf-board );
	text-decoration: none;
	color: #fff8ea;
	flex: 0 0 auto;
}

/* 本体（背表紙）。段の下端に立つ。高さは本ごとに少し違う */
.dodo3db-spine-face {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var( --dodo3db-spine-h, 92% );
	border-radius: 3px 3px 1px 1px;
	background-color: var( --dodo3db-accent, #7a4b2a );
	background-image:
		linear-gradient( to right, rgba( 0, 0, 0, 0.35 ), rgba( 255, 255, 255, 0.08 ) 18%, rgba( 255, 255, 255, 0 ) 50%, rgba( 0, 0, 0, 0.1 ) 82%, rgba( 0, 0, 0, 0.45 ) ),
		radial-gradient( ellipse at 50% 40%, rgba( 255, 255, 255, 0.05 ), rgba( 0, 0, 0, 0.25 ) );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.18 ),
		inset 0 -2px 0 rgba( 0, 0, 0, 0.35 ),
		2px 0 3px rgba( 0, 0, 0, 0.35 ),
		0 6px 8px rgba( 0, 0, 0, 0.4 );
	transform-origin: 50% 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dodo3db-spine-book.has-material .dodo3db-spine-face {
	background-image:
		linear-gradient( to right, rgba( 0, 0, 0, 0.4 ), rgba( 0, 0, 0, 0 ) 20%, rgba( 0, 0, 0, 0 ) 80%, rgba( 0, 0, 0, 0.45 ) ),
		var( --dodo3db-material );
	background-size: auto, 260px auto;
}

.dodo3db-spine-book.has-spine-image .dodo3db-spine-face {
	background-image:
		linear-gradient( to right, rgba( 0, 0, 0, 0.3 ), rgba( 0, 0, 0, 0 ) 22%, rgba( 0, 0, 0, 0 ) 78%, rgba( 0, 0, 0, 0.35 ) ),
		var( --dodo3db-spine );
	background-size: auto, 100% 100%;
	background-position: center;
}

/* 背表紙の文字：縦書き（タイトル→サブタイトル） */
.dodo3db-spine-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	height: 90%;
	max-width: 100%;
	overflow: hidden;
	display: block;
	line-height: 1.1;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
	font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", "IPAexMincho", serif;
	letter-spacing: 0.06em;
}

/* 縦書きでは block が横に並ぶ＝右にタイトル、左にサブタイトル（本物の背表紙と同じ） */
.dodo3db-spine-title-text,
.dodo3db-spine-subtitle-text {
	display: block;
	max-height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dodo3db-spine-title-text {
	font-size: 14px;
	font-weight: 700;
}

.dodo3db-spine-subtitle-text {
	font-size: 10px;
	opacity: 0.85;
	margin-top: 8px;
}

/* 画像の上に文字を乗せる時は下地を暗く */
.dodo3db-spine-book.has-spine-image.show-title .dodo3db-spine-face::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.32 );
}

.dodo3db-spine-book.has-spine-image.show-title .dodo3db-spine-text {
	position: relative;
}

.dodo3db-spine-theme-comic .dodo3db-spine-face {
	border-radius: 0;
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #17140f, 2px 0 3px rgba( 0, 0, 0, 0.35 ), 0 6px 8px rgba( 0, 0, 0, 0.4 );
}

.dodo3db-spine-theme-flat .dodo3db-spine-face {
	border-radius: 1px;
	background-image: linear-gradient( to right, rgba( 0, 0, 0, 0.2 ), rgba( 255, 255, 255, 0.1 ) 30%, rgba( 0, 0, 0, 0.15 ) );
}

/* ホバー：本を少し引き出し、表紙をポップ表示 */
.dodo3db-spine-book:hover .dodo3db-spine-face,
.dodo3db-spine-book:focus-visible .dodo3db-spine-face {
	transform: translateY( -14px ) rotate( -2deg );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.18 ),
		inset 0 -2px 0 rgba( 0, 0, 0, 0.35 ),
		4px 0 6px rgba( 0, 0, 0, 0.4 ),
		0 18px 18px rgba( 0, 0, 0, 0.45 );
}

.dodo3db-spine-pop {
	position: absolute;
	left: 50%;
	bottom: calc( 100% - 10px );
	width: 132px;
	transform: translate( -50%, 10px ) scale( 0.92 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 30;
	background: #fffdf8;
	border-radius: 6px;
	padding: 6px 6px 8px;
	box-shadow: 0 14px 30px rgba( 0, 0, 0, 0.45 );
	text-align: center;
}

.dodo3db-spine-pop img {
	display: block;
	width: 100%;
	aspect-ratio: 10 / 13;
	object-fit: cover;
	border-radius: 3px;
}

.dodo3db-spine-pop-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 10 / 13;
	background: var( --dodo3db-accent, #7a4b2a );
	color: #fff8ea;
	font-size: 12px;
	padding: 10px;
	border-radius: 3px;
}

.dodo3db-spine-pop-title {
	display: block;
	font-size: 12px;
	color: #2c2418;
	margin-top: 6px;
	line-height: 1.3;
}

.dodo3db-spine-book:hover .dodo3db-spine-pop,
.dodo3db-spine-book:focus-visible .dodo3db-spine-pop {
	opacity: 1;
	transform: translate( -50%, 0 ) scale( 1 );
}

@media ( max-width: 600px ) {
	.dodo3db-shelf-spines {
		--dodo3db-spine-row: 170px;
		--dodo3db-shelf-board: 16px;
		padding: 12px 12px 0;
		border-width: 8px;
		border-bottom-width: 0;
	}

	.dodo3db-spine-book {
		width: calc( var( --dodo3db-spine-w, 42px ) * 0.8 );
	}

	.dodo3db-spine-title-text {
		font-size: 12px;
	}

	.dodo3db-spine-pop {
		display: none;
	}
}

/* ---------- 未公開の本（非公開・下書き等）の表示 ---------- */

.dodo3db-status-badge {
	position: absolute;
	left: 50%;
	top: 8px;
	transform: translateX( -50% );
	z-index: 5;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba( 30, 22, 12, 0.85 );
	color: #fff4dc;
	font-size: 11px;
	line-height: 1.6;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.3 );
}

.dodo3db-status-badge.is-locked {
	background: rgba( 70, 70, 70, 0.9 );
}

.dodo3db-shelf-book.is-unpublished:not( .is-locked ) .dodo3db-shelf-cover {
	outline: 2px dashed rgba( 160, 120, 60, 0.7 );
	outline-offset: 3px;
}

.dodo3db-shelf-book.is-locked {
	cursor: default;
}

.dodo3db-shelf-book.is-locked:hover {
	transform: none;
}

.dodo3db-shelf-book.is-locked .dodo3db-shelf-cover img,
.dodo3db-shelf-book.is-locked .dodo3db-shelf-cover-fallback {
	filter: grayscale( 0.9 ) blur( 3px ) brightness( 0.7 );
}

/* 背表紙の上のバッジは縦長の背に合わせて上端へ小さく */
.dodo3db-spine-book .dodo3db-status-badge {
	top: auto;
	bottom: calc( var( --dodo3db-spine-h, 92% ) - 6px );
	font-size: 10px;
	padding: 1px 6px;
}

.dodo3db-spine-book.is-unpublished:not( .is-locked ) .dodo3db-spine-face {
	outline: 2px dashed rgba( 230, 190, 110, 0.8 );
	outline-offset: -3px;
}

.dodo3db-spine-book.is-locked {
	cursor: default;
}

.dodo3db-spine-book.is-locked .dodo3db-spine-face {
	filter: grayscale( 0.8 ) brightness( 0.75 );
}

.dodo3db-spine-book.is-locked:hover .dodo3db-spine-face {
	transform: none;
}

/* 管理画面プレビューで「この本」を強調 */
.is-preview-current .dodo3db-shelf-cover,
.is-preview-current .dodo3db-spine-face {
	box-shadow: 0 0 0 3px #3fb5ff, 0 0 18px rgba( 63, 181, 255, 0.7 ) !important;
}

/* ---------- 単体ページ表示（single-dodo-book.php用） ---------- */

.dodo3db-single-container {
	max-width: 1040px;
	margin: 0 auto;
	padding: 20px 16px 60px;
}

.dodo3db-breadcrumb {
	font-size: 13px;
	color: #8a7a63;
	margin-bottom: 14px;
}

.dodo3db-breadcrumb a {
	color: var( --dodo3db-accent, #7a4b2a );
	text-decoration: none;
}

.dodo3db-single-header {
	text-align: center;
	margin-bottom: 20px;
}

.dodo3db-single-title {
	margin: 0 0 6px;
}

.dodo3db-single-subtitle {
	color: #8a7a63;
	margin: 0;
}

.dodo3db-single-description,
.dodo3db-single-genres {
	max-width: 760px;
	margin: 26px auto 0;
	color: #3a2f1e;
	line-height: 1.9;
}

.dodo3db-archive-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 16px 60px;
}

.dodo3db-archive-header {
	text-align: center;
	margin-bottom: 30px;
}

.dodo3db-archive-desc {
	color: #8a7a63;
}

/* ---------- レスポンシブ微調整 ---------- */

@media ( max-width: 560px ) {
	.dodo3db-toolbar {
		gap: 6px;
	}

	.dodo3db-btn {
		padding: 6px 8px;
		font-size: 12px;
	}

	.dodo3db-volume {
		width: 60px;
	}

	.dodo3db-perspective {
		padding: 20px 8px 30px;
	}
}

/* ============================================================
 * この本について・収録内容・書庫へ戻る（2.1.0）
 * ============================================================ */
.dodo3db-single-subtitle { margin: 0 0 1em; color: #6b7280; font-size: 15px; }
.dodo3db-about { margin: 2em 0 0; padding: 1.4em 1.6em; border-radius: 14px; background: rgba(86, 139, 255, .06); border: 1px solid rgba(86, 139, 255, .14); }
.dodo3db-about + .dodo3db-about { margin-top: 1.2em; }
.dodo3db-about .dodo3db-about__title { margin: 0 0 .7em !important; padding: 0 !important; font-size: 19px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.dodo3db-about .dodo3db-about__title::before, .dodo3db-about .dodo3db-about__title::after { display: none !important; }
.dodo3db-about__body > :last-child { margin-bottom: 0; }
.dodo3db-about__body p { line-height: 1.9; }
.dodo3db-about__list { margin: 0; padding-left: 1.4em; }
.dodo3db-about__list li { margin: .25em 0; }
.dodo3db-single-genres { margin: 1.4em 0 0; font-size: 14px; }
.dodo3db-back-to-shelf { margin: 1.6em 0 0; text-align: center; }
.dodo3db-back-to-shelf__link { display: inline-block; padding: .75em 1.8em; border-radius: 999px; border: 2px solid currentColor; font-weight: 700; text-decoration: none !important; }
.dodo3db-back-to-shelf__link:hover { opacity: .8; }
.dodo3db-noscript-pages img { display: block; max-width: 100%; height: auto; margin: 0 auto 12px; }
html.land-dark .dodo3db-about { background: rgba(86, 139, 255, .1); border-color: rgba(143, 177, 255, .2); }