/* 1. 뒷배경 어둡게 처리 (딤 영역) */
.layer-popup-overlay {
  display: none; /* 기본 숨김 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 화면을 흐리게 덮는 반투명 블랙 */
  z-index: 9999999; /* 화면 최상단에 배치 */
  align-items: center;
  justify-content: center;
}

/* 활성화 상태 (.is-active 클래스가 붙으면 화면에 표시) */
.layer-popup-overlay.is-active {
  display: flex;
}

/* 2. 알림창 본체 박스 */
.layer-popup-content {
  background-color: #ffffff;
  width: 85%;
  max-width: 320px; /* 일반 alert창에 맞춘 슬림한 너비 */
  border-radius: 12px; /* 부드러운 라운드 처리 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* 깊이감 있는 그림자 */
  overflow: hidden;
  text-align: center; /* 텍스트 및 버튼 중앙 정렬 */

  /* 부드럽게 솟아오르는 등장 애니메이션 */
  animation: alertShow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. 메시지 본문 영역 */
.popup-body {
  padding: 30px 20px 24px 20px; /* 상단 여백을 넓혀 안정감 부여 */
}

#customAlertMessage {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
  word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
}

/* 4. 하단 버튼 영역 */
.popup-footer {
  padding: 0 20px 20px 20px; /* 깔끔한 여백 처리 */
}

/* 확인 버튼 스타일 */
.btn-confirm {
  width: 100%; /* 버튼을 가득 채워 터치/클릭 영역 확대 */
  background-color: #007bff; /* 신뢰감을 주는 블루 계열 */
  color: #ffffff;
  border: none;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* 버튼 마우스 오버 효과 */
.btn-confirm:hover {
  background-color: #0056b3;
}

/* 버튼 클릭(활성) 효과 */
.btn-confirm:active {
  background-color: #004085;
}

/* 5. 등장 애니메이션 정의 */
@keyframes alertShow {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px); /* 살짝 작아졌다가 커지며 올라옴 */
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}