.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
}

/* 팝업 컨텐츠와 닫기 버튼을 함께 묶어 중앙 정렬하기 위한 래퍼 */
.popup-wrapper {
  position: relative; /* 닫기 버튼의 absolute 포지셔닝 기준 */
  max-width: 420px;
}

.detail-popup-content {
  background: #fff;
  padding: 5px 5px 15px 5px; /* 기존 패딩 유지 */
  border-radius: 10px;
  text-align: center;
  max-width: 420px; /* popup-wrapper와 동일하게 설정 */
  max-height: 90vh;
  overflow: hidden; /* 내부 컨텐츠 넘침 방지 */
  /* position: fixed, top, left, transform은 popup-overlay에서 담당하므로 제거 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 새로운 외부 닫기 텍스트 버튼 스타일 */
.popup-close-text-btn-external {
  position: absolute;
  /* detail-popup-content의 왼쪽 상단 바깥쪽에 위치하도록 조정 */
  top: -35px;  /* 팝업 컨테이너 위로 올림 (수치 조정 필요) */
  right: 0px;   /* 팝업 컨테이너 왼쪽에 맞춤 (수치 조정 필요) */
  font-size: 14px;
  color: #f2f2f2; /* 살짝 어두운 흰색 계열 */
  background-color: transparent; /* 배경색 없음 */
  padding: 5px;
  cursor: pointer;
  z-index: 1010; /* 다른 요소들보다 위에 오도록 */
  /* text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 글자가 배경에 묻히지 않도록 그림자 효과 (선택 사항) */
}

.popup-close-text-btn-external:hover {
  color: #bdbdbd;
}

.swiper-container {
  width: 100%;
  /* max-width: 420px; detail-popup-content에서 이미 제어 */
  height: auto;
  position: relative;
  padding-bottom: 0;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.popup-image {
  width: 100%;
  max-height: 70vh;
  padding: 5px 5px 15px 5px; /* 하단 패딩은 그대로 유지 */
  height: auto;
  margin: 0;
  cursor: pointer;
  position: relative;
}

.swiper-pagination {
  position: absolute;
  bottom: 15px !important; /* 기존 값 유지 또는 미세 조정 */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 20;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #999;
  opacity: 1;
  margin: 0 4px;
  box-sizing: border-box;
}

.swiper-pagination-bullet-active {
  width: 10px;
  height: 10px;
  background: #333;
  opacity: 1;
}

@media (max-width: 700px) {
  .popup-wrapper {
    /* max-width는 detail-popup-content의 max-width와 동일하게 가져갑니다. */
    max-width: 60%; /* detail-popup-content의 max-width와 동일하게 */
    min-width: 300px !important; /* detail-popup-content의 min-width와 동일하게 */
  }

  .detail-popup-content {
    max-width: 100%; /* wrapper에 의해 제어되므로 100%로 설정 */
    min-width: 100% !important; /* wrapper에 의해 제어되므로 100%로 설정 */
    padding: 5px 1px 15px 1px; /* 기존 좌우 패딩 유지 */
  }

  .popup-close-text-btn-external {
    top: -35px; /* 모바일에서 상단 간격 미세 조정 */
    right: 0px;  /* 모바일에서 좌측 간격 미세 조정 */
    font-size: 15px;
  }

  .popup-image {
    max-width: 100%;
    max-height: 70vh;
    min-width: initial; /* detail-popup-content min-width와 동기화할 필요 없음 */
  }

  .swiper-pagination {
    bottom: 12px !important;
  }
}