/* ==========================================================================
   Basic Board Skin - Comment Style Overwrite (vst-style)
   Target: Existing HTML Structure (.comment_box, #bo_vc, .bo_vc_w)

   ★ 단위 = px 고정. 게시판/어드민 페이지는 css/library.css 를 로드하지 않아
     html{font-size} 가 없다 → 여기서 rem 은 1rem=16px 로 해석돼 값이 커진다.
     css-check 의 rem 강제 룰은 이 파일에 한해 오탐이므로 px 을 유지한다.
   ========================================================================== */

/* 1. 댓글 전체 박스 */
.comment_box {
    background: #fff !important;
    border-top: none !important;
    margin-top: 50px !important;
    padding-top: 30px !important;
    font-family: "Pretendard Variable", "Pretendard", "Malgun Gothic", sans-serif !important;
}

/* 2. 댓글 목록 헤더 — "댓글 N" */
.cmt_btn {
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: default !important; /* 버튼처럼 안 보이게 */
}
.cmt_btn .cmt_cnt {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffcf1e !important;
}

/* 3. 댓글 목록 영역 (#bo_vc) */
#bo_vc {
    padding: 0 !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
#bo_vc > h2 { display: none !important; }
#bo_vc article { border-top: none !important; } /* 숨김 */

/* 댓글이 없을 때 */
#bo_vc_empty {
    margin: 0 !important;
    padding: 60px 0 !important;
    text-align: center !important;
    color: #999 !important;
    font-size: 14px !important;
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    border: 1px solid #eee !important;
}

/* 댓글 아이템 — 상자를 겹치지 않고 위아래 선 하나로만 구분한다 */
#bo_vc article {
    position: relative !important;
    /* 좌우 padding 만큼 음수 margin 을 줘서 호버 배경이 컨테이너 끝까지 깔리게 한다 */
    margin: 0 -14px !important;
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 1px solid #eceef2 !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: background 0.15s !important;
}
#bo_vc article:last-of-type { border-bottom: none !important; }
#bo_vc article:hover { background: transparent !important; }

/* 대댓글 — 깊이(--cmt-lv)만큼 들여쓰고 왼쪽 세로선으로 계층을 보여준다 */
#bo_vc article.cmt_reply {
    position: relative !important;
    margin-left: calc(var(--cmt-lv, 1) * 28px) !important;
    background: transparent !important;
    border-left: none !important;
    border-radius: 0 !important;
}
#bo_vc article.cmt_reply::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 14px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: #e6e8ee;
}

/* 댓글 아무 데나 눌러도 답변창이 열린다 (텍스트 드래그 중이면 무시 — 스킨 JS) */
#bo_vc article.cmt_clickable { cursor: pointer !important; }
#bo_vc article.cmt_clickable:hover { background: #fafbfc !important; }
#bo_vc article.cmt_clickable .bo_vc_act a { cursor: pointer !important; }
/* 답글 폼이 열려 있는 댓글은 클릭 대상이 아니다 — 입력 중에 회색 호버가 깔리면 거슬린다 */
#bo_vc article.cmt_clickable:has(#fviewcomment) { cursor: default !important; }
#bo_vc article.cmt_clickable:has(#fviewcomment):hover { background: transparent !important; }
/* 폼 안(입력창·버튼)은 기본 커서 유지 */
#bo_vc article .bo_vc_w, #bo_vc article .bo_vc_w * { cursor: auto !important; }
#bo_vc article .bo_vc_w .btn_submit,
#bo_vc article .bo_vc_w label { cursor: pointer !important; }

/* 소프트 삭제된 댓글 — 대댓글이 붙어 있어 행은 남기고 본문만 치환된 상태 */
#bo_vc article.cmt_deleted .cmt_contents p { color: #a8acb4 !important; font-style: italic !important; }
#bo_vc article.cmt_deleted .writer-profile strong,
#bo_vc article.cmt_deleted .bo_vc_hdinfo { color: #b7bac1 !important; }
#bo_vc article.cmt_deleted .cmt_author_label { display: none !important; }

/* 댓글 헤더 (작성자, 날짜 등) */
/* ★ 사이트 상단 고정헤더용 규칙(header{position:fixed;top:-64px})이 댓글의 <header> 에도 걸려
   작성자·날짜가 화면 밖(top:-64px)으로 날아간다. 댓글 header 는 문서 흐름에 되돌린다. */
#bo_vc article header {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: auto !important;
    /* 고정헤더 규칙의 height:72px 까지 상속돼 댓글 한 칸이 통째로 부풀었다 */
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    z-index: auto !important;
}

#bo_vc header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
    flex-wrap: nowrap !important;   /* wrap 이면 헤더가 2줄로 벌어져 댓글이 쓸데없이 높아진다 */
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
#bo_vc header > * { flex: 0 0 auto; }
#bo_vc header h2 {
    display: none !important;
}
#bo_vc header .member,
#bo_vc header .guest {
    font-weight: 700 !important;
    color: #333 !important;
    font-size: 14px !important;
}
/* IP 숨기기 — 예전엔 header 안 모든 span 을 font-size:0 으로 죽였는데,
   그 바람에 작성자 배지·이름까지 같이 안 보였다. IP 만 정확히 지정한다. */
#bo_vc header .writer-ip { display: none !important; }
/* SNS 아이콘 깨진 이미지 숨기기 */
#bo_vc header a[href*="facebook"],
#bo_vc header a[href*="twitter"],
#bo_vc header img[alt*="등록됨"] {
    display: none !important;
}
/* 시간이 남는 공간을 밀어내며 우측으로 붙고, 그 뒤에 액션이 온다 */
#bo_vc .bo_vc_hdinfo {
    color: #999 !important;
    font-size: 12px !important;
    margin-left: auto !important;
    padding-right: 0 !important;
}
#bo_vc header .bo_vc_act { margin-left: 10px !important; }
#bo_vc .bo_vc_hdinfo .fa-clock-o { display: none !important; }   /* 상대시간이라 시계 아이콘 불필요 */

/* 작성자 정보 — 글쓴이 본인 댓글에는 '작성자' 배지 */
#bo_vc .writer-profile {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#bo_vc .writer-profile strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
}
/* 작성자 배지 — 펫마트 옐로우 포인트 */
#bo_vc .writer-profile .cmt_author_label {
    display: inline-flex !important;
    align-items: center !important;
    height: 19px !important;
    padding: 0 7px !important;
    border-radius: 4px !important;
    background: #fff7da !important;
    color: #a67c00 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
#bo_vc .writer-profile .writer-ip { color: #aaa !important; font-size: 11px !important; }

/* 댓글 본문 */
#bo_vc .cmt_contents {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #444 !important;
    padding: 0 !important;
    margin: 0 !important;
}
#bo_vc .cmt_contents p { margin: 0 !important; }
/* 비밀글 자물쇠가 본문 baseline 보다 아래로 처져 보인다 */
#bo_vc .cmt_contents p img[alt="비밀글"] { vertical-align: -2px !important; margin-right: 2px !important; }
/* 깨진 이미지 숨기기 */
#bo_vc .cmt_contents img[src=""] { display: none !important; }
#bo_vc .cmt_contents img:not([src*="http"]):not([src*="/"]) { display: none !important; }

/* 댓글 액션 (답변, 수정, 삭제) — 헤더 우측 끝 */
.bo_vc_act {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    /* 스킨 기본 ul 배경(흰색)이 남아 호버 위에 흰 박스로 떠 보였다 */
    width: auto !important;
    background: transparent !important;
}
.bo_vc_act li { display: inline-block !important; margin: 0 !important; width: auto !important; }
.bo_vc_act a {
    display: inline-block !important;
    width: auto !important;
    padding: 3px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #8b8f98 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: color .15s, background-color .15s !important;
}
.bo_vc_act a:hover {
    color: #a67c00 !important;
    background: #fff7da !important;
}
/* 삭제는 파괴적 동작이라 hover 를 빨간 톤으로 구분한다 */
.bo_vc_act a.cmt_del_btn:hover {
    color: #d94c4c !important;
    background: #fdf0f0 !important;
}

/* 비회원 댓글 삭제 — 같은 자리에서 비밀번호를 받는다 (기본은 접혀 있음) */
.cmt_del_form { display: none !important; }
.cmt_del_form.on {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 8px 0 0 !important;
}
.cmt_del_form input[type="password"] {
    box-sizing: border-box !important;
    width: 140px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 13px !important;
}
.cmt_del_form input[type="password"]:focus { border-color: #ffcf1e !important; outline: none !important; }
.cmt_del_form button {
    box-sizing: border-box !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #767a83 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.cmt_del_form .cmt_del_ok { border-color: #d94c4c !important; color: #d94c4c !important; }
.cmt_del_form .cmt_del_ok:hover { background: #fdf0f0 !important; }
.cmt_del_form .cmt_del_cancel:hover { background: #f1f2f6 !important; }

/* 수정/답변 폼이 들어갈 빈 span.
   ★ display:none !important 로 고정하면 안 된다 —
     comment_box() 는 style.display='' 로 여는데 이건 인라인 스타일을 '지우는' 것이라
     스타일시트의 !important 를 이기지 못한다. 그러면 답변/수정 폼이 안 보이는 칸 안으로
     들어가 버려서 "답변 버튼을 눌러도 아무 반응이 없는" 상태가 된다.
   → 비어 있을 때만(:empty) 숨기고, 폼이 들어오면 자동으로 보이게 한다. */
span.bo_vc_w {
    display: block;
    margin: 14px 0 0 !important;
    padding: 14px 0 0 !important;
    border: none !important;
    border-top: 1px solid #eceef2 !important;   /* 상자 대신 선 하나로 구분 */
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
span.bo_vc_w:empty {
    display: none;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 답변은 전용 폼(#re_bo_vc_w)이 담당한다 — 아래 '댓글쓰기' 폼은 옮기지 않고 자리에 그대로 둔다.
   덕분에 답변을 쓰는 중에도 새 댓글을 바로 쓸 수 있다. */
#cmt_reply_park { display: none !important; }
/* ★ 아래 `aside.bo_vc_w` 규칙과 같은 특정도라 순서상 밀린다 → id 로 올려 확실히 이긴다.
   슬롯(span.bo_vc_w)이 이미 border-top 을 그리므로 여기까지 그리면 구분선이 2줄이 된다. */
aside#re_bo_vc_w {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-top: none !important;
}
aside.cmt_reply_w .cmt_reply_title {
    font-size: 13px !important;
    color: #767a83 !important;
    margin: 0 0 10px !important;
}

/* 4. 댓글 쓰기 영역 (aside.bo_vc_w) */
aside.bo_vc_w {
    background: transparent !important;
    padding: 20px 0 0 !important;
    border: none !important;
    border-top: 1px solid #e4e6ec !important;   /* 상자 대신 선 하나 */
    border-radius: 0 !important;
    margin-top: 26px !important;
    box-shadow: none !important;
    position: relative !important;
    display: block !important;
}
aside.bo_vc_w h2 { 
    font-size: 14px !important; 
    color: #333 !important; 
    margin: 0 0 15px 0 !important; 
    font-weight: 700 !important;
    border-bottom: none !important;
    padding: 0 !important;
}

/* 입력창 (textarea) */
.bo_vc_w textarea {
    width: 100% !important;
    height: 100px !important;
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    resize: none !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.bo_vc_w textarea:focus {
    border-color: #ffcf1e !important;
    box-shadow: 0 0 0 3px rgba(255, 207, 30, 0.2) !important;
}

/* 하단 버튼 그룹 (.bo_vc_w_wr) */
.bo_vc_w_wr {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: flex-end !important; /* 오른쪽 정렬 */
    align-items: center !important;
}

/* 비밀글 체크박스 & 라벨 */
.bo_vc_w .btn_confirm {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    float: none !important; /* 기존 float 제거 */
    margin: 0 !important;
}

/* 비밀글 체크박스 꾸미기 */
.bo_vc_w input[type="checkbox"] {
    width: 16px !important; 
    height: 16px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
.bo_vc_w label {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.bo_vc_w label i { font-size: 14px !important; color: #999 !important; }

/* 등록 버튼 (.btn_submit) */
.bo_vc_w .btn_submit {
    height: 40px !important;
    padding: 0 25px !important;
    background: #ffcf1e !important; /* 펫마트 포인트 컬러 */
    color: #141414 !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    margin-left: 15px !important;
}
.bo_vc_w .btn_submit:hover {
    background: #ffc400 !important;
}

/* 비회원 입력창 (이름 · 비밀번호 · 캡챠) — 한 줄에 가지런히 */
.bo_vc_w_info {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}
.bo_vc_w_info .frm_input {
    width: 150px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}
.bo_vc_w_info .frm_input:focus {
    border-color: #ffcf1e !important;
    box-shadow: 0 0 0 3px rgba(255, 207, 30, 0.2) !important;
    outline: none !important;
}
/* 캡챠 — 그누보드 기본 마크업을 한 줄 카드로 정리 */
.bo_vc_w_info [id$="captcha"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    /* fieldset 기본 margin(0 2px) + default.css 의 captcha_key margin 이 남아 한 줄이 어긋난다 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.bo_vc_w_info [id$="captcha"] > * { margin: 0 !important; }
.bo_vc_w_info [id$="captcha"] img[id$="captcha_img"] {
    box-sizing: border-box !important;
    height: 40px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    vertical-align: middle !important;
}
.bo_vc_w_info [id$="captcha"] [id$="captcha_key"] {
    width: 96px !important;
    height: 40px !important;
    padding: 0 10px !important;
    /* .required 가 깔아둔 빨간 별표 배경 제거 — 이름/비번 칸과 톤을 맞춘다 */
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.bo_vc_w_info [id$="captcha"] [id$="captcha_key"]:focus { border-color: #ffcf1e !important; outline: none !important; }
/* 음성듣기·새로고침 — css/default.css 의 스프라이트(captcha2.png)는 잘려 보여서
   같은 톤의 SVG 아이콘으로 교체한다. text-indent 로 버튼 텍스트는 이미 숨겨져 있다. */
.bo_vc_w_info [id$="captcha"] [id$="captcha_mp3"],
.bo_vc_w_info [id$="captcha"] [id$="captcha_reload"] {
    box-sizing: border-box !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    /* 버튼 안 '숫자음성듣기/새로고침' 텍스트 숨김.
       default.css 가 해주지만 #captcha_* id 셀렉터라 답변폼(#re_captcha_*)엔 안 걸린다. */
    text-indent: -9999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 17px 17px !important;
    transition: background-color .15s !important;
}
.bo_vc_w_info [id$="captcha"] [id$="captcha_mp3"] {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767a83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E") !important;
}
.bo_vc_w_info [id$="captcha"] [id$="captcha_reload"] {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767a83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E") !important;
}
.bo_vc_w_info [id$="captcha"] [id$="captcha_mp3"]:hover,
.bo_vc_w_info [id$="captcha"] [id$="captcha_reload"]:hover { background-color: #f1f2f6 !important; }
/* legend(자동등록방지) 는 스크린리더용으로만 남긴다 */
.bo_vc_w_info [id$="captcha"] legend {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}
/* 안내문구는 스크린리더용으로만 — 한 줄 레이아웃을 깨고 버튼 위로 겹쳐 나온다 */
.bo_vc_w_info [id$="captcha_info"] {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* ── 비회원 폼 한 줄 배치: [이름][비번][캡챠] ····· [비밀글][댓글등록] ── */
.bo_vc_w_wr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.bo_vc_w_wr .btn_confirm {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    float: none !important;
}
/* 비밀글 = 체크박스 숨기고 라벨을 토글 칩으로 */
.bo_vc_w_wr [id$="wr_secret"] {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important;
}
.bo_vc_w_wr .cmt_secret_toggle {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #767a83 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: color .15s, border-color .15s, background-color .15s !important;
}
.bo_vc_w_wr .cmt_secret_toggle:hover { border-color: #b9bcc4 !important; }
.bo_vc_w_wr [id$="wr_secret"]:checked + .cmt_secret_toggle {
    border-color: #ffcf1e !important;
    background: #fff7da !important;
    color: #a67c00 !important;
}
.bo_vc_w_wr .btn_submit {
    box-sizing: border-box !important;
    /* 스킨 기본 margin-left:15px 가 남아 비밀글 칩과 간격이 벌어졌다 */
    margin: 0 !important;
    height: 40px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #ffcf1e !important;
    color: #141414 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
.bo_vc_w_wr .btn_submit:hover { background: #ffc400 !important; }
/* 답변/수정 중에만 뜨는 취소 — 폼을 아래 댓글쓰기 자리로 되돌린다 */
.bo_vc_w_wr .cmt_cancel_btn {
    box-sizing: border-box !important;
    height: 40px !important;
    padding: 0 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #767a83 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.bo_vc_w_wr .cmt_cancel_btn:hover { background: #f1f2f6 !important; }
.bo_vc_w_info input {
    padding: 8px 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    outline: none !important;
}
.bo_vc_w_info input:focus { border-color: #ffcf1e !important; }

/* 캡챠 (있을 경우) */
[id$="captcha"] {
    margin-top: 10px !important;
    border: 1px solid #eee !important;
    padding: 10px !important;
    border-radius: 6px !important;
    background: #fff !important;
}
/* 반응형 (모바일) */
@media (max-width: 768px) {
    .bo_vc_w_wr {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .bo_vc_w .btn_confirm {
        justify-content: space-between !important;
        width: 100% !important;
    }
    /* 비회원 입력줄도 모바일에선 한 줄씩 */
    .bo_vc_w_info { width: 100% !important; }
    .bo_vc_w_info .frm_input { flex: 1 1 auto !important; width: auto !important; }
}