/* 확인창·알림창 - 동작은 ui-confirm.js, 규칙은 claude_common/ui/ui-confirm.md
   왼쪽 둥근 그림 · 오른쪽 제목 + 문구, 아래 [취소] | [확인] 같은 폭. 휴대폰에서도 가운데 작은 창 그대로 */
html:has(dialog:modal) { overflow: hidden; padding-right: var(--uk-scroll-gap, 0px); }

dialog.ui-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--uk-r-lg);
  background: var(--uk-surface);
  color: var(--uk-fg);
  box-shadow: var(--uk-up-lg);
  max-height: calc(100dvh - 32px); /* 화면보다 커지지 않는다 - 문구가 길면 문구만 스크롤, 버튼 줄은 제자리 */
}
dialog.ui-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog.ui-dialog .ui-dialog-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog.ui-dialog .ui-dialog-foot { flex: none; }
dialog.ui-dialog::backdrop { background: var(--uk-backdrop); } /* 옅은 막 - 기본 원칙 "떠 있는 창" */

.ui-dialog-main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 22px 22px 6px; }
.ui-dialog-icon {
  grid-row: 1 / span 2;
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--uk-brand-light);
}
/* 속 그림은 마스크 - 색을 테마 변수로 칠한다 (참고 = 파랑 i, 주의 = 노랑 !) */
.ui-dialog-icon::after {
  content: ""; position: absolute; inset: 0;
  background: var(--uk-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center / 24px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center / 24px no-repeat;
}
dialog.ui-dialog.is-danger .ui-dialog-icon { background: var(--uk-warn-light); }
dialog.ui-dialog.is-danger .ui-dialog-icon::after {
  background: var(--uk-warn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center / 26px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.ui-dialog-title { font-size: 17px; font-weight: 700; margin: 2px 0 4px; line-height: 1.4; }
.ui-dialog-body { line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; color: var(--uk-muted); font-size: 14.5px; }

.ui-dialog-foot { display: flex; gap: 10px; padding: 16px 22px 22px; }
.ui-dialog-btn {
  flex: 1 1 0; min-width: 0;
  border: 0; border-radius: var(--uk-r-md); padding: 10px 14px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--uk-surface); color: var(--uk-fg); box-shadow: var(--uk-up-sm);
}
.ui-dialog-btn.is-primary { background: var(--uk-brand); color: var(--uk-on-strong); }
.ui-dialog-btn.is-danger { background: var(--uk-danger); color: var(--uk-on-strong); }
.ui-dialog-btn:active { box-shadow: var(--uk-down); }
/* 골라진 버튼은 늘 테두리 - 마우스로 연 창에서도 Enter·←/→가 무엇을 누르는지 보이게 */
.ui-dialog-btn:focus { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.ui-dialog-btn.is-danger:focus { outline-color: var(--uk-danger); }

dialog.ui-dialog[open] { animation: ui-dialog-in .16s ease; }
dialog.ui-dialog[open]::backdrop { animation: ui-dialog-fade .16s ease; }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes ui-dialog-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.ui-dialog[open], dialog.ui-dialog[open]::backdrop { animation: none; } }

/* confirmText - 정해진 글자를 입력해야 확인이 눌리는 칸(되돌릴 수 없는 일) */
.ui-dialog-type { grid-column: 2; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ui-dialog-type[hidden] { display: none; }  /* 위 display: flex가 hidden을 이기지 않게 */
.ui-dialog-type-hint { font-size: 13px; color: var(--uk-fg); font-weight: 600; }
.ui-dialog-type-input { height: 36px; border: 0; border-radius: var(--uk-r-sm); padding: 0 12px; background: var(--uk-sunk); box-shadow: var(--uk-down); font: inherit; font-size: 14px; color: var(--uk-fg); }
.ui-dialog-type-input:focus { outline: none; box-shadow: 0 0 0 2px var(--uk-danger); background: var(--uk-surface); }
.ui-dialog-btn:disabled { opacity: .45; cursor: not-allowed; }