/* ── Variables ── */
:root{
  --bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;
  --text-primary:#f1f5f9;--text-secondary:#94a3b8;
  --accent:#3b82f6;--accent-light:rgba(59,130,246,.15);
  --grow:#10b981;--grow-bg:rgba(16,185,129,.12);
  --decline:#ef4444;--decline-bg:rgba(239,68,68,.12);
  --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);overflow:hidden;height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Header ── */
.header{
  background:var(--bg-secondary);border-bottom:1px solid var(--border);
  padding:10px 16px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;z-index:1000;
}
.header-left{display:flex;align-items:center;gap:10px}
.header-left h1{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--accent)}
.header-icon{width:20px;height:20px;stroke:var(--accent)}
.subtitle{font-size:.75rem;color:var(--text-secondary)}
.header-controls{display:flex;align-items:center;gap:8px}
select{
  background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);
  font-family:var(--font);font-size:.8rem;
  padding:6px 10px;min-height:44px;border-radius:var(--radius);
  cursor:pointer;appearance:menulist;
}
select:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-light)}

/* ── Container ── */
.container{display:flex;flex:1;overflow:hidden;position:relative}

/* ── Sidebar ── */
.sidebar{
  width:360px;flex-shrink:0;background:var(--bg-secondary);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;z-index:500;
}
.stats-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border-bottom:1px solid var(--border);
}
.stat{background:var(--bg-secondary);padding:12px 8px;text-align:center}
.stat-num{display:block;font-size:1.3rem;font-weight:900;color:var(--accent)}
.stat-num.grow{color:var(--grow)}
.stat-num.decline{color:var(--decline)}
.stat-label{font-size:.65rem;color:var(--text-secondary)}
.sidebar-title{padding:10px 14px;font-size:.8rem;font-weight:700;color:var(--text-secondary);border-bottom:1px solid var(--border)}

/* ── Search ── */
.search-box{padding:8px 14px;border-bottom:1px solid var(--border)}
.search-input{
  width:100%;padding:8px 12px;min-height:40px;border-radius:var(--radius);
  background:var(--bg-tertiary);border:1px solid var(--border);
  color:var(--text-primary);font-family:var(--font);font-size:.82rem;
}
.search-input::placeholder{color:var(--text-secondary)}
.search-input:focus{outline:none;box-shadow:0 0 0 3px var(--accent-light)}

/* ── Prefecture list ── */
.pref-list{flex:1;overflow-y:auto}
.pref-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;
}
.pref-item:hover,.pref-item:focus-visible{background:var(--bg-tertiary)}
.pref-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.pref-item.active{background:var(--accent-light);border-left:3px solid var(--accent)}
.pref-rank{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;background:var(--bg-tertiary);color:var(--text-secondary);flex-shrink:0;
}
.pref-rank.top3{background:var(--accent);color:#fff}
.pref-info{flex:1;min-width:0}
.pref-name{font-size:.85rem;font-weight:600}
.pref-pop{font-size:.72rem;color:var(--text-secondary)}
.pref-change{
  font-size:.78rem;font-weight:700;padding:3px 8px;border-radius:12px;flex-shrink:0;
}
.pref-change.grow{color:var(--grow);background:var(--grow-bg)}
.pref-change.decline{color:var(--decline);background:var(--decline-bg)}

/* ── Map ── */
#map{flex:1;z-index:1}
.leaflet-popup-content-wrapper{background:var(--bg-secondary);color:var(--text-primary);border-radius:var(--radius);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.leaflet-popup-tip{background:var(--bg-secondary)}
.popup-title{font-size:.9rem;font-weight:700;margin-bottom:6px}
.popup-pop{font-size:1.2rem;font-weight:900;color:var(--accent)}
.popup-change{font-size:.8rem;margin-top:4px}
.popup-change.grow{color:var(--grow)}
.popup-change.decline{color:var(--decline)}
.popup-chart{margin-top:8px}
.popup-chart canvas{width:220px!important;height:100px!important}

/* ── Detail panel ── */
.detail-panel{
  display:none;background:var(--bg-secondary);border-top:1px solid var(--border);
  max-height:300px;overflow-y:auto;padding:14px;
}
.detail-panel.open{display:block}
.detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.detail-header h3{font-size:.95rem;font-weight:700}
.btn-close-detail{
  background:none;border:none;color:var(--text-secondary);cursor:pointer;
  font-size:1.2rem;padding:4px 8px;border-radius:var(--radius);
}
.btn-close-detail:hover{background:var(--bg-tertiary)}
.chart-container{height:160px;margin-bottom:12px}
.chart-container canvas{width:100%!important;height:100%!important}

/* ── Sidebar toggle ── */
.btn-sidebar-toggle{
  display:none;background:var(--bg-tertiary);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius);padding:8px;
  cursor:pointer;min-height:44px;min-width:44px;
  align-items:center;justify-content:center;
}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:490}

/* ── Footer ── */
.site-footer{
  background:var(--bg-secondary);border-top:1px solid var(--border);
  padding:12px 16px;font-size:.7rem;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);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-links{display:flex;gap:12px}

/* ── Loading ── */
.loading-overlay{
  position:fixed;inset:0;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--text-secondary);z-index:9999;transition:opacity .3s;
}
.loading-overlay.hide{opacity:0;pointer-events:none}
.loading-msg{padding:40px;text-align:center;color:var(--text-secondary);font-size:.82rem}
.btn-retry{
  margin-top:12px;padding:8px 20px;min-height:44px;border-radius:var(--radius);
  border:1px solid var(--accent);background:transparent;
  color:var(--accent);font-size:.82rem;font-family:var(--font);cursor:pointer;
}
.btn-retry:hover{background:var(--accent-light)}

/* ── Responsive ── */
@media(max-width:767px){
  .btn-sidebar-toggle{display:flex}
  .sidebar{
    position:absolute;top:0;left:0;bottom:0;width:85vw;max-width:360px;
    transform:translateX(-100%);transition:transform .25s ease;z-index:500;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  .detail-panel{max-height:220px}
}

@media(max-width:480px){
  .header{padding:8px 12px;flex-wrap:wrap;gap:4px}
  .header-left{flex:1;min-width:0}
  .header-left h1{font-size:.95rem;white-space:nowrap}
  .subtitle{display:none}
  .header-controls{gap:6px}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
h2.sidebar-title {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .5px;
  margin: 12px 16px 6px;
}


/* ── 都道府県別ランキングへの導線（フッターの小さなリンクから昇格） ── */
.header-nav{display:flex;align-items:center;gap:10px}
.header-link{
  color:var(--accent);text-decoration:none;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}

/* 主要導線は塗りつぶしで最も目立たせる */
.header-link-primary{background:var(--accent);color:#0f172a;font-weight:700;border-color:var(--accent)}
.header-link-primary:hover{filter:brightness(1.12);color:#0f172a}
@media(max-width:600px){
  .header-link{font-size:.78rem;padding:6px 10px}
}

/* ── ヘッダーの折返し対応（導線ボタン追加で幅が不足するため） ── */
.header{flex-wrap:wrap;gap:8px 12px}
.header-left{min-width:0;flex:1 1 auto}
.header-left h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-controls,.header-nav{flex-wrap:wrap;flex-shrink:0}
@media(max-width:600px){
  .header .subtitle{display:none}   /* 狭い画面では副題を隠して導線を優先 */
}