/* COPIED from ~/Desktop/Design System/components/select.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 — Select  (components/select.css)
   The closed dropdown box. Requires tokens.css (+ icon.css, menu.css for the list).
   Spec: components/select.md · Figma: page "Dropdown menu" (51:7726), set 🧬 Dropdown (76:33998).

   <div class="zg-dropdown">
     <button type="button" class="zg-select" aria-haspopup="listbox" aria-expanded="false">
       <span class="zg-select__value">주간</span>
       <i class="zg-icon zg-icon--angle-down zg-select__chevron" aria-hidden="true"></i>
     </button>
     <div class="zg-menu" role="listbox" hidden>…</div>
   </div>

   look: (box) · --secondary      size: (md 36) · --sm 24      menu: .zg-dropdown--attached
   State comes from the markup: aria-expanded="true" (open), disabled.

   Where the options open (product rule, user v0.5.62):
   · below the box — unless the menu would run past the bottom of the screen and there's more room above:
     then the app adds .is-up to .zg-dropdown and it opens above (see placeDropdown() in select.md).
   · on a phone (viewport < 600px) the options come up in a Bottom sheet instead (.zg-select-sheet, needs
     bottom-sheet.css): handle · the field's name + × · the options as big rows; picking one closes it.
   ========================================================================== */
.zg-select {
  --_h: var(--field-height-md);
  --_icon: var(--icon-md);
  --_pr: var(--field-padding-x);
  --_font: var(--body-sm-size) / var(--body-sm-lh);
  --_bg: var(--field-bg);
  --_bg-hover: var(--field-bg-hover);
  --_line: var(--field-border);
  --_line-hover: var(--field-border-hover);
  --_lw: 1px;
  display: flex;
  align-items: center;
  gap: var(--field-gap);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--_h);
  margin: 0;
  padding-block: 0; padding-inline: var(--field-padding-x) var(--_pr);   /* the chevron's side is the end */
  border: 0;
  border-radius: var(--field-radius);
  background: var(--_bg);
  box-shadow: inset 0 0 0 var(--_lw) var(--_line);
  color: var(--field-fg);
  font: var(--font-regular) var(--_font) var(--font-sans);
  letter-spacing: var(--tracking);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.zg-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-select__value.is-placeholder { color: var(--field-placeholder); }
.zg-select > .zg-icon { --zg-icon-size: var(--_icon); color: var(--field-icon); }
/* the chevron is 16 at both sizes (Figma <Icon xxsm>) */
.zg-select > .zg-select__chevron { --zg-icon-size: var(--icon-sm); transition: transform var(--duration-fast) var(--ease-standard); }

/* states — hover / disabled match Text field (user) */
.zg-select:hover:not(:disabled, [aria-disabled="true"], [aria-expanded="true"]) { --_bg: var(--_bg-hover); --_line: var(--_line-hover); }
.zg-select[aria-expanded="true"] { --_line: var(--select-border-open); }
.zg-select[aria-expanded="true"] > .zg-select__chevron { transform: rotate(180deg); }
.zg-select:focus-visible { outline: none; --_line: var(--field-border-focus); --_lw: var(--field-focus-width); }
.zg-select[aria-invalid="true"] { --_line: var(--field-border-error); --_line-hover: var(--field-border-error); }
.zg-select:disabled,
.zg-select[aria-disabled="true"] { --_bg: var(--field-bg-disabled); --_line: var(--field-border-disabled); color: var(--field-fg-disabled); cursor: not-allowed; }
.zg-select:disabled > .zg-icon,
.zg-select[aria-disabled="true"] > .zg-icon { color: var(--field-icon-disabled); }

/* size */
.zg-select--sm { --_h: var(--field-height-sm); --_icon: var(--icon-sm); --_pr: var(--space-4); --_font: var(--body-xs-size) / var(--body-xs-lh); }
/* look: gray box, no line */
.zg-select--secondary { --_bg: var(--select-bg-secondary); --_bg-hover: var(--bg-muted); --_line: transparent; --_line-hover: transparent; }

/* ---- the box + its menu ---- */
.zg-dropdown { position: relative; display: block; }
.zg-dropdown > .zg-menu { position: absolute; z-index: var(--menu-z); top: calc(100% + var(--select-menu-gap)); inset-inline-start: 0; min-width: 100%; max-height: var(--select-menu-max-height); overflow-y: auto; overscroll-behavior: contain; }
/* any other popup (date picker, people picker …): same spot, sized by its content */
.zg-dropdown > .zg-dropdown__panel { position: absolute; z-index: var(--menu-z); top: calc(100% + var(--select-menu-gap)); inset-inline-start: 0; }
/* attached: the open menu continues the box (Figma configuration=one) */
.zg-dropdown--attached > .zg-select[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.zg-dropdown--attached > .zg-menu { top: calc(100% - 1px); border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; }

/* ---- opens above (.is-up, set by the app when the screen has no room below) ---- */
.zg-dropdown.is-up > :is(.zg-menu, .zg-dropdown__panel) { top: auto; bottom: calc(100% + var(--select-menu-gap)); }
/* ---- lined up on the right (.is-end, set by the app when the panel would run off the right edge, v0.5.101) ---- */
.zg-dropdown.is-end > :is(.zg-menu, .zg-dropdown__panel) { inset-inline-start: auto; inset-inline-end: 0; }
.zg-dropdown--attached.is-up > .zg-select[aria-expanded="true"] { border-radius: 0 0 var(--field-radius) var(--field-radius); }
.zg-dropdown--attached.is-up > .zg-menu { top: auto; bottom: calc(100% - 1px); border-radius: var(--menu-radius) var(--menu-radius) 0 0; }

/* ---- on a phone: the options in a Bottom sheet ----
   <dialog class="zg-sheet zg-select-sheet" aria-labelledby="ss-t">
     <div class="zg-sheet__handle" aria-hidden="true"></div>
     <div class="zg-sheet__bar"><h2 class="zg-sheet__title" id="ss-t">보기 방식</h2>
       <button type="button" class="zg-icon-button" aria-label="닫기"><i class="zg-icon zg-icon--lg zg-icon--close" aria-hidden="true"></i></button></div>
     <div class="zg-sheet__body"><div class="zg-menu zg-menu--embedded" role="listbox" aria-labelledby="ss-t">…the same options…</div></div>
   </dialog> */
.zg-select-sheet {
  --menu-item-height: var(--select-sheet-item-height);
  --menu-item-padding-x: var(--sheet-padding-x);
}
.zg-select-sheet .zg-menu { padding: var(--space-8) 0; font-size: var(--select-sheet-font-size); line-height: var(--select-sheet-line-height); }