通知バッジ付きアイコンメニュー

<nav class="menu">
          <a class="ic" data-n="3"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="badge">3</span></a>
          <a class="ic" data-n="12"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H5.2L4 17.3V4z"/></svg><span class="badge">12</span></a>
          <a class="ic" data-n="5"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2h9l5 5v15H6z"/><path d="M9 12h6M9 16h6"/></svg><span class="badge">5</span></a>
          <a class="ic"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg></a>
        </nav>

.d11-02-04 .menu{display:flex;gap:14px;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.12)}
        .d11-02-04 .ic{position:relative;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#5b6ef5;background:#f2f3fb;cursor:pointer;transition:background .25s,transform .25s}
        .d11-02-04 .ic:hover{background:#5b6ef5;color:#fff;transform:translateY(-3px)}
        .d11-02-04 .badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#fc4a5b;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
        .d11-02-04 .ic:hover .badge{animation:d194bounce .5s ease}
        @keyframes d194bounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-6px) scale(1.25)}60%{transform:translateY(0) scale(.9)}}