/* ===== 고객 후기 슬라이더 - 통합된 안정적인 반응형 구현 ===== */

/* 모든 요소에 box-sizing 적용 */
.fourth-container *,
.fourth-container *::before,
.fourth-container *::after {
    box-sizing: border-box;
}

/* CSS 변수 - 단순화된 접근법 */
:root {
    --visible-cards: 4;
    --card-gap: 20px;
    --nav-button-width: 48px;
    --container-side-padding: var(--space-11);
    --review-card-width: 271px;
    --review-card-height: 414px;
    --review-track-width: calc(var(--review-card-width) * 4 + var(--card-gap) * 3);
}

@media screen and (max-width: 1024px) {
    :root {
        --visible-cards: 2;
        --review-track-width: calc(var(--review-card-width) * 2 + var(--card-gap));
    }
}

@media screen and (max-width: 768px) {
    :root {
        --visible-cards: 1;
        --review-track-width: var(--review-card-width);
        --nav-button-width: 40px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --nav-button-width: 32px;
    }
}

/* 메인 컨테이너 */

.fourth-container {
    background: var(--white);
    padding: var(--space-11) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* 슬라이더 네비게이션 프레임 - 완전 가운데 정렬 */
.fourth-container .frame-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1300px;
    gap: var(--space-5);
    position: relative;
    margin: 0 auto; /* 추가 가운데 정렬 보장 */
}

/* 모바일에서 네비게이션 프레임 간격 줄임 */
@media screen and (max-width: 768px) {
    .fourth-container .frame-1 {
        gap: calc(var(--space-3) + var(--space-1)); /* var(--space-3) + var(--space-1) = var(--space-4) */
    }
}

/* 네비게이션 버튼 - 원형 배경 제거 및 개선 */
.nav-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-gap);
    border-radius: 50%;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nav-button-width);
    height: var(--nav-button-width);
    flex-shrink: 0;
    z-index: 10;
}

.nav-button:hover:not(:disabled) {
    background: rgba(250, 140, 22, 0.1);
    transform: scale(1.1);
}

.nav-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.nav-button:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.nav-button img {
    width: var(--space-6);
    height: var(--space-6);
    transition: var(--transition-base);
    opacity: 0.7; /* 기본 상태에서 살짝 투명 */
}

.nav-button:hover img {
    opacity: 1; /* 호버 시 더 선명하게 */
    filter: brightness(1.2); /* 살짝 밝게 */
}

/* 모바일에서 네비게이션 버튼 최적화 */
@media screen and (max-width: 768px) {
    .nav-button {
        width: var(--space-8);
        height: var(--space-8);
        background: rgba(250, 140, 22, 0.1);
    }
    
    .nav-button:hover {
        background: rgba(250, 140, 22, 0.2);
    }
    
    .nav-button img {
        width: var(--space-5) !important;
        height: var(--space-5) !important;
    }
}

@media screen and (max-width: 480px) {
    .nav-button {
        width: 32px;
        height: 32px;
    }
    
    .nav-button img {
        width: var(--space-4) !important;
        height: var(--space-4) !important;
    }
}

/* 슬라이더 컨테이너 - 동적 크기 조정 */
.fourth-container .slider-container {
    width: min(100%, var(--review-track-width));
    max-width: var(--review-track-width);
    overflow: hidden; /* 네 장만 보이되 그림자가 잘리지 않도록 내부 패딩 사용 */
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 1rem 0;
}

@media screen and (max-width: 768px) {
    .fourth-container .slider-container {
        width: min(100%, var(--review-card-width));
        max-width: var(--review-card-width);
    }
}

@media screen and (max-width: 480px) {
    .fourth-container .slider-container {
        width: min(100%, var(--review-card-width));
        max-width: var(--review-card-width);
    }
}

/* 카드 래퍼 */
.fourth-container .content-box-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--card-gap);
    transition: transform var(--transition-base);
    will-change: transform;
    overflow: visible;
    width: 100%;
    position: relative;
    
    /* 전체 카드를 포함하는 너비 */
    width: max-content;
    align-items: stretch;
}

/* 모바일에서 카드 래퍼 최적화 */
@media screen and (max-width: 768px) {
    .fourth-container .content-box-wrapper {
        gap: 0; /* 모바일에서는 간격 완전 제거 */
    }
}

/* 개별 카드 스타일 - 통합 및 개선 */
/* .fourth-container .content-box {
    background: var(--white);
    border-radius: var(--radius-xxl);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: var(--review-card-width);
    min-height: var(--review-card-height);
    flex-shrink: 0;
    position: relative;
    transition: var(--transition-base);
    opacity: 1;
    box-sizing: border-box;

} */

.fourth-container .content-box:hover {
    /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); */
}

/* 반응형 카드 크기 조정 */
@media screen and (max-width: 1024px) {
    .fourth-container .content-box {
        width: clamp(240px, 40vw, var(--review-card-width));
    }
}

@media screen and (max-width: 768px) {
    .fourth-container .content-box {
        width: min(260px, 88vw);
    }
}

@media (max-width: 480px) {
    .fourth-container .content-box {
        width: min(240px, 86vw);
    }
}

/* 카드 이미지 영역 - 통합 및 개선 */
.fourth-container .placeholder-picture {
    background: var(--white);
    border-radius: var(--radius-xxl) var(--radius-xxl) 0 0;
    border: none;
    display: flex;
    flex-direction: row;
    gap: var(--space-gap);
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    height: 196px;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: .5rem;
}

.fourth-container .placeholder-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition-base);
}

/* 카드 콘텐츠 영역 */
.fourth-container .content {
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    flex-grow: 1;
}

/* 모바일에서 콘텐츠 영역 최적화 */
@media screen and (max-width: 768px) {
    .fourth-container .content {
        padding: var(--space-4) var(--space-4); /* 패딩 줄임 */
        gap: var(--space-3); /* 간격 줄임 */
    }
}

.fourth-container .title-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    width: 100%;
}

.fourth-container .category {
    color: var(--color-neutral-600);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fourth-container .title {
    color: var(--primary-color);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl-plus);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
}

/* 모바일에서 타이틀 최적화 */
@media screen and (max-width: 768px) {
    .fourth-container .title {
        font-size: var(--font-size-lg); /* 크기 줄임 */
        line-height: 1.2;
    }
}

.fourth-container .paragraph2 {
    color: var(--color-neutral-700);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    margin-top: var(--space-1);
    word-wrap: break-word; /* 긴 단어 줄바꿈 */
    word-break: break-word; /* 단어 내에서 줄바꿈 허용 */
    overflow-wrap: break-word; /* 최신 속성 */
}

/* 모바일에서 paragraph2 최적화 */
@media screen and (max-width: 768px) {
    .fourth-container .paragraph2 {
        font-size: 14px;
        line-height: 1.4;
        /* 3줄로 제한하고 초과 시 ellipsis */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.4em * 3); /* line-height * 줄 수 */
    }
}

/* 섹션 헤더 */
/* .fourth-container .section-text {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    text-align: center;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
} */

/* 버튼 스타일 */
.fourth-container .button {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: var(--space-2);
    padding: var(--space-4) 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    margin: 32px auto 0 auto;
}

/* Button hover styles moved to common.css for consistency */

.fourth-container .button-text {
    color: var(--white);
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 모바일 패딩 조정 */
@media screen and (max-width: 768px) {
    .fourth-container {
        padding: 60px var(--space-5);
        gap: 48px;
    }
}

/* 극소형 화면 추가 최적화 */
@media screen and (max-width: 320px) {
    :root {
        --visible-cards: 1;
        --card-gap: var(--space-2);
        --container-side-padding: var(--space-4);
        --nav-button-width: var(--space-8);
    }
    
    .fourth-container .content-box {
        min-width: 200px;
    }
    
    .fourth-container .placeholder-picture {
        height: 160px;
    }
    
    .fourth-container .content {
        padding: var(--space-4);
    }
    
    .fourth-container .secondary-headline {
        font-size: 28px;
    }
    
    .fourth-container .paragraph {
        font-size: 18px;
    }
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
    .nav-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .fourth-container .content-box:active {
        transform: scale(0.98);
    }
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
    .fourth-container .content-box-wrapper,
    .nav-button,
    .fourth-container .content-box,
    .fourth-container .placeholder-picture img {
        transition: none;
    }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .fourth-container .content-box {
        border-width: 2px;
        border-color: var(--text-strong);
    }

    .nav-button {
        border-width: 3px;
        border-color: var(--text-strong);
    }
}

/* 포커스 표시 개선 */
.fourth-container .content-box:focus-within {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}