/* [추가] #app-container에 모든 레이아웃 및 디자인 속성 적용 */
#app-container {
    /* 배경색 변경: #004455 (진한 청록색) */
    background-color: #004455; 
}

/* 공통 컨테이너 및 레이아웃 (색상 관련 없음, 유지) */

/* 1. 상단 네비게이션 바 스타일 */
.header {
    /* 그림자 색상 조정: 진한 배경색 위에서 잘 보이도록 */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.7), 0 2px 4px -2px rgb(0 0 0 / 0.7);
    /* 배경색 변경: 컴포넌트 배경색 (#004455보다 밝은 청록색) */
    background-color: #005f73;
}
.nav-container {}

.nav-container ul {}

 
/* 좌측 상호 스타일 */
.logo {
    /* 로고 색상 변경: 밝은 하늘색 (강조색 1) */
    color: #66ccff; 
}


.logo:hover {
    /* 호버 색상 변경: 밝은 노란색 (강조색 2) */
    color: #ffc107;
}
 
/* 중앙 메뉴 스타일 (데스크탑 전용) */
.main-menu-desktop {
}
/* md:flex (768px 이상에서 적용) */
@media (min-width: 768px) {
}
 
/* 메인 메뉴 항목 (드롭다운 컨테이너) */
.main-menu-desktop > li {
}
.main-menu-desktop > li > a {
    /* 텍스트 색상 변경: 밝은 텍스트 */
    color: #e5f4f8; 
}
.main-menu-desktop > li > a:hover {
    /* 호버 색상 변경: 밝은 노란색 (강조색 2) */
    color: #ffc107;
}
 
/* 드롭다운 서브 메뉴 스타일 */
.drop-down-menu {
    /* 배경색 변경: 컴포넌트 배경색 */
    background-color: #005f73;
    /* 그림자 색상 조정 */
    box-shadow: 0 4px 6px -1p rgb(0 0 0 / 0.7), 0 2px 4px -2px rgb(0 0 0 / 0.7);
}

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

.drop-down-menu li a {
    /* 텍스트 색상 변경: 밝은 텍스트 */
    color: #e5f4f8;
}
.drop-down-menu li a:hover {
    /* 배경색 변경: 호버 배경 (컴포넌트 배경보다 조금 더 밝게) */
    background-color: #007a99; 
    /* 호버 텍스트 색상 변경: 밝은 노란색 (강조색 2) */
    color: #ffc107; 
}

/* 우측 유틸리티 링크 스타일 */
.auth-links {
}
.auth-links a {
    /* 텍스트 색상 변경: 밝은 텍스트 */
    color: #c0e0e8 !important; 
}
.auth-links a:hover {
    /* 호버 색상 변경: 거의 흰색 */
    color: #ffffff;
}
.separator {
    /* 구분선 색상 변경: 어두운 배경 위에서 잘 보이는 색상 */
    color: #007a99; 
}