/* 클론 전용 보정 스타일 — 부팅 로더·드로어(햄버거 메뉴)·레이어 팝업 상태 제어 (원본 CSS는 무수정) */

/* 부팅 중(다른 로케일/디바이스 변형 스왑 전) 콘텐츠 숨김 — 원본의 CSR 로더 구간에 해당 */
html.cis-booting #__nuxt { opacity: 0 !important; }

/* 드로어(햄버거 메뉴): 닫힘/열림 헤더 토글 */
header[data-cis-header="drawer"] { display: none !important; }
html.cis-menu-open header[data-cis-header="drawer"] { display: flex !important; }
html.cis-menu-open header[data-cis-header="base"] { display: none !important; }

/* 레이어 팝업(약관 모달) 열림 시 body 스크롤 잠금 — 원본 vfm 동작과 동일 */
html.cis-modal-open, html.cis-modal-open body { overflow: hidden !important; }

/* 혜택 쿠폰 클릭 시 회원전용 안내 레이어 팝업 — 가운데 흰 박스 + 백드롭(원본 vfm is-layer 재현) */
#cis-modal-mount.cis-benefit-pop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
#cis-modal-mount.cis-benefit-pop .cis-pop-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#cis-modal-mount.cis-benefit-pop .cis-pop-box { position: relative; background: #fff; width: calc(100% - 80px); max-width: 480px; max-height: calc(100% - 40px); min-height: 161px; border-radius: 16px; overflow-y: auto; animation: cis-pop-in .2s ease-out both; }
@keyframes cis-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* 충전통화보기 등 bottom-up 풀페이지 모달 — 아래에서 위로 슬라이드업(원본 동작 재현) */
#cis-modal-mount.cis-modal-bottom .vfm__content,
#cis-modal-mount.cis-modal-bottom > .vfm > * { animation: cis-modal-slideup .32s cubic-bezier(.4,0,.2,1) both; }
@keyframes cis-modal-slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* 언어 스위처 전용 초소형 CJK 폰트 — 메뉴 라벨(日本語·简体中文·繁体中文) 8글자만 담음(Noto Sans SC 서브셋).
 * 이걸로 스위처가 현재 언어와 무관하게 풀 JP/SC/TC 폰트를 강제 로드하던 문제 제거(폰트 4개국어 동시로드 해결). */
@font-face { font-family: "CISMenuCJK"; font-weight: 400; font-display: swap;
  src: url("./cis-menu-cjk-400.woff2") format("woff2"); }
@font-face { font-family: "CISMenuCJK"; font-weight: 500; font-display: swap;
  src: url("./cis-menu-cjk-500.woff2") format("woff2"); }
/* 스위처 라벨에만 미니폰트 우선 적용 — CJK 8글자는 미니폰트로, ENGLISH/한국어 등은 기존 스택으로 폴백.
 * 스택에 JP/SC/TC를 넣지 않아 풀 CJK 폰트가 트리거되지 않음. */
.dropdown.dropdown-center.dropdown-bottom p {
  font-family: "CISMenuCJK", "Noto Sans", "Noto Sans KR", sans-serif;
}

/* ---------- 키오스크 바텀시트(지역 선택 / 필터) ----------
 * vfm 마크업을 그대로 쓰되, 이 빌드의 CSS 순서상 .vfm__content{position:relative}가
 * .absolute 유틸리티를 이겨 시트가 상단에 깔리는 문제를 명시적으로 바로잡는다.
 * 원본 동작: 화면 하단 고정 + 위로 슬라이드업 + 딤 배경. */
#cis-modal-mount.cis-ksk-modal .cis-ksk-sheet { position: absolute !important; left: 0; right: 0; bottom: 0; }
#cis-modal-mount.cis-ksk-modal .cis-ksk-sheet { animation: cis-modal-slideup .32s cubic-bezier(.4,0,.2,1) both; }
#cis-modal-mount.cis-ksk-modal .vfm__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 0; }

/* 키오스크 이미지 갤러리 / 위치보기 확대 — 원본 vfm is-full 풀스크린(헤더 고정 + 바텀업 슬라이드) */
#cis-modal-mount.cis-ksk-modal .cis-ksk-gallery,
#cis-modal-mount.cis-ksk-modal .cis-ksk-locmodal { position: fixed; inset: 0; }
#cis-modal-mount.cis-ksk-modal .cis-ksk-gallery .vfm__content,
#cis-modal-mount.cis-ksk-modal .cis-ksk-locmodal .vfm__content { position: absolute !important; inset: 0; animation: cis-modal-slideup .32s cubic-bezier(.4,0,.2,1) both; }

/* 풀스크린 지도모달(확대버튼) 안에서 연 '지역' 시트 — 원본처럼 뷰포트 전체 폭 바텀시트(앱 560 컬럼 깨기).
 * 그렇지 않으면 좁은 560 컬럼에 갇혀 양옆이 비고 딤도 컬럼에만 깔린다. 풀스크린 모달(z1100) 위(z1200). */
#cis-modal-mount.cis-ksk-modal-full { position: fixed; inset: 0; z-index: 1200; }
#cis-modal-mount.cis-ksk-modal-full .cis-ksk-vfm { position: fixed !important; inset: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: none !important; }
#cis-modal-mount.cis-ksk-modal-full .cis-ksk-sheet { width: 100vw !important; max-width: none !important; left: 0 !important; right: 0 !important; }
#cis-modal-mount.cis-ksk-modal-full .vfm__overlay { left: 0 !important; right: 0 !important; width: 100vw !important; }

/* 풀스크린 지도모달 안에서 연 '필터' — 원본은 (지역 시트와 달리) 화면 정중앙 컴팩트 다이얼로그(모든 모서리 둥글게 + pop-in).
 * cis-ksk-sheet(is-bottom bottom-0)를 가운데 박스로 재배치 override. 풀스크린 모달(z1100) 위(z1200). */
#cis-modal-mount.cis-ksk-modal-center { position: fixed; inset: 0; z-index: 1200; }
#cis-modal-mount.cis-ksk-modal-center .cis-ksk-vfm { position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#cis-modal-mount.cis-ksk-modal-center .vfm__overlay { position: fixed !important; inset: 0 !important; }
#cis-modal-mount.cis-ksk-modal-center .cis-ksk-sheet {
  position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  width: calc(100% - 80px) !important; max-width: 480px !important; max-height: calc(100% - 80px) !important;
  border-radius: 16px !important; animation: cis-pop-in .2s ease-out both !important;
}

/* 지도 풀스크린 모달(우측하단 확대 버튼, 데스크톱 전용) — 원본 vfm is-full 풀스크린.
 * 별도 mount(#cis-mapfull-mount)라 그 위에 지역/필터 바텀시트(#cis-modal-mount)가 겹쳐 열린다. */
#cis-mapfull-mount.cis-mapfull-open { position: fixed; inset: 0; z-index: 1100; width: 100vw; height: 100vh; }
/* 원본 동일: 앱 컬럼(max-width 560)을 깨고 뷰포트 전체 폭으로 — 카드가 여러 개 펼쳐 보이게 */
#cis-mapfull-mount .cis-ksk-mapfull { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100vh !important; }
#cis-mapfull-mount .cis-ksk-mapfull > .vfm__content { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important; animation: cis-modal-slideup .32s cubic-bezier(.4,0,.2,1) both; }
/* 원본 동일 카드 슬라이드 배치: swiper 를 콘텐츠 폭(max-content)으로 두고 중앙 정렬 →
 * 1대 구역은 카드 1개(310px)가 가운데, 2대+는 폭을 가득 채워(좌측부터) 스와이프(원본 swiper-map-stretch 재현). */
#cis-mapfull-mount .cis-ksk-mapfull .feer { align-items: center !important; }
#cis-mapfull-mount .cis-ksk-mapfull .feer .swiper { width: max-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
/* 상단 구역박스+pill 오버레이: 원본 모달처럼 max-w-[736px] 중앙 + 배경 투명(지도가 양옆으로 보이게) */
#cis-mapfull-mount .cis-ksk-mapfull [data-cis-mapfull-top] { max-width: 736px !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; background: transparent !important; }

/* 공유 클립보드 폴백 토스트 */
.toast-area { position: fixed; left: 0; right: 0; bottom: 40px; z-index: 3000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.cis-toast { max-width: calc(100% - 48px); padding: 12px 20px; border-radius: 999px; background: rgba(31,31,31,.92); color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,.18); animation: cis-toast-in .2s ease-out both; }
.cis-toast.cis-toast-hide { animation: cis-toast-out .4s ease-in both; }
@keyframes cis-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cis-toast-out { from { opacity: 1; } to { opacity: 0; } }

/* 요청4: 드로어(메뉴 열림) 상단 로고 클릭 가능 표시(메인 페이지 이동) */
.cis-menu-open [data-cis-header="drawer"] svg[viewBox="0 0 143 25"] { cursor: pointer; }

/* 요청11: 지도보기 하단 카드 폭 — 원본과 동일하게 전 뷰포트 310px 고정(slidesPerView:auto) */
.cis-ksk-mapcard { width: 310px; }

/* PC 고정 2-카드 QR 배너 (구매 패키지 + 앱 다운로드) — 전 페이지 공통, xl(≥1280)에서만 노출 */
.cis-qr-banner { position: fixed; right: 40px; bottom: 40px; z-index: 1000; display: none; }
@media (min-width: 1280px) { .cis-qr-banner { display: block; } }
.cis-qr-cards { display: flex; gap: 12px; }
.cis-qr-card { width: 160px; background: #fff; border-radius: 18px; box-shadow: 0px 0px 18px 0px #00000040; }
.cis-qr-card.w-180 { width: 180px; }
html[lang="en"] .cis-qr-card:nth-of-type(2),
html[lang="ja"] .cis-qr-cards > .cis-qr-card:nth-of-type(2) {
  width: 170px;
}
.cis-qr-head { display:flex;align-items: center;justify-content: center;min-height: 40px; border-radius: 16px 16px 0 0; padding: 5px 5px; text-align: center; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.cis-qr-card--pink .cis-qr-head { background: #FF5CB3; }
.cis-qr-card--teal .cis-qr-head { background: #0AB3AD; }
.cis-qr-body { padding: 20px 0px 24px; display: flex; flex-direction: column; align-items: center; }
.cis-qr-body picture { display: block; line-height: 0; }
.cis-qr-body img { width: 120px; height: 120px; display: block; }
.cis-qr-title { max-width: 144px; height: 54px; margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--color-text-title); word-break: keep-all; }
html[lang="en"] .cis-qr-card:nth-of-type(2) .cis-qr-title ,
html[lang="ja"] .cis-qr-cards > .cis-qr-card:nth-of-type(2) .cis-qr-title {
  max-width: 154px; 
}
.cis-qr-sub { display:flex;align-items: center; justify-content: center;height: 48px; text-align: center; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--color-text-body-2); word-break: keep-all; }