/* 有権者 — 地方ページ（local.html）
   上から：短い見出し → 3D の日本地図と、選んだ県の記事（PC は横並び、スマホは縦） → 47都道府県の一覧（地方ごと）
   ページは長くしない。地図と記事の欄は画面の高さに収め、記事が多いときは欄の中だけスクロールする。 */

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lm { max-width: 1440px; margin: 0 auto; padding: 20px 20px 48px; }

/* ── 見出し ── */
.lm-hero { padding: 6px 0 16px; }
.lm-title { margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.2; letter-spacing: .2em; color: rgba(232, 237, 244, .95); }
.lm-lead { margin: 10px 0 0; max-width: 44em; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.8; color: rgba(232, 237, 244, .9); }
.lm-note { margin: 4px 0 0; font-size: 13px; color: var(--sub); }
.lm-sample { display: inline-block; margin: 10px 0 0; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #1a1205; background: #f0b84a; border-radius: 4px; }
.lm-sample[hidden] { display: none; }

/* ── 地図と記事の欄 ── */
.lm-main {
  --lm-h: clamp(460px, calc(100svh - var(--header-h) - 190px), 760px);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start;
}
.lm-stage {
  position: relative; height: var(--lm-h); overflow: hidden; border-radius: 18px;
  background: radial-gradient(120% 90% at 55% 45%, #0b1a2e 0%, #04080f 70%);
  border: 1px solid rgba(143, 208, 255, .14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 0 60px rgba(143, 208, 255, .04);
}
#lm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.lm-stage.is-svg #lm-canvas, .lm-stage.is-loading #lm-canvas { visibility: hidden; }
.lm-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lm-stage.is-svg .lm-overlay { display: none; }
.lm-loading { position: absolute; inset: 0; display: none; place-items: center; margin: 0; font-size: 14px; color: var(--sub); }
.lm-stage.is-loading .lm-loading { display: grid; }
.lm-hint { position: absolute; left: 14px; bottom: 10px; right: 14px; margin: 0; font-size: 12px; color: rgba(147, 161, 181, .85); pointer-events: none; text-shadow: 0 1px 6px #04080f; }
.lm-hint-svg, .lm-stage.is-svg .lm-hint-gl, .lm-stage.is-failed .lm-hint { display: none; }
.lm-hint-touch { display: none; }
@media (pointer: coarse) { .lm-hint-touch { display: inline; } .lm-hint-mouse { display: none; } }
.lm-failed { display: none; position: absolute; inset: 0; place-items: center; margin: 0; padding: 20px; text-align: center; font-size: 14px; color: var(--sub); }
.lm-stage.is-failed .lm-failed { display: grid; }
.lm-stage.is-failed { height: auto; min-height: 120px; }
.lm-stage.is-svg .lm-hint-svg { display: inline; }

/* 名前のラベル（点の位置に置いた 0×0 の箱から、上・中央に出す） */
.lm-label { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.lm-label[hidden] { display: none; }
.lm-label-in {
  position: absolute; left: 0; bottom: 0; transform: translateX(-50%); white-space: nowrap; text-align: center;
  padding: 6px 12px 7px; border-radius: 10px; line-height: 1.35;
  background: rgba(6, 14, 26, .82); border: 1px solid rgba(143, 208, 255, .35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4), 0 0 24px rgba(143, 208, 255, .18);
}
.lm-label-in b { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: .08em; color: #fff; }
.lm-label-in span { display: block; font-size: 12px; color: var(--glow); }
/* 記事の数のバッジ */
.lm-badge {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; will-change: transform;
  display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1;
  color: #04131a; background: linear-gradient(140deg, #8fd0ff, #5eead4); box-shadow: 0 0 14px rgba(94, 234, 212, .55);
}
.lm-badge.is-on { opacity: 0; }
.lm-inset-label { position: absolute; left: 0; top: 0; padding: 6px 8px; font-size: 11px; color: rgba(147, 161, 181, .8); white-space: nowrap; will-change: transform; }

/* WebGL が使えないときの平らな地図 */
.lm-svg { display: none; position: absolute; inset: 0; padding: 12px 12px 30px; }
.lm-stage.is-svg .lm-svg { display: block; }
.lm-svg svg { width: 100%; height: 100%; display: block; }
.lm-svg path { fill: #101e33; stroke: #5f9fcc; stroke-width: .7px; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s; }
.lm-svg path.has { fill: #1f6d8c; stroke: #8fd0ff; }
.lm-svg path:hover { fill: #3d8fb5; }
.lm-svg path.is-sel { fill: #bfeaff; stroke: #fff; }
.lm-svg-inset { fill: none; stroke: #3f6f96; stroke-width: .7px; vector-effect: non-scaling-stroke; }

/* ── 選んだ県の記事 ── */
.lm-panel {
  max-height: var(--lm-h); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 18px 20px 20px; border-radius: 18px;
  background: rgba(8, 16, 30, .55); border: 1px solid rgba(143, 208, 255, .12);
}
.lm-p-kicker { margin: 0; font-size: 12px; letter-spacing: .2em; color: var(--sub); }
.lm-p-name { margin: 2px 0 0; font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; letter-spacing: .08em; }
.lm-p-name:focus { outline: none; }
.lm-p-name:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 4px; }
.lm-p-lead { margin: 8px 0 0; font-size: 14px; color: var(--sub); }
.lm-p-count { margin: 4px 0 0; font-size: 13px; color: var(--glow); min-height: 1em; }
.lm-empty { margin: 18px 0 0; padding: 18px; font-size: 15px; text-align: center; color: var(--sub); border: 1px dashed rgba(143, 208, 255, .2); border-radius: 12px; }
.lm-cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lm-card {
  display: block; padding: 12px 14px 13px; border-radius: 12px; text-decoration: none;
  background: rgba(13, 27, 46, .7); border: 1px solid rgba(143, 208, 255, .14);
  transition: border-color .2s, background .2s, transform .2s;
}
.lm-card:hover, .lm-card:focus-visible { border-color: rgba(143, 208, 255, .5); background: rgba(20, 40, 66, .8); color: inherit; transform: translateY(-1px); }
.lm-card time { display: block; font-size: 12px; color: var(--sub); }
.lm-card-title { display: block; margin-top: 2px; font-weight: 700; font-size: 16px; line-height: 1.55; color: var(--text); }
.lm-card-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--sub); }
.lm-p-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; font-size: 13px; }
.lm-p-foot a { display: inline-flex; align-items: center; min-height: 36px; color: var(--glow); }
.lm-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }

/* ── 一覧（地方ごと） ── */
.lm-list { margin: 28px 0 0; }
.lm-list-title { margin: 0 0 8px; padding-bottom: 8px; font-family: var(--serif); font-size: 17px; letter-spacing: .1em; border-bottom: 1px solid var(--rule); }
.lm-list-title small { margin-left: 10px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--sub); }
.lm-region { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid rgba(143, 208, 255, .07); }
.lm-region h3 { margin: 0; padding-top: 7px; font-size: 13px; font-weight: 700; color: var(--sub); }
.lm-region ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.lm-region a, .lm-chips a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; text-decoration: none; color: rgba(147, 161, 181, .9);
  border: 1px solid rgba(143, 208, 255, .12); background: rgba(8, 16, 30, .4);
  transition: border-color .2s, color .2s, background .2s;
}
.lm-region a.has, .lm-chips a { color: var(--text); border-color: rgba(94, 234, 212, .4); }
.lm-region a:hover, .lm-chips a:hover { color: #fff; border-color: rgba(143, 208, 255, .7); }
.lm-region a[aria-current] { color: #04131a; background: linear-gradient(120deg, #5eead4, #8fd0ff); border-color: transparent; }
.lm-n { font-size: 12px; font-weight: 700; color: #5eead4; }
.lm-n:empty { display: none; }
.lm-region a[aria-current] .lm-n { color: #04131a; }

/* ── スマホ・狭い画面：地図が上、記事が下 ── */
@media (max-width: 860px) {
  .lm { padding: 14px 14px 40px; }
  .lm-main { grid-template-columns: 1fr; gap: 14px; }
  .lm-stage { height: min(112vw, 62svh); min-height: 340px; border-radius: 14px; }
  .lm-panel { max-height: none; overflow: visible; padding: 16px; border-radius: 14px; scroll-margin-top: calc(var(--header-h) + 8px); }
  .lm-region { grid-template-columns: 1fr; gap: 6px; }
  .lm-region h3 { padding-top: 0; }
  .lm-hint { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-card, .lm-region a, .lm-chips a, .lm-svg path { transition: none; }
  .lm-card:hover { transform: none; }
}