/* ---------- フッター ---------- */
.footer-links {
  margin-top: 24px;
  /* 「更新履歴」「お知らせを受け取る」は横に並べず、1行ずつ縦に積む。
     間隔は「駅ルーレットとは」以下の各項目（margin-top: 24px）と同じにそろえる */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* 右下のダーツボタンと重ならないよう、横に余白をとる */
  padding: 0 64px;
}
/* 更新のお知らせを既読後も見返せる入口 */
.history-link {
  border: none;
  background: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #DDDDD6;
}
.history-link:hover { color: #4F4F4B; }
/* 通知ボタンを押したあとの短い返事（js/push.js）。
   拒否されているときの手順もここに出るので、読める濃さ（--muted）にしておく */
.push-note {
  margin: 8px auto 0;
  width: min(92vw, 360px);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* 駅データ.jp のクレジット（規約上は任意だが歓迎とのことなので表記） */
.credit {
  margin-top: 24px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.credit a { color: var(--muted); }
/* ---------- 「駅ルーレットとは」（検索エンジン向けの本文） ----------
   アプリ本体はJSで描くので、クローラーが読めるテキストが実質ゼロだった。
   ここに説明を実HTMLで置く。畳んであっても中身はHTMLに入るのでクロールされる。
   hidden や display:none で隠すと評価されないので、details で畳むのが要点。 */
.about {
  margin-top: 24px;
  width: min(92vw, 440px);
  font-size: 12px;
  line-height: 1.85;
  color: var(--muted);
  text-align: left;
}
/* 開いたとき、最後の行が右下のダーツボタン（position:fixed）の下に
   隠れたまま読めなくなるので、スクロールで抜けられる分の余白を足す */
.about[open] { padding-bottom: 64px; }
.about > summary {
  list-style: none;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--faint);
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #DDDDD6;
}
.about > summary::-webkit-details-marker { display: none; }
.about > summary:hover { color: #4F4F4B; }
.about h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 14px 0 2px;
}
.about p { margin: 0; }
.about ol { margin: 0; padding-left: 1.3em; }
/* ---------- 電車くんのプロフィール ----------
   「駅ルーレットとは」の隣に置く、もうひとつの details（.about の見た目を借りる）。
   絵は共有パーツを <use> で写すだけなので、帯・窓の色は css/train.css の指定が
   そのまま効き、この子もいま選んでいる路線の色を着ている。
   輪郭は 3 のままでよい（92px なら共有カードの子の 7×38px とほぼ同じ太さになる） */
.tk-profile .tk-portrait { width: 92px; margin: 12px auto 2px; }
.tk-profile .tk-portrait svg { width: 100%; height: auto; display: block; }
.tk-facts {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 6px 10px;
}
.tk-facts dt { color: var(--faint); letter-spacing: 0.08em; }
.tk-facts dd { margin: 0; }
/* ---------- 開発秘話 ----------
   別ページへのリンク。「駅ルーレットとは」「電車くんのプロフィール」の summary と
   同じ見た目・同じ間隔で、3つ目の見出しとして並べる（畳む中身が無いので <a> のまま） */
.about-link {
  display: block;
  margin-top: 24px;
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #DDDDD6;
}
.about-link:hover { color: #4F4F4B; }
/* ---------- Built with Claude ----------
   ページの締めの一行。ヘッダーの英字（header .en）と同じ「小さく・薄く・字間を広く」で
   そろえてある。右下のダーツボタン（position:fixed）と重ならないよう、
   .footer-links と同じ考えで横に余白をとって文字を内側に寄せる */
.made-with {
  margin: 24px auto 0;
  width: min(92vw, 420px);
  padding: 0 64px;
  text-align: center;
}
/* 8方向の光。左右に細いけい線を伸ばして、締めのしるしに見せる */
.made-with .mw-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #D97757;
}
.made-with .mw-mark::before,
.made-with .mw-mark::after {
  content: "";
  height: 1px;
  width: 30px;
  background: #E2E2DB;
}
.made-with .mw-mark svg {
  width: 11px;
  height: 11px;
  display: block;
  opacity: 0.9;
  transition: transform 0.5s ease;
}
.made-with:hover .mw-mark svg { transform: rotate(45deg); }
.made-with .mw-en {
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  /* 字間のぶん右にずれて見えるので、最後の1文字分を戻して中央にそろえる */
  text-indent: 0.28em;
}
.made-with .mw-en a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #E0C4B6;
}
.made-with .mw-en a:hover { color: #B4603F; text-decoration-color: #D97757; }
.made-with .mw-ja {
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #9A9A94;
}
/* 動きを減らす設定のときは、しるしを回さない */
@media (prefers-reduced-motion: reduce) {
  .made-with .mw-mark svg { transition: none; }
  .made-with:hover .mw-mark svg { transform: none; }
}