/* 데스크톱 전용 층. 모바일(앱 느낌)은 한 줄도 안 건드린다.
   QA 11기 실측 근거 = state/qa-260828/reports/ */

/* ═══ 0. 폭과 무관한 교정 ═══════════════════════════════════ */

/* 대비 미달 5건. .td-facts 2.87:1 · .td-card-f 3.11:1 · .how-stat-lab 3.11:1
   · .rd-ar 1.64:1 · 행 구분선 1.15:1 */
#top-deck .td-facts { color: #5C636B; }
#top-deck .td-card-f { color: #5C636B; }
#reads .rd-ar { color: #97A0AA; }
#top-deck .td-prow { border-top-color: #E1E7EE; }

/* 앵커 안전거리. 지금 0이라 마스트헤드(69px) 높이가 바뀌면 즉시 제목이 가려진다 */
#benefits, #cars, #problems, #trust, #reads, #contact { scroll-margin-top: 84px; }

/* 고아 낱말 4곳(.how-body 첫 줄의 16%, .ctd-keep 25%, .td-card-f 32%, .c-credit 34%) */
#top-deck h1, #top-deck h2, #cars h2, #problems h2, #trust h2, #reads h2, #contact h2 { text-wrap: balance; }
#top-deck p, #cars p, #problems p, #trust p, #reads p, #contact p { text-wrap: pretty; }

/* 901~1100px 에서 머리 메뉴가 사라지는데 햄버거도 없다. 1024 노트북에 나갈 문이 없었다 */
@media (max-width: 1100px) { .mag-menu-btn { display: inline-flex; } }

/* ═══ 1. 데스크톱 (1024px 이상) ═════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    /* 기둥 하나로. 지금은 1240 / 1200 / 1080 세 종류라 세로줄이 80px 어긋났다 */
    --dw: min(100% - 56px, clamp(1240px, 84vw, 1440px));
    /* 유동 활자. 지금은 1280과 2560의 렌더 수치가 한 글자도 안 달랐다 */
    --dt-h1: clamp(30px, 0.6rem + 2.3vw, 52px);
    --dt-h2: clamp(24px, 0.7rem + 1.25vw, 38px);
    --dt-h3: clamp(17px, 0.75rem + 0.45vw, 21px);
    --dt-sub: clamp(14px, 0.72rem + 0.34vw, 18px);
    --dt-body: clamp(14.5px, 0.8rem + 0.22vw, 17px);
  }

  /* ── 기둥 통일 ── */
  .mag-wrap,
  #top-deck .td-wrap,
  #cars .c-in,
  #problems .ans-in, #trust .how-in, #reads .rd-in,
  #contact .ctd-wrap,
  footer .container { width: var(--dw); max-width: var(--dw); margin-inline: auto; }

  /* ── 활자 승급 ── */
  #top-deck .td-hero-claim { font-size: var(--dt-h1); line-height: 1.18; letter-spacing: -.032em; }
  #top-deck .td-hero-sub { font-size: var(--dt-sub); line-height: 1.6; }
  #top-deck .td-svc-h h2, #top-deck .td-card-h h2 { font-size: var(--dt-h3); }
  #cars .c-h2, #problems .ans-title, #trust .how-title,
  #reads .rd-title, #contact .ctd-title { font-size: var(--dt-h2); line-height: 1.26; letter-spacing: -.032em; }
  #cars .c-sub, #problems .ans-sub, #trust .how-sub,
  #reads .rd-sub, #contact .ctd-sub { font-size: var(--dt-sub); line-height: 1.6; }
  #top-deck .td-pn, #problems .ans-tx, #reads .rd-t { font-size: var(--dt-body); }
  #trust .how-body { font-size: clamp(14px, 0.78rem + 0.2vw, 16px); line-height: 1.6; }
  #cars .c-name { font-size: clamp(15px, 0.82rem + 0.24vw, 18px); }
  #top-deck .td-facts { font-size: 13.5px; }

  /* 실적 숫자가 본문과 같은 체급이라 실적으로 안 읽혔다(셀 폭의 8.5%) */
  #trust .how-stat-grid dt { font-size: clamp(30px, 1rem + 1.5vw, 46px); letter-spacing: -.04em; }

  /* ── 서비스 격자: 칸 155px 에 아이콘 56px = 36% 채움, 경계도 호버도 없었다 ── */
  /* 격자를 가운데로 좁히면 구간 제목(왼쪽 끝)과 첫 아이콘이 1920에서 160px 어긋난다.
     칸에 타일이 생겼으므로 기둥 폭을 그대로 쓴다 */
  #top-deck .td-grid { gap: 12px; }
  #top-deck .td-cell {
    min-height: 116px; gap: 10px; padding: 16px 6px 14px;
    border-radius: 18px; background: #F7F8FB;
    border: 1px solid transparent;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  #top-deck .svc-ico { width: 68px; height: 68px; }
  #top-deck .td-cell b, #top-deck .td-cell span { font-size: 14px; }

  /* ── 가격표: 이름과 값 사이가 314~442px 비고, 굵은 숫자가 78px 흔들렸다 ── */
  #top-deck .td-plist { border-bottom: 1px solid #E1E7EE; }
  #top-deck .td-prow { padding-block: 14px; border-radius: 10px; transition: background .14s ease; }
  #top-deck .td-pv { font-size: 14px; }
  #top-deck .td-pv b { font-variant-numeric: tabular-nums; }
  /* 값 없는 7행이 일반 설명색과 완전히 같았다. 색을 흐리게 하면 대비가 깨지므로(2.65:1)
     색은 지키고 작은 칩으로 갈라 놓는다 */
  #top-deck .td-pv--ask {
    color: #646B75; font-style: normal; font-size: 12.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 100px; background: #F1F3F7;
  }

  /* ── 차량: 이 구간만 1080px 이라 혼자 80px 들어가 있었다 ── */
  /* 사진틀 폭은 --shot 이 격자 열까지 같이 몬다. width 를 따로 주면 안 맞는다 */
  #cars.v5 { --shot: clamp(150px, 12.5vw, 200px); }
  /* 틀 바탕(#F7F8FA)이 줄 바탕(#F4F6FA)과 2단계 달라 얇은 밝은 띠로 보였다.
     투명으로 두면 필러박스가 줄 바탕에 녹아 사진이 틀에 뜬 것처럼 안 보인다 */
  #cars .c-shot { background: transparent; box-shadow: none; }
  #cars .c-name { letter-spacing: -.02em; }
  /* 11종을 2열에 넣어 오른쪽 아래에 535x101 구멍이 났다. 접힘(5장)·펼침(11장) 양쪽을 편다 */
  #cars .c-list[data-collapsed] > .c-row:nth-child(5),
  #cars .c-list:not([data-collapsed]) > .c-row:last-child { grid-column: 1 / -1; }

  /* ── 세로 리듬: 패딩이 60/62, 60/62, 60/64 로 사실상 같았다 ── */
  #cars { padding-block: clamp(72px, 5vw, 104px); }
  #problems { padding-block: clamp(72px, 5vw, 104px); }
  #trust { padding-block: clamp(84px, 6vw, 124px); }
  #reads { padding-block: clamp(72px, 5vw, 104px); }
  #contact { padding-block: clamp(72px, 5vw, 104px) clamp(72px, 5vw, 104px); }

  /* 긴 줄이 한글 가독 한계(45자)의 1.2~2.3배였다 */
  #cars .c-basis, #cars .c-tabnote, .footer-disclaimer, .footer-info p { max-width: 62ch; }
}

/* ═══ 2. 눌러지는 것처럼 보이게 (마우스 있는 기기만) ═══════════
   차량 줄 호버가 밝기차 2% 하나뿐이었고, 신뢰·가이드 구간은 호버가 8곳 중 2곳뿐이었다 */
@media (hover: hover) and (min-width: 1024px) {
  #top-deck .td-cell:hover {
    background: #FFF; border-color: #DFE4EC;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgb(31 36 41 / .07);
  }
  #top-deck .td-prow:hover { background: #F7F8FB; }
  #cars .c-row { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  #cars .c-row:hover {
    transform: translateY(-2px);
    border-color: #DFD6FA;
    box-shadow: 0 10px 24px rgb(31 36 41 / .08);
  }
  #cars .c-row:hover .c-shot img { transform: scale(1.045); }
  #cars .c-shot img { transition: transform .3s ease; }
  #reads .rd-row:hover { background: #F7F8FB; }
  #reads .rd-row:hover .rd-ar { color: var(--c-pp, #6847E8); }
  #problems .ans-kk:hover, #reads .rd-ask:hover { filter: brightness(.96); }
}

/* ═══ 3. 스크롤에 맞춰 떠오르기 (지원하는 브라우저만) ═══════════ */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    #cars .c-row, #problems .ans-row, #trust .how-step, #reads .rd-row {
      animation: dsRise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes dsRise { from { transform: translateY(15px); } to { transform: none; } }
  }
}


/* ═══ 4. 규격 통일 (Q10 대조: 우리 모서리 6종·버튼 높이 6종, 당근 2종·리멤버 2종) ═══ */
@media (min-width: 1024px) {
  /* 머리의 각진 버튼(radius 0)과 히어로의 완전 알약(100px)이 한 화면에 같이 있었다.
     둘 다 12px 로 모은다. 알약은 도시 고르기 탭에만 남긴다 */
  .mag-go-btn, .mag-kakao-btn { border-radius: 12px; height: 40px; }
  #top-deck .td-btn { border-radius: 12px; height: 50px; }
  #top-deck .td-go, #cars .c-pick { border-radius: 10px; }

  /* 13칸을 1240px 에 균등분할해 간격이 95px 씩 벌어져 있었다(아정당은 좌측에 붙이고 1024px) */
  #top-deck .td-cats-in { justify-content: flex-start; gap: 4px; }

  /* 본문 한 줄이 60자를 넘었다. 아정당은 같은 15px 를 283px 칸에 가둔다 */
  #cars .c-sub, #problems .ans-sub, #trust .how-sub, #reads .rd-sub,
  #contact .ctd-sub, #top-deck .td-hero-sub { max-width: 52ch; }

  /* 브랜드와 무관한 초록 체크 4개가 순수 장식이었다 */
  #problems .ans-ck { color: var(--c-pp, #6847E8); }

  /* 히어로가 1240x262 배너 상자였다. 화면의 29% 뿐이고 제목이 자막처럼 얹혀 있었다 */
  #top-deck .td-hero-in { min-height: clamp(300px, 26vw, 420px); }
  #top-deck .td-hero img { object-position: 62% 58%; }
  /* 스톡 출처가 대비 8.94:1 로 또렷해 "남의 사진"을 자백하고 있었다. 읽히되 앞으로 안 나오게 */
  #top-deck .td-hero-cred { opacity: .55; font-size: 10px; }
}

/* ═══ 5. 대비 (폭과 무관, 모바일에도 같이 먹는다) ═══════════════
   흐린 회색 #8C939A 가 이름만 다른 토큰 4개로 83곳에 퍼져 있었다.
   흰 배경 3.11:1 · 회색 배경 2.87:1 로 둘 다 AA(4.5:1) 미달이고,
   그중에 주 내비게이션(서비스 분류 탭 11개)과 차량 값표 라벨 22개가 들어 있었다.
   #646B75 = 흰 5.38:1 · #f4f6fa 4.97:1 로 전부 통과한다 */
#top-deck { --k-mute: #646B75; }
#cars.v5 { --faint: #646B75; }
#problems, #trust, #reads { --c-dim: #646B75; }
#contact { --d-mute: #646B75; }

/* 페이지에서 가장 안 보이는 글자가 하필 "여기에 뭘 적으세요"였다(2.17:1) */
#contact .quote-form input::placeholder,
#contact .quote-form textarea::placeholder { color: #646B75; }

/* 입력칸 테두리 1.30:1. 흰 카드 위 흰 칸이라 경계가 없었다(비텍스트 기준 3:1) */
#contact .quote-form input, #contact .quote-form select, #contact .quote-form textarea { border-color: #8C939A; }

/* ⛔ 유령 단추. opacity 0 · pointer-events none 인데 탭 순서에 남아 있어
   키보드 손님의 마지막(135번째) 탭이 항상 안 보이는 곳에 멈췄다. Enter 를 누르면 카톡이 열린다 */
.form-in-view .kakao-fab, .hero-in-view .kakao-fab { visibility: hidden; }
.kakao-fab { transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease, visibility 0s linear .2s; }
.form-in-view .kakao-fab, .hero-in-view .kakao-fab { transition-delay: 0s, 0s, 0s, .2s; }

/* 펼침 단추가 포커스 시 화면 아래로 8px 잘렸다(탭 135회 중 유일) */
#cars .c-more { scroll-margin-block: 24px; }

/* ═══ 6. 남은 데스크톱 조판 ═════════════════════════════════ */
@media (min-width: 1024px) {
  /* 안심 카드 4장의 50~58%가 빈칸이었다. .ans-tx 에 flex 가 없어 max-content 로 쪼그라들었다.
     바로 아래 #reads .rd-t 에는 flex:1 1 auto 가 이미 있었다(같은 파일 안에 정답이 있었다) */
  #problems .ans-tx { flex: 1 1 auto; }

  /* 접수 폼이 858px 통짜 1열이라 이름 한 칸에 860px 를 줬다 */
  #contact .quote-form .form-field--half { grid-column: span 1; }

  /* 진행 방식 구간을 잉크 바탕으로 뒤집는다. 흰-회-흰-회 반복이라 세로 리듬이 없었다.
     자식을 하나씩 칠하지 않고 이 구간의 색 토큰만 갈아 끼운다(빠뜨리는 자리가 안 생긴다) */
  #trust {
    --c-ink: #FFFFFF;
    --c-ink2: #B6BEC9;
    --c-dim: #97A1AD;
    --c-line: #2E353F;
    --c-bg: #171B21;
    --c-card: #21262E;
    --c-pp: #A78BFF;
    --c-pp-bg: #2C2647;
    --c-sh: none;
    background: #171B21;
  }
  /* .how-no 는 color:#fff + background:var(--c-ink) 라 잉크를 흰색으로 바꾸면 흰 동그라미가 된다 */
  #trust .how-no { background: #3B424C; }
  #trust .how-cta { background: #6847E8; color: #FFF; }
  /* 1번 동그라미가 연보라 바탕에 흰 글자라 2.70:1 이었다 */
  #trust .how-step--you .how-no { background: #6847E8; }

  /* 알약이 폭 336px 로 늘어나 진행바처럼 보였다(높이의 16배). 격자 칸에서 늘어난 탓이다 */
  #trust .how-tag { justify-self: start; }
}

/* 알약이 336px 로 늘어나 진행바처럼 보였다. justify-self 로는 안 잡혀 폭을 직접 못 박는다 */
@media (min-width: 1024px) { #trust .how-tag { width: fit-content; } }

/* ═══ 7. 접수칸 옆 구멍 채우기 ═══════════════════════════════
   폼 카드 1026px 옆에 안내가 204px 뿐이라 821px 가 통짜 빈 회색이었다.
   손님이 사기를 걱정하는 자리이므로, 우리가 가진 유일한 3자 조회 가능 근거를 여기 둔다
   (지금까지 이 정보는 푸터에만 있었다) */
#contact .ctd-who, #contact .ctd-cnt { margin-top: 10px; }
#contact .ctd-reg { display: grid; gap: 9px; margin-top: 10px; }
#contact .ctd-reg > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: baseline; }
#contact .ctd-reg dt { color: var(--d-mute); font-size: 12px; font-weight: 600; letter-spacing: -.02em; }
#contact .ctd-reg dd { color: var(--d-ink, #1F2429); font-size: 13px; font-weight: 600; line-height: 1.45; }
#contact .ctd-regs { margin-top: 11px; padding-top: 10px; border-top: 1px solid #ECF0F4; color: var(--d-mute); font-size: 11.5px; line-height: 1.5; }
#contact .ctd-cnt-g { display: grid; gap: 12px; margin-top: 10px; }
#contact .ctd-cnt-g > div { display: grid; gap: 2px; }
#contact .ctd-cnt-g dt { font-family: "SUIT", sans-serif; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.04em; color: var(--d-ink, #1F2429); }
#contact .ctd-cnt-g dt em { margin-left: 2px; font-size: 12px; font-style: normal; font-weight: 700; color: var(--d-mute); }
#contact .ctd-cnt-g dd { color: var(--d-mute); font-size: 12.5px; line-height: 1.45; }

/* ═══ 8. 담았다는 안내가 손님 화면 밖에서 떴다 ══════════════════
   [data-cars-note] 는 #cars 안에 남는데 goToForm() 이 2,294px 를 내려가므로
   실측 위치가 y = -1807px(화면 밖)였다. 손님은 "담았습니다"를 절대 못 봤다 */
#cars [data-cars-note]:not([hidden]) {
  position: fixed; z-index: 90;
  left: 50%; bottom: 26px; transform: translateX(-50%);
  max-width: min(92vw, 560px); margin: 0;
  padding: 13px 18px; border-radius: 12px;
  background: #171B21; color: #fff;
  font-size: 13.5px; line-height: 1.45; font-weight: 600;
  box-shadow: 0 12px 30px rgb(16 19 26 / .28);
}
@media (prefers-reduced-motion: no-preference) {
  #cars [data-cars-note]:not([hidden]) { animation: dsToast .22s ease both; }
  @keyframes dsToast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
}