/* 1. 뒷배경 어둡게 처리 (딤 영역) */
.PR_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 클래스가 붙으면 화면에 표시) */
.PR_layer-popup-overlay.is-active {
  display: flex;
}

/* 2. 알림창 본체 박스 */
.PR_layer-popup-content {
  background: url(/images/contents/program_popup_bg.png) right top no-repeat;
  background-color:#fff;
  width: 90%;
  max-width: 600px; /* 일반 alert창에 맞춘 슬림한 너비 */
  min-height:400px;
  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. 메시지 본문 영역 */
.PR_popup-body {
  padding: 30px; /* 상단 여백을 넓혀 안정감 부여 */
  text-align:left;
 font-weight:600;
}



.PR_popup-body .head {font-size:1rem; border-bottom:1px solid #ddd; padding-bottom:5px; color:#070759; padding:0 10px 10px;}
.PR_popup-body .group {padding:0 10px; display:none;}
.PR_popup-body .group.on {display:block;}
.PR_popup-body .date {font-size:0.9rem; margin:10px 0 10px;}
.PR_popup-body .subject {font-size:1.4rem; font-weight:600; margin:20px 0 20px; color:#0a1734; font-family:'S-CoreDream-4Bold';}
.PR_popup-body .content {font-size:1rem; line-height:1.5; padding-left:0px; }



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

/* 4. 하단 버튼 영역 */
.PR_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);
  }
}

@media screen and (max-width: 768px) {
.PR_popup-body {padding:30px 10px;}
.PR_popup-body .content {padding-left:0px; }

}