/* ============================================
   레이어 팝업 (notice-layers)
   - 화면 전체를 덮는 풀스크린 오버레이
   - 이미지 권장 비율: 3:4 또는 1:1 (세로형)
   ============================================ */

.notice-layers {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.notice-layers.on {
  display: flex;
}

/* 팝업 내부 컨테이너 */
.notice-layers .popup-inner {
  position: relative;
  max-width: 70vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PC: 그리드 배치 (Swiper 비활성) */
.notice-layers .popup-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 80vh;
  /* 아이템이 1개여도 popup-item의 100%/3.5 가 옹졸하게 수축되지 않도록 부모 너비를 3칸 기준으로 고정 */
  width: calc(350px * 3);
  max-width: 100%;
}

.notice-layers .popup-list .swiper-wrapper {
  display: contents;
}

.notice-layers .popup-list.swiper-active .swiper-wrapper {
  display: flex;
}

.notice-layers .swiper-active .popup-dots {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.notice-layers .swiper-active .popup-dots .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.notice-layers .swiper-active .popup-dots .swiper-pagination-bullet-active {
  background: #fff;
}

.notice-layers .swiper-active .popup-prev,
.notice-layers .swiper-active .popup-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / 50%);
  color: #333;
  font-size: 24px;
}
/* notice-layers 안에서만 위치 조정(전역 swiper 건드리지 않음) */
.notice-layers .popup-prev {
  left: -5%;
  right: auto;
}
.notice-layers .popup-next {
  right: -5%;
  left: auto;
}
/* swiper 기본 화살표(::after 'prev'/'next' 글리프) 제거 — 직접 넣은 <i> 아이콘만 사용 */
.notice-layers .popup-prev::after,
.notice-layers .popup-next::after {
  content: none;
  display: none;
}
/* 화살표: 이 컨텍스트에서 xeicon 글리프가 0폭으로 안 그려져서, 폰트 비의존 border chevron 으로 그린다 */
.notice-layers .popup-prev i::before,
.notice-layers .popup-next i::before {
  content: none;
}
.notice-layers .popup-prev i,
.notice-layers .popup-next i {
  display: block;
  width: 11px;
  height: 11px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  box-sizing: border-box;
}
.notice-layers .popup-prev i {
  transform: translateX(2px) rotate(-135deg);
} /* ‹ */
.notice-layers .popup-next i {
  transform: translateX(-2px) rotate(45deg);
} /* › */

.notice-layers .popup-dots {
  display: none;
}

.notice-layers .popup-prev,
.notice-layers .popup-next {
  display: none;
  color: #fff;
}

/* 개별 팝업 아이템 */
.notice-layers .popup-item {
  width: calc(100% / 3.5);
  background: transparent;
  overflow: hidden;
  border-radius: 8px;
}

.notice-layers .popup-item a {
  display: block;
  position: relative;
}

.notice-layers .popup-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-layers .popup-badge > i {
  font-size: 1.5em;
}

/* 이미지 — 컨테이너 너비 채움, 뷰포트 높이 초과 시만 축소 */
.notice-layers .popup-item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
}

/* 하단 컨트롤 영역 */
.notice-layers .popup-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.notice-layers .popup-controls button {
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 4px;
  transition: opacity 0.2s;
}

.notice-layers .popup-controls button:hover {
  opacity: 0.85;
}

.notice-layers .btn-not-today {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.notice-layers .btn-close-all {
  background: #fff;
  color: #333;
}

/* ============================================
   자동재생 재생/정지 토글 (popup-autoplay-toggle)
   count > 3 Swiper 활성 시 우하단에 노출
   ============================================ */
.notice-layers .popup-autoplay-toggle {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  padding: 8px 20px;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  color: #333;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  transition: opacity 0.2s;
}
.notice-layers .popup-autoplay-toggle:hover {
  opacity: 0.85;
}
.notice-layers .popup-autoplay-toggle > i {
  font-size: 16px;
  line-height: 1;
}
.notice-layers .popup-autoplay-toggle > span {
  line-height: 1;
}

/* ============================================
   확대 버튼 (popup-zoom-btn)
   ============================================ */
.notice-layers .popup-item {
  position: relative;
}
.notice-layers .popup-zoom-btn {
  top: auto;
  bottom: 8px;
  right: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}
.notice-layers .popup-zoom-btn:hover {
  opacity: 0.85;
}
.notice-layers .popup-zoom-btn > i {
  font-size: 1.2em;
  line-height: 1;
}

/* ============================================
   팝업 이미지 확대 라이트박스 (popup-zoom)
   ============================================ */
.popup-zoom {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 20px;
  box-sizing: border-box;
}
.popup-zoom.on {
  display: flex !important;
}
.popup-zoom img {
  display: block;
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
/* 템플릿 카드 확대 영역: 큰 폭 기준으로 cqw 재계산되어 텍스트 커짐 */
.popup-zoom .popup-zoom-card {
  width: min(70vw, 80vh);
  max-height: 92vh;
  container-type: inline-size;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.popup-zoom .popup-zoom-card > * {
  width: 100%;
  display: block;
}
.popup-zoom-close {
  position: absolute;
  top: 16px;
  right: 24px;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

/* ============================================
   반응형
   ============================================ */

/* 태블릿 */
@media (max-width: 1024px) {
  .notice-layers .popup-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .notice-layers .popup-item {
    width: 300px;
  }
}

/* 모바일 — Swiper 활성 */
@media (max-width: 600px) {
  .notice-layers .popup-inner {
    max-width: 95vw;
    max-height: 95vh;
  }
  .notice-layers .popup-list {
    display: block;
    overflow: visible;
    width: 85vw;
  }
  .notice-layers .popup-list .swiper-wrapper {
    display: flex;
  }
  .notice-layers .popup-item {
    width: 85vw;
  }
  .notice-layers .popup-dots {
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }
  .notice-layers .popup-dots .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
  .notice-layers .popup-dots .swiper-pagination-bullet-active {
    background: #fff;
  }
  .notice-layers .popup-controls {
    margin-top: 12px;
  }
  .notice-layers .popup-controls button {
    font-size: 13px;
    padding: 6px 14px;
  }
}