/* COPIED from ~/Desktop/Design System/components/badge.css on 2026-10-20 by selfprint/tools/build_zds.py.
   Do not edit here — change the Design System, then re-run the script. */
/* =============================================================================
   Zigu — Badge  (components/badge.css)
   Requires tokens.css. Spec: components/badge.md · Figma: page "Badge" (5:4), set <Badge> (40:758).

   <span class="zg-badge">12</span>                       count (red)
   <span class="zg-badge zg-badge--dot"></span>          unread dot, no number
   On an icon: wrap the GLYPH (not the button), so the badge is placed against the drawing itself
   <button type="button" class="zg-icon-button" aria-label="메시지, 읽지 않음 12개">
     <span class="zg-badge-host"><i class="zg-icon zg-icon--card-message" aria-hidden="true"></i><span class="zg-badge" aria-hidden="true">12</span></span>
   </button>

   look: (red) · --primary · --neutral (plain count) · --neutral-strong (count on a busy surface) · --added · --removed · --dot
   --added = light blue background + dark blue text; --removed = gray background + red text. They are COLOURS only:
   the content is whatever you put in ("5", "+5", "128" …) — the class never adds a "+" or "−" (product rule).
   ========================================================================== */
.zg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  min-width: var(--badge-height);               /* one digit = a circle */
  height: var(--badge-height);
  padding: 0 var(--badge-padding-x);
  border-radius: var(--radius-full);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font: var(--font-bold) var(--body-2xs-size) / var(--body-2xs-lh) var(--font-sans);
  letter-spacing: var(--tracking);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* next to text: "middle" follows the text's x-height, which sits ~1.4px below the optical middle
     of Korean (measured at 12 · 14 · 16 · 18px); lift it by that much (0.125em of the 11px number) */
  vertical-align: middle;
  translate: 0 -0.125em;
}
.zg-badge--primary { background: var(--badge-primary-bg); }
.zg-badge--neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
.zg-badge--neutral-strong { background: var(--badge-neutral-strong-bg); color: var(--badge-neutral-strong-fg); }
.zg-badge--added { background: var(--badge-added-bg); color: var(--badge-added-fg); }
.zg-badge--removed { background: var(--badge-removed-bg); color: var(--badge-removed-fg); }
.zg-badge--dot { min-width: 0; width: var(--badge-dot); height: var(--badge-dot); padding: 0; }

/* ---- riding on an icon. The host wraps the glyph, so % = % of the glyph's artboard.
        Count: top-left at the glyph centre — overlaps the ink of every common glyph (measured ≥ 9px²
        on 10 icons at 20; Figma rule button "3": x12 y11 on 24) and grows to the right with more digits.
        Dot: top-left at 60% / 10% — just touches the ink (≥ 4px² on the same icons, bell 6px²). ---- */
.zg-badge-host { position: relative; display: inline-flex; vertical-align: middle; }
.zg-badge-host > .zg-badge { position: absolute; inset-inline-start: 50%; top: 50%; translate: none; pointer-events: none; }
.zg-badge-host > .zg-badge--dot { inset-inline-start: 60%; top: 10%; }