/* =============================================================================
   배때지 V2 · 범용 팝업
   - 프리픽스 v2pp- (기존 V2 모달/팝업 클래스와 충돌 없음)
   - 위치 4종: bottom_center / center_modal / top_center / bottom_sheet
   - 이미지 배치 4종: top / left / background / image_only
   - 모바일·태블릿·PC 완전 반응형 · 아이폰 safe-area 대응
   - 색상은 렌더러가 인라인 CSS 변수(--v2pp-bg/text/accent/overlay)로 주입
   ============================================================================= */

:root {
    /* 하단 고정 바 높이 — JS 가 실측해 --v2-bottom-nav-height 를 덮어쓴다 */
    --v2pp-nav-h: var(--v2-bottom-nav-height, var(--v2-nav-height, 64px));
    --v2pp-safe-b: env(safe-area-inset-bottom, 0px);
    --v2pp-safe-t: env(safe-area-inset-top, 0px);
    --v2pp-gap: 12px;
    --v2pp-lift: 0px;          /* 키보드/주소창 가림 보정 (JS) */

    /* 팝업이 쓸 수 있는 최대 세로 — 하단 네비/safe-area 를 뺀 값.
       관리자가 큰 높이를 넣어도 화면 밖으로 나가지 않는 상한이 된다. */
    --v2pp-avail: calc(100dvh - var(--v2pp-nav-h) - var(--v2pp-safe-b) - 32px);
}

/* dvh 미지원 브라우저 폴백 */
@supports not (height: 100dvh) {
    :root { --v2pp-avail: calc(100vh - var(--v2pp-nav-h) - var(--v2pp-safe-b) - 32px); }
}

.v2pp-root { }

/* ---------- 공통 컨테이너 ---------- */
.v2pp {
    position: fixed;
    z-index: 8700;             /* 본문·헤더 위 / 하단네비(9000)·기존 모달(12000+) 아래 */
    box-sizing: border-box;
}

.v2pp[hidden] { display: none !important; }

/* 중앙 모달 / 바텀시트는 오버레이를 덮으므로 더 높은 층 */
.v2pp[data-position="center_modal"],
.v2pp[data-position="bottom_sheet"] {
    inset: 0;
    z-index: 11000;            /* 하단네비 위, 기존 사이즈모달(30000) 아래 */
    display: flex;
    justify-content: center;
}
.v2pp[data-position="center_modal"] { align-items: center; }
.v2pp[data-position="bottom_sheet"] { align-items: flex-end; }

/* -----------------------------------------------------------------------------
   바탕 너비 — 관리자 설정값(--popup-width-*)을 기기별로 적용한다.
   단순 max-width 가 아니라 min() 이므로 설정값이 그대로 반영되면서도
   화면보다 커지지 않는다(가로 넘침 방지).
   ----------------------------------------------------------------------------- */
.v2pp {
    --v2pp-w: min(calc(100vw - 24px), var(--popup-width-mobile, 390px));
}
@media (min-width: 768px) and (max-width: 1199px) {
    .v2pp { --v2pp-w: min(calc(100vw - 32px), var(--popup-width-tablet, 460px)); }
}
@media (min-width: 1200px) {
    .v2pp { --v2pp-w: min(calc(100vw - 48px), var(--popup-width-desktop, 480px)); }
}

/* 하단 중앙 (기본) */
.v2pp[data-position="bottom_center"] {
    left: 50%;
    bottom: calc(var(--v2pp-nav-h) + var(--v2pp-safe-b) + var(--v2pp-gap) + var(--v2pp-lift));
    transform: translateX(-50%) translateY(18px);
    width: var(--v2pp-w);
}

/* 상단 중앙 */
.v2pp[data-position="top_center"] {
    left: 50%;
    top: calc(var(--v2pp-safe-t) + 12px);
    transform: translateX(-50%) translateY(-18px);
    width: var(--v2pp-w);
}

/* ---------- 표시/숨김 애니메이션 ---------- */
.v2pp {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.v2pp.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.v2pp[data-position="bottom_center"].is-open,
.v2pp[data-position="top_center"].is-open { transform: translateX(-50%) translateY(0); }

/* 중앙 모달: scale 로 등장 */
.v2pp[data-position="center_modal"] .v2pp-card { transform: scale(.96); transition: transform .22s ease; }
.v2pp[data-position="center_modal"].is-open .v2pp-card { transform: scale(1); }

/* 바텀시트: 아래에서 밀어올림 */
.v2pp[data-position="bottom_sheet"] .v2pp-card { transform: translateY(24px); transition: transform .22s ease; }
.v2pp[data-position="bottom_sheet"].is-open .v2pp-card { transform: translateY(0); }

/* ---------- 오버레이 ---------- */
.v2pp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 24, .55);
    opacity: 0;
    transition: opacity .22s ease;
}
.v2pp.is-open .v2pp-overlay { opacity: 1; }

/* ---------- 카드 ---------- */
.v2pp-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;

    /* 세로는 flex 컬럼 — 제목/버튼 고정, 설명만 스크롤되게 한다 */
    display: flex;
    flex-direction: column;

    border-radius: var(--popup-radius, 18px);
    overflow: hidden;                      /* 이미지 상단 모서리도 radius 에 맞게 잘린다 */
    background: var(--v2pp-bg, #1d2442);
    color: var(--v2pp-text, #fff);
    box-shadow: var(--popup-shadow, 0 12px 40px rgba(0, 0, 0, .22));

    /* 높이 — 설정값과 화면 가용 높이 중 작은 쪽이 상한 */
    min-height: var(--popup-min-height, 0px);
    max-height: min(var(--popup-max-height, 100dvh), var(--v2pp-avail, 100dvh));

    background-size: cover;
    background-position: center;
    -webkit-tap-highlight-color: transparent;
}

/* 고정 높이 모드 */
.v2pp-card.v2pp-h-fixed { height: var(--popup-fixed-height, auto); }

.v2pp[data-position="center_modal"] .v2pp-card,
.v2pp[data-position="bottom_sheet"] .v2pp-card {
    width: var(--v2pp-w);
}
.v2pp[data-position="bottom_sheet"] .v2pp-card {
    margin-bottom: calc(var(--v2pp-safe-b) + 12px);
    border-radius: 20px 20px 14px 14px;
}

/* 배경 이미지형 — 텍스트 가독성용 스크림(관리자가 농도 설정) */
.v2pp-bg-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--v2pp-overlay, .35));
    pointer-events: none;
}
.v2pp-img-background .v2pp-inner { position: relative; z-index: 1; }

/* ---------- 이미지 ---------- */
.v2pp-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 위쪽 이미지: 비율 고정 영역 (레이아웃 이동 방지) */
.v2pp-imgwrap {
    width: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}
.v2pp-fit-cover .v2pp-imgwrap {
    aspect-ratio: 16 / 9;
}
.v2pp-fit-cover .v2pp-imgwrap .v2pp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.v2pp-fit-contain .v2pp-imgwrap {
    aspect-ratio: 16 / 9;
}
.v2pp-fit-contain .v2pp-imgwrap .v2pp-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* natural: 원본 비율 그대로 (고정 영역 없음) */
.v2pp-fit-natural .v2pp-imgwrap { aspect-ratio: auto; }

/* 모바일에서 cover 가 과하게 잘리지 않도록 비율 완화 */
@media (max-width: 480px) {
    .v2pp-fit-cover .v2pp-imgwrap,
    .v2pp-fit-contain .v2pp-imgwrap { aspect-ratio: 4 / 3; }
}

/* 이미지만 표시 */
.v2pp-img-image_only .v2pp-img { border-radius: 0; }
.v2pp-imglink { display: block; }

/* 왼쪽 이미지 */
.v2pp-side {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
}
.v2pp-side .v2pp-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 본문 ---------- */
.v2pp-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;                   /* flex 자식이 스크롤되려면 필수 */
    overflow: hidden;

    /* 내부 여백 — 관리자 설정. 우측은 X 버튼 자리를 추가 확보한다.
       ★ 우측 여백을 변수로 뽑아 .v2pp-scroll 이 «정확히 이만큼» 되돌려
         카드 오른쪽 가장자리까지 넓어질 수 있게 한다(2026-09-13). */
    --v2pp-padr: calc(var(--popup-padding, 20px) + 26px);
    padding: var(--popup-padding, 20px);
    padding-right: var(--v2pp-padr);
    text-align: var(--popup-align, left);
}

/* 위쪽 이미지형: 이미지 영역에는 padding 을 주지 않는다 (§7) */
.v2pp-img-top .v2pp-imgwrap { padding: 0; }

/* 이미지만 표시: 이미지 바깥 여백 없음 (§7) */
.v2pp-img-image_only .v2pp-inner { padding: 0; }

.v2pp-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .10);
    font-size: 21px;
    line-height: 1;
    user-select: none;
}

.v2pp-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;

    /* .v2pp-inner 가 align-items:flex-start 라 기본적으로 내용 높이만큼만
       차지한다. 고정/최대 높이에서 설명 영역이 스크롤되려면 세로로 늘려야 한다. */
    align-self: stretch;
}

/* 설명 영역만 스크롤 — 제목·버튼·X 는 항상 보인다 */
/* ---------------------------------------------------------------------------
   스크롤바 위치 정리 (2026-09-13)

   문제 : .v2pp-scroll 이 .v2pp-inner 의 padding 안쪽에 있어서, 스크롤바가
          카드 오른쪽 테두리가 아니라 «본문 글자 바로 옆» 에 붙어 읽기를 방해했다.

   해결 : 구조를 둘로 나눈다.
            .v2pp-scroll      → 스크롤 «영역». 오른쪽 padding 을 음수 margin 으로
                                되돌려 카드 오른쪽 가장자리까지 넓힌다.
                                ⇒ 스크롤바가 팝업 테두리에 붙는다.
            .v2pp-scrollinner → 실제 «본문». 오른쪽 padding 으로 글자와 스크롤바
                                사이 여백을 확보한다. ⇒ 겹침·침범 없음.

   ※ 왼쪽은 건드리지 않는다. 아이콘(.v2pp-icon)·왼쪽 이미지(.v2pp-side) 가 있는
     팝업에서 왼쪽으로 넓히면 본문이 아이콘 아래로 파고들기 때문이다.
     스크롤바는 오른쪽에만 생기므로 왼쪽을 넓힐 이유도 없다.
   --------------------------------------------------------------------------- */
.v2pp-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* 카드 오른쪽 가장자리까지 확장 (.v2pp-inner 의 오른쪽 padding 상쇄) */
    margin-right: calc(var(--v2pp-padr, 46px) * -1);

    /* 스크롤바는 «보이게» 둔다 — 내용이 더 있다는 신호이므로 숨기지 않는다.
       다만 기본 스크롤바는 팝업 배경에서 지나치게 두꺼워 얇게 다듬는다.
       ★ 색은 팝업 글자색(--v2pp-text)에서 파생한다. 어두운 팝업(흰 글자)은 밝은
         스크롤바, 밝은 팝업(검은 글자)은 어두운 스크롤바가 자동으로 적용된다.
         (실제로 운영 중인 #ff9e9e 배경 팝업에서 흰 스크롤바는 보이지 않는다) */
    scrollbar-width: thin;                                   /* Firefox */
    scrollbar-color: rgba(255, 255, 255, .38) transparent;   /* 구형 브라우저 폴백 */
    scrollbar-color: color-mix(in srgb, var(--v2pp-text, #fff) 38%, transparent) transparent;
}

/* 본문 — 좌우 여백을 가진 별도 영역.
   왼쪽은 .v2pp-inner 의 padding 이 이미 담당하므로 0, 오른쪽만 준다. */
.v2pp-scrollinner {
    padding-left: 0;
    padding-right: var(--v2pp-padr, 46px);
}

/* WebKit(Chrome·Edge·Safari) 스크롤바 — 얇지만 «확실히 보이게» */
.v2pp-scroll::-webkit-scrollbar        { width: 8px; }
.v2pp-scroll::-webkit-scrollbar-track  { background: transparent; }
.v2pp-scroll::-webkit-scrollbar-thumb  {
    background: rgba(255, 255, 255, .34);                                        /* 폴백 */
    background: color-mix(in srgb, var(--v2pp-text, #fff) 34%, transparent);
    border-radius: 99px;
    /* 트랙 안에서 살짝 안쪽에 놓아 라운드 테두리와 자연스럽게 어울리게 한다 */
    border: 2px solid transparent;
    background-clip: padding-box;
}
.v2pp-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .52);                                        /* 폴백 */
    background: color-mix(in srgb, var(--v2pp-text, #fff) 55%, transparent);
    background-clip: padding-box;
}

.v2pp-action { flex: 0 0 auto; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   추가 이미지 (2026-09-23)
   본문 아래에 세로로 쌓인다. 스크롤 영역(.v2pp-scroll) 안이라 팝업 안에서
   내리면서 글과 사진을 전부 본다. 캡처·안내 이미지가 잘리지 않도록 원본 비율 그대로.
   --------------------------------------------------------------------------- */
.v2pp-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 14px;          /* 제목 아래 · 본문 글 위 */

    /* 좌우 여백을 대칭으로 — .v2pp-scrollinner 의 오른쪽 여백(X 버튼 자리 26px 포함)을
       사진에서만 되돌려, 사진 오른쪽 여백 = 왼쪽 여백(--popup-padding) 이 되게 한다.
       모바일에서 사진이 26px 더 넓어지고 가운데 정렬로 보인다. */
    margin-right: calc((var(--v2pp-padr, 46px) - var(--popup-padding, 20px)) * -1);
}
.v2pp-gallery .v2pp-gimg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
}

/* 이미지만 표시 + 추가 이미지 — 대표 이미지부터 이어서 한 줄로 스크롤 */
.v2pp-imgonly-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.v2pp-imgonly-scroll .v2pp-img { border-radius: 0; }

/* 텍스트 정렬 (§11) — .v2pp-inner 의 text-align 이 제목·본문·버튼(inline-flex)에
   모두 상속된다. X 버튼은 absolute 라 영향을 받지 않는다. */
.v2pp-card[data-align="center"] .v2pp-inner { align-items: center; }

.v2pp-title {
    margin: 0 0 6px;
    font-size: var(--popup-title-size, 18px);
    font-weight: 800;
    line-height: 1.35;
    color: var(--v2pp-text, #fff);
    white-space: normal;
    /* 큰 글자에서도 레이아웃이 깨지지 않게 (§8) */
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.v2pp-title:empty { display: none; }

.v2pp-desc {
    margin: 0 0 10px;
    font-size: var(--popup-content-size, 14px);
    font-weight: 500;
    line-height: 1.55;
    color: var(--v2pp-text, #fff);
    opacity: .78;
    white-space: pre-line;           /* 관리자가 입력한 줄바꿈만 살린다 (HTML 미허용) */
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.v2pp-desc:empty { display: none; }

/* 스크린리더 전용 (이미지만 표시일 때 제목/설명 제공) */
.v2pp-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 버튼 3종 ---------- */
.v2pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    max-width: 100%;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: opacity .15s ease, transform .15s ease;
}
.v2pp-btn:active { transform: scale(.98); }

/* text — 출석 팝업 기본. 배경/테두리/그림자 없음 */
.v2pp-btn-text {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--v2pp-accent, #ffd54a);
    font-size: var(--popup-button-size, 14px);
    min-height: 40px;                /* 배경이 없어도 터치 영역 확보 */
}
.v2pp-btn-text:hover { opacity: .82; text-decoration: underline; }

/* solid — 일반 팝업 기본 */
.v2pp-btn-solid {
    padding: 8px 16px;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: var(--v2pp-accent, #ffd54a);
    color: #16161a;
    font-size: var(--popup-button-size, 14px);
}
.v2pp-btn-solid:hover { opacity: .88; }

/* outline */
.v2pp-btn-outline {
    padding: 8px 16px;
    min-height: 38px;
    border: 1.5px solid var(--v2pp-accent, #ffd54a);
    border-radius: 999px;
    background: none;
    color: var(--v2pp-accent, #ffd54a);
    font-size: var(--popup-button-size, 14px);
}
.v2pp-btn-outline:hover { opacity: .85; }

.v2pp-arrow { font-size: 13px; line-height: 1; }

/* ---------- X 버튼 ---------- */
.v2pp-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}
.v2pp-close:hover { background: rgba(0, 0, 0, .55); }
.v2pp-close svg { width: 14px; height: 14px; display: block; }

.v2pp-btn:focus-visible,
.v2pp-close:focus-visible,
.v2pp-imglink:focus-visible {
    outline: 2px solid var(--v2pp-accent, #ffd54a);
    outline-offset: 2px;
}

/* =============================================================================
   겹침 방지 — 하단 팝업이 열려 있는 동안 TOP(맨 위로) 버튼을 팝업 위로 올린다
   ============================================================================= */
body.v2pp-open-bottom .v2-topbtn {
    bottom: calc(
        var(--v2pp-nav-h) + var(--v2pp-safe-b) + var(--v2pp-gap)
        + var(--v2pp-lift) + var(--v2pp-h, 96px) + 10px
    );
}

/* 모달 표시 중 body 스크롤 잠금 (JS 가 클래스 부여) */
body.v2pp-lock { overflow: hidden !important; }

/* =============================================================================
   반응형
   ============================================================================= */

/* 초소형 (320~359) */
@media (max-width: 359px) {
    .v2pp-inner { gap: 10px; }
    .v2pp-icon  { width: 36px; height: 36px; font-size: 19px; }
    .v2pp-side  { width: 60px; height: 60px; }
    .v2pp-btn-solid, .v2pp-btn-outline { padding: 7px 13px; }
}

/* 태블릿/PC 너비는 위쪽 --v2pp-w (관리자 설정값) 이 담당한다.
   여기서 max-width 를 다시 걸면 설정값이 무시되므로 두지 않는다. */

/* 가로 화면(낮은 높이) — 컴팩트 */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --v2pp-gap: 8px; }
    .v2pp-inner { gap: 10px; }
    .v2pp-icon  { width: 34px; height: 34px; font-size: 18px; }
    .v2pp-title { margin-bottom: 2px; }
    .v2pp-desc  { margin-bottom: 8px; }
    .v2pp-btn-text { min-height: 32px; }
    .v2pp-btn-solid, .v2pp-btn-outline { min-height: 32px; padding: 6px 13px; }
    .v2pp-fit-cover .v2pp-imgwrap,
    .v2pp-fit-contain .v2pp-imgwrap { aspect-ratio: 21 / 9; }
}

/* 모션 최소화 선호 사용자 — 즉시 표시/닫기 */
@media (prefers-reduced-motion: reduce) {
    .v2pp,
    .v2pp .v2pp-card,
    .v2pp .v2pp-overlay { transition: none !important; }
    .v2pp[data-position="bottom_center"],
    .v2pp[data-position="top_center"],
    .v2pp[data-position="bottom_center"].is-open,
    .v2pp[data-position="top_center"].is-open { transform: translateX(-50%); }
    .v2pp[data-position="center_modal"] .v2pp-card,
    .v2pp[data-position="center_modal"].is-open .v2pp-card,
    .v2pp[data-position="bottom_sheet"] .v2pp-card,
    .v2pp[data-position="bottom_sheet"].is-open .v2pp-card { transform: none; }
}

/* <picture> 래퍼(webp fallback) 레이아웃 무영향 */
.v2pp-card picture{display:contents}