トグルスイッチ（オン/オフ制御）

/* === トグルスイッチ パターン集 ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-accent:  #2B7FE8; /* オン時の色・ボタン色 */
  --color-text:    #1A2332; /* メインテキスト色 */
  --color-muted:   #9AA5B4; /* プレースホルダー等の薄い文字色 */
  --color-border:  #D0D7E0; /* 通常時のボーダー色 */
  --color-bg:      #F4F6F9; /* カード背景色 */
}

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

/* 各パターンを囲むカード */
.tg-pattern {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--color-bg);
  border-radius: 10px;
}
.tg-pattern:last-child { margin-bottom: 0; }
.tg-pattern-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ========== トグルスイッチ 共通 ========== */
.tg-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
  flex-shrink: 0;
}
/* チェックボックス本体を見えなくする（キーボードフォーカスは残す） */
.tg-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* スライドの台座 */
.tg-track {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 14px;
  transition: background 0.2s;
}
/* スライドのつまみ */
.tg-thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 3px;
  left: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
/* オン状態: 台座をアクセントカラーに変え、つまみを右に移動する */
.tg-input:checked + .tg-track { background: var(--color-accent); }
.tg-input:checked + .tg-track .tg-thumb { transform: translateX(24px); }
/* キーボードフォーカス時のアウトライン（:focus では常に出てしまうため :focus-visible を使う） */
.tg-input:focus-visible + .tg-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ========== Pattern 1 — 決定ボタン ========== */
.tg-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tg-submit {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: sans-serif;
  margin-bottom: 14px;
  transition: opacity 0.15s;
}
.tg-submit:hover { opacity: 0.85; }
.tg-result {
  font-size: 14px;
  min-height: 20px;
}
.tg-result-placeholder {
  margin: 0;
  color: var(--color-muted);
}
.tg-result.has-value {
  padding: 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  text-align: center;
}
/* ON状態: 緑系 */
.tg-result.has-value.is-on {
  border-color: #22c55e;
  background: #f0fdf4;
}
.tg-result.has-value.is-on .tg-result-value { color: #15803d; }
/* OFF状態: グレー系 */
.tg-result.has-value:not(.is-on) { background: #F9FAFB; }
.tg-result.has-value:not(.is-on) .tg-result-value { color: #374151; }
.tg-result-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ========== Pattern 2 — 複数の一括管理 ========== */
.tgb-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.tgb-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1.5px solid;
  cursor: pointer;
  font-size: 13px;
  font-family: sans-serif;
  transition: opacity 0.15s;
}
.tgb-btn:hover { opacity: 0.8; }
.tgb-btn-on  { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.tgb-btn-off { background: #fff; color: #374151; border-color: var(--color-border); }
.tgb-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}
.tgb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
}
.tgb-item:last-child { border-bottom: none; }
.tgb-summary {
  font-size: 13px;
  color: var(--color-muted);
  text-align: right;
  margin: 0;
}

/* ========== Pattern 3 — 表示/非表示 ========== */
.tgv-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* max-height を 0 → 実コンテンツ高さ以上の値へ変化させてスライドアニメーションを実現する */
.tgv-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.tgv-panel.is-open { max-height: 300px; }
.tgv-panel-inner {
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  padding: 14px 16px;
  background: #fff;
  margin-top: 10px;
}
.tgv-panel-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--color-text);
}
.tgv-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

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

// === Pattern 1: 決定ボタン ===
var tgInput  = document.getElementById('tg-main');
var tgSubmit = document.getElementById('tg-submit');
var tgResult = document.getElementById('tg-result');

// 決定ボタン押下時に input.checked を読み取り ON/OFF を表示する
tgSubmit.addEventListener('click', function () {
  var isOn = tgInput.checked;
  if (isOn) {
    tgResult.innerHTML = '<p class="tg-result-value">ON</p>';
    tgResult.className = 'tg-result has-value is-on';
  } else {
    tgResult.innerHTML = '<p class="tg-result-value">OFF</p>';
    tgResult.className = 'tg-result has-value';
  }
});


// === Pattern 2: 複数の一括管理 ===
var tgbInputs  = document.querySelectorAll('.tgb-input');
var tgbSummary = document.getElementById('tgb-summary');
var totalCount = tgbInputs.length;

// ON件数を数えてサマリーテキストを更新する
function updateSummary() {
  var onCount = Array.from(tgbInputs).filter(function (i) { return i.checked; }).length;
  tgbSummary.textContent = onCount + ' / ' + totalCount + ' 項目がON';
}

tgbInputs.forEach(function (input) {
  input.addEventListener('change', updateSummary);
});

// 「全てON/OFF」ボタンは checked を直接変更するため change イベントが発火しない
// → 変更後に手動で updateSummary() を呼ぶ
document.getElementById('tgb-all-on').addEventListener('click', function () {
  tgbInputs.forEach(function (i) { i.checked = true; });
  updateSummary();
});
document.getElementById('tgb-all-off').addEventListener('click', function () {
  tgbInputs.forEach(function (i) { i.checked = false; });
  updateSummary();
});


// === Pattern 3: 表示/非表示 ===
var tgvInput = document.getElementById('tgv-main');
var tgvPanel = document.getElementById('tgv-panel');

tgvInput.addEventListener('change', function () {
  var isOpen = tgvInput.checked;
  // is-open クラスで max-height を切り替えてスライドアニメーションを起動する
  tgvPanel.classList.toggle('is-open', isOpen);
  // スクリーンリーダーに展開状態を伝える
  tgvInput.setAttribute('aria-expanded', isOpen);
  tgvPanel.setAttribute('aria-hidden', !isOpen);
});