/* ==========================================================================
   【基幹定義：ボトムナビゲーション本体】
   ========================================================================== */
/* --- ボトムナビの土台（外枠） --- */
.bottom-nav {
  position: fixed; 
  bottom: 0;
  left: 0; 
  
  /* 100vw で実機は完璧に動きます。シミュレーターのズレは無視してOK */
  width: 100vw !important; 
  
  z-index: 10000 !important;
  background-color: #ffffff !important; 
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  
  /* ボタンを横に5つ並べる設定 */
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;

  height: var(--nav-base-h, 70px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- コンテンツ領域の余白規定 --- */
.wrap, .starf-wrap, .star-wrap, .junkan-main {
  padding-bottom: 130px !important; 
}

/* --- ボトムナビの中の各ボタン --- */
.bottom-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  font-size: .75rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;

  /* スマホ用のリセット設定（全部残してください） */
  background: transparent !important;       
  border: none !important;                
  outline: none !important;               
  -webkit-tap-highlight-color: transparent; 
  appearance: none;                       
  box-shadow: none !important;            
  
  transition: opacity 0.2s; 
}

.bottom-nav .nav-item img { 
  width: 24px; 
  height: 24px; 
  display: block; 
}

/* --- 【修正】履歴なし（無効状態）の定義 --- */
.bottom-nav .nav-item[aria-disabled="true"] {
  opacity: 0.3 !important; 
  filter: grayscale(1);    
}

/* 時刻表ボタンの非表示制御 */
body[data-show-timetable="false"] .bottom-nav .nav-item--timetable {
  visibility: hidden !important;
  pointer-events: none !important;
}