* { box-sizing: border-box; }
html,body,#app { height:100%; margin:0; font-family: system-ui, sans-serif; }
#app { display:flex; }
#panel { width:320px; min-width:280px; border-right:1px solid #ddd; display:flex; flex-direction:column; }
#panel header { padding:10px; border-bottom:1px solid #eee; }
#panel h1 { font-size:16px; margin:0; }
#panel h1 .ver { font-size:11px; font-weight:normal; color:#999; margin-left:5px; }
.hdr-row { display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; }
#menu-btn { border:none; background:none; font-size:20px; padding:4px 10px; cursor:pointer; line-height:1; }
#menu-btn:hover { color:#1a73e8; }
#menu { border:1px solid #eee; border-bottom:none; margin-bottom:8px; font-size:13px; }
#menu a, #menu .menu-ver { display:block; padding:8px 10px; border-bottom:1px solid #eee; }
#menu a { text-decoration:none; color:#333; }
#menu a:hover { background:#f7f7f7; }
.menu-row { padding:8px 10px; border-bottom:1px solid #eee; font-size:13px; color:#333; }
.menu-row button { margin-left:6px; padding:3px 10px; font-size:12px; background:#fff; border:1px solid #bbb; border-radius:4px; cursor:pointer; }
.menu-row button.on { background:#446; color:#fff; border-color:#446; }
label.menu-row { display:block; cursor:pointer; }
.menu-ver { color:#999; font-size:11px; }
#search { width:100%; padding:6px 8px; }
#list { overflow:auto; flex:1; }
#map { flex:1; }
#attribution { position:fixed; bottom:0; right:0; background:rgba(255,255,255,.8); font-size:11px; padding:2px 6px; }
.route-item { padding:6px 10px; cursor:pointer; border-bottom:1px solid #f2f2f2; }
.route-item:hover { background:#f7f7f7; }
.route-item.selected { font-weight:bold; }
.route-check { margin-right:6px; vertical-align:middle; cursor:pointer; }
.route-swatch { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle; }
#legend{position:absolute;left:330px;top:10px;background:rgba(255,255,255,.9);padding:8px 20px 8px 8px;font-size:12px;z-index:1;border-radius:4px;}
#legend[hidden]{display:none;}
#legend-close{position:absolute;top:2px;right:4px;border:none;background:none;color:#888;font-size:15px;line-height:1;cursor:pointer;padding:2px 4px;}
#legend-close:hover{color:#333;}
@media (max-width:640px){ #app{flex-direction:column;} #panel{width:auto;height:45%;} }
@media (pointer:coarse){ #legend{display:none;} #legend-row{display:none;} } /* タッチ端末では凡例と再表示トグルを出さない(説明はヘルプへ) */
/* viewport-fit=cover でノッチ下まで描画するため、パネル内容と帰属表示はセーフエリアに逃がす */
@media (pointer:coarse){
  #panel { padding-left: env(safe-area-inset-left); }
  #panel header { padding-top: max(10px, env(safe-area-inset-top)); }
  #attribution { padding-right: calc(6px + env(safe-area-inset-right)); padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
}
.section-hdr { padding:6px 10px; background:#eef; font-size:12px; font-weight:bold; color:#446;
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.zoom-all-btn { border:1px solid #bbb; background:#fff; border-radius:4px; font-size:11px; padding:2px 8px; cursor:pointer; font-weight:normal; margin-left:auto; }
.zoom-all-btn:hover { background:#f0f0f0; }
.sel-hdr { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:4px 6px; }
.sel-chips { display:inline-flex; flex-wrap:wrap; gap:4px 6px; }
.sel-chip { display:inline-flex; align-items:center; gap:4px; color:#fff; font-size:12px;
  padding:2px 4px 2px 8px; border-radius:10px; cursor:pointer; max-width:100%; }
.sel-chip.current { outline:2px solid #333; }
.chip-remove { border:none; background:none; color:#fff; opacity:.75; cursor:pointer; font-size:12px; padding:0 3px; }
.chip-remove:hover { opacity:1; }
.hover-popup .maplibregl-popup-content { pointer-events:none; font-size:12px; padding:6px 9px; }
.hover-popup { pointer-events:none; }
.hover-popup .ids { color:#888; font-size:11px; }
.fac-item { padding:5px 10px; cursor:pointer; font-size:13px; border-bottom:1px solid #f0f0f0; }
.fac-item:hover { background:#f2f7ff; }
#legend .keys { color:#666; font-size:11px; }
#vp-only-label { display:block; margin-top:6px; font-size:12px; color:#333; cursor:pointer; }
#facets { margin-top:4px; }
#facets details { border-top:1px solid #f2f2f2; }
#facets summary { font-size:12px; padding:4px 2px; cursor:pointer; color:#446; }
#filters > summary { font-size:12px; font-weight:bold; padding:4px 2px; cursor:pointer; color:#446; }
#filters > summary .summary-text { display:inline-block; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.facet-opts { padding:0 2px 6px; display:flex; flex-wrap:wrap; gap:0 10px; }
.facet-opt { font-size:12px; padding:1px 2px; cursor:pointer; white-space:nowrap; }
.facet-opt .opt-count { color:#999; font-size:11px; }
.facet-opt.zero { color:#bbb; }
.facet-opt.zero .opt-count { color:#ccc; }
.vkey { margin-top:6px; display:flex; flex-wrap:wrap; gap:2px 8px; font-size:11px; color:#333; }
.vkey span { display:inline-flex; align-items:center; gap:3px; }
.vkey i { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* 見どころ: 吹き出しマーカー */
.spot-marker { position:relative; background:#B54EB2; color:#fff; border:2px solid #fff;
  border-radius:11px; padding:2px 10px; font-size:13px; font-weight:700; line-height:1.5;
  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.35); font-family:inherit; }
.spot-marker::after { content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border:5px solid transparent; border-top:6px solid #B54EB2; }
.spot-marker:hover { background:#9c3e9a; }
.spot-marker:hover::after { border-top-color:#9c3e9a; }

/* 見どころ: 解説カード（PC=右上のカード / スマホ=下部シート） */
#spot-card { position:absolute; top:10px; right:10px; width:380px; max-width:calc(100vw - 20px);
  max-height:calc(100% - 60px); overflow:auto; background:#fff; border:1px solid #ddd;
  border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.25); z-index:30;
  padding:14px 16px 12px; font-size:13.5px; line-height:1.7; }
#spot-card .spot-eyebrow { color:#B54EB2; font-size:11px; font-weight:700; letter-spacing:.08em; }
#spot-card h2 { font-size:15px; margin:2px 24px 2px 0; }
#spot-card .spot-sub { color:#666; font-size:12.5px; margin:0 0 6px; }
#spot-card p { margin:0.55em 0; }
#spot-card .spot-close { position:absolute; top:8px; right:10px; border:none; background:none;
  font-size:18px; color:#999; cursor:pointer; padding:2px 6px; }
#spot-card .spot-close:hover { color:#333; }
#spot-card .spot-share { position:absolute; top:9px; right:38px; border:none; background:none;
  font-size:14px; cursor:pointer; padding:2px 6px; filter:grayscale(1) opacity(.6); }
#spot-card .spot-share:hover { filter:none; }
#spot-card .spot-more { display:inline-block; margin-top:6px; font-size:12.5px; }
#spot-card .spot-grab { display:none; }
/* 解説文中の路線名・施設名: 地図のハイライトと同じく薄い電圧色の背景（蛍光ペン風）。
   ホバー=濃くなり地図の該当路線を強調 / クリック=ズーム */
#spot-card .spot-rt { background:color-mix(in srgb, var(--rt, #B54EB2) 24%, transparent);
  border-radius:3px; padding:0 2px; cursor:pointer; }
#spot-card .spot-rt:hover { background:color-mix(in srgb, var(--rt, #B54EB2) 45%, transparent); }
@media (max-width:640px) {
  #spot-card { top:auto; right:0; left:0; bottom:0; width:auto; max-height:46%;
    border-radius:14px 14px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom));
    transition: max-height .25s ease; }
  #spot-card.expanded { max-height: 92%; }
  /* つまみ（タップで拡大/縮小） */
  #spot-card .spot-grab { display:block; width:44px; height:5px; border-radius:3px;
    background:#ccc; margin:-4px auto 8px; cursor:pointer; }
  #spot-card .spot-grab:active { background:#aaa; }
}
/* h1 はトップページへのリンクだが、見た目は従来のタイトルのまま */
#panel h1 a { color: inherit; text-decoration: none; }

/* 鉄塔クリックで出す名称ラベル。送電線ラベル（白ハロー文字）と同じ見た目 */
.tower-label { font-size: 14px; color: #222; white-space: nowrap; pointer-events: none;
  font-weight: 600;
  text-shadow: 0 1px 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff,
    1px 1px 2px #fff, -1px -1px 2px #fff; }