:root{
  --bg:#fff; --bg2:#fbf7f8; --card:#fff; --line:#ecdfe3; --line2:#f3e9ec;
  --tx:#241b20; --tx2:#6f6169; --tx3:#9b8d94;
  --accent:#e8557f; --accent-w:#fdeef3; --accent-d:#c33d64;
  --shadow:0 1px 2px rgba(36,27,32,.06),0 8px 24px rgba(36,27,32,.06);
  --r:14px; --wrap:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16121a; --bg2:#1c1720; --card:#211b26; --line:#352c3c; --line2:#2a2331;
    --tx:#f2ecf1; --tx2:#b6a9b7; --tx3:#8b7d8e;
    --accent:#ff7ea2; --accent-w:#3a2230; --accent-d:#ff9ab6;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--card);padding:8px 14px;border-radius:8px}
.muted{color:var(--tx2)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:15px;height:15px}

/* hero */
.hero{background:linear-gradient(180deg,var(--accent-w),var(--bg));padding:44px 0 28px;border-bottom:1px solid var(--line2)}
.brand{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--tx2)}
.brand-mark{background:var(--accent);color:#fff;padding:2px 8px;border-radius:6px;margin-right:6px}
.hero h1{margin:0 0 6px;font-size:clamp(26px,4.4vw,40px);letter-spacing:-.02em;line-height:1.25}
.lede{margin:0 0 22px;color:var(--tx2);font-size:14.5px}
.lede b{color:var(--tx);font-variant-numeric:tabular-nums}

.searchbar{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;padding:0 16px;height:56px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-w)}
.searchbar .ic{color:var(--tx3)}
#q{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;font-size:16px;outline:none;height:100%}
#q::-webkit-search-cancel-button{display:none}
.qclear{border:0;background:var(--line2);color:var(--tx2);width:24px;height:24px;border-radius:50%;
  font-size:17px;line-height:1;cursor:pointer;flex:none}
.kbd{border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:12px;color:var(--tx3);flex:none}
@media (max-width:640px){.kbd{display:none}}

.quick{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.quick::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);
  background:var(--card);color:var(--tx2);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer}
.pill:hover{border-color:var(--accent);color:var(--tx)}
.pill-accent{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pill-accent:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff}
.pill-accent[aria-busy="true"]{opacity:.6}

/* filters */
.filters{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line2)}
.frow{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:9px 0;
  border-top:1px solid var(--line2)}
.frow:first-child{border-top:0}
.frow::-webkit-scrollbar{display:none}
.frow::before{content:attr(data-label);flex:none;font-size:11.5px;color:var(--tx3);width:62px;letter-spacing:.03em}
.chip{flex:none;border:1px solid var(--line);background:transparent;color:var(--tx2);border-radius:999px;
  padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.chip .n{color:var(--tx3);font-size:11.5px;margin-left:5px;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--accent);color:var(--tx)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip[aria-pressed="true"] .n{color:rgba(255,255,255,.8)}

/* toolbar */
.toolbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:18px;padding-bottom:12px}
.count{margin:0;font-size:14px;color:var(--tx2)}
.count b{color:var(--tx);font-size:19px;font-variant-numeric:tabular-nums;margin:0 2px}
.count .muted{margin-left:4px}
@media (max-width:640px){.brk{display:none}}
.tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.check{font-size:13px;color:var(--tx2);display:flex;align-items:center;gap:6px;cursor:pointer}
.check input{accent-color:var(--accent);width:15px;height:15px}
#sort{border:1px solid var(--line);background:var(--card);color:var(--tx);border-radius:9px;
  padding:6px 10px;font:inherit;font-size:13px}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:var(--card);color:var(--tx2);font:inherit;font-size:13px;padding:6px 14px;cursor:pointer}
.seg button.on{background:var(--accent);color:#fff;font-weight:600}

.active-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.active-chips button{border:1px solid var(--accent);background:var(--accent-w);color:var(--accent-d);
  border-radius:999px;padding:4px 10px 4px 12px;font:inherit;font-size:12.5px;cursor:pointer}

/* grid */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s}
.card a{text-decoration:none;display:flex;flex-direction:column;height:100%}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line)}
.thumb{aspect-ratio:16/9;background:var(--bg2);position:relative;overflow:hidden}
.thumb.noimg{display:flex;align-items:center;justify-content:center;color:var(--tx3);font-weight:700;font-size:15px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cbody{padding:11px 13px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.cbody p{margin:0}   /* p の既定マージン(1em)がカードを1枚87px肥大させていた */
.cloc{font-size:11.5px;color:var(--tx3);letter-spacing:.02em;line-height:1.3}
.cname{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.cname .sfx{font-size:12.5px;font-weight:500;color:var(--tx2);margin-left:2px}
.cmeta{font-size:11.5px;color:var(--tx3);display:flex;gap:6px;flex-wrap:wrap;line-height:1.4}
.cmeta .dot{color:var(--line)}
.cbody .ctitle{font-size:12.5px;color:var(--tx2);line-height:1.5;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cgo{margin-top:auto;padding-top:8px;font-size:12px;font-weight:600;color:var(--accent-d);display:flex;align-items:center;gap:4px}
.dist{font-size:11.5px;color:var(--accent-d);font-weight:600;font-variant-numeric:tabular-nums}

/* 準備中の駅は「駅名だけ」の密なチップ列で、公開済みグリッドの下にまとめる */
.soon-sec{margin-top:40px;padding-top:26px;border-top:1px solid var(--line2)}
.soon-h{margin:0;font-size:15px;letter-spacing:-.01em}
.soon-n{color:var(--tx3);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.soon-note{margin:2px 0 14px;font-size:12.5px;color:var(--tx3)}
.soon-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.soon-item{border:1px dashed var(--line);border-radius:10px;padding:6px 11px;line-height:1.35;
  background:var(--bg2);max-width:100%}
.soon-item b{display:block;font-size:13.5px;font-weight:600;color:var(--tx2)}
.soon-item b i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--tx3);margin-left:1px}
.soon-item span{display:block;font-size:10.5px;color:var(--tx3)}
.soon-item .dist{color:var(--accent-d);font-weight:600}

.sentinel{height:1px}
.empty{text-align:center;padding:64px 0;color:var(--tx2)}
.map{height:min(70vh,620px);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:8px}
.leaflet-popup-content{margin:10px 12px;font-family:inherit}
.pop{min-width:150px}
.pop b{font-size:15px}
.pop small{color:var(--tx3);display:block;margin:2px 0 7px}
.pop a{color:var(--accent-d);font-weight:700;font-size:12.5px;text-decoration:none}
.pop .soonlbl{font-size:11.5px;color:var(--tx3)}

/* 全駅索引: 利用者の一覧性と、各note記事への内部リンクを兼ねる */
.ix{margin-top:44px;border-top:1px solid var(--line2);padding-top:22px}
.ix summary{cursor:pointer;font-size:14px;font-weight:700;list-style:none;display:flex;align-items:center;gap:7px}
.ix summary::-webkit-details-marker{display:none}
.ix summary::before{content:"▸";color:var(--tx3);font-size:12px;transition:transform .15s}
.ix[open] summary::before{transform:rotate(90deg)}
/* 駅数が県ごとに1〜239と偏るので、grid ではなく段組みで自然に流し込む */
.ix-body{margin-top:20px;column-width:220px;column-gap:28px}
.ix-g{margin-bottom:20px}
.ix-g h3{margin:0 0 8px;break-after:avoid;font-size:12.5px;color:var(--tx2);display:flex;align-items:baseline;gap:6px;
  border-bottom:1px solid var(--line2);padding-bottom:5px}
.ix-g h3 em{font-style:normal;font-size:10.5px;color:var(--tx3);font-weight:400}
.ix-g ul{list-style:none;margin:0;padding:0}
.ix-g li{font-size:12.5px;line-height:1.75}
.ix-g a{color:var(--tx);text-decoration:none}
.ix-g a:hover{color:var(--accent-d);text-decoration:underline}
.ix-g .np{color:var(--tx3)}
.ix-g span{font-size:10.5px;color:var(--tx3);margin-left:5px}

.foot{margin-top:56px;padding:28px 0 48px;border-top:1px solid var(--line2);font-size:13px;color:var(--tx2)}
.foot p{margin:0 0 4px}
.foot a{color:var(--accent-d);font-weight:600}