/* 펼침 메뉴 · 도움말 말풍선 · 서랍 - 동작은 drawer-popover.js, 규칙 claude_common/ui/drawer-popover.md
   여러 프로젝트의 상단바 펼침 메뉴, 풀다운, .help-tip/.help-bubble, 사이드바 서랍 CSS를 합친 것(2026-10-04)
   겹침 층은 ui/window.md "겹침 순서" - 서랍은 오버레이보다 아래, 펼침 메뉴·말풍선은 그 위 */
:root {
  --pop-z: var(--z-system, 4000);                 /* 펼침 메뉴·말풍선 - 시스템 층 */
  --drawer-z: calc(var(--z-overlay, 1000) - 15); /* 서랍(막은 -1) - 오버레이 층보다 아래 */
  --help-bg: var(--uk-tip-bg);  /* 말풍선 - 짙은 회색 면 + 흰 글자(기준 이미지 TOOLTIP, 2026-09-27) */
  --help-fg: var(--uk-tip-fg);
}

/* ── 펼침 메뉴 ── */
.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
  position: fixed; /* 자리는 스크립트가 버튼 아래(모자라면 위)로 잡는다 - 창 본문처럼 스크롤되는 칸 안에서 잘리지 않게 */
  z-index: var(--pop-z);
  min-width: 180px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; /* 화면보다 커지지 않는다 - 항목이 많으면 메뉴 안에서 스크롤(2026-10-05) */
  padding: 6px;
  background: var(--uk-surface);
  color: var(--uk-fg);
  border-radius: var(--uk-r-md);
  box-shadow: var(--uk-up-lg);
  overflow-y: auto;
  overscroll-behavior: contain; /* 넘치면 메뉴 안에서만 스크롤 */
}
.dropdown-menu[hidden] { display: none; }
.dropdown-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--uk-line); }
.dropdown-section { padding: 6px 10px 2px; font-size: 12px; color: var(--uk-muted); }
.dropdown-divider { height: 1px; background: var(--uk-line); margin: 4px 0; }
/* 항목 16px · 누르는 높이 48px(2026-08-26 "메뉴는 16으로 전부", 굵게 하지 않음) */
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 12px;
  border: 0; border-radius: var(--uk-r-sm); background: none;
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.5;
  color: var(--uk-fg); text-align: left; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.dropdown-item > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--uk-muted); }
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--uk-head); outline: none; }
.dropdown-item:focus-visible { box-shadow: inset 0 0 0 2px var(--uk-brand); }
.dropdown-item.is-selected, .dropdown-item.is-current { background: var(--uk-pick-light); color: var(--uk-pick-dark); font-weight: 600; }
.dropdown-item.is-selected > svg, .dropdown-item.is-current > svg { color: var(--uk-pick); }
.dropdown-item.is-danger, .dropdown-item.is-danger > svg { color: var(--uk-danger); }
.dropdown-item.is-danger:hover { background: var(--uk-danger-light); }
.dropdown-item:disabled, .dropdown-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: none; }
.dropdown-menu form { margin: 0; }
.dropdown-btn[aria-expanded="true"] { box-shadow: var(--uk-down); }

/* ── 도움말 말풍선 ── */
.help-wrap { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.help-tip {
  width: 18px; height: 18px; padding: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: var(--uk-surface); box-shadow: var(--uk-up-sm);
  color: var(--uk-muted); font: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.help-tip:hover, .help-tip[aria-expanded="true"] { border-color: var(--uk-brand); color: var(--uk-brand); }
.help-bubble {
  position: fixed; /* 자리는 스크립트가 [?] 아래(모자라면 위)로 잡는다 */
  z-index: var(--pop-z);
  width: max-content; max-width: min(20rem, calc(100vw - 16px));
  padding: 9px 12px; border-radius: var(--uk-r-sm);
  background: var(--help-bg); color: var(--help-fg);
  font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; word-break: keep-all;
  box-shadow: var(--uk-up-sm);
}
.help-bubble[hidden] { display: none; }
.help-bubble b { color: var(--help-fg); }
/* 꼬리 - [?]를 가리킨다(--tail은 스크립트가 잰다) */
.help-bubble::before {
  content: ""; position: absolute; top: -5px; left: var(--tail, 10px);
  border: 5px solid transparent; border-top: 0; border-bottom-color: var(--help-bg);
}
.help-bubble.is-above::before { top: auto; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--help-bg); }

/* ── 서랍 ── 언제 서랍이 되는지(폭 경계)는 프로젝트가 정한다. 늘 붙어 있는 PC 사이드바는 프로젝트 CSS가 이 규칙을 덮는다 */
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: var(--drawer-z);
  width: min(280px, 85vw);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--uk-surface);
  color: var(--uk-fg);
  box-shadow: var(--uk-up-lg);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
.drawer-backdrop {
  position: fixed; inset: 0;
  z-index: calc(var(--drawer-z) - 1);
  background: var(--uk-scrim);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.drawer-backdrop.is-active { opacity: 1; pointer-events: auto; }
html:has(.drawer.is-open) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer.is-open, .drawer-backdrop { transition: none; } }