/* 오버레이(화면 전체 창) - 규칙 claude_common/ui/window.md
   <dialog class="overlay">로 만들고 열기·닫기·뒤로 가기·쓰던 내용 확인은 modal.js가 맡는다(Esc로는 닫지 않는다).
   머리(.overlay-head: ←(SVG) + 제목, 오른쪽 아이콘, 끝 X) + 본문(.overlay-body, 본문만 스크롤). 오른쪽에서 밀려 들어온다(0.22초) */
dialog.overlay {
  width: 100%; max-width: none;
  height: calc(100dvh - var(--kb, 0px)); max-height: none; /* --kb: 휴대폰 자판 높이(bottom-sheet.js가 잰다) - 자판이 떠도 머리가 밀려나지 않게 */
  margin: 0; inset: 0 0 auto;
  padding: 0; border: 0; border-radius: 0;
  background: var(--uk-bg);
  color: var(--uk-fg);
}
dialog.overlay[open] { display: flex; flex-direction: column; animation: overlay-in .22s ease; }
dialog.overlay::backdrop { background: transparent; }
html:has(dialog.overlay[open]) { overflow: hidden; padding-right: var(--uk-scroll-gap, 0px); }
@keyframes overlay-in { from { transform: translateX(100%); opacity: .6; } }

.overlay-head {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--uk-hd-gap, 4px);
  /* 왼쪽 4(--uk-hd-start) + ← 상자 44 → 그림이 12px = 메인 머리줄 ☰·공통 뷰어 ←와 같은 자리, 오른쪽 끝 12(--uk-hd-edge) - ui/navigation.md (2026-10-24) */
  height: var(--uk-hd-h, 56px); padding: 0 var(--uk-hd-edge, 12px) 0 var(--uk-hd-start, 4px);
  background: var(--uk-head);
  box-shadow: 0 6px 16px rgba(var(--uk-shc), .12);
}
.overlay-back {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: var(--uk-hd-btn, 44px); padding: 0 8px 0 0; /* ← 그림은 44 상자 가운데(좌우 8), 상자~글자 4px */
  border: 0; border-radius: var(--uk-r-md); background: none; color: var(--uk-fg);
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.overlay-back > svg { flex: none; width: var(--uk-hd-icon, 28px); height: var(--uk-hd-icon, 28px); margin: 0 calc((var(--uk-hd-btn, 44px) - var(--uk-hd-icon, 28px)) / 2); stroke-width: var(--uk-hd-stroke, 1.3); } /* ← = SVG arrow-left(M19 12H5M12 19l-7-7 7-7, ui/icons.md) - 글자 기호 금지 */
.overlay-back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overlay-back:hover { background: var(--uk-sunk); }
.overlay-back:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.overlay-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* 닫기 X - 층으로 뜨는 창은 모두 머리 오른쪽 끝에 X(2026-10-23 사용자 기준, ui/window.md). 머리줄 단추 44 · 아이콘 28 · 선 1.3, PC·휴대폰 같다.
   <button type="button" class="overlay-close" data-modal-close aria-label="닫기"><svg viewBox="0 0 24 24" …><path d="M6 6l12 12M18 6 6 18"/></svg></button> */
.overlay-close { flex: none; margin-left: auto; display: grid; place-items: center; width: var(--uk-hd-btn, 44px); height: var(--uk-hd-btn, 44px); padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--uk-fg); cursor: pointer; }
.overlay-actions + .overlay-close { margin-left: var(--uk-hd-gap, 4px); }
.overlay-close:hover { background: var(--uk-sunk); }
.overlay-close:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: -2px; }
.overlay-close svg { display: block; width: var(--uk-hd-icon, 28px); height: var(--uk-hd-icon, 28px); stroke-width: var(--uk-hd-stroke, 1.3); }
.overlay-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.overlay-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--uk-head); }

@media (prefers-reduced-motion: reduce) { dialog.overlay[open] { animation: none; } }