/* 서브카피 웹폰트 — Barlow Condensed 600 (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&display=swap');

/*
 * 3rd Vault — 커스텀 헤더 스타일
 * 대응 파일: inc/custom-header.php (HTML 구조)
 * 대응 파일: js/custom-header.js (동작 제어)
 *
 * 섹션 목록:
 *   0. 헤더 메뉴 색상 변수 (프리셋 독립)
 *   1. 전역 링크 색상 차단
 *   2. 헤더 컨테이너
 *   3. 로고 (워드마크 텍스트)
 *   4. 데스크탑 메뉴 (브라켓·툴팁)
 *   5. 카테고리 드롭다운 (frosted glass)
 *   6. 모바일 토글 버튼 (햄버거)
 *   7. 풀스크린 오버레이 메뉴
 *   8. G 액센트 (색상·랜덤 바운스)
 *   9. 반응형 미디어 쿼리
 */


/* =========================================
   0. 헤더 메뉴 색상 설정 (프리셋 독립 변수)
   ─ 이 블록에서만 수정하면 메뉴 전체 색상 변경 가능
   ─ 텍스트: 라이트=rgba(0,0,0,X) / 다크=rgba(255,255,255,X) 반전 패턴
   ─ 액센트(레드): 라이트·다크 동일 고정
========================================= */
:root {
    --hdr-nav-base:        rgba(0,0,0,0.60);       /* 데스크탑 메뉴 기본 텍스트 */
    --hdr-nav-active:      rgba(0,0,0,0.90);       /* 데스크탑 메뉴 호버·활성 텍스트 */
    --hdr-nav-hover-glow:  rgba(0,0,0,0.15);       /* 데스크탑 메뉴 호버 글로우 */
    --hdr-nav-accent:      #E23814;                /* 브라켓·G액센트·포인트 색상 */

    --hdr-mob-base:        rgba(0,0,0,0.85);       /* 모바일 메인 메뉴 텍스트 */
    --hdr-mob-active:      #E23814;                /* 모바일 메뉴 호버·활성 텍스트 */
    --hdr-mob-active-glow: rgba(226,56,20,0.30);   /* 모바일 메뉴 호버 네온 글로우 */
    --hdr-mob-accent:      #E23814;                /* 아코디언 화살표·사이드라인 */
    --hdr-mob-sub-base:    rgba(0,0,0,0.50);       /* 모바일 서브메뉴 기본 텍스트 */
    --hdr-mob-sub-active:  rgba(0,0,0,0.85);       /* 모바일 서브메뉴 호버 텍스트 */

    /* ── 로고 색상 (직접 수정 포인트) ─────────────────────────────
     * 아래 변수만 바꾸면 로고 전체 색상이 한 번에 변경됩니다.
     *
     * --hdr-logo-red      : 숫자 "3"에만 적용되는 포인트 레드
     *                       라이트 = #C21807 고정값
     *                       다크   = body.dark-theme 블록에서 --dropcap-color 를 따름
     *
     * --hdr-logo-main     : "RD" + "VAULT" 텍스트 색 & ".NET" 박스 배경색
     *                       라이트 = #111111 (검정)
     *                       다크   = body.dark-theme 블록의 동일 변수명 참조
     *
     * --hdr-logo-dotnet-fg: ".NET" 박스 안 텍스트 색
     *                       라이트 = #ffffff (흰색, --hdr-logo-main 배경과 대비)
     *                       다크   = body.dark-theme 블록의 동일 변수명 참조
     *
     * --hdr-logo-sub      : 서브카피 "TECH / BIKE / ..." 색
     *                       라이트 = rgb(67,122,24) 고정값
     *                       다크   = body.dark-theme 블록에서 --text-main 을 따름
     * ─────────────────────────────────────────────────────────── */
    --hdr-logo-red:        #C21807;                /* "3" 포인트 레드 — 라이트·다크 공통 */
    --hdr-logo-main:       #111111;                /* "RD"·"VAULT" 텍스트 + ".NET" 박스 배경 (라이트) */
    --hdr-logo-dotnet-fg:  #ffffff;                /* ".NET" 박스 내 텍스트 (라이트) */
    --hdr-logo-sub:        rgb(67, 122, 24);    /* 서브카피 불투명도 (라이트, 0~1 범위) */
}

body.dark-theme {
    --hdr-nav-base:        var(--text-main); /* ↑ 라이트와 동일 opacity, RGB 반전 */
    --hdr-nav-active:      var(--text-soft);
    --hdr-nav-hover-glow:  rgba(255,255,255,0.15);
    --hdr-nav-accent:      #E23814;                /* 액센트는 라이트·다크 동일 */

    --hdr-mob-base:        var(--text-main);
    --hdr-mob-active:      var(--text-soft);                /* 동일 */
    --hdr-mob-active-glow: rgba(226,56,20,0.35);
    --hdr-mob-accent:      #E23814;                /* 동일 */
    --hdr-mob-sub-base:    var(--text-muted);
    --hdr-mob-sub-active:  var(--text-soft);

    /* ── 로고 색상 다크모드 반전 ─────────────────────────────────
     * --hdr-logo-red : 다크모드에서 프리셋 --dropcap-color 를 따릅니다.
     * --hdr-logo-sub : 다크모드에서 프리셋 --text-main 을 따릅니다.
     * ─────────────────────────────────────────────────────────── */
    --hdr-logo-red:        var(--dropcap-color);      /* "3" — 다크: 프리셋 드롭캡 색상 */
    --hdr-logo-main:       var(--text-main);                   /* "RD"·"VAULT" 텍스트 + ".NET" 박스 배경 (다크) */
    --hdr-logo-dotnet-fg:  var(--bg-main);                   /* ".NET" 박스 내 텍스트 (다크) */
    --hdr-logo-sub:        var(--text-muted);           /* 서브카피 — 다크: 프리셋 메인 텍스트 색 */
}


/* =========================================
   1. 전역 링크 색상 차단
   dark-mode-core.css의 body.dark-theme a { color: var(--link) } (명시도 11)보다
   높은 명시도(21)로 헤더 메뉴 링크 색상 고정.
   라이트 모드 브라우저 기본 visited(보라색)도 동시에 차단.
========================================= */

/* 데스크탑·태블릿 메뉴 */
.vault-nav-item:link,
.vault-nav-item:visited {
    color: var(--hdr-nav-base);
}
body.dark-theme .vault-nav-item:link,
body.dark-theme .vault-nav-item:visited {
    color: var(--hdr-nav-base);
}
body.dark-theme .vault-nav-item:hover,
body.dark-theme .vault-nav-item.active {
    color: var(--hdr-nav-active);
    text-shadow: 0 0 12px var(--hdr-nav-hover-glow);
}

/* 모바일 메인 메뉴 */
.vault-mobile-item:link,
.vault-mobile-item:visited {
    color: var(--hdr-mob-base);
}
body.dark-theme .vault-mobile-item:link,
body.dark-theme .vault-mobile-item:visited {
    color: var(--hdr-mob-base);
}
body.dark-theme .vault-mobile-item:hover,
body.dark-theme .vault-mobile-item:active {
    color: var(--hdr-mob-active);
}

/* 모바일 서브메뉴 */
.vault-mobile-dropdown-item:link,
.vault-mobile-dropdown-item:visited {
    color: var(--hdr-mob-sub-base);
}
body.dark-theme .vault-mobile-dropdown-item:link,
body.dark-theme .vault-mobile-dropdown-item:visited {
    color: var(--hdr-mob-sub-base);
}
body.dark-theme .vault-mobile-dropdown-item:hover,
body.dark-theme .vault-mobile-dropdown-item:active {
    color: var(--hdr-mob-sub-active);
}


/* =========================================
   2. 헤더 컨테이너 (투명 배경 & 레이아웃)
========================================= */
.vault-header-wrapper {
    width: 100%;
    max-width: 1400px; /* 헤더 최대 폭 */
    margin: 0 auto;
    height: calc(120px + env(safe-area-inset-top, 0px)); /* 데스크탑 헤더 전체 높이 + Dynamic Island */
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: env(safe-area-inset-top, 0px) 10px 0; /* top: Dynamic Island, 좌우 여백 */
    box-sizing: border-box;
    font-family: 'Abel', 'Pretendard', sans-serif;
    position: relative;
    z-index: 9999;
    border-bottom: 1px solid var(--border-divider, rgba(128,128,128,0.15));
}


/* =========================================
   3. 로고 (워드마크 텍스트) - 픽셀 정밀 정렬
========================================= */
.vault-logo-container {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;            /* 전체 컨테이너 세로 중앙 정렬 */
    font-family: 'Rockstar_extrabold', 'Rockstar-ExtraBold', 'Impact', sans-serif; 
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    z-index: 10001;
}

.vault-logo-wordmark {
    display: flex;
    align-items: flex-end;          /* 박스 기준 하단 정렬 */
}

/* ── "3RD" 그룹 컨테이너 ── */
.logo-3rd {
    font-size: 106px;
    line-height: 0.85;              /* 박스 찌그러짐 방지를 위해 약간 여유 부여 */
    letter-spacing: -1.5px;
    display: block;                 /* inline-flex 대신 block으로 박스모델 단순화 */
    text-shadow: var(--hdr-logo-shadow);
    /* 🌟 [정렬 포인트 1] 3RD를 위/아래로 미세조정. 수치를 바꾸면 위아래로 움직입니다. */
    transform: translateY( -3px);    
}

.logo-3-num {
    color: var(--hdr-logo-red);
}

/* 기존 .logo-rd 부분 교체 */
a.vault-logo-container .logo-rd,
a.vault-logo-container:visited .logo-rd,
a.vault-logo-container:hover .logo-rd {
    color: var(--hdr-logo-main) !important;
}

/* ── 우측 그룹 (서브카피 + VAULT·.NET) ── */
.logo-right-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    /* 🌟 [정렬 포인트 2] 3RD와 VAULT 사이의 간격 */
    margin-left: 8px;               
}

/* 서브카피 눈썹 텍스트 */

/* (참고) 눈썹 텍스트도 링크 색에 오염되지 않도록 보호 */
a.vault-logo-container .logo-subcopy,
a.vault-logo-container:visited .logo-subcopy {
    color: var(--hdr-logo-sub) !important;
}
.logo-subcopy {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 10px;
    color: var(--hdr-logo-sub);     /* 현재 스크린샷처럼 회색을 원하시면 :root에서 수정 */
    letter-spacing: 1px;
    line-height: 1;
    /* 🌟 [정렬 포인트 3] 눈썹 텍스트가 VAULT를 파고들지 않도록 간격 띄우기 */
    margin-bottom: 2px;             
    margin-right: 2px;
    display: block;
    text-align: right;
}

/* ── VAULT + .NET 행 ── */
.logo-vault-row {
    display: flex;
    align-items: flex-end;
}

/* "VAULT" */
/* 기존 .logo-vault 부분 교체 */
a.vault-logo-container .logo-vault,
a.vault-logo-container:visited .logo-vault,
a.vault-logo-container:hover .logo-vault {
    font-size: 80px;
    line-height: 0.85;              /* 3RD와 밸런스 맞춤 */
    letter-spacing: -1px;
    display: block;
    text-shadow: var(--hdr-logo-shadow);
    /* VAULT를 0px 기준으로 둡니다. */
    transform: translateY(-5px);     
    color: var(--hdr-logo-main) !important; /* 강제 적용 */
}

/* ".NET" 세로 텍스트 박스 */
.logo-dotnet {
    font-family: 'Rockstar_extrabold', 'Rockstar-ExtraBold', 'Impact', sans-serif;
    font-size: 24px;
    color: var(--hdr-logo-dotnet-fg);
    background: var(--hdr-logo-main);
    border: 2px solid var(--hdr-logo-main);
    border-radius: 4px;
    padding: 5px 3px 3px 3px;       /* 박스 내부 글자 위치 보정 */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    line-height: 1;
    display: block;
    /* 🌟 [정렬 포인트 4] .NET 박스를 180도 뒤집은 상태에서 아래로 끄집어 내림 */
    /* 양수(px)를 늘릴수록 박스가 아래로 내려가서 VAULT 바닥선과 맞습니다. */
    transform: rotate(180deg) translateY(9px); 
    margin-left: 8px;               /* VAULT와의 좌우 간격 */
    box-shadow: var(--hdr-logo-shadow);
}


/* 추천 2: 네온 오버드라이브 효과 */
.logo-3-num, .logo-dotnet {
    transition: all 0.3s ease;
}

a.vault-logo-container:hover .logo-dotnet {
    background: var(--hdr-logo-red) !important; /* 박스 배경 붉은색으로 변경 */
    border-color: var(--hdr-logo-red) !important;
    box-shadow: 0 0 15px rgba(255,0,0,0.5); /* 박스 주변 붉은 글로우 */
    color: #ffffff !important;
}

/* 추천 3: 미세한 사이버 글리치 효과 */
a.vault-logo-container:hover {
    animation: vault-glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes vault-glitch {
    0% { transform: translate(0); filter: none; }
    20% { 
        transform: translate(-2px, 1px); 
        filter: drop-shadow(2px 0px 0px rgba(255,0,0,0.7)) drop-shadow(-2px 0px 0px rgba(0,255,255,0.7)); 
    }
    40% { transform: translate(1px, -1px); filter: none; }
    60% { 
        transform: translate(-1px, 0px); 
        filter: drop-shadow(2px 0px 0px rgba(255,0,0,0.7)) drop-shadow(-2px 0px 0px rgba(0,255,255,0.7)); 
    }
    80% { transform: translate(2px, 1px); filter: none; }
    100% { transform: translate(0); filter: none; }
}


/* =========================================
   4. 데스크탑 메뉴 (브라켓·툴팁)
========================================= */
.vault-nav-menu {
    display: flex;
    gap: 40px; /* 메뉴 항목 간격 */
    align-items: center;
}

.vault-nav-item {
    position: relative;
    color: var(--hdr-nav-base);
    text-decoration: none;
    font-family: 'Abel', 'Pretendard', sans-serif;
    font-size: 30px; /* 데스크탑 메뉴 폰트 크기 */
    font-weight: 400;
    transition: all 0.3s ease;
    padding: 20px 0; /* 상하 호버 영역 (드롭다운 유지용) */
    cursor: pointer;
    text-transform: uppercase;
}

/* 텍스트 축약용 */
.text-short { display: none; }
.text-long  { display: inline; }

/* 호버·활성 */
.vault-nav-item:hover,
.vault-nav-item.active {
    color: var(--hdr-nav-active);
    text-shadow: 0 0 12px var(--hdr-nav-hover-glow);
}

/* 브라켓 [ ] */
.vault-nav-item::before,
.vault-nav-item::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    color: var(--hdr-nav-accent);
    font-weight: 400;
    font-size: 22px; /* 브라켓 크기 */
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}
.vault-nav-item::before { content: '['; left: 0; }
.vault-nav-item::after  { content: ']'; right: 0; }

.vault-nav-item:hover::before,
.vault-nav-item.active::before { opacity: 1; left: -16px; }
.vault-nav-item:hover::after,
.vault-nav-item.active::after  { opacity: 1; right: -16px; }

/* ── 툴팁 (프로스티드 글래스 - 배경 없음 대비 최적화) ── */
/*
 * [디자인 설계 — Glassmorphism]
 * 배경이 단색이거나 비어있을 때도 유리 질감이 살도록 설계.
 * 1. 자체적인 반투명 배경(Tint) 적용
 * 2. 유리 가장자리 빛 반사(Border & Inner Shadow)로 형태 분리
 * 3. 넓고 부드러운 그림자로 깊이감(Depth) 생성
 */

/* ── 툴팁 (Frosted Glass - 단색 배경 대비 입체감 극대화) ── */
.vault-nav-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    
    /* 1. 표면 반사광 (단순 투명도가 아닌, 대각선으로 빛이 흐르는 느낌) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    
    border-radius: 12px; 
    
    /* 2. 유리 테두리 (좌상단은 밝게 빛받고, 우하단은 어두워짐) */
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.5);
    
    /* 3. 이너 하이라이트 & 더블 드롭 섀도우 */
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.6), /* 안쪽으로 빛이 맺히는 유리 두께감 */
        0 10px 10px rgba(0, 0, 0, 0.12),            /* 넓게 퍼지는 공기감 */
        0 4px 12px rgba(0, 0, 0, 0.08);             /* 박스 바로 아래 생기는 짙은 그림자 */
    
    color: rgba(0, 0, 0, 0.85);
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 18px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 100;
}

/* ── 다크 모드 (어둠 속에서 빛나는 유리) ── */
body.dark-theme .vault-nav-tooltip {
    /* 다크 모드용 표면 반사광 (희미한 은빛 막) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 100%);
    
    /* 다크 모드 유리 테두리 */
    border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.05) rgba(255, 255, 255, 0.02) rgba(255, 255, 255, 0.1);
    
    /* 어둠 속에서 확실하게 분리되도록 그림자 강도 상승 */
    box-shadow: 
        inset 1px 1px 1px rgba(255, 255, 255, 0.2), /* 다크모드 유리 모서리 하이라이트 */
        0 16px 40px rgba(0, 0, 0, 0.6),             
        0 4px 12px rgba(0, 0, 0, 0.4); 
        
    color: rgba(255, 255, 255, 0.95);
}

/* 툴팁 등장 애니메이션 */
.vault-nav-item:not(.has-dropdown):hover .vault-nav-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 
  ※ 주의: 이전에 툴팁 코드 아래에 있던 
  .vault-nav-tooltip::before (커넥터 라인)
  .vault-nav-tooltip::after (블링킹 커서)
  부분은 미니멀한 현재 디자인에 맞지 않으므로, 기존 코드에서 지워주시면 됩니다.
*/

/* 커넥터 라인 — 메뉴와 툴팁을 잇는 선 (유리 톤에 맞게 은은하게 변경) */
.vault-nav-tooltip::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 15px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2)); 
    z-index: 101;
}
body.dark-theme .vault-nav-tooltip::before {
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3));
}

/* 블링킹 커서 — 텍스트 뒤 깜빡이는 블록 커서 (터미널 감성 유지) */
.vault-nav-tooltip::after {
    content: '▋';
    display: inline;
    color: var(--hdr-nav-accent);
    font-size: 11px;
    margin-left: 6px;
    vertical-align: -1px;
    animation: vault-tooltip-blink 1s step-end infinite;
    opacity: 0.8;
}

@keyframes vault-tooltip-blink {
    50% { opacity: 0; }
}



/* =========================================
   5. 카테고리 드롭다운 (frosted glass)
========================================= */
.vault-dropdown-wrapper {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 325px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: rgba(0,0,0,0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    border: 0.5px solid rgba(0,0,0,0.12);
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 100;
    pointer-events: none;
}
body.dark-theme .vault-dropdown-wrapper {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.2);
}

.vault-nav-item.has-dropdown:hover .vault-dropdown-wrapper,
.vault-nav-item.has-dropdown.active .vault-dropdown-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* 개별 카테고리 행 */
.vault-dropdown-item {
    background: transparent;
    border: none;
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
    border-radius: 0;
    padding: 18px 22px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    font-family: 'Abel', 'Pretendard', sans-serif;
    box-shadow: none;
    transition: background 0.18s ease;
}
body.dark-theme .vault-dropdown-item {
    border-bottom-color: rgba(255,255,255,0.12);
}
.vault-dropdown-item:last-child {
    border-bottom: none;
}

/* 카테고리명 + 글 수 한 줄 */
.vault-dropdown-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
body.dark-theme .vault-dropdown-top {
    color: rgba(255,255,255,0.95);
}

/* 글 수 — pill */
.vault-category-count {
    background: rgba(0,0,0,0.07);
    border: 0.5px solid rgba(0,0,0,0.15);
    color: rgba(0,0,0,0.5);
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}
body.dark-theme .vault-category-count {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
}

/* 설명 텍스트 */
.vault-dropdown-desc {
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(0,0,0,0.45);
    line-height: 1.55;
    margin-top: 4px;
}
body.dark-theme .vault-dropdown-desc {
    color: rgba(255,255,255,0.45);
}

/* 호버 */
.vault-dropdown-item:hover {
    background: rgba(0,0,0,0.04);
}
body.dark-theme .vault-dropdown-item:hover {
    background: rgba(255,255,255,0.07);
}


/* =========================================
   6. 모바일 토글 버튼 (햄버거)
========================================= */
.vault-mobile-toggle {
    display: none; /* 태블릿(1024px) 이상에서 숨김 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10001; /* 오버레이보다 위 */
    background: transparent;
    border: none;
    padding: 0;
}

.vault-mobile-toggle span {
    display: block;
    width: 28px; /* 라인 길이 */
    height: 2px;  /* 라인 두께 */
    background-color: var(--text-main, #111);
    margin: 4px 0;
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 2px;
}

/* 활성 시 버튼 자체는 숨김 (오버레이가 대신 닫기 역할) */
.vault-mobile-toggle.active {
    opacity: 0;
    pointer-events: none;
}


/* =========================================
   7. 풀스크린 오버레이 메뉴 (스마트폰용)
========================================= */
.vault-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* iOS Safari: 주소창 포함 오버플로우 방지 */
    background: var(--bg-main, rgba(255,255,255,0.98)); /* 오버레이 배경 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.vault-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.vault-mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* 메뉴 항목 간격 */
    width: 100%;
    padding: 0 40px;
}

/* 메인 메뉴 아이템 */
.vault-mobile-item {
    text-decoration: none;
    color: var(--hdr-mob-base);
    font-family: 'Abel', 'Pretendard', sans-serif;
    font-size: 32px; /* 오버레이 메뉴 폰트 크기 */
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    text-align: center;
}

/* 순차 등장 애니메이션 */
.vault-mobile-overlay.active .vault-mobile-item               { opacity: 1; transform: translateY(0); }
.vault-mobile-overlay.active .vault-mobile-item:nth-child(1)  { transition-delay: 0.10s; }
.vault-mobile-overlay.active .vault-mobile-item:nth-child(2)  { transition-delay: 0.15s; }
.vault-mobile-overlay.active .vault-mobile-item:nth-child(3)  { transition-delay: 0.20s; }
.vault-mobile-overlay.active .vault-mobile-item:nth-child(4)  { transition-delay: 0.25s; }
.vault-mobile-overlay.active .vault-mobile-item:nth-child(5)  { transition-delay: 0.30s; }

.vault-mobile-item:hover,
.vault-mobile-item:active {
    color: var(--hdr-mob-active);
    text-shadow: 0 0 15px var(--hdr-mob-active-glow); /* 네온 글로우 */
}

/* ── 카테고리 아코디언 ── */
.vault-mobile-category-toggle {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.vault-mobile-category-toggle::after {
    content: '▾';
    font-size: 20px;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.vault-mobile-item.category-active .vault-mobile-category-toggle::after {
    transform: rotate(180deg);
    color: var(--hdr-mob-accent);
}

.vault-mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* 서브 항목 간격 */
    margin-top: 0;
    padding-left: 20px;
    border-left: 2px solid transparent;
}

.vault-mobile-item.category-active .vault-mobile-dropdown {
    max-height: 500px; /* 항목 추가 시 조정 */
    margin-top: 25px;
    border-left-color: var(--hdr-mob-accent);
}

/* 서브 아이템 */
.vault-mobile-dropdown-item {
    text-decoration: none;
    color: var(--hdr-mob-sub-base);
    font-size: 20px; /* 서브 항목 폰트 크기 */
    transition: color 0.3s ease;
}
.vault-mobile-dropdown-item:hover,
.vault-mobile-dropdown-item:active {
    color: var(--hdr-mob-sub-active);
}


/* =========================================
   8. G 액센트 — 색상 & 랜덤 바운스 (통토토토통 리듬감)
========================================= */
.vault-g-accent {
    color: var(--hdr-nav-accent);
    font-family:  'Pretendard', sans-serif;
    font-size: 30px; /* 데스크탑 메뉴 폰트 크기 */
    font-weight: 400;
    display: inline-block; /* transform 적용을 위해 필요 */
    transform-origin: bottom center; /* 아래쪽 바닥을 기준으로 튕기도록 설정 */
}

@keyframes vault-g-bounce {
    /* 1차 바운스 (통!) */
    0% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* 위로 솟구칠 때 (감속) */
    }
    20% {
        transform: translateY(-12px);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); /* 바닥으로 떨어질 때 (가속) */
    }
    
    /* 2차 바운스 (토!) */
    40% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    55% {
        transform: translateY(-6px);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    }
    
    /* 3차 바운스 (토!) */
    70% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    82% {
        transform: translateY(-3px);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    }
    
    /* 4차 바운스 (미세하게 통..) */
    92% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    96% {
        transform: translateY(-1px);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    }
    
    /* 완전히 정지 */
    100% {
        transform: translateY(0);
    }
}

.vault-g-accent.is-bouncing {
    /* "통토토토통" 4번을 모두 보여주기 위해 애니메이션 길이를 0.85초로 늘림 */
    animation: vault-g-bounce 0.85s both; 
}


/* =========================================
   9. 반응형 미디어 쿼리 (One-Line Logo 적용 & 박스 바닥면 정렬)
========================================= */

/* ── Tablet (1024px 이하) ── */
@media (max-width: 1024px) {
    .vault-header-wrapper {
        height: calc(100px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 30px 0;
    }

    /* 1. 로고 1줄 가로 정렬 & 바닥면 정렬(flex-end) */
    .vault-logo-wordmark {
        align-items: flex-end;

    }
    .logo-right-group { 
        flex-direction: row; 
        align-items: flex-end; 
        margin-left: 4px;
    }
    .logo-vault-row {
        align-items: baseline;
    }

    /* 2. 눈썹 서브카피 숨김 */
    .logo-subcopy { 
        display: none !important; 
    }

    /* 3. 3RD & VAULT 폰트 크기 통일 */
    .logo-3rd { 
        font-size: 80px; 
        line-height: 1;
        transform: none;
        margin-bottom: -2px;
    }
    
    a.vault-logo-container .logo-vault,
    a.vault-logo-container:visited .logo-vault,
    a.vault-logo-container:hover .logo-vault {
        font-size: 80px;
        line-height: 1;
        margin-bottom: -2px;
        transform: none;
    }

    /* 4. .NET 박스 제거 & 베이스라인 정렬 */
    .logo-dotnet {
         display: none !important; 
       
    }

    /* 4-1. .NET 호버: 박스 없이 글자색만 변경 */
    a.vault-logo-container:hover .logo-dotnet {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: var(--hdr-logo-red) !important;
    }

    /* ── 메뉴 영역 ── */
    .vault-nav-menu { gap: 25px; }
    .vault-nav-item {
        font-size: 22px;
        padding: 15px 0;
    }

    .text-long  { display: none; }
    .text-short { display: inline; }

    .vault-nav-item:hover::before { left: -10px; }
    .vault-nav-item:hover::after  { right: -10px; }

    .vault-dropdown-wrapper {
        left: auto;
        right: 12px;
        padding: 0;
        transform: translateY(20px);
    }
    .vault-nav-item.has-dropdown:hover .vault-dropdown-wrapper,
    .vault-nav-item.has-dropdown.active .vault-dropdown-wrapper {
        transform: translateY(0);
    }

    .vault-nav-item.has-dropdown .vault-nav-tooltip::before {
        left: auto;
        right: 30px;
        transform: none;
    }
}

/* ── Smartphone (768px 이하) ── */
@media (max-width: 768px) {
    .vault-header-wrapper {
        height: calc(80px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 20px 0;
    }

    .vault-nav-menu        { display: none; }
    .vault-mobile-toggle   { display: flex; }

    .logo-3rd { 
        font-size: 80px; 
    }
    a.vault-logo-container .logo-vault,
    a.vault-logo-container:visited .logo-vault,
    a.vault-logo-container:hover .logo-vault {
        font-size: 80px;
    }
    .logo-dotnet {
        font-size: 37px;
        padding: 0;
        margin-left: 4px;
        transform: none !important;
        position: static;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        color: var(--hdr-logo-main);
    }
}

/* ── 좁은 스마트폰 (430px 이하) ── */
@media (max-width: 430px) {
    .logo-3rd { 
        font-size: 75px; 
    }
    a.vault-logo-container .logo-vault,
    a.vault-logo-container:visited .logo-vault,
    a.vault-logo-container:hover .logo-vault {
        font-size: 75px;
    }
    .logo-dotnet {
        font-size: 30px;
        padding: 0;
        margin-left: 3px;
        transform: none !important;
        position: static;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        color: var(--hdr-logo-main);
    }
    
    .vault-mobile-item           { font-size: 26px; }
    .vault-mobile-dropdown-item  { font-size: 18px; }
}