@charset "UTF-8";
/* ============================================================
 * directory-search-filter.css
 * 검색 페이지 상세조건(필터) 모달 - 갱신일자 영역 반응형
 *
 * 셀렉트(전체/전년도/…)와 날짜입력(시작 ~ 종료)을 한 줄에 두되,
 * 폭이 모자라면 날짜 영역이 다음 줄로 내려가고,
 * 767px 이하에서는 셀렉트(위) / 날짜입력(아래) 2단으로 쌓는다.
 *
 * [사용 페이지 - 10개]
 *   user/renew         : govSearch, spaceDataSearch, textDataSearch, docDataSearch,
 *                        statsDataSearch, themeAnalSearch, fusionDataSearch, etcDataSearch
 *   user/renew/observe : rawSearch
 *   user/search        : searchMainRenew
 *
 * NOTE) openAPI 계열(openAPISearch/Anal/Map)에는 갱신일자 영역이 없어 연결하지 않는다.
 *
 * NOTE) 원래 각 JSP에 인라인 width(셀렉트 200px, 날짜 col 500px)가 박혀 있어서
 *       폭이 좁아지면 셀렉트가 찌그러지고 날짜입력이 화면 밖으로 잘렸다.
 *       인라인 스타일을 걷어내고 .search-date-filter 클래스로 옮긴 것.
 *
 * [마크업]
 *   <div class="form-area-box size-l search-date-filter">
 *     <div class="ele-icon-box"> ... 셀렉트(#regDt) ... </div>
 *     <div class="day">
 *       <div class="row">
 *         <div class="col"> ... #stDtIn ... </div>
 *         <div class="col wave"><span>~</span></div>
 *         <div class="col"> ... #edDtIn ... </div>
 * ============================================================ */

.search-date-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.search-date-filter > .ele-icon-box {
    flex: 0 0 200px;
    width: 200px;
    min-width: 0;
}

.search-date-filter > .day {
    flex: 1 1 240px;
    min-width: 0;
    padding-left: 15px;
}

.search-date-filter > .day > .row {
    flex-wrap: nowrap;
}

/* .wave(~) 는 default-element.css 에서 10px 로 고정되므로 건드리지 않는다. */
.search-date-filter > .day > .row > .col:not(.wave) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* .ele-icon-box 기본값이 flex-wrap:wrap 이라 폭이 좁아지면 달력 아이콘이
   다음 줄로 떨어진다. 한 줄 유지하고 입력창만 줄어들게 한다. */
.search-date-filter > .day .ele-icon-box {
    flex-wrap: nowrap;
    min-width: 0;
}

.search-date-filter > .day .ele-icon-box > input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.search-date-filter > .day .ele-icon-box > .icon-calendar {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .search-date-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-date-filter > .ele-icon-box {
        flex: 0 0 auto;
        width: 100%;
    }

    .search-date-filter > .day {
        flex: 0 0 auto;
        width: 100%;
        padding-left: 0;
    }
}