@charset "utf-8";

/* 전체검색 결과 스킨.

   시안(`전체검색 결과`)의 치수·구조·리듬을 따르되 색은 사이트 팔레트를 쓴다.

   전에는 이 파일이 그누보드 코어 스킨 CSS 그대로였다 — #3a8afd · #ff005a ·
   #edf3fc 처럼 색을 직접 박아 두어 이 화면만 사이트에서 겉돌았고, 다크에서는
   글자가 배경에 묻혔다. 전부 --solune-* 토큰으로 다시 적어 다크도 함께
   따라오게 한다.

   선택자가 왜 이렇게 긴가. 이 파일은 테마의 시트들보다 **먼저** 실리고
   (스킨 style.css 는 순서 0), 테마는 body.solune-page 를 앞에 단 선택자를
   쓴다. 그래서 여기도 같은 접두를 달아 한 단 올린다. */

body.solune-page .sch-skin {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── 제목 옆 요약 ────────────────────────────────────────────────
   스크립트가 테마 머리줄로 옮기기 전에는 본문 맨 위에 선다. */
body.solune-page .sch-summary {
    margin: 0;
    color: var(--solune-muted);
    font-size: 13px;
}
body.solune-page .sch-summary strong { color: var(--solune-text); font-weight: 700; }
body.solune-page .sch-summary .sch-summary-word { color: var(--solune-primary); }

/* ── 상세검색 ────────────────────────────────────────────────────
   접었다 펼 수 있는 카드. 안쪽 여백은 머리줄과 본문이 각자 갖는다 — 접었을
   때 빈 띠가 남지 않게 한다. */
body.solune-page .sch-search { margin: 0; }
body.solune-page #sch_res_detail {
    /* 칸을 몇 줄로 앉힐지는 화면 폭이 아니라 이 카드의 폭으로 정한다.
       사이드가 붙는 화면에서는 둘이 크게 어긋난다 — 1024px 창에서도 카드는
       640px 뿐이다. */
    container: schf / inline-size;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 12px;
    background: var(--solune-surface);
    text-align: left;
}
/* 코어는 legend 를 화면 낭독기용으로만 남긴다. 눈에 보이는 제목은 머리줄이
   맡는다 — legend 를 되살리면 fieldset 테두리 위에 걸터앉아 카드가 무너진다. */
body.solune-page #sch_res_detail > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
body.solune-page .sch-search-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 20px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}
body.solune-page .sch-search-head:hover { background: var(--solune-surface-soft); }
body.solune-page .sch-search-title {
    color: var(--solune-text);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}
/* 홑화살은 펼쳤을 때 위를 본다. 상태를 aria-expanded 하나로만 들고 간다. */
body.solune-page .sch-search-chevron {
    display: inline-flex;
    color: var(--solune-muted);
    transition: transform .2s ease;
}
body.solune-page .sch-search-head[aria-expanded="true"] .sch-search-chevron { transform: rotate(180deg); }

/* 칸 눈금. 좁은 데서는 한 줄에 하나씩 쌓고, 자리가 나는 대로 붙인다.

   왜 auto-fit 을 그만뒀나 — 칸을 똑같이 나누면 넷이 늘 같은 폭이 된다.
   그런데 넷이 하는 일이 다르다. 그룹과 검색조건은 고르는 칸이라 좁아도 되고,
   검색 방식은 AND/OR 두 낱말이라 제 글자만큼이면 된다. 검색어만 글을 넣는
   자리라 넓어야 한다. 그래서 칸마다 몫을 따로 준다. */
body.solune-page .sch-search-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px 16px;
    align-items: end;
    padding: 6px 20px 20px;
    border-top: 1px solid color-mix(in oklch, var(--solune-border) 55%, var(--solune-surface));
}

/* 두 줄로 — 위에 그룹·검색조건, 아래에 검색어·검색 방식. */
@container schf (min-width: 460px) {
    body.solune-page .sch-search-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.solune-page .sch-search-body .sch-field:has(#stx) { grid-column: 1; }
    body.solune-page .sch-search-body .sch-sop { grid-column: 2; }
}

/* 한 줄로. 고르는 칸 둘은 작게, 검색어는 크게, 검색 방식은 제 글자만큼. */
@container schf (min-width: 800px) {
    body.solune-page .sch-search-body {
        grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 2fr) auto;
    }
    body.solune-page .sch-search-body .sch-field:has(#stx) { grid-column: 3; }
    body.solune-page .sch-search-body .sch-sop { grid-column: 4; }
}
/* 칸 하나 — 라벨 위, 입력 아래. 코어는 라벨을 전부 숨겨 무엇을 고르는
   칸인지 열어 보기 전에는 알 수 없었다. */
body.solune-page .sch-search-body .sch-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
body.solune-page .sch-search-body .sch-field > label {
    color: var(--solune-muted);
    font-size: 12.5px;
    font-weight: 600;
}
body.solune-page .sch-search-body .sch-req { color: var(--solune-danger); font-weight: 700; }

body.solune-page #sch_res_detail select {
    width: 100%;
    height: 40px;
    min-width: 0;
    padding: 0 30px 0 10px;
    border: 1px solid var(--solune-border);
    border-radius: 8px;
    background-color: var(--solune-surface);
    color: var(--solune-text);
    font-size: 13.5px;
}
/* 검색어 칸과 검색 단추는 6px 사이로 나란히 선다. */
body.solune-page #sch_res_detail .sch_wr { display: flex; min-width: 0; gap: 6px; }
body.solune-page #sch_res_detail .frm_input {
    width: auto;
    height: 40px;
    min-width: 0;
    flex: 1;
    padding: 0 12px;
    border: 1px solid var(--solune-border) !important;
    border-radius: 8px;
    background: var(--solune-surface) !important;
    color: var(--solune-text);
    font-size: 13.5px;
    line-height: 1.2;
}
/* 테마에는 모든 입력에 걸리는 포커스 규칙이 둘 있다(범용 :focus-visible
   outline 3px, input:focus box-shadow !important). 그대로 두면 링이 겹쳐
   세 겹이 되므로 여기서 한 겹으로 그린다. */
body.solune-page #sch_res_detail .frm_input:focus {
    border-color: var(--solune-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--solune-primary) 20%, transparent) !important;
}
body.solune-page #sch_res_detail .frm_input:focus-visible { outline: 0; }
/* 라벨에 "필수" 를 눈에 보이게 적어 두었으므로 입력칸 안의 빨간 별은 내지
   않는다(default.css 가 !important 라 같은 무게로만 끌 수 있다). */
body.solune-page #sch_res_detail .frm_input:is(.required, [required]):invalid { background-image: none !important; }
body.solune-page #sch_res_detail .btn_submit {
    height: 40px;
    flex: none;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
body.solune-page #sch_res_detail .btn_submit:hover { background: var(--solune-primary-hover); }

/* ── 검색 방식 (AND · OR) ────────────────────────────────────────
   코어 스킨은 label 을 float 로 띄우고 폭을 50px 로 못 박는데, 이 테마의 폼
   규칙과 엇갈려 글자가 세로로 쌓였다("A N D"). 옅은 홈 위에 고른 칸만 흰
   종이로 떠 있는 세그먼티드 컨트롤로 다시 만든다. */
body.solune-page .sch-sop { display: flex; min-width: 0; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
/* 테마는 legend 를 전부 화면 낭독기용으로 숨긴다(default.css:155 — 그 규칙이
   !important 라 같은 무게로만 되돌릴 수 있다). 다른 칸에는 보이는 라벨이
   있는데 여기만 없으면 무엇을 고르는 자리인지 알 수 없어 되살린다. */
body.solune-page .sch-sop > legend {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    color: var(--solune-muted);
    font-size: 12.5px;
    font-weight: 600;
}
body.solune-page .sch-sop .switch_field {
    display: inline-flex;
    height: 40px;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--solune-border);
    border-radius: 9px;
    background: var(--solune-surface-soft);
    box-sizing: border-box;
}
/* 라디오는 숨기되 없애지는 않는다 — label 을 누르면 켜지고, 키보드로도
   좌우 화살표로 오갈 수 있어야 한다. */
body.solune-page .sch-sop .switch_field input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
}
body.solune-page .sch-sop .switch_field label {
    display: flex;
    width: auto;
    min-width: 64px;
    float: none;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: var(--solune-muted);
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.solune-page .sch-sop .switch_field input:checked + label {
    border: 0;
    background: var(--solune-surface);
    box-shadow: 0 1px 2px rgb(16 24 40 / .08);
    color: var(--solune-text);
}
body.solune-page .sch-sop .switch_field input:focus-visible + label {
    outline: 2px solid var(--solune-primary);
    outline-offset: 2px;
}

/* 결과 영역. 탭 · 게시판 카드 · 페이지 넘김이 각자 제 사이를 갖는다 —
   묶어 두지 않으면 탭이 카드에, 카드가 페이저에 그대로 붙는다(실측 0px). */
body.solune-page #sch_result {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── 게시판별 탭 ─────────────────────────────────────────────────
   칩이 많으면 한 줄로 굴린다 — 접으면 결과가 그만큼 아래로 밀린다. */
body.solune-page .sch-boards { min-width: 0; overflow-x: auto; scrollbar-width: none; }
body.solune-page .sch-boards::-webkit-scrollbar { display: none; }
body.solune-page #sch_res_board {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.solune-page #sch_res_board li { display: block; flex: none; padding: 0; }
body.solune-page #sch_res_board a {
    display: inline-flex;
    height: 34px;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid var(--solune-border);
    border-radius: 17px;
    background: var(--solune-surface);
    color: var(--solune-text-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.solune-page #sch_res_board a strong { font-weight: 600; }
body.solune-page #sch_res_board a:hover,
body.solune-page #sch_res_board a:focus-visible {
    border-color: var(--solune-border-strong, var(--solune-border));
    background: var(--solune-surface);
    color: var(--solune-text);
    text-decoration: none;
}
/* 건수 배지. 코어가 .cnt_cmt 로 내보낸다. */
body.solune-page #sch_res_board .cnt_cmt {
    display: inline-flex;
    min-width: 1.25rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--solune-primary-soft);
    color: var(--solune-primary);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}
body.solune-page #sch_res_board .sch_on {
    border-color: var(--solune-primary);
    background: var(--solune-primary);
    color: var(--solune-primary-ink);
    box-shadow: none;
}
body.solune-page #sch_res_board .sch_on .cnt_cmt {
    background: color-mix(in srgb, var(--solune-surface) 22%, transparent);
    color: var(--solune-primary-ink);
}

/* ── 결과 ────────────────────────────────────────────────────────
   게시판 하나가 카드 하나다. 코어는 실선 몇 줄로만 갈라 어디까지가 한
   게시판의 결과인지 잘 보이지 않았다. */
body.solune-page .sch_res_list { position: relative; display: flex; flex-direction: column; gap: 20px; margin: 0; }
body.solune-page .sch_res_list .search_board_result {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--solune-border);
    border-radius: 12px;
    background: var(--solune-surface);
}
body.solune-page .sch-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--solune-border);
}
body.solune-page .sch_res_list .sch-board-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
body.solune-page .sch_res_list .sch-board-head h2 a { color: var(--solune-text); }
body.solune-page .sch_res_list .sch-board-head h2 a:hover { color: var(--solune-primary); text-decoration: none; }
body.solune-page .sch_res_list .sch-board-head h2 span { color: var(--solune-muted); font-size: 13px; font-weight: 500; }
/* 그 게시판의 결과 수. 회색 설명 안에서 숫자만 본문색으로 올린다 — 훑을 때
   눈에 먼저 들어오는 것이 개수다. */
body.solune-page .sch_res_list .sch-board-head h2 .sch-board-count { color: var(--solune-text); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 코어 스킨은 이 링크를 카드 바깥으로 절대배치했다. 머리줄의 한 자리로 둔다. */
body.solune-page .sch_res_list .sch_more {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--solune-primary);
    font-size: 13px;
    font-weight: 600;
}
body.solune-page .sch_res_list .sch_more:hover { text-decoration: underline; text-underline-offset: 2px; }

body.solune-page .sch_res_list ul { margin: 0; padding: 0; border: 0; list-style: none; }
body.solune-page .sch_res_list li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in oklch, var(--solune-border) 55%, var(--solune-surface));
    background: transparent;
}
body.solune-page .sch_res_list li:last-child { border-bottom: 0; }
body.solune-page .sch_res_list li:hover { background: var(--solune-surface-soft); }

body.solune-page .sch_res_list .sch_tit { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 0; }
body.solune-page .sch_res_list .sch_res_title {
    display: block;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: var(--solune-text);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.solune-page .sch_res_list .sch_res_title:hover { color: var(--solune-primary); text-decoration: none; }
/* 찾은 낱말. 코어가 <b class="sch_word"> 로 감싸 준다. 시안은 형광펜처럼
   옅은 바탕을 깐다 — 굵게만 하면 제목이 원래 굵어 잘 드러나지 않는다. */
body.solune-page .sch-skin {
    /* 형광펜 색. 사이트 팔레트에는 없는 값이라 여기서 만든다 — 강조색으로
       칠하면 링크와 헷갈리고, 회색으로 칠하면 눈에 띄지 않는다. 1:1문의의
       "답변대기" 칩과 같은 호박 계열로 두어 테마 안에서 겉돌지 않게 한다.
       oklch 로 적어 두 테마에서 같은 밝기 관계를 지킨다. */
    --sch-mark: oklch(.93 .1 92);
    --sch-mark-ink: oklch(.36 .07 75);
}
html[data-theme="dark"] body.solune-page .sch-skin {
    --sch-mark: oklch(.42 .08 92);
    --sch-mark-ink: oklch(.95 .05 92);
}
body.solune-page .sch_res_list .sch_word,
body.solune-page .sch_res_list p .sch_word {
    padding: 0 3px;
    border-radius: 3px;
    background: var(--sch-mark);
    color: var(--sch-mark-ink);
    font-weight: 700;
}
/* 새창으로 열기. 제목 옆 작은 아이콘 하나다. */
body.solune-page .sch_res_list .pop_a {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: none;
    color: var(--solune-muted);
    font-size: 12px;
    line-height: 1;
}
body.solune-page .sch_res_list .pop_a:hover { background: var(--solune-surface-soft); color: var(--solune-primary); }

/* 본문 미리보기. 두 줄에서 자른다 — 코어는 통째로 뿌려 한 결과가 다섯 줄을
   차지했다. */
body.solune-page .sch_res_list p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--solune-text-soft);
    font-size: 13.5px;
    line-height: 1.65;
    text-wrap: pretty;
}

body.solune-page .sch_res_list .sch_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 2px 0 0;
    color: var(--solune-muted);
    font-size: 12.5px;
}
body.solune-page .sch_res_list .sch_info .sv_wrap { font-size: 12.5px; font-weight: 600; }
body.solune-page .sch_res_list .sch_datetime {
    margin: 0;
    color: var(--solune-muted);
    font-family: var(--solune-mono);
    font-variant-numeric: tabular-nums;
}
/* 댓글 표. 제목 앞에 붙는다. */
body.solune-page .sch_res_list .cmt_def { margin-right: 4px; color: var(--solune-primary); }

/* 결과가 없을 때. 한 줄로 끝내지 않고 다음에 할 일을 함께 적는다. */
body.solune-page .sch-skin .empty_list {
    display: grid;
    gap: 8px;
    padding: 56px 20px;
    border: 1px solid var(--solune-border);
    border-radius: 12px;
    background: var(--solune-surface);
    text-align: center;
}
body.solune-page .sch-skin .sch-empty-title { color: var(--solune-text); font-size: 15px; }
body.solune-page .sch-skin .sch-empty-desc { color: var(--solune-muted); font-size: 13px; }

/* ── 좁은 화면 ───────────────────────────────────────────────── */
@media (max-width: 47.9375rem) {
    body.solune-page .sch-skin,
    body.solune-page #sch_result { gap: 16px; }
    body.solune-page .sch-search-head { padding: 12px 14px; }
    body.solune-page .sch-search-body { gap: 10px; padding: 4px 14px 14px; }
    body.solune-page .sch-board-head { padding: 12px 14px; }
    body.solune-page .sch_res_list li { padding: 14px; }
    /* 제목이 한 줄에 다 들어가지 않는다. 말줄임 대신 두 줄까지 흘린다. */
    body.solune-page .sch_res_list .sch_res_title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 15px;
        white-space: normal;
    }
}