/* FAQ(/faq) — 피그마 plus zero2 'min 1025px max 1920px - FAQ'(1263:13630, 2026-10-15).
   v2 공통(site.css)·밝은 헤더(header.css .header.light) 위에 얹고, 질문·답 목록은 랜딩 FAQ(landing.css .faq-list/.faq-item)를
   그대로 쓴다 — 여기는 이 페이지에만 있는 머리(제목·부제)와 주제 탭뿐. 탭·목록 마크업은 services/faq_content.render_body 와 같아야 한다
   (관리자 FAQ 편집본이 같은 모양으로 갈아 끼워진다). 경계: 데스크톱 ≥1025 · 태블릿 521~1024 · 모바일 ≤520(site.css 와 같다). */

.faq-page{padding:136px 0 160px}
.faq-head{text-align:center}
.faq-head h1{font-weight:300;font-size:clamp(40px,3.6vw,52px);line-height:1.5;color:#333}
.faq-head p{margin-top:32px;font-weight:200;font-size:clamp(18px,1.15vw,22px);line-height:1.6;color:#333}

/* 주제 탭 — 밑줄 탭(활성 = 초록 글자 + 2px 밑줄). 탭이 많아지면 줄바꿈 대신 가로 스크롤 */
.faq-tabs{display:flex;gap:8px;margin-top:64px;overflow-x:auto;scrollbar-width:none}
.faq-tabs::-webkit-scrollbar{display:none}
.faq-tab{flex:0 0 auto;padding:8px 8px 4px;border-bottom:2px solid transparent;font-weight:400;font-size:18px;line-height:1.5;color:#999;white-space:nowrap;transition:color .15s,border-color .15s}
.faq-tab:hover{color:#333}
.faq-tab[aria-selected="true"]{font-weight:500;color:#00974b;border-bottom-color:#00974b}
.faq-tab:focus-visible{outline:2px solid #00974b;outline-offset:2px}

/* 목록 — 랜딩 FAQ 그대로, 탭 바로 아래로 붙인다. 질문은 h3 로 감싼다(검색·스크린리더용 — 모양은 버튼이 정한다) */
.faq-group .faq-list{margin-top:24px}
.faq-group h3{font:inherit}
.faq-a a{text-decoration:underline}
.faq-a b{font-weight:500}

/* ---------- 태블릿 ≤1024 ---------- */
@media (max-width:1024px){
  .faq-page{padding:120px 0 120px}
  .faq-head p{margin-top:24px}
  .faq-tabs{margin-top:48px}
}
/* ---------- 모바일 ≤520 ---------- */
@media (max-width:520px){
  .faq-page{padding:104px 0 60px}
  .faq-head h1{font-size:clamp(26px,8.2vw,32px)}
  .faq-head p{margin-top:16px;font-size:16px}
  .faq-tabs{margin-top:32px;gap:4px}
  .faq-tab{font-size:16px}
  .faq-group .faq-list{margin-top:16px}
}