/* [메인 팝업 캐러셀] 카페24 네이티브 [디자인 > 배너/팝업](PC)에 등록된 데이터를
   aPopupListData(카페24가 모든 페이지에 자동으로 심어주는 전역 변수, js/main-popup.js
   참고)로 읽어와 Swiper 캐러셀로 렌더링한다. 관리자가 등록/종료하는 팝업 개수에 맞춰
   dot pagination이 자동으로 늘고 줄어든다 — 실측 근거: docs-cafe24/07_UX_UI_디자인/
   스킨등록-사전설정.md §7-2. */

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

/* [2026-07-29] 카페24가 aPopupListData 기반으로 페이지에 자동 주입하는 네이티브
   iframe 팝업(div#popup_N > iframe[src^="/popup/"])을 숨긴다 — 우리 커스텀 Swiper
   캐러셀과 동시에 떠서 중복 노출되는 걸 발견(실측). 이 네이티브 렌더링은 스킨 파일이
   아니라 카페24 코어 스크립트가 하는 것이라 서버 쪽에서 끌 수 없어 CSS로 숨긴다.
   ⚠️ [2026-07-29 추가] :has()는 구형 Safari/Firefox/일부 모바일 웹뷰에서 미지원이라
   그 환경에선 이 규칙 자체가 무시되어 네이티브 팝업이 그대로 노출됐다(실측: 사용자
   실기기 스크린샷). 카페24가 네이티브 팝업 wrapper에 항상 id="popup_숫자"를 쓰는
   패턴(예: id="popup_5", id="popup_6")에 기반한 id 셀렉터를 병행해 브라우저 호환성과
   무관하게 확실히 숨긴다. */
div:has(> iframe[src^="/popup/popup_"]) { display: none !important; }
div[id^="popup_"] { display: none !important; }

.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: var(--ml-bg, #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 {
  /* [2026-07-29] Swiper JS가 슬라이드 폭을 인라인 스타일로 못 잡는 경우(특정 브라우저에서
     초기화 실패·타이밍 이슈 등, 실측: 사용자 스크린샷 — 텍스트가 한 글자씩 세로로 쪼개져
     보임), 폭 힌트가 전혀 없는 flex 아이템 안의 CJK 텍스트는 줄바꿈 규칙상 "한 글자 폭"까지
     안전하게(?) 줄어들 수 있다. width:100%만으론 Swiper 자체 CSS/인라인 스타일에 명시도로
     밀릴 수 있어 !important + flex-shrink:0으로 JS 성공 여부와 무관하게 항상 폭을 보장한다
     (참고: ecudemo119600.cafe24.com의 카페24 공식 인트로팝업 dfloor/intropopup-custom.css
     도 모바일에서 폭을 명시적으로 고정하는 동일 전략을 씀). */
  width: 100% !important;
  flex-shrink: 0 !important;
  min-height: 120px;
  padding: 24px 20px;
  box-sizing: border-box;
  font-family: var(--ml-font);
  color: var(--ml-fg, #151515);
}

/* [2026-08-10] 팝업 이미지가 슬라이드마다 원본 크기/비율이 달라 보이던 문제 — 정사각형
   박스로 고정해 어떤 원본이 들어와도 항상 같은 크기로 보이게 한다. 2섹션(st-promo)
   풀블리드 사진처럼 배경이 꽉 찬 원본은 object-fit:cover로 프레임을 채운다. */
.main-popup-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Swiper 기본 pagination은 absolute 배치라 콘텐츠 높이가 작을 때(텍스트만
   있는 슬라이드 등) 버튼 행과 겹쳐 클릭이 가로막히는 문제가 있었다(실측,
   Playwright locator.click이 .main-popup-dim에 가로막힘). static으로
   normal flow에 배치해 항상 스와이퍼 아래·버튼 위에 안전하게 위치시킨다. */
.main-popup-pagination {
  position: static !important;
  padding: 0 0 12px;
  text-align: center;
}

.main-popup-pagination .swiper-pagination-bullet {
  background: var(--ml-muted, #888888);
  opacity: 0.4;
}

.main-popup-pagination .swiper-pagination-bullet-active {
  background: var(--ml-accent, #b63535);
  opacity: 1;
}

.main-popup-btns {
  display: flex;
  border-top: 1px solid var(--ml-border, #eeeeee);
}

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

.main-popup-today {
  border-right: 1px solid var(--ml-border, #eeeeee);
  color: var(--ml-muted, #888888);
}

/* [2026-07-29] 모바일 최적화 — ecudemo119600.cafe24.com의 카페24 공식 인트로팝업
   (dfloor/intropopup-custom.css) 벤치마크: `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:has(.df-intropopup--active) 패턴과
   동일) — :has() 미지원 브라우저에서는 이 편의기능만 빠지고 팝업 자체 기능엔 영향 없음.
   [2026-08-02 실측 발견] 원래 body에 overflow:hidden(x/y 둘 다)을 걸었었는데, 이러면
   G36에서 고친 css/layout.css의 body{overflow-x:clip}을 덮어써 body가 다시 독립
   스크롤 컨테이너가 되어버리고, 그 결과 헤더 sticky 고정이 또 깨진다 — 즉 "팝업을
   아직 안 닫은 방문자"(사실상 신규 방문 전원) 전부가 매번 깨진 sticky 헤더를 보고
   있었던 셈(전수 링크·기능 감사 중 발견). 잠금을 body가 아니라 html(진짜 루트
   스크롤 요소)에 걸면 sticky를 깨지 않으면서 배경 스크롤 잠금 효과는 동일하게
   유지된다(실측 확인: 스크롤 800px 후에도 헤더 top 0 유지). */
html:has(#main-popup-root:not([hidden])) {
  overflow-y: hidden;
}