プログレスバー（容量・残量表示）

/* ===== CSS変数（色の調整はここで）===== */
:root {
  --um-color-normal:  #2B7FE8;  /* 青：0〜74% */
  --um-color-warning: #F59E0B;  /* 黄：75〜89% */
  --um-color-danger:  #EF4444;  /* 赤：90%以上 */
  --um-track-bg:      #E8EDF2;
  --um-text:          #1A2332;
  --um-text-muted:    #5A6A7A;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; padding: 32px 24px; background: #F4F6F9; }

/* ===== 使用量メーター ===== */
.usage-meter {
  background: #fff;
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #E8EDF2;
  max-width: 440px;
}

.usage-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.usage-meter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--um-text);
}

.usage-meter-percent {
  font-size: 15px;
  font-weight: 700;
  color: var(--um-color-normal);
  transition: color 0.2s ease;
}

.usage-meter-bar-wrap {
  height: 8px;
  background: var(--um-track-bg);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}

.usage-meter-bar {
  height: 100%;
  background: var(--um-color-normal);
  border-radius: 99px;
  transition: width 0.2s ease, background 0.2s ease;
}

.usage-meter-detail {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--um-text-muted);
}

/* 警告状態（75〜89%） */
.usage-meter.is-warning .usage-meter-bar     { background: var(--um-color-warning); }
.usage-meter.is-warning .usage-meter-percent { color: var(--um-color-warning); }

/* 危険状態（90%以上） */
.usage-meter.is-danger .usage-meter-bar     { background: var(--um-color-danger); }
.usage-meter.is-danger .usage-meter-percent { color: var(--um-color-danger); }

/* ===== デモ用スライダー ===== */
.usage-slider-wrap {
  margin-top: 20px;
  max-width: 440px;
}

.usage-slider-label {
  display: block;
  font-size: 13px;
  color: var(--um-text-muted);
  margin-bottom: 8px;
}

.usage-slider {
  width: 100%;
  cursor: pointer;
}

var TOTAL_GB          = 5.0;  // 上限容量（GB）
var INIT_GB           = 3.2;  // 初期使用量（GB）
var THRESHOLD_WARNING = 75;   // 警告閾値（%）
var THRESHOLD_DANGER  = 90;   // 危険閾値（%）

var meterEl     = document.querySelector('.usage-meter');
var barEl       = document.getElementById('usageBar');
var percentEl   = document.getElementById('usagePercent');
var usedEl      = document.getElementById('usageUsed');
var remainEl    = document.getElementById('usageRemain');
var sliderEl    = document.getElementById('usageSlider');
var sliderValEl = document.getElementById('sliderVal');

// メーターの表示をまとめて更新する
function updateMeter(usedGb) {
  var percent  = Math.round(usedGb / TOTAL_GB * 100);
  var remainGb = (TOTAL_GB - usedGb).toFixed(1);

  // バー幅とパーセント表示を更新
  barEl.style.width     = percent + '%';
  percentEl.textContent = percent + '%';

  // 使用量・残量テキストを更新（textContent で安全に代入）
  usedEl.textContent   = usedGb.toFixed(1) + ' GB 使用中';
  remainEl.textContent = '残り ' + remainGb + ' GB / ' + TOTAL_GB.toFixed(1) + ' GB';

  // アクセシビリティ属性を更新
  var barWrap = barEl.parentElement;
  barWrap.setAttribute('aria-valuenow', percent);
  barWrap.setAttribute('aria-label', 'ストレージ使用量 ' + percent + '%');

  // 閾値に応じて色クラスを付け替える
  meterEl.classList.remove('is-warning', 'is-danger');
  if (percent >= THRESHOLD_DANGER) {
    meterEl.classList.add('is-danger');
  } else if (percent >= THRESHOLD_WARNING) {
    meterEl.classList.add('is-warning');
  }
}

// スライダー操作でリアルタイム更新
sliderEl.addEventListener('input', function() {
  var usedGb = parseFloat(this.value);
  sliderValEl.textContent = usedGb.toFixed(1);
  updateMeter(usedGb);
});

// 初期状態に戻す（リセットボタンからも呼ばれる）
function resetDemo() {
  sliderEl.value          = INIT_GB;
  sliderValEl.textContent = INIT_GB.toFixed(1);
  updateMeter(INIT_GB);
}

// 初期化
resetDemo();