/* ==========================================================================
   자주 묻는 질문 (faq.php) — 디자인 원본 web/design/faq.html <style>
   ========================================================================== */

/* ── 페이지 머리 (marathon 과 같은 규격) ─────────────────────────────── */
.page-head { padding: calc(var(--header-h) + 40px) 0 24px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.crumb a:hover { color: var(--text); }
.page-head h1 { font-size: 40px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.page-head p { color: var(--text-2); margin-top: 8px; }

/* ── 큰 검색칸 ────────────────────────────────────────────────────────── */
.faq-search { position: relative; max-width: 720px; margin-top: 24px; }
.faq-search i { position: absolute; left: 18px; top: 50%; translate: 0 -50%; font-size: 22px; color: var(--text-2); pointer-events: none; }
.faq-search .input { height: 60px; padding-left: 52px; border-radius: var(--radius); font-size: 17px; }
.faq-cats { margin-top: 20px; }

/* ── 본문 2단: 질문 목록 + 고객센터 ────────────────────────────────── */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding-block: 32px 96px; }
.result-line { margin-bottom: 20px; font-size: 15px; color: var(--text-2); }
.result-line b { color: var(--primary); }
.faq-group + .faq-group { margin-top: 40px; }
.faq-group h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.faq-group h2 i { font-size: 22px; color: var(--primary); }
.faq-group .faq { max-width: none; }
/* 딥링크로 열린 문항이 고정 헤더에 가리지 않게 */
.faq-item { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-item summary { overflow-wrap: anywhere; }
.faq-a p + p, .faq-a p + ul, .faq-a ul + p { margin-top: 8px; }
.faq-a ul { list-style: disc; padding-left: 20px; }
.faq-a li + li { margin-top: 2px; }
.faq-a a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.faq-a a:hover { color: var(--primary); }

.faq-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
/* 공용 .support-card 는 메인의 grid-area 배치를 전제로 한다 — 이 페이지에선 풀어준다 */
.faq-side .support-card { grid-area: auto; }
.faq-side .support-card.has-photo { min-height: 400px; }
.side-links { padding: 12px; }
.side-links h2 { padding: 8px 10px 6px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.side-links a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; }
.side-links a:hover { background: var(--surface-2); }
.side-links a > i:first-child { font-size: 18px; color: var(--primary); }
.side-links a span { flex: 1; min-width: 0; }

@media (max-width: 1024px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
}
@media (max-width: 768px) {
  .page-head { padding-top: calc(var(--header-h) + 28px); }
  .page-head h1 { font-size: 30px; }
  .faq-search .input { height: 54px; font-size: 16px; }
  .faq-group h2 { font-size: 19px; }
  .faq-wrap { padding-bottom: 64px; }
}