/* ===== CTA + FAQ 통합 다크 밴드 (Databricks 스타일) =====
   좌: 도입 CTA  /  우: 자주 묻는 질문(얇은 구분선 + "+" 펼침)
   AEO용 FAQPage JSON-LD와 질문/답변 텍스트가 일치해야 함.
   폰트 최소 16px 규칙 준수. 색상 토큰은 css/style.css 정의를 따름. */
.cf-band{
  position:relative; overflow:hidden;
  padding:120px 32px;
  background:var(--c-ink,#0a0a0a);
  color:#fff;
}
.cf-band::before{ /* 우상단 블루 글로우 */
  content:""; position:absolute; right:-220px; top:-140px;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,155,223,.20) 0%, rgba(0,155,223,.06) 42%, transparent 70%);
  filter:blur(40px); pointer-events:none;
}
.cf-band::after{ /* 좌하단 글로우 */
  content:""; position:absolute; left:5%; bottom:-200px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(77,212,255,.13) 0%, transparent 70%);
  filter:blur(34px); pointer-events:none;
}
.cf-inner{
  position:relative; max-width:var(--c-max-w,1200px); margin:0 auto;
  /* 좌(CTA):우(FAQ) = 50:50 균등 분할. minmax(0,1fr)이라 FAQ 아코디언을 열어도 폭이 흔들리지 않고,
     모든 화면폭에서 안전하게 축소됨. */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start;
}

/* ---- 좌: CTA ---- */
.cf-cta-eyebrow{ margin:0 0 18px; font-size:16px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-bright,#4dd4ff); }
.cf-cta-title{ margin:0 0 22px; font-size:clamp(32px,3.6vw,48px); font-weight:700; letter-spacing:-.03em; line-height:1.16; color:#fff; word-break:keep-all; }
.cf-cta-desc{ margin:0 0 32px; font-size:18px; line-height:1.7; color:rgba(255,255,255,.66); max-width:420px; word-break:keep-all; }
.cf-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.cf-btn{ display:inline-flex; align-items:center; gap:9px; font-size:17px; font-weight:700; padding:16px 28px; border-radius:999px; text-decoration:none; border:1.5px solid transparent; transition:transform .16s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cf-btn--primary{ background:var(--c-brand,#009adf); color:#fff; box-shadow:0 18px 36px -16px rgba(0,155,223,.7); }
.cf-btn--primary:hover{ transform:translateY(-2px); background:#0086c4; box-shadow:0 22px 44px -16px rgba(0,155,223,.85); }
.cf-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.cf-btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* ---- 우: FAQ ---- */
.cf-faq-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; }
.cf-faq-title{ margin:0; font-size:clamp(22px,2.2vw,28px); font-weight:700; letter-spacing:-.02em; color:#fff; }
.cf-item{ border-top:1px solid rgba(255,255,255,.14); }
.cf-item:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.cf-q{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px; padding:26px 4px; font-size:19px; font-weight:500; line-height:1.5; color:rgba(255,255,255,.92); word-break:keep-all; transition:color .15s ease; }
.cf-q::-webkit-details-marker{ display:none; }
.cf-q:hover{ color:#fff; }
.cf-q-txt{ flex:1; }
.cf-q-ico{ position:relative; flex-shrink:0; width:20px; height:20px; }
.cf-q-ico::before, .cf-q-ico::after{ content:""; position:absolute; background:rgba(255,255,255,.55); border-radius:2px; transition:transform .25s ease, opacity .2s ease, background .15s ease; }
.cf-q-ico::before{ left:0; top:9px; width:20px; height:2px; }
.cf-q-ico::after{ left:9px; top:0; width:2px; height:20px; }
.cf-item[open] .cf-q-ico::after{ transform:rotate(90deg); opacity:0; }
.cf-item[open] .cf-q-ico::before{ background:var(--c-bright,#56c5f6); }
.cf-item[open] .cf-q{ color:#fff; }
.cf-a{ padding:0 60px 28px 4px; }
.cf-a p{ margin:0; font-size:17px; line-height:1.78; color:rgba(255,255,255,.62); word-break:keep-all; }
.cf-a p + p{ margin-top:14px; }

/* ---- 서브페이지용: CTA 없이 FAQ 단독 (1단, 가운데 정렬) ---- */
.cf-band--solo .cf-inner{ display:block; max-width:880px; }
.cf-band--solo .cf-faq-head{ margin-bottom:10px; }

/* ---- 서브페이지용: FAQ 없이 CTA 단독 (1단, 가운데 정렬) ---- */
.cf-band--cta .cf-inner{ display:block; max-width:720px; text-align:center; }
.cf-band--cta .cf-cta-desc{ max-width:none; margin-left:auto; margin-right:auto; }
.cf-band--cta .cf-cta-actions{ justify-content:center; }

@media (max-width:920px){
  .cf-band{ padding:96px 28px; }
  .cf-inner{ grid-template-columns:1fr; gap:48px; }
  .cf-cta-desc{ max-width:none; }
}
@media (max-width:600px){
  .cf-band{ padding:72px 20px; }
  .cf-q{ padding:22px 2px; font-size:17px; gap:14px; }
  .cf-a{ padding:0 30px 24px 2px; }
  .cf-a p{ font-size:16px; }
  .cf-faq-title{ font-size:22px; }
}

/* 노트북 등 좁은 화면 좌우 여백 — FAQ 밴드 (2026-06-19) */
@media (min-width: 1024px) and (max-width: 1480px) {
  .cf-band {
    padding-left: clamp(40px, 5vw, 80px);
    padding-right: clamp(40px, 5vw, 80px);
  }
}