/* ════════════════════════════════════════════════════════════════ 무비 글로벌 헤더 — 단일 소스 ──────────────────────────────────────────────────────────────── ▸ moobee.kr 전 페이지 (메인·FAQ·도구·가이드) 동일 헤더 적용. ▸ 모든 페이지 에 import: ▸ 짝지을 HTML 스니펫: /design-system/global-header.html ▸ #bee 심볼은 페이지마다 인라인 정의 (global-header.html 참조) ▸ 변경 시 본 파일만 수정 → 전 페이지 자동 반영 ──────────────────────────────────────────────────────────────── v1.0 · 2026-06-07 · peter ════════════════════════════════════════════════════════════════ */ /* ── nav container ── */ header.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(22, 24, 29, 0.08); } .nav-wrap { max-width: 1320px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 24px; } /* ── brand (mark + wordmark) ── */ .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 30px; letter-spacing: -0.04em; color: #16181D; text-decoration: none; } .brand .bee { width: 40px; height: 40px; } .brand b { color: #16181D; } .brand .honey { color: #D17F03; } /* ── center links ── */ nav.links { display: flex; gap: 24px; margin-left: auto; font-weight: 600; font-size: 14.5px; color: #717683; } nav.links a { color: inherit; text-decoration: none; transition: color 0.15s; } nav.links a:hover { color: #16181D; } /* ── CTA "무역비서 무비" ── */ .cta-assist { display: inline-flex; align-items: center; gap: 7px; background: #3A3E48; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18); text-decoration: none; transition: background 0.15s; } .cta-assist:hover { background: #2D3038; } .cta-assist .bee { width: 18px; height: 18px; } /* ── responsive ── */ @media (max-width: 860px) { nav.links { display: none; } .cta-assist { margin-left: auto; } } @media (max-width: 680px) { .nav-wrap { padding: 13px 20px; } .brand { font-size: 24px; gap: 10px; } .brand .bee { width: 32px; height: 32px; } }