/* =========================================================
   KD 人形美術館 頁面區塊 (KD Pages) — 共用樣式
   - 一個區塊 = 一個小工具，BEM：.kd-pages__元素；各區塊 .kd-pages-<短名>__元素
   - 顏色、字級、版面全部固定為 KD 設計稿值（docs/adr/0001、0002）；不接 --e-global-*
   - 每條元件規則以 .kd-pages-scope.kd-pages-scope 開頭（權重 (0,3,0)），蓋過主題 / Elementor 全站 button、a 樣式
   - 手機優先；窄版切換點 959.98px（側欄 1024.98px、雜誌封面 759.98px，見 ADR-0002）
   ========================================================= */

.kd-pages {
	/* 主色 */
	--kd-pink: #E5487A;          /* 桃紅：CTA、優惠、連結 */
	--kd-berry: #B8245A;         /* 深莓：漸層終點、評價標籤字 */
	--kd-pink-light: #E58FA6;    /* 淺粉：漸層起點、hover */
	--kd-pink-pale: #F6BCD0;     /* 品牌分頁箭頭、MITICA 強調字 */
	--kd-pink-border: #F3B6CB;   /* 週日圓點框 */
	--kd-yellow: #F4E94A;        /* 亮黃：折扣星章、LIMITED TIME、流程卡頂線 */
	--kd-gold: #C8A24A;          /* 金：英文小標、56×2 標題細線、深度報導左線 */
	--kd-gold-dark: #B08A3E;     /* 金（深）：標題強調字、數字列、媒體名 */
	--kd-gold-cta: #F4D27A;      /* 協會金 CTA 漸層起點 */
	--kd-gold-cta-dark: #E0B44A; /* 協會金 CTA 漸層終點 */
	--kd-assoc-gold: #E0C67F;    /* 協會金（文字）：深底上的小標 */
	--kd-purple: #3B2453;        /* 協會紫：區塊底 */
	--kd-purple-deep: #2B1B3D;   /* 協會深紫：CTA 文字、圖片底、標籤底 */
	--kd-purple-text: #DCCFE8;   /* 協會區內文（首頁） */
	--kd-purple-text-2: #E6DCEC; /* 協會區內文（關於我們） */
	--kd-purple-muted: #B9A8CC;  /* 協會資訊卡 key */
	--kd-line-green: #06C755;    /* LINE 綠 */
	--kd-star: #F2B01E;          /* 評價星星 */
	--kd-sun-bg: #FCE4EC;        /* 行事曆週日底 */
	--kd-sun-fg: #C2185B;        /* 行事曆週日字 */

	/* 中性 */
	--kd-dark: #2B2430;
	--kd-text: #5A5060;
	--kd-text-2: #4A4150;
	--kd-muted: #7A6E76;
	--kd-weak: #9A8E96;
	--kd-faint: #C9BCC3;         /* 側欄 › 箭頭 */
	--kd-del: #B9AEB4;           /* 原價刪除線 */
	--kd-on-dark: #F3E7EC;
	--kd-on-dark-2: #E8DCE2;
	--kd-on-dark-3: #E6DCE2;
	--kd-on-dark-4: #C4B7BE;     /* 頁尾連結 */
	--kd-on-dark-muted: #A99DAA; /* 頁尾品牌說明 */
	--kd-on-dark-weak: #8E8290;  /* 頁尾版權列 */
	--kd-white: #FFFFFF;

	/* 底色 */
	--kd-bg: #FAF6F8;
	--kd-bg-pink: #FBEFF3;
	--kd-bg-pink-2: #F1E6EB;
	--kd-bg-pink-3: #F6DCE4;
	--kd-bg-grey: #F3F1F2;
	--kd-bg-grey-2: #F4F1F3;
	--kd-bg-cream: #FFF8D6;

	/* 線 */
	--kd-line: rgba(43, 36, 48, .08);
	--kd-line-strong: rgba(43, 36, 48, .1);
	--kd-line-pink: rgba(229, 143, 166, .45);

	/* 漸層 / 陰影 / 圓角 / 版面 */
	--kd-grad-cta: linear-gradient(135deg, #E58FA6, #E5487A);
	--kd-grad-deep: linear-gradient(135deg, #E5487A, #B8245A);
	--kd-grad-bar: linear-gradient(120deg, #E5487A, #E58FA6);
	--kd-grad-pale: linear-gradient(120deg, #FFF5F8, #F9D7E2);
	--kd-grad-gold: linear-gradient(135deg, #F4D27A, #E0B44A);
	--kd-shadow: 0 6px 20px rgba(43, 36, 48, .07);
	--kd-shadow-pink: 0 12px 30px rgba(184, 36, 90, .25);
	--kd-shadow-lg: 0 20px 50px rgba(43, 36, 48, .14);
	--kd-radius-card: 16px;
	--kd-radius-block: 20px;
	--kd-radius-pill: 999px;
	--kd-max: 1280px;
	--kd-max-text: 1180px;
	--kd-gutter: 16px;

	/* 字體：由主題 / Elementor 註冊，外掛不載入（README §5） */
	--kd-font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
	--kd-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
	--kd-fs-h2: clamp(26px, 3vw, 36px);
	--kd-fs-eyebrow: 11.5px;

	position: relative;
	color: var(--kd-dark);
	font-family: var(--kd-font-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.kd-pages *,
.kd-pages *::before,
.kd-pages *::after {
	box-sizing: border-box;
}

/* Elementor 直欄 + wrap 容器裡，用 aspect-ratio 撐高的區塊會塌成 0 寬（gemistry-pdp 2.4.1 修正）。 */
[class*="elementor-widget-kd-pages-"] {
	width: 100%;
}

/* Elementor 預設在每個小工具下方加 20px（Site Settings → Layout → Widgets Space）。區塊間距由各區塊自己的 padding 決定（設計稿值），這裡歸零。 */
.elementor-widget.elementor-widget[class*="elementor-widget-kd-pages-"]:not(:last-child) {
	margin-bottom: 0;
	margin-block-end: 0;
}

/* 重設主題 / Elementor 全站 button、a 樣式。權重 (0,2,1)；各元件規則 (0,3,0) 再高一層。 */
.kd-pages-scope.kd-pages-scope button {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	cursor: pointer;
}

.kd-pages-scope.kd-pages-scope a {
	color: inherit;
	text-decoration: none;
	transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, filter .2s;
}

.kd-pages-scope.kd-pages-scope :focus-visible {
	outline: 2px solid var(--kd-pink);
	outline-offset: 2px;
}

.kd-pages-scope.kd-pages-scope h2,
.kd-pages-scope.kd-pages-scope h3,
.kd-pages-scope.kd-pages-scope h4,
.kd-pages-scope.kd-pages-scope p,
.kd-pages-scope.kd-pages-scope ul,
.kd-pages-scope.kd-pages-scope ol,
.kd-pages-scope.kd-pages-scope figure,
.kd-pages-scope.kd-pages-scope blockquote {
	margin: 0;
	padding: 0;
	color: inherit;
}

.kd-pages-scope.kd-pages-scope ul,
.kd-pages-scope.kd-pages-scope ol {
	list-style: none;
}

.kd-pages-scope.kd-pages-scope img {
	max-width: 100%;
	height: auto;
	display: block;
}

.kd-pages-scope.kd-pages-scope .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.kd-pages-scope.kd-pages-scope [hidden] {
	display: none !important;
}

/* 版面容器 */
.kd-pages-scope.kd-pages-scope .kd-pages__inner {
	max-width: var(--kd-max);
	margin: 0 auto;
	padding: 0 var(--kd-gutter);
}

.kd-pages-scope.kd-pages-scope .kd-pages__inner--text {
	max-width: var(--kd-max-text);
}

/* 編輯器提示 */
.kd-pages-scope.kd-pages-scope .kd-pages__notice {
	margin: 1rem 0;
	padding: 12px 16px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	font-size: 13px;
	opacity: .7;
}

/* =========================================================
   區塊標題：英文小標 + 明體大標（+ 金色強調字、56×2 金線）+ 副標 + 右側連結
   ========================================================= */

.kd-pages-scope.kd-pages-scope .kd-pages__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head--center .kd-pages__head-text {
	align-items: center;
}

.kd-pages-scope.kd-pages-scope .kd-pages__eyebrow {
	font-size: var(--kd-fs-eyebrow);
	letter-spacing: .32em;
	color: var(--kd-gold);
	line-height: 1.4;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head--light .kd-pages__eyebrow {
	color: var(--kd-assoc-gold);
}

.kd-pages-scope.kd-pages-scope .kd-pages__title {
	font-family: var(--kd-font-serif);
	font-weight: 600;
	font-size: var(--kd-fs-h2);
	line-height: 1.3;
	display: inline-block;
	color: var(--kd-dark);
}

.kd-pages-scope.kd-pages-scope .kd-pages__title--underline {
	padding-bottom: 12px;
	background: linear-gradient(var(--kd-gold), var(--kd-gold)) left bottom / 56px 2px no-repeat;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head--center .kd-pages__title--underline {
	background-position: center bottom;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head--light .kd-pages__title {
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__head--light .kd-pages__title--underline {
	background-image: linear-gradient(var(--kd-yellow), var(--kd-yellow));
}

.kd-pages-scope.kd-pages-scope .kd-pages__accent {
	color: var(--kd-gold-dark);
	display: inline-block;
}

.kd-pages-scope.kd-pages-scope .kd-pages__lead {
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--kd-text);
	max-width: 40em;
	text-wrap: pretty;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head--light .kd-pages__lead {
	color: var(--kd-on-dark);
}

.kd-pages-scope.kd-pages-scope .kd-pages__head-link {
	font-size: 15px;
	font-weight: 700;
	color: var(--kd-pink);
	white-space: nowrap;
}

.kd-pages-scope.kd-pages-scope .kd-pages__head-link:hover {
	color: var(--kd-pink-light);
}

/* =========================================================
   按鈕（<a>）
   ========================================================= */

.kd-pages-scope.kd-pages-scope .kd-pages__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: var(--kd-radius-pill);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	border: 1.5px solid transparent;
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--primary {
	background: var(--kd-grad-cta);
	color: var(--kd-white);
	box-shadow: 0 6px 18px rgba(201, 102, 132, .32);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--primary:hover {
	filter: brightness(1.06);
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline,
.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline-pill {
	background: var(--kd-white);
	border-color: var(--kd-pink);
	color: var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline {
	border-radius: 10px;
	padding: 10px 22px;
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline:hover,
.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline-pill:hover {
	background: var(--kd-pink);
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline-soft {
	background: var(--kd-white);
	border-color: var(--kd-pink);
	color: var(--kd-pink);
	border-radius: 12px;
	padding: 10px 14px;
	font-weight: 900;
	justify-content: space-between;
	width: 100%;
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline-soft::after {
	content: "→";
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--outline-soft:hover {
	background: var(--kd-pink);
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--line {
	background: var(--kd-line-green);
	color: var(--kd-white);
	padding: 12px 22px;
	font-size: 15px;
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--line:hover {
	filter: brightness(1.06);
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--white {
	background: var(--kd-white);
	color: var(--kd-dark);
	border-color: rgba(43, 36, 48, .15);
	padding: 13px 28px;
	font-size: 15px;
	font-weight: 900;
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--white:hover {
	background: var(--kd-pink);
	border-color: var(--kd-pink);
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--white-pink {
	background: var(--kd-white);
	color: var(--kd-pink);
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 900;
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--white-pink:hover {
	background: var(--kd-bg-pink-3);
	color: var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--dark {
	background: var(--kd-dark);
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--dark:hover {
	filter: brightness(1.15);
	color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--gold {
	background: var(--kd-grad-gold);
	color: var(--kd-purple-deep);
	padding: 15px 34px;
	font-size: 16px;
	font-weight: 900;
	box-shadow: 0 10px 28px rgba(224, 180, 74, .35);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--gold:hover {
	filter: brightness(1.05);
	color: var(--kd-purple-deep);
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
	color: var(--kd-white);
	padding: 14px 28px;
	font-size: 15px;
}

.kd-pages-scope.kd-pages-scope .kd-pages__btn--ghost-light:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--kd-white);
}

/* =========================================================
   共用小元件
   ========================================================= */

.kd-pages-scope.kd-pages-scope .kd-pages__pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--kd-radius-pill);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.kd-pages-scope.kd-pages-scope .kd-pages__card {
	background: var(--kd-white);
	border: 1px solid var(--kd-line);
	border-radius: var(--kd-radius-card);
}

/* 播放鍵：白色半透明圓 + 粉色三角 */
.kd-pages-scope.kd-pages-scope .kd-pages__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 52px;
	height: 52px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	pointer-events: none;
}

.kd-pages-scope.kd-pages-scope .kd-pages__play::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages__play--dark {
	background: rgba(31, 24, 30, .6);
}

.kd-pages-scope.kd-pages-scope .kd-pages__play--dark::after {
	border-left-color: var(--kd-white);
}

.kd-pages-scope.kd-pages-scope .kd-pages__stars {
	color: var(--kd-star);
	letter-spacing: .12em;
	font-size: 17px;
	line-height: 1;
}

/* 可橫向捲動的列（細捲軸） */
.kd-pages-scope.kd-pages-scope .kd-pages__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(43, 36, 48, .2) transparent;
}

.kd-pages-scope.kd-pages-scope .kd-pages__scroll::-webkit-scrollbar {
	height: 4px;
}

.kd-pages-scope.kd-pages-scope .kd-pages__scroll::-webkit-scrollbar-thumb {
	background: rgba(43, 36, 48, .2);
	border-radius: 4px;
}

/* 輪播圓點（主橫幅、品牌故事、品牌一覽共用） */
.kd-pages-scope.kd-pages-scope .kd-pages__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
}

.kd-pages-scope.kd-pages-scope .kd-pages__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--kd-radius-pill);
	background: #E2D6DC;
	transition: width .3s, background .3s;
	padding: 0;
}

.kd-pages-scope.kd-pages-scope .kd-pages__dot.is-active {
	width: 22px;
	background: var(--kd-pink);
}

.kd-pages-scope.kd-pages-scope .kd-pages__dots--light .kd-pages__dot {
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.kd-pages-scope.kd-pages-scope .kd-pages__dots--light .kd-pages__dot.is-active {
	background: var(--kd-white);
}

/* 動畫（協會 CTA 外框） */
@keyframes kd-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes kd-glow {
	0%, 100% { box-shadow: 0 0 18px rgba(244, 210, 122, .35), 0 10px 28px rgba(224, 180, 74, .3); }
	50% { box-shadow: 0 0 34px rgba(255, 120, 170, .55), 0 10px 32px rgba(224, 180, 74, .45); }
}

@media (prefers-reduced-motion: reduce) {
	.kd-pages-scope.kd-pages-scope *,
	.kd-pages-scope.kd-pages-scope *::before,
	.kd-pages-scope.kd-pages-scope *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* 手機底部固定列佔位（唯一 body 層規則，ADR-0002） */
@media (max-width: 959.98px) {
	body.kd-pages-has-mobile-bar {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}
}