/* ==========================================================================
   cadch.css — cadch 模組專用（階段 4）
   YUAN·AN ONSEN 佈景 btp_rwd_5_c_d
   來源設計稿：參考資料/demo_D/design/YuanAn Cadch.dc.html:197-317（六個區段）

   theme.tpl 以 <{if $xoops_dirname == 'cadch'}> 條件載入。
   🔴 判斷式用 $xoops_dirname（include/functions.php:842 assign，非模組頁為 'system'），
      **不是** $xoops_contents —— 後者只分得出首頁／內頁，分不出是哪個模組。
      與階段 3 的 news.css 同一套。

   🔴 **c_c 是把樣式內嵌在六支 mode 樣板的 <style> 裡**，改一個顏色要動六個檔案。
      階段 3 起改成獨立 CSS，本檔比照。mode 樣板裡不再有任何 <style>。

   前綴一律 .ya-cd-，刻意避開 news 的 .ya-nw-／.ya-art- 與首頁的 .ya-*。

   ── 顏色的處理原則（F 段既有規則，這裡再寫一次以免重蹈覆轍）────────────────
     設計稿寫 var(--xx, #fallback) → fallback 是舊值殘留，**忽略**，改用 --ya- 變數
     設計稿寫純 rgba()／#hex 字面值 → 那是設計稿真正要的顏色，**照抄**
   本頁設計稿的 PALETTE 與佈景 token 完全對得上，所以絕大多數直接用 --ya-：
     --ink #23303A=--ya-ink／--ac #BE8574=--ya-ac／--acs #E6C0B2=--ya-ac-soft
     --oc #1F4E6B=--ya-ocean／--deep #12303F=--ya-deep／--mist #EDF2F5=--ya-mist
     #F7FAFB=--ya-paper／#3c4b58=--ya-body／#5b6875=--ya-body-2／#8496a3=--ya-muted
     #b6c1cb=--ya-muted-2
   只有一個字面值在 token 裡沒有對應，下面用區域變數帶著：#7c8996（meta 灰）

   ── 節次 ────────────────────────────────────────────────────────────────
     1. token 與頁面外框      5. 三本柱（mode 4）
     2. 共用元件（標頭／菱點／編輯鈕／進場）
     3. 形象帶（mode 1）      6. 建築與庭園（mode 5）
     4. 導言／品牌故事（mode 2、3）
                              7. 來訪資訊（mode 6）
     8. 後台管理列            9. 響應式      10. 列印
   ========================================================================== */


/* ==========================================================================
   1. token 與頁面外框
   ========================================================================== */
:root {
	--ya-cd-meta:   #7c8996;                  /* 設計稿字面值（卡片 meta 列）*/
	--ya-cd-hair:   linear-gradient(90deg, rgba(190,133,116,.6) 0%, rgba(31,78,107,.1) 55%, transparent 100%);
	--ya-cd-shadow: 0 34px 60px -46px rgba(18,48,63,.55);   /* 設計稿卡片 hover */
}

/* 🔴 抵銷 .ya-inner-wrap 的版心內距與最大寬 —— 六個區段都是滿版、自帶版心。
   用 :has() 而不是無條件覆寫：cadch 還有 item.php／unit.php／row.php 等後台頁面
   走同一個佈景外框，那些不該被抽掉內距。
   舊瀏覽器不支援 :has() 時只是多留一段上內距，不會壞版。
   （與 news 的 .ya-inner-wrap:has(.ya-nwpage) 同一套手法。） */
.ya-inner-wrap:has(.ya-cdpage) { padding-top: 0; padding-bottom: 0; max-width: none; }
.ya-inner-wrap:has(.ya-cdpage) .ya-zones { gap: 0; }

.ya-cdpage { color: var(--ya-body); font-family: var(--ya-sans); font-weight: 300; }
.ya-cdpage .ya-cd-row { display: block; }

/* 各區段共用的置中版心（設計稿三處都是 max-width:1180 ＋ clamp(1.5rem,5vw,3rem)）
   ⚠ 左右內距**刻意不用 --ya-pad-x**（那支是 clamp(1.5rem,5vw,4rem)）——
     設計稿 cadch 頁用的是比較窄的一組，照設計稿。 */
.ya-cd-wrap {
	max-width: var(--ya-wrap);
	margin: 0 auto;
	padding-left: clamp(1.5rem, 5vw, 3rem);
	padding-right: clamp(1.5rem, 5vw, 3rem);
}


/* ==========================================================================
   2. 共用元件
   ========================================================================== */

/* 45° 菱點。設計稿有兩種尺寸：區段標頭 .44rem、卡片 meta .28rem */
.ya-cd-diamond {
	display: inline-block; width: .44rem; height: .44rem;
	background: var(--ya-ac); transform: rotate(45deg);
}
.ya-cd-diamond--sm { width: .28rem; height: .28rem; }

/* 文字上色：類別是**全站統一的 .ya-accent**（基底在 style.css）。
   後台用一對半形 `|` 包住要變色的字，樣板端轉成 <span class="ya-accent">。
   這裡只覆寫深底區段要用的淺玫瑰金。 */

/* 區段標頭：細線 ＋ 菱點 ＋ 英文眉標 ＋ 中文大標 */
.ya-cd-head {
	position: relative;
	padding-top: 1.3rem;
	margin-bottom: 2.4rem;
}
/* --narrow：品牌故事的標頭跟著內文收窄到 820 並置中（設計稿 :214） */
.ya-cd-head--narrow { max-width: var(--ya-read); margin-left: auto; margin-right: auto; }
.ya-cd-head__hair {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 1px;
	background: var(--ya-cd-hair);
}
.ya-cd-head__dot { position: absolute; top: -.24rem; left: 0; }
.ya-cd-head__en {
	margin: 0;
	font-family: var(--ya-en); font-style: italic;
	letter-spacing: .28em; font-size: .72rem;
	text-transform: uppercase; color: var(--ya-ac);
}
.ya-cd-head__zh {
	margin: .2rem 0 0;
	font-family: var(--ya-serif); font-weight: 400;
	font-size: clamp(1.35rem, 2.3vw, 1.8rem);
	letter-spacing: .1em; color: var(--ya-ink);
}

/* 進場動畫：由 js/cadch.js 加 .is-in。
   🔴 只有 JS 真的跑起來（html 帶 .ya-cd-js）才隱藏 —— 沒有 JS 時完整顯示，
      不會出現「內容永遠是透明的」。與 c_c 的 cadch-inner.js 同一個保險做法。 */
.ya-cd-js [data-cd-reveal] {
	opacity: 0; transform: translateY(30px);
	transition: opacity .75s var(--ya-ease), transform .85s var(--ya-ease);
}
.ya-cd-js [data-cd-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ya-cd-js [data-cd-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 段落編輯鈕（只有有權限的人看得到） */
.ya-cd-edit {
	display: inline-block; margin-top: .6rem;
	padding: .25rem .7rem;
	border: 1px solid var(--ya-line);
	font-family: var(--ya-en); font-size: .72rem; letter-spacing: .12em;
	color: var(--ya-ocean); background: var(--ya-white);
	transition: background var(--ya-t-col), color var(--ya-t-col);
}
.ya-cd-edit:hover { background: var(--ya-ac); border-color: var(--ya-ac); color: var(--ya-white); }
/* 深底區段裡的編輯鈕要反白 */
.ya-cd-visit .ya-cd-edit { border-color: rgba(255,255,255,.28); background: transparent; color: var(--ya-white); }
.ya-cd-visit .ya-cd-edit:hover { background: rgba(255,255,255,.14); }

/* 停用中的段落（只有管理者看得到）*/
.is-off { opacity: .5; }

/* ── 段落原地佔位（只有管理者看得到）────────────────────────────────────
   🔴 為什麼要有它：各 mode 的版型是照設計稿畫的，**畫不出來的段落就完全不輸出** ——
      mode 1 只取第 1 筆、mode 3 只畫有 content 的、mode 5 只畫有 picture 的。
      那些段落管理者看不到也點不到，只能回後台清單硬找。
      改成在**它原本該出現的位置**畫一個虛線佔位框，編輯鈕就放在框裡（使用者
      2026-09-01 指示：全部改原地按鈕，空的就原地佔位）。
   ⚠ 樣板端一律包在 <{if $cadch_checkunit}> 內，**訪客連空容器都拿不到**，
     所以這裡不需要（也不該）用 CSS 去藏。 */
.ya-cd-ph {
	display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
	padding: 1rem 1.1rem;
	border: 1px dashed var(--ya-line);
	background: var(--ya-paper-warm);
	color: var(--ya-cd-meta);
	font-size: .85rem;
}
.ya-cd-ph__txt { margin: 0; }
.ya-cd-ph__no  { font-family: var(--ya-en); font-style: italic; color: var(--ya-ac); margin-right: .4rem; }
/* mode 1：形象帶是 overflow:hidden 的滿版帶，佔位框只能掛在它下方，要自己給版心 */
.ya-cd-ph--band { max-width: var(--ya-wrap); margin: 1rem auto 0; }
/* mode 6：深底區段用反白版 */
.ya-cd-visit .ya-cd-ph {
	border-color: rgba(255,255,255,.28);
	background: rgba(255,255,255,.05);
	color: rgba(255,255,255,.6);
}
/* mode 5：佔位要撐滿原本的圖框比例，才不會讓格線塌掉。
   ⚠ 特異性 (0,2,0) 高於 .ya-cd-gal__box 的 display:block，順序無關。 */
.ya-cd-gal__box.ya-cd-ph { aspect-ratio: 4 / 3; align-items: center; justify-content: center; text-align: center; }

/* mode 3：照片格原本只有 <img>，編輯鈕要壓在圖上 —— 
   .ya-cd-story__fig 是 overflow:hidden ＋ aspect-ratio，一般流的鈕會被裁掉。 */
.ya-cd-story__fig { position: relative; }
.ya-cd-story__fig > .ya-cd-edit { position: absolute; left: .6rem; bottom: .6rem; margin-top: 0; z-index: 2; }

/* mode 6 右欄：聯絡列本身是 <a>，**不能再巢一個 <a>** ——
   編輯鈕改當它的兄弟，直接放進 .ya-cd-visit__list 這個 flex column。
   align-self 讓它不被 stretch 拉滿寬；負的 margin-top 收掉 list 的 gap。 */
.ya-cd-visit__list > .ya-cd-edit { align-self: flex-start; margin-top: -.55rem; }



/* ==========================================================================
   3. 形象帶（mode 1；設計稿 :198-207）
   ⚠ 與 news 的 .ya-band 是**兩套不同的形象帶**：news 是置中，cadch 是左下對齊，
     高度也不同（news clamp(240,26vw,380)／cadch clamp(320,46vh,460)）。
     刻意不共用，兩邊各照各的設計稿。
   ========================================================================== */
.ya-cd-band {
	position: relative;
	width: 100vw; margin-left: calc(50% - 50vw);
	height: clamp(320px, 46vh, 460px);
	overflow: hidden;
	/* 沒有上傳背景圖時的退路：設計稿色系的深藍漸層，白色襯線大標壓上去完全成立。
	   ⚠ 不指向不存在的圖檔 —— 那會讓每次載入都多一個 404（news 形象帶同一個決定）。 */
	background: linear-gradient(155deg, #0d2634 0%, var(--ya-deep) 38%, var(--ya-ocean) 78%, #2a5f7d 100%);
}
.ya-cd-band__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}
/* 設計稿字面值，三段式：上 .6 → 中 .32 → 下 .72 */
.ya-cd-band__veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(18,48,63,.60) 0%,
		rgba(18,48,63,.32) 55%,
		rgba(18,48,63,.72) 100%);
}
.ya-cd-band__inner {
	position: relative; height: 100%;
	display: flex; flex-direction: column;
	justify-content: flex-end; gap: .9rem;
	max-width: var(--ya-wrap); margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 5vw, 3.6rem);
}
.ya-cd-band__crumb {
	margin: 0;
	font-size: .78rem; letter-spacing: .12em;
	color: rgba(255,255,255,.6);
	animation: yaCdFadeUp .8s both;
}
.ya-cd-band__crumb a { color: rgba(255,255,255,.6); transition: color var(--ya-t-col); }
.ya-cd-band__crumb a:hover { color: var(--ya-ac-soft); }
.ya-cd-band__en {
	margin: 0;
	font-family: var(--ya-en); font-style: italic;
	letter-spacing: .3em; font-size: .74rem;
	text-transform: uppercase; color: var(--ya-ac-soft);
	animation: yaCdFadeUp .85s .06s both;
}
/* ⚠ 兩個選擇器共寫一條：本區在「原生 <h1>」與（日後若降級成）「<div class="h1">」
   兩種形態下外觀完全一致，換標籤不必改 CSS。 */
.ya-cd-band__title,
h1.ya-cd-band__title {
	margin: 0;
	font-family: var(--ya-serif); font-weight: 400;
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	letter-spacing: .08em; color: var(--ya-white);
	animation: yaCdFadeUp .95s .12s both;
}
/* 形象帶裡的重點色用淺玫瑰金（深底上用 --ya-ac 會太暗） */
.ya-cd-band__title .ya-accent { color: var(--ya-ac-soft); }

@keyframes yaCdFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   4. 導言（mode 2；:208-212）與品牌故事（mode 3；:213-230）
   ========================================================================== */
.ya-cd-lead { background: var(--ya-white); }
.ya-cd-lead__inner {
	max-width: 820px; margin: 0 auto;
	padding: clamp(3.4rem, 6.5vw, 5rem) clamp(1.5rem, 5vw, 3rem) clamp(1.6rem, 3vw, 2.4rem);
	text-align: center;
}
.ya-cd-lead__inner > .ya-cd-diamond { margin-bottom: 1.5rem; }
.ya-cd-lead__text > p {
	margin: 0;
	font-family: var(--ya-serif);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 2.15; letter-spacing: .03em;
	color: var(--ya-body); text-wrap: pretty;
}
.ya-cd-lead__text > p + p { margin-top: 1.2rem; }

.ya-cd-story { background: var(--ya-white); }
.ya-cd-story .ya-cd-wrap {
	padding-top: clamp(2.4rem, 5vw, 3.6rem);
	padding-bottom: clamp(3rem, 6vw, 4.4rem);
}
.ya-cd-story__body { max-width: var(--ya-read); margin: 0 auto; }
.ya-cd-story__p > p {
	margin: 0 0 1.7rem;
	font-family: var(--ya-serif);
	font-size: 1.04rem; line-height: 2.2;
	color: var(--ya-body); text-wrap: pretty;
}
.ya-cd-story__p > p:last-child { margin-bottom: 0; }
.ya-cd-story__p + .ya-cd-story__p { margin-top: 1.7rem; }

.ya-cd-story__pics {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.6rem);
	margin-top: 2.6rem;
}
.ya-cd-story__fig { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
/* 🔴 height:100% 必須寫在圖上，否則 style.css 的 :where(body.ya-body) img{height:auto}
   會讓照片撐不滿裁切框、底部露空（F 段踩過四次的同一個坑）。 */
.ya-cd-story__fig img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--ya-t-img) var(--ya-ease);
}
.ya-cd-story__fig:hover img { transform: scale(1.05); }


/* ==========================================================================
   5. 三本柱（mode 4；:231-269）
   ========================================================================== */
.ya-cd-pil { background: var(--ya-paper); }
.ya-cd-pil .ya-cd-wrap {
	padding-top: clamp(3rem, 6vw, 4.6rem);
	padding-bottom: clamp(3rem, 6vw, 4.6rem);
}
/* 1px gap ＋ 容器底色 ＝ 卡片之間的細線（設計稿的做法，不是 border） */
.ya-cd-pil__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--ya-line);
	border: 1px solid var(--ya-line);
}
/* 🔴 2026-09-01：格子改成 flex column，卡片用 flex 吃掉剩餘高度。
   原本是 `display:block` ＋ 卡片 `height:100%` —— 卡片剛好塞滿整個格子，
   排在它後面的**原地編輯鈕就被擠到格子外面**，落進下一列格子的範圍，
   再被下一列 .ya-cd-pil__cell 的白底蓋掉（使用者回報「湯」的編輯鈕看不到）。
   ⚠ 訪客端的呈現完全不變：格子裡只有卡片一個孩子時，
     `flex:1 1 auto` 撐出來的高度與 `height:100%` 相同。 */
.ya-cd-pil__cell { display: flex; flex-direction: column; background: var(--ya-white); }
/* 編輯鈕與卡片的內距對齊，靠左不要被 stretch 拉滿整格寬 */
.ya-cd-pil__cell > .ya-cd-edit {
	align-self: flex-start;
	margin: 0 clamp(1.7rem, 3vw, 2.3rem) clamp(1.7rem, 3vw, 2.3rem);
}
.ya-cd-pil__card {
	position: relative;
	display: flex; flex-direction: column; gap: .7rem;
	flex: 1 1 auto;
	padding: clamp(1.7rem, 3vw, 2.3rem);
	background: var(--ya-white); color: var(--ya-ink);
	overflow: hidden;
	transition: transform .65s var(--ya-ease), box-shadow .65s;
}
.ya-cd-pil__cell:hover .ya-cd-pil__card {
	transform: translateY(-6px);
	box-shadow: var(--ya-cd-shadow);
}
/* 背景層：平常透明、hover 淡入。設計稿 opacity 0→.2、scale 1.14→1.06 */
.ya-cd-pil__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transform: scale(1.14);
	transition: opacity .7s, transform 1.2s var(--ya-ease);
	pointer-events: none;
}
.ya-cd-pil__cell:hover .ya-cd-pil__bg { opacity: .2; transform: scale(1.06); }
/* 右上圓形縮圖：平常可見、hover 放大退場 */
.ya-cd-pil__thumb {
	position: absolute; top: 1rem; right: 1rem;
	width: clamp(4.6rem, 7.5vw, 6rem); height: clamp(4.6rem, 7.5vw, 6rem);
	padding: .34rem;
	border: 1px solid rgba(31,78,107,.28);
	border-radius: 50%; background: var(--ya-white);
	box-sizing: border-box;
	opacity: 1; transform: scale(1);
	transition: opacity .55s var(--ya-ease), transform .8s var(--ya-ease);
	pointer-events: none;
}
.ya-cd-pil__thumb img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.ya-cd-pil__cell:hover .ya-cd-pil__thumb { opacity: 0; transform: scale(1.5) translate(6px, -6px); }
/* 左上角的兩條線 */
.ya-cd-pil__corner { position: absolute; top: 0; left: 0; background: var(--ya-ac); }
.ya-cd-pil__corner--h { width: 2.2rem; height: 1px; }
.ya-cd-pil__corner--v { width: 1px; height: 2.2rem; }

.ya-cd-pil__top { position: relative; display: flex; align-items: baseline; gap: .9rem; }
.ya-cd-pil__no {
	font-family: var(--ya-en); font-style: italic;
	font-size: .8rem; color: var(--ya-muted-2);
}
.ya-cd-pil__ico {
	font-size: 1.3rem; color: var(--ya-ac);
	transition: transform .55s var(--ya-ease);
}
.ya-cd-pil__cell:hover .ya-cd-pil__ico { transform: translateY(-3px) rotate(-6deg); }

.ya-cd-pil__titlebox {
	position: relative;
	display: inline-flex; flex-direction: column; gap: .5rem;
	align-self: flex-start; margin-top: .4rem;
}
.ya-cd-pil__title {
	font-family: var(--ya-serif); font-size: 1.5rem;
	letter-spacing: .16em; color: var(--ya-ink);
	transition: color .45s;
}
.ya-cd-pil__cell:hover .ya-cd-pil__title { color: var(--ya-ac); }
.ya-cd-pil__rule {
	display: block; width: 100%; height: 1px;
	background: var(--ya-ac);
	transform: scaleX(0); transform-origin: left;
	transition: transform .5s var(--ya-ease);
}
.ya-cd-pil__cell:hover .ya-cd-pil__rule { transform: scaleX(1); }

.ya-cd-pil__en {
	position: relative;
	font-family: var(--ya-en); font-style: italic;
	font-size: .76rem; letter-spacing: .2em; color: var(--ya-muted);
}
.ya-cd-pil__note {
	position: relative;
	margin-top: .4rem;
	font-size: .88rem; line-height: 2;
	color: var(--ya-body-2); text-wrap: pretty;
}
.ya-cd-pil__meta {
	position: relative;
	display: flex; align-items: center; gap: .7rem;
	margin-top: auto; padding-top: 1.2rem;
	font-size: .76rem; letter-spacing: .12em; color: var(--ya-cd-meta);
}
.ya-cd-pil__more {
	position: relative;
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .8rem; letter-spacing: .16em; color: var(--ya-ocean);
	transition: gap .45s;
}
.ya-cd-pil__more i { font-size: .78rem; }
.ya-cd-pil__cell:hover .ya-cd-pil__more { gap: 1rem; }


/* ==========================================================================
   6. 建築與庭園（mode 5；:270-292）
   ========================================================================== */
.ya-cd-gal { background: var(--ya-white); }
.ya-cd-gal .ya-cd-wrap {
	padding-top: clamp(3rem, 6vw, 4.6rem);
	padding-bottom: clamp(3rem, 6vw, 4.6rem);
}
.ya-cd-gal__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.4rem);
}
.ya-cd-gal__fig {
	margin: 0;
	display: flex; flex-direction: column; gap: .7rem;
	grid-column: span 1;
}
/* 🔴 第 1 張跨兩欄、16:9（設計稿 :288-289）。
   ⚠ .ya-cd-gal__grid 的第一個子元素必須就是第一張圖 —— 中間插別的元素會讓
     整組偏一位（F 段：房型踩過 .ya-rooms__list 那個坑）。 */
.ya-cd-gal__grid > .ya-cd-gal__fig:nth-child(1) { grid-column: span 2; }
.ya-cd-gal__grid > .ya-cd-gal__fig:nth-child(1) .ya-cd-gal__box { aspect-ratio: 16 / 9; }
.ya-cd-gal__box {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ya-line);
	background: var(--ya-mist);
}
.ya-cd-gal__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--ya-t-img) var(--ya-ease);
}
.ya-cd-gal__fig:hover .ya-cd-gal__img { transform: scale(1.06); }
/* 掃光：設計稿 skewX(-22deg)，translateX 0 → 560% */
.ya-cd-gal__shine {
	position: absolute; top: 0; left: -40%;
	width: 28%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
	transform: skewX(-22deg) translateX(0);
	opacity: 0;
	transition: opacity .18s;
	pointer-events: none;
}
.ya-cd-gal__fig:hover .ya-cd-gal__shine {
	opacity: 1;
	transform: skewX(-22deg) translateX(560%);
	transition: transform 1s cubic-bezier(.25,.6,.2,1), opacity .18s;
}
.ya-cd-gal__cap { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.ya-cd-gal__name {
	font-family: var(--ya-serif); font-size: .95rem;
	letter-spacing: .08em; color: var(--ya-ink);
}
.ya-cd-gal__note { font-size: .78rem; color: var(--ya-muted); text-wrap: pretty; }


/* ==========================================================================
   7. 來訪資訊（mode 6；:293-317）
   ========================================================================== */
.ya-cd-visit {
	width: 100vw; margin-left: calc(50% - 50vw);
	background: var(--ya-deep);
	color: rgba(255,255,255,.72);
	padding: clamp(3.2rem, 6vw, 4.8rem) 0;
}
.ya-cd-visit__grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.ya-cd-visit__en {
	margin: 0;
	font-family: var(--ya-en); font-style: italic;
	letter-spacing: .28em; font-size: .72rem;
	text-transform: uppercase; color: var(--ya-ac-soft);
}
.ya-cd-visit__zh {
	margin: .4rem 0 1.2rem;
	font-family: var(--ya-serif); font-weight: 400;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	letter-spacing: .1em; color: var(--ya-white);
}
.ya-cd-visit__zh .ya-accent { color: var(--ya-ac-soft); }
.ya-cd-visit__text > p {
	margin: 0; max-width: 42ch;
	font-size: .92rem; line-height: 2.05;
	color: rgba(255,255,255,.62); text-wrap: pretty;
}
.ya-cd-visit__text > p + p { margin-top: 1rem; }

.ya-cd-visit__btns { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.ya-cd-visit__btn {
	display: inline-flex; align-items: center; gap: .7rem;
	padding: .9rem 1.8rem;
	font-size: .86rem; letter-spacing: .16em;
	transition: background .4s, color .4s, gap .4s, border-color .4s;
}
.ya-cd-visit__btn i { font-size: .82rem; }
.ya-cd-visit__btn--solid { background: var(--ya-ac); color: var(--ya-white); }
.ya-cd-visit__btn--solid:hover { background: var(--ya-white); color: var(--ya-deep); gap: 1.1rem; }
.ya-cd-visit__btn--ghost { border: 1px solid rgba(255,255,255,.25); color: var(--ya-white); }
.ya-cd-visit__btn--ghost:hover { border-color: var(--ya-ac-soft); color: var(--ya-ac-soft); }
/* 設計稿：滑到電話按鈕時圖示會搖鈴 */
.ya-cd-visit__btn--ghost:hover i {
	display: inline-block; transform-origin: 50% 60%;
	animation: yaCdRing 1.1s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes yaCdRing {
	0%   { transform: rotate(0deg)   scale(1); }
	8%   { transform: rotate(-16deg) scale(1.12); }
	16%  { transform: rotate(14deg)  scale(1.12); }
	24%  { transform: rotate(-12deg) scale(1.1); }
	32%  { transform: rotate(10deg)  scale(1.1); }
	40%  { transform: rotate(-7deg)  scale(1.06); }
	48%  { transform: rotate(5deg)   scale(1.04); }
	56%  { transform: rotate(-3deg)  scale(1.02); }
	64%,100% { transform: rotate(0deg) scale(1); }
}

.ya-cd-visit__list { display: flex; flex-direction: column; gap: 1.1rem; }
.ya-cd-visit__row {
	position: relative;
	display: flex; gap: 1rem; align-items: flex-start;
	padding: 0 .6rem 1.1rem .6rem;
	border-bottom: 1px solid rgba(255,255,255,.12);
	color: var(--ya-white);
	transition: transform .5s var(--ya-ease), border-color .45s;
}
/* 設計稿：最後一列不畫底線（線由 hover 的 __rule 接手） */
.ya-cd-visit__row:last-child { border-bottom-color: transparent; }
.ya-cd-visit__row:hover { transform: translateX(4px); }
.ya-cd-visit__rule {
	position: absolute; left: 0; bottom: -1px;
	width: 100%; height: 1px; background: var(--ya-ac-soft);
	transform: scaleX(0); transform-origin: right;
	transition: transform .55s var(--ya-ease);
}
.ya-cd-visit__row:hover .ya-cd-visit__rule { transform: scaleX(1); transform-origin: left; }
.ya-cd-visit__ico {
	font-size: 1.05rem; line-height: 1.6; color: var(--ya-ac-soft);
	flex: 0 0 auto;
	transition: transform .5s var(--ya-ease);
}
.ya-cd-visit__row:hover .ya-cd-visit__ico { transform: translateY(-2px) scale(1.12); }
.ya-cd-visit__rowtext { display: flex; flex-direction: column; gap: .25rem; }
.ya-cd-visit__rowtitle {
	font-family: var(--ya-serif); font-size: .95rem;
	color: var(--ya-white); transition: color .4s;
}
.ya-cd-visit__row:hover .ya-cd-visit__rowtitle { color: var(--ya-ac-soft); }
.ya-cd-visit__rowsub { font-size: .82rem; color: rgba(255,255,255,.5); }
.ya-cd-visit__arrow {
	margin-left: auto; align-self: center;
	font-size: .76rem; color: var(--ya-ac-soft);
	opacity: 0; transform: translate(-5px, 5px);
	transition: opacity .45s, transform .55s var(--ya-ease);
}
.ya-cd-visit__row:hover .ya-cd-visit__arrow { opacity: 1; transform: translate(0, 0); }


/* ==========================================================================
   8. 後台管理列（只有有權限的人看得到；設計稿沒有這一塊）
   ========================================================================== */
.ya-cd-admin {
	max-width: var(--ya-wrap); margin: 0 auto;
	padding: .8rem clamp(1.5rem, 5vw, 3rem);
	display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
	font-size: .82rem;
}
.ya-cd-unused {
	padding-top: 2rem; padding-bottom: 2rem;
	color: var(--ya-body-2); font-size: .88rem; line-height: 1.9;
}
.ya-cd-item.is-off { opacity: .55; }


/* ==========================================================================
   9. 響應式（斷點只有一個：1100px —— 全站統一）
   ========================================================================== */
@media (max-width: 1100px) {
	.ya-cd-pil__grid   { grid-template-columns: 1fr; }
	.ya-cd-gal__grid   { grid-template-columns: 1fr; }
	/* 單欄之後第一張不再需要跨欄，比例也回到 4:3 統一 */
	.ya-cd-gal__grid > .ya-cd-gal__fig:nth-child(1) { grid-column: span 1; }
	.ya-cd-gal__grid > .ya-cd-gal__fig:nth-child(1) .ya-cd-gal__box { aspect-ratio: 4 / 3; }
	.ya-cd-visit__grid { grid-template-columns: 1fr; }
	.ya-cd-story__pics { grid-template-columns: 1fr; }
	.ya-cd-band        { height: clamp(260px, 40vh, 360px); }
}


/* ==========================================================================
   10. 列印（移植原則 5：隱藏裝飾與互動元素）
   ========================================================================== */
@media print {
	.ya-cd-band__veil,
	.ya-cd-gal__shine,
	.ya-cd-pil__bg,
	.ya-cd-pil__thumb,
	.ya-cd-edit,
	.ya-cd-ph,
	.ya-cd-admin { display: none !important; }
	.ya-cd-band  { height: auto; }
	.ya-cd-visit { background: none; color: #000; }
	.ya-cd-js [data-cd-reveal] { opacity: 1 !important; transform: none !important; }
}