/* ============================================================
   댓글 개편 v2 — .comment-area.cmt-v2 일 때만 적용
   (view_comment.skin.html.php 의 $cmt_v2: 지금은 admin·vovos2 한정)
   카드 테두리 제거·아바타 열·익명 번호 아바타·들여쓰기 2단계·↳대상·고스트 버튼
   dark_mode.css 가 댓글 요소에 !important 를 많이 걸어 두어, 겹치는 속성은 !important + 높은 특정성으로 덮는다
   ============================================================ */

.comment-area.cmt-v2 {
    --cv-line: #e6e8eb;
    --cv-thread: #d5d9de;   /* 대댓글 연결선(1px) */
    /* 포인트 당첨 칩: 행운=초록 첫댓글=노랑 지뢰=빨강 (배경/글자) */
    --cv-rw-lucky-b: #EAF3DE; --cv-rw-lucky-t: #27500A;
    --cv-rw-first-b: #FAEEDA; --cv-rw-first-t: #633806;
    --cv-rw-bomb-b:  #FCEBEB; --cv-rw-bomb-t:  #791F1F;
    --cv-text: #222;
    --cv-sub: #5f6875;      /* 라이트 시인성 보정(10-28): 댓글달기·⋮·입력박스 아이콘 3.6→5.6:1 */
    --cv-muted: #6b7380;    /* 날짜 등 2.3→4.8:1 */
    --cv-hover: #f3f4f6;
    --cv-accent: #2DAAB8;
    --cv-danger: #c0392b;
    --cv-author: #d6497c;
    --cv-author-wash: rgba(233, 90, 139, .06);
    --cv-author-chip: rgba(233, 90, 139, .12);
    --cv-best: #9a6a12;
    --cv-best-wash: rgba(255, 193, 7, .09);
    --cv-flash: rgba(255, 193, 7, .30);
    --cv-me: #2DAAB8;
    --cv-menu: #374151;
    --cv-menu-hover: #111827;
    --cv-menu-hover-bg: #f3f4f6;
    --cv-pill-border: #d7dbe0;
    /* 익명 번호 아바타 8색(배경/글자) — 글 안의 익명 번호 % 8 */
    --cv-h0b: #E1F5EE; --cv-h0t: #085041;
    --cv-h1b: #EEEDFE; --cv-h1t: #3C3489;
    --cv-h2b: #FAECE7; --cv-h2t: #712B13;
    --cv-h3b: #E6F1FB; --cv-h3t: #0C447C;
    --cv-h4b: #EAF3DE; --cv-h4t: #27500A;
    --cv-h5b: #FAEEDA; --cv-h5t: #633806;
    --cv-h6b: #F1EFE8; --cv-h6t: #444441;
    --cv-h7b: #FCEBEB; --cv-h7t: #791F1F;
    --cv-aub: #FBEAF0; --cv-aut: #72243E;
}
.dark-mode .comment-area.cmt-v2 {
    --cv-line: #363e49;     /* 다크 시인성 보정(10-28): 구분선 1.35→1.75:1 */
    --cv-thread: #4b5563;   /* 연결선 1.7→2.5:1 */
    --cv-rw-lucky-b: rgba(99, 153, 34, .16);  --cv-rw-lucky-t: #C0DD97;
    --cv-rw-first-b: rgba(239, 159, 39, .14); --cv-rw-first-t: #FAC775;
    --cv-rw-bomb-b:  rgba(226, 75, 74, .14);  --cv-rw-bomb-t:  #F7C1C1;
    --cv-text: #d4dae4;
    --cv-sub: #9aa6b5;      /* 댓글달기·⋮ 5.8→7.7:1 */
    --cv-muted: #8b96a5;    /* 날짜 등 3.3→6.3:1 (12px 글자라 4.5 이상 필요) */
    --cv-hover: #1a2030;
    --cv-danger: #e57373;
    --cv-author: #f48fb1;
    --cv-author-wash: rgba(233, 90, 139, .10);
    --cv-author-chip: rgba(233, 90, 139, .18);
    --cv-best: #e0b54a;
    --cv-best-wash: rgba(255, 193, 7, .07);
    --cv-flash: rgba(255, 193, 7, .22);
    --cv-menu: #c9d1d9;
    --cv-menu-hover: #f472b6;
    --cv-menu-hover-bg: #252d38;
    --cv-pill-border: #3a4350;
    --cv-h0b: #085041; --cv-h0t: #E1F5EE;
    --cv-h1b: #3C3489; --cv-h1t: #EEEDFE;
    --cv-h2b: #712B13; --cv-h2t: #FAECE7;
    --cv-h3b: #0C447C; --cv-h3t: #E6F1FB;
    --cv-h4b: #27500A; --cv-h4t: #EAF3DE;
    --cv-h5b: #633806; --cv-h5t: #FAEEDA;
    --cv-h6b: #444441; --cv-h6t: #F1EFE8;
    --cv-h7b: #791F1F; --cv-h7t: #FCEBEB;
    --cv-aub: #72243E; --cv-aut: #FBEAF0;
}

/* ── 스레드: 카드 → 평평한 목록, 최상위 댓글 사이에만 구분선 ── */
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap {
    margin: 0 !important;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
}
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd0 {
    border-top: 1px solid var(--cv-line) !important;
}
.comment-area.cmt-v2 .view-comment .view-comment-heading + h2 + .view-comment-item-wrap {
    border-top: 0 !important;
}
/* 들여쓰기 최대 2단계 + 꺾이는 연결선(부모 아바타 아래 → 답글 아바타로 둥글게 꺾임)
   들여쓰기를 margin 이 아닌 padding 으로 해서 wrap 안쪽에 선을 그린다.
   좌표(PC): 아바타 24px·항목 왼쪽 여백 4px → 최상위 선 x=15, 1단계 아바타 왼쪽 30·선 x=41, 2단계 아바타 왼쪽 56.
   아바타 크기·항목 여백을 바꾸면 이 숫자들도 같이 바꿀 것 */
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd1,
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd2 {
    position: relative;
    margin-left: 0 !important;
    border-left: 0 !important;
    border-radius: 0;
}
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd1 { padding-left: 26px !important; }
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd2 { padding-left: 52px !important; }
/* 꺾임: wrap 위쪽 끝 → 답글 아바타 중심 높이(위 여백 10 + 12)까지 내려와 오른쪽으로, 아바타 4px 앞에서 멈춤(10-29) */
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd1::before,
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd2::before {
    content: "";
    display: block !important;
    position: absolute;
    top: 0;
    bottom: auto;
    width: 11px;
    height: 22px;
    border-left: 1px solid var(--cv-thread);
    border-bottom: 1px solid var(--cv-thread);
    border-bottom-left-radius: 8px;
    background: none !important;
    box-sizing: border-box;
    pointer-events: none;
}
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd1::before { left: 15px; }
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd2::before { left: 41px; }
/* 아래로 더 이어지는 선(같은 부모의 다음 답글이 있을 때) — 템플릿이 cmt-l0 / cmt-l1 로 알려준다 */
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-l0 {
    background: linear-gradient(var(--cv-thread), var(--cv-thread)) 15px 0 / 1px 100% no-repeat !important;
}
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-l1 {
    background: linear-gradient(var(--cv-thread), var(--cv-thread)) 41px 0 / 1px 100% no-repeat !important;
}
.comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-l0.cmt-l1 {
    background:
        linear-gradient(var(--cv-thread), var(--cv-thread)) 15px 0 / 1px 100% no-repeat,
        linear-gradient(var(--cv-thread), var(--cv-thread)) 41px 0 / 1px 100% no-repeat !important;
}
/* 화면에 보이는 답글이 달린 댓글: 아바타 바로 아래(위 여백 10 + 아바타 24 + 4)부터 선 */
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-thread-parent::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 38px;
    bottom: 0;
    width: 1px;
    background: var(--cv-thread);
    pointer-events: none;
}

/* ── 댓글 한 줄: 아바타 | 본문 ── */
.comment-area.cmt-v2 .view-comment .view-comment-item,
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
    margin: 0 !important;              /* 인라인 style="margin-left:15px" 무효화 */
    padding: 10px 4px 6px !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none;                  /* !important 아님 — .cmt-flash 애니메이션이 덮을 수 있게 */
    overflow: visible !important;
}
.comment-area.cmt-v2 .view-comment .view-comment-item .comment-item-body,
.comment-area.cmt-v2 .view-comment .view-comment-item .comment-item-body-pn,
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .comment-item-body,
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .comment-item-body-pn {
    flex: 1 1 auto;
    flex-basis: auto;
    width: auto;
    min-width: 0;
    padding: 0 !important;
}

/* 베스트 댓글 — 따뜻한 배경 + 맨 윗줄에 왕관 배지 '베스트 댓글 N'(누르면 원래 위치로)
   배지를 이름 줄에 겹쳐 띄우면 긴 닉네임과 부딪혀서, 아바타·본문 위 별도 한 줄로 둔다 */
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best {
    position: relative;
    flex-wrap: wrap;
    row-gap: 0;
    background: var(--cv-best-wash) !important;
    padding: 9px 8px 7px !important;
    margin: 6px 0 !important;
}
/* 배지 뒤 줄바꿈용 빈 flex 항목(배지 폭만큼만 차지하게 하고 아바타·본문은 다음 줄로) */
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best::before {
    content: "";
    display: block !important;
    position: static !important;      /* comment.1.css 의 세로선(:before absolute) 무효화 */
    top: auto;
    left: auto;
    width: auto;
    order: -1;
    flex: 0 0 100%;
    height: 0;
    background: none !important;
}
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .view-cmtgo-btn { display: none !important; }
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .view-comment-best-label {
    position: static !important;
    order: -2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    height: 22px;
    margin: 0 0 7px;
    padding: 0 10px 0 8px;
    border: 0 !important;
    border-radius: 11px;
    background: linear-gradient(135deg, #ffb21e 0%, #ff7a1a 100%) !important;
    color: #fff !important;
    font-size: .71875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
    box-shadow: 0 1px 4px rgba(255, 122, 26, .35);
    cursor: pointer;
    transition: filter .15s ease;
}
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .view-comment-best-label::before {
    content: "";
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/%3E%3Cpath d='M5 21h14' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/%3E%3Cpath d='M5 21h14' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .view-comment-best-label:hover { filter: brightness(1.06); }
.dark-mode .comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .view-comment-best-label {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
/* 줄바꿈 허용 상태에서 본문이 아바타 아래로 떨어지지 않게 기준폭 0 */
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .comment-item-body,
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .comment-item-body-pn {
    flex: 1 1 0 !important;
}

/* ── 아바타 ── */
.comment-area.cmt-v2 .view-comment .view-comment-photo,
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .view-comment-photo {
    display: block !important;
    position: static !important;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    z-index: auto;
}
.comment-area.cmt-v2 .view-comment .view-comment-photo img,
.comment-area.cmt-v2 .view-comment .view-comment-photo .comment-photo-initial {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover;
    font-size: 11px;
}
/* 이니셜 아바타 다크: comment.1.css 의 #3a3f48 원이 배경에 묻혀(1.8:1) 한 단계 밝게 */
.dark-mode .comment-area.cmt-v2 .view-comment .view-comment-photo .comment-photo-initial { background: #4a5260; color: var(--cv-text); }
.comment-area.cmt-v2 .cmt-av {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    user-select: none;
}
.comment-area.cmt-v2 .cmt-av-h0 { background: var(--cv-h0b); color: var(--cv-h0t); }
.comment-area.cmt-v2 .cmt-av-h1 { background: var(--cv-h1b); color: var(--cv-h1t); }
.comment-area.cmt-v2 .cmt-av-h2 { background: var(--cv-h2b); color: var(--cv-h2t); }
.comment-area.cmt-v2 .cmt-av-h3 { background: var(--cv-h3b); color: var(--cv-h3t); }
.comment-area.cmt-v2 .cmt-av-h4 { background: var(--cv-h4b); color: var(--cv-h4t); }
.comment-area.cmt-v2 .cmt-av-h5 { background: var(--cv-h5b); color: var(--cv-h5t); }
.comment-area.cmt-v2 .cmt-av-h6 { background: var(--cv-h6b); color: var(--cv-h6t); }
.comment-area.cmt-v2 .cmt-av-h7 { background: var(--cv-h7b); color: var(--cv-h7t); }
.comment-area.cmt-v2 .cmt-av-author { background: var(--cv-aub); color: var(--cv-aut); }
.comment-area.cmt-v2 .cmt-av.is-me { outline: 2px solid var(--cv-me); outline-offset: 1px; }
.comment-area.cmt-v2 .cmt-av-blocked,
.comment-area.cmt-v2 .cmt-av-deleted {
    background: transparent;
    border: 1px dashed var(--cv-muted);
    color: var(--cv-muted);
}
.comment-area.cmt-v2 .cmt-av svg { width: 12px; height: 12px; }

/* 아바타 열이 생겼으니 닉네임 앞 작은 아이콘·자리표시 안 아이콘은 숨김 */
.comment-area.cmt-v2 .view-comment .comment-name .bl-photo { display: none !important; }
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-deleted .cmt-deleted-text svg { display: none; }
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-deleted .cmt-deleted-text { margin: 6px 0 4px; color: var(--cv-muted); }

/* ── 이름·시간 줄 ── */
.comment-area.cmt-v2 .view-comment .comment-item-info,
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .comment-item-info,
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .comment-item-body-pn .comment-item-info {
    flex-wrap: wrap !important;
    row-gap: 2px;
    min-height: 22px;
    background: transparent !important;
    border: 0 !important;
}
.comment-area.cmt-v2 .view-comment .comment-item-info .m-t-5 {
    flex-shrink: 1 !important;
    flex-wrap: wrap;
    min-width: 0;
}
.comment-area.cmt-v2 .view-comment .comment-name { font-size: .875rem; }
.comment-area.cmt-v2 .view-comment .comment-time { font-size: .75rem; color: var(--cv-muted) !important; }
/* 익명 글쓴이: 알약 배지 → 분홍 이름 */
.comment-area.cmt-v2 .view-comment .cmt-author-badge {
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--cv-author) !important;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25;
}
/* 일반 게시판 작성자 칩 */
.comment-area.cmt-v2 .cmt-author-chip {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--cv-author-chip);
    color: var(--cv-author);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}
.comment-area.cmt-v2 .view-comment .cmt-my-label { border-radius: 4px; }
/* ↳ 답한 대상 */
.comment-area.cmt-v2 .cmt-reply-to {
    font-size: .75rem;
    font-weight: 500;
    color: var(--cv-accent) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.comment-area.cmt-v2 .cmt-reply-to:hover { text-decoration: underline !important; }

/* ── 본문·이미지 ── */
.comment-area.cmt-v2 .view-comment .comment-item-content { padding-top: 1px; }
.comment-area.cmt-v2 .view-comment .comment-item-content .comment-cont-txt { margin-top: 0; color: var(--cv-text); }
.comment-area.cmt-v2 .view-comment .view-comment-item .comment-item-content { margin-left: 0 !important; }
/* 이미지는 글 아래로(블라인드 안내·자물쇠 순서는 유지) */
.comment-area.cmt-v2 .view-comment .comment-item-content .comment-cont-wrap.display-flex {
    display: flex !important;
    flex-direction: column;
}
.comment-area.cmt-v2 .view-comment .comment-item-content .comment-cont-img {
    order: 2;
    width: auto !important;
    margin: 6px 0 0 !important;
}
.comment-area.cmt-v2 .view-comment .comment-item-content .comment-image {
    width: min(240px, 100%) !important;
    margin-bottom: 6px !important;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
}
.comment-area.cmt-v2 .view-comment .comment-item-content > .m-b-10:empty { margin-bottom: 2px !important; }

/* ── 버튼 줄: 추천·비추천·답글 왼쪽, 수정·삭제 오른쪽, 테두리 없는 고스트 ── */
.comment-area.cmt-v2 .view-comment .comment-btn-wrap { margin-top: 0 !important; margin-bottom: -2px !important; height: auto; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap .comment-btn-right {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin-left: -8px;
}
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 15px;
    background: transparent !important;
    color: var(--cv-sub) !important;
    font-size: .8125rem !important;
    font-weight: 500;
    box-shadow: none !important;
}
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment-btn:hover {
    background: var(--cv-hover) !important;
    color: var(--cv-text) !important;
}
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment-btn svg { width: 15px; height: 15px; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment-btn strong { font-weight: 500; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment-btn .text-light-gray { color: inherit !important; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap .board-cmt-act-good .text-amber { color: var(--cv-accent) !important; font-weight: 600; }
/* 버튼줄 순서: 👍추천(·비추천) | 💬댓글달기 — 추천이 앞(사용자 결정 10-28). 둘 다 왼쪽: 오른쪽 끝은 오른손 스크롤 엄지 자리라
   잘못 눌리기 쉽고 추천은 취소가 안 된다. 사이는 14px + 가는 구분선 */
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.goodcmt_button { order: 1; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.nogoodcmt_button { order: 2; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a[onclick*="'c')"] { order: 3; position: relative; margin-left: 14px !important; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a[onclick*="'c')"]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background: var(--cv-line);
    pointer-events: none;
}
/* 추천 버튼이 없으면 댓글달기가 맨 앞 — 간격·구분선 없음 */
.comment-area.cmt-v2 .view-comment .comment-btn-right:not(:has(.goodcmt_button)):not(:has(.nogoodcmt_button)) a[onclick*="'c')"] { margin-left: 0 !important; }
.comment-area.cmt-v2 .view-comment .comment-btn-right:not(:has(.goodcmt_button)):not(:has(.nogoodcmt_button)) a[onclick*="'c')"]::before { display: none; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a[onclick*="'cu')"] { order: 4; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment_delete { order: 5; }
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment_delete:hover { color: var(--cv-danger) !important; }
/* 수정·삭제 — 댓글달기 옆 테두리 필 버튼 */
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a[onclick*="'cu')"],
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment_delete {
    align-self: center;
    height: 22px !important;
    padding: 0 8px !important;
    margin-left: 4px !important;
    border: 1px solid var(--cv-pill-border) !important;
    border-radius: 11px;
    color: var(--cv-sub) !important;
    font-size: .6875rem !important;
    line-height: 1;
}
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a[onclick*="'cu')"]:hover {
    border-color: var(--cv-sub) !important;
    color: var(--cv-text) !important;
}
.comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment_delete:hover {
    background: transparent !important;
    border-color: var(--cv-danger) !important;
    color: var(--cv-danger) !important;
}

/* ⋮ 은 댓글마다 z-index 200 으로 같아서, 뒤 댓글의 ⋮ 버튼이 열린 메뉴 위에 비쳤다 → 열린 것만 한 단계 위로(10-29) */
.comment-area.cmt-v2 .view-comment .comment-dropdown.open { z-index: 210; }
/* ── ⋮ 메뉴(신고하기·차단하기·블라인드): comment.1.css 의 연회색(#9ca3af)이 라이트모드에서 흐려서 진하게 ── */
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu a {
    color: var(--cv-menu) !important;
    font-weight: 500;
}
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu a:hover {
    background: var(--cv-menu-hover-bg) !important;
    color: var(--cv-menu-hover) !important;
}
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu a.disabled,
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu a.disabled:hover {
    background: transparent !important;
    color: var(--cv-muted) !important;
}

/* ── 댓글 입력창: v2 는 '댓글쓰기' 제목 줄을 없앴으니 목록과 작성창 사이 간격만 둔다 ── */
.comment-area.cmt-v2 #view-comment-write { margin-top: 14px; }
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.cmt-point-info-opt { margin: 0; }
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.cmt-point-info-opt svg { width: 14px; height: 14px; }

/* ── 댓글 입력창 상단 옵션바(첨부·동영상·이모티콘·포인트 안내·비밀글) 컴팩트하게: 바 여백 15→6px, 버튼 30→28px ── */
.comment-area.cmt-v2 .comment-write .comment-write-option .option-btn-wrap {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 8px !important;
}
.comment-area.cmt-v2 .comment-write .comment-write-option .option-btn-wrap::before,
.comment-area.cmt-v2 .comment-write .comment-write-option .option-btn-wrap::after { display: none !important; }
.comment-area.cmt-v2 .comment-write .comment-write-option .option-btn-wrap .float-start,
.comment-area.cmt-v2 .comment-write .comment-write-option .option-btn-wrap .float-end {
    float: none !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
}
.comment-area.cmt-v2 .comment-write .comment-write-option .option-btn-wrap .float-end { margin-left: auto; }
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.btn-e.btn-gray {
    height: 28px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-width: 1px !important;
    font-size: .75rem !important;
}
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn svg,
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn .fa-svg { width: 14px; height: 14px; }

/* ── 댓글 입력창: 비밀글 토글(이모티콘 자리). 체크박스는 label 안에 숨겨져 있고 켜짐 표시는 :has(input:checked) ── */
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.cmt-secret-toggle {
    display: inline-flex !important;
    align-items: center;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.cmt-secret-toggle { position: relative; }
.comment-area.cmt-v2 .comment-option-btn.cmt-secret-toggle input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
    margin: 0 !important;
}
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.cmt-secret-toggle svg { width: 14px; height: 14px; }
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.cmt-secret-toggle:has(input:checked) {
    background: var(--cv-author-chip) !important;
    border-color: var(--cv-author) !important;
    color: var(--cv-author) !important;
    font-weight: 700;
}
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn.cmt-secret-toggle:has(input:focus-visible) {
    outline: 2px solid var(--cv-accent);
    outline-offset: 2px;
}

/* ── 첫댓글·지뢰폭탄·행운 포인트 당첨: 큰 알림 박스 → 본문 아래 작은 칩 ── */
.comment-area.cmt-v2 .view-comment .cmt-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 2px;
}
.comment-area.cmt-v2 .view-comment .cmt-reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 7px;
    border: 0;
    border-radius: 999px;
    font-size: .6875rem;
    line-height: 1.5;
    white-space: nowrap;
}
.comment-area.cmt-v2 .view-comment .cmt-reward svg { width: 12px; height: 12px; flex-shrink: 0; }
.comment-area.cmt-v2 .view-comment .cmt-reward b { font-weight: 700; }
.comment-area.cmt-v2 .view-comment .cmt-reward-lucky { background: var(--cv-rw-lucky-b); color: var(--cv-rw-lucky-t); }
.comment-area.cmt-v2 .view-comment .cmt-reward-first { background: var(--cv-rw-first-b); color: var(--cv-rw-first-t); }
.comment-area.cmt-v2 .view-comment .cmt-reward-bomb  { background: var(--cv-rw-bomb-b);  color: var(--cv-rw-bomb-t); }

/* ── ⋮ 메뉴의 수정·삭제·안내(v2) ── */
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu .cmt-menu-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--cv-line);
}
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu a.cmt-menu-delete,
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu a.cmt-menu-delete:hover { color: var(--cv-danger) !important; }
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu .cmt-menu-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 210px;
    padding: 6px 10px;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--cv-muted);
    white-space: normal;
    cursor: default;
}
.comment-area.cmt-v2 .view-comment .comment-dropdown .dropdown-menu .cmt-menu-note svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; }

/* ── ↳ 눌렀을 때 원댓글 강조 ── */
@keyframes cmtV2Flash {
    0%, 35% { box-shadow: inset 0 0 0 999px var(--cv-flash); }
    100% { box-shadow: inset 0 0 0 999px transparent; }
}
.comment-area.cmt-v2 .view-comment .view-comment-item.cmt-flash { animation: cmtV2Flash 1.4s ease-out; }

/* ── PC: 중간 댓글에서 댓글달기·수정을 누르면 그 댓글 안(#reply_ / #edit_)에 입력창이 열리는데 위가 붙어서 5px 띄움.
   비어 있을 땐 여백이 생기지 않게 :not(:empty). 모바일은 comment.1.css 가 이미 8px 를 준다 ── */
@media (min-width: 768px) {
    .comment-area.cmt-v2 .view-comment .view-comment-item span[id^="reply_"]:not(:empty),
    .comment-area.cmt-v2 .view-comment .view-comment-item span[id^="edit_"]:not(:empty) {
        display: block;
        margin-top: 5px;
    }
}

/* ── 좁은 화면 ── */
@media (max-width: 767px) {
    .comment-area.cmt-v2 .view-comment .view-comment-item,
    .comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best { padding: 9px 2px 1px !important; gap: 9px; }
    .comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best { padding-left: 6px !important; padding-right: 6px !important; }
    .comment-area.cmt-v2 .view-comment .view-comment-item.cmt-best .view-comment-best-label { margin-bottom: 3px; }
    /* 항목 왼쪽 여백 2px: 최상위 선 x=13, 1단계 아바타 왼쪽 24·선 x=35, 2단계 아바타 왼쪽 46, 아바타 중심 높이 21 */
    .comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd1 { padding-left: 22px !important; }
    .comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd2 { padding-left: 44px !important; }
    .comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd1::before { left: 13px; width: 7px; height: 21px; border-bottom-left-radius: 6px; }
    .comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-vd2::before { left: 35px; width: 7px; height: 21px; border-bottom-left-radius: 6px; }
    .comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-l0 { background-position: 13px 0 !important; }
    .comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-l1 { background-position: 35px 0 !important; }
    .comment-area.cmt-v2 .view-comment .view-comment-item-wrap.cmt-l0.cmt-l1 { background-position: 13px 0, 35px 0 !important; }
    .comment-area.cmt-v2 .view-comment .view-comment-item.cmt-thread-parent::after { left: 13px; top: 37px; }
    .comment-area.cmt-v2 .view-comment .view-comment-item:not(.cmt-anonymous) .comment-item-body:has(.bl-photo),
    .comment-area.cmt-v2 .view-comment .view-comment-item:not(.cmt-anonymous) .comment-item-body-pn:has(.bl-photo) { padding-left: 0 !important; }
    .comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment-btn { height: 30px !important; }
    .comment-area.cmt-v2 .view-comment .comment-btn-wrap a[onclick*="'cu')"],
    .comment-area.cmt-v2 .view-comment .comment-btn-wrap a.comment_delete { height: 24px !important; }

    /* 입력창 하단: comment.1.css 가 답글·수정 입력창 하단을 세로로 쌓아(안내문 위, 버튼 아래 오른쪽) 균형이 깨짐
       → 한 줄로: 안내문은 왼쪽에 작고 연하게('Note:' 생략), 등록 버튼은 오른쪽 세로 가운데 */
    .comment-area.cmt-v2 .comment-write .comment-write-footer,
    .comment-area.cmt-v2 .view-comment .view-comment-item [id^="reply_"] .comment-write-footer,
    .comment-area.cmt-v2 .view-comment .view-comment-item [id^="edit_"] .comment-write-footer {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 12px !important;
    }
    .comment-area.cmt-v2 .comment-write .comment-write-footer > span {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .71875rem;
        line-height: 1.45;
        color: var(--cv-muted);
        word-break: keep-all;
    }
    .comment-area.cmt-v2 .comment-write .comment-write-footer > span strong { display: none; }
    .comment-area.cmt-v2 .comment-write .comment-write-footer .comment-write-submit,
    .comment-area.cmt-v2 .view-comment .view-comment-item [id^="reply_"] .comment-write-footer .comment-write-submit,
    .comment-area.cmt-v2 .view-comment .view-comment-item [id^="edit_"] .comment-write-footer .comment-write-submit {
        flex: 0 0 auto;
        margin-left: 0 !important;
    }
}

/* ── 다크: 댓글 입력박스(10-28) — 입력칸 배경이 페이지와 같고(1.0:1) 테두리 #30363d 가 흐려(1.55:1) 칸 경계가 안 보였다.
   입력칸을 옵션바와 같은 면(#161b22)으로 올려 한 덩어리 카드로, 테두리 #434b57(2.15:1). 입력 중 초록 테두리는 유지 ── */
.dark-mode .comment-area.cmt-v2 .eyoom-form .textarea textarea {
    background-color: #161b22 !important;
    border-color: #434b57 !important;
}
.dark-mode .comment-area.cmt-v2 .eyoom-form .textarea textarea:focus { border-color: #10b981 !important; }
.dark-mode .comment-area.cmt-v2 .comment-write .comment-write-option,
.dark-mode .comment-area.cmt-v2 .comment-write .comment-write-footer { border-color: #434b57 !important; }
/* 첨부·이모티콘·비밀글 아이콘을 댓글달기(--cv-sub)와 같은 색으로 — 라이트(#8390a0 3.3:1)·다크 공통. 켜진 비밀글·hover 는 기존 규칙이 이긴다 */
.comment-area.cmt-v2 .comment-write .comment-write-option .comment-option-btn:not(:hover) { color: var(--cv-sub) !important; }