オンボーディング進捗ステップ

<div class="d11-04-03-card">
          <div class="d11-04-03-bar"><span class="d11-04-03-fill"></span></div>
          <div class="d11-04-03-body">
            <div class="d11-04-03-badge">STEP <em class="d11-04-03-cur">1</em> / 3</div>
            <h4 class="d11-04-03-h">アカウント作成</h4>
            <p class="d11-04-03-p">メールアドレスを登録して始めましょう。</p>
          </div>
          <div class="d11-04-03-ctrl">
            <button class="d11-04-03-prev">戻る</button>
            <button class="d11-04-03-next">次へ</button>
          </div>
        </div>

.d11-04-03{background:#f3f7f4}
        .d11-04-03 .d11-04-03-card{width:100%;max-width:250px;background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(30,50,40,.1);overflow:hidden}
        .d11-04-03 .d11-04-03-bar{height:6px;background:#e3ece6}
        .d11-04-03 .d11-04-03-fill{display:block;height:100%;width:33%;background:linear-gradient(90deg,#34c47c,#22a866);transition:width .4s}
        .d11-04-03 .d11-04-03-body{padding:18px 18px 4px}
        .d11-04-03 .d11-04-03-badge{font-size:11px;color:#22a866;font-weight:700;letter-spacing:.05em;margin-bottom:8px}
        .d11-04-03 .d11-04-03-h{font-size:16px;color:#243b30;margin-bottom:6px}
        .d11-04-03 .d11-04-03-p{font-size:12px;line-height:1.6;color:#5c6b62;min-height:38px}
        .d11-04-03 .d11-04-03-ctrl{display:flex;gap:8px;padding:14px 18px}
        .d11-04-03 .d11-04-03-ctrl button{flex:1;border-radius:8px;padding:8px;font-size:12px;cursor:pointer;border:1px solid #cfe0d7}
        .d11-04-03 .d11-04-03-prev{background:#fff;color:#5c6b62}
        .d11-04-03 .d11-04-03-next{background:#22a866;color:#fff;border-color:#22a866}

(function(){
        var root=document.querySelector('#item-11-04-03 .d11-04-03');
        if(!root)return;
        var fill=root.querySelector('.d11-04-03-fill'),cur=root.querySelector('.d11-04-03-cur'),h=root.querySelector('.d11-04-03-h'),p=root.querySelector('.d11-04-03-p');
        var data=[['アカウント作成','メールアドレスを登録して始めましょう。'],['プロフィール入力','お名前とアイコンを設定します。'],['準備完了','これで利用開始です。お疲れさまでした！']];
        var i=0;
        function render(){
          fill.style.width=((i+1)/3*100)+'%';
          cur.textContent=i+1;
          h.textContent=data[i][0];
          p.textContent=data[i][1];
        }
        root.querySelector('.d11-04-03-next').addEventListener('click',function(){if(i<2){i++;render()}});
        root.querySelector('.d11-04-03-prev').addEventListener('click',function(){if(i>0){i--;render()}});
        render();
      })();