セグメント選択

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「セグメント選択」の効果を追加してください。

# 追加してほしい効果
セグメント選択（フォーム & 入力）
ラジオボタンをピル型のセグメントに置き換えたUI。選択に応じてインジケータが滑らかにスライドし、キーボード操作にも対応します。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<div class="stage">
  <div class="sc-card">
    <p class="sc-label" id="sc-label">表示モード</p>

    <div class="sc-segmented" role="radiogroup" aria-labelledby="sc-label" id="sc-segmented">
      <span class="sc-thumb" aria-hidden="true"></span>
      <button type="button" class="sc-option" role="radio" aria-checked="true" tabindex="0" data-value="daily" id="sc-opt-0">日次</button>
      <button type="button" class="sc-option" role="radio" aria-checked="false" tabindex="-1" data-value="weekly" id="sc-opt-1">週次</button>
      <button type="button" class="sc-option" role="radio" aria-checked="false" tabindex="-1" data-value="monthly" id="sc-opt-2">月次</button>
    </div>

    <p class="sc-status" id="sc-status" role="status">現在の表示：日次</p>
  </div>
</div>

【CSS】
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  /* 上品なバイオレット系グラデ背景 */
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #e0e7ff 100%);
  color: #1f2937;
}

.stage { width: 100%; display: grid; place-items: center; }

.sc-card {
  width: min(340px, 92vw);
  padding: 30px 26px 26px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 56px -26px rgba(76, 29, 149, 0.28);
  text-align: center;
}

.sc-label {
  margin: 0 0 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #4c1d95;
}

.sc-segmented {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: #ede9fe;
  border-radius: 999px;
}

.sc-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 0;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(76, 29, 149, 0.45);
  transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1), width 0.28s cubic-bezier(0.65, 0, 0.35, 1);
}

.sc-option {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  color: #6d5a94;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.sc-option[aria-checked="true"] { color: #5b21b6; }
.sc-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
}

.sc-status {
  margin: 16px 0 0;
  font-size: 0.78rem;
  color: #8577a3;
}

@media (prefers-reduced-motion: reduce) {
  .sc-thumb, .sc-option { transition: none; }
}

【JavaScript】
// セグメント選択：role=radiogroup のロービングタブインデックス実装
(function () {
  var group = document.getElementById("sc-segmented");
  var thumb = group ? group.querySelector(".sc-thumb") : null;
  var status = document.getElementById("sc-status");
  if (!group || !thumb || !status) return;

  var options = Array.prototype.slice.call(group.querySelectorAll(".sc-option"));
  if (!options.length) return;

  var labels = {};
  options.forEach(function (opt) { labels[opt.dataset.value] = opt.textContent; });

  var activeIndex = options.findIndex(function (opt) {
    return opt.getAttribute("aria-checked") === "true";
  });
  if (activeIndex < 0) activeIndex = 0;

  function moveThumb() {
    var current = options[activeIndex];
    if (!current) return;
    thumb.style.width = current.offsetWidth + "px";
    thumb.style.transform = "translateX(" + current.offsetLeft + "px)";
  }

  function select(index, focusIt) {
    activeIndex = index;
    options.forEach(function (opt, i) {
      var isActive = i === index;
      opt.setAttribute("aria-checked", isActive ? "true" : "false");
      opt.tabIndex = isActive ? 0 : -1;
    });
    moveThumb();
    var opt = options[index];
    if (opt) status.textContent = "現在の表示：" + (labels[opt.dataset.value] || opt.textContent);
    if (focusIt && opt) opt.focus();
  }

  options.forEach(function (opt, index) {
    opt.addEventListener("click", function () { select(index, false); });
  });

  group.addEventListener("keydown", function (e) {
    var key = e.key;
    if (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" &&
        key !== "Home" && key !== "End") return;
    e.preventDefault();
    var next = activeIndex;
    if (key === "ArrowRight" || key === "ArrowDown") next = (activeIndex + 1) % options.length;
    else if (key === "ArrowLeft" || key === "ArrowUp") next = (activeIndex - 1 + options.length) % options.length;
    else if (key === "Home") next = 0;
    else if (key === "End") next = options.length - 1;
    select(next, true);
  });

  // 初期位置とリサイズ時の再計測
  moveThumb();
  window.addEventListener("resize", moveThumb);
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。