/* ============================================================ Champions Helper — 사이트 공통 헤더 (단일 소스, 124차) 전 페이지가 이 파일 하나를 마지막에 링크한다. 상단 nav의 폭·높이·링크 스타일은 여기서만 정의 — 페이지별 인라인 CSS로 헤더를 다시 만들지 말 것. (과거: 페이지마다 인라인 헤더 CSS + .wrap 폭이 900/1080px로 달라 페이지 이동 시 헤더가 좌우로 밀렸음) ============================================================ */ /* 스크롤바 상시 확보 — 짧은 페이지에서 스크롤바가 사라지며 전체 레이아웃이 좌우로 미세하게 밀리는 현상 방지 */ html { overflow-y: scroll; } header { position: sticky; top: 0; z-index: 20; background: rgba(27, 29, 34, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line, #3a3f49); } /* 헤더 컨테이너 — 본문 .wrap 폭과 무관하게 전 페이지 동일 고정 */ .nav { max-width: 1080px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 56px; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; color: var(--txt, #e8eaed); text-decoration: none; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--accent, #3a6fc8); box-shadow: 0 0 10px var(--accent, #3a6fc8); } .nav-links { display: flex; gap: 20px; font-size: 14px; white-space: nowrap; } .nav-links a { color: var(--muted, #9aa0a8); text-decoration: none; } .nav-links a:hover { color: var(--txt, #e8eaed); text-decoration: none; } .nav-links a.active { color: var(--txt, #e8eaed); } @media (max-width: 760px) { .nav { gap: 12px; } .nav-links { gap: 13px; font-size: 13px; overflow-x: auto; } }