@charset "utf-8";
/* =========================================================================
   元安溫泉旅館 / 楓庵 YUAN·AN ONSEN — XOOPS 佈景樣式
   階段 1：頁首、導覽、搜尋覆蓋層、頁尾、區塊版位

   來源：參考資料/demo_D/design/YuanAn Home.dc.html（設計稿）
         參考資料/demo_D/README.md（design tokens、互動規格）

   ── 撰寫規則（CLAUDE.md）──────────────────────────────────────────
   · 一律 .ya- 前綴，語意 class，不留任何 inline style
   · 設計稿用 JS state 驅動的 hover 動畫，這裡一律改寫成 CSS :hover 後代選擇器
   · 全站 border-radius: 0（唯一例外：圓形按鈕與 pill）
   · 不用 jQuery、不用框架

   ── 目錄 ──────────────────────────────────────────────────────────
    1. Design tokens
    2. Reset / base
    3. 共用元件（箭頭、眉標、reveal）
    4. 頁首 Header
    5. 主選單 Nav（桌機橫排 + 雙欄大下拉）
    6. 語言切換（目前在 theme.tpl 被註解隱藏，樣式先備著）
    7. 搜尋覆蓋層
    8. 內頁主體與區塊版位
    9. 首頁區段外框（階段 2 會接手內容）
   10. 頁尾 Footer
   11. 右下浮動：回到頂部
   12. Bootstrap 覆蓋 + 彈跳視窗
   13. 響應式（1100 / 860 / 560）
   14. 列印
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   來源：README.md「Design Tokens」＋設計稿 PALETTE（Home.dc.html 第 615 行）
   const PALETTE = {ink:'#23303A', ac:'#BE8574', acSoft:'#E6C0B2',
                    ocean:'#1F4E6B', deep:'#12303F', mist:'#EDF2F5'}
   ⚠ 設計稿 inline style 裡的 var(--ac,#C08552)、var(--ink,#3A2E23) 那些
     fallback 是**舊版殘留**，一律以上面 PALETTE 為準，不要照抄那些色碼。
   ========================================================================= */
:root {
	/* 主色 */
	--ya-ink:        #23303A;   /* 墨黑：標題本文 */
	--ya-deep:       #12303F;   /* 主深藍：頁首、深底區、主要按鈕 */
	--ya-ocean:      #1F4E6B;   /* 海洋藍：連結、次要文字 */
	--ya-ac:         #BE8574;   /* 玫瑰金：重點色、hover */
	--ya-ac-soft:    #E6C0B2;   /* 淺玫瑰金：深底上的重點色 */
	--ya-mist:       #EDF2F5;

	/* 內文與輔助 */
	--ya-body:       #3c4b58;
	--ya-body-2:     #5b6875;
	--ya-muted:      #8496a3;
	--ya-muted-2:    #b6c1cb;

	/* 底色 */
	--ya-paper:      #F7FAFB;
	--ya-paper-warm: #FDFCFB;
	--ya-white:      #ffffff;
	--ya-error:      #C15B4A;

	/* 細線 */
	--ya-line:       rgba(31,78,107,.12);
	--ya-line-soft:  rgba(31,78,107,.08);
	--ya-line-dark:  rgba(255,255,255,.10);

	/* 字型 */
	--ya-serif:  'Noto Serif TC', 'Songti TC', serif;
	--ya-sans:   'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ya-en:     'Cormorant Garamond', 'Times New Roman', serif;

	/* 版面 */
	--ya-wrap:       1180px;   /* 內容最大寬（README「Spacing / Layout」）*/
	--ya-wrap-foot:  1280px;   /* 頁尾格線最大寬（設計稿 footer）*/
	--ya-read:       820px;    /* 文章閱讀寬 */
	--ya-pad-x:      clamp(1.5rem, 5vw, 4rem);
	--ya-pad-y:      clamp(3rem, 6vw, 4.6rem);
	--ya-head-x:     clamp(1.5rem, 5vw, 4rem);

	/* 動態（README「Motion」）*/
	--ya-ease:   cubic-bezier(.2,.7,.2,1);
	--ya-t-col:  .35s;   /* 色彩 */
	--ya-t-move: .55s;   /* 位移、線條 */
	--ya-t-img:  1.1s;   /* 圖片推近 */

	/* 陰影（僅 hover 使用）*/
	--ya-sh-1: 0 26px 50px -40px rgba(18,48,63,.45);
	--ya-sh-2: 0 30px 55px -38px rgba(18,48,63,.5);

	/* 層級（README：頁首 130、Lightbox 150、搜尋層 200）*/
	--ya-z-head:   130;
	--ya-z-panel:  128;
	--ya-z-light:  150;
	--ya-z-search: 200;

	/* 頁首高度（內頁要用它把內容推開，因為頁首是 fixed）。
	   🔴 這個 clamp 只是**沒有 JS 時的退路**。頁首高度會隨捲動狀態改變
	      （未捲動高、捲動後縮小），且由 logo 字級撐出來，CSS 算不出精確值 ——
	      js/main.js 用 ResizeObserver 量到實際高度後覆寫這個變數
	      （做法照設計稿 YuanAn Cadch.dc.html:409-419 的 chromeH ＋ :555 contentPadTop）。
	   ⚠ 退路值偏差約 10–20px，只是形象帶上緣多／少一條縫，不會壞版。 */
	--ya-head-h:   clamp(76px, 8vw, 104px);

	/* 頁首當下的前景色，由 body 的狀態 class 覆寫，nav / logo / 圖示都吃這個 */
	--ya-head-fg:  var(--ya-white);
}


/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.ya-body {
	margin: 0;
	background: var(--ya-white);
	color: var(--ya-body);
	font-family: var(--ya-sans);
	font-weight: 300;
	font-size: .95rem;
	line-height: 1.8;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

/* 全站無圓角（README「Typography → 圓角」）。圓形按鈕與 pill 在各自段落自行覆蓋。

   🔴 2026-09-03 修正：原本寫 `body.ya-body :where(...)` ＝ **(0,1,1)**
      （`body` 這個元素選擇器也算一分），比所有 `.ya-xxx` 元件規則 (0,1,0) **高**，
      於是「各自段落自行覆蓋」這句話**根本做不到** —— 元件想畫的圓角全被打回 0。
      實際災情：頁尾社群圖示 `.ya-social__link`（<a>）與回到頂部鈕 `.ya-top`（<button>）
      都變成方形。社群圖示是 2026-09-03 才第一次顯示出來，所以到今天才被看見。

      改成 `.ya-body`（拿掉 body 元素）＝ **(0,1,0)** 之後：
        · vs bootstrap.css 的 .form-control / .btn / .card…（也是 (0,1,0)）
          → 本檔**較晚載入**，仍然是我們贏，全站無圓角的原意不變 ✅
        · vs 本檔後面的 .ya-social__link / .ya-top…（同為 (0,1,0)）
          → **寫在後面的元件贏**，圓角終於生效 ✅
        · vs home.css / news.css / cadch.css 的元件（整個檔案都在本檔之後）
          → 元件贏 ✅
   ⚠ 這裡**只能是 (0,1,0)**。降成 :where() 全包 (0,0,0) 會讓 Bootstrap 的
     .form-control 反過來贏，圓角整組跑回來；升回 (0,1,1) 就是這次的 bug。
   ⚠ <span> 不在清單裡，所以 .ya-ink / .ya-ripple / .ya-hero__petal 等
     掛在 <span> 上的圓角元件從來沒受影響，不要跟著一起改。 */
.ya-body :where(a, button, input, select, textarea, img, div, section, article) { border-radius: 0; }

/* ⚠ 前綴刻意包 :where() —— 把特異性歸零，這兩條才是真正的「基底規則」。
   不包的話 `body.ya-body a` 是 (0,1,2)，會贏過所有 `.ya-xxx` 單一 class 規則 (0,1,0)，
   把它們的 `transition` 整條換成只剩 color —— 底線掃過、字距展開、padding 位移
   會全部變成瞬間切換，看起來就像「hover 沒有效果」。
   （2026-08-31 踩過：最新消息的 Read more 與列表列完全沒有動畫。）
   包了之後：`a` (0,0,1)、`a:hover` (0,1,1)，任何 `.ya-` 元件規則都壓得過。 */
:where(body.ya-body) a { color: inherit; text-decoration: none; transition: color var(--ya-t-col) var(--ya-ease); }
:where(body.ya-body) a:hover { color: var(--ya-ac); }

/* 🎨 全站統一的文字上色類別（2026-08-31 使用者裁示）。
   後台填寫時用一對半形 `|` 把要變色的字包起來（例：`一口源泉，|三代人的照顧|`），
   樣板端用 Smarty 內建 regex_replace 轉成這個 <span>。
   ⚠ 基底規則必須放在 style.css（全站載入）——放 home.css 的話，
     news／cadch 等模組頁不載入 home.css 就會吃不到，字不會變色。
   ⚠ 深底區段要改用淺玫瑰金：各模組的 CSS 自己覆寫
     （home.css 的 .ya-hero__title/.ya-story__title/.ya-offer__title、
      cadch.css 的 .ya-cd-band__title/.ya-cd-visit__zh）。 */
.ya-accent { color: var(--ya-ac); }

/* ⚠ 同 `a` 的理由包 :where()：不包的話 `body.ya-body img` 是 (0,1,2)，
   會壓過 `.ya-xxx__img { height: 100% }` (0,1,0)，把 height 打回 auto ——
   照片就不會填滿裁切框，底部露空、形狀看起來跟設計稿不一樣。
   （2026-08-31 踩過：房型、服務設施、一日湯宿、最新消息主打卡的照片全部沒填滿。
   Hero 與品牌故事的圖沒事，因為那幾張是 `position:absolute; inset:0` 撐開的。）*/
:where(body.ya-body) img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--ya-ac-soft); color: var(--ya-deep); }

/* ── 標題 class 中和 ──────────────────────────────────────────────
   專案規範：標題一律用 <div class="hN">，不用 h1–h6。
   Bootstrap 會給 .h1–.h6 自己的字級與 margin，這裡先歸零，實際字級交給
   各自的 .ya- class（.ya-block__title、.ya-foot__coltitle、.ya-modal__title…）。

   ⚠ 特異性刻意維持 0,1,0（裸 class）並且**放在本檔最前面**：
     · 對 bootstrap.css 而言：同特異性、本檔較晚載入 → 這裡贏，中和成功
     · 對後面的 .ya- 元件而言：同特異性、它們寫在本檔較後面 → 它們贏，字級生效
     改成 :where() 會變 0 特異性被 Bootstrap 蓋回去；
     加上 body.ya-body 前綴會變 0,1,1 反而壓過 .ya- 元件。兩種都不要。 */
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	font-family: inherit;
	color: inherit;
}

/* 鍵盤焦點：滑鼠點擊不顯示，Tab 才顯示 */
body.ya-body :focus-visible { outline: 2px solid var(--ya-ac); outline-offset: 3px; }

/* 搜尋層或行動選單開啟時鎖住頁面捲動（README「導覽 → 搜尋」）*/
body.ya-body.is-locked { overflow: hidden; }

/* 內頁：頁首是 fixed，要把主體推開 */
body.ya-body--inner { background: var(--ya-paper-warm); }


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

/* 三角箭頭（設計稿用 clip-path 畫，不用字型圖示）*/
.ya-arrow {
	display: block;
	width: .43rem; height: .36rem;
	flex: 0 0 auto;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
	transition: transform .45s var(--ya-ease), opacity .45s;
}

/* 英文眉標：Cormorant italic、大字距、全大寫 */
.ya-eyebrow {
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .72rem;
	letter-spacing: .26em;
	text-transform: uppercase;
}

/* 滾動進場（main.js 的 IntersectionObserver 加 .is-in）
   ⚠ 使用者若開了「減少動態」，直接顯示不做動畫 */
[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s var(--ya-ease), transform .8s var(--ya-ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	body.ya-body *, body.ya-body *::before, body.ya-body *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}


/* =========================================================================
   4. 頁首 HEADER
   設計稿：Home.dc.html 第 34–130 行
   狀態值：第 1081–1092 行（sc = 捲過 60px）
     hPad   1.5rem → 1rem
     hBg    透明   → 白底
     hShadow none  → 0 1px 0 mist
     navColor 白   → ink
     logoSize clamp(1.7,3.2vw,2.8) → clamp(1.5,2.5vw,1.9)
   ========================================================================= */
.ya-header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: var(--ya-z-head);
	background: transparent;
	box-shadow: none;
	transition: background var(--ya-t-col) var(--ya-ease),
	            box-shadow var(--ya-t-col) var(--ya-ease),
	            padding .4s var(--ya-ease);
	padding: 1.5rem 0;
}

.ya-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0 var(--ya-head-x);
}

/* 內頁：白底墨字**恆定**（內頁沒有滿版 hero 墊底，白字落在白底上看不見）。
   🔴 只給顏色，**不給尺寸** —— 尺寸仍走「未捲動＝高」，捲動後才由下面那組收小，
      這樣內頁的頁首行為就和首頁一致（使用者 2026-09-01 指示）。
      對照設計稿 YuanAn Cadch.dc.html:568 hBg 恆為 #fff、:576 logoColor 恆為墨。
   ⚠ 陰影未捲動時不畫（設計稿 :569 hShadow 只在 scrolled 時給），
      否則白底頁首與白底內容之間會多一條沒必要的接縫。 */
body.ya-body--inner .ya-header {
	background: var(--ya-white);
	box-shadow: none;
	--ya-head-fg: var(--ya-ink);
}

/* 捲動後：白底墨字 ＋ 細陰影 ＋ 收小（首頁與內頁共用，設計稿 Home :1081-1083／Cadch :567-569）。
   🔴 這一組**必須寫在上面那組之後** —— 兩者特異性同為 (0,2,1)，靠後寫覆蓋；
      順序倒過來內頁就永遠不會收小。同樣的先後關係也適用下方四組 logo 規則。 */
body.is-scrolled .ya-header {
	background: var(--ya-white);
	box-shadow: 0 1px 0 var(--ya-mist);
	padding: 1rem 0;
	--ya-head-fg: var(--ya-ink);
}

/* 桌機大下拉展開時，頁首本身也要轉成深底（設計稿 hBg / hBlur，第 1082、1084 行）。
   否則深色面板上方會留一條透著 hero 的透明頁首，接縫很明顯。
   ⚠ 只在「透明頁首」狀態下生效 —— 捲動後與內頁的頁首已經是白底，
     設計稿那時 sc 優先，面板不改頁首顏色，故用 :not() 排除，
     避免同特異性的後寫規則反過來蓋掉上面那條白底。
   is-panel-open 由 js/main.js 在 .ya-nav__item 的 hover/focus 時掛上。 */
body.is-panel-open:not(.is-scrolled):not(.ya-body--inner) .ya-header {
	background: color-mix(in oklab, var(--ya-ink) 94%, transparent);
	backdrop-filter: blur(8px);
}

/* ── Logo ───────────────────────────────────────────────────────────
   中文站名（Noto Serif TC 900）＋ 底下一行英文口號（Cormorant italic）。
   兩者都吃 $xoops_sitename / $xoops_slogan，不寫死品牌字。 */
.ya-logo {
	position: relative;
	flex: 0 0 auto;
	white-space: nowrap;
	display: inline-block;
	transform-origin: left center;
	color: var(--ya-head-fg);
	transform: translateY(clamp(0rem, 1vw, .7rem));
	/* 🔴 字級掛在 <a> 上，不是掛在 .ya-logo__zh 上 —— 設計稿
	      YuanAn Home.dc.html:57 就是 `<a style="font-size:{{ logoSize }}">楓庵<span…>`，
	      英文行的 `.3em` 是**對這個值**算的。
	   ⚠ 2026-09-01 修正：原本字級寫在 .ya-logo__zh（英文行的**兄弟節點**）上，
	      .ya-logo 自己沒有 font-size → `.3em` 退而對 body 的 .95rem 算，
	      英文行只剩 4.6px（應為 13.4px）。中文行改吃 1em，實際大小不變。 */
	font-size: clamp(1.7rem, 3.2vw, 2.8rem);
	transition: transform .5s var(--ya-ease), font-size .5s var(--ya-ease),
	            color var(--ya-t-col) var(--ya-ease);
}
/* 內頁未捲動：位移與字級都比首頁小一號
   （設計稿 Cadch :570/:572 → 2.4rem／.5rem；Home :1087/:1089 → 2.8rem／.7rem）*/
body.ya-body--inner .ya-logo { transform: translateY(clamp(0rem, 1vw, .5rem)); font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
body.is-scrolled .ya-logo { transform: translateY(0); font-size: clamp(1.5rem, 2.5vw, 1.9rem); }
.ya-logo:hover { color: var(--ya-head-fg); }

.ya-logo__zh {
	display: block;
	font-family: var(--ya-serif);
	font-weight: 900;
	letter-spacing: .12em;
	/* 直接繼承 .ya-logo 的字級（＝設計稿裡 <a> 的 logoSize）。
	   🔴 不要把 clamp() 搬回這裡 —— 那會讓 .ya-logo__en 的 em 失去基準（2026-09-01 踩過）。
	      三個狀態的字級現在都寫在 .ya-logo 上，見上方。 */
	font-size: 1em;
	line-height: 1.15;
}

.ya-logo__en {
	display: block;
	font-family: var(--ya-en);
	font-style: italic;
	font-weight: 400;
	font-size: .3em;
	letter-spacing: .35em;
	margin-top: .1em;
	color: var(--ya-ac-soft);
	transition: font-size .5s var(--ya-ease), color var(--ya-t-col) var(--ya-ease);
}
/* 顏色內頁恆為玫瑰金（設計稿 Cadch :577 logoEnColor 恆為 #BE8574＝--ya-ac）；
   字級未捲動 .32em（設計稿 :571），捲動後才 .42em。 */
body.ya-body--inner .ya-logo__en { font-size: .32em; color: var(--ya-ac); }
body.is-scrolled .ya-logo__en { font-size: .42em; color: var(--ya-ac); }

/* logo 左側的暈染墨點（設計稿 inkDotOpacity：首頁未捲動 .38、內頁未捲動 .32、捲動後 0）*/
.ya-logo::before {
	content: '';
	position: absolute;
	top: 50%; left: -8%;
	width: clamp(90px, 10vw, 150px);
	height: clamp(90px, 10vw, 150px);
	transform: translateY(-30%);
	background: radial-gradient(circle, var(--ya-ac) 0%, transparent 70%);
	filter: blur(6px);
	opacity: .38;
	z-index: -1;
	pointer-events: none;
	transition: opacity .5s var(--ya-ease);
}
body.ya-body--inner .ya-logo::before { opacity: .32; }
body.is-scrolled .ya-logo::before { opacity: 0; }

/* ── 頁首右側動作區 ────────────────────────────────────────────── */
.ya-header__actions {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex: 0 0 auto;
	color: var(--ya-head-fg);
	transition: color var(--ya-t-col) var(--ya-ease);
}

.ya-search-trigger {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	cursor: pointer;
	transition: opacity var(--ya-t-col) var(--ya-ease);
}
.ya-search-trigger:hover { opacity: .72; }
.ya-search-trigger i { font-size: 1rem; line-height: 1; }
/* 桌機只留放大鏡，文字標籤是抽屜裡才顯示的（設計稿 searchTrigLabelD）*/
.ya-search-trigger__label,
.ya-search-trigger__en { display: none; }

/* ── 漢堡（設計稿第 124–128 行，≤1100px 才出現）───────────────── */
.ya-burger {
	display: none;
	position: relative;
	width: 26px; height: 20px;
	padding: 0; border: 0; background: none;
	cursor: pointer;
	z-index: 112;
	color: var(--ya-head-fg);
}
.ya-burger span {
	position: absolute; left: 0;
	height: 2px; width: 26px;
	background: currentColor;
	transition: transform .5s var(--ya-ease), opacity .3s, width .4s, background var(--ya-t-col);
}
.ya-burger span:nth-child(1) { top: 0; }
.ya-burger span:nth-child(2) { top: 9px; }
.ya-burger span:nth-child(3) { top: 18px; width: 18px; }

body.is-nav-open .ya-burger { color: var(--ya-white); }
body.is-nav-open .ya-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.is-nav-open .ya-burger span:nth-child(2) { opacity: 0; transform: scaleX(.15); }
body.is-nav-open .ya-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); width: 26px; }


/* =========================================================================
   5. 主選單 NAV
   markup 由 nc_menu 區塊樣板產出：
     themes/<佈景>/modules/nc_menu/blocks/nc_menu_block.html
   資料層級：level0 = 主項、level1 = 下拉左欄群組、level2 = 下拉右欄項目

   ⚠ class 契約（改名要同步改那支樣板）：
     .ya-nav > .ya-nav__list > .ya-nav__item
       > .ya-nav__link > .ya-nav__no / .ya-nav__roll(.ya-nav__zh + .ya-nav__en) / .ya-nav__line
       > .ya-nav__chev（≤1100px 的手風琴開合鈕）
       > .ya-panel > .ya-panel__inner > .ya-panel__grps > .ya-panel__grp
            > .ya-panel__glink / .ya-panel__items > .ya-panel__ilink
   ========================================================================= */
.ya-nav {
	display: flex;
	align-items: center;
	gap: 2.2rem;
	color: var(--ya-head-fg);
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-nav__list {
	display: flex;
	align-items: center;
	gap: 2.2rem;
	margin: 0; padding: 0;
	list-style: none;
}

/* position:static 是關鍵 —— 讓 .ya-panel 的 absolute 以 .ya-header 為容器，
   下拉面板才能做到滿版寬。改成 relative 會變成只有選單項那麼窄。 */
.ya-nav__item { position: static; display: flex; flex-direction: column; }

/* 連結與手風琴鈕的橫排容器。
   ⚠ 存在的理由是 HTML 合法性：button 不能巢在 a 裡面，兩者必須是兄弟。
     2026-09-08 起桌機也顯示 .ya-nav__chev（點它才展開次選單），所以這層在兩種
     斷點都真的是「連結 ＋ 開合鈕」兩個並排。 */
.ya-nav__row { display: flex; align-items: center; }

.ya-nav__link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: .45rem;
	padding-bottom: .4rem;
	color: inherit;
}
.ya-nav__link:hover { color: inherit; }

/* 序號 01 / 02：平常隱形，hover 才淡入 */
.ya-nav__no {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .68rem;
	letter-spacing: .1em;
	opacity: .5;
	transition: opacity .45s var(--ya-ease);
}
.ya-nav__item:hover .ya-nav__no { opacity: 1; }

/* 中英雙行捲動：外框固定 1.5rem 高並裁切，hover 時整條上移一行 */
.ya-nav__roll {
	position: relative;
	display: block;
	height: 1.5rem;
	overflow: hidden;
}
.ya-nav__zh, .ya-nav__en {
	display: block;
	height: 1.5rem;
	line-height: 1.5rem;
	white-space: nowrap;
	transition: transform var(--ya-t-move) var(--ya-ease);
}
.ya-nav__zh { font-size: .95rem; letter-spacing: .08em; font-weight: 400; }
.ya-nav__en {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .95rem;
	letter-spacing: .14em;
	color: var(--ya-white);
}
/* 白底頁首（捲動後、或內頁）才轉玫瑰金；透明頁首上維持白字（設計稿 navEnColor）*/
body.is-scrolled .ya-nav__en,
body.ya-body--inner .ya-nav__en { color: var(--ya-ac); }
.ya-nav__item:hover .ya-nav__zh,
.ya-nav__item:hover .ya-nav__en { transform: translateY(-1.5rem); }

/* 沒填英文（nc_menu 的 meta 欄位空白）時不做捲動，維持單行 */
.ya-nav__item.has-no-en:hover .ya-nav__zh { transform: none; }

/* 底線由左展開（README「線條動畫慣例」：transform-origin:left + scaleX）*/
.ya-nav__line {
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--ya-ac);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ya-t-move) var(--ya-ease);
}
.ya-nav__item:hover .ya-nav__line,
.ya-nav__link.is-current .ya-nav__line { transform: scaleX(1); }

/* 第 2 層的開合鈕：**桌機不用**（第 2→3 層維持 hover 切換，2026-09-08 裁示②）。
   ⚠ 它原本只在行動版斷點內給了 display:flex，桌機沒有任何規則 → 吃 <button> 的
     預設樣式，在群組列右側露出一顆小按鈕（2026-09-01 使用者回報；
     設計稿 :96-101 的群組列只有連結，沒有鈕）。 */
.ya-panel__gchev { display: none; }

/* ── 第 1 層的開合 icon（2026-09-08 第五輪：桌機改成「點 icon 才展開」）─────
   🔴 原本這顆在桌機是 `display:none`（桌機走 hover 自動展開）。
      使用者裁示改成**和行動版一樣點 icon 才出現次選單**，所以桌機要顯示它。
   ⚠ 只有「有子選單」的第一層才會輸出這顆（樣板 `<{if $lv0.child}>`），
     沒有子選單的項目不會多一個空白位。
   ⚠ 顏色用 currentColor 而不是寫死 —— 頁首在首頁未捲動時是白字、
     捲動後與內頁是墨字，寫死會有一種狀態看不見。
   ⚠ 尺寸與行動版那顆（第 12 節）刻意不同：橫排選單裡要小、要貼著文字；
     抽屜裡則要大、靠右對齊，兩者互不共用。 */
.ya-nav__chev {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-left: .45rem;
	padding: .35rem .15rem;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	opacity: .55;
	transition: opacity var(--ya-t-col) var(--ya-ease);
}
.ya-nav__chev span {
	display: block;
	width: .42rem; height: .32rem;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transition: transform .45s var(--ya-ease);
}
.ya-nav__item:hover > .ya-nav__row .ya-nav__chev,
.ya-nav__chev:focus-visible { opacity: 1; }
/* 展開中：箭頭翻面 ＋ 用重點色標示目前開著的是哪一項 */
.ya-nav__item.is-panel-on > .ya-nav__row .ya-nav__chev { opacity: 1; color: var(--ya-ac); }
.ya-nav__item.is-panel-on > .ya-nav__row .ya-nav__chev span { transform: rotate(180deg); }

/* ── 雙欄大下拉面板 ──────────────────────────────────────────────
   設計稿第 92–115 行。面板放在各 .ya-nav__item 裡，靠 .ya-header 為定位容器做滿版。

   🔴 2026-09-01 修正：**開合不能只靠 :hover**。
      面板貼在 .ya-header 的底緣（top:100%），但觸發區 .ya-nav__item 只有約 28px 高、
      又被 align-items:center 垂直置中 —— 選單項底緣到頁首底緣之間隔著
      「置中留白 ＋ 頁首 padding 1.5rem」約 50px 的死區。滑鼠往下移一離開選單項就
      `pointer-events:none`，永遠走不到面板。
      → 改成與設計稿同一套：由 js/main.js 記住 hover 的是哪一項（`.is-panel-on`），
        **只有滑鼠離開整個 .ya-header 才收合**（設計稿 :34 的 onMouseLeave=navLeaveAll）。
        面板是 .ya-header 的後代，滑鼠移進面板不會觸發 header 的 mouseleave，
        所以「選單項 → 死區 → 面板」整條路徑都不會關。
   ⚠ `:hover` 與 `:focus-within` 兩條**保留**：前者是沒有 JS 時的退路（仍會有死區，
     但至少點得開），後者是鍵盤操作。三條並列，任一成立就展開。 */
.ya-panel {
	position: absolute;
	left: 0; top: 100%;
	width: 100%;
	z-index: var(--ya-z-panel);
	overflow: hidden;
	opacity: 0;
	transform: translateY(-.6rem);
	pointer-events: none;
	/* 🔴 **`visibility: hidden` 是必要的，不能只靠 `opacity:0` ＋ `pointer-events:none`。**
	   （2026-09-10 修：使用者回報「頁首下方有一條看不見的帶，底下的按鈕點不到」。）

	   原因：`pointer-events: none` **擋不住子孫把它收回來**。下面第 754 行的
	     `.ya-panel__grp:first-of-type > .ya-panel__items { pointer-events: auto; }`
	   是**無條件**的（那是「預設顯示第一個群組」用的），於是面板明明關著、
	   `opacity:0` 看不見，第一組的第 3 層清單**仍然攔截點擊** ——
	   實測那塊是 696×136，剛好落在頁首正下方，把該處的按鈕全部吃掉。

	   `visibility` 會繼承，而且 hidden 的子樹整棵退出 hit-testing，
	   子孫的 `pointer-events: auto` 也救不回來 → 一次解決。
	   ⚠ 順帶修掉第二個症狀：透明元素**仍在焦點序列裡**，關閉狀態下 Tab
	     會憑空掉進面板的連結，螢幕閱讀器也讀得到。
	   ⚠ 放在 transition 最後一項並給完整時長，淡出動畫才不會被瞬間切斷。
	   📌 `.ya-search`（第 837 行）本來就是這樣寫的，這裡是補上同一套。 */
	visibility: hidden;
	transition: opacity .45s var(--ya-ease), transform .5s var(--ya-ease),
	            visibility .5s var(--ya-ease);
}
/* 🔴 2026-09-08 第五輪：桌機改成「點 icon 才展開」，所以開啟條件**只剩 .is-panel-on**。
   同日稍早的 `:hover` 與 `:focus-within` 兩條**已移除**，理由如下 ——

   · `:hover`：那是舊的自動展開行為，正是使用者要求拿掉的。
     而且它是純 CSS，JS 關不掉它（面板是 .ya-nav__item 的後代，滑鼠壓在面板上
     `:hover` 依然成立），當初為了壓制它還得多做一組 `body.is-panel-hold`
     讓路規則 —— 現在源頭沒了，那一整組也一併刪掉，不留死碼。
   · `:focus-within`：鍵盤 Tab 到連結就自動展開，與「點 icon 才展開」相衝
     （使用者可能只是要 Tab 過去）。鍵盤改走 `.ya-nav__chev` 這顆真正的
     `<button>`（有 aria-expanded，js/main.js 會同步），語意更正確。

   ⚠ 代價：**沒有 JS 時桌機面板打不開**（第一層文字連結仍可用）。
     這是點擊模式必然的取捨，行動版抽屜本來就是同樣的前提。 */
.ya-nav__item.is-panel-on > .ya-panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;   /* 與上面的 visibility:hidden 成對，少了這行面板永遠打不開 */
}

.ya-panel__inner {
	display: grid;
	grid-template-columns: minmax(180px, .9fr) minmax(0, 1.4fr);
	grid-auto-rows: min-content;
	gap: 0 clamp(2rem, 5vw, 4.5rem);
	padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 8vw, 7rem) clamp(2.2rem, 4vw, 3.4rem);
	background: color-mix(in oklab, var(--ya-ink) 94%, transparent);
	backdrop-filter: blur(8px);
	border-top: 1px solid transparent;
	color: rgba(255,255,255,.7);
}

/* 面板上緣線只在白底頁首時畫（設計稿 panelBorder，第 1085 行）——
   透明頁首時頁首與面板同為深色，畫線反而多一條接縫。 */
body.is-scrolled .ya-panel__inner,
body.ya-body--inner .ya-panel__inner { border-top-color: var(--ya-line-dark); }

/* 左欄眉標：第 1 層的英文（設計稿 :95 panelEn = activeMenu.en）*/
.ya-panel__eyebrow { grid-column: 1; grid-row: 1; color: var(--ya-ac-soft); opacity: .8; margin-bottom: .9rem; }

/* 右欄眉標：**跟著目前 hover 的第 2 層群組走**，不是固定字
   （設計稿 :105 panelGroupEn = activeGroups[subHover].en）。
   🔴 2026-09-01 改：原本是樣板寫死的 .ya-panel__eyebrow2 = YA_EXPLORE('Explore')。
      現在每個 .ya-panel__grp 自己帶一個，全部疊在 row1/col2 同一格，
      用與 .ya-panel__items **完全相同**的三條 opacity 規則切換 —— 兩者必須同步，
      否則會出現「標題是 A 群組、清單是 B 群組」。 */
.ya-panel__geyebrow {
	grid-column: 2; grid-row: 1;
	color: var(--ya-ac-soft);
	margin-bottom: .9rem;
	opacity: 0;
	transition: opacity .35s var(--ya-ease);
}

/* display:contents 讓群組本身不產生盒子，它的兩個孩子（左欄連結、右欄清單）
   直接成為 .ya-panel__inner 這個 grid 的項目 —— 才排得成「左欄一列、右欄整片」。
   :hover 仍然有效：滑到子元素時祖先照樣拿到 :hover。 */
.ya-panel__grps { display: contents; }
.ya-panel__grp  { display: contents; }

/* 群組連結與其手風琴鈕的橫排容器（同樣是為了 button 不能巢在 a 裡）。
   底線畫在這層，才能連同右側的開合鈕一起跨滿整欄。 */
.ya-panel__grow {
	grid-column: 1;
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ── 第 2 層 → 第 3 層的「過橋」（2026-09-08 第三輪）────────────────────
   🔴 使用者回報：「滑鼠在選單移動的過程中，下拉選單消失，根本無法開啟第 2、
      第 3 層選單。」實查是**純幾何問題**：

      第 2 層群組在**左欄**（.ya-panel__grow，grid-column:1），
      第 3 層清單在**右欄**（.ya-panel__items，grid-column:2），
      中間隔著 .ya-panel__inner 的欄間距 `clamp(2rem,5vw,4.5rem)`（最寬 72px）。

      而「顯示哪一組第 3 層」是靠下面那兩條 `.ya-panel__grps:hover
      .ya-panel__grp:hover` 判斷的。滑鼠一踏進那道間距，**沒有任何 __grp 的
      後代被 hover** → `__grps:hover` 變 false → 兩條規則同時失效
      → 退回 `:first-of-type` 的預設值，清單當場跳回第 1 組。
      👉 從第 2 組標題往右移，走到一半清單就換人了，永遠點不到。

   👉 修法：給每一列群組補一塊**寬度剛好等於欄間距**的隱形橋，
      讓「群組標題 → 間距 → 第 3 層清單」整條路徑都還在同一個 __grp 裡面。
   ⚠ 寬度**必須與 .ya-panel__inner 的 column-gap 同一個 clamp()**，改一個要改兩個。
   ⚠ 刻意**不改 grid 的 gap**（改成 0 再用 padding 補的話，因為 box-sizing 是
     border-box，兩欄的實際內容寬度會跟著變，版面會位移）——
     用 ::after 完全不動版面。
   ⚠ 橋是透明的、且只落在本來就沒有東西的欄間距上，不會擋到任何點擊。
   🔴 **限定桌機**（2026-09-08 第四輪）：行動版抽屜裡 `.ya-panel__grow` 佔滿整個
      寬度，`left:100%` 會把橋掛到抽屜右緣之外，可能撐出水平捲動。
      桌機才有兩欄與欄間距，這道橋本來就只在桌機有意義。 */
@media (min-width: 1101px) {
	.ya-panel__grow::after {
		content: '';
		position: absolute;
		top: 0;
		left: 100%;
		width: clamp(2rem, 5vw, 4.5rem);
		height: 100%;
	}
}

.ya-panel__glink {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: .7rem;
	padding: .5rem 0;
	color: rgba(255,255,255,.72);
	transition: color .4s var(--ya-ease);
}
.ya-panel__grp:hover .ya-panel__glink { color: var(--ya-white); }
.ya-panel__gno  { font-family: var(--ya-en); font-style: italic; font-size: .68rem; opacity: .6; }
.ya-panel__gico { font-size: .95rem; line-height: 1; color: var(--ya-ac-soft); opacity: .85; flex: 0 0 auto; }
.ya-panel__glabel {
	font-family: var(--ya-serif);
	font-size: .98rem;
	letter-spacing: .1em;
	transition: transform .4s var(--ya-ease);
}
.ya-panel__grp:hover .ya-panel__glabel { transform: translateX(.3rem); }

/* 所有群組的第三層清單都疊在右欄同一格，靠 opacity 切換
   🔴 `grid-row: 2 / span 99` 不可寫成 `2 / -1`（2026-09-01 踩過）——
      本網格**沒有宣告 grid-template-rows**（只有 grid-auto-rows），
      所以 `-1` 指向顯式網格的最後一條線＝**第 1 條**，`2 / -1` 會被解析成
      起訖顛倒、自動對調成 `1 / 2` → 清單落到第 1 列，**和眉標整片疊在一起**。
      改用 span 就與顯式網格的行數無關。 */
.ya-panel__items {
	grid-column: 2;
	grid-row: 2 / span 99;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .2rem 2rem;
	align-content: start;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s var(--ya-ease);
}
/* 預設顯示第一個群組 */
.ya-panel__grp:first-of-type > .ya-panel__items { opacity: 1; pointer-events: auto; }
.ya-panel__grp:first-of-type > .ya-panel__geyebrow { opacity: .8; }
/* 滑鼠進到群組區就全部收起…… */
.ya-panel__grps:hover .ya-panel__grp > .ya-panel__items { opacity: 0; pointer-events: none; }
.ya-panel__grps:hover .ya-panel__grp > .ya-panel__geyebrow { opacity: 0; }
/* ……只留下被 hover 的那一個（特異性刻意比上一條高一級，順序不可對調）*/
.ya-panel__grps:hover .ya-panel__grp:hover > .ya-panel__items { opacity: 1; pointer-events: auto; }
.ya-panel__grps:hover .ya-panel__grp:hover > .ya-panel__geyebrow { opacity: .8; }

/* ── 群組鎖定（2026-09-08 第三輪，與上面 .ya-panel__grow::after 那道橋搭配）──
   橋解決了「水平橫越欄間距」那條路徑；這一組再補上**其餘所有路徑**：
   滑鼠斜著移動、繞出群組列下方、在第 3 層清單裡往回走……
   只要曾經進過某一組，就由 js/main.js 給它掛 `.is-grp-on` 鎖住，
   **一直到整個面板收合才解除**（clearPanels 會一併清掉）。
   → 第 3 層清單不會再因為「滑鼠剛好不在任何群組上」而跳回第 1 組。

   ⚠ 特異性必須贏過上面那兩條（0,4,0）：
     `:has()` 會把括號內的特異性算進來，所以
     `.ya-panel__grps:has(.ya-panel__grp.is-grp-on)` ＝ 1+2 ＝ 3 個 class，
     整條 ＝ 0,5,0 / 0,6,0，穩穩壓過。**順序也不可與上面對調。**
   ⚠ 本佈景其他地方已在用 `:has()`（如 .ya-zone-side .ya-block:has(.ya-wr-cats)），
     瀏覽器支援度不是問題；萬一不支援，退回上面的 :hover 版本仍可用（有橋撐著）。

   🔴 **限定桌機**（2026-09-08 第四輪，與 is-panel-hold 同一個教訓）：
      桌機的鎖定 class 若殘留到行動版，會把抽屜裡的第 3 層壓成
      opacity:0 / pointer-events:none。用 min-width 從源頭擋掉，
      比在 max-width 區塊裡逐條補擋可靠（上一輪就是補漏了 .ya-panel 本身）。 */
@media (min-width: 1101px) {
	.ya-panel__grps:has(.ya-panel__grp.is-grp-on) .ya-panel__grp > .ya-panel__items { opacity: 0; pointer-events: none; }
	.ya-panel__grps:has(.ya-panel__grp.is-grp-on) .ya-panel__grp > .ya-panel__geyebrow { opacity: 0; }
	.ya-panel__grps:has(.ya-panel__grp.is-grp-on) .ya-panel__grp.is-grp-on > .ya-panel__items { opacity: 1; pointer-events: auto; }
	.ya-panel__grps:has(.ya-panel__grp.is-grp-on) .ya-panel__grp.is-grp-on > .ya-panel__geyebrow { opacity: .8; }
}

.ya-panel__ilink {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem 0;
	font-size: .88rem;
	color: rgba(255,255,255,.66);
	transition: color .4s var(--ya-ease), gap .4s var(--ya-ease);
}
.ya-panel__ilink:hover { color: var(--ya-white); gap: .95rem; }
.ya-panel__iico { font-size: .85rem; line-height: 1; width: 1rem; text-align: center; color: var(--ya-ac); opacity: .9; flex: 0 0 auto; }


/* =========================================================================
   6. 語言切換 TW / EN
   ⚠ theme.tpl 裡這兩段目前被 Smarty 註解包住不輸出（本站未安裝多語模組）。
     樣式先留著，日後把註解拆掉就能直接用，不必回頭補 CSS。
   ========================================================================= */
.ya-lang {
	display: inline-flex;
	align-items: flex-end;
	gap: .12rem;
	font-family: var(--ya-en);
	font-size: .95rem;
	letter-spacing: .16em;
	line-height: 1;
	user-select: none;
}
.ya-lang__btn { padding: 0 .1rem; color: rgba(255,255,255,.34); transition: color var(--ya-t-col) var(--ya-ease); }
.ya-lang__btn.is-active { color: var(--ya-white); pointer-events: none; }
.ya-lang__btn:hover { color: var(--ya-ac-soft); }
.ya-lang__slash { font-size: 1.55em; line-height: .8; transform: translateY(-.14em); color: rgba(255,255,255,.3); }

body.is-scrolled .ya-lang__btn { color: rgba(35,48,58,.34); }
body.is-scrolled .ya-lang__btn.is-active { color: var(--ya-ocean); }
body.is-scrolled .ya-lang__slash { color: rgba(35,48,58,.3); }

.ya-lang--foot { font-size: .85rem; }
.ya-lang--foot .ya-lang__btn { color: rgba(255,255,255,.28); }
.ya-lang--foot .ya-lang__btn.is-active { color: rgba(255,255,255,.82); }
.ya-lang--foot .ya-lang__slash { color: rgba(255,255,255,.24); }


/* =========================================================================
   7. 搜尋覆蓋層
   設計稿第 132–178 行。z-index 200，蓋過頁首（130）。
   ⚠ 熱門關鍵字 pill 與即時結果清單依使用者裁示移除；
     結果區改成帳號入口（.ya-search__links），沿用同一套列樣式。
   ========================================================================= */
.ya-search {
	position: fixed;
	inset: 0;
	z-index: var(--ya-z-search);
	opacity: 0;
	pointer-events: none;
	/* ⚠ visibility 是必要的，不能只靠 opacity:0 —— 透明元素**仍在焦點序列裡**，
	   關閉狀態下 Tab 會憑空掉進搜尋框與帳號列，螢幕閱讀器也讀得到。
	   visibility:hidden 才會把整棵子樹移出焦點與無障礙樹。
	   放在 transition 最後一項並給完整時長，淡出動畫才不會被瞬間切斷。 */
	visibility: hidden;
	transition: opacity .5s var(--ya-ease), visibility .5s var(--ya-ease);
}
body.is-search-open .ya-search { opacity: 1; pointer-events: auto; visibility: visible; }

.ya-search__scrim {
	position: absolute; inset: 0;
	background: color-mix(in oklab, var(--ya-ink) 88%, transparent);
	backdrop-filter: blur(14px) saturate(1.1);
	border: 0;
	cursor: pointer;
}
.ya-search__glow {
	position: absolute; inset: 0;
	background: radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,.06) 0%, transparent 60%);
	pointer-events: none;
}
.ya-search__scroll {
	position: relative;
	height: 100%;
	overflow-y: auto;
	padding: clamp(4rem, 10vh, 7rem) clamp(1.5rem, 8vw, 7rem) 4rem;
	transform: translateY(-2.5rem);
	transition: transform .6s var(--ya-ease);
}
body.is-search-open .ya-search__scroll { transform: none; }

.ya-search__wrap { max-width: 960px; margin: 0 auto; }

.ya-search__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(1.5rem, 4vh, 2.6rem);
}
.ya-search__eyebrow {
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .3em;
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--ya-ac-soft);
	opacity: .85;
}
.ya-search__eyebrow--sub { letter-spacing: .24em; font-size: .68rem; color: rgba(255,255,255,.45); margin-bottom: .5rem; }

.ya-search__close {
	position: relative;
	width: 22px; height: 22px;
	flex: 0 0 auto;
	padding: 0; border: 0; background: none;
	cursor: pointer;
	opacity: .75;
	transition: opacity .4s var(--ya-ease), transform .4s var(--ya-ease);
}
.ya-search__close:hover { opacity: 1; transform: rotate(90deg); }
.ya-search__close span {
	position: absolute; top: 10px; left: 0;
	width: 22px; height: 1.5px;
	background: var(--ya-white);
}
.ya-search__close span:nth-child(1) { transform: rotate(45deg); }
.ya-search__close span:nth-child(2) { transform: rotate(-45deg); }

.ya-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: .7rem;
}
.ya-search__icon { font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ya-ac-soft); flex: 0 0 auto; }
.ya-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: none;
	color: var(--ya-white);
	font-family: var(--ya-serif);
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	letter-spacing: .06em;
	padding: 0;
}
.ya-search__input::placeholder { color: rgba(255,255,255,.34); }
/* 移除瀏覽器內建的搜尋清除叉叉，設計稿有自己的「清除」 */
.ya-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ya-search__clear {
	flex: 0 0 auto;
	padding: 0; border: 0; background: none;
	font-family: inherit;
	font-size: .78rem;
	letter-spacing: .16em;
	color: rgba(255,255,255,.5);
	cursor: pointer;
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-search__clear:hover { color: var(--ya-white); }
.ya-search__clear[hidden] { display: none; }

.ya-search__submit {
	flex: 0 0 auto;
	padding: .4rem; border: 0; background: none;
	color: var(--ya-ac-soft);
	cursor: pointer;
	transition: transform .4s var(--ya-ease), color var(--ya-t-col) var(--ya-ease);
}
.ya-search__submit:hover { transform: translateX(.3rem); color: var(--ya-white); }
.ya-search__submit .ya-arrow { width: .6rem; height: .5rem; }

.ya-search__rule {
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: rgba(255,255,255,.18);
}
/* 輸入框有字或取得焦點時，玫瑰金底線由左掃出 */
.ya-search__rule-on {
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--ya-ac);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .6s var(--ya-ease);
}
.ya-search__input:focus ~ .ya-search__rule-on,
.ya-search__input:not(:placeholder-shown) ~ .ya-search__rule-on { transform: scaleX(1); }

.ya-search__links {
	display: flex;
	flex-direction: column;
	margin-top: clamp(1.6rem, 4vh, 2.4rem);
}

/* 結果／帳號列：icon + 標題 + 路徑 + 右側箭頭 */
.ya-srow {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: .95rem .6rem;
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	background: transparent;
	font-family: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-srow:hover { background: rgba(255,255,255,.05); color: inherit; }
.ya-srow__ico { font-size: 1rem; line-height: 1; width: 1.4rem; text-align: center; color: var(--ya-ac-soft); opacity: .9; flex: 0 0 auto; }
.ya-srow__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ya-srow__label { font-family: var(--ya-serif); font-size: .98rem; letter-spacing: .06em; color: var(--ya-white); }
.ya-srow__path  { font-size: .72rem; letter-spacing: .12em; color: rgba(255,255,255,.42); }
/* 箭頭常駐可見，hover 只做位移（設計稿第 163 行只切 transform，不切透明度）*/
.ya-srow .ya-arrow { margin-left: auto; color: var(--ya-ac); }
.ya-srow:hover .ya-arrow { transform: translateX(.3rem); }

.ya-search__foot {
	margin: clamp(2.4rem, 7vh, 4rem) 0 0;
	font-size: .72rem;
	letter-spacing: .14em;
	color: rgba(255,255,255,.3);
}


/* =========================================================================
   8. 內頁主體與區塊版位
   ⚠ 這段只是階段 1 的「不破版」底線：把 XOOPS 模組原樣輸出的內容
     放進正確寬度與間距裡。各模組的實際版型是階段 3–6 的工作。
   ========================================================================= */
.ya-main--inner { padding-top: var(--ya-head-h); }

.ya-inner-wrap {
	max-width: var(--ya-wrap);
	margin: 0 auto;
	padding: var(--ya-pad-y) var(--ya-pad-x);
}

.ya-zones { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.6rem); }
.ya-zones.has-left  { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.ya-zones.has-right { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
.ya-zones.has-left.has-right { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 240px); }

.ya-zone-bottom {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.6rem);
	margin-top: var(--ya-pad-y);
}

/* tpl/*.tpl 產出的版位容器。min-width:0 是必要的 —— grid 項目預設 min-width:auto，
   模組吐出的寬表格或長網址會把整欄撐爆並讓頁面橫向捲動。 */
.ya-zone-main,
.ya-zone-side { min-width: 0; }
.ya-zone-side { align-self: start; }
.ya-zone-contents { min-width: 0; }
.ya-zone-stack { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.ya-zone-full { grid-column: 1 / -1; }
.ya-zone-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.6rem);
	margin-top: clamp(1.5rem, 3vw, 2.4rem);
}
.ya-zone-half { min-width: 0; }

.ya-foot__zone-item { min-width: 0; }
.ya-foot__zone-title {
	font-family: var(--ya-serif);
	font-size: 1rem;
	letter-spacing: .14em;
	color: var(--ya-white);
	margin-bottom: .6rem;
}

/* 區塊外框（tpl/*.tpl 產出的 markup 沿用 SNOWPEAK 的結構，只換 class 名）*/
.ya-block { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.ya-block__title {
	position: relative;
	margin: 0 0 1.1rem;
	padding-top: 1.1rem;
	font-family: var(--ya-serif);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--ya-ink);
}
.ya-block__title::before {
	content: '';
	position: absolute; top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, var(--ya-ac) 0%, var(--ya-line) 62%, transparent 100%);
}
.ya-block__title::after {
	content: '';
	position: absolute; top: -.24rem; left: 0;
	width: .44rem; height: .44rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}
.ya-block__body { font-size: .9rem; }

/* 模組內容區：文章閱讀寬 820px（README「Spacing / Layout」）*/
.ya-content { min-width: 0; }
.ya-content :where(p, li) { color: var(--ya-body); }
.ya-content :where(a) { color: var(--ya-ocean); }
.ya-content :where(a):hover { color: var(--ya-ac); }


/* =========================================================================
   9. 首頁區段外框
   ⚠ 階段 1 只給每個既有區塊一個置中容器與上下留白，讓佈景裝上去不破版。
     設計稿的 hero / news / rooms / story / facilities / CTA / day
     是**階段 2** 的工作。
   ========================================================================= */
.ya-main--home { display: block; }

.ya-home-block {
	position: relative;
	max-width: var(--ya-wrap);
	margin: 0 auto;
	padding: var(--ya-pad-y) var(--ya-pad-x);
}
/* Hero 是滿版影像，不要被容器夾住，也不要被 fixed 頁首推開 */
.ya-home-block--mainvision {
	max-width: none;
	padding: 0;
}
/* 首頁第一個非 hero 區塊要自己把 fixed 頁首讓開 */
.ya-main--home > .ya-home-block:first-child:not(.ya-home-block--mainvision) {
	padding-top: calc(var(--ya-head-h) + var(--ya-pad-y));
}


/* =========================================================================
   10. 頁尾 FOOTER
   設計稿第 467–512 行。
   桌機格線 1.5fr 1fr 1fr 1fr ＝ 品牌欄 + 連結欄 ×3（設計稿第 1189 行）
   ⚠⚠ footmenu 那份 nc_menu 選單必須恰好 3 個頂層項。
   ========================================================================= */
.ya-foot {
	position: relative;
	overflow: hidden;
	background: var(--ya-ink);
	color: rgba(255,255,255,.7);
	padding: clamp(4rem, 7vw, 6rem) var(--ya-head-x) 2rem;
	font-size: .9rem;
}
/* 左上角的玫瑰金暈染 */
.ya-foot__ink {
	position: absolute;
	top: -30%; left: 30%;
	width: min(60vw, 700px);
	height: min(60vw, 700px);
	border-radius: 50%;
	background: radial-gradient(circle, var(--ya-ac) 0%, transparent 70%);
	filter: blur(80px);
	opacity: .14;
	pointer-events: none;
}

.ya-foot__grid {
	position: relative;
	max-width: var(--ya-wrap-foot);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ⚠ 頁尾的 <a> 只有 .ya-foot__logo、沒有 .ya-logo，所以字級要自己給一次。
   同樣掛在 <a> 上，下一行 .ya-logo__en 的 .5em 才有基準
   （原本掛在 __zh 上 → 英文行只剩 7.6px，2026-09-01 與頁首同一個坑一起修）。 */
.ya-foot__logo { display: inline-block; color: var(--ya-white); font-size: 1.8rem; }
.ya-foot__logo .ya-logo__en { font-size: .5em; color: var(--ya-ac-soft); }

/* 品牌標語（nc_vision footbrand 區塊輸出 .ya-foot__tagline）*/
.ya-foot__tagline { margin: 1.2rem 0 0; max-width: 32ch; font-size: .9rem; text-wrap: pretty; }

/* nc_vision 給有權限者看的「編輯此區塊」小連結。
   ⚠ 原樣板是 inline style，本專案禁止 inline style，故改成 class 在這裡定義。 */
.ya-foot__editlink { padding: .5rem 0; font-size: .75rem; text-align: center; }
.ya-foot__editlink a { color: var(--ya-ac-soft); }

/* ── 社群圖示（nc_menu tmpl_1 輸出）───────────────────────────── */
.ya-social { display: flex; gap: .9rem; margin-top: 1.6rem; list-style: none; padding: 0; }
.ya-social__link {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.2);
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.7);
	font-size: 1.15rem;
	transition: background .4s var(--ya-ease), border-color .4s var(--ya-ease),
	            color .4s var(--ya-ease), transform .4s var(--ya-ease);
}
.ya-social__link:hover {
	background: var(--ya-ac);
	border-color: var(--ya-ac);
	color: var(--ya-white);
	transform: translateY(-4px);
}

/* ── 聯絡三列（nc_menu tmpl_3 輸出）───────────────────────────── */
/* ⚠ `.ya-foot__contact`（頁尾聯絡三列，5 行）**2026-09-09 已移除**。
   設計稿的頁尾沒有這三列（聯絡資訊在 Cadch 的 Visit us），2026-09-03 已裁示隱藏，
   使用者 2026-09-09 裁示「全部清乾淨」→ 樣板、theme.tpl 路由、後台區塊 bid 36
   一併移除。♻ `css/style.css.tmpl3move.bak`。**不要再加回來。** */
.ya-foot__clabel { font-size: .72rem; letter-spacing: .14em; color: rgba(255,255,255,.4); flex: 0 0 auto; }
.ya-foot__cvalue { font-size: .88rem; }

/* ── 三個連結欄（nc_menu tmpl_2 輸出）─────────────────────────── */
.ya-foot__col { position: relative; }
.ya-foot__colhead { position: relative; margin-bottom: 1.35rem; padding-top: 1.1rem; }
.ya-foot__colhead::before {
	content: '';
	position: absolute; top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, rgba(230,192,178,.5) 0%, rgba(255,255,255,.06) 62%, transparent 100%);
}
.ya-foot__colhead::after {
	content: '';
	position: absolute; top: -.24rem; left: 0;
	width: .44rem; height: .44rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}
.ya-foot__colen {
	margin: 0 0 .18rem;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .78rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ya-ac-soft);
	opacity: .72;
}
.ya-foot__coltitle {
	font-family: var(--ya-serif);
	color: var(--ya-white);
	font-size: 1.05rem;
	letter-spacing: .14em;
	font-weight: 700;
}
.ya-foot__list { list-style: none; margin: 0; padding: 0; }
.ya-foot__list a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem 0;
	font-size: .9rem;
	transition: color .35s var(--ya-ease), gap .35s var(--ya-ease);
}
.ya-foot__list a:hover { color: var(--ya-ac-soft); gap: .85rem; }
.ya-foot__dash { display: block; width: .3rem; height: 1px; background: currentColor; opacity: .42; flex: 0 0 auto; }
.ya-foot__list i { font-size: .95rem; color: var(--ya-ac-soft); opacity: .8; flex: 0 0 auto; }

/* ── 自由區塊版位 ────────────────────────────────────────────────
   ⚠ 這裡原本還有 .ya-foot__map（頁尾 Google Map）。使用者 2026-09-03 裁示
     不做地圖（設計稿頁尾本來就沒有），已連同 theme.tpl 的路由一起移除。 */
.ya-foot__zones {
	position: relative;
	max-width: var(--ya-wrap-foot);
	margin: 2rem auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

/* ── 版權列 ──────────────────────────────────────────────────── */
.ya-foot__bottom {
	position: relative;
	max-width: var(--ya-wrap-foot);
	margin: 0 auto;
	padding-top: 2rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: .8rem;
	color: rgba(255,255,255,.42);
}
.ya-foot__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.ya-foot__meta a:hover { color: var(--ya-ac-soft); }
.ya-foot__xoops {
	position: relative;
	max-width: var(--ya-wrap-foot);
	margin: 1rem auto 0;
	font-size: .74rem;
	color: rgba(255,255,255,.28);
	text-align: center;
}


/* =========================================================================
   11. 右下浮動堆疊：聯絡 FAB ＋ 回到頂部
   設計稿第 529–553 行 —— 一個 fixed 外框，內含由上而下兩顆：
     ① .ya-fab  聯絡鈕（點開展開四項：聯絡表單／EMAIL／電話／LINE）
     ② .ya-top  回到頂部（圓鈕內由下往上「注水」，水位＝閱讀進度）
   水位高度由 main.js 寫進 --ya-prog；FAB 開合也由 main.js 控。
   🔴 2026-09-03 改版：原本 .ya-top 自己 position:fixed，加 FAB 之後兩顆會各自
     定位、互相疊住 —— 依設計稿改成**外框負責定位、兩顆在流內排**。
   ========================================================================= */
.ya-float {
	position: fixed;
	right: 1.5rem; bottom: 1.5rem;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .8rem;
	/* 設計稿 `pointer-events:none` —— 外框本身是透明的排版容器，
	   不可以擋住底下頁面的點擊。兩顆按鈕各自把 pointer-events 收回來。 */
	pointer-events: none;
}

/* ── 11-1. 聯絡 FAB（設計稿第 530–536 行）──────────────────────── */
.ya-fab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .65rem;
	pointer-events: none;
}
.ya-fab.is-open { pointer-events: auto; }

.ya-fab__list {
	/* --ya-fab-n ＝ 總列數，展開延遲要用。預設 4（設計稿的 CONTACT 就是四項），
	   實際值由 main.js 依真正數到的列數覆寫。
	   🔴 這條**一定要寫在清單上、不能寫在 .ya-fab__item 上** —— 自訂屬性寫在
	     元素自己身上會壓過從祖先繼承來的值，JS 寫進清單就永遠吃不到。（實際踩過） */
	--ya-fab-n: 4;
	margin: 0; padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .65rem;
}
.ya-fab__item {
	/* --ya-fab-i ＝ 第幾列（樣板帶進來，1 起算）。
	   設計稿的錯開延遲：展開時**由下往上**（靠近切換鈕的先出現）＝
	   (總數 - i) * 60ms；收合時由上往下 (i-1) * 45ms。
	   總數 --ya-fab-n 從 .ya-fab__list 繼承下來（見上一條的說明）。 */
	opacity: 0;
	transform: translateY(14px) scale(.85);
	pointer-events: none;
	transition: opacity .5s var(--ya-ease), transform .5s var(--ya-ease);
	transition-delay: calc((var(--ya-fab-i) - 1) * 45ms);
}
.ya-fab.is-open .ya-fab__item {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: calc((var(--ya-fab-n) - var(--ya-fab-i)) * 60ms);
}

.ya-fab__link {
	display: flex;
	align-items: center;
	gap: .7rem;
	cursor: pointer;
}
/* 氣泡標籤。設計稿是右下角尖角的對話框：三個圓角 + 右下方一塊被圓形遮罩挖掉的
   尾巴（`mask: radial-gradient(circle 21px at 100% 0, transparent 99%, #000 100%)`）。 */
.ya-fab__label {
	position: relative;
	font-family: var(--ya-serif);
	font-size: .78rem;
	letter-spacing: .14em;
	white-space: nowrap;
	color: var(--ya-white);
	background: var(--ya-ocean);
	padding: .38rem .85rem;
	border-radius: 1.05rem 1.05rem .2rem 1.05rem;
	filter: drop-shadow(0 3px 8px color-mix(in oklab, var(--ya-ink) 16%, transparent));
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-fab__label::after {
	content: '';
	position: absolute;
	right: -14px; bottom: 0;
	width: 20px; height: 22px;
	background: var(--ya-ocean);
	-webkit-mask: radial-gradient(circle 21px at 100% 0, transparent 99%, #000 100%);
	        mask: radial-gradient(circle 21px at 100% 0, transparent 99%, #000 100%);
	border-bottom-right-radius: .45rem;
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-fab__ico {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 1.15rem;
	background: var(--ya-white);
	/* 🔴 2026-09-03 修正：原本寫 var(--ya-ac)（玫瑰金），與設計稿不符。
	   設計稿是 `color:var(--oc,#8C6A4A)` ＝ 本佈景的 --ya-ocean，
	   hover 才換成 ac 底＋白字（`style-hover="background:var(--ac);color:#fff"`）。
	   ⚠ oc ↔ --ya-ocean 的對應與 .ya-top 的底色同一組，不要各自認定。 */
	color: var(--ya-ocean);
	box-shadow: 0 10px 24px -10px rgba(18,48,63,.55);
	transition: background .4s var(--ya-ease), color .4s var(--ya-ease);
}
.ya-fab__link:hover .ya-fab__ico,
.ya-fab__link:focus-visible .ya-fab__ico { background: var(--ya-ac); color: var(--ya-white); }
.ya-fab__link:hover .ya-fab__label,
.ya-fab__link:hover .ya-fab__label::after,
.ya-fab__link:focus-visible .ya-fab__label,
.ya-fab__link:focus-visible .ya-fab__label::after { background: var(--ya-deep); }

/* 切換鈕。與 .ya-top 同尺寸同陰影，只有底色不同（設計稿 ac / hover acs）。 */
.ya-fab__toggle {
	position: relative;
	width: 52px; height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0; border: 0;
	background: var(--ya-ac);
	color: var(--ya-white);
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	opacity: 0;
	transform: translateY(1.5rem);
	pointer-events: none;
	/* 與 .ya-top 同樣的理由：只有 opacity:0 的話，還沒捲動時 Tab 會停在看不見的鈕上 */
	visibility: hidden;
	box-shadow: 0 12px 30px -12px rgba(18,48,63,.6);
	transition: opacity .45s var(--ya-ease), transform .45s var(--ya-ease),
	            background .45s var(--ya-ease), visibility .45s var(--ya-ease);
}
body.is-floating .ya-fab__toggle {
	opacity: 1; transform: none; pointer-events: auto; visibility: visible;
}
.ya-fab__toggle:hover { background: var(--ya-ac-soft); }
/* 展開時整顆轉 90 度（設計稿 contactRot）。
   ⚠ 這裡的 transform 會蓋掉上面的 translateY —— 但展開一定發生在 is-floating
     之後（沒浮現就點不到），此時 translateY 本來就是 none，不衝突。 */
.ya-fab.is-open .ya-fab__toggle { transform: rotate(90deg); }

/* 兩個圖示疊在同一格交叉淡出（設計稿 contactIcon 是換 class，這裡改成疊放，
   免得 JS 去改字串 class 名）。⚠ 轉 90 度的是外層按鈕，所以 X 也跟著轉 ——
   與設計稿一致（bi-x-lg 轉 90 度看起來還是 X）。 */
.ya-fab__toggle-ico {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .3s var(--ya-ease);
}
.ya-fab__toggle-ico--close { opacity: 0; }
.ya-fab.is-open .ya-fab__toggle-ico--open  { opacity: 0; }
.ya-fab.is-open .ya-fab__toggle-ico--close { opacity: 1; }

/* 只給螢幕閱讀器的文字（切換鈕的可讀名稱）。
   ⚠ 不用 display:none／visibility:hidden —— 那兩種讀屏軟體讀不到。 */
.ya-vh {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── 11-2. 回到頂部（設計稿第 539–553 行）──────────────────────── */
.ya-top {
	position: relative;
	width: 52px; height: 52px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0; border: 0;
	background: var(--ya-ocean);
	color: var(--ya-white);
	cursor: pointer;
	opacity: 0;
	transform: translateY(1.5rem);
	pointer-events: none;
	/* 同 .ya-search：只有 opacity:0 的話，還沒捲動時 Tab 就會停在這顆看不見的按鈕上 */
	visibility: hidden;
	box-shadow: 0 12px 30px -12px rgba(18,48,63,.6);
	transition: opacity .45s var(--ya-ease), transform .45s var(--ya-ease),
	            background .45s var(--ya-ease), visibility .45s var(--ya-ease);
	--ya-prog: 0%;
}
body.is-floating .ya-top { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.ya-top:hover { background: var(--ya-deep); }

.ya-top__fill {
	position: absolute;
	left: 0; bottom: 0;
	width: 100%;
	height: var(--ya-prog);
	background: linear-gradient(180deg, var(--ya-deep) 0%, rgba(0,0,0,.55) 100%);
	transition: height .35s var(--ya-ease);
}
/* 水面線。設計稿 `opacity:{{waterLine}}` ＝ 平常 .9、**捲到底（prog≥99）時 0**
   （`YuanAn Home.dc.html:1202` 的 `waterLine: (s.prog||0) >= 99 ? 0 : .9`）——
   水滿了就沒有水面了。原本這裡沒寫 opacity（等於恆為 1）也沒有 transition，
   所以水線永遠都在、而且滿版時還壓在最上緣，與設計稿不符。2026-09-03 補上。
   `.is-full` 由 js/main.js 依進度切換。 */
.ya-top__line {
	position: absolute; top: -1px; left: 0;
	width: 100%; height: 2px;
	background: var(--ya-ac-soft);
	opacity: .9;
	transition: opacity .3s var(--ya-ease);
}
.ya-top.is-full .ya-top__line { opacity: 0; }
.ya-top__ico { position: relative; z-index: 2; width: 23px; height: 23px; display: block; }
.ya-top__label {
	position: relative; z-index: 2;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .6rem;
	letter-spacing: .16em;
	line-height: 1;
	margin-top: .1rem;
}


/* =========================================================================
   12. BOOTSTRAP 覆蓋 + 彈跳視窗
   使用者 2026-08-30 裁示：保留 Bootstrap，**只當 modal 用**。
   設計稿完全沒有 Bootstrap 版型，所以這裡把會打架的部分壓回來：
     · .modal-content 的白底圓角陰影 → 改成方角、設計稿的陰影
     · Bootstrap 的 .btn / .form-control 一律不用，改用 .ya-btn / .ya-input
   ⚠ 只覆蓋 modal 範圍內的東西。若日後 XOOPS 模組自己吐出 .btn / .form-control，
     那是模組樣板的事，留到階段 3–6 各自處理，不要在這裡全域壓掉。
   ========================================================================= */
.ya-modal .modal-content {
	border: 0;
	border-radius: 0;
	background: var(--ya-white);
	box-shadow: 0 40px 80px -30px color-mix(in oklab, var(--ya-ink) 60%, transparent);
	padding: clamp(2rem, 4vw, 3rem);
}
.ya-modal .modal-header {
	position: relative;
	display: block;
	border: 0;
	padding: 0 0 1.6rem;
}
.ya-modal .modal-body { padding: 0; }

.ya-modal__eyebrow {
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	color: var(--ya-ac);
	letter-spacing: .28em;
	font-size: .85rem;
	text-transform: uppercase;
}
.ya-modal__title {
	margin: .3rem 0 0;
	font-family: var(--ya-serif);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 900;
	color: var(--ya-ink);
}
.ya-modal__close {
	position: absolute;
	top: 0; right: 0;
	width: 36px; height: 36px;
	padding: 0; border: 0; background: none;
	cursor: pointer;
	color: var(--ya-ocean);
	transition: color .35s var(--ya-ease), transform .35s var(--ya-ease);
}
.ya-modal__close:hover { color: var(--ya-ac); transform: rotate(90deg); }
.ya-modal__close span {
	position: absolute; top: 17px; left: 8px;
	width: 20px; height: 1.5px;
	background: currentColor;
}
.ya-modal__close span:nth-child(1) { transform: rotate(45deg); }
.ya-modal__close span:nth-child(2) { transform: rotate(-45deg); }

.ya-modal__links { display: flex; gap: 1.5rem; margin-top: 1.4rem; font-size: .82rem; }
.ya-modal__links a { color: var(--ya-ocean); letter-spacing: .06em; }
.ya-modal__links a:hover { color: var(--ya-ac); }

/* ── 表單元件（Liaise 階段 5 會沿用同一套）───────────────────── */
.ya-field { margin-bottom: 1rem; }
.ya-input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--ya-line);
	padding: .7rem 0;
	font-family: inherit;
	font-size: .95rem;
	background: transparent;
	outline: none;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
.ya-input:focus { border-bottom-color: var(--ya-ac); }
.ya-input::placeholder { color: var(--ya-muted); }

.ya-check { display: flex; align-items: center; gap: .55rem; margin: 1.2rem 0; font-size: .85rem; color: var(--ya-body-2); cursor: pointer; }
.ya-check__box { width: 1rem; height: 1rem; accent-color: var(--ya-ac); }

.ya-btn {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	margin-top: .6rem;
	padding: 0 0 .35rem;
	border: 0;
	border-bottom: 1px solid var(--ya-line);
	background: none;
	font-family: var(--ya-serif);
	font-size: 1rem;
	letter-spacing: .2em;
	color: var(--ya-ocean);
	cursor: pointer;
	transition: letter-spacing .4s var(--ya-ease), color .4s var(--ya-ease), border-color .4s var(--ya-ease);
}
.ya-btn:hover { letter-spacing: .3em; color: var(--ya-ac); border-bottom-color: var(--ya-ac); }
.ya-btn--ghost { color: var(--ya-muted); }
.ya-btn + .ya-btn { margin-left: 1.6rem; }



/* =========================================================================
   12B. BOOTSTRAP 3 相容層（2026-09-03 新增）

   🔴 為什麼需要這一節
   本佈景載入的是 **Bootstrap 5.2.0**（theme.tpl:53），但 XOOPS 核心的
   `XoopsFormRendererBootstrap3` 與多支佈景覆寫樣板吐出的仍是 **Bootstrap 3**
   的 class。BS5 已把這些 class 整組移除，於是它們**完全沒有樣式**。

   實際災情（使用者 2026-09-03 回報）：
   cadch 前台編輯表單的「送出」「清除」按鈕 —— `modules/cadch/unit.php:535-536`
   用 `XoopsFormButton`，經 BS3 renderer 第 39 行吐出 `class='btn btn-default'`。
   BS5 的 `.btn` 基底是 `--bs-btn-bg: transparent` ＋ `--bs-btn-border-color:
   transparent`，`.btn-default` 又不存在 → **透明底、透明框，只剩一行深色文字**，
   看起來完全不像按鈕，使用者找不到。

   🔴 修法原則：**只補 BS5 沒有的 class，絕不覆蓋 BS5 既有的 class**
   第 12 節那句「不要在這裡全域壓掉 .btn / .form-control」仍然有效 ——
   這一節是**加法**（補上 BS5 缺的定義），不是減法（壓掉 BS5 有的定義）。
   `.btn-primary`／`.btn-danger`／`.btn-warning`／`.btn-success`／`.btn-sm`／
   `.btn-group`／`.input-group`／`.nav-tabs`／`.row`／`.col-sm-*`／`.col-md-*`
   BS5 都還有，一行都不碰。

   ⚠ 按鈕一律用 **BS5 的 CSS 變數**寫，不要直接寫 color／background —— 這樣
   hover／focus／active／disabled 四個狀態會自動走 BS5 自己的通用規則
   （bootstrap.css:2845-2871），不必再各寫一遍，也不會和 BS5 打架。

   ⚠ 這一節必須放在 `.ya-btn` **之後**：兩者 class 不同不會互相影響，
   但排在後面才符合「本佈景樣式最後載入」的順序原則。

   涵蓋範圍：cadch／wr（兩者都 setRenderer 成 BS3）、system 留言與區塊、
   profile、pm、liaise 前台表單。
   ========================================================================= */

/* ── 12B-1. 按鈕：.btn-default（🔴 本節的主因）────────────────────────
   楓庵的次要按鈕：白底、細線框、海洋藍字；hover 轉深藍底白字。
   刻意**不做**成 .ya-btn 那種無框底線款 —— 後台編輯表單要的是「一眼看得到、
   點得到」，不是首頁那種低調裝飾。 */
.btn-default {
	--bs-btn-color:                var(--ya-ocean);
	--bs-btn-bg:                   var(--ya-white);
	--bs-btn-border-color:         rgba(31, 78, 107, .35);
	--bs-btn-hover-color:          var(--ya-white);
	--bs-btn-hover-bg:             var(--ya-deep);
	--bs-btn-hover-border-color:   var(--ya-deep);
	--bs-btn-focus-shadow-rgb:     31, 78, 107;
	--bs-btn-active-color:         var(--ya-white);
	--bs-btn-active-bg:            var(--ya-ocean);
	--bs-btn-active-border-color:  var(--ya-ocean);
	--bs-btn-disabled-color:       var(--ya-muted);
	--bs-btn-disabled-bg:          var(--ya-paper);
	--bs-btn-disabled-border-color: var(--ya-line);
	--bs-btn-border-radius:        2px;
	font-family: var(--ya-sans);
	font-weight: 500;
	letter-spacing: .06em;
}
/* 用 <a class="btn btn-default"> 當按鈕的地方（cadch/unit.php:658 的檔案連結、
   wr/ajax.php:931,951 的刪檔鈕）—— 基底 <a> 規則包在 :where() 裡（特異性 0），
   所以這裡不必加 !important 也蓋得過，但底線要自己關掉。 */
a.btn-default { text-decoration: none; }
a.btn-default:hover { text-decoration: none; }

/* ── 12B-2. 按鈕尺寸：.btn-xs ─────────────────────────────────────────
   BS5 只留 .btn-sm／.btn-lg。用到的地方：system 留言、線上使用者區塊、
   登入區塊、profile。同樣走 BS5 變數。 */
.btn-xs {
	--bs-btn-padding-y:    .15rem;
	--bs-btn-padding-x:    .4rem;
	--bs-btn-font-size:    .75rem;
	--bs-btn-border-radius: 2px;
}

/* ── 12B-3. 表單版面 ──────────────────────────────────────────────────
   BS5 拿掉 .form-group 之後，BS3 renderer 排出來的欄位會**整疊黏在一起**
   （完全沒有垂直間距）。這是 cadch／wr 編輯表單第二明顯的問題。 */
.form-group { margin-bottom: 1.1rem; }
.form-group:last-child { margin-bottom: 0; }

/* BS5 用 .form-label／.col-form-label 取代 .control-label */
.control-label {
	display: inline-block;
	margin-bottom: .35rem;
	font-family: var(--ya-sans);
	font-weight: 500;
	color: var(--ya-ink);
}
/* BS3 renderer 的必填標記（renderer 自己吐的 class，BS5 當然沒有） */
.xo-caption-required { color: var(--ya-error); }

/* BS5 用 .form-text 取代 .help-block */
.help-block {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--ya-muted);
}

/* BS5 用 .form-control-plaintext 取代 .form-control-static */
.form-control-static {
	display: block;
	padding-top: .375rem;
	padding-bottom: .375rem;
	margin-bottom: 0;
	color: var(--ya-body);
}

/* BS5 用 .form-check-inline 取代 .checkbox-inline／.radio-inline。
   沒有這條，BS3 renderer 排的「橫向選項」會變成一項一行。 */
.checkbox-inline,
.radio-inline {
	display: inline-block;
	margin-right: 1.1rem;
	margin-bottom: .3rem;
	font-weight: 400;
	vertical-align: middle;
}
.checkbox-inline input,
.radio-inline input { margin-right: .35rem; vertical-align: middle; }

/* BS5 的 .input-group 直接吃 .btn，不再需要 .input-group-btn 包一層；
   但既有 HTML 還包著，補一條讓它別把按鈕擠壞。 */
.input-group-btn { display: flex; }

/* BS3 的表單版型容器。BS5 全靠 .row/.col-*，這兩條只要不壞版即可。 */
.form-horizontal .form-group { margin-right: 0; margin-left: 0; }
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* BS5 用 .is-invalid 取代 .has-error（liaise_form.html 用到） */
.has-error .control-label,
.has-error .help-block  { color: var(--ya-error); }
.has-error .form-control { border-color: var(--ya-error); }

/* ── 12B-4. 圖片工具 class ────────────────────────────────────────────
   ⚠ 這幾條要包 :where() —— F 段的老坑：本佈景的 <img> 基底規則刻意寫成
   零特異性，模組樣板才蓋得過去；這裡若寫成一般選擇器，反而會把模組樣板
   自己的圖片設定壓掉。 */
:where(.img-responsive) { display: block; max-width: 100%; height: auto; }
/* ⚠ 這兩條**不可以**包 :where()。它們唯一的作用就是給 border-radius，
   而第 2 節的「全站無圓角」重置是 (0,1,0)；包了 :where() 會變 (0,0,0) 打不過，
   .img-circle 就完全失效。維持裸 class (0,1,0)＋寫在重置後面才贏得了。 */
.img-rounded { border-radius: 4px; }
.img-circle  { border-radius: 50%; }
.thumbnail {
	display: block;
	padding: 4px;
	background: var(--ya-white);
	border: 1px solid var(--ya-line);
	border-radius: 2px;
}

/* ── 12B-5. 標籤 .label / .label-*（BS5 改叫 .badge）───────────────────
   ⚠ `.label` 這個名字太通用，限定在有 .label-* 變體時才生效，
   免得把別人自己寫的 .label 給污染了。 */
.label[class*="label-"] {
	display: inline-block;
	padding: .28em .6em;
	font-size: .75em;
	font-weight: 500;
	line-height: 1;
	color: var(--ya-white);
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 2px;
}
.label-default { background: var(--ya-muted); }
.label-primary { background: var(--ya-ocean); }
.label-success { background: #3F7A5A; }
.label-info    { background: var(--ya-ac); }
.label-warning { background: #C08A3E; }
.label-danger  { background: var(--ya-error); }

/* ── 12B-6. 版面雜項 ──────────────────────────────────────────────────
   .well／.page-header BS5 也都移除了。 */
.well {
	padding: 1.1rem;
	margin-bottom: 1.1rem;
	background: var(--ya-paper);
	border: 1px solid var(--ya-line);
	border-radius: 2px;
}
.page-header {
	padding-bottom: .6rem;
	margin: 1.6rem 0 1.2rem;
	border-bottom: 1px solid var(--ya-line);
}
.pull-left    { float: left !important; }
.pull-right   { float: right !important; }
.center-block { display: block; margin-right: auto; margin-left: auto; }

/* ── 12B-7. .col-xs-*（BS5 改成無斷點的 .col-*）───────────────────────
   BS5 的 `.row > *` 會給每一欄 width:100%（特異性 0,1,0）。下面的
   `.row > .col-xs-N` 是 0,2,0，穩穩蓋過去，不必 !important。
   ⚠ 不在 .row 裡的 .col-xs-* 也補一份，因為 BS3 時代常有人直接用。 */
.col-xs-1,  .col-xs-2,  .col-xs-3,  .col-xs-4,
.col-xs-5,  .col-xs-6,  .col-xs-7,  .col-xs-8,
.col-xs-9,  .col-xs-10, .col-xs-11, .col-xs-12 {
	flex: 0 0 auto;
	padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
	padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
}
.row > .col-xs-1,  .col-xs-1  { width: 8.33333333%; }
.row > .col-xs-2,  .col-xs-2  { width: 16.66666667%; }
.row > .col-xs-3,  .col-xs-3  { width: 25%; }
.row > .col-xs-4,  .col-xs-4  { width: 33.33333333%; }
.row > .col-xs-5,  .col-xs-5  { width: 41.66666667%; }
.row > .col-xs-6,  .col-xs-6  { width: 50%; }
.row > .col-xs-7,  .col-xs-7  { width: 58.33333333%; }
.row > .col-xs-8,  .col-xs-8  { width: 66.66666667%; }
.row > .col-xs-9,  .col-xs-9  { width: 75%; }
.row > .col-xs-10, .col-xs-10 { width: 83.33333333%; }
.row > .col-xs-11, .col-xs-11 { width: 91.66666667%; }
.row > .col-xs-12, .col-xs-12 { width: 100%; }

/* ── 12B-8. 顯示／隱藏工具（BS5 改成 .d-none .d-*-block）──────────────
   BS3 的斷點：xs <768、sm 768–991、md 992–1199、lg ≥1200。 */
@media (max-width: 767.98px) {
	.hidden-xs { display: none !important; }
	.visible-sm, .visible-md, .visible-lg { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.hidden-sm { display: none !important; }
	.visible-xs, .visible-md, .visible-lg { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.hidden-md { display: none !important; }
	.visible-xs, .visible-sm, .visible-lg { display: none !important; }
}
@media (min-width: 1200px) {
	.hidden-lg { display: none !important; }
	.visible-xs, .visible-sm, .visible-md { display: none !important; }
}

/* ── 12B-9. 關閉鈕 .close（BS5 改叫 .btn-close）────────────────────────
   用到的地方：system 留言彈窗、pm 的三個提示條。
   BS5 的 .btn-close 是「背景 SVG 叉叉」，BS3 的 .close 是「文字 &times;」——
   既有樣板放的是 &times; 文字，所以這裡照 BS3 的文字款補，不要改成 SVG，
   否則會變成「一個叉叉圖 ＋ 一個 × 字」兩個疊在一起。 */
.close {
	float: right;
	padding: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ya-ink);
	background: transparent;
	border: 0;
	cursor: pointer;
	opacity: .5;
	transition: opacity var(--ya-t-col) var(--ya-ease), color var(--ya-t-col) var(--ya-ease);
}
.close:hover, .close:focus { opacity: 1; color: var(--ya-ac); }

/* ⚠ .btn-md 刻意不補：BS5 的 .btn 預設就是中尺寸，補了反而多此一舉。
   樣板留著這個 class 不會有任何副作用。 */

/* ⚠ .caret（BS3 下拉箭頭）刻意不補：BS5 的 .dropdown-toggle::after 已經畫了
   一個箭頭，再給 .caret 一個三角形會變成**兩個箭頭**。空的 <span class="caret">
   本來就不佔位，維持原樣即可。 */


/* =========================================================================
   12C. SYSTEM 區塊（會員登錄 ／ 會員選單 ／ 網站導覽）　2026-09-09
   -------------------------------------------------------------------------
   樣板：themes/<theme>/modules/system/blocks/system_block_{login,user,mainmenu}.tpl
   後台：三個都是 XOOPS 內建的 system 區塊（本機 bid 2／1／5，side=0＝canvas_left）

   🔴 **為什麼這一節在 style.css，不在 wr.css。**
      這三個是 **system 區塊**，後台隨時可以把「顯示於」改成所有頁面。
      `wr.css` 只在商店頁載入（`theme.tpl:92` 的 `$xoops_dirname == 'wr'`），
      樣式放那裡的話，區塊一被搬出商店頁就整塊裸奔 ——
      2026-09-09 的 6D-4「最新商品」區塊剛踩過這個坑，不重蹈。
      👉 **通則：system／全站型區塊的樣式一律進 style.css。**

   🔴 **這三支取代的舊版正在線上出問題**（2026-09-09 實查，不是推測）：
        · mainmenu 內嵌 `<style>` 帶著 `.group{background:yellow}` 除錯樣式
        · mainmenu 內嵌 `<script>` 呼叫 `$('body').scrollspy()` → BS5 沒有
          jQuery 外掛版，每個商店頁都在丟 TypeError
        · user 用 `glyphicon`（BS3 專屬字型，BS5 已移除，本佈景 0 條）→ 圖示全空白
        · login 用 `btn-warning`（黃）＋ `btn-xs`／`btn-block`（BS5 已無）
      三支樣板都已整支重寫，內嵌 style/script 全部清掉。

   ⚠ 欄寬（側欄 260px）與行動版單欄化由 `.ya-zones` 負責（第 10 節），本節不碰。
   ⚠ 區塊標題由 `tpl/theme_block.tpl` 的 `.ya-block__title` 吐（後台區塊標題），
     本節不加任何 ::before 硬寫標題。
   🔴 260px 是很窄的欄 —— 本節所有橫向排列都必須能換行或截斷。
   ⚠ 全站 `border-radius: 0`（CLAUDE.md 技術規範），頭像也不做圓形。
   ========================================================================= */

/* ── 12C-0. 三個區塊共用 ─────────────────────────────────────────────
   把 .ya-block 的內距收掉，讓每一列可以拉到滿寬做 hover 底色
   （做法與 wr.css 第 9／12／17 節的三個 wr 區塊一致）。

   🟡 **老實說：這條目前是空包彈。** 實查全佈景，`.ya-block__body` 只有
      `style.css:1091` 的 `{ font-size: .9rem }` 一條規則，**從來沒有 padding**
      —— 所以「收掉內距」其實沒有收到任何東西。wr.css 裡那三條
      （`:has(.ya-wr-cats)`／`:has(.ya-wr-mc)`／`:has(.ya-wr-new)`）也一樣。
      保留它是為了跟既有四條一致，並且**萬一日後有人替 `.ya-block__body`
      加上內距，這些側欄清單才不會突然縮進去**。
      👉 不要把它當成「列的 1rem 內距是這條給的」—— 那個內距在下面每一列自己身上。 */
.ya-zone-side .ya-block:has(.ya-sys-nav) .ya-block__body,
.ya-zone-side .ya-block:has(.ya-sys-user) .ya-block__body { padding: 0; }


/* ── 12C-1. 會員登錄 `.ya-sys-login` ─────────────────────────────────
   欄位語彙比照 wr.css 第 9 節的商品搜索區塊：框線款、無圓角、focus 換玫瑰金。 */
.ya-sys-login { display: flex; flex-direction: column; gap: .9rem; }

.ya-sys-login__grp { display: flex; flex-direction: column; gap: .35rem; }
.ya-sys-login__lab {
	font-size: .74rem;
	letter-spacing: .12em;
	color: var(--ya-muted);
}
.ya-sys-login__in {
	width: 100%;
	min-width: 0;              /* 260px 欄裡的必備，否則 input 撐爆 grid */
	padding: .6rem .75rem;
	border: 1px solid var(--ya-line);
	border-radius: 0;
	background: var(--ya-white);
	outline: 0;
	box-shadow: none;
	font-family: var(--ya-sans);
	font-size: .85rem;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-login__in:focus { border-color: var(--ya-ac); box-shadow: none; }

.ya-sys-login__remember {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	color: var(--ya-body-2);
	cursor: pointer;
}
.ya-sys-login__remember input { margin: 0; accent-color: var(--ya-ac); }

/* 登入鈕：實心墨藍 → hover 玫瑰金，與全站主要按鈕同一款 */
.ya-sys-login__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100%;
	padding: .75rem 1rem;
	border: 0;
	border-radius: 0;
	background: var(--ya-deep);
	color: var(--ya-white);
	font-family: var(--ya-sans);
	font-size: .82rem;
	letter-spacing: .14em;
	cursor: pointer;
	transition: background var(--ya-t-col) var(--ya-ease), gap .4s var(--ya-ease);
}
.ya-sys-login__go:hover { background: var(--ya-ac); color: var(--ya-white); gap: .9rem; }
.ya-sys-login__go i { font-size: .9rem; }

/* SSL 登入：模組直接吐一段 <a>，結構改不了，只能從外面套 */
.ya-sys-login__ssl { font-size: .78rem; }
.ya-sys-login__ssl a { color: var(--ya-ocean); }
.ya-sys-login__ssl a:hover { color: var(--ya-ac); }

/* 忘記密碼 ／ 帳號註冊：舊版是兩顆滿版黃鈕，改成一列文字連結 */
.ya-sys-login__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	flex-wrap: wrap;
	margin: .2rem 0 0;
	font-size: .78rem;
}
.ya-sys-login__links a {
	color: var(--ya-ocean);
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-login__links a:hover { color: var(--ya-ac); }
.ya-sys-login__sep { color: var(--ya-muted-2); }


/* ── 12C-2. 會員選單 `.ya-sys-user` ──────────────────────────────────
   ⚠ 這一塊只有登入者看得到（b_system_user_show 對訪客 return false）。 */
.ya-sys-user { display: flex; flex-direction: column; }

/* 使用者識別列（舊版沒有，2026-09-09 新增） */
.ya-sys-user__me {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: .7rem;
	align-items: center;
	padding: .9rem 1rem;
	border-bottom: 1px solid var(--ya-line);
	background: var(--ya-paper-warm);
}
.ya-sys-user__avatar {
	width: 40px;
	height: 40px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	/* ⚠ 不做圓形：全站 border-radius: 0 */
}
.ya-sys-user__avatar--none {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ya-muted-2);
	font-size: 1.1rem;
}
.ya-sys-user__name {
	min-width: 0;
	font-family: var(--ya-serif);
	font-size: .92rem;
	letter-spacing: .06em;
	color: var(--ya-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ya-sys-user__nav { display: flex; flex-direction: column; }
.ya-sys-user__item {
	display: grid;
	grid-template-columns: 1.1rem minmax(0, 1fr) auto;
	gap: .65rem;
	align-items: center;
	padding: .7rem 1rem;
	border-bottom: 1px solid var(--ya-line-soft);
	font-size: .84rem;
	color: var(--ya-body-2);
	transition: background var(--ya-t-col) var(--ya-ease),
	            color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-user__item:last-child { border-bottom: 0; }
.ya-sys-user__item:hover { background: var(--ya-paper-warm); color: var(--ya-ac); }
.ya-sys-user__item i { font-size: .95rem; color: var(--ya-ocean); transition: color var(--ya-t-col) var(--ya-ease); }
.ya-sys-user__item:hover i { color: var(--ya-ac); }
.ya-sys-user__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 管理員選單／登出各給一點區別，但不搶視覺重心 */
.ya-sys-user__item--admin i { color: var(--ya-ac); }
.ya-sys-user__item--out { color: var(--ya-muted); }

/* 未讀私訊數 */
.ya-sys-user__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	padding: .1rem .35rem;
	background: var(--ya-ac);
	color: var(--ya-white);
	font-family: var(--ya-en);
	font-size: .78rem;
	line-height: 1.4;
}
.ya-sys-user__item.is-new span:first-of-type { color: var(--ya-ink); }


/* ── 12C-3. 網站導覽 `.ya-sys-nav` ───────────────────────────────────
   🔴 圖示刻意混兩套：首頁那一列是 `bi`（我們自己寫的），模組列是模組給的
      **Font Awesome** class（`$module.icon`，預設 fa-solid fa-caret-right）。
      FA6 由 XOOPS 核心全站載入，兩套都顯示得出來。見樣板檔頭。 */
.ya-sys-nav { display: flex; flex-direction: column; }

.ya-sys-nav__item {
	display: grid;
	grid-template-columns: 1.1rem minmax(0, 1fr);
	gap: .65rem;
	align-items: center;
	padding: .72rem 1rem;
	border-bottom: 1px solid var(--ya-line-soft);
	font-size: .85rem;
	color: var(--ya-body-2);
	transition: background var(--ya-t-col) var(--ya-ease),
	            color var(--ya-t-col) var(--ya-ease),
	            padding-left .4s var(--ya-ease);
}
.ya-sys-nav__item:hover {
	background: var(--ya-paper-warm);
	color: var(--ya-ac);
	padding-left: 1.3rem;
}
.ya-sys-nav__item i {
	font-size: .85rem;
	color: var(--ya-muted);
	text-align: center;
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-nav__item:hover i { color: var(--ya-ac); }
.ya-sys-nav__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 目前所在的模組（或首頁）*/
.ya-sys-nav__item.is-on {
	background: var(--ya-paper-warm);
	color: var(--ya-ink);
	box-shadow: inset 2px 0 0 var(--ya-ac);
}
.ya-sys-nav__item.is-on i { color: var(--ya-ac); }

/* 子連結：只有目前所在模組才有（見樣板檔頭）*/
.ya-sys-nav__sub { display: flex; flex-direction: column; }
.ya-sys-nav__item--sub {
	padding-left: 2.4rem;
	font-size: .8rem;
	color: var(--ya-muted);
	background: var(--ya-paper-warm);
}
.ya-sys-nav__item--sub:hover { padding-left: 2.7rem; }
.ya-sys-nav__item--sub.is-on { box-shadow: none; }

/* 最後一列不要留下框線（三個區塊共用這條收尾）*/
.ya-sys-nav > .ya-sys-nav__item:last-child,
.ya-sys-nav > .ya-sys-nav__sub:last-child .ya-sys-nav__item:last-child { border-bottom: 0; }


/* ── 12C-9. 響應式 ───────────────────────────────────────────────────
   🔴 斷點是 **1100px 不是 900px**：`.ya-zones.has-left` 那組欄寬整個包在
      `@media (min-width: 1101px)` 裡（第 10 節），所以 **≤1100px 時側欄就已經
      退到主內容下方、變成整頁寬**了 —— 不再受 260px 限制。
      ⚠ 這裡曾經誤寫成 900px，那樣 900–1100px 這段（直式平板）會落空。 */
@media (max-width: 1100px) {
	.ya-sys-user__item,
	.ya-sys-nav__item { padding-top: .85rem; padding-bottom: .85rem; }
}



/* =========================================================================
   12G. SYSTEM 側欄區塊 5 支（搜索／線上會員／積分排行榜／歡迎新會員／網站風格）
        2026-09-10
   -------------------------------------------------------------------------
   樣板：themes/<theme>/modules/system/blocks/system_block_{search,online,
         topusers,newusers,themes}.tpl
   後台：bid 3／7／8／9／12，**五支都是 `side=0`（左側欄）、`module_id=0`（全站）、
         目前 `visible=0`**。

   🔴 **打開前一定要知道：這五支都會落在 `canvas_left`，而 news 三頁的滿版
      形象帶與左側欄不相容** —— `news.css` 的 `.ya-nw-bleed` 用
      `margin-left: calc(50% - 50vw)`，那招要求容器在視窗裡置中；側欄一出現
      內容區右移 130px，形象帶就溢出、整頁橫捲。
      👉 要開的話，要嘛先修那條 bleed，要嘛把區塊的「顯示於」改成
         **不含 news 的模組**（`module_id` 指定成 wr 之類）。
      （同一個坑 2026-09-10 在 `news_block_top` 已經完整記過一次。）

   ⚠ 外框與標題一律由 `tpl/theme_block.tpl` 的 `.ya-block` 提供，
     這五支樣板都只吐內容，**沒有自己再包卡片**。
   ⚠ 欄位語彙沿用 12C-1「會員登錄」：框線款、無圓角、focus 換玫瑰金。
   ⚠ 側欄寬 260px，所有 `input`／`img` 都要 `min-width: 0` 或固定寬，否則撐爆 grid。
   ========================================================================= */

/* ── 12G-0. 五支共用 ───────────────────────────────────────────────── */
.ya-zone-side .ya-block:has(.ya-sys-rank) .ya-block__body,
.ya-zone-side .ya-block:has(.ya-sys-newu) .ya-block__body { padding: 0; }

/* 名次數字：與 news 熱門區塊 `.ya-nw-hot__no` 同一套（英數字體、前三名玫瑰金） */
.ya-sys-rank__no {
	flex: 0 0 auto;
	font-family: var(--ya-en);
	font-size: .9rem;
	letter-spacing: .06em;
	color: var(--ya-muted-2);
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-rank__no.is-top { color: var(--ya-ac); }

/* 頭像：圓形是全站直角規則的既有例外（見 CLAUDE.md）。
   沒有頭像時用帳號首字的替代圓，比 1×1 的 blank.gif 好認。 */
.ya-sys-rank__ava,
.ya-sys-newu__ava {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--ya-mist);
}
.ya-sys-rank__ava img,
.ya-sys-newu__ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ya-ease);
}
.ya-sys-rank__ava--none,
.ya-sys-newu__ava--none {
	font-family: var(--ya-serif);
	font-size: .95rem;
	color: var(--ya-ac);
	text-transform: uppercase;
}


/* ── 12G-1. 搜索 `.ya-sys-search` ────────────────────────────────────
   欄位＋送出鈕併成一列（側欄只有 260px，上下疊會太高）。 */
.ya-sys-search { display: flex; flex-direction: column; gap: .6rem; }
.ya-sys-search__row { display: flex; align-items: stretch; gap: 0; }
.ya-sys-search__in {
	flex: 1 1 auto;
	min-width: 0;                     /* 260px 欄裡的必備，否則 input 撐爆 */
	padding: .6rem .75rem;
	border: 1px solid var(--ya-line);
	border-right: 0;                  /* 與右邊的鈕併成一體，中間不留雙線 */
	border-radius: 0;
	background: var(--ya-white);
	outline: 0;
	box-shadow: none;
	font-family: var(--ya-sans);
	font-size: .85rem;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-search__in:focus { border-color: var(--ya-ac); box-shadow: none; }
/* focus 時右邊那條線由鈕負責，兩者要一起換色，否則接縫會斷一截 */
.ya-sys-search__row:focus-within .ya-sys-search__go { background: var(--ya-ac); }
/* ⚠ type=search 在 WebKit 會長出一顆原生的清除叉，與本佈景的簡潔感衝突 */
.ya-sys-search__in::-webkit-search-decoration,
.ya-sys-search__in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ya-sys-search__go {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	border: 0;
	border-radius: 0;
	background: var(--ya-deep);
	color: var(--ya-white);
	cursor: pointer;
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-sys-search__go:hover { background: var(--ya-ac); }
.ya-sys-search__go i { font-size: .95rem; line-height: 1; }

.ya-sys-search__adv {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .76rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	transition: gap var(--ya-t-move) var(--ya-ease), color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-search__adv:hover { gap: .8rem; color: var(--ya-ac); }
.ya-sys-search__adv i { font-size: .7rem; }


/* ── 12G-2. 線上會員 `.ya-sys-online` ────────────────────────────────
   ⚠ `online_total` 是模組組好的一整句，不要拆；`online_names` 是整串 <a>。 */
.ya-sys-online { display: flex; flex-direction: column; gap: .9rem; }
.ya-sys-online__lead {
	margin: 0;
	font-size: .82rem;
	line-height: 1.75;
	color: var(--ya-body-2);
	text-wrap: pretty;
}
/* 兩格數字並排，數字用英數字體，與全站的篇數／價格一致 */
.ya-sys-online__stats { display: flex; gap: .6rem; }
.ya-sys-online__stat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .7rem .8rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
}
.ya-sys-online__lab { font-size: .72rem; letter-spacing: .12em; color: var(--ya-muted); }
.ya-sys-online__n {
	font-family: var(--ya-en);
	font-size: 1.35rem;
	line-height: 1;
	color: var(--ya-ink);
}
/* 會員名單：模組吐整串 <a>，只能從外面套 */
.ya-sys-online__names {
	margin: 0;
	font-size: .78rem;
	line-height: 1.8;
	color: var(--ya-muted);
	word-break: break-word;           /* 帳號名可能很長，260px 欄裡要能斷 */
}
.ya-sys-online__names a { color: var(--ya-ocean); transition: color var(--ya-t-col) var(--ya-ease); }
.ya-sys-online__names a:hover { color: var(--ya-ac); }

.ya-sys-online__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .76rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	transition: gap var(--ya-t-move) var(--ya-ease), color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-online__more:hover { gap: .8rem; color: var(--ya-ac); }
.ya-sys-online__more i { font-size: .7rem; }


/* ── 12G-3. 積分排行榜 `.ya-sys-rank` ────────────────────────────────
   每一列拉到滿寬做 hover 底色（做法與 12C-2／12C-3 的兩個 system 區塊一致）。 */
.ya-sys-rank { list-style: none; margin: 0; padding: 0; }
.ya-sys-rank__it {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--ya-line-soft);
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-sys-rank__it:last-child { border-bottom: 0; }
.ya-sys-rank__it:hover { background: var(--ya-mist); }
.ya-sys-rank__it:hover .ya-sys-rank__no { color: var(--ya-ac); }
.ya-sys-rank__it:hover .ya-sys-rank__ava img { transform: scale(1.08); }

.ya-sys-rank__body {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}
.ya-sys-rank__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .85rem;
	color: var(--ya-body);
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-rank__it:hover .ya-sys-rank__name { color: var(--ya-ac); }
/* 發文數：英數字體，比名字小一階、顏色淡，不搶視線 */
.ya-sys-rank__posts {
	flex: 0 0 auto;
	font-family: var(--ya-en);
	font-size: .8rem;
	letter-spacing: .06em;
	color: var(--ya-muted-2);
}


/* ── 12G-4. 歡迎新會員 `.ya-sys-newu` ────────────────────────────────
   與 12G-3 同一套版型，差別只有「沒有名次、附註是加入日期」。 */
.ya-sys-newu { list-style: none; margin: 0; padding: 0; }
.ya-sys-newu__it {
	border-bottom: 1px solid var(--ya-line-soft);
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-sys-newu__it:last-child { border-bottom: 0; }
.ya-sys-newu__it:hover { background: var(--ya-mist); }
.ya-sys-newu__link {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem 0;
}
.ya-sys-newu__it:hover .ya-sys-newu__ava img { transform: scale(1.08); }

.ya-sys-newu__body { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ya-sys-newu__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .85rem;
	color: var(--ya-body);
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-sys-newu__it:hover .ya-sys-newu__name { color: var(--ya-ac); }
.ya-sys-newu__date { font-size: .72rem; letter-spacing: .08em; color: var(--ya-muted-2); }


/* ── 12G-5. 網站風格 `.ya-sys-themes` ────────────────────────────────
   本體是模組 render 好的 `<select>`（或縮圖模式的 `<img>` ＋ `_GO` 鈕），
   結構改不了 → 外面掛共用的 `.ya-xform` 接管層（12E 節）就好，
   **不要在這裡複製一份欄位規則**。這裡只補側欄寬度下的收斂。 */
.ya-sys-themes select {
	width: 100%;
	min-width: 0;                     /* 260px 欄裡的必備 */
}
/* 尾巴那句「(共 N 個佈景)」是模組固定接在 select 後面的 `<br>(…)` */
.ya-sys-themes {
	font-size: .78rem;
	line-height: 1.9;
	color: var(--ya-muted);
}
.ya-sys-themes strong { color: var(--ya-ink); font-family: var(--ya-en); font-weight: 400; }
/* 縮圖模式（options[0]==1）才會有的螢幕截圖 */
.ya-sys-themes img { max-width: 100%; height: auto; margin-bottom: .6rem; }


/* ── 12G-9. 響應式 ───────────────────────────────────────────────────
   🔴 斷點是 **1100px**（同 12C-9）：`.ya-zones.has-left` 那組欄寬包在
      `@media (min-width: 1101px)` 裡，≤1100px 時側欄已經退到主內容下方、
      變成整頁寬，不再受 260px 限制。 */
@media (max-width: 1100px) {
	.ya-sys-rank__it { padding-top: .85rem; padding-bottom: .85rem; }
	.ya-sys-newu__link { padding-top: .85rem; padding-bottom: .85rem; }
}

/* =========================================================================
   12D. 登入頁 ／ 忘記密碼（`/user.php`）　2026-09-09
   -------------------------------------------------------------------------
   樣板：themes/<theme>/modules/system/system_userform.tpl
   進入點：`/user.php`（未登入時），也是側欄「會員登錄」區塊的落地頁

   🔴 改版前是 c_c 遺留的 **Bootstrap 3 橫式表單**：`form-horizontal`＋
      `col-sm-2 control-label`＋`col-sm-offset-2` —— 前者與 `col-sm-offset-*`
      在 **BS5 都不存在**（BS5 的偏移叫 `offset-sm-*`），版面整個攤平；
      內嵌 `<style>` 還用了 **`var(--accent)`** 這個**本佈景沒有的變數**
      （楓庵是 `--ya-ac`）→ 那條 4px 左邊條退成黑色。

   ⚠ 這一頁**有經過 theme.tpl**（跟 `system_redirect.tpl` 不一樣），
     所以色票、字型、`.ya-content` 那些都吃得到，這一節只寫版面。
   ⚠ 全站 `border-radius: 0`。
   ========================================================================= */

/* 兩張卡片直向排列，置中、限寬 —— 登入頁不需要用到整個版心 */
.ya-uf {
	display: flex;
	flex-direction: column;
	gap: clamp(1.6rem, 3vw, 2.4rem);
	max-width: 34rem;
	margin: 0 auto;
	padding: clamp(1rem, 3vw, 2rem) 0 clamp(2.4rem, 5vw, 3.6rem);
}

.ya-uf__card {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.5rem, 4vw, 2.4rem);
}
/* 忘記密碼是次要動作 → 用暖白底退一階，不跟登入卡搶視覺 */
.ya-uf__card--lost {
	background: var(--ya-paper-warm);
	scroll-margin-top: calc(var(--ya-head-h, 5rem) + 1.5rem);  /* #lost 錨點不要被固定頁首蓋住 */
}

/* 抬頭：菱形＋漸層線，與 .ya-block__title／.ya-wr-sechead 同一款 */
.ya-uf__head {
	position: relative;
	padding-top: 1.2rem;
	margin-bottom: 1.8rem;
}
.ya-uf__head::before {
	content: '';
	position: absolute; top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, var(--ya-ac) 0%, var(--ya-line) 62%, transparent 100%);
}
.ya-uf__head::after {
	content: '';
	position: absolute; top: -.24rem; left: 0;
	width: .44rem; height: .44rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}
.ya-uf__en {
	display: block;
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .28em;
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--ya-ac);
}
/* ⚠ `.h2` 已被 style.css 中和，字級由這裡給 —— <h1> 與 .h2 兩種標記共用 */
.ya-uf__zh {
	display: block;
	margin: .2rem 0 0;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	letter-spacing: .14em;
	color: var(--ya-ink);
}

.ya-uf__note {
	margin: 0 0 1.6rem;
	font-size: .85rem;
	line-height: 1.9;
	color: var(--ya-body-2);
}

/* ── 表單 ─────────────────────────────────────────────────────────
   欄位語彙與側欄「會員登錄」區塊（12C-1 節）一致，只是這裡欄位更寬。 */
.ya-uf__form { display: flex; flex-direction: column; gap: 1.1rem; }

.ya-uf__grp { display: flex; flex-direction: column; gap: .4rem; }
.ya-uf__lab {
	font-size: .78rem;
	letter-spacing: .12em;
	color: var(--ya-muted);
}
.ya-uf__in {
	width: 100%;
	min-width: 0;
	padding: .8rem .95rem;
	border: 1px solid var(--ya-line);
	border-radius: 0;
	background: var(--ya-white);
	outline: 0;
	box-shadow: none;
	font-family: var(--ya-sans);
	font-size: .9rem;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
.ya-uf__in:focus { border-color: var(--ya-ac); box-shadow: none; }

.ya-uf__check {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .82rem;
	color: var(--ya-body-2);
	cursor: pointer;
}
.ya-uf__check input { margin: 0; accent-color: var(--ya-ac); }

/* 送出鈕：登入＝實心墨藍（主要動作）；發送密碼＝框線款（次要動作） */
.ya-uf__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	margin-top: .3rem;
	padding: .85rem 1.2rem;
	border: 1px solid var(--ya-deep);
	border-radius: 0;
	background: var(--ya-deep);
	color: var(--ya-white);
	font-family: var(--ya-sans);
	font-size: .85rem;
	letter-spacing: .14em;
	cursor: pointer;
	transition: background var(--ya-t-col) var(--ya-ease),
	            border-color var(--ya-t-col) var(--ya-ease),
	            color var(--ya-t-col) var(--ya-ease), gap .4s var(--ya-ease);
}
.ya-uf__go:hover {
	background: var(--ya-ac);
	border-color: var(--ya-ac);
	color: var(--ya-white);
	gap: 1rem;
}
.ya-uf__go--ghost {
	border-color: var(--ya-line);
	background: transparent;
	color: var(--ya-ocean);
}
.ya-uf__go--ghost:hover { border-color: var(--ya-ac); background: transparent; color: var(--ya-ac); }
.ya-uf__go i { font-size: .95rem; }

/* 註冊引導：只有後台開放註冊時樣板才輸出（見樣板檔頭與 theme_autorun.php） */
.ya-uf__alt {
	margin: 1.3rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--ya-line-soft);
	text-align: center;
	font-size: .82rem;
}
.ya-uf__alt a { color: var(--ya-ocean); transition: color var(--ya-t-col) var(--ya-ease); }
.ya-uf__alt a:hover { color: var(--ya-ac); }


/* =========================================================================
   12E. 全站搜尋結果頁（`/search.php`）＋ `.ya-xform` 舊版表單接管層　2026-09-09
   -------------------------------------------------------------------------
   樣板：themes/<theme>/modules/system/system_search.tpl
         themes/<theme>/modules/system/system_search_item.tpl（一筆結果）

   🔴 **`.ya-xform` 是「舊版表格表單」的接管層，不要跟 `.ya-wr-xform` 搞混。**
        `.ya-xform`（本節，style.css）     ← XOOPS **舊版 renderer**：
                                             `table.outer` ＋ `td.head`／`td.even`
                                             ＋ `tr.foot` ＋ `input.formButton`
        `.ya-wr-xform`（wr.css 第 13-3 節）← **Bootstrap 5 renderer**：
                                             `.row`／`.form-control`／`.btn`
      兩者接管的 HTML 完全不同，**不能互換**。
      判斷方法：模組有沒有呼叫 `XoopsFormRendererBootstrap5`
      —— wr 的表單有（所以用 `.ya-wr-xform`），`search.php` **沒有**（所以用這一層）。
      ⚠ 另外 `wr.css` 只在商店頁載入，系統頁一律用本節這一層。

   🔴 改版前實查：`.outer`／`td.head`／`td.even`／`.formButton` 在
      **style.css／xoops.css／bootstrap.css 三支的命中數都是 0**
      → 搜尋表單是**完全沒有樣式**的裸表格。

   ⚠ 這一頁**有**經過 theme.tpl，色票／字型都吃得到。
   ⚠ 全站 `border-radius: 0`。
   ========================================================================= */

.ya-sr { display: flex; flex-direction: column; gap: clamp(1.6rem, 3vw, 2.4rem); }

/* ── 12E-1. 抬頭 ─────────────────────────────────────────────────
   菱形＋漸層線，與 .ya-block__title／.ya-uf__head 同一款。 */
.ya-sr__head {
	position: relative;
	padding-top: 1.2rem;
}
.ya-sr__head::before {
	content: '';
	position: absolute; top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, var(--ya-ac) 0%, var(--ya-line) 62%, transparent 100%);
}
.ya-sr__head::after {
	content: '';
	position: absolute; top: -.24rem; left: 0;
	width: .44rem; height: .44rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}
.ya-sr__en {
	display: block;
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .28em;
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--ya-ac);
}
.ya-sr__zh {
	display: block;
	margin: .2rem 0 0;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	letter-spacing: .14em;
	color: var(--ya-ink);
}
.ya-sr__kw {
	margin: .8rem 0 0;
	font-size: .88rem;
	color: var(--ya-body-2);
	overflow-wrap: anywhere;      /* 關鍵字可能很長且無空白 */
}
.ya-sr__kwlab {
	margin-right: .5rem;
	font-size: .76rem;
	letter-spacing: .12em;
	color: var(--ya-muted);
}
.ya-sr__kw strong { color: var(--ya-ac); font-weight: 500; }
.ya-sr__count { margin: .5rem 0 0; font-size: .8rem; color: var(--ya-muted); }

/* 關鍵字太短的警告（本站 keyword_min = 5） */
.ya-sr__warn {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 0;
	padding: .9rem 1.1rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-paper-warm);
	font-size: .84rem;
	line-height: 1.9;
	color: var(--ya-body-2);
	overflow-wrap: anywhere;
}
.ya-sr__warn i { color: var(--ya-ac); line-height: 1.9; }
.ya-sr__warn strong { color: var(--ya-ink); font-weight: 500; }

.ya-sr__none {
	margin: 0;
	padding: 2rem 1rem;
	text-align: center;
	font-size: .88rem;
	color: var(--ya-muted);
}

/* ── 12E-2. 模組分組 ─────────────────────────────────────────── */
.ya-sr__group { display: flex; flex-direction: column; }
/* ⚠ `.h2` 已被 style.css 中和，字級由這裡給 */
.ya-sr__mod {
	margin: 0 0 .2rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--ya-line);
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1.02rem;
	letter-spacing: .12em;
	color: var(--ya-ocean);
}

/* ── 12E-3. 一筆結果 ─────────────────────────────────────────────
   🔴 中間欄一定要 `minmax(0, 1fr)` —— 只寫 `1fr` 時長標題或長網址會撐爆 grid。 */
.ya-sr__list { display: flex; flex-direction: column; }
.ya-sr__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding: 1rem .2rem;
	border-bottom: 1px solid var(--ya-line-soft);
	transition: background var(--ya-t-col) var(--ya-ease);
}
.ya-sr__item:hover { background: var(--ya-paper-warm); }
.ya-sr__item:last-child { border-bottom: 0; }
/* 沒有縮圖時讓內文佔滿整列（`:has()` 本佈景已在多處使用）*/
.ya-sr__item:not(:has(.ya-sr__thumb)) { grid-template-columns: minmax(0, 1fr); }

.ya-sr__thumb {
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: var(--ya-paper-warm);
	border: 1px solid var(--ya-line);
}
.ya-sr__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--ya-ease);
}
.ya-sr__item:hover .ya-sr__thumb img { transform: scale(1.06); }

.ya-sr__body { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.ya-sr__title {
	font-family: var(--ya-serif);
	font-size: .98rem;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--ya-ink);
	overflow-wrap: anywhere;
	transition: color var(--ya-t-col) var(--ya-ease);
}
.ya-sr__title:hover { color: var(--ya-ac); }

.ya-sr__meta {
	display: flex;
	align-items: center;
	gap: .45rem;
	flex-wrap: wrap;
	margin: 0;
	font-size: .78rem;
	color: var(--ya-muted);
}
.ya-sr__meta a { color: var(--ya-ocean); transition: color var(--ya-t-col) var(--ya-ease); }
.ya-sr__meta a:hover { color: var(--ya-ac); }
.ya-sr__dot { color: var(--ya-muted-2); }

/* 「顯示全部結果」 */
.ya-sr__all { margin: .9rem 0 0; font-size: .82rem; }
.ya-sr__all a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	transition: gap .4s var(--ya-ease), color var(--ya-t-col) var(--ya-ease);
}
.ya-sr__all a:hover { gap: .8rem; color: var(--ya-ac); }
.ya-sr__all i { font-size: .7rem; }

/* ── 12E-4. 分頁（舊版是 <table> ＋ align，改成 flex）───────────── */
.ya-sr__pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1.2rem;
	border-top: 1px solid var(--ya-line);
}
.ya-sr__pg {
	padding: .55rem 1.1rem;
	border: 1px solid var(--ya-line);
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	transition: border-color var(--ya-t-col), background var(--ya-t-col), color var(--ya-t-col);
}
.ya-sr__pg:hover { border-color: var(--ya-ac); background: var(--ya-ac); color: var(--ya-white); }
/* 只有「下一頁」時把它推到右邊（space-between 在單一子項時會靠左）*/
.ya-sr__pg--next:only-child { margin-left: auto; }

/* ── 12E-5. 搜尋表單外框 ─────────────────────────────────────── */
.ya-sr__formcard {
	border: 1px solid var(--ya-line);
	background: var(--ya-paper-warm);
	padding: clamp(1.3rem, 3vw, 2rem);
}
.ya-sr__formcard .ya-sr__head { margin-bottom: 1.6rem; }

/* ── 12E-6. `.ya-xform`：XOOPS **舊版表格表單**接管層 ─────────────
   🔴 見本節開頭的說明：這一層對付的是 `table.outer` 那種舊版輸出，
      **不是** BS5 的 `.row`／`.form-control`（那是 wr.css 的 `.ya-wr-xform`）。
   ⚠ 選擇器一律限定在 `.ya-xform` 底下 —— `.outer`／`.head`／`.even` 是極
     通用的 class 名，不設限會波及整站。 */
.ya-xform table,
.ya-xform table.outer {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;             /* 蓋掉 HTML 的 cellspacing="1" */
	background: transparent;
}
/* 表單標題那一列（<th colspan="2">）*/
.ya-xform th {
	padding: 0 0 1rem;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: .95rem;
	letter-spacing: .12em;
	color: var(--ya-ink);
	text-align: left;
}
.ya-xform td {
	padding: .55rem 0;
	vertical-align: top;
	background: transparent;
	border: 0;
}
/* 左欄＝欄位名，右欄＝欄位本體 */
.ya-xform td.head {
	width: 8.5rem;
	padding-right: 1rem;
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--ya-muted);
	white-space: nowrap;
}
.ya-xform td.even { color: var(--ya-body-2); font-size: .85rem; line-height: 1.9; }
/* 「* = 必填」那一列 */
.ya-xform tr.foot td {
	padding-top: 1rem;
	font-size: .76rem;
	color: var(--ya-muted-2);
}
.ya-xform .caption-marker { color: var(--ya-ac); margin-left: .2em; }
.ya-xform .xoops-form-element-caption,
.ya-xform .xoops-form-element-caption-required { display: inline; }

/* 欄位本體：框線款，與 .ya-uf__in／.ya-sys-login__in 同一套語彙 */
.ya-xform input[type="text"],
.ya-xform input[type="search"],
.ya-xform input[type="email"],
.ya-xform select {
	max-width: 100%;
	padding: .55rem .7rem;
	border: 1px solid var(--ya-line);
	border-radius: 0;
	background: var(--ya-white);
	outline: 0;
	box-shadow: none;
	font-family: var(--ya-sans);
	font-size: .85rem;
	color: var(--ya-ink);
	transition: border-color var(--ya-t-col) var(--ya-ease);
}
.ya-xform input[type="text"]:focus,
.ya-xform input[type="search"]:focus,
.ya-xform input[type="email"]:focus,
.ya-xform select:focus { border-color: var(--ya-ac); }

/* 核取方塊那一列（「搜索範圍」會排出好幾個模組）*/
.ya-xform input[type="checkbox"],
.ya-xform input[type="radio"] { margin: 0 .35rem 0 0; accent-color: var(--ya-ac); }
.ya-xform td.even label {
	display: inline-flex;
	align-items: center;
	margin-right: .9rem;
	font-size: .84rem;
	color: var(--ya-body-2);
	cursor: pointer;
}

/* 送出鈕：模組吐的是 `input.formButton`，只能從外面套 */
.ya-xform .formButton,
.ya-xform input[type="submit"] {
	display: inline-block;
	padding: .7rem 1.7rem;
	border: 1px solid var(--ya-deep);
	border-radius: 0;
	background: var(--ya-deep);
	color: var(--ya-white);
	font-family: var(--ya-sans);
	font-size: .82rem;
	letter-spacing: .14em;
	cursor: pointer;
	transition: background var(--ya-t-col) var(--ya-ease), border-color var(--ya-t-col) var(--ya-ease);
}
.ya-xform .formButton:hover,
.ya-xform input[type="submit"]:hover { background: var(--ya-ac); border-color: var(--ya-ac); }

/* ── 12E-9. 響應式 ──────────────────────────────────────────────
   舊版表單的兩欄在窄螢幕擠不下 → 攤成上下兩行。
   ⚠ 用 `display: block` 讓 <td> 換行，不要去改 <table> 的結構（改不到）。 */
@media (max-width: 700px) {
	.ya-xform table, .ya-xform tbody, .ya-xform tr, .ya-xform td, .ya-xform th { display: block; width: auto; }
	.ya-xform td.head { width: auto; padding: 0 0 .3rem; white-space: normal; }
	.ya-xform td.even { padding: 0 0 1rem; }
	.ya-xform input[type="text"], .ya-xform input[type="search"], .ya-xform select { width: 100%; }
	.ya-sr__item { grid-template-columns: 56px minmax(0, 1fr); gap: .8rem; }
	.ya-sr__thumb { width: 56px; height: 56px; }
}


/* =========================================================================
   12F. 會員資料頁（`/userinfo.php`）　2026-09-09
   -------------------------------------------------------------------------
   樣板：themes/<theme>/modules/system/system_userinfo.tpl

   🔴 改版前的舊版用 **`<input type="button" onclick="location='…'">` 當導覽**
      —— 沒有 JS 就完全不能點。這一版全部改成真的 `<a>`（`.ya-ui__act`）。
   🔴 舊版還用了 **BS3 的表格情境色** `<tr class="active">`／`<td class="warning">`
      —— BS5 改叫 `.table-active`／`.table-warning`，舊名在
      style.css／xoops.css／bootstrap.css **命中數都是 0** → 根本沒有樣式。

   ⚠ 「這位會員的發表內容」那份清單**直接沿用第 12E 節的 `.ya-sr__*`**
     （搜尋結果那一套）—— 視覺元素完全相同（縮圖＋標題＋時間），不複製第二份。
     本佈景多處採同樣做法（例：`wr_order.html` 沿用第 10／11 節的 class）。
   ⚠ 這一頁**有**經過 theme.tpl，色票與字型都吃得到。
   ⚠ 全站 `border-radius: 0`（頭像也不做圓形）。
   ========================================================================= */

.ya-ui { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2rem); }

/* ── 12F-1. 抬頭（與 12D／12E 同一款）────────────────────────────── */
.ya-ui__head { position: relative; padding-top: 1.2rem; }
.ya-ui__head::before {
	content: '';
	position: absolute; top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg, var(--ya-ac) 0%, var(--ya-line) 62%, transparent 100%);
}
.ya-ui__head::after {
	content: '';
	position: absolute; top: -.24rem; left: 0;
	width: .44rem; height: .44rem;
	background: var(--ya-ac);
	transform: rotate(45deg);
}
.ya-ui__en {
	display: block; margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .28em;
	font-size: .72rem;
	text-transform: uppercase;
	color: var(--ya-ac);
}
.ya-ui__zh {
	display: block; margin: .2rem 0 0;
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	letter-spacing: .14em;
	color: var(--ya-ink);
}

/* ── 12F-2. 動作列 ──────────────────────────────────────────────
   ⚠ 這些現在是真的 <a>（舊版是 input[type=button]）。 */
.ya-ui__acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.ya-ui__act {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.1rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--ya-ocean);
	transition: border-color var(--ya-t-col) var(--ya-ease),
	            background var(--ya-t-col) var(--ya-ease),
	            color var(--ya-t-col) var(--ya-ease);
}
.ya-ui__act:hover { border-color: var(--ya-ac); background: var(--ya-ac); color: var(--ya-white); }
.ya-ui__act i { font-size: .85rem; }
/* 刪除帳號：平常只是灰的，hover 才轉成警示色 —— 不要一直紅著嚇人 */
.ya-ui__act--danger { color: var(--ya-muted); }
.ya-ui__act--danger:hover { border-color: #9d5b4d; background: #9d5b4d; color: var(--ya-white); }

/* ── 12F-3. 卡片 ────────────────────────────────────────────────── */
.ya-ui__card {
	border: 1px solid var(--ya-line);
	background: var(--ya-white);
	padding: clamp(1.2rem, 3vw, 1.8rem);
}
.ya-ui__card--sig { background: var(--ya-paper-warm); }
/* ⚠ `.h2` 已被 style.css 中和，字級由這裡給 */
.ya-ui__sub {
	margin: 0 0 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--ya-line);
	font-family: var(--ya-serif);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: .12em;
	color: var(--ya-ocean);
}

/* ── 12F-4. 頭像 ＋ 頭銜 ─────────────────────────────────────────── */
.ya-ui__idrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--ya-line-soft);
}
.ya-ui__avatar {
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--ya-line);
	background: var(--ya-paper-warm);
	/* ⚠ 不做圓形：全站 border-radius: 0 */
}
.ya-ui__avatar--none {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ya-muted-2);
	font-size: 1.9rem;
}
.ya-ui__rank { display: flex; align-items: center; gap: .6rem; }
/* $user_rankimage 是模組拼好的 <img alt="">，只能從外面限制尺寸 */
.ya-ui__rankimg img { max-height: 1.6rem; width: auto; display: block; }
.ya-ui__ranktitle {
	font-family: var(--ya-serif);
	font-size: .92rem;
	letter-spacing: .1em;
	color: var(--ya-ink);
}

/* ── 12F-5. 定義清單（舊版是 <table>）───────────────────────────────
   每一組包在自己的 <div> 裡 → 用 grid 排成「欄位名 ／ 值」兩欄。
   🔴 值那一欄要 `minmax(0, 1fr)`：個人網站是長網址、簽名可能很長，
      沒有的話會把整個 grid 撐爆。 */
.ya-ui__dl,
.ya-ui__stats { margin: 0; display: flex; flex-direction: column; }
.ya-ui__dl > div,
.ya-ui__stats > div {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: .5rem 1rem;
	padding: .65rem 0;
	border-bottom: 1px solid var(--ya-line-soft);
}
.ya-ui__dl > div:last-child,
.ya-ui__stats > div:last-child { border-bottom: 0; }
.ya-ui__dl dt,
.ya-ui__stats dt {
	margin: 0;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--ya-muted);
}
.ya-ui__dl dd,
.ya-ui__stats dd {
	margin: 0;
	min-width: 0;
	font-size: .88rem;
	line-height: 1.9;
	color: var(--ya-body-2);
	overflow-wrap: anywhere;      /* 長網址／長字串不要撐破版面 */
}
.ya-ui__mail { font-family: var(--ya-sans); }
.ya-ui__num { font-family: var(--ya-en); font-size: 1.05rem; color: var(--ya-ink); }

/* `.ya-ui__raw` ＝ 內容是**模組拼好的 HTML**，我們只能從外面套色
   （個人網站的 <a>、站內短訊的 javascript: <a><img>、顯示全部的 <a>）。
   ⚠ 這幾處補不了 title／noopener，見樣板檔頭。 */
.ya-ui__raw a { color: var(--ya-ocean); transition: color var(--ya-t-col) var(--ya-ease); }
.ya-ui__raw a:hover { color: var(--ya-ac); }
.ya-ui__raw img { max-height: 1.3rem; width: auto; vertical-align: middle; }

/* ── 12F-6. 個人簽名 ────────────────────────────────────────────── */
.ya-ui__sig {
	font-size: .88rem;
	line-height: 2;
	color: var(--ya-body-2);
	overflow-wrap: anywhere;
}
.ya-ui__sig a { color: var(--ya-ocean); }
.ya-ui__sig a:hover { color: var(--ya-ac); }

/* ── 12F-9. 響應式 ──────────────────────────────────────────────── */
@media (max-width: 700px) {
	/* 兩欄的定義清單在窄螢幕改成上下排 */
	.ya-ui__dl > div,
	.ya-ui__stats > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
	.ya-ui__act { flex: 1 1 auto; justify-content: center; }
}


/* =========================================================================
   13. 響應式
   主要斷點 1100px（README「Spacing / Layout」）—— 以下為抽屜式導覽、單欄。
   ========================================================================= */
@media (max-width: 1100px) {

	.ya-burger { display: block; }
	.ya-search-trigger { display: none; }

	/* ── 導覽變成深色全螢幕抽屜（設計稿 navPos/navRight/navBg 等狀態）── */
	.ya-nav {
		position: fixed;
		top: 0; right: -100%;
		width: 100%; height: 100vh;
		height: 100dvh;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 1.8rem;
		overflow-y: auto;
		background: var(--ya-deep);
		padding: 8.5rem 2rem 3rem;
		color: var(--ya-white);
		transition: right .45s var(--ya-ease);
		z-index: 105;
	}
	body.is-scrolled .ya-nav { padding-top: 6.5rem; }
	body.is-nav-open .ya-nav { right: 0; }

	.ya-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.ya-nav__item { width: 100%; }

	.ya-nav__link { padding: .9rem 0; }
	.ya-nav__no { opacity: .6; }
	/* 抽屜裡不做中英捲動（沒有 hover），直接兩行都看得到太吵 —— 只留中文 */
	.ya-nav__roll { height: 1.5rem; }
	.ya-nav__item:hover .ya-nav__zh,
	.ya-nav__item:hover .ya-nav__en { transform: none; }

	/* 手風琴開合鈕 */
	.ya-nav__chev {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		align-self: stretch;
		padding: .2rem .3rem .2rem 1.6rem;
		border: 0; background: none;
		cursor: pointer;
		color: inherit;
	}
	.ya-nav__chev span {
		display: block;
		width: .5rem; height: .4rem;
		background: var(--ya-ac-soft);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		transition: transform .45s var(--ya-ease);
	}
	.ya-nav__item.is-open > .ya-nav__row .ya-nav__chev span { transform: rotate(180deg); }

	/* 面板改成內嵌手風琴：display:contents 的 grid 技巧在這裡要全部拆掉 */
	.ya-panel {
		position: static;
		width: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		/* 🔴 桌機的關閉態有 `visibility: hidden`（第 600 節），行動版是靠
		   `display` 開合、不吃那一套 —— **這行一定要還原成 visible**，
		   否則抽屜展開後面板佔著位置卻整片看不見。（2026-09-10 一併補上） */
		visibility: visible;
		display: none;
	}
	.ya-nav__item.is-open > .ya-panel { display: block; }
	.ya-nav__item:hover > .ya-panel { display: none; }
	/* 桌機的 .is-panel-on 若因視窗縮放殘留，行動版一律不理它（JS 也會在
	   MOBILE_MQ change 時清掉，這條只是保險） */
	.ya-nav__item.is-panel-on > .ya-panel { display: none; }
	.ya-nav__item.is-open:hover > .ya-panel { display: block; }
	.ya-nav__item.is-open.is-panel-on > .ya-panel { display: block; }

	.ya-panel__inner {
		display: block;
		padding: 0 0 .9rem .35rem;
		margin: .2rem 0 .9rem .35rem;
		background: none;
		backdrop-filter: none;
		border-top: 0;
		border-left: 1px solid rgba(255,255,255,.14);
	}
	.ya-panel__eyebrow, .ya-panel__geyebrow { display: none; }
	.ya-panel__grps, .ya-panel__grp { display: block; }
	.ya-panel__grow { display: flex; }
	.ya-panel__glink { padding: .5rem 0 .5rem 1rem; }

	.ya-panel__items {
		display: none;
		grid-template-columns: 1fr;
		opacity: 1;
		pointer-events: auto;
		padding: 0 0 .5rem 1.9rem;
	}
	.ya-panel__grp.is-open > .ya-panel__items { display: grid; }
	/* 桌機那三條 hover 切換規則在抽屜裡會亂跳，明確關掉。
	   ⚠ 2026-09-08：`:has(.is-grp-on)` 那組**不必**列在這裡 ——
	     它已整組包在 `@media (min-width:1101px)` 內，根本進不到抽屜。
	     （一度想用「在這裡逐條補擋」的做法，結果漏掉 `.ya-panel` 本身，
	      行動版第 2 層開合鈕整個點不動；改用 min-width 從源頭限制才是對的。
	      同日第五輪桌機改成點擊展開後，`is-panel-hold` 那一整組已刪除。） */
	.ya-panel__grp:first-of-type > .ya-panel__items,
	.ya-panel__grps:hover .ya-panel__grp > .ya-panel__items,
	.ya-panel__grps:hover .ya-panel__grp:hover > .ya-panel__items { opacity: 1; pointer-events: auto; }
	.ya-panel__grps:hover .ya-panel__grp:not(.is-open) > .ya-panel__items { display: none; }

	/* 群組的手風琴鈕 */
	.ya-panel__gchev {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		padding: .2rem .3rem .2rem 1.6rem;
		border: 0; background: none;
		cursor: pointer;
		color: inherit;
	}
	.ya-panel__gchev span {
		display: block;
		width: .44rem; height: .34rem;
		background: currentColor;
		opacity: .7;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		transition: transform .4s var(--ya-ease);
	}
	.ya-panel__grp.is-open .ya-panel__gchev span { transform: rotate(180deg); }

	/* 抽屜底部的搜尋入口（桌機是頁首那顆放大鏡，這裡改成整列） */
	.ya-nav__search {
		display: flex;
		align-items: center;
		gap: .6rem;
		width: 100%;
		margin-top: 1rem;
		padding: 1.2rem 0 0;
		border: 0;
		border-top: 1px solid rgba(255,255,255,.12);
		background: none;
		color: var(--ya-white);
		font-family: inherit;
		cursor: pointer;
	}
	.ya-nav__search i { font-size: 1rem; }
	.ya-nav__search .ya-nav__search-label { font-family: var(--ya-serif); font-size: .92rem; letter-spacing: .12em; }
	.ya-nav__search .ya-nav__search-en { margin-left: auto; font-family: var(--ya-en); font-style: italic; font-size: .72rem; opacity: .5; }

	/* 🔴 logo 要浮在抽屜之上。.ya-nav 是 .ya-header 的子孫且 z-index:105，
	      .ya-burger 有 z-index:112 所以看得到，但 .ya-logo 只有 position:relative、
	      z-index 為 auto → 被抽屜的 --ya-deep 底色整個蓋掉（2026-09-01 修正）。
	   ⚠ 值與 .ya-burger 同為 112：兩者都要在抽屜(105)之上、大下拉面板(128)之下。
	   ⚠ .ya-logo 取得 z-index 後會成為堆疊脈絡，但 ::before 墨點是 z-index:-1，
	      仍畫在自己的文字之下、背景之上，外觀不變。 */
	.ya-logo { z-index: 112; }

	/* 抽屜蓋住頁首時，logo 與漢堡要維持白色 */
	body.is-nav-open .ya-header { background: var(--ya-deep); box-shadow: none; --ya-head-fg: var(--ya-white); }
	body.is-nav-open .ya-logo__en { color: var(--ya-ac-soft); }

	/* 🔴 選單展開時替頁首鋪一條實心遮帶（使用者 2026-09-01 指示）。
	   症狀：抽屜 .ya-nav 是 overflow-y:auto 的滿版深底層，捲動它時選單文字會從
	         logo 底下穿過去，兩層字疊在一起看不清。
	   原因：.ya-header 的 background 畫在自己堆疊脈絡的**最底層**，而抽屜(z-index:105)
	         是它的定位子孫 → 抽屜蓋掉頁首底色，只有 z-index 更高的 logo(112) 與
	         漢堡(112) 浮得上來，但它們是**透明的字**，擋不住後面捲過的文字。
	   修法：用 ::after 疊一條與抽屜同色(--ya-deep)的實心帶，
	         z-index 110 —— 卡在抽屜(105) 之上、logo 與漢堡(112) 之下。
	   ⚠ 不給 .ya-logo 加背景 —— 它是 inline-block，背景只包得住文字框，
	     上下與頁首邊緣會露縫，也擋不住 logo 以外的橫向區域。
	   ⚠ pointer-events:none —— 這條帶只是視覺遮蔽，不該吃掉任何點擊。
	     漢堡在 112 本來就在它之上，不受影響。 */
	body.is-nav-open .ya-header::after {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--ya-deep);
		z-index: 110;
		pointer-events: none;
	}

	/* 選單展開時 logo 光暈恆亮，**不受捲動狀態影響**（使用者 2026-09-01 指示）。
	   基底的 body.is-scrolled .ya-logo::before 會把它壓成 0，這條同特異性 (0,2,1)、
	   但位置在後面 → 後寫覆蓋。深色抽屜上用首頁未捲動的 .38。
	   ⚠ .ya-logo 有 z-index:112 已成堆疊脈絡，::before 的 z-index:-1 只退到
	     logo 自己的底層，仍畫在上面那條遮帶**之上**，所以光暈看得到。 */
	body.is-nav-open .ya-logo::before { opacity: .38; }

	/* 版面單欄化 */
	.ya-zones,
	.ya-zones.has-left,
	.ya-zones.has-right,
	.ya-zones.has-left.has-right { grid-template-columns: 1fr; }

	.ya-foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1101px) {
	/* 桌機不需要抽屜用的搜尋列 */
	.ya-nav__search { display: none; }

	/* 🔴 主選單靠右（使用者 2026-09-01 指示：和 demo 一樣）。
	   設計稿 YuanAn Home.dc.html:34 的 <header> 是 justify-content:space-between，
	   桌機時**在流內的直屬子元素只有兩個** —— logo(:36) 與 <nav>(:40) ——
	   所以 nav 自然靠右。搜尋鈕與 TW/EN 在 demo 裡是**寫在 <nav> 內部的**（:81、:86）。

	   本佈景的 DOM 不同：搜尋鈕在 .ya-header__actions，是 .ya-header__inner 的
	   **第三個**子元素（nav 由 nc_menu 區塊產出，塞不進去）→ space-between 會把
	   nav 推到正中間。改用 margin-left:auto 把剩餘空間全部丟到 logo 與 nav 之間，
	   結果等同 demo：logo 靠左，選單＋搜尋一起靠右。

	   ⚠ 不改 DOM、不動 .ya-header__inner 的 space-between（行動版還靠它把
	     logo 與漢堡撐開）。
	   ⚠ 大下拉不受影響 —— .ya-panel 是以 .ya-header 為定位容器的滿版面板
	     （見 :451-453 的註解），與 nav 自己的水平位置無關。 */
	.ya-nav { margin-left: auto; }

	/* 選單與搜尋鈕的間距對齊 demo 的 navGap 2.2rem（:1107）——
	   demo 裡搜尋鈕是 nav 的子項，吃的就是 nav 的 gap。
	   ⚠ 只在桌機覆寫；行動版仍用基底的 1.5rem（logo ↔ 漢堡）。 */
	.ya-header__inner { gap: 2.2rem; }
}

@media (max-width: 860px) {
	.ya-foot__bottom { flex-direction: column; align-items: flex-start; }
	.ya-zone-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.ya-foot__grid { grid-template-columns: 1fr; }
	/* 🔴 2026-09-03 修正：這條原本是 `.ya-top { right:1rem; bottom:1rem }`。
	   加了 FAB 之後 .ya-top 從 position:fixed 改成 relative（定位交給 .ya-float），
	   而 **relative 元素的 right/bottom 是相對自身位移** ——
	   right:1rem 把它往**左**推 1rem、bottom:1rem 把它往**上**推 1rem，
	   於是行動版的回到頂部鈕偏左偏上，還與上方的 FAB 對不齊（使用者實看回報）。
	   👉 偏移一律下在外框 .ya-float 上，兩顆才會一起移動、永遠對齊。 */
	.ya-float { right: 1rem; bottom: 1rem; }
	.ya-search__scroll { padding-left: 1.25rem; padding-right: 1.25rem; }
}


/* =========================================================================
   13. nc_vision 區塊的「編輯上傳」工具（只有有權限的編輯者看得到）
   樣板：themes/<佈景>/modules/nc_vision/blocks/nc_vision_block.html ＋ tmpl_1~6

   🔴 **為什麼在 style.css 而不是 home.css**（2026-09-09 搬過來）：
      `home.css` 只在首頁載入（`theme.tpl:60` 的 `<{if !$xoops_contents}>`）。
      舊版 `.ya-blockedit` 寫在那裡 → nc_vision 區塊一放到內頁，
      編輯鈕就是一條**沒有任何樣式的裸連結**。這一節全站載入。

   🔴 **視覺沿用 cadch 的 `.ya-cd-edit` / `.ya-cd-ph`**（使用者 2026-09-09 裁示
      「沿用 cadch 慣例」）—— 白底框線小鈕 → hover 玫瑰金；空區塊用虛線佔位框。
      ⚠ 兩邊要**一起改**：`css/cadch.css` 第 121-166 行是同一套視覺的另一份。

   🔴 **`position: relative; z-index` 不能省。** 首頁七個區段有負 margin 相疊
      與 `clip-path` 斜切，不墊高的話編輯鈕會被下一段直接蓋住（使用者回報
      「有些區塊讓人找不到編輯按鈕」的成因之一）。
   ========================================================================= */
.ya-blockedit {
	position: relative;          /* ⚠ 見上，不可省 */
	z-index: 6;                  /* 與 .ya-hero 指示點同層，足以壓過相鄰區段 */
	max-width: var(--ya-wrap-foot);
	margin: 0 auto;
	padding: .6rem var(--ya-pad-x);
	font-size: .8rem;
	text-align: right;
}

/* 按鈕本體：與 .ya-cd-edit 同款 */
.ya-blockedit__btn {
	display: inline-block;
	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) var(--ya-ease),
	            color var(--ya-t-col) var(--ya-ease),
	            border-color var(--ya-t-col) var(--ya-ease);
}
.ya-blockedit__btn:hover,
.ya-blockedit__btn:focus-visible {
	background: var(--ya-ac);
	border-color: var(--ya-ac);
	color: var(--ya-white);
}

/* ── 空區塊的佔位框（沿用 cadch 的 .ya-cd-ph）──────────────────────
   只有編輯者看得到。訪客端 `$block.prem` ＝ FALSE，整段不輸出。 */
.ya-blockedit--empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
	padding: 1rem 1.1rem;
	margin: 1.2rem auto;
	border: 1px dashed var(--ya-line);
	background: var(--ya-white);
	color: var(--ya-body-2);
	font-size: .82rem;
	line-height: 1.8;
	text-align: left;
}
.ya-blockedit__txt { margin: 0; }
.ya-blockedit__bid {
	margin-left: .5rem;
	font-family: var(--ya-en);
	font-style: italic;
	color: var(--ya-ac);
}

/* 🔴 **首頁第一個區塊（Hero）是空的時候，佔位框會被固定頁首蓋住。**
   `.ya-header` 是 `position: fixed`（第 260-271 行），而 `.ya-main--home`
   **刻意沒有上內距** —— Hero 本來就該滿版貼在頁首底下。
   Hero 一旦沒有內容，佔位框就成了 `.ya-main--home` 的第一個子元素，
   上緣會躲進頁首後面 → 編輯者一樣「找不到按鈕」。
   ⚠ 既有的 `.ya-home-block:first-child`（第 1120 行）救不到這裡 ——
     nc_vision 的輸出**不包 `.ya-home-block` 外框**（theme.tpl 是直接吐 `$block.content`）。 */
.ya-main--home > .ya-blockedit:first-child {
	padding-top: calc(var(--ya-head-h) + var(--ya-pad-y));
}

/* ── 頁尾版（tmpl_6）：深底要反白 ───────────────────────────────
   ⚠ 頁尾的既有 `.ya-foot__editlink`（第 10 節）**保留不動** ——
     那是 tmpl_6 有內容時的舊 class，本節只接管 `.ya-blockedit--foot`。 */
.ya-blockedit--foot { max-width: none; padding: .5rem 0; text-align: center; }
.ya-blockedit--foot .ya-blockedit__btn {
	border-color: rgba(255,255,255,.28);
	background: transparent;
	color: var(--ya-ac-soft);
}
.ya-blockedit--foot .ya-blockedit__btn:hover,
.ya-blockedit--foot .ya-blockedit__btn:focus-visible {
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.4);
	color: var(--ya-white);
}
.ya-blockedit--foot.ya-blockedit--empty {
	align-items: center;
	text-align: center;
	border-color: rgba(255,255,255,.28);
	background: rgba(255,255,255,.05);
	color: rgba(255,255,255,.6);
}

/* =========================================================================
   14. 列印
   README「CSS 移植原則 5」：隱藏導覽與 hover 裝飾。
   ========================================================================= */
@media print {
	/* .ya-float ＝ 整個右下浮動堆疊（FAB ＋ 回到頂部）。
	   2026-09-03 起改列外框 —— 原本只列 .ya-top，FAB 會被印出來。 */
	.ya-header, .ya-search, .ya-float, .ya-foot__ink,
	.ya-social, .ya-burger, .ya-modal { display: none !important; }
	/* 編輯者工具不進列印稿（與 cadch.css 第 621-622 行同一個處置）*/
	.ya-blockedit, .ya-foot__editlink { display: none !important; }

	body.ya-body { background: #fff; color: #000; }
	.ya-main--inner { padding-top: 0; }
	.ya-foot { background: #fff; color: #000; padding: 1rem 0; }
	.ya-foot__grid { border-bottom: 1px solid #ccc; }
	.ya-foot__logo, .ya-foot__coltitle { color: #000; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; color: #666; }
}