/* /kouhou-map/ の地図・一覧・クイズ。
   色と書体は shared/design.css のトークン。ピンだけは地図（淡色地図は明暗どちらの
   設定でも明るい）の上で見分けるための固定色にしてある。色だけに頼らないよう、
   4種類は「塗り・濃さ・白抜き・大きさ」でも分けている。 */

:root{
  --pin-continuous:#1f4a6b;   /* 通し：濃い藍の塗り */
  --pin-gaps:#6f8fb0;         /* 欠号あり：淡い藍の塗り */
  --pin-excerpt:#1f4a6b;      /* 抜粋のみ：白抜きの輪 */
  --pin-other:#8a8f96;        /* 印なし：小さい灰 */
  --pin-ring:#ffffff;
}

/* hidden を付けた部品は、下で display:flex などを当てていても必ず隠す
   （JavaScript が動かないときに操作盤が見えてしまわないように） */
.kmap [hidden],.kmap-list [hidden],.kquiz [hidden]{display:none !important;}

/* ---- ページ内の行き先 ---- */
.kmap-jump{
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
  margin:1.6rem 0 1.2rem; font-family:var(--ui); font-size:.9rem;
}
.kmap-jump a{color:var(--link);}

/* ---- 操作盤（一覧ページの .koho__ctrl と同じ見た目） ---- */
.kmap-ctrl{margin:0 0 .6rem; font-family:var(--ui); font-size:.88rem;}
.kmap-ctrl .koho__line{margin:0 0 .3rem; display:flex; flex-wrap:wrap; gap:.3rem .9rem; align-items:center;}
.kmap-ctrl .koho__box{display:inline-flex; gap:.3rem; align-items:center; white-space:nowrap;}
.koho__leg{color:var(--ink-faint); letter-spacing:.08em; margin-right:.2rem;}
.kmap-hit{margin:.2rem 0 0; color:var(--ink-soft);}

/* ---- 凡例 ---- */
.kmap-legend{font-family:var(--ui); font-size:.82rem; margin:0 0 .6rem; color:var(--ink-soft);}
.kmap-legend ul{display:flex; flex-wrap:wrap; gap:.2rem 1rem; list-style:none; margin:.2rem 0; padding:0;}
.kmap-legend li{display:inline-flex; align-items:center; gap:.35rem;}
.kmap-legend p{margin:.1rem 0 0; font-size:.78rem; color:var(--ink-faint);}
.kmap-legend .kpin{position:static; display:inline-block; width:14px; height:14px;}

/* ---- 地図 ---- */
.kmap-map{
  height:min(62vh, 560px); min-height:320px;
  border:1px solid var(--rule-soft); background:var(--bg-2);
  position:relative; z-index:0;      /* Leaflet の重なりを外に漏らさない */
}
.kmap-map__nojs{padding:1rem; margin:0; font-family:var(--ui); font-size:.9rem;}

/* 全画面。まず画面いっぱいに重ね、対応するブラウザでは要素の全画面にもする（map.js） */
.kmap-map.is-full{
  position:fixed; inset:0; z-index:1000;
  width:100vw; height:100vh; height:100dvh;   /* dvh はアドレスバーの出入りに追随する */
  min-height:0; max-height:none; border:0; margin:0;
}
.kmap-map:fullscreen{width:100%; height:100%;}
html.kmap-lock,html.kmap-lock body{overflow:hidden;}   /* 重ねている間、下のページを動かさない */
.kmap-full{
  font:600 .85rem/1 var(--ui); letter-spacing:.04em;
  min-height:44px; padding:0 .9rem;             /* 指で押せる大きさ */
  background:#fff; color:#1b1f24;
  border:2px solid rgba(0,0,0,.2); border-radius:4px; background-clip:padding-box;
  cursor:pointer;
}
.kmap-full:hover{background:#f4f4f4;}
.kmap-map.is-full .kmap-full{background:#2f3b4d; color:#f2f4f7; border-color:#2f3b4d;}
.kmap-credit,.kmap-note{font-family:var(--ui); font-size:.78rem; color:var(--ink-faint); margin:.4rem 0 0; line-height:1.6;}
.kmap-credit a{color:inherit;}
.kmap-map .leaflet-container,.kmap-map.leaflet-container{font-family:var(--ui);}

/* ピン */
.kpin{
  border-radius:50%; box-sizing:border-box;
  border:2px solid var(--pin-ring); box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.kpin--continuous{background:var(--pin-continuous);}
.kpin--gaps{background:var(--pin-gaps);}
.kpin--excerpt_only{background:#fff; border:4px solid var(--pin-excerpt); box-shadow:0 0 0 1px #fff;}
.kpin--other{background:var(--pin-other); transform:scale(.8);}
.kpin--multi{display:flex; align-items:center; justify-content:center;}
.kpin--multi span{font:600 11px/1 var(--ui); color:#fff;}
.kpin--excerpt_only.kpin--multi span{color:var(--pin-excerpt);}
.korigin{
  border-radius:50%; background:#c0392b; border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}

/* まとまり（markercluster の既定の緑・黄・橙は使わない） */
.kcluster{
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(47,59,77,.18);
}
.kcluster span{
  display:flex; align-items:center; justify-content:center;
  width:calc(100% - 8px); height:calc(100% - 8px); border-radius:50%;
  background:#2f3b4d; color:#f2f4f7; font:600 12px/1 var(--ui);
}

/* ポップアップ（中身は一覧の .kitem__body の写し） */
.leaflet-popup-content{margin:.8rem .9rem; font-size:14px; line-height:1.6;}
.kpop .kitem__body + .kitem__body{border-top:1px solid #d6d9de; margin-top:.6rem; padding-top:.6rem;}
.kpop .kitem__body{color:#1b1f24;}
.kpop a{color:#1f4a6b;}

/* ---- 出発地 ---- */
.kmap-origin{
  margin:1.4rem 0 0; padding:1rem 1.1rem; background:var(--bg-2);
  border-left:2px solid var(--accent-pale); font-family:var(--ui); font-size:.9rem;
}
.kmap-origin__head{margin:0 0 .5rem; letter-spacing:.08em; color:var(--ink-soft);}
.kmap-origin__row{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin:0;}
.kmap-origin__row label{display:inline-flex; gap:.4rem; align-items:center;}
.kmap-origin__now{margin:.6rem 0 0; font-weight:600;}
.kmap-origin__msg{margin:.3rem 0 0; color:var(--ink-soft);}
.kmap-origin__now:empty,.kmap-origin__msg:empty{display:none;}
.kmap-privacy{margin:.6rem 0 0; font-size:.8rem; color:var(--ink-faint); line-height:1.6;}

button.kmap-origin__geo,.kquiz button,.kmap-origin select,.kmap-sort select{
  font:inherit; font-family:var(--ui); font-size:.9rem;
  padding:.45rem .8rem; min-height:44px;          /* 指で押せる大きさ */
  border:1px solid var(--rule); background:var(--card); color:var(--ink);
  border-radius:4px;
}
button.kmap-origin__geo{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.kquiz button:disabled{opacity:.45;}

/* ---- 一覧 ---- */
.kmap-list h2,.kquiz h2{scroll-margin-top:1rem;}
#map,#list,#quiz{scroll-margin-top:1rem;}
.kmap-sort{font-family:var(--ui); font-size:.9rem;}
.kmap-pref h3{display:flex; align-items:baseline; gap:.6rem;}
.kmap-pref__n{font-family:var(--ui); font-size:.8rem; color:var(--ink-faint);}
.kmap-items{list-style:none; margin:0; padding:0;}
.kitem{padding:.9rem 0; border-top:1px solid var(--rule-soft); scroll-margin-top:1rem;}
.kitem:target{background:var(--mark-wash);}
.kitem__body p{margin:0 0 .25rem; line-height:1.7;}
.kitem__muni{font-family:var(--ui); font-size:.85rem; color:var(--ink-soft);}
.kitem__title{font-size:1.05rem;}
.kitem__title a{color:var(--link);}
.kitem__years,.kitem__fmt,.kitem__basis,.kitem__links,.kitem__dist{font-size:.9rem;}
.kitem__k{
  display:inline-block; min-width:4.5em; margin-right:.5rem;
  font-family:var(--ui); font-size:.75rem; letter-spacing:.06em; color:var(--ink-faint);
}
.kitem .koho__yr{font-family:var(--ui); font-variant-numeric:tabular-nums; margin-right:.4rem;}
.kitem .koho__b{
  display:inline-block; margin-left:.4rem; padding:0 .4rem; border:1px solid var(--rule);
  font-family:var(--ui); font-size:.72rem; line-height:1.6; border-radius:3px;
}
.kitem .koho__warp{margin-left:.5rem; font-family:var(--ui); font-size:.75rem;}
.kitem__note{font-size:.9rem;}
details.kitem__note summary{cursor:pointer; font-family:var(--ui); font-size:.8rem; color:var(--ink-soft);}
details.kitem__note p{margin:.3rem 0 0;}
.kitem__links{display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; font-family:var(--ui);}
.kitem__links a{color:var(--link);}
.kitem__dist{display:flex; flex-wrap:wrap; gap:.2rem 1rem; font-family:var(--ui); margin-top:.3rem !important;}
.kitem__dist[hidden]{display:none;}
.kitem__km{font-weight:600;}
.kitem__route{display:inline-flex; flex-wrap:wrap; gap:.2rem .8rem;}
.kitem__routehead{color:var(--ink-faint);}
.kitem__route a{color:var(--link);}

/* ---- クイズ ---- */
.kquiz{margin-top:3rem;}
.kquiz fieldset{border:0; margin:0 0 .6rem; padding:0; font-family:var(--ui); font-size:.9rem;
  display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:center;}
.kquiz legend{float:left; margin-right:.6rem; color:var(--ink-faint); letter-spacing:.08em;}
.kquiz fieldset label{display:inline-flex; gap:.3rem; align-items:center;}
.kquiz__q{margin:1rem 0 .4rem;}
.kquiz__lead{display:block; font-family:var(--ui); font-size:.8rem; color:var(--ink-faint);}
.kquiz__title{font-size:1.3rem;}
.kquiz__yomi{margin-left:.4rem; color:var(--ink-soft);}
.kquiz__step{font-family:var(--ui); font-size:.9rem; margin:.2rem 0 .5rem;}
.kquiz__regions,.kquiz__prefs{display:flex; flex-wrap:wrap; gap:.4rem;}
.kquiz__prefs{margin-top:.6rem;}
.kquiz__map{margin:.8rem 0 0; border:1px solid var(--rule-soft); background:var(--card);}
.kquiz__loading{padding:1rem; margin:0; font-family:var(--ui); font-size:.9rem;}
.kquiz__svg{display:block; width:100%; height:auto; max-height:70vh; touch-action:manipulation;}

.kq-pref{fill:#eef0f3; stroke:#8a8f96; stroke-width:.6; vector-effect:non-scaling-stroke; cursor:pointer;}
/* 地方ごとにごく薄く色を変え、地方の見当を付けやすくする */
.kq-pref.kq-r1,.kq-pref.kq-r3,.kq-pref.kq-r5,.kq-pref.kq-r7{fill:#e6ebf1;}
.kq-pref.kq-r2,.kq-pref.kq-r4,.kq-pref.kq-r6{fill:#f3f1ea;}
.kq-pref:hover{fill:#cfd8e3;}
.kq-pref.is-dim{fill:#f7f7f7; stroke:#d6d9de; cursor:default;}
/* 答えたあとは地方の地色を消し、隣接県だけをうっすら塗る */
.kquiz__svg.is-done .kq-pref{fill:#f3f4f6; cursor:default;}
.kquiz__svg.is-done .kq-pref.is-near{fill:#bcd0e3;}
.kquiz__svg.is-done .kq-pref.is-wrong{fill:#e9c7c2;}
.kquiz__svg.is-done .kq-pref.is-answer{fill:#1f4a6b; stroke:#1f4a6b;}
.kq-pref.is-answer{fill:#1f4a6b; stroke:#1f4a6b;}
.kq-pref.is-wrong{fill:#e9c7c2;}
.kq-inset{fill:none; stroke:#b9bfc7; stroke-width:1; stroke-dasharray:4 3; vector-effect:non-scaling-stroke;}
.kq-pin{fill:#c0392b; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke;}

/* 地方ボタン：地図の地方の色と同じ地にする */
.kquiz__rb.kq-r1,.kquiz__rb.kq-r3,.kquiz__rb.kq-r5,.kquiz__rb.kq-r7{background:#e6ebf1; color:#1b1f24;}
.kquiz__rb.kq-r2,.kquiz__rb.kq-r4,.kquiz__rb.kq-r6{background:#f3f1ea; color:#1b1f24;}

.kquiz__result{margin:.8rem 0 0;}
.kquiz__result p{margin:0 0 .3rem;}
.kquiz__verdict{font-family:var(--ui); font-weight:600; font-size:1.05rem;}
.kquiz__verdict.is-ok{color:var(--mark);}
.kquiz__answer{font-size:1rem;}
.kquiz__links{display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; font-family:var(--ui); font-size:.9rem;}
.kquiz__links a{color:var(--link);}
.kquiz__dist{display:flex; flex-wrap:wrap; gap:.2rem 1rem; font-family:var(--ui); font-size:.9rem;}
.kquiz__foot{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:.8rem 0 0; font-family:var(--ui); font-size:.9rem;}
.kquiz__next{background:var(--accent) !important; color:var(--on-accent) !important; border-color:var(--accent) !important;}

/* 収録件数で塗る */
.kquiz.is-count .kq-pref{cursor:pointer;}
.kq-pref[data-bin="0"],.kq-bin[data-bin="0"]{fill:#ffffff; background:#ffffff;}
.kq-pref[data-bin="1"],.kq-bin[data-bin="1"]{fill:#d4dfeb; background:#d4dfeb;}
.kq-pref[data-bin="2"],.kq-bin[data-bin="2"]{fill:#9fb6cd; background:#9fb6cd;}
.kq-pref[data-bin="3"],.kq-bin[data-bin="3"]{fill:#5f82a6; background:#5f82a6;}
.kq-pref[data-bin="4"],.kq-bin[data-bin="4"]{fill:#1f4a6b; background:#1f4a6b;}
.kquiz__bins{display:flex; flex-wrap:wrap; gap:.3rem 1rem; list-style:none; margin:0 0 .5rem; padding:0; font-family:var(--ui); font-size:.82rem;}
.kquiz__bins li{display:inline-flex; align-items:center; gap:.35rem;}
.kq-bin{display:inline-block; width:14px; height:14px; border:1px solid #8a8f96;}
.kquiz__zero{font-size:.9rem;}
.kquiz__countinfo{font-family:var(--ui); font-size:.95rem; font-weight:600;}
.kquiz__countinfo:empty{display:none;}