@charset "UTF-8";
/* =========================================================================
   元安溫泉旅館 / 楓庵 YUAN·AN ONSEN — 首頁專用樣式（demo_D 階段 2B）

   來源：參考資料/demo_D/design/YuanAn Home.dc.html
   載入：theme.tpl 只在首頁載入（<{if !$xoops_contents}>），內頁一行都用不到。

   ── 目次 ──
     1. 共用元件（浮水印字、暈染光暈、水波漣漪、掃光、底線滑入連結）
     2. Hero                    blocks/nc_vision_block.html
     3. 房型介紹 .ya-rooms      nc_vision tmpl_1
     4. 品牌故事 .ya-story      nc_vision tmpl_2
     5. 服務設施 .ya-facil      nc_vision tmpl_3
     6. 限時禮遇 .ya-offer      nc_vision tmpl_4
     7. 一日湯宿 .ya-day        nc_vision tmpl_5
     8. 最新消息 .ya-news       news 模組 news_block_new.html
     9. 響應式（單一斷點 1100px）
    10. 列印

   ── 色彩 ──
   一律用 style.css 第 1 節的 --ya- 變數，不寫死色碼。
   設計稿 inline style 的 var(--ac,#C08552) 那類 fallback 是舊值殘留，已忽略。
     設計稿 --deep → --ya-deep    --ac  → --ya-ac
            --acs  → --ya-ac-soft --oc  → --ya-ocean
            --mist → --ya-mist    --ink → --ya-ink

   ── hover ──
   設計稿的 hover 是 JS state 驅動；此處一律改寫為 CSS :hover 後代選擇器
   （CSS 移植原則 3）。js/home.js 只做 CSS 做不到的事：橫向輪播與 Hero 切換。
   ========================================================================= */


/* =========================================================================
   1. 共用元件
   ========================================================================= */
/* ⚠⚠ 底色塊（__under）的顏色是**設計稿的字面值，故意維持暖棕色，不要換成 --ya- 變數**。

   設計稿裡它們長這樣（第 875、1025、1027 行）：
     under: ['rgba(192,133,82,.2)','rgba(140,106,74,.17)','rgba(94,70,50,.15)', …]
   是**寫死的 rgba 字串，不是 var(--ac) 之類**。所以它們**不吃 PALETTE**，
   就算整站色系換成藍灰，demo 上這幾塊底色塊仍然是暖棕色。

   2A 誤把它們當成「舊暖色殘值」映射成 --ya-ac／--ya-ocean／--ya-deep，
   房型、服務設施、一日湯宿三區的底色塊因此全部變成玫瑰金／藍／深藍，
   與 demo 差很多。2026-08-31 已全部改回設計稿字面值（12 個值）。

   同理，`.ya-facil__frame` 的 box-shadow 也是字面值 rgba(58,46,35,.4)，不是 --ya-sh-2。

   👉 判斷準則：設計稿裡寫 `var(--xx, #fallback)` 的 → fallback 是舊值，忽略，用 --ya- 變數；
      設計稿裡寫**純 rgba()／#hex 字面值**的 → 那是設計稿真正要的顏色，照抄。
*/

/* 首頁的 main 不套內頁那層置中容器 —— 七個區段各自滿版 */
.ya-main--home { display: block; padding: 0; }

@keyframes yaInkDrift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
@keyframes yaRipple {
	0%   { transform: scale(.2); opacity: 0; }
	18%  { opacity: .5; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* 浮水印大字：Cormorant italic，壓在標題後方 */
.ya-wm {
	position: absolute;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: clamp(4rem, 14vw, 15rem);
	line-height: .8;
	letter-spacing: -.03em;
	white-space: nowrap;
	color: var(--ya-mist);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.ya-wm--light { color: rgba(255, 255, 255, .055); }

/* 暈染光暈：模糊的圓形漸層，緩慢漂移 */
.ya-ink {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	animation: yaInkDrift 24s ease-in-out infinite;
}

/* 水波漣漪：擴散的細圓環 */
.ya-ripple {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;
	opacity: 0;
	animation: yaRipple 8s cubic-bezier(.2, .5, .2, 1) infinite;
	pointer-events: none;
}

/* 掃光：hover 時由左掃到右的一道斜光 */
.ya-shine {
	position: absolute;
	top: -25%; bottom: -25%;
	left: -60%;
	width: 34%;
	background: linear-gradient(100deg,
		transparent 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.5) 50%,
		rgba(255,255,255,.05) 70%, transparent 100%);
	transform: skewX(-14deg);
	filter: blur(7px);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
	transition: left 1.05s cubic-bezier(.35, .1, .25, 1), opacity .4s ease;
}

/* 重點色字：大標裡被挑出來的那一段 */
/* .ya-accent 的基底規則 2026-08-31 移到 style.css（全站載入）——
   cadch 等其他模組頁不載入 home.css，放這裡它們吃不到。
   下面各區段的 .ya-accent 覆寫**留在本檔**，那是首頁專屬的。 */

/* 底線滑入連結：底線由右向左收、再由左展開，字距同時撐開 */
.ya-link {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding-bottom: .35rem;
	font-size: .95rem;
	letter-spacing: .12em;
	color: var(--ya-ocean);
	border-bottom: 1px solid var(--ya-line);
	background-image: linear-gradient(var(--ya-ac), var(--ya-ac));
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 1px;
	transition: background-size .6s cubic-bezier(.35, .05, .2, 1),
	            letter-spacing .4s ease, color .4s;
}
.ya-link:hover,
.ya-link:focus-visible {
	color: var(--ya-ac);
	letter-spacing: .24em;
	background-position: 0 100%;
	background-size: 100% 1px;
}
.ya-link:hover .ya-arrow { transform: translateX(5px); }

/* 深底區段上的連結（新聞、故事、CTA）：改用玫瑰金與白 */
.ya-news .ya-link,
.ya-story .ya-link,
.ya-offer .ya-link {
	color: var(--ya-ac-soft);
	border-bottom-color: rgba(230, 192, 178, .42);
	background-image: linear-gradient(#fff, #fff);
}
.ya-news .ya-link:hover,
.ya-story .ya-link:hover,
.ya-offer .ya-link:hover,
.ya-news .ya-link:focus-visible,
.ya-story .ya-link:focus-visible,
.ya-offer .ya-link:focus-visible { color: #fff; }

/* 🔴 `.ya-blockedit` 已於 2026-09-09 **整組搬到 `css/style.css` 第 13 節**。
   為什麼要搬：`home.css` 只在首頁載入（`theme.tpl:60` 的 `<{if !$xoops_contents}>`），
   寫在這裡的話，nc_vision 區塊一放到內頁，「編輯上傳」就變成**完全沒有樣式的裸連結**。
   ⚠ 不要再把它加回來。 */


/* =========================================================================
   2. Hero  —  blocks/nc_vision_block.html
   設計稿：YuanAn Home.dc.html 第 180–242 行（#home），狀態值在第 830–1080 行

   ── 三層結構（順序不可調，逐像素翻色靠它）──────────────────
     .ya-hero__stage  absolute; top:0; height:100vh  ← 背景，會正常捲走
     .ya-hero__side   absolute; top:100vh            ← 右側照片＋花瓣
     .ya-hero__pin    sticky;   top:0; height:100vh  ← 文案，定住不動
   文案定住不動，背景圖底緣（距 section 頂端 100vh）隨捲動往上刮過文字。

   ── 疊放順序（沿用設計稿的 z-index）──
     背景大字 1 ／ 遮色 2 ／ 碎裂層 3 ／ 直排字 5 ／ 文案 5 ／ 指示點與往下 6
   ⚠ .ya-hero__slide 不可以設 z-index —— 一設就變成堆疊環境，
     裡面的直排字（z-index:5）會被關在裡面，爬不到遮色層上面。

   ── 碎裂與花瓣為什麼是純 CSS ──
   設計稿的 SHARDS 與 petals 看似亂數其實是固定常數（花瓣用 sin 雜湊，
   每次結果一樣），所以數值全部寫死在 :nth-of-type()，動畫用 @keyframes。
   **關掉 JS 也不會卡在半空中**：animation 的 both 會讓碎片停在原位。
   js/home.js 只負責 1.9 秒後把整層移出合成，那是最佳化不是正確性。
   ========================================================================= */
.ya-hero {
	position: relative;
	height: 205vh;
	/* ⚠ 白底不是筆誤（設計稿第 180 行 background:#fff）。背景照片只鋪到 100vh，
	   捲過第一螢幕之後露出的就是這片白 —— 文字翻成墨色正是為了落在這上面。
	   深色是 .ya-hero__stage 自己的底，不是 section 的。 */
	background: #fff;
}

/* ── 背景層 ───────────────────────────────────────────────────── */
.ya-hero__stage {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100vh;
	overflow: hidden;
	background: var(--ya-deep);
	clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}

.ya-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.4s ease, visibility 0s linear 1.4s;
}
.ya-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.4s ease, visibility 0s;
}

.ya-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 8s linear;
}
.ya-hero__slide.is-active .ya-hero__photo { transform: scale(1); }

.ya-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* 設計稿第 185 行：105deg 斜向，右側完全透明 —— 只壓左邊文案區的底，
	   照片右半邊維持原始色調。
	   ⚠ 不要改回 2A 那版 180deg、末端 .78 的直向漸層：那會把整張照片
	     （尤其下半部）蓋上一層深藍，上傳什麼圖看起來都變色。
	   ⚠ 色值 rgba(18,48,63) 就是 --ya-deep #12303F。設計稿原文寫的是舊暖色
	     palette 的 rgba(30,22,16)，依本專案慣例換成現行藍灰 palette。
	     rgba() 裡沒辦法直接塞 var()，所以這裡寫字面值。 */
	background: linear-gradient(105deg,
		rgba(18, 48, 63, .6) 0%, rgba(18, 48, 63, .18) 55%, transparent 100%);
}

/* 背景大字（視差錨點 data-para="-0.08"）與右側直排字 */
.ya-hero__word {
	position: absolute;
	right: -2%;
	bottom: 5%;
	z-index: 1;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: clamp(5rem, 18vw, 18rem);
	line-height: .8;
	letter-spacing: -.02em;
	color: rgba(255, 255, 255, .08);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.ya-hero__vert {
	position: absolute;
	top: 22%;
	right: clamp(1.5rem, 6vw, 5rem);
	z-index: 5;
	writing-mode: vertical-rl;
	font-family: var(--ya-serif);
	font-size: clamp(.9rem, 1.1vw, 1.1rem);
	letter-spacing: .5em;
	color: rgba(255, 255, 255, .6);
	pointer-events: none;
}

/* ── 碎裂進場（設計稿 SHARDS，第 617–627 行）────────────────── */
.ya-hero__shatter {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	transition: opacity 1s .3s, visibility 1s .3s;
}
.ya-hero__shatter.is-gone { opacity: 0; visibility: hidden; }

.ya-hero__shard {
	position: absolute;
	inset: 0;
	display: block;
	will-change: transform;
	/* from 讀的是各自的 --ya-shard-from；keyframes 裡的 var() 會在元素上解析 */
	animation: yaShardIn 1.5s var(--ya-ease) both;
}
.ya-hero__shard img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
@keyframes yaShardIn {
	from { transform: var(--ya-shard-from); }
	to   { transform: none; }
}

.ya-hero__shard:nth-of-type(1)  { clip-path: polygon(0 0,26% 3%,18% 38%,0 30%);              --ya-shard-from: translate(-90px,-70px)  rotate(-14deg) scale(1.2); animation-delay: .05s; }
.ya-hero__shard:nth-of-type(2)  { clip-path: polygon(26% 3%,52% 0,44% 28%,18% 38%);          --ya-shard-from: translate(-30px,-110px) rotate(10deg)  scale(1.2); animation-delay: .18s; }
.ya-hero__shard:nth-of-type(3)  { clip-path: polygon(52% 0,78% 5%,72% 32%,44% 28%);          --ya-shard-from: translate(40px,-95px)   rotate(-8deg)  scale(1.2); animation-delay: .1s;  }
.ya-hero__shard:nth-of-type(4)  { clip-path: polygon(78% 5%,100% 0,100% 34%,72% 32%);        --ya-shard-from: translate(100px,-60px)  rotate(16deg)  scale(1.2); animation-delay: .28s; }
.ya-hero__shard:nth-of-type(5)  { clip-path: polygon(0 30%,18% 38%,14% 66%,0 62%);           --ya-shard-from: translate(-120px,-10px) rotate(12deg)  scale(1.2); animation-delay: .15s; }
.ya-hero__shard:nth-of-type(6)  { clip-path: polygon(18% 38%,44% 28%,50% 60%,14% 66%);       --ya-shard-from: translate(-50px,40px)   rotate(-11deg) scale(1.2); animation-delay: .32s; }
.ya-hero__shard:nth-of-type(7)  { clip-path: polygon(44% 28%,72% 32%,78% 64%,50% 60%);       --ya-shard-from: translate(60px,30px)    rotate(9deg)   scale(1.2); animation-delay: .08s; }
.ya-hero__shard:nth-of-type(8)  { clip-path: polygon(72% 32%,100% 34%,100% 68%,78% 64%);     --ya-shard-from: translate(130px,20px)   rotate(-15deg) scale(1.2); animation-delay: .24s; }
.ya-hero__shard:nth-of-type(9)  { clip-path: polygon(0 62%,50% 60%,42% 100%,0 100%);         --ya-shard-from: translate(-80px,100px)  rotate(13deg)  scale(1.2); animation-delay: .2s;  }
.ya-hero__shard:nth-of-type(10) { clip-path: polygon(50% 60%,78% 64%,100% 68%,100% 100%,42% 100%); --ya-shard-from: translate(90px,110px) rotate(-10deg) scale(1.2); animation-delay: .36s; }

/* ── 右側照片遮罩層 ＋ 飄落花瓣（設計稿第 199–204 行）────────── */
.ya-hero__side {
	position: absolute;
	top: 100vh; right: 0;
	width: 46%; height: 105vh;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}
.ya-hero__side-photo {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: right center;
	opacity: .95;
	/* 兩層遮罩取交集：橢圓形柔邊 ∩ 上緣淡出。Safari 要 -webkit- 前綴，
	   而且舊語法叫 source-in 不是 intersect，兩套都要寫。 */
	-webkit-mask-image: radial-gradient(ellipse 72% 56% at 76% 52%, #000 22%, rgba(0,0,0,.5) 58%, transparent 82%),
	                    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 12%, #000 30%);
	        mask-image: radial-gradient(ellipse 72% 56% at 76% 52%, #000 22%, rgba(0,0,0,.5) 58%, transparent 82%),
	                    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 12%, #000 30%);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
}

/* 第 1 筆還沒上傳「第二圖/檔」時，樣板會加 --nophoto：
   整層改貼齊 Hero 本身（第一螢幕），花瓣才不會落在一片空的第二螢幕上。
   上傳之後這條就自動失效，回到設計稿的第二螢幕版位。 */
.ya-hero__side--nophoto {
	top: 0;
	height: 100vh;
}

.ya-hero__petal {
	position: absolute;
	top: 0;
	display: block;
	border-radius: 60% 0 60% 0;
	box-shadow: 0 1px 3px rgba(120, 80, 90, .25);
	opacity: 0;
	animation-name: yaSakuraFall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes yaSakuraFall {
	0%   { transform: translate3d(0, -8vh, 0)      rotate(0deg);   opacity: 0; }
	12%  { opacity: .85; }
	45%  { transform: translate3d(-46px, 42vh, 0)  rotate(200deg); }
	72%  { transform: translate3d(28px, 72vh, 0)   rotate(300deg); opacity: .7; }
	100% { transform: translate3d(-14px, 104vh, 0) rotate(420deg); opacity: 0; }
}

/* 22 片的位置／大小／顏色／週期／延遲（設計稿第 897–907 行的 sin 雜湊算出的固定值）。
   ⚠ 用 nth-of-type 不用 nth-child —— 右側照片沒上傳時 <img> 不輸出，
     nth-child 會整組偏一位。 */
.ya-hero__petal:nth-of-type(1)  { left: 54.3%; width: 14.0px; height: 14.0px; background: rgba(228,182,190,.85); animation-duration: 12.9s; animation-delay: -3.3s;  }
.ya-hero__petal:nth-of-type(2)  { left: 27.2%; width: 15.5px; height: 15.5px; background: rgba(228,182,190,.85); animation-duration: 12.3s; animation-delay: -2.3s;  }
.ya-hero__petal:nth-of-type(3)  { left: 66.4%; width: 10.9px; height: 10.9px; background: rgba(240,214,206,.8);  animation-duration: 19.0s; animation-delay: -14.2s; }
.ya-hero__petal:nth-of-type(4)  { left: 68.6%; width: 7.7px;  height: 7.7px;  background: rgba(240,214,206,.8);  animation-duration: 14.4s; animation-delay: -6.0s;  }
.ya-hero__petal:nth-of-type(5)  { left: 67.5%; width: 14.3px; height: 14.3px; background: rgba(228,182,190,.85); animation-duration: 19.3s; animation-delay: -14.7s; }
.ya-hero__petal:nth-of-type(6)  { left: 59.5%; width: 8.5px;  height: 8.5px;  background: rgba(240,214,206,.8);  animation-duration: 17.8s; animation-delay: -12.1s; }
.ya-hero__petal:nth-of-type(7)  { left: 41.6%; width: 14.7px; height: 14.7px; background: rgba(228,182,190,.85); animation-duration: 11.6s; animation-delay: -1.0s;  }
.ya-hero__petal:nth-of-type(8)  { left: 79.6%; width: 14.7px; height: 14.7px; background: rgba(228,182,190,.85); animation-duration: 19.0s; animation-delay: -14.3s; }
.ya-hero__petal:nth-of-type(9)  { left: 46.4%; width: 8.7px;  height: 8.7px;  background: rgba(240,214,206,.8);  animation-duration: 16.0s; animation-delay: -9.0s;  }
.ya-hero__petal:nth-of-type(10) { left: 54.1%; width: 8.7px;  height: 8.7px;  background: rgba(240,214,206,.8);  animation-duration: 17.5s; animation-delay: -11.5s; }
.ya-hero__petal:nth-of-type(11) { left: 5.7%;  width: 12.6px; height: 12.6px; background: rgba(228,182,190,.85); animation-duration: 11.7s; animation-delay: -1.2s;  }
.ya-hero__petal:nth-of-type(12) { left: 40.8%; width: 8.6px;  height: 8.6px;  background: rgba(240,214,206,.8);  animation-duration: 15.6s; animation-delay: -8.2s;  }
.ya-hero__petal:nth-of-type(13) { left: 62.6%; width: 7.3px;  height: 7.3px;  background: rgba(240,214,206,.8);  animation-duration: 13.5s; animation-delay: -4.4s;  }
.ya-hero__petal:nth-of-type(14) { left: 8.3%;  width: 7.5px;  height: 7.5px;  background: rgba(240,214,206,.8);  animation-duration: 16.1s; animation-delay: -9.0s;  }
.ya-hero__petal:nth-of-type(15) { left: 48.9%; width: 8.6px;  height: 8.6px;  background: rgba(240,214,206,.8);  animation-duration: 17.2s; animation-delay: -11.0s; }
.ya-hero__petal:nth-of-type(16) { left: 32.3%; width: 14.3px; height: 14.3px; background: rgba(228,182,190,.85); animation-duration: 13.3s; animation-delay: -4.0s;  }
.ya-hero__petal:nth-of-type(17) { left: 66.8%; width: 15.7px; height: 15.7px; background: rgba(228,182,190,.85); animation-duration: 15.5s; animation-delay: -8.0s;  }
.ya-hero__petal:nth-of-type(18) { left: 20.3%; width: 14.2px; height: 14.2px; background: rgba(228,182,190,.85); animation-duration: 13.8s; animation-delay: -4.9s;  }
.ya-hero__petal:nth-of-type(19) { left: 28.7%; width: 7.2px;  height: 7.2px;  background: rgba(240,214,206,.8);  animation-duration: 12.3s; animation-delay: -2.2s;  }
.ya-hero__petal:nth-of-type(20) { left: 48.3%; width: 15.6px; height: 15.6px; background: rgba(228,182,190,.85); animation-duration: 17.9s; animation-delay: -12.2s; }
.ya-hero__petal:nth-of-type(21) { left: 44.3%; width: 15.8px; height: 15.8px; background: rgba(228,182,190,.85); animation-duration: 18.5s; animation-delay: -13.4s; }
.ya-hero__petal:nth-of-type(22) { left: 82.9%; width: 11.8px; height: 11.8px; background: rgba(228,182,190,.85); animation-duration: 15.6s; animation-delay: -8.1s;  }

/* ── 定住的文案層 ─────────────────────────────────────────────
   pointer-events 的接力：整個定住框設 none（不擋住底下背景層的滑鼠），
   實際有內容的 .ya-hero__copies 再設回 auto，CTA 才點得到。 */
.ya-hero__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 5;
	display: flex;
	align-items: center;
	pointer-events: none;
}
.ya-hero__copies {
	position: relative;
	display: grid;
	width: 100%;
	max-width: 1100px;
	padding: clamp(4.5rem, 9vh, 7rem) clamp(1.5rem, 8vw, 7rem) clamp(5rem, 9vh, 7rem);
	pointer-events: auto;
}
/* 每份文案疊在同一格，靠 opacity 切換；格子高度＝最高的那一份 */
.ya-hero__copy {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s var(--ya-ease), visibility 0s linear 1s;
}
.ya-hero__copy.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s var(--ya-ease), visibility 0s;
}

.ya-hero__eyebrow {
	margin: 0 0 clamp(.5rem, 2vh, 1.5rem);
	font-size: clamp(.85rem, 1.4vw, 1.5rem);
	letter-spacing: .4em;
	color: var(--ya-ac-soft);
}
.ya-hero__title {
	margin: 0 0 clamp(.6rem, 2.5vh, 1.5rem);
	font-family: var(--ya-serif);
	font-size: clamp(2.6rem, min(11vw, 17vh), 10rem);
	font-weight: 900;
	line-height: .92;
	letter-spacing: .02em;
	color: #fff;
}
.ya-hero__title .ya-accent { color: var(--ya-ac-soft); }
.ya-hero__sub {
	margin: 0;
	max-width: 440px;
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	letter-spacing: .05em;
	color: rgba(255, 255, 255, .9);
	text-wrap: pretty;
}

/* ── 逐像素翻色（設計稿 grad()，第 839–845 行）──────────────────
   公式：split = 視窗高 − 捲動距離；off = split − 元素自身的 top。
   off 以上維持亮色、以下轉深色，分界線就是背景圖的底緣。
   js/home.js 每幀只寫 --ya-hg 一個值，漸層由這裡畫。

   ⚠ .is-flip 是 JS 量完尺寸才加的（且只在桌機加）。沒有 JS、或行動版，
     就不會有這一段，文字維持上面各自的 color —— 不會變透明消失。 */
.ya-hero__eyebrow          { --ya-hg-light: var(--ya-ac-soft);    --ya-hg-dark: var(--ya-ocean); }
.ya-hero__title            { --ya-hg-light: #fff;                 --ya-hg-dark: var(--ya-ink); }
.ya-hero__title .ya-accent { --ya-hg-light: var(--ya-ac-soft);    --ya-hg-dark: var(--ya-ac); }
.ya-hero__sub              { --ya-hg-light: rgba(255,255,255,.9); --ya-hg-dark: var(--ya-body); }

.ya-hero.is-flip [data-hg="eyebrow"],
.ya-hero.is-flip [data-hg="title"],
.ya-hero.is-flip [data-hg="accent"],
.ya-hero.is-flip [data-hg="sub"] {
	background-image: linear-gradient(to bottom,
		var(--ya-hg-light) var(--ya-hg, 100vh),
		var(--ya-hg-dark)  var(--ya-hg, 100vh));
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ── CTA（設計稿第 210–216 行）────────────────────────────────
   文字 ＋ 會伸長的線 ＋ 圓框內填色圓盤 ＋ 箭頭。
   設計稿的 CTA **不走漸層**，是整塊換色（heroDark ? ink : #fff）。

   註：`.ya-hero .ya-hero__cta` 這個兩層寫法是 2026-08-31 為了壓過
     `body.ya-body a` 而加的。同日已把那條基底規則改成 `:where(body.ya-body) a`，
     特異性歸零，這裡其實一層就夠了 —— 保留兩層當作額外保險，不必改回去。
     設計稿的 CTA hover **不換文字顏色**，所以下面明確寫回去。 */
.ya-hero .ya-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	margin-top: clamp(1.1rem, 3.5vh, 2.5rem);
	font-size: .82rem;
	letter-spacing: .24em;
	color: #fff;
	transition: color .5s var(--ya-ease);
}
.ya-hero__cta-txt {
	font-family: var(--ya-serif);
	font-weight: 500;
	font-size: .92rem;
	letter-spacing: .22em;
}
.ya-hero__cta-line {
	display: block;
	height: 1px;
	width: clamp(24px, 3.5vw, 48px);
	background: var(--ya-ac-soft);
	transition: width .6s var(--ya-ease), background .5s var(--ya-ease);
}
.ya-hero__cta-orb {
	position: relative;
	flex: 0 0 auto;
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--ya-ac-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: border-color .5s var(--ya-ease);
}
.ya-hero__cta-disc {
	position: absolute;
	inset: -1.5px;
	border-radius: 50%;
	background: var(--ya-ac-soft);
	transform: scale(0);
	transition: transform .55s var(--ya-ease), background .5s var(--ya-ease);
}
.ya-hero__cta .ya-arrow {
	position: relative;
	width: .5rem; height: .42rem;
	background: var(--ya-ac-soft);
	transition: transform .5s var(--ya-ease), background .5s var(--ya-ease);
}
.ya-hero__cta:hover .ya-hero__cta-line,
.ya-hero__cta:focus-visible .ya-hero__cta-line { width: clamp(46px, 6vw, 86px); }
.ya-hero__cta:hover .ya-hero__cta-disc,
.ya-hero__cta:focus-visible .ya-hero__cta-disc { transform: scale(1); }
.ya-hero__cta:hover .ya-arrow,
.ya-hero__cta:focus-visible .ya-arrow { transform: translateX(3px); background: var(--ya-deep); }

/* ── 捲動前後換色（設計稿 heroAccent，第 899 行）────────────────
   heroAccent = heroDark ? ac : acSoft
   線條、圓框、填色圓盤三者都吃它：
     未捲動（深色照片上）→ acSoft #E6C0B2 淺玫瑰，在照片上看起來接近白
     翻深色（白底上）    → ac     #BE8574 深玫瑰
   ⚠ 箭頭**不**跟著換：設計稿 ctaArrowColor 沒 hover 時一律 acSoft，
     只有 hover 才分深淺（未捲動 deep、翻深色後 #fff）。下面已經寫了。 */
.ya-hero.is-dark .ya-hero__cta-line,
.ya-hero.is-dark .ya-hero__cta-disc { background: var(--ya-ac); }
.ya-hero.is-dark .ya-hero__cta-orb  { border-color: var(--ya-ac); }

/* hover 不換文字顏色（設計稿的 CTA 只動線條、圓盤與箭頭）。
   這兩條是專門用來壓過 css/style.css:126 的 body.ya-body a:hover。 */
.ya-hero .ya-hero__cta:hover,
.ya-hero .ya-hero__cta:focus-visible { color: #fff; }

/* 文字已翻深色時：CTA 整塊轉墨色，圓盤上的箭頭改用白色才看得見 */
.ya-hero.is-dark .ya-hero__cta,
.ya-hero.is-dark .ya-hero__cta:hover,
.ya-hero.is-dark .ya-hero__cta:focus-visible { color: var(--ya-ink); }
.ya-hero.is-dark .ya-hero__cta:hover .ya-arrow,
.ya-hero.is-dark .ya-hero__cta:focus-visible .ya-arrow { background: #fff; }

/* ── 計數器與指示點（設計稿第 227–240 行）────────────────────
   位置以「第一螢幕的底部」為基準，所以是 calc(100vh − …)，不是 bottom。 */
.ya-hero__nav {
	position: absolute;
	top: calc(100vh - 5.4rem);
	left: clamp(1.5rem, 8vw, 7rem);
	z-index: 6;
	display: flex;
	align-items: flex-end;
	gap: clamp(1.2rem, 2.5vw, 2.2rem);
	transition: opacity .5s;
}
.ya-hero__count {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	font-family: var(--ya-en);
	font-style: italic;
	line-height: .78;
	color: #fff;
}
.ya-hero__num { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.ya-hero__max { font-size: .95rem; opacity: .55; }

.ya-hero__dots {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 2vw, 1.6rem);
	padding-bottom: .5rem;
}
.ya-hero__dot {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: .5;
	transition: opacity .55s var(--ya-ease);
}
.ya-hero__dot-mark {
	display: block;
	height: 1px;
	width: clamp(14px, 1.6vw, 22px);
	background: rgba(255, 255, 255, .45);
	transition: width .55s var(--ya-ease), background .55s var(--ya-ease);
}
.ya-hero__dot-label {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: .8rem;
	letter-spacing: .22em;
	color: #fff;
	white-space: nowrap;
	transform: translateX(-2px);
	transition: transform .55s var(--ya-ease), background .5s var(--ya-ease);
}
.ya-hero__dot:hover { opacity: .8; }
.ya-hero__dot.is-on { opacity: 1; }
.ya-hero__dot.is-on .ya-hero__dot-mark { width: clamp(38px, 4vw, 58px); background: var(--ya-ac); }
.ya-hero__dot.is-on .ya-hero__dot-label { transform: none; }

/* ── 往下探訪 ─────────────────────────────────────────────────── */
.ya-hero__down {
	position: absolute;
	top: calc(100vh - 10.5rem);
	right: clamp(1.5rem, 6vw, 5rem);
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	transition: opacity .6s;
}
.ya-hero__down-txt {
	writing-mode: vertical-rl;
	font-family: var(--ya-serif);
	font-size: .72rem;
	letter-spacing: .55em;
	color: rgba(255, 255, 255, .72);
}
.ya-hero__down-line {
	position: relative;
	display: block;
	width: 1px;
	height: clamp(56px, 9vh, 88px);
	background: rgba(255, 255, 255, .22);
	overflow: hidden;
}
.ya-hero__down-line::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ya-ac-soft);
	animation: yaInkTrail 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes yaInkTrail {
	0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
	18%  { opacity: 1; }
	70%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
	100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* 文字翻深色之後，這兩組白色的裝飾要退場（設計稿 heroChromeOpacity）*/
.ya-hero.is-dark .ya-hero__nav,
.ya-hero.is-dark .ya-hero__down { opacity: 0; pointer-events: none; }

/* ── 減少動態 ─────────────────────────────────────────────────
   碎裂與花瓣是純裝飾，關掉；輪播與翻色保留（那是內容不是動效）。 */
@media (prefers-reduced-motion: reduce) {
	.ya-hero__shard { animation: none; }
	.ya-hero__petal { animation: none; opacity: 0; }
	.ya-hero__photo { transition: none; transform: none; }
	.ya-hero__down-line::after { animation: none; opacity: 1; }
}


/* =========================================================================
   3. 房型介紹 .ya-rooms  —  nc_vision tmpl_1
   ========================================================================= */
.ya-rooms {
	position: relative;
	overflow: hidden;
	background: var(--ya-white);
	padding: clamp(4rem, 8vw, 7rem) var(--ya-pad-x);
}
.ya-rooms__inner { position: relative; max-width: var(--ya-wrap-foot); margin: 0 auto; }

.ya-rooms__head {
	position: relative;
	margin: 0 0 clamp(3rem, 6vw, 5rem) clamp(0px, 10vw, 10rem);
}
.ya-rooms__head .ya-wm { top: -3rem; left: -3rem; }
.ya-rooms__eyebrow {
	position: relative;
	color: var(--ya-ac);
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	letter-spacing: .3em;
	margin-bottom: .6rem;
}
.ya-rooms__title {
	position: relative;
	font-family: var(--ya-serif);
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	font-weight: 900;
	letter-spacing: .02em;
	color: var(--ya-ink);
	margin: 0;
}
.ya-rooms__title .ya-accent { color: var(--ya-ocean); }

.ya-room {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
	margin-bottom: clamp(4rem, 9vw, 8rem);
}

/* 影像側 */
.ya-room__media { position: relative; height: clamp(320px, 46vw, 600px); }

/* ⚠⚠ 傾斜一定要跟 clip-path 掛在**同一個元素**上（設計稿第 304–306 行就是這樣寫）。
   `transform` 會連同 clip-path 一起轉，所以被裁出來的**多邊形本身**是斜的。
   若把 clip 放外框、rotate 放裡面的 <img>，會變成「不會轉的形狀裡有一張會轉的照片」
   —— 形狀完全不一樣。2026-08-31 踩過這個錯。 */
.ya-room__under {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* 設計稿 tiltUnder = tilt + translate(…)。translate 一定要在 rotate 之後，
	   位移才會沿著轉過的軸走。 */
	transform: var(--ya-room-tilt) translate(clamp(12px, 1.6vw, 26px), clamp(12px, 1.6vw, 26px));
}
.ya-room__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transform: var(--ya-room-tilt);
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ya-room__img {
	/* ⚠ height 一定要吃得到（style.css 的 img 基底規則已包 :where() 讓路），
	   否則會被打回 auto，照片不會填滿裁切框、底部露空。 */
	width: 100%; height: 100%;
	object-fit: cover;
	transition: filter .9s ease;
}

/* hover：照片框轉正並放大，底層色塊**維持傾斜不動**，錯位才會拉開（設計稿 imgT）
   ⚠ 傾斜角走 `--ya-room-tilt` 變數、不直接寫在 `:nth-child(...) .ya-room__frame`，
     就是為了讓這條 hover 規則壓得過。先前寫成
     `.ya-rooms__list > .ya-room:nth-child(3n+1) .ya-room__frame { transform: … }` (0,3,0)，
     比 `.ya-room:hover .ya-room__frame` (0,2,0) 高，**hover 根本套不上去**。 */
.ya-room:hover .ya-room__frame { transform: rotate(0deg) scale(1.1); }
.ya-room:hover .ya-room__img   { filter: saturate(1.1) brightness(1.03); }
.ya-room:hover .ya-shine { left: 130%; opacity: 1; }

/* 逐筆循環的裁切多邊形、傾斜角、底層色（設計稿第 848–850 行的 rooms[]）
   ⚠ 一定要透過 `.ya-rooms__list >` 這層容器來數。房型在樣板裡跟
     `.ya-rooms__head`／`.ya-rooms__foot` 是兄弟，直接寫 `.ya-room:nth-child()`
     會把 head 算成第 1 個，**整組偏一位** —— 第 1 間拿到第 2 間的形狀、
     色塊與左右排版。2026-08-31 踩過，樣板那層 div 不可以拿掉。
   ⚠ 這裡只給 `--ya-room-tilt` 與 clip-path／底色，**不要直接寫 transform**，
     理由見上面 hover 那段。 */
.ya-rooms__list > .ya-room:nth-child(3n+1) { --ya-room-tilt: rotate(-2.5deg) scale(1.05); }
.ya-rooms__list > .ya-room:nth-child(3n+1) .ya-room__under,
.ya-rooms__list > .ya-room:nth-child(3n+1) .ya-room__frame { clip-path: polygon(6% 0, 100% 5%, 94% 92%, 0 100%); }
.ya-rooms__list > .ya-room:nth-child(3n+1) .ya-room__under { background: rgba(192, 133, 82, .18); }

.ya-rooms__list > .ya-room:nth-child(3n+2) { --ya-room-tilt: rotate(3deg) scale(1.05); }
.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__under,
.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__frame { clip-path: polygon(0 7%, 95% 0, 100% 90%, 5% 100%); }
.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__under { background: rgba(140, 106, 74, .16); }

.ya-rooms__list > .ya-room:nth-child(3n) { --ya-room-tilt: rotate(-2deg) scale(1.05); }
.ya-rooms__list > .ya-room:nth-child(3n) .ya-room__under,
.ya-rooms__list > .ya-room:nth-child(3n) .ya-room__frame { clip-path: polygon(3% 3%, 100% 0, 90% 95%, 0 88%); }
.ya-rooms__list > .ya-room:nth-child(3n) .ya-room__under { background: rgba(94, 70, 50, .14); }

/* 第 2、5、8… 筆左右對調（設計稿的 dir:rtl）。
   用 order 換位，不用 direction，免得影響文字的標點與換行。 */
.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__media { order: 2; }
.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__body  { order: 1; }

/* 文字側 */
.ya-room__body { position: relative; z-index: 2; }
.ya-room__no {
	position: absolute;
	top: -3.5rem; left: -1.5rem;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: clamp(7rem, 15vw, 14rem);
	line-height: .8;
	letter-spacing: -.03em;
	color: var(--ya-mist);
	opacity: .75;
	z-index: -1;
	pointer-events: none;
	user-select: none;
}
.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__no { left: auto; right: -1.5rem; }

.ya-room__en {
	position: relative;
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: 1.25rem;
	letter-spacing: .12em;
	color: var(--ya-ac);
}
.ya-room__name {
	position: relative;
	font-family: var(--ya-serif);
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ya-ink);
	margin: .4rem 0 1rem;
}
/* 標題掃色（設計稿第 756–761、1022–1023 行）—— 與最新消息主打卡同一套手法。
   設計稿是三段式：進場 `inset(0 0 0 0)` 從左長出來、離場 `inset(0 0 0 100%)`
   **繼續往右收**、1 秒後 `transition:none` 瞬間重設。
   純 CSS 只有兩個狀態做不出「離場再重設」，所以改用**遮罩錨點瞬移**：
   只讓 mask-size 過場、mask-position 不過場，進場與離場都是左→右。
   ⚠ 不要改回 clip-path —— clip-path 沒有錨點可以瞬移，離場一定倒退回左邊。 */
.ya-room__name-fill {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	color: var(--ya-ac);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(#000, #000);
	        mask-image: linear-gradient(#000, #000);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	        mask-position: 100% 0;
	-webkit-mask-size: 0 100%;
	        mask-size: 0 100%;
	transition: -webkit-mask-size .95s cubic-bezier(.3, .7, .2, 1),
	                    mask-size .95s cubic-bezier(.3, .7, .2, 1);
}
.ya-room:hover .ya-room__name-fill {
	-webkit-mask-position: 0 0;
	        mask-position: 0 0;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
}

/* 「查看詳情」：設計稿的 linkLs／linkC／linkBs／linkBp／linkArrow 都是掛在
   **整個房型項目**的 roomEnter／roomLeave 上（第 1016–1021 行），
   不是連結自己的 hover —— 滑到照片或標題，這個連結也要一起動。
   數值沿用 .ya-link 的通用值（色 ocean→ac、字距 .12em→.24em、底線由左掃出），
   與設計稿相同，所以這裡只補「由項目驅動」這件事。 */
.ya-room:hover .ya-room__link {
	color: var(--ya-ac);
	letter-spacing: .24em;
	background-position: 0 100%;
	background-size: 100% 1px;
}
.ya-room:hover .ya-room__link .ya-arrow { transform: translateX(5px); }

.ya-room__desc {
	margin: 1.2rem 0;
	max-width: 44ch;
	color: var(--ya-body);
	text-wrap: pretty;
}
.ya-room__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 1.5rem 0;
	font-size: .9rem;
	color: var(--ya-ocean);
}
.ya-room__stat { white-space: nowrap; flex-shrink: 0; }
.ya-room__stat b {
	font-family: var(--ya-serif);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ya-ink);
}
.ya-room__stat--feat { font-family: var(--ya-serif); font-size: 1.05rem; color: var(--ya-ink); }

.ya-rooms__foot { display: flex; justify-content: flex-end; margin-top: clamp(1rem, 3vw, 2.5rem); }
.ya-rooms__all { font-family: var(--ya-serif); font-size: 1rem; letter-spacing: .2em; }


/* =========================================================================
   4. 品牌故事 .ya-story  —  nc_vision tmpl_2
   ⚠ 上下負 margin 讓它與相鄰區段相疊，斜切邊才咬得住。
   ========================================================================= */
.ya-story {
	position: relative;
	overflow: hidden;
	background: var(--ya-deep);
	color: #fff;
	clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
	margin: clamp(-4rem, -5vw, -3rem) 0;
	padding: clamp(8rem, 14vw, 12rem) var(--ya-pad-x);
}
.ya-story .ya-ink--a {
	top: -150px; right: -100px;
	width: min(52vw, 560px); height: min(52vw, 560px);
	background: radial-gradient(circle at 45% 45%, var(--ya-ac) 0%, transparent 70%);
	filter: blur(60px);
	opacity: .28;
	animation-duration: 26s;
}
.ya-story .ya-ink--b {
	bottom: -200px; left: -150px;
	width: min(60vw, 640px); height: min(60vw, 640px);
	background: radial-gradient(circle at 55% 50%, #fff 0%, transparent 68%);
	filter: blur(70px);
	opacity: .1;
	animation-duration: 32s;
	animation-direction: reverse;
}

.ya-story__bg {
	position: absolute;
	top: 0; right: 0;
	width: 48%; height: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}
.ya-story__photo {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .42;
	-webkit-mask-image: radial-gradient(ellipse 70% 58% at 72% 50%, #000 20%, rgba(0,0,0,.55) 58%, transparent 88%);
	        mask-image: radial-gradient(ellipse 70% 58% at 72% 50%, #000 20%, rgba(0,0,0,.55) 58%, transparent 88%);
}
.ya-story__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--ya-deep) 0%, rgba(18, 48, 63, .55) 28%, transparent 62%);
}
.ya-story .ya-ripple--1 { top: 32%; left: 62%; width: clamp(160px,20vw,300px); height: clamp(160px,20vw,300px); margin: calc(clamp(160px,20vw,300px) / -2) 0 0 calc(clamp(160px,20vw,300px) / -2); animation-duration: 7.5s; animation-delay: 0s; }
.ya-story .ya-ripple--2 { top: 52%; left: 78%; width: clamp(120px,15vw,230px); height: clamp(120px,15vw,230px); margin: calc(clamp(120px,15vw,230px) / -2) 0 0 calc(clamp(120px,15vw,230px) / -2); animation-duration: 8.5s; animation-delay: 1.8s; }
.ya-story .ya-ripple--3 { top: 68%; left: 58%; width: clamp(200px,24vw,360px); height: clamp(200px,24vw,360px); margin: calc(clamp(200px,24vw,360px) / -2) 0 0 calc(clamp(200px,24vw,360px) / -2); animation-duration: 9.5s; animation-delay: 3.4s; }
.ya-story .ya-ripple--4 { top: 22%; left: 84%; width: clamp(100px,12vw,180px); height: clamp(100px,12vw,180px); margin: calc(clamp(100px,12vw,180px) / -2) 0 0 calc(clamp(100px,12vw,180px) / -2); animation-duration: 7s;   animation-delay: 5s; }
.ya-story .ya-ripple--5 { top: 46%; left: 66%; width: clamp(240px,30vw,440px); height: clamp(240px,30vw,440px); margin: calc(clamp(240px,30vw,440px) / -2) 0 0 calc(clamp(240px,30vw,440px) / -2); animation-duration: 11s;  animation-delay: 2.6s; }

.ya-story__wm {
	top: 12%; right: 2%;
	font-size: clamp(4rem, 15vw, 16rem);
	color: rgba(255, 255, 255, .06);
	z-index: 1;
}

.ya-story__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin-left: clamp(0px, 8vw, 10rem);
}
.ya-story__eyebrow {
	color: var(--ya-ac-soft);
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	letter-spacing: .3em;
	margin-bottom: .6rem;
}
.ya-story__title {
	font-family: var(--ya-serif);
	font-size: clamp(2.2rem, 5.5vw, 5rem);
	line-height: 1.05;
	font-weight: 900;
	color: #fff;
	margin: 0 0 2rem;
}
.ya-story__title .ya-accent { color: var(--ya-ac-soft); }
.ya-story__p {
	color: rgba(255, 255, 255, .82);
	font-size: 1.12rem;
	margin: 0 0 1.5rem;
	text-wrap: pretty;
}
.ya-story__p:last-of-type { margin-bottom: 0; }
.ya-story__sign {
	font-family: var(--ya-en);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--ya-ac-soft);
	margin: 2rem 0 0;
}
.ya-story__link { margin-top: 2.4rem; font-family: var(--ya-serif); font-size: 1rem; letter-spacing: .2em; }


/* =========================================================================
   5. 服務設施 .ya-facil  —  nc_vision tmpl_3
   橫向 scroll-snap 輪播；頁碼與指示點由 js/home.js 第 1 節填入。
   ========================================================================= */
.ya-facil {
	position: relative;
	overflow: hidden;
	background: var(--ya-white);
	padding: clamp(6rem, 11vw, 10rem) var(--ya-pad-x);
}
.ya-facil__inner { position: relative; max-width: var(--ya-wrap-foot); margin: 0 auto; }

.ya-facil__head {
	position: relative;
	z-index: 5;
	max-width: 560px;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ya-facil__head .ya-wm { top: -4.5rem; left: -2rem; font-size: clamp(4rem, 13vw, 14rem); }
.ya-facil__eyebrow {
	position: relative;
	color: var(--ya-ac);
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	letter-spacing: .3em;
	margin-bottom: .6rem;
}
.ya-facil__title {
	position: relative;
	font-family: var(--ya-serif);
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	font-weight: 900;
	color: var(--ya-ink);
	margin: 0;
}
.ya-facil__title .ya-accent { color: var(--ya-ocean); }
.ya-facil__lead { position: relative; margin: 1rem 0 0; color: var(--ya-body); }

.ya-facil__stage { position: relative; }

.ya-facil__rail {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* ⚠ 必須配 scroll-padding-left，否則 `scroll-snap-align: start` 會把卡片的左緣
	   對齊到捲動區的**起點（0）**，等於把上面那 16px 內距捲掉，白加。
	   設了之後 snap 的基準線內移 16px，第 1 張停在 16、第 2 頁的第 3 張也停在 16。 */
	scroll-padding-left: 16px;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* 左邊留 16px：第 1 張卡有 rotate(-2.5deg)，旋轉後左上角會突出約 11px，
	   不留這段會被 overflow-x 裁掉一小角。設計稿沒有這段（它的第 1 張本來就
	   靠 margin-left:-6% 往左破格），本站已把那個負邊距歸零，見下方卡片的說明。
	   ⚠ 加了之後 rail 的內容寬變成 1264（1920 螢幕），卡片寬跟著變 602，
	     第 3 張起點 1385.1 仍在可視寬 1280 之外，不會重新露出來。 */
	padding: clamp(1rem, 2vw, 2rem) 0 clamp(3rem, 5vw, 4.5rem) 16px;
}
.ya-facil__rail::-webkit-scrollbar { display: none; }

.ya-facil__card {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: calc((100% - 2rem) / 2 - 14px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .25rem;
	padding: 0 clamp(1.8rem, 3vw, 3rem) clamp(2.4rem, 4.5vw, 3.6rem) clamp(2rem, 3.2vw, 3.2rem);
	color: #fff;
	/* 傾斜角走變數，hover 那條 (0,2,0) 才壓得過。若把 rotate 直接寫在
	   `:nth-child(4n+1)` (0,2,0) 上，因為它排在後面會反過來吃掉 hover。 */
	transform: var(--ya-facil-tilt);
	transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.ya-facil__card:hover { transform: rotate(0deg) translateY(-8px); }

.ya-facil__under {
	position: absolute;
	inset: 0;
	transform: translate(clamp(10px, 1.3vw, 20px), clamp(10px, 1.3vw, 20px));
	pointer-events: none;
}
.ya-facil__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* 設計稿字面值（第 372 行），不是 --ya-sh-2 —— 見下方「底色塊」的說明 */
	box-shadow: 0 30px 80px -30px rgba(58, 46, 35, .4);
}
.ya-facil__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ya-ease);
}
.ya-facil__card:hover .ya-facil__img { transform: scale(1.05); }
.ya-facil__card:hover .ya-shine { left: 112%; opacity: 1; }
.ya-facil__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 35%, rgba(18, 48, 63, .78));
}

/* ⚠ 第 1 張的 `margin-left: -6%` 與第 2 張的 `margin-right: -5%` 是設計稿的值，
   但本站**刻意改成 0**（使用者 2026-08-31 裁示），原因是那兩個負邊距會造成：
     ① 第 1 張起點落在 −76.8px（1920 螢幕），而它的左內距只有 51.2px ——
        `overflow-x:auto` 的捲動區不會延伸到負座標，**文字左緣被永久裁掉約 26px**；
     ② 兩張負邊距累計把後面整串往左拉，第 3 張起點落在 1245.6 < 可視寬 1280，
        **第一頁會露出第 3 張約 34px**。
   改成 0 之後：第 1 張 0→610、第 2 張 642→1252（可視 1280 內），
   第 3 張起點 1386.4 已在視窗外。垂直錯落與旋轉都保留，散置感不受影響。
   ⚠ 第 3 張的 `margin-left: 8%` 與第 4 張的 `margin-right: 6%` 維持設計稿原值。 */
/* 逐筆循環的高度、位移、傾斜、裁切（設計稿原本逐筆寫死）*/
.ya-facil__card:nth-child(4n+1) { height: clamp(320px, 40vw, 520px); margin: 0; --ya-facil-tilt: rotate(-2.5deg); }
.ya-facil__card:nth-child(4n+1) .ya-facil__under,
.ya-facil__card:nth-child(4n+1) .ya-facil__frame { clip-path: polygon(6% 0, 100% 4%, 97% 96%, 1% 96%); }
.ya-facil__card:nth-child(4n+1) .ya-facil__under { background: rgba(192, 133, 82, .2); }

.ya-facil__card:nth-child(4n+2) { height: clamp(280px, 32vw, 420px); margin: clamp(60px, 9vw, 130px) 0 0 0; --ya-facil-tilt: rotate(3deg); }
.ya-facil__card:nth-child(4n+2) .ya-facil__under,
.ya-facil__card:nth-child(4n+2) .ya-facil__frame { clip-path: polygon(0 5%, 96% 0, 98% 96%, 2% 96%); }
.ya-facil__card:nth-child(4n+2) .ya-facil__under { background: rgba(140, 106, 74, .17); }

.ya-facil__card:nth-child(4n+3) { height: clamp(300px, 34vw, 460px); margin: -2rem 0 0 8%; --ya-facil-tilt: rotate(-1.5deg); }
.ya-facil__card:nth-child(4n+3) .ya-facil__under,
.ya-facil__card:nth-child(4n+3) .ya-facil__frame { clip-path: polygon(4% 2%, 100% 0, 97% 95%, 1% 95%); }
.ya-facil__card:nth-child(4n+3) .ya-facil__under { background: rgba(94, 70, 50, .15); }

.ya-facil__card:nth-child(4n) { height: clamp(240px, 28vw, 380px); margin: 0 6% 0 0; --ya-facil-tilt: rotate(2.5deg); }
.ya-facil__card:nth-child(4n) .ya-facil__under,
.ya-facil__card:nth-child(4n) .ya-facil__frame { clip-path: polygon(0 4%, 94% 0, 98% 96%, 2% 96%); }
.ya-facil__card:nth-child(4n) .ya-facil__under { background: rgba(224, 184, 138, .24); }

.ya-facil__en {
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .12em;
	color: var(--ya-ac-soft);
}
.ya-facil__name {
	position: relative;
	z-index: 2;
	font-family: var(--ya-serif);
	font-size: clamp(1.2rem, 2vw, 1.7rem);
	font-weight: 700;
	color: #fff;
	margin: 0;
}
/* 價格。**服務設施（nc_vision tmpl_3）用不到這一段** ——
   只有「最新商品」區塊（modules/wr/blocks/wr_block_new.html）借用本節版型時會輸出。
   ⚠ 2026-09-10 使用者裁示「加一行價格」，這是對原設計的**增加**，不是原本就有的。
   ⚠ 數字用英文數字體 var(--ya-en)（Cormorant），與商品卡 .ya-wr-card__now
     和購物車一致；卡片底是深色，所以顏色不能沿用 wr.css 的 var(--ya-ink)。 */
.ya-facil__price {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: .5rem;
	flex-wrap: wrap;
	margin: .35rem 0 0;
}
.ya-facil__now {
	font-family: var(--ya-en);
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	letter-spacing: .04em;
	color: #fff;
	white-space: nowrap;
}
/* 原價（有折扣時才輸出）。刪除線 + 降低對比，不與售價搶焦點。 */
.ya-facil__orig {
	font-family: var(--ya-en);
	font-size: .85rem;
	color: rgba(255, 255, 255, .58);
	white-space: nowrap;
}

.ya-facil__more {
	position: relative;
	z-index: 2;
	margin-top: .7rem;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .78rem;
	letter-spacing: .22em;
	color: var(--ya-ac-soft);
	opacity: .7;
	transition: gap .55s var(--ya-ease), letter-spacing .55s var(--ya-ease),
	            opacity .55s, transform .55s var(--ya-ease);
}
.ya-facil__more-txt {
	padding-bottom: .25rem;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 1px;
	transition: background-size .6s cubic-bezier(.35, .05, .2, 1);
}
.ya-facil__card:hover .ya-facil__more {
	gap: 1rem;
	letter-spacing: .3em;
	opacity: 1;
	transform: translateY(-2px);
}
.ya-facil__card:hover .ya-facil__more-txt { background-position: 0 100%; background-size: 100% 1px; }
.ya-facil__card:hover .ya-facil__more .ya-arrow { transform: translateX(4px); }

/* 控制列 */
.ya-facil__nav {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	gap: clamp(1.2rem, 3vw, 2.4rem);
	margin-top: clamp(-1.5rem, -1.5vw, 0rem);
}
.ya-facil__count {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	font-family: var(--ya-en);
	font-style: italic;
	line-height: .8;
}
.ya-facil__num { font-size: clamp(2.6rem, 5vw, 4rem); color: var(--ya-ocean); }
.ya-facil__total { font-size: 1.1rem; color: var(--ya-muted); }
.ya-facil__dots { display: flex; align-items: center; gap: .5rem; padding-bottom: .7rem; }
.ya-facil__dot {
	width: 1.1rem; height: .42rem;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--ya-mist);
	transform: skewX(-22deg);
	transition: background .6s var(--ya-ease), width .6s var(--ya-ease);
}
.ya-facil__dot:hover { background: var(--ya-ac); }
.ya-facil__dot.is-on { width: 2.2rem; background: var(--ya-ocean); }
.ya-facil__spacer { flex: 1; }
.ya-facil__btns { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.4rem); }

.ya-facil__btn {
	position: relative;
	width: clamp(3rem, 5vw, 3.8rem);
	height: clamp(3rem, 5vw, 3.8rem);
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--ya-ocean);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .5s var(--ya-ease), transform .5s var(--ya-ease);
}
.ya-facil__btn-bg  { position: absolute; inset: 0; background: var(--ya-mist); transition: .5s; }
.ya-facil__btn-bg2 { position: absolute; inset: 0; background: var(--ya-ocean); opacity: 0; transition: .5s var(--ya-ease); }
.ya-facil__btn-ico { position: relative; display: block; width: .52rem; height: .44rem; background: currentColor; transition: transform .5s; }

.ya-facil__btn--prev .ya-facil__btn-bg,
.ya-facil__btn--prev .ya-facil__btn-bg2 { clip-path: polygon(6% 0, 100% 5%, 94% 96%, 0 100%); }
.ya-facil__btn--prev .ya-facil__btn-bg2 { transform: translate(6px, 6px); }
.ya-facil__btn--prev .ya-facil__btn-ico { clip-path: polygon(100% 0, 0 50%, 100% 100%, 78% 50%); }
.ya-facil__btn--prev:hover { color: #fff; transform: rotate(-6deg); }
.ya-facil__btn--prev:hover .ya-facil__btn-ico { transform: translateX(-4px); }

.ya-facil__btn--next .ya-facil__btn-bg,
.ya-facil__btn--next .ya-facil__btn-bg2 { clip-path: polygon(0 5%, 94% 0, 100% 100%, 6% 96%); }
.ya-facil__btn--next .ya-facil__btn-bg2 { transform: translate(-6px, 6px); }
.ya-facil__btn--next .ya-facil__btn-ico { clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); }
.ya-facil__btn--next:hover { color: #fff; transform: rotate(6deg); }
.ya-facil__btn--next:hover .ya-facil__btn-ico { transform: translateX(4px); }

.ya-facil__btn:hover .ya-facil__btn-bg2 { opacity: 1; transform: none; }
.ya-facil__btn[disabled] { opacity: .35; pointer-events: none; }


/* =========================================================================
   6. 限時禮遇 .ya-offer  —  nc_vision tmpl_4
   ========================================================================= */
.ya-offer {
	position: relative;
	overflow: hidden;
	background: var(--ya-ocean);
	color: #fff;
	clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
	margin: clamp(-3rem, -4vw, -2rem) 0;
	padding: clamp(7rem, 12vw, 10rem) var(--ya-pad-x);
}
.ya-offer .ya-ink--a {
	top: -15%; right: -12%;
	width: min(58vw, 640px); height: min(58vw, 640px);
	background: radial-gradient(circle at 45% 45%, var(--ya-ac) 0%, transparent 70%);
	filter: blur(60px);
	opacity: .4;
	animation-duration: 24s;
}
.ya-offer .ya-ink--b {
	bottom: -30%; left: -8%;
	width: min(40vw, 440px); height: min(40vw, 440px);
	background: radial-gradient(circle, #fff 0%, transparent 70%);
	filter: blur(60px);
	opacity: .09;
	animation: none;
}
.ya-offer__bg {
	position: absolute;
	top: 0; right: 0;
	width: 46%; height: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}
.ya-offer__photo {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .34;
	-webkit-mask-image: radial-gradient(ellipse 68% 60% at 74% 48%, #000 18%, rgba(0,0,0,.5) 56%, transparent 86%);
	        mask-image: radial-gradient(ellipse 68% 60% at 74% 48%, #000 18%, rgba(0,0,0,.5) 56%, transparent 86%);
}
.ya-offer__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--ya-ocean) 0%, rgba(31, 78, 107, .55) 26%, transparent 62%);
}
.ya-offer .ya-ripple { border-color: rgba(255, 255, 255, .3); }
.ya-offer .ya-ripple--1 { top: 40%; left: 66%; width: clamp(150px,19vw,280px); height: clamp(150px,19vw,280px); margin: calc(clamp(150px,19vw,280px) / -2) 0 0 calc(clamp(150px,19vw,280px) / -2); animation-duration: 8s; animation-delay: .6s; }
.ya-offer .ya-ripple--2 { top: 62%; left: 82%; width: clamp(110px,14vw,210px); height: clamp(110px,14vw,210px); margin: calc(clamp(110px,14vw,210px) / -2) 0 0 calc(clamp(110px,14vw,210px) / -2); animation-duration: 9s; animation-delay: 2.4s; }
.ya-offer .ya-ripple--3 { top: 26%; left: 86%; width: clamp(90px,11vw,170px);  height: clamp(90px,11vw,170px);  margin: calc(clamp(90px,11vw,170px) / -2) 0 0 calc(clamp(90px,11vw,170px) / -2);  animation-duration: 7s; animation-delay: 4s; }

.ya-offer__inner { position: relative; z-index: 2; max-width: var(--ya-wrap-foot); margin: 0 auto; }
.ya-offer__body { max-width: 640px; margin-left: clamp(0px, 6vw, 8rem); }
.ya-offer__eyebrow {
	color: var(--ya-ac-soft);
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	letter-spacing: .3em;
	margin-bottom: .6rem;
}
.ya-offer__title {
	font-family: var(--ya-serif);
	font-size: clamp(2.2rem, 7vw, 6rem);
	line-height: 1;
	font-weight: 900;
	letter-spacing: .02em;
	color: #fff;
	margin: 0;
}
.ya-offer__title .ya-accent { color: var(--ya-ac-soft); }
.ya-offer__desc {
	margin: 1.5rem 0 2.5rem;
	max-width: 46ch;
	color: rgba(255, 255, 255, .85);
	text-wrap: pretty;
}
.ya-offer__link { font-family: var(--ya-serif); font-size: 1rem; letter-spacing: .2em; }


/* =========================================================================
   7. 一日湯宿 .ya-day  —  nc_vision tmpl_5
   ⚠ 桌機是五欄；時段數不是 5 的倍數時最後一列不滿，這是設計稿本來的行為。
   ========================================================================= */
.ya-day {
	position: relative;
	overflow: hidden;
	background: var(--ya-white);
	padding: clamp(6rem, 11vw, 10rem) var(--ya-pad-x) clamp(7rem, 12vw, 11rem);
}
.ya-day .ya-ink--c {
	top: -6%; right: -12%;
	width: min(50vw, 600px); height: min(50vw, 600px);
	background: radial-gradient(circle at 50% 45%, var(--ya-ocean) 0%, transparent 68%);
	filter: blur(75px);
	opacity: .12;
	animation-duration: 28s;
}
.ya-day__inner { position: relative; max-width: var(--ya-wrap-foot); margin: 0 auto; }

.ya-day__head {
	position: relative;
	max-width: 620px;
	margin: 0 0 clamp(3.5rem, 7vw, 6rem) clamp(0px, 4vw, 5rem);
}
.ya-day__head .ya-wm { top: -4.2rem; left: -2.5rem; font-size: clamp(4rem, 13vw, 14rem); }
.ya-day__eyebrow {
	position: relative;
	color: var(--ya-ac);
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	letter-spacing: .3em;
	margin-bottom: .6rem;
}
.ya-day__title {
	position: relative;
	font-family: var(--ya-serif);
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	font-weight: 900;
	color: var(--ya-ink);
	margin: 0;
}
.ya-day__title .ya-accent { color: var(--ya-ocean); }
.ya-day__lead { position: relative; margin: 1.2rem 0 0; color: var(--ya-body); }

.ya-day__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(2.4rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.ya-day__step { position: relative; padding-top: 2.6rem; }
.ya-day__rule {
	position: absolute;
	top: 0; left: 0;
	height: 1px; width: 100%;
	background: linear-gradient(90deg, var(--ya-ocean) 0%, rgba(31, 78, 107, .12) 100%);
}
.ya-day__dot {
	position: absolute;
	top: -.5rem; left: 0;
	width: .62rem; height: .62rem;
	background: var(--ya-ac);
	transform: rotate(45deg) scale(1);
	transition: transform .6s var(--ya-ease);
}
.ya-day__step:hover .ya-day__dot { transform: rotate(45deg) scale(1.45); }

.ya-day__time {
	margin: 0;
	font-family: var(--ya-en);
	font-style: italic;
	font-size: clamp(2.1rem, 3.6vw, 3.2rem);
	line-height: .9;
	letter-spacing: .02em;
	color: var(--ya-ocean);
	opacity: .82;
	transition: opacity .5s;
}
.ya-day__step:hover .ya-day__time { opacity: 1; }
.ya-day__name {
	font-family: var(--ya-serif);
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ya-ink);
	margin: .85rem 0 .55rem;
}
.ya-day__desc {
	margin: 0;
	font-size: .88rem;
	line-height: 1.85;
	color: var(--ya-body);
	text-wrap: pretty;
}

.ya-day__media { position: relative; margin-top: 1.4rem; height: clamp(150px, 15vw, 210px); }
.ya-day__under {
	position: absolute;
	inset: 0;
	clip-path: polygon(4% 0, 100% 5%, 96% 100%, 0 95%);
}
.ya-day__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: polygon(0 4%, 96% 0, 100% 96%, 4% 100%);
	transform: translate(6px, 10px);
}
.ya-day__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.ya-day__step:hover .ya-day__img { transform: scale(1.06); }
.ya-day__step:hover .ya-shine { left: 130%; opacity: 1; }

/* 逐筆循環的上下位移、傾斜、底層色 */
.ya-day__step:nth-child(5n+1) { margin-top: 0; }
.ya-day__step:nth-child(5n+1) .ya-day__under { transform: rotate(-2deg);   background: rgba(192, 133, 82, .2); }
.ya-day__step:nth-child(5n+2) { margin-top: clamp(24px, 3vw, 48px); }
.ya-day__step:nth-child(5n+2) .ya-day__under { transform: rotate(1.8deg);  background: rgba(140, 106, 74, .17); }
.ya-day__step:nth-child(5n+3) { margin-top: 0; }
.ya-day__step:nth-child(5n+3) .ya-day__under { transform: rotate(-1.4deg); background: rgba(94, 70, 50, .15); }
.ya-day__step:nth-child(5n+4) { margin-top: clamp(24px, 3vw, 48px); }
.ya-day__step:nth-child(5n+4) .ya-day__under { transform: rotate(2.2deg);  background: rgba(224, 184, 138, .26); }
.ya-day__step:nth-child(5n)   { margin-top: 0; }
.ya-day__step:nth-child(5n) .ya-day__under   { transform: rotate(-1.8deg); background: rgba(192, 133, 82, .16); }


/* =========================================================================
   8. 最新消息 .ya-news  —  news 模組 news_block_new.html
   ⚠ 底緣斜切 6vw，下一區（房型）從斜切處接上來，所以下方 padding 要多留 6vw。
   ========================================================================= */
.ya-news {
	position: relative;
	overflow: hidden;
	background: var(--ya-deep);
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));
	padding: clamp(5rem, 10vw, 9rem) var(--ya-pad-x) calc(clamp(5rem, 10vw, 9rem) + 6vw);
}
.ya-news .ya-ink--a {
	top: -8%; left: -10%;
	width: min(46vw, 620px); height: min(46vw, 620px);
	background: radial-gradient(circle at 40% 40%, var(--ya-ac) 0%, transparent 68%);
	filter: blur(70px);
	opacity: .22;
	animation-duration: 22s;
}
.ya-news__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(165deg, rgba(0,0,0,.28) 0%, transparent 38%, rgba(0,0,0,.22) 100%);
	pointer-events: none;
}

/* 共用的日期與分類標籤 */
.ya-news__date {
	font-family: var(--ya-en);
	font-size: 1.15rem;
	letter-spacing: .05em;
	color: var(--ya-ac-soft);
}
.ya-news__tag {
	font-size: .72rem;
	letter-spacing: .1em;
	color: var(--ya-ac-soft);
	border: 1px solid rgba(230, 192, 178, .45);
	padding: .15rem .6rem;
	white-space: nowrap;
}

/* 主打大卡 */
.ya-news__feat {
	position: relative;
	max-width: var(--ya-wrap-foot);
	margin: 0 auto clamp(3.5rem, 7vw, 6rem);
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(1.8rem, 4vw, 4rem);
	align-items: center;
}
.ya-news__feat-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; }
.ya-news__feat-under {
	position: absolute;
	inset: 0;
	background: rgba(230, 192, 178, .14);
	clip-path: polygon(0 0, 100% 12.5%, 100% 96%, 0 100%);
	transform: translate(clamp(10px, 1.4vw, 22px), clamp(10px, 1.4vw, 22px));
}
.ya-news__feat-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 12.5%, 100% 96%, 0 100%);
}
.ya-news__feat-img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2, .6, .2, 1), filter .9s ease;
}
.ya-news__feat:hover .ya-news__feat-img { transform: scale(1.05); filter: saturate(1.12) brightness(1.04); }
.ya-news__feat:hover .ya-shine { left: 130%; opacity: 1; }

.ya-news__feat-body { position: relative; }
.ya-news__headline {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .8rem;
	color: var(--ya-ac-soft);
	margin-bottom: 1.4rem;
}
.ya-news__headline-rule {
	display: block;
	width: clamp(28px, 4vw, 54px);
	height: 1px;
	background: var(--ya-ac-soft);
}
.ya-news__meta {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.ya-news__feat-title {
	position: relative;
	font-family: var(--ya-serif);
	font-size: clamp(1.6rem, 2.9vw, 2.6rem);
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
	margin: 0 0 1.1rem;
	text-wrap: pretty;
}
/* 頭條標題的掃色（設計稿第 267 行，狀態在第 973–983 行）

   設計稿是三段式：
     進場 clip `inset(0 0 0 0)`      → 從左邊長出來
     離場 clip `inset(0 0 0 100%)`   → **繼續往右收**，不是倒退回左邊
     1 秒後 `transition:none` 瞬間重設回 `inset(0 100% 0 0)` 等下一次

   純 CSS 只有 hover／非 hover 兩個狀態，做不出「離場再重設」。
   ⚠ 這裡改用**遮罩錨點瞬移**的手法（設計稿自己的連結底線就是用這招）：
     只讓 mask-size 過場、mask-position **不過場**，所以
       hover   → 錨點瞬間跳到左邊，寬度 0→100%：從左往右長出來
       離 hover → 錨點瞬間跳回右邊，寬度 100%→0：從左往右收掉
     兩個方向都是左→右，跟設計稿一致，而且不需要 JS。
   ⚠ 不要改回 clip-path —— clip-path 沒有「錨點」可以瞬移，
     離場一定會倒退回左邊。 */
.ya-news__feat-title-fill {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	color: var(--ya-ac-soft);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(#000, #000);
	        mask-image: linear-gradient(#000, #000);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	        mask-position: 100% 0;
	-webkit-mask-size: 0 100%;
	        mask-size: 0 100%;
	transition: -webkit-mask-size .95s cubic-bezier(.3, .7, .2, 1),
	                    mask-size .95s cubic-bezier(.3, .7, .2, 1);
}
.ya-news__feat:hover .ya-news__feat-title-fill {
	-webkit-mask-position: 0 0;
	        mask-position: 0 0;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
}

/* Read more（設計稿第 271 行，狀態在第 988–992 行）
   ⚠ 設計稿的 featEnter／featLeave 掛在**整張主打卡**上，不是連結自己 ——
     滑到圖片或標題，這個連結也要一起動。所以驅動選擇器是
     `.ya-news__feat:hover`，不是 `.ya-link:hover`。
   數值與主打卡專屬（跟 .ya-link 的通用值不同）：
     letter-spacing .2em → .34em（.5s）、色 acSoft → 白（.5s）、箭頭 +6px */
.ya-news__feat-more {
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .2em;
	transition: background-size .6s cubic-bezier(.35, .05, .2, 1),
	            letter-spacing .5s cubic-bezier(.2, .6, .2, 1),
	            color .5s;
}
.ya-news__feat:hover .ya-news__feat-more,
.ya-news__feat-more:hover,
.ya-news__feat-more:focus-visible {
	color: #fff;
	letter-spacing: .34em;
	background-position: 0 100%;
	background-size: 100% 1px;
}
.ya-news__feat:hover .ya-news__feat-more .ya-arrow,
.ya-news__feat-more:hover .ya-arrow,
.ya-news__feat-more:focus-visible .ya-arrow { transform: translateX(6px); }
.ya-news__feat-desc {
	max-width: 38ch;
	margin: 0 0 1.8rem;
	color: rgba(255, 255, 255, .62);
	text-wrap: pretty;
}

/* 下半：標頭欄 ＋ 消息列 */
.ya-news__grid {
	position: relative;
	max-width: var(--ya-wrap-foot);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(240px, .8fr) 2fr;
	gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
}
/* 🔴 抬頭區塊（nc_vision `newshead`・bid 43）被後台關掉時，`.ya-news__head` 整塊不輸出，
   `.ya-news__list` 會變成這個 grid 唯一的子項 —— 不收成單欄的話它會掉進上面那個
   **窄欄**（.8fr），右半邊整片空著。樣板端（`modules/news/blocks/news_block_new.html`）
   在沒有抬頭時會多掛這個 class。
   ⚠ 另外四個區段抬頭（tmpl_1／3／5／wr_block_new）**不需要這條** ——
     那幾支的抬頭是卡片容器的兄弟節點，不是 grid 欄，拿掉不影響落位。 */
.ya-news__grid--nohead { grid-template-columns: 1fr; }

.ya-news__head { position: relative; padding-top: clamp(1rem, 4vw, 3.5rem); }
.ya-news__head .ya-wm { top: -4rem; left: -2rem; }
.ya-news__eyebrow {
	position: relative;
	color: var(--ya-ac-soft);
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	letter-spacing: .3em;
	margin-bottom: .6rem;
}
.ya-news__title {
	position: relative;
	font-family: var(--ya-serif);
	font-size: clamp(2.2rem, 4.2vw, 3.8rem);
	line-height: 1;
	font-weight: 900;
	letter-spacing: .02em;
	color: #fff;
	white-space: nowrap;
	margin: 0 0 1.2rem;
}
.ya-news__title .ya-accent { color: var(--ya-ac-soft); }
.ya-news__lead {
	position: relative;
	max-width: 22ch;
	margin: 0;
	color: rgba(255, 255, 255, .6);
	text-wrap: pretty;
}

.ya-news__list { display: flex; flex-direction: column; }
.ya-news__row {
	display: flex;
	gap: 1.5rem;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 1.6rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	background-image: linear-gradient(var(--ya-ac-soft), var(--ya-ac-soft));
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 1px;
	transition: background-size .6s cubic-bezier(.35, .05, .2, 1), padding-left .4s ease;
}
.ya-news__row:hover,
.ya-news__row:focus-visible {
	padding-left: .8rem;
	background-position: 0 100%;
	background-size: 100% 1px;
}
.ya-news__row-date {
	font-family: var(--ya-en);
	font-size: 1.15rem;
	letter-spacing: .05em;
	color: var(--ya-ac-soft);
	min-width: 90px;
}
.ya-news__row-main { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.ya-news__row-title { font-family: var(--ya-serif); font-size: 1.05rem; color: rgba(255, 255, 255, .92); }
.ya-news__row-arrow {
	margin-left: auto;
	background: var(--ya-ac-soft);
	opacity: .7;
}
.ya-news__row:hover .ya-news__row-arrow { transform: translateX(5px); opacity: 1; }
.ya-news__all {
	margin-top: 2.2rem;
	align-self: flex-start;
	font-family: var(--ya-en);
	font-style: italic;
	letter-spacing: .2em;
}


/* =========================================================================
   9. 響應式 — 單一斷點 1100px（與 style.css、js/home.js 一致）
   ========================================================================= */
@media (max-width: 1100px) {

	/* ── Hero 降級（使用者 2026-08-31 裁示）─────────────────────
	   回到 100vh：拿掉 205vh 的第二螢幕與 sticky 定住，
	   逐像素翻色也不做（js/home.js 不會加 .is-flip，文字維持白色）。
	   **花瓣與輪播保留**，所以右側層改成掛在 Hero 右半邊、只留花瓣。
	   碎裂進場、指示點、視差照常。 */
	.ya-hero { height: 100vh; min-height: 560px; }
	.ya-hero__pin { position: static; height: 100vh; }
	.ya-hero__copies { padding-left: var(--ya-pad-x); padding-right: var(--ya-pad-x); }
	.ya-hero__word { font-size: clamp(4rem, 26vw, 9rem); bottom: 14%; }
	.ya-hero__vert { display: none; }

	/* 右側層：沒有第二螢幕可放了，改貼齊 Hero 本身、照片不出 */
	.ya-hero__side { top: 0; height: 100%; width: 62%; }
	.ya-hero__side-photo { display: none; }

	/* 指示點改回貼在 Hero 底部（桌機是 calc(100vh − 5.4rem)）*/
	.ya-hero__nav {
		top: auto;
		bottom: clamp(2rem, 5vw, 4rem);
		left: var(--ya-pad-x);
	}
	.ya-hero__dot-label { display: none; }
	.ya-hero__down { display: none; }

	/* 最新消息 */
	.ya-news__feat { grid-template-columns: 1fr; }
	.ya-news__grid { grid-template-columns: 1fr; }
	.ya-news__head { padding-top: 0; }
	.ya-news__title { white-space: normal; }
	.ya-news__row-date { min-width: 0; }

	/* 房型 */
	.ya-rooms__head { margin-left: 0; }
	.ya-room { grid-template-columns: 1fr; }
	.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__media { order: 0; }
	.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__body  { order: 0; }
	.ya-room__media { height: clamp(260px, 62vw, 420px); }
	.ya-room__no { top: -2.6rem; left: -.5rem; font-size: clamp(5rem, 26vw, 9rem); }
	.ya-rooms__list > .ya-room:nth-child(3n+2) .ya-room__no { left: -.5rem; right: auto; }

	/* 品牌故事 */
	.ya-story__inner { margin-left: 0; }
	.ya-story__bg { width: 100%; opacity: .5; }

	/* 服務設施：一頁一張 */
	/* 行動版一頁一張、卡片不旋轉，不需要那 16px 的旋轉留白 */
	.ya-facil__rail { padding-left: 0; scroll-padding-left: 0; }
	.ya-facil__card { width: 100%; margin: 0; transform: none; }
	.ya-facil__card:nth-child(4n+1),
	.ya-facil__card:nth-child(4n+2),
	.ya-facil__card:nth-child(4n+3),
	.ya-facil__card:nth-child(4n) { margin: 0; transform: none; }
	.ya-facil__card:hover { transform: translateY(-8px); }

	/* 限時禮遇 */
	.ya-offer__body { margin-left: 0; }
	.ya-offer__bg { width: 100%; }

	/* 一日湯宿：改成兩欄，位移取消 */
	.ya-day__head { margin-left: 0; }
	.ya-day__grid { grid-template-columns: repeat(2, 1fr); }
	.ya-day__step { margin-top: 0 !important; }
	.ya-day__media { height: clamp(180px, 42vw, 240px); }
}

@media (max-width: 640px) {
	.ya-day__grid { grid-template-columns: 1fr; }
	.ya-facil__nav { flex-wrap: wrap; }
	.ya-facil__spacer { display: none; }
	.ya-news__row { gap: .6rem; }
}

/* 使用者要求減少動態：輪播改瞬移，暈染與漣漪停住
   （style.css 的全域 reduced-motion 段只壓 animation 與 transition，
     不含 scroll-behavior，這裡補上）*/
@media (prefers-reduced-motion: reduce) {
	.ya-facil__rail { scroll-behavior: auto; }
	.ya-ink, .ya-ripple { animation: none; }
	.ya-hero__slide { transition: none; }
}


/* =========================================================================
   10. 列印 — 隱藏所有裝飾與動態（README「CSS 移植原則 5」）
   ========================================================================= */
@media print {
	.ya-hero, .ya-ink, .ya-ripple, .ya-shine, .ya-wm,
	.ya-facil__nav, .ya-hero__nav, .ya-hero__down,
	.ya-story__bg, .ya-offer__bg, .ya-news__shade { display: none !important; }

	.ya-news, .ya-story, .ya-offer {
		background: #fff !important;
		color: #000 !important;
		clip-path: none !important;
		margin: 0 !important;
		padding: 1.5rem 0 !important;
	}
	.ya-news__title, .ya-story__title, .ya-offer__title,
	.ya-news__feat-title, .ya-news__row-title { color: #000 !important; }
	.ya-news__lead, .ya-story__p, .ya-offer__desc, .ya-news__feat-desc { color: #333 !important; }

	.ya-facil__rail { display: block; overflow: visible; }
	.ya-facil__card { width: 100%; height: auto; margin: 0 0 1rem; transform: none; }
	.ya-day__grid { grid-template-columns: repeat(2, 1fr); }
	.ya-room { page-break-inside: avoid; }
}