/* ============================================================
   st02a 전용 조정 — 비로그인 팝업(공지/게임) 기본 숨김.
   로그인 팝업(.intro-popup)은 st02/auth-st02.css(오버레이/다단계 구조) +
   st02a/popup.css(원본 st02-a 흰 모달 폼)가 담당하므로 여기선 손대지 않음.
   🔴 earth.css/auth-st10(st10 계열)은 로드하지 않는다 — st02a 의 --red-* 토큰을
      teal 로 덮어써 nav 등 레드테마를 오염시키기 때문.
   ============================================================ */

/* 🔴 --z-popup 토큰 복구 — st02 layout.css 엔 있으나 st02a layout.css 엔 누락.
   그래서 st02/auth-st02.css 의 .intro-popup { z-index: var(--z-popup) } 가 무효(auto)가 되어
   로그인/회원가입 모달이 헤더(z-index:99)·히어로 배너에 가려졌음. 정의로 복구. */
body.skin-st02a { --z-popup: 50000; }

/* 공지 팝업 — active(관리자 팝업 있을 때 notice-popup.js) 시에만 표시. 기본 숨김. */
body.skin-st02a .notice-popup { display: none; position: fixed; inset: 0; z-index: var(--z-popup, 50000); background: rgba(0,0,0,.6); overflow-y: auto; }
body.skin-st02a .notice-popup.active { display: flex; align-items: center; justify-content: center; }
/* ── 가로 일렬(separate) 모드 카드 CSS (st02a 전용) ──────────────────────────
   관리자 "가로 일렬 5개"(POPUP_SEPARATE='N') 선택 시 notice-popup.js 가
   #rowPopupContainer 에 카드를 렌더한다. st02a엔 이 컨테이너를 통째로 숨기고
   카드 규칙이 전무해 팝업이 안 떴음(gd01 동일 버그). 마스터 라이트테마로 이식.
   (default/css/layout.css 363~385 → 흰 카드/빨강 #cc2124 스코프) */
body.skin-st02a .row-popup-container { display: none; position: fixed; inset: 0; z-index: var(--z-popup, 50000); padding: 60px 30px; pointer-events: none; }
body.skin-st02a .row-popup-container.active { display: flex; justify-content: center; align-items: center; gap: 16px; }
body.skin-st02a .row-popup-card {
    flex: 1 1 0; min-width: 0; max-width: 340px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
    background: #fff; border: 1px solid rgba(204, 33, 36, 0.25); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
body.skin-st02a .row-popup-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; background: #cc2124;
}
body.skin-st02a .row-popup-card-title { margin: 0; font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
body.skin-st02a .row-popup-card-close {
    flex-shrink: 0; width: 28px; height: 28px; margin-left: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.25); border: none; border-radius: 50%; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s;
}
body.skin-st02a .row-popup-card-close:hover { background: rgba(0, 0, 0, 0.45); }
body.skin-st02a .row-popup-card-body { flex: 1; padding: 16px; overflow-y: auto; color: #333; }
body.skin-st02a .row-popup-card-image { margin-bottom: 12px; text-align: center; }
body.skin-st02a .row-popup-card-image img { max-width: 100%; height: auto; border-radius: 6px; }
body.skin-st02a .row-popup-card-content { font-size: 13px; line-height: 1.6; color: #444; word-break: break-word; white-space: pre-wrap; }
body.skin-st02a .row-popup-card-footer { padding: 10px 16px; background: #f7f7f7; border-top: 1px solid #eee; }
body.skin-st02a .row-popup-card-dontshow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; cursor: pointer; }
body.skin-st02a .row-popup-card-dontshow input[type="checkbox"] { width: 14px; height: 14px; accent-color: #cc2124; cursor: pointer; }
/* 1280px 미만은 notice-popup.js 가 캐러셀로 폴백 → 컨테이너 숨김(안전망) */
@media screen and (max-width: 1279px) {
    body.skin-st02a .row-popup-container { display: none !important; }
}

/* ── 공지팝업 캐러셀 카드 CSS (st02a 전용) ─────────────────────────────────
   st02a엔 .notice-popup 오버레이만 있고 카드(.notice-popup-inner/swiper 등)가 없어
   POPUP_SEPARATE=Y(캐러셀) 시 오버레이만 뜨고 카드는 안 보였음(gd01과 동일 버그).
   마스터 라이트테마(흰 카드/빨강 #cc2124)로 이식. */
body.skin-st02a .notice-popup-inner {
    position: relative; width: 500px; max-width: calc(100vw - 30px); max-height: calc(100dvh - 60px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid rgba(204, 33, 36, 0.25); border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
body.skin-st02a .notice-popup-swiper { flex: 0 1 auto; min-height: 0; min-width: 0; width: 100%; overflow: hidden; }
body.skin-st02a .notice-popup-slide { padding: 0; }
body.skin-st02a .notice-popup-close {
    position: absolute; right: 12px; top: 12px; z-index: 5; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #fff; font-size: 15px; background: rgba(0, 0, 0, 0.25); border: none; border-radius: 50%;
}
body.skin-st02a .notice-popup-close:hover { background: rgba(204, 33, 36, 0.85); }
body.skin-st02a .notice-popup-title {
    margin: 0; padding: 16px 50px 14px 18px; font-size: 16px; font-weight: 700; color: #fff; background: #cc2124;
}
body.skin-st02a .notice-popup-body { padding: 18px; min-height: 180px; color: #333; line-height: 1.7; overflow-y: auto; }
body.skin-st02a .notice-popup-image { margin-bottom: 14px; text-align: center; }
body.skin-st02a .notice-popup-image img { max-width: 100%; height: auto; border-radius: 8px; }
body.skin-st02a .notice-popup-content { font-size: 14px; line-height: 1.7; color: #444; word-break: break-word; white-space: pre-wrap; }
body.skin-st02a .notice-popup-pagination { display: flex; justify-content: center; gap: 6px; padding: 6px 0 10px; }
body.skin-st02a .notice-popup-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(204, 33, 36, 0.3); opacity: 1; border-radius: 50%; }
body.skin-st02a .notice-popup-pagination .swiper-pagination-bullet-active { background: #cc2124; }
body.skin-st02a .notice-popup-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-top: 1px solid #eee; background: #f7f7f7;
}
body.skin-st02a .notice-popup-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #666; cursor: pointer; }
body.skin-st02a .notice-popup-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #cc2124; cursor: pointer; }
body.skin-st02a .notice-popup-close-btn {
    padding: 8px 20px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
    background: #cc2124; border: none; border-radius: 6px;
}
body.skin-st02a .notice-popup-close-btn:hover { filter: brightness(1.08); }
@media screen and (max-width: 767px) {
    body.skin-st02a .notice-popup-inner { width: 92vw; max-height: 85dvh; }
    body.skin-st02a .notice-popup-body { min-height: 130px; max-height: calc(85dvh - 120px); }
}

/* (게임목록 팝업 .game-popup 은 game-popup.css 가 표시/숨김 전담 — 여기선 손대지 않음) */

/* 로그인 팝업 상단 배너(원본 st02-a) — st02a popup.css 에 .intro-topBg 규칙이 없어 미표시되던 것 보완.
   st02 popup.css 와 동일 값(440:135 비율, 로고는 popup.css 의 .intro-logo 가 절대배치). */
body.skin-st02a .intro-banner { position: relative; }
body.skin-st02a .intro-topBg { position: relative; aspect-ratio: 440 / 135; width: 100%; object-fit: cover; display: block; }