02カテゴリー別トグルの詳細パネル

<main class="stage">
  <div class="ct is-demo">
    <h2 class="ct__head">Cookie設定</h2>

    <div class="ct__row" data-k="need">
      <span class="ct__ic" aria-hidden="true"><svg viewBox="0 0 256 256" width="16" height="16"><g fill="currentColor"><path d="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2"/><path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z"/></g></svg></span>
      <button class="ct__name" type="button" aria-expanded="false" aria-controls="ct-p1">
        <span class="ct__label">必須</span>
        <span class="ct__caret" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="m208 96l-80 80l-80-80Z" opacity=".2"/><path d="M215.39 92.94A8 8 0 0 0 208 88H48a8 8 0 0 0-5.66 13.66l80 80a8 8 0 0 0 11.32 0l80-80a8 8 0 0 0 1.73-8.72M128 164.69L67.31 104h121.38Z"/></g></svg></span>
      </button>
      <button class="ct__sw ct__sw--fixed is-on" type="button" role="switch" aria-checked="true" aria-disabled="true" aria-label="必須Cookie"><span class="ct__knob"></span></button>
      <div class="ct__panel" id="ct-p1"><div class="ct__inner"><p class="ct__desc">サイトの表示に必ず必要です。</p></div></div>
    </div>

    <div class="ct__row ct__row--stats" data-k="stats">
      <span class="ct__ic" aria-hidden="true"><svg viewBox="0 0 256 256" width="16" height="16"><g fill="currentColor"><path d="M208 40v168h-56V40Z" opacity=".2"/><path d="M224 200h-8V40a8 8 0 0 0-8-8h-56a8 8 0 0 0-8 8v40H96a8 8 0 0 0-8 8v40H48a8 8 0 0 0-8 8v64h-8a8 8 0 0 0 0 16h192a8 8 0 0 0 0-16M160 48h40v152h-40Zm-56 48h40v104h-40Zm-48 48h32v56H56Z"/></g></svg></span>
      <button class="ct__name" type="button" aria-expanded="false" aria-controls="ct-p2">
        <span class="ct__label">分析</span>
        <span class="ct__caret" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="m208 96l-80 80l-80-80Z" opacity=".2"/><path d="M215.39 92.94A8 8 0 0 0 208 88H48a8 8 0 0 0-5.66 13.66l80 80a8 8 0 0 0 11.32 0l80-80a8 8 0 0 0 1.73-8.72M128 164.69L67.31 104h121.38Z"/></g></svg></span>
      </button>
      <button class="ct__sw is-on" type="button" role="switch" aria-checked="true" aria-label="分析Cookie"><span class="ct__knob"></span></button>
      <div class="ct__panel" id="ct-p2"><div class="ct__inner"><p class="ct__desc">どの記事をどこまで読んだかを集計します。</p></div></div>
    </div>

    <div class="ct__row ct__row--ads" data-k="ads">
      <span class="ct__ic" aria-hidden="true"><svg viewBox="0 0 256 256" width="16" height="16"><g fill="currentColor"><path d="M240 120a40 40 0 0 1-40 40h-40V80h40a40 40 0 0 1 40 40" opacity=".2"/><path d="M248 120a48.05 48.05 0 0 0-48-48h-39.8c-2.91-.17-53.62-3.74-101.91-44.24A16 16 0 0 0 32 40v160a16 16 0 0 0 26.29 12.25c37.77-31.68 77-40.76 93.71-43.3v31.72a16 16 0 0 0 7.12 13.33l11 7.33A16 16 0 0 0 194.5 212l11.77-44.36A48.07 48.07 0 0 0 248 120M48 199.93V40c42.81 35.91 86.63 45 104 47.24v65.48c-17.35 2.28-61.16 11.35-104 47.21m131 8v.11l-11-7.33V168h21.6ZM200 152h-32V88h32a32 32 0 1 1 0 64"/></g></svg></span>
      <button class="ct__name" type="button" aria-expanded="false" aria-controls="ct-p3">
        <span class="ct__label">広告</span>
        <span class="ct__caret" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="m208 96l-80 80l-80-80Z" opacity=".2"/><path d="M215.39 92.94A8 8 0 0 0 208 88H48a8 8 0 0 0-5.66 13.66l80 80a8 8 0 0 0 11.32 0l80-80a8 8 0 0 0 1.73-8.72M128 164.69L67.31 104h121.38Z"/></g></svg></span>
      </button>
      <button class="ct__sw" type="button" role="switch" aria-checked="false" aria-label="広告Cookie"><span class="ct__knob"></span></button>
      <div class="ct__panel" id="ct-p3"><div class="ct__inner"><p class="ct__desc">興味に合わせた広告を表示します。</p></div></div>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-base;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-paper);

.ct {
  box-sizing: border-box;
  width: min(100%, 400px);
  display: grid;
  gap: $sp-2;
  padding: $sp-4;
  border: 1px solid rgba(23, 20, 26, .10);
  border-radius: $r-card;
  background: $stage-paper;
  box-shadow: 0 2px 8px rgba(23, 20, 26, .10);
  color: $subject-ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.ct__head {
  margin: 0;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1.2;
}

// 320px 에서도 아이콘·글자·스위치가 겹치지 않게 세 칸으로 못 박는다
.ct__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: $sp-2;
}
.ct__row + .ct__row { border-top: 1px solid rgba(23, 20, 26, .06); }

.ct__ic {
  grid-column: 1;
  display: inline-flex;
  color: rgba(23, 20, 26, .40);
}
.ct__row--stats .ct__ic, .ct__row--ads .ct__ic { color: $color; }

.ct__name {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: $sp-1;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: $sp-2 0;
  background: none;
  color: $subject-ink;
  font-family: inherit;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.ct__label { white-space: nowrap; }
.ct__caret {
  display: inline-flex;
  color: rgba(23, 20, 26, .36);
  transform: rotate(0deg);
  transition: transform $dur-quick $easing;
}
.ct__name[aria-expanded="true"] .ct__caret { transform: rotate(180deg); }

// ── 스위치: 노브는 translateX, 켜짐 색은 ::before 의 opacity ──
.ct__sw {
  grid-column: 3;
  position: relative;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: $r-pill;
  background: rgba(23, 20, 26, .16);
  cursor: pointer;
}
.ct__sw::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: $r-pill;
  background: $color;
  opacity: 0;
  transition: opacity $dur-quick $ease-out;
}
.ct__sw.is-on::before { opacity: 1; }
.ct__sw:focus-visible { outline: 2px solid rgba(47, 109, 246, .56); outline-offset: 2px; }
.ct__sw--fixed { cursor: not-allowed; opacity: .64; }

.ct__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: $stage-paper;
  box-shadow: 0 2px 8px rgba(23, 20, 26, .24);
  transform: translateX(0);
  transition: transform $duration $easing;
}
.ct__sw.is-on .ct__knob { transform: translateX(16px); }

// ── 펼침: grid-template-rows 0fr → 1fr (height:auto 를 쓰지 않는다) ──
.ct__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows $duration $easing;
}
.ct__inner { overflow: hidden; }
.ct__row.is-open .ct__panel { grid-template-rows: 1fr; }

.ct__desc {
  margin: $sp-1 0;
  padding: $sp-2;
  border-radius: $r-sm;
  background: rgba(47, 109, 246, .06);
  color: rgba($stage-ink, .72);
  font-size: clamp(9px, 2.6vw, 11px);
  line-height: 1.4;
}

// ── 자동 루프: 통계가 펼쳐졌다 접히는 사이 마케팅 스위치가 켜졌다 꺼진다. 0% 와 100% 가 같다 ──
.ct.is-demo .ct__row--stats .ct__panel { animation: ct-open $dur-loop $easing infinite; }
.ct.is-demo .ct__row--stats .ct__caret { animation: ct-caret $dur-loop $easing infinite; }
.ct.is-demo .ct__row--ads .ct__knob { animation: ct-knob $dur-loop $easing infinite; }
.ct.is-demo .ct__row--ads .ct__sw::before { animation: ct-fill $dur-loop $easing infinite; }

@keyframes ct-open {
  0%       { grid-template-rows: 0fr; }
  20%, 70% { grid-template-rows: 1fr; }
  100%     { grid-template-rows: 0fr; }
}
@keyframes ct-caret {
  0%       { transform: rotate(0deg); }
  20%, 70% { transform: rotate(180deg); }
  100%     { transform: rotate(0deg); }
}
@keyframes ct-knob {
  0%       { transform: translateX(0); }
  35%, 80% { transform: translateX(16px); }
  100%     { transform: translateX(0); }
}
@keyframes ct-fill {
  0%       { opacity: 0; }
  35%, 80% { opacity: 1; }
  100%     { opacity: 0; }
}

@media (max-width: 340px) {
  .ct { padding: $sp-3; gap: $sp-1; }
  .ct__row { column-gap: $sp-1; }
  .ct__name { padding: $sp-1 0; }
  .ct__desc { margin: $sp-1 0; padding: $sp-1 $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .ct.is-demo .ct__row--stats .ct__panel,
  .ct.is-demo .ct__row--stats .ct__caret,
  .ct.is-demo .ct__row--ads .ct__knob,
  .ct.is-demo .ct__row--ads .ct__sw::before { animation: none !important; }
  .ct__panel, .ct__caret, .ct__knob, .ct__sw::before { transition: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ct {
  box-sizing: border-box;
  width: min(100%, 400px);
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(23, 20, 26, 0.1);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(23, 20, 26, 0.1);
  color: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.ct__head {
  margin: 0;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1.2;
}

.ct__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 8px;
}

.ct__row + .ct__row {
  border-top: 1px solid rgba(23, 20, 26, 0.06);
}

.ct__ic {
  grid-column: 1;
  display: inline-flex;
  color: rgba(23, 20, 26, 0.4);
}

.ct__row--stats .ct__ic, .ct__row--ads .ct__ic {
  color: #2f6df6;
}

.ct__name {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 8px 0;
  background: none;
  color: #17141a;
  font-family: inherit;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.ct__label {
  white-space: nowrap;
}

.ct__caret {
  display: inline-flex;
  color: rgba(23, 20, 26, 0.36);
  transform: rotate(0deg);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ct__name[aria-expanded=true] .ct__caret {
  transform: rotate(180deg);
}

.ct__sw {
  grid-column: 3;
  position: relative;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.16);
  cursor: pointer;
}

.ct__sw::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #2f6df6;
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.ct__sw.is-on::before {
  opacity: 1;
}

.ct__sw:focus-visible {
  outline: 2px solid rgba(47, 109, 246, 0.56);
  outline-offset: 2px;
}

.ct__sw--fixed {
  cursor: not-allowed;
  opacity: 0.64;
}

.ct__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(23, 20, 26, 0.24);
  transform: translateX(0);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ct__sw.is-on .ct__knob {
  transform: translateX(16px);
}

.ct__panel {
  grid-column: 1/-1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ct__inner {
  overflow: hidden;
}

.ct__row.is-open .ct__panel {
  grid-template-rows: 1fr;
}

.ct__desc {
  margin: 4px 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(47, 109, 246, 0.06);
  color: rgba(23, 20, 26, 0.72);
  font-size: clamp(9px, 2.6vw, 11px);
  line-height: 1.4;
}

.ct.is-demo .ct__row--stats .ct__panel {
  animation: ct-open 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.ct.is-demo .ct__row--stats .ct__caret {
  animation: ct-caret 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.ct.is-demo .ct__row--ads .ct__knob {
  animation: ct-knob 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.ct.is-demo .ct__row--ads .ct__sw::before {
  animation: ct-fill 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes ct-open {
  0% {
    grid-template-rows: 0fr;
  }
  20%, 70% {
    grid-template-rows: 1fr;
  }
  100% {
    grid-template-rows: 0fr;
  }
}
@keyframes ct-caret {
  0% {
    transform: rotate(0deg);
  }
  20%, 70% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes ct-knob {
  0% {
    transform: translateX(0);
  }
  35%, 80% {
    transform: translateX(16px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ct-fill {
  0% {
    opacity: 0;
  }
  35%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 340px) {
  .ct {
    padding: 12px;
    gap: 4px;
  }
  .ct__row {
    column-gap: 4px;
  }
  .ct__name {
    padding: 4px 0;
  }
  .ct__desc {
    margin: 4px 0;
    padding: 4px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct.is-demo .ct__row--stats .ct__panel,
  .ct.is-demo .ct__row--stats .ct__caret,
  .ct.is-demo .ct__row--ads .ct__knob,
  .ct.is-demo .ct__row--ads .ct__sw::before {
    animation: none !important;
  }
  .ct__panel, .ct__caret, .ct__knob, .ct__sw::before {
    transition: none;
  }
}

// 실제 동작: 스위치는 role="switch" 로 진짜 토글되고, 행 제목은 aria-expanded 로 설명을 편다.
// 필수는 항상 켬이라 눌러도 바뀌지 않는다. 선택은 localStorage 에 남는다.
var ct = document.querySelector('.ct');
var KEY = 'gd-consent-02';
var state = { stats: true, ads: false };

function read() {
  try { var s = localStorage.getItem(KEY); return s ? JSON.parse(s) : null; } catch (e) { return null; }
}
function write() {
  try { localStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {}
}
function paint() {
  var rows = ct.querySelectorAll('.ct__row');
  for (var i = 0; i < rows.length; i++) {
    var k = rows[i].getAttribute('data-k');
    if (k === 'need') continue;
    var on = !!state[k];
    var sw = rows[i].querySelector('.ct__sw');
    sw.setAttribute('aria-checked', on ? 'true' : 'false');
    sw.classList.toggle('is-on', on);
  }
}
function stop() { ct.classList.remove('is-demo'); }

var sws = ct.querySelectorAll('.ct__sw');
for (var i = 0; i < sws.length; i++) {
  sws[i].addEventListener('click', function (e) {
    stop();
    var k = e.currentTarget.closest('.ct__row').getAttribute('data-k');
    if (k === 'need') return;
    state[k] = !state[k];
    paint();
    write();
  });
}

var names = ct.querySelectorAll('.ct__name');
for (var j = 0; j < names.length; j++) {
  names[j].addEventListener('click', function (e) {
    stop();
    var b = e.currentTarget;
    var open = b.getAttribute('aria-expanded') === 'true';
    b.setAttribute('aria-expanded', open ? 'false' : 'true');
    b.closest('.ct__row').classList.toggle('is-open', !open);
  });
}

var saved = read();
if (saved) { state.stats = !!saved.stats; state.ads = !!saved.ads; }
paint();

import { useEffect, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./CategoryTogglePanel.module.scss";

export type CategoryTogglePanelProps = {
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & {
  "--duration"?: string;
  "--easing"?: string;
  "--color"?: string;
};

const KEY = "gd-consent-02";

function Caret() {
  return (
    <span className={styles.caret} aria-hidden="true">
      <svg viewBox="0 0 256 256" width="14" height="14">
        <g fill="currentColor">
          <path d="m208 96l-80 80l-80-80Z" opacity=".2" />
          <path d="M215.39 92.94A8 8 0 0 0 208 88H48a8 8 0 0 0-5.66 13.66l80 80a8 8 0 0 0 11.32 0l80-80a8 8 0 0 0 1.73-8.72M128 164.69L67.31 104h121.38Z" />
        </g>
      </svg>
    </span>
  );
}

export default function CategoryTogglePanel({
  duration = 300,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: CategoryTogglePanelProps) {
  const [stats, setStats] = useState<boolean>(true);
  const [ads, setAds] = useState<boolean>(false);
  const [open, setOpen] = useState<string>("");
  const [live, setLive] = useState<boolean>(true);

  useEffect(() => {
    try {
      const raw = localStorage.getItem(KEY);
      if (raw) {
        const v = JSON.parse(raw) as { stats?: boolean; ads?: boolean };
        setStats(!!v.stats);
        setAds(!!v.ads);
      }
    } catch (e) {
      /* 샌드박스에서 던진다 */
    }
  }, []);

  function save(nextStats: boolean, nextAds: boolean): void {
    try {
      localStorage.setItem(KEY, JSON.stringify({ stats: nextStats, ads: nextAds }));
    } catch (e) {
      /* 샌드박스에서 던진다 */
    }
  }

  function toggleOpen(id: string): void {
    setLive(false);
    setOpen(open === id ? "" : id);
  }

  const vars: Vars = {
    "--duration": `${duration}ms`,
    "--easing": easing,
    "--color": color,
  };

  return (
    <div className={`${styles.ct} ${live ? styles.isDemo : ""}`} style={vars}>
      <h2 className={styles.head}>Cookie settings</h2>

      <div className={styles.row}>
        <span className={styles.ic} aria-hidden="true">
          <svg viewBox="0 0 256 256" width="16" height="16">
            <g fill="currentColor">
              <path d="M216 56v56c0 96-88 120-88 120s-88-24-88-120V56a8 8 0 0 1 8-8h160a8 8 0 0 1 8 8" opacity=".2" />
              <path d="M208 40H48a16 16 0 0 0-16 16v56c0 52.72 25.52 84.67 46.93 102.19c23.06 18.86 46 25.26 47 25.53a8 8 0 0 0 4.2 0c1-.27 23.91-6.67 47-25.53C198.48 196.67 224 164.72 224 112V56a16 16 0 0 0-16-16m0 72c0 37.07-13.66 67.16-40.6 89.42a129.3 129.3 0 0 1-39.4 22.2a128.3 128.3 0 0 1-38.92-21.81C61.82 179.51 48 149.3 48 112V56h160ZM82.34 141.66a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32l-56 56a8 8 0 0 1-11.32 0Z" />
            </g>
          </svg>
        </span>
        <button
          className={styles.name}
          type="button"
          aria-expanded={open === "p1"}
          aria-controls="ct-p1"
          onClick={() => toggleOpen("p1")}
        >
          <span className={styles.label}>Necessary</span>
          <Caret />
        </button>
        <button
          className={`${styles.sw} ${styles.swFixed} ${styles.isOn}`}
          type="button"
          role="switch"
          aria-checked={true}
          aria-disabled={true}
          aria-label="Necessary cookies"
        >
          <span className={styles.knob} />
        </button>
        <div className={`${styles.panel} ${open === "p1" ? styles.isOpen : ""}`} id="ct-p1">
          <div className={styles.inner}>
            <p className={styles.desc}>Required for the site to load at all.</p>
          </div>
        </div>
      </div>

      <div className={`${styles.row} ${styles.rowStats}`}>
        <span className={styles.ic} aria-hidden="true">
          <svg viewBox="0 0 256 256" width="16" height="16">
            <g fill="currentColor">
              <path d="M208 40v168h-56V40Z" opacity=".2" />
              <path d="M224 200h-8V40a8 8 0 0 0-8-8h-56a8 8 0 0 0-8 8v40H96a8 8 0 0 0-8 8v40H48a8 8 0 0 0-8 8v64h-8a8 8 0 0 0 0 16h192a8 8 0 0 0 0-16M160 48h40v152h-40Zm-56 48h40v104h-40Zm-48 48h32v56H56Z" />
            </g>
          </svg>
        </span>
        <button
          className={styles.name}
          type="button"
          aria-expanded={open === "p2"}
          aria-controls="ct-p2"
          onClick={() => toggleOpen("p2")}
        >
          <span className={styles.label}>Analytics</span>
          <Caret />
        </button>
        <button
          className={`${styles.sw} ${stats ? styles.isOn : ""}`}
          type="button"
          role="switch"
          aria-checked={stats}
          aria-label="Analytics cookies"
          onClick={() => {
            setLive(false);
            setStats(!stats);
            save(!stats, ads);
          }}
        >
          <span className={styles.knob} />
        </button>
        <div className={`${styles.panel} ${open === "p2" ? styles.isOpen : ""}`} id="ct-p2">
          <div className={styles.inner}>
            <p className={styles.desc}>Counts which posts get read, and how far.</p>
          </div>
        </div>
      </div>

      <div className={`${styles.row} ${styles.rowAds}`}>
        <span className={styles.ic} aria-hidden="true">
          <svg viewBox="0 0 256 256" width="16" height="16">
            <g fill="currentColor">
              <path d="M240 120a40 40 0 0 1-40 40h-40V80h40a40 40 0 0 1 40 40" opacity=".2" />
              <path d="M248 120a48.05 48.05 0 0 0-48-48h-39.8c-2.91-.17-53.62-3.74-101.91-44.24A16 16 0 0 0 32 40v160a16 16 0 0 0 26.29 12.25c37.77-31.68 77-40.76 93.71-43.3v31.72a16 16 0 0 0 7.12 13.33l11 7.33A16 16 0 0 0 194.5 212l11.77-44.36A48.07 48.07 0 0 0 248 120M48 199.93V40c42.81 35.91 86.63 45 104 47.24v65.48c-17.35 2.28-61.16 11.35-104 47.21m131 8v.11l-11-7.33V168h21.6ZM200 152h-32V88h32a32 32 0 1 1 0 64" />
            </g>
          </svg>
        </span>
        <button
          className={styles.name}
          type="button"
          aria-expanded={open === "p3"}
          aria-controls="ct-p3"
          onClick={() => toggleOpen("p3")}
        >
          <span className={styles.label}>Marketing</span>
          <Caret />
        </button>
        <button
          className={`${styles.sw} ${ads ? styles.isOn : ""}`}
          type="button"
          role="switch"
          aria-checked={ads}
          aria-label="Marketing cookies"
          onClick={() => {
            setLive(false);
            setAds(!ads);
            save(stats, !ads);
          }}
        >
          <span className={styles.knob} />
        </button>
        <div className={`${styles.panel} ${open === "p3" ? styles.isOpen : ""}`} id="ct-p3">
          <div className={styles.inner}>
            <p className={styles.desc}>Shows ads picked from your interests.</p>
          </div>
        </div>
      </div>
    </div>
  );
}