/* =========================================================
   居家復健指南 — 設計系統
   風格：鋼藍 × 暖米色，圓潤親切、長者友善、手機優先
   ========================================================= */

:root {
  /* 品牌色 — 對齊 orthoblessing.com.tw：主色青綠 #0091AC、暖黃 #FFDB59
     註：--blue* 變數名沿用，但實際值為品牌「青綠 teal」色，全站以此換膚 */
  --blue-900:#00485A; --blue-700:#006E86; --blue:#0091AC; --blue-400:#46AEC2; --blue-100:#DCEEF2;
  --cream:#FBF8F2;  --cream-2:#EFEADD;  --surface:#FFFFFF;  --surface-2:#FAFBFA;
  --ink:#293338;    --ink-2:#566069;    --ink-3:#646E77;
  --line:#E4E8E6;   --line-2:#EEF1EF;

  /* 暖黃品牌強調色 */
  --yellow:#FFDB59; --yellow-d:#F2C53D; --yellow-ink:#5A4A12;
  /* 暖色強調（橋接品牌黃，用於裝飾與次要 CTA）*/
  --coral:#FFC24B;  --coral-d:#F0A92E;
  --teal:#0091AC;   --amber:#E6A33B;   --green:#3FA07A;
  --danger:#D2483F; --danger-bg:#FCECEA; --danger-line:#F4C9C4;

  /* 分期色（幫助長者快速辨識）*/
  --acute:#D86B53;   --acute-bg:#FCEEE9;   --acute-line:#F3D3C8;
  --subacute:#D79A36; --subacute-bg:#FBF2DE; --subacute-line:#EFDDB2;
  --chronic:#3E8E6E; --chronic-bg:#E7F3EC; --chronic-line:#C3E2CF;

  /* 形狀 / 陰影 */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(34,50,63,.06), 0 2px 8px rgba(34,50,63,.05);
  --sh-2:0 6px 18px rgba(34,50,63,.10), 0 2px 6px rgba(34,50,63,.06);
  --sh-3:0 16px 40px rgba(34,50,63,.16);
  --sh-blue:0 10px 26px rgba(62,106,147,.30);

  /* 字級縮放（由工具列控制）*/
  --fs:1;
  --maxw:760px;
  --appbar-h:60px;
  --tabbar-h:66px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* 高對比模式 */
html.contrast {
  --cream:#FFFFFF; --cream-2:#F2F2F2; --surface:#FFFFFF; --surface-2:#FFFFFF;
  --ink:#0B0B0B; --ink-2:#2A2A2A; --ink-3:#3A3A3A;
  --line:#6E6E6E; --line-2:#8A8A8A;
  --blue:#015E73; --blue-700:#014C5E; --blue-900:#013543; --blue-400:#015E73; --blue-100:#D6EAF0;
  --coral:#8A5200; --coral-d:#6E4100;
  --danger:#B11A12; --danger-bg:#FBE7E5; --danger-line:#C76A63;
  --acute:#A3371F; --acute-bg:#FBE9E3; --acute-line:#CE876F;
  --subacute:#7A5400; --subacute-bg:#F6ECD6; --subacute-line:#C6A766;
  --chronic:#1C6B49; --chronic-bg:#E1F0E7; --chronic-line:#98C6AF;
  --amber:#7A5600; --green:#1C6F4D; --teal:#015E73;
}
/* 高對比下，把帶白字的淺色漸層元件改成實心深色，確保達對比；黃色 CTA 維持亮黃配黑字 */
html.contrast .hero{ background:#012B36; }
html.contrast .btn--primary,
html.contrast .feature__ic, html.contrast .feature__ic--2, html.contrast .feature__ic--3,
html.contrast .resume, html.contrast .counter__plus, html.contrast .todayfab__btn,
html.contrast .progress__bar,
html.contrast .phasetabs__ink,
html.contrast .phasetabs[data-phase="acute"] .phasetabs__ink,
html.contrast .phasetabs[data-phase="subacute"] .phasetabs__ink,
html.contrast .phasetabs[data-phase="chronic"] .phasetabs__ink{ background:var(--blue-900); }
html.contrast .btn--accent{ background:#FFCF1A; color:#000; }
html.contrast .section__title::before{ background:var(--blue-900); }

* { box-sizing:border-box; }
html {
  font-size: calc(18px * var(--fs));
  -webkit-text-size-adjust:100%;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  scroll-behavior:smooth;
}
body {
  margin:0;
  font-family:"Noto Sans TC", system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol { margin:0; }
ul,ol { padding-left:0; list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img { max-width:100%; display:block; }
a { color:var(--blue); }
:focus-visible { outline:3px solid var(--blue-400); outline-offset:2px; border-radius:6px; }

/* 標題用襯線（對齊品牌 Noto Serif TC），內文與介面維持黑體易讀 */
.hero__title,.section__title,.step__q,.detail__title,.dcard__name,.excard__name,
.result__badge b,.contact h3,.brand__text strong,.streak b{
  font-family:"Noto Serif TC","Noto Sans TC",serif; letter-spacing:0;
}

/* ============ 頂部工具列 ============ */
.appbar{
  position:sticky; top:0; z-index:50;
  height:var(--appbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:0 clamp(.7rem,3vw,1.2rem);
  background:rgba(251,247,239,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.55rem; padding:.3rem .4rem; border-radius:var(--r); }
.brand__mark{ color:var(--blue); display:grid; place-items:center; transition:transform .4s var(--ease); }
.brand:active .brand__mark{ transform:scale(.9) rotate(-6deg); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.brand__text strong{ font-size:1.02rem; font-weight:900; color:var(--blue-900); }
.brand__text small{ font-size:.66rem; color:var(--ink-3); font-weight:500; }

.appbar__tools{ display:flex; align-items:center; gap:.5rem; }
.fontctl{ display:flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px; box-shadow:var(--sh-1); }
.fontctl__btn{ min-width:44px; height:44px; border-radius:var(--r-pill); color:var(--blue-700); font-weight:700; display:grid; place-items:center; transition:background .2s, transform .1s; }
.fontctl__btn--mid{ font-size:.92rem; }
.fontctl__btn--big{ font-size:1.05rem; }
.fontctl__btn:active{ transform:scale(.92); }
.fontctl__btn:hover{ background:var(--blue-100); }
.iconbtn{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; color:var(--blue-700); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); transition:transform .12s, background .2s; }
.iconbtn:active{ transform:scale(.92); }
.iconbtn[aria-pressed="true"]{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ============ 版面容器 ============ */
.view{ width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(1rem,4vw,1.6rem) clamp(1rem,4vw,1.4rem) 2rem; }
.section{ margin-top:1.8rem; }
.section__title{ font-size:1.22rem; font-weight:900; color:var(--blue-900); display:flex; align-items:center; gap:.5rem; margin-bottom:.85rem; }
.section__title::before{ content:""; width:5px; height:1.15em; border-radius:var(--r-pill); background:linear-gradient(var(--coral),var(--coral-d)); }
.muted{ color:var(--ink-2); }

/* ============ 按鈕 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:54px; padding:.7rem 1.4rem; border-radius:var(--r-pill);
  font-size:1.06rem; font-weight:700; text-align:center;
  transition:transform .14s var(--ease), box-shadow .25s, filter .2s; will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn--primary{ color:#fff; background:linear-gradient(135deg,var(--blue-400),var(--blue) 55%,var(--blue-700)); box-shadow:var(--sh-blue); }
.btn--primary:hover{ filter:brightness(1.06); box-shadow:0 14px 32px rgba(62,106,147,.4); }
.btn--accent{ color:var(--yellow-ink); font-weight:900; background:linear-gradient(135deg,#FFE680,var(--yellow) 55%,var(--yellow-d)); box-shadow:0 10px 26px rgba(242,197,61,.42); }
.btn--accent:hover{ filter:brightness(1.04); }
.btn--ghost{ background:var(--surface); color:var(--blue-700); border:2px solid var(--blue-100); box-shadow:var(--sh-1); }
.btn--ghost:hover{ border-color:var(--blue-400); background:var(--blue-100); }
.btn--block{ width:100%; }
.btn--lg{ min-height:60px; font-size:1.12rem; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .8rem; border-radius:var(--r-pill); font-size:.82rem; font-weight:700; background:var(--blue-100); color:var(--blue-700); }

/* ============ 卡片 ============ */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }

/* ============ HERO（首頁）============ */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(1.6rem,6vw,2.6rem) clamp(1.3rem,5vw,2rem);
  color:#fff;
  background:linear-gradient(135deg,#5E8CB6 0%, #3E6A93 42%, #2C5575 100%);
  box-shadow:var(--sh-2);
  isolation:isolate;
}
.hero::before{ /* 流動光暈 */
  content:""; position:absolute; inset:-40% -20% auto -20%; height:160%;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(240,138,107,.55), transparent 60%),
    radial-gradient(45% 55% at 85% 30%, rgba(96,224,210,.40), transparent 60%),
    radial-gradient(50% 60% at 60% 90%, rgba(255,255,255,.30), transparent 60%);
  filter:blur(8px); z-index:-1;
  animation:heroFlow 16s var(--ease) infinite alternate;
}
@keyframes heroFlow{ 0%{transform:translate3d(-4%,-2%,0) scale(1.05) rotate(0deg);} 100%{transform:translate3d(5%,3%,0) scale(1.18) rotate(6deg);} }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:700; letter-spacing:.06em; background:rgba(255,255,255,.18); padding:.32rem .85rem; border-radius:var(--r-pill); backdrop-filter:blur(4px); }
.hero__title{ font-size:clamp(1.7rem,6.5vw,2.3rem); font-weight:900; line-height:1.25; margin:.7rem 0 .5rem; text-wrap:balance; }
.hero__sub{ font-size:1.04rem; opacity:.95; max-width:32ch; }
.hero__cta{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.4rem; }
.hero__cta .btn--accent{ box-shadow:0 12px 30px rgba(242,197,61,.5); }
.hero__cta .btn--ghost{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(4px); }
.hero__cta .btn--ghost:hover{ background:rgba(255,255,255,.28); }

/* 功能特色 */
.features{ display:grid; gap:.8rem; grid-template-columns:1fr; }
.feature{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem; }
.feature__ic{ flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue-400),var(--blue)); box-shadow:var(--sh-1); }
.feature__ic--2{ background:linear-gradient(135deg,#F6A07F,var(--coral)); }
.feature__ic--3{ background:linear-gradient(135deg,#5FD3C4,var(--teal)); }
.feature h3{ font-size:1.05rem; font-weight:700; color:var(--blue-900); }
.feature p{ font-size:.94rem; color:var(--ink-2); }

/* 部位快速入口 */
.parts{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.part{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.4rem; padding:1.1rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); text-align:left; transition:transform .2s var(--ease), box-shadow .25s, border-color .2s; }
.part:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--blue-100); }
.part:active{ transform:translateY(0) scale(.98); }
.part__ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--blue-100); color:var(--blue-700); }
.part__name{ font-weight:700; color:var(--blue-900); font-size:1.06rem; }
.part__count{ font-size:.82rem; color:var(--ink-3); }
.part::after{ content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,var(--blue-100),transparent 70%); opacity:.6; }

/* ============ 評估流程 ============ */
.assess{ }
.progress{ height:8px; border-radius:var(--r-pill); background:var(--cream-2); overflow:hidden; margin-bottom:1.4rem; }
.progress__bar{ height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--coral),var(--blue)); width:0; transition:width .5s var(--ease-out); }
.step__kicker{ font-size:.85rem; font-weight:700; color:var(--blue-700); letter-spacing:.04em; }
.step__q{ font-size:1.4rem; font-weight:900; color:var(--blue-900); line-height:1.35; margin:.3rem 0 .4rem; text-wrap:balance; }
.step__hint{ color:var(--ink-2); font-size:.96rem; margin-bottom:1.3rem; }
.choices{ display:grid; gap:.75rem; }
.choice{ display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; padding:1.05rem 1.15rem; border-radius:var(--r-lg); background:var(--surface); border:2px solid var(--line); box-shadow:var(--sh-1); font-size:1.08rem; font-weight:500; transition:transform .14s, border-color .2s, background .2s, box-shadow .2s; }
.choice:hover{ border-color:var(--blue-400); background:var(--blue-100); }
.choice:active{ transform:scale(.985); }
.choice.is-on{ border-color:var(--blue); background:var(--blue-100); box-shadow:var(--sh-blue); }
.choice__box{ flex:0 0 auto; width:28px; height:28px; border-radius:9px; border:2px solid var(--blue-400); display:grid; place-items:center; color:#fff; transition:background .2s, border-color .2s; }
.choice.is-on .choice__box{ background:var(--blue); border-color:var(--blue); }
.choice__box svg{ opacity:0; transition:opacity .2s; }
.choice.is-on .choice__box svg{ opacity:1; }
.choice__main{ flex:1; }
.choice__main b{ display:block; color:var(--blue-900); font-weight:700; }
.choice__main span{ font-size:.86rem; color:var(--ink-2); }
.choice__emoji{ font-size:1.5rem; }

/* VAS 疼痛滑桿 */
.vas{ text-align:center; }
.vas__face{ font-size:3.4rem; line-height:1; margin:.4rem 0; transition:transform .3s var(--ease); }
.vas__num{ font-size:2.6rem; font-weight:900; color:var(--blue-900); }
.vas__label{ font-weight:700; margin-bottom:1.2rem; }
.vas__slider{ -webkit-appearance:none; appearance:none; width:100%; height:16px; border-radius:var(--r-pill); background:linear-gradient(90deg,#7FC8A3,#E6C24A 45%,#E89A4F 70%,#D2483F); outline:none; }
.vas__slider::-webkit-slider-thumb{ -webkit-appearance:none; width:38px; height:38px; border-radius:50%; background:#fff; border:4px solid var(--blue); box-shadow:var(--sh-2); cursor:pointer; transition:transform .15s; }
.vas__slider::-webkit-slider-thumb:active{ transform:scale(1.12); }
.vas__slider::-moz-range-thumb{ width:34px; height:34px; border-radius:50%; background:#fff; border:4px solid var(--blue); box-shadow:var(--sh-2); cursor:pointer; }
.vas__scale{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-3); margin-top:.5rem; }

.step__nav{ display:flex; gap:.7rem; margin-top:1.6rem; }
.step__nav .btn{ flex:1; }

/* 紅旗警示 / 就醫頁 */
.alert{ border-radius:var(--r-lg); padding:1.3rem; background:var(--danger-bg); border:1.5px solid var(--danger-line); }
.alert__head{ display:flex; align-items:center; gap:.6rem; color:var(--danger); font-weight:900; font-size:1.2rem; margin-bottom:.5rem; }
.alert__head svg{ flex:0 0 auto; }
.alert ul{ display:grid; gap:.5rem; margin-top:.7rem; }
.alert li{ display:flex; gap:.55rem; align-items:flex-start; color:var(--ink); }
.alert li::before{ content:"•"; color:var(--danger); font-weight:900; }

.result{ text-align:center; padding:1.6rem 1.2rem; }
.result__badge{ display:inline-flex; flex-direction:column; align-items:center; gap:.2rem; padding:1.4rem 2rem; border-radius:var(--r-xl); margin-bottom:1rem; animation:popIn .5s var(--ease-out) both; }
.result__badge b{ font-size:1.8rem; font-weight:900; }
.result__badge span{ font-size:.9rem; opacity:.85; }
@keyframes popIn{ from{ transform:scale(.8); opacity:0;} to{ transform:scale(1); opacity:1;} }

/* ============ 疾病總覽 ============ */
.search{ position:relative; margin-bottom:1rem; }
.search input{ width:100%; height:54px; border-radius:var(--r-pill); border:2px solid var(--line); background:var(--surface); padding:0 1.1rem 0 3rem; font-size:1.05rem; color:var(--ink); box-shadow:var(--sh-1); }
.search input:focus{ border-color:var(--blue-400); outline:none; }
.search__ic{ position:absolute; left:1.05rem; top:50%; transform:translateY(-50%); color:var(--ink-3); }

.chips{ display:flex; gap:.55rem; overflow-x:auto; padding:.2rem .1rem .6rem; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; padding:.55rem 1.1rem; border-radius:var(--r-pill); background:var(--surface); border:1.5px solid var(--line); color:var(--ink-2); font-weight:700; font-size:.94rem; white-space:nowrap; transition:all .2s; scroll-snap-align:start; }
.chip.is-on{ background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:var(--sh-blue); }

.filterbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--blue-100); border:1px solid var(--blue-100); border-radius:var(--r); padding:.7rem 1rem; margin-bottom:1rem; }
.filterbar b{ color:var(--blue-900); }
.filterbar .x{ margin-left:auto; color:var(--blue-700); font-weight:700; text-decoration:underline; }

.dlist{ display:grid; gap:.8rem; }
/* 部位內的細部位置分組（大框框＋標題） */
.subgroup{ position:relative; margin-bottom:1.1rem; padding:.55rem .85rem 1rem; border:1.5px solid var(--blue-100); border-radius:var(--r-xl, 22px); background:linear-gradient(180deg, var(--blue-100) 0%, rgba(220,238,242,.18) 26%, var(--surface) 26%); box-shadow:var(--sh-1); }
.subgroup__label{ display:flex; align-items:center; gap:.5rem; margin:.15rem .1rem .85rem; font-size:1.12rem; font-weight:900; color:var(--blue-900); }
.subgroup__label::before{ content:''; width:7px; height:1.05em; border-radius:4px; background:var(--blue); }
.subgroup__count{ margin-left:auto; min-width:1.7em; height:1.7em; padding:0 .5em; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill); background:var(--blue); color:#fff; font-size:.82rem; font-weight:800; }
.dcard{ position:relative; display:flex; flex-direction:column; gap:.55rem; padding:1.05rem 1.15rem; text-align:left; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); transition:transform .18s var(--ease), box-shadow .25s, border-color .2s; }
.dcard:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--blue-100); }
.dcard:active{ transform:translateY(0) scale(.99); }
.dcard__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.dcard__name{ font-size:1.22rem; font-weight:900; color:var(--blue-900); line-height:1.3; }
.dcard__arrow{ flex:0 0 auto; color:var(--blue-400); transition:transform .2s; }
.dcard:hover .dcard__arrow{ transform:translateX(4px); }
.dcard__desc{ font-size:.95rem; color:var(--ink-2); }
.dcard__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{ font-size:.8rem; padding:.25rem .7rem; border-radius:var(--r-pill); background:var(--cream-2); color:var(--ink-2); font-weight:500; }

/* ============ 疾病詳情 ============ */
.detail__back{ display:inline-flex; align-items:center; gap:.5rem; color:var(--blue-700); font-weight:800; font-size:1.12rem; min-height:48px; padding:.55rem 1.15rem .55rem .85rem; margin-bottom:.8rem; border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--sh-1); transition:transform .12s, background .2s, border-color .2s; }
.detail__back svg{ width:24px; height:24px; }
.detail__back:hover{ color:var(--blue); border-color:var(--blue-100); }
.detail__back:active{ transform:scale(.98); }
.detail__title{ font-size:clamp(1.5rem,6vw,2rem); font-weight:900; color:var(--blue-900); line-height:1.25; }
.detail__en{ color:var(--ink-3); font-size:.9rem; font-weight:500; }
.detail__desc{ margin-top:.6rem; color:var(--ink-2); }

.symbox{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.symbox .tag{ background:var(--blue-100); color:var(--blue-700); font-weight:700; }

/* 紅旗 accordion */
.acc{ margin-top:1rem; border-radius:var(--r); border:1.5px solid var(--danger-line); background:var(--danger-bg); overflow:hidden; }
.acc__btn{ width:100%; display:flex; align-items:center; gap:.6rem; padding:.95rem 1.1rem; font-weight:700; color:var(--danger); font-size:1.02rem; text-align:left; }
.acc__btn .chev{ margin-left:auto; transition:transform .3s var(--ease); }
.acc.is-open .acc__btn .chev{ transform:rotate(180deg); }
.acc__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.acc.is-open .acc__body{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__inner ul{ display:grid; gap:.5rem; padding:0 1.1rem 1.1rem; }
.acc__inner li{ display:flex; gap:.55rem; align-items:flex-start; }
.acc__inner li::before{ content:"⚠"; color:var(--danger); }

/* 分期 tabs */
.phasetabs{ position:sticky; top:var(--appbar-h); z-index:20; display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding:.4rem; margin:1.4rem 0 1.1rem; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--sh-1); }
.ptab{ position:relative; padding:.7rem .3rem; border-radius:var(--r-pill); font-weight:700; font-size:1rem; color:var(--ink-2); display:flex; flex-direction:column; align-items:center; gap:.1rem; transition:color .25s; z-index:1; }
.ptab small{ font-size:.66rem; font-weight:500; opacity:.8; }
.ptab.is-on{ color:#fff; }
.ptab__rec{ position:absolute; top:-7px; right:6px; font-size:.6rem; background:var(--blue-700); color:#fff; padding:.05rem .4rem; border-radius:var(--r-pill); font-weight:700; box-shadow:var(--sh-1); }
.phasetabs__ink{ position:absolute; top:.4rem; bottom:.4rem; border-radius:var(--r-pill); background:linear-gradient(135deg,var(--blue-400),var(--blue-700)); box-shadow:var(--sh-blue); transition:left .35s var(--ease), background .3s; z-index:0; }
.phasetabs[data-phase="acute"] .phasetabs__ink{ background:linear-gradient(135deg,#E08469,var(--acute)); }
.phasetabs[data-phase="subacute"] .phasetabs__ink{ background:linear-gradient(135deg,#E6B254,var(--subacute)); }
.phasetabs[data-phase="chronic"] .phasetabs__ink{ background:linear-gradient(135deg,#56A687,var(--chronic)); }

/* 分期摘要 */
.phasehead{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; padding:1rem 1.15rem; border-radius:var(--r); margin-bottom:1rem; }
.phasehead--acute{ background:var(--acute-bg); border:1px solid var(--acute-line); }
.phasehead--subacute{ background:var(--subacute-bg); border:1px solid var(--subacute-line); }
.phasehead--chronic{ background:var(--chronic-bg); border:1px solid var(--chronic-line); }
.phasehead__item{ display:flex; flex-direction:column; }
.phasehead__item span{ font-size:.74rem; color:var(--ink-3); font-weight:700; }
.phasehead__item b{ color:var(--ink); font-weight:700; }
.phasehead__caution{ flex-basis:100%; display:flex; gap:.5rem; align-items:flex-start; color:var(--ink-2); font-size:.92rem; padding-top:.5rem; border-top:1px dashed var(--line); }

/* 運動卡 */
.exlist{ display:grid; gap:1.1rem; }
.excard{ overflow:hidden; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); }
.excard__fig{ position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#F3EFE5,#E7EFF6); display:grid; place-items:center; overflow:hidden; }
.excard__fig img{ width:100%; height:100%; object-fit:contain; }
.excard__no{ position:absolute; top:.7rem; left:.7rem; width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-weight:900; display:grid; place-items:center; box-shadow:var(--sh-2); }
.excard__body{ padding:1.05rem 1.15rem 1.2rem; }
.excard__name{ font-size:1.2rem; font-weight:900; color:var(--blue-900); }
.excard__purpose{ display:flex; gap:.45rem; align-items:flex-start; margin:.5rem 0 .9rem; color:var(--blue-700); background:var(--blue-100); padding:.55rem .8rem; border-radius:var(--r-sm); font-size:.92rem; }
.steps{ counter-reset:s; display:grid; gap:.6rem; }
.steps li{ counter-increment:s; display:flex; gap:.7rem; align-items:flex-start; }
.steps li::before{ content:counter(s); flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--cream-2); color:var(--blue-700); font-weight:900; display:grid; place-items:center; font-size:.92rem; }
.dosage{ display:flex; gap:.5rem; align-items:center; margin-top:.9rem; padding:.6rem .85rem; border-radius:var(--r-sm); background:var(--chronic-bg); color:var(--chronic); font-weight:700; font-size:.95rem; }
.precaution{ display:flex; gap:.5rem; align-items:flex-start; margin-top:.6rem; font-size:.9rem; color:#B0201A; }
.excard__actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--line); }
.exbtn{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .9rem; border-radius:var(--r-pill); font-weight:700; font-size:.9rem; border:1.5px solid var(--line); background:var(--surface-2); color:var(--blue-700); transition:all .18s; }
.exbtn:hover{ border-color:var(--blue-400); background:var(--blue-100); }
.exbtn:active{ transform:scale(.95); }
.exbtn.is-on{ background:var(--green); border-color:var(--green); color:#fff; }
.exbtn--done{ background:var(--blue-900); border-color:var(--blue-900); color:#fff; }
/* 今日復健懸浮快捷鈕 */
.todayfab{ position:fixed; right:14px; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); z-index:55; display:flex; flex-direction:column; align-items:flex-end; gap:.7rem; }
.todayfab[hidden]{ display:none; }
.todayfab__btn{ position:relative; width:60px; height:60px; border-radius:50%; background:var(--blue); color:#fff; border:none; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,72,90,.35); transition:transform .15s, background .2s; }
.todayfab__btn:active{ transform:scale(.93); }
.todayfab.is-open .todayfab__btn{ background:var(--blue-900); }
.todayfab__count{ position:absolute; top:-5px; right:-5px; min-width:24px; height:24px; padding:0 6px; border-radius:var(--r-pill); background:var(--amber); color:#3a2a00; font-size:.82rem; font-weight:900; font-style:normal; display:grid; place-items:center; border:2px solid #fff; }
.todayfab__panel{ width:min(80vw,320px); max-height:56vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 12px 32px rgba(0,72,90,.24); padding:.6rem; -webkit-overflow-scrolling:touch; }
.todayfab__panel[hidden]{ display:none; }
.todayfab__title{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; font-weight:900; color:var(--blue-900); padding:.3rem .45rem .55rem; border-bottom:1px solid var(--line-2); margin-bottom:.45rem; }
.todayfab__hint{ font-size:.76rem; font-weight:500; color:var(--ink-3); }
.todayfab__item{ width:100%; text-align:left; display:flex; flex-direction:column; gap:.15rem; padding:.65rem .7rem; margin-bottom:.4rem; border-radius:var(--r-sm); background:var(--cream); border:1px solid var(--line-2); transition:background .15s, transform .1s; }
.todayfab__item:last-child{ margin-bottom:0; }
.todayfab__item:active{ transform:scale(.99); background:var(--blue-100); }
.todayfab__itemname{ font-weight:700; color:var(--ink); font-size:1.02rem; line-height:1.3; }
.todayfab__itemsub{ font-size:.8rem; color:var(--ink-2); }
.excard--target{ animation:exTargetGlow 2.4s ease; }
@keyframes exTargetGlow{ 0%,100%{ box-shadow:var(--sh-1); } 12%,55%{ box-shadow:0 0 0 3px var(--blue), 0 10px 26px rgba(0,145,172,.4); } }
.excard--done{ opacity:.72; }
.toast{ position:fixed; left:50%; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 116px); transform:translate(-50%,12px); background:var(--blue-900); color:#fff; padding:.7rem 1.25rem; border-radius:var(--r-pill); font-weight:700; font-size:.95rem; box-shadow:0 6px 18px rgba(0,0,0,.28); opacity:0; transition:opacity .25s, transform .25s; z-index:80; pointer-events:none; max-width:86vw; text-align:center; }
.toast.is-show{ opacity:1; transform:translate(-50%,0); }
/* 繼續上次的復健 */
.resume{ width:100%; display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; margin-bottom:1.1rem; border-radius:var(--r-lg); border:none; text-align:left; color:#fff; background:linear-gradient(135deg,var(--blue-700),var(--blue)); box-shadow:var(--sh-2); transition:transform .15s, box-shadow .2s; }
.resume:active{ transform:scale(.99); }
.resume__ic{ flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.2); }
.resume__txt{ display:flex; flex-direction:column; gap:.12rem; flex:1; min-width:0; }
.resume__label{ font-size:.8rem; opacity:.92; font-weight:600; }
.resume__name{ font-size:1.12rem; font-weight:900; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.resume__go{ flex:0 0 auto; opacity:.85; }
/* 疼痛紅綠燈 / 進階時機（details 卡） */
.painlight, .advance{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1); margin:0 0 1.1rem; overflow:hidden; }
.advance{ margin:1.2rem 0 .4rem; }
.painlight__sum, .advance__sum{ list-style:none; cursor:pointer; padding:.9rem 1rem; font-weight:800; color:var(--blue-900); display:flex; align-items:center; gap:.45rem; font-size:1.02rem; }
.painlight__sum::-webkit-details-marker, .advance__sum::-webkit-details-marker{ display:none; }
.painlight__sum::after, .advance__sum::after{ content:'▾'; margin-left:auto; transition:transform .2s; color:var(--ink-3); }
details[open] > .painlight__sum::after, details[open] > .advance__sum::after{ transform:rotate(180deg); }
.painlight__body, .advance__body{ padding:0 1rem 1rem; }
.painlight__lead{ color:var(--ink-2); margin-bottom:.6rem; }
.pl{ display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .7rem; border-radius:var(--r-sm); margin-bottom:.5rem; }
.pl:last-child{ margin-bottom:0; }
.pl b{ display:block; color:var(--ink); margin-bottom:.1rem; }
.pl span{ color:var(--ink-2); font-size:.92rem; }
.pl__dot{ flex:0 0 auto; width:16px; height:16px; border-radius:50%; margin-top:3px; }
.pl--g{ background:rgba(63,160,122,.10); } .pl--g .pl__dot{ background:#3FA07A; }
.pl--y{ background:rgba(230,163,59,.14); } .pl--y .pl__dot{ background:#E6A33B; }
.pl--r{ background:rgba(210,72,63,.10); } .pl--r .pl__dot{ background:#D2483F; }
.advance__body ul{ margin:.2rem 0 .6rem 1.2rem; } .advance__body li{ margin-bottom:.3rem; color:var(--ink); }
.advance__body p{ color:var(--ink-2); font-size:.92rem; }
.advance--final{ display:flex; gap:.6rem; align-items:flex-start; border:1px solid var(--blue-100); border-radius:var(--r-lg); background:var(--blue-100); padding:.9rem 1rem; margin:1.2rem 0 .4rem; color:var(--blue-900); }
.advance--final b{ display:block; margin-bottom:.1rem; } .advance--final span{ color:var(--ink-2); font-size:.92rem; font-weight:500; }
/* 次數計數器 */
.counter__ref{ display:flex; gap:.4rem; align-items:flex-start; justify-content:center; color:var(--ink-2); font-size:.9rem; margin:.3rem 0 .5rem; text-align:left; }
.counter__num{ font-size:4.6rem; font-weight:900; color:var(--blue-900); line-height:1; text-align:center; margin:.3rem 0; transition:transform .12s; }
.counter__set{ text-align:center; color:var(--ink-2); margin-bottom:.9rem; } .counter__set b{ color:var(--blue-700); font-size:1.25rem; }
.counter__plus{ width:100%; padding:1.15rem; border:none; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--blue-700),var(--blue)); color:#fff; font-size:1.9rem; font-weight:900; box-shadow:var(--sh-2); transition:transform .1s; margin-bottom:.7rem; }
.counter__plus:active{ transform:scale(.97); }
/* 常見問題 FAQ */
.faqentry{ width:100%; display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-1); text-align:left; transition:transform .15s, border-color .2s; }
.faqentry:active{ transform:scale(.99); }
.faqentry span{ flex:1; color:var(--ink-2); font-size:.9rem; display:flex; flex-direction:column; }
.faqentry b{ color:var(--blue-900); font-size:1.08rem; }
.faqentry__go{ flex:0 0 auto; color:var(--blue-400); }
.faqlist{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.faq{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-1); overflow:hidden; }
.faq__q{ list-style:none; cursor:pointer; padding:1rem 1.1rem; font-weight:800; color:var(--blue-900); font-size:1.06rem; display:flex; align-items:center; gap:.5rem; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{ content:'＋'; margin-left:auto; color:var(--blue-400); font-weight:900; font-size:1.2rem; }
.faq[open] .faq__q::after{ content:'－'; }
.faq__a{ padding:0 1.1rem 1.1rem; color:var(--ink-2); line-height:1.75; }
.exbtn--speak.is-speaking{ background:var(--coral); border-color:var(--coral); color:#fff; }

/* 計時器彈窗 */
.timer{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1.5rem; background:rgba(34,50,63,.55); backdrop-filter:blur(4px); animation:fade .25s; }
.timer__card{ width:100%; max-width:340px; text-align:center; padding:1.8rem 1.5rem; border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--sh-3); animation:popIn .35s var(--ease-out); }
.timer__name{ font-weight:700; color:var(--blue-900); margin-bottom:1rem; }
.timer__ring{ width:200px; height:200px; margin:0 auto; }
.timer__ring circle{ fill:none; stroke-width:14; stroke-linecap:round; }
.timer__track{ stroke:var(--cream-2); }
.timer__prog{ stroke:var(--blue); transition:stroke-dashoffset 1s linear; }
.timer__count{ font-size:2.8rem; font-weight:900; fill:var(--blue-900); }
.timer__actions{ display:flex; gap:.6rem; margin-top:1.4rem; }

/* ============ 今日復健 ============ */
.streak{ display:flex; align-items:center; gap:1rem; padding:1.2rem 1.3rem; border-radius:var(--r-lg); color:var(--yellow-ink); background:linear-gradient(135deg,#FFE680,var(--yellow) 55%,var(--yellow-d)); box-shadow:var(--sh-2); margin-bottom:1.3rem; }
.streak__fire{ font-size:2.6rem; }
.streak b{ font-size:1.7rem; font-weight:900; }
.checkitem{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); margin-bottom:.7rem; transition:opacity .3s; }
.checkitem.done{ opacity:.55; }
.checkitem.done .checkitem__name{ text-decoration:line-through; }
.checkitem__box{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:2px solid var(--blue-400); display:grid; place-items:center; color:#fff; transition:background .2s; }
.checkitem.done .checkitem__box{ background:var(--green); border-color:var(--green); }
.checkitem__main{ flex:1; text-align:left; }
.checkitem__name{ font-weight:700; color:var(--blue-900); }
.checkitem__sub{ font-size:.82rem; color:var(--ink-3); }
.checkitem__del{ color:var(--ink-2); padding:.4rem; min-width:44px; min-height:44px; display:grid; place-items:center; }
.checkitem__del:hover{ color:var(--danger); }

/* ============ 空狀態 ============ */
.empty{ text-align:center; padding:3rem 1.5rem; color:var(--ink-2); }
.empty__ic{ font-size:3.4rem; margin-bottom:.6rem; opacity:.7; }

/* ============ 免責 / 聯絡 ============ */
.disclaimer{ margin-top:2rem; padding:1.1rem 1.2rem; border-radius:var(--r); background:var(--surface-2); border:1px dashed var(--line); font-size:.86rem; color:var(--ink-2); display:flex; gap:.6rem; align-items:flex-start; }
.contact{ margin-top:1rem; padding:1.3rem; border-radius:var(--r-lg); background:var(--blue-900); color:#fff; }
.contact h3{ font-weight:900; margin-bottom:.7rem; }
.contact a{ color:#fff; display:flex; align-items:center; gap:.6rem; padding:.55rem 0; font-weight:500; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.14); }
.contact a:last-child{ border-bottom:none; }
.contact svg{ flex:0 0 auto; opacity:.85; }

/* 參考文獻 */
.refs{ margin-top:1.6rem; }
.refs ol{ counter-reset:r; display:grid; gap:.7rem; }
.refs li{ counter-increment:r; font-size:.82rem; color:var(--ink-2); padding-left:1.8rem; position:relative; line-height:1.6; }
.refs li::before{ content:counter(r); position:absolute; left:0; top:0; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--blue-100); color:var(--blue-700); font-weight:700; display:grid; place-items:center; font-size:.72rem; }
.refs a{ color:var(--blue); word-break:break-all; }
.refs__support{ color:var(--ink-3); font-style:italic; }

/* 疾病頁底部返回區 */
.detail__bottomnav{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.8rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.detail__bottomnav [data-act="totop"]{ color:var(--ink-3); }
@media (min-width:560px){
  .detail__bottomnav{ flex-direction:row; flex-wrap:wrap; }
  .detail__bottomnav .btn--lg{ flex:1; }
  .detail__bottomnav [data-act="totop"]{ flex-basis:100%; }
}

/* ============ 底部 tabbar ============ */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
.tabbar__item{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; color:var(--ink-3); font-size:.72rem; font-weight:700; transition:color .2s; }
.tabbar__item.is-on{ color:var(--blue); }
.tabbar__item.is-on svg{ transform:translateY(-2px); }
.tabbar__item svg{ transition:transform .25s var(--ease); }
.tabbar__badge{ position:absolute; top:8px; right:calc(50% - 24px); min-width:18px; height:18px; padding:0 4px; border-radius:var(--r-pill); background:#B0201A; color:#fff; font-size:.66rem; font-style:normal; font-weight:700; display:grid; place-items:center; }

/* ============ 動畫 ============ */
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.view > *{ animation:riseIn .5s var(--ease-out) both; }
.stagger > *{ animation:riseIn .5s var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:.03s;} .stagger > *:nth-child(2){animation-delay:.08s;}
.stagger > *:nth-child(3){animation-delay:.13s;} .stagger > *:nth-child(4){animation-delay:.18s;}
.stagger > *:nth-child(5){animation-delay:.23s;} .stagger > *:nth-child(6){animation-delay:.28s;}
.stagger > *:nth-child(7){animation-delay:.33s;} .stagger > *:nth-child(8){animation-delay:.38s;}
.stagger > *:nth-child(n+9){animation-delay:.42s;}

/* 動作線（圖片佔位 SVG 的箭頭描繪動畫）*/
.motion-arrow{ stroke-dasharray:120; stroke-dashoffset:120; animation:draw 1.4s var(--ease-out) .3s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* View Transitions */
::view-transition-old(root){ animation:vtOut .28s var(--ease) both; }
::view-transition-new(root){ animation:vtIn .34s var(--ease-out) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-6px);} }
@keyframes vtIn{ from{ opacity:0; transform:translateY(10px);} }

/* ============ 桌面 / 大螢幕 ============ */
@media (min-width:680px){
  .features{ grid-template-columns:1fr 1fr; }
  .feature:first-child{ grid-column:1 / -1; }
  .parts{ grid-template-columns:repeat(4,1fr); }
  .hero__cta{ flex-direction:row; }
  .hero__cta .btn{ flex:1; }
}
@media (min-width:920px){
  :root{ --maxw:900px; }
  .tabbar{ display:none; }
  body{ padding-bottom:0; }
  .phasetabs{ top:calc(var(--appbar-h) + 6px); }
}

/* 桌面顯示側邊導覽列取代底部 tabbar 時，給 appbar 多一些工具 */
@media (min-width:920px){
  .appbar__desknav{ display:flex; gap:.3rem; }
}
.appbar__desknav{ display:none; }
.appbar__desknav button{ padding:.5rem .9rem; border-radius:var(--r-pill); font-weight:700; color:var(--ink-2); }
.appbar__desknav button.is-on{ color:var(--blue); background:var(--blue-100); }

/* ============ 列印 ============ */
@media print{
  .appbar,.tabbar,.excard__actions,.hero__cta,.acc__btn .chev,.step__nav,
  .todayfab,.toast,.detail__back,.detail__bottomnav,.fontctl,.iconbtn{ display:none !important; }
  body{ padding:0; background:#fff; }
  .excard,.card,.dcard{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .view{ max-width:100%; }
  .acc__body{ grid-template-rows:1fr !important; }
  details{ break-inside:avoid; }
  details > summary{ list-style:none; }
  details > *:not(summary){ display:block !important; }   /* 列印時展開 FAQ/紅綠燈/進階卡 */
}

/* ============ 減少動態 ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}