/* 이전·다음과 기본 스킨 댓글

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

body.clarity-page .bo_v_nb li:hover { background: transparent; }

body.clarity-page .bo_v_nb .nb_tit {
    padding: 0;
    color: var(--clarity-muted);
    font-size: .72rem;
    font-weight: 700;
}

body.clarity-page .bo_v_nb .nb_tit i { color: var(--clarity-primary); }

body.clarity-page .bo_v_nb li > a {
    min-width: 0;
    overflow: hidden;
    color: var(--clarity-text-soft);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.clarity-page .bo_v_nb li > a:hover { color: var(--clarity-primary); }

body.clarity-page .bo_v_nb .nb_date {
    float: none;
    color: var(--clarity-muted);
    font-size: .7rem;
}

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

body.clarity-page #bo_vc > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

body.clarity-page .cmt_btn {
    display: block;
    min-height: 3.75rem;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--clarity-border);
    background: transparent;
    color: var(--clarity-text);
    font-size: 1rem;
}

body.clarity-page .cmt_btn span.total {
    margin: 0;
    padding-bottom: .85rem;
    color: var(--clarity-text);
}

body.clarity-page .cmt_btn span.total b { font-weight: 800; }
body.clarity-page .cmt_btn span.total:after { bottom: -.05rem; height: 2px; background: var(--clarity-primary); }

body.clarity-page #bo_vc article {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--clarity-border);
}

body.clarity-page #bo_vc article .pf_img {
    margin-right: .75rem;
}

body.clarity-page #bo_vc article .pf_img img {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--clarity-border);
    background: var(--clarity-surface);
}

body.clarity-page #bo_vc article .cm_wrap {
    width: calc(100% - 3.25rem);
    max-width: none;
}

body.clarity-page #bo_vc header {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    padding-right: 2.4rem;
    line-height: 1.35;
}

body.clarity-page #bo_vc header .guest,
body.clarity-page #bo_vc header .member,
body.clarity-page #bo_vc header .sv_guest,
body.clarity-page #bo_vc header .sv_member {
    color: var(--clarity-text);
    font-size: .8rem;
    font-weight: 800;
}

body.clarity-page #bo_vc header > span:not(.bo_vc_hdinfo):not(.sound_only) {
    color: var(--clarity-muted);
    font-size: .72rem;
}

body.clarity-page #bo_vc .bo_vc_hdinfo {
    margin-left: .45rem;
    color: var(--clarity-muted);
    font-size: .7rem;
}

body.clarity-page #bo_vc .bo_vc_hdinfo i { color: var(--clarity-primary); }

body.clarity-page #bo_vc .cmt_contents {
    margin: .45rem 0 0;
    padding: 0;
    color: var(--clarity-text-soft);
    line-height: 1.7;
}

body.clarity-page #bo_vc .cmt_contents p { margin: 0; font-size: .88rem; }

body.clarity-page #bo_vc .bo_vl_opt {
    top: 1rem;
    right: 0;
}

body.clarity-page #bo_vc .bo_vl_opt .btn_cm_opt {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid var(--clarity-border);
    border-radius: .7rem;
    background: var(--clarity-surface);
    color: var(--clarity-muted);
}

body.clarity-page #bo_vc .bo_vl_opt .btn_cm_opt:hover,
body.clarity-page #bo_vc .bo_vl_opt .btn_cm_opt:focus-visible {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

body.clarity-page #bo_vc .bo_vl_opt:focus-within .bo_vc_act {
    display: block !important;
}

body.clarity-page #bo_vc .bo_vl_opt:hover .bo_vc_act {
    display: block !important;
}

body.clarity-page #bo_vc article[style*="margin-left"] {
    border-left: 2px solid color-mix(in srgb, var(--clarity-primary) 38%, var(--clarity-border));
    padding-left: 1rem;
}

body.clarity-page #bo_vc_w {
    margin: 1.25rem 0 0;
    padding: 1rem;
    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_vc_w form { display: grid; gap: .75rem; }

body.clarity-page #bo_vc_w textarea {
    display: block;
    width: 100%;
    min-height: 7.5rem;
    margin: 0;
    padding: .85rem;
    border: 1px solid var(--clarity-border-strong);
    border-radius: var(--clarity-radius-sm);
    background: var(--clarity-surface-soft);
    color: var(--clarity-text);
    resize: vertical;
}

body.clarity-page #bo_vc_w textarea::placeholder { color: var(--clarity-muted); }

body.clarity-page #bo_vc_w textarea:focus {
    border-color: var(--clarity-primary);
    outline: 3px solid color-mix(in srgb, var(--clarity-primary) 18%, transparent);
}

body.clarity-page #bo_vc_w .btn_confirm {
    display: flex;
    min-height: 2.45rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0;
}

body.clarity-page #bo_vc_w .btn_submit {
    min-height: 2.45rem;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--clarity-radius-pill);
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-size: .78rem;
    font-weight: 800;
}

body.clarity-page #bo_vc_w .btn_submit:hover,
body.clarity-page #bo_vc_w .btn_submit:focus-visible {
    background: var(--clarity-primary-hover);
}

body.clarity-page #bo_vc_w .chk_box label { color: var(--clarity-muted); font-size: .75rem; }
body.clarity-page #bo_vc_w .chk_box input[type="checkbox"] + label span { border-color: var(--clarity-border-strong); background: var(--clarity-surface-soft); }
body.clarity-page #bo_vc_w .chk_box input[type="checkbox"]:checked + label span { border-color: var(--clarity-primary); background: var(--clarity-primary); }