/* ═══ SweetAlert2 모리그램 테마 ═══
 * 전 페이지 공통(headerAssets)으로 로드 — 앱의 모든 다이얼로그·토스트에 일괄 적용.
 * 원칙:
 *  - 색을 코드에서 inline 으로 지정한 곳(confirmButtonColor 등 30여 곳)은 inline 이
 *    이기므로 그대로 동작. 여기서는 "지정 안 했을 때의 기본 모양"만 다듬는다.
 *  - Phoenix 변수(--phoenix-*)가 있으면 따라가고, 없으면 명시값 폴백.
 *  - 다크 모드는 html[data-bs-theme="dark"] 스코프. */

/* ── 팝업 본체 ── */
div:where(.swal2-container) div:where(.swal2-popup) {
  border-radius: 18px;
  padding: 1.7rem 1.6rem 1.45rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18), 0 2px 10px rgba(15, 23, 42, .08);
  background: var(--phoenix-modal-bg, #fff);
  color: var(--phoenix-body-color, #31374a);
}

/* 기본 등장 애니메이션(통통 튀는 bounce)이 투박함의 주범 — 잔잔한 페이드+스케일로 교체 */
@keyframes mgSwalIn {
  from { opacity: 0; transform: scale(.965) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes mgSwalOut {
  to { opacity: 0; transform: scale(.97); }
}
div:where(.swal2-container) .swal2-popup.swal2-show { animation: mgSwalIn .18s ease-out; }
div:where(.swal2-container) .swal2-popup.swal2-hide { animation: mgSwalOut .13s ease-in forwards; }

/* 배경막 — 살짝 진하고 차분하게 */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation { background: rgba(13, 17, 23, .55); }

/* ── 타이포 ──
   원본 CSS 에 .swal2-title 등 plain 클래스(특이도 0,1,0) 규칙이 섞여 있어
   h2.swal2-title 형태(0,1,1)로 확실히 이긴다. */
div:where(.swal2-container) h2.swal2-title {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--phoenix-emphasis-color, #141824);
  padding-top: .2em;
}
div:where(.swal2-container) div.swal2-html-container {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--phoenix-secondary-color, #5f6b7c);
  margin-top: .55em;
}

/* ── 아이콘 — 크고 두꺼운 기본 링을 축소·경량화 (내부 도형 좌표가 5em 기준이라
     크기 대신 transform 스케일로 줄여 형태를 보존) ── */
div:where(.swal2-container) .swal2-icon {
  transform: scale(.74);
  margin: -.1em auto -.35em;
  border-width: .2em;
}
div:where(.swal2-container) .swal2-icon.swal2-success .swal2-success-ring { border-width: .2em; }

/* ── 버튼 ── */
div:where(.swal2-container) button:where(.swal2-styled) {
  border-radius: 10px;
  padding: .56em 1.35em;
  font-size: .86rem;
  font-weight: 700;
  box-shadow: none;
  transition: filter .12s, transform .06s;
}
div:where(.swal2-container) button:where(.swal2-styled):hover { filter: brightness(.94); }
div:where(.swal2-container) button:where(.swal2-styled):active { transform: scale(.985); }
div:where(.swal2-container) button:where(.swal2-styled):focus-visible {
  box-shadow: 0 0 0 3px rgba(56, 116, 255, .28);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: var(--phoenix-primary, #3874ff);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
  background-color: #edf0f5;
  color: #3b4250;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-deny {
  background-color: #f5e9ea;
  color: #b02a37;
}
div:where(.swal2-container) .swal2-actions { gap: .5rem; margin-top: 1.35em; }
/* ── 닫기(X) ──
   기본값은 제목과 같은 행에 흐름 배치라 48px 높이가 본문을 밀어내지 못하고
   목록형 내용과 겹친다(휴지통 모달에서 신고). 우상단 고정 + 제목 오른쪽 여백 확보. */
div:where(.swal2-container) div:where(.swal2-popup) { position: relative; }
div:where(.swal2-container) button:where(.swal2-close) {
  position: absolute; top: .4rem; right: .55rem; z-index: 3;
  width: 2rem; height: 2rem; font-size: 1.75rem; line-height: 1;
  border-radius: 8px;
}
div:where(.swal2-container) div:where(.swal2-popup):has(button:where(.swal2-close)) h2:where(.swal2-title) {
  padding-right: 2.4rem;
}
div:where(.swal2-container) button:where(.swal2-close):hover { color: var(--phoenix-primary, #3874ff); }

/* ── 입력 요소 — form-control 과 같은 결 ── */
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) select:where(.swal2-select),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
  border: 1px solid var(--phoenix-border-color, #d8dee8);
  border-radius: 10px;
  font-size: .92rem;
  box-shadow: none;
  color: inherit;
  background: transparent;
}
div:where(.swal2-container) input:where(.swal2-input) { height: 2.9em; }
div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) select:where(.swal2-select):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
  border-color: var(--phoenix-primary, #3874ff);
  box-shadow: 0 0 0 3px rgba(56, 116, 255, .18);
}
div:where(.swal2-container) .swal2-validation-message {
  border-radius: 10px;
  background: #fdf1f2;
  color: #b02a37;
  font-size: .82rem;
}

/* ── 타이머 진행바 ── */
div:where(.swal2-container) .swal2-timer-progress-bar {
  height: .18em;
  background: rgba(56, 116, 255, .55);
}

/* ── 토스트 — 원본이 .swal2-popup.swal2-toast(0,2,0) 특이도라 동형으로 맞춰 후로드로 이긴다 ── */
.swal2-popup.swal2-toast {
  border-radius: 12px;
  padding: .55em .9em;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .16), 0 1px 5px rgba(15, 23, 42, .1);
  background: var(--phoenix-modal-bg, #fff);
}
.swal2-popup.swal2-toast .swal2-title {
  font-size: .85rem;
  font-weight: 700;
  padding: 0;
  margin: .35em .6em;
}
.swal2-popup.swal2-toast .swal2-icon { transform: scale(.9); margin: 0 .1em 0 0; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { height: .14em; }

/* ── 다크 모드 ── */
html[data-bs-theme="dark"] div:where(.swal2-container) div:where(.swal2-popup) {
  background: #1b212c;
  color: #dde3ec;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);
}
html[data-bs-theme="dark"] div:where(.swal2-container) h2.swal2-title { color: #eef2f8; }
html[data-bs-theme="dark"] div:where(.swal2-container) div.swal2-html-container { color: #a6b0bf; }
html[data-bs-theme="dark"] div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
  background-color: #2a3240;
  color: #cfd6e0;
}
html[data-bs-theme="dark"] div:where(.swal2-container) button:where(.swal2-styled).swal2-deny {
  background-color: #3a262b;
  color: #e78791;
}
html[data-bs-theme="dark"] div:where(.swal2-container) input:where(.swal2-input),
html[data-bs-theme="dark"] div:where(.swal2-container) select:where(.swal2-select),
html[data-bs-theme="dark"] div:where(.swal2-container) textarea:where(.swal2-textarea) {
  border-color: #39424f;
  background: #151a23;
}
html[data-bs-theme="dark"] div:where(.swal2-container) .swal2-validation-message {
  background: #33232a;
  color: #e78791;
}
html[data-bs-theme="dark"] .swal2-popup.swal2-toast { background: #1b212c; }