:root {
  --cream: #f9f5ee; --paper: #f3ede3; --ink: #2a1f14; --ink-light: #5c4a3a;
  --ember: #c0582e; --ember-glow: #e8764a; --charcoal: #3d3028;
  --ash: #a89888; --smoke: #d4cabb; --skewer: #8b6e4e;
  --lvA: #2e7d5b; --lvB: #7a6a2e; --lvC: #b06a1e; --lvX: #a33c2a;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Zen Kaku Gothic New','Noto Serif TC',serif;
  background:var(--cream); color:var(--ink); line-height:1.9; font-size:17px;
}
nav {
  position:sticky; top:0; z-index:100;
  background:rgba(249,245,238,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--smoke);
  padding:0.6rem 1.5rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:0.86rem;
}
nav .brand { font-family:'Noto Serif TC',serif; font-weight:900; font-size:1rem; color:var(--ember); text-decoration:none; }
nav .links { display:flex; gap:1.1rem; flex-wrap:wrap; }
nav .links a { color:var(--ink-light); text-decoration:none; }
nav .links a:hover, nav .links a.on { color:var(--ember); }
main { max-width:860px; margin:0 auto; padding:3rem 1.5rem 6rem; }
h1 { font-family:'Noto Serif TC',serif; font-size:2.3rem; font-weight:900; line-height:1.3; margin-bottom:0.8rem; }
h1 span { color:var(--ember); }
.lede { font-size:1.05rem; color:var(--ink-light); margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--smoke); }
h2 { font-family:'Noto Serif TC',serif; font-size:1.6rem; font-weight:900; margin:3.5rem 0 1.2rem; position:relative; display:inline-block; }
h2::after { content:''; position:absolute; bottom:-5px; left:0; width:2.5rem; height:3px; background:var(--ember); }
h3 { font-family:'Noto Serif TC',serif; font-size:1.15rem; font-weight:700; color:var(--ember); margin:2.2rem 0 0.6rem; }
h4 { font-family:'Noto Serif TC',serif; font-size:1rem; font-weight:700; margin:1.6rem 0 0.4rem; }
p { margin-bottom:1.1rem; }
a { color:var(--ember); }
a:hover { color:var(--ember-glow); }
ul,ol { margin:0 0 1.1rem 1.4rem; }
li { margin-bottom:0.4rem; }
blockquote {
  background:var(--paper); border-left:3px solid var(--skewer);
  padding:1rem 1.3rem; margin:1.4rem 0; font-size:0.97rem;
}
blockquote p:last-child { margin-bottom:0; }
.pull { border-left:3px solid var(--ember); background:transparent; font-family:'Noto Serif TC',serif; font-size:1.08rem; font-weight:700; padding:0.4rem 0 0.4rem 1.2rem; margin:1.8rem 0; }
table { width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:0.88rem; }
th,td { border:1px solid var(--smoke); padding:0.5rem 0.65rem; text-align:left; vertical-align:top; }
th { background:var(--paper); font-weight:700; font-family:'Noto Serif TC',serif; }
tbody tr:nth-child(even) { background:rgba(243,237,227,0.45); }
.tw { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.4rem 0; }
.tw table { margin:0; min-width:520px; }
.lv { display:inline-block; font-size:0.72rem; font-weight:700; padding:0.05rem 0.4rem; border-radius:3px; color:#fff; vertical-align:middle; letter-spacing:0.03em; }
.lvA{background:var(--lvA)} .lvB{background:var(--lvB)} .lvC{background:var(--lvC)} .lvX{background:var(--lvX)}
.mk { font-weight:700; color:var(--ember); }
.box { background:var(--paper); padding:1.3rem 1.5rem; margin:1.8rem 0; border-top:3px solid var(--skewer); }
.box.warn { border-top-color:var(--lvX); }
.box .bt { font-family:'Noto Serif TC',serif; font-weight:900; font-size:1rem; margin-bottom:0.5rem; }
.box p:last-child, .box ul:last-child { margin-bottom:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin:1.8rem 0; }
.card { background:var(--paper); padding:1.2rem 1.3rem; border-left:3px solid var(--skewer); text-decoration:none; color:inherit; display:block; transition:border-color .2s; }
.card:hover { border-color:var(--ember); }
.card .ct { font-family:'Noto Serif TC',serif; font-weight:700; font-size:1.02rem; margin-bottom:0.3rem; color:var(--ink); }
.card .cd { font-size:0.86rem; color:var(--ink-light); line-height:1.7; }
.meta { font-size:0.82rem; color:var(--ash); margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--smoke); }
.legend { display:flex; gap:0.8rem; flex-wrap:wrap; font-size:0.8rem; color:var(--ink-light); margin:1rem 0 2rem; }
.legend span { white-space:nowrap; }
.toc { background:var(--paper); padding:1.2rem 1.5rem; margin:2rem 0; border-left:3px solid var(--ember); }
.toc ol { margin:0 0 0 1.2rem; }
.toc li { margin-bottom:0.3rem; font-size:0.92rem; }
.pager { display:flex; justify-content:space-between; gap:1rem; margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--smoke); font-size:0.9rem; }
.era { font-family:'Noto Serif TC',serif; color:var(--ash); font-size:0.85rem; letter-spacing:0.15em; margin-bottom:0.2rem; }
@media (max-width:640px){
  body{font-size:16px} main{padding:2rem 1rem 4rem} h1{font-size:1.75rem}
  h2{font-size:1.35rem} nav{padding:0.5rem 1rem} .legend{font-size:0.75rem}
}
@media print { nav,.pager{display:none} body{background:#fff} }

/* 窄螢幕：導覽列橫向捲動，不換行 */
@media (max-width:640px){
  nav { flex-wrap:nowrap; align-items:baseline; }
  nav .brand { flex:0 0 auto; font-size:0.9rem; }
  nav .links { flex:1 1 auto; flex-wrap:nowrap; overflow-x:auto; gap:0.9rem;
               -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  nav .links::-webkit-scrollbar { display:none; }
  nav .links a { white-space:nowrap; }
  blockquote { padding:0.8rem 1rem; }
  .box { padding:1rem 1.1rem; }
}