/* ==========================================================================
   Homestay Korea -- FAQ Page Styles
   FAQ 페이지 전용 스타일
   ========================================================================== */

/* ---- 페이지 컨테이너 ---- */
.faq-page {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-16);
}

.faq-page .section__title {
  margin-bottom: var(--spacing-4);
}

.faq-page .section__subtitle {
  margin-bottom: var(--spacing-8);
}

/* ---- 탭 반응형 (수평 스크롤) ---- */
.faq-page .tabs {
  margin-bottom: var(--spacing-8);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.faq-page .tabs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .faq-page .tabs {
    gap: 0;
    padding-bottom: var(--spacing-1);
  }

  .faq-page .tabs__item {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
    flex-shrink: 0;
  }
}

/* ---- 카테고리 섹션 제목 (All 탭) ---- */
.faq-page__section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  border-bottom: 2px solid var(--color-primary-light);
}

.faq-page__section-title:first-child {
  margin-top: 0;
}

/* ---- 아코디언 간격 ---- */
.faq-page .accordion {
  margin-bottom: var(--spacing-6);
}

.faq-page .accordion + .faq-page__section-title {
  margin-top: var(--spacing-10);
}

/* ---- 아코디언 트리거 스타일 보강 ---- */
.faq-page .accordion__trigger {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-relaxed);
  gap: var(--spacing-4);
}

.faq-page .accordion__trigger span {
  flex: 1;
}

/* ---- 아코디언 답변 텍스트 ---- */
.faq-page .accordion__body {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--leading-loose);
}

.faq-page .accordion__body p {
  margin-bottom: var(--spacing-3);
}

.faq-page .accordion__body p:last-child {
  margin-bottom: 0;
}

.faq-page .accordion__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-page .accordion__body a:hover {
  color: var(--color-primary-hover);
}

/* ---- FAQ 리스트 (환불 정책 등) ---- */
.faq-page__list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-3) 0;
}

.faq-page__list li {
  position: relative;
  padding-left: var(--spacing-5);
  margin-bottom: var(--spacing-2);
  line-height: var(--leading-relaxed);
}

.faq-page__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: var(--radius-circle);
}

.faq-page__list li:last-child {
  margin-bottom: 0;
}

/* ---- 빈 상태 (Additional Questions) ---- */
.faq-page__empty {
  padding: var(--spacing-12) var(--spacing-4);
  text-align: center;
}

.faq-page__empty .icon-box {
  max-width: 400px;
  margin: 0 auto;
}

/* ---- 반응형 ---- */
@media (max-width: 1024px) {
  .faq-page {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-12);
  }

  .faq-page__section-title {
    font-size: var(--text-lg);
    margin-top: var(--spacing-6);
  }

  .faq-page .accordion__trigger {
    font-size: var(--text-sm);
  }

  .faq-page .accordion__body {
    font-size: var(--text-sm);
  }

  .faq-page__empty {
    padding: var(--spacing-10) var(--spacing-4);
  }
}

@media (max-width: 767px) {
  .faq-page {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-10);
  }

  .faq-page__section-title {
    font-size: var(--text-lg);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
  }

  .faq-page .accordion__trigger {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--text-sm);
  }

  .faq-page .accordion__body {
    padding: 0 var(--spacing-4) var(--spacing-4);
    font-size: var(--text-sm);
  }

  .faq-page__list li {
    padding-left: var(--spacing-4);
    font-size: var(--text-sm);
  }
}

/* ---- FAQ CTA 버튼 ---- */
.faq-cta__btn {
  margin-top: var(--spacing-4);
}