/* ==========================================
   Bootstrap 4 Modal Scoped CSS (Clean & Fixed)
   ========================================== */

/* 1. 모달 오픈 시 Body 스크롤 방지 */
body.modal-open {
  overflow: hidden;
}

/* 2. 모달 컨테이너 기본 스타일 */
body.modal-open .modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1050 !important;
  display: none;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

/* 3. 모달 대화상자 (중앙 정렬 및 애니메이션) */
body.modal-open .modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
body.modal-open .modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
body.modal-open .modal.show .modal-dialog {
  transform: none;
}
body.modal-open .modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

/* 4. 모달 본체 박스 */
body.modal-open .modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
}

/* 5. 백드롭 (어두운 배경 - Body 직속 자식 대응) */
body.modal-open .modal-backdrop {
  position: fixed;
  top: 0; left: 0;
  z-index: 1040;
  width: 100vw; height: 100vh;
  background-color: #000;
}
body.modal-open .modal-backdrop.fade { opacity: 0; }
body.modal-open .modal-backdrop.show { opacity: 0.5; }

/* 6. 헤더 / 바디 / 푸터 / 닫기버튼 */
body.modal-open .modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1rem; border-bottom: 1px solid #dee2e6;
}
body.modal-open .modal-title { margin: 0; line-height: 1.5; font-size: 1.25rem; }
body.modal-open .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
body.modal-open .modal-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  padding: 0.75rem; border-top: 1px solid #dee2e6;
}
/*
body.modal-open .close {
  padding: 1rem; margin: -1rem -1rem -1rem auto;
  background: transparent; border: 0; font-size: 1.5rem; opacity: .5; cursor: pointer;
}
*/
body.modal-open .close:hover { opacity: .75; }

/* 7. 반응형 크기 */
@media (min-width: 576px) {
  body.modal-open .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
  body.modal-open .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
}















/* 백드롭(어두운 배경)을 진하게 설정 (투명도 조절: opacity 0.8~0.9) */
body.modal-open .modal-backdrop.show {
  opacity: 0.6 !important;
  background-color: #000 !important;
}

/* 모달 본체 박스 스타일 완벽 제거 (투명화) */
body.modal-open .modal-content {
  background: transparent !important; /* 배경 투명 */
  border: none !important;             /* 테두리 제거 */
  box-shadow: none !important;         /* 그림자 제거 */
  padding: 0 !important;
}

/* 헤더/바디/푸터의 선 및 여백 제거 (콘텐츠 자체 스타일 사용) */
body.modal-open .modal-header,
body.modal-open .modal-footer {
  border: none !important;
  padding: 0 !important;
}

body.modal-open .modal-body {
  padding: 0 !important;
}




/* ==========================================
   모달 세로 넘침 및 스크롤바 꽉 참 방지 패치
   ========================================== */

/* 1. 모달 래퍼 높이를 화면에 딱 맞춤 */
body.modal-open .modal-dialog {
  max-width: 480px !important;    /* 가로폭 고정 */
  margin: 0 auto !important;       /* 마진으로 인한 높이 추가 방지 */
  min-height: 100% !important;     /* 100vh 대신 100% 사용 */
  height: 100% !important;
  display: flex !important;
  align-items: center !important;  /* Flex 세로 중앙 정렬 */
  justify-content: center !important;
}

/* 2. 투명 모달 컨텐츠 세로 크기 수축 (Content-fit) */
body.modal-open .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;         /* 불필요한 height: 100% 제거 */
  max-height: 100% !important;
}

body.modal-open .modal-body {
  padding: 0 !important;
  height: auto !important;
  flex: none !important;           /* flex-grow로 인한 강제 높이 확장 차단 */
}

/* 3. Ajax로 불러온 레이어 팝업 박스 크기 보정 */
body.modal-open .popup_box {
  height: auto !important;         /* 강제 높이 해제 */
  max-height: 90vh !important;     /* 화면보다 안 커지도록 제한 */
  overflow-y: auto !important;     /* 화면이 아주 작을 때만 내부 스크롤 허용 */
  box-sizing: border-box !important;
}