/* COPIED from ~/Desktop/Design System/components/tabs.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 — Tabs  (components/tabs.css)  · Molecule (tab items + Icon + slider arrows)
   Requires tokens.css, badge.css (the count) (+ icon.css). Spec: components/tabs.md
   Figma: page "Tabs" (5:1656), sets 🧬 Tabs (128:7399), 🛠️ Parts: item (128:7290), slider.arrows (128:7993).

   <div class="zg-tabs" role="tablist" aria-label="참석 여부">
     <button type="button" class="zg-tab" role="tab" aria-selected="true">
       <span class="zg-tab__label">참석</span><span class="zg-badge zg-badge--neutral">12</span>
     </button>
     <button type="button" class="zg-tab" role="tab" aria-selected="false">…</button>
   </div>

   look: (common — hug, underline under the content) · --wide (equal widths, full underline) · --pill (round category pills)
   A row that doesn't fit scrolls sideways. Wrap it in .zg-tabs-slider with two .zg-tabs-slider__arrow
   buttons (start them [hidden]); the app shows the arrows only while the row overflows.
   ========================================================================== */
.zg-tabs {
  position: relative;
  display: flex;
  gap: var(--tab-gap);
  padding-bottom: var(--tab-indicator-size);
  /* the row's 1px baseline, inset to the first and last label. A background with attachment:local
     spans the whole scroll width, so it stays under every tab in the slider too. */
  background: linear-gradient(var(--tab-baseline), var(--tab-baseline)) var(--tab-padding-x) 100% / calc(100% - var(--tab-padding-x) * 2) var(--tab-baseline-size) no-repeat;
  background-attachment: local;
  font: var(--font-medium) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans);
  letter-spacing: var(--tracking);
  /* never spill out of the area: a row that doesn't fit scrolls (arrows: .zg-tabs-slider) */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.zg-tabs::-webkit-scrollbar { display: none; }
.zg-tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  box-sizing: border-box;
  height: var(--tab-height);
  margin: 0;
  padding: 0 var(--tab-padding-x);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tab-fg);
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zg-tab > .zg-icon { --zg-icon-size: var(--icon-md); color: inherit; }
/* trailing count = Badge --neutral. As a flex item centred in the tab its box centre already sits on the
   label's optical middle (measured: Hangul ink box centre = badge centre at 14/20), so drop the
   badge's inline-text lift. */
.zg-tab > .zg-badge { translate: none; }
.zg-tab[aria-selected="true"] > .zg-badge--neutral { background: var(--tab-badge-active-bg); color: var(--tab-badge-active-fg); }
.zg-tab:is(:disabled, [aria-disabled="true"]) > .zg-badge--neutral { color: var(--tab-fg-disabled); }
/* indicator: under the content (padding to padding), sits on the baseline */
.zg-tab::after {
  content: "";
  position: absolute;
  left: var(--tab-padding-x);
  right: var(--tab-padding-x);
  bottom: calc(var(--tab-indicator-size) * -1);
  height: var(--tab-indicator-size);
  background: transparent;
  z-index: 1;
}
.zg-tab:hover:not(:disabled, [aria-disabled="true"])::after { background: var(--tab-indicator-hover); }
.zg-tab[aria-selected="true"] { color: var(--tab-fg-active); }
.zg-tab[aria-selected="true"]::after,
.zg-tab[aria-selected="true"]:hover::after { background: var(--tab-indicator); }
/* focus inside the tab: an outer ring would be clipped by the slider's scroll area */
.zg-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--field-focus-width) var(--border-focus); }
.zg-tab:disabled,
.zg-tab[aria-disabled="true"] { color: var(--tab-fg-disabled); cursor: not-allowed; }

/* ---- --wide: equal widths, full-width underline, gray hover (Figma variant=wide) ---- */
.zg-tabs--wide {
  gap: 0;
  padding: var(--space-8) 0;
  box-shadow: inset 0 -1px 0 var(--tab-wide-border);
  font-weight: var(--font-regular);
}
.zg-tabs--wide { background: none; }
.zg-tabs--wide > .zg-tab { flex: 1 1 0; } /* equal widths, but never squeezed below the label — then it scrolls */
.zg-tabs--wide > .zg-tab::after { left: 0; right: 0; bottom: calc(var(--space-8) * -1); }
.zg-tabs--wide > .zg-tab:hover:not(:disabled, [aria-disabled="true"]) { background: var(--tab-wide-bg-hover); }
.zg-tabs--wide > .zg-tab:hover:not([aria-selected="true"])::after { background: transparent; }
.zg-tabs--wide > .zg-tab:is(:disabled, [aria-disabled="true"]) { background: var(--tab-wide-bg-disabled); }

/* ---- --pill: round category pills, 4 apart (Figma Parts: search.category). An icon-only pill is a
        40 circle: give it aria-label (and a tooltip). The count (Badge --neutral-strong) takes no room:
        it rides the bottom-right corner — the 4–5 o'clock edge of a circle — hanging 3px below the pill
        so it never covers a word (Figma's flush corner covered 2px of the last glyph). The row keeps
        those 3px so the scroll area doesn't clip it. ---- */
.zg-tabs--pill { gap: var(--tab-pill-gap); padding-bottom: var(--tab-pill-count-drop); background: none; font-weight: var(--font-medium); }
.zg-tabs--pill > .zg-tab {
  gap: var(--space-8);
  height: var(--tab-pill-height);
  padding: 0 var(--tab-pill-padding-x);
  border-radius: var(--radius-full);
  background: var(--tab-pill-bg);
  color: var(--tab-pill-fg);
  transition: background var(--duration-fast) var(--ease-standard);
}
.zg-tabs--pill > .zg-tab::after { display: none; }
/* a word keeps 4 more on its outer sides (Figma "textType" frame). Next to a glyph the left 4 is dropped:
   the glyph's artboard already carries ~3px of air, so glyph-side and word-side edges still look even. */
.zg-tabs--pill .zg-tab__label { padding: 0 var(--space-4); }
.zg-tabs--pill .zg-icon + .zg-tab__label { padding-inline-start: 0; }
.zg-tabs--pill > .zg-tab:hover:not(:disabled, [aria-disabled="true"], [aria-selected="true"]) { background: var(--tab-pill-bg-hover); }
.zg-tabs--pill > .zg-tab[aria-selected="true"] { background: var(--tab-pill-bg-active); color: var(--tab-pill-fg-active); }
.zg-tabs--pill > .zg-tab > .zg-badge { position: absolute; inset-inline-end: 0; bottom: calc(var(--tab-pill-count-drop) * -1); z-index: 1; }
/* the selected pill's count switches to the Badge --added look (light chip, primary number) */
.zg-tabs--pill > .zg-tab[aria-selected="true"] > .zg-badge { background: var(--tab-pill-badge-active-bg); color: var(--tab-pill-badge-active-fg); box-shadow: 0 0 0 2px var(--tab-pill-badge-ring); }
/* dark theme: the selected pill turns light (inverse), so its count is solid primary with a white number and no ring
   (user, v0.5.116 — the dark --added, a 16% blue tint with a light-blue number, vanished on it) */
.zg-tabs--pill > .zg-tab:is(:disabled, [aria-disabled="true"]) { background: var(--bg-disabled); }

/* ---- slider: when the row overflows, two round arrows page through it (Figma variant=slider) ---- */
.zg-tabs-slider { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.zg-tabs-slider > .zg-tabs { flex: 1; min-width: 0; }
.zg-tabs-slider__arrow {
  flex: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--tab-arrow-size);
  height: var(--tab-arrow-size);
  margin: 0 0 var(--tab-indicator-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--bg-default);
  box-shadow: inset 0 0 0 1px var(--tab-arrow-line);
  color: var(--icon-default);
  cursor: pointer;
}
.zg-tabs-slider__arrow[hidden] { display: none; } /* the row fits: no arrows */
.zg-tabs-slider:has(> .zg-tabs--wide) > .zg-tabs-slider__arrow { margin-bottom: 0; }
.zg-tabs-slider:has(> .zg-tabs--pill) > .zg-tabs-slider__arrow { margin-bottom: var(--tab-pill-count-drop); }
.zg-tabs-slider__arrow > .zg-icon { --zg-icon-size: var(--icon-xs); color: inherit; }
.zg-tabs-slider__arrow:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--tab-arrow-line-hover); color: var(--icon-strong); }
.zg-tabs-slider__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.zg-tabs-slider__arrow:disabled { color: var(--icon-disabled); cursor: default; }