/*
 * 04_comments.css — 댓글·대댓글 목록과 댓글 작성창
 *
 * 작성자·시간·삭제 버튼의 위치, 댓글 본문, 대댓글 들여쓰기와 답글 선택 표시입니다.
 * .comment-meta: 상단 배치 / .comment-text: 본문 / .comment-item--reply: 대댓글
 * .comment-delete: 작은 삭제 버튼 / .comment-compose: 입력 영역 / .reply-status: 답글 안내
 * 기존 .votes·.reply·.post-photo 규칙도 남아 있습니다. 상세 글 추천 버튼은 post_detail.css를 보세요.
 * 비회원 삭제 비밀번호 팝업은 guest_writing.css, 휴대폰 공통 크기는 zz_mobile.css에서 관리합니다.
 */

/* 추천과 대댓글 */
.votes {
  display: flex;
  gap: 12px;
}

.reply {
  margin-left: 20px;
  padding: 12px;
  background: #434343;
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}



/* 댓글을 누르면 공통 입력창에서 답글 작성 */
[data-parent-id] {
  cursor: pointer;
}

[data-parent-id]:hover, .selected {
  background: #e8f2ff;
}

.reply-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

#cancel-reply {
  background: transparent;
  color: #777;
  padding: 4px;
}

#cancel-reply[hidden] {
  display: none;
}
/* 게시글에 첨부한 사진 */
.post-photo {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 12px;
}

/* 댓글 목록: 닉네임·시간·삭제를 한 줄에 배치 */
.comments-panel {
  margin-top: 28px;
  min-width: 0;
}

.comments-heading {
  margin: 0;
  padding: 12px 0;
  border-bottom: 2px solid #555;
  font-size: 17px;
}

.comments-heading span {
  color: #0071e3;
}

.comment-thread {
  min-width: 0;
  border-bottom: 1px solid #e2e5e9;
}

.comment-item {
  box-sizing: border-box;
  min-width: 0;
  padding: 12px;
  background: #fff;
}

.comment-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.comment-author {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
}

.comment-author strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.comment-author-badge {
  flex-shrink: 0;
  color: #0071e3;
  font-size: 11px;
}

.comment-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  color: #92979f;
  font-size: 11px;
}

.comment-actions time {
  white-space: nowrap;
}

/* 삭제 글씨는 작게, 버튼은 누를 수 있는 여유 확보 */
.comment-delete-form {
  display: inline-flex;
  margin: 0;
}

.comment-actions .comment-delete {
  min-height: 28px;
  padding: 2px 6px;
  border-radius: 4px;
  background: transparent;
  color: #92979f;
  font-size: 11px;
  line-height: 1.4;
}

.comment-actions .comment-delete:hover {
  background: #fff0ee;
  color: #b42318;
}

/* 줄바꿈은 댓글 본문에만 적용 */
.comment-text {
  min-width: 0;
  margin: 6px 0 0;
  padding: 4px 0;
  color: #252932;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
  border-radius: 4px;
}

.comment-text:hover,
.comment-text.selected {
  background: #eaf3ff;
}

.comment-text:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
}

/* 대댓글: 깊이를 늘리지 않고 같은 들여쓰기를 유지 */
.comment-item--reply {
  margin-left: 18px;
  border-top: 1px solid #e9ecf0;
  border-left: 2px solid #dce1e8;
  background: #f7f8fa;
}

.comment-reply-mark {
  color: #92979f;
}

/* 댓글 입력 영역 */
.comment-compose {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e2e5e9;
  border-radius: 6px;
  background: #f7f8fa;
}

.comment-compose .reply-status {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.comment-compose label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.comment-compose #cancel-reply {
  font-size: 12px;
}

.comment-compose #reply-target {
  margin: 0 0 10px;
  color: #0063c7;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.comment-compose textarea {
  /* 다른 속성은 유지 */
  min-height: 50px; /* 최소 높이: 기존 88px보다 줄이기 */
  height: 66px;     /* 처음 표시되는 높이 */
  padding: 8px 10px;
}

.comment-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.comment-compose-actions small {
  font-size: 11px;
}

.comment-compose input[type="submit"] {
  margin: 0;
  padding: 7px 20px;
  border-radius: 4px;
  font-size: 13px;
}

.comments-empty,
.comments-login {
  margin: 0;
  padding: 24px 12px;
  color: #777;
  font-size: 14px;
}

/* 모바일: 대댓글 들여쓰기와 여백 축소 */
@media (max-width: 600px) {
  .comment-item {
    padding: 10px 8px;
  }

  .comment-item--reply {
    margin-left: 10px;
  }

  .comment-meta {
    flex-wrap: wrap;
  }

  .comment-actions {
    margin-left: auto;
  }

  .comment-compose {
    padding: 10px;
  }
}