/* [추가] #app-container에 모든 레이아웃 및 디자인 속성 적용 */
#app-container {
    font-family: 'Inter', sans-serif;
    /* 배경색 변경: 밝은 회색 -> 진한 배경색 */
    background-color: #1f2937; 
    height: 100%;    
    display: flex;    
    flex-direction: column;    
}

/* 공통 컨테이너 및 레이아웃 */
.max-w-7xl { max-width: 90%; /*1280px;*/ }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.sm\:px-6 { /* 640px 이상 */ }
.lg\:px-8 { /* 1024px 이상 */ }

/* 1. 상단 네비게이션 바 스타일 */
.header {
    /* 그림자 색상 조정: 진한 배경색 위에서 잘 보이도록 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    /* 배경색 변경: 흰색 -> 컴포넌트 배경색 */
    background-color: #374151;
    position: sticky;
    top: 0;
    z-index: 50;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem; /* 메뉴바 높이 */
}


.nav-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

 
/* 좌측 상호 스타일 */
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    /* 로고 색상 변경: 진한 녹색 -> 밝은 녹색 (강조색 1) */
    color: #84cc16; 
    letter-spacing: 0.05em;
    transition: color 150ms ease-in-out;
}


.logo:hover {
    /* 호버 색상 변경: 남색 -> 밝은 파란색 (강조색 2) */
    color: #3b82f6;
}
 
/* 중앙 메뉴 스타일 (데스크탑 전용) */
.main-menu-desktop {
    display: none;
    flex-grow: 1;
    justify-content: center;
    gap: 0; /* 드롭다운 구현을 위해 gap 제거 */
}
/* md:flex (768px 이상에서 적용) */
@media (min-width: 768px) {
    .main-menu-desktop {
        display: flex;
    }
}
 
/* 메인 메뉴 항목 (드롭다운 컨테이너) */
.main-menu-desktop > li {
    position: relative; /* 드롭다운 위치 기준 */
    padding: 0 1rem;
}
.main-menu-desktop > li > a {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    /* 텍스트 색상 변경: 어두운 회색 -> 밝은 회색 */
    color: #e5e7eb; 
    padding: 0.5rem 0;
    transition: color 150ms ease-in-out;
}
.main-menu-desktop > li > a:hover {
    /* 호버 색상 변경: 남색 -> 밝은 파란색 (강조색 2) */
    color: #3b82f6;
}
 
/* 드롭다운 서브 메뉴 스타일 */
.drop-down-menu {
    display: none; /* 기본 숨김 */
    position: absolute;
    top: 100%; /* 메인 메뉴 아래에 위치 */
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 */
    width: 12rem; /* 드롭다운 너비 */
    /* 배경색 변경: 흰색 -> 컴포넌트 배경색 */
    background-color: #374151;
    /* 그림자 색상 조정: 진한 배경색 위에서 잘 보이도록 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    border-radius: 0.375rem;
    z-index: 60;
    padding: 0.5rem 0;
}

/* 호버 시 드롭다운 표시 */
.main-menu-desktop > li:hover .drop-down-menu {
    display: block;
}

.drop-down-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 1.0rem;
    /* 텍스트 색상 변경: 어두운 회색 -> 밝은 회색 */
    color: #e5e7eb;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}
.drop-down-menu li a:hover {
    /* 배경색 변경: 밝은 남색 -> 연한 컴포넌트 강조 배경 */
    background-color: #4b5563; /* gray-600 */
    /* 호버 텍스트 색상 변경: 남색 -> 밝은 파란색 (강조색 2) */
    color: #3b82f6; 
}

/* 우측 유틸리티 링크 스타일 */
.auth-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.auth-links a {
    font-size: 0.9rem;
    font-weight: 400;
    /* 텍스트 색상 변경: 어두운 색 -> 밝은 회색 */
    color: #d1d5db !important; 
    transition: color 150ms ease-in-out;
}
.auth-links a:hover {
    /* 호버 색상 변경: 진한 회색 -> 흰색 */
    color: #ffffff;
}
.separator {
    /* 구분선 색상 변경: 밝은 회색 -> 어두운 배경 위에서 잘 보이는 색상 */
    color: #4b5563; 
}