/**
 * @type page
 * @name page-pandora, 지상원격관측자료
 */

/* =========================================================
 * 검색 폼 기본
 * ========================================================= */

/* 전체 form */
.pandora .data-form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* 검색 박스: 세로 스택 */
.pandora .pandora-search-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10rem 20rem !important;
    margin: 0 0 18rem 0 !important;
}

/* 검색 항목 목록: 세로 1열 */
.pandora .pandora-search-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 16rem !important;
    column-gap: 0 !important;
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.pandora .pandora-search-list > .form-item {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* 라벨 + 입력창 */
.pandora .pandora-search-box .form-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8rem !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* 라벨 */
.pandora .pandora-search-box .form-head {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* 입력 영역 */
.pandora .pandora-search-box .form-body,
.pandora .pandora-search-box .form-area {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* select/input */
.pandora .pandora-search-box .form,
.pandora .pandora-search-box select,
.pandora .pandora-search-box input {
    width: 100% !important;
    min-width: 0 !important;
}

/* 검색 버튼 */
.pandora .pandora-search-box > .button-display {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    margin: 0 !important;
}
.pandora .pandora-search-box > .button-display .button-area,
.pandora .pandora-search-box > .button-display .btn {
    width: auto !important;
}
.pandora .pandora-search-box > .button-display .btn {
    height: 42rem !important;
    border-radius: 8rem !important;
    padding: 0 20rem !important;
}

/* =========================================================
 * 지도
 * ========================================================= */
.pandora .map,
.pandora #map {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* OpenLayers 내부 요소 */
.pandora #map .ol-viewport,
.pandora #map .ol-layers,
.pandora #map .ol-layer {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
 * 영역 / 관측일자 / 기간
 * ========================================================= */

/* 라벨 폭 통일 → 입력칸 왼쪽 라인 맞춤 */
.pandora .pandora-search-list > .form-item > .form-wrap > .form-head {
    flex: 0 0 50rem !important;
    width: 50rem !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
}
.pandora .pandora-search-list > .form-item > .form-wrap > .form-head .form-name {
    text-align: left !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.3 !important;
}

/* 관측일자 + 기간: 라벨을 첫 줄에 맞춰 정렬 */
.pandora .pandora-search-list .date-item .form-wrap,
.pandora .pandora-search-list .days-ago-item .form-wrap {
    align-items: flex-start !important;
}
.pandora .pandora-search-list .date-item .form-head,
.pandora .pandora-search-list .days-ago-item .form-head {
    padding-top: 8rem !important;
}
.pandora .pandora-search-list .date-item .form-body,
.pandora .pandora-search-list .days-ago-item .form-body {
    display: flex !important;
    flex-direction: column !important;
}

/* 입력칸 + 버튼/문구 한 줄 */
.pandora .date-row {
    display: flex !important;
    align-items: center !important;
    gap: 16rem !important;
    width: 100% !important;
    min-width: 0 !important;
}
.pandora .date-row .date-form {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    position: relative !important;
}

/* Now 버튼 / "일 전 부터": 같은 폭 → 날짜칸·기간칸 길이 맞춤 */
.pandora #nowBtn,
.pandora .days-ago-item .days-ago-label {
    flex: 0 0 56rem !important;
    width: 56rem !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
.pandora #nowBtn {
    height: 36rem;
    padding: 0 12rem;
}
.pandora .days-ago-item .days-ago-label {
    text-align: center !important;
}

/* 기간 */
.pandora .days-ago-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.pandora .days-ago-item .days-ago-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}
.pandora .days-ago-item .days-ago-input .form-elem {
    width: 100% !important;
    height: 36rem !important;
    box-sizing: border-box !important;
    padding: 0 4rem 0 12rem !important;
    border: 1px solid #d8dbe1;
}

/* 검색범위 미리보기: 우측 정렬 */
.pandora .date-range-preview {
    font-size: 13rem;
    color: rgb(100, 105, 115);
    margin: 8rem 0 0 0 !important;
    text-align: right !important;
}

/* 영문 */
html[lang="en"] .pandora .pandora-search-list > .form-item > .form-wrap > .form-head {
    flex-basis: 80rem !important;
    width: 80rem !important;
}
html[lang="en"] .pandora #nowBtn,
html[lang="en"] .pandora .days-ago-item .days-ago-label {
    flex-basis: 70rem !important;
    width: 70rem !important;
}

/* =========================================================
 * 관측장비 / 상세조건 아코디언
 * ========================================================= */
.pandora .filter-accordion {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

.pandora .filter-toggle-btn {
    all: unset;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12rem 16rem !important;
    border: 1px solid rgb(224, 224, 224) !important;
    border-radius: 8rem !important;
    background-color: #fff !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pandora .filter-toggle-btn:focus-visible {
    outline: 2px solid rgb(1, 132, 208) !important;
    outline-offset: 2px;
}
.pandora .filter-toggle-btn.has-value {
    border-color: #D6E0EA;
    background-color: #F7FAFC;
}
.pandora .filter-toggle-btn[aria-expanded="true"] {
    border-color: rgb(1, 132, 208);
}

.pandora .filter-toggle-label {
    display: flex !important;
    align-items: center;
    gap: 8rem !important;
    font-size: 15rem;
    font-weight: 500;
    color: rgb(55, 59, 68);
}

/* 배지 */
.pandora .filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18rem;
    height: 18rem;
    padding: 0 6rem;
    border-radius: 9rem;
    background-color: rgb(1, 132, 208);
    color: #fff;
    font-size: 11rem;
    font-weight: 700;
    line-height: 1;
}
/* 상세조건 미선택(0): 회색 */
.pandora .filter-badge.is-empty {
    background-color: rgb(235, 237, 241);
    color: rgb(100, 105, 115);
}

.pandora .filter-toggle-caret {
    flex-shrink: 0;
    color: rgb(100, 105, 115);
    transition: transform 0.15s ease;
}
.pandora .filter-toggle-btn[aria-expanded="true"] .filter-toggle-caret {
    transform: rotate(180deg);
}

/* 관측장비 체크박스 패널 */
.pandora .eqpmn-panel {
    display: none;
    flex-direction: column;
    gap: 8rem !important;
    width: 100% !important;
    padding: 12rem !important;
    background: rgb(249, 250, 252);
    border-radius: 8rem;
    max-height: 240px;
    overflow-y: auto;
}
.pandora .eqpmn-panel .eqpmn-check-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8rem !important;
    width: 100% !important;
}
.pandora .eqpmn-panel .eqpmn-check-item .eqpmn-check,
.pandora .eqpmn-panel .eqpmn-check-item .eqpmn-check-all {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}
.pandora .eqpmn-panel .eqpmn-check-item .form-text {
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
}

/* 상세조건 패널 */
.pandora .filter-panel {
    box-sizing: border-box !important;
    display: none;
    flex-direction: column;
    gap: 12rem !important;
    width: 100% !important;
    margin-top: 12rem;
    padding: 16rem;
    background: rgb(249, 250, 252);
    border-radius: 8rem;
}
.pandora .filter-panel > .form-item {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* 상세조건 내부(자료레벨/자료종류): 라벨 위, 셀렉트 아래 */
.pandora .filter-panel .form-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6rem !important;
}
.pandora .filter-panel .form-head {
    padding-top: 0 !important;
    text-align: left !important;
    width: 100% !important;
}
.pandora .filter-panel .form-head .form-name {
    display: block !important;
    text-align: left !important;
}

.pandora .filter-panel-footer {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8rem;
    padding-top: 12rem;
    border-top: 1px dashed rgb(224, 224, 224);
}
.pandora .filter-reset-btn {
    all: unset;
    cursor: pointer;
    font-size: 13rem;
    color: rgb(55, 59, 68);
    padding: 6rem 12rem;
    border: 1px solid rgb(224, 224, 224);
    border-radius: 6rem;
}
.pandora .filter-reset-btn:focus-visible {
    outline: 2px solid rgb(1, 132, 208);
    outline-offset: 2px;
}

/* =========================================================
 * 좌/우 컬럼 레이아웃
 * ========================================================= */
.pandora-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24rem !important;
    width: 100% !important;
}

/* 데스크탑(1024px 이상): 좌우 배치 */
@media (min-width: 1024px) {
    .pandora-layout {
        flex-direction: row !important;
    }
    .pandora-layout > .data-finder {
        flex: 0 0 400rem !important;
        max-width: 400rem !important;
        min-width: 0 !important;
    }
    .pandora-layout > .pandora-list-side {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* 모바일/태블릿(1023px 이하): 세로 스택 */
@media (max-width: 1023px) {
    .pandora-layout {
        flex-direction: column !important;
    }
    .pandora-layout > .data-finder,
    .pandora-layout > .pandora-list-side {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* 우측 컬럼: 건수/다운로드 버튼 + 자료목록 */
.pandora-list-side {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* 제목 + (건수/버튼) 세로 배치 */
.data-result-info.pandora {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12rem !important;
    width: 100% !important;
}
.data-result-info.pandora .section-subject {
    margin: 0 !important;
}

/* 건수표시 + 압축다운로드 버튼 가로 배치 */
.data-result-info.pandora .data-result-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12rem !important;
    width: 100% !important;
}