/* =============================================================================
   배때지 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 버튼 자리를 추가 확보한다. */
    padding: var(--popup-padding, 20px);
    padding-right: calc(var(--popup-padding, 20px) + 26px);
    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 는 항상 보인다 */
.v2pp-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

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

/* 텍스트 정렬 (§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; }
}