/* Seen PDF Flipbook — 前台樣式 */

.spf-wrap {
	--spf-bg: #1b1b1f;
	--spf-page-bg: #ffffff;
	--spf-radius: 4px;
	--spf-accent: #c8a15a;
	--spf-duration: 700ms;
	--spf-ui: rgba(255, 255, 255, 0.88);
	position: relative;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--spf-ui);
	-webkit-tap-highlight-color: transparent;
}

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

/* ---------- 舞台 ---------- */

.spf-stage {
	position: relative;
	width: 100%;
	min-height: 240px;
	height: 640px;
	background: var(--spf-bg);
	border-radius: 10px;
	overflow: hidden;
	touch-action: pan-y;
}

.spf-viewport {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	perspective: 2600px;
	perspective-origin: 50% 50%;
}

.spf-book {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
	transform-origin: 50% 50%;
}

/* 只有換頁（封面↔跨頁的縮放切換）才需要過場。
   縮放與拖曳必須即時，否則高解析分塊會在動畫途中算錯位置。 */
.spf-wrap.is-shifting .spf-book {
	transition: transform var(--spf-duration) cubic-bezier(0.42, 0, 0.28, 1);
}

.spf-wrap.is-dragging .spf-book,
.spf-wrap.is-instant .spf-book {
	transition: none !important;
}

.spf-pages {
	position: relative;
	transform-style: preserve-3d;
	transition: transform var(--spf-duration) cubic-bezier(0.42, 0, 0.28, 1);
}

.spf-wrap.is-instant .spf-pages,
.spf-wrap.is-instant .spf-sheet {
	transition: none !important;
}

/* 書本陰影（落在檯面上） */
.spf-wrap.has-shadow .spf-pages::after {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: -14px;
	height: 26px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 70%);
	filter: blur(2px);
	pointer-events: none;
	z-index: 0;
}

/* ---------- 書頁 ---------- */

.spf-sheet {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform var(--spf-duration) cubic-bezier(0.42, 0, 0.28, 1);
	/* 刻意不放 will-change：一本 100 頁的書會變成 100 個永久合成圖層，
	   iOS Safari 的 GPU 記憶體會直接爆掉。只有正在翻的那張才提升。 */
}

.spf-sheet.is-turning {
	will-change: transform;
}

/* 離目前檢視太遠的書頁不參與合成，手機才撐得住長篇 PDF */
.spf-sheet.is-far {
	visibility: hidden;
}

.spf-sheet.is-flipped {
	transform: rotateY(-180deg);
}

.spf-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--spf-page-bg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
}

.spf-face canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 圖片模式：整頁就是一張圖，縮放由瀏覽器處理 */
.spf-pageimg {
	display: block;
	width: 100%;
	height: 100%;
	/* contain 而非 fill：萬一某幾頁尺寸不同，寧可留邊也不要把頁面拉變形 */
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.spf-face.is-loaded .spf-pageimg { opacity: 1; }
.spf-wrap.is-images .spf-thumb-frame img { display: block; width: 100%; height: auto; }

/* 放大時疊在底圖上的高解析分塊：只涵蓋看得到的那一塊 */
.spf-face canvas.spf-tile {
	position: absolute;
	z-index: 1;
	object-fit: fill;
}

.spf-face-front {
	border-radius: 0 var(--spf-radius) var(--spf-radius) 0;
}

.spf-face-back {
	transform: rotateY(180deg);
	border-radius: var(--spf-radius) 0 0 var(--spf-radius);
}

.spf-face-blank {
	background: var(--spf-page-bg);
}

/* 書脊漸層：靠近中縫壓一點陰影，看起來像裝訂 */
.spf-wrap.has-spine .spf-face::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	pointer-events: none;
	z-index: 2;
}

.spf-wrap.has-spine .spf-face-front::before {
	left: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
}

.spf-wrap.has-spine .spf-face-back::before {
	right: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
}

/* 翻頁時的動態受光 */
.spf-face::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0);
	transition: background var(--spf-duration) ease;
	z-index: 3;
}

.spf-sheet.is-turning .spf-face::after {
	background: rgba(0, 0, 0, 0.14);
}

.spf-page-skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.03) 30%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.03) 70%);
	background-size: 240% 100%;
	animation: spf-shimmer 1.4s linear infinite;
}

@keyframes spf-shimmer {
	from { background-position: 120% 0; }
	to   { background-position: -120% 0; }
}

/* ---------- 大箭頭 ---------- */

.spf-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.32);
	color: #fff;
	border-radius: 6px;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.2s ease;
	z-index: 6;
}

.spf-nav svg { width: 24px; height: 24px; }
.spf-prev { left: 10px; }
.spf-next { right: 10px; }

.spf-stage:hover .spf-nav,
.spf-nav:focus-visible { opacity: 1; }
.spf-nav:hover { background: var(--spf-accent); }
.spf-nav[disabled] { opacity: 0 !important; pointer-events: none; }

@media (hover: none) {
	.spf-nav { opacity: 0.75; }
}

/* ---------- 載入中 ---------- */

.spf-loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	justify-content: center;
	background: var(--spf-bg);
	z-index: 10;
	font-size: 14px;
	letter-spacing: 0.04em;
	transition: opacity 0.35s ease;
}

.spf-loader.is-hidden { opacity: 0; pointer-events: none; }

.spf-spinner {
	width: 28px;
	height: 28px;
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-top-color: var(--spf-accent);
	border-radius: 50%;
	animation: spf-spin 0.8s linear infinite;
}

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

.spf-loader.is-error .spf-spinner { display: none; }

.spf-loader.is-error .spf-loader-text {
	max-width: 30ch;
	text-align: center;
	line-height: 1.6;
}

.spf-fallback {
	display: inline-block;
	margin-top: 4px;
	padding: 8px 18px;
	border-radius: 6px;
	background: var(--spf-accent);
	color: #fff !important;
	font-size: 13px;
	text-decoration: none;
}

.spf-fallback:hover { opacity: 0.88; }

/* ---------- 工具列 ---------- */

.spf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding: 6px 8px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	/* 不換行：折行會讓按鈕擠成好幾排，在窄螢幕上看起來像壞掉 */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.spf-toolbar::-webkit-scrollbar { display: none; }

/* 滿版時工具列固定貼在底部、佔滿寬度。
   之前用 left:50% + translateX(-50%) 而沒有給寬度，絕對定位讓它縮成一小塊，
   按鈕就折成好幾行擠在畫面中間 —— 看起來像壞掉。 */
.spf-wrap.is-fullscreen .spf-toolbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	border-radius: 0;
	flex-wrap: nowrap;
	background: rgba(20, 20, 24, 0.9);
	backdrop-filter: blur(8px);
	padding-bottom: calc(6px + env(safe-area-inset-bottom));
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
	z-index: 20;
}

.spf-toolbar-group {
	display: flex;
	align-items: center;
	gap: 4px;
}

.spf-toolbar-center { flex: 1; justify-content: center; }
.spf-toolbar-left,
.spf-toolbar-right { flex: 0 0 auto; }

.spf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: currentColor;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.spf-toolbar .spf-btn { color: #4a4a52; }
.spf-wrap.is-fullscreen .spf-toolbar .spf-btn,
.spf-wrap.is-fullscreen .spf-zoom-level,
.spf-wrap.is-fullscreen .spf-page-total { color: rgba(255, 255, 255, 0.9); }

.spf-btn svg { width: 19px; height: 19px; }
.spf-btn:hover { background: var(--spf-accent); color: #fff; }
.spf-btn[disabled] { opacity: 0.3; pointer-events: none; }
.spf-btn.is-active { background: var(--spf-accent); color: #fff; }

.spf-pager {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 6px;
	font-size: 13px;
	color: #4a4a52;
}

.spf-page-input {
	width: 46px;
	height: 30px;
	padding: 0 4px;
	text-align: center;
	font-size: 13px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 5px;
	background: #fff;
	color: #2a2a30;
}

.spf-page-input:focus {
	outline: none;
	border-color: var(--spf-accent);
	box-shadow: 0 0 0 2px rgba(200, 161, 90, 0.25);
}

.spf-page-total { font-size: 13px; opacity: 0.7; white-space: nowrap; }
.spf-zoom-level { font-size: 12px; min-width: 42px; text-align: center; color: #4a4a52; }

/* ---------- 縮圖列 ---------- */

.spf-thumbs {
	margin-top: 10px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	overflow-x: auto;
	overflow-y: hidden;
}

.spf-wrap.is-fullscreen .spf-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 70px;
	margin: 0;
	background: rgba(20, 20, 24, 0.9);
	border-radius: 0;
	z-index: 19;
}

.spf-thumbs-inner {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	min-height: 96px;
}

.spf-thumb {
	flex: 0 0 auto;
	width: 62px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	text-align: center;
	color: inherit;
}

.spf-thumb-frame {
	position: relative;
	width: 100%;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.spf-thumb canvas { display: block; width: 100%; height: auto; }
.spf-thumb:hover .spf-thumb-frame { transform: translateY(-2px); }
.spf-thumb.is-current .spf-thumb-frame { border-color: var(--spf-accent); }

.spf-thumb-label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #6a6a72;
}

.spf-wrap.is-fullscreen .spf-thumb-label { color: rgba(255, 255, 255, 0.72); }

/* ---------- 全螢幕 ---------- */

.spf-wrap:fullscreen,
.spf-wrap:-webkit-full-screen {
	max-width: none !important;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	background: var(--spf-bg);
}

.spf-wrap.is-fullscreen .spf-stage {
	height: 100vh !important;
	border-radius: 0;
}

/* 瀏覽器不支援 Fullscreen API 時的替代方案（例如部分 iOS Safari） */
.spf-wrap.is-faux-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 999999;
	width: 100vw;
	height: 100vh;
	max-width: none !important;
	margin: 0;
	background: var(--spf-bg);
}

/* ---------- 極簡模式：只有書，沒有任何介面元件 ---------- */

.spf-wrap.is-minimal .spf-toolbar,
.spf-wrap.is-minimal .spf-thumbs,
.spf-wrap.is-minimal .spf-nav {
	display: none !important;
}

.spf-wrap.is-minimal .spf-stage {
	cursor: pointer;
}

.spf-wrap.is-minimal.is-fill {
	height: 100vh;
	height: 100dvh;
}

.spf-wrap.is-minimal.is-fill .spf-stage {
	height: 100% !important;
}

/* 第一次進來的一次性提示，幾秒後自己淡掉，不留任何常駐圖示 */
.spf-hint {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, 0.92);
	font-size: 13px;
	letter-spacing: 0.03em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	z-index: 8;
	transition: opacity 0.5s ease;
}

.spf-hint.is-on { opacity: 1; }

/* ---------- 全版模式（無頁首頁尾的獨立頁面） ---------- */

body.spf-standalone {
	margin: 0;
	padding: 0;
	background: #1b1b1f;
	overflow: hidden;
	overscroll-behavior: none;
}

/* 主題可能仍輸出頁首頁尾，全版模式一律收起來 */
body.spf-standalone > header,
body.spf-standalone > footer,
body.spf-standalone .site-header,
body.spf-standalone .site-footer,
body.spf-standalone .wp-site-blocks > header,
body.spf-standalone .wp-site-blocks > footer {
	display: none !important;
}

.spf-wrap.is-fill {
	max-width: none !important;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--spf-bg);
}

.spf-wrap.is-fill .spf-stage {
	flex: 1 1 auto;
	height: auto !important;
	min-height: 0;
	border-radius: 0;
}

.spf-wrap.is-fill .spf-toolbar {
	flex: 0 0 auto;
	margin: 0;
	border-radius: 0;
	background: rgba(20, 20, 24, 0.92);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-bottom: calc(6px + env(safe-area-inset-bottom));
}

.spf-wrap.is-fill .spf-toolbar .spf-btn,
.spf-wrap.is-fill .spf-zoom-level,
.spf-wrap.is-fill .spf-pager,
.spf-wrap.is-fill .spf-page-total {
	color: rgba(255, 255, 255, 0.88);
}

.spf-wrap.is-fill .spf-thumbs {
	flex: 0 0 auto;
	margin: 0;
	border-radius: 0;
	background: rgba(20, 20, 24, 0.96);
}

.spf-wrap.is-fill .spf-thumb-label { color: rgba(255, 255, 255, 0.7); }

/* ---------- 單頁模式（手機） ---------- */

/* 只看得到一半，中縫的裝訂陰影改成只壓在朝內的那一側 */
.spf-wrap.is-single .spf-pages::after { display: none; }

.spf-wrap.is-single .spf-face-front { border-radius: 0 var(--spf-radius) var(--spf-radius) 0; }
.spf-wrap.is-single .spf-face-back { border-radius: var(--spf-radius) 0 0 var(--spf-radius); }

/* 管理員專屬的版本徽章，5 秒後自動消失 */
.spf-verbadge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62);
	color: rgba(255, 255, 255, 0.92);
	font-size: 11px;
	letter-spacing: 0.03em;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 90;
}

.spf-verbadge.is-on { opacity: 1; }

/* ---------- 診斷面板（?spfdebug=1） ---------- */

.spf-debug {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	max-width: 340px;
	padding: 12px 14px;
	background: rgba(10, 10, 14, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	color: #e8e8ec;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	line-height: 1.7;
	z-index: 100;
	cursor: pointer;
}

.spf-debug.is-small { max-width: 150px; opacity: 0.4; }
.spf-debug.is-small .spf-debug-row { display: none; }

.spf-debug-title {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.spf-debug-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.spf-debug-row span:first-child { color: rgba(255, 255, 255, 0.55); }
.spf-debug-row span:last-child { text-align: right; }

/* 長文件時，看不見的書頁不要跑骨架動畫 */
.spf-sheet.is-far .spf-page-skeleton { animation: none; }

/* ---------- 編輯者提示 ---------- */

.spf-notice {
	padding: 14px 16px;
	border-left: 4px solid #d63638;
	background: #fdf1f1;
	color: #7a1f20;
	font-size: 14px;
	border-radius: 4px;
}

@media (max-width: 600px) {
	.spf-toolbar { padding: 4px; gap: 4px; }
	.spf-btn { width: 30px; height: 30px; }
	.spf-btn svg { width: 17px; height: 17px; }
	.spf-zoom-level { display: none; }
	.spf-nav { width: 34px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
	.spf-sheet,
	.spf-pages { transition-duration: 1ms !important; }
	.spf-spinner { animation-duration: 2s; }
}