/* --- [1] 메이플스토리 폰트 정의 --- */
@font-face {
  font-family: 'MaplestoryOTFBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 팝업 모달 기본 설정 */
.popup-modal {
  /* 폰트 적용 */
  font-family: 'MaplestoryOTFBold', sans-serif;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 90vw;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  border-radius: 15px; /* 폰트 느낌에 맞춰 둥글기 약간 증가 */
  overflow: hidden;
  outline: none;
}

/* 이미지 설정 */
.swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- [2] 화살표(< >) 스타일 --- */
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background 0.3s;

  /* Dot가 아래로 내려가면서 전체 높이가 늘어났으므로, 
       화살표를 이미지 중앙에 맞추기 위해 50%보다 약간 위로 조정 */
  top: 45% !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.7);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 18px !important;
  font-weight: bold;
}

/* --- [3] 페이지네이션(Dot) 스타일 (이미지 아래 배치) --- */
.swiper-pagination {
  position: relative !important; /* 겹치지 않고 자리 차지 */
  bottom: auto !important;
  margin-top: 15px; /* 이미지와의 간격 */
  margin-bottom: 15px; /* 하단 컨트롤과의 간격 */
  text-align: center;
  line-height: 1;
}

.swiper-pagination-bullet {
  /* 배경이 흰색이므로 점 색상을 진하게 변경 */
  background: #ccc !important;
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 5px !important;
  transition: all 0.3s;
}

.swiper-pagination-bullet-active {
  background: #007aff !important; /* 활성 점 (파란색) */
  width: 20px;
  border-radius: 4px;
}

/* 하단 컨트롤 영역 */
.popup-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #eaeaea;
  font-size: 14px;
  color: #333;
  /* 폰트 적용 확인용 (상속되지만 명시적으로) */
  font-family: 'MaplestoryOTFBold', sans-serif;
}

.dont-show {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.dont-show input {
  margin-right: 6px;
  accent-color: #333; /* 체크박스 색상 */
}

.popup-close {
  background: #333;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: 'MaplestoryOTFBold', sans-serif;
}
.popup-close:hover {
  background: #111;
}