@charset "UTF-8";
/* ============================================================
 * directory-search-layout.css
 * 검색 페이지 디렉토리 탭(#tab-2) 반응형 레이아웃 - 공통
 *
 * 모바일(~767px)에서 좌/우 패널을 1단으로 쌓고, 우측 헤더를 줄바꿈 처리.
 * ~1215px 에서 필터 버튼을 아이콘 형태로 축약.
 *
 * [사용 페이지 - 13개]
 *   user/renew         : govSearch, spaceDataSearch, textDataSearch, docDataSearch,
 *                        statsDataSearch, themeAnalSearch, fusionDataSearch, etcDataSearch
 *   user/renew/observe : rawSearch
 *   user/search        : searchMainRenew
 *   user/bigdata/openApiRenew : openAPISearch, openAPISearchAnal, openAPISearchMap
 *
 * NOTE) searchMainRenew.jsp 에는 #tab-2 가 없어 상단 두 블록과 767px 블록은
 *       적용되지 않는다. 검색 버튼(상세조건) 축약 규칙만 공유하기 위해 연결한 것.
 * ============================================================ */

#tab-2 .gridlayout-page .left .top-tit-7 {
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 8px;
}

#tab-2 .gridlayout-page .left .top-tit-7 > .txt1 {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 767px) {
    #tab-2 .gridlayout-page > .row {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 16px;
        margin-left: 0;
        margin-right: 0;
    }

    #tab-2 .gridlayout-page > .row > .col {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #tab-2 .gridlayout-page > .row > .bsis-container {
        overflow-x: hidden !important;
    }

    #tab-2 .top-header-line {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 10px;
    }

    #tab-2 #current-meta {
        flex: 0 0 auto;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 1215px) {
    #searchBox + .col .filter-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 0;
    }

    #searchBox + .col .filter-btn .icon-filter {
        display: block;
        margin: 0;
        font-size: 20px;
        line-height: 1;
        transform: translateX(5px);
    }

    #searchBox + .col .filter-btn #filterArrow {
        display: block;
        margin: 0 !important;
        transform: translateX(-5px);
    }
}