@charset "utf-8";

/**
 * 댓글 목록 카드 UI — 스케치북 레이아웃과 별개의 독자적 톤
 * .sk-board #viewcomment .sk-cmt-item (view_comment.skin.php)
 */

/*
 * 댓글 출력부(#bo_vc + .fdb_lst_wrp + .fdb_lst)를 감싸던 회색 박스 제거
 * — sketchbook-classic-ui .fdb_lst_wrp #f3f3f3, .fdb_lst 흰 배경·테두리 등 무력화
 */
/* 댓글 블록 전체를 감싸던 상단선·흰 배경(회색 느낌 박스) 완화 */
/* 이전/다음 글 블록과 댓글 영역 사이 가로줄 유지(전체 폭 구분선 끊김 방지) */
.sk-board #viewcomment.sk-sb-cmt {
  background: transparent !important;
  border-top: 1px solid #edf0f5;
  box-shadow: none !important;
}

/* 이전/다음 아래 짝대기(구분선)와 붙도록: 기본 스킨의 #viewcomment 여백/보더 무력화 */
.ub-board #viewcomment {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}

/* 태그 영역이 이전/다음 바로 아래에 오므로, 여기서 상단 구분선을 책임지게 함 */
.sk-board.uv-view-page .uv-tag-area {
  margin-top: 0 !important;
  border-top: 1px solid #edf0f5;
}

.sk-board #viewcomment #bo_vc {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sk-board #viewcomment .fdb_lst_wrp,
.sk-board #viewcomment .fdb_lst_wrp.fdb_v2 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0 !important;
}

.sk-board #viewcomment .fdb_lst_wrp,
.sk-board #viewcomment .fdb_v2 .fdb_lst {
  overflow: visible;
}

/* 댓글 목록 래퍼 — 회색 박스 없음(카드만 보이게) */
.sk-board #viewcomment .fdb_v2 .fdb_lst {
  /* 요청사항: 여기에는 margin-top 만 주고 나머지 스타일은 최대한 건드리지 않음 */
  margin-top: 24px !important;
}

/* 댓글 헤더("댓글 0") 바: 좌/우 보더 제거(상/하만) */
.sk-board #viewcomment.sk-sb-cmt .fdb_tag {
  border-top: 1px solid #e5eaf0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #e5eaf0 !important;
}

/* 태그 없을 때 문구 패딩(요청사항) */
.sk-board.uv-view-page .uv-tag-area__empty {
  padding: 4px 10px !important;
}

/* 댓글 리스트 래퍼(클래식 기본값: padding/background/border 등) 제거 — margin-top만 유지 */
.sk-board #viewcomment.sk-sb-cmt .fdb_v2 .fdb_lst {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * 실제 댓글 행은 ul.fdb_lst_ul 의 li 들 — 여기에 gap 을 줘야 카드 사이가 벌어짐
 * (.fdb_lst 에만 flex+gap 을 주면 자식이 ul 하나라 li 간격이 생기지 않음)
 */
.sk-board #viewcomment .fdb_v2 .fdb_lst_ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 댓글 0건: 바깥은 가운데 정렬만, 실제 정렬은 .sk-sb-vc-empty-inner */
.sk-board #viewcomment #bo_vc_empty.sk-sb-vc-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 36px 20px 40px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* 아이콘+문구 한 줄, 수직·수평 기준선 맞춤 */
.sk-board #viewcomment #bo_vc_empty .sk-sb-vc-empty-inner {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
}

.sk-board #viewcomment #bo_vc_empty .sk-sb-vc-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 50%;
  background: rgb(226 232 240 / 0.85);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}

.sk-board #viewcomment #bo_vc_empty .sk-sb-vc-empty-ico .sk-ico {
  display: block;
}

/* 점선 말풍선 대신 실선 형태 + 크기·대비 (빈 목록 전용 변형) */
.sk-board #viewcomment #bo_vc_empty .sk-ico-comment-empty--emptylist {
  width: 26px;
  height: 26px;
  opacity: 1;
  background-color: #475569;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' d='M12 20.5c4.1 0 7.5-3 7.5-6.7 0-3.8-3.4-6.8-7.5-6.8S4.5 10 4.5 13.7c0 1.35.48 2.62 1.32 3.7L4 20l4.85-1.18c.92.42 1.95.68 3.15.68z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' d='M12 20.5c4.1 0 7.5-3 7.5-6.7 0-3.8-3.4-6.8-7.5-6.8S4.5 10 4.5 13.7c0 1.35.48 2.62 1.32 3.7L4 20l4.85-1.18c.92.42 1.95.68 3.15.68z'/%3E%3C/svg%3E");
}

.sk-board #viewcomment #bo_vc_empty .sk-sb-vc-empty-txt {
  margin: 0;
  padding: 0;
  flex-shrink: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #64748b;
}

/* 카드: 원댓 — 플랫 화이트, 그라데이션 없음 */
.sk-board #viewcomment .fdb_itm.sk-cmt-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  float: none;
  margin: 0 !important;
  padding: 20px 20px 0;
  list-style: none;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
  border: 1px solid rgb(226 232 240 / 90%);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.sk-board #viewcomment .fdb_itm.sk-cmt-item:hover {
  border-color: rgb(199 210 254 / 45%);
  box-shadow: 0 2px 8px rgb(15 23 42 / 7%);
}

/* 답글: 아주 옅은 블루 틴트 + 왼쪽 액센트 보더(스레드 구분) */
.sk-board #viewcomment .fdb_itm.sk-cmt-item.re {
  overflow: visible;
  margin-left: 25px !important;
  padding-left: 18px;
  border-radius: 14px;
  background: #f7f9fc;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
  border: 1px solid rgb(226 232 240 / 90%);
  border-left: 3px solid rgb(99 102 241 / 42%);
}

.sk-board #viewcomment .fdb_itm.sk-cmt-item.re:hover {
  border-left-color: rgb(79 70 229 / 48%);
  border-color: rgb(199 210 254 / 55%);
}

/*
 * 위 원댓글에서 아래 답글 카드로 이어지는 스레드 — 스킨 img/arrow.png
 * 답글 카드 상단(패딩 20px + 아바타 줄)에 맞추고, 들여쓰기 바로 왼쪽에 두기 위해
 * 이전 값(-36/-18)은 카드 사이 갭·화면 밖으로 밀려 보이므로 양수 top·덜 음수 left 사용
 */
.sk-board #viewcomment .fdb_itm.sk-cmt-item.re::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 8px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2;
  background: url("img/arrow.png") no-repeat 50% 50% / contain;
}

/* 아바타 */
.sk-board #viewcomment .sk-cmt-item .sk-cmt-profile-wrap {
  float: none;
  margin: 0;
  width: auto;
  flex-shrink: 0;
}

.sk-board #viewcomment .sk-cmt-item .profile {
  float: none;
  width: 48px;
  height: 48px;
  padding: 0;
  line-height: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgb(226 232 240 / 90%),
    0 2px 8px rgb(15 23 42 / 6%);
  background: #e8edf3;
}

.sk-board #viewcomment .sk-cmt-item.re .profile {
  box-shadow:
    0 0 0 1px rgb(226 232 240 / 80%),
    0 2px 8px rgb(15 23 42 / 5%);
}

.sk-board #viewcomment .sk-cmt-item .profile img,
.sk-board #viewcomment .sk-cmt-item .profile.sk-cmt-profile--html img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.sk-board #viewcomment .sk-cmt-item .profile.no_img .sk-ico-user {
  width: 24px;
  height: 24px;
  background-color: #94a3b8;
  opacity: 0.85;
}

/* 본문 열 */
.sk-board #viewcomment .sk-cmt-main {
  flex: 1;
  min-width: 0;
}

.sk-board #viewcomment .sk-cmt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.sk-board #viewcomment .sk-cmt-head__left {
  min-width: 0;
}

.sk-board #viewcomment .sk-cmt-head__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}

.sk-board #viewcomment .sk-cmt-item .meta {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 0.8125rem;
}

/* na_name_photo: 레벨 아이콘 + 닉 — 목록 글쓴이 셀과 같이 한 줄 정렬 */
.sk-board #viewcomment .sk-cmt-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.sk-board #viewcomment .sk-cmt-name a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.sk-board #viewcomment .sk-cmt-name a:hover {
  text-decoration: underline;
}

.sk-board #viewcomment .sk-cmt-name img {
  flex-shrink: 0;
  vertical-align: middle;
}

.sk-board #viewcomment .sk-cmt-item .meta .secondary,
.sk-board #viewcomment .sk-cmt-ip {
  font-size: 0.7rem;
  font-weight: 500;
  color: #94a3b8;
}

.sk-board #viewcomment .sk-cmt-date {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #64748b;
  background: rgb(241 245 249 / 95%);
  border-radius: 999px;
}

.sk-board #viewcomment .sk-cmt-date::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 6px;
  border-radius: 50%;
  background: rgb(148 163 184 / 70%);
}

/* SNS 줄 */
.sk-board #viewcomment .sk-cmt-item .sk-cmt-sns {
  float: none;
  margin: 0;
  min-height: 0;
  text-align: right;
  opacity: 0.85;
}

/* 액션: 캡슐형 */
.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions {
  position: static;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 11px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sk-accent, #4f46e5);
  text-decoration: none !important;
  background: rgb(238 242 255 / 85%);
  border-radius: 999px;
  border: 1px solid rgb(199 210 254 / 45%);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act:hover,
.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act:focus-visible {
  background: rgb(224 231 255 / 95%);
  border-color: rgb(165 180 252 / 65%);
  color: var(--sk-accent-h, #4338ca);
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act--muted {
  color: #64748b;
  background: rgb(248 250 252 / 95%);
  border-color: rgb(226 232 240 / 90%);
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act--muted:hover,
.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act--muted:focus-visible {
  color: #475569;
  background: #f1f5f9;
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act--vote {
  gap: 5px;
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act--vote b {
  font-weight: 700;
  color: var(--sk-accent, #4f46e5);
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-cmt-act--vote.sk-cmt-act--muted b {
  color: #64748b;
}

.sk-board #viewcomment .sk-cmt-item .sk-cmt-actions .sk-ico {
  flex-shrink: 0;
}

/* 본문: 이중 박스 느낌 완화 — 원댓은 거의 플랫, 답글은 살짝 흰 패널 */
.sk-board #viewcomment .sk-cmt-text {
  clear: none;
  margin: 0;
  padding: 12px 14px;
  font-size: 0.9375rem;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: #334155;
  word-break: break-word;
  border-radius: 10px;
}

.sk-board #viewcomment .sk-cmt-item:not(.re) .sk-cmt-text {
  background: rgb(248 250 252 / 55%);
  border: 1px solid rgb(241 245 249 / 85%);
}

.sk-board #viewcomment .sk-cmt-item.re .sk-cmt-text {
  background: rgb(255 255 255 / 88%);
  border: 1px solid rgb(226 232 240 / 65%);
}

.sk-board #viewcomment .sk-cmt-text p {
  margin: 0 0 0.65em;
}

.sk-board #viewcomment .sk-cmt-text p:last-child {
  margin-bottom: 0;
}

.sk-board #viewcomment .sk-cmt-text img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0.35em 0;
}

.sk-board #viewcomment .sk-cmt-warn {
  margin: 0 0 0.5em;
  color: #b91c1c !important;
}

/* 럭키 포인트 띠 */
.sk-board #viewcomment .sk-cmt-lucky {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #9a3412;
  background: linear-gradient(90deg, #fff7ed, #ffedd5);
  border: 1px solid rgb(254 215 170 / 80%);
  border-radius: 10px;
}

.sk-board #viewcomment .sk-cmt-lucky__pt {
  color: #c2410c;
  font-weight: 800;
}

/* 답글/수정 삽입 영역 */
.sk-board #viewcomment .sk-cmt-edit-slot {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 4px;
  padding: 8px 0 0;
  padding-left: 0;
  box-sizing: border-box;
}

.sk-board #viewcomment .sk-cmt-item:not(.re) .sk-cmt-edit-slot {
  padding-left: 56px;
}

.sk-board #viewcomment .sk-cmt-item.re .sk-cmt-edit-slot {
  padding-left: 56px;
}

/* 클래식 UI 640px 이하에서 .fdb_lst 패딩이 다시 먹는 것 방지 */
@media screen and (max-width: 640px) {
  .sk-board #viewcomment .fdb_v2 .fdb_lst {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .sk-board #viewcomment .fdb_v2 .fdb_lst_ul {
    gap: 16px;
  }
}

@media (max-width: 575.98px) {
  .sk-board #viewcomment .fdb_itm.sk-cmt-item {
    padding: 16px 14px 14px;
    border-radius: 14px;
  }

  .sk-board #viewcomment .sk-cmt-item:not(.re) .sk-cmt-edit-slot,
  .sk-board #viewcomment .sk-cmt-item.re .sk-cmt-edit-slot {
    padding-left: 0;
  }

  .sk-board #viewcomment .sk-cmt-head {
    flex-direction: column;
    align-items: stretch;
  }

  .sk-board #viewcomment .sk-cmt-head__right {
    justify-content: flex-start;
  }
}

/* 댓글 입력: 등록 버튼 글씨/배경이 다른 CSS에 의해 지워지는 경우 강제 복구 */
.sk-board #viewcomment .sk-sb-cmt-wrt .sk-sb-cmt-reg-btn,
.sk-board #viewcomment #bo_vc_w .sk-sb-cmt-reg-btn,
/* 실제 버튼은 #viewcomment 밖의 #bo_vc_w 안에 있음 */
.ub-board #bo_vc_w .sk-sb-cmt-reg-btn,
.ub-board .sk-sb-cmt-wrt .sk-sb-cmt-reg-btn {
  background: var(--sk-accent, #4f46e5) !important;
  color: #fff !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

/* 댓글 카운트 헤더("댓글 0") 박스: 좌/우 보더 제거, 상/하만 유지 */
.ub-board .uvc-header {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 1px solid #e8edf3 !important;
  border-bottom: 1px solid #e8edf3 !important;
  border-radius: 0 !important;
}

/* 태그 빈 상태 문구: 이전/다음 아래에서 가운데 정렬 */
.ub-board .uv-tag-area--empty {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ub-board .uv-tag-area__empty {
  margin: 12px 0 0;
  padding: 12px 14px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  border: 1px dashed rgba(15, 23, 42, 0.16);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.9);
}