토글 스위치

<div class="rows">
  <div class="row"><span>알림</span><button class="sw" id="s1" role="switch" aria-checked="true"><i></i></button></div>
  <div class="row"><span>자동저장</span><button class="sw" id="s2" role="switch" aria-checked="false"><i></i></button></div>
  <div class="row"><span>공개 프로필</span><button class="sw" id="s3" role="switch" aria-checked="true"><i></i></button></div>
</div>

.rows{display:grid;gap:12px;width:min(200px,88%)}
.row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--fg)}
.sw{width:42px;height:24px;border-radius:999px;border:1px solid var(--line);background:var(--line);position:relative;cursor:pointer;padding:0;transition:background .2s}
.sw[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw[aria-checked=true] i{transform:translateX(18px)}

const sws = [...document.querySelectorAll('.sw')];
function flip(s) { s.setAttribute('aria-checked', String(s.getAttribute('aria-checked') !== 'true')); }
let auto = true;
sws.forEach((s) => s.addEventListener('click', () => { auto = false; flip(s); }));
sws.forEach((s, i) => setInterval(() => { if (auto) flip(s); }, 1600 + i * 500));