/* ===========================================================================
   日本の山 天気予報くらべ
   TAKAO 599 MUSEUM を参照したミニマル設計：
     ・面は白、文字は黒。カードやパネルの塗りを使わない
     ・角丸ゼロ、影ゼロ
     ・区切りは 1px のヘアラインと余白だけ
     ・文字は小さめ・行間は広め、欧文ラベルは字間を開けた大文字
   ダークは同じ言語のまま色だけ反転させる。
   =========================================================================== */
:root{
  --bg:#ffffff; --ink:#000000; --ink-2:#666666; --ink-3:#999999;
  --line:#e1e1e1; --line-2:#cccccc; --fill:#f7f7f7;
  --accent:#1a1a1a; --accent-ink:#ffffff;
  --warm:#c0392b; --cool:#2c6fb8;
  --good:#2e7d4f; --warn:#b07a15; --bad:#c0392b;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Verdana,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0b0c; --ink:#f2f2f2; --ink-2:#9a9a9a; --ink-3:#6a6a6a;
    --line:#282829; --line-2:#3a3a3c; --fill:#151516;
    --accent:#f2f2f2; --accent-ink:#0b0b0c;
    --warm:#e8776a; --cool:#6ea8e0;
    --good:#5cb587; --warn:#d3a44a; --bad:#e8776a;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:13px/1.9 var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink); text-underline-offset:3px}
a:hover{color:var(--ink-2)}
img{border-radius:0}
.app{display:flex; height:100vh; overflow:hidden}

/* 小さい欧文ラベル（区切り・補助） */
.link-group,.side-head h1 span,.count,.chart h4{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
/* セクション見出しはアイコンつきで大きく */
.card-head h3{
  font-size:19px; font-weight:700; letter-spacing:.06em;
  display:flex; align-items:center; gap:11px; line-height:1.4;
}
.card-head h3 svg{width:23px; height:23px; flex:0 0 23px; color:var(--ink-2)}

/* ---------- サイドバー ---------- */
.sidebar{
  width:280px; flex:0 0 280px; background:var(--bg);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
}
.side-head{padding:26px 22px 14px}
.side-head h1{margin:0 0 18px; font-size:17px; font-weight:700; letter-spacing:.14em; line-height:1.3}
.side-head h1 span{display:block; color:var(--ink-3); margin-top:6px; letter-spacing:.22em; font-size:9px}
.list-tabs{display:flex; margin-bottom:14px; border:1px solid var(--line)}
.list-tabs .tab{flex:1; text-align:center; border:0; border-right:1px solid var(--line)}
.list-tabs .tab:last-child{border-right:0}
#search{
  width:100%; padding:9px 0; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:13px; font-family:inherit;
}
#search::placeholder{color:var(--ink-3)}
#search:focus{outline:none; border-bottom-color:var(--ink)}
.regions{display:flex; flex-wrap:wrap; gap:0; margin-top:14px}
.chip{
  font-size:10.5px; padding:4px 9px; cursor:pointer; font-family:inherit;
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  margin:0 -1px -1px 0; letter-spacing:.04em;
}
.chip:hover{color:var(--ink); border-color:var(--line-2); position:relative; z-index:1}
.chip.is-on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.count{margin:16px 0 0; color:var(--ink-3)}

.list{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1}
.list li{
  padding:11px 22px; cursor:pointer; display:flex; align-items:baseline; gap:12px;
  border-bottom:1px solid var(--line);
}
.list li:hover{background:var(--fill)}
.list li.is-on{background:var(--accent)}
.list li.is-on .li-name,.list li.is-on .li-sub,.list li.is-on .li-no,.list li.is-on .li-elev{color:var(--accent-ink)}
.list li.is-on .li-h{color:var(--accent-ink); border-color:var(--accent-ink)}
.li-no{font-size:9.5px; color:var(--ink-3); width:26px; flex:0 0 26px; text-align:right; font-variant-numeric:tabular-nums}
.li-body{min-width:0; flex:1}
.li-name{display:block; font-size:13px; font-weight:700; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.li-sub{display:block; font-size:10.5px; color:var(--ink-3); line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.li-elev{font-size:10.5px; color:var(--ink-3); flex:0 0 auto; font-variant-numeric:tabular-nums}
.li-h{
  font-size:8.5px; font-weight:700; color:var(--ink-2); border:1px solid var(--line-2);
  padding:0 3px; margin-left:6px; vertical-align:1.5px; letter-spacing:.04em;
}
.list-more{padding:16px 22px; font-size:10.5px; color:var(--ink-3); text-align:center; border-bottom:0}
.side-foot{padding:16px 22px; border-top:1px solid var(--line); font-size:10px; color:var(--ink-3); line-height:2}
.side-foot a{color:var(--ink-2)}

/* ---------- メイン ---------- */
.main{flex:1; overflow-y:auto}
.empty{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ink-3); padding:40px}
.empty-mark{font-size:34px; opacity:.3}
.empty h2{margin:22px 0 10px; font-size:13px; font-weight:700; color:var(--ink-2); letter-spacing:.18em}
.empty p{margin:0; font-size:12px; line-height:2.1}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative; min-height:180px; display:flex; align-items:flex-end;
  border-bottom:1px solid var(--line); background:var(--fill);
}
.hero.has-photo{min-height:min(62vh,520px); border-bottom-color:transparent}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:fadeIn .6s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero.has-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.28) 42%, rgba(0,0,0,0) 78%);
}
.hero-body{position:relative; z-index:2; padding:0 46px 40px; width:100%}
.hero-tags{display:flex; gap:0; flex-wrap:wrap; margin-bottom:18px}
.tag{
  font-size:9.5px; font-weight:700; letter-spacing:.16em; padding:4px 10px;
  border:1px solid var(--line-2); color:var(--ink-2); margin:0 -1px -1px 0;
}
.hero.has-photo .tag{border-color:rgba(255,255,255,.5); color:#fff}
.tag-h{background:var(--accent); border-color:var(--accent) !important; color:var(--accent-ink)}
.hero.has-photo .tag-h{background:#fff; color:#000; border-color:#fff !important}
.hero h2{margin:0; font-size:46px; font-weight:700; letter-spacing:.04em; line-height:1.1}
.hero p{margin:14px 0 0; font-size:11.5px; color:var(--ink-2); letter-spacing:.1em}
.hero.has-photo h2{color:#fff}
.hero.has-photo p{color:rgba(255,255,255,.85)}
.hero-credit{position:absolute; right:16px; bottom:14px; z-index:2; font-size:9.5px; letter-spacing:.06em}
.hero-credit:empty{display:none}
.hero-credit,.hero-credit a{color:rgba(255,255,255,.6); text-decoration:none}
.hero.has-photo .hero-credit,.hero.has-photo .hero-credit a{color:rgba(255,255,255,.6)}
.hero-credit a:hover{color:#fff; text-decoration:underline}

/* ---------- メタ行 ---------- */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:20px 46px; border-bottom:1px solid var(--line);
}
.bar p{margin:0; font-size:11px; line-height:2; color:var(--ink-2); font-variant-numeric:tabular-nums}
.bar p b{color:var(--ink); font-weight:700}
.mt-actions{display:flex; align-items:center; gap:0}
.switch{
  display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-2);
  cursor:pointer; user-select:none; padding:8px 14px; border:1px solid var(--line); margin-right:-1px;
}
.switch:hover{border-color:var(--line-2); color:var(--ink)}
.switch input{accent-color:var(--ink); margin:0}
.btn{
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  padding:8px 16px; font-size:11px; cursor:pointer; font-family:inherit; letter-spacing:.08em;
}
.btn:hover{border-color:var(--ink); color:var(--ink)}
.status{font-size:12px; color:var(--ink-2); padding:24px 46px}
.status.err{color:var(--bad)}
.status:empty{display:none}

/* ---------- セクション（カードの塗りは使わない）---------- */
.card{border-bottom:1px solid var(--line); padding:0 0 44px}
.card:last-child{border-bottom:0}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:44px 46px 22px; flex-wrap:wrap;
}
.card-head h3{margin:0; color:var(--ink)}
.hint{font-size:10.5px; color:var(--ink-3)}
.tabs{display:flex; border:1px solid var(--line)}
.tab{
  border:0; border-right:1px solid var(--line); background:transparent; color:var(--ink-2);
  font-family:inherit; font-size:10.5px; padding:7px 14px; cursor:pointer;
  white-space:nowrap; letter-spacing:.06em;
}
.tab:last-child{border-right:0}
.tab:hover{color:var(--ink); background:var(--fill)}
.tab.is-on{background:var(--accent); color:var(--accent-ink); font-weight:700}

/* ---------- コンセンサス ---------- */
.consensus{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line); margin:0 46px}
.cday{padding:22px 8px 20px; text-align:center; border-right:1px solid var(--line)}
.cday:last-child{border-right:0}
.cday-date{font-size:10px; color:var(--ink-3); letter-spacing:.1em; font-variant-numeric:tabular-nums}
.cday-date .dow{font-weight:700; color:var(--ink-2)}
.cday-date .sat{color:var(--cool)} .cday-date .sun{color:var(--warm)}
.cday-icon{font-size:26px; line-height:1.5; margin:6px 0 2px}
.cday-desc{font-size:10.5px; color:var(--ink-2); min-height:1.6em}
.cday-temp{font-size:16px; margin-top:12px; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.cday-temp .hi{color:var(--warm); font-weight:700}
.cday-temp .lo{color:var(--cool); font-weight:700}
.cday-temp em{font-style:normal; color:var(--ink-3); margin:0 3px; font-weight:300}
.cday-sub{font-size:10px; color:var(--ink-3); margin-top:2px; font-variant-numeric:tabular-nums}
.badge{
  display:inline-block; margin-top:14px; font-size:10px; font-weight:700;
  letter-spacing:.1em; padding:3px 0; border-top:1px solid currentColor; min-width:62px;
}
.badge.b0{color:var(--good)} .badge.b1{color:var(--ink-2)}
.badge.b2{color:var(--warn)} .badge.b3{color:var(--bad)}
.agree{margin-top:8px; font-size:9.5px; color:var(--ink-3); display:flex; align-items:center; justify-content:center; gap:5px}
.dot{width:5px; height:5px; display:inline-block}
.dot.a0{background:var(--good)} .dot.a1{background:var(--warn)} .dot.a2{background:var(--bad)}

/* ---------- モデル別比較 ---------- */
.table-wrap{overflow-x:auto; margin:0 46px}
.grid{border-collapse:collapse; width:100%; min-width:680px; font-size:11.5px}
.grid th,.grid td{border-bottom:1px solid var(--line); padding:12px 6px; text-align:center}
.grid thead th{font-size:10px; color:var(--ink-3); font-weight:700; letter-spacing:.1em; padding:10px 6px; border-top:1px solid var(--line)}
.grid thead th .sat{color:var(--cool)} .grid thead th .sun{color:var(--warm)}
.grid tbody th{
  text-align:left; padding-left:14px; font-size:11.5px; font-weight:700; white-space:nowrap;
  border-left:2px solid transparent; letter-spacing:.08em;
}
.grid tbody th small{display:block; font-weight:400; font-size:9.5px; color:var(--ink-3); letter-spacing:0}
.grid tr.mean th{color:var(--ink)}
.grid tr.mean{background:var(--fill)}
.grid td{font-variant-numeric:tabular-nums}
.grid td.na{color:var(--ink-3)}
.cell-i{font-size:18px; line-height:1.2}
.cell-t{font-size:10px}
.cell-t .hi{color:var(--warm)} .cell-t .lo{color:var(--cool)}
.v-hi{color:var(--bad); font-weight:700}
.v-mid{color:var(--warn)}
.legend{padding:16px 46px 0; font-size:10px; line-height:2; color:var(--ink-3)}
.legend b{color:var(--ink-2)}

/* ---------- グラフ ---------- */
.charts{padding:0 46px}
.chart{margin-bottom:22px}
.chart h4{margin:0 0 6px; color:var(--ink-3)}
.chart svg{width:100%; height:auto; display:block}
.chart-legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:10px; color:var(--ink-2); letter-spacing:.08em}
.chart-legend i{display:inline-block; width:14px; height:2px; margin-right:7px; vertical-align:middle}

/* ---------- 地理院地図 ---------- */
.map{
  position:relative; height:460px; overflow:hidden; background:var(--fill);
  cursor:grab; touch-action:none; user-select:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.map.is-dragging{cursor:grabbing}
.gsimap-pane,.gsimap-markers{position:absolute; inset:0; will-change:transform; transform-origin:0 0}
.gsimap-pane{z-index:0; isolation:isolate}
.gsimap-markers{pointer-events:none; z-index:300}
/* 小数ズームで pane 全体を拡大縮小するため、継ぎ目が出ないよう 0.5px だけ重ねる */
.gsimap-tile{position:absolute; top:0; left:0; width:256.5px; height:256.5px; transform-origin:0 0}
@media (prefers-color-scheme:dark){ .gsimap-tile{filter:brightness(.8) contrast(1.05) saturate(.85)} }
.gsimap-pin{position:absolute; top:0; left:0}
.gsimap-pin-i{position:absolute; top:0; left:0; transform:scale(var(--inv,1)); transform-origin:0 0}
.gsimap-pin-dot{
  position:absolute; left:-6px; top:-6px; width:12px; height:12px;
  border:2px solid #fff; outline:1px solid rgba(0,0,0,.55);   /* 影ではなく輪郭線。写真の上でも見えるように */
}
.gsimap-pin.summit .gsimap-pin-dot{background:#c0392b}
.gsimap-pin.grid .gsimap-pin-dot{background:#2c6fb8; border-style:dashed}
.gsimap-pin.hut .gsimap-pin-dot,
.gsimap-pin.shelter .gsimap-pin-dot,
.gsimap-pin.center .gsimap-pin-dot{width:8px; height:8px; left:-4px; top:-4px}
.gsimap-pin.hut .gsimap-pin-dot{background:#2e7d4f}
.gsimap-pin.shelter .gsimap-pin-dot{background:#b07a15}
.gsimap-pin.center .gsimap-pin-dot{background:#2c6fb8}
.gsimap-pin-label{
  position:absolute; left:11px; top:-9px; white-space:nowrap;
  font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,.72);
  padding:3px 8px; letter-spacing:.05em;
}
.gsimap-ctrl{position:absolute; right:16px; top:16px; display:flex; flex-direction:column; gap:8px; z-index:400}
.gsimap-ctrl button{
  width:32px; height:32px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer; font-family:inherit; display:grid; place-items:center;
}
.gsimap-ctrl button:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.gsimap-zoom{display:flex; flex-direction:column}
.gsimap-zoom button:last-child{border-top:0}
.gsimap:focus-visible{outline:1px solid var(--ink); outline-offset:-1px}
.gsimap-scale{
  position:absolute; left:16px; bottom:14px; z-index:400; display:flex; align-items:flex-end; gap:8px;
  font-size:10px; color:var(--ink); pointer-events:none; letter-spacing:.06em;
  text-shadow:0 1px 3px var(--bg), 0 0 4px var(--bg); font-variant-numeric:tabular-nums;
}
.gsimap-scale-bar{display:block; height:5px; border:1px solid var(--ink); border-top:0; min-width:24px; transition:width .12s ease-out}
.gsimap-attr{
  position:absolute; right:0; bottom:0; z-index:400; font-size:9.5px; padding:4px 9px;
  background:var(--bg); color:var(--ink-2); letter-spacing:.04em;
}
.map-links{display:flex; gap:20px; flex-wrap:wrap; margin-top:12px}

/* ---------- 情報セクション ---------- */
.sec{padding:0 46px}
.info-msg{font-size:10.5px; line-height:2; color:var(--ink-3); padding:16px 0 0}
.info-msg.err{color:var(--bad)}

.news{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.news li{padding:16px 0; border-bottom:1px solid var(--line)}
.news a{font-size:13.5px; font-weight:700; text-decoration:none; line-height:1.75}
.news a:hover{text-decoration:underline}
.news .meta{display:block; font-size:10px; color:var(--ink-3); margin-top:7px; letter-spacing:.06em}
.news .src{color:var(--ink-2); font-weight:700}

.poi{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); border-top:1px solid var(--line)}
.poi li{padding:14px 16px 14px 0; display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--line)}
.poi .k{font-size:9px; padding:2px 6px; flex:0 0 auto; font-weight:700; letter-spacing:.08em; border:1px solid currentColor}
.poi .k.hut{color:var(--good)} .poi .k.shelter{color:var(--warn)}
.poi .k.center{color:var(--cool)} .poi .k.info{color:var(--ink-3)}
.poi .n{font-size:12.5px; font-weight:700; flex:1; min-width:0}
.poi .n a{text-decoration:none}
.poi .n a:hover{text-decoration:underline}
.poi .n small{display:block; font-weight:400; font-size:10px; color:var(--ink-3)}
.poi .d{font-size:10.5px; color:var(--ink-2); flex:0 0 auto; text-align:right; line-height:1.5; font-variant-numeric:tabular-nums}

.linkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:0}
.linkgrid a{
  display:block; padding:16px 18px; border:1px solid var(--line); margin:0 -1px -1px 0;
  text-decoration:none; background:transparent;
}
.linkgrid a:hover{background:var(--fill); border-color:var(--line-2); position:relative; z-index:1}
.linkgrid .t{font-size:12.5px; font-weight:700}
.linkgrid .t::after{content:'↗'; font-size:9px; color:var(--ink-3); margin-left:6px; vertical-align:1px}
.linkgrid .s{display:block; font-size:10.5px; color:var(--ink-3); margin-top:4px}
.badge-s{
  font-size:8.5px; border:1px solid var(--line-2); color:var(--ink-3);
  padding:1px 4px; margin-left:7px; vertical-align:1.5px; letter-spacing:.08em; font-weight:400;
}
.link-group{color:var(--ink-3); margin:32px 0 12px; display:flex; align-items:center; gap:12px}
.link-group::after{content:''; flex:1; height:1px; background:var(--line)}
.link-group:first-child{margin-top:0}

/* ---------- 概要と写真 ---------- */
.summary{margin:0 0 26px; font-size:13px; line-height:2.15; color:var(--ink-2); max-width:74ch}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1px; background:var(--line)}
.shot{margin:0; position:relative; overflow:hidden; cursor:zoom-in; background:var(--fill); aspect-ratio:4/3}
.shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.shot:hover img,.shot:focus-visible img{transform:scale(1.05)}
.shot:focus-visible{outline:1px solid var(--ink); outline-offset:-1px}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 10px 8px;
  font-size:9.5px; color:#fff; line-height:1.4; letter-spacing:.04em;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- ライトボックス ---------- */
.lightbox{
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:44px; cursor:zoom-out; animation:fadeIn .16s ease-out;
}
.lightbox img{max-width:100%; max-height:80vh; object-fit:contain}
.lb-cap{font-size:11px; color:rgba(255,255,255,.7); text-align:center; max-width:760px; letter-spacing:.06em}
.lb-cap .lb-by{color:rgba(255,255,255,.45)}
.lb-cap a{color:#fff}
.lb-close{
  position:absolute; top:22px; right:24px; width:36px; height:36px;
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  font-size:13px; cursor:pointer; font-family:inherit;
}
.lb-close:hover{background:rgba(255,255,255,.14)}

@media (max-width:900px){
  .app{flex-direction:column; height:auto; overflow:visible}
  .sidebar{width:100%; flex:none; border-right:0; border-bottom:1px solid var(--line)}
  .list{max-height:38vh}
  .hero-body{padding:0 20px 26px}
  .hero h2{font-size:28px}
  .hero.has-photo{min-height:300px}
  .bar,.status{padding:16px 20px}
  .card-head{padding:28px 20px 14px}
  .consensus,.table-wrap{margin:0 20px}
  .sec,.charts,.legend{padding-left:20px; padding-right:20px}
  .consensus{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cday{border-bottom:1px solid var(--line)}
  .map{height:340px}
}
.shot figcaption .km{
  display:inline-block; border:1px solid rgba(255,255,255,.55); padding:0 4px;
  margin-right:6px; font-variant-numeric:tabular-nums;
}

/* ---------- この山について ---------- */
.lead{
  margin:0; font-size:24px; font-weight:400; line-height:1.7; letter-spacing:.02em;
  max-width:34em; color:var(--ink);
}
.lead:empty{display:none}
.overview{margin-top:22px; max-width:74ch}
.overview p{margin:0 0 12px; font-size:13px; line-height:2.15; color:var(--ink-2)}
.overview .src-line{margin:0; font-size:11px}
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0; margin:30px 0 0; border-top:1px solid var(--line);
}
.facts > div{padding:14px 16px 14px 0; border-bottom:1px solid var(--line)}
.facts dt{font-size:9.5px; font-weight:700; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase}
.facts dd{margin:5px 0 0; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .card-head h3{font-size:16px; gap:9px}
  .card-head h3 svg{width:20px; height:20px; flex-basis:20px}
  .lead{font-size:19px}
}
.li-alias{font-size:9.5px; font-weight:400; color:var(--ink-3); margin-left:7px}
.list li.is-on .li-alias{color:var(--accent-ink); opacity:.75}

/* ---------- 雨雲レーダー ---------- */
.map-head-right{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.switch-radar{padding:6px 12px; margin-right:0}
.gsimap-radar{position:absolute; inset:0; z-index:120; pointer-events:none; opacity:.72; transform-origin:0 0; will-change:transform}
.radar{border-bottom:1px solid var(--line); background:var(--fill)}
.radar-bar{display:flex; align-items:center; gap:14px; padding:12px 46px}
.radar-btn{
  width:32px; height:32px; flex:0 0 32px; border:1px solid var(--line-2); background:var(--bg);
  color:var(--ink); font-size:11px; cursor:pointer; font-family:inherit; display:grid; place-items:center;
}
.radar-btn:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.radar-range{flex:1; min-width:120px; accent-color:var(--ink); height:2px}
.radar-time{
  font-size:11.5px; font-variant-numeric:tabular-nums; letter-spacing:.06em;
  white-space:nowrap; min-width:15em; text-align:right;
}
.radar-time .fc{color:var(--warn); font-weight:700}
.radar-time .ob{color:var(--ink-2); font-weight:700}
.radar-legend{display:flex; align-items:center; gap:0; padding:0 46px 14px; flex-wrap:wrap}
.radar-legend span{font-size:9px; color:var(--ink-2); padding:3px 7px; letter-spacing:.04em; white-space:nowrap}
.radar-legend .sw{width:26px; padding:0; height:12px; display:inline-block}
.radar-note{padding:0 46px 14px; font-size:10px; line-height:1.9; color:var(--ink-3)}
@media (max-width:900px){
  .radar-bar,.radar-legend,.radar-note{padding-left:20px; padding-right:20px}
  .radar-time{min-width:0; font-size:10.5px}
}
.retry{
  border:1px solid var(--line-2); background:transparent; color:var(--ink-2);
  font-family:inherit; font-size:10px; padding:2px 9px; margin-left:8px; cursor:pointer; letter-spacing:.06em;
}
.retry:hover{border-color:var(--ink); color:var(--ink)}