:root{
  --bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;
  --text-primary:#f1f5f9;--text-secondary:#94a3b8;
  --accent:#4ade80;--border:#334155;--radius:8px;
  --font:'Noto Sans JP',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);
  display:flex;flex-direction:column;height:100vh;min-height:100dvh;overflow:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#0f172a;
  padding:12px 16px;z-index:2000;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

.header{background:var(--bg-secondary);border-bottom:1px solid var(--border);
  padding:10px 16px;display:flex;align-items:center;justify-content:space-between;
  gap:8px 12px;flex-wrap:wrap;flex-shrink:0;z-index:1000}
.header-left{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto}
.header-left h1{font-size:1.15rem;font-weight:700;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subtitle{font-size:.75rem;color:var(--text-secondary);white-space:nowrap}
.header-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}
.header-link{color:var(--accent);font-size:.82rem;padding:6px 14px;
  border:1px solid var(--accent);border-radius:6px;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;transition:background .15s,color .15s}
.header-link:hover{background:var(--accent);color:#0f172a;text-decoration:none}
.header-link-primary{background:var(--accent);color:#0f172a;font-weight:700}
.header-link-primary:hover{filter:brightness(1.12)}
.stats-bar{font-size:.78rem;color:var(--text-secondary);white-space:nowrap}

.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}
.controls:empty{display:none}
.ctl{display:flex;align-items:center;gap:6px}
.ctl-label{font-size:.78rem;color:var(--text-secondary)}
select{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);
  font-family:var(--font);font-size:.82rem;padding:6px 10px;min-height:44px;
  border-radius:var(--radius);cursor:pointer}
.hint{font-size:.75rem;color:var(--text-secondary)}

main{flex:1;position:relative;min-height:0}
#map{position:absolute;inset:0}

.legend{background:rgba(15,23,42,.92);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;font-size:.78rem;line-height:1.9;color:var(--text-primary)}
.legend b{display:block;margin-bottom:4px;font-size:.8rem}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}

.leaflet-popup-content{font-family:var(--font);font-size:.85rem;line-height:1.7}
.pop-price{font-size:1.05rem;font-weight:900;color:#1d4ed8}
.pop-addr{color:#334155}

.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border);
  padding:10px 16px;font-size:.75rem;color:var(--text-secondary);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0}
.site-footer a{color:var(--accent)}
.footer-links a{margin-left:12px;display:inline-block;padding:8px 2px}

@media(max-width:600px){
  .header-left h1{font-size:1rem}
  .subtitle,.stats-bar{display:none}
  .hint{display:none}
  .header-link{font-size:.78rem;padding:6px 10px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}