@charset "utf-8";
/* ============================================================================
   我方自己的前台元件樣式（§3-82，2026-08-05 起）
   ----------------------------------------------------------------------------
   🔴 **為什麼另開一個檔，而不是加進 `page.css`／`com.css`**
   那些是**設計方交付檔**。我方樣式混進去之後，下一次設計交付要做三方合併時
   分不清「這一段是誰改的」——`feedback_external_delivery_versioning` 那條紀律
   （挑邊前先查 base）就沒得查了。
   ⚠ §3-81 曾把兩段我方樣式寫進 `page.css`，本批搬出來，`page.css` 回到交付原樣。

   🔴 **只在需要的頁面載入**（`{block name="head_extra"}`），不進全站 layout ——
   目前只有失物招领用得到，掛全站等於每一頁都多下載一次。

   命名：一律 `lf-*`（lost&found）這種帶前綴的具名 class，不用通用字眼
   （`.table` / `.tabs` 之類會與設計稿或日後交付撞名）。
   ============================================================================ */

/* ── 頁首說明卡（認領辦法）────────────────────────────────────────────
   「醒目但安靜」：左側一道實色邊 ＋ 極淡底，不用整片色塊也不用圖示。
   色值取自站上既有的深綠 `#0a5a3c`（`.txtList .icon` 用的同一個），不新造色。 */
.lf-notice {
	border-left:4px solid #0a5a3c;
	background:#f4f8f4;
	border-radius:0 8px 8px 0;
	padding:14px 18px;
	margin:0 0 24px;
}
.lf-notice strong {
	display:block;
	font-size:1.7em;
	color:#0a5a3c;
	margin-bottom:4px;
}
.lf-notice p {
	font-size:1.5em;
	line-height:1.7;
	color:#555;
}

/* ── 狀態頁籤 ──────────────────────────────────────────────────────── */
.lf-tabs {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 14px;
}
.lf-tab {
	display:inline-block;
	padding:6px 18px;
	font-size:1.5em;
	line-height:1.9;
	color:#555;
	background:#f0efe9;
	border-radius:999px;
	transition:all .3s ease;
}
.lf-tab:hover,
.lf-tab:focus {
	background:#e0ded2;
	color:#0a5a3c;
}
.lf-tab.is-on {
	background:#0a5a3c;
	color:#fff;
}

/* ── 登記簿表格 ────────────────────────────────────────────────────
   🔴 前台**沒有表格樣式先例**（實測：`page.css` 只有 `.pageWord table`，那是正文內嵌表）。
   ⇒ 以後台 `acm.css` 的 `.table-dark-head` 視覺語言為參照落一份前台版：
     深色表頭列、細分隔線、hover 整列淡底。字級與圓角改用前台的尺度。 */
.lf-table-wrap {
	width:100%;
	margin:0 0 10px;
}
.lf-table {
	width:100%;
	border-collapse:collapse;
	table-layout:auto;
}
.lf-table thead th {
	background:#0a5a3c;
	color:#e8f1ea;
	font-size:1.4em;
	font-weight:600;
	text-align:left;
	padding:10px 14px;
	white-space:nowrap;
}
.lf-table thead th:first-child { border-radius:8px 0 0 0; }
.lf-table thead th:last-child  { border-radius:0 8px 0 0; }
.lf-table tbody td {
	padding:12px 14px;
	border-bottom:1px solid #e4e2d8;
	vertical-align:middle;
	font-size:1.5em;
	line-height:1.6;
	color:#444;
}
.lf-row { cursor:pointer; transition:background-color .25s ease; }
.lf-row:hover,
.lf-row:focus-within { background-color:#e9f4ea; }

.lf-col-date   { width:130px; white-space:nowrap; color:#666; }
.lf-col-place  { width:180px; }
.lf-col-status { width:150px; white-space:nowrap; }

/* 物品格：縮圖 ＋ 名稱 ＋ 一句灰字描述 */
.lf-item { display:flex; align-items:center; gap:12px; }
.lf-name {
	display:block;
	font-weight:bold;
	color:#333;
	font-size:1.08em;
}
.lf-row:hover .lf-name { color:#0e872a; }
.lf-desc {
	display:block;
	color:#8a8a8a;
	font-size:0.92em;
	line-height:1.5;
}

/* 🔴 縮圖：**沒有照片就是沒有照片** —— 本頁禁用 nopic／品牌占位圖。
   登記簿裡每一列都掛同一張占位圖是噪音，而且會讓「哪幾件真的有照片」看不出來。
   無照片時仍保留同尺寸的空槽，讓每一列的名稱對齊（`is-empty` 不畫任何東西）。 */
.lf-thumb {
	flex:0 0 auto;
	width:56px;
	height:56px;
	border-radius:6px;
	overflow:hidden;
	display:block;
	background:#efeee8;
}
.lf-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lf-thumb.is-empty { background:transparent; }

/* 狀態徽章。⚠ 沿用站上既有的深綠／灰，不新造色。 */
.lf-badge {
	display:inline-block;
	padding:2px 12px;
	font-size:0.92em;
	line-height:1.8;
	border-radius:999px;
	white-space:nowrap;
	color:#fff;
	background:#0a5a3c;
}
.lf-badge.is-claimed { background:#8c8878; }

/* 已認領：整列降飽和，讓「還能不能領」一眼看得出來。
   ⚠ hover 仍照常（它還是點得進去的，只是不那麼顯眼）。 */
.lf-row.is-claimed { opacity:.58; }
.lf-row.is-claimed .lf-thumb img { filter:grayscale(1); }
.lf-row.is-claimed:hover { opacity:.85; }

/* ── 窄屏：一件兩行，**不橫向捲動** ────────────────────────────────
   第一行＝拾獲日期 ＋ 狀態；第二行＝物品 ＋ 拾獲地點。
   ⚠ 用 grid-template-areas 而不是隱藏欄位：資訊一個都不能少，只是換排法。 */
@media screen and (max-width:768px) {
	.lf-table, .lf-table tbody, .lf-table tr, .lf-table td { display:block; width:100%; }
	.lf-table thead { display:none; }
	.lf-table tbody tr {
		display:grid;
		grid-template-columns:1fr auto;
		grid-template-areas:
			"date  status"
			"item  place";
		gap:4px 10px;
		align-items:center;
		padding:12px 6px;
		border-bottom:1px solid #e4e2d8;
	}
	.lf-table tbody td { border-bottom:none; padding:0; }
	.lf-table tbody td.lf-col-date   { grid-area:date; }
	.lf-table tbody td.lf-col-status { grid-area:status; text-align:right; }
	.lf-table tbody td.lf-col-item   { grid-area:item; }
	.lf-table tbody td.lf-col-place  { grid-area:place; text-align:right; color:#777; font-size:.92em; }
	.lf-col-date, .lf-col-place, .lf-col-status { width:auto; }
	.lf-thumb { width:48px; height:48px; }
}

/* ⚠ 這裡原本有 `.lf-daterange` / `.lf-date-input` 兩條「補間距」的規則，2026-08-05 業主截圖
   回報日期欄跑位，查出來就是它們：設計稿的 `.dayBox` 是**剛好塞滿**的計算
   （`.dayInput` 各 `calc(50% - 15px)` ＋ `.inTx` 30px ＝ 正好 100%），
   在同一個元素上疊一個 `gap:8px` 就多出 16px ⇒ 擠爆換行。
   📌 **通則：設計稿的容器已經有自己的盒模型計算，別在它身上再疊我方 class。**
   我方 class 要用就用在**自己新造的元素**上（`.lf-table` / `.lf-notice` / `.lf-tabs` 都是）。
   守門＝`LostFoundPiiTest::testDateRangeMarkupMatchesGallery`。 */


/* ── 桃源好禮商品牆（§3-116 重排；起於 §3-89）──────────────────────
   🔴 **為什麼不再沿用 `page.css` 的 `picList` 內層 class**
   那組規則全部綁死在 `a` 底下：`.picList ul li a .picBox`／`… a .photo`／`… a .icon`。
   好禮**沒有購買連結時整張卡是 `<div>`** ⇒ 一條都不套用 ⇒
   `.photo` 的 `padding-bottom:66.7%` 沒了、盒子塌成 0 高 ⇒
   圖片存在、`/media/…` 回 200、`<span>` 也印出來了，**畫面上就是沒有圖**。
   （記憶 `feedback_backend_ui_conventions` 的「選擇器綁死位置」第三次應驗。）
   ⇒ 自造 `.goods-*` 內層 class，`a` 與 `div` 兩種外殼共用同一組樣式；
     `a` 才有的只有 hover 放大（＝「這張點得動」的視覺提示）。

   視覺語言對齊 HP02 首頁的好禮輪播卡（`taoyuan.css` 的 `.product-*`）：
   1:1 封面置頂／黑色膠囊分類標籤壓在左上／名稱／價格。
   ⚠ 輪播卡的 `.product-body` 預設 `opacity:0`（滑過才浮出）——**那是輪播專屬**，
     列表頁照抄會變成「整片商品只有圖沒有字」。這裡不抄。

   欄數＝**容器寬度**驅動（`auto-fill` + `minmax`），不是視窗寬度驅動。
   🔴 這一頁左邊有 200~280px 的分類側欄，視窗寬 ≠ 內容寬：
     視窗 1024 時內容區只有 ~734px，用視窗斷點判就會排成 3 欄、每欄 224px（太窄）。
   實算（gap 25px、最小卡寬 260px）：
     手機 350px→1 欄／平板 708px→2／1024 視窗 734px→2／1280 視窗 950px→3／
     1440 視窗 1110px→3／1920 視窗 1360px→4。正好是「桌機 3~4、平板 2、手機 1」。
   ⚠ `minmax(min(260px,100%),1fr)` 的 `min()` 是防橫捲：容器比 260px 還窄時
     （超窄機／側欄佔位異常）卡片跟著縮，而不是把版面撐出水平捲軸。 */
.picList.goods-list ul {
	display:grid;
	/* 最小卡寬 290px：實算讓 1280 視窗（內容區 ~950px）剛好排得下 3 欄。
	   ⚠ 上限另外用一條寬螢幕媒體查詢壓成 3 欄（見下），否則 1920 會排到 4。 */
	grid-template-columns:repeat(auto-fill, minmax(min(290px, 100%), 1fr));
	/* 間距取 picList 階梯的**大一級**（35/25 → 40/30），配合 4→3 欄讓版面鬆下來 */
	gap:40px 30px;
}
/* 🔴 桌機封頂 3 欄（業主要的「鬆」）。
   ⚠ 這一條**刻意用視窗寬**而不是容器寬：它只在寬螢幕生效，
     而這一頁在 ≥1600 時側欄一定在（280px），內容區 ≥1220px ⇒ 3 欄每格 ~387px，安全。
     窄端仍由上面的 auto-fill 負責，所以「視窗寬 ≠ 內容寬」那個坑碰不到（§3-116 五）。 */
@media screen and (min-width:1600px) {
	.picList.goods-list ul {
		grid-template-columns:repeat(3, 1fr);
	}
}
/* 設計稿在 `li` 上寫死了 flex 用的 `width:calc(...)`，在 grid 裡會壓成固定寬 */
.picList.goods-list ul li {
	width:auto;
}
/* 卡片本體：基因取自首頁輪播卡 `.product-card`（padding 20 ／ 圓角 20 ／
   hover 上浮 6px ＋ 淡金底）。⚠ 輪播卡的 `.product-body` 預設 `opacity:0`
   （滑過才浮出）**不抄** —— 列表頁照抄會變成「整片只有圖沒有字」。 */
.picList.goods-list .goods-card {
	position:relative;
	display:flex;
	flex-direction:column;
	width:100%;
	padding:20px;
	box-sizing:border-box;
	border-radius:20px;
	color:inherit;
	text-decoration:none;
	background:transparent;
	transition:all .4s ease;
}
/* 🔴 §3-120：hover／focus **兩態共用**，選擇器不再綁 `a`。
   改之前寫成 `a.goods-card:hover` —— 理由是「沒有購買連結的卡點不動，
   位移是『可以點』的訊號，給了會騙人」。**那個理由 2026-08-11 之後不成立**：
   沒連結的卡現在點了會彈站內資訊浮層，它就是可以點的。
   ⚠ 這是「綁死位置」那條坑的同一形狀（CLAUDE.md 記已三次）——
     差別只在這次不是漏掉，是前提被業主的決定改掉了。 */
.picList.goods-list .goods-card:hover,
.picList.goods-list .goods-card:focus {
	transform:translateY(-6px);
	background-color:var(--gold-pale);
}
.picList.goods-list .goods-card-static:focus {
	outline:2px solid var(--gold, #b8935a);
	outline-offset:2px;
}
.picList.goods-list .goods-photo {
	position:relative;
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
	border-radius:20px;
	background-color:#f2f2f2;
}
/* 🔴 `object-fit:cover` ＝ 等比裁切，與輪播卡 `.product-img` 同一種做法。
   高低不齊的原圖不會再把行高撐亂（那是本批「圖固定比例裁切」要的）。 */
.picList.goods-list .goods-img {
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	transition:transform .6s ease;
}
.picList.goods-list .goods-card:hover .goods-img,
.picList.goods-list .goods-card:focus .goods-img {
	transform:scale(1.06);
}
/* 分類標籤：位置／字級／字距／圓角全部照輪播卡 `.product-badge`，
   只把字級縮一階（列表卡比輪播卡小）。 */
.picList.goods-list .goods-cat {
	position:absolute;
	top:16px;
	left:16px;
	z-index:1;
	display:inline-block;
	background:#000;
	color:#fff;
	font-size:1.1em;
	font-weight:500;
	font-style:italic;
	letter-spacing:.15em;
	padding:6px 10px;
	border-radius:99px;
}
.picList.goods-list .goods-body {
	display:flex;
	flex-direction:column;
	padding:20px 0 0;
}
/* 名稱：字級與行高照輪播卡 `.product-name`（2em / 1.4 / bold / var(--text-dark)） */
.picList.goods-list .goods-name {
	color:var(--text-dark);
	font-size:2.3em;
	font-weight:bold;
	line-height:1.4;
}
/* 🔴 摘要與名稱／價格**拉開層級**：字級小一階、行高鬆、顏色退一階。
   最多兩行截斷 —— service 已截到 ~50 字，這一層是版面保險
   （業主換成長文案時不會把某一張卡撐得比別人高）。
   ⚠ 沒有摘要時模板整行不印（不是印一個空的 `<p>`），所以這裡不必留保底高度。 */
.picList.goods-list .goods-desc {
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-top:8px;
	color:#7a7a7a;
	font-size:1.8em;
	font-weight:400;
	line-height:1.8;
}
/* 價格：現價粗體 ＋ 原價刪除線，色值照輪播卡 `.product-price`（var(--red-deep)） */
.picList.goods-list .goods-price {
	margin-top:10px;
	color:var(--red-deep);
	font-size:2.1em;
	font-weight:bold;
	line-height:1.3;
}
.picList.goods-list .goods-price del {
	color:#a9a9a9;
	font-weight:400;
	font-size:.75em;
	margin-left:.6em;
}
.picList.goods-list .goods-en {
	margin-top:2px;
	font-size:1.3em;
}
.picList .goods-en {
	color:#8a8a8a;
	font-size:.86em;
	font-weight:400;
	line-height:1.5;
}
.picList .goods-desc {
	color:#666;
	font-size:.9em;
	font-weight:400;
	line-height:1.6;
}
.picList .goods-price {
	color:#0a5a3c;
	font-weight:bold;
	font-size:1.05em;
}
.picList .goods-price del {
	color:#a9a9a9;
	font-weight:400;
	font-size:.85em;
	margin-left:.5em;
}
/* 沒有購買連結的商品：整張卡不是連結。版型與 `a` 版**完全一樣**（共用 `.goods-card`），
   差別只有「滑過去圖不會放大」＝「這張點不動」的視覺提示。
   ⚠ §3-116 前這支曾經是唯一的靜態卡樣式，但它只複製了外層 flex、
     沒有複製 `a` 底下的 `.picBox/.photo/.img` ⇒ 圖片區塌成 0 高（見上方方框）。 */
.picList .goods-card-static {
	cursor:default;
}

/* ⚠⚠ 【§3-133，2026-08-11：本整段已**停用**，沒有任何元素掛 `fs-bar` 了】⚠⚠
   業主並排比對設計稿後拍板「**完全回設計稿**」⇒ `_search_bar.html` 拿掉了那個 class，
   搜尋列回到 `com.css` 的原生樣式（灰底塊 ＋ 深灰標籤 ＋ 灰色「查询」鈕）。
   🔴 **刻意不刪這一段**：底下的註解記錄了「當初為什麼要換皮」的完整推理，
     而那個推理本身沒有錯（只是業主的取捨不同）。哪天要回復，掛回 class 即可。
   ⚠ 守門 `FrontListFamilyTest` 現在**禁止**再掛 `fs-bar` —— 要改回去請先問業主。
   ──────────────────────────────────────────────────────────────────

   ── 前台搜尋列（§3-118）·具名家族 `fs-*` ────────────────────────────
   四頁共用：`/goods`／`/gallery`／`/lost-found`／多級多筆列表（`node/skin_list`）。
   markup 在 `app/front/view/layout/layout/_search_bar.html`（**行為零變更**：
   參數名、條件留存、零狀態措辭一個字沒動，這一段純表現層）。

   🔴 **為什麼要換皮（不是「覺得醜」）**
   設計稿的 `#searchCriteria` 是一套**通用**元件：灰底塊 `#eceeed`、深灰方塊標籤
   `#666`、灰按鈕 `#666`、focus 橘 `#F06400`。那組色**不屬於世外桃源**——
   §3-117 才把商品卡拉到「墨綠 ＋ 金 ＋ 黑膠囊」的語彙，搜尋列還穿通用灰
   ⇒ 同一頁上下兩塊看起來像兩個設計師做的。
   ⚠ 這一頁**沒有專屬設計稿**（`PENDING_DESIGN`），所以是**從既有 token 自組**：
     墨綠 `#0a5a3c`（`page.css` 全站主色）／卡片圓角 20px（§3-117）／
     細邊線取自表格分隔線 `#e4e2d8` 的同一階。同 404 頁那次的自組註記慣例。

   🔴 **改在我方檔、不動交付檔**：`com.css` 是設計方交付檔，我方樣式混進去之後
   下一次交付要做三方合併就分不清哪一段是誰改的（`feedback_external_delivery_versioning`）。

   ⚠ **`.dayBox` / `.dayInput` / `.keyGroup` 的盒模型一個字不准改**（§3-82 的學費：
     設計稿那一塊是「剛好塞滿」的計算，多一個 `gap` 就擠爆換行）。
     這裡只動**顏色／邊線／圓角**，不動寬度與 padding。 */

#searchCriteria.fs-bar {
	background:transparent;
	padding:0;
	margin:0 auto 26px;
	text-align:left;
}
#searchCriteria.fs-bar .searchform {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px;
	margin:0;
}
/* 設計稿用 `.sbox.sb1_5`（50% 寬）把欄位切格；輕量橫列改成「附件各佔自己的寬、
   關鍵詞吃剩下的」。⚠ 覆寫一律寫成 `#searchCriteria.fs-bar X`：`com.css` 那組是 `#searchCriteria .x`（帶 id），
   只寫 `.fs-bar .x`（兩個 class）**特異度輸給它** ⇒ 按鈕還是灰的、輸入框沒有邊線。
   本批第一版就是這樣，截圖才看得出來（改了等於沒改，坑表 A 家族）。 */
#searchCriteria.fs-bar .sbox {
	width:auto;
	margin:0;
	flex:0 0 auto;
}
/* 🔴 日期／年月那一格要給**明確的寬**：`.dayBox` 是 `width:100%`，
   父層設成 `width:auto` 之後它會塌成內容寬 ⇒ 兩個 `calc(50% - 15px)` 的輸入框
   各剩幾十 px，`YYYY-MM-DD` 被截成「YYYY-」（實測截圖看得見）。
   ⚠ 只給外層 flex basis，`.dayBox`／`.dayInput` 自己的計算一個字不動（§3-82）。 */
#searchCriteria.fs-bar .sbox:has(.dayBox) {
	flex:0 1 360px;
	min-width:320px;
}
#searchCriteria.fs-bar .sbox.fs-grow {
	flex:1 1 260px;
	min-width:0;
}
#searchCriteria.fs-bar .keyGroup {
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:10px;
}
/* 🔴 「关键词」那顆深灰方塊**視覺取消、語意保留**：
   placeholder 已經說明用途，方塊標籤是後台工具語言的冗餘。
   ⚠ 不是把 `<label>` 從 markup 拿掉 —— 那會讓螢幕閱讀器失去欄位名稱。
     設計稿自己在窄屏就是這麼做的（com.css 1207 行），這裡把它套到所有寬度。 */
#searchCriteria.fs-bar .keyGroup .firstTx,
#searchCriteria.fs-bar .dayGroup > .firstTx {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
	background:transparent;
	min-height:0;
}
/* 輸入框：細邊線 ＋ 卡片圓角 ＋ 灰字 placeholder */
#searchCriteria.fs-bar .search-query {
	width:100%;
	margin-right:0;
	border:1px solid #d9ddd6;
	border-radius:20px;
	padding:0 18px;
	background:#fff;
	transition:border-color .3s ease, box-shadow .3s ease;
}
#searchCriteria.fs-bar .search-query::placeholder { color:#9b9b9b; }
#searchCriteria.fs-bar .search-query:focus {
	color:#3c3c3c;
	border-color:#0a5a3c;
	box-shadow:0 0 0 3px rgba(10, 90, 60, .12);
	outline:none;
}
/* 下拉：與輸入框同一套邊線與圓角，focus 也走墨綠（設計稿是橘色） */
#searchCriteria.fs-bar .listBar {
	border:1px solid #d9ddd6;
	border-radius:20px;
	padding:0 34px 0 18px;
	min-width:150px;
	transition:border-color .3s ease, box-shadow .3s ease;
}
#searchCriteria.fs-bar .firstTx + .listBar { border-left:1px solid #d9ddd6; }
#searchCriteria.fs-bar .listBar:focus {
	color:#3c3c3c;
	border:1px solid #0a5a3c;
	box-shadow:0 0 0 3px rgba(10, 90, 60, .12);
	outline:none;
}
#searchCriteria.fs-bar .keyGroup .listBar { margin-right:0; }
/* 🔴 年月那兩顆下拉住在 `.dayInput` 裡，左邊壓著一顆 45px 的日曆圖示（設計稿的絕對定位）。
   上面那條把左 padding 統一成 18px 會讓「不限年份」四個字**鑽到圖示底下**（實測截圖看得見）。
   ⇒ 這裡把左 padding 還原成 45px。⚠ 只還原 padding，圓角與邊線仍走我方那一套。 */
#searchCriteria.fs-bar .dayInput .listBar { padding-left:45px; }
/* 日期輸入（失物招領用）：同一套外觀。⚠ 只動顏色/邊線/圓角，寬度照設計稿 */
#searchCriteria.fs-bar .dayInput input {
	border:1px solid #d9ddd6;
	border-radius:20px;
	background:#fff;
}
#searchCriteria.fs-bar span + .dayInput input { border-radius:20px; }
#searchCriteria.fs-bar .dayInput input:focus {
	color:#3c3c3c;
	border-color:#0a5a3c;
	box-shadow:0 0 0 3px rgba(10, 90, 60, .12);
	outline:none;
}
/* 🔴 標籤 sr-only 之後要把它佔的位置**還回來**：
   設計稿寫 `.dayBox { width: calc(100% - 100px) }`，那 100px 是留給
   `.firstTx` 那顆深灰方塊的。方塊視覺取消了、寬度卻還扣著
   ⇒ 兩個 `calc(50% - 15px)` 的輸入框各剩 110px，`YYYY-MM-DD` 被截成「YYYY-M」。
   ⚠ 一路是量出來的不是看出來的：sbox 360 → dayBox **250** → input 110（§10.5）。
   ⚠ 只改 `.dayBox` 這一層的寬與外框；`.dayInput` 的 `calc(50% - 15px)` 一個字不動（§3-82）。 */
#searchCriteria.fs-bar .dayGroup .dayBox {
	width:100%;
	border:none;
	background:transparent;
	border-radius:0;
}
/* 主按鈕：墨綠，與前台其他實心按鈕同色；不換行、不被壓扁 */
#searchCriteria.fs-bar .search-btn {
	flex:0 0 auto;
	width:auto;
	min-width:104px;
	padding:0 22px;
	background:#0a5a3c;
	border-radius:20px;
}
#searchCriteria.fs-bar .search-btn:hover,
#searchCriteria.fs-bar .search-btn:focus {
	background:#0d7350;
}
#searchCriteria.fs-bar .search-btn em { font-size:1.5em; letter-spacing:.08em; }

/* 窄屏：輸入框整條滿寬另起一列，按鈕**不擠壓**（維持可點面積） */
@media screen and (max-width:640px) {
	#searchCriteria.fs-bar .searchform { gap:10px; }
	#searchCriteria.fs-bar .sbox,
	#searchCriteria.fs-bar .sbox.fs-grow { flex:1 1 100%; width:100%; }
	#searchCriteria.fs-bar .listBar { width:100%; }
	#searchCriteria.fs-bar .search-btn { min-width:92px; padding:0 16px; }
}

/* ── §3-119 好禮列表「氣質批」·純表現層 ──────────────────────────────
   目標＝從「合格」到「被設計過」。四件事：搜尋框降權／頁首補氣息／
   卡片圖的融合感／微節奏。**零新色、零新素材** —— 全部從既有 token 取。 */

/* ① 頁首副標：調性對齊首頁區塊的 `.section-label`（「入山水之境 · 享桃源之雅」）。
   ⚠ 底圖是深色照片，所以走米金 `#e6c8a0`（`.mianTitle p[lang=en]` 用的同一個），
     不新造色；字重與字距放鬆，讓它讀起來是「一句話」不是「第二個標題」。 */
.mianTitle .fs-header-sub {
	color:#e6c8a0;
	font-size:clamp(1rem, 1.15vw, 1.35rem);
	font-weight:300;
	letter-spacing:.28em;
	opacity:.92;
	margin-top:-.6rem;
}
/* ⚠ 窄屏把字距收回來：`.28em` 在 390px 下會把這一句撐得比版心寬，
   而 `.mianTitle` 是置中的 ⇒ **頭尾各被裁掉一個字**（實測手機截圖「一」不見了）。
   ⚠ 不是縮字級就好 —— 病灶是字距，字級縮了字距照樣撐。 */
@media screen and (max-width:768px) {
	.mianTitle .fs-header-sub {
		letter-spacing:.12em;
		font-size:1.05rem;
		padding:0 12px;
		box-sizing:border-box;
	}
}

/* ② 搜尋框降權：通欄 → 右上緊湊型（約 1/3 寬）。
   🔴 **工具退到工具的位置，商品才是第一眼**。
   ⚠ 不另造第二套 markup —— `_search_bar` 加一個 `compact` 參數，只多掛一個 class。 */
.fs-toolrow {
	display:flex;
	justify-content:flex-end;
	margin:0 0 26px;
	/* 🔴 讓開右側那條 fixed 的浮動工具列 `#asideNav`（咨询电话／活动预告／在线购票／TOP）。
	   實測它**貼在視窗右緣、寬 110px**，而版心右緣就在視窗右緣附近
	   ⇒ 靠右的搜尋鈕會整顆落在它底下、**按不到**（截圖與座標都驗過：鈕 1374~1406、
	     浮動列 1330~1440）。⚠ 商品卡被蓋到一點是站上既有狀況（首頁也一樣），
	     但**可點的東西不能被蓋** ⇒ 只讓這一列讓開。
	   ⚠ 120 > 實測的 110，留一點餘裕；窄屏（≤640）浮動列會收起，不必讓。 */
	padding-right:120px;
}
#searchCriteria.fs-bar.fs-compact {
	width:min(360px, 100%);
	margin:0;
}
#searchCriteria.fs-bar.fs-compact .search-query {
	height:40px;
	line-height:40px;
	font-size:1.35em;
	padding:0 14px;
}
/* 🔴 按鈕**內嵌在輸入框右內側**，不掛在框外。
   兩個理由：① 站上右側有一條 fixed 的浮動客服列（咨询电话／在线购票／TOP，約 80px），
   框外的按鈕靠右之後**整顆被蓋在它底下**（實測截圖，按不到）；
   ② 內嵌本來就比外掛緊湊，符合這一批「工具退到工具的位置」。
   ⚠ 放大鏡圖示是 `span::before/after` 用白色 border 畫的 ⇒ 底仍要是墨綠實心圓，
     不能把按鈕改成透明底（那樣圖示會消失，白的畫在白的上面）。 */
#searchCriteria.fs-bar.fs-compact .keyGroup { position:relative; }
#searchCriteria.fs-bar.fs-compact .search-query { padding-right:52px; }
#searchCriteria.fs-bar.fs-compact .search-btn {
	position:absolute;
	right:4px;
	top:50%;
	transform:translateY(-50%);
	width:32px;
	height:32px;
	min-width:0;
	padding:0;
	border-radius:50%;
}
/* 窄屏：緊湊型再展開成滿寬（手機上 360px 靠右反而難點） */
@media screen and (max-width:640px) {
	.fs-toolrow { margin-bottom:20px; padding-right:0; }
	/* 窄屏只把框拉滿寬，按鈕**維持內嵌**（滿寬 + 右內側圓鈕最好按） */
	#searchCriteria.fs-bar.fs-compact { width:100%; }
}

/* ③ 卡片圖的融合感 —— **方案 a**：淺米襯底 ＋ 內縮 padding。
   商品照從「貼在框裡」變成「擺在紙上」。
   🔴 為什麼先試 a 就停：這批九張商品照的**底色本來就各不相同**
     （深綠木桌／白底／淡紫／淡綠…），所以真正的違和感來自「每張自帶一塊不同的底」。
     給一個統一的米色襯墊之後，那些底色變成「紙上的照片」而不是「卡片的背景」，
     成本＝兩個屬性，效果當場成立 ⇒ **不必進到 b（漸層／紋理）**。
   ⚠ b／c 的判斷留在 canonical §3-119，不在這裡重述。
   ⚠ 米色取 `home.css` 既有的 `#faf6ed`（首頁區塊底色），**不新造**。 */
/* 緊湊型只留放大鏡：「搜索」兩個字塞不進 32px 圓鈕。
   ⚠ 文字用 sr-only **藏起來**，不從 markup 拿掉 —— 螢幕閱讀器仍讀得到按鈕在做什麼
     （按鈕本身另有 `aria-label="送出搜寻"`，兩者都留）。 */
#searchCriteria.fs-bar.fs-compact .search-btn em {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
}
#searchCriteria.fs-bar.fs-compact .search-btn span { margin:0 auto; }

.picList.goods-list .goods-photo {
	padding:16px;
	box-sizing:border-box;
	background-color:#faf6ed;
}
.picList.goods-list .goods-img {
	border-radius:12px;
}
/* 標籤改壓在**襯墊的角上**（不是壓在照片上）：襯墊有內縮之後，
   原本 16px 的位置會剛好落在照片邊界，看起來像沒對齊。 */
.picList.goods-list .goods-cat {
	top:10px;
	left:10px;
	/* ④ 字級縮半階：1.1em 略搶戲，商品名才該是第一眼 */
	font-size:.95em;
	letter-spacing:.12em;
	padding:5px 12px;
}

/* ④ 微節奏：hover 上浮 ＋ 陰影加深。
   ⚠ 陰影走既有 token `--shadow`（`layout.css`），零新發明；
     `translateY(-6px)` 是首頁輪播卡 `.product-card:hover` 的同一個值。 */
.picList.goods-list .goods-card {
	box-shadow:0 0 0 0 rgba(60, 50, 30, 0);
}
/* §3-120：兩態同一組回饋（都可點）。原本 static 那條「只動陰影不動位移」
   的特例**已撤除** —— 它存在的前提是「沒連結的卡點不動」，而那不再是事實。 */
.picList.goods-list .goods-card:hover,
.picList.goods-list .goods-card:focus {
	box-shadow:var(--shadow-box);
}
/* ⑥ §3-120 資訊浮層（無外連態）。
   🔴 外框、遮罩、關閉鈕、Esc／點外面關閉**全部是 PhotoSwipe 的**（photoswipe.min.css）——
      這裡只畫面板「裡面」那一塊，不另造一套 modal 框架。 */
/* 🔴 **兩層**是為了對付 PhotoSwipe 的固定尺寸容器（`.pswp__zoom-wrap`，依 JS 宣告的
   900×640 算出來）。它會把 content 元素拉成滿高 —— 實測 modal／figure／body
   computed height 全是 640，而內容只需要約 380 ⇒ 白底右半一大片空白。
   `height:auto` 對抗不了（PhotoSwipe 贏在特異度）⇒ 改成：
     · 外層 `.goods-modal` 照樣被拉滿，但**透明**（看不出來），只負責置中
     · 白底、圓角、內容都在內層 `.goods-modal-panel`，高度由內容決定
   ⚠ 這是「只有肉眼看得出來」的那一類：DOM 在、字都對、browser 測試也綠
     （斷言的是「可見且 > 200px」）——**截圖才看得見**。
     `render:view` 更是證不了：它的 view_path 指向 `app/manage/view/`，渲不到前台。 */
.goods-modal {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}
.goods-modal-panel {
	display:flex;
	flex-direction:column;
	width:100%;
	max-width:900px;
	max-height:100%;
	overflow-y:auto;
	background:#fff;
	border-radius:20px;
}
@media (min-width:768px) {
	.goods-modal-panel {
		flex-direction:row;
	}
}
.goods-modal-figure {
	flex:0 0 auto;
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
	border-radius:20px 20px 0 0;
	background-color:#f2f2f2;
}
@media (min-width:768px) {
	.goods-modal-figure {
		width:380px;
		border-radius:20px 0 0 20px;
	}
}
/* 面板高度由「圖」與「內容」較高者決定；圖保持 1:1 不被另一欄拉長 */
.goods-modal-panel > .goods-modal-figure {
	align-self:flex-start;
}
.goods-modal-figure img {
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}
.goods-modal-body {
	flex:1 1 auto;
	padding:28px 30px;
	min-width:0;
}
.goods-modal-title {
	margin:0 0 4px;
	font-size:1.7em;
	font-weight:600;
	line-height:1.35;
}
.goods-modal-en {
	margin:0 0 16px;
	color:#8a8a8a;
	font-size:1.05em;
	font-style:italic;
}
.goods-modal-row {
	margin:0 0 8px;
	font-size:1.1em;
}
.goods-modal-key {
	display:inline-block;
	min-width:4.5em;
	color:#8a8a8a;
}
.goods-modal-val {
	color:inherit;
}
.goods-modal-desc {
	margin:18px 0 0;
	line-height:1.9;
	white-space:pre-line;
}
.goods-modal-thumbs {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:18px;
}
.goods-modal-thumbs img {
	width:88px;
	height:88px;
	object-fit:cover;
	border-radius:10px;
	background-color:#f2f2f2;
}
/* 「暫無購買連結」那一句：是**常態**（業主待填），所以說得平淡，不做成警告色 */
.goods-modal-note {
	margin:22px 0 0;
	padding-top:16px;
	border-top:1px solid #eee;
	color:#8a8a8a;
	font-size:1.02em;
}

/* ⑤ 標題與內容區之間的留白加一階（設計稿 `.titHead` 是 20/30px） */
.picList.goods-list {
	margin-top:6px;
}

/* ══════════════════════════════════════════════════════════════════
   §3-140　查詢列「年月」那一格 —— 下拉塞進了日期輸入框的殼
   ------------------------------------------------------------------
   🔴 病灶：設計稿的 `.dayInput` 是給**日期輸入框**用的，左邊 45px 留給日曆圖示
     （`com.css`：`.dayInput span{width:45px}` ＋ `.dayInput input{padding-left:45px}`）。
     §3-89 抽共用查詢列時，把**年月下拉**也塞進同一個殼，
     而 `.listBar` 的 padding-left 只有 10px ⇒ **圖示壓在文字上**
     （業主 2026-08-14 截圖：「不限年份」看起來是「限年份」）。
     ⚠ 這個組合設計稿本身沒有 ⇒ 修在**我方樣式檔**，不動 `com.css`（那是設計交付檔）。

   🔴 特異度：`com.css` 用的是 `#searchCriteria .listBar`（id 級），
     這裡不帶 `#searchCriteria` 就會**輸給它、寫了等於沒寫**
     （前台表現層踩過的第一坑：CSS 特異度輸給交付檔的 id 選擇器）。

   ⚠ 數字取自**實測**不是抄 CSS：桌機那個圖示的 border-box 實測是 50px（不是 45），
     所以留 56px 才有呼吸感 —— 版面數字一律「量」不「看」。
   ══════════════════════════════════════════════════════════════════ */
#searchCriteria .dayGroup .dayInput .listBar {
	padding-left:56px;
	/* 殼（`.dayBox`）本身已經有白框，下拉再畫一層灰邊就是**框中框** */
	border:none;
	background-color:transparent;
}
@media screen and (max-width:600px) {
	/* 手機版 com.css 把圖示縮到 32px、input 的 padding 改 40px ⇒ 跟著縮 */
	#searchCriteria .dayGroup .dayInput .listBar {
		padding-left:40px;
	}
}

/* §3-140　兩排頁籤的維度標籤（景区／状态）
   ⚠ 業主圈的「觀感粗糙」不是配色問題，是**兩排長得一樣、看不出是兩個維度**。
     `aria-label` 早就有，但那只有讀屏軟體聽得到。
   ⚠ 標籤刻意做得**比膠囊輕**（不描邊、不填底）—— 它是欄位名不是可點項目，
     做成膠囊的話反而多兩個看起來能點卻點不動的東西。 */
.lf-tabs-label {
	flex:0 0 auto;
	margin-right:2px;
	padding:6px 0;
	color:#8a8578;
	font-size:1.35em;
	line-height:1.9;
	letter-spacing:0.05em;
	user-select:none;
}
/* 兩排之間的呼吸：第一排原本用 inline style 給 8px，統一收進這裡 */
.lf-tabs + .lf-tabs {
	margin-top:-6px;
}

/* §3-140b　景區頁籤撤除後的跨景區出口（列表下方那一句）
   ⚠ 刻意做得**像一句話不像一顆按鈕**：它是「這裡沒有我要的」之後才需要的後路，
     做成按鈕會把它變回一個要先做選擇的分岔 —— 那正是撤掉那排膠囊的理由。 */
.lf-allsites {
	margin:18px 0 0;
	color:#8a8578;
	font-size:1.35em;
	line-height:1.9;
}
.lf-allsites a {
	color:#0a5a3c;
	text-decoration:underline;
	text-underline-offset:3px;
}
.lf-allsites a:hover,
.lf-allsites a:focus {
	color:#07422c;
}

/* ══════════════════════════════════════════════════════════════════
   §3-140d　零狀態訊息裡的行內連結 —— 被當成「清單項目」渲染了
   ------------------------------------------------------------------
   🔴 病灶：`page.css` 的 `.txtList ul li a` 是設計稿的清單樣式，前提是
     **「每一項就是一個連結」**（`display:flex; width:100%; padding:15px`）。
     而三頁的零狀態都借用了 `.txtList` 這個清單殼來放一段訊息：
       `<li><div class="infoWrap"><p>请换一组条件，或 <a>看全部景区</a>。</p></div></li>`
     ⇒ 那個**行內連結**被撐成整行、吃到 20px padding 與清單項目的淡金色，
       而它後面的**句號「。」被擠到下一行變成一個孤零零的小圓點**
       （業主 2026-08-14 圈的就是它）。

   ⚠ **不是失物頁專屬**：`/goods`、多級模組列表頁 `node/skin_list` 逐字同一種寫法，
     實測三頁的症狀完全一致（display:flex / width:1210 / padding:20px / 句號被擠出）。
     ⇒ 修在**這裡一次治三頁**，不是逐頁改 markup（改 markup 只會治好被回報的那一頁）。

   📌 與 §3-140「把下拉塞進日期輸入框的殼」是**同一個家族**：
     借用了一個為別種內容設計的殼，兩邊各自都對，組合起來才錯。
   ══════════════════════════════════════════════════════════════════ */
.txtList ul li .infoWrap a {
	display:inline;
	width:auto;
	padding:0;
	color:#0a5a3c;
	text-decoration:underline;
	text-underline-offset:3px;
}
.txtList ul li .infoWrap a:hover,
.txtList ul li .infoWrap a:focus {
	background-color:transparent;   /* 清單項目的整行 hover 底色不該套在一句話上 */
	color:#07422c;
}
/* 零狀態只有一則訊息，底下那條清單分隔虛線是多餘的（它在分隔什麼？）
   ⚠ `:has()` 不支援的舊瀏覽器只是多一條線 —— 漸進增強，不會壞。 */
.txtList ul li:has(> .infoWrap):only-child {
	border-bottom:none;
}

/* ── 錯誤頁（404／維護中）────────────────────────────────────────────
   §3-144（2026-08-20）。**設計方沒有交付錯誤頁原稿** —— 這一頁是照設計語彙自組。

   🔴 為什麼改成置中：這一頁沒有左側選單、沒有內容主體，沿用 `.pageRight`
   （那是「有左欄時的右欄」殼）會讓文字全擠在左上角、右邊三分之二空著。
   借殼的代價見 CLAUDE.md §4-B16 —— 殼是為某種內容設計的，這裡的內容不是那種。
   ⇒ 自己一個具名容器，不佔用交付檔的任何 class。

   命名一律 `err-*`，選擇器帶 `#comPage` 拿特異度（贏過 com.css／page.css 的既有規則）。 */
#comPage .err-page {
	max-width:760px;
	margin:0 auto;
	padding:56px 20px 72px;
	text-align:center;
}

/* 大字狀態碼：品牌深綠的淡影，當視覺錨點用，不喧賓奪主 */
#comPage .err-code {
	font-size:clamp(78px, 13vw, 148px);
	font-weight:900;
	line-height:1;
	letter-spacing:0.02em;
	color:#0a5a3c;
	opacity:0.17;
	margin:0 0 -14px;
	user-select:none;
}
#comPage .err-page h2 {
	font-size:clamp(24px, 3.4vw, 34px);
	font-weight:700;
	color:#1a1a1a;
	margin:0 0 14px;
	padding:0;
	border:0;
	background:none;
}
#comPage .err-lead {
	font-size:16px;
	line-height:1.9;
	color:#555;
	margin:0 auto 8px;
	max-width:34em;
}
#comPage .err-hint {
	font-size:14px;
	color:#8a8a8a;
	margin:0 0 34px;
}

/* 入口卡：三欄 → 手機一欄。整張卡可點（不是只有文字），觸控目標夠大 */
#comPage .err-links {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:14px;
	margin:0 0 30px;
	padding:0;
	list-style:none;
}
#comPage .err-links li { margin:0; padding:0; }
#comPage .err-links li::before { content:none; }
#comPage .err-links a {
	display:block;
	height:100%;
	padding:20px 16px;
	border:1px solid #e2e6e2;
	border-radius:12px;
	background:#fff;
	text-decoration:none;
	transition:border-color .2s, box-shadow .2s, transform .2s;
}
#comPage .err-links a:hover,
#comPage .err-links a:focus-visible {
	border-color:#0a5a3c;
	box-shadow:0 6px 18px rgba(10,90,60,0.10);
	transform:translateY(-2px);
}
#comPage .err-links .err-lk-t {
	display:block;
	font-size:16px;
	font-weight:700;
	color:#0a5a3c;
	margin-bottom:6px;
}
/* 箭頭只在 hover／鍵盤聚焦時滑出來 —— 靜態時版面乾淨，互動時才提示「這整張卡可以點」 */
#comPage .err-links .err-lk-t::after {
	content:" 92";
	opacity:0;
	margin-left:2px;
	transition:opacity .2s, margin-left .2s;
}
#comPage .err-links a:hover .err-lk-t::after,
#comPage .err-links a:focus-visible .err-lk-t::after {
	opacity:1;
	margin-left:6px;
}
#comPage .err-links .err-lk-d {
	display:block;
	font-size:13px;
	line-height:1.7;
	color:#8a8a8a;
}

/* 底部一行捷徑：三個景區直達，用分隔點串起來，不再多佔一張卡 */
#comPage .err-sites {
	font-size:14px;
	color:#8a8a8a;
	margin:0;
}
#comPage .err-sites a {
	color:#0a5a3c;
	text-decoration:none;
	padding:0 2px;
	border-bottom:1px solid rgba(10,90,60,0.28);
}
#comPage .err-sites a:hover { border-bottom-color:#0a5a3c; }
#comPage .err-sites span { margin:0 8px; color:#d5d5d5; }

@media screen and (max-width:768px) {
	#comPage .err-page { padding:36px 16px 52px; }
	#comPage .err-links { grid-template-columns:1fr; gap:10px; }
	#comPage .err-links a { padding:16px 14px; }
}

/* 維護中頁：狀態碼位置放的是詞不是數字 ⇒ 字級收小、字距放開；卡片只有兩張 ⇒ 兩欄 */
#comPage .err-code.err-code--word {
	font-size:clamp(38px, 6.4vw, 64px);
	letter-spacing:0.14em;
	opacity:0.16;
	margin-bottom:-6px;
}
#comPage .err-links.err-links--2 { grid-template-columns:repeat(2, 1fr); max-width:520px; margin-left:auto; margin-right:auto; }
@media screen and (max-width:768px) {
	#comPage .err-links.err-links--2 { grid-template-columns:1fr; }
}

/* ── 全文搜索頁（§3-145）─────────────────────────────────────────────
   🔴 設計方**只交了搜尋框的 markup**（docs/html/Search/default.aspx），
   `.search-panel` / `.siteSearch` 在交付的 com.css 裡**一條規則都沒有**，
   結果列表更是整段沒畫。⇒ 這一組全是我方補的，寫在我方檔、不動交付檔。
   色值一律取站上既有的深綠 #0a5a3c，不新造色。 */

/* ── 搜尋框：**我方一條規則都不寫** ────────────────────────────────
   🔴 §3-146b（2026-08-20）：這裡原本有我方補的一整組 `.search-panel` 樣式（外框／輸入框／
   按鈕／CSS 畫的放大鏡）。**那是多餘的** —— 設計交付檔 `page.css` 第 1835~1935 行
   已經完整定義了 `.search-panel`（容器／表單／輸入框／按鈕／圖示／hover／窄屏全都有）。

   後果是業主截圖回報的「這裡重疊了」：設計檔用 `em::before`＋`em::after` 畫放大鏡，
   我方又用 `em`＋`em::after` 畫了一個，而且我方選擇器帶 `#comPage`（特異度更高）
   ⇒ **兩個放大鏡疊在同一顆按鈕裡**。

   🔴 根因是**查證疏失**：上一批我 grep 過 `search-panel`，但輸出被 `head -12` 截斷，
   只看到 `#searchCriteria` 與 `.searchZone` 兩組，就下了「設計方沒交這組 CSS」的結論。
   ⇒ **grep 結果被截斷時，不能拿它當「不存在」的證據**。
   （同一個教訓：CLAUDE.md §9「引用規格前先確認哪份文件對該章節有管轄權」的變體。）

   ⚠ 所以搜尋框在本檔**刻意空著**。要改搜尋框外觀 ⇒ 那是設計交付檔的事，先問要不要動它。 */

/* ── 通欄版型 vs 右側固定浮動列（§3-146b）────────────────────────
   🔴 業主截圖的「重疊」其實有**兩件**，第二件是實測才看見的：
   `.search-panel` 是**通欄**（設計交付檔 `page.css` 就是 `width:100%`），
   而站上有一條 `position:fixed` 的浮動列（`.asideWrap`，寬 80px、貼右緣）——
   1440 寬時**送出鈕正好被「在线购票」那顆蓋住**（`elementFromPoint` 命中 `aside_ico3`，
   點下去點到浮動列，不是送出）。

   ⚠ 為什麼別的頁沒事：好禮／失物那些頁都有**左側選單**，內容區被推窄了進不到浮動列底下。
   `.pageCenter`（無左欄的通欄版型）**只有搜索頁與網站地圖頁在用** —— 全站就這兩頁會撞。

   ⇒ 內容區右側留出浮動列的寬度。只在寬屏生效：窄屏那條列是**橫躺在底部**的，不佔右側。
   ⚠ 這是**我方版型修正，不是改交付檔** —— `page.css` 一個字沒動。

   ⚠ 斷點與數值都是**量出來的**，不是猜的：
     · ≤480px：那條列變成**底部橫列**（寬 280、貼底）⇒ 不佔右側，不留白
     · ≥560px：貼右側，寬 70px；≥992px 時變 80px
     ⇒ 從 481px 起留白，用 clamp 讓它跟著視窗走（78px 給窄屏的 70 ＋ 8 間隙，
       寬屏收到 96px ＝ 80 ＋ 16）。寫死一個值的話，560px 那一格會留太多、
       1440 那一格會不夠。 */
@media screen and (min-width:481px) {
	#comPage .pageCenter { padding-right:clamp(78px, 8vw, 96px); }
}

/* 結果計數與提示條 —— note 樣式沿家族（失物那條「不確定掉在哪個景區」同款輕提示） */
#comPage .se-count { font-size:15px; color:#666; margin:0 0 6px; }
#comPage .se-count b { color:#0a5a3c; font-size:17px; }
#comPage .se-note {
	font-size:13.5px; color:#6b6b6b; background:#f4f8f4;
	border-left:3px solid #0a5a3c; padding:8px 12px; margin:0 0 16px; border-radius:0 6px 6px 0;
}

/* ── 結果卡 ──────────────────────────────────────────────────────
   🔴 token 對齊失物登記簿（`.lf-row` / `.lf-thumb` / `.lf-badge`）與好禮列表：
   hover 淡綠 #e9f4ea、名稱 hover #0e872a、縮圖 56px 圓角 6px、描述灰字 #8a8a8a。
   一致不是為了好看 —— 訪客在三個列表之間切換時，同一個手勢（hover／點整列）
   要有同一個回應，否則會以為「這一頁的卡不能點」。 */
#comPage .se-list { list-style:none; margin:14px 0 0; padding:0; }
#comPage .se-item { margin:0 0 8px; padding:0; }
#comPage .se-item::before { content:none; }

#comPage .se-link {
	display:flex;
	align-items:flex-start;
	gap:14px;
	padding:14px 16px;
	border:1px solid #e6e9e6;
	border-radius:8px;
	background:#fff;
	text-decoration:none;
	transition:background-color .25s ease, border-color .25s ease;
}
#comPage .se-link:hover,
#comPage .se-link:focus-visible {
	background:#e9f4ea;
	border-color:#cfe3d4;
}

/* 縮圖（只有商品／映像才有；沒有的類型連這個節點都不輸出 ⇒ 版面自然靠左） */
#comPage .se-thumb {
	flex:0 0 auto;
	width:56px; height:56px;
	border-radius:6px;
	overflow:hidden;
	background:#efeee8;
	display:block;
}
#comPage .se-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

#comPage .se-body { flex:1 1 auto; min-width:0; }

/* 首行：徽章 ＋ 標題（標題含高亮） */
#comPage .se-head { display:flex; align-items:baseline; gap:9px; margin-bottom:5px; }
#comPage .se-title {
	font-size:16px; font-weight:700; color:#333;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#comPage .se-link:hover .se-title { color:#0e872a; }

/* 次行：摘要兩行截斷 */
#comPage .se-snippet {
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	font-size:13.5px; line-height:1.7; color:#8a8a8a;
}

/* 日期：右對齊灰字。⚠ 沒有真值就不輸出這個節點（不印 0000-00-00 也不留破折號） */
#comPage .se-date { flex:0 0 auto; font-size:12.5px; color:#a0a0a0; margin-top:2px; }

/* 類型徽章：膠囊形狀沿 `.lf-badge`，四色區分四種內容 */
#comPage .se-badge {
	flex:0 0 auto;
	display:inline-block;
	padding:2px 11px;
	font-size:12px;
	line-height:1.7;
	border-radius:999px;
	white-space:nowrap;
	color:#fff;
	background:#0a5a3c;
}
#comPage .se-badge--article { background:#4a6fa5; }
#comPage .se-badge--goods   { background:#a4683a; }
#comPage .se-badge--gallery { background:#5a7d5a; }

/* 命中詞高亮：墨綠底 ＋ 淡金字（品牌兩色，與站上的金色點綴同族）
   ⚠ mark 的瀏覽器預設是刺眼的黃底，一定要覆蓋 */
#comPage .se-title mark,
#comPage .se-snippet mark {
	background:#0a5a3c;
	color:#f5d99b;
	font-weight:700;
	padding:0 3px;
	border-radius:3px;
}

/* 零狀態（三種語意共用外框，文案各自不同） */
#comPage .se-empty { text-align:center; padding:44px 20px 52px; }
#comPage .se-empty-t { font-size:19px; font-weight:700; color:#333; margin:0 0 10px; }
#comPage .se-empty-d { font-size:14.5px; color:#777; line-height:1.9; margin:0 0 14px; }
#comPage .se-empty-links a {
	color:#0a5a3c; text-decoration:none;
	border-bottom:1px solid rgba(10,90,60,0.28); padding:0 2px;
}
#comPage .se-empty-links a:hover { border-bottom-color:#0a5a3c; }
#comPage .se-empty-links span { margin:0 8px; color:#d5d5d5; }

@media screen and (max-width:768px) {
	/* ⚠ 搜尋框的窄屏規則**也在設計交付檔**（page.css 1925~1935）⇒ 我方這裡不寫。
	   刪主區塊時漏了這三行，靠 `SearchPageTest::testOurCssNeverRedefinesTheDesignSearchPanel` 抓到。 */
	#comPage .se-link { padding:12px 13px; gap:10px; }
	#comPage .se-thumb { width:46px; height:46px; }
	/* 窄屏標題改成可換行（桌機是單行省略號）—— 手機上截斷太早會看不出是哪一筆 */
	#comPage .se-title { white-space:normal; font-size:15px; }
	#comPage .se-head { flex-wrap:wrap; gap:6px; }
	#comPage .se-date { display:none; }
}

/* ── 語言 fallback 提示條：**已於 §5 撤除**（2026-08-25 用戶拍板）────────────
   原本是「外語版沒有譯文 ⇒ 顯示簡體並標註」（SPEC §2 規則 2）的樣式。
   譯文管線接上之後那個橫幅是整頁級、永遠都在 ⇒ 它說的話會是錯的。
   ⚠ 規則連同 markup 一起刪，不留孤兒 class —— 留著的話下一個人會以為它還在用。
   要做**段落級**標記的話是另一件事，重寫一份新的，別把這一份挖回來。 */

/* ════════════════════════════════════════════════════════════════════════════
   多語版面三律（§3-158，2026-08-27）—— `lang-aware` 家族
   ----------------------------------------------------------------------------
   同一個版面要裝四種語言的字。中文 4 個字的槽位，英文可能是 24 個字元。
   實測（2026-08-27 四語截圖普查，`/` `/gallery` `/pages/1654` `/goods` `/search`
   × 1440／1280／1100）：

   | 語言 | 主導航 | header 高 | 右側懸浮欄 |
   |---|---|---|---|
   | 简体／繁體 | 一行，與 logo 同列 | 176px | 正常 |
   | **en** | **三行**，整列被擠到 logo 下方 | **294px** | label 溢出圖示、與開關疊字 |
   | **ja** | 兩行，同樣掉到 logo 下方 | 264px | label 左右溢出 |

   ⇒ 三律（本檔的規約，新增元件照這個順序想）：

   ┌ 律① **槽位彈性**：先讓槽位自己會縮（`min-width:0` ＋ 字級階梯 ＋ 不換行的主列）。
   │   這一條能治大半，而且**不需要任何資料層配合**。
   ├ 律② **長文降級**：縮不下去就降級（小一階字級／兩行／窄容器加寬）。
   └ 律③ **圖示兜底**：連降級都塞不下 ⇒ 只留圖示，文字轉為輔助技術可讀
       （`title` 屬性 ＋ 螢幕閱讀器仍讀得到），**絕不直接刪字**。

   🔴 **三個必須寫下來的機制細節**（下一個人一定會踩）：

   ① **選擇器要帶 `#header`**。設計交付檔有 `#header .container{display:flex;flex-wrap:wrap}`
      —— 那是**一個 id 選擇器**。我方寫 `html[lang="en"] .navWrap .container` 特異度是
      (0,3,1)，**輸給** (1,1,0) ⇒ 規則靜默不生效，而 devtools 看起來「我明明寫了」。
      本批第一版就是這樣，實測 `flexWrap` 前後都是 `wrap` 才發現。
      （同族：[[feedback_front_presentation_traps]]「CSS 特異度輸給交付檔 id 選擇器」）

   ② **真正的 flex 容器是 `.navWrap .container`，不是 `.navWrap`。**
      `.navWrap` 只有一個子元素（`.container`），對它設 `flex-wrap` 一點作用都沒有。
      ⇒ 動 flex 行為之前**先在真實 DOM 上確認誰是 flex 父層**，別看 markup 猜。

   ③ **量測前要等 0.5 秒**：`#navi > ul > li > a` 繼承了 `transition: all .5s`
      ⇒ 改字級之後 font-size 會**動畫**（實測 24.48 → 18.16 → 18px）。
      不等就量會拿到中途值，而且每次不一樣 —— 那會讓瀏覽器守門變成 flaky，
      而 flaky 的守門比沒有更糟（`playwright.config.js` 檔頭同一條教訓）。
      守門 `tests/browser/i18n-layout.spec.js` 已經在等。

   ⚠ **刻意不做的兩件事**（別「順手補上」）：
   · **不提前折進漢堡選單**。實測：律①＋短標之後 en／ja 在 992~1600px 全部是**一行**，
     根本沒有折的必要；為外語另立一個斷點只會讓桌機使用者少一排導航。
     既有的 991px 斷點照舊。
   · **不做 `overflow:hidden` 的硬性行數裁切**。裁掉的字是**靜默消失**的，
     而本專案一路在防的就是靜默（坑表 A／B 家族）。「禁三行」改由守門斷言
     （`i18n-layout.spec.js`）看著 —— 內容長到爆版時要**紅一條測試**，不是偷偷切掉。
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 律① 槽位彈性：主導航 ────────────────────────────────────────────────
   桌機才套（≤990 是漢堡選單，那一套版面完全不同，動它會把手機版弄壞）。 */
@media screen and (min-width:991px) {

	/* logo 與導航同一列、不准換行 —— 不加這條的話導航整列會掉到 logo 下方 */
	html[lang="en"] #header .navWrap .container,
	html[lang="ja"] #header .navWrap .container {
		flex-wrap:nowrap;
		align-items:center;
	}
	html[lang="en"] #header .navWrap .logo,
	html[lang="ja"] #header .navWrap .logo { flex:0 0 auto; }

	/* 🔴 `min-width:0` 是關鍵：flex item 的預設 `min-width:auto` 會讓它
	   **不肯縮到內容寬度以下**，於是整列被撐爆。少了這一串，上面的 nowrap
	   只會把溢出換成另一種溢出。 */
	html[lang="en"] #header #navMenu,
	html[lang="ja"] #header #navMenu { min-width:0; flex:1 1 auto; }
	html[lang="en"] #header #navi,
	html[lang="ja"] #header #navi,
	html[lang="en"] #header #navi > ul,
	html[lang="ja"] #header #navi > ul,
	html[lang="en"] #header #navi > ul > li,
	html[lang="ja"] #header #navi > ul > li { min-width:0; }

	/* 字級降一階 ＋ 行高收緊 ＋ 間距收窄。
	   數字是**掃出來的**不是拍的：候選 F1 在 992/1024/1100/1200/1280/1366/1440/1600
	   八個寬度 × en/ja 都是「與 logo 同列、≤2 行」，配上短標之後全部是 1 行。 */
	html[lang="en"] #header #navi > ul,
	html[lang="ja"] #header #navi > ul { gap:.4vw; }
	html[lang="en"] #header #navi > ul > li > a,
	html[lang="ja"] #header #navi > ul > li > a {
		font-size:clamp(1.5em, 1.35vw, 2.2em);
		line-height:1.3;
		padding:12px clamp(5px, .5vw, 11px);
	}

	/* ── 律② 長文降級：下拉子選單 ────────────────────────────────────
	   子選單是**固定 150px**（1260px 以上 180px）。en 的子項最長 179px
	   ⇒ 實測溢出 3~29px（`Cultural and creative achievements` 溢 29px）。
	   ⚠ 加寬**只給 en**：ja／中文零溢出，加寬只會讓面板變空。 */
	html[lang="en"] #header #navi > ul > li > ul { width:225px; }
	html[lang="en"] #header #navi > ul > li > ul > li > a,
	html[lang="ja"] #header #navi > ul > li > ul > li > a {
		font-size:1.5em;
		line-height:1.35;
		padding:12px 14px 12px 30px;
		overflow-wrap:break-word;
	}
	html[lang="en"] #header #navi > ul > li > ul > li > a:after,
	html[lang="ja"] #header #navi > ul > li > ul > li > a:after { left:12px; }

	/* ── 語言切換器定寬錨定 ──────────────────────────────────────────
	   ⚠ **據實回報**：切換器的**右緣本來就沒有跑位**（四語實測 1361.4／1361.4／
	     1361.3／1361.4，差 0.1px）—— 它右邊是固定 40px 的搜尋鈕，本來就靠右錨定。
	     會動的是**左緣**（1208.6／1218.9／1228，差 19.4px），因為它自己的文字
	     長度不同（简体中文 4 字 vs English 7 字 vs 日本語 3 字）。
	   ⇒ 這條純粹是「切語言時那顆按鈕不要跳」的觀感修正，不是在修溢出。
	     用 `em` 不用 `px`：這一區的 padding 是 `.6vw`，寫死 px 會在別的寬度失準。 */
	#header .lang-switcher .lang-current-text {
		display:inline-block;
		min-width:4.7em;
	}
}

/* ── 律③ 圖示兜底：頂欄社群列（**只在 ≥1581px 存在**）──────────────────
   🔴 這一段的斷點不是拍的：`layout.css` 有 `@media (max-width:1580px){#socialmedia{display:none}}`
   ⇒ 這六顆圖示**在 1580px 以下根本不在畫面上**。本批第一版差點在 1440px 上
   「修一個看不見的東西」。
   實測 1600/1720/1920 × en/ja：社群列從中文的 733px 撐到 **1107px（en）／1083px（ja）**
   ⇒ 整個右側群組被擠到容器左緣（`nav-right.left` 從 381 變 30），
     與歡迎語**重疊 606px（en）／334px（ja）**。
   ⇒ 外語一律只留圖示。文字**留在 DOM**（螢幕閱讀器照讀）＋ 模板補了 `title`
     屬性（滑鼠移上去看得到名字，且 `title` 在翻譯層的屬性白名單裡）。 */
@media screen and (min-width:1581px) {
	html[lang="en"] #header #topHead #socialmedia a,
	html[lang="ja"] #header #topHead #socialmedia a {
		font-size:0;
		gap:0;
		letter-spacing:0;
	}
}

/* ── 律②＋③ 右側懸浮欄 ────────────────────────────────────────────────
   🔴 `.asideWrap ul li a` 是 80×80 的 `flex-direction:column` ＋ `align-items:center`，
   而 label 原本是**匿名 flex item**（直接寫在 a 裡面的文字節點）。
   匿名 flex item **選不到就管不住寬度**，過長的文字會往**左右兩側同時**溢出 ——
   而 `scrollWidth - clientWidth` **量不到往左那半** ⇒ 探針回報「零溢出」，
   截圖上卻是「Consultation hotline」壓在圖示與綠色開關上。
   📌 教訓：**`scrollWidth` 對置中溢出是會說謊的代理物**（§3-96 家族第五個成員）。
   ⇒ 模板包了一層 `.aside-label`，這裡才有得掛 `width:100%`。 */
#asideNav .asideWrap ul li a {
	padding:0 5px;
	box-sizing:border-box;
}
#asideNav .aside-label {
	display:block;
	width:100%;
	text-align:center;
	line-height:1.2;
	overflow-wrap:break-word;
	word-break:break-word;
}
/* 外語：字級降一階 ＋ 圖示讓出 12px 給兩行字（律②） */
html[lang="en"] #asideNav .aside-label,
html[lang="ja"] #asideNav .aside-label {
	font-size:.88em;
	letter-spacing:0;
}
html[lang="en"] #asideNav .asideWrap ul li a::before,
html[lang="ja"] #asideNav .asideWrap ul li a::before {
	width:38px;
	height:38px;
}

/* 開關 label：兩個 span，按容器狀態切（模板出字，JS 一個字都不寫）──────────
   ⚠ 這裡**不能**用 `.asideBtn.open` 之類的按鈕自身狀態 —— 開合狀態掛在
   **容器** `#asideNav` / `.trigBtn` 上（`open-asideNav` / `open-Panell`）。 */
#asideNav .aside-toggle-label .lbl-open,
.trigger .trigBtn .aside-toggle-label .lbl-open { display:none; }
#asideNav.open-asideNav .aside-toggle-label .lbl-close,
.trigger .trigBtn.open-Panell .aside-toggle-label .lbl-close { display:none; }
#asideNav.open-asideNav .aside-toggle-label .lbl-open,
.trigger .trigBtn.open-Panell .aside-toggle-label .lbl-open { display:inline; }

/* 🔴 律③ 只對 en：那顆開關的內容寬只有 20px，中日文一個字一行剛好，
   而 `Close` 是**一個不能斷的英文單字**（實測 40.5px）⇒ 撐出綠色標籤 5.3px
   並與下方的「Consultation hotline」疊字。
   ⇒ 收成螢幕閱讀器可讀但看不見；圖示（箭頭）本身就是這顆鈕的意義，
     而 `<a>` 上的 `aria-label` 與 `.sr-only` 的 `<em>` 都還在。
   ⚠ ja 不收：「閉じる」三個字直排得下（鈕高 80 → 95px，可接受）。 */
html[lang="en"] #asideNav .asideBtn .aside-toggle-label,
html[lang="en"] .trigger .trigBtn .aside-toggle-label {
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}


/* ═══════════════════════════════════════════════════════════════════
   天氣圖示（§3-176）—— 內嵌 SVG ＋ currentColor 上品牌綠
   ═══════════════════════════════════════════════════════════════════
   和风的圖示是 `fill="currentColor"` 的線稿，與設計交付那枚手繪圖同一種語言
   （`fill="none" stroke="#0E3D29"`，60×60）⇒ 這裡只要把 `color` 給對就行。

   🔴 **必須內嵌**：`<img src="*.svg">` 載入的是另一個文件，頁面 CSS 碰不到它裡面，
      `currentColor` 會解析成那份 SVG 自己的預設色（黑）。理由完整版在
      `app/common.php::weather_icon_svg()` 檔頭。

   ⚠ 原檔是 16×16，helper 已把 `width`/`height` 屬性拿掉 ⇒ 尺寸完全由這裡決定。
      沒拿掉的話行內屬性會贏過 CSS，圖示會小成 16px。 */
.liveStatus .icon-wrap.weather-icon {
	color:var(--green-mid, #0e3d29);
}
.liveStatus .icon-wrap.weather-icon svg {
	display:block;
	width:60px;
	height:60px;
}

/* ═══════════════════════════════════════════════════════════════════
   內頁影音／Podcast 區塊（§3-204）—— 前台原本沒有這兩塊
   ═══════════════════════════════════════════════════════════════════
   設計交付稿 `docs/html/Page/*.aspx` **沒有影音版面**，所以這一組樣式是我方補的。
   殼沿用同頁的 `.pageBot`（與「圖片」「附件下載」同一種段落感），
   播放器本身則完全住這裡 —— 交付的 `page.css`／`com.css` 一個字不動。

   🔴 **三種播放器、兩種版型**（`EmbedService::fromUrl` 的三條產物）：

   | 產物 | 原生尺寸行為 | 版型 |
   |---|---|---|
   | `<iframe>`（平台分享網址） | 吃 width/height **屬性** | 16:9 框 |
   | `<video>`（直連影片檔） | 吃檔案本身的長寬 | 16:9 框 |
   | `<audio>`（直連音訊檔） | **一條橫的控制列**，高度固定 ~54px | 自然高度 |

   ⚠ 三者共用同一個殼會有一邊是錯的：把 `<audio>` 套進 16:9，
     畫面上會是**一條細線浮在一大片黑色中間**。所以 `kind` 要從 service 帶下來
     （`FrontPageService::embedRows()`），版型由修飾子決定。 */
.pageBot .tit span.video:before {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3E%3Cpath fill='%23040000' fill-rule='evenodd' d='M4 8h20a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V11a3 3 0 0 1 3-3zm10 4.5v10l8-5z'/%3E%3Cpath fill='%23040000' d='M29 13l5-3v15l-5-3z'/%3E%3C/svg%3E");
}
.pageBot .tit span.podcast:before {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3E%3Cpath fill='%23040000' d='M17.5 3a5 5 0 0 1 5 5v8a5 5 0 0 1-10 0V8a5 5 0 0 1 5-5z'/%3E%3Cpath fill='%23040000' d='M8 14.5a1.5 1.5 0 0 1 3 0V16a6.5 6.5 0 0 0 13 0v-1.5a1.5 1.5 0 0 1 3 0V16a9.5 9.5 0 0 1-8 9.38V29h4a1.5 1.5 0 0 1 0 3H12a1.5 1.5 0 0 1 0-3h4v-3.62A9.5 9.5 0 0 1 8 16z'/%3E%3C/svg%3E");
}

.acm-media-list {
	display:flex;
	flex-direction:column;
	gap:30px;
}
.acm-media-title {
	margin:0 0 10px;
	font-size:1.6em;
	line-height:1.5;
}

/* 影片／iframe：外框定 16:9，裡面的東西絕對定位填滿。
   ⚠ 不用 `aspect-ratio` 單獨撐高：舊 WebView（微信內建瀏覽器、景區導覽機）還吃不到，
     而那正是本案訪客的大宗。`padding-top` 這招到處都能跑。 */
.acm-media-frame--media {
	position:relative;
	width:100%;
	padding-top:56.25%;
	background:#000;
	overflow:hidden;
}
.acm-media-frame--media > iframe,
.acm-media-frame--media > video {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	display:block;
}

/* 音訊：不撐高，就讓那條控制列橫著佔滿寬度 */
.acm-media-frame--audio > audio {
	display:block;
	width:100%;
}

/* ══════════════════════════════════════════════════════════════════
   2026-09-22 業主回報（世外桃源-問題修改）④⑤
   ------------------------------------------------------------------
   ④ 內容區塊標題被擠到綠色書籤「下一行」
     病灶：設計交付 `page.css` 的 `.atcTitle h3` 是 `display:flex; flex-wrap:wrap`，
     書籤圖示（::before）與標題文字是兩個 flex item —— 標題一長，文字那個匿名 item
     就整塊換到下一行，書籤獨自留在第一行。
     ⇒ 改回一般行內排版：書籤是行首的一個字，標題緊接在後、長了自然折行。
     ⚠ 修在我方樣式檔（交付的 page.css 不動），選擇器多帶 `.pageRight` 以贏過交付檔。
   ============================================================== */
.pageRight .atcTitle h3 {
	display:block;
}
.pageRight .atcTitle h3::before {
	vertical-align:-0.15em;
	margin-right:10px;
}

/* ⑤「相关链接」的網址太長把整頁撐寬（業主原話：「連上面的文案內容都會一起被拉很長」）
     病灶（瀏覽器量到的，不是推理）：`#comPage .container` 是 grid，右欄 `.pageRight` 是 grid item，
     預設 `min-width:auto` ⇒ 一串沒有斷點的長網址把**整個右欄**撐到 2816px（視口 1440）——
     所以不只連結那一格，右欄裡的正文也跟著被拉寬。
     ⇒ 右欄 `min-width:0`（允許比內容窄），網址只佔一行、超出以「…」收尾（完整網址在 title 與連結本身）。 */
#comPage .container > .pageRight {
	min-width:0;
}
.getLink dl,
.getLink dd {
	min-width:0;
}
.getLink dd {
	/* `dl` 是 flex-wrap 的直向 flex ⇒ 那一「行」的寬度取最寬項目的內容寬，不給上限 dd 會照樣長到 2686px */
	max-width:100%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* ③ 內頁橫幅分站（PageBannerService）：有指定圖就蓋掉設計稿的 cm1 底圖，
     加一層暗化讓白字標題在任何照片上都讀得到。 */
#comMain.has-banner::before {
	display:none;
}
#comMain .comMain-banner {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:0;
}
#comMain.has-banner::after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.28);
	z-index:0;
}

/* ① 桃花源记／桃源文创：分類超過四個改輪播（2026-09-22 業主回報）
     控制列（箭頭／暫停鈕／計數器）吃 home.css 既有的通用樣式（`[class$="-splide"]`／
     `[class$="-pause-btn"]`／`[class$="-counter"]`），這裡只補「把格線換成輪播」與箭頭位置，
     與 `#ich-splide` 那組寫法對齊。卡片本身的樣式沿用 `.utopiaList .item`／`.creativityList .item`。 */
.utopiaList.utopia-splide,
.creativityList.creativity-splide,
.cultureList.culture-splide {
	display:block;
	position:relative;
}
#utopia-splide,
#creativity-splide,
#culture-splide {
	overflow:visible;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
#utopia-splide .splide__track,
#creativity-splide .splide__track,
#culture-splide .splide__track {
	width:100%;
	overflow:hidden;
	padding:8px 0;
}
/* 桃源风情（2026-09-23）：人物照 hover 時會往上長出卡片框外（taoyuan.css 的 .cultureList .img-wrap
     padding-bottom 120% → 160%），上面那條 overflow:hidden 會把長出去的上半截切掉。
     ⇒ 只裁左右、不裁上下：overflow-x:clip 不會把另一軸強制成 auto（hidden 會，那樣就出捲軸）。
     ⚠ 只給這一區 —— 桃花源记／文创沒有往外長的效果，維持原本的 hidden。 */
#culture-splide .splide__track {
	overflow-x:clip;
	overflow-y:visible;
}
@media screen and (min-width:991px) {
	#utopia-splide .splide__arrows,
	#creativity-splide .splide__arrows,
	#culture-splide .splide__arrows {
		position:absolute;
		top:-80px;
		right:0;
	}
}