/* Veltrion Web Platform Phase 33: Premium Head / Hero UX */
:root {
    --v33-gold: #f1c66f;
    --v33-gold-bright: #ffe39d;
    --v33-gold-deep: #9f6630;
    --v33-red: #9e2419;
    --v33-red-deep: #3a0b07;
    --v33-ink: #040201;
    --v33-panel: rgba(7, 5, 4, .86);
    --v33-line: rgba(232, 186, 102, .30);
    --v33-line-hot: rgba(255, 210, 126, .52);
}

/* 전체 상단 밀도 */
.vweb-main {
    padding-top: 12px !important;
}

/* 프리미엄 상단 헤더 */
.vweb-header--portal {
    position: relative !important;
    min-height: 82px !important;
    padding: 0 22px !important;
    border-radius: 0 0 30px 30px !important;
    border: 1px solid rgba(236, 190, 104, .23) !important;
    border-top: 1px solid rgba(255, 220, 140, .18) !important;
    background:
        radial-gradient(circle at 7% 50%, rgba(151, 39, 19, .28), transparent 18%),
        radial-gradient(circle at 92% 45%, rgba(223, 171, 83, .13), transparent 18%),
        linear-gradient(180deg, rgba(10, 7, 5, .98) 0%, rgba(5, 4, 3, .92) 62%, rgba(3, 2, 1, .82) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 192, .10),
        inset 0 -1px 0 rgba(255, 154, 64, .09),
        0 14px 38px rgba(0,0,0,.48),
        0 0 0 1px rgba(0,0,0,.30) !important;
    overflow: visible !important;
}

.vweb-header--portal::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: -1px !important;
    height: 1px !important;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(228, 175, 91, .16) 10%,
            rgba(255, 228, 154, .72) 50%,
            rgba(228, 175, 91, .16) 90%,
            transparent 100%) !important;
    pointer-events: none !important;
}

.vweb-header--portal::after {
    content: "" !important;
    position: absolute !important;
    left: 52px !important;
    top: -10px !important;
    width: 170px !important;
    height: 74px !important;
    background:
        radial-gradient(ellipse at center, rgba(197, 47, 25, .18), transparent 66%),
        radial-gradient(circle at 35% 50%, rgba(255, 205, 102, .12), transparent 48%) !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
}

/* 브랜드 로고를 헤더 안에서 더 간지나게 */
.vweb-brand--portal {
    position: relative !important;
    z-index: 2 !important;
    gap: 13px !important;
    min-width: 210px !important;
}

.vweb-brand--portal::before {
    content: "" !important;
    position: absolute !important;
    left: -12px !important;
    top: 50% !important;
    width: 76px !important;
    height: 76px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, rgba(255, 216, 124, .16), transparent 55%),
        radial-gradient(circle, rgba(154, 25, 16, .22), transparent 68%) !important;
    box-shadow: 0 0 26px rgba(184, 64, 24, .26) !important;
    pointer-events: none !important;
}

.vweb-brand--portal .vweb-brand__crest,
.vweb-brand--portal .vweb-brand__crest--image {
    position: relative !important;
    z-index: 1 !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.vweb-brand--portal .vweb-brand__crest img {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 4px 8px rgba(0,0,0,.75))
        drop-shadow(0 0 11px rgba(239, 129, 38, .36)) !important;
}

.vweb-brand--portal .vweb-brand__text {
    position: relative !important;
    z-index: 2 !important;
    transform: translateY(1px) !important;
}

.vweb-brand--portal strong {
    font-size: 27px !important;
    line-height: .95 !important;
    letter-spacing: -.02em !important;
    color: #fff2cd !important;
    text-shadow:
        0 2px 0 rgba(71, 39, 14, .90),
        0 0 14px rgba(244, 190, 91, .24) !important;
}

.vweb-brand--portal em {
    margin-top: 4px !important;
    font-size: 11px !important;
    letter-spacing: .34em !important;
    color: rgba(240, 193, 104, .76) !important;
}

/* 네비게이션: 단순 텍스트에서 프리미엄 탭 느낌으로 */
.vweb-nav--portal {
    gap: 7px !important;
}

.vweb-nav--portal a {
    position: relative !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: rgba(247, 232, 204, .78) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.vweb-nav--portal a::after {
    content: "" !important;
    position: absolute !important;
    left: 17px !important;
    right: 17px !important;
    bottom: 5px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 126, .95), transparent) !important;
    opacity: 0 !important;
    transform: scaleX(.45) !important;
    transition: opacity .18s ease, transform .18s ease !important;
}

.vweb-nav--portal a:hover,
.vweb-nav--portal a:focus-visible {
    color: #ffeab7 !important;
    background: linear-gradient(180deg, rgba(255, 221, 134, .09), rgba(136, 41, 22, .10)) !important;
    box-shadow: inset 0 0 0 1px rgba(236, 190, 104, .16), 0 0 18px rgba(142, 32, 19, .13) !important;
    transform: translateY(-1px) !important;
}

.vweb-nav--portal a:hover::after,
.vweb-nav--portal a:focus-visible::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

/* 우측 버튼 */
.vweb-header__actions--portal {
    gap: 9px !important;
}

.vweb-session-pill,
.vweb-header__actions--portal .vweb-btn {
    min-height: 39px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.vweb-header__actions--portal .vweb-btn--primary {
    color: #230b04 !important;
    background:
        linear-gradient(180deg, #ffe8a7 0%, #e2ad55 43%, #a94a22 100%) !important;
    border-color: rgba(255, 232, 161, .62) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.46),
        0 0 16px rgba(224, 129, 44, .22) !important;
}

.vweb-header__actions--portal .vweb-btn--ghost {
    background:
        linear-gradient(180deg, rgba(27,22,17,.96), rgba(10,8,6,.94)) !important;
    border-color: rgba(235, 190, 104, .32) !important;
}

/* 히어로 아트가 더 보이도록 상단 프레임 재조정 */
.vweb-portal {
    margin-top: 10px !important;
    border-color: rgba(232, 186, 102, .25) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 22px 55px rgba(0,0,0,.38) !important;
}

.vweb-portal__art {
    background-image:
        linear-gradient(90deg, rgba(5,3,2,.88) 0%, rgba(5,3,2,.66) 20%, rgba(5,3,2,.18) 44%, rgba(5,3,2,.18) 67%, rgba(5,3,2,.70) 100%),
        radial-gradient(circle at 66% 44%, rgba(174, 46, 24, .12), transparent 28%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.54)),
        url("../images/portal/veltrion-hero-main.webp") !important;
    background-position: center center !important;
    filter: saturate(1.10) contrast(1.07) brightness(1.08) !important;
    opacity: 1 !important;
}

.vweb-portal__main {
    min-height: 350px !important;
}

.vweb-portal__copy {
    padding-left: clamp(16px, 1.2vw, 22px) !important;
    max-width: 550px !important;
}

.vweb-portal__eyebrow {
    font-size: clamp(22px, 1.7vw, 30px) !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.88), 0 0 20px rgba(242, 189, 89, .24) !important;
}

.vweb-portal__copy h1 {
    font-size: clamp(64px, 6.2vw, 118px) !important;
    letter-spacing: -.06em !important;
    text-shadow:
        0 4px 0 rgba(73, 43, 18, .82),
        0 8px 18px rgba(0,0,0,.84),
        0 0 26px rgba(255, 224, 154, .18) !important;
}

.vweb-portal__desc {
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* 우측 시작 패널도 아트 톤에 맞춤 */
.vweb-start-gate {
    position: relative !important;
    overflow: hidden !important;
}

.vweb-start-gate::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 224, 139, .16), transparent 34%),
        radial-gradient(circle at 50% 46%, rgba(155, 37, 20, .14), transparent 48%) !important;
    pointer-events: none !important;
}

.vweb-start-gate__button {
    border-radius: 999px !important;
}

.vweb-start-gate__button-text {
    text-shadow: 0 2px 0 rgba(122, 55, 17, .65) !important;
}

/* 상단과 서버 상태 사이 공백 균일화 */
.vweb-server-strip {
    margin-top: 10px !important;
}

@media (max-width: 1180px) {
    .vweb-header--portal {
        min-height: 72px !important;
        padding-inline: 16px !important;
    }

    .vweb-brand--portal {
        min-width: 178px !important;
    }

    .vweb-brand--portal strong {
        font-size: 24px !important;
    }

    .vweb-brand--portal .vweb-brand__crest,
    .vweb-brand--portal .vweb-brand__crest img {
        width: 46px !important;
        height: 46px !important;
    }

    .vweb-nav--portal a {
        padding-inline: 8px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 880px) {
    .vweb-header--portal {
        min-height: 66px !important;
    }

    .vweb-portal__art {
        background-position: 62% center !important;
    }

    .vweb-portal__main {
        min-height: 330px !important;
    }

    .vweb-portal__copy h1 {
        font-size: clamp(54px, 15vw, 84px) !important;
    }
}