*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#FAF6ED; --card:#FFFFFF; --border:#E5DCC8;
  --ink:#2C2C2A; --muted:#6E6D65;
  --gold:#EF9F27; --gold-deep:#9C5210;
}
html{-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans TC",Inter,system-ui,sans-serif;font-weight:400;background:var(--bg);color:var(--ink);
  line-height:1.7;font-size:18px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:500;line-height:1.35}
h2{font-size:24px;margin:40px 0 18px}
h3{font-size:18px}

/* ===== nav ===== */
.site-nav{position:sticky;top:0;z-index:20;background:rgba(250,246,237,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:24px;padding:14px 24px}
.brand{display:flex;align-items:center}
.brand-mark{height:36px;width:auto;display:block}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:16px;font-weight:500;color:var(--ink)}
.nav-links a:hover{color:var(--gold-deep)}
main{max-width:1080px;margin:0 auto;padding:40px 24px 64px}

/* ===== page kicker (定位語, R-31/3節) ===== */
.page-kicker{color:var(--muted);font-size:16px;margin:14px 0 6px}

/* ===== hero ===== */
.hero{padding:36px 0 8px}
.hero-logo{width:min(180px,50vw);height:auto;display:block;margin-bottom:18px}
.slogan{color:var(--gold-deep);font-weight:500;font-size:14px;letter-spacing:.04em;margin-bottom:4px}
.hero h1{font-size:clamp(26px,4.2vw,34px);font-weight:500;margin-bottom:14px}
.hero .sub{color:var(--ink);font-size:18px;max-width:640px;margin-bottom:8px}

/* ===== question cards (hero下三大卡) ===== */
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0}
.qcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:28px 24px;display:block}
.qcard .q{font-size:19px;font-weight:500;margin-bottom:10px}
.qcard .a{color:var(--gold-deep);font-size:15px;font-weight:500}
@media(max-width:760px){.qcards{grid-template-columns:1fr}}

/* ===== badges ===== */
.verified-badge{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--gold-deep);
  border:1px solid var(--border);background:var(--card);border-radius:999px;padding:6px 16px;margin-bottom:20px}
.verified-badge.stale{color:#A85A1E;border-color:#E8C9A0}
.free-badge{display:inline-block;background:#FDEFD8;color:var(--gold-deep);padding:4px 12px;border-radius:999px;font-size:14px;font-weight:500}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:16px;padding:12px 28px;
  border-radius:999px;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}

/* ===== tables ===== */
.spec-table{width:100%;border-collapse:collapse;margin:20px 0 32px;font-size:16px}
.spec-table th,.spec-table td{padding:16px;border-bottom:1px solid var(--border);text-align:left;line-height:1.6}
.spec-table th{color:var(--ink);font-weight:500;width:180px;background:#F3EEE0}
.free-table{width:100%;border-collapse:collapse;font-size:16px;margin:20px 0}
.free-table th,.free-table td{padding:14px 16px;border-bottom:1px solid var(--border);text-align:left}
.free-table th{background:var(--ink);color:var(--bg);font-weight:500}

/* ===== plan cards / pricing ===== */
.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:20px 0 32px}
.plan-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px}
.plan-card .pname{font-weight:500;color:var(--ink);margin-bottom:10px;font-size:16px}
.plan-card .pprice{font-size:24px;font-weight:700;color:var(--ink)}
.plan-card .pprice small{font-size:14px;color:var(--muted);font-weight:400}

/* ===== related / compare ===== */
.related{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.related a{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:10px 18px;font-size:15px;color:var(--ink)}
.related a:hover{border-color:var(--gold)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.compare-col{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px}
@media(max-width:640px){.compare-grid{grid-template-columns:1fr}}

/* ===== disclosure / ads ===== */
.affiliate-disclosure{margin-top:28px;padding:16px 18px;border:1px dashed var(--border);border-radius:12px;
  color:var(--muted);font-size:14px;line-height:1.8}
.ad-slot{min-height:90px;display:flex;align-items:center;justify-content:center;margin:24px 0}
.ad-slot-direct{border:1px solid var(--border);border-radius:12px;overflow:hidden;width:100%;position:relative}
.ad-slot-sponsored-label{position:absolute;top:8px;left:8px;font-size:14px;color:#854F0B;background:#FAEEDA;padding:2px 8px;border-radius:6px}
@media(max-width:640px){.ad-slot{min-height:100px}}

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--border);padding:44px 0 32px;background:var(--card);text-align:center}
.footer-hooks{margin-bottom:18px}
.hook-link{border:1px solid var(--border);border-radius:999px;padding:10px 22px;font-size:15px;color:var(--ink)}
.fnav{display:flex;gap:22px;justify-content:center;color:var(--muted);font-size:15px;margin-bottom:18px}
.fnav a:hover{color:var(--gold-deep)}
.disc{color:var(--muted);font-size:14px;max-width:640px;margin:0 auto}

/* ===== SITE-001-MASCOT: only transform/opacity, whitelisted ===== */
.m-layer{position:fixed;inset:0;pointer-events:none;z-index:30}
.m-cat{position:fixed;width:64px;pointer-events:auto;cursor:pointer;transform-origin:50% 95%}
.m-cat .m-body{width:100%;height:auto;display:block;image-rendering:auto}
.m-close{position:fixed;bottom:8px;right:8px;pointer-events:auto;background:rgba(44,44,42,.5);color:#fff;
  border:none;border-radius:50%;width:20px;height:20px;font-size:13px;line-height:1;cursor:pointer;z-index:31;opacity:.5}
.m-close:hover{opacity:1}
.m-bubble{position:absolute;top:-14px;right:4px;font-size:14px;opacity:1;animation:m-bubble-pop .9s ease-out forwards}
@keyframes m-bubble-pop{0%{opacity:0;transform:translateY(4px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px) scale(.9)}}
.m-walk .m-body{animation:m-walk-bob .5s ease-in-out infinite}
@keyframes m-walk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.m-pause .m-body{animation:m-pause-sway 1.8s ease-in-out infinite}
@keyframes m-pause-sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2deg)}}
.m-sit .m-body{animation:m-sit-blink 3.2s ease-in-out infinite}
@keyframes m-sit-blink{0%,92%,100%{opacity:1}96%{opacity:.85}}
.m-groom .m-body{animation:m-groom-dip 1s ease-in-out 2}
@keyframes m-groom-dip{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-6deg) translateY(2px)}}
.m-roll .m-body{animation:m-roll-spin 1.3s linear 1}
@keyframes m-roll-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.m-stretch .m-body{animation:m-stretch-seq 1.5s ease-in-out 1}
@keyframes m-stretch-seq{0%,100%{transform:scale(1,1)}40%{transform:scale(1.18,.82)}70%{transform:scale(.92,1.06)}}
.m-chase .m-body{animation:m-chase-spin 1.4s ease-in-out 1}
@keyframes m-chase-spin{0%{transform:rotate(0deg)}100%{transform:rotate(540deg)}}
.m-hop .m-body{animation:m-hop-bounce .85s ease-in-out 1}
@keyframes m-hop-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px)}70%{transform:translateY(0)}}
.m-sleep .m-body{animation:m-breathe 2.4s ease-in-out infinite;transform:rotate(4deg)}
@keyframes m-breathe{0%,100%{transform:rotate(4deg) scale(1,1)}50%{transform:rotate(4deg) scale(1.03,1.05)}}
.m-static-wrap{position:fixed;bottom:0;left:24px;width:64px;pointer-events:none;z-index:30}
.m-static-wrap img{width:100%;height:auto;display:block}
@media(max-width:767px){.m-cat{width:48px}}