/* 확인 모달(web/ui/confirmModal.js) — 네이티브 <dialog> 로 top-layer 에 올린다(P0-1, 2026-09-27).
 *   예전엔 position:fixed div(z-index 210)였는데, 트레이(tray.js)가 <dialog>.showModal() 로 top-layer 에
 *   올라가면 top-layer 뒤에 div 가 항상 묻혔다. 이제 confirmModal 자신도 top-layer 라 삽입 순서로 쌓여
 *   이미 열려 있는 트레이/모달 위에 항상 그려진다.
 *   안쪽 표기(sm-title·sm-sub·sm-check·sm-items 등)는 components.css 가 계속 소유한다 — 여긴 바깥 틀
 *   (예전 .sm-overlay + .sm-panel 두 겹)을 대체하는 dialog 자신의 자리·재질·진입 모션만 담당한다. */
dialog.cm-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: var(--sp-lg);
  box-sizing: border-box;
  width: min(440px, calc(100% - 2 * var(--sp-lg)));
  max-height: calc(100vh - 2 * var(--sp-lg));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--canvas);
  box-shadow: var(--shadow-product);
  color: var(--ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
dialog.cm-dialog:focus { outline: none; }
dialog.cm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.18s ease;
}

@starting-style {
  dialog.cm-dialog[open] { transform: scale(0.97); opacity: 0; }
  dialog.cm-dialog[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.cm-dialog, dialog.cm-dialog::backdrop { transition: none; }
}