/* ─── 카드 이미지 ─── */
.common-card .card-image {
    display: block;
    width: 100%;
    aspect-ratio: 1/1; /* 🎯 1:1 정사각형 비율 유지 */
    object-fit: cover;
}

/* ─── 카드 내용 영역 ─── */
.common-card .card-content {
    padding: 18px; /* 🎯 패딩 유지 */
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1; /* 🎯 남은 공간을 모두 차지 */
    justify-content: space-between;
    min-height: 0;
}


/* 🎯 flex 아이템이 /* ═══════════════════════════════════════════════════════════════
   🎨 CLARTE 공통 카드 시스템 (common-card.css)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 기본 카드 스타일 ─── */
.common-card {
    display: flex;
    flex-direction: column;
    background: var(--input-bg);
    border: 1px solid #e5eaf5;
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    /* 🎯 고정 비율 제거 - 내용에 따라 유연하게 조정 */
    min-height: 280px; /* 🎯 최소 높이만 설정 (130px 내용 + 150px 최소 이미지) */
}

.common-card:hover {
    transform: translateY(-4px);
}

/* ─── 카드 이미지 ─── */
.common-card .card-image {
    display: block;
    width: 100%;
    aspect-ratio: 1/1; /* 🎯 1:1 정사각형 비율 유지 */
    object-fit: cover;
    flex-shrink: 1; /* 🎯 이미지가 우선적으로 줄어들도록 */
}

/* ─── 카드 내용 영역 ─── */
.common-card .card-content {
    padding: 18px; /* 🎯 패딩 고정 */
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
    min-height: 140px;
    max-height: 140px;
    flex-shrink: 0; /* 🎯 내용 영역은 줄어들지 않도록 */
}

/* ─── 상품명/제목 ─── */
.common-card .card-title {
    font-size: 15px; /* 🎯 원래 크기 유지 */
    font-weight: 400; /* 🎯 두께 줄임 (600 → 500) */
    line-height: 1.4; /* 🎯 라인 높이 자연스럽게 */
    margin-bottom: 16px; /* 🎯 여백 확대 (12px → 16px) */
    overflow: hidden;
    color: #333; /* 🎯 색상 명시적 지정 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 🎯 최대 2줄까지 표시 */
    -webkit-box-orient: vertical;
    white-space: normal; /* 🎯 줄바꿈 허용 */
    text-overflow: ellipsis;
    height: 42px; /* 🎯 2줄 높이 고정 (15px * 1.4 * 2) */
}

/* ─── 가격 정보 ─── */
.common-card .card-original-price {
    font-size: 13px; /* 🎯 원래대로 복구 */
    font-weight: 400; /* 🎯 일반 두께 */
    color: #999; /* 🎯 회색으로 명시적 지정 */
    text-decoration: line-through;
    margin-bottom: 8px; /* 🎯 마진 확대 (6px → 8px) */
}

.common-card .card-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px; /* 🎯 간격 조정 */
}

.common-card .card-discountPrice {
    font-size: 18px; /* 🎯 원래 크기 유지 */
    color: #e74c3c; /* 🎯 빨간색 명시적 지정 */
    font-weight: 700; /* 🎯 할인율은 강조 */
}

.common-card .card-final-price {
    font-size: 18px; /* 🎯 원래 크기 유지 */
    font-weight: 700; /* 🎯 두께 줄임 (700 → 600) */
    color: #333; /* 🎯 진한 회색 */
}

/* ─── 리뷰 카드 전용 스타일 ─── */
.common-card .card-review-content {
    font-size: 13px;
    line-height: 1.5;
    max-height: 48px; /* 두 줄 고정 */
    overflow: hidden;
    margin-bottom: 10px;
}

.common-card .card-stars {
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--star-rating);
}

/* ═══════════════════════════════════════════════════════════════
   📱 그리드 레이아웃 시스템
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Grid 방식 (상품 목록 페이지용) - 고정 크기 그리드 ─── */
.product-grid {
    display: grid;
    gap: var(--gap, 20px);
    justify-content: start;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* 🎯 부모 컨테이너 너비를 벗어나지 않도록 */
    max-width: 100%; /* 🎯 최대 너비 제한 */

    /* 🎯 고정 크기 4열 그리드 - 카드 개수와 상관없이 일정한 크기 유지 */
    grid-template-columns: repeat(auto-fit, minmax(calc(25% - var(--gap, 20px) * 3 / 4), 1fr));
    grid-auto-rows: auto;
}

/* ─── 4열 그리드 (Flexbox 방식) - 고정 크기 ─── */
.card-grid-4 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 20px);
    justify-content: flex-start;
    width: 100%; /* 🎯 부모 컨테이너 너비를 벗어나지 않도록 */
    max-width: 100%; /* 🎯 최대 너비 제한 */
}

.card-grid-4 .common-card {
    /* 🎯 카드 개수와 상관없이 항상 4열 기준 크기 유지 */
    flex: 0 0 calc(25% - var(--gap, 20px) * 3 / 4);
    width: calc(25% - var(--gap, 20px) * 3 / 4);
    min-width: 0; /* 🎯 flex-shrink 허용 */
    max-width: calc(25% - var(--gap, 20px) * 3 / 4); /* 🎯 컨테이너 벗어남 방지 */
}

/* ─── 슬라이더 내 카드 ─── */
.blue-wrap .slider-track .common-card {
    flex: 0 0 280px; /* 슬라이더에서는 고정 너비 유지 */
    scroll-snap-align: start;
}

/* ═══════════════════════════════════════════════════════════════
   📱 반응형 디자인 (세밀한 브레이크포인트)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 큰 데스크톱 (1400px 이상) - 4열 고정 크기 ─── */
@media (min-width: 1400px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(25% - var(--gap, 20px) * 3 / 4), calc(25% - var(--gap, 20px) * 3 / 4)));
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(25% - var(--gap, 20px) * 3 / 4);
        width: calc(25% - var(--gap, 20px) * 3 / 4);
        max-width: calc(25% - var(--gap, 20px) * 3 / 4);
    }
}

/* ─── 데스크톱 (1200px - 1399px) - 4열 고정 크기 ─── */
@media (min-width: 1200px) and (max-width: 1399px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(25% - var(--gap, 20px) * 3 / 4), calc(25% - var(--gap, 20px) * 3 / 4)));
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(25% - var(--gap, 20px) * 3 / 4);
        width: calc(25% - var(--gap, 20px) * 3 / 4);
        max-width: calc(25% - var(--gap, 20px) * 3 / 4);
    }
}

/* ─── 노트북 (992px - 1199px) - 내용 영역 고정, 이미지만 축소 ─── */
@media (min-width: 992px) and (max-width: 1199px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(25% - 12px), calc(25% - 12px)));
        gap: 12px;
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(25% - 9px);
        width: calc(25% - 9px);
        max-width: calc(25% - 9px);
    }

    /* 🎯 내용 영역은 동일하게 유지 */
    .common-card .card-content {
        padding: 18px; /* 🎯 패딩 유지 */
        min-height: 140px;
        max-height: 140px;
    }

    /* 🎯 텍스트 크기도 동일하게 유지 */
    .common-card .card-title {
        font-size: 15px; /* 🎯 원래 크기 유지 */
        margin-bottom: 16px; /* 🎯 원래 여백 유지 */
        height: 42px; /* 🎯 높이 유지 */
    }

    .common-card .card-discountPrice,
    .common-card .card-final-price {
        font-size: 18px; /* 🎯 원래 크기 유지 */
    }
}

/* ─── 중간 노트북 (1200px - 1499px) - 내용 영역 고정, 이미지만 축소 ─── */
@media (min-width: 1200px) and (max-width: 1499px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(25% - 15px), calc(25% - 15px)));
        gap: 15px;
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(25% - 11.25px);
        width: calc(25% - 11.25px);
        max-width: calc(25% - 11.25px);
    }

    /* 🎯 내용 영역은 동일하게 유지 */
    .common-card .card-content {
        padding: 18px; /* 🎯 패딩 유지 */
        min-height: 140px;
        max-height: 140px;
    }

    /* 🎯 텍스트 크기도 동일하게 유지 */
    .common-card .card-title {
        font-size: 15px; /* 🎯 원래 크기 유지 */
        margin-bottom: 16px; /* 🎯 원래 여백 유지 */
        height: 42px; /* 🎯 높이 유지 */
    }

    .common-card .card-discountPrice,
    .common-card .card-final-price {
        font-size: 18px; /* 🎯 원래 크기 유지 */
    }
}

/* ─── 큰 데스크톱 (1500px - 1899px) - 내용 영역 고정, 이미지만 축소 ─── */
@media (min-width: 1500px) and (max-width: 1899px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(25% - 18px), calc(25% - 18px)));
        gap: 18px;
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(25% - 13.5px);
        width: calc(25% - 13.5px);
        max-width: calc(25% - 13.5px);
    }

    /* 🎯 내용 영역은 동일하게 유지 */
    .common-card .card-content {
        padding: 18px; /* 🎯 패딩 유지 */
        min-height: 140px;
        max-height: 140px;
    }

    /* 🎯 텍스트 크기도 동일하게 유지 */
    .common-card .card-title {
        font-size: 15px; /* 🎯 원래 크기 유지 */
        margin-bottom: 16px; /* 🎯 원래 여백 유지 */
        height: 42px; /* 🎯 높이 유지 */
    }

    .common-card .card-discountPrice,
    .common-card .card-final-price {
        font-size: 18px; /* 🎯 원래 크기 유지 */
    }
}

/* ─── 초대형 데스크톱 (1900px 이상) - 기준 크기 ─── */
@media (min-width: 1900px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(25% - var(--gap, 20px) * 3 / 4), calc(25% - var(--gap, 20px) * 3 / 4)));
        gap: var(--gap, 20px);
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(25% - var(--gap, 20px) * 3 / 4);
        width: calc(25% - var(--gap, 20px) * 3 / 4);
        max-width: calc(25% - var(--gap, 20px) * 3 / 4);
    }

    /* 🎯 기준 크기 */
    .common-card .card-content {
        padding: 18px;
        min-height: 140px;
        max-height: 140px;
    }

    .common-card .card-title {
        font-size: 15px;
        margin-bottom: 16px;
        height: 42px;
    }

    .common-card .card-discountPrice,
    .common-card .card-final-price {
        font-size: 18px;
    }
}

/* ─── 작은 노트북/태블릿 (768px - 991px) - 3열 고정 크기 ─── */
@media (min-width: 768px) and (max-width: 991px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(33.333% - var(--gap, 16px) * 2 / 3), calc(33.333% - var(--gap, 16px) * 2 / 3)));
        gap: 16px;
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(33.333% - var(--gap, 16px) * 2 / 3);
        width: calc(33.333% - var(--gap, 16px) * 2 / 3);
        max-width: calc(33.333% - var(--gap, 16px) * 2 / 3);
    }

    .common-card .card-content {
        padding: 16px;
    }

    .common-card .card-title {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .common-card .card-discountPrice,
    .common-card .card-final-price {
        font-size: 18px;
    }
}

/* ─── 모바일 (480px - 767px) - 2열 고정 크기 ─── */
@media (min-width: 480px) and (max-width: 767px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--gap, 16px) / 2), calc(50% - var(--gap, 16px) / 2)));
        gap: 16px;
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(50% - var(--gap, 16px) / 2);
        width: calc(50% - var(--gap, 16px) / 2);
        max-width: calc(50% - var(--gap, 16px) / 2);
    }

    .blue-wrap .slider-track .common-card {
        flex: 0 0 calc(50% - var(--gap, 16px) / 2);
        width: calc(50% - var(--gap, 16px) / 2);
        max-width: calc(50% - var(--gap, 16px) / 2);
    }

    .common-card .card-content {
        padding: 16px;
    }

    .common-card .card-title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .common-card .card-discountPrice,
    .common-card .card-final-price {
        font-size: 18px;
    }
}

/* ─── 작은 모바일 (479px 이하) - 2열 고정 크기 ─── */
@media (max-width: 479px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(calc(50% - 6px), calc(50% - 6px)));
        gap: 12px;
    }

    .card-grid-4 .common-card {
        flex: 0 0 calc(50% - 6px);
        width: calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .blue-wrap .slider-track .common-card {
        flex: 0 0 calc(50% - 6px);
        width: calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .common-card .card-content {
        padding: 12px;
    }

    .common-card .card-title {
        font-size: 13px;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .common-card .card-original-price {
        font-size: 12px;
    }

    .common-card .card-discountPrice,
    .common-card .card-final-price {
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎯 페이지별 특수 스타일
   ═══════════════════════════════════════════════════════════════ */

/* ─── 추천 상품 섹션 ─── */
.recommend-section .card-grid-4 {
    margin-top: 28px;
}

/* ─── 베스트 상품 섹션 ─── */
.best-section .slider-wrapper {
    position: relative;
}

/* ─── 리뷰 섹션 ─── */
.review-section .common-card .card-content {
    padding: 12px 21px 20px;
}

/* ─── 상품 목록 페이지 ─── */
.product-list-page .product-grid {
    margin-bottom: 40px;
}

/* ─── 리스트 점 제거 ─── */
.slider-track li {
    list-style: none;
}

.blue-wrap .slider-track li {
    list-style: none;
}

.product-grid li {
    list-style: none;
}