@charset "utf-8";

/* ===========================================================================
   event.css — 이벤트 상세페이지(event/detail.php) 전용
   ---------------------------------------------------------------------------
   [1단계] 구버전 이관(MIGRATION)
   - online.css(.event-plan-con 요금제 카드) · plan.css(.event-view·.header-box·
     .event-notice·promo_*) · detail.php 인라인 <style>(promo 폭/탭/타이틀)에
     흩어져 있던 "구버전 이벤트 상세 스타일"을 .event-page 스코프로 그대로 이관한다.
   - detail.php 클래스명은 변경하지 않는다(마크업 그대로). 값도 구버전과 동일하게 옮겨
     구버전 모양을 유지한다 → 이 파일이 페이지 스타일을 단독 소유(self-contained).
   - 레거시 파일(online/plan)은 다른 이벤트 페이지와 공유 → 원본은 건드리지 않는다.
     pageCss(event.css)가 마지막에 로드 + .event-page 가산 특정도로 본 파일이 우선한다.

   [2단계] 리뉴얼은 이 이관본 위에서 진행한다(추후).
=========================================================================== */

/* =========================================
   [1] 페이지 / 래퍼 — 구버전 #container 폭 제약 해제(신 레이아웃엔 #wrapper 없음)
========================================= */
.event-page #container { width: 100%; min-width: 0; margin: 0; padding: 0; }
.event-page .event-view { position: relative; padding-bottom: 60px; }
/* 콘텐츠 폭 — 폴드·PC 공통 760px 상한. 배너가 width:100%라 폭이 넓어질수록 세로가 길어져 스크롤 폭증.
   ≥680(폴드)부터 max-width로 캡: 좁은 폴드(680~760)는 풀폭 유지(여백 낭비 X), 넓은 폴드·PC(>760)만 캡해
   배너 크기·세로 스크롤을 일관되게 억제. 레거시(plan.css .event-view.new=800px)는 우리 스코프가 우선. */
@media (min-width: 680px) {
    .event-page .event-view.new { max-width: 620px; width: auto; margin: 0 auto; }   /* 폴드(680~1023) — 캡을 680보다 작은 620으로: 폴드 시작(680)부터 중앙정렬·배너 축소 적용(공간 낭비·가독성 균형) */
}
@media (min-width: 1024px) {
    .event-page .event-view.new { max-width: 760px; }   /* PC는 760 유지 */
}

/* =========================================
   [2] 이벤트 헤더 — plan.css(.event-view .header-box) 이관
========================================= */
/* 기본값 = 플립(≤360) 기준. 모바일/폴드/PC는 아래 min-width 미디어쿼리에서 단계 확대 */
.event-page .event-view .header-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding: 30px 16px 0; }
.event-page .event-view .header-box .prog { width: 100%; }
.event-page .event-view .header-box .prog > span { display: inline-block; margin-bottom: 4px; padding: 4px 8px; font-weight: 400; font-size: 12px; background-color: var(--color-black); color: var(--color-white); border-radius: 3px; }
.event-page .event-view .header-box .prog > span.end { background-color: var(--text-tertiary); }
.event-page .event-view .header-box .title { flex: 1; width: 100%; padding-right: 30px; font-weight: 700; font-size: 16px; color: var(--color-black); line-height: 1.35; }
.event-page .event-view .header-box .date { width: 100%; margin-top: 4px; color: var(--text-secondary); font-weight: 400; font-size: 13px; }
/* 공유 버튼 — header-box 우측, 제목 줄에 세로 중앙 정렬. lucide share-2 svg(배경 이미지) */
.event-page .event-view .header-box .btn-icon { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 5; }
.event-page .event-view .header-box .btn-icon .icon-share { display: block; width: 22px; height: 22px; padding: 0; border: none; cursor: pointer; background: url(/shop/assets/images/svg/share-2.svg) center / contain no-repeat; }

/* 모바일(≥361) */
@media (min-width: 361px) {
    .event-page .event-view .header-box .prog > span { padding: 5px 10px 4px; font-size: 13px; }
    .event-page .event-view .header-box .title { padding-right: 34px; font-size: 18px; line-height: 1.4; }
    .event-page .event-view .header-box .date { font-size: 14px; }
    .event-page .event-view .header-box .btn-icon .icon-share { width: 24px; height: 24px; }
}
/* 폴드(≥680) — 가로 여유 활용: 타이포·간격 확대 */
@media (min-width: 680px) {
    .event-page .event-view .header-box { margin-bottom: 14px; }
    .event-page .event-view .header-box .prog > span { margin-bottom: 6px; padding: 5px 11px; font-size: 14px; }
    .event-page .event-view .header-box .title { padding-right: 42px; font-size: 20px; }
    .event-page .event-view .header-box .date { margin-top: 6px; font-size: 15px; }
    .event-page .event-view .header-box .btn-icon .icon-share { width: 26px; height: 26px; }
}
/* PC(≥1024) — 제목 권력화 최대 */
@media (min-width: 1024px) {
    .event-page .event-view .header-box { margin-bottom: 18px; padding: 50px 0 0; }
    .event-page .event-view .header-box .title { padding-right: 46px; font-size: 24px; }
    .event-page .event-view .header-box .date { font-size: 16px; }
    .event-page .event-view .header-box .btn-icon { right: 0; }
    .event-page .event-view .header-box .btn-icon .icon-share { width: 28px; height: 28px; }
}
.event-page .event-view > .content-box .text > img { display: block; margin-right: 10px;  }

/* =========================================
   [3] 프로모 이미지 블록 — detail.php 인라인 <style> + plan.css(.promo_w50) 이관
========================================= */
.event-page .content-box::after { content: ""; display: block; clear: both; }
.event-page .promo_w50 { width: 50%; float: left; }
.event-page .promo_aldot_01,
.event-page .promo_aldot_03 { width: 35%; float: left; }
.event-page .promo_aldot_02 { width: 30%; float: left; }
.event-page .promo_2603_05 { width: 28.5%; float: left; }
.event-page .promo_2603_06,
.event-page .promo_2603_07,
.event-page .promo_2603_08 { width: 20.5%; float: left; }
.event-page .promo_2603_09 { width: 10%; float: left; }

.event-page .promo_tab-1 { width: 17%; }
.event-page .promo_tab-2 { width: 16%; }
.event-page .promo_tab-3 { width: 16%; }
.event-page .promo_tab-4 { width: 17%; }
.event-page .promo_tab-5 { width: 15%; }
.event-page .promo_tab-6 { width: 19%; }
.event-page .event-tab { position: sticky; top: 73px; left: 0; z-index: 9; float: left; cursor: pointer; background: #000; }
.event-page .event-tab img { width: 100%; }

.event-page .promo-title1,
.event-page .promo-title2,
.event-page .promo-title3,
.event-page .promo-title4,
.event-page .promo-title5,
.event-page .promo-title6 { margin-top: 50px; }

@media (max-width: 940px) {
    .event-page .event-tab { top: 53px; }
    .event-page .promo-title1,
    .event-page .promo-title2,
    .event-page .promo-title3,
    .event-page .promo-title4,
    .event-page .promo-title5,
    .event-page .promo-title6 { margin-top: 10px; }
}

/* =========================================
   [4] 요금제 카드 — online.css(.event-plan-con) 이관
========================================= */
.event-page .event-plan-con { display: flex; flex-wrap: wrap; justify-content: start; padding: 0; }
.event-page .event-plan-con > .plan-inner { display: flex; flex-wrap: wrap; justify-content: start; width: 100%; padding: 0 20px; }
@media (min-width: 1024px) { .event-page .event-plan-con > .plan-inner { padding: 0 40px; } }   /* PC — 좌우 여백 확대 */
.event-page .event-plan-con .plan-items { overflow: hidden; width: 100%; max-width: 100%; margin: 0 auto 16px; text-align: left; background-color: var(--color-white); position: relative; overflow-x: clip; cursor: pointer; border: 1px solid var(--border-dark); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }   /* 배경 투명(프레임만) · overflow-x:clip은 가로 넘침 차단 유지 · 카드 하단 간격 플립·모바일 16px */
@media (min-width: 680px) { .event-page .event-plan-con .plan-items { margin-bottom: 20px; } }   /* 폴드 카드 하단 간격 20px */
@media (min-width: 1024px) { .event-page .event-plan-con .plan-items { margin-bottom: 24px; } }  /* PC 카드 하단 간격 24px */

.event-page .event-plan-con .plan-items .plan { display: flex; flex-wrap: wrap; padding: 20px; justify-content: space-between; background: initial; }
.event-page .event-plan-con .plan-items .plan .name { display: flex; align-items: center; width: 100%; margin-bottom: 16px; }   /* 헤더 = 통신사 태그 + 요금제명(가입 버튼 제거로 우측 여백 불필요) */
.event-page .event-plan-con .plan-items .plan .name .tag { width: auto; padding: 0.25rem 0.5625rem; margin-right: 8px; border-radius: var(--radius-xs); font-size: 0.6875rem; font-weight: 800; letter-spacing: -0.01em; text-align: center; }   /* plans 리스트(.plans-page .tag)와 동일 */
.event-page .event-plan-con .plan-items .plan .name p { min-width: 0; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 500; word-break: keep-all; }   /* min-width:0 → 좁은 폭에서 자연 줄바꿈(넘침 방지) */
@media (min-width: 680px) { .event-page .event-plan-con .plan-items .plan .name p { font-size: 0.875rem; } }   /* 폴드 요금제명 14px */
@media (min-width: 1024px) { .event-page .event-plan-con .plan-items .plan .name p { font-size: 1rem; } }   /* PC 요금제명 16px */

/* spec — 데이터(대형) + 속도(블루 +ⓘ) 한 줄 / 통화·문자는 middot으로 구분. 속도(plus)는 spec-data로 통합됨 */
.event-page .event-plan-con .plan-items .plan .spec-box { flex: 1; width: auto; min-width: 0; padding-right: 20px; }   /* min-width:0 → 플립 등 좁은 폭에서 가격 열에 밀려도 넘치지 않고 줄바꿈 */
.event-page .event-plan-con .plan-items .plan .spec-data { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.375rem; margin: 0; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; color: var(--text-main); }   /* GB 데이터 hero(서브) — 폴드 26px(플립·모바일 20·PC 30). 가격 hero보다 4px 작게. QoS 작게 붙임 */
.event-page .event-plan-con .plan-items .plan .spec-qos { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-main); }
/* B안 — 속도+"?"를 qos-line으로 묶음(마크업 래퍼). spec-data flex 아이템으로서 함께 이동 */
.event-page .event-plan-con .plan-items .plan .qos-line { display: inline-flex; align-items: baseline; gap: 0.25rem; }
@media (max-width: 679px) { .event-page .event-plan-con .plan-items .plan .qos-line { flex-basis: 100%; } }   /* 모바일·플립 — 속도를 자체 줄로(GB 첫 줄 / 속도 둘째 줄) → 중간 줄바꿈으로 값쌍 틀어짐 방지 */
/* QoS "?" 도움말 말풍선 — 홈 인기요금제(.home-page .qos-help/.qos-bubble) 디자인 이식.
   구버전 icon-alert-circle + native title 대체. 다크 슬레이트 말풍선, hover/focus/.on 노출(JS 없이 CSS).
   help가 .spec-data(카드 왼쪽 열) 안에 인라인 → 말풍선을 help 기준 좌측 정렬로 펼쳐 우측 넘침 방지 */
.event-page .event-plan-con .plan-items .qos-help { position: relative; z-index: 5; flex-shrink: 0; align-self: baseline; display: inline-flex; align-items: center; justify-content: center; width: 0.9375rem; height: 0.9375rem; margin-left: 0.125rem; border-radius: 50%; background: var(--gray-200); color: var(--text-tertiary); font-size: 0.625rem; font-weight: 800; cursor: help; }   /* baseline 정렬 — 큰 GB 중앙이 아니라 옆 QoS 텍스트에 맞춤 */
.event-page .event-plan-con .plan-items .qos-bubble { position: absolute; bottom: calc(100% + 0.5625rem); left: 0; width: 14.375rem; max-width: 70vw; padding: 0.6875rem 0.8125rem; background: var(--slate-800); color: var(--color-white); font-size: 0.75rem; font-weight: 600; line-height: 1.55; letter-spacing: -0.01em; text-align: left; white-space: normal; border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(11, 15, 26, 0.22); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; z-index: 40; }
.event-page .event-plan-con .plan-items .qos-bubble::after { content: ""; position: absolute; top: 100%; left: 0.625rem; border: 6px solid transparent; border-top-color: var(--slate-800); }
.event-page .event-plan-con .plan-items .qos-help:hover .qos-bubble,
.event-page .event-plan-con .plan-items .qos-help:focus .qos-bubble,
.event-page .event-plan-con .plan-items .qos-help.on .qos-bubble { opacity: 1; visibility: visible; transform: translateY(0); }
/* 터치/좁은 화면 — '?' 탭 영역을 44px로 확장(작은 아이콘 탭 오류 방지, 시각 크기 유지) */
@media (max-width: 1023px) {
    .event-page .event-plan-con .plan-items .qos-help::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; }
}
/* 모바일·플립(≤679) — 말풍선을 '?' 중앙 기준으로 펼쳐 좁은 카드 폭 안에 들어오게(넘침·클립 최소화). 카드 overflow-x:clip는 안전망 */
@media (max-width: 679px) {
    .event-page .event-plan-con .plan-items .qos-bubble { left: 50%; right: auto; max-width: 80vw; transform: translateX(-50%) translateY(4px); }
    .event-page .event-plan-con .plan-items .qos-help:hover .qos-bubble,
    .event-page .event-plan-con .plan-items .qos-help:focus .qos-bubble,
    .event-page .event-plan-con .plan-items .qos-help.on .qos-bubble { transform: translateX(-50%) translateY(0); }
    .event-page .event-plan-con .plan-items .qos-bubble::after { left: 50%; right: auto; transform: translateX(-50%); }
}
.event-page .event-plan-con .plan-items .plan .spec-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.event-page .event-plan-con .plan-items .plan .spec-sub li { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); line-height: 1.4; }
.event-page .event-plan-con .plan-items .plan .spec-sub li + li::before { content: "·"; margin-right: 0.5rem; color: var(--text-tertiary); }   /* "선의 종말" — 구분선 대신 middot으로 분리 */

.event-page .event-plan-con .plan-items .plan .price-box { text-align: right; width: auto; }
/* 할인 배지 + 가격 한 줄(우측 정렬). 배지 % 값은 퍼블리싱용 정적 계산(할인가÷원가) — 개발 시 data-sale로 동적 바인딩 */
.event-page .event-plan-con .plan-items .plan .price-box .price-main { display: flex; align-items: center; gap: 0.125rem; }   /* 가격 ↔ › 간격 2px(축소). 배지(display:none)라 실제 gap은 가격↔›만 */
.event-page .event-plan-con .plan-items .plan .price-box .sale-badge { display: none; flex-shrink: 0; padding: 0.25rem 0.5rem; border-radius: var(--radius-xs); background: var(--badge-popular-bg); color: var(--badge-popular-text); font-size: 0.75rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }   /* 할인율 배지 삭제(display:none). 마크업 data-sale은 DB 연동 훅으로 보존 — 되살리려면 display 제거 */
.event-page .event-plan-con .plan-items .plan .price-box .price { font-size: 1.5rem; color: var(--text-main); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; position: relative; }   /* 할인가 hero — 플립·모바일 24px(폴드 30·PC 34) */
.event-page .event-plan-con .plan-items .plan .price-box .price::before { display: inline-block; content: "월"; color: var(--text-tertiary); font-size: 0.7em; margin-right: 4px; font-weight: 700; }
.event-page .event-plan-con .plan-items .plan .price-box .price span { font-size: 0.7em; color: var(--text-tertiary); margin-left: 2px; font-weight: 700; }
.event-page .event-plan-con .plan-items .plan .price-box .origin,
.event-page .event-plan-con .plan-items .plan .price-box .price2 { font-size: 0.8125rem; color: var(--text-disabled); margin-top: 4px; font-weight: 400; padding-right: 1.375rem; }   /* #4 이후가격(조건부) 아주 옅게. 플립·모바일 우측 정렬 보정 = gap 0.125 + › 1.25 (폴드·PC는 아래서 확대) */
.event-page .event-plan-con .plan-items .plan .price-box .origin span,
.event-page .event-plan-con .plan-items .plan .price-box .price2 span { font-size: 1em; font-weight: 600; }
.event-page .event-plan-con .plan-items .plan .price-box .origins { margin-top: 4px; }
.event-page .event-plan-con .plan-items .plan .price-box .origins .origin,
.event-page .event-plan-con .plan-items .plan .price-box .origins .price2 { margin-top: 0; }

/* 헤더 + 값쌍 구조(≥361, flexbox) — 이름은 풀폭 헤더(첫 줄), 다음 줄에 [데이터 묶음(좌) ↔ 가격 묶음(우)] 마주 보게.
   flex-wrap: 이름이 flex-basis 100%라 한 줄 독점 → 다음 줄에 spec-box·price-box 나란히. align-items:flex-start로 데이터·가격 상단 정렬.
   가입은 카드 전체 투명 링크(absolute)라 이 흐름에 영향 없음. 플립(≤360)은 base(.plan flex) 그대로 — 좁은 폭 긴 요금제명 보호 */
@media (min-width: 361px) {
    .event-page .event-plan-con .plan-items .plan { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 20px; row-gap: 1rem; }
    .event-page .event-plan-con .plan-items .plan .name { flex: 0 0 100%; margin: 0; }                                            /* 풀폭 헤더 */
    .event-page .event-plan-con .plan-items .plan .spec-box { flex: 1 1 0; min-width: 0; padding-right: 0; }                      /* 값쌍 좌 — 데이터+통화문자 */
    .event-page .event-plan-con .plan-items .plan .price-box { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }   /* 값쌍 우 — 가격+이후가 */
}

/* 숫자 권력화 — GB·가격(hero)은 폭 따라 강화(20/26/30 · 24/30/34). 보조 텍스트(통화문자·이후가격)는 13/14/16 사다리로 폴드서 한 단 키워 넓은 화면 가독성 확보.
   이후가격(origin)의 위계 낮춤은 크기보다 색(--text-disabled)으로 처리 */
@media (min-width: 680px) {
    .event-page .event-plan-con .plan-items .plan .price-box .price { font-size: 1.875rem; }   /* 폴드 할인가 30px(hero) */
    .event-page .event-plan-con .plan-items .plan .price-box .price-go .v2-icon { width: 1.5rem; height: 1.5rem; }   /* 폴드 › 24px */
    .event-page .event-plan-con .plan-items .plan .price-box .origin { font-size: 0.875rem; padding-right: 1.625rem; }   /* 폴드 이후가격 13→14px + 정렬 보정(gap 0.125 + ›24) */
    .event-page .event-plan-con .plan-items .plan .spec-sub li { font-size: 0.875rem; }   /* 폴드 통화·문자 13→14px */
}

/* ── PC(≥1024) 사이즈 일관화 — 타입 사다리 30/24/16/14/13, 여백을 카드 패딩(28) 리듬에 정합 ── */
@media (min-width: 1024px) {
    .event-page .event-plan-con .plan-items .plan { column-gap: 1.5rem; row-gap: 1.5rem; }         /* 값쌍 거터 24px · 헤더↔값쌍 24px */
    .event-page .event-plan-con .plan-items .plan .spec-data { font-size: 1.875rem; }              /* PC GB 30px(서브) — 가격 34보다 4px 작게 */
    .event-page .event-plan-con .plan-items .plan .price-box .price { font-size: 2.125rem; }       /* PC 가격 34px(hero) */
    .event-page .event-plan-con .plan-items .plan .price-box .origin { font-size: 1rem; margin-top: 0.5rem; padding-right: 1.875rem; }   /* PC 이후가격 16px · 간격 8px · 정렬 보정(gap 0.125 + ›28) */
    .event-page .event-plan-con .plan-items .plan .price-box .price-go .v2-icon { width: 1.75rem; height: 1.75rem; }   /* PC › 28px */
    .event-page .event-plan-con .plan-items .plan .spec-sub li { font-size: 1rem; }                /* PC 통화·문자 16px */
    .event-page .event-plan-con .plan-items .plan .price-box .sale-badge { font-size: 0.8125rem; } /* PC 할인율 12→13px */
}

/* 모바일·플립(≤679) — 카드 폰트 압축(컴팩트): 히어로 24→22 · 14px 보조→13 · 이후가 13→12. 폴드·PC는 유지 */
@media (max-width: 679px) {
    .event-page .event-plan-con .plan-items .plan .spec-data { font-size: 1.25rem; }               /* GB 20px(플립·모바일) — 가격 24보다 4px 작게 */
    .event-page .event-plan-con .plan-items .plan .price-box .price { font-size: 1.5rem; }         /* 가격 24px(플립·모바일 hero) */
    .event-page .event-plan-con .plan-items .plan .spec-qos { font-size: 0.8125rem; }              /* 속도 14→13px */
    .event-page .event-plan-con .plan-items .plan { row-gap: 1.25rem; }                            /* 플립·모바일 헤더↔값쌍 간격 16→20px */
    .event-page .event-plan-con .plan-items .plan .name { margin-bottom: 0; }                      /* 플립: 이름 margin 대신 row-gap으로 통일(중복 간격 방지) */
}

/* 플립(≤360) — 값쌍 해제, 단일 컬럼 스택(시안 반영). 초협폭서 데이터↔가격 좌우 배치는 줄바꿈·넘침 유발 →
   이름→데이터→가격을 세로로 쌓고 가격도 좌측 정렬(가격 hero는 크기로 유지). 361+는 값쌍 그대로 */
@media (max-width: 360px) {
    .event-page .event-plan-con .plan-items .plan { flex-direction: column; justify-content: flex-start; row-gap: 1rem; }
    .event-page .event-plan-con .plan-items .plan .spec-box { flex: 0 0 auto; width: 100%; padding-right: 0; }
    .event-page .event-plan-con .plan-items .plan .price-box { width: 100%; text-align: left; }
    .event-page .event-plan-con .plan-items .plan .price-box .price-main { justify-content: flex-start; }   /* 가격 + › 좌측 정렬 */
    .event-page .event-plan-con .plan-items .plan .price-box .origin { padding-right: 0; }                  /* 좌측 정렬이라 › 정렬 보정 불필요 */
}

/* .event 영역 — "선의 종말": 구분선 없이 .plan padding-bottom + summary padding-top 여백(명도차)으로 분리 */
.event-page .event-plan-con .plan-items .event .event-inner { padding: 8px 20px; display: flex; border-radius: var(--radius-md); justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; }
.event-page .event-plan-con .plan-items .event .event-inner .text { font-size: 0.75rem; font-weight: 300; width: 100%; display: flex; align-items: center; color: var(--text-secondary); }   /* 플립 12px → 아래 단계 확대(모바일·폴드 13 / PC 14) */
.event-page .event-plan-con .plan-items .event .event-inner .text + .text { margin-top: 5px; }
.event-page .event-plan-con .plan-items .event .event-inner .text strong { font-size: 1.02em; font-weight: 600; color: var(--color-main); }
@media (min-width: 361px)  { .event-page .event-plan-con .plan-items .event .event-inner .text { font-size: 0.8125rem; } }   /* 모바일·폴드 13px */
@media (min-width: 1024px) { .event-page .event-plan-con .plan-items .event .event-inner .text { font-size: 0.875rem; } }    /* PC 14px */
.event-page .event-plan-con .plan-items .event .event-inner .custom-desc { display: flex; position: relative; padding-bottom: 2px; }
.event-page .event-plan-con .plan-items .event .event-inner .custom-desc img {  position: relative; width: 5px; height: 5px; top: 8px; margin-right: 10px; }
.event-page .event-plan-con .plan-items .event .event-inner .custom-desc .text { display: block; }
.event-page .event-plan-con .plan-items .event .event-inner .img { padding: 4px; background-color: var(--gray-200); border-radius: var(--radius-pill); margin-right: 10px; }
.event-page .event-plan-con .plan-items .event .event-inner .img img { max-width: 13px; display: block; width: 100%; }
.event-page .event-plan-con .plan-items .event .event-inner .icon { width: 21px; height: 21px; margin-right: 10px; }
.event-page .event-plan-con .plan-items .event .event-inner .icon.combine { background-image: url(https://www.eyagi.co.kr/EventFile/event-icon--benefitcombine.png); background-repeat: no-repeat; background-size: contain; }
.event-page .event-plan-con .plan-items .event .event-inner .icon.card { background-image: url(https://www.eyagi.co.kr/EventFile/event-icon-benefitcard.png); background-repeat: no-repeat; background-size: contain; }

/* 통신사 태그 색 — plans 리스트(.plans-page .tag.*)와 동일 틴트(배경=틴트, 글씨=캐리어색) */
.event-page .event-plan-con .plan-items.lg .plan .name .tag { background-color: var(--color-lgt-bg); color: var(--color-lgt); }
.event-page .event-plan-con .plan-items.skt .plan .name .tag { background-color: var(--color-skt-bg); color: var(--color-skt); }
.event-page .event-plan-con .plan-items.kt .plan .name .tag { background-color: var(--color-kt-bg); color: var(--color-kt); }

/* =========================================
   [5] 유의사항 — plan.css(.event-notice) 이관
========================================= */
.event-page .event-notice { padding: 40px 20px; background: #595959; text-align: left; color: var(--color-white); word-break: break-word; }
.event-page .event-notice h1,
.event-page .event-notice > p:first-child { color: var(--color-white); font-size: 23px; font-weight: 700; margin-bottom: 30px; }
.event-page .event-notice h2 { font-weight: 600; text-decoration: underline; margin-bottom: 20px; color: var(--color-white); }
.event-page .event-notice h3,
.event-page .event-notice > p > strong { margin: 20px 0 10px 0; color: var(--color-white); font-weight: 600; }
.event-page .event-notice > p { font-weight: 200; line-height: 1.5; color: var(--color-white); font-size: 15px; word-break: break-word; }
.event-page .event-notice > p > span { color: inherit !important; }
.event-page .event-notice a { color: #FDEB9F; text-decoration: underline; }
.event-page .event-notice .marker { color: #ffde00; font-weight: 400; }
.event-page .event-notice table { margin: 10px 7px 0 7px; width: calc(100% - 14px) !important; }
.event-page .event-notice table,
.event-page .event-notice table td,
.event-page .event-notice table th { border: 1px solid rgba(255, 255, 255, 0.5); border-collapse: collapse; }
.event-page .event-notice table td { padding: 7px; font-size: 14px; font-weight: 300; }
.event-page .event-notice > strong { font-size: 18px; word-break: break-word; }

/* =========================================
   [6] 목록 버튼(.btn_box / .btn.btn02.wid1-5)
   - 레거시(include/css/common.css: 230×60·20px·회색 #797979 솔리드)를 .event-page 스코프로 리뉴얼.
     detail.php 무수정 — '목록'은 단발 보조 액션이라 저채도 아웃라인으로(4.7 위계 / 4.8 무그림자).
     (wid1-5=style.css는 신스타일 분기에서 미로드 → 인라인 폭 없음. 크기·간격은 --btn-* 토큰이 해상도 자동 대응)
========================================= */
.event-page .btn_box {
  padding-top: 0;              /* 레거시 40px 리셋 — 위 간격은 margin으로 */
  margin-top: 2rem;
  text-align: center;
}
.event-page .btn_box .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: auto;                 /* 레거시 230px 해제 */
  min-width: 8rem;
  height: auto;                /* 레거시 60px 해제 */
  min-height: var(--btn-md-h); /* 터치 타깃(≥44px) */
  padding: 0 1.75rem;
  border: 1px solid var(--border-dark);
  border-radius: var(--btn-radius);
  background: var(--color-white);
  color: var(--text-secondary);
  font-size: var(--btn-md-fs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s;
}
.event-page .btn_box .btn:hover { border-color: var(--text-tertiary); color: var(--text-main); }   /* 4.8 — 그림자 대신 테두리·색 변화 */
.event-page .btn_box .btn:active { transform: scale(0.98); }
.event-page .btn_box .btn:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }

/* =========================================
   [7] 공유 팝업 시트 — 공통 .modal 셸 재사용, 폭만 컴팩트하게(기본 600 → 420).
       내용(.share-list = 카카오·페북·주소복사)은 #shareLayer ID 스타일(online.css) 유지.
========================================= */
.share-sheet { --modal-max: 420px; }
.share-sheet .share-list { padding-bottom: 0.25rem; }   /* 아이콘 라벨 하단 숨 트임(시트 패딩과 함께) */

/* 공유 아이콘 — svg 폴더의 컬러 브랜드 배지(64×64 원형)로 연결. online.css는 옛 경로(include/images/icon)라 배경 이미지만 오버라이드(원형·크기는 online.css 유지) */
#shareLayer .share-list li .icon-kakao span::before    { background-image: url(/shop/assets/images/svg/icon-kakao.svg); }
#shareLayer .share-list li .icon-facebook span::before { background-image: url(/shop/assets/images/svg/icon-facebook.svg); }
#shareLayer .share-list li .icon-url span::before      { background-image: url(/shop/assets/images/svg/icon-url.svg); }

/* =========================================================================
   리뉴얼 ① 카드 외형(기반) — 흰 카드·라운드·여백·호버 (.event-page 스코프)
   detail.php 무수정. 카드 안쪽(이름·가격·스펙·혜택)은 이후 단계에서 점진 수정.
   ========================================================================= */
.event-page .event-plan-con{display:block !important;background:none;}
.event-page .plan-items{position:relative;background:transparent;border:1px solid var(--border-dark);border-radius:var(--radius-xl);transition:border-color .15s var(--smooth)}   /* 배경 투명(프레임만) · 카드 패딩은 .plan/.event로 이동. 호버는 4.8에 따라 테두리색만 */
.event-page .plan-items:hover{border-color:var(--color-main)}   /* 4.8 호버 — 그림자·이동 대신 테두리 블루로 강조 */

/* 카드 패딩 이동 — .plan(본문)·.event(사은품)이 각자 패딩을 가짐. 값=카드 리듬(플립16→PC28). CTA 절대배치 top/right와 동일 값이라 헤더 정렬 유지 */
.event-page .event-plan-con .plan-items .plan{padding:1rem 1rem 0.5rem;}                             /* 플립 16 · 하단 8(=.event 간격 축소) */
.event-page .event-plan-con .plan-items .event{margin:0; padding:0.875rem 1.25rem; background:transparent;}   /* #3 회색 면 제거 → 흰색 통합(여백만 분리). 좌우 패딩=.plan+4px로 칩을 본문과 정렬 */
.event-page .event-plan-con .plan-items .event .event-inner{padding:0.875rem;}   /* 펼침 상세 패널 — 상하좌우 동일 14px 여백 */
@media (min-width:361px){ .event-page .event-plan-con .plan-items .plan{padding:1.25rem 1.25rem 0.5rem;} .event-page .event-plan-con .plan-items .event{padding:0.875rem 1.25rem;} }   /* 모바일 20 · 하단 8 · 밴드 24h */
@media (min-width:680px){ .event-page .event-plan-con .plan-items .plan{padding:1.5rem 1.5rem 0.5rem;} .event-page .event-plan-con .plan-items .event{padding:1rem 1.75rem;} }       /* 폴드 24 · 하단 8 · 밴드 28h */
@media (min-width:1024px){ .event-page .event-plan-con .plan-items .plan{padding:1.75rem 1.75rem 0.5rem;} .event-page .event-plan-con .plan-items .event{padding:1rem 2rem;} }        /* PC 28 · 하단 8 · 밴드 32h(최종 유지) */

/* 사은품 칩 — [benefit 썸네일 + 문구]. 문구는 임시 퍼블리싱(개발 시 data-gift 키로 바인딩).
   badge-area = 칩 줄(전체폭, 줄바꿈) → summary 첫 줄. "사은품 자세히 보기"+▾는 아랫줄 */
.event-page .event-plan-con .plan-items .event .badge-area { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }   /* 칩=왼쪽, 토글=우측. 보더리스 칩이라 gap 12px로 칩 간 분리 */
.event-page .event-plan-con .plan-items .event .gift-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0; }   /* 보더리스 — 흰 카드 위 브랜드 썸네일 + 텍스트 */
.event-page .event-plan-con .plan-items .event .gift-chip img { width: 1.375rem; height: 1.375rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--color-white); }
.event-page .event-plan-con .plan-items .event .gift-chip-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-secondary); }
/* 인터넷결합 칩 — gift-chip pill 재사용 + 썸네일 대신 link 아이콘. 결합 가능 요금제만 노출(15개) */
.event-page .event-plan-con .plan-items .event .combine-chip { padding: 0; }   /* 보더리스 정렬 통일(링크 아이콘 + 텍스트) */
.event-page .event-plan-con .plan-items .event .combine-chip .v2-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: var(--color-main); }

/* 사은품 펼침 — 메인 인기요금제(reco-gift)식 collapsible. native <details>로 JS 없이 토글.
   summary = 썸네일(badge-area) + "사은품 자세히 보기" + ▾ / 펼침 본문 = 혜택(event-inner) */
.event-page .event-plan-con .plan-items .event { border-top: 0; }   /* 레거시 online.css(.event border-top:1px #e9e9e9) 구분선 제거 — 자세히보기는 명도·간격으로만 분리(선의 종말) */
.event-page .event-plan-con .plan-items .event .event-gift { position: relative; z-index: 4; }   /* 오버레이 <a>(z3) 위 — summary 클릭 가능하게 */
.event-page .event-plan-con .plan-items .event .event-gift-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; cursor: pointer; }   /* 배경 삭제 — 회색 블록은 .event가 담당, 여기선 칩+토글 행만(패딩은 .event가 제공) */
.event-page .event-plan-con .plan-items .event .event-gift-sum::-webkit-details-marker { display: none; }
.event-page .event-plan-con .plan-items .event .event-gift-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-tertiary); transition: color 0.14s; }   /* 자세히보기 13px(전 구간) */
.event-page .event-plan-con .plan-items .event .event-gift-sum:hover .event-gift-label { color: var(--text-main); }
.event-page .event-plan-con .plan-items .event .event-gift-arrow { width: 1.125rem; height: 1.125rem; margin-left: auto; flex-shrink: 0; color: var(--text-tertiary); transition: transform 0.2s var(--smooth); }
.event-page .event-plan-con .plan-items .event .event-gift[open] .event-gift-arrow { transform: rotate(180deg); }
/* 모바일(≤679) B안 — 칩이 여러 줄이면 '자세히보기'가 하단으로 밀림 → 칩 있는 카드(.badge-area)만 텍스트 숨기고 화살표만 밴드 우상단 고정.
   care-only(칩 없는) 카드는 자세히보기 텍스트 유지(밀림 없음). :has 미지원 브라우저는 현재 동작으로 안전 폴백 */
@media (max-width: 679px) {
    .event-page .event-plan-con .plan-items .event .event-gift-sum:has(.badge-area) { position: relative; padding-right: 1.75rem; }
    .event-page .event-plan-con .plan-items .event .event-gift-sum:has(.badge-area) .event-gift-label { display: none; }
    .event-page .event-plan-con .plan-items .event .event-gift-sum:has(.badge-area) .event-gift-arrow { position: absolute; top: 0.125rem; right: 0; margin: 0; }
}
/* 펼침 본문(혜택) — reco-gift-list식 옅은 회색 박스. event-inner padding:0 override(동일 특정도+1) */
.event-page .event-plan-con .plan-items .event .event-gift > .event-inner { margin-top:1rem; background: var(--gray-100); border-radius: var(--radius-md); }

/* 카드 CTA — 카드 전체가 상세페이지 링크(리스트-로우 패턴). 가입하기 버튼 제거, 이동 신호는 가격 옆 ›(.price::after).
   .join-btn <a>는 .plan-items(relative)를 inset:0로 덮는 투명 링크. 사은품 펼침(z4)·"?"(z5)가 이 링크(z3) 위라 토글·툴팁 정상.
   .v2-btn(width:100%·min-height:48) 무력화 위해 크기·배경 리셋. */
.event-page .event-plan-con .plan-items .join-btn { position: absolute; inset: 0; z-index: 3; width: auto; min-height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; background: none; border: 0; box-shadow: none; }
/* 이동 신호 — 가격 옆 큰 › (블루, 원형 없음). 카드 호버 시 오른쪽 슬라이드. 클릭은 카드 전체 투명 링크가 처리(시각 표시만) */
.event-page .event-plan-con .plan-items .plan .price-box .price-go { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--color-main); transition: transform 0.18s var(--smooth); }
.event-page .event-plan-con .plan-items .plan .price-box .price-go .v2-icon { width: 1.25rem; height: 1.25rem; }   /* 플립·모바일 › 20px(가격 20에 맞춤). 폴드·PC는 아래서 확대 */
.event-page .event-plan-con .plan-items:hover .price-go { transform: translateX(4px); }   /* 카드 호버 → › 오른쪽 슬라이드 */

/* =========================================================================
   리뉴얼 ② 경쟁사 벤치마크 — #2 체감가 프레이밍 / #3 추천 CTA 강조
   (#4 사은품 브랜드 칩은 구독·케어 그룹에 이미 적용 → 추가 작업 없음)
   ========================================================================= */

/* #3 추천 요금제(.v2-reco) — 가입 버튼이 카드 전체 투명 링크로 바뀌어 그라데이션 CTA 강조는 비활성.
   (버튼 background를 칠하면 투명 링크가 카드 전체를 덮어 그라데이션이 카드 전면에 깔리므로 제거)
   추천 강조가 다시 필요하면 버튼이 아니라 카드 테두리/배경 틴트로 표현한다. */

/* 카드 마커 배지 — BEST(인기·웜) · 이야기추천(브랜드 블루). 통신사 태그 옆에 작게(태그와 동일 스케일) */
.event-page .event-plan-con .plan-items .plan .name .v2-flag { flex-shrink: 0; margin-right: 8px; padding: 0.25rem 0.5625rem; border-radius: var(--radius-xs); font-size: 0.6875rem; font-weight: 800; letter-spacing: -0.01em; text-align: center; white-space: nowrap; }   /* 통신사 태그(.tag)와 동일 박스 — 색만 다름 */
.event-page .event-plan-con .plan-items .plan .name .v2-flag-best  { background: var(--badge-recommend-bg); color: var(--badge-recommend-text); }   /* BEST — 소프트 골드(베스트셀러) */
.event-page .event-plan-con .plan-items .plan .name .v2-flag-gift { background: var(--color-main-bg); color: var(--color-main); }             /* 이야기추천 — 브랜드 블루 */