/* 공통 */
body {
    background-color: #f8f9fa;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    
    /* 💡 [수정] 1. 헤더 위 빈 공간 제거 (padding-top 삭제) */
    /* 스티키 헤더로 인해 body에 패딩을 주면 안 됨 */
    
    /* 💡 [수정] 모바일 좌우 스크롤 방지 */
    overflow-x: hidden; 
}

/* 필터 사이드바 (기존과 동일) */
.filter-sidebar {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.filter-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
}
.filter-section {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.filter-section:last-child { border-bottom: none; }
.form-check { padding-left: 1.5rem; margin-bottom: 8px; }
.form-check-label { font-size: 0.85rem; cursor: pointer; user-select: none; }

/* 세일 카드 (기존과 동일) */
.sale-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    height: 100%;
    position: relative;
}
.sale-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sale-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.sale-card-body { padding: 10px; }
.sale-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 38px;
    line-height: 1.3;
}
.sale-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 6px;
}
.sale-store { font-size: 0.75rem; color: #666; margin-bottom: 6px; }
.sale-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #999;
    border-top: 1px solid #f0f0f0;
    padding-top: 6px;
}
.sale-meta span { display: flex; align-items: center; gap: 2px; }
.sale-source-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 10;
}

/* 로딩/페이지네이션 (기존과 동일) */
.spinner-border { width: 3rem; height: 3rem; }
.pagination { justify-content: center; }
.page-link { color: #0d6efd; font-size: 0.85rem; }
.page-item.active .page-link { background-color: #0d6efd; border-color: #0d6efd; }


/* ========== [수정] 반응형 레이아웃 ========== */

/* 💡 [추가] 1. 스티키 헤더 아래 컨텐츠 시작 위치 조정 */
.container-xl.mt-4 {
    padding-top: 1rem; /* 💡 헤더가 덮지 않도록 body 대신 여기에 패딩/마진 적용 */
}
@media (max-width: 991.98px) { /* 💡 lg 브레이크포인트 미만 (모바일) */
    .container-xl.mt-4 {
        padding-top: 0.5rem; /* 💡 모바일에서는 간격 좁게 */
    }
}


/* 💡 [수정] 5. 모바일 카드 (2열, 작은 간격, 카드 크기 축소) */
@media (max-width: 767.98px) {
    /* 모바일에서는 g-2 적용 */
    .main-content .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    /* 💡 모바일에서 2열(col-6) 강제 */
    .main-content #saleList > div {
        flex: 0 0 auto;
        width: 50%;
    }
    
    /* 💡 카드 크기 축소 (더 많이 보이게) */
    .sale-card-img {
        height: 110px; 
    }
    .sale-card-body {
        padding: 8px;
    }
    .sale-title {
        font-size: 0.75rem; 
        min-height: 32px; /* 2줄 높이 */
        margin-bottom: 4px;
    }
    .sale-price {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }
    .sale-store {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }
    .sale-meta {
        font-size: 0.65rem;
        padding-top: 4px;
    }
}


/* 💡 [수정] 2. PC) 데스크탑 Offcanvas 레이아웃 */
@media (min-width: 768px) { /* 💡 md -> 768px (Bootstrap MD 브레이크포인트) */
    .offcanvas-md {
        position: static;
        transform: none;
        visibility: visible !important;
        width: 280px !important; 
        border-right: 1px solid #dee2e6;
        height: calc(100vh - 56px); 
        top: 56px; 
        position: fixed; 
        overflow-y: auto; 
        padding: 0;
        background-color: #ffffff; /* 💡 데스크탑 필터 배경 흰색 */
    }
    
    .main-content {
        margin-left: 280px; 
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* 💡 [수정] g-4 간격 (PC) */
    .main-content .row {
         --bs-gutter-x: 1.5rem;
         --bs-gutter-y: 1.5rem;
    }
    /* 💡 2. PC) 카드 (4열) - 데스크탑 가로 스크롤 문제 해결 */
     .main-content #saleList > div {
        /* 💡 md, lg 크기 모두 지정 */
        width: 33.333%; /* 💡 md (중간) 3열 */
    }
}
@media (min-width: 992px) { /* 💡 lg -> 992px (Bootstrap LG 브레이크포인트) */
    /* 💡 2. PC) lg (큰) 4열 */
    .main-content #saleList > div {
        width: 25%; 
    }
}


/* 💡 [추가] 모바일 Offcanvas 스타일 */
.offcanvas-md {
    width: 280px;
}

/* 💡 [수정] 2. PC) 푸터 스타일 (PC 너비 맞춤) */
footer.site-footer {
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
    /* 💡 2. PC) 데스크탑에서 필터 영역 피하기 */
    @media (min-width: 768px) {
        margin-left: 280px;
    }
}

/* ========== [수정] 끝 ========== */