/* 嘉誼首頁・排版優化版(2026-10-17)。排在客戶 v2.css / slim.css 與九點 jj-edit.css 後面,只寫要改的。
   骨架借初版 j-ortho:各區塊是圓角 8 的面板、彼此留 2px 縫;首屏與頁尾滿版不帶側欄,側欄只在內容區出現。
   **配色一律沿用客戶原本的**(10-17 Eric:「他用的顏色不能換」):各區、卡片、側欄的底色都不動,
   只有新多出來的「縫」與外框需要一個顏色 → 用客戶自己的線色 --bone #CECAC1,面板才分得出來。
   token:
     縫與外框 --o-base #CECAC1(客戶 v2.css 的 --bone)/ 面板預設 = 客戶頁面底色 var(--paper) #EAE5DA
     線:靜態 --o-line rgba(80,81,80,.14) / 可按的外框 --o-line-2 rgba(80,81,80,.3)(排版憲法:灰線兩階)
     圓角只用 8 / 12 / 999;陰影全站只留選單抽屜一處
     間距帳本:縫 2 / 外框 8 / 卡內 24 / 元件間 40 / 面板上下 112(手機 64) */
:root { --o-base: #CECAC1; --o-line: rgba(80, 81, 80, .14); --o-line-2: rgba(80, 81, 80, .3); --o-pad: 112px; }
@media (max-width: 767px) { :root { --o-pad: 64px; } }

@media (min-width: 1200px) { html body { padding-left: 0; padding-right: 0; } }

/* ── 中間內容:左側欄|面板欄|右側欄,縫 2px、外框 8px ─────────────────────────── */
.o-body { padding: 8px; background: var(--o-base); }
.o-center { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }   /* 欄寬鎖住:空間輪播那排照片很長,不鎖會把整欄撐寬 */
.o-center > * { position: relative; background: var(--paper); border-radius: 8px; }
.o-center .wrap { width: min(1120px, 100% - 96px); }
@media (min-width: 1200px) {
  .o-body { display: grid; grid-template-columns: 80px minmax(0, 1fr) 80px; gap: 2px; align-items: start; }
  .o-center .wrap { width: min(1120px, 100% - 160px); }
  .o-body > .rail { position: sticky; top: 8px; bottom: auto; left: auto; right: auto; width: auto; height: calc(100vh - 16px); z-index: 40;
    background: #EAE5DA; border: 0; border-radius: 8px; }   /* 側欄底色照客戶原本 */
}
@media (max-width: 767px) {
  .o-body { padding: 0; }
  .o-center > * { border-radius: 0; }
  .o-center .wrap { width: calc(100% - 40px); }
}

/* 各區塊=一塊面板:統一上下留白;底色照客戶原本(米色、淺米、淡綠、漸層、綠) */
.o-center .sec { padding: var(--o-pad) 0; }
.o-center .care-sec { display: grid; gap: 2px; background: none; }
.o-center .care-sec > .band { border-radius: 8px; padding: 96px 0; }
.o-center .care-sec > .care-body { background: var(--paper); border-radius: 8px; padding: 96px 0 var(--o-pad); }
.o-center .sec-green { background: #577A6E; }
.o-center .bgw { border-radius: inherit; }
@media (max-width: 767px) { .o-center .care-sec > * { border-radius: 0; } .o-center .care-sec > .band { padding: 64px 0; } .o-center .care-sec > .care-body { padding-top: 56px; } }

/* 「今天」那條:第一塊面板;三組資訊用同一套欄線,標籤改純文字(不能按的東西不包膠囊) */
.o-center .today { border-bottom: 0; }
.o-center .today-in { padding: 24px 0; }
.o-center .td-i b { background: none; color: #577A6E; padding: 0; font-size: 16px; font-weight: 700; border-radius: 0; }
.o-center .td-k { font-size: 16px; }

/* ── 左右側欄(1200 以上):米色面板、黏在內容區兩側;右欄的圓形按鈕放到右下 ─────────────── */
@media (min-width: 1200px) {
  .o-body > .rail-l { padding: 24px 0; }
  .o-body > .rail-r { padding: 16px 0 24px; }
  .o-body > .rail-r .rr-menu { margin-bottom: 24px; }
  .o-body > .rail-r .rr-list { margin: auto 0 0; padding-right: 16px; gap: 8px; }
  .o-body > .rail-r .rr-b { box-shadow: none; }
  .o-body > .rail-r .rr-top { margin-top: 16px; }
  .rr-drawer { top: 8px; bottom: 8px; right: 90px; border-radius: 8px; border-left: 0; }
}

/* ── 頁首(1200 以上):疊在首屏上、透明白字;離開首屏換實底;往下捲藏、往上捲出現(opt.js 切 class) ──────── */
@media (min-width: 1200px) {
  .hd { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
  .hd .hd-logo { display: block; }
  .hd .hd-nav { margin-left: auto; }
  .hd .hd-cta { margin-left: 0; }
  .hd:not(.o-solid) .hd-logo img { filter: brightness(0) invert(1); }
  .hd:not(.o-solid) .hd-nav a, .hd:not(.o-solid) .hd-nav small { color: #fff; }
  .hd.o-solid { background: rgba(234, 229, 218, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--o-line); }
  .hd.o-hide { transform: translateY(-100%); }
  .hd:not(.o-solid) .jprog { display: none; }
}

/* ── 首屏:滿版、一整個畫面高;頁首疊在上面 ─────────────────────────── */
@media (min-width: 1200px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero .hero-in { padding: 136px 0 176px; }
  .hero .hero-nav { right: max(24px, calc((100vw - 1120px) / 2)); bottom: 40px; }
  .hero .hero-cap { right: max(24px, calc((100vw - 1120px) / 2)); bottom: 112px; border-radius: 12px; }
}
/* 「直接預約」只剩一張卡 → 收成一顆按鈕(可以按的才用膠囊) */
.hero .doors { display: block; margin-top: 8px; }
.hero .door-go { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; box-shadow: none; }   /* 底色、白字、細框照客戶原本 */
.hero .door-go .door-k, .hero .door-go .door-t { display: none; }
.hero .door-go .door-a { margin: 0; font-size: 17px; font-weight: 500; }
.hero .door-go:hover { transform: none; }

/* ── 頁尾:滿版、上緣兩個小角 ─────────────────────────── */
.ft.ft2 { border-radius: 8px 8px 0 0; }
.o-pv { margin: 18px 0 0; font-size: 12px; color: rgba(255, 255, 255, .6); }
@media (max-width: 767px) { .ft.ft2 { border-radius: 0; } }

/* ── 中間各區的閱讀優化 ─────────────────────────── */
/* 標題右邊的大英文跟眉標的英文重複(冗餘不上場)→ 拿掉;標題就能一行排完,不再有「斷。」單字掉到第二行 */
.o-center .sec-en { display: none; }
.o-center .sec-head { display: block; }

/* 直堆一律對左(排版憲法):置中的小標與按鈕列改靠左 */
.o-center .sl-k { text-align: left; margin-bottom: 24px; }
.o-center .sl-cta, .o-center .sl-cta-c { justify-content: flex-start; margin-top: 40px; }

/* 卡片:底色照客戶原本(白卡),只拿掉陰影 */
.o-center :is(.sl-tc, .sl-kids li, .first-photo .steps4 li, .sl-docs3 li, .rehab-card) { box-shadow: none; }

/* 疼痛問題:三個頁籤跟底下部位表用同一組三欄線(左右緣對齊表格欄) */
.o-center .tabs-f { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; padding: 0; margin: 0 0 32px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.o-center .tabs-f .tab { border-radius: 8px; padding: 16px 20px; border: 1px solid var(--o-line-2); }
.o-center .tabs-f .tab.on { border-color: transparent; box-shadow: none; }   /* 選中的白底照客戶原本 */
.o-center .tabs-f .tab.on::after { left: 20px; right: 20px; }

/* 兒童早療:插畫右下的實景小圖往下凸 32px,下面的卡片讓出空間;小圖不用陰影,白框就分得開 */
.o-center .fig-wide { margin-bottom: 72px; }
.o-center .inset { box-shadow: none; }

/* 評論:白框與卡片底色照客戶原本,圓角收成 16/12、拿掉陰影 */
.o-center .rv-main { box-shadow: none; border-radius: 16px; }
.o-center .rv-sum { border-radius: 12px; }

/* 常見問題:分類頁籤排成 3×2 等寬,不再有一顆孤零零掉到第二行;題目卡打開時不加陰影(白卡照客戶原本) */
@media (min-width: 768px) {
  .o-center .faq-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .o-center .faq-tabs .tab { justify-content: space-between; border-color: var(--o-line-2); }
}
.o-center .faq-i[open] { box-shadow: none; }
@media (min-width: 901px) { .o-center .faq-in > div:first-child { top: 96px; } }

/* 門診時間:今天卡、復健卡圓角統一;週曆的「今天」改字色,不另外包膠囊 */
.o-center :is(.now-card, .rehab-card, .day) { border-radius: 12px; box-shadow: none; }
.o-center .day-tag { background: none; color: #96503C; padding: 0; font-weight: 700; }

/* 空間、地圖、首屏說明框:圓角 14/16 → 12,不加陰影 */
.o-center .s3g figure { border-radius: 12px; box-shadow: none; }
.o-center .map-card { border-radius: 12px; }

/* 品牌故事:面板邊緣已經是分界,外層那條橫線跟右欄的線重複(同方向線不疊兩層)→ 只留右欄那條 */
.o-center .rj-in { border-top: 0; padding-top: 0; }

/* 窄欄裡的大標(常見問題左欄、預約交通左欄):照原本寫好的斷行點斷(「來之前，／大家最常問的事」),不讓最後一兩個字掉到第二行 */
.o-center :is(.faq-in, .visit) .h2 .br-m { display: inline; }

/* 首屏上緣加一道淡淡的暗,頁首白字壓在亮牆面上才看得清楚(疊在客戶原本左側、底部那兩層暗的前面;捲動變暗的 .hero-veil 不動) */
@media (min-width: 1200px) {
  .hero::before { background: linear-gradient(180deg, rgba(31, 42, 37, .5) 0, rgba(31, 42, 37, 0) 160px),
    linear-gradient(90deg, rgba(36, 48, 42, .66) 0%, rgba(36, 48, 42, .44) 32%, rgba(36, 48, 42, 0) 52%), linear-gradient(0deg, rgba(36, 48, 42, .4), rgba(36, 48, 42, 0) 30%); }
}

/* 手機:「依部位找」三個頁籤欄很窄,內距與欄距收小,字才不會被拆成好幾行 */
@media (max-width: 767px) {
  .o-center .tabs-f { gap: 0 8px; margin-bottom: 24px; }
  .o-center .tabs-f .tab { padding: 10px 12px; }
}