@charset "utf-8";

/* ==========================================================================
   [반응형 미디어 쿼리] - 디자인 유지 중심
   ========================================================================== */

/* 1. 태블릿 및 작은 노트북 (1200px 이하) */
@media (max-width: 1200px) {
    .main-container {
        padding: 0 20px;
    }

    .banner-txt > p {
        /* 화면 너비에 따라 글자 크기 조정 (최소 40px, 최대 80px) */
        font-size: clamp(40px, 6vw, 80px);
    }
    .banner-txt > span {
        /* 화면 너비에 따라 글자 크기 조정 (최소 16px, 최대 24px) */
        font-size: clamp(16px, 2.5vw, 24px);
    }

    .experience-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .regional-center-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .edupark-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .education-showcase-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .classroom-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 2. 큰 모바일 및 태블릿 세로 (992px 이하) */
@media (max-width: 992px) {
    /* 검색창을 항상 가로로 유지하고, 버튼 겹침 문제 해결 */
    /* 배너와 겹침 문제 해결: 음수 마진 제거 */
    .experience-search-container {
        margin-top: 40px;
    }
    /* 카테고리 선택 버튼 한 줄 유지 및 크기 조정 */
    .category-selection {
        gap: 20px; /* 아이템 간 간격 줄이기 */
        justify-content: center;
    }

    .experience-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .regional-center-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .platform-stats-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .platform-stats-left, .platform-stats-right {
        width: 100%;
    }

    .future-classroom-list {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .consultation-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .platform-stats-right {
        display: none; /* 모바일에서는 이미지 숨김 */
    }
}

/* 3. 모바일 (768px 이하) */
@media (max-width: 768px) {
    body {
        margin-top: 0px!important;
    }
    .main-banner {
        height: auto;
    }

    .banner-box {
        flex-direction: column;
    }

    .banner-image {
        width: 100%;
        height: 250px;
    }

    .banner-txt > p {
        font-size: clamp(32px, 10vw, 60px);
        line-height: 1.1;
    }
    .banner-txt > span {
        font-size: clamp(14px, 4vw, 20px);
    }
    /* 배너와 겹침 문제 해결: 음수 마진 제거 */
    .experience-search-container {
        margin-top: 180px;
    }

    /* 카테고리 선택 버튼 크기 미세 조정 */
    .category-item {
        gap: 8px;
    }
    .category-item img {
        width: 28px;
        height: 28px;
    }
    .category-btn {
        width: auto;
        padding: 6px 16px;
    }
    .experience-search-container.fixed {
        top: 80px; /* 모바일 헤더 높이 */
    }
    
    /* 768px 이하에서 검색창 레이아웃 변경 */
    .search-form {
        flex-wrap: wrap; /* 내부 요소들이 여러 줄에 걸쳐 표시되도록 설정 */
        height: auto;
        padding: 15px;
        border-radius: 20px;
        row-gap: 10px; /* 줄(row) 간의 간격 추가 */
    }

    .search-fields {
        display: flex;
        flex-wrap: wrap; /* 필드들이 여러 줄에 걸쳐 배치되도록 설정 */
        flex-grow: 1; /* 남은 공간을 모두 차지 */
        gap: 0px; /* 필드 사이의 간격 */
    }

    .search-field {
        flex: 1 1 calc(33.333% - 10px); /* 한 줄에 3개가 들어갈 너비, gap 고려 */
        min-width: calc(33.333% - 10px); /* 최소 너비 지정으로 줄바꿈 유도 */
        border-bottom: 1px solid #eee;
    }
    .search-field:nth-of-type(3) {
        border-right : none;
    }
    

    /* 반응형 화면에서 드롭다운 메뉴 중앙 정렬 */
    .search-field .dropdown-menu,
    .search-field .custom-calendar {
        position: fixed; /* 화면 기준으로 위치 고정 */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
        width: 90vw; /* 화면 너비의 90% 사용 */
    }

    /* 콘텐츠 유형 필터 모달 반응형 오버라이드 */
    .search-field .dropdown-menu.show.filter-modal {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        min-width: 90vw;
    }
    /* 드롭다운 내 닫기/적용 버튼을 위한 푸터 */
    .dropdown-menu .dropdown-footer {
        display: block;
        padding: 10px 15px;
        border-top: 1px solid #eee;
        text-align: right;
    }
    .dropdown-menu .dropdown-footer .btn {
        width: 100%; /* 모바일에서 버튼을 꽉 채움 */
        padding: 10px;
        line-height: 0px;
    }

    .search-btn {
        position: static; /* position 초기화 */
        margin-left: 10px; /* 필드 그룹과의 간격 */
    }

    .tab-header {
        justify-content: space-around;
    }

    .experience-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .regional-center-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .original-header-bottom,
    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .original-slide-controls,
    .category-slide-controls {
        align-self: flex-end;
    }

    .edupark-features-grid {
        grid-template-columns: 1fr;
    }

    .education-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .classroom-cases-grid {
        grid-template-columns: 1fr;
    }

    .consultation-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* 4. 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
    /* 배너와 겹침 문제 해결: 음수 마진 제거 */
    .experience-search-container {
        margin-top: 40px;
    }
    .experience-list,
    .regional-center-list {
        grid-template-columns: 1fr;
    }
    .banner-image {
        min-height: 200px;
    }

    /* 검색 필드 폰트 크기 조정 */
    .search-field label {
        font-size: 12px;
    }
    .search-field input {
        font-size: 13px;
    }
}

/* ==========================================================================
   [고정 검색창 접기/펴기]
   ========================================================================== */

/* 토글 버튼 */
.search-form-toggle {
    display: none; /* 평상시에는 숨김 */
    width: 100%;
    padding: 10px;
    background-color: #f8f9fa;
    border: none;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #495057;
    text-align: center;
}

.search-form-toggle::after {
    content: '▲ 접기';
}

/* 고정 & 접힌 상태의 검색창 */
.experience-search-container.fixed .search-form.collapsed {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* 고정되었을 때 토글 버튼 표시 */
.experience-search-container.fixed .search-form-toggle {
    display: block;
}

/* 고정 & 접힌 상태의 토글 버튼 텍스트 */
.experience-search-container.fixed .search-form.collapsed + .search-form-toggle::after {
    content: '▼ 펼치기';
}

/* 고정 검색창으로 인해 .tab-section이 가려지는 문제 해결 */
@media (max-width: 992px) {
    .experience-search-container.fixed + .tab-section {
        /* JS에서 계산된 검색창 높이만큼 padding-top을 주기 위한 준비 */
        margin-top: calc(40px + var(--search-container-height, 0px)); /* 769px ~ 992px 기본 마진 + 검색창 높이 */
        transition: margin-top 0.2s ease-out; /* 부드러운 전환 효과 */
    }
}

/* 768px 이하에서 margin-top 재정의 */
@media (max-width: 768px) {
    .experience-search-container.fixed + .tab-section {
        margin-top: calc(180px + var(--search-container-height, 0px));
    }
}

/* 992px 이하 반응형에서 배경 이미지 제거 및 레이아웃 단순화 */
@media (max-width: 992px) {
    .tab-section {
        background-image: none; /* 배경 이미지 제거 */
        min-height: 0; /* 최소 높이 제거 */
        padding: 0; /* 내부 패딩 제거 */
        display: block; /* flexbox 정렬 해제 */
    }

    .tab-container {
        padding-top: 0; /* 배경 이미지를 위해 추가했던 패딩 제거 */
    }
}