/* COPIED from ~/Desktop/Design System/components/menu.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 — Menu  (components/menu.css)
   A list panel: select options, "more" menus, pickers. Requires tokens.css
   (+ icon.css; checkbox.css / radio.css / avatar.css when items use them).
   Spec: components/menu.md · Figma: page "Select" (5:1652) panel + items, and the items of page "Dropdown menu".

   <div class="zg-menu" role="menu">
     <button type="button" class="zg-menu__item" role="menuitem">
       <i class="zg-icon zg-icon--pen" aria-hidden="true"></i><span class="zg-menu__label">이름 바꾸기</span>
     </button>
     <hr class="zg-menu__divider">
     <button type="button" class="zg-menu__item" role="menuitem" aria-disabled="true">…</button>
   </div>

   selected look: (blue text) · .zg-menu--filled · .zg-menu--filled-gray
   selected item: aria-selected="true" / aria-checked="true" / .is-selected / a checked input inside
   ========================================================================== */
.zg-menu {
  /* checkbox / radio parts placed inside items read these */
  --_size: 18px;
  --_icon: var(--icon-md);
  --_on: var(--check-bg-checked);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: max-content;
  min-width: var(--menu-min-width);
  max-width: min(360px, 100vw);
  margin: 0;
  padding: var(--menu-padding-y) 0;
  border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius);
  background: var(--menu-bg);
  box-shadow: var(--menu-shadow);
  color: var(--menu-item-fg);
  font: var(--font-regular) var(--body-sm-size) / var(--body-sm-lh) var(--font-sans);
  letter-spacing: var(--tracking);
  list-style: none;
}
.zg-menu[hidden] { display: none; }
/* embedded: the list part of a bigger panel (Combobox body) — no frame of its own, full width */
.zg-menu--embedded { width: 100%; min-width: 0; max-width: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

.zg-menu__item {
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--menu-item-height);
  margin: 0;
  padding: 0 var(--menu-item-padding-x);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zg-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-menu__item > .zg-icon { --zg-icon-size: var(--_icon); color: var(--icon-default); }
/* leading marks: a board label 4 smaller than the slot (a solid square reads as big as a glyph with air), a work icon at the slot */
.zg-menu__item > .zg-board-label { --_size: calc(var(--_icon) - 4px); flex: none; margin-inline: 2px; } /* centred in the 20 slot, so names line up with glyph / avatar rows */
.zg-menu__item > .zg-object { --zg-object-size: var(--_icon); flex: none; }
/* second line (Figma item.custom): label + 11/16 description */
.zg-menu__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zg-menu__desc { color: var(--menu-desc); font-size: var(--body-2xs-size); line-height: var(--body-2xs-lh); }
.zg-menu__item:has(> .zg-menu__text) { padding-top: var(--space-8); padding-bottom: var(--space-8); }
/* trailing: shortcut, hint, switch, count */
.zg-menu__trailing { margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); font-size: var(--body-2xs-size); line-height: var(--body-2xs-lh); }
/* --keys: a keyboard shortcut (⌘⇧↑ · ⇧Tab) — keys are pressed left to right in every language, and drawn in the base
   face: some scripts' fonts draw ⇧ like ↑ (Hiragino: "⌘⇧↑" would read "⌘↑↑") */
.zg-menu__trailing--keys { direction: ltr; unicode-bidi: isolate; font-family: "Pretendard Variable", Pretendard, var(--font-sans); }
/* --wrap: long names wrap instead of ending in "…" (pickers: 그룹명이 긴 경우 줄바꿈); marks sit on the first line */
.zg-menu--wrap .zg-menu__item { align-items: flex-start; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.zg-menu--wrap .zg-menu__label { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.zg-menu--wrap .zg-menu__item > :not(.zg-menu__label, .zg-menu__text) { margin-top: calc((var(--body-sm-lh) - var(--_mark-h, var(--_icon))) / 2); }
.zg-menu--wrap .zg-menu__item > .zg-board-label { --_mark-h: calc(var(--_icon) - 4px); }
.zg-menu--wrap .zg-menu__item > .zg-checkbox__box { --_mark-h: 18px; }   /* the checkbox's common box */
/* trailing check that shows only on the selected item */
.zg-menu__check { margin-inline-start: auto; }
.zg-menu__item:not([aria-selected="true"], [aria-checked="true"], .is-selected) > .zg-menu__check { visibility: hidden; }

/* states */
.zg-menu__item:hover:not(:disabled, [aria-disabled="true"], :has(> input:disabled)) { background: var(--menu-item-bg-hover); }
.zg-menu__item:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--field-focus-width) var(--border-focus); }
.zg-menu__item:is([aria-selected="true"], [aria-checked="true"], .is-selected, :has(> input:checked)) { color: var(--menu-item-fg-selected); }
.zg-menu__item:is([aria-selected="true"], [aria-checked="true"], .is-selected) > .zg-icon { color: currentColor; }
/* a switch item (Switch in the trailing area): while it's off, the name drops one tone (product rule, user v0.5.77) */
.zg-menu__item:has(.zg-switch__input:not(:checked)) > :is(.zg-menu__label, .zg-menu__text, .zg-icon) { color: var(--menu-item-fg-off); }
.zg-menu__item:has(.zg-switch__input) > .zg-menu__label { transition: color var(--duration-fast) var(--ease-standard); }
/* destructive (product rule, user v0.5.77): 삭제 · 나가기 · 연결 끊기 may be red — words and glyph. Last, after a divider. */
.zg-menu__item--danger { color: var(--menu-item-fg-danger); }
.zg-menu__item--danger > .zg-icon { color: currentColor; }
.zg-menu__item:is(:disabled, [aria-disabled="true"], :has(> input:disabled)) { background: var(--menu-item-bg-disabled); color: var(--menu-item-fg-disabled); cursor: not-allowed; }
.zg-menu__item:is(:disabled, [aria-disabled="true"], :has(> input:disabled)) > .zg-icon { color: var(--icon-disabled); }

/* selected looks */
.zg-menu--filled { --_sel-bg: var(--menu-item-bg-filled); }
.zg-menu--filled-gray { --_sel-bg: var(--menu-item-bg-filled-gray); }
:is(.zg-menu--filled, .zg-menu--filled-gray) .zg-menu__item:is([aria-selected="true"], [aria-checked="true"], .is-selected, :has(> input:checked)) { background: var(--_sel-bg); color: var(--menu-item-fg-filled); }
:is(.zg-menu--filled, .zg-menu--filled-gray) .zg-menu__item:is([aria-selected="true"], [aria-checked="true"], .is-selected, :has(> input:checked)) :is(.zg-icon, .zg-menu__trailing, .zg-menu__desc) { color: inherit; }

/* a checked box on a filled row would melt into it: keep its outline */
:is(.zg-menu--filled, .zg-menu--filled-gray) .zg-menu__item .zg-checkbox__input:checked + .zg-checkbox__box { box-shadow: inset 0 0 0 1px var(--menu-item-fg-filled); }

.zg-menu__divider { flex: none; height: 1px; margin: var(--space-4) 0; border: 0; background: var(--menu-divider); }
/* a group title (the Editor's slash menu: 기본 블록 · 목록 · 기타) — after a divider, or first */
.zg-menu__heading { flex: none; margin: 0; padding: var(--space-8) var(--menu-item-padding-x) var(--space-4); color: var(--menu-heading); font: var(--font-medium) var(--body-2xs-size) / var(--body-2xs-lh) var(--font-sans); letter-spacing: var(--tracking); }