再試行ボタン付きエラー表示

<div class="d11-14-08-wrap">
          <div class="d11-14-08-frame">
            <div class="d11-14-08-error" id="d1964Error">
              <svg viewBox="0 0 24 24" width="26" height="26"><circle cx="12" cy="12" r="11" fill="#fef2f2" stroke="#fca5a5" stroke-width="1.4"/><line x1="12" y1="7" x2="12" y2="13" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="16.5" r="1.2" fill="#dc2626"/></svg>
              <p class="d11-14-08-etitle">コンテンツを読み込めませんでした</p>
              <p class="d11-14-08-edesc">通信状態を確認してもう一度お試しください</p>
              <button type="button" class="d11-14-08-retry" id="d1964Retry">再試行</button>
            </div>
            <div class="d11-14-08-success" id="d1964Success">
              <p class="d11-14-08-line">記事: 最新ニュースを表示しています</p>
              <p class="d11-14-08-line">記事: 今週の注目トピック</p>
              <button type="button" class="d11-14-08-resetlink" id="d1964Reset">エラー表示に戻す(デモをリセット)</button>
            </div>
          </div>
        </div>

.d11-14-08-wrap{width:100%}
        .d11-14-08-frame{position:relative;min-height:196px;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3;padding:14px 12px;display:flex;align-items:center;justify-content:center}
        .d11-14-08-error{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
        .d11-14-08-etitle{margin:4px 0 0;font-size:12px;font-weight:700;color:#374151}
        .d11-14-08-edesc{margin:0 0 6px;font-size:10.5px;color:#9ca3af}
        .d11-14-08-retry{margin-top:4px;padding:7px 20px;border:none;border-radius:8px;background:#4f46e5;color:#fff;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .2s}
        .d11-14-08-retry:hover{background:#4338ca}
        .d11-14-08-retry[disabled]{background:#a5b4fc;cursor:wait}
        .d11-14-08-success{display:none;width:100%;flex-direction:column;gap:8px}
        .d11-14-08-success.show{display:flex}
        .d11-14-08-error.hide{display:none}
        .d11-14-08-line{margin:0;font-size:11.5px;color:#374151;background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px}
        .d11-14-08-resetlink{margin-top:2px;align-self:center;border:none;background:none;color:#6366f1;font-size:10.5px;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}

(function(){
        var root=document.querySelector('.d11-14-08');
        var errorBox=root.querySelector('#d1964Error');
        var success=root.querySelector('#d1964Success');
        var retry=root.querySelector('#d1964Retry');
        var reset=root.querySelector('#d1964Reset');
        retry.addEventListener('click',function(){
          if(retry.disabled)return;
          retry.disabled=true;
          retry.textContent='再試行中…';
          setTimeout(function(){
            errorBox.classList.add('hide');
            success.classList.add('show');
            retry.disabled=false;
            retry.textContent='再試行';
          },850);
        });
        reset.addEventListener('click',function(){
          success.classList.remove('show');
          errorBox.classList.remove('hide');
        });
      })();