dialog.app-dialog {
  box-sizing: border-box; margin: auto; padding: 0;
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  overflow: auto; border: 1px solid var(--ui-line, #e2e8f0);
  border-radius: var(--ui-radius, 12px); background: var(--ui-surface, #fff);
  color: var(--ui-ink, #21324b); box-shadow: 0 16px 40px #21324b1f;
  font: 13px/1.6 'Noto Sans KR', sans-serif;
}
.app-dialog::backdrop { background: rgb(0 0 0 / .4); backdrop-filter: blur(3px); }
.app-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ui-line, #e2e8f0); }
.app-dialog h2 { margin: 0; font-size: 14px; font-weight: 700; }
.app-dialog-body { padding: 20px; }
.app-dialog p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; }
.app-dialog button { font: inherit; cursor: pointer; border-radius: 8px; padding: 8px 16px; border: 1px solid var(--ui-line, #e2e8f0); }
.app-dialog .app-dialog-ok { color: white; background: var(--ui-primary, #2563eb); border-color: var(--ui-primary, #2563eb); }
.app-dialog .app-dialog-cancel { color: var(--ui-ink, #21324b); background: #fff; }
.app-dialog .app-dialog-close { padding: 0; width: 32px; height: 32px; border: 0; background: transparent; color: #64748b; font-size: 22px; }
.app-dialog-field:not([hidden]) { display: grid; gap: 6px; margin-top: 16px; }
.app-dialog input { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 12px; font: inherit; color: inherit; border: 1px solid #cbd5e1; border-radius: 8px; background: white; }
.app-dialog :focus-visible { outline: 2px solid var(--ui-primary, #2563eb); outline-offset: 2px; }
html.app-modal-open { overflow: hidden; }
/* Fallback only: each panel's max-w-* utility must retain its own size limit. */
:where([role=dialog][aria-modal=true] > :is(.ui-panel,.ui-modal-surface)) { max-width: calc(100vw - 24px); }
@media print { .app-dialog { display: none !important; } }
