/* COPIED from ~/Desktop/Design System/components/lozenge.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 — Lozenge  (components/lozenge.css)
   Requires tokens.css. Spec: components/lozenge.md
   Figma: page "Lozenge" (5:1642), set <lozenge> (40:338).

   <span class="zg-lozenge zg-lozenge--3">디자인</span>
   <span class="zg-lozenge zg-lozenge--3 zg-lozenge--bold">디자인</span>
   <span class="zg-lozenge zg-lozenge--primary">진행 중</span>

   color: --1 … --10 (label palette; no number = 10, the neutral)   look: (tint) · --bold (solid)
   --primary: solid primary, ignores --bold
   ========================================================================== */
.zg-lozenge {
  --_tint-bg: var(--label-10-subtle-bg);
  --_tint-fg: var(--label-10-subtle-fg);
  --_solid-bg: var(--label-10-bg);
  --_solid-fg: var(--label-10-fg);
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  height: var(--lozenge-height);
  padding: 0 var(--lozenge-padding-x);
  border-radius: var(--lozenge-radius);
  background: var(--_tint-bg);
  color: var(--_tint-fg);
  font: var(--font-bold) var(--body-2xs-size) / var(--lozenge-height) var(--font-sans); /* 11 Bold, centred in the 20 box */
  letter-spacing: var(--tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.zg-lozenge--bold { background: var(--_solid-bg); color: var(--_solid-fg); }

.zg-lozenge--1  { --_tint-bg: var(--label-1-subtle-bg);  --_tint-fg: var(--label-1-subtle-fg);  --_solid-bg: var(--label-1-bg);  --_solid-fg: var(--label-1-fg); }
.zg-lozenge--2  { --_tint-bg: var(--label-2-subtle-bg);  --_tint-fg: var(--label-2-subtle-fg);  --_solid-bg: var(--label-2-bg);  --_solid-fg: var(--label-2-fg); }
.zg-lozenge--3  { --_tint-bg: var(--label-3-subtle-bg);  --_tint-fg: var(--label-3-subtle-fg);  --_solid-bg: var(--label-3-bg);  --_solid-fg: var(--label-3-fg); }
.zg-lozenge--4  { --_tint-bg: var(--label-4-subtle-bg);  --_tint-fg: var(--label-4-subtle-fg);  --_solid-bg: var(--label-4-bg);  --_solid-fg: var(--label-4-fg); }
.zg-lozenge--5  { --_tint-bg: var(--label-5-subtle-bg);  --_tint-fg: var(--label-5-subtle-fg);  --_solid-bg: var(--label-5-bg);  --_solid-fg: var(--label-5-fg); }
.zg-lozenge--6  { --_tint-bg: var(--label-6-subtle-bg);  --_tint-fg: var(--label-6-subtle-fg);  --_solid-bg: var(--label-6-bg);  --_solid-fg: var(--label-6-fg); }
.zg-lozenge--7  { --_tint-bg: var(--label-7-subtle-bg);  --_tint-fg: var(--label-7-subtle-fg);  --_solid-bg: var(--label-7-bg);  --_solid-fg: var(--label-7-fg); }
.zg-lozenge--8  { --_tint-bg: var(--label-8-subtle-bg);  --_tint-fg: var(--label-8-subtle-fg);  --_solid-bg: var(--label-8-bg);  --_solid-fg: var(--label-8-fg); }
.zg-lozenge--9  { --_tint-bg: var(--label-9-subtle-bg);  --_tint-fg: var(--label-9-subtle-fg);  --_solid-bg: var(--label-9-bg);  --_solid-fg: var(--label-9-fg); }
.zg-lozenge--10 { --_tint-bg: var(--label-10-subtle-bg); --_tint-fg: var(--label-10-subtle-fg); --_solid-bg: var(--label-10-bg); --_solid-fg: var(--label-10-fg); }

/* primary: one solid look (Figma type=primary — task state 보류 · 진행 중) */
.zg-lozenge--primary,
.zg-lozenge--primary.zg-lozenge--bold { background: var(--lozenge-primary-bg); color: var(--lozenge-primary-fg); }