オフライン時に操作不能になるボタン群

<div class="d11-14-05-wrap">
          <div class="d11-14-05-frame">
            <div class="d11-14-05-actions" id="d1961Actions">
              <button type="button" class="d11-14-05-abtn">
                <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 20s-7-4.3-9.3-8.7C1.2 8 3 5 6.4 5c1.9 0 3.4 1 4.6 2.6C12.2 6 13.7 5 15.6 5 19 5 20.8 8 19.3 11.3 17 15.7 12 20 12 20z" fill="none" stroke="#374151" stroke-width="1.6"/></svg>
                いいね
              </button>
              <button type="button" class="d11-14-05-abtn">
                <svg viewBox="0 0 24 24" width="16" height="16"><path d="M4 4h16v11H8l-4 4V4z" fill="none" stroke="#374151" stroke-width="1.6" stroke-linejoin="round"/></svg>
                コメント
              </button>
              <button type="button" class="d11-14-05-abtn">
                <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="6" cy="12" r="2.4" fill="none" stroke="#374151" stroke-width="1.6"/><circle cx="18" cy="6" r="2.4" fill="none" stroke="#374151" stroke-width="1.6"/><circle cx="18" cy="18" r="2.4" fill="none" stroke="#374151" stroke-width="1.6"/><line x1="8" y1="11" x2="16" y2="7" stroke="#374151" stroke-width="1.6"/><line x1="8" y1="13" x2="16" y2="17" stroke="#374151" stroke-width="1.6"/></svg>
                シェア
              </button>
            </div>
            <p class="d11-14-05-note" id="d1961Note">オフラインのため操作できません</p>
          </div>
          <button type="button" class="d11-14-05-toggle" id="d1961Toggle">オフラインを再現する</button>
        </div>

.prev.d11-14-05{align-items:flex-start;justify-content:flex-start}
        .d11-14-05-wrap{width:100%}
        .d11-14-05-frame{padding:16px 12px;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3;min-height:118px}
        .d11-14-05-actions{display:flex;gap:8px}
        .d11-14-05-abtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:10px;border:1px solid #eef0f3;background:#fff;color:#374151;font-size:10.5px;font-weight:700;cursor:pointer;transition:opacity .25s,filter .25s}
        .d11-14-05-abtn[disabled]{opacity:.4;filter:grayscale(1);cursor:not-allowed}
        .d11-14-05-note{display:none;text-align:center;font-size:10.5px;color:#dc2626;font-weight:700;margin:10px 0 0}
        .d11-14-05-note.show{display:block}
        .d11-14-05-toggle{margin-top:10px;width:100%;padding:9px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
        .d11-14-05-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-05');
        var btns=root.querySelectorAll('.d11-14-05-abtn');
        var note=root.querySelector('#d1961Note');
        var toggle=root.querySelector('#d1961Toggle');
        var offline=false;
        toggle.addEventListener('click',function(){
          offline=!offline;
          btns.forEach(function(b){b.disabled=offline;});
          note.classList.toggle('show',offline);
          toggle.textContent=offline?'オンラインに戻す':'オフラインを再現する';
        });
      })();