/* ============================================================
   oralsurgery.vet 衛教頁樣式 — 沿用首頁的 token（暖米白、恩亞紅、圓角）
   ============================================================ */
:root{
  --ground:#FBF8F2; --surface:#FFFFFF; --surface-2:#F4EFE4;
  --line:#E6DFCF; --line-strong:#C8C0A0;
  --ink:#231815; --muted:#7A6F63; --text:#3A2E28;
  --red:#E60012; --red-deep:#A8111A; --red-soft:#FDECEC;
  --shadow:0 2px 4px rgba(35,24,21,.04), 0 14px 34px -18px rgba(35,24,21,.22);
  --shadow-lg:0 4px 10px rgba(35,24,21,.05), 0 26px 56px -24px rgba(35,24,21,.26);
  --r:16px; --r-sm:10px; --r-pill:999px;
  --disp:"Nunito","Noto Sans TC",-apple-system,"PingFang TC",sans-serif;
  --sans:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --maxw:1080px; --col:620px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1B1512; --surface:#241D19; --surface-2:#2C231E;
    --line:#3A2F28; --line-strong:#57493D;
    --ink:#F2EBE0; --muted:#A89A8B; --text:#E2D9CC;
    --red:#FF5A5F; --red-deep:#FF8A8E; --red-soft:#3A2220;
    --shadow:0 2px 4px rgba(0,0,0,.35), 0 14px 34px -18px rgba(0,0,0,.7);
    --shadow-lg:0 4px 10px rgba(0,0,0,.4), 0 26px 56px -24px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --ground:#1B1512; --surface:#241D19; --surface-2:#2C231E;
  --line:#3A2F28; --line-strong:#57493D;
  --ink:#F2EBE0; --muted:#A89A8B; --text:#E2D9CC;
  --red:#FF5A5F; --red-deep:#FF8A8E; --red-soft:#3A2220;
  --shadow:0 2px 4px rgba(0,0,0,.35), 0 14px 34px -18px rgba(0,0,0,.7);
  --shadow-lg:0 4px 10px rgba(0,0,0,.4), 0 26px 56px -24px rgba(0,0,0,.75);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.9; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp); font-weight:700; line-height:1.45; letter-spacing:.005em; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.col{max-width:var(--col); margin:0 auto}
.eyebrow{font-family:var(--disp); font-size:13px; letter-spacing:.06em; color:var(--red); font-weight:800}

/* header（與首頁一致） */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--ground) 90%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{max-width:var(--maxw); margin:0 auto; padding:14px 28px; display:flex; align-items:center; gap:26px}
.brand{display:flex; flex-direction:column; gap:5px; line-height:1.3; text-decoration:none}
.brand img{display:block; width:auto; height:30px}
.brand span{font-size:11px; color:var(--muted); letter-spacing:.04em; padding-left:2px}
.nav{margin-left:auto; display:flex; gap:22px; align-items:center}
.nav a{text-decoration:none; font-size:14px; color:var(--muted); padding-bottom:2px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.nav a:hover{color:var(--ink); border-color:var(--red)}
.nav a.on{color:var(--ink); border-color:var(--red)}
.nav .cta{background:var(--red); color:#fff; border-radius:var(--r-pill); padding:9px 20px; white-space:nowrap; font-weight:500; border:0}
:root[data-theme="dark"] .nav .cta{color:var(--ground)}
.nav .cta:hover{color:#fff; opacity:.9}
@media (max-width:900px){ .nav a:not(.cta):not(.nav-edu){display:none} .nav .nav-edu{color:var(--ink); font-weight:500; white-space:nowrap} }
@media (max-width:520px){ .top-in{padding:12px 18px; gap:12px} .wrap{padding:0 18px} .brand img{height:22px} .brand span{display:none} .nav{gap:14px} }

/* 文章開頭 */
.art-head{padding-top:56px; padding-bottom:8px}
.art-head h1{font-size:clamp(26px,4vw,36px); line-height:1.45; margin:14px 0 18px}
.deck{font-size:18px; color:var(--muted); line-height:1.85}
.byline{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:24px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted)}
.byline b{color:var(--ink); font-weight:500}

/* 正文 */
.art-body{padding-top:36px}
.art-body p{color:var(--text); font-size:17px; line-height:1.95; letter-spacing:.03em}
@media (min-width:760px){ .art-body p{font-size:18px} }
.post p + p{margin-top:1.15em}
.post p{white-space:pre-line}
.pull{margin:40px 0; padding:26px 28px; background:var(--red-soft); border-radius:var(--r); font-family:var(--disp); font-weight:700; font-size:clamp(19px,2.4vw,23px); line-height:1.6; color:var(--ink)}
.src{margin-top:28px; font-size:13.5px !important; color:var(--muted) !important}
.src a{color:var(--red); text-decoration:none; border-bottom:1px solid var(--line-strong)}

/* 猜猜看：點了才揭曉 */
.quiz{margin:8px 0 44px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:24px}
.quiz h2{font-size:21px; margin-bottom:4px}
.quiz .hint{font-size:14.5px; color:var(--muted); margin-bottom:18px}
.quiz-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.qa figure{margin:0}
.qa .ph{position:relative; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2)}
.qa img{width:100%; aspect-ratio:960 / 1706; object-fit:cover}
.qa img.ans{position:absolute; inset:0; opacity:0; transition:opacity .45s}
.qa.open img.ans{opacity:1}
.qa button{
  margin-top:12px; width:100%; font:inherit; font-family:var(--disp); font-weight:700; font-size:15px; cursor:pointer;
  background:var(--red); color:#fff; border:0; border-radius:var(--r-pill); padding:11px 16px; transition:opacity .2s;
}
:root[data-theme="dark"] .qa button{color:var(--ground)}
.qa button:hover{opacity:.9}
.qa.open button{background:transparent; color:var(--red); border:1.5px solid var(--line-strong)}
.qa .result{display:none; margin-top:10px; font-family:var(--disp); font-weight:700; font-size:16px; text-align:center}
.qa.open .result{display:block}
.qa .result b{color:var(--red); font-size:22px}
@media (max-width:520px){ .quiz{padding:18px} .quiz-grid{gap:10px} .qa button{font-size:14px; padding:10px 8px} }

/* 文末 */
.foot-box{margin-top:48px; padding:26px; background:var(--surface-2); border-radius:var(--r)}
.foot-box h3{font-size:19px; margin-bottom:8px}
.foot-box p{font-size:15px !important; color:var(--muted) !important; line-height:1.85}
.btn{display:inline-block; margin-top:16px; text-decoration:none; border-radius:var(--r-pill); padding:12px 26px; font-size:15.5px; font-weight:500; background:var(--red); color:#fff; box-shadow:var(--shadow)}
:root[data-theme="dark"] .btn{color:var(--ground)}
.disclaim{margin-top:20px; font-size:13px !important; color:var(--muted) !important; line-height:1.8}

/* 列表頁 */
.hub-head{padding-top:56px}
.hub-head h1{font-size:clamp(30px,4.6vw,44px); margin:12px 0 12px}
.hub-head p{font-size:17px; color:var(--muted); max-width:34em}
.cards{list-style:none; padding:0; margin:34px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:26px}
.cards li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s, box-shadow .2s}
.cards li:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.cards a{display:block; text-decoration:none; color:inherit}
.cards .thumb{aspect-ratio:3 / 2; overflow:hidden; background:var(--surface-2)}
.cards .thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 0%}
.cards .body{padding:16px 20px 20px}
.cards .meta{font-family:var(--disp); font-size:12.5px; font-weight:700; color:var(--red); letter-spacing:.03em}
.cards h2, .cards h3{font-size:18.5px; line-height:1.5; margin:6px 0 6px}
.cards .hook{font-size:14.5px; color:var(--muted); line-height:1.75}

footer{margin-top:72px; padding:40px 0; border-top:1px solid var(--line)}
.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px; color:var(--muted)}
.foot a{text-decoration:none; color:var(--red); border-bottom:1px solid var(--line-strong)}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* 前後對比照：兩張並排，手機上下 */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 40px}
.pair figure{margin:0}
.pair a{display:block; border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--shadow); background:var(--surface-2)}
.pair figcaption{margin-top:8px; font-size:13.5px; color:var(--muted); text-align:center}
@media (max-width:520px){ .pair{gap:10px} }