/* 기본정보 필터 스타일 */
.basic-info-filters .card-header {
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

/* 기본정보 탭 스타일 */
.basic-info-tabs {
    margin-bottom: 15px;
    border-bottom: 2px solid #4a90e2;
}

.basic-info-tabs .nav-link {
    color: #666;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 10px 15px;
    margin-right: 5px;
    font-weight: 500;
    background-color: #f8f9fa;
}

.basic-info-tabs .nav-link.active {
    background-color: #4a90e2;
    color: white;
    border-color: #4a90e2;
}

.basic-info-tab-content {
    padding-top: 10px;
    background-color: #fff;
}

.basic-info-tab-content .p-3 {
    padding: 0.5rem !important;
}

.basic-info-tab-content .filter-item {
    margin-bottom: 5px;
}

/* 모바일 대응 - 기본정보 탭 */
@media (max-width: 768px) {
    .basic-info-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .basic-info-tabs .nav-item {
        flex: 0 0 auto;
    }
    
    .basic-info-tab-content {
        padding: 5px;
    }
    
    .basic-info-tab-content .p-3 {
        padding: 0.25rem !important;
    }
}

.basic-info-filters .card-body {
    padding: 1.25rem;
}

.filter-item {
    margin-bottom: 15px;
}

.filter-item-title {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

/* 탭 스타일 */
.review-groups-tabs {
    margin-bottom: 20px;
}

.review-tabs {
    margin-bottom: 15px;
    border-bottom: 2px solid #4a90e2;
}

.review-tabs .nav-link {
    color: #666;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 10px 15px;
    margin-right: 5px;
    font-weight: 500;
    background-color: #f8f9fa;
}

.review-tabs .nav-link.active {
    background-color: #4a90e2;
    color: white;
    border-color: #4a90e2;
}

.review-tab-content {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

/* 탭 반응형 처리 */
@media (max-width: 768px) {
    .review-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .review-tabs .nav-item {
        flex: 0 0 auto;
    }
    
    .review-tab-content {
        padding: 0;
        border: none;
        border-radius: 0;
    }
}

.rating-bar-container {
    position: relative;
    height: 36px;
    background: #f0f0f0;
    border-radius: 6px;
    overflow: hidden;
}

/* 단방향/양방향 배경 스타일 - 기본 회색 */
.star-rating.unidirectional .rating-bar-container {
    background: #f0f0f0;
}

/* 양방향 슬라이더 배경 - 중앙선 표시 */
.star-rating.bidirectional .rating-bar-container {
    background: #f0f0f0;
}

/* 양방향 슬라이더 중앙선 */
.star-rating.bidirectional .rating-bar-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: #999;
    transform: translateX(-50%);
    z-index: 1;
}

.rating-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.drag-handle {
    position: absolute;
    top: 0;
    width: 14px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    transform: translateX(-50%);
}

.drag-handle.left {
    background: #ff4444;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.drag-handle.right {
    background: #4a90e2;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 디폴트 상태: 투명한 범위 바 (색상 없음) */
.range-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: transparent;
    pointer-events: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

/* 핸들러 이동 후 활성화된 상태 - 단방향 */
.star-rating.unidirectional .range-bar.active {
    background: linear-gradient(to right, #64b5f6, #1976d2);
    opacity: 0.8;
}

/* 핸들러 이동 후 활성화된 상태 - 양방향 (마이너스 영역) */
.star-rating.bidirectional .range-bar.active.negative-range {
    background: linear-gradient(to right, #ff8a80, #f44336);
    opacity: 0.8;
}

/* 핸들러 이동 후 활성화된 상태 - 양방향 (플러스 영역) */
.star-rating.bidirectional .range-bar.active.positive-range {
    background: linear-gradient(to right, #64b5f6, #1976d2);
    opacity: 0.8;
}

/* 핸들러 이동 후 활성화된 상태 - 양방향 (마이너스+플러스 영역) */
.star-rating.bidirectional .range-bar.active.mixed-range {
    background: linear-gradient(to right, #ff8a80 0%, #f44336 40%, #64b5f6 60%, #1976d2 100%);
    opacity: 0.8;
}

.rating-grid {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 단방향/양방향 그리드 스타일 차별화 */
.rating-grid.bidirectional {
    justify-content: space-between;
}

.rating-grid.unidirectional {
    justify-content: space-between;
}

.rating-grid-line {
    position: relative;
    flex: 1;
    pointer-events: none;
}

.rating-grid-line:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(0,0,0,0.1);
}

/* 단방향 슬라이더의 왼쪽 핸들 위치 조정 */
.star-rating.unidirectional .drag-handle.left {
    min-left: 0%;
}

/* 별점 표시 스타일 */
.review-item-title {
    display: inline-block;
    margin-bottom: 3px;
    font-size: 0.95em;
}

/* 옵션 선택 스타일 */
.option-selection {
    margin-top: 5px;
}

.option-container {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 8px 12px;
}

.radio-options, .checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    background: white;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
}

.form-check-input {
    margin-right: 5px;
}

.form-check-label {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 0.9em;
}

.alert.alert-warning {
    padding: 8px 12px;
    font-size: 0.9em;
}

/* 검색 조건 표시 스타일 */
.search-conditions {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.search-conditions h5 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.search-conditions div {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* 비활성화된 요소 스타일 */
.disabled-container {
    opacity: 0.5;
    pointer-events: none;
}

.star-rating.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 평가 항목 간 여백 추가 */
.review-item {
    margin-bottom: 10px;
}

.review-item:last-child {
    margin-bottom: 0;
}

/* 모바일에서는 여백을 조금 줄임 */
@media (max-width: 767px) {
    .review-item {
        margin-bottom: 5px;
        padding-bottom: 12px;
    }
}

/* 항목 이미지 사이드 레이아웃 스타일 */
.review-item.has-item-image {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.item-image-side {
    width: 70px; /* 작은 크기로 설정 */
    margin-right: 8px;
    flex-shrink: 0;
}

.item-content-side {
    flex-grow: 1;
}

.item-detail-image {
    width: 100%;
    height: auto;
    max-height: 70px; /* 작은 크기로 설정 */
    border-radius: 4px;
    object-fit: cover;
}

/* 모바일 대응 - 더 작게 설정 */
@media (max-width: 767px) {
    .item-image-side {
        width: 50px; /* 모바일에서 더 작게 */
    }
    .item-detail-image {
        max-height: 50px; /* 모바일에서 더 작게 */
    }
}

/* 옵션 아이템 토글 스타일 */
.option-item {
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 3px;
    background-color: #f8f9fa;
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1.5;
    transition: all 0.2s ease;
    border: 1px solid #e6e6e6;
}

.option-item:hover {
    background-color: #e9ecef;
}

.option-item.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.option-item.active:hover {
    background-color: #0056b3;
}

.option-item.disabled-option {
    opacity: 0.5;
    cursor: not-allowed;
}

.option-item.disabled-option:hover {
    background-color: #f8f9fa;
}

/* 옵션 컨테이너 스타일 조정 */
.radio-options, .checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
}

/* 옵션 아이템 토글 스타일 */
.option-item {
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 3px;
    background-color: #f8f9fa;
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1.5;
    transition: all 0.2s ease;
    border: 1px solid #e6e6e6;
}

.option-item:hover {
    background-color: #e9ecef;
}

.option-item.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.option-item.active:hover {
    background-color: #0056b3;
}

.option-item.disabled-option {
    opacity: 0.5;
    cursor: not-allowed;
}

.option-item.disabled-option:hover {
    background-color: #f8f9fa;
}

/* 옵션 컨테이너 스타일 조정 */
.radio-options, .checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 2px;
}

.option-container {
    padding: 0;
}

.basic-info-tab-content {
    padding-top: 3px;
    padding-bottom: 3px;
}

.tab-pane .p-2 {
    padding: 0.2rem !important;
}

.tab-pane .filter-item {
    margin-bottom: 3px;
}
.option-container {
    padding: 0;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* 혹시 다른 컨테이너에 배경색이 있을 경우를 대비 */
.option-selection {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}