/* ===== COMPONENTS STYLES ===== */
/**
 * @file: components/navigation.css
 * @description: 네비게이션 관련 스타일
 * @components: 상단 네비게이션 바, 메뉴 아이템
 * @usage: 헤더 영역의 네비게이션 요소 스타일링
 */

/* 메뉴바 스타일 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
  height: 60px;
}

/* ===== COMPONENTS STYLES ===== */
/**
 * @file: components/navigation.css
 * @description: 헤더 관련 스타일
 * @components: 상단 헤더, 하단 헤더
 * @usage: 페이지 상단의 헤더 영역 스타일링
 */

/* 하단 헤더 */
.navbar-bottom {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 48px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/* 메뉴 스타일 */
.menu {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  padding: 0 70px;
}

/* 메뉴 아이템 스타일 */
.menu-item {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #666;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
}

/* ===== COMPONENTS STYLES ===== */
/**
 * @file: components/navigation.css
 * @description: 메뉴 상호작용 관련 스타일
 * @components: 언더라인 효과, 호버 효과
 * @usage: 메뉴 아이템의 상호작용 효과 정의
 */

/* 언더바 기본 스타일 */
.menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #1a73e8;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* 호버 시 언더바 효과 */
.menu-item:hover::after {
  width: 100%;
}

/* 활성화된 메뉴 아이템 스타일 */
.menu-item.active {
  color: #1a73e8;
}

/* 활성화된 메뉴의 언더바 스타일 */
.menu-item.active::after {
  width: 100%;
  background-color: #1a73e8;
}

/* ===== COMPONENTS STYLES ===== */
/**
 * @file: components/navigation.css
 * @description: 메뉴 관련 스타일
 * @components: 메뉴 아이템, 호버 효과
 * @usage: 클릭 시 언더바 이동 애니메이션 적용
 */
.menu-item.active::after {
  animation: moveUnderline 0.3s ease-in-out forwards;
}

/* ===== COMPONENTS STYLES ===== */
/**
 * @file: components/navigation.css
 * @description: 관리자 메뉴 관련 스타일
 * @components: 관리자 메뉴 아이템, 호버 효과
 * @usage: 관리자 전용 메뉴 및 인터페이스 스타일링
 */

/* 관리자 메뉴 스타일 */
.menu-item#adminMenu {
  color: #dc3545;
}

.menu-item#adminMenu:hover {
  color: #c82333;
}

.menu-item#adminMenu:hover::after {
  background-color: #dc3545;
  animation: moveUnderline 0.3s ease forwards;
}

.menu-item.adminMenu.active {
  color: #dc3545;
}

.menu-item.adminMenu.active::after {
  background-color: #dc3545;
  animation: moveUnderline 0.3s ease forwards;
}