/* 손님 화면 디자인 시스템 (2026-10-28, 유진 "클러치·캐나다 드라이브스처럼 깔끔하고 투명하게").
   흰 바탕 · 사진이 먼저인 카드 · 위계(연식 메이커 모델 트림 > 가격 > km·사실) · 가격 바로 밑 수수료 고지 · 신뢰 배지 ·
   폰 하단 고정 CTA(문자·전화·시승 예약). 색은 셋뿐: 잉크(글·선택 칩), 빨강(CTA·추천 하나), 초록/파랑(확인된 사실·안내).
   구조 규칙(subgrid·사진 비율·sticky·데스크톱 격자)은 각 템플릿에 남아 있다 — 테스트가 그 원문을 읽는다. 여기는 겉모습만. */
:root {
  --red:#c3002f; --ink:#111418; --ink-2:#434a54; --ink-3:#6b7280; --ink-4:#9aa1ab;
  --line:#e6e9ee; --line-2:#f0f2f5; --bg:#ffffff; --card:#ffffff; --surface:#f6f7f9; --surface-2:#eef0f3;
  --ok:#0f8a4c; --ok-bg:rgba(15,138,76,.09); --warn:#b45309; --info:#1d4ed8; --info-bg:rgba(29,78,216,.08);
  --r:16px; --r-s:12px; --r-xs:8px;
  --sh-1:0 1px 2px rgba(16,20,30,.05), 0 1px 1px rgba(16,20,30,.03);
  --sh-2:0 10px 28px rgba(16,20,30,.10);
  --sl:max(16px, env(safe-area-inset-left)); --sr:max(16px, env(safe-area-inset-right));
  --bar:#121417; --bar-2:#20242a; --bar-3:#343a43; --bar-ink:#a2a9b3;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:-apple-system, "SF Pro Text", "Apple SD Gothic Neo", BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%; overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
svg { display:inline-block; }
.wrap { max-width:1180px; margin:0 auto; }
.pad { padding-left:var(--sl); padding-right:var(--sr); }
.foot-sp { height:calc(24px + env(safe-area-inset-bottom)); }
@media (min-width:1024px) { :root { --sl:24px; --sr:24px; } }

/* ---------- 상단바 (얇고 조용하게: 손님에겐 안 보이는 게 목적) ---------- */
.topbar { display:flex; align-items:center; gap:10px; min-height:48px;
  padding:calc(4px + env(safe-area-inset-top)) var(--sr) 4px var(--sl); background:var(--bar); color:var(--bar-ink); font-size:14px; }
.tb-nav { display:flex; align-items:center; flex-wrap:wrap; gap:6px 4px; flex:1 1 auto; min-width:0; }
.tb-nav > * { flex:0 0 auto; }
.tb-link { display:inline-flex; align-items:center; min-height:40px; padding:0 12px; border-radius:999px;
  color:#cfd4db; font-weight:700; font-size:14px; white-space:nowrap; }
.tb-link:active { background:var(--bar-2); color:#fff; }
.tb-link.cur { background:var(--bar-3); color:#fff; }
.tb-link.hot { color:color-mix(in srgb, var(--red, #c3002f) 55%, #fff); }
.tb-link.hot.cur { background:var(--red, #c3002f); color:#fff; }
.tb-sp { flex:1; }
.tb-lang { display:flex; margin:0; align-items:center; gap:0; flex:0 0 auto; }
.tb-lang .globe { width:17px; height:17px; margin-right:6px; color:#8f959e; }
.tb-lang button { background:var(--bar-2); border:0; color:#9ba1aa; font-size:13.5px; font-weight:800; padding:0 13px;
  cursor:pointer; -webkit-appearance:none; min-height:40px; }
.tb-lang button:first-child { border-radius:999px 0 0 999px; }
.tb-lang button:last-child { border-radius:0 999px 999px 0; }
.tb-lang button.on { background:var(--bar-3); color:#fff; }
.tb-lang-mini { display:none; }
.tb-lang-cur { position:relative; display:inline-flex; align-items:center; gap:5px; min-height:40px; padding:0 10px 0 11px;
  border-radius:999px; background:var(--bar-2); color:#fff; font-size:13.5px; font-weight:800; white-space:nowrap; cursor:pointer; }
.tb-lang-cur .globe { width:16px; height:16px; margin:0; }
.tb-lang-cur .chev { width:12px; height:12px; color:#8f959e; }
.tb-lang-cur select { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0;
  font-size:16px; cursor:pointer; -webkit-appearance:none; appearance:none; }
.tb-lang-cur select:focus-visible + .chev { color:#fff; }
.tb-lang-go { margin-left:6px; min-height:40px; padding:0 12px; border:0; border-radius:999px; background:var(--bar-3);
  color:#fff; font:inherit; font-size:13.5px; font-weight:800; }
@media (max-width:767px) {
  .tb-lang-wide { display:none; }
  .tb-lang-mini { display:flex; }
}
/* 직원용 영업/손님 전환 줄 — 상단바와 같은 어두운 띠 */
.gvs-wrap { padding:8px var(--sr) 0 var(--sl); }
.gvs-wrap:has(.drive-viewbar) { padding-top:calc(8px + env(safe-area-inset-top)); background:var(--bar); }
.gvs-wrap:has(.drive-viewbar) + .topbar { padding-top:4px; }
@media (hover:hover) and (pointer:fine) {
  .tb-link:hover { background:var(--bar-2); color:#fff; }
  .tb-link.hot.cur:hover { background:#a50028; }
  .tb-lang button:hover { color:#fff; }
}

/* ---------- 공통 카드(섹션) ---------- */
.sec { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-top:12px; }
.sec h2 { font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:0 0 10px; line-height:1.3; }
.sec-hd { display:flex; align-items:baseline; gap:8px; margin:0 0 10px; }
.sec-hd h2 { margin:0; }
.sec-hd .sum { margin-left:auto; font-size:12.5px; font-weight:750; color:var(--ink-2); }
.sub-h { font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-3);
  margin:14px 0 9px; padding-top:14px; border-top:1px solid var(--line-2); }
.note { font-size:13px; color:var(--ink-2); font-weight:600; margin-top:6px; line-height:1.45; }
.empty { background:var(--surface); border-radius:var(--r); padding:36px 16px; text-align:center; color:var(--ink-3);
  font-size:14px; font-weight:600; margin:4px var(--sr) 0 var(--sl); word-break:keep-all; }

/* ---------- 세금 꼬리 ('+ 세금'은 숫자 바로 옆에, 배지처럼 보이지 않게) ---------- */
.taxnote { margin-left:5px; color:var(--ink-2); font-size:11.5px; font-weight:750; white-space:nowrap; }
.pay .pp .v .taxnote, .pay .p .v .taxnote, .fin .taxnote { display:block; margin:2px 0 0; white-space:normal; line-height:1.35; }
.vc-pay .taxnote { white-space:normal; }

/* ---------- 명함 ---------- */
.namecard { display:flex; align-items:center; gap:12px; }
.nc-photo { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:2px solid #fff; box-shadow:0 1px 4px rgba(16,20,30,.18); }
.nc-photo.ph { background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; }
.nc-txt { min-width:0; flex:1; }
.nc-name { font-size:16px; font-weight:800; line-height:1.25; }
.nc-sub { font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; }
.nc-sub.multi { white-space:normal; overflow:visible; text-overflow:clip; }
.nc-btns { display:flex; gap:8px; margin-top:12px; }
.nc-btns a { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:10px 8px;
  border-radius:var(--r-s); font-size:14px; font-weight:750; background:#fff; border:1px solid var(--line); color:var(--ink); }
.nc-btns a.call { background:var(--ink); border-color:var(--ink); color:#fff; }
.nc-btns svg { width:17px; height:17px; }
.nc-brand { margin-top:12px; padding:10px 12px; border-radius:var(--r-s); background:var(--surface); border-left:3px solid var(--red); }
.nc-line { font-size:14px; font-weight:800; color:var(--ink); line-height:1.35; }
.nc-cta { font-size:13px; color:var(--ink-2); line-height:1.45; margin-top:2px; }

/* ---------- 배지 (확인된 사실: 한 톤, 색 하나 = 뜻 하나) ---------- */
.badge, .vc-tag { display:inline-flex; align-items:center; min-height:24px; padding:2px 9px; border-radius:999px;
  background:var(--surface); color:var(--ink-2); font-size:11.5px; font-weight:700; line-height:1.35; max-width:100%;
  white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }
.badge.key, .vc-tag.pick { background:rgba(195,0,47,.075); color:var(--red); }
.badge.t-ok, .vc-tag.t-ok, .badge.t-km, .vc-tag.t-km, .badge.t-owner, .vc-tag.t-owner { background:var(--ok-bg); color:#0d6b3f; }
.badge.t-cert, .vc-tag.t-cert, .badge.t-info, .vc-tag.t-info { background:var(--info-bg); color:var(--info); }
.badge.t-eco, .vc-tag.t-eco { background:rgba(13,148,136,.1); color:#0f766e; }
.badge.t-warn, .vc-tag.t-warn { background:rgba(180,83,9,.1); color:var(--warn); }
.badgerow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* ---------- 칩 (필터·정렬·모델) — 선택은 잉크, 빨강은 CTA 전용 ---------- */
.chip { flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:8px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2); font-size:13.5px; font-weight:700; white-space:nowrap; }
.chip.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.chip .n { font-size:12px; font-weight:700; opacity:.6; margin-left:5px; font-variant-numeric:tabular-nums; }
.chip.on .n { opacity:.8; }
.chip.zero { opacity:.45; }
@media (hover:hover) and (pointer:fine) {
  .chip { transition:border-color .12s ease, background-color .12s ease; }
  .chip:not(.on):hover { border-color:var(--ink-4); background:var(--surface); }
}

/* ---------- 버튼 ---------- */
.share-pill, .g-back, .nc-link, .back { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 15px;
  background:#fff; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:13.5px; font-weight:750;
  color:var(--ink-2); cursor:pointer; white-space:nowrap; text-decoration:none; }
.share-pill svg, .g-back svg { width:15px; height:15px; }
.share-pill.bad { color:var(--warn); border-color:#f0d3a8; background:#fff8ef; }
.share-pill:active, .g-back:active, .nc-link:active { background:var(--surface); }
.doc-row { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
.doc-row > .doc-btn:only-child { grid-column:1 / -1; }
.sec h2 + .doc-row { margin-top:0; }
.doc-btn { display:flex; align-items:center; gap:10px; padding:12px 14px; min-height:56px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-s); color:var(--ink); text-decoration:none; }
.doc-btn:active { background:var(--surface); }
.doc-btn svg { width:22px; height:22px; flex:0 0 auto; color:#4b5563; }
.doc-btn b { display:block; font-size:13.5px; font-weight:800; line-height:1.2; }
.doc-btn em { display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); }
.doc-btn.cfx { background:var(--ink); border-color:var(--ink); color:#fff; }
.doc-btn.cfx svg { color:#4fc26f; }
.doc-btn.cfx em { color:#aab0b9; }
.fee-link { display:flex; width:max-content; max-width:100%; align-items:center; gap:4px; min-height:44px; margin-top:2px; font-weight:800; font-size:13.5px; color:var(--ink); }
.fee-link::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-left:2px; opacity:.6; }

/* ---------- 하단 고정 CTA: 문자 · 전화 · 시승 예약 (빨강은 이 하나) ---------- */
.cta-bar { position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:10px var(--sr) calc(10px + env(safe-area-inset-bottom)) var(--sl); }
.cta-in { display:flex; gap:8px; max-width:640px; margin:0 auto; }
.cta-sec { flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:64px;
  min-height:52px; padding:6px 10px; border-radius:var(--r-s); background:#fff; border:1px solid var(--line); color:var(--ink);
  font-size:11.5px; font-weight:750; line-height:1.1; text-decoration:none; }
.cta-sec svg { width:19px; height:19px; }
.cta-sec:active { background:var(--surface); }
.cta-btn { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:52px; text-align:center;
  background:var(--red); color:#fff; font:inherit; font-size:15.5px; font-weight:800; padding:12px 14px; border:0; border-radius:var(--r-s);
  text-decoration:none; cursor:pointer; box-shadow:0 6px 16px color-mix(in srgb, var(--red, #c3002f) 28%, transparent); }
.cta-btn:active { transform:scale(.99); }
@media (hover:hover) and (pointer:fine) {
  .share-pill:hover, .g-back:hover, .nc-link:hover, .back:hover, .cta-sec:hover { background:var(--surface); border-color:var(--ink-4); }
  .doc-btn { transition:border-color .12s ease, background-color .12s ease; }
  .doc-btn:hover { background:var(--surface); border-color:var(--ink-4); }
  .doc-btn.cfx:hover { background:#2a2e35; border-color:#2a2e35; }
  .cta-btn:hover { filter:brightness(.93); }
  .nc-btns a:hover { background:var(--surface); }
  .nc-btns a.call:hover { background:#2a2e35; }
}

/* ---------- 대표 사진의 딜러 띠 (주소·대표번호)는 칸 밖으로 — img.hf 규칙은 guest/_layout.html 에 (테스트가 그 원문을 읽는다) ---------- */
.bk-fr { display:block; overflow:hidden; } .bk-fr img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- 법적 고지 · 가격 고지 줄 ---------- */
.g-disc { max-width:1180px; margin:28px auto 0; padding:0 var(--sr) 8px var(--sl); font-size:11.5px; line-height:1.6; color:var(--ink-3); }
.g-disc summary { list-style:none; cursor:pointer; }
.g-disc summary::-webkit-details-marker { display:none; }
.g-disc[open] summary { color:var(--ink-2); }
.g-disc-full { margin-top:6px; white-space:pre-line; }
.pstar { color:var(--red); font-weight:800; text-decoration:none; font-size:.6em; vertical-align:super; margin-left:1px; }
.pd-line { font-size:13px; color:var(--ink-2); font-weight:650; margin-top:6px; line-height:1.45; }
.pd-total { font-size:13px; color:var(--ink-3); font-weight:600; margin-top:3px; }
.pd-total b { color:var(--ink); font-weight:800; }
.pd-vsa { font-size:12px; color:var(--ink-3); font-weight:550; margin-top:4px; line-height:1.45; }
.pd-fold { font-size:12.5px; color:var(--ok); font-weight:650; margin-top:4px; line-height:1.45; }
.pd-hide { color:var(--ink-2); font-weight:650; }
.pd-tq { margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-s); font-size:12.5px; color:var(--ink-2);
  font-variant-numeric:tabular-nums; background:#fff; }
.pd-tq-h { font-weight:750; margin-bottom:4px; color:var(--ink); }
.pd-tq-r { display:flex; justify-content:space-between; gap:10px; line-height:1.6; }
.pd-tq-s { font-size:11.5px; color:var(--ink-3); margin-top:-2px; margin-bottom:2px; }
.pd-tq-t { border-top:1px solid var(--line); margin-top:4px; padding-top:4px; }
.pd-tq-t b { font-weight:800; color:var(--ink); }
.pd-tq-n { font-size:11.5px; color:var(--ink-3); margin-top:4px; line-height:1.45; }
.pd-evap { color:var(--ok); font-weight:650; }
/* 가격 내역 (접기) — 차 값 · 서류비 · VSA · 세금 전 총액. 숫자는 위 고지 줄과 같은 것 (price_fees / price_total) */
.pd-box { margin-top:10px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); }
.pd-box > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px;
  font-size:13px; font-weight:750; color:var(--ink-2); }
.pd-box > summary::-webkit-details-marker { display:none; }
.pd-box > summary .chev { margin-left:auto; width:14px; height:14px; color:var(--ink-3); transition:transform .15s ease; }
.pd-box[open] > summary .chev { transform:rotate(180deg); }
.pd-rows { padding:2px 12px 12px; font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.pd-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--line); line-height:1.4; }
.pd-row:first-child { border-top:0; }
.pd-row.t { font-weight:800; color:var(--ink); border-top:1px solid var(--ink-4); }
.pd-row .lbl { min-width:0; }
.pd-row .lbl small { display:block; font-size:11.5px; color:var(--ink-3); font-weight:550; }
.pd-row .amt { flex:0 0 auto; white-space:nowrap; }
.pd-row-n { font-size:11.5px; color:var(--ink-3); margin-top:6px; line-height:1.45; }

/* ---------- 쇼룸 목록 (browse.html) ---------- */
.head { padding:18px var(--sr) 4px var(--sl); }
.head h1 { margin:0; font-size:22px; font-weight:850; letter-spacing:-.4px; line-height:1.2; word-break:keep-all; }
.head .sub { font-size:13px; color:var(--ink-3); margin-top:4px; }
.head-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:10px var(--sr) 4px var(--sl); }
.head-tools .sub { margin:0; font-size:12.5px; color:var(--ink-3); }
.g-rate { display:inline-flex; align-items:center; gap:4px; margin-left:7px; padding:1px 8px; border:1px solid var(--line); border-radius:999px;
  font-weight:800; color:var(--ink-2); text-decoration:none; white-space:nowrap; font-size:12px; }
.g-rate .s { color:#f5a623; font-size:12px; line-height:1; }
.g-rate .on-g { font-weight:600; color:var(--ink-3); }
.searchf { display:flex; gap:8px; padding:6px var(--sr) 4px var(--sl); }
.searchf .sf-in { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:0 14px; min-height:44px; }
.searchf .sf-in svg { width:17px; height:17px; color:var(--ink-4); flex:0 0 auto; }
.searchf input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:var(--ink); min-height:42px;
  -webkit-appearance:none; appearance:none; }
.searchf input::placeholder { color:var(--ink-4); }
.searchf button { flex:0 0 auto; border:0; background:var(--ink); color:#fff; border-radius:999px; min-height:44px; padding:0 18px;
  font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; }
.chips { display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px var(--sr) 10px var(--sl); scrollbar-width:none;
  background:var(--bg); }
.chips::-webkit-scrollbar { display:none; }
.chips.sortp { padding-top:0; }
.tools2 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0 var(--sr) 8px var(--sl); }
.tgl { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:5px 14px 5px 9px; background:#fff; border:1px solid var(--line);
  border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-3); }
.tgl .tk { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; background:#fff; }
.tgl.on { border-color:var(--ink); color:var(--ink); }
.tgl.on .tk { background:var(--ink); border-color:var(--ink); }
/* 테두리는 box-shadow 고리로 — border 는 사진 칸을 카드보다 2px 좁게 만든다 (사진 폭 = 카드 폭, 옆을 자르지 않는다는 규칙) */
.vc { display:flex; flex-direction:column; background:var(--card); border:0; border-radius:var(--r); overflow:hidden;
  box-shadow:0 0 0 1px var(--line), var(--sh-1); min-width:0; }
.vc:active { transform:scale(.99); }
.vc-ph { background:var(--surface-2); }
.vc-no { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:12px;
  font-weight:700; color:var(--ink-3); background:var(--surface-2); }
.vc-no::before { content:''; width:56px; height:30px; opacity:.5; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34'%3E%3Cpath d='M6 22c0-2 1-4 3-5l6-3c2-6 7-9 14-9h6c7 0 12 3 16 8l7 2c3 1 4 3 4 5v5c0 2-1 3-3 3h-3a6 6 0 0 1-12 0H22a6 6 0 0 1-12 0H7c-2 0-3-1-3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34'%3E%3Cpath d='M6 22c0-2 1-4 3-5l6-3c2-6 7-9 14-9h6c7 0 12 3 16 8l7 2c3 1 4 3 4 5v5c0 2-1 3-3 3h-3a6 6 0 0 1-12 0H22a6 6 0 0 1-12 0H7c-2 0-3-1-3-3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.vc-pick { position:absolute; left:8px; top:8px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--red);
  font-size:11px; font-weight:800; box-shadow:var(--sh-1); }
.vc-b { padding:11px 12px 13px; display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.vc-t { display:flex; align-items:baseline; gap:6px; min-width:0; font-size:15.5px; font-weight:800; line-height:1.28; letter-spacing:-.3px; min-height:calc(1.28em * 2); }
.vc-t .tt { flex:1; min-width:0; overflow:hidden; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.vc-t .stk { flex:0 0 auto; font-size:11px; font-weight:650; color:var(--ink-4); letter-spacing:.2px; font-variant-numeric:tabular-nums; }
.vc-tr { min-height:17px; margin-top:2px; font-size:13px; font-weight:650; color:var(--ink-2); line-height:1.3;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.vc-km { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; margin-top:4px; min-height:18px; font-size:13px; font-weight:750; color:var(--ink);
  letter-spacing:-.1px; font-variant-numeric:tabular-nums; line-height:1.25; white-space:nowrap; overflow:hidden; }
.vc-km .km { flex:0 0 auto; }
.vc-km .lo { flex:0 0 auto; display:inline-flex; align-items:center; min-height:18px; padding:0 7px; background:var(--info-bg); color:var(--info);
  border-radius:999px; font-size:10px; font-weight:800; line-height:1; letter-spacing:.3px; text-transform:uppercase; white-space:nowrap; }
.vc-tr:empty, .vc-km:empty { min-height:0; margin-top:0; padding-top:0; padding-bottom:0; }
.vc-tags { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start; align-content:flex-start; min-height:0; margin:6px 0 0; }
.vc-tags:empty { margin:0; }
.vc-tag { min-height:22px; padding:2px 8px; font-size:10.5px; }
.vc-p { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; margin-top:8px; font-size:19px; font-weight:850; color:var(--ink);
  letter-spacing:-.5px; font-variant-numeric:tabular-nums; line-height:1.15; }
.vc-p .was { color:var(--ink-3); font-weight:600; font-size:13.5px; margin-right:2px; letter-spacing:0; }
/* .vc-p .q · .vc-f span · .vc-fin .taxnote 은 browse.html 에 (줄바꿈 규칙을 테스트가 그 원문에서 읽는다) */
.vc-p .q.pd-fold { display:block; width:100%; color:var(--ok); font-weight:650; }
.reb-line { font-size:11.5px; font-weight:700; color:#0d6b3f; margin-top:2px; }
.reb-line:empty { display:none; }
.reb-line b { font-weight:850; }
.reb-line .reb-net { font-size:13px; }
.reb-line span { color:var(--ink-3); font-weight:600; font-size:10.5px; }
.vc-pchk { color:var(--warn); font-size:11.5px; font-weight:650; margin-top:2px; }
.vc-fin { font-size:12.5px; font-weight:700; color:var(--ink-2); margin-top:5px; font-variant-numeric:tabular-nums; }
.vc-fin span:not(.taxnote) { font-weight:500; color:var(--ink-3); font-size:11px; }
.vc-pay { display:flex; flex-direction:column; align-items:flex-start; gap:1px; margin-top:5px; font-size:12.5px; font-weight:650; color:var(--ink-2);
  font-variant-numeric:tabular-nums; }
.vc-pay span { white-space:normal; max-width:100%; }
.vc-f { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-start; align-content:flex-start; padding-top:8px; }
.vc-f:empty { padding:0; }
.contact { margin:16px var(--sr) 0 var(--sl); }
@media (min-width:640px) {
  .vc-t { font-size:17px; }
  .vc-tr { font-size:13.5px; }
  .vc-km { min-height:20px; }
  .vc-p { font-size:21px; }
  .vc-b { padding:13px 14px 15px; }
  .vc-pay { flex-direction:row; flex-wrap:wrap; column-gap:6px; }
  .vc-pay span + span:not(.taxnote)::before { content:"\00B7  "; color:var(--ink-3); }
}
@media (min-width:1024px) {
  .chips { flex-wrap:wrap; overflow-x:visible; row-gap:7px; }
  .searchf { max-width:640px; }
  .contact { max-width:520px; }
}
@media (min-width:1180px) {
  .head { padding-top:26px; }
  .head h1 { font-size:28px; }
  .head .sub { font-size:14px; }
}
@media (hover:hover) and (pointer:fine) {
  .vc { transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
  .vc:hover { box-shadow:0 0 0 1px #d9dde3, var(--sh-2); transform:translateY(-2px); }
  .tgl:hover { border-color:var(--ink-4); color:var(--ink-2); }
  .searchf .sf-in:hover { border-color:var(--ink-4); }
  .searchf button:hover { background:#000; }
}

/* ---------- 상세 공용: 갤러리 ---------- */
.gal { position:relative; background:var(--surface-2); margin:0; overflow:hidden; }
/* 사진 태그의 width/height 힌트(레이아웃 흔들림 방지)는 칸 비율이 이긴다 — height:auto 가 없으면 768px 짜리 상자가 된다 */
.gal > img { width:100%; height:auto; display:block; }
.gal-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gal-track::-webkit-scrollbar { display:none; }
/* 사진 칸 크기(flex 100% · 4:3 · contain)는 detail.html / new_detail.html 에 — 테스트가 그 원문을 읽는다 */
.gal-track img { cursor:zoom-in; }
.gal-none { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:13px; font-weight:600; }
.gal-arr { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border:none; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink); box-shadow:var(--sh-1); display:none; align-items:center; justify-content:center;
  cursor:pointer; font-size:0; }
.gal-arr::before { content:""; width:9px; height:9px; border-left:2.2px solid currentColor; border-bottom:2.2px solid currentColor; }
.gal-arr.prev { left:12px; } .gal-arr.prev::before { transform:translateX(2px) rotate(45deg); }
.gal-arr.next { right:12px; } .gal-arr.next::before { transform:translateX(-2px) rotate(-135deg); }
.gal-n { position:absolute; right:calc(12px + env(safe-area-inset-right)); bottom:12px; background:rgba(17,20,24,.72); color:#fff; font-size:11.5px;
  font-weight:750; padding:4px 10px; border-radius:999px; font-variant-numeric:tabular-nums; }
.gal-back { position:absolute; left:calc(12px + env(safe-area-inset-left)); top:12px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 14px 0 10px; background:rgba(255,255,255,.94); color:var(--ink); font-size:13px; font-weight:800; border-radius:999px;
  box-shadow:var(--sh-1); border:0; }
.gal-back::before { content:""; width:8px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:2px; }
.thumbs { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px var(--sr) 2px var(--sl); scrollbar-width:none; }
.thumbs::-webkit-scrollbar { display:none; }
.thumbs img { width:64px; height:48px; object-fit:cover; border-radius:8px; flex:0 0 auto; opacity:.55; cursor:pointer; border:2px solid transparent; }
.thumbs img.on { opacity:1; border-color:var(--ink); }
@media (min-width:760px) {
  .gal { border-radius:var(--r); margin:16px auto 0; max-width:760px; border:1px solid var(--line); }
  .gal-track img, .gal-none { aspect-ratio:4/3; }
  .thumbs { max-width:760px; margin-left:auto; margin-right:auto; }
}
@media (hover:hover) and (pointer:fine) {
  .gal-arr { display:flex; }
  .gal-arr:hover { background:#fff; }
  .thumbs img:hover { opacity:.85; }
  .gal-back:hover { background:#fff; }
}

/* ---------- 상세 공용: 제목 · 가격 카드 · 납입 · 다운페이 ---------- */
.body { padding:0 var(--sr) 0 var(--sl); }
.trow { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:16px; }
.eyebrow { font-size:12px; font-weight:700; color:var(--ink-3); letter-spacing:.2px; margin-top:16px; }
.title { margin:2px 0 0; font-size:24px; font-weight:850; letter-spacing:-.5px; line-height:1.15; word-break:keep-all; }
.trim { font-size:14.5px; color:var(--ink-2); font-weight:650; margin-top:3px; line-height:1.4; }
.trim .stk { color:var(--ink-4); font-weight:600; }
.tags, .badges { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; align-content:flex-start; margin-top:10px; }
.pricebox { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-top:14px; }
.pricebox .p { font-size:32px; font-weight:850; color:var(--ink); letter-spacing:-1.2px; line-height:1.05; font-variant-numeric:tabular-nums; }
.pricebox .p s { color:var(--ink-3); font-size:17px; font-weight:600; margin-right:6px; letter-spacing:0; }
.pricebox .sub { font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:4px; }
.pricebox .km { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-2);
  font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.4px; line-height:1.2; font-variant-numeric:tabular-nums; }
.pricebox .km .badge { font-size:11px; }
.pricebox .fin { font-size:15px; color:var(--ink); font-weight:650; margin-top:10px; line-height:1.45; }
.pricebox .fin b { color:var(--ink); font-size:18px; font-weight:850; }
.pricebox .fin-sub { font-size:11.5px; color:var(--ink-3); font-weight:500; }
.pricebox .fin-promo { font-size:11.5px; color:var(--ink-3); font-weight:500; margin-top:4px; }
.pricebox .note { font-size:13px; color:var(--ink-2); font-weight:650; margin-top:6px; }
.pricebox .incl { display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:var(--ok-bg); color:var(--ok); border-radius:999px;
  padding:5px 10px; font-size:12.5px; font-weight:750; line-height:1.35; }
.pricebox .pchk { color:var(--warn); font-size:12.5px; font-weight:650; margin-top:4px; }
.payhead { display:flex; margin-top:12px; }
.paytog { display:inline-flex; background:var(--surface-2); border-radius:10px; padding:3px; margin-top:10px; }
.paytog button { min-height:44px; padding:0 14px; border:0; border-radius:8px; background:none; font:inherit; font-size:12.5px; font-weight:800;
  color:var(--ink-3); cursor:pointer; -webkit-appearance:none; }
.paytog button.on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(16,20,28,.12); }
.pay { display:flex; gap:10px; margin-top:8px; }
.pay .pp { flex:1; min-width:0; background:var(--surface); border-radius:var(--r-s); padding:10px 12px; }
.pay .pp .l { font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.4px; text-transform:uppercase; }
.pay .pp .v { font-size:18px; font-weight:850; color:var(--ink); font-variant-numeric:tabular-nums; }
.pay .pp .v .pu { font-size:11px; font-weight:600; color:var(--ink-3); }
.pay .pp .d { font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.4; }
.pay .pp .pdisc { font-size:11px; font-weight:750; color:#12805c; margin-top:2px; }
.demo-note { font-size:13px; font-weight:750; color:var(--warn); margin-top:10px; }
.dp { display:block; margin-top:10px; background:var(--surface); border-radius:var(--r-s); padding:12px; }
.dp-h { font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.4px; text-transform:uppercase; margin-bottom:8px; }
.dp-row { display:flex; gap:6px; }
.dp-in { flex:1 1 auto; display:flex; align-items:center; gap:4px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:10px; padding:0 10px; }
.dp-cur { flex:0 0 auto; font-size:15px; font-weight:800; color:var(--ink-3); }
.dp-in input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; min-height:44px; font-size:17px; font-weight:800;
  font-family:inherit; color:var(--ink); font-variant-numeric:tabular-nums; -webkit-appearance:none; }
.dp-go { flex:0 0 auto; min-height:44px; padding:0 16px; border:0; border-radius:10px; background:var(--ink); color:#fff; font-family:inherit;
  font-size:14px; font-weight:800; cursor:pointer; -webkit-appearance:none; }
.dp-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:flex-start; align-content:flex-start; }
.dp-q { display:inline-flex; align-items:center; min-height:44px; padding:0 13px; background:#fff; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-2); font-size:12.5px; font-weight:750; text-decoration:none; font-variant-numeric:tabular-nums; }
.dp-q.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.dp-q.clear { color:var(--ink-3); font-weight:650; }
.dp-out { margin-top:10px; display:grid; gap:5px; }
.dp-line { display:flex; align-items:baseline; gap:8px; }
.dp-l { flex:0 0 auto; min-width:52px; font-size:11.5px; font-weight:800; color:var(--ink-3); }
.dp-was { font-size:13px; font-weight:650; color:var(--ink-3); text-decoration:line-through; font-variant-numeric:tabular-nums; }
.dp-now { margin-left:auto; font-size:19px; font-weight:850; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.4px; }
.dp-now small { font-size:11px; font-weight:650; color:var(--ink-3); margin-left:3px; letter-spacing:0; }
.dp-sub { font-size:11px; color:var(--ink-3); margin:-2px 0 3px; line-height:1.4; }
.dp-note { font-size:11.5px; color:var(--ink-3); margin-top:8px; line-height:1.45; }
.pd-how { margin-top:10px; }
.pd-how > summary { list-style:none; cursor:pointer; display:flex; align-items:center; min-height:44px; font-size:13px; font-weight:750; color:var(--ink-2); }
.pd-how > summary::-webkit-details-marker { display:none; }
.pd-how > summary::before { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
  margin-right:10px; transition:transform .15s ease; }
.pd-how[open] > summary::before { transform:rotate(-135deg); }
.reb-line { font-size:13px; font-weight:700; color:#0d6b3f; margin-top:4px; }
.pricebox .reb-line .reb-net { font-size:17px; }

/* ---------- 상세 공용: 사양 표 · 목록 · 칩 ---------- */
.kv { display:grid; grid-template-columns:minmax(96px, auto) minmax(0,1fr); gap:0 16px; margin:0; font-size:13.5px; }
.kv dt { color:var(--ink-3); font-weight:600; white-space:nowrap; padding:8px 0; border-bottom:1px solid var(--line-2); }
.kv dd { margin:0; font-weight:700; overflow-wrap:anywhere; padding:8px 0; border-bottom:1px solid var(--line-2); }
.kv dt:nth-last-of-type(1), .kv dd:last-of-type { border-bottom:0; }
.kv-note { font-size:11.5px; color:var(--ink-3); margin-top:8px; line-height:1.5; }
@media (min-width:640px) {
  .kv { grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr); column-gap:20px; }
}
.list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.list li { display:flex; gap:8px; font-size:14px; font-weight:650; line-height:1.4; }
.list li .mk { color:var(--ok); font-weight:800; flex:0 0 auto; }
.list li.warn .mk { color:var(--warn); }
.list li.muted { color:var(--ink-2); }
.list li.muted .mk { color:var(--ink-3); }
.base-l { display:flex; flex-wrap:wrap; gap:5px; align-items:flex-start; align-content:flex-start; }
.base-l span { display:inline-flex; align-items:center; min-height:24px; padding:2px 9px; font-size:11.5px; font-weight:650; color:var(--ink-3);
  background:var(--surface); border-radius:999px; line-height:1.35; max-width:100%; white-space:normal; word-break:keep-all; }
.cov { display:flex; flex-direction:column; gap:0; }
.cov-row { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.cov-row:last-of-type { border-bottom:0; }
.cov-nm { flex:1; min-width:0; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.cov-nm span { display:block; font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:2px; }
.cov-v { flex:0 0 auto; text-align:right; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cov-v em { display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); font-weight:650; }
.cov-v.on { color:var(--ok); }
.cov-note { font-size:11.5px; color:var(--ink-3); margin-top:9px; line-height:1.55; }
.acc { display:flex; flex-direction:column; gap:0; }
.acc-row { display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14px; }
.acc-row:last-of-type { border-bottom:0; }
.acc-row .nm { flex:1; font-weight:650; min-width:0; overflow-wrap:anywhere; }
.acc-row .am { font-weight:750; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.acc-total { display:flex; align-items:baseline; gap:10px; margin-top:8px; padding-top:10px; border-top:2px solid var(--ink); font-size:14.5px; font-weight:850; }
.acc-total .am { margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cfx-note { font-size:11.5px; color:var(--ink-3); margin-top:8px; line-height:1.5; }
.mtl { position:relative; }
.mtl-row { position:relative; display:flex; gap:12px; padding:9px 0 9px 20px; }
.mtl-row::before { content:""; position:absolute; left:5px; top:0; bottom:0; width:2px; background:var(--line); }
.mtl-row:first-child::before { top:15px; }
.mtl-row:last-child::before { bottom:auto; height:15px; }
.mtl-row::after { content:""; position:absolute; left:1.5px; top:13px; width:6px; height:6px; border-radius:50%; background:#fff; border:2.5px solid var(--ink-3); }
.mtl-row:first-child::after { border-color:var(--red); }
.mtl-when { flex:0 0 96px; min-width:0; }
.mtl-when b { display:block; font-size:13.5px; font-weight:800; letter-spacing:-.2px; font-variant-numeric:tabular-nums; }
.mtl-when span { display:block; font-size:11px; color:var(--ink-3); font-weight:650; margin-top:1px; }
.mtl-items { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.mtl-it { display:flex; align-items:baseline; gap:8px; font-size:13.5px; font-weight:650; line-height:1.35; }
.mtl-it .nm { min-width:0; overflow-wrap:anywhere; }
.mtl-note { font-size:11.5px; color:var(--ink-3); margin-top:8px; line-height:1.5; }
/* 점검·CARFAX 신뢰 상자 — 어두운 상자 대신 밝은 면 (흰 바탕에서 한 톤) */
.trust { background:var(--surface); border-radius:var(--r); padding:16px; margin-top:12px; }
.trust .t { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; letter-spacing:-.2px; }
.trust .t svg { width:18px; height:18px; color:var(--ok); flex:0 0 auto; }
.trust .d { font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.55; }
.trust .d a { color:var(--ink); font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.ask-btns { display:grid; gap:8px; margin-top:12px; }
.ask-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:10px 14px; border-radius:var(--r-s);
  background:#fff; border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:750; line-height:1.3; text-decoration:none; }
.ask-btn .ar { flex:0 0 auto; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); opacity:.6; }
.backlink { display:block; text-align:center; margin-top:12px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  font-size:14px; font-weight:750; color:var(--ink-2); }
@media (hover:hover) and (pointer:fine) {
  .ask-btn:hover, .backlink:hover { background:var(--surface); border-color:var(--ink-4); color:var(--ink); }
  .dp-go:hover { background:#000; }
  .dp-q:hover { border-color:var(--ink-4); }
  .dp-q.on:hover { background:#000; border-color:#000; }
}

/* ---------- 신차 상세 (new_detail.html) ---------- */
.wrap2 { padding:0 var(--sr) 84px var(--sl); max-width:760px; margin:0 auto; }
.toolrow { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }
.nd-t { font-size:24px; font-weight:850; letter-spacing:-.5px; margin:12px 0 0; line-height:1.15; word-break:keep-all; }
.nd-t small { display:block; font-size:14.5px; font-weight:650; color:var(--ink-2); letter-spacing:-.1px; margin-top:4px; }
.nd-t .stk { display:block; margin-top:3px; font-size:12px; font-weight:650; color:var(--ink-4); white-space:nowrap; letter-spacing:0; }
.sec-hd2 { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 8px; margin:0 0 9px; }
.sec .sec-hd2 h2 { min-width:0; margin:0; }
.cmp-lnk { position:relative; display:inline-flex; align-items:center; min-height:32px; margin:-4px 0 -5px; font-size:12px; font-weight:800;
  color:var(--ink); background:var(--surface); padding:0 14px; border-radius:999px; white-space:nowrap; }
.cmp-lnk::after { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
.sec-note { display:block; font-weight:600; color:var(--ink-3); font-size:12px; margin:-4px 0 10px; line-height:1.45; }
.arr-line { margin:10px 0 2px; padding:10px 12px; border-radius:var(--r-s); background:var(--info-bg); color:var(--ink-2); font-size:13.5px; line-height:1.5; }
.arr-line b { color:var(--info); font-weight:800; margin-right:4px; }
.arr-line .arr-note { display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.pb-parts { font-size:12.5px; font-weight:700; color:var(--ink-2); margin-top:4px; font-variant-numeric:tabular-nums; }
.pb-incl { font-size:12px; font-weight:600; color:var(--ink-3); margin-top:5px; line-height:1.45; }
.col-hd { display:flex; align-items:baseline; gap:8px; margin:0 0 9px; }
.col-hd h2 { margin:0; }
.col-hd .n { margin-left:auto; font-size:12px; font-weight:750; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.col-row { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:600px) { .col-row { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1080px) { .col-row { grid-template-columns:1fr; } }
.col-c { display:flex; align-items:center; gap:11px; min-height:52px; min-width:0; padding:7px 12px 7px 8px; background:var(--surface);
  border:1.5px solid transparent; border-radius:var(--r-s); color:var(--ink); text-decoration:none; }
/* .col-c img, .col-c .col-ph (같은 크기 빈 칸) 은 new_detail.html 에 — 테스트가 그 원문을 읽는다 */
.col-c .cn { flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700; line-height:1.3; word-break:keep-all; }
.col-c .cq { flex:0 0 auto; font-size:11.5px; font-weight:750; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.col-c.on { border-color:var(--ink); background:#fff; }
.col-c.on .cq { color:var(--ink); }
.col-c .cn .col-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:7px; vertical-align:-1px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.col-c .cq .cf { display:block; color:var(--ink); font-weight:800; font-size:12.5px; }
.col-c:active { background:var(--surface-2); }
.col-note { font-size:11.5px; color:var(--ink-3); margin-top:9px; line-height:1.5; }
.col-one { font-size:13.5px; font-weight:650; color:var(--ink-2); line-height:1.5; }
.col-one b { font-weight:800; color:var(--ink); }
.ot-list { display:grid; gap:8px; }
.ot-row { display:block; min-height:56px; padding:10px 12px 11px; background:var(--surface); border-radius:var(--r-s); color:var(--ink); text-decoration:none; }
.ot-row:active { background:var(--surface-2); }
.ot-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ot-t { min-width:0; }
.ot-t b { display:block; font-size:14px; font-weight:800; line-height:1.25; word-break:keep-all; }
.ot-t small { display:block; font-size:11.5px; color:var(--ink-3); font-weight:650; margin-top:1px; }
.ot-from { flex:0 0 auto; font-size:14px; font-weight:850; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ot-pay { margin-top:5px; font-size:11.5px; color:var(--ink-3); font-weight:650; line-height:1.4; font-variant-numeric:tabular-nums; }
.ot-pay b { font-size:12.5px; font-weight:800; color:var(--ink); }
.feat-l { margin:0; padding:0; list-style:none; }
.feat-l li { display:flex; gap:9px; align-items:baseline; padding:5px 0; font-size:14.5px; font-weight:700; }
.feat-l .mk { color:var(--ok); font-weight:800; }
.feat-l .ft { min-width:0; }
.loaded-why { font-size:11.5px; font-weight:700; color:var(--red); margin:-4px 0 8px; }
.feat-l .only { margin-left:7px; font-size:10.5px; font-weight:800; letter-spacing:.3px; color:var(--red); background:rgba(195,0,47,.09); padding:2px 7px;
  border-radius:999px; vertical-align:2px; white-space:nowrap; }
.acc-l { margin:0; padding-left:2px; list-style:none; font-size:14px; }
.acc-l li { display:flex; justify-content:space-between; padding:3px 0; }
.parts { display:grid; grid-template-columns:1fr; gap:7px; }
@media (min-width:600px) { .parts { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1080px) { .parts { grid-template-columns:1fr; } }
.part { display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid transparent; border-radius:var(--r-s); padding:9px 13px;
  cursor:pointer; min-width:0; min-height:48px; }
.part.on { border-color:var(--ink); background:#fff; }
.part input { flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--ink); }
.part svg { flex:0 0 auto; width:20px; height:20px; color:#4b5563; }
.part em { flex:1 1 auto; min-width:0; font-style:normal; font-size:13.5px; font-weight:700; line-height:1.3; word-break:keep-all; }
.part b { flex:0 0 auto; font-size:13.5px; font-weight:750; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.part.on b { color:var(--ink); font-weight:800; }
.parts-tally { margin-top:11px; padding-top:10px; border-top:1px solid var(--line); }
.tl-sum { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; font-weight:800; }
.tl-sum b { font-size:17px; font-weight:850; font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.tl-note { font-size:11.5px; color:var(--ink-3); margin-top:4px; line-height:1.5; }
.tl-none { font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.pricebox.calc, .parts-tally.calc { opacity:.4; transition:opacity .12s; }
.pricebox.calc { position:relative; }
.catalogue-variant select { width:100%; max-width:100%; margin:8px 0; padding:10px; border:1px solid var(--line); border-radius:10px; font:inherit; }
@media (hover:hover) and (pointer:fine) {
  .cmp-lnk:hover { background:var(--surface-2); }
  .part:hover { border-color:var(--ink-4); }
  .part.on:hover { border-color:var(--ink); }
}

/* ---------- 신차 재고 (new_browse.html) ---------- */
.ns { padding-bottom:8px; }
.ns-head { padding:14px var(--sr) 4px var(--sl); }
.ns-head h1 { margin:10px 0 0; font-size:22px; font-weight:850; letter-spacing:-.4px; line-height:1.2; word-break:keep-all; }
.ns-head .sub { margin:4px 0 0; font-size:13px; color:var(--ink-3); }
.ns-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ns-count b { color:var(--ink); font-weight:800; }
.ns-search { display:flex; gap:8px; padding:8px var(--sr) 2px var(--sl); }
.ns-search input { flex:1; min-width:0; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font:inherit;
  font-size:16px; color:var(--ink); -webkit-appearance:none; appearance:none; }
.ns-search input::placeholder { color:var(--ink-4); }
.ns-search button { flex:0 0 auto; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:inherit;
  font-size:13.5px; font-weight:800; cursor:pointer; }
.ns-row { display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:10px var(--sr) 4px var(--sl); }
.ns-row::-webkit-scrollbar { display:none; }
.ns-models { background:var(--bg); padding-bottom:8px; }
.chip .sw { width:14px; height:14px; border-radius:50%; margin-right:7px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.chip.on .sw { box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }
.ns-fg { padding:0 var(--sr) 0 var(--sl); }
.ns-fg + .ns-fg { margin-top:6px; }
.ns-fl { font-size:11.5px; font-weight:800; letter-spacing:.3px; color:var(--ink-3); text-transform:uppercase; margin:8px 0 5px; }
.ns-fc { display:flex; flex-wrap:wrap; gap:6px; }
.ns-fc .chip { min-height:44px; min-width:44px; justify-content:center; padding:6px 13px; font-size:13px; }
.ns-more { margin:4px var(--sr) 0 var(--sl); background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.ns-more > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:48px; padding:0 14px; font-size:14px; font-weight:800; }
.ns-more > summary::-webkit-details-marker { display:none; }
.ns-more > summary .ns-chev { margin-left:auto; width:16px; height:16px; color:var(--ink-3); transition:transform .15s ease; }
.ns-more[open] > summary .ns-chev { transform:rotate(180deg); }
.ns-more .ns-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:var(--ink); color:#fff; font-size:12px; font-weight:800; }
.ns-more .ns-fg { padding:0 12px; }
.ns-more .ns-fbody { padding-bottom:12px; }
.ns-bar { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:10px var(--sr) 2px var(--sl); }
.ns-bar .lbl { font-size:12.5px; color:var(--ink-3); font-weight:650; }
.ns-pick { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 6px 0 12px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:12.5px; font-weight:750; }
.ns-pick .x { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.18);
  font-size:13px; line-height:1; }
.ns-clear { font-size:13px; font-weight:800; color:var(--red); min-height:44px; display:inline-flex; align-items:center; }
.ns-sort { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:6px var(--sr) 2px var(--sl); }
.ns-sort::-webkit-scrollbar { display:none; }
.ns-sort .chip { min-height:44px; padding:5px 13px; font-size:12.5px; }
.ns-fees { margin:10px var(--sr) 0 var(--sl); font-size:12px; color:var(--ink-3); line-height:1.45; }
.ns-fees .pd-vsa { margin-top:2px; }
.ns-fees b { color:var(--ink-2); font-weight:750; }
.ns-grp { margin:14px var(--sr) 0 var(--sl); background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.ns-gh { padding:14px 14px 12px; border-bottom:1px solid var(--line); }
.ns-gy { font-size:12px; font-weight:750; color:var(--ink-3); letter-spacing:.2px; }
.ns-gt { margin:2px 0 0; font-size:19px; font-weight:850; letter-spacing:-.35px; line-height:1.2; word-break:keep-all; }
.ns-pkg { display:inline-block; vertical-align:3px; padding:1px 9px; border:1.5px solid var(--line); border-radius:999px; font-size:12px; font-weight:800;
  letter-spacing:0; color:var(--ink-2); white-space:nowrap; }
.ns-gm { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin-top:6px; font-size:13px; color:var(--ink-2); }
.ns-gm .from { font-size:16px; font-weight:850; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.ns-gm .cnt { color:var(--ink-3); font-weight:650; }
.ns-gm .cnt b { color:var(--ink); }
.ns-gfee { margin-top:3px; font-size:12px; font-weight:650; color:var(--ink-2); line-height:1.4; }
.ns-gfold { margin-top:4px; font-size:12px; font-weight:650; color:var(--ok); line-height:1.4; }
.ns-gpay { margin-top:6px; font-size:13px; color:var(--ink-2); line-height:1.4; }
.ns-gpay .pay { display:inline; margin:0; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.ns-gpay .u { font-weight:650; color:var(--ink-3); font-size:12px; }
.ns-gpay small { display:block; font-size:11.5px; font-weight:600; color:var(--ink-3); line-height:1.4; margin-top:1px; }
.ns-dots { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.ns-dots i { width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.ns-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); }
.ns-card { display:flex; flex-direction:column; background:#fff; min-width:0; }
.ns-card:active { background:var(--surface); }
.ns-ph { position:relative; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden; }
.ns-ph img { width:100%; height:100%; object-fit:contain; }
.ns-noph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--ink-3); }
.ns-flag { position:absolute; left:8px; top:8px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--info); font-size:11px;
  font-weight:800; box-shadow:var(--sh-1); }
.ns-cb { padding:10px 10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ns-col { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink-2); min-width:0; }
.ns-col i { width:12px; height:12px; border-radius:50%; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.ns-col .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ns-col .stk { margin-left:auto; flex:0 0 auto; font-size:11px; color:var(--ink-4); font-weight:650; font-variant-numeric:tabular-nums; }
.ns-price { margin-top:4px; font-size:18px; font-weight:850; color:var(--ink); letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.ns-fee { font-size:11.5px; font-weight:650; color:var(--ink-2); line-height:1.4; }
.ns-fold { font-size:11.5px; font-weight:650; color:var(--ok); line-height:1.4; }
.ns-pay { margin-top:4px; font-size:14px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.35; }
.ns-pay .u { font-size:11.5px; font-weight:650; color:var(--ink-3); }
.ns-pay small { display:block; font-size:11.5px; font-weight:600; color:var(--ink-2); line-height:1.4; }
.ns-pay.hide { font-weight:650; color:var(--ink-2); font-size:11.5px; }
.ns-card .pd-evap { font-size:11.5px; margin-top:1px; line-height:1.4; }
.ns-avail { margin-top:6px; font-size:11.5px; font-weight:750; color:var(--ok); line-height:1.4; }
.ns-pchk { font-size:11.5px; font-weight:650; color:var(--warn); line-height:1.4; }
.ns-avail.arr { color:var(--info); }
.ns-empty { margin:16px var(--sr) 0 var(--sl); padding:30px 16px; border-radius:var(--r); background:var(--surface); text-align:center; color:var(--ink-3);
  font-size:14px; font-weight:650; word-break:keep-all; }
.ns-empty a { display:inline-flex; margin-top:10px; color:var(--red); font-weight:800; }
.ns .contact { margin:16px var(--sr) 0 var(--sl); }
.ns-side { display:none; }
@media (min-width:640px) {
  .ns-cards { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ns-gt { font-size:21px; }
}
@media (min-width:1024px) {
  .wrap.ns { max-width:1320px; }
  .ns-body { display:grid; grid-template-columns:268px minmax(0,1fr); gap:0 20px; padding:0 var(--sr) 0 var(--sl); }
  .ns-side { display:block; position:sticky; top:12px; align-self:start; max-height:calc(100vh - 24px); overflow-y:auto; background:#fff;
    border:1px solid var(--line); border-radius:var(--r); padding:4px 0 14px; margin-top:12px; }
  .ns-side .ns-fg { padding:0 14px; }
  .ns-more { display:none; }
  .ns-main .ns-bar, .ns-main .ns-sort, .ns-main .ns-fees { padding-left:0; padding-right:0; margin-left:0; margin-right:0; }
  .ns-main .ns-grp, .ns-main .ns-empty { margin-left:0; margin-right:0; }
  .ns-row { flex-wrap:wrap; overflow-x:visible; row-gap:7px; }
  .ns-cards { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .ns-head h1 { font-size:28px; }
  .ns-search { max-width:620px; }
}
@media (min-width:1440px) { .ns-cards { grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (hover:hover) and (pointer:fine) {
  .ns-card { transition:background-color .12s ease; }
  .ns-card:hover { background:var(--surface); }
}

/* ---------- 느린 폰을 위해: 애니메이션 최소, 사진은 lazy ---------- */
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}