/* 翔宇教育 OMO 系列 — 共用樣式（手機優先、簡潔） */
:root{
  --red:#b0121f; --red-dk:#8a0e18; --ink:#1c1d1f; --gray:#5b6066;
  --line:#e6e8eb; --bg:#ffffff; --soft:#f6f7f8; --soft2:#fbeced;
  --radius:12px; --max:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.75; letter-spacing:.01em;
}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 18px}
a{color:var(--red-dk); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.skip{position:absolute; left:-999px; top:0; background:#fff; padding:8px}
.skip:focus{left:8px; z-index:50}

/* header / nav */
header.site{position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:56px}
.logo{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:800}
.logo:hover{text-decoration:none}
.logo .mark{background:var(--red); color:#fff; padding:3px 8px; border-radius:8px; font-weight:900}
.logo .lt{font-size:15px; color:var(--gray); font-weight:700}
.navtoggle{display:inline-flex; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:7px 12px; border-radius:8px; font-size:15px; cursor:pointer}
.nav{display:none; border-top:1px solid var(--line); background:#fff}
.nav.open{display:block}
.nav .wrap{display:flex; flex-direction:column; padding:6px 18px 12px}
.nav a{padding:11px 6px; color:var(--ink); border-bottom:1px solid var(--soft); font-weight:600}
.nav a.on{color:var(--red)}
@media(min-width:820px){
  .navtoggle{display:none}
  .nav{display:block; border-top:none}
  .nav .wrap{flex-direction:row; gap:6px; padding:0 18px; max-width:var(--max)}
  .nav a{border-bottom:none; padding:12px 10px; font-size:15px}
  .nav a.on{border-bottom:3px solid var(--red)}
}

main{padding:8px 0 40px}
.crumb{font-size:13px; color:var(--gray); padding:14px 0 2px}
.crumb a{color:var(--gray)}
.crumb .sep{color:#c3c7cc; margin:0 2px}

h1{font-size:26px; line-height:1.35; margin:.4em 0 .5em; letter-spacing:.005em}
h2{font-size:20px; margin:1.7em 0 .5em; padding-top:.2em}
h3{font-size:17px; margin:.2em 0 .4em}
p{margin:.55em 0}
@media(min-width:820px){ h1{font-size:32px} h2{font-size:23px} }

.hero{margin:.6em 0 1em; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}

/* 直接答案 */
.answer{background:var(--soft2); border:1px solid #f0cdd0; border-left:5px solid var(--red);
  border-radius:var(--radius); padding:14px 16px; margin:1em 0 1.3em}
.answer .tag{display:inline-block; font-size:12px; font-weight:800; color:#fff; background:var(--red);
  padding:2px 9px; border-radius:999px; margin-bottom:6px; letter-spacing:.05em}
.answer p{margin:.2em 0 0; font-size:17.5px; font-weight:500}

.blk{margin:1.4em 0}
ul,ol{margin:.5em 0; padding-left:1.35em}
li{margin:.32em 0}
.note{font-size:14px; color:var(--gray); background:var(--soft); border-radius:8px; padding:9px 12px; margin-top:.7em}

/* 雙欄卡片 */
.cols{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:640px){ .cols{grid-template-columns:1fr 1fr} }
.card{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px}
.card h3{margin-top:0; color:var(--red-dk)}
.card ul{padding-left:1.2em}

/* hub 磚 */
.grid{display:grid; gap:12px; grid-template-columns:1fr; margin:1em 0}
@media(min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
.tile{display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; transition:.15s; color:var(--ink)}
.tile:hover{border-color:var(--red); box-shadow:0 4px 16px rgba(176,18,31,.08); text-decoration:none; transform:translateY(-1px)}
.tile h3{margin:0 0 .3em; color:var(--red-dk)}
.tile p{margin:.2em 0 .6em; color:var(--gray); font-size:15px}
.tile .go{font-size:14px; font-weight:700; color:var(--red)}

/* FAQ */
.faq{border:1px solid var(--line); border-radius:10px; margin:.5em 0; overflow:hidden; background:#fff}
.faq summary{cursor:pointer; padding:13px 16px; font-weight:700; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:16px; top:11px; font-size:20px; color:var(--red); font-weight:700}
.faq[open] summary::after{content:"–"}
.faq .fa{padding:0 16px 14px; color:var(--ink)}
.faq .fa p{margin:.2em 0}

/* related */
.related{margin:1.8em 0 0; border-top:1px solid var(--line); padding-top:1em}
.related ul{list-style:none; padding:0}
.related li{margin:.4em 0}
.related a{font-weight:600}

/* CTA */
.cta{margin:1.6em 0 0; background:linear-gradient(135deg,var(--red),var(--red-dk)); color:#fff;
  border-radius:16px; padding:22px 20px}
.cta h2{margin:0 0 .35em; color:#fff; padding:0}
.cta p{margin:.35em 0; color:#ffe9eb}
.btns{margin-top:1em!important}
.btn{display:inline-block; padding:12px 20px; border-radius:999px; font-weight:800; margin:6px 8px 0 0}
.btn.primary{background:#fff; color:var(--red-dk)}
.btn.ghost{border:2px solid rgba(255,255,255,.7); color:#fff}
.btn:hover{text-decoration:none; opacity:.94}
.cta .btn.primary{background:#fff}

/* footer */
footer.site{background:var(--ink); color:#cfd2d6; margin-top:2.5em; padding:26px 0}
footer.site .wrap{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:640px){ footer.site .wrap{grid-template-columns:1.3fr 1fr} }
footer h2{color:#fff; font-size:16px; margin:.2em 0 .6em; padding:0}
footer a{color:#ffd7db}
.locs{list-style:none; padding:0; margin:0}
.locs li{margin:.45em 0; font-size:14px}
.locs strong{display:block; color:#fff}
.meta{font-size:12.5px; color:#9aa0a6; margin:.35em 0}
footer .note{background:transparent; color:#9aa0a6; padding:0; font-size:12.5px}

/* 比較表（新制對照用） */
table.cmp{width:100%;border-collapse:collapse;margin:.7em 0;font-size:15px}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
table.cmp thead th{background:var(--red);color:#fff;font-weight:700}
table.cmp tbody th{background:var(--soft);font-weight:700;white-space:nowrap}
.badge-new{display:inline-block;background:#fff3cd;color:#8a6100;border:1px solid #f0d98a;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:800;margin-left:6px;vertical-align:middle}
.official{background:#eef4fb;border:1px solid #cfe0f3;border-radius:10px;padding:12px 14px;margin:1em 0;font-size:14px}
.official b{color:#1c4e80}