/* mkt.soundradar.co — /c/views 전용. 단일 SKU = 계산기 랜딩. 클래스 접두사 vw-
   토큰은 site.css :root 만 사용하고, 여기서 색·폰트를 새로 정의하지 않는다. */

/* ══ 히어로 = 견적기 (풀블리드) ══ */
.vw-hero{position:relative;padding:0;overflow:hidden;border-bottom:1px solid var(--line)}
.vw-hero>.wrap{position:relative;z-index:1}
.vw-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 26%,#000 18%,transparent 74%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 26%,#000 18%,transparent 74%)}
.vw-glow{position:absolute;left:50%;top:-180px;width:960px;height:560px;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,var(--acc-bg),transparent);filter:blur(30px)}

.vw-in{text-align:center;padding:36px 28px 0}
.vw-in .eyebrow{margin-left:auto;margin-right:auto}
.vw-h1{font-size:clamp(32px,4.6vw,62px);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:0 0 18px;text-wrap:balance}
.vw-h1 em{font-style:normal;color:var(--acc);text-shadow:0 0 40px var(--acc-glow)}
.vw-lead{color:var(--muted);font-size:15.5px;font-weight:400;line-height:1.7;max-width:38em;margin:0 auto}

/* 출력 — 이 페이지의 주인공 */
.vw-out{margin:54px 0 0}
.vw-out .mlab{display:block;color:var(--faint)}
.vw-num{font-size:clamp(40px,10.5vw,152px);font-weight:700;line-height:.94;letter-spacing:-.05em;
  margin:14px 0 0;text-shadow:0 0 70px var(--acc-bd)}
.vw-sub{margin:18px 0 0;font-size:14px;color:var(--muted);font-weight:400;letter-spacing:.01em}
.vw-sub b{color:var(--acc);font-weight:600}

/* 슬라이더 레일 — 화면 폭 전체 */
.vw-rail{position:relative;z-index:1;margin:44px 0 0;padding:0 clamp(16px,4.5vw,80px)}
.vw-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;margin:0;background:transparent;cursor:pointer}
.vw-range::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc) 0 var(--vw-p,0%),var(--line2) var(--vw-p,0%) 100%)}
.vw-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-11px;border-radius:50%;
  background:var(--acc);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--acc-bd),0 8px 26px -6px var(--acc-glow)}
.vw-range::-moz-range-track{height:2px;border-radius:2px;background:var(--line2)}
.vw-range::-moz-range-progress{height:2px;border-radius:2px;background:var(--acc)}
.vw-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--acc);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--acc-bd),0 8px 26px -6px var(--acc-glow)}
.vw-ticks{display:block;height:9px;margin-top:-2px;border-right:1px solid var(--line2);
  background-image:linear-gradient(90deg,var(--line2) 0 1px,transparent 1px);
  background-size:calc((100% - 1px) / var(--vw-tk,20)) 100%;background-repeat:repeat-x}
.vw-ends{display:flex;justify-content:space-between;gap:12px;margin-top:12px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.vw-ends span:nth-child(2){color:var(--dim)}
.vw-ends span:last-child{text-align:right}

/* 프리셋 · CTA */
.vw-pre{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:30px 0 0}
.vw-chip{cursor:pointer}
.vw-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:34px 0 0}
.vw-note{margin:20px 0 0;text-align:center;font-size:13px;color:var(--faint);font-weight:400}

/* 하단 엣지 = 규모 게이지 */
.vw-meter{position:relative;z-index:1;height:3px;margin-top:56px;background:var(--line)}
.vw-meter i{display:block;height:100%;width:var(--vw-p,0%);background:var(--acc);box-shadow:0 0 22px var(--acc-glow);transition:width .1s linear}

/* ══ 집행 방식 — 좌측 축 타임라인 ══ */
.vw-how{padding:104px 0 0}
.vw-how-g{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:24px 76px;align-items:start}
.vw-how-h{position:sticky;top:92px}
.vw-how-h .mlab{display:block;margin-bottom:14px;color:var(--acc)}
.vw-how-h h2{font-size:clamp(26px,2.9vw,38px);margin:0 0 14px;line-height:1.06}
.vw-how-h p{margin:0;font-size:14px;color:var(--muted);font-weight:400;line-height:1.7}
.vw-run{list-style:none;margin:0;padding:0}
.vw-run .art:last-child{padding-bottom:0}
.vw-sb{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.02em;margin-top:7px}
.vw-run p a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

/* ══ 조건 · 스펙 ══ */
.vw-spec{padding:104px 0 0}
.vw-spec .dhead{margin-top:0}
.vw-spec-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.vw-spec-g .spec{margin-bottom:0}
.vw-desc{margin:0 0 20px;font-size:15px;color:var(--ink);font-weight:400;line-height:1.75}
.vw-fine{padding-left:0;padding-right:0}

/* ══ FAQ ══ */
.vw-faq{padding:104px 0 0}
.vw-faq .faqs{margin-bottom:0}

@media (max-width:900px){
  .vw-how-g{grid-template-columns:1fr;gap:28px}
  .vw-how-h{position:static}
  .vw-spec-g{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .vw-in{padding-top:24px}
  .vw-out{margin-top:36px}
  /* 최대 규모("1억 …원")도 가로 스크롤 없이 들어가도록 하한을 낮춘다 */
  .vw-num{font-size:clamp(34px,10.5vw,72px);letter-spacing:-.04em}
  .vw-rail{margin-top:32px}
  .vw-ticks{display:none}
  .vw-ends{font-size:11px;letter-spacing:.08em}
  .vw-ends span:nth-child(2){display:none}
  .vw-meter{margin-top:40px}
  .vw-cta{flex-direction:column;align-items:stretch}
  .vw-cta .btn{justify-content:center}
  .vw-how,.vw-spec,.vw-faq{padding-top:72px}
}