:root{--ink:#1c1c1e;--paper:#faf7f2;--card:#fff;--line:#e6e0d6;--red:#c53d2e;
--red-d:#a02f23;--mut:#6f6a63;--r:12px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",serif;
color:var(--ink);background:var(--paper);line-height:1.85;font-size:16px}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:8px}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
header.top{background:var(--ink);position:sticky;top:0;z-index:50}
.topbar{display:flex;align-items:center;gap:18px;padding:13px 20px;max-width:1020px;margin:0 auto;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.1rem;color:#fff;letter-spacing:1px}
.logo span{color:#e8836f}
nav.main{display:flex;gap:2px;flex-wrap:wrap}
nav.main a{color:#d9d4cc;padding:6px 10px;border-radius:8px;font-size:.92rem}
nav.main a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.hero{background:linear-gradient(160deg,#1c1c1e 0%,#33302c 70%,#4a3733 130%);color:#fff;padding:70px 0 60px;
border-bottom:4px solid var(--red)}
.hero h1{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.4;letter-spacing:1px}
.hero p.sub{margin:16px 0 28px;color:#cfc9c0;max-width:620px;font-size:1.04rem}
.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:700;text-decoration:none}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn-p{background:var(--red);color:#fff}
.btn-s{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
section.blk{padding:50px 0}
section.blk.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2.sec{font-size:1.5rem;margin-bottom:8px;border-left:5px solid var(--red);padding-left:12px}
p.sec-sub{color:var(--mut);margin-bottom:26px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{font-size:1.05rem;margin-bottom:6px}
.card p{color:var(--mut);font-size:.93rem}
.pill{display:inline-block;background:#f6e8e5;color:var(--red-d);border-radius:99px;
padding:2px 12px;font-size:.8rem;font-weight:700;margin-bottom:8px}
.pill.gray{background:#efece6;color:var(--mut)}
.breadcrumb{font-size:.85rem;color:var(--mut);padding:14px 0}
.breadcrumb a{color:var(--mut)}
.pagehead{background:var(--ink);color:#fff;padding:42px 0 36px;border-bottom:4px solid var(--red)}
.pagehead h1{font-size:clamp(1.45rem,3.2vw,2rem)}
.pagehead p{color:#cfc9c0;margin-top:10px;max-width:640px}
article.post{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;max-width:780px;margin:0 auto}
article.post h2{margin:28px 0 12px;font-size:1.3rem;border-left:4px solid var(--red);padding-left:10px}
article.post h3{margin:22px 0 10px;font-size:1.12rem}
article.post p{margin:12px 0}
article.post ul,article.post ol{margin:12px 0 12px 24px}
article.post blockquote{border-left:4px solid var(--red);background:#faf3f1;padding:12px 18px;margin:16px 0;border-radius:0 8px 8px 0}
article.post hr{border:none;border-top:1px solid var(--line);margin:24px 0}
.meta{color:var(--mut);font-size:.85rem;margin:8px 0 18px}
.milestone{display:flex;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line)}
.milestone b{color:var(--red);min-width:86px;font-size:1.05rem}
.ctabox{background:linear-gradient(150deg,#33302c,#4a3733);color:#fff;border-radius:var(--r);
padding:28px;margin:32px auto 0;max-width:780px;text-align:center;border-left:5px solid var(--red)}
.ctabox h3{margin-bottom:8px}
.ctabox p{color:#d9d0c7;margin-bottom:16px;font-size:.95rem}
footer{background:var(--ink);color:#a39c92;padding:42px 0;margin-top:54px;font-size:.9rem}
footer a{color:#d9cfc5}
footer .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:24px}
footer h4{color:#fff;margin-bottom:10px;font-size:.96rem}
.searchbox input{width:100%;max-width:440px;padding:11px 15px;border:1px solid var(--line);border-radius:10px;font-size:1rem}
#sres li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line)}
.eplist li{list-style:none;padding:10px 0;border-bottom:1px dashed var(--line)}
.eplist li a{font-weight:700}
.eplist li span{color:var(--mut);font-size:.85rem;margin-left:10px}
@media(max-width:640px){.topbar{padding:10px 14px}nav.main a{padding:5px 7px;font-size:.85rem}}