/*------------------------------------------------------------------
  明欣內科兒科診所 — 品牌覆蓋層
  Base template: ClaPat "Harington" (licensed, see LICENSE-ClaPat.txt)
  這一層只換「品牌變數」：色、字、字級、資訊區塊。
  不改模板版面骨架與動效時序。
-------------------------------------------------------------------*/

/* ---- 自託管中文字型（Noto Sans TC，OFL，精準子集） ---- */
@font-face {
  font-family: 'Noto Sans TC';
  src: url('../webfonts/noto-sans-tc-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans TC';
  src: url('../webfonts/noto-sans-tc-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* 取自診所實景：櫃台粉紫牆、原木、彩色長椅、騎樓燈箱暖木 */
  --mx-bg:        #faf6f2;   /* 室內明亮暖白 */
  --mx-bg-alt:    #f3ebe6;   /* 粉紫牆淡化 */
  --mx-bg-deep:   #efe5df;
  --mx-ink:       #2b2421;   /* 暖近黑，長輩可讀 */
  --mx-ink-soft:  #5d514c;
  --mx-line:      #ddd0c8;
  --mx-rose:      #8a5f63;   /* 櫃台粉紫（加深至可讀對比） */
  --mx-ochre:     #8a5e2e;   /* 騎樓燈箱暖木（加深至 AA 5.25:1） */
  --mx-green:     #3f7a46;   /* 候診長椅綠 — 只用於「看診中」狀態 */

  /* 中文字級：內文 ≥17px（長輩與家長） */
  --mx-fs-body:   17px;
  --mx-fs-lead:   19px;
  --mx-stack: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', sans-serif;
}

/* ---- 中文排版（CSS 原生，不裝 pangu.js） ---- */
html { text-autospace: normal; text-spacing-trim: trim-start; }

body, p, li, td, th, input, button, .button-text span, h1, h2, h3, h4, h5, h6 {
  font-family: var(--mx-stack);
}
body {
  background: var(--mx-bg);
  color: var(--mx-ink);
  font-size: var(--mx-fs-body);
  line-height: 1.95;
  letter-spacing: 0;           /* 中文不加字距 */
  -webkit-font-smoothing: antialiased;
}
p { font-size: var(--mx-fs-body); line-height: 1.95; color: var(--mx-ink-soft); }
p.lead { font-size: var(--mx-fs-lead); color: var(--mx-ink); }

/* 中文沒有大小寫，顯示字要收一級、行高放寬（LESSONS 2026-08-27 CJK 三件套） */
h1, h2, h3, h4, h5, h6 { color: var(--mx-ink); letter-spacing: 0; font-weight: 700; }
h1 { line-height: 1.3; }
h2, h3 { line-height: 1.4; }
h5, h6 { line-height: 1.7; }
.hero-title { line-height: 1.22 !important; letter-spacing: 0 !important; }

/* 模板預設把英文轉大寫，中文無效但會影響拉丁字，關掉 */
.uppercase-text h1, .uppercase-text h2, .uppercase-text h3,
.uppercase-text h4, .uppercase-text h5, .uppercase-text h6 { text-transform: none; }

/* ---- 全站鐵則：關閉自訂游標 ---- */
.disable-cursor #magic-cursor,
.disable-cursor #ball { display: none !important; }
.disable-cursor, .disable-cursor a, .disable-cursor button { cursor: auto; }
.disable-cursor a, .disable-cursor button,
.disable-cursor [role="button"] { cursor: pointer; }

/* ---- Hero ---- */
#hero-caption .hero-subtitle { font-size: var(--mx-fs-lead); line-height: 1.8; color: var(--mx-ink-soft); }
.mx-kicker {
  font-size: 15px; letter-spacing: .08em; color: var(--mx-ochre);
  font-weight: 700; margin-bottom: 14px;
}

/* ---- 一鍵撥打（手機病患最常用的那一顆） ---- */
.mx-call {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--mx-rose); color: #fff !important;
  font-size: 18px; font-weight: 700; text-decoration: none;
  transition: background .18s cubic-bezier(.23,1,.32,1);
}
.mx-call:hover { background: #734d50; }
.mx-call:active { background: #644346; }
.mx-call .mx-num { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.mx-call-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  border: 1px solid var(--mx-line); color: var(--mx-ink) !important;
  font-size: 17px; font-weight: 700; text-decoration: none; background: transparent;
  transition: border-color .18s cubic-bezier(.23,1,.32,1), background .18s cubic-bezier(.23,1,.32,1);
}
.mx-call-ghost:hover { border-color: var(--mx-rose); background: #fff; }

/* ---- 門診時間表（本站的主角） ---- */
.mx-hours-wrap { width: 100%; }
.mx-hours {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--mx-line); font-size: 17px;
}
.mx-hours caption {
  caption-side: top; text-align: left; padding: 0 0 14px;
  font-size: 15px; color: var(--mx-ink-soft);
}
.mx-hours th, .mx-hours td {
  border: 1px solid var(--mx-line); padding: 14px 8px; text-align: center;
  min-width: 0;
}
.mx-hours thead th {
  background: var(--mx-bg-alt); font-weight: 700; font-size: 17px; color: var(--mx-ink);
}
.mx-hours th[scope="row"] {
  text-align: left; padding-left: 16px; white-space: nowrap;
  font-weight: 700; background: #fdfbfa;
}
.mx-hours .mx-time {
  display: block; font-size: 15px; font-weight: 400; color: var(--mx-ink-soft);
  font-variant-numeric: tabular-nums;
}
.mx-yes { color: var(--mx-rose); font-size: 20px; line-height: 1; }
.mx-no  { color: #b9aaa2; font-size: 17px; line-height: 1; }
.mx-hours td.mx-today, .mx-hours thead th.mx-today {
  background: #f6ece9; box-shadow: inset 0 0 0 2px var(--mx-rose);
}
.mx-hours-note { font-size: 15px; color: var(--mx-ink-soft); margin-top: 16px; }

/* ---- 資訊卡（診療項目／附設項目） ---- */
.mx-card {
  background: #fff; border: 1px solid var(--mx-line); border-radius: 4px;
  padding: 30px 28px 26px; height: 100%;
}
.mx-card h3 { font-size: 22px; margin: 0 0 6px; }
.mx-card .mx-card-en { font-size: 13px; color: var(--mx-ochre); letter-spacing: .06em; margin-bottom: 18px; }
.mx-list { list-style: none; margin: 0; padding: 0; }
.mx-list li {
  position: relative; padding-left: 22px; font-size: 17px; line-height: 1.85;
  color: var(--mx-ink); border-bottom: 1px solid #f0e8e3;
  padding-top: 9px; padding-bottom: 9px;
}
.mx-list li:last-child { border-bottom: 0; }
.mx-list li::before {
  content: ""; position: absolute; left: 4px; top: 19px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mx-rose);
}

/* ---- 醫師 ---- */
.mx-doc { border-top: 1px solid var(--mx-line); padding: 26px 0 22px; }
.mx-doc-name { font-size: 22px; font-weight: 700; margin: 0; }
.mx-doc-role { font-size: 15px; color: var(--mx-ochre); font-weight: 700; margin: 2px 0 12px; }
.mx-doc ul { list-style: none; margin: 0; padding: 0; }
.mx-doc li { font-size: 16px; line-height: 1.85; color: var(--mx-ink-soft); }

/* ---- 就診資訊 ---- */
.mx-info-row { border-top: 1px solid var(--mx-line); padding: 20px 0; }
.mx-info-row .mx-label { font-size: 15px; color: var(--mx-ink-soft); margin-bottom: 4px; }
.mx-info-row .mx-value { font-size: 19px; font-weight: 700; color: var(--mx-ink); }
.mx-info-row .mx-sub { font-size: 15px; color: var(--mx-ink-soft); margin-top: 4px; }

/* ---- 照片 ---- */
.mx-photo { margin: 0; }
.mx-photo img { width: 100%; height: auto; display: block; border-radius: 3px; }
.mx-photo figcaption {
  position: static; background: none; color: var(--mx-ink-soft);
  font-size: 15px; line-height: 1.7; padding: 0; margin-top: 10px;
  right: auto; bottom: auto; border-radius: 0;
}
.mx-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }

/* ---- 標記／徽章 ---- */
.mx-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mx-badge {
  font-size: 15px; padding: 7px 15px; border-radius: 999px;
  background: var(--mx-bg-alt); color: var(--mx-ink); border: 1px solid var(--mx-line);
}

/* ---- Footer ---- */
.mx-foot-note {
  font-size: 14px; line-height: 1.85; color: var(--mx-ink-soft);
  border-top: 1px solid var(--mx-line); padding-top: 18px; margin-top: 8px;
}

/* ---- 手機優先：病患十之八九用手機查門診時間 ---- */
@media only screen and (max-width: 1024px) {
  .mx-photo-grid { gap: 12px; }
}
@media only screen and (max-width: 768px) {
  body { font-size: 17px; }
  .mx-hours { font-size: 16px; }
  .mx-hours th, .mx-hours td { padding: 11px 4px; }
  .mx-hours th[scope="row"] { padding-left: 10px; white-space: normal; }
  .mx-hours .mx-time { font-size: 13px; }
  .mx-card { padding: 24px 20px 20px; }
  .mx-doc-name { font-size: 20px; }
  /* 手機一律鎖兩欄，不用自動計算（LESSONS 2026-08-28） */
  .mx-photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mx-call, .mx-call-ghost { width: 100%; justify-content: center; }
}

/* 動效尊重系統設定 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* 中文副標比英文長：放寬模板預設的 30% 上限，並讓 CTA 正常接在下面 */
#hero-caption .hero-subtitle-wrapper { max-width: 46%; }
#hero-caption .hero-subtitle { font-size: var(--mx-fs-lead); line-height: 1.8; }
.mx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media only screen and (max-width: 1024px) {
  #hero-caption .hero-subtitle-wrapper { max-width: 100%; }
}

/* 手機：hero 實拍band 依照片比例給高度，不要被 100vh 的 cover 裁掉招牌 */
@media only screen and (max-width: 768px) {
  .has-parallax { height: 64vw !important; }
  .has-parallax img { height: 100% !important; }
}

/* 選單展開時 header 壓在深色遮罩上：logo 文字轉亮，否則深色壓深色看不見 */
header.over-sidebar #logo a,
header.over-sidebar #logo strong { color: #faf6f2; }

/* 觸控目標 ≥44px（漢堡鈕） */
#burger-wrapper { min-width: 44px; min-height: 44px; }

/* ---- a11y 修正（verify_site.py 抓到的四項） ---- */
/* 1. 表格儲存格底色：模板給 td 灰底，門診表要純白才撐得住對比 */
.mx-hours td, .mx-hours th { background-color: #fff; }
.mx-hours thead th { background-color: var(--mx-bg-alt); }
.mx-hours th[scope="row"] { background-color: #fdfbfa; }
.mx-hours td.mx-today, .mx-hours thead th.mx-today { background-color: #f6ece9; }

/* 2. footer 電話：模板的 .socials a 是 #999，對比 2.65:1 */
.socials-wrap .socials a, .socials-wrap .socials-text { color: var(--mx-ink-soft); }
.socials-wrap .socials a { font-size: 17px; font-weight: 700; }
.socials-wrap .socials a:hover { color: var(--mx-rose); }

/* 3. 字級：長輩與家長要讀得動 */
.mx-doc li { font-size: 17px; }
.mx-doc-role { font-size: 17px; }
.mx-hours-note { font-size: 17px; }
.mx-foot-note { font-size: 17px; }
.mx-kicker { font-size: 16px; }
.mx-hours caption { font-size: 16px; }
/* 4.「—」代表該時段沒有診，是病患要讀懂的資訊，不能當裝飾淡化 */
.mx-no { color: var(--mx-ink-soft); }

/* logo 改成文字後，要跟著模板的 header 反白狀態走
   （模板原本是換 black-logo/white-logo 兩張圖，文字版不會自動跟上） */
header.white-header #logo a,
header.white-header #logo strong { color: #faf6f2; }
header.white-header #logo a:hover { color: #fff; }

/*==================================================================
  v2（2026-09-15）— 依 12 個真實診所／醫院站歸納的資訊架構重做
  研究紀錄：_work/v2/clinic_ia.md
==================================================================*/

.mx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 區塊標題：比 v1 的巨大 display 字收斂，讓資訊而不是標題當主角 ---- */
.mx-sec-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 2px solid var(--mx-ink);
}
.mx-sec-head-wide { margin-bottom: 34px; }
.mx-sec-title { font-size: 30px; line-height: 1.3; margin: 0; font-weight: 700; }
.mx-sec-sub   { font-size: 16px; color: var(--mx-ink-soft); }

/* ---- 頂欄電話（參考站一致：電話是 header 裡最大的資訊） ---- */
.mx-head-tel {
  position: absolute; right: 108px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; line-height: 1.25; z-index: 5;
}
.mx-head-tel-label { font-size: 13px; color: var(--mx-ink-soft); letter-spacing: .04em; }
.mx-head-tel-num {
  font-size: 22px; font-weight: 700; color: var(--mx-rose);
  font-variant-numeric: tabular-nums;
}
.mx-head-tel:hover .mx-head-tel-num { color: #734d50; }
header.white-header .mx-head-tel-label { color: #e3d8d2; }
header.white-header .mx-head-tel-num   { color: #fff; }
@media only screen and (max-width: 1240px) { .mx-head-tel { display: none; } }

/* ---- 今日看診狀態（純顯示，不做承諾） ---- */
.mx-status {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 10px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--mx-line);
  font-size: 17px; font-weight: 700; color: var(--mx-ink);
}
.mx-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mx-ink-soft); flex: none; }
.mx-status-open       { border-color: var(--mx-green); }
.mx-status-open  .mx-status-dot { background: var(--mx-green); }
.mx-status-soon  .mx-status-dot { background: var(--mx-ochre); }
.mx-status-closed .mx-status-dot { background: var(--mx-ink-soft); }
.mx-status-text { font-weight: 700; }

/* ---- 快捷列：病人進站的前四個問題 ---- */
.mx-quick {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--mx-line);
  border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line);
}
.mx-quick-item {
  background: #fff; padding: 26px 22px; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px; min-height: 44px;
  transition: background .18s cubic-bezier(.23,1,.32,1);
}
.mx-quick-item:hover { background: var(--mx-bg-alt); }
.mx-quick-ico { color: var(--mx-rose); margin-bottom: 6px; }
.mx-quick-ico svg { width: 28px; height: 28px; display: block; }
.mx-quick-t { font-size: 19px; font-weight: 700; color: var(--mx-ink); }
.mx-quick-s { font-size: 15px; color: var(--mx-ink-soft); }

/* ---- 公告 × 門診 左右並排（文京春日こどもクリニック 的做法） ---- */
.mx-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 56px; padding-top: 56px; }
.mx-split-col { min-width: 0; }

/* ---- 最新公告 ---- */
.mx-news { list-style: none; margin: 0; padding: 0; }
.mx-news-item { border-bottom: 1px solid var(--mx-line); padding: 16px 0; }
.mx-news-item:first-child { border-top: 1px solid var(--mx-line); }
.mx-news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mx-news-meta time {
  font-size: 15px; color: var(--mx-ink-soft); font-variant-numeric: tabular-nums;
}
.mx-chip {
  font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 3px;
  background: var(--mx-bg-alt); color: var(--mx-ink); border: 1px solid var(--mx-line);
}
.mx-chip-vaccine { background: #e7f0e8; border-color: #c2d8c5; color: #2f5c35; }
.mx-chip-change  { background: #f7ece2; border-color: #e2c9ae; color: #7a4f1f; }
.mx-news-title { font-size: 17px; line-height: 1.75; color: var(--mx-ink); margin: 0; }
.mx-news-src { font-size: 15px; color: var(--mx-ink-soft); margin-top: 16px; line-height: 1.8; }
.mx-more {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 17px; font-weight: 700; color: var(--mx-rose); text-decoration: none;
}
.mx-more:hover { text-decoration: underline; }

/* ---- 門診時間表 v2 ---- */
.mx-hours th[scope="row"] { min-width: 96px; }
.mx-hours .mx-sess { display: block; font-size: 17px; font-weight: 700; }
.mx-hours .mx-time { font-size: 14px; }
.mx-cell-note {
  display: block; font-size: 12px; color: var(--mx-ink-soft);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.mx-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 20px;
  margin: 14px 0 0; padding: 0; font-size: 16px; color: var(--mx-ink-soft);
}
.mx-legend li { display: flex; align-items: center; gap: 7px; }
.mx-closed {
  font-size: 17px; font-weight: 700; color: #9c2f2f;
  margin: 14px 0 0; padding: 10px 14px; background: #fbf0ef; border-left: 3px solid #9c2f2f;
}

/* 手機版門診表：按星期分組的清單，不橫向捲（小森林兒科的做法） */
.mx-hours-mobile { display: none; list-style: none; margin: 0; padding: 0; }
.mx-hours-mobile li {
  border: 1px solid var(--mx-line); background: #fff;
  padding: 14px 16px; margin-bottom: 10px; border-radius: 3px;
}
.mx-hours-mobile li.mx-today { box-shadow: inset 0 0 0 2px var(--mx-rose); background: #fdf7f6; }
.mx-mh-day {
  display: block; font-size: 18px; font-weight: 700; color: var(--mx-ink);
  margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #f0e8e3;
}
.mx-hours-mobile li.mx-today .mx-mh-day::after {
  content: "今天"; margin-left: 10px; font-size: 13px; padding: 2px 8px;
  border-radius: 3px; background: var(--mx-rose); color: #fff; vertical-align: 2px;
}
.mx-mh-t {
  display: block; font-size: 17px; line-height: 1.85; color: var(--mx-ink);
  font-variant-numeric: tabular-nums;
}
.mx-mh-off { color: var(--mx-ink-soft); }

/* ---- 醫師介紹：姓名／職稱／專長／學歷／經歷 五欄 ---- */
.mx-docs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 44px; }
.mx-doc {
  border-top: 1px solid var(--mx-line); padding: 26px 0 24px;
}
.mx-doc-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mx-doc-name { font-size: 23px; font-weight: 700; margin: 0; line-height: 1.4; }
.mx-doc-suffix { font-size: 17px; font-weight: 400; color: var(--mx-ink-soft); }
.mx-doc-role {
  font-size: 15px; font-weight: 700; margin: 0; color: #fff;
  background: var(--mx-rose); padding: 3px 11px; border-radius: 3px;
}
.mx-doc-dl { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 8px 16px; margin: 0; }
.mx-doc-dl dt {
  font-size: 15px; color: var(--mx-ink-soft); font-weight: 700;
  padding-top: 3px; line-height: 1.7;
}
.mx-doc-dl dd { margin: 0; font-size: 17px; line-height: 1.8; color: var(--mx-ink); }
.mx-doc-dl dd ul { list-style: none; margin: 0; padding: 0; }
.mx-doc-dl dd li {
  font-size: 16px; line-height: 1.8; color: var(--mx-ink-soft);
  position: relative; padding-left: 14px;
}
.mx-doc-dl dd li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--mx-line);
}
.mx-tbd {
  color: var(--mx-ink-soft); font-size: 16px;
  background: repeating-linear-gradient(-45deg, #f4ece7 0 6px, #faf6f2 6px 12px);
  border: 1px dashed var(--mx-line); border-radius: 3px; padding: 3px 10px;
  display: inline-block;
}
.mx-tbd-note { border-left: 3px solid var(--mx-line); padding-left: 14px; }

/* ---- 初診須知 ---- */
.mx-panel {
  background: #fff; border: 1px solid var(--mx-line); border-radius: 4px;
  padding: 28px 28px 24px; height: 100%;
}
.mx-panel h3 { font-size: 21px; margin: 0 0 16px; }
.mx-check { list-style: none; margin: 0; padding: 0; }
.mx-check li {
  position: relative; padding-left: 28px; font-size: 17px; line-height: 1.85;
  color: var(--mx-ink); padding-top: 8px; padding-bottom: 8px;
  border-bottom: 1px solid #f0e8e3;
}
.mx-check li:last-child { border-bottom: 0; }
.mx-check li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 11px; height: 6px; border-left: 2px solid var(--mx-rose); border-bottom: 2px solid var(--mx-rose);
  transform: rotate(-45deg);
}
.mx-check-key { font-weight: 700; color: var(--mx-ochre) !important; font-size: 19px !important; }
.mx-panel-note { font-size: 16px; color: var(--mx-ink-soft); margin-top: 16px; line-height: 1.8; }

/* ---- 交通資訊：招牌照 ＋ 定義列表（はちまんこどもクリニック 的做法） ---- */
.mx-facts { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 0; margin: 0; }
.mx-facts dt {
  font-size: 15px; color: var(--mx-ink-soft); font-weight: 700;
  padding: 16px 0; border-top: 1px solid var(--mx-line); line-height: 1.7;
}
.mx-facts dd {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--mx-ink);
  padding: 16px 0; border-top: 1px solid var(--mx-line); line-height: 1.7;
}
.mx-facts-sub {
  display: block; font-size: 15px; font-weight: 400; color: var(--mx-ink-soft);
  margin-top: 4px; line-height: 1.75;
}
.mx-facts-tel { font-size: 24px; font-variant-numeric: tabular-nums; }
.mx-visit-cta { margin-top: 28px; }

/* ---- 頁尾資訊條：門診表在頁尾再出現一次 ---- */
.mx-footbar {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px;
  border-top: 2px solid var(--mx-ink); padding-top: 28px; margin-top: 20px;
}
.mx-footbar-name { font-size: 21px; font-weight: 700; margin: 0 0 8px; color: var(--mx-ink); }
.mx-footbar-name span { font-size: 16px; font-weight: 400; color: var(--mx-ink-soft); }
.mx-footbar-line { font-size: 17px; color: var(--mx-ink-soft); margin: 0 0 6px; line-height: 1.8; }
.mx-footbar-h { font-size: 16px; font-weight: 700; color: var(--mx-ink-soft); margin: 0 0 10px; }
.mx-foot-hours { list-style: none; margin: 0 0 12px; padding: 0; }
.mx-foot-hours li {
  display: flex; gap: 14px; font-size: 17px; line-height: 1.9;
  border-bottom: 1px solid #f0e8e3; padding: 5px 0;
}
.mx-foot-hours li span:first-child { flex: none; width: 96px; font-weight: 700; color: var(--mx-ink); }
.mx-foot-hours li span:last-child { color: var(--mx-ink-soft); font-variant-numeric: tabular-nums; }

/* ---- 手機常駐操作列 ---- */
.mx-dock { display: none; }

/*------------------ 平板 ------------------*/
@media only screen and (max-width: 1024px) {
  .mx-split { grid-template-columns: minmax(0,1fr); gap: 46px; padding-top: 44px; }
  .mx-docs { grid-template-columns: minmax(0,1fr); gap: 0; }
  .mx-sec-title { font-size: 27px; }
}

/*------------------ 手機（病患九成用手機查門診時間）------------------*/
@media only screen and (max-width: 768px) {
  .mx-sec-head { margin-bottom: 20px; }
  .mx-sec-title { font-size: 25px; }
  .mx-quick { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mx-quick-item { padding: 18px 16px; }
  .mx-quick-t { font-size: 18px; }
  .mx-quick-s { font-size: 14px; }

  /* 7 欄表在窄螢幕改成按星期分組的清單，永遠不橫向捲 */
  .mx-hours { display: none; }
  .mx-hours-mobile { display: block; }
  .mx-legend { display: none; }

  .mx-doc-dl { grid-template-columns: 74px minmax(0,1fr); gap: 6px 12px; }
  .mx-facts { grid-template-columns: 84px minmax(0,1fr); }
  .mx-facts dd { font-size: 17px; }
  .mx-facts-tel { font-size: 22px; }
  .mx-footbar { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .mx-foot-hours li { flex-direction: column; gap: 0; }
  .mx-foot-hours li span:first-child { width: auto; }
  .mx-panel { padding: 22px 20px 18px; }

  /* 常駐操作列 + 內容底部留白，避免蓋住頁尾 */
  .mx-dock {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: #fff; border-top: 1px solid var(--mx-line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(43,36,33,.08);
  }
  .mx-dock-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 58px; padding: 8px 4px;
    font-size: 13px; font-weight: 700; color: var(--mx-ink) !important; text-decoration: none;
  }
  .mx-dock-item svg { width: 22px; height: 22px; }
  .mx-dock-item + .mx-dock-item { border-left: 1px solid var(--mx-line); }
  .mx-dock-call { color: var(--mx-rose) !important; }
  footer#footer-container, .mx-foot-note { }
  body { padding-bottom: 0; }
  #content-scroll { padding-bottom: 84px; }
}

/* 320–560：字級不再縮，只縮間距 */
@media only screen and (max-width: 420px) {
  .mx-quick-item { padding: 15px 13px; }
  .mx-doc-name { font-size: 21px; }
}

/*------------------------------------------------------------------
  v2 修正：固定式實心 header
  模板原本靠 .change-header-color + .white-header 在深色區塊上把字翻白。
  實測缺陷：捲到底再捲回頂端時 white-header 不會解除 ⇒ 米白底上白字＝
  導覽整條看不見（lint、console、溢出檢查都無感，只有截圖看得出來）。
  依 Emil 的補救順位第一條「先刪掉這個效果」：改成永遠實心淺色 header，
  同時也是 12 個參考診所站的通例（全部都是實心固定列）。
-------------------------------------------------------------------*/
header#header, header.classic-menu {
  background: rgba(250, 246, 242, .97) !important;
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--mx-line);
}
/* 把模板的反白狀態整組中和掉，不留任何會變白的路徑 */
header.white-header #logo a,
header.white-header #logo strong,
header.white-header nav .flexnav > li > a,
header.white-header nav .flexnav > li > a span,
header.white-header .button-text span,
header.white-header .mx-head-tel-label { color: var(--mx-ink) !important; }
header.white-header .mx-head-tel-num { color: var(--mx-rose) !important; }
header.white-header #menu-burger span { background: var(--mx-ink) !important; }
/* 選單展開時整片深色遮罩：這時才需要亮字 */
header.over-sidebar #logo a,
header.over-sidebar #logo strong,
header.over-sidebar .button-text span { color: #faf6f2 !important; }
header.over-sidebar #menu-burger span { background: #faf6f2 !important; }

#logo a, #logo strong { color: var(--mx-ink); }
nav .flexnav > li > a span { color: var(--mx-ink); }

/* 電話移到院名旁邊（文京春日こどもクリニック 的排法），不再與導覽重疊 */
.mx-head-tel {
  right: auto; left: 176px; top: 50%; transform: translateY(-50%);
  align-items: flex-start; min-height: 44px; justify-content: center;
}
.mx-head-tel-label { font-size: 12px; }
@media only screen and (max-width: 1300px) { .mx-head-tel { display: none; } }

/* 固定 header 之後，錨點跳轉要留出 header 高度 */
#news, #hours, #services, #doctors, #first, #clinic, #pharmacy, #visit {
  scroll-margin-top: 108px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 診所環境的說明清單：與照片同高時不要貼齊頂端 */
.mx-env-list { margin-top: 4px; }

/* 醫師姓名在 flex 行內會被壓縮成兩行，讓「醫師」二字掉下去撞到下面的 dl。
   量出來的實證：.mx-doc-name w=69 h=56，suffix y=3331 與第一個 dt y=3325 重疊。 */
.mx-doc-name { flex: 0 0 auto; white-space: nowrap; }
.mx-doc-role { flex: 0 0 auto; }

/* 模板的 h1/h2/h3 span 一律 display:table（給多行大標用的）。
   醫師姓名後的「醫師」二字是同一行的後綴，要還原成 inline，
   否則它會掉成第二行、壓到下面的「專長」欄。 */
.mx-doc-name .mx-doc-suffix { display: inline !important; }

/*------------------------------------------------------------------
  v2 修正：模板在手機斷點對 <nav> 下了
  `nav{height:100vh;position:fixed;width:100%;opacity:0;pointer-events:none}`
  （那是給側邊選單用的）。我用 <nav> 包快捷列與底部操作列 ⇒ 手機上兩者
  都被整片隱形，而 console／lint／溢出檢查全部無感（LESSONS 2026-09-15 同型）。
  改用 div[role=navigation]，並在這裡把幾何釘死，避免再被任何祖先規則吃掉。
-------------------------------------------------------------------*/
.mx-quick, .mx-dock {
  position: static; height: auto; width: auto; opacity: 1;
  visibility: visible; pointer-events: auto; top: auto;
}
@media only screen and (max-width: 768px) {
  .mx-dock {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: auto; opacity: 1; pointer-events: auto; visibility: visible;
  }
  /* 模板頁尾：.copyright 是 height:30px + overflow:hidden，中文會被切掉第二行；
     socials 區塊與它重疊。底部操作列已經有電話，頁尾的 socials 收掉。 */
  .copyright {
    height: auto !important; overflow: visible !important;
    line-height: 1.7 !important; font-size: 15px !important;
  }
  footer .socials-wrap { display: none !important; }
  .footer-middle { position: relative !important; height: auto !important; }
}

/* 頁尾電話：模板把 .socials li 設成 opacity:0，要 hover 整塊才浮出來。
   診所站的頁尾電話不能藏在 hover 後面（閘門 G8 抓到 alpha=0）。 */
.socials-wrap .socials li,
.socials-wrap:hover .socials li { opacity: 1 !important; transform: none !important; }
.socials-wrap .socials-text { display: block; }

/* 字級：長輩與家長讀得動（閘門警告 <16px） */
.mx-news-src { font-size: 16px; }
.mx-doc-role { font-size: 16px; }

/*==================================================================
  v3（2026-09-15）— 多頁化：子頁殼層、麵包屑、內文排版、疫苗卡、衛教文章
  只新增 class，不改 v1/v2 既有規則（首頁載的是同一支檔，必須零影響）
==================================================================*/

/* ---- 子頁 hero：首頁用 220px 上下留白撐氣勢，子頁要讓資訊早點出現 ---- */
.mx-sub #hero-caption { padding-top: 168px; padding-bottom: 46px; }
.mx-sub .hero-title { font-size: 44px !important; }
.mx-sub #hero-caption .hero-subtitle-wrapper { max-width: 60%; }
@media only screen and (max-width: 1024px) {
  .mx-sub #hero-caption { padding-top: 132px; padding-bottom: 32px; }
  .mx-sub .hero-title { font-size: 34px !important; }
  .mx-sub #hero-caption .hero-subtitle-wrapper { max-width: 100%; }
}
@media only screen and (max-width: 768px) {
  .mx-sub .hero-title { font-size: 29px !important; }
}

/* ---- 麵包屑 ---- */
.mx-crumb {
  font-size: 15px; color: var(--mx-ink-soft); margin-bottom: 16px;
  line-height: 1.9;
  /* 模板在手機斷點對 <nav> 下了 height:100vh/position:fixed/opacity:0（側選單用），
     這裡用到 <nav> 就必須把幾何釘回來，否則手機上整條隱形。 */
  position: static !important; height: auto !important; width: auto !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  top: auto !important; left: auto !important;
}
.mx-crumb { background: none !important; border: 0 !important; padding: 0 !important; }
.mx-crumb a { color: var(--mx-ink-soft); text-decoration: none; border-bottom: 1px solid var(--mx-line); }
.mx-crumb a:hover { color: var(--mx-rose); border-color: var(--mx-rose); }
.mx-crumb .mx-crumb-sep { margin: 0 8px; color: var(--mx-line); }
.mx-crumb [aria-current="page"] { color: var(--mx-ink); font-weight: 700; }

/* 導覽列目前頁 */
nav .flexnav > li.mx-nav-on > a span { color: var(--mx-rose) !important; font-weight: 700; }

/* ---- 內文排版（衛教文章與說明段落）---- */
.mx-prose { max-width: 760px; }
.mx-prose > h2 {
  font-size: 25px; margin: 46px 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--mx-ink);
}
.mx-prose > h2:first-child { margin-top: 0; }
.mx-prose > h3 { font-size: 20px; margin: 30px 0 10px; }
.mx-prose p { font-size: 17px; line-height: 1.95; margin: 0 0 18px; color: var(--mx-ink); }
.mx-prose ul, .mx-prose ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.mx-prose ol { counter-reset: mxol; }
.mx-prose li {
  position: relative; padding-left: 24px; font-size: 17px; line-height: 1.9;
  color: var(--mx-ink); margin-bottom: 8px;
}
.mx-prose ul > li::before {
  content: ""; position: absolute; left: 5px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mx-rose);
}
.mx-prose ol > li { padding-left: 30px; }
.mx-prose ol > li::before {
  counter-increment: mxol; content: counter(mxol) "."; position: absolute; left: 0; top: 0;
  color: var(--mx-rose); font-weight: 700; font-variant-numeric: tabular-nums;
}
.mx-prose strong { font-weight: 700; color: var(--mx-ink); }
.mx-prose a { color: var(--mx-rose); }

/* ---- 文章 meta：製作／更新日期（管理辦法§7）---- */
.mx-artmeta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line);
  padding: 14px 0; margin-bottom: 30px;
  font-size: 15px; color: var(--mx-ink-soft);
}
.mx-artmeta time, .mx-artmeta span { font-variant-numeric: tabular-nums; }

/* ---- 資料來源（管理辦法§7）---- */
.mx-src {
  background: #fff; border: 1px solid var(--mx-line); border-radius: 4px;
  padding: 22px 24px; margin-top: 34px;
}
.mx-src h3 { font-size: 18px; margin: 0 0 12px; }
.mx-src ol { list-style: none; counter-reset: mxsrc; margin: 0; padding: 0; }
.mx-src li {
  counter-increment: mxsrc; position: relative; padding-left: 26px;
  font-size: 16px; line-height: 1.85; margin-bottom: 8px; color: var(--mx-ink-soft);
}
.mx-src li::before {
  content: "[" counter(mxsrc) "]"; position: absolute; left: 0; top: 0;
  color: var(--mx-ochre); font-weight: 700; font-size: 14px;
}
.mx-src a { color: var(--mx-rose); word-break: break-all; }

/* ---- 風險三要素（105令第6款：適應症／禁忌症／副作用）---- */
.mx-risk {
  display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 0;
  margin: 14px 0 0; border-top: 1px solid var(--mx-line);
}
.mx-risk dt {
  font-size: 15px; font-weight: 700; color: #fff; background: var(--mx-ochre);
  padding: 4px 0; margin: 14px 0 14px; text-align: center; border-radius: 3px;
  align-self: start; line-height: 1.7;
}
.mx-risk dd {
  margin: 0; padding: 12px 0 12px 18px; font-size: 16px; line-height: 1.85;
  color: var(--mx-ink); border-bottom: 1px solid #f0e8e3;
}
.mx-risk dt + dd { border-bottom: 1px solid #f0e8e3; }
.mx-risk dt { border-bottom: 0; }

/* ---- 疫苗卡 ---- */
.mx-vacs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.mx-vac {
  background: #fff; border: 1px solid var(--mx-line); border-radius: 4px;
  padding: 24px 24px 20px;
}
.mx-vac h3 { font-size: 20px; margin: 0 0 4px; line-height: 1.45; }
.mx-vac .mx-vac-en { font-size: 13px; color: var(--mx-ochre); letter-spacing: .04em; margin-bottom: 10px; }
.mx-vac .mx-vac-when {
  font-size: 16px; font-weight: 700; color: var(--mx-rose);
  background: #f9f1ef; border-radius: 3px; padding: 7px 12px; display: block;
}

/* ---- 一般資料表（疫苗時程、藥局資訊）：不套用門診表的手機隱藏規則 ---- */
.mx-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--mx-line); font-size: 17px;
}
.mx-table caption {
  caption-side: top; text-align: left; padding: 0 0 12px;
  font-size: 16px; color: var(--mx-ink-soft);
}
.mx-table th, .mx-table td {
  border: 1px solid var(--mx-line); padding: 13px 14px; text-align: left;
  vertical-align: top; line-height: 1.8;
}
.mx-table thead th { background: var(--mx-bg-alt); font-weight: 700; color: var(--mx-ink); font-size: 16px; }
.mx-table td { color: var(--mx-ink); }
.mx-table th[scope="row"] { color: var(--mx-ink); }
.mx-table th[scope="row"] { background: #fdfbfa; font-weight: 700; white-space: nowrap; }
@media only screen and (max-width: 768px) {
  .mx-table { font-size: 16px; }
  .mx-table th, .mx-table td { padding: 10px 10px; }
  .mx-table th[scope="row"] { white-space: normal; }
}

/* ---- 門診時間頁：休診一律紅字（不是灰色破折號）---- */
.mx-page-hours .mx-hours .mx-no { color: #9c2f2f; font-weight: 700; font-size: 15px; }
.mx-page-hours .mx-mh-off { color: #9c2f2f; font-weight: 700; }
.mx-holiday {
  font-size: 17px; line-height: 1.9; color: var(--mx-ink);
  background: #fbf0ef; border-left: 3px solid #9c2f2f; padding: 14px 18px; margin: 18px 0 0;
}
.mx-holiday strong { color: #9c2f2f; }

/* ---- FAQ ---- */
.mx-faq { border-top: 1px solid var(--mx-line); }
.mx-faq details {
  border-bottom: 1px solid var(--mx-line); padding: 0;
}
.mx-faq summary {
  cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative;
  font-size: 18px; font-weight: 700; color: var(--mx-ink); line-height: 1.7;
}
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 16px;
  font-size: 24px; font-weight: 400; color: var(--mx-rose); line-height: 1.2;
}
.mx-faq details[open] summary::after { content: "–"; }
.mx-faq .mx-faq-a { padding: 0 0 20px; font-size: 17px; line-height: 1.95; color: var(--mx-ink-soft); }
.mx-faq .mx-faq-a p { margin: 0 0 12px; }
.mx-faq .mx-faq-a p:last-child { margin-bottom: 0; }

/* ---- 衛教文章清單 ---- */
.mx-posts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.mx-post {
  background: #fff; border: 1px solid var(--mx-line); border-radius: 4px;
  padding: 24px 24px 20px; display: flex; flex-direction: column;
}
.mx-post h3 { font-size: 21px; margin: 0 0 10px; line-height: 1.5; }
.mx-post h3 a { color: var(--mx-ink); text-decoration: none; }
.mx-post h3 a:hover { color: var(--mx-rose); }
.mx-post .mx-post-meta { font-size: 14px; color: var(--mx-ink-soft); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.mx-post p { font-size: 16px; line-height: 1.85; color: var(--mx-ink-soft); margin: 0 0 14px; }
.mx-post .mx-more { margin-top: auto; }

/* ---- 頁尾三欄 ---- */
.mx-footbar-3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; }
.mx-sitemap { list-style: none; margin: 0; padding: 0; }
.mx-sitemap li { border-bottom: 1px solid #f0e8e3; }
.mx-sitemap a {
  display: block; padding: 8px 0; font-size: 17px; color: var(--mx-ink-soft); text-decoration: none;
}
.mx-sitemap a:hover { color: var(--mx-rose); }

/* ---- 待確認標記（未經院方確認的資訊一律掛這個）---- */
.mx-unconfirmed {
  font-size: 16px; line-height: 1.85; color: var(--mx-ink);
  background: repeating-linear-gradient(-45deg, #f6efe9 0 8px, #fdf9f5 8px 16px);
  border: 1px dashed var(--mx-ochre); border-radius: 4px; padding: 14px 18px; margin: 18px 0 0;
}
.mx-unconfirmed strong { color: var(--mx-ochre); }

/* ---- 子頁錨點留白 ---- */
.mx-sub [id] { scroll-margin-top: 108px; }

@media only screen and (max-width: 1024px) {
  .mx-vacs { grid-template-columns: minmax(0,1fr); }
  .mx-posts { grid-template-columns: minmax(0,1fr); }
  .mx-footbar-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
}
@media only screen and (max-width: 768px) {
  .mx-footbar-3 { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .mx-prose > h2 { font-size: 22px; margin-top: 36px; }
  .mx-prose > h3 { font-size: 19px; }
  .mx-risk { grid-template-columns: 84px minmax(0,1fr); }
  .mx-risk dd { padding-left: 14px; font-size: 16px; }
  .mx-faq summary { font-size: 17px; }
}