:root{--ink:#173d36;--deep:#12332e;--sage:#58786c;--mint:#e8f0e9;--gold:#b9894c;--line:#dfe6df;--text:#344740}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfcfa;color:var(--text);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 40px));margin:auto}.top{background:var(--deep);color:#dfe9e4;font-size:13px}.top .shell{display:flex;justify-content:space-between;padding:7px 0}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}.brand>i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--ink);font:normal 700 22px serif}.brand b{display:block;font-size:18px;letter-spacing:.08em}.brand small{display:block;font-size:8px;letter-spacing:.14em;color:#6f827b}.links{display:flex;gap:30px;font-size:14px}.links a:hover{color:var(--gold)}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;padding:14px 22px;border-radius:3px;font-weight:700}.mini{padding:10px 18px;font-size:14px}.hero{background:linear-gradient(110deg,#f2f5ef 0 58%,#d8e4db 58%);overflow:hidden}.heroGrid{min-height:570px;display:grid;grid-template-columns:1.18fr .82fr;align-items:center}.heroGrid>div:first-child{padding:72px 0 90px}.eyebrow{color:var(--gold);font-weight:800;letter-spacing:.2em;font-size:12px}.hero h1{font-family:"Noto Serif TC","Songti TC",serif;color:var(--ink);font-size:52px;line-height:1.28;margin:18px 0 22px;letter-spacing:.04em}.hero h1 em{font-style:normal;color:var(--sage)}.lead{max-width:650px;font-size:18px;color:#596a64}.actions{display:flex;align-items:center;gap:28px;margin-top:32px}.under{font-weight:700;color:var(--ink);border-bottom:1px solid #9ead9f;padding-bottom:3px}.trust{display:flex;gap:24px;margin-top:48px;color:#5f716b;font-size:13px}.heroArt{height:100%;position:relative;display:grid;place-items:center}.circle{position:absolute;width:320px;height:320px;border-radius:50%;background:#edf2eb;box-shadow:0 0 0 75px #ffffff40}.herb{font-family:serif;font-size:240px;color:#96aa9d;opacity:.25;transform:rotate(-12deg)}.today{position:absolute;right:0;bottom:52px;width:260px;background:#fff;padding:23px 26px;box-shadow:0 18px 50px #20413925;display:flex;flex-direction:column}.today span{font-size:12px;color:var(--gold);letter-spacing:.15em;margin-bottom:10px}.today b{font-size:14px;padding:3px 0}.today a{margin-top:12px;color:var(--ink);font-size:13px;font-weight:700}.quick{margin-top:-35px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;box-shadow:0 10px 35px #153c3120}.quick a{padding:25px 28px;border-right:1px solid var(--line);display:grid;grid-template-columns:38px 1fr;column-gap:12px}.quick i{grid-row:1/3;color:var(--gold);font:italic 18px serif}.quick b{color:var(--ink)}.quick small{color:#7c8984}.section{padding:105px 0}.heading{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:45px}.heading h2,.info h2{font:36px/1.35 serif;color:var(--ink);margin:8px 0}.heading>p{max-width:430px;color:#6b7974}.serviceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service{background:#fff;border:1px solid var(--line);padding:30px;transition:.25s}.service:hover{transform:translateY(-5px);border-color:#aebfb5;box-shadow:0 15px 35px #183d3312}.service i{display:grid;place-items:center;width:44px;height:44px;background:var(--mint);color:var(--ink);border-radius:50%;font:normal 16px serif}.service h3{color:var(--ink);margin:22px 0 8px}.service p{font-size:14px;color:#687873;min-height:69px}.service>b{font-size:13px;color:var(--gold)}.dark{background:var(--deep);color:#dbe5e1}.heading.light h2{color:#fff}.heading.light>p{color:#bdcac5}.process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff30}.process article{padding:35px 28px;border-right:1px solid #ffffff22}.process i{color:#cfaa76;font:italic 20px serif}.process h3{color:#fff;margin:25px 0 8px}.process p{font-size:14px;color:#b8c7c1}.doctorGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.doctor{background:#fff;border:1px solid var(--line);padding-bottom:18px}.portrait{height:220px;background:linear-gradient(145deg,#e8ede8,#c8d5cc);display:grid;place-items:center;margin-bottom:16px}.portrait i{width:100px;height:100px;border-radius:50%;background:#ffffff70;color:#789086;display:grid;place-items:center;font:normal 60px serif}.p1,.p3{background:linear-gradient(145deg,#ede9e1,#d4cabb)}.doctor>small,.doctor>h3,.doctor>p{margin-left:18px;margin-right:18px}.doctor>small{color:var(--gold)}.doctor h3{margin-top:3px;margin-bottom:3px;color:var(--ink)}.doctor p{font-size:12px;color:#74817c}.articles{background:#f2f5ef}.articleGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.articleGrid article{background:#fff;padding:30px;border:1px solid var(--line)}.articleGrid small{color:var(--gold);font-weight:700}.articleGrid h3{color:var(--ink);font:23px serif;margin:14px 0 8px}.articleGrid p{font-size:14px;color:#687873}.info{background:#dce8df}.infoGrid{padding:75px 0;display:grid;grid-template-columns:1fr 1fr;gap:100px}.white{background:#fff;color:var(--ink)}.hours{background:#f9fbf8;padding:28px 34px}.hours div{padding:13px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr}.hours span,.hours small{font-size:12px;color:#75847e}.hours b{color:var(--ink)}footer{background:#102e29;color:#cbd8d3;padding:65px 0 20px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:45px}.inverse{color:#fff}.inverse>i{background:#dfe8e3;color:var(--ink)}.foot>div{display:flex;flex-direction:column;gap:8px}.foot>div>b{color:#fff;margin-bottom:8px}.foot a,.foot p,.foot small{font-size:13px;margin:0}.copy{border-top:1px solid #ffffff20;margin-top:45px;padding-top:18px;font-size:11px}.mobile{display:none}
@media(max-width:900px){.links{display:none}.hero{background:linear-gradient(160deg,#f2f5ef 0 68%,#d8e4db 68%)}.heroGrid{grid-template-columns:1fr}.heroGrid>div:first-child{padding:60px 0}.hero h1{font-size:40px}.heroArt{height:260px}.today{bottom:25px}.quick{grid-template-columns:1fr;margin-top:0}.serviceGrid,.doctorGrid{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:repeat(2,1fr)}.articleGrid{grid-template-columns:1fr}.infoGrid{grid-template-columns:1fr;gap:35px}.foot{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.shell{width:calc(100% - 28px)}.top .shell span:first-child{display:none}.top .shell{justify-content:center}.nav{height:70px}.brand b{font-size:16px}.mini{display:none}.hero h1{font-size:34px}.lead{font-size:16px}.trust{flex-direction:column;gap:7px;margin-top:30px}.heroArt{height:235px}.today{width:230px}.section{padding:72px 0}.heading{display:block;margin-bottom:30px}.heading h2,.info h2{font-size:30px}.serviceGrid,.process,.doctorGrid{grid-template-columns:1fr}.doctor{display:grid;grid-template-columns:130px 1fr}.doctor .portrait{height:155px;grid-row:1/5;margin:0}.doctor>small,.doctor>h3,.doctor>p{margin-left:16px}.doctor>small{margin-top:20px}.quick a{padding:20px}.foot{grid-template-columns:1fr}.mobile{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:20;box-shadow:0 -5px 20px #0002}.mobile a{padding:14px;text-align:center;background:#fff;color:var(--ink);font-weight:700}.mobile a:last-child{background:var(--ink);color:#fff}footer{padding-bottom:70px}}

/* ============================================================
   site.css — additions layered on base.css
   Palette and shell width come from base.css :root. Zero webfonts:
   the client asked for a lightweight site, so everything is system stack.
   ============================================================ */

/* base.css --gold (#b9894c) is an accent for small text on light backgrounds.
   White text on it as a button fill is only 3.1:1, under AA, so buttons use this
   darker tone instead (5.3:1). Defined once rather than hardcoded per component. */
:root{--gold-btn:#8f6229}

/* ---------- media safety net ----------
   Without this, any image placed outside .prose renders at its intrinsic width
   and escapes its grid column -- a 1920px hero pushed straight through the
   article layout and over the sidebar. Constrain every replaced element once,
   globally, rather than per-component. */
img,picture,svg,video,iframe{max-width:100%}
img{height:auto}
picture{display:block}

/* ---------- a11y ---------- */
.skip{position:fixed;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- header: dropdown nav + burger ---------- */
.nav{position:relative}
.top .shell a{border-bottom:1px solid #ffffff40}
.links{align-items:center}
.hasSub{position:relative}
.hasSub>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55}
.hasSub>ul{position:absolute;left:-18px;top:100%;margin:0;padding:9px 0;list-style:none;
  min-width:228px;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 40px #12332e1f;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.18s;z-index:40}
.hasSub:hover>ul,.hasSub:focus-within>ul{opacity:1;visibility:visible;transform:none}
.hasSub>ul a{display:block;padding:9px 20px;font-size:14px;color:#42544e}
.hasSub>ul a:hover{background:var(--mint);color:var(--ink)}
.links a[aria-current=page]{color:var(--gold)}
.burger{display:none;width:44px;height:44px;place-items:center;cursor:pointer;gap:5px;
  flex-direction:column;justify-content:center}
.burger span{display:block;width:23px;height:2px;background:var(--ink);transition:.2s}

/* ---------- right-side floating CTA rail ---------- */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:10px}
.rail a{display:grid;place-items:center;width:62px;padding:14px 6px 12px;border-radius:8px;
  text-align:center;line-height:1.35;box-shadow:0 10px 26px #12332e2e;transition:.2s}
.rail a:hover{transform:translateX(-3px);box-shadow:0 14px 32px #12332e3d}
.rail .ri{display:grid;place-items:center;width:28px;height:28px;margin-bottom:8px}
.rail .ri svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.rail b{font-size:13px;font-weight:800;writing-mode:vertical-rl;letter-spacing:.16em;
  text-orientation:upright;max-height:106px}
.rail small{display:none}
.rail-book{background:var(--ink);color:#fff}
.rail-tel{background:var(--gold-btn);color:#fff}
.rail-progress{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* 預約頁：停車資訊 */
.parkLot{margin:18px 0 26px}
.parkLot h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:17px;margin:0 0 10px}
.parkFee{font-size:13.5px;font-weight:700;color:var(--gold-btn);background:#f6efe4;padding:2px 10px;border-radius:99px}
.mapFrame{position:relative;width:100%;aspect-ratio:4/3;max-height:420px;border-radius:8px;overflow:hidden;background:#eef2ec}
.mapFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.parkShots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.parkShots figure{margin:0}
.parkShots img{display:block;width:100%;height:auto;border-radius:8px}
.parkShots figcaption{font-size:13px;color:#5d6b66;margin-top:5px}
@media(max-width:600px){.parkShots{grid-template-columns:minmax(0,1fr)}}

/* ---------- breadcrumbs ---------- */
.crumbs{background:#f4f7f2;border-bottom:1px solid var(--line);font-size:13px}
.crumbs .shell{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:13px 0;
  color:#69786f}
.crumbs i{opacity:.4;font-style:normal}
.crumbs a{color:#5d6f68}
.crumbs a:hover{color:var(--gold)}
.crumbs span[aria-current]{color:var(--ink);font-weight:700}

/* ---------- page hero (interior pages) ---------- */
.pageHero{background:linear-gradient(112deg,#f2f5ef 0 56%,#dbe6dd 56%);padding:62px 0 58px}
.pageHero h1{font-family:"Noto Serif TC","Songti TC",serif;color:var(--ink);
  font-size:42px;line-height:1.3;letter-spacing:.03em;margin:14px 0 16px}
.pageHero .lead{font-size:17px;max-width:720px}
.pageHero .actions{margin-top:26px}
/* 預約頁首屏多了「看診進度查詢」後一行放三個，窄螢幕會被擠到斷字。
   讓按鈕列換行、每個按鈕自身不斷行。 */
.actions{flex-wrap:wrap;row-gap:16px}
.actions>a{white-space:nowrap}

/* ---------- prose / article body ---------- */
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;
  align-items:start;padding:66px 0 90px}
/* min-width:0 is load-bearing: without it the 520px-min tables inside .prose
   set the track's min-content width and blow the page out to 534px at 390px
   viewport, instead of scrolling inside .tableWrap */
.prose,.side{min-width:0}
/* The reading measure belongs to the whole article column, not just .prose.
   With it on .prose only, the H1, the answer block, the FAQ and the author box
   ran 114px wider than the paragraphs and figures -- a ragged right edge.
   No max-width here: capping the column at 74ch left 114px of the grid track
   empty, so the visual gap to the sidebar was 194px rather than the 30px the
   gap property implies. Lines are correspondingly longer, so the body gets a
   looser line-height to stay readable. */
.postCol{min-width:0}
.prose{font-size:16.5px;line-height:1.85}
.prose>h2{font:700 27px/1.45 "Noto Serif TC","Songti TC",serif;color:var(--ink);
  margin:52px 0 16px;padding-left:15px;border-left:4px solid var(--gold)}
.prose>h3{font-size:19.5px;color:var(--ink);margin:34px 0 11px}
.prose>h4{font-size:17px;color:#2e4740;margin:26px 0 9px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:23px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink)}
.prose a{color:#1c5f4d;border-bottom:1px solid #a8c4b6}
.prose a:hover{color:var(--gold);border-color:var(--gold)}
.prose figure{margin:30px 0}
.prose picture,.prose img{display:block;width:100%;height:auto;border-radius:4px}
.prose figcaption{font-size:13px;color:#77857f;margin-top:9px;text-align:center}
.prose>*:first-child{margin-top:0}

/* ---------- article header, hero, author box ---------- */
.postHead{margin-bottom:26px}
.postHead .eyebrow{margin:0 0 10px}
.postHead h1{font:700 33px/1.42 "Noto Serif TC","Songti TC",serif;color:var(--ink);
  letter-spacing:.02em;margin:0 0 14px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;
  font-size:13.5px;color:#77857f}
.byline b{color:var(--ink);font-weight:700}
.byline a{color:inherit}
.byline a:hover b{color:var(--gold)}
.byline i{opacity:.45;font-style:normal}

.postHero{margin:0 0 30px;background:var(--mint);border-radius:4px;overflow:hidden}
.postHero picture{display:block}
.postHero img{display:block;width:100%;height:auto}

.authorBox{display:flex;gap:20px;align-items:flex-start;margin:34px 0 0;
  background:#f4f7f2;border:1px solid var(--line);border-radius:4px;padding:24px 26px}
.authorBox .ab{flex:0 0 84px;width:84px}
.authorBox .ab img{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block}
.authorBox small{display:block;color:var(--gold);font-size:12px;font-weight:800;
  letter-spacing:.1em}
.authorBox b{display:block;color:var(--ink);font-size:18px;margin:4px 0 8px}
.authorBox p{margin:0 0 10px;font-size:14.5px;color:#5b6d66}
.authorBox a{font-size:14px;font-weight:700;color:#1c5f4d}
.authorBox a:hover{color:var(--gold)}

/* answer-first summary block: the passage AI engines quote */
.answer{background:var(--mint);border-left:4px solid var(--ink);padding:22px 26px;
  margin:0 0 30px;border-radius:0 4px 4px 0}
.answer b{display:block;color:var(--ink);font-size:13px;letter-spacing:.13em;margin-bottom:8px}
.answer p{margin:0;font-size:16.5px;color:#2c4038}

.note{background:#fbf7ef;border:1px solid #ecdfc6;padding:18px 22px;border-radius:4px;
  margin:26px 0;font-size:15px}
.note b{color:#8a6528}

/* ---------- tables ---------- */
.tableWrap{overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;background:#fff;min-width:520px}
caption{caption-side:top;text-align:left;font-size:13px;color:#77857f;padding-bottom:9px}
th,td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
thead th{background:var(--ink);color:#fff;font-weight:700;white-space:nowrap}
tbody th{background:#f4f7f2;color:var(--ink);white-space:nowrap}
tbody tr:nth-child(even) td{background:#fafcf9}

/* clinic schedule: doctors per session */
.schedule table{min-width:640px}
.schedule td{text-align:center}
.schedule td span{display:block;padding:2px 0;color:#33473f}
.schedule .off{color:#9aa8a2}

/* ---------- FAQ ---------- */
.faq{margin:34px 0}
.faq details{border:1px solid var(--line);background:#fff;margin-bottom:10px;border-radius:4px}
.faq summary{cursor:pointer;padding:17px 46px 17px 20px;font-weight:700;color:var(--ink);
  position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:19px;top:15px;font-size:20px;
  color:var(--gold);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .fa{padding:0 20px 19px;font-size:15.5px;color:#485c54}
.faq .fa p{margin:0 0 12px}

/* ---------- sidebar ---------- */
.side{position:sticky;top:22px;display:grid;gap:18px}
.card{background:#fff;border:1px solid var(--line);padding:22px 22px 24px}
.card>b{display:block;color:var(--ink);font-size:15px;margin-bottom:13px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.card a{display:block;font-size:14px;color:#4f625b;padding:6px 0}
.card a:hover{color:var(--gold)}
.card.book{background:var(--ink);color:#cfdcd6;border-color:var(--ink)}
.card.book>b{color:#fff;border-color:#ffffff2e}
.card.book p{font-size:14px;margin:0 0 15px}
/* .card a{display:block;padding:6px 0} outranks .btn, which left-aligned the
   label and flattened the padding -- restate both at matching specificity */
.card.book .btn{width:100%;background:#fff;color:var(--ink);display:flex;
  align-items:center;justify-content:center;padding:14px 20px}
.card.book .btn:hover{background:var(--mint)}
/* 院所位置／停車資訊：預約卡內的次要按鈕 */
.card.book .bookVisit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid #ffffff2e}
.card.book .bookVisit a{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 4px;border:1px solid #ffffff52;border-radius:3px;color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap}
.card.book .bookVisit a:hover{background:#ffffff17;color:#fff}
.bookVisit svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prose h2[id]{scroll-margin-top:24px}
.card.book .tel{display:block;text-align:center;color:#fff;font-weight:800;
  font-size:19px;margin-top:13px;letter-spacing:.04em}
.toc ol{margin:0;padding-left:19px;font-size:14px}
.toc li{margin-bottom:7px}
.toc a{color:#4f625b}
.cardNote{font-size:13.5px;color:#6d7c76;margin:0 0 10px}

/* ---------- post lists ---------- */
.postGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.postCard{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  transition:.22s}
.postCard:hover{transform:translateY(-4px);box-shadow:0 16px 34px #183d3314;border-color:#aebfb5}
/* covers are off site-wide; the card leads with a gold rule + category instead */
.postCard{border-top:3px solid var(--gold)}
.postCard .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.postCard .tag{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.05em}
.postCard h3{font:600 17px/1.5 "Noto Serif TC","Songti TC",serif;color:var(--ink);margin:9px 0 10px}
.postCard p{font-size:13.5px;color:#6d7c76;margin:0 0 14px;flex:1}
.postCard time{font-size:12px;color:#94a19b}
.postList{display:grid;gap:2px}
.postList a{display:grid;grid-template-columns:1fr auto;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;color:#3d514a;align-items:baseline}
.postList a:hover{color:var(--gold)}
.postList time{font-size:12.5px;color:#96a39d;white-space:nowrap}

.pager{display:flex;gap:8px;justify-content:center;margin-top:46px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;padding:11px 14px;text-align:center;border:1px solid var(--line);
  background:#fff;font-size:14px;color:#4f625b}
.pager .on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.pager a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- doctor pages ---------- */
.docHero{background:linear-gradient(112deg,#f2f5ef 0 54%,#dbe6dd 54%);padding:58px 0}
.docGrid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:52px;align-items:start}
.docPhoto{background:#fff;padding:11px;box-shadow:0 16px 40px #12332e1c}
.docPhoto picture,.docPhoto img{display:block;width:100%;height:auto}
.docHero small{color:var(--gold);font-weight:800;letter-spacing:.16em;font-size:12px}
.docHero h1{font-family:"Noto Serif TC","Songti TC",serif;color:var(--ink);font-size:40px;
  margin:11px 0 20px;letter-spacing:.04em}
.docHero .actions{margin-top:28px}
.credList{list-style:none;margin:0;padding:0}
.credList li{padding:9px 0 9px 22px;border-bottom:1px dashed #c9d6cd;position:relative;
  font-size:15.5px;color:#3f524b}
.credList li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.chips span{background:var(--mint);color:#25473d;font-size:13.5px;padding:7px 14px;border-radius:999px}

/* ---------- pillar / service pages ---------- */
.symptomGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0}
.symptomGrid div{background:#fff;border:1px solid var(--line);padding:17px 20px;font-size:15px;
  display:grid;grid-template-columns:26px 1fr;gap:10px;color:#42544e}
.symptomGrid i{color:var(--gold);font-style:normal;font-weight:800}
.stepList{counter-reset:s;list-style:none;margin:28px 0;padding:0}
.stepList li{counter-increment:s;position:relative;padding:0 0 26px 60px;border-left:2px solid var(--line);
  margin-left:19px}
.stepList li:last-child{border-left-color:transparent;padding-bottom:0}
.stepList li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-20px;top:-4px;
  width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;
  place-items:center;font-size:13px;font-weight:800}
.stepList b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.stepList p{margin:0;font-size:15px;color:#5b6d66}

/* ---------- CTA band, service areas, footer extras ---------- */
.cta{background:var(--deep);color:#d8e4df}
.cta .shell{padding:52px 0;display:flex;justify-content:space-between;align-items:center;gap:44px;
  flex-wrap:wrap}
.cta h2{font:34px/1.35 "Noto Serif TC","Songti TC",serif;color:#fff;margin:0 0 9px}
.cta p{margin:0;color:#b4c4be;font-size:15.5px}
.ctaBtns{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.under.light{color:#fff;border-color:#ffffff66}
.areas{background:#eef3ec;border-top:1px solid var(--line)}
.areas .shell{padding:26px 0;font-size:13.5px;color:#68776f}
.areas b{color:var(--ink);margin-right:12px}
.areas p{display:inline;margin:0}
.footBrand .blurb{font-size:12.5px;color:#9fb2ab;line-height:1.85;margin-top:6px}
/* footer：品牌欄＋五個連結欄一列；門診資訊改成下方橫條 */
.foot{grid-template-columns:2.1fr repeat(5,minmax(0,1fr)) !important;gap:30px !important}
.footVisit{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:18px 44px;margin-top:40px;padding:22px 0;border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f}
.fv{display:flex;flex-direction:column;gap:3px;min-width:0}
.fv small{font-size:11.5px;letter-spacing:.12em;color:#8fa59d}
.fv a,.fv span{font-size:14px;color:#fff}
.fv span i{font-style:normal;display:inline-block;margin-right:16px}
.fv em{font-style:normal;font-size:12px;color:#9fb2ab}
.fvBtn{display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border-radius:3px;background:var(--gold-btn);color:#fff;font-size:14px;font-weight:700;white-space:nowrap}
.fvBtn:hover{filter:brightness(1.08)}
.disclaim{border-top:none;margin-top:24px;padding-top:0;font-size:12px;
  color:#9db0a9;line-height:1.85}
.copy{margin-top:14px;border-top:none;padding-top:0}

/* ---------- homepage: 6 service cards link out ---------- */
.service{display:flex;flex-direction:column}
.service p{flex:1}
.service .more{color:var(--gold);font-size:13px;font-weight:800;margin-top:14px}
a.service:hover .more{text-decoration:underline}
.doctor{display:flex;flex-direction:column}
.doctor .portrait{height:auto;aspect-ratio:1/1;overflow:hidden;padding:0}
.doctor .portrait picture,.doctor .portrait img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   RWD
   ============================================================ */
@media(max-width:1180px){
  .rail a{width:54px;padding:12px 5px 10px}
  .rail b{font-size:12px;max-height:92px}
}
@media(max-width:1024px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:44px;padding:50px 0 74px}
  .side{position:static;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .prose{max-width:none}
  .docGrid{grid-template-columns:260px minmax(0,1fr);gap:36px}
  .docHero .prose,.docGrid>div{min-width:0}
  .foot{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
  .footBrand{grid-column:1/-1}
  .footBrand .blurb{max-width:760px}
  .footVisit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fvBtn{justify-self:start}
  .postGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* burger menu takes over */
  .burger{display:flex}
  /* max-height alone cannot collapse padding + border, so zero those too */
  .links{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-top:0 solid var(--line);box-shadow:none;padding:0;
    max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease;z-index:50}
  #navtoggle:checked~.links{max-height:80vh;overflow-y:auto;padding:6px 0 14px;
    border-top-width:1px;box-shadow:0 22px 40px #12332e22}
  .links>a,.hasSub>a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);
    font-size:15.5px}
  .hasSub>a::after{float:right;margin-top:8px}
  .hasSub>ul{position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;min-width:0;padding:4px 0 10px;background:#f7faf6}
  .hasSub>ul a{padding:10px 18px}
  .nav{flex-wrap:wrap}
  .pageHero{padding:46px 0 44px}
  .pageHero h1{font-size:33px}
  .docHero h1{font-size:31px}
  .cta .shell{padding:42px 0}
  .cta h2{font-size:27px}
  .symptomGrid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .postHead h1{font-size:27px}
}
@media(max-width:600px){
  .postHead h1{font-size:24px;line-height:1.5}
  .byline{font-size:12.5px;gap:7px}
  .postHero{margin-bottom:22px}
  .authorBox{flex-direction:column;gap:14px;padding:20px}
  .authorBox .ab,.authorBox .ab img{width:64px;height:64px;flex-basis:64px}
  /* the client asked for right-side floating buttons, so the rail stays and the
     duplicate bottom bar goes. The label sits under the icon rather than being
     hidden: with no bottom bar these two buttons are the only CTA on a phone,
     and a bare icon does not say what it does. */
  .mobile{display:none !important}
  footer{padding-bottom:20px}
  .rail{right:10px;top:auto;bottom:16px;transform:none;gap:9px}
  .rail a{width:58px;padding:9px 4px 8px;border-radius:12px}
  .rail b{writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:0;
    font-size:10.5px;line-height:1.3;max-height:none;font-weight:700;
    white-space:nowrap}
  .rail .ri{margin:0 0 4px;width:22px;height:22px}
  .rail .ri svg{width:18px;height:18px}
  .wrap{padding:36px 0 58px}
  .side{grid-template-columns:minmax(0,1fr)}
  .prose{font-size:16px}
  .prose>h2{font-size:23px;margin:40px 0 13px}
  .prose>h3{font-size:18px}
  .answer{padding:18px 19px}
  .docGrid{grid-template-columns:minmax(0,1fr);gap:26px}
  .docPhoto{max-width:280px}
  .postGrid{grid-template-columns:1fr}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr)) !important;row-gap:28px !important}
  .postList a{grid-template-columns:1fr;gap:5px}
  .crumbs .shell{padding:11px 0;gap:7px}
  .stepList li{padding-left:48px}
  table{font-size:14px}
  th,td{padding:9px 10px}
}

/* ---------- 醫藏中醫百科 partner block + external nav item ---------- */
.links a.ext::after{content:"↗";font-size:11px;margin-left:5px;opacity:.55}
.yicang{background:var(--deep);color:#d8e4df}
.yicangGrid{padding:70px 0;display:grid;grid-template-columns:1.05fr .95fr;
  gap:60px;align-items:center}
.yicang .eyebrow{color:#cfaa76}
.yicang h2{font:34px/1.35 "Noto Serif TC","Songti TC",serif;color:#fff;margin:8px 0 16px}
.yicang p{color:#b6c5bf;font-size:15.5px;margin:0}
.yicang .actions{margin-top:30px}
.yicang .btn{background:var(--gold-btn)}
/* .under defaults to dark ink, which is invisible on the deep green band */
.yicang .under{color:#fff;border-color:#ffffff66}
.yicang .under:hover{color:#e8c793;border-color:#e8c793}
.ycStats{display:grid;grid-template-columns:repeat(4,auto);gap:26px;margin-top:26px;
  justify-content:start}
.ycStats div{text-align:left}
.ycStats b{display:block;color:#fff;font-size:25px;letter-spacing:.02em}
.ycStats small{color:#9fb3ac;font-size:12.5px}
.ycArt{display:block;border-radius:6px;overflow:hidden;box-shadow:0 20px 46px #0b201d55;
  transition:.25s}
.ycArt:hover{transform:translateY(-4px);box-shadow:0 26px 56px #0b201d70}
.ycArt img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .yicangGrid{grid-template-columns:minmax(0,1fr);gap:34px;padding:52px 0}
  .yicang h2{font-size:27px}
  .ycStats{grid-template-columns:repeat(4,1fr);gap:14px}
  .ycStats b{font-size:21px}
}
@media(max-width:600px){
  .ycStats{grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .yicangGrid{padding:44px 0}
}

/* ---------- category index on /醫療專欄 ---------- */
.catGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.catGrid a{background:#fff;border:1px solid var(--line);padding:16px 18px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  color:var(--ink);font-size:15px;transition:.2s}
.catGrid a:hover{border-color:var(--gold);color:var(--gold)}
.catGrid small{color:#8b9a94;font-size:12.5px;white-space:nowrap}
@media(max-width:900px){.catGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.catGrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- clinic photo grid (診療方式) ---------- */
.photoGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:30px 0}
.photoGrid figure{margin:0;border-radius:4px;overflow:hidden;background:var(--mint)}
.photoGrid img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
@media(max-width:900px){.photoGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- inline SVG figures in article bodies ---------- */
.fig{margin:32px 0}
.figBox{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 16px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.figBox svg{display:block;width:100%;height:auto;min-width:520px}
.fig figcaption{font-size:13px;color:#77857f;margin-top:10px;text-align:center;line-height:1.7}
@media(max-width:600px){
  .figBox{padding:12px 10px}
  .fig{margin:26px 0}
}

/* ---------- homepage hero background ----------
   Client-supplied artwork replaces the CSS diagonal gradient. The gradient
   stays underneath as the paint-before-load colour and as the fallback if the
   image ever 404s, so the headline never sits on bare white. The decorative
   circle and 艸 glyph are dropped -- they competed with the real artwork. */
/* A gradient and a url in one background shorthand needs a comma -- without it
   the whole declaration is invalid and the browser drops it. And a layered
   gradient would paint over the artwork anyway, so the flat colour underneath
   is what covers the pre-load frame and an image that fails to load. */
.hero{background-color:#eef2ec;
  background-image:url("/assets/img/herobg.webp");
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hero .circle,.hero .herb{display:none}
.heroArt{position:relative}
@media(max-width:900px){
  .hero{background-image:url("/assets/img/herobg-sm.webp")}
}
@media(max-width:600px){
  .foot{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:26px 20px !important}
  /* 地址與電話並排，門診時間與按鈕各占一整列 */
  .footVisit{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .fv:nth-child(3),.fvBtn{grid-column:1/-1}
  .fvBtn{width:100%;justify-self:stretch}
}