ゼブラ＋ホバー

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「ゼブラ＋ホバー」の効果を追加してください。

# 追加してほしい効果
ゼブラ＋ホバー（カード & テーブル）
在庫リスト向けの縞模様テーブル。行ホバーで色が変わり、チェックボックスで行を選択すると背景色が変化して、選んだ商品がひと目で分かります。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ゼブラ+ホバーテーブル: 交互背景と行ホバー、チェックボックスでの行選択 -->
<section class="tb2-wrap">
  <div class="tb2-card">
    <header class="tb2-head">
      <h2 class="tb2-title">在庫一覧</h2>
      <p class="tb2-summary" data-summary>0件選択中</p>
    </header>
    <div class="tb2-scroll">
      <table class="tb2-table">
        <caption class="sr-only">商品ごとの在庫数と単価。チェックボックスで行を選択できます</caption>
        <thead>
          <tr>
            <th scope="col" class="tb2-check">
              <input type="checkbox" class="tb2-checkbox" data-check-all aria-label="すべての行を選択">
            </th>
            <th scope="col">商品名</th>
            <th scope="col">カテゴリ</th>
            <th scope="col" class="tb2-num">在庫数</th>
            <th scope="col" class="tb2-num">単価</th>
          </tr>
        </thead>
        <tbody data-rows>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="ワイヤレスイヤホンを選択"></td>
            <th scope="row">ワイヤレスイヤホン</th>
            <td>オーディオ</td>
            <td class="tb2-num">128</td>
            <td class="tb2-num">¥8,900</td>
          </tr>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="折りたたみ傘を選択"></td>
            <th scope="row">折りたたみ傘</th>
            <td>生活雑貨</td>
            <td class="tb2-num">342</td>
            <td class="tb2-num">¥1,200</td>
          </tr>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="ステンレスボトルを選択"></td>
            <th scope="row">ステンレスボトル</th>
            <td>キッチン</td>
            <td class="tb2-num">76</td>
            <td class="tb2-num">¥2,400</td>
          </tr>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="USB-Cケーブル 1mを選択"></td>
            <th scope="row">USB-Cケーブル 1m</th>
            <td>家電アクセサリ</td>
            <td class="tb2-num">512</td>
            <td class="tb2-num">¥780</td>
          </tr>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="アロマディフューザーを選択"></td>
            <th scope="row">アロマディフューザー</th>
            <td>インテリア</td>
            <td class="tb2-num">54</td>
            <td class="tb2-num">¥4,600</td>
          </tr>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="レザー手帳カバーを選択"></td>
            <th scope="row">レザー手帳カバー</th>
            <td>文具</td>
            <td class="tb2-num">210</td>
            <td class="tb2-num">¥3,200</td>
          </tr>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="モバイルバッテリーを選択"></td>
            <th scope="row">モバイルバッテリー</th>
            <td>家電アクセサリ</td>
            <td class="tb2-num">89</td>
            <td class="tb2-num">¥3,980</td>
          </tr>
          <tr>
            <td class="tb2-check"><input type="checkbox" class="tb2-checkbox" data-check-row aria-label="ヨガマットを選択"></td>
            <th scope="row">ヨガマット</th>
            <td>スポーツ用品</td>
            <td class="tb2-num">133</td>
            <td class="tb2-num">¥2,980</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

【CSS】
/* ゼブラ+ホバーテーブル: 交互背景・行ホバー・チェックボックス選択のハイライト */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, sans-serif;
  background: linear-gradient(160deg, #f8f9fc 0%, #eef0f7 100%);
  color: #1c2033;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.tb2-wrap { width: 100%; display: grid; place-items: center; }
.tb2-card {
  width: min(760px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(24, 28, 55, .10), 0 2px 8px rgba(24, 28, 55, .04);
  overflow: hidden;
}
.tb2-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid #eef0f6;
}
.tb2-title { margin: 0; font-size: 17px; font-weight: 800; }
.tb2-summary {
  margin: 0; font-size: 12.5px; font-weight: 700; color: #5b52e0;
  background: rgba(99, 102, 241, .1); padding: 5px 12px; border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}

.tb2-scroll { width: 100%; overflow-x: auto; }
.tb2-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13.5px; }

.tb2-table thead th {
  text-align: left; padding: 12px 20px; background: #f5f6fb; color: #6d7488;
  font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid #eef0f6; white-space: nowrap;
}
.tb2-table thead th.tb2-num { text-align: right; }
.tb2-table thead th.tb2-check { width: 44px; }

.tb2-table tbody th, .tb2-table tbody td {
  padding: 12px 20px; border-bottom: 1px solid #f1f2f8; white-space: nowrap;
  font-weight: 400; text-align: left;
}
.tb2-table tbody th { font-weight: 600; color: #1c2033; }
.tb2-table tbody tr:last-child th, .tb2-table tbody tr:last-child td { border-bottom: none; }

.tb2-num { text-align: right; font-variant-numeric: tabular-nums; }

.tb2-table tbody tr:nth-child(even) { background: #f9fafc; }
.tb2-table tbody tr:hover { background: #f0f2fd; }
.tb2-table tbody tr.is-selected { background: #e7e9fd; }
.tb2-table tbody tr.is-selected:hover { background: #dde0fb; }

.tb2-checkbox { width: 16px; height: 16px; accent-color: #6d5ef0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .tb2-summary { transition: none; } }

【JavaScript】
// ゼブラ+ホバーテーブル: チェックボックスで行選択のハイライトと件数表示を同期する
(() => {
  const table = document.querySelector('.tb2-table');
  if (!table) return;
  const checkAll = table.querySelector('[data-check-all]');
  const rowChecks = Array.from(table.querySelectorAll('[data-check-row]'));
  const summary = document.querySelector('[data-summary]');
  if (!rowChecks.length) return;

  function updateRow(cb) {
    const row = cb.closest('tr');
    if (row) row.classList.toggle('is-selected', cb.checked);
  }

  function updateSummary() {
    const n = rowChecks.filter((cb) => cb.checked).length;
    if (summary) summary.textContent = `${n}件選択中`;
    if (checkAll) {
      checkAll.checked = n > 0 && n === rowChecks.length;
      checkAll.indeterminate = n > 0 && n < rowChecks.length;
    }
  }

  rowChecks.forEach((cb) => {
    cb.addEventListener('change', () => { updateRow(cb); updateSummary(); });
  });

  if (checkAll) {
    checkAll.addEventListener('change', () => {
      rowChecks.forEach((cb) => { cb.checked = checkAll.checked; updateRow(cb); });
      updateSummary();
    });
  }

  updateSummary();
})();

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

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