/* ============================================================
   리뷰 관리 (Reviews)
   - 문의 관리(inquiries)와 동일한 구조·디자인을 공유한다.
   - 공용 클래스(page_body / dtable_* / modal_* / field_* / btn_*)는
     components.css·layouts.css를 그대로 재사용하고,
     이 파일에는 리뷰 고유 래퍼(필터 바·셀 인디케이터·상세 모달)만 정의한다.
   ============================================================ */

/* ── 필터 바 (검색 + 상태/평점 셀렉트) ─────────────── */
.review_filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.review_filter_search {
  position: relative;
  flex: 0 1 auto;
  width: 16rem;
}

.review_filter_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--c-gray-400);
  pointer-events: none;
}

.review_filter_input {
  width: 100%;
  height: 2.375rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--c-text-1);
  outline: none;
}

.review_filter_input:focus {
  border-color: var(--c-primary-500);
}

.dark .review_filter_input {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

/* 셀렉트 높이를 검색박스(2.375rem)와 맞춤 */
.review_filter .cselect {
  width: auto;
  min-width: 8rem;
}

.review_filter .cselect_trigger {
  height: 2.375rem;
}

/* ── 테이블: 컬럼 고정폭 + 셀 넘침 시 말줄임(...) ──────── */
.review_table {
  table-layout: fixed;
}

.review_table .dtable_td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 숨김 상태 배지 (gray) — 공용 dtable_badge 확장 ── */
.dtable_badge.is_muted {
  background-color: var(--c-gray-400);
  color: #fff;
}

/* ── 상세/답변 모달 (inquiry_modal과 동일 구조) ── */
.review_modal {
  max-width: 40rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.review_modal .modal_footer {
  flex-shrink: 0;
}

.review_modal_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.review_modal_head .modal_title {
  margin-bottom: 0;
}

.review_modal_body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* 본문이 85vh를 넘어 스크롤될 때 스크롤바 숨김 (dtable_scroll과 동일) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.review_modal_body::-webkit-scrollbar {
  display: none;
}

/* 모달 폼 2열 그리드: 열 간격 1rem */
.review_modal .grid_2col {
  column-gap: 1rem;
}

/* 읽기전용 정보 인풋 */
.review_modal_body .field_input[readonly] {
  cursor: default;
}

.review_modal_body .field_input[readonly]:focus {
  border-color: var(--c-input-border);
}

/* 평점 표시 행 (인풋 높이에 맞춤) */
.review_rating_row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.375rem;
}

.review_rating_value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-1);
}

/* 리뷰 내용: 읽기전용 멀티라인 박스 */
.review_detail_content {
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--c-text-1);
  background-color: var(--c-white);
  max-height: 12rem;
  overflow-y: auto;
}

.dark .review_detail_content {
  background-color: var(--c-gray-200);
  border-color: var(--c-gray-400);
  color: var(--c-gray-900);
}

/* 첨부 사진 그리드 */
.review_images {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.review_image_thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  transition: opacity var(--duration-fast) var(--ease-default);
}

.review_image_thumb:hover {
  opacity: 0.8;
}

.review_image_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 관리자 답변 textarea */
.review_reply_textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 6rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: inherit;
  color: var(--c-text-1);
  background-color: #fff;
  resize: none;
  outline: none;
}

.review_reply_textarea:focus {
  border-color: var(--c-primary-500);
}

.dark .review_reply_textarea {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.review_reply_meta {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--c-gray-500);
}