/* ========================================================
 * 폼 관련 공통 보강 스타일 (퍼블리싱 원본 수정 없이 override)
 * ======================================================== */

/* --------------------------------------------------------
 * 인라인용 작은 selectbox
 * - 결과 헤더의 "출력 [12]" 같이 한 줄 안에 들어가는 select
 * - 제목 옆에 자연스럽게 정렬되도록 높이/정렬 조정
 * 사용: <select class="form-select form-select-inline">
 * -------------------------------------------------------- */
.size-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 15px;
    color: #4b5563;
    line-height: 1;
}

/* result head 영역에 출력 selectbox + 추가 필터 묶음 (사료 페이지 등) */
.result-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.result-head-actions .size-select-wrap {
    margin-left: 0;
}

/* --------------------------------------------------------
 * 뷰 토글 버튼 (목록/캘린더) — 기념행사 등
 * 사용:
 *   <button class="btn-view-toggle" aria-pressed="false">
 *     <i class="ico ico-calendar"></i>
 *     <span class="label">캘린더보기</span>
 *   </button>
 * -------------------------------------------------------- */
.btn-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #d0d6dd;
    border-radius: 6px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    line-height: 1;
}

.btn-view-toggle:hover,
.btn-view-toggle:focus {
    border-color: #2462d6;
    color: #2462d6;
    outline: none;
}

.btn-view-toggle[aria-pressed="true"] {
    background: #eff6ff;
    border-color: #2462d6;
    color: #1d4ed8;
}

/* 캘린더/리스트 아이콘 (mask-image + currentColor — 버튼 색상 따라 변함) */
.btn-view-toggle .ico {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.btn-view-toggle .ico.ico-calendar {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
.btn-view-toggle .ico.ico-list {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><line x1='3' y1='6' x2='3.01' y2='6'/><line x1='3' y1='12' x2='3.01' y2='12'/><line x1='3' y1='18' x2='3.01' y2='18'/></svg>");
}

/* --------------------------------------------------------
 * 결과 영역 상단 별도 탭 라인 (가운데 정렬, 큰 사이즈)
 * 사용 — result-group-head 위에 별도 행으로:
 *   <ul class="section-filter result-section-tabs">...</ul>
 *   <div class="result-group-head">...</div>
 * -------------------------------------------------------- */
.section-filter.result-section-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 12px;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid #eef0f3;
}

/* 탭이 .result-group의 첫 자식일 때 → 부모 gap(20px) 거의 상쇄, 살짝만 호흡 */
.section-filter.result-section-tabs + .result-group-head {
    margin-top: -14px;  /* gap 20px - 6px 호흡 */
}

.section-filter.result-section-tabs .item {
    margin: 0;
}

.section-filter.result-section-tabs .item button {
    background: transparent;
    border: 0;
    padding: 6px 4px;
    font-size: 17px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: color 0.15s ease;
}

.section-filter.result-section-tabs .item button:hover {
    color: #1d4ed8;
}

.section-filter.result-section-tabs .item.on button {
    color: #1d4ed8;
    font-weight: 700;
}

.size-select-wrap label {
    color: #4b5563;
    font-weight: 500;
}

.size-select-wrap .form-select.form-select-inline {
    width: auto;
    min-width: 88px;
    height: 38px;
    padding: 0 36px 0 16px;
    font-size: 15px;
    line-height: 1;
    background-position: right 14px center;
    background-size: 12px;
}

/* --------------------------------------------------------
 * 상세검색 토글 버튼 (검색바 옆 부가 액션)
 * - 메인 [검색]은 primary, [초기화]는 outlined,
 *   [상세검색]은 한 단계 더 약한 ghost 스타일로 위계 분리
 * 사용: <button class="btn btn-detail btn-detail-toggle">
 * -------------------------------------------------------- */
/* --------------------------------------------------------
 * 상세검색 토글 (검색바 하단 가운데 정렬)
 * 사용:
 *   <div class="search-detail-toggle-row">
 *     <button class="search-detail-toggle _btnSearchDetail"
 *             aria-expanded="false" aria-controls="search-detail">
 *       <span class="label-open">상세검색 펼치기</span>
 *       <span class="label-close">상세검색 접기</span>
 *       <span class="chevron" aria-hidden="true"></span>
 *     </button>
 *   </div>
 * -------------------------------------------------------- */
/* 박스 자체의 padding-bottom(35px)이 너무 커서 토글 아래에 큰 여백 → 줄여서 토글이 박스 하단에 자연스럽게 위치 */
.search-detail-box {
    padding-bottom: 14px;
}

.search-detail-toggle-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0 0;     /* 검색바와 토글 사이 14px, 아래는 박스 padding(14px)이 담당 → 균형 */
    margin: 0;
}

.search-detail-toggle {
    background: transparent;
    border: 0;
    color: #1f2937;        /* 진한 회색 — 시인성 + 절제 */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s ease;
}

.search-detail-toggle:hover,
.search-detail-toggle:focus {
    color: #1d4ed8;
    outline: none;
}

/* chevron 화살표 (▼) — CSS 삼각형 */
.search-detail-toggle .chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.search-detail-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* "펼치기"/"접기" 라벨 토글 */
.search-detail-toggle .label-close { display: none; }
.search-detail-toggle[aria-expanded="true"] .label-open { display: none; }
.search-detail-toggle[aria-expanded="true"] .label-close { display: inline; }

/* 펼친 상세검색 폼 — 토글과 적절한 여백 (구분선 + 호흡) */
.search-detail .search-detail-inner {
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid #e3eaf3;
}

/* 상세검색 패널 — jQuery slideToggle (ui_search_detail.js)이 display 토글 */

/* --------------------------------------------------------
 * 고급 검색(&, |) 안내 힌트
 * -------------------------------------------------------- */
.search-hint {
    margin: 10px 0 10px 4px;
    padding: 0;
    line-height: 1;
    color: #666;
}
.search-hint strong {
    font-weight: 700;
    color: #333;
}
.search-hint .search-hint-example {
    margin-left: 12px;
    color: #e53935;
    font-weight: 600;
}

/* 통합검색 결과 페이지 — 검색바 아래 힌트 중앙 정렬 */
.search-contents .search-hint {
    max-width: 920px;
    margin: -10px auto 10px;
    padding-left: 5px;
}

/* 통합검색 팝업 레이어 내부 */
.popup-search-content .search-hint {
    margin-top: 15px;
    margin-left: 5px;
}
.popup-search-content .sch-info-list {
    display: flex;
    width: 100%;
    margin-top: 20px;
    padding-top: 34px;
    border-top: 1px solid #dfe6ef;
}

@media (max-width: 768px) {
    /* 팝업 레이어 — 검색예시 숨김 */
    .popup-search-content .search-hint .search-hint-example {
        display: none;
    }

    /* 통합검색 본 페이지 — 검색바 폭에 맞춤 */
    .search-contents .search-hint {
        max-width: calc(100% - 30px);
        margin: -10px auto 8px;
        padding-left: 5px;
        font-size: 12px;
        white-space: nowrap;
    }
}