/* ============================================================
 * 錦屏美人湯館 — 內頁專屬版型層（湯泉 / 環境）
 * 還原 網站DEMO/內頁設計_v1/湯泉.html + 環境.html 的「逐頁差異化骨架」。
 * 設計策略：跨頁延續層（色/字/霧氣/chrome/間距）沿用首頁 jp-anim.css；
 *           本檔只放「每頁各長各的」版型骨架。
 * 掛在 Bricks 原生元素的 jp-* class 上，不嵌 HTML、不影響可視覺編輯。
 * 變數沿用 jp-anim.css 的 :root（--jp-* / --jp-ease）。
 * ============================================================ */
:root{
  --jp-steam:#F4EDE4;
  --jp-paper:#EDE7DC;
  --jp-ink-soft:#5C5852;
  --jp-cedar:#5C4434;
  --jp-mmist:#D8D2C8;
  /* ── 內容軌 rail token（2026-06-10 全站寬度標準化）──
     全站每個 section 的「最外層內容軌」只准用這三檔之一。
     並排版型內部的子欄（左圖右文文字欄、卡片內部、特色圖、麵包屑對齊軌）可另有寬度，
     但整段外框軌必須對齊三檔。驗收：量每個 section 最外層 wrapper max-width，凡不在 {1180,1080,760} 即 FAIL。 */
  --jp-rail-wide:1180px;  /* 寬版：圖文網格、卡片列、價目表、沉浸帶、雙欄面板 */
  --jp-rail-base:1080px;  /* 標準：一般區塊預設寬度 */
  --jp-rail-text:760px;   /* 敘事：純文字段落、置中導言、引言、ledger */
}

/* ============================================================
 * 2026-07-29 R5【二】視窗高度單位：全站 vh 高度一律補一行 svh
 *
 * 現況盤點（本檔 11 處，jp-anim.css 0 處，JS 0 處，全站無 100vh）：
 *   .jp-spring-hero 88vh／.jp-band 92vh(手機 64vh)／.jp-pano 78vh／
 *   .jp-breath 80vh(手機 60vh)／.jp-sh-img 60vh／.jp-ds-img 46vh(≤980 42vh)／
 *   .jp-story-hero 78vh／.jp-info-hero 46vh
 *
 * 問題：iOS Safari 的 vh ＝ large viewport（網址列/工具列**收起後**的高度）。
 *   真機初次進頁工具列是展開的，實際可視高比 vh 換算值少約 100–130px，
 *   所以「92vh 的沉浸帶」在真機上第一眼會超出畫面、底部文字被切一截。
 *
 * ⚠️ 選 svh 不選 dvh（與派工指示不同，理由如下）：
 *   dvh 會隨工具列展開/收合**即時改變**，捲動途中整條 section 高度變動 →
 *   下方所有內容跟著位移，會出現「捲一捲版面自己跳」——那正是要避免的症狀，
 *   而且比原本 vh 更糟（vh 至少是靜態的、不跳）。
 *   svh ＝ small viewport（工具列**展開時**的高度），是靜態值、不隨捲動變動，
 *   且保證「設計上想讓人一眼看完的一屏」在最壞情況也裝得下。
 *   這幾處全是裝飾性滿版圖帶與 hero，要的正是「一定裝得下、不要跳」。
 * 寫法：height:92vh; height:92svh; ——不認得 svh 的舊瀏覽器落回 vh，
 *   認得的吃 svh。桌機三種單位等值 ⇒ 1440 零變化；
 *   Chromium 無動態工具列 ⇒ Playwright 各寬度量測亦零變化（本項只在真機顯現）。
 * ============================================================ */

/* 內頁的 Bricks section 預設會吃佈景 padding，這層用 jp-page-* class 精準覆蓋 */
.jp-page-sec{position:relative}

/* =========================================================
   共用：seal（英字斜體小標）/ 章節標準三件套
   ========================================================= */
.jp-seal .bricks-heading-text,
.jp-seal{ }

/* =========================================================
   湯泉 1｜半高 split hero（左圖右文，非滿版）
   Bricks 結構：section.jp-spring-hero > [ block.jp-sh-img(內含 image) , block.jp-sh-text ]
   ========================================================= */
.jp-spring-hero{display:grid !important;grid-template-columns:55% 45%;min-height:88vh;min-height:88svh;overflow:hidden}
.jp-spring-hero > .brxe-container,
.jp-spring-hero > .brxe-block{height:100%}
.jp-sh-img{position:relative;overflow:hidden;background:var(--jp-imgbg);padding:0 !important}
.jp-sh-img .brxe-image,.jp-sh-img figure,.jp-sh-img img{width:100%;height:100%;margin:0}
.jp-sh-img img{object-fit:cover;object-position:center 45%;animation:jpKenburns 24s ease-in-out infinite alternate}
.jp-sh-img::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(120deg,rgba(15,12,10,0.45) 0%,rgba(31,27,23,0.20) 60%,rgba(15,12,10,0.35) 100%)}
.jp-sh-img::after{content:"";position:absolute;inset:-10%;z-index:3;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.013' numOctaves='2' seed='4'/><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.20;mix-blend-mode:screen;animation:jpDrift 34s ease-in-out infinite alternate}
.jp-sh-text{background:var(--jp-steam) !important;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(40px,6vw,96px) !important}

/* =========================================================
   湯泉 2｜感官前奏：三詞橫列（無圖）
   ========================================================= */
.jp-senses{background:var(--jp-mist-bg,#FAF7F2)}
.jp-senses-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:64px}

/* =========================================================
   湯泉 3｜沉浸帶：全幅貼邊大圖 + 圖上浮註（連續往下沉）
   Bricks：section.jp-band(背景圖) > container.jp-band-note
   ========================================================= */
.jp-band{position:relative;height:92vh;height:92svh;min-height:620px;overflow:hidden;background:var(--jp-night) !important;background-image:none !important}
.jp-band > *{position:relative;z-index:3}
/* 背景圖層（JS 注入 .jp-band-bg），進場緩放 + 暗→亮 */
.jp-band .jp-band-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:brightness(0.7);transform:scale(1.06);opacity:0;
  transition:filter 2200ms var(--jp-ease),transform 5000ms var(--jp-ease),opacity 2200ms var(--jp-ease)}
.jp-band.in .jp-band-bg{filter:brightness(0.95);transform:scale(1.0);opacity:1}
/* focal point：背景照主體偏右側＝視覺重心不在中間（雖然文字數學上置中）→ 把 focal 往左挪，
   讓照片主體(THE WINDOW 出水口/NIGHT BATH 紫光湯池)與置中文字的視覺重心對齊。
   值依每張圖主體實際位置定（非盲套）；桌機/手機分開（手機裁切更窄、主體要再往中間拉）。
   AFTERNOON 主體本來就置中＝不加 class、維持 background-position:center。 */
.jp-band.jp-focal-window .jp-band-bg{background-position:40% 50%}  /* spring_indoor_night：出水口在左中(約33%) */
.jp-band.jp-focal-night  .jp-band-bg{background-position:35% 50%}  /* spring_night_purple：紫光湯池在左中(約28-35%) */
.jp-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 58% at 50% 50%,rgba(15,12,10,0.52) 0%,rgba(15,12,10,0.30) 55%,rgba(15,12,10,0.18) 100%),
            linear-gradient(180deg,rgba(15,12,10,0.30) 0%,transparent 40%,transparent 62%,rgba(15,12,10,0.42) 100%);
  opacity:0;transition:opacity 2200ms var(--jp-ease)}
.jp-band::after{content:"";position:absolute;inset:-8%;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.011' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  opacity:0;mix-blend-mode:screen;animation:jpDrift 38s ease-in-out infinite alternate;transition:opacity 2200ms var(--jp-ease)}
.jp-band.in::before{opacity:1}
.jp-band.in::after{opacity:0.16}
.jp-band-note{align-self:center !important;width:100%;max-width:var(--jp-rail-text);margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}
/* 三層階層：英標 → 標題詞 → 描述句，間距與分隔線把層級拉開 */
.jp-band-note .jp-bn-seal{display:block;width:100%;text-align:center;
  text-shadow:0 1px 14px rgba(15,12,10,0.55)}
.jp-band-note .jp-bn-title{display:block;width:100%;text-align:center;margin-top:18px;
  text-shadow:0 2px 20px rgba(15,12,10,0.6)}
/* 標題下細分隔線（與站內 seal 語彙一致的暖金細線） */
.jp-band-note .jp-bn-title::after{content:"";display:block;width:46px;height:1px;margin:22px auto 0;
  background:rgba(201,168,106,0.85)}
.jp-band-note .jp-bn-desc{display:block;width:100%;text-align:center;margin-top:24px;
  text-shadow:0 1px 16px rgba(15,12,10,0.55)}
.jp-band-note .jp-bn-title .bricks-heading-text,
.jp-band-note .jp-bn-desc .bricks-heading-text{text-align:center !important;width:100%}

/* =========================================================
   湯泉 4｜湯屋類型：直式堆疊清單（縮圖 + 文字 + 規格）
   Bricks：section.jp-rooms > [ head , container.jp-rooms-list > block.jp-room-row * N ]
   ========================================================= */
.jp-room-row{display:grid !important;grid-template-columns:260px 1fr auto;gap:48px;align-items:center;
  padding:44px 0 !important;border-top:1px solid var(--jp-mmist);background:transparent !important}
.jp-rooms-list > .brxe-block:last-child .jp-room-row,
.jp-rooms-list > .brxe-container:last-child{border-bottom:1px solid var(--jp-mmist)}
.jp-room-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--jp-imgbg);padding:0 !important}
.jp-room-thumb .brxe-image,.jp-room-thumb img{width:100%;height:100%;margin:0}
.jp-room-thumb img{object-fit:cover;filter:saturate(0.95);transition:transform 6000ms var(--jp-ease)}
.jp-room-row:hover .jp-room-thumb img{transform:scale(1.05)}
.jp-room-spec{text-align:right !important}

/* =========================================================
   湯泉 5｜帳簿式價目（ledger）
   Bricks：section.jp-ledger > container.jp-ledger-inner >
           [ head , block.jp-led-line * N , note ]
   ========================================================= */
.jp-ledger-inner{max-width:var(--jp-rail-text) !important;margin:0 auto !important;width:100%}
.jp-led-line{display:flex !important;align-items:baseline;justify-content:space-between;gap:24px;
  padding:26px 0 !important;border-bottom:1px solid var(--jp-mmist);background:transparent !important}
.jp-led-line:first-of-type{border-top:1px solid var(--jp-mmist)}
.jp-led-lbl{flex:0 0 auto}
.jp-led-dots{flex:1 1 auto;border-bottom:1px dotted var(--jp-mmist);transform:translateY(-4px);min-width:30px}
.jp-led-price{flex:0 0 auto;white-space:nowrap;text-align:right}

/* =========================================================
   環境 1｜超寬 panorama 橫幅 hero（壓低高度拉滿寬度）
   Bricks：section.jp-pano(背景圖) > container.jp-pano-content（左下對齊）
   ========================================================= */
.jp-pano{position:relative;height:78vh;height:78svh;min-height:560px;overflow:hidden;background:var(--jp-night) !important}
.jp-pano{background-image:none !important}
.jp-pano-bg{position:absolute;inset:-4%;z-index:0;overflow:hidden;will-change:transform}
.jp-pano-bg .jp-pano-kb{width:100%;height:100%;background-image:var(--jp-pano-img);
  background-size:cover;background-position:center 55%;animation:jpKenburns 26s ease-in-out infinite alternate}
.jp-pano::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,12,10,0.30) 0%,transparent 30%,transparent 55%,rgba(15,12,10,0.58) 100%)}
.jp-pano::after{content:"";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.20;mix-blend-mode:screen;animation:jpDrift 36s ease-in-out infinite alternate}
.jp-pano-content{position:relative;z-index:5;height:100%;display:flex !important;flex-direction:column;
  justify-content:flex-end;align-items:flex-start;
  padding:0 clamp(32px,6vw,96px) clamp(56px,7vh,88px) !important;text-align:left !important}

/* =========================================================
   環境 2｜開場定位：置中一句 + 座標
   ========================================================= */
.jp-coords{display:flex !important;justify-content:center;gap:clamp(40px,8vw,96px);flex-wrap:wrap}

/* =========================================================
   環境 3｜視野網格：非對稱 masonry
   Bricks：section.jp-vista > container.jp-vista-grid > block.jp-vtile.jp-t1..t5（內含 image + cap heading）
   ========================================================= */
.jp-vista-grid{display:grid !important;grid-template-columns:repeat(12,1fr);grid-auto-rows:14px;gap:28px;
  max-width:var(--jp-rail-wide) !important;margin:0 auto !important;width:100%}
.jp-vtile{position:relative;overflow:hidden;background:var(--jp-imgbg) !important;padding:0 !important}
.jp-vtile .brxe-image,.jp-vtile img{width:100%;height:100%;margin:0}
.jp-vtile img{object-fit:cover;filter:saturate(0.95);transition:transform 6000ms var(--jp-ease)}
.jp-vtile:hover img{transform:scale(1.05)}
.jp-vtile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(15,12,10,0.55) 100%)}
.jp-vtile .jp-vcap{position:absolute;left:24px;bottom:22px;z-index:2}
.jp-t1{grid-column:span 7;grid-row:span 24}
.jp-t2{grid-column:span 5;grid-row:span 16}
.jp-t3{grid-column:span 5;grid-row:span 18;align-self:end}
.jp-t4{grid-column:span 4;grid-row:span 26}
.jp-t5{grid-column:span 8;grid-row:span 18}

/* =========================================================
   環境 4｜四季橫帶：水平四格時序（暗底）
   Bricks：section.jp-seasons(暗底) > container.jp-seasons-inner > [ head , container.jp-seasons-row > block.jp-season * 4 ]
   ========================================================= */
.jp-seasons{position:relative;overflow:hidden;background:var(--jp-night) !important}
.jp-seasons::before{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.009' numOctaves='2' seed='7'/><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.08;mix-blend-mode:screen;animation:jpDrift 42s ease-in-out infinite alternate}
.jp-seasons > *{position:relative;z-index:2}
.jp-seasons-row{display:grid !important;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(250,247,242,0.12)}
.jp-season{background:var(--jp-night) !important;padding:48px 28px !important;text-align:center}

/* =========================================================
   環境 5｜一句留白：暮色 panorama 喘息（沿用 band 機制）
   Bricks：section.jp-breath(背景圖) > container（置中單句）
   ========================================================= */
.jp-breath{position:relative;height:80vh;height:80svh;min-height:520px;overflow:hidden;background:var(--jp-night) !important;background-image:none !important;
  display:flex !important;align-items:center;justify-content:center}
.jp-breath .jp-band-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:brightness(0.65);transform:scale(1.06);opacity:0;
  transition:filter 2200ms var(--jp-ease),transform 5000ms var(--jp-ease),opacity 2200ms var(--jp-ease)}
.jp-breath.in .jp-band-bg{filter:brightness(0.9);transform:scale(1.0);opacity:1}
.jp-breath::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,rgba(15,12,10,0.4) 0%,rgba(31,27,23,0.18) 55%,rgba(15,12,10,0.4) 100%)}
.jp-breath > *{position:relative;z-index:2}

/* =========================================================
   環境 6｜交通指引：橫向時間軸
   Bricks：section.jp-route > [ head , container.jp-route-line > block.jp-stop * 4 , foot ]
   ========================================================= */
.jp-route-line{display:grid !important;grid-template-columns:repeat(4,1fr);gap:0;position:relative;
  max-width:1080px !important;margin:0 auto !important;width:100%}
.jp-route-line::before{content:"";position:absolute;top:14px;left:12%;right:12%;height:1px;background:var(--jp-mmist);z-index:0}
.jp-stop{text-align:center !important;position:relative;padding:0 12px !important;background:transparent !important}
.jp-stop .jp-dot{width:9px;height:9px;border-radius:50%;background:var(--jp-cedar2);margin:10px auto 28px;position:relative;z-index:2}

/* token aliases（對齊 mockup） */
:root{--jp-mmist:#D8D2C8;--jp-cedar2:#5C4434}

/* =========================================================
   ✦ 中文斷行修正（2026-05-29）
   問題：CJK 文字純照容器寬度斷，常把詞拆兩行、末行單字孤行
        （如標題「一池，溫白如綢」斷成「…如／綢」、感官段「水溫／貼著體溫」）。
   策略：
   (1) line-break:strict — 標點不落行首、避免奇怪斷點
   (2) text-wrap:balance（短詩意句、≤3 行）— 讓每行字數平均、消滅末行孤字
   (3) text-wrap:pretty（較長段落）— 退而求其次也避免末行孤字
   只作用於內頁 jp-* 區塊，不碰 Bricks 其他元素、不影響可編輯。
   ========================================================= */
.jp-page-sec,.jp-spring-hero,.jp-senses,.jp-band,.jp-rooms,.jp-ledger,
.jp-pano,.jp-coords,.jp-vista,.jp-seasons,.jp-breath,.jp-route{
  line-break:strict;
  -webkit-line-break:strict;
  overflow-wrap:break-word;
}

/* 詩意短句（感官三詞 / 沉浸帶浮註 / 四季卡 / 交通站點 / breath 單句）：
   word-break:keep-all → 兩個漢字之間不斷（詞不被拆兩行），
   只在中文標點「，。、」處斷行＝「一句／一個語意講完才換行」。
   配 text-wrap:balance 讓多行平均、不留孤字。clause 長度都短於欄寬，不會溢出。 */
.jp-senses .brxe-text-basic,
.jp-band-note .bricks-heading-text,
.jp-band-note .brxe-heading,
.jp-season .brxe-text-basic,
.jp-stop .brxe-text-basic,
.jp-breath .bricks-heading-text,
.jp-breath .brxe-heading{
  word-break:keep-all;
  text-wrap:balance;
  text-align:center;
}
/* 交通總說明句較長，keep-all 可能撐欄 → 只 balance＋strict 不留孤字 */
.jp-route .brxe-text-basic{
  text-wrap:balance;
  text-align:center;
}

/* 區塊大標（章節標題）也平均分行，避免「同一片山，四種樣\n子」式孤字 */
.jp-senses > * .brxe-heading,
.jp-rooms .brxe-heading,
.jp-ledger .brxe-heading,
.jp-vista .brxe-heading,
.jp-seasons .brxe-heading,
.jp-route .brxe-heading{
  text-wrap:balance;
}

/* hero 標題：拆字 stagger 後 .jp-ch inline-block span 直接掛在 .brxe-heading.jp-stagger 上
   （無 .bricks-heading-text 內層）→ 直接對該元素 nowrap，短標題（6~8 字）強制一行不斷。
   左圖右文 split 文欄寬度足；panorama hero 左下對齊寬度也足。 */
/* 2026-07-08 hero 長標題（美人湯・碳酸氫鈉溫泉 10 字／這裡能泡到什麼）：維持單行 nowrap，
   靠字級下限下修（floor 40→24/26）把長標題縮進欄寬不斷行；配 .jp-stagger.in overflow:visible
   吸收桌機臨界尾字。逐字 stagger 一旦換行會逐字斷成孤字，故選「縮字保單行」而非允許換行。 */
.jp-spring-hero .brxe-heading.jp-stagger,
.jp-pano-content .brxe-heading.jp-stagger,
.jp-spring-hero .brxe-heading.jp-stagger .bricks-heading-text,
.jp-pano-content .brxe-heading.jp-stagger .bricks-heading-text{
  white-space:nowrap;
}
.jp-spring-hero .brxe-heading.jp-stagger .jp-ch,
.jp-pano-content .brxe-heading.jp-stagger .jp-ch{white-space:pre}
/* split hero 文欄寬度有限（45% 欄＋兩側 padding），72px 下 6 字單行會超出被裁切
   → 微縮字級讓整句穩穩單行（pano hero 寬度足、不縮）。視覺仍大器。 */
.jp-spring-hero .brxe-heading.jp-stagger{font-size:clamp(24px,4.4vw,62px) !important}
/* 環境頁 pano hero「這裡能泡到什麼」字級（Bricks inline 為 clamp(40px,6vw,76px)），
   外部 !important 下修下限至 26px，窄螢幕縮字保單行；上限維持 76px。 */
.jp-pano-content .brxe-heading.jp-stagger{font-size:clamp(26px,6vw,76px) !important}

/* hero 內文段（split 右欄 / panorama）：較長，用 pretty 避孤字、靠左不置中 */
.jp-sh-text .brxe-text-basic,
.jp-sh-text p,
.jp-pano-content .brxe-text-basic{
  text-wrap:pretty;
}

/* 房型 / ledger 描述：靠左閱讀，pretty 避孤字即可、不強制置中 */
.jp-room-row .brxe-text-basic,
.jp-led-line .brxe-text-basic{
  text-wrap:pretty;
}

/* 手機窄螢幕：hero stagger 標題維持單行 nowrap（同桌機），靠下方各自 font-size 下修縮字塞欄寬。
   逐字 inline-block span 換行會斷成孤字，故不允許換行、改縮字保單行。 */
@media (max-width:600px){
  .jp-spring-hero .brxe-heading.jp-stagger,
  .jp-pano-content .brxe-heading.jp-stagger,
  .jp-spring-hero .brxe-heading.jp-stagger .bricks-heading-text,
  .jp-pano-content .brxe-heading.jp-stagger .bricks-heading-text{
    white-space:nowrap;
  }
  /* stagger 標題是逐字 inline-block span，text-level 斷行控制（keep-all/balance）對它無效，
     會被當成一顆顆獨立盒子任意換行 → 直接微縮字級讓 8 字標題在手機仍單行不斷。 */
  .jp-pano-content .brxe-heading.jp-stagger{
    font-size:clamp(26px,6vw,40px) !important;
    white-space:nowrap;
  }
  .jp-spring-hero .brxe-heading.jp-stagger{
    font-size:clamp(24px,5.4vw,44px) !important;
    white-space:nowrap;
  }
}

/* ---- 2026-07-29 手機 RWD ⑤：故事頁 Hero 大標「油羅溪畔，小錦屏村的一池湯」防裁切 ----
 * 現況（375/390 Playwright 實測）：字級 32px、white-space:normal、於「，」處折兩行，
 *   375px 下墨框 32→343（視窗 375）、390px 下 32→358，兩者皆未溢出＝目前沒被切。
 * 但字級是 clamp(32px,4.6vw,60px)（Bricks inline），手機端一律吃 32px 下限「不再縮」，
 *   窄機（≤360px）第二行 8 字 ×35px≈280px 就會逼近／超出可用寬（320px 機種只剩 256px）。
 * 修法（照修正單）：手機把下限降到 19px、維持可換行（white-space:normal 已是現況），
 *   並改用會隨視窗縮的 8.2vw ＋ 上限 36px ——
 *   390px 換算＝31.98px（與現行 32px 等同，客人現在看到的大小不變），
 *   375px＝30.8px、360px＝29.5px、320px＝26.2px，越窄越縮、不再卡死 32px。
 * 逐字動畫（.jp-stagger）不套用在本標題（它是 .jp-fade），換行不會斷成孤字；
 * .jp-stagger.in{overflow:visible} 已在 jp-anim.css 生效（2026-07-08），第二行不會被遮。
 */
@media (max-width:768px){
  .jp-story-hero .brxe-heading{font-size:clamp(19px,8.2vw,36px) !important;white-space:normal}
}

/* ---- 2026-07-29 R6：兩處標題「任何字級都不溢出」根治 --------------------
 * 起因：客人真機（手機）回報 /story/ hero 大標與 /news/ 第一則卡片標題
 *   「最上面的文字超出畫面」。上兩輪（⑤⑦）的修法都是同一招——把字級縮到
 *   剛好一行／兩行塞得下（clamp(19px,8.2vw,36px)／20px+lh1.5）。那是算給
 *   100% 字級用的，使用者一開 iOS「放大文字」或 Android Chrome「字型大小」，
 *   前提就沒了；R5 補的 text-size-adjust:100% 只管瀏覽器自動 inflation，
 *   管不到使用者字級偏好，所以擋不住。模擬器不會自己放大字＝永遠驗不出來。
 *
 * 復現（Playwright 注入全站字級 ×1.15/×1.3/×1.5，視窗 320–428，2026-07-29）：
 *   story：×1.3 起爆 → 320 +8px、375 +1px、390 +2px；×1.5 七個寬度全爆（+47～+52px）
 *   news ：×1.5 於 320 爆 → 墨框超出卡片 +32px、超出畫面 +12px
 *   （另測 root font-size 16→18/20/24：兩處數值一格未動，全站字級是 px/clamp
 *     寫死，故「瀏覽器字級偏好」走的是 per-element 放大這條路，不是 rem）
 *
 * 真因兩層，都不是「字級不夠小」：
 *   ① 標題是 flex 子項且 min-width:auto ＝自動最小尺寸取 min-content；全站 heading
 *      掛 word-break:keep-all → min-content ＝整串中文寬。字級一放大，「盒子自己」
 *      就被撐得比視窗還寬（實測 320px 視窗下 boxR 328 > vw 320），文字沒溢出盒子，
 *      是盒子溢出畫面 → 這也是為什麼降 padding、縮字級只能拖延不能根治。
 *   ② 全站既有的 overflow-wrap:break-word 雖能斷長字，卻**不計入 min-content**，
 *      救不了①。要用 overflow-wrap:anywhere——它產生的斷點會計入 min-content。
 *
 * 修法＝min-width:0 拆掉自動最小尺寸 ＋ overflow-wrap:anywhere 讓 min-content 歸零。
 * keep-all 取捨：**保留 keep-all，不解除**。anywhere 只在「這行怎麼都塞不下」時才
 *   啟用任意斷點，正常字級下斷行位置與現在完全相同（實測 ×1.0 墨框逐格等值）；
 *   解除 keep-all 則會在正常字級就把詞拆兩行（如「小錦/屏村」），等於拿回舊病。
 *   「標題超出畫面」比「斷點不完美」嚴重，但這裡兩者不必二選一。
 * 驗收：兩標題 × 320/360/375/390/393/412/428 × 100/115/130/150% ＝ 56 組全過。
 * ------------------------------------------------------------------------ */
/* R6-1｜故事頁 hero 大標：不設 media，全寬度適用
 *   （768/1024/1180/1280/1440 五個寬度的元素座標指紋 diff 皆 0，含橫拿機型） */
.jp-story-hero > .brxe-heading,
.jp-story-hero > .brxe-container > .brxe-heading{
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}
/* R6-2｜最新消息特刊大卡標題：**只在 ≤768px 生效，不可拿掉這層 media**。
 *   ≥769 的 .jp-feature 是 grid 1.06fr 1fr，兩軌現在的寬度就是被標題 min-content
 *   撐出來的；一旦 anywhere/min-width:0 讓 min-content 歸零，1024/1180/1440 三個
 *   寬度的標題會由 2 行變 3 行、整張卡往下長 45px（實測 31 個元素座標位移）
 *   ＝桌機外觀被改動。≤768 卡片本來就已改單欄，無此副作用（768 指紋 diff＝0）。 */
@media (max-width:768px){
  .jp-news-two-sec .jp-feature-title{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
  .jp-news-two-sec .jp-news-two,
  .jp-news-two-sec .jp-feature,
  .jp-news-two-sec .jp-feature-body{min-width:0 !important}
}

/* =========================================================
   RWD（對齊 mockup 斷點）
   ========================================================= */
@media (max-width:980px){
  .jp-spring-hero{grid-template-columns:1fr !important;min-height:auto}
  .jp-sh-img{height:60vh;height:60svh;min-height:380px}
  .jp-sh-text{padding:72px 32px !important}
  .jp-senses-grid{gap:48px}
  .jp-room-row{grid-template-columns:1fr !important;gap:24px;text-align:left}
  .jp-room-thumb{aspect-ratio:16/9;max-width:420px}
  .jp-room-spec{text-align:left !important}
  .jp-vista-grid{grid-auto-rows:10px;gap:18px}
  .jp-vtile.jp-t1{grid-column:span 12;grid-row:span 22}
  .jp-vtile.jp-t2{grid-column:span 6;grid-row:span 16}
  .jp-vtile.jp-t3{grid-column:span 6;grid-row:span 16;align-self:auto}
  .jp-vtile.jp-t4{grid-column:span 5;grid-row:span 22}
  .jp-vtile.jp-t5{grid-column:span 7;grid-row:span 18}
  .jp-seasons-row{grid-template-columns:repeat(2,1fr) !important}
  .jp-route-line{grid-template-columns:repeat(2,1fr) !important;gap:48px 0}
  .jp-route-line::before{display:none}
  .jp-fac-grid{grid-template-columns:repeat(3,1fr) !important;gap:18px}
  .jp-gallery-grid{grid-template-columns:repeat(3,1fr) !important}
  .jp-scout-zone{padding-top:88px !important;padding-bottom:88px !important}
}
@media (max-width:768px){
  /* 2026-07-29 手機 RWD ④：/spring/ 館內設施客人要求「一行一格」（原 2 欄，375px 下每格僅 145px） */
  .jp-fac-grid{grid-template-columns:1fr !important;gap:14px}
  .jp-gallery-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px}
  .jp-scout-zone{padding-top:72px !important;padding-bottom:72px !important;padding-left:20px !important;padding-right:20px !important}
  .jp-scout-imgs.jp-scout-2,.jp-scout-imgs.jp-scout-4{grid-template-columns:1fr !important}
  .jp-scout-imgs.jp-scout-1 .jp-scout-cell{aspect-ratio:4/3}
  .jp-scout-imgs.jp-scout-portrait .jp-scout-cell{aspect-ratio:3/4}
  .jp-scout-head{margin-bottom:40px !important}
  .jp-scout-cap{padding:44px 18px 16px !important}
  .jp-scout-cap .jp-scout-cap-name{font-size:19px !important}
  .jp-senses-grid{grid-template-columns:1fr !important;gap:56px}
  .jp-band{height:64vh;height:64svh;min-height:420px}
  /* 手機裁切更窄（直幅），主體要再往畫面中間拉一點，focal 比桌機更靠左 */
  .jp-band.jp-focal-window .jp-band-bg{background-position:33% 50%}
  .jp-band.jp-focal-night  .jp-band-bg{background-position:30% 50%}
  .jp-vista-grid{display:flex !important;flex-direction:column;grid-auto-rows:auto;gap:18px}
  .jp-vtile,.jp-vtile.jp-t1,.jp-vtile.jp-t2,.jp-vtile.jp-t3,.jp-vtile.jp-t4,.jp-vtile.jp-t5{
    grid-column:auto;grid-row:auto;height:64vw;min-height:280px}
  .jp-seasons-row{grid-template-columns:1fr !important}
  .jp-breath{height:60vh;height:60svh;min-height:380px}
  .jp-led-line{flex-wrap:wrap;gap:8px}
  .jp-led-dots{display:none !important}
  .jp-route-line{grid-template-columns:1fr !important;gap:44px 0}
}

@media (prefers-reduced-motion:reduce){
  .jp-sh-img img,.jp-sh-img::after,.jp-pano-bg .jp-pano-kb,.jp-pano::after,.jp-seasons::before{animation:none !important}
  .jp-band .jp-band-bg,.jp-breath .jp-band-bg{filter:none !important;transform:none !important;opacity:1 !important}
}

/* ============================================================
 * ✦ 其餘四頁專屬版型層（2026-05-29，Q3=A 每頁各長各的）
 * 餐飲 jp-dining-* ／ 錦屏故事 jp-story-* ／ 錦屏資訊 jp-info-* ／ 最新消息 jp-news-*
 * 沿用延續層色/字/霧氣/chrome；缺圖處 jp-*-slot 佔位（虛線框 + 待客戶補圖）。
 * ============================================================ */

/* 通用佔位區塊：缺圖/缺嵌入處 */
.jp-slot{position:relative;border:1px dashed var(--jp-mmist);background:rgba(92,68,52,0.035);
  display:flex !important;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:48px 24px !important;text-align:center;min-height:200px}
.jp-slot .jp-slot-ico{font-family:var(--jp-font-disp,"Cormorant Garamond",serif);font-style:italic;
  font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--jp-cedar)}
.jp-slot .jp-slot-note{font-family:"Noto Sans TC",sans-serif;font-size:13px;font-weight:300;
  color:var(--jp-ink-faint);letter-spacing:0.5px}

/* ===========================================================
   餐飲 — 「一張餐桌的時間」：對稱、暖、可口
   =========================================================== */
/* 1｜置中對稱 hero（無滿版大圖，暖底） */
.jp-dining-hero{background:var(--jp-steam) !important;
  padding:clamp(120px,16vh,180px) 32px clamp(72px,9vh,110px) !important;
  display:flex !important;flex-direction:column;align-items:center;text-align:center}
.jp-dining-hero .jp-dh-banner{width:100%;max-width:1080px;margin:clamp(48px,6vh,80px) auto 0;
  aspect-ratio:21/9;overflow:hidden;background:var(--jp-imgbg);padding:0 !important}
.jp-dining-hero .jp-dh-banner .brxe-image,.jp-dining-hero .jp-dh-banner img{width:100%;height:100%;margin:0}
.jp-dining-hero .jp-dh-banner img{object-fit:cover;object-position:center 55%;filter:saturate(0.97)}

/* 2｜用餐理念三詞 */
.jp-dining-creed-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:56px;max-width:var(--jp-rail-base) !important;margin:0 auto !important;width:100%}

/* 4.9｜館內設施清單（2026-06-10 C 設施配圖）：圖片卡網格，圖在上(4:3 圓角 cover)＋標題＋說明
 * 對不上原站實拍的設施(能量石板區/負離子水簾)img=0、卡片無圖只留標題說明，版面照常等寬。 */
.jp-fac-grid{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;background:transparent;
  max-width:var(--jp-rail-wide) !important;margin:0 auto !important;width:100%;border:0}
.jp-fac-cell{background:var(--jp-steam) !important;padding:0 0 22px !important;display:flex !important;
  flex-direction:column;gap:10px;border:1px solid var(--jp-mmist);border-radius:8px;overflow:hidden}
.jp-fac-img{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--jp-imgbg);
  padding:0 !important;margin:0 0 6px}
.jp-fac-img .brxe-image,.jp-fac-img img{width:100%;height:100%;margin:0;display:block}
.jp-fac-img img{object-fit:cover}
.jp-fac-cell .brxe-heading{padding:0 22px}
.jp-fac-cell .brxe-text-basic{padding:0 22px}

/* 6.5｜環境相簿（2026-06-10 P3-2）：方形縮圖網格 + hover 微縮，點擊 lightbox 放大 */
.jp-gallery-grid{display:grid !important;grid-template-columns:repeat(4,1fr);gap:10px;
  max-width:var(--jp-rail-wide) !important;margin:0 auto !important;width:100%}
.jp-gallery-cell{aspect-ratio:1/1;overflow:hidden;background:var(--jp-imgbg,#3a352e);cursor:pointer}
.jp-gallery-cell .brxe-image,.jp-gallery-cell img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease}
.jp-gallery-cell:hover img{transform:scale(1.06)}

/* 6.6｜環境「視覺探路頁」探路動線（2026-07-01 取代 46 張密集相簿）
   Bricks：section.jp-scout-zone > [ container.jp-scout-head(seal+氛圍標題) , block.jp-scout-imgs.jp-scout-N > block.jp-scout-cell > image ] */
.jp-scout-head{max-width:760px;margin:0 auto 56px !important}
.jp-scout-imgs{display:grid !important;gap:20px;max-width:var(--jp-rail-wide,1180px) !important;margin:0 auto !important;width:100%}
.jp-scout-imgs.jp-scout-1{max-width:1080px !important;grid-template-columns:1fr}
.jp-scout-imgs.jp-scout-2{grid-template-columns:repeat(2,1fr)}
.jp-scout-imgs.jp-scout-4{grid-template-columns:repeat(2,1fr)}
.jp-scout-cell{position:relative;overflow:hidden;background:var(--jp-imgbg,#3a352e);cursor:pointer;aspect-ratio:3/2}
.jp-scout-imgs.jp-scout-1 .jp-scout-cell{aspect-ratio:16/7}
.jp-scout-imgs.jp-scout-portrait .jp-scout-cell{aspect-ratio:4/5}
.jp-scout-cell .brxe-image,.jp-scout-cell img{display:block;width:100%;height:100%;margin:0}
.jp-scout-cell img{object-fit:cover;filter:saturate(0.96);transition:transform 6000ms var(--jp-ease,cubic-bezier(.22,1,.36,1))}
.jp-scout-cell:hover img{transform:scale(1.05)}
/* 設施導覽浮層（每張圖左下：設施名 + 一句特色）；pointer-events:none 讓點擊仍開 lightbox */
.jp-scout-cap{position:absolute !important;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:52px 24px 20px !important;text-align:left;
  background:linear-gradient(to top,rgba(26,22,18,.86) 0%,rgba(26,22,18,.52) 48%,rgba(26,22,18,0) 100%)}
.jp-scout-cap .jp-scout-cap-name{margin:0 !important;line-height:1.3}
.jp-scout-cap .jp-scout-cap-feat{margin:0 !important}

/* 3｜套餐菜單卡片（缺菜色照→頂部佔位區） */
.jp-menu-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1180px !important;margin:0 auto !important;width:100%}
.jp-menu-card{background:var(--jp-mist) !important;border:1px solid var(--jp-mmist);
  display:flex !important;flex-direction:column;overflow:hidden}
.jp-menu-card .jp-menu-photo-slot{aspect-ratio:4/3;min-height:0 !important}
.jp-menu-card .jp-menu-body{padding:32px 28px 36px !important;display:flex !important;flex-direction:column;gap:14px}
.jp-menu-card .jp-menu-items{border-top:1px solid var(--jp-mmist);margin-top:6px;padding-top:18px}

/* 3｜圖片版菜單網格（2026-06-10 P3-1）：原站 A4 菜單圖，3 欄、白底框、圓角、淡陰影、可 lightbox 放大 */
.jp-menugal{display:grid !important;grid-template-columns:repeat(3,1fr);gap:28px;
  max-width:var(--jp-rail-wide,1180px) !important;margin:0 auto !important;width:100%}
.jp-menugal-cell{background:#fff !important;border:1px solid var(--jp-mmist);border-radius:6px;
  overflow:hidden;box-shadow:0 12px 34px -26px rgba(43,42,40,0.5);cursor:zoom-in;
  transition:transform .4s var(--jp-ease),box-shadow .4s var(--jp-ease)}
.jp-menugal-cell:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(43,42,40,0.55)}
.jp-menugal-cell .brxe-image,.jp-menugal-cell img{display:block;width:100%;height:auto;border-radius:6px}
/* 輕食吧單張菜單圖（landscape，置中限寬白框） */
.jp-menugal-bar{max-width:760px;width:100%;margin:0 auto;background:#fff !important;
  border:1px solid var(--jp-mmist);border-radius:6px;overflow:hidden;
  box-shadow:0 12px 34px -26px rgba(43,42,40,0.5);cursor:zoom-in}
.jp-menugal-bar .brxe-image,.jp-menugal-bar img{display:block;width:100%;height:auto;border-radius:6px}

/* 3.2｜餐點卡網格（2026-06-29 業主反饋改版：當季套餐／單品料理，上圖下說明、3 欄平鋪、無 TAB）
   卡片本體沿用 .jp-card / .jp-card-thumb / .jp-card-body（與最新消息一致、置中、等高）；
   此處只定義專屬 3 欄網格容器，RWD 在 1024/640 收為 2 欄／1 欄。 */
.jp-dish-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:clamp(26px,2.4vw,40px);
  max-width:var(--jp-rail-base,1080px) !important;margin:0 auto !important;width:100%;align-items:stretch}
.jp-dish-grid .jp-card{background:#fff !important}
/* 套餐卡（非單品 duo）＝說明列出套餐菜色，放寬行數上限至 6 行避免菜色被截（2026-07-08） */
.jp-dish-grid:not(.jp-dish-duo) .jp-card-exc{-webkit-line-clamp:6}
/* 7 卡時末排落單一卡：讓不足整排的末排置中，不靠左孤懸（2026-07-08） */
.jp-dish-grid:not(.jp-dish-duo) .jp-card:last-child:nth-child(3n+1){grid-column:2}
/* 招牌單品：僅兩道時置中兩欄、收窄軌道，不靠左散開（2026-07-07） */
.jp-dish-grid.jp-dish-duo{grid-template-columns:repeat(2,1fr) !important;max-width:760px !important}

/* 3.5｜完整單點清單 grid（真實菜單） */
.jp-ala-grid{display:grid !important;grid-template-columns:repeat(4,1fr);gap:48px 40px;
  max-width:1180px !important;margin:0 auto !important;width:100%}
.jp-ala-col{padding:0 !important}
.jp-ala-cat-h{padding-bottom:14px;border-bottom:1px solid var(--jp-mmist);margin-bottom:4px}
.jp-ala-list{white-space:normal}

/* 4｜用餐空間左右交錯帶 */
.jp-dining-space{display:grid !important;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  max-width:var(--jp-rail-wide) !important;margin:0 auto !important;width:100%}
.jp-dining-space.alt{direction:rtl}
.jp-dining-space.alt > *{direction:ltr}
.jp-ds-img{overflow:hidden;background:var(--jp-imgbg);min-height:46vh;min-height:46svh;padding:0 !important}
.jp-ds-img .brxe-image,.jp-ds-img img{width:100%;height:100%;margin:0}
.jp-ds-img img{object-fit:cover;filter:saturate(0.95);transition:transform 6000ms var(--jp-ease)}
.jp-dining-space:hover .jp-ds-img img{transform:scale(1.04)}
.jp-ds-text{display:flex !important;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,72px) !important;background:var(--jp-paper) !important}

/* 5｜食材產地橫條 */
.jp-source-band{background:var(--jp-cedar) !important;padding:clamp(64px,8vh,96px) 32px !important}
.jp-source-row{display:grid !important;grid-template-columns:repeat(4,1fr);gap:0;max-width:1080px !important;margin:0 auto !important;width:100%}
.jp-source-cell{text-align:center;padding:0 18px !important;border-left:1px solid rgba(250,247,242,0.18)}
.jp-source-cell:first-child{border-left:none}

/* ===========================================================
   錦屏故事 — 「一條時間的縱軸」：純字 hero + 垂直編年
   =========================================================== */
/* 1｜全幅暗底文字 hero（無圖，霧氣氛圍） */
.jp-story-hero{position:relative;overflow:hidden;background:var(--jp-night) !important;
  min-height:78vh;min-height:78svh;padding:clamp(120px,18vh,200px) 32px !important;
  display:flex !important;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.jp-story-hero::after{content:"";position:absolute;inset:-10%;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.01' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  opacity:0.12;mix-blend-mode:screen;animation:jpDrift 40s ease-in-out infinite alternate}
.jp-story-hero > *{position:relative;z-index:2}

/* 2｜引言大字留白 */
.jp-story-pull{background:var(--jp-mist) !important;padding:clamp(120px,16vh,200px) 32px !important;
  display:flex !important;justify-content:center;text-align:center}

/* 3｜垂直編年時間軸 */
.jp-timeline{position:relative;max-width:var(--jp-rail-text) !important;margin:0 auto !important;width:100%}
.jp-timeline::before{content:"";position:absolute;top:8px;bottom:8px;left:120px;width:1px;background:var(--jp-mmist);z-index:0}
.jp-tl-item{display:grid !important;grid-template-columns:120px 1fr;gap:48px;align-items:start;
  padding:0 0 64px 0 !important;position:relative;background:transparent !important}
.jp-tl-item:last-child{padding-bottom:0 !important}
.jp-tl-year{text-align:right;padding-right:8px !important}
.jp-tl-body{position:relative;padding-left:40px !important}
/* 時間軸節點＝CIS 銀杏葉圖騰（取代原圓點，呼應 logo、低調金棕） */
.jp-tl-body::before{content:"";position:absolute;left:-17px;top:2px;width:22px;height:22px;
  background:var(--jp-steam,#F4EDE4)
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTMyIDggQzIxIDE5IDE0IDMxIDE0IDQyIEMxNCA1MSAyMyA1NiAzMiA1NiBDNDEgNTYgNTAgNTEgNTAgNDIgQzUwIDMxIDQzIDE5IDMyIDggWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTg4NTNDIiBzdHJva2Utd2lkdGg9IjMiIG9wYWNpdHk9IjAuOSIvPjxwYXRoIGQ9Ik0zMiAxNiBMMzIgNTQgTTIyIDM4IFEzMiAzMiA0MiAzOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQTg4NTNDIiBzdHJva2Utd2lkdGg9IjIiIG9wYWNpdHk9IjAuNyIvPjwvc3ZnPg==") center/16px no-repeat;
  border-radius:50%;box-shadow:0 0 0 4px var(--jp-steam,#F4EDE4);z-index:2}

/* 4｜數字信物三欄 */
.jp-relic-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:48px;max-width:var(--jp-rail-base) !important;margin:0 auto !important;width:100%}

/* 5｜定情大圖帶 → 沿用 jp-band 機制（HTML 加 jp-band class） */

/* ===========================================================
   錦屏資訊 — 「一張可用的卡片」：實用、緊湊
   =========================================================== */
/* 1｜緊湊 hero（小高度 + 窄幅山景背景） */
.jp-info-hero{position:relative;overflow:hidden;background:var(--jp-night) !important;background-image:none !important;
  min-height:46vh;min-height:46svh;padding:clamp(80px,12vh,130px) 32px !important;
  display:flex !important;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.jp-info-hero .jp-band-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 60%;filter:brightness(0.55)}
.jp-info-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,12,10,0.4),rgba(15,12,10,0.55))}
.jp-info-hero > *{position:relative;z-index:2}

/* 2｜雙欄資訊面板（左資訊 右地圖） */
.jp-info-panel{display:grid !important;grid-template-columns:1fr 1fr;gap:0;max-width:1180px !important;margin:0 auto !important;width:100%;
  border:1px solid var(--jp-mmist);background:var(--jp-mist)}
.jp-info-facts{padding:clamp(40px,5vw,64px) !important;border-right:1px solid var(--jp-mmist)}
.jp-fact-row{display:flex !important;justify-content:space-between;align-items:baseline;gap:24px;
  padding:18px 0 !important;border-bottom:1px solid var(--jp-mmist);background:transparent !important}
.jp-fact-row:last-child{border-bottom:none}
.jp-fact-k{flex:0 0 auto;font-family:var(--jp-font-disp,"Cormorant Garamond",serif);font-style:italic;
  letter-spacing:3px;text-transform:uppercase;font-size:12px;color:var(--jp-cedar)}
.jp-fact-v{flex:1 1 auto;text-align:right}
.jp-map-slot{min-height:100%;padding:0 !important}
.jp-map-slot.jp-slot{min-height:360px}
/* 真實地圖嵌入（map-leaflet，取代佔位） */
.jp-map-embed{min-height:100%;padding:0 !important;display:block !important}
.jp-map-embed > .brxe-map-leaflet,.jp-map-iframe{width:100% !important;height:100% !important;min-height:420px !important;display:block}
.jp-map-embed .leaflet-container,.jp-map-iframe .leaflet-container{width:100% !important;height:100% !important;min-height:420px !important}
.jp-map-embed iframe{width:100% !important;height:100% !important;min-height:420px;border:0;display:block}

/* 特殊節日收費一覽（沿用 ledger 點線風格） */
.jp-hol-inner{max-width:var(--jp-rail-text) !important;margin:0 auto !important;width:100%}
.jp-hol-line{display:flex !important;align-items:baseline;justify-content:space-between;gap:24px;
  padding:18px 0 !important;border-bottom:1px solid var(--jp-mmist);background:transparent !important}
.jp-hol-line:first-of-type{border-top:1px solid var(--jp-mmist)}
.jp-hol-date{flex:0 0 auto;min-width:160px}
.jp-hol-desc{flex:1 1 auto;text-align:right}

/* 3｜三張快速資訊卡 */
.jp-info-cards{display:grid !important;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1180px !important;margin:0 auto !important;width:100%}
.jp-info-card{background:var(--jp-mist) !important;border:1px solid var(--jp-mmist);padding:40px 32px !important;
  display:flex !important;flex-direction:column;gap:14px}

/* 4｜常見問答清單（純堆疊模擬手風琴） */
.jp-faq-list{max-width:var(--jp-rail-text) !important;margin:0 auto !important;width:100%}
.jp-faq-item{padding:28px 0 !important;border-bottom:1px solid var(--jp-mmist);background:transparent !important;
  display:flex !important;flex-direction:column;gap:12px}
.jp-faq-item:first-child{border-top:1px solid var(--jp-mmist)}
/* ⚠️ .jp-faq-q 是 Bricks block（.brxe-block 預設 flex-direction:column），這裡的 display:flex 不改方向。
 * column 方向下，橫向位置由 align-items 決定：baseline 等同 start＝編號與問題標題都靠左縮成內容寬。
 * 2026-07-29 R4 改 center，問題標題（width:auto）才會真的水平置中。 */
.jp-faq-q{display:flex !important;align-items:center;gap:16px}

/* 5｜聯絡橫條 */
.jp-contact-band{background:var(--jp-cedar) !important;padding:clamp(64px,8vh,100px) 32px !important;text-align:center}

/* ===========================================================
   最新消息 — 部落格列表頁（2026-06-08 重做：70/30 兩欄 + 等高 2 欄卡網格）
   =========================================================== */
/* 暖金細線 token（沿用沉浸帶分隔線 #C9A86A） */
:root{--jp-gold:#C9A86A}

/* 1｜報頭式 hero（全寬） */
.jp-news-hero{background:var(--jp-paper) !important;padding:clamp(100px,13vh,150px) 32px clamp(56px,8vh,84px) !important;
  display:flex !important;flex-direction:column;align-items:center;text-align:center;
  border-bottom:1px solid var(--jp-mmist)}
.jp-news-hero .jp-news-rule{width:64px;height:1px;background:var(--jp-cedar2);margin:0 0 32px !important}

/* 2｜兩欄體（70/30）：主內容 + 側欄 320px */
.jp-news-two-sec .jp-news-two{display:grid !important;grid-template-columns:1fr 320px;gap:clamp(40px,4vw,68px);
  max-width:1180px !important;margin:0 auto !important;width:100%;align-items:start}
.jp-news-main{display:flex !important;flex-direction:column;gap:clamp(48px,6vh,72px);min-width:0}

/* 整卡覆蓋連結（絕對定位鋪滿整卡＝整卡可點，避開 Bricks loop anchor 切開 bug） */
.jp-card-overlay{position:absolute !important;inset:0;z-index:4;font-size:0 !important;
  text-decoration:none !important;border:none !important}

/* 2a｜特刊大卡（左圖右文，非滿寬橫幅、避免又變 hero） */
.jp-feature{position:relative;display:grid !important;grid-template-columns:1.06fr 1fr;gap:0;align-items:stretch;
  width:100%;border:1px solid var(--jp-mmist);background:var(--jp-mist);text-decoration:none !important;
  border-radius:8px;overflow:hidden;box-shadow:0 18px 50px -34px rgba(43,42,40,0.4);
  transition:box-shadow 600ms var(--jp-ease),transform 600ms var(--jp-ease)}
.jp-feature:hover{box-shadow:0 24px 56px -34px rgba(43,42,40,0.5);transform:translateY(-3px)}
.jp-feature-img{position:relative;overflow:hidden;background:var(--jp-imgbg);min-height:300px;padding:0 !important}
.jp-feature-img .brxe-image,.jp-feature-img img{width:100%;height:100%;margin:0}
.jp-feature-img img{object-fit:cover;transition:transform 6000ms var(--jp-ease)}
.jp-feature:hover .jp-feature-img img{transform:scale(1.05)}
.jp-feature-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,27,23,0.08) 0%,transparent 42%,rgba(31,27,23,0.40) 100%)}
.jp-feature-ribbon{position:absolute !important;left:22px;bottom:22px;z-index:2;
  background:var(--jp-bamboo);color:#FAF7F2 !important;padding:8px 20px !important;border-radius:3px;
  box-shadow:0 6px 18px -8px rgba(31,27,23,0.5)}
.jp-feature-body{display:flex !important;flex-direction:column;justify-content:center;padding:clamp(32px,3.4vw,52px) !important}
.jp-feature-exc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 2b｜列表小標 */
.jp-news-listhead{display:flex !important;flex-direction:column;gap:8px}

/* 2c｜等高 2 欄卡網格（圖上文下、4:3 統一裁切、flex column stretch 等高） */
.jp-post-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:clamp(28px,2.6vw,40px);width:100%;align-items:stretch}
.jp-card{position:relative;display:flex !important;flex-direction:column;height:100%;text-decoration:none !important;
  background:var(--jp-mist);border:1px solid var(--jp-mmist);border-radius:8px;overflow:hidden;
  box-shadow:0 8px 26px -22px rgba(43,42,40,0.45);
  transition:box-shadow 600ms var(--jp-ease),transform 600ms var(--jp-ease)}
.jp-card:hover{box-shadow:0 18px 42px -26px rgba(43,42,40,0.5);transform:translateY(-4px)}
/* 縮圖統一 4:3 裁切 */
.jp-card-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--jp-imgbg);padding:0 !important;flex:0 0 auto}
.jp-card-thumb .brxe-image,.jp-card-thumb img{width:100%;height:100%;margin:0;object-fit:cover;
  transition:transform 6000ms var(--jp-ease)}
.jp-card:hover .jp-card-thumb img{transform:scale(1.05)}
/* 文字區：flex column 撐滿剩餘高度，更多連結沉底＝卡片等高 */
.jp-card-body{display:flex !important;flex-direction:column;flex:1 1 auto;padding:22px 24px 24px !important;gap:9px}
/* 標題與摘要各 line-clamp 2 行 */
.jp-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:keep-all;text-wrap:balance}
.jp-card-exc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jp-card-more{margin-top:auto !important;padding-top:6px}

/* 共用 meta（特刊 + 卡片） */
.jp-post-meta{display:flex !important;align-items:center;gap:12px;flex-wrap:wrap}
.jp-post-date{font-family:var(--jp-font-disp,"Cormorant Garamond",serif);font-style:italic;letter-spacing:2px;color:var(--jp-cedar)}
.jp-post-cat a{color:inherit !important;text-decoration:none;transition:color 400ms var(--jp-ease)}
.jp-post-cat a:hover{color:var(--jp-cedar,#5C4434) !important}

/* ===========================================================
   側邊欄 jp-side-*（news 列表 + 單篇共用，sticky 避開固定 header）
   =========================================================== */
.jp-side{display:flex !important;flex-direction:column;gap:28px;position:sticky;top:100px;align-self:start}
/* ① 預約 CTA 卡（暗底，置頂）— 2026-06-10 三鈕收編到統一 .jp-btn 系統，
   卡片只管暗底容器與堆疊間距；按鈕配色/padding/字距由 jp-anim.css 的 .jp-btn 接管。 */
.jp-side-cta{background:var(--jp-night) !important;border-radius:10px;padding:30px 26px 28px !important;
  display:flex !important;flex-direction:column;align-items:center;text-align:center;gap:12px;
  box-shadow:0 18px 46px -30px rgba(31,27,23,0.7)}
.jp-side-cta-seal{margin-bottom:2px}
.jp-side-cta-h{margin:0}
.jp-side-cta-p{margin:0 0 6px}
/* 三鈕在窄側欄內滿寬堆疊（.jp-btn 預設 inline-block，這裡撐滿） */
.jp-side-cta-book,.jp-side-cta-tel,.jp-side-cta-line{width:100% !important}
/* ②③⑤ 模組共用框 */
.jp-side-mod{background:var(--jp-mist);border:1px solid var(--jp-mmist);border-radius:10px;padding:24px 24px 22px !important;
  display:flex !important;flex-direction:column;gap:14px}
.jp-side-mod-title{margin:0;padding-bottom:12px;border-bottom:1px solid var(--jp-mmist)}
/* ② 分類列 */
.jp-side-catlist{display:flex !important;flex-direction:column;gap:2px}
.jp-side-catrow{display:flex !important;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0 !important;border-bottom:1px solid rgba(216,210,200,0.5);text-decoration:none !important;
  transition:padding-left 400ms var(--jp-ease)}
.jp-side-catrow:last-child{border-bottom:none}
.jp-side-catrow:hover{padding-left:6px !important}
.jp-side-catrow:hover .jp-side-catname{color:var(--jp-cedar) !important}
/* 2026-06-10 分類列＝「名稱＋篇數膠囊」：名稱正常字級，篇數做成淡色小膠囊、字級縮小 */
.jp-side-catname{font-size:14px;color:var(--jp-ink-soft);transition:color 300ms var(--jp-ease)}
.jp-side-catcount{flex:0 0 auto;font-size:12px;color:var(--jp-ink-faint);
  background:var(--jp-steam,#F3EFE8);border-radius:11px;padding:2px 10px;line-height:1.7;white-space:nowrap}
/* ③⑤ 最新/相關文章列 */
.jp-side-latlist{display:flex !important;flex-direction:column}
.jp-side-latrow{display:flex !important;flex-direction:column;gap:4px;padding:13px 0 !important;
  border-bottom:1px solid rgba(216,210,200,0.5);text-decoration:none !important}
.jp-side-latrow:last-child{border-bottom:none}
.jp-side-lattitle{margin:0;transition:color 400ms var(--jp-ease)}
.jp-side-latrow:hover .jp-side-lattitle{color:var(--jp-cedar) !important}
/* ④ 營業資訊卡 */
.jp-side-info-body{display:flex !important;flex-direction:column;gap:10px}

/* ===========================================================
   單篇文章頁 jp-single-*（2026-06-08 重做：頁首無大圖 + 特色圖入內文 + 側欄）
   header / footer 由 jp-anim.js 站台 chrome 注入（mu-plugin 已擴及 is_singular('post')）
   =========================================================== */
/* 1｜頁首區（無大圖、零覆蓋層；麵包屑→分類→H1→日期+暖金短線） */
.jp-single-head{background:var(--jp-steam) !important;border-bottom:1px solid var(--jp-mmist)}
.jp-single-head-inner{max-width:var(--jp-rail-text) !important;margin:0 auto !important;display:flex !important;
  flex-direction:column;align-items:center;text-align:center}
/* 麵包屑：2026-06-09 移到內文區上方（特色圖前），橫向排列、分隔斜線置中、限 740 寬靠左 */
.jp-single-crumb{max-width:740px !important;width:100%;margin:0 auto !important;
  display:flex !important;flex-flow:row wrap;align-items:center;justify-content:flex-start;gap:8px;line-height:1}
.jp-single-crumb > *{flex:0 0 auto;width:auto !important;display:inline-flex !important;align-items:center;line-height:1.5}
.jp-single-crumb-sep{opacity:0.7}
.jp-single-crumb a{text-decoration:none;transition:color 400ms var(--jp-ease)}
.jp-single-crumb a:hover{color:var(--jp-cedar) !important}
.jp-single-cat{display:block;width:100% !important;text-align:center !important}
.jp-single-title{display:block;width:100% !important;text-align:center !important;
  word-break:keep-all;text-wrap:balance;line-break:strict}
.jp-single-rule{width:46px;height:1px;background:var(--jp-gold) !important;margin:6px auto 4px !important;opacity:0.9}
.jp-single-date{display:block;width:100% !important;text-align:center !important}

/* 2｜兩欄體（70/30） */
.jp-single-body-sec .jp-single-two{display:grid !important;grid-template-columns:1fr 320px;gap:clamp(40px,4vw,68px);
  max-width:1180px !important;margin:0 auto !important;width:100%;align-items:start}
.jp-single-main{display:flex !important;flex-direction:column;gap:clamp(40px,5vh,56px);min-width:0}

/* 2a｜特色圖（正文前、限寬 ≤740px 置中、不出血、16:9、圓角 6px） */
.jp-single-featimg{max-width:740px !important;width:100%;margin:0 auto !important;aspect-ratio:16/9;
  overflow:hidden;border-radius:6px;background:var(--jp-imgbg);padding:0 !important}
.jp-single-featimg .brxe-image,.jp-single-featimg img{width:100%;height:100%;margin:0;object-fit:cover}

/* 2b｜內文（限寬 ≤740px 置中、可讀排版） */
.jp-single-article{max-width:740px !important;width:100%;margin:0 auto !important}
.jp-single-content{font-family:"Noto Sans TC",-apple-system,sans-serif;
  color:var(--jp-ink-soft,#5C5852);font-size:16px;line-height:2.0;font-weight:300;letter-spacing:0.3px}
.jp-single-content p{margin:0 0 1.5em}
.jp-single-content p:last-child{margin-bottom:0}
.jp-single-content strong{color:var(--jp-ink-deep,#2B2A28);font-weight:500}
.jp-single-content h2{font-family:"Noto Serif TC",Georgia,serif;color:var(--jp-ink-deep,#2B2A28);
  font-weight:400;line-height:1.45;letter-spacing:1px;font-size:26px;
  margin:1.9em 0 0.7em;padding-left:16px;border-left:3px solid var(--jp-bamboo);
  word-break:keep-all;text-wrap:balance}
.jp-single-content h3{font-family:"Noto Serif TC",Georgia,serif;color:var(--jp-ink-deep,#2B2A28);
  font-weight:400;line-height:1.45;letter-spacing:1px;font-size:21px;margin:1.6em 0 0.6em;
  word-break:keep-all;text-wrap:balance}
.jp-single-content ul,.jp-single-content ol{margin:0 0 1.5em;padding-left:1.4em}
.jp-single-content li{margin:0 0 0.6em;line-height:1.9}
.jp-single-content ul li{list-style:none;position:relative;padding-left:1.2em}
.jp-single-content ul li::before{content:"";position:absolute;left:0;top:0.78em;
  width:6px;height:6px;background:var(--jp-bamboo);opacity:0.85}
.jp-single-content ol{list-style:decimal;padding-left:1.6em}
.jp-single-content ol li{padding-left:0.3em}
.jp-single-content a{color:var(--jp-cedar,#5C4434);text-decoration:underline;text-underline-offset:3px}
.jp-single-content blockquote{margin:1.7em 0;padding:14px 0 14px 24px;background:var(--jp-paper);
  border-left:3px solid var(--jp-bamboo);color:var(--jp-ink-soft,#5C5852);font-style:italic}
.jp-single-content hr{border:none;width:56px;height:1px;background:var(--jp-gold);margin:2.2em auto;opacity:0.9}
/* 內文插入圖：2026-06-09 改全版（內容區滿版寬度）、去限寬框與圓角，客戶後台插任何尺寸前台一律滿版 */
.jp-single-content img,
.jp-single-content figure img,
.jp-single-content figure{width:100% !important;max-width:100% !important;height:auto;
  border-radius:0 !important;border:none !important;box-shadow:none !important;
  margin:1.7em 0 !important;padding:0 !important;display:block}
.jp-single-content figure img{margin:0 !important}
.jp-single-content .wp-caption,.jp-single-content figure.wp-block-image,.jp-single-content .wp-block-image{width:100% !important;max-width:100% !important;margin:1.7em 0 !important}
.jp-single-content figcaption,.jp-single-content .wp-caption-text{font-size:13px;color:var(--jp-ink-faint,#8A857E);
  text-align:center;margin-top:8px;font-weight:300;letter-spacing:0.3px}
.jp-single-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px;font-variant-numeric:tabular-nums}
.jp-single-content th,.jp-single-content td{padding:11px 14px;border-bottom:1px solid var(--jp-mmist);text-align:left}
.jp-single-content th{color:var(--jp-ink-deep,#2B2A28);font-weight:500}

/* 2c｜返回列表 + 上下篇導引 */
.jp-single-backwrap{display:flex !important;justify-content:center}
.jp-single-backlist{display:inline-block;border-bottom:1px solid transparent;text-decoration:none !important;
  transition:border-color 600ms var(--jp-ease)}
.jp-single-backlist:hover{border-color:var(--jp-cedar,#5C4434)}
/* Bricks post-navigation：anchor 有正確 prev/next href 但內文空 → 用 ::before 補「上一篇/下一篇」文字 */
.jp-single-nav{display:flex !important;align-items:center;justify-content:space-between;gap:18px;
  border-top:1px solid var(--jp-mmist);padding-top:28px !important;margin-top:8px}
.jp-single-nav a{text-decoration:none !important;color:var(--jp-ink-soft,#5C5852) !important;
  font-family:"Noto Sans TC",-apple-system,sans-serif;font-size:14px;letter-spacing:1px;
  transition:color 400ms var(--jp-ease)}
.jp-single-nav a:hover{color:var(--jp-cedar,#5C4434) !important}
.jp-single-nav .prev-post::before{content:"← 上一篇"}
.jp-single-nav .next-post::before{content:"下一篇 →"}
.jp-single-nav .next-post{margin-left:auto}

/* ===========================================================
   四頁 RWD
   =========================================================== */
/* 1023↓：兩欄收單欄＝側欄落主內容下方；卡網格維持 2 欄（spec：768–1023 側欄下方+網格 2 欄） */
@media (max-width:1023px){
  .jp-news-two-sec .jp-news-two,
  .jp-single-body-sec .jp-single-two{grid-template-columns:1fr !important;gap:clamp(48px,6vh,72px);max-width:760px !important}
  /* 兩欄都單欄後，側欄不再 sticky（避免捲動殘留），改一般流＝落最後 */
  .jp-side{position:static;top:auto}
  /* 側欄改三欄/兩欄橫排省高度（CTA 卡仍在最前；桌寬足夠時模組並排） */
  .jp-side{display:grid !important;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  .jp-side-cta{grid-column:1 / -1}
}
@media (max-width:980px){
  .jp-menu-grid{grid-template-columns:1fr !important;max-width:520px !important}
  .jp-menugal{grid-template-columns:repeat(2,1fr) !important;gap:22px;max-width:680px !important}
  .jp-dish-grid{grid-template-columns:repeat(2,1fr) !important;gap:26px;max-width:680px !important}
  .jp-dish-grid:not(.jp-dish-duo) .jp-card:last-child:nth-child(3n+1){grid-column:auto}
  .jp-ala-grid{grid-template-columns:repeat(2,1fr) !important;gap:44px 36px;max-width:680px !important}
  .jp-dining-creed-grid{gap:40px}
  .jp-dining-space,.jp-dining-space.alt{grid-template-columns:1fr !important;direction:ltr}
  .jp-ds-img{min-height:42vh;min-height:42svh}
  .jp-source-row{grid-template-columns:repeat(2,1fr) !important;gap:40px 0}
  .jp-source-cell,.jp-source-cell:first-child{border-left:none}
  .jp-timeline::before{left:90px}
  .jp-tl-item{grid-template-columns:90px 1fr;gap:28px}
  .jp-relic-grid{gap:36px}
  .jp-info-panel{grid-template-columns:1fr !important}
  .jp-info-facts{border-right:none;border-bottom:1px solid var(--jp-mmist)}
  .jp-map-embed,.jp-map-iframe,.jp-map-embed iframe{min-height:320px}
  .jp-info-cards{grid-template-columns:1fr !important;max-width:520px !important}
}
@media (max-width:768px){
  .jp-hol-line{flex-wrap:wrap;gap:6px}
  .jp-hol-date{min-width:0}
  .jp-hol-desc{text-align:left;flex:1 1 100%}
  .jp-ala-grid{grid-template-columns:1fr !important;max-width:420px !important;gap:40px}
  .jp-menugal{grid-template-columns:1fr !important;max-width:420px !important;gap:20px}
  .jp-dish-grid{grid-template-columns:1fr !important;max-width:400px !important;gap:24px}
  .jp-dish-grid.jp-dish-duo{grid-template-columns:1fr !important;max-width:400px !important}
  .jp-dining-creed-grid{grid-template-columns:1fr !important;gap:48px}
  .jp-source-row{grid-template-columns:1fr !important;gap:32px 0}
  .jp-timeline::before{left:0}
  /* 2026-07-29 R2【一】320px 橫向捲動根治（實測 story scrollWidth 332 > clientWidth 320）
   * 真因不是 padding：全站斷行修正的 word-break:keep-all 讓 12 字標題（如「台灣好湯嘉年華記者會場地」）
   * 整串不可斷 → min-content = 276px；`1fr` 軌道的 min-width 預設 auto，軌道被撐到 276px，
   * 32(section pad) + 24(item pad) + 276 = 332 → 文件橫向溢出 12px。
   * 修法三層：① 軌道改 minmax(0,1fr) ＝ 允許縮到小於 min-content，軌道不再被單一長標題撐開
   *          ② 標題字級改 clamp(18px,5.9vw,22px)：320 得 18.9px，最長 12 字標題需 237px < 可用 240px，
   *             一行收得下＝不必斷行（實測 11 則全單行）；≥375px 一律回到原本 22px，觀感零變化。
   *          ③ overflow-wrap:anywhere 只當保險（<320px 的極端機才會觸發），keep-all 維持，
   *             避免像「露天風呂與男/女裸湯啟用」把詞拆兩行——那正是 keep-all 當初要防的。
   * 375/390 實測：字級 22px、maxRight 332，與修改前完全相同。 */
  .jp-tl-item{grid-template-columns:minmax(0,1fr) !important;gap:8px;padding-left:24px !important}
  .jp-tl-body .brxe-heading{word-break:keep-all;overflow-wrap:anywhere;
    font-size:clamp(18px,5.9vw,22px) !important}
  .jp-tl-year{text-align:left;padding-right:0 !important}
  .jp-tl-body{padding-left:0 !important}
  .jp-tl-body::before{display:none}
  .jp-relic-grid{grid-template-columns:1fr !important;gap:40px}
  /* 2026-07-29 手機 RWD ⑦：最新消息第一則（特刊大卡）標題窄螢幕沒收好
   * 實測 390px：區塊左右各 32px（Bricks inline，故需 !important）＋卡片內距 32px＝文字可用寬僅 260px，
   * 24px 的 17 字標題必折兩行，客人看到的「沒置中／被切」＝折行後兩行不齊＋內距太擠。
   * 修法：區塊內距 32→20px 放寬可用寬，標題降到 20px／行高 1.5／text-wrap:balance 讓兩行字數平均。 */
  .jp-news-two-sec{padding-left:20px !important;padding-right:20px !important}
  .jp-news-two-sec .jp-feature-title,
  .jp-news-two-sec .jp-post-title{font-size:20px !important;line-height:1.5 !important;text-wrap:balance}
  /* 特刊大卡：左圖右文 → 圖上文下（避免窄寬擠壓） */
  .jp-feature{grid-template-columns:1fr !important}
  .jp-feature-img{min-height:200px;aspect-ratio:16/9}
  .jp-feature-ribbon{left:16px;bottom:16px;padding:7px 16px !important;font-size:12px !important}
  /* 卡網格：2 欄 → 單欄 */
  .jp-post-grid{grid-template-columns:1fr !important;gap:24px}
  /* 側欄：橫排兩欄 → 單欄直排（CTA 卡仍在最前） */
  .jp-side{grid-template-columns:1fr !important;gap:22px}
  .jp-side-cta{grid-column:auto}
  .jp-faq-q{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .jp-story-hero::after{animation:none !important}
}

/* 四頁中文斷行（沿用前頁 keep-all/balance 策略） */
.jp-dining-creed-grid .brxe-text-basic,
.jp-source-cell .brxe-text-basic,.jp-source-cell .brxe-heading,
.jp-relic-grid .brxe-text-basic,
.jp-tag .brxe-text-basic{word-break:keep-all;text-wrap:balance}
.jp-dining-hero .brxe-heading,.jp-story-hero .brxe-heading,.jp-story-pull .brxe-heading,
.jp-info-hero .brxe-heading,.jp-news-hero .brxe-heading,
.jp-menu-card .brxe-heading,.jp-info-card .brxe-heading,.jp-feature-body .brxe-heading,
.jp-tl-body .brxe-heading,.jp-faq-q .brxe-heading{text-wrap:balance}
.jp-dining-hero .brxe-text-basic,.jp-ds-text .brxe-text-basic,.jp-menu-body .brxe-text-basic,
.jp-tl-body .brxe-text-basic,.jp-info-card .brxe-text-basic,.jp-faq-item .brxe-text-basic,
.jp-feature-body .brxe-text-basic,.jp-post-row .brxe-text-basic{text-wrap:pretty}

/* ============================================================
 * 全站對齊準則（客戶定案 2026-06-11）：除表格類外，內文一律置中 + 同列卡片等高
 * 規則來源：給CODE_全站對齊準則_2026-06-11.md
 * 紅線（不掛任何置中規則，維持左右對照原樣）：
 *   ① 湯資表 .jp-ledger / .jp-led-line（左品名右價格）
 *   ② 基本資訊 key-value .jp-info-facts / .jp-fact-row（左鍵右值）
 *   ③ 故事編年時間軸 .jp-timeline / .jp-tl-item（年份+描述）
 * Hero 維持現狀（設施/環境 hero 靠左、其餘置中）＝不在此處改動。
 * 做法：對「卡片內文/FAQ/清單/設施格/季節格」的語意 class 強制 text-align:center
 *   + 卡片 flex column align-items:center + grid align-items:stretch（同列等高）。
 * 只掃語意 class、不用裸 .brxe-* 全選 → 紅線三表不受影響（不掛即免疫）。
 * ============================================================ */

/* ---- 資訊頁：交通卡 / 停車卡 / 周邊景點卡（jp-info-card）→ 置中 + 等高 ---- */
.jp-info-cards{align-items:stretch !important}
.jp-info-card{align-items:center !important;text-align:center !important;height:100% !important}
.jp-info-card .brxe-heading,
.jp-info-card .brxe-text-basic,
.jp-info-card .bricks-heading-text,
.jp-info-card .bricks-text-basic{width:100% !important;text-align:center !important}

/* ---- 資訊頁：FAQ 問題 + 答案 → 置中 ---- */
.jp-faq-item{align-items:center !important;text-align:center !important}
/* ⚠️ 2026-07-29 R4 修正 FAQ 問題標題沒置中（Playwright 1440 實測後改）：
 * ① 清死規則：原本這行是 .jp-faq-q{justify-content:center !important;flex-wrap:wrap}，
 *    寫的時候誤以為 .jp-faq-q 是 row，實際是 column（Bricks .brxe-block 預設 flex-direction:column），
 *    justify-content 在 column 管的是垂直，對「問題標題沒置中」完全無效。
 * ② column 方向的橫向位置吃 align-items，但 Bricks 會為該元素輸出 inline <style> 的
 *    `#brxe-xxxxxx{align-items:baseline}`（ID 權重 100 > class 10），所以上方 593 行的
 *    .jp-faq-q{align-items:center} 會被壓掉 → 這裡必須用 !important 才蓋得住
 *    （與下方 .jp-faq-item{align-items:center !important} 同一套路，Bricks 站的既有作法）。 */
.jp-faq-q{align-items:center !important}
.jp-faq-item .brxe-heading,
.jp-faq-item .brxe-text-basic,
.jp-faq-item .bricks-heading-text,
.jp-faq-item .bricks-text-basic{width:100% !important;text-align:center !important}
.jp-faq-q .brxe-heading,.jp-faq-q .bricks-heading-text{width:auto !important}

/* ---- 湯館設施：館內設施 10 格（jp-fac-cell）→ 圖下文字置中 ---- */
.jp-fac-cell{align-items:center !important;text-align:center !important}
.jp-fac-cell .brxe-heading,
.jp-fac-cell .brxe-text-basic,
.jp-fac-cell .bricks-heading-text,
.jp-fac-cell .bricks-text-basic{width:100% !important;text-align:center !important}

/* ---- 湯館設施：三種泡法房型說明（jp-room-row 文字欄）→ 置中
 *   ⚠️ 房型是圖左文右 split，文字欄內部置中（圖維持原位、規格欄維持原樣不動） ---- */
.jp-room-row .brxe-text-basic,
.jp-room-row .brxe-heading,
.jp-room-row .bricks-text-basic,
.jp-room-row .bricks-heading-text{text-align:center !important}
.jp-room-row > .brxe-block{align-items:center !important}
/* 房型規格欄維持右對齊（屬視覺平衡，非主說明文字；準則只要說明置中） */
.jp-room-spec{text-align:center !important}

/* ---- 最新消息：卡片內文（日期/分類/標題/摘要/閱讀更多）→ 置中 + 等高 ----
 *   等高骨架（jp-post-grid align-items:stretch / jp-card height:100%）已建，補置中即可。 */
.jp-card-body{align-items:center !important;text-align:center !important}
.jp-card-body .brxe-heading,
.jp-card-body .brxe-text-basic,
.jp-card-body .bricks-heading-text,
.jp-card-body .bricks-text-basic{width:100% !important;text-align:center !important}
.jp-card-body .jp-post-meta{justify-content:center !important}
/* 特刊大卡（左圖右文）：文字欄內文置中 */
.jp-feature-body{align-items:center !important;text-align:center !important}
.jp-feature-body .brxe-heading,
.jp-feature-body .brxe-text-basic,
.jp-feature-body .bricks-heading-text,
.jp-feature-body .bricks-text-basic{width:100% !important;text-align:center !important}
.jp-feature-body .jp-post-meta{justify-content:center !important}

/* ---- 最新消息側欄：最新消息列 + 文章分類清單 → 置中 ---- */
.jp-side-mod-title{text-align:center !important}
.jp-side-latlist{align-items:center !important}
.jp-side-latrow{align-items:center !important;text-align:center !important}
.jp-side-latrow .brxe-text-basic,.jp-side-latrow .brxe-heading,
.jp-side-latrow .bricks-text-basic,.jp-side-latrow .bricks-heading-text{text-align:center !important}
.jp-side-catrow{justify-content:center !important;gap:8px !important}

/* ---- 餐飲：完整菜單 / 輕食吧說明文字 → 置中（菜單圖本身已置中；標題群已 jp-ctr）
 *   菜單關鍵資訊/備註已 _textAlign:center；此處補強避免 shrink-to-fit 偏移 ---- */
.jp-menu-card .brxe-text-basic,.jp-menu-body .brxe-text-basic{text-align:center !important}

/* ---- 環境：四季說明（jp-season 格）→ 置中（相簿格已置中；季節格 block 已 center，補強內文） ---- */
.jp-season{align-items:center !important}
.jp-season .brxe-heading,
.jp-season .brxe-text-basic,
.jp-season .bricks-heading-text,
.jp-season .bricks-text-basic{width:100% !important;text-align:center !important}

/* ============================================================
 * 資訊頁（page-id-38）內文一律置中（含多行：FAQ 答案／訂金各行／停車與周邊引言）
 * 2026-06-12：解決「多行文字 text-align:start 靠左、看起來沒置中」。
 * 例外：基本資訊鍵值表（左鍵右值）保留左右對照。
 * ============================================================ */
body.page-id-38 .jp-page-sec .brxe-heading,
body.page-id-38 .jp-page-sec .brxe-text-basic,
body.page-id-38 .jp-page-sec .brxe-text-link,
body.page-id-38 .jp-page-sec .bricks-heading-text,
body.page-id-38 .jp-page-sec .bricks-text-basic{ text-align:center !important; }
/* 例外：基本資訊「鍵=左／值=右」表格維持 */
body.page-id-38 .jp-fact-k{ text-align:start !important; }
body.page-id-38 .jp-fact-v{ text-align:right !important; }

/* ============================================================
 * 2026-07-29 R2【一】極窄機（≤360px，iPhone SE 直式 320 級距）故事編年時間軸
 * 320 實測可用寬僅 256px（section 左右各 32 內距），扣掉 item 24px 縮排只剩 232，
 * 標題兩行仍偏擠 → 縮排降到 16px 換回 8px 呼吸空間。
 * 只在 ≤360 生效，375/390 維持原本 24px 縮排（版面觀感不變）。
 * ============================================================ */
@media (max-width:360px){
  .jp-tl-item{padding-left:16px !important}
}

/* ============================================================
 * 2026-07-29 R7：R6 遺留三處「字級一放大就溢出/被裁」根治
 * 全部只在 jp-pages.css，未動 jp-anim.*／jp-pages.js／build_*.php／頁面內容。
 *
 * R7-1／R7-2｜/spring/ hero「美人湯・碳酸氫鈉溫泉」與 /environment/ 沉浸帶「這裡能泡到什麼」
 *   成因：兩者都是逐字動畫標題（.jp-stagger，JS 把每字包成 inline-block .jp-ch），
 *         只能靠 white-space:nowrap ＋ font-size clamp 硬塞單行；使用者一開放大文字
 *         （×1.3 起）整串就寬過視窗，被 hero 的 overflow:hidden 裁掉（不橫捲但切字）。
 *         R6 那招（min-width:0＋overflow-wrap:anywhere）對它無效——逐字 span 是一顆顆
 *         獨立盒子，text-level 斷行控制管不到。
 *   修法：手機段解除 nowrap，改「盒子寬度 = 內容寬（max-content）但封頂在視窗內」：
 *         width:max-content     → 塞得下時寬度＝一整行，與 nowrap 完全等值（×1.0 逐格不變）
 *         max-width:calc(100vw - 36px) → 塞不下時才封頂，逐字 span 自然換行、不再被裁
 *         min-width:0           → 解除 flex 子項 min-content 地板（否則封頂無效）
 *   為何不用「手機停用 stagger」：實測換行結果與停用後完全相同（逐字 span 的斷點
 *         ＝overflow-wrap:anywhere 的斷點，都是貪婪填滿），但停用要改 jp-pages.js／
 *         jp-anim.js 兩支拆字邏輯，動到桌機共用的 code path；純 CSS ＋ media 鎖 ≤768
 *         則桌機一行都碰不到，風險最低、手機也保住進場動畫。
 *   ⚠️ 桌機（≥769）刻意不套：那裡 nowrap 是版型前提（split hero 文欄／pano 左下對齊），
 *         且 1440 逐字動畫必須零改變。
 *
 * R7-3｜nowrap 群組（/dining/ 套餐引言末句、/info/ 16 個景點名）
 *   成因：為了去孤字／防景點名拆行，內文用 <span style="white-space:nowrap"> 包住詞組；
 *         ×1.5 @320 時 dining 那組 12 字寬 303px＞欄寬 256px，把整份文件撐到 335px 橫捲。
 *   修法：把「絕不斷」換成「塞不下才斷」——white-space 放回 normal，用 word-break:keep-all
 *         擋掉中文字間的一般斷點（＝正常字級下行為與 nowrap 完全相同），
 *         再用 overflow-wrap:anywhere 保留「真的塞不下時可斷」的逃生口。
 *         實測 ×1.0 全站 7 頁 × 10 種寬度元素座標指紋 diff＝0。
 *   ⚠️ selector 用 [style*="nowrap"] 不用 [style*="white-space:nowrap"]：
 *         任何 JS 動過該元素 style 後，瀏覽器會把屬性重新序列化成「white-space: nowrap」
 *         （冒號後多一個空格），後者就比對不到了。
 * ============================================================ */
@media (max-width:768px){
  .jp-spring-hero .brxe-heading.jp-stagger,
  .jp-pano-content .brxe-heading.jp-stagger,
  .jp-spring-hero .brxe-heading.jp-stagger .bricks-heading-text,
  .jp-pano-content .brxe-heading.jp-stagger .bricks-heading-text{
    white-space:normal !important;
    width:max-content;
    max-width:calc(100vw - 36px);
    min-width:0 !important;
    /* 真的換行時把兩行拉勻，避免尾字落單（實測 ×1.5@320：
       「這裡能泡到什／麼」→「這裡能泡／到什麼」、spring 7+3 → 5+5）。
       單行時 balance 是 no-op ＝ ×1.0 外觀零影響；舊版 Safari 不支援就退回貪婪換行
       （＝上面幾條已保證不溢出的狀態），純加分不承擔風險。
       ⚠️ 蓋掉的是 jp-anim.css 的 .jp-stagger{text-wrap:initial}，故要 !important。 */
    text-wrap:balance !important;
  }
}
span[style*="nowrap"]{
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:anywhere !important;
}

/* ===========================================================
   2026-07-31 階段三：單篇「特色圖 vs 內文第一張圖」去重複
   -----------------------------------------------------------
   背景：正式站 13 篇文章原本沒有特色圖，內容幾乎都是「一張活動海報」。
   階段三依用戶指示把每篇內文第一張圖補設為該篇特色圖（只寫 _thumbnail_id，
   內文一個字都沒動），讓店家日後可在後台自行更換。
   副作用：單篇模板頂部 .jp-single-featimg 與內文會同時出現同一張圖 → 本段修掉。
   =========================================================== */
/* ① 內文第一個「只放一張圖」的段落整段收掉（連段落間距一起，不留空白帶）。
      用 :first-of-type 而非 :first-child ＝ 8766 那篇前面有一段 FB 純文字 div，
      第一個 <p> 才是那張海報（也正是被設為特色圖的那張）。 */
.jp-single-content > p:first-of-type:has(> img:first-child){display:none !important}
/* ② :has() 不支援的舊瀏覽器退路：至少把那張圖本身藏起來（只會多留一段空行，不會重複）。
      ⚠️ 不可用 :only-child：Smush 延遲載入會在同一個 <p> 內補一個 <noscript> 兄弟節點，
         img 因此不是 only-child（2026-07-31 實測 childCount=2）。一律用 :first-child。 */
.jp-single-content > p:first-of-type > img:first-child,
.jp-single-content > p:first-of-type > noscript{display:none !important}
/* ③ 內文那張藏起來後，頂部特色圖變成唯一的呈現 → 不可再 16:9 裁切。
      這批海報多是 A3 直式（595×842），原本 aspect-ratio:16/9 + object-fit:cover
      會把標題與價目全部裁掉。改為依原圖比例完整顯示（寬度仍限 740px 置中）。 */
.jp-single-featimg{aspect-ratio:auto !important}
.jp-single-featimg .brxe-image,.jp-single-featimg img{height:auto !important;object-fit:contain}
/* ④ 例外一篇：9176「平日雙人湯屋五張套票」的海報被 FB 貼過來的 <div dir="auto"> 包住
      （不是 <p>），上面 ①② 的 p:first-of-type 抓不到 → 指名該附件。
      wp-image-9296 ＝ 該篇的特色圖，全站只有這篇用到，不會誤傷別篇。 */
.jp-single-content div[dir="auto"] > img.wp-image-9296{display:none !important}

/* ================================================================
   2026-07-31 最新消息側欄「分類」改成動態清單（只列有文章的分類）
   ----------------------------------------------------------------
   原本是 3 條寫死的 Bricks 元素（名稱／連結／篇數都是靜態文字），
   改成 mu-plugin 的 [jp_news_cats] 短代碼在查詢時才算，客人日後
   新增分類或某分類開始有文章都會自動反映。
   短代碼輸出的是純 <a>/<span>，原本掛在 Bricks 元素上的 inline
   #brxe-xxxx 字體規格沒了，所以在這裡把同一組值補回來（值逐項等同）。
   ================================================================ */
/* 短代碼外層 div 不要變成一個 flex 項目，讓分類列直接當 .jp-side-catlist 的子層，
   維持原本的 gap:2px 與 :last-child 去底線 */
.jp-side-catdyn{display:contents}
.jp-side-catname{font-family:"Noto Sans TC",-apple-system,sans-serif;font-weight:300;
  line-height:1.6;letter-spacing:0.5px}
.jp-side-catcount{font-family:"Noto Sans TC",-apple-system,sans-serif;font-weight:300;
  letter-spacing:0.5px}

/* ================================================================
   2026-07-31 外觀修正 項1｜單篇內文的 emoji 圖不可被「內文插圖全版」規則撐大
   ----------------------------------------------------------------
   上面「內文插入圖：改全版」那條 .jp-single-content img{width:100% !important}
   是為了讓客戶後台插入的任何尺寸海報一律滿版，但它同時命中了 emoji 小圖：
     ① 客人從 FB 貼過來的 🎁
        <img src="https://static.xx.fbcdn.net/images/emoji.php/v9/t84/1/16/1f381.png">
        原生 16×16 → 被撐成 740×740 的模糊色塊（post_06「湯饗時光」實測）
     ② WP 核心 emoji script 在執行期把 👇 換掉後插入的
        <img class="emoji" src="https://s.w.org/images/core/emoji/17.0.2/svg/1f447.svg">
        WP 自己印的 img.wp-smiley,img.emoji{width:1em !important} 與本檔上面那條
        同權重 (0,1,1)，本檔後載入 → 蓋掉它，變成 740×16 的細條
   涵蓋範圍（2026-07-31 全 20 網址 + 13 篇原始碼實查）：
     站上 emoji 圖只有上述兩種來源，兩者 src 都含 "emoji"；
     class 一邊是 FB 的亂數 class（抓不到）、一邊是 WP 的 emoji，
     wp-smiley 是 WP 舊版 class，一併列入以防日後 WP 改回。
     誤傷檢查：13 篇 raw content 共 15 張 img，uploads 圖 0 張 src 含 emoji；
     媒體庫 1033 項無任何檔名含 emoji/smiley → 不會誤中正常圖片。
   權重：class + 屬性/class + 型別 ＝ (0,2,1)，高於上面那條的 (0,1,1)，
         不依賴載入順序也一定生效。
   ⚠️ margin 必須一起蓋掉：上面那條給的是 margin:1.7em 0 !important，
      inline-block 的上下 margin 會計入行框高度 → 不歸零那一行會整個被撐高。
   ================================================================ */
.jp-single-content img[src*="emoji"],
.jp-single-content img.emoji,
.jp-single-content img.wp-smiley{
  width:1.15em !important;height:1.15em !important;
  display:inline-block !important;vertical-align:-.15em;
  margin:0 .07em !important;padding:0 !important;
  border:none !important;box-shadow:none !important;background:none !important}