/* ============================================================
   SUNDORI DRONE — 공통 스타일 (nav / mobile menu / footer)
   이 파일 한 곳만 수정하면 모든 페이지의 메뉴 스타일이 함께 바뀝니다.
   ============================================================ */
:root { --sdr-blue: #4A90D9; }

/* ── 상단 Nav ───────────────────────────────────────────── */
#main-nav {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    background-color: transparent;
    transform: translateY(0);
}
#main-nav.nav-hidden { transform: translateY(-110%); }
#main-nav .menu-link { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65); }
#main-nav .logo img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)); }

/* ── 메뉴 링크 밑줄 효과 ─────────────────────────────────── */
.menu-link {
    position: relative;
    letter-spacing: 0.15em;
    transition: color 0.3s ease;
}
.menu-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--sdr-blue);
    transition: width 0.3s ease;
}
.menu-link:hover::after,
.menu-link.active-nav::after { width: 100%; }
.menu-link.active-nav { color: #ffffff !important; }

/* ── 모바일 풀스크린 메뉴 ────────────────────────────────── */
#mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 40;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
#mobile-menu.open { display: flex; }

/* ── 부드러운 스크롤 (Hero↔본문 스냅은 components.js가 방향 기반으로 처리) ── */
html { scroll-behavior: smooth; }

.mobile-menu-link {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}
.mobile-menu-link:hover { color: #ffffff; }
.mobile-menu-link.active-mobile { color: var(--sdr-blue); }