@charset "utf-8";
/* ----------------------------------------------------------------------------
   중대범죄수사청 통합검색 : 산출물 마크업 ↔ 검색엔진 브리지
   ----------------------------------------------------------------------------
   산출물(default.css / content.css)이 tsch-* 계열을 이미 스타일링한다.
   이 파일은 검색엔진(rp-*.js)이 요구해서 그대로 둔 레거시 구조
   (.acco-* / .sch-sort / 자동완성 / 스피너 등)를
   산출물 톤에 맞춰 보정하는 역할만 한다.
   ---------------------------------------------------------------------------- */

/* ============================================================ 1. 3단 레이아웃
   산출물은 필터 + 결과 2단. 검색엔진은 우측에 인기/추천 검색어 aside 가 더 있다. */
/* 데스크탑 2단에서만 위쪽 정렬. 모바일(세로 1단)에서 flex-start 를 두면 자식이
   늘어나지 않아 내용이 넓은 .tsch-result 가 컨테이너 밖으로 삐져나온다. */
@media screen and (min-width: 1024px) {
    .tsch-layout {
        align-items: flex-start;
    }
}

.tsch-layout > .tsch-result {
    flex: 1 1 auto;
    min-width: 0;
}

.tsch-side {
    position: sticky;
    top: 60px;
    flex: 0 0 26rem;
    width: 26rem;
}

@media screen and (max-width: 1280px) {
    .tsch-side {
        display: none;
    }
}

/* 필터 컬럼은 스크롤하는 동안 화면에 고정된다.
   sticky 기준 박스가 .tsch-layout(필터 + 결과 2단) 이라 결과 목록이 끝나는 지점에서
   고정이 저절로 풀리고, 그 아래 footer 와 겹치지 않는다.
   필터가 뷰포트보다 길면 컬럼 안에서 스크롤해 아래쪽 항목까지 닿게 한다. */
.tsch-filter {
    position: sticky;
    top: 6rem;
    align-self: flex-start;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    /* 필터 끝까지 스크롤한 뒤 휠이 본문으로 넘어가지 않게 한다 */
    overscroll-behavior: contain;
    /* 스크롤바가 내용에 닿지 않도록 오른쪽 여백을 둔다.
       여백 + 스크롤바 자리만큼 폭을 넓혀 필터 내용 폭은 content.css 의 25rem 그대로 남긴다. */
    box-sizing: border-box;
    width: calc(25rem + 2rem);
    padding-right: 1.4rem;
    /* 스크롤바가 생겨도 내용 폭이 튀지 않게 자리를 미리 비워둔다 */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.tsch-filter::-webkit-scrollbar {
    width: 6px;
}

.tsch-filter::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--gray-dd);
}

.tsch-filter::-webkit-scrollbar-track {
    background-color: transparent;
}

@media screen and (max-width: 1023px) {
    /* 모바일은 필터가 결과 위에 1단으로 쌓이므로 고정하지 않는다.
       산출물의 .tsch-layout{flex-direction:column; gap:3rem} 을 그대로 쓴다.
       display:block 으로 덮으면 flex gap 이 사라진다. */
    .tsch-filter {
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    /* 결과 헤더의 [목록 표시 개수][정렬기준] 줄은 좁은 화면에서 줄바꿈시킨다
       (min-width:auto 인 flex 항목이라 그대로 두면 가로로 넘친다) */
    .tsch-head .sch-sort {
        flex-wrap: wrap;
        min-width: 0;
    }
}

/* ============================================================ 2. 검색 입력 밴드
   .sch-input 안에 자동완성 · 삭제 버튼이 함께 들어간다. */
.tsch-band #searchForm {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
}

@media screen and (max-width: 1400px) {
    /* 화면이 좁으면 검색창 오른쪽 끝에 붙인다 */
    #searchHelpBtn {
        left: auto;
        right: 0;
    }
}

.tsch-band .sch-form-wrap.tsch-form {
    flex: 1 1 auto;
    min-width: 0;
}

.tsch-band .sch-input.tsch-box {
    position: relative;
    display: flex;
    align-items: center;
}

.tsch-band .tsch-box .tsch-inp {
    flex: 1 1 auto;
    min-width: 0;
}

.tsch-band .tsch-box #kwrdClearBtn,
.tsch-band .tsch-box #autocomplete-open,
.tsch-band .tsch-box #autocomplete-close {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 0.8rem;
    border: 0;
    background: none;
    color: var(--gray-55);
    cursor: pointer;
}

.tsch-band .tsch-box #kwrdClearBtn::before {
    content: "\f659"; /* bi-x-lg */
    font-family: "bootstrap-icons";
    font-size: 1.6rem;
}

.tsch-band .tsch-box #autocomplete-open::before {
    content: "\f282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: 1.6rem;
}

.tsch-band .tsch-box #autocomplete-close::before {
    content: "\f286"; /* bi-chevron-up */
    font-family: "bootstrap-icons";
    font-size: 1.6rem;
}

/* 자동완성 목록 : .tsch-box 의 overflow:hidden 밖에 두고 같은 폭·중앙정렬을 맞춘다 */
.tsch-band .sch-input-wrap {
    position: relative;
    width: 100%;
    max-width: 79.2rem;
    margin: 0 auto;
}

.autocomplete-box {
    display: none;
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 28rem;
    padding: 0.8rem;
    overflow-y: auto;
    border: 1px solid var(--gray-dd);
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    text-align: left;
}

.autocomplete-box.open {
    display: block;
}

.autocomplete-box li {
    padding: 0.8rem 1.2rem;
    border-radius: 0.6rem;
    font-size: 1.6rem;
    cursor: pointer;
}

.autocomplete-box li.active,
.autocomplete-box li:hover {
    background: var(--primary50, #f2f6ff);
    color: var(--primary800);
    font-weight: 700;
}

.autocomplete-box li.no-result {
    color: var(--gray-75);
    cursor: default;
}

.autocomplete-box mark {
    background: none;
    color: var(--primary500);
    font-weight: 700;
}

/* 도움말 버튼 */
/* 산출물에는 없는 버튼이라, 검색창 중앙 정렬을 깨지 않도록 절대 배치한다.
   .tsch-box 최대폭 79.2rem 기준 오른쪽 바깥에 놓는다. */
#searchHelpBtn {
    position: absolute;
    top: 1.4rem;
    left: calc(50% + 41rem);
    width: 3.2rem;
    height: 3.2rem;
    border: 0;
    background: none;
    color: var(--gray-55);
    cursor: pointer;
}

#searchHelpBtn::before {
    content: "\f505"; /* bi-question-circle */
    font-family: "bootstrap-icons";
    font-size: 2rem;
}

/* .sch-form-wrap 이 flex 라 자식이 줄바꿈되도록 */
.tsch-band .sch-form-wrap.tsch-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tsch-band .sch-input.tsch-box {
    width: 100%;
}

/* ============================================================ 3. 필터 아코디언
   rp-detail-search.js 가 .acco-body / .searchObject 를 토글한다. */
.tsch-filter .filter-group {
    border-bottom: 1px solid var(--gray-e5);
    list-style: none;
}

/* 산출물 .group-tit 과 동일한 형태 (검색엔진 JS 가 h3 + button 구조를 요구해 클래스만 맞춘다) */
.tsch-filter .acco-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
    padding: 2rem 0;
}

.tsch-filter .acco-head .tit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary700);
}

.tsch-filter .acco-btn {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    background: none;
    color: var(--gray-55);
    cursor: pointer;
}

.tsch-filter .acco-btn::before {
    content: "\f286"; /* chevron-up */
    font-family: "bootstrap-icons";
    font-size: 1.6rem;
}

.tsch-filter .acco-btn[aria-expanded="false"]::before {
    content: "\f282"; /* chevron-down */
}

.tsch-filter .acco-body {
    overflow: hidden;
    padding-bottom: 2rem;
    transition: height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .tsch-filter .acco-body {
        transition: none;
    }
}

.tsch-filter fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.tsch-filter .count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: var(--primary100);
    color: var(--primary800);
    font-size: 1.3rem;
    font-weight: 700;
}

/* 검색 대상 체크 목록 */
.tsch-filter .chk-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
}

/* 기간 · 날짜 */
.tsch-filter .form-group + .form-group {
    margin-top: 1.5rem;
}

.tsch-filter .input-group.range {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    list-style: none;
}

.tsch-filter .input-group.range .form-tit {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--gray-55);
    font-size: 1.4rem;
}

.tsch-filter .input-group.range .mark {
    padding-bottom: 1rem;
    color: var(--gray-75);
}

.tsch-filter .form-control {
    width: 100%;
    height: 4.4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--gray-dd);
    border-radius: 0.6rem;
    font-size: 1.5rem;
}

.tsch-filter .form-control:focus {
    border-color: var(--primary500);
    outline: 2px solid rgba(0, 0, 0, 0.06);
}

/* layout.css 의 .sub-content{overflow:hidden} 은 장식용 ::before/::after 배경을
   가로로 잘라내려는 것인데, 스크롤 컨테이너를 만들어 버려서 안쪽 sticky 가 전부 죽는다.
   overflow:clip 은 스크롤 컨테이너를 만들지 않으므로 잘라내기는 그대로 두고 sticky 를 살린다. */
@supports (overflow: clip) {
    /* body 도 overflow-x:hidden 탓에 스크롤 컨테이너가 되어 sticky 기준을 가로챈다 */
    body,
    #container.sub-content {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* 필터 버튼 : 필터 목록을 스크롤하는 동안 뷰포트 하단에 붙어 따라온다.
   sticky 기준 박스가 .filter-scroll 이라 필터 목록이 끝나는 지점(인기검색어 시작)에서
   고정이 풀리고 그 아래로는 인기검색어를 가리지 않는다. */
.tsch-filter .filter-btn {
    display: flex;
    gap: 0.8rem;
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 0.8rem 0 1.2rem;
    background-color: #fff;
}

/* 고정된 동안 위쪽 경계를 선으로 긋지 않고 흰색으로 서서히 흐리게 해
   목록이 바 아래로 자연스럽게 사라지도록 한다 */
.tsch-filter .filter-btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 2.4rem;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.tsch-filter .filter-btn .btn {
    flex: 1 1 0;
    height: 4.8rem;
    border-radius: 0.6rem;
    border: 1px solid var(--gray-dd);
    background: #fff;
    color: var(--gray-33);
    font-size: 1.6rem;
    cursor: pointer;
}

.tsch-filter .filter-btn .btn.srch_left_btn {
    border-color: var(--primary500);
    background: var(--primary500);
    color: #fff;
    font-weight: 700;
}

/* ============================================================ 4. 적용된 필터 (tsch-cond) */
/* 산출물 .tsch-cond 는 [라벨][리셋][칩목록] 이 한 줄이고 칩목록 안에서만 줄바꿈한다.
   여기서 flex-wrap:wrap 을 주면 dt 와 dd 가 갈라져 라벨만 윗줄로 떨어진다. */
.filter-chip-box.tsch-cond {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
}

.filter-chip-box.tsch-cond dt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

.filter-chip-box.tsch-cond dd {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.filter-chip-box .filterResetBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--gray-cc);
    border-radius: 50%;
    background: #fff;
    color: var(--gray-55);
    cursor: pointer;
}

.filter-chip-box .filterResetBtn::before {
    content: "\f116"; /* bi-arrow-clockwise */
    font-family: "bootstrap-icons";
    font-size: 1.4rem;
}

/* 칩 목록 : 산출물 .cond-list 는 button 자체가 칩이라 그 클래스를 쓰면
   우리 구조의 X 버튼(.find-close)까지 칩으로 스타일링된다. KRDS .chip-wrap 은
   justify-content:space-between 이라 칩이 양쪽으로 흩어진다. 그래서 전용 클래스를 쓴다. */
.filter-chip-box .chip-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.filter-chip-box.tsch-cond .chip-wrap-custom {
    flex: 1 1 auto;
    min-width: 0;
}

@media screen and (max-width: 767px) {
    /* 산출물은 [라벨][리셋] 이 첫 줄, 칩이 아랫줄이다. 우리 구조는 리셋이 dd 안에 있어
       dd 의 박스를 없애 dt·리셋·칩목록을 .tsch-cond 의 직접 항목으로 만든다. */
    .filter-chip-box.tsch-cond dd {
        display: contents;
    }

    .filter-chip-box.tsch-cond .chip-wrap-custom {
        flex-basis: 100%;
    }
}

.btn-chip-outline {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 5px 15px;
    border: 1px solid var(--gray-cc);
    border-radius: 100px;
    background: #fff;
    color: var(--gray-33);
    font-size: 15px;
}

.btn-chip-outline .find-close {
    width: 1.6rem;
    height: 2.6rem;
    border: 0;
    background: none;
    color: var(--gray-55);
    cursor: pointer;
}

.btn-chip-outline .find-close::before {
    content: "\f659"; /* bi-x-lg */
    font-family: "bootstrap-icons";
    font-size: 12px;
    color: var(--gray-55);
}

/* ============================================================ 5. 결과 헤더 · 정렬 */
.search-list-top.tsch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.tsch-head .sch-info.lf-flex {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 1.8rem;
}

.tsch-head .sch-unit .label {
    font-weight: 700;
}

.tsch-head .search-result-text {
    color: var(--primary500);
    font-weight: 700;
}

.tsch-head .sch-sort.rg-flex {
    display: flex;
    align-items: center;
    gap: 1rem;
    list-style: none;
}

.tsch-head .sch-sort > li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tsch-head .sort-label {
    font-size: 1.6rem;
    font-weight: 700;
    white-space: nowrap;
}

.tsch-head .sort-select {
    height: 4rem;
    padding: 0 3rem 0 1.2rem;
    border: 1px solid var(--gray-dd);
    border-radius: 0.5rem;
    font-size: 1.5rem;
    /* KRDS 리셋이 appearance:none 을 걸어 기본 화살표가 사라진다.
       산출물 select.inp-st1 과 동일한 화살표를 직접 그린다. */
    appearance: none;
    background: #fff url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.5 7.5'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23666; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M.75.75l6,6L12.75.75'/%3E%3C/svg%3E") no-repeat right 1.2rem center / auto 5px;
}

.tsch-head .w-sort-btn {
    display: flex;
    gap: 0.6rem;
}

.tsch-head .w-sort-btn button {
    height: 4rem;
    padding: 0 1.4rem;
    border: 1px solid var(--gray-dd);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--gray-55);
    font-size: 1.5rem;
    cursor: pointer;
}

.tsch-head .w-sort-btn button.active {
    border-color: var(--primary500);
    background: var(--primary500);
    color: #fff;
    font-weight: 700;
}

/* 정렬기준·목록 표시 개수는 산출물처럼 모바일에서도 그대로 노출한다.
   (.tsch-head 가 flex-wrap:wrap 이라 좁아지면 알아서 줄바꿈된다) */

/* ============================================================ 6. 결과 목록 보정
   마크업은 산출물 구조(li > .txt-wrap + .img-wrap)를 그대로 쓴다.
   여기에는 산출물에 없는 조각(첨부파일 목록 · 카드형 여백)만 남긴다. */
/* 화면 크기별 표시 제어(.w-hide / .m-hide) 는 KRDS p_common.css 에만 있는데
   이 화면은 그 파일을 로드하지 않아 클래스가 무효였다.
   산출물 레이아웃 분기점(767px)에 맞춰 여기서 정의한다. */
.w-hide {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    .w-hide {
        display: block !important;
    }

    .m-hide {
        display: none !important;
    }
}

/* 카드형(이미지1·이미지2) 섹션은 섹션 타이틀 밑줄에 바로 붙는다.
   리스트형 li 의 padding(3rem) 과 같은 만큼 띄운다. */
.tsch-result .krds-structured-list {
    margin-top: 3rem;
}

/* 첨부파일 목록 (front_junggu 와 같은 컴팩트 골격).
   파일마다 박스를 그리면 몇 개만 되어도 결과 한 건이 화면을 다 먹는다.
   박스 하나에 행으로 쌓고 행 높이를 줄인다. */
.tsch-list .file.file-list {
    display: block;
    margin-top: 1.5rem;
    padding: 0.4rem 1.6rem;
    border: 1px solid var(--primary100);
    border-radius: 1rem;
    background: var(--primary50);
}

.tsch-list .file.file-list ul {
    width: 100%;
}

.tsch-list .file.file-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 4rem;
    padding: 0.4rem 0;
    font-size: 1.5rem;
    color: var(--gray-33);
}

.tsch-list .file.file-list li ~ li {
    border-top: 1px solid var(--gray-e5);
}

.tsch-list .file.file-list .f-name {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tsch-list .file.file-list .f-name a {
    color: inherit;
    text-decoration: none;
}

.tsch-list .file.file-list .f-name a:hover {
    text-decoration: underline;
    text-underline-offset: 0.4rem;
}

.tsch-list .file.file-list .btn-down,
.tsch-list .file.file-list .btn-view {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--primary200);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--primary800);
    font-size: 1.4rem;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tsch-list .file.file-list .btn-down:hover,
.tsch-list .file.file-list .btn-view:hover {
    border-color: transparent;
    background: var(--primary500);
    color: #fff;
}

.tsch-list .file.file-list .btn-down::after,
.tsch-list .file.file-list .btn-view::after {
    content: "";
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.tsch-list .file.file-list .btn-down::after {
    background-image: url(../images/main/ico_file_20.svg);
}

.tsch-list .file.file-list .btn-view::after {
    background-image: url(../images/main/ico_go_20.svg);
}

/* 확장자 아이콘 : 문서 모양 마스크 + 종류별 색상 */
.tsch-list .file.file-list .f-ico {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    background-color: #8a94a6;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2.5L18.5 9H14V4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2.5L18.5 9H14V4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tsch-list .file.file-list .f-ico.pdf { background-color: #d93025; }
.tsch-list .file.file-list .f-ico.hwp { background-color: #0f6fc5; }
.tsch-list .file.file-list .f-ico.doc { background-color: #2b579a; }
.tsch-list .file.file-list .f-ico.xls { background-color: #217346; }
.tsch-list .file.file-list .f-ico.ppt { background-color: #c43e1c; }
.tsch-list .file.file-list .f-ico.zip { background-color: #b08b1e; }

/* 이미지 파일은 문서 대신 사진 모양 */
.tsch-list .file.file-list .f-ico.img {
    background-color: #6c40bf;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 11l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 11l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tsch-list .keyword,
.tsch-list em.keyword {
    font-weight: 700;
    color: var(--primary500);
    background: none;
    font-style: normal;
}

/* 섹션 타이틀 · 더보기 */
/* 산출물은 .sec-tit 자체가 블록이라 밑줄이 단 너비 전체를 긋는다. 검색엔진 구조는
   .sec-tit 가 flex 아이템(글자 폭)이라 밑줄이 짧게 끊긴다 → 밑줄을 래퍼로 올린다. */
.sec-tit-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--gray-17);
}

.sec-tit-wrap .sec-tit {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.sec-tit-wrap .menu_count {
    color: var(--gray-55);
    font-weight: 400;
}

.sec-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 4rem;
    padding: 0 1.6rem;
    border-radius: 999px;
    background: var(--primary100);
    color: var(--primary800);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

/* ============================================================ 8. 인기검색어 · 최근검색어
   산출물 .tsch-rank / .tsch-recent 을 그대로 쓰되, 검색엔진 JS 가 붙이는
   클래스(.active, inline display)를 산출물 상태 클래스와 동일하게 취급한다. */
.tsch-rank .kwd_list_wrap + .kwd_list_wrap,
.tsch-recent .kwd_list_wrap + .kwd_list_wrap {
    margin-top: 2rem;
}

/* 탭 : JS 는 .active 를 붙이고 산출물은 .on 을 쓴다 */
.tsch-rank .rank-tabs button.active,
.tsch-rank .rank-tabs button.on {
    font-weight: 700;
    color: #fff;
    background-color: var(--primary500);
    border-color: var(--primary500);
}

.tsch-rank .favoriteKeywordList {
    display: none;
}

.tsch-rank .rank-list {
    list-style: none;
    padding: 0;
}

.tsch-rank .rank-list .word {
    color: var(--gray-33);
    text-decoration: none;
}

.tsch-rank .rank-list .diff.new {
    color: var(--primary500);
    font-weight: 700;
}

/* 최근검색어 : myQuery.jsp 가 그리는 목록 */
.tsch-recent .recent-list {
    list-style: none;
    padding: 0;
}

.tsch-recent .recent-list .word {
    color: var(--gray-33);
    text-decoration: none;
}

/* 저장된 검색어가 없을 때 : 영역은 남기고 안내 문구만 보여준다 */
.tsch-recent .recent-list .no-result {
    display: block;
    color: var(--gray-75);
    font-size: 1.5rem;
}

/* ============================================================ 8-1. 첫 화면 · 검색결과 없음
   mainview/RssBlank.jsp · RssMsg.jsp 는 기존 화면을 그대로 쓴다.
   삭제한 rp-main.css 에 있던 스타일을 산출물 색으로 옮겨온다. */
.no-result-wrap {
    max-width: 96rem;
    margin: 0 auto;
    padding: 6rem 2rem 4rem;
    text-align: center;
    animation: noResultFadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes noResultFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.no-result-wrap::before {
    content: "";
    display: block;
    width: 9.6rem;
    height: 9.6rem;
    margin: 0 auto 2.4rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='28' cy='28' r='14'/><line x1='38' y1='38' x2='50' y2='50'/><line x1='22' y1='28' x2='34' y2='28'/></svg>") center / 5.2rem no-repeat,
        var(--primary50, #eef3fb);
}

.no-result-text {
    margin-bottom: 3.2rem;
    color: #111827;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
}

.no-result-text .text-point {
    color: var(--primary700);
    font-weight: 800;
}

.no-result-wrap .guide-box {
    padding: 2.8rem 3rem;
    text-align: left;
    border: 1px solid var(--gray-e5);
    border-radius: 1.6rem;
    background: var(--gray-fa, #f9fafb);
}

.no-result-wrap .guide-box .info-list.dash {
    list-style: none;
    margin: 0;
    padding: 0;
}

.no-result-wrap .guide-box .info-list.dash li {
    position: relative;
    margin-top: 1.2rem;
    padding-left: 2.4rem;
    color: var(--gray-33);
    font-size: 1.5rem;
    line-height: 1.7;
}

.no-result-wrap .guide-box .info-list.dash li:first-child {
    margin-top: 0;
}

.no-result-wrap .guide-box .info-list.dash li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--primary500);
}

.no-result-wrap .guide-box .text-information {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 0.4rem;
    background: var(--primary100);
    color: var(--primary800);
    font-weight: 700;
}

.no-result-wrap .guide-box .text-point {
    color: var(--primary700);
    font-weight: 700;
}

/* ============================================================ 9. 로딩 스피너 */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
}

.page-loading-overlay.hidden {
    display: none;
}

.page-loading-spinner .spinner {
    width: 4.8rem;
    height: 4.8rem;
    border: 4px solid var(--gray-e5);
    border-top-color: var(--primary500);
    border-radius: 50%;
    animation: jungsu-spin 0.8s linear infinite;
}

@keyframes jungsu-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================ 10. 최상단 이동 · 모바일 필터 */
/* 기본은 숨김. rp-search.js 가 스크롤 300px 지점에서 .is-visible 을 붙인다 */
.scroll-top-btn {
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border: 1px solid var(--gray-dd);
    border-radius: 50%;
    background: #fff;
    color: var(--gray-33);
    cursor: pointer;
    filter: drop-shadow(0 0.4rem 0.7rem rgba(0, 0, 0, 0.08));
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background-color 0.2s;
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.scroll-top-btn:hover {
    background-color: var(--gray-f5);
}

.scroll-top-btn::before {
    content: "\f286"; /* chevron-up */
    font-family: "bootstrap-icons";
    font-size: 1.8rem;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-top-btn {
        transition: none;
        transform: none;
    }
}

@media screen and (max-width: 767px) {
    .scroll-top-btn {
        right: 1.6rem;
        bottom: 1.6rem;
        width: 4.4rem;
        height: 4.4rem;
    }
}

.aside-collapse-btn {
    display: none;
}

/* ============================================================ 11. 검색 도움말 (mainview/RssHelp.jsp)
   기존 도움말 화면을 그대로 쓰되, 삭제한 rp-main.css 의 스타일을
   산출물 색 토큰으로 옮겨온다. */
.help-content-wrapper {
    min-height: 100vh;
    background-color: var(--gray-f5, #f4f5f6);
    padding: 2rem 0;
}
.help-content-wrapper .inner {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 2rem;
}
.help-title-section {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}
.help-main-title {
    font-size: 2.4rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 1.5rem 0;
}
.help-intro {
    font-size: 1.4rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
.help-highlight {
    color: #003A88;
    font-weight: 600;
}
.help-section {
    background-color: #fff;
    border-radius: 0.8rem;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.help-section-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #003A88;
    margin: 0 0 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid #003A88;
}
.help-table-wrapper {
    margin: 2rem 0;
}
.help-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #d0d7e2;
    border-radius: 0.8rem;
    overflow: hidden;
}
.help-table thead {
    background-color: var(--gray-f5, #f4f5f6);
}
.help-table th {
    font-size: 1.3rem;
    font-weight: 600;
    color: #222;
    padding: 1rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid #003A88;
}
.help-table tbody th {
    background-color: #F9FAFB;
    font-weight: 600;
    color: #003A88;
    border-right: 1px solid #d0d7e2;
    vertical-align: top;
    width: 40%;
}
.help-table td {
    font-size: 1.3rem;
    color: #333;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #e5e8eb;
    line-height: 1.7;
}
.help-table tbody tr:last-child td {
    border-bottom: none;
}
.help-table tbody tr:hover {
    background-color: #F9FAFB;
}
.help-description-list {
    margin: 2rem 0;
}
.help-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.help-list li {
    font-size: 1.3rem;
    color: #333;
    padding: 1rem 0 1rem 2rem;
    position: relative;
    line-height: 1.7;
    border-bottom: 1px solid #e5e8eb;
}
.help-list li:last-child {
    border-bottom: none;
}
.help-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #003A88;
    font-weight: 600;
}
.help-list li strong {
    color: #003A88;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}
.help-list li span {
    color: #555;
    display: block;
    margin-top: 0.5rem;
}
.help-list li span + span {
    margin-top: 0.3rem;
}
.help-note {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 1.2rem;
    color: #ef6c00;
    padding: 1.2rem 1.5rem;
    margin: 2rem 0 0 0;
    background-color: #FFF8F0;
    border-left: 4px solid #ef6c00;
    border-radius: 0.4rem;
    line-height: 1.7;
}
.help-note-icon {
    flex-shrink: 0;
    font-weight: 600;
}