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

/* ── 상태 탭 (답변대기/답변완료) ────────────────── */
/* tab_nav/tab_item(components.css) 재사용 + page_body 안에서 줄어들지 않게 */
.inquiry_page_body {
  padding-left: 1.5rem;
}

.tab_nav.inquiry_tabs {
  flex-shrink: 0;
  margin-bottom: 1rem;
}

/* ── 필터 바 (notice_filter/faq_filter와 동일 디자인) ── */
.inquiry_filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

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

.inquiry_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;
}

.inquiry_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;
}

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

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

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

.inquiry_filter .cselect_trigger {
  height: 2.375rem;
}

/* ── 테이블: 컬럼 고정폭 + 셀 넘침 시 말줄임(...) ──────── */
/* table-layout:fixed라야 colgroup 너비가 고정되어 ellipsis가 동작한다.
   (기본 auto에서는 긴 제목이 컬럼을 밀어내 ... 처리가 안 됨) */
.inquiry_table {
  table-layout: fixed;
}

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

/* ── 답변대기 상태 배지 (warning 오렌지) — 공용 dtable_badge 확장 ── */
.dtable_badge.is_waiting {
  background-color: var(--c-red-400);
  color: #fff;
}

/* ── 상세/답변 모달 (notice_modal과 동일 구조, 에디터 없는 경량형) ── */
.inquiry_modal {
  max-width: 40rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

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

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

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

.inquiry_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;
}

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

/* 모달 폼 2열 그리드: 열 간격 1rem (notice_titlerow와 동일 느낌) */
.inquiry_modal .grid_2col {
  column-gap: 1rem;
}

/* 읽기전용 정보 인풋: 공지 모달 입력칸과 동일하게 보이되 수정만 불가 */
.inquiry_modal_body .field_input[readonly] {
  cursor: default;
}

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

/* 문의 내용: 읽기전용 멀티라인 박스 (field_input과 동일 톤) */
.inquiry_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);
  min-height: 6rem;
}

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

/* 답변 완료 박스: 투명 배경 + success 보더(완료 표기) + 높이 고정
   (textarea와 동일 높이로 고정해 답변 수정 전환 시 팝업 높이가 변하지 않게) */
.inquiry_reply_box {
  background-color: transparent;
  border: 1px solid var(--c-primary-500);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 답변 본문: 박스 내 남은 높이를 채우고 길면 자체 스크롤 */
.inquiry_reply_text {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--c-text-1);
}

/* 작성자/일시: 박스 하단, 그레이톤 */
.inquiry_reply_head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-line);
}

.inquiry_reply_author {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-600);
}

.inquiry_reply_meta {
  font-size: 0.8125rem;
  color: var(--c-gray-600);
}

/* 답변 입력/수정 textarea: 완료 박스와 동일 높이 → 전환 시 팝업 높이 고정 */
.inquiry_reply_textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 9rem;
  max-height: 9rem;
  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;
}

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

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

.inquiry_reply_empty {
  font-size: 0.875rem;
  color: var(--c-gray-500);
  padding: 0.5rem 0;
}