/* ==========================================================================
   오토클립(AUTOCLIP) 공식 홈페이지 - 공통 스타일시트
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, form, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
fieldset { border: none; }

/* ---- Design tokens ---- */
:root {
  --color-navy-900: #0b1f3a;
  --color-navy-800: #122a4d;
  --color-navy-700: #1a3a68;
  --color-blue-600: #2f6feb;
  --color-blue-500: #4285f4;
  --color-blue-50: #eef4ff;
  --color-orange-500: #ff6a2b;
  --color-red-600: #d62828;
  --color-orange-100: #ffe7da;
  --color-ink-900: #131722;
  --color-ink-700: #3c4356;
  --color-ink-500: #6b7284;
  --color-ink-300: #9aa1b4;
  --color-line: #e6e9f0;
  --color-bg: #f5f7fb;
  --color-white: #ffffff;
  --color-success: #1caa6b;
  --color-star: #ffb400;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(11, 31, 58, 0.06);
  --shadow-md: 0 10px 30px rgba(11, 31, 58, 0.10);
  --shadow-lg: 0 20px 50px rgba(11, 31, 58, 0.16);

  --container: 1180px;
  --header-h: 108px;
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
    "Apple SD Gothic Neo", sans-serif;
  color: var(--color-ink-900);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 44px;
}

section { padding: 88px 0; }
@media (max-width: 860px) {
  section { padding: 56px 0; }
}

.section-head { text-align: center; margin-bottom: 48px; }
.section-head .eyebrow {
  display: inline-block;
  color: var(--color-blue-600);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.eyebrow-float {
  display: inline-block;
  animation: eyebrowBob 2.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes eyebrowBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow-float { animation: none; }
}
.section-head h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  color: var(--color-navy-900);
  letter-spacing: -0.02em;
}
.section-head p {
  margin-top: 12px;
  color: var(--color-ink-500);
  font-size: 16px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-blue-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #2559c9; transform: translateY(-1px); }
.btn-accent {
  background: var(--color-orange-500);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 106, 43, 0.28);
}
.btn-accent:hover { background: #e85a1f; transform: translateY(-1px); }
.btn-outline {
  background: #fff;
  color: var(--color-navy-900);
  border: 1.5px solid var(--color-line);
}
.btn-outline:hover { border-color: var(--color-blue-600); color: var(--color-blue-600); }
.btn-ghost { background: transparent; color: var(--color-navy-900); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  /* 화이트 헤더 (2026-08-27) — 로고·메뉴·전화번호는 네이비로 표시 */
  background: #fff;
  border-bottom: 1px solid var(--color-line);
}
/* ---- 헤더 로고 자동 재생 애니메이션 (main.js 가 img 를 이 SVG 로 교체·구동) ---- */
/* 헤더 요소 전반을 기본 크기의 90% 로 조정 (2026-08-27) */
.brand-anim { height: calc(var(--header-h) * 0.9); width: auto; display: block; }
/* 화이트 헤더용 : 원래 은색(크롬) 그라데이션 대신 네이비 단색으로 그립니다. */
.brand-anim .emb-line { stroke: var(--color-navy-900); }
.brand-anim .emb-fill, .brand-anim .word { fill: var(--color-navy-900); }
/* raster 로고(logo.jpg)는 처음부터 숨겨 새로고침 순간의 깜빡임을 방지.
   main.js 가 이 img 를 벡터 SVG 로 즉시 교체합니다. (JS 미동작 시 아래 fallback) */
a.brand img.brand-logo { visibility: hidden; }
a.brand.no-js img.brand-logo { visibility: visible; }
/* 헤더 좌우 끝(로고 / 상담신청 버튼)을 아래 프로모션 슬라이더의 카드 시작선과 맞춥니다.
   .promo-viewport-wrap 과 완전히 같은 계산식을 씁니다. */
.site-header .container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  --hdr-w: min(1500px, calc(100vw - 40px));
  width: var(--hdr-w);
  max-width: none;
  margin: 0 auto;
  padding: 0 52px;
}
@media (max-width: 620px) {
  /* 모바일은 슬라이더도 화면을 넓게 쓰므로 헤더도 같이 넓게 씁니다. */
  .site-header .container { width: 100%; padding: 0 12px; }
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 800;
  font-size: 21px;
  color: #fff;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand .brand-logo {
  /* 헤더 높이를 꽉 채우고, 이미지의 상하 여백을 잘라내(object-fit) 로고를 크게 보여줍니다.
     헤더 배경이 로고 배경과 같은 색이라 좌우로 잘려나간 부분도 티가 나지 않습니다. */
  height: calc(var(--header-h) * 0.9);
  /* ⚠ 이 이미지는 화면에 보이지 않습니다. JS(initBrandLogo)가 SVG 로고로 바꿔치기하고,
     그전까지 자리만 잡아 두는 역할입니다. 그래서 폭을 SVG 와 똑같이 맞춰야 합니다.
     SVG 는 width:auto 라 viewBox 비율(2.189)만큼 벌어집니다. 폭이 다르면 로고가
     바뀌는 순간 헤더 폭이 달라져 메뉴가 옆으로 튑니다. */
  width: calc(var(--header-h) * 0.9 * 2.189);
  object-fit: cover;
  object-position: center 52%;
  display: block;
}
.brand .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--color-blue-600), var(--color-navy-800));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}
.brand .brand-sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-ink-500);
  letter-spacing: 0.12em;
  display: block;
}

/* 메뉴는 '로고와 오른쪽 영역 사이 남는 공간'의 한가운데에 놓입니다.
   예전엔 화면 정중앙에 절대배치하고 보정값(--nav-shift)으로 왼쪽으로 당겼는데,
   오른쪽 영역(검색란·전화번호·상담신청)의 폭이 바뀔 때마다 보정값을 다시 맞춰야 했고
   실제로 탭이 검색란 위로 겹치는 문제가 있었습니다. flex 로 남는 공간을 채우게 하면
   양옆 폭이 어떻게 바뀌든 자동으로 가운데를 잡고, 절대 겹치지 않습니다. */
.main-nav {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2px, 0.4vw, 8px);
}
.main-nav a {
  position: relative;
  padding: 11px clamp(7px, 0.62vw, 12px);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: clamp(13.5px, 0.95vw, 17px);
  white-space: nowrap;
  color: var(--color-navy-900);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
/* 가운데에서 좌우로 퍼지는 밑줄 */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-navy-900);
  opacity: 0;
  transition: left 0.25s ease, right 0.25s ease, opacity 0.25s ease;
}
.main-nav a:hover {
  color: var(--color-navy-900);
  background: rgba(11, 31, 58, 0.07);
  transform: translateY(-1px);
}
.main-nav a:hover::after {
  left: clamp(7px, 0.62vw, 12px);
  right: clamp(7px, 0.62vw, 12px);
  opacity: 1;
}
/* 현재 페이지(선택됨)는 채워진 알약 */
.main-nav a.active { color: #fff; background: var(--color-navy-900); }
.main-nav a.active::after { opacity: 0; }

.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-tel {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-navy-900); font-weight: 800;
  font-size: clamp(17px, 1.35vw, 22.5px); white-space: nowrap; letter-spacing: 0.01em;
}
/* 전화 수화기 아이콘 — 글자 색(네이비)을 그대로 따라가도록 currentColor 사용.
   hover 시 번호가 빨강으로 바뀌면 아이콘도 함께 바뀝니다. */
.header-tel-icon {
  width: 0.86em; height: 0.86em; flex-shrink: 0;
  fill: currentColor;
  /* 글자 기준선과 시각적으로 맞도록 아주 살짝 내림 */
  position: relative; top: 0.03em;
}
.header-tel:hover { color: var(--color-red-600); }

/* 헤더 차량 검색 — 화이트 헤더 위에서 읽히도록 연회색 필드.
   크기는 헤더 다른 요소와 같은 90% 스케일 기준. */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(195px, 16vw, 260px);
}
.header-search-icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--color-ink-500);
  pointer-events: none;
}
.header-search input {
  width: 100%;
  padding: 12px 16px 12px 38px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-line);
  background: #f2f4f8;
  color: var(--color-ink-900);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.header-search input::placeholder { color: var(--color-ink-500); font-weight: 500; white-space: pre; }
.header-search input:focus {
  outline: none;
  border-color: var(--color-navy-900);
  background: #fff;
}

/* 헤더 상담신청 CTA (2026-08-27 재디자인)
   - DESIGN.md 기준: 주행동(主行動) 버튼은 '실행 블루', 레드는 한정이벤트 배너 전용.
     화이트 헤더로 바뀌면서 레드는 경고처럼 튀어 보여 블루로 정리했습니다.
   - 말풍선 이모지를 반투명 원형 배지에 담아 '상담'이라는 행동을 한눈에 보이게 함.
   - 그라데이션·글래스 효과는 DESIGN.md에서 지양하므로 단색 + 저고도 그림자로 마감. */
.btn-header-cta {
  padding: 13px 24px 13px 15px;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--color-blue-600);
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 111, 235, 0.30);
}
.btn-header-cta .cta-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  font-size: 14px;
  line-height: 1;
  /* 이모지는 색이 있는 폰트로 그려지므로 텍스트 렌더링 보정 */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.btn-header-cta:hover {
  background: #2559c9;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(47, 111, 235, 0.40);
}
.btn-header-cta:active { transform: translateY(0); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  height: 22px;
  justify-content: center;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--color-navy-900); border-radius: 2px; }

@media (max-width: 1300px) {
  :root { --header-h: 84px; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .brand .brand-logo { height: calc(var(--header-h) * 0.9); }
  .btn-header-cta { padding: 10px 17px 10px 11px; font-size: 12.5px; gap: 7px; }
  .btn-header-cta .cta-emoji { width: 22px; height: 22px; font-size: 12px; }
  .header-search { width: clamp(160px, 26vw, 260px); }
  .header-search input { padding: 9px 13px 9px 34px; font-size: 12.5px; }
  .main-nav.open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    /* 데스크톱 .main-nav 는 translate(-50%,-50%) 로 헤더 정중앙에 놓입니다.
       모바일 드롭다운에서는 그 변환을 반드시 풀어야 합니다. 안 그러면 패널이
       자기 크기의 절반만큼 위·왼쪽으로 밀려서 메뉴 위쪽 항목이 화면 밖으로 잘립니다. */
    transform: none;
    background: #fff;
    flex-direction: column;
    padding: 12px;
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
  }
  .main-nav.open a { width: 100%; padding: 14px 16px; font-size: 16px; color: var(--color-ink-900); }
  .main-nav.open a:hover, .main-nav.open a.active { background: rgba(11, 31, 58, 0.07); }
}
@media (max-width: 480px) {
  :root { --header-h: 72px; }
  .brand { gap: 10px; }
  .brand .brand-logo { height: calc(var(--header-h) * 0.9); }
  .btn-header-cta { padding: 8px 13px 8px 9px; font-size: 12px; gap: 6px; }
  .btn-header-cta .cta-emoji { width: 20px; height: 20px; font-size: 11px; }
  /* 아주 좁은 화면에서는 검색란을 숨겨 로고/버튼 자리를 확보합니다. */
  .header-search { display: none; }
}

/* ---- Breadcrumb / Page header ---- */
.page-hero {
  background: linear-gradient(160deg, var(--color-navy-900), var(--color-navy-700));
  color: #fff;
  padding: 64px 0 56px;
}
.page-hero .eyebrow { color: #9fc0ff; font-weight: 700; font-size: 14px; margin-bottom: 10px; display:block; }
.page-hero h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.02em; }
.page-hero p { margin-top: 14px; color: #cddaf5; font-size: 16px; max-width: 640px; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: #9fb3d9; margin-bottom: 18px; }
.breadcrumb a:hover { color: #fff; }

/* ---- Friendly pastel sub-page banner ---- */
.page-hero--friendly { position: relative; color: #1f2b45; background: none; overflow: hidden; padding: 36px 0 76px; }
.page-hero--friendly .container { position: relative; }
.page-hero--friendly + section { padding-top: 44px; }
.page-hero--friendly .ph-copy { max-width: 560px; position: relative; z-index: 3; }
.page-hero--friendly .breadcrumb { color: inherit; opacity: .72; margin-bottom: 14px; }
.page-hero--friendly .breadcrumb a { color: inherit; }
.page-hero--friendly .eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
.page-hero--friendly h1 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; color: inherit; }
.page-hero--friendly p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; max-width: 540px; opacity: .92; color: inherit; }

.page-hero--friendly::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
}
.pf-a::before { background: linear-gradient(to bottom, rgba(245,247,251,0) 76%, #f5f7fb 100%), linear-gradient(135deg, #e9f2ff 0%, #eafaf4 100%); }
.pf-b::before { background: linear-gradient(to bottom, rgba(245,247,251,0) 76%, #f5f7fb 100%), linear-gradient(135deg, #e8f8ef 0%, #eef4ff 100%); }
.pf-c::before { background: linear-gradient(to bottom, rgba(245,247,251,0) 76%, #f5f7fb 100%), linear-gradient(135deg, #fff2ea 0%, #ffeef4 100%); }
.pf-d::before { background: linear-gradient(to bottom, rgba(245,247,251,0) 76%, #f5f7fb 100%), linear-gradient(135deg, #f0ecff 0%, #eaf3ff 100%); }
.pf-e::before { background: linear-gradient(to bottom, rgba(245,247,251,0) 76%, #f5f7fb 100%), linear-gradient(135deg, #eaf6f7 0%, #eef2ff 100%); }
.pf-a { color: #1b3564; } .pf-a .eyebrow { background: #dbe8ff; color: #2a5fd0; } .pf-a p { color: #4a5a7a; }
.pf-b { color: #12463a; } .pf-b .eyebrow { background: #d3f2e2; color: #188a5a; } .pf-b p { color: #3f6357; }
.pf-c { color: #6b3320; } .pf-c .eyebrow { background: #ffe0d0; color: #d1663a; } .pf-c p { color: #8a5a45; }
.pf-d { color: #2e2560; } .pf-d .eyebrow { background: #e2dcff; color: #5a45c0; } .pf-d p { color: #55507a; }
.pf-e { color: #123f45; } .pf-e .eyebrow { background: #cfeef0; color: #1a8f92; } .pf-e p { color: #3d6167; }

.pf-scene { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; max-width: 540px; pointer-events: none; z-index: 1; }
.pf-car { position: absolute; right: 0; top: 50%; transform: translateY(-50%); animation: pfbob 3.4s ease-in-out infinite; }
.pf-car img { width: 100%; display: block; filter: drop-shadow(0 9px 7px rgba(30,45,80,.22)); }
.pf-orb { position: absolute; border-radius: 50%; }
.pf-deco { position: absolute; overflow: visible; }
.pf-spk path { fill: currentColor; }
.pf-float { animation: pffloat 4.5s ease-in-out infinite; }
.pf-tw { animation: pftw 2.6s ease-in-out infinite; transform-origin: center; }
.pf-up { animation: pfup 3.4s ease-in infinite; }
@keyframes pfbob { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(-54%); } }
@keyframes pffloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes pftw { 0%,100% { transform: scale(.72) rotate(0); opacity: .5; } 50% { transform: scale(1.08) rotate(12deg); opacity: 1; } }
@keyframes pfup { 0% { transform: translateY(16px); opacity: 0; } 22% { opacity: 1; } 100% { transform: translateY(-48px); opacity: 0; } }
@media (max-width: 900px) {
  .pf-scene { display: none; }
  .page-hero--friendly p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-car, .pf-float, .pf-tw, .pf-up { animation: none; }
}

/* ---- Hero (home) ---- */
.hero {
  position: relative;
  background: radial-gradient(1200px 600px at 80% -10%, #1c3f75 0%, var(--color-navy-900) 55%, #081428 100%);
  color: #fff;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 76px;
}
@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
    padding-top: 44px;
    padding-bottom: 48px;
    gap: 32px;
  }
  .hero-stats { gap: 24px; }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 22px;
  color: #d9e6ff;
}
.hero h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.hero h1 em { color: #6fa1ff; font-style: normal; }
.hero p { margin-top: 18px; font-size: 17px; color: #c3d2ef; max-width: 520px; }
.hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-size: 24px; font-weight: 800; color: #fff; }
.hero-stats div span { font-size: 13px; color: #9fb3d9; }

/* ---- Promo banner slider (event banners, right-to-left auto slide) ---- */
.promo-slider { padding: 20px 0 32px; background: #fff; }
/* 상단 이벤트 슬라이더의 띠 폭 (2026-09-03 확대)
   화살표가 슬라이더 아래(.promo-nav)에 있어 옆자리를 비워 둘 필요가 없습니다.
   그래서 띠를 넓혔습니다. 안쪽 여백은 44px 로 두는데, 아래 .promo-viewport 가
   -44px 음수 마진을 쓰기 때문입니다. 이보다 작게 주면 뷰포트가 띠 밖으로
   삐져나와 페이지에 가로 스크롤이 생깁니다.
   카드 비율(16:10)은 그대로라 잘리는 곳 없이 커지기만 합니다.
   ※ 이 값을 바꾸면 아래 한정특가 슬라이더와 카드 시작선이 달라집니다.
     맞추려면 .hotdeal-carousel 쪽도 같은 값으로 고쳐야 합니다. */
.promo-viewport-wrap {
  --promo-w: min(1760px, calc(100vw - 24px));
  width: var(--promo-w);
  margin: 0 auto;
  padding: 0 44px;
}
.promo-viewport {
  overflow: hidden;
  /* 커진 카드가 잘리지 않도록 상하·좌우에 여유를 두고,
     같은 크기의 음수 마진으로 바깥 간격은 그대로 유지합니다. */
  padding: 26px 44px;
  margin: -26px -44px;
}
.promo-track {
  /* 카드의 offsetLeft를 트랙 기준으로 재기 위해 위치 기준점을 잡아둡니다. */
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.promo-track.centered-mode { align-items: center; }
.promo-card {
  position: relative;
  /* 가운데 카드를 확대(scale>1)하지 않고도 크게 보이도록, 레이아웃 폭 자체를 6% 키웁니다.
     scale 로 키우면 브라우저가 원래 크기로 래스터라이즈한 뒤 늘려서 이미지가 흐려집니다.
     (트랙에 will-change:transform 이 걸려 합성 레이어로 처리되기 때문) */
  flex: 0 0 calc((100% - 40px) / 3 * 1.06);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* 가운데 카드를 도드라지게 하는 방식 (2026-09-01 재조정)
   ⚠ 가운데를 scale(>1)로 키우지 마세요. 트랙에 will-change:transform 이 걸려
     합성 레이어로 처리되기 때문에, 원래 크기로 래스터라이즈한 뒤 늘려서
     이미지가 흐려집니다(원본 해상도가 충분해도 흐려집니다).
   그래서 이렇게 합니다.
   1) 카드의 **레이아웃 폭 자체**를 1.06 배로 키웁니다 (.promo-card 의 flex).
   2) 가운데는 transform 을 걸지 않습니다 → 원본 해상도 그대로, 선명함.
   3) 양옆만 scale(0.85)로 **줄입니다**. 축소는 흐려지지 않습니다.
   4) 커진 카드가 .promo-viewport 의 overflow:hidden 에 잘리지 않도록
      그쪽에 padding 26px + 같은 크기 음수 마진을 줬습니다.
   ※ main.js 의 위치 계산은 getComputedStyle().width(레이아웃 폭)로 재야 합니다.
     getBoundingClientRect().width 는 양옆의 축소분이 반영돼 어긋납니다. */
.promo-track.centered-mode .promo-card {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.85);
  opacity: 0.55;
}
.promo-track.centered-mode .promo-card.is-center {
  z-index: 2;                 /* 가운데 카드가 옆 카드 위로 오도록 */
  transform: none;            /* 확대하지 않습니다 — 레이아웃 폭이 이미 큰 값입니다 */
  opacity: 1;
}
.promo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.78) 100%);
  z-index: 1;
}
.promo-bg { position: absolute; inset: 0; z-index: 0; }

/* 완성된 배너 이미지를 쓰는 카드 (자체 문구가 있어 덧글씨/어두운 그라데이션 미적용)
   배너 배경이 흰색이라 흰 바탕 위에서는 카드 경계가 안 보여서 얇은 테두리로 윤곽을 잡아줍니다. */
.promo-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.promo-photo-link { position: absolute; inset: 0; z-index: 3; }
.promo-card-photo::after { display: none; }
.promo-card-photo { border: 1px solid var(--color-line); background: #fff; }

/* 디 올 뉴 아반떼 EVENT 오버레이 */
/* 아반떼 배너도 16:10 으로 다시 제작 → 치우침 없이 가운데 (2026-09-02) */
.promo-card-avante .promo-photo { object-position: center; }
/* 그랜저 배너: 16:10(1200×750)로 다시 제작 → 꽉 채우기(cover) */
.promo-card-grandeur .promo-photo { object-fit: cover; object-position: center; }
.promo-card-grandeur .avante-heart { top: 12%; right: 12%; }
/* 모델Y 배너: 16:10(1200×750)로 다시 제작 → 꽉 채우기(cover) */
.promo-card-modely .promo-photo { object-fit: cover; object-position: center; }
.promo-card-modely .avante-heart { top: 12%; right: 14%; }
/* 기아 EV3 배너: 16:10 → 꽉 채우기(cover) */
.promo-card-ev3 .promo-photo { object-fit: cover; object-position: center; }
.promo-card-ev3 .avante-heart { top: 12%; right: 14%; }
.promo-card-carnival .promo-photo { object-fit: cover; object-position: center; }
.promo-card-carnival .avante-heart { top: 12%; right: 14%; }
.promo-card-avante .avante-price {
  position: absolute; left: 5.5%; bottom: 7%; z-index: 2; margin: 0;
  color: #fff; font-weight: 800; font-size: clamp(14px, 1.55vw, 23px);
  letter-spacing: -0.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.promo-card-avante .avante-price strong { color: #ffe14d; font-size: 1.18em; }
.promo-card-avante .avante-cta {
  position: absolute; right: 5.5%; bottom: 7%; z-index: 2;
  display: inline-flex; align-items: center;
  background: #fff; color: #17223c; font-weight: 800;
  padding: clamp(7px, 0.9vw, 11px) clamp(13px, 1.4vw, 20px); border-radius: 999px;
  font-size: clamp(11px, 1.1vw, 15px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}
.promo-card-avante .avante-cta::after { content: "›"; font-weight: 900; margin-left: 4px; }
.avante-heart {
  position: absolute; z-index: 2; top: 13%; right: 24%;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #ff6f91, #ff4d6d);
  color: #fff; font-weight: 800;
  padding: 10px 18px; border-radius: 20px;
  box-shadow: 0 8px 18px rgba(255, 77, 109, 0.45);
}
.avante-heart { animation: avanteHeartPulse 1.4s ease-in-out infinite; }
.avante-heart svg { width: clamp(20px, 2vw, 30px); height: clamp(20px, 2vw, 30px); }
.avante-heart::after {
  content: ""; position: absolute; left: 22px; bottom: -9px;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 12px solid #ff4d6d;
}
.avante-heart-num { font-size: clamp(20px, 2vw, 30px); line-height: 1; min-width: 1.4em; text-align: center; }
@keyframes avanteHeartPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .avante-heart { animation: none; } }
.promo-bg-1 { background: repeating-linear-gradient(135deg, #14294d, #14294d 14px, #1c3f75 14px, #1c3f75 28px); }
.promo-bg-2 { background: repeating-linear-gradient(135deg, #0b1f3a, #0b1f3a 14px, #234a87 14px, #234a87 28px); }
.promo-bg-3 { background: repeating-linear-gradient(135deg, #7a3312, #7a3312 14px, #c9531f 14px, #c9531f 28px); }
.promo-bg-4 { background: repeating-linear-gradient(135deg, #0d3f32, #0d3f32 14px, #15805f 14px, #15805f 28px); }
.promo-bg-5 { background: repeating-linear-gradient(135deg, #262b3a, #262b3a 14px, #3d4359 14px, #3d4359 28px); }
.promo-bg-6 { background: repeating-linear-gradient(135deg, #1a2f52, #1a2f52 14px, #2f6feb 14px, #2f6feb 28px); }
.promo-content { position: relative; z-index: 2; padding: 22px; }
.promo-eyebrow { display: block; font-size: 12.5px; font-weight: 700; opacity: 0.85; margin-bottom: 8px; }
.promo-title { font-size: 19px; font-weight: 800; line-height: 1.35; }
.promo-cta { margin-top: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #fff; }
.promo-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.promo-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  color: var(--color-navy-900);
}
.promo-arrow:hover { border-color: var(--color-blue-600); color: var(--color-blue-600); }
.promo-counter { font-size: 13px; font-weight: 700; color: var(--color-ink-500); min-width: 44px; text-align: center; }
.promo-counter strong { color: var(--color-navy-900); }

@media (max-width: 980px) {
  .promo-card { flex-basis: calc((100% - 20px) / 2); }
  .promo-track { gap: 12px; }
}
@media (max-width: 620px) {
  .promo-card { flex-basis: 100%; }
  /* 모바일은 카드가 1장뿐이라 화살표 자리를 비워둘 필요가 없습니다. 화면을 넓게 씁니다. */
  .promo-viewport-wrap { width: 100%; padding: 0 12px; }
}

/* ---- Quote tool (비대면 간편 견적) ---- */
.quote-tool-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.quote-tool-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--color-navy-900); letter-spacing: -0.02em; }
.update-tag { font-size: 12.5px; font-weight: 700; color: var(--color-blue-600); background: var(--color-blue-50); padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap; }

/* 표 형태(라벨 열 + 구분선)로 구성합니다. 행 사이 가로선을 그려야 해서
   패널 자체의 padding/gap 은 없애고 각 줄이 자기 여백을 갖게 했습니다. */
.quote-filter-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.quote-filter-row { display: flex; align-items: center; gap: 0; padding: 16px 22px; }
.quote-filter-row + .quote-filter-row { border-top: 1px solid var(--color-line); }

/* 라벨 열: 폭을 고정하고 글자를 가운데 정렬 → 국산차/수입차/구매방식이 한 열에 정렬됩니다. */
.quote-row-label {
  flex: 0 0 96px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-ink-700);
  text-align: center;
}
/* 라벨 열과 선택 항목 사이 세로 구분선. 세 줄 모두 같은 위치라 칩 시작 x도 같아집니다. */
.quote-filter-row > .chip-row,
.quote-filter-row > .quote-option-wrap {
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--color-line);
  padding-left: 22px;
  align-self: stretch;
}

/* 브랜드 선택 줄(국산차/수입차)
   칩 묶음 전체가 라벨 아래로 밀리지 않도록 줄 자체는 줄바꿈하지 않고(nowrap),
   칩 묶음만 안에서 줄바꿈하게 해서 넘어간 칩도 첫 칩과 같은 x에 정렬됩니다. */
/* 라벨은 칩이 몇 줄이든 그 줄 전체의 세로 한가운데에 놓입니다.
   (수입차처럼 두 줄이면 두 줄을 합친 높이의 중앙) */
.quote-brand-row { flex-wrap: nowrap; align-items: center; }
.quote-brand-row .quote-row-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 하단 옵션 줄: 조건 / 계약기간 앞에도 같은 세로 구분선을 넣습니다. */
.quote-option-wrap { display: flex; align-items: center; flex-wrap: wrap; row-gap: 12px; }

/* ── 옵션 줄(차종+연료 / 구매방식+조건+계약기간)은 줄바꿈 없이 한 줄로 쭉 ──
   차종 줄은 칩이 13개(차종 6 + 연료 7)라 자리가 빠듯합니다.
   그래서 이 줄들의 칩만 글자·여백을 조금 줄여 한 줄에 들어가게 했습니다.
   "차종"·"연료" 같은 라벨 글자 크기는 건드리지 않았습니다.
   두 줄의 칩 크기를 같이 줄여야 패널 안에서 크기가 들쭉날쭉해 보이지 않습니다. */
.quote-option-row .quote-option-wrap {
  flex-wrap: nowrap;
  justify-content: flex-start;   /* 위 브랜드 줄과 같은 x에서 시작하도록 왼쪽 정렬 */
  gap: 0;
}
.quote-option-row .chip-row { flex-wrap: nowrap; gap: 6px; }
.quote-option-row .chip {
  padding: 8px 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* 화면이 좁아 한 줄에 다 못 넣는 구간에서는 원래대로 줄바꿈을 허용합니다.
   (안 그러면 칩이 패널 밖으로 삐져나갑니다) */
@media (max-width: 1120px) and (min-width: 781px) {
  .quote-option-row .quote-option-wrap { flex-wrap: wrap; }
  .quote-option-row .chip-row { flex-wrap: wrap; }
  /* 아랫줄로 밀린 묶음도 첫 칩과 같은 x에서 시작하게 여백·구분선을 없앱니다 */
  .quote-subgroup { margin-left: 0; padding-left: 0; border-left: none; }
}

.quote-subgroup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--color-line);
  align-self: stretch;
}
.quote-sub-label { font-size: 16px; font-weight: 800; color: var(--color-ink-700); white-space: nowrap; }

@media (max-width: 780px) {
  /* 좁은 화면에서는 세로 구분선을 없애고 라벨을 윗줄로 올립니다. */
  .quote-filter-row { flex-wrap: wrap; padding: 16px; }
  .quote-row-label { flex-basis: 100%; text-align: left; margin-bottom: 10px; }
  .quote-brand-row { flex-wrap: wrap; }
  .quote-brand-row .quote-row-label { justify-content: flex-start; }
  .quote-filter-row > .chip-row,
  .quote-filter-row > .quote-option-wrap { border-left: none; padding-left: 0; flex-basis: 100%; }
  .quote-option-wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .quote-subgroup {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
}

/* 브랜드 선택 칩 (로고 + 브랜드명 세로 배치)
   .brand-chip-mark 는 공식 로고 파일을 넣기 전까지 쓰는 임시 약자 배지입니다. */
.brand-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 8px;
  min-width: 72px;
  border-radius: 12px;
}
/* 약자 배지(로고 파일이 아직 없는 브랜드)와 실제 로고 이미지의 높이를 38px로 맞춰
   두 줄(국산차/수입차)의 브랜드명 위치가 어긋나지 않게 합니다. */
.brand-chip .brand-chip-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--color-line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-navy-900);
  transition: border-color 0.15s ease, color 0.15s ease;
}
/* 로고는 원형 테두리 없이, 가로세로 비율 그대로 영역 안 정중앙에 맞춰 넣습니다. */
.brand-chip img {
  width: 52px;
  height: 38px;
  object-fit: contain;
  object-position: center;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.brand-chip-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.brand-chip.active .brand-chip-mark,
.brand-chip:hover .brand-chip-mark { border-color: var(--color-blue-600); color: var(--color-blue-600); }
/* 선택되지 않은 브랜드 로고는 살짝 흐리게, 선택/마우스오버 시 또렷하게 */
.brand-chip img { filter: opacity(0.88); }
.brand-chip.active img, .brand-chip:hover img { filter: none; transform: scale(1.04); }

/* 전체차량 페이지 차량명 검색란 (필터 표 안에 들어감) */
.vh-search { position: relative; display: flex; align-items: center; width: clamp(220px, 30vw, 340px); }
.vh-search-icon {
  position: absolute; left: 15px; width: 19px; height: 19px;
  color: var(--color-ink-500); pointer-events: none;
}
.vh-search input {
  width: 100%;
  padding: 12px 18px 12px 42px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-line);
  background: #fff;
  color: var(--color-ink-900);
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.15s ease;
}
.vh-search input::placeholder { color: var(--color-ink-300); font-weight: 500; }
.vh-search input:focus { outline: none; border-color: var(--color-blue-600); }
@media (max-width: 780px) {
  .vh-search { width: 100%; }
}

.quote-empty {
  text-align: center;
  padding: 56px 20px;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.quote-empty .icon { font-size: 38px; margin-bottom: 12px; }
.quote-empty p { color: var(--color-ink-500); font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.quote-empty strong { color: var(--color-navy-900); }

.quote-carousel { display: flex; align-items: center; gap: 14px; }
.quote-viewport { overflow: hidden; flex: 1; }
.quote-track { display: flex; gap: 20px; transition: transform 0.4s ease; }
.quote-arrow { flex-shrink: 0; }

.quote-car-card {
  flex: 0 0 calc((100% - 60px) / 4);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.quote-car-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #dde6f7, #eef2fb);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-car-media svg { width: 56%; opacity: 0.85; }
.quote-car-stock {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  background: var(--color-orange-500);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
.quote-car-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.quote-car-name { font-size: 15.5px; font-weight: 800; color: var(--color-navy-900); }
.quote-car-name span { font-weight: 700; color: var(--color-ink-500); font-size: 13px; margin-right: 6px; }
.quote-car-range { font-size: 12.5px; color: var(--color-ink-500); }
.quote-car-monthly { font-size: 13px; color: var(--color-ink-500); }
.quote-car-monthly strong { font-size: 20px; font-weight: 800; color: var(--color-blue-600); margin: 0 2px; }

@media (max-width: 980px) {
  .quote-car-card { flex-basis: calc((100% - 20px) / 2); }
  .quote-track { gap: 12px; }
}
@media (max-width: 620px) {
  .quote-car-card { flex-basis: 100%; }
}

/* ---- Hot deals (이번주 한정 특가) ---- */
.hot-deals-section {
  position: relative;
  overflow: hidden;
  padding: 56px 0 60px;
  color: #fff;
  background:
    radial-gradient(1100px 480px at 50% 64%, rgba(72, 112, 196, 0.30) 0%, transparent 66%),
    linear-gradient(160deg, #0a0e1a 0%, #141d34 50%, #0a0e1a 100%);
}
/* 가장자리를 살짝 어둡게(비네트) 해서 가운데 카드에 시선이 모이게 */
.hot-deals-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 50% 56%, transparent 42%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
  z-index: 0;
}
.hot-deals-section .container { position: relative; z-index: 2; }

/* 배경 빗금(115deg 줄무늬)을 따라 아래→위로 흐르는 SALE 워터마크.
   글자를 빗금과 같은 기울기(-65deg)로 눕히고, 그 축을 따라 이동시킵니다. */
.hotdeal-sale { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
/* 가로로 세운 SALE 글자가 아래에서 위로 떠오르며 빗방울처럼 맺혔다 사라집니다. */
.hotdeal-sale span { position: absolute; bottom: -10px; }
.hotdeal-sale i {
  display: block;
  font-family: "Baloo 2", "Pretendard", sans-serif;   /* 둥글둥글 귀여운 폰트 */
  font-style: normal;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 78px);
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.09);                   /* 은은한 워터마크 */
  -webkit-text-stroke: 0;
  animation: saleDrop 7s ease-in infinite;
}
.hotdeal-sale span:nth-child(1) { left: 4%; }
.hotdeal-sale span:nth-child(1) i { animation-duration: 8.5s; animation-delay: -2s; }
.hotdeal-sale span:nth-child(2) { left: 18%; }
.hotdeal-sale span:nth-child(2) i { animation-duration: 7.2s; animation-delay: -5s; }
.hotdeal-sale span:nth-child(3) { left: 33%; }
.hotdeal-sale span:nth-child(3) i { animation-duration: 9s; animation-delay: -0.8s; }
.hotdeal-sale span:nth-child(4) { left: 48%; }
.hotdeal-sale span:nth-child(4) i { animation-duration: 7.8s; animation-delay: -3.6s; }
.hotdeal-sale span:nth-child(5) { left: 63%; }
.hotdeal-sale span:nth-child(5) i { animation-duration: 8.8s; animation-delay: -6.2s; }
.hotdeal-sale span:nth-child(6) { left: 78%; }
.hotdeal-sale span:nth-child(6) i { animation-duration: 7.5s; animation-delay: -1.6s; }
.hotdeal-sale span:nth-child(7) { left: 91%; }
.hotdeal-sale span:nth-child(7) i { animation-duration: 8.2s; animation-delay: -4.4s; }
/* 아래에서 맺히듯 나타났다가 위로 올라가며 사라짐 */
@keyframes saleDrop {
  0%   { transform: translateY(40px) scale(0.94); opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 0.55; }
  100% { transform: translateY(-460px) scale(1.05); opacity: 0; }
}
@media (max-width: 700px) {
  @keyframes saleDrop {
    0%   { transform: translateY(30px) scale(0.94); opacity: 0; }
    18%  { opacity: 1; }
    70%  { opacity: 0.55; }
    100% { transform: translateY(-300px) scale(1.05); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hotdeal-sale i { animation: none; opacity: 0.08; }
}
.hotdeal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  /* 넓어진 캐러셀과 같은 폭으로 늘리고, 화살표(38px)+간격(14px)만큼 안쪽으로
     들여서 제목·카운트다운을 카드 양쪽 끝라인에 맞춥니다. */
  --hd-w: min(1500px, calc(100vw - 40px));
  width: var(--hd-w);
  margin-left: calc((100% - var(--hd-w)) / 2);
  padding: 0 52px;
  box-sizing: border-box;
}
.hotdeal-title { display: flex; flex-direction: column; gap: 10px; }
.hotdeal-eyebrow {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px;
  color: #ffd7d0;
  background: rgba(255, 91, 91, 0.16);
  border: 1px solid rgba(255, 91, 91, 0.45);
  padding: 5px 13px; border-radius: 999px;
}
.hotdeal-head h2 {
  font-size: clamp(26px, 3.6vw, 38px); font-weight: 900; letter-spacing: -0.02em;
  text-shadow: 0 2px 26px rgba(255, 91, 91, 0.22);
}
.hotdeal-head h2 .hd-accent {
  color: var(--color-orange-500);
}

.countdown { display: flex; align-items: center; gap: 6px; }
.countdown-box {
  min-width: 42px;
  height: 42px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #12151d;
  font-weight: 800;
  font-size: 17px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  font-variant-numeric: tabular-nums;
}
.countdown-box.day { width: auto; border-color: #ff4b4b; color: #ff4b4b; font-size: 15px; }
.countdown-sep { font-weight: 800; font-size: 18px; color: #fff; opacity: 0.6; }

.hotdeal-carousel {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 컨테이너(1180px)를 벗어나 양옆 여백까지 사용해, 카드 크기는 3개 노출 때만큼
     크게 유지하면서 4개를 보여줍니다. */
  --hd-w: min(1500px, calc(100vw - 40px));
  width: var(--hd-w);
  margin-left: calc((100% - var(--hd-w)) / 2);
}
/* 위/아래 여백을 둬서 카드 hover(위로 떠오름)·그림자가 잘리지 않게 함 */
.hotdeal-viewport { overflow: hidden; flex: 1; padding: 16px 0; }
/* 카드가 올려진 '무대' 느낌의 스포트라이트 글로우 */
.hotdeal-carousel { position: relative; }
.hotdeal-carousel::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 30px; right: 30px; top: -7%; bottom: -7%;
  background: radial-gradient(72% 92% at 50% 46%, rgba(98, 142, 236, 0.28) 0%, transparent 66%);
  filter: blur(8px);
}
.hotdeal-carousel .hotdeal-viewport,
.hotdeal-carousel .hotdeal-arrow { position: relative; z-index: 1; }
.hotdeal-track { display: flex; gap: 20px; transition: transform 0.45s ease; }
.hotdeal-arrow { flex-shrink: 0; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.hotdeal-arrow:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.16); }

.hotdeal-card {
  /* 넓어진 캐러셀 안에서 4개씩 노출 (카드 크기는 3개 노출 때와 비슷하게 유지) */
  flex: 0 0 calc((100% - 60px) / 4);
  display: flex;
  flex-direction: column;
  padding: 12px 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hotdeal-card[data-href] { cursor: pointer; }
.hotdeal-card[data-href]:focus-visible { outline: 3px solid #6fa1ff; outline-offset: 2px; }
.hotdeal-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 120, 120, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 91, 91, 0.14);
}
.hotdeal-info { padding: 4px 4px 14px; }
.hotdeal-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.hotdeal-price-original { font-size: 13px; color: rgba(255, 255, 255, 0.45); text-decoration: line-through; }
.hotdeal-price-deal { font-size: 14px; color: rgba(255, 255, 255, 0.85); margin-top: 2px; }
.hotdeal-price-deal strong { font-size: 22px; font-weight: 800; color: #ff5b5b; margin-right: 3px; }
.hotdeal-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: radial-gradient(closest-side, rgba(150, 180, 255, 0.18), rgba(255, 255, 255, 0) 74%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotdeal-media svg { width: 62%; opacity: 0.95; }
.hotdeal-hot-badge { position: absolute; z-index: 2; left: 12px; top: 12px; }
.hotdeal-stock-badge {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  background: var(--color-orange-500);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
.hotdeal-footer {
  text-align: right; margin-top: 22px;
  /* 헤더(카운트다운)·카드와 같은 오른쪽 라인에 끝을 맞춤 */
  --hd-w: min(1500px, calc(100vw - 40px));
  width: var(--hd-w);
  margin-left: calc((100% - var(--hd-w)) / 2);
  padding: 0 52px;
  box-sizing: border-box;
}
.hotdeal-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }

@media (max-width: 980px) {
  .hotdeal-card { flex-basis: calc((100% - 20px) / 2); }
  .hotdeal-track { gap: 12px; }
}
@media (max-width: 620px) {
  .hotdeal-card { flex-basis: 100%; }
  .hotdeal-head { flex-direction: column; align-items: flex-start; width: 100%; margin-left: 0; padding: 0; }
  .hotdeal-footer { text-align: center; }
}

/* ---- Delivery reviews (고객 출고 후기) ---- */
.delivery-review-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.delivery-review-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--color-navy-900); letter-spacing: -0.02em; }
.delivery-review-head p { margin-top: 8px; color: var(--color-ink-500); font-size: 14px; }
.dr-stats-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  box-shadow: var(--shadow-sm);
}
.dr-stats-box .stars { color: var(--color-star); font-size: 15px; letter-spacing: 2px; }
.dr-stats-box .score { font-size: 19px; font-weight: 800; color: var(--color-navy-900); margin-left: 6px; }
.dr-stats-divider { width: 1px; height: 26px; background: var(--color-line); }
.dr-stats-box .satisfaction { font-size: 13px; color: var(--color-ink-500); }
.dr-stats-box .satisfaction strong { color: var(--color-navy-900); font-size: 16px; margin-left: 4px; }

.dr-carousel { display: flex; align-items: center; gap: 14px; }
.dr-viewport { overflow: hidden; flex: 1; }
.dr-track { display: flex; gap: 20px; transition: transform 0.45s ease; }
.dr-arrow { flex-shrink: 0; }

.dr-card {
  flex: 0 0 calc((100% - 60px) / 4);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.dr-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #e9edf6, #e9edf6 10px, #eef1f8 10px, #eef1f8 20px);
}
/* 실제 출고 사진. 차량명 띠가 사진 위에 올라오도록 z-index 를 나눠둡니다. */
.dr-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.dr-media-title { z-index: 2; }
.dr-media-title {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(11, 31, 58, 0.74);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  padding: 10px 8px;
}
.dr-media-note {
  position: absolute;
  inset: 0;
  top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-300);
  font-size: 12px;
  font-weight: 700;
}
.dr-text {
  padding: 14px 16px 6px;
  font-size: 13.5px;
  color: var(--color-ink-700);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 70px;
}
.dr-meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 16px; font-size: 12px; color: var(--color-ink-500); }
.dr-views { display: flex; align-items: center; gap: 4px; }

@media (max-width: 980px) {
  .dr-card { flex-basis: calc((100% - 20px) / 2); }
  .dr-track { gap: 12px; }
}
@media (max-width: 620px) {
  .dr-card { flex-basis: 100%; }
}

/* ---- Quick link row (바로가기 아이콘 줄) ---- */
.quicklink-row { background: #fff; border-bottom: 1px solid var(--color-line); padding: 34px 0; }
.quicklink-grid { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quicklink-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  flex: 1 1 0;
  min-width: 100px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink-700);
  text-align: center;
}
.quicklink-icon {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  background: var(--color-blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quicklink-icon svg { width: 70px; height: 70px; display: block; }
.quicklink-item:hover .quicklink-icon {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(11, 31, 58, 0.14);
}

/* 항목별 배경 톤 (아이콘 색과 맞춘 파스텔) */
/* ---- 퀵링크 아이콘 호버 애니메이션 ----
   index.html 아이콘 SVG 안의 .ql-* 그룹을 호버 시에만 움직입니다.
   transform-box: fill-box 로 각 그룹의 자체 중심을 기준으로 회전/확대합니다. */
.quicklink-icon .ql-car, .quicklink-icon .ql-flag, .quicklink-icon .ql-globe,
.quicklink-icon .ql-bolt, .quicklink-icon .ql-batt, .quicklink-icon .ql-mag,
.quicklink-icon .ql-coin1, .quicklink-icon .ql-coin2, .quicklink-icon .ql-coin3,
.quicklink-icon .ql-coin-flip, .quicklink-icon .ql-spark {
  transform-box: fill-box;
  transform-origin: center;
}

/* 1~4. 차량이 왼쪽에서 들어오기 */
.quicklink-item:hover .ql-car { animation: qlCarIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes qlCarIn {
  from { transform: translateX(-13px); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translateX(0); opacity: 1; }
}

/* 1. 전기차 : 번개(충전) 깜빡이며 커졌다 작아지기 */
.quicklink-item:hover .ql-bolt { animation: qlBolt 0.9s ease-in-out 0.4s infinite; }
@keyframes qlBolt {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* 2. 하이브리드 : 배터리 게이지가 차오르기 (왼쪽 기준으로 늘어남) */
.quicklink-item:hover .ql-batt { transform-origin: left center; animation: qlBatt 1.3s ease-out 0.4s infinite; }
@keyframes qlBatt {
  0%       { transform: scaleX(0.18); }
  70%, 88% { transform: scaleX(1.55); }  /* 배터리 안쪽 끝까지 가득 */
  100%     { transform: scaleX(1.55); opacity: 0.35; }
}

/* 3. 국산차 : 태극기 360도 회전 */
.quicklink-item:hover .ql-flag { animation: qlSpin 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both; }
@keyframes qlSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* 4. 수입차 : 지구본이 좌우로 갸웃갸웃 돌아가기 */
.quicklink-item:hover .ql-globe { animation: qlGlobe 1.7s ease-in-out 0.35s infinite; }
@keyframes qlGlobe {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-14deg); }
  75%      { transform: rotate(14deg); }
}

/* 5. 견적비교 : 돋보기가 동그랗게 원을 그리며 살피기 */
.quicklink-item:hover .ql-mag { animation: qlMag 1.4s ease-in-out infinite; }
@keyframes qlMag {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2.6px, -2.6px); }
  50%      { transform: translate(0, -5.2px); }
  75%      { transform: translate(2.6px, -2.6px); }
}

/* 6. 초기비용 : 동전 3개가 아래부터 차례로 쌓이고, 마지막에 0원 동전이 뒤집히기 */
.quicklink-item:hover .ql-coin1 { animation: qlCoinDrop 0.3s ease-out 0s both; }
.quicklink-item:hover .ql-coin2 { animation: qlCoinDrop 0.3s ease-out 0.16s both; }
.quicklink-item:hover .ql-coin3 { animation: qlCoinDrop 0.3s ease-out 0.32s both; }
@keyframes qlCoinDrop {
  from { transform: translateY(-9px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.quicklink-item:hover .ql-coin-flip { animation: qlCoinFlip 0.7s ease-in-out 0.55s both; }
@keyframes qlCoinFlip {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0.07); }
  100% { transform: scaleX(1); }
}
.quicklink-item:hover .ql-coin-flip text { animation: qlCoinText 0.7s ease 0.55s both; }
@keyframes qlCoinText { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }

/* 7. 한정 특가 : % 깜빡임 + 반짝이 줄 3개가 순서대로 나타나기 */
.quicklink-item:hover .ql-pct { animation: qlBlink 0.85s ease-in-out infinite; }
@keyframes qlBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.quicklink-item:hover .ql-spark.s1 { animation: qlSpark 1.25s ease-in-out 0s infinite; }
.quicklink-item:hover .ql-spark.s2 { animation: qlSpark 1.25s ease-in-out 0.22s infinite; }
.quicklink-item:hover .ql-spark.s3 { animation: qlSpark 1.25s ease-in-out 0.44s infinite; }
@keyframes qlSpark {
  0%        { opacity: 0; transform: scale(0.4); }
  25%       { opacity: 1; transform: scale(1.1); }
  55%       { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .quicklink-item:hover .ql-car, .quicklink-item:hover .ql-bolt,
  .quicklink-item:hover .ql-batt, .quicklink-item:hover .ql-flag,
  .quicklink-item:hover .ql-globe, .quicklink-item:hover .ql-mag,
  .quicklink-item:hover .ql-coin1, .quicklink-item:hover .ql-coin2,
  .quicklink-item:hover .ql-coin3, .quicklink-item:hover .ql-coin-flip,
  .quicklink-item:hover .ql-coin-flip text, .quicklink-item:hover .ql-pct,
  .quicklink-item:hover .ql-spark { animation: none; }
}

.quicklink-item[data-tone="ev"] .quicklink-icon { background: #e2f6f0; }
.quicklink-item[data-tone="hybrid"] .quicklink-icon { background: #e6f7ec; }
.quicklink-item[data-tone="domestic"] .quicklink-icon { background: #e8effc; }
.quicklink-item[data-tone="import"] .quicklink-icon { background: #ecebfa; }
.quicklink-item[data-tone="compare"] .quicklink-icon { background: #e8f0fe; }
.quicklink-item[data-tone="cost"] .quicklink-icon { background: #fdf3da; }
.quicklink-item[data-tone="deal"] .quicklink-icon { background: #ffeae0; }
@media (max-width: 980px) {
  .quicklink-item { font-size: 15px; min-width: 88px; }
  .quicklink-icon { width: 84px; height: 84px; border-radius: 23px; }
  .quicklink-icon svg { width: 62px; height: 62px; }
}
@media (max-width: 700px) {
  .quicklink-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 8px; }
  .quicklink-item { min-width: 0; font-size: 13.5px; gap: 10px; }
  .quicklink-icon { width: 72px; height: 72px; border-radius: 20px; }
  .quicklink-icon svg { width: 53px; height: 53px; }
}
@media (max-width: 400px) {
  .quicklink-item { font-size: 12.5px; }
  .quicklink-icon { width: 64px; height: 64px; border-radius: 18px; }
  .quicklink-icon svg { width: 47px; height: 47px; }
}

/* Quick quote card */
.quick-card {
  background: #fff;
  color: var(--color-ink-900);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.quick-card h3 { font-size: 19px; font-weight: 800; color: var(--color-navy-900); }
.quick-card .quick-sub { font-size: 13px; color: var(--color-ink-500); margin-top: 4px; margin-bottom: 20px; }
.quick-card .form-row { margin-bottom: 14px; }
.quick-card .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-700);
  margin-bottom: 6px;
}
.quick-card .radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-card .radio-chip {
  flex: 1;
  min-width: 78px;
  text-align: center;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-700);
}
.quick-card .radio-chip input { display: none; }
.quick-card .radio-chip:has(input:checked) {
  border-color: var(--color-blue-600);
  background: var(--color-blue-50);
  color: var(--color-blue-600);
}
.quick-card .disclaimer { font-size: 11.5px; color: var(--color-ink-300); margin-top: 12px; line-height: 1.5; }

/* ---- Inputs ---- */
.field {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  background: #fbfcfe;
  font-size: 14.5px;
}
.field:focus { outline: none; border-color: var(--color-blue-600); background: #fff; }
textarea.field { resize: vertical; min-height: 110px; }
.field.error { border-color: #e0463d; }
.field-error-msg { color: #e0463d; font-size: 12.5px; margin-top: 5px; display: none; }
.field-error-msg.show { display: block; }

/* ---- Marquee / partner logos ---- */
.brand-strip { background: #fff; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.brand-strip .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 26px 24px; }
.brand-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--color-ink-500);
  font-size: 15px;
  opacity: 0.8;
}

/* ---- Cards: vehicle ---- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- 실시간 계약 현황 라이브 티커 ---- */
.live-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto 36px;
  padding: 13px 24px;
  background: linear-gradient(120deg, #0b1f3a, #14294d);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.live-ticker-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2ee6a8;
  flex-shrink: 0;
}
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ee6a8;
  animation: liveDotPulse 1.6s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 230, 168, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(46, 230, 168, 0); }
}
.live-ticker-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.22); flex-shrink: 0; }
.live-ticker-body {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-ticker-body strong { font-size: 15px; font-weight: 800; color: #fff; }
.live-ticker-body span { font-size: 14px; color: #c3d2ef; }
.live-ticker-status { margin-left: auto; font-size: 13.5px; font-weight: 800; color: #2ee6a8; flex-shrink: 0; }
/* 내용이 바뀔 때 아래에서 위로 교체되는 움직임 */
.live-ticker-body.swap { animation: tickerSwap 0.45s ease; }
@keyframes tickerSwap {
  0%   { transform: translateY(0); opacity: 1; }
  45%  { transform: translateY(-12px); opacity: 0; }
  55%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (max-width: 620px) {
  .live-ticker { padding: 11px 16px; gap: 10px; margin-bottom: 28px; }
  .live-ticker-body strong { font-size: 13.5px; }
  .live-ticker-body span { font-size: 12.5px; }
  .live-ticker-status { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .live-ticker-body.swap { animation: none; }
}

.car-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-line);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.car-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* 스크롤 등장 (아래→위). main.js initCardReveal 이 클래스를 붙였다 떼어 갑니다.
   등장이 끝나면 두 클래스 모두 제거되어 위의 hover transform 이 정상 동작합니다. */
.car-card.reveal-ready,
.review-card.reveal-ready { opacity: 0; transform: translateY(32px); }
.car-card.reveal-ready.reveal-in,
.review-card.reveal-ready.reveal-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .car-card.reveal-ready,
  .review-card.reveal-ready { opacity: 1; transform: none; }
}
.car-media {
  position: relative;
  /* 16:10. 제조사 홍보사진은 대부분 가로로 길어서, 4:3 으로 두면 좌우가 크게 잘려
     차의 앞뒤가 날아갑니다. 16:10 이면 잘리는 폭이 확 줄어듭니다. */
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #dde6f7, #eef2fb);
  display: flex;
  align-items: center;
  justify-content: center;
}
.car-media svg { width: 62%; opacity: 0.85; }

/* 실제 차량 사진. 사진이 없는 차량은 기존 차종 SVG 아이콘이 그대로 표시됩니다.
   cover + center : 원본 비율이 어떻든 카드를 꽉 채우고, 넘치는 부분은 상하좌우 균등하게
   잘라내므로 차가 항상 정중앙에 옵니다. 사진을 미리 4:3 으로 편집할 필요가 없습니다. */
.car-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
  z-index: 0;
}
/* --photo-tf 는 사진별 확대·이동값(main.js 의 carMedia 가 인라인으로 넣습니다). */
.car-photo { transform: var(--photo-tf, scale(1)); }
.car-card:hover .car-photo { transform: var(--photo-tf, scale(1)) scale(1.03); }
.car-photo { transition: transform 0.35s ease; }
.car-media { overflow: hidden; }
.car-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.badge {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: var(--color-ink-500);
}
.badge.hot { background: #ff4b4b; }
.badge.new { background: var(--color-blue-600); }
.badge.ev { background: var(--color-success); }
.badge.rank { background: var(--color-navy-900); }
.badge.soon { background: var(--color-ink-500); }
/* 차종별로 덧붙이는 배지 (main.js 의 EXTRA_BADGES) */
.badge.family { background: #ff8a3d; }
.badge.biz { background: var(--color-ink-500); }   /* 재고 한정과 같은 회색 */
.badge.vat { background: #0f8b6c; }
.badge.corp { background: #1a3a68; }
.badge.value { background: #e0662b; }

.car-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.car-brand { font-size: 12.5px; font-weight: 700; color: var(--color-ink-500); }
.car-name { font-size: 17px; font-weight: 800; color: var(--color-navy-900); }
.car-trim { font-size: 13px; color: var(--color-ink-500); }
.car-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.car-tags span {
  font-size: 11.5px;
  color: var(--color-ink-700);
  background: var(--color-bg);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
}
.car-price {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--color-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.car-price .label { font-size: 12px; color: var(--color-ink-500); }
.car-price .amount { font-size: 21px; font-weight: 800; color: var(--color-navy-900); }
.car-price .amount span { font-size: 13px; font-weight: 600; color: var(--color-ink-500); }
.car-actions { display: flex; gap: 8px; padding: 0 20px 20px; }
.car-actions .btn { flex: 1; }
/* 카드 전체가 상세 견적 링크 역할을 합니다 (main.js initCardNavigation) */
.car-card[data-href] { cursor: pointer; }
.car-card[data-href]:focus-visible { outline: 3px solid var(--color-blue-600); outline-offset: 2px; }

/* ---- Feature / why-us ---- */
.feature-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 30px 26px;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}
.feature-card .icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--color-blue-50);
  color: var(--color-blue-600);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature-card h3 { font-size: 17.5px; font-weight: 800; color: var(--color-navy-900); margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--color-ink-500); }

/* ---- OUR PROMISE 아이콘 (움직이는 이모지 스타일) ---- */
.feature-card .icon svg { width: 32px; height: 32px; display: block; }
.feature-card .icon .pm-badge, .feature-card .icon .pm-head,
.feature-card .icon .pm-gear, .feature-card .icon .pm-wrench,
.feature-card .icon .pm-ring, .feature-card .icon .pm-spark {
  transform-box: fill-box;
  transform-origin: center;
}
/* 1. 확약 배지 : 두근두근 + 반짝이 */
.feature-card .icon .pm-badge { animation: pmPulse 2.2s ease-in-out infinite; }
@keyframes pmPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.feature-card .icon .pm-spark { animation: pmTwinkle 1.6s ease-in-out infinite; }
.feature-card .icon .pm-spark.s2 { animation-delay: 0.8s; }
@keyframes pmTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.1) rotate(20deg); }
}
/* 2. 헤드셋 : 살짝 끄덕끄덕 + 마이크에서 소리 파동 */
.feature-card .icon .pm-head { animation: pmNod 2s ease-in-out infinite; }
@keyframes pmNod {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.4px); }
}
.feature-card .icon .pm-ring { animation: pmRing 1.8s ease-out infinite; opacity: 0; }
.feature-card .icon .pm-ring.r2 { animation-delay: 0.9s; }
@keyframes pmRing {
  0%   { transform: scale(0.4); opacity: 0.9; }
  80%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* 3. 렌치 : 조이듯 까딱까딱 + 기어 회전 */
.feature-card .icon .pm-wrench { animation: pmWrench 1.9s ease-in-out infinite; }
@keyframes pmWrench {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}
.feature-card .icon .pm-gear { animation: pmGear 7s linear infinite; }
@keyframes pmGear { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .feature-card .icon .pm-badge, .feature-card .icon .pm-spark,
  .feature-card .icon .pm-head, .feature-card .icon .pm-ring,
  .feature-card .icon .pm-wrench, .feature-card .icon .pm-gear { animation: none; }
}

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  position: relative;
}
.step .step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin-bottom: 16px;
}
.step h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; color: var(--color-navy-900); }
.step p { font-size: 13.5px; color: var(--color-ink-500); }

/* ---- 진행 단계 아이콘 (상담부터 출고까지, 움직이는 이모지 스타일) ----
   6초를 한 사이클로 1→2→3→4 순서대로 아이콘 타일이 통통 튀며 강조되고,
   각 아이콘 안의 디테일(연필·말풍선·도장·차량)은 계속 잔잔하게 움직입니다. */
.step-visual { position: relative; width: 64px; margin-bottom: 16px; }
.step-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: stepActive 6s ease-in-out infinite;
}
.step-icon svg { width: 46px; height: 46px; display: block; }
.step:nth-child(1) .step-icon { background: #e8f0fe; animation-delay: 0s; }
.step:nth-child(2) .step-icon { background: #e6f7ec; animation-delay: 1.5s; }
.step:nth-child(3) .step-icon { background: #ffeae0; animation-delay: 3s; }
.step:nth-child(4) .step-icon { background: #e2f6f0; animation-delay: 4.5s; }
.step-visual .step-num {
  position: absolute;
  top: -7px;
  left: 50px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  margin-bottom: 0;
  border: 2px solid #fff;
}
/* 순서 강조: 자기 차례(6초 중 1.5초)에 살짝 커졌다 돌아옵니다. */
@keyframes stepActive {
  0%        { transform: scale(1); box-shadow: 0 0 0 0 rgba(47, 111, 235, 0); }
  6%        { transform: scale(1.12); box-shadow: 0 8px 20px rgba(47, 111, 235, 0.22); }
  18%       { transform: scale(1.05); box-shadow: 0 4px 12px rgba(47, 111, 235, 0.12); }
  25%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47, 111, 235, 0); }
}

.step-icon .st1-pen, .step-icon .st2-b2, .step-icon .st2-dot,
.step-icon .st3-stamp, .step-icon .st3-mark, .step-icon .st4-car,
.step-icon .st4-shield, .step-icon .st4-line {
  transform-box: fill-box;
  transform-origin: center;
}

/* 1. 견적 신청 : 연필이 사각사각 움직이고 글줄이 순서대로 생김 */
.step-icon .st1-pen { transform-origin: left bottom; animation: st1Pen 0.7s ease-in-out infinite; }
@keyframes st1Pen {
  0%, 100% { transform: rotate(0) translate(0, 0); }
  50%      { transform: rotate(-5deg) translate(1px, -1px); }
}
.step-icon .st1-line { animation: st1Line 2.4s ease infinite; }
.step-icon .st1-line.l2 { animation-delay: 0.4s; }
.step-icon .st1-line.l3 { animation-delay: 0.8s; }
@keyframes st1Line {
  0%, 8%    { opacity: 0; }
  22%, 72%  { opacity: 1; }
  85%, 100% { opacity: 0; }
}

/* 2. 전문 상담 : 말풍선 점 3개가 타이핑하듯 통통, 답장 풍선은 두둥실 */
.step-icon .st2-dot { animation: st2Dot 1.1s ease-in-out infinite; }
.step-icon .st2-dot.d2 { animation-delay: 0.15s; }
.step-icon .st2-dot.d3 { animation-delay: 0.3s; }
@keyframes st2Dot {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-2.6px); }
}
.step-icon .st2-b2 { animation: st2Float 2.6s ease-in-out infinite; }
@keyframes st2Float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.8px); }
}

/* 3. 계약 : 도장이 쿵 내려찍히면 빨간 확인 도장이 나타남 */
.step-icon .st3-stamp { animation: st3Stamp 2.2s ease-in-out infinite; }
@keyframes st3Stamp {
  0%, 12%   { transform: translateY(0); }
  28%, 42%  { transform: translateY(11.5px); }
  60%, 100% { transform: translateY(0); }
}
.step-icon .st3-mark { animation: st3Mark 2.2s ease infinite; }
@keyframes st3Mark {
  0%, 30%   { opacity: 0; transform: scale(0.4); }
  40%       { opacity: 1; transform: scale(1.18); }
  50%, 88%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.4); }
}

/* 4. 인도 : 차가 살랑살랑 달리고 케어 방패가 두근두근 */
.step-icon .st4-car { animation: st4Bob 0.85s ease-in-out infinite; }
@keyframes st4Bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.6px); }
}
.step-icon .st4-line { animation: st4Line 0.85s ease-in-out infinite; }
.step-icon .st4-line.l2 { animation-delay: 0.25s; }
@keyframes st4Line {
  0%, 100% { opacity: 0.35; transform: translateX(1.5px); }
  50%      { opacity: 1; transform: translateX(-2px); }
}
.step-icon .st4-shield { animation: st4Shield 1.6s ease-in-out infinite; }
@keyframes st4Shield {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .step-icon, .step-icon .st1-pen, .step-icon .st1-line,
  .step-icon .st2-dot, .step-icon .st2-b2,
  .step-icon .st3-stamp, .step-icon .st3-mark,
  .step-icon .st4-car, .step-icon .st4-line, .step-icon .st4-shield { animation: none; }
}

/* ---- Testimonials ---- */
.review-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.review-stars { color: var(--color-star); font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.review-card p.quote { font-size: 14.5px; color: var(--color-ink-700); min-height: 84px; }
.review-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.review-meta .name { font-weight: 700; font-size: 13.5px; color: var(--color-navy-900); }
.review-meta .car { font-size: 12px; color: var(--color-ink-500); }

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(120deg, var(--color-blue-600), #1d4fc4);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 52px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.cta-band p { margin-top: 8px; color: #dbe6ff; font-size: 15px; }
.cta-band .btn-outline { background: #fff; border: none; color: var(--color-blue-600); }

/* ---- Footer ---- */
.site-footer { background: var(--color-navy-900); color: #b9c6e2; padding: 60px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: #fff; margin-bottom: 14px; }
.footer-logo { width: 205px; height: auto; display: block; margin: -6px 0 8px 0; }

/* ---- 프로모션 페이지 ---- */
.promo-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--color-line); margin: 4px 0 34px; }
.promo-tab { position: relative; padding: 0 2px 14px; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: var(--color-ink-500); background: none; cursor: pointer; }
.promo-tab.active { color: var(--color-navy-900); font-weight: 800; }
.promo-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--color-navy-900); border-radius: 3px; }

.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
@media (max-width: 900px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .promo-grid { grid-template-columns: 1fr; } }

.promo-poster { display: flex; flex-direction: column; }
.promo-poster-media {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  background: #0e1526; box-shadow: 0 10px 28px rgba(20, 35, 70, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.promo-poster-media:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(20, 35, 70, 0.22); }
.promo-poster-media > img { width: 100%; height: 100%; object-fit: cover; }
.promo-poster-go {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(20, 25, 40, 0.55); backdrop-filter: blur(3px);
  color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28);
}
.promo-poster-go em { font-style: normal; font-weight: 800; }
.promo-poster-cap { margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); font-size: 15px; font-weight: 700; color: var(--color-blue-600); }
.promo-empty { text-align: center; color: var(--color-ink-500); padding: 60px 0; font-size: 15px; }

/* 한정특가(합성) 포스터: 차량 사진 풀블리드 + 어두운 스크림 + 텍스트 */
.promo-poster-deal .ppd-car { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.promo-poster-deal::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 14, 26, 0.66) 0%, rgba(9, 14, 26, 0.12) 42%, rgba(9, 14, 26, 0.5) 100%); }
.ppd-top { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; }
.ppd-label { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: #ff5b5b; padding: 4px 11px; border-radius: 999px; margin-bottom: 8px; }
.ppd-name { color: #fff; font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); }
.ppd-price { margin-top: 6px; color: #e6ecff; font-size: 13.5px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.ppd-price strong { color: #fff; font-size: 19px; font-weight: 800; }
.footer-top h4 { color: #fff; font-size: 14px; font-weight: 800; margin-bottom: 16px; }
.footer-top ul li { margin-bottom: 10px; font-size: 13.5px; }
.footer-top ul li a:hover { color: #fff; }
.footer-contact .tel { font-size: 22px; font-weight: 800; color: #fff; margin: 10px 0 4px; }
.footer-contact > span { display: block; }
.footer-bottom { padding-top: 24px; font-size: 12px; color: #7f8db3; line-height: 1.8; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 9px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.footer-social a:hover { transform: translateY(-2px); filter: brightness(1.08); }
.footer-social a svg { width: 32px; height: 32px; display: block; }

/* ---- Floating consult button ---- */
.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 26px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
}
.fab.kakao { background: #fee500; color: #391b1b; }
.fab.call { background: var(--color-navy-900); color: #fff; }
.fab-icon { width: 20px; height: 20px; }
@media (max-width: 620px) {
  .fab span.fab-label { display: none; }
  .fab { padding: 14px; }
}

/* ---- Filter bar (vehicles / reviews) ---- */
.filter-bar {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group .filter-label { font-size: 12.5px; font-weight: 700; color: var(--color-ink-500); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* 브랜드 선택란은 한 줄에 7개씩 고정 (국산차 1줄 · 수입차 3줄) */
#quote-brand-domestic, #quote-brand-import,
#vh-brand-domestic, #vh-brand-import {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
@media (max-width: 780px) {
  #quote-brand-domestic, #quote-brand-import,
  #vh-brand-domestic, #vh-brand-import { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  #quote-brand-domestic, #quote-brand-import,
  #vh-brand-domestic, #vh-brand-import { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.chip {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-ink-700);
  background: #fff;
}
.chip.active, .chip:hover { border-color: var(--color-blue-600); color: var(--color-blue-600); background: var(--color-blue-50); }
.filter-search { margin-left: auto; min-width: 220px; }
.result-count { font-size: 13.5px; color: var(--color-ink-500); margin-bottom: 18px; }
.result-count strong { color: var(--color-blue-600); }

/* ---- 추천차량(recommend.html) 카드 ---- */
.rec-item { display: flex; flex-direction: column; }
.rec-item .car-card { flex: 1; }
.empty-state { text-align: center; padding: 80px 20px; color: var(--color-ink-500); }
.empty-state .icon { font-size: 42px; margin-bottom: 14px; }

/* ---- Compare table (guide) ---- */
.compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare-table th, .compare-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--color-line); font-size: 14px; }
.compare-table thead th { background: var(--color-navy-900); color: #fff; font-size: 14.5px; }
.compare-table tbody th { color: var(--color-ink-700); font-weight: 700; background: #fafbfd; width: 160px; }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: none; }
.compare-table td.highlight { color: var(--color-blue-600); font-weight: 700; }
@media (max-width: 700px) {
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table th, .compare-table td, .compare-table tr { display: block; }
  .compare-table thead { display: none; }
  .compare-table tr { margin-bottom: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
  .compare-table tbody th { width: auto; }
}

/* ---- FAQ Accordion ---- */
.accordion-item { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; }
.accordion-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-navy-900);
  text-align: left;
}
.accordion-q .plus { font-size: 20px; color: var(--color-blue-600); transition: transform 0.2s ease; flex-shrink: 0; margin-left: 12px; }
.accordion-item.open .accordion-q .plus { transform: rotate(45deg); }
.accordion-a { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.25s ease; }
.accordion-a-inner { min-height: 0; overflow: hidden; padding: 0 22px 20px; color: var(--color-ink-500); font-size: 14px; line-height: 1.7; }
.accordion-item.open .accordion-a { grid-template-rows: 1fr; }

/* ---- About page ---- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-box { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 28px 20px; text-align: center; }
.stat-box strong { display: block; font-size: 30px; font-weight: 800; color: var(--color-blue-600); }
.stat-box span { font-size: 13px; color: var(--color-ink-500); margin-top: 6px; display: block; }

.timeline { border-left: 2px solid var(--color-line); padding-left: 26px; display: flex; flex-direction: column; gap: 26px; }
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute; left: -32px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-blue-600);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--color-blue-600);
}
.timeline-item .year { font-weight: 800; color: var(--color-blue-600); font-size: 14px; }
.timeline-item h4 { font-size: 15.5px; font-weight: 700; margin: 4px 0 4px; color: var(--color-navy-900); }
.timeline-item p { font-size: 13.5px; color: var(--color-ink-500); }

.contact-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }

.map-box {
  aspect-ratio: 16/7;
  background: repeating-linear-gradient(45deg, #e9edf6, #e9edf6 10px, #eef1f8 10px, #eef1f8 20px);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-500);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* ---- Consult form page ---- */
.consult-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .consult-grid { grid-template-columns: 1fr; } }
.consult-form-card, .consult-info-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 18px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { display: block; font-size: 13.5px; font-weight: 700; color: var(--color-ink-700); margin-bottom: 8px; }
.form-group label .req { color: var(--color-orange-500); margin-left: 3px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--color-ink-500); }
.checkbox-row a { color: var(--color-blue-600); text-decoration: underline; }
.consult-info-card h3 { font-size: 17px; font-weight: 800; color: var(--color-navy-900); margin-bottom: 18px; }
.info-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.info-row:last-child { border-bottom: none; }
.info-row .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--color-blue-50); color: var(--color-blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-row strong { display: block; font-size: 14px; color: var(--color-navy-900); }
.info-row span { font-size: 13px; color: var(--color-ink-500); }

.form-success {
  display: none;
  text-align: center;
  padding: 60px 20px;
}
.form-success.show { display: block; }
.form-success .check {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--color-blue-50); color: var(--color-blue-600);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-size: 32px;
}
.form-success h3 { font-size: 20px; font-weight: 800; color: var(--color-navy-900); margin-bottom: 10px; }
.form-success p { color: var(--color-ink-500); font-size: 14.5px; }

/* ---- misc utils ---- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.text-center { text-align: center; }
.tag-pill { display:inline-block; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-orange-100); color: var(--color-orange-500); font-weight: 800; font-size: 12.5px; }
.skip-link { position: absolute; left: -999px; top: auto; }
.skip-link:focus { left: 12px; top: 12px; z-index: 999; background: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow-md); }

/* ---- 차량 상세 페이지 (vehicle.html) ---- */
.detail-wrap { padding: 32px 24px 140px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.detail-media-col { position: sticky; top: calc(var(--header-h) + 24px); }
.detail-media {
  /* 목록 카드와 같은 16:10 로 맞춰야 사진 보정값(|97% 50%)이 동일하게 먹습니다. */
  aspect-ratio: 16 / 10;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.detail-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: var(--photo-tf, scale(1));
}
.detail-media svg { width: 70%; opacity: .85; }

.detail-title { margin-bottom: 18px; }
.detail-brand { font-size: 14px; font-weight: 700; color: var(--color-ink-500); }
.detail-title h1 { font-size: 30px; font-weight: 800; color: var(--color-navy-900); margin-top: 6px; }

.detail-summary {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: #fff;
  margin-bottom: 16px;
}
.ds-row { display: flex; align-items: center; justify-content: space-between; }
.ds-row + .ds-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-line); }
.ds-tag {
  font-size: 16px; font-weight: 800; color: var(--color-ink-700);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 6px 13px;
  white-space: nowrap;
}
.ds-tag-accent { color: var(--color-red-600); border-color: #f6c9c9; background: #fff5f5; }
.ds-price { font-size: 20px; font-weight: 800; color: var(--color-navy-900); }
.ds-monthly { font-size: 15px; font-weight: 700; color: var(--color-ink-700); }
/* 월 납입료 금액만 강조색으로 (차량가는 네이비 유지) */
.ds-monthly em { font-style: normal; font-size: 26px; font-weight: 800; color: var(--color-red-600); }

.detail-breakdown {
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: #fff; margin-bottom: 26px;
}
.detail-breakdown summary {
  cursor: pointer; list-style: none; text-align: center;
  padding: 11px; font-size: 13px; font-weight: 700; color: var(--color-red-600);
  border-bottom: 1px solid var(--color-line);
}
.detail-breakdown summary::-webkit-details-marker { display: none; }
.dt-table { width: 100%; border-collapse: collapse; }
.dt-table th, .dt-table td { padding: 11px 18px; font-size: 13.5px; }
.dt-table th { text-align: left; color: var(--color-ink-500); font-weight: 600; width: 40%; }
.dt-table td { text-align: right; color: var(--color-ink-900); font-weight: 600; }
.dt-table tr + tr th, .dt-table tr + tr td { border-top: 1px solid #f1f3f8; }
.dt-table .dt-sec th { color: var(--color-navy-900); font-weight: 800; background: var(--color-bg); }

.detail-opt { margin-bottom: 22px; }
.detail-opt-label { display: block; font-size: 15px; font-weight: 800; color: var(--color-navy-900); margin-bottom: 10px; }
.detail-opt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.detail-chip {
  padding: 14px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line); background: #fff;
  font-size: 14.5px; font-weight: 700; color: var(--color-ink-700);
  transition: border-color .15s ease, color .15s ease;
}
.detail-chip:hover { border-color: #f0b4b4; }
.detail-chip.active { border-color: var(--color-red-600); color: var(--color-red-600); }

.detail-opt-count, .detail-opt-sel {
  font-style: normal; font-size: 13px; font-weight: 600;
  color: var(--color-ink-500); margin-left: 6px;
}
.detail-opt-wide { margin-bottom: 26px; }
/* 라인업명은 길어서 2칸으로 넓게 */
#dt-model-row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }

/* 라인업(연료) 버튼 : 이름은 왼쪽, [친환경] 표시는 오른쪽 끝에 붙입니다.
   이름이 길면 두 줄이 되더라도 표시가 버튼 밖으로 삐져나오지 않게 합니다. */
.chip-lineup {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; text-align: left; padding: 12px 12px;
  min-height: 52px;
}
.chip-lineup .chip-name { flex: 1 1 auto; min-width: 0; line-height: 1.35; word-break: keep-all; }
.chip-lineup .eco-badge { flex: 0 0 auto; margin-left: 0; }

/* 트림 선택 : 이름 + 가격 + 재고를 한 줄에 */
.trim-list { display: flex; flex-direction: column; gap: 8px; max-height: 336px; overflow-y: auto; padding-right: 4px; }
.trim-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 13px 16px;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s ease;
}
.trim-item:hover { border-color: #f0b4b4; }
.trim-item.active { border-color: var(--color-red-600); background: #fff8f8; }
.trim-name { font-size: 14.5px; font-weight: 700; color: var(--color-ink-900); }
.trim-item.active .trim-name { color: var(--color-red-600); }
.trim-meta { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.trim-price { font-size: 14.5px; font-weight: 800; color: var(--color-navy-900); }
.trim-stock { font-size: 12px; font-weight: 600; color: var(--color-ink-500); }
.trim-stock.out { color: var(--color-red-600); }

/* 하이브리드 등 친환경 라인업 표시 */
.eco-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 2px 7px 2px 6px; border-radius: 999px;
  background: #e8f5ec; border: 1px solid #bfe3cb;
  font-size: 11px; font-weight: 800; color: #1b7a45; vertical-align: middle;
  white-space: nowrap;
}
/* 줄기 없는 평평한 잎사귀 (양쪽 끝이 뾰족한 단순 도형) */
.eco-badge::before {
  content: ""; width: 11px; height: 11px; flex: 0 0 11px;
  background: #1b7a45;
  -webkit-mask: var(--leaf) center/contain no-repeat;
          mask: var(--leaf) center/contain no-repeat;
  --leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 3.5C13 3.5 3.5 8 3.5 15.5c0 2.8 2.2 5 5 5 7.5 0 12-9.5 12-17Z'/></svg>");
}

/* 색상 선택 : 색상칩 + 이름 */
.color-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.color-chip {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 6px; border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm); background: #fff; transition: border-color .15s ease;
}
.color-chip:hover { border-color: #f0b4b4; }
.color-chip.active { border-color: var(--color-red-600); }
.color-chip i {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(11,31,58,.18); box-shadow: inset 0 -3px 6px rgba(0,0,0,.14);
}
.color-chip.active i { box-shadow: inset 0 -3px 6px rgba(0,0,0,.14), 0 0 0 3px #fff, 0 0 0 5px var(--color-red-600); }
.color-chip span {
  font-size: 11.5px; font-weight: 600; color: var(--color-ink-700);
  line-height: 1.3; text-align: center; word-break: keep-all;
}
.color-chip.active span { color: var(--color-red-600); }
.color-chip b { font-size: 11px; font-weight: 800; color: var(--color-navy-900); }

/* 추가옵션 : 체크형 다중 선택 + 택1 그룹 */
.opt-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; padding-right: 4px; }
.opt-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 15px; border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm); background: #fff; transition: border-color .15s ease;
}
.opt-item:hover { border-color: #f0b4b4; }
.opt-item.active { border-color: var(--color-red-600); background: #fff8f8; }
.opt-check {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--color-line); background: #fff; position: relative;
}
.opt-item.active .opt-check { background: var(--color-red-600); border-color: var(--color-red-600); }
.opt-item.active .opt-check::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.opt-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--color-ink-900); }
.opt-item.active .opt-name { color: var(--color-red-600); }
/* 선행옵션을 아직 고르지 않아 잠긴 옵션 */
.opt-item.locked { background: var(--color-bg); cursor: not-allowed; }
.opt-item.locked:hover { border-color: var(--color-line); }
.opt-item.locked .opt-name, .opt-item.locked .opt-price { color: var(--color-ink-500); }
.opt-need {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 11.5px; font-weight: 600; color: var(--color-red-600);
}
/* 동시선택 불가 안내 (빨간 글씨) */
.opt-conflict {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 11.5px; font-weight: 700; color: var(--color-red-600);
}
.opt-price { font-size: 13.5px; font-weight: 800; color: var(--color-navy-900); white-space: nowrap; }
.opt-group {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px dashed var(--color-line); border-radius: var(--radius-sm); background: var(--color-bg);
}
.opt-group-label { font-size: 12.5px; font-weight: 800; color: var(--color-navy-900); }
.opt-group-label em { font-style: normal; font-weight: 600; color: var(--color-ink-500); }
.opt-group .opt-item { background: #fff; }

.detail-note { font-size: 12.5px; color: var(--color-ink-500); line-height: 1.7; margin-top: 26px; }

.detail-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--color-line); box-shadow: 0 -6px 24px rgba(11,31,58,.10);
}
.detail-bar-inner {
  max-width: var(--container); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.dbar-car { min-width: 0; }
.dbar-car strong { display: block; font-size: 15px; font-weight: 800; color: var(--color-navy-900); }
.dbar-car span { font-size: 12.5px; color: var(--color-ink-500); }
.dbar-price { display: flex; gap: 18px; margin-left: auto; }
.dbar-line { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dbar-line i {
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--color-ink-500);
  border: 1px solid var(--color-line); border-radius: 5px; padding: 3px 7px;
}
.dbar-line i.accent { color: var(--color-red-600); border-color: #f6c9c9; background: #fff5f5; }
.dbar-line b { font-size: 17px; font-weight: 800; color: var(--color-navy-900); }
.dbar-cta { display: flex; gap: 10px; flex-shrink: 0; }
.dbar-btn-red { background: var(--color-red-600); color: #fff; padding: 15px 26px; }
.dbar-btn-red:hover { background: #b81f1f; }
.dbar-btn-kakao { background: #fee500; color: #191600; padding: 15px 26px; }
.dbar-btn-kakao:hover { background: #f5dc00; }

@media (max-width: 980px) {
  .detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .detail-media-col { position: static; }
  .detail-title h1 { font-size: 24px; }
  .detail-bar-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .dbar-car { flex: 1 1 100%; }
  .dbar-price { margin-left: 0; gap: 14px; }
  .dbar-cta { flex: 1 1 100%; }
  .dbar-cta .btn { flex: 1; padding: 13px 10px; font-size: 14px; }
  .detail-wrap { padding: 20px 16px 190px; }
  /* 모바일에서도 계약기간 3칸 / 보증금·선납금 4칸이 한 줄에 들어가도록 최소폭을 줄인다 */
  .detail-opt-row { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
  .detail-chip { padding: 13px 4px; font-size: 14px; }
  /* 라인업은 이름이 길고 [친환경] 표시까지 붙어서 모바일에선 한 줄에 하나씩 */
  #dt-model-row { grid-template-columns: 1fr; }
  .chip-lineup { padding: 12px 12px; font-size: 14px; }
  .color-row { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .trim-list, .opt-list { max-height: 300px; }
  .trim-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .trim-meta { width: 100%; justify-content: space-between; }
}

/* ══════════════════════════════════════════════════════════
   간편신청 (우측 고정 패널)
   화면이 넓으면 항상 펼쳐 두고, 좁으면 세로 탭을 눌러 여닫습니다.
   ══════════════════════════════════════════════════════════ */
/* 카톡·전화 버튼 바로 위에 붙입니다 (버튼 영역 109px + 아래 여백 26px + 간격 13px) */
.quick-apply {
  position: fixed; right: 20px; top: auto; bottom: 148px;
  width: 228px; max-height: calc(100vh - var(--header-h) - 176px); overflow-y: auto;
  z-index: 85; background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-md); box-shadow: 0 14px 40px rgba(11,31,58,.14);
  padding: 14px 14px 12px;
  transition: transform .25s ease, opacity .2s ease, bottom .35s ease;
}
/* 스크롤을 어느 정도 내리면 화면 위쪽(헤더 아래)으로 올라갑니다 */
.quick-apply.raised { bottom: var(--qa-raise, 148px); }

.qa-head { margin-bottom: 11px; }
.qa-eyebrow {
  display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px;
  background: #fff1f1; color: var(--color-red-600); font-size: 11.5px; font-weight: 800;
}
.qa-head strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--color-navy-900); line-height: 1.4; }
/* 라벨 없이 placeholder 만으로 (세로 폭 절약) */
.qa-input {
  display: block; width: 100%; margin-bottom: 7px;
  padding: 11px 12px; border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: #fff;
}
.qa-input:focus { outline: none; border-color: var(--color-red-600); }
.qa-input.error { border-color: var(--color-red-600); background: #fff7f7; }
.qa-agree { display: flex; gap: 6px; align-items: center; margin: 8px 0 2px; font-size: 11.5px; color: var(--color-ink-500); line-height: 1.4; }
.qa-agree input { flex: 0 0 14px; width: 14px; height: 14px; accent-color: var(--color-red-600); }
.qa-agree a { color: var(--color-ink-700); text-decoration: underline; }
.qa-agree.error span { color: var(--color-red-600); }
.qa-error { margin: 5px 0 0; font-size: 12px; font-weight: 700; color: var(--color-red-600); }
.qa-submit {
  width: 100%; margin-top: 8px; padding: 12px 10px;
  background: var(--color-red-600); color: #fff; font-size: 15px; font-weight: 800;
}
.qa-submit:hover { background: #b81f1f; }
.qa-note { margin: 7px 0 0; font-size: 11px; color: var(--color-ink-500); line-height: 1.5; text-align: center; }

.qa-done { text-align: center; padding: 6px 2px 2px; }
.qa-done-icon {
  width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%;
  background: #e8f5ec; position: relative;
}
.qa-done-icon::after {
  content: ""; position: absolute; left: 15px; top: 10px;
  width: 9px; height: 17px; border: solid #1b7a45; border-width: 0 3px 3px 0; transform: rotate(43deg);
}
.qa-done strong { display: block; font-size: 15px; font-weight: 800; color: var(--color-navy-900); margin-bottom: 8px; }
.qa-done p { font-size: 12.5px; color: var(--color-ink-500); line-height: 1.55; margin-bottom: 12px; }
.qa-done b { color: var(--color-navy-900); }

/* 상세견적 화면(카톡 버튼 없음) : 하단 고정 견적바 위 */
.quick-apply-detail { bottom: 98px; max-height: calc(100vh - var(--header-h) - 126px); }

.quick-apply-close {
  display: none; position: absolute; right: 8px; top: 6px;
  width: 30px; height: 30px; font-size: 22px; line-height: 1; color: var(--color-ink-500); background: none;
}
.quick-apply-tab {
  display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 84; padding: 16px 9px; border-radius: 10px 0 0 10px;
  background: var(--color-red-600); color: #fff; font-size: 13px; font-weight: 800; line-height: 1.35;
  box-shadow: -4px 0 16px rgba(11,31,58,.18);
}

/* 본문(1180px)과 패널이 나란히 들어가지 않는 폭에서는 탭으로 접어 둡니다 */
@media (max-width: 1679px) {
  .quick-apply { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  .quick-apply.open { transform: none; opacity: 1; pointer-events: auto; }
  .quick-apply-close { display: block; }
  .quick-apply-tab { display: block; }
  .quick-apply-tab.hide { opacity: 0; pointer-events: none; }
}
@media (max-width: 480px) {
  .quick-apply { right: 12px; left: 12px; width: auto; bottom: 145px; max-height: calc(100vh - 265px); }
  .quick-apply-tab { padding: 13px 8px; font-size: 12px; }
  /* 상세견적 화면은 하단에 고정 견적바가 있어 그 위로 띄웁니다 */
  .quick-apply-detail { bottom: 191px; max-height: calc(100vh - 251px); }
}

/* 차량가가 아직 등록되지 않은 차량 : 금액 대신 '가격 문의' */
.car-price .amount-tbd { color: var(--color-ink-500); font-weight: 800; }
.quote-car-monthly strong.tbd { color: var(--color-ink-500); }
.detail-tbd-note {
  margin-bottom: 16px; padding: 14px 16px;
  border: 1px dashed var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-bg); font-size: 13px; line-height: 1.65; color: var(--color-ink-700);
}
.detail-tbd-note strong { color: var(--color-red-600); }

/* 전기차 보조금 표시(할인) */
.dt-subsidy { color: #1a8f4c; font-weight: 700; }

/* 산출 기준 고지문 (상세견적 계약상세 하단) — 잔존가치·월납입료가 자체 기준 추정치임을 안내 */
.dt-basis-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f5f7fa;
  border: 1px solid var(--color-line, #e5e8ee);
  color: #5b6270;
  font-size: 12px;
  line-height: 1.65;
}
.dt-basis-note strong { color: #3a4250; font-weight: 600; }

/* ---- 홈 간편 상담 신청 ----
   '이번주 한정특가' 섹션 안에 들어가 있습니다. 그래서 배경 그라데이션과
   떠오르는 SALE 워터마크를 그대로 함께 씁니다. 별도 섹션으로 두었을 때는
   어두운 띠가 두 개 붙어 보였습니다. (2026-09-02 재구상)
   .hotdeal-sale 이 z-index 1, .container 가 2 라서 카드가 항상 위에 옵니다. */
.quick-consult-card {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 6px 30px;
  align-items: center;
  margin-top: 30px;
  padding: 14px 26px;
  /* 좌우 끝선을 한정특가 카드와 맞춥니다.
     한정특가는 min(1500px, 100vw-40px) 폭의 띠 안에서 화살표(38px)+간격(14px)
     = 52px 를 뺀 자리에 카드가 놓입니다. 같은 계산을 그대로 씁니다.
     (.hotdeal-head 가 쓰는 방식과 동일 — 1000px 이하에서는 컨테이너 폭 그대로) */
  border-radius: var(--radius-lg);
  /* 특가 카드와 같은 결의 반투명 유리 카드 */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 제목은 왼쪽 칸 가운데에 둡니다. 왼쪽 끝에 붙여 두면 카드 안에서 혼자 떨어져 보입니다. */
.quick-consult-copy { text-align: center; }
.quick-consult-copy h2 {
  /* 아이콘과 글씨의 세로 중심을 맞춥니다. baseline 정렬은 아이콘이 사각형이라
     글자 가운데와 어긋납니다. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* 제목 앞 아이콘 — 이용안내 1단계(무료 견적 신청)와 같은 아이콘입니다.
   step-icon 클래스를 함께 줘서 펜이 쓰는 움직임을 그대로 물려받고,
   여기서는 크기만 다시 지정합니다. 세로 중심은 h2 의 flex 정렬이 맞춥니다. */
.qc-icon.step-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e8f0fe;
  flex: 0 0 auto;
  /* 아이콘 상자 자체는 움직이지 않습니다. 안쪽 연필·줄 움직임만 씁니다.
     (.step-icon 이 갖고 있는 stepActive 크기 변화는 여기서 끕니다) */
  animation: none;
}
.qc-icon.step-icon svg { width: 27px; height: 27px; }
.quick-consult-copy p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
.quick-consult-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr auto;
  gap: 0 12px;
  align-items: start;
}
.quick-consult-form .form-group { margin-bottom: 0; }
.quick-consult-form label {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.86);
}
.quick-consult-form label .opt { color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.quick-consult-form .field { height: 52px; padding: 0 16px; font-size: 15px; }
.quick-consult-form .btn {
  height: 52px;
  padding: 0 30px;
  font-size: 15.5px;
  font-weight: 800;
  white-space: nowrap;
  /* 라벨(14px + 여백 8px) 높이만큼 내려 입력칸과 같은 줄에 맞춥니다. */
  margin-top: 29px;
}
/* 개인정보 동의 — 폼 아래 한 줄 전체 */
.quick-consult-agree { grid-column: 1 / -1; margin-top: 10px; }
.qc-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.qc-agree input { width: 15px; height: 15px; accent-color: var(--color-blue-600); cursor: pointer; }
.qc-agree a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; }
.quick-consult-agree .field-error-msg { color: #ff9a92; margin-top: 6px; }

@media (min-width: 1001px) {
  .quick-consult-card {
    --qc-w: min(1500px, calc(100vw - 40px));
    width: calc(var(--qc-w) - 104px);
    margin-left: calc((100% - var(--qc-w)) / 2 + 52px);
  }
}
@media (max-width: 1000px) {
  .quick-consult-card { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .quick-consult-form { grid-template-columns: 1fr 1fr; gap: 12px; }
  .quick-consult-form .form-group:nth-child(3) { grid-column: 1 / -1; }
  .quick-consult-form .btn { grid-column: 1 / -1; margin-top: 0; width: 100%; }
}
@media (max-width: 480px) {
  .quick-consult-card { padding: 20px 18px; margin-top: 26px; }
  .quick-consult-form { grid-template-columns: 1fr; }
  /* 좁은 화면에서는 제목이 카드를 넘지 않도록 줄이고 줄바꿈을 허용합니다. */
  .quick-consult-copy h2 { font-size: 24px; white-space: normal; }
}

/* ============================================================
   회사소개(about.html) 본문 01~07 — 2026-09-02 전면 개편
   ------------------------------------------------------------
   원칙 세 가지만 지킵니다.
     1) 배경은 전 섹션 흰색. 색 배경으로 섹션을 나누지 않고 여백과 얇은 선으로만 나눕니다.
     2) 글자는 블랙, 강조(제목·숫자·아이콘·버튼)만 네이비. 보조 색은 쓰지 않습니다.
     3) 아이콘은 네이비 단색 라인. 크기 32px · 선 굵기 1.7 로 통일합니다.
   상단 페이지 배너(.page-hero)는 기존 그대로 두고 본문만 바꿨습니다.
   ============================================================ */
.ab-sec {
  --ab-navy: #0b1f3a;
  --ab-black: #16181d;
  --ab-mute: #5a6070;
  background: #fff;
  padding: 110px 0;
  color: var(--ab-black);
  text-align: center;
}
/* 섹션 사이는 얇은 선 하나로만 나눕니다. */
.ab-sec + .ab-sec { border-top: 1px solid #ececf0; }

/* 섹션 라벨 — 01 ABOUT AUTO CLIP */
.ab-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  color: var(--ab-navy);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.ab-label em {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  padding-right: 10px;
  border-right: 1px solid rgba(11, 31, 58, 0.25);
}
.ab-sec-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ab-black);
  margin-bottom: 56px;
}

/* ---- 01 ABOUT ---- */
.ab-hero { padding: 150px 0 140px; }
.ab-hero-title {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ab-black);
  margin-bottom: 34px;
}
.ab-hero-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.85;
  color: var(--ab-mute);
}
.ab-hero-sub b { color: var(--ab-navy); font-weight: 800; }

/* ---- 02 PHILOSOPHY ---- */
.ab-lead {
  max-width: 680px;
  margin: 0 auto 46px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--ab-black);
}
.ab-quote {
  display: inline-block;
  padding-top: 30px;
  border-top: 2px solid var(--ab-navy);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--ab-navy);
}

/* ---- 03 BRAND STORY ---- */
.ab-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 30px);
  margin-bottom: 46px;
}
.ab-wm-word {
  font-size: clamp(36px, 6.5vw, 74px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ab-navy);
}
.ab-wm-plus {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 400;
  line-height: 1;
  color: var(--ab-mute);
}
.ab-brand-body {
  max-width: 620px;
  margin: 0 auto;
}
.ab-brand-body p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ab-mute);
}
.ab-brand-body p + p { margin-top: 20px; }
.ab-brand-body b { color: var(--ab-navy); font-weight: 800; }
.ab-brand-closing {
  margin-top: 50px;
  padding-top: 34px;
  border-top: 1px solid #ececf0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--ab-black);
}

/* ---- 공통 라인 아이콘 ---- */
.ab-icon {
  display: inline-flex;
  color: var(--ab-navy);
}
.ab-icon svg { width: 32px; height: 32px; display: block; }

/* ---- 04 BUSINESS ---- */
.ab-biz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin: 0 auto;
}
/* 두 상품의 무게를 같게 두고, 가운데는 얇은 선 하나로만 나눕니다. */
.ab-biz-grid .ab-biz + .ab-biz {
  border-left: 1px solid #ececf0;
}
.ab-biz { padding: 0 40px; }
.ab-biz-num {
  display: block;
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ab-navy);
}
.ab-biz h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ab-black);
  margin-bottom: 10px;
}
.ab-biz-tag {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ab-mute);
  margin-bottom: 18px;
}
.ab-biz-desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ab-mute);
}

/* ---- 05 PROCESS ---- */
.ab-process {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ab-step { position: relative; padding: 0 9px; }
/* 단계 사이를 얇은 네이비 선으로 잇습니다. 아이콘 높이의 가운데에 맞춥니다. */
.ab-step + .ab-step::before {
  content: "";
  position: absolute;
  left: -50%;
  right: 50%;
  top: 44px;
  height: 1px;
  background: rgba(11, 31, 58, 0.22);
}
.ab-step-num {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ab-navy);
}
.ab-step .ab-icon {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  background: #fff;
}
.ab-step h3 {
  margin: 16px 0 8px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ab-black);
}
.ab-step p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ab-mute);
}

/* ---- 06 CLOSING ---- */
.ab-closing { padding: 140px 0; } /* 아래도 140px — 06 위/아래 구분선 간격을 같게 */
.ab-closing-title {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ab-black);
  margin-bottom: 34px;
}
.ab-closing-body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ab-mute);
}
.ab-closing-body + .ab-closing-body { margin-top: 18px; }
.ab-closing-sign {
  margin-top: 40px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--ab-black);
}
.ab-closing-sign b { color: var(--ab-navy); font-weight: 800; letter-spacing: 0.02em; }
.ab-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 46px;
  padding: 0 40px;
  height: 60px;
  border-radius: 4px;
  background: var(--ab-navy);
  color: #fff;
  font-size: 16.5px;
  font-weight: 800;
  transition: opacity 0.18s ease;
}
.ab-cta:hover { opacity: 0.88; }

/* ---- 07 LOCATION ---- */
.ab-loc-title {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ab-black);
  margin-bottom: 44px;
}
.ab-loc-info {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: left;
  border-top: 1px solid #ececf0;
}
.ab-loc-info > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid #ececf0;
}
.ab-loc-info dt {
  font-size: 14px;
  font-weight: 800;
  color: var(--ab-navy);
}
.ab-loc-info dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ab-black);
}
.ab-loc-info dd a { color: var(--ab-navy); font-weight: 800; }
.ab-map {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 24px;
  border: 1px solid #ececf0;
  color: var(--ab-mute);
  font-size: 14px;
}
.ab-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0 28px;
  height: 50px;
  border: 1px solid var(--ab-navy);
  border-radius: 4px;
  color: var(--ab-navy);
  font-size: 15px;
  font-weight: 800;
  transition: background 0.18s ease, color 0.18s ease;
}
.ab-map-link:hover { background: var(--ab-navy); color: #fff; }

/* ---- 반응형 ---- */
@media (max-width: 900px) {
  .ab-sec { padding: 78px 0; }
  .ab-hero { padding: 100px 0 92px; }
  .ab-closing { padding: 96px 0; }

  /* 04: 좌우 2분할에서 위아래 2단으로. 가운데 선도 세로에서 가로로 바뀝니다. */
  .ab-biz-grid { grid-template-columns: 1fr; max-width: 460px; }
  .ab-biz { padding: 0; }
  .ab-biz-grid .ab-biz + .ab-biz {
    border-left: 0;
    border-top: 1px solid #ececf0;
    margin-top: 40px;
    padding-top: 40px;
  }

  /* 05: 가로형에서 세로형으로. 단계 사이를 짧은 세로선과 화살표로 잇습니다. */
  .ab-process { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .ab-step { padding: 0 0 46px; }
  .ab-step:last-child { padding-bottom: 0; }
  .ab-step + .ab-step::before {
    left: 50%;
    right: auto;
    top: -38px;
    width: 1px;
    height: 30px;
    transform: translateX(-50%);
  }
  .ab-step + .ab-step::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -13px;
    width: 7px;
    height: 7px;
    border-right: 1px solid rgba(11, 31, 58, 0.35);
    border-bottom: 1px solid rgba(11, 31, 58, 0.35);
    transform: translateX(-50%) rotate(45deg);
  }
  .ab-step .ab-icon { padding: 0; background: none; }

  .ab-loc-info > div { grid-template-columns: 92px 1fr; gap: 12px; }
  .ab-map { min-height: 280px; }
}
@media (max-width: 480px) {
  .ab-sec { padding: 62px 0; }
  .ab-hero { padding: 80px 0 74px; }
  .ab-closing { padding: 78px 0; }
  .ab-cta { width: 100%; justify-content: center; padding: 0 20px; }
  .ab-map-link { width: 100%; justify-content: center; }
  .ab-loc-info > div { grid-template-columns: 1fr; gap: 6px; }
}

/* 상단 배너 바로 뒤 섹션의 여백을 줄이는 공통 규칙(.page-hero--friendly + section)이
   회사소개 01 섹션에도 걸려 44px 로 눌립니다. 01 은 여백을 크게 쓰는 자리라
   같은 선택자 무게로 되돌려 놓습니다. */
.page-hero--friendly + .ab-sec.ab-hero { padding-top: 130px; }
@media (max-width: 900px) {
  .page-hero--friendly + .ab-sec.ab-hero { padding-top: 90px; }
}
@media (max-width: 480px) {
  .page-hero--friendly + .ab-sec.ab-hero { padding-top: 72px; }
}

/* 배너 아래가 흰색 섹션인 페이지용 — 배너 그라데이션을 흰색으로 풀어 이어 줍니다.
   기본(.pf-a~e)은 페이지 기본 배경(#f5f7fb)으로 사라지게 돼 있어서, 회사소개처럼
   바로 아래가 흰색이면 경계에 옅은 회색 띠가 한 줄 보였습니다. */
.page-hero--friendly.pf-to-white::before {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 48%, #fff 100%),
    linear-gradient(135deg, #eaf6f7 0%, #eef2ff 100%);
}

/* ============================================================
   약관·방침 문서 페이지 (privacy.html 등) — 2026-09-02
   읽기가 전부인 화면이라 장식 없이 본문 폭·행간·구분선만 잡습니다.
   ============================================================ */
.legal-sec { background: #fff; padding: 70px 0 110px; }
.legal-doc {
  max-width: 860px;
  margin: 0 auto;
  color: #2b2f3a;
  font-size: 15px;
  line-height: 1.85;
}
.legal-doc h2 {
  /* 상단 고정 헤더(84px)에 가리지 않도록 앵커 이동 시 여유를 둡니다. */
  scroll-margin-top: 104px;
  margin: 56px 0 18px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-navy-900);
}
.legal-doc h2:first-of-type { margin-top: 44px; }
.legal-doc h3 {
  margin: 28px 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-navy-900);
}
.legal-doc p { margin-bottom: 12px; }
.legal-doc ul {
  margin: 0 0 16px;
  padding-left: 18px;
  list-style: disc;
}
.legal-doc li { margin-bottom: 8px; }
.legal-intro { color: #4a5060; }
/* 동의 거부 시 불이익 고지 — 법정 고지사항이라 눈에 띄게 둡니다. */
.legal-notice {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--color-navy-900);
  background: #f7f9fc;
  font-weight: 700;
  color: var(--color-navy-900);
}

.legal-table-wrap { overflow-x: auto; margin: 14px 0 20px; }
.legal-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}
.legal-table th,
.legal-table td {
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
.legal-table thead th,
.legal-table tbody th {
  background: #f7f9fc;
  font-weight: 800;
  color: var(--color-navy-900);
  white-space: nowrap;
}
.legal-table a { color: var(--color-navy-900); font-weight: 800; }
/* 아직 채워 넣지 않은 값 표시 */
.legal-todo {
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff2e8;
  color: #b45309;
  font-weight: 800;
}

@media (max-width: 720px) {
  .legal-sec { padding: 50px 0 80px; }
  .legal-doc { font-size: 14.5px; }
  .legal-doc h2 { margin-top: 42px; font-size: 18px; }
}

/* ---- 회사소개 섹션 사이 이미지 ----
   .container 안에 넣어 헤더 로고 왼쪽 라인 ~ 상담신청 버튼 오른쪽 라인과
   같은 폭을 씁니다. (화면 끝까지 채우던 풀블리드에서 변경)
   불투명도는 이미지 전체에 균일하게 적용합니다. */
.ab-visual { background: #fff; padding: 4px 0; }
/* 헤더와 똑같은 띠 계산을 씁니다 — min(1500px, 100vw-40px) 폭에서 좌우 52px 안쪽.
   그래야 로고 왼쪽 라인과 상담신청 버튼 오른쪽 라인에 정확히 맞습니다. */
.ab-visual .container {
  --abv-w: min(1500px, calc(100vw - 40px));
  width: var(--abv-w);
  max-width: none;
  padding: 0 52px;
}
.ab-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.82;
}
/* 두 장을 가로로 나란히. 원본 비율이 서로 달라 그대로 두면 높이가 어긋나므로,
   같은 비율(16:10)로 맞추고 넘치는 부분만 잘라 냅니다. */
.ab-visual-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ab-visual-pair img {
  aspect-ratio: 16 / 10;
  height: 100%;
  object-fit: cover;
}
/* 작게 넣는 이미지 — 가운데 정렬, 폭 300px */
/* 로고처럼 또렷하게 보여야 하는 이미지 — 불투명도를 주지 않습니다. */
.ab-visual img.ab-visual-small { width: 600px; max-width: 100%; margin: 0 auto; opacity: 1; }
/* 06 아래 구분선 + 그 아래 로고 여백.
   구분선 위 간격은 .ab-closing 의 padding-bottom(140px)이 담당합니다.
   ⚠ 여기에 양수 margin-top 을 주면 그만큼 페이지 배경(#f5f7fb)이 드러나
   선이 두꺼워 보이므로 0 을 유지할 것.
   선 아래 로고는 위아래 흰 여백을 16px 로 더 좁혀, 07 위 여백 안으로 끌어당깁니다.
   (아래 16px = .ab-visual 의 padding-bottom 4px + 110px − 98px) */
.ab-visual--tight {
  margin-top: 0;
  margin-bottom: -98px;
  border-top: 1px solid #ececf0;
  padding-top: 16px;
}
/* 단독으로 놓이는 넓은 이미지 — 원본(3:2)은 너무 높아 21:9 로 낮춰 씁니다. */
.ab-visual-wide {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 60%;
}
@media (max-width: 900px) {
  /* 좁은 화면은 섹션 여백 자체가 작습니다(06 위 96 · 아래 92, 07 위 78).
     같은 계산으로 선 위 96px, 로고 위아래 14px 을 맞춥니다. */
  .ab-visual--tight { margin-top: 0; margin-bottom: -68px; padding-top: 14px; }
}
@media (max-width: 720px) {
  .ab-visual-pair { grid-template-columns: 1fr; gap: 14px; }
  .ab-visual-wide { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  /* 06 위 78 · 아래 74, 07 위 62 기준. */
  .ab-visual--tight { margin-top: 0; margin-bottom: -54px; padding-top: 12px; }
}
@media (max-width: 620px) {
  /* 헤더도 이 폭에서 좌우 여백을 12px 로 줄이므로 함께 맞춥니다. */
  .ab-visual .container { width: 100%; padding: 0 12px; }
}

/* 동의 항목 아래 요약 한 줄 (상담 페이지) — 제공받는 자·항목·목적·기간을
   동의 시점에 함께 알리기 위한 표기입니다. */
.consent-sum {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-ink-500);
}
/* 홈 간편 상담 신청의 동의 두 줄 간격 */
.quick-consult-agree .qc-agree + .qc-agree { margin-top: 6px; }

/* 방침 문서의 '선택' 배지 */
.legal-optional {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: #eef2fa;
  color: var(--color-navy-900);
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}

/* ---- 동의 묶음 (전체 동의 + 자세히 접기) ---- */
[data-consent-group] { position: relative; }
.consent-toggle {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 2px;
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.75;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.consent-toggle:hover { opacity: 1; }
.consent-list { display: grid; gap: 6px; margin-top: 8px; padding-left: 23px; }
/* display 를 지정했으므로 hidden 속성이 먹도록 따로 눌러 줍니다. */
.consent-list[hidden] { display: none; }
.qc-agree-all span em,
.qa-agree-all span em { font-style: normal; opacity: 0.72; font-weight: 600; }
/* 오른쪽 위 [자세히] 버튼 자리를 비워 둡니다. 좁은 화면에서 글자가 버튼 아래로
   파고들던 문제를 막습니다. */
.qc-agree-all, .qa-agree-all { padding-right: 48px; align-items: flex-start; }
/* 홈 간편 상담 신청: 전체 동의 줄만 보일 때도 높이가 흔들리지 않게 */
.quick-consult-agree .consent-list { padding-left: 23px; }
/* 우측 플로팅 폼 */
.qa-consent { margin: 8px 0 2px; }
.qa-consent .qa-agree { margin: 0; }

/* 간편 상담 신청: [자세히] 를 오른쪽 위가 아니라 전체 동의 문구 바로 뒤에 붙입니다.
   (홈 우측 플로팅 폼은 기존처럼 오른쪽 위에 그대로 둡니다) */
/* 문구와 버튼을 한 줄에 놓고 세로 가운데로 맞춥니다.
   inline 으로 두면 글자 기준선(baseline)에 걸려 버튼이 살짝 내려앉습니다. */
.quick-consult-agree,
.consent-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}
.quick-consult-agree .qc-agree-all,
.consent-inline .consent-all {
  display: inline-flex;
  align-items: center;
  padding-right: 0;
  /* 아래 여백이 남아 있으면 가운데 정렬이 그 여백까지 포함해 계산되어
     문구가 위로 붙고 버튼만 내려앉아 보입니다. */
  margin-bottom: 0;
}
.quick-consult-agree .consent-toggle,
.consent-inline .consent-toggle {
  position: static;
  margin-left: 0;
  line-height: 1;
}
/* 목록과 오류 문구는 아래 줄 전체를 씁니다. */
.quick-consult-agree .consent-list,
.quick-consult-agree .field-error-msg,
.consent-inline .consent-list,
.consent-inline .field-error-msg { flex: 0 0 100%; }

/* 상담 페이지 동의 묶음 — 개별 항목은 요약 줄이 있어 간격을 조금 더 줍니다. */
.consent-inline .consent-list { gap: 14px; padding-left: 0; }
.consent-inline .consent-all { margin-bottom: 0; }
.consent-inline .consent-all b { color: var(--color-ink-700); font-weight: 800; }
/* 라벨 문구 끝에 붙는 [자세히] */
.consent-inline .consent-all .consent-toggle { margin-left: 8px; white-space: nowrap; }
/* 전체 동의 문구가 길어 두 줄로 넘어가던 것을 한 줄에 담기게 조금 줄입니다.
   (12.5px 에서는 카드 폭 559px 에 552px 이 들어가 줄바꿈이 났습니다) */
.consent-inline .consent-all,
.consent-inline .consent-all .consent-toggle { font-size: 11.5px; }

/* 홈 우측 '10초 간편신청' 동의 묶음 — [자세히]를 오른쪽 위에 띄우면 문구와
   높이가 어긋나 보여, 문구 뒤에 붙이고 세로 중심을 맞춥니다. */
.qa-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}
.qa-consent .qa-agree-all {
  display: inline-flex;
  align-items: center;
  padding-right: 0;
  margin: 0;
}
.qa-consent .consent-toggle {
  position: static;
  margin-left: 0;
  line-height: 1;
  font-size: 11px;
}
.qa-consent .consent-list { flex: 0 0 100%; padding-left: 20px; }

/* ---- 차종별 월납입금: 차량명 검색란 ---- */
.quote-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(360px, 100%);
}
.quote-search-icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--color-ink-500);
  pointer-events: none;
}
.quote-search input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 39px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 14px;
  color: var(--color-ink-900);
}
.quote-search input:focus { outline: none; border-color: var(--color-blue-600); }
.quote-search input::-webkit-search-cancel-button { display: none; }
.quote-search-clear {
  position: absolute;
  right: 10px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #eef1f6;
  color: var(--color-ink-500);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.quote-search-clear:hover { background: #e2e7ef; color: var(--color-ink-700); }

/* 카톡 상담 버튼 임시 숨김 (2026-09-02 요청)
   되살리려면 아래 한 줄만 지우면 됩니다. 마크업은 각 페이지에 그대로 있습니다. */
.fab.kakao { display: none; }

/* 계약기간·조건 칩을 없애고, 목록 바로 위에 작은 기준 문구만 둡니다. (2026-09-02)
   상세견적을 닫아 둔 동안에는 36개월·선납금30% 한 가지 조건만 안내합니다. */
.terms-note {
  margin: 0 0 10px;
  text-align: right;
  font-size: 12.5px;
  color: var(--color-ink-500);
}

/* ---- 차종별 월납입금 카드: 상담 신청 버튼 높이 맞추기 ----
   차량명이 한 줄인 카드와 두 줄인 카드가 섞여 버튼이 들쭉날쭉했습니다.
   ① 본문이 카드 높이를 채우게 하고 ② 버튼을 아래로 밀어 붙이며
   ③ 차량명 자리를 두 줄로 미리 잡아, 가격 줄까지 같은 높이에 오게 합니다. */
.quote-car-body { flex: 1; }
.quote-car-name {
  line-height: 1.35;
  min-height: calc(1.35em * 2);
}
.quote-car-body .btn { margin-top: auto; }

/* ── 상품안내 — 장기렌트카 / 오토리스 탭 (2026-09-02) ─────────────────
   상단 내비게이션처럼 마우스를 올리면 밑줄이 그려지고,
   선택된 탭은 밑줄이 남아 있습니다. */
.product-sec { padding-top: 40px; }

.product-tabs {
  display: flex;
  justify-content: center;
  gap: 50px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 48px;
}
.product-tab {
  position: relative;
  padding: 12px 8px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink-500);
  transition: color 0.18s ease;
}
.product-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-blue-600);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.product-tab:hover,
.product-tab.is-active { color: var(--color-navy-900); }
.product-tab:hover::after,
.product-tab.is-active::after { transform: scaleX(1); }
.product-tab:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 4px; }

.product-panel[hidden] { display: none; }

.product-head { text-align: center; margin-bottom: 46px; }
.product-head h2 {
  font-size: 34px;
  line-height: 1.35;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.product-head h2 b { color: var(--color-blue-600); }
.product-head p {
  margin: 0;
  color: var(--color-ink-500);
  font-size: 16px;
  line-height: 1.75;
}

.product-sub {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  padding-left: 13px;
  border-left: 4px solid var(--color-blue-600);
  line-height: 1.3;
}
.product-panel > .product-sub { margin-top: 46px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.product-card h4 {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
}
.product-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-ink-700);
}

.product-notes,
.product-fit { margin: 0; padding: 0; list-style: none; }
.product-notes li,
.product-fit li {
  position: relative;
  padding: 11px 0 11px 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-700);
  border-bottom: 1px dashed var(--color-line);
}
.product-notes li:last-child,
.product-fit li:last-child { border-bottom: 0; }
.product-notes li b { color: var(--color-navy-900); }
.product-notes li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 13px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--color-orange-100);
  color: var(--color-orange-500);
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.product-fit li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 18px;
  width: 13px;
  height: 7px;
  border-left: 2.4px solid var(--color-blue-600);
  border-bottom: 2.4px solid var(--color-blue-600);
  transform: rotate(-45deg);
}

.product-end {
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--color-blue-50);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-700);
}
.product-end b { color: var(--color-navy-900); }

.product-disclaimer {
  margin: 44px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-ink-500);
}

@media (max-width: 720px) {
  .product-tabs { gap: 30px; margin-bottom: 34px; }
  .product-tab { font-size: 18px; }
  .product-head { margin-bottom: 34px; }
  .product-head h2 { font-size: 25px; }
  .product-head p { font-size: 15px; }
  .product-head p br { display: none; }
  .product-panel > .product-sub { margin-top: 36px; }
  .product-sub { font-size: 18px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { padding: 20px 20px; }
}

/* 이벤트 배너 추가분 — 쏘렌토·레이 (2026-09-02)
   배너 7장 모두 1200×750(16:10)이고 카드도 16:10 이라 잘리는 곳이 없습니다.
   앞으로 다른 비율의 그림이 들어와도 가운데를 잡도록 기존 배너와 같은 규칙을 둡니다. */
.promo-card-sorento .promo-photo { object-fit: cover; object-position: center; }
.promo-card-sorento .avante-heart { top: 12%; right: 14%; }
.promo-card-ray .promo-photo { object-fit: cover; object-position: center; }
.promo-card-ray .avante-heart { top: 12%; right: 14%; }

/* ══ 차종별 프로모션 상세 (promo.html) ═════════════════════════════════
   받은 상세 이미지의 디자인을 옮긴 것입니다. 사진(히어로·차량컷)만
   이미지이고, 글자는 전부 HTML 이라 휴대폰에서도 그대로 읽힙니다.
   차종별 강조색은 --pp-accent 로 들어옵니다. */
.promo-page {
  --pp-accent: #d9ad5c;
  --pp-ink: #1b2436;
  /* 카드 바깥 배경 — 받은 상세 이미지의 대리석 무늬를 그대로 씁니다.
     카드에 가려 양옆 56px 만 온전히 남아 있어, 그 띠를 좌우·상하로 뒤집어
     이어 붙인 무늬(112x4240)로 만들었습니다. 뒤집어 붙였으니 이음매가 없습니다. */
  position: relative;
  background-color: #2c1d12;
  /* 무늬 타일이 112px 라 그대로 깔면 세로줄처럼 반복이 도드라집니다.
     3.4 배로 키워 반복 횟수를 줄이고, 원본 상세 이미지의 어두운 톤에 맞춰
     옅은 어둠을 한 겹 덮습니다. */
  background-image:
    linear-gradient(rgba(22, 14, 8, 0.3), rgba(22, 14, 8, 0.3)),
    url("../img/promo/promo-texture.jpg");
  background-size: auto, 380px auto;
  background-repeat: repeat, repeat;
  padding-bottom: 70px;
  padding-top: 54px;
}

/* 히어로 이미지는 뺐습니다(2026-09-02). 카드가 바로 시작합니다. */
.pp-wrap { position: relative; z-index: 2; }
.pp-card {
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border-radius: 26px;
  padding: 54px 56px 48px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
}

/* ── 머리 : 차종명 · 월 납입금 · 차량컷 ── */
.pp-head {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 24px;
  align-items: center;
}
.pp-eyebrow {
  display: block; margin-bottom: 14px;
  font-size: 16px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--pp-accent);
}
.pp-head h1 {
  margin: 0; font-size: 34px; line-height: 1.25;
  letter-spacing: -0.03em; color: var(--pp-ink);
}
.pp-rule {
  display: block; width: 36px; height: 3px; border-radius: 2px;
  background: var(--pp-accent); margin: 20px 0 26px;
}
.pp-price { margin: 0; font-size: 19px; color: var(--pp-ink); font-weight: 600; }
.pp-price strong {
  font-size: 42px; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 4px 0 6px;
}
.pp-note { margin: 10px 0 0; font-size: 13px; color: var(--color-ink-500); line-height: 1.6; }

.pp-shot { line-height: 0; }
.pp-shot img { width: 100%; height: 100%; max-height: 260px; display: block; }
/* 배경이 있는 스튜디오 컷은 액자처럼 둥글게 감쌉니다(투명 컷과 구분) */
.pp-shot-framed { border-radius: 16px; overflow: hidden; }
.pp-shot-framed img { max-height: 230px; }

/* ── 혜택 ── */
.pp-gift {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 26px;
  margin-top: 40px;
  padding: 24px 30px;
  background: #f4f1ea;
  border-radius: 18px;
}
.pp-gift-icon { width: 62px; }
.pp-gift-icon svg { width: 100%; height: auto; display: block; }
.pp-gift-lead { font-size: 18px; font-weight: 700; color: var(--pp-ink); letter-spacing: -0.02em; }
.pp-gift-strong { margin-top: 8px; font-size: 26px; font-weight: 800; color: var(--pp-accent); letter-spacing: -0.02em; }
.pp-gift-desc p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--color-ink-700); }
.pp-gift-desc .pp-note { margin-top: 10px; }

/* ── 가운데 제목 ── */
.pp-h2 {
  margin: 54px 0 0; text-align: center;
  font-size: 24px; letter-spacing: -0.03em; color: var(--pp-ink);
}
.pp-rule-c { margin: 14px auto 30px; }
.pp-card > .pp-h2:first-of-type { padding-top: 46px; border-top: 1px solid var(--color-line); }

/* ── 왜 장기렌트를 할까? ── */
.pp-why {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; padding: 0; list-style: none;
}
.pp-why li { padding: 0 16px; text-align: center; border-left: 1px solid var(--color-line); }
.pp-why li:first-child { border-left: 0; }
.pp-ico { display: block; width: 52px; margin: 0 auto 16px; color: var(--pp-ink); }
.pp-ico svg { width: 100%; height: auto; display: block; }
.pp-why h3 { margin: 0 0 10px; font-size: 15.5px; letter-spacing: -0.02em; color: var(--pp-ink); }
.pp-why p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--color-ink-500); }

/* ── 이용절차 ── */
.pp-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.pp-steps li { position: relative; text-align: center; padding: 0 8px; }
.pp-steps li + li::before {
  content: "›"; position: absolute; left: -8px; top: 34px;
  font-size: 22px; color: var(--color-ink-300); line-height: 1;
}
.pp-step-ico {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; margin: 0 auto 14px;
  border-radius: 50%; background: #f4f1ea; color: var(--pp-ink);
}
.pp-step-ico svg { width: 40px; height: 40px; display: block; }
.pp-step-no { display: block; font-size: 13px; font-weight: 700; color: var(--color-ink-500); }
.pp-steps h3 { margin: 4px 0 8px; font-size: 15.5px; letter-spacing: -0.02em; color: var(--pp-ink); }
.pp-steps p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-ink-500); }

/* ── 문의 버튼 ── */
.pp-cta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 46px; padding: 22px 28px;
  background: #16233f; color: #fff; border-radius: 14px;
  text-decoration: none; transition: background 0.2s ease, transform 0.2s ease;
}
.pp-cta:hover { background: #1e2f52; transform: translateY(-2px); }
.pp-cta-ico { width: 42px; color: var(--pp-accent); flex: none; }
.pp-cta-ico svg { width: 100%; height: auto; display: block; }
.pp-cta b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pp-cta em { font-style: normal; font-size: 20px; margin-left: 6px; opacity: 0.8; }

/* ── 태블릿 ── */
@media (max-width: 900px) {
  .pp-card { padding: 40px 32px 38px; border-radius: 20px; }
  .pp-head { grid-template-columns: 1fr; gap: 20px; }
  .pp-head h1 { font-size: 29px; }
  .pp-price strong { font-size: 36px; }
  .pp-shot { order: -1; }
  .pp-shot img { max-height: 210px; margin: 0 auto; width: auto; max-width: 100%; }
  .pp-gift { grid-template-columns: auto 1fr; gap: 18px 20px; padding: 22px 22px; }
  .pp-gift-desc { grid-column: 1 / -1; }
  .pp-why { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .pp-why li:nth-child(odd) { border-left: 0; }
  .pp-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 10px; }
  .pp-steps li + li::before { display: none; }
}

/* ── 휴대폰 ── */
@media (max-width: 560px) {
  .promo-page { padding-top: 26px; padding-bottom: 46px; }
  .pp-card { padding: 30px 20px 30px; border-radius: 16px; }
  .pp-head h1 { font-size: 25px; }
  .pp-price { font-size: 17px; }
  .pp-price strong { font-size: 32px; }
  .pp-gift-icon { width: 50px; }
  .pp-gift-strong { font-size: 22px; }
  .pp-h2 { font-size: 21px; margin-top: 42px; }
  .pp-card > .pp-h2:first-of-type { padding-top: 34px; }
  .pp-why li { padding: 0 8px; }
  .pp-why h3 { font-size: 14.5px; }
  .pp-why p, .pp-steps p { font-size: 12.5px; }
  .pp-ico { width: 44px; }
  .pp-step-ico { width: 64px; height: 64px; }
  .pp-step-ico svg { width: 33px; height: 33px; }
  .pp-cta { flex-direction: column; gap: 10px; padding: 20px 18px; text-align: center; }
  .pp-cta b { font-size: 17px; }
  .pp-cta em { display: none; }
}

/* 한글은 단어 중간에서 끊기면 어색합니다("교체까/지"). 낱말 단위로 넘깁니다. */
.pp-why p, .pp-steps p, .pp-gift-desc p { word-break: keep-all; }
@media (max-width: 560px) {
  /* 좁은 폭에서는 넣어 둔 줄바꿈이 오히려 방해가 되므로 자연스럽게 흐르게 둡니다. */
  .pp-why p br, .pp-steps p br { display: none; }
}

/* 푸터 배경 — 로고 네이비로 (2026-09-02)
   기존 --color-navy-900(#0b1f3a)은 색조가 211° 라 초록빛이 살짝 돌았습니다.
   assets/img/logo.png 에서 뽑은 로고 네이비(#0f1f3f, 색조 220°)로 맞췄습니다.
   푸터에만 적용합니다. 변수를 바꾸면 사이트 전체 색이 함께 움직여서입니다. */
.site-footer { background: #0f1f3f; }

/* ══ 상품안내 · 장기렌트 (2026-09-02) ═══════════════════════════════════
   흰 배경 · 검정+네이비 글자 · 네이비 라인 아이콘.
   카드나 색 배경으로 구획을 나누지 않고 넓은 상하 여백으로만 끊습니다.
   회사소개 페이지와 톤을 맞췄습니다. */
.product-sec { background: #fff; }

/* 구분선 색을 한 단계 진하게 (2026-09-03) — 흰 여백 한가운데 홀로 놓인 선이
   너무 옅어 잘 보이지 않는다는 지적. 페이지 안 모든 구분선에 함께 적용됩니다. */
.lr { --lr-navy: #0f1f3f; --lr-line: #d3d9e5; }

.lr-sec { max-width: 900px; margin: 0 auto; padding: 86px 0; border-top: 1px solid var(--lr-line); }
.lr-sec:first-of-type { padding-top: 8px; border-top: 0; }

.lr-no {
  display: block; margin-bottom: 14px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--lr-navy); opacity: 0.55;
}
.lr-h2 {
  margin: 0 0 12px; font-size: 32px; line-height: 1.3;
  letter-spacing: -0.035em; color: #0d1017;
}
.lr-lead { margin: 0 0 30px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--lr-navy); }
.lr-body p { margin: 0 0 14px; font-size: 16px; line-height: 1.85; color: #3c4356; word-break: keep-all; }
.lr-body p:last-child { margin-bottom: 0; }

.lr-h3 { margin: 54px 0 22px; font-size: 19px; letter-spacing: -0.025em; color: var(--lr-navy); }

/* 아이콘 — 전 구간 같은 스타일의 네이비 라인 아이콘 */
.lr-ico { display: block; width: 44px; color: var(--lr-navy); margin-bottom: 18px; }
.lr-ico svg { width: 100%; height: auto; display: block; }
.lr-fact-no { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--lr-navy); opacity: 0.5; }

/* 01 핵심 정보 4가지 */
.lr-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 54px 0 0; padding: 0; list-style: none; }
.lr-facts h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.02em; color: #0d1017; }
.lr-facts p { margin: 0; font-size: 14px; line-height: 1.65; color: #6b7284; word-break: keep-all; }

/* 02 핵심 특징 5가지 — PC 3 + 2 */
.lr-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 34px; margin: 46px 0 0; padding: 0; list-style: none; }
.lr-points h3 { margin: 0 0 10px; font-size: 17px; letter-spacing: -0.025em; color: #0d1017; }
.lr-points p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #3c4356; word-break: keep-all; }

/* 03 렌탈료에 영향을 주는 조건 */
.lr-cond { margin: 0; padding: 0; list-style: none; }
.lr-cond li { display: grid; grid-template-columns: 46px 1fr; gap: 0 6px; padding: 20px 0; border-top: 1px solid var(--lr-line); }
.lr-cond li:first-child { border-top: 0; padding-top: 0; }
.lr-cond-no { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: var(--lr-navy); opacity: 0.5; padding-top: 2px; }
.lr-cond h4 { margin: 0 0 6px; font-size: 16.5px; letter-spacing: -0.02em; color: #0d1017; }
.lr-cond p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #6b7284; word-break: keep-all; }

/* 03 인포그래픽 — 산식이 아니라 관계만 */
.lr-flow { margin: 56px 0 0; padding: 34px 30px; border: 1px solid var(--lr-line); border-radius: 16px; text-align: center; }
.lr-flow-cap { margin-bottom: 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--lr-navy); opacity: 0.6; }
.lr-flow-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lr-flow-item {
  padding: 13px 20px; border: 1px solid var(--lr-navy); border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--lr-navy); letter-spacing: -0.02em;
}
.lr-flow-arrow { display: block; width: 22px; margin: 14px auto 12px; color: var(--lr-navy); opacity: 0.55; }
.lr-flow-arrow svg { width: 100%; height: auto; display: block; }
.lr-flow-out {
  display: inline-block; padding: 15px 40px; border-radius: 999px;
  background: var(--lr-navy); color: #fff;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
}

.lr-quote {
  margin: 40px 0 0; padding-left: 20px;
  border-left: 3px solid var(--lr-navy);
  font-size: 18px; font-weight: 600; line-height: 1.75;
  letter-spacing: -0.025em; color: var(--lr-navy); word-break: keep-all;
}

/* 04 추천 대상 */
.lr-fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 44px; margin: 46px 0 0; padding: 0; list-style: none; }
.lr-fit h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.45; letter-spacing: -0.025em; color: #0d1017; word-break: keep-all; }
.lr-fit p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #3c4356; word-break: keep-all; }

/* 05 FAQ — 기존 아코디언 동작 그대로, 색만 네이비로 */
.lr-faq { max-width: none; }
.lr-faq .accordion-item { border-color: var(--lr-line); }
.lr-faq .accordion-q { color: #0d1017; font-size: 16.5px; letter-spacing: -0.02em; }
.lr-faq .accordion-item.open .accordion-q { color: var(--lr-navy); }
.lr-faq .plus { color: var(--lr-navy); }
.lr-faq .accordion-a-inner { color: #3c4356; line-height: 1.8; word-break: keep-all; }

.lr-disclaimer { margin: 60px 0 0; font-size: 13px; line-height: 1.75; color: #6b7284; word-break: keep-all; }

/* 06 상담 */
.lr-cta-sec {
  max-width: 900px; margin: 86px auto 0; padding: 62px 40px;
  background: #0f1f3f; border-radius: 20px; text-align: center; color: #fff;
}
.lr-no-light { color: #fff; opacity: 0.45; }
.lr-cta-sec h2 { margin: 0 0 16px; font-size: 30px; line-height: 1.4; letter-spacing: -0.035em; color: #fff; }
.lr-cta-sec p { margin: 0 0 32px; font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.72); }
.lr-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 38px; border-radius: 999px;
  background: #fff; color: #0f1f3f;
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lr-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.lr-cta em { font-style: normal; }

/* ── 태블릿 ── */
@media (max-width: 860px) {
  .lr-sec { padding: 62px 0; }
  .lr-h2 { font-size: 27px; }
  .lr-lead { font-size: 16.5px; }
  .lr-body p { font-size: 15.5px; }
  .lr-facts { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; margin-top: 42px; }
  .lr-points { grid-template-columns: repeat(2, 1fr); gap: 38px 28px; }
  .lr-fit { grid-template-columns: 1fr; gap: 38px; }
  .lr-cta-sec { margin-top: 62px; padding: 48px 26px; }
  .lr-cta-sec h2 { font-size: 25px; }
}

/* ── 휴대폰 ── */
@media (max-width: 560px) {
  .lr-sec { padding: 48px 0; }
  .lr-h2 { font-size: 23px; }
  .lr-lead { font-size: 15.5px; margin-bottom: 24px; }
  .lr-lead br, .lr-quote br { display: none; }
  .lr-body p { font-size: 15px; line-height: 1.8; }
  .lr-h3 { margin-top: 40px; font-size: 17px; }
  .lr-ico { width: 38px; margin-bottom: 14px; }
  .lr-facts { gap: 30px 18px; }
  .lr-points { grid-template-columns: 1fr; gap: 32px; }
  .lr-cond li { grid-template-columns: 38px 1fr; padding: 18px 0; }
  .lr-flow { padding: 26px 18px; }
  .lr-flow-item { padding: 11px 16px; font-size: 13.5px; }
  .lr-flow-out { padding: 13px 30px; font-size: 16px; }
  .lr-quote { font-size: 16px; }
  .lr-cta-sec { padding: 42px 20px; border-radius: 16px; }
  .lr-cta-sec h2 { font-size: 22px; }
  .lr-cta-sec h2 br { display: none; }
  .lr-cta-sec p { font-size: 14.5px; }
  .lr-cta { padding: 15px 28px; font-size: 15.5px; }
}

/* 카드 위쪽을 가로지르는 네이비 띠 — 원본 상세 이미지에 있던 요소입니다.
   카드가 흰색이라 좌우 여백에서만 보입니다. 원본 비율(카드 위에서 54px 아래,
   높이 29px, 카드폭 1460 기준)을 지금 카드폭 980 에 맞춰 환산했습니다. */
.promo-page::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  height: 19px;
  background: #0f1f3f;
}
@media (max-width: 560px) {
  .promo-page::before { top: 48px; height: 13px; }
}

/* ── 통이미지 상세 (2026-09-02) ─────────────────────────────────────
   디자인이 한 장으로 되어 있는 차종은 이미지를 그대로 올립니다.
   양옆에 남는 자리는 카드 바깥과 같은 대리석 무늬가 이어집니다. */
/* 폭은 헤더와 같은 식으로 잡습니다. 헤더 안쪽 폭이
     min(1500px, 100vw - 40px) - 좌우 안여백 52px = min(1396px, 100vw - 144px)
   이라, 여기서도 같은 식을 써야 로고 왼끝·상담신청 오른끝과 세로선이 맞습니다.
   원본이 1600px 이라 1396px 까지는 줄여서 그리므로 흐려지지 않습니다. */
.pp-full {
  position: relative;
  width: min(1396px, calc(100vw - 144px));   /* 헤더 안쪽 폭과 같은 값 */
  margin: 0 auto;
  line-height: 0;
}
@media (max-width: 620px) {
  /* 헤더가 좁은 화면에서 안여백 12px 로 바뀌므로 이미지도 화면을 꽉 씁니다. */
  .pp-full { width: 100%; }
}
.pp-full[hidden] { display: none; }
.pp-full img { width: 100%; height: auto; display: block; }

/* 이미지 안 문의 버튼 자리에 겹쳐 두는 진짜 링크.
   원본 1600×3200 에서 버튼은 x 175~1430, y 2945~3110 이라 비율로 잡았습니다.
   이미지 크기가 달라져도 비율이라 따라갑니다. */
.pp-full-cta {
  position: absolute;
  left: 10.9%;
  top: 92%;
  width: 78.5%;
  height: 5.2%;
  border-radius: 14px;
  display: block;
}
.pp-full-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* 통이미지 뒤 배경은 흰색입니다. 대리석 무늬와 네이비 띠는 이미지 안에
   이미 그려져 있으므로 페이지 쪽에서는 그리지 않습니다. */
.promo-page.is-full::before { display: none; }
.promo-page.is-full {
  padding-top: 0;
  padding-bottom: 0;
  background-color: #fff;
  background-image: none;
}

@media (max-width: 560px) {
  .promo-page.is-full { padding-top: 0; padding-bottom: 0; }
  .pp-full-cta { border-radius: 8px; }
}

/* ── 사진이 있는 출고후기 카드 (2026-09-03) ─────────────────────────
   3단 그리드에서 가로 전체를 씁니다. 사진 왼쪽 · 글 오른쪽. */
.review-card-photo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
}
.review-photo { border-radius: 12px; overflow: hidden; line-height: 0; background: #0e1526; }
/* 높이만 고정하고 폭은 사진 비율에 맡깁니다. 가로 사진은 넓게, 세로 사진은
   좁게 들어가서 어느 쪽도 잘리거나 늘어나지 않습니다. */
.review-photo img { height: 260px; width: auto; max-width: 380px; object-fit: cover; display: block; }
.review-card-photo .quote { margin-top: 10px; }
.review-card-photo .review-meta { margin-top: 14px; }

@media (max-width: 780px) {
  .review-card-photo { grid-template-columns: 1fr; gap: 18px; }
  .review-photo { background: transparent; }
  .review-photo img { height: auto; width: auto; max-width: 100%; max-height: 300px; margin: 0 auto; border-radius: 12px; }
}

/* ── 출고후기 상단 통계 보조 표시 (2026-09-03) ──────────────────────
   값만 크게 놓으면 숫자가 무슨 뜻인지 한눈에 안 들어와서, 항목 성격에
   맞는 표시를 한 줄씩 더했습니다. 점수는 별, 비율은 게이지, 기간은 설명. */
/* 세 가지 보조 표시의 줄 높이를 18px 로 통일합니다. 높이가 다르면
   그 아래 항목명 위치가 칸마다 어긋납니다. */
.stat-box strong + .stat-stars,
.stat-box strong + .stat-gauge,
.stat-box strong + .stat-note { margin-top: 10px; height: 18px; }

/* 별 — 회색 별 위에 노란 별을 점수만큼 덮어 그립니다(4.93/5 = 98.6%). */
.stat-stars {
  position: relative;
  /* inline-block 으로 두면 글자 아래 여백까지 줄 높이에 더해져 항목명이
     다른 칸보다 4px 내려갑니다. 글자 폭만큼의 블록으로 두고 가운데 정렬합니다. */
  display: block;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  color: #dfe3ec;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.stat-stars i {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  font-style: normal;
  line-height: 18px;   /* 회색 별과 같은 줄 높이라야 글자가 겹칩니다 */
  color: var(--color-star);
}

/* 게이지 — 비율 항목용.
   막대 자체는 6px 이지만 바깥 상자는 18px 로 잡고 그 안에서 세로 가운데에
   둡니다. 별·아이콘과 줄 높이를 맞추기 위해서입니다. */
.stat-gauge {
  position: relative;
  width: 76%;
  max-width: 150px;
  margin: 10px auto 0;
}
.stat-gauge::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
  background: #e9ecf3;
}
.stat-gauge i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 999px;
  background: var(--color-blue-600);
}

/* 기간 — 게이지로 나타낼 비율이 아니라서 아이콘과 짧은 설명을 둡니다. */
.stat-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-ink-500);
}
.stat-note svg { width: 14px; height: 14px; flex: none; color: var(--color-blue-600); }

/* ── 상품안내 장기렌트 사진 (2026-09-03) ────────────────────────────
   글 중심 페이지라 사진은 섹션 위에 한 장씩만, 본문과 같은 폭으로 둡니다.
   16:9 로 잘라 세로로 너무 커지지 않게 했습니다. */
.lr-figure {
  max-width: 900px;
  margin: 0 auto;
  line-height: 0;
}
.lr-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
/* 01 위 사진은 페이지 첫 요소라 위 여백 없이 시작합니다. */
.lr-figure-top { margin-bottom: 46px; }
/* 04 위 사진 — 앞 섹션(03)이 끝나는 자리에 구분선을 둡니다.
   다른 섹션과 같은 간격(위아래 86px)이라 페이지 흐름이 어긋나지 않습니다.
   선을 사진 아래가 아니라 위에 두는 이유는, 사진이 04 의 도입부라
   03 이 여기서 끝난다는 표시가 사진 앞에 와야 하기 때문입니다. */
.lr-sec + .lr-figure {
  /* 위쪽 여백은 앞 섹션(03)의 아래 여백 86px 이 이미 만들어 줍니다.
     여기에 margin-top 을 또 주면 선 위만 172px 로 벌어져 아래 86px 과
     짝이 안 맞습니다. 그래서 0 입니다. */
  margin-top: 0;
  padding-top: 86px;
  border-top: 1px solid var(--lr-line);
}
/* 사진이 이미 04 와 붙어 있으므로 04 쪽 구분선은 두지 않습니다. */
.lr-figure + .lr-sec.lr-sec-afterfig { border-top: 0; padding-top: 46px; }

@media (max-width: 860px) {
  .lr-figure-top { margin-bottom: 34px; }
  .lr-sec + .lr-figure { padding-top: 62px; }
  .lr-figure + .lr-sec.lr-sec-afterfig { padding-top: 34px; }
  .lr-figure img { border-radius: 12px; }
}
@media (max-width: 560px) {
  .lr-figure img { aspect-ratio: 4 / 3; }
  .lr-sec + .lr-figure { padding-top: 48px; }
}

/* 인용구 아래 덧붙이는 짧은 안내 한 줄 (리스 탭 03의 자동차세 안내) */
.lr-note-line {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-ink-500);
  word-break: keep-all;
}

/* 홈 출고후기 머리말 (2026-09-03) — 제목 한 줄만 가운데 놓입니다.
   부제목과 오른쪽 만족도 상자는 뺐습니다. */
.delivery-review-head {
  position: relative;
  justify-content: center;
  /* 기존 규칙의 align-items: flex-end 는 세로 배치로 바뀌는 좁은 화면에서
     자식을 오른쪽 끝으로 밀어 버립니다. 가운데로 덮어씁니다. */
  align-items: center;
  text-align: center;
}
.dr-head-text { flex: 1 1 auto; width: 100%; }
/* 만족도 상자와 부제목은 뺐습니다(2026-09-03). 제목 한 줄만 가운데 놓입니다. */

/* 상담 접수 전송 실패 안내 (lead-submit.js). 폼을 남겨 둔 채 위쪽에 뜹니다. */
.form-send-error {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #f0c2c2;
  border-left: 3px solid #d94b4b;
  border-radius: 6px;
  background: #fdf3f3;
  color: #a02a2a;
  font-size: 14px;
  line-height: 1.55;
}

/* 화면에는 안 보이지만 검색엔진·화면낭독기는 읽는 텍스트.
   디자인상 자리가 없는 곳에 페이지 제목(H1)을 두기 위해 씁니다.
   display:none 과 달리 실제로 읽히는 콘텐츠입니다. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 상품안내 페이지 제목 — 탭 위에 놓입니다. */
.product-page-title {
  margin: 0 0 6px;
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-navy-900);
}
.product-page-lead {
  margin: 0 0 26px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gray-600, #5b6577);
}

/* ── 포스터(통이미지) 아래 설명 글 ─────────────────────────────────────────
   차종 이름으로 검색해 들어온 분이 읽을 내용입니다.
   포스터가 그림 한 장이라 이 글이 그 페이지의 유일한 본문입니다. */
.pp-copy {
  background: #fff;
  padding: 64px 0 72px;
  border-top: 1px solid var(--color-line, #e6e9f0);
}
.pp-copy[hidden] { display: none; }
.pp-copy .container { max-width: 820px; }

.pp-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-navy-900, #0f1f3f);
}
.pp-copy-lead {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.65;
  color: #46506a;
}
.pp-copy h2 {
  margin: 40px 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-navy-900, #0f1f3f);
}
.pp-copy-body p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: #3d4657;
}
.pp-copy-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.pp-copy-list li {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.75;
  color: #3d4657;
}
.pp-copy-list li strong { color: var(--color-navy-900, #0f1f3f); }

.pp-copy-faq { margin: 0; }
.pp-copy-faq dt {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy-900, #0f1f3f);
}
.pp-copy-faq dt::before { content: "Q. "; color: var(--pp-accent, #2f6feb); }
.pp-copy-faq dd {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: #3d4657;
}

.pp-copy-note {
  margin: 32px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f5f7fb;
  font-size: 13.5px;
  line-height: 1.65;
  color: #66708a;
}
.pp-copy-cta { margin: 32px 0 0; text-align: center; }

@media (max-width: 640px) {
  .pp-copy { padding: 44px 0 52px; }
  .pp-copy-lead { font-size: 16px; margin-bottom: 26px; }
  .pp-copy h2 { margin-top: 32px; font-size: 19px; }
}

/* 홈 간편상담 — 어두운 카드 안이라 글자색이 흰색으로 상속되는데,
   입력칸 배경은 흰색이라 글자가 보이지 않았습니다. 입력칸만 진한 색으로 되돌립니다. */
.quick-consult-form .field {
  color: var(--color-navy-900, #0b1f3a);
  -webkit-text-fill-color: var(--color-navy-900, #0b1f3a);   /* iOS 사파리 대비 */
}

/* 접수 완료 안내 — 폼이 있던 자리에 나타납니다. */
.quick-consult-done {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.quick-consult-done[hidden] { display: none; }
.quick-consult-done .qcd-mark {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #2f6feb;
  color: #fff;
}
.quick-consult-done .qcd-mark svg { width: 22px; height: 22px; }
.quick-consult-done strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.quick-consult-done p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* 전송 실패 안내 (어두운 카드용) */
.quick-consult-form .form-send-error {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  background: rgba(217, 75, 75, 0.14);
  border-color: rgba(255, 154, 146, 0.5);
  border-left-color: #ff9a92;
  color: #ffd7d4;
}

/* hidden 속성은 항상 통해야 합니다.
   .quick-consult-form 처럼 display:grid / flex 가 걸린 요소는 그 값이
   브라우저 기본 [hidden] 규칙보다 우선해서, hidden 을 켜도 안 사라집니다.
   (홈 간편상담에서 접수 후에도 폼이 남아 "접수 중..." 이 그대로 보이던 원인)
   앞으로 같은 문제가 생기지 않도록 한 줄로 못박아 둡니다. */
[hidden] { display: none !important; }

/* ── 회사소개 · 오시는 길 지도 ─────────────────────────────────────────── */
/* 카카오맵 "지도 퍼가기" iframe 이 들어오면 칸을 꽉 채우게 합니다.
   퍼가기 코드는 고정 크기(width/height 인라인)로 나오는데,
   그대로 두면 모바일에서 잘리므로 여기서 덮어씁니다. */
.ab-map { padding: 0; overflow: hidden; }
.ab-map > .ab-map-empty { padding: 24px; margin: 0; text-align: center; }
.ab-map iframe,
.ab-map .root_daum_roughmap,
.ab-map .root_daum_roughmap .wrap_map {
  width: 100% !important;
  min-height: 380px;
  height: 380px !important;
  border: 0;
  display: block;
}
/* 카카오 퍼가기 코드가 달고 오는 하단 로고줄은 지도 안에서 겹치지 않게 */
.ab-map .root_daum_roughmap { margin: 0; }

.ab-map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* 지도 아래 가운데 정렬 */
  gap: 10px;
  margin-top: 24px;
}
.ab-map-actions .ab-map-link { margin-top: 0; }
.ab-map-copy {
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.ab-map-copy svg { width: 17px; height: 17px; }
.ab-map-copy.is-done { background: var(--ab-navy); color: #fff; }

.ab-map-badge {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.ab-map-badge-n { background: #03c75a; }
.ab-map-badge-k { background: #ffe812; color: #3c1e1e; }
.ab-map-link:hover .ab-map-badge-k { color: #3c1e1e; }

@media (max-width: 640px) {
  .ab-map-actions { flex-direction: column; }
  .ab-map-actions .ab-map-link { width: 100%; justify-content: center; }
  /* 바깥 틀과 지도 본체 높이를 함께 줄여야 아래에 빈 칸이 생기지 않습니다. */
  .ab-map { min-height: 300px; }
  .ab-map iframe,
  .ab-map .root_daum_roughmap,
  .ab-map .root_daum_roughmap .wrap_map { height: 300px !important; min-height: 300px; }
}