/* ===== 문제 섹션 — babywhale.io problem 섹션 이식 (Pretendard, 파랑→오렌지) =====
   출처: babywhale.io/features/internal-communication .framer-vliwks
   실측 컴포넌트 값 그대로:
   · 섹션 gap 80 / topgroup gap 80 / final gap 32 / cards gap 24 / txt gap 12
   · stat 40/500 ls-.8 lh1.5 rgb(153,163,176) · bignum 50/700 ls-.8 · foot 12/500 우측
   · card 380w pad 28/30/36 radius 30 bg #2d3a4d gap 16 · cardtext 20/500 ls-.4 lh1.45 rgb(214,226,242)
   · txt-sub 32/500 ls-.4 rgb(153,163,176) · txt-title 50/700 accent(파랑→오렌지)
   · 하이라이트 = babywhale 브러시 이미지(bw-highlight.png) mask로 오렌지 재색(모양·텍스처 그대로) */
.bw-problem{
  background:linear-gradient(180deg,#0f1622 0%,#131c2b 55%,#0f1622 100%);
  color:#fff;
  padding:clamp(72px,9vw,120px) clamp(20px,5vw,40px);
  overflow:hidden;
}
.bw-problem-inner{
  max-width:1186px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(64px,7vw,80px);              /* problem gap 80 (mobile 70) */
}

/* ── 상단: 통계 스택 + 최종 비용 (topgroup gap 80 / mobile 24) ── */
.bw-topgroup{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(24px,6vw,80px);
}
.bw-stat{
  margin:0;
  font-size:clamp(24px,3.4vw,40px); font-weight:500; letter-spacing:-.8px; line-height:1.5;
  color:#99a3b0; text-align:center;
}
.bw-final{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(20px,3vw,32px);
}
.bw-bignum{
  margin:0;
  font-size:clamp(26px,3.8vw,50px); font-weight:700; letter-spacing:-.8px; line-height:1.5;
  color:#fff; text-align:center;
}
/* 하이라이트 = babywhale 브러시 스트로크 이미지, 오렌지 mask 재색, 글자 뒤 */
.bw-bignum .hl{position:relative; display:inline-block; white-space:nowrap; z-index:0;}
.bw-bignum .hl::after{
  content:""; position:absolute; z-index:-1;   /* .hl가 z-index:0로 stacking context → 섹션 배경 위, 글자 뒤 */
  left:-8%; right:-8%; bottom:-.02em; height:.42em;
  /* babywhale 브러시 스트로크 이미지를 오렌지로 재색(alpha 텍스처 그대로) */
  background:url(../assets/img/bw-highlight-orange.png) center/100% 100% no-repeat;
}
.bw-foot{
  margin:0; align-self:flex-end;              /* babywhale: 우측 정렬 각주 */
  font-size:12px; font-weight:500; letter-spacing:-.4px; line-height:1.45;
  color:#6b7684; text-align:right;
}

/* ── 하단 문제 카드 (cards gap 24 / mobile column 24) ── */
.bw-cards{display:flex; gap:24px; justify-content:center; align-items:stretch; width:100%; flex-wrap:wrap;}
.bw-card{
  flex:1 1 0; min-width:280px; max-width:380px;
  background:#2d3a4d; border-radius:30px;
  padding:28px 30px 36px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.bw-card-icon{width:24px; height:24px; flex:0 0 auto; color:var(--orange,#f97316);}
.bw-card p{
  margin:0;
  font-size:clamp(16px,1.5vw,20px); font-weight:500; letter-spacing:-.4px; line-height:1.45;
  color:#d6e2f2; text-align:center;
}

/* ── 마무리 텍스트 (txt gap 12) ── */
.bw-txt{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;}
.bw-txt-sub{
  margin:0;
  font-size:clamp(18px,2.3vw,32px); font-weight:500; letter-spacing:-.4px; line-height:1.45;
  color:#99a3b0;
}
.bw-txt-title{
  margin:0;
  font-size:clamp(26px,3.6vw,50px); font-weight:700; letter-spacing:-.4px; line-height:1.45;
  color:#fff;
}
.bw-txt-title .bw-accent{color:var(--orange,#f97316);}

@media (max-width:820px){
  .bw-cards{flex-direction:column; align-items:center;}
  .bw-card{max-width:460px; width:100%; padding:24px 26px 32px; border-radius:24px;}
  .bw-foot{align-self:center; text-align:center;}
}