ベルアイコン開閉式通知ドロップダウン

<div class="stage09-12-11">
          <button type="button" class="bell09-12-11" aria-label="通知パネルを開く">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#374151" stroke-width="1.8"><path d="M6 10a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>
            <span class="badge09-12-11">3</span>
          </button>
          <div class="panel09-12-11">
            <div class="phead09-12-11">
              <span>通知</span>
              <span class="pclear09-12-11">すべて既読にする</span>
            </div>
            <ul class="plist09-12-11">
              <li>新しいコメントがあります</li>
              <li>注文が発送されました</li>
              <li>プロフィールが承認されました</li>
            </ul>
          </div>
        </div>

.d09-12-11{ background:#f4f5fb; }
        .d09-12-11 .stage09-12-11{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-11 .bell09-12-11{
          position:absolute; right:18px; top:16px; width:42px; height:42px; border-radius:50%;
          border:none; background:#fff; box-shadow:0 6px 16px rgba(20,30,50,.14); cursor:pointer;
          display:flex; align-items:center; justify-content:center;
        }
        .d09-12-11 .badge09-12-11{
          position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding:0 4px;
          border-radius:99px; background:#dc2626; color:#fff; font-size:9.5px; font-weight:800;
          display:flex; align-items:center; justify-content:center;
        }
        .d09-12-11 .panel09-12-11{
          position:absolute; right:16px; top:64px; width:216px;
          background:#fff; border-radius:12px; box-shadow:0 14px 32px rgba(20,30,50,.2);
          opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
          transition:opacity .25s ease, transform .25s ease;
        }
        .d09-12-11 .panel09-12-11.open09-12-11{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
        .d09-12-11 .phead09-12-11{
          display:flex; align-items:center; justify-content:space-between;
          padding:11px 13px; border-bottom:1px solid #f1f2f7; font-size:11.5px; font-weight:700; color:#2b2f42;
        }
        .d09-12-11 .pclear09-12-11{ font-size:10px; font-weight:600; color:#4f46e5; cursor:pointer; }
        .d09-12-11 .plist09-12-11{ list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:4px; }
        .d09-12-11 .plist09-12-11 li{ font-size:11px; color:#4b5063; padding:7px 8px; border-radius:8px; }
        .d09-12-11 .plist09-12-11 li:hover{ background:#f5f6fb; }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-11');
        var bell = root.querySelector('.bell09-12-11');
        var panel = root.querySelector('.panel09-12-11');
        var badge = root.querySelector('.badge09-12-11');
        var clear = root.querySelector('.pclear09-12-11');
        bell.addEventListener('click', function(){
          panel.classList.toggle('open09-12-11');
        });
        clear.addEventListener('click', function(){
          badge.style.display = 'none';
          panel.classList.remove('open09-12-11');
        });
      })();