/*
================================================================================
   TABS.CSS - タブ・ナビゲーション
================================================================================
   
   役割：
   - タブ切り替えUIのスタイル管理
   - タブボタンのデザインと状態制御
   - アクティブタブの表示切り替え
   - キーボードアクセシビリティ対応
   
   対象ページ：index.html, player.html
   依存関係：base.css
   
================================================================================
*/

/* ==============================
   Tab Styles
============================== */

.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.tab-btn {
  background-color: var(--color-primary); /* CSS変数に統一 */
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-size: var(--font-md);
}

.tab-btn:hover {
  background-color: var(--color-primary-light, #004a9f);
}

/* キーボード操作の可視化 */
.tab-btn:focus-visible {
  outline: 3px solid #ffbf47; /* アクセント色 */
  outline-offset: 2px;
}

.tab-btn.active {
  background-color: var(--color-accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}