:root{
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
  --ink:#14213d;--muted:#62708a;--paper:#f5f9ff;--card:rgba(255,255,255,.9);--line:#dbe7f5;
  --blue:#2677ff;--cyan:#27c2ff;--purple:#7b61ff;--coral:#ff6f61;--yellow:#ffd45d;--mint:#78dfc7;
  --shadow:0 20px 50px rgba(37,72,120,.16);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
button{font:inherit}
.app-shell{min-height:100vh;padding:18px clamp(12px,2.4vw,28px) 24px;background:radial-gradient(circle at 80% 0%,rgba(39,194,255,.18),transparent 30%),radial-gradient(circle at 10% 5%,rgba(123,97,255,.12),transparent 28%),var(--paper)}
.topbar{max-width:1440px;margin:0 auto 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.eyebrow,.mini-label{margin:0 0 4px;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--blue)}
.title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h1{margin:0;font-size:clamp(24px,4vw,42px);line-height:1.05;letter-spacing:-.04em}
.count-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 11px;background:var(--yellow);font-weight:900;font-size:13px;box-shadow:0 8px 18px rgba(88,68,0,.08)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.chip-button{border:0;border-radius:999px;padding:10px 14px;background:var(--ink);color:#fff;font-weight:900;box-shadow:0 8px 24px rgba(20,33,61,.14);cursor:pointer}.chip-button.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.chip-button.secondary.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.district-note{max-width:1440px;margin:0 auto 12px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}.district-pill{padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px;font-weight:900}.district-pill.awaji{background:#eef0ff;border-color:#dcd8ff}.plus{font-weight:900;color:var(--muted)}.district-note small{color:var(--muted);font-size:11px;margin-left:3px}
.map-stage{position:relative;max-width:1440px;height:min(72vh,760px);min-height:540px;margin:0 auto;border-radius:30px;overflow:hidden;background:#dfeaf5;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.8)}
#map{position:absolute;inset:0}.map-gradient{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(245,249,255,.06) 35%,rgba(14,29,55,.12) 100%)}
.glass-card{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.92);box-shadow:0 12px 35px rgba(34,65,106,.15)}
.origin-card{position:absolute;top:18px;left:18px;border-radius:18px;padding:12px 14px;display:flex;gap:10px;align-items:center;z-index:4}.origin-card strong{display:block;font-size:18px}.origin-card small{display:block;color:var(--muted);margin-top:2px}.origin-dot{width:16px;height:16px;border-radius:50%;background:#fff;border:5px solid var(--coral);box-shadow:0 0 0 6px rgba(255,111,97,.16)}.origin-map-dot{width:22px;height:22px;border-radius:50%;background:var(--coral);border:5px solid #fff;box-shadow:0 0 0 5px rgba(255,111,97,.25),0 10px 18px rgba(30,55,90,.25)}
.legend{position:absolute;top:18px;right:18px;z-index:4;border-radius:18px;padding:10px 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:800}.legend span{display:flex;align-items:center;gap:6px}.legend-line{width:24px;height:5px;border-radius:99px;display:inline-block}.legend-line.subway{background:var(--blue)}.legend-line.route{background:var(--coral)}.legend-line.pending{background:repeating-linear-gradient(90deg,var(--purple) 0 7px,transparent 7px 11px)}.legend-school{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--yellow);font-style:normal;font-size:11px;color:#5a4300}
.route-summary{position:absolute;left:18px;bottom:18px;z-index:5;width:min(440px,calc(100% - 36px));border-radius:24px;padding:16px}.summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.summary-head h2{margin:0;font-size:22px;letter-spacing:-.03em}.summary-kind{margin:4px 0 0;color:var(--muted);font-size:11px;font-weight:700}.total-time{display:flex;align-items:flex-end;gap:3px;background:var(--ink);color:#fff;border-radius:16px;padding:8px 12px;white-space:nowrap}.total-time strong{font-size:30px;line-height:.9}.total-time span{font-size:13px;font-weight:900}.total-time.pending{background:var(--purple)}.total-time.pending strong{font-size:28px}.total-time.pending span{font-size:10px}
.route-steps{display:flex;gap:6px;flex-wrap:wrap;margin:13px 0 8px}.step-pill{display:flex;align-items:center;gap:6px;border-radius:999px;padding:8px 10px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:900}.step-pill i{width:8px;height:8px;border-radius:50%;display:inline-block}.step-pill.rail i{background:var(--blue)}.step-pill.bus i{background:var(--purple)}.step-pill.walk i{background:var(--coral)}.step-pill.pending i{background:var(--purple)}.demo-note{margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.school-strip{max-width:1440px;margin:16px auto 0;padding:18px 0 4px}.strip-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px}.strip-title h2{margin:0;font-size:22px}.strip-title h2 em{font-style:normal;font-size:11px;color:var(--blue);background:#e9f2ff;border-radius:999px;padding:5px 8px;vertical-align:middle;margin-left:5px}.strip-title p{margin:0;color:var(--muted);font-size:13px;max-width:560px;text-align:right}
.school-list{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory}.school-card{min-width:158px;scroll-snap-align:start;border:1px solid var(--line);background:#fff;border-radius:20px;padding:13px;text-align:left;cursor:pointer;box-shadow:0 8px 22px rgba(32,69,111,.08);transition:.18s ease}.school-card:hover,.school-card:focus-visible{transform:translateY(-2px);outline:none;box-shadow:0 12px 28px rgba(32,69,111,.14)}.school-card.active{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,111,97,.12),0 12px 28px rgba(32,69,111,.14)}.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.school-card .school-name{display:block;font-weight:900;font-size:15px;line-height:1.25}.kind-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.kind-dot.kind-general{background:var(--yellow)}.kind-dot.kind-mixed{background:var(--mint)}.kind-dot.kind-specialized{background:var(--purple)}.kind-dot.kind-comprehensive{background:var(--cyan)}.school-card .school-time{display:flex;align-items:flex-end;gap:3px;margin-top:8px;color:var(--coral)}.school-card .school-time strong{font-size:28px;line-height:1}.school-card .school-time span{font-size:12px;font-weight:900}.school-card .school-time.pending{color:var(--purple)}.school-card .school-time.pending span{font-size:10px}.school-card small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.load-error{padding:16px;border:1px solid #ffd0cc;background:#fff4f2;border-radius:18px;color:#8d3028}
.footer-note{max-width:1440px;margin:8px auto 0;color:var(--muted);font-size:11px;line-height:1.6}.footer-note p{margin:3px 0}.footer-note strong{color:var(--ink)}
.school-marker{border:0;background:transparent;cursor:pointer;padding:0;transform-origin:center bottom}.school-pin{position:relative;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 8px 10px rgba(25,46,80,.25));transition:.18s ease}.school-pin:hover{transform:translateY(-4px) scale(1.04)}.school-badge{min-width:34px;height:34px;border-radius:11px;background:var(--yellow);display:grid;place-items:center;font-size:12px;font-weight:900;color:#5d4500;border:2px solid #fff}.school-marker.kind-mixed .school-badge{background:var(--mint);color:#17473e}.school-marker.kind-specialized .school-badge{background:var(--purple);color:#fff}.school-marker.kind-comprehensive .school-badge{background:var(--cyan);color:#073a50}.school-marker.area-awaji .school-badge{box-shadow:0 0 0 3px rgba(123,97,255,.18)}.school-label{margin-top:4px;white-space:nowrap;border-radius:999px;background:rgba(255,255,255,.94);padding:5px 8px;font-size:11px;font-weight:900;color:var(--ink);border:1px solid rgba(255,255,255,.9)}.school-marker.selected{z-index:10!important}.school-marker.selected .school-badge{background:var(--coral)!important;color:#fff!important;transform:scale(1.15)}.school-marker.selected .school-label{display:block!important;background:#fff;border-color:rgba(255,111,97,.35);box-shadow:0 6px 18px rgba(20,33,61,.16)}.school-marker.compact:not(.selected) .school-label{display:none}.school-marker.compact:not(.selected) .school-badge{width:24px;height:24px;min-width:24px;border-radius:8px;font-size:9px;border-width:2px}
.region-map-label{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.9);font-size:12px;font-weight:900;color:#39506f;box-shadow:0 8px 20px rgba(35,65,105,.12);pointer-events:none}.region-map-label.awaji{color:#5945bf}.time-marker{pointer-events:none}.time-bubble{background:var(--ink);color:#fff;border:3px solid #fff;border-radius:999px;padding:7px 10px;font-size:13px;font-weight:900;box-shadow:0 8px 20px rgba(20,33,61,.25)}
.maplibregl-ctrl-bottom-right{bottom:6px}.maplibregl-ctrl-group{border-radius:14px!important;overflow:hidden}.maplibregl-ctrl-attrib{font-size:9px!important;background:rgba(255,255,255,.74)!important}
@media(max-width:760px){
  .app-shell{padding:10px 10px 18px}.topbar{align-items:flex-start;flex-direction:column;margin-bottom:8px}.top-actions{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.chip-button{padding:8px 11px;font-size:12px;white-space:nowrap}.district-note{margin-bottom:9px}.district-note small{width:100%;margin-left:0}.map-stage{height:68vh;min-height:520px;border-radius:24px}.legend{top:auto;right:12px;bottom:12px;max-width:190px;gap:8px;padding:8px;font-size:10px}.origin-card{top:12px;left:12px}.route-summary{left:12px;bottom:12px;width:min(385px,calc(100% - 24px));padding:14px;border-radius:20px}.summary-head h2{font-size:19px}.total-time strong{font-size:26px}.school-strip{margin-top:10px;padding-top:12px}.strip-title{align-items:flex-start;flex-direction:column;gap:4px}.strip-title p{font-size:11px;text-align:left}.school-card{min-width:145px}.maplibregl-ctrl-bottom-right{display:none}
}
@media(max-width:480px){.legend{display:none}.route-summary{bottom:10px}.map-stage{min-height:560px}.origin-card small{display:none}.school-label{font-size:10px}.school-badge{width:31px;height:31px}.title-row{gap:7px}.count-badge{font-size:11px;padding:5px 8px}}