@charset "utf-8";

/* Clarity board list — 밀도형 리스트.
   기존 --clarity-* 토큰만 사용하므로 라이트/다크는 테마 전환을 그대로 따라간다. */

#bo_list .cb-wrap { display: flex; flex-direction: column; gap: 1.125rem; }

/* ── 툴바 카드: 윗줄(글 수 + 정렬 + 액션) + 아랫줄(분류 칩) ──
   board.css 가 body.clarity-page #bo_btn_top 으로 카드를 걸어두므로
   같은 수준 이상의 선택자로 덮는다. */
body.clarity-page #bo_list .cb-toolbar {
    display: flex;
    flex-direction: column;
    /* board.css 의 align-items:center 를 반드시 되돌린다.
       세로 배치에서는 자식이 가운데로 쪼그라들어 카드 폭을 못 채운다. */
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    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 .cb-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6875rem 1.125rem;
}
#bo_list .cb-total { display: flex; align-items: baseline; gap: .375rem; }
#bo_list .cb-total-count {
    color: var(--clarity-text);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
#bo_list .cb-total-label,
#bo_list .cb-total-page { color: var(--clarity-muted); font-size: .72rem; font-weight: 700; }
#bo_list .cb-total-sep { color: var(--clarity-border-strong); font-size: .72rem; }

#bo_list .cb-tools { display: flex; align-items: center; gap: .5rem; }

/* 아이콘 버튼 */
#bo_list .cb-icon-btn {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-sm);
    background: var(--clarity-surface);
    color: var(--clarity-muted);
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
#bo_list .cb-icon-btn:hover {
    border-color: var(--clarity-border-strong);
    background: var(--clarity-surface-soft);
    color: var(--clarity-text);
}

/* 글쓰기 */
#bo_list .cb-write {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    min-width: 5.25rem;
    height: 34px;
    padding: 0 .85rem;
    border-radius: var(--clarity-radius-sm);
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .14s ease;
}
#bo_list .cb-write:hover,
#bo_list .cb-write:focus-visible { background: var(--clarity-primary-hover); color: var(--clarity-primary-ink); }

/* ── 카테고리 칩: 툴바 카드의 두 번째 줄 ─────────────────── */
#bo_list .cb-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4375rem;
    padding: .625rem 1.125rem;
    border-top: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
}
#bo_list .cb-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 32px;
    padding: 0 .8125rem;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-pill);
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
/* 칩이 흰색이 되면서 예전 hover 색(surface-soft)이 칩 줄 배경과 같아져
   hover 가 보이지 않는다. 옅은 프라이머리 틴트로 바꾼다. */
#bo_list .cb-chip:hover {
    border-color: color-mix(in srgb, var(--clarity-primary) 36%, var(--clarity-border));
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}
#bo_list .cb-chip.is-on,
#bo_list .cb-chip.is-on:hover {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
}
#bo_list .cb-chip-n { font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .62; }

/* ── 선택 액션 바 ──────────────────────────────────────── */
#bo_list .cb-selbar {
    position: sticky;
    top: 4.0625rem;
    z-index: 40;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem .875rem;
    border: 1px solid var(--clarity-primary);
    border-radius: 0;
    background: var(--clarity-primary-soft);
}
#bo_list .cb-selbar.is-open { display: flex; }
#bo_list .cb-selbar-info { display: flex; align-items: center; gap: .5rem; }
#bo_list .cb-selbar-count {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    padding: 0 .4375rem;
    place-items: center;
    border-radius: var(--clarity-radius-pill);
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-size: .68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
#bo_list .cb-selbar-text { color: var(--clarity-primary); font-size: .78rem; font-weight: 700; }
#bo_list .cb-selbar-acts { display: flex; align-items: center; gap: .4375rem; }
#bo_list .cb-selbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 30px;
    padding: 0 .75rem;
    border: 1px solid var(--clarity-border);
    border-radius: .5rem;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease;
}
#bo_list .cb-selbar-btn:hover { border-color: var(--clarity-border-strong); background: var(--clarity-surface-soft); }

/* ── 목록 ──────────────────────────────────────────────── */
#bo_list .cb-list {
    overflow: hidden;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-md);
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}
#bo_list .cb-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6875rem 1.125rem;
    border-bottom: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
}
#bo_list .cb-head-label {
    flex: 1;
    color: var(--clarity-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#bo_list .cb-head-author,
#bo_list .cb-head-meta {
    color: var(--clarity-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: right;
}
#bo_list .cb-head-author { width: 84px; }
#bo_list .cb-head-meta { width: 108px; }

/* 체크박스 */
#bo_list .cb-chk { position: relative; display: inline-flex; flex: none; }
#bo_list .cb-chk input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
#bo_list .cb-chk label {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1.5px solid var(--clarity-border-strong);
    border-radius: 5px;
    background: var(--clarity-surface);
    color: transparent;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
#bo_list .cb-chk label:hover { border-color: var(--clarity-primary); }
#bo_list .cb-chk input:checked + label {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
}
#bo_list .cb-chk input:focus-visible + label { outline: 2px solid var(--clarity-primary); outline-offset: 2px; }

/* 행 */
#bo_list .cb-row {
    position: relative;
    display: grid;
    grid-template-columns: 18px 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .8125rem 1.125rem;
    border-top: 1px solid var(--clarity-border);
    transition: background-color .16s ease;
}
#bo_list .cb-foot { display: flex; align-items: center; gap: 1rem; }
#bo_list .cb-head + .cb-row { border-top: 0; }
#bo_list .cb-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--clarity-primary);
    opacity: 0;
    transition: opacity .16s ease;
}
#bo_list .cb-row:hover { background: var(--clarity-surface-soft); }
#bo_list .cb-row:hover::before { opacity: .48; }
#bo_list .cb-row.is-sel { background: var(--clarity-primary-soft); }
#bo_list .cb-row.is-sel::before { opacity: 1; }
#bo_list .cb-row.is-hidden { display: none; }

/* 레일: 플래그 + 글번호 */
#bo_list .cb-rail {
    display: flex;
    width: 44px;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: .1875rem;
}
#bo_list .cb-flag {
    display: inline-grid;
    height: 17px;
    padding: 0 .375rem;
    place-items: center;
    border-radius: 5px;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .06em;
}
#bo_list .cb-flag--hot { background: #fde8e8; color: #b42318; }
#bo_list .cb-flag--new { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
html[data-theme="dark"] #bo_list .cb-flag--hot { background: #4a1d1a; color: #ffb4ab; }
#bo_list .cb-no {
    color: var(--clarity-muted);
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* 본문: 제목 + 분류 */
#bo_list .cb-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .3125rem; }
#bo_list .cb-tit-line { display: flex; min-width: 0; align-items: center; gap: .375rem; }
/* 줄 높이가 23.2px 라 과녁이 WCAG 2.2 AA 의 24px 에 0.8px 모자랐다.
   글줄 모양은 그대로 두고 최소 높이만 채운다. */
#bo_list .cb-tit {
    display: block;
    min-height: 24px;
    overflow: hidden;
    color: var(--clarity-text);
    font-size: var(--clarity-board-title-size);
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .14s ease;
}
#bo_list .cb-row:hover .cb-tit,
#bo_list .cb-tit:focus-visible { color: var(--clarity-primary); }
#bo_list .cb-cmt {
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    flex: none;
    padding: 0 .25rem;
    place-items: center;
    border-radius: .35rem;
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    font-size: .62rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* 분류 칩. 배경을 반드시 적어 준다 — 비워 두면 게시판 스킨의
   `.bo_cate_link {background:#e2eaf6}` 가 그대로 비쳐, 다크에서 밝은
   알약에 옅은 회색 글씨가 얹혀 대비가 1.6:1 까지 떨어진다. 여기서는
   테두리 하나로 조용히 두는 쪽이라 바탕은 투명이다. */
#bo_list .cb-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 19px;
    padding: 0 .5rem;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-pill);
    background: transparent;
    color: var(--clarity-muted);
    font-size: .66rem;
    font-weight: 700;
}

/* 작성자 */
#bo_list .cb-author {
    display: flex;
    width: 84px;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
}
#bo_list .cb-avatar {
    display: inline-grid;
    width: 22px;
    height: 22px;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
    font-size: .62rem;
    font-weight: 800;
}
/* 회원 사진일 때는 배지 껍데기를 걷고 이미지가 원을 채우게 한다. */
#bo_list .cb-avatar-photo { overflow: hidden; padding: 0; border: 0; background: none; }
#bo_list .cb-avatar-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#bo_list .cb-author-name {
    overflow: hidden;
    color: var(--clarity-muted);
    font-size: .72rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 조회 · 날짜 */
#bo_list .cb-meta {
    display: flex;
    width: 108px;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: .625rem;
    color: var(--clarity-muted);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
#bo_list .cb-hit { display: inline-flex; align-items: center; gap: .25rem; }

/* 빈 상태 */
#bo_list .cb-empty {
    display: none;
    padding: 3.5rem 1.125rem;
    border-top: 1px solid var(--clarity-border);
    color: var(--clarity-muted);
    font-size: .82rem;
    text-align: center;
}
#bo_list .cb-empty.is-open { display: block; }

/* ── 모바일 ────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.clarity-page #bo_list .cb-toolbar-row { align-items: flex-start; padding: .625rem .875rem; }

    /* 아이콘·글쓰기는 좁은 폭에서 다음 줄로 내린다. */
    #bo_list .cb-tools { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    #bo_list .cb-write { margin-left: auto; }

    /* 칩은 카드 안에서 가로 스크롤 (카드를 뚫지 않도록 음수 마진 없이) */
    #bo_list .cb-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: .5rem .875rem;
        scrollbar-width: none;
    }
    #bo_list .cb-chips::-webkit-scrollbar { display: none; }

    /* 터치 타깃 44px 이상 */
    #bo_list .cb-chip { height: 44px; padding: 0 1rem; white-space: nowrap; }
    #bo_list .cb-icon-btn { width: 48px; height: 48px; }
    #bo_list .cb-write { height: 48px; }

    #bo_list .cb-head-author,
    #bo_list .cb-head-meta { display: none; }

    #bo_list .cb-row {
        grid-template-columns: 18px 38px minmax(0, 1fr);
        align-items: flex-start;
        padding: .8125rem 1rem;
        row-gap: .4375rem;
    }
    #bo_list .cb-rail { width: 38px; padding-top: .125rem; }
    #bo_list .cb-tit {
        overflow: visible;
        line-height: 1.42;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    #bo_list .cb-tit-line { align-items: flex-start; }

    /* 작성자 · 조회 · 날짜를 제목 아래로 접어 넣는다 */
    #bo_list .cb-foot {
        grid-column: 3;
        flex-wrap: wrap;
        gap: .625rem;
    }
    #bo_list .cb-author,
    #bo_list .cb-meta {
        width: auto;
        justify-content: flex-start;
    }
    #bo_list .cb-avatar { width: 18px; height: 18px; font-size: .56rem; }
    #bo_list .cb-author-name,
    #bo_list .cb-meta { font-size: .7rem; }
}

/* ── 페이지네이션 ──────────────────────────────────────────
   board.css 가 .pg 에 서피스 컨테이너(배경+테두리+그림자)를 정의해 두었다.
   목록·툴바 카드와 같은 결로 읽히도록 그 정의를 그대로 쓰고,
   여기서는 카드 톤만 맞춘다. */
body.clarity-page .clarity-board-pagination .pg {
    border-color: var(--clarity-border);
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}

/* ── #bo_list 자체의 흰 카드 걷어내기 ──────────────────────
   skins.css 가 #bo_list 를 흰 카드(배경+테두리+그림자)로 칠한다.
   새 목록은 .cb-list 가 카드 역할을 하므로, 바깥 껍데기는 바탕만 남겨
   칩과 페이지네이션이 카드 밖 바탕 위에 놓이도록 한다. */
body.clarity-page #bo_list {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* 콘텐츠 바탕을 테마가 body 에 선언해 둔 페이지 색(--clarity-page)으로 맞춘다.
   #wrapper 가 덮어쓰던 oklch(.98)(≈#fafafa)은 흰 카드와 구분이 되지 않아
   칩·페이지네이션이 흰 바탕 위에 떠 보였다. */
body.clarity-page #wrapper.clarity-wrapper { background: var(--clarity-page); }

/* 비로그인 등 체크박스가 없는 목록은 열이 하나 줄어든다.
   4열 그리드를 그대로 두면 마지막 auto 열이 비고 본문이 밀린다. */
#bo_list .cb-row--nochk { grid-template-columns: 44px minmax(0, 1fr) auto; }

@media (max-width: 767px) {
    #bo_list .cb-row--nochk { grid-template-columns: 38px minmax(0, 1fr); }
    #bo_list .cb-row--nochk .cb-foot { grid-column: 2; }
}

/* ── board-list-v2 layout ─────────────────────────────────
   참고 목록의 흐름에 맞춰 제목·툴바·목록·페이지네이션을 한 표면으로 묶는다.
   동적 게시물 마크업과 테마 토큰은 그대로 사용한다. */
body.clarity-page:has(#bo_list) .clarity-page-header {
    min-height: 0;
    margin-bottom: 1.375rem !important;
    padding: 0 !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.clarity-page:has(#bo_list) .clarity-page-header::before,
body.clarity-page:has(#bo_list) .clarity-page-header::after { display: none; }
body.clarity-page:has(#bo_list) .clarity-page-header > * { position: static; z-index: auto; }
body.clarity-page:has(#bo_list) .clarity-page-header #container_title {
    color: var(--clarity-text);
    font-size: clamp(24px, 4.4vw, 32px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}
body.clarity-page:has(#bo_list) .clarity-page-header-action {
    min-height: 38px;
    padding: 0 .875rem;
    border: 1px solid var(--clarity-border);
    border-radius: 9px;
    background: var(--clarity-surface);
    color: var(--clarity-text);
    font-size: .8125rem;
    font-weight: 600;
}
body.clarity-page:has(#bo_list) .clarity-page-header-action:hover,
body.clarity-page:has(#bo_list) .clarity-page-header-action:focus-visible {
    border-color: var(--clarity-border-strong);
    background: var(--clarity-surface-soft);
    color: var(--clarity-text);
}
body.clarity-page:has(#bo_list) .clarity-page-header-action.clarity-page-header-write {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-weight: 700;
}
body.clarity-page:has(#bo_list) .clarity-page-header-action.clarity-page-header-write:hover,
body.clarity-page:has(#bo_list) .clarity-page-header-action.clarity-page-header-write:focus-visible {
    border-color: var(--clarity-primary-hover);
    background: var(--clarity-primary-hover);
    color: var(--clarity-primary-ink);
}

#bo_list .cb-wrap {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--clarity-border);
    border-radius: 12px;
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}
/* 선택 작업바가 고정 헤더 아래에서 목록을 따라갈 수 있도록 클리핑을 해제한다. */
body.clarity-page #bo_list .cb-wrap:has(.cb-selbar) { overflow: visible; }
body.clarity-page #bo_list .cb-toolbar {
    border: 0;
    border-bottom: 1px solid var(--clarity-border);
    border-radius: 12px 12px 0 0;
    background: var(--clarity-surface);
    box-shadow: none;
}
body.clarity-page #bo_list .cb-toolbar-row { padding: .6875rem 1.125rem .6875rem 1.125rem; }
#bo_list .cb-chips { border-top: 1px solid var(--clarity-border); }
#bo_list .cb-list {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--clarity-surface);
    box-shadow: none;
}
#bo_list .cb-head {
    display: grid;
    grid-template-columns: 18px 44px minmax(0, 1fr) 84px 108px;
    align-items: center;
    gap: .75rem;
    min-height: 36px;
    padding: 0 1.125rem;
    border-bottom: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
}
#bo_list .cb-head:not(:has(.cb-chk)) {
    grid-template-columns: 44px minmax(0, 1fr) 84px 108px;
}
#bo_list .cb-head-no,
#bo_list .cb-head-label,
#bo_list .cb-head-author,
#bo_list .cb-head-meta {
    color: var(--clarity-muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .01em;
}
#bo_list .cb-head-no { text-align: center; }
#bo_list .cb-head-label { min-width: 0; }
#bo_list .cb-head-author { width: auto; text-align: left; }
#bo_list .cb-head-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .625rem;
    width: auto;
    text-align: right;
}
#bo_list .cb-head-hit,
#bo_list .cb-head-date { min-width: 0; text-align: right; }
#bo_list .cb-row {
    padding: .6875rem 1.125rem;
    border-top: 0;
    border-bottom: 1px solid var(--clarity-border);
}
#bo_list .cb-list > .cb-row:last-child { border-bottom: 0; }
#bo_list .cb-row:hover { background: var(--clarity-surface-soft); }
#bo_list .cb-row:hover::before { opacity: .35; }
#bo_list .cb-foot { gap: .75rem; }

body.clarity-page .clarity-board-pagination {
    min-height: 64px;
    align-items: center;
    margin: 0;
    padding: 1rem;
    border-top: 1px solid var(--clarity-border);
    border-radius: 0 0 12px 12px;
    background: var(--clarity-surface);
}
body.clarity-page .clarity-board-pagination .pg {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.clarity-page .clarity-board-pagination .pg_current {
    background: var(--clarity-text);
    color: var(--clarity-surface);
}
body.clarity-page .clarity-board-pagination .pg_page:hover,
body.clarity-page .clarity-board-pagination .pg_page:focus-visible {
    background: var(--clarity-surface-soft);
    color: var(--clarity-text);
}

.clarity-board-list-actions {
    margin-top: 1rem;
}
.clarity-board-search-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: min(100%, 35rem);
    margin: 0 auto;
}
.clarity-board-search-inline .clarity-board-search-select {
    flex: 0 0 7.25rem;
}
/* 전역 select 배경 규칙이 daisyUI Select의 기본 화살표를 지우므로,
   동일한 currentColor 기반 표시를 Clarity 검색 셀렉트에 복원한다.
   appearance는 daisyUI 5의 base-select 동작을 유지하도록 덮어쓰지 않는다. */
body.clarity-page #bo_list select.clarity-board-search-select {
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%) !important;
    background-repeat: no-repeat !important;
    background-size: 4px 4px !important;
    padding-inline: .75rem 1.75rem;
}
body.clarity-page #bo_list select.clarity-board-search-select:open {
    background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%) !important;
}
body.clarity-page #bo_list #bo_sch select.clarity-board-search-select {
    background-color: var(--clarity-surface-soft) !important;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
}
.clarity-board-search-inline .clarity-board-search-input {
    height: 40px;
    min-width: 0;
    flex: 1;
    padding: 0 .8125rem;
    border: 1px solid var(--clarity-border);
    border-radius: 9px;
    background: var(--clarity-surface);
    color: var(--clarity-text);
    font-family: inherit;
    font-size: .8125rem;
}
.clarity-board-search-inline .clarity-board-search-input:focus,
.clarity-board-search-inline .clarity-board-search-select:focus {
    border-color: var(--clarity-primary);
    box-shadow: 0 0 0 3px var(--clarity-primary-soft);
    outline: 0;
}
.clarity-board-search-inline .clarity-board-search-submit {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 1.125rem;
    border: 0;
    border-radius: 9px;
    background: var(--clarity-text);
    color: var(--clarity-surface);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s ease;
}
.clarity-board-search-inline .clarity-board-search-submit:hover,
.clarity-board-search-inline .clarity-board-search-submit:focus-visible { filter: brightness(1.15); }
.clarity-board-bottom-write {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}
.clarity-board-write-link {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    min-height: 40px;
    padding: 0 1.125rem;
    border-radius: 9px;
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--clarity-shadow-sm);
    transition: background-color .14s ease;
}
.clarity-board-write-link:hover,
.clarity-board-write-link:focus-visible { background: var(--clarity-primary-hover); color: var(--clarity-primary-ink); }

@media (max-width: 767px) {
    #bo_list .cb-head {
        grid-template-columns: 18px minmax(0, 1fr);
        min-height: 40px;
    }
    #bo_list .cb-head:not(:has(.cb-chk)) { display: none; }
    #bo_list .cb-head-no,
    #bo_list .cb-head-label,
    #bo_list .cb-head-author,
    #bo_list .cb-head-meta { display: none; }
    #bo_list .cb-toolbar-row { padding: .6875rem .875rem; }
    #bo_list .cb-row { border-bottom-color: var(--clarity-border); }
    .clarity-board-search-inline { flex-wrap: wrap; }
    .clarity-board-search-inline .clarity-board-search-select { flex-basis: 7rem; }
    .clarity-board-search-inline .clarity-board-search-input { flex-basis: calc(100% - 7.5rem); }
    .clarity-board-search-inline .clarity-board-search-submit { width: 100%; }
}