/* ═══════════════════════════════════════════════════════════════
   AENON — Methane FAQ Section
   공통 스타일 (EN/KO 공용)
   ═══════════════════════════════════════════════════════════════ */

/* ── 히어로 FAQ 진입 버튼 ── */
.btn--faq-entry {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid rgba(52, 211, 153, 0.55);
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: transparent;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  text-decoration: none;
  word-break: keep-all;
}
.btn--faq-entry:hover {
  border-color: rgba(52, 211, 153, 0.90);
  color: #FFFFFF;
  background: rgba(52, 211, 153, 0.08);
}
.btn--faq-entry .faq-chevron {
  font-size: 0.75rem;
  transition: transform 200ms ease;
}
.btn--faq-entry:hover .faq-chevron {
  transform: translateY(3px);
}

/* ── FAQ 섹션 래퍼 ── */
.methane-faq {
  padding: 5rem 0 6rem;
  background: var(--c-off, #F9FAFB);
  border-top: 1px solid var(--c-rule, #E5E7EB);
}
.methane-faq__wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── 섹션 헤더 ── */
.methane-faq__hd {
  margin-bottom: 2.5rem;
}
.methane-faq__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-teal, #059669);
  margin-bottom: 0.75rem;
}
.methane-faq__h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--c-heading, #111827);
  letter-spacing: -0.025em;
  line-height: 1.22;
  margin-bottom: 0.75rem;
  word-break: keep-all;
}
.methane-faq__sub {
  font-size: 0.9375rem;
  color: var(--c-body, #374151);
  line-height: 1.75;
  word-break: keep-all;
}

/* ── 아코디언 목록 ── */
.mfaq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--c-rule, #E5E7EB);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* ── 아코디언 항목 ── */
.mfaq-item {
  border-bottom: 1px solid var(--c-rule, #E5E7EB);
}
.mfaq-item:last-child {
  border-bottom: none;
}

/* ── 질문 버튼 ── */
.mfaq-btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-heading, #111827);
  line-height: 1.55;
  word-break: keep-all;
  transition: background 160ms ease;
}
.mfaq-btn:hover {
  background: var(--c-paper, #F3F4F6);
}
.mfaq-btn[aria-expanded="true"] {
  background: var(--c-paper, #F3F4F6);
  color: var(--c-teal, #059669);
}
.mfaq-btn__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--c-rule, #E5E7EB);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted, #9CA3AF);
  font-size: 0.75rem;
  transition: transform 260ms ease, border-color 200ms ease, color 200ms ease;
  margin-top: 0.15rem;
}
.mfaq-btn[aria-expanded="true"] .mfaq-btn__icon {
  transform: rotate(45deg);
  border-color: var(--c-teal, #059669);
  color: var(--c-teal, #059669);
}

/* ── 답변 패널 ── */
.mfaq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mfaq-panel[aria-hidden="false"] {
  /* max-height는 JS로 동적 설정 */
}
.mfaq-panel__inner {
  padding: 0 1.5rem 1.5rem 1.5rem;
}
.mfaq-panel__inner p {
  font-size: 0.9rem;
  color: var(--c-body, #374151);
  line-height: 1.80;
  margin-bottom: 0.75rem;
  word-break: keep-all;
}
.mfaq-panel__inner p:last-of-type {
  margin-bottom: 0;
}
.mfaq-src {
  display: block;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-rule, #E5E7EB);
  font-size: 0.78rem;
  color: var(--c-muted, #9CA3AF);
  line-height: 1.55;
}

/* ── 모바일 ── */
@media (max-width: 640px) {
  .methane-faq {
    padding: 3.5rem 0 4rem;
  }
  .methane-faq__wrap {
    padding: 0 1.25rem;
  }
  .mfaq-btn {
    padding: 1.1rem 1.25rem;
    font-size: 0.875rem;
  }
  .mfaq-panel__inner {
    padding: 0 1.25rem 1.25rem;
  }
  .mfaq-panel__inner p {
    font-size: 0.875rem;
  }
  .btn--faq-entry {
    font-size: 0.875rem;
    padding: 0.65rem 1.25rem;
  }
}