/* ===== 5단계: 커뮤니티 — 글 상세·댓글·신고 =====
   community/templates/community/detail.html 과 그 부분 템플릿(_post_card·_comments·_comment·_report_dialog …)만 쓰는 보충 규칙이다.
   모양은 목업(page-others.jsx PostDetailPage·CommentsBlock·CommentItem·ReportModal·QuestionTag)의 인라인 style 을 그대로 두고,
   상태(눌림·펼침·선택)에 따라 바뀌는 값만 여기로 옮겼다 — 상태는 aria-pressed·aria-expanded·:checked 로 건다. */

/* 질문 '?' 안내 단추(목업 QuestionTag) */
.kp-cp-qbtn {
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1px solid var(--kp-border); background: #fff; color: var(--kp-text-muted);
  font-size: 10px; font-weight: 800; line-height: 1; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.kp-cp-qbtn[aria-expanded="true"] { border-color: var(--kp-accent-100); background: var(--kp-accent-50); color: var(--kp-accent-600); }

/* 본문·댓글 — 긴 주소·영문이 칸을 넘지 않게(한글은 base.css 의 keep-all 그대로). 댓글은 쓴 줄바꿈을 살린다 */
.kp-cp-body, .kp-cp-comment-text { overflow-wrap: anywhere; }
.kp-cp-comment-text { white-space: pre-line; }

/* 댓글 행동줄(목업 CommentItem 의 액션 바). 목업의 <button> 은 브라우저 기본 글자 크기(13.3333px)로 그려지므로
   비로그인용 <a> 와 정렬 링크도 같은 크기로 맞춘다. */
.kp-cp-act {
  background: none; border: none; padding: 0; cursor: pointer; color: var(--kp-text-muted);
  font-family: inherit; font-size: 13.3333px; font-weight: 400; display: inline-flex; align-items: center; gap: 3px;
}
a.kp-cp-act, a.kp-cp-act:hover { text-decoration: none; }
.kp-cp-like { font-weight: 500; }
.kp-cp-like[aria-pressed="true"] { color: var(--kp-primary-600); font-weight: 700; }
.kp-cp-dislike[aria-pressed="true"] { color: var(--kp-primary-600); }
.kp-cp-report { margin-left: auto; }
.kp-cp-act:focus-visible, .kp-cp-qbtn:focus-visible, .kp-cp-fold:focus-visible, .kp-cp-sort:focus-visible, .kp-cp-unblock:focus-visible {
  outline: 2px solid var(--kp-primary-500); outline-offset: 2px;
}

/* 댓글 정렬(최신순·공감순) — 목업의 단추를 링크로 그렸다 */
.kp-cp-sort {
  background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 13.3333px;
  padding: 4px 8px; border-radius: 3px; font-weight: 500; color: var(--kp-text-muted);
}
.kp-cp-sort, .kp-cp-sort:hover { text-decoration: none; }
.kp-cp-sort.is-active { font-weight: 800; color: var(--kp-primary-600); }

/* 댓글 접기·차단 해제 */
.kp-cp-fold { background: none; border: none; padding: 4px; cursor: pointer; color: var(--kp-text-muted); display: inline-flex; font-size: 10px; }
.kp-cp-fold > span { display: inline-flex; }
.kp-cp-unblock { background: none; border: none; padding: 0; font-family: inherit; font-size: 11.5px; color: var(--kp-primary-600); font-weight: 700; cursor: pointer; }

/* 공유 글 댓글의 '작성자' 표지(김박사넷 isAuthor) — '나' 표지와 같은 크기 */
.kp-cp-opbadge { font-size: 9px; font-weight: 800; padding: 1px 5px; background: var(--kp-accent-50); color: var(--kp-accent-600); border-radius: 2px; letter-spacing: 0.04em; }

/* 알림·등록 뒤 #comment-N 으로 올 때 고정 머리줄에 가리지 않게 */
.kp-cp-comment, #comments { scroll-margin-top: calc(var(--kp-sticky-top, 88px) + 12px); }

/* 신고 대화상자(목업 ReportModal) — 고른 사유 줄 강조 */
.kp-cp-reason {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--kp-border); border-radius: 4px;
  cursor: pointer; background: transparent; font-size: 13px; font-weight: 400;
}
.kp-cp-reason:has(input:checked) { border-color: var(--kp-primary-600); background: var(--kp-primary-25); font-weight: 600; }
.kp-cp-reason input { margin: 0; flex-shrink: 0; }
.kp-cp-reason:has(input:focus-visible) { outline: 2px solid var(--kp-primary-500); outline-offset: 1px; }
.kp-cp-close { background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 0 2px; color: var(--kp-text); font-family: inherit; }
dialog.kp-cp-report-dialog { max-height: calc(100vh - 32px); overflow-y: auto; }

/* 이전/다음글·하단 위젯·오른쪽 지면의 링크는 둘레 글자색을 따른다(줄 전체 클릭은 data-href) */
.kp-cp-rowlink, .kp-cp-rowlink:hover { color: inherit; text-decoration: none; }
a.kp-cp-railcard, a.kp-cp-railcard:hover { color: inherit; text-decoration: none; }