/* 1. 외부 폰트 로드 */
@import url('https://fonts.googleapis.com/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&display=swap');

/* 2. 전역 변수 설정 (Scout 전용 옐로우 테마 반영) */
:root {
    --nav-height: 90px; /* index와 동일하게 90px 고정 */
    --primary-indigo: #6366f1;
    --primary-yellow: #eab308;
    --cursor-x: 50%;
    --cursor-y: 50%;
}

/* 3. 기본 레이아웃 (Scout 전용 리셋) */
html { 
    scroll-behavior: smooth; 
}

body { 
    font-family: 'Pretendard', sans-serif; 
    background: #F8FAFC; 
    color: #1e293b; 
    overflow-x: hidden; 
    padding-top: var(--nav-height) !important;
}

/* ==========================================================================
   4. 통합 내비게이션 바 (완전 밀착 + 거대 로고 규격 반영)
   ========================================================================== */
#navbar {
    position: fixed !important;
    top: 0; left: 0; width: 100%;
    z-index: 99999 !important; 
    height: var(--nav-height);
    /* 인스타 스타일 유리 질감 적용 */
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 스크롤 시 높이 축소 효과 (덜컹거림 없이 부드럽게) */
#navbar.shadow-md, #navbar.scrolled {
    height: 80px; 
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
}

/* 네비게이션 내부 컨테이너 (양 끝 밀착을 위해 max-width 해제 및 padding 축소) */
.nav-container {
    width: 100%;
    max-width: 100% !important; /* 벽 끝까지 붙이기 위해 해제 */
    margin: 0 auto;
    padding: 0 0.5rem !important; /* index와 동일한 완전 밀착 여백 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* [좌측] 로고 영역 - 왼쪽 벽 밀착 */
.nav-left {
    flex: 1 1 0% !important;
    display: flex;
    justify-content: flex-start;
}

.nav-left img {
    height: 60px !important;
    width: auto;
    object-fit: contain;
}

/* 데스크탑에서 거대 로고 규격 적용 */
@media (min-width: 768px) {
    .nav-left img { 
        height: 65px !important; 
    }
}

.nav-left span {
    font-size: 1.8rem !important;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

/* [중앙] 메뉴 영역 - 정중앙 유지 */
.nav-center {
    flex: none !important;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

/* [우측] 로그인/유저 정보 영역 - 오른쪽 벽 밀착 */
.nav-right {
    flex: 1 1 0% !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

/* 메뉴 링크 스타일 (콤팩트 가이드 반영) */
.nav-link-item {
    position: relative;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    white-space: nowrap;
}

/* Scout 전용 활성화 컬러 (옐로우 테마) */
.nav-link-item:hover, .nav-link-item.active { 
    color: var(--primary-yellow) !important; 
}

.nav-link-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; width: 0; height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.nav-link-item:hover::after, .nav-link-item.active::after { 
    width: 100%; 
}

/* ==========================================================================
   5. Scout Studio 고유 배경 및 컴포넌트
   ========================================================================== */

/* Aurora Background (옐로우 테마 색감 반영) */
.aurora-bg {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: -1;
    background: linear-gradient(135deg, #fefce8 0%, #fafaf9 25%, #fffbeb 50%, #fefce8 100%);
}

/* Fluid Background (인터랙션 마우스 커서 추적 유지) */
.fluid-bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    background: radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(234, 179, 8, 0.08) 0%, transparent 40%);
}

/* Glassmorphism Cards (투명도 및 호버 이펙트 규격 반영) */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2rem;
}

.glass-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 30px -10px rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

/* Scout 헤더 문구 정규화 (정갈한 1.6rem) */
header h2 {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.4 !important;
    text-align: center;
    color: #1e293b;
    margin-top: 2rem;
}

/* 서체 설정 */
.font-serif { 
    font-family: 'Noto Serif KR', serif; 
}

/* 비활성화 버튼 디자인 */
button:disabled { 
    cursor: not-allowed; 
}

/* 텍스트 줄바꿈 방지 */
.break-keep { 
    word-break: keep-all; 
}

/* ==========================================================================
   6. 스크롤바 커스텀 및 애니메이션
   ========================================================================== */
   
/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar,
::-webkit-scrollbar { 
    width: 4px; 
}

@media (min-width: 768px) {
    .custom-scrollbar::-webkit-scrollbar,
    ::-webkit-scrollbar { 
        width: 6px; 
    }
}

.custom-scrollbar::-webkit-scrollbar-track,
::-webkit-scrollbar-track { 
    background: transparent; 
}

.custom-scrollbar::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb { 
    background: #E2E8F0; 
    border-radius: 10px; 
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover { 
    background: #CBD5E1; 
}

/* Animations */
.reveal { 
    opacity: 0; 
    transform: translateY(20px);
    transition: all 0.6s ease-out; 
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

@keyframes fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

@keyframes slide-in-from-bottom-8 { 
    from { transform: translateY(3rem); opacity: 0; } 
    to { transform: translateY(0); opacity: 1; } 
}

.animate-in { 
    animation-duration: 800ms; 
    animation-fill-mode: both; 
}

.fade-in { 
    animation-name: fade-in; 
}

.slide-in-from-bottom-8 { 
    animation-name: slide-in-from-bottom-8; 
}

/* ==========================================================================
   7. 미디어 쿼리 (반응형 최적화)
   ========================================================================== */
@media (max-width: 1024px) {
    #navbar { height: 75px !important; }
    .nav-container { padding: 0 1rem !important; }
    .nav-center { display: none !important; } /* 태블릿/모바일에서 중앙 메뉴 숨김 */
}

@media (max-width: 768px) {
    header h2 { font-size: 1.6rem !important; }
}