@charset "UTF-8";

/* ==========================================================================
   掃書 — 沿用「真的書店」官網設計系統
   色票、字體、圓角、動效等規則出自 truly-bookstore/DESIGN_GUIDE.md。
   官網用 Tailwind CDN 產生 utility class；這裡是手寫 CSS，因為這是一支只有
   相機畫面的單頁 app，DESIGN_GUIDE 自己記錄過 Tailwind CDN 在樣式生效前造成
   版面塌陷的坑，掃描畫面更禁不起。所有數值直接對應官網 token。
   ========================================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* 官網 tailwind.config 的 5 個自訂色（js/script.js） */
	--primary: #4A403A;
	--secondary: #6B5E55;
	--accent: #8C7B6C;
	--light: #F9F7F2;
	--deco: #D4C5B0;

	/* 背景色階，由淺到深（DESIGN_GUIDE 1.2） */
	--bg-base: #F9F7F2;
	--bg-tint: #F2EFE9;
	--bg-surface: #FFFFFF;
	--bg-deep: #3E3530;

	/* 分隔線／卡片邊框，全站統一（DESIGN_GUIDE 1.3） */
	--border: #E5E0D8;

	--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);
	--shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.08);
	--shadow-modal: 0 25px 50px -12px rgba(74, 64, 58, 0.35);

	--tap-target-min: 48px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
}

body {
	font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background-color: var(--bg-base);
	color: var(--primary);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* 標題一律 Noto Serif TC（DESIGN_GUIDE 3.1） */
h1, h2, h3 {
	font-family: 'Noto Serif TC', serif;
	font-weight: 700;
	color: var(--primary);
	letter-spacing: 0.025em;
}

::selection {
	background-color: var(--deco);
	color: white;
}

/* JS 用來開關結果卡與「開啟相機」按鈕。寫在真實樣式表裡，第一次繪製前就生效。 */
.hidden {
	display: none !important;
}

#app {
	max-width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   Header
   ========================================================================== */
.app-header {
	background: var(--bg-base);
	border-bottom: 1px solid var(--border);
	padding: 12px var(--spacing-md);
	display: flex;
	justify-content: center;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 100;
}

.app-header .brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.app-header .brand:hover {
	opacity: 0.75;
}

.app-header .brand img {
	height: 36px;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
}

.app-header h1 {
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* Eyebrow 小標：英文全大寫 + tracking-[0.25em] + accent 色（DESIGN_GUIDE 3.2） */
.eyebrow {
	display: block;
	color: var(--accent);
	font-size: 0.7rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 6px;
	line-height: 1.4;
}

/* ==========================================================================
   Buttons — 一律 rounded-full（DESIGN_GUIDE 3.3）
   ========================================================================== */
.btn {
	border: 1px solid transparent;
	border-radius: 9999px;
	padding: 12px 24px;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	min-height: var(--tap-target-min);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.btn-primary {
	background: var(--primary);
	color: #fff;
	box-shadow: 0 10px 15px -3px rgba(74, 64, 58, 0.15);
}

.btn-primary:hover,
.btn-primary:active {
	background: var(--accent);
	color: #fff;
}

.btn-secondary {
	background: var(--bg-surface);
	color: var(--primary);
	border-color: var(--border);
}

.btn-secondary:hover,
.btn-secondary:active {
	border-color: var(--primary);
	background: var(--bg-tint);
}

.btn-large {
	width: 100%;
	padding: 16px 24px;
	font-size: 1rem;
}

/* ==========================================================================
   Scanner — 這支 app 的唯一畫面，相機是主角
   ========================================================================== */
main {
	flex: 1;
	padding: var(--spacing-lg) var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scanner-intro {
	text-align: center;
	margin-bottom: 4px;
}

.scanner-intro h2 {
	font-size: 1.4rem;
}

#scanner-container {
	border-radius: 2px;
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card-hover);
	/* 相機還沒起來前先鋪深色底，避免閃一塊白 */
	background: var(--bg-deep);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#reader {
	width: 100%;
	border: none;
}

.scanner-status {
	padding: 12px var(--spacing-md);
	background: var(--bg-tint);
	border: 1px solid var(--border);
	border-radius: 2px;
	text-align: center;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	color: var(--secondary);
}

/* 最後掃到的一本：官網 3.4 的「左框強調卡」 */
.scan-result {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-left: 4px solid rgba(212, 197, 176, 0.5);
	border-radius: 2px;
	padding: var(--spacing-md);
	box-shadow: var(--shadow-card);
	text-align: center;
}

.scan-result .eyebrow {
	font-size: 0.6rem;
}

.scan-result-code {
	font-family: 'Noto Serif TC', serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
	word-break: break-all;
}

/* ==========================================================================
   Modal — 全站同一套殼（DESIGN_GUIDE 2.8 / 3.9）：
   bg-black/80 backdrop-blur-md 遮罩 + bg-light rounded-sm shadow-2xl 卡片 +
   scale-95→scale-100 開合，遮罩與卡片一律 duration-300。
   ========================================================================== */
.modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
}

.modal.active {
	display: flex;
	animation: modalFadeIn 0.3s ease forwards;
}

@keyframes modalFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal-content {
	background: var(--light);
	border-radius: 2px;
	padding: 32px var(--spacing-lg);
	max-width: 420px;
	width: 100%;
	box-shadow: var(--shadow-modal);
	animation: modalScaleIn 0.3s ease forwards;
}

@keyframes modalScaleIn {
	from { transform: scale(0.95); }
	to { transform: scale(1); }
}

.modal-content .eyebrow {
	text-align: center;
}

.modal-content h3 {
	font-size: 1.3rem;
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

.input-text {
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--primary);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.input-text::placeholder {
	color: var(--accent);
	opacity: 0.7;
}

.input-text:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(140, 123, 108, 0.12);
}

.modal-actions {
	display: flex;
	gap: 10px;
	margin-top: var(--spacing-lg);
}

.modal-actions .btn {
	flex: 1;
	padding: 12px;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   Toast / Footer
   ========================================================================== */
.toast {
	position: fixed;
	bottom: var(--spacing-lg);
	left: 50%;
	transform: translateX(-50%) translateY(120px);
	background: var(--primary);
	color: var(--light);
	padding: 13px 26px;
	border-radius: 9999px;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	box-shadow: var(--shadow-modal);
	z-index: 3000;
	transition: transform 0.3s ease;
	max-width: calc(100% - 32px);
	text-align: center;
}

.toast.active {
	transform: translateX(-50%) translateY(0);
}

.app-footer {
	background: var(--bg-deep);
	color: var(--accent);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding: 24px var(--spacing-md);
	text-align: center;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.app-footer a {
	color: var(--deco);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 197, 176, 0.3);
	padding-bottom: 1px;
	transition: all 0.3s ease;
}

.app-footer a:hover {
	color: var(--light);
	border-color: var(--light);
}

/* ==========================================================================
   Responsive — 只用 sm/md/lg 三個斷點（DESIGN_GUIDE 3.7）
   桌機下內容寬度 560px，1440px 螢幕單邊留白 30%，遠高於 2.2 節的 ≥15% 下限。
   ========================================================================== */
@media (min-width: 768px) {
	#app {
		max-width: 560px;
		margin: 0 auto;
		border-left: 1px solid var(--border);
		border-right: 1px solid var(--border);
	}

	.app-header {
		padding: var(--spacing-md) var(--spacing-lg);
	}

	.app-header .brand img {
		height: 42px;
	}

	.app-header h1 {
		font-size: 1.25rem;
	}

	main {
		padding: 32px var(--spacing-lg);
	}

	.scanner-intro h2 {
		font-size: 1.6rem;
	}
}

/* 極小螢幕微調，比照官網 css/style.css 的 375px 斷點 */
@media (max-width: 375px) {
	main {
		padding: var(--spacing-md) 14px;
	}

	.app-header h1 {
		font-size: 1rem;
	}

	.btn {
		letter-spacing: 0.06em;
	}
}

/* 使用者若在系統設定關閉動畫效果就不要播（無障礙，比照官網做法） */
@media (prefers-reduced-motion: reduce) {
	.modal.active,
	.modal-content {
		animation: none;
	}
}

.btn {
	-webkit-user-select: none;
	user-select: none;
}