/* 全國中小學人數查詢：專用樣式。顏色與間距沿用官網 style.css 變數，明暗主題自動跟著換。
   圖表色用 dataviz 指引已驗證的類別色（藍、橘、青、黃、洋紅） */
.sx{--c1:#2a78d6;--c2:#eb6834;--c3:#1baf7a;--c4:#eda100;--c5:#e87ba4;--up:#006300;--down:#b8431a;--grid:#e1e0d9;--ink2:#52514e;--soft:#f3f3f0;--hi:#fff3b0}
:root[data-theme="dark"] .sx{--c1:#3987e5;--c2:#d95926;--c3:#199e70;--c4:#c98500;--c5:#d55181;--up:#0ca30c;--down:#ec835a;--grid:#2c2c2a;--ink2:#c3c2b7;--soft:#222221;--hi:#5a4a00}
.sx button,.sx select,.sx input{font:inherit;color:var(--text)}
.sx button{cursor:pointer}
.sx-num{font-variant-numeric:tabular-nums}

/* 找學校：左篩選、右結果 */
.sx-find{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.sx-filters{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:16px;position:sticky;top:80px}
.sx-field{display:grid;gap:6px}
.sx-field>span,.sx-lbl{font-size:.82rem;color:var(--muted)}
.sx-field select,.sx-input{width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:1rem}
.sx-input{padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23898781' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
.sx-field select:disabled{opacity:.5}
.sx-chips{display:flex;flex-wrap:wrap;gap:6px}
.sx-chips button{border:1px solid var(--line);background:var(--bg);padding:6px 14px;border-radius:999px;font-size:.92rem}
.sx-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .sx-chips button[aria-pressed="true"]{color:#10243d}
.sx-reset{border:0;background:none;color:var(--accent);padding:0;text-align:left;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}

/* 結果清單 */
.sx-sum{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline;margin-bottom:10px}
.sx-sum strong{font-size:1.15rem}
.sx-sum span{color:var(--muted);font-size:.92rem}
.sx-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.sx-item{display:grid;grid-template-columns:1fr auto;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.sx-item:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.sx-open{display:grid;grid-template-columns:minmax(0,1fr) 92px 112px;gap:14px;align-items:center;text-align:left;border:0;background:none;padding:14px 16px}
.sx-name{font-weight:600;font-size:1.02rem;line-height:1.4}
.sx-name mark{background:var(--hi);color:inherit;border-radius:2px}
.sx-meta{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:.85rem;color:var(--muted)}
.sx-tag{font-size:.75rem;border:1px solid var(--line);border-radius:4px;padding:0 6px;color:var(--ink2)}
.sx-big{text-align:right;line-height:1.3}
.sx-big b{display:block;font-size:1.2rem;font-weight:600}
.sx-chg{font-size:.82rem;color:var(--muted)}
.sx-chg.up{color:var(--up)}.sx-chg.down{color:var(--down)}
.sx-cmp{border:0;border-left:1px solid var(--line);background:var(--soft);padding:0 14px;font-size:.82rem;color:var(--ink2);min-width:64px}
.sx-cmp[aria-pressed="true"]{background:var(--accent);color:#fff}
:root[data-theme="dark"] .sx-cmp[aria-pressed="true"]{color:#10243d}
.sx-more{margin:14px auto 0;display:block;border:1px solid var(--line);background:var(--card);padding:10px 28px;border-radius:999px}
.sx-empty{padding:40px 16px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:12px}
.spark{width:92px;height:30px;display:block}
.spark path{fill:none;stroke:var(--c1);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--c1)}

/* 詳情側欄 */
.sx-drawer{position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end}
.sx-drawer[hidden]{display:none}
.sx-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sx-panel{position:relative;width:min(560px,100%);height:100%;overflow-y:auto;background:var(--bg);padding:24px 24px 40px;box-shadow:-8px 0 30px rgba(0,0,0,.25);animation:ssIn .22s ease-out}
@keyframes ssIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sx-panel{animation:none}}
.sx-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:1.2rem;line-height:1}
.sx-panel h2{font-size:1.45rem;font-weight:600;line-height:1.35;margin:0 40px 4px 0}
.sx-where{color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.sx-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.sx-kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.sx-kpi .k{font-size:.8rem;color:var(--muted)}
.sx-kpi .v{font-size:1.55rem;font-weight:600;line-height:1.3}
.sx-kpi .d{font-size:.82rem;color:var(--muted)}
.sx-sec{margin-top:26px}
.sx-sec h3{font-size:1.05rem;font-weight:600;margin:0 0 4px}
.sx-sec .sub{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.sx-seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:3px;margin-bottom:8px}
.sx-seg button{border:0;background:none;padding:5px 14px;border-radius:999px;font-size:.88rem}
.sx-seg button[aria-pressed="true"]{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.15);font-weight:600}
.sx-chart{position:relative}
.sx-chart svg{width:100%;height:auto;display:block;overflow:visible}
.sx-chart text{fill:var(--muted);font-size:11.5px;font-family:inherit}
.sx-chart .gl{stroke:var(--grid);stroke-width:1}
.sx-chart .cross{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.sx-tip{position:absolute;pointer-events:none;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);padding:8px 10px;font-size:.85rem;line-height:1.5;z-index:5;white-space:nowrap}
.sx-tip b{display:block}
.sx-tip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.sx-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;margin-top:6px}
.sx-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}

/* 各年級男女 */
.sx-grades{display:grid;gap:6px}
.sx-g{display:grid;grid-template-columns:3.2em 1fr 1fr;gap:8px;align-items:center;font-size:.88rem}
.sx-g .bm,.sx-g .bf{height:20px;position:relative;background:var(--soft);border-radius:3px}
.sx-g .bm i,.sx-g .bf i{position:absolute;top:0;bottom:0;border-radius:3px}
.sx-g .bm i{right:0;background:var(--c1)}
.sx-g .bf i{left:0;background:var(--c2)}
.sx-g em{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;font-size:.78rem;color:var(--text)}
.sx-g .bm em{left:6px}.sx-g .bf em{right:6px}
.sx-ghead{display:grid;grid-template-columns:3.2em 1fr 1fr;gap:8px;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.sx-ghead span:nth-child(2){text-align:right}
.sx-rank{display:grid;gap:8px}
.sx-rk{display:grid;grid-template-columns:7.5em 1fr 4.6em;gap:8px;align-items:center;font-size:.88rem}
.sx-rk .bar{height:10px;background:var(--soft);border-radius:5px;position:relative}
.sx-rk .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--c1)}
.sx-contact{display:grid;gap:6px;font-size:.95rem;margin-top:8px}
.sx-contact a{word-break:break-all}
.sx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sx-btn{border:1px solid var(--line);background:var(--card);padding:9px 18px;border-radius:8px;font-size:.95rem}
.sx-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .sx-btn.primary{color:#10243d}

/* 比較列 */
.sx-tray{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:250;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:10px 12px;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 24px);flex-wrap:wrap}
.sx-tray[hidden]{display:none}
.sx-pill{display:inline-flex;gap:6px;align-items:center;background:var(--soft);border-radius:999px;padding:4px 6px 4px 12px;font-size:.88rem}
.sx-pill button{border:0;background:none;width:22px;height:22px;border-radius:50%;line-height:1}

/* 區域排行 */
.sx-region{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.3fr);gap:24px;align-items:start}
.sx-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 16px 12px}
.sx-card h2{font-size:1.15rem;font-weight:600;margin:0 0 4px}
.sx-card .sub{font-size:.88rem;color:var(--muted);margin-bottom:10px}
.sx-rows{list-style:none;padding:0;margin:0}
.sx-row{display:grid;grid-template-columns:5.4em 1fr 6.8em;gap:10px;align-items:center;width:100%;padding:7px 8px;border:0;border-radius:8px;background:none;text-align:left;font-size:.94rem}
button.sx-row:hover,.sx-row[aria-current="true"]{background:var(--soft)}
.sx-row .bar{height:14px;background:var(--soft);border-radius:3px;overflow:hidden}
.sx-row[aria-current="true"] .bar,button.sx-row:hover .bar{background:var(--card)}
.sx-row .bar i{display:block;height:100%;background:var(--c1);border-radius:0 3px 3px 0}
.sx-row .n{text-align:right;line-height:1.3}
.sx-row .n small{display:block;font-size:.76rem;color:var(--muted)}

/* 全國概況 */
.sx-controls{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:end;margin-bottom:16px}
.sx-ngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.sx-ncard{margin-top:16px}
.readout{min-height:1.6em;font-size:.92rem;color:var(--text-body);margin-top:6px}
.sx-src{margin-top:32px;font-size:.9rem;color:var(--text-body)}
.sx-src li{margin:4px 0}

@media (max-width:860px){
  .sx-find,.sx-region{grid-template-columns:1fr}
  .sx-filters{position:static}
  .sx-open{grid-template-columns:minmax(0,1fr) 96px}
  .sx-open .spark{display:none}
  .sx-panel{padding:20px 16px 90px}
}
@media (max-width:480px){
  .sx-tabs button{padding:8px 14px}
  .sx-open{grid-template-columns:minmax(0,1fr) auto}
  .sx-row{grid-template-columns:4.6em 1fr 6.2em}
  .sx-rk{grid-template-columns:6.4em 1fr 4.2em}
}
.sx-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.sx-tbl th,.sx-tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.sx-tbl th:first-child,.sx-tbl td:first-child{text-align:left}
.sx-tbl small{color:var(--muted)}
.sx-find{scroll-margin-top:80px}
#app{scroll-margin-top:70px}
@media (max-width:860px){.sx-filters{position:static}}

.sx-cardhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:flex-start;margin-bottom:6px}
.sx-src h2{font-size:1.05rem;font-weight:600;margin-bottom:6px}
.sx-src{border-top:1px solid var(--line);padding-top:20px}
.sx-chart text{font-size:12px}
.sx-sum{position:sticky;top:60px;z-index:20;background:var(--bg);padding:8px 0}
@media (max-width:860px){.sx-sum{position:static}}

.sx-pnote{margin-top:10px;font-size:.95rem}
.sx-link{border:0;background:none;color:var(--accent);padding:0 0 0 10px;font:inherit;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sx-gws{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:16px;background:var(--card)}