/* ==========================================================================
   venus 헤더 — 목업(st10-b index/support.html) 단일행 헤더 이식.
   ST10 .tnb/.nav 미사용 → vh- 네임스페이스로 기존 CSS 충돌 0.
   --earth-* 변수는 earth.css(클론) 재사용(폴백값 병기).
   ========================================================================== */
.venus-header {
    position: relative;
    z-index: 1000;
    padding: 14px 0;
    background: rgba(10, 22, 40, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 212, 170, 0.2);
}
.vh-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 1400px;
    max-width: 96%;
    margin: 0 auto;
}

/* 로고 */
.vh-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 0 0 auto; }
.vh-logo img { height: 40px; width: auto; object-fit: contain; }

/* 메뉴 (아이콘 + 라벨) */
.vh-nav { display: flex; align-items: center; gap: 28px; flex: 1 1 auto; justify-content: center; }
.vh-nav a {
    font-family: 'Orbitron', 'Malgun Gothic', sans-serif;
    font-size: 1.02rem; font-weight: 700;
    color: #ffcc6b;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; position: relative; white-space: nowrap;
    transition: color 0.3s ease;
}
.vh-nav a i { font-size: 0.92em; }
.vh-nav a:hover, .vh-nav a.active { color: var(--earth-primary, #00d4aa); }
.vh-nav a::after {
    content: ''; position: absolute; bottom: -6px; left: 0;
    width: 0; height: 2px; background: var(--earth-gradient, linear-gradient(135deg,#00d4aa,#00b894));
    transition: width 0.3s ease;
}
.vh-nav a:hover::after, .vh-nav a.active::after { width: 100%; }

/* 우측 액션 공통 */
.vh-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.vh-actions .hd-btn {
    padding: 10px 22px; border-radius: 25px;
    font-family: 'Orbitron', 'Malgun Gothic', sans-serif;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease; border: 1px solid var(--earth-primary, #00d4aa); white-space: nowrap;
}
.vh-actions .hd-login { color: var(--earth-primary, #00d4aa); background: transparent; }
.vh-actions .hd-login:hover { background: rgba(0, 212, 170, 0.1); box-shadow: var(--earth-glow, 0 0 20px rgba(0,212,170,0.4)); }
.vh-actions .hd-join { color: var(--earth-dark, #050d1a); background: var(--earth-gradient, linear-gradient(135deg,#00d4aa,#00b894)); border-color: transparent; }
.vh-actions .hd-join:hover { transform: translateY(-2px); box-shadow: var(--earth-glow, 0 0 20px rgba(0,212,170,0.4)); }

/* ===== 로그인 후 (support.html 목업) ===== */
.vh-after { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.vh-balance {
    display: flex; align-items: center; gap: 18px; padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3); border-radius: 12px;
    border: 1px solid rgba(0, 212, 170, 0.2); text-decoration: none; cursor: pointer;
    transition: all 0.3s ease;
}
.vh-balance:hover { background: rgba(0, 0, 0, 0.5); border-color: rgba(0, 212, 170, 0.4); }
.vh-bal-item { display: flex; align-items: center; gap: 8px; position: relative; }
.vh-bal-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--earth-text-muted, #8fa3bf); font-weight: 500; white-space: nowrap; }
.vh-bal-val { font-family: 'Orbitron', sans-serif; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.vh-bal-val.money { color: var(--earth-primary, #00d4aa); }
.vh-bal-val.point { color: #ffd700; }
.vh-convert { padding: 3px 9px; font-size: 0.6rem; font-weight: 600; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
.vh-convert:hover { background: linear-gradient(135deg, #ffaa00, #ff8800); transform: scale(1.05); }

.vh-link { display: flex; align-items: center; text-decoration: none; position: relative; }
.vh-mail-ico, .vh-profile-ico {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 37, 64, 0.8); border: 2px solid var(--earth-primary, #00d4aa);
    border-radius: 50%; color: var(--earth-primary, #00d4aa); font-size: 1.05rem; transition: all 0.3s ease;
}
.vh-mail:hover .vh-mail-ico, .vh-profile:hover .vh-profile-ico {
    background: rgba(0, 212, 170, 0.15); border-color: var(--earth-secondary, #00b894);
    box-shadow: 0 0 15px rgba(0, 212, 170, 0.3); color: #fff;
}
.vh-mail-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: #ff6b6b; color: #fff; font-size: 0.62rem; font-weight: 700; border-radius: 9px; line-height: 1; }
.vh-profile { gap: 8px; }
.vh-nick { font-family: 'Orbitron', 'Malgun Gothic', sans-serif; font-size: 0.85rem; font-weight: 600; color: #cfe3ff; white-space: nowrap; }
.vh-profile:hover .vh-nick { color: var(--earth-primary, #00d4aa); }
.vh-after .hd-logout { color: var(--earth-dark, #050d1a); background: var(--earth-gradient, linear-gradient(135deg,#00d4aa,#00b894)); border: 1px solid transparent; padding: 10px 20px; border-radius: 25px; font-family: 'Orbitron','Malgun Gothic',sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; }
.vh-after .hd-logout:hover { transform: translateY(-2px); box-shadow: var(--earth-glow, 0 0 20px rgba(0,212,170,0.4)); }

/* ===== 언어 드롭다운 (목업 스타일) ===== */
.venus-header .lang-dropdown { position: relative; }
.venus-header .btn-lang {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px;
    font-size: 0.82rem; font-weight: 600; color: var(--earth-primary, #00d4aa);
    border: 1px solid var(--earth-primary, #00d4aa); background: transparent;
    border-radius: 25px; cursor: pointer; text-decoration: none; transition: all 0.3s ease;
}
.venus-header .btn-lang .current-flag { font-size: 1.15em; line-height: 1; }
.venus-header .btn-lang:hover { color: #fff; background: #01362c; }
/* venus: 언어메뉴 열기/닫기는 skin-common.js 클릭토글($menu.show/hide 인라인)에 위임.
   :hover 로 여는 규칙은 클릭토글의 isHidden 판정·인라인 display 와 충돌해 "열리는데 선택 안 됨" 유발 → 제거. */
.venus-header .lang-menu {
    display: none; position: absolute; top: 46px; right: 0; z-index: 20; padding: 5px; width: 155px;
    background: #0b1728; border: 1px solid #1f3a60; box-shadow: 0 2px 8px rgba(0,0,0,0.7); border-radius: 6px;
}
.venus-header .lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #fff; text-decoration: none; border-radius: 4px; }
.venus-header .lang-menu a:hover { background: #172f50; }
.venus-header .lang-menu .flags { font-size: 1.15em; line-height: 1; }
.venus-header .lang-menu .country-name { font-size: 14px; font-weight: 500; }

/* ===== 반응형 ===== */
@media (max-width: 1280px) {
    .vh-nav { gap: 18px; }
    .vh-nav a { font-size: 0.92rem; }
    .vh-balance { gap: 12px; padding: 6px 12px; }
}
@media (max-width: 960px) {
    /* 모바일 3줄(로그인 후): 로고+아이콘(1행) / 잔액(2행) / 상단메뉴 nav(3행).
       flex-wrap + order + flex-basis:100% 로 각 줄 분리. 로그인 전엔 잔액 없어 2줄. */
    .vh-inner { flex-wrap: wrap; row-gap: 6px; column-gap: 12px; width: 100%; padding: 0 14px; }
    .vh-actions { order: 1; }
    .vh-balance { display: flex; order: 2; flex: 0 0 100%; justify-content: center; gap: 28px; }
    .vh-nav { order: 3; flex: 0 0 100%; gap: 6px; justify-content: space-around;
              padding-top: 8px; border-top: 1px solid rgba(0, 212, 170, 0.18); }
    .vh-nav a { font-size: 0.82rem; }
    /* 로고 축소 (형제 스킨 ST10/ST11/W16 패턴 — venus만 누락됐던 모바일 상한) */
    .vh-logo img { height: 34px; max-width: 150px; }
}
/* 폰: 로고 추가 축소 + 로그인후 우측 컴팩트화(1행 수납) + 메뉴바 촘촘히. 언어버튼은 유지(모바일 유일 언어변경 수단). */
@media (max-width: 600px) {
    .vh-inner { column-gap: 10px; }
    .vh-logo img { height: 30px; max-width: 110px; }
    .vh-actions { gap: 6px; }
    .vh-after { gap: 6px; }
    .vh-balance { gap: 20px; padding: 6px 12px; }
    .vh-nick { display: none; }
    .vh-mail-ico, .vh-profile-ico { width: 34px; height: 34px; font-size: 0.92rem; }
    .vh-after .hd-logout { padding: 7px 11px; font-size: 0.7rem; }
    .vh-actions .hd-btn { padding: 7px 11px; font-size: 0.72rem; }
    .venus-header .btn-lang { padding: 7px 8px; }
    .vh-nav { gap: 2px; padding-top: 6px; }
    .vh-nav a { font-size: 0.74rem; }
    .vh-nav a i { font-size: 0.8em; }
}

/* venus 헤더는 in-flow(relative) — ST10 fixed 헤더용 .contents 상단 오프셋(110px/60px) 제거.
   헤더↔배너 큰 여백 삭제 (배너 자체 margin-top 30px 소여백만 유지). */
body.skin-st10-venus .contents { margin-top: 0; }
/* 배너를 헤더 쪽으로 더 붙임 (기존 banner-section margin-top 30px → 8px) */
body.skin-st10-venus .banner-section { margin-top: 8px; }