オフライン警告バナー(スライドダウン)

<div class="d11-14-01-wrap">
          <div class="d11-14-01-frame">
            <div class="d11-14-01-banner" id="d1957Banner">
              <svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 3C7.5 3 3.6 4.7 1 7.4l2.1 2.1C5.4 7.2 8.5 5.8 12 5.8s6.6 1.4 8.9 3.7L23 7.4C20.4 4.7 16.5 3 12 3z" fill="none" stroke="#fff" stroke-width="1.6" opacity=".5"/><path d="M4.5 11.5L6.6 13.6C8 12.3 9.9 11.5 12 11.5s4 .8 5.4 2.1l2.1-2.1C17.6 9.7 15 8.5 12 8.5s-5.6 1.2-7.5 3z" fill="none" stroke="#fff" stroke-width="1.6" opacity=".7"/><path d="M8 15.5l2.1 2.1c.5-.5 1.2-.8 1.9-.8s1.4.3 1.9.8l2.1-2.1C14.8 14.3 13.5 13.7 12 13.7s-2.8.6-4 1.8z" fill="none" stroke="#fff" stroke-width="1.6"/><circle cx="12" cy="19.5" r="1.3" fill="#fff"/></svg>
              <span>オフラインです。接続をご確認ください</span>
            </div>
            <div class="d11-14-01-body" id="d1957Body">
              <p class="d11-14-01-line">お知らせ: 新着メッセージが3件あります</p>
              <p class="d11-14-01-line">最新の投稿を読み込んでいます…</p>
            </div>
          </div>
          <button type="button" class="d11-14-01-toggle" id="d1957Toggle">オフラインを再現する</button>
        </div>

.prev.d11-14-01{align-items:flex-start;justify-content:flex-start}
        .d11-14-01-wrap{width:100%}
        .d11-14-01-frame{position:relative;height:150px;overflow:hidden;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-01-banner{position:absolute;top:0;left:0;right:0;transform:translateY(-100%);background:#dc2626;color:#fff;font-size:11px;font-weight:700;padding:9px 12px;display:flex;align-items:center;gap:7px;transition:transform .35s ease;z-index:3}
        .d11-14-01-banner.show{transform:translateY(0)}
        .d11-14-01-body{padding:16px 12px;display:flex;flex-direction:column;gap:8px;transition:opacity .3s}
        .d11-14-01-body.dim{opacity:.4}
        .d11-14-01-line{margin:0;font-size:11.5px;color:#374151;background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px}
        .d11-14-01-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-01-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-01');
        var banner=root.querySelector('#d1957Banner');
        var body=root.querySelector('#d1957Body');
        var btn=root.querySelector('#d1957Toggle');
        var offline=false;
        btn.addEventListener('click',function(){
          offline=!offline;
          banner.classList.toggle('show',offline);
          body.classList.toggle('dim',offline);
          btn.textContent=offline?'オンラインに戻す':'オフラインを再現する';
        });
      })();