/* ========== 커스텀 알럿 스타일 (Figma 디자인 정확히 반영) ========== */
/* Figma node-id: 4112-233 */
/* 사용법: showCustomAlert(message, subtitle, url) */

/* 오버레이 (배경 터치로 닫기용, 시각적 효과 없음) */
.custom-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 9998;
}

.custom-alert-overlay.show {
  opacity: 1;
}

/* 알럿 컨테이너 - Figma 정확한 스펙 (w-72 px-6 pt-6 pb-5) */
.custom-alert-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  display: inline-flex;
  width: calc(100% - 40px);
  max-width: 288px;                           /* w-72 = 18rem = 288px */
  padding: 24px 24px 20px 24px;               /* px-6 pt-6 pb-5 */
  flex-direction: column;
  justify-content: flex-end;                  /* justify-end */
  align-items: center;                        /* items-center */
  gap: 20px;                                  /* gap-5 */
  border-radius: 8px;                         /* rounded-lg */
  background: #FFF;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);  /* shadow-[0px_0px_15px_0px_rgba(0,0,0,0.25)] */
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-alert-container.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 아이콘 영역 - w-20 h-20 = 80x80 */
.custom-alert-icon {
  display: flex;
  width: 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.custom-alert-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 텍스트 영역 래퍼 - gap-5 items-center */
.custom-alert-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;                        /* items-center */
  gap: 20px;                                  /* gap-5 */
  align-self: stretch;
}

/* 제목 + 부제목 내부 래퍼 - gap-3 */
.custom-alert-inner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;                                  /* gap-3 */
}

/* 제목 - text-base font-bold text-Neutral-900 */
.custom-alert-title {
  color: #1E1E1E;                             /* Neutral-900 */
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;                            /* text-base */
  font-style: normal;
  font-weight: 700;                           /* font-bold */
  line-height: 1.4;                           /* 여러 줄 가독성 */
  margin: 0;
  word-break: keep-all;                       /* 한글 단어 단위 줄바꿈 */
}

/* 부제목 - text-sm font-medium text-Neutral-700 */
.custom-alert-subtitle {
  color: #3A3A3A;                             /* Neutral-700 */
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;                            /* text-sm */
  font-style: normal;
  font-weight: 500;                           /* font-medium */
  line-height: 1.4;                           /* 여러 줄 가독성 */
  margin: 0;
  word-break: keep-all;                       /* 한글 단어 단위 줄바꿈 */
}

/* 버튼 - 기본값 seller 테마 (primary-500) */
.custom-alert-button {
  display: inline-flex;
  height: 40px;                               /* h-10 */
  padding: 16px 40px;                         /* py-4 px-10 */
  justify-content: center;
  align-items: center;
  gap: 10px;                                  /* gap-2.5 */
  align-self: stretch;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;                         /* rounded-lg */
  background: #FA0000;                        /* Primary-500 (seller 기본) */
  color: white;
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;                            /* text-base */
  font-style: normal;
  font-weight: 600;                           /* font-semibold */
  cursor: pointer;
  transition: background 0.2s ease;
}

.custom-alert-button:hover {
  background: #C80000;                        /* Primary-600 */
}

.custom-alert-button:active {
  background: #A00000;
}

/* errand 테마 (primary-400) */
.custom-alert-button.theme-errand {
  background: #FF2E2E;                        /* Primary-400 */
}

.custom-alert-button.theme-errand:hover {
  background: #FA0000;                        /* Primary-500 */
}

.custom-alert-button.theme-errand:active {
  background: #C80000;                        /* Primary-600 */
}

/* 포커스 스타일 제거 */
.custom-alert-button:focus {
  outline: none;
}