/* ✅ 네비게이션 바 기본 스타일 */
.navbar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) !important;
  position: fixed;
  width: 100%;
  height: 48px;
  z-index: 1000;
  margin: 0 auto;
  padding: 0;
}
.navbar-nav{
  margin-left: 10px;
}
.nav-item{
  padding: 0px 4px;
}
.nav-link{
  font-size: 12pt;
}
.container-fluid {
  padding: 0;
  text-align: center;
  height: 48px;
}
.nav-bottom{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ✅ 스크롤 시 적용할 배경 스타일 */
.navbar.scrolled,
.container-fluid.scrolled {
  background-color: rgba(0, 0, 0, 0.95) !important;
  /* transition: background-color 0.3s ease-in-out; */
}




.index-logo {
  padding-top: 0px;
  display: flex;
  align-items: flex-start;
  height: 24px !important;
}

/* ✅ 네비게이션 링크 스타일 */
.navbar-brand {
  color: white !important;
  margin-left: 20px;
}

.navbar-nav .nav-link {
  color: white !important;
}

.navbar-nav .nav-link:hover {
  color: rgb(235, 0, 0) !important; /* 링크 호버 색상 */
}

/* ✅ 버튼 스타일 */
.btn-outline-secondary {
  color: white !important;
  border: 1px solid white !important;
  margin-right: 20px;
  border-radius: 30px;
  padding: 2px 10px;
  font-size: 10pt;
}

.btn-outline-secondary:hover {
  color: rgb(235, 0, 0) !important;
  border: 1px solid rgb(235, 0, 0) !important;
  box-shadow: 0 0 0 1px rgb(235, 0, 0);
}

/* ✅ 네비게이션 텍스트 */
.navbar-text {
  color: white !important;
  font-size: 12pt;
}

body {
  padding-top: 56px;
}

/* ✅ 햄버거 메뉴 스타일 */
.navbar-toggler {
  border: none;
  outline: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ✅ 햄버거 메뉴 호버 및 포커스 스타일 */
.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: transparent;
  border-radius: 30px;
  border: 0px solid transparent;
  outline: none;
  box-shadow: none;
}

/* ✅ 모바일 화면에서 네비게이션 메뉴 스타일 */
.navbar-collapse {
  justify-content: flex-end;
  background-color: transparent;
  border-radius: 0;
}

/* ✅ 햄버거 메뉴 활성화 시 배경 */
@media (max-width: 768px) {
  .navbar-collapse.show {
    background-color: transparent;
  }

  .navbar-brand {
    height: 48px;
    display: flex;
    align-items: center;
  }
.navbar-nav{
  margin-left:0;
}
  .container-fluid {
    height: 48px;
  }

  .container-fluid.show {
    background-color: transparent;
  }

@media (max-width: 768px) {
  /* ✅ Bootstrap 기본 애니메이션 제거 */
  .navbar-collapse {
    transition: none !important; /* ✅ 애니메이션 즉시 제거 */
  }

  /* ✅ 햄버거 버튼을 누르면 즉시 열림 */
  .navbar-collapse.show {
    display: block !important;
    height: auto !important;
  }

  /* ✅ 배경 변경 속도 조절 */
  .navbar,
  .container-fluid {
    transition: background-color 0s ease-in-out !important; /* 즉시 적용 */
  }

  /* ✅ 햄버거 버튼을 눌렀을 때 배경 적용 */
  .navbar.bg-active,
  .container-fluid.bg-active {
    background-color: rgba(0, 0, 0, 0.95) !important;
    padding-bottom: 100vh;
  }

  .nav-bottom{
    display: grid;
    justify-content: center;
    align-items: center;
  }
  #userWelcomeMessage, #myPageButton, #loginLogoutButton{
    width:35vw;
    padding: 0;
    margin: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  #userWelcomeMessage{
    margin-top:30px !important;
  }
  #myPageButton, #loginLogoutButton{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
}

@media (max-width: 768px) {
/* 전체 화면에서 가로 스크롤 방지 */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* 전체 화면이 밀리는 현상 방지 */
}

/* 썸네일을 감싸는 컨테이너: 화면 크기에 맞춤 */
.thumbnail-wrapper {
  width: 100%;
  max-width: 100vw;
  overflow: hidden; /* 썸네일이 넘치는 부분은 숨김 */
  position: relative;
  display: flex;
  align-items: center;
}

/* 썸네일 리스트: 원래 크기를 유지하면서 넘치는 부분 숨김 */
.thumbnails-container {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  width: fit-content; /* 내부 요소 크기에 맞춤 */
}

/* ✅ `product` 요소 크기와 비율 고정 */
.product {
  flex: 0 0 200px; /* 가로 크기 고정 */
  height: 100%; /* 원하는 높이 유지 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #f0f0f0; 확인용 배경 (필요하면 삭제) */
}

/* ✅ `thumbnail` 이미지 비율 유지 */
.thumbnail {
  width: 100%; /* `product` 크기에 맞게 */
  height: 100%;
  object-fit: cover; /* 비율 유지하면서 꽉 채움 */
}

/* 좌우 이동 버튼 스타일 */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.nav-button.left {
  left: 0;
}

.nav-button.right {
  right: 0;
}

  
  .footer {
    width: 100%;
    max-width: 100vw; /* 화면 너비 초과 방지 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* 가운데 정렬 */
    text-align: center;
    padding:0;
    margin-bottom: 40px;
  }
  
  .footer p {
    word-wrap: break-word;
    max-width: 90%;
    margin: 0 auto;
  }
  
}

}

/* ✅ 모바일에서 네비게이션 메뉴 아이템 간 구분선 */
.navbar-nav .nav-link {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar-nav .nav-link:last-child {
  border-bottom: none;
}

/* ✅ 오버레이 스타일 (햄버거 메뉴 열릴 때 배경 어둡게) */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.overlay.active {
  display: block;
}