/* ===== FAQ ===== */
.faq-wrap { max-width: 900px; margin: 0 auto; padding: 0 6% 80px; }

.faq-cat { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.faq-cat button {
  background: white; border: 2px solid transparent;
  padding: 10px 18px; border-radius: 999px;
  font-family: 'Pretendard'; font-weight: 700; font-size: 13px;
  cursor: pointer; color: var(--text-soft);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.faq-cat button.active { background: var(--pink); color: white; box-shadow: 0 4px 0 var(--pink-deep); }

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: white;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  transition: all .2s;
}
.faq-q {
  padding: 18px 24px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
}
.faq-q::before {
  content: 'Q.';
  color: var(--pink-deep);
  font-family: 'Jua';
  margin-right: 12px;
  flex-shrink: 0;
}
.faq-q .arr { transition: transform .2s; color: var(--text-soft); }
.faq-item.open { box-shadow: 0 6px 16px rgba(0,0,0,.05); border: 2px solid var(--pink); }
.faq-item.open .arr { transform: rotate(180deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
  padding: 0 24px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 500px; padding: 0 24px 22px 50px; }
.faq-a strong { color: var(--pink-deep); }
.faq-a ul { margin: 8px 0 0 18px; }

/* 다크모드 — 하드코딩된 흰 배경 위 텍스트가 흰색으로 비쳐 안 보이는 이슈 보정 */
body.dark-theme .faq-cat button { background: var(--surface); color: var(--text-soft); }
body.dark-theme .faq-cat button.active { background: var(--pink); color: white; }
body.dark-theme .faq-item { background: var(--surface); }
body.dark-theme .faq-q { color: var(--text); }
body.dark-theme .faq-a { color: var(--text-soft); }