/* ==========================================================================
   dialog-form · alert-box — 모달 안에 들어가는 폼과 결과 알림

   modal.css 가 바깥 껍데기를 맡고, 이 파일은 안쪽 내용만 맡는다.
   폼 칸은 field.css, 버튼은 button.css 를 그대로 쓴다.
   ========================================================================== */

/* --- 모달 안 폼 --------------------------------------------------------- */

.dialog-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.dialog-form__head {
  flex: none;
  padding: var(--sp-6) var(--sp-12) var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-line-soft);
}

.dialog-form__title {
  margin: 0;
  color: var(--c-text-strong);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.dialog-form__desc {
  margin: var(--sp-2) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* 되돌릴 수 없는 창에서 "무엇이 지워지고 무엇이 남는지" 를 먼저 적는다
   `[2026-09-22]`. 닫고 나서 알면 늦다 */
.dialog-form__notes {
  /* base 가 ul 의 마커를 지운다. 여기서는 항목이 셋이라 점이 있어야 훑힌다 */
  margin: 0;
  padding-left: var(--sp-5);
  list-style: disc;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.dialog-form__notes li + li { margin-top: var(--sp-1); }

/* 칸이 많아 화면을 넘기면 여기만 스크롤한다. 버튼 줄은 제자리에 남는다 */
.dialog-form__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 0;
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialog-form__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: flex-end;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
}

/* .btn--md 는 18px 이다. 모달 버튼 줄에서는 두 개가 나란히 서므로 한 단계 줄인다 */
.dialog-form__actions .btn { font-size: var(--fs-md); }

@media (min-width: 768px) {
  .dialog-form__head { padding: var(--sp-6) var(--sp-16) var(--sp-4) var(--sp-8); }
  .dialog-form__body { padding: var(--sp-6) var(--sp-8); }
  .dialog-form__actions { padding: var(--sp-5) var(--sp-8); }
}

/* --- 결과 알림 ---------------------------------------------------------- */

.alert-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6) var(--sp-8);
  text-align: center;
}

/* 색만으로 알리지 않는다 — 체크 표시와 문구를 함께 쓴다 */
.alert-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--c-surface);
  border-radius: 50%;
  color: var(--c-blue-deep);
}

/* 성공과 실패를 가른다 `[2026-10-02]`.

   이 상자는 "저장했다" 와 "저장하지 못했다" 를 **같은 체크 표시**로 알리고
   있었다. "Could not close your account" 위에 체크가 떠서, 실패한 줄 모르고
   닫는다 — 아이콘이 글보다 먼저 읽히기 때문이다.

   표시 두 개를 다 그려 두고 겉 클래스(.alert-box--success/--error)로 하나만
   보인다. JS 는 클래스만 바꾸면 되고, JS 없이 서버가 그려 보낼 때도 맞는다. */
.alert-box__mark { display: none; }
.alert-box--success .alert-box__mark--success { display: block; }
.alert-box--error   .alert-box__mark--error   { display: block; }

/* 색만으로 알리지 않는다 — 아이콘 모양·제목·문구가 함께 말한다.
   색은 그 셋을 거드는 자리다 */
.alert-box--error .alert-box__icon {
  background: #fdecec;
  color: var(--c-danger);
}

.alert-box__title {
  margin: 0;
  color: var(--c-text-strong);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.alert-box__desc {
  margin: 0;
  max-width: 34ch;
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.alert-box__btn {
  margin-top: var(--sp-3);
  min-width: 140px;
  font-size: var(--fs-md);
}