/* ========================================================================== vag-header.css — 앱 통일 헤더 (2026-08-30 아리) PHP 페이지(app_header.php)와 HTML 페이지(vag-header.js)가 같은 마크업을 그리므로 스타일도 이 한 파일만 쓴다. ★ 기존 .topbar 와 이름이 겹치지 않게 전부 .vhd- 접두사를 쓴다. 페이지에 남아 있는 옛 스타일과 충돌하면 안 된다. ========================================================================== */ /* ── 색 ─────────────────────────────────────────────────────────────────── ★ 자체 팔레트를 갖지 않는다. 각 페이지가 이미 쓰고 있는 「브랜드 통일 토큰」(2026-08-26)을 그대로 참조한다. --bg / --bg-soft / --ink / --ink-soft / --line / --brand / --surface 그래야 헤더가 어느 페이지에 얹히든 그 페이지와 같은 색이 된다. 토큰이 없는 페이지에서는 뒤의 폴백값을 쓴다(= 라이트 기본). data-theme 은 각 페이지의 인라인 스크립트가 이미 박아 둔다. 그래서 여기서 prefers-color-scheme 을 다시 보지 않는다 — 보면 오히려 어긋난다. */ :root { --vhd-h: 56px; --vhd-bg: var(--surface, var(--bg, #ffffff)); --vhd-fg: var(--ink, #1f2430); --vhd-muted: var(--ink-soft, #5b6472); --vhd-line: var(--line, #eceef3); --vhd-accent: var(--brand, #ff6a00); --vhd-accent-soft:var(--brand-soft, #fff3eb); --vhd-hover: var(--bg-soft, #f7f8fb); --vhd-badge-bg: var(--brand-soft, #fff3eb); --vhd-badge-fg: var(--brand-dark, #e85d00); } [data-theme="dark"] { --vhd-hover: var(--surface-elev, #152538); --vhd-badge-bg: rgba(255,106,0,.16); --vhd-badge-fg: #ffa059; } /* ── 자리 잡기 ──────────────────────────────────────────────────────────── HTML 페이지는 JS 로 그리므로 한 박자 늦다. 스켈레톤이 미리 같은 높이를 차지하고 있어야 내용이 밀리지 않는다(FOUC 방지). */ #vag-hd { min-height: var(--vhd-h); } .vhd { position: sticky; top: 0; z-index: 900; height: var(--vhd-h); background: var(--vhd-bg); border-bottom: 1px solid var(--vhd-line); color: var(--vhd-fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, sans-serif; } .vhd-wrap { height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 8px; } /* ── 로고 ───────────────────────────────────────────────────────────────── */ .vhd-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--vhd-fg); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .vhd-logo .mk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--vhd-accent); color: #fff; font-size: 12px; } /* ── 메뉴 ───────────────────────────────────────────────────────────────── */ .vhd-nav { display: flex; align-items: center; gap: 2px; margin-left: 18px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .vhd-nav::-webkit-scrollbar { display: none; } .vhd-link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--vhd-muted); text-decoration: none; white-space: nowrap; transition: background .13s, color .13s; } .vhd-link:hover { background: var(--vhd-hover); color: var(--vhd-fg); } .vhd-link .ic { font-size: 14px; line-height: 1; } .vhd-link[aria-current="page"] { color: var(--vhd-accent); background: var(--vhd-accent-soft); font-weight: 600; } /* ── 우측 영역 ──────────────────────────────────────────────────────────── */ .vhd-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .vhd-badge { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--vhd-badge-bg); color: var(--vhd-badge-fg); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; } .vhd-badge .cr { opacity: .8; font-weight: 500; } .vhd-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--vhd-fg); font-size: 15px; cursor: pointer; } .vhd-icon-btn:hover { background: var(--vhd-hover); } .vhd-user { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 6px; border: 1px solid var(--vhd-line); border-radius: 999px; background: transparent; color: var(--vhd-fg); font-size: 13px; cursor: pointer; max-width: 190px; } .vhd-user:hover { background: var(--vhd-hover); } .vhd-user .av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vhd-accent); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; overflow: hidden; } .vhd-user .av img { width: 100%; height: 100%; object-fit: cover; } .vhd-user .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 드롭다운 ───────────────────────────────────────────────────────────── */ .vhd-menu-wrap { position: relative; } .vhd-drop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 6px; background: var(--vhd-bg); border: 1px solid var(--vhd-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .12); } .vhd-drop a, .vhd-drop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--vhd-fg); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; } .vhd-drop a:hover, .vhd-drop button:hover { background: var(--vhd-hover); } .vhd-drop hr { margin: 5px 2px; border: 0; border-top: 1px solid var(--vhd-line); } .vhd-btn-login { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--vhd-accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; } /* ── 모바일 ─────────────────────────────────────────────────────────────── */ .vhd-hamb { display: none; } @media (max-width: 880px) { .vhd-wrap { padding: 0 14px; } .vhd-nav { position: fixed; inset: var(--vhd-h) 0 auto 0; margin: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; background: var(--vhd-bg); border-bottom: 1px solid var(--vhd-line); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); overflow: visible; } .vhd-nav[hidden] { display: none; } .vhd-link { height: 44px; font-size: 15px; } .vhd-hamb { display: grid; } .vhd-badge .cr { display: none; } .vhd-user .nm { display: none; } .vhd-user { padding: 0 6px; } } /* ── 기존 페이지별 topbar 대체 ─────────────────────────────────────────── 페이지마다 하드코딩돼 있던 .topbar 는 이 통일 헤더로 대체된다. ★ DOM 은 지우지 않고 감추기만 한다. 기존 JS 가 그 안의 id 를 참조하기 때문이다 (user-email · themeToggle · themeIcon · admin-btn · apikey-btn … 페이지당 4~15곳). 지우면 null 참조로 스크립트가 죽는다. 이 규칙은 vag-header.css 를 부르는 앱 페이지에만 적용된다. 마케팅 페이지는 이 파일을 부르지 않으므로 영향이 없다. */ .topbar, .top-bar { display: none !important; } /* ↑ .top-bar (하이픈) 는 channels-connect.html 한 곳만 쓰는 이름이다. 붙여쓴 .topbar 만 감췄더니 그 페이지에서만 헤더가 «두 개»로 보였다. (2026-08-30 조은님 스크린샷으로 확인) */