通知センターパネル

<div class="d05-05-06-card">
          <div class="d05-05-06-head">
            <span>通知センター <b class="d05-05-06-badge">3</b></span>
            <button class="d05-05-06-readall" type="button">すべて既読</button>
          </div>
          <ul class="d05-05-06-list">
            <li class="is-unread"><span class="d05-05-06-dot"></span><div><b>新しいコメント</b>が投稿されました<em>5分前</em></div></li>
            <li class="is-unread"><span class="d05-05-06-dot"></span><div><b>プラグイン更新</b>が利用可能です<em>1時間前</em></div></li>
            <li class="is-unread"><span class="d05-05-06-dot"></span><div><b>バックアップ</b>が完了しました<em>3時間前</em></div></li>
            <li><span class="d05-05-06-dot"></span><div>月次レポートを生成しました<em>昨日</em></div></li>
          </ul>
        </div>

.d05-05-06{background:#f8fafc}
        .d05-05-06-card{width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px 16px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d05-05-06-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:#475569;margin-bottom:8px}
        .d05-05-06-badge{background:#ef4444;color:#fff;font-size:10px;border-radius:10px;padding:1px 7px;margin-left:4px;font-weight:700}
        .d05-05-06-badge:empty{display:none}
        .d05-05-06-readall{font-size:11px;color:#3b82f6;background:none;border:none;cursor:pointer;font-weight:600}
        .d05-05-06-list{list-style:none;margin:0;padding:0}
        .d05-05-06-list li{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-top:1px solid #f1f5f9;font-size:12.5px;color:#64748b}
        .d05-05-06-list li:first-child{border-top:none}
        .d05-05-06-list b{color:#0f172a;font-weight:700}
        .d05-05-06-list em{display:block;font-style:normal;font-size:10.5px;color:#94a3b8;margin-top:2px}
        .d05-05-06-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:transparent;margin-top:4px}
        .d05-05-06-list li.is-unread{color:#334155}
        .d05-05-06-list li.is-unread .d05-05-06-dot{background:#3b82f6}

(function(){
        var root=document.getElementById('item-05-05-06');if(!root)return;
        var badge=root.querySelector('.d05-05-06-badge');
        function refresh(){var n=root.querySelectorAll('.d05-05-06-list li.is-unread').length;badge.textContent=n?n:'';}
        root.querySelectorAll('.d05-05-06-list li').forEach(function(li){
          li.addEventListener('click',function(){li.classList.remove('is-unread');refresh();});
        });
        root.querySelector('.d05-05-06-readall').addEventListener('click',function(){
          root.querySelectorAll('.d05-05-06-list li.is-unread').forEach(function(li){li.classList.remove('is-unread');});
          refresh();
        });
      })();