.color-pink {
    background-color: #ff6d96;
    color: white; /* 텍스트 색상 */
}

/* 폰트컬러 추가 */
.new-text-red {
    color: rgb(255, 85, 0);
}

.custom-offcanvas {
    width: 100%; /* 원하는 폭으로 조정 */
    max-width: 520px; /* 최대 폭을 지정할 수 있습니다 */
    margin: 0 auto; /* 중앙 정렬 */
}
    
.image-scroll-container {
    display: flex; /* 이미지들을 수평으로 나열 */
    overflow-x: auto; /* 수평 스크롤 허용 */
    white-space: nowrap; /* 줄 바꿈 방지 */
    padding: 10px; /* 컨테이너 여백 */
}

.reviewImageSZ {
    height: 7em; /* 이미지 높이 설정 */
    margin-right: 10px; /* 이미지 간격 조절 */
    flex-shrink: 0; /* 이미지가 축소되지 않도록 */
}

/* 별점 */
.avgStar {
    color: rgb(255, 85, 0);
    font-size: 16px; 
    font-weight: 800;
}

/* 평점 숫자 */
.avgText {
    color: rgb(0, 0, 0);
    font-size: 15px; 
    font-weight: 600;
}

/* 리뷰이미지 스크롤 좌우*/
#reviewImagesWrapper {
    overflow-x: auto; /* 수평 스크롤을 활성화 */
    white-space: nowrap; /* 이미지들이 한 줄로 나열되도록 설정 */
    width: 100%; /* 컨테이너의 너비를 100%로 설정 */
    border: 1px solid #ddd; /* 테두리 추가 (선택사항) */
    padding: 10px; /* 패딩 추가 (선택사항) */
}

/* 리뷰 이미지 스크롤 좌우*/
#reviewImagesContainer img {
    display: inline-block; /* 이미지를 가로로 나열 */
    max-width: 100%; /* 이미지 크기 조절 */
    margin-right: 10px; /* 이미지 간의 간격 설정 */
}

/* 이미지 스크롤 좌우*/
.ImagesWrapper {
    overflow-x: auto; /* 수평 스크롤을 활성화 */
    white-space: nowrap; /* 이미지들이 한 줄로 나열되도록 설정 */
    width: 100%; /* 컨테이너의 너비를 100%로 설정 */
    border: 1px solid #ddd; /* 테두리 추가 (선택사항) */
    padding: 10px; /* 패딩 추가 (선택사항) */
    box-sizing: border-box; /* 패딩 및 테두리를 포함하여 너비 계산 */
}

#goods_detailImageContainer {
    display: flex; /* 이미지가 가로로 나열되도록 설정 */
    align-items: center; /* 이미지를 수직으로 중앙에 배치 */
    height: 15em; /* 이미지 컨테이너의 높이 설정 */
}

/* 이미지 스크롤 좌우*/
#goods_detailImageContainer img {
    display: inline-block; /* 이미지를 가로로 나열 */
    max-height: 15em; /* 이미지 크기 조절 */
    margin-right: 10px; /* 이미지 간의 간격 설정 */
}

/* 체크박스 색상지정 */
.form-check-input:checked {
    border-color: black !important;
    background-color: black;
}

/* border-radius: 50%; 원형 배경 */

/* 별점관련 */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    font-size: 2.25rem;
    line-height: 2.5rem;
    justify-content: space-around;
    padding: 0 0.2em;
    text-align: center;
    width: 5em;
}

.star-rating input {
    display: none;
}

.star-rating label {
    -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 2.3px;
    -webkit-text-stroke-color: #2b2a29;
    cursor: pointer;
}

.star-rating :checked ~ label {
   -webkit-text-fill-color: gold;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
 -webkit-text-fill-color: #fff58c;
}


/* 메인페이지 css */

.carousel-inner {
    position: relative;
    width: 100%; /* 부모 컨테이너의 너비를 화면 너비에 맞춤 */
    height: 100%;
    overflow: hidden; /* 컨테이너의 오버플로우 숨김 */
  }

.carousel-item {
  position: relative;
  width: 100%; /* 컨테이너 너비 설정 */
  height: 500px; /* 전체 높이 지정 */
  overflow: hidden; /* 이미지가 부모 요소를 넘지 않도록 숨기기 */
}

.carousel-item .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffcccc; /* 상단 배경색 설정 */
  z-index: 1; /* 이미지 아래에 위치하도록 설정 */
  transition: background-color 1.5s ease; /* 배경색 전환 애니메이션 */
}

.carousel-item .background.bottom {
  background-color: #ffffff; /* 하단 배경색 (흰색) 설정 */
  position: absolute;
  bottom: 0; /* 컨테이너의 하단에 위치 */
  left: 0;
  width: 100%;

  height: 20%; /* 흰색 배경의 높이 조정 */
  z-index: 0; /* 이미지 위에 위치하도록 설정 */
}
/* top: 80%; 흰색 배경이 이미지 하단에만 보이도록 조정 */

.carousel-item img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 중앙에 정렬 및 위치 조정 */
  max-height: 90%; /* 이미지 높이 조정 */
  max-width: 100%; /* 이미지 너비 조정 */
  object-fit: contain; /* 이미지 비율 유지 */
  z-index: 2; /* 배경색 위에 위치하도록 설정 */
}

/* 배경 이미지와 색상, 반복 및 위치 설정 */
.bgPatternBlackAndWhite {
background: #2E2E2E repeat-y top url("/public/img/bgPatternBlack2.png");
background-size: contain;
}

/* carousel-item에 클래스 적용 */
.carousel-item {
/* 기본 배경색 지정 */
background-color: #ffcccc;
}

/* 배경 이미지 클래스 추가 */
.carousel-item.bg-pattern {
background: #2E2E2E repeat-y top url("/public/img/bgPatternBlack2.png");
background-size: contain;
}

/* badge1 */
.translate-middle{
  transform: translate(280%, -100%)!important;
}
/* badge2 */
.translate-middle2{
  transform: translate(-110%, -130%)!important;
}

.badge-container {
  position: relative;
}

.badge1 {
  position: absolute;
  top: 50%;
  left: 45%;
}

.badge2 {
  position: absolute;
  top: 55%;
  left: 20%;
}

/* 배송상태 */
.statusCircle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}