/* 嘉誼首頁・設計系統(2026-10-19,Eric:「盡量做些系統,讓客戶原本雜亂無章的設計歸成系統」)
   排在所有樣式最後。這裡只放「規則」與「把客戶各自為政的設定對應進規則」,版面調整留在 opt2.css。
   盤點(1440 寬實測):中文字級 14 種、按鈕 15 種樣子(高 44/47/48/50/56、字 16/17/18)、框線色十幾種、圓角 9 種、間距含 7.6 這種小數。
   顏色一律只用客戶色板裡本來就有的色(不換色,只統一「誰用哪個」)。說明見專案根目錄 設計系統.md */

:root {
  /* 字級(中文地板 18;英文可更小) */
  --t-body: 18px; --t-lead: 24px; --t-h3: 32px; --t-h2: 42px; --t-xl: 56px; --t-disp: 72px;
  --t-en-m: 15px; --t-en-s: 12px; --t-legal: 14px;
  /* 間距(4 的倍數;28 = 一排並列項目的固定間距) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 80px; --s-10: 120px;
  /* 圓角 */
  --r-panel: 8px; --r-card: 12px; --r-pill: 999px;
  /* 線:淺底上「不會動的線」一階、「可以按的外框」一階;深底(綠/深綠)上各一階(排版憲法:灰線只准兩階) */
  --ln: #CECAC1; --ln-act: #577A6E; --ln-dk: rgba(255, 255, 255, .2); --ln-dk-act: rgba(255, 255, 255, .7);
  /* 客戶色板(不換,只統一用途) */
  --c-green: #577A6E; --c-green-dk: #3B5348; --c-ink: #505150; --c-bone: #EAE5DA; --c-warm: #96503C;
  /* 按鈕 */
  --btn-h: 48px;
}

/* ══ 1. 字級 ══ 中文 12–17 → 18、19 → 18、20/22 → 24、44 → 42;英文 13/14/16 → 12/15;法律字樣 14(憲法例外) */
html body :is(.o-center, .ft, .o-body > .rail, .rr-drawer) :is(
  .eyebrow, .td-k, .td-k span, .td-i, .td-i b, .td-i span, .tlink, .sl-t, .sl-d, .sl-n, .sl-n small, .nr-d, .nr-d small, .nr-s, .now-k, .now-note, .now-tag, .now-tip,
  .day-tag, .df-k, .sd-r, .sd-h, .sd-l, .sd-t, .sd-n span, .rh-k, .rh-note, .rh-pill, .rh-main, .rv-k, .rv-date, .rv-note, .rv-src, .rv-src a, .rv-tp, .rv-who small, .rv-av, .t-l,
  .path-k, .note, .s3-cap, .sl-cred, .sl-tc-t, .sl-tc-b > p, .jt-s, .sl-kids span, .tab, .tab small, .hh-ann p, .hh-ann b, figcaption, figcaption b, dt, .ft-col p, .ft-h, .rj-links a, .sl-name,
  .rl-vert, .rl-cur, .rl-cur span, .rr-k, .rr-t, .fw-n, .btn, .map-btn) { font-size: var(--t-body) !important; }
html body :is(.o-center, .ft) :is(.jt-h, .sl-kids b, .st-ph h4, .rj-zh, .sl-name b, .sl-tc-b h3, .sd-n, .now-next, .now-next b) { font-size: var(--t-lead) !important; }
html body .o-center .band-h { font-size: var(--t-h2) !important; }
/* 英文 */
html body :is(.o-center, .ft, .o-body > .rail) :is(.jt-n, .rr-t small, .rr-top-t) { font-size: var(--t-en-s) !important; }
html body .o-center :is(.rv-st, .sl-t small, .nr-t small, .faq-tabs .tab small, .band-pair, .day-date, .rv-count) { font-size: var(--t-en-m) !important; }
/* 法律字樣(憲法:版權/法律字樣 12 或 14,鄰居 18 → 14) */
html body .ft :is(.ft-legal ul, .ft-wide, .ft-wide b, .ft-b2, .legal-notice, .ft-c, .todo, .o-pv) { font-size: var(--t-legal) !important; }

/* ══ 2. 按鈕 ══ 五種,全部膠囊、高 48、字 18、左右內距 24:
   主要(綠底白字)/ 次要(綠框)/ 深底主要(米底深綠字)/ 深底次要(白框白字)/ 文字連結;
   選項類(分頁、篩選)另一套:未選 = 白底綠框、選中 = 深綠底白字;圓形鈕 48、白底綠框 */
html body :is(.o-center, .ft, .hd) :is(.btn, .hd-cta, .map-btn) { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--btn-h); height: auto; padding: 0 var(--s-5); border-radius: var(--r-pill); font-weight: 500; line-height: 1.4; box-shadow: none; }
html body :is(.o-center, .ft, .hd) :is(.btn-primary, .hd-cta, .map-btn) { background: var(--c-green); color: #fff; border: 0; }
html body :is(.o-center, .ft, .hd) :is(.btn-primary, .hd-cta, .map-btn):hover { background: var(--c-green-dk); color: #fff; }
html body .o-center .btn-ghost { background: transparent; color: var(--c-green-dk); border: 1px solid var(--ln-act); }
html body .o-center .btn-ghost:hover { background: var(--c-green); color: #fff; }
html body :is(.o-center, .ft) .btn-light { background: var(--c-bone); color: var(--c-green-dk); border: 0; }
html body :is(.o-center, .ft) .btn-light:hover { background: #fff; }
html body :is(.o-center, .ft) .btn-outline { background: transparent; color: #fff; border: 1px solid var(--ln-dk-act); }
html body :is(.o-center, .ft) .btn-outline:hover { background: rgba(255, 255, 255, .12); }
html body .o-center .now-btns .btn span { font-size: var(--t-en-m) !important; }   /* 「撥打電話」裡的電話號碼 */
/* 選項類:分頁、醫師篩選 */
html body .o-center :is(.faq-tabs .tab, .df) { min-height: var(--btn-h); padding: 0 var(--s-5); border-radius: var(--r-pill); background: #fff; color: var(--c-green-dk); border: 1px solid var(--ln-act); box-shadow: none; }
html body .o-center :is(.faq-tabs .tab.on, .df.on) { background: var(--c-green); color: #fff; border-color: var(--c-green); } /* 10-24 Eric 新規則:深綠只在品牌綠底上用 → 客戶綠 */
/* 圓形鈕 */
html body .o-center :is(.rv-prev, .rv-next, .s3g-pause) { width: var(--btn-h); height: var(--btn-h); border-radius: 50%; background: #fff; color: var(--c-green-dk); border: 1px solid var(--ln-act); }
html body .o-center :is(.rv-prev, .rv-next):hover:not(:disabled) { background: var(--c-green); color: #fff; }

/* ══ 3. 線 ══ 淺底不動的線 = --ln;可以按的外框 = --ln-act;深底各一階 */
html body .o-center :is(.rv-f, .rv-tabs) { border-color: var(--ln); }
html body .o-center .sl-tc-b .sl-tc-t { border-top-color: var(--ln); }
html body .o-center :is(.day, .faq-i) { border-color: var(--ln); }
html body .o-center .faq-i:hover { border-color: var(--ln-act); }
html body .o-center :is(.now-card .nr, .now-btns) { border-color: var(--ln-dk); }
html body .ft :is(.ft-top, .ft-cta) { border-color: var(--ln-dk); }
html body .ft .legal-notice { border-color: var(--ln-dk); }

/* ══ 4. 圓角 ══ 面板 8 / 卡片、照片 12 / 膠囊 999 / 圓 50%(10、14、16、18、6 都收進來) */
html body .o-center :is(.s3g figcaption, .tabs-f .tab, .rv-main, .rv-c figure, .map-card, .map-card > picture img, .now-card, .faq-i, .day, .sl-kids li, .sl-tc, .sl-docs3 li, .first-photo .steps4 li, .inset, .st-img) { border-radius: var(--r-card); }
html body .o-center :is(.team3-img img, .sl-team .team3-img img, .t3-alt, .fig-wide > img) { border-radius: var(--r-card); }
html body .ft .legal-notice { border-radius: var(--r-panel); }

/* ══ 5. 間距 ══ 6 → 8、7.6 → 8、10 → 12、14 → 16、18 → 16、20/22 → 24、一排並列連結 → 28、大欄距 64 → 56 */
html body .o-center :is(.tlink, .sl-d, .s3g-h) { gap: var(--s-2); }
html body .o-center .fw-n { gap: var(--s-2); }
html body .o-center :is(.td-i, .rv-f) { gap: var(--s-3); }
html body .o-center :is(.sl-3j, .sl-kids, .rv-score, .rv-nav) { gap: var(--s-4); }
html body :is(.o-center .fw-t, .ft .ft-lock) { gap: var(--s-4); }
html body .o-center :is(.rv-track, .steps4, .sl-tcs) { gap: var(--s-5); }
html body .o-center .rj-links { gap: var(--s-2) var(--s-6); }
@media (min-width: 1024px) {
  html body :is(#kids, #team, #voices, #hours) > .wrap { column-gap: var(--s-8); }
}

/* ══ 6. 醫師小圓章(週班表、篩選鈕裡的「顏/吳/蕭」)══ 中文字 18 放不進 22 的小圓 → 圓放大到 32 */
html body .o-center .d { width: 32px; height: 32px; font-size: var(--t-body) !important; line-height: 32px; flex: none; }

/* ── 補漏(第二輪盤點)── */
html body .o-body > .rail .rl-nav span { font-size: var(--t-body) !important; border-radius: var(--r-panel); }   /* 左側欄滑過跳出的區塊名稱 13 → 18,圓角 6 → 8 */
html body .o-center .nr-t b { font-size: var(--t-body) !important; }                                                  /* 門診卡「早診/午診/晚診」17 → 18 */
html body .o-center .tabs-f .tab { border-color: var(--ln-act); }                                                     /* 依部位找三張頁籤卡 = 可以按的外框 */
html body .o-center .tabs-f .tab.on { border-color: transparent; }
html body .o-center .sl-3j a { border-color: var(--ln-dk-act); }                                                      /* 綠色帶上三張卡(可以按)= 深底可按外框 */
html body .o-body > .rail .rr-menu { border-color: var(--ln-act); }
html body .o-center .tabs { border-radius: var(--r-card); }

/* ── 字放大到 18 後被擠到的地方(第三輪)── */
/* 「今天」那條的版面:10-19 改成儀表板,在 opt2.css 檔尾 */
/* 週班表:星期與日期不准從中間斷,「今天/明天」不夠放就換到下一行;時段數字整串不斷 */
html body .o-center .day-h { flex-wrap: wrap; row-gap: 2px; }
html body .o-center .day-h b, html body .o-center .day-date { white-space: nowrap; }
html body .o-center .sl-t small { white-space: nowrap; }
/* 預約交通三顆按鈕:不夠一排就換行,按鈕本身不斷字 */
html body .o-center .paths { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-3); }
html body .o-center .paths .btn { white-space: nowrap; }
/* 評論署名:日期與星星放不下就換行,不要被裁掉 */
html body .o-center .rv-who small { white-space: normal; }