/* mile-calculator.css */

/* コンテナ全体 */
.mile-calculator-container {
  background-color: #ffffff;
  border-radius: 0.75rem; /* 12px */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  max-width: 400px;
  margin: 0 auto;
}

/* ラベル */
.mile-calculator-container label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563; /* gray-700 */
  margin-bottom: 0.25rem;
}

/* 入力フィールドとセレクトボックス */
.mile-calculator-container input,
.mile-calculator-container select {
  width: 100%;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.375rem; /* 6px */
  padding: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s ease-in-out;
  box-sizing: border-box;
}

/* フォーカス時 */
.mile-calculator-container input:focus,
.mile-calculator-container select:focus {
  border-color: #6366f1; /* indigo-500 */
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* 計算用ボタン用（全体のボタンスタイルから分離） */
.mile-calculator-container .calc-button {
  width: 100%;
  background-color: #4f46e5; /* indigo-600 */
  color: #ffffff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* 計算用ボタンホバー */
.mile-calculator-container .calc-button:hover {
  background-color: #4338ca; /* indigo-700 */
}

/* 結果表示エリア */
.mile-calculator-result {
  background-color: #eef2ff; /* indigo-50 */
  padding: 1rem;
  border-radius: 0.375rem;
  text-align: center;
  font-weight: 600;
  color: #3730a3; /* indigo-900 */
  margin-top: 1rem;
}

/* タブナビゲーション */
.mile-calculator-container .tab-navigation {
  display: flex;
  justify-content: center; /* コンテナ内で中央揃え */
  margin-bottom: 1rem;
}

/* 各タブボタンを角丸□で囲む */
.mile-calculator-container .tab-navigation .tab-button {
  border: 1px solid #d1d5db;   /* 薄いグレーの枠線 */
  border-radius: 0.375rem;       /* 角丸（例: 6px） */
  padding: 8px 16px;
  margin: 0 5px;               /* ボタン間の余白 */
  background-color: transparent;
  font-size: 1rem;
  cursor: pointer;
  color: #4b5563;              /* デフォルトのテキストカラー */
  transition: background-color 0.2s ease-in-out;
}

/* アクティブなタブボタン */
.mile-calculator-container .tab-navigation .tab-button.active {
  background-color: #f3f4f6;    /* アクティブ時の背景色（例: 薄いグレー） */
  font-weight: bold;
  text-decoration: underline;
}