/* ═══════════════════════════════════════════════════════════════
   好好生活物理治療所 — 衛教文章共用樣式
   ═══════════════════════════════════════════════════════════════

   ⚠️ 為什麼有這支檔案，而不是沿用 public-official/pages.css：
   好好生活這區（/haohao/）刻意不吃 pages.css —— 那是母站美好生活的樣式，
   兩邊的視覺語言不同（見 docs/架構-好好生活官網.md §0）。衛教文若直接
   套 pages.css 會變成母站的樣子；若每篇各寫一份 inline style，三篇很快
   就會漂移。所以獨立一支 article.css，三篇共用。

   token 複製自 haohao/index.html 的 inline <style>。
   頁首導覽已抽到 nav.css（首頁與衛教文共用），不必再兩邊同步 ——
   2026-08 頁首雙 logo 爆版就是那種不同步造成的。頁尾目前仍是各自一份。

   ⚠️ 同時掛 .wrap 的元素不要用 padding shorthand（例如 padding:16px 0），
      那會把左右 gutter 蓋成 0，手機版整段貼齊螢幕邊。只設上下內距。
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy:#16305C; --navy-deep:#0F2344; --navy-pale:#C9D4EA;

  /* 金黃系：#E39B12 只做填色／線條／裝飾，淺底上的金色文字一律用 --gold-text */
  --gold:#E39B12;
  --gold-text:#B0770E;
  --gold-tint:#F3E3C2;
  --gold-hair:rgba(227,155,18,.42);
  --gold-wash:rgba(227,155,18,.10);
  --shadow-navy:rgba(22,48,92,.10);
  --head-bg:rgba(253,251,247,.86);

  --cream:#FDFBF7; --cream-2:#F7F1E6;
  --border:#E4DCCB; --border-strong:#C9BCA0;
  --ink:#16305C; --ink-soft:#655F53;
  --white:#FFFFFF;

  /* 警示色：只用在「請先就醫」這類紅旗段落，不當裝飾色 */
  --alert:#8C3A2B; --alert-bg:#FBF2EF;

  --maxw:1120px;
  --maxw-read:680px;
  --gutter:clamp(22px,5.2vw,56px);

  --fs-h1:clamp(26px,4.4vw,40px);
  --fs-h2:clamp(21px,2.8vw,28px);
  --fs-h3:clamp(17px,1.9vw,20px);
  --fs-body:clamp(15.5px,1.15vw,17px);
  --fs-small:clamp(13px,1vw,14.5px);

  --serif:"Noto Serif TC","Songti TC","PingFang TC",Georgia,serif;
  --sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.95;
  letter-spacing:.02em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--navy); outline-offset:3px; border-radius:2px;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* 頁首導覽的樣式已抽到 nav.css（首頁與衛教文共用同一份，避免兩邊漂移）。 */

/* ───────── 麵包屑 ───────── */
.crumb{padding-top:22px;font-size:12.5px;color:var(--ink-soft);letter-spacing:.04em}
.crumb a{text-decoration:none;border-bottom:1px solid var(--gold-hair)}
.crumb a:hover{border-bottom-color:var(--gold)}
.crumb span[aria-current]{color:var(--ink)}

/* ───────── 文章標頭 ───────── */
.art-head{max-width:var(--maxw-read);margin:0 auto;padding-top:clamp(26px,4vw,44px)}
.art-kicker{
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700;
}
.art-head h1{
  font-family:var(--serif); font-size:var(--fs-h1); font-weight:700;
  line-height:1.42; margin-top:14px; text-wrap:balance; letter-spacing:.01em;
}
.art-lead{
  margin-top:18px; font-size:clamp(16px,1.3vw,18px); color:var(--ink-soft); line-height:2.05;
}
.art-meta{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em;
}

/* ───────── 章節導覽（手機上尤其重要：官網手機捲動中位只有 61%） ───────── */
.toc{
  max-width:var(--maxw-read); margin:clamp(28px,4vw,40px) auto 0;
  background:var(--white); border:1px solid var(--border); border-radius:3px;
  padding:20px 22px;
}
.toc-k{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.toc ol{margin-top:12px;padding-left:20px}
.toc li{font-size:14.5px;line-height:1.9;color:var(--ink-soft)}
.toc a{text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{color:var(--navy);border-bottom-color:var(--gold)}

/* ───────── 正文 ───────── */
.prose{max-width:var(--maxw-read);margin:0 auto;padding-bottom:clamp(40px,6vw,72px)}
.prose section{margin-top:clamp(40px,5.5vw,64px);scroll-margin-top:90px}
.prose h2{
  font-family:var(--serif); font-size:var(--fs-h2); font-weight:700;
  line-height:1.5; text-wrap:balance;
}
.prose h2::after{
  content:""; display:block; width:38px; height:2px;
  background:var(--gold); margin-top:14px;
}
.prose h3{
  font-size:var(--fs-h3); font-weight:700; margin-top:32px;
  line-height:1.65; color:var(--navy);
}
.prose p{margin-top:16px}
.prose ul,.prose ol{margin-top:16px;padding-left:22px}
.prose li{margin-top:8px;line-height:1.95}
.prose li strong{color:var(--navy)}
.prose a{color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--gold-hair)}
.prose a:hover{border-bottom-color:var(--gold)}
.prose strong{font-weight:700}

/* 術語小註：白話文裡第一次出現專有名詞時用它補一句解釋 */
.term{color:var(--ink-soft);font-size:.92em}

/* ───────── 重點框 ───────── */
.keybox{
  margin-top:26px; background:var(--cream-2); border-radius:3px;
  padding:20px 22px; border-left:3px solid var(--gold);
}
.keybox p{margin-top:0}
.keybox p + p{margin-top:12px}

/* ───────── 紅旗警訊：請先就醫 ───────── */
.redflag{
  margin-top:26px; background:var(--alert-bg); border:1px solid rgba(140,58,43,.22);
  border-left:4px solid var(--alert); border-radius:3px; padding:20px 22px;
}
.redflag-k{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--alert); font-weight:700;
}
.redflag p{margin-top:12px}
.redflag ul{margin-top:12px;padding-left:20px}
.redflag li{margin-top:7px}

/* ───────── 自我檢測 ───────── */
.selfcheck{
  margin-top:26px; background:var(--white); border:1px solid var(--border);
  border-radius:3px; padding:22px 24px; box-shadow:0 1px 3px var(--shadow-navy);
}
.selfcheck-k{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700;
}
.selfcheck h3{margin-top:10px;font-family:var(--serif);font-size:19px}
.selfcheck ol{margin-top:14px;padding-left:22px}
.selfcheck li{margin-top:10px}
.selfcheck .note{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
  font-size:var(--fs-small); color:var(--ink-soft); line-height:1.85;
}

/* ───────── 照片位（拍好之後把整個 figure 換成 <img>） ───────── */
.photo-slot{
  margin-top:28px; background:var(--cream-2);
  border:1px dashed var(--border-strong); border-radius:3px;
  min-height:clamp(150px,22vw,230px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:26px 22px; text-align:center;
}
.photo-slot .ps-k{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text);
}
.photo-slot .ps-d{font-size:var(--fs-small);color:var(--ink-soft);line-height:1.8;max-width:44ch}
figure.photo{margin-top:28px}
figure.photo img{border-radius:3px;width:100%}
figure.photo figcaption{
  margin-top:10px; font-size:var(--fs-small); color:var(--ink-soft); line-height:1.8;
}

/* ───────── 影片嵌入（原廠設備介紹） ─────────
   16:9 響應式。用 youtube-nocookie 網域，訪客沒點播放前不會被種追蹤 cookie。 */
.video-embed{margin-top:28px}
.video-embed .frame{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius:3px; background:var(--cream-2); border:1px solid var(--border);
}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-embed figcaption{
  margin-top:12px; font-size:var(--fs-small); color:var(--ink-soft); line-height:1.85;
}

/* ───────── 規格條列 ───────── */
.spec{
  margin-top:26px; background:var(--white); border:1px solid var(--border);
  border-radius:3px; padding:22px 24px;
}
.spec-k{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-text); font-weight:700;
}
.spec dl{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.spec dt{font-weight:700;color:var(--navy);font-size:14.5px;line-height:1.7}
.spec dd{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.7}
@media (max-width:560px){
  .spec dl{grid-template-columns:1fr;gap:2px 0}
  .spec dd{margin-bottom:12px}
}

/* ───────── FAQ ───────── */
.faq{margin-top:18px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-weight:700; color:var(--navy); line-height:1.7;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"＋"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--gold-text); font-weight:400;
}
.faq details[open] summary::after{content:"－"}
.faq .ans{padding:0 0 20px;color:var(--ink-soft)}
.faq .ans p + p{margin-top:12px}

/* ───────── CTA ───────── */
.cta-band{
  margin-top:clamp(44px,6vw,72px); background:var(--navy-deep); color:var(--white);
  border-radius:3px; padding:clamp(30px,4.5vw,48px) clamp(24px,4vw,44px); text-align:center;
}
.cta-band h2{
  font-family:var(--serif); font-size:clamp(20px,2.6vw,26px); font-weight:600;
  color:var(--white); line-height:1.6; text-wrap:balance;
}
.cta-band h2::after{display:none}
.cta-band p{margin-top:14px;color:var(--navy-pale);font-size:var(--fs-small);line-height:1.95}
.btn-line{
  display:inline-block; margin-top:26px; text-decoration:none;
  background:var(--gold); color:var(--navy-deep);
  font-size:15.5px; font-weight:700; letter-spacing:.1em;
  padding:16px 42px; border-radius:2px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.btn-line:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)}

/* ───────── 轉介母站（治療之後的訓練） ───────── */
.crossref{
  margin-top:34px; background:var(--white); border:1px solid var(--border);
  border-radius:3px; padding:22px 24px;
}
.crossref-k{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.crossref h3{margin-top:8px;font-family:var(--serif);font-size:19px;color:var(--navy)}
.crossref p{margin-top:10px;color:var(--ink-soft);font-size:var(--fs-small);line-height:1.95}
.crossref a{
  display:inline-block; margin-top:14px; text-decoration:none; font-weight:700;
  font-size:14.5px; color:var(--gold-text);
  border-bottom:1px solid var(--gold-hair); padding-bottom:2px;
}
.crossref a:hover{border-bottom-color:var(--gold)}

/* ───────── 作者 ───────── */
.author{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--border);
  display:flex; gap:20px; align-items:flex-start;
}
.author img{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-k{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.author-name{margin-top:6px;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy)}
.author p{margin-top:8px;font-size:var(--fs-small);color:var(--ink-soft);line-height:1.9}
@media (max-width:520px){ .author{flex-direction:column;gap:14px} }

/* ───────── 延伸閱讀 ───────── */
.more{margin-top:34px}
.more-k{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.more ul{margin-top:14px;padding-left:0;list-style:none}
.more li{margin-top:0;border-bottom:1px solid var(--border)}
.more a{
  display:block; padding:15px 0; text-decoration:none; font-weight:700;
  color:var(--navy); line-height:1.65;
}
.more a:hover{color:var(--gold-text)}
.more .m-d{display:block;font-weight:400;font-size:var(--fs-small);color:var(--ink-soft);margin-top:5px}

/* ───────── 免責 ───────── */
.disclaimer{
  margin-top:34px; padding:18px 20px; background:var(--cream-2); border-radius:3px;
  font-size:12.5px; color:var(--ink-soft); line-height:1.9;
}

/* ───────── 頁尾（與 index.html 同步） ───────── */
.site-foot{background:var(--cream-2);padding:clamp(52px,6vw,84px) 0 40px;margin-top:clamp(50px,7vw,90px)}
.foot-grid{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,4vw,60px); align-items:start;
}
@media (max-width:768px){ .foot-grid{grid-template-columns:1fr} }
.foot-mark{line-height:0}
.foot-mark img{width:clamp(96px,10vw,120px)}
.foot-name{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy);letter-spacing:.04em}
.foot-en{margin-top:6px;font-size:11.5px;letter-spacing:.28em;color:var(--ink-soft);text-transform:uppercase}
.foot-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,3vw,40px); margin-top:8px;
}
.foot-k{font-size:11.5px;letter-spacing:.24em;color:var(--ink-soft);text-transform:uppercase}
.foot-list{margin-top:12px;padding-left:0;list-style:none}
.foot-list li{color:var(--ink-soft);font-size:var(--fs-small);line-height:1.95}
.foot-list li + li{margin-top:7px}
.foot-list a{text-decoration:none;border-bottom:1px solid var(--gold-hair);transition:border-color .25s}
.foot-list a:hover{border-bottom-color:var(--gold)}
.foot-bottom{
  margin-top:clamp(36px,5vw,60px); padding-top:22px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em;
}