/* --- bottom-nav.css (iPhone safe, equal columns, timetable slot kept) --- */

/* 各ボタン（HTMLに合わせて .nav-item） */
.bottom-nav .nav-item{
  /* 5分割を厳密化：grow=1, shrink=0, basis=0 */
  flex: 1 0 0;
  min-width: 0;

  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;

  font-size: .75rem; font-weight: 600; line-height: 1;
  text-decoration: none;
  color: #374151; background: transparent; border: 0; padding: 1; margin: 0;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; user-select: none;
}
.bottom-nav a.nav-item:link,
.bottom-nav a.nav-item:visited{ color:#374151; }
.bottom-nav .nav-item:hover{ background:#f9fafb; }
.bottom-nav .nav-item:active{ background:#f3f4f6; }
.bottom-nav .nav-item[aria-current="page"],
.bottom-nav .nav-item.active{ color: var(--blue); }
.bottom-nav .nav-item[data-role="back"],
.bottom-nav .nav-item[data-role="forward"]{ color:#374151 !important; }
.bottom-nav .nav-item:focus-visible{
  outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 8px;
}
.bottom-nav .nav-item img{ width:24px; height:24px; display:block; }

@media (max-width:360px){
  .bottom-nav .nav-item{ font-size:.7rem; }
  .bottom-nav .nav-item img{ width:22px; height:22px; }
}
@media print{ .bottom-nav{ display:none !important; } }

/* 時刻表を“見えない＆押せないが幅は確保”に（位置固定のカギ） */
body[data-show-timetable="false"] .bottom-nav .nav-item--timetable{
  visibility: hidden;
  pointer-events: none;
}

/* （任意の見た目）無効時を少し薄くする */
.bottom-nav .nav-item[aria-disabled="true"]{ opacity: .5; }

/* 時刻表ボタンの枠は常に確保（JSの display:none を無効化） */
.bottom-nav .nav-item--timetable { display: flex !important; }

/* === normalize: どのページでも同じ高さ計算に統一 === */

/* ① ナビ本体の高さは bottom-nav-h を見る（既存より強く上書き） */
.bottom-nav{
  height: var(--bottom-nav-h, 70px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ② 下に隠れないように .wrap / .star-wrap の下余白も統一（実高さ + 余白） */
.wrap, .star-wrap{
  padding-bottom: calc(
    var(--nav-actual-h, calc(var(--bottom-nav-h, 70px) + env(safe-area-inset-bottom, 0px)))
  ) !important;
}

/* ③ ボタンを少しだけ上に（-2〜-5pxで好み調整） */
.bottom-nav .nav-item{
  transform: translateY(-3px);
}

/* ==== 強制下固定リセット ==== */
.bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
  z-index: 9999;
  margin: 0;
  padding: 0;
  background: #fff;
}

html, body {
  height: 100%;
  min-height: 100vh;
  position: relative;
}

body {
  display: flex;
  flex-direction: column;
}

/* ==== bottom-nav を必ず横一列・等分にする（最終勝ち） ==== */
.bottom-nav{
  position: fixed !important;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  display: grid !important;
  grid-auto-flow: column !important;
  /* ← 4枠運用（戻る/ホーム/時刻表席/メニュー）の場合 */
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  align-items: center !important;
}

/* 各ボタンは列いっぱいを占める */
.bottom-nav .nav-item{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 0 0 !important;
  min-width: 0 !important;
}

/* 時刻表を出さない画面でも“席”は確保（横並び崩さない） */
body[data-show-timetable="false"] .bottom-nav .nav-item--timetable{
  visibility: hidden !important;
  pointer-events: none !important;
}