@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;900&display=swap');
:root{
--paper:#ecefe9;--sheet:#fbfcf9;--ink:#1e2420;--sub:#4f5650;--rule:#cfd4cb;--rule-2:#e2e6de;
--res:#c9962b;--res-ink:#6e510f;--res-wash:#f6e9c6;
--park:#5e8f4e;--park-ink:#355f2b;--park-wash:#e2eed9;
--water:#4c7ba6;--water-ink:#2b557d;--water-wash:#dfe9f3;
--com:#b8443a;--com-ink:#8f2c24;--com-wash:#f6e1dd;
--unk:#8a8f88;--act:#1f4e5f;--act-h:#163a47;
--hatch:repeating-linear-gradient(135deg,#c9ccc5 0 2px,transparent 2px 6px);
--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#b9b2a0 var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 "Noto Sans TC",system-ui,sans-serif;font-variant-numeric:tabular-nums}
::selection{background:var(--res-wash);color:var(--ink)}
a{color:var(--act);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--act-h);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--act);outline-offset:2px;border-radius:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.top{background:var(--ink);color:#ecefe9;position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:56px;flex-wrap:wrap}
.brand{font:900 1.05rem/1 "Noto Serif TC",serif;color:#ecefe9;text-decoration:none;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.brand i{display:inline-grid;grid-template-columns:repeat(3,7px);gap:2px}.brand i b{height:14px}
.brand i b:nth-child(1){background:var(--res)}.brand i b:nth-child(2){background:var(--park)}.brand i b:nth-child(3){background:var(--water)}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav a{color:#d8d4c8;text-decoration:none;padding:16px 12px;font-size:.92rem;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover{color:#fff}.nav a[aria-current]{color:#fff;border-bottom-color:var(--res)}
.head{padding:44px 0 24px;border-bottom:1px solid var(--rule)}
h1{font:900 clamp(1.7rem,4.2vw,2.6rem)/1.25 "Noto Serif TC",serif;margin:0 0 10px;letter-spacing:-.01em;text-wrap:balance}
h2{font:600 1.35rem/1.4 "Noto Serif TC",serif;margin:48px 0 12px;text-wrap:balance}
h3{font-size:1.05rem;margin:28px 0 8px}
.lead{color:var(--sub);max-width:72ch;margin:0}
.note{color:var(--sub);font-size:.88rem;max-width:75ch}
.crumb{font-size:.85rem;color:var(--sub);margin-bottom:10px}.crumb a{color:var(--sub)}
main{padding-bottom:64px}
/* tables */
.tw{overflow-x:auto;background:var(--sheet);border:1px solid var(--rule);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
thead th{font-size:.8rem;font-weight:700;color:var(--sub);background:#e3e7df;border-bottom:1px solid var(--rule);white-space:nowrap}
tbody tr:last-child>*{border-bottom:0}
tbody tr:hover>td{background:#f2f5ee}
td.n,th.n{text-align:right;white-space:nowrap}
.score{font:700 1.15rem/1 "Noto Sans TC";}
.why{color:var(--sub);font-size:.82rem;line-height:1.55}
.name{min-width:7em;display:inline-block;font-weight:700;color:var(--ink);text-decoration:none}.name:hover{color:var(--act);text-decoration:underline}
.go{display:inline-block;padding:4px 12px;border-radius:4px;background:var(--act);color:#fff;text-decoration:none;font-size:.82rem;white-space:nowrap}
.go:hover{background:var(--act-h);color:#fff}
/* status chips */
.st{display:inline-block;font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:3px;white-space:nowrap}
.st.ok{background:var(--park-wash);color:var(--park-ink)}
.st.pt{background:var(--res-wash);color:var(--res-ink)}
.st.no{background:var(--com);color:#fff}
.st.uv{background:#ecebe6 var(--hatch);color:#4a4f4a}
.g{font-size:.75rem;font-weight:700}.g.m{color:var(--res-ink)}.g.n{color:var(--park-ink)}.g.d{color:var(--water-ink)}
tr.red>td{background:var(--com-wash)}
.tag{display:inline-block;font-size:.72rem;padding:0 6px;border:1px solid var(--rule);border-radius:3px;color:var(--sub);margin:2px 4px 0 0}
.tag.warn{border-color:var(--com);color:var(--com-ink)}
/* signature: parcel strip */
.parcel{display:flex;height:14px;width:100%;min-width:150px;max-width:260px;gap:1px;background:var(--rule)}
.parcel.big{height:34px;max-width:none;gap:2px}
.parcel i{display:block;position:relative;background:var(--sheet)}
.parcel i.m{--c:var(--res)}.parcel i.n{--c:var(--park)}.parcel i.d{--c:var(--water)}
.parcel i.ok{background:var(--c)}
.parcel i.pt{background:linear-gradient(to top,var(--c) 50%,var(--sheet) 50%)}
.parcel i.uv{background:var(--sheet) var(--hatch)}
.parcel i.no{background:var(--com-wash);box-shadow:inset 0 0 0 1.5px var(--com)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--sub);margin:10px 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:18px;height:12px;display:inline-block}
.plabels{display:flex;gap:2px;font-size:.72rem;color:var(--sub);margin-top:4px}.plabels span{text-align:center}
/* blocks */
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:18px 20px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border:1px solid var(--rule);border-radius:6px;background:var(--sheet)}
.cols>div{padding:16px 18px;border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.cols h3{margin:0 0 4px;font-size:1rem}.cols p{margin:0;font-size:.92rem;color:var(--sub)}.cols strong{color:var(--ink)}
.num{font:900 .85rem/1 "Noto Serif TC";color:var(--res-ink);margin-right:8px}
.zone{display:flex;align-items:baseline;gap:12px;margin:48px 0 6px;padding-top:14px;border-top:4px solid var(--c,var(--ink))}
.zone h2{margin:0}.zone .pct{font:900 1.6rem/1 "Noto Serif TC";color:var(--ci,var(--ink))}
.zone.m{--c:var(--res);--ci:var(--res-ink)}.zone.n{--c:var(--park);--ci:var(--park-ink)}.zone.d{--c:var(--water);--ci:var(--water-ink)}.zone.w{--c:var(--com);--ci:var(--com-ink)}
.ratio{display:flex;height:10px;margin:18px 0 6px;max-width:520px}.ratio b:nth-child(1){flex:60;background:var(--res)}.ratio b:nth-child(2){flex:30;background:var(--park)}.ratio b:nth-child(3){flex:10;background:var(--water)}
.alert{border:1px solid var(--com);background:var(--com-wash);color:var(--com-ink);padding:10px 14px;border-radius:6px;font-size:.88rem;margin:14px 0}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.filters button{font:inherit;font-size:.85rem;padding:5px 14px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:4px;cursor:pointer}
.filters button:hover{border-color:var(--act)}
.filters button[aria-pressed=true]{background:var(--act);border-color:var(--act);color:#fff}
.sortb{font:inherit;font-weight:700;font-size:.8rem;color:var(--sub);background:none;border:0;padding:0;cursor:pointer}
.sortb:hover{color:var(--act)}
.empty{padding:24px;text-align:center;color:var(--sub)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:.92rem}.kv dt{color:var(--sub)}.kv dd{margin:0}
.hero{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;align-items:end;margin-top:18px}
.total{font:900 clamp(2.6rem,7vw,4rem)/1 "Noto Serif TC";letter-spacing:-.02em}.total small{font:500 1rem "Noto Sans TC";color:var(--sub)}
.split{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem}.split b{font-weight:700}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:28px 0 0;font-size:.9rem}
ul.plain{margin:6px 0 0;padding-left:1.2em}ul.plain li{margin:3px 0}
.pros{color:var(--park-ink)}.cons{color:var(--com-ink)}
footer{border-top:1px solid var(--rule);padding:22px 0 40px;color:var(--sub);font-size:.82rem}
@media (max-width:760px){
 body{font-size:15px}.wrap{padding:0 14px}.head{padding:28px 0 18px}
 .top .wrap{gap:0;padding:0}.brand{padding:12px 14px 0}.nav{width:100%;margin:0;padding:0 6px}.nav a{padding:10px 10px 12px}
 table.stack thead{display:none}
 table.stack tr{display:block;padding:12px 14px;border-bottom:1px solid var(--rule-2)}
 table.stack td{display:block;border:0;padding:2px 0}
 table.stack td[data-l]::before{content:attr(data-l)"　";color:var(--sub);font-size:.78rem}
 table.stack td.n{text-align:left}
 table.stack td.lead-cell{font-size:1rem}
 .parcel{max-width:none}
 .hero{grid-template-columns:1fr}
 .kv{grid-template-columns:1fr}.kv dt{margin-top:6px}
}
@media (prefers-reduced-motion:no-preference){.parcel.big i{transform-origin:bottom;animation:rise .7s var(--ease) both;animation-delay:calc(var(--k)*35ms)}@keyframes rise{from{transform:scaleY(.15)}}}
/* sources */
.srcs{display:flex;flex-wrap:wrap;gap:4px}
a.src{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 8px;border:1px solid var(--act);border-radius:3px;color:var(--act);text-decoration:none;white-space:nowrap}
a.src:hover{background:var(--act);color:#fff}
a.src.dead{border-color:var(--com);color:var(--com-ink);text-decoration:line-through}
/* detail layout */
.dhead{padding:32px 0 20px;border-bottom:1px solid var(--rule)}
.dtitle h1{margin-bottom:4px}
.figs{display:grid;grid-template-columns:1.1fr 1.4fr 1fr 1.2fr;margin-top:20px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px}
.fig{padding:14px 18px;border-right:1px solid var(--rule-2);display:flex;flex-direction:column;gap:4px;min-width:0}
.fig:last-child{border-right:0}
.fig span{font-size:.78rem;font-weight:700;color:var(--sub)}
.fig b{font:900 2rem/1.1 "Noto Serif TC",serif}.fig b small{font:500 .85rem "Noto Sans TC";color:var(--sub);margin-left:2px}
.fig b.t{font:700 1rem/1.45 "Noto Sans TC"}
.fig.big{background:var(--ink);color:#ecefe9;border-radius:5px 0 0 5px}.fig.big span,.fig.big em,.fig.big small{color:#c9cec5}.fig.big b{font-size:2.8rem}
.fig em{font-style:normal;font-size:.8rem;color:var(--sub);line-height:1.5}
.pband{margin-top:16px}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.dside{position:sticky;top:72px;display:flex;flex-direction:column;gap:14px;margin-top:48px}
.dside h2{margin:0 0 10px;font-size:1.05rem}
.srcbox{border-color:var(--act)}
.srclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.82rem;word-break:break-all}
.srclist .pl{display:block;font-weight:700;font-size:.78rem;color:var(--act)}
.vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.vs>div{padding:16px 18px}.vs h3{margin:0 0 4px}.vs h3+ul+h3{margin-top:14px}
.pro-c{background:var(--park-wash)}.con-c{background:var(--com-wash)}
.dside .kv{grid-template-columns:max-content 1fr;font-size:.86rem}
@media (max-width:980px){.dgrid{grid-template-columns:1fr}.dside{position:static;margin-top:28px}.figs{grid-template-columns:1fr 1fr}.fig.big{border-radius:5px 0 0 0}.fig:nth-child(2){border-right:0}.fig:nth-child(-n+2){border-bottom:1px solid var(--rule-2)}}
@media (max-width:760px){
 .vs{grid-template-columns:1fr}
 .figs{grid-template-columns:1fr 1fr}.fig{padding:12px}.fig b{font-size:1.6rem}.fig.big b{font-size:2.2rem}
 .dside .kv{grid-template-columns:1fr}
 /* candidate cards */
 #ctab,#ctab tbody{display:block;width:100%}#ctab tbody tr>*{min-width:0}#ctab .name{min-width:0}#ctab .parcel{min-width:0}
 .dmain table.stack tbody tr{display:grid;grid-template-columns:1fr auto auto;gap:2px 10px;align-items:center}
 .dmain table.stack td::before{display:none}
 .dmain table.stack td:nth-child(1){grid-column:1;font-weight:700}
 .dmain table.stack td:nth-child(2){display:none}
 .dmain table.stack td:nth-child(3){grid-column:2}
 .dmain table.stack td:nth-child(4){grid-column:3;text-align:right}
 .dmain table.stack td:nth-child(5){grid-column:1/-1}
 #ctab tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"rk nm sc" "pr pr cm" "ty ty d" "pc pc pc" "src src src";gap:6px 12px;padding:14px;align-items:start}
 #ctab tbody tr:nth-child(even){background:#f4f6f1}
 #ctab td::before{display:none}
 #ctab .c-rk{grid-area:rk;font:900 1.1rem/1.2 "Noto Serif TC";color:var(--sub)}
 #ctab .c-nm{grid-area:nm}#ctab .c-nm .name{font-size:1.02rem}
 #ctab .c-sc{grid-area:sc;text-align:right}#ctab .c-sc .score{font:900 1.8rem/1 "Noto Serif TC"}#ctab .c-sc .why{display:none}
 #ctab .c-pr{grid-area:pr;font-weight:700;font-size:.9rem}
 #ctab .c-cm{grid-area:cm;text-align:right;font:700 .95rem "Noto Sans TC";color:var(--act);white-space:nowrap}
 #ctab .c-ty{grid-area:ty;font-size:.85rem}#ctab .c-d{grid-area:d;text-align:right;font-size:.85rem}
 #ctab .c-pc{grid-area:pc}#ctab .srccell{grid-area:src;padding-top:4px;border-top:1px dashed var(--rule)}
}
