/* ======================== event_popup.css ========================
 * event-popup-ab — A/B 변형 자동 분배 온사이트 이벤트 팝업
 * Figma A안 4001:6260 시안 기반 (그라데이션 #5D2BF4 → #44D5FF)
 *
 * 격리 정책:
 *   .evpop- prefix로 Bootstrap / notice_modal / 모든 외부 CSS 충돌 회피
 *
 * z-index 계층:
 *   event-popup (이 모듈):     999998
 *   application-form 모달:     999999
 *   agreement-detail 모달:    1000000
 *   success toast:            1000001
 * =================================================================*/

/* ======================== 로컬 폰트 (Gmarket Sans) ========================
 * 헤드라인 전용 — 'GmarketSansEvpop' 패밀리로 격리 (aitive_renewal.css의
 * CDN 'GMarketSans' 선언과 충돌 회피).
 * Medium(500): A/B 1)줄,  Bold(700): A/B 2)/3)줄.
 * font-display:swap — 폰트 로딩 지연 시 시스템 폰트로 즉시 렌더.
 * =================================================================*/
@font-face {
    font-family: 'GmarketSansEvpop';
    src: url('/bootstrap/assets/fonts/GmarketSansTTFMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSansEvpop';
    src: url('/bootstrap/assets/fonts/GmarketSansTTFBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.evpop-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999998;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.evpop-backdrop.evpop-show {
    display: flex;
    animation: evpopFadeIn 0.25s ease forwards;
}

@keyframes evpopFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.evpop-shell {
    width: 100%;
    max-width: 560px;           /* B안 "유튜브TV·티빙·넷플릭스까지" 수용 위해 480→560 확장 (2026-05) */
    margin: auto;
}

.evpop-modal {
    position: relative;
    /* Figma A안 그라데이션 추출:
       gradientStops:
         #5D2BF4 at 32.21%
         #44D5FF at 100%
       방향: top → bottom (handlePositions 0,0 → 0.5,1) */
    background: linear-gradient(180deg, #5D2BF4 32%, #44D5FF 100%);
    border-radius: 24px;
    padding: 24px 24px 20px;
    font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
    color: #FFFFFF;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    overflow: hidden;
}

.evpop-modal *,
.evpop-modal *::before,
.evpop-modal *::after {
    box-sizing: border-box;
}

/* ======================== 닫기 버튼 ======================== */

.evpop-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.evpop-close:hover { opacity: 1; }

.evpop-close:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    border-radius: 50%;
}

/* ======================== 뱃지 (이미지) ======================== */

.evpop-badge-wrap {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
}

.evpop-badge-img {
    display: block;
    /* event0501_logo.png 원본 176×33 — 50% 축소 표시 (사용자 요구) */
    width: 88px;
    height: 16.5px;
}

/* ======================== 헤드라인 ======================== */

.evpop-headline {
    margin: 0 0 24px 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    color: #FFFFFF;
    letter-spacing: -0.6px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* flex 레이아웃 — nowrap 라인이 컨테이너 폭 근처에서 시각 중심이 어긋나는 문제 해결.
       text-align: center는 오버플로 nowrap 텍스트를 좌측 앵커시키는 브라우저 동작이 있는데,
       align-items: center는 자식 아이템의 기하 중심을 부모 중심에 정렬하여 좌우 균등 오버플로 보장.
       (2026-05 사용자 보고: B안 3)줄 우측 쏠림) */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.evpop-headline-line {
    display: block;
    font-family: 'GmarketSansEvpop', 'Pretendard', 'Noto Sans KR', sans-serif;
    /* 장평 85% — Gmarket Sans는 가변폰트가 아니므로 font-stretch 대신 transform scaleX 사용.
       전체 라인(자식 .evpop-headline-hi 포함)에 일관 적용. 가로 15% 축소 / 높이 그대로.
       (B안 3)줄 "유튜브TV·티빙·넷플릭스까지" 오버플로 보정, 2026-05 사용자 결정) */
    transform: scaleX(0.85);
    transform-origin: center top;
}

/* PC 사이즈 (요구사항 1-1, 1-2 → 사이즈 조정 2026-05)
   - 1)줄 (첫 줄):  Medium 500 / 36px (48px에서 축소)
   - 2)·3)줄:      Bold   700 / 48px (64px에서 축소)
   line-height 1.3은 부모 .evpop-headline에서 상속 (사용자 결정 #4 '유지'). */
.evpop-headline-line:nth-child(1) {
    font-size: 36px;
    font-weight: 500;
}
.evpop-headline-line:nth-child(2),
.evpop-headline-line:nth-child(3) {
    font-size: 48px;
    font-weight: 700;
    white-space: nowrap;        /* PC에서 한 줄 유지 (480px 모달 폭과 함께 설계) */
}

/* 첫 줄 강조어구 — A안 '5만 원부터' / B안 '무료 지원' (요구사항 1-3, 1-4)
   부모 .evpop-headline-line:nth-child(1)의 48px/500을 그대로 상속. */
.evpop-headline-hi {
    font-style: normal;
    color: #44D3FF;
}

/* ======================== 매체 로고 그리드 ======================== */

.evpop-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 24px 0;
}

.evpop-media-box {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* transparent 배경 박스 — 아이콘 자체가 완성형 컬러(둥근모서리 포함)일 때 사용
   (event0501_media_*.png 23개 매체 아이콘 적용용) */
.evpop-media-box--bare {
    background: transparent !important;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.evpop-media-img {
    display: block;
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* bare 박스(아이콘 풀블리드)는 100% 채우기 */
.evpop-media-box--bare .evpop-media-img {
    width: 100%;
    height: 100%;
}

/* ======================== B안 단일 이미지 매체 배너 ========================
 * eventb0501_media_list.png (535×225) — 단일 이미지 1장으로 매체 영역 전체 대체.
 * 가로폭 100% + height auto로 비율 유지하며 모달 폭에 따라 축소.
 * =================================================================*/

.evpop-media-banner {
    margin: 0 0 24px 0;
    display: flex;
    justify-content: center;
}

.evpop-media-banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.evpop-media-text {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 4px;
    letter-spacing: -0.3px;
}

/* ======================== 매체 로고 마퀴 (A안 전용) ========================
 * 가로 무한 슬라이드 (우→좌). 콘텐츠 2회 복제 + translateX(-50%)로 seamless loop.
 *
 * 동기 필요 (변경 시 JS 함께 수정):
 *   .evpop-media-track gap         <-> MARQUEE_GAP       (10)
 *   .evpop-media-box flex/width    <-> MARQUEE_BOX_WIDTH (150)
 *   translateX(-50%)               <-> 2회 복제 트릭 (renderMarqueeWrapper)
 * =================================================================*/

.evpop-media-marquee {
    overflow: hidden;
    margin: 0 0 24px 0;
    /* 좌우 가장자리 페이드 (D7) — 시각 흐름 자연스러움 */
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 24px,
        #000 calc(100% - 24px),
        transparent 100%
    );
            mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 24px,
        #000 calc(100% - 24px),
        transparent 100%
    );
}

.evpop-media-track {
    display: flex;
    gap: 10px;                       /* MARQUEE_GAP과 동기 */
    width: max-content;
    /* duration은 JS가 style 인라인으로 주입 (10.6s 기준 = 6개 × 50px/s) */
    animation: evpopMarquee 10.6s linear infinite;
    will-change: transform;
}

/* hover 일시정지 (D3, PC만 — 모바일 touch는 미지원) */
.evpop-media-marquee:hover .evpop-media-track {
    animation-play-state: paused;
}

@keyframes evpopMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* 정확히 한 세트 분량 이동 */
}

/* 마퀴 내부 박스는 grid의 aspect-ratio를 덮어쓰고 고정 폭
   (80 → 120 → 180 → 200 → 150, event0501_media_*.png 200×200을 75% 축소 표시) */
.evpop-media-track .evpop-media-box {
    flex: 0 0 150px;                 /* MARQUEE_BOX_WIDTH와 동기 */
    width: 150px;
    height: 150px;
    aspect-ratio: auto;              /* .evpop-media-box의 1/1 무효화 */
}

/* 주의: prefers-reduced-motion 미디어쿼리 의도적 미적용
 * - 사용자 요구: OS '애니메이션 효과 사용 안 함' 환경에서도 마퀴가 동작해야 함.
 * - 접근성 trade-off: 모션 감소 선호 사용자도 마퀴를 보게 되지만, 50px/s의 느린 흐름이라 영향 낮음.
 * - 우회가 필요한 사용자는 모달 닫기 / '오늘만 보지 않을래요' 가능. */

/* ======================== 안내문구 ======================== */

.evpop-desc {
    margin: 0 0 20px 0;
    font-size: 16px;            /* 요구사항 1-5: 13px → 16px */
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre-line;
    text-align: center;
}

/* ======================== CTA ======================== */
/* 그라데이션 배경 위 contrast: 흰 배경 + 보라 텍스트 */

.evpop-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    background: #5F3AF2;        /* 요구사항 2: 흰 배경 → 보라 (#FFFFFF → #5F3AF2) */
    color: #FFFFFF;             /* 요구사항 2: 보라 텍스트 → 흰 (#5D2BF4 → #FFFFFF) */
    border: 0;
    border-radius: 14px;
    font-family: inherit;
    font-size: 20px;            /* 16px → 20px (2026-05 사용자 요구, A/B안 공통) */
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.3px;
    transition: transform 0.05s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.evpop-cta:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.evpop-cta:active {
    transform: translateY(1px);
}

.evpop-cta:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* ======================== 하루 숨김 체크박스 ======================== */

.evpop-hide-today {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.evpop-hide-today-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #FFFFFF;
}

.evpop-hide-today-text {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
}

/* ======================== Mobile (≤768px) ======================== */

@media (max-width: 768px) {
    .evpop-shell {
        max-width: 100%;
    }

    .evpop-modal {
        padding: 20px 20px 16px;
        border-radius: 20px;
    }

    .evpop-headline {
        font-size: 24px;        /* 부모 fallback (per-line 미적용 시) */
        margin-bottom: 20px;
    }

    /* 모바일 헤드라인 축소 (사용자 결정 #2 '모바일은 축소')
       PC 48/64 → 모바일 28/40 (≈58% 축소)
       이유: ≤420px 모달에서 64px Korean 9글자는 ~360px 폭 필요 — 오버플로 방지. */
    .evpop-headline-line:nth-child(1) {
        font-size: 28px;
    }
    .evpop-headline-line:nth-child(2),
    .evpop-headline-line:nth-child(3) {
        font-size: 40px;
        white-space: normal;    /* 모바일은 화면폭 가변 — 필요 시 자연스러운 줄바꿈 허용 */
    }

    .evpop-media-grid {
        gap: 8px;
        margin-bottom: 20px;
    }

    /* A안 마퀴: 모바일 마진만 보정 (박스 폭 80px은 PC와 동일 — duration 계산 일관성) */
    .evpop-media-marquee {
        margin-bottom: 20px;
    }

    .evpop-cta {
        height: 52px;
        font-size: 15px;
    }

    .evpop-close {
        top: 12px;
        right: 12px;
    }
}