/* =====================================================================
   common.css  —  컴포넌트 스킨(배경·보더·라운드·그림자) + 모양/질감 토큰 + 전역 base
   규칙: padding/margin/gap/grid/flex/width/height 같은 "레이아웃 수치"는
        전부 HTML의 Tailwind 유틸에서 제어. 여기선 "겉모습"만.
        (예외: 네비는 커스텀 브레이크포인트 980px + 드롭다운 상태 때문에
         레이아웃을 컴포넌트로 묶어 CSS에서 관리 — nude의 nav 컴포넌트와 동일한 취급)
===================================================================== */

/* ---------- 모양/질감 토큰 ---------- */
:root{
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:16px; --radius-2xl:22px; --radius-pill:999px;
  --shadow-sm:0 4px 14px rgba(11,37,64,.08);
  --shadow-md:0 8px 20px rgba(11,37,64,.10);
  --shadow-lg:0 18px 60px rgba(0,0,0,.25);
  --shadow-card:0 6px 18px rgba(11,37,64,.06);
}

/* ---------- 전역 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;
}

/* 앵커 이동 시 고정 네비에 안 가리도록 */
.hero, .section{ scroll-margin-top: calc(var(--nav-h, 72px) + 8px); }

/* =====================================================================
   네비게이션 (컴포넌트 — 레이아웃+스킨+상태)
===================================================================== */
:root{ --nav-h:72px; }
@media (max-width:980px){ :root{ --nav-h:64px; } }

.site-nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:1000;
  background:var(--primary);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow .18s ease;
}
.site-nav.is-scrolled{ box-shadow:0 6px 18px rgba(0,0,0,.12); }

.nav__inner{
  width:min(1200px,92vw); margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__menu{ display:flex; gap:clamp(16px,3vw,44px); align-items:center; }
.nav__logo{ color:#fff; font-weight:900; letter-spacing:.2px; font-size:clamp(18px,2.2vw,26px); text-decoration:none; }
.nav__link{ padding:8px 4px; position:relative; color:#fff; font-weight:800; font-size:clamp(14px,1.6vw,18px); text-decoration:none; }
.nav__link:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:8px; }

.nav__toggle{ display:none; width:40px; height:40px; border:0; background:transparent; cursor:pointer; }
.nav__bar{ display:block; width:24px; height:2px; background:#fff; margin:5px auto; border-radius:2px; }

@media (max-width:980px){
  .nav__toggle{ display:block; }
  .nav__menu{
    position:absolute; left:0; right:0; top:var(--nav-h);
    background:var(--primary); display:grid; gap:0;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .nav__menu a{ padding:14px 20px; border-top:1px solid rgba(255,255,255,.12); }
  .nav__menu.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  body.nav-open{ overflow:hidden; }
}

/* =====================================================================
   Hero (스킨)  —  레이아웃(grid/gap/padding)은 HTML Tailwind
===================================================================== */
.hero{ position:relative; overflow:hidden; background:var(--page-bg); }
.hero::before{                                   /* 상단 옅은 파랑 띠 */
  content:""; position:absolute; inset:0 0 auto 0; height:200px;
  background:var(--primary-bg); z-index:-1; pointer-events:none;
}
.hero-visual{
  position:relative; border-radius:var(--radius-2xl); overflow:hidden;
  background:#dfeaff; box-shadow:0 20px 60px rgba(23,64,136,.12);
}
.hero-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Hero 텍스트 타이포 */
.hero .title{ color:var(--primary); font-weight:900; font-size:clamp(40px,4.5vw,52px); line-height:1.05; letter-spacing:-.01em; }
.hero .lead{ color:var(--neutral-600); font-weight:400; font-size:clamp(16px,1.6vw,18px); line-height:1.7; }
.hero-lead-lg     { font-size:20px; }
.hero-lead-accent { font-size:24px; color:var(--primary); font-weight:700; }
.bullet strong    { color:var(--neutral-900); }

/* kicker / bullet 카드 (마이크로 UI → 내부 padding은 HTML Tailwind) */
.kicker{ background:var(--primary-bg); border-radius:var(--radius-pill); color:var(--primary-text); font-weight:700; font-size:14px; letter-spacing:.02em; }
.kicker--solid { background: var(--primary-bright); border-radius:var(--radius-pill); color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; }
  
.bullet{
  background:#fff; border:1px solid rgba(31,95,174,.08);
  border-radius:var(--radius-lg); box-shadow:0 6px 18px rgba(23,64,136,.08);
}

/* =====================================================================
   개인정보 모달 (스킨) — 2차에서 HTML/본문 추가. 동작은 ui.js(data-evt)
===================================================================== */
.privacy-modal{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.6); display:none; }
.privacy-modal.is-open{ display:block; }
.privacy-modal__overlay{ position:absolute; inset:0; cursor:pointer; }
.privacy-modal__content{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius:var(--radius-md);
  box-shadow:0 0 10px rgba(0,0,0,.2); overflow:hidden;
}
.privacy-modal__head{ background:#f8f8f8; color:#000; display:flex; align-items:center; justify-content:space-between; }
.privacy-modal__title{ font-size:15px; font-weight:bold; }
.privacy-modal__close{ background:transparent; border:0; cursor:pointer; color:#000; }
.privacy-modal__body{ background:#fff; color:#000; overflow-y:auto; font-size:13px; letter-spacing:-.5px; line-height:1.6; }
.privacy-table th{ border:1px solid #000; }

/* =====================================================================
   섹션 공통
===================================================================== */
.section__head{ text-align:center; }
.section__title{ font-weight:900; letter-spacing:-.01em; }
.section__desc{ line-height:1.7; font-size:18px; }

/* =====================================================================
   섹션 3 · 후기 캐러셀 (.testimonials)
   복합 위젯 → 레이아웃을 컴포넌트로 묶어 CSS 관리(JS가 track flex 에 의존).
===================================================================== */
.section.testimonials{ padding-block:0px; background:transparent; }
/* ★ A안: 배경을 1000px inner에만 → 좌우는 흰 여백(이미지 섹션과 통일) */
.section.testimonials .testimonials__inner{ width:min(1000px,92vw); margin-inline:auto; background:var(--section-alt-bg); padding:clamp(32px,4vw,56px) clamp(16px,3vw,32px); }
.section.testimonials .section__head{ margin-bottom:clamp(28px,3.4vw,48px); }
.section.testimonials .section__body{ width:100%; margin-inline:auto; }
.section.testimonials .section__title{ color:#001d47; font-size:clamp(28px,4.5vw,52px); }
.section.testimonials .section__desc{ margin-top:10px; color:var(--neutral-600); font-size:clamp(18px,1.8vw,24px); }

/* 화살표: 카드 위 절대배치 오버레이 (PC·모바일 공통) */
.ts{ position:relative; }
.ts__nav {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 2;
  appearance: none;
  background: var(--primary-bright);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform .14s ease;
}
.ts__nav--prev{ left:-6px; } .ts__nav--next{ right:-6px; }
.ts__nav:hover{ transform:translateY(-1px); }
.ts__nav:focus-visible{ outline:3px solid color-mix(in srgb, var(--primary-bright) 30%, transparent); }

.ts__viewport{ overflow:hidden; border-radius:var(--radius-xl); width:100%; }
.ts__track{ display:flex; list-style:none; margin:0; padding:0; transition:transform .55s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.ts__slide{ inline-size:100%; flex:0 0 100%; padding:clamp(10px,2vw,16px); }

/* 한 장의 흰색 카드: 헤드라인 → 이미지 → 본문 → 더보기 (PC·모바일 동일) */
.ts__grid{
  display:grid; grid-template-columns:1fr; gap:clamp(14px,2.6vw,20px); min-width:0;
  background:#fff; border:1px solid var(--border-default);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-md); padding:clamp(18px,3.2vw,28px);
}
.ts__copy{ display:contents; }            /* 래퍼 해제 → 자식들이 직접 그리드 아이템으로 */
.ts__copyHead{ order:1; margin:0; text-align:center; }
.ts__imgs{ order:2; }
.ts__quote{ order:3; }
.ts__more{ order:4; }

.ts__headline{ display:flex; flex-direction:column; flex-wrap:wrap; align-items:center; gap:2px; margin:0; font-size:clamp(24px,2.6vw,42px); color:var(--neutral-900); justify-content:center; }
.ts__headline .chip{ background:var(--primary-bg); color:var(--primary-text); border-radius:var(--radius-lg); padding:4px 10px; font-size:36px; font-weight:700; }
.ts__meta { display: grid; grid-template-columns: auto auto; gap: 6px 40px; margin-top: 10px; color: var(--neutral-500); font-size: 24px; justify-content: center; }
.ts__meta strong{ color:var(--neutral-900); }

/* 본문: 카드형 배경으로 헤더와 구분 — PC·모바일 공통 */
.ts__quote {
  line-height: 1.75;
  color: #334;
  margin: 0;
  text-align: left;
  font-size: 22px;
  background: var(--primary-bg);
  border-left: 4px solid var(--primary-bright);
  border-radius: 12px;
  padding: 20px 22px;
  display: block;              /* line-clamp 관련 속성 전부 제거 */
}

.ts__quote strong {
  color: var(--primary-bright);
  font-weight: 700;
}

.ts__imgs{ --ts-img-h:clamp(240px,40vw,400px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,18px); align-items:stretch; justify-items:center; }
.ts__imgWrap{ height:var(--ts-img-h); display:flex; flex-direction:column; min-width:0; min-height:0; }
.ts__img{ width:100%; height:var(--ts-img-h); object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 8px 18px rgba(11,37,64,.08); display:block; border: 1px solid var(--border-strong);}
/* 두 번째 이미지 임시 회색 자리 (실제 이미지 넣으면 그 위로 채워짐) */

/* 본문 더보기 버튼: 가운데, 파란 배경/흰 글자 */
.ts__more{ display:flex; align-items:center; justify-content:center; gap:6px; width:fit-content; margin:8px auto 0; padding:14px 32px; background:var(--color-cta-main); color:#fff; border:0; border-radius:var(--radius-pill); cursor:pointer; font-size:17px; font-weight:700; }
.ts__more:hover{ background:var(--primary-strong); }

.ts__dots{ width:min(820px,92vw); margin:16px auto 0; display:flex; justify-content:center; gap:10px; }
.ts__dot{ width:8px; height:8px; border-radius:var(--radius-pill); background:#c9d6ea; border:none; }
.ts__dot[aria-selected="true"]{ width:26px; background:var(--primary-bright); transition:width .25s ease; }
.ts__dot .sr-only{ display:none; }

/* 모바일: 사이즈만 미세 조정 (구조는 PC와 동일) */
@media (max-width:980px){
  /* 모바일: 좌우 2칸 → 상하 1칸, 이미지 원본 비율대로 크게(안 잘림) */
  .ts__imgs{ grid-template-columns:1fr; gap:14px; }
  .ts__imgWrap{ height:auto; }
  .ts__img{ height:auto; object-fit:contain; border-radius:14px; }
  .ts__quote{ padding: 16px 18px; font-size: 16px; }
}

@media (max-width: 640px) {
  .ts__meta { grid-template-columns: 1fr; justify-items: center; font-size: 18px;}
}

@media (max-width: 640px) {
  .ts__headline .chip {
    font-size: 22px;
  }
}

@media (max-width: 980px) {
  .ts__nav {
    width: 38px;
    height: 38px;
    top: calc(50% - 12px);
  }
  .ts__nav svg {
    width: 22px;
    height: 22px;
  }
}

/* ==================================================================
   섹션 2·7 · 리드폼 (.leadform)   배경 오버레이는 premium.css
===================================================================== */
.section.leadform{ position:relative; padding-block:0px; isolation:isolate; text-align:center; color:#fff; background:transparent; }
/* ★ A안: 배경을 1000px 래퍼 안에만 → 좌우는 흰 여백(이미지 섹션과 통일) */
.section.leadform .leadform__wrap{ position:relative; overflow:hidden; padding:clamp(24px,5vw,72px) clamp(10px,3vw,40px); }
.leadform__wrap{ width:min(1000px,92vw); margin-inline:auto; }
.leadform__card{ background:#fff; border-radius:var(--radius-lg); margin-inline:auto; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.08); color:var(--neutral-900); }
.leadform__count{ margin:0 0 8px; font-size:clamp(20px,1.4vw,24px); opacity:.9; }
.leadform__count strong{ font-weight:900; color:#74ffb4; }
.leadform__title{ margin:4px 0 10px; font-weight:900; font-size:clamp(30px,3.8vw,48px); letter-spacing:-.01em; }
.leadform__desc{ margin:0 0 10px; opacity:.9; line-height:1.65; font-size:clamp(20px,1.6vw,24px); }

.leadform__hl{ color:#ffe600; font-weight:700; }
.leadform__title .leadform__hl{ color:#ffe600; font-weight:900; font-size:clamp(24px,3.8vw,36px);}

.lf__grid{ display:grid; grid-template-columns:1fr; gap:14px 16px; padding:clamp(16px,3.2vw,22px); }
.lf__field{ display:flex; flex-direction:column; text-align:left; }
.lf__field--full{ grid-column:1 / -1; }
.lf__label{ font-size:clamp(16px,3vw,20px); color:#4b5a6b; margin:0 0 6px; font-weight:700; }
.lf__input, .lf__select, .lf__textarea{ width:100%; border:1px solid var(--border-default); border-radius:var(--radius-md); padding:12px 14px; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; font-size:clamp(15px,3vw,18px); }
.lf__input::placeholder, .lf__textarea::placeholder{ color:var(--neutral-400); }
.lf__textarea{ resize:vertical; min-height:40px; }
.lf__select{
  appearance:none; padding-right:38px; background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23163c87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lf__input:focus, .lf__select:focus, .lf__textarea:focus{ outline:none; border-color:var(--color-form-focus-border); box-shadow:var(--ring); }
.lf__input.is-invalid, .lf__select.is-invalid{ border-color:var(--color-form-error); }
.lf__agree{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lf__check{ display:flex; gap:8px; align-items:center; font-size:14px; color:#334; }
.lf__check input{ width:18px; height:18px; }
.lf__submit{ appearance:none; border:0; border-radius:var(--radius-md); padding:14px 18px; background:var(--color-cta-main); color:#fff; cursor:pointer; box-shadow:0 8px 20px rgba(11,91,211,.25); font-weight:900; }
.lf__submit:disabled{ opacity:.85; cursor:not-allowed; }
@media (max-width:920px){ .lf__grid{ grid-template-columns:1fr; } }

/* 폼 정책 링크(버튼 리셋) + 모달 표 */
.lf__policy{ background:none; border:0; padding:0; cursor:pointer; color:#000; font-weight:400; font-size:13px; text-decoration:underline; }
.privacy-table{ border-collapse:collapse; }
.privacy-table th{ padding:4px 8px; }


/* =====================================================================
   AI 정밀진단 위저드 v3 (.wz*)  — clamp 반응형 (미디어쿼리 최소화)
   ---------------------------------------------------------------------
   ★ 모든 크기를 clamp(최소, 유동vw, 최대)로 → 모든 화면폭에서 자동 대응.
     400px 이하 별도 미디어쿼리 불필요(clamp가 연속적으로 줄여줌).
   ★ 최대값 = PC에서 크게 보이도록(유저가 직접 키운 값 반영).
     최소값 = 좁은 폰(~320px)에서도 안 깨지게.
   ★ 색·라운드는 기존 brand.css 토큰 사용(폴백 병기).
   ===================================================================== */

.wz{ position:relative; width:100%; }

/* ===== 폰 목업 프레임 ===== */
.wz__device{
  position:relative;
  width:clamp(280px, 82vw, 520px);      /* 좁은폰 300 ~ PC 440 자동 */
  margin:0 auto;
  padding:clamp(11px, 3vw, 16px) clamp(9px, 2.6vw, 14px) clamp(13px, 3vw, 18px);
  background:linear-gradient(160deg,#1a1a1e 0%, #050507 100%);  /* 진한 검정 바디 */
  border-radius:clamp(36px, 9vw, 46px);
  box-shadow:
    0 0 0 2px #000 inset,
    0 2px 0 2px rgba(255,255,255,.05) inset,
    0 30px 70px rgba(0,0,0,.55),
    0 8px 20px rgba(0,0,0,.40);
}
/* 전면 카메라(펀치홀) */
.wz__cam{
  position:absolute; top:clamp(20px,5vw,26px); left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%;
  background:#000; box-shadow:0 0 0 2px rgba(255,255,255,.08); z-index:3;
}
/* 측면 버튼 */
.wz__btn{ position:absolute; background:#000; border-radius:3px; }
.wz__btn--power  { right:-3px; top:150px; width:3px; height:64px; }
.wz__btn--vol-up { left:-3px;  top:120px; width:3px; height:42px; }
.wz__btn--vol-dn { left:-3px;  top:172px; width:3px; height:42px; }

/* 스크린(흰 화면) — 높이도 clamp로 고정(짧은 스텝도 유지→튐 없음) */
.wz__screen{
  position:relative;
  background:#fff;
  border-radius:clamp(26px, 7vw, 34px);
  padding:clamp(26px,6vw,40px) clamp(16px,4.5vw,26px) clamp(18px,4vw,26px);
  min-height:clamp(480px, 130vw, 600px);
  overflow:hidden;
}

/* ===== 인트로(스텝 0) ===== */
.wz__intro{
  text-align:center;
  padding:clamp(8px,3vw,14px) clamp(4px,2vw,6px) 6px;
  /* ★ 다른 스텝(뷰포트)과 같은 높이로 맞춤 + 내용 세로 중앙 정렬 → 시작↔진단 전환 시 높이 안 튐 */
  min-height:clamp(440px,92vw,580px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.wz__intro-badge{
  display:inline-block; margin-bottom:clamp(12px,3vw,16px);
  padding:6px 14px; border-radius:var(--radius-pill,999px);
  background:var(--primary-bg,#eaf2ff); color:var(--color-cta-main,#0b5bd3);
  font-size:clamp(17px,3.2vw,23px); font-weight:800; letter-spacing:-.01em;
}
.wz__intro-title{
  font-size:clamp(28px, 7vw, 42px); font-weight:900; line-height:1.35;
  color:var(--neutral-900,#0b2540); margin:0 0 clamp(10px,3vw,16px); letter-spacing:-.02em;
}
.wz__intro-title b{ color:var(--color-cta-main,#0b5bd3); }
.wz__intro-sub{
  font-size:clamp(19px,4vw,26px); line-height:1.6; color:var(--neutral-600,#5d6b7a);
  margin:0 0 clamp(18px,5vw,24px);
}
.wz__intro-sub b{ color:var(--neutral-900,#0b2540); font-weight:700; }
.wz__intro-points{
  list-style:none; margin:0 0 clamp(20px,5.5vw,28px); padding:0;
  display:flex; flex-direction:column; gap:clamp(8px,2.5vw,11px);
}
.wz__intro-points li{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:clamp(19px,4vw,26px); font-weight:600; color:var(--neutral-800,#233043);
}
.wz__intro-points li::before{ content:"✓"; color:var(--color-cta-main,#0b5bd3); font-weight:900; }
.wz__intro-points b{ color:var(--color-cta-main,#0b5bd3); font-weight:900; }
.wz__start{
  width:100%; padding:clamp(15px,4vw,18px); border:0; border-radius:var(--radius-lg,14px);
  background:var(--color-cta-main,#0b5bd3); color:#fff;
  font-size:clamp(21px,4.6vw,30px); font-weight:800; cursor:pointer; letter-spacing:-.01em;
  box-shadow:0 10px 24px rgba(11,91,211,.30);
  transition:transform .12s ease, box-shadow .15s ease;
}
.wz__start:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(11,91,211,.38); }
.wz__start:active{ transform:translateY(0); }
.wz__intro-foot{ margin:clamp(14px,3.5vw,18px) 0 0; font-size:clamp(16px,3.5vw,20px); color:var(--neutral-400,#9aa7b6); }
.wz__intro-foot strong{ color:var(--color-cta-main,#0b5bd3); font-weight:800; }

/* ===== 진행 바 ===== */
.wz__bar-wrap{ margin-bottom:clamp(16px,4.5vw,20px); }
.wz__bar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.wz__bar-label{ font-size:clamp(12px,3.2vw,13px); font-weight:700; color:var(--neutral-600,#5d6b7a); }
.wz__bar-count{ font-size:clamp(12px,3.2vw,13px); font-weight:800; color:var(--color-cta-main,#0b5bd3); }
.wz__bar-track{ height:8px; border-radius:var(--radius-pill,999px); background:var(--neutral-100,#eef3fa); overflow:hidden; }
.wz__bar-fill{
  height:100%; width:16.6%; border-radius:var(--radius-pill,999px);
  background:linear-gradient(90deg, var(--color-cta-main,#0b5bd3), var(--primary-after,#5da1ff));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* ===== 슬라이드 뷰포트 + 트랙 ===== */
.wz__viewport{ position:relative; overflow:hidden; min-height:clamp(440px,92vw,580px); }
.wz__track{ display:flex; width:100%; height:100%; transition:transform .32s cubic-bezier(.4,0,.2,1); will-change:transform; }
.wz__slide{ flex:0 0 100%; width:100%; min-width:100%; box-sizing:border-box; padding:2px; align-self:flex-start; }

/* 질문·고지문 */
.wz__q{ font-size:clamp(24px,5.2vw,30px); font-weight:900; line-height:1.35; color:var(--neutral-900,#0b2540); margin:0 0 8px; text-align:left; letter-spacing:-.02em; }
.wz__notice{ font-size:clamp(15px,3.4vw,18px); color:var(--neutral-600); margin:0 0 clamp(16px,4.5vw,20px); text-align:left; line-height:1.5; }

/* ===== 선택 칩 ===== */
.wz__choices{ display:flex; flex-direction:column; gap:clamp(8px,2.5vw,10px); }
.wz__choices--grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(7px,2vw,9px); }
.wz__choice{
  appearance:none; border:1.5px solid var(--border-default,#e6ecf5); background:#fff;
  color:var(--neutral-800,#233043); font-size:clamp(16px,3.8vw,20px); font-weight:700;
  padding:clamp(14px,3.8vw,17px) 14px; border-radius:var(--radius-md,12px); cursor:pointer;
  transition:border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .08s ease;
  text-align:center;
}
.wz__choices--grid .wz__choice{ padding:clamp(13px,3.5vw,15px) 6px; font-size:clamp(16px,3.4vw,18px); }
.wz__choice:hover{ border-color:var(--color-cta-main,#0b5bd3); background:#fafcff; }
.wz__choice:active{ transform:scale(.96); }
.wz__choice.is-selected{
  border-color:var(--color-cta-main,#0b5bd3); background:var(--primary-bg,#eaf2ff);
  color:var(--color-cta-main,#0b5bd3); box-shadow:0 0 0 3px rgba(11,91,211,.12);
}

/* ===== 만원 입력 ===== */
.wz__inputwrap{ position:relative; display:flex; align-items:center; margin-bottom:clamp(16px,4.5vw,20px); }
.wz__num{
  flex:1 1 auto; width:100%; box-sizing:border-box;
  font-size:clamp(22px,6vw,26px); font-weight:800; text-align:right;
  padding:16px 64px 16px 16px;
  border:1.5px solid var(--border-default,#e6ecf5); border-radius:var(--radius-md,12px);
  color:var(--neutral-900,#0b2540);
}
.wz__num:focus{ outline:none; border-color:var(--color-cta-main,#0b5bd3); box-shadow:0 0 0 3px rgba(11,91,211,.15); }
.wz__unit{ position:absolute; right:18px; font-size:clamp(15px,4vw,17px); font-weight:800; color:var(--neutral-400,#9aa7b6); pointer-events:none; }

/* ===== '다음' 버튼 ===== */
.wz__next{
  width:100%; padding:clamp(14px,4vw,16px); border:0; border-radius:var(--radius-md,12px);
  background:var(--color-cta-main,#0b5bd3); color:#fff; font-size:clamp(15px,4vw,16px); font-weight:800; cursor:pointer;
  transition:opacity .15s ease, transform .12s ease;
}
.wz__next:hover:not(:disabled){ transform:translateY(-1px); }
.wz__next:disabled{ background:var(--color-cta-disabled,#595959); opacity:.45; cursor:default; }

/* ===== 마지막 스텝 입력 필드 ===== */
.wz__field{ margin-bottom:14px; text-align:left; }
.wz__flabel{ display:block; font-size:clamp(13px,3.6vw,14px); font-weight:700; color:var(--neutral-700,#33415a); margin:0 0 6px; }
.wz__finput, .wz__fselect{
  width:100%; box-sizing:border-box;
  border:1.5px solid var(--border-default,#e6ecf5); border-radius:var(--radius-md,12px);
  padding:13px 14px; font-size:clamp(14px,3.8vw,15px); background:#fff; color:var(--neutral-900,#0b2540);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.wz__finput:focus, .wz__fselect:focus{ outline:none; border-color:var(--color-cta-main,#0b5bd3); box-shadow:0 0 0 3px rgba(11,91,211,.13); }
.wz__finput.is-invalid, .wz__fselect.is-invalid{ border-color:var(--color-form-error,#c53030); }
.wz__phone-row{ display:flex; align-items:center; gap:8px; }
.wz__phone-row input:first-child{ flex:0 0 24%; text-align:center; }
.wz__phone-row input:not(:first-child){ flex:1 1 0; text-align:center; }
.wz__dash{ flex:0 0 auto; color:var(--neutral-400,#9aa7b6); }

/* 동의 + 정책 */
.wz__agree{ display:flex; align-items:center; gap:8px; margin:16px 0 14px; flex-wrap:wrap; }
.wz__check{ display:flex; align-items:center; gap:8px; font-size:clamp(12px,3.4vw,13px); color:var(--neutral-700,#33415a); cursor:pointer; }
.wz__policy{ background:none; border:0; padding:0; cursor:pointer; color:var(--neutral-500,#66768a); font-size:clamp(11px,3vw,12px); text-decoration:underline; }

/* 제출 버튼 */
.wz__submit{
  width:100%; padding:clamp(15px,4vw,17px); border:0; border-radius:var(--radius-lg,14px);
  background:var(--color-cta-main,#0b5bd3); color:#fff; font-size:clamp(15px,4.2vw,17px); font-weight:800; cursor:pointer;
  box-shadow:0 10px 24px rgba(11,91,211,.30);
  transition:background .15s ease, transform .12s ease;
}
.wz__submit:hover{ transform:translateY(-1px); }
.wz__submit:disabled{ background:var(--color-cta-disabled,#595959); opacity:.55; cursor:default; box-shadow:none; }

/* 이전 버튼 */
.wz__back{
  display:block; margin:14px auto 0; background:none; border:0;
  color:var(--neutral-400,#9aa7b6); font-size:clamp(18px,3.6vw,20px); font-weight:600; cursor:pointer; padding:6px 10px;
}
.wz__back:hover{ color:var(--color-cta-main,#0b5bd3); }

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .wz__track, .wz__bar-fill{ transition:none; }
  .wz__start, .wz__next, .wz__submit{ transition:none; }
}