/* 댓글 작성 폼과 등록 중 상태

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

/* 작성 폼 */
body.clarity-page #bo_v #bo_vc_w {
    margin: 0;
    padding: 1.125rem 1.375rem;
    border: 1px solid var(--clarity-border);
    border-top: 1px solid var(--clarity-border);
    border-radius: 0 0 1rem 1rem;
    background: var(--clarity-surface-soft);
}
body.clarity-page #bo_v #bo_vc_w > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) form { display: flex; flex-direction: column; gap: .6875rem; }
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) textarea {
    box-sizing: border-box;
    width: 100%;
    padding: .75rem .8125rem;
    border: 1px solid var(--clarity-border-strong);
    border-radius: .75rem;
    background: var(--clarity-surface);
    color: var(--clarity-text);
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.6;
    resize: vertical;
}
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) textarea:focus { border-color: var(--clarity-primary); outline: 0; }
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .bo_vc_w_wr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
}
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .btn_confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .875rem;
    margin-left: auto;
}
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .cv-write-note { color: var(--clarity-muted); font-size: .74rem; }
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .secret_cm label { color: var(--clarity-muted); font-size: .75rem; }
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .btn_submit {
    height: 2.375rem;
    padding: 0 1.125rem;
    border: 0;
    border-radius: 999px;
    background: var(--clarity-primary);
    color: var(--clarity-primary-ink);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .btn_submit:hover { background: var(--clarity-primary-hover); }

/* 등록 중 상태. 폼이 실제로 넘어가야 하므로 disabled 대신
   포인터만 막고 스피너로 진행 중임을 알린다. */
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .btn_submit.is-loading {
    position: relative;
    padding-left: 2.375rem;
    background: var(--clarity-primary-hover);
    pointer-events: none;
}
body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .btn_submit.is-loading::before {
    position: absolute;
    top: 50%;
    left: 1.125rem;
    box-sizing: border-box;
    width: .875rem;
    height: .875rem;
    margin-top: -.4375rem;
    border: 2px solid color-mix(in srgb, var(--clarity-primary-ink) 35%, transparent);
    border-top-color: var(--clarity-primary-ink);
    border-radius: 50%;
    animation: clarity-btn-spin .6s linear infinite;
    content: "";
}
@keyframes clarity-btn-spin { to { transform: rotate(360deg); } }
/* 모션을 줄이는 설정에서도 진행 표시는 남기되 속도만 낮춘다. */
@media (prefers-reduced-motion: reduce) {
    body.clarity-page #bo_v :is(#bo_vc_w, .bo_vc_w) .btn_submit.is-loading::before { animation-duration: 1.8s; }
}