/* =========================================================
   KAREUREUNG — 화이트 프리미엄 디자인 시스템
   base: Bootstrap 5.3 / font: SUIT Variable / icons: Bootstrap Icons
   ========================================================= */
@font-face {
    font-family: 'SUIT Variable';
    font-weight: 100 900;
    src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations');
    font-display: swap;
}

:root {
    /* ── 브랜드 팔레트 (관리자에서 변경 가능) ──────────────
       --brand        딥 틸        #2a9a9f  기본 강조 (버튼·링크)
       --brand-deep   딥 청록      #228a90  진한 강조 (hover)
       --brand-light  민트 터콰이즈 #5acdcf  밝은 포인트 (배지·하이라이트)
       --cream        크림 베이지   #f1ddca  따뜻한 보조 (섹션 배경)
       블랙 #17181a / 화이트 #ffffff 는 기본 텍스트·배경으로 사용 */
    --brand: #2a9a9f;
    --brand-deep: #228a90;
    --brand-light: #5acdcf;
    --cream: #f1ddca;
    --brand-soft: #ecf7f7;
    --brand-line: #bde5e7;
    --cream-soft: #fbf4ec;

    --ink: #17181a;
    --ink-soft: #3d3f43;
    --muted: #6f7178;
    --muted-soft: #9a9ca3;
    --line: #e8e8ec;
    --line-soft: #f3f3f6;
    --bg: #ffffff;
    --bg-soft: #fafafb;
    --bg-warm: var(--cream-soft);

    /* 기존 변수명 호환 별칭 — 전 화면이 브랜드 색으로 전환됨 */
    --gold: var(--brand);
    --gold-deep: var(--brand-deep);
    --gold-soft: var(--brand-soft);
    --gold-line: var(--brand-line);
    --red: #d6453d;
    --green: #2f7d5c;
    --blue: #2b5cad;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(23, 24, 26, .05);
    --shadow: 0 4px 16px rgba(23, 24, 26, .07);
    --shadow-lg: 0 18px 48px rgba(23, 24, 26, .13);
    /*
     | 헤더 높이. 값이 실제보다 작으면 sticky 박스와 #앵커 가 헤더 밑으로 들어가 위가 잘린다.
     | 헤더가 2단이라 화면 폭에 따라 높이가 바뀌므로, site.js 가 실제로 재서 이 값을 덮어쓴다.
     | 여기 적힌 것은 자바스크립트가 돌기 전까지 쓸 임시값이다.
     */
    --header-h: 134px;
    --wrap: 1280px;
}

* { -webkit-tap-highlight-color: transparent; }

html {
    /* #앵커 로 뛸 때 헤더 높이만큼 띄운다. 없으면 목적지 위가 헤더에 먹힌다. */
    scroll-padding-top: calc(var(--header-h) + 18px); scroll-behavior: smooth; }
/* 어떤 이유로든 가로로 삐져나오는 요소가 있어도 화면이 밀리지 않게 (sticky 는 유지) */
html, body { overflow-x: clip; }

body {
    font-family: 'SUIT Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -0.012em;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}
/* 숫자는 자리수가 흔들리지 않게 (가격·통계 가독성) */
.num, .price, strong, b, td, th, .stat, [class*="price"], [class*="won"] {
    font-variant-numeric: tabular-nums;
}
/* 제목은 조금 더 단단하게 */
h1, h2, h3, h4, .h1, .h2, .h3 { letter-spacing: -0.03em; }

.container-x {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3, h4, h5, .fw-display {
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.28;
}

.num { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

img { max-width: 100%; }

::selection { background: var(--gold-soft); color: var(--gold-deep); }

/* ---------- 버튼 ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 700; letter-spacing: -0.02em; }
.btn-ink {
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
    transition: background .16s, transform .16s;
}
.btn-ink:hover { background: #000; color: #fff; transform: translateY(-1px); }
.btn-gold {
    background: var(--gold); color: #fff; border: 1px solid var(--gold);
    transition: background .16s, transform .16s;
}
.btn-gold:hover { background: var(--gold-deep); color: #fff; transform: translateY(-1px); }
.btn-outline-ink { border: 1px solid var(--ink); color: var(--ink); background: #fff; }
.btn-outline-ink:hover { background: var(--ink); color: #fff; }
.btn-outline-soft { border: 1px solid var(--line); color: var(--ink-soft); background: #fff; }
.btn-outline-soft:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.btn-lg { padding: .85rem 1.9rem; font-size: 16px; }

/* ---------- 상단 유틸리티 바 ---------- */
.topbar {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12.5px;
    height: 36px;
    display: flex;
    align-items: center;
}
.topbar a { color: var(--muted); transition: color .15s; }
.topbar a:hover { color: var(--ink); }
.topbar .divider { width: 1px; height: 11px; background: var(--line); }
.topbar .tel { color: var(--gold-deep); font-weight: 800; letter-spacing: .02em; }
/* 상단바 좌측 — 1위 배지 + 롤링 문구 */
.tb-left { min-width: 0; }
.tb-crown {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px 3px 9px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--brand-soft), #fff);
    border: 1px solid var(--brand-line);
    color: var(--brand-deep);
    font-size: 12px; font-weight: 800; letter-spacing: -0.02em;
    white-space: nowrap;
}
.tb-crown i { font-size: 12.5px; color: #e0a83a; }
.tb-crown b { font-weight: 900; }

/* 한 줄씩 위로 올라가는 롤링 */
.tb-roll { height: 18px; overflow: hidden; align-items: center; }
.tb-roll-track {
    display: block;
    animation: tbRoll 20s cubic-bezier(.6,0,.2,1) infinite;
}
.tb-roll-track b {
    display: flex; align-items: center; gap: 6px;
    height: 18px; line-height: 18px;
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    white-space: nowrap;
}
.tb-roll-track b i { font-size: 12.5px; color: var(--brand); }
@keyframes tbRoll {
    0%, 16%   { transform: translateY(0); }
    20%, 36%  { transform: translateY(-18px); }
    40%, 56%  { transform: translateY(-36px); }
    60%, 76%  { transform: translateY(-54px); }
    80%, 96%  { transform: translateY(-72px); }
    100%      { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .tb-roll-track { animation: none; } }
@media (max-width: 576px) { .tb-crown { font-size: 11px; padding: 2px 9px 2px 7px; } }

.topbar-sfx {
    border: 0; background: none; padding: 0;
    color: var(--muted); font-size: 13.5px; line-height: 1;
    display: inline-flex; align-items: center;
    transition: color .14s;
}
.topbar-sfx:hover { color: var(--brand-deep); }
.topbar-sfx.off { color: var(--muted-soft); }
.topbar-allsvc {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: none;
    color: var(--ink); font-size: 12.5px; font-weight: 800;
    padding: 0;
}
.topbar-allsvc i { font-size: 10px; color: var(--muted); transition: transform .2s; }
.topbar-allsvc:hover i { transform: translateY(1px); }
body.allsvc-open .topbar-allsvc i { transform: rotate(180deg); }

/* ---------- 헤더 (2단 구조) ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

/* 1단: 로고 + 검색 + 유틸 */
.hdr-main { background: #fff; }
.hdr-main-inner {
    display: flex;
    align-items: center;
    gap: 34px;
    height: 84px;
    min-width: 0;
}
.brand-logo { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
.brand-logo-img {
    height: 52px; width: auto; display: block;
    max-width: 100%;
}
/*
 | 로고 안의 "카르" 글자가 진한 남색이라 어두운 footer 에 얹으면 뭉개져 보인다.
 | 옅은 흰 판을 깔아 글자가 살아나게 하고, 크기도 조금 키운다.
 */
.footer-logo-img {
    height: 52px; width: auto; display: block;
    background: rgba(255,255,255,.94);
    border-radius: 14px;
    padding: 7px 14px;
    box-sizing: content-box;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
@media (max-width: 576px) { .footer-logo-img { height: 42px; padding: 6px 11px; } }

/* 브랜드 로고 공통 */
.logo-fx {
    position: relative; display: block;
    height: 52px; aspect-ratio: 900 / 321;
    flex-shrink: 0;
    line-height: 0;
}
.logo-fx.brand-logo-img { height: 54px; }
/* 상단 좌측 로고 — 마우스오버 시 젤리처럼 한 번 눌렸다 튄다 */
.brand-logo:hover .logo-fx { animation: logoJelly .62s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes logoJelly {
      0% { transform: scale(1, 1); }
     18% { transform: scale(1.12, .86); }
     36% { transform: scale(.9, 1.12); }
     54% { transform: scale(1.06, .94); }
     72% { transform: scale(.97, 1.03); }
     86% { transform: scale(1.02, .99); }
    100% { transform: scale(1, 1); }
}
.brand-logo .logo-fx { transform-origin: center bottom; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
    .brand-logo:hover .logo-fx { animation: none; }
}
.logo-fx.footer-logo-img { height: 48px; }
.logo-fx.login-logo-img { height: 76px; margin: 0 auto; }
@media (max-width: 576px) { .logo-fx.brand-logo-img { height: 40px; } }

/* (A) 상단 좌측 — PixiJS 스프라이트, 마우스오버할 때만 재생 */
.logo-fx--sprite canvas { display: block; width: 100%; height: 100%; }
.logo-fx-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain;
    transition: opacity .3s ease;
}
.logo-fx--sprite.pixi-ready .logo-fx-fallback { opacity: 0; }

/* (B) 그 외 — 정지 로고 + 실루엣을 따라 흐르는 광택 */
.logo-fx--shine { aspect-ratio: 1200 / 389; }
.logo-fx-img {
    display: block; width: 100%; height: 100%; object-fit: contain;
    position: relative; z-index: 1;
}
.logo-sheen,
.logo-glow {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    -webkit-mask-image: var(--logo-src); mask-image: var(--logo-src);
    -webkit-mask-size: contain;         mask-size: contain;
    -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
    -webkit-mask-position: center;      mask-position: center;
}
.logo-sheen {
    background: linear-gradient(104deg,
        rgba(255,255,255,0) 34%,
        rgba(255,255,255,.30) 45%,
        rgba(255,255,255,.92) 50%,
        rgba(255,255,255,.30) 55%,
        rgba(255,255,255,0) 66%);
    background-size: 260% 100%;
    background-position: 210% 0;
    opacity: 0;
    mix-blend-mode: screen;
}
.logo-glow {
    background: radial-gradient(60% 120% at 50% 50%, rgba(90,205,207,.55), rgba(90,205,207,0) 70%);
    opacity: 0;
    mix-blend-mode: screen;
}
@keyframes logoSheen {
    0%   { background-position: 210% 0; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { background-position: -70% 0; opacity: 0; }
}
@keyframes logoGlow { 0%, 100% { opacity: 0; } 45% { opacity: .5; } }
.logo-fx.shine .logo-sheen { animation: logoSheen 1.15s cubic-bezier(.35,0,.2,1); }
.logo-fx.shine .logo-glow  { animation: logoGlow  1.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .logo-fx.shine .logo-sheen, .logo-fx.shine .logo-glow { animation: none; }
}

/* 대형 검색바 */
.hdr-search {
    flex: 1 1 0;
    min-width: 0;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 6px 0 20px;
    border: 2px solid var(--ink);
    border-radius: 100px;
    background: #fff;
    transition: box-shadow .16s;
}
.hdr-search:focus-within { box-shadow: 0 6px 20px rgba(23,24,26,.12); }
.hdr-search-ico { font-size: 18px; color: var(--muted); margin-right: 10px; }
.hdr-search input {
    flex: 1 1 0;
    width: 0;                 /* input 고유 너비(size=20) 제거 — 좁은 화면에서 헤더가 밀리지 않게 */
    border: 0; outline: none; background: none;
    font-size: 15px; font-weight: 500; color: var(--ink);
    min-width: 0;
}
.hdr-search input::placeholder { color: var(--muted-soft); font-weight: 500; }
.hdr-search-btn {
    flex-shrink: 0;
    height: 40px; padding: 0 22px;
    font-size: 14.5px;
}

/* 헤더 이벤트 티커 */
.hdr-event {
    display: flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 6px 0 10px;
    border: 1px solid var(--line); border-radius: 100px;
    background: #fff;
    max-width: 300px;
    flex-shrink: 0;
}
.hdr-event-tag {
    flex-shrink: 0;
    background: var(--gold-soft); color: var(--gold-deep);
    font-size: 10.5px; font-weight: 900; letter-spacing: .06em;
    border-radius: 100px; padding: 4px 9px;
}
.hdr-event-viewport { position: relative; overflow: hidden; height: 20px; flex: 1; min-width: 0; }
.hdr-event-track { display: block; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.hdr-event-item {
    display: block; height: 20px; line-height: 20px;
    font-size: 13px; font-weight: 700; color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hdr-event-item:hover { color: var(--gold-deep); }
.hdr-event-more {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 12px;
    transition: background .14s, color .14s;
}
.hdr-event-more:hover { background: var(--bg-soft); color: var(--ink); }

/* 우측 유틸 */
.hdr-utils { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.hdr-util-tel { text-align: right; line-height: 1.2; }
.hdr-util-tel small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.hdr-util-tel strong { font-size: 20px; font-weight: 900; letter-spacing: -0.01em; color: var(--ink); }
/* 빠른견적 — 브랜드 이미지 버튼 (원본 비율 3.657:1 유지) */
/* 빠른견적 — 딥틸 알약 + 흰 원형 번개 아이콘 (이미지 대신 CSS 로 선명하게) */
.hdr-quote-btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 10px;
    flex-shrink: 0;
    height: 46px; padding: 0 8px 0 22px;
    border-radius: 100px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%),
        linear-gradient(165deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
    box-shadow:
        0 5px 14px rgba(var(--brand-rgb), .30),
        inset 0 1px 0 rgba(255,255,255,.4);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.hdr-quote-btn > * { position: relative; z-index: 2; }
.hdr-quote-btn .qb-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; color: var(--brand-deep);
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.14);
    flex-shrink: 0;
}
/* 은은한 광택 스캔 */
.hdr-quote-btn::after {
    content: ''; position: absolute; z-index: 1;
    top: -50%; bottom: -50%; width: 30%; left: -45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
    transform: skewX(-18deg);
    animation: btnGloss 5.5s ease-in-out infinite;
    pointer-events: none;
}
.hdr-quote-btn:hover {
    color: #fff; transform: translateY(-1px); filter: brightness(1.05);
    box-shadow: 0 9px 20px rgba(var(--brand-rgb), .38), inset 0 1px 0 rgba(255,255,255,.5);
}
.hdr-quote-btn:active { transform: translateY(0); }
.hamburger { display: none; border: 0; background: none; font-size: 27px; color: var(--ink); }

/* 네비 드롭다운 (특별상품 · 고객사례 · 고객지원) */
.hdr-drop { position: relative; }
.hdr-drop-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: none;
    padding: 8px 13px;
    font-size: 15px; font-weight: 700; color: var(--muted);
    letter-spacing: -0.02em;
    transition: color .14s;
}
.hdr-drop-btn > .bi { font-size: 10px; transition: transform .2s; }
.hdr-drop.active .hdr-drop-btn { color: var(--ink); font-weight: 800; }
.hdr-drop:hover .hdr-drop-btn > .bi { transform: rotate(180deg); }
/* 버튼과 메뉴 사이 hover 브리지 */
.hdr-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.hdr-drop-menu {
    position: absolute; top: calc(100% + 10px); left: 50%;
    /* translateX 를 유지한 채 Y 만 움직여야 좌우로 튀지 않는다 */
    transform: translateX(-50%) translateY(-7px);
    min-width: 268px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 1036;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .18s ease,
        transform .24s cubic-bezier(.22,.61,.36,1),
        visibility 0s linear .18s;
}
.hdr-drop:hover .hdr-drop-menu,
.hdr-drop:focus-within .hdr-drop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity .18s ease,
        transform .24s cubic-bezier(.22,.61,.36,1),
        visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    .hdr-drop-menu { transition: opacity .12s linear, visibility 0s linear .12s; transform: translateX(-50%); }
    .hdr-drop:hover .hdr-drop-menu { transform: translateX(-50%); }
}
.hdr-drop-menu a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 11px;
    text-decoration: none;
    transition: background .13s;
}
.hdr-drop-menu a:hover { background: var(--brand-soft); }
.hdr-drop-menu a > i {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft); color: var(--brand-deep);
    font-size: 15px;
    transition: background .13s, color .13s;
}
.hdr-drop-menu a:hover > i { background: var(--brand); color: #fff; }
.hdr-drop-menu span { display: flex; flex-direction: column; min-width: 0; }
.hdr-drop-menu b { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.hdr-drop-menu em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }

/* 2단: 카테고리 + 네비게이션 */
.hdr-cat { border-top: 1px solid var(--line-soft); background: #fff; }
.hdr-cat-inner { display: flex; align-items: center; gap: 24px; height: 54px; }

/* 전체 차량 메가메뉴 */
.hdr-all { position: relative; flex-shrink: 0; }
.hdr-all-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 20px;
    border: 0; border-radius: 10px;
    background: var(--ink); color: #fff;
    font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
}
.hdr-all-btn > .bi-chevron-down { font-size: 11px; transition: transform .2s; }
.hdr-all.open .hdr-all-btn > .bi-chevron-down { transform: rotate(180deg); }
.hdr-mega {
    position: absolute; top: calc(100% + 10px); left: 0;
    width: min(1180px, calc(100vw - 40px));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 26px 28px 20px;
    z-index: 1035;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 0 28px;
}
.hdr-all .hdr-mega {
    display: grid;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-7px);
    transition: opacity .18s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s linear .18s;
}
.hdr-all.open .hdr-mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .18s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* 버튼과 패널 사이 hover 브리지 — 마우스 이동 중 닫히지 않도록 */
.hdr-all::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.hdr-all.open::after { pointer-events: auto; }

.hdr-mega-main { min-width: 0; }
.hdr-mega-col--side {
    border-left: 1px solid var(--line-soft);
    padding-left: 26px;
    min-width: 0;
}
.hdr-mega-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 900; color: var(--brand-deep);
    letter-spacing: .06em; margin-bottom: 12px;
}
.hdr-mega-title::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.hdr-mega-title + .hdr-mega-brands { margin-bottom: 22px; }

/* 브랜드 칩 그리드 — 열 수가 자동으로 맞아 빈칸이 생기지 않는다 */
.hdr-mega-brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 6px;
}
.hdr-mega-brands a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px;
    border: 1px solid transparent; border-radius: 11px;
    font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
    background: var(--bg-soft);
    transition: background .14s, color .14s, border-color .14s, transform .14s;
}
.hdr-mega-brands a:hover {
    background: var(--brand-soft); border-color: var(--brand-line);
    color: var(--brand-deep); transform: translateY(-1px);
}
.hdr-mega-brands a img {
    width: 30px; height: 20px; object-fit: contain; flex-shrink: 0;
    filter: grayscale(1); opacity: .75; transition: filter .14s, opacity .14s;
}
.hdr-mega-brands a:hover img { filter: none; opacity: 1; }
.hdr-mega-brands a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-mega-brands a em {
    font-style: normal; font-size: 11px; font-weight: 800;
    color: var(--muted-soft); flex-shrink: 0;
}
.hdr-mega-brands a:hover em { color: var(--brand); }

.hdr-mega-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hdr-mega-links--2 { grid-template-columns: 1fr 1fr; }
.hdr-mega-links--2 a { font-weight: 800; }
.hdr-mega-links a {
    display: flex; align-items: center; justify-content: center;
    padding: 9px 6px;
    border: 1px solid var(--line); border-radius: 9px;
    font-size: 13px; font-weight: 700; color: var(--ink-soft);
    transition: all .14s;
}
.hdr-mega-links a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.hdr-mega-col--side .hdr-mega-title:not(:first-child) { margin-top: 20px; }

.hdr-mega-foot {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.hdr-mega-foot-txt { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hdr-mega-foot-txt strong { color: var(--ink); font-weight: 900; }
.hdr-mega-foot a {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ink); color: #fff;
    font-size: 13px; font-weight: 800;
    border-radius: 100px; padding: 9px 20px;
    transition: background .14s;
}
.hdr-mega-foot a:hover { background: #000; color: #fff; }
@media (max-width: 1240px) {
    .hdr-mega { grid-template-columns: minmax(0, 1fr); }
    .hdr-mega-col--side { border-left: 0; padding-left: 0; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
    .hdr-mega-links { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- 전체서비스 오버레이 ---------- */
.allsvc {
    position: fixed; inset: 0; z-index: 1060;
    background: rgba(23,24,26,.42);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.allsvc.open { opacity: 1; pointer-events: auto; }
.allsvc-head {
    background: linear-gradient(120deg, #1d1e22, #2a2b30);
    color: #fff;
    padding: 26px 0;
    transform: translateY(-100%);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.allsvc.open .allsvc-head { transform: none; }
.allsvc-head h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; margin: 0; color: #fff; }
.allsvc-close { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }
.allsvc-close:hover { background: rgba(255,255,255,.24); }
.allsvc-body {
    background: #fff;
    padding: 30px 0 34px;
    max-height: calc(100vh - 120px); overflow-y: auto;
    transform: translateY(-100%);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.allsvc.open .allsvc-body { transform: none; }
.allsvc-row { display: flex; align-items: flex-start; gap: 22px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.allsvc-label { width: 110px; flex-shrink: 0; font-size: 13.5px; font-weight: 900; color: var(--ink); padding-top: 5px; }
.allsvc-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.allsvc-links a {
    font-size: 14px; font-weight: 600; color: var(--ink-soft);
    padding: 5px 13px; border-radius: 100px;
    transition: all .14s;
}
.allsvc-links a:hover { background: var(--gold-soft); color: var(--gold-deep); font-weight: 800; }
.allsvc-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px; align-items: center;
    margin-top: 34px; padding: 24px 28px;
    border-radius: 20px;
    background:
        radial-gradient(90% 140% at 90% 10%, rgba(var(--brand-rgb), .3), transparent 58%),
        linear-gradient(140deg, #1c1f23 0%, #14171a 62%, #101315 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.allsvc-cta-mascot { width: 74px; height: 74px; object-fit: contain; flex-shrink: 0; }
.allsvc-cta-txt { min-width: 0; }
.allsvc-cta-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 900; letter-spacing: .02em;
    color: var(--brand-light); margin-bottom: 6px;
}
.allsvc-cta-txt strong {
    display: block; font-size: 18px; font-weight: 800; color: #fff;
    letter-spacing: -.03em; line-height: 1.45; margin-bottom: 4px;
}
.allsvc-cta-txt small { font-size: 12.5px; color: rgba(255,255,255,.52); }
.allsvc-cta-act { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }
.allsvc-tel {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.02em;
}
.allsvc-tel i { font-size: 17px; color: var(--brand-light); }
.allsvc-tel:hover { color: var(--brand-light); }
.allsvc-cta-btns { display: flex; gap: 7px; }
.allsvc-kakao, .allsvc-quote {
    display: inline-flex; align-items: center; gap: 5px;
    height: 36px; padding: 0 15px; border-radius: 10px;
    font-size: 12.5px; font-weight: 800;
    transition: all .14s;
}
.allsvc-kakao { background: #fee500; color: #191600; }
.allsvc-kakao:hover { background: #ffe94d; color: #191600; transform: translateY(-1px); }
.allsvc-quote {
    background: linear-gradient(180deg, var(--brand-light), var(--brand) 55%, var(--brand-deep));
    color: #fff; box-shadow: 0 5px 14px rgba(var(--brand-rgb), .36);
}
.allsvc-quote:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); }

@media (max-width: 768px) {
    .allsvc-row { flex-direction: column; gap: 6px; }
    .allsvc-label { width: auto; padding-top: 0; }
    .allsvc-cta { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 22px 18px; }
    .allsvc-cta-mascot { margin: 0 auto; width: 62px; height: 62px; }
    .allsvc-cta-tag { justify-content: center; }
    .allsvc-cta-act { align-items: stretch; }
    .allsvc-tel { justify-content: center; font-size: 24px; }
    .allsvc-cta-btns > * { flex: 1; justify-content: center; }
}

/* ---------- 최근 본 차량 (우측 도크) ---------- */
/* ---------- 차량 상세: 상세 견적 조건 ---------- */
.quote-more {
    margin-top: 6px;
    border-top: 1px dashed var(--line);
    padding-top: 12px;
}
.quote-more > summary {
    display: flex; align-items: center; gap: 10px;
    list-style: none; cursor: pointer;
    padding: 9px 12px; border-radius: 11px;
    background: var(--bg-soft); border: 1px solid var(--line);
    font-size: 13px; font-weight: 800; color: var(--ink);
    transition: border-color .14s, background .14s;
}
.quote-more > summary::-webkit-details-marker { display: none; }
.quote-more > summary:hover { border-color: var(--brand); background: var(--brand-soft); }
.quote-more > summary > span { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.quote-more > summary > span i { color: var(--brand-deep); }
.quote-more > summary em {
    font-style: normal; font-weight: 700; font-size: 11.5px; color: var(--muted);
    margin-left: auto; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quote-more > summary .caret { flex-shrink: 0; font-size: 11px; color: var(--muted); transition: transform .2s; }
.quote-more[open] > summary .caret { transform: rotate(180deg); }
.quote-more[open] > summary { border-color: var(--brand); background: var(--brand-soft); }
.quote-more[open] > summary em { display: none; }
.quote-more .opt-group { margin-top: 16px; }
.opt-note { font-size: 11.5px; color: var(--muted); margin: 7px 2px 0; }
.glabel small { font-weight: 600; font-size: 11px; color: var(--muted); margin-left: 6px; }

/* 미니 타일 — 항목이 많은 상세 조건용 */
.opts--mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.opts--mini.opts--2 { grid-template-columns: repeat(2, 1fr); }
.opts--mini button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 10px 11px;
    border: 1px solid var(--line); border-radius: 11px;
    background: #fff; text-align: left;
    transition: border-color .14s, background .14s, transform .14s;
}
.opts--mini button b { font-size: 12.5px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
.opts--mini button em { font-style: normal; font-size: 10.5px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.opts--mini button:hover { border-color: var(--brand); transform: translateY(-1px); }
.opts--mini button.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.opts--mini button.on b { color: var(--brand-deep); }

/* 외장 색상 */
.color-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.color-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 7px;
    border: 1px solid var(--line); border-radius: 100px; background: #fff;
    font-size: 12px; font-weight: 700; color: var(--ink-soft);
    transition: border-color .14s, color .14s;
}
.color-chip .dot {
    width: 18px; height: 18px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(23,24,26,.16);
    flex-shrink: 0;
}
.color-chip:hover { border-color: var(--brand); }
.color-chip.on { border-color: var(--brand); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand); }

@media (max-width: 576px) {
    .opts--mini { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 최저가 검색 섹션 ----------
   바로 위 모델 검색과 같은 톤이면 두 도구가 한 덩어리로 뭉쳐 보인다.
   크림 톤 + 위아래 실선으로 "여기부터 다른 도구" 라는 걸 눈으로 알게 한다. */
.lp-sec {
    position: relative;
    /* 그라데이션은 얼룩져 보인다 — 단색 쿨그레이로 위(흰색 모델검색)와 확실히 나눈다 */
    background: #eef2f4;
    border-top: 1px solid #dfe6e9;
    border-bottom: 1px solid #dfe6e9;
}
.lp-sec .sec-head h2::after {
    content: ''; display: block;
    width: 46px; height: 4px; border-radius: 4px;
    background: var(--brand);
    margin-top: 12px;
}

/* ---------- 카르릉TV 추천 영상 (한 줄 슬라이더) ---------- */
.tv-pick { margin-bottom: 34px; }
.tv-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.tv-pick-head h2 { display: flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.tv-pick-head h2 i { color: var(--brand); font-size: 15px; }
.tv-pick-head h2 b { color: var(--brand-deep); font-weight: 900; }
.tv-pick-nav { display: flex; gap: 7px; }
.tv-pick-nav button {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .14s;
}
.tv-pick-nav button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); box-shadow: 0 6px 16px rgba(var(--brand-rgb), .16); }
.tv-pick-nav button:disabled { opacity: .32; cursor: default; }

.tv-pick-track {
    display: flex; gap: 14px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 2px 10px;
}
.tv-pick-track::-webkit-scrollbar { display: none; }
.tv-pick-item {
    flex: 0 0 264px; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; border-radius: 16px;
    background: #fff; border: 1px solid var(--line);
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.tv-pick-item:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--brand-rgb), .16); }
.tv-pick-thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 11px; overflow: hidden; background: #000; }
.tv-pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-play {
    position: absolute; inset: 0; margin: auto;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(220,50,45,.94); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    transition: transform .18s;
}
.tv-pick-item:hover .tv-play { transform: scale(1.12); }
.tv-pick-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tv-pick-txt strong {
    font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-pick-meta { font-size: 11.5px; color: var(--muted-soft); font-weight: 700; }

@media (max-width: 576px) {
    .tv-pick-item { flex: 0 0 212px; }
    .tv-pick-nav { display: none; }
    .tv-pick-head h2 { font-size: 17px; }
}

/* ---------- 하단 운전 마스코트 (PC) ----------
   화면 아래를 좌우로 오간다. 클릭을 막지 않도록 차와 닫기 버튼만 포인터를 받는다. */
.kr-driver {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 96px; z-index: 1032;
    pointer-events: none;
    opacity: 0; transition: opacity .6s ease;
}
.kr-driver.ready { opacity: 1; }
.kr-driver.gone { opacity: 0; }

/* 바닥선 — 차가 공중에 뜬 것처럼 보이지 않게 아주 옅게만 */
/* 바닥선을 타이어 아랫부분에 걸쳐 놓으면 살짝 잠긴 것처럼 보인다 */
.kd-road {
    position: absolute; left: 0; right: 0; bottom: 9px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(23,24,26,.1) 12%, rgba(23,24,26,.1) 88%, transparent);
    z-index: 2;
}
/* 바닥선 아래는 살짝 흐려 "잠긴" 느낌을 준다 */
.kd-road::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 100%; height: 9px;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.9));
}

.kd-car {
    position: absolute; left: 70px; bottom: 0;
    width: 116px;
    pointer-events: auto;
    will-change: transform;
}
.kd-car.flip .kd-body { transform: scaleX(-1); }
/*
 | 말풍선은 차를 뒤집어도 같이 뒤집히면 안 된다.
 | .kd-body 는 transform 이 걸려 있어 쌓임 맥락을 새로 만든다. 그대로 두면
 | DOM 상 뒤에 있는 차가 말풍선 위로 올라와 말풍선이 차 뒤로 숨는다.
 */
/* 말풍선은 .kd-body 밖에 있어 차가 뒤집혀도 같이 뒤집히지 않는다.
   예전에 여기서 transform 을 덮어쓰다가 뒤집을 때 말풍선이 옆으로 밀렸다. */
.kd-bubble { z-index: 2; }
.kd-body { z-index: 1; }

.kd-body {
    position: relative;
    animation: kdBob 1.15s ease-in-out infinite;
    transform-origin: 50% 90%;
}
.kd-car.flip .kd-body { animation: kdBobFlip 1.15s ease-in-out infinite; }
/* 10장을 같은 자리에 겹쳐 두고 opacity 로만 바꾼다 */
.kd-sprite {
    position: relative; width: 100%; aspect-ratio: 460 / 406;
    /*
     | 만화처럼 또렷한 외곽선.
     | .kd-body 에 걸면 배기 연기·속도선까지 검게 테두리가 생겨 잔상처럼 보인다.
     | 그래서 차 그림에만 건다.
     */
    filter:
        drop-shadow(0 0 1.2px rgba(20,32,36,.92))
        drop-shadow(0 0 1.2px rgba(20,32,36,.92))
        drop-shadow(0 5px 9px rgba(23,60,62,.22));
}
.kd-sprite img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain; display: block;
    opacity: 0;
    transition: opacity .16s linear;   /* 길게 겹치면 그 사이 흰 받침이 비친다 */
}
.kd-sprite img.on { opacity: 1; }
/* 흰 받침 — 프레임보다 안쪽이라 겹침 구간에도 밖으로 새지 않는다 */
/* 노면을 타는 미세한 상하 흔들림 + 아주 살짝 앞으로 기운 자세 */
@keyframes kdBob {
    0%, 100% { transform: translateY(0) rotate(-.5deg); }
    50%      { transform: translateY(-3px) rotate(.4deg); }
}
@keyframes kdBobFlip {
    0%, 100% { transform: scaleX(-1) translateY(0) rotate(.5deg); }
    50%      { transform: scaleX(-1) translateY(-3px) rotate(-.4deg); }
}
/* 멈추면 흔들림도 멈추고 살짝 앞으로 쏠린다 */
.kd-car.stopped .kd-body { animation: none; transform: rotate(1.2deg); }
.kd-car.stopped.flip .kd-body { animation: none; transform: scaleX(-1) rotate(1.2deg); }

/* 뒤로 흘리는 속도선 + 배기 연기 — "부릉부릉" 느낌 */
.kd-dust {
    position: absolute; right: 100%; bottom: 8%;
    width: 96px; height: 46px; margin-right: -6px;
    pointer-events: none;
}
/* 속도선 3줄 */
.kd-dust::before {
    content: '';
    position: absolute; right: 0; top: 4px;
    width: 100%; height: 22px;
    background:
        linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .55)) left  2px/72% 3px no-repeat,
        linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .38)) left 10px/94% 3px no-repeat,
        linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .3))  left 18px/56% 3px no-repeat;
    border-radius: 3px;
    animation: kdLines .42s linear infinite;
}
@keyframes kdLines {
    0%   { opacity: .25; transform: translateX(10px); }
    45%  { opacity: .9; }
    100% { opacity: .2; transform: translateX(-10px); }
}
/* 배기 연기 — 뒤로 밀리며 커지고 흩어진다 */
.kd-dust span,
.kd-dust::after {
    content: '';
    position: absolute; right: 6px; bottom: 2px;
    width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, rgba(255,255,255,.98), rgba(214,226,229,.82) 62%, rgba(214,226,229,0) 78%);
    animation: kdPuff 1.15s ease-out infinite;
}
.kd-dust::after { animation-delay: .55s; }
@keyframes kdPuff {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
    18%  { opacity: .95; }
    100% { opacity: 0; transform: translate(-52px, -16px) scale(2.1); }
}
@media (prefers-reduced-motion: reduce) {
    .kd-dust::before, .kd-dust span, .kd-dust::after { animation: none; opacity: .35; }
}
.kd-car.stopped .kd-dust { opacity: 0; animation: none; }
/*
 | 마우스를 올리면 차가 공중제비를 한 바퀴.
 |
 | 예전에는 rotateX 로 눕혔는데, 2D 그림이 세로로 납작해질 뿐 뒤집혀 보이지 않았다.
 | 게임처럼 보이려면 세 가지가 같이 가야 한다 —
 |   화면 안에서 도는 회전(rotateZ) · 뛰었다 떨어지는 궤적 · 웅크렸다 펴는 눌림.
 |
 | 좌우 반전(scaleX)이 걸린 .kd-body 안쪽에 걸어 두면
 | 왼쪽으로 갈 때는 회전 방향도 저절로 뒤집혀 진행 방향과 맞는다.
 */
.kd-sprite { transform-origin: 50% 84%; }

.kd-car.tumble .kd-sprite { animation: kdFlip 1.05s cubic-bezier(.28,.6,.32,1); }

@keyframes kdFlip {
    /* 웅크린다 — 뛰기 전 반동 */
    0%   { transform: translateY(0)    rotate(0deg)    scale(1, 1); }
    9%   { transform: translateY(2px)  rotate(-3deg)   scale(1.12, .84); }
    /* 차고 오른다 — 몸이 길어진다 */
    20%  { transform: translateY(-26px) rotate(-52deg)  scale(.9, 1.14); }
    /* 가장 높은 곳 */
    46%  { transform: translateY(-68px) rotate(-182deg) scale(1, 1); }
    /* 내려온다 */
    72%  { transform: translateY(-34px) rotate(-292deg) scale(.94, 1.08); }
    /* 땅에 닿는 순간 — 확 눌린다 */
    88%  { transform: translateY(0)     rotate(-360deg) scale(1.16, .8); }
    /* 반동으로 살짝 튀고 */
    95%  { transform: translateY(-7px)  rotate(-360deg) scale(.97, 1.04); }
    100% { transform: translateY(0)     rotate(-360deg) scale(1, 1); }
}

/* 도는 동안 뒤쪽 속도선·먼지는 숨긴다. 같이 돌면 잔상처럼 지저분하다. */
.kd-car.tumble .kd-dust { opacity: 0; transition: opacity .12s; }

/* 착지 먼지 — 땅에 닿는 순간에 맞춰 퍽 하고 퍼진다 */
.kd-car.tumble::after {
    content: '';
    position: absolute; left: 50%; bottom: 2px;
    width: 74px; height: 16px; margin-left: -37px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(214,226,229,.92), rgba(214,226,229,0) 72%);
    pointer-events: none;
    animation: kdLand 1.05s ease-out;
}
@keyframes kdLand {
    0%, 82% { opacity: 0; transform: scale(.3); }
    89%     { opacity: .95; transform: scale(1); }
    100%    { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
    .kd-car.tumble .kd-sprite,
    .kd-car.tumble::after { animation: none; }
}

/* 말풍선 */
.kd-bubble {
    /*
     | 차 지붕 정중앙.
     | 머리 위치(45.5%)로 옮겨 봤더니 방향을 바꿀 때마다 좌우로 튀어
     | 차 뒤꽁무니에 붙은 것처럼 보였다. 어느 쪽을 보든 가운데가 가장 자연스럽다.
     */
    position: absolute; left: 50%; bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(8px) scale(.94);
    transform-origin: 50% 100%;
    min-width: 160px; max-width: 260px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(23,24,26,.16);
    font-size: 12.5px; font-weight: 700; color: var(--ink);
    letter-spacing: -.02em; line-height: 1.5;
    text-align: center; white-space: normal; word-break: keep-all;
    opacity: 0;
    transition: opacity .32s ease, transform .32s cubic-bezier(.28,1.4,.5,1);
}
.kd-bubble.on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
/* 방향이 바뀌어도 말풍선은 늘 차 가운데 위에 둔다 */
.kd-bubble::after {
    content: '';
    position: absolute; left: 50%; top: 100%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #fff;
    filter: drop-shadow(0 1px 0 var(--line));
}

/* 닫기 */
.kd-close {
    position: absolute; right: 16px; bottom: 12px;
    pointer-events: auto;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
    color: var(--muted); font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s, color .14s, border-color .14s;
}
.kr-driver:hover .kd-close { opacity: 1; }
.kd-close:hover { color: var(--ink); border-color: var(--ink); }

/* 좁은 화면에서는 본문·하단바를 가리므로 아예 띄우지 않는다 */
@media (max-width: 1279px) { .kr-driver { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .kr-driver { display: none !important; } }

/* ---------- 장기렌트 · 리스 비교 카드 ----------
   표 한 장으로 붙여 놓으면 "내가 어느 쪽인지"가 안 읽힌다.
   두 카드로 나누되 항목 줄을 맞춰 옆으로 비교되게 한다. */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.cmp-card {
    position: relative;
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
    padding: 24px 24px 22px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.cmp-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(var(--brand-rgb), .14); }
.cmp-card.best { border-color: var(--brand); box-shadow: 0 12px 30px rgba(var(--brand-rgb), .16); }
.cmp-flag {
    position: absolute; top: -11px; left: 24px;
    background: linear-gradient(180deg, var(--brand-light), var(--brand) 55%, var(--brand-deep));
    color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: -.01em;
    padding: 4px 12px; border-radius: 100px;
    box-shadow: 0 5px 14px rgba(var(--brand-rgb), .35);
}

.cmp-head { display: flex; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.cmp-head img { width: 74px; height: 74px; object-fit: contain; flex-shrink: 0; }
.cmp-tag {
    display: inline-block; margin-bottom: 5px;
    background: var(--brand-soft); color: var(--brand-deep);
    border-radius: 100px; padding: 2px 10px;
    font-size: 11.5px; font-weight: 900;
}
.cmp-head strong { display: block; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.04em; }
.cmp-head em { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 600; }

.cmp-rows { margin: 0; padding: 6px 0 0; }
.cmp-rows > div {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.cmp-rows > div:last-child { border-bottom: 0; }
.cmp-rows dt {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.cmp-rows dt i { color: var(--brand-deep); font-size: 14px; }
.cmp-rows dd { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--ink); text-align: right; letter-spacing: -.02em; }

.cmp-fit { margin-top: 16px; padding: 15px 16px; background: var(--bg-soft); border-radius: 14px; }
.cmp-fit-lab { display: block; font-size: 11.5px; font-weight: 900; color: var(--brand-deep); margin-bottom: 8px; }
.cmp-fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-fit li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.cmp-fit li i { color: var(--brand); font-size: 13px; margin-top: 2px; flex-shrink: 0; }

.cmp-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 16px; height: 46px; border-radius: 12px;
    border: 1px solid var(--line); background: #fff;
    font-size: 14px; font-weight: 800; color: var(--ink);
    transition: all .14s;
}
.cmp-card.best .cmp-btn {
    border: 0;
    background: linear-gradient(180deg, var(--brand-light), var(--brand) 52%, var(--brand-deep));
    color: #fff;
    box-shadow: 0 7px 18px rgba(var(--brand-rgb), .32);
}
.cmp-btn:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-1px); }
.cmp-card.best .cmp-btn:hover { color: #fff; filter: brightness(1.06); }

@media (max-width: 860px) {
    .cmp-grid { grid-template-columns: 1fr; gap: 22px; }
    .cmp-card { padding: 20px 18px 18px; }
    .cmp-head img { width: 62px; height: 62px; }
    .cmp-head strong { font-size: 18px; }
    .cmp-rows dd { font-size: 13px; }
}

/* ---------- 최근 본 차량 — PC 좌측 도크 ----------
   우측은 상담 버튼들로 이미 꽉 차 있어 왼쪽 벽에 붙인다. */
.recent-dock {
    position: fixed; left: 12px; top: 50%; transform: translateY(-50%);
    z-index: 1030;
    width: 116px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(23,24,26,.14);
    padding: 12px 9px 9px;
}
.rd-head {
    font-size: 11px; font-weight: 800; color: var(--ink); text-align: center;
    padding-bottom: 9px; margin-bottom: 9px;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}
.rd-head i { color: var(--brand-deep); margin-right: 3px; }
.rd-list {
    display: flex; flex-direction: column; gap: 9px;
    max-height: 46vh; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
    padding: 3px 2px;   /* 호버로 살짝 떠오를 자리 */
    margin: -3px -2px;
}
.rd-list::-webkit-scrollbar { display: none; }
.rd-item { display: block; text-align: center; }
.rd-pic {
    display: block; aspect-ratio: 4/3; border-radius: 9px; overflow: hidden;
    background: var(--bg-warm); border: 1px solid var(--line-soft);
    transition: border-color .14s, transform .14s;
}
.rd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-item:hover .rd-pic { border-color: var(--brand); transform: scale(1.03); }
.rd-name {
    display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
    margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-item:hover .rd-name { color: var(--brand-deep); }
.rd-clear {
    width: 100%; margin-top: 9px; border: 0; background: none;
    font-size: 10.5px; color: var(--muted-soft); font-weight: 700;
}
.rd-clear:hover { color: var(--ink); }
/* 화면이 좁으면 본문을 가리므로 하단 슬라이더에만 맡긴다 */
@media (max-width: 1400px) { .recent-dock { display: none !important; } }

/* ---------- 최근 본 차량 (한 줄 슬라이더) ---------- */
.recent-sec { padding: 44px 0 48px; background: var(--bg-soft); border-top: 1px solid var(--line); }
.rc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rc-head h2 { font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -0.04em; margin: 8px 0 0; }
.rc-tools { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.rc-count { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.rc-count b { color: var(--brand-deep); font-weight: 900; }
.rc-nav {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .14s;
}
.rc-nav:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); box-shadow: 0 6px 16px rgba(var(--brand-rgb), .16); }
.rc-nav:disabled { opacity: .32; cursor: default; }
.rc-clear { border: 0; background: none; font-size: 12px; font-weight: 700; color: var(--muted-soft); padding: 4px 2px; }
.rc-clear:hover { color: var(--ink); text-decoration: underline; }

/* 한 줄 가로 스크롤 — 스크롤바는 감추고 카드 단위로 붙는다 */
.rc-track {
    display: flex; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 2px 8px;
}
.rc-track::-webkit-scrollbar { display: none; }
.rc-card {
    position: relative; flex: 0 0 auto; width: 178px;
    scroll-snap-align: start;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 10px 10px 12px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.rc-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(var(--brand-rgb), .16); }
.rc-pic {
    display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
    background: var(--bg-warm); margin-bottom: 8px;
}
.rc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-name {
    display: block; font-size: 13px; font-weight: 800; color: var(--ink);
    letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-price { display: block; font-size: 12.5px; font-weight: 800; color: var(--brand-deep); margin-top: 2px; }
.rc-ago { display: block; font-size: 11px; color: var(--muted-soft); font-weight: 700; margin-top: 3px; }
.rc-del {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 22px; height: 22px; border-radius: 50%;
    border: 0; background: rgba(23,24,26,.5); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; opacity: 0; transition: opacity .14s, background .14s;
}
.rc-card:hover .rc-del { opacity: 1; }
.rc-del:hover { background: rgba(23,24,26,.82); }

@media (max-width: 576px) {
    .recent-sec { padding: 34px 0 36px; }
    .rc-head { align-items: center; }
    .rc-nav { display: none; }
    .rc-card { width: 148px; }
}
.hdr-mega-brands a em { font-style: normal; font-size: 11px; color: var(--muted-soft); font-weight: 700; }
.hdr-mega-links { display: flex; flex-wrap: wrap; gap: 6px; }
.hdr-mega-links a {
    font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px;
    transition: all .13s;
}
.hdr-mega-links a:hover { border-color: var(--ink); color: var(--ink); }

/* 가로 네비게이션 */
.hdr-nav { display: flex; align-items: center; gap: 2px; }
.hdr-nav > a {
    position: relative;
    padding: 8px 15px;
    font-size: 15.5px; font-weight: 700; color: var(--ink-soft);
    transition: color .15s;
}
/* 밑줄 대신 글자색만 브랜드 톤으로 진해진다 (젤리 효과는 그대로) */
.hdr-nav > a:hover { color: var(--brand-deep); font-weight: 800; }
.hdr-nav > a.active { color: var(--ink); font-weight: 800; }
.hdr-nav .hdr-drop:hover .hdr-drop-btn { color: var(--brand-deep); font-weight: 800; }

/*
 | 상단 메뉴 젤리 효과 — 로고와 같은 결로, 마우스를 올리면 한 번 눌렸다 튀어오른다.
 | transition 이 아니라 animation 이라 커서를 계속 올려 둬도 딱 한 번만 튄다.
 */
.hdr-nav > a,
.hdr-nav .hdr-drop-btn {
    display: inline-block;
    transform-origin: 50% 85%;
    will-change: transform;
}
.hdr-nav > a:hover,
.hdr-nav .hdr-drop:hover .hdr-drop-btn {
    animation: navJelly .58s cubic-bezier(.28,1.4,.5,1) both;
}
@keyframes navJelly {
    0%   { transform: scale(1, 1); }
    26%  { transform: scale(1.14, .84); }
    46%  { transform: scale(.92, 1.11); }
    64%  { transform: scale(1.06, .95); }
    80%  { transform: scale(.98, 1.03); }
    100% { transform: scale(1, 1); }
}
/* 드롭다운 버튼은 안쪽 화살표가 같이 찌그러지지 않게 따로 둔다 */
.hdr-nav .hdr-drop-btn { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
    .hdr-nav > a:hover, .hdr-nav .hdr-drop:hover .hdr-drop-btn { animation: none; }
}
.hdr-nav > a .chip {
    position: absolute; top: -3px; right: 4px;
    font-size: 9px; font-weight: 800; color: #fff;
    background: var(--red); border-radius: 8px; padding: 1px 5px; line-height: 1.4; letter-spacing: 0;
}
.hdr-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
/* 회사소개 / 기업전용 상담 — 반반 붙은 세그먼트 버튼 */
.hdr-seg {
    display: inline-flex;
    border: 1px solid var(--brand-line);
    border-radius: 100px;
    background: #fff;
    overflow: hidden;
}
.hdr-seg > a {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 104px; height: 34px; padding: 0 16px;
    font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--brand-deep);
    transition: background .15s, color .15s;
}
.hdr-seg > a + a { border-left: 1px solid var(--brand-line); }
.hdr-seg > a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.hdr-seg > a.on {
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 62%),
        linear-gradient(165deg, var(--brand), var(--brand-deep));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* 모바일 검색 */
.mobile-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--ink); border-radius: 100px; padding: 9px 16px; }
.mobile-search i { color: var(--muted); }
.mobile-search input { border: 0; outline: none; background: none; width: 100%; font-size: 14.5px; }

/* 모바일 메뉴 */
.mobile-menu {
    display: none;
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(23,24,26,.4);
}
.mobile-menu.open { display: block; }
.mobile-menu .panel {
    position: absolute; top: 0; left: 0; bottom: 0;   /* 햄버거와 같은 쪽에서 열려야 손이 안 엇갈린다 */
    width: min(320px, 86vw);
    background: #fff;
    padding: 26px 24px;
    overflow-y: auto;
    box-shadow: 8px 0 40px rgba(16,24,26,.16);
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.22,.9,.3,1);
}
.mobile-menu.open .panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .mobile-menu .panel { transition: none; transform: translateX(0); }
}
.mobile-menu .panel a.item {
    display: block; padding: 13px 4px;
    font-size: 16.5px; font-weight: 700;
    border-bottom: 1px solid var(--line-soft);
}

/* ── 모바일 메뉴 — PC 상단 메뉴와 같은 묶음 ── */
.mm-nav { display: flex; flex-direction: column; }

/* 하위가 없는 항목 */
.mm-top {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 4px;
    font-size: 16px; font-weight: 800; color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
}
.mm-top i:first-child { font-size: 17px; color: var(--brand-deep); width: 1.2em; text-align: center; }
.mm-top em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); }
.mm-chip {
    margin-left: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .04em;
    background: #d6453d; color: #fff; border-radius: 4px; padding: 2px 5px; line-height: 1;
}

/* 하위가 있는 묶음 */
.mm-grp { border-bottom: 1px solid var(--line-soft); }
.mm-grp-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 14px 4px; border: 0; background: transparent; text-align: left;
    font-size: 16px; font-weight: 800; color: var(--ink); cursor: pointer;
}
.mm-grp-btn > i:first-child { font-size: 17px; color: var(--brand-deep); width: 1.2em; text-align: center; }
.mm-arrow {
    margin-left: auto; font-size: 13px; color: var(--muted);
    transition: transform .22s cubic-bezier(.22,.9,.3,1);
}
.mm-grp.open .mm-arrow { transform: rotate(180deg); }

.mm-sub {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .26s cubic-bezier(.22,.9,.3,1);
}
.mm-grp.open .mm-sub { grid-template-rows: 1fr; }
.mm-sub > div { overflow: hidden; min-height: 0; }
.mm-sub a {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 4px 11px 12px;
    border-left: 2px solid var(--line);
    margin-left: 9px;
}
.mm-sub a:first-child { padding-top: 2px; }
.mm-sub a:last-child { padding-bottom: 14px; }
.mm-sub a > i { font-size: 15px; color: var(--brand-deep); margin-top: 2px; width: 1.2em; text-align: center; flex-shrink: 0; }
.mm-sub b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.mm-sub em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.5; }

.mm-foot { margin-top: 22px; padding-bottom: 8px; }
.mm-foot p { margin: 9px 2px 0; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.6; }

/* ---------- 히어로 ---------- */
.hero {
    position: relative;
    background: var(--bg-warm);
    overflow: hidden;
}
/*
   Veo 배경 영상 — 슬라이드 뒤에 깔린다.
   .vfade 기본값(absolute·opacity .55)을 그대로 쓰되, 위에 흰 스크림을 한 겹 얹어
   왼쪽 카피가 항상 읽히게 한다. */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/*
 | .vfade 기본값은 헤더 배경용 0.55 라 영상이 뿌옇게 죽는다.
 | 히어로에서는 영상을 제대로 보여 주고, 글자는 위의 스크림이 지킨다.
 */
.hero .hero-bg video.on { opacity: .92; }   /* .vfade 기본값(0.55)이 뒤에 있어 선택자를 올린다 */
.hero-bg-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(92deg, rgba(255,255,255,.92) 18%, rgba(255,255,255,.6) 46%, rgba(255,255,255,.12) 74%),
        linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 26%);
}
.hero .slides { position: relative; z-index: 2; height: min(66vh, 620px); min-height: 470px; }
/* 배경 영상이 깔리면 배너 자체 배경은 비운다 (두 겹이 겹쳐 탁해진다) */
.hero:has(.hero-bg) .slide .bg { opacity: 0; }
.hero:has(.hero-bg) .slide .scrim { background: none; }

@media (max-width: 768px) {
    /*
     | 예전 값(0.9 → 0.4)은 화면 전체를 하얗게 덮어 영상도 글자도 뿌옇게 만들었다.
     | 글자가 놓이는 위쪽만 살짝 덮고 아래는 영상을 그대로 보여 준다.
     */
    .hero-bg-scrim {
        background:
            linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 38%, rgba(255,255,255,.06) 72%, rgba(255,255,255,0) 100%);
    }
}
.hero .slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.hero .slide.on { opacity: 1; pointer-events: auto; }
.hero .slide .bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.hero .slide .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(92deg, rgba(255,255,255,.94) 22%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 72%);
}
.hero .slide .content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px 40px;
}

/*
 | 히어로 카피 플립 — 슬라이드가 켜질 때 줄마다 한 장씩 넘어온다.
 | perspective 를 부모에 줘야 각 줄이 실제로 회전하는 것처럼 보인다.
 */
.hero .slide .content { perspective: 900px; }
.hero .flip-line {
    display: block;
    transform-origin: 50% 0;
    backface-visibility: hidden;
    opacity: 0;
    transform: rotateX(-92deg) translateY(-6px);
}
.hero h1 .flip-line { display: block; }
/* eyebrow 는 원래 inline-flex(앞에 짧은 선이 붙는다) — 블록으로 바꾸면 선이 어긋난다 */
.hero .eyebrow.flip-line { display: inline-flex; }
.hero .slide.on .flip-line {
    animation: heroFlip .78s cubic-bezier(.2,.85,.3,1.02) both;
    animation-delay: var(--fd, 0ms);
}
@keyframes heroFlip {
    0%   { opacity: 0; transform: rotateX(-92deg) translateY(-6px); }
    58%  { opacity: 1; transform: rotateX(12deg) translateY(0); }
    78%  { transform: rotateX(-5deg); }
    100% { opacity: 1; transform: rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero .flip-line { opacity: 1; transform: none; }
    .hero .slide.on .flip-line { animation: none; }
}
.hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800; color: var(--gold-deep);
    letter-spacing: .06em;
    margin-bottom: 18px;
}
.hero .eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gold); }
.hero h1 {
    font-size: clamp(30px, 4.4vw, 52px);
    white-space: pre-line;
    margin-bottom: 16px;
}
/*
 | 배경 사진이 밝으면 회색 글자가 묻혀 읽히지 않는다.
 | 잉크색에 가깝게 진하게 쓰고, 아주 옅은 흰 테를 둘러 사진에서 떼어 놓는다.
 */
.hero .lead-copy {
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--ink);
    font-weight: 700;
    margin-bottom: 30px;
    text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 0 14px rgba(255,255,255,.55);
}
.hero .dots {
    position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 5;
}
.hero .dots button {
    width: 26px; height: 4px; border-radius: 4px; border: 0;
    background: rgba(23,24,26,.18);
    transition: background .2s, width .2s;
}
.hero .dots button.on { background: var(--ink); width: 40px; }

/* 히어로 하단 빠른견적 바 — 다크 차콜 + 골드 */
.hero-search {
    position: relative;
    margin-top: -52px;
    z-index: 10;
}
/* 블랙 크롬 — 다층 반사광으로 금속 질감 */
/*
 | 테두리를 한 바퀴 도는 섬광.
 | conic-gradient 의 각도를 애니메이션해야 가로로 긴 막대에서도 모양이 안 뭉개진다.
 | (요소를 통째로 rotate 하면 정사각형이 아닌 이상 빛줄기가 찌그러진다)
 */
@property --qb-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.quote-bar::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1.6px;
    background: conic-gradient(from var(--qb-ang),
        transparent 0 66%,
        rgba(var(--brand-rgb), .35) 72%,
        var(--brand-light) 79%,
        #eafeff 83%,
        var(--brand) 88%,
        rgba(var(--brand-rgb), .3) 93%,
        transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: qbLaser 6s linear infinite;
    pointer-events: none;
    z-index: 3;
}
@keyframes qbLaser { to { --qb-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .quote-bar::before { animation: none; } }

.quote-bar {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 18%),
        radial-gradient(120% 180% at 8% -20%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%),
        radial-gradient(90% 140% at 92% 120%, rgba(90,205,207,.16) 0%, rgba(90,205,207,0) 48%),
        linear-gradient(158deg, #2b2d33 0%, #17181c 34%, #101115 62%, #1e2025 100%);
    border-radius: 18px;
    box-shadow:
        0 22px 54px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -1px 0 rgba(0,0,0,.5);
    padding: 14px 16px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    border: 1px solid rgba(255,255,255,.09);
}
.quote-bar::before {
    content: ''; position: absolute; z-index: 0;
    left: 8%; right: 8%; top: 0; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
    pointer-events: none;
}
/*
 | 바 안쪽 쌓임 순서.
 |
 | 예전에는 quote-bar 에 isolation:isolate 를 걸고 자식을 전부 z-index:1 로 뒀다.
 | 그러면 드롭다운의 z-index 가 바 안에 갇혀서, 나중에 오는 「견적 확인」 버튼이
 | 목록 위를 덮었다. 모바일에서는 화면 전체 딤(body 에 붙는다)이 목록보다 위로 와서
 | 목록이 뿌옇게 깔려 보였다.
 |
 | 그래서 가둠을 풀고, 고르는 칸이 버튼보다 위에 오도록 층만 정해 준다.
 | 열려 있는 칸은 옆 칸보다도 위로 올린다 — 차종 목록이 월 예산 칸에 가리면 안 된다.
 */
.quote-bar > * { position: relative; z-index: 1; }
.quote-bar .qb-fields { z-index: 2; }
.quote-bar .qb-btn { z-index: 1; }
.qb-field { position: relative; z-index: 1; }
.qb-field.open { z-index: 5; }

.qb-head {
    display: flex; align-items: center; gap: 11px;
    padding: 0 18px 4px 0;
    border-right: 1px solid rgba(255,255,255,.14);
    flex-shrink: 0;
    align-self: center;
}
.qb-badge {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 5px 12px rgba(90,205,207,.32));
}
.qb-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qb-title { color: #fff; font-weight: 800; font-size: 15.5px; letter-spacing: -0.03em; line-height: 1.25; }
.qb-sub { color: #8fd6d8; font-size: 11px; font-weight: 700; letter-spacing: -0.01em; }

/* 필드 — 한 줄 */
.qb-fields {
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}
.qb-field { min-width: 0; }
.qb-field label {
    display: block;
    /* 검정 바 위라 반투명 흰색은 묻힌다. 거의 흰색으로 올린다. */
    font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.95);
    letter-spacing: .03em;
    margin-bottom: 5px;
}
.qb-field input, .qb-field select {
    width: 100%;
    height: 42px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    font-weight: 700; font-size: 14px;
    padding: 0 13px;
    outline: none;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.qb-field input::placeholder { color: rgba(255,255,255,.78); font-weight: 600; }
.qb-field input:hover, .qb-field select:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.qb-field input:focus, .qb-field select:focus {
    background: rgba(255,255,255,.15);
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(90,205,207,.2);
}
.qb-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
    padding-right: 32px;
    cursor: pointer;
}
.qb-field select option { color: var(--ink); background: #fff; }

/* 이용 형태 세그먼트 */
.qb-field--seg { flex-shrink: 0; }
.qb-seg {
    display: inline-flex; gap: 3px;
    height: 42px; padding: 3px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
}
.qb-seg button {
    border: 0; background: transparent;
    color: rgba(255,255,255,.7);
    font-size: 13px; font-weight: 800; letter-spacing: -0.02em;
    padding: 0 14px; border-radius: 9px;
    transition: background .15s, color .15s;
}
.qb-seg button:hover { color: #fff; background: rgba(255,255,255,.1); }
.qb-seg button.on {
    color: #fff;
    background: linear-gradient(165deg, var(--brand), var(--brand-deep));
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), .45);
}

/* 차종 자동완성 */
.qb-field--search { position: relative; }
.qb-ac { position: relative; }
.qb-ac > .bi-search {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.55); font-size: 14px; pointer-events: none;
}
.qb-ac input { padding-left: 36px !important; padding-right: 34px !important; }
.qb-ac-clear {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.18); color: #fff; font-size: 10px;
}
.qb-ac-clear:hover { background: rgba(255,255,255,.32); }
.qb-ac-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
    background: #fff; border: 1px solid var(--line); border-radius: 13px;
    box-shadow: 0 20px 50px rgba(23,24,26,.28);
    overflow: hidden auto;
    max-height: 320px;
}
.qb-ac-head { padding: 10px 13px 5px; font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.qb-ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 13px; text-decoration: none; transition: background .12s; }
.qb-ac-item + .qb-ac-item { border-top: 1px solid var(--line-soft); }
.qb-ac-item:hover { background: var(--brand-soft); }
.qb-ac-item img { width: 52px; height: 34px; object-fit: contain; flex-shrink: 0; }
.qb-ac-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qb-ac-txt b { font-size: 13.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-ac-txt i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; }
.qb-ac-price { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--brand-deep); }
.qb-ac-empty { padding: 16px 13px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* .btn-gloss 가 뒤에서 border-radius:100px 로 덮어쓰므로 선택자를 한 단계 올린다 */
.quote-bar .qb-btn {
    flex-shrink: 0;
    font-size: 15px;
    padding: 0 22px;
    height: 42px;
    border-radius: 12px;            /* 월예산 셀렉트와 같은 각진 라운드 */
}
.quote-bar .qb-btn .gloss-chip { border-radius: 8px; width: 1.6em; height: 1.6em; }

/* ---------- 월 예산 커스텀 셀렉트 ----------
   운영체제가 그리는 기본 목록은 다크 바 위에서 흰 상자로 툭 튀어나와 어울리지 않는다. */
.qb-budget { position: relative; }
.qb-sel {
    width: 100%; height: 42px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 0 12px 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #fff; font-size: 14px; font-weight: 700;
    text-align: left; white-space: nowrap;
    transition: border-color .14s, background .14s;
}
.qb-sel:hover { border-color: rgba(var(--brand-rgb), .6); background: rgba(255,255,255,.1); }
.qb-sel i { font-size: 11px; color: rgba(255,255,255,.55); transition: transform .18s; }
.qb-budget.open .qb-sel { border-color: var(--brand); background: rgba(255,255,255,.11); }
.qb-budget.open .qb-sel i { transform: rotate(180deg); color: var(--brand-light); }

.qb-sel-list {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
    z-index: 40; margin: 0; padding: 6px; list-style: none;
    background: #1b1d21;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    box-shadow: 0 20px 46px rgba(0,0,0,.5);
    animation: qbSelIn .16s ease both;
}
@keyframes qbSelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qb-sel-list li {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 2px 10px; padding: 9px 12px; border-radius: 10px;
    cursor: pointer; outline: none;
    transition: background .12s;
}
.qb-sel-list li b { grid-column: 1; font-size: 13.5px; font-weight: 800; color: #fff; }
.qb-sel-list li em {
    grid-column: 1; grid-row: 2;
    font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.5); font-weight: 600;
}
.qb-sel-list li > i {
    grid-column: 2; grid-row: 1 / span 2;
    font-size: 14px; color: var(--brand-light); opacity: 0;
}
.qb-sel-list li:hover, .qb-sel-list li:focus { background: rgba(255,255,255,.09); }
.qb-sel-list li.on { background: rgba(var(--brand-rgb), .18); }
.qb-sel-list li.on > i { opacity: 1; }

/*
 | 펼치는 방향은 화면 크기가 아니라 그때그때 남은 자리로 정한다 (스크립트가 .down 을 붙인다).
 | 폭으로만 정하면 바가 화면 아래쪽에 있을 때 목록이 화면 밖으로 잘려 나간다.
 */
.qb-sel-list { max-height: min(60vh, 340px); overflow-y: auto; overscroll-behavior: contain; }
.qb-sel-list.down { bottom: auto; top: calc(100% + 8px); }

/* ---------- 유광 브랜드 버튼 (빠른견적 이미지 버튼과 동일한 질감) ---------- */
.btn-gloss {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 0; border-radius: 100px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 62%),
        linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 52%, var(--brand-deep) 100%);
    color: #fff; font-weight: 800; letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,.16);
    box-shadow:
        0 8px 20px rgba(var(--brand-rgb), .34),
        inset 0 1px 0 rgba(255,255,255,.6),
        inset 0 -2px 6px rgba(0,0,0,.16);
    transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s, filter .16s;
}
.btn-gloss > * { position: relative; z-index: 2; }
/* 좌→우로 지나가는 광택 스캔 */
.btn-gloss::after {
    content: ''; position: absolute; z-index: 1;
    top: -50%; bottom: -50%; width: 32%; left: -50%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg);
    animation: btnGloss 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes btnGloss {
    0%, 70% { left: -50%; }
    100% { left: 135%; }
}
.btn-gloss:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 12px 26px rgba(var(--brand-rgb), .42),
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -2px 6px rgba(0,0,0,.16);
}
.btn-gloss:active { transform: translateY(0); }
.btn-gloss-lg { height: 54px; padding: 0 26px 0 30px; font-size: 16px; }
.btn-gloss.w-100 { width: 100%; justify-content: center; border-radius: 14px; }
.btn-gloss.w-100 .gloss-chip { border-radius: 10px; }
/* CTA 배너 안에서는 옆 전화 버튼과 모서리를 맞춘다 */
.cta-actions .btn-gloss { border-radius: 14px; }
.cta-actions .btn-gloss .gloss-chip { border-radius: 10px; }
/* 버튼 안 원형 아이콘 칩 (이미지 버튼의 흰 원과 동일한 역할) */
.btn-gloss .gloss-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9em; height: 1.9em; border-radius: 50%;
    background: #fff; color: var(--brand-deep);
    font-size: .8em; text-shadow: none;
    box-shadow: 0 2px 5px rgba(0,0,0,.16);
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .btn-gloss::after { animation: none; }
}

/* ---------- 섹션 ---------- */
.sec { padding: 88px 0; }
.sec--soft { background: var(--bg-soft); }
.sec--warm { background: var(--bg-warm); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 38px; }
.sec-head .badge-line {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800; color: var(--gold-deep); letter-spacing: .05em;
    margin-bottom: 12px;
}
.sec-head .badge-line::before { content: ''; width: 22px; height: 2px; background: var(--gold); }
.sec-head h2 { font-size: clamp(23px, 2.8vw, 32px); margin: 0; }
.sec-head p.sub { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.sec-head .more {
    flex-shrink: 0;
    font-size: 14px; font-weight: 700; color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
    transition: border-color .15s, color .15s;
}
.sec-head .more:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- 차량 카드 ---------- */
.car-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.car-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-line); }
.car-card .thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bg-warm);
    overflow: hidden;
}
.car-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.car-card:hover .thumb img { transform: scale(1.045); }
.car-card .badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 5px; }
.badge-tag {
    font-size: 11px; font-weight: 800; letter-spacing: -0.01em;
    padding: 4px 9px; border-radius: 7px; line-height: 1.3;
}
.badge-tag.instant { background: var(--ink); color: #fff; }
.badge-tag.promo { background: var(--gold); color: #fff; }
.badge-tag.ev { background: #e8f3ee; color: var(--green); }
.badge-tag.hot { background: #fdeceb; color: var(--red); }
.car-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.car-card .meta { font-size: 12px; color: var(--muted); font-weight: 700; display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.car-card .name { font-size: 17.5px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 3px; }
.car-card .trim { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; min-height: 1.4em; }
.car-card .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.chip-spec {
    font-size: 11px; font-weight: 700; color: var(--ink-soft);
    background: var(--bg-soft); border: 1px solid var(--line-soft);
    border-radius: 6px; padding: 2.5px 7px;
}
.car-card .price-block { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 13px; }
.car-card .price-block .row-line { display: flex; align-items: baseline; justify-content: space-between; }
.car-card .price-block .lab { font-size: 12px; color: var(--muted); font-weight: 700; }
.car-card .price-block .val { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.car-card .price-block .monthly { font-size: 21px; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }
.car-card .price-block .monthly em { font-style: normal; font-size: 13px; color: var(--gold-deep); font-weight: 800; margin-left: 1px; }
.car-card .actions { display: flex; gap: 7px; margin-top: 15px; }
.car-card .actions .btn { flex: 1; font-size: 13.5px; padding: .55rem 0; }

/* 가로 스크롤 레일 */
.rail-wrap { position: relative; min-width: 0; }
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 4);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.rail { max-width: 100%; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav {
    position: absolute; top: 34%; z-index: 5;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff; color: var(--ink);
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: background .15s, color .15s;
}
.rail-nav:hover { background: var(--ink); color: #fff; }
.rail-nav.prev { left: -20px; }
.rail-nav.next { right: -20px; }

/* ---------- 인기 TOP10 ---------- */
.tab-pills { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 3px; }
.tab-pills button {
    border: 0; background: transparent;
    font-size: 14.5px; font-weight: 800; color: var(--muted);
    padding: 8px 26px; border-radius: 9px;
    transition: all .16s;
}
.tab-pills button.on { background: var(--ink); color: #fff; }
.rank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.rank-item {
    display: flex; align-items: center; gap: 18px;
    min-width: 0;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 18px 13px 14px;
    transition: border-color .16s, box-shadow .16s;
}
.rank-item:hover { border-color: var(--gold-line); box-shadow: var(--shadow); }
.rank-item .no {
    font-size: 21px; font-weight: 900; color: var(--gold);
    width: 30px; text-align: center; flex-shrink: 0;
    font-style: italic;
}
.rank-item .timg {
    width: 92px; height: 62px; border-radius: 8px;
    background: var(--bg-warm); overflow: hidden; flex-shrink: 0;
}
.rank-item .timg img { width: 100%; height: 100%; object-fit: cover; }
.rank-item .info { flex: 1; min-width: 0; }
.rank-item .info .nm { font-weight: 800; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-item .info .en { font-size: 12px; color: var(--muted); }
.rank-item .prices { text-align: right; flex-shrink: 0; line-height: 1.5; min-width: 0; }
.rank-item .prices .val { white-space: nowrap; }
.rank-item .prices .p-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }
.rank-item .prices .lab { font-size: 11px; color: var(--muted); font-weight: 700; }
.rank-item .prices .val { font-size: 14.5px; font-weight: 800; }

/* ---------- 서비스 카드 ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc-card .pic { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-warm); }
.svc-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.svc-card .txt { padding: 24px 26px 28px; }
.svc-card .txt .ic {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--gold-soft); color: var(--gold-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; margin-bottom: 14px;
}
.svc-card .txt h3 { font-size: 19px; margin-bottom: 8px; }
.svc-card .txt p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- 모델 검색 (3단 캐스케이드) ---------- */
.ms-total { font-size: 15px; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; }
.ms-total i { color: var(--gold); margin-right: 5px; }
.ms-total strong { color: var(--gold-deep); font-size: 19px; margin: 0 2px; }

.ms-box {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
}
.ms-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr auto;
    align-items: stretch;
    gap: 10px;
}
/* 각 선택 필드는 독립된 박스 — 라운드 버튼과 모서리가 겹치지 않는다 */
.ms-field {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .14s, box-shadow .14s;
}
.ms-field:hover { border-color: var(--ink-soft); }
.ms-field.active { position: relative; z-index: 2; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ms-trigger {
    width: 100%; height: 62px;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 0;
    padding: 0 18px;
    text-align: left;
    cursor: pointer;
    transition: background .14s;
}
.ms-trigger:disabled { background: var(--bg-soft); cursor: not-allowed; }
.ms-trigger:disabled .ms-value { color: var(--muted-soft); }
.ms-trigger:not(:disabled):hover { background: var(--bg-soft); }
.ms-label { font-size: 11.5px; font-weight: 800; color: var(--muted); flex-shrink: 0; }
.ms-value { flex: 1; font-size: 16.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-field.active .ms-label, .ms-field.active .ms-value { color: var(--brand-deep); }
.ms-trigger > .bi-chevron-down { font-size: 13px; color: var(--muted); flex-shrink: 0; transition: transform .18s; }
.ms-field.active .bi-chevron-down { transform: rotate(180deg); color: var(--brand-deep); }
.ms-submit {
    flex-shrink: 0;
    padding: 0 30px;
    font-size: 16px;
    border-radius: 12px;
    align-self: stretch;
    margin-left: 4px;
}

.ms-panel {
    display: none;
    position: absolute; left: 24px; right: 24px; top: calc(100% - 82px);
    background: #fff;
    border: 1px solid var(--ink);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 20;
    max-height: 420px;
    overflow: hidden;
    flex-direction: column;
}
.ms-panel.open { display: flex; }
.ms-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14.5px; font-weight: 700; color: var(--muted);
}
.ms-panel-head button { background: none; border: 0; color: var(--ink); font-size: 16px; }
.ms-panel-body { overflow-y: auto; padding: 8px 20px 20px; }
.ms-group { padding-top: 14px; }
.ms-group-title { font-size: 16.5px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.ms-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px 10px; }
.ms-items--wide { grid-template-columns: repeat(3, 1fr); }
.ms-items a {
    display: block; padding: 9px 11px; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .13s, color .13s;
}
.ms-items a:hover { background: var(--gold-soft); color: var(--gold-deep); }
.ms-items a em { font-style: normal; color: var(--muted-soft); font-size: 13px; }
.ms-items a:hover em { color: var(--gold-deep); }
.ms-loading { padding: 30px; text-align: center; color: var(--muted); font-size: 15px; }

.ms-bottom { display: flex; align-items: center; gap: 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.ms-keyword { display: flex; align-items: center; gap: 9px; flex: 0 0 320px; border-bottom: 1.5px solid var(--line); padding: 8px 4px; }
.ms-keyword i { color: var(--muted); }
.ms-keyword input { flex: 1; border: 0; outline: none; background: none; font-size: 15.5px; }
.ms-themes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-themes-label { font-size: 14.5px; font-weight: 800; color: var(--ink); margin-right: 4px; }
.ms-themes a {
    font-size: 14px; font-weight: 700; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px;
    transition: all .14s;
}
.ms-themes a:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); }

@media (max-width: 992px) {
    .ms-row { grid-template-columns: 1fr 1fr; }
    .ms-field { border-radius: 12px; }
    .ms-field:nth-child(3) { grid-column: 1 / -1; }
    .ms-submit { grid-column: 1 / -1; border-radius: 12px; padding: 15px; margin: 4px 0 0; height: 52px; }
    .ms-row { gap: 8px; }
    .ms-panel { left: 16px; right: 16px; top: auto; bottom: auto; position: fixed; top: 50%; transform: translateY(-50%); max-height: 70vh; }
    .ms-items { grid-template-columns: repeat(3, 1fr); }
    .ms-items--wide { grid-template-columns: repeat(2, 1fr); }
    .ms-bottom { flex-direction: column; align-items: stretch; gap: 14px; }
    .ms-keyword { flex: 1; }
}
@media (max-width: 576px) {
    .ms-box { padding: 16px; }
    .ms-row { grid-template-columns: 1fr; }
    .ms-field:nth-child(3) { grid-column: auto; }
    .ms-items { grid-template-columns: repeat(2, 1fr); }
    .ms-items--wide { grid-template-columns: 1fr; }
}

/* ---------- 최저가 차량 검색 (스텝) ---------- */
.lp-summary { text-align: right; flex-shrink: 0; }
.lp-summary > span { display: block; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.lp-summary strong { font-size: 34px; font-weight: 900; color: var(--brand-deep); letter-spacing: -0.03em; line-height: 1.1; }
.lp-summary em { font-style: normal; font-size: 15px; font-weight: 800; margin-left: 2px; }

.lp-box {
    background: #fff; border: 1px solid var(--line);
    border-radius: 20px; overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* 진행 표시 */
.lp-steps {
    display: flex; align-items: center; gap: 8px;
    list-style: none; margin: 0; padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-soft);
    overflow-x: auto;
}
.lp-steps li {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px 7px 8px;
    border-radius: 100px;
    background: #fff; border: 1px solid var(--line);
    font-size: 12.5px; font-weight: 700; color: var(--muted-soft);
    white-space: nowrap;
    transition: all .18s;
}
.lp-steps li b {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--line-soft); color: var(--muted);
    font-size: 11px; font-weight: 900;
    transition: all .18s;
}
.lp-steps li.on { border-color: var(--brand); color: var(--brand-deep); box-shadow: 0 4px 12px rgba(var(--brand-rgb), .16); }
.lp-steps li.on b { background: var(--brand); color: #fff; }
.lp-steps li.done { color: var(--ink-soft); cursor: pointer; }
.lp-steps li.done b { background: var(--brand-soft); color: var(--brand-deep); }
.lp-steps li.done:hover { border-color: var(--brand); background: var(--brand-soft); }
.lp-steps li em {
    font-style: normal; font-weight: 800; color: var(--brand-deep);
    max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}

/* 현재 단계 */
.lp-stage { padding: 26px 22px 28px; }
.lp-stage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.lp-stage-txt { flex: 1; min-width: 0; }
.lp-stage-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--brand); color: #fff;
    font-size: 13px; font-weight: 900;
    margin-right: 8px; vertical-align: middle;
}
.lp-stage-txt strong { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.lp-stage-txt small { display: block; margin-top: 4px; margin-left: 34px; font-size: 13px; color: var(--muted); font-weight: 600; }
.lp-back, .lp-skip {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--line); background: #fff;
    border-radius: 100px; padding: 7px 14px;
    font-size: 12.5px; font-weight: 700; color: var(--muted);
    flex-shrink: 0;
    transition: all .14s;
}
.lp-back:hover, .lp-skip:hover { border-color: var(--ink-soft); color: var(--ink); }

/* 선택지 */
/*
 | 단계별 선택지.
 | 세 칸으로 박아 두면 선택지가 둘일 때 오른쪽 한 칸이 빈다.
 | 이용 형태에서 단기렌트를 뺀 뒤 실제로 그랬다. 개수에 맞춰 채우게 둔다.
 */
.lp-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
/*
   여러 개를 고르는 단계(차급·연료)는 칸이 좁다.
   가로로 두면 이미지가 폭을 다 먹고 글자가 한 글자씩 접혀 체크 표시에 가려진다.
   그래서 이 단계만 이미지를 위로 올려 세로로 쌓는다. */
.lp-options.multi { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.lp-options.multi .lp-opt.has-img {
    flex-direction: column; align-items: center;
    gap: 8px; padding: 16px 12px 14px;
    text-align: center;
}
.lp-options.multi .lp-opt.has-img .lp-opt-img { width: 62px; height: 62px; }
.lp-options.multi .lp-opt.has-img .lp-opt-body { align-items: center; width: 100%; }
.lp-options.multi .lp-opt.has-img .lp-opt-label { font-size: 14.5px; }
.lp-options.multi .lp-opt.has-img .lp-opt-check { top: 10px; right: 10px; transform: none; }
.lp-opt {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 18px 18px 16px;
    border: 1px solid var(--line); border-radius: 16px;
    background: #fff; text-align: left;
    animation: lpOptIn .34s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--i) * 45ms);
    transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
@keyframes lpOptIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lp-opt > .bi { font-size: 22px; color: var(--brand); margin-bottom: 6px; }
/* 일러스트가 있는 옵션 카드 — 이미지와 글이 한 줄로 나란히 */
.lp-opt.has-img {
    flex-direction: row; align-items: center;
    gap: 14px;
    /* 오른쪽 체크 동그라미(22px + 여백) 자리를 비워 둬야 글자가 덮이지 않는다 */
    padding: 14px 44px 14px 14px;
}
.lp-opt-img {
    width: 72px; height: 72px; flex-shrink: 0;
    object-fit: contain;
    margin-bottom: 0;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.lp-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 차급·연료처럼 설명 없이 라벨만 있는 카드는 세로 가운데 정렬 */
.lp-opt.has-img .lp-opt-body { justify-content: center; }
.lp-opt.has-img:hover .lp-opt-img { transform: translateY(-2px) scale(1.06); }
.lp-opt.has-img.on .lp-opt-img { transform: scale(1.03); }
.lp-opt.has-img .lp-opt-check { top: 50%; transform: translateY(-50%); }
@media (max-width: 576px) {
    .lp-opt.has-img { padding: 12px 40px 12px 12px; gap: 11px; }
    .lp-opt-img { width: 56px; height: 56px; }
    .lp-options.multi { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .lp-options.multi .lp-opt.has-img { padding: 13px 10px 11px; }
    .lp-options.multi .lp-opt.has-img .lp-opt-img { width: 50px; height: 50px; }
    .lp-options.multi .lp-opt.has-img .lp-opt-label { font-size: 13px; }
}
.lp-opt-label { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; word-break: keep-all; }
.lp-opt-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.lp-opt-check {
    position: absolute; right: 14px; top: 14px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--line-soft); color: transparent;
    font-size: 12px;
    transition: all .16s;
}
.lp-opt:hover {
    border-color: var(--brand); transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(var(--brand-rgb), .16);
}
.lp-opt.on {
    border-color: var(--brand); background: var(--brand-soft);
}
.lp-opt.on .lp-opt-check { background: var(--brand); color: #fff; }
.lp-options.multi .lp-opt { padding: 14px 14px 13px; }
.lp-options.multi .lp-opt-label { font-size: 14.5px; }

.lp-next {
    grid-column: 1 / -1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; margin-top: 4px;
    border: 0; border-radius: 14px;
    background: var(--ink); color: #fff;
    font-size: 15px; font-weight: 800;
    transition: background .14s, transform .14s;
}
.lp-next:hover { background: #000; transform: translateY(-1px); }

/* 결과 */
.lp-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 22px;
    background: var(--bg-soft);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.lp-count { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.lp-count strong { font-size: 18px; font-weight: 900; color: var(--ink); }
.lp-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-sort button {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--line); background: #fff;
    border-radius: 100px; padding: 6px 14px;
    font-size: 13px; font-weight: 700; color: var(--muted);
    transition: all .14s;
}
.lp-sort button:hover { color: var(--ink); border-color: var(--ink-soft); }
.lp-sort button.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.lp-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--line-soft);
    min-height: 180px;
    transition: opacity .18s;
}
.lp-grid.loading { opacity: .35; pointer-events: none; }
.lp-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; padding: 16px 20px;
    text-decoration: none;
    animation: lpIn .38s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(var(--i) * 45ms);
    transition: background .14s;
}
@keyframes lpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lp-card:hover { background: var(--brand-soft); }
.lp-rank {
    flex-shrink: 0; width: 26px;
    font-size: 17px; font-weight: 900; color: var(--muted-soft);
    font-variant-numeric: tabular-nums;
}
.lp-card:hover .lp-rank { color: var(--brand); }
.lp-thumb { flex-shrink: 0; width: 96px; height: 62px; display: block; }
.lp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-badges { display: flex; gap: 4px; }
.lp-badges b { font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 6px; }
.lp-badges .ins { background: var(--ink); color: #fff; }
.lp-badges .pro { background: var(--brand-soft); color: var(--brand-deep); }
.lp-brand { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.lp-name {
    font-size: 15.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-engine {
    font-size: 12px; color: var(--muted); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-price { flex-shrink: 0; text-align: right; }
.lp-price-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.lp-price-num { display: block; line-height: 1.15; }
.lp-price-num b {
    font-size: 22px; font-weight: 900; color: var(--brand-deep);
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.lp-price-num em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--brand-deep); margin-left: 1px; }
.lp-price-num em span { font-size: 11px; color: var(--muted); }
.lp-price-car { display: block; font-size: 11px; color: var(--muted-soft); font-weight: 600; margin-top: 2px; }

.lp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 52px 20px 46px; text-align: center; background: #fff;
}
.lp-empty img { width: 84px; height: 84px; object-fit: contain; margin-bottom: 8px; opacity: .95; }
.lp-empty strong { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.lp-empty span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.lp-empty-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 9px 18px;
    border: 1px solid var(--line); border-radius: 100px; background: #fff;
    font-size: 13px; font-weight: 800; color: var(--ink);
    transition: all .14s;
}
.lp-empty-btn:hover { border-color: var(--brand); color: var(--brand-deep); box-shadow: 0 6px 16px rgba(var(--brand-rgb), .16); }
.lp-more { padding: 18px 22px; display: flex; justify-content: center; background: #fff; border-top: 1px solid var(--line-soft); }

@media (max-width: 992px) {
    .lp-grid { grid-template-columns: 1fr; }
    .lp-summary { display: none; }
    .lp-options { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .lp-steps { padding: 12px 14px; gap: 6px; }
    .lp-stage { padding: 20px 14px 22px; }
    .lp-stage-txt strong { font-size: 17px; }
    .lp-stage-txt small { margin-left: 0; }
    .lp-options { grid-template-columns: 1fr; gap: 8px; }
    .lp-opt { padding: 14px 16px; }
    .lp-bar { padding: 11px 14px; flex-direction: column; align-items: stretch; gap: 10px; }
    .lp-sort { overflow-x: auto; flex-wrap: nowrap; }
    .lp-sort button { white-space: nowrap; }
    .lp-card { padding: 14px; gap: 10px; }
    .lp-thumb { width: 78px; height: 52px; }
    .lp-rank { display: none; }
    .lp-price-num b { font-size: 19px; }
}

/* ---------- 브랜드 그리드 ---------- */
/* 제조사 그리드 — 한 줄 6개, 로고 크기를 동일 박스에 맞춰 통일 */
.brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.brand-cell {
    background: #fff; border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    text-align: center;
    transition: border-color .16s, box-shadow .16s, transform .16s;
    cursor: pointer;
}
.brand-cell:hover, .brand-cell.on {
    border-color: var(--brand); box-shadow: 0 10px 24px rgba(var(--brand-rgb), .14); transform: translateY(-2px);
}
/* 위칸: 로고 — 모든 로고가 같은 박스 안에 같은 비율로 들어간다 */
.brand-cell .blogo {
    height: 74px;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 16px;
    background: #fff;
}
/*
   로고 파일이 아이콘형(1:1)과 워드마크형(4:1)이 섞여 있다.
   세로만 맞추면 기아·제네시스 같은 가로로 긴 로고가 130px 까지 퍼져
   현대(34px)보다 훨씬 크게 보인다. 가로도 같이 묶어 눈에 보이는 덩치를 맞춘다. */
.brand-cell .blogo img {
    max-height: 29px;
    max-width: 76px;
    width: auto; height: auto;
    object-fit: contain;
    transition: transform .2s;
}
.brand-cell:hover .blogo img { transform: scale(1.06); }
.brand-cell .en { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; }
/* 아래칸: 브랜드명 */
.brand-cell .kr {
    border-top: 1px solid var(--line-soft);
    background: var(--bg-soft);
    padding: 9px 8px;
    font-size: 13px; color: var(--ink); font-weight: 800; letter-spacing: -0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-cell:hover .kr { background: var(--brand-soft); color: var(--brand-deep); }

/* FAQ 상담사 카드 */
.faq-consult-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    line-height: 0;
}
.faq-consult-card > img { width: 100%; height: auto; display: block; }
/*
   상담사 영상 2본 — 세로 카드 비율에 맞춰 교차 페이드.
   .vfade 기본값은 헤더 배경용이라 absolute + opacity .55 다.
   그대로 두면 카드가 높이 2px 로 접혀 아무것도 안 보인다. 여기서만 되돌린다. */
.faq-consult-card .vfade.faq-consult-vid {
    position: relative; inset: auto;
    width: 100%; aspect-ratio: 3 / 4;
}
.faq-consult-card .vfade.faq-consult-vid video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}
.faq-consult-card .vfade.faq-consult-vid video.on { opacity: 1; }
.faq-consult-badge {
    position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
    border-radius: 100px; padding: 6px 13px;
    font-size: 12px; font-weight: 800; color: var(--ink);
    line-height: 1;
}
.faq-consult-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 0 3px rgba(55,214,122,.25); }
.faq-consult-cta {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(23,24,26,0), rgba(23,24,26,.86));
    line-height: 1.3;
}
.faq-consult-cta strong { display: block; color: #fff; font-size: 14.5px; font-weight: 800; }
.faq-consult-cta small { color: rgba(255,255,255,.72); font-size: 11.5px; }
.faq-consult-cta a { flex-shrink: 0; color: #fff; font-size: 16px; font-weight: 900; letter-spacing: -0.01em; }

/* ---------- 가격대 탭 ---------- */
.price-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.price-tabs button {
    border: 1px solid var(--line); background: #fff;
    font-size: 14px; font-weight: 700; color: var(--ink-soft);
    border-radius: 100px; padding: 9px 22px;
    transition: all .15s;
}
.price-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 기업 상담 ---------- */
.corp-band {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
}
.corp-band .bg { position: absolute; inset: 0; opacity: .38; background-size: cover; background-position: center; }
.corp-band .corp-video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: .5;
}
/* 배경 영상 2본 교차 페이드 */
.vfade { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.vfade video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}
.vfade video.on { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
    .vfade video { transition: none; }
}
.corp-band .corp-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(20,21,24,.88) 18%, rgba(20,21,24,.68) 55%, rgba(20,21,24,.5));
}
.corp-band .in { z-index: 2; }
.corp-band .in {
    position: relative;
    padding: 68px 64px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
}
.corp-band h2 { font-size: clamp(24px, 2.8vw, 34px); color: #fff; margin-bottom: 14px; }
.corp-band p { color: rgba(255,255,255,.75); font-size: 15.5px; }
.corp-band .feats { display: flex; gap: 26px; margin-top: 26px; }
.corp-band .feats div { font-size: 13.5px; color: rgba(255,255,255,.85); font-weight: 600; }
.corp-band .feats i { color: var(--gold); margin-right: 6px; }
.corp-form {
    background: rgba(255,255,255,.98);
    border-radius: var(--radius);
    padding: 30px 30px 26px;
    color: var(--ink);
}
.corp-form h3 { font-size: 18px; margin-bottom: 18px; }

/* ---------- 정보 카드 3열 (아이콘 + 번호 워터마크 + 체크 리스트) ---------- */
.icards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.icard {
    position: relative; overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px 26px 26px;
    transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s;
}
/* 상단 브랜드 액센트 바 */
.icard::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--brand-light), var(--brand), var(--brand-deep));
    transform: scaleX(0); transform-origin: left;
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
/* 번호 워터마크 */
.icard::after {
    content: attr(data-no);
    position: absolute; right: 16px; top: 6px;
    font-size: 84px; font-weight: 900; line-height: 1;
    color: var(--brand-soft);
    letter-spacing: -0.06em;
    pointer-events: none;
    transition: color .22s;
}
.icard:hover {
    transform: translateY(-4px);
    border-color: var(--brand-line);
    box-shadow: 0 18px 44px rgba(var(--brand-rgb), .16);
}
.icard:hover::before { transform: scaleX(1); }
.icard:hover::after { color: var(--cream); }

.icard-ico {
    width: 76px; height: 76px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.icard-ico img { width: 100%; height: 100%; object-fit: contain; }
.icard:hover .icard-ico { transform: translateY(-3px) scale(1.05); }
.icard:hover .icard-ico { transform: translateY(-2px) rotate(-4deg); }

.icard h3 {
    position: relative; z-index: 1;
    font-size: 18px; font-weight: 800; letter-spacing: -0.03em;
    margin: 0 0 4px;
}
.icard .icard-sub {
    position: relative; z-index: 1;
    display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
    color: var(--brand-deep); margin-bottom: 16px;
}
.icard ul { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.icard li {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 9px 0;
    font-size: 14px; line-height: 1.55; color: var(--ink-soft); font-weight: 600;
    border-top: 1px dashed var(--line-soft);
}
.icard li:first-child { border-top: 0; padding-top: 2px; }
.icard li i {
    flex-shrink: 0; margin-top: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-deep);
    font-size: 10px;
    transition: background .18s, color .18s;
}
.icard:hover li i { background: var(--brand); color: #fff; }

@media (max-width: 992px) { .icards { grid-template-columns: 1fr; } }

/* ---------- 회사소개 마스코트 드라이브 씬 ---------- */
.drive-scene {
    position: relative;
    height: 380px;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 120%, rgba(90,205,207,.30) 0%, rgba(90,205,207,0) 62%),
        linear-gradient(180deg, #f4fbfb 0%, #e6f6f6 58%, #dff2f2 100%);
    isolation: isolate;
}

/* 하늘 · 구름 */
.drive-sky { position: absolute; inset: 0; z-index: 1; }
.dr-cloud {
    position: absolute;
    background: #fff;
    border-radius: 100px;
    opacity: .85;
    filter: blur(.4px);
    animation: drCloud linear infinite;
}
.dr-cloud::before, .dr-cloud::after {
    content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.dr-cloud.c1 { width: 120px; height: 30px; top: 16%; left: 110%; animation-duration: 26s; }
.dr-cloud.c1::before { width: 52px; height: 52px; left: 18px; top: -24px; }
.dr-cloud.c1::after  { width: 36px; height: 36px; left: 62px; top: -16px; }
.dr-cloud.c2 { width: 86px; height: 22px; top: 34%; left: 130%; animation-duration: 34s; animation-delay: -8s; opacity: .7; }
.dr-cloud.c2::before { width: 38px; height: 38px; left: 14px; top: -18px; }
.dr-cloud.c3 { width: 150px; height: 34px; top: 9%; left: 160%; animation-duration: 44s; animation-delay: -20s; opacity: .55; }
.dr-cloud.c3::before { width: 62px; height: 62px; left: 26px; top: -30px; }
.dr-cloud.c3::after  { width: 44px; height: 44px; left: 84px; top: -20px; }
@keyframes drCloud { to { transform: translateX(-260%); } }

/* 속도선 */
.drive-speed { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.drive-speed span {
    position: absolute;
    left: 110%;
    top: var(--t);
    width: var(--w);
    height: 4px;
    border-radius: 100px;
    background: linear-gradient(90deg, rgba(42,154,159,0), rgba(42,154,159,.34));
    animation: drSpeed 1.9s linear infinite;
    animation-delay: var(--d);
}
@keyframes drSpeed {
    from { transform: translateX(0) scaleX(1); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    to   { transform: translateX(-160vw) scaleX(1.6); opacity: 0; }
}

/* 마스코트 — 폭이 아니라 "도로 위에 남은 높이"로 크기를 정한다.
   폭으로 잡으면 씬이 짧아졌을 때 위로 넘쳐 머리가 잘린다. */
.drive-car {
    position: absolute; z-index: 3;
    left: 50%; bottom: 46px;
    height: min(292px, calc(100% - var(--drive-reserve, 124px)));
    width: auto; max-width: 46%;
    aspect-ratio: 640 / 743;
    transform: translateX(-50%);
    line-height: 0;
    filter: drop-shadow(0 14px 22px rgba(23,60,62,.18));
}
.drive-car canvas { display: block; width: 100%; height: 100%; }
.drive-car img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain;
    transition: opacity .3s ease;
}
.drive-car.pixi-ready .drive-fallback { opacity: 0; }
.drive-shadow {
    position: absolute; left: 50%; bottom: 44px;
    width: 26%; height: 14px; z-index: 2;
    transform: translateX(-50%);
    background: radial-gradient(50% 50%, rgba(23,60,62,.3), rgba(23,60,62,0) 70%);
    animation: drShadow 2.8s ease-in-out infinite;
}
@keyframes drShadow {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: .8; }
    50%      { transform: translateX(-50%) scale(.86); opacity: .55; }
}

/* 도로 */
.drive-road {
    position: absolute; left: 0; right: 0; bottom: 0; height: 62px; z-index: 2;
    background: linear-gradient(180deg, #cfe9e9 0%, #bcdedf 100%);
    overflow: hidden;
}
.drive-road::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: rgba(255,255,255,.85);
}
.dr-line {
    position: absolute; left: 0; top: 50%; height: 6px; width: 200%;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg,
        rgba(255,255,255,.95) 0 46px,
        rgba(255,255,255,0) 46px 96px);
    animation: drRoad .62s linear infinite;
}
@keyframes drRoad { to { transform: translateY(-50%) translateX(-96px); } }

@media (max-width: 768px) {
    .drive-scene { height: 300px; }
    /* 모바일은 도로가 얇아 남기는 여백도 줄인다 */
    .drive-scene { --drive-reserve: 96px; }
    .drive-car { bottom: 40px; max-width: 62%; }
    .drive-shadow { bottom: 38px; }
    .drive-road { height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .drive-shadow, .dr-line, .dr-cloud, .drive-speed span { animation: none !important; }
}

/* 푸터 하위 링크 (장기렌트 · 리스) */
.site-footer .ft-sub {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 7px;
}
.site-footer .ft-sub a {
    font-size: 11.5px; font-weight: 700;
    padding: 1px 8px; border-radius: 100px;
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.62);
    line-height: 1.6;
    transition: all .14s;
}
.site-footer .ft-sub a:hover {
    color: #fff; border-color: var(--brand-light); background: rgba(90,205,207,.16);
}


/* ---------- 제휴 금융사 ----------
   먹빛 배경 위에 야경 사진을 오른쪽 절반만 흐리게 깔았다.
   mask-image 로 왼쪽(글자 쪽)에서 서서히 사라지게 해 글씨를 방해하지 않는다. */
.pt-sec {
    position: relative;
    padding: 56px 0 58px;
    background: linear-gradient(160deg, #24292d 0%, #1b2023 55%, #1e2428 100%);
    overflow: hidden;
    isolation: isolate;
}
.pt-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pt-bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 68% 50%;
    opacity: .78;
    /* 왼쪽은 완전히 비우고 오른쪽으로 갈수록 살아난다 */
    -webkit-mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.35) 34%, rgba(0,0,0,.85) 62%, #000 100%);
            mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.35) 34%, rgba(0,0,0,.85) 62%, #000 100%);
}
/* 사진 위로 옅은 브랜드 톤을 한 겹 얹어 섹션 색을 잡아 준다 */
.pt-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(90% 70% at 88% 30%, rgba(var(--brand-rgb), .2), transparent 60%),
        linear-gradient(90deg, rgba(13,16,18,.62) 8%, rgba(13,16,18,.3) 46%, rgba(13,16,18,.14) 100%);
}
.pt-in { position: relative; z-index: 1; }

/*
   헤드는 흰 카드로 띄운다.
   어두운 배경 위에 반투명 회색 판을 올리면 글씨도 지표도 배경에 묻혀 지저분해진다.
   아래 로고 카드와 같은 흰색으로 맞춰 한 덩어리로 읽히게 했다. */
.pt-sec .pt-head {
    display: grid; grid-template-columns: 1fr auto;
    gap: 34px; align-items: center;
    margin-bottom: 20px;
    padding: 30px 34px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.pt-sec .pt-head-txt .badge-line {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800; color: var(--brand-deep); letter-spacing: .05em;
    margin-bottom: 10px;
}
.pt-sec .pt-head-txt .badge-line::before { content: ''; width: 22px; height: 2px; background: var(--brand); }
.pt-sec .pt-head-txt h2 { font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -0.04em; margin-bottom: 8px; color: var(--ink); }
.pt-sec .pt-head-txt p { font-size: 14.5px; color: var(--muted); margin: 0; font-weight: 600; }

.pt-sec .pt-stats { display: flex; gap: 10px; flex-shrink: 0; }
.pt-sec .pt-stat {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 116px; padding: 15px 18px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 15px;
    transition: border-color .16s, transform .16s, background .16s, box-shadow .16s;
}
.pt-sec .pt-stat:hover {
    border-color: var(--brand); background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--brand-rgb), .16);
}
.pt-sec .pt-stat > img { width: 46px; height: 46px; object-fit: contain; margin-bottom: 4px; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.pt-sec .pt-stat:hover > img { transform: translateY(-2px) scale(1.06); }
.pt-sec .pt-stat b {
    font-size: 28px; font-weight: 900; color: var(--ink);
    letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.pt-sec .pt-stat b em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--brand-deep); margin-left: 2px; }
/* 라벨만 — 자손 선택자로 두면 <b> 안의 숫자 span(슬롯머신)까지 작아진다 */
.pt-sec .pt-stat > span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
/* 숫자는 <b> 크기를 그대로 물려받는다 */
.pt-sec .pt-stat b > span { font-size: inherit; font-weight: inherit; color: inherit; }

/*
   로고 카드는 흰 바탕을 그대로 둔다.
   어두운 밴드에 맞추려고 로고를 흰색으로 뒤집으면 각 사의 고유색이 사라져
   어느 금융사인지 알아보기 어려워진다. 카드만 띄워서 대비를 만든다. */
.pt-sec .partner-card {
    background: #fff;
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.pt-sec .partner-card:hover {
    border-color: var(--brand);
    box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--brand-rgb), .5);
    transform: translateY(-2px);
}
.pt-sec .partner-card .plogo img { filter: none; }
.pt-sec .partner-card .plogo .ptext { color: var(--ink); }
.pt-sec .partner-card .pname { color: var(--muted); }

@media (max-width: 992px) {
    .pt-sec .pt-head { grid-template-columns: 1fr; gap: 18px; text-align: center; padding: 24px 20px; }
    .pt-sec .pt-stats { justify-content: center; }
    .pt-bg img { object-position: 78% 50%; opacity: .6; }
}
@media (max-width: 576px) {
    /* 좁은 화면에서는 지표 3개를 가로로 나란히 — 세로로 쌓이면 카드가 쓸데없이 길어진다 */
    .pt-sec .pt-head { padding: 22px 16px; }
    .pt-sec .pt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 100%; }
    .pt-sec .pt-stat { min-width: 0; padding: 12px 6px; border-radius: 13px; }
    .pt-sec .pt-stat > img { width: 36px; height: 36px; }
    .pt-sec .pt-stat b { font-size: 22px; }
    .pt-sec .pt-stat b em { font-size: 11px; }
    .pt-sec .pt-stat > span { font-size: 10.5px; }
    .pt-sec .pt-head-txt h2 { font-size: 21px; }
    .pt-sec .pt-head-txt p { font-size: 13px; }
}

/* ---------- 후기 아바타 ---------- */
.review-card .avatar,
.review-mini .avatar,
.rm-who .avatar {
    overflow: hidden;
    padding: 0;
    background: var(--brand-soft);
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 이벤트 마감 카운트다운 (페이지 플립) ----------
   각 자리는 위/아래 반쪽 카드 위로 "잎"이 접히며 넘어간다. */
.countdown { display: inline-flex; align-items: flex-start; gap: 10px; font-variant-numeric: tabular-nums; }
.flip__unit { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.flip__card {
    position: relative; display: block; width: 46px; height: 50px;
    perspective: 190px; border-radius: 10px; background: var(--ink);
    box-shadow: 0 3px 8px rgba(23,24,26,.22);
}
/*
 | 반쪽 창은 글자를 "위에서부터" 잘라야 한다.
 | align-items:center 로 두면 50px 글자가 25px 창 한가운데 놓여
 | 위·아래로 12.5px 씩 삐져나가 숫자가 반쯤 잘려 보인다.
 */
.flip__face {
    position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
    display: flex; align-items: flex-start; justify-content: center;
    background: var(--ink);
}
.flip__face--top { top: 0; border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.flip__face--bottom { bottom: 0; border-radius: 0 0 10px 10px; }
/* 숫자는 카드 전체 높이로 그려 두고, 반쪽 창으로 위·아래를 나눠 보여준다 */
.flip__face i, .flip__leaf i {
    font-style: normal; font-size: 26px; font-weight: 900; color: #fff;
    line-height: 50px; height: 50px; letter-spacing: -.03em; display: block;
}
.flip__face--bottom i { margin-top: -25px; }

/* 잎(넘어가는 장)은 애니메이션 중에만 보인다 */
.flip__leaf {
    position: absolute; left: 0; right: 0; top: 0; height: 50%;
    transform-style: preserve-3d; transform-origin: bottom center;
    pointer-events: none; visibility: hidden;
}
.flip__leaf-front, .flip__leaf-back {
    position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden;
    display: flex; align-items: flex-start; justify-content: center;
    background: var(--ink);
    border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.flip__leaf-back { transform: rotateX(180deg); }
.flip__leaf-back i { margin-top: -25px; }
.flip__leaf.is-flipping { visibility: visible; animation: flipDown .42s cubic-bezier(.32,.86,.42,1) both; }
@keyframes flipDown { from { transform: rotateX(0deg); } to { transform: rotateX(-180deg); } }
.flip__label { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted); }
.flip__done { font-size: 13.5px; font-weight: 800; color: var(--muted); }

/* 마감 임박 배너 */
.cd-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
    padding: 20px 24px; margin-bottom: 26px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
        linear-gradient(125deg, var(--brand-light), var(--brand) 52%, var(--brand-deep));
    color: #fff;
    box-shadow: 0 14px 34px rgba(var(--brand-rgb), .28);
}
.cd-strip .cd-txt { min-width: 0; }
.cd-strip .cd-tag i { animation: cdSand 3.2s ease-in-out infinite; }
.cd-strip .cd-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.22); border-radius: 100px;
    padding: 3px 11px; font-size: 11.5px; font-weight: 900; letter-spacing: .03em;
    margin-bottom: 7px;
}
.cd-strip h3 { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.03em; margin: 0 0 3px; }
.cd-strip p { font-size: 13px; color: rgba(255,255,255,.85); margin: 0; font-weight: 600; }
.cd-strip .cd-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
/* 밝은 띠 위에서는 카드도 반투명 흰색으로 */
.cd-strip .flip__card { background: rgba(255,255,255,.18); box-shadow: none; }
.cd-strip .flip__face,
.cd-strip .flip__leaf-front,
.cd-strip .flip__leaf-back { background: rgba(255,255,255,.18); }
.cd-strip .flip__label { color: rgba(255,255,255,.75); }
.cd-strip .flip__done { color: rgba(255,255,255,.85); }
.cd-strip.ended { filter: grayscale(.7); opacity: .8; }

/* 이벤트 카드 안 소형 카운트다운 */
.event-card .cd-mini {
    display: flex; align-items: center; gap: 9px;
    margin-top: 10px;
    font-size: 12px; font-weight: 800; color: var(--brand-deep);
}
/* 아이콘 하나만 덩그러니 두면 깨알처럼 보인다 — 플립 카드 높이에 맞춘 배지로 */
.cd-badge {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 11px;
    border-radius: 9px;
    background: var(--brand-soft);
    border: 1px solid rgba(var(--brand-rgb), .28);
    color: var(--brand-deep);
    font-size: 11.5px; font-weight: 900; letter-spacing: -.02em;
    white-space: nowrap; flex-shrink: 0;
}
.cd-badge i { font-size: 15px; animation: cdSand 3.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes cdSand {
    0%, 62%  { transform: rotate(0deg); }
    74%      { transform: rotate(180deg); }
    100%     { transform: rotate(180deg); }
}
/* 밝은 띠 위(마감 임박 배너)에서는 흰 계열로 */
.cd-strip .cd-badge {
    height: 50px; padding: 0 14px; font-size: 12.5px;
    background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.32); color: #fff;
}
.cd-strip .cd-badge i { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .cd-badge i { animation: none; } }
/*
   밝은 카드 안에서는 검정 플립이 배지와 따로 놀아 튄다.
   같은 브랜드 톤(연한 배경 + 딥틸 숫자)으로 맞춘다. */
.event-card .cd-mini .flip__card {
    width: 30px; height: 32px; border-radius: 8px;
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .22);
}
.event-card .cd-mini .flip__face,
.event-card .cd-mini .flip__leaf-front,
.event-card .cd-mini .flip__leaf-back { background: var(--brand-soft); }
.event-card .cd-mini .flip__face--top,
.event-card .cd-mini .flip__leaf-front,
.event-card .cd-mini .flip__leaf-back { border-bottom-color: rgba(var(--brand-rgb), .26); }
.event-card .cd-mini .flip__face i,
.event-card .cd-mini .flip__leaf i {
    font-size: 16px; line-height: 32px; height: 32px;
    color: var(--brand-deep);
}
.event-card .cd-mini .flip__face--bottom i, .event-card .cd-mini .flip__leaf-back i { margin-top: -16px; }
.event-card .cd-mini .flip__label { font-size: 9.5px; color: var(--muted); }

@media (max-width: 576px) {
    .cd-strip { padding: 16px; gap: 14px; }
    .cd-strip .cd-right { width: 100%; }
    .flip__card { width: 40px; height: 44px; }
    .flip__face i, .flip__leaf i { font-size: 22px; line-height: 44px; height: 44px; }
    .flip__face--bottom i, .flip__leaf-back i { margin-top: -22px; }
}

/* ---------- 상담 완료 페이지 ---------- */
.done-wrap {
    padding: 70px 0 90px;
    background:
        radial-gradient(80% 60% at 50% 0%, var(--brand-soft) 0%, rgba(255,255,255,0) 70%),
        var(--bg);
}
.done-card {
    max-width: 620px; margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: 0 22px 56px rgba(23,24,26,.10);
    padding: 40px 36px 34px;
    text-align: center;
}

/* 마스코트 + 체크 */
.done-mascot { position: relative; width: 108px; margin: 0 auto 20px; }
.done-mascot img { width: 100%; height: auto; display: block; }
.done-check {
    position: absolute; right: -4px; bottom: -2px;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--brand-light), var(--brand-deep));
    color: #fff; font-size: 19px;
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), .42), 0 0 0 4px #fff;
    animation: doneCheck .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes doneCheck { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.done-kind {
    display: inline-block;
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
    color: var(--brand-deep); background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 100px; padding: 4px 13px;
    margin-bottom: 12px;
}
.done-card h1 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.04em; margin-bottom: 12px; }
.done-lead { font-size: 15px; color: var(--ink-soft); line-height: 1.8; margin: 0; }
.done-lead strong { color: var(--brand-deep); font-weight: 800; }

.done-no {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 20px; padding: 11px 18px;
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: 12px;
}
.done-no > span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.done-no strong { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.done-copy {
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--line); background: #fff;
    color: var(--muted); font-size: 12px;
    transition: all .14s;
}
.done-copy:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }

/* 진행 단계 */
.done-steps {
    list-style: none; margin: 26px 0 0; padding: 0;
    text-align: left;
    border-top: 1px solid var(--line-soft);
}
.done-steps li {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line-soft);
}
.done-steps li > i {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft); color: var(--muted-soft);
    font-size: 15px;
}
.done-steps li.on > i { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(var(--brand-rgb), .3); }
.done-steps span { display: flex; flex-direction: column; gap: 1px; }
.done-steps b { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.done-steps li:not(.on) b { color: var(--ink-soft); }
.done-steps em { font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 600; }

.done-actions { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.done-actions .btn, .done-actions .btn-gloss { min-width: 190px; justify-content: center; }
.done-note { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
.done-note a { font-weight: 800; color: var(--brand-deep); }

/* 추천 차량 */
.done-suggest { max-width: 900px; margin: 44px auto 0; }
.done-suggest-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.done-suggest-head strong { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; }
.done-suggest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.done-sug {
    display: block; padding: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    text-align: center; text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.done-sug:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--brand-rgb), .14); }
.done-sug img { width: 100%; height: 62px; object-fit: contain; display: block; margin-bottom: 8px; }
.done-sug b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done-sug em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--brand-deep); }

@media (max-width: 768px) {
    .done-wrap { padding: 44px 0 60px; }
    .done-card { padding: 30px 20px 26px; border-radius: 20px; }
    .done-mascot { width: 88px; }
    .done-actions .btn, .done-actions .btn-gloss { width: 100%; }
    .done-suggest-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 오늘의 최저가 (히어로 글래스 카드) ---------- */
.td-card {
    position: absolute; right: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 380px; max-width: calc(100% - 48px);
    padding: 20px 20px 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.60);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 26px 64px rgba(16,24,26,.24), inset 0 1px 0 rgba(255,255,255,.75);
}
.td-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.td-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 900; color: var(--ink); letter-spacing: -0.01em;
}
.td-live i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
    animation: tdPulse 1.6s ease-out infinite;
}
@keyframes tdPulse {
    0% { box-shadow: 0 0 0 0 rgba(23,24,26,.5); }
    70% { box-shadow: 0 0 0 7px rgba(23,24,26,0); }
    100% { box-shadow: 0 0 0 0 rgba(23,24,26,0); }
}
/* TODAY 최저가 카드 오른쪽 위 메달 — 카드 밖으로 살짝 걸치게 놓아 입체감을 준다 */
/*
 | 예전에는 "No.1" 메달 그림이었다. 근거 없는 순위 표시라 사실을 적은 뱃지로 바꿨다.
 | 그림이 아니라 글자라서 관리자에서 문구를 고치면 그대로 반영된다.
 */
.td-medal {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 50%;
    margin: -8px -2px -6px 0; flex-shrink: 0;
    background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff; text-align: center; line-height: 1.1;
    box-shadow: 0 6px 16px rgba(var(--brand-rgb), .34);
}
.td-medal b { font-size: 15px; font-weight: 900; letter-spacing: -.04em; }
.td-medal em { font-style: normal; font-size: 9px; font-weight: 700; opacity: .88; margin-top: 1px; }
@media (max-width: 576px) {
    .td-medal { width: 52px; height: 52px; margin: -6px 0 -4px 0; }
    .td-medal b { font-size: 13px; }
    .td-medal em { font-size: 8px; }
}

.td-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.td-title img { height: 20px; width: auto; max-width: 62px; object-fit: contain; }
.td-title strong { font-size: 21px; font-weight: 900; letter-spacing: -0.04em; color: var(--ink); }
.td-title small { font-size: 12px; color: var(--muted); font-weight: 700; width: 100%; }

.td-tabs {
    display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 12px;
    background: rgba(23,24,26,.06); border-radius: 100px;
}
.td-tabs button {
    border: 0; background: transparent;
    padding: 6px 18px; border-radius: 100px;
    font-size: 13px; font-weight: 800; color: var(--muted);
    transition: all .15s;
}
.td-tabs button.on { background: #fff; color: var(--brand-deep); box-shadow: 0 2px 6px rgba(23,24,26,.12); }

.td-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
/* 차량 전환 — 옆에서 밀려 들어온다 */
.td-body { overflow: hidden; }
.td-body.slide-l { animation: tdSlideL .42s cubic-bezier(.22,.61,.36,1) both; }
.td-body.slide-r { animation: tdSlideR .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes tdSlideL {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes tdSlideR {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .td-body.slide-l, .td-body.slide-r { animation: none; }
}
@keyframes tdIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.td-cell {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 12px 6px 11px;
    background: rgba(255,255,255,.86); border: 1px solid rgba(23,24,26,.07);
    border-radius: 13px;
    text-align: center;
}
.td-cell-term { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.td-cell-label { font-size: 10.5px; color: var(--muted-soft); font-weight: 600; }
.td-cell b {
    font-size: 17px; font-weight: 900; color: var(--ink);
    letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.td-cell b em { font-style: normal; font-size: 11.5px; font-weight: 800; margin-left: 1px; }
.td-cell.best { border-color: var(--brand); background: var(--brand-soft); }
.td-cell.best b { color: var(--brand-deep); }
.td-cell.best .td-cell-term { color: var(--brand-deep); }

/* 아래 "견적 확인" 버튼과 같은 유광 질감 — 카드 안에서 가장 밝게 떠야 한다 */
.td-cta {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 46px; margin-top: 12px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 58%),
        linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 50%, var(--brand-deep) 100%);
    color: #fff; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    box-shadow:
        0 8px 20px rgba(var(--brand-rgb), .38),
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 0 rgba(0,0,0,.14);
    transition: transform .16s, box-shadow .16s, filter .16s;
}
/* 위를 훑고 지나가는 하이라이트 */
.td-cta::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -60%;
    width: 45%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
    transform: skewX(-18deg);
    animation: tdShine 4.5s ease-in-out infinite;
}
@keyframes tdShine {
    0%, 62% { left: -60%; }
    88%, 100% { left: 125%; }
}
.td-cta:hover {
    color: #fff; transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 26px rgba(var(--brand-rgb), .48), inset 0 1px 0 rgba(255,255,255,.55);
}
@media (prefers-reduced-motion: reduce) { .td-cta::after { animation: none; } }

.td-dots { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.td-dots button {
    width: 6px; height: 6px; border: 0; border-radius: 100px; padding: 0;
    background: rgba(23,24,26,.22);
    transition: all .2s;
}
.td-dots button.on { width: 18px; background: var(--brand); }

@media (max-width: 1200px) { .td-card { width: 340px; right: 24px; } }
@media (max-width: 992px) {
    /* 히어로 밖으로 빼서 카드가 잘리지 않게 */
    .td-card {
        position: static; transform: none;
        width: auto; max-width: none;
        margin: -60px 16px 0;
        background: rgba(255,255,255,.97);
        box-shadow: 0 16px 40px rgba(16,24,26,.18);
    }
    /*
     | 카드 아래에 숨 쉴 자리를 만든다.
     | 이게 0 이면 카드 아래변이 섹션 경계와 정확히 겹쳐, 얹힌 게 아니라 잘려 보인다.
     */
    .hero { overflow: visible; padding-bottom: 24px; }
    /*
     | 데스크톱에서는 빠른견적 바가 히어로 위로 겹쳐 올라오지만,
     | 모바일에서는 최저가 카드가 이미 그 자리에 내려와 있어 두 개가 포개진다.
     | 여기서는 위로 당기지 않고 카드 아래에 나란히 놓는다.
     */
    .hero-search { margin-top: 44px; }
}
@media (max-width: 576px) {
    .td-card { padding: 16px 14px 13px; border-radius: 18px; margin: -56px 12px 0; }
    .td-title strong { font-size: 18px; }
    .hero { padding-bottom: 20px; }
    .hero-search { margin-top: 38px; }

    /* 요금이 이 카드의 핵심이라 좁은 화면에서도 크게 보여야 한다 */
    .td-grid { gap: 5px; }
    .td-cell { padding: 9px 4px 10px; }
    .td-cell-term { font-size: 11px; }
    .td-cell-label { display: none; }          /* "월 납입료" 는 위 탭으로 이미 안다 */
    .td-cell b { font-size: 17px; letter-spacing: -.04em; }
    .td-cell b em { font-size: 10.5px; margin-left: 0; }
}
/* 아주 좁은 화면(360px 이하)에서도 세 칸이 안 깨지게 */
@media (max-width: 380px) {
    .hero { padding-bottom: 18px; }
    .td-card { margin: -48px 10px 0; padding: 14px 11px 12px; }
    .td-grid { gap: 4px; }
    .td-cell { padding: 8px 2px 9px; }
    .td-cell b { font-size: 15.5px; }
    .td-cell-term { font-size: 10px; }
    .td-title strong { font-size: 16.5px; }
}

/* ---------- 브랜드 홍보영상 ---------- */
/* 좌 문구 · 우 영상 2단 */
.promo-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
.promo-txt .badge-line { margin-bottom: 12px; }
.promo-txt h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.04em; margin-bottom: 12px; }
.promo-txt p { font-size: 15px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 16px; }
/* 좌측 여백을 채우는 유튜브 썸네일 슬라이더 */
.promo-clips { margin-top: 26px; }
.promo-clips-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.promo-clips-head > span:first-child {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 800; color: var(--muted);
}
.promo-clips-head i.bi-youtube { color: #ff0000; font-size: 14px; }
.promo-clips-nav { display: inline-flex; gap: 4px; }
.promo-clips-nav button {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff;
    color: var(--muted); font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .14s;
}
.promo-clips-nav button:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-soft); }

.promo-clips-view { overflow: hidden; }
.promo-clips-track {
    display: flex;
    transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
.promo-clip {
    flex: 0 0 50%;
    display: block; padding-right: 10px;
    text-decoration: none;
}
.promo-clip-pic {
    position: relative; display: block;
    aspect-ratio: 16 / 9;
    border-radius: 11px; overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--line);
}
.promo-clip-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.promo-clip:hover .promo-clip-pic img { transform: scale(1.06); }
.promo-clip-pic i {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(16,20,22,.62); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: background .16s;
}
.promo-clip:hover .promo-clip-pic i { background: #ff0000; }
.promo-clip b {
    display: block; margin-top: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.promo-clip:hover b { color: var(--brand-deep); }

@media (max-width: 992px) { .promo-split { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 576px) { .promo-clip { flex-basis: 100%; padding-right: 0; } }

.promo-film {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;          /* 어떤 화면에서도 틀이 깨지지 않는다 */
    border-radius: 20px;
    overflow: hidden;
    background: #0f1416;
    border: 1px solid var(--line);
    box-shadow: 0 14px 36px rgba(23,24,26,.14);
    line-height: 0;
}
.promo-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-sound {
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 15px;
    border: 1px solid rgba(255,255,255,.32); border-radius: 100px;
    background: rgba(16,20,22,.55);
    backdrop-filter: blur(6px);
    color: #fff; font-size: 12.5px; font-weight: 800;
    transition: background .15s, border-color .15s;
}
.promo-sound:hover { background: rgba(16,20,22,.78); border-color: rgba(255,255,255,.5); }
.promo-sound.on { background: var(--brand); border-color: var(--brand); }
.promo-tag {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 100px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
    font-size: 11.5px; font-weight: 900; color: var(--ink);
    letter-spacing: .04em; line-height: 1;
}
.promo-tag i { color: var(--brand-deep); font-size: 13px; }
/* 회사소개 소개 영역 안에서 쓸 때 */
.ab-intro-vis .promo-film { box-shadow: 0 14px 36px rgba(23,24,26,.14); }
@media (max-width: 576px) {
    .promo-film { border-radius: 16px; }
    .promo-sound { right: 10px; bottom: 10px; height: 34px; padding: 0 12px; font-size: 11.5px; }
    .promo-tag { left: 10px; top: 10px; padding: 6px 11px; font-size: 10.5px; }
}

/* ---------- 후기 ---------- */
.review-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 26px 22px;
    height: 100%;
    display: flex; flex-direction: column;
    transition: transform .18s, box-shadow .18s;
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.review-card .stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.review-card .txt {
    font-size: 14.5px; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 18px; flex: 1;
}
.review-card .who {
    display: flex; align-items: center; gap: 12px;
    border-top: 1px solid var(--line-soft); padding-top: 15px;
}
.review-card .who .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--gold-soft); color: var(--gold-deep);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 15px;
}
.review-card .who .nm { font-weight: 800; font-size: 14px; }
.review-card .who .car { font-size: 12px; color: var(--muted); }
.review-card .badge-best {
    font-size: 10.5px; font-weight: 800; background: var(--gold); color: #fff;
    padding: 2.5px 8px; border-radius: 6px; margin-left: auto;
}

/* ---------- 후기 무한 흐름 (마퀴) ---------- */
.review-marquee {
    position: relative;
    overflow: hidden;
    padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rm-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: rmScroll 68s linear infinite;
}
.review-marquee:hover .rm-track { animation-play-state: paused; }
@keyframes rmScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .rm-track { animation: none; }
    .review-marquee { overflow-x: auto; }
}
.rm-card {
    flex: 0 0 356px;
    width: 356px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .18s, border-color .18s;
}
.rm-card:hover { box-shadow: var(--shadow-lg); border-color: var(--gold-line); }
.rm-pic { aspect-ratio: 16/9; background: var(--bg-warm); overflow: hidden; }
.rm-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.rm-body .stars { display: flex; align-items: center; gap: 2px; color: var(--gold); font-size: 13px; margin-bottom: 10px; }
.rm-body .stars .badge-best { margin-left: auto; }
.rm-txt {
    font-size: 14px; color: var(--ink-soft); line-height: 1.62;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 16px;
    flex: 1;
}
.rm-who { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 13px; }
.rm-who .avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--gold-soft); color: var(--gold-deep);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px;
}
.rm-who strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rm-who small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
@media (max-width: 576px) {
    .rm-card { flex-basis: 280px; width: 280px; }
    .rm-track { animation-duration: 52s; }
}

/* ---------- 매거진/뉴스 ---------- */
.mag-card { display: block; }
.mag-card .pic { aspect-ratio: 16/10; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-warm); margin-bottom: 14px; border: 1px solid var(--line-soft); }
.mag-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mag-card:hover .pic img { transform: scale(1.04); }
.mag-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.mag-card p { font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.news-list { border-top: 2px solid var(--ink); }
.news-list a {
    display: flex; align-items: center; gap: 16px;
    padding: 15px 6px;
    border-bottom: 1px solid var(--line);
    transition: background .14s;
}
.news-list a:hover { background: var(--bg-soft); }
.news-list .press { font-size: 12px; font-weight: 800; color: var(--gold-deep); flex-shrink: 0; width: 74px; }
.news-list .ttl { font-weight: 700; font-size: 14.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-list .dt { font-size: 12.5px; color: var(--muted-soft); flex-shrink: 0; }

/* ---------- FAQ ---------- */
.faq-acc .item { border-bottom: 1px solid var(--line); }
.faq-acc .q {
    width: 100%; text-align: left; background: none; border: 0;
    display: flex; align-items: center; gap: 16px;
    padding: 21px 6px;
    font-size: 16px; font-weight: 700; color: var(--ink);
}
.faq-acc .q .qmark {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    background: var(--gold-soft); color: var(--gold-deep);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px;
}
.faq-acc .q i.arrow { margin-left: auto; color: var(--muted-soft); transition: transform .2s; }
.faq-acc .item.open .q i.arrow { transform: rotate(180deg); color: var(--gold-deep); }
.faq-acc .a {
    display: none;
    padding: 2px 6px 24px 52px;
    color: var(--ink-soft); font-size: 14.5px;
    white-space: pre-line;
}
.faq-acc .item.open .a { display: block; }

/* ---------- 파트너 로고 그리드 ---------- */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.partner-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 10px 13px;
    text-align: center;
    transition: border-color .16s, box-shadow .16s;
}
.partner-card:hover { border-color: var(--gold-line); box-shadow: var(--shadow); }
.partner-card .plogo {
    height: 30px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 9px;
}
.partner-card .plogo img { max-height: 26px; max-width: 118px; object-fit: contain; }
.partner-card .plogo .ptext { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }
.partner-card .pname { font-size: 11.5px; color: var(--muted); font-weight: 700; }
@media (max-width: 992px) { .partner-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 576px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } .partner-card .plogo img { max-width: 86px; } }

/* ---------- 통계 밴드 ---------- */
.stats-band {
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    isolation: isolate;
    overflow: hidden;
}
/* 옅은 격자 무늬 — 흰 바탕이 비어 보이지 않을 만큼만 */
.stats-band::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, rgba(23,24,26,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23,24,26,.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(120% 90% at 50% 45%, #000 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 55%, transparent 100%);
}
/* 브랜드색이 은은하게 번지게 */
.stats-band::after {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background:
        radial-gradient(46% 130% at 14% 50%, rgba(90,205,207,.13), transparent 62%),
        radial-gradient(42% 120% at 86% 50%, rgba(224,172,61,.10), transparent 64%);
}
@media (max-width: 768px) {
    .stats-band::before { background-size: 30px 30px; }
}
/*
 | 칸 수가 늘 4개는 아니다. 관리자에서 항목을 켜고 끄면 3개도 5개도 된다.
 | 4로 박아 두면 5개일 때 한 개가 다음 줄로 떨어져 허전해 보인다.
 | 실제 개수를 --n 으로 받아 그만큼 나눈다. (없으면 4로 본다)
 */
.stats-band .in { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); }
.stats-band .cell { text-align: center; padding: 44px 10px; border-left: 1px solid var(--line-soft); }
.stats-band .cell:first-child { border-left: 0; }
.stats-band .cell .v { font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -0.03em; }
.stats-band .cell .v em { font-style: normal; color: var(--gold); }
.stats-band .cell .l { font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
@media (max-width: 900px) {
    .stats-band .in { grid-template-columns: repeat(2, 1fr); }
    .stats-band .cell { padding: 30px 8px; }
    .stats-band .cell:nth-child(odd) { border-left: 0; }
}

/* ---------- CTA 밴드 ---------- */
.cta-band {
    position: relative;
    background: linear-gradient(120deg, #1c1d20, #2a2b30);
    color: #fff;
    border-radius: 22px;
    padding: 58px 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
    overflow: hidden;
    isolation: isolate;
}
.cta-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.cta-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(20,21,24,.92) 20%, rgba(20,21,24,.72) 52%, rgba(20,21,24,.55));
}
.cta-inner { position: relative; z-index: 2; }
.cta-actions { position: relative; z-index: 2; display: flex; gap: 12px; flex-shrink: 0; }
/* cta-band 직계 자식은 모두 영상 위로 */
.cta-band > *:not(.cta-video):not(.cta-scrim) { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 8px; }
.cta-band p { color: rgba(255,255,255,.78); margin: 0; font-size: 15px; }

/* ---------- 신뢰 패널 (뉴스 하단) ---------- */
.trust-panel {
    background: linear-gradient(160deg, var(--gold-soft), #fff 65%);
    border: 1px solid var(--gold-line);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.trust-award { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--gold-line); }
.trust-award-ic {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    background: var(--gold); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 21px;
    box-shadow: 0 4px 12px rgba(42,154,159,.35);
}
.trust-award strong { display: block; font-size: 15.5px; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }
.trust-award small { font-size: 12.5px; color: var(--gold-deep); font-weight: 700; }
/* 관리자에서 항목을 끄면 개수가 줄어드니 칸 수를 박지 않는다 */
.trust-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; padding: 15px 0; border-bottom: 1px solid var(--gold-line); }
.trust-stats > div { text-align: center; }
/* 숫자 칸만 — 자손으로 두면 슬롯머신 릴 조각까지 잡는다 */
.trust-stats > div > span { display: block; font-size: 19px; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; line-height: 1.2; }
.trust-stats small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 15px 0 4px; }
.trust-badges span {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff; border: 1px solid var(--line);
    border-radius: 100px; padding: 5px 11px;
    font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
}
.trust-badges i { color: var(--gold-deep); font-size: 12px; }
.trust-more {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px;
    font-size: 13px; font-weight: 800; color: var(--gold-deep);
}
.trust-more:hover { color: var(--gold); }

/* ---------- 오시는 길 ---------- */
.way-sec { margin-top: 8px; }
.way-grid {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
    border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
    background: #fff; box-shadow: var(--shadow);
}
.way-map { position: relative; min-height: 380px; background: var(--bg-soft); }
.way-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.way-map-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--muted); font-size: 14px; font-weight: 600;
}
.way-info { padding: 32px 34px; }
.way-info h3 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 12px; }
.way-info h3 i { color: var(--brand-deep); margin-right: 6px; }
.way-addr { font-size: 15px; color: var(--ink); font-weight: 700; margin-bottom: 4px; line-height: 1.6; }
.way-addr-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 0; }

.way-list { list-style: none; margin: 20px 0 0; padding: 0; }
.way-list li {
    display: grid; grid-template-columns: 22px 46px 1fr; align-items: start;
    gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-soft);
    font-size: 13.5px; line-height: 1.65;
}
.way-list li i { color: var(--brand-deep); font-size: 15px; margin-top: 1px; }
.way-list li b { color: var(--muted); font-weight: 700; }
.way-list li span { color: var(--ink-soft); }

.way-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.way-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--line); border-radius: 100px; background: #fff;
    padding: 8px 15px; font-size: 12.5px; font-weight: 800; color: var(--ink);
    transition: all .14s;
}
.way-btn:hover { border-color: var(--brand); color: var(--brand-deep); box-shadow: 0 6px 16px rgba(var(--brand-rgb), .14); }

.way-call {
    margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.way-call > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--brand-deep); }
.way-call .footer-tel { display: block; font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; margin: 2px 0; }
.way-call small { font-size: 12.5px; color: var(--muted); }

@media (max-width: 992px) {
    .way-grid { grid-template-columns: 1fr; }
    .way-map { min-height: 280px; }
    .way-info { padding: 26px 22px; }
}

/* ---------- 푸터 ---------- */
/* ---------- 푸터 ----------
   본문이 전부 밝은 톤이라 마지막을 짙게 닫아 준다.
   (밝은 푸터에서는 보조 링크의 흰 글씨 칩이 그대로 묻혀 버렸다) */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, #1a1d21 0%, #131619 60%, #0f1214 100%);
    color: rgba(255,255,255,.78);
    padding: 62px 0 30px;
    overflow: hidden;
    isolation: isolate;
}
.ft-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 90% at 12% 0%, rgba(var(--brand-rgb), .16), transparent 62%),
        radial-gradient(40% 70% at 92% 8%, rgba(var(--brand-rgb), .08), transparent 60%);
}
.ft-in { position: relative; z-index: 1; }

.site-footer .cols {
    display: grid; grid-template-columns: 1.6fr 1fr 1.05fr 1fr;
    gap: 40px; margin-bottom: 42px;
}
.site-footer h4 {
    font-size: 13px; font-weight: 800; margin-bottom: 16px;
    color: #fff; letter-spacing: -.01em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; }
.site-footer ul a { font-size: 13.5px; color: rgba(255,255,255,.78); transition: color .14s; }
.site-footer ul a:hover { color: #fff; }

/* 어두운 footer 위에서 로고 글자가 뭉개지지 않게 흰 판을 깐다 (위쪽 정의와 중복되던 것을 여기로 합침) */
.footer-logo-img {
    height: 52px; width: auto; display: block;
    background: rgba(255,255,255,.94);
    border-radius: 14px;
    padding: 7px 14px;
    box-sizing: content-box;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
@media (max-width: 576px) { .footer-logo-img { height: 42px; padding: 6px 11px; } }
.ft-slogan { font-size: 13.5px; color: rgba(255,255,255,.72); max-width: 320px; line-height: 1.8; }

/* 고객센터 블록 */
.ft-call {
    margin-top: 20px; padding: 18px 20px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    max-width: 330px;
}
.ft-call-lab {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800; color: var(--brand-light); letter-spacing: .02em;
}
.site-footer .footer-tel {
    display: block; margin: 4px 0 2px;
    font-size: 29px; font-weight: 900; letter-spacing: -0.02em; color: #fff;
}
.site-footer .footer-tel:hover { color: var(--brand-light); }
.ft-call small { font-size: 12px; color: rgba(255,255,255,.66); }
.ft-call-btns { display: flex; gap: 7px; margin-top: 14px; }
.ft-kakao, .ft-quote {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 36px; border-radius: 10px;
    font-size: 12.5px; font-weight: 800;
    transition: all .14s;
}
.ft-kakao { background: #fee500; color: #191600; }
.ft-kakao:hover { background: #ffe94d; color: #191600; transform: translateY(-1px); }
.ft-quote {
    background: linear-gradient(180deg, var(--brand-light), var(--brand) 55%, var(--brand-deep));
    color: #fff;
    box-shadow: 0 5px 14px rgba(var(--brand-rgb), .34);
}
.ft-quote:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); }

/* 렌트 갈래 보조 링크 */
.site-footer .ft-sub { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; }
.site-footer .ft-sub a {
    font-size: 11.5px; font-weight: 700;
    padding: 1px 9px; border-radius: 100px;
    border: 1px solid rgba(255,255,255,.28);
    color: rgba(255,255,255,.8);
    line-height: 1.7;
    transition: all .14s;
}
.site-footer .ft-sub a:hover { color: #fff; border-color: var(--brand-light); background: rgba(var(--brand-rgb), .2); }

/* 인증 마크 */
.ft-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-mark {
    width: 62px; height: 62px; padding: 7px;
    background: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .14s, box-shadow .14s;
}
.ft-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ft-mark:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.4); }

.ft-mark-modal {
    position: fixed; inset: 0; z-index: 1090;
    background: rgba(15,18,20,.72); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ft-mark-box {
    position: relative; width: min(420px, 100%);
    background: #fff; border-radius: 20px; padding: 34px 28px 26px;
    text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.ft-mark-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: var(--bg-soft); color: var(--ink);
}
.ft-mark-close:hover { background: var(--line); }
.ft-mark-box > img { width: 96px; height: 96px; object-fit: contain; margin-bottom: 14px; }
.ft-mark-box strong { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.ft-mark-box dl {
    display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
    text-align: left; font-size: 13px; margin: 0 0 14px;
}
.ft-mark-box dt { color: var(--muted); font-weight: 700; white-space: nowrap; }
.ft-mark-box dd { margin: 0; color: var(--ink-soft); }
.ft-mark-box dd a { color: var(--brand-deep); font-weight: 700; }
.ft-mark-box p { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin: 0; text-align: left; }

/* 하단 법적 표기 */
.site-footer .biz {
    font-size: 12.5px; color: rgba(255,255,255,.66); line-height: 1.95;
    border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px;
}
.site-footer .biz .legal-links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.site-footer .biz .legal-links a { font-weight: 700; color: rgba(255,255,255,.9); font-size: 13px; }
.site-footer .biz .legal-links a:hover { color: #fff; }
.site-footer .biz .legal-links a.em { color: var(--brand-light); }
.ft-legal { max-width: 900px; }
.ft-copy {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: 11.5px; color: rgba(255,255,255,.5); letter-spacing: .04em;
}

@media (max-width: 992px) {
    .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
    .ft-brand { grid-column: 1 / -1; }
    .ft-call { max-width: none; }
}
@media (max-width: 576px) {
    .site-footer { padding: 44px 0 24px; }
    /* 링크 묶음을 2열로 — 한 줄씩 세로로 쌓으면 스크롤만 길어지고 비어 보인다 */
    .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
    .site-footer .footer-tel { font-size: 25px; }
    .site-footer h4 { font-size: 12.5px; margin-bottom: 12px; }
    .site-footer ul li { margin-bottom: 8px; }
    .site-footer ul a { font-size: 12.5px; }
    .site-footer .ft-sub { margin-left: 5px; }
    .site-footer .ft-sub a { font-size: 10.5px; padding: 1px 7px; }
    .ft-marks { gap: 6px; }
    .ft-mark { width: 52px; height: 52px; }
    .site-footer .biz .legal-links { gap: 12px; }
    .site-footer .biz .legal-links a { font-size: 12px; }
}

/* ---------- 플로팅 ---------- */
.floating-consult {
    position: fixed; right: 5px; bottom: 190px; z-index: 1040;
    display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
/* 챗봇 뱃지(84px)와 균형을 맞춘 원형 버튼 */
.fab {
    position: relative;
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: 26px;
    box-shadow: 0 10px 26px rgba(23,24,26,.18);
    border: 0;
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(23,24,26,.24); }

/*
 | 카톡·전화 버튼은 올려놓으면 동전처럼 통째로 한 바퀴 돈다.
 | 그림자를 버튼에 직접 걸면 같이 돌아 지저분해지므로,
 | 그림자는 뒤에 깔린 ::before 가 대신 지고 버튼 몸통만 회전시킨다.
 */
.fab.kakao, .fab.tel-fab {
    transform-style: preserve-3d;
    backface-visibility: visible;
    will-change: transform;
}
/*
 | 회전을 :hover 로 걸면 안 된다.
 | 도는 동안 scale(.92) 로 버튼이 줄면서 커서가 테두리 밖으로 밀려나
 | :hover 가 풀리고 → 애니메이션이 지워지고 → 원래 크기로 돌아와
 | 다시 커서 안에 들어오고 → :hover 가 걸리고… 를 끝없이 반복한다.
 | 그래서 미친 듯이 계속 돌았다. 들어올 때 한 번만 .coin 을 붙여 준다. (site.js)
 */
.fab.kakao.coin, .fab.tel-fab.coin {
    animation: fabCoin .85s ease-in-out;
}
.fab.kakao:hover, .fab.tel-fab:hover {
    transform: translateY(-2px);
}
/*
 | scale 로 줄였다 키우면 도는 동안 버튼이 작아져 커서가 테두리 밖으로 밀려난다.
 | 그러면 hover 가 풀렸다 걸렸다 하면서 회전이 겹쳐 보인다.
 | 크기는 건드리지 않고 살짝 떠오르며 한 바퀴만 돌게 둔다.
 */
/*
 | 딱 한 바퀴. 처음과 끝의 자세가 같아야 멈춘 자리가 어색하지 않다.
 |
 | 예전에는 원반이 한 바퀴 도는 동안 안쪽 글자를 따로 0->180->180->0 으로 되뒤집었다.
 | 원반은 한 번 도는데 글자는 앞뒤로 두 번 더 뒤집히니 여러 번 도는 것처럼 어지러웠다.
 | 글자는 원반에 붙어 함께 돈다 — 실제 동전도 그렇다.
 */
@keyframes fabCoin {
    from { transform: perspective(560px) translateY(-2px) rotateY(0deg); }
    to   { transform: perspective(560px) translateY(-2px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .fab.kakao.coin, .fab.tel-fab.coin { animation: none; transform: translateY(-2px); }
}

/* 전화 버튼 왼쪽에 뜨는 번호 */
.fab-tel-pop {
    position: absolute; right: calc(100% + 12px); top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #fff; color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px 15px 9px;
    box-shadow: 0 12px 30px rgba(16,24,26,.16);
    white-space: nowrap; text-align: right;
    opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .22s cubic-bezier(.22,.9,.3,1);
}
.fab-tel-pop small {
    display: block;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    color: var(--muted); line-height: 1;
}
.fab-tel-pop b {
    display: block; margin-top: 3px;
    font-size: 21px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
    color: var(--ink);
}
.fab-tel-pop::after {
    content: ''; position: absolute; top: 50%; right: -6px;
    width: 11px; height: 11px; background: #fff;
    border-right: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
}
.fab.tel-fab:hover .fab-tel-pop,
.fab.tel-fab:focus-visible .fab-tel-pop {
    opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 992px) { .fab-tel-pop { display: none; } }
.fab .fab-txt { font-size: 10.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.fab.kakao {
    position: relative; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 46%),
        linear-gradient(200deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(160deg, #fff27a 0%, #fee500 44%, #e5ce00 78%, #fff08a 100%);
    color: #191919;
    box-shadow:
        0 10px 26px rgba(220,200,0,.34),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -3px 8px rgba(120,105,0,.22);
}
/* 표면을 훑고 지나가는 광택 */
.fab.kakao::after {
    content: ''; position: absolute;
    top: -60%; left: -130%; width: 62%; height: 220%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.85) 50%, rgba(255,255,255,0));
    transform: rotate(18deg);
    animation: scScan 4.2s ease-in-out infinite;
    animation-delay: 1.1s;
    pointer-events: none;
}
.fab.kakao i, .fab.kakao .fab-txt { position: relative; z-index: 1; }
.fab.tel-fab {
    position: relative; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 46%),
        linear-gradient(200deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(160deg, var(--brand-light) 0%, var(--brand) 46%, var(--brand-deep) 78%, var(--brand-light) 100%);
    color: #fff;
    box-shadow:
        0 10px 26px rgba(var(--brand-rgb), .36),
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -3px 8px rgba(0,0,0,.22);
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/* 표면을 훑고 지나가는 크롬 하이라이트 */
.fab.tel-fab::after {
    content: ''; position: absolute;
    top: -60%; left: -130%; width: 62%; height: 220%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.72) 50%, rgba(255,255,255,0));
    transform: rotate(18deg);
    animation: scScan 4.2s ease-in-out infinite;
    pointer-events: none;
}
/* QR — 실버 메탈 크롬 (카톡=골드, 전화=틸과 구분되는 세 번째 재질) */
.fab.qr-fab {
    position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,.7);
    /* 금속 특유의 밝고 어두운 띠가 교차하는 원뿔형 그라데이션 */
    background:
        conic-gradient(from 210deg at 50% 50%,
            #ffffff 0deg,  #c9cfd6 26deg, #8f979f 52deg, #e9edf1 84deg,
            #ffffff 112deg, #aab2ba 148deg, #767d85 176deg, #dfe4e9 208deg,
            #ffffff 236deg, #b7bfc7 268deg, #858d95 300deg, #eef1f4 332deg,
            #ffffff 360deg);
    color: #2b3138;
    box-shadow:
        0 10px 26px rgba(23,24,26,.26),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -3px 7px rgba(80,88,96,.42);
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
/* 위에서 내려오는 반사광 — 금속 느낌을 만드는 핵심 */
.fab.qr-fab::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background:
        linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 30%,
                                rgba(255,255,255,0) 46%, rgba(60,68,76,.20) 72%, rgba(60,68,76,.34) 100%);
    pointer-events: none;
}
.fab.qr-fab i { color: #1f252b; }
.fab.qr-fab .fab-txt { color: #2b3138; font-weight: 900; }
.fab.qr-fab i, .fab.qr-fab .fab-txt { position: relative; z-index: 2; }
/* 표면을 훑고 지나가는 하이라이트 */
.fab.qr-fab::after {
    content: ''; position: absolute; z-index: 1;
    top: -60%; left: -130%; width: 58%; height: 220%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.95) 50%, rgba(255,255,255,0));
    transform: rotate(18deg);
    animation: scScan 4.2s ease-in-out infinite;
    animation-delay: 2.2s;
    pointer-events: none;
}
.fab.qr-fab:hover { filter: brightness(1.06) contrast(1.04); }

/* QR 상담 — hover 시 QR 카드 노출 */
.fab-qr { position: relative; }
.fab-qr-pop {
    position: absolute; right: calc(100% + 10px); top: 50%;
    transform: translate(10px, -50%);
    width: 196px; padding: 14px 14px 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(23,24,26,.22);
    text-align: center;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1);
}
.fab-qr:hover .fab-qr-pop, .fab-qr:focus-within .fab-qr-pop {
    opacity: 1; pointer-events: auto; transform: translate(0, -50%);
}
.fab-qr-pop::after {
    content: ''; position: absolute; right: -7px; top: 50%; margin-top: -7px;
    width: 13px; height: 13px; background: #fff;
    border-right: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: rotate(45deg);
}
.fab-qr-pop strong { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 9px; }
.fab-qr-pop img { width: 100%; height: auto; display: block; border-radius: 8px; }
.fab-qr-pop span {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 9px;
}
.fab-qr-pop em { font-style: normal; display: block; font-size: 11.5px; font-weight: 800; color: var(--brand-deep); margin-top: 3px; }
.fab.top-fab {
    position: fixed; right: 16px; bottom: 26px; z-index: 1039;
    width: 46px; height: 46px; font-size: 17px;
    background: rgba(255,255,255,.55);
    color: var(--ink-soft);
    border: 1px solid rgba(23,24,26,.1);
    box-shadow: none;
    backdrop-filter: blur(4px);
    opacity: .55;
    transition: opacity .16s, background .16s;
}
.fab.top-fab:hover { opacity: 1; background: #fff; }
@media (max-width: 576px) {
    .floating-consult { right: 5px; bottom: 156px; gap: 9px; }
    .fab { width: 58px; height: 58px; font-size: 22px; }
    .fab .fab-txt { display: none; }
    .fab-qr { display: none; }
    .fab.top-fab { right: 18px; bottom: 16px; width: 40px; height: 40px; font-size: 15px; }
}

/* 사이드 상담 패널 */
.side-consult {
    position: fixed; right: 0; top: 50%;
    transform: translate(calc(100% + 20px), -50%);
    z-index: 1044;
    width: 300px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px 0 0 16px;
    box-shadow: -12px 0 40px rgba(23,24,26,.18);
    overflow: hidden;
    opacity: 0;
    transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.side-consult.open { transform: translate(0, -50%); opacity: 1; }
.side-consult .head {
    position: relative; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
        linear-gradient(125deg, var(--brand-light), var(--brand) 55%, var(--brand-deep));
    color: #fff;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 11px;
}
/* 배지 뒤에 흰 원을 깔면 마스코트 둘레에 흰 테두리처럼 보인다 — 배경 없이 그대로 얹는다 */
.side-consult .head-badge {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: none; padding: 0;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.22));
    display: flex; align-items: center; justify-content: center;
}
.side-consult .head-badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.side-consult .head-txt { flex: 1; min-width: 0; }
.side-consult .head strong { font-size: 15px; display: block; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0,0,0,.14); }
.side-consult .head small {
    display: inline-flex; align-items: center; gap: 5px;
    color: #fff; font-size: 11px; font-weight: 700; margin-top: 3px;
    background: rgba(255,255,255,.22);
    border-radius: 100px; padding: 2px 8px;
}
.side-consult .head small::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #eaff7a; box-shadow: 0 0 0 0 rgba(234,255,122,.7);
    animation: liveDot 1.8s ease-out infinite;
}
@keyframes liveDot {
    0% { box-shadow: 0 0 0 0 rgba(234,255,122,.7); }
    70% { box-shadow: 0 0 0 7px rgba(234,255,122,0); }
    100% { box-shadow: 0 0 0 0 rgba(234,255,122,0); }
}
.side-consult .head button {
    background: rgba(255,255,255,.24); border: 0; color: #fff;
    width: 28px; height: 28px; border-radius: 9px; font-size: 13px;
    flex-shrink: 0; transition: background .14s;
}
.side-consult .head button:hover { background: rgba(255,255,255,.42); }
/* 폼 상단 혜택 안내 */
.side-consult .perk {
    display: flex; align-items: center; gap: 7px;
    background: var(--cream-soft); border: 1px solid var(--cream);
    border-radius: 10px; padding: 9px 11px; margin-bottom: 12px;
    font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.side-consult .perk i { color: var(--brand-deep); font-size: 14px; }
.side-consult .bd { padding: 16px 18px 18px; }
.side-consult .form-control, .side-consult .form-select {
    font-size: 13.5px; padding: .55rem .75rem; margin-bottom: 8px;
    border-color: var(--line);
}
.side-consult .agree { font-size: 11.5px; color: var(--muted); margin: 4px 0 10px; }
.side-consult .agree a { text-decoration: underline; }
.side-consult .btn { width: 100%; font-size: 14px; }

/* 우측 탭 버튼 */
/* 빠른상담 — 브랜드 마스코트 사이드 탭 (원본 비율 0.358:1 유지) */
.side-consult-mini {
    position: fixed; right: 0; top: 36%;
    transform: translate(120%, -50%);
    z-index: 1038;
    border: 0; padding: 0; background: none; line-height: 0;
    filter: drop-shadow(-8px 6px 18px rgba(23,24,26,.22));
    transition: transform .3s cubic-bezier(.22,.61,.36,1), filter .18s;
}
.side-consult-mini img {
    display: block; width: 78px; height: auto;
    pointer-events: none;
}
.side-consult-mini.ready { transform: translate(0, -50%); }
.side-consult-mini.hidden { transform: translate(120%, -50%); }
.side-consult-mini.ready:hover { filter: drop-shadow(-10px 8px 22px rgba(23,24,26,.28)); }
/* hover 시 살짝 흔들리는 마스코트 (위치는 그대로 유지) */
.side-consult-mini img { transform-origin: 78% 100%; }
.side-consult-mini.ready:hover img { animation: sideWiggle 1s ease-in-out infinite; }
@keyframes sideWiggle {
    0%, 100% { transform: rotate(0deg); }
    22% { transform: rotate(-2.4deg); }
    60% { transform: rotate(2.4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .side-consult-mini.ready:hover img { animation: none; }
}
@media (max-width: 992px) {
    .side-consult, .side-consult-mini { display: none !important; }
}

/* ---------- 제휴문의 모달 ---------- */
.topbar-link { border: 0; background: none; padding: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; transition: color .14s; }
.topbar-link:hover { color: var(--ink); }

.pt-modal {
    position: fixed; inset: 0; z-index: 1070;
    background: rgba(23,24,26,.5);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.pt-modal.open { opacity: 1; pointer-events: auto; }
.pt-dialog {
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 20px;
    overflow: hidden auto;
    box-shadow: 0 30px 90px rgba(23,24,26,.4);
    transform: translateY(18px) scale(.98);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.pt-modal.open .pt-dialog { transform: none; }
.pt-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    background: linear-gradient(120deg, #1d1e22, #2a2b30);
    color: #fff;
    padding: 26px 28px;
}
.pt-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--gold); }
.pt-head h2 { font-size: 23px; font-weight: 900; letter-spacing: -0.03em; margin: 6px 0 4px; color: #fff; }
.pt-head p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.72); }
.pt-close { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 36px; height: 36px; border-radius: 10px; font-size: 15px; flex-shrink: 0; }
.pt-close:hover { background: rgba(255,255,255,.28); }
.pt-body { padding: 22px 28px 26px; }
.pt-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.pt-benefits > div {
    display: flex; align-items: center; gap: 8px;
    background: var(--gold-soft); border: 1px solid var(--gold-line);
    border-radius: 10px; padding: 11px 13px;
    font-size: 12.5px; color: var(--ink-soft); font-weight: 600;
}
.pt-benefits i { color: var(--gold-deep); font-size: 15px; flex-shrink: 0; }
.pt-benefits img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.pt-benefits strong { color: var(--ink); font-weight: 900; }
.pt-form .form-label { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.pt-agree { margin: 16px 0 18px; font-size: 12.5px; color: var(--muted); }
.pt-agree a { text-decoration: underline; }
.pt-note { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted-soft); }
@media (max-width: 576px) {
    .pt-benefits { grid-template-columns: 1fr; }
    .pt-head { padding: 20px 20px; }
    .pt-body { padding: 18px 20px 22px; }
}

/* ---------- AI 챗봇 위젯 ---------- */
.sc-chat-toggle {
    position: fixed; right: 5px; bottom: 96px; z-index: 1045;
    display: block;
    width: 76px; height: 76px; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    transition: transform .22s ease, opacity .2s;
}
.sc-chat-toggle:hover { transform: translateY(-3px) scale(1.04); }
.sc-chat-toggle.hidden { opacity: 0; pointer-events: none; transform: scale(.8); }

/* 마스코트 배지 — 원형 + 크롬 스캔 광택 */
.sc-mascot {
    position: relative; display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 10px 26px rgba(var(--brand-rgb), .30);
}
.sc-mascot img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .6s ease, transform .6s ease;
}
.sc-mascot img.on { opacity: 1; transform: scale(1); }

/* 스캔 하이라이트 — 표면을 훑고 지나가는 빛 */
.sc-mascot::after {
    content: '';
    position: absolute; top: -60%; left: -120%;
    width: 60%; height: 220%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg);
    animation: scScan 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes scScan {
    0%   { left: -120%; opacity: 0; }
    12%  { opacity: .9; }
    55%  { left: 130%; opacity: 0; }
    100% { left: 130%; opacity: 0; }
}

/* 배지 주변으로 퍼지는 파동 */
.sc-chat-toggle::before,
.sc-chat-toggle::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--brand-light);
    opacity: 0;
    pointer-events: none;
    animation: scRipple 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.sc-chat-toggle::after { animation-delay: 1.4s; }
@keyframes scRipple {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.42); opacity: 0; }
    100% { transform: scale(1.42); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-chat-toggle::before, .sc-chat-toggle::after, .sc-mascot::after { animation: none; }
    .sc-mascot img { transition: none; }
}
@media (max-width: 576px) {
    .sc-chat-toggle { right: 5px; bottom: 78px; width: 70px; height: 70px; }
}

.sc-chat-panel {
    position: fixed; right: 26px; bottom: 26px; z-index: 1046;
    width: 380px; max-width: calc(100vw - 28px);
    height: 600px; max-height: calc(100vh - 52px);
    background: #fff; border-radius: 20px;
    box-shadow: 0 24px 70px rgba(23,24,26,.3);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; transform: translateY(20px) scale(.98);
    pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.sc-chat-panel.open { opacity: 1; transform: none; pointer-events: auto; }
/*
 | 모바일에서는 화면을 꽉 채운다.
 | 작은 화면에서 카드로 띄우면 대화 영역이 손바닥만 해져서 차량 목록·견적표가 다 잘린다.
 | 100dvh 를 쓰는 이유는 주소창이 접혔다 펴질 때 100vh 가 실제 화면보다 커져 입력칸이 가려지기 때문이다.
 */
@media (max-width: 768px) {
    .sc-chat-panel {
        inset: 0;
        right: 0; bottom: 0; left: 0; top: 0;
        width: 100%; max-width: none;
        height: 100dvh; max-height: none;
        border-radius: 0;
        box-shadow: none;
        z-index: 1200;                       /* 하단 앱바(mdock)보다 위 */
        transform: translateY(14px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sc-chat-panel.open { transform: none; }

    /* 상단 노치 아래로 헤더를 내려 준다 */
    .sc-chat-head { padding-top: calc(13px + env(safe-area-inset-top, 0px)); }

    /* 전체화면이면 닫기 버튼이 커야 누르기 쉽다 */
    .sc-chat-close { width: 38px; height: 38px; font-size: 17px; }

    /* 챗봇이 열려 있는 동안은 뒤쪽 화면이 같이 스크롤되지 않게 한다 */
    body.sc-chat-open { overflow: hidden; }
    body.sc-chat-open .mdock,
    body.sc-chat-open .floating-consult,
    body.sc-chat-open .kr-driver { display: none !important; }
}

/* 헤더 — 브랜드 그라데이션 + 마스코트 뱃지 */
.sc-chat-head {
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 65%),
        linear-gradient(125deg, var(--brand-light), var(--brand) 55%, var(--brand-deep));
    color: #fff; padding: 13px 14px;
    display: flex; align-items: center; gap: 11px;
    flex-shrink: 0;
}
.sc-chat-logo {
    width: 42px; height: 42px; border-radius: 50%;
    background: #fff; padding: 3px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
}
.sc-chat-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.sc-chat-head-txt { flex: 1; min-width: 0; }
.sc-chat-head strong { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0,0,0,.14); }
.sc-chat-head small {
    display: inline-flex; align-items: center; gap: 5px;
    color: #fff; font-size: 11px; font-weight: 700; margin-top: 3px;
    background: rgba(255,255,255,.22); border-radius: 100px; padding: 2px 9px;
}
.sc-chat-dot { width: 6px; height: 6px; border-radius: 50%; background: #eaff7a; animation: liveDot 1.8s ease-out infinite; }
.sc-chat-restart {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.22); border: 0; color: #fff;
    height: 30px; padding: 0 11px; border-radius: 100px;
    font-size: 11.5px; font-weight: 800; flex-shrink: 0;
    transition: background .14s;
}
.sc-chat-restart i { font-size: 12px; }
.sc-chat-restart:hover { background: rgba(255,255,255,.4); }
.sc-chat-close {
    background: rgba(255,255,255,.24); border: 0; color: #fff;
    width: 30px; height: 30px; border-radius: 9px; font-size: 16px; flex-shrink: 0;
    transition: background .14s;
}
.sc-chat-close:hover { background: rgba(255,255,255,.42); }

/* 진행 단계 */
.sc-steps {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 14px; background: #fff;
    border-bottom: 1px solid var(--line-soft); flex-shrink: 0;
}
.sc-steps span {
    flex: 1; text-align: center;
    font-size: 11px; font-weight: 800; color: var(--muted-soft);
    padding: 5px 0; border-radius: 100px;
    background: var(--bg-soft);
    transition: all .2s;
}
.sc-steps span.done { color: var(--brand-deep); background: var(--brand-soft); }
.sc-steps span.on { color: #fff; background: var(--brand); box-shadow: 0 3px 8px rgba(var(--brand-rgb), .3); }

/* 대화 영역 — 넓은 여백 + 아바타 + 시간 표기 */
.sc-chat-body {
    flex: 1; overflow-y: auto;
    padding: 16px 14px 20px;
    background: var(--cream-soft);
    display: flex; flex-direction: column; gap: 14px;
}
.sc-msg { display: flex; gap: 8px; max-width: 92%; }
.sc-msg.user { align-self: flex-end; }
.sc-msg.bot { align-self: flex-start; }
.sc-ava {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: #fff; padding: 2px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(23,24,26,.12);
}
.sc-ava img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.sc-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sc-msg.user .sc-col { align-items: flex-end; }
.sc-col > time {
    font-size: 10.5px; color: var(--muted-soft); font-weight: 600;
    margin-top: 4px; padding: 0 3px;
}
.sc-bubble {
    position: relative;
    padding: 11px 14px; border-radius: 4px 16px 16px 16px;
    font-size: 14px; line-height: 1.62; word-break: break-word;
}
.sc-msg.bot .sc-bubble { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(23,24,26,.08); }
.sc-msg.user .sc-bubble {
    background: var(--brand-light); color: #10393b;
    border-radius: 16px 4px 16px 16px; font-weight: 600;
    box-shadow: 0 1px 3px rgba(var(--brand-rgb), .22);
}
.sc-bubble b { font-weight: 800; }

/* 빠른 선택 */
.sc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-quick button {
    border: 1px solid var(--brand-line); background: #fff; color: var(--brand-deep);
    font-size: 12.5px; font-weight: 700; border-radius: 100px; padding: 7px 14px;
    transition: all .14s;
}
.sc-quick button:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-1px); }

/* 브랜드 선택 그리드 */
.sc-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; width: 100%; }
.sc-brand {
    display: flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--line); border-radius: 11px;
    padding: 8px 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft);
    transition: all .14s;
}
.sc-brand img { width: 26px; height: 17px; object-fit: contain; flex-shrink: 0; }
.sc-brand span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-brand em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted-soft); }
.sc-brand:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }

/* 차량 카드 리스트 */
.sc-cars { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; width: 100%; }
.sc-car {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: 13px;
    padding: 8px 12px 8px 8px; text-align: left;
    transition: all .14s;
}
.sc-car > img { width: 62px; height: 42px; object-fit: contain; flex-shrink: 0; }
.sc-car-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sc-car-txt b { font-size: 13.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-car-txt i { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sc-car-txt u { text-decoration: none; font-size: 12.5px; font-weight: 800; color: var(--brand-deep); }
.sc-car > .bi { color: var(--muted-soft); font-size: 13px; flex-shrink: 0; }
.sc-car:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(var(--brand-rgb), .16); transform: translateY(-1px); }

/* 견적 카드 */
.sc-quote {
    margin-top: 8px; width: 100%;
    background: #fff; border: 1px solid var(--brand-line); border-radius: 16px;
    overflow: hidden; box-shadow: 0 6px 20px rgba(var(--brand-rgb), .12);
}
.sc-quote-car { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: var(--brand-soft); }
.sc-quote-car img { width: 68px; height: 46px; object-fit: contain; flex-shrink: 0; }
.sc-quote-car b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.sc-quote-car span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sc-quote dl { margin: 0; padding: 12px 14px 4px; }
.sc-quote dl > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; }
.sc-quote dt { color: var(--muted); font-weight: 600; }
.sc-quote dd { margin: 0; color: var(--ink); font-weight: 800; }
.sc-quote-sum {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 8px 14px 0; padding: 12px 0 10px;
    border-top: 1px dashed var(--brand-line);
}
.sc-quote-sum span { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.sc-quote-sum strong { font-size: 23px; font-weight: 900; color: var(--brand-deep); letter-spacing: -0.02em; }
.sc-quote-sum em { font-style: normal; font-size: 13px; font-weight: 700; margin-left: 2px; }
.sc-quote-note { margin: 0; padding: 0 14px 12px; font-size: 11px; color: var(--muted-soft); font-weight: 600; }

/* 연락처 접수 폼 */
.sc-lead {
    margin-top: 8px; width: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 13px 14px 14px;
    box-shadow: 0 4px 16px rgba(23,24,26,.08);
}
.sc-lead-sum {
    display: flex; align-items: center; gap: 7px;
    background: var(--cream-soft); border: 1px solid var(--cream);
    border-radius: 9px; padding: 8px 10px; margin-bottom: 10px;
    font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
}
.sc-lead-sum i { color: var(--brand-deep); flex-shrink: 0; }
.sc-lead-sum span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-lead input[type=text], .sc-lead input[type=tel] {
    width: 100%; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 13px; font-size: 13.5px; margin-bottom: 7px;
}
.sc-lead input[type=text]:focus, .sc-lead input[type=tel]:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.sc-check { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; color: var(--muted); margin: 4px 0; line-height: 1.5; }
.sc-check input { margin-top: 2px; accent-color: var(--brand); flex-shrink: 0; }
.sc-check a { text-decoration: underline; color: var(--brand-deep); margin-left: 4px; }
.sc-lead-btn { width: 100%; height: 44px; margin-top: 9px; font-size: 14.5px; }

/* 입력 중 */
.sc-typing { display: flex; gap: 4px; align-items: center; }
.sc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-soft); animation: scblink 1.2s infinite; }
.sc-typing span:nth-child(2) { animation-delay: .2s; }
.sc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes scblink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.sc-chat-input { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--line); background: #fff; flex-shrink: 0; }
.sc-chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 100px; padding: 11px 16px; font-size: 14px; background: var(--bg-soft); }
.sc-chat-input input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.sc-chat-input button {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: linear-gradient(160deg, var(--brand-light), var(--brand-deep));
    color: #fff; font-size: 15px; transition: filter .14s, transform .14s;
}
.sc-chat-input button:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ---------- 모바일 하단 앱바 ---------- */
.mdock { display: none; }
@media (max-width: 768px) {
    .mdock {
        display: grid;
        grid-template-columns: 1fr 1fr 96px 1fr 1fr;
        align-items: end;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1042;
        height: 72px;
        background: #fff;
        border-radius: 24px 24px 0 0;
        box-shadow:
            0 -1px 0 rgba(23,24,26,.06),
            0 -10px 30px rgba(23,24,26,.13);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mdock-gap { display: block; }
    .mdock-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
        height: 72px;
        font-size: 12px; font-weight: 800; letter-spacing: -0.02em;
        color: var(--ink);
        transition: color .16s, transform .16s;
    }
    .mdock-item i {
        font-size: 24px; line-height: 1;
        color: var(--brand);
        transition: color .16s, transform .16s;
    }
    .mdock-item span { line-height: 1; }
    .mdock-item:hover, .mdock-item:active { color: var(--brand-deep); }
    .mdock-item:active i { transform: scale(.9); }
    .mdock-item.on i { color: var(--brand-deep); }
    .mdock-item.on { color: var(--brand-deep); }

    /* 가운데 챗봇 — 바 위로 솟은 원형 (흰 링 + 브랜드 그라데이션 테두리) */
    .mdock-center {
        /* 그리드 정렬 대신 절대배치 — 바 위로 정확히 26px 솟는다 */
        position: absolute;
        left: 50%; bottom: 14px;
        transform: translateX(-50%);
        width: 84px; height: 84px;
        border: 0; padding: 0;
        border-radius: 50%;
        background: transparent;
        z-index: 4;
        transition: transform .18s cubic-bezier(.34,1.56,.64,1);
    }
    .mdock-center:active { transform: translateX(-50%) scale(.94); }

    /* 바깥 흰 링 */
    .mdock-center::before {
        content: ''; position: absolute; inset: -5px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 -6px 18px rgba(23,24,26,.10);
        z-index: 0;
    }
    /* 브랜드 그라데이션 테두리 + 잔물결 */
    .mdock-center::after {
        content: ''; position: absolute; inset: -1px;
        border-radius: 50%;
        border: 3px solid var(--brand-light);
        opacity: .55;
        animation: mdockPulse 2.8s ease-out infinite;
        z-index: 3;
        pointer-events: none;
    }
    .mdock-center img {
        position: relative; z-index: 2;
        width: 100%; height: 100%;
        object-fit: cover;
        border-radius: 50%;
        background:
            radial-gradient(120% 120% at 50% 0%, #ffffff 0%, var(--brand-soft) 55%, var(--brand-line) 100%);
        box-shadow:
            0 8px 20px rgba(var(--brand-rgb), .32),
            inset 0 0 0 3px #fff;
    }
    @keyframes mdockPulse {
        0%   { transform: scale(1);    opacity: .55; }
        70%  { transform: scale(1.22); opacity: 0; }
        100% { transform: scale(1.22); opacity: 0; }
    }

    /* 앱바를 쓰는 화면에서는 기존 플로팅 요소를 감춘다 */
    .floating-consult, .sc-chat-toggle, .fab.top-fab, .cars-filter-fab { display: none !important; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    /* 챗봇은 위에서 전체화면으로 잡았다 — 여기서는 건드리지 않는다 */
}
@media (max-width: 360px) {
    .mdock { grid-template-columns: 1fr 1fr 86px 1fr 1fr; }
    .mdock-item { font-size: 11px; }
    .mdock-item i { font-size: 22px; }
    .mdock-center { width: 74px; height: 74px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .mdock-center::after { animation: none; }
}

/* ---------- 화면 전환 로더 ---------- */
.page-loader {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.page-loader.on { opacity: 1; pointer-events: auto; }
.page-loader .pl-box {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 26px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(23,24,26,.16);
    transform: translateY(6px) scale(.97);
    transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
.page-loader.on .pl-box { transform: none; }
.pl-ring {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--brand-line);
    border-top-color: var(--brand);
    animation: plSpin .7s linear infinite;
}
@keyframes plSpin { to { transform: rotate(360deg); } }
.pl-txt { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .pl-ring { animation-duration: 2s; } }

/* 자동완성 — 아래 공간이 부족하면 위로 */
.qb-ac-list.up { top: auto; bottom: calc(100% + 8px); }
@media (max-width: 768px) {
    /* 모바일은 화면 중앙 모달로 */
    .qb-ac-list {
        position: fixed; left: 12px; right: 12px; top: 50%; bottom: auto;
        transform: translateY(-50%);
        max-height: 66vh; z-index: 1085;
    }
    .qb-ac-list.up { top: 50%; bottom: auto; }
    .qb-ac-dim {
        position: fixed; inset: 0; z-index: 1084;
        background: rgba(23,24,26,.45);
        backdrop-filter: blur(2px);
    }
}

/* ---------- 팝업 ---------- */
.site-popup-dim {
    display: none;                     /* 기본 숨김 — JS 가 노출을 결정 (깜빡임 방지) */
    position: fixed; inset: 0; z-index: 1059;
    background: rgba(23,24,26,.55);
    backdrop-filter: blur(2px);
    animation: dimIn .3s ease;
}
.site-popup-dim.show { display: block; }
@keyframes dimIn { from { opacity: 0; } to { opacity: 1; } }
.site-popup {
    display: none;                     /* 기본 숨김 — JS 가 노출을 결정 */
    position: fixed; z-index: 1060;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 440px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(23,24,26,.4);
}
.site-popup.show { display: block; animation: popIn .34s cubic-bezier(.22,.61,.36,1); }
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.pop-slides { position: relative; }
.pop-slide { display: none; }
.pop-slide.on { display: block; animation: popFade .35s ease; }
@keyframes popFade { from { opacity: .3; } to { opacity: 1; } }
.pop-media { display: block; line-height: 0; background: var(--bg-warm); }
.pop-media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pop-caption {
    position: absolute; left: 0; top: 0;
    padding: 28px 30px;
    max-width: 78%;
}
.pop-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--gold-deep); margin-bottom: 8px; }
.pop-title { font-size: 24px; font-weight: 900; letter-spacing: -0.035em; color: var(--ink); line-height: 1.25; }
.pop-body { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: pre-line; line-height: 1.55; }
.pop-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 16px;
    background: var(--ink); color: #fff;
    font-size: 13.5px; font-weight: 800;
    border-radius: 100px; padding: 9px 18px;
    transition: background .15s;
}
.pop-link:hover { background: #000; color: #fff; }

.pop-nav {
    position: absolute; top: calc(50% - 30px); transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.9); color: var(--ink);
    box-shadow: var(--shadow); font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background .14s; z-index: 3;
}
.pop-nav:hover { background: #fff; }
.pop-nav.prev { left: 12px; }
.pop-nav.next { right: 12px; }
.pop-count {
    position: absolute; top: 16px; right: 16px; z-index: 3;
    background: rgba(23,24,26,.62); color: #fff;
    font-size: 12px; font-weight: 800;
    border-radius: 100px; padding: 4px 12px;
}
.pop-dots {
    position: absolute; left: 0; right: 0; bottom: 62px;
    display: flex; justify-content: center; gap: 6px; z-index: 3;
}
.pop-dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: all .16s; }
.pop-dots button.on { background: #fff; width: 22px; border-radius: 4px; }
.pop-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; border-top: 1px solid var(--line);
    padding: 14px 20px;
}
.pop-bar button { background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
.pop-bar button:hover { color: var(--ink); }
.pop-bar button[data-pop-close] { color: var(--ink); font-weight: 800; }
@media (max-width: 480px) {
    .site-popup { width: calc(100vw - 24px); }
    .pop-title { font-size: 21px; }
    .pop-caption { padding: 22px 22px; max-width: 82%; }
}

/* ---------- 렌트 가이드 (장기렌트 · 리스 · 비교 탭) ---------- */
.guide-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 28px;
}
/* 일러스트를 왼쪽에 두고 글은 오른쪽으로 — 최저가 검색 카드와 같은 결 */
.guide-tabs button {
    display: grid; grid-template-columns: 58px 1fr; align-items: center;
    gap: 2px 14px;
    padding: 16px 18px;
    border: 1px solid var(--line); border-radius: 16px;
    background: #fff; text-align: left;
    transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.guide-tabs button > img {
    grid-row: 1 / span 2; width: 58px; height: 58px; object-fit: contain;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.guide-tabs button:hover > img { transform: translateY(-2px) scale(1.06); }
.guide-tabs button span { grid-column: 2; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.guide-tabs button em { grid-column: 2; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); }

@media (max-width: 576px) {
    .guide-tabs { grid-template-columns: 1fr; gap: 8px; }
    .guide-tabs button { padding: 12px 14px; grid-template-columns: 46px 1fr; }
    .guide-tabs button > img { width: 46px; height: 46px; }
    .guide-tabs button span { font-size: 15px; }
}
.guide-tabs button:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--brand-rgb), .14); }
.guide-tabs button.on {
    border-color: var(--brand); background: var(--brand-soft);
    box-shadow: 0 8px 22px rgba(var(--brand-rgb), .18);
}
.guide-tabs button.on span { color: var(--brand-deep); }
.guide-tabs button.on em { color: var(--brand); }

.guide-row {
    display: flex; gap: 22px; padding: 22px 0;
    border-bottom: 1px solid var(--line);
    animation: lpIn .34s cubic-bezier(.22,.61,.36,1) both;
}
.guide-row .num {
    flex-shrink: 0; width: 52px;
    font-size: 26px; font-weight: 900; font-style: italic;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.guide-row h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.03em; }
.guide-row p { font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.8; }

.guide-table--img { position: relative; }
.guide-table-img {
    position: absolute; right: 14px; top: -34px; z-index: 2;
    width: 104px; height: 104px; object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(23,60,62,.16));
    pointer-events: none;
}
@media (max-width: 768px) { .guide-table-img { display: none; } }

.guide-table {
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    animation: lpIn .34s cubic-bezier(.22,.61,.36,1) both;
}
.guide-table table { width: 100%; border-collapse: collapse; }
.guide-table thead th {
    background: var(--ink); color: #fff;
    font-size: 14px; font-weight: 800; padding: 14px 16px; text-align: left;
}
.guide-table thead th:first-child { width: 150px; }
.guide-table tbody th {
    background: var(--bg-soft);
    font-size: 13.5px; font-weight: 800; color: var(--ink-soft);
    padding: 14px 16px; text-align: left;
    border-top: 1px solid var(--line-soft);
    white-space: nowrap;
}
.guide-table tbody td {
    font-size: 14px; color: var(--ink-soft); font-weight: 600;
    padding: 14px 16px;
    border-top: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
}
.guide-table tbody tr:hover td, .guide-table tbody tr:hover th { background: var(--brand-soft); }

@media (max-width: 768px) {
    .guide-tabs { grid-template-columns: 1fr; gap: 8px; }
    .guide-tabs button { flex-direction: row; align-items: center; gap: 10px; padding: 13px 15px; }
    .guide-tabs button > i { margin-bottom: 0; }
    .guide-tabs button em { margin-left: auto; }
    .guide-row { gap: 14px; padding: 18px 0; }
    .guide-row .num { width: 38px; font-size: 21px; }
    .guide-row h3 { font-size: 16px; }
    .guide-table thead th:first-child, .guide-table tbody th { width: auto; font-size: 12.5px; padding: 11px 10px; }
    .guide-table tbody td { font-size: 13px; padding: 11px 10px; }
}

/* ---------- 유예할부관 ---------- */
.df-compare {
    border: 1px solid var(--line); border-radius: 20px;
    background: #fff; padding: 26px 26px 22px;
    box-shadow: var(--shadow-sm);
}
.df-compare-head { margin-bottom: 18px; }
.df-compare-head strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.df-compare-head span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.df-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;   /* 아이콘 · 이름 · 금액 — 열이 흔들리지 않는다 */
    align-items: center; gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
}
.df-row:last-of-type { border-bottom: 0; }
.df-ico {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft); color: var(--muted);
    font-size: 17px;
}
.df-label { font-size: 15px; font-weight: 700; color: var(--ink-soft); letter-spacing: -0.02em; }
/*
 | 금액은 "월 / 숫자 / 만원" 세 칸으로 나눠 폭을 고정한다.
 | 그냥 흘려 두면 172 · 89 · 71 처럼 자릿수가 달라 숫자 끝이 어긋나 보인다.
 | 숫자 칸을 같은 폭으로 잡고 오른쪽에 붙이면 어느 줄이든 세로선이 맞는다.
 */
.df-amt {
    display: grid;
    grid-template-columns: 20px 78px 38px;
    align-items: baseline; gap: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.df-amt em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }
.df-amt em.pre { text-align: right; }
.df-amt em.suf { text-align: left; }
.df-amt b {
    font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--ink);
    text-align: right;
}

/* 비교 카드 머리에 얹는 그림 */
.df-compare-head { display: flex; align-items: center; gap: 12px; }
.df-compare-img {
    width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
    filter: drop-shadow(0 6px 14px rgba(16,24,26,.12));
}
@media (max-width: 576px) { .df-compare-img { width: 52px; height: 52px; } }

.df-row.best {
    background: var(--brand-soft); border-radius: 14px;
    padding: 16px 14px;
    /* 좌우 여백만큼 밖으로 빼야 금액 열이 위 줄들과 같은 세로선에 선다 */
    margin: 6px -14px 0;
}
.df-row.best .df-ico { background: var(--brand); color: #fff; box-shadow: 0 5px 14px rgba(var(--brand-rgb), .34); }
.df-row.best .df-label { color: var(--brand-deep); font-weight: 800; }
.df-row.best .df-amt b { font-size: 30px; color: var(--brand-deep); }
.df-row.best .df-amt em { color: var(--brand-deep); font-weight: 800; }

.df-save {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 12px 14px;
    border-radius: 12px;
    background: var(--cream-soft); border: 1px solid var(--cream);
    font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
}
.df-save i { color: var(--brand-deep); font-size: 16px; }
.df-save b { font-weight: 900; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.df-note { font-size: 12px; color: var(--muted-soft); margin: 10px 0 0; }

.df-choice {
    margin-top: 22px; padding: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--brand-soft), #fff 70%);
    border: 1px solid var(--brand-line);
}
.df-choice-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 800; color: var(--brand-deep);
    margin-bottom: 12px;
}
.df-choice-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; }
.df-choice-row + .df-choice-row { border-top: 1px dashed var(--brand-line); }
.df-choice-no {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
    font-size: 11.5px; font-weight: 900;
    margin-top: 1px;
}
.df-choice-txt { display: flex; flex-direction: column; gap: 1px; }
.df-choice-txt b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.df-choice-txt b i { color: var(--brand); font-size: 14px; }
.df-choice-txt small { font-size: 12.5px; color: var(--muted); font-weight: 600; }

@media (max-width: 576px) {
    .df-compare { padding: 20px 18px 18px; }
    .df-row { grid-template-columns: 32px 1fr auto; gap: 9px; }
    .df-ico { width: 32px; height: 32px; font-size: 15px; }
    .df-label { font-size: 13.5px; }
    .df-amt b { font-size: 20px; }
    .df-row.best .df-amt b { font-size: 24px; }
}

/* ---------- 회사소개 ---------- */
.ab-intro {
    display: grid; grid-template-columns: 1fr 1.05fr;
    gap: 40px; align-items: center;
    margin-bottom: 46px;
}
.ab-intro-txt .badge-line { margin-bottom: 12px; }
.ab-intro-txt h2 { font-size: clamp(23px, 2.7vw, 31px); letter-spacing: -0.04em; margin-bottom: 16px; }
.ab-intro-txt p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 12px; }
.ab-intro-vis .drive-scene { height: 372px; }

.ab-photo {
    position: relative;
    border-radius: 20px; overflow: hidden;
    border: 1px solid var(--line);
    line-height: 0;
}
.ab-photo img { width: 100%; height: 360px; object-fit: cover; display: block; }
.ab-photo-cap {
    position: absolute; left: 16px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 100px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
    font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1;
}
.ab-photo-cap i { color: var(--brand-deep); }

@media (max-width: 992px) {
    .ab-intro { grid-template-columns: 1fr; gap: 26px; margin-bottom: 34px; }
    .ab-intro-vis .drive-scene { height: 260px; }
    .ab-photo img { height: 240px; }
}

/* ---------- 렌트 요금 (장기렌트·리스) ---------- */
/* 장기렌트 · 리스 전환. 칸 수를 박지 않아야 갈래가 줄어도 빈칸이 안 생긴다 */
.rt-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 34px; }
.rt-switch button {
    position: relative; overflow: hidden;
    display: flex; align-items: center;
    min-height: 108px; padding: 18px 22px;
    border: 1px solid var(--line); border-radius: 18px;
    background: #fff; text-align: left;
    transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.rt-sw-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.rt-sw-txt > i { font-size: 20px; color: var(--brand); margin-bottom: 4px; }
.rt-sw-txt b { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.rt-sw-txt em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* 우측에 반쯤 걸쳐 잘리는 일러스트 */
.rt-sw-img {
    position: absolute; right: -14px; bottom: -18px; z-index: 0;
    width: 132px; height: 132px; object-fit: contain;
    opacity: .5;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s;
    pointer-events: none;
}
.rt-switch button:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--brand-rgb), .14); }
.rt-switch button:hover .rt-sw-img { transform: translateY(-4px) scale(1.05); opacity: .68; }
.rt-switch button.on {
    border-color: var(--brand); background: var(--brand-soft);
    box-shadow: 0 8px 22px rgba(var(--brand-rgb), .18);
}
.rt-switch button.on .rt-sw-txt b { color: var(--brand-deep); }
.rt-switch button.on .rt-sw-txt em { color: var(--brand); }
.rt-switch button.on .rt-sw-img { opacity: .85; }
@media (max-width: 992px) {
    /* 세 칸은 유지하되 그림을 줄여서 글씨가 접히지 않게 한다 */
    .rt-switch button { min-height: 84px; padding: 14px 15px; }
    .rt-sw-img { width: 86px; height: 86px; right: -12px; bottom: -12px; opacity: .4; }
    .rt-sw-txt b { font-size: 15px; }
    .rt-sw-txt em { font-size: 11.5px; }
    .rt-terms { grid-template-columns: 1fr 1fr; }
    .rt-term-img { width: 84px; height: 84px; }
}
@media (max-width: 640px) {
    /* 여기부터는 가로로 셋을 세울 수 없다 — 위아래로 쌓는다 */
    .rt-switch { grid-template-columns: 1fr; gap: 8px; }
    .rt-switch button { min-height: 72px; }
    .rt-sw-img { width: 96px; height: 96px; }
}


/*
 | 기간 카드.
 | 칸 수를 박아 두었더니 장기렌트(3개)가 4칸 격자에 들어가 오른쪽 한 칸이 비어 있었다.
 | 앞뒤로 두 번 정의돼 있어서 뒤엣것이 이기는 바람에 3칸 설정도 먹지 않았다.
 | 개수를 세지 않고 폭에 맞춰 채우게 둔다.
 */
.rt-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.rt-term {
    position: relative;
    display: flex; flex-direction: column; gap: 3px;
    padding: 22px 20px 18px;
    border: 1px solid var(--line); border-radius: 16px;
    background: #fff; text-decoration: none;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.rt-term { position: relative; overflow: hidden; }
.rt-term > span { position: relative; z-index: 1; }
.rt-term-img {
    position: absolute; right: -18px; bottom: -22px; z-index: 0;
    width: 108px; height: 108px; object-fit: contain;
    opacity: .28;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s;
    pointer-events: none;
}
.rt-term:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--brand-rgb), .16); }
.rt-term:hover .rt-term-img { transform: translateY(-5px) scale(1.06); opacity: .46; }
.rt-term.best .rt-term-img { opacity: .5; }
.rt-term.best { border-color: var(--brand); background: var(--brand-soft); }
.rt-flag {
    position: absolute; right: 14px; top: -10px;
    background: var(--brand); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: -0.02em;
    padding: 4px 10px; border-radius: 100px;
    box-shadow: 0 4px 10px rgba(var(--brand-rgb), .34);
}
.rt-term-day { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -0.04em; }
.rt-term-desc { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rt-term-off {
    margin-top: 8px; font-size: 14px; font-weight: 900;
    color: var(--brand-deep); font-variant-numeric: tabular-nums;
}

.rt-cars { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.rt-car {
    display: flex; align-items: center; gap: 13px;
    background: #fff; padding: 15px 18px; text-decoration: none;
    transition: background .14s;
}
.rt-car:hover { background: var(--brand-soft); }
.rt-car-rank { width: 22px; flex-shrink: 0; font-size: 16px; font-weight: 900; color: var(--muted-soft); font-variant-numeric: tabular-nums; }
.rt-car:hover .rt-car-rank { color: var(--brand); }
.rt-car-pic { width: 88px; height: 56px; flex-shrink: 0; }
.rt-car-pic img { width: 100%; height: 100%; object-fit: contain; }
.rt-car-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-car-info b { font-size: 15px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-car-info i { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rt-car-price { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.rt-car-price em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rt-car-price b { font-size: 20px; font-weight: 900; color: var(--brand-deep); letter-spacing: -0.03em; }

@media (max-width: 992px) {
    .rt-terms { grid-template-columns: 1fr 1fr; }
    .rt-cars { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .rt-term { padding: 16px 14px 14px; }
    .rt-term-day { font-size: 18px; }
    .rt-car { padding: 12px 14px; gap: 10px; }
    .rt-car-pic { width: 70px; height: 46px; }
    .rt-car-rank { display: none; }
    .rt-car-price b { font-size: 17px; }
}

/* ---------- 서브페이지 공통 ---------- */
.page-head {
    position: relative; isolation: isolate;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--line);
    padding: 58px 0 52px;
    overflow: hidden;
}
/* 영상 배경 헤더 — 영상이 로드되기 전에도 브랜드 톤이 보이도록 */
.page-head--video {
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(90,205,207,.28) 0%, rgba(90,205,207,0) 55%),
        linear-gradient(118deg, #17383b 0%, #1d4a4e 48%, #10282b 100%);
}
.ph-video {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    opacity: .6;                     /* 기본 노출 — JS 가 루프 경계에서만 조절 */
    pointer-events: none;
}
.ph-veil {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(100deg, rgba(9,26,28,.66) 0%, rgba(9,26,28,.40) 52%, rgba(9,26,28,.16) 100%);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ph-video { opacity: .55 !important; transition: none; }
}
.page-head .crumb { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.page-head .crumb i { font-size: 10px; margin: 0 4px; }
.page-head h1 { font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 8px; }
.page-head p { color: var(--muted); margin: 0; font-size: 15.5px; }

/* 영상 배경 헤더 위의 글자는 모두 흰색 */
.page-head--video .crumb { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.page-head--video .crumb a { color: #fff; }
.page-head--video .crumb a:hover { color: #fff; text-decoration: underline; }
.page-head--video .crumb i { color: rgba(255,255,255,.75); }
.page-head--video h1 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.42); }
.page-head--video p { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.48); }
.page-head--video .ph-extra { margin-top: 16px; }


/* ---------- 차량 목록 필터 ---------- */
.filter-shell {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.filter-row:last-child { border-bottom: 0; }
.filter-row .flabel { font-size: 13px; font-weight: 800; color: var(--muted); width: 82px; flex-shrink: 0; }
.fchip {
    border: 1px solid var(--line); background: #fff;
    border-radius: 100px; padding: 6.5px 16px;
    font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
    transition: all .14s; text-decoration: none; display: inline-block;
}
.fchip:hover { border-color: var(--ink); color: var(--ink); }
.fchip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fchip.gold-on { background: var(--gold); color: #fff; border-color: var(--gold); }
.sort-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sort-bar .count { font-size: 14.5px; font-weight: 700; }
.sort-bar .count em { font-style: normal; color: var(--gold-deep); font-weight: 900; }

/* ---------- 차량 목록: 좌측 사이드 필터 레이아웃 ---------- */
.page-head--slim { padding: 34px 0 30px; }
.cars-layout { display: grid; grid-template-columns: 244px 1fr; gap: 28px; align-items: start; }
.cars-main { min-width: 0; }

.cars-side { position: sticky; top: calc(var(--header-h, 84px) + 10px); }
.cs-inner {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden;
}
.cs-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.cs-tabs a {
    padding: 13px 0; text-align: center;
    font-size: 14px; font-weight: 800; color: var(--muted);
    border-bottom: 2px solid transparent;
    transition: color .14s, border-color .14s;
}
.cs-tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.cs-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.cs-reset { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cs-reset:hover { color: var(--ink); }
.cs-count { font-size: 13px; color: var(--muted); font-weight: 700; }
.cs-count strong { font-size: 23px; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; margin-right: 2px; }

.cs-group { border-bottom: 1px solid var(--line-soft); }
.cs-group:last-child { border-bottom: 0; }
.cs-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: 0;
    padding: 14px 16px;
    font-size: 14px; font-weight: 800; color: var(--ink); text-align: left;
}
.cs-head i { font-size: 11px; color: var(--muted-soft); transition: transform .2s; }
.cs-group:not(.open) .cs-head i { transform: rotate(180deg); }
.cs-body { padding: 0 10px 12px; }
.cs-group:not(.open) .cs-body { display: none; }
.cs-body--scroll { max-height: 260px; overflow-y: auto; }
.cs-sub { font-size: 11.5px; font-weight: 800; color: var(--muted-soft); padding: 8px 6px 4px; letter-spacing: .04em; }

.cs-check, .cs-brand {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 6px; border-radius: 7px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
    transition: background .13s, color .13s;
}
.cs-check:hover, .cs-brand:hover { background: var(--bg-soft); color: var(--ink); }
.cs-check i { font-size: 14px; color: var(--muted-soft); flex-shrink: 0; }
.cs-check.on, .cs-brand.on { color: var(--gold-deep); font-weight: 800; background: var(--gold-soft); }
.cs-check.on i { color: var(--gold); }
.cs-check span, .cs-brand span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-check em, .cs-brand em { font-style: normal; font-size: 11.5px; color: var(--muted-soft); font-weight: 700; flex-shrink: 0; }
.cs-check.on em, .cs-brand.on em { color: var(--gold-deep); }
.cs-brand img { width: 22px; height: 16px; object-fit: contain; flex-shrink: 0; filter: grayscale(1); opacity: .85; }
.cs-brand.on img, .cs-brand:hover img { filter: none; opacity: 1; }
.cs-brand-dot { width: 22px; height: 16px; flex-shrink: 0; }

.cs-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px 4px 12px; }
.cs-search input { flex: 1; border: 0; outline: none; background: none; font-size: 13.5px; min-width: 0; }
.cs-search button { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font-size: 13px; }

/* 결과 영역 */
.cars-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.cars-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ink); color: #fff;
    font-size: 12.5px; font-weight: 700;
    border-radius: 100px; padding: 6px 13px;
}
.cars-chip i { font-size: 13px; opacity: .7; }
.cars-chip:hover { color: #fff; background: #000; }
.cars-chip-clear {
    display: inline-flex; align-items: center;
    font-size: 12.5px; font-weight: 700; color: var(--muted);
    align-self: center; padding: 6px 13px;
    border: 1px solid var(--line); border-radius: 100px;
    background: #fff;
    transition: all .14s;
}
.cars-chip-clear:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--bg-soft); }

.cars-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.cars-total { font-size: 14.5px; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; }
.cars-total strong { font-size: 18px; font-weight: 900; color: var(--ink); }
.cars-sort { display: flex; flex-wrap: wrap; gap: 6px; }
.cars-sort a {
    font-size: 13px; font-weight: 700; color: var(--muted);
    padding: 5px 12px; border-radius: 100px;
    border: 1px solid var(--line);
    background: #fff;
    transition: all .14s;
}
.cars-sort a:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--bg-soft); }
.cars-sort a.on {
    color: #fff; font-weight: 800;
    background: var(--ink); border-color: var(--ink);
}

.cars-filter-fab { display: none; }

@media (max-width: 1200px) {
    .cars-layout { grid-template-columns: 220px 1fr; gap: 20px; }
}
@media (max-width: 992px) {
    .cars-layout { grid-template-columns: 1fr; }
    .cars-side {
        position: fixed; inset: 0; z-index: 1055;
        background: rgba(23,24,26,.45);
        padding: 0;
        display: none;
    }
    .cars-side.open { display: block; }
    .cs-inner {
        position: absolute; left: 0; top: 0; bottom: 0;
        width: min(320px, 88vw);
        border-radius: 0; border: 0;
        overflow-y: auto;
    }
    .cars-filter-fab {
        display: inline-flex; align-items: center; gap: 7px;
        position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px;
        z-index: 1044;
        background: var(--ink); color: #fff; border: 0;
        border-radius: 100px; padding: 13px 26px;
        font-size: 14.5px; font-weight: 800;
        box-shadow: 0 10px 26px rgba(23,24,26,.32);
    }
    .cars-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .cars-sort { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .cars-sort a { white-space: nowrap; }
}

/* ---------- 차량 상세 ---------- */
.detail-hero { background: var(--bg-warm); border-bottom: 1px solid var(--line); }
.detail-hero .in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: start; padding: 50px 0; }

/*
 | 사진과 차량 정보를 한 덩어리로 묶는다.
 | 예전에는 정보가 오른쪽 위에 따로 떠 있어 사진과 따로 노는 느낌이었다.
 */
.detail-id {
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    overflow: hidden; box-shadow: 0 10px 30px rgba(23,24,26,.07);
}
.detail-id-body { padding: 20px 22px 22px; border-top: 1px solid var(--line-soft); }
.detail-id-top { display: flex; align-items: center; gap: 13px; }
.detail-id-logo { height: 30px; width: auto; max-width: 76px; object-fit: contain; flex-shrink: 0; }
.detail-id-brand { display: block; font-size: 13px; color: var(--muted); font-weight: 700; }
.detail-id-top h1 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -.035em; margin: 3px 0 0; }

.detail-id-spec {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px;
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.detail-id-spec > div {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--line-soft);
}
.detail-id-spec > div:nth-last-child(-n+2) { border-bottom: 0; }
.detail-id-spec dt { font-size: 12.5px; color: var(--muted); font-weight: 700; flex-shrink: 0; min-width: 92px; }
.detail-id-spec dd { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 700; }

.detail-hero .pic {
    position: relative;
    overflow: hidden; background: #fff;
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow .3s ease;
}
.pic-tags { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .detail-id-spec { grid-template-columns: 1fr; }
    .detail-id-spec > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
    .detail-id-spec > div:last-child { border-bottom: 0; }
    .detail-id-body { padding: 16px 16px 18px; }
}
.detail-id:hover { box-shadow: 0 26px 60px rgba(23,24,26,.16); }
.detail-hero .pic img {
    width: 100%; display: block;
    transform: translateZ(0);
    transition: transform .3s ease;
}
.detail-hero .pic:hover img { transform: translateZ(38px) scale(1.02); }
.detail-hero .pic .js-tilt-glare { border-radius: 18px 18px 0 0; }
@media (hover: none) {
    .detail-hero .pic { transform: none !important; }
    .detail-hero .pic:hover img { transform: none; }
}
.detail-price-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 28px;
}
.quote-opts .opt-group { margin-bottom: 18px; }
.quote-opts .opt-group .glabel {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 800; color: var(--muted); margin-bottom: 9px;
}
.quote-opts .glabel .gno {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-deep);
    font-size: 10.5px; font-weight: 900;
}
.quote-opts .opts { display: flex; gap: 7px; }

/* 기본(타일) — 라벨 + 한 줄 설명 */
.quote-opts .opts--tile { display: grid; grid-template-columns: repeat(3, 1fr); }
.quote-opts .opts--tile button {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    border: 1px solid var(--line); background: #fff;
    border-radius: 12px; padding: 11px 5px 10px;
    transition: all .15s;
}
.quote-opts .opts--tile button > i { font-size: 15px; color: var(--brand); margin-bottom: 3px; transition: color .15s; }
.quote-opts .opts--tile b { font-size: 13.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.quote-opts .opts--tile em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; }
.quote-opts .opts--tile button:hover { border-color: var(--brand); background: var(--brand-soft); }
.quote-opts .opts--tile button.on {
    border-color: var(--brand); background: var(--brand);
}
.quote-opts .opts--tile button.on b,
.quote-opts .opts--tile button.on em,
.quote-opts .opts--tile button.on > i { color: #fff; }

/* 계약 형태 — 일러스트 카드 */
.quote-opts .opts--img { display: grid; grid-template-columns: 1fr 1fr; }
.quote-opts .opts--img button {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    border: 1px solid var(--line); background: #fff;
    border-radius: 14px; padding: 12px 8px 11px;
    transition: all .16s;
}
.quote-opts .opts--img img {
    width: 68px; height: 68px; object-fit: contain;
    margin-bottom: 4px;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.quote-opts .opts--img b { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.quote-opts .opts--img em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; }
.quote-opts .opts--img button:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--brand-rgb), .14); }
.quote-opts .opts--img button:hover img { transform: scale(1.06); }
.quote-opts .opts--img button.on { border-color: var(--brand); background: var(--brand-soft); }
.quote-opts .opts--img button.on b { color: var(--brand-deep); }
.quote-opts .opt-check {
    position: absolute; right: 9px; top: 9px;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--line-soft); color: transparent;
    font-size: 11px; transition: all .16s;
}
.quote-opts .opts--img button.on .opt-check { background: var(--brand); color: #fff; }

/*
 | 등급 · 선택 옵션 — 글이 길어서 가로 카드로 세운다.
 | 등급 이름은 "디젤 2.0 프레스티지" 처럼 길어 두 칸에 욱여넣으면 줄이 접힌다.
 | 칸 수를 박지 않아 등급이 둘이든 여섯이든 빈칸이 안 생긴다.
 */
.quote-opts .opts--trim,
.quote-opts .opts--pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.quote-opts .opts--trim button,
.quote-opts .opts--pick button {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    border: 1px solid var(--line); background: #fff;
    border-radius: 12px; padding: 11px 34px 10px 13px;
    text-align: left;
    transition: all .16s;
}
.quote-opts .opts--trim b,
.quote-opts .opts--pick b { font-size: 13.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; }
.quote-opts .opts--trim em,
.quote-opts .opts--pick em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.quote-opts .opts--trim button:hover,
.quote-opts .opts--pick button:hover { border-color: var(--brand); background: var(--brand-soft); }
.quote-opts .opts--trim button.on,
.quote-opts .opts--pick button.on { border-color: var(--brand); background: var(--brand-soft); }
.quote-opts .opts--trim button.on b,
.quote-opts .opts--pick button.on b { color: var(--brand-deep); }
.quote-opts .opts--trim button.on .opt-check,
.quote-opts .opts--pick button.on .opt-check { background: var(--brand); color: #fff; }
.quote-opts .glabel small { font-weight: 600; color: var(--muted); font-size: 11.5px; margin-left: 6px; }

/*
 | 고객 구분 — 개인 / 개인사업자 / 법인사업자.
 | 셋 다 한 줄에 보여야 "나는 어느 쪽인가" 를 바로 고른다.
 | 좁은 폰에서는 위아래로 쌓는다 — 세 칸으로 버티면 글자가 접힌다.
 */
.cust-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.cust-seg button {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    border: 1px solid var(--line); background: #fff;
    border-radius: 10px; padding: 9px 6px 8px;
    transition: all .15s;
}
.cust-seg b { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.cust-seg em { font-style: normal; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.cust-seg button:hover { border-color: var(--brand); background: var(--brand-soft); }
.cust-seg button.on { border-color: var(--brand); background: var(--brand); }
.cust-seg button.on b, .cust-seg button.on em { color: #fff; }

/* 좁은 폰에서는 설명을 접어 셋이 한 줄에 들어가게 한다 — 2줄로 갈리면 셋 중 하나만 동떨어져 보인다 */
@media (max-width: 460px) {
    /* 최소 폭도 같이 낮춰야 셋이 실제로 한 줄에 들어간다 */
    .cust-seg { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 5px; }
    .cust-seg em { display: none; }
    .cust-seg button { padding: 10px 3px; }
    .cust-seg b { font-size: 12.5px; }
}

@media (max-width: 400px) {
    .quote-opts .opts--tile em { display: none; }
    .quote-opts .opts--img img { width: 54px; height: 54px; }
}
.quote-result {
    background: var(--gold-soft); border: 1px solid var(--gold-line);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 20px 0;
}
.quote-result .lab { font-size: 13.5px; font-weight: 800; color: var(--gold-deep); }
.quote-result .val { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.quote-result .val em { font-style: normal; font-size: 15px; color: var(--gold-deep); }
/*
 | 세부모델(라인업) 고르는 줄.
 | 등급 카드와 같은 생김새를 쓰되, 먼저 고르는 칸이라 살짝 더 눈에 띄게 둔다.
 */
.quote-opts .opts--lineup button { background: var(--bg-soft); }
.quote-opts .opts--lineup button.on { background: var(--brand-soft); }

/* 세부모델 리스트 (차량 상세) */
.trim-lineup {
    font-size: 14px; font-weight: 800; letter-spacing: -0.02em;
    color: var(--brand-deep);
    margin: 22px 0 8px;
}
.trim-lineup:first-of-type { margin-top: 0; }
.trim-list { border-top: 2px solid var(--ink); }
.trim-row {
    display: flex; align-items: center; gap: 18px;
    padding: 15px 14px;
    border-bottom: 1px solid var(--line);
    transition: background .14s;
}
.trim-row:hover { background: var(--bg-soft); }
.trim-name { flex: 1; min-width: 0; }
.trim-name strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.trim-name small { color: var(--muted); font-size: 12px; }
.trim-price { flex-shrink: 0; text-align: right; line-height: 1.35; }
.trim-price .lab { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.trim-price .val { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.trim-price .val.strong { font-size: 16.5px; font-weight: 900; color: var(--ink); }
@media (max-width: 576px) {
    .trim-row { flex-wrap: wrap; gap: 10px; }
    .trim-name { flex-basis: 100%; }
}

.spec-table { width: 100%; border-top: 2px solid var(--ink); }
.spec-table th, .spec-table td { padding: 13px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
.spec-table th { background: var(--bg-soft); font-weight: 800; color: var(--ink-soft); width: 140px; text-align: left; }

/* ---------- 게시판 ---------- */
.board-table { width: 100%; border-top: 2px solid var(--ink); }
.board-table th { padding: 14px 12px; font-size: 13px; font-weight: 800; color: var(--muted); border-bottom: 1px solid var(--line); text-align: left; }
.board-table td { padding: 16px 12px; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.board-table tr:hover td { background: var(--bg-soft); }
.pin-badge { font-size: 10.5px; font-weight: 800; background: var(--ink); color: #fff; border-radius: 6px; padding: 2.5px 8px; margin-right: 7px; }

/* 이벤트 카드 */
.event-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .18s, box-shadow .18s; height: 100%; }
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.event-card .pic { aspect-ratio: 16/9; background: var(--bg-warm); overflow: hidden; position: relative; }
.event-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.event-card .pic .state {
    position: absolute; top: 12px; left: 12px;
    font-size: 11px; font-weight: 800; border-radius: 7px; padding: 4px 10px;
}
.event-card .pic .state.on { background: var(--gold); color: #fff; }
.event-card .pic .state.end { background: rgba(23,24,26,.75); color: #fff; }
.event-card .txt { padding: 20px 22px 22px; }
.event-card .txt .period { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.event-card .txt h3 { font-size: 17px; margin-bottom: 4px; }
.event-card .txt p { font-size: 13.5px; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 페이지네이션 ---------- */
.pagination { --bs-pagination-color: var(--ink-soft); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); --bs-pagination-focus-box-shadow: none; --bs-pagination-hover-color: var(--ink); }
.pagination .page-link { font-weight: 700; font-size: 14px; border-color: var(--line); }

/* ---------- 폼 ---------- */
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.form-label { font-weight: 700; font-size: 13.5px; }

/* ---------- 유틸 ---------- */
.text-gold { color: var(--gold-deep) !important; }
.bg-warm { background: var(--bg-warm) !important; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1200px) {
    .rail { grid-auto-columns: calc((100% - 40px) / 3); }
    .brand-grid { grid-template-columns: repeat(4, 1fr); }
    .hdr-main-inner { gap: 20px; }
    .hdr-search { max-width: 420px; }
    .hdr-util-tel { display: none; }
    .hdr-nav > a { padding: 8px 11px; font-size: 14.5px; }
}
@media (max-width: 992px) {
    /* 2단 헤더 → 로고+검색+햄버거만 */
    .hdr-search { max-width: none; }
    .hdr-quote-btn { display: none; }
    .hdr-event { display: none; }
    .hdr-utils { gap: 8px; }
    .hdr-cat { display: none; }
    .hamburger { display: block; }
    .quote-bar { flex-direction: column; align-items: stretch; gap: 13px; padding: 14px; }
    .qb-head { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding: 0 0 12px; align-self: stretch; }
    .qb-fields { grid-template-columns: 1fr; gap: 11px; }
    .qb-seg { display: flex; width: 100%; }
    .qb-seg button { flex: 1; padding: 0 4px; }
    .qb-btn { width: 100%; height: 46px; }
    .rank-grid { grid-template-columns: 1fr; }
    .svc-grid { grid-template-columns: 1fr; }
    .corp-band .in { grid-template-columns: 1fr; padding: 44px 30px; }
    .site-footer .cols { grid-template-columns: 1fr 1fr; }
    .side-consult { display: none; }
    .side-consult-mini { display: none !important; }
    .detail-hero .in { grid-template-columns: 1fr; }
    .stats-band .in { grid-template-columns: repeat(2, 1fr); }
    .stats-band .cell:nth-child(3) { border-left: 0; }
    .rail { grid-auto-columns: calc((100% - 20px) / 2); }
    .cta-band { flex-direction: column; text-align: center; padding: 44px 28px; }
    .cta-actions { flex-direction: column; width: 100%; }
    .cta-actions .btn { width: 100%; }
}
@media (max-width: 576px) {
    .sec { padding: 60px 0; }
    .container-x { padding: 0 16px; }
    .hdr-main-inner { height: 66px; gap: 10px; }
    /* 인기 랭킹 — 좁은 화면에서 요소 축소 */
    .rank-item { gap: 10px; padding: 11px 12px; }
    .rank-item .no { width: 20px; font-size: 17px; }
    .rank-item .timg { width: 72px; height: 48px; }
    .rank-item .info .nm { font-size: 14px; }
    .rank-item .prices .val { font-size: 13px; }
    .rank-item .prices .lab { font-size: 10px; }
    .brand-cell .blogo img { max-width: 100%; }
    .brand-logo-img { height: 38px; }
    .hdr-search { height: 44px; padding: 0 4px 0 14px; }
    .hdr-search input { font-size: 14px; }
    .hdr-search-btn { padding: 0 16px; height: 34px; }
    .brand-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .brand-cell .blogo { height: 58px; padding: 10px 12px; }
    .brand-cell .blogo img { max-height: 26px; }
    .brand-cell .kr { font-size: 12px; padding: 7px 6px; }
    .rail { grid-auto-columns: 86%; }
    .price-tabs button { padding: 8px 16px; font-size: 13px; }
    .floating-consult { right: 14px; bottom: 80px; gap: 8px; }
    /* 푸터는 좁은 화면에서도 2열 — 한 줄로 늘어뜨리면 스크롤만 길어지고 허전하다 */
    .site-footer .cols { grid-template-columns: 1fr 1fr; }
    .hero .slides { min-height: 430px; }
}

/* ---------- 슬롯머신 숫자 ----------
   자릿수 하나가 0~9 릴이고, 목표 숫자 칸으로 굴러가 멈춘다.
   바깥 요소의 display 는 건드리지 않는다 — .odo-in 안에서만 flex 를 쓴다.

   display 에 !important 를 붙인 이유:
   페이지 곳곳에 `.trust-stats span { display: block }` 같은 넓은 자손 선택자가 있어서
   릴 조각들이 블록으로 바뀌면 숫자가 세로로 주르륵 늘어서 버린다.
   이 위젯이 스스로를 지켜야 하는 부분이라 여기서만 강제한다. */
.odo .odo-in {
    display: inline-flex !important;
    align-items: flex-end;
    line-height: 1;
    vertical-align: baseline;
    /* 릴 칸은 글자 상자 기준이라 실제 글자보다 살짝 높게 앉는다 — 밑선을 맞춰 준다 */
    position: relative; top: .12em;
}
.odo .odo-d { display: block !important; overflow: hidden; height: 1em; }
.odo .odo-reel { display: block !important; will-change: transform; }
.odo .odo-reel > span { display: block !important; height: 1em; line-height: 1em; text-align: center; }
.odo .odo-s { display: block !important; height: 1em; line-height: 1em; }

/* =========================================================
   좁은 화면 보정
   ========================================================= */

/* ── 그리드 칸이 화면보다 넓어지는 문제 ──
   그리드/플렉스 아이템의 기본값은 min-width:auto 라서, 칸이 안에 든 이미지의
   고유 폭(예: 1536px) 밑으로 못 줄어든다. 그 결과 모바일에서 칸이 화면 밖으로
   삐져나가 오른쪽이 잘려 보인다. img{max-width:100%} 만으로는 칸 자체가
   줄지 않으므로, 레이아웃 컨테이너의 직계 자식은 0 으로 되돌린다. */
.detail-hero .in > *,
.promo-split > *,
.ab-intro > *,
.icards > *,
.lp-grid > *,
.svc-grid > *,
.partner-grid > *,
.stats-band > *,
.rt-cars > *,
.way-list > *,
.site-footer .cols > * {
    min-width: 0;
}

/* ── 모바일 헤더 검색 ──
   768px 이하에서는 "검색" 입력창을 접고 돋보기 버튼만 남긴다. 로고·견적·햄버거와
   나란히 두기엔 가로 공간이 부족해 입력창이 눌려 보이던 문제를 없앤다. */
.hdr-search-toggle { display: none; }

@media (max-width: 768px) {
    /*
     | 모바일 헤더 배치: 햄버거(좌) · 로고(가운데) · 돋보기(우)
     |
     | 세 요소가 .hdr-utils 안에 묶여 있어 순서를 바꿀 수 없으므로
     | display:contents 로 껍데기를 없애 부모 flex 의 직속 자식으로 만든 뒤
     | order 로 자리를 잡는다.
     */
    .hdr-main-inner { position: relative; gap: 10px; }
    .hdr-utils { display: contents; }
    .hamburger { order: -1; margin-right: auto; }
    .brand-logo { order: 0; }
    .hdr-search-toggle { order: 1; margin-left: auto; }

    .hdr-search-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: #fff;
        color: var(--ink);
        font-size: 17px;
        line-height: 1;
        transition: border-color .16s, background .16s;
    }
    .hdr-search-toggle:hover,
    .hdr-search-toggle[aria-expanded="true"] {
        border-color: var(--ink);
        background: var(--bg-soft);
    }

    /* 평소엔 접혀 있고, 버튼을 누르면 헤더 아래로 한 줄 펼쳐진다 */
    .hdr-main-inner .hdr-search {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        z-index: 60;
        margin: 0;
        max-width: none;
        height: 50px;
        padding: 0 6px 0 16px;
        box-shadow: 0 12px 28px rgba(23, 24, 26, .14);
    }
    .site-header.search-open .hdr-main-inner .hdr-search { display: flex; }
}

/* ── 상세 조건 미니 타일 ──
   기본 4칸은 좁은 화면에서 한 칸이 라벨(white-space:nowrap) 너비보다 작아질 수
   없어 오른쪽이 잘려 나간다. 모바일에서는 2칸으로 줄이고, 칸이 화면에 맞게
   줄어들 수 있도록 min-width 를 풀어 준 뒤 넘치는 라벨은 말줄임으로 처리한다. */
@media (max-width: 768px) {
    .opts--mini { grid-template-columns: repeat(2, 1fr); }
    .opts--mini button { min-width: 0; }
    .opts--mini button b {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Bootstrap 거터 ──
   g-5(3rem)는 좌우 -24px 음수 마진을 만드는데 모바일 컨테이너 좌우 여백은
   16px 뿐이라 매번 8px 씩 화면 밖으로 삐져나간다. 좁은 화면에서는 줄인다. */
@media (max-width: 768px) {
    .row.g-5,
    .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* 차량 상세 — 주요 옵션 · 안전 사양 */
.spec-opt { margin-top: 28px; }
.spec-opt-group + .spec-opt-group { margin-top: 20px; }
.spec-opt h3 {
    display: flex; align-items: center; gap: 7px;
    font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px;
}
.spec-opt h3 i { color: var(--brand-deep); font-size: 17px; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-chips span {
    border: 1px solid var(--line); background: var(--bg-soft); border-radius: 100px;
    padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.spec-chips.safe span { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-deep); }
.spec-opt-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

/* 푸터 기준 고지 — 본문보다 한 톤 낮게 */
.ft-basis { display: block; margin-top: 6px; opacity: .82; line-height: 1.7; }

/* 제원표 안의 작은 단서 — 수치 옆에 조건을 밝힌다 */
.spec-note { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: -.01em; }

/* 완료 페이지 후킹 한 줄 — 지금 무슨 일이 벌어지는지 */
.done-hook { font-size: 15.5px; font-weight: 800; color: var(--brand-deep); letter-spacing: -.02em; margin: 6px 0 10px; }
@media (max-width: 576px) { .done-hook { font-size: 14px; } }

/* ---------- 차량 상세: 세부모델 선택 ---------- */
/*
 | 「견적 문의」를 누르면 그 줄이 골라졌다는 게 보여야 한다.
 | 예전에는 눌러도 화면이 그대로라 사용자가 고장난 줄 알았다.
 */
.trim-row.on {
    background: var(--brand-soft, rgba(0, 0, 0, .03));
    box-shadow: inset 3px 0 0 var(--brand, #12b3ae);
}

.trim-picked {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px;
    padding: 9px 10px 9px 12px;
    border: 1px solid var(--brand, #12b3ae);
    border-radius: 12px;
    background: var(--brand-soft, rgba(18, 179, 174, .07));
    font-size: 13px; font-weight: 700; color: var(--ink);
}
.trim-picked > .bi-check-circle-fill { color: var(--brand, #12b3ae); flex-shrink: 0; }
.trim-picked .tp-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trim-picked .tp-price { flex-shrink: 0; font-weight: 900; }
.trim-picked .tp-clear {
    flex-shrink: 0; border: 0; background: none; padding: 2px 4px;
    color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer;
}
.trim-picked .tp-clear:hover { color: var(--ink); }

/* 담겼다는 신호. 한 번만 반짝이고 만다 — 계속 움직이면 성가시다 */
.detail-price-card.just-picked { animation: cardPicked .7s ease-out; }
@keyframes cardPicked {
    0%   { box-shadow: 0 0 0 0 var(--brand, #12b3ae); }
    35%  { box-shadow: 0 0 0 4px rgba(18, 179, 174, .28); }
    100% { box-shadow: 0 0 0 0 rgba(18, 179, 174, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .detail-price-card.just-picked { animation: none; }
}

/* ---------- 좁은 폰에서 차량 카드 ---------- */
/*
 | 카드 폭이 150px 쯤 되면 "월 렌트료" 와 "171,990원~" 이 한 줄에 못 들어가
 | 「월 / 171,990 / 렌트료 / ~」 네 줄로 쪼개져 나온다. 값이 어디 걸린 건지도 안 보인다.
 |
 | 두 가지로 나눠 푼다.
 |  1) 아주 좁으면(≤420px) 한 줄에 한 대씩 — 폭이 넉넉해야 숫자가 안 깨진다.
 |  2) 그보다 넓으면 두 대씩 두되, 이름표를 값 위로 올리고 줄바꿈을 막는다.
 */
@media (max-width: 575.98px) {
    /* 이름표와 값을 위아래로 — 옆으로 나란히 두기엔 자리가 없다 */
    .car-card .price-block .row-line {
        display: block;
        text-align: left;
    }
    .car-card .price-block .lab,
    .car-card .price-block .val,
    .car-card .price-block .monthly {
        white-space: nowrap;      /* 숫자가 쪼개지는 것을 막는다 */
    }
    .car-card .price-block .lab { font-size: 11px; line-height: 1.3; }
    .car-card .price-block .val { font-size: 12.5px; }
    .car-card .price-block .monthly { font-size: 19px; line-height: 1.15; display: block; }
    .car-card .price-block .monthly em { font-size: 12px; }

    /* 사양 딱지가 한 줄에 하나씩 서면 카드가 세로로 길어진다 */
    .car-card .chips { gap: 3px; margin-bottom: 11px; }
    .car-card .chip-spec { font-size: 10.5px; padding: 2px 6px; }

    .car-card .actions { gap: 5px; margin-top: 12px; }
    .car-card .actions .btn { font-size: 12.5px; padding: .5rem 0; }
    .car-card .body { padding: 12px 12px 13px; }
    .car-card .name { font-size: 16px; }
    .car-card .trim { font-size: 11.5px; }
}

@media (max-width: 420px) {
    /*
     | 한 줄에 한 대씩.
     | :has 를 쓰는 이유 — 차량 카드를 담은 칸만 골라야 한다.
     | 다른 col-6(혜택 목록 따위)까지 늘리면 화면이 엉뚱하게 길어진다.
     */
    .row > [class*="col-"]:has(> .car-card) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* 폭이 넉넉해졌으니 원래대로 이름표를 옆에 둔다 */
    .car-card .price-block .row-line {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    .car-card .price-block .lab { font-size: 12px; }
    .car-card .price-block .val { font-size: 13px; }
    .car-card .price-block .monthly { font-size: 22px; display: inline; }
    .car-card .price-block .monthly em { font-size: 13px; }
    .car-card .chips { gap: 4px; }
    .car-card .chip-spec { font-size: 11.5px; padding: 3px 8px; }
    .car-card .actions .btn { font-size: 13.5px; padding: .58rem 0; }
    .car-card .thumb { aspect-ratio: 16 / 10; }
}

/* ---------- 좁은 폰: 견적 계산기 결과 ---------- */
/*
 | 이름표와 금액을 한 줄에 마주 보게 두었는데, 320px 쯤 되면 자리가 모자라
 | 「426,000」 과 「원~」 이 갈라져 나온다. 금액이 두 줄로 보여 읽히지 않는다.
 */
.quote-result .val { white-space: nowrap; }

@media (max-width: 400px) {
    .quote-result {
        display: block;
        text-align: left;
        padding: 14px 16px;
    }
    .quote-result .lab { display: block; margin-bottom: 2px; }
    .quote-result .val { font-size: 25px; }
}