/* BASIC css start */
/* ==========================================================
   [넣을 위치]  PC 쇼핑몰 > 메인 페이지 CSS 파일 (파일 전체를 이걸로 교체)
   [바뀐 부분]  맨 아래 "메인페이지 상품 리뷰 별점" 블록만 수정
   [효과]       분류 페이지와 똑같이 100개 미만 반쪽 별 / 300개 이상 무지개 별 + 분홍 숫자
   [주의]       덮어쓰기 전에 기존 CSS는 메모장에 백업해 두세요
   ========================================================== */

/* 메인 롤링 배너 */
.mainBan { }
.mainBan .sliderWrap {position:relative; min-width:1920px; height: 792px; overflow:hidden;}
.mainBan .sliderWrap .sliderArea {margin-left:-1500px;position:absolute;top:20%;left:50%;width:3000px;text-align: center; margin-top : 35px;}

.mainBan .sliderArea .bx-pager{position:absolute;bottom: 100px;left:0;right:0;z-index:60;text-align:center; font-size:20px; }
.mainBan .sliderArea .bx-pager-item{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;display:inline-block;position:relative;}
.mainBan .sliderArea .bx-pager-link{display:inline-block;width: 12px;height: 12px;font-size:0;margin: 0 5px;background-color: #3c3c3c;border-radius: 50%;}
.mainBan .sliderArea .bx-pager-link.active{background-color: #e4e4e4;}

/* 상품 타이틀 */
.h_title h3 { font-size: 28px; color:#2e2e2e; margin:100px 0 35px; text-align:center;}

#newWrap { width:1200px; margin:0 auto; }

.item-wrap .item-cont2 {overflow: hidden; margin-left:-20px;}
.item-wrap .item-cont2 .item-list {float:left;width: 285px; margin: 0 0 30px 20px;}
.item-wrap .item-cont2 .item-list .thumb { position: relative; }
.item-wrap .item-cont2 .item-list .thumb a { display:block; overflow:hidden }
.item-wrap .item-cont2 .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
.item-wrap .item-cont2 .item-list .thumb a:hover img {-webkit-transform: scale(1.15);transform: scale(1.15) }
.item-wrap .item-cont2 .item-list .thumb .clChip {margin-top:5px; }
.item-wrap .item-cont2 .item-list .thumb .clChip span {display: inline-block;width: 14px;height: 4px;}

/* MD'S PICK  롤링상품진열 */
.mdWrap { margin:100px 0;}
.mdPickWrap { position:relative; width:1200px; margin:0 auto;}
.mdPickWrap .h_title { float:left; position: absolute; left: 70px; top: 45px;}
.mdPickWrap .h_title h3 { margin: 0;}
.mdPickWrap .h_title h3 span {font-size: 13px; font-weight: normal; display:block;text-align:center;}
.mdPickWrap .h_title h3 span:before { content:''; width:30px;height:1px; background:#000; display:block;margin:14px auto;}
.mdPickWrap .sliderArea{position:relative; width:910px; float:right;}
.mdPickWrap .bx-pager { position: absolute; left: -196px; bottom: 30px; }
.mdPickWrap .bx-pager .bx-pager-item {display:inline-block; }
.mdPickWrap .bx-pager .bx-pager-item a { font-size:0; width:10px; height:10px; border-radius:50%; background:#8d8d8d;display:block;margin:0 4px;}
.mdPickWrap .bx-pager .bx-pager-item a.active { background:#000;}
.mdPickWrap .bx-controls-direction{color:#111;}
.mdPickWrap .bx-controls-direction .bx-next { right:-60px; }
.mdPickWrap .bx-controls-direction .bx-prev { left:-60px;}
.mdPickWrap .bx-controls-direction .bx-next,
.mdPickWrap .bx-controls-direction .bx-prev{position:absolute;top: 44%; display:inline-block;font-size: 30px;width: 40px;height: 40px;color:#8c8c8c;background-image: none; text-align:center; }
.mdPickWrap .bx-controls-direction .bx-prev:hover,
.mdPickWrap .bx-controls-direction .bx-next:hover { color:#2c2c2c; }
.mdPickWrap .bx-controls-direction i {line-height: 45px;}

.mdPickWrap .list { }
.mdPickWrap .list .thumb {position:relative; display:block; overflow:hidden; text-align: center;}
.mdPickWrap .list .thumb img { width:100%;}
.mdPickWrap .list .thumb:hover .prd-info { display:block; -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
.mdPickWrap .list .thumb .prd-info { display:none; position:absolute; right:0; bottom:0; width:100%; height:60px; background-color:rgba(255, 255, 255, 0.7);padding:20px 0 0;}
.mdPickWrap .list .thumb .prd-info:hover { background-color:rgba(255, 255, 255, 0.7);}
.mdPickWrap .prd-info .prd-name {font-size: 15px; }
.mdPickWrap .prd-info .prd-price del { color:#999; font-weight: normal; font-size: 14px; margin-right: 5px;}
.mdPickWrap .prd-info .prd-price {padding: 6px 0;font-size:15px;}
.mdPickWrap .list .thumb:hover .prd-preview { display:block; -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
.mdPickWrap .list .prd-preview {  display:none;position:absolute; left:0;right:0;bottom:-24px;;}
.mdPickWrap .list .prd-preview a { display:block;font-size:18px; line-height:40px; text-align:center;}

/* MD'S PICK 리뷰 카운터 (26-09-22 추가) */
.mdPickWrap .prd-info {
    display: flex;
    flex-direction: column;
}
.mdPickWrap .list .thumb:hover .prd-info {
    display: flex;
}
.mdPickWrap .prd-info .prd-price {
    order: 1;
}
.mdPickWrap .prd-info .prd-review-cnt {
    order: 2;
    font-size: 12px;
    color: #999;
    padding: 2px 0;
    margin-top: 2px;
}
.mdPickWrap .prd-info .prd-review-cnt .sum-review {
    display: inline-block;
}

/* Video Area */
.videoWrap { margin-top:30px; position:relative; width: 100%; background:#f8f8f8 }
.videoWrap .videoInner { width: 1200px; margin: 0 auto ; padding: 100px 0;}
.videoWrap .videoInner .video { float:left;}
.videoWrap .videoInner .video iframe { width: 780px; height:430px;border:0; }

.add1Product {float:left;  margin:0 0 0 90px;  position:relative;width:285px}
.add1Product .item-list { text-align:center;}
.add1Product .item-list .thumb { position:relative; width:285px;border-radius:100%;overflow:hidden; }
.add1Product .item-list .thumb img { width:285px;}
.add1Product .item-list .thumb:hover .prd-preview { display:block; -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
.add1Product .item-list .thumb .prd-preview { display:none; position:absolute; left:50%; bottom:42%; width:40px; height:40px; margin-left:-20px;border-radius:100%;background-color:rgba(255, 255, 255, 0.9);}
.add1Product .item-list .thumb .prd-preview a { display:block;font-size:18px; line-height:40px; text-align:center;}
.add1Product .item-list .thumb .prd-preview:hover { background-color:rgba(255, 255, 255, 1);}
.add1Product .item-list .prd-name { padding:26px 0 0;font-size:16px; }
.add1Product .item-list .prd-subname { margin-top:8px;font-size:14px;color:#999; }
.add1Product .item-list .prd-price { padding:15px 0 0; font-size:16px; }
.add1Product .item-list .prd-price del { color:#999; font-size:14px; margin-right:5px; }

/* SPEICAL ITEM */
#specialWrap { width:1200px; margin:100px auto 0; }

.item-wrap .item-cont {overflow: hidden; margin-left:-20px;}
.item-wrap .item-cont .item-list {float:left;width: 255px; margin: 0 0 30px 20px;}
.item-wrap .item-cont .item-list .thumb { position: relative; }
.item-wrap .item-cont .item-list .thumb a { display:block; overflow:hidden }
.item-wrap .item-cont .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
.item-wrap .item-cont .item-list .thumb a:hover img {-webkit-transform: scale(1.15);transform: scale(1.15) }
.item-wrap .item-cont .item-list .thumb .clChip {margin-top:5px; }
.item-wrap .item-cont .item-list .thumb .clChip span {display: inline-block;width: 14px;height: 4px;}

/* 롱배너 */
.bannerArea { margin:60px auto 0; }

#ftWrap { margin:0 !important; }

/* 하단 카테고리 제목 및 부가설명 폰트사이즈 25-08-21 */
h3.sub-desc {
    font-size: 16px !important;
    color: #666 !important;
    margin-top: -10px !important;
    margin-bottom: 30px !important;
    font-weight: normal !important;
    line-height: 1.4;
}

/* 중간 이미지 제목배너 정렬변경 25-08-21 */
.recommend-banner-img {
  display: block !important;
  margin: 160px auto 40px auto !important;
  max-width: 1200px;
}

/* 상품진열 섬네일 가운데 정렬 */
.item-wrap {
  max-width: 1200px;
  margin: 0 auto !important;
  width: 100%;
}


/* 더보기 도형 관련 소스 */
/* ========================================================== */
/* ▶ 더보기 버튼 스타일 (다이어리 더보기 등 공통 적용) */
/* ========================================================== */

/* 버튼 전체 박스 영역 */
.section .more_item a {
  display: flex;                   /* flexbox로 중앙 정렬 */
  align-items: center;             /* 세로축 가운데 정렬 */
  justify-content: center;         /* 가로축 가운데 정렬 */
  gap: 6px;                        /* 아이콘과 텍스트 사이 간격 */
  border: 1px solid #e4e4e4;       /* 버튼 외곽선 */
  padding: 12px 30px;              /* 버튼 안쪽 여백 (상하 12px, 좌우 30px) */
  border-radius: 6px;              /* 버튼 모서리 둥글기 */
  text-decoration: none;           /* 기본 a 태그 밑줄 제거 */
  transition: all 0.2s;            /* hover 시 부드럽게 전환 */
  background: #fff;                /* 버튼 배경색 */

  /* ====== 버튼 길이 관련 ====== */
  width: auto !important;          /* 내용 길이에 따라 자동 */
  min-width: 200px;                /* 버튼 최소 길이 (← 이 숫자 바꿔서 조절 가능) */
  max-width: 320px;                /* 버튼 최대 길이 (원하는 경우, 없애도 됨) */
  margin: 0 auto;                  /* 가로 가운데 정렬 */
  box-sizing: border-box;          /* padding 포함 크기 계산 */
}

/* 버튼 안 텍스트 */
.section .more_item a p {
  margin: 0;                       /* 불필요한 기본 여백 제거 */
  font-size: 15px;                 /* 글자 크기 */
  color: #333;                     /* 글자 색상 */
  font-family: 'Noto Sans KR', sans-serif; /* 폰트 */
  letter-spacing: 0.5px;           /* 글자 간격 */
  line-height: 1.4;                /* 줄 간격 */
  font-weight: 400;                /* 글자 굵기 */
  text-align: center;              /* 글자 가운데 정렬 */
  flex: 1;                         /* 텍스트를 flex 안에서 균형 배치 */
}

/* 버튼 hover 효과 */
.section .more_item a:hover {
  border-color: #000;              /* 마우스 올리면 테두리 색 */
  background-color: #f9f9f9;       /* 마우스 올리면 배경 */
}

.section .more_item a:hover p {
  color: #000;                     /* 마우스 올리면 글자색 */
}


/* 신상 배너 이미지 영역 */

.bannerArea {
  width: 100vw;      /* 브라우저 전체 너비 */
  margin: 20px 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* 가운데 보정 */
}

.bannerArea img {
  display: block;
  width: 100%;       /* 부모(.bannerArea)에 맞게 채움 */
  height: auto;
}


/* 제목 설명 하단 검은도형 캡슐 소스 25-08-22 */
/* 강조문구 도형 스타일 (캡슐형 버튼) */
.capsule-caption {
  display: inline-block;               /* 요소를 인라인 블록으로 → 글자 크기만큼 차지하면서 박스 스타일 적용 가능 */
  background-color: #000;              /* 배경색: 검정 */
  color: #fff;                         /* 글자색: 흰색 */

  /* 내부 여백 (padding) → 글자와 박스 테두리 사이 간격 */
  padding-top: 10px;                   /* 위쪽 안쪽 여백 */
  padding-right: 24px;                 /* 오른쪽 안쪽 여백 */
  padding-bottom: 10px;                /* 아래쪽 안쪽 여백 */
  padding-left: 24px;                  /* 왼쪽 안쪽 여백 */

  border-radius: 999px;                /* 모서리를 둥글게 → 아주 크게 주면 완전한 캡슐 형태 */
  font-size: 15px;                     /* 글자 크기 */
  font-weight: 600;                    /* 글자 굵기 (semi-bold) */
  text-align: center;                  /* 글자 가운데 정렬 */
  font-family: 'Noto Sans KR', sans-serif; /* 글꼴 지정 */
  cursor: default;                     /* 마우스 올렸을 때 기본 포인터 유지 (버튼 아님 표시) */

  /* 외부 여백 (margin) → 요소와 다른 요소 사이 간격 */
  margin-top: 6px;                     /* 위쪽 바깥 여백 */
  margin-bottom: 40px;                 /* 아래쪽 바깥 여백 (상품 썸네일과의 간격) */
  margin-right: 0;                     /* 오른쪽 바깥 여백 */  
  margin-left: 0;                      /* 왼쪽 바깥 여백 */
}

/* 호버 효과 (옵션) */
.capsule-caption:hover {
  background-color: #222;              /* 마우스 올리면 배경색을 좀 더 연한 검정으로 변경 */
  color: #f1f1f1;                      /* 글자색도 미묘하게 회색 톤으로 변경 */
}


/* ★★★★ 밑에 부터는 TEST 용 곧 지울것  초기 상태: 안 보임 */
/* ----------------------------- */
/* 스크롤 시 샤르륵 페이드 인 효과 */
/* ----------------------------- */
.fade-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

.fade-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------- */
/* 카운트다운 배너 전용 스타일 */
/* ----------------------------- */

/* 전체 배너 영역을 가운데 정렬 */
.countdown-banner {
  text-align: center;  /* 내부 요소들(링크, 이미지, 박스)을 가운데 정렬 */
}

/* 배너 안의 링크 스타일 */
.countdown-link {
  display: inline-block; /* 블록화하여 margin/padding 적용 가능 */
}

/* 배너 이미지 스타일 */
.countdown-img {
  max-width: 1000px;   /* 이미지 최대 크기 제한 (PC 기준) */
  width: 100%;         /* 반응형: 화면에 맞춰 늘어남 */
  height: auto;        /* 원본 비율 유지 */
  border-radius: 12px; /* 이미지 모서리 둥글게 처리 */
  display: block;      /* 블록 요소화 (줄바꿈됨) */
  margin: 0 auto;      /* 좌우 자동 마진 → 가운데 정렬 */
}

/* 이미지 밑 하단에 표시되는 카운트다운 박스 */
.countdown-box {
  display: inline-block;              /* 가로 크기만 차지, inline 속성처럼 한 줄 배치 */
  margin-top: 16px;                   /* 이미지와의 간격 */
  background: orange;                 /* 배경색 오렌지 */
  color: #fff;                        /* 글자색 흰색 */
  font-weight: bold;                  /* 글자 두껍게 */
  font-size: 22px;                    /* 글자 크기 */
  padding: 12px 24px;                 /* 내부 여백: 위아래 12px, 좌우 24px */
  border-radius: 30px;                /* 캡슐 모양 둥근 모서리 */
  white-space: nowrap;                /* 줄바꿈 방지 (한 줄 유지) */
  box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* 살짝 그림자 효과 */
}


.engrave-container {
  position: relative;
  display: inline-block;
}

.engrave-img {
  display: block;
  max-width: 100%;
}

/* ========================================================== */
/* ▶ 상품 리뷰 카운터 (26-09-22 추가)   item-cont2 안 상품들 공통 */
/* ========================================================== */
#specialWrap .item-wrap .item-cont2 .item-list .prd-review-cnt {
    display: flex;
    align-items: center;
    margin: 4px 0 6px;
    color: #999;
    font-size: 12px;
}

#specialWrap .item-wrap .item-cont2 .item-list .prd-review-cnt .sum-review {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* 동영상 옆 add1Product 영역 리뷰 카운터 */
.add1Product .item-list .prd-review-cnt {
    margin-top: 6px;
    font-size: 13px;
    color: #999;
}

/* ▶ 가격 아래에 리뷰가 오도록 순서 조정 (분류페이지와 동일) */
#specialWrap .item-wrap .item-cont2 .item-list dd > ul,
.add1Product .item-list dd > ul {
    display: flex;
    flex-direction: column;
}

#specialWrap .item-wrap .item-cont2 .item-list dd > ul > li.prd-price,
.add1Product .item-list dd > ul > li.prd-price {
    order: 1;
}

#specialWrap .item-wrap .item-cont2 .item-list dd > ul > li.prd-review-cnt,
.add1Product .item-list dd > ul > li.prd-review-cnt {
    order: 2;
    margin-top: 4px;
}

/* ========================================================== */
/* ▶ 메인페이지 상품 리뷰 별점 (분류페이지와 동일한 모양)         */
/*                                                            */
/*  ★ 수정 이유                                               */
/*  리뷰 JS가 half-stars / full-stars / rainbow-stars 클래스를  */
/*  .sum-review 가 아니라 바깥의 .prd-review 요소에 붙임.       */
/*  그런데 예전 CSS는 ".sum-review.rainbow-stars" 처럼          */
/*  .sum-review 에 클래스가 붙어 있다고 가정해서 쓰여 있어      */
/*  반쪽 별 / 무지개 / 분홍 숫자가 전혀 적용되지 않았음.        */
/*  → 선택자를 ".prd-review.xxx" 로 바꿔서 해결                 */
/* ========================================================== */

.prd-review .review-stars {
    color: #e5a900 !important;
    font-size: 13px;
    letter-spacing: 1px;
    vertical-align: middle;
    display: inline-block;
    white-space: nowrap;
    margin-right: 4px;
}

.prd-review .star {
    display: inline-block;
    color: #e5a900;
    font-style: normal;
    line-height: 1;
}

/* 별/숫자에 씌워진 링크의 기본 파란색·밑줄 제거 (분류페이지와 동일) */
.prd-review .review-stars-link,
.prd-review .review-count-link {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}

.prd-review .review-stars-link:hover,
.prd-review .review-count-link:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* 리뷰 숫자 */
.prd-review .review-count {
    color: #555 !important;
    font-size: 12px;
    margin-left: 2px;
    vertical-align: middle;
}

/* 0~99개 : 별 4.5개 (마지막 별 절반만 노란색) */
.prd-review.half-stars .star {
    color: #e5a900;
}

.prd-review.half-stars .star.half {
    background: linear-gradient(
        to right,
        #e5a900 0%,
        #e5a900 50%,
        #d9d9d9 50%,
        #d9d9d9 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 100~299개 : 별 5개 모두 노란색 */
.prd-review.full-stars .star {
    color: #e5a900;
}

/* 300개 이상 : 무지개 색상 회전 + 분홍 굵은 숫자 */
@keyframes rainbow-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.prd-review.rainbow-stars .review-stars {
    color: #e5a900 !important;
    animation: rainbow-rotate 5s linear infinite;
}

.prd-review.rainbow-stars .star {
    color: #e5a900;
}

.prd-review.rainbow-stars .review-count {
    color: #ff3cac !important;
    font-weight: 700;
}
/* BASIC css end */