/**
 * product_list.css
 * 카테고리 상품 목록 페이지
 */

/* ========================================
   서브 카테고리 네비게이션
======================================== */
.sub-category-nav {
    width: 100%;
}

/* ========================================
   2차 메뉴 (1차와 비슷한 스타일)
======================================== */
.sub-nav-bar {
    width: 100%;
    background: #3d5266;  /* ✅ 1차보다 조금 밝게 (#2c3e50보다 밝음) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sub-nav-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.sub-nav-list::-webkit-scrollbar {
    height: 4px;
}

.sub-nav-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.sub-nav-link {
    display: inline-block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.85);  /* ✅ 1차와 비슷한 흰색 글자 */
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.sub-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sub-nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 500;
    border-bottom-color: #3498db;  /* ✅ 파란색 밑줄 */
}

/* ========================================
   3차, 4차 메뉴 (배지 스타일)
======================================== */
.sub-nav-badges-wrapper {
    width: 100%;
    background: #f8f9fa;
    padding: var(--spacing-md, 16px) 0;
    border-bottom: 1px solid var(--border-light, #e9ecef);
}

.sub-nav-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-xs, 4px);
}

.sub-nav-badge-group:last-child {
    margin-bottom: 0;
}

.sub-nav-badge {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #666;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.sub-nav-badge:hover {
    background: #e8e8e8;
    border-color: #ccc;
    color: #333;
    transform: translateY(-1px);
}

.sub-nav-badge.active {
    background: #3498db;  /* ✅ 파란색 배경 */
    border-color: #3498db;
    color: #fff;
    font-weight: 500;
}

/* ========================================
   상품 목록 컨테이너
======================================== */
.product-list-container {
    min-height: 400px;
    margin-top: var(--spacing-lg, 24px);
}

.no-products {
    text-align: center;
    padding: var(--spacing-xl, 32px);
    color: var(--text-light, #666);
    font-size: 16px;
}

/* ========================================
   더보기 버튼
======================================== */
.load-more-container {
    text-align: center;
    padding: var(--spacing-xl, 32px) 0;
}

.btn-load-more {
    padding: 12px 48px;
    background: var(--primary-color, #007bff);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-load-more:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-load-more:disabled {
    background: var(--border-color, #ddd);
    cursor: not-allowed;
    transform: none;
}

.btn-load-more.loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ========================================
   반응형
======================================== */
@media (max-width: 767px) {
    .sub-nav-link {
        font-size: 13px;
        padding: 10px 16px;
    }
    
    .sub-nav-badges-wrapper {
        padding: var(--spacing-sm, 8px) 0;
    }
    
    .sub-nav-badge {
        font-size: 12px;
        padding: 5px 12px;
    }
}