/* 沐澄診所 · 基礎樣式（頁面內容樣式由 build.mjs 產生 pages.css） */
:root{--c0:#53687b;--c3:#acbac3;--c4:#81a294;--c6:#f2f5f7;--c7:#8c8c8c;--hd:76px;--gold:#c8aa84}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hd)}
body{margin:0;font-family:"Noto Serif TC",serif;font-size:18px;line-height:1.65;color:var(--c7);background:#fff;overflow-x:clip}
img,svg,iframe{max-width:100%}
img{display:block}
a{color:var(--c0);text-decoration:none}
h1,h2,h3,h4,h5,h6,p,ul{margin:0}
ul{padding:0;list-style:none}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:200}
.skip:focus{left:8px;top:8px}

/* 頁首 */
.hd{position:fixed;inset:0 0 auto 0;height:var(--hd);z-index:100;background:linear-gradient(rgba(255,255,255,.96) 60%,rgba(255,255,255,.7));backdrop-filter:blur(6px);transition:transform .3s}
.hd.away{transform:translateY(-100%)}
.hd-in{max-width:1240px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.logo img{height:60px;width:auto}
.mainnav{display:flex;align-items:center;gap:6px}
.nav{display:flex;align-items:center}
.nav>li{position:relative}
.nav a{display:flex;align-items:center;gap:6px;padding:0 14px;height:var(--hd);font-size:13px;letter-spacing:.08em;color:var(--c0);white-space:nowrap}
.nav a:hover,.nav li:focus-within>a{color:var(--c4)}
.caret{flex:none;opacity:.7}
.tg{display:none}
.sub{position:absolute;left:0;top:calc(100% - 22px);min-width:190px;background:#fff;box-shadow:0 6px 24px rgba(83,104,123,.15);border-top:1px solid var(--c3);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;padding:6px 0}
.sub a{height:auto;padding:10px 20px;font-size:13px}
.sub .sub{left:100%;top:-7px}
.sub .caret{transform:rotate(-90deg);margin-left:auto}
li:hover>.sub,li:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.sub li{position:relative}
.soc{display:flex;gap:2px;margin-left:8px}
.soc a{display:grid;place-items:center;width:34px;height:34px;color:var(--c0)}
.soc a:hover{color:var(--c4)}
.burger{display:none}

/* 手機 */
@media (max-width:1024px){
 :root{--hd:68px}
 /* backdrop-filter 會讓 fixed 的選單面板以頁首為定位基準，高度被切成頁首高度；手機版不用毛玻璃 */
 .hd{backdrop-filter:none;background:rgba(255,255,255,.97)}
 .logo img{height:46px}
 .burger{display:block;width:44px;height:44px;border:0;background:none;padding:12px;position:relative}
 .burger span{display:block;height:1.5px;background:var(--c0);margin:6px 0;transition:.25s}
 .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
 .burger[aria-expanded=true] span:nth-child(2){opacity:0}
 .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
 .mainnav{position:fixed;inset:var(--hd) 0 0 0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 40px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:.3s}
 .mainnav.open{transform:none;visibility:visible}
 .nav{flex-direction:column;align-items:stretch}
 .nav a{height:auto;padding:15px 0;font-size:16px;border-bottom:1px solid var(--c6)}
 .nav li{position:relative}
 .nav .caret{display:none}
 .tg{display:block;position:absolute;right:0;top:6px;width:44px;height:44px;border:0;background:none;color:var(--c0)}
 .tg .caret{display:block;margin:auto;transition:.2s}
 .tg[aria-expanded=true] .caret{transform:rotate(180deg)}
 .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 16px;display:none}
 .sub.open{display:block}
 li:hover>.sub{display:none}
 li:hover>.sub.open{display:block}
 .sub .sub{padding-left:16px}
 .sub a{font-size:15px}
 .soc{margin:18px 0 0}
}

/* 內容區：橫排欄位在手機改直排；每個區塊左右留邊 */
main{display:block;overflow-x:clip}
.hasl>:not(.lay){position:relative;z-index:1}
@media (max-width:1024px){main *{background-attachment:scroll!important}}
.shut{display:none!important}
.acc-t{cursor:pointer}
.mb{display:none}
@media (max-width:767px){.dk{display:none}.mb{display:block}}
@media (max-width:767px){
 /* 醫師區塊（手機版原站沒有設計）：上方照片靠右裁切，下方堆疊文字 */
 .doc-m{background-repeat:no-repeat!important;background-position:right top!important;background-size:auto 340px!important;background-color:#6f7c89!important;padding:360px 24px 44px!important}
 .doc-l{background-position:left top!important}
 .doc-m *{max-width:100%!important;min-height:0!important}
 .doc-m [class]{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
 .gal{min-height:0!important}
 .gal>*{position:static!important;width:100%!important;max-width:100%!important;transform:none!important;margin-bottom:14px}
 .r{flex-direction:column!important}
 .r>*{width:100%!important;max-width:100%!important}
 main [class]{min-width:0}
 .r{padding-left:min(var(--pl,24px),24px)}
}
.car{display:flex!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start}
.slide img{width:100%!important;max-width:none!important}

/* 浮動聯絡 */
.fab{position:fixed;right:18px;bottom:22px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab-btn{width:46px;height:46px;border-radius:50%;border:0;background:#111;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.fab-menu{display:none;flex-direction:column;gap:8px}
.fab.open .fab-menu{display:flex}
.fab-menu a{background:#fff;padding:8px 18px;border-radius:20px;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.18)}

.nf main{display:block;padding:20vh 24px;text-align:center;color:var(--c0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}