/* 리뷰 크기 조절 */
.single-product #reviews {
    width: 70% !important;
    margin: 0 auto; 
}



/* 리뷰 상자 */
.comment-text {
    background-color: #ffffff; /* 배경색 (테마에 따라 다를 수 있음) */
    padding: 20px; /* 내부 여백 */
    margin-bottom: 15px; /* 리뷰 사이 간격 */
    margin-left: 0px !important;
    /* **모서리를 둥글게** */
    border-radius: 12px; 
    
    /* 리뷰 상자를 입체적으로 보이게 하는 그림자 (선택 사항) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
    
    /* 아바타와 텍스트를 나란히 배치하기 위한 Flexbox 사용 */
    display: flex;
    gap: 15px; /* 아바타와 텍스트 사이 간격 */
}

/* 글 작성자 */
#reviews .verified {
    display: none !important;
}

/* 추천 버튼 문구 */
#reviews .cr-voting-cont.cr-voting-cont-uni::before {
    content: "도움이 되셨나요? "; /* 원하는 문구 삽입 */
    color: #333;
    margin-right: 15px; /* 버튼과의 간격 */
    font-size: 14px; /* 글씨 크기 조정 */
}

#reviews .cr-ajax-reviews-add-review {
    font-size: 18px !important;
}

/* 별점 */

.cr-overall-rating-wrap {
    /* 가상 요소의 기준점 설정 */
    position: relative;
    /* 내용과 선 사이 간격 확보 */
    margin-right: 20px; 
}

.cr-overall-rating-wrap::after {
    content: ""; /* 가상 요소는 content 속성이 필수 */
    /* 수직 구분선 모양 정의 */
    width: 1px; /* 얇은 선 두께 */
    background-color: #ddd; /* 선 색상 */
    /* 위치 지정 */
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    right: -10px; /* margin-right 값의 절반 정도 */
}

.cr-overall-rating-wrap .cr-average-rating span {
    font-size: 48px;
    font-weight: 700;
    color: #ff6b00;
}

.cr-average-rating-stars {
    display: flex;
    margin-top: 8px;
    gap: 2px;
}
.cr-average-rating-stars svg {
    width: 24px;
    height: 24px;
    color: #ffb800;
}

.cr-total-rating-count {
    font-size: 14px;
    color: #bbb;
    margin-top: 6px;
}

/* 추가 별점? */
#reviews .crf-custom-question-rating-cont {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 16px;
}

/* 막대 그래프 */
.ivole-summaryBox {
    flex: 1.2;
}

.ivole-histogramTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.ivole-histogramRow {
    height: 20px;
}

.ivole-histogramCell1 {
    width: 40px;
    font-size: 13px;
    color: #ccc;
}

.ivole-histogramCell2 {
    width: 80%;
}

.ivole-meter {
    background-color: #333;
    border-radius: 10px;
    height: 6px;
    overflow: hidden;
}

.ivole-meter-bar {
    background: linear-gradient(to right, #ff4d4d, #ff0000);
    height: 100%;
    border-radius: 10px;
}

.ivole-histogramCell3 {
    text-align: right;
    font-size: 13px;
    color: #aaa;
}

/* 리뷰 추가 버튼 */
.cr-ajax-reviews-add-review {
    margin-top: 15px;
    background-color: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.cr-ajax-reviews-add-review:hover {
    background-color: #333;
}

/* 설명 정보 리뷰 탭 */
.single-product .wc-tabs {
    /* 1. 고정 위치 지정 */
    position: sticky !important;  
    /* 2. 화면 상단(Top) 0px 위치에 고정 */
    top: 0; 
    /* 3. 스크롤 시 탭이 다른 요소 위로 보이도록 z-index 설정 */
    z-index: 999;
    /* 4. 배경색을 지정하여 아래 내용이 비치지 않도록 방지 */
    background-color: #ffffff; 
    /* 5. (선택 사항) 약간의 그림자를 넣어 경계를 명확하게 만듦 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    list-style: none;
}

/* 탭 항목 텍스트 (a) 스타일 조정 */
.single-product .tabs.wc-tabs li a {
    /* 링크 영역을 블록으로 확장하여 클릭 영역 확대 */
    display: block !important;
    
    /* 텍스트 중앙 정렬 */
    text-align: center;
    
    /* 탭의 위아래 여백 추가 (클릭 영역 확대) */
    padding: 15px 20px !important; 
}

#reviews .cr-count-row-count {
    display: none !important;
}

/* 2. 상위 컨테이너를 Flexbox로 설정하여 정렬 메뉴를 오른쪽 끝으로 이동 */
#reviews .cr-count-row {
    display: flex;
    justify-content: flex-end !important; /* 오른쪽 끝 정렬 */
    align-items: center; 
}

/* 검색 필터 위치 조정 */
.cr-search-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.cr-search-filter-row .cr-search-wrap {
    flex: 1 1 60%;
    min-width: 220px;
}

.cr-search-filter-row .cr-filter-wrap {
    flex: 0 1 auto;
    text-align: right;
}
.cr-search-filter-row .cr-ajax-search {
    width: 100%;
    max-width: 300px;
    font-size: 16px !important;
}


/* 페이징 */
#reviews .woocommerce-pagination .page-numbers{
    border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
    border-right: none !important;
}

/* 페이지 번호 버튼 스타일 */
#reviews .woocommerce-pagination .page-numbers li a,
#reviews .woocommerce-pagination .page-numbers li span {
    display: inline-block;

    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s ease;
}

  /* 현재 페이지 */
  #reviews .woocommerce-pagination .page-numbers li .current {
    background-color: #333;
    color: #fff;
    border-color: #333;
    cursor: default;
}

/* 호버 시 효과 */
#reviews .woocommerce-pagination .page-numbers li a:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* 이전/다음 화살표 살짝 다르게 */
#reviews .woocommerce-pagination .page-numbers .next,
#reviews .woocommerce-pagination .page-numbers .prev {
    font-weight: bold;
}


/* 텍스트 내용 전체를 감싸는 컨테이너 */
.cr-review-text-container {
    margin-top: 5px; /* 상단 여백 (필요시 조정) */
}

/* 텍스트 내용 영역: 3줄 높이로 제한 */
.cr-review-text-content {
    font-size: 16px;
    line-height: 1.5em !important; /* 실제 줄 높이로 변경 (매우 중요) */
    
    /* 3줄 높이 계산: 1.5em * 3줄 = 4.5em */
    max-height: 4.5em; /* 3줄의 높이로 제한 */
    overflow: hidden;  /* 3줄을 넘는 텍스트는 숨김 */
    transition: max-height 0.3s ease-out; /* 부드러운 펼치기 효과 */
}

/* 텍스트가 펼쳐진 상태 (JavaScript가 이 클래스를 추가/제거함) */
.cr-review-text-content.expanded {
    max-height: none !important; /* 높이 제한 해제 (텍스트 전체 표시) */
}

/* 더보기/숨기기 버튼 스타일 */
.cr-read-more-btn {
    background: none;
    border: none;
    color: #0073aa; 
    cursor: pointer;
    padding: 0;
    margin-top: 5px;
    font-weight: bold;
    display: block; /* 버튼을 한 줄에 배치 */
}

.cr-review-form-rating .cr-review-form-rating-label .required {
    display: none;
}

/* ------------------------------------------------ */
/* 1. 기본 레이블 스타일 덮어쓰기 (Absolute 해제) */
/* ------------------------------------------------ */

/* 플러그인이 적용하는 절대 위치 스타일을 강제로 해제합니다. */
.cr-review-form-wrap .cr-review-form-comment .cr-review-form-lbl,
.cr-review-form-wrap .cr-review-form-name .cr-review-form-lbl,
.cr-review-form-wrap .cr-review-form-email .cr-review-form-lbl,
.cr-review-form-wrap .cr-review-form-rating-overall .cr-review-form-rating-label {
    /* 원래 스타일 해제 */
    position: static !important; /* Absolute 해제 */
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
    background-color: transparent !important; /* 배경색 제거 */
    padding: 0 !important;
    margin: 0 !important; /* 외부 마진 제거 */
    
    /* 새 테이블 레이아웃을 위해 필요한 스타일 */
    line-height: normal !important;
    height: auto !important;

    /* 왼쪽 열 스타일 */
    font-weight: bold;
    color: #333;
    padding-right: 15px; /* 오른쪽 입력 필드와의 간격 */
    text-align: center !important;
}

.cr-review-form-item,
.cr-review-form-rating,
.cr-review-form-comment,
.cr-review-form-ne,
.cr-review-form-buttons {
    max-width: 100% !important;
}

.cr-review-form-name,
.cr-review-form-email {
    width: 100% !important;
}

.cr-review-form-rating,
.cr-review-form-comment, 
.cr-review-form-name,
.cr-review-form-email {
    display: grid;
    grid-template-columns: 15% 1fr; /* 2열로 배치, 각 열 동일 비율 */
    column-gap: 15px;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.cr-review-form-name .cr-review-form-txt,
.cr-review-form-email .cr-review-form-txt,
.cr-review-form-comment .cr-review-form-comment-txt {
    width: 100%; 
    box-sizing: border-box !important; 
    min-width: 0;
}

.cr-review-form-ne {
    display: flex;
    flex-direction: column; /* 세로 방향으로 정렬 */
    gap: 10px; /* 요소 사이 간격 */
}

.cr-review-form-submit,
.cr-review-form-cancel {
    background-color: black !important;
    max-width: 30% !important;
    color: white !important;
}
.cr-review-form-buttons {
    justify-content: center;
}

.cr-review-form-rating-label,
.cr-review-form-comment .cr-review-form-lbl,
.cr-review-form-name .cr-review-form-lbl,
.cr-review-form-email .cr-review-form-lbl {
    display: flex !important;
    font-size: 16px !important;
    align-items: center !important;
    justify-content: center;
}

.cr-review-form-name .cr-review-form-txt,
.cr-review-form-email .cr-review-form-txt {
    max-width: 500px;
    pointer-events: none; /* 클릭, 입력 모두 막음 */
}


.cr-review-form-rating,
.cr-review-form-comment, 
.cr-review-form-name,
.cr-review-form-email {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 10px 0px !important;
	border-bottom: 1px solid #E5E9EB;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-add-review {
    background-color: black !important;
    background: none;
    color: white !important;
    padding: 12px 8px
}

.cr-overall-rating-wrap .cr-average-rating span {
    color: #000000 !important;
}

.crstar-rating-svg .cr-rating-icon-frnt .cr-rating-icon{
    fill: black !important;
}
.cr-review-form-rating-inner .cr-rating-act path {
    fill: black !important;
}

.ivole-meter .ivole-meter-bar {
    background-color: black !important;
    background: none;
}

/* .cr-review-form-rating-overall .cr-review-form-rating.cr-review-form-error .cr-review-form-rating-cont .cr-review-form-rating-inner {
    background-color: red !important;
} */

.cr-onsite-ratings .cr-review-form-field-error, 
.cr-review-form-rating-overall .cr-review-form-field-error, 
.cr-onsite-questions .cr-onsite-question .cr-review-form-field-error, 
.cr-ajax-reviews-review-form .cr-review-form-field-error, 
.cr-reviews-grid .cr-review-form-field-error, 
.cr-qna-block .cr-review-form-field-error {
    /* 텍스트 색상 및 글꼴 크기 설정 */
    grid-column: 2 / 3;
    color: #cc0000 !important;
}




@media (max-width: 768px) {
    .single-product #reviews {
        width: 100% !important; /* 너비를 100%로 설정 */
        margin: 0 auto; 
    }
    /* 1. 탭 목록 컨테이너 (UL 요소) */
    .woocommerce div.product .woocommerce-tabs ul.tabs, 
    .single-product .wc-tabs {
        /* 내용물이 넘치면 가로 스크롤바를 보이게 합니다. */
        overflow-x: auto !important; 
        white-space: nowrap !important; 
        width: 100% !important; 
        position: sticky !important; 
        padding-left: 0 !important;
    }
    
    /* 2. 각 탭 항목 (LI 요소) */
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        width: 30% !important; 
        display: inline-block !important; 
        float: none !important;
    }
}