/* ============================================================ Ev Diary 공용 헤더 (로고 바 + 상단 네비게이션) - 모든 페이지가 이 파일을 링크 → 헤더 배치/여백을 한 곳에서 관리. - 이 는 각 페이지 직전에 두어 인라인 스타일보다 우선 적용됨. - 색 토큰 호환: 신규 페이지는 --primary/--border 사용, index는 --accent/--line 사용 → var(--primary, var(--accent)) 식으로 폴백 처리하여 양쪽 모두 정상 동작. ▶ 새 페이지 추가 시: 1) 안 직전에: 2) 최상단에 아래 마크업 붙여넣기(active 클래스는 현재 페이지 링크에만):

(전체 스켈레톤은 PAGE-TEMPLATE.html 참고) ============================================================ */ @media (max-width: 700px) { body { padding: 10px; } } .site-brand-bar { max-width: 1180px; margin: 0 auto; padding: 18px 16px 0; } .site-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; color: var(--primary, var(--accent)); text-decoration: none; } .site-brand img { height: 66px; width: auto; display: block; } .site-brand .logo-dark { display: none; } :root[data-theme="dark"] .site-brand .logo-light { display: none; } :root[data-theme="dark"] .site-brand .logo-dark { display: block; } .topnav { display: flex; gap: 8px; max-width: 1180px; margin: 0 auto; padding: 14px 16px 0; } .topnav a { flex: 1; text-align: center; padding: 11px 14px; border-radius: 9px; background: var(--card); border: 1px solid var(--border, var(--line)); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: all .15s; } .topnav a:hover { border-color: var(--primary, var(--accent)); color: var(--primary, var(--accent)); } .topnav a.active { background: var(--primary-light, var(--accent-soft)); color: var(--primary, var(--accent)); border-color: var(--primary, var(--accent)); } .topnav a .ico { width: 17px; height: 17px; vertical-align: -3px; } @media (max-width: 680px) { .topnav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .topnav a { padding: 10px 6px; font-size: 13px; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; } .topnav a .ico { width: 14px; height: 14px; } }