@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════════════
   PlayPlus 作品集內頁專用樣式 (Portfolio Detail Page Styles)
   檔案路徑：css/portfolio-detail.css
   說明：作品案例詳細頁專用樣式，包含 Hero 專案總覽、痛點挑戰、
         解決問題決策分析、核心亮點卡片、黑白線稿展示區與圖片燈箱。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero 專案頂部區塊 ── */
.pf-detail-hero {
	position: relative;
	padding: var(--space-xl) 0 var(--space-5xl);
	overflow: hidden;
}

/* 滿版大圖押在 background */
.pf-detail-hero-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.pf-detail-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
	mix-blend-mode: multiply;
	opacity: 0.9;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 30%, #000 60%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 30%, #000 60%);
}

.pf-detail-hero .container {
	position: relative;
	z-index: 1;
}

.pf-detail-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 580px) 1fr;
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
	min-height: 480px;
}

.pf-detail-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.pf-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-md);
}

/* 套用跟作品集卡片縮圖標籤（.portfolio-tag-item）同一套樣式：
   深色玻璃感底、白色文字、全圓角，統一全站標籤視覺語彙 */
.pf-detail-tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 var(--space-sm);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1; /* 字體預設行高的上下留白不對稱，導致文字在膠囊內偏上，
	                    收緊行高讓 flex align-items:center 能真正置中 */
	letter-spacing: 0.02em;
	color: var(--swatch-white);
	background: rgba(21, 22, 26, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.pf-detail-title {
	font-family: var(--font-sans);
	font-size: round(nearest, clamp(2.25rem, 4.2vw, 3.6rem), 2px);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	line-height: 1.22;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-sm) 0;
}

.pf-detail-subtitle {
	font-size: round(nearest, clamp(1.15rem, 1.45vw, 1.4rem), 2px);
	font-weight: 500;
	color: var(--swatch-slate-dark);
	line-height: 1.5;
	margin: 0 0 var(--space-md) 0;
}

.pf-detail-desc {
	font-size: round(nearest, clamp(0.95rem, 1.1vw, 1.05rem), 2px);
	color: var(--text-secondary);
	line-height: 1.85;
	margin: 0 0 var(--space-xl) 0;
}

/* 保密警示條 */

.pf-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

/* 視覺展示框 */

/* 浮動標籤（裝飾） */
.pf-floating-pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-xs) var(--space-md);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--radius-full);
	box-shadow: 0 12px 28px -4px rgba(21, 22, 26, 0.12);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--swatch-slate-dark);
	z-index: 2;
	animation: pf-float 6s ease-in-out infinite;
}

.pf-floating-pill.confidential-pill {
	position: absolute;
	right: 40px;
	bottom: 30px;
	top: auto;
	left: auto;
	background: rgba(255, 255, 255, 0.85);
	border: 1px dashed var(--swatch-cloud-light);
	box-shadow: 0 10px 25px -4px rgba(21, 22, 26, 0.08);
	color: var(--text-muted);
	font-weight: 500;
	z-index: 3;
	pointer-events: auto;
}

.pf-floating-pill.confidential-pill svg {
	width: 15px;
	height: 15px;
	color: var(--swatch-cloud-dark);
	flex-shrink: 0;
}

@keyframes pf-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.pf-section {
	padding: var(--space-6xl) 0;
	position: relative;
}

.pf-section .reveal[style*="text-align: center"] .section-desc,
.pf-section .reveal[style*="text-align:center"] .section-desc {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.pf-section.is-white {
	background: var(--swatch-white);
}

.pf-section.is-muted {
	/* 原本用 --swatch-ivory-medium（偏深的米灰）跟白色區塊做區隔，
	   改用更淺的 --swatch-ivory-light，跟全站 Hero 等淺色區塊同一個色號 */
	background: var(--swatch-ivory-light);
}

.pf-section.is-dark {
	background: var(--swatch-slate-dark);
	color: var(--swatch-ivory-light);
}

.pf-section.is-dark .section-title {
	color: var(--swatch-white);
}

.pf-section.is-dark .section-desc {
	color: rgba(255, 255, 255, 0.7);
}

.pf-section.is-dark .section-badge {
	background: rgba(255, 255, 255, 0.08);
	color: var(--swatch-ivory-light);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 0 16px 1px color-mix(in srgb, var(--swatch-brand-green) 35%, transparent);
}

/* 成果效益（深色系樣式） */
.pf-section.is-dark .pf-outcome-card {
	background: #1C1E24;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35);
}

.pf-section.is-dark .pf-outcome-title {
	color: var(--swatch-white);
}

.pf-section.is-dark .pf-outcome-desc {
	color: rgba(255, 255, 255, 0.72);
}

.pf-section.is-dark .pf-outcome-icon-wrap {
	background: rgba(51, 204, 51, 0.14);
	color: var(--swatch-brand-green);
	border: 1px solid rgba(51, 204, 51, 0.25);
}

/* 核心亮點卡片（深色系樣式） */
.pf-section.is-dark .pf-feature-card {
	background: #1C1E24;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35);
}

.pf-section.is-dark .pf-feature-num {
	background: rgba(51, 204, 51, 0.15);
	color: var(--swatch-brand-green);
	border: 1px solid rgba(51, 204, 51, 0.3);
}

.pf-section.is-dark .pf-feature-icon {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--swatch-white);
}

.pf-section.is-dark .pf-feature-title {
	color: var(--swatch-white);
}

.pf-section.is-dark .pf-feature-desc {
	color: rgba(255, 255, 255, 0.72);
}

/* 背景與痛點挑戰：雙欄佈局（左 Client Profile，右 痛點與目標） */
.pf-bg-challenges-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--space-2xl);
	align-items: stretch;
}

.pf-client-banner {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--space-2xl) var(--space-3xl);
	box-shadow: var(--shadow-1);
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	height: 100%;
}

.pf-client-identity {
	border-right: none;
	border-bottom: 1px solid var(--border-light);
	padding-right: 0;
	padding-bottom: 0;
}

.pf-client-tagline {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--swatch-brand-green);
	margin-bottom: var(--space-3xs);
}

.pf-client-name {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin: 0 0 var(--space-2xs) 0;
}

.pf-client-sub {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: 0;
}

.pf-client-body {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.pf-client-desc {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.8;
	margin: 0;
}

/* 右側關鍵痛點與專案目標（上下排列） */
.pf-challenges-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	height: 100%;
}

.pf-challenge-card {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--space-2xl);
	box-shadow: var(--shadow-1);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.pf-challenge-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.pf-challenge-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.pf-challenge-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.7;
}

.pf-challenge-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xs);
	font-weight: 700;
}

.pf-challenge-item.is-pain .pf-challenge-icon {
	background: rgba(179, 64, 47, 0.12);
	color: var(--state-error);
}

.pf-challenge-item.is-goal .pf-challenge-icon {
	background: rgba(51, 204, 51, 0.16);
	color: var(--swatch-brand-green);
}

.pf-challenge-item strong {
	color: var(--swatch-slate-dark);
	font-weight: 600;
}

/* ── 3. 成果效益 ── */
.pf-outcomes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

.pf-outcome-card {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--space-2xl);
	box-shadow: var(--shadow-1);
	display: flex;
	flex-direction: column;
	transition: all var(--duration-fast) var(--ease-out);
	position: relative;
	overflow: hidden;
}

.pf-outcome-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--swatch-brand-green);
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-out);
}

.pf-outcome-icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-md);
	background: var(--state-success-bg);
	color: var(--swatch-brand-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-lg);
}

.pf-outcome-icon-wrap svg {
	width: 26px;
	height: 26px;
}

.pf-outcome-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin: 0 0 var(--space-xs) 0;
}

.pf-outcome-desc {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.75;
	margin: 0;
}

/* ── 4. 解決問題的過程（深入決策） ──
   原本是純白背景，改套用跟 #faq／#portfolio 同一套全站漸層背景，
   統一不同頁面「淺色區塊」的視覺語彙 */
#process.pf-section {
	position: relative;
	overflow: hidden;
	background-color: var(--swatch-ivory-medium);
	background-image:
		radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
	background-repeat: no-repeat;
	background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
	background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
	background-attachment: fixed;
	animation: bg-gradient-drift 30s ease-in-out infinite;
	color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
	#process.pf-section {
		animation: none;
	}
}

@media (max-width: 768px) {
	#process.pf-section {
		/* iOS Safari 對 background-attachment:fixed 支援不穩定，手機版改回一般捲動 */
		background-attachment: scroll;
	}
}

#process.pf-section .section-title {
	color: var(--swatch-slate-dark);
}

#process.pf-section .section-desc,
#process.pf-section .pf-process-intro p {
	color: var(--text-secondary);
}

.pf-process-intro {
	max-width: 820px;
	margin: 0 auto var(--space-4xl) auto;
	text-align: center;
}

.pf-process-intro p {
	font-size: round(nearest, clamp(1rem, 1.2vw, 1.15rem), 2px);
	color: var(--text-secondary);
	line-height: 1.85;
}

.pf-deepdive-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
}

.pf-deepdive-card {
	background: var(--swatch-white);
	border: 1px solid rgba(21, 22, 26, 0.08);
	border-radius: var(--radius-card);
	padding: var(--space-3xl);
	box-shadow: 0 10px 30px -4px rgba(21, 22, 26, 0.06), 0 2px 8px rgba(21, 22, 26, 0.03);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--space-3xl);
	align-items: center;
}

.pf-deepdive-card:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.pf-deepdive-card:nth-child(even) .pf-deepdive-content {
	order: 2;
}

.pf-deepdive-card:nth-child(even) .pf-deepdive-visual {
	order: 1;
}

.pf-deepdive-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--swatch-brand-green);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-2xs);
}

.pf-deepdive-title {
	font-size: round(nearest, clamp(1.4rem, 2vw, 1.8rem), 2px);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	line-height: 1.35;
	margin: 0 0 var(--space-md) 0;
}

.pf-deepdive-body {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: 1.85;
}

.pf-deepdive-body p {
	margin: 0 0 var(--space-md) 0;
}

.pf-deepdive-body p:last-child {
	margin-bottom: 0;
}

/* 決策圖解裝飾卡片 */
.pf-diagram-panel {
	background: var(--swatch-ivory-light);
	border: 1px solid rgba(21, 22, 26, 0.08);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* 比較標籤 */
.decision-compare-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.decision-compare-box {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
}

.decision-compare-box.is-rejected {
	border-color: rgba(179, 64, 47, 0.2);
	background: rgba(179, 64, 47, 0.02);
}

.decision-compare-box.is-adopted {
	border-color: rgba(51, 204, 51, 0.35);
	background: rgba(51, 204, 51, 0.03);
}

.decision-box-label {
	font-size: var(--text-xs);
	font-weight: 600;
	margin-bottom: var(--space-3xs);
	display: flex;
	align-items: center;
	gap: 4px;
}

.decision-compare-box.is-rejected .decision-box-label {
	color: var(--state-error);
}

.decision-compare-box.is-adopted .decision-box-label {
	color: var(--swatch-brand-green);
}

.decision-box-title {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin-bottom: var(--space-3xs);
}

.decision-box-desc {
	font-size: var(--text-xs);
	color: var(--text-secondary);
	line-height: 1.5;
	margin: 0;
}

/* 規則鏈流程可視化 */
.rule-chain-flow {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.rule-chain-step {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: var(--space-xs) var(--space-md);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--swatch-slate-dark);
	transition: all var(--duration-fast) var(--ease-out);
}

.rule-step-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--swatch-slate-dark);
	color: var(--swatch-white);
	font-size: var(--text-xs);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rule-chain-step:first-child .rule-step-num {
	background: var(--swatch-brand-green);
	color: var(--swatch-slate-dark);
}

.rule-arrow-divider {
	text-align: left;
	padding-left: calc(var(--space-md) + 24px + var(--space-sm));
	color: var(--swatch-cloud-dark);
	font-size: var(--text-xs);
	line-height: 1;
}

/* ── 5. 核心功能與體驗亮點 ── */
.pf-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

.pf-feature-card {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	padding: var(--space-2xl);
	box-shadow: var(--shadow-1);
	display: flex;
	flex-direction: column;
	transition: all var(--duration-fast) var(--ease-out);
}

.pf-feature-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-lg);
}

.pf-feature-num {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--swatch-brand-green);
	background: var(--state-success-bg);
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-full);
	letter-spacing: 0.05em;
}

.pf-feature-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--swatch-ivory-light);
	border: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swatch-slate-dark);
}

.pf-feature-icon svg {
	width: 20px;
	height: 20px;
}

.pf-feature-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin: 0 0 var(--space-xs) 0;
}

.pf-feature-desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	line-height: 1.7;
	margin: 0;
}

/* ── 6. 視覺展示區（黑白線稿設計展廊） ──
   原本是純白背景，同樣改套用全站漸層背景（跟 #process 同一套設定） */
#visual-showcase.pf-section {
	position: relative;
	overflow: hidden;
	background-color: var(--swatch-ivory-medium);
	background-image:
		radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
		radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
		radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
	background-repeat: no-repeat;
	background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
	background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
	background-attachment: fixed;
	animation: bg-gradient-drift 30s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	#visual-showcase.pf-section {
		animation: none;
	}
}

@media (max-width: 768px) {
	#visual-showcase.pf-section {
		background-attachment: scroll;
	}
}

.pf-gallery-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-3xl);
	padding: var(--space-xs) var(--space-lg);
	background: rgba(21, 22, 26, 0.03);
	border: 1px dashed var(--swatch-cloud-light);
	border-radius: var(--radius-full);
	text-align: center;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.pf-gallery-notice svg {
	width: 16px;
	height: 16px;
	color: var(--swatch-cloud-dark);
	flex-shrink: 0;
}

.pf-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

.pf-gallery-item {
	background: var(--swatch-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: all var(--duration-fast) var(--ease-out);
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.pf-gallery-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-3);
	border-color: var(--swatch-brand-green);
}

.pf-gallery-thumb {
	position: relative;
	background: #f7f7f8;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.pf-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform var(--duration-med) var(--ease-out);
	padding: var(--space-xs);
}

.pf-gallery-item:hover .pf-gallery-thumb img {
	transform: scale(1.04);
}

.pf-gallery-overlay {
	position: absolute;
	inset: 0;
	background: rgba(21, 22, 26, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-out);
}

.pf-gallery-item:hover .pf-gallery-overlay {
	opacity: 1;
}

.pf-gallery-zoom-btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--swatch-white);
	color: var(--swatch-slate-dark);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border-radius: var(--radius-sm, 8px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	pointer-events: none;
	transform: translateY(4px);
	transition: transform var(--duration-fast) var(--ease-out);
}

.pf-gallery-item:hover .pf-gallery-zoom-btn {
	transform: translateY(0);
}

.pf-gallery-zoom-btn svg,
.pf-gallery-zoom-btn [data-icon] {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: inline-block;
}

.pf-gallery-caption {
	padding: var(--space-md) var(--space-lg);
	background: var(--swatch-white);
	border-top: 1px solid var(--border-light-subtle);
}

.pf-gallery-caption-title {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin: 0 0 2px 0;
}

/* 燈箱 Modal (Lightbox) */
.pf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(21, 22, 26, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out);
}

.pf-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.pf-lightbox-container {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pf-lightbox-img {
	max-width: 100%;
	max-height: 82vh;
	object-fit: contain;
	border-radius: var(--radius-md);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
	background: var(--swatch-white);
}

.pf-lightbox-title {
	color: var(--swatch-ivory-light);
	font-size: var(--text-sm);
	font-weight: 600;
	margin-top: var(--space-sm);
	text-align: center;
}

.pf-lightbox-close {
	position: absolute;
	top: -44px;
	right: 0;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: var(--text-lg);
	transition: background var(--duration-fast) ease;
}

.pf-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.4);
}

/* ── 7. 開發技術架構 ── */
.pf-tech-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
}

.pf-tech-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}

.pf-tech-header .section-badge {
	margin-bottom: var(--space-md);
}

.pf-tech-header .section-title {
	margin: 0 0 var(--space-md) 0;
}

.pf-tech-header .section-desc {
	margin: 0.75rem auto 0 auto;
	color: var(--text-secondary);
	line-height: 1.7;
	max-width: 540px;
	text-align: center;
}

.pf-tech-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: clamp(2rem, 5vw, 4rem);
	row-gap: var(--space-xs);
}

.pf-tech-card {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(21, 22, 26, 0.12);
	border-radius: 0;
	padding: 0.625rem 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	transition: border-color var(--duration-fast) var(--ease-out);
}

.pf-tech-category {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
	flex-shrink: 0;
}

.pf-tech-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-xs);
	margin: 0;
}

.pf-tech-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--swatch-slate-dark);
	background: var(--swatch-white);
	box-shadow: 0 1px 2px rgba(24, 25, 28, 0.04);
	border: none;
	border-radius: var(--radius-full);
	line-height: 1.3;
	transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

/* ── 8. 更多作品 ── */
.pf-related-section {
	padding: var(--space-6xl) 0;
	position: relative;
	/* 跟上方「開發技術架構」(.pf-section.is-muted) 共用同一個淺色背景，
	   兩區連成一片，不再用分隔線切開；改用更淺的 --swatch-ivory-light */
	background: var(--swatch-ivory-light);
}

.pf-related-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--space-4xl) auto;
}

.pf-related-header .section-desc {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.pf-related-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-4xl);
}

/* ── 9. RWD 響應式佈局 ── */
@media (max-width: 1024px) {
	.pf-detail-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--space-3xl);
	}

	.pf-bg-challenges-layout {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.pf-client-banner {
		padding: var(--space-xl);
	}

	

	.pf-deepdive-card,
	.pf-deepdive-card:nth-child(even) {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
		padding: var(--space-2xl);
	}

	.pf-deepdive-card:nth-child(even) .pf-deepdive-content {
		order: 1;
	}

	.pf-deepdive-card:nth-child(even) .pf-deepdive-visual {
		order: 2;
	}

	.pf-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pf-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.pf-detail-hero {
		padding: var(--space-md) 0 var(--space-4xl);
	}

	/* 手機版單欄排列時，min-height:480px 搭配 align-items:center 會把內容
	   往垂直置中推，造成麵包屑與標題之間出現大片空白；改為自然高度、頂部對齊 */
	.pf-detail-hero-inner {
		min-height: 0;
		align-items: flex-start;
	}

	.pf-section {
		padding: var(--space-4xl) 0;
	}

	.pf-outcomes-grid {
		grid-template-columns: 1fr;
	}

	.pf-features-grid {
		grid-template-columns: 1fr;
	}

	.pf-gallery-grid {
		grid-template-columns: 1fr;
	}

	.pf-tech-list {
		grid-template-columns: 1fr;
	}

	.pf-tech-card {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
		padding: 0.625rem 0;
	}

	.pf-tech-name {
		justify-content: flex-start;
	}

	.pf-floating-pill {
		display: none;
	}

	/* 手機版單欄排列時文字內容會往下堆疊，若維持桌機版「絕對定位在整個
	   hero 區塊底部」的做法，bottom:12px 會落在標題/內文/CTA按鈕一帶，
	   導致提示遮住「作品連結」「回到作品集」按鈕。改為脫離絕對定位、
	   回到正常文件流，固定顯示在整個 hero 區塊最上方（標籤列之前），
	   就不會再跟著內文高度跑位、蓋住任何按鈕 */
	.pf-floating-pill.confidential-pill {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius-md);
		/* 這個提示是 .pf-detail-hero 的直接子元素，不在 .container 裡面，
		   脫離絕對定位後會直接貼齊 section 邊界（沒有左右留白）；
		   這裡補上跟 .container 手機版同樣的 20px 左右邊距，視覺上才會對齊
		   下方標題／內文 */
		margin: 0 var(--space-md) var(--space-md);
		animation: none;
		z-index: auto;
		pointer-events: auto;
	}

	.decision-compare-row {
		grid-template-columns: 1fr;
	}
}

/* ── 作品集內頁：Hero 底部不留白，滿版圖片直接銜接下一區 ── */
.hero-scenarios-wrapper:has(.pf-detail-hero) {
	padding-bottom: 0;
}

/* Hero 左側加上淡色遮罩，確保標題與說明文字清楚可讀 */
.pf-detail-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(250, 249, 245, 0.97) 0%,
		rgba(250, 249, 245, 0.9) 34%,
		rgba(250, 249, 245, 0.5) 58%,
		rgba(250, 249, 245, 0) 78%);
}

@media (max-width: 991px) {
	.pf-detail-hero-bg::after {
		background: rgba(250, 249, 245, 0.9);
	}
}

/* ── 元件同步：與最新頁面的標籤與小標樣式一致 ── */

/* 卡片內的 eyebrow 小標（客戶概況、Decision 01）改為深綠膠囊，同服務頁「PlayPlus 解方」標籤 */
.pf-client-tagline,
.pf-deepdive-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full);
	background: #167a16;
	color: var(--swatch-white);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: none;
}

.pf-deepdive-badge {
	margin-bottom: var(--space-2xs);
}

/* 功能編號：改用一般字體的綠色膠囊，移除等寬字體 */
.pf-feature-num {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.pf-related-header .section-badge {
	margin-left: auto;
	margin-right: auto;
}

/* ── 第五輪調整 ── */

/* 小標（Client Profile、Decision 01）：次要資訊，改為低調的灰色大寫文字 */
.pf-client-tagline,
.pf-deepdive-badge {
	display: inline-flex;
	align-items: center;
	width: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* 關鍵痛點／專案目標：標題層級，加上品牌綠色短條作為視覺引導 */
.pf-challenge-header h3 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--swatch-slate-dark);
}

.pf-challenge-header h3::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--swatch-brand-green);
}

/* 背景區的卡片：改用米色淺底、無外框與陰影，與白底區塊形成層次（同服務頁痛點卡片） */
.pf-client-banner,
.pf-challenge-card {
	background: var(--swatch-ivory-light);
	border: none;
	box-shadow: none;
}

/* 深色區塊的小標：沿用首頁「品牌對外形象」(.digital-header .section-badge) 的樣式，
   是深色底＋白字的膠囊，不是白底（先前這裡寫反了） */
.pf-section.is-dark .section-badge {
	background: var(--swatch-slate-dark);
	color: var(--swatch-white);
	border: none;
}

/* 深色區塊的成果卡片：提高明度，與黑色背景拉開距離 */
.pf-section.is-dark .pf-outcome-card {
	background: #2A2D35;
	border-color: transparent;
}

/* 決策對比圖：移除外框線，只保留底色 */
.decision-compare-box,
.decision-compare-box.is-rejected,
.decision-compare-box.is-adopted {
	border: none;
}

/* 決策圖解面板：同樣移除外框線 */
.pf-diagram-panel {
	border: none;
}

/* ── 字重層級重整：只有頁面主標題保留 800，區塊標題 700，卡片標題 700，
      小標籤與次要資訊 600，內文強調 600，避免整頁粗體過重 ── */
.pf-section .section-title,
.pf-related-header .section-title {
	font-weight: 800;
}

.pf-deepdive-body strong,
.pf-challenge-item strong {
	font-weight: 600;
}

/* ── 手機版：麵包屑與標題之間留白太多，減半 ── */
@media (max-width: 640px) {
	.breadcrumb-nav {
		padding-bottom: 8px;
	}

	.pf-detail-hero {
		padding-top: 14px;
	}
}