Star Rating — 評価スター（レーティング）

/* === 評価スター ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-star-empty:  #D0D7E0; /* 未選択・未ホバー時の星の色 */
  --color-star-filled: #F5C518; /* 選択済み・ホバー中の星の色（金色） */
  --color-muted:       #8A9BAE; /* 「未選択」ラベルの色 */
  --color-border:      #D0D7E0; /* クリアボタンのボーダー色 */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 400px;
  margin: 0 auto;
}

.star-rating-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 星を横並びにして、コンテナへのイベント委譲でまとめて制御する */
.star-rating {
  display: flex;
  gap: 4px;
  cursor: pointer;
}

.star {
  font-size: 40px;
  color: var(--color-star-empty);
  user-select: none;
  line-height: 1;
  transition: color 0.1s;
}

/* filled: 確定済みの評価 / hover: ホバー中の仮プレビュー */
.star.filled,
.star.hover {
  color: var(--color-star-filled);
}

.star-rating-label {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
}

.star-clear-btn {
  padding: 6px 20px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, border-color 0.15s;
}

.star-clear-btn:hover:not(:disabled) {
  background: #F4F6F9;
  border-color: #9AA5B4;
}

/* 未選択時はクリアボタンを薄くして操作不能にする */
.star-clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* スマホ対応 */
@media (max-width: 480px) {
  body { padding: 16px; }
  .star { font-size: 32px; }
}

var starContainer = document.getElementById('starRating');
var stars         = document.querySelectorAll('.star');
var label         = document.getElementById('starRatingLabel');
var clearBtn      = document.getElementById('starClearBtn');

// 確定済みの評価（0 = 未選択）
var currentRating = 0;

// ホバー: その星までを金色にプレビューする（イベント委譲）
starContainer.addEventListener('mouseover', function (e) {
  var star = e.target.closest('.star');
  if (!star) return;
  updateStars(parseInt(star.dataset.value, 10), true);
});

// ホバー解除: 確定済み評価の表示に戻す
starContainer.addEventListener('mouseleave', function () {
  updateStars(currentRating, false);
});

// クリック: 評価を確定して currentRating に保存する
starContainer.addEventListener('click', function (e) {
  var star = e.target.closest('.star');
  if (!star) return;
  currentRating = parseInt(star.dataset.value, 10);
  updateStars(currentRating, false);
  // textContent で評価ラベルを更新する（innerHTML は使わない）
  label.textContent = currentRating + '点を選択中';
  clearBtn.disabled = false;
});

// クリアボタンはリセットと同じ処理
clearBtn.addEventListener('click', resetRating);

// 全星のクラスを更新する共通関数
function updateStars(value, isHover) {
  stars.forEach(function (star) {
    var starValue = parseInt(star.dataset.value, 10);
    star.classList.remove('filled', 'hover');
    if (starValue <= value) {
      star.classList.add(isHover ? 'hover' : 'filled');
    }
  });
}

function resetRating() {
  currentRating = 0;
  updateStars(0, false);
  label.textContent = '未選択';
  clearBtn.disabled = true;
}

// ページのリセットボタン（demo-controls）からも呼べるようにする
function resetDemo() {
  resetRating();
}