.header {
  background-color: transparent; /* 배경을 투명으로 설정 */
  position: relative; /* 배너가 헤더에 겹치지 않도록 설정 */
  z-index: 10; /* 배너보다 위로 배치 */
  display: flex;
  justify-content: center; /* 가로로 중앙 정렬 */
  align-items: center; /* 세로로 중앙 정렬 */
  height: 75px; /* 헤더의 높이를 직접 설정 */
}

/* 로고 스타일 */
.OPmartlogo {
  aspect-ratio: 180/75;
  object-position: center;
  margin-top: 10px;
  margin-right: 7rem; /* 로고는 왼쪽 정렬, 조금 더 여유롭게 설정 */
  z-index: -1;
}

/* 네비게이션 스타일 */
.navbar {
  padding: 0.25rem 0.5rem; /* 세로 두께를 더 줄임 */
}

/* 리스트 스타일 */
.navList {
  display: flex;
  flex-wrap: unset; /* 넘칠 경우 줄바꿈 */
  justify-content: center;
  list-style: none;
  gap: 1rem;
  align-items: center;
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  text-overflow: ellipsis; /* 텍스트 잘림 시 "..." 표시 */
}

/* Link 컴포넌트 내의 a 태그 스타일 제거 */
.navbar a {
  color: inherit; /* 부모 요소의 색상 상속 */
  text-decoration: none; /* 밑줄 제거 */
}

/* 각 링크 스타일 */
.navItem {
  font-size: 1.2rem;
  color: black;
  text-decoration: none;
  text-shadow: 1px 1.5px 2px rgb(171, 171, 171);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
  cursor: pointer;
  max-width: 100%;
  transition: transform 0.3s ease;
}

.navItem:hover {
  .navList {
    gap: 1rem;
  }
  color: #ff0000; /* hover시 색상 변경 */
  scale: 110%;
  text-shadow: 1px 1.5px 2px rgb(0, 0, 0);
}

/* 반응형 스타일 */
@media (max-width: 1366px) {
  .navItem {
    font-size: 0.9rem; /* 노트북에서 폰트 크기 조정 */
  }
}

@media (max-width: 1024px) {
  .navItem {
    font-size: 0.85rem; /* 태블릿에서 폰트 크기 조정 */
  }

  .OPmartlogo {
    margin-right: 0; /* 로고 왼쪽 정렬을 해제 */
  }
}

/* 모바일 환경 (768px 이하) */
@media (max-width: 730px) {
  .header {
    height: 85px;
    flex-wrap: wrap; /* 화면 크기에 맞춰 줄바꿈 허용 */
    justify-content: center; /* 메뉴 항목 중앙 정렬 */
  }

  .OPmartlogo {
    margin-bottom: -1.5rem;
    text-align: center; /* 로고를 가운데 정렬 */
  }

  .navList {
    gap: 1.5rem; /* 항목 간격 조정 */
    padding: 0;
    margin-bottom: -0.5rem;
  }

  .navItem {
    font-size: 0.9rem; /* 가독성을 위해 글씨 크기 조정 */
    flex: 1 1 auto; /* 항목 크기 자동 조정 */
    text-align: center; /* 텍스트 가운데 정렬 */
    max-width: 120px; /* 최소 너비 설정 */
  }

  .navItem:hover {
    .navList {
      gap: 1rem;
    }
    scale: 100%;
    text-shadow: 1px 1.5px 2px rgb(0, 0, 0);
  }
}

@media (max-width: 600px) {
  .OPmartlogo {
    margin-top: 0rem;
    margin-bottom: -0.5rem;
    text-align: center; /* 로고를 가운데 정렬 */
  }
  .navItem {
    font-size: 0.88rem; /* 가독성을 위해 글씨 크기 조정 */
    text-align: center; /* 텍스트 가운데 정렬 */
  }
}

@media (max-width: 480px) {
  .header {
    width: 100vw;
  }
  .navList {
    gap: 0.8rem; /* 항목 간격 조정 */
  }
  .navItem {
    font-size: 0.88rem; /* 가독성을 위해 글씨 크기 조정 */

    max-width: 180px; /* 최소 너비 설정 */
  }
  .navItem:hover {
    .navList {
      gap: 0rem;
    }
    text-shadow: 1px 1.5px 2px rgb(0, 0, 0);

    .header {
      overflow-x: hidden;
    }
  }
}

@media (max-width: 435px) {
  .navList {
    gap: 0.8rem; /* 항목 간격 조정 */
  }

  .navItem {
    font-size: 0.75rem; /* 가독성을 위해 글씨 크기 조정 */
  }
}

@media (max-width: 400px) {
  .navList {
    gap: 0.7rem; /* 항목 간격 조정 */
  }

  .navItem {
    font-size: 0.7rem; /* 가독성을 위해 글씨 크기 조정 */
  }
}

@media (max-width: 370px) {
  .navList {
    gap: 0.5rem; /* 항목 간격 조정 */
  }
  .navItem:hover {
    font-size: 0.8rem;
  }

  .navItem {
    font-size: 0.65rem; /* 가독성을 위해 글씨 크기 조정 */
  }
}

@media (max-width: 300px) {
  .navList {
    gap: 0.35rem; /* 항목 간격 조정 */
  }
  .navItem {
    font-size: 0.55rem; /* 가독성을 위해 글씨 크기 조정 */
  }
}

@media (max-width: 250px) {
  .navItem {
    font-size: 0.43rem; /* 가독성을 위해 글씨 크기 조정 */
  }
}