/*
 * V3 레이아웃 — 헤더 · 푸터 · 광고 자리.
 *
 * 헤더 규칙은 assets/css/tokenpost_new/header_v3.css 를 가져온 것이다.
 * 원본이 이미 --hv3-* 토큰 체계를 쓰고 있었고 그 값이 V3 시맨틱과 1:1 이라,
 * **별칭만 걸어** 옮겼다. 하드코딩 색을 손으로 바꾸지 않았다는 뜻이다.
 *
 * 다크는 html.dark 가 시맨틱을 덮으므로 별칭이 저절로 따라간다 —
 * 원본에 있던 .dark_mode 전용 선언 묶음은 그래서 뺐다.
 */

/* ── header_v3.css 의 토큰을 V3 시맨틱에 잇는다 ───────────── */
:root{
  --hv3-surface-default:var(--surface-default);
  --hv3-surface-subtle:var(--surface-subtle);
  --hv3-border-default:var(--border-default);
  --hv3-text-primary:var(--text-primary);
  --hv3-text-secondary:var(--text-secondary);
  --hv3-text-disabled:var(--text-disabled);
  --hv3-icon-secondary:var(--icon-secondary);
  --hv3-interactive:var(--interactive-default);
  --hv3-page:var(--page-w);

  /* 알림 배지 — 시맨틱에 대응이 없는 한 색이다 */
  --badge-alert:#f5455c;
}

@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 의 세만틱 토큰 그대로다 */
}

/*
 * 전체 메뉴는 헤더의 형제라 헤더에 건 토큰을 물려받지 못한다. 그래서 둘 다 적는다.
 * 스위치를 누르면 스크립트가 두 상자에 함께 `dark_mode` 를 붙인다.
 */
:root.dark #header_v3_wrap,
:root.dark #header_v3_menu {
}

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

/*
 * 바탕은 **살짝 비치는 흰색**이다(92%) — 아래로 지나가는 본문이 흐릿하게 비친다.
 * v5 의 `lg:bg-surface-default/92 lg:backdrop-blur-[12px]` 그대로다.
 * blur 를 못 쓰는 브라우저에서도 92% 흰색이라 글자는 그대로 읽힌다.
 */
/*
 * ⚠️ z-index 는 v1 헤더(.header_nav_wrap.is_fixed 998)와 같은 높이로 둔다.
 *    50 으로 두었더니 페이지 CSS 의 99·95(알파리포트 상단 흐림 오버레이, 공유 레일 등)가
 *    스크롤할 때 헤더를 덮고, 전체 메뉴(997)·배경(996)까지 가렸다.
 *    공통 팝업은 10000 이상이라 여전히 헤더보다 위다.
 */
#header_v3_wrap {
    position: sticky;
    top: 0;
    z-index: 998;
    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;
}

:root.dark #header_v3_wrap { 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; }
:root.dark #header_v3_wrap .header_v3_logo .logo_light { display: none; }
:root.dark #header_v3_wrap .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: var(--ai-brand);
    -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: var(--badge-alert);
    color: var(--white);
    /* 램프(13~32) 밖이다. 배지 숫자는 본문 글자가 아니라 표식이라 예외로 둔다 */
    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: 996;
    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: 997;
    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); }

/* 보고 있는 섹션(hover·누름) — 회색 */
#header_v3_menu .menu_side li.is_active a {
    background: var(--surface-muted);
    font-weight: 700;
    color: var(--hv3-text-primary);
}

/* 지금 페이지가 속한 섹션 — 파란색. 회색보다 뒤에 둬서 둘 다일 때 파랑이 이긴다 */
#header_v3_menu .menu_side li.is_current a {
    background: var(--interactive-subtle);
    font-weight: 700;
    color: var(--hv3-interactive);
}

:root.dark #header_v3_menu .menu_side li.is_active a { background: var(--surface-subtle); }
:root.dark #header_v3_menu .menu_side li.is_current a { background: rgba(66, 148, 255, .16); }

#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: var(--surface-default);
    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); }

/* 아이콘 없는 칸(TPC). 숫자는 옆 티켓 칸처럼 오른쪽에 둔다 */
#header_v3_wrap .header_v3_profile_panel .pf_stat.pf_stat_text { justify-content: flex-end; }

#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: var(--yellow-09); }
#header_v3_wrap .header_v3_profile_panel .pf_value_ticket { color: var(--green-08); }

#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); }

/* ── 푸터 ────────────────────────────────────────────────── */
/*
 * v5 site-footer.tsx 그대로 — 밝은 바탕(surface-subtle) · 위 테두리 border-strong.
 * 왼쪽 로고(h36), 오른쪽에 링크·연락처·사업자·저작권·소셜을 쌓고(간격 24),
 * 그 아래 인증 배지 줄이 전체 폭으로 깔린다. 모바일은 세로로 흘린다(간격 32).
 * 좌우 여백은 v5 처럼 20 / 768 이상 24.
 */
.footer_v3_wrap{
  margin-top:var(--sp-8);
  background:var(--surface-subtle);
  border-top:1px solid var(--border-strong);
}
.footer_v3_wrap .v3_container{--page-gutter:var(--sp-5);}
.footer_v3_inner{
  display:flex; flex-direction:column; gap:var(--sp-8);
  padding-top:var(--sp-8); padding-bottom:var(--sp-8);
}
.footer_v3_logo{flex:none;align-self:flex-start;}
.footer_v3_logo img{display:block;height:36px;width:auto;}
.footer_v3_logo .logo_dark{display:none;}
:root.dark .footer_v3_logo .logo_light{display:none;}
:root.dark .footer_v3_logo .logo_dark{display:block;}
.footer_v3_right{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0;flex:1 1 auto;}

/* 정책 링크 — Body/4(14) secondary, 개인정보처리방침만 굵게(색은 같다) */
.footer_v3_nav_list{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  margin:0; padding:0; list-style:none;
  font-size:14px; line-height:1.5; letter-spacing:-0.35px;
  color:var(--text-secondary);
}
.footer_v3_nav_list a{color:inherit;}
.footer_v3_nav_list a:hover{text-decoration:underline;}
.footer_v3_nav_list a.is_strong{font-weight:700;}

/*
 * 연락처·사업자(v5 InfoBlock). 묶음 사이 12, 줄 사이 4.
 * 모바일은 **항목마다 한 줄** · 구분선 없음 — `|` 를 쓰면 줄이 넘칠 때 선이 다음 줄 맨 앞으로 간다.
 * 데스크톱은 한 줄에 이어 12px 세로선으로 가른다(앞 항목 뒤가 아니라 뒤 항목 앞 — 첫 항목엔 없다).
 */
.footer_v3_contact{display:flex;flex-direction:column;gap:var(--sp-3);}
.footer_v3_info_block{display:flex;flex-direction:column;gap:var(--sp-1);}
.footer_v3_info_line,
.footer_v3_company p{
  margin:0;
  font-size:14px; line-height:1.5; letter-spacing:-0.35px;
  color:var(--text-secondary);
}
.footer_v3_info_line{display:flex;flex-direction:column;gap:var(--sp-1);}

/* 소셜 — 28 원 안에 16 단색 아이콘(v5 Icon mono: CSS mask + currentColor) */
.footer_v3_sns{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:0;padding:0;list-style:none;}
.footer_v3_sns a{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius-full);
  background:var(--surface-inset-strong);
  color:var(--text-secondary);
}
.footer_v3_sns_icon{
  --sns-icon:none;
  display:inline-block; width:16px; height:16px;
  background-color:currentColor;
  -webkit-mask:var(--sns-icon) no-repeat center / contain;
  mask:var(--sns-icon) no-repeat center / contain;
}

/* 인증 배지 — v5 치수 그대로(25 높이, 사이 40) */
.footer_v3_foot{border-top:1px solid var(--border-strong);}
.footer_v3_foot_inner{
  display:flex; align-items:center; gap:40px;
  padding-top:var(--sp-4); padding-bottom:var(--sp-4);
}
.footer_v3_badge_inc{display:block;height:25px;width:104.77px;}
.footer_v3_badge_kina{display:block;height:25px;width:120.51px;object-fit:cover;}

@media (min-width:768px){
  .footer_v3_wrap .v3_container{--page-gutter:var(--sp-6);}
  .footer_v3_inner{flex-direction:row;gap:120px;padding-top:40px;padding-bottom:40px;}
  .footer_v3_info_line{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;}
  .footer_v3_info_item + .footer_v3_info_item::before{
    content:''; display:inline-block; vertical-align:middle;
    width:1px; height:12px; margin:0 var(--sp-2);
    background:var(--border-strong);
  }
}

/* ── 광고 자리 ───────────────────────────────────────────── */
.v3_ad_slot{display:flex;justify-content:center;max-width:100%;overflow:hidden;}

/*
 * 본문 격자 (v5 site_grid · v4 #body_container) — 날개 | min(1280,100%) | 날개.
 * 본문 칸 번호를 못 박는다 — 날개가 display:none 이면 격자 항목이 아니게 되어 본문이 폭 0 칸으로 밀린다.
 * overflow-x:clip — 창 밖으로 나간 날개를 자른다. hidden 은 스크롤 상자를 만들어 안쪽 sticky 가 죽는다.
 */
.v3_site_grid{display:grid;grid-template-columns:minmax(0,1fr) min(1280px,100%) minmax(0,1fr);align-items:start;overflow-x:clip;}
.v3_site_center{grid-column:2;min-width:0;}

/*
 * 스카이스크래퍼 — 1280 이상에서만 자리가 난다(그 아래는 바깥 칸 폭이 0). 칸을 본문 높이만큼 늘려(stretch)
 * 안쪽이 sticky 로 따라 내려갈 공간을 준다. 칸 300 · 최대 높이 600 · 소재는 가운데, 줄이지 않는다.
 * 모바일에는 서버가 아예 안 그린다.
 */
.v3_sky_wrap{display:none;}
@media (min-width:1280px){
  .v3_sky_wrap{display:flex;align-items:flex-start;align-self:stretch;}
  .v3_sky_left{grid-column:1;justify-content:flex-end;padding-right:10px;}
  .v3_sky_right{grid-column:3;justify-content:flex-start;padding-left:10px;}
}
.v3_sky_item{position:sticky;top:84px;flex:none;width:300px;max-height:600px;overflow:hidden;padding-bottom:40px;}
.v3_sky_item img{max-height:600px;width:auto;object-fit:contain;}

.footer_v3_ad:empty{display:none;}
.footer_v3_ad .v3_ad_slot{display:flex;justify-content:center;padding:var(--sp-8) 0 0;}

/* ── 사이트 광고 띠 (v5 site-ads.tsx) ── */
/* 헤더 위 — 소재에 배경색이 있으면 띠 전체를 칠한다(인라인). 넓은 화면에서 양옆이 그 색으로 이어진다 */
.header_band_ad{display:flex;justify-content:center;width:100%;}
/* 헤더 아래 — 웹 970×250 은 본문 폭 안에서 위 24, 모바일 320×50 은 위아래 8 */
.header_below_ad{max-width:var(--page-w);margin:var(--sp-6) auto 0;padding:0 var(--sp-6);}
.header_below_ad.is_mobile{max-width:none;margin:0;padding:var(--sp-2) 0;}
/* 메인에서는 히어로와 같은 색 — 흰 띠가 끼어들면 화면이 잘린 것처럼 보인다 */
.header_below_ad.is_hero_band{background:var(--hero-bg);}
.footer_above_ad{padding:var(--sp-4) 0;}

/* ── 팝업 광고 (v5 ad-popup.tsx · v4 indexModal) ── */
.ad_popup_wrap{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);background:var(--ad-popup-dim);}
.ad_popup_wrap[hidden]{display:none;}
.ad_popup_box{display:flex;flex-direction:column;max-width:100%;max-height:100%;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-default);}
.ad_popup_top{display:flex;justify-content:flex-end;padding:var(--sp-2);}
.ad_popup_close{padding:var(--sp-1);border:0;background:transparent;cursor:pointer;font-size:16px;color:var(--text-secondary);}
.ad_popup_body{min-height:0;overflow:auto;}
.ad_popup_body img{display:block;max-width:100%;height:auto;}
.ad_popup_today{padding:var(--sp-3) var(--sp-4);border:0;border-top:1px solid var(--border-default);background:transparent;cursor:pointer;font-family:inherit;font-size:13px;color:var(--text-secondary);}

/* ── 앱 설치 배너 (v5 app-download-banner.tsx) — 모바일, 탭바(z 30) 위에 덮인다 ── */
.app_download_banner_wrap{position:fixed;left:0;right:0;bottom:0;z-index:940;background:var(--interactive-subtle);}
.app_download_banner_wrap[hidden]{display:none;}
@media (min-width:1024px){.app_download_banner_wrap{display:none;}}
.app_download_banner_top{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5) 0;}
.app_download_banner_image{flex:none;width:72px;height:72px;object-fit:contain;}
.app_download_banner_body{display:flex;flex-direction:column;gap:var(--sp-3);flex:1;min-width:0;}
.app_download_banner_text{display:flex;flex-direction:column;gap:2px;}
.app_download_banner_title{margin:0;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-0.4px;color:var(--text-primary);}
.app_download_banner_desc{margin:0;font-size:13px;line-height:1.5;letter-spacing:-0.325px;color:var(--text-secondary);}
.app_download_banner_accent{font-weight:700;color:var(--interactive-default);}
.app_download_banner_btn{display:flex;align-items:center;justify-content:center;height:44px;border-radius:var(--radius-lg);background:var(--interactive-default);font-size:14px;font-weight:700;letter-spacing:-0.35px;color:var(--white);}
.app_download_banner_foot{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);}
.app_download_banner_today{display:flex;align-items:center;gap:var(--sp-2);font-size:13px;color:var(--text-secondary);}
.app_download_banner_today input{width:16px;height:16px;margin:0;}
.app_download_banner_close{display:flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;color:var(--text-secondary);}
.app_download_banner_close .v3_ic{width:12px;height:12px;color:var(--icon-secondary);}

/* ── 모바일 하단 탭바 (v5 mobile-tab-bar.tsx) — 높이 딱 60, 1024 아래만 ── */
.mobile_tab_bar_wrap{
  position:fixed; left:0; right:0; bottom:0; z-index:930;
  display:flex; align-items:stretch; gap:var(--sp-2); height:60px; padding:0 var(--sp-2);
  border-top:1px solid var(--border-default); background:var(--surface-default);
}
.tab_link{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--sp-1) 0;color:var(--text-secondary);}
.tab_link.is_on{color:var(--interactive-default);}
.tab_link_icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;}
.tab_link_label{font-size:12px;font-weight:500;line-height:16px;}
.tab_link.is_on .tab_link_label{font-weight:700;}
/* 본문 아래 여백 — 탭바가 fixed 라 흐름에서 빠진다. 없으면 마지막 내용이 탭바 뒤에 가린다 */
body{padding-bottom:60px;}
@media (min-width:1024px){
  .mobile_tab_bar_wrap{display:none;}
  body{padding-bottom:0;}
}
/* 내려 읽으면 숨는다 — 제 높이 + 32. 떠 있는 단추는 탭바만큼 따라 내려온다 */
.tp_tabbar,.tp_tabbar_follow{transition:transform .3s ease-in-out;}
@media (max-width:1023px){
  /*
   * 탭바가 빠지면 그 자리 몫의 여백도 걷는다. 바닥에서는 탭바를 되살리지 않아서(floating.js)
   * 두면 푸터 아래에 흰 띠 60 이 남는다. 걷으면 문서가 60 줄어 스크롤이 위로 당겨지는데,
   * 그때도 바닥이라 탭바는 그대로 숨어 있다 — 깜빡이지 않는다.
   */
  html[data-tabbar="hidden"] body{padding-bottom:0;}
  html[data-tabbar="hidden"] .tp_tabbar{transform:translateY(calc(100% + 32px));}
  html[data-tabbar="hidden"] .tp_tabbar_follow{transform:translateY(60px);}
}
@media (prefers-reduced-motion:reduce){.tp_tabbar,.tp_tabbar_follow{transition:none;}}

/* ── 앱 다운로드 QR (v5 app-qr-widget.tsx) — 1400 이상만 ── */
.app_qr_widget_wrap{
  position:fixed; left:20px; bottom:20px; z-index:90; display:none; width:129px; padding:10px;
  border:1px solid var(--border-default); border-radius:var(--radius-lg); background:var(--surface-default);
  box-shadow:var(--qr-shadow); transition:box-shadow .2s, transform .2s;
}
@media (min-width:1400px){.app_qr_widget_wrap{display:block;}}
.app_qr_widget_wrap:hover{transform:translateY(-2px);box-shadow:var(--qr-shadow-hover);}
.app_qr_widget_link{display:block;}
.app_qr_widget_link img{display:block;width:100%;height:auto;border-radius:var(--radius-xs);}
.app_qr_widget_text{display:block;margin-top:var(--sp-2);text-align:center;font-size:11px;font-weight:500;line-height:1.45;letter-spacing:-0.28px;color:var(--text-secondary);}
/* 스토어 단추 — 마우스를 올리면(키보드로 닿아도) 아래로 펼쳐진다 */
.app_qr_widget_stores{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s, opacity .3s, margin-top .3s;}
.app_qr_widget_wrap:hover .app_qr_widget_stores,.app_qr_widget_wrap:focus-within .app_qr_widget_stores{grid-template-rows:1fr;opacity:1;margin-top:var(--sp-2);}
.app_qr_widget_stores_inner{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden;}
.app_qr_store_btn{display:flex;align-items:center;gap:6px;height:34px;padding:var(--sp-1) 10px;border-radius:var(--radius-md);background:var(--black);}
.app_qr_store_btn img{flex:none;width:16px;height:auto;}
.app_qr_store_text{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap;letter-spacing:-0.25px;color:var(--white);}
.app_qr_store_top{font-size:10px;font-weight:700;line-height:1.3;}
.app_qr_store_bottom{font-size:9px;font-weight:500;line-height:1.3;}
@media (prefers-reduced-motion:reduce){.app_qr_widget_wrap,.app_qr_widget_stores{transition:none;}}

/* ── 떠 있는 단추 (v5 floating-actions.tsx) ──
 * 모바일은 탭바(60) 위, 데스크톱은 오른쪽 아래 24 · 28. 이 상자는 화면 구석을 넓게 덮으므로
 * 누르는 것은 단추에만 준다(pointer-events).
 */
.floating_actions{position:fixed;right:var(--sp-4);bottom:76px;z-index:920;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;}
@media (min-width:1024px){.floating_actions{right:var(--sp-6);bottom:28px;}}
/*
 * 토포AI 알약 — **폭을 애니메이션하지 않는다**(width:auto 는 보간이 안 된다). 글자 칸만
 * 격자(0fr ↔ 1fr)로 접고 펴서 상자가 따라가게 둔다. 여백·간격·높이·색이 모두 같은 1.2초다 —
 * 시간이 어긋나면 상자가 먼저 벌어지고 글자가 뒤따라 들어와 툭 튄다.
 * 바탕: 접힘 #80b7ff · 펼침 #303744 — 테마를 따르지 않는다(글자도 흰색 고정).
 */
.floating_ai{
  pointer-events:auto; display:flex; align-items:center; overflow:hidden; height:40px; padding:0 var(--sp-1); column-gap:0;
  border:0; border-radius:var(--radius-full); background:var(--floating-ai-bg); box-shadow:var(--floating-ai-shadow); cursor:pointer;
  transition:opacity 1.2s cubic-bezier(.65,0,.35,1), transform 1.2s cubic-bezier(.65,0,.35,1), background-color 1.2s cubic-bezier(.65,0,.35,1), padding 1.2s cubic-bezier(.65,0,.35,1), column-gap 1.2s cubic-bezier(.65,0,.35,1), height 1.2s cubic-bezier(.65,0,.35,1);
}
.floating_ai.is_open{height:54px;column-gap:var(--sp-2);padding:0 var(--sp-3) 0 var(--sp-1);background:var(--floating-ai-bg-open);}
/* 히어로가 보이는 동안 — 아래로 잠기며 사라진다 */
.floating_ai.is_hidden{pointer-events:none;transform:translateY(24px);opacity:0;}
/* 구슬 — 접힘 32 → 펼침 46. 둥글게 자른다(아이폰에서 빛이 네모난 흰 판으로 번졌다) */
.floating_ai_orb{display:block;flex:none;width:32px;height:32px;clip-path:circle(50%);transition:width 1.2s cubic-bezier(.65,0,.35,1), height 1.2s cubic-bezier(.65,0,.35,1);}
.floating_ai.is_open .floating_ai_orb{width:46px;height:46px;}
.floating_ai_orb svg{width:100%;height:100%;}
.floating_ai_text{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns 1.2s cubic-bezier(.65,0,.35,1), opacity 1.2s cubic-bezier(.65,0,.35,1);}
.floating_ai.is_open .floating_ai_text{grid-template-columns:1fr;opacity:1;}
.floating_ai_inner{display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden;white-space:nowrap;text-align:left;color:var(--white);}
.floating_ai_title{font-size:14px;font-weight:700;line-height:1.4;letter-spacing:-0.35px;}
.floating_ai_action{font-size:12px;font-weight:500;line-height:1.4;letter-spacing:-0.3px;opacity:.8;}
@media (min-width:1024px){
  .floating_ai{height:46px;padding:0 3px;}
  .floating_ai.is_open{height:60px;column-gap:10px;padding:0 var(--sp-4) 0 var(--sp-1);}
  .floating_ai_orb{width:40px;height:40px;}
  .floating_ai.is_open .floating_ai_orb{width:52px;height:52px;}
  .floating_ai_title{font-size:15px;letter-spacing:-0.375px;}
  .floating_ai_action{font-size:13px;letter-spacing:-0.325px;}
}
/* 맨 위로 — 자리까지 늘어나며 떠오른다(위 알약이 같이 밀려 올라간다) */
.floating_top{height:0;margin-top:0;overflow:hidden;transition:height .7s cubic-bezier(.65,0,.35,1), margin-top .7s cubic-bezier(.65,0,.35,1);}
.floating_top.is_shown{height:40px;margin-top:var(--sp-3);}
.floating_top_btn{display:block;width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:none;transform:translateY(100%);transition:transform .7s cubic-bezier(.65,0,.35,1);}
.floating_top.is_shown .floating_top_btn{pointer-events:auto;transform:none;}
.floating_top_btn img{display:block;width:100%;height:100%;}
@media (min-width:1024px){
  .floating_top.is_shown{height:46px;}
  .floating_top_btn{width:46px;height:46px;}
}

/* 구슬 상자 — 어디서 쓰든 크기는 쓰는 쪽이 준다 */
[data-ai-orb]{display:block;}
[data-ai-orb] svg{width:100%;height:100%;}

/* ── 토포AI 곁창 (v5 components/base/ai-dialog.tsx) ─────────────────────
 *
 * 모바일은 화면을 통째로 쓰고 아래에서 올라온다. 768 부터 오른쪽 455 곁창이고 오른쪽에서 밀려 나온다.
 * 덮개는 검정 30% — 모달이 아니라 곁창이라 뒤가 비쳐야 한다. 닫힐 때 500ms 나가는 움직임
 * (overlay.js 의 data-overlay-exit · is_closing). z-index 는 overlay.js 가 매긴다.
 */
@keyframes tp_overlay_fade_in{from{opacity:0}to{opacity:1}}
@keyframes tp_overlay_fade_out{from{opacity:1}to{opacity:0}}
@keyframes tp_overlay_slide_up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes tp_overlay_slide_down{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes tp_overlay_slide_left{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes tp_overlay_slide_right{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes tp_overlay_pop{from{opacity:0;transform:translateY(-50%) scale(.96)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes tp_glow{from{background-position:0% 0%}to{background-position:0% 100%}}
@keyframes tp_dot{0%,80%,100%{opacity:.2}40%{opacity:1}}
@keyframes tp_source_in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.ai_dim{
  position:fixed; inset:0; display:none; padding:0; border:0; cursor:default;
  background:var(--modal-dim);
}
.ai_dim.is_open{display:block;animation:tp_overlay_fade_in .5s ease-out;}
.ai_dim.is_closing{animation:tp_overlay_fade_out .5s ease-out forwards;}

.ai_panel{
  position:fixed; inset:0; height:100dvh; display:none; flex-direction:column;
  background:var(--surface-default);
}
.ai_panel.is_open{display:flex;animation:tp_overlay_slide_up .5s cubic-bezier(.32,.72,0,1);}
.ai_panel.is_closing{animation:tp_overlay_slide_down .5s cubic-bezier(.32,.72,0,1) forwards;}
/* 아이폰 키패드 밑 — 곁창 바로 아래부터 화면 끝까지 같은 바탕 */
.ai_panel_under{position:absolute;left:0;right:0;top:100%;height:100vh;background:var(--surface-default);pointer-events:none;}
@media (min-width:768px){
  .ai_panel{left:auto;right:0;top:0;bottom:0;width:455px;height:auto;border-left:1px solid var(--border-default);}
  .ai_panel.is_open{animation-name:tp_overlay_slide_left;}
  .ai_panel.is_closing{animation-name:tp_overlay_slide_right;}
  .ai_panel_under{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ai_panel.is_open,.ai_dim.is_open{animation:tp_overlay_fade_in .12s ease-out;}
}

/* 머리 — 이름(보라→파랑 글자) · 사용량 · 닫기 */
.ai_dialog_head{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4) var(--sp-2);}
@media (min-width:768px){.ai_dialog_head{padding-top:var(--sp-4);}}
.ai_dialog_head_left{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);min-width:0;}
.ai_brand{display:flex;align-items:center;gap:var(--sp-1);color:var(--interactive-default);}
.ai_brand_text{
  font-size:18px; font-weight:900; line-height:1.5; letter-spacing:-0.45px;
  background-image:var(--ai-dialog-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ai_brand .v3_ic{width:10px;height:10px;}
.ai_dialog_close{flex:none;margin:-8px;padding:8px;border:0;background:transparent;cursor:pointer;color:var(--icon-secondary);}
.ai_dialog_close .v3_ic{display:block;width:20px;height:20px;}
.ai_dialog_notice{margin:0;padding:0 var(--sp-4) var(--sp-3);font-size:12px;line-height:1.5;color:var(--text-tertiary);}

/* 사용량 한 줄 + 펴는 패널 */
.quota_line{position:relative;}
.quota_line_btn{
  position:relative; z-index:20; display:flex; align-items:center; gap:var(--sp-1); padding:0; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:15px; line-height:1.5; letter-spacing:-0.4px; color:var(--text-tertiary);
}
.quota_line_btn:hover{color:var(--text-secondary);}
.quota_line_em{font-style:normal;font-weight:700;color:var(--interactive-default);}
.usage_ring{flex:none;transform:rotate(-90deg);}
.usage_ring_fill{stroke:var(--interactive-default);transition:stroke-dasharray .5s;}
.quota_line_chevron{width:8px;height:8px;color:var(--text-disabled);transition:transform .2s;}
.quota_line_btn.is_open .quota_line_chevron{transform:rotate(180deg);}
.quota_line_shut{position:fixed;inset:0;z-index:10;padding:0;border:0;background:transparent;cursor:default;}
.quota_line_shut[hidden],.quota_pop[hidden]{display:none;}
.quota_pop{
  position:absolute; top:24px; left:0; z-index:20; width:296px; padding:var(--sp-4);
  border:1px solid var(--border-default); border-radius:16px; background:var(--surface-default); box-shadow:var(--ai-pop-shadow);
}
.quota_pop_title{margin:0 0 var(--sp-3);font-size:14px;font-weight:700;line-height:1.5;color:var(--text-primary);}
.quota_pop_label{margin:0;font-size:13px;font-weight:700;line-height:1.5;color:var(--text-secondary);}
.quota_pop_bar{height:8px;margin-top:var(--sp-2);border-radius:var(--radius-full);background:var(--surface-muted);}
.quota_pop_fill{height:8px;border-radius:var(--radius-full);background-image:var(--ai-dialog-brand);transition:width .5s;}
.quota_pop_nums{display:flex;align-items:baseline;gap:var(--sp-1);margin:var(--sp-2) 0 0;}
.quota_pop_used{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-0.04em;color:var(--interactive-default);}
.quota_pop_total{font-size:13px;font-weight:700;color:var(--text-tertiary);}
.quota_pop_next{display:flex;margin:var(--sp-3) 0 0;font-size:13px;}
.quota_pop_next dt{color:var(--text-secondary);}
.quota_pop_next dd{margin:0 0 0 auto;font-weight:700;color:var(--text-primary);}
.quota_pop_badges{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-default);}
.quota_pop_badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-md);background:var(--interactive-subtle);font-size:13px;font-weight:700;color:var(--interactive-default);}
.quota_pop_badge .v3_ic{width:8px;height:8px;}
.quota_pop_buy{display:flex;align-items:center;justify-content:center;width:100%;margin-top:var(--sp-3);padding:var(--sp-3) 0;border-radius:var(--radius-lg);background-image:var(--ai-brand-button);font-size:14px;font-weight:700;color:var(--white);}

/* 본문 */
.ai_dialog_body{display:flex;flex:1;flex-direction:column;min-height:0;padding:0 var(--sp-4) var(--sp-4);overflow-y:auto;}
.ai_round_btn{
  flex:none; margin:var(--sp-2) auto 0; padding:6px 14px; border:1px solid var(--border-default); border-radius:var(--radius-full);
  background:transparent; cursor:pointer; font-family:inherit; font-size:15px; line-height:1.5; letter-spacing:-0.4px; color:var(--text-secondary);
}
.ai_round_btn:hover{background:var(--surface-subtle);}
.ai_round_btn[hidden]{display:none;}
.ai_empty{display:flex;flex:1;flex-direction:column;justify-content:space-between;}
.ai_empty[hidden],.ai_thread[hidden],.ai_suggest_wrap[hidden]{display:none;}
.ai_empty_top{display:flex;flex-direction:column;align-items:center;padding-top:40px;}
.ai_empty_orb{display:block;width:56px;height:56px;}
.ai_empty_text{margin:var(--sp-4) 0 0;text-align:center;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-0.4px;color:var(--text-primary);}
.ai_thread{display:flex;flex-direction:column;gap:var(--sp-4);padding-top:var(--sp-2);}
.ai_messages{display:flex;flex-direction:column;gap:var(--sp-4);}

/* 내 말 — 연한 파랑 · 오른쪽 아래 모서리만 작다(말풍선 꼬리) */
.ai_user{display:flex;justify-content:flex-end;}
.ai_user_bubble{
  max-width:242px; margin:0; padding:10px 14px; border-radius:16px 16px 4px 16px; background:var(--interactive-subtle);
  white-space:pre-wrap; overflow-wrap:anywhere; font-size:17px; line-height:1.5; color:var(--text-primary);
}

/* AI 한 덩어리 — 쓰는 동안만 구슬(28) */
.ai_block{display:flex;flex-direction:column;gap:var(--sp-3);}
.ai_block_orb{display:block;width:28px;height:28px;}
.ai_block_orb[hidden]{display:none;}
.ai_answer{display:flex;flex-direction:column;gap:10px;min-width:0;overflow-wrap:anywhere;font-size:17px;line-height:1.6;color:var(--text-primary);}
.ai_answer_p{margin:0;white-space:pre-wrap;}
.ai_answer_heading{margin:0;font-weight:700;color:var(--text-primary);}
.ai_answer_heading.is_h2{padding-top:var(--sp-1);font-size:1.05em;}
.ai_answer_hr{width:100%;margin:0;border:0;border-top:1px solid var(--border-default);}
.ai_answer_quote{margin:0;padding-left:var(--sp-3);border-left:2px solid var(--border-strong);color:var(--text-secondary);}
.ai_answer_line{display:block;}
.ai_answer_table_wrap{margin:0 -4px;padding:0 4px;overflow-x:auto;}
.ai_answer_table{width:100%;min-width:max-content;border-collapse:collapse;font-size:.92em;}
.ai_answer_table thead tr{border-bottom:1px solid var(--border-strong);text-align:left;}
.ai_answer_table th{padding:6px 16px 6px 0;white-space:nowrap;font-weight:700;}
.ai_answer_table tbody tr{border-bottom:1px solid var(--border-default);}
.ai_answer_table tbody tr:last-child{border-bottom:0;}
.ai_answer_table td{padding:6px 16px 6px 0;vertical-align:top;}
.ai_answer_list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;}
.ai_answer_item{display:flex;gap:var(--sp-2);}
.ai_answer_mark{flex:none;color:var(--text-tertiary);}
.ai_answer_item_text{flex:1;}
.ai_bold{font-weight:700;color:var(--text-primary);}
.ai_code{padding:2px 4px;border-radius:var(--radius-xs);background:var(--surface-muted);font-size:.92em;}
.ai_cite{padding:0 2px;font-size:.75em;font-weight:700;color:var(--interactive-default);}
.ai_link{word-break:break-all;color:var(--interactive-default);text-decoration:underline;text-underline-offset:2px;}
.ai_waiting{margin:0;font-size:14px;line-height:1.5;letter-spacing:-0.35px;color:var(--text-secondary);}
.tp_dot{--delay:0ms;animation:tp_dot 1.2s ease-in-out infinite;animation-delay:var(--delay);}
@media (prefers-reduced-motion:reduce){.tp_dot{animation:none;opacity:.6;}}

/* 참고 기사 — 답에 인용된 것만, 한 장씩 따라 붙는다 */
.ai_sources{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-default);}
.ai_sources_title{margin:0;font-size:13px;font-weight:700;line-height:1.5;color:var(--text-tertiary);}
.ai_source{display:flex;gap:6px;font-size:13px;line-height:1.5;color:var(--text-secondary);}
.ai_source:hover{color:var(--interactive-default);}
.ai_source_n,.ai_source_date{flex:none;color:var(--text-tertiary);}
.ai_source_title{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.tp_source_in{--delay:0ms;animation:tp_source_in .22s ease-out both;animation-delay:var(--delay);}
@media (prefers-reduced-motion:reduce){.tp_source_in{animation:none;}}

/* 답 뒤 단추 · 지우기 확인 · 평가 */
.answer_actions{display:flex;flex-direction:column;margin-top:var(--sp-1);}
.answer_actions_head{display:flex;align-items:center;gap:var(--sp-1);}
.answer_actions_head.is_confirm{gap:var(--sp-2);}
.ai_action{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;color:var(--icon-secondary);transition:background-color .15s;}
.ai_action:hover{background:var(--surface-subtle);}
.ai_action.is_active{color:var(--interactive-default);}
.ai_action .v3_ic{width:24px;height:24px;}
.answer_confirm_text{font-size:13px;color:var(--text-secondary);}
.answer_confirm_delete,.answer_confirm_cancel{padding:0;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;}
.answer_confirm_delete{font-weight:700;color:var(--status-up);}
.answer_confirm_delete:disabled{color:var(--text-disabled);}
.answer_confirm_cancel{color:var(--text-tertiary);}
/* 평가 — 덮지 않고 밀어낸다. 0fr → 1fr 로 자동 높이를 그대로 움직인다 */
.answer_review{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out;}
.answer_review.is_open{grid-template-rows:1fr;}
.answer_review_inner_wrap{overflow:hidden;}
.answer_review_box{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-2);padding:var(--sp-4);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-subtle);}
.answer_review_head{display:flex;flex-direction:column;gap:var(--sp-1);}
.answer_review_title{font-size:15px;font-weight:500;line-height:1.6;color:var(--text-primary);}
.answer_review_text{margin:0;font-size:13px;line-height:1.5;color:var(--text-tertiary);}
.answer_review_stars{display:flex;align-items:center;gap:var(--sp-1);margin:0;padding:0;border:0;}
.answer_review_star{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;color:var(--icon-disabled);}
.answer_review_star:hover{background:var(--surface-subtle);}
.answer_review_star.is_on{color:var(--interactive-default);}
.answer_review_star .v3_ic{width:20px;height:20px;}
.answer_review_count{margin-left:var(--sp-1);font-size:13px;color:var(--text-tertiary);}
.answer_review_body{
  width:100%; padding:var(--sp-2) var(--sp-3); resize:none; border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--surface-default); font-family:inherit; font-size:13px; line-height:1.5; color:var(--text-primary);
}
.answer_review_body::placeholder{color:var(--text-disabled);}
.answer_review_body:focus{border-color:var(--border-strong);outline:none;}
.answer_review_foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);}
.answer_review_note{font-size:12px;line-height:1.3;color:var(--text-tertiary);}
.answer_review_btns{display:flex;align-items:center;gap:var(--sp-1);}
.answer_review_close,.answer_review_send{padding:6px var(--sp-3);border:0;border-radius:var(--radius-md);cursor:pointer;font-family:inherit;font-size:13px;}
.answer_review_close{background:transparent;color:var(--text-tertiary);}
.answer_review_close:hover{background:var(--surface-subtle);}
.answer_review_send{background:var(--interactive-default);font-weight:700;color:var(--white);}
.answer_review_send:disabled{background:var(--surface-inset);color:var(--text-disabled);cursor:default;}

/* 막힘 안내(로그인 · 한도) */
.ai_notice_title{margin:0;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-0.4px;color:var(--text-primary);}
.ai_notice_text{margin:var(--sp-2) 0 0;font-size:14px;line-height:1.5;letter-spacing:-0.35px;color:var(--text-secondary);}
.ai_notice_btn{display:inline-flex;align-items:center;gap:6px;height:40px;margin-top:var(--sp-4);padding:0 var(--sp-3);border-radius:var(--radius-md);background:var(--interactive-default);font-size:14px;font-weight:500;color:var(--white);}
.ai_notice_dot{opacity:.6;}

/* 제안 질문 — 회색 알약 */
.ai_suggest_wrap{display:flex;flex:none;flex-direction:column;align-items:center;gap:10px;margin-top:var(--sp-4);}
.ai_suggest_list{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);margin:0;padding:0;list-style:none;}
.ai_suggest_item{max-width:100%;}
.ai_suggest_btn{
  max-width:100%; padding:5px 9px; border:1px solid var(--border-default); border-radius:var(--radius-full);
  background:var(--surface-muted); cursor:pointer; text-align:center;
  font-family:inherit; font-size:14px; font-weight:500; line-height:1.5; letter-spacing:-0.35px; color:var(--text-secondary);
  transition:border-color .15s, color .15s;
}
.ai_suggest_btn:hover{border-color:var(--interactive-default);color:var(--interactive-default);}

/* 입력 — 흰 알약 뒤에 번진 그라디언트(색만 위아래로 흐른다, 8초) */
.ai_dialog_form{padding:var(--sp-4);padding-bottom:max(1rem,env(safe-area-inset-bottom));border-top:1px solid var(--border-default);}
.ai_input_wrap{position:relative;height:48px;}
.ai_input_glow{
  position:absolute; inset:0; border-radius:var(--radius-full); pointer-events:none;
  background-image:var(--ai-input-glow); background-size:100% 400%; filter:blur(7.5px); opacity:.5;
  animation:tp_glow 8s linear infinite;
}
@media (prefers-reduced-motion:reduce){.ai_input_glow{animation:none;}}
.ai_input_box{position:relative;display:flex;align-items:center;gap:var(--sp-2);height:48px;padding:0 var(--sp-2) 0 var(--sp-4);border-radius:var(--radius-full);background:var(--surface-default);}
.ai_input{flex:1;min-width:0;padding:0;border:0;outline:none;background:transparent;font-family:inherit;font-size:17px;line-height:1.5;color:var(--text-primary);}
.ai_input::placeholder{color:var(--text-tertiary);}
.ai_send{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-full);cursor:pointer;background:var(--gray-05);color:var(--white);transition:background-color .15s;}
.ai_send.is_ready{background-image:var(--ai-brand-button);}
.ai_send:disabled{cursor:default;}
.ai_send .v3_ic{width:16px;height:16px;}
.ai_subscribe_line{display:flex;align-items:center;gap:var(--sp-2);margin-top:10px;padding:14px var(--sp-4);border-radius:var(--radius-lg);background:var(--interactive-subtle);}
.ai_subscribe_line[hidden]{display:none;}
.ai_subscribe_title{flex:none;white-space:nowrap;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-0.375px;color:var(--interactive-default);}
.ai_subscribe_desc{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.5;color:var(--text-tertiary);}
.ai_subscribe_line .v3_ic{flex:none;width:12px;height:12px;margin-left:auto;color:var(--interactive-default);}

/* ── 이용 동의(v5 AiAgreeSheet) — 덮개 검정 50%, 눌러도 닫히지 않는다 ── */
.ai_agree_dim{position:fixed;inset:0;display:none;background:var(--ai-agree-dim);}
.ai_agree_dim.is_open{display:block;animation:tp_overlay_fade_in .5s ease-out;}
.ai_agree{
  position:fixed; left:16px; right:16px; top:50%; display:none; flex-direction:column; max-width:420px; max-height:80vh; margin:0 auto;
  overflow:hidden; border-radius:24px; background:var(--surface-default); box-shadow:var(--ai-agree-shadow); transform:translateY(-50%);
}
.ai_agree.is_open{display:flex;animation:tp_overlay_pop .2s cubic-bezier(.32,.72,0,1);}
.ai_agree_head{padding:var(--sp-6) var(--sp-6) var(--sp-4);}
.ai_agree_title{margin:0;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-0.4px;color:var(--text-primary);}
.ai_agree_desc{margin:var(--sp-2) 0 0;font-size:14px;line-height:1.5;letter-spacing:-0.35px;color:var(--text-secondary);}
.ai_agree_desc b{color:var(--text-primary);}
.ai_agree_body{flex:1;min-height:0;padding:0 var(--sp-6);overflow-y:auto;}
.ai_agree_all{border-bottom:1px solid var(--border-default);}
.ai_agree_line{display:flex;align-items:center;gap:var(--sp-2);}
.ai_check_row{display:flex;flex:1;align-items:center;gap:10px;min-width:0;padding:14px 0;cursor:pointer;}
.ai_check_box{position:relative;display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-default);}
.ai_check_box.is_on{border-color:var(--interactive-default);background:var(--interactive-default);}
.ai_check_box.is_on::after{content:'';width:10px;height:5px;margin-top:-2px;border-left:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(-45deg);}
.ai_check_row input:focus-visible + .ai_check_box{outline:2px solid var(--border-focus);outline-offset:2px;}
.ai_check_label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:1.5;color:var(--text-primary);}
.ai_check_label.is_bold{font-size:15px;font-weight:500;line-height:1.6;}
.ai_check_req{color:var(--text-tertiary);}
.ai_agree_view{flex:none;padding:0;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;color:var(--text-tertiary);text-decoration:underline;}
.ai_agree_foot{padding:var(--sp-4) var(--sp-6) var(--sp-6);}
.ai_agree_fail{margin:0 0 var(--sp-2);font-size:13px;color:var(--status-up);}
.ai_agree_save{width:100%;height:48px;border:0;border-radius:var(--radius-lg);background:var(--interactive-default);cursor:pointer;font-family:inherit;font-size:15px;font-weight:500;color:var(--white);}
.ai_agree_save:disabled{background:var(--surface-inset);color:var(--text-tertiary);cursor:default;}
.ai_agree_later{width:100%;height:40px;margin-top:var(--sp-2);border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:14px;color:var(--text-tertiary);}
.ai_agree_doc_head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4);}
.ai_agree_back{flex:none;padding:var(--sp-1);border:0;background:transparent;cursor:pointer;color:var(--icon-primary);}
.ai_agree_back .v3_ic{display:block;width:16px;height:16px;}
.ai_agree_back .is_flip{transform:rotate(180deg);}
.ai_agree_doc_title{flex:1;min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:500;line-height:1.6;color:var(--text-primary);}
.ai_agree_doc_version{flex:none;font-size:13px;color:var(--text-tertiary);}
.ai_agree_doc_body{flex:1;min-height:0;padding:0 var(--sp-6) var(--sp-6);overflow-y:auto;white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--text-secondary);}

/* ── 헤더 반응형 (v5 site-header.tsx) ─────────────────────────
 *
 * 두 바를 다 그리고 **1024 로** 하나만 보인다 — v5 와 같은 경계다. 데스크톱 바는
 * 로고 167 + 내비 538 + 액션 184 + 여백 48 = 937 이 필요해 768 에서 켜면 가로로 터진다.
 *
 * 모바일 바: 높이 59 + 아래 선 1 = 60 · 3칸 격자(로고 정중앙) · 상자 44 · 좌우 여백 6.
 * 바탕은 흰색 그대로(데스크톱만 92% 비침). 홈 히어로 위에서는 히어로와 같은 하늘색(data-tint).
 */
#header_v3_wrap .header_v3_mobile{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:59px; padding:0 var(--sp-1);
}
@media (min-width:340px){#header_v3_wrap .header_v3_mobile{padding:0 6px;}}
.header_v3_mobile_left{display:flex;align-items:center;justify-self:start;}
.header_v3_mobile_right{display:flex;align-items:center;justify-self:end;}
.header_v3_mobile_logo{display:block;line-height:0;}
/* 로고 28 높이(원본 167×30 → 폭 156). 340 아래에서는 24 */
.header_v3_mobile_logo img{display:block;height:24px;width:auto;}
@media (min-width:340px){.header_v3_mobile_logo img{height:28px;}}
.header_v3_mobile_logo .logo_dark{display:none;}
:root.dark .header_v3_mobile_logo .logo_light{display:none;}
:root.dark .header_v3_mobile_logo .logo_dark{display:block;}
/* 44×44 — 기사 헤더 막대와 같은 상자라 막대가 덮어도 햄버거·마이가 제자리다 */
.header_v3_mbtn{
  position:relative; flex:none; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:14px; background:transparent; cursor:pointer;
  color:var(--icon-primary); transition:background-color .15s;
}
.header_v3_mbtn:hover{background:var(--surface-subtle);}
.header_v3_mavatar{width:24px;height:24px;border-radius:var(--radius-full);object-fit:cover;}
/* 알림 뱃지 — 종의 오른쪽 위. 0 이면 뱃지 자체가 없다 */
.header_v3_badge{
  position:absolute; top:6px; right:6px; min-width:16px; padding:0 var(--sp-1);
  border-radius:var(--radius-full); background:var(--badge); text-align:center;
  font-size:10px; font-weight:700; line-height:16px; color:var(--white);
}
.header_v3_badge.is_desktop{top:var(--sp-1);right:var(--sp-1);}
.header_v3_badge[hidden],.alarm_drawer_count[hidden]{display:none;}

@media (max-width:1023px){
  #header_v3_wrap{background:var(--surface-default);-webkit-backdrop-filter:none;backdrop-filter:none;}
  #header_v3_wrap .header_v3_bar{display:none;}
  /* 히어로 위 — 히어로와 같은 색, 아이콘은 한 단계 옅게(icon-secondary) */
  #header_v3_wrap[data-tint]{background:var(--hero-bg);}
  #header_v3_wrap[data-tint] .header_v3_mbtn{color:var(--icon-secondary);}
}
@media (min-width:1024px){
  #header_v3_wrap .header_v3_mobile{display:none;}
}

/* ── 모바일 전체 메뉴 (v5 mobile-menu.tsx · 189:24669) — 화면 전체, 1024 아래만 ── */
.mobile_menu{
  position:fixed; inset:0; display:none; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface-default); animation:v3_drawer_in .25s cubic-bezier(.32,.72,0,1);
}
.mobile_menu.is_open{display:block;}
@media (min-width:1024px){.mobile_menu.is_open{display:none;}}
.mobile_menu_top{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-3) var(--sp-5); background:var(--mobile-menu-top-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.mobile_menu_logo img{display:block;height:24px;width:auto;}
.mobile_menu_logo .logo_dark{display:none;}
:root.dark .mobile_menu_logo .logo_light{display:none;}
:root.dark .mobile_menu_logo .logo_dark{display:block;}
.mobile_menu_close{margin-right:calc(var(--sp-2) * -1);padding:var(--sp-2);border:0;background:transparent;cursor:pointer;color:var(--icon-secondary);}
.mobile_menu_close .v3_ic{width:20px;height:20px;}

.mobile_menu_profile{padding:var(--sp-5);border-bottom:1px solid var(--border-default);background:var(--surface-subtle);}
.mobile_menu_user{display:flex;align-items:center;gap:var(--sp-2);}
.mobile_menu_avatar{flex:none;width:36px;height:36px;border-radius:var(--radius-full);object-fit:cover;}
.mobile_menu_avatar.is_empty{display:flex;align-items:center;justify-content:center;background:var(--surface-inset);color:var(--icon-secondary);}
.mobile_menu_avatar.is_empty .v3_ic{width:18px;height:18px;}
.mobile_menu_nickname{display:flex;align-items:center;gap:var(--sp-2);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-0.4px;color:var(--text-primary);}
.mobile_menu_nickname .v3_ic{width:12px;height:12px;color:var(--icon-secondary);}
.mobile_menu_stats{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);}
.mobile_menu_stat{display:flex;flex:1;align-items:center;padding:0 2px;font-size:14px;line-height:1.5;letter-spacing:-0.35px;}
.mobile_menu_stat.is_tpc{justify-content:center;color:var(--yellow-09);}
.mobile_menu_stat.is_ticket{justify-content:space-between;color:var(--green-07);}
.mobile_menu_stat_bar{width:1px;height:16px;background:var(--border-default);}
.mobile_menu_login{display:flex;align-items:center;justify-content:center;height:var(--btn-h-xl);border-radius:var(--radius-md);background:var(--interactive-default);font-size:15px;font-weight:700;color:var(--white);}

.mobile_menu_utils{display:flex;align-items:center;padding:var(--sp-4) var(--sp-3);}
.mobile_menu_util_btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:14px;background:transparent;cursor:pointer;color:var(--icon-primary);}
.mobile_menu_util_btn:hover{background:var(--surface-subtle);}
.mobile_menu_theme .is_to_light{display:none;}
:root.dark .mobile_menu_theme .is_to_dark{display:none;}
:root.dark .mobile_menu_theme .is_to_light{display:inline-block;}
.mobile_menu_edition{position:relative;}
.mobile_menu .header_v3_flag{display:block;width:24px;height:24px;overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-full);}
.mobile_menu .header_v3_flag img{display:block;width:100%;height:100%;object-fit:cover;}
.mobile_menu .header_v3_flag.is_blank{border-color:transparent;background:var(--surface-subtle);}
.mobile_menu .header_v3_edition_list{
  position:absolute; top:44px; left:0; z-index:50; min-width:120px; margin:0; padding:var(--sp-5); list-style:none;
  border:1px solid var(--border-default); border-radius:20px; background:var(--surface-default); box-shadow:var(--elevation-pop);
}
.mobile_menu .header_v3_edition_list[hidden]{display:none;}
.mobile_menu .header_v3_edition_list li,.mobile_menu .header_v3_edition_list a{display:flex;align-items:center;gap:var(--sp-2);}
.mobile_menu .header_v3_edition_list li{padding:10px 0;}
.mobile_menu .header_v3_edition_list span{font-size:14px;font-weight:500;line-height:1.5;color:var(--text-primary);}

.mobile_menu_topic{display:flex;align-items:center;gap:var(--sp-6);margin:0 var(--sp-5);padding:var(--sp-3);border-radius:var(--radius-xs);background:var(--interactive-subtle);}
.mobile_menu_topic_title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.6;letter-spacing:-0.375px;color:var(--text-primary);}
.mobile_menu_topic_more{display:flex;flex:none;align-items:center;gap:var(--sp-2);font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-0.4px;color:var(--interactive-default);}
.mobile_menu_topic_more .v3_ic{width:12px;height:12px;}
.mobile_menu_event{padding:var(--sp-5) var(--sp-5) 0;}
.mobile_menu_event_btn{display:flex;align-items:center;justify-content:center;width:100%;height:32px;padding:0 var(--sp-4);border-radius:var(--radius-xs);background:var(--menu-event-bg);white-space:nowrap;font-size:14px;font-weight:700;letter-spacing:-0.35px;color:var(--white);}

.mobile_menu_nav{padding:var(--sp-6) var(--sp-5) var(--sp-8);}
.mobile_menu_sections{display:flex;flex-direction:column;gap:40px;margin:0;padding:0;list-style:none;}
.mobile_menu_section_head{display:flex;align-items:center;gap:var(--sp-2);}
.mobile_menu_section_icon{flex:none;width:20px;height:20px;}
.mobile_menu_section_icon.alpha_symbol{position:relative;display:block;}
.mobile_menu_section_icon.alpha_symbol img{position:absolute;inset:0;width:100%;height:100%;}
.mobile_menu_section_icon.alpha_symbol .alpha_inner{inset:auto;top:50%;left:50%;width:50%;height:50%;transform:translate(-50%,-50%);}
.mobile_menu_section_label{font-size:15px;line-height:1.6;letter-spacing:-0.375px;color:var(--text-secondary);}
.mobile_menu_section_head.is_current .mobile_menu_section_label{font-weight:700;color:var(--interactive-default);}
.mobile_menu_section_chevron{width:12px;height:12px;color:var(--icon-secondary);}
.mobile_menu_rule{margin:var(--sp-4) 0 0;border:0;border-top:1px solid var(--border-default);}
.mobile_menu_links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);margin:var(--sp-4) 0 0;padding:0;list-style:none;}
.mobile_menu_links a,.mobile_menu_utility a{display:flex;align-items:center;gap:var(--sp-1);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-0.4px;color:var(--text-primary);}
.mobile_menu_links .v3_ic,.mobile_menu_utility .v3_ic{width:12px;height:12px;color:var(--icon-secondary);}
.mobile_menu_bottom{padding:var(--sp-6) var(--sp-5);border-top:8px solid var(--surface-subtle);}
.mobile_menu_utility{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;}
.mobile_menu_utility .v3_ic{width:14px;height:14px;}

/* ── 알림 드로어 (v5 alarm-drawer.tsx) — 오른쪽 400, 모바일은 오른쪽 40 만 남긴다 ── */
.v3_drawer_dim.is_alarm{background:var(--alarm-dim);}
.alarm_drawer{
  position:fixed; top:0; bottom:0; right:0; display:none; flex-direction:column;
  width:calc(100% - 40px); max-width:400px; background:var(--surface-default); box-shadow:var(--alarm-shadow);
  animation:v3_drawer_in .25s cubic-bezier(.32,.72,0,1);
}
.alarm_drawer.is_open{display:flex;}
.alarm_drawer_head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border-default);}
.alarm_drawer_title{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-size:16px;font-weight:700;line-height:1.5;color:var(--text-primary);}
.alarm_drawer_count{padding:2px 6px;border-radius:var(--radius-full);background:var(--badge);font-size:12px;font-weight:700;color:var(--white);}
.alarm_drawer_readall{margin-left:auto;padding:0;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);}
.alarm_drawer_readall:disabled{color:var(--text-disabled);cursor:default;}
.alarm_drawer_close{padding:var(--sp-1);border:0;background:transparent;cursor:pointer;color:var(--icon-secondary);}
.alarm_drawer_close.is_alone{margin-left:auto;}
.alarm_drawer_close .v3_ic{width:20px;height:20px;}
.alarm_drawer_body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.alarm_drawer_status{margin:0;padding:40px var(--sp-5);text-align:center;font-size:14px;font-weight:500;line-height:1.625;color:var(--text-tertiary);}
.alarm_drawer_status[hidden],.alarm_drawer_more[hidden],.alarm_drawer_note[hidden]{display:none;}
.alarm_drawer_list{margin:0;padding:0;list-style:none;}
.alarm_drawer_more{padding:var(--sp-4) var(--sp-5);}
.alarm_drawer_more_btn{width:100%;height:44px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:transparent;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--text-secondary);}
.alarm_drawer_note{margin:0;padding:0 var(--sp-5) var(--sp-6);text-align:center;font-size:12px;color:var(--text-disabled);}
.alarm_drawer_login{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:48px var(--sp-5);}
.alarm_drawer_login p{margin:0;text-align:center;font-size:14px;font-weight:500;line-height:1.625;color:var(--text-tertiary);}
.alarm_drawer_login_btn{display:flex;align-items:center;justify-content:center;width:100%;height:var(--btn-h-xl);border-radius:var(--radius-md);background:var(--interactive-default);font-size:15px;font-weight:700;color:var(--white);}
.alarm_row{position:relative;}
/* 안 읽은 줄은 옅은 파랑 바탕 + 점 — 바탕만으로는 다크에서 차이가 옅다 */
.alarm_row_main{display:block;width:100%;padding:var(--sp-4) 44px var(--sp-4) var(--sp-5);border:0;border-bottom:1px solid var(--border-default);background:var(--surface-default);text-align:left;cursor:pointer;font-family:inherit;}
.alarm_row_main.is_unread{background:var(--interactive-subtle);}
.alarm_row_meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-tertiary);}
.alarm_row_icon{flex:none;}
.alarm_row_head.is_unread{font-weight:700;color:var(--interactive-default);}
.alarm_row_dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--interactive-default);}
.alarm_row_time{margin-left:auto;flex:none;}
.alarm_row_message{margin:0;padding-top:var(--sp-1);font-size:14px;font-weight:500;line-height:1.5;color:var(--text-primary);}
.alarm_row_menu{position:absolute;top:var(--sp-3);right:var(--sp-2);display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;}
.alarm_row_dots{display:flex;gap:2px;}
.alarm_row_dots span{width:4px;height:4px;border-radius:var(--radius-full);background:var(--icon-secondary);}
.alarm_row_shield{position:fixed;inset:0;z-index:10;border:0;background:transparent;cursor:default;}
.alarm_row_pop{position:absolute;top:44px;right:var(--sp-3);z-index:20;overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-default);box-shadow:var(--alarm-pop-shadow);}
.alarm_row_delete{width:100%;padding:14px var(--sp-5);border:0;background:transparent;cursor:pointer;white-space:nowrap;text-align:left;font-family:inherit;font-size:14px;font-weight:500;color:var(--red-08);}