/* ============================================================
   두 CSS 문서 비교 결과 — 겹치지 않는(고유) 코드만 정리
   (공통 부분: root 변수, 11개 테마 색상, 헤더/배너/타겟/시스템/
    로드맵/FAQ/리뷰/혜택 섹션, 반응형 미디어쿼리는 100% 동일하여 생략)
   ============================================================ */


/* ============================================================
   [A] 두 문서 사이의 "수정된 값" 차이 (2건)
   ============================================================ */

/* ── A-1. .theme-psy 의 --theme-shadow-lg 값 차이 ──
   문서1(구버전): 아래 값 사용 → lib테마 색상(13,122,95)이 잘못 들어간 버그
     --theme-shadow-lg: 0 20px 40px rgba(13, 122, 95, 0.16);

   문서2(수정본): psy 고유 색상(13,148,136)으로 정정 + 설명 주석 추가
*/
.rn_event_wrap.theme-psy {
  /* 원본에 lib테마 색상(13,122,95)이 잘못 들어가있던 부분을
     psy 고유색(13,148,136)으로 수정 */
  --theme-shadow-lg: 0 20px 40px rgba(13, 148, 136, 0.16);
}

/* ── A-2. .ev_kicker 의 margin-bottom 값 차이 ──
   문서1: margin-bottom: 22px;
   문서2: margin-bottom: 0px;   ← 아래는 문서2(최신) 기준
*/
.ev_kicker {
  margin-bottom: 0px; /* 문서1에서는 22px */
}



/* ============================================================
   [C] 문서2에만 있고 문서1에는 없는 코드
   — event_popup.css (프로모션 팝업 모달 전체)
   ============================================================ */

/* ── 테마별 팝업 전용 색상 변수 (--ev-*) ── */

.rn_event_wrap.theme-sb, .theme-sb {
  --ev-primary: #1263eb;
  --ev-primary-dark: #1e40af;
  --ev-bg-light: #eff6ff;
  --ev-border-light: #bfdbfe;
  --ev-shadow-rgb: 18, 99, 235;
  --ev-accent-red: #ef4444;
}

.rn_event_wrap.theme-cc, .theme-cc {
  --ev-primary: #ee7806;
  --ev-primary-dark: #9a3412;
  --ev-bg-light: #fff7ed;
  --ev-border-light: #fed7aa;
  --ev-shadow-rgb: 238, 120, 6;
  --ev-accent-red: #ea580c;
}

.rn_event_wrap.theme-lib, .theme-lib {
  --ev-primary: #0d7a5f;
  --ev-primary-dark: #065440;
  --ev-bg-light: #f0fdf9;
  --ev-border-light: #a7f3d0;
  --ev-shadow-rgb: 13, 122, 95;
  --ev-accent-red: #e11d48;
}

.rn_event_wrap.theme-bt, .theme-bt {
  --ev-primary: #c8235d;
  --ev-primary-dark: #881337;
  --ev-bg-light: #fff1f5;
  --ev-border-light: #fecdd3;
  --ev-shadow-rgb: 200, 35, 93;
  --ev-accent-red: #e11d48;
}

.rn_event_wrap.theme-biz, .theme-biz {
  --ev-primary: #1e3a8a;
  --ev-primary-dark: #172554;
  --ev-bg-light: #eff6ff;
  --ev-border-light: #bfdbfe;
  --ev-shadow-rgb: 30, 58, 138;
  --ev-accent-red: #e11d48;
}

.rn_event_wrap.theme-hf, .theme-hf {
  --ev-primary: #9333ea;
  --ev-primary-dark: #7e22ce;
  --ev-bg-light: #faf5ff;
  --ev-border-light: #e9d5ff;
  --ev-shadow-rgb: 147, 51, 234;
  --ev-accent-red: #e11d48;
}

.rn_event_wrap.theme-ko, .theme-ko {
  --ev-primary: #0284c7;
  --ev-primary-dark: #0369a1;
  --ev-bg-light: #f0f9ff;
  --ev-border-light: #bae6fd;
  --ev-shadow-rgb: 2, 132, 199;
  --ev-accent-red: #e11d48;
}

.rn_event_wrap.theme-le, .theme-le {
  --ev-primary: #b91c1c;
  --ev-primary-dark: #7f1d1d;
  --ev-bg-light: #fef2f2;
  --ev-border-light: #fecaca;
  --ev-shadow-rgb: 185, 28, 28;
  --ev-accent-red: #b91c1c;
}

.rn_event_wrap.theme-psy, .theme-psy {
  --ev-primary: #0d9488;
  --ev-primary-dark: #115e59;
  --ev-bg-light: #f0fdfa;
  --ev-border-light: #99f6e4;
  --ev-shadow-rgb: 13, 148, 136;
  --ev-accent-red: #e11d48;
}

.rn_event_wrap.theme-sc, .theme-sc {
  --ev-primary: #e25b39;
  --ev-primary-dark: #a83418;
  --ev-bg-light: #fff5f2;
  --ev-border-light: #fed7cb;
  --ev-shadow-rgb: 226, 91, 57;
  --ev-accent-red: #dc2626;
}

.rn_event_wrap.theme-yt, .theme-yt {
  --ev-primary: #65a30d;
  --ev-primary-dark: #3f6212;
  --ev-bg-light: #f7fee7;
  --ev-border-light: #d9f99d;
  --ev-shadow-rgb: 101, 163, 13;
  --ev-accent-red: #e11d48;
}

/* ── 1. 배경 오버레이 ── */
.ev_modal_overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.ev_modal_overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── 2. 모달 팝업 본체 ── */
.ev_modal_dialog {
    position: relative !important;
    width: 100% !important;
    max-width: 490px !important;
    max-height: 90vh !important;
    background: #ffffff !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 25px 50px -12px rgba(var(--ev-shadow-rgb), 0.35), 0 0 0 1px var(--ev-border-light) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box !important;
    margin: 0 !important;
    background-color: #ffffff !important;
}

.ev_modal_overlay.active .ev_modal_dialog {
    transform: translateY(0) scale(1) !important;
}

/* ── 3. 우측 상단 플로팅 원형 스탬프 뱃지 ── */
.ev_stamp_badge {
    position: absolute !important;
    top: 18px !important;
    right: 54px !important;
    width: 72px !important;
    height: 72px !important;
    background: #ffffff !important;
    border: 2px dashed var(--ev-accent-red) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    z-index: 10 !important;
    transform: rotate(6deg) !important;
    pointer-events: none !important;
}
.ev_stamp_badge span:first-child {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.1 !important;
}
.ev_stamp_badge strong {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: var(--ev-accent-red) !important;
    line-height: 1.1 !important;
}
.ev_stamp_badge span:last-child {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-top: 1px !important;
}

/* ── 4. 닫기 버튼 ── */
.ev_modal_close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #64748b !important;
    cursor: pointer !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}
.ev_modal_close:hover {
    background: var(--ev-bg-light) !important;
    color: var(--ev-primary) !important;
    border-color: var(--ev-border-light) !important;
    transform: rotate(90deg) !important;
}

/* ── 5. 모달 내부 컨테이너 ── */
.ev_modal_card {
    padding: 32px 24px 22px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* ── 6. 헤더 타이틀 영역 ── */
.ev_modal_header {
    text-align: left !important;
    margin: 0 0 18px 0 !important;
    padding-right: 70px !important;
}

.ev_card_kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--ev-primary) !important;
    background: var(--ev-bg-light) !important;
    border: 1px solid var(--ev-border-light) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
}

.ev_card_title {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -1px !important;
}

.ev_card_desc {
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.4 !important;
}

/* ── 7. 패키지 가격 리스트 ── */
.ev_pkg_list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 20px 0 !important;
}

.ev_pkg_item {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
}

.ev_pkg_item.best {
    background: linear-gradient(135deg, #ffffff 0%, var(--ev-bg-light) 100%) !important;
    border: 2px solid var(--ev-border-light) !important;
    box-shadow: 0 6px 16px -4px rgba(var(--ev-shadow-rgb), 0.14) !important;
}

.ev_pkg_top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 10px 0 !important;
    gap: 10px !important;
}

.ev_pkg_name_wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ev_pkg_tag {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    background: var(--ev-primary) !important;
    color: #ffffff !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.ev_pkg_name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
}

.ev_pkg_discount {
    font-size: 12px !important;
    font-weight: 800 !important;
    background: var(--ev-bg-light) !important;
    color: var(--ev-accent-red) !important;
    border: 1px solid var(--ev-border-light) !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.ev_pkg_note {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ev-accent-red) !important;
    margin: 0 0 8px 0 !important;
}

.ev_pkg_price_row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.ev_pkg_orig {
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-decoration: line-through !important;
}

.ev_pkg_arrow {
    color: var(--ev-accent-red) !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}

.ev_pkg_price {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
}
.ev_pkg_price strong {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: var(--ev-accent-red) !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
}
.ev_pkg_price span {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ev-accent-red) !important;
}

/* ── 8. 공통 제공 특별혜택 미니 그리드 (le_benefit_box) ── */
.le_benefit_box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin: 0 0 14px 0 !important;
    box-sizing: border-box !important;
}
.le_benefit_title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    margin: 0 0 10px 0 !important;
}
.le_benefit_grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}
.le_benefit_item {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 12px 4px !important;
    text-align: center !important;
}
.le_benefit_item span {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
}

/* ── 9. 안내/특가 공지 칩 ── */
.ev_notice_box {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #ffffff !important;
    border: 1.5px dashed var(--ev-border-light) !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
}
.ev_notice_badge {
    background: var(--ev-primary) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}
.ev_notice_txt {
    font-size: 12px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
}
.ev_notice_txt strong {
    color: var(--ev-accent-red) !important;
    font-weight: 800 !important;
}

/* ── 10. 하단 와이드 CTA 버튼 ── */
.ev_modal_cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ev-primary) 85%, #ff8c00), var(--ev-primary)) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 15px 20px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(var(--ev-shadow-rgb), 0.38) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.ev_modal_cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(var(--ev-shadow-rgb), 0.48) !important;
}
.ev_modal_cta svg {
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}
.ev_modal_cta:hover svg {
    transform: translateX(4px) !important;
}

/* ── 11. 모바일 반응형 ── */
@media (max-width: 480px) {
    .ev_modal_card {
        padding: 24px 16px 18px !important;
    }
    .ev_stamp_badge {
        width: 60px !important;
        height: 60px !important;
        top: 14px !important;
        right: 48px !important;
    }
    .ev_stamp_badge strong {
        font-size: 14px !important;
    }
    .ev_modal_header {
        padding-right: 55px !important;
    }
    .ev_card_title {
        font-size: 22px !important;
    }
    .ev_pkg_price strong {
        font-size: 22px !important;
    }
    .ev_pkg_price_row {
        justify-content: space-between !important;
    }
    .ev_modal_cta {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }
}