/* ═══════════════════════════════════════════════════════════
   換頁動畫：頁首頁尾不動，只有內容換
   ═══════════════════════════════════════════════════════════
   原理：瀏覽器把兩頁之間「同名」的元素視為同一個，所以頁首頁尾
   會留在原地，只有中間淡入淡出 —— 看起來就像單頁式網站，
   但每一頁仍然是真的 HTML 檔，SEO 不受影響。

   ⚠️ 不支援的瀏覽器會自動退回一般換頁，不會壞掉，不必另外處理。
   ⚠️ view-transition-name 在同一頁裡不能重複，否則整個動畫會失效。 */
@view-transition { navigation: auto; }

header       { view-transition-name: site-header; }
footer       { view-transition-name: site-footer; }
.topbar      { view-transition-name: site-topbar; }
.callbar     { view-transition-name: site-callbar; }
aside        { view-transition-name: site-aside; }

::view-transition-old(root){ animation: vt-out .18s ease both; }
::view-transition-new(root){ animation: vt-in .26s ease both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px);} }
@keyframes vt-in { from{ opacity:0; transform:translateY(8px);} }

/* 會暈車的人瀏覽器會告訴我們，那就不要動畫 */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}

:root{
  --deep:#5E3446; --deep2:#8A5A6E; --gold:#A66E0D; --gold-lt:#C9932E;
  --sand:#F3E7DA; --cream:#FBF6F0; --cream2:#F7EFE6; --blush:#F2E2E4;
  --line:#E7D9CC; --ink:#2B2427; --ink-lt:#6F6268;
  --max:1200px; --arch:190px;
  --sh:0 1px 3px rgba(94,52,70,.05),0 8px 26px rgba(94,52,70,.06);
  --sh-lg:0 18px 50px rgba(94,52,70,.14);
  --serif:"Noto Serif TC",Georgia,"Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.9;letter-spacing:.015em}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;transition:.18s}
a:hover{color:var(--gold-lt)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:900px}

/* 拱形 —— 全站的識別元素 */
.arch{border-radius:var(--arch) var(--arch) 16px 16px;overflow:hidden}
.arch-sm{border-radius:110px 110px 12px 12px;overflow:hidden}
.arch-full{border-radius:999px 999px 0 0;overflow:hidden}

/* ── 頁首 ───────────────────────────────── */
.topbar{background:var(--deep);color:#EFDFE4;font-size:13.5px;letter-spacing:.02em}
.topbar .wrap{display:flex;gap:24px;align-items:center;justify-content:flex-end;height:40px}
.topbar a{color:#EFDFE4}
.topbar a:hover{color:#fff}
header{position:sticky;top:0;z-index:100;background:rgba(251,246,240,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px}
.brand{display:flex;align-items:baseline;gap:11px;flex-shrink:0}
.brand b{font-family:var(--serif);font-size:24px;color:var(--deep);letter-spacing:.1em;
  font-weight:700;line-height:1}
.brand span{font-size:10px;color:var(--gold);letter-spacing:.3em;white-space:nowrap}
.menu{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:1px}
.menu>li{position:relative}
.menu>li>a{display:block;padding:13px 14px;color:var(--ink);font-size:15.5px;font-weight:500;
  white-space:nowrap;position:relative}
.menu>li>a::before{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:1.5px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.22s}
.menu>li>a:hover::before,.menu>li.on>a::before{transform:scaleX(1)}
.menu>li.on>a{color:var(--deep)}
.menu>li.has>a::after{content:"";display:inline-block;width:4.5px;height:4.5px;margin-left:7px;
  vertical-align:2.5px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg)}
.sub{position:absolute;top:100%;left:-6px;min-width:214px;background:#fff;
  border:1px solid var(--line);border-radius:4px 4px 14px 14px;box-shadow:var(--sh-lg);
  list-style:none;margin:0;padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.2s}
.menu>li:hover .sub{opacity:1;visibility:visible;transform:none}
.sub.wide{columns:2;column-gap:6px;min-width:400px}
.sub a{display:block;padding:8px 13px;border-radius:8px;color:var(--ink);font-size:15px;
  break-inside:avoid}
.sub a:hover{background:var(--cream2);color:var(--deep)}
.cta{background:var(--deep);color:#fff!important;padding:12px 24px;border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.cta:hover{background:var(--gold);color:#fff!important}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
.burger i{display:block;width:25px;height:1.8px;background:var(--deep);margin:6px 0;
  border-radius:2px;transition:.2s}

/* ── 按鈕 ───────────────────────────────── */
.btn{display:inline-block;padding:14px 32px;border-radius:999px;font-weight:600;font-size:15.5px;
  letter-spacing:.06em;border:1.4px solid var(--deep);color:var(--deep);background:transparent}
.btn:hover{background:var(--deep);color:#fff}
.btn.solid{background:var(--deep);color:#fff}
.btn.solid:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.light{border-color:#fff;color:#fff}
.btn.light:hover{background:#fff;color:var(--deep)}

/* ── 標題組 ─────────────────────────────── */
.eyebrow{font-size:11.5px;letter-spacing:.34em;color:var(--gold);margin-bottom:14px;
  font-weight:600}
h1,h2,h3,.serif{font-family:var(--serif)}
.sec-head{margin-bottom:48px}
.sec-head.mid{text-align:center}
.sec-head h2{font-size:clamp(26px,3.6vw,38px);color:var(--deep);margin:0;letter-spacing:.06em;
  font-weight:700;line-height:1.45}
.sec-head p{color:var(--ink-lt);margin:16px 0 0;max-width:660px;font-size:16.5px}
.sec-head.mid p{margin-left:auto;margin-right:auto}
section{padding:96px 0}
section.tight{padding:64px 0}
.bg-sand{background:var(--sand)}
.bg-cream2{background:var(--cream2)}
.bg-deep{background:var(--deep);color:#F5E9EE}
.bg-deep h2,.bg-deep h3{color:#fff}
.bg-deep p{color:#E8D3DA}

/* ── 首頁 hero ──────────────────────────── */
.hero{background:var(--cream);padding:70px 0 90px;overflow:hidden}
.hero .in{display:grid;grid-template-columns:1fr .92fr;gap:66px;align-items:center}
.hero h1{font-size:clamp(32px,4.8vw,54px);color:var(--deep);margin:0 0 24px;
  letter-spacing:.06em;line-height:1.42;font-weight:700}
.hero .sub{color:var(--ink-lt);font-size:17.5px;margin:0 0 36px;max-width:500px}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.hero .shot{position:relative}
.hero .shot .arch{box-shadow:var(--sh-lg)}
.hero .shot img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hero .badge{position:absolute;left:-34px;bottom:44px;background:#fff;border-radius:16px;
  padding:18px 24px;box-shadow:var(--sh-lg);border:1px solid var(--line)}
.hero .badge b{display:block;font-family:var(--serif);font-size:27px;color:var(--gold);
  line-height:1.2}
.hero .badge span{font-size:13px;color:var(--ink-lt);letter-spacing:.05em}

/* ── 療程四大類 ─────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cat{display:block;text-align:center;color:var(--ink)}
.cat .arch-sm{background:var(--blush);box-shadow:var(--sh);transition:.28s}
.cat img{width:100%;aspect-ratio:3/4;object-fit:cover}
.cat:hover .arch-sm{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.cat h3{font-size:20px;color:var(--deep);margin:22px 0 8px;letter-spacing:.05em}
.cat p{font-size:14.5px;color:var(--ink-lt);margin:0;line-height:1.75}

/* ── 院長 ───────────────────────────────── */
.director{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.director .pic{position:relative;background:linear-gradient(170deg,var(--blush),var(--sand));
  border-radius:200px 200px 20px 20px;padding-top:36px}
.director .pic img{width:100%;filter:drop-shadow(0 16px 32px rgba(94,52,70,.18))}
.director .q{font-family:var(--serif);font-size:56px;color:var(--gold);line-height:.6;
  opacity:.5;margin-bottom:8px}
.director p{font-size:17px;margin:0 0 18px;color:var(--ink)}
.director .sign{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.director .sign b{display:block;font-family:var(--serif);color:var(--deep);font-size:20px;
  letter-spacing:.08em}
.director .sign span{color:var(--ink-lt);font-size:14.5px}

/* ── 醫師（⛔ 已停用，2026-09-23） ─────────────
   .docs / .doc 是舊的「六格醫師照牆」，首頁、關於我們、團隊頁各放一次。
   Jimmy 指出同一批人的臉在一次瀏覽裡要看三遍，已全部拿掉；
   現在醫師只在團隊頁出現一次，樣式是 theme_extra.py 的 .drow。
   這一段留著只是因為動基底檔風險大，**不要再拿來用**。 */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.doc{display:block;color:var(--ink);text-align:center}
.doc .ph{border-radius:160px 160px 18px 18px;overflow:hidden;position:relative;
  background:var(--blush);transition:.28s;aspect-ratio:3/4;display:flex;align-items:flex-end}
.doc:nth-child(3n+2) .ph{background:var(--sand)}
.doc:nth-child(3n) .ph{background:var(--cream2)}
.doc .ph img{width:100%;height:100%;object-fit:cover;object-position:top center}
.doc:hover .ph{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.doc b{display:block;font-family:var(--serif);font-size:19px;color:var(--deep);
  margin:20px 0 5px;letter-spacing:.06em}
.doc span{font-size:13.5px;color:var(--ink-lt);letter-spacing:.14em}

/* ── 一般卡片 ───────────────────────────── */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:6px 6px 16px 16px;
  overflow:hidden;box-shadow:var(--sh);transition:.26s;display:flex;flex-direction:column;
  color:var(--ink)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--sand)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--cream2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .thumb img{transform:scale(1.045)}
.card .body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.card .tag{align-self:flex-start;font-size:11.5px;color:var(--gold);letter-spacing:.14em;
  margin-bottom:11px;font-weight:600}
.card h3{margin:0 0 10px;font-size:18px;color:var(--deep);line-height:1.6;font-weight:700}
.card p{margin:0;color:var(--ink-lt);font-size:14.8px;line-height:1.8;flex:1}
.card .more{margin-top:18px;font-size:13.5px;color:var(--gold);letter-spacing:.08em;
  font-weight:600}

/* ── 空間照 ─────────────────────────────── */
.space{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.space div{border-radius:110px 110px 12px 12px;overflow:hidden;box-shadow:var(--sh)}
.space img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:.4s}
.space div:hover img{transform:scale(1.05)}

/* ── 資訊帶 ─────────────────────────────── */
.info-band{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.info-band h4{font-family:var(--serif);color:#fff;font-size:17px;margin:0 0 10px;
  letter-spacing:.1em}
.info-band p{margin:0;font-size:15.5px;line-height:1.9}
.info-band a{color:#F5D9A8}

/* ── 內頁 ───────────────────────────────── */
.phead{background:linear-gradient(160deg,var(--sand) 0%,var(--blush) 100%);
  padding:56px 0 52px;border-bottom:1px solid var(--line)}
.phead h1{margin:0;font-size:clamp(26px,4vw,40px);color:var(--deep);letter-spacing:.05em;
  line-height:1.45;font-weight:700}
.phead .lead{margin:16px 0 0;color:var(--ink-lt);font-size:16.5px;max-width:720px}
.crumb{font-size:13px;color:var(--ink-lt);margin-bottom:16px;letter-spacing:.03em}
.crumb a{color:var(--deep2)}
.crumb a:hover{color:var(--gold)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:52px;padding:62px 0 90px;
  align-items:start}
.content{background:#fff;border:1px solid var(--line);border-radius:6px 6px 18px 18px;
  padding:44px 50px 52px;box-shadow:var(--sh)}
.content>*:first-child{margin-top:0}
.content h2{font-family:var(--serif);font-size:25px;color:var(--deep);margin:2.2em 0 .8em;
  padding-bottom:13px;border-bottom:2px solid var(--sand);line-height:1.5;font-weight:700;
  position:relative}
.content h2::after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:2px;
  background:var(--gold)}
.content h3{font-family:var(--serif);font-size:20px;color:var(--deep2);margin:1.9em 0 .6em;
  font-weight:700;padding-left:14px;border-left:3px solid var(--gold)}
.content h4{font-size:17.5px;color:var(--ink);margin:1.6em 0 .5em;font-weight:700}
.content p{margin:0 0 1.2em}
.content ul,.content ol{margin:0 0 1.25em;padding-left:1.5em}
.content li{margin:.45em 0}
.content li::marker{color:var(--gold)}
.content img{border-radius:14px;margin:1.8em auto;box-shadow:var(--sh)}
.content figure{margin:1.8em 0}
.content figcaption{font-size:14px;color:var(--ink-lt);margin-top:11px;padding-left:12px;
  border-left:2px solid var(--gold)}
.content mark{background:var(--blush);padding:2px 4px;border-radius:3px}
.content blockquote{margin:1.8em 0;padding:20px 26px;background:var(--cream2);
  border-left:3px solid var(--gold);border-radius:0 12px 12px 0}
.content table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:15.5px;
  display:block;overflow-x:auto;white-space:nowrap}
.content th{background:var(--deep);color:#fff;padding:12px 16px;text-align:left;font-weight:600}
.content td{padding:12px 16px;border-bottom:1px solid var(--line)}
.content tr:nth-child(even) td{background:var(--cream2)}
.content hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.content a{border-bottom:1px solid rgba(166,110,13,.35)}

aside{position:sticky;top:104px}
.side{background:#fff;border:1px solid var(--line);border-radius:6px 6px 16px 16px;
  padding:24px;margin-bottom:22px;box-shadow:var(--sh)}
.side h4{margin:0 0 16px;font-family:var(--serif);font-size:16px;color:var(--deep);
  letter-spacing:.08em;padding-bottom:12px;border-bottom:1px solid var(--line);font-weight:700}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:8px 11px;border-radius:8px;color:var(--ink);font-size:15px;
  line-height:1.6}
.side li a:hover{background:var(--cream2);color:var(--deep)}
.side li a.on{background:var(--blush);color:var(--deep);font-weight:600}
.side.book{background:linear-gradient(165deg,var(--deep),#7A4459);border:0;text-align:center}
.side.book h4{color:#fff;border-color:rgba(255,255,255,.22)}
.side.book p{color:#EBD6DD;font-size:14.5px;margin:0 0 18px;line-height:1.8}
.side.book .btn{width:100%;border-color:#fff;color:#fff}
.side.book .btn:hover{background:#fff;color:var(--deep)}

.notice{background:var(--cream2);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  padding:20px 24px;margin:32px 0 0;font-size:14.5px;color:var(--ink-lt);line-height:1.85}

.pager{display:flex;gap:9px;justify-content:center;margin-top:52px;flex-wrap:wrap}
.pager a,.pager span{padding:10px 16px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);font-size:15px}
.pager a:hover{border-color:var(--gold);color:var(--gold)}
.pager .cur{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:600}

/* ── 頁尾 ───────────────────────────────── */
footer{background:var(--deep);color:#E8D3DA;padding:72px 0 28px}
footer a{color:#E8D3DA}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:46px}
footer h4{color:#fff;font-family:var(--serif);font-size:15.5px;margin:0 0 18px;
  letter-spacing:.1em;font-weight:700}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:.55em 0;font-size:14.8px}
footer .info{font-size:14.8px;line-height:2.1}
.fbrand b{font-family:var(--serif);font-size:23px;color:#fff;letter-spacing:.1em;display:block}
.fbrand span{font-size:10px;letter-spacing:.3em;color:#D6A9B9}
.social{display:flex;gap:11px;margin-top:20px}
.social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.04em}
.social a:hover{background:rgba(255,255,255,.12);border-color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.16);padding-top:24px;font-size:12.5px;
  color:#C9A2B3;line-height:1.95}

/* ── 底部固定按鈕列 ─────────────────────────
   做法沿用馥之美維護公告頁（Jimmy 2026-09-23 指定保留）。
   比圓形浮動鈕好的地方：手機上一眼看得到、目標大好按、
   兩個動作並排不用猜哪個是哪個。
   ⚠️ 要記得把 body 底部墊高，否則會蓋住最後一段文字。 */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,246,240,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(94,52,70,.08)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:54px;border-radius:12px;color:#fff;font-size:16px;font-weight:600;
  letter-spacing:.04em}
.callbar a:hover{color:#fff;filter:brightness(1.06)}
.callbar .line{background:#06C755}
.callbar .tel{background:var(--deep)}
.callbar svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
body{padding-bottom:0}
@media(max-width:780px){ body{padding-bottom:84px} }
/* 桌機版靠右收成直排，不要橫跨整個畫面 */
@media(min-width:781px){
  .callbar{left:auto;right:22px;bottom:22px;width:auto;flex-direction:column;
    background:none;backdrop-filter:none;border:0;box-shadow:none;padding:0;gap:11px}
  .callbar a{width:170px;height:50px;box-shadow:var(--sh-lg)}
}

/* ── 手機 ───────────────────────────────── */
@media(max-width:1040px){
  .hero .in{grid-template-columns:1fr;gap:44px}
  .hero .shot{max-width:440px;margin:0 auto}
  .hero .badge{left:0}
  .director{grid-template-columns:1fr;gap:38px}
  .director .pic{max-width:340px;margin:0 auto}
  .cats{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr;gap:34px}
  aside{position:static}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px}
  .space{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  body{font-size:16.5px}
  .topbar{display:none}
  .burger{display:block}
  .menu{position:fixed;inset:80px 0 0;background:var(--cream);display:block;overflow-y:auto;
    padding:16px 24px 90px;transform:translateX(100%);transition:.28s;
    border-top:1px solid var(--line)}
  .menu.open{transform:none}
  .menu>li>a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:17px}
  .menu>li>a::before{display:none}
  .sub,.sub.wide{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;margin:0;padding:4px 0 12px 18px;display:none;columns:1;
    min-width:0;background:transparent}
  .sub.open{display:block}
  .menu>li.has>a::after{float:right;margin-top:10px}
  .nav .cta{display:none}
  section{padding:64px 0}
  .content{padding:28px 22px 34px}
  .content h2{font-size:22px}
  .docs,.g3,.g4{grid-template-columns:repeat(2,1fr)}
  .info-band{grid-template-columns:1fr;gap:28px}
  .fgrid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .cats,.docs,.g2,.g3,.g4,.space{grid-template-columns:1fr}
  .hero .badge{position:static;margin-top:18px;display:inline-block}
}

/* ═══════════════════════════════════════════════════════════
   共用小東西
   ═══════════════════════════════════════════════════════════ */
.mid{text-align:center}
.sm{font-size:13.5px!important;opacity:.82;margin-top:6px!important}
.topbar .hrs{margin-right:auto;margin-left:0;opacity:.85}
.topbar .wrap{justify-content:flex-start}
.intro{font-size:17.5px;line-height:2;color:var(--ink);margin:0;
  padding-left:22px;border-left:2px solid var(--gold)}

/* 拱形的裝飾外框：圖片後面偏移一圈細線，讓版面不那麼平 */
.framed{position:relative}
.framed::before{content:"";position:absolute;inset:18px -18px -18px 18px;
  border:1.5px solid var(--gold);border-radius:inherit;opacity:.5;z-index:0}
.framed>*{position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════
   頂部公告條
   ═══════════════════════════════════════════════════════════ */
.sitenotice{background:#B0342B;color:#fff;font-size:14px;letter-spacing:.02em}
.sitenotice .wrap{display:flex;align-items:center;justify-content:center;gap:22px;
  min-height:42px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px;text-align:center}
.sitenotice span{font-weight:500}
.sitenotice a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;font-weight:600}
.sitenotice a:hover{color:#FFE2C4}

/* ═══════════════════════════════════════════════════════════
   療程頁的區塊留白
   ═══════════════════════════════════════════════════════════
   ⛔ 2026-09-24 Jimmy 指出療程頁「空白太多，感覺很灌水」。
      原因：療程頁的每一段用的是 <section>，而全站規則是
      section{padding:96px 0}（那是給整頁寬的大區塊用的）。
      於是每兩段之間 = 96 下 + 46 邊距 + 96 上 ≈ 238px 的空白，
      一頁七段等於憑空多出約 1,700px。
      ⚠️ 這種錯不會報錯，只會讓頁面看起來很空。
   內文裡的 section 一律不吃那個版面留白。 */
.content section{padding:0}

/* ═══════════════════════════════════════════════════════════
   診療服務項目（首頁總覽）
   ═══════════════════════════════════════════════════════════ */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);
  border-radius:8px 8px 20px 20px;overflow:hidden}
.svcg{background:var(--cream);padding:28px 26px 30px}
.svcg .en{font-size:10px;letter-spacing:.28em;color:var(--gold);font-weight:600}
.svcg h3{margin:8px 0 16px;font-size:20px;letter-spacing:.06em}
.svcg h3 a{color:var(--deep)}
.svcg h3 a:hover{color:var(--gold)}
.svcg ul{list-style:none;margin:0;padding:0}
.svcg li{margin:0 0 1px}
.svcg li a{display:block;padding:6px 0;color:var(--ink-lt);font-size:14.5px;
  line-height:1.6;border-bottom:1px dashed var(--line)}
.svcg li:last-child a{border-bottom:0}
.svcg li a:hover{color:var(--gold);padding-left:5px}
.svc-note{margin:26px auto 0;max-width:840px;text-align:center;font-size:13.5px;
  color:var(--ink-lt);line-height:1.9}

/* ═══════════════════════════════════════════════════════════
   地理位置與交通
   ═══════════════════════════════════════════════════════════ */
.loc{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.locmap{border-radius:10px 10px 22px 22px;overflow:hidden;box-shadow:var(--sh);
  border:1px solid var(--line)}
.locmap img{width:100%;display:block}
.locinfo .lb{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.locinfo h4{margin:0 0 9px;font-size:11.5px;letter-spacing:.24em;color:var(--gold);
  font-weight:700;font-family:var(--sans)}
.locinfo p{margin:0;font-size:16.5px;line-height:1.95;color:var(--ink)}
.locinfo p b{font-family:var(--serif);color:var(--deep);font-weight:700;
  letter-spacing:.04em}
.locinfo .sm{font-size:14px;color:var(--ink-lt)}

/* 聯絡我們：深色帶 */
.info-band .big{font-family:var(--serif);font-size:24px;letter-spacing:.06em;
  margin:0 0 8px}
.info-band .big a{color:#F5D9A8}
.info-band .sm{font-size:13.5px;color:#DDC3CC;margin:0;line-height:1.8}


/* ═══════════════════════════════════════════════════════════
   首頁
   ═══════════════════════════════════════════════════════════ */
.hero{background:
   radial-gradient(1100px 480px at 78% 14%, var(--blush) 0%, transparent 62%),
   radial-gradient(900px 520px at 6% 88%, var(--sand) 0%, transparent 58%),
   var(--cream);
  padding:78px 0 96px}
.hero .in{grid-template-columns:1fr 1.02fr;gap:60px}
.hero h1{letter-spacing:.04em}
.hero .shot .arch{border-radius:200px 200px 18px 18px}
.hero .shot img{aspect-ratio:4/3;object-fit:cover;object-position:center 22%}
.hero .badge{left:auto;right:-26px;bottom:-26px}

/* ⛔ 首頁引言的 class 叫 hero-lead，不可以叫 sub。
   2026-09-23 踩到：導覽列的下拉選單也叫 .sub，而它的規則是
     position:absolute; opacity:0; visibility:hidden
   於是首頁那段引言被整段變成隱形，位置也被扯到頁面下方。
   ⚠️ 畫面看起來完全正常，只是少了一段字 —— 沒有任何錯誤訊息。
   這就是「名字取得不夠有分辨力」的代價：sub 可以是 submenu，
   也可以是 subtitle，CSS 不會問你是哪一個。 */
.hero .hero-lead{color:var(--ink-lt);font-size:17.5px;margin:0 0 36px;max-width:500px;
  line-height:2}

/* ── 三個堅持 ─────────────────────────────── */
/* ⚠️ 四項，所以是四欄。寫成三欄的話第四項會自己掉到下一行、左邊孤零零一個。 */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.wi{text-align:center}
.wi .arch-sm{width:150px;margin:0 auto 24px;background:var(--blush);
  box-shadow:var(--sh);border-radius:120px 120px 14px 14px}
.wi img{width:100%;aspect-ratio:1/1;object-fit:cover}
.wi h3{font-size:20px;color:var(--deep);margin:0 0 10px;letter-spacing:.06em}
.wi p{margin:0;color:var(--ink-lt);font-size:15px;line-height:1.85;
  max-width:300px;margin-inline:auto}

/* ── 療程四大類 ───────────────────────────── */
.cat .en{font-size:10.5px;letter-spacing:.3em;color:var(--gold);margin:20px 0 6px;
  font-weight:600}
.cat h3{margin:0 0 9px}
.cat img{aspect-ratio:1/1}
.cat .arch-sm{border-radius:130px 130px 14px 14px}

/* ── 院長的話 ─────────────────────────────── */
.director{grid-template-columns:.72fr 1.28fr;gap:64px;align-items:start}
.director .pic{border-radius:220px 220px 20px 20px;padding:0;overflow:hidden;
  box-shadow:var(--sh-lg)}
.director .pic img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:none}
.director .dtx{padding-top:8px}

/* ── 面診前可以先想的事 ───────────────────── */
.qas{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.qa{background:#fff;border:1px solid var(--line);border-radius:6px 6px 18px 18px;
  padding:30px 32px 32px;box-shadow:var(--sh);position:relative}
.qa::before{content:"Q";position:absolute;top:22px;right:28px;font-family:var(--serif);
  font-size:34px;color:var(--gold);opacity:.18;line-height:1}
.qa h3{margin:0 0 12px;font-size:18.5px;color:var(--deep);line-height:1.6;
  padding-right:34px}
.qa p{margin:0;color:var(--ink-lt);font-size:15.5px;line-height:1.95}

/* ── 空間照：改成不等寬的鑲嵌，比四等分好看 ── */
.space{grid-template-columns:1.25fr .95fr .6fr 1.1fr;align-items:stretch}
.space div{border-radius:130px 130px 14px 14px}
.space img{aspect-ratio:auto;height:100%;min-height:330px;object-fit:cover}

/* ═══════════════════════════════════════════════════════════
   關於我們
   ═══════════════════════════════════════════════════════════ */
.asec{margin-bottom:56px}
.asec:last-child{margin-bottom:0}
.asec h2{font-family:var(--serif);font-size:26px;color:var(--deep);margin:0 0 20px;
  letter-spacing:.05em;position:relative;padding-bottom:14px}
.asec h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;
  background:var(--gold)}
.asec p{margin:0 0 1.1em;font-size:17px;line-height:2;color:var(--ink)}

/* ═══════════════════════════════════════════════════════════
   醫師
   ═══════════════════════════════════════════════════════════
   ⛔ 2026-09-23 改版：六位醫師合併成一頁，個人照全站只在這裡出現。
      改版前全站 67 次頭像引用、實際只有 7 個人，光首頁就放了 7 張。
      舊的 .dsel（側欄六張小頭像）與 .dprofile（單人頁）已經沒有人用，
      連同它們的樣式一起刪掉——留著只會讓下一個人以為還有那些頁。 */

/* 首頁的團隊名單：只有字，沒有臉 */
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);
  border-radius:8px 8px 20px 20px;overflow:hidden}
.rst{background:var(--cream);padding:30px 28px 32px;color:var(--ink);
  display:block;transition:.22s}
.rst:hover{background:#fff}
.rst b{display:block;font-family:var(--serif);font-size:23px;color:var(--deep);
  letter-spacing:.08em;line-height:1.3}
.rst i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.24em;
  color:var(--gold);font-weight:600;margin:9px 0 14px}
.rst span{display:block;font-size:14.5px;color:var(--ink-lt);line-height:1.85}

/* 院長的話：拿掉照片，改成純文字的引言版 */
.director2{text-align:center;padding:8px 0}
.director2 .q{font-family:var(--serif);font-size:64px;color:var(--gold);
  line-height:.5;opacity:.45;margin:18px 0 26px}
.director2 p{font-size:17.5px;line-height:2.1;color:var(--ink);margin:0 0 18px;
  max-width:720px;margin-inline:auto}
.director2 .sign{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
  display:inline-block;min-width:240px}
.director2 .sign b{display:block;font-family:var(--serif);color:var(--deep);
  font-size:21px;letter-spacing:.1em}
.director2 .sign span{color:var(--ink-lt);font-size:14px;letter-spacing:.06em}

/* 團隊頁：一位一列，照片左右交錯 */
.drow{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start;
  padding:48px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.drow:first-child{padding-top:8px}
.drow:last-child{border-bottom:0}
.drow.alt{grid-template-columns:1fr 250px}
.drow.alt .dpic{order:2}
.drow .dpic{border-radius:999px 999px 22px 22px;overflow:hidden;
  box-shadow:var(--sh);border:1px solid var(--line);background:var(--blush)}
.drow .dpic img{width:100%;aspect-ratio:1/1;object-fit:cover;
  object-position:center 12%}
.dbody h2{font-family:var(--serif);font-size:32px;color:var(--deep);
  margin:2px 0 16px;letter-spacing:.06em}
.dbody h2 small{font-size:17px;color:var(--ink-lt);letter-spacing:.14em;
  font-weight:400;margin-left:8px}
.dintro{font-size:16.5px;line-height:2;color:var(--ink-lt);margin:0 0 30px;
  max-width:640px}
.dbody h3{font-size:14px;color:var(--deep);letter-spacing:.14em;margin:0 0 4px;
  font-family:var(--sans);font-weight:700}
/* ⚠️ 學經歷排成兩欄。四條排成一直行的話，右邊會空掉一大片——
   Jimmy 2026-09-23 指的就是那個畫面。 */
ul.cv{list-style:none;padding:0;margin:0;columns:2;column-gap:36px}
ul.cv li{padding:11px 0 11px 010px;padding-left:20px;position:relative;
  font-size:15.5px;margin:0;break-inside:avoid;line-height:1.7;
  border-bottom:1px dashed var(--line)}
ul.cv li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}

.names{font-size:17px;line-height:2.1;color:var(--ink);margin:14px 0 0}
h2.plain{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);
  color:var(--deep);margin:0;letter-spacing:.06em}
.notice.wrap{max-width:var(--max);margin:0 auto;padding:22px 26px}

/* ═══════════════════════════════════════════════════════════
   療程頁
   ═══════════════════════════════════════════════════════════ */
.thero{display:grid;grid-template-columns:.86fr 1.14fr;gap:36px;align-items:center;
  background:linear-gradient(150deg,var(--cream2),var(--blush));
  border-radius:10px 10px 22px 22px;padding:34px;margin-bottom:12px}
.thero .arch-full{border-radius:180px 180px 16px 16px;box-shadow:var(--sh);
  background:#fff}
.thero img{width:100%;aspect-ratio:1/1;object-fit:cover}
.whatis h2{margin:0 0 14px!important;font-size:22px!important}
.whatis h2::after{display:none}
.whatis p{margin:0;font-size:16.5px;line-height:2;color:var(--ink)}

.tsec{margin:46px 0}
.tsec h2{margin-top:0!important}
.tsec p{font-size:16.5px;line-height:2}

/* 適合／不適合：並排對照，但刻意用不同底色，不要看起來像同一張表 */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fitgrid h3{margin:0 0 14px!important;font-size:17px!important;letter-spacing:.06em}
.fit,.unfit{border-radius:8px 8px 18px 18px;padding:26px 28px}
.fit{background:var(--cream2);border:1px solid var(--line)}
.unfit{background:#FBEFF0;border:1px solid #EBD3D6}
.fit h3{color:var(--deep)!important}
.unfit h3{color:#8A4A54!important}
.fit ul,.unfit ul{list-style:none;padding:0;margin:0}
.fit li,.unfit li{position:relative;padding-left:26px;margin:.7em 0;font-size:15.5px;
  line-height:1.85}
.fit li::before{content:"";position:absolute;left:4px;top:12px;width:9px;height:5px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg)}
.unfit li::before{content:"";position:absolute;left:5px;top:13px;width:10px;height:2px;
  background:#B4737D}

/* 這個做法的特點 */
.pts{display:grid;gap:14px}
.pt{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  background:var(--cream2);border-radius:8px 8px 16px 16px;padding:20px 24px}
.pt span{font-family:var(--serif);font-size:20px;color:var(--gold);line-height:1.5}
.pt p{margin:0!important;font-size:16px;line-height:1.9}

/* 常見問題：預設收合，點開才展開，不佔版面 */
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;
  font-family:var(--serif);font-size:17.5px;color:var(--deep);position:relative;
  letter-spacing:.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:26px;width:9px;
  height:9px;border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq summary:hover{color:var(--gold)}
.faq details p{margin:0 0 20px!important;font-size:16px;line-height:1.95;
  color:var(--ink-lt);padding-right:30px}

/* 療程步驟 */
ol.steps{list-style:none;padding:0;margin:0;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:0 0 26px 52px;margin:0;
  font-size:16px;line-height:1.9}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:32px;
  height:32px;border-radius:50%;background:var(--deep);color:#fff;
  font-family:var(--serif);font-size:15px;display:flex;align-items:center;
  justify-content:center}
ol.steps li::after{content:"";position:absolute;left:15.5px;top:36px;bottom:6px;
  width:1px;background:var(--line)}
ol.steps li:last-child{padding-bottom:0}
ol.steps li:last-child::after{display:none}

/* 風險：不加驚嘆號、不用紅色，語氣要像醫師在解釋 */
.tsec.risk{background:var(--cream2);border-left:3px solid var(--deep2);
  border-radius:0 14px 14px 0;padding:26px 30px}
.tsec.risk h2{font-size:21px!important;margin-bottom:12px!important}
.tsec.risk h2::after{display:none}
.tsec.risk p{margin:0;font-size:16px}
.tsec.risk strong{color:var(--deep)}

/* 面診時可以問的問題 */
.askbox{background:linear-gradient(160deg,var(--deep),#734054);color:#F6E9EE;
  border-radius:10px 10px 22px 22px;padding:34px 38px 38px}
.askbox h2{color:#fff!important;margin:0 0 6px!important;font-size:22px!important}
.askbox h2::after{background:var(--gold-lt)!important;bottom:-8px!important}
.askbox .hint{color:#E2C9D2;font-size:14.5px;margin:18px 0 22px!important}
ul.ask{list-style:none;padding:0;margin:0;display:grid;gap:12px}
ul.ask li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:15px 20px 15px 46px;position:relative;margin:0;
  font-family:var(--serif);font-size:17px;line-height:1.7;letter-spacing:.03em}
ul.ask li::before{content:"?";position:absolute;left:19px;top:14px;
  font-family:var(--serif);color:var(--gold-lt);font-size:19px}

/* ═══════════════════════════════════════════════════════════
   手機
   ═══════════════════════════════════════════════════════════
   ⛔ 2026-09-23 踩到的坑，這一段的存在理由：

   這個檔案接在 theme.py 後面載入。theme.py 裡的手機規則是寫在
   @media 區塊中的，但**媒體查詢並不會提高權重**——同樣的選擇器，
   後面出現的那一條就是贏。

   所以只要我在這個檔案裡「不包在 @media 裡」重新宣告了某個選擇器
   （例如 .hero .in、.director、.docs、.space），
   theme.py 裡對應的手機規則就會被整個蓋掉，
   ⚠️ 手機版變回桌機的欄數，而且完全不報錯——
      實測 375px 的手機上，首頁還是左右兩欄，圖被擠成一小條。

   兩條規則：
   ① 斷點要跟 theme.py 一樣是 1040 / 780 / 520，不要自己另訂 980 / 640
      （對不上的那一段會變成兩邊都沒管）
   ② 上面凡是無條件蓋過 theme.py 的選擇器，這裡都要再寫一次手機版
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1040px){
  /* ── 這四條是「蓋回去」的，不是新規則 ── */
  .hero .in{grid-template-columns:1fr;gap:44px}
  .director{grid-template-columns:1fr;gap:38px}
  .director .pic{max-width:340px;margin:0 auto}
  .space{grid-template-columns:repeat(2,1fr)}
  .docs{grid-template-columns:repeat(2,1fr)}

  .hero{padding:58px 0 72px}
  .hero .badge{left:0;right:auto;bottom:-20px}
  .hero .shot{max-width:520px;margin:0 auto}
  .why{grid-template-columns:repeat(2,1fr);gap:34px}
  .qas,.fitgrid{grid-template-columns:1fr;gap:30px}
  .thero{grid-template-columns:1fr;padding:26px}
  .thero .arch-full{max-width:320px;margin:0 auto}
  .roster{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:repeat(2,1fr)}
  .loc{grid-template-columns:1fr;gap:30px}
  .drow,.drow.alt{grid-template-columns:1fr;gap:26px}
  .drow.alt .dpic{order:0}
  .drow .dpic{max-width:230px}
  ul.cv{columns:1}
  .space img{min-height:260px}
}
@media(max-width:780px){
  /* ⛔ 手機選單打不開的真正原因（2026-09-23 實測 390px）
     header 上有 backdrop-filter。帶 backdrop-filter 的元素會變成
     它底下 position:fixed 子元素的「定位基準」——
     於是手機選單的 inset:80px 0 0 不是貼齊螢幕，而是貼齊頁首，
     整個選單只剩 107px 高，六個主項目只看得到兩個。
     ⚠️ 畫面上看起來像「選單只開了一半」，不會有任何錯誤訊息。
     手機上不需要那層毛玻璃，直接關掉最省事。 */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--cream)}
  .menu{height:calc(100dvh - 80px)}

  /* 品牌英文字太長，窄螢幕會把漢堡鈕擠出畫面 */
  .brand span{font-size:9px;letter-spacing:.18em}
  .hero h1{font-size:clamp(28px,7vw,38px)}
  .hero .hero-lead{font-size:16.5px}
  .askbox{padding:28px 24px 32px}
  ul.ask li{font-size:16px;padding-left:42px}
  .qa{padding:24px 24px 26px}
  .thero{padding:20px}
  .intro{padding-left:16px}
  ol.steps li{padding-left:46px}
}
@media(max-width:520px){
  .brand span{display:none}
  .brand b{font-size:21px}
  .docs,.space{grid-template-columns:1fr}
  .wi .arch-sm{width:160px}
  .space img{min-height:220px}
  .roster,.svc,.why{grid-template-columns:1fr}
  .dbody h2{font-size:26px}
  /* 公告條在手機上原本佔 100px（三行），太吃畫面。
     電話那顆拿掉——底部固定列已經有「來電預約」了，重複沒有意義。 */
  .sitenotice .wrap{gap:10px;font-size:12.5px;line-height:1.6;
    min-height:0;padding-top:8px;padding-bottom:8px}
  .sitenotice .tel{display:none}
}