/*
 * post_detail.css — 게시글을 눌러 들어간 상세 화면
 *
 * 제목·작성자·날짜·조회수, 본문, 추천·비추천, 목록 버튼의 모양입니다.
 * .post-detail-header: 제목 배경 / .post-detail-title: 제목 / .post-detail-meta: 작성 정보
 * .post-body: 본문·사진 / .post-vote: 추천 버튼 / .post-detail-footer: 아래쪽 정보
 * .post-detail-edit·.post-detail-delete: 수정·삭제 버튼
 * 상세 화면을 바꿀 때 수정하세요. 글 목록은 02_posts.css·zz_mobile.css, 댓글은 04_comments.css입니다.
 */

.post-navigation {
  margin-bottom: 12px;
  font-size: 13px;
}

.post-navigation a {
  color: #626b77;
}

/* 게시글 전체 */
.post-detail {
  min-width: 0;
  border: 1px solid #e0e4e9;
  border-radius: 6px;
  background: #fff;
}

/* 제목과 작성자 영역 */
.post-detail-header {
  padding: 20px;
  border-bottom: 1px solid #e0e4e9;
  background: #f8f9fb;
}

.post-detail-title {
  margin: 0 0 14px;
  color: #20242c;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.post-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.post-detail-author {
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
}

.post-detail-author .user-avatar {
  flex-basis: 26px;
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.post-detail-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  color: #858c96;
  font-size: 12px;
}

.post-detail-info time {
  white-space: nowrap;
}

/* 삭제는 작성 정보 오른쪽에 작게 */
.post-detail-delete-form {
  display: inline-flex;
  margin: 0;
}

.post-detail .post-detail-delete {
  min-height: 28px;
  padding: 3px 7px;
  border-radius: 4px;
  background: transparent;
  color: #858c96;
  font-size: 12px;
  line-height: 1.4;
}

.post-detail .post-detail-delete:hover {
  background: #fff0ee;
  color: #b42318;
}

/* 본문: HTML 들여쓰기가 불필요한 여백으로 표시되지 않도록 */
.post-body {
  min-width: 0;
  padding: 28px 20px;
  color: #252932;
  font-size: 16px;
  line-height: 1.8;
  white-space: normal;
  overflow-wrap: anywhere;
}

.post-body p {
  margin: 0 0 16px;
  white-space: pre-wrap;
}

.post-body > :last-child {
  margin-bottom: 0;
}

.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px 0;
  border-radius: 4px;
}

.post-body blockquote {
  margin: 16px 0;
  padding: 8px 16px;
  border-left: 3px solid #cbd3dd;
  color: #626b77;
  background: #f8f9fb;
}

/* 추천·비추천은 본문 아래 중앙 */
.post-vote-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 28px;
}

.post-vote-actions form {
  margin: 0;
}

.post-detail .post-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 92px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #dce1e8;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
}

.post-detail .post-vote--up {
  border-color: #b8d6f6;
  background: #f2f8ff;
  color: #0063c7;
}

.post-detail .post-vote--down {
  color: #626b77;
}

.post-detail .post-vote:hover {
  filter: brightness(0.96);
}

.post-vote strong {
  font-size: 16px;
}

/* 하단 댓글 수와 목록 버튼 */
.post-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #edf0f3;
  color: #737b87;
  font-size: 12px;
}

.post-detail-footer strong {
  color: #0071e3;
}

.post-list-link {
  padding: 5px 12px;
  border: 1px solid #dce1e8;
  border-radius: 4px;
  color: #414956;
}

.post-detail button:focus-visible,
.post-list-link:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
}

/* 모바일 */
@media (max-width: 600px) {
  .post-detail-header {
    padding: 16px 14px;
  }

  .post-detail-title {
    font-size: 20px;
  }

  .post-body {
    padding: 22px 14px;
    font-size: 15px;
  }

  .post-detail-footer {
    padding: 12px 14px;
  }

  /* 게시글 작성자에게만 표시되는 수정 링크 */
.post-detail-edit {
  padding: 3px 7px;
  border-radius: 4px;
  color: #737b87;
  font-size: 12px;
}

.post-detail-edit:hover {
  background: #eaf3ff;
  color: #0063c7;
  text-decoration: none;
}
}