/* ============================================================
 * 錦屏美人湯館 STYLE A — 首頁動畫層（還原 version-a-氛圍極致.html）
 * 全域 enqueue（mu-plugin dz-jinping-anim.php），靠 jp-* class 掛到 Bricks 原生元素。
 * 不碰任何頁面內容 meta、不影響 Bricks 可視覺編輯。
 * 變數命名/數值對齊 DEMO 原始 CSS。
 * ============================================================ */
/* ============================================================
 * 2026-07-29 R5【五-1】關閉 iOS/Android 的「文字自動放大」（text autosizing）
 * 為什麼是必修，而不是可有可無的 hygiene：
 *   iOS Safari 與 Chrome Android 預設 -webkit-text-size-adjust:auto，會在
 *   「區塊寬度明顯大於視窗寬度」或「手機橫拿」時自行把內文字級放大（boost），
 *   放大比例不受 CSS 控制、也不會反映在 Playwright／Chrome DevTools 裝置模擬上
 *   （模擬器一律等同 100%）→ 這正是「桌機與模擬器都正常、真機手機才爆版」的典型成因。
 *   本站全站 heading 掛 word-break:keep-all（2026-06-04 斷行總修正），
 *   長中文標題整串不可斷 → 字級一被 boost，min-content 同比例變寬，
 *   grid 軌道（1fr＝minmax(auto,1fr)）跟著被撐開 → 橫向溢出／文字被裁。
 *   ＝ 320px 那一輪查到的機制，只是這次觸發源是「系統放大字級」而非視窗變窄。
 * 修法：宣告 100%（不是 none）——維持使用者雙指縮放（無障礙），只關掉瀏覽器自作主張的 boost。
 * 影響面：桌機瀏覽器本來就不做 text autosizing ＝ 1440 零變化；
 *         模擬器量測也零變化（本來就 100%），故此項無法用 Playwright 驗出差異，
 *         只能靠真機確認，屬「先補上、成本零、風險零」的防禦。
 * ============================================================ */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}

:root{
  --jp-mist:#FAF7F2;
  --jp-ink-deep:#2B2A28;
  --jp-ink-faint:#8A857E;
  --jp-bamboo:#6B8E7F;
  --jp-night:#1F1B17;
  --jp-cedar:#5C4434;
  --jp-ease:cubic-bezier(.22,1,.36,1);
  /* === 統一按鈕系統 token（2026-06-10 P2-1）=== */
  --btn-pad:18px 52px;
  --btn-pad-sm:13px 28px;
  --btn-ls:0.28em;
  --btn-font:"Noto Serif TC",serif;
}

/* ============================================================
 * 統一按鈕系統 .jp-btn（2026-06-10 P2-1）
 * 全站所有 CTA 共用一套規格：padding / 字距 / 字體 / 圓角 / 邊框。
 * 同時套到 Bricks button 元素（.brxe-button 本體或外殼）與站台 chrome 的 <a>。
 * 用 !important 蓋掉各 build 的 inline _typography/_padding/_border，
 * 達成「同一個預約動作全站長一樣」。
 * 變體：--sm 小鈕（電話/LINE）、--solid 實心（深色底白字）。
 * ============================================================ */
.jp-btn,
.jp-btn.brxe-button,
.jp-btn .brxe-button{
  display:inline-block!important;
  padding:var(--btn-pad)!important;
  letter-spacing:var(--btn-ls)!important;
  font-family:var(--btn-font)!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1!important;
  border:1px solid currentColor!important;
  border-radius:0!important;
  background:transparent;
  color:var(--jp-cedar);
  text-decoration:none!important;
  cursor:pointer;
  white-space:nowrap;
  transition:all .4s var(--jp-ease);
}
.jp-btn--sm,
.jp-btn--sm.brxe-button,
.jp-btn--sm .brxe-button{padding:var(--btn-pad-sm)!important;font-size:13px!important}
.jp-btn--solid,
.jp-btn--solid.brxe-button,
.jp-btn--solid .brxe-button{
  background:var(--jp-cedar)!important;color:#fff!important;border-color:var(--jp-cedar)!important;
}
/* 暗底（hero/終曲/footer/側欄）上的描邊鈕：字與框走米白 */
.jp-btn--light,
.jp-btn--light.brxe-button,
.jp-btn--light .brxe-button{color:var(--jp-mist)!important;border-color:var(--jp-mist)!important}
/* hover：描邊鈕填滿、實心鈕加深 */
.jp-btn:hover{background:var(--jp-cedar);color:#fff!important;border-color:var(--jp-cedar)}
.jp-btn--light:hover{background:var(--jp-mist);color:var(--jp-ink-deep)!important;border-color:var(--jp-mist)}
.jp-btn--solid:hover{background:var(--jp-ink-deep)!important;border-color:var(--jp-ink-deep)!important}

/* ---------- HERO：背景圖 Ken Burns + 雙層漸層遮罩 + 霧氣 ---------- */
/* Bricks 把 section 背景圖放在 .brxe-section 的 background-image。
   要對「背景圖」做 Ken Burns，需把背景搬到 ::after 偽元素自己跑動畫。 */
.jp-hero{position:relative;overflow:hidden;background-color:var(--jp-night)!important}

/* 背景圖層（JS 注入的 .jp-hero-bg div，搬 section 背景圖過來做 Ken Burns + 視差）。
   分成「外層 .jp-hero-bg 跑視差 translateY、內層 img 跑 Ken Burns」避免 transform 互相覆蓋。*/
.jp-hero-bg{
  position:absolute;inset:-4%;z-index:0;overflow:hidden;
  will-change:transform;
}
.jp-hero-bg .jp-kb{
  width:100%;height:100%;
  background-image:var(--jp-hero-img);
  background-size:cover;background-position:center 40%;
  animation:jpKenburns 20s ease-in-out infinite alternate;
}
@keyframes jpKenburns{
  0%{transform:scale(1.0) translate(0,0)}
  100%{transform:scale(1.10) translate(-2.5%,-1.5%)}
}
/* 關閉 section 自身背景圖（改由 .jp-hero-bg 顯示，避免雙層重疊） */
.jp-hero{background-image:none!important}

/* 雙層漸層暗化遮罩（對齊 DEMO .hero-overlay） */
.jp-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(15,12,10,0.62) 0%, rgba(31,27,23,0.42) 60%, rgba(15,12,10,0.55) 100%),
    linear-gradient(180deg, transparent 50%, rgba(15,12,10,0.40) 100%);
}

/* 霧氣 SVG turbulence 飄移層（對齊 DEMO .hero-fog） */
.jp-hero > .jp-fog{
  position:absolute;inset:-10%;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  opacity:0.22;mix-blend-mode:screen;
  animation:jpDrift 36s ease-in-out infinite alternate;
}
@keyframes jpDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3%,2%) scale(1.05)}
}

/* hero 內容墊到遮罩之上 */
.jp-hero-content{position:relative;z-index:5}

/* scroll hint（底部滴落光點） */
.jp-scroll-hint{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  z-index:5;text-align:center;color:rgba(250,247,242,0.55);
}
.jp-scroll-hint .jp-sh-label{
  font-family:"Cormorant Garamond",serif;font-size:11px;font-style:italic;
  letter-spacing:0.32em;text-transform:uppercase;margin-bottom:14px;
}
.jp-scroll-hint .jp-sh-line{
  width:1px;height:48px;background:rgba(250,247,242,0.45);margin:0 auto;
  position:relative;overflow:hidden;
}
.jp-scroll-hint .jp-sh-line::after{
  content:"";position:absolute;top:-48px;left:0;width:1px;height:48px;
  background:linear-gradient(to bottom,transparent,var(--jp-mist));
  animation:jpScrollDrop 2.4s ease-in-out infinite;
}
@keyframes jpScrollDrop{0%{top:-48px}100%{top:48px}}

/* ---------- 進場：字符 stagger（hero 主標） ---------- */
.jp-stagger .jp-ch{
  display:inline-block;opacity:0;transform:translateY(120%);
  transition:opacity 1000ms var(--jp-ease),transform 1200ms var(--jp-ease);
}
.jp-stagger.in .jp-ch{opacity:1;transform:translateY(0)}
/* 拆字期間用 overflow 藏住浮上來的字 */
.jp-stagger{overflow:hidden}
/* 2026-07-08 動畫結束(.in)後解除遮罩：長標題尾字/換行第二行不再被 overflow:hidden 裁切 */
.jp-stagger.in{overflow:visible}

/* ---------- 進場：fade-in（hero 標籤/引言/CTA） ---------- */
.jp-fade{opacity:0;transition:opacity 2400ms var(--jp-ease)}
.jp-fade.in{opacity:1}

/* ---------- 進場：scroll reveal（全站區塊） ---------- */
.jp-reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 1400ms var(--jp-ease),transform 1400ms var(--jp-ease);
}
.jp-reveal.in{opacity:1;transform:translateY(0)}
.jp-d2{transition-delay:220ms}
.jp-d3{transition-delay:440ms}
.jp-d4{transition-delay:660ms}
.jp-d5{transition-delay:880ms}

/* ---------- 圖片 hover 緩放（介紹圖/章節圖） ---------- */
.jp-zoom-img{overflow:hidden}
.jp-zoom-img img{transition:transform 6000ms var(--jp-ease)}
.jp-zoom-img:hover img{transform:scale(1.05)}

/* ---------- 沉浸大圖：進場緩放 + 底部 veil ---------- */
.jp-immersive{position:relative;overflow:hidden}
.jp-immersive img{transition:transform 4000ms var(--jp-ease),opacity 2000ms var(--jp-ease)}
.jp-immersive.in img{transform:scale(1.04)}
.jp-immersive::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(15,12,10,0.15) 0%, transparent 30%, transparent 70%, rgba(15,12,10,0.45) 100%);
}

/* ---------- 價格卡片化（2026-06-04 第二波：圓角 + 淺陰影 + hover 上浮 + 主色價格） ---------- */
.jp-card{
  transition:transform 600ms var(--jp-ease),box-shadow 600ms var(--jp-ease),border-color 600ms var(--jp-ease);
  border-radius:14px;
  box-shadow:0 10px 30px -22px rgba(43,42,40,0.35);
  background:#fff !important;            /* 卡片底實白，從米白底浮起來 */
}
.jp-card:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 50px -26px rgba(43,42,40,0.42);
  border-color:rgba(107,142,127,0.5) !important;   /* hover 帶一點竹綠主色 */
}

/* 湯泉主推方案卡（jp-feat-card）：精緻化＋主打卡微強調 */
.jp-feat-card{
  background:#fff !important;
  border:1px solid var(--jp-line,#D8D2C8);
  border-radius:14px;
  padding:44px 26px 40px;
  box-shadow:0 12px 32px -24px rgba(43,42,40,0.34);
}
.jp-feat-card.jp-feat-hot{
  border-color:rgba(107,142,127,0.55);
  box-shadow:0 18px 40px -22px rgba(107,142,127,0.4);
  position:relative;
  overflow:visible !important; /* 2026-06-10 讓「最受歡迎」緞帶完整浮出上緣、不被卡片 overflow:hidden 切掉 */
}
/* 主打卡上緣「最受歡迎」緞帶 */
.jp-feat-card.jp-feat-hot::before{
  content:"最受歡迎";
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--jp-bamboo);color:#fff;
  font-family:"Noto Serif TC",serif;font-size:12px;letter-spacing:2px;
  padding:5px 18px;border-radius:20px;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(107,142,127,0.6);
}
.jp-feat-btn{transition:background 500ms var(--jp-ease),color 500ms var(--jp-ease)}
.jp-feat-btn:hover{background:var(--jp-cedar,#5C4434) !important;color:#fff !important}

/* ============================================================
 * 錦屏 CIS 視覺母題（2026-06-04 建，2026-06-05 收斂）
 * 全站視覺母題＝銀杏葉（品牌保留母題）。2026-06-05 用戶裁定：自創貓頭鷹
 * 線稿屬非官方符號、全站移除，章節印記/時間軸節點/終曲/頁尾一律改用銀杏葉。
 * 低彩度、不搶內容。純 CSS 偽元素 + SVG data-uri，0 內容變動、0 code 元素。
 * ============================================================ */
/* 章節印記（.jp-page-sec 內的 seal 小字）上方加一片極淡銀杏葉 */
.jp-page-sec .brxe-text-basic:first-child{position:relative}
/* 銀杏葉母題：可用 .jp-ginkgo 主動掛在 seal 上（build 端或自動掛皆可） */
.jp-ginkgo::before,
.jp-seal-ginkgo::before{
  content:"";display:block;width:30px;height:30px;margin:0 auto 14px;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTMyIDYgQzIwIDE4IDEyIDMwIDEyIDQyIEMxMiA1MiAyMiA1OCAzMiA1OCBDNDIgNTggNTIgNTIgNTIgNDIgQzUyIDMwIDQ0IDE4IDMyIDYgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTg4NTNDIiBzdHJva2Utd2lkdGg9IjIiIG9wYWNpdHk9IjAuNyIvPjxwYXRoIGQ9Ik0zMiAxNCBMMzIgNTYgTTIwIDM4IFEzMiAzMCA0NCAzOCBNMjQgMzAgUTMyIDI2IDQwIDMwIiBmaWxsPSJub25lIiBzdHJva2U9IiNBODg1M0MiIHN0cm9rZS13aWR0aD0iMS40IiBvcGFjaXR5PSIwLjU1Ii8+PC9zdmc+") center/contain no-repeat;
  opacity:0.85;
}
/* 終曲頁尾印記：2026-06-05 第三輪用戶裁定——此位置不放任何圖示（貓頭鷹、銀杏葉都拿掉），
   版面直接收順、留乾淨收尾。原 .jp-finale::before 整塊移除。 */

/* ---------- 終曲霧氣層 ---------- */
.jp-finale{position:relative;overflow:hidden}
.jp-finale::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  opacity:0.10;mix-blend-mode:screen;
  animation:jpDrift 40s ease-in-out infinite alternate;
}
.jp-finale > *{position:relative;z-index:2}

/* ---------- CTA 填充 hover（hero + 終曲鈕） ---------- */
.jp-cta-fill .brxe-button,
.jp-cta-fill.brxe-button{
  position:relative;overflow:hidden;z-index:0;
  transition:color 1200ms var(--jp-ease),border-color 1200ms var(--jp-ease);
}
.jp-cta-fill .brxe-button::before,
.jp-cta-fill.brxe-button::before{
  content:"";position:absolute;inset:0;background:var(--jp-mist);
  transform:translateY(100%);transition:transform 1200ms var(--jp-ease);z-index:-1;
}
.jp-cta-fill .brxe-button:hover,
.jp-cta-fill.brxe-button:hover{color:var(--jp-ink-deep)!important;border-color:var(--jp-mist)!important}
.jp-cta-fill .brxe-button:hover::before,
.jp-cta-fill.brxe-button:hover::before{transform:translateY(0)}

/* ---------- CTA 線框（首頁「查看完整方案與房價」導引鈕） ---------- */
.jp-cta-line .brxe-button,
.jp-cta-line.brxe-button{
  transition:background-color 600ms var(--jp-ease),color 600ms var(--jp-ease),border-color 600ms var(--jp-ease);
}
.jp-cta-line .brxe-button:hover,
.jp-cta-line.brxe-button:hover{
  background:var(--jp-cedar,#5C4434)!important;color:#fff!important;border-color:var(--jp-cedar,#5C4434)!important;
}

/* ============================================================
 * 站台級導覽 chrome：漢堡選單 + 浮層 Logo + 全屏 overlay
 * 由 mu-plugin 注入到 wp_footer（站台層，不在頁面內容 meta 內）
 * ============================================================ */
/* 業界標準佈局：漢堡選單靠右 */
/* 2026-07-29 R5【三】safe-area 防護：目前 viewport meta 是 viewport-fit=auto，
   env(safe-area-inset-*) 一律回 0px ＝ 下面這些 calc() 與現行像素值完全等值（零視覺變化）。
   保留它們的用意：日後若把 viewport meta 改成 viewport-fit=cover（內容延伸到瀏海／圓角下方），
   這兩顆固定元素才不會在 iPhone 橫拿時被系統區吃掉。改 meta 前請先在真機驗證。 */
.jp-menu-toggle{
  position:fixed;top:calc(34px + env(safe-area-inset-top,0px));right:calc(36px + env(safe-area-inset-right,0px));z-index:1000;
  width:48px;height:48px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:6px;cursor:pointer;
  background:none;border:none;
}
.jp-menu-toggle span{
  display:block;width:24px;height:1px;background:var(--jp-mist);
  transition:transform 600ms var(--jp-ease),opacity 400ms var(--jp-ease),background 400ms var(--jp-ease);
}
.jp-menu-toggle.scrolled span{background:var(--jp-ink-deep)}
.jp-menu-toggle.open span{background:var(--jp-mist)}
.jp-menu-toggle.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.jp-menu-toggle.open span:nth-child(2){opacity:0}
.jp-menu-toggle.open span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

/* 業界標準佈局：去背 logo 靠左、橫排 圖騰 + 中文品牌名（無白底板） */
.jp-brand-mark{
  position:fixed;top:calc(24px + env(safe-area-inset-top,0px));left:calc(36px + env(safe-area-inset-left,0px));z-index:1000;
  display:flex;flex-direction:row;align-items:center;gap:13px;
  text-decoration:none;transition:opacity 600ms var(--jp-ease);
}
/* 去背圖騰：暗底 hero 上靠輕微 drop-shadow 浮起、不糊進背景；
   圖騰本身放大（業界 header 標準高度），滾動進淺底後 shadow 收斂。*/
.jp-brand-mark .jp-logo-img{
  display:block;height:56px;width:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.45));
  transition:filter 600ms var(--jp-ease),height 600ms var(--jp-ease);
}
.jp-brand-mark.scrolled .jp-logo-img{
  filter:drop-shadow(0 1px 4px rgba(31,27,23,0.18));
}
/* 2026-07-08 橫式 lockup 深淺自適應：深底(未 scrolled)→白字版、淺底(scrolled)→墨字版，
   選單開啟(深 overlay)→強制白字版。徽章紅金原色在兩版皆不變。純 CSS 切換不重載。 */
.jp-brand-mark .jp-logo-white{display:none}
.jp-brand-mark:not(.scrolled) .jp-logo-white{display:block}
.jp-brand-mark:not(.scrolled) .jp-logo-ink{display:none}
.jp-brand-mark.scrolled .jp-logo-white{display:none}
.jp-brand-mark.scrolled .jp-logo-ink{display:block}
.jp-brand-mark.menu-open .jp-logo-white{display:block}
.jp-brand-mark.menu-open .jp-logo-ink{display:none}
/* 中文品牌名 + 英文輔助標（堆疊在 logo 右側），可控對比＝暗底淺色、滾動後轉深 */
.jp-brand-mark .jp-brand-name{
  display:flex;flex-direction:column;justify-content:center;gap:3px;line-height:1;
}
.jp-brand-mark .jp-brand-name .zh{
  font-family:"Noto Serif TC",serif;font-size:19px;font-weight:500;
  letter-spacing:0.14em;color:var(--jp-mist);white-space:nowrap;
  text-shadow:0 1px 8px rgba(15,12,10,0.55);
  transition:color 600ms var(--jp-ease),text-shadow 600ms var(--jp-ease);
}
.jp-brand-mark .jp-brand-name .en{
  font-family:"Cormorant Garamond",serif;font-size:10px;font-style:italic;font-weight:300;
  letter-spacing:0.32em;color:rgba(250,247,242,0.78);text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 6px rgba(15,12,10,0.5);
  transition:color 600ms var(--jp-ease),text-shadow 600ms var(--jp-ease);
}
.jp-brand-mark.scrolled .jp-brand-name .zh{color:var(--jp-ink-deep);text-shadow:none}
.jp-brand-mark.scrolled .jp-brand-name .en{color:var(--jp-ink-faint);text-shadow:none}
/* 選單開啟（深色 overlay 覆蓋全屏）時：品牌名一律強制轉白，蓋過 .scrolled 的深字，
   否則淺底 hero 頁（spring/dining/environment/news）的深色品牌字會陷進黑背景看不見。
   選單關閉後移除 .menu-open，回復 applyHeaderState() 的深淺自適應。 */
.jp-brand-mark.menu-open .jp-brand-name .zh{color:var(--jp-mist)!important;text-shadow:0 1px 8px rgba(15,12,10,0.55)!important}
.jp-brand-mark.menu-open .jp-brand-name .en{color:rgba(250,247,242,0.78)!important;text-shadow:0 1px 6px rgba(15,12,10,0.5)!important}
.jp-brand-mark.menu-open .jp-logo-img{filter:drop-shadow(0 2px 10px rgba(0,0,0,0.45))!important}

.jp-menu-overlay{
  position:fixed;inset:0;z-index:999;
  /* 2026-07-29 R5【四】補 -webkit- 前綴：Safari 要到 18.0 才支援無前綴 backdrop-filter，
     iOS 17 以下只認 -webkit-backdrop-filter → 原本這片 overlay 在多數在用的 iPhone 上
     根本沒有模糊，且「有 backdrop-filter 才是 fixed 子元素 containing block」這個前提
     在 iOS 17 以下不成立（見下方 ::before/::after 註解的補充驗證）。 */
  background:rgba(31,27,23,0.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;transition:opacity 800ms var(--jp-ease);
  /* 2026-07-29 手機 RWD ③：內容高於視窗時可捲（原 overflow:visible ＝上被切、下點不到） */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.jp-menu-overlay.open{opacity:1;pointer-events:all}
.jp-menu-overlay nav{text-align:center}
.jp-menu-overlay a{
  display:block;font-family:"Noto Serif TC",serif;font-size:36px;font-weight:400;
  color:var(--jp-mist);letter-spacing:0.12em;margin:24px 0;
  opacity:0;transform:translateY(20px);
  /* 2026-06-10 修正：reveal(opacity/transform) 與 color 分離，color 永遠即時、不被 stagger 延遲拖慢 */
  transition:opacity 800ms var(--jp-ease),transform 800ms var(--jp-ease),color 250ms var(--jp-ease);
  transition-delay:0ms,0ms,0ms;
}
.jp-menu-overlay.open a{opacity:1;transform:translateY(0)}
/* 由上到下漸次顯示：先導覽 7 項、再 CTA 2 顆；只延遲 opacity/transform，color 一律 0 → hover 即時變色 */
.jp-menu-overlay.open nav a:nth-child(1){transition-delay:200ms,200ms,0ms}
.jp-menu-overlay.open nav a:nth-child(2){transition-delay:290ms,290ms,0ms}
.jp-menu-overlay.open nav a:nth-child(3){transition-delay:380ms,380ms,0ms}
.jp-menu-overlay.open nav a:nth-child(4){transition-delay:470ms,470ms,0ms}
.jp-menu-overlay.open nav a:nth-child(5){transition-delay:560ms,560ms,0ms}
.jp-menu-overlay.open nav a:nth-child(6){transition-delay:650ms,650ms,0ms}
.jp-menu-overlay.open nav a:nth-child(7){transition-delay:740ms,740ms,0ms}
.jp-menu-overlay.open .jp-menu-cta-group a:nth-child(1){transition-delay:830ms,830ms,0ms}
.jp-menu-overlay.open .jp-menu-cta-group a:nth-child(2){transition-delay:920ms,920ms,0ms}
/* 2026-07-27 第二輪修正 ⑥：選單 CTA 補到三顆，第三顆若不補 delay 會落回基礎規則 0ms、比前兩顆先浮現 */
.jp-menu-overlay.open .jp-menu-cta-group a:nth-child(3){transition-delay:1010ms,1010ms,0ms}
.jp-menu-overlay a:hover{color:var(--jp-bamboo)}
/* 選單 CTA 群組：線上預約（實心）+ 電話預約（描邊）+ 加 LINE 諮詢（描邊），並排、手機堆疊 */
.jp-menu-cta-group{
  margin-top:48px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;
}
@media (max-width:560px){ .jp-menu-cta-group{flex-direction:column;gap:14px;width:100%;max-width:300px} .jp-menu-cta-group .jp-menu-cta{width:100%;text-align:center} }

/* ============================================================
 * 2026-07-29 R2【二】選單「下面還有內容」提示（不壓版面）
 * 背景：手機選單總高 790px ＞ 視窗 667px，第三顆「加 LINE 諮詢」要捲約 123px 才進畫面。
 * ⚠️ 不用壓字級／壓間距硬塞成一屏：667 是 iPhone SE 級距含瀏覽器 UI 後的可視高，
 *    更矮機型或 Android 底部工具列出現時照樣爆，且壓掉留白會傷品牌質感。
 * 改法：底部一層淡出漸層（overlay 底色 rgba(31,27,23,.97) 往上淡出 56px）＋一支向下小箭頭，
 *      兩者都 pointer-events:none 不吃點擊，捲動一開始就淡出。字級與間距一格未動。
 * 定位：overlay 有 backdrop-filter → 它就是 fixed 子元素的 containing block，
 *      故 ::before/::after 用 position:fixed 會釘在 overlay 視窗底部、不隨內容捲走（已實測）。
 *
 * ⚠️ 2026-07-29 R5【四】相容性補充（重要，別再把 backdrop-filter 當定位前提）：
 *   上面那句「靠 backdrop-filter 當 containing block」是**脆弱前提**——
 *   Safari 18.0 之前只認 -webkit-backdrop-filter，原本這裡只寫無前綴版，
 *   代表在 iOS 17 以下這個 containing block 根本沒建立。
 *   之所以照樣正確，是因為 .jp-menu-overlay 自己就是 position:fixed;inset:0
 *   ＝ 它的 padding box 與視窗矩形重合，所以「以 overlay 為基準」和
 *   「以視窗為基準」算出來的 bottom:0 是同一個位置，兩種情況都釘在視窗底。
 *   ＝ 這兩支偽元素其實不依賴 backdrop-filter，前綴補上只是把行為在各 iOS 版本間拉齊。
 *   評估過改 position:absolute + 容器 relative：**不成立**。overlay 是捲動容器，
 *   absolute 子項以 padding box 定位並且會跟著內容一起捲走，bottom:0 會落在
 *   「捲到最底才看得到」的位置——正好是提示不再需要的時候，功能等於失效。故維持 fixed。
 * 顯示條件：由 jp-anim.js 量 scrollHeight > clientHeight 才掛 .jp-menu-more，
 *          內容塞得下（桌機／高視窗）就完全不出現。
 * ============================================================ */
.jp-menu-overlay::after{
  content:"";position:fixed;left:0;right:0;bottom:0;
  height:calc(56px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(31,27,23,0.97) 0%,rgba(31,27,23,0.86) 38%,rgba(31,27,23,0) 100%);
  pointer-events:none;opacity:0;transition:opacity 420ms var(--jp-ease);z-index:3;
}
.jp-menu-overlay::before{
  content:"";position:fixed;left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));width:11px;height:11px;
  border-right:2px solid rgba(250,247,242,0.62);border-bottom:2px solid rgba(250,247,242,0.62);
  pointer-events:none;opacity:0;transition:opacity 420ms var(--jp-ease);z-index:4;
  transform:translateX(-50%) rotate(45deg);
  animation:jpMenuCue 1.7s ease-in-out infinite;
}
@keyframes jpMenuCue{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(45deg)}
  50%{transform:translateX(-50%) translateY(5px) rotate(45deg)}
}
.jp-menu-overlay.jp-menu-more::after,
.jp-menu-overlay.jp-menu-more::before{opacity:1}
.jp-menu-overlay.jp-menu-more.jp-menu-scrolled::after,
.jp-menu-overlay.jp-menu-more.jp-menu-scrolled::before{opacity:0}
@media (prefers-reduced-motion:reduce){
  .jp-menu-overlay::before{animation:none}
}

/* ============================================================
 * 2026-07-29 R5【四】backdrop-filter 不支援時的退路
 * 對象：舊版 iOS Safari／關閉硬體加速的環境／部分 Android WebView。
 * 沒有模糊時，半透明底會直接露出後面的照片 →
 *   頁首 scrim 變成「照片透出來、LOGO 與漢堡照樣糊」（＝這片 scrim 當初要解的問題復發）；
 *   選單 overlay 則是文字後方雜訊變多。
 * 退路：改用不透明底色，犧牲毛玻璃質感換可讀性。
 * ⚠️ @supports 條件同時測無前綴與 -webkit- 兩種，避免只支援前綴版的 Safari 被誤判成不支援。
 * ============================================================ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .jp-header-scrim{background:rgb(250,247,242)}
  .jp-menu-overlay{background:rgb(31,27,23)}
  .jp-menu-overlay::after{
    background:linear-gradient(to top,rgb(31,27,23) 0%,rgba(31,27,23,0.86) 38%,rgba(31,27,23,0) 100%);
  }
}

/* ---------- 價格 / 房型卡 grid RWD ---------- */
@media (max-width:1024px){
  .jp-price-grid{grid-template-columns:1fr 1fr!important}
  .jp-room-grid{grid-template-columns:1fr 1fr!important}
}

/* ---------- RWD ---------- */
@media (max-width:768px){
  /* 漢堡靠右、logo+名靠左（手機同維持業界佈局） */
  /* 2026-07-29 R5【三】同上：env() 目前一律 0px，與原本 20/18px 完全等值 */
  .jp-menu-toggle{top:calc(18px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px));left:auto;width:42px;height:42px}
  .jp-brand-mark{top:calc(16px + env(safe-area-inset-top,0px));left:calc(18px + env(safe-area-inset-left,0px));right:auto;gap:9px}
  .jp-brand-mark .jp-logo-img{height:40px}
  .jp-brand-mark .jp-brand-name .zh{font-size:15px;letter-spacing:0.1em}
  .jp-brand-mark .jp-brand-name .en{font-size:8px;letter-spacing:0.24em}
  .jp-scroll-hint{bottom:32px}
  /* 2026-07-29 手機 RWD ③：選單字級/間距壓縮（原 28px / 18px），讓 7 項＋3 顆 CTA 塞得下 667 高視窗 */
  .jp-menu-overlay a{font-size:24px;margin:12px 0}
  .jp-price-grid{grid-template-columns:1fr!important}
  .jp-room-grid{grid-template-columns:1fr!important}
}
/* 極窄機 (≤380px)：中文名可能擠到漢堡 → 收掉英文輔助標、縮名字級 */
@media (max-width:380px){
  .jp-brand-mark .jp-brand-name .en{display:none}
  .jp-brand-mark .jp-brand-name .zh{font-size:14px}
  .jp-brand-mark .jp-logo-img{height:36px}
}

/* ============================================================
 * 2026-07-29 手機版 RWD 修正（給CODE_手機版RWD修正_2026-07.md ①②③）
 * 來源：客人 390px 實機回報 → 達帛利 375/390 Playwright 實測復現。
 *
 * ①【頁首固定底 .jp-header-scrim】
 *   問題：手機滿版照片直接頂到畫面最上緣、頁首全透明浮層 →
 *        LOGO 糊進深色照片、漢堡幾乎看不見；捲動時區塊標題與頁首字疊在一起。
 *   修法：由 jp-anim.js 注入一片固定的米白半透明底（z-index 998），
 *        壓在 brand/toggle（z1000）之下、選單 overlay（z999）之下 →
 *        選單開啟時被 overlay 蓋住、不干擾；pointer-events:none 不吃點擊，
 *        也不會被 applyHeaderState 的 elementFromPoint 取樣命中。
 *   ⚠️ 只在 ≤768px 套用：桌機頁首維持透明浮層（原設計，客人未反映桌機問題）。
 *   配套：手機頁首底是「淺色」，故漢堡線與 LOGO 一律走深色版
 *        （不再跟著背景亮度自動反白，否則白線/白字會消失在米白底上）；
 *        選單開啟（.open / .menu-open）時仍轉白 X ＋ 白字 LOGO。
 * ============================================================ */
.jp-header-scrim{
  position:fixed;top:0;left:0;right:0;height:calc(96px + env(safe-area-inset-top,0px));z-index:998;
  background:rgba(250,247,242,0.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(43,42,40,.08);
  pointer-events:none;
  display:none;                 /* 桌機不出現（維持原透明頁首設計） */
}
@media (max-width:768px){
  .jp-header-scrim{display:block;height:calc(72px + env(safe-area-inset-top,0px))}
  /* 漢堡三條線：手機一律深色（蓋掉亮度自適應的白線）；.open 白 X 規則不受影響 */
  .jp-menu-toggle:not(.open) span{background:var(--jp-ink-deep)}
  /* LOGO：手機一律墨字版（淺底），選單開啟時仍由 .menu-open 轉白字版 */
  .jp-brand-mark:not(.menu-open) .jp-logo-white{display:none}
  .jp-brand-mark:not(.menu-open) .jp-logo-ink{display:block}
  .jp-brand-mark:not(.menu-open) .jp-logo-img{filter:drop-shadow(0 1px 4px rgba(31,27,23,0.18))}
  .jp-brand-mark:not(.menu-open) .jp-brand-name .zh{color:var(--jp-ink-deep);text-shadow:none}
  .jp-brand-mark:not(.menu-open) .jp-brand-name .en{color:var(--jp-ink-faint);text-shadow:none}

  /* ③ 漢堡選單：由上往下排＋上方留出頁首/關閉鈕空間（原 center 會把第一項「首頁」推到畫面外且無法捲回） */
  .jp-menu-overlay{justify-content:flex-start;
    padding:88px calc(20px + env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
  .jp-menu-cta-group{margin-top:28px;gap:12px}

  /* ② 頁尾三顆 CTA 等寬置中（實測 176/176/223px：「加 LINE 諮詢」字多被撐寬）
     .jp-btn 的 padding 是 !important，故左右內距需同樣 !important 覆蓋 */
  .jp-foot-cta-group{align-items:center}
  .jp-foot-cta{width:200px;padding-left:0!important;padding-right:0!important;text-align:center}
}

/* ============================================================
 * 全站斷行總修正（2026-06-04，第二波）
 * 客戶反饋「每一頁都有斷行問題」：標題斷在奇怪處、末行孤字、
 * 數字+單位被拆、詞被拆兩行（連 品牌「錦屏」都被拆 小錦/屏）。
 * 上一波只 scope 少數內頁 class → 漏掉多數區塊標題與三個內頁 hero。
 * 本塊改為「全站所有 heading 元素」一律套用，根治：
 *  ① word-break:keep-all → 兩漢字間不斷，只在標點處換行（詞不拆）
 *  ② text-wrap:balance   → 多行字數平均、消滅末行單字孤行
 *  ③ line-break:strict   → 標點不落行首
 * 走全域 jp-anim.css（7 頁共用），不碰 Bricks 內容、不動動效。
 * ============================================================ */
.brxe-heading,
.brxe-heading .bricks-heading-text,
.bricks-button,
h1,h2,h3,h4,h5,h6{
  word-break:keep-all;
  -webkit-line-break:strict;
  line-break:strict;
  text-wrap:balance;
  overflow-wrap:break-word;       /* 萬一單一語段超欄寬，仍允許收進視口、不撐版 */
}
/* hero stagger 主標已逐字拆 span（.jp-ch），balance 不作用於它 → 維持原本
   nowrap/clamp 處理（見 jp-pages.css）。此處只確保非 stagger heading 生效。 */
.jp-stagger,.jp-stagger .bricks-heading-text{text-wrap:initial}
/* 數字+單位不可拆行（NT$1,500／120分／pH7.5／40 人 等）：build 端用
   <span class="jp-nb"> 包住；此處宣告 nowrap。未包者靠 keep-all 也大致不拆。 */
.jp-nb{white-space:nowrap}
/* fixed 漢堡（右上）/ logo（左上）佔角 → 給全寬區塊標題左右安全內距，
   避免長標題端點貼到漢堡按鈕（僅桌機需要，手機標題本來就有 padding）。 */
@media (min-width:769px){
  .jp-page-sec > .brxe-heading,
  .jp-page-sec > .brxe-container > .brxe-heading{
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:64px;            /* 讓出右上漢堡的視覺呼吸 */
  }
  /* ⚠️ 2026-06-09 置中真根因修正（瀏覽器像素級量測查出）：
   * 上面那條漢堡安全留白是「單邊」（左 0、右 64px）。對「置中」標題而言，
   * text-align:center 是在「扣掉右 64px 的內容區」裡置中 → 中軸往左偏 32px
   * （news「最新消息」實測偏左 36px ＝ 32 + letter-spacing 尾隙約 3-4px）。
   * 先前 scan 量盒子中心（width:100% 盒子中心恆等父中心）看不到此偏移、一直 PASS。
   * 修法：對「置中標題」改成左右對稱 64px，中軸回正中央。右側呼吸留白照樣保留。
   * 涵蓋：① .jp-ctr > heading（含巢狀在 container 裡的單篇頁首/兩處終曲，因 .jp-ctr 掛在
   *   container 上，蓋過原 `.jp-page-sec > .brxe-container > .brxe-heading` 那條的右單邊）；
   *   ② .jp-section-label（既有置中語意標）。
   * 刻意靠左區（ledger/timeline/info facts/餐飲菜單/圖文並排三章/sidebar 等）沒掛 .jp-ctr，不受影響。 */
  .jp-ctr > .brxe-heading,
  .jp-ctr > .brxe-container > .brxe-heading,
  .jp-section-label{
    padding-left:64px !important;
    padding-right:64px !important;
  }
  /* ⚠️ 2026-06-09 補充（Range 文字墨框量法第二輪查出）：還有一批「整段置中」section
   * 的刊頭大標/詩句沒掛 .jp-ctr/.jp-section-label（直接 align:center），同樣吃單邊 R64
   * 被推左 32px（textOff=-32）。這些 section 本質是置中設計、標題在中央根本不會貼右上漢堡，
   * 所以「移除右 64、左右歸 0」最乾淨（回滿欄寬置中）。
   * ✅ 精準列舉「置中 section」，刻意左對齊 section（ledger/route/finale-d2/dining-ala/
   *    info 各左標/圖文三章）不在清單 → 零誤傷。
   * 涵蓋元素＝這些 section 的直接 heading + text-basic（沉浸帶 bn-title/bn-desc 是 text-basic）。 */
  .jp-band > .brxe-heading, .jp-band .jp-bn-title, .jp-band .jp-bn-desc,
  .jp-breath > .brxe-heading, .jp-breath > .brxe-container > .brxe-heading,
  .jp-dining-hero > .brxe-heading, .jp-dining-hero > .brxe-container > .brxe-heading,
  .jp-story-hero > .brxe-heading, .jp-story-hero > .brxe-container > .brxe-heading,
  .jp-story-pull > .brxe-heading, .jp-story-pull > .brxe-container > .brxe-heading,
  .jp-info-hero > .brxe-heading, .jp-info-hero > .brxe-container > .brxe-heading,
  .jp-contact-band > .brxe-heading, .jp-contact-band > .brxe-container > .brxe-heading{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* B（潔癖）：letter-spacing 在置中時尾字後仍留一個字距（news h1 為 6px）。
   * 置中把總寬平分到左右 → 可見字形左偏約「半個字距」（≈3px）。
   * 補一個約半字距的 text-indent（3px）把整行往右推回抵消，剛好回正。
   * 用具體 px（非 0.5em，em 在大字級會過量、反而右偏）。 */
  .jp-ctr > .brxe-heading{ text-indent:3px; }
}

/* ============================================================
 * 手機橫向溢出修正（2026-06-04）
 * 首頁/湯泉/環境/餐飲/資訊在 ≤768px 有 brxe-container 圖文交錯區
 * 沒收成單欄、整塊容器維持 ~1100px → documentElement.scrollWidth 溢出。
 * 修法：照 story/news 兩頁的乾淨斷點邏輯——容器收滿視口寬、所有
 * 2 欄 grid 收單欄、圖片寬度 100%、間距收斂。不動桌機（≥769px 全不套用）。
 * 走全域 jp-anim.css（7 頁共用），0 code、未碰 Bricks 內容、未動動效。
 * ============================================================ */
@media (max-width:768px){
  /* 1｜所有 Bricks 容器收滿視口寬，不再撐出內容寬（首頁 width:800/1100px 元兇） */
  .brxe-container{max-width:100%!important;width:100%!important}
  /* 2｜首頁圖文交錯 brx-grid（gtc:1fr 1fr）收單欄 */
  .brxe-container.brx-grid{grid-template-columns:1fr!important;gap:32px!important}
  /* 3｜內頁各專屬 2 欄 grid 一律收單欄（湯泉/環境/資訊） */
  .jp-senses-grid,
  .jp-seasons-row,
  .jp-route-line,
  .jp-info-cards,
  .jp-room-row,
  .jp-rooms-list{grid-template-columns:1fr!important}
  /* 4｜交錯區/卡片內圖片滿欄、不溢出 */
  .brxe-container img,
  .brxe-container .brxe-image,
  .brx-grid img,.brx-grid .brxe-image{max-width:100%!important;width:100%!important;height:auto}
  /* ⚠️ 2026-07-29 手機 RWD ⑥ 真因修正：上面那條「容器內圖片一律 width:100%!important」
   * 會連 Leaflet 圖磚 <img class="leaflet-tile"> 一起吃掉——圖磚的父層
   * .leaflet-tile-container 是 0×0 的定位容器，100% 換算後＝0px，
   * 圖磚全部被壓成寬 0（實測 9 塊圖磚 HTTP 全 200、naturalWidth 256，
   * 但 getBoundingClientRect().width＝0）→ 地圖呈現整片灰白＝客人看到的「破圖」。
   * 只在 ≤768px 出現，桌機沒這條規則所以正常，與「初始化尺寸」無關。
   * 修法：把 Leaflet 自己管的圖層（圖磚/標記/陰影/控制項）排除在外，回歸 Leaflet inline 尺寸。 */
  .leaflet-container img,
  .leaflet-container .leaflet-tile,
  .leaflet-container .leaflet-marker-icon,
  .leaflet-container .leaflet-marker-shadow,
  .leaflet-container .leaflet-control img{
    max-width:none!important;width:auto!important;height:auto!important;
  }
  /* 5｜避免任何子層 flex 子項以 min-content 撐寬容器 */
  .brxe-container > .brxe-block,
  .brxe-container > .brxe-container{min-width:0!important;max-width:100%!important}
}

/* ============================================================
 * 2026-07-29 R5【一】769–1179px 中段區間橫向溢出修正
 *
 * 實測（Playwright，修改前）：
 *   /        769/820/912 → scrollWidth 1124（cw 769/820/912）
 *   /spring/ 769/820/912 → scrollWidth 1132
 *   /environment/ 769   → scrollWidth 793（另有 1100px 區塊被 overflow:hidden 裁掉半張卡）
 *   /info/        769   → scrollWidth 793
 *   820 寬實測可橫捲 304px ＝ 手機橫拿（667/844/926 皆落在或逼近此區間）看到的破版。
 *
 * ⚠️ 真兇更正：R4 記的「元凶是 .jp-hero-bg／.jp-kb（Ken Burns 放大）」不成立。
 *   .jp-hero 自己有 overflow:hidden，inset:-4% 的放大層被完整裁掉，
 *   逐元素掃描（right > clientWidth）從未把它列進溢出清單。
 *   真正的元凶是 **Bricks 元素輸出的 inline 固定像素寬**
 *   （#brxe-xxxxxx{width:1100px / 1080px / 800px / 760px}，ID 權重 100），
 *   容器不會隨視窗縮 → 視窗一旦小於「容器寬＋section 左右 padding」就爆。
 *   ≤768px 有既有那條 .brxe-container{max-width:100%!important} 擋著，
 *   ≥1180px 視窗夠寬本來就裝得下，中間這段沒有任何規則管 ＝ 破口。
 *
 * 修法：把 ≤768 那條「容器不得寬於可用寬」的既有做法，原樣延伸到 769–1179。
 *   刻意用 (min-width:769px) and (max-width:1179px) 雙邊界包死：
 *     ≤768  完全不進這個 block（既有手機表現一格不動）
 *     ≥1180 完全不進這個 block（桌機 1440 一格不動）
 *   刻意不做的事：不改任何 grid 欄數、不改 gap、不改字級、不改 padding
 *   → 版面比例維持設計原樣，只是整條軌道跟著視窗縮。
 *
 * 三檔 rail 保護：上面那條是 !important，會蓋掉 jp-pages.css 裡「非 !important」
 *   的敘事軌（.jp-band-note / .jp-scout-head / .jp-menugal-bar / .jp-dh-banner），
 *   讓 760/1080 的閱讀行長在這區間被放寬 → 故於同一 block 內用 !important 原值補回，
 *   維持三檔 rail token（1180/1080/760）不被本次修正破壞。
 * ============================================================ */
@media (min-width:769px) and (max-width:1179px){
  /* 1｜解除 Bricks inline 固定 px 寬，容器一律不寬於可用寬。
   *    ⚠️ 只用 max-width，**不可**照抄 ≤768 那條的 width:100%!important：
   *    實測（1179px）width:100% 會把設計上該是 1080/1100 的內容軌硬撐到 1131，
   *    等於破壞三檔 rail token。max-width 只在「裝不下」時才收，裝得下就維持原寬。 */
  .brxe-container{max-width:100%!important}
  .brxe-container > .brxe-block,
  .brxe-container > .brxe-container{min-width:0!important;max-width:100%!important}

  /* 2｜grid／flex 子項解除「自動最小尺寸」。
   *    1fr ＝ minmax(auto,1fr)，auto 這一側取的是子項的 min-content；
   *    全站 heading 掛 word-break:keep-all（2026-06-04 斷行總修正）＝長中文標題
   *    整串不可斷，min-content 就是整串寬 → 軌道被撐回原寬、抵銷第 1 條。
   *    ＝ 2026-07-29 R2 在 320px 查到的同一個機制。
   *    這裡不改欄數、不改 gap、不改 grid-template（版面比例不動），
   *    只把子項的自動最小值歸零；標題改由既有的 overflow-wrap:break-word 換行收容。
   *    （做法與 ≤768 那條 .brxe-container > .brxe-block{min-width:0} 同一套路） */
  .jp-senses-grid > *,.jp-seasons-row > *,.jp-route-line > *,.jp-info-cards > *,
  .jp-room-row > *,.jp-rooms-list > *,.jp-fac-grid > *,.jp-gallery-grid > *,
  .jp-dish-grid > *,.jp-menu-grid > *,.jp-menugal > *,.jp-ala-grid > *,
  .jp-relic-grid > *,.jp-source-row > *,.jp-dining-creed-grid > *,
  .jp-price-grid > *,.jp-feat-grid > *,.jp-info-panel > *,.jp-dining-space > *,
  .brx-grid > *{
    min-width:0!important;
  }

  /* 3｜三檔 rail 原值補回（防第 1 條的 !important 放寬敘事軌）。
   *    ⚠️ 一定要包 min(100%, rail)，不能直接寫 rail 值：
   *    直接寫 760px 會把 rail 釘死，在 769px 視窗（可用寬僅 705）反而自己造成溢出
   *    ——實測 /environment/ 的 .jp-scout-head 就是這樣被釘成 760、sw 卡在 793 不降。
   *    min() 的語意才對：裝得下維持 rail 原寬，裝不下才收到可用寬。 */
  .jp-band-note,.jp-scout-head,.jp-menugal-bar{max-width:min(100%,var(--jp-rail-text,760px))!important}
  .jp-dining-hero .jp-dh-banner{max-width:min(100%,var(--jp-rail-base,1080px))!important}

  /* 4｜已知記錄：第 1 條的 !important 也會蓋掉 Bricks 元素自己輸出的 inline
   *    `#brxe-xxxxxx{max-width:1080px}`（實測 /spring/ .jp-senses-grid 即是此形），
   *    導致「可用寬 > 1080」時該軌由 1080 放寬到父層寬。
   *    發生條件＝視窗 > 1144px（1080 ＋ section 左右 padding 64）且 < 1180，
   *    ＝寬度僅 35px 的夾縫，且最大偏差 20px；手機／平板不可能落在這裡，
   *    桌機落在這裡也只是內容軌多 20px。權衡後接受，不為此再加一層 !important 追蓋。 */
}

/* ============================================================
 * 站台全站頁尾 footer（2026-06-05）
 * 由 jp-anim.js 注入 body 末端，7 頁一致。
 * 暗底沉穩收尾、低彩度，CIS 印記用銀杏葉（2026-06-05 貓頭鷹移除）。
 * ============================================================ */
.jp-site-footer{
  background:var(--jp-night,#1F1B17);color:var(--jp-mist,#FAF7F2);
  /* 2026-07-29 R5【三】底部 env() 目前為 0px＝與原本 40px 等值；
     日後改 viewport-fit=cover 時，頁尾三顆 CTA 才不會被 iPhone home indicator 壓到 */
  padding:88px calc(24px + env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));
  position:relative;
}
.jp-foot-inner{max-width:1080px;margin:0 auto;text-align:center}
/* 頁尾印記：2026-06-05 第三輪用戶裁定——此位置不放任何圖示，整塊移除、版面收順 */
.jp-foot-brand{margin-bottom:44px}
/* 2026-06-29 頁尾品牌可點回首頁（純文字、無 LOGO 圖）：去連結底線、加 hover 微亮 */
a.jp-foot-home{display:inline-block;text-decoration:none;cursor:pointer;
  transition:opacity .35s var(--jp-ease,ease),transform .35s var(--jp-ease,ease)}
a.jp-foot-home:hover{opacity:0.82;transform:translateY(-2px)}
a.jp-foot-home:hover .jp-foot-en{color:rgba(250,247,242,0.78)}
a.jp-foot-home:focus-visible{outline:1px solid rgba(250,247,242,0.5);outline-offset:6px}
.jp-foot-zh{
  display:block;font-family:"Noto Serif TC",serif;font-size:26px;font-weight:400;
  letter-spacing:0.18em;color:var(--jp-mist,#FAF7F2);
}
.jp-foot-en{
  display:block;margin-top:8px;font-family:"Cormorant Garamond",serif;font-size:11px;
  font-style:italic;letter-spacing:0.4em;text-transform:uppercase;color:rgba(250,247,242,0.5);
}
/* 2026-07-07 頁尾正式 CI 完整標誌（反白白版，徽章+書法+英文，置中） */
.jp-foot-logo{display:block;width:auto;height:clamp(122px,13vw,168px);margin:0 auto;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.28));transition:opacity .35s var(--jp-ease,ease)}
a.jp-foot-home:hover .jp-foot-logo{opacity:0.9}
.jp-foot-cols{
  display:flex;justify-content:center;gap:64px;flex-wrap:wrap;
  margin-bottom:52px;text-align:center;
}
.jp-foot-col{display:flex;flex-direction:column;gap:8px;max-width:300px}
.jp-foot-col span{font-family:"Noto Sans TC",sans-serif;font-size:14px;font-weight:300;
  line-height:1.7;color:rgba(250,247,242,0.72)}
.jp-foot-col .jp-foot-h{
  font-family:"Cormorant Garamond","Noto Serif TC",serif;font-size:12px;font-style:italic;
  letter-spacing:0.28em;text-transform:uppercase;color:#C9A86A;margin-bottom:6px;
}
.jp-foot-col a{color:rgba(250,247,242,0.9);text-decoration:none;border-bottom:1px solid rgba(201,168,106,0.4);transition:color 400ms var(--jp-ease)}
.jp-foot-col a:hover{color:#C9A86A}

/* ---------- 2026-07-27 第二輪修正 ⑤：隱形內文連結 ----------
 * 全站「粉絲團 / @spa_time」共 6 處要能點，但客人要求「連結顏色與周圍文字完全相同、不變藍不變品牌色、不要底線」。
 * 頁尾兩處落在 .jp-foot-col a 的管轄內（金色 border-bottom + 提亮色），故用 !important 蓋掉；
 * /info/ 四處在 Bricks text-basic 內，繼承所在段落顏色即可。hover 只給極輕微透明度變化，不換色。
 * 用途單一：只掛在這 6 個 <a>，不影響其他連結（頁尾電話 tel: 仍維持原本金線樣式）。 */
.jp-inline-link{
  color:inherit !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  transition:opacity 300ms var(--jp-ease);
}
.jp-inline-link:hover{ color:inherit !important; opacity:0.72 }
/* footer CTA 群組：線上預約（實心）+ 電話預約（描邊），並排、手機堆疊 */
.jp-foot-cta-group{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
@media (max-width:560px){ .jp-foot-cta-group{flex-direction:column;gap:14px} }
.jp-foot-copy{
  margin-top:56px;padding-top:28px;border-top:1px solid rgba(250,247,242,0.12);
  font-family:"Noto Sans TC",sans-serif;font-size:12px;font-weight:300;letter-spacing:0.08em;
  color:rgba(250,247,242,0.42);
}
/* 製作署名（2026-06-05 用戶指示加）：比版權字再小一階、不搶眼、同 footer 文字色系 */
.jp-foot-credit{
  margin-top:8px;font-family:"Noto Sans TC",sans-serif;font-size:11px;font-weight:300;
  letter-spacing:0.08em;color:rgba(250,247,242,0.42);
}
@media (max-width:768px){
  .jp-site-footer{padding:64px calc(22px + env(safe-area-inset-right,0px)) calc(34px + env(safe-area-inset-bottom,0px)) calc(22px + env(safe-area-inset-left,0px))}
  .jp-foot-cols{gap:40px;flex-direction:column;align-items:center;margin-bottom:40px}
  .jp-foot-col{max-width:100%}
  .jp-foot-zh{font-size:22px}
}

/* ============================================================
 * 置中對齊修正（2026-06-05 第四輪，用戶 DevTools 實測對齊報告 8 項）
 * 根因：小標 label 與卡片內文是 text-basic／heading，渲染成 shrink-to-fit
 * 寬度 + text-align:start，父容器雖 align-items:center 置中了「元素盒子」，
 * 但元素「內部文字」仍靠左 → 視覺偏左。
 * 解法：對掛了語意 class 的元素強制 width:100% + text-align:center，
 * 讓盒子撐滿欄寬、內部文字置中。只掃語意 class（jp-section-label/jp-card-text），
 * 不用寬泛 selector，圖文並排三章文字欄的刻意左對齊不受影響。
 * 走全域 jp-anim.css，0 code、不動動效。
 * ============================================================ */
/* ① 留白章節 MOUNTAIN·MIST·SPRING／② THE BATHS+導引備註／⑦ SLOW TIME／⑧ 電話預約 03-584-1199 */
.jp-section-label,
.jp-section-label .bricks-text-basic,
.jp-section-label .bricks-heading-text{
  width:100%!important;
  text-align:center!important;
}

/* ============================================================
 * 全站置中根治通則（2026-06-09）
 * 根因：Bricks heading/text-basic 渲染成 shrink-to-fit 窄框 + text-align:start，
 *   父容器即使 align-items:center 也只置中「盒子」、框內文字仍靠左 → 視覺偏左。
 *   先前逐個補 jp-section-label 治標，每新增區塊就重犯。
 * 根治＝box 層級通則 class `.jp-ctr`：掛在「該整段置中的內容容器」上，
 *   其「直接子層」的 heading/text-basic/text-link 一律 width:100%（撐滿父容器）+ text-align:center，
 *   往後新增子元素自動置中、不必再逐個掛 jp-section-label。
 * ⚠️ 只作用於「直接子層」(>)，不向下穿透卡片/巢狀區塊（避免誤傷刻意左對齊的內層）。
 *   刻意左對齊區（圖文並排章節 jp-d2／ledger／timeline／info facts／卡片內文／sidebar 模組）
 *   一律「不掛 .jp-ctr」即完全不受影響。
 * ============================================================ */
.jp-ctr > .brxe-heading,
.jp-ctr > .brxe-text-basic,
.jp-ctr > .brxe-text-link,
.jp-ctr > .brxe-heading > .bricks-heading-text,
.jp-ctr > .brxe-text-basic > .bricks-text-basic{
  width:100%!important;
  text-align:center!important;
}
/* ③ 三張湯屋卡片內文（heading + 標籤 + 描述）置中 */
.jp-card-text,
.jp-card-text .bricks-text-basic,
.jp-card-text .bricks-heading-text{
  width:100%!important;
  text-align:center!important;
}
/* ③ 卡片容器自身內容垂直軸置中（feature_card 的 block） */
.jp-price-grid > .jp-card{
  align-items:center!important;
  text-align:center!important;
}

/* ============================================================
 * Footer 三欄等寬置中修正（2026-06-05 第四輪，報告 ④⑤⑥）
 * 根因：.jp-foot-col 預設 flex:0 1 auto → 各欄依文字寬度（126/230/204px）
 * 各自縮放，justify-content:center 雖把整組置中、但三欄寬度不一＝視覺偏移。
 * 解法：三欄 flex:1 1 0 等寬 + min-width:0 防溢出 + 欄內文字置中。
 * 「預約泡湯」按鈕 display:block + margin:0 auto + width:fit-content 強制水平置中。
 * ============================================================ */
.jp-foot-col{
  flex:1 1 0!important;
  min-width:0;
  align-items:center;
  text-align:center;
}
.jp-foot-cta-group{
  margin:0 auto;
}
/* 手機單欄時不必等寬撐滿，回到內容寬置中（沿用既有 RWD flex-direction:column） */
@media (max-width:768px){
  .jp-foot-col{flex:0 1 auto!important}
}

/* ---------- 圖片 lazy-load fade-in（全站，消除捲動先見空白/閃黑方塊）----------
   照片容器底色從純黑 --jp-night 改為貼近照片的中性暖灰調，過渡更順、不再閃白／閃黑；
   圖片載入完成 jp-pages/jp-anim.js 會加 .jp-img-in 觸發 fade-in。 */
:root{ --jp-imgbg:#3a352e; } /* 中性暖灰，貼近溫泉/山林照片主色，介於米白與夜黑之間 */
.jp-room-thumb,.jp-post-thumb,.jp-feature-img,.jp-vtile,.jp-sh-img{ background:var(--jp-imgbg) }
.jp-imgfade{ opacity:0; transition:opacity 900ms var(--jp-ease) }
.jp-imgfade.jp-img-in{ opacity:1 }

/* ---------- 尊重使用者「減少動態」偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .jp-hero::after,.jp-hero > .jp-fog,.jp-finale::after,
  .jp-scroll-hint .jp-sh-line::after{animation:none!important}
  .jp-reveal,.jp-fade,.jp-stagger .jp-ch{opacity:1!important;transform:none!important}
  .jp-imgfade{opacity:1!important;transition:none!important}
}