@charset "UTF-8";

/* =====================================================================================
   XET Simple Board - Comment Redesign
   - comment.html의 comment-head / comment-body-row 구조를 전제로 함
   - 헤더 배경은 _common.css의 --comment-head-bg / --comment-dark-head-bg 사용
   ===================================================================================== */

#xet-simple-board .simple-board__comment {
  margin: 28px 0;
}

/* 댓글 수 */
#xet-simple-board .simple-board__comment .comment-count {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  font-size: 18px;
}
#xet-simple-board .simple-board__comment .comment-count em {
  margin-left: 4px;
  color: deeppink;
}

/* 리스트 간격 */
#xet-simple-board .simple-board__comment .comment-list {
  margin-bottom: 24px;
}

/* 각 댓글: 박스형 */
#xet-simple-board .simple-board__comment .comment-list .item {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

/* 기존 +item padding-top 제거하고 margin으로 */
#xet-simple-board .simple-board__comment .comment-list .item + .item {
  padding-top: 0;
  margin-top: 6px;
}

/* 들여쓰기(답글) */
#xet-simple-board .simple-board__comment .comment-list .item.itemReply .indent {
  padding-left: 10px;
}

/* 기본 content wrapper */
#xet-simple-board .simple-board__comment .comment-list .item .comment-list__content {
  padding-top: 0;
  background: transparent;
}

/* =========================
   Header (comment-head)
   ========================= */

#xet-simple-board .simple-board__comment .comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--board-border-color);
  background: var(--comment-head-bg, #184aae);
}

/* 다크 모드 안전장치 */
html[data-color-scheme="dark"] #xet-simple-board .simple-board__comment .comment-head,
body.rx-color-scheme-dark #xet-simple-board .simple-board__comment .comment-head,
[data-rx-color-scheme="dark"] #xet-simple-board .simple-board__comment .comment-head {
  background: var(--comment-dark-head-bg, #2a2d31);
}

/* 닉네임 */
#xet-simple-board .simple-board__comment .comment-head__nick {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

/* 작성자 표시 */
#xet-simple-board .simple-board__comment .comment-head__author {
  opacity: 0.7;
  margin-left: 2px;
  font-weight: 500;
}

/* spacer */
#xet-simple-board .simple-board__comment .comment-head__spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* 관리자 버튼 그룹 */
#xet-simple-board .simple-board__comment .comment-head__admin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  opacity: 0.9;
}
#xet-simple-board .simple-board__comment .comment-head__admin a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* (선택) 수정/삭제 텍스트 숨기고 아이콘만 */
#xet-simple-board .simple-board__comment .comment-head__admin a span {
  display: none !important;
}

/* IP/수정시간 */
#xet-simple-board .simple-board__comment .comment-head__ip {
  font-size: 10px;
  opacity: 0.6;
  white-space: nowrap;
}

/* 시간 */
#xet-simple-board .simple-board__comment .comment-head__time {
  font-size: 11px;
  opacity: 0.75;
  white-space: nowrap;
}

/* 댓글 달기(답글) */
#xet-simple-board .simple-board__comment .comment-head__reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}

/* =========================
   Body
   ========================= */

#xet-simple-board .simple-board__comment .comment-list__content__body {
  padding: 6px 14px 7px;
  font-size: 12px;
  line-height: 1.5;
}

/* 삭제된 댓글 문구 */
#xet-simple-board .simple-board__comment .comment-list__content__body.deleted,
#xet-simple-board .simple-board__comment .comment-list__content__body.deleted_by_admin {
  color: var(--board-text-base-color);
  opacity: 0.8;
}

/* =========================
   New body row (content + vote)
   ========================= */

#xet-simple-board .simple-board__comment .comment-body-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 내용 영역은 가변폭 */
#xet-simple-board .simple-board__comment .comment-body-row__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* 투표 영역은 오른쪽 고정 */
#xet-simple-board .simple-board__comment .comment-body-row__vote {
  flex: 0 0 auto;
  margin-left: auto;
}

/* vote list */
#xet-simple-board .simple-board__comment .comment-body-vote {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

/* 버튼 형태 */
#xet-simple-board .simple-board__comment .comment-vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--board-border-color);
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1;
  text-decoration: none;
  color: var(--board-text-base-color);
  background: transparent;
  transition: opacity .15s ease, background-color .15s ease;
}

#xet-simple-board .simple-board__comment .comment-vote:hover {
  opacity: 0.85;
}

/* 활성 상태 */
#xet-simple-board .simple-board__comment .comment-vote.is-active {
  background: rgba(0,0,0,0.06);
}
html[data-color-scheme="dark"] #xet-simple-board .simple-board__comment .comment-vote.is-active,
body.rx-color-scheme-dark #xet-simple-board .simple-board__comment .comment-vote.is-active,
[data-rx-color-scheme="dark"] #xet-simple-board .simple-board__comment .comment-vote.is-active {
  background: rgba(255,255,255,0.08);
}

/* 카운트 */
#xet-simple-board .simple-board__comment .comment-vote__count {
  font-weight: 600;
  min-width: 8px;
  text-align: center;
}

/* =========================
   Attached files
   ========================= */

#xet-simple-board .simple-board__comment dl.attachedFile {
  margin-top: 10px;
  border-top: 1px dashed var(--board-border-color);
  padding-top: 10px;
}
#xet-simple-board .simple-board__comment dl.attachedFile dt .fileToggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#xet-simple-board .simple-board__comment dl.attachedFile dd .files {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
#xet-simple-board .simple-board__comment dl.attachedFile dd .files li + li {
  margin-top: 6px;
}

/* 혹시 남아있을 하단 버튼 그룹 안전 차단 */
#xet-simple-board .simple-board__comment
.comment-list .item .comment-list__content__body
.simple-board__btn-group.bottom.left {
  display: none;
}

/* =========================
   Mobile: 댓글 영역 풀블리드 + 내용은 적당한 안쪽 여백 유지
   ========================= */
@media (max-width: 991px) {
  /* “영역” 자체를 좌우로 확장 (부모 padding 16px 상쇄) */
  #xet-simple-board .simple-board__comment {
    margin: 28px -16px !important;
  }

  /* 읽기용 안쪽 여백 */
  #xet-simple-board .simple-board__comment .comment-count {
    padding-left: 16px;
    padding-right: 16px;
  }

  #xet-simple-board .simple-board__comment .comment-head {
    padding-left: 16px;
    padding-right: 16px;
  }

  #xet-simple-board .simple-board__comment .comment-list__content__body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 더 작은 화면 */
@media (max-width: 480px) {
  #xet-simple-board .simple-board__comment .comment-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  #xet-simple-board .simple-board__comment .comment-body-row {
    flex-direction: column;
    gap: 10px;
  }

  #xet-simple-board .simple-board__comment .comment-body-row__vote {
    margin-left: 0;
  }
}