/* 댓글 카드 — 목록 · 스레드 들여쓰기 · 연결선

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

/* ── 댓글 카드 (스레드형) ───────────────────────────────────
   헤더 · 목록 · 작성폼이 한 장의 카드로 이어지도록
   위/아래 모서리만 둥글린다. */
body.clarity-page #bo_v .cv-cmt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0;
    padding: 1rem 1.375rem;
    border: 1px solid var(--clarity-border);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    background: var(--clarity-surface-soft);
    box-shadow: var(--clarity-shadow-sm);
}
body.clarity-page #bo_v .cv-cmt-head .cmt_btn {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 0;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
body.clarity-page #bo_v .cv-cmt-head .total {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--clarity-text);
    font-size: .95rem;
}
body.clarity-page #bo_v .cv-cmt-head .total b { font-weight: 800; }
body.clarity-page #bo_v .cv-cmt-head .total:after { display: none; }
body.clarity-page #bo_v .cv-cmt-count {
    display: inline-grid;
    min-width: 1.375rem;
    height: 1.375rem;
    margin-left: .4rem;
    padding: 0 .4375rem;
    place-items: center;
    border-radius: 999px;
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-size: .7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
body.clarity-page #bo_v .cv-cmt-tools { display: flex; align-items: center; gap: .5rem; }
body.clarity-page #bo_v .cv-fold {
    height: 2.125rem;
    flex: none;
    padding: 0 .75rem;
    border: 1px solid var(--clarity-border);
    border-radius: .625rem;
    background: var(--clarity-surface);
    color: var(--clarity-text-soft);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
body.clarity-page #bo_v .cv-fold:hover {
    border-color: var(--clarity-primary);
    background: var(--clarity-primary-soft);
    color: var(--clarity-primary);
}

/* 목록 */
body.clarity-page #bo_v #bo_vc {
    margin: 0;
    padding: 0;
    border: 1px solid var(--clarity-border);
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    background: var(--clarity-surface);
}
body.clarity-page #bo_v #bo_vc > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

body.clarity-page #bo_v #bo_vc article.cv-cmt {
    position: relative;
    display: flex;
    gap: .625rem;
    margin: 0;
    padding: .75rem 1.375rem;
    border: 0;
    transition: background-color .16s ease;
}
body.clarity-page #bo_v #bo_vc article.cv-cmt:hover { background: var(--clarity-surface-soft); }
/* 스레드 들여쓰기 — 계층당 30px */
body.clarity-page #bo_v #bo_vc article.cv-cmt--l1 { padding-left: 3.25rem; }
body.clarity-page #bo_v #bo_vc article.cv-cmt--l2 { padding-left: 5.125rem; }
body.clarity-page #bo_v #bo_vc article.cv-cmt--l3 { padding-left: 7rem; }

body.clarity-page #bo_v #bo_vc article .pf_img {
    position: relative;
    width: 1.875rem;
    height: 1.875rem;
    flex: none;
    align-self: flex-start;
    margin: 0;
}
/* 그누보드가 수정·답변용으로 심어두는 빈 span 이다. margin:10px 두 개가
   행 높이를 117px 까지 부풀렸다. 비어 있을 때는 자리를 차지하지 않게 한다. */
body.clarity-page #bo_v #bo_vc article .bo_vc_w:empty { display: none; margin: 0; }
body.clarity-page #bo_v #bo_vc article .pf_img img,
body.clarity-page #bo_v #bo_vc article .pf_img .cv-avatar {
    display: inline-grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--clarity-surface-tint);
    color: var(--clarity-primary);
    font-size: .74rem;
    font-weight: 800;
    object-fit: cover;
}
/* 답글 연결선: 부모에서 내려와 아바타로 꺾이는 ㄴ 자 */
body.clarity-page #bo_v #bo_vc article[data-cv-level]:not([data-cv-level="0"]) .pf_img::before,
body.clarity-page #bo_v #bo_vc article[data-cv-level]:not([data-cv-level="0"]) .pf_img::after {
    position: absolute;
    background: var(--clarity-border);
    content: "";
}
body.clarity-page #bo_v #bo_vc article[data-cv-level]:not([data-cv-level="0"]) .pf_img::before {
    top: 50%;
    left: -1rem;
    width: .75rem;
    height: 1px;
}
body.clarity-page #bo_v #bo_vc article[data-cv-level]:not([data-cv-level="0"]) .pf_img::after {
    bottom: 50%;
    left: -1rem;
    width: 1px;
    height: 1.375rem;
}

body.clarity-page #bo_v #bo_vc article .cm_wrap {
    display: flex;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1;
    flex-direction: column;
    gap: .25rem;
}
body.clarity-page #bo_v #bo_vc article .cm_wrap > header {
    display: flex;
    flex-wrap: wrap;
    min-height: 0;
    align-items: baseline;
    gap: .4375rem;
    padding: 0 2.25rem 0 0;
    line-height: 1.3;
}
body.clarity-page #bo_v #bo_vc article .cm_wrap > header > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.clarity-page #bo_v #bo_vc header :is(.guest, .member, .sv_member) {
    color: var(--clarity-text);
    font-size: .82rem;
    font-weight: 800;
}
body.clarity-page #bo_v #bo_vc .cv-reply-to { color: var(--clarity-muted); font-size: .7rem; }
body.clarity-page #bo_v #bo_vc .bo_vc_hdinfo {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    color: var(--clarity-muted);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}
body.clarity-page #bo_v #bo_vc .bo_vc_hdinfo i { color: var(--clarity-muted); }
body.clarity-page #bo_v #bo_vc .cmt_contents { margin: 0; padding: 0; color: var(--clarity-text-soft); }
body.clarity-page #bo_v #bo_vc .cmt_contents p { margin: 0; font-size: .86rem; line-height: 1.7; word-break: keep-all; }

body.clarity-page #bo_v #bo_vc .bo_vl_opt {
    position: absolute;
    top: .75rem;
    right: 1.375rem;
    z-index: 17;
}
body.clarity-page #bo_v #bo_vc .bo_vl_opt .btn_cm_opt {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px solid var(--clarity-border);
    border-radius: .5rem;
    background: var(--clarity-surface);
    color: var(--clarity-muted);
    /* 완전히 숨기면 행에 들어가기 전까지 조준할 표적이 없어서, 어디를
       겨눠야 하는지 모른 채 hover 가 헛나간다. 옅게라도 항상 보여준다. */
    opacity: .4;
    transition: opacity .16s ease, border-color .14s ease, color .14s ease;
}
body.clarity-page #bo_v #bo_vc article:hover .btn_cm_opt,
body.clarity-page #bo_v #bo_vc .btn_cm_opt:focus-visible { opacity: 1; }
body.clarity-page #bo_v #bo_vc .btn_cm_opt:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
body.clarity-page #bo_v #bo_vc_empty {
    margin: 0;
    padding: 3rem 1.375rem;
    color: var(--clarity-muted);
    font-size: .85rem;
    text-align: center;
}