
:root{--ink:#242321;--paper:#f5f2ec;--gold:#c8893f;--muted:#77736c;--line:#ddd7cd;--dark:#292826}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif}
a{text-decoration:none;color:inherit}
.article-wrap{max-width:1180px;margin:auto;padding:72px 7vw 110px}
.breadcrumb{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:34px}
.breadcrumb a:hover{color:var(--gold)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:start}
.article-kicker{display:inline-flex;padding:7px 10px;border:1px solid rgba(200,137,63,.35);color:var(--gold);font-size:10px;letter-spacing:.14em;margin-bottom:18px}
.article h1{font-size:clamp(34px,5vw,58px);font-weight:500;line-height:1.28;margin:0 0 24px;letter-spacing:-.02em}
.article-lead{font-size:18px;line-height:1.9;color:#555047;border-left:3px solid var(--gold);padding:3px 0 3px 22px;margin:0 0 42px}
.hero-media{margin:0 0 46px;background:#e9e4da;overflow:hidden}
.hero-media img{display:block;width:100%;max-height:520px;object-fit:cover}
.hero-media figcaption{padding:10px 14px;font-size:10px;color:var(--muted)}
.image-placeholder{display:grid;place-items:center;min-height:280px;border:1px dashed #cfc7ba;background:rgba(255,255,255,.35);color:#9a9289;text-align:center;padding:30px}
.image-placeholder strong{display:block;color:#806b4d;margin-bottom:7px;font-size:13px}
.article-section{padding:34px 0;border-top:1px solid var(--line)}
.article-section h2{font-size:24px;font-weight:500;margin:0 0 18px}
.article-section p{margin:0;color:var(--muted);font-size:15px;line-height:2}
.tip-box{margin-top:30px;padding:24px 26px;background:rgba(200,137,63,.08);border-left:3px solid var(--gold)}
.tip-box strong{display:block;margin-bottom:8px;font-size:13px}
.tip-box p{font-size:13px;line-height:1.9;color:var(--muted);margin:0}
.article-aside{position:sticky;top:100px}
.aside-card{padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.52);margin-bottom:18px}
.aside-card small{display:block;color:var(--gold);letter-spacing:.15em;margin-bottom:10px}
.aside-card h3{margin:0 0 13px;font-size:18px}
.aside-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}
.aside-btn{display:flex;justify-content:space-between;margin-top:16px;padding:11px 0;border-top:1px solid var(--line);font-size:12px;color:var(--gold)}
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:55px;padding-top:25px;border-top:1px solid var(--line)}
.article-nav a{padding:18px;border:1px solid var(--line);background:rgba(255,255,255,.35);font-size:12px;line-height:1.6}
.article-nav a:last-child{text-align:right}
.article-nav a:hover{border-color:var(--gold)}
@media(max-width:850px){.article-grid{grid-template-columns:1fr}.article-aside{position:static}.article-wrap{padding:48px 6vw 80px}}
@media(max-width:600px){.article h1{font-size:34px}.article-lead{font-size:16px}.article-nav{grid-template-columns:1fr}}
