/* GBA 樓價跌幅小詞小站 mobile-first stylesheet (無外部依賴) */
:root{
  --bg:#151d29; --bg2:#1c2634; --card:#ffffff; --ink:#1e2833; --muted:#5b6875;
  --line:#e3e8ee; --accent:#2e5f8a; --deep:#b3372f; --mild:#c96a2a; --hold:#1e7d4f;
  --chip:#eef2f6; --shadow:0 1px 3px rgba(10,20,35,.18);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"PingFang HK","PingFang SC","Noto Sans CJK TC","Microsoft JhengHei","Heiti TC",sans-serif;
  line-height:1.65;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:960px;margin:0 auto;padding:0 14px}
header.site{background:var(--bg2);border-bottom:3px solid var(--accent);padding:14px 0 12px;margin-bottom:18px}
header.site .brand{color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.02em}
header.site .brand small{display:block;color:#9db2c6;font-weight:400;font-size:.78rem;margin-top:2px}
nav.top{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
nav.top a{color:#cfe0ef;font-size:.85rem;background:rgba(255,255,255,.07);padding:5px 11px;border-radius:16px}
nav.top a:hover{background:rgba(255,255,255,.16);text-decoration:none}
main{padding-bottom:30px}
h1{font-size:1.4rem;line-height:1.35;margin:6px 0 10px;color:#f2f6fa}
h2{font-size:1.12rem;margin:26px 0 10px;color:#e8eef4;border-left:4px solid var(--accent);padding-left:9px}
.lead{color:#c3d2df;font-size:.95rem;margin:0 0 6px}
.card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:16px 16px;margin:14px 0}
.card h2{margin-top:0;color:var(--ink);border-left-color:var(--deep)}
.muted{color:var(--muted);font-size:.85rem}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:560px}
th{background:#f2f5f8;text-align:left;padding:8px 10px;font-weight:600;white-space:nowrap;border-bottom:2px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.drop{font-weight:700;white-space:nowrap}
.drop.deep{color:var(--deep)}
.drop.mild{color:var(--mild)}
.drop.hold{color:var(--hold)}
.drop.flat{color:var(--muted)}
.chip{display:inline-block;background:var(--chip);border-radius:12px;padding:2px 10px;font-size:.78rem;margin:2px 4px 2px 0;color:#3d4a56}
.basis{display:inline-block;border-radius:4px;padding:1px 7px;font-size:.75rem;font-weight:600}
.basis.gua{background:#fdeeea;color:#a03328}
.basis.cheng{background:#e8f3ec;color:#1e6b45}
.basis.wang{background:#e9f0f7;color:#2e5f8a}
.basis.other{background:#f0f1f3;color:#57606a}
.warn{background:#fdf6e7;border:1px solid #e8d9a8;border-left:5px solid #c9a227;border-radius:10px;padding:13px 15px;margin:16px 0}
.warn strong{color:#8a6d1a}
.warn p{margin:6px 0 0;font-size:.88rem;color:#5c5340}
.kv{display:grid;grid-template-columns:6.5em 1fr;gap:6px 12px;margin:0}
.kv dt{color:var(--muted);font-size:.85rem}
.kv dd{margin:0;font-size:.93rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.citycard{display:block;background:#f7fafc;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink)}
.citycard:hover{border-color:var(--accent);text-decoration:none;box-shadow:var(--shadow)}
.citycard .nm{font-weight:700}
.citycard .dp{font-size:1.05rem;font-weight:700;margin-top:3px}
.citycard .ct{font-size:.75rem;color:var(--muted)}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.filterbar input,.filterbar select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.filterbar input{flex:1 1 180px;min-width:0}
.statline{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 2px}
.stat{background:#f2f6fa;border-radius:9px;padding:8px 13px;font-size:.85rem;color:#33414f}
.stat b{font-size:1.05rem;display:block}
.extlink{font-size:.85rem;word-break:break-all}
footer.site{border-top:1px solid #2b3846;color:#8fa0b2;font-size:.8rem;padding:18px 0 26px;margin-top:26px}
footer.site a{color:#a9c0d6}
.crumbs{font-size:.82rem;color:#93a5b6;margin:2px 0 8px}
.crumbs a{color:#b7cade}
.note{background:#f7fafc;border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:10px 13px;font-size:.9rem;margin:10px 0;color:#33414f}
.src-list li{margin:5px 0;word-break:break-all}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{border-bottom:1px solid var(--line);padding:9px 2px}
.checklist li:last-child{border-bottom:none}
.checklist label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.checklist input{margin-top:5px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--accent)}
.checklist strong{display:inline}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.fitem label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px}
.fitem input{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.btn{font:inherit;font-weight:700;color:#fff;background:var(--accent);border:0;border-radius:9px;padding:10px 22px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.deepchip{background:#fbeae8;color:#9c2f27}
.count{font-size:.8rem;color:var(--muted);margin:4px 0 8px}
@media (max-width:520px){
  h1{font-size:1.22rem}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd{margin-bottom:8px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}