:root {
    --c-bg: #eef0f3;
    --c-surface: #ffffff;
    --c-surface-2: #e7e9ec;
    --c-field: #f7f8f9;
    --c-ink: #17191c;
    --c-ink-2: #3d434b;
    --c-mute: #5f6771;
    --c-line: #dcdfe4;
    --c-line-2: #eaecef;
    --c-pri: #2FBFD6;
    --c-on-pri: #ffffff;
    --c-pri-ink: #15565f;
    --c-pri-soft: #e0f5f8;
    --c-pri-mark: #bdeef5;
    --c-warn: oklch(0.72 0.16 50);
    --c-good: #17191c;
    --c-footer: #121417;
    --c-glow-1: rgba(255,255,255,0.16);
    --c-glow-2: rgba(0,0,0,0.25);
    --c-badge: #2FBFD6;
    --c-on-badge: #ffffff;
    --c-navy: #1a1e24;
    --c-header: rgba(255,255,255,0.92);
    --c-hero-from: #55687a;
    --c-hero-via: #33404d;
    --c-hero-to: #232d38;
    --c-hero-accent: #2FBFD6;
    --shadow-sm: 0 1px 0 rgba(20,20,30,0.04), 0 1px 2px rgba(20,20,30,0.04);
    --shadow-md: 0 1px 0 rgba(20,20,30,0.04), 0 12px 28px -12px rgba(20,20,30,0.18);
    --shadow-lg: 0 2px 0 rgba(20,20,30,0.04), 0 30px 60px -20px rgba(20,20,30,0.22);
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* 어느 요소 하나가 넘쳐도 페이지 전체가 옆으로 밀리지 않게 한다. */
  html { overflow-x: hidden; scroll-behavior: smooth; }
  /* 카드에서 상담 폼으로 내려갈 때 헤더에 제목이 가리지 않도록 여유를 둔다. */
  :target, #apply { scroll-margin-top: 84px; }
  body {
    font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
    background: var(--c-bg);
    color: var(--c-ink);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'ss01', 'tnum';
    line-height: 1.5;
  }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  input, select, textarea { font-family: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'tnum'; }

  /* ---------- layout ---------- */
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

  /* ---------- header ---------- */
  .hdr {
    position: sticky; top: 0; z-index: 50;
    background: var(--c-header);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--c-line);
  }
  .hdr-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
  .logo-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--c-pri); color: white;
    display: grid; place-items: center; font-weight: 800;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12), 0 4px 10px -4px var(--c-pri);
  }
  .nav { display: flex; gap: 22px; margin-left: 8px; font-size: 14px; color: var(--c-ink-2); }
  .nav a:hover { color: var(--c-ink); }
  .hdr-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
  .tel-mini { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-mute); }
  .tel-mini .num { font-weight: 700; color: var(--c-ink); font-size: 16px; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; transition: transform .12s ease, box-shadow .12s ease, background .15s ease; }
  .btn-pri { background: var(--c-ink); color: #fff; }
  .btn-pri:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  /* **강조색 위 글자는 팔레트가 정한다.** 여기 `#fff` 를 박아 두면 밝은 강조색
     (라임)으로 바꿨을 때 버튼 글자가 그대로 사라진다 — 대비 1.16:1 이다. */
  .btn-accent { background: var(--c-pri); color: var(--c-on-pri); box-shadow: 0 6px 18px -6px var(--c-pri); }
  .btn-accent:hover { transform: translateY(-1px); }
  .btn-ghost { background: var(--c-line-2); color: var(--c-ink); }
  .btn-big { padding: 14px 24px; font-size: 15px; }
  .btn-xl { padding: 18px 28px; font-size: 16px; }

  /* ---------- hero ---------- */
  .hero { padding: 56px 0 88px; position: relative; overflow: hidden; }

  /* ── 어두운 히어로 (클로드 디자인에서 가져옴, 2026-08-23) ─────────────────
     히어로가 밝은 바탕에서 **어두운 사진 위**로 옮겨 갔다. 사진이 없어도 아래
     그라디언트가 그 자리를 채우므로 화면이 깨지지 않는다 — 사진은 얹는 것이지
     바탕이 아니다.

     팔레트가 이 스위치를 켠다(`hero-dark`). 청록·라임 팔레트는 밝은 히어로 그대로다. */
  .hero-dark .hero {
    padding: 64px 0 96px; color: #fff;
    background: linear-gradient(165deg,
      var(--c-hero-from) 0%, var(--c-hero-via) 55%, var(--c-hero-to) 100%);
  }
  .hero-dark .hero .hero-h { color: #fff; }
  .hero-dark .hero .hero-sub { color: rgba(255,255,255,0.82); }
  /* 어두운 바탕 위의 알약. 흰색을 아주 옅게 깔아 유리처럼 보이게 한다. */
  .hero-dark .hero .pill {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92);
  }
  .hero-dark .hero .hero-eyebrow { background: rgba(255,255,255,0.12); color: #fff; }
  .hero-dark .hero .hero-eyebrow .dot { background: #fff; }
  /* 제목 강조. **강조색을 글자로 못 쓴다** — 차콜은 어두운 히어로에서 안 보인다.
     밝은 회색으로 바꿔 얹는다(`--c-hero-accent`). */
  .hero-dark .hero h1.hero-h .pri { color: var(--c-hero-accent); }
  /* 밝은 히어로용 형광펜 처리는 어두운 히어로에서 끈다 — 배경이 이미 어둡다. */
  .hero-dark.accent-is-light .hero h1.hero-h .pri { background: none; padding: 0; }
  /* 카드가 가운데 오도록. 밝은 히어로는 카피가 길어 위를 맞췄지만, 어두운
     히어로는 사진 위라 가운데가 안정적이다. */
  .hero-dark .hero-grid { align-items: center; }

  /* 히어로 사진. **없어도 된다** — 파일이 없으면 브라우저가 조용히 넘어가고
     아래 그라디언트만 남는다. 천천히 흐르게 해 정지 화면처럼 보이지 않게 한다. */
  .hero-photo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
  .hero-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 68%;
    animation: heroDrift 26s ease-in-out infinite alternate; will-change: transform;
  }
  /* 사진 위에 씌우는 막. 왼쪽(카피가 놓이는 쪽)을 진하게 덮어 글자가 읽히게 한다. */
  .hero-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      rgba(15,21,27,0.86) 0%, rgba(15,21,27,0.55) 48%, rgba(15,21,27,0.22) 100%);
  }
  @keyframes heroDrift {
    from { transform: scale(1.06) translate3d(-1.6%, 0.6%, 0); }
    to   { transform: scale(1.15) translate3d(1.6%, -0.6%, 0); }
  }
  /* 움직임을 줄여 달라고 한 사람에게는 흐르지 않는다. */
  @media (prefers-reduced-motion: reduce) {
    .hero-photo img { animation: none; transform: scale(1.08); }
  }
  /* 사진·막 위로 내용이 올라와야 한다.
     **`z-index` 를 주지 않는다.** 주면 여기 쌓임 맥락(stacking context)이 생기고,
     그 안에 있는 모바일 바텀시트(`position: fixed; z-index: 60`)가 이 맥락에
     갇혀 버린다 — 바깥의 막(`.qq-scrim`, z-index 55)이 시트 위로 올라와 닫기
     버튼이 안 눌린다. 실제로 그렇게 막혔다.
     자리만 잡아 두면 DOM 순서상 사진 다음이라 그냥 위에 그려진다. */
  .hero > .wrap { position: relative; }
  /* 위 끝을 맞춘다. 가운데 정렬이면 폼이 길어질수록 왼쪽 카피가 아래로 밀려 내려가
     첫 화면에서 제목이 접힌다 — 폼에 조건 선택이 늘면서 실제로 그렇게 됐다. */
  .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-pri-soft); color: var(--c-pri-ink);
    padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
    margin-bottom: 20px;
  }
  .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-pri); }
  h1.hero-h {
    font-size: clamp(38px, 4.2vw, 60px);
    line-height: 1.08; letter-spacing: -0.025em; font-weight: 800;
    margin: 0 0 22px;
  }
  /* 제목의 강조. **밝은 강조색은 글자로 못 쓴다** — 흰 바탕에 라임은 안 보인다.
     그래서 글자는 잉크로 두고 **뒤에 형광펜처럼 깐다**(`--c-pri-mark`).
     레퍼런스가 쓰는 방식이기도 하다(`July 2026` 을 라임으로 칠한 그 처리).
     어두운 강조색(원래 청록)일 때는 형광펜이 글자를 덮으므로 글자색으로 쓴다 —
     아래 `.accent-is-light` 가 그 갈림길이고, 빌드가 켜고 끈다. */
  h1.hero-h .pri { color: var(--c-pri); }
  .accent-is-light h1.hero-h .pri {
    color: var(--c-ink);
    background: linear-gradient(to top,
      var(--c-pri-mark) 0 38%, transparent 38%);
    padding: 0 2px;
  }
  .hero-sub { font-size: 18px; line-height: 1.6; color: var(--c-ink-2); margin: 0 0 28px; max-width: 520px; }
  .hero-bullets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
  .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; color: var(--c-ink-2); font-weight: 500; }
  .pill .check { width: 14px; height: 14px; border-radius: 50%; background: var(--c-good); display: grid; place-items: center; color: #fff; font-size: 10px; }

  .hero-center { text-align: center; grid-template-columns: 1fr; }
  .hero-center .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-center .hero-bullets { justify-content: center; }
  .hero-center .quote-card { max-width: 720px; margin: 0 auto; }

  /* ---------- quote card ---------- */
  .quote-card {
    /* **글자색을 다시 세운다.** 이 카드는 히어로 안에 있는데, 어두운 히어로는
       섹션 전체에 `color: #fff` 를 건다. 흰 카드가 그 흰 글자를 물려받아
       제목(`#qqTitle`)이 통째로 사라졌고, `input`·`select` 도 `color: inherit`
       이라 드롭다운 글자까지 안 보였다. 배경을 정하는 곳이 글자색도 정해야 한다. */
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-lg);
    position: relative;
  }
  .quote-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 20px;
  }
  .quote-card-head h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
  /* `무료` 배지의 색은 **팔레트가 정한다.** 청록에서는 주황이 잘 붙었지만 라임
     옆에서는 둘 다 "봐 달라" 고 외쳐 어느 쪽도 눈에 안 들어온다. 경고색
     (`--c-warn`)은 필수 표시(`*`) 전용으로 남긴다. */
  .ribbon { background: var(--c-badge); color: var(--c-on-badge); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }

  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 12px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 6px; }
  .field label .req { color: var(--c-warn); }
  /* 필수 표시만 있으면 나머지도 필수처럼 보인다. 선택 항목은 선택이라고 적는다 —
     히어로 폼에서 칸이 많아 보일수록 신청을 접는다. */
  .field label .opt { color: var(--c-mute); font-weight: 500; }
  .input, .select {
    width: 100%; height: 46px; padding: 0 14px;
    background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
    font-size: 14px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .input:focus, .select:focus { border-color: var(--c-pri); background: #fff; box-shadow: 0 0 0 3px var(--c-pri-soft); }
  /* 키보드로 넘길 때 지금 어디인지 보여야 한다. 마우스 클릭에는 뜨지 않는다. */
  a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
  summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--c-pri); outline-offset: 2px; border-radius: 6px;
  }
  /* 움직임에 어지러움을 느끼는 사람이 있다. 시스템 설정을 따른다. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
  }
  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

  .seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 3px; background: var(--c-line-2); border-radius: var(--radius-sm); }
  /* 데스크톱은 마우스라 34px 로 줄인다 — 세 줄이 쌓이는 자리라 한 줄에서 10px 을
     줄이면 카드가 30px 짧아진다. **모바일은 44px 그대로다**(손가락 최소 크기,
     Apple HIG). 조건 선택은 주 조작부라 거기서는 줄이지 않는다. */
  .seg button {
    position: relative;
    min-height: 34px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--c-ink-2);
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    transition: background .12s, color .12s, box-shadow .12s;
  }
  .seg button.on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-sm); }
  /* 기준 조건 배지. 세 줄 아래에 있던 안내 한 줄을 여기로 옮겼다 — 줄이 줄고,
     무엇이 기준인지가 그 칸 바로 위에서 읽힌다. */
  .seg-tag {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em;
    color: var(--c-pri-ink); background: var(--c-pri-soft);
    border-radius: 999px; padding: 2px 6px; line-height: 1.2;
  }

  /* ---------- Quick Quote ----------
     이 페이지의 유일한 폼. 데스크톱은 히어로 우측 카드, 모바일은 **같은 노드**가
     아래에서 올라오는 바텀시트다. DOM 을 옮기지 않고 CSS 로만 모습을 바꾼다 —
     옮기면 입력 중이던 값과 포커스가 날아간다. */
  .qq { display: flex; flex-direction: column; }
  /* 닫기는 모바일 시트에서만 의미가 있다. 데스크톱 카드는 히어로에 박혀 있다. */
  .qq-close { display: none; }

  /* **카드 키는 스텝이 바뀌어도 그대로다**(명세 §8).
     실제 값은 스크립트(`qqLockHeight`)가 모든 스텝을 한 번씩 재서 가장 큰 것으로
     정한다 — 글꼴이 늦게 오거나 창 폭이 바뀌어도 따라간다. 여기 적은 값은 스크립트가
     돌기 전의 최소치다. */
  .qq-body { min-height: 200px; display: flex; flex-direction: column; }

  /* 짧은 스텝에서 남는 자리를 아래에 몰아 두지 않는다. 선택지는 가운데로 모으고
     진행 버튼은 바닥에 붙인다 — 그래야 빈 공간이 '덜 만든 화면' 이 아니라
     '여백' 으로 읽힌다.

     **`margin-top: auto` 만으로는 부족하다.** 내용이 자리를 다 채우면 남는 공간이
     없어 auto 가 0 이 되고, 마지막 선택지에 버튼이 딱 붙는다. 그래서 최소 여백을
     따로 준다 — 플렉스 안에서는 마진이 상쇄되지 않으므로 둘이 더해진다. */
  .qq-opts { flex: 1; justify-content: center; margin-bottom: 20px; }
  .qq-rows { flex: 1; justify-content: center; margin-bottom: 20px; }
  .qq-go { margin-top: auto; }
  .qq-cascade { flex: 1; }
  .qq-step { display: flex; flex-direction: column; flex: 1; }
  .qq-step[hidden] { display: none; }

  /* 언제 끝나는지 보여야 사람이 시작한다. */
  /* **지금 어디인가**를 한 줄로. 이름 셋을 늘어놓던 빵부스러기를 걷어냈다 —
     좁은 카드에 다 적으면 글자가 작아지는데 정작 현재 위치는 흐려진다.
     아래 가는 막대가 남은 길이를 보여 준다. */
  .qq-progress { margin-bottom: 18px; }
  .qq-progress-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 8px;
  }
  .qq-now { font-size: 13.5px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }
  .qq-count { font-size: 11.5px; font-weight: 700; color: var(--c-mute); white-space: nowrap; letter-spacing: 0.02em; }
  .qq-track { height: 3px; border-radius: 999px; background: var(--c-line-2); overflow: hidden; }
  .qq-track i { display: block; height: 100%; width: 33.333%; background: var(--c-pri); border-radius: 999px; transition: width .25s cubic-bezier(.22,.9,.3,1); }

  .qq-q { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--c-ink); line-height: 1.35; }
  .qq-note { margin: 6px 0 16px; font-size: 13.5px; color: var(--c-mute); line-height: 1.6; }
  /* 카드 머리에 있던 설명을 STEP 1 안으로 옮겼다 — 머리에 두면 스텝마다 있고
     없고가 갈려 카드 키가 흔들린다. */
  .qq-sub { margin: 4px 0 0; font-size: 13px; color: var(--c-mute); line-height: 1.55; }

  /* STEP 1 — 브랜드 → 차종 → 트림. **고르는 길은 이것 하나뿐이다.**
     인기 차량 버튼을 위에 두고 드롭다운을 아래 숨겨 뒀었는데, 고르는 방법이 둘로
     보여서 오히려 복잡했다. 인기 차량은 아래 섹션의 카드가 맡는다. */
  .qq-cascade { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
  .qq-cascade .row-3 { gap: 6px; }
  .qq-go { width: 100%; }
  /* 부담을 덜어 주는 한 줄. 필수처럼 보이면 트림을 모르는 사람이 여기서 멈춘다. */
  .qq-hint { margin: 2px 0 0; font-size: 12px; color: var(--c-mute); line-height: 1.55; }

  /* STEP 3 — 선납금·기간·주행거리를 **한 화면에서** 나란히 고른다.
     셋은 서로 물린 값이라(선납금을 올리면 월 납입금이 내려간다) 따로 물으면
     앞의 답을 기억한 채 뒤를 골라야 한다. */
  .qq-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
  .qq-row > label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--c-ink-2); margin-bottom: 6px;
  }
  .qq-rows + .qq-hint { margin-top: 12px; }
  .qq-rows + .qq-hint + .qq-go { margin-top: 14px; }

  /* STEP 2~4 — **누르면 곧바로 다음 질문이다.** 그래서 버튼이 크고 하나씩 세로로
     쌓인다. 손가락으로 고를 것을 격자에 촘촘히 넣으면 오조작이 난다. */
  .qq-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  /* **2×2 바둑판**(2026-08-22). 넷을 세로로 쌓으면 그만큼 카드가 길어진다. */
  .qq-opts.qq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .qq-opt {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 12px 14px; text-align: center;
    font-size: 14.5px; font-weight: 600; color: var(--c-ink);
    background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
    transition: border-color .12s, background .12s, transform .12s;
  }
  /* 복수 선택이라 **켜진 게 여럿일 수 있다.** 체크 표시를 붙여 "하나만 고르는
     칸" 이 아니라는 걸 눌러 보기 전에도 알 수 있게 한다. */
  .qq-grid .qq-opt::before {
    content: '';
    width: 16px; height: 16px; flex: none;
    border: 1.5px solid var(--c-line); border-radius: 5px; background: #fff;
    transition: background .12s, border-color .12s;
  }
  .qq-grid .qq-opt.on::before {
    /* 체크의 색은 **팔레트가 정한다**(`%23ffffff` 를 빌드가 채운다). 데이터 URI 는
       CSS 변수를 못 읽어서, 흰색을 박아 두면 라임 위에서 체크가 사라진다. */
    background: var(--c-pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
    border-color: var(--c-pri);
  }
  .qq-opt:hover { border-color: var(--c-pri); background: #fff; transform: translateY(-1px); }
  .qq-opt.on { border-color: var(--c-pri); background: var(--c-pri-soft); color: var(--c-pri-ink); }
  .qq-opt-tag {
    font-size: 11px; font-weight: 700; color: var(--c-pri-ink);
    background: var(--c-pri-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
  }
  .qq-opt.on .qq-opt-tag { background: var(--c-surface); }

  /* 고른 조건 되읽기. **금액은 넣지 않는다** — 아직 자동 견적이 아니다. */
  .qq-summary {
    list-style: none; padding: 12px 14px; margin: 0 0 18px;
    display: flex; flex-wrap: wrap; gap: 6px 8px;
    background: var(--c-pri-soft); border-radius: var(--radius-sm);
  }
  .qq-summary li { font-size: 12.5px; font-weight: 600; color: var(--c-pri-ink); }
  .qq-summary li + li::before { content: '·'; margin-right: 8px; opacity: 0.55; }

  .qq-done { align-items: center; text-align: center; justify-content: center; }
  .qq-done .qq-summary { justify-content: center; }
  .qq-ok {
    width: 46px; height: 46px; border-radius: 50%; background: var(--c-good); color: #fff;
    display: grid; place-items: center; font-size: 22px; font-weight: 700; margin-bottom: 14px;
  }

  .qq-back {
    align-self: flex-start; margin-top: 14px;
    font-size: 13px; font-weight: 600; color: var(--c-mute); padding: 6px 2px;
  }
  .qq-back:hover { color: var(--c-ink); }
  /* **없을 때도 자리는 남긴다.** `display: none` 으로 빼면 되돌리기가 없는
     첫 화면과 완료 화면에서만 카드가 41px 짧아져, 애써 고정한 키가 다시 흔들린다.
     `visibility: hidden` 은 화면 낭독기에서도 함께 빠지므로 안 보이는 버튼을
     키보드로 누르게 되는 일도 없다. */
  .qq-back[hidden] { display: block; visibility: hidden; pointer-events: none; }

  /* 모바일 시트 뒤를 덮는 막. 데스크톱에서는 만들어지지 않는다. */
  .qq-scrim { display: none; }


  /* 테두리형 버튼. 헤더 CTA 와 캐스케이드 확인 버튼이 쓴다 —
     둘 다 주 동작 옆의 보조 동작이라 채운 버튼이면 시선을 나눠 가진다. */
  .btn-line { border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); }
  .btn-line:hover { border-color: var(--c-pri); color: var(--c-pri-ink); }
  /* 헤더의 Quick Quote 진입 버튼. 오른쪽 끝에 붙는다. */
  .hdr-quote { margin-left: auto; }

  .consent { display: flex; gap: 8px; font-size: 12px; color: var(--c-mute); margin: 12px 0 16px; align-items: flex-start; }
  .consent input { margin-top: 3px; }
  .consent a { color: var(--c-ink-2); text-decoration: underline; }
  .submit-row { display: flex; gap: 10px; }
  .submit-row .btn { flex: 1; }
  .form-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--c-mute); }
  /* 계산기로 가는 보조 경로. 전화 상담이 주 경로라 눈에 덜 띄게 두되, 스스로
     계산해 보고 싶은 사람은 여기로 빠져나갈 수 있어야 한다(브랜드 3원칙). */
  .form-foot a { color: var(--c-pri-ink); text-decoration: none; border-bottom: 1px solid var(--c-pri); padding-bottom: 1px; white-space: nowrap; }
  .form-foot a:hover { color: var(--c-ink); }

  /* ---------- decorative hero bg ---------- */
  .hero-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(800px 400px at 80% 10%, var(--c-glow-1), transparent 60%),
      radial-gradient(700px 360px at 10% 60%, var(--c-glow-2), transparent 60%);
  }

  /* ---------- image hero variant ---------- */
  .hero-img { position: relative; padding: 0; }
  .hero-img-stage {
    position: relative;
    min-height: 620px;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, oklch(0.30 0.06 220) 0%, oklch(0.22 0.04 240) 100%);
  }
  .hero-img-stage .hero-bg-art {
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14px),
      radial-gradient(closest-side at 70% 50%, oklch(0.50 0.14 210) 0%, transparent 70%);
  }
  .hero-img-stage .hero-bg-art::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  }
  .hero-img-stage .placeholder-label {
    position: absolute; left: 24px; top: 24px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
  }
  .hero-img-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 460px; gap: 56px; padding: 80px 56px; align-items: center;
    color: #fff;
  }
  .hero-img-grid h1 { color: #fff; }
  .hero-img-grid .hero-sub { color: rgba(255,255,255,0.85); }
  .hero-img-grid .pill { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
  .hero-img-grid .pill .check { background: var(--c-good); }
  .hero-img-grid .hero-eyebrow { background: rgba(255,255,255,0.14); color: #fff; }
  .hero-img-grid .hero-eyebrow .dot { background: var(--c-pri); }

  /* ---------- stats strip ---------- */
  .stats {
    background: var(--c-navy); color: #fff;
    padding: 28px 0;
  }
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .stat { display: flex; flex-direction: column; gap: 4px; }
  .stat .num { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
  /* 숫자가 올라가는 동안 자릿수 폭이 달라지면 라벨이 좌우로 흔들린다.
     등폭 숫자로 고정해 자리를 미리 잡아 둔다. */
  .stat .num .cnt { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
  .stat .num .unit { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.6); margin-left: 4px; }
  .stat .lbl { font-size: 13px; color: rgba(255,255,255,0.6); }

  /* 숫자를 세기 시작할 때 카드가 순서대로 떠오른다.
     `.on` 은 화면에 들어온 순간 자바스크립트가 붙인다 — 스크립트가 없으면 아래
     기본 상태(보이는 상태)가 그대로라 아무것도 사라지지 않는다. */
  .stats-grid.on .stat { animation: stat-rise .55s cubic-bezier(.22,.9,.3,1) backwards; }
  .stats-grid.on .stat:nth-child(2) { animation-delay: .08s; }
  .stats-grid.on .stat:nth-child(3) { animation-delay: .16s; }
  .stats-grid.on .stat:nth-child(4) { animation-delay: .24s; }
  @keyframes stat-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---------- section ---------- */
  section.sec { padding: 88px 0; }
  .sec-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 36px; gap: 20px; flex-wrap: wrap; }
  .sec-eyebrow { font-size: 13px; font-weight: 700; color: var(--c-pri-ink); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
  .sec-title { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; font-weight: 800; }
  .sec-sub { color: var(--c-ink-2); font-size: 16px; max-width: 540px; margin: 12px 0 0; }
  /* 조건·근거 같은 각주. 본문처럼 크면 읽을 필요 없는 걸 읽게 만든다. */
  .sec-note { color: var(--c-mute); font-size: 12.5px; margin: 10px 0 0; }
  .sec-tabs { display: flex; gap: 6px; background: var(--c-surface); border: 1px solid var(--c-line); padding: 4px; border-radius: 999px; }
  .sec-tabs button { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
  .sec-tabs button.on { background: var(--c-ink); color: #fff; }

  /* ---------- vehicle grid ---------- */
  /* ---------- 인기 차량: 국산 한 줄 · 수입 한 줄 ----------
     격자로 12칸을 세우면 세로를 크게 먹는다. 한 줄에 10위까지 흘려보내면 같은
     정보를 3분의 1 높이에 담고, 순위라는 맥락도 생긴다. */
  .rank-rows { display: grid; gap: 26px; }
  /* **그리드 칸은 기본적으로 내용보다 작아지지 않는다**(min-width: auto).
     안에 든 트랙이 카드 20장 폭이라 이걸 안 풀면 칸이 그만큼 늘어나 레일이
     화면 밖으로 삐져나가고, overflow 가 안 생겨 스크롤도 자동 흐름도 죽는다. */
  .rank-row { min-width: 0; }
  .rank-label {
    font-size: 13px; font-weight: 800; color: var(--c-ink); margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .rank-label .rank-sub { font-weight: 600; color: var(--c-mute); }
  .rank-rail {
    min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;      /* iOS 에서 관성 스크롤 */
    scrollbar-width: none;                 /* 막대는 숨기고 손으로 넘기게 둔다 */
    /* 양 끝을 흐리게 잘라 화면 밖에서 흘러들어오는 것처럼 보이게 한다. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
  .rank-rail::-webkit-scrollbar { display: none; }
  .rank-track { display: flex; gap: 16px; width: max-content; padding: 4px 2px 8px; }
  /* 카드가 늘어나거나 줄어들지 않게 폭을 고정한다. 안 그러면 흐르는 중에
     칸 너비가 들쭉날쭉해 보인다. */
  .rank-track .vcard { flex: 0 0 236px; }

  .vg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  /* **가만히 있을 때도 살짝 떠 있어야 한다.** 새 팔레트에서 카드 면과 페이지
     바탕의 대비가 1.14:1 이라 테두리만으로는 카드가 배경에 묻힌다. 그림자는
     대비가 아니라 깊이로 경계를 만들어서, 색을 어둡게 하지 않고도 떨어져 보인다. */
  .vcard {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column;
  }
  .vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-pri); }
  /* 사진이 놓이는 판. **팔레트를 따라간다** — 옛 따뜻한 회색(oklch)이 박혀 있어서
     차가운 색으로 바꾼 뒤에도 이 칸만 누렇게 남아 있었다. */
  .vcard-img {
    aspect-ratio: 16/10; position: relative;
    background:
      repeating-linear-gradient(135deg, var(--c-line) 0 1px, transparent 1px 12px),
      linear-gradient(180deg, var(--c-field) 0%, var(--c-surface-2) 100%);
    display: grid; place-items: center;
  }
  /* 사진은 칸을 꽉 채운다. 사진 배경이 카드 배경과 같은 계열이라 이어져 보인다. */
  .vcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vcard-img .ph {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--c-mute);
    background: rgba(255,255,255,0.7); padding: 4px 8px; border-radius: 6px;
  }
  /* 순위 배지. EV 태그와 나란히 왼쪽 위에 놓인다. */
  .vcard-rank {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    /* 강조 바탕 위 글자는 팔레트가 정한 짝(--c-on-pri)을 따른다. 여기만 따로
       잉크를 박아 두면 팔레트를 바꿔도 이 배지만 옛 색으로 남는다. */
    background: var(--c-pri); color: var(--c-on-pri);
    font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px;
    letter-spacing: 0.02em;
  }
  /* 순위가 있으면 EV 태그는 그 오른쪽으로 밀린다. */
  .vcard-rank + .vcard-tag { left: 56px; }
  .vcard-tag {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--c-ink); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px;
    letter-spacing: 0.04em;
  }
  /* 카드가 뜨는 효과는 그대로 두되, 레일 안에서는 위아래 여백이 없어 잘린다.
     레일에 위쪽 여백을 줘서(.rank-track padding) 떠오를 자리를 만든다. */
  .vcard-tag.hot { background: var(--c-warn); }
  .vcard-tag.new { background: var(--c-good); }
  .vcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
  .vcard-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
  .vcard-trim { font-size: 12px; color: var(--c-mute); }
  .vcard-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--c-line); }
  .vcard-price { display: flex; align-items: baseline; gap: 4px; }
  /* **1원 단위를 지운 어림값이다**(명세 §18) — `월 70만원대~`. 원 단위로 적으면
     확정 견적처럼 읽히는데, 실제 조건은 전화로 정하므로 통화가 "왜 다르냐" 로
     시작하게 된다. 글자가 길어져 22px 에서 16px 로 내렸다. */
  .vcard-price .amt { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
  /* 밝은 바탕 위에서는 **강조색을 글자로 쓰지 않는다** — 라임은 흰 카드 위에서
     안 보인다. 같은 계열의 어두운 색(`--c-pri-ink`)이 그 자리를 맡는다. */
  .vcard-cta { font-size: 12px; font-weight: 700; color: var(--c-pri-ink); }

  /* ---------- compare table ---------- */
  .compare-wrap { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; }
  table.compare { width: 100%; border-collapse: collapse; }
  table.compare th, table.compare td { padding: 18px 22px; text-align: left; vertical-align: top; }
  table.compare thead th { background: var(--c-line-2); font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
  table.compare thead th.pri { background: var(--c-pri); color: var(--c-on-pri); }
  table.compare tbody tr { border-top: 1px solid var(--c-line); }
  table.compare tbody td { font-size: 14px; }
  table.compare td.cat { font-weight: 700; color: var(--c-ink); width: 22%; }
  table.compare td.tag-good::before { content: '○'; color: var(--c-good); margin-right: 6px; font-weight: 700; }
  table.compare td.tag-bad::before { content: '×'; color: var(--c-warn); margin-right: 6px; font-weight: 700; }

  /* ---------- process ---------- */
  .proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .proc-step {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
    padding: 24px; position: relative;
  }
  .proc-step .n {
    width: 36px; height: 36px; border-radius: 50%; background: var(--c-pri-soft); color: var(--c-pri-ink);
    display: grid; place-items: center; font-weight: 800; margin-bottom: 16px;
  }
  .proc-step h4 { margin: 0 0 6px; font-size: 16px; letter-spacing: -0.01em; }
  .proc-step p { margin: 0; color: var(--c-mute); font-size: 13px; line-height: 1.6; }

  /* ---------- reviews ---------- */
  /* 좌우 스크롤 레일. 후기가 늘어도 세로로 길어지지 않는다.
     스크롤바를 숨기지 않는다 — 숨기면 더 있다는 걸 모르고 지나친다. */
  .reviews.rail {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: 2px; padding-bottom: 10px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .reviews.rail > .review { flex: 0 0 340px; scroll-snap-align: start; }
  @media (max-width: 720px) { .reviews.rail > .review { flex-basis: 82vw; } }
  .rail-nav { display: flex; gap: 8px; }
  .rail-nav button {
    width: 38px; height: 38px; border-radius: 50%; font-size: 20px; line-height: 1;
    background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink-2);
    transition: background .12s, color .12s, border-color .12s;
  }
  .rail-nav button:hover { background: var(--c-pri-soft); color: var(--c-pri-ink); border-color: var(--c-pri); }
  .rail-nav button[disabled] { opacity: .35; cursor: default; }
  .rail-nav button[disabled]:hover { background: var(--c-surface); color: var(--c-ink-2); border-color: var(--c-line); }
  @media (max-width: 720px) { .rail-nav { display: none; } }  /* 손가락으로 민다 */

  .review {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
    padding: 24px;
  }
  .stars { color: var(--c-warn); font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; }
  .review-body { font-size: 14px; line-height: 1.7; color: var(--c-ink-2); margin: 0 0 18px; text-wrap: pretty; }
  .review-foot { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-mute); }
  .av { width: 32px; height: 32px; border-radius: 50%; background: var(--c-line); display: grid; place-items: center; font-weight: 700; color: var(--c-ink-2); font-size: 12px; }

  /* ---------- partners ---------- */
  /* ---------- 금융사 워드마크 벨트 ----------
     두 줄이 서로 반대 방향으로 흐르고, 칩 하나하나가 미세하게 위아래로 떠다닌다.
     격자로 세워 두면 "우리 제휴사 명단" 처럼 읽히는데, 흐르게 두면 "이만큼 본다" 는
     인상에 가까워진다. 로고 이미지가 아니라 **글자**다(상표 이미지는 별개 허락이 필요). */
  .partners { display: grid; gap: 14px; }
  .belt {
    overflow: hidden;
    /* 양 끝을 흐리게 잘라 화면 밖에서 흘러들어오는 것처럼 보이게 한다.
       이게 없으면 가장자리에서 칩이 뚝 잘려 애니메이션이 아니라 고장으로 보인다. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .belt-track {
    display: flex; gap: 14px; width: max-content;
    animation: belt-slide 46s linear infinite;
  }
  .belt.rev .belt-track { animation-direction: reverse; }
  /* 읽고 싶은 사람은 올려두면 멈춘다. 마우스가 없는 기기에서는 그냥 계속 흐른다. */
  .belt:hover .belt-track, .belt:focus-within .belt-track { animation-play-state: paused; }
  /* 세트를 두 번 넣고 절반만 움직인다 → 되돌아가는 순간이 눈에 안 보인다. */
  @keyframes belt-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .partner {
    flex: 0 0 auto;
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
    padding: 20px 26px; text-align: center; font-family: 'JetBrains Mono', monospace;
    color: var(--c-mute); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap;
    animation: partner-bob 7s ease-in-out infinite;
  }
  /* 전부 같은 박자로 뜨면 한 덩어리가 출렁이는 것처럼 보인다. 어긋나게 띄운다. */
  .belt-track .partner:nth-child(3n)   { animation-delay: -2.3s; }
  .belt-track .partner:nth-child(3n+2) { animation-delay: -4.7s; }
  @keyframes partner-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }

  /* ---------- faq ---------- */
  .faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 880px; margin: 0 auto; }
  .faq {
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .faq summary { padding: 18px 22px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; font-weight: 600; font-size: 15px; }
  .faq summary::-webkit-details-marker { display: none; }
  /* `Q.` 는 흰 카드 위에 놓인다 — **강조색을 글자로 쓰면 안 되는 자리**다.
     라임은 여기서 1.16:1 로 거의 안 보였다. */
  .faq summary .q-mark { color: var(--c-pri-ink); font-weight: 800; margin-right: 10px; }
  .faq summary .caret { transition: transform .2s; color: var(--c-mute); }
  .faq[open] summary .caret { transform: rotate(180deg); }
  .faq-body { padding: 0 22px 20px 50px; font-size: 14px; color: var(--c-ink-2); line-height: 1.7; }

  /* ---------- big CTA form ---------- */
  .cta-section { background: var(--c-navy); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
  .cta-section .accent-blob {
    position: absolute; right: -100px; top: -100px; width: 500px; height: 500px;
    background: radial-gradient(circle, var(--c-pri) 0%, transparent 60%);
    opacity: 0.5; pointer-events: none;
  }
  .cta-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; position: relative; }
  .cta-grid h2 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.025em; font-weight: 800; margin: 0 0 16px; line-height: 1.1; }
  .cta-grid h2 .pri { color: var(--c-pri); }
  .cta-grid .cta-sub { color: rgba(255,255,255,0.7); font-size: 16px; max-width: 460px; margin: 0 0 32px; }
  .cta-grid .pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
  .cta-form-card { background: var(--c-surface); color: var(--c-ink); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); }
  .cta-form-card h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
  .cta-form-card .help { font-size: 13px; color: var(--c-mute); margin-bottom: 22px; }
  /* 하단 CTA 는 **두 번째 폼이 아니라 초대장**이다. 누르면 히어로의 같은
     Quick Quote 가 열린다(로직을 두 벌로 만들지 않는다). */
  .cta-facts { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
  .cta-facts li { position: relative; padding-left: 24px; font-size: 14px; color: var(--c-ink-2); }
  .cta-facts li::before {
    content: '✓'; position: absolute; left: 0; top: 1px;
    width: 16px; height: 16px; border-radius: 50%; background: var(--c-good);
    color: #fff; font-size: 10px; display: grid; place-items: center;
  }

  .range-row { display: flex; align-items: center; gap: 12px; }
  .range-row input[type=range] { flex: 1; }
  .range-row .val { font-weight: 700; font-feature-settings: 'tnum'; min-width: 70px; text-align: right; }

  /* ---------- footer ---------- */
  footer.ft { background: var(--c-footer); color: rgba(255,255,255,0.6); padding: 56px 0 32px; font-size: 13px; }
  .ft-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
  .ft h5 { color: #fff; font-size: 13px; margin: 0 0 14px; letter-spacing: -0.005em; }
  .ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .ft-bot { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; }

  /* ---------- floating buttons ---------- */
  /* ---------- 상시 노출 CTA ----------
     데스크톱에는 따로 두지 않는다. 헤더가 sticky 라 우상단 "상담 신청" 이 스크롤
     내내 붙어 있어서, 우하단에 하나 더 두면 같은 일을 하는 버튼이 둘이 된다.
     모바일은 헤더 CTA 가 좁아 안 보이므로 아래 하단 바가 그 역할을 맡는다.
     (전화·카카오톡 버튼은 그 전에 뺐다 — 아직 없는 채널이라 아무 데도 안 간다.) */

  /* 우하단 말풍선. **채팅 위젯의 생김새만 빌린 버튼 묶음이다.**
     꼬리(tail)를 달지 않는다 — 꼬리가 있으면 누군가 말하는 것처럼 보이고, 저쪽에
     사람이 있다는 인상이 생긴다. 응대할 사람이 없으므로 그 인상을 만들면 안 된다. */
  .nudge {
    position: fixed; right: 20px; bottom: 24px; z-index: 44; width: 290px;
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: 18px; padding: 18px 18px 16px;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(12px) scale(.98);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22,.9,.3,1);
    /* 안 보이는 동안 클릭을 가로채면 안 된다 — 투명한 상자가 그 자리의 링크를
       먹어서, 눌리지 않는 이유를 아무도 알 수 없게 된다. */
    pointer-events: none;
  }
  .nudge.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .nudge-x {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
    border-radius: 50%; color: var(--c-mute); font-size: 17px; line-height: 1;
  }
  .nudge-x:hover { background: var(--c-line-2); color: var(--c-ink); }
  /* 말하는 주체를 밝힌다. **사람 이름이 아니라 브랜드 이름이다** — 저쪽에 상담원이
     앉아 있는 게 아니라는 걸 이 한 줄이 정한다. */
  .nudge-who { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .nudge-ava {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: var(--c-pri); color: #fff;
    display: grid; place-items: center;
    /* 숨 쉬듯 아주 약하게 움직인다. 정지해 있으면 그림처럼 보인다. */
    animation: ava-pulse 3.4s ease-in-out infinite;
  }
  .nudge-ava svg { width: 17px; height: 17px; }
  @keyframes ava-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,191,214,.45); }
    50%      { transform: scale(1.04); box-shadow: 0 0 0 7px rgba(47,191,214,0); }
  }
  .nudge-name { font-size: 12.5px; font-weight: 700; color: var(--c-ink-2); }

  .nudge-q {
    margin: 0 0 12px; font-size: 14.5px; font-weight: 700; line-height: 1.5;
    color: var(--c-ink); letter-spacing: -0.01em;
  }
  /* Quick Quote 재진입로(명세 §15). 버튼 둘 — 보고 있던 차로 바로 들어가거나,
     다른 차를 고르러 STEP 1 로 간다. 차 이름이 없으면 두 번째 버튼은 숨는다
     ("다른 차량" 은 기준이 되는 차가 있어야 뜻이 통한다). */
  .nudge-acts { display: flex; flex-direction: column; gap: 6px; }
  .nudge-cta {
    display: block; width: 100%; text-align: center;
    padding: 12px 16px; border-radius: 12px;
    background: var(--c-ink); color: #fff; font-size: 14px; font-weight: 700;
    transition: transform .12s, opacity .12s;
  }
  .nudge-cta:hover { transform: translateY(-1px); opacity: .92; }
  .nudge-alt {
    display: block; width: 100%; text-align: center;
    padding: 9px 16px; border-radius: 12px;
    color: var(--c-mute); font-size: 13px; font-weight: 600;
  }
  .nudge-alt:hover { color: var(--c-ink); background: var(--c-line-2); }
  .nudge-alt[hidden] { display: none; }

  /* 모바일 하단 신청 바. **모바일은 첫 화면에 폼이 없다** — 히어로가 1열로
     무너지면서 카피가 먼저 오고 폼이 아래로 밀린다. 여기가 실질적 진입점이다.
     기본은 보이는 상태다. 자바스크립트가 막혀도 CTA 는 있어야 한다. */
  .cta-bar { display: none; }

  /* success message */
  .toast {
    position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
    background: var(--c-ink); color: #fff; padding: 14px 22px; border-radius: 999px;
    box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600; z-index: 100;
    display: flex; gap: 10px; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast .ok { width: 22px; height: 22px; border-radius: 50%; background: var(--c-good); display: grid; place-items: center; font-size: 13px; }

  /* responsive */
  @media (max-width: 980px) {
    /* `padding: 0` 을 걸지 않는다. `.cta-grid` 는 `.wrap` 을 겸해서
       (`<div class="wrap cta-grid">`) 그 좌우 24px 여백을 같이 지워 버린다
       — 모바일에서 하단 CTA 글자가 화면 왼쪽 끝에 붙어 있던 원인이다.
       여백을 따로 쓰는 건 `.hero-img-grid` 뿐이라 바로 아래에서 정해 준다. */
    .hero-grid, .hero-img-grid, .cta-grid { grid-template-columns: 1fr !important; gap: 36px; }
    /* 모바일 히어로는 폼이 없어 짧다. 사진 위 카피만 남으므로 아래 여백을 줄인다. */
    .hero-dark .hero { padding: 48px 0 56px; }
    .hero-img-grid { padding: 56px 28px; }
    .vg { grid-template-columns: repeat(2, 1fr); }
    .rank-track .vcard { flex: 0 0 208px; }
    .proc, .reviews, .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ft-top { grid-template-columns: 1fr 1fr; }
    .nav { display: none; }
    .tel-mini { display: none; }
    /* 모바일에서는 하단 sticky 바가 진입점이다(명세 §28). 헤더에도 같은 버튼을
       두면 좁은 화면에 같은 일을 하는 것이 둘이 된다. */
    .hdr-quote { display: none; }

    .cta-bar {
      display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
      background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.6) blur(10px);
      border-top: 1px solid var(--c-line);
      /* 아이폰 홈 인디케이터에 버튼이 깔리지 않게 한다. */
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      transition: transform .25s cubic-bezier(.22,.9,.3,1);
    }
    .cta-bar .btn { width: 100%; padding: 15px 18px; font-size: 15px; }
    /* Quick Quote 가 열려 있거나 화면에 보이면 내려간다 — 같은 일을 하는 것이
       둘로 보이면 안 된다(명세 §14). */
    .cta-bar.hide { transform: translateY(120%); }
    body.has-cta-bar { padding-bottom: 78px; }

    /* ── 모바일 = 바텀시트 ────────────────────────────────────────────────
       **첫 화면에 폼을 보여주지 않는다**(명세 §12). 히어로는 카피뿐이고,
       화면 하단에 늘 떠 있는 고정 바를 눌러야 Quick Quote 가 올라온다.
       (히어로 안의 큰 버튼은 뺐다 — 고정 바와 같은 일을 하는 버튼이 한 화면에
        둘이었다.)
       데스크톱과 같은 노드다 — 상태도 로직도 한 벌이다. */
    .qq { display: none; }
    body.qq-open .qq {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      max-height: 92vh; overflow-y: auto;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      border-width: 1px 0 0;
      padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
      animation: qq-rise .26s cubic-bezier(.22,.9,.3,1);
    }
    @keyframes qq-rise { from { transform: translateY(14%); opacity: 0.4; } }
    /* 시트가 떠 있는 동안 뒤 페이지가 같이 스크롤되면 어디에 있었는지 잃는다. */
    body.qq-open { overflow: hidden; }
    body.qq-open .qq-scrim {
      display: block; position: fixed; inset: 0; z-index: 55;
      background: rgba(20,20,30,0.42);
    }
    .qq-close {
      display: block; position: absolute; top: 14px; right: 14px;
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--c-line-2); color: var(--c-mute); font-size: 19px; line-height: 1;
    }
    .qq-close:hover { color: var(--c-ink); }
    /* 닫기 버튼이 오른쪽 위를 차지하므로 제목줄을 그만큼 좁힌다 —
       안 그러면 '무료' 배지 위에 × 가 겹쳐 앉는다. */
    body.qq-open .quote-card-head { padding-right: 40px; }
    /* 시트에서는 카드 높이를 굳히지 않는다 — 화면 높이에 맞춰 늘고 준다. */
    .qq-body { min-height: 0; }
      /* 시트에서는 세로가 귀하다. 선택 줄의 여백을 줄인다. */
    .qq-rows { gap: 12px; }
    .seg button { min-height: 44px; font-size: 12.5px; }   /* 손가락은 34px 로 못 줄인다 */
    /* 말풍선은 하단 바 **위에** 얹는다. 화면이 좁아 폭을 넉넉히 쓰되, 본문을
       너무 덮지 않게 좌우 여백을 둔다. */
    .nudge {
      left: 16px; right: 16px; width: auto;
      bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
  }
  /* ── 모바일 콘텐츠 우선순위(명세 §17) ──────────────────────────────────
     파일럿의 핵심은 정보 전달이 아니라 **Quote Start → Lead** 다. 좁은 화면에서는
     전환에 가까운 것부터 오고, 읽는 데 오래 걸리는 것(렌트 vs 리스 비교표, 금융사
     로고 띠)은 뒤로 민다. **지우지는 않는다** — 필요한 사람은 끝까지 내려가면 있다.

     데스크톱은 이 규칙 밖이라 HTML 에 적힌 순서 그대로 나간다. 세로가 넉넉해
     굳이 바꿀 이유가 없고, 순서가 두 벌이면 어느 게 진짜인지 헷갈린다. */
  @media (max-width: 980px) {
    .flow { display: flex; flex-direction: column; }
    [data-flow="hero"]     { order: 1; }
    [data-flow="trust"]    { order: 2; }   /* 간단한 신뢰 요소 */
    [data-flow="vehicles"] { order: 3; }
    [data-flow="reviews"]  { order: 4; }   /* 후기가 이용 절차보다 먼저 */
    [data-flow="process"]  { order: 5; }
    [data-flow="faq"]      { order: 6; }
    [data-flow="compare"]  { order: 7; }   /* 큰 비교표 — 아래로 */
    [data-flow="finance"]  { order: 8; }   /* 금융사 띠 — 아래로 */
    [data-flow="apply"]    { order: 9; }
  }

  @media (max-width: 560px) {
    .vg { grid-template-columns: 1fr; }
    .proc, .reviews, .stats-grid { grid-template-columns: 1fr 1fr; }
    .partner { padding: 16px 20px; font-size: 11px; }
    section.sec { padding: 64px 0; }
  }

/* ---------- subpages ---------- */
.page-hero{padding:64px 0 48px;border-bottom:1px solid var(--c-line)}
.page-hero .sec-eyebrow{margin-bottom:10px}
.page-hero h1{margin:0 0 12px;font-size:clamp(30px,3.4vw,44px);letter-spacing:-0.025em;font-weight:800}
.page-hero p{margin:0;color:var(--c-ink-2);font-size:16px;max-width:560px}
.page-body{padding:56px 0 88px}
.prose{max-width:760px;font-size:15px;line-height:1.8;color:var(--c-ink-2)}
.prose h2{font-size:22px;letter-spacing:-0.015em;color:var(--c-ink);margin:40px 0 12px}
.prose h3{font-size:17px;color:var(--c-ink);margin:28px 0 8px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0}
.prose th,.prose td{border:1px solid var(--c-line);padding:10px 14px;text-align:left}
.prose th{background:var(--c-line-2);font-weight:700;color:var(--c-ink)}
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s,border-color .15s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--c-pri)}
.post-thumb{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,oklch(0.93 0.01 60) 0 1px,transparent 1px 12px),linear-gradient(180deg,oklch(0.97 0.005 80) 0%,oklch(0.93 0.01 60) 100%);display:grid;place-items:center}
.post-thumb .ph{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--c-mute);background:rgba(255,255,255,0.7);padding:4px 8px;border-radius:6px}
.post-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-cat{font-size:11px;font-weight:700;color:var(--c-pri-ink);background:var(--c-pri-soft);align-self:flex-start;padding:3px 8px;border-radius:6px;letter-spacing:0.02em}
.post-title{font-size:16px;font-weight:700;letter-spacing:-0.01em;color:var(--c-ink);line-height:1.4}
.post-excerpt{font-size:13px;color:var(--c-mute);line-height:1.6;flex:1}
.post-meta{font-size:12px;color:var(--c-mute);padding-top:10px;border-top:1px dashed var(--c-line)}
.notice-list{display:flex;flex-direction:column;gap:8px;max-width:880px}
.job-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.job-card h4{margin:0 0 4px;font-size:17px;letter-spacing:-0.01em}
.job-card .meta{font-size:13px;color:var(--c-mute)}
.crumb{font-size:13px;color:var(--c-mute);margin-bottom:16px}
.crumb a{color:var(--c-pri-ink);font-weight:600}
.logo-mark{background:var(--c-pri)}
@media(max-width:980px){.post-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.post-list{grid-template-columns:1fr}}
.ft a:hover{color:#fff}

.logo-lockup{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.sec-eyebrow{color:var(--c-pri-ink)}
.vcard-cta{color:var(--c-pri-ink)}

.row-3 .select{padding:0 8px;font-size:13px}
.select:disabled{opacity:0.5;background:var(--c-line-2)}