/* ---------- この駅、何がある？（実験中・3案を切り替えて比べる） ----------
 * Wikipedia の座標検索で駅の周りにある記事を出す。いまは実行時に取りに行っているが、
 * 見せ方が決まったら web/tools/nearby.mjs で nearby.js に焼いてオフラインでも出す。
 * 見た目は3案とも同じ部品（.nb-list）を使い、置き場所だけを変えている。 */
.nearby {
  width: min(92vw, 440px);
  margin-top: 18px;
  transition: opacity 0.3s ease;
}
.nearby[hidden] { display: none; }
.nearby.hide { opacity: 0; pointer-events: none; }
.nb-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-bottom: 8px;
  text-align: center;
}
/* 案2・案3のきっかけになるボタン */
.nb-open {
  width: 100%;
  padding: 12px 16px;
  border-radius: 15px;
  background: #fff;
  border: 1.5px solid #E7E7E1;
  color: #5D5D57;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, transform 0.1s;
}
.nb-open:hover { background: #FCFCFA; }
.nb-open:active { transform: scale(0.98); }
.nb-open[hidden] { display: none; }
.nb-list { display: flex; flex-direction: column; gap: 1px; }
.nb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 13px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
  transition: background 0.15s;
}
.nb-item:hover { background: #fff; }
.nb-emoji { font-size: 16px; width: 22px; text-align: center; flex: none; }
/* 記事の写真。写真が無い記事もあるし、届くのも遅れるので、
 * 絵文字も同じ46pxの枠に入れて行の高さを揃える（差し替わってもガタつかない） */
.nb-list .nb-item { padding: 7px 13px 7px 7px; gap: 12px; }
.nb-list .nb-emoji {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: #F1F1EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.nb-thumb {
  width: 46px; height: 46px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
  background: #F1F1EB;
}
.nb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 人気施設の別枠（spots.csv 由来）。同じ行の形で、ほんのり色を敷いて先頭に置く */
.nb-spot { background: #FBF6EA; }
.nb-spot:hover { background: #F7EFDC; }
.nb-hot { font-size: 12px; flex: none; }
.nb-dist {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
  letter-spacing: 0.02em;
}
.nb-empty {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  padding: 6px 0 2px;
}
/* 近くの名所が見つからなかった駅（8,783駅のうち884駅）。欄ごと消すと
   「なにも出ない壊れた画面」に見えるので、ここでひと言だけ引き受ける。
   宿とごはんは座標から全国どこでも引けるので、この下にそのまま続く。 */
.nb-none { text-align: center; padding: 4px 6px 2px; }
.nb-none-lead {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #5D5D57;
}
.nb-none-sub {
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--muted);
  margin-top: 7px;
}
.nb-none-map {
  display: inline-block;
  margin-top: 11px;
  padding: 5px 15px;
  border: 1px solid #E2E2DA;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  color: #5D5D57;
  text-decoration: none;
}
.nb-none-map:hover { background: #FCFCFA; }
/* 旅行アフィリエイトの置き場。景表法（ステマ規制）で広告表記は必須なので
 * お店・宿の行に差し替えるときも 〔PR〕 は必ず残すこと。 */
.nb-ads { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EDEDE7; display: flex; flex-direction: column; gap: 1px; }
/* 「#アフィリエイト広告」の断り書き（nbAdMark）。成果報酬の行が届いた駅にだけ出る。
   ASPの注意事項に「目立たない表示になっていないか」とあるので、〔PR〕バッジの --faint より
   1段濃い --muted・11px で置く。見出し（10px）よりわずかに大きいのは、
   ここが枠全体にかかる断りで、ごはん・宿の札より先に読まれる側だから */
.nb-ad-mark {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 0 13px 8px;
}
/* ごはん・宿の小さな見出し。お店や宿が3件届いたときだけ出る（留守番の1行には付かない）。
   目立たせず、ごはんとホテルが続き物に見えない程度の区切りだけを引き受ける */
.nb-ads-head {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  padding: 1px 13px 3px;
}
/* 見出しの右に「↻ ほかも見る」が同居する行（母集団が4件以上ある駅だけ）。
   下の余白を 3px → 7px にしているのは、引き直しの当たり判定を下へ伸ばす場所を
   作るため。見出しのすぐ下は1件目のリンクなので、被らせると店の行のタップを
   盗ってしまう。この4px×2で広告枠は8px伸びる（案Bの全幅ボタン2本は95px）。
   ボタンの無い駅では今までどおりの3pxのまま */
.nb-ads-head.with-re {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
}
.nb-re {
  position: relative;                /* 指の当たりを外へ広げるため */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  /* 「近くでごはん」「近くに泊まる」と同じ10px。いちど11pxにしたが、見出しより
     大きい字が右端に立つのが気になったので戻した（2026-08-12）。小さすぎたのは
     字ではなく ↻ のほうだったので、直したのは .ic だけでよかった */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  /* これが無いと ↻ で見出しの行が伸びる。字の大きさは変えていないのに
     行だけ変わるので気づきにくい。見出し2つで枠が5px伸びていた */
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
/* 見た目は10pxのまま、指が当たる範囲だけ 91 × 34px にする。
   上へ12px伸ばせるのは、そこが「まちの様子」との境目の余白だから。
   下は -9px で打ち止め——1件目のリンクが10px下にいる（実測 2026-08-12） */
.nb-re::before { content: ""; position: absolute; inset: -12px -10px -9px -14px; }
.nb-re:hover { color: #7D7D77; }
/* ↻ だけは字より2px大きく。11pxでは巻き線が細くて「b」に見えた */
.nb-re .ic { font-size: 13px; line-height: 1; letter-spacing: 0; display: inline-block; }
/* 押した手応え。通信していないので、回り続けるぐるぐるにはしない——ひと回りで止める */
.nb-re.spun .ic { animation: nbSpin 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes nbSpin { to { transform: rotate(360deg); } }
/* 引き直した行。高さは変わらないので、下の宿はずれず、中身だけが入れ替わる */
.nb-swap { animation: nbSwap 0.22s ease-out; }
@keyframes nbSwap { from { opacity: 0.35; } }
/* 動きを控えたい人には、回らず・ふわつかず、中身だけが静かに入れ替わる。
   引き直したことは3件そのものが変わることで伝わるので、動きは無くても困らない
   （電車くんの渦巻き目と同じ扱い。train.css の同じ指定と対にしてある） */
@media (prefers-reduced-motion: reduce) {
  .nb-re.spun .ic, .nb-swap { animation: none; }
}
/* ごはんと宿のあいだの区切り線（宿の見出しとセットで rkFill が入れる）。
   いちどは内寄せ（左右13px）にして「外の境目より弱い仕切り」を表そうとしたが、
   実機で見ると長さの違う線が2本あること自体が引っかかったので、
   .nb-ads の上端の線と同じ全幅に揃えた（2026-08-11）。線は1種類だけにする */
.nb-rule { height: 1px; background: #EDEDE7; margin: 12px 0 11px; }
/* 見出し＋3件を入れる箱。引き直し（nbFillGroup）が中の行だけを入れ替えられるように
   1枚かぶせてある。.nb-ads の gap: 1px は箱の中まで届かないので、ここでも同じだけ空ける */
.nb-grp { display: flex; flex-direction: column; gap: 1px; }
/* ごはんは見つかったが宿は無い駅では、見出しつきの3件の下に見出しなしの留守番が続く。
   そのままだと上のブロックの4件目に見えるので、ここも同じだけ間をあける。
   隣り合うのは .rk-hotel ではなく箱（.nb-grp）——3件を箱に入れた日に、
   .rk-hotel + .rk-slot では当たらなくなった（2026-08-12） */
.nb-grp + .rk-slot, .nb-grp + .hp-slot { margin-top: 12px; }
/* 楽天トラベルのホテル行。写真つきの2行（名前／★・料金・距離） */
.rk-hotel { padding: 7px 13px 7px 7px; gap: 12px; }
/* 写真が無いホテルの絵文字も46px枠に入れて、写真つきの行と高さ・位置を揃える */
.rk-hotel .nb-emoji {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: #F1F1EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.rk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-sub {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-pr {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--faint);
  border: 1px solid #E2E2DA;
  border-radius: 5px;
  padding: 1px 4px;
  flex: none;
}
/* ---------- ジャンルの札（2026-09-07、docs/ごはんをジャンルで探す.html 案A） ----------
   「近くでごはん」の見出しの下に、横に流れる1行。肌は「🗺 地図でこのあたりを見る」
   （.nb-none-map）と同じ白＋薄い枝で、選択中だけ路線色を敷く——アプリが持つ色は路線色
   ひとつなので、新しい色は足さない。枠が伸びるのはこの1行ぶん（37px）だけ。
   375pxでは4枚が見えて5枚目が途中で切れる。切れている札があることがそのまま
   「横に流れる」の合図なので、矢印などは足さない */
.nb-chips {
  display: flex;
  gap: 6px;
  padding: 2px 13px 9px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nb-chips::-webkit-scrollbar { display: none; }
.nb-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid #E2E2DA;
  background: #fff;
  color: #5D5D57;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.nb-chip .em { font-size: 12px; }
/* 選択中。--line-color / --chip-bg は applyTheme()（core.js）が路線ごとに入れる */
.nb-chip.on {
  border-color: var(--line-color);
  background: var(--chip-bg, #F1F1EB);
  color: var(--ink);
  font-weight: 700;
}
/* ご当地の札。その土地の駅だけに出るので、枝を点線にして「ここにしか無い札」だと分かるようにする */
.nb-chip.local { border-style: dashed; }
.nb-chip.local.on { border-style: solid; }
/* ジャンルで絞って0件の駅の受け皿。名所ゼロの .nb-none と同じ肌 */
.nb-genre-none { text-align: center; padding: 6px 6px 4px; }
.nb-genre-none .lead { font-size: 12.5px; color: #5D5D57; line-height: 1.7; }
.nb-genre-none .sub { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.7; }
/* 母集団が5件以下のジャンルでは「↻ ほかも見る」を隠す（nbFillGroup の setRe）。
   .nb-re は display を明示しているので、hidden 属性だけでは消えない */
.nb-re[hidden] { display: none; }
/* 案3の下からせり上がるパネル */
.nb-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(28, 28, 26, 0.42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.nb-panel[hidden] { display: none; }
.nb-panel.show { opacity: 1; }
.nb-sheet {
  width: min(100vw, 460px);
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(22px);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.nb-panel.show .nb-sheet { transform: translateY(0); }
.nb-sheet .nb-head { text-align: center; margin-bottom: 16px; }
.nb-sheet .nb-st { font-size: 22px; font-weight: 800; color: var(--ink); }
.nb-sheet .nb-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.2em; margin-top: 4px; }
.nb-close {
  margin-top: 14px;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: #EDEDE7;
  color: #5D5D57;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
/* 3案の切り替えバー。比べ終わったら NEARBY_LAB ごと消す */
.nb-lab {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: #1C1C1A;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.nb-lab[hidden] { display: none; }
.nb-lab button {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #55554E;
  background: transparent;
  color: #C9C9C2;
  cursor: pointer;
}
.nb-lab button.on { background: #fff; color: #1C1C1A; border-color: #fff; }