:root{
  --pine:#1c4a43;--pine-deep:#123430;
  --dawn:#d99a3d;--dawn-soft:#f7ead2;
  --paper:#fbfaf7;--mist:#edf1ee;
  --ink:#26302d;--ink-soft:#5c6a65;--line:#dde4e0;
  --serif:'Noto Serif TC',serif;--sans:'Noto Sans TC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:100%;-webkit-text-size-adjust:100%}   /* iPhone 橫拿時 Safari 不要自動放大部分文字 */
/* ---- 全站等比縮放 ------------------------------------------------
   所有尺寸都用 rem，只要改 html 的字級，整頁（字、留白、圖示、容器寬）就一起等比放大。
   1280px 以下維持 16px（筆電、平板、手機不變）；
   1280px 以上隨螢幕寬度放大，1760px 寬時到 22px 封頂（約 1.37 倍）。
   同時受視窗高度限制，避免寬而矮的視窗（例如 125% 縮放的筆電）放大過頭。 */
@media(min-width:1280px){html{font-size:clamp(16px,min(1.25vw,2.6vh),22px)}}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.75;font-size:1rem}
img{max-width:100%;display:block}
a{color:var(--pine);text-decoration:none}
.wrap{max-width:67.5rem;margin:0 auto;padding:0 1.25rem}
/* 寬版容器：頁首、LINE 橫幅用。電腦上幾乎滿版，左右只留約 4% 邊距（同舊官網） */
:root{--gutter:clamp(1.25rem,4vw,5rem)}
.wrap-wide{max-width:calc(84rem + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

.topbar{background:var(--pine-deep);color:#e8efe9;font-size:0.9375rem}
.topbar .wrap-wide{display:flex;justify-content:space-between;align-items:center;min-height:2.25rem;flex-wrap:wrap;gap:0.25rem 1rem}
.topbar .tb-booking{font-weight:700}
@media(max-width:560px){.topbar .wrap-wide{justify-content:center;text-align:center;padding-top:0.25rem;padding-bottom:0.25rem}}
.topbar a{color:#e8efe9;cursor:pointer}
.topbar .tb-addr a{text-decoration:none;border-bottom:1px dotted rgba(232,239,233,.55)}
.topbar .tb-addr a:hover{border-bottom-color:#e8efe9}
header{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.94);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:3.25rem}
.brand{font-family:var(--serif);font-weight:900;font-size:1.5rem;color:var(--pine);letter-spacing:0.125rem;display:flex;align-items:center;gap:0.625rem;cursor:pointer}
.brand img.logo{width:2rem;height:2rem;display:inline-block}
.menu{display:flex;gap:0.25rem;list-style:none}
.menu a{display:block;padding:0.4rem 0.8rem;border-radius:1.25rem;font-size:0.9375rem;color:var(--ink);transition:.2s;cursor:pointer;white-space:nowrap}
.menu a:hover,.menu a.active{background:var(--pine);color:#fff}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:0.5rem;padding:0.375rem 0.625rem;font-size:1.125rem;cursor:pointer;color:var(--pine)}
@media(max-width:1023px){
  .burger{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;padding:0.625rem 1.25rem 1rem;border-bottom:1px solid var(--line);box-shadow:0 0.75rem 1.5rem rgba(0,0,0,.08)}
  .menu.open{display:flex}
}

.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f2f6f3 0%,var(--paper) 78%)}
.hero-top{padding-top:1.25rem;position:relative;z-index:1}
.hero-body{padding-bottom:5.5rem;text-align:center;position:relative;z-index:1}
.hero .eyebrow{display:inline-block;font-size:0.9375rem;letter-spacing:0.25rem;color:var(--dawn);font-weight:700;margin-bottom:0.9rem}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,4.6vw,3.5rem);color:var(--pine-deep);letter-spacing:0.16rem;line-height:1.3;margin-bottom:1.4rem}
.hero h1 .seg{display:inline-block}   /* 一行放不下時只從兩段中間換行，不會剩一個「康」字 */
.hero p{max-width:38.75rem;margin:0 auto 1.25rem;color:var(--ink-soft)}
.horizon{position:absolute;left:50%;bottom:-8.75rem;transform:translateX(-50%);width:87.5rem;height:17.5rem;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,var(--dawn-soft),transparent 70%);pointer-events:none}
.btn{display:inline-block;padding:0.75rem 2rem;border-radius:1.75rem;font-weight:700;font-size:0.9375rem;transition:.2s;cursor:pointer}
.btn-solid{background:var(--pine);color:#fff}
.btn-big{padding:0.85rem 3.2rem;font-size:1.25rem;letter-spacing:0.125rem;border-radius:2.25rem;line-height:1.6}
.btn-solid:hover{background:var(--pine-deep)}
.btn-ghost{border:1.5px solid var(--pine);color:var(--pine);margin-left:0.625rem}
.btn-ghost:hover{background:var(--pine);color:#fff}

/* ---- 首頁置頂公告：固定高度單行，數量與字長都不會影響排版 ---- */
.pinbar{display:flex;align-items:center;gap:0.75rem;height:2.875rem;padding:0 1.125rem;margin:0 0 0.875rem;
  background:var(--dawn-soft);border:1px solid #ecd6ac;border-radius:0.75rem;text-align:left;overflow:hidden;transition:.2s}
.pinbar:hover{background:#fbf0dc;border-color:#e2c48f}
.pinbar[hidden]{display:none}
.pinbar .pin-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:0.9375rem;font-weight:500;color:var(--pine-deep)}
.pinbar .pin-date{flex:0 0 auto;font-size:0.9375rem;color:var(--ink-soft)}
.pinbar .pin-more{flex:0 0 auto;font-size:0.9375rem;font-weight:700;color:var(--pine)}
@media(max-width:560px){.pinbar .pin-date{display:none}}

/* ---- 公告列表（/notices/ 實體頁） ---- */
.notice-list{max-width:51.25rem;margin:0 auto;display:flex;flex-direction:column;gap:0.875rem}
.notice{background:var(--dawn-soft);border:1px solid #ecd6ac;border-radius:0.875rem;padding:1.125rem 1.375rem;display:flex;gap:1rem;align-items:flex-start}
.notice .tag,.pinbar .tag{flex-shrink:0;background:var(--dawn);color:#fff;font-size:0.9375rem;font-weight:700;padding:0.1875rem 0.75rem;border-radius:0.875rem;margin-top:0.125rem}
.pinbar .tag{margin-top:0}
.home-announcement{margin:1rem auto 0;max-width:67.5rem;padding:.75rem 1rem;background:var(--dawn-soft);border:1px solid #ecd6ac;border-radius:.75rem;color:var(--pine-deep);line-height:1.55}
.home-announcement[hidden]{display:none}.home-announcement .ha-title{font-weight:700;color:#9a6c1c;margin-right:.75rem}
/* 首頁公告條「內容太高時怎麼處理」三種模式，後台可選（見 build.js 的 heightMode）。
   /notices/ 公告頁不受這裡影響，那邊永遠完整顯示。
   .ha-wrap 只是為了讓 clip 模式的漸層淡出有地方掛，不影響版面。 */
.home-announcement .ha-wrap{position:relative;display:block}
.home-announcement .ha-body{display:block;padding-right:.35rem}
/* scroll：內框滾動（預設）。桌機 12 行、手機 8 行，超過就出現捲軸 */
.home-announcement .ha-wrap[data-mode="scroll"] .ha-body{max-height:calc(1.55em * 12);overflow-y:auto}
/* clip：裁切不滾動。底部加漸層淡出，讓人知道下面還有東西 */
.home-announcement .ha-wrap[data-mode="clip"] .ha-body{max-height:calc(1.55em * 12);overflow:hidden}
.home-announcement .ha-wrap[data-mode="clip"][data-clipped]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5em;pointer-events:none;background:linear-gradient(to bottom,rgba(253,246,233,0),var(--dawn-soft))}
/* full：完整顯示，不限高度 */
.home-announcement .ha-wrap[data-mode="full"] .ha-body{max-height:none;overflow:visible}
/* COMMIT 2：公告條內容改由 marked 解析，會產生真的 <p>/<h2>~<h6>/<ul>/<ol> 等區塊標籤，
   不再是純文字加 white-space:pre-wrap。這裡另外給一組較緊湊的間距，避免直接套用文章頁的大留白，
   把公告條撐爆（原本 12 行／手機 8 行的捲軸高度維持不變）。 */
.home-announcement .ha-body p{margin:0 0 .5em}
.home-announcement .ha-body p:last-child{margin-bottom:0}
.home-announcement .ha-body :is(h1,h2,h3,h4,h5,h6){font-family:var(--serif);color:var(--pine-deep);line-height:1.3;margin:.5em 0 .25em;font-weight:700;font-size:1.05em}
.home-announcement .ha-body h6{color:var(--pine)}
.home-announcement .ha-body ul,.home-announcement .ha-body ol{margin:0 0 .5em 1.25em}
.home-announcement .ha-body li{margin-bottom:.2em}
.home-announcement .ha-body blockquote{margin:0 0 .5em;padding:.5rem .75rem;border-left:3px solid var(--dawn);background:#fff;border-radius:0 .5rem .5rem 0}
.home-announcement .ha-body blockquote p:last-child{margin-bottom:0}
.home-announcement .ha-body hr{border:0;border-top:1px solid #ecd6ac;margin:.75rem 0}
.home-announcement .ha-body code{background:#fff;padding:.1em .35em;border-radius:.25rem;font-size:.92em}
.home-announcement .ha-body img{max-width:100%;height:auto;display:block;border-radius:.5rem;margin:.35em 0}
@media(max-width:560px){.home-announcement{margin-left:1rem;margin-right:1rem;font-size:.875rem}
  .home-announcement .ha-wrap[data-mode="scroll"] .ha-body,.home-announcement .ha-wrap[data-mode="clip"] .ha-body{max-height:calc(1.55em * 8)}}
.announcement-module{min-height:calc(100svh - var(--hdr));display:flex;align-items:center;background:var(--dawn-soft)}
#page-home > .announcement-module{min-height:calc(100svh - var(--hdr))}
.announcement-module .wrap{width:min(100% - 2rem,67.5rem)}
/* 電腦版留白跟著螢幕高度連續縮放（步驟 1）。
   矮螢幕上，純裝飾的留白會吃掉大半預算（量過 460px 視窗：固定開銷 463px 已經超過
   407px 的預算，其中 188px、約 46% 是純留白），內文因此被壓成一條縫。
   優先順序應該是「先犧牲裝飾、再犧牲內容」，所以這些留白改用 clamp 綁 svh：
   高螢幕維持原本的數值完全不變，矮螢幕自動收緊，而且是連續的，不是用斷點硬切。 */
@media(min-width:861px){
  .announcement-module{padding-top:clamp(1.5rem,6svh,4.5rem);padding-bottom:clamp(1.5rem,6svh,4.5rem)}
  .announcement-module .sec-head{margin-bottom:clamp(1rem,4svh,2.75rem)}
  #notices-announcement.home-announcement{margin-top:clamp(.75rem,2svh,1.5rem)}
  .announcement-module .wrap > p{margin-top:clamp(.75rem,2svh,1.25rem)}
  /* 桌機的保底上限：8 行（行高 1.75 的整數倍，裁切剛好落在整行邊界）。
     螢幕夠高時會在下面被解除、改用剩餘空間計算。
     刻意寫成「預設有上限、夠高才解除」而不是用 max-height:699px 另外開一條規則：
     視窗高度可能是小數（例如 699.5），兩條規則會同時落空、變成完全沒有上限。 */
  .home-notice-wrap[data-mode="scroll"] .notice-body,
  .home-notice-wrap[data-mode="clip"] .notice-body{max-height:calc(1.75em * 8)}
}
/* 電腦版且螢幕夠高（700px 以上）：「太長」的定義＝「一個螢幕裝不下」，不是固定行數。
   區塊上下都鎖在一個螢幕高（min-height = max-height），裡面改直向 flex 排版，
   公告內文是唯一可被壓縮的部分：塞得下就完整顯示，塞不下才出現內框捲軸。
   螢幕多高、區塊留白多少、標題折幾行、日期佔幾行，全部由瀏覽器即時算，不用猜行數。
   （全域是 box-sizing:border-box，max-height 已含區塊自己的上下留白，不必手動扣。）
   heightMode=full 時把上限整個拿掉，恢復成「內容多長、首頁就被拉多長」。
   justify-content 寫兩次是保險：舊瀏覽器不認得 safe 就退回上面那行。
   為什麼只在 861px 以上：這個站本來就有「手機不強制滿版、區塊照自然高度排」的設計
   （見上面 @media(max-width:860px) 的 #page-home > section 規則，區塊在那邊是 display:block
   且不滿版），沒有「一個螢幕」可言，剩餘空間也就無從算起。
   為什麼還要限定 700px 以上（步驟 2、3）：一個螢幕的預算再怎麼分配都有下限，
   低於 6 行的內文已經不是摘要而是一條縫，沒有閱讀價值。螢幕矮到連這個下限都給不起時，
   就該放棄「一個螢幕」這個原則（見下面 max-height:699px 的規則），
   而不是繼續壓縮內容。這裡不能改用 min-height 擋，因為 flex 項目撐不下去時
   會直接溢出區塊、蓋到下一個區塊上，只能整組換掉。 */
@media(min-width:861px) and (min-height:700px){
  /* 解除上面的行數保底，改由 flex 即時算剩餘空間 */
  .home-notice-wrap[data-mode="scroll"] .notice-body,
  .home-notice-wrap[data-mode="clip"] .notice-body{max-height:none}
  .announcement-module{max-height:calc(100svh - var(--hdr));flex-direction:column;align-items:normal;justify-content:center;justify-content:safe center}
  .announcement-module[data-mode="full"]{max-height:none}
  .announcement-module .wrap{display:flex;flex-direction:column;min-height:0}
  .announcement-module .sec-head,.announcement-module .wrap > p{flex:0 0 auto}
  /* 由上到下每一層都要能收縮（flex:0 1 auto + min-height:0），
     內框捲軸才會落在內文那一層，而不是把整張卡片擠破。 */
  #notices-announcement.home-announcement{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;align-self:stretch}
  #notices-announcement .notice{flex:0 1 auto;min-height:0;align-items:stretch}
  /* .notice 是橫向 flex，橫向 flex 項目的「高度」不吃 flex-shrink，只看 align-items。
     維持預設的 flex-start 的話，文字欄高度永遠等於內容原始高度，高度限制傳不進去，
     內容會直接溢出卡片（量過：478px 的區塊裡內文還是 922px，日期整個被擠到畫面外）。
     改成 stretch 讓文字欄高度跟著被限制住的卡片，限制才會一路傳到內文那層。
     標籤要單獨拉回 flex-start，否則它會被拉成整張卡片一樣高。 */
  #notices-announcement .notice > .tag{align-self:flex-start}
  #notices-announcement .notice > div{display:flex;flex-direction:column;min-height:0}
  #notices-announcement .notice h3,#notices-announcement .notice small{flex:0 0 auto}
  #notices-announcement .home-notice-wrap{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
}
/* 手機／平板（860px 以下）：區塊本來就不滿版，暫時沿用原本的行數上限。
   這是已知的過渡作法——行數會因為螢幕窄、文字折行而失準，之後改成「等比例縮小」時一起換掉。 */
@media(max-width:860px){
  .home-notice-wrap[data-mode="scroll"] .notice-body{max-height:calc(1.55em * 12)}
  /* clip 的高度用行高（body 是 1.75）的整數倍，裁切才會落在整行邊界上。
     原本寫 1.55em 跟行高不成整數倍，實際只有 10.6 行／7.07 行，會把下一行的頂端
     露出一小截（量過手機是 198px ÷ 28px = 7.07 行）。
     scroll 刻意維持 1.55em 不動：手機的捲軸平常不會顯示，露出半行才是「下面還有」的提示，
     切齊反而會讓人以為內容就到這裡。 */
  .home-notice-wrap[data-mode="clip"] .notice-body{max-height:calc(1.75em * 12)}
}
@media(max-width:560px){
  .home-notice-wrap[data-mode="scroll"] .notice-body{max-height:calc(1.55em * 8)}
  .home-notice-wrap[data-mode="clip"] .notice-body{max-height:calc(1.75em * 8)}
}
/* #notices-announcement 只借用 .home-announcement 做 [hidden] 開關，視覺盒身在這裡整個重設掉，
   改用跟 /notices/ 公告頁完全相同的 .notice / .tag / h3 / .notice-body 樣式渲染，
   兩邊才會長得一模一樣；太高時另外用 .home-notice-wrap 包 .notice-body 做內框滾動，
   不影響 /notices/ 頁本身（那邊永遠完整顯示，不限高度）。 */
/* 左右 margin 一定要是 0 不能是 auto：電腦版 .wrap 是 flex 容器，flex 項目的 auto margin
   會吸掉左右剩餘空間，而且依規範它的優先權高於 align-self:stretch，
   結果就是卡片縮成內容寬度（量過：916px 的容器裡只剩 281px）。
   寬度改由 align-self:stretch 撐滿，.wrap 本身已經有置中與最大寬度，不需要這裡再置中。 */
/* line-height 要用 inherit 不能用 normal：.home-announcement 自己帶 1.55，
   直接寫 normal 會變成約 24px，比公告頁的 28px 緊一行，兩邊文字疏密就不一樣了。
   inherit 會拿到跟 /notices/ 頁同一個來源（body 的行高），這樣才真的一致。 */
#notices-announcement.home-announcement{margin:1.5rem 0 0;padding:0;background:none;border:0;line-height:inherit}
/* 文字欄填滿剩餘寬度。.notice 是橫向 flex，這一欄原本沒設 flex-grow，寬度是「內容自己多寬就多寬」，
   短行的公告只會用掉可用寬度的一小部分（量過：可用 704px 時實際只用 136~166px），
   手機上等於白白浪費寬度、多折好幾行。min-width:0 是讓長字串和圖片能正常收縮，不會撐破卡片。
   /notices/ 公告頁用同一個 .notice 樣板，所以兩邊一起修正。 */
.notice > div{flex:1 1 auto;min-width:0}
.home-notice-wrap{position:relative;display:block}
.home-notice-wrap[data-mode="scroll"] .notice-body{min-height:0;overflow-y:auto}
.home-notice-wrap[data-mode="clip"] .notice-body{min-height:0;overflow:hidden}
.home-notice-wrap[data-mode="clip"][data-clipped]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5em;pointer-events:none;background:linear-gradient(to bottom,rgba(253,246,233,0),var(--dawn-soft))}
.home-notice-wrap[data-mode="full"] .notice-body{overflow:visible}
/* 手機版內文字級跟 /notices/ 公告頁對齊：舊的 .home-announcement 手機規則會把字縮成 .875rem，
   讓首頁比公告頁小一號，違反「兩邊渲染一樣」。 */
@media(max-width:560px){#notices-announcement.home-announcement{font-size:1rem}}
.notice h3{font-size:1rem;color:var(--pine-deep)}
.notice small{color:var(--ink-soft)}

section{padding:4.5rem 0}
.sec-head{text-align:center;margin-bottom:2.75rem}
.sec-head .en{font-size:0.75rem;letter-spacing:0.25rem;color:var(--dawn);font-weight:700}
.sec-head h2{font-family:var(--serif);font-weight:900;font-size:1.625rem;color:var(--pine-deep);letter-spacing:0.1875rem;margin-top:0.375rem}
.sec-head h2::after{content:"";display:block;width:2.75rem;height:0.1875rem;background:var(--dawn);margin:0.875rem auto 0;border-radius:0.125rem}
/* ===== 關於晨昕：整塊背景圖 =====
   圖片鋪滿 .wrap 的寬度、貼齊上緣，底部切齊內文（診所交通便利那段）的上緣。
   徽章移到圖片最上緣、上方漸層淡出；標題白字，垂直錨定在圖片高度 40%
   （＝護理師眼睛的高度）。所有尺寸由 JS 依圖片實際比例即時計算，
   換任何比例的圖都會自動貼合。圖片與否由後台「關於晨昕背景圖」控制，
   沒設定圖片時不掛 has-bg，版面與純文字版完全一樣。 */
#about .wrap.has-bg{background-image:
    linear-gradient(to bottom,rgba(251,250,247,0) 74%,rgba(251,250,247,.5) 88%,rgba(251,250,247,1) 100%),
    linear-gradient(to bottom,rgba(251,250,247,.92) 0%,rgba(251,250,247,.55) 7%,rgba(251,250,247,.18) 16%,rgba(251,250,247,0) 28%),
    var(--about-bg);
  background-size:100% var(--about-img-h,0px),100% var(--about-img-h,0px),100% auto;
  background-position:top center;background-repeat:no-repeat;border-radius:0.875rem}
#about .wrap.has-bg .badges-top{padding:0.55rem 0 0;text-align:center}
#about .wrap.has-bg .badges-top .badge{display:inline-block;background:var(--pine);color:#fff;
  font-size:0.8125rem;padding:0.25rem 0.875rem;border-radius:0.875rem;margin:0 0.35rem 0}
#about .wrap.has-bg .sec-head{margin-bottom:0}
#about .wrap.has-bg .sec-head h2{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.32)}
#about .wrap.has-bg .sec-head .en{color:#ffd79a}
#about .wrap.has-bg .about-grid>div{align-self:start}
#about .wrap.has-bg .about-grid p{margin-top:0}
@media(max-width:760px){
  /* 窄版：不把圖當文字背景（會裁到人、字也壓在圖上糊掉）。
     改成上下堆疊：完整的圖在最上面（圓角、不裁），底下依序是徽章、標題、文字，各自成一格。
     手機沒有背景圖時這些規則不生效（.has-bg 才套），維持純文字版。 */
  #about .wrap.has-bg{
    background-image:var(--about-bg-m,var(--about-bg));
    background-size:100% auto;background-position:top center;background-repeat:no-repeat;
    border-radius:0.875rem;
    padding-top:var(--about-img-h,56vw);   /* 空出圖片的高度，讓下面的內容從圖底開始 */
  }
  /* 徽章移回內文上方、深綠底白字，站在乾淨底色上。
     兩顆藥丸強制並排同一列（nowrap）；字級用 clamp 隨螢幕寬度縮放，
     窄機（360）自動縮到約 0.66rem，寬一點就大一點，都塞得下不換行、不溢出。 */
  #about .wrap.has-bg .badges-top{padding-top:1.5rem;display:flex;flex-wrap:nowrap;
    justify-content:center;gap:0.4rem}
  #about .wrap.has-bg .badges-top .badge{margin:0;white-space:nowrap;
    font-size:clamp(0.66rem,3.1vw,0.8rem);padding:0.3rem 0.7rem}
  /* 標題與文字都用正常深色，不再壓在圖上 */
  #about .wrap.has-bg .sec-head h2{color:var(--pine-deep);text-shadow:none}
  #about .wrap.has-bg .sec-head .en{color:var(--dawn)}
  #about .wrap.has-bg .sec-head{padding-top:0 !important;padding-bottom:0 !important}
}
.sec-alt{background:var(--mist)}
/* services：標題與圖示距離縮小 */
#services .sec-head{margin-bottom:1.75rem}
/* ---- 首頁分區：每一區至少一整螢幕、內容垂直置中 ---- */
/* --hdr 是 sticky 導覽列的高度（.nav 3.25rem + 下框線 1px），錨點偏移與區塊高度都靠它 */
:root{--hdr:calc(3.25rem + 1px)}
#page-home > section{
  min-height:calc(100vh - var(--hdr));
  min-height:calc(100svh - var(--hdr));   /* 手機瀏覽器網址列會伸縮，svh 比較準 */
  padding:3.5rem 0;
  display:flex;align-items:center;
}
#page-home > section > .wrap{width:100%}
/* 子頁（健康新知、公告頁、文章頁）：標題離導覽列近一點，原本 4.5rem 上留白太空 */
.page:not(#page-home) > section{padding-top:1.75rem}
/* 點導覽列捲過去時，讓區塊上緣停在 sticky 導覽列下方，不被蓋住 */
.hero,#page-home > section,#page-news > section{scroll-margin-top:var(--hdr)}
/* 手機不強制滿版，內容照自然高度排，避免大量空白 */
@media(max-width:860px){
  #page-home > section{min-height:0;display:block;padding:3rem 0}
}
/* ---- 業界版：寬度決定版型，高度只切換一次 compact mode。
   內容超過一屏時 section 自然增高並捲動；不裁切，也不猜瀏覽器預設字級。 */


.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.75rem;align-items:start}
.about-grid .badge{display:inline-block;background:var(--pine);color:#fff;font-size:0.8125rem;padding:0.25rem 0.875rem;border-radius:0.875rem;margin:0 0.375rem 0.625rem 0}
.about-right p{margin-top:3.4375rem}
/* 徽章預設區塊（無背景圖時）：位置與間距比照原本 .about-grid .badge */
.badges-top{text-align:center;margin-bottom:1.25rem}
.badges-top .badge{display:inline-block;background:var(--pine);color:#fff;font-size:0.8125rem;padding:0.25rem 0.875rem;border-radius:0.875rem;margin:0 0.35rem}
.about-grid .about-lead{margin-top:0.875rem}
/* 關於晨昕改為單一段落（合併原本左右兩欄）：置中、限制行寬，長行才好讀 */
.about-grid.about-single{display:block;max-width:52rem;margin:0 auto;text-align:center}
.about-grid.about-single .about-lead{margin-top:0;line-height:1.9}
.about-grid.about-single .about-lead strong{color:var(--pine);font-weight:700}
@media(max-width:760px){.about-grid{grid-template-columns:1fr}.about-right p{margin-top:0}.about-grid.about-single{text-align:left}}

.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.svc{background:transparent;border:0;border-radius:0.875rem;padding:0.875rem 0.625rem;text-align:center;transition:.25s}
.svc:hover{transform:translateY(-0.25rem)}
.svc:hover .icon{box-shadow:0 0.75rem 1.75rem rgba(28,74,67,.14)}
.svc .icon{width:6rem;height:6rem;background:var(--dawn-soft);border-radius:1.125rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;transition:.25s}
.svc .icon svg{width:3.5rem;height:3.5rem}
.svc h3{font-family:var(--serif);font-size:1.1875rem;color:var(--pine-deep);margin-bottom:0}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
/* 手機服務項目：改 2 欄格子（原本單欄 8 列太高），卡片與圖示縮小、間距收緊 */
@media(max-width:480px){
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:0.625rem}
  .svc{padding:0.75rem 0.5rem;background:var(--paper);border-radius:0.875rem}
  .svc .icon{width:3.75rem;height:3.75rem;border-radius:0.875rem;margin-bottom:0.5rem}
  .svc .icon svg{width:2.125rem;height:2.125rem}
  .svc h3{font-size:1.0625rem}
}

.hours-table{width:100%;border-collapse:collapse;background:#fff;border-radius:0.875rem;overflow:hidden;box-shadow:0 0.25rem 1.25rem rgba(0,0,0,.05);font-size:1.25rem}
.hours-table th,.hours-table td{padding:0.75rem 0.5rem;text-align:center;border-bottom:1px solid var(--line)}
.hours-table thead th{background:var(--pine);color:#fff;font-weight:700}
.hours-table .slot{font-weight:700;color:var(--pine);white-space:nowrap}
.hours-table .off{color:#b6b0a4}
.hours-note{text-align:center;color:var(--ink-soft);font-size:0.9375rem;margin-top:1rem}
/* 註記排版：只在「剛好兩行」時介入，先試著縮字級換回一行，不行才改成整句換行。
   .sent 是句子容器，inline-block 讓一整句放不下時整句掉到下一行，不會斷在句中。 */
.hours-note .sent{display:inline-block}
.hours-scroll{overflow-x:auto}

.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.doc{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.5rem;display:flex;gap:1.375rem;align-items:stretch}
.doc img.photo{flex:0 0 13.75rem;width:13.75rem;height:auto;min-height:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:0.75rem;background:var(--mist)}
/* 沒有照片的醫師：用通用剪影占位，維持與有照片者相同的版面 */
.doc .photo-ph{flex:0 0 13.75rem;width:13.75rem;min-height:100%;aspect-ratio:4/5;border-radius:0.75rem;background:linear-gradient(160deg,var(--mist),#e3ebe6);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;color:var(--pine);opacity:.72}
.doc .photo-ph svg{width:4.875rem;height:4.875rem;display:block}
.doc .photo-ph span{font-size:0.7812rem;letter-spacing:1px;color:var(--ink-soft)}
.doc .doc-body{flex:1;min-width:0}
.doc h3{font-family:var(--serif);font-size:1.375rem;color:var(--pine-deep)}
.doc .role{color:var(--dawn);font-weight:700;font-size:0.875rem;margin:0.125rem 0 0.75rem}
.doc ul{list-style:none;font-size:0.8125rem;color:var(--ink-soft)}
.doc li{padding:0.1562rem 0;border-bottom:1px dashed var(--line);line-height:1.4}
/* 兩欄時卡片太窄（861~1000px 文字欄只剩約 120px），1023px 以下改單欄；1024~1279px 照片縮小一點 */
@media(max-width:1023px){.team-grid{grid-template-columns:1fr}}
@media(min-width:1024px) and (max-width:1279px){.doc img.photo,.doc .photo-ph{flex-basis:11rem;width:11rem}}
@media(max-width:420px){.doc{flex-direction:column}.doc img.photo{flex:0 0 auto;width:8.125rem;margin:0 auto}}
/* 首頁醫療團隊：照片與各自的姓名、學經歷欄對齊 */
#team .team-grid{column-gap:1.5rem;row-gap:1.5rem}
#team .doc{display:grid;grid-template-columns:minmax(10rem,50%) 1fr;gap:0;padding:0;overflow:hidden;align-items:stretch}
#team .doc img.photo,#team .doc .photo-ph{width:100%;height:100%;min-height:0;aspect-ratio:auto;align-self:stretch;margin:0;object-fit:cover;object-position:50% 0;border-radius:0;background:var(--mist)}
#team .doc .doc-body{padding:1.25rem .35rem 1.5rem .55rem}
#team .doc h3{font-size:1.55rem;margin:0 0 .4rem}
#team .doc ul{font-size:.95rem}
#team .doc li{padding:.18rem 0;line-height:1.35}
@media(min-width:861px) and (max-height:700px){#team .doc{grid-template-columns:minmax(10rem,44%) 1fr}}
@media(max-width:560px){#team .team-grid{grid-template-columns:1fr}#team .doc{grid-template-columns:30% 70%}#team .doc .doc-body{padding:1.25rem}#team .doc h3{font-size:1.25rem}}

.cat-bar{display:flex;flex-direction:column;margin-bottom:1.75rem}
.cat-row{display:flex;gap:0.625rem;flex-wrap:wrap;align-items:center}
.cat-row-bottom{justify-content:flex-start}
.cat-btn{padding:0.5rem 1.375rem;border-radius:1.375rem;border:1.5px solid var(--pine);background:#fff;color:var(--pine);font-size:0.9062rem;font-weight:700;cursor:pointer;font-family:var(--sans);transition:.2s}
.cat-more{position:relative;display:inline-block}
.cat-menu{display:none;position:absolute;top:calc(100% + 0.5rem);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:0.75rem;box-shadow:0 0.75rem 1.75rem rgba(28,74,67,.16);padding:0.375rem;z-index:20;min-width:9.375rem}
.cat-more:hover .cat-menu,.cat-more:focus-within .cat-menu{display:block}
.cat-menu a{display:block;padding:0.5rem 1rem;border-radius:0.5rem;font-size:0.875rem;font-weight:700;color:var(--pine);cursor:pointer;white-space:nowrap;text-align:center}
.cat-menu a:hover,.cat-menu a.on{background:var(--pine);color:#fff}
.news-pager{display:flex;gap:0.5rem;justify-content:center;margin-top:2.25rem;flex-wrap:wrap}
.pg-btn{min-width:2.5rem;height:2.5rem;padding:0 0.75rem;border-radius:0.625rem;border:1.5px solid var(--line);background:#fff;color:var(--pine);font-size:0.9375rem;font-weight:700;cursor:pointer;font-family:var(--sans);transition:.2s}
.pg-btn:hover:not(:disabled){border-color:var(--pine)}
.pg-btn.active{background:var(--pine);color:#fff;border-color:var(--pine)}
.pg-btn:disabled{opacity:.4;cursor:default}
.cat-btn.active,.cat-btn:hover{background:var(--pine);color:#fff}
.art-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.375rem}
@media(max-width:760px){.art-grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:0.875rem;padding:1.625rem;cursor:pointer;transition:.25s;display:flex;flex-direction:column;gap:0.625rem}
@media(hover:hover){.card:hover{transform:translateY(-0.25rem);box-shadow:0 0.875rem 1.875rem rgba(28,74,67,.12)}}
.card img.thumb{border-radius:0.625rem;margin:-0.5rem -0.5rem 0.25rem;width:calc(100% + 1rem);max-height:11.25rem;object-fit:cover}
.card .cats,.article-page .cats{display:flex;flex-wrap:wrap;gap:0.375rem}
.card .cat,.article-page .cat{background:var(--dawn-soft);color:#9a6c1c;font-size:0.7812rem;font-weight:700;padding:0.1875rem 0.75rem;border-radius:0.75rem}
.card h3{font-family:var(--serif);font-size:1.1875rem;color:var(--pine-deep);line-height:1.5}
.card p{font-size:0.875rem;color:var(--ink-soft)}
.card .meta{font-size:0.8125rem;color:#9aa5a0;margin-top:auto}

.article-page{max-width:47.5rem;margin:0 auto}
.article-page .cats{margin-bottom:0.875rem}
.article-page h1{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.125rem);color:var(--pine-deep);line-height:1.5;margin-bottom:0.75rem}
.article-page .meta{color:#9aa5a0;font-size:0.875rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line);margin-bottom:1.625rem}
.article-body p{margin-bottom:1.125rem;font-size:1.0312rem}
/* 後台工具列「標題1～6」→ h2~h6（整體降一級避開頁面 h1）。
   文章頁與公告頁共用；明確給每一級字級，否則 h5/h6 會套用瀏覽器預設而變得比內文還小。 */
.article-body :is(h2,h3,h4,h5,h6),.notice-body :is(h2,h3,h4,h5,h6){
  font-family:var(--serif);color:var(--pine-deep);line-height:1.35;margin:1.625rem 0 0.75rem;font-weight:700}
.article-body h2,.notice-body h2{font-size:1.5rem}
.article-body h3,.notice-body h3{font-size:1.3rem}
.article-body h4,.notice-body h4{font-size:1.15rem}
.article-body h5,.notice-body h5{font-size:1.05rem}
.article-body h6,.notice-body h6{font-size:1rem;color:var(--pine)}
.article-body ul,.article-body ol,.notice-body ul,.notice-body ol{margin:0 0 1.125rem 1.375rem}
.article-body li,.notice-body li{margin-bottom:0.35rem}
/* 後台編輯器的「引用、分隔線、刪除線、程式碼」 */
.article-body blockquote,.notice-body blockquote{margin:0 0 1.125rem;padding:0.75rem 1rem;border-left:4px solid var(--dawn);background:var(--mist);border-radius:0 0.5rem 0.5rem 0}
.article-body blockquote p:last-child,.notice-body blockquote p:last-child{margin-bottom:0}
.article-body hr,.notice-body hr{border:0;border-top:1px solid var(--line);margin:1.75rem 0}
.article-body code,.notice-body code{background:var(--mist);padding:0.1em 0.35em;border-radius:0.25rem;font-size:0.92em}
.article-cover{margin:0 0 1.75rem;border-radius:0.875rem;overflow:hidden;background:var(--mist)}
.article-cover img{width:100%;height:auto;display:block}
.article-body img{border-radius:0.75rem;margin:0.625rem 0}
.back-link{display:inline-block;margin-top:2.125rem;font-weight:700;cursor:pointer}

.share{margin-top:2.75rem;padding:1.375rem;background:var(--mist);border-radius:0.875rem;text-align:center}
.share .lbl{font-weight:700;color:var(--pine-deep);margin-bottom:0.875rem;letter-spacing:0.125rem}
.share-btns{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.25rem;border-radius:1.5rem;color:#fff;font-weight:700;font-size:0.9062rem;transition:.2s;border:none;cursor:pointer;font-family:var(--sans)}
@media(hover:hover){.sbtn:hover{transform:translateY(-0.125rem);filter:brightness(1.08)}}   /* 手機點完不會卡在浮起狀態 */
.sbtn svg{width:1.125rem;height:1.125rem;fill:#fff}
.sbtn.fb{background:#1877f2}
.sbtn.line{background:#06c755}
.sbtn.threads{background:#111}
.sbtn.copy{background:var(--pine)}
/* 手機版：2×2 等寬、按鈕縮小（上排 Threads / Facebook，下排 LINE / 複製連結） */
@media(max-width:560px){
  .share{margin-top:2rem;padding:1.1rem 1rem 1.2rem}
  .share .lbl{font-size:0.9375rem;margin-bottom:0.75rem}
  .share-btns{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
  .sbtn{font-size:0.875rem;padding:0.5rem 0.75rem;gap:0.4rem;justify-content:center;border-radius:0.75rem;min-height:2.625rem}
  .sbtn svg{width:1rem;height:1rem;flex:none}
}

.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:stretch}
.contact-info{background:#fff;border:1px solid var(--line);border-radius:0.875rem;padding:1.875rem}
.contact-info h3{font-family:var(--serif);color:var(--pine-deep);font-size:1.25rem;margin-bottom:1rem}
.contact-info p{margin-bottom:0.625rem;color:var(--ink-soft)}
.contact-info strong{color:var(--ink)}
.mapbox{border-radius:0.875rem;overflow:hidden;min-height:20rem;border:1px solid var(--line)}
.mapbox iframe{width:100%;height:100%;min-height:20rem;border:0}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

footer{background:var(--pine-deep);color:#c8d6cf;padding:2.5rem 0;text-align:center;font-size:0.875rem}
footer .brand{color:#fff;justify-content:center;margin-bottom:0.625rem}
footer a{color:#e8efe9}

.page{display:none}
.page.show{display:block}
.toast{position:fixed;bottom:1.875rem;left:50%;transform:translateX(-50%) translateY(5rem);background:var(--pine-deep);color:#fff;padding:0.625rem 1.5rem;border-radius:1.5rem;font-size:0.875rem;opacity:0;transition:.3s;z-index:99}
.fab-line{position:fixed;right:1.375rem;bottom:1.375rem;z-index:90;display:flex;align-items:center;justify-content:center;width:3.75rem;height:3.75rem;background:#06c755;border-radius:50%;box-shadow:0 0.5rem 1.5rem rgba(6,199,85,.45);transition:.2s}
.fab-line:hover{transform:translateY(-0.1875rem);box-shadow:0 0.75rem 1.875rem rgba(6,199,85,.55)}
.fab-line svg{width:2.125rem;height:2.125rem;fill:#fff}
@media(min-width:1024px){.fab-line{width:5.625rem;height:5.625rem;right:1.75rem;bottom:1.75rem}.fab-line svg{width:3.1875rem;height:3.1875rem}}   /* 電腦版放大 1.5 倍 */
/* 手機版按鈕放大 1.2 倍（4.05rem=64.8px、2.25rem=36px）：首頁綠色橫幅寫著
   「點擊右下角LINE圖示加好友」，原本的 54px 對這個引導來說不夠顯眼。
   放大後佔螢幕寬約 17%，右下角仍留有餘裕，不會壓到公告卡片。 */
@media(max-width:480px){.fab-line{width:4.05rem;height:4.05rem;right:1rem;bottom:1rem}.fab-line svg{width:2.25rem;height:2.25rem}}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.loading{text-align:center;color:var(--ink-soft);padding:2.5rem 0;grid-column:1/-1}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---- LINE 加好友橫幅 ---------------------------------------------
   HTML 版橫幅（原 1296×400 圖片放大會糊、手機看不清楚）。
   【首屏保證】電腦上橫幅寬度滿版，高度 = min(原圖比例的高度, 螢幕剩下的空間)：
     --lb-other 由下方 JS 量出「橫幅以外、到『預約看診日期』按鈕底部」的總高度，
     用 100svh 減掉它就是橫幅能用的高度 → 預約按鈕一定落在第一屏。
   橫幅內部尺寸單位 cqh = 橫幅高度的 1%，橫幅變矮時字與 QR 一起等比縮小、只是左右變得更寬，不會擠壞。
   橫幅寬度不足 860px（平板直向、手機）時改成直排、隱藏 QR（手機掃不到自己的螢幕）。 */
:root{--lb-other:30rem;--lb-min:7rem}
.line-banner{display:block;container:lb / inline-size;margin:0 0 1rem;color:#fff;border-radius:1rem}
.line-banner:focus-visible{outline:3px solid var(--dawn);outline-offset:4px}
/* 高度上限 23.8cqi（寬:高 ≈ 4.2:1）：中間多了一塊權益清單，橫幅要夠寬才排得下三欄 */
.lb{container:lbbox / size;position:relative;background:#00d287;border-radius:min(2.3cqi,1.5rem);overflow:hidden;
  height:min(23.8cqi, max(var(--lb-min), calc(100svh - var(--lb-other))));
  box-shadow:0 0.625rem 1.5rem rgba(6,82,56,.18);transition:transform .2s,box-shadow .2s}
@media(hover:hover){.line-banner:hover .lb{transform:translateY(-3px);box-shadow:0 0.875rem 2rem rgba(6,82,56,.26)}}   /* iPhone 點完不會卡在浮起狀態 */
.lb::before,.lb::after{content:"";position:absolute;border-radius:50%;background:#19d693;pointer-events:none}
.lb::before{width:110cqh;height:110cqh;right:-29cqh;top:-62cqh}
.lb::after{width:78cqh;height:78cqh;left:-32cqh;bottom:-52cqh}
.lb-ring{position:absolute;border:max(2px,.7cqh) solid rgba(255,255,255,.45);border-radius:50%;pointer-events:none}
.lb-ring.r1{width:7.5cqh;height:7.5cqh;left:150cqh;top:9cqh}
.lb-ring.r2{width:5.2cqh;height:5.2cqh;left:139cqh;top:82cqh}
/* 三欄：左（標題＋按鈕）｜中（權益清單，置中）｜右（QR） */
.lb-row{--m:1cqh;--p:1cqh;position:absolute;inset:0;z-index:1;display:flex;align-items:center;padding:0 16.5cqh 0 19cqh}
/* 橫幅被壓得越扁、左右越空：把標題按鈕（--m）和中間清單（--p）放大，填滿空間 */
@container lbbox (min-aspect-ratio:4.6/1){.lb-row{--m:1.08cqh;--p:1.25cqh}}
@container lbbox (min-aspect-ratio:5/1){.lb-row{--m:1.15cqh;--p:1.4cqh}}
@container lbbox (min-aspect-ratio:6/1){.lb-row{--m:1.25cqh;--p:1.55cqh}}
.lb-main{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start}
.lb-title{font-weight:700;font-size:calc(20.1*var(--m));line-height:1.2;letter-spacing:calc(1*var(--m));margin-bottom:calc(6*var(--m))}
.lb-cta{display:inline-flex;align-items:center;gap:0;height:calc(18*var(--m));padding:0 calc(8*var(--m));border-radius:99px;
  background:#f59e2d;font-weight:700;font-size:calc(9.2*var(--m));line-height:1;white-space:nowrap;box-shadow:0 calc(1*var(--m)) calc(3*var(--m)) rgba(150,80,0,.18)}
.lb-perks{flex:1 1 auto;min-width:0;display:flex;justify-content:center;padding:0 calc(8*var(--p))}
.lb-perks-in{background:rgba(255,255,255,.14);border:max(1px,calc(.4*var(--p))) solid rgba(255,255,255,.32);border-radius:calc(4.5*var(--p));padding:calc(6*var(--p)) calc(8*var(--p)) calc(6.5*var(--p))}
.lb-perks-h{font-weight:700;font-size:calc(6.2*var(--p));line-height:1.3;white-space:nowrap;margin-bottom:calc(5*var(--p))}
.lb-perks ol{list-style:none;counter-reset:perk;display:grid;grid-template-columns:auto auto;gap:calc(4*var(--p)) calc(9*var(--p))}
.lb-perks li{counter-increment:perk;display:flex;align-items:center;gap:calc(2.6*var(--p));font-weight:700;font-size:calc(6.4*var(--p));line-height:1.2;white-space:nowrap}
.lb-perks li::before{content:counter(perk);flex:0 0 auto;width:calc(8.6*var(--p));height:calc(8.6*var(--p));border-radius:50%;background:#fff;color:#065238;
  display:flex;align-items:center;justify-content:center;font-size:calc(5.4*var(--p));font-weight:700}
.lb-qr{position:relative;flex:0 0 auto;align-self:flex-end;margin-bottom:5cqh;width:75cqh;height:77.5cqh;background:#fff;border-radius:5cqh;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4.9cqh;color:#065238}
.lb-cat{position:absolute;left:50%;top:-17.5cqh;width:35cqh;transform:translateX(-50%)}
/* 字級上限跟卡片等比（8cqh / 6cqh）：瀏覽器字級調大＋視窗很矮時，字不會撐出白框 */
.lb-qr b{font-size:min(max(5.5cqh,0.75rem),8cqh);line-height:1;margin-bottom:3.6cqh;white-space:nowrap}
.lb-qr img{width:46.3cqh;height:46.3cqh}
.lb-qr small{font-size:min(max(3.7cqh,0.65rem),6cqh);font-weight:700;color:#009b63;margin-top:3.2cqh;line-height:1;white-space:nowrap}
/* 橫幅寬度 < 860px（平板直向、手機）：直排、字級改用固定值；QR 隱藏（手機掃不到自己的螢幕） */
@container lb (max-width:859px){
  .lb{container-type:normal;height:auto;border-radius:1rem}
  .lb::before{width:14rem;height:14rem;right:-5rem;top:-8rem}
  .lb::after{width:9rem;height:9rem;left:-4rem;bottom:-6rem}
  .lb-ring,.lb-qr,.lb-perks{display:none}   /* 手機用簡單版：只留標題＋橘色按鈕；QR 掃不到自己的螢幕 */
  .lb-row{position:relative;inset:auto;flex-direction:column;align-items:stretch;padding:1.1rem 1.1rem 1.15rem}
  .lb-title{font-size:clamp(1.6rem,8cqi,2.5rem);margin-bottom:0.6rem;letter-spacing:.05em}
  /* 三星等 Android 手機把系統字級調大時文字會變寬 → 允許換行，不會被橫幅切掉 */
  .lb-cta{align-self:flex-start;height:auto;padding:0.55rem 1.05rem;font-size:clamp(0.95rem,4.3cqi,1.2rem);
    flex-wrap:wrap;justify-content:center;white-space:normal;line-height:1.35;text-align:center;border-radius:1.5rem;max-width:100%}
  }
/* 不支援 container query 的舊瀏覽器（iOS 15 以前的 iPhone、舊版三星瀏覽器）：
   橫幅的 cqi/cqh 單位全部失效，改用固定尺寸的簡單版（同手機版），不會整塊亂掉 */
@supports not (container-type:inline-size){
  .lb{height:auto;border-radius:1rem}
  .lb::before{width:14rem;height:14rem;right:-5rem;top:-8rem}
  .lb::after{width:9rem;height:9rem;left:-4rem;bottom:-6rem}
  .lb-ring,.lb-qr,.lb-perks{display:none}
  .lb-row{position:relative;flex-direction:column;align-items:flex-start;padding:1.25rem 1.4rem}
  .lb-title{font-size:2rem;margin-bottom:0.6rem;letter-spacing:.05em}
  .lb-cta{height:auto;padding:0.55rem 1.05rem;font-size:1.05rem;flex-wrap:wrap;white-space:normal;line-height:1.35;border-radius:1.5rem}
}
/* 手機螢幕太矮、預約按鈕還是擠不進第一屏時，JS 會在 <html> 依序加上 fit1 → fit5 */
.fit1 .hero .eyebrow{display:none}
.fit2 .topbar .tb-addr{display:none}
.fit3 .hero p{font-size:0.875rem;line-height:1.6;margin-bottom:0.875rem}
/* fit4：手機系統字級調很大（三星常見）還是放不下 → 介紹文字移到預約按鈕「下面」，內容不刪只換位置 */
.fit4 .hero-body{display:flex;flex-direction:column;align-items:center}
.fit4 .hero-body p{order:3;margin:1.25rem auto 0}
/* fit5：再放不下就收掉橫幅標題「好友募集中！」，只留橘色按鈕 */
.fit5 .lb-title{display:none}

/* 手機門診表維持可讀且不溢出的尺寸；其餘內容跟隨使用者字級。 */
@media(max-width:860px){
  .hours-table{font-size:0.9062rem}
}

/* Responsive QA: keep replaced elements out of the inline text baseline. */
.mapbox iframe{display:block}
/* The expanded navigation must remain reachable on a short viewport. */
.menu.open{max-height:calc(100dvh - var(--hdr));overflow-y:auto}
@media(min-width:861px) and (max-height:700px){
  .hero-top{padding-top:0.75rem}
  .line-banner{margin-bottom:0.75rem}
  .hero .eyebrow{margin-bottom:0.45rem}
  .hero h1{font-size:clamp(1.75rem,3.4vw,2.5rem);margin-bottom:0.75rem}
  .btn-big{padding:0.7rem 2.8rem}
  #page-home > section{padding:1.25rem 0}
  .sec-head,#services .sec-head{margin-bottom:1.125rem}
  .svc{padding:0.5rem}
  .svc .icon{width:4.5rem;height:4.5rem;margin-bottom:0.625rem}
  .svc .icon svg{width:2.625rem;height:2.625rem}
  .hours-table th,.hours-table td{padding:0.55rem 0.4rem}
  .hours-note{margin-top:0.75rem}
}

/* Keep complete services and hours readable beneath the sticky header. */
@media(min-width:861px) and (max-height:700px){
  #page-home > #services,#page-home > #hours{padding:16px 0}
  #services .sec-head,#hours .sec-head{margin-bottom:16px}
  #services .sec-head h2,#hours .sec-head h2{line-height:1.35}
  #services .svc{padding:8px}
  #services .svc .icon{width:clamp(48px,12svh,72px);height:clamp(48px,12svh,72px);margin-bottom:8px}
  #services .svc .icon svg{width:60%;height:60%}
  #hours .hours-table{font-size:1rem;line-height:1.5}
  #hours .hours-table th,#hours .hours-table td{padding:0.45rem 0.35rem}
  #hours .hours-note{margin-top:0.6rem;line-height:1.5}
}

/* A visible announcement also consumes first-screen height. */
@media(min-width:861px) and (max-height:600px){
  .hero .eyebrow{margin-bottom:0.4rem}
  .hero h1{margin-bottom:0.6rem}
  .hero-top{padding-top:12px}
}
@media(min-width:861px) and (max-width:1280px) and (max-height:700px){
  /* 矮螢幕時縮小，但不要縮太多：原本 56px／32px 跟一般情況的 90px／51px 落差太大，
     看起來像壞掉。改成 72px／40px，仍然比 90px 省空間，視覺上又不會突兀。 */
  #fab-line{width:72px;height:72px;right:12px;bottom:16px}
  #fab-line svg{width:40px;height:40px}
  #hours .hours-note{max-width:calc(100% - 128px);margin-left:auto;margin-right:auto}
}