アバターカラー選択オンボーディング

<div class="d11-04-12-card">
          <p class="d11-04-12-title">アイコンを選択してください</p>
          <div class="d11-04-12-grid">
            <button class="d11-04-12-op is-on" data-c="#5b7cfa" type="button"></button>
            <button class="d11-04-12-op" data-c="#f0715b" type="button"></button>
            <button class="d11-04-12-op" data-c="#22a866" type="button"></button>
            <button class="d11-04-12-op" data-c="#f4c257" type="button"></button>
            <button class="d11-04-12-op" data-c="#a45be0" type="button"></button>
            <button class="d11-04-12-op" data-c="#2ea6c9" type="button"></button>
          </div>
          <button class="d11-04-12-next" id="d11-04-12-next">次へ進む</button>
        </div>

.prev.d11-04-12{background:#f6f4fb}
        .d11-04-12-card{width:100%;max-width:230px;background:#fff;border-radius:14px;padding:18px;box-shadow:0 8px 24px rgba(50,30,80,.1);text-align:center}
        .d11-04-12-title{margin:0 0 12px;font-size:12.5px;color:#3a3350;font-weight:700}
        .d11-04-12-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
        .d11-04-12-op{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}
        .d11-04-12-op.is-on{border-color:#2b2440;box-shadow:0 0 0 2px #fff inset}
        .d11-04-12-next{width:100%;border:none;border-radius:8px;padding:9px;font-size:12.5px;font-weight:700;background:#d8d4e8;color:#8b84a8;cursor:not-allowed}
        .d11-04-12-next.is-ready{background:#5b7cfa;color:#fff;cursor:pointer}

(function(){
        var root=document.querySelector('#item-11-04-12');if(!root)return;
        var ops=root.querySelectorAll('.d11-04-12-op'),next=root.querySelector('#d11-04-12-next');
        ops.forEach(function(op){
          op.style.background=op.getAttribute('data-c');
          op.addEventListener('click',function(){
            ops.forEach(function(o){o.classList.remove('is-on')});
            op.classList.add('is-on');
            next.classList.add('is-ready');
          });
        });
      })();