/* ---------- 詳細パネル ---------- */
.detail {
  position: absolute;
  top: 50%;
  right: 0;
  /* --detail-left は layoutFixed() が入れる。掴める帯の外側の端と揃えている */
  width: calc(100% - var(--detail-left, 142px));
  transform: translateY(-50%) translateX(16px);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  z-index: 4;
  pointer-events: none;
}
.detail.show {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.detail .badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: var(--line-color);
  color: #fff;
  border-radius: 10px;
  padding: 5px 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.detail .badge .code { font-size: 12px; }
.detail .badge .num { font-size: 16px; }
.detail .name {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.detail .kana {
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.detail .meta {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail .meta::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-color);
  opacity: 0.6;
}
/* ---------- 地図でみる ----------
 * カードの右下の余白から、外の地図アプリへ。
 *
 * 置き場所と大きさの決めかた（docs/駅の周辺地図を見る導線.html）:
 * ・まちの様子の中には置かない。あそこは開いた瞬間から名所が見えていてほしい
 * ・絶対配置にしてあるので、駅名パネル（top:50% の中央そろえ）を1pxも動かさない
 * ・声は小さく。10.5px・薄墨・細い枠。「回す」やのりかえより一段も二段も下
 * ・.reel の子にはしないこと。あちらは下端16%がマスクでぼけるので、そこに置くと消える
 *
 * 文言は「地図でみる」。320px端末では駅名パネルが96pxしかないが、
 * ここはパネルの外（カード基準）なので幅の心配はいらない。それでも短いままにしてある。 */
.map-btn {
  position: absolute;
  right: 28px;   /* カードの内側の余白と同じ */
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid #E7E7E2;
  border-radius: 999px;
  background: var(--card);
  font-size: 10.5px;
  letter-spacing: 0;
  /* 薄くしたいが、これ以上は薄くしないこと。ひとつ薄い #7D7D77 にすると
     白地とのコントラストが3.75:1まで落ちてWCAG AA（4.5:1）を割る。
     --muted は5.35:1。小さい字を読める濃さに戻した回（docs/文字の濃さとアクセシビリティ.md）の
     決めごとをここでも守る。目立たなさは、色ではなく大きさ・細い枠・隅の位置で作る */
  color: var(--muted);
  text-decoration: none;
  /* 駅名パネルと同じ出かた（回している間は消える） */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 7;
}
.map-btn.show { opacity: 1; pointer-events: auto; }
.map-btn:hover { background: #FCFCFA; }
.map-btn:active { transform: scale(0.96); }

/* ---------- のりかえ ----------
 * 選択中の駅の乗り換え路線をカードの下に並べる。
 * 路線が多い駅でも折り返して全部見える（横スクロール不要）。 */
.transfers {
  width: min(92vw, 440px);
  margin-top: 16px;
  text-align: center;
  transition: opacity 0.3s ease;
}
.transfers.hide { opacity: 0; pointer-events: none; }
.transfers[hidden] { display: none; }
.transfers .t-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-bottom: 8px;
}
.t-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}
.t-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--t-color);
  color: #3F3F3A;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s, transform 0.1s;
}
.t-chip:hover { background: var(--t-bg); }
.t-chip:active { transform: scale(0.95); }
.t-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-color);
}