@charset "utf-8";
/* ==========================================================================
   news.css — news 模組三頁專用樣式（階段 3）
   YUAN·AN ONSEN 佈景 btp_rwd_5_c_d
   設計稿：參考資料/demo_D/design/YuanAn News.dc.html

   ── 載入方式 ──────────────────────────────────────────────
   theme.tpl 以 <{if $xoops_dirname == 'news'}> 條件載入，**只在 news 模組頁載入**。
   與 home.css 同一套邏輯：首頁與其他模組一行都用不到，內頁不必多載。

   ── 前綴 ──────────────────────────────────────────────────
   .ya-band-*   三頁共用的頂部形象帶
   .ya-nw-*     列表頁（index / topic）與共用元件
   .ya-art-*    文章內頁（article）
   .ya-arc-*    歸檔頁（archive）
   🔴 **刻意避開 .ya-news__***（那是 home.css 首頁「最新消息」區的前綴）。
      兩支 CSS 不會同時載入，但同名會讓日後維護的人誤以為是同一組元件。

   ── 移植原則（README「CSS 移植原則」1–5）──────────────────
   1. 不留 inline style，設計稿的 style={{...}} 全部改寫成語意 class
   2. 色值走 CSS 變數；本檔用到而 style.css :root 沒有的色，集中在第 1 節
   3. 設計稿用 React state 做的 hover，一律改寫成 CSS :hover 後代選擇器
   4. 不移植 support.js
   5. 列印樣式隱藏導覽與 hover 裝飾（第 11 節）

   ── 🔴 本專案踩過、寫這支時要一直記得的四件事（工作規則與進度.md F 段）──
   A. 逐筆循環的樣式**不要直接寫 transform**，會被 :nth-child() 墊高特異性而吃掉 hover。
      要帶值就用 CSS 變數（本檔的卡片進場延遲用 --ya-nw-d）。
   B. hover 的驅動選擇器要掛在**設計稿 onMouseEnter 所在的那一層**（整張卡），
      不是元件自己的 :hover —— 否則「滑到照片沒反應」。
   C. 設計稿的 rgba()／#hex **字面值**照抄，只有 var(--x,#fallback) 的 fallback 才是舊值殘留。
      本頁的字面值幾乎都正好等於 PALETTE，所以能安心換成 --ya- 變數；
      不在 PALETTE 內的（#9aa7b3、#6b7885…）集中在第 1 節，不散落在規則裡。
   D. clip-path 與 transform 必須同層。（本頁沒有 clip-path，記著即可。）
   ========================================================================== */


/* ==========================================================================
   1. 本檔專用 token
   style.css 的 :root 已有 --ya-ink / deep / ocean / ac / ac-soft / mist /
   body / body-2 / muted / muted-2 / line / line-soft / serif / sans / en /
   wrap / read / pad-x / pad-y / head-h / ease / t-col / t-move / t-img。
   以下是**設計稿用到、但 style.css 沒有**的值，集中在這裡，規則裡不寫死。
   ⚠ 掛在 .ya-nwpage 上而不是 :root —— 只影響 news 三頁，不污染全站。

   🔴 **2026-09-10 追加 `.ya-nw-topicnav`**（底部分類導覽區塊，第 5-B 節）。
      理由：那個區塊落在 XOOPS 的 `page_bottomcenter` 版位
      （`tpl/centerBottom.tpl` 的 `.ya-zone-full`），**在 `.ya-nwpage` 外面** ——
      少了這個選擇器，它用到的 `var(--ya-nw-chip-off)` / `var(--ya-nw-hair-3)`
      **全部解析失敗**：`border-top: 1px solid <invalid>` 整條宣告作廢（實測 0px）、
      膠囊文字色落回繼承值（實測 rgb(60,75,88)，與上方那排的 #7c8996 不同）。
      ⚠ **這是「元件搬出原本容器」時的通則** —— token 若掛在容器上而不是 :root，
        新的使用者也要一起列進來，否則會靜靜地壞掉、不會報錯。
   ========================================================================== */
.ya-nwpage,
.ya-nw-topicnav {
	--ya-nw-date:    #9aa7b3;              /* 卡片日期欄的年／月 */
	--ya-nw-excerpt: #6b7885;              /* 卡片摘要 */
	--ya-nw-chip-off:#7c8996;              /* 未選取的分類膠囊 */
	--ya-nw-dot:     #c8d2da;              /* 附件列的菱形分隔點 */
	--ya-nw-soft-bg: #fbfcfd;              /* 留言區與表單欄位底 */

	--ya-nw-hair:    rgba(31,78,107,.09);  /* 卡片外框 */
	--ya-nw-hair-2:  rgba(31,78,107,.07);  /* 歸檔列分隔線 */
	--ya-nw-hair-3:  rgba(31,78,107,.10);  /* 區塊分隔線 */
	--ya-nw-hair-4:  rgba(31,78,107,.14);  /* 標籤外框 */
	--ya-nw-hair-5:  rgba(31,78,107,.16);  /* 表單欄位外框 */
	--ya-nw-hair-6:  rgba(31,78,107,.20);  /* 分頁「下一頁」外框 */

	--ya-nw-sh:      0 18px 44px -40px rgba(18,48,63,.40);  /* 側欄卡 */
	--ya-nw-sh-art:  0 26px 62px -48px rgba(18,48,63,.42);  /* 文章外殼 */
	--ya-nw-sh-arc:  0 22px 54px -46px rgba(18,48,63,.40);  /* 歸檔清單 */

	/* 形象帶底圖。
	   🔴 **預設是漸層、不是照片檔** —— 佈景目前沒有合適的形象照，
	      指向一個不存在的檔案會讓每次載入都多一個 404。
	      深藍漸層本身就是設計稿的色系，白色襯線大標壓在上面完全成立。
	   ▸ 要換成固定照片：把照片放進 images/ya-band-news.jpg，
	     然後把下面兩行對調（註解掉漸層那行、啟用 url 那行）。建議尺寸 1600×500 以上。
	   ▸ 後台若替**分類**設了圖，**分類頁**會在這層之上再疊一張
	     `<img class="ya-band__photo">`（見 news_index.html 第 1 區），不必動 CSS。
	     🔴 檔案在 **`modules/news/images/topics/`**，不是 uploads/news/
	        （後者是 submit.php:338 的寫法，套到分類圖上會 404，實測過）。
	     ⚠ 全部消息頁／文章頁／歸檔頁模組都沒有 assign 分類圖，一律吃這裡的預設值。 */
	--ya-band-img:   linear-gradient(155deg, #0d2634 0%, #12303F 38%, #1F4E6B 78%, #2a5f7d 100%);
	/* --ya-band-img: url("../images/ya-band-news.jpg"); */
}

/* 設計稿的五個 @keyframes（YuanAn News.dc.html:23-27）
   ⚠ 名稱加 ya 前綴，避免與模組／Bootstrap 的同名動畫相撞。 */
@keyframes yaNwFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes yaNwRiseIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes yaNwWipeIn { from { clip-path: inset(0 100% 0 0); }         to { clip-path: inset(0 0 0 0); } }
@keyframes yaNwLineGrow { from { transform: scaleX(0); }               to { transform: scaleX(1); } }
@keyframes yaNwDriftWM { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-1.4%,-2%,0); } }

/* 使用者要求減少動態時，所有進場動畫直接顯示終態（不是關掉 → 關掉會停在 opacity:0）*/
@media (prefers-reduced-motion: reduce) {
	.ya-nwpage *,
	.ya-nwpage *::before,
	.ya-nwpage *::after { animation-duration: .001s !important; animation-delay: 0s !important; }
}


/* ==========================================================================
   2. 頁面外框
   ========================================================================== */

/* theme.tpl 的 .ya-inner-wrap 有 max-width:1180 與上下 --ya-pad-y 內距。
   本模組三頁的形象帶要**貼齊頁首下緣**且滿版，所以把上下內距歸零，
   垂直節奏改由各區自己負責。
   🔴 用 :has() 而不是無條件覆寫 —— news 模組還有 submit.php／whoswho.php／
      topics_directory.php 等**吃模組原始樣板**的頁面，它們沒有 .ya-nwpage，
      不該被抽掉內距。舊瀏覽器不支援 :has() 時只是多留一段上內距，不會壞版。 */
.ya-inner-wrap:has(.ya-nwpage) { padding-top: 0; padding-bottom: 0; max-width: none; }
.ya-inner-wrap:has(.ya-nwpage) .ya-zones { gap: 0; }

/* 三頁的根元素。.ya-nwpage--index / --item / --archive / --comments 是**辨識用的
   修飾子，目前刻意沒有任何規則** —— 日後要針對單一頁面微調時有現成的掛點，
   不必回頭改樣板。看到它們沒有對應規則不是漏寫。 */
.ya-nwpage { color: var(--ya-body); font-family: var(--ya-sans); font-weight: 300; }

/* 滿版：抵銷所有祖先的置中與內距。父層皆為靜態流排版時這招才成立，
   本佈景的 .ya-inner-wrap / .ya-zones / .ya-zone-* 都是，實測正確。
   🔴 **2026-09-10 補上一句原本沒講到的前提：容器必須在視窗裡「置中」。**
      `calc(50% - 50vw)` 是拿容器的 50% 去抵視窗的 50vw —— 容器一旦不置中就會偏掉。
      實測：news 頁只要出現**左側欄**（任何 canvas_left 區塊），
      `.ya-zones` 變成 `260px 1052px`、內容區右移 130px，
      形象帶 `.ya-band` 就落在 left:130 / right:1570，**整頁橫向溢出 130px**。
   👉 **news 三頁與左側欄天生不相容。** 要放側欄區塊得先改這條。 */
.ya-nw-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* 置中容器：設計稿三頁都是 max-width:1180 + clamp(1.25rem,5vw,3rem) 左右內距。
   ⚠ 這裡的左右內距**刻意不用 --ya-pad-x**（那支是 clamp(1.5rem,5vw,4rem)），
     設計稿 news 頁用的是比較窄的一組，照設計稿。 */
.ya-nw-wrap {
	max-width: var(--ya-wrap);
	margin: 0 auto;
	padding-left: clamp(1.25rem, 5vw, 3rem);
	padding-right: clamp(1.25rem, 5vw, 3rem);
}


/* ==========================================================================
   3. 形象帶（三頁共用；設計稿 index:198 / item:270 / archive:591）
   ========================================================================== */
.ya-band {
	position: relative;
	height: clamp(240px, 26vw, 380px);
	overflow: hidden;
}
/* 底層：永遠存在的漸層（或固定照片，見第 1 節的 --ya-band-img）。 */
.ya-band__img {
	position: absolute; inset: 0;
	background-image: var(--ya-band-img);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* 上層：可選的真實 <img> 照片，疊在漸層之上、veil 之下。
   ▸ **由 news_index.html 的分類頁分支輸出**（2026-08-31 接上）：
     分類頁且該分類真的設了圖時，吃後台的分類圖片
     `modules/news/images/topics/<topic_imgurl>`。
   🔴 我 2026-08-31 稍早在這裡寫過「分類圖不是可上傳欄位、只是 120×90 圖示下拉」——
      **那是錯的，已更正**。`admin/index.php:778` 有 XoopsFormFile 上傳欄
      （處理在 :867-886／:997-1016），上傳目的地就是 images/topics/，
      `XoopsMediaUploader` 沒帶寬高參數 → **不限尺寸、不縮圖**。
      120×90 只是目錄裡現有那兩個範例檔的尺寸，不是欄位限制。
   ⚠ 樣板端把**模組內建的三個佔位檔**（blank.png／xoops.gif／xoops.png）
     一律當「無圖片」處理（2026-08-31 使用者指示），否則沒設圖的分類會秀出一張
     被 cover 拉伸的 XOOPS logo。判斷集中在 news_index.html 的 $naBandImg。
   ⚠ 建議上傳 2000×800（2.5:1）；模組上限 maxuploadsize = 1MB。
   ⚠ 用 <img> 而不是 inline style 的 background-image —— 佈景通則是不留 inline style，
     而且 <img> 才能照工作規則 5 帶 alt／decoding／fetchpriority。 */
.ya-band__photo {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}
/* 設計稿字面值，三段式：上 .55 → 中 .28 → 下 .6 */
.ya-band__veil {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(18,48,63,.55) 0%,
		rgba(18,48,63,.28) 60%,
		rgba(18,48,63,.60) 100%);
}
.ya-band__inner {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: .7rem; text-align: center; padding: 0 1.5rem;
}
.ya-band__en {
	font-family: var(--ya-en); font-style: italic;
	letter-spacing: .34em; font-size: .72rem;
	text-transform: uppercase; color: var(--ya-ac-soft);
}
/* 形象帶大標。
   ⚠ 工作規則 3：文章頁的原生 <h1> 保留給**文章標題**，所以本元件在文章頁
     是 <div class="h1 ya-band__title">；列表／歸檔頁沒有別的主標，才用原生 <h1>。
     兩種標籤共用同一條規則，外觀零差異。 */
.ya-band__title,
h1.ya-band__title {
	margin: 0;
	font-family: var(--ya-serif); font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	letter-spacing: .16em; color: var(--ya-white);
	animation: yaNwWipeIn 1.1s .1s cubic-bezier(.3,.7,.2,1) both;
}
.ya-band__rule {
	width: 2.6rem; height: 1px;
	background: var(--ya-ac); margin-top: .4rem;
}


/* ==========================================================================
   4. 導言（設計稿 index:209 / topic:531 / archive:600）
   ========================================================================== */
.ya-nw-intro {
	padding-top: clamp(3rem, 7vw, 5.5rem);
	text-align: center;
	animation: yaNwRiseIn .85s var(--ya-ease) both;
}
.ya-nw-intro__en {
	margin: 0 0 1rem;
	font-family: var(--ya-en); font-style: italic;
	letter-spacing: .28em; font-size: .74rem;
	text-transform: uppercase; color: var(--ya-ac);
}
.ya-nw-intro__lead {
	margin: 0;
	font-family: var(--ya-serif); font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	line-height: 1.7; letter-spacing: .1em;
	color: var(--ya-ink); text-wrap: pretty;
}


/* ==========================================================================
   5. 分類膠囊列（設計稿 index:215 / topic:537）
   🔴 2026-08-31 改版（使用者指示）：膠囊由「js/news.js 前端篩選本頁」改為
      **伺服器端輸出全部分類的真連結**（index.php?storytopic=N），
      名稱後面接該分類的全站篇數。資料由佈景的 theme_autorun.php 供給，
      沒有改 modules/news/。js/news.js 的 initChips() 已移除。
   ⚠ 因此 .ya-nw-chip 現在是 <a> 不是 <button>：多了 text-decoration 與
     color 兩個要壓的預設值（<a> 的顏色來自 style.css 第 3 節的基底規則，
     那條已經包了 :where() 特異性為 0，這裡單一 class 壓得過）。
   跨頁篩選現在膠囊自己就做得到，模組原生的 $topic_select 表單（.ya-nw-native）
   仍然保留 —— 它還能改「每頁篇數」，不是重複功能。
   ========================================================================== */
.ya-nw-filter { padding-top: clamp(2.2rem, 5vw, 3.4rem); }
.ya-nw-chips {
	display: flex; align-items: center; justify-content: center;
	gap: clamp(1.2rem, 3vw, 2.6rem); flex-wrap: wrap;
}
.ya-nw-chip {
	position: relative;
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .35rem 0 .55rem;
	border: 0; background: none;
	font-family: inherit; font-size: .9rem; letter-spacing: .1em;
	color: var(--ya-nw-chip-off); cursor: pointer;
	text-decoration: none;
	transition: color .4s, opacity .4s;
}
/* 設計稿：選取中是墨黑 #23303A，hover 是玫瑰金 #BE8574（兩者不同，別合併寫） */
.ya-nw-chip.is-on { color: var(--ya-ink); }
.ya-nw-chip:hover { color: var(--ya-ac); }
.ya-nw-chip__ico { font-size: .85rem; line-height: 1; opacity: .8; }
/* 篇數：設計稿沒有這個元素（膠囊原本只有名稱），沿用篇數列 .ya-nw-filter__count b
   的處理方式 —— 英文字體、比本文小一階、顏色比名稱淡，數字不搶走名稱的視線。 */
.ya-nw-chip__n {
	font-family: var(--ya-en); font-size: .78rem; letter-spacing: .06em;
	opacity: .7;
}
/* 0 篇的分類仍然列出（使用者裁示），但整顆調淡，讓使用者一眼看得出來。
   ⚠ 只調 opacity、不改 pointer-events —— 點進去會看到該分類的空清單，
     那是正確且可預期的結果，不是需要擋掉的錯誤。 */
.ya-nw-chip.is-empty { opacity: .55; }
.ya-nw-chip.is-empty:hover { opacity: 1; }
/* 底線：設計稿是 scaleX(0) ↔ scaleX(1)，transform-origin:left */
.ya-nw-chip::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px; background: var(--ya-ac);
	transform: scaleX(0); transform-origin: left;
	transition: transform .5s var(--ya-ease);
}
.ya-nw-chip.is-on::after,
.ya-nw-chip:hover::after { transform: scaleX(1); }
/* 膠囊列下緣細線 */
.ya-nw-filter__rule {
	display: block; width: 100%; height: 1px;
	background: var(--ya-nw-hair-3); margin-top: .2rem;
}
/* 篇數（設計稿 topic:546）*/
.ya-nw-filter__count {
	margin: 1.4rem 0 0; text-align: center;
	font-size: .82rem; letter-spacing: .14em; color: var(--ya-muted);
}
.ya-nw-filter__count b {
	font-family: var(--ya-en); font-size: 1.05rem;
	color: var(--ya-ink); font-weight: 400;
}

/* ==========================================================================
   5-B. 底部「分類導覽」尾欄（news 區塊 `news_block_topicnav`・本站 bid 18）
   🔴 2026-09-10 新增，取代 c_c 遺留的天藍膠囊（`.news-topicnav`，整支已重寫）。

   ⚠ **膠囊本體完全沿用第 5 節的 `.ya-nw-chip`** —— 這裡只給外框與間距。
     這樣日後改膠囊樣式，上方那排與這裡會一起變，不會走鐘。
   ⚠ 這一塊與列表頁上方那排是同一個功能（使用者 2026-09-10 裁示保留），
     所以刻意做成「頁尾導覽」的樣子：上方一條分隔細線 ＋ 眉標，
     讀起來是收尾，不是重複的控制列。
   ⚠ 它落在 `page_bottomcenter`（`tpl/centerBottom.tpl` 的 `.ya-zone-full`），
     **三頁都會出現**（列表／文章／歸檔），所以寬度自己收，不倚賴頁面容器。
   ========================================================================== */
.ya-nw-topicnav {
	margin-top: clamp(2.6rem, 6vw, 4.6rem);
	padding-top: clamp(1.8rem, 4vw, 2.8rem);
	border-top: 1px solid var(--ya-nw-hair-3);
}
.ya-nw-topicnav__inner {
	max-width: var(--ya-wrap);
	margin: 0 auto;
	padding: 0 clamp(1.2rem, 4vw, 2.4rem);
}
.ya-nw-topicnav__eyebrow {
	margin: 0 0 clamp(.9rem, 2vw, 1.4rem);
	text-align: center;
	color: var(--ya-ac-soft);
}
/* 尾欄的膠囊排得比上方那排緊一點，視覺上分量較輕、不與主導覽搶焦點 */
.ya-nw-topicnav__chips {
	gap: clamp(1rem, 2.4vw, 2rem);
}

/* 模組原生的分類／每頁篇數表單。設計稿沒有這一塊 —— 它是 XOOPS 的真實查詢，
   能跨頁生效，膠囊只篩本頁。刻意保留，樣式壓成與膠囊列同調。 */
.ya-nw-native {
	display: flex; align-items: center; justify-content: center;
	gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem;
}
.ya-nw-native select {
	padding: .5rem .8rem;
	border: 1px solid var(--ya-nw-hair-4); border-radius: 0;
	background: var(--ya-white);
	font-family: var(--ya-sans); font-size: .82rem; color: var(--ya-body);
	outline: none;
}
.ya-nw-native select:focus-visible { border-color: var(--ya-ac); }
.ya-nw-native button {
	padding: .52rem 1.2rem;
	border: 1px solid var(--ya-deep); background: var(--ya-deep);
	color: var(--ya-white);
	font-family: var(--ya-sans); font-size: .78rem; letter-spacing: .12em;
	cursor: pointer; transition: background var(--ya-t-col), border-color var(--ya-t-col);
}
.ya-nw-native button:hover { background: var(--ya-ac); border-color: var(--ya-ac); }


/* ==========================================================================
   6. 卡片列表（設計稿 index:227 / topic:551）
   ========================================================================== */
.ya-nw-list {
	padding-top: clamp(2.6rem, 6vw, 4.2rem);
	padding-bottom: clamp(4rem, 9vw, 7rem);
}
.ya-nw-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.4rem, 5vw, 4.2rem) clamp(2rem, 4vw, 3.4rem);
}

/* 進場：設計稿 riseIn .85s，每張延遲 i×90ms。
   🔴 逐筆的值走 CSS 變數（F 段 A）—— 這裡雖然只是 animation-delay 不會撞 hover，
      仍照同一套寫法，日後要加 transform 才不用重構。 */
.ya-nw-card {
	display: flex; flex-direction: column;
	animation: yaNwRiseIn .85s var(--ya-ease) both;
	animation-delay: var(--ya-nw-d, 0ms);
}
.ya-nw-grid > .ya-nw-card:nth-child(1) { --ya-nw-d:   0ms; }
.ya-nw-grid > .ya-nw-card:nth-child(2) { --ya-nw-d:  90ms; }
.ya-nw-grid > .ya-nw-card:nth-child(3) { --ya-nw-d: 180ms; }
.ya-nw-grid > .ya-nw-card:nth-child(4) { --ya-nw-d: 270ms; }
.ya-nw-grid > .ya-nw-card:nth-child(5) { --ya-nw-d: 360ms; }
.ya-nw-grid > .ya-nw-card:nth-child(6) { --ya-nw-d: 450ms; }
.ya-nw-grid > .ya-nw-card:nth-child(n+7) { --ya-nw-d: 540ms; }
/* JS 篩掉的卡片 */
.ya-nw-card[hidden] { display: none; }

/* 圖框 */
.ya-nw-card__fig {
	position: relative; display: block; width: 100%;
	aspect-ratio: 16 / 10; overflow: hidden;
	background: var(--ya-mist);
}
.ya-nw-card__fig img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .9s var(--ya-ease);
}
/* 掃光：設計稿 skewX(-22deg)，hover 時 translateX 0% → 560% */
.ya-nw-card__shine {
	position: absolute; top: -20%; left: -40%;
	width: 28%; height: 140%;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.46) 50%, transparent 100%);
	transform-origin: center; pointer-events: none;
	transform: skewX(-22deg) translateX(0%);
	opacity: 0; transition: opacity .18s;
}

/* 🔴 hover 一律由**整張卡**驅動（F 段 B）——
   設計稿的 onMouseEnter 掛在 <article> 上，圖片、標題、view more 一起連動。
   寫成 .ya-nw-card__fig:hover 的話，滑到標題就不會有反應。 */
.ya-nw-card:hover .ya-nw-card__fig img { transform: scale(1.07); }
.ya-nw-card:hover .ya-nw-card__shine {
	transform: skewX(-22deg) translateX(560%);
	opacity: 1;
	transition: transform 1s cubic-bezier(.25,.6,.2,1), opacity .18s;
}

.ya-nw-card__row {
	display: flex; gap: clamp(1rem, 2vw, 1.6rem);
	padding-top: clamp(1.2rem, 2.4vw, 1.7rem);
}
/* 左側日期直欄 */
.ya-nw-card__date {
	display: flex; flex-direction: column;
	align-items: flex-start; gap: .1rem;
	flex: 0 0 auto; padding-top: .2rem;
}
.ya-nw-card__y,
.ya-nw-card__m {
	font-family: var(--ya-en); font-size: .86rem;
	letter-spacing: .12em; color: var(--ya-nw-date);
}
.ya-nw-card__d {
	font-family: var(--ya-en); font-size: 1.9rem;
	line-height: 1; color: var(--ya-ac);
}
/* 右側文字欄 */
.ya-nw-card__body {
	display: flex; flex-direction: column; gap: .7rem; min-width: 0;
	border-left: 1px solid var(--ya-line);
	padding-left: clamp(1rem, 2vw, 1.6rem);
}
.ya-nw-card__topic {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .74rem; letter-spacing: .16em; color: var(--ya-ocean);
}
.ya-nw-card__title {
	font-family: var(--ya-serif);
	font-size: clamp(1.02rem, 1.5vw, 1.16rem);
	line-height: 1.75; letter-spacing: .03em;
	color: var(--ya-ink); text-wrap: pretty;
	transition: color .4s;
}
.ya-nw-card:hover .ya-nw-card__title { color: var(--ya-ac); }
.ya-nw-card__excerpt {
	margin: 0; font-size: .86rem; line-height: 2.05;
	color: var(--ya-nw-excerpt); text-wrap: pretty;
}
/* view more：gap 與底線寬度一起長 */
.ya-nw-card__more {
	display: inline-flex; align-items: center; gap: .7rem;
	margin-top: .3rem;
	font-family: var(--ya-en); font-style: italic;
	font-size: .84rem; letter-spacing: .2em;
	color: var(--ya-ocean);
	transition: gap .5s var(--ya-ease), color .5s var(--ya-ease);
}
.ya-nw-card__more::after {
	content: ""; display: block; width: 1.6rem; height: 1px;
	background: var(--ya-ac);
	transition: width .55s var(--ya-ease);
}
.ya-nw-card:hover .ya-nw-card__more { gap: 1rem; color: var(--ya-ac); }
.ya-nw-card:hover .ya-nw-card__more::after { width: 3.4rem; }

/* 分類圖示：用屬性選擇器對照，樣板端只要原樣輸出分類名稱。
   （沿用 c_c 附件圖示的既有慣例：不在 Smarty 比對字串，交給 CSS。）
   ⚠ unicode 值查自 css/bootstrap-icons.css，不是憑記憶填：
     megaphone f484／newspaper f4a3／calendar-heart f710／stars f589／
     droplet-half f30c／tag f5b0（預設）
   ⚠ 分類名稱是後台自訂的，對不上就落到預設的 tag 圖示，不會空白。 */
.ya-nw-tico {
	display: inline-block; font-size: .78rem; line-height: 1;
	color: var(--ya-ac); font-style: normal;
}
.ya-nw-tico::before { content: "\f5b0"; }
/* ① 楓庵（demo_D 設計稿）規劃的分類名 —— 後台換成這批文案後才會生效 */
.ya-nw-tico[data-topic="館內公告"]::before { content: "\f484"; }
.ya-nw-tico[data-topic="媒體報導"]::before { content: "\f4a3"; }
.ya-nw-tico[data-topic="活動快訊"]::before { content: "\f710"; }
.ya-nw-tico[data-topic="季節專案"]::before { content: "\f589"; }
.ya-nw-tico[data-topic="溫泉知識"]::before { content: "\f30c"; }
/* ② 本站**目前實際**的四個分類（2026-08-31 補）。
   🔴 為什麼要補：上面五個 key 全是設計稿的示範分類名，本站實際分類
      （最新訊息／專題文章／工作職缺／相關影音）**一個都對不上**，
      五顆膠囊過去全部落到預設的 tag 圖示。分類膠囊改成常駐顯示之後，
      這件事從「看不太出來」變成每一頁都看得到。
   ⚠ 兩批**刻意並存**：後台內容改成楓庵文案時舊分類會消失、①那批接手；
      在那之前②這批負責。不要因為「看起來像舊站殘留」就把②刪掉。
   ⚠ unicode 值查自 css/bootstrap-icons.css：
      megaphone f484／journal-text f444／briefcase f1cc／play-btn f4f1 */
.ya-nw-tico[data-topic="最新訊息"]::before { content: "\f484"; }
.ya-nw-tico[data-topic="專題文章"]::before { content: "\f444"; }
.ya-nw-tico[data-topic="工作職缺"]::before { content: "\f1cc"; }
.ya-nw-tico[data-topic="相關影音"]::before { content: "\f4f1"; }

/* 沒有任何文章時 */
.ya-nw-empty {
	grid-column: 1 / -1;
	padding: clamp(3rem, 8vw, 6rem) 0;
	text-align: center; font-size: .92rem; letter-spacing: .1em;
	color: var(--ya-muted);
}


/* ==========================================================================
   7. 分頁（設計稿 index:259）
   XOOPS 的 $pagenav 吐的是 <a> 與純文字，class 名不由樣板控制，
   所以這裡用「後代元素選擇器」把它壓成設計稿的方框樣式。
   ========================================================================== */
.ya-nw-pager {
	display: flex; align-items: center; justify-content: center;
	gap: .5rem; flex-wrap: wrap;
	margin-top: clamp(3.4rem, 7vw, 5.5rem);
	font-family: var(--ya-en);
}
/* 🔴 2026-08-31 修：$pagenav 外面自己包了一層 div，flex 進不去。
   XOOPS 的 $pagenav 不是直接吐出頁碼，而是由 db:system_pagenav.tpl 渲染成
       <div id="xo-pagenav"><strong>(1)</strong> <a>2</a> <a><u>»</u></a></div>
   所以 .ya-nw-pager 的 flex 子元素**只有那一層 div**，
   `gap:.5rem` 與 `justify-content` 完全沒有作用到頁碼方框上 ——
   實際間距只剩標籤之間的一個空白字元（約 4px），設計稿要的是 8px。
   ⚠ 選 `> div` 而不是 `#xo-pagenav`：不綁核心樣板的 id，
     日後 system_pagenav.tpl 改了或被佈景覆寫也不會失效；
     特異性也維持在 class 級，不會變成 (1,0,0) 難壓。
   ⚠ 這層必須連 align-items／flex-wrap 一起寫，只補 gap 不夠 ——
     它是 block，裡面的 inline-flex 方框不會自己置中或換行。 */
.ya-nw-pager > div {
	display: flex; align-items: center; justify-content: center;
	gap: .5rem; flex-wrap: wrap;
}
/* 🔴 2026-08-31 修：分頁箭頭的多餘底線。
   XOOPS 吐的是 <a class="xo-pagarrow"><u>&raquo;</u></a>。
   style.css 的 `a { text-decoration: none }` 只作用在 <a> 自己 ——
   子元素 <u> 有瀏覽器預設的 text-decoration:underline，會照樣畫出來。
   ⚠ 三個容器都要：列表分頁、多頁文章分頁、留言分頁吃的是同一套 XOOPS 輸出。 */
.ya-nw-pager u,
.ya-art-pagenav u,
.ya-art-comments__nav u { text-decoration: none; }
.ya-nw-pager a,
.ya-nw-pager .current,
.ya-nw-pager strong,
.ya-nw-pager b {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem;
	border: 1px solid var(--ya-line);
	background: var(--ya-white); color: var(--ya-body);
	font-family: var(--ya-en); font-size: 1rem; font-weight: 400;
	transition: border-color var(--ya-t-col), color var(--ya-t-col), background var(--ya-t-col);
}
.ya-nw-pager a:hover { border-color: var(--ya-ac); color: var(--ya-ac); }
.ya-nw-pager .current,
.ya-nw-pager strong,
.ya-nw-pager b {
	border-color: var(--ya-deep); background: var(--ya-deep); color: var(--ya-white);
}
/* XOOPS 的分頁有時會吐 <select> 跳頁 */
.ya-nw-pager select {
	height: 2.6rem; padding: 0 .5rem;
	border: 1px solid var(--ya-line); border-radius: 0;
	background: var(--ya-white); color: var(--ya-body);
	font-family: var(--ya-sans); font-size: .82rem;
}


/* ==========================================================================
   8. 文章內頁（設計稿 item view，YuanAn News.dc.html:268-518）
   ========================================================================== */
.ya-art-wrap {
	padding-top: clamp(2.2rem, 5vw, 3.2rem);
	padding-bottom: clamp(4rem, 9vw, 7rem);
}

/* ── 8-1 麵包屑 ── */
.ya-art-crumb {
	display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
	font-size: .76rem; letter-spacing: .1em; color: var(--ya-muted);
	margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.ya-art-crumb a { color: var(--ya-muted); transition: color var(--ya-t-col); }
.ya-art-crumb a:hover { color: var(--ya-ac); }
.ya-art-crumb i { font-size: .62rem; line-height: 1; opacity: .6; }
.ya-art-crumb__here { color: var(--ya-ink); }

/* ── 8-2 兩欄外殼 ── */
.ya-art-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 320px);
	gap: clamp(1.6rem, 3vw, 3rem);
	align-items: start;
}
/* 側欄整個沒內容時（無同分類文章且 CTA 也關掉）自動變單欄 */
.ya-art-shell:not(:has(.ya-art-side)) { grid-template-columns: minmax(0, 1fr); }

.ya-art-main {
	position: relative; min-width: 0;
	background: var(--ya-white);
	border: 1px solid var(--ya-nw-hair);
	box-shadow: var(--ya-nw-sh-art);
	animation: yaNwRiseIn .85s var(--ya-ease) both;
}
/* 左上角展開的重點線 */
.ya-art-main::before {
	content: "";
	position: absolute; left: 0; top: 0; width: 34%; height: 2px;
	background: linear-gradient(90deg, var(--ya-ac) 0%, rgba(31,78,107,.06) 100%);
	transform-origin: left;
	animation: yaNwLineGrow 1.1s .2s var(--ya-ease) both;
}

/* ── 8-3 標頭 ── */
.ya-art-head { padding: clamp(1.6rem, 3.4vw, 3.4rem) clamp(1.4rem, 3.4vw, 3.4rem) 0; }
.ya-art-badge {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .4rem .9rem;
	background: var(--ya-mist); color: var(--ya-ocean);
	font-size: .74rem; letter-spacing: .12em;
	transition: background var(--ya-t-col), color var(--ya-t-col);
}
a.ya-art-badge:hover { background: var(--ya-deep); color: var(--ya-white); }
/* 🔴 工作規則 3 的例外：全頁唯一的原生 <h1> */
.ya-art-title,
h1.ya-art-title {
	margin: 1.1rem 0 0;
	font-family: var(--ya-serif); font-weight: 400;
	font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	line-height: 1.5; letter-spacing: .04em;
	color: var(--ya-ink); text-wrap: pretty;
	animation: yaNwWipeIn 1.2s .1s cubic-bezier(.3,.7,.2,1) both;
}
.ya-art-meta {
	display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap;
	padding: 1.2rem 0; margin-top: 1.2rem;
	border-top: 1px solid var(--ya-nw-hair-3);
	border-bottom: 1px solid var(--ya-nw-hair-3);
	font-size: .78rem; letter-spacing: .1em; color: var(--ya-muted);
}
.ya-art-meta__it { display: inline-flex; align-items: center; gap: .4rem; }
.ya-art-meta__it i { font-size: .82rem; line-height: 1; color: var(--ya-ac); }
/* 模組的 $story.poster 是帶 <a> 的 HTML，壓成與周邊同色 */
.ya-art-meta__it a { color: inherit; }
.ya-art-meta__it a:hover { color: var(--ya-ac); }

.ya-art-share { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.ya-art-share__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem;
	border: 1px solid var(--ya-nw-hair-5);
	color: var(--ya-ocean); border-radius: 50%;
	transition: border-color var(--ya-t-col), color var(--ya-t-col);
}
.ya-art-share__btn:hover { border-color: var(--ya-ac); color: var(--ya-ac); }
.ya-art-share__btn i { font-size: .82rem; line-height: 1; }

/* ── 8-4 封面：四種版型 ──────────────────────────────────
   ⚠ 只輸出**一份**（樣板端用 data-orient 切版型），
     不沿用 c_c 更早期「四份變體全寫進 DOM、靠 CSS 顯示其一」的做法：
     DOM 乾淨，也不會有重複 <h1> 的隱患。
   ⚠ 後端讀不到圖檔尺寸時 data-orient-server="0"，由 js/news.js 用實際尺寸補判斷。 */

/* (a) landscape 橫幅 */
.ya-art-cover[data-orient="landscape"] {
	position: relative;
	height: clamp(240px, 32vw, 440px);
	margin: clamp(1.6rem, 3vw, 2.6rem) 0;
	overflow: hidden;
	animation: yaNwRiseIn .9s .1s var(--ya-ease) both;
}
.ya-art-cover[data-orient="landscape"] .ya-art-cover__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}
.ya-art-cover[data-orient="landscape"] .ya-art-cover__wm {
	position: absolute;
	right: clamp(1rem, 3vw, 2.4rem); bottom: clamp(.6rem, 2vw, 1.6rem);
	font-family: var(--ya-en); font-style: italic;
	font-size: clamp(2.4rem, 6vw, 5rem); line-height: .8;
	color: rgba(255,255,255,.22); pointer-events: none;
}
.ya-art-cover[data-orient="landscape"] .ya-art-cover__cap {
	position: absolute; left: 0; bottom: 0;
	padding: .5rem .9rem; background: rgba(18,48,63,.72);
	font-size: .72rem; letter-spacing: .1em; color: rgba(255,255,255,.82);
}
/* 圖說條。⚠ 目前**沒有樣板在輸出它** —— 模組沒有「圖說」欄位。
   規則先留著：日後若替 news 加了圖說欄位，樣板補一個
   <span class="ya-art-cover__cap"> 就能直接用，不必再回來寫 CSS。 */

/* (b) square 方形：左圖右說明 */
.ya-art-cover[data-orient="square"],
/* (d) nocover 無圖：同一組欄寬 */
.ya-art-cover[data-orient="nocover"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	padding-left: clamp(1.4rem, 3.4vw, 3.4rem);
	padding-right: clamp(1.4rem, 3.4vw, 3.4rem);
	animation: yaNwRiseIn .9s .1s var(--ya-ease) both;
}
.ya-art-cover[data-orient="square"] {
	gap: clamp(1.2rem, 2.6vw, 2.2rem);
	align-items: center;
	margin: clamp(1.6rem, 3vw, 2.6rem) 0;
}
.ya-art-cover[data-orient="square"] .ya-art-cover__box {
	position: relative; aspect-ratio: 1 / 1; overflow: hidden;
	border: 1px solid var(--ya-line);
}
/* 左上角兩道短線（設計稿 item:325-326）*/
.ya-art-cover[data-orient="square"] .ya-art-cover__box::before,
.ya-art-cover[data-orient="square"] .ya-art-cover__box::after {
	content: ""; position: absolute; top: 0; left: 0; background: var(--ya-ac); z-index: 1;
}
.ya-art-cover[data-orient="square"] .ya-art-cover__box::before { width: 2.4rem; height: 1px; }
.ya-art-cover[data-orient="square"] .ya-art-cover__box::after  { width: 1px; height: 2.4rem; }

/* (c) portrait 直式：窄圖 + 右側說明，左邊界細線 */
.ya-art-cover[data-orient="portrait"] {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
	gap: clamp(1.2rem, 2.6vw, 2.4rem);
	align-items: stretch;
	margin: clamp(1.6rem, 3vw, 2.6rem) 0;
	padding-left: clamp(1.4rem, 3.4vw, 3.4rem);
	padding-right: clamp(1.4rem, 3.4vw, 3.4rem);
	animation: yaNwRiseIn .9s .1s var(--ya-ease) both;
}
.ya-art-cover[data-orient="portrait"] .ya-art-cover__box {
	position: relative; aspect-ratio: 3 / 4.4; overflow: hidden;
	border: 1px solid var(--ya-line);
}
.ya-art-cover[data-orient="portrait"] .ya-art-cover__note {
	justify-content: center;
	padding-left: clamp(0rem, 1.5vw, 1rem);
	border-left: 1px solid var(--ya-nw-hair-3);
}
.ya-art-cover[data-orient="portrait"] .ya-art-cover__en {
	font-family: var(--ya-en); font-style: italic;
	font-size: clamp(2rem, 4vw, 3.4rem); line-height: .9;
	color: var(--ya-mist);
}

.ya-art-cover__box .ya-art-cover__img { width: 100%; height: 100%; object-fit: cover; }

/* 方形／直式共用的右側說明欄 */
.ya-art-cover__note { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.ya-art-cover[data-orient="portrait"] .ya-art-cover__note { gap: 1rem; }
.ya-art-cover__eyebrow {
	font-family: var(--ya-en); font-style: italic;
	letter-spacing: .26em; font-size: .72rem;
	text-transform: uppercase; color: var(--ya-ac);
}
.ya-art-cover__text {
	margin: 0; font-family: var(--ya-serif);
	font-size: 1rem; line-height: 2.05; color: var(--ya-body); text-wrap: pretty;
}
.ya-art-cover__rule { display: block; width: 2.6rem; height: 1px; background: var(--ya-ac); }
.ya-art-cover__credit { font-size: .74rem; letter-spacing: .1em; color: var(--ya-nw-date); }

/* (d) nocover 無圖：左邊大日期，右邊細線與補充 */
.ya-art-cover[data-orient="nocover"] {
	gap: clamp(1rem, 2.6vw, 2.4rem);
	align-items: end;
	margin: clamp(1.4rem, 2.6vw, 2.2rem) 0;
	padding-bottom: clamp(1.4rem, 2.6vw, 2rem);
}
.ya-art-nocov__l { display: flex; flex-direction: column; gap: .5rem; }
.ya-art-nocov__r { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.ya-art-nocov__big {
	font-family: var(--ya-en);
	font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1;
	letter-spacing: .02em; color: var(--ya-ink);
}
.ya-art-nocov__hair {
	display: block; width: 100%; height: 1px;
	background: linear-gradient(90deg, rgba(190,133,116,.7) 0%, rgba(31,78,107,.12) 60%, transparent 100%);
}
.ya-art-nocov__line { font-size: .8rem; line-height: 2; letter-spacing: .08em; color: var(--ya-body-2); }

/* ── 8-5 內文 ────────────────────────────────────────────
   🔴 $story.text 是**導言＋正文串成的一整塊 HTML**，樣板端分不開
      （article.php:206-246）。所以導言樣式靠 `> p:first-child` 自動套用，
      沿用 cadch mode 4／6「內文第一段自動當小標」的既有慣例。 */
.ya-art-body { padding: 0 clamp(1.4rem, 3.4vw, 3.4rem) clamp(2rem, 4vw, 3.4rem); }
.ya-art-body > p {
	margin: 0 0 1.4rem;
	font-size: .94rem; line-height: 2.15;
	color: var(--ya-body-2); text-wrap: pretty;
}
.ya-art-body > p:first-child {
	margin-bottom: 1.6rem;
	font-family: var(--ya-serif); font-size: 1.05rem;
	line-height: 2.1; letter-spacing: .03em; color: var(--ya-body);
}
.ya-art-body > p:last-child { margin-bottom: 0; }
.ya-art-body a { color: var(--ya-ocean); text-decoration: underline; text-underline-offset: .25em; }
.ya-art-body a:hover { color: var(--ya-ac); }
.ya-art-body img { max-width: 100%; height: auto; margin: 1.6rem 0; }
/* 模組內容編輯器吐的標題。工作規則 3 只約束**佈景樣板**，
   使用者在後台寫的 <h2>/<h3> 仍會進到這裡，得給樣式。 */
.ya-art-body h1, .ya-art-body h2, .ya-art-body h3,
.ya-art-body h4, .ya-art-body h5, .ya-art-body h6,
.ya-art-body .h1, .ya-art-body .h2, .ya-art-body .h3,
.ya-art-body .h4, .ya-art-body .h5, .ya-art-body .h6 {
	margin: 2.2rem 0 1rem;
	font-family: var(--ya-serif); font-weight: 400;
	line-height: 1.7; letter-spacing: .06em; color: var(--ya-ink);
}
.ya-art-body h2, .ya-art-body .h2 { font-size: 1.25rem; }
.ya-art-body h3, .ya-art-body .h3 { font-size: 1.08rem; }
.ya-art-body h4, .ya-art-body h5, .ya-art-body h6,
.ya-art-body .h4, .ya-art-body .h5, .ya-art-body .h6 { font-size: 1rem; }
.ya-art-body ul, .ya-art-body ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.ya-art-body li { font-size: .94rem; line-height: 2.05; color: var(--ya-body-2); }
.ya-art-body blockquote {
	display: flex; gap: 1.2rem;
	margin: 2.2rem 0; padding: 1.6rem 1.8rem;
	background: var(--ya-mist); border-left: 2px solid var(--ya-ac);
	font-family: var(--ya-serif); font-size: 1.02rem; line-height: 2;
	color: var(--ya-ink); text-wrap: pretty;
}
.ya-art-body blockquote p { margin: 0; }
.ya-art-body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .9rem; }
.ya-art-body th, .ya-art-body td { padding: .7rem .9rem; border: 1px solid var(--ya-line); text-align: left; }
.ya-art-body th { background: var(--ya-mist); font-weight: 500; color: var(--ya-ink); }
.ya-art-body hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--ya-nw-hair-3); }

/* ── 8-6 附件下載 ────────────────────────────────────────
   🔴 連結一律用 **visitlink**（visit.php?fileid=N），不是 file_downloadname ——
      前者先累計下載次數再導向，後者是實體檔路徑、會繞過計數。
   🔴 **不要加 download 屬性**：visit.php 是「計數後 redirect」的 PHP，
      加了會讓瀏覽器下載那個 PHP 回應本身。
   ⚠ 設計稿的「檔案大小／下載次數」模組拿不到（article.php:381 組陣列時沒放），
      所以本區只有檔名＋類型＋上傳日期。要補得改模組。
   ⚠ 檔案類型圖示用 CSS 屬性選擇器判斷 data-mime，不在 Smarty 比對字串。 */
.ya-art-files { margin: 2.4rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--ya-nw-hair-3); }
.ya-art-files__head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.1rem; }
.ya-art-files__head i { font-size: .95rem; line-height: 1; color: var(--ya-ac); }
.ya-art-files__title {
	margin: 0; font-family: var(--ya-serif); font-weight: 400;
	font-size: 1rem; letter-spacing: .14em; color: var(--ya-ink);
}
.ya-art-files__count { font-family: var(--ya-en); font-style: italic; font-size: .85rem; color: var(--ya-nw-date); }
.ya-art-files__list { display: flex; flex-direction: column; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.ya-art-file {
	display: flex; align-items: center; gap: 1rem;
	padding: .95rem 1.1rem;
	border: 1px solid var(--ya-line); background: var(--ya-white);
	color: var(--ya-ink);
	transition: background .4s, border-color .4s, transform .5s var(--ya-ease);
}
.ya-art-file:hover {
	border-color: rgba(190,133,116,.55);
	background: var(--ya-mist);
	transform: translateX(4px);
}
.ya-art-file__ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
	border: 1px solid var(--ya-nw-hair-4); background: var(--ya-white);
	color: var(--ya-ocean); font-size: 1rem;
	transition: color .4s;
}
.ya-art-file:hover .ya-art-file__ico { color: var(--ya-ac); }
/* 圖示字元查自 css/bootstrap-icons.css：
   file-earmark-pdf f3ad／file-earmark-word f3c1／file-earmark-excel f38c／
   file-earmark-image f39c／file-earmark-zip f3c7／file-earmark f3a5（預設） */
.ya-art-file__ico::before { font-family: "bootstrap-icons"; content: "\f3a5"; }
.ya-art-file[data-mime*="pdf"]        .ya-art-file__ico::before { content: "\f3ad"; }
.ya-art-file[data-mime*="word"]       .ya-art-file__ico::before { content: "\f3c1"; }
.ya-art-file[data-mime*="excel"]      .ya-art-file__ico::before { content: "\f38c"; }
.ya-art-file[data-mime*="spreadsheet"] .ya-art-file__ico::before { content: "\f38c"; }
.ya-art-file[data-mime*="image"]      .ya-art-file__ico::before { content: "\f39c"; }
.ya-art-file[data-mime*="zip"]        .ya-art-file__ico::before { content: "\f3c7"; }
.ya-art-file[data-mime*="compress"]   .ya-art-file__ico::before { content: "\f3c7"; }
.ya-art-file__body { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.ya-art-file__name {
	font-family: var(--ya-serif); font-size: .95rem; letter-spacing: .03em;
	color: var(--ya-ink); transition: color .4s; text-wrap: pretty;
}
.ya-art-file:hover .ya-art-file__name { color: var(--ya-ocean); }
.ya-art-file__sub {
	display: flex; align-items: center; gap: .5rem;
	font-size: .72rem; letter-spacing: .08em; color: var(--ya-nw-date);
}
.ya-art-file__sub em { font-style: normal; }
/* 菱形分隔點 */
.ya-art-file__sub span + span::before {
	content: ""; display: inline-block;
	width: .24rem; height: .24rem; margin-right: .5rem;
	background: var(--ya-nw-dot); transform: rotate(45deg);
	vertical-align: middle;
}
.ya-art-file__cta {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-left: auto; padding-left: .8rem;
	font-size: .76rem; letter-spacing: .12em;
	color: var(--ya-muted); white-space: nowrap; transition: color .4s;
}
.ya-art-file:hover .ya-art-file__cta { color: var(--ya-ac); }
/* 設計稿：「下載」兩字平常不顯示，hover 才出現（箭頭常駐） */
.ya-art-file__cta em { font-style: normal; display: none; }
.ya-art-file:hover .ya-art-file__cta em { display: inline; }

/* ── 8-7 標籤 ── */
.ya-art-tags {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	margin-top: 2.2rem; padding-top: 1.6rem;
	border-top: 1px solid var(--ya-nw-hair-3);
}
.ya-art-tags__label { font-size: .74rem; letter-spacing: .14em; color: var(--ya-muted); margin-right: .3rem; }
/* tag_bar.html 吐的是一串 <a>，class 不由樣板控制 → 用後代選擇器壓成膠囊。
   ⚠ 這是全站唯一保留圓角的元件群（設計稿 border-radius:2rem），
     與 README「全站 border-radius:0」的硬規則並不衝突 —— 那條的例外由設計稿決定。 */
.ya-art-tags a {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .35rem .8rem;
	border: 1px solid var(--ya-nw-hair-4); border-radius: 2rem;
	font-size: .76rem; color: var(--ya-body);
	transition: border-color var(--ya-t-col), color var(--ya-t-col);
}
.ya-art-tags a::before {
	font-family: "bootstrap-icons"; content: "\f5b0";
	font-size: .7rem; line-height: 1; color: var(--ya-ac);
}
.ya-art-tags a:hover { border-color: var(--ya-ac); color: var(--ya-ac); }

/* ── 8-8 多頁文章分頁 ── */
.ya-art-pagenav {
	margin-top: 1.8rem; padding-top: 1.4rem;
	border-top: 1px solid var(--ya-nw-hair-3);
	font-size: .82rem; letter-spacing: .1em; color: var(--ya-muted);
}
.ya-art-pagenav a { color: var(--ya-ocean); }
.ya-art-pagenav a:hover { color: var(--ya-ac); }

/* ── 8-9 上下篇 ── */
.ya-art-pn {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	border-top: 1px solid var(--ya-nw-hair-3);
}
.ya-art-pn__it {
	display: flex; flex-direction: column; gap: .45rem;
	padding: 1.5rem clamp(1.4rem, 3vw, 3.4rem);
	transition: background var(--ya-t-col);
}
.ya-art-pn__it:hover { background: var(--ya-mist); }
.ya-art-pn__it--prev { border-right: 1px solid var(--ya-nw-hair-3); }
.ya-art-pn__it--next { align-items: flex-end; text-align: right; }
.ya-art-pn__label {
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .72rem; letter-spacing: .14em; color: var(--ya-muted);
}
.ya-art-pn__label i { font-size: .75rem; line-height: 1; color: var(--ya-ac); }
.ya-art-pn__title {
	font-family: var(--ya-serif); font-size: .95rem; line-height: 1.7;
	color: var(--ya-ink); text-wrap: pretty;
	transition: color var(--ya-t-col);
}
.ya-art-pn__it:hover .ya-art-pn__title { color: var(--ya-ac); }

/* ── 8-10 留言區 ──────────────────────────────────────────
   ⚠ XOOPS 的留言樣板（system_comments_*.html）產出的 markup 不由本佈景控制，
     只能包一層容器給底色與間距，再壓幾個常見元件。 */
.ya-art-comments {
	padding: clamp(1.8rem, 3.4vw, 3.4rem) clamp(1.4rem, 3.4vw, 3.4rem);
	border-top: 1px solid var(--ya-nw-hair-3);
	background: var(--ya-nw-soft-bg);
}
.ya-art-comments__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem; }
.ya-art-comments__head i { font-size: .95rem; line-height: 1; color: var(--ya-ac); }
.ya-art-comments__title {
	margin: 0; font-family: var(--ya-serif); font-weight: 400;
	font-size: 1.05rem; letter-spacing: .12em; color: var(--ya-ink);
}
.ya-art-comments table { width: 100%; border-collapse: collapse; background: var(--ya-white); }
.ya-art-comments td, .ya-art-comments th { padding: .8rem 1rem; border: 1px solid var(--ya-nw-hair); }
.ya-art-comments a { color: var(--ya-ocean); }
.ya-art-comments a:hover { color: var(--ya-ac); }
/* 獨立白卡版：設計稿把留言畫在文章卡內部，但 XOOPS 的留言是在 template_main
   之外組出來的，塞不進 news_item 的 <article>。改成緊接其下的獨立白卡。 */
.ya-art-comments--solo {
	margin-top: clamp(1.6rem, 3vw, 3rem);
	margin-bottom: clamp(4rem, 9vw, 7rem);
	border: 1px solid var(--ya-nw-hair);
	border-top: 1px solid var(--ya-nw-hair);
	box-shadow: var(--ya-nw-sh-art);
	background: var(--ya-white);
}
.ya-art-comments__nav { margin-bottom: 1rem; font-size: .82rem; letter-spacing: .1em; color: var(--ya-muted); }

/* ── 8-11 側欄 ── */
.ya-art-side {
	display: flex; flex-direction: column;
	gap: clamp(1.2rem, 2vw, 1.8rem);
	position: sticky;
	/* 設計稿是固定 9.5rem；本佈景頁首是 fixed 且高度是 clamp，改用它推開 */
	top: calc(var(--ya-head-h) + 1.5rem);
}
.ya-art-box {
	background: var(--ya-white);
	padding: 1.5rem 1.4rem;
	border: 1px solid var(--ya-nw-hair);
	box-shadow: var(--ya-nw-sh);
}
.ya-art-box__head {
	display: flex; align-items: center; gap: .55rem;
	padding-bottom: .9rem; margin-bottom: 1rem;
	border-bottom: 1px solid var(--ya-line);
}
.ya-art-box__head i { font-size: .95rem; line-height: 1; color: var(--ya-ac); }
.ya-art-box__title {
	margin: 0; font-family: var(--ya-serif); font-weight: 400;
	font-size: .96rem; letter-spacing: .14em; color: var(--ya-ink);
}
.ya-art-rel { display: flex; flex-direction: column; gap: 1rem; }

/* ── 🔴 縮圖欄（.ya-art-rel__thumb）2026-08-31 依使用者指示移除 ──────────────
   設計稿（YuanAn News.dc.html:487-491）每一列是「4.2rem × 3.2rem 縮圖 ＋ 文字」，
   但模組的 $summary **不含圖片**（article.php:440），拿不到真圖。
   使用者裁示不改模組 → 整欄拿掉，而不是擺佔位圖。markup 與 CSS 兩邊同時刪。

   要復原（前提是模組先 append 出 story_picture）：
     markup：<span class="ya-art-rel__thumb"><img …></span> 放在 __body 之前
     樣式：__thumb 是 position:relative; width:4.2rem; height:3.2rem; flex:0 0 auto;
           overflow:hidden; background:--ya-mist
           img 是 width/height:100%; object-fit:cover; transition:transform 1s --ya-ease
           ::after 是 inset:0; background:--ya-deep; opacity:0; transition:opacity .5s
           hover：img → scale(1.12)、::after → opacity:.12
     並把下面的 .ya-art-rel__it 改回 display:flex; gap:.85rem; align-items:flex-start
   ────────────────────────────────────────────────────────────────────────── */
.ya-art-rel__it { display: block; transition: transform .5s var(--ya-ease); }
.ya-art-rel__it:hover { transform: translateX(4px); }
.ya-art-rel__body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.ya-art-rel__title {
	font-size: .85rem; line-height: 1.65; color: var(--ya-body);
	transition: color .4s; text-wrap: pretty;
}
.ya-art-rel__it:hover .ya-art-rel__title { color: var(--ya-ac); }
/* 設計稿：未 hover 時 scaleX(0) 且原點在右，hover 變 scaleX(1) 原點在左
   → 線是「從左邊長出來」。原點必須跟著換，否則會變成從右邊長。 */
.ya-art-rel__rule {
	display: block; width: 100%; height: 1px; background: var(--ya-ac);
	transform: scaleX(0); transform-origin: right;
	transition: transform .5s var(--ya-ease);
}
.ya-art-rel__it:hover .ya-art-rel__rule { transform: scaleX(1); transform-origin: left; }
.ya-art-rel__date { font-size: .7rem; letter-spacing: .1em; color: var(--ya-nw-date); }
.ya-art-box__more {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-top: 1rem; font-size: .78rem; letter-spacing: .12em; color: var(--ya-ocean);
	transition: gap var(--ya-t-move), color var(--ya-t-col);
}
.ya-art-box__more:hover { gap: .9rem; color: var(--ya-ac); }

/* ── 8-12 側欄「熱門新聞」區塊（news 區塊 `news_block_top`・本站 bid 16）──────
   🔴 2026-09-10 新增，取代模組自帶的裸 `<ul class="list-unstyled">`。

   ⚠ **外框與標題由 `tpl/theme_block.tpl` 的 `.ya-block` 提供**，這裡只管清單。
   ⚠ 視覺語彙刻意與上面 8-11 的 `.ya-art-rel`（同分類文章）**同一套** ——
     標題、玫瑰金展開細線、淡色附註列都一致，只多了一欄排名數字。
     那一欄就是「熱門排行」與「同分類文章」的唯一差別。
   ⚠ token（`--ya-nw-*`）掛在 `.ya-nwpage` 上，而側欄在 `.ya-nwpage` **之內**
     （`tpl/leftBlock.tpl` 在頁面容器裡），所以這裡不必像 5-B 節那樣另外掛選擇器。
     🔴 但**若日後把這個區塊搬到 page_bottom\* 等版位，就會踩到 5-B 節那個坑**
        （`var()` 解析失敗→整條宣告作廢），記得把新選擇器加進第 1 節。
   ────────────────────────────────────────────────────────────────────────── */
.ya-nw-hot { display: flex; flex-direction: column; gap: 1rem; }
.ya-nw-hot__it {
	display: flex; align-items: flex-start; gap: .7rem;
	transition: transform .5s var(--ya-ease);
}
.ya-nw-hot__it:hover { transform: translateX(4px); }
/* 排名：英數字體、與標題第一行對齊（line-height 對齊靠 padding-top 微調） */
.ya-nw-hot__no {
	flex: 0 0 auto;
	padding-top: .1rem;
	font-family: var(--ya-en);
	font-size: .95rem; letter-spacing: .06em;
	color: var(--ya-nw-date);
	transition: color .4s var(--ya-ease);
}
/* 前三名給玫瑰金，其餘維持淡色 —— 讓「前段班」一眼認得出來 */
.ya-nw-hot__no.is-top { color: var(--ya-ac); }
.ya-nw-hot__it:hover .ya-nw-hot__no { color: var(--ya-ac); }

.ya-nw-hot__body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; }
.ya-nw-hot__title {
	font-size: .85rem; line-height: 1.65; color: var(--ya-body);
	transition: color .4s; text-wrap: pretty;
}
.ya-nw-hot__it:hover .ya-nw-hot__title { color: var(--ya-ac); }
/* 細線：與 .ya-art-rel__rule 完全同一套（未 hover 從右收起，hover 從左長出） */
.ya-nw-hot__rule {
	display: block; width: 100%; height: 1px; background: var(--ya-ac);
	transform: scaleX(0); transform-origin: right;
	transition: transform .5s var(--ya-ease);
}
.ya-nw-hot__it:hover .ya-nw-hot__rule { transform: scaleX(1); transform-origin: left; }
/* 附註列：分類名 ＋ 數值（點閱／日期／評分，由後台排序方式決定） */
.ya-nw-hot__meta {
	display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
	font-size: .7rem; letter-spacing: .1em; color: var(--ya-nw-date);
}
.ya-nw-hot__topic { color: var(--ya-muted); }
/* 數值用英數字體，與全站的篇數／價格一致 */
.ya-nw-hot__n { font-family: var(--ya-en); letter-spacing: .06em; }

/* ── 深底 CTA（Reservation）：🔴 **2026-08-31 依使用者指示移除，markup 與 CSS 一起刪** ──
   照本專案既有慣例：移除元件時兩邊同時刪，不留孤兒樣式
   （同 c_c 移除「延伸閱讀」時的處理方式）。

   要復原的話，側欄 markup 是：

     <section class="ya-art-cta">
       <span class="ya-art-cta__en">Reservation</span>
       <p class="ya-art-cta__lead">…</p>
       <a class="ya-art-cta__btn" href="…"><span>立即預約</span><i class="bi bi-arrow-right"></i></a>
     </section>

   對應樣式（設計稿 YuanAn News.dc.html:501-516）：深底 --ya-deep 底、1.6rem 1.4rem 內距、
   gap .9rem；按鈕是 --ya-ac 底 ＋ ::before 的 --ya-ac-soft 圓盤由左 scaleX(0→1) 鋪滿、
   hover 文字轉 --ya-deep、箭頭 translateX(5px)、陰影 0 14px 30px -18px rgba(230,192,178,.9)。
   ⚠ 設計稿那行電話 03-988-1234 是**範例號碼**，不是本站的，復原時不要照抄。 */

/* 管理員編輯連結（模組吐的 HTML）。
   CTA 移除後改成側欄裡的獨立一小塊，所以不再需要 margin-top。 */
.ya-art-box--admin { padding: 1rem 1.2rem; }
/* 管理員編輯連結（模組吐的 HTML） */
.ya-art-admin { font-size: .78rem; letter-spacing: .06em; }
.ya-art-admin a { color: var(--ya-ocean); }
.ya-art-admin a:hover { color: var(--ya-ac); }


/* ==========================================================================
   9. 歸檔頁（設計稿 archive view，YuanAn News.dc.html:589-655）
   ⚠ 使用者 2026-08-31 裁示：**拿掉年／月的篇數與長條圖**。
     模組的 $years[i].months[m] 只有 string／number，沒有 count（archive.php:129-157），
     要顯示就得改模組 PHP，本次不動模組。年月格狀選單照設計稿排版。
   ========================================================================== */
.ya-arc {
	position: relative;
	padding-top: clamp(2.6rem, 6vw, 4.2rem);
	padding-bottom: clamp(4rem, 9vw, 7rem);
}
.ya-arc__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ya-arc__wm {
	position: absolute; top: -.6rem; right: -1.5vw;
	font-family: var(--ya-en); font-style: italic;
	font-size: clamp(5rem, 15vw, 13rem); line-height: .78;
	color: rgba(31,78,107,.055); white-space: nowrap; letter-spacing: -.02em;
	animation: yaNwDriftWM 18s ease-in-out infinite;
}
.ya-arc__hair {
	position: absolute; top: 0; left: 0; width: 34%; height: 1px;
	background: linear-gradient(90deg, var(--ya-ac) 0%, rgba(31,78,107,.1) 70%, transparent 100%);
	transform-origin: left;
	animation: yaNwLineGrow 1.2s var(--ya-ease) both;
}
.ya-arc__body { position: relative; z-index: 1; }

/* 年份列 */
.ya-arc__years {
	display: flex; align-items: center; justify-content: center;
	gap: .4rem; flex-wrap: wrap;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--ya-line);
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.ya-arc__year {
	display: inline-flex; align-items: baseline; gap: .45rem;
	padding: .5rem 1.1rem;
	border: 1px solid var(--ya-nw-hair-4); background: var(--ya-white);
	color: var(--ya-body); font-family: var(--ya-sans);
	cursor: pointer;
	transition: border-color var(--ya-t-col), background var(--ya-t-col), color var(--ya-t-col);
}
.ya-arc__year:hover { border-color: var(--ya-ac); }
.ya-arc__year.is-on { border-color: var(--ya-deep); background: var(--ya-deep); color: var(--ya-white); }
.ya-arc__year-n { font-family: var(--ya-en); font-size: 1.05rem; }

/* 月份格 */
.ya-arc__months {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .7rem; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ya-arc__months[hidden] { display: none; }
.ya-arc__mo {
	display: flex; flex-direction: column; gap: .5rem;
	padding: 1.1rem 1.2rem;
	background: var(--ya-white); border: 1px solid var(--ya-nw-hair-4);
	transition: transform .5s var(--ya-ease), border-color .4s, background .4s;
	animation: yaNwRiseIn .7s var(--ya-ease) both;
	animation-delay: var(--ya-nw-d, 0ms);
}
.ya-arc__months > .ya-arc__mo:nth-child(1)  { --ya-nw-d:   0ms; }
.ya-arc__months > .ya-arc__mo:nth-child(2)  { --ya-nw-d:  40ms; }
.ya-arc__months > .ya-arc__mo:nth-child(3)  { --ya-nw-d:  80ms; }
.ya-arc__months > .ya-arc__mo:nth-child(4)  { --ya-nw-d: 120ms; }
.ya-arc__months > .ya-arc__mo:nth-child(5)  { --ya-nw-d: 160ms; }
.ya-arc__months > .ya-arc__mo:nth-child(6)  { --ya-nw-d: 200ms; }
.ya-arc__months > .ya-arc__mo:nth-child(7)  { --ya-nw-d: 240ms; }
.ya-arc__months > .ya-arc__mo:nth-child(8)  { --ya-nw-d: 280ms; }
.ya-arc__months > .ya-arc__mo:nth-child(9)  { --ya-nw-d: 320ms; }
.ya-arc__months > .ya-arc__mo:nth-child(10) { --ya-nw-d: 360ms; }
.ya-arc__months > .ya-arc__mo:nth-child(11) { --ya-nw-d: 400ms; }
.ya-arc__months > .ya-arc__mo:nth-child(12) { --ya-nw-d: 440ms; }
.ya-arc__mo:hover { border-color: var(--ya-ac); transform: translateY(-5px); }
.ya-arc__mo.is-on { border-color: var(--ya-deep); background: var(--ya-deep); }
.ya-arc__mo-label {
	font-family: var(--ya-en); font-style: italic;
	font-size: 1.2rem; color: var(--ya-ink);
	transition: color var(--ya-t-col);
}
.ya-arc__mo.is-on .ya-arc__mo-label { color: var(--ya-white); }
/* 中文月名。設計稿這個位置放的是「N 篇」，模組沒有 count（見樣板檔頭），
   改放月名 —— 版位、字級、對齊都照設計稿。 */
.ya-arc__mo-cn {
	font-size: .72rem; letter-spacing: .08em; color: var(--ya-muted);
	transition: color var(--ya-t-col);
}
.ya-arc__mo.is-on .ya-arc__mo-cn { color: var(--ya-ac-soft); }
/* 月份格是連結（會真的重新查詢），排版仍照設計稿的兩欄基線對齊 */
.ya-arc__mo {
	flex-direction: row; align-items: baseline; justify-content: space-between;
	gap: .6rem; color: inherit;
}

/* 文章清單 */
.ya-arc__list {
	position: relative;
	background: var(--ya-white);
	border: 1px solid var(--ya-nw-hair);
	box-shadow: var(--ya-nw-sh-arc);
	animation: yaNwRiseIn .85s .1s var(--ya-ease) both;
}
.ya-arc__list::before {
	content: "";
	position: absolute; left: 0; top: 0; width: 30%; height: 2px;
	background: linear-gradient(90deg, var(--ya-ac) 0%, rgba(31,78,107,.06) 100%);
	transform-origin: left;
	animation: yaNwLineGrow 1.1s .25s var(--ya-ease) both;
}
.ya-arc__list-head {
	display: flex; align-items: center; gap: .7rem;
	padding: 1.3rem clamp(1.2rem, 3vw, 2.2rem);
	border-bottom: 1px solid var(--ya-nw-hair-3);
}
.ya-arc__list-head i { font-size: .95rem; line-height: 1; color: var(--ya-ac); }
.ya-arc__list-title {
	margin: 0; font-family: var(--ya-serif); font-weight: 400;
	font-size: 1.05rem; letter-spacing: .12em; color: var(--ya-ink);
}
.ya-arc__list-count { margin-left: auto; font-size: .76rem; letter-spacing: .1em; color: var(--ya-nw-date); }
/* 🔴 列本身不是 <a>：$story.title 是模組串好的 HTML，**內含兩個 <a>**
     （分類連結 ＋ 標題連結）。外層再包 <a> 會變巢狀連結（無效 HTML，
     瀏覽器會提前關閉外層），所以用 <div> 並讓內層連結自己負責點擊。 */
.ya-arc__row {
	display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem);
	padding: 1.05rem clamp(1.2rem, 3vw, 2.2rem);
	border-bottom: 1px solid var(--ya-nw-hair-2);
	transition: background .45s var(--ya-ease), padding-left .45s var(--ya-ease);
}
.ya-arc__row:last-child { border-bottom: 0; }
.ya-arc__row:hover { background: var(--ya-mist); padding-left: clamp(1.6rem, 3.6vw, 2.9rem); }
.ya-arc__row-date {
	font-family: var(--ya-en); font-style: italic; font-size: .9rem;
	color: var(--ya-ac); flex: 0 0 auto; min-width: 5.4rem;
}
.ya-arc__row-title {
	min-width: 0; flex: 1 1 auto;
	font-family: var(--ya-serif); font-size: .96rem; line-height: 1.6;
	color: var(--ya-ink); text-wrap: pretty;
}
.ya-arc__row-title a { color: var(--ya-ink); transition: color var(--ya-t-col); }
.ya-arc__row-title a:hover { color: var(--ya-ac); }
.ya-arc__row-views {
	margin-left: auto; flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .72rem; color: var(--ya-nw-date);
}
.ya-arc__row-views i { font-size: .72rem; line-height: 1; }
.ya-arc__hint {
	padding: clamp(2rem, 5vw, 3.4rem) clamp(1.2rem, 3vw, 2.2rem);
	text-align: center; font-size: .88rem; letter-spacing: .1em; color: var(--ya-muted);
}


/* ==========================================================================
   10. 響應式 —— 斷點只有一個：1100px（README 硬規則）
   ========================================================================== */
@media (max-width: 1100px) {
	/* 列表：兩欄 → 單欄（設計稿 listCols: m ? '1fr' : …）*/
	.ya-nw-grid { grid-template-columns: 1fr; }

	/* 文章：側欄退到內文下方，取消 sticky */
	.ya-art-shell { grid-template-columns: minmax(0, 1fr); }
	.ya-art-side { position: static; top: auto; }

	/* 封面：方形／直式／無圖三種版型都改單欄（設計稿 heroSqCols/heroPtCols: m ? '1fr'）*/
	.ya-art-cover[data-orient="square"],
	.ya-art-cover[data-orient="portrait"],
	.ya-art-cover[data-orient="nocover"] { grid-template-columns: 1fr; }
	.ya-art-cover[data-orient="portrait"] .ya-art-cover__note {
		padding-left: 0; border-left: 0;
		padding-top: 1rem; border-top: 1px solid var(--ya-nw-hair-3);
	}
	.ya-art-cover[data-orient="portrait"] .ya-art-cover__box { aspect-ratio: 3 / 3.4; }

	/* 上下篇：兩格併排會太窄 → 單欄，右格取消靠右 */
	.ya-art-pn { grid-template-columns: 1fr; }
	.ya-art-pn__it--prev { border-right: 0; border-bottom: 1px solid var(--ya-nw-hair-3); }
	.ya-art-pn__it--next { align-items: flex-start; text-align: left; }

	/* 歸檔列：瀏覽數換行放到標題下 */
	.ya-arc__row { flex-wrap: wrap; }
	.ya-arc__row-views { margin-left: 0; }
}

@media (max-width: 560px) {
	/* 卡片的日期直欄在窄螢幕吃掉太多寬度 → 改成橫排一行 */
	.ya-nw-card__row { flex-direction: column; gap: .8rem; }
	.ya-nw-card__date { flex-direction: row; align-items: baseline; gap: .4rem; padding-top: 0; }
	.ya-nw-card__d { font-size: 1.3rem; }
	.ya-nw-card__body { border-left: 0; padding-left: 0; }

	.ya-art-meta { gap: .8rem; }
	.ya-art-share { margin-left: 0; }
	.ya-art-file { flex-wrap: wrap; }
	.ya-art-file__cta { margin-left: 0; padding-left: 0; }
}


/* ==========================================================================
   11. 列印（移植原則 5：隱藏導覽與 hover 裝飾）
   ========================================================================== */
@media print {
	.ya-band,
	.ya-nw-filter,
	.ya-nw-native,
	.ya-nw-pager,
	.ya-art-share,
	.ya-art-side,
	.ya-art-pn,
	.ya-art-comments,
	.ya-arc__deco,
	.ya-arc__years,
	.ya-arc__months { display: none !important; }

	.ya-nwpage * { animation: none !important; transition: none !important; }
	.ya-art-main,
	.ya-arc__list { border: 0; box-shadow: none; }
	.ya-art-main::before,
	.ya-arc__list::before { display: none; }
	.ya-art-body { padding-left: 0; padding-right: 0; }
	.ya-nw-card__shine { display: none; }
}