:root{
  --ink:#0E0C0B; --ink-2:#171312;
  --paper:#FAF6F0; --paper-dim:#F0E9DF;
  --red:#A4272C; --red-deep:#7A1C20;
  --gold:#C9A24B; --gold-soft:#E8D5A3; --gold-dim:rgba(201,162,75,.4);
  --muted:#6B6158; --muted-d:#9A9082;
  --rule:rgba(20,17,16,.12); --rule-d:rgba(255,255,255,.10);
  --line-green:#06C755;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  background:var(--paper); color:#241F1C; line-height:1.85; overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:"Noto Serif TC","Microsoft JhengHei",serif;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:820px; margin:0 auto; padding:0 24px;}

header{background:var(--ink); border-bottom:1px solid var(--rule-d); padding:14px 0;}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px;}
header .brand{font-family:"Noto Serif TC",serif; font-weight:900; color:var(--paper); font-size:1.02rem; white-space:nowrap;}
header .brand b{color:var(--red);}
header .back{color:var(--muted-d); font-size:.85rem; white-space:nowrap;}
header .back:hover{color:var(--gold-soft);}

article{padding:44px 0 20px;}
.crumb{font-size:.8rem; color:var(--muted); margin-bottom:14px;}
.crumb a:hover{color:var(--red);}
.tagline{
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.06em;
  color:var(--red); background:var(--paper-dim); padding:4px 11px; border-radius:999px; margin-bottom:14px;
}
h1{font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.35; margin-bottom:14px;}
.lede{font-size:1.02rem; color:var(--muted); margin-bottom:26px;}

.quickbar{
  background:var(--ink); color:var(--paper); border-radius:14px; padding:22px 24px; margin-bottom:34px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.quickbar p{font-size:.92rem; color:#CFC6BA; max-width:420px;}
.quickbar b{color:var(--gold-soft);}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px;
  font-weight:700; font-size:.9rem; white-space:nowrap; transition:transform .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:#D8B15C;}
.btn-line{background:var(--line-green); color:#fff; box-shadow:0 5px 16px rgba(6,199,85,.3);}
.btn-line:hover{background:#05AE4B;}

h2.sec{font-size:1.28rem; margin:38px 0 8px; padding-left:13px; border-left:4px solid var(--gold);}
.sec-note{font-size:.88rem; color:var(--muted); margin-bottom:16px;}

.zone{border:1px solid var(--rule); border-radius:13px; overflow:hidden; margin-bottom:10px;}
.zone-h{
  background:var(--paper-dim); padding:10px 16px; font-size:.82rem; font-weight:700;
  display:flex; align-items:center; gap:9px;
}
.zone-h .dot{width:9px; height:9px; border-radius:2px; flex:0 0 auto;}
.zone-h .dot.b{background:var(--red);}
.zone-h .dot.f{background:var(--gold);}
.zone-h .cnt{margin-left:auto; font-weight:500; color:var(--muted);}
table{width:100%; border-collapse:collapse; font-size:.87rem; background:#fff;}
th,td{padding:9px 16px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
th{font-size:.76rem; letter-spacing:.04em; color:var(--muted); font-weight:700; background:rgba(20,17,16,.02);}
td.vil{font-weight:700; white-space:nowrap; width:118px;}
td.nb{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums;}
td.alt{font-size:.83rem; color:var(--red-deep);}

.callout{
  background:rgba(164,39,44,.05); border:1px solid var(--rule); border-left:3px solid var(--red);
  border-radius:9px; padding:16px 18px; margin:26px 0; font-size:.88rem; line-height:1.8; color:#3B3430;
}
.callout b{color:var(--red-deep);}
.callout ol{margin:8px 0 0 1.2em;}
.callout li{margin-bottom:5px;}

.band{
  background:linear-gradient(125deg, var(--red-deep), var(--red));
  color:#fff; text-align:center; padding:44px 24px; border-radius:16px; margin:40px 0 10px;
}
.band h3{font-size:1.24rem; margin-bottom:10px;}
.band p{color:#F6DEDE; font-size:.93rem; margin-bottom:20px;}
.band .sub{margin-top:14px; font-size:.8rem; color:#F0CCCC;}

.related{margin:34px 0 10px; padding-top:22px; border-top:1px solid var(--rule);}
.related h4{font-size:.82rem; letter-spacing:.08em; color:var(--muted); margin-bottom:12px;}
.related ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px;}
.related li a{
  display:inline-block; font-size:.85rem; padding:6px 13px; border-radius:999px;
  background:#fff; border:1px solid var(--rule); color:var(--ink);
}
.related li a:hover{border-color:var(--red); color:var(--red);}

.disclaimer{font-size:.79rem; color:var(--muted); line-height:1.85; margin:26px 0 0;}

footer{background:var(--ink); color:var(--muted-d); padding:38px 24px 30px; margin-top:44px; font-size:.82rem;}
footer .legal{border-top:1px solid var(--rule-d); padding-top:18px; margin-top:16px; line-height:2; font-size:.76rem; color:#7C736A;}
footer a:hover{color:var(--gold-soft);}

.line-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:flex; align-items:center; gap:9px;
  background:var(--line-green); color:#fff; padding:13px 20px 13px 15px; border-radius:999px;
  font-weight:700; font-size:.92rem; box-shadow:0 8px 22px rgba(6,199,85,.4);
  animation:line-pulse 2.6s ease-in-out infinite;
}
.line-float:hover{animation-play-state:paused;}
.line-float svg{width:22px; height:22px; flex-shrink:0;}
@keyframes line-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.055)}}
@media (max-width:768px){
  .line-float{padding:14px; border-radius:50%; right:16px; bottom:16px;}
  .line-float .txt{display:none;}
  td.vil{width:auto;}
  th,td{padding:8px 11px;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} html{scroll-behavior:auto;} }
