/* ===== FAQ 페이지 (Figma 55:744) =====
   본문 폰트: Pretendard (공통). 좌측 세로 메뉴(200) + 우측 아코디언 목록
   레이아웃은 flex (gap 60). 질문은 Pretendard Medium 20px, 답변도 같은 폰트.
   질문 우측 + 버튼 클릭 시 - 로 바뀌고 답변이 아래로 펼쳐짐 */

.faq {
  width: 100%;
  padding: 123px 0 160px;            /* 시안: 헤더 아래 간격, 본문 아래~푸터 160px */
}
.faq-wrap {                           /* 헤더와 동일 컨테이너 → 메뉴가 헤더 로고와 좌측 정렬 */
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px 0 var(--container-pad-left);
  font-family: 'Pretendard', sans-serif;
}
.faq-row {
  max-width: 1347px;                  /* 시안 콘텐츠 폭 (200 + 60 + 1087) */
  display: flex;
  gap: 60px;                          /* 시안 좌우 간격 */
  align-items: flex-start;
}

/* ===== 좌측 메뉴 (55:1051) ===== */
.faq-nav {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;                         /* 시안 항목 간격 */
}
.faq-nav-track {                    /* 모바일 가로 스크롤용 트랙 (시안 ul.flex 구조) — PC 레이아웃은 동일 */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.faq-nav a {
  display: block;
  padding: 10px 8px;
  font-size: 20px;
  font-weight: 400;                 /* Regular */
  line-height: 30px;
  letter-spacing: -0.4px;
  color: #262626;
  text-decoration: none;
}
.faq-nav a.is-active {              /* FAQ (현재 페이지) */
  font-weight: 700;                 /* Bold */
  color: #1b1b1b;
}

/* ===== 우측 본문 (55:1065) ===== */
.faq-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* 아코디언 목록 묶음 (55:1072): 상하 2px 보더 */
.faq-list {
  border-top: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

/* 각 항목 (55:1104): 하단 1px 보더 */
.faq-item {
  border-bottom: 1px solid #e5e5e5;
}

/* 질문 버튼 (55:1105): 좌측 질문 + 우측 +/- 아이콘 */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 24px;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.faq-q-text {
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;                 /* Medium */
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: #262626;
}

/* +/- 토글 아이콘 (55:1107) — 24px, CSS로 직접 그림 */
.faq-toggle {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #262626;
}
.faq-toggle::before {                /* 가로 막대 */
  width: 16px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq-toggle::after {                 /* 세로 막대 (열리면 숨겨져서 - 가 됨) */
  width: 1.5px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.faq-item.is-open .faq-toggle::after {
  display: none;                    /* + → - */
}

/* 답변 패널 — 질문과 같은 폰트, 기본 닫힘 */
.faq-a {
  display: none;
  padding: 0 24px 25px;
}
.faq-item.is-open .faq-a {
  display: block;
}
.faq-a p {
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;                 /* 질문과 같은 Medium */
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: #262626;
}

/* 반응형: 좁은 화면에선 메뉴를 본문 위로 */
@media (max-width: 767px) {
  .faq-row {
    flex-direction: column;
    gap: 24px;
  }
  .faq-nav {
    flex: none;
    width: 100%;
  }
  /* 본문: 부모(.faq-row)의 align-items:flex-start 때문에 column 전환 시
     내용 폭으로 굳음 → 375~767 전 구간 화면 폭 추종하도록 유동 폭 지정 */
  .faq-main {
    width: 100%;
  }
  .faq-nav-track {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
}

/* ===== 모바일 (시안 202:399 "모바일 FAQ" — Figma 실측 375) ===== */
@media (max-width: 767px) {
  /* 섹션: 콘텐츠 박스 y100 = 헤더 하단(100.68) 바로 아래 (gap 0)
     아코디언 하단(y737.14) → 푸터 시작(y869) = 132px */
  .faq {
    padding: 0 0 132px;
  }
  .faq-wrap { padding: 0 20px; }     /* 콘텐츠 x20~355 (335) */
  .faq-row { gap: 0; }               /* 간격은 아래 margin으로 제어 */

  /* 탭 영역 (202:458 nav.w-full): 가로 스크롤 + 스크롤바 숨김
     탭 보더(y165) → 아코디언(y185) = 20px (privacy/terms와 달리 pb 없음) */
  .faq-nav {
    overflow-x: auto;
    margin-bottom: 20px;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* IE/Edge */
  }
  .faq-nav::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

  /* 탭 목록 (202:459 ul.flex): 항목 gap 20, 하단 1px #e5e5e5 */
  .faq-nav-track {
    width: max-content;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  /* 탭 항목 (202:461 a.relative): py 20 (높이 64), Regular 16/lh24/ls-0.16 #404040 */
  .faq-nav a {
    position: relative;
    padding: 20px 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #404040;
    white-space: nowrap;
  }
  /* 활성 탭 (202:463 FAQ): Bold(공통 규칙) + #2d57a1
     하단 2px 바 (202:464): left 0, right -14px — 텍스트(31)보다 14px 긴 45px (시안 실측) */
  .faq-nav a.is-active { color: #2d57a1; }
  .faq-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: -14px;
    bottom: -1px;
    height: 2px;
    background: #2d57a1;
  }

  /* 아코디언 묶음 (202:487): 상하 2px #404040 — PC와 동일 (픽셀 실측 확인) */

  /* 질문 버튼 (202:490): 좌우 패딩 0 (텍스트 x20, 아이콘 우측 끝 x355 정렬)
     pt 24.5 / pb 24.69 (높이 77.19 + 항목 보더 1px = 78.19) */
  .faq-q {
    padding: 24.5px 0 24.69px;
  }
  /* 질문 폰트: Medium 20/lh28/ls-0.4 #262626 — PC와 동일 (시안 실측) */

  /* +/- 토글 (202:492): 24px 박스, 막대 16×1.5 — PC와 동일 검정 (시안은 #e51715 — 사용자 요청으로 검정 유지) */

  /* 답변 패널: 시안에 열린 상태 없음 → 질문과 동일하게 좌우 패딩 0, 하단 25px 유지 */
  .faq-a {
    padding: 0 0 25px;
  }
  /* 답변 줄바꿈: 단어 단위 (한글 음절 중간에서 끊기지 않게) */
  .faq-a p {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}