/* ===================================================
   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; }
}