/* 커뮤니티 화면 전용. 고객 게시글 상세·공지 상세와 관리자 게시글 상세가 함께 쓴다. */

/* 본문 영역. 한 줄짜리 본문이 제목과 다음 블록 사이에 끼면 글이 아니라 메모처럼 보여서 최소
   높이를 준다. 긴 본문은 이 높이를 넘겨 그대로 늘어나므로 짧은 글에만 영향이 있다.

   세로 패딩을 축약형 `padding` 으로 쓰지 않는다. 관리자 상세는 이 클래스가 `.panel` 과 같은
   요소에 붙어서, 축약형이면 같은 특이성으로 `.panel` 의 좌우 12px 까지 0 으로 덮어 본문이
   패널 테두리에 붙는다(PR #363 Codex 리뷰). */
.post-body {
    min-height: 140px;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.post-body p {
    line-height: 1.8;
    white-space: pre-wrap;
}

/* 댓글은 상자가 아니라 구분선 목록으로 그린다 —
   댓글마다 panel 테두리를 두르면 한 줄짜리 댓글도 본문보다 무거워 보인다. */
.comment-item {
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-2) 0;
}

.comment-item:last-child {
    border-bottom: 0;
}

/* 서버가 렌더링한 앵커의 목적지. 이동은 브라우저 기본 앵커 이동만 쓴다. */
.comment-row {
    border-radius: var(--radius-sm);
    scroll-margin-top: var(--space-8);
}

/* `이전 댓글 더 보기` 의 착지 지점. .comment-row 와 같은 여백을 준다. */
#comments {
    scroll-margin-top: var(--space-8);
}

/* 알림에서 들어온 그 한 줄만 표시한다. `:target` 을 쓰지 않는 이유는 그것이 앵커가 있는
   모든 이동에 걸리기 때문이다 — 펼치기·접기·작성·삭제로 온 사람은 어느 댓글인지 알고
   눌렀으므로 강조가 답이 아니라 소음이다. 어느 줄인지 모르고 들어오는 경로는 알림뿐이고,
   그 경로만 서버가 이 클래스를 붙인다. */
.comment-row--focused {
    background: var(--color-background-soft);
    outline: 2px solid var(--color-info);
    outline-offset: var(--space-1);
}