/* 헤더 전체 컨테이너 */
.header-container {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  background-color: #2c3a47; 
  padding: 10px 20px;
  position: relative; /* ★ 중요: 자식 요소(타이틀)를 중앙에 띄우기 위한 기준점 역할 */
}

/* 로고 이미지 크기 조정 */
.logo img {
  height: 50px; 
}

/* 우측 메뉴 컨테이너 */
.header-right {
  display: flex;
  align-items: center;
  /* 기존에 있던 gap: 30px; 은 타이틀이 빠져나갔으므로 지워도 됩니다. */
}

/* 사이트 타이틀 (화면 중앙 고정) */
.site-title {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  margin: 0; 
  white-space: nowrap; 
  
  /* ★ 핵심: 화면 정중앙에 고정하는 마법의 코드 */
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
}

/* 네비게이션 메뉴 컨테이너 */
.nav-menu {
  display: flex;
  gap: 5px; 
}

/* 개별 네비게이션 버튼 (기존과 동일) */
.nav-btn {
  color: #ffffff;
  text-decoration: none;
  background-color: #3b4b5b; 
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 4px; 
  white-space: nowrap;
}

.nav-btn:hover {
  background-color: #4a5d73;
}