/* Clarity board surfaces: a focused visual layer for the stock board markup. */
body.clarity-page #bo_list {
    width: 100% !important;
    margin: 0;
    color: var(--clarity-text);
}

body.clarity-page:has(#bo_list) {
    --clarity-board-title-size: 14.5px;
    --clarity-board-meta-size: 14.5px;
    --clarity-board-head-size: 14px;
}

body.clarity-page #bo_cate {
    margin: 0 0 1rem;
    padding: .35rem;
    border: 1px solid var(--clarity-border);
    border-radius: .85rem;
    background: var(--clarity-surface);
    box-shadow: var(--clarity-shadow-sm);
}

body.clarity-page #bo_cate h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body.clarity-page #bo_cate_ul {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0;
    padding: 0;
}

body.clarity-page #bo_cate_ul li {
    margin: 0;
}

body.clarity-page #bo_cate_ul a {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    padding: 0 .8rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    color: var(--clarity-muted);
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.clarity-page #bo_cate_ul a:hover,
body.clarity-page #bo_cate_ul a:focus-visible,
body.clarity-page #bo_cate_ul #bo_cate_on {
    border-color: color-mix(in srgb, var(--clarity-primary) 20%, var(--clarity-border));
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

body.clarity-page:has(#bo_list) .clarity-page-header {
    position: relative;
    overflow: hidden;
    min-height: 7.25rem;
    margin-bottom: 1.15rem !important;
    padding: 1.25rem 1.35rem !important;
    border: 1px solid color-mix(in srgb, var(--clarity-primary) 20%, var(--clarity-border)) !important;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--clarity-surface) 0%, var(--clarity-surface-tint) 100%);
    box-shadow: 0 .6rem 1.4rem color-mix(in srgb, var(--clarity-primary) 8%, transparent);
}

body.clarity-page:has(#bo_list) .clarity-page-header::before {
    position: absolute;
    inset: 0 0 auto;
    height: .2rem;
    background: linear-gradient(90deg, var(--clarity-primary), color-mix(in srgb, var(--clarity-primary) 35%, var(--clarity-accent)));
    content: "";
}

body.clarity-page:has(#bo_list) .clarity-page-header::after {
    position: absolute;
    right: -3rem;
    bottom: -5rem;
    width: 13rem;
    height: 13rem;
    border: 1px solid color-mix(in srgb, var(--clarity-primary) 14%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 1rem color-mix(in srgb, var(--clarity-primary) 4%, transparent), 0 0 0 2rem color-mix(in srgb, var(--clarity-primary) 3%, transparent);
    pointer-events: none;
    content: "";
}

body.clarity-page:has(#bo_list) .clarity-page-header > * {
    position: relative;
    z-index: 1;
}

body.clarity-page:has(#bo_list) .clarity-page-header #container_title {
    color: var(--clarity-text);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 64px;
}

body.clarity-page:has(#bo_list) .clarity-page-header-action {
    min-height: 2.35rem;
    border: 1px solid var(--clarity-border);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--clarity-surface) 78%, transparent);
    color: var(--clarity-text-soft);
    font-weight: 800;
}

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: color-mix(in srgb, var(--clarity-primary) 36%, var(--clarity-border));
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

body.clarity-page #bo_btn_top {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .9rem;
    padding: .35rem .4rem .35rem .8rem;
    border: 1px solid var(--clarity-border);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--clarity-surface) 86%, var(--clarity-primary-soft));
    box-shadow: var(--clarity-shadow-sm);
}

body.clarity-page #bo_list_total {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    float: none;
    margin: 0;
    color: var(--clarity-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.4;
    white-space: nowrap;
}

body.clarity-page .clarity-board-toolbar-eyebrow {
    margin-right: .25rem;
    color: var(--clarity-primary);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .13em;
    line-height: 1;
}

body.clarity-page .clarity-board-total-count {
    color: var(--clarity-text);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

body.clarity-page .clarity-board-total-label,
body.clarity-page .clarity-board-page-label {
    color: var(--clarity-muted);
    font-size: .72rem;
    font-weight: 700;
}

body.clarity-page .clarity-board-page-label {
    margin-left: .35rem;
    padding-left: .55rem;
    border-left: 1px solid var(--clarity-border-strong);
}

body.clarity-page #bo_btn_top .btn_bo_user,
body.clarity-page #fboardlist > .btn_top.btn_bo_user {
    display: flex;
    float: none;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    margin: 0 0 0 auto;
}

body.clarity-page #bo_btn_top .btn_bo_user li,
body.clarity-page #fboardlist > .btn_top.btn_bo_user > li {
    float: none;
    width: auto;
    margin: 0;
    background: transparent;
}

body.clarity-page #bo_btn_top .btn_bo_user li > :is(a, button),
body.clarity-page #fboardlist > .btn_top.btn_bo_user li > :is(a, button) {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid var(--clarity-border);
    border-radius: .75rem;
    background: var(--clarity-surface);
    color: var(--clarity-muted);
    font-size: .78rem;
    line-height: 1;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

body.clarity-page #bo_btn_top .btn_bo_user li > :is(a, button):hover,
body.clarity-page #bo_btn_top .btn_bo_user li > :is(a, button):focus-visible,
body.clarity-page #fboardlist > .btn_top.btn_bo_user li > :is(a, button):hover,
body.clarity-page #fboardlist > .btn_top.btn_bo_user li > :is(a, button):focus-visible {
    border-color: color-mix(in srgb, var(--clarity-primary) 42%, var(--clarity-border));
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

body.clarity-page #bo_btn_top .btn_bo_user li > :is(a, button):active,
body.clarity-page #fboardlist > .btn_top.btn_bo_user li > :is(a, button):active {
    transform: translateY(1px);
}

body.clarity-page #bo_btn_top .clarity-board-write,
body.clarity-page #fboardlist > .btn_top.btn_bo_user .clarity-board-write {
    width: auto !important;
    min-width: 5.25rem;
    gap: .4rem;
    padding: 0 .85rem !important;
    border-color: var(--clarity-primary) !important;
    background: var(--clarity-primary) !important;
    color: var(--clarity-primary-ink) !important;
}

body.clarity-page #bo_btn_top .clarity-board-write:hover,
body.clarity-page #bo_btn_top .clarity-board-write:focus-visible,
body.clarity-page #fboardlist > .btn_top.btn_bo_user .clarity-board-write:hover,
body.clarity-page #fboardlist > .btn_top.btn_bo_user .clarity-board-write:focus-visible {
    border-color: var(--clarity-primary-hover) !important;
    background: var(--clarity-primary-hover) !important;
    color: var(--clarity-primary-ink) !important;
}

body.clarity-page .clarity-board-action-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
}