/* 앱 안 메뉴 막대와 메뉴(X-04.1·X-04.3·X-04.4·X-04.7, D-01). 높이·글꼴은 macOS 메뉴 막대 느낌 [recall, unverified]. */

.menubar {
  display: flex;
  align-items: stretch;
  height: var(--h-menubar);
  padding: 0 6px;
  background: var(--menubar-bg);
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  font-size: var(--fs-menu);
  color: var(--menu-text);
}

.menubar-title {
  display: flex;
  align-items: center;
  padding: 0 9px;
  margin: 2px 0;
  border-radius: 4px;
  white-space: nowrap;
  cursor: default;
  outline: none;
}

.menubar-title.is-app-menu { font-weight: 700; }
.menubar-title.is-open,
.menubar-title:focus-visible { background: var(--menu-highlight); color: #fff; }

/* 메뉴 패널은 문서 맨 위 층에 떠 있고, 층 자체는 포인터를 통과시킨다 */
.menu-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.menu {
  position: fixed;
  min-width: 220px;
  max-height: calc(100vh - var(--h-menubar));
  overflow-y: auto;
  padding: 4px 0;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
  font-size: var(--fs-menu);
  color: var(--menu-text);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.menu-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 14px;
  align-items: center;
  column-gap: 4px;
  height: 22px;
  margin: 0 4px;
  padding: 0 6px 0 4px;
  border-radius: 4px;
  white-space: nowrap;
  outline: none;
  cursor: default;
}

.menu-item:focus,
.menu-item.is-open { background: var(--menu-highlight); color: #fff; }
.menu-item[aria-disabled="true"] { color: var(--menu-text-disabled); }
.menu-item[aria-disabled="true"]:focus { background: rgb(255 255 255 / 0.08); color: var(--menu-text-disabled); }

/* 체크 표시(X-04.7)와 하위 메뉴 화살표는 기호라 문자열 id가 아니다 */
.menu-check { text-align: center; }
.menu-item[aria-checked="true"] > .menu-check::before { content: '\2713'; }
.menu-arrow::before { content: '\25B8'; }

.menu-label { overflow: hidden; text-overflow: ellipsis; padding-right: 24px; }

/* 단축키(X-04.4): ⌃⌥⇧⌘ 기호 + 키, 고정 너비 숫자 */
.menu-shortcut {
  color: var(--menu-shortcut);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: right;
}

.menu-item:focus > .menu-shortcut { color: rgb(255 255 255 / 0.85); }
.menu-item[aria-disabled="true"] > .menu-shortcut { color: var(--menu-text-disabled); }
/* 지금 모드에서 브라우저가 가져가는 키(X-03.9): 표기만 흐림 */
.menu-shortcut.is-unreachable, .menu-item:focus > .menu-shortcut.is-unreachable { color: var(--menu-text-disabled); }

.menu-separator {
  height: 1px;
  margin: 5px 10px;
  background: var(--menu-border);
}