/* ===================================================
   refine.css — VANFLYTA On-Air 디자인 고도화 레이어
   webinar.css(와 watch.php 인라인 스타일) **뒤에서** 불러 색·그림자·버튼·카드를 정리한다.
   원칙: 면은 흰색·아주 옅은 라벤더 회색, 강조는 딥 인디고 한 색,
         레드는 날짜·LIVE·브랜드명 같은 '점'에만, 퍼플→와인→레드 그라데이션은 가는 선에만.
   =================================================== */
:root {
    --vf-ink:      #1C1744;   /* 제목·본문 진한 글자 */
    --vf-primary:  #2D2470;   /* 주 버튼·아이콘 */
    --vf-primary-h:#221B5A;   /* 주 버튼 hover */
    --vf-wine:     #7A1D4F;   /* 그라데이션 중간 */
    --vf-red:      #C8102E;   /* 포인트 */
    --vf-bg:       #F6F5F9;   /* 페이지 바탕 */
    --vf-tint:     #F1EFF8;   /* 아이콘 칩·안내 박스 */
    --vf-line:     #E6E3EE;   /* 테두리 */
    --vf-muted:    #6B6880;   /* 보조 글자 */
    --vf-sig:      linear-gradient(100deg, #2D2470 0%, #5A2172 55%, #C8102E 100%);
    --vf-shadow-s: 0 1px 2px rgba(28,23,68,.04), 0 4px 14px rgba(28,23,68,.05);
    --vf-shadow-m: 0 1px 2px rgba(28,23,68,.04), 0 14px 36px rgba(28,23,68,.08);
    --vf-shadow-l: 0 2px 4px rgba(28,23,68,.04), 0 28px 64px rgba(28,23,68,.12);

    /* 기존 변수도 같은 계열로 맞춘다 */
    --txt: #1F1C33;
    --muted: var(--vf-muted);
    --teal: var(--vf-primary);
    --teal-d: var(--vf-ink);
    --border: var(--vf-line);
    --vf-purple: var(--vf-primary);
    --vf-grad: var(--vf-sig);
}

body { letter-spacing: -.005em; word-break: keep-all; }
body.page-main, body.page-watch { background: var(--vf-bg); }
body.page-index {
    background:
        radial-gradient(1000px 520px at 8% -10%, rgba(45,36,112,.07), transparent 60%),
        radial-gradient(800px 460px at 95% 0%, rgba(200,16,46,.05), transparent 62%),
        var(--vf-bg);
}
body.page-index::before { opacity: .55; }

/* ── 버튼 ── */
.btn-enter, .regm-submit, .done-btn, .btn-qa-submit, .vf-btn {
    background: linear-gradient(180deg, #382C82 0%, var(--vf-primary) 100%) !important;
    color: #fff; border: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px rgba(45,36,112,.22) !important;
    filter: none;
}
.btn-enter:hover, .regm-submit:hover, .done-btn:hover, .btn-qa-submit:hover, .vf-btn:hover {
    background: linear-gradient(180deg, #2F2574 0%, var(--vf-primary-h) 100%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 26px rgba(45,36,112,.28) !important;
    filter: none; transform: translateY(-1px);
}
.btn-qa-submit:disabled { background: #D6D3E0 !important; box-shadow: none !important; transform: none; }
.btn-register, .regm-cancel, .btn-logout, .sn-logout {
    background: #fff; color: var(--vf-ink); border: 1px solid var(--vf-line) !important;
    box-shadow: var(--vf-shadow-s);
}
.btn-register:hover, .regm-cancel:hover, .btn-logout:hover, .sn-logout:hover {
    background: var(--vf-tint); color: var(--vf-primary); border-color: #CFCAE0 !important; box-shadow: var(--vf-shadow-s);
}

/* ── 입력 ── */
.form-control, .regm-input, .qa-textarea, .reg-input {
    border: 1.5px solid var(--vf-line) !important; background: #fff !important; color: var(--txt);
    font-weight: 500;
}
.form-control:focus, .regm-input:focus, .qa-textarea:focus, .reg-input:focus {
    border-color: var(--vf-primary) !important;
    box-shadow: 0 0 0 4px rgba(45,36,112,.09) !important;
}
.form-control::placeholder, .regm-input::placeholder, .qa-textarea::placeholder { color: #A29FB3; font-weight: 500; }
.form-lead {
    background: var(--vf-tint); border: 1px solid var(--vf-line); color: var(--vf-ink); font-weight: 600;
}
.form-lead svg { stroke: var(--vf-primary); }

/* ── 입장 카드 ── */
.page-index .card-wrap { border: 1px solid var(--vf-line); box-shadow: var(--vf-shadow-l); border-radius: 20px; }
.page-index .card-wrap::after { background: var(--vf-sig); height: 3px; }
.page-index .event-date .ev-sched { background: var(--vf-bg); border: 1px solid var(--vf-line); color: var(--vf-ink); }
.eyebrow { color: var(--vf-muted); letter-spacing: .16em; }
.eyebrow::before { background: var(--vf-red); }
.panel-divider { background: linear-gradient(90deg, transparent, var(--vf-line) 15%, var(--vf-line) 85%, transparent); }
.login-note { color: #8C899C; }
.right-panel.has-image { border-left: 1px solid var(--vf-line); }
.hero-info { border-top: 1px solid var(--vf-line); }
.hero-info dt { color: #9A97AA; letter-spacing: .02em; }
.hero-info dd { color: var(--vf-ink); }

/* ── 제목 워드마크 ── */
.vf-title { color: var(--vf-ink); }
.vf-title .vf-brand { color: var(--vf-red); }
.vf-title .vf-onair {
    background: linear-gradient(90deg, var(--vf-red) 0%, var(--vf-red) 40%, var(--vf-wine) 75%, var(--vf-primary) 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* ── 상단 내비 ── */
.site-nav, .top-nav { background: rgba(255,255,255,.9); border-bottom: 1px solid var(--vf-line); }
.sn-avatar, .member-avatar { background: var(--vf-ink); }
.sn-profile:hover, .member-profile:hover { background: var(--vf-tint); border-color: var(--vf-line); }
.btn-exit-room {
    background: var(--vf-ink) !important; box-shadow: none !important; border-radius: 10px;
}
.btn-exit-room:hover { background: var(--vf-primary-h) !important; filter: none; }

/* ── 로비 일정 줄 ── */
.main-banner.has-top-banner { border-bottom: 1px solid var(--vf-line); }
.main-banner.has-top-banner .main-bn-meta { color: var(--vf-ink); letter-spacing: -.01em; }
.main-bn-enter { background: var(--vf-primary) !important; box-shadow: 0 8px 20px rgba(45,36,112,.22) !important; border-radius: 12px; }
.main-bn-enter:hover { background: var(--vf-primary-h) !important; }
.main-bn-enter.is-locked {
    background: #fff !important; color: var(--vf-ink); border: 1px solid var(--vf-line);
    box-shadow: var(--vf-shadow-s) !important; animation: none;
}
.main-bn-enter.is-locked:hover { background: var(--vf-tint) !important; }
.live-badge { background: #fff; color: var(--vf-red); box-shadow: var(--vf-shadow-s); border: 1px solid #F3D3D9; }
.live-dot { background: var(--vf-red); }

/* ── 안내 카드 ── */
.guide-card {
    background: #fff; border: 1px solid var(--vf-line); box-shadow: var(--vf-shadow-s); border-radius: 16px;
}
.guide-card::before { background: var(--vf-sig); width: 3px; }
.guide-card:hover { border-color: #D3CEE3; box-shadow: var(--vf-shadow-m); transform: translateY(-2px); }
.guide-ico { background: var(--vf-tint); box-shadow: none; border: 1px solid #E4E0F0; }
.guide-ico svg { stroke: var(--vf-primary); }
.guide-title { color: var(--vf-ink); }
.guide-arrow { color: #B3AFC4; }
.guide-card:hover .guide-arrow { color: var(--vf-primary); }

/* ── 아젠다 패널 ── */
.main-panel { border: 1px solid var(--vf-line); box-shadow: var(--vf-shadow-m); }
.agenda-logo { background: #fff; border-bottom: 1px solid var(--vf-line); }
.agenda-head h2 { color: var(--vf-ink); letter-spacing: -.02em; }
.agenda-head .agenda-day { color: var(--vf-red); }

/* ── 팝업 ── */
.pop-modal, .done-modal, .regm { background: rgba(20,16,48,.48) !important; }
.pop-card, .done-card { border-radius: 18px; box-shadow: var(--vf-shadow-l); }
.pop-head { border-bottom: 1px solid var(--vf-line); }
.pop-head-ico { background: var(--vf-tint); border: 1px solid #E4E0F0; }
.pop-head-ico svg { stroke: var(--vf-primary); }
.pop-title { color: var(--vf-ink); }
.pop-close { border-color: var(--vf-line); color: #9A97AA; }
.pop-body { color: #4A4760; }
.pop-body b { color: var(--vf-ink); }
.done-ico { background: var(--vf-primary); box-shadow: 0 10px 22px rgba(45,36,112,.25); }

/* ── 사전등록 팝업 (entry.php 인라인 스타일 덮어쓰기) ── */
.regm-card { border-radius: 20px !important; box-shadow: var(--vf-shadow-l) !important; }
.regm-head { background: var(--vf-ink) !important; position: relative; }
.regm-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--vf-sig); }
.regm-title { letter-spacing: .08em !important; font-size: 21px !important; }
.regm-guide { color: var(--vf-ink) !important; }
.regm-opt:has(input:checked) { background: var(--vf-bg) !important; border-color: var(--vf-primary) !important; box-shadow: none !important; }
.regm-opt:has(input:checked) .regm-opt-t { color: var(--vf-ink) !important; }
.regm-opt:has(input:checked) .regm-opt-d { color: var(--vf-red) !important; font-weight: 700; }
.regm-sec { background: var(--vf-bg) !important; border-color: var(--vf-line) !important; }
.regm-sec-title { color: var(--vf-ink) !important; }
.regm-agree { border-top-color: var(--vf-line) !important; }
.regm-agree:has(input:checked) { background: var(--vf-tint) !important; color: var(--vf-ink) !important; }
.regm-agree input { accent-color: var(--vf-primary) !important; }

/* ── 시청 룸 (watch.php 인라인 스타일 덮어쓰기) ── */
.room-wrap { border: 1px solid var(--vf-line); box-shadow: var(--vf-shadow-l); }
.video-area { background: #0E0B24; }
.qa-sidebar { border-left: 1px solid var(--vf-line); }
.room-header { background: var(--vf-ink) !important; position: relative; padding: 18px 20px 20px; }
.room-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--vf-sig); }
.room-header-sub { color: rgba(255,255,255,.55); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.room-header-live { background: var(--vf-red); }
.qa-input-wrap { background: #fff; border-bottom: 1px solid var(--vf-line); padding: 18px 18px 14px; }
.qa-input-label { color: var(--vf-muted); }
.qa-input-label strong { color: var(--vf-ink); }
.action-btns { border-bottom: 1px solid var(--vf-line); }
.action-btn { color: var(--vf-primary); border-color: var(--vf-line); }
.action-btn:hover { border-color: #D3CEE3; }
.toast { background: var(--vf-ink); }

/* ── 풋터 ── */
.wbf { border-top: 1px solid var(--vf-line); }
.wbf::before { background: var(--vf-sig) !important; height: 3px !important; top: -3px !important; }
.wbf-addr, .wbf-text { color: #77748A !important; }

/* ── 입장 화면 사전등록 버튼 — 입장하기 바로 아래, 레드 계열 강조 (2026-10-21) ──
   입장하기(인디고 채움)와 겹치지 않게 와인→레드 그라데이션으로 구분한다 */
.reg-cta { margin-top: 14px; }
.reg-cta-or {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 600; color: #8C899C; margin-bottom: 9px;
}
.reg-cta-or::before, .reg-cta-or::after { content: ''; flex: 1; height: 1px; background: var(--vf-line); }
.page-index .btn-register.btn-register--hl {
    margin-top: 0 !important; padding: 15px; gap: 8px;
    background: linear-gradient(100deg, #8E1B4E 0%, var(--vf-red) 100%) !important;
    color: #fff !important; border: none !important; border-radius: 11px;
    font-size: 16px; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 20px rgba(200,16,46,.24) !important;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.page-index .btn-register.btn-register--hl:hover {
    transform: translateY(-1px); filter: brightness(1.06);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 26px rgba(200,16,46,.32) !important;
}
.page-index .btn-register.btn-register--hl svg { width: 18px; height: 18px; stroke: #fff; }
.page-index .reg-cta + .login-note { margin-top: 14px; }
/* 사전등록 버튼이 위로 올라오며 아래가 비므로, PC 에서는 왼쪽 내용을 세로 가운데로 */
@media (min-width: 861px) {
    .page-index .left-panel { justify-content: center; padding-top: 40px; padding-bottom: 40px; }
}

/* ── 입장 우측 = 포스터만 (2026-10-22) ──
   일정·연자 띠를 없앤 뒤 포스터가 칸 높이를 꽉 채우도록: 칸 높이에 맞춰 포스터 폭이 정해진다.
   비율 유지(contain) — 승인번호가 있는 가장자리는 자르지 않는다 */
@media (min-width: 861px) {
    .page-index .right-panel.has-image {
        width: auto !important; flex: 0 0 auto; align-self: stretch;
        display: flex; align-items: center; justify-content: center; background: #fff;
    }
    .page-index .right-panel.has-image .hero-image {
        display: block; height: 100% !important; width: auto !important;
        max-width: 520px !important; max-height: none !important; object-fit: contain !important;
    }
}

/* ── 로비 상단 타이틀 (2026-10-22) — 더 넓게 + 날짜·입장 버튼을 이미지 안에 ──
   위치·크기는 이미지 폭 기준(cqw)이라 화면 폭이 바뀌어도 이미지와 같이 커지고 작아진다.
   타이틀 이미지를 바꿔 글자 위치가 달라지면 --tb-x / --tb-y 만 고치면 된다 */
.vf-tb-in {
    --tb-x: 12.6%; --tb-y: 55%;
    position: relative; z-index: 1; display: inline-block; vertical-align: top;
    width: 100%; max-width: 1440px; container-type: inline-size;
}
.vf-top-banner .vf-tb-in img { width: 100%; max-width: none; }
.vf-tb-cta {
    position: absolute; left: var(--tb-x); top: var(--tb-y); z-index: 2;
    display: flex; align-items: center; gap: 1.6cqw; line-height: normal; text-align: left;
}
.vf-tb-cta .live-badge { margin: 0; font-size: 1.15cqw; padding: .45cqw 1.1cqw; }
.vf-tb-cta .main-bn-meta { margin: 0; font-size: 1.75cqw; font-weight: 800; color: var(--vf-ink); letter-spacing: -.01em; }
.vf-tb-cta .main-bn-meta .bn-sched { gap: 0; }
.vf-tb-cta .main-bn-enter {
    margin: 0; width: auto; padding: .8cqw 2.2cqw; font-size: 1.3cqw; border-radius: .8cqw; gap: .55cqw;
}
.vf-tb-cta .main-bn-enter svg { width: 1.4cqw; height: 1.4cqw; }
.vf-tb-cta .main-bn-enter.is-locked { background: rgba(255,255,255,.92) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* PC: 날짜·버튼은 이미지 안에 있으므로 아래 줄은 숨긴다 / 모바일: 이미지가 작아 글자가 읽히지 않으니 아래 줄로 */
@media (min-width: 761px) {
    .main-banner.has-top-banner { display: none; }
}
@media (max-width: 760px) {
    .vf-tb-cta { display: none; }
}

/* ── 제품명 VANFLYTA® — 이미지 글자색과 같은 #C4232E (시안 V2 에서 추출) + ® 윗첨자 (2026-10-22) ── */
:root { --vf-brand: #C4232E; }
.vf-brand { color: var(--vf-brand) !important; white-space: nowrap; }
.vf-brand sup {
    font-size: .45em; font-weight: 600; line-height: 0;
    vertical-align: super; position: relative; top: -.15em; margin-left: .06em;
}
/* 사전등록 팝업 — 선택된 행사 카드도 제품명은 제품색 그대로 */
.regm-opt:has(input:checked) .regm-opt-t .vf-brand { color: var(--vf-brand) !important; }

/* ═══════════════ 로비 디자인 고도화 v2 (2026-10-22) ═══════════════
   · 타이틀·바로가기·아젠다를 한 폭(--lobby-w)으로 정렬
   · 타이틀은 단독 이미지 카드 (양옆 흐림·띠 없음)
   · 아이콘은 가는 선(1.6), 버튼은 알약형 */
:root { --lobby-w: 1120px; --lobby-gap: 20px; }
body.page-main { background:
    radial-gradient(1100px 420px at 50% -120px, rgba(45,36,112,.06), transparent 70%), var(--vf-bg); }

/* 타이틀 — 단독 카드 */
.vf-top-banner.is-solo { background: none; overflow: visible; padding: 28px var(--lobby-gap) 0; text-align: center; }
.vf-top-banner.is-solo::before, .vf-top-banner.is-solo::after { display: none !important; }
.vf-top-banner.is-solo .vf-tb-in {
    max-width: var(--lobby-w); border-radius: 18px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(28,23,68,.05), 0 18px 48px rgba(28,23,68,.10);
    outline: 1px solid rgba(28,23,68,.06); outline-offset: -1px;
}
@media (max-width: 760px) {
    .vf-top-banner.is-solo { padding: 14px 12px 0; }
    .vf-top-banner.is-solo .vf-tb-in { border-radius: 12px; }
}

/* 타이틀 안 입장 버튼 — 알약형 */
.vf-tb-cta .main-bn-enter, .main-banner.has-top-banner .main-bn-enter { border-radius: 999px !important; font-weight: 700; letter-spacing: -.005em; }
.main-bn-enter.is-locked {
    background: rgba(255,255,255,.94) !important; color: var(--vf-ink) !important;
    border: 1px solid rgba(28,23,68,.14) !important; box-shadow: 0 4px 14px rgba(28,23,68,.08) !important;
}
.main-bn-enter.is-locked:hover { background: #fff !important; border-color: rgba(45,36,112,.35) !important; transform: translateY(-1px); }
.main-bn-enter.is-locked svg { stroke: var(--vf-primary); }
.main-bn-enter.is-ended { opacity: .7; }
.main-bn-enter.is-live { background: var(--vf-primary) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(45,36,112,.30) !important; }
.main-bn-enter.is-live:hover { background: var(--vf-primary-h) !important; transform: translateY(-1px); }
.main-bn-enter .enter-dot { width: .55em; height: .55em; border-radius: 50%; background: #FF5A70; box-shadow: 0 0 0 0 rgba(255,90,112,.6); animation: enterDot 1.6s infinite; flex: none; }
@keyframes enterDot { 70% { box-shadow: 0 0 0 .5em rgba(255,90,112,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,112,0); } }
.main-bn-enter .enter-arrow { stroke: currentColor; transition: transform .2s; }
.main-bn-enter.is-live:hover .enter-arrow { transform: translateX(3px); }
.main-banner.has-top-banner .main-bn-enter { padding: 13px 24px; font-size: 16px; }
.main-banner.has-top-banner { background: transparent; border: 0; }

/* 바로가기 카드 */
.lobby-actions {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    width: 100%; max-width: calc(var(--lobby-w) + var(--lobby-gap) * 2);
    margin: 20px auto 0; padding: 0 var(--lobby-gap);
}
.lobby-actions.is-3 { grid-template-columns: repeat(3, 1fr); }
.la-card {
    display: grid; grid-template-columns: 48px 1fr 34px; align-items: center; gap: 16px;
    padding: 20px 18px 20px 20px; text-align: left; font: inherit; color: inherit; cursor: pointer;
    background: #fff; border: 1px solid var(--vf-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28,23,68,.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.la-card:hover { transform: translateY(-2px); border-color: #D6D1E6; box-shadow: 0 14px 34px rgba(28,23,68,.09); }
.la-card:focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 2px; }
.la-ico {
    width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #F4F2FA 0%, #ECE9F6 100%); border: 1px solid #E5E1F1; color: var(--vf-primary);
}
.la-ico svg { width: 24px; height: 24px; }
.la-txt { display: flex; flex-direction: column; min-width: 0; }
.la-title { font-size: 16px; font-weight: 700; color: var(--vf-ink); letter-spacing: -.015em; }
.la-desc { margin-top: 3px; font-size: 13.5px; color: var(--vf-muted); line-height: 1.45; }
.la-go {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--vf-line); color: #9A97AA; transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.la-go svg { width: 16px; height: 16px; }
.la-card:hover .la-go { background: var(--vf-primary); border-color: var(--vf-primary); color: #fff; }
/* 질문하기 — 아이콘 칩만 진하게 (유일한 '행동' 카드라 한 단계 강조) */
.la-card--accent .la-ico { background: var(--vf-ink); border-color: var(--vf-ink); color: #fff; }
.la-card--accent:hover .la-go { background: var(--vf-brand, #C4232E); border-color: var(--vf-brand, #C4232E); }
@media (max-width: 980px) { .lobby-actions.is-3 { grid-template-columns: 1fr 1fr; } .lobby-actions.is-3 .la-card--accent { grid-column: 1 / -1; } }
@media (max-width: 620px) {
    .lobby-actions, .lobby-actions.is-3 { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; padding: 0 12px; }
    .la-card { padding: 16px; gap: 14px; grid-template-columns: 44px 1fr 30px; }
    .la-ico { width: 44px; height: 44px; border-radius: 12px; }
    .la-go { width: 30px; height: 30px; }
}

/* 아젠다 — 같은 폭으로 */
.page-main .main-panel {
    width: calc(100% - var(--lobby-gap) * 2); max-width: var(--lobby-w);
    margin: 20px auto 56px; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(28,23,68,.06); box-shadow: 0 1px 2px rgba(28,23,68,.05), 0 18px 48px rgba(28,23,68,.08);
}
.page-main .agenda-img { border-radius: 0 !important; }
@media (max-width: 620px) { .page-main .main-panel { width: calc(100% - 24px); margin: 14px auto 36px; border-radius: 12px; } }

/* 상단 내비 — 로그아웃 알약형, 아바타 링 */
.page-main .sn-logout, .page-watch .btn-logout { border-radius: 999px !important; padding: 8px 16px; font-weight: 600; }
.sn-avatar, .member-avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--vf-line); }

/* 팝업 — 아이콘 선을 가늘게, 모서리 넉넉하게 */
.pop-card { border-radius: 20px; }
.pop-head { padding: 18px 22px; }
.pop-head-ico { width: 40px; height: 40px; border-radius: 12px; }
.pop-head-ico svg { stroke-width: 1.7; }
.pop-close { border-radius: 999px; width: 34px; height: 34px; }
.pop-close:hover { background: var(--vf-tint); color: var(--vf-ink); }

/* ── 모바일 로비 (2026-10-22) — 날짜는 타이틀 이미지 안, 입장 버튼은 이미지 아래 그대로 ── */
@media (max-width: 760px) {
    .vf-tb-cta { display: flex; top: 58%; gap: 0; }
    .vf-tb-cta .main-bn-enter, .vf-tb-cta .live-badge { display: none !important; }
    .vf-tb-cta .main-bn-meta { font-size: 3.1cqw; }
    .main-banner.has-top-banner .main-bn-meta { display: none; }
    .main-banner.has-top-banner .main-banner-inner { padding-top: 14px; }
}