/* =====================================================================
   common.css  —  컴포넌트 스킨(배경·보더·라운드·그림자) + 모양/질감 토큰 + 전역 base
   규칙: padding/margin/gap/grid/flex/width/height 같은 "레이아웃 수치"는
        전부 HTML의 Tailwind 유틸에서 제어. 여기선 "겉모습"만.
        (예외: 폰목업·후기 슬라이드처럼 JS·비율에 의존하는 복합 위젯은
         레이아웃을 컴포넌트로 묶어 CSS에서 관리)

   AI 자가진단 랜딩 — 디자인 기획안 확정: "모바일 앱처럼 세로긴 화면
   (가운데 카드, 좌우 여백)". 전 섹션이 max-width 420px 모바일 프레임 기준.
===================================================================== */

/* ---------- 모양/질감 토큰 ---------- */
:root{
  --radius-sm:6px; --radius-md:10px; --radius-lg:13px;
  --radius-xl:16px; --radius-2xl:20px; --radius-3xl:23px; --radius-pill:999px;
  --shadow-sm:0 4px 14px rgba(12,68,124,.10);
  --shadow-md:0 6px 20px rgba(12,68,124,.10);
  --shadow-card:0 6px 18px rgba(12,68,124,.08);
  --shadow-navy:0 10px 26px rgba(4,44,83,.24);
  --shadow-navy-lg:0 18px 44px rgba(4,44,83,.26);
  --shadow-cta:0 12px 28px rgba(11,91,211,.28);

  /* 모바일 프레임 폭 (전 섹션 공통 컨텐츠 폭) */
  --frame-w:420px;
}

/* ---------- 전역 base ---------- */
*{ box-sizing:border-box; }
html{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth; width:100%; overflow-x:hidden;
}
body{
  margin:0; font-family:var(--font-body); color:var(--neutral-900);
  background:var(--page-bg); width:100%; overflow-x:clip;
}
img{ max-width:100%; display:block; }
body.is-modal-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =====================================================================
   섹션 골격 — 전 블록 공통
   .section = 세로 리듬 + 배경 리듬 담당 / .frame = 모바일 폭 중앙 정렬
===================================================================== */
.section{ position:relative; }
.section > .frame{ width:min(var(--frame-w),92vw); margin-inline:auto; }

/* 배경 리듬 (교대 규칙): 흰 ↔ 옅은 블루 그라데이션 */
.section--white{ background:var(--section-bg); }
.section--tint{ background:var(--section-alt-bg); background-image:var(--grad-tint); }

.section__head{ text-align:center; }
.section__eyebrow{ color:var(--neutral-600); font-size:15px; }
.section__title{ font-weight:500; color:var(--text-primary); letter-spacing:-.01em; line-height:1.35; }
.section__desc{ line-height:1.7; color:var(--text-secondary); }

/* 공통 유리 칩 (kicker) — 시선 앵커 */
.kicker{
  display:inline-flex; align-items:center; gap:5px;
  border-radius:var(--radius-pill); color:var(--primary-bright);
  font-size:13px; font-weight:500;
}
.kicker--glass{                                   /* 밝은 배경 위 반투명 유리 */
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:0.5px solid rgba(255,255,255,.85);
  box-shadow:0 4px 14px rgba(12,68,124,.10);
}
.kicker--solid{ background:var(--chip-bg); }      /* 옅은 블루 솔리드 */

/* 공통 CTA 버튼 (순색 블루) */
.btn-cta-main{
  background:var(--color-cta-main); color:var(--color-cta-main-text);
  border:none; cursor:pointer; font-weight:500;
  box-shadow:var(--shadow-cta);
}
.btn-cta-main--pill{ border-radius:var(--radius-pill); }
.btn-cta-main--block{ width:100%; border-radius:var(--radius-xl); font-weight:600; }

/* 공통 폰 목업 (블록1·6 결과카드 예고편) ------------------------------
   결과페이지 블록1을 축소 재사용. JS 없음, 순수 스킨 */
.phone{
  background:#1f2d3d; border-radius:30px; padding:9px;
  box-shadow:var(--shadow-navy-lg);
}
.phone__screen{
  border-radius:22px; height:100%; overflow:hidden;
  background:var(--navy); background-image:var(--grad-navy);
}
.phone__eyebrow{ font-size:10px; color:rgba(255,255,255,.6); margin:0; }
.phone__title{ font-size:13px; font-weight:500; color:#fff; margin:2px 0 0; }
.phone__badge{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.14); border:0.5px solid rgba(255,255,255,.22);
  color:#fff; border-radius:var(--radius-pill);
  font-size:11px; font-weight:500;
}
.phone__row{ display:flex; justify-content:space-between; align-items:baseline; }
.phone__row-k{ font-size:11px; color:rgba(255,255,255,.7); }
.phone__row-v{ font-size:12px; color:rgba(255,255,255,.9); }
.phone__arrow{ text-align:center; color:rgba(133,183,235,.9); }
.phone__row--main .phone__row-k{ color:#9FE1CB; font-weight:500; }
.phone__row--main .phone__row-v{ font-size:19px; color:#9FE1CB; font-weight:500; }
.phone__divider{ height:0.5px; background:rgba(255,255,255,.16); }
.phone__row--sub .phone__row-v{ font-size:15px; color:var(--mint); font-weight:500; }

/* =====================================================================
   블록1 · 히어로 (.hero)
===================================================================== */
.hero .hero__lead{ margin:0; font-size:28px; font-weight:700; color:var(--text-primary); }
.hero .hero__title{ margin:0; font-size:33px; line-height:1.28; font-weight:700; }
.hero .hero__title .is-blue{ color:var(--primary-bright); }
.hero .hero__title .is-navy{ color:var(--primary-strong); }

/* 히어로 비주얼: 폰목업 + 플로팅 말풍선 겹침 */
.hero__visual{ position:relative; }
.hero__phone{                                     /* 중앙 폰목업 */
  position:absolute; left:50%; transform:translateX(-50%); top:0;
  width:210px; height:392px;
}
.hero__bubble{                                    /* 폰목업 예상탕감액·탕감률 줄을 덮는 큰 유리 말풍선 */
  position:absolute; right:10px; top:230px; width:220px;
  padding:18px 18px 18px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.98);
  border-radius:var(--radius-2xl);
  box-shadow:0 22px 54px rgba(12,68,124,.30);
}
.hero__bubble-mark{                               /* 좌상단 체크 원형 배지 */
  position:absolute; left:-15px; top:-15px; width:40px; height:40px;
  border-radius:50%; background:var(--primary-bright);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(11,91,211,.4);
}
.hero__bubble-mark i{ color:#fff; font-size:22px; }
.hero__bubble-k{ margin:0; text-align:center; font-size:18px; color:var(--neutral-700); }
.hero__bubble-num{ margin:6px 0 0; text-align:center; font-size:30px; line-height:1.1; font-weight:600; color:var(--primary-bright); }
.hero__bubble-cap{ margin:4px 0 0; text-align:center; font-size:20px; font-weight:500; color:var(--navy-deep); }

/* =====================================================================
   블록2 · 서비스 소개 (.service) — 3스텝 그라데이션 테두리 카드
===================================================================== */
.service .service__eyebrow{ margin:0; font-size:20px; color:var(--primary); font-weight:700; }
.service .service__title{ margin:0; font-size:30px; color:var(--primary-strong); font-weight:800; line-height:1.35; }

/* 시그니처 그라데이션 테두리 카드 (블록2·3 공용 골격) */
.gcard{ border-radius:var(--radius-xl); background:var(--grad-border); box-shadow:var(--shadow-md); }
.gcard__inner{ background:#fff; border-radius:calc(var(--radius-xl) - 1.5px); }

.step__figure{                                    /* 좌측 정사각 아이콘 박스 (비율 4) */
  border-radius:var(--radius-lg);
  background:var(--primary-bg); background-image:linear-gradient(145deg,#eef4ff,#dfebfd);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-bright); aspect-ratio:1/1;
}
.step__figure i{ font-size:46px; }
.step__figure img{ width:78%; height:78%; object-fit:contain; display:block; }
.step__badge{                                     /* STEP 배지 (테두리와 같은 그라데이션) */
  align-self:flex-start; font-size:11px; font-weight:500; color:#fff;
  background:linear-gradient(120deg,var(--green),var(--sky));
  border-radius:var(--radius-pill);
}
.step__title{ margin:0; font-size:17px; font-weight:700; color:var(--primary-strong); line-height:1.35; }
.step__desc{ margin:0; font-size:14px; line-height:1.55; color:var(--text-secondary); }

/* =====================================================================
   블록3 · 안심 배지 (.assure) — 8개 업종 배지 + 네이비 결론 박스
===================================================================== */
/* .assure .assure__eyebrow{ margin:0; font-size:18px; color:var(--neutral-600); font-weight:500;} */
.assure .assure__title{ margin:0; font-size:28px; line-height:1.4; font-weight:700; color:var(--primary-strong); }

/* 업종 배지 그리드 (2열). gcard 골격 재사용하되 라운드만 살짝 작게 */
.assure__grid{ list-style:none; margin:0; padding:0; }
.badge{ border-radius:14.5px; background:var(--grad-border); box-shadow:0 6px 18px rgba(12,68,124,.09); }
.badge__inner{ background:#fff; border-radius:13.3px; text-align:center; }
.badge__icon{
  display:flex; align-items:center; justify-content:center;
}
.badge__icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.badge__icon i{ font-size:28px; }
.badge__name{ margin:0; font-size:18px; font-weight:700; color:var(--primary-strong); }

/* 네이비 결론 박스 (테두리는 밝게 조정한 그라데이션) */
.verdict{ border-radius:18px; background:var(--grad-border-lite); box-shadow:0 16px 38px rgba(4,44,83,.26); }
.verdict__inner{
  border-radius:16.5px; text-align:center;
  background:var(--navy); background-image:var(--grad-navy);
}
.verdict__head{ margin:0; font-size:20px; line-height:1.55; font-weight:500; color:var(--mint); }
.verdict__desc{ margin:0; font-size:18px; line-height:1.7; color:white; }
.verdict__note{                                   /* 내부 거의 불투명한 흰 카드 */
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:12px;
}
.verdict__note p{ margin:0; font-size:16px; line-height:1.5; color:var(--primary-strong); font-weight:600; }

/* =====================================================================
   블록4 · 베네핏 (.benefit) — 네이비 그라데이션 카드 4장
===================================================================== */
.benefit .benefit__title{ margin:0; font-size:26px; font-weight:700; color:var(--primary-strong); }
.benefit__list{ list-style:none; margin:0; padding:0; }
.bcard{
  display:flex; align-items:center;
  border-radius:var(--radius-xl);
  background:var(--navy); background-image:var(--grad-navy-135);
  box-shadow:var(--shadow-navy);
}
.bcard__icon{
  flex:0 0 auto; border-radius:16px;
  background:rgba(255,255,255,.250);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.bcard__icon img{ width:82%; height:82%; object-fit:contain; display:block; }
.bcard__icon i{ font-size:24px; }
.bcard__title{ margin:0; font-size:17px; font-weight:600; color:#fff; }
.bcard__desc{ margin:5px 0 0; font-size:14px; color:rgba(255,255,255,.72); }
/* .benefit__note{ margin:0; font-size:12px; color:var(--neutral-400); text-align:center; } */

/* =====================================================================
   블록5 · 진단 후기 (.review) — transform 무한 마퀴
   JS(review-slider)가 트랙을 복제해 translateX로 무한 이동
===================================================================== */
.review .review__title{ margin:0; font-size:26px; font-weight:700; color:var(--primary-strong); }
.review .review__note{ margin:8px 0 0; font-size:13px; color:var(--neutral-400); }

/* 헤더는 프레임 폭 안에서 정렬, 마퀴는 좌우 풀블리드 */
.review__wrap{ position:relative; }
.review__head{ width:min(var(--frame-w),92vw); margin-inline:auto; padding:0 4px; }

/* 마퀴 뷰포트: 화면 풀폭(제목은 프레임 안 유지). 넘침 숨김 */
.review__marquee{
  margin-top:20px;
  width:100vw;
  margin-left:calc(-50vw + 50%);
  overflow:hidden;
}
/* 트랙: flex 가로 나열, JS가 transform으로 한 칸씩 이동 */
.review__track{
  display:flex; gap:16px; width:max-content; padding-left:16px;
  align-items:stretch;                 /* 카드 높이를 가장 큰 것에 맞춰 통일 */
  user-select:none; -webkit-user-select:none; touch-action:pan-x;
  will-change:transform;
}
/* 카드 폭 고정(한 칸 = 이 폭 + gap) */
.review__track > .rcard{ flex:0 0 auto; width:320px; }

.rcard{                                            /* 흰 배경 + 얇은 그림자 */
  width:100%; min-height:260px; background:#fff;    /* 최소높이 고정 → 카피 길이 무관 통일 */
  border-radius:var(--radius-xl); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
.rcard__avatar{
  width:38px; height:38px; border-radius:50%; background:var(--chip-bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-bright); font-size:13px; font-weight:500;
  overflow:hidden; flex:0 0 auto;               /* 이미지가 원 밖으로 안 넘치게 */
}
.rcard__avatar img{
  width:100%; height:100%; object-fit:cover; display:block;  /* 정사각 이미지를 원형에 꽉 채움 */
}
.rcard__who{ margin:0; font-size:14px; font-weight:500; color:var(--primary-strong); }
.rcard__who span{ font-size:12px; color:var(--neutral-600); font-weight:400; }
.rcard__quote{ margin:0; font-size:14px; line-height:1.65; color:var(--neutral-700); flex:1; }

/* 월상환액 비교 박스 */
.rcard__pay{
  height:40px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--color-cta-main); border-radius:12px;
}
.rcard__pay-k{ font-size:12px; color:rgba(255,255,255,.8); white-space:nowrap; }
.rcard__pay-was{ font-size:16px; color:rgba(255,255,255,.55); font-weight:500; text-decoration:line-through; white-space:nowrap; }
.rcard__pay i{ font-size:16px; color:#fff; }
.rcard__pay-now{ font-size:18px; color:#fff; font-weight:600; white-space:nowrap; }

/* =====================================================================
   블록6 · CTA 반복 (.cta) — 블러 목업 + 물음표 오버레이 카드
===================================================================== */
.cta .cta__title{ margin:0; font-size:30px; line-height:1.35; font-weight:700; color:var(--primary-strong); }
.cta .cta__desc{ margin:0; font-size:18px; line-height:1.7; font-weight:400;color:var(--neutral-600); }

.cta__stage{ position:relative; display:flex; justify-content:center; }
.cta__phone{                                       /* 블러+반투명 목업 (궁금증 유발) */
  width:180px; height:316px;
  filter:blur(1.5px); opacity:.5;
}
.cta__phone .phone__screen{ border-radius:19px; }
.cta__overlay{                                     /* 흰 오버레이 카드 + 회전 그라데이션 테두리 */
  position:absolute; top:50%; left:50%; transform:translate(-50%,-35%);
  width:266px; height:300px;border-radius:var(--radius-3xl); padding:4px;
  background:var(--grad-border-full);
  box-shadow:0 20px 46px rgba(12,68,124,.24);
}
.cta__overlay-inner{ background:#fff; border-radius:19px; }
.cta__overlay-head{ margin:0; text-align:center; font-size:18px; color:var(--neutral-600); font-weight:500; }
.cta__row{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:0.5px solid var(--neutral-100); }
.cta__row:last-child{ border-bottom:none; }
.cta__row-k{ font-size:14px; color:var(--neutral-600); }
.cta__row-v{ font-size:20px; color:var(--primary-strong); font-weight:700; }
.cta__row-v--blue{ color:var(--primary-bright); }

/* =====================================================================
   진단 화면 (diagnosis.html) — 시작 + Q1~Q7 + 로딩
   한 파일 내 화면 전환(즉시). 공통 골격을 컴포넌트로 관리(JS가 show/hide 제어)
===================================================================== */

/* 진단 뷰포트: 모바일 프레임 고정, 화면들이 이 안에서 교체됨 */
.dx{ width:min(var(--frame-w),100vw); margin-inline:auto; min-height:100dvh; position:relative; }

/* 개별 화면(스텝) — 기본 숨김, .is-active만 표시 (즉시 전환) */
.dx__screen{ display:none; min-height:100dvh; flex-direction:column; background:#fff; }
.dx__screen.is-active{ display:flex; }
.dx__screen--tint{ background:var(--section-alt-bg); background-image:var(--grad-tint); }

/* 상단 바 (뒤로가기 / 닫기) */
.dx__top{ display:flex; align-items:center; }
.dx__top--end{ justify-content:flex-end; }
.dx__iconbtn{ background:none; border:none; padding:4px; display:flex; cursor:pointer; color:var(--neutral-600); }
.dx__iconbtn--mute{ color:var(--neutral-400); }
.dx__iconbtn i{ font-size:22px; }

/* 본문 영역(질문+답변) — 남는 높이 차지, 하단 CTA를 바닥에 고정 */
.dx__body{ flex:1; }
.dx__foot{ margin-top:auto; }

/* 질문 타이포 */
.dx__q{ margin:0; font-size:28px; line-height:1.35; font-weight:700; color:var(--neutral-900); }
.dx__hint{ margin:8px 0 0; font-size:16px; color:var(--neutral-400); }

/* 하단 CTA (진단 전용 — 랜딩 btn-cta-main 재사용하되 radius/weight만) */
.dx__next{
  width:100%; border:none; border-radius:12px;
  background:var(--color-cta-main); color:#fff;
  font-size:20px; font-weight:500; cursor:pointer;
}
.dx__next--final{ font-weight:600; box-shadow:0 10px 24px rgba(11,91,211,.24); }
.dx__next:disabled{ background:var(--color-cta-disabled); cursor:not-allowed; }

/* ---------- 선택형 옵션 버튼 (Q1·Q2·Q5·Q6) ---------- */
.opt{
  text-align:center; background:#fff;
  border:1.5px solid var(--border-default); border-radius:11px;
  font-size:18px; color:var(--neutral-700); cursor:pointer;
  font-family:inherit;
}
.opt--wide{ text-align:left; border-radius:12px; font-size:18px; line-height:1.4; }
.opt[aria-pressed="true"]{
  background:var(--chip-bg); border-color:var(--primary-bright);
  color:var(--primary-bright); font-weight:500;
}

/* 선택 그리드 (열 수는 HTML Tailwind에서) */
.opt-grid{ display:grid; }

/* Q2 순차 공개: 부양가족 블록 (혼인여부 선택 전 숨김) */
.dx__reveal{ display:none; }
.dx__reveal.is-shown{ display:block; animation:dx-fade .3s ease; }
@keyframes dx-fade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

/* ---------- 금액 입력 (Q3·Q4·Q7) ---------- */
.moneyfield{
  display:flex; align-items:center; background:#fff;
  border:1.5px solid var(--border-default); border-radius:12px;
}
.moneyfield:focus-within{ border-color:var(--primary-bright); box-shadow:var(--ring); }
.moneyfield__input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:26px; font-weight:500; color:var(--neutral-900);
  font-family:inherit;
}
.moneyfield__input::placeholder{ color:var(--neutral-300); font-weight:400; }
.moneyfield__unit{ font-size:15px; color:var(--neutral-600); }
.money-kor{ margin:8px 2px 0; font-size:14px; color:var(--primary-bright); font-weight:500; min-height:20px; }

/* ---------- 안내 카드 (Q3·Q4·Q6 시그니처 그라데이션 테두리) ---------- */
/* gcard 재사용하되 진단용 라운드(14px)만 다름 */
.notecard{ border-radius:14px; background:var(--grad-border); }
.notecard__inner{ background:#fff; border-radius:12.5px; }
.notecard__title{ margin:0; font-size:18px; font-weight:500; color:var(--primary-bright); }
.notecard__desc{ margin:8px 0 0; font-size:16px; line-height:1.65; color:var(--neutral-600); }
.notecard__list{ margin:8px 0 0; display:flex; flex-direction:column; gap:5px; list-style:none; padding:0; }
.notecard__li{ display:flex; align-items:center; gap:7px; font-size:16px; color:var(--neutral-600); }
.notecard__dot{ width:4px; height:4px; border-radius:50%; background:var(--neutral-400); flex:0 0 auto; }

/* =====================================================================
   로딩 오버레이 (진단 → 결과 사이 2초 연출)
===================================================================== */
.dx__loading{ align-items:center; justify-content:center; text-align:center; }
.loading__ring{ position:relative; width:230px; height:230px; margin:0 auto;
  border-radius:50%; background:#fff; box-shadow:0 10px 28px rgba(12,68,124,.14);
  display:flex; align-items:center; justify-content:center; }
.loading__ring svg{ position:absolute; top:0; left:0; }
.loading__ring-track{ fill:none; stroke:var(--border-default); stroke-width:5; }
.loading__ring-arc{ fill:none; stroke:var(--primary-bright); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:269 403; transform-origin:115px 115px; animation:loading-spin 1s linear infinite; }
@keyframes loading-spin{ to{ transform:rotate(360deg); } }
.loading__ring-img{ width:170px; height:170px; object-fit:contain; position:relative; z-index:1; }
.loading__title{ margin:26px 0 0; font-size:20px; line-height:1.5; font-weight:500; color:var(--primary-strong); }
.loading__steps{ margin-top:20px; display:flex; flex-direction:column; gap:9px; align-items:center; }
.loading__step{ display:flex; align-items:center; gap:8px; font-size:13px; }
.loading__step--done{ color:var(--neutral-600); }
.loading__step--doing{ color:var(--primary-strong); font-weight:500; }
.loading__step--done i{ font-size:15px; color:var(--green); }
.loading__spinner{ width:15px; height:15px; border-radius:50%; border:2px solid var(--neutral-300); border-top-color:var(--primary-bright); animation:loading-spin .8s linear infinite; }

/* =====================================================================
   결과페이지 (result.html) — 가능(블록1~7) / 신청불가 분기
   한 파일에서 계산 결과로 하나만 표시. 진단의 .dx__screen 패턴 재사용
===================================================================== */

/* 결과 뷰 컨테이너 — 가능/불가 각각 한 덩어리 */
.rz{ width:min(var(--frame-w),100vw); margin-inline:auto; }
.rz__view{ display:none; }
.rz__view.is-active{ display:block; }

/* 상단 바 (뒤로/닫기) — 진단과 동일 톤 */
.rz__top{ display:flex; align-items:center; justify-content:space-between; }
.rz__eyebrow{ margin:0; font-size:20px; color:var(--neutral-600); }
.rz__title{ margin:2px 0 0; font-size:28px; font-weight:700; color:var(--neutral-900); }

/* 섹션(블록) 배경 리듬 — 결과페이지도 흰↔틴트 교대 */
.rz__block{ }
.rz__block--white{ background:#fff; }
.rz__block--tint{ background:var(--section-alt-bg); background-image:var(--grad-tint); }
.rz__block-title{ margin:0; font-size:24px; font-weight:500; color:var(--primary-strong); line-height:1.4; }
.rz__source{ margin:14px 4px 0; font-size:13px; line-height:1.6; color:var(--neutral-400); }

/* ---------- 블록1 · 판정 + 금액 (네이비 그라데이션 카드) ---------- */
.verdict-card{
  position:relative; overflow:hidden; border-radius:var(--radius-2xl);
  background:var(--navy); background-image:var(--grad-navy);
  box-shadow:0 16px 40px rgba(4,44,83,.24);
}
.verdict-card__blob{                              /* 우상단 장식 원 */
  position:absolute; top:-40px; right:-30px; width:150px; height:150px;
  border-radius:50%; background:rgba(133,183,235,.14);
}
.verdict-card__inner{ position:relative; }
.verdict-card__badge{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:0.5px solid rgba(255,255,255,.22); color:#fff;
  border-radius:var(--radius-pill); font-size:14px; font-weight:500;
}
.verdict-card__badge i{ font-size:17px; }

/* 게이지 (가능=우측 민트 마커 / 불가=좌측 코랄) */
.gauge{ position:relative; height:7px; background:rgba(255,255,255,.16); border-radius:var(--radius-pill); }
.gauge__marker{
  position:absolute; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 5px rgba(93,202,165,.28);
}
.gauge__labels{ display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.6); }

.verdict-card__row{ display:flex; justify-content:space-between; align-items:baseline; }
.vrow-k{ font-size:18px; color:rgba(255,255,255,.72); }
.vrow-v{ font-size:20px; color:rgba(255,255,255,.9); }
.verdict-card__arrow{ text-align:center; color:rgba(133,183,235,.9); }
.verdict-card__row--main .vrow-k{ color:#fff; font-weight:500; }
.verdict-card__row--main .vrow-v{ font-size:28px; color:#fff; font-weight:600; letter-spacing:-.01em; }
.vrow-tag{ display:inline-block; margin-left:5px; padding:1px 7px; border-radius:var(--radius-pill); background:rgba(159,225,203,.2); color:var(--mint); font-size:11px; font-weight:500; vertical-align:middle; }
.verdict-card__divider{ height:0.5px; background:rgba(255,255,255,.16); }
.verdict-card__row--mint .vrow-v{ font-size:23px; color:var(--mint); font-weight:600; }

/* 하단 월변제/변제기간 2칸 */
.vstat{ display:flex; }
.vstat__box{ flex:1; background:rgba(255,255,255,.1); border-radius:12px; text-align:center; }
.vstat__k{ margin:0; font-size:16px; color:rgba(255,255,255,.6); }
.vstat__v{ margin:4px 0 0; font-size:22px; color:#fff; font-weight:600; word-break:keep-all; line-height:1.25; }
.vstat__v:not(:empty).is-long{ font-size:22px; }
.vstat__note{ margin:3px 0 0; font-size:14px; color:rgba(255,255,255,.5); line-height:1.3; }
.vstat__note:empty{ display:none; }

.rz__disclaimer{ margin:14px 4px 0; font-size:13px; line-height:1.6; color:var(--neutral-400); }

/* ---------- 블록2 · 계산 근거 (그라데이션 테두리 카드) ---------- */
.calc__row{ display:flex; justify-content:space-between; align-items:baseline; }
.calc__k{ font-size:16px; color:var(--neutral-600); }
.calc__v{ font-size:18px; color:var(--neutral-900); font-weight:500; }
.calc__v--minus{ color:var(--color-form-error); }
.calc__divider{ height:1px; background:var(--border-default); }
.calc__row--sum .calc__k{ color:var(--primary-strong); font-weight:500; }
.calc__row--sum .calc__v{ font-size:19px; color:var(--primary-bright); font-weight:600; }
.calc__formula{ background:var(--chip-bg); border-radius:10px; text-align:center; }
.calc__formula-lead{ font-size:14px; color:var(--primary); }
.calc__formula-lead .x{ color:var(--neutral-400); }
.calc__formula-res{ font-size:16px; color:var(--primary-bright); font-weight:600; }
/* .calc__hint{ font-size:12px; line-height:1.55; color:var(--neutral-500); text-align:center; }
.calc__hint b{ color:var(--primary-bright); font-weight:600; } */
.calc__need{ font-size:14px; line-height:1.6; color:var(--neutral-600); text-align:center; }
.calc__need b{ color:var(--coral); font-weight:600; }

/* ---------- 블록3 · 법원통계 (히스토그램) ---------- */
.court{ background:var(--bg-tint-lo); border-radius:var(--radius-xl); }
.court__chart{ position:relative; height:130px; }
.court__mid-k{ margin:0; font-size:14px; color:var(--neutral-600); }
.court__mid-v{ margin:4px 0 0; font-size:20px; color:var(--primary-strong); font-weight:600; }
.court__mid-v span{ font-size:13px; color:var(--neutral-400); font-weight:400; }

/* ---------- 블록4 · 가능 항목 배지 (2열, 그라데이션 테두리) ---------- */
.able__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.able{ border-radius:14.5px; background:var(--grad-border); }
.able__inner{ background:#fff; border-radius:13.3px; display:flex; flex-direction:column; align-items:center; }
.able__inner i{ font-size:24px; color:var(--primary-bright); }
.able__icon{ width:60px; height:60px; object-fit:contain; display:block; }
.able__name{ font-size:16px; font-weight:700; color:var(--primary-strong); text-align:center; }

/* ---------- 블록5 · 탕감률 상승 여지 (네이비, 가장 강한 전환) ---------- */
.uplift{
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:var(--navy); background-image:linear-gradient(160deg,var(--navy-lift) 0%,var(--navy) 60%,var(--navy-deep) 100%);
}
.uplift__icon{ display:block; width:150px; height:150px; object-fit:contain; margin:4px auto 0; }
.uplift > *{ position:relative; }
.uplift__title{ margin:0; font-size:28px; line-height:1.4; font-weight:600; color:#fff; }
.uplift__panel{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:0.5px solid rgba(255,255,255,.2); border-radius:var(--radius-xl);
}
.uplift__panel-row{ display:flex; justify-content:space-between; align-items:baseline; }
.uplift__now-k{ margin:0; font-size:14px; color:rgba(255,255,255,.65); }
.uplift__now-v{ margin:4px 0 0; font-size:24px; color:#fff; font-weight:600; }
.uplift__max-k{ margin:0; font-size:14px; color:var(--mint); }
.uplift__max-v{ margin:4px 0 0; font-size:24px; color:var(--mint); font-weight:600; }
.uplift__panel-arrow{ font-size:20px; color:rgba(255,255,255,.5); }
.uplift__bar{ height:10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.15); position:relative; overflow:hidden; }
.uplift__bar-fill{ position:absolute; left:0; top:0; height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--sky),var(--mint)); }
.uplift__bar-dot{ position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--primary-bright); }
.uplift__lead{ margin:0; font-size:16px; font-weight:500; line-height:1.65; color:rgb(255, 255, 255); }
.uplift__sub{ margin:0; font-size:16px; line-height:1.7; color:rgba(255,255,255,.65); }
.uplift__cta-line{ margin:0; font-size:16px; font-weight:500; color:#fff; }
.uplift__note{ margin:0; font-size:12px; color:rgba(255,255,255,.5); }

/* ---------- 블록6 · 수임료·진행 안내 (01·06 강조) ---------- */
.steps6{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.step6{ display:flex; gap:12px; align-items:center; border-radius:12px; background:var(--bg-tint-lo); }
.step6--hl{ background:var(--chip-bg); }
.step6__no{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; color:#fff; font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.step6__no--blue{ background:var(--primary-bright); }
.step6__no--sky{ background:var(--sky); }
.step6__no--green{ background:var(--green); }
.step6__label{ font-size:16px; color:var(--neutral-700); }
.step6--hl .step6__label{ color:var(--primary-strong); font-weight:500; }

/* ---------- 블록7 · CTA ---------- */
.rz__cta{ width:100%; border:none; border-radius:14px; background:var(--color-cta-main); color:#fff; font-size:20px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-cta); }

/* ---------- 신청불가 화면 ---------- */
.reject-card{ background:#fff; border-radius:var(--radius-2xl); box-shadow:0 10px 28px rgba(12,68,124,.12); text-align:center; }
.reject-card__face{ margin:0 auto; display:flex; align-items:center; justify-content:center; }
.reject-card__title{ margin:18px 0 0; font-size:22px; font-weight:600; color:var(--neutral-900); }
.reject-card__gauge{ position:relative; height:7px; background:var(--border-default); border-radius:var(--radius-pill); }
.reject-card__fill{ position:absolute; left:0; top:0; height:100%; width:14%; border-radius:var(--radius-pill); background:var(--coral); }
.reject-card__marker{ position:absolute; left:14%; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(216,90,48,.16); }
.reject-card__labels{ display:flex; justify-content:space-between; font-size:12px; color:var(--neutral-400); }
.reject-card__msg{ background:var(--bg-tint-lo); border-radius:12px; }
.reject-card__msg p{ margin:0; font-size:13px; line-height:1.65; color:var(--neutral-600); }
.reject-card__msg-title{ font-size:13px; font-weight:600; color:var(--neutral-800); text-align:center; }
.reject-card__reasons{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.reject-card__reasons li{ display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; color:var(--neutral-600); text-align:left; }
.reject-card__bullet{ flex:0 0 auto; width:4px; height:4px; border-radius:50%; background:var(--coral); margin-top:7px; }

/* =====================================================================
   리드 모달 (번호인증 · 센터 모달) — 블록7 CTA 클릭 시 오픈
===================================================================== */
.lead{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px 16px; }
.lead[hidden]{ display:none; }
.lead__dim{ position:absolute; inset:0; background:rgba(10,30,55,.55); animation:leadFade .2s ease; }
.lead__panel{
  position:relative; width:100%; max-width:400px; max-height:calc(100dvh - 40px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border-radius:20px; padding:26px 22px 24px;
  box-shadow:0 24px 60px rgba(4,44,83,.34);
  animation:leadPop .26s cubic-bezier(.16,1,.3,1);
}
@keyframes leadFade{ from{opacity:0} to{opacity:1} }
@keyframes leadPop{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.lead__close{
  position:absolute; top:14px; right:14px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--neutral-400,#9aa7b6); font-size:22px; cursor:pointer; border-radius:8px;
}
.lead__close:hover{ background:rgba(0,0,0,.04); }

/* 헤더 */
.lead__head{ text-align:center; padding:2px 4px 0; }
.lead__eyebrow{ font-size:13px; font-weight:600; color:var(--primary-bright); margin:0 0 6px; }
.lead__title{ font-size:20px; font-weight:700; line-height:1.35; color:var(--primary-strong); margin:0; letter-spacing:-.01em; }

/* 리드 본문 */
.lead__body{ margin-top:16px; }
.lead__lead{ font-size:16px; line-height:1.62; color:var(--text-secondary,#5f6b7a); margin:0 0 9px; }
.lead__lead--strong{ color:var(--primary-strong); font-weight:600; margin-top:11px; }
.lead__items{
  font-size:14px; line-height:1.6; color:var(--primary); margin:0 0 9px;
  background:var(--chip-bg); border-radius:10px; padding:11px 13px;
}

/* 체크리스트 */
.lead__checks{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.lead__checks li{ display:flex; align-items:flex-start; gap:9px; font-size:15px; line-height:1.5; color:var(--text-primary,#0e3b64); }
.lead__checks i{ flex:0 0 20px; width:20px; height:20px; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; background:var(--primary-bg); color:var(--primary-bright); border-radius:50%; font-size:13px; }
.lead__checks b{ font-weight:700; color:var(--primary-bright); }

.lead__promise{ text-align:center; font-size:15px; line-height:1.6; color:var(--text-secondary,#5f6b7a); margin:16px 0 0; }
.lead__promise b{ color:var(--primary-strong); font-weight:700; }

/* 폼 */
.lead__form{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border,#e3e9f0); }
.lead__field{ margin-bottom:13px; }
.lead__label{ display:block; font-size:12.5px; font-weight:600; color:var(--primary-strong); margin-bottom:6px; }
.lead__opt{ font-weight:400; color:var(--neutral-400,#9aa7b6); font-size:11.5px; }
.lead__input{
  width:100%; box-sizing:border-box; font-size:14px; color:var(--primary-strong);
  padding:12px 13px; border:1px solid var(--primary-border,#bcd5ff); border-radius:10px;
  background:#fbfdff; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;
}
.lead__input::placeholder{ color:#aeb9c6; }
.lead__input:focus{ outline:0; border-color:var(--primary-bright); box-shadow:0 0 0 3px var(--primary-soft); background:#fff; }
.lead__textarea{ resize:none; line-height:1.5; }

.lead__phone{ display:flex; gap:8px; align-items:stretch; }
.lead__phone .lead__input{ flex:1; min-width:0; }
.lead__verify-slot{ flex:0 0 auto; display:flex; }
.lead__verify{
  flex:0 0 auto; padding:0 16px; font-size:13px; font-weight:600; color:#fff;
  background:var(--primary); border:0; border-radius:10px; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.lead__verify:hover{ background:var(--primary-bright); }
.lead__verify.is-verify{ background:var(--green,#0f6e56); }        /* 6자리 입력완료 → 확인 대기(녹색) */
.lead__verify.is-verify:hover{ background:var(--green,#0f6e56); filter:brightness(1.08); }
.lead__verify.is-done{ background:var(--neutral-400,#9aa7b6); cursor:default; }  /* 인증 완료(회색 고정) */
.lead__verify:disabled{ opacity:.6; cursor:default; }
.lead__verify.is-done:disabled{ opacity:1; }                      /* 완료는 흐리게 말고 또렷하게 */
/* 인증 완료 시 전화번호칸 잠금(회색) */
.lead__input.is-locked{ background:#f1f3f5; color:#868e96; border-color:#dee2e6; cursor:default; }
/* 인증번호 입력칸 (발송 후 표시) */
.lead__otp-slot{ margin-top:8px; }
.lead__otp-msg{ font-size:12px; margin:6px 0 0; line-height:1.4; }

/* 통화 가능 시간 — select */
.lead__select{
  width:100%; box-sizing:border-box; font-size:14px; color:var(--primary-strong);
  padding:12px 13px; border:1px solid var(--primary-border,#bcd5ff); border-radius:10px;
  background:#fbfdff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23185FA5' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;
  -webkit-appearance:none; appearance:none; transition:border-color .15s, box-shadow .15s; cursor:pointer;
}
.lead__select:focus{ outline:0; border-color:var(--primary-bright); box-shadow:0 0 0 3px var(--primary-soft); background-color:#fff; }
.lead__select:invalid{ color:#aeb9c6; }

/* 동의 · SSL */
.lead__agree{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--text-secondary,#5f6b7a); cursor:pointer; }
.lead__agree input{ width:17px; height:17px; accent-color:var(--primary-bright); flex:0 0 auto; }
.lead__terms{ margin-left:auto; font-size:11.5px; color:var(--primary-bright); text-decoration:underline; }
.lead__ssl{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--neutral-400,#9aa7b6); margin:9px 0 0; }

/* 제출 버튼 */
.lead__submit{
  width:100%; margin-top:16px; padding:16px; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-bright) 100%);
  border:0; border-radius:12px; cursor:pointer; letter-spacing:-.01em;
  box-shadow:0 8px 20px rgba(11,91,211,.28); transition:transform .12s, box-shadow .12s;
}
.lead__submit:hover{ transform:translateY(-1px); box-shadow:0 11px 26px rgba(11,91,211,.34); }
.lead__submit:active{ transform:translateY(0); }

/* 스크롤 잠금 */
body.lead-open{ overflow:hidden; }

/* =====================================================================
   개인정보 약관 모달 — 전문 보기 클릭 시 오픈
===================================================================== */
.privacy{ position:fixed; inset:0; z-index:110; display:flex; align-items:center; justify-content:center; padding:20px 16px; }
.privacy[hidden]{ display:none; }
.privacy__dim{ position:absolute; inset:0; background:rgba(10,30,55,.6); animation:leadFade .2s ease; }
.privacy__panel{
  position:relative; width:100%; max-width:640px; max-height:80vh; display:flex; flex-direction:column;
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(4,44,83,.4);
  animation:leadPop .24s cubic-bezier(.16,1,.3,1);
}
.privacy__head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  height:52px; padding:0 18px; border-bottom:1px solid var(--border,#e3e9f0);
}
.privacy__title{ font-size:15px; font-weight:700; color:var(--primary-strong); }
.privacy__close{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--neutral-400,#9aa7b6); font-size:20px; cursor:pointer; border-radius:8px;
}
.privacy__close:hover{ background:rgba(0,0,0,.04); }
.privacy__body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px; font-size:12px; line-height:1.7; color:var(--text-secondary,#5f6b7a);
}
.privacy__table{ width:100%; border-collapse:collapse; margin:4px 0; font-size:11px; }
.privacy__table th, .privacy__table td{
  border:1px solid var(--border,#e3e9f0); padding:7px 8px; text-align:center; line-height:1.4;
}
.privacy__table th{ background:var(--chip-bg,#e6f1fb); color:var(--primary-strong); font-weight:600; }
.privacy__table td{ color:var(--text-secondary,#5f6b7a); }

.lead__submit:disabled{ opacity:.55; cursor:default; box-shadow:none; }
.lead__submit:disabled:hover{ transform:none; box-shadow:none; }

/* =====================================================================
   제출 로딩 오버레이 (전송 중 화면 덮기 + 중복클릭 방지)
===================================================================== */
.submit-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,30,55,.62);
}
.submit-overlay__box{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  background:#fff; border-radius:16px; padding:30px 40px;
  box-shadow:0 20px 50px rgba(4,44,83,.35);
}
.submit-overlay__spinner{
  width:38px; height:38px; border-radius:50%;
  border:3.5px solid var(--primary-bg,#eaf2ff);
  border-top-color:var(--primary-bright,#0b5bd3);
  animation:submitSpin .7s linear infinite;
}
@keyframes submitSpin{ to{ transform:rotate(360deg); } }
.submit-overlay__text{
  text-align:center; font-size:15px; font-weight:700; color:var(--primary-strong,#0e3b64); margin:0; line-height:1.5;
}
.submit-overlay__text span{ font-size:12.5px; font-weight:400; color:var(--text-secondary,#5f6b7a); }

/* =====================================================================
   site-footer  —  최하단 법적 고지 푸터 (AI 자가진단 index 전용)
   · 검은 배경, 작은 글씨
   · 상단: [서비스 운영 정보]/[법적 고지] 좌우 2단
   · 하단: 사업자 정보 한 줄 나열( | 구분 ), 상단과 구분선으로 분리
   · 모바일(폭 좁을 때): 상단 1단 세로 적층, 하단은 자동 줄바꿈
===================================================================== */
.site-footer{
  background:#111417;
  color:#9aa3ad;
  padding:40px 0 34px;
}
.site-footer__wrap{
  width:min(1180px,90vw); margin-inline:auto;
}

/* 상단 2단 */
.site-footer__top{
  display:grid; grid-template-columns:1fr 1fr; gap:40px 56px;
  align-items:start;
}
@media (max-width:760px){
  .site-footer{ padding:30px 0 28px; }
  .site-footer__wrap{ width:min(var(--frame-w),92vw); }
  .site-footer__top{ grid-template-columns:1fr; gap:24px; }
}

/* 블록 공통 */
.site-footer__top .site-footer__block + .site-footer__block{ margin-top:0; }
.site-footer__block + .site-footer__block{ margin-top:22px; }
.site-footer__h{
  font-size:12.5px; font-weight:700; color:#e7ebef; margin:0 0 10px;
  letter-spacing:-.1px;
}
.site-footer__p{
  font-size:11.5px; line-height:1.85; color:#8b949e; margin:0;
}
.site-footer__p + .site-footer__p{ margin-top:12px; }
.site-footer__p b{ color:#c3cbd3; font-weight:500; }

/* 하단: 사업자 정보 일렬 */
.site-footer__bottom{
  margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
}
.site-footer__biz-name{
  font-size:12.5px; font-weight:700; color:#e7ebef;
}
.site-footer__biz-row{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px 9px;
  font-size:11.5px; color:#8b949e;
}
.site-footer__bar{ color:rgba(255,255,255,.22); }
.site-footer__link{
  color:#c3cbd3; text-decoration:underline; text-underline-offset:2px;
  font-weight:600; font-size:11.5px;
}
.site-footer__link:hover{ color:#fff; }


/* 개인정보 모달 — 제3자 제공 광고주 토글 (index) */
.privacy__toggle{
  color:var(#000000); font-weight:700;
  text-decoration: underline; text-underline-offset:2px; cursor:pointer;
}
.privacy__partners{
  display:none; margin:6px 0 4px; padding:8px 10px;
  background:var(--neutral-50,#f3f7ff); border-radius:8px;
  font-size:11.5px; line-height:1.7; color:var(--text-secondary,#5f6b7a);
}
.privacy__partners.is-open{ display:block; }

/* details 기반 광고주 토글(result) — 기본 삼각형 마커 숨김 */
.privacy__partners-d > summary{ list-style:none; }
.privacy__partners-d > summary::-webkit-details-marker{ display:none; }

/* =====================================================================
   블록1·3 배경 장식 도형 (순수 CSS, 콘텐츠 뒤 배경 레이어)
   · 섹션에 overflow:hidden + 콘텐츠(frame/visual)는 z-index로 위에
   · 부드러운 blob(그라데이션 덩어리)만 사용 → 은은하게 밋밋함 해소
===================================================================== */

/* 공통: 두 섹션 도형이 밖으로 안 넘치게 + 콘텐츠를 도형 위로 */
.hero, .assure{ overflow:hidden; }
.hero > .frame, .assure > .frame{ position:relative; z-index:2; }

/* ---------- 블록1 히어로: blob 2개 (활기) — 콘텐츠(420px) 기준 배치 ----------
   ★ blob을 섹션(.hero) 전체가 아니라 콘텐츠 폭(.frame, 420px)에 붙인다.
     PC에서 화면이 넓어져도 blob이 가운데 콘텐츠 양옆에 딱 붙어,
     콘텐츠와 배경이 한 덩어리로 보인다(양 끝 빈 공간엔 blob 안 감). */
.hero > .frame{ position:relative; }
/* blob A — 콘텐츠 우상단, 민트→블루 (2/3 크기) */
.hero > .frame::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-40px; right:-90px; width:213px; height:200px;
  background:radial-gradient(circle at 35% 35%,
            rgba(159,225,203,.55), rgba(55,138,221,.28) 55%, transparent 72%);
  border-radius:48% 52% 58% 42% / 55% 45% 55% 45%;
  filter:blur(6px);
}
/* blob B — 콘텐츠 좌하단, 블루→민트 */
.hero > .frame::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-110px; bottom:-30px; width:280px; height:260px;
  background:radial-gradient(circle at 60% 40%,
            rgba(55,138,221,.30), rgba(159,225,203,.20) 55%, transparent 74%);
  border-radius:54% 46% 42% 58% / 48% 56% 44% 52%;
  filter:blur(8px);
}
/* 기존 .hero::before/::after(섹션 기준) 무효화 */
.hero::before, .hero::after{ content:none; }

/* ---------- 블록3 안심배지: 도트 그리드 (blob과 대비되는 기하 패턴) ---------- */
/* 섹션 전체에 은은한 점 격자. 카드 뒤는 자연스럽게 묻히고 여백에서 보임 */
.assure::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:0;
  background-image:radial-gradient(rgba(55,138,221,.16) 1.4px, transparent 1.4px);
  background-size:20px 20px;
  background-position:6px 6px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* ::after 미사용 (도트 그리드는 ::before 하나로 충분) */
.assure::after{ content:none; }