/* ── pages / cases-qna — 코성형 Q&A 목록 ──────────────────────────
   질문 396개를 J컬 Sec_7 규격의 아코디언으로 펼친다. 치수·구분선은 공용
   .accordion 프리미티브가 잡고, 한 번에 하나만 열리는 것(마크업의
   data-accordion-exclusive)과 10개씩 끊는 것(data-pager)은 site.js 가 한다.
   구성: 히어로 → (건수 + 아코디언 + 페이저 + 고지) → 더 보기 카드 →
   형제 페이지 → 상담 CTA.
   .page-hero / .accordion / .pager / .hubgrid / .hubcard / .cta-band /
   .siblings / .disclaimer / .btn / .eyebrow 를 그대로 쓰고,
   이 파일은 그 프리미티브에 없는 것만 만든다. */

/* ── 히어로 ────────────────────────────────────────────────── */

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지도 다른 서브페이지와 같은
   밝은 hero.jpg 라 68% 로는 흰 제목이 뜬다. 형제 페이지(cases/right-after)
   와 같은 76% 로 맞춘다. */
.qna-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.76)),
    var(--hero-img,none);
}

/* ── 목록 ──────────────────────────────────────────────────── */

/* 건수 — 아코디언 border-top 바로 위에 앉는 목록 머리글 */
.qna-list__count{
  font-weight:700;font-size:var(--fs-18);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
}
.qna-list__items{margin-top:var(--sp-tight)}

/* 질문 — 줄바꿈만. 크기·굵기는 .accordion__btn 이 정한다. */
.qna-item__label{word-break:keep-all}
/* 답변은 문단이 여러 개다. .accordion__panel 이 크기·색을 정하고
   여기서는 문단 사이 간격만 준다. */
.qna-item__answer > p + p{margin-top:16px}
/* 항목이 숨겨질 때 아래 구분선까지 같이 사라져야 한다 */
.qna-item[hidden]{display:none}

/* ── 고지 ──────────────────────────────────────────────────── */

.qna-notice{
  margin-top:var(--sp-section);
  padding:28px 32px;
  background:var(--surface-muted);
  border-radius:var(--radius-card);
}
.qna-notice__guide{
  font-size:var(--fs-16);line-height:1.8;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);word-break:keep-all;
}
/* .disclaimer 기본 margin-top 은 --sp-stack. 같은 판 안이라 좁힌다. */
.qna-notice__side{margin-top:var(--sp-tight)}
.qna-notice__label{color:var(--text-secondary)}
@media (max-width:767px){
  .qna-notice{padding:20px 18px}
}

/* ── 더 보기 카드 ──────────────────────────────────────────── */

/* .hubgrid 칸이 늘어나야 .hubcard 의 height:100% 가 형제와 키를 맞춘다. */
.qna-more__cell{display:flex}
.qna-more__card{flex:1}
@media (max-width:767px){
  .qna-more__card{padding:28px 24px}
}

/* ── 상담 CTA ─────────────────────────────────────────────── */

/* center 프레이밍이면 로비 사진의 KOWON 사인이 버튼과 겹쳐 41% 로 올린다.
   (J컬 Sec_10 과 같은 값) */
.qna-cta{background-position:0 0,center 41%}
.qna-cta__inner{display:flex;flex-direction:column;align-items:center}