@charset "utf-8";

/* ---------------------------------------------------------------------------
 * 웹 헤더 v2 — v5(kr.tokenpost.www.v5)와 같은 모양.
 *
 * headerVersion == 2 일 때만 읽는다. 1 이면 이 파일을 아예 걸지 않고
 * 기존 base.css 헤더가 그대로 나온다(base.volt).
 *
 * 원본
 *   components/base/site-header.tsx    64px 한 줄 · 로고 + 네비 + 액션
 *   components/base/header-nav.tsx     Bold 사본을 겹쳐 폭 고정 · 가운데서 자라는 밑줄
 *   components/base/header-actions.tsx 40×40 액션 4개 · 에디션 드롭다운
 *   components/base/mega-menu.tsx      좌 180 카테고리 + 우 상세 + 하단 바
 *
 * Figma 185-15373(헤더) · 185-18714(전체 메뉴)
 *
 * ⚠️ 모바일은 손대지 않는다. v4 의 모바일 헤더는 mobileBase.volt 가 따로 그린다.
 *    그래서 v5 의 반응형 한 벌 중 **데스크톱 줄만** 옮겼다.
 * ------------------------------------------------------------------------- */

:root {
    /* v5 apps/front/app/tokens.css 의 세만틱 토큰 그대로다 */
    --hv3-surface-default: #ffffff;
    --hv3-surface-subtle: #fafbfc;
    --hv3-border-default: #ebecf0;
    --hv3-text-primary: #1a1f29;
    --hv3-text-secondary: #6e7686;
    --hv3-text-disabled: #bec3d0;
    --hv3-icon-secondary: #969eae;
    --hv3-interactive: #4294ff;
    --hv3-page: 1280px;
}

/*
 * 전체 메뉴는 헤더의 형제라 헤더에 건 토큰을 물려받지 못한다. 그래서 둘 다 적는다.
 * 스위치를 누르면 스크립트가 두 상자에 함께 `dark_mode` 를 붙인다.
 */
#header_v3_wrap.dark_mode,
#header_v3_menu.dark_mode {
    --hv3-surface-default: #151b23;
    --hv3-surface-subtle: #1a212a;
    --hv3-border-default: #2b333f;
    --hv3-text-primary: #e8ecf3;
    --hv3-text-secondary: #a6aebd;
    --hv3-text-disabled: #69717f;
    --hv3-icon-secondary: #8b93a3;
}

/* ── 헤더 본체 ─────────────────────────────────────────────────────────── */

/*
 * 바탕은 **살짝 비치는 흰색**이다(92%) — 아래로 지나가는 본문이 흐릿하게 비친다.
 * v5 의 `lg:bg-surface-default/92 lg:backdrop-blur-[12px]` 그대로다.
 * blur 를 못 쓰는 브라우저에서도 92% 흰색이라 글자는 그대로 읽힌다.
 */
#header_v3_wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--hv3-border-default);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background-color .2s;
}

#header_v3_wrap.dark_mode { background: rgba(21, 27, 35, .92); }

/*
 * 1024 이상에서만 이 헤더를 쓴다. 그 아래는 v4 의 기존 모바일 헤더가 맡는다.
 * 경계를 lg(1024)로 잡은 이유는 v5 와 같다 — 로고 167 + 네비 538 + 액션 184 +
 * 좌우 여백 48 = 937px 이 필요해 md(768)에서 켜면 가로 스크롤이 난다.
 */
#header_v3_wrap .header_v3_bar {
    /* 알림 종을 되살릴 경우 레이어(.popupAlarmWrap)가 이 상자에 매달린다 */
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    max-width: var(--hv3-page);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* base.css 의 80px 은 2단이던 옛 헤더 기준이다. 한 줄(64)에 맞춰 내린다 */
#header_v3_wrap .popupAlarmWrap {
    top: 60px;
    right: 24px;
}

#header_v3_wrap .header_v3_logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

/*
 * ⚠️ 폭을 고정하지 않는다. 원본이 167×30 이라 높이만 주면 비율이 유지된다.
 *    폭까지 주면 preserveAspectRatio 때문에 글자가 세로로 늘어난다.
 */
#header_v3_wrap .header_v3_logo img {
    display: block;
    height: 30px;
    width: auto;
}

#header_v3_wrap .header_v3_logo .logo_dark { display: none; }
#header_v3_wrap.dark_mode .header_v3_logo .logo_light { display: none; }
#header_v3_wrap.dark_mode .header_v3_logo .logo_dark { display: block; }

/* ── 네비게이션 ───────────────────────────────────────────────────────── */

#header_v3_wrap .header_v3_nav {
    display: flex;
    height: 64px;
    align-items: flex-start;
    padding-left: 28px;
}

#header_v3_wrap .header_v3_nav_item {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 12px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* 알파리포트만 아이콘 + 그라디언트 글자라 여백이 좁다 */
#header_v3_wrap .header_v3_nav_item.is_alpha {
    gap: 4px;
    padding: 0 8px;
}

#header_v3_wrap .header_v3_alpha_symbol {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

#header_v3_wrap .header_v3_alpha_symbol img {
    display: block;
    width: 100%;
    height: 100%;
}

/* 글리프는 원 지름의 절반이 시안 비율이다 */
#header_v3_wrap .header_v3_alpha_symbol .alpha_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

#header_v3_wrap .header_v3_alpha_text {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.4px;
    background-image: linear-gradient(111.25deg, #7c50ff 5.34%, #5d95fb 40.96%, #69b1ff 61.75%, #0d47da 93.4%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/*
 * 라벨 — Bold 사본을 opacity 0 으로 겹쳐 폭을 고정한다(시안 185:15451).
 * 이 장치가 없으면 hover 로 굵어질 때마다 네비게이션 전체가 밀린다.
 */
#header_v3_wrap .header_v3_nav_label {
    position: relative;
    display: grid;
    white-space: nowrap;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.4px;
}

#header_v3_wrap .header_v3_nav_label .ghost,
#header_v3_wrap .header_v3_nav_label .real {
    grid-column-start: 1;
    grid-row-start: 1;
}

#header_v3_wrap .header_v3_nav_label .ghost {
    font-weight: 700;
    opacity: 0;
}

#header_v3_wrap .header_v3_nav_label .real {
    font-weight: 500;
    color: var(--hv3-text-primary);
    transition: color .2s;
}

#header_v3_wrap .header_v3_nav_item:hover .header_v3_nav_label .real,
#header_v3_wrap .header_v3_nav_item.is_active .header_v3_nav_label .real {
    font-weight: 700;
    color: var(--hv3-interactive);
}

/*
 * 밑줄은 **가운데에서 양옆으로** 자란다. 늘 그려 두고 폭만 바꾼다 —
 * 조건부로 그리면 애니메이션이 시작될 자리가 없다.
 *
 * -20px 은 글자 아래 여백 그대로다((64 − 24) ÷ 2). 헤더 아래 테두리 바로 위에
 * 붙어 펼침 패널의 윗선과 이어진다.
 */
#header_v3_wrap .header_v3_nav_label .bar {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--hv3-interactive);
    transition: left .2s, width .2s;
}

#header_v3_wrap .header_v3_nav_item:hover .header_v3_nav_label .bar,
#header_v3_wrap .header_v3_nav_item.is_active .header_v3_nav_label .bar {
    left: 0;
    width: 100%;
}

/* 알파리포트는 글자에 그라디언트가 들어가 색을 못 바꾼다. 밑줄만 진다 */
#header_v3_wrap .header_v3_nav_item.is_alpha .bar {
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    width: auto;
    height: 2px;
    background: var(--hv3-interactive);
    opacity: 0;
    transition: opacity .2s;
}

#header_v3_wrap .header_v3_nav_item.is_alpha:hover .bar,
#header_v3_wrap .header_v3_nav_item.is_alpha.is_active .bar { opacity: 1; }

/* ── 우측 액션 ────────────────────────────────────────────────────────── */

#header_v3_wrap .header_v3_actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

#header_v3_wrap .header_v3_action {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    /* 시안의 radius/md 다(291:20585). 6 으로 두면 모서리가 덜 둥글다 */
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: background-color .2s;
}

#header_v3_wrap .header_v3_action:hover { background: var(--hv3-surface-subtle); }

/*
 * 단색 아이콘은 그림이 아니라 마스크로 쓴다. 파일에 박힌 색 대신
 * currentColor 가 정하므로 다크 모드에서 같이 밝아진다.
 */
/*
 * ⚠️ 색은 icon/secondary(#969eae)가 아니라 **text/secondary(#6e7686)** 다.
 *    시안의 아이콘 stroke 가 #6E7686 이다(291:20585). v5 는 icon/secondary 를
 *    쓰고 있어 우리 쪽이 시안보다 옅어 보였다.
 */
#header_v3_wrap .header_v3_icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    color: var(--hv3-text-secondary);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/*
 * 종은 23.76×25.5 라 정사각이 아니다. 24 상자에 contain 으로 넣으면 세로가
 * 꽉 차고 가로가 남아 다른 아이콘보다 작아 보인다 — 높이를 맞춰 준다.
 */
#header_v3_wrap .header_v3_icon_alarm {
    width: 22.36px;
    height: 24px;
}

/* 알림 뱃지 — v4 의 기존 알림 레이어를 그대로 쓴다 */
#header_v3_wrap .header_v3_action .alarmCount {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #f5455c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}

/* ── 에디션(국기) ─────────────────────────────────────────────────────── */

#header_v3_wrap .header_v3_edition { position: relative; }

#header_v3_wrap .header_v3_flag {
    display: block;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--hv3-border-default);
    border-radius: 9999px;
    box-sizing: border-box;
}

#header_v3_wrap .header_v3_flag img {
    display: block;
    width: 100%;
    height: 100%;
    /* 국기는 24×18 이라 정사각이 아니다 — 가운데를 잘라 원에 채운다 */
    object-fit: cover;
}

/* 파일이 없는 에디션은 자리만 비워 둔다(v5 와 같다) */
#header_v3_wrap .header_v3_flag.is_blank {
    border-color: transparent;
    background: var(--hv3-surface-subtle);
}

#header_v3_wrap .header_v3_edition_list {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 50;
    min-width: 120px;
    padding: 20px;
    border: 1px solid var(--hv3-border-default);
    border-radius: 20px;
    background: var(--hv3-surface-default);
    box-shadow: 0 16px 38px 0 rgba(16, 22, 38, .14);
    box-sizing: border-box;
}

#header_v3_wrap .header_v3_edition.is_open .header_v3_edition_list { display: block; }

#header_v3_wrap .header_v3_edition_list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

#header_v3_wrap .header_v3_edition_list a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#header_v3_wrap .header_v3_edition_list span {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--hv3-text-primary);
}

/* ── 전체 메뉴(메가 메뉴) ─────────────────────────────────────────────── */

/*
 * ⚠️ 배경은 헤더를 덮지 않는다(top 64px). inset 0 으로 두면 로고와 메뉴까지
 *    가라앉아 방금 누른 버튼이 어디 있는지 흐려진다. 펼침 패널도 헤더 아래에서
 *    시작하므로 둘의 시작선이 같아야 한 덩어리로 읽힌다.
 */
#header_v3_menu_dim {
    display: none;
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 48;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, .2);
    cursor: default;
}

#header_v3_menu {
    display: none;
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    z-index: 49;
    border-bottom: 1px solid var(--hv3-border-default);
    background: var(--hv3-surface-default);
    box-shadow: 0 12px 24px 0 rgba(26, 31, 41, .08);
}

#header_v3_menu.is_open,
#header_v3_menu_dim.is_open { display: block; }

#header_v3_menu .menu_inner {
    display: flex;
    max-width: var(--hv3-page);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

#header_v3_menu .menu_side {
    flex-shrink: 0;
    width: 180px;
    padding: 16px 0;
}

#header_v3_menu .menu_side a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 8px 0 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.025em;
    color: var(--hv3-text-secondary);
    transition: background-color .2s, color .2s;
}

#header_v3_menu .menu_side a:hover { background: var(--hv3-surface-subtle); }

#header_v3_menu .menu_side li.is_active a {
    background: var(--hv3-surface-subtle);
    font-weight: 700;
    color: var(--hv3-text-primary);
}

#header_v3_menu .menu_side .menu_icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

#header_v3_menu .menu_side .menu_icon img {
    display: block;
    width: 24px;
    height: 24px;
}

#header_v3_menu .menu_side .menu_label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 알파리포트만 그라디언트 PNG + 글리프 두 겹이다 */
#header_v3_menu .menu_side .alpha_symbol {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/*
 * ⚠️ 원 PNG 는 원본이 24 보다 커서 **여기서 크기를 주지 않으면 그대로 나온다.**
 *    상자만 24 로 잡아 두면 이미지가 그 밖으로 비어져 나와 글자를 덮는다.
 */
#header_v3_menu .menu_side .alpha_symbol img {
    display: block;
    width: 24px;
    height: 24px;
}

/* 글리프는 원 지름의 절반이 시안 비율이다 */
#header_v3_menu .menu_side .alpha_symbol .alpha_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
}

#header_v3_menu .menu_panel {
    display: none;
    min-width: 0;
    flex: 1 1 auto;
    border-left: 1px solid var(--hv3-border-default);
    padding: 24px 0 24px 28px;
}

#header_v3_menu .menu_panel.is_active { display: block; }

#header_v3_menu .menu_panel_title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#header_v3_menu .menu_panel_title span {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--hv3-text-primary);
}

#header_v3_menu .menu_panel_title .chev {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    color: var(--hv3-icon-secondary);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform .2s;
}

#header_v3_menu .menu_panel_title:hover .chev { transform: translateX(2px); }

#header_v3_menu .menu_panel_desc {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--hv3-text-secondary);
}

#header_v3_menu .menu_panel_links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    max-width: 363px;
    margin-top: 20px;
}

#header_v3_menu .menu_panel_links a {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 37px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--hv3-text-primary);
}

#header_v3_menu .menu_panel_links a:hover {
    font-weight: 700;
    color: var(--hv3-interactive);
}

/* 밖으로 나가는 링크에 붙는 12px 표식 */
#header_v3_menu .ext {
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    color: var(--hv3-icon-secondary);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#header_v3_menu .menu_bottom {
    border-top: 1px solid var(--hv3-border-default);
    background: var(--hv3-surface-subtle);
}

#header_v3_menu .menu_bottom_inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--hv3-page);
    margin: 0 auto;
    padding: 12px 24px;
    box-sizing: border-box;
}

#header_v3_menu .menu_bottom_inner a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--hv3-text-primary);
}

#header_v3_menu .menu_bottom_inner a:hover { text-decoration: underline; }


/* ── 다크 모드 스위치 ─────────────────────────────────────────────────── */

/*
 * v5 는 이것을 프로필 드롭다운에 두는데(187:23312) 거기는 **로그인해야 열린다.**
 * 다크 모드는 로그인과 상관없는 설정이라 누구나 여는 전체 메뉴로 옮겼다.
 * 모양은 시안 그대로다 — 달 16 + 라벨 + lg 스위치(48×24, 손잡이 20).
 */
#header_v3_menu .menu_theme {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* 라벨을 눌러도 켜지도록 for 로 스위치와 묶여 있다 */
#header_v3_menu .menu_theme_label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--hv3-text-primary);
}

/* 달은 상태 표시가 아니라 라벨 장식이다 — 켜져 있든 꺼져 있든 그대로다 */
#header_v3_menu .menu_theme_moon {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    color: var(--hv3-icon-secondary);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#header_v3_menu .menu_theme_switch {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 24px;
    padding: 2px;
    border: 0;
    border-radius: 9999px;
    background: var(--hv3-text-disabled);
    cursor: pointer;
    transition: background-color .2s;
    box-sizing: border-box;
}

#header_v3_menu .menu_theme_switch[aria-checked="true"] { background: var(--hv3-interactive); }

/*
 * 손잡이는 늘 흰색이다. 트랙이 켬(파랑)·끔(회색) 모두 어두운 편이라
 * 다크 모드에서도 흰색이 맞다 — 바탕색을 쓰면 다크에서 손잡이가 사라진다.
 */
#header_v3_menu .menu_theme_switch .knob {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .06);
    transition: transform .2s;
}

#header_v3_menu .menu_theme_switch[aria-checked="true"] .knob { transform: translateX(24px); }

/* ── 프로필 미니 팝업 ── v5 profile-dropdown.tsx(187:23294) ───────────────── */

#header_v3_wrap .header_v3_profile { position: relative; flex-shrink: 0; }

#header_v3_wrap .header_v3_profile_panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 320px;
    margin-top: 8px;
    padding: 20px;
    border: 1px solid var(--hv3-border-default);
    border-radius: 20px;
    background: var(--hv3-surface-default);
    box-shadow: 0 16px 38px 0 rgba(16, 22, 38, .14);
    box-sizing: border-box;
    text-align: left;
    animation: header_v3_pop 200ms cubic-bezier(.32, .72, 0, 1);
    transform-origin: top right;
}

#header_v3_wrap .header_v3_profile_panel[hidden] { display: none; }

@keyframes header_v3_pop {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #header_v3_wrap .header_v3_profile_panel { animation: none; }
}

#header_v3_wrap .header_v3_profile_panel .pf_user {
    display: flex;
    align-items: center;
    gap: 12px;
}

#header_v3_wrap .header_v3_profile_panel .pf_avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    object-fit: cover;
}

#header_v3_wrap .header_v3_profile_panel .pf_avatar_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hv3-border-default);
}

#header_v3_wrap .header_v3_profile_panel .pf_name {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

#header_v3_wrap .header_v3_profile_panel .pf_nickname,
#header_v3_wrap .header_v3_profile_panel .pf_email {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: -0.025em;
}

#header_v3_wrap .header_v3_profile_panel .pf_nickname {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--hv3-text-primary);
}

#header_v3_wrap .header_v3_profile_panel .pf_email {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--hv3-icon-secondary);
}

#header_v3_wrap .header_v3_profile_panel .pf_stats {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-top: 20px;
}

#header_v3_wrap .header_v3_profile_panel .pf_stat {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--hv3-border-default);
    border-radius: 8px;
    text-decoration: none;
    box-sizing: border-box;
}

#header_v3_wrap .header_v3_profile_panel .pf_stat:hover { background: var(--hv3-surface-subtle); }

#header_v3_wrap .header_v3_profile_panel .pf_value {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.025em;
}

#header_v3_wrap .header_v3_profile_panel .pf_value_rp { color: #ffaa00; }
#header_v3_wrap .header_v3_profile_panel .pf_value_ticket { color: #24b283; }

#header_v3_wrap .header_v3_profile_panel .pf_menu {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

#header_v3_wrap .header_v3_profile_panel .pf_menu a {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--hv3-text-primary);
    text-decoration: none;
}

#header_v3_wrap .header_v3_profile_panel .pf_menu a.pf_logout { color: var(--hv3-icon-secondary); }