/* 실시간 시공현장 필터 영역 일관성 보장 CSS */
/* SPA 네비게이션에서 스타일 안정성 확보 */
/* 견적산출 페이지에서 workplace.html로 이동시에도 동일한 스타일 보장 */

/* 최우선 순위로 필터 컨테이너 중앙 정렬 고정 - 여백 줄임 */
.filter-section,
.workplace-filter-container,
.filter-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 5px auto 15px auto !important; /* 위쪽 여백을 20px에서 5px로 줄임 */
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* 검색 컨테이너 중앙 정렬 고정 - 여백 줄임 */
.workplace-search-container,
.search-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 8px auto 20px auto !important; /* 위쪽 여백을 15px에서 8px로 줄임 */
    max-width: 400px !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* 개별 필터 탭 스타일 고정 */
.filter-tab {
    padding: 8px 20px !important;
    border: none !important;
    border-radius: 25px !important;
    background: #f5f5f5 !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    min-width: auto !important;
    margin: 0 !important;
}

.filter-tab.active {
    background: #d4af8c !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(212, 175, 140, 0.3) !important;
}

.filter-tab:hover {
    background: #e9e9e9 !important;
    transform: translateY(-1px) !important;
}

.filter-tab.active:hover {
    background: #c9a277 !important;
}

/* 검색 입력 필드 스타일 고정 */
.search-input {
    width: 100% !important;
    padding: 12px 20px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 25px !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
    background: white !important;
    margin: 0 !important;
}

.search-input:focus {
    border-color: #d4af8c !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 140, 0.1) !important;
}

/* 모든 해상도에서 중앙 정렬 강제 적용 */
@media (max-width: 480px) {
    .filter-tabs {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .filter-tab {
        padding: 6px 16px !important;
        font-size: 13px !important;
    }
    
    .workplace-search-container {
        max-width: 300px !important;
        margin: 12px auto !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .filter-tabs {
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .workplace-search-container {
        max-width: 350px !important;
    }
}

@media (min-width: 768px) {
    .filter-tabs {
        justify-content: center !important;
        gap: 12px !important;
    }
    
    .workplace-search-container {
        max-width: 400px !important;
    }
}

/* SPA 네비게이션 후 스타일 복원을 위한 클래스 */
.workplace-filters-restored {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* 필터 영역 전체 래퍼 스타일 고정 - 패딩 줄임 */
.workplace-main .filter-section {
    background: transparent !important;
    padding: 5px 0 10px 0 !important; /* 위쪽 패딩을 20px에서 5px로 줄임 */
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1200px !important;
}

/* 중복 요소 방지 */
.filter-section .filter-section,
.filter-tabs .filter-tabs {
    display: none !important;
}

/* 페이지 전환 시 스타일 보장 - 최고 우선순위 - 여백 줄임 */
body.page-workplace .filter-section,
body.page-workplace .workplace-filter-container,
body.page-workplace .filter-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 5px auto 15px auto !important; /* 위쪽 여백을 20px에서 5px로 줄임 */
    text-align: center !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* 페이지 로드 후 즉시 적용되는 스타일 */
.workplace-main .filter-section {
    animation: enforceCenter 0.1s ease-in !important;
}

@keyframes enforceCenter {
    from, to {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}