/* ==========================================================
   固定費削減シミュレーター - スタイルシート
   優しいコーラルピンク × ピーチベージュのトーン
   ========================================================== */

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

/* ---------------- タブナビゲーション ---------------- */
.tab-nav-btn {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  color: #5B3A3A;
  background: transparent;
  transition: all 0.2s ease;
}
.tab-nav-btn:hover {
  background: #FFE9E4;
}
.tab-nav-btn.is-active {
  background: #F4694F;
  color: #fff;
  box-shadow: 0 2px 8px rgba(244, 105, 79, 0.35);
}

@media (min-width: 640px) {
  .tab-nav-btn {
    font-size: 0.9rem;
    padding: 0.55rem 1.2rem;
  }
}

/* ---------------- レンジスライダー ---------------- */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #FFD1C7, #FFE3B8);
  outline: none;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F4694F;
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(225, 79, 59, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.range-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F4694F;
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(225, 79, 59, 0.5);
  cursor: pointer;
}

.range-slider::-moz-range-track {
  height: 10px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #FFD1C7, #FFE3B8);
}

/* ---------------- データ利用量ボタン ---------------- */
.data-type-btn {
  border: 2px solid #FFE3B8;
  background: #FFFBF4;
  border-radius: 1rem;
  padding: 0.7rem 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5B3A3A;
  transition: all 0.2s ease;
  line-height: 1.4;
}
.data-type-btn:hover {
  border-color: #FF8B76;
}
.data-type-btn.is-active {
  background: linear-gradient(135deg, #F4694F, #E14F3B);
  border-color: #E14F3B;
  color: #fff;
  box-shadow: 0 4px 12px rgba(225, 79, 59, 0.35);
  transform: translateY(-2px);
}

@media (min-width: 640px) {
  .data-type-btn {
    font-size: 0.85rem;
    padding: 1rem 0.5rem;
  }
}

/* ---------------- タブパネル切り替え ---------------- */
.tab-panel {
  scroll-margin-top: 90px;
}

/* モバイルではタブ切替、デスクトップは常に両方表示してスクロールで見せる */
@media (max-width: 767px) {
  body.tabs-mode .tab-panel[data-hidden="true"] {
    display: none;
  }
}

/* ---------------- 数字アニメーション ---------------- */
#annual-save-display,
#monthly-save-display {
  transition: all 0.15s ease;
}

/* ---------------- CTAバー分だけ余白確保 ---------------- */
main {
  padding-bottom: 6.5rem;
}

/* ---------------- details の矢印を綺麗に ---------------- */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] summary i.fa-qrcode {
  color: #E14F3B;
}

/* ---------------- スクロールバー(任意の見た目調整) ---------------- */
#share-url-output {
  font-family: monospace;
}