/* web/style.css */
:root{ --main:#EF5561; --dark:#D83F4B; --light:#fef3f4; --gold:#bd883a; --ink:#20242b; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; font-family:"PingFang TC","Noto Sans TC",sans-serif; color:var(--ink); }
#map{ position:absolute; inset:56px 0 0 0; background:#eee; }
#bar{ position:fixed; top:0; left:0; right:0; z-index:1100; height:56px; display:flex; align-items:center;
      gap:12px; padding:0 14px; color:#fff; background:linear-gradient(90deg,var(--dark),var(--main));
      border-bottom:2px solid var(--gold); }
#bar h1{ font-size:16px; margin:0; font-weight:800; }
#bar h1 small{ display:block; font-size:11px; font-weight:500; opacity:.85; }
#bar .grow{ flex:1; }
#bar .lvl{ display:flex; background:rgba(255,255,255,.18); border-radius:9px; padding:3px; }
#bar .lvl button{ border:0; background:transparent; color:#fff; font-size:14px; font-weight:700;
      padding:6px 14px; border-radius:7px; cursor:pointer; }
#bar .lvl button.on{ background:#fff; color:var(--dark); }
#panel{ position:fixed; top:68px; left:12px; z-index:1000; width:272px; background:rgba(255,255,255,.97);
      border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.18); max-height:calc(100vh - 84px); overflow-y:auto; }
#panel .sec{ padding:11px 13px; border-bottom:1px solid #eee; }
#panel input{ width:100%; border:1px solid #cfd2d8; border-radius:8px; padding:8px 10px; font-size:15px;
      outline:none; margin-bottom:6px; }
#panel input:focus{ border-color:var(--main); }
.dropdown{ max-height:180px; overflow-y:auto; }
.dropdown div{ padding:7px 9px; font-size:14px; border-radius:6px; cursor:pointer; }
.dropdown div:hover, .dropdown div.hl{ background:var(--light); }
.row{ display:flex; gap:8px; align-items:center; font-size:14px; }
.muted{ color:#7a8190; font-size:12px; line-height:1.6; }
#legend{ font-size:13px; line-height:1.9; }
#legend i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
#cta{ position:fixed; right:14px; bottom:18px; z-index:1100; background:var(--main); color:#fff;
      text-decoration:none; font-weight:800; font-size:14px; padding:12px 18px; border-radius:999px;
      box-shadow:0 6px 18px rgba(216,63,75,.45); }
#cta:hover{ background:var(--dark); }
#panelToggle{ display:none; }
.result-card h3{ margin:2px 0 6px; font-size:15px; }
.result-card .school{ background:var(--light); border-left:3px solid var(--main); padding:7px 9px;
      border-radius:6px; margin:5px 0; font-size:14px; }
.result-card .free{ border-left-color:var(--gold); }
.result-card .note{ font-size:12px; color:#7a8190; }
.school-pop{ font-size:13px; line-height:1.7; }
.village-label, .school-label{ background:none; border:0; box-shadow:none;
      font-size:11px; font-weight:700; color:#333; text-shadow:0 0 3px #fff,0 0 3px #fff; }
@media (max-width:640px){
  #panel{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:55vh; border-radius:14px 14px 0 0;
        transform:translateY(calc(100% - 0px)); transition:transform .2s; }
  #panel.open{ transform:none; }
  #panelToggle{ display:block; position:fixed; left:14px; bottom:18px; z-index:1100; border:0;
        background:#fff; color:var(--dark); font-weight:800; font-size:14px; padding:12px 16px;
        border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer; }
}