/* ========================================
   Navigation Section 스타일
   Navigation Section Styles for Sulwhasoo Holiday Festa
   ======================================== */

/* Navigation Section 기본 스타일 */
.navigation {
    max-width: 480px; /* 프로젝트 규칙: 480px 고정 너비 */
    margin: 0 auto; /* 중앙 정렬 */
    background: var(--sulwhasoo-orange);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    padding: 0;
}

/* Navigation 컨테이너 */
.nav-container {
    max-width: 480px; /* 프로젝트 규칙: 480px 고정 너비 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;           /* 드래그 커서 표시 */
    user-select: none;      /* 텍스트 선택 방지 */
    scroll-behavior: smooth; /* 부드러운 스크롤 */
    scroll-snap-type: x mandatory; /* 스냅 스크롤 */
}

/* 드래그 중 커서 변경 */
.nav-container:active {
    cursor: grabbing;      /* 드래그 중 커서 */
}

/* Navigation 바 */
.nav-bar {
    width: 100%;
    /* min-width: max-content; 제거 - 480px 내에서 제한 */
    padding: 0;
    margin: 0;
}

/* Navigation 리스트 */
.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    white-space: nowrap;
    width: max-content;     /* 100% → max-content */
    min-width: 480px;       /* 최소 너비 480px 보장 */
    justify-content: flex-start; /* space-between → flex-start */
}

/* Navigation 아이템 */
.nav-item {
    flex: none;            /* flex: 1 → flex: none */
    margin: 0;
    padding: 0;
    text-align: center; /* 텍스트 중앙 정렬 */
    white-space: nowrap;   /* 추가 */
    min-width: 80px;       /* 각 메뉴 최소 너비 보장 */
    scroll-snap-align: start; /* 스냅 포인트 */
}

/* Navigation 링크 */
.nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-xs); /* 480px 내에서 최적화된 패딩 */
    color: var(--sulwhasoo-white);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 0.9rem; /* 1rem → 0.9rem (폰트 크기 축소) */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* 0.5px → 0.3px (자간 축소) */
    transition: all var(--transition-medium);
    position: relative;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Navigation 링크 호버 효과 */
.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sulwhasoo-white);        /* 명확한 흰색 지정 */
    font-weight: 700;                      /* 볼드 강조 (500 → 700) */
    transform: translateY(-1px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Navigation 링크 활성 상태 */
.nav-link.active {
    background: var(--sulwhasoo-orange);  /* 명확한 오렌지 배경 */
    color: var(--sulwhasoo-white);       /* 명확한 흰색 글자 */
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Navigation 링크 포커스 상태 */
.nav-link:focus {
    outline: 2px solid var(--sulwhasoo-white);
    outline-offset: -2px;
    background: rgba(255, 255, 255, 0.15);
}

/* 스크롤바 숨기기 (Webkit 브라우저) */
.nav-container::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.nav-container::-webkit-scrollbar-track {
    background: transparent;
}

.nav-container::-webkit-scrollbar-thumb {
    background: transparent;
}

/* 스크롤바 숨기기 (Firefox) */
.nav-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    .nav-link {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 1.125rem; /* 18px로 변경 - 모바일 최적화 (+2px) */
        letter-spacing: 0.5px;
    }
    
    .nav-list {
        gap: 0;
    }
}

/* 태블릿 최적화 */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 1.25rem; /* 20px - 태블릿 최적화 (+2px) */
    }
}

/* 데스크톱 최적화 */
@media (min-width: 1025px) {
    .nav-link {
        padding: var(--spacing-sm) var(--spacing-md); /* 모바일과 동일한 패딩 */
        font-size: 1.125rem; /* 22px → 18px (모바일과 동일한 크기) */
        letter-spacing: 0.3px; /* 자간 축소로 공간 절약 */
    }
    
    .nav-item {
        min-width: 60px; /* 80px → 60px (최소 너비 축소) */
    }
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
    .nav-link {
        transition: none;
    }
    
    .nav-link:hover {
        transform: none;
    }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .navigation {
        background: var(--sulwhasoo-orange);
        border-bottom: 2px solid var(--sulwhasoo-white);
    }
    
    .nav-link {
        color: var(--sulwhasoo-white);
        font-weight: 600;
    }
    
    .nav-link:hover {
        background: var(--sulwhasoo-white);
        color: var(--sulwhasoo-orange);
        font-weight: 700;  /* 볼드 추가 */
    }
    
    .nav-link.active {
        background: var(--sulwhasoo-orange);
        color: var(--sulwhasoo-white);
    }
}

/* 스크린 리더 지원 */
.nav-link {
    text-decoration: none;
}

/* 키보드 네비게이션 */
.nav-link:focus-visible {
    outline: 3px solid var(--sulwhasoo-white);
    outline-offset: -3px;
    background: rgba(255, 255, 255, 0.2);
}