/* 게시판 검색줄 (bo_sch)

   board.css 가 800줄을 넘겨 갈라 놓은 것이다. 규칙을 옮기지 않고 자르기만
   했으므로, head.sub.php 가 원래 순서대로 이어서 실으면 어느 선언이
   이기는지가 달라지지 않는다. */

body.clarity-page .bo_sch select,
body.clarity-page .bo_sch .sch_bar {
    border: 1px solid var(--clarity-border-strong);
    border-radius: .75rem;
    background: var(--clarity-surface-soft);
    box-shadow: none;
}

body.clarity-page .bo_sch select {
    width: 100%;
    height: 2.875rem;
    min-height: 2.875rem;
    padding-inline: .875rem 2rem;
    color: var(--clarity-text);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body.clarity-page .bo_sch select:focus-visible {
    border-color: var(--clarity-primary) !important;
    box-shadow: 0 0 0 3px var(--clarity-primary-soft);
}

body.clarity-page .bo_sch .sch_bar {
    display: flex;
    align-items: center;
    min-height: 2.875rem;
    gap: .35rem;
    margin-top: 0;
    padding: .2rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.clarity-page .bo_sch .sch_bar:focus-within {
    border-color: var(--clarity-primary);
    box-shadow: 0 0 0 3px var(--clarity-primary-soft);
}

body.clarity-page .bo_sch .sch_input {
    width: auto;
    min-width: 0;
    flex: 1;
    height: 2.5rem;
    padding-inline: .75rem;
    border: 0 !important;
    border-radius: .55rem;
    background: transparent !important;
    color: var(--clarity-text);
    box-shadow: none !important;
}

body.clarity-page .bo_sch .sch_btn,
body.clarity-page .bo_sch .bo_sch_cls {
    color: var(--clarity-muted);
}

body.clarity-page .bo_sch .sch_btn:hover,
body.clarity-page .bo_sch .sch_btn:focus-visible,
body.clarity-page .bo_sch .bo_sch_cls:hover,
body.clarity-page .bo_sch .bo_sch_cls:focus-visible {
    color: var(--clarity-primary);
}

body.clarity-page .bo_sch .clarity-board-search-submit {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    place-items: center;
    border: 0;
    border-radius: .65rem;
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--clarity-primary) 26%, transparent);
}

body.clarity-page .bo_sch .clarity-board-search-submit:hover,
body.clarity-page .bo_sch .clarity-board-search-submit:focus-visible {
    background: var(--clarity-primary-hover);
    color: var(--clarity-primary-ink);
}

body.clarity-page .bo_sch .clarity-board-search-close {
    display: inline-grid;
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: .6rem;
}

@media (max-width: 480px) {
    body.clarity-page .bo_sch {
        width: calc(100% - 1rem);
    }

    body.clarity-page .bo_sch h3 {
        min-height: 3.5rem;
        padding: .9rem 1rem;
        padding-right: 3.5rem;
    }

    body.clarity-page .bo_sch form {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.clarity-page .bo_sch,
    body.clarity-page .bo_sch * {
        transition-duration: .01ms !important;
    }
}

/* The mobile board skin uses a list instead of a table. */
body.clarity-page #fboardlist > .btn_top.btn_bo_user {
    min-height: 2.55rem;
    margin-bottom: .75rem;
}

body.clarity-page #bo_list .list_01 {
    overflow: hidden;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-md);
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}

body.clarity-page #bo_list .list_01 > .all_chk {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0 .95rem;
    border-bottom: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
    color: var(--clarity-muted);
    font-size: .72rem;
    font-weight: 700;
}

body.clarity-page #bo_list .clarity-board-mobile-list {
    overflow: hidden;
}