배지

<div class="bgw">
  <div class="bgi"><span class="ico">🔔</span><span class="badge" id="bd">1</span></div>
  <div class="bgi"><span class="avatar-dot">👤<i class="status" id="stdot"></i></span></div>
</div>

.bgw{display:flex;gap:40px;align-items:center}
.bgi{position:relative}
.ico{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:19px}
.badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#e5484d;color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.avatar-dot{position:relative;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:19px}
.status{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:#2dd4bf;border:2px solid var(--bg);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25)}}

const bd = document.getElementById('bd');
let n = 1;
setInterval(() => { n = n >= 9 ? 1 : n + 1; bd.textContent = n > 9 ? '9+' : String(n); }, 1000);