/* 본문 · 추천 · 첨부

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

body.clarity-page #bo_v_con :is(ul, ol) {
    margin: 1rem 0;
    padding-left: 1.35rem;
}

body.clarity-page #bo_v_con ul { list-style: disc; }
body.clarity-page #bo_v_con ol { list-style: decimal; }

body.clarity-page #bo_v_con a {
    color: var(--clarity-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--clarity-accent) 35%, transparent);
    text-underline-offset: .16em;
}

body.clarity-page #bo_v_act {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin: 2em 0 0 0;
    padding-top: 1.3rem;
    text-align: center;
}

body.clarity-page #bo_v_act .bo_v_act_gng,
body.clarity-page #bo_v_act > :is(.bo_v_good, .bo_v_nogood) {
    position: relative;
}

body.clarity-page #bo_v_act :is(.bo_v_good, .bo_v_nogood) {
    display: inline-flex;
    min-width: 5.6rem;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 0;
    padding: 0 .85rem;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-pill);
    background: var(--clarity-surface-soft);
    color: var(--clarity-muted);
    line-height: 1;
}

body.clarity-page #bo_v_act :is(.bo_v_good, .bo_v_nogood):hover {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

body.clarity-page #bo_v_act :is(.bo_v_good, .bo_v_nogood) strong {
    color: var(--clarity-text);
    font-size: .75rem;
}

body.clarity-page #bo_v_file,
body.clarity-page #bo_v_link {
    margin: 0;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
}

body.clarity-page #bo_v_file ul,
body.clarity-page #bo_v_link ul {
    display: grid;
    gap: .6rem;
}

body.clarity-page #bo_v_file li,
body.clarity-page #bo_v_link li {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: .6rem;
    align-items: start;
    margin: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--clarity-border);
    border-radius: var(--clarity-radius-sm);
    background: var(--clarity-surface);
}

body.clarity-page #bo_v_file li > i,
body.clarity-page #bo_v_link li > i {
    float: none;
    margin: .1rem 0 0;
    color: var(--clarity-primary);
    font-size: 1rem;
}

body.clarity-page #bo_v_file li > a,
body.clarity-page #bo_v_link li > a {
    float: none;
    min-width: 0;
    margin: 0;
    color: var(--clarity-text-soft);
    overflow-wrap: anywhere;
}

body.clarity-page #bo_v_file li > br,
body.clarity-page #bo_v_link li > br { display: none; }

body.clarity-page #bo_v_file .bo_v_file_cnt,
body.clarity-page #bo_v_link .bo_v_link_cnt {
    grid-column: 2;
    color: var(--clarity-muted);
    font-size: .7rem;
}

body.clarity-page .bo_v_nb {
    margin: 0;
    padding: .55rem 2rem;
    border-top: 1px solid var(--clarity-border);
    border-bottom: 1px solid var(--clarity-border);
    background: var(--clarity-surface-soft);
}

body.clarity-page .bo_v_nb li {
    display: grid;
    grid-template-columns: 4.3rem minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    min-height: 2.8rem;
    padding: .45rem 0;
    border: 0;
}

body.clarity-page .bo_v_nb li + li { border-top: 1px solid var(--clarity-border); }