/* ==========================================================================
   13_detail.html (게시글 상세 화면) 전용 스타일
   리뷰 본문 + 별점 + 좋아요/북마크/신고 + 베스트댓글/전체댓글 + 신고 모달
   ========================================================================== */

.detail-wrap { max-width: 860px; margin: 32px auto; }
.detail-meta-top { display:flex; align-items:center; gap:10px; color:var(--text-2); font-size:13px; margin-bottom:8px; } /* 제목 위, 카테고리 뱃지 + 조회수 줄 */
.detail-title { font-size:26px; font-weight:800; margin:0 0 16px; }

/* ---------- 작성자 프로필 줄 (아바타 + 이름/등급 + 작성일, 오른쪽엔 수정/삭제 버튼) ---------- */
.author-row { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--border); }
.author-info { display:flex; align-items:center; gap:10px; }
/* 프로필 이미지 영역 수정 */
.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-3);
  overflow: hidden; /* 영역을 벗어나는 이미지 부분을 숨김 */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 비율을 유지하면서 원을 꽉 채우도록 설정 */
}

.author-name { font-weight:700; font-size:14px; }
.author-sub { font-size:12px; color:var(--text-2); }
.owner-actions { display:flex; gap:8px; } /* 작성자 본인 / 관리자에게만 보이는 수정·삭제 버튼 묶음 (data-role-visible로 JS가 표시 제어) */

/* ---------- 평균 별점 + 내 별점 매기기 ---------- */
.rating-block { display:flex; align-items:center; gap:14px; margin:10px 0; }
.rating-block .rating-label { font-size:16px; font-weight:600; color:var(--text-2);}
/* [수정] 별점(★/☆) 애니메이션/그라데이션 효과 제거 + 단색 노란색으로 변경 요청으로 수정.
   평점이 0이면 th:each 조건(i <= round(rating))이 항상 false라 전부 '☆'(테두리만 있는 별)로
   렌더링되므로, 별도 처리 없이 color만 지정해도 0점일 때 테두리만 보이는 별로 표시됨 */
.rating-block .score { font-size:28px; letter-spacing:3px; color:var(--gold); display: inline-block; }
/* [수정] 숫자 평점도 별점과 동일하게 그라데이션/올라오는 애니메이션 제거 + 단색 노란색으로 변경 */
.rating-block .stars { font-size:24px; font-weight:800; color:var(--gold); display: inline-block; }
/* ---------- 리뷰 본문 (대표 이미지 + 텍스트 + 관련작품 뱃지) ---------- */

/* 사진 영역 수정완료 */ 
.post-body-img {
  width: 100%; 
  border-radius: var(--radius); 
  margin: 20px 0; 
  overflow: hidden; 
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
}
.post-body-img img {
  width: 100%;
  height: auto;      
  display: block;     /* 1. 인라인 속성을 블록 속성으로 체인지해 글자 공백 제거 */
  vertical-align: bottom; /* 2. 만약 display 변경이 안 먹힐 때를 대비한 교차 방어선 */
}
.post-body-text { line-height:1.8; color:var(--text-1); font-size:15px; white-space:pre-line; border-bottom:1px solid var(--border); padding-bottom: 5px;} /* pre-line -> textarea에 입력된 줄바꿈을 그대로 살려서 보여줌 */
.related-works { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:20px 0; font-size:13px; }
.related-works strong { color:var(--text-1); font-weight:700; margin-right:2px; }

/* ---------- 관련작품 바로 아래, 이 게시글의 장르 카테고리 태그 ---------- */
.genre-tags { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.genre-tags-label { font-size:12px; font-weight:700; color:var(--text-2); margin-right:2px; }
.genre-tag { padding:5px 12px; border-radius:999px; background:var(--bg-2); border:1px solid var(--border); color:var(--text-1); font-size:12px; }

/* ---------- 좋아요 / 북마크 / 신고 버튼 줄 ---------- */
.interaction-bar { display:flex; gap:10px; margin:28px 0; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.interaction-bar .btn.active { background: var(--accent); border-color: var(--accent); color:#fff; } /* 이미 좋아요를 누른 상태를 강조 표시 */

/* ---------- 댓글 영역 전체 ---------- */
.comment-section { margin-top: 32px; }

/* 댓글 입력창 + 등록 버튼 줄 */
.comment-input-row { display:flex; gap:10px; margin-bottom:24px; }
.comment-input-row input { flex:1; background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:12px; color:#fff; }

/* 댓글 한 개 (작성자/날짜 + 본문 + 좋아요/신고 버튼) */
.comment-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-item .c-head, .reply-item .c-head { display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.comment-item .c-head-left { display:flex; align-items:center; gap:6px; } /* 작성자 이름 옆에 BEST 뱃지를 같이 두기 위한 묶음 */
.comment-item .c-author, .reply-item .c-author { font-weight:700; }
.comment-item .c-date, .reply-item .c-date { color:var(--text-2); }
.comment-item .c-body, .reply-item .c-body { font-size:14px; color:var(--text-1); }
.comment-actions { margin-top:6px; display:flex; gap:12px; font-size:12px; color:var(--text-2); }
.comment-actions .reply-toggle { cursor:pointer; }

/* 댓글 바로 아래, 그 댓글에 달린 대댓글 목록 */
.reply-list { margin:10px 0 0 24px; display:flex; flex-direction:column; gap:10px; }
.reply-item { padding-left:12px; border-left:2px solid var(--border); font-size:13px; }
.reply-item .c-body { font-size:13px; }
/* 대댓글 안에 또 대댓글(대대댓글...)이 달릴 때는 들여쓰기가 계속 24px씩 누적되지 않도록 더 좁게 */
.reply-item .reply-list, .reply-item .reply-form { margin-left:16px; }

/* "답글달기" 클릭 시 댓글 바로 아래 열리는 대댓글 작성폼 */
.reply-form { display:flex; gap:8px; margin:10px 0 0 24px; }
.reply-form input { flex:1; background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:#fff; font-size:13px; }

/* "수정" 클릭 시 댓글/대댓글 본문 자리에 대신 나타나는 인라인 수정폼 */
.comment-edit-form { display:flex; gap:8px; margin-top:6px; }
.comment-edit-form input { flex:1; background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:#fff; font-size:13px; }

/* "🏆 베스트 댓글" / "전체 댓글" 구분용 작은 소제목 */
.comment-subheading { font-size:13px; font-weight:700; color:var(--text-2); margin:24px 0 10px; }
.comment-subheading:first-of-type { margin-top:20px; }

/* 베스트 댓글 3개에 붙는 골드 톤 강조 스타일 (왼쪽 강조선 + 은은한 배경) */
.comment-item.best {
  background: rgba(245,197,24,0.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding-left: 12px;
}

/* 댓글 좋아요(♥) 클릭 버튼 - 누르면 빨간색으로 바뀌고 숫자가 +1/-1 토글됨 */
.comment-like { cursor:pointer; user-select:none; }
.comment-like:hover { color:var(--text-1); }
.comment-like.liked { color:var(--accent); font-weight:700; }

/* ---------- 신고하기 모달 (common.css .report-modal 공용 껍데기를 이 화면에 맞게 세부 조정) ---------- */
.report-modal { width:380px; }
.report-modal .form-row label { font-size:12px; }                                   /* 모달 안 라벨은 본문 폼보다 살짝 작게 */
.report-modal .form-row select, .report-modal .form-row textarea { padding:10px; font-size:13px; }
.report-modal .form-row textarea { min-height:120px; }                              /* common.css 기본 textarea(min-height:280px)보다 작게 - 신고 상세 내용은 짧으니까 */
.btn-row .btn { flex:1; } /* 신고 모달의 "취소/신고하기" 버튼을 폭 절반씩 꽉 채워서 배치 */

/* [삭제] heading-shine / heading-fade-in 키프레임 - 별점/숫자 평점 애니메이션 제거로 더 이상 쓰는 곳이 없어 삭제 */