/* =========================================================
   자주 묻는 질문 (Views/Home/Faq.cshtml)

   검색 · 분류 탭 · 아코디언. 모양은 컴포넌트가 갖고 있으므로
   여기는 배치와 이 화면에만 있는 것 하나(검색어 칠하기)만 둡니다.
   ========================================================= */

.page-faq {
  max-width: var(--pd-read-w);
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-6);
}

.page-faq__search-row {
  display: flex;
  gap: var(--pd-space-2);
}
.page-faq__search-row .pd-input-group { flex: 1 1 auto; min-width: 0; }
.page-faq__search-row .pd-btn { flex: 0 0 auto; min-width: 96px; }

/* 분류가 8개라 좁은 화면에서는 가로로 넘칩니다. .pd-tabs 가 이미
   가로 스크롤을 갖고 있어 여기서는 아래 여백만 뗍니다. */
.page-faq__tabs { margin-bottom: 0; }

/* 글줄 폭을 고객센터 화면끼리 900px 로 맞추자 8개가 40px 모자라 마지막
   분류("기타")가 스크롤 밖으로 나갔습니다. 두 줄 탭은 디자인 시스템이 두지
   않기로 한 모양이고(components.css), 가로 스크롤은 자리가 있는 넓은 화면에서
   항목을 감춥니다. 좌우 여백만 한 급 줄여 한 줄에 넣습니다. */
.page-faq__tabs .pd-tab { padding-inline: var(--pd-space-4); }

/* 검색어 칠하기. mark.js 가 <mark> 로 감쌉니다.
   예전에는 주황 배경에 검은 글자였는데, 본문 위에서 너무 튀어 답을 읽는
   것을 방해했습니다. 강조는 유지하되 톤을 낮춥니다. */
.page-faq mark {
  background-color: var(--pd-gold-50);
  color: var(--pd-text);
  border-radius: var(--pd-radius-xs);
  padding: 0 2px;
  box-shadow: inset 0 -2px 0 var(--pd-gold-400);
}

/* 질문 제목이 길면 두 줄이 됩니다. 화살표는 첫 줄에 맞춰 둡니다. */
.page-faq .pd-accordion__trigger { align-items: flex-start; }
.page-faq .pd-accordion__chev { margin-top: 3px; }

/* 이 화면은 목록 전체가 질문입니다. 질문이 본문(14px)보다 한 급밖에 크지 않아
   접힌 상태에서 무엇이 제목인지 잘 드러나지 않았습니다. 16px 로 올립니다.
   (컴포넌트 기본 15px 는 카드 안에 아코디언이 곁들여 들어가는 화면 기준입니다.) */
.page-faq .pd-accordion__q { font-size: 16px; }

/* 답변 문단 사이 여백. .pd-prose 의 기본은 16px 인데 답변은 대개 두세 문단짜리
   짧은 글이라 문단이 따로 놀아 보였습니다. 한 급 줄입니다. 마지막 문단의
   아래 여백은 패널이 이미 갖고 있으므로 뗍니다. */
.page-faq .pd-accordion__panel .pd-prose p { margin-bottom: var(--pd-space-2); }
.page-faq .pd-accordion__panel .pd-prose > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .page-faq__search-row { flex-direction: column; }
  .page-faq__search-row .pd-btn { width: 100%; }
}