/* ===================================================
   네비게이션 바 자동 접힘 효과 (클릭 가능)
   - 일정 시간 후 자동으로 위로 접힘
   - 마우스를 올리면 펼쳐지고 클릭 가능
   - 마우스를 떼면 다시 접힘
   - 부드러운 애니메이션 효과
   =================================================== */

/* 네비게이션 기본 상태 (펼쳐진 상태) */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    opacity: 1;
    z-index: 1000;
}

/* 자동 접힘 상태 (페이지 로드 3초 후) */
nav.auto-collapsed {
    transform: translateY(-85%);
    opacity: 0.3;
    pointer-events: auto; /* 클릭 가능하도록 유지 */
}

/* 네비게이션에 마우스 호버 시 완전히 펼쳐짐 */
nav:hover,
nav.auto-collapsed:hover {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto;
}

/* 접힌 상태에서도 하단 부분은 보이고 클릭 가능 */
nav.auto-collapsed {
    cursor: pointer;
}

/* 네비게이션 컨테이너 내부 요소들도 부드럽게 전환 */
nav .container {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto; /* 항상 클릭 가능 */
}

/* 네비게이션 메뉴 아이템은 항상 클릭 가능 */
nav .nav-menu,
nav .nav-menu a,
nav .nav-brand {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto; /* 항상 클릭 가능 */
    cursor: pointer;
}

/* 자동 접힘 상태에서 메뉴 아이템 스타일 */
nav.auto-collapsed .nav-menu,
nav.auto-collapsed .nav-brand {
    opacity: 0.4;
    transform: translateY(-3px);
}

/* 호버 시 메뉴 아이템 완전히 보임 */
nav:hover .nav-menu,
nav:hover .nav-brand,
nav.auto-collapsed:hover .nav-menu,
nav.auto-collapsed:hover .nav-brand {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 페이지 스크롤 시에도 자동 접힘 효과 유지 */
body.scrolled nav.auto-collapsed {
    transform: translateY(-85%);
    opacity: 0.3;
}

body.scrolled nav:hover,
body.scrolled nav.auto-collapsed:hover {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* 모바일에서는 접힘 효과 비활성화 */
@media (max-width: 768px) {
    nav.auto-collapsed {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    
    nav.auto-collapsed .nav-menu,
    nav.auto-collapsed .nav-brand {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* 네비게이션이 접힌 상태에서 하단 그림자 효과 */
nav.auto-collapsed {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

nav:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 부드러운 전환을 위한 will-change 속성 */
nav {
    will-change: transform, opacity;
}

/* 모든 링크와 버튼은 항상 클릭 가능 */
nav a,
nav button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 접힌 상태에서 보이는 하단 부분 스타일링 */
nav.auto-collapsed::after {
    content: '▼';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(212, 175, 55, 0.6);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

nav.auto-collapsed:hover::after {
    opacity: 0;
}