/* 페이지 타이틀 */
.page-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 28px;
    color: var(--font-primary);
}

/* 카테고리 섹션 */
.category-section {
    margin-bottom: 24px;
}

.chip-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

/* 필터 및 정렬 섹션 */
.filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 16px 0;
    border-bottom: 1px solid var(--divider-line);
}

/* 선택된 카테고리 표시 */
.selected-category {
    flex: 1;
}

.category-path {
    font-size: 14px;
    color: var(--font-light);
    font-weight: 400;
}

/* 정렬 섹션 */
.sort-section {
    flex-shrink: 0;
}

/* 🎯 카테고리 버튼 스타일 */
.chip {
    padding: 8px 16px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    color: var(--font-primary);
    transition: all 0.2s ease;
    position: relative;
    height: 35px; /* 🔥 고정 높이 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

/* 🔥 아코디언이 열린 상태 (연한 파란색) */
.chip.active {
    background: var(--table-header-bg);
    color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

/* 🔥 실제 선택된 카테고리 경로 (진한 파란색) */
.chip.selected {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}

.chip:hover:not(.active):not(.selected) {
    background: var(--table-header-bg);
}

.chip.active:hover {
    background: var(--table-header-bg);
    opacity: 0.9;
}

.chip.selected:hover {
    background: var(--btn-primary-bg);
    opacity: 0.9;
}

/* 🎯 아코디언 하위 카테고리 */
.category-accordion {
    position: relative;
}

.sub-categories {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--input-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 0;
    overflow: hidden;
    border: none;
    transition: max-height 0.3s ease, border 0.3s ease;
    margin-top: 8px;
}

.sub-categories.open {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--input-border);
}

/* 🔥 중분류 아이템 - 기본 및 하위 카테고리 있는 경우 모두 35px 고정 높이 */
.sub-category-item {
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: var(--font-primary);
    border: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    border-bottom: 1px solid var(--divider-line);
    height: 35px; /* 🔥 고정 높이 */
    box-sizing: border-box;
}

/* 🔥 하위 카테고리가 없는 일반 중분류 */
.sub-category-item:not(.has-sub) {
    padding: 0 16px; /* 좌우 패딩만 */
}

/* 🔥 하위 카테고리가 있는 중분류 - 패딩 제거 */
.sub-category-item.has-sub {
    padding: 0;
}

.sub-category-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub-category-item:first-child {
    border-radius: 8px 8px 0 0;
}

.sub-category-item:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.sub-category-item:hover {
    background: var(--table-header-bg);
    color: var(--btn-primary-bg);
}

.sub-category-item.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

/* 🔥 3단계 카테고리 - 완전히 독립적인 위치 */
.third-categories {
    position: fixed;
    width: 180px;
    min-width: 180px;
    background: var(--input-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
}

.third-categories.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    border: 1px solid var(--input-border) !important;
}

/* 🔥 소분류 아이템도 35px 고정 높이 */
.third-category-item {
    padding: 0 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    color: var(--font-primary);
    border-bottom: 1px solid var(--divider-line);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
    background: var(--input-bg);
    width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 35px; /* 🔥 고정 높이 */
}

.third-category-item:first-child {
    border-radius: 8px 8px 0 0;
}

.third-category-item:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.third-category-item:hover {
    background: var(--table-header-bg);
    color: var(--btn-primary-bg);
}

.third-category-item.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.sort {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--input-bg);
    color: var(--font-primary);
}

.list-wrap {
    max-width: var(--content-max);
    margin-inline: auto;
    margin-top: 144px;
    min-height: 1000px;
    margin-bottom: 200px;
}

/* 🎯 상품 목록 페이지 전용 카드 테두리 */
.product-list-page .common-card {
    border: 1px solid #BDBDBD !important;
}

/* 페이지네이션 */
.pagination {
    margin: 40px 0;
    text-align: center;
}

.pagination button {
    background: var(--input-bg);
    border: 1px solid var(--divider-line);
    margin: 0 4px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--font-primary);
    border-radius: 4px;
    transition: 0.25s;
}

.pagination button:hover {
    background: var(--table-header-bg);
}

.pagination .current {
    background: var(--font-primary);
    color: var(--btn-primary-text);
    border-color: var(--font-primary);
}

/* 🔥 대분류 아코디언 버튼 스타일 */
.chip.has-sub {
    padding: 0;
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    height: 35px; /* 🔥 고정 높이 */
    align-items: stretch; /* 자식 요소들이 전체 높이 채움 */
}

.chip.has-sub .category-name {
    flex: 1;
    padding: 0 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    background: inherit; /* 🔥 부모 배경색 상속 */
    color: inherit; /* 🔥 부모 텍스트 색상 상속 */
    border: none;
}

.chip.has-sub .arrow-button {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: inherit; /* 🔥 부모 배경색 상속 */
    color: inherit; /* 🔥 부모 텍스트 색상 상속 */
    border-left: 1px solid var(--input-border); /* 🔥 테두리 유지 */
    border-radius: 0;
}

/* 🔥 중분류 아코디언 버튼 - 대분류와 완전히 동일한 스타일 */
.sub-category-item.has-sub .category-name {
    flex: 1;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: inherit;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    background: inherit; /* 🔥 부모 배경색 상속 */
    border: none;
    height: 35px; /* 🔥 고정 높이 */
}

.sub-category-item.has-sub .arrow-button {
    width: 32px; /* 🔥 대분류와 동일한 너비 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: inherit; /* 🔥 부모 배경색 상속 */
    color: inherit; /* 🔥 부모 텍스트 색상 상속 */
    height: 35px; /* 🔥 고정 높이 */
    flex-shrink: 0;
}

/* 🔥 호버 효과 - 전체 버튼에 동일하게 적용 */
.chip.has-sub:hover:not(.selected):not(.active),
.chip.has-sub .category-name:hover,
.chip.has-sub .arrow-button:hover {
    background: var(--table-header-bg) !important;
    color: var(--btn-primary-bg) !important;
}

.sub-category-item.has-sub:hover:not(.active),
.sub-category-item.has-sub .category-name:hover,
.sub-category-item.has-sub .arrow-button:hover {
    background: var(--table-header-bg) !important;
    color: var(--btn-primary-bg) !important;
}

/* Font Awesome 아이콘 스타일 */
.chip.has-sub .arrow-button i,
.sub-category-item.has-sub .arrow-button i {
    transition: transform 0.2s ease;
    font-size: 11px;
}

/* 🔥 아이콘 회전 애니메이션 */
.chip.has-sub.active .arrow-button i {
    transform: rotate(180deg);
}

.sub-category-item.has-sub.expanded .arrow-button i {
    transform: rotate(90deg);
}

/* 🔥 선택된 상태 - 전체 버튼이 동일한 색상 */
.chip.has-sub.selected,
.chip.has-sub.selected .category-name,
.chip.has-sub.selected .arrow-button {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: none;
}

.sub-category-item.has-sub.active,
.sub-category-item.has-sub.active .category-name,
.sub-category-item.has-sub.active .arrow-button {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

/* 🔥 아코디언 확장 상태 */
.chip.has-sub.active,
.chip.has-sub.active .category-name,
.chip.has-sub.active .arrow-button {
    background: var(--table-header-bg) !important;
    color: var(--btn-primary-bg) !important;
}

.sub-category-item.has-sub.expanded,
.sub-category-item.has-sub.expanded .category-name,
.sub-category-item.has-sub.expanded .arrow-button {
    background: var(--table-header-bg) !important;
    color: var(--btn-primary-bg) !important;
}

/* 접근성 개선 */
.chip.has-sub .category-name:focus,
.chip.has-sub .arrow-button:focus,
.sub-category-item.has-sub .category-name:focus,
.sub-category-item.has-sub .arrow-button:focus {
    outline: 2px solid var(--btn-primary-bg);
    outline-offset: 1px;
}

/* 🔥 로딩 상태 스타일 개선 */
.sub-loading, .third-loading {
    padding: 8px 12px;
    text-align: center;
    color: var(--font-light);
    font-size: 11px;
    background: var(--table-header-bg);
    border-radius: 4px;
    margin: 2px 4px;
    opacity: 0.8;
    font-style: italic;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-loading.error, .third-loading.error {
    color: #e74c3c;
    background: #ffeaea;
}

/* 🔥 로딩 애니메이션 */
.sub-loading, .third-loading {
    animation: fadeInOut 1.2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .filter-section {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .chip-group {
        justify-content: flex-start;
        gap: 8px;
    }

    .category-path {
        text-align: left;
        margin-bottom: 8px;
    }

    .sub-categories {
        position: fixed;
        left: 16px;
        right: 16px;
        width: auto;
        z-index: 2000;
    }

    .third-categories {
        position: fixed;
        left: 16px;
        right: 16px;
        width: auto;
        min-width: auto;
        top: 50%;
        transform: translateY(-50%) scale(0.95);
        z-index: 2001;
    }

    .third-categories.open {
        transform: translateY(-50%) scale(1);
    }

    /* 🔥 모바일에서도 동일한 높이 유지 */
    .chip,
    .sub-category-item,
    .third-category-item,
    .sub-loading,
    .third-loading {
        height: 35px;
    }

    .chip.has-sub .arrow-button,
    .sub-category-item.has-sub .arrow-button {
        width: 32px; /* 🔥 모바일에서도 동일한 너비 유지 */
    }
}