/*
 * 첫 화면 팝업 배너 (2026-10-06 대표님 지시) — site-popups.js 가 /api/popups 를 받아 그린다.
 * ------------------------------------------------------------
 *  PC(901px 이상)   켜진 배너를 나란히 함께 (세 장 넘으면 다음 줄로)
 *  모바일(900px 이하) 관리자 [이미지 관리 › 팝업 › 모바일 보기] 대로
 *     one   한 장씩 — 닫으면 다음 장 (기본)
 *     stack 위아래로 쌓기 — 안에서 스크롤
 *     swipe 옆으로 넘기기 — 손가락으로 밀고, 아래 점으로 몇 번째인지
 *  배너는 화면 높이에 맞춰 줄어든다(--ar = 그림 가로/세로) — 화면 밖으로 잘리거나 겹치지 않게.
 *  이름은 iny-pop 으로만 (옛 #hd_pop · .hd_pops 와 겹치지 않게).
 * ------------------------------------------------------------
 */
.iny-pop { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center;
           padding: 20px; background: rgba(0, 0, 0, .7); box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.iny-pop[hidden] { display: none; }
.iny-pop *, .iny-pop *::before, .iny-pop *::after { box-sizing: border-box; }
.iny-pop:focus { outline: none; }

.iny-pop-track { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px;
                 max-width: 100%; max-height: 100%; overflow: auto; overscroll-behavior: contain; }

.iny-pop-item { --ar: .72; position: relative; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: #fff;
                box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.iny-pop-img a, .iny-pop-img img { display: block; }
.iny-pop-img img { width: 100%; height: auto; }

.iny-pop-foot { display: flex; height: 44px; border-top: 1px solid #eee; background: #fff; }
.iny-pop-foot button { flex: 1 1 50%; margin: 0; padding: 0; border: 0; background: #fff; color: #555; font-size: 14px; font-family: inherit;
                       cursor: pointer; transition: background-color .3s, color .3s; }
.iny-pop-foot button + button { border-left: 1px solid #eee; }
.iny-pop-foot button:hover, .iny-pop-foot button:focus-visible { background: #111; color: #fff; outline: none; }

.iny-pop-count, .iny-pop-dots { display: none; }

/* 배너가 떠 있는 동안 뒤 화면은 스크롤하지 않는다 */
html.iny-pop-open, html.iny-pop-open body { overflow: hidden; }

/* ── PC : 나란히 — 한 줄에 최대 세 장, 화면 높이에 맞춰 ── */
@media screen and (min-width: 901px) {
    .iny-pop-item { width: min(400px, calc((100vw - 88px - 24px * (var(--n, 1) - 1)) / var(--n, 1)), calc((100vh - 124px) * var(--ar))); }
}

/* ── 모바일 ── */
@media screen and (max-width: 900px) {
    .iny-pop { padding: 16px 0; }
    .iny-pop-item { width: min(400px, 86vw, calc((100vh - 140px) * var(--ar))); }

    /* 한 장씩 — 맨 앞 한 장만, 닫으면 다음 장 */
    .iny-pop[data-mode="one"] .iny-pop-item:not(.is-current) { display: none; }
    .iny-pop[data-mode="one"] .iny-pop-count { display: block; margin: 12px 0 0; color: #fff; font-size: 13px; letter-spacing: 1px; opacity: .85; }

    /* 위아래로 쌓기 — 안에서 스크롤 */
    .iny-pop[data-mode="stack"] { justify-content: flex-start; }
    /* justify-content 는 flex-start — center 로 두면 넘친 만큼이 위로도 밀려 첫 배너 윗부분이 스크롤로도 안 닿는다 */
    .iny-pop[data-mode="stack"] .iny-pop-track { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; padding: 4px 0 24px; }
    .iny-pop[data-mode="stack"] .iny-pop-item { width: min(400px, 88vw); }

    /* 옆으로 넘기기 — 손가락으로 밀면 한 장씩 멈춘다 */
    .iny-pop[data-mode="swipe"] .iny-pop-track { flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 12px; width: 100%;
                                                 overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
                                                 padding: 0 max(4vw, calc((100vw - min(400px, 86vw)) / 2)); scrollbar-width: none; }
    .iny-pop[data-mode="swipe"] .iny-pop-track::-webkit-scrollbar { display: none; }
    .iny-pop[data-mode="swipe"] .iny-pop-item { scroll-snap-align: center; scroll-snap-stop: always; }
    .iny-pop[data-mode="swipe"] .iny-pop-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; }
    .iny-pop-dots button { width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .45); cursor: pointer; }
    .iny-pop-dots button.on { background: #fff; }
}

/* 휴대폰 주소창이 줄었다 늘었다 해도 맞게 (지원하는 브라우저만) */
@supports (height: 100dvh) {
    @media screen and (min-width: 901px) {
        .iny-pop-item { width: min(400px, calc((100vw - 88px - 24px * (var(--n, 1) - 1)) / var(--n, 1)), calc((100dvh - 124px) * var(--ar))); }
    }
    @media screen and (max-width: 900px) {
        .iny-pop-item { width: min(400px, 86vw, calc((100dvh - 140px) * var(--ar))); }
        .iny-pop[data-mode="stack"] .iny-pop-item { width: min(400px, 88vw); }
    }
}