/* [홈 진입 브랜드 팝업] 각 이북 사이트가 CMS(admin/saas-api/popup)에서 등록한 슬라이드를
   Swiper 캐러셀로 렌더링한다. cafe24 SoyThree(dock-ebook/07_UX_UI_디자인/요소/멀티팝업.md)에서
   실측으로 검증된 CSS 함정 대응을 그대로 이식 — 서버가 슬라이드를 직접 렌더링하므로
   cafe24의 네이티브 팝업 중복(:has(...) 숨김 규칙) 대응은 필요 없다. */

.main-popup-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-popup-root[hidden] { display: none; }

.main-popup-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}

.main-popup-box {
  position: relative;
  z-index: 2;
  width: 90vw;
  max-width: 420px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.main-popup-swiper {
  width: 100%;
}

.main-popup-slide {
  /* Swiper 초기화 실패/타이밍 이슈로 슬라이드 폭이 안 잡히면 폭 힌트가 없는 flex 아이템
     안의 CJK 텍스트가 "한 글자 폭"까지 축소될 수 있다(cafe24 실측 함정) — !important +
     flex-shrink:0으로 JS 성공 여부와 무관하게 항상 폭을 보장한다. */
  width: 100% !important;
  flex-shrink: 0 !important;
  min-height: 120px;
  box-sizing: border-box;
}

.main-popup-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.main-popup-slide a {
  display: block;
}

/* Swiper 기본 pagination은 absolute 배치라 콘텐츠 높이가 작을 때 버튼 행과 겹쳐
   클릭이 가로막힐 수 있다 — static으로 normal flow에 배치. */
.main-popup-pagination {
  position: static !important;
  padding: 10px 0 12px;
  text-align: center;
}

.main-popup-pagination .swiper-pagination-bullet {
  background: #888888;
  opacity: 0.4;
}

.main-popup-pagination .swiper-pagination-bullet-active {
  background: #b63535;
  opacity: 1;
}

.main-popup-btns {
  display: flex;
  border-top: 1px solid #eeeeee;
}

.main-popup-today,
.main-popup-close {
  flex: 1;
  padding: 12px 0;
  font-size: 13px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  color: #151515;
}

.main-popup-today {
  border-right: 1px solid #eeeeee;
  color: #888888;
}

/* 모바일 최적화 — 100dvh로 주소창 접힘/펼침 오차에 대응, 내용이 화면보다 길면 내부 스크롤. */
@media (max-width: 767px) {
  .main-popup-box {
    width: calc(100vw - 32px);
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
  }

  .main-popup-swiper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

/* 팝업이 떠 있는 동안 배경 스크롤 잠금. body가 아니라 html(진짜 루트 스크롤 요소)에
   걸어야 sticky 헤더가 있는 스킨에서 body의 자체 overflow 규칙과 충돌하지 않는다
   (cafe24에서 실측된 sticky 헤더 깨짐 버그 회피). */
html:has(#main-popup-root:not([hidden])) {
  overflow-y: hidden;
}

/* [2026-10-04 #93 S13] 소이원형 카드 — 이미지 + 제목 + 설명 한 줄(제목·설명이 있는 슬라이드만 .has-text) */
.main-popup-slide a { text-decoration: none; color: inherit; }
.main-popup-slide.has-text img { width: calc(100% - 40px); margin: 20px 20px 0; border-radius: 6px; }
.main-popup-title { display: block; padding: 16px 20px 2px; text-align: center; font-size: 18px; font-weight: 700; color: #171717; line-height: 1.35; }
.main-popup-body { display: block; padding: 0 20px 18px; text-align: center; font-size: 13px; color: #777; line-height: 1.5; }

/* [#154] 광고 슬라이드 — 이미지 우상단 "광고" 배지(표시광고법). 이미지 자체엔 글자를 넣지 않는다 */
.main-popup-slide.is-ad { position: relative; }
.main-popup-slide .main-popup-ad { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(17,17,17,.62); color: #fff; font-size: 11px; line-height: 1.4; pointer-events: none; }