トグル設定ウィジェット(静止・複数状態並列)

<div class="d11-08-05-card">
          <div class="d11-08-05-head">通知設定</div>
          <div class="d11-08-05-row"><span>メール通知</span><span class="d11-08-05-sw is-on"><i></i></span></div>
          <div class="d11-08-05-row"><span>プッシュ通知</span><span class="d11-08-05-sw"><i></i></span></div>
          <div class="d11-08-05-row"><span>週次レポート</span><span class="d11-08-05-sw is-on"><i></i></span></div>
          <div class="d11-08-05-row"><span>ダークモード</span><span class="d11-08-05-sw"><i></i></span></div>
        </div>

.d11-08-05{background:#f1f5f9}
        .d11-08-05-card{width:250px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d11-08-05-head{font-size:12px;font-weight:700;color:#475569;margin-bottom:8px}
        .d11-08-05-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid #f1f5f9;font-size:13px;color:#334155}
        .d11-08-05-row:first-of-type{border-top:none}
        .d11-08-05-sw{width:40px;height:22px;border-radius:20px;background:#cbd5e1;display:inline-block;position:relative}
        .d11-08-05-sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
        .d11-08-05-sw.is-on{background:#22c55e}
        .d11-08-05-sw.is-on i{left:20px}