/* ============================================================
 * 의견/문의 (TASK-029 ⑧ 편입 재작업 — Figma 172:3155 "문의하기" 폼 참고,
 * 393px 모바일로 재구성. 백엔드 계약(kind·category·order·photos)은 무변경 —
 * 디자인은 레이아웃/위계/컴포넌트 스타일만 차용. mypage.css 관례(서브헤더·
 * 카드·폼 필드) 와 일관되게 재량 보강.
 * TASK-049: 목록·상세 분리 화면을 단일 페이지(작성 폼 + 내역 아코디언)로 통합 —
 * 구 카드 목록(.inquiry-card*)·스레드 말풍선(.inquiry-msg*)은 마크업과 함께 제거.
 * ============================================================ */

.inquiry-content {
  background: var(--color-bg);
  min-height: 100dvh;
  /* 헤더-본문 간격 = 래퍼 padding-top 단일 소유 — 첫 블록(inquiry-form)의 top 성분은 0 (TASK-099) */
  padding-top: var(--space-content-top);
  padding-bottom: calc(var(--size-bottomnav) + var(--safe-bottom) + var(--space-6));
}

/* 서브헤더는 공통 헤더로 통합(TASK-044 ④) → 대형 배너 표준(shared/_page_header,
   home.css .page-header)으로 승계 — TASK-092. 구 .inquiry-subheader* 규칙 이관 제거. */

/* flash 표시는 전역 토스트로 이관 (TASK-051 ② — 구 .inquiry-flash* 제거) */

/* 빈 상태 (내역 0건 — 이동 링크 없음, 같은 페이지 상단 폼으로 유도) */
.inquiry-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-fg-subtle);
}
.inquiry-empty__icon {
  display: flex;
  width: calc(var(--space-8) * 2);
  height: calc(var(--space-8) * 2);
  margin: 0 auto var(--space-4);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-fg-brand);
}
.inquiry-empty p { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); }

/* ── 작성 폼 (Figma 172:3155 참고) ── */
/* top 간격은 .inquiry-content 소유 (TASK-099 — 구 space-5 20px) */
.inquiry-form { padding: 0 var(--space-page); }
.inquiry-form__intro {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-snug);
}
.inquiry-form__error {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-3-5);
  background: var(--color-bg-critical);
  border-radius: var(--radius-md);
}
.inquiry-form__error-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-critical);
}
.inquiry-form__error ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-fg-critical);
}

.inquiry-form__field { margin-bottom: var(--space-5); }
.inquiry-form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}
.inquiry-form__hint {
  display: block;
  margin-top: var(--space-1-5);
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
}

.inquiry-form__input,
.inquiry-form__select {
  width: 100%;
  height: 52px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-fg);
  outline: none;
  box-sizing: border-box;
  background: var(--color-bg);
}
.inquiry-form__textarea {
  width: 100%;
  min-height: 140px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-fg);
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  line-height: var(--line-height-normal);
}
.inquiry-form__input:focus,
.inquiry-form__select:focus,
.inquiry-form__textarea:focus { border-color: var(--color-fg-brand); }

/* 드롭다운 화살표 = 글씨 들여쓰기(좌 var(--space-3-5))와 동일 간격으로 우측 정렬 (TASK-057 #11).
   네이티브 화살표는 브라우저 기본 여백이라 좌우 비대칭 → appearance:none + 커스텀 chevron을
   right var(--space-3-5)에 고정. 텍스트가 화살표와 겹치지 않게 우 패딩 확보. */
.inquiry-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-3-5) + 16px + var(--space-2));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23868B94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3-5) center;
}

/* 유형 토글 (의견/문의) — 라디오는 sr-only, 라벨을 pill 버튼으로 스킨 */
.kind-toggle {
  display: flex;
  gap: var(--space-2);
}
.kind-toggle__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-muted);
  cursor: pointer;
  user-select: none;
}
.kind-toggle__input:checked + .kind-toggle__label {
  border-color: var(--color-bg-inverse);
  background: var(--color-bg-inverse);
  color: var(--color-fg-on-inverse);
  font-weight: var(--font-weight-semibold);
}
.kind-toggle__input:focus-visible + .kind-toggle__label { outline: 2px solid var(--color-fg-brand); outline-offset: 2px; }

/* 문의 상세(카테고리·주문) — kind=문의일 때만 노출, JS는 UX 보조(진입 시 서버 렌더 상태가 정본) */
.inquiry-form__conditional {
  padding: var(--space-4) var(--space-3-5);
  margin-bottom: var(--space-5);
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg);
}
.inquiry-form__conditional-title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.inquiry-form__conditional .inquiry-form__field:last-child { margin-bottom: 0; }

/* 사진 첨부 — 네이티브 file input을 직접 스킨 (드래그앤드롭 미도입, 파일선택 버튼만 커스텀) */
.inquiry-form__file {
  width: 100%;
  min-height: 52px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  background: var(--color-bg-subtle);
  box-sizing: border-box;
}
.inquiry-form__file::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-inverse);
  color: var(--color-fg-on-inverse);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

/* 선택 사진 미리보기 + 개별삭제 (TASK-057 #12) — inquiry_photos 컨트롤러가 렌더.
   선택분이 없으면 hidden. 각 썸네일 우상단 x로 개별 제거(FileList는 JS가 재구성). */
.inquiry-form__previews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.inquiry-form__previews[hidden] { display: none; }
.inquiry-form__preview {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-subtle);
}
.inquiry-form__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inquiry-form__preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-gray-00);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.inquiry-form__submit-wrap { padding: var(--space-2) 0 var(--space-6); }
/* 주 CTA = 브랜드 주황 (TASK-057 #9 — 타 탭 primary CTA(mypage/orders/campaign)와 정합.
   같은 페이지 답글 등록 버튼도 이미 주황). 반전(검정) 톤이 outlier였음 */
.inquiry-form__submit {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-solid);
  color: var(--color-fg-on-brand);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* ── 주문 참조 카드 (아코디언 펼침 내부 재사용 — 구 상세 화면에서 이관) ── */
.inquiry-detail__order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3-5);
  margin-bottom: var(--space-5);
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.inquiry-detail__order-label { font-size: var(--font-size-xs); color: var(--color-fg-subtle); display: block; margin-bottom: 2px; }
.inquiry-detail__order-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg); }
.inquiry-detail__order-chevron { flex-shrink: 0; color: var(--color-fg-subtle); }

/* ── 문의 내역 아코디언 (TASK-049 — Figma 277-2054 접힘 / 281-2127 펼침 / 281-2068 댓글)
   카드 = 흰 배경·라운드·보더(구 .inquiry-card 시각과 동급), <details>가 카드 자체.
   펼침 콘텐츠(summary 제외)는 좌우 space-4·하단 space-4 패딩을 각 블록에 분배. ── */
.inquiry-history { padding: var(--space-6) var(--space-page) 0; }
.inquiry-history__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-fg);
}
.inquiry-item {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  margin-bottom: var(--space-3);
  scroll-margin-top: var(--space-3); /* focus 회송 스크롤 착지 여백 (TASK-051 ④) */
}
/* 본문 수정 열림 = 원본 본문 숨김 — 편집 폼과 이중 노출 방지 (TASK-051 ③).
   :has 미지원 구형 브라우저는 원본이 그대로 보일 뿐 — 동작 무해 저하 */
.inquiry-item:has(.inquiry-edit[open]) .inquiry-item__body { display: none; }
.inquiry-item__summary {
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.inquiry-item__summary::-webkit-details-marker { display: none; }
.inquiry-item__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.inquiry-item__title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inquiry-item__chevron {
  flex-shrink: 0;
  color: var(--color-fg-subtle);
  transition: transform 0.2s ease;
}
.inquiry-item[open] .inquiry-item__chevron { transform: rotate(180deg); }
.inquiry-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
}
.inquiry-item__date { margin-left: auto; }

/* 펼침 본문 */
.inquiry-item__body {
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-fg);
}
.inquiry-item__body p { margin: 0 0 var(--space-2); }
.inquiry-item__body p:last-child { margin-bottom: 0; }
.inquiry-item__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}
.inquiry-item__photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-subtle);
}
.inquiry-item__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 주문 참조 카드가 카드 내부에 들어올 땐 좌우 여백·간격 축소 */
.inquiry-item .inquiry-detail__order { margin: 0 var(--space-4) var(--space-3); }

/* 수정·삭제 액션 줄 — 닫힘 = [본문 수정][삭제] 순서(.inquiry-edit order:-1),
   삭제는 button_to라 form 래퍼가 생김 → display:contents로 플랫하게 */
.inquiry-item__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}
/* 직속 button_to(삭제) form만 평탄화 — 자식 결합자 필수 (TASK-057 #13 회귀 수정).
   자손 `form` 전체를 노리면 .inquiry-edit 내부 수정 폼(.inquiry-edit__form)까지
   display:contents로 덮여(specificity 0,1,1 > 0,1,0) flex 세로 스택이 깨진다. */
.inquiry-item__actions > form { display: contents; }
.inquiry-item__delete {
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-fg-critical);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
/* 본문 수정 — <details> 토글, 펼치면 액션 줄 전체 폭을 차지 */
.inquiry-edit { order: -1; }
.inquiry-edit[open] { flex-basis: 100%; }
.inquiry-edit__toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-fg-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.inquiry-edit__toggle::-webkit-details-marker { display: none; }
/* 토글 라벨 교체: 닫힘 = "본문 수정" / 열림 = "수정 취소" (TASK-051 ③) */
.inquiry-edit .inquiry-edit__label-open { display: none; }
.inquiry-edit[open] .inquiry-edit__label-open { display: inline; }
.inquiry-edit[open] .inquiry-edit__label-closed { display: none; }
.inquiry-edit__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.inquiry-edit__save {
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-solid); /* 주황 톤 정합 (TASK-057 #9) */
  color: var(--color-fg-on-brand);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* 댓글(운영자 답변 + 내 답글) — 스레드 말풍선 폐지, 평문 리스트 */
.inquiry-item__comments {
  margin: 0 var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.inquiry-item__comments-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-muted);
}
.inquiry-comment { margin-bottom: var(--space-3); }
.inquiry-comment:last-child { margin-bottom: 0; }
.inquiry-comment__meta {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
}
.inquiry-comment__body {
  font-size: var(--font-size-sm);
  color: var(--color-fg);
}
.inquiry-comment__body p { margin: 0; }

/* 답글 입력 폼 (문서 흐름 — 하단 고정 아님, bottom_nav와 간섭 없음) */
.inquiry-reply {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
}
.inquiry-reply__input {
  flex: 1;
  padding: var(--space-3) var(--space-3-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-family: inherit;
  color: var(--color-fg);
  background: var(--color-bg);
  resize: vertical;
  min-height: 44px;
}
.inquiry-reply__input:focus { outline: none; border-color: var(--color-fg-brand); }
.inquiry-reply__submit {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-brand-solid);
  color: var(--color-fg-on-brand);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
/* 카드 내부의 답글 폼 — 펼침 콘텐츠 공통 패딩(좌우·하단 space-4)으로 조정 */
.inquiry-item .inquiry-reply { padding: 0 var(--space-4) var(--space-4); }