通知センターベル(未読数バッジ)

<div class="d09-02-12-wrap">
          <button class="d09-02-12-bell" type="button" aria-label="通知">
            <svg viewBox="0 0 24 24" width="24" height="24"><path fill="none" stroke="#334155" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path fill="none" stroke="#334155" stroke-width="2" stroke-linecap="round" d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
            <span class="d09-02-12-badge">3</span>
          </button>
          <div class="d09-02-12-panel">
            <p class="d09-02-12-item"><b>予約が確定</b>しました</p>
            <p class="d09-02-12-item">新着コメントが<b>2件</b>あります</p>
            <p class="d09-02-12-item">システムメンテナンスのお知らせ</p>
          </div>
        </div>

.d09-02-12-wrap{position:relative}
        .d09-02-12-bell{position:relative;width:46px;height:46px;border-radius:50%;border:none;background:#f1f5f9;cursor:pointer;display:flex;align-items:center;justify-content:center}
        .d09-02-12-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e05252;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
        .d09-02-12-panel{position:absolute;top:calc(100% + 10px);right:0;width:210px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 16px 34px rgba(30,41,59,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;z-index:6}
        .d09-02-12-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
        .d09-02-12-item{margin:0;padding:9px 10px;font-size:12px;color:#374151;border-bottom:1px solid #f1f5f9;line-height:1.5}
        .d09-02-12-item:last-child{border-bottom:none}
        .d09-02-12-item b{color:#1f2937}

(function(){
        var root=document.getElementById('item-09-02-12');if(!root)return;
        var bell=root.querySelector('.d09-02-12-bell'),panel=root.querySelector('.d09-02-12-panel');
        bell.addEventListener('click',function(e){e.stopPropagation();panel.classList.toggle('open');});
        document.addEventListener('click',function(){panel.classList.remove('open');});
      })();