/* 嘉誼首頁・排版優化版 2(2026-10-17)。疊在 opt.css 後面;針對 opt 版我挑出的十個問題。
   **配色一律照客戶原本**(10-17 Eric 判例):各區、卡片、側欄的底色都不換;拿掉膠囊時只把膠囊底拿掉、字改用區塊裡原本就有的顏色 */

/* ① 左緣統一:首屏、頁首、頁尾跟中間面板的內容同一個寬度,左右緣上下切齊(opt 版首屏 160px、面板 170px,差 10px)。
   1200 以上:兩側各讓出 外框 8 + 側欄 80 + 縫 2 + 面板內距 56 = 146 → 滿版元素用「100% − 292」,面板裡用「100% − 112」,算出來同一條線 */
@media (min-width: 1200px) {
  /* 10-18 Eric:「中間的寬度、header 寬度照我們原版做」= 初版 j-ortho(site-jo):內容不設上限;頁首左右各留 56(logo 左緣 56、最右邊按鈕離右緣 56)。
     同日再一刀:「中間面板有點太寬,縮窄一點,左右 padding 用 8 的倍數」→ 面板內距 79 → 120(1440 寬時內容 1087 → 1005)。
     首屏與頁尾的內容仍對齊面板裡的內容:外框 8 + 側欄 80 + 縫 2 + 面板內距 120 = 每邊 210 */
  .o-center .wrap { width: calc(100% - 240px); }
  .hd .wrap { width: calc(100% - 112px); }
  .hero .wrap, .ft .wrap { width: calc(100% - 404px); }   /* 首屏、頁尾本身已經縮進外框 8 → 404 = (210 − 8) × 2 */
  .hero .hero-nav, .hero .hero-cap { right: 202px; }
}
@media (min-width: 768px) and (max-width: 1199px) {   /* 沒有側欄:外框 8 + 面板內距 48 = 56 */
  .hero .wrap, .hd .wrap, .ft .wrap { width: min(1120px, 100% - 112px); }
  .o-center .wrap { width: min(1120px, 100% - 96px); }
  .hero .hero-nav, .hero .hero-cap { right: calc((100% - min(1120px, 100% - 112px)) / 2); }
}
@media (max-width: 767px) { .hero .wrap, .hd .wrap, .ft .wrap, .o-center .wrap { width: calc(100% - 40px); } }
.o-center .care-body > .wrap { max-width: none; }   /* 客戶把治療卡片那段設窄了 40px,左緣跟上下區塊對不齊 */

/* ② 各區骨架不再一個樣(排版憲法:相鄰骨架不同、同一骨架全頁 ≤2 次)。全頁分配:
   疼痛問題、第一次來=標題在上內容在下 / 兒童早療=圖左字右 / 醫療團隊、常見問題=標題左欄內容右欄 /
   評論、門診時間=標題與說明左右並排一列 / 空間=照片滿版 / 治療方式=綠色帶 / 預約交通=綠色左字右圖 / 品牌故事=大字宣言
   每個大標下面那條短綠線拿掉(每區都一樣的模版公式) */
.o-center .h2::after { display: none; }

@media (min-width: 1024px) {
  /* 兒童早療:圖左字右;實景照變成下方卡片列第一格(不再疊在插畫上) */
  #kids > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
  #kids > .wrap > .fig-wide { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  #kids > .wrap > .sec-head { grid-column: 2; grid-row: 1; }
  #kids > .wrap > .lead { grid-column: 2; grid-row: 2; margin-bottom: 0; }
  #kids > .wrap > .sl-cta { grid-column: 2; grid-row: 3; margin-top: 32px; }
  #kids > .wrap > .sl-kids { grid-column: 1 / -1; grid-row: 4; margin-top: 56px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #kids .h2 .br-m { display: inline; }

  /* 醫療團隊:大標跨整寬一行排完;下面左欄放說明、資格、按鈕,右欄放合照與三位醫師(合照在上,三張卡一排在下)
     (大標原本也放左欄,欄太窄被切成「復健科與骨科專／科醫師，／…／斷。」) */
  #team > .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
  #team > .wrap > .sec-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 24px; }
  #team > .wrap > .lead { grid-column: 1; grid-row: 2; }
  #team > .wrap > .sl-cred { grid-column: 1; grid-row: 3; }
  #team > .wrap > .sl-cta { grid-column: 1; grid-row: 4; margin-top: 32px; }
  #team > .wrap > .sl-team { grid-column: 2; grid-row: 2 / span 4; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  #team .sl-team .team3-img { grid-column: 1 / -1; }
  #team .sl-team .team3-img img { height: auto; aspect-ratio: 16 / 9; }
  #team .sl-team .sl-docs3 { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }

  /* 評論、門診時間:大標在左、說明(門診是當期公告)在右,並排成一列;下面內容整寬 */
  :is(#voices, #hours) > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
  :is(#voices, #hours) > .wrap > .eyebrow { grid-column: 1; grid-row: 1; }
  :is(#voices, #hours) > .wrap > .h2 { grid-column: 1; grid-row: 2; }
  #voices > .wrap > .sub, #hours > .wrap > .hh-ann { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 20px; }
  #voices > .wrap > :not(.eyebrow):not(.h2):not(.sub), #hours > .wrap > :not(.eyebrow):not(.h2):not(.hh-ann) { grid-column: 1 / -1; }
  :is(#voices, #hours) .h2 .br-m { display: inline; }
}
@media (min-width: 768px) and (max-width: 1023px) { #kids .sl-kids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.o-center .fig-wide > img { aspect-ratio: 16 / 9; }
.sl-kids .o-kph { padding: 0; overflow: hidden; counter-increment: none; }
.sl-kids .o-kph::before { content: none; }
.sl-kids .o-kph .inset { position: static; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.sl-kids .o-kph .inset img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }

/* 空間:輪播照片拉到面板滿寬(左右碰到面板邊),整頁才有一區是照片主導 */
#space { overflow: hidden; container-type: inline-size; }
#space .s3g { margin-left: calc(50% - 50cqw); margin-right: calc(50% - 50cqw); }

/* ④ 首屏減量:右下說明框、底部九格輪播條拿掉兩塊毛玻璃,改成直接壓在照片的暗角上;輪播條的字 12 → 14 */
.hero .hero-cap { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; width: auto; justify-items: end; text-align: right; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.hero .hero-nav { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
@media (min-width: 1200px) { .hero .hero-cap { bottom: 92px; } }
.hero .hn-l { font-size: 14px; }

/* ⑤ 重複的品牌字(HTML 在 build-opt2.py 拿掉);頁尾少了「本頁」那欄 → 欄位改三欄 */
@media (min-width: 1025px) { .ft-top { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } }

/* ⑥ AI 模版味的裝飾:醫師卡左邊粗綠邊、院長那行紅字、評論卡大引號與螢光筆底、不能按的膠囊 */
.o-center .sl-docs3 li { border-left: 0; }
.o-center .sl-docs3 .sd-l { color: inherit; }
.o-center .rv-c figure::before { content: none; }
.o-center .rv-q mark { background: none; color: inherit; font-weight: 500; }
.o-center .rh-pill { background: none; padding: 0; border-radius: 0; color: #3B5348; font-weight: 700; }
.o-center .rh-pill.open { background: none; color: #577A6E; }
.o-center .rh-pill.open::before { background: currentColor; }
.o-center .now-next b { background: none; color: inherit; padding: 0; border-radius: 0; font-weight: 700; font-size: inherit; vertical-align: baseline; }

/* ⑧ 門診時間減層:復健那張卡拆掉外框變成一行資訊;週班表的醫師名、時段放大(原本 12–13px,長輩讀不到) */
.o-center .rehab-card { background: none; border: 0; padding: 0; margin-top: 24px; }
.o-center .week .day-h { font-size: 16px; }
.o-center .week .sl-t { font-size: 14px; }
.o-center .week .sl-n { font-size: 16px; font-weight: 500; }
.o-center .week .sl-n small, .o-center .week .sl-t small { font-size: 14px !important; }

/* ⑨ 治療方式綠色帶右上角的「03」:其實是三張卡的編號 01/02/03,卡片沒設定位,三個數字全疊到綠色帶右上角 → 各回各的卡片右上 */
.o-center .sl-3j a { position: relative; }

/* ⑩ 字距只用 0 / .05em(排版憲法);例外:全大寫的英文小標(BY AREA、JUST RIGHT、PAIN…)用 .1em——大寫字母不拉開會黏成一團;
   側欄直排字維持原本(直排要鬆,初版 j-ortho 也是) */
html body :is(.hd, .hero, .o-center, .ft, .rr-drawer) :is(h1, h2, h3, h4, p, a, span, b, small, em, li, dt, dd, button, summary, figcaption, time, strong, label) { letter-spacing: .05em !important; }
html body :is(.j-en, .tabs-f em, .fw-en, .tx-k, .hc-n, .hd-nav small, .band-pair, .rv-k) { letter-spacing: .1em !important; }
html body :is(.rv-num, .rj-en) { letter-spacing: 0 !important; }
/* 字級收進帳本 12 / 14 / 16 / 18 / 20…:13 → 14、15 → 16、17 → 18、10–11 → 12 */
html body :is(.hd-nav a, .hd-cta, .td-i, .td-more, .ft-col p, .s3g figcaption, .rr-b, .mnav summary) { font-size: 16px; }
html body :is(.tab small, .faq-tabs .tab small, .rl-cur, .rl-vert, .ft-h, .ft2 .ft-c, .day-tag, .sl .sub-tag) { font-size: 14px; }
html body .faq-i summary::before { font-size: 14px; }
html body :is(.sl-cta p, .s3g-sub, .faq-i summary, .rr-drawer nav a) { font-size: 18px; }
html body .hd-nav small { font-size: 12px; }

/* 醫師卡:「復健科專科醫師」這類專科頭銜在窄卡裡會被切成兩半 → 自己一行 */
.o-center .sl-docs3 .sd-n span { display: block; margin: 2px 0 0; }
/* 兒童早療插畫底下的陰影拿掉(全站陰影 ≤2) */
.o-center .fig-wide, .o-center .fig-wide > img { box-shadow: none; }

/* ══ 10-18 Eric:「讀取原版的區塊設定」——外框、首屏、頁尾、頁首、側欄、面板照初版 j-ortho(site-jo)量出來的設定 ══
   初版(1440 寬):整頁 8px 外框;首屏 = 縮進 8、圓角 8、高 = 畫面 −16;頁首放在首屏裡、logo 離上離左 56、跟著首屏捲走;
   側欄寬 80、黏在頂 8、高 = 畫面 −16,左欄 logo 離頂 22、右欄選單離頂 16、按鈕離底 16;面板底部留白 120;頁尾縮進 8、圓角。
   顏色照客戶原本(外框與縫 = 客戶線色 #CECAC1)*/
@media (min-width: 768px) {
  html body { padding: 8px; background: var(--o-base); background-image: none; }
  .o-body { padding: 8px 0; }
  /* 畫面頂端、底端固定一條 8px 外框,四個角做成內凹小圓角(內容捲過去時看起來是在圓角窗裡,初版 article::before/after 同做法) */
  html body::before, html body::after { content: ""; position: fixed; left: 0; right: 0; height: 16px; z-index: 95; pointer-events: none; background-repeat: no-repeat; }
  html body::before { top: 0;
    background-image: linear-gradient(var(--o-base), var(--o-base)), radial-gradient(circle at 100% 100%, transparent 7.5px, var(--o-base) 8px), radial-gradient(circle at 0 100%, transparent 7.5px, var(--o-base) 8px);
    background-size: 100% 8px, 8px 8px, 8px 8px; background-position: 0 0, 8px 8px, calc(100% - 8px) 8px; }
  html body::after { bottom: 0;
    background-image: linear-gradient(var(--o-base), var(--o-base)), radial-gradient(circle at 100% 0, transparent 7.5px, var(--o-base) 8px), radial-gradient(circle at 0 0, transparent 7.5px, var(--o-base) 8px);
    background-size: 100% 8px, 8px 8px, 8px 8px; background-position: 0 100%, 8px 0, calc(100% - 8px) 0; }
  /* 首屏:縮進外框、高 = 畫面 −16;圓角 8 用「四個角疊一小塊外框色」畫出來,不用 border-radius 裁切
     (10-18 Eric 抓到捲動時首屏出現大片深綠方塊:圓角裁切會讓瀏覽器每一格都把整個首屏透過遮罩重畫,
      加上首屏捲動時每格都在變的放大與模糊,大圖來不及畫完的區塊就露出首屏底色 #2d3a34。初版 j-ortho 也是疊角、不裁切) */
  .hero { min-height: calc(100vh - 16px); min-height: calc(100svh - 16px); }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background-repeat: no-repeat; background-size: 8px 8px;
    background-image: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--o-base) 8px), radial-gradient(circle at 0 100%, transparent 7.5px, var(--o-base) 8px),
      radial-gradient(circle at 100% 0, transparent 7.5px, var(--o-base) 8px), radial-gradient(circle at 0 0, transparent 7.5px, var(--o-base) 8px);
    background-position: 0 0, 100% 0, 0 100%, 100% 100%; }
  /* 捲動時首屏每格都要重畫的兩個效果拿掉:照片層跟著放大(只留往下沉)、文字變模糊(只留淡出上移)——大圖每格重新放大、整塊字每格重新模糊最吃重畫 */
  .mo .hero-stage { transform: translate3d(0, calc(var(--hp, 0) * 22%), 0); }
  .mo .hero .hero-in { filter: none; }
  /* 頁尾:縮進外框、圓角 8 */
  .ft.ft2 { border-radius: 8px; }
}
@media (min-width: 768px) and (max-width: 1199px) { .hd { top: 8px; } }   /* 平板的常駐頁首黏在外框下面 */

@media (min-width: 1200px) {
  /* 面板上下留白照初版 120 */
  :root { --o-pad: 120px; }
  /* 頁首(10-19 Eric:「其實不用隱藏式 header,因為右邊有漢堡按鈕了」——10-18 做過 Headroom,拿掉):
     照初版——透明疊在首屏照片上、logo 離上離左 56,跟著首屏一起捲走;捲過首屏後選單交給右側欄的漢堡鈕。
     控制收放的 opt.js 也不載了(build-opt2.py) */
  .hd { position: absolute; top: 0; left: 0; right: 0; z-index: 90; transition: none; }
  .hd .hd-in { height: auto; padding-top: 56px; align-items: center; }
  .hd .jprog { display: none; }
  .hero .hero-in { padding-top: 168px; }
  /* 側欄:照初版的內距;靠中間那側的上下各一個內凹小角,中間內容在畫面頂端、底端也是圓角 */
  .o-body > .rail-l { padding: 22px 0 16px; }
  .o-body > .rail-r { padding: 16px 0; }
  .o-body > .rail::before, .o-body > .rail::after { content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none; }
  .o-body > .rail-l::before { top: 0; left: 82px; background: radial-gradient(circle at 100% 100%, transparent 7.5px, var(--o-base) 8px); }
  .o-body > .rail-l::after { bottom: 0; left: 82px; background: radial-gradient(circle at 100% 0, transparent 7.5px, var(--o-base) 8px); }
  .o-body > .rail-r::before { top: 0; right: 82px; background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--o-base) 8px); }
  .o-body > .rail-r::after { bottom: 0; right: 82px; background: radial-gradient(circle at 0 0, transparent 7.5px, var(--o-base) 8px); }
}

/* 10-18 Eric:「header menu 改置中,標題列左邊對齊 menu 左邊;下方的計數頁 bar 也置中」
   選單在整條頁首正中間(實底條也是,條本身左右對稱);首屏那組字(眉標、大標、副標、按鈕)左緣跟著選單左緣(opt2.js 量 → --o-navl);
   底部「走進嘉誼」九格條與上面的「01 / 09 說明」一起置中(用左右 0 + 自動邊距置中,不用 transform,說明的進場動畫會用到 transform) */
@media (min-width: 1200px) {
  .hd .hd-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .hd .hd-cta { margin-left: auto; }   /* 選單抽離後「線上預約」要自己推到最右邊 */
  .hero .hero-nav, .hero .hero-cap { left: 0; right: 0; margin-inline: auto; width: max-content; }
  .hero .hero-cap { justify-items: center; text-align: center; }
}

/* ══ 字級系統(10-18 Eric:「統一這邊的字體,最小字體不要小於 18px,設計一個字體系統」)══
   **中文**最小 18(客戶都是中文閱讀者;英文小標可以更小,用 --t-en-s 12),往上每級 ≈1.33 倍(排版憲法:相鄰字級差 ≥1.2 倍,一眼看得出不同):
     --t-body 18 內文/最小:選單、按鈕、眉標、說明、計數、九格條
     --t-lead 24 引言:主張句、說明框標題
     --t-h3   32 小標(之後各區用)
     --t-h2   42 區塊大標(之後各區用)
     --t-xl   56 預留
     --t-disp 72 展示:首屏大標
   中文 Noto Sans TC、英文與數字 Inter(照客戶原本)。字距照 ⑩:.05em,全大寫英文 .1em。
   先套頁首與首屏;其他區塊之後一區一區 tune 時再套 */
:root { --t-body: 18px; --t-lead: 24px; --t-h3: 32px; --t-h2: 42px; --t-xl: 56px; --t-disp: 72px; --t-en-s: 12px; --t-en-m: 15px; }   /* --t-en-s 12 英文小標、--t-en-m 15 英文副標(地板 18 只管中文;15 跟 12、18 都差 ≥1.2 倍) */

/* 頁首:選單中文 18;底下那行英文小字(PAIN、TREATMENT…)是客戶文字,保留,用英文小標 12
   (10-18 Eric:「18px 的地板是指中文,客戶都是中文閱讀者;英文可以小一點」) */
html body .hd .hd-nav a { font-size: var(--t-body); }
html body .hd .hd-nav small { font-size: var(--t-en-s); letter-spacing: .1em !important; }
html body .hd .hd-cta { font-size: var(--t-body); min-height: 48px; padding-inline: 24px; }

/* 首屏(客戶樣式裡有一串 12/16px 加 !important 的規則,這裡也要 !important 才壓得過) */
html body .hero .hero-eyebrow { font-size: var(--t-body) !important; }
html body .hero .hero-h1 { font-size: clamp(40px, 5vw, var(--t-disp)); }
html body .hero .hero-en { font-size: var(--t-lead) !important; letter-spacing: .05em !important; }   /* 平板手機 slogan 24(電腦 32 在首屏層級段) */
html body .hero .hero-sub { font-size: var(--t-lead) !important; }
html body .hero .hero-sub2 { font-size: var(--t-body) !important; }
html body .hero .door-go .door-a { font-size: var(--t-body) !important; }
html body .hero .hc-n, html body .hero .hc-n b { font-size: var(--t-body) !important; }
html body .hero .hc-t { font-size: var(--t-lead) !important; }
html body .hero .hc-s { font-size: var(--t-body) !important; }
html body .hero .hn-k { font-size: var(--t-body) !important; }
html body .hero .hn-l { font-size: var(--t-body) !important; }

/* 10-18 Eric:「下方的 bar 改成類似客戶做的版本,有個毛玻璃底,用長膠囊狀,寬度整個拉開,目前太擠」
   九格條=一整條長膠囊:左右各縮 48(左右緣對齊頁首 logo 左緣與「線上預約」右緣,都是離畫面邊 56);深色半透明+毛玻璃;
   九格平均分配剩下的寬度,每格的進度線拉滿整格;上面的「01 / 09 說明」跟著往上讓位 */
@media (min-width: 1200px) {
  .hero .hero-nav { left: 48px; right: 48px; width: auto; margin: 0; bottom: 32px; gap: 40px; padding: 16px 16px 16px 32px; border-radius: 999px;
    background: rgba(31, 42, 37, .5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .14); }
  .hero .hero-nav ol { flex: 1; gap: 24px; }
  .hero .hero-nav li { flex: 1; }
  .hero .hn-b { width: 100%; min-width: 0; gap: 10px; padding: 6px 0; }
  .hero .hn-pause { width: 48px; height: 48px; }
  .hero .hero-cap { bottom: 152px; }
}

/* 10-18 Eric:「太寬了,寬度對齊下方中間區塊的資訊寬度;計數頁的線條要對齊上方的文字;播放鍵跟膠囊半圓沒有同心圓」
   ① 膠囊左右緣 = 面板內容左右緣(1440 寬:210–1215;首屏本身縮進 8 → 左右各 202)
   ② 每格的進度線只跟那格的字一樣寬(按鈕不撐滿格子),九格用「頭尾貼齊、中間平均分」排開
   ③ 膠囊高固定 88 → 右端半圓半徑 44;暫停鈕 48 → 圓心要離右緣 44 = 外框 1 + 右內距 19 + 半徑 24,上下也各留 20,跟半圓同心
   (「走進嘉誼」與 JJJ 是客戶的文字,一律保留——10-18 Eric;放不下九格字時改細線,見下一段) */
@media (min-width: 1200px) {
  .hero .hero-nav { left: 202px; right: 202px; height: 88px; padding: 0 19px 0 32px; gap: 24px; }
  .hero .hero-nav ol { justify-content: space-between; gap: 0; }
  .hero .hero-nav li { flex: none; }
  .hero .hn-b { width: auto; }
}

/* 10-18 Eric:「這個 bar 應該要做成 RWD 的」+「走進嘉誼和 JJJ 小標誌要保留,那是客戶的文字,不能更改」
   三種寬度都是同一條毛玻璃長膠囊、貼在首屏底部,左右對齊內容寬;左邊永遠是 JJJ+走進嘉誼,右邊暫停鈕跟右端半圓同心。
   電腦版九格寫字(自然寬度+圓點,見檔尾);平板手機改九段等寬細線
   (像限時動態的進度條,目前那段跑進度、點任一段跳過去,可按高度 44),目前這張叫什麼交給膠囊上方「03 / 09 名稱」 */
.hero .hn-k { display: inline-flex; }
@media (max-width: 1199px) {   /* 平板、手機:九段細線(電腦版改成自然寬度+圓點,見檔尾) */
  .hero .hero-nav ol { flex: 1; gap: 6px; justify-content: stretch; }
  .hero .hero-nav li { flex: 1; }
  .hero .hn-b { width: 100%; min-width: 0; min-height: 44px; align-content: center; padding: 0; }
  .hero .hn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 平板:膠囊左右對齊內容寬(首屏縮進 8 → 各 48)、高 72;暫停鈕 48,圓心離右緣 36 = 外框 1 + 內距 11 + 半徑 24 */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero .hero-nav { left: 48px; right: 48px; top: auto; bottom: 24px; width: auto; height: 72px; margin: 0; gap: 24px; padding: 0 11px 0 24px; border-radius: 999px;
    background: rgba(31, 42, 37, .5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .14); }
  .hero .hn-pause { width: 48px; height: 48px; }
  .hero .hero-cap { left: 0; right: 0; margin-inline: auto; width: max-content; top: auto; bottom: 120px; justify-items: center; text-align: center; }
  .hero { min-height: calc(100vh - 88px); min-height: calc(100svh - 88px); }   /* 平板頁首常駐在首屏上方(72)+ 外框 16 */
  .hero .hero-in { padding-top: 40px; padding-bottom: 216px; }
}
/* 手機:膠囊左右各 20(對齊內容寬)、高 56;暫停鈕 40,圓心離右緣 28 = 外框 1 + 內距 7 + 半徑 20;
   上方說明照留(客戶文字);首屏文字底部讓出膠囊與說明的位置 */
@media (max-width: 767px) {
  .hero .hero-nav { left: 20px; right: 20px; top: auto; bottom: 16px; height: 56px; gap: 12px; padding: 0 7px 0 16px; border-radius: 999px;
    background: rgba(31, 42, 37, .5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .14); }
  .hero .hn-pause { width: 40px; height: 40px; }
  .hero .hn-mk { width: 24px; }
  .hero .hero-cap { left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 40px); top: auto; bottom: 88px; padding: 0; border: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: grid; grid-auto-flow: row; justify-items: center; text-align: center; }
  .hero .hero-in { padding-bottom: 208px; }
}
/* 平板、手機:膠囊上方的說明排兩行——「03 / 09」與名稱並排一行,說明句在下一行(三行太高,會壓到首屏文字) */
@media (max-width: 1199px) {
  .hero .hero-cap { grid-template-columns: auto auto; column-gap: 12px; align-items: baseline; }
  .hero .hero-cap .hc-s { grid-column: 1 / -1; }
}

/* 手機:常見問題的分類頁籤是一條橫向捲動列,它的總寬把整個兩欄格撐到 832px、整頁跟著左右溢出 → 格子的欄允許縮到 0,頁籤列在自己裡面捲 */
.o-center .faq-in > * { min-width: 0; }

/* 10-18 Eric:「bar 改成 診所門口・掛號櫃檯・… 這種形式,自然排列;照自然寬度置中做,圓點兩邊留 12」
   電腦版膠囊不再對齊任何欄線,寬度 = 內容自然的寬(1440 寬約 1,170),置中;九個名稱之間放 4px 圓點、左右各留 12;
   每格底下的進度線照舊等於字寬。圓點對齊名稱那一行字的中線(按鈕上內距 6 + 半個行高 − 圓點半徑 2) */
@media (min-width: 1200px) {
  .hero .hero-nav { left: 0; right: 0; margin-inline: auto; width: max-content; }
  .hero .hero-nav ol { flex: none; justify-content: flex-start; gap: 0; }
  .hero .hero-nav li { display: flex; align-items: flex-start; font-size: var(--t-body); }
  .hero .hero-nav li + li::before { content: ""; flex: none; width: 4px; height: 4px; margin: calc(6px + .925em - 2px) 12px 0; border-radius: 50%; background: rgba(255, 255, 255, .6); }
}

/* ══ 10-18 首屏資訊層級整理(Eric:「首屏資料層級很亂」→ 同意五點,第 4 點改成「文字移到左側暗區,不調照片——客戶之後會換圖」)══
   ① 兩區各一種對齊:左側「訊息區」全部靠左、左緣 = 下方面板內容那條線(1440 寬 210;不再跟選單左緣走);下方「輪播區」全部置中
   ② 訊息區三層、組內近組間遠:眉標 →16→ 大標 72 →12→ 英文副標 15 →40→ 引言 24 →12→ 內文 18 →40→ 按鈕
   ③ 輪播說明從三行收成一行「02 / 09　說明句」;名稱不再寫一次(九格條上被選中那格就是它)——只在電腦版,平板手機九格沒寫字所以名稱照留
   ④ 文字在左側暗區:照片左半本來就有客戶的暗角,換圖也不會壓到臉
   ⑤ 兩顆「線上預約」同一個樣子:首屏那顆照頁首那顆(客戶的綠、白字、膠囊、高 48) */
@media (min-width: 1200px) {
  .hero .hero-in > * { margin-top: 0; margin-bottom: 0; }
  .hero .hero-eyebrow { margin-bottom: 16px; }
  .hero .hero-h1 { margin-bottom: 12px; }
  html body .hero .hero-en { margin-bottom: 40px; font: 500 var(--t-h3)/1.25 Inter, sans-serif !important; letter-spacing: .05em !important; }   /* 10-19 Eric:slogan 太小、客戶很在意 → 15 改 32(英文句子字距 .05em) */
  .hero .hero-sub { margin-bottom: 12px; }
  .hero .hero-sub2 { margin-bottom: 40px; }
  .hero .doors { margin: 0; }
  .hero .hero-cap { display: flex; align-items: baseline; justify-content: center; gap: 16px; bottom: 136px; }
  .hero .hero-cap .hc-t { display: none; }
  .hero .hero-cap .hc-s { display: block; }
}
.hero .door-go { min-height: 48px; padding: 0 24px; border: 0; background: #577A6E !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .door-go .door-a { color: #fff !important; }
.hero .door-go:hover { background: #4C6B60 !important; }

/* 10-19 Eric:「統一」——頁首選單項目間距 22 → 28,跟首屏膠囊的名稱間距(圓點 4 + 兩邊各 12)同一個值 */
@media (min-width: 1200px) { .hd .hd-nav { gap: 28px; } }

/* (10-19 試過「大標兩行+slogan 上下細線」,Eric 看過後拿掉;留白回到加線前:大標→英文 12、英文→引言 40、首屏上 168 下 176) */

/* ══ 10-19 首屏換張動畫(Eric:「進門用 03,後面的頁面轉換用 J」;J 置中)══ 動畫在 opt2-hero.js
   客戶原本:每張淡入淡出 2 秒+模糊、門口→櫃檯是畫面正中切開的自動門(那兩片圖蓋在暗色漸層上面,一開門整張變亮)。
   現在:淡入淡出與模糊關掉,舊的那張留在下面(.out 不透明)等新的那張長滿;客戶的自動門不用 */
.hero .hs, .hero .hs.on, .hero .hs.out { transition: none !important; filter: none !important; }
.hero .hs.out { opacity: 1; }
.hero .hero-door { display: none !important; }

/* ══ 10-19 「今天」條改成儀表板(Eric:「應該以日期為主,日期大字,再分三區 門診 復健 公告,像 dashboard」)══
   左:今天 / 日期大字(Inter 56)/ 星期 / 完整門診時間 →;右:門診、復健、公告三格,格與格之間一條直線(--ln)。
   每格 = 綠色小標+內容(「・」處換行,opt2-today.js);沒有公告的日子自動變兩格。顏色全照客戶原本 */
html body .o-center .today-in { display: grid; grid-template-columns: auto; grid-template-rows: auto 1fr; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; align-items: start; padding: var(--s-7) 0; }
html body .o-center .today-in > .td-k { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; margin: 0; padding-right: var(--s-7); line-height: 1.6; }
html body .o-center .today-in > .td-more { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; margin: var(--s-4) 0 0; padding-right: var(--s-7); }
html body .o-center .today-in > .td-i { grid-column: auto; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin: 0; padding: 0 var(--s-5); border-left: 1px solid var(--ln); line-height: 1.6; }
html body .o-center .today-in > .td-i:last-of-type { padding-right: 0; }
/* 三格的小標對齊日期大字(10-19 Eric:「門診這種標題對齊 10/19,現在下面很空」):往下讓出「今天」那一行(18×1.6)+ 間距 8,
   小標與 10/19 的頂端同一條線,三格內容跟「10/19+週一」同高 */
@media (min-width: 901px) { html body .o-center .today-in > .td-i { padding-top: calc(1.6em + var(--s-2)); } }
/* 三格內容置底、對齊「完整門診時間 →」(10-19 Eric:「下一診…顏韻珊醫師(復健科)置底,對齊完整門診時間 →,用 auto space 邏輯看看」):
   橫向分三列 = 小標列 / 伸縮的空列(auto space)/ 內容列;三格共用這三列(subgrid),
   內容列高 = 最長那格(三行),三格內容第一行同高、最長那格的最後一行跟「完整門診時間 →」同一行;短的那格空間留在下面。
   左欄「今天/日期/星期」貼頂、「完整門診時間 →」貼底,兩個都跨三列;日期塊下面預留一行+16 給連結,兩者不會疊到。
   小標下面保底 8,內容變多時空列縮到 0、整條跟著長高 */
@media (min-width: 901px) {
  html body .o-center .today-in { grid-template-rows: auto 1fr auto; }
  html body .o-center .today-in > .td-k { grid-row: 1 / span 3; align-self: start; padding-bottom: calc(1lh + var(--s-4)); }
  html body .o-center .today-in > .td-more { grid-row: 1 / span 3; align-self: end; align-items: flex-end; margin: 0; line-height: 1.6; }   /* 平板寬客戶給連結最小高 44(好點),字改貼框底,才跟內容最後一行同線 */
  html body .o-center .today-in > .td-i:not([hidden]) { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; gap: 0; padding-top: 0; }
  html body .o-center .today-in > .td-i > b { grid-row: 1; margin: calc(1.6em + var(--s-2)) 0 var(--s-2); }
  html body .o-center .today-in > .td-i > span { grid-row: 3; align-self: start; }
}
html body .o-center .td-k .td-src { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html body .o-center .td-k .td-date { display: flex; flex-direction: column; margin: var(--s-2) 0 0; }
html body .o-center .td-k .td-date b { font: 500 var(--t-xl)/1 Inter, sans-serif; letter-spacing: -.01em; color: #3B5348; }
html body .o-center .td-k .td-date span { margin: var(--s-2) 0 0; color: #505150; letter-spacing: .05em; }
@media (max-width: 900px) {
  /* 手機平板:上面一排「日期|完整門診時間」,下面三格改成三列,列與列之間橫線 */
  html body .o-center .today-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; grid-auto-flow: row; padding: var(--s-5) 0 var(--s-2); }
  html body .o-center .today-in > .td-k { padding: 0 0 var(--s-4); }
  html body .o-center .today-in > .td-more { grid-column: 2; grid-row: 1; margin: 0 0 var(--s-4); padding: 0; }
  html body .o-center .today-in > .td-i { grid-column: 1 / -1; grid-row: auto; flex-direction: row; gap: var(--s-4); padding: var(--s-3) 0; border-left: 0; border-top: 1px solid var(--ln); }
  html body .o-center .today-in > .td-i b { flex: none; }
  html body .o-center .td-k .td-date b { font-size: var(--t-h2); }
}

/* ══ 10-19 側欄(Eric)══
   ① 右側欄整排按鈕(含漢堡鈕):「改成我們原本初版的形式,不要圓形,用 cube」→ 照初版 j-ortho:48 方塊、圓角 4、上下縫 2、
      滑過往左展開出現文字(圖示在左、字在右)。顏色照客戶原本(Eric:「按照客戶的,不要白色的」):線上預約深綠 #3B5348、
      其他客戶綠 #577A6E(客戶原本最後一顆「本週門診時間」是白底,也改綠),白圖示;漢堡鈕客戶綠、滑過/打開深綠。LINE 換成 LINE 官方圖示(Font Awesome,build-opt2.py)
   ② 左側欄每區的小 J:「應該是淺色,現在跟該 section 的 J 區別不大」→ 其他區全部同一個淺色(客戶原本的 #C9C3B8,不再漸層),
      目前那區深綠 #3B5348 而且放大;滑過客戶原本的中綠 #749986 */
@media (min-width: 1200px) {
  html body .o-body > .rail-r .rr-list { gap: 2px; }
  html body .o-body > .rail-r .rr-k { margin-bottom: var(--s-2); }
  html body .o-body > .rail-r .rr-b { height: var(--btn-h); max-width: var(--btn-h); justify-content: flex-start; border-radius: 4px; background: var(--c-green); color: #fff; box-shadow: none; transition: max-width .45s cubic-bezier(.16, 1, .3, 1), background-color .2s; }
  html body .o-body > .rail-r .rr-b.rr-main { background: var(--c-green); } /* 10-24 Eric 新規則:深綠只在品牌綠底上用 → 客戶綠 */
  html body .o-body > .rail-r .rr-b svg { order: -1; flex: none; width: var(--btn-h); height: 20px; }
  html body .o-body > .rail-r .rr-b .rr-t { padding: 0 var(--s-5) 0 0; }
  html body .o-body > .rail-r .rr-b:hover, html body .o-body > .rail-r .rr-b:focus-visible { max-width: 280px; }
  html body .o-body > .rail-r .rr-menu { width: var(--btn-h); height: var(--btn-h); border: 0; border-radius: 4px; background: var(--c-green); transition: background-color .2s; }
  html body .o-body > .rail-r .rr-menu .rr-bars i { background: #fff; }
  html body .o-body > .rail-r .rr-menu:hover, html body .o-body > .rail-r .rr-menu[aria-expanded="true"] { background: var(--c-green-dk); }
  html body .o-body > .rail-l .rl-nav li i { background: #C9C3B8 !important; }
  html body .o-body > .rail-l .rl-nav a:hover i { background: #749986 !important; }
  html body .o-body > .rail-l .rl-nav a.on i { background: var(--c-green) !important; } /* 10-24 Eric 新規則:深綠只在品牌綠底上用 → 客戶綠 */
}
/* LINE 官方圖示是實心的(其他圖示是線條) */
html body svg.ic-fill { fill: currentColor !important; stroke: none !important; }