/* ============================================================
   차량 구독 플랫폼 - 공통 스타일 (v2 - 레퍼런스 매칭)
   ------------------------------------------------------------
   - 차분한 회색 배경 + 흰색 카드
   - 레드 액센트 (활성 상태)
   - 콤팩트한 4열 카드 그리드
   - 카드 하단에 "상담문의" CTA 버튼
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* 배경 */
  --color-bg: #f5f6f8;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f0f2f5;
  --color-bg-hover: #ebedf0;

  /* 텍스트 */
  --color-ink: #1f1f1f;
  --color-ink-muted: #6b7280;
  --color-ink-soft: #9ca3af;

  /* 보더 */
  --color-border: #e5e7eb;
  --color-border-soft: #f0f2f5;
  --color-border-strong: #d1d5db;

  /* 액센트 (레드) */
  --color-accent: #e03131;
  --color-accent-hover: #c92a2a;
  --color-accent-soft: #fef2f2;
  --color-accent-border: #fecaca;

  /* 리스 유형 색상 */
  --color-return: #4263eb;
  --color-return-soft: #eef2ff;
  --color-acquisition: #e03131;
  --color-acquisition-soft: #fef2f2;

  /* 타이포 */
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, sans-serif;

  /* 간격 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;

  /* 반경 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 100px;

  /* 컨테이너 */
  --container-max: 1280px;
  --container-padding: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

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

/* ─── 헤더 ──────────────────────────────────────────── */
.site-header {
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.site-logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-logo__sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-muted);
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--color-border);
}

.site-nav__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-muted);
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: all 0.15s ease;
}

.site-nav__link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ─── 페이지 헤더 (타이틀 + 리스유형 토글) ───────────── */
.page-head {
  padding: var(--space-xl) 0 var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}

.lease-toggle {
  display: inline-flex;
  gap: var(--space-sm);
}

.lease-toggle__btn {
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-muted);
  transition: all 0.15s ease;
}

.lease-toggle__btn:hover {
  color: var(--color-ink);
  border-color: var(--color-ink-soft);
}

.lease-toggle__btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ─── 필터 카드 ──────────────────────────────────────── */
.filter-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
}

.class-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-soft);
}

.class-btn {
  border: 1.5px solid transparent;
  background: transparent;
  padding: 8px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-muted);
  min-width: 64px;
  transition: all 0.15s ease;
}

.class-btn:hover { color: var(--color-ink); }

.class-btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.brand-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  padding-top: var(--space-lg);
}

.brand-chip {
  background: transparent;
  border: none;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 64px;
}

.brand-chip__mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.brand-chip__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-muted);
  transition: color 0.15s ease;
}

.brand-chip:hover .brand-chip__mark {
  background: var(--color-bg-hover);
}

.brand-chip[aria-pressed="true"] .brand-chip__mark {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.brand-chip[aria-pressed="true"] .brand-chip__name {
  color: var(--color-accent);
  font-weight: 600;
}

/* ─── 결과 메타 ──────────────────────────────────────── */
.result-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-lg);
  gap: var(--space-md);
}

.result-meta__count {
  font-size: 14px;
  color: var(--color-ink-muted);
}

.result-meta__count strong {
  color: var(--color-accent);
  font-weight: 700;
}

.filter-reset {
  font-size: 13px;
  color: var(--color-ink-muted);
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.filter-reset:hover {
  color: var(--color-accent);
  background: var(--color-bg-subtle);
}

/* ─── 카드 그리드 (4열) ─────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding-bottom: var(--space-3xl);
}

/* ─── 차량 카드 (콤팩트) ────────────────────────────── */
.car-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.car-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

/* 이미지 영역 (사진 + placeholder 동시 처리) */
.car-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
  overflow: hidden;
}

/* placeholder (이미지가 없거나 로딩 실패 시 표시) */
.car-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 16px;
  color: rgba(255, 255, 255, 0.95);
  z-index: 1;
}

.car-card__placeholder-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}

.car-card__placeholder-model {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* 실제 사진 (placeholder 위에 덮어쓰기) */
.car-card__media img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg-subtle);
}

/* 이미지 로딩 실패 시 숨김 → placeholder 노출 */
.car-card__media img.failed {
  display: none;
}

/* 리스 유형 배지 */
.lease-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--color-bg-elevated);
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lease-badge--return { color: var(--color-return); }
.lease-badge--acquisition { color: var(--color-acquisition); }

/* 카드 본문 (콤팩트) */
.car-card__body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.car-card__brand-line {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.car-card__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.3;
  /* 차종명 길면 한 줄로 자르기 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.car-card__tag {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-bottom: 8px;
}

.car-card__specs {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--color-ink-muted);
  margin-bottom: 10px;
}

.car-card__specs span:not(:last-child)::after {
  content: '·';
  margin-left: 8px;
  color: var(--color-ink-soft);
}

.car-card__price-row {
  padding-top: 10px;
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.car-card__price-label {
  font-size: 11px;
  color: var(--color-ink-muted);
  font-weight: 500;
}

.car-card__price {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.car-card__price-unit {
  font-size: 11px;
  color: var(--color-ink-muted);
  margin-left: 3px;
  font-weight: 500;
}

/* CTA 버튼 (레퍼런스의 "견적내기" 같은 형태) */
.car-card__cta {
  margin-top: auto;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.car-card:hover .car-card__cta {
  background: var(--color-accent);
  color: #ffffff;
}

/* ─── 빈 결과 ────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-ink-muted);
}

.empty-state__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
}

.empty-state__text { font-size: 14px; margin: 0; }

/* ─── 푸터 ──────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
  font-size: 12px;
  color: var(--color-ink-muted);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.site-footer__credits {
  font-size: 11px;
  color: var(--color-ink-soft);
}

/* ─── 모바일 ─────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --container-padding: 16px; }

  .site-header__inner { padding: 14px 0; }
  .site-logo { font-size: 17px; }
  .site-logo__sub { display: none; }

  .page-head { padding: var(--space-lg) 0 var(--space-md); gap: var(--space-md); }
  .page-title { font-size: 22px; }
  .lease-toggle__btn { padding: 7px 16px; font-size: 13px; }

  .filter-card { padding: var(--space-md) var(--space-md); }
  .class-row { gap: 4px; padding-bottom: var(--space-md); }
  .class-btn { padding: 6px 12px; font-size: 13px; min-width: auto; }

  .brand-row { gap: var(--space-md); padding-top: var(--space-md); }
  .brand-chip__mark { width: 44px; height: 44px; font-size: 13px; }
  .brand-chip__name { font-size: 11px; }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .car-card__name { font-size: 14px; }
  .car-card__body { padding: 12px 14px 14px; }
}

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

/* ─── 등장 애니메이션 ───────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.car-card { animation: fadeUp 0.3s ease-out backwards; }
.car-card:nth-child(1) { animation-delay: 0.03s; }
.car-card:nth-child(2) { animation-delay: 0.06s; }
.car-card:nth-child(3) { animation-delay: 0.09s; }
.car-card:nth-child(4) { animation-delay: 0.12s; }
.car-card:nth-child(5) { animation-delay: 0.15s; }
.car-card:nth-child(6) { animation-delay: 0.18s; }
.car-card:nth-child(7) { animation-delay: 0.21s; }
.car-card:nth-child(8) { animation-delay: 0.24s; }
.car-card:nth-child(n+9) { animation-delay: 0.27s; }


/* ============================================================
   상세 페이지 v2 — SK 렌터카 스타일 (좌+우 sticky 레이아웃)
   ============================================================ */

/* ─── 브레드크럼 ─────────────────────────────────────── */
.breadcrumb {
  padding: var(--space-lg) 0 var(--space-md);
  font-size: 13px;
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.breadcrumb a {
  color: var(--color-ink-muted);
  transition: color 0.15s ease;
}

.breadcrumb a:hover { color: var(--color-accent); }

.breadcrumb__sep { color: var(--color-ink-soft); }

.breadcrumb__current {
  color: var(--color-ink);
  font-weight: 600;
}

.detail-page { padding-bottom: var(--space-3xl); }

/* ─── 메인 레이아웃 (좌 + 우 sticky) ─────────────────── */
.detail-layout-v2 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.detail-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.detail-right {
  position: sticky;
  top: 80px;
  align-self: start;
}

.detail-right__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* ─── 갤러리 ─────────────────────────────────────────── */
.detail-gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.detail-gallery__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.95);
  z-index: 1;
}

.detail-gallery__placeholder-brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 10px;
}

.detail-gallery__placeholder-model {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.detail-gallery__main img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-gallery__main img.failed { display: none; }

.detail-gallery__main .lease-badge {
  top: 14px;
  left: 14px;
  font-size: 12px;
  padding: 6px 12px;
}

.detail-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.thumb {
  width: 88px;
  height: 66px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  background: var(--color-bg-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb:hover { border-color: var(--color-border-strong); }
.thumb--active { border-color: var(--color-accent); }

/* ─── 좌측 섹션 공통 ─────────────────────────────────── */
.detail-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}

.detail-section__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
}

/* ─── 차량 정보 표 (2열) ─────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-xl);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 14px;
}

.info-row span {
  color: var(--color-ink-muted);
}

.info-row strong {
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}

.info-badge--ok {
  background: #ecfdf5;
  color: #059669;
}

/* ─── 옵션 정보 (체크 + 알약) ─────────────────────────── */
.options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-subtle);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
}

.option-pill svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.option-pill--empty {
  background: transparent;
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ─── 우측 패널: 차종 요약 카드 ──────────────────────── */
.summary-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.summary-card__brand-line {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.summary-card__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  line-height: 1.25;
}

.summary-card__specs {
  font-size: 13px;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
}

.summary-card__price-box {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.summary-card__price-label {
  font-size: 11px;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.summary-card__price {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.summary-card__price-unit {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-left: 4px;
  font-weight: 500;
}

/* ─── 우측 패널: 견적 조건 카드 ──────────────────────── */
.quote-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.quote-card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
}

.quote-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quote-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-soft);
}

.quote-list li:last-child { border-bottom: none; }

.quote-list li span {
  color: var(--color-ink-muted);
}

.quote-list li strong {
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
}

.quote-card__note {
  margin-top: var(--space-md);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
}

.quote-card__note strong {
  display: block;
  color: var(--color-ink);
  font-weight: 700;
  margin-bottom: 2px;
}

.quote-card__note span {
  color: var(--color-ink-muted);
}

/* ─── 우측 패널: 결제 내역 ───────────────────────────── */
.payment-card {
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.payment-card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
}

.payment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: var(--color-ink);
}

.payment-row span:first-child {
  color: var(--color-ink-muted);
}

.payment-row--discount span:last-child {
  color: var(--color-accent);
  font-weight: 600;
}

.payment-divider {
  height: 1px;
  background: var(--color-border);
  margin: 8px 0;
  border: none;
  border-top: 1px dashed var(--color-border-strong);
}

.payment-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0 2px;
}

.payment-total span {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
}

.payment-total strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

.payment-total__unit {
  font-size: 12px;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin-left: 2px;
}

/* ─── 우측 패널: CTA ────────────────────────────────── */
.detail-right__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── CTA 버튼 (공통) ───────────────────────────────── */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #ffffff;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  width: 100%;
  text-align: center;
  transition: all 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}

.cta-button:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.cta-button--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.cta-button--outline:hover {
  background: var(--color-bg-subtle);
  color: var(--color-ink);
  border-color: var(--color-ink-soft);
}

/* ─── 모바일 (상세 페이지) ───────────────────────────── */
@media (max-width: 880px) {
  .detail-layout-v2 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .detail-right {
    position: static;
  }
  .detail-right__inner {
    max-height: none;
    overflow: visible;
  }
  .detail-section { padding: var(--space-md) var(--space-lg); }
  .info-grid { grid-template-columns: 1fr; gap: 0; }
  .summary-card__name { font-size: 20px; }
  .summary-card__price { font-size: 22px; }
  .payment-total strong { font-size: 20px; }
  .detail-gallery__placeholder-model { font-size: 22px; }
  .thumb { width: 64px; height: 48px; }
}

/* ============================================================
   상담신청 모달
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn 0.18s ease-out;
}

.modal[hidden] { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(2px);
}

.modal__card {
  position: relative;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--space-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modalIn 0.22s ease-out;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--color-ink-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal__close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-ink);
}

.modal__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}

.modal__subtitle {
  font-size: 13px;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-lg);
}

.modal__subtitle strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ─── 폼 ────────────────────────────────────────────── */
.field {
  display: block;
  margin-bottom: var(--space-md);
}

.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}

.field__label em {
  color: var(--color-accent);
  font-style: normal;
  margin-left: 2px;
}

.field__optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-ink-muted);
}

.field__input {
  width: 100%;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.field__input--textarea {
  resize: vertical;
  min-height: 72px;
  font-family: var(--font-body);
}

.field__input--error {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.field__error {
  display: block;
  color: var(--color-accent);
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}

.field__notice {
  font-size: 11px;
  color: var(--color-ink-soft);
  text-align: center;
  margin: var(--space-md) 0 0;
  line-height: 1.5;
}

/* ─── 완료 화면 ─────────────────────────────────────── */
.consult-done {
  text-align: center;
  padding: var(--space-md) 0;
}

.consult-done__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.consult-done__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
}

.consult-done__text {
  font-size: 14px;
  color: var(--color-ink-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-lg);
}

.consult-done__text strong {
  color: var(--color-ink);
  font-weight: 600;
}

.consult-done__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}


/* ============================================================
   v3 추가: 브랜드 로고 / 견적 셀렉터 / 라이트박스
   ============================================================ */

/* ─── 브랜드 칩 - 실제 로고 이미지 ─────────────────────── */
.brand-chip__mark img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

.brand-chip__mark--all {
  font-size: 18px;
  color: var(--color-ink);
}

/* 활성 칩일 때 로고 강조 */
.brand-chip[aria-pressed="true"] .brand-chip__mark {
  background: #ffffff;
}

/* ─── 우측 차종 요약 - 로고 라인 ────────────────────── */
.summary-card__brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.summary-card__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ─── 가격 박스 안내문 ───────────────────────────────── */
.summary-card__price-hint {
  font-size: 11px;
  color: var(--color-ink-muted);
  margin-top: 4px;
}

/* ─── 결제 내역 - 안내 영역 ─────────────────────────── */
.payment-note {
  font-size: 11px;
  color: var(--color-ink-muted);
  line-height: 1.6;
  text-align: center;
  padding-top: 4px;
}

/* ─── 갤러리 - 크게 보기 버튼 ────────────────────────── */
.gallery-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
  backdrop-filter: blur(4px);
}

.gallery-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* ============================================================
   ★ 맞춤 견적 조건 (Quote Builder)
   ============================================================ */

.quote-builder {
  border-color: var(--color-accent-border);
  background: linear-gradient(180deg, #fff 0%, #fffbfb 100%);
}

.quote-builder__notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #991b1b;
  margin: 0 0 var(--space-lg);
  font-weight: 500;
}

.quote-builder__notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-accent);
}

/* ─── 그룹 (보증조건 같은 묶음) ─────────────────────── */
.quote-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--color-bg-elevated);
}

.quote-group__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
}

.quote-group .quote-field:last-child {
  margin-bottom: 0;
}

/* ─── 개별 필드 ──────────────────────────────────────── */
.quote-field {
  margin-bottom: var(--space-lg);
}

.quote-field:last-child {
  margin-bottom: 0;
}

.quote-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.quote-field__hint {
  font-size: 11px;
  color: var(--color-ink-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}

.quote-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.quote-tag--locked {
  background: var(--color-bg-subtle);
  color: var(--color-ink-muted);
}

.quote-fixed-value {
  display: inline-flex;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
}

.quote-fixed-list {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.quote-fixed-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}

.quote-fixed-row span {
  color: var(--color-ink-muted);
}

.quote-fixed-row strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* ─── 칩 (선택 버튼) ─────────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 64px;
  text-align: center;
}

.chip:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}

.chip--active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #ffffff;
}

.chip--active:hover {
  color: #ffffff;
  border-color: var(--color-ink);
}

/* ============================================================
   ★ 라이트박스 (사진 크게 보기)
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  animation: fadeIn 0.18s ease-out;
}

.lightbox[hidden] { display: none; }

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  cursor: zoom-out;
  z-index: 1;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s ease;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: none;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

.lightbox__content {
  position: relative;
  z-index: 2;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lightbox__counter {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* ============================================================
   ★ 모달 안의 견적 요약 (사용자가 선택한 조건)
   ============================================================ */

.modal__quote-summary {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.modal__quote-summary-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-muted);
  margin-bottom: 8px;
}

.modal__quote-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 12px;
}

.modal__quote-summary-grid > div {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.modal__quote-summary-grid span {
  color: var(--color-ink-muted);
}

.modal__quote-summary-grid strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ─── 모바일 - 칩 / 라이트박스 / 견적 요약 ─────────── */
@media (max-width: 720px) {
  .chip {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 56px;
  }
  .quote-builder__notice {
    font-size: 11px;
    padding: 8px 12px;
  }
  .lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .modal__quote-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   관리자 페이지 (3단계)
   ============================================================ */

/* ─── 로그인 페이지 ──────────────────────────────────── */
.admin-login-body {
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-lg);
}

.admin-login {
  width: 100%;
  max-width: 380px;
}

.admin-login__card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.admin-login__logo {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.admin-login__subtitle {
  font-size: 13px;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-xl);
}

.admin-login form {
  text-align: left;
  margin-bottom: var(--space-lg);
}

.admin-login__hint {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-ink-muted);
}

.admin-login__hint strong {
  display: block;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.admin-login__hint-account code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: var(--color-bg-elevated);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.admin-login__back {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: 12px;
  color: var(--color-ink-muted);
}

.admin-login__back:hover { color: var(--color-accent); }

.login-error {
  background: var(--color-accent-soft);
  color: #991b1b;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  margin: var(--space-md) 0;
}

/* ─── 관리자 헤더 ────────────────────────────────────── */
.admin-header .site-logo__sub.admin-mode-badge {
  background: var(--color-accent);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border-left: none;
  font-size: 11px;
  font-weight: 700;
}

.admin-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.admin-email {
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* ─── 대시보드 컨테이너 ──────────────────────────────── */
.admin-page {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.admin-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.admin-page__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}

/* ─── 상단 통계 카드 ────────────────────────────────── */
.admin-stats {
  display: flex;
  gap: var(--space-md);
}

.admin-stat {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  min-width: 140px;
}

.admin-stat__label {
  font-size: 11px;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin-bottom: 2px;
}

.admin-stat__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.admin-stat__value span {
  font-size: 12px;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin-left: 2px;
}

.admin-stat__sub {
  font-size: 11px;
  color: var(--color-ink-muted);
  margin-top: 3px;
}

.admin-stat__sub strong {
  color: var(--color-accent);
  font-weight: 700;
}

/* ─── 탭 ─────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.admin-tab {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}

.admin-tab:hover { color: var(--color-ink); }

.admin-tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ─── 테이블 ─────────────────────────────────────────── */
.admin-table-wrap {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table thead {
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

.admin-table th {
  text-align: left;
  font-weight: 700;
  color: var(--color-ink-muted);
  font-size: 12px;
  padding: 12px 14px;
  white-space: nowrap;
}

.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-row:hover { background: var(--color-bg-subtle); }

.admin-row--muted td:not(:nth-child(6)) {
  opacity: 0.55;
}

.admin-num { text-align: right; white-space: nowrap; }

.admin-help {
  margin-top: var(--space-md);
  padding: 12px 16px;
  background: #eff6ff;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: #1e3a8a;
  line-height: 1.6;
}

/* ─── 차량 cell ──────────────────────────────────────── */
.admin-car-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-car-cell__photo {
  width: 56px;
  height: 42px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  font-size: 14px;
}

.admin-car-cell__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-car-cell__info { min-width: 0; }

.admin-car-cell__name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.admin-car-cell__id {
  font-size: 11px;
  color: var(--color-ink-soft);
  font-family: ui-monospace, monospace;
}

/* ─── 리스 유형 알약 ────────────────────────────────── */
.lease-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.lease-pill--return {
  background: var(--color-return-soft);
  color: var(--color-return);
}

.lease-pill--acquisition {
  background: var(--color-acquisition-soft);
  color: var(--color-acquisition);
}

/* ─── 공개/비공개 토글 ──────────────────────────────── */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle__slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 100px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle__slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle__input:checked + .toggle__slider {
  background: #10b981;
}

.toggle__input:checked + .toggle__slider::after {
  transform: translateX(16px);
}

.toggle__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  min-width: 32px;
}

/* ─── 상태 알약 ──────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.status--pending   { background: #fef3c7; color: #92400e; }
.status--contacted { background: #dbeafe; color: #1e40af; }
.status--completed { background: #d1fae5; color: #065f46; }
.status--cancelled { background: #f3f4f6; color: #6b7280; }

/* ─── admin link ─────────────────────────────────────── */
.admin-link {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

.admin-link:hover { text-decoration: underline; }

.admin-link--btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ─── 보조 텍스트 클래스 ─────────────────────────────── */
.text-muted { color: var(--color-ink-muted); }
.text-xs    { font-size: 11px; }

/* ─── 상담 상세 모달 ────────────────────────────────── */
.modal__card--wide {
  max-width: 560px;
}

.consult-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.consult-detail__section {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.consult-detail__section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-muted);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.consult-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 13px;
}

.consult-detail__item {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.consult-detail__item span {
  color: var(--color-ink-muted);
}

.consult-detail__item strong {
  color: var(--color-ink);
  font-weight: 600;
  text-align: right;
}

.consult-detail__memo {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink);
  white-space: pre-wrap;
}

/* ─── 상태 변경 버튼 ────────────────────────────────── */
.status-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.status-btn {
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.status-btn:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}

.status-btn--active {
  border-width: 1.5px;
}

/* 각 상태별 active 색상 매핑 */
.status-btn--active.status--pending   { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.status-btn--active.status--contacted { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.status-btn--active.status--completed { background: #d1fae5; border-color: #10b981; color: #065f46; }
.status-btn--active.status--cancelled { background: #f3f4f6; border-color: #6b7280; color: #4b5563; }

/* ─── 모바일 (관리자) ───────────────────────────────── */
@media (max-width: 720px) {
  .admin-page__head { flex-direction: column; align-items: flex-start; }
  .admin-stats { width: 100%; gap: 8px; }
  .admin-stat { flex: 1; min-width: 0; padding: 8px 12px; }
  .admin-stat__value { font-size: 18px; }

  .admin-tab { padding: 8px 12px; font-size: 13px; }

  /* 작은 화면에선 일부 컬럼 숨김 */
  .admin-table th:nth-child(2),
  .admin-table td:nth-child(2),
  .admin-table th:nth-child(3),
  .admin-table td:nth-child(3) {
    display: none;
  }

  .admin-car-cell__name { max-width: 120px; }

  .consult-detail__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   4단계: 차량 등록/수정 폼
   ============================================================ */

/* ─── 액션 바 (테이블 위 "차량 추가" 버튼) ───────────── */
.admin-action-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

.cta-button--compact {
  width: auto;
  padding: 8px 18px;
  font-size: 13px;
  display: inline-flex;
}

/* ─── admin 액션 셀 (수정 / 삭제 버튼들) ─────────────── */
.admin-actions {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}

.admin-link--danger {
  color: var(--color-accent);
}

.admin-link--danger:hover {
  color: var(--color-accent-hover);
}

/* ─── 등록/수정 폼 페이지 ────────────────────────────── */
.admin-edit-page {
  max-width: 920px;
  margin: 0 auto;
}

.car-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}

.form-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}

.form-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-ink);
  color: #ffffff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.form-section__hint {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-md);
  line-height: 1.6;
}

/* 폼 그리드 (2열) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
}

.field--full {
  grid-column: 1 / -1;
}

/* 라디오 버튼 묶음 */
.radio-row {
  display: flex;
  gap: var(--space-md);
}

.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink-muted);
}

.radio:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}

.radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio input:checked + .radio__label {
  color: var(--color-accent);
}

.radio:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* 색상 입력 */
.field__input--color {
  height: 42px;
  padding: 4px;
  cursor: pointer;
}

/* 인라인 토글 */
.toggle--inline {
  margin-top: 4px;
}

/* ─── 사진 업로더 ────────────────────────────────────── */
.photo-uploader {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.photo-slot {
  position: relative;
  background: var(--color-bg-subtle);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.photo-slot--main {
  border-color: var(--color-accent-border);
  background: linear-gradient(180deg, #fff 0%, #fffbfb 100%);
}

.photo-slot--filled {
  border-style: solid;
  border-color: var(--color-border);
  background: #ffffff;
}

.photo-slot__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-ink);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.photo-slot--main .photo-slot__badge {
  background: var(--color-accent);
  color: #ffffff;
}

.photo-slot__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.photo-slot__remove:hover {
  background: var(--color-accent);
}

.photo-slot__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-ink-soft);
  padding: 12px;
  text-align: center;
}

.photo-slot__empty-text {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.photo-slot__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 1px;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid var(--color-border);
  z-index: 2;
  backdrop-filter: blur(4px);
}

.photo-slot__btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.photo-slot__btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-accent);
}

.photo-slot__btn + .photo-slot__btn {
  border-left: 1px solid var(--color-border);
}

.photo-slot--error {
  background: var(--color-accent-soft);
}

.photo-slot--error::after {
  content: '⚠️ 이미지를 불러올 수 없어요';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  z-index: 1;
}

/* ─── 옵션 체크박스 ──────────────────────────────────── */
.options-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: var(--space-md);
}

.option-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.option-check:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}

.option-check input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.option-check:has(input:checked) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

/* 커스텀 옵션 입력 */
.options-custom {
  display: flex;
  gap: 8px;
  margin-top: var(--space-md);
}

.options-custom__input {
  flex: 1;
}

.options-custom__btn {
  background: var(--color-ink);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.options-custom__btn:hover {
  background: #000;
}

.options-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-md);
}

.option-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 5px 6px 5px 12px;
  font-size: 12px;
  font-weight: 600;
}

.option-tag button {
  width: 18px;
  height: 18px;
  border: none;
  background: var(--color-accent);
  color: #ffffff;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.option-tag button:hover {
  background: var(--color-accent-hover);
}

/* ─── 폼 액션 (저장/취소 하단 sticky) ────────────────── */
.form-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  padding: var(--space-md) 0;
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
  z-index: 10;
}

/* ─── 토스트 ────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-ink);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast[hidden] {
  display: none;
}

.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── 모바일 ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .photo-uploader { grid-template-columns: repeat(2, 1fr); }
  .form-actions { grid-template-columns: 1fr 1fr; }
  .form-section { padding: var(--space-md) var(--space-lg); }
  .admin-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}


/* ============================================================
   5단계: 디자인 통일감 다듬기
   ============================================================ */

/* ─── 빈 상태 (Empty State) 개선 ─────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-state__icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-md);
  color: var(--color-ink-soft);
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state__icon svg {
  width: 100%;
  height: 100%;
}

.empty-state__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.02em;
}

.empty-state__text {
  font-size: 14px;
  margin: 0 0 var(--space-lg);
  line-height: 1.6;
  max-width: 360px;
}

.empty-state .cta-button {
  width: auto;
  min-width: 180px;
}

/* ─── 페이지 헤드 sub title (수정 모드) ──────────────── */
.admin-page__sub {
  font-size: 13px;
  color: var(--color-ink-muted);
  margin: 4px 0 0;
  font-weight: 500;
}

.admin-page__sub::before {
  content: '✏️';
  margin-right: 6px;
}

/* ─── admin-nav 백 링크 + 이메일 정렬 ────────────────── */
.admin-nav__back {
  font-weight: 600;
  background: transparent;
  border-color: transparent;
  padding-left: 4px;
}

.admin-nav__back:hover {
  color: var(--color-accent);
  background: var(--color-bg-subtle);
}

/* admin-nav를 더 명확하게 정렬 */
.admin-nav {
  flex-wrap: wrap;
}

/* ─── 카드 호버 / 트랜지션 다듬기 ────────────────────── */
.car-card {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

/* ─── 칩 active 트랜지션 ─────────────────────────────── */
.chip {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.1s ease;
}

.chip:active {
  transform: scale(0.96);
}

/* 브랜드 칩 호버 미세 조정 */
.brand-chip {
  transition: transform 0.15s ease;
}

.brand-chip:hover .brand-chip__mark {
  transform: scale(1.05);
}

.brand-chip__mark {
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease;
}

/* ─── 토스트 위치 통일 + 폭 보장 ─────────────────────── */
.toast {
  min-width: 200px;
  max-width: 90vw;
  text-align: center;
}

/* ─── 폼 액션 sticky 정리 (그림자 추가) ──────────────── */
.form-actions {
  background: linear-gradient(180deg, transparent 0%, var(--color-bg) 20%);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
  margin-top: 0;
  border-top: none;
}

/* ─── 사진 슬롯 모바일 (2열로) ───────────────────────── */
@media (max-width: 720px) {
  .photo-uploader {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .photo-slot__btn {
    font-size: 10px;
    padding: 6px 4px;
  }
  .empty-state__icon {
    width: 64px;
    height: 64px;
  }
  .empty-state__title { font-size: 16px; }
  .empty-state__text { font-size: 13px; }
}

/* ─── 작은 화면에서 admin-nav 정리 ──────────────────── */
@media (max-width: 720px) {
  .admin-nav {
    gap: 8px;
  }
  .admin-email {
    display: none;
  }
  .admin-nav__back {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ─── 라이트박스 사진 트랜지션 ──────────────────────── */
.lightbox__img {
  transition: opacity 0.2s ease;
}

/* ─── 옵션 체크박스 active 트랜지션 ─────────────────── */
.option-check {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}

.option-check:active {
  transform: scale(0.98);
}

/* ─── 라디오 트랜지션 다듬기 ────────────────────────── */
.radio {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}

/* ─── 폼 입력 focus 글로우 ───────────────────────────── */
.field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ─── 토글 트랜지션 부드럽게 ────────────────────────── */
.toggle__slider {
  transition: background 0.22s ease;
}

.toggle__slider::after {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── 상담 상세 모달 좀 더 시각적 위계 ───────────────── */
.consult-detail__section {
  position: relative;
}

.consult-detail__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── admin-stat 호버 (살짝 떠보이게) ──────────────── */
.admin-stat {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.05);
}

/* ─── 페이지 진입 부드러운 페이드 ───────────────────── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-page,
.detail-page {
  animation: pageEnter 0.3s ease-out;
}


/* ============================================================
   6단계: 메인 페이지 전면 개편 (다크 헤로 + 럭셔리 톤)
   ============================================================ */

/* ─── 새 컬러 토큰 추가 ─────────────────────────────── */
:root {
  --color-luxury-dark: #0a0a0a;
  --color-luxury-mid:  #1f1f1f;
  --color-luxury-warm: #2a2a2a;
  --color-luxury-gold: #C5A572;
  --color-luxury-gold-soft: rgba(197, 165, 114, 0.15);
}

/* ─── 헤더 (헤로 위에 오버레이) ─────────────────────── */
.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 10;
}

.site-logo--light {
  color: #ffffff;
}

.site-logo--light .site-logo__sub {
  color: rgba(255, 255, 255, 0.65);
  border-left-color: rgba(255, 255, 255, 0.25);
}

.site-nav__link--light {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
}

.site-nav__link--light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ─── 헤로 섹션 ────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(135deg,
              var(--color-luxury-dark) 0%,
              var(--color-luxury-mid) 55%,
              var(--color-luxury-warm) 100%);
  color: #ffffff;
  padding: 110px 0 56px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 30%, rgba(197, 165, 114, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--color-luxury-gold);
  margin-bottom: 12px;
}

.hero__title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #ffffff;
}

.hero__sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 36px;
  letter-spacing: -0.01em;
}

/* ─── 인수형/반납형 큰 탭 ──────────────────────────── */
.lease-tabs {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  gap: 4px;
  max-width: 460px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lease-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 16px;
  border-radius: 7px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  text-align: center;
  transition: all 0.2s ease;
}

.lease-tab:hover {
  color: #ffffff;
}

.lease-tab__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.lease-tab__sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 2px;
}

.lease-tab--active {
  background: #ffffff;
  color: var(--color-ink);
}

.lease-tab--active .lease-tab__sub {
  color: var(--color-ink-muted);
  opacity: 1;
}

/* ─── 본문 영역 (헤로 다음) ─────────────────────────── */
.list-page {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

/* ─── 필터 카드 ──────────────────────────────────────── */
.filter-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
}

.filter-section {
  padding-bottom: var(--space-md);
}

.filter-section--bordered {
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-md);
}

.filter-section__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--color-ink);
}

.filter-section__hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-muted);
  margin-left: 4px;
}

/* ─── 브랜드 로고 칩 행 (가로 스크롤) ───────────────── */
.brand-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.brand-row::-webkit-scrollbar { height: 4px; }
.brand-row::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.brand-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.brand-chip__mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: all 0.2s ease;
  overflow: hidden;
}

.brand-chip__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-chip__mark--all {
  background: var(--color-ink);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-color: var(--color-ink);
}

.brand-chip__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: -0.01em;
}

.brand-chip:hover .brand-chip__mark {
  transform: scale(1.05);
  border-color: var(--color-ink-soft);
}

.brand-chip[aria-pressed="true"] .brand-chip__mark {
  border-color: var(--color-ink);
  border-width: 2.5px;
}

.brand-chip[aria-pressed="true"] .brand-chip__name {
  color: var(--color-ink);
  font-weight: 700;
}

/* ─── 가격대 칩 ──────────────────────────────────────── */
.price-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  flex-wrap: wrap;
}

.price-chip {
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  color: var(--color-ink-muted);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  font-family: inherit;
}

.price-chip:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}

.price-chip--active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #ffffff;
}

/* ─── 필터 액션 (초기화 + 카운트) ───────────────────── */
.filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-soft);
  margin-top: var(--space-md);
}

.filter-reset {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-ink-muted);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.filter-reset:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
  background: var(--color-bg-subtle);
}

.filter-result {
  font-size: 13px;
  color: var(--color-ink-muted);
}

.filter-result strong {
  color: var(--color-ink);
  font-weight: 700;
  font-size: 14px;
}

/* ─── 차량 카드 (풍부한 정보) ──────────────────────── */
.car-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.car-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-ink-soft);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.12);
}

.car-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.car-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  padding: 16px;
}

.car-card__placeholder-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin-bottom: 6px;
}

.car-card__placeholder-model {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.car-card__media img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-card__media img.failed { display: none; }

.car-card__lease-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  z-index: 3;
  backdrop-filter: blur(6px);
}

.lease-tag--return { background: rgba(66, 99, 235, 0.92); }
.lease-tag--acquisition { background: rgba(0, 0, 0, 0.82); }

.car-card__safety-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ecfdf5;
  color: #059669;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  z-index: 3;
}

.car-card__body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.car-card__brand-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-ink-muted);
  font-weight: 500;
}

.car-card__logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.car-card__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.3;
}

.car-card__specs {
  font-size: 12px;
  color: var(--color-ink-muted);
  letter-spacing: -0.005em;
}

.car-card__contract {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 4px 0;
}

.car-card__contract-label {
  font-size: 10px;
  color: var(--color-ink-muted);
  font-weight: 500;
}

.car-card__contract-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin-top: 1px;
}

.car-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0 4px;
  border-top: 1px solid var(--color-border-soft);
}

.car-card__price-label {
  font-size: 11px;
  color: var(--color-ink-muted);
  font-weight: 500;
}

.car-card__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

.car-card__price-unit {
  font-size: 11px;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin-left: 2px;
}

.car-card__options {
  font-size: 11px;
  color: var(--color-ink-muted);
  margin: 2px 0;
}

.car-card__cta {
  background: var(--color-ink);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
  transition: background 0.15s ease;
  letter-spacing: -0.01em;
}

.car-card__cta:hover {
  background: #000000;
}

/* ─── 카드 그리드 ──────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

/* ─── 헤로 모바일 반응형 ────────────────────────────── */
@media (max-width: 720px) {
  .hero { padding: 90px 0 40px; }
  .hero__title { font-size: 26px; }
  .hero__sub { font-size: 13px; margin-bottom: 24px; }
  .hero__eyebrow { font-size: 10px; }

  .lease-tab { padding: 11px 12px; }
  .lease-tab__name { font-size: 13px; }
  .lease-tab__sub { font-size: 10px; }

  .filter-card { padding: var(--space-md) var(--space-lg); }
  .brand-chip__mark { width: 44px; height: 44px; padding: 8px; }
  .brand-chip__name { font-size: 11px; }

  .price-chip { padding: 7px 14px; font-size: 12px; }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .car-card__name { font-size: 14px; }
  .car-card__price { font-size: 16px; }
  .car-card__body { padding: 12px; }
}

/* ─── 매우 작은 화면 (375px 이하) ───────────────────── */
@media (max-width: 380px) {
  .card-grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 22px; }
}


/* ============================================================
   6단계 보정 (헤로 축소 + 브랜드 칩 사각형)
   ============================================================ */

/* ─── 헤로 영역 컴팩트하게 ─────────────────────────── */
.hero {
  padding: 72px 0 32px;
}

.hero__eyebrow {
  margin-bottom: 8px;
  font-size: 10px;
}

.hero__title {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.hero__sub {
  font-size: 13px;
  margin: 0 0 22px;
}

.lease-tabs {
  max-width: 420px;
}

.lease-tab {
  padding: 11px 14px;
}

.lease-tab__name {
  font-size: 14px;
}

.lease-tab__sub {
  font-size: 10px;
}

/* ─── 브랜드 칩: 원형 → 둥근 사각형 ──────────────────── */
.brand-chip__mark {
  border-radius: 12px;
}

.brand-chip__mark--all {
  border-radius: 12px;
}

/* ─── 헤로 모바일 추가 보정 ─────────────────────────── */
@media (max-width: 720px) {
  .hero {
    padding: 64px 0 22px;
  }
  .hero__title {
    font-size: 22px;
  }
  .hero__sub {
    font-size: 12px;
    margin-bottom: 16px;
  }
  .lease-tabs {
    max-width: 100%;
  }
}


/* ============================================================
   6단계 최종 보정 (컬러 통일 + 사이즈 조정)
   ============================================================ */

/* ─── 컬러 통일: 본문 액센트를 빨강으로 복원 ─────────── */

/* "All" 칩 (전체 = 본문) - 검정 → 빨강 */
.brand-chip__mark--all {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

/* 브랜드 칩 활성 상태 - 빨간 보더 */
.brand-chip[aria-pressed="true"] .brand-chip__mark {
  border-color: var(--color-accent);
  border-width: 2.5px;
}

.brand-chip[aria-pressed="true"] .brand-chip__name {
  color: var(--color-accent);
  font-weight: 700;
}

/* 가격대 활성 칩 - 검정 → 빨강 */
.price-chip--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

/* 카드 CTA - 검정 → 빨강 (다른 페이지 CTA와 통일) */
.car-card__cta {
  background: var(--color-accent);
}

.car-card__cta:hover {
  background: var(--color-accent-hover);
}

/* 카드 호버 보더 - 검정 → 빨강 */
.car-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px -8px rgba(224, 49, 49, 0.15);
}

/* 카드 가격 색상도 빨강으로 강조 (다른 페이지 가격과 통일) */
.car-card__price {
  color: var(--color-accent);
}

/* ─── 사이즈 조정 4가지 ─────────────────────────────── */

/* ① 필터 섹션 제목 14px → 16px */
.filter-section__title {
  font-size: 16px;
}

/* ② 제조사 칩 이름 12px → 13px */
.brand-chip__name {
  font-size: 13px;
}

/* ③ 가격대 칩 폰트 13px → 14px, 패딩 ↑ */
.price-chip {
  font-size: 14px;
  padding: 10px 20px;
}

/* ④ 카드 가격 18px → 20px */
.car-card__price {
  font-size: 20px;
}

/* ─── 모바일 보정 (가격 칩 touch area 더 크게) ───────── */
@media (max-width: 720px) {
  .price-chip {
    font-size: 13px;
    padding: 9px 16px;
  }
  .filter-section__title {
    font-size: 15px;
  }
  .car-card__price {
    font-size: 18px;
  }
}


/* ============================================================
   딥 네이비 헤로 (블랙 → 네이비 변경)
   ============================================================ */

:root {
  --color-luxury-navy-dark: #0a1929;
  --color-luxury-navy-mid:  #112d4e;
  --color-luxury-navy-light: #1a3a5c;
}

.hero {
  background: linear-gradient(135deg,
              var(--color-luxury-navy-dark) 0%,
              var(--color-luxury-navy-mid) 55%,
              var(--color-luxury-navy-light) 100%);
}

.hero__bg {
  background-image:
    radial-gradient(circle at 80% 30%, rgba(197, 165, 114, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(180, 210, 240, 0.06) 0%, transparent 50%);
}

/* 인수형 탭 활성 카드 - 네이비랑 어울리게 약간 보정 */
.lease-tab--active {
  color: var(--color-luxury-navy-dark);
}

.lease-tab--active .lease-tab__sub {
  color: var(--color-ink-muted);
}


/* ============================================================
   헤로 풍성하게 (차량 이미지 + 통계) + C안 칩 균등분배
   ============================================================ */

/* ─── 헤로 배경: 차량 이미지 + 어둡게 처리 ──────────── */
.hero {
  background:
    linear-gradient(135deg,
      rgba(10, 25, 41, 0.94) 0%,
      rgba(17, 45, 78, 0.88) 50%,
      rgba(26, 58, 92, 0.74) 100%),
    url('https://commons.wikimedia.org/wiki/Special:FilePath/Genesis%20GV70%203.5T%20AWD%20JK1%20PE%20Ceres%20Blue%20Matte%20(42).jpg?width=1600') no-repeat;
  background-size: cover, cover;
  background-position: center, right center;
}

/* 기존 hero__bg radial-gradient 효과는 끄기 (이미지가 대신 깊이감 제공) */
.hero__bg {
  display: none;
}

/* ─── 헤로 통계 정보 (Img 5 영감) ───────────────────── */
.hero__stats {
  display: flex;
  gap: 36px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero__stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #C5A572;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero__stat-value-unit {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 2px;
}

.hero__stat-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ─── C안: 칩 균등 분배 (space-evenly) ──────────────── */
.brand-row {
  justify-content: space-evenly;
}

.price-row {
  justify-content: space-evenly;
}

/* ─── C안: 칩 사이즈 더 크게 ─────────────────────────── */
.brand-chip__mark {
  width: 72px;
  height: 72px;
  padding: 14px;
}

.brand-chip__name {
  font-size: 14px;
}

.brand-chip__mark--all {
  font-size: 16px;
}

/* ─── 결과 카운트 키우기 ─────────────────────────────── */
.filter-result {
  font-size: 14px;
}

.filter-result strong {
  font-size: 16px;
}

/* ─── 모바일 (헤로 통계 + 칩 정리) ──────────────────── */
@media (max-width: 720px) {
  .hero__stats {
    gap: 22px;
    margin-top: 16px;
    padding-top: 14px;
  }
  .hero__stat-value { font-size: 18px; }
  .hero__stat-value-unit { font-size: 11px; }
  .hero__stat-label { font-size: 9px; letter-spacing: 0.05em; }

  /* 모바일에선 가로 스크롤이라 균등분배 해제 */
  .brand-row {
    justify-content: flex-start;
    gap: 14px;
  }
  .price-row {
    justify-content: flex-start;
    gap: 6px;
  }
  .brand-chip__mark {
    width: 52px;
    height: 52px;
    padding: 10px;
  }
  .brand-chip__name { font-size: 12px; }
  .brand-chip__mark--all { font-size: 13px; }
}


/* ============================================================
   리브랜딩 (TAGO MOBILITY) + 헤로 추상 SVG + 카드 3열
   ============================================================ */

/* ─── 헤로: 차량 사진 제거, 추상 SVG 패턴으로 ───────── */
.hero {
  background: linear-gradient(135deg,
              var(--color-luxury-navy-dark) 0%,
              var(--color-luxury-navy-mid) 55%,
              var(--color-luxury-navy-light) 100%);
}

.hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: none;
  overflow: hidden;
}

.hero__bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

/* ─── 카드 그리드 4열 → 3열 ────────────────────────── */
.card-grid {
  grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 540px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ─── 헤더 로고 영역 정리 (TAGO MOBILITY 작게) ─────── */
.site-logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding-left: 2px;
}

.site-logo__brand {
  font-weight: 800;
}

.site-logo__brand-prefix {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 1px;
  text-transform: uppercase;
}

.site-logo__sub {
  font-size: 11px;
  margin-left: 8px;
  padding-left: 8px;
  font-weight: 500;
}

/* 로고 이미지로 교체할 경우 (사용자가 추후 적용) */
.site-logo__image {
  height: 28px;
  width: auto;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .site-logo { font-size: 15px; }
  .site-logo__brand-prefix { font-size: 8px; }
  .site-logo__sub {
    display: none; /* 모바일에선 부제 숨김 (공간 절약) */
  }
}


/* ============================================================
   카드 두 버튼 + 시각 위계 강화
   ============================================================ */

/* ─── 카드 구조 변경: <article> 컨테이너 ────────────── */
.car-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.car-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px -8px rgba(224, 49, 49, 0.15);
}

/* 사진 + 본문 영역 (클릭 시 차량 상세로) */
.car-card__main {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

/* ─── 본문 내 정보 (옵션 라벨 추가) ──────────────────── */
.car-card__options-label {
  color: var(--color-ink-soft);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: 4px;
}

/* 계약 조건 박스 - 좌측 골드 라인으로 강조 */
.car-card__contract {
  border-left: 3px solid var(--color-luxury-gold, #C5A572);
  padding-left: 10px;
  padding-right: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
              rgba(197, 165, 114, 0.06) 0%,
              var(--color-bg-subtle) 30%);
}

/* ─── 두 액션 버튼 (사용자 요청) ─────────────────────── */
.car-card__actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  padding: 0 var(--space-lg) var(--space-lg);
  margin-top: 4px;
}

.car-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 0;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1.5px solid transparent;
}

/* [차량 상세] - 회색 outline, 덜 강조 */
.car-card__btn--detail {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.car-card__btn--detail:hover {
  border-color: var(--color-ink);
  background: var(--color-bg-subtle);
}

/* [상담 문의 →] - 빨강 강조 (주요 CTA) */
.car-card__btn--consult {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.car-card__btn--consult:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* 기존 단일 CTA 스타일 제거 (이제 안 씀) */
.car-card__cta {
  display: none;
}

/* ─── 모바일에서 버튼 적절히 ──────────────────────── */
@media (max-width: 720px) {
  .car-card__actions {
    padding: 0 12px 12px;
    gap: 6px;
  }
  .car-card__btn {
    padding: 9px 0;
    font-size: 12px;
  }
}


/* ============================================================
   헤로 v2: 시네마틱 multi-gradient 메쉬 + 로고 정리
   ============================================================ */

/* ─── 헤로 배경: 단순 그라데이션 → multi-radial 메쉬 ──── */
.hero {
  background:
    /* 우측 상단 골드 빛 (도시 광점) */
    radial-gradient(ellipse 80% 60% at 80% 20%,
                    rgba(197, 165, 114, 0.12) 0%,
                    transparent 50%),
    /* 좌측 하단 블루 글로우 (깊이감) */
    radial-gradient(ellipse 60% 50% at 15% 80%,
                    rgba(66, 99, 235, 0.10) 0%,
                    transparent 50%),
    /* 베이스 그라데이션 (더 어두워서 시네마틱) */
    linear-gradient(135deg,
      #050d18 0%,
      #0a1929 30%,
      #112d4e 65%,
      #1a3a5c 100%);
}

/* ─── 로고 정리: TIME TO GO 제거, TAGO MOBILITY만 ───── */
.site-logo__brand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  display: inline-block;
}

/* 기존 brand-prefix 클래스 무력화 (혹시 남아있을 경우 대비) */
.site-logo__brand-prefix {
  display: none;
}


/* ============================================================
   레이아웃 v3 (큰 토글 + 라벨 제거 + 결과 헤더 분리 + 4열)
   ============================================================ */

/* ─── 컨테이너 padding 보정 (헤더 안쪽으로) ──────────── */
.container {
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 980px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ─── 필터 카드 상단 큰 토글 (Image 2 스타일) ───────── */
.lease-toggle-large {
  display: flex;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-elevated, #ffffff);
  margin-bottom: 20px;
}

.lease-toggle-large .lease-tab {
  flex: 1;
  background: var(--color-bg-elevated, #ffffff);
  border: none;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink-muted, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  letter-spacing: -0.01em;
  text-align: center;
  /* 기존 .lease-tab 스타일 override */
  border-radius: 0;
  box-shadow: none;
  display: block;
}

.lease-toggle-large .lease-tab:hover {
  color: var(--color-ink, #1f1f1f);
  background: var(--color-bg-subtle, #f5f6f8);
}

.lease-toggle-large .lease-tab--active,
.lease-toggle-large .lease-tab--active:hover {
  background: #1f1f1f;
  color: #ffffff;
}

/* 큰 토글에선 sub 텍스트 숨김 (단순 디자인) */
.lease-toggle-large .lease-tab__sub {
  display: none;
}

.lease-toggle-large .lease-tab__name {
  font-size: inherit;
  font-weight: inherit;
}

/* ─── 결과 헤더 (필터 카드 밖, 별도 줄) ──────────────── */
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px 14px;
  margin-top: 12px;
}

.result-header .result-count {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink-muted, #6b7280);
}

.result-header .result-count strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-ink, #1f1f1f);
  margin-right: 4px;
}

.result-header .filter-reset {
  padding: 8px 16px;
  border: 1.5px solid var(--color-border-strong, #d1d5db);
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted, #6b7280);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.result-header .filter-reset:hover {
  border-color: var(--color-ink, #1f1f1f);
  color: var(--color-ink, #1f1f1f);
}

/* ─── 카드 그리드 4열 (3열 → 4열) ────────────────────── */
.card-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px;
}

@media (max-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 880px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
}

/* ─── 필터 섹션 (라벨 없으니 padding 조정) ─────────── */
.filter-card .filter-section {
  padding-top: 14px;
  padding-bottom: 14px;
}

.filter-card .filter-section--bordered {
  border-top: 1px solid var(--color-border-tertiary, #f0f2f5);
}

/* 모바일에서 큰 토글 살짝 작게 */
@media (max-width: 720px) {
  .lease-toggle-large .lease-tab {
    padding: 14px 0;
    font-size: 14px;
  }
  .result-header {
    padding: 14px 0 10px;
  }
  .result-header .result-count strong {
    font-size: 18px;
  }
  .result-header .filter-reset {
    padding: 7px 12px;
    font-size: 12px;
  }
}

/* ============================================================
   v8 추가 스타일 — 보험포함 구독 + 약정기간 필터
   ============================================================ */

/* ─── 보험포함 구독 카드 리스 배지 (좌상단) ──────────── */
.lease-tag--subscription {
  background: rgba(31, 31, 31, 0.92);
  color: #C5A572;
  font-weight: 700;
}

/* ─── 카드 우상단 보험 배지 (새로 도입) ──────────────── */
.car-card__insurance-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  backdrop-filter: blur(6px);
}

/* 보험 포함 — 골드 강조 */
.insurance-badge--included {
  background: #C5A572;
  color: #2C1810;
  box-shadow: 0 2px 6px rgba(197, 165, 114, 0.45);
}

/* 보험 별도 — 회색 절제 */
.insurance-badge--excluded {
  background: rgba(255, 255, 255, 0.95);
  color: #6b7280;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ─── 가격 옆 보험 상태 라벨 ─────────────────────────── */
.car-card__price-insurance {
  display: block;
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: -0.01em;
}

.car-card__price-insurance--included {
  color: #C5A572;
  font-weight: 700;
}

.car-card__price-insurance--excluded {
  color: #9ca3af;
  font-weight: 500;
}

/* ─── 보험포함 구독 카드 전체 약간 강조 ──────────────── */
.car-card--insurance-included {
  border-color: rgba(197, 165, 114, 0.3);
}

.car-card--insurance-included:hover {
  border-color: rgba(197, 165, 114, 0.55);
  box-shadow: 0 4px 14px rgba(197, 165, 114, 0.12);
}

/* ─── 약정 기간 필터 chip (price-chip와 유사한 스타일) ─ */
.contract-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-chip {
  padding: 8px 16px;
  border: 1.5px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-elevated, #ffffff);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted, #6b7280);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.contract-chip:hover {
  border-color: var(--color-ink, #1f1f1f);
  color: var(--color-ink, #1f1f1f);
}

.contract-chip--active,
.contract-chip--active:hover {
  background: var(--color-ink, #1f1f1f);
  border-color: var(--color-ink, #1f1f1f);
  color: #ffffff;
}

/* ─── 3분할 토글 모바일 대응 ────────────────────────── */
@media (max-width: 720px) {
  .lease-toggle-large .lease-tab {
    padding: 13px 4px;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 480px) {
  .lease-toggle-large .lease-tab {
    padding: 12px 2px;
    font-size: 12px;
  }
  .car-card__insurance-badge {
    font-size: 9px;
    padding: 3px 8px;
  }
}

/* ============================================================
   v9 추가 스타일 — 보험 3분류 + ⓘ 툴팁
   ============================================================ */

/* ─── 보험 분할 (반납형) 배지 — 중간 톤 ─────────────── */
/* 인수형(회색)과 보험포함(골드) 사이의 중간 시각 위계 */
.insurance-badge--split {
  background: rgba(247, 233, 204, 0.95);
  color: #7a5b1f;
  border: 1px solid rgba(197, 165, 114, 0.5);
  font-weight: 700;
}

/* 가격 옆 (보험 분할) 라벨 */
.car-card__price-insurance--split {
  color: #b8893b;
  font-weight: 700;
}

/* 카드 전체 — 반납형(보험 분할) 약한 강조 */
.car-card--insurance-split {
  /* 인수형(기본)과 같은 톤 유지, hover만 살짝 */
}

.car-card--insurance-split:hover {
  border-color: rgba(197, 165, 114, 0.25);
}

/* ─── 보험 배지 ⓘ 아이콘 ─────────────────────────────── */
.car-card__insurance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.car-card__insurance-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  opacity: 0.7;
  margin-left: 1px;
  font-family: serif;
  font-style: italic;
}

/* ─── ⓘ 트리거 (배지를 감싸는 클릭 영역) ────────────── */
.car-card__insurance-info {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  cursor: pointer;
  display: inline-block;
  /* 배지 자체의 absolute는 해제 (트리거가 absolute) */
}

.car-card__insurance-info .car-card__insurance-badge {
  position: static;
  top: auto;
  right: auto;
  /* 트리거 안에서 배지는 일반 흐름 */
}

.car-card__insurance-info:focus {
  outline: 2px solid rgba(197, 165, 114, 0.55);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

.car-card__insurance-info:focus:not(:focus-visible) {
  outline: none;
}

/* ─── 툴팁 본체 ─────────────────────────────────────── */
.car-card__insurance-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: #1f1f1f;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  padding: 9px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
  letter-spacing: -0.01em;
  white-space: normal;
  text-align: left;
}

/* 툴팁 꼬리 */
.car-card__insurance-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #1f1f1f;
  transform: rotate(45deg);
  border-radius: 1px;
}

/* hover(데스크탑) + is-open(모바일 탭) 시 표시 */
.car-card__insurance-info:hover .car-card__insurance-tooltip,
.car-card__insurance-info.is-open .car-card__insurance-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 카드 맨 우측에 있을 때 툴팁이 화면 밖으로 나가지 않게 — 일단 우측 정렬 유지, 4열 좁을 때만 안쪽으로 */
@media (max-width: 1200px) {
  .car-card__insurance-tooltip {
    width: 200px;
  }
}

@media (max-width: 720px) {
  .car-card__insurance-tooltip {
    width: 180px;
    font-size: 11px;
    padding: 8px 11px;
  }
}

@media (max-width: 480px) {
  .car-card__insurance-info-icon {
    width: 11px;
    height: 11px;
    font-size: 9px;
  }
  .car-card__insurance-tooltip {
    /* 모바일에서 카드 폭만큼 */
    width: max-content;
    max-width: 200px;
    right: 0;
  }
}

/* ============================================================
   v10 (2단계) — 인수형 최저가 + 예상 보험료 + 가격 옵션 표
   ============================================================ */

/* ─── 카드 인수형 "월 N만원부터" 가격 표시 ──────────── */
.car-card__price.car-card__price--from {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-ink-muted, #6b7280);
  font-size: 14px;
  font-weight: 600;
}

.car-card__price-number {
  font-size: 24px;
  font-weight: 800;
  color: #e03131;
  margin: 0 1px;
}

.car-card__price--from .car-card__price-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted, #6b7280);
}

.car-card__price-condition {
  font-size: 10px;
  color: var(--color-ink-light, #9ca3af);
  text-align: right;
  margin-top: 2px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ─── 카드 예상 보험료 가이드 (인수형만) ──────────────── */
.car-card__insurance-estimate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px dashed var(--color-border-tertiary, #f0f2f5);
  font-size: 10px;
  color: #6b7280;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.car-card__insurance-estimate-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: rgba(247, 233, 204, 0.6);
  border: 1px solid rgba(197, 165, 114, 0.5);
  color: #7a5b1f;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.car-card__insurance-estimate strong {
  color: #b8893b;
  font-weight: 800;
}

.car-card__insurance-estimate-cond {
  color: #b0b3b8;
  font-weight: 500;
  margin-left: 2px;
}

/* ─── 상세 페이지: summary-card 가격 박스 (인수형) ──── */
.summary-card__price-box--from {
  padding: 16px;
}

.summary-card__price--from {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink-muted, #6b7280);
}

.summary-card__price-number {
  font-size: 32px;
  font-weight: 800;
  color: #e03131;
  letter-spacing: -0.02em;
}

.summary-card__price--from .summary-card__price-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-muted, #6b7280);
}

.summary-card__price-cond {
  font-size: 11px;
  color: var(--color-ink-light, #9ca3af);
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ─── 상세 페이지: 가격 옵션 비교 표 ─────────────────── */
.detail-section__hint {
  font-size: 11px;
  color: var(--color-ink-light, #9ca3af);
  padding: 3px 9px;
  background: rgba(247, 233, 204, 0.6);
  border-radius: 999px;
  font-weight: 500;
  margin-left: 8px;
  vertical-align: 3px;
  letter-spacing: -0.01em;
}

.price-matrix__intro {
  font-size: 13px;
  color: var(--color-ink-muted, #6b7280);
  margin: 0 0 12px;
  line-height: 1.55;
}

.price-matrix__wrap {
  border: 0.5px solid var(--color-border-tertiary, #f0f2f5);
  border-radius: 10px;
  overflow: hidden;
}

.price-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.price-matrix thead tr {
  background: var(--color-bg-subtle, #f8f9fa);
}

.price-matrix th {
  padding: 11px 10px;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-ink-muted, #6b7280);
  text-align: center;
  letter-spacing: -0.01em;
}

.price-matrix__th--right {
  text-align: right;
  padding-right: 18px;
}

.price-matrix__tr {
  border-top: 0.5px solid var(--color-border-tertiary, #f0f2f5);
}

.price-matrix__td {
  padding: 13px 10px;
  color: var(--color-ink, #1f1f1f);
  font-weight: 500;
}

.price-matrix__td--center {
  text-align: center;
}

.price-matrix__td--price {
  text-align: right;
  padding-right: 18px;
}

.price-matrix__price {
  font-weight: 700;
  font-size: 15px;
}

/* 최저 행 — 골드 배경 강조 */
.price-matrix__tr--lowest {
  background: rgba(247, 233, 204, 0.3);
}

.price-matrix__tr--lowest .price-matrix__price {
  color: #e03131;
  font-size: 16px;
  font-weight: 800;
}

.price-matrix__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: 2px;
  letter-spacing: -0.01em;
}

.price-matrix__tag--lowest {
  background: #C5A572;
  color: #2C1810;
}

.price-matrix__tag--standard {
  background: #6b7280;
  color: #ffffff;
}

/* 표준 행 — 약간 그레이 배경 */
.price-matrix__tr--standard {
  background: var(--color-bg-subtle, #fafbfc);
}

.price-matrix__note {
  font-size: 11px;
  color: var(--color-ink-light, #9ca3af);
  margin: 10px 0 0;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .price-matrix th, .price-matrix__td {
    padding: 10px 6px;
    font-size: 12px;
  }
  .price-matrix__price {
    font-size: 14px;
  }
  .price-matrix__tr--lowest .price-matrix__price {
    font-size: 15px;
  }
  .price-matrix__td--price,
  .price-matrix__th--right {
    padding-right: 12px;
  }
}

/* ─── 상세 페이지: 보험 안내 섹션 ────────────────────── */
.insurance-info__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 3px;
  letter-spacing: -0.01em;
}

.insurance-info__badge--excluded {
  background: rgba(255, 255, 255, 0.95);
  color: #6b7280;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.insurance-info__badge--split {
  background: rgba(247, 233, 204, 0.95);
  color: #7a5b1f;
  border: 1px solid rgba(197, 165, 114, 0.5);
}

.insurance-info__badge--included {
  background: #C5A572;
  color: #2C1810;
}

.insurance-info__desc {
  font-size: 13px;
  color: var(--color-ink, #1f1f1f);
  line-height: 1.7;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.insurance-info__estimate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(247, 233, 204, 0.25);
  border: 0.5px solid rgba(197, 165, 114, 0.45);
  border-radius: 8px;
  margin-top: 12px;
}

.insurance-info__estimate-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-muted, #6b7280);
}

.insurance-info__estimate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(197, 165, 114, 0.45);
  color: #4a3007;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.insurance-info__estimate-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.insurance-info__estimate-value strong {
  font-size: 17px;
  font-weight: 800;
  color: #b8893b;
  letter-spacing: -0.02em;
}

.insurance-info__estimate-cond {
  font-size: 10px;
  color: var(--color-ink-light, #9ca3af);
  font-weight: 500;
}

.insurance-info__estimate-note {
  font-size: 11px;
  color: var(--color-ink-light, #9ca3af);
  margin: 10px 0 0;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

@media (max-width: 540px) {
  .insurance-info__estimate {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .insurance-info__estimate-value strong {
    font-size: 16px;
  }
}

/* ─── 상담 모달: 인수형 전용 체크박스 ────────────────── */
.consult-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: var(--color-bg-subtle, #f8f9fa);
  border-radius: 8px;
  margin-top: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 13px;
  color: var(--color-ink, #1f1f1f);
  line-height: 1.5;
}

.consult-check:hover {
  background: rgba(247, 233, 204, 0.25);
}

.consult-check input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #C5A572;
}

.consult-check input[type="checkbox"]:checked + span {
  color: #7a5b1f;
  font-weight: 500;
}

/* ============================================================
   v11 — 약정 동적 + 정확 가격 + 디자인 다듬기
   ============================================================ */

/* ─── 카드 인수형 "월 N만원" (정확 가격, "부터" 제거) ─── */
.car-card__price.car-card__price--exact {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-ink-muted, #6b7280);
  font-size: 14px;
  font-weight: 600;
}

.car-card__price--exact .car-card__price-number {
  font-size: 26px;
  font-weight: 800;
  color: #e03131;
  margin: 0 2px;
  letter-spacing: -0.02em;
}

.car-card__price--exact .car-card__price-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-muted, #6b7280);
}

/* ─── summary-card 정확 가격 ───────────────────────────── */
.summary-card__price-box--exact {
  padding: 16px;
}

.summary-card__price--exact {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink-muted, #6b7280);
}

.summary-card__price--exact .summary-card__price-number {
  font-size: 34px;
  font-weight: 800;
  color: #e03131;
  letter-spacing: -0.02em;
}

.summary-card__price--exact .summary-card__price-unit {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink-muted, #6b7280);
}

/* ─── 제조사 브랜드 chip — 박스 안에 심벌+한글 같이 ──── */
.brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-chip {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease;
}

.brand-chip:hover {
  transform: translateY(-1px);
}

.brand-chip__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 78px;
  height: 78px;
  padding: 8px 6px;
  background: #ffffff;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  transition: all 0.15s ease;
}

.brand-chip:hover .brand-chip__box {
  border-color: var(--color-ink, #1f1f1f);
}

.brand-chip[aria-pressed="true"] .brand-chip__box {
  border-color: #e03131;
  border-width: 2px;
  background: rgba(224, 49, 49, 0.04);
}

.brand-chip__box-img {
  width: 36px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-chip__box-mark {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-ink, #1f1f1f);
  letter-spacing: -0.04em;
  line-height: 1;
}

.brand-chip[aria-pressed="true"] .brand-chip__box-mark {
  color: #e03131;
}

.brand-chip__box-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink, #1f1f1f);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brand-chip[aria-pressed="true"] .brand-chip__box-name {
  color: #e03131;
  font-weight: 700;
}

/* All / 수입차 박스 — 텍스트만 */
.brand-chip__box--all .brand-chip__box-mark,
.brand-chip__box--import .brand-chip__box-mark {
  font-size: 22px;
  font-weight: 800;
}

/* ─── 가격 chip — 간격 좁히기 (왼쪽 정렬 + gap) ──────── */
.price-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

/* 모바일 대응 */
@media (max-width: 720px) {
  .brand-chip__box {
    width: 68px;
    height: 68px;
    padding: 6px 4px;
  }
  .brand-chip__box-img {
    width: 30px;
    height: 22px;
  }
  .brand-chip__box-name {
    font-size: 10px;
  }
  .brand-row {
    gap: 8px;
  }
  .price-row {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .brand-chip__box {
    width: 60px;
    height: 60px;
  }
  .brand-chip__box-img {
    width: 28px;
    height: 20px;
  }
  .brand-chip__box-mark {
    font-size: 16px;
  }
  .brand-chip__box-name {
    font-size: 9px;
  }
}

/* ─── 가격 옵션 표 v11: 선수금 컬럼 제거에 따른 조정 ── */
/* (기존 4컬럼 스타일 그대로 적용됨, 새 3컬럼이지만 자동 조정) */

/* ─── 약정 옵션이 1개 이하면 섹션 자체 숨김 (반납형) ── */
.filter-section[id="contract-section"][style*="none"] {
  display: none !important;
}

/* ============================================================
   v12 — 운영사 안내 섹션 (직영 / 큐레이션)
   ============================================================ */

.operator-info {
  border-radius: 12px;
  padding: 22px 24px;
  margin-top: 20px;
}

/* ─── 직영 (TAGO MOBILITY) — 차분한 회색 톤 ─────────── */
.operator-info--direct {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
}

.operator-info__badge--direct {
  display: inline-block;
  padding: 3px 10px;
  background: #1f1f1f;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ─── 큐레이션 (위탁) — 골드 강조 ───────────────────── */
.operator-info--curation {
  background: linear-gradient(135deg, rgba(197, 165, 114, 0.06), rgba(197, 165, 114, 0.02));
  border: 1px solid rgba(197, 165, 114, 0.25);
  border-left: 3px solid #C5A572;
}

.operator-info__badge--curation {
  display: inline-block;
  padding: 3px 10px;
  background: #C5A572;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ─── 공통 본문 ──────────────────────────────────────── */
.operator-info__main {
  margin-top: 12px;
}

.operator-info__name {
  font-size: 16px;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.operator-info__operator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}

.operator-info__operator-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.operator-info__operator-name {
  font-size: 14px;
  font-weight: 700;
  color: #1f1f1f;
}

.operator-info__operator-specialty {
  font-size: 12px;
  font-weight: 500;
  color: #b8893b;
  padding: 2px 8px;
  background: rgba(197, 165, 114, 0.1);
  border-radius: 999px;
}

.operator-info__desc {
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
  margin: 0;
}

.operator-info__desc strong {
  color: #1f1f1f;
  font-weight: 600;
}

/* ============================================================
   v12 — admin 자동 가격 계산 UI
   ============================================================ */

.admin-vehicle-price-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.admin-vehicle-price-row .field {
  flex: 1;
}

.auto-calc-btn {
  padding: 10px 16px;
  background: linear-gradient(135deg, #1f1f1f, #2d2d2d);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  height: 42px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auto-calc-btn:hover {
  background: linear-gradient(135deg, #e03131, #c92a2a);
  transform: translateY(-1px);
}

.auto-calc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.auto-calc-btn__icon {
  font-size: 14px;
}

.auto-calc-result {
  margin-top: 8px;
  padding: 12px 14px;
  background: rgba(197, 165, 114, 0.08);
  border-left: 3px solid #C5A572;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #4b5563;
}

.auto-calc-result.is-hidden { display: none; }

.auto-calc-result__label {
  font-weight: 700;
  color: #b8893b;
  margin-right: 4px;
}

.auto-calc-result strong {
  color: #1f1f1f;
  font-weight: 700;
}

/* ─── 자동 입력 시각 효과 ────────────────────────────── */
.field__input--auto-filled {
  background: rgba(197, 165, 114, 0.12) !important;
  border-color: #C5A572 !important;
  animation: autoFillPulse 1.5s ease-out;
}

@keyframes autoFillPulse {
  0%   { background: rgba(197, 165, 114, 0.3); transform: scale(1.005); }
  50%  { background: rgba(197, 165, 114, 0.18); }
  100% { background: rgba(197, 165, 114, 0); transform: scale(1); }
}

/* ============================================================
   v13 — 새 상세 페이지 (케이카 스타일)
   ============================================================ */

.detail-v13 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

/* ─── ① 상단 히어로 ──────────────────────────────────── */
.detail-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.detail-hero__media {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 280px;
}

.detail-hero__media .lease-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 2;
}

.lease-badge--acquisition { background: rgba(31, 31, 31, 0.85); }
.lease-badge--return { background: rgba(197, 165, 114, 0.95); }
.lease-badge--subscription { background: rgba(224, 49, 49, 0.9); }

.hero-photo-count {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  z-index: 2;
  border: none;
}

.hero-photo-count:hover { background: rgba(0, 0, 0, 0.9); }

.hero-main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  z-index: 0;
}

.hero-placeholder__brand {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0.7;
  margin-bottom: 8px;
}

.hero-placeholder__model {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 정보 카드 (우측) */
.detail-hero__info {
  background: #fff;
  border: 1.5px solid #1f1f1f;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}

.hero-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.hero-logo {
  width: 24px;
  height: 18px;
  object-fit: contain;
}

.hero-brand {
  font-weight: 600;
  letter-spacing: 0.3px;
}

.hero-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1f1f1f;
  margin: 0 0 10px;
  line-height: 1.25;
}

.hero-specs {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 18px;
}

/* v74: 조건 칩 */
.hero-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hero-chip {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 5px 10px;
  background: #f3f4f6;
  color: #7a7f8a;
}
.hero-chip--accent {
  background: #eef2fd;
  color: #5b73c4;
  border: 1px solid #d6e0fa;
}
.hero-chip--ins-excluded { background: #f3f4f6; color: #6b7280; }
.hero-chip--ins-split    { background: rgba(197,165,114,0.15); color: #b8893b; }
.hero-chip--ins-included { background: rgba(197,165,114,0.25); color: #a07b3a; }

/* 견적 조건 요약 체크리스트 (구버전 호환 유지) */
.hero-summary {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-summary li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
}

.hero-summary__check {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1f1f1f;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.hero-summary__insurance {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.hero-summary__insurance--excluded { background: #f3f4f6; color: #6b7280; }
.hero-summary__insurance--split    { background: rgba(197,165,114,0.15); color: #b8893b; }
.hero-summary__insurance--included { background: rgba(197,165,114,0.25); color: #a07b3a; }

/* CTA 버튼 */
.hero-cta {
  margin-top: auto;
  padding: 14px;
  background: #e03131;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
}

.hero-cta:hover {
  background: #c92a2a;
  transform: translateY(-1px);
}

/* ─── ② 갤러리 그리드 ────────────────────────────────── */
.gallery-grid-section {
  margin-bottom: 28px;
}

.detail-section__title {
  font-size: 17px;
  font-weight: 800;
  color: #1f1f1f;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section__hint {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

.gallery-grid__item {
  position: relative;
  padding: 0;
  border: none;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  transition: transform 0.15s ease;
}

.gallery-grid__item:hover {
  transform: scale(1.04);
  z-index: 1;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── ③ 정보 카드 그리드 ─────────────────────────────── */
.info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 28px;
}

.info-card {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.info-card__label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}

.info-card__value {
  font-size: 14px;
  color: #1f1f1f;
  font-weight: 700;
}

.info-card__value--ok {
  color: #16a34a;
  font-size: 12px;
}

/* ─── ⑤ 견적 계산기 ──────────────────────────────────── */
.quote-calculator {
  background: linear-gradient(135deg, #fafafa, #f3f4f6);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 28px;
}

.quote-calc-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 22px;
}

.quote-calc-field__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 10px;
}

.quote-calc-field__hint {
  font-size: 18px;
  font-weight: 800;
  color: #e03131;
}

.quote-calc-toggle {
  display: flex;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px;
}

.quote-calc-toggle__btn {
  flex: 1;
  padding: 9px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quote-calc-toggle__btn.is-active {
  background: #1f1f1f;
  color: #fff;
}

.quote-calc-slider {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  margin: 4px 0;
}

.quote-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: #e03131;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.quote-calc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #e03131;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.quote-calc-marks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #9ca3af;
  margin-top: 6px;
  font-weight: 600;
}

/* 결과 박스 */
.quote-calc-result {
  background: #1f1f1f;
  color: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.quote-calc-result__label {
  font-size: 12px;
  color: #a3a3a3;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 8px;
}

.quote-calc-result__price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.quote-calc-result__price strong {
  font-size: 42px;
  font-weight: 800;
  color: #C5A572;
  letter-spacing: -0.03em;
  margin: 0 2px;
}

.quote-calc-result__hint {
  font-size: 12px;
  color: #d1d5db;
  margin-bottom: 14px;
}

.quote-calc-result__cta {
  padding: 12px 28px;
  background: #C5A572;
  color: #1f1f1f;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quote-calc-result__cta:hover {
  background: #b8893b;
  color: #fff;
}

/* ─── ⑥ 보험 + 운영 2열 그리드 ───────────────────────── */
.detail-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.detail-bottom-grid .detail-section,
.detail-bottom-grid > section {
  margin: 0;
}

/* ─── ⑦ 모바일 하단 sticky CTA ───────────────────────── */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 12px 16px;
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  align-items: center;
  gap: 12px;
}

.mobile-sticky-cta__info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mobile-sticky-cta__label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}

.mobile-sticky-cta__price {
  font-size: 18px;
  font-weight: 800;
  color: #e03131;
}

.mobile-sticky-cta__btn {
  padding: 12px 22px;
  background: #e03131;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ─── 모바일 반응형 ──────────────────────────────────── */
@media (max-width: 880px) {
  .detail-v13 { padding: 16px 12px 90px; }

  .detail-hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .detail-hero__media {
    aspect-ratio: 16 / 11;
    min-height: 0;
  }

  .gallery-grid { grid-template-columns: repeat(6, 1fr); }

  .info-cards { grid-template-columns: repeat(2, 1fr); }

  .quote-calc-body { grid-template-columns: 1fr; gap: 18px; }

  .detail-bottom-grid { grid-template-columns: 1fr; }

  .mobile-sticky-cta { display: flex; }

  .hero-cta { display: none; }  /* 모바일은 sticky CTA로 대체 */
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }

  .hero-name { font-size: 19px; }
  .hero-price__num { font-size: 28px; }
  .quote-calc-result__price strong { font-size: 36px; }
}

/* ============================================================
   v13 — admin 동적 사진 업로더 (최대 20장)
   ============================================================ */

.photo-count-badge {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 10px;
  background: #1f1f1f;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.photo-grid-v13 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.photo-item {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  cursor: move;
}

.photo-item--main {
  border-color: #e03131;
  border-width: 3px;
}

.photo-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-item__main-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 8px;
  background: #e03131;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  z-index: 2;
}

.photo-item__num {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
}

.photo-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 1;
}

.photo-item:hover .photo-item__overlay { opacity: 1; }

.photo-item__btn {
  width: 32px;
  height: 32px;
  background: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-item__btn--remove {
  background: #e03131;
  color: #fff;
}

.photo-item__btn:hover { transform: scale(1.1); }

/* "사진 추가" 버튼 */
.photo-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 4 / 3;
  background: #fafafa;
  border: 2px dashed #cbd5e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #6b7280;
}

.photo-add-btn:hover {
  background: #f0f9ff;
  border-color: #3b82f6;
  color: #3b82f6;
}

.photo-add-btn__icon {
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
}

.photo-add-btn__text {
  font-size: 13px;
  font-weight: 700;
}

.photo-add-btn__hint {
  font-size: 10px;
  opacity: 0.7;
}

.photo-empty-hint {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .photo-grid-v13 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   v13.2 — 럭셔리 톤 (다크+골드, 차량정보 아이콘 카드, 운영 안내 책임 분담)
   ============================================================ */

/* ─── 가격 박스 — 다크 + 골드 (노랑 베이지 폐기) ───────── */
.hero-price {
  background: linear-gradient(145deg, #23262d 0%, #15171c 100%);
  border-radius: 16px;
  padding: 20px 18px;
  margin-bottom: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.hero-price::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #C5A572 50%, transparent 100%);
}

.hero-price::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(197,165,114,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* v74: 월 구독료 라벨 + 헤드 */
.hero-price__label {
  display: block;
  font-size: 12px;
  color: #9b9fa8;
  letter-spacing: 1px;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}
.hero-price__head {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 1;
}

.hero-price__main {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.hero-price__num {
  font-size: 46px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 4px;
}

.hero-price__unit {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.hero-price__exact {
  font-size: 13px;
  color: #a9adb6;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.hero-price__cond {
  font-size: 12px;
  color: #a9adb6;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* v74: 보증금/약정 2단 */
.hero-price__split {
  display: flex;
  padding-top: 14px;
  position: relative;
  z-index: 1;
}
.hero-price__cell {
  flex: 1;
  text-align: center;
}
.hero-price__divider {
  width: 1px;
  background: rgba(255,255,255,0.12);
}
.hero-price__cell-label {
  font-size: 11px;
  color: #9b9fa8;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.hero-price__cell-label--deposit {
  color: #c5a572;
}
.hero-price__cell-value {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
}
.hero-price__cell-unit {
  font-size: 13px;
  font-weight: 600;
  margin-left: 1px;
}

/* ─── 히어로 정보 카드 — 더 우아하게 ──────────────────── */
.detail-hero__info {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.hero-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1a1a1a;
  margin: 0 0 12px;
  line-height: 1.25;
}

.hero-brand {
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 11px;
  text-transform: uppercase;
  color: #9ca3af;
}

.hero-specs {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}

/* 체크리스트 — 더 우아한 톤 */
.hero-summary {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-summary li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #374151;
  letter-spacing: 0.2px;
}

.hero-summary__check {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a, #404040);
  color: #C5A572;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* CTA — 럭셔리하게 (red 유지하되 더 깊이감) */
.hero-cta {
  margin-top: auto;
  padding: 15px 20px;
  background: linear-gradient(135deg, #e03131, #c92a2a);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(224, 49, 49, 0.25);
}

.hero-cta:hover {
  background: linear-gradient(135deg, #c92a2a, #a01f1f);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224, 49, 49, 0.35);
}

/* ─── 차량 정보 카드 — 아이콘 + 호버 + 골드 액센트 ─────── */
.info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.info-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: default;
}

.info-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #C5A572 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-card:hover {
  border-color: #C5A572;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.info-card:hover::before { opacity: 1; }

.info-card__icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C5A572;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.info-card:hover .info-card__icon {
  background: linear-gradient(135deg, #C5A572, #a07b3a);
  color: #fff;
}

.info-card__icon--ok {
  color: #16a34a;
}

.info-card:hover .info-card__icon--ok {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
}

.info-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.info-card__label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.info-card__value {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.info-card__value--ok {
  color: #16a34a;
  font-size: 14px;
}

/* ─── 운영 안내 — 책임 분담 리스트 (v13.2) ──────────────── */
.operator-info__intro {
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
  margin: 12px 0 14px;
}

.operator-info__intro strong {
  color: #1a1a1a;
  font-weight: 700;
}

.operator-info__roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.operator-info__roles li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: start;
  padding: 10px 14px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  border-left: 2px solid #C5A572;
}

.operator-info--direct .operator-info__roles li {
  background: rgba(255,255,255,0.7);
  border-left-color: #1a1a1a;
}

.operator-info__role-key {
  font-size: 12px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.3px;
}

.operator-info__role-key--customer {
  color: #e03131;
}

.operator-info__role-val {
  font-size: 12.5px;
  color: #4b5563;
  line-height: 1.6;
}

/* ─── 섹션 제목 — 좀 더 우아하게 ─────────────────────── */
.detail-section__title {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-section__hint {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ─── 차량 정보 섹션 배경 (살짝 다른 톤) ─────────────── */
.detail-section {
  background: #fff;
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 16px;
  border: 1px solid #f3f4f6;
}

/* 갤러리 섹션은 더 컴팩트 */
.gallery-grid-section {
  padding: 20px 22px;
}

/* ─── 모바일 반응형 추가 다듬기 ──────────────────────── */
@media (max-width: 880px) {
  .info-cards { gap: 8px; }
  .info-card { padding: 14px 12px; gap: 10px; }
  .info-card__icon { width: 32px; height: 32px; }
  .info-card__value { font-size: 13px; }

  .operator-info__roles li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 12px;
  }
  .operator-info__role-key { font-size: 11px; }

  .hero-price__num { font-size: 32px; }
}

/* ============================================================
   v13.3 — 상품 배지 강화 + 출고 조건 + 빵부스러기 + 정보 카드 4개
   ============================================================ */

/* ─── 히어로 상품 배지 (큰 라벨) ────────────────────── */
.hero-product-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  color: #C5A572;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  align-self: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 1px solid rgba(197,165,114,0.3);
}

.hero-product-tag--return {
  background: linear-gradient(135deg, #a07b3a, #C5A572);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.hero-product-tag--subscription {
  background: linear-gradient(135deg, #c92a2a, #e03131);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.hero-product-tag__icon {
  font-size: 11px;
}

.hero-product-tag__divider {
  opacity: 0.5;
}

/* 메인 사진 위 배지 - 더 크게 + 럭셔리 */
.detail-hero__media .lease-badge {
  padding: 8px 16px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* ─── 정보 카드 — 4개 그리드 (간소화) ──────────────────── */
.info-cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.info-card--highlight {
  background: linear-gradient(135deg, rgba(22,163,74,0.04), rgba(22,163,74,0.01));
  border-color: rgba(22,163,74,0.25);
}

/* 추가 정보 행 (배기량/색상/차량번호) */
.info-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}

.info-extra__item {
  font-size: 12px;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-extra__label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ─── 차량 출고 조건 섹션 (v13.3 NEW) ──────────────────── */
.delivery-req-section {
  background: linear-gradient(135deg, #fafafa, #f9fafb);
  border: 1px solid #e8e8e8;
}

.delivery-req-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.delivery-req__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  transition: all 0.15s ease;
}

.delivery-req__item:hover {
  border-color: #C5A572;
  transform: translateY(-1px);
}

.delivery-req__check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C5A572, #a07b3a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.delivery-req__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.delivery-req__label {
  font-size: 13px;
  font-weight: 800;
  color: #1a1a1a;
}

.delivery-req__desc {
  font-size: 11px;
  color: #6b7280;
}

.delivery-req__note {
  font-size: 12px;
  line-height: 1.7;
  color: #4b5563;
  background: rgba(197,165,114,0.06);
  padding: 12px 14px;
  border-radius: 8px;
  margin: 0;
  border-left: 3px solid #C5A572;
}

/* ─── 빵부스러기 (명확화) ──────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  font-size: 13px;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: #4b5563;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.15s ease;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.breadcrumb a::before {
  content: '←';
  font-size: 14px;
  font-weight: 800;
}

.breadcrumb a:hover {
  background: #1a1a1a;
  color: #C5A572;
  border-color: #1a1a1a;
  transform: translateX(-2px);
}

.breadcrumb__sep {
  color: #d1d5db;
  font-size: 14px;
}

.breadcrumb__current {
  color: #1a1a1a;
  font-weight: 700;
}

/* ─── 사이트 헤더 로고 — 클릭 가능 명확화 ─────────────── */
.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  color: #1a1a1a;
  font-size: 17px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.site-logo:hover {
  background: rgba(197,165,114,0.08);
  color: #1a1a1a;
}

.site-logo__sub {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ─── 모바일 ────────────────────────────────────────── */
@media (max-width: 880px) {
  .info-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .delivery-req-list { grid-template-columns: 1fr; }
  .hero-product-tag { font-size: 11px; padding: 6px 12px; }
  .info-extra { gap: 8px 16px; font-size: 11px; }
}

/* ============================================================
   v13.5 — 메인 카드 럭셔리 톤 통일 (상세 페이지와 매칭)
   ============================================================ */

.car-card--luxury {
  position: relative;
  border: 0.5px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.25s ease, border-color 0.25s ease;
}
.car-card--luxury::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(180deg, #C5A572 0%, #a07b3a 100%);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s ease; z-index: 4; pointer-events: none;
}
.car-card--luxury:hover {
  transform: translateY(-3px);
  border-color: rgba(197, 165, 114, 0.4);
  box-shadow: 0 12px 28px -10px rgba(26, 26, 26, 0.18),
              0 4px 12px -4px rgba(197, 165, 114, 0.1);
}
.car-card--luxury:hover::before { transform: scaleY(1); }

.car-card--luxury .car-card__lease-tag {
  background: #1a1a1a; color: #C5A572;
  border: 1px solid rgba(197, 165, 114, 0.4);
  border-radius: 4px; padding: 4px 11px;
  letter-spacing: 0.3px; font-weight: 600;
  backdrop-filter: blur(8px);
}
.car-card--luxury .lease-tag--return,
.car-card--luxury .lease-tag--acquisition,
.car-card--luxury .lease-tag--subscription {
  background: #1a1a1a; color: #C5A572;
}

.car-card--luxury .car-card__brand-line {
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px;
}
.car-card--luxury .car-card__brand-line .car-card__logo { text-transform: none; }
.car-card--luxury .car-card__name { font-weight: 600; letter-spacing: -0.01em; }

.car-card--luxury .car-card__price-box--luxury {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 8px; padding: 12px 14px; margin-top: 6px;
  border: 0.5px solid rgba(197, 165, 114, 0.15);
}
.car-card--luxury .car-card__price-box--luxury .car-card__price-row {
  border-top: none; padding: 0;
  display: flex; align-items: baseline; justify-content: space-between;
}
.car-card--luxury .car-card__price-box--luxury .car-card__price-label {
  color: #d4b896; font-size: 10px; letter-spacing: 0.5px;
  text-transform: uppercase; font-weight: 500;
}
.car-card--luxury .car-card__price-box--luxury .car-card__price {
  color: #C5A572; font-weight: 600; font-size: 16px;
}
.car-card--luxury .car-card__price-box--luxury .car-card__price--exact { font-size: 16px; }
.car-card--luxury .car-card__price-box--luxury .car-card__price-number {
  font-size: 24px; font-weight: 600; color: #C5A572; letter-spacing: -0.01em;
}
.car-card--luxury .car-card__price-box--luxury .car-card__price-unit {
  color: #d4b896; font-size: 11px; margin-left: 2px; font-weight: 500;
}
.car-card--luxury .car-card__price-box--luxury .car-card__price-condition {
  font-size: 10px; color: #9ca3af; margin-top: 5px; text-align: right;
  letter-spacing: 0.2px;
}
.car-card--luxury .car-card__price-box--luxury .car-card__price-insurance {
  color: rgba(197, 165, 114, 0.7); font-size: 10px; font-weight: 500;
}

.car-card--luxury .car-card__actions { border-top: 0.5px solid #e5e7eb; }
.car-card--luxury .car-card__btn--detail {
  background: #ffffff; color: #1a1a1a; font-weight: 500;
  letter-spacing: 0.2px; transition: background 0.15s ease, color 0.15s ease;
}
.car-card--luxury .car-card__btn--detail:hover { background: #1a1a1a; color: #C5A572; }
.car-card--luxury .car-card__btn--consult { font-weight: 600; letter-spacing: 0.2px; }

@media (max-width: 720px) {
  .car-card--luxury .car-card__price-box--luxury { padding: 10px 12px; }
  .car-card--luxury .car-card__price-box--luxury .car-card__price-number { font-size: 22px; }
  .car-card--luxury .car-card__brand-line { font-size: 9px; }
}

   v13.6 — Admin Phase 1 (필터링 + 통계 + 일괄작업 + 미리보기)
   ============================================================ */

/* 통계 카드 4개 그리드 (6번 아이디어) */
.admin-stats--4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.admin-stat {
  background: #f9fafb;
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 3px solid #C5A572;
  transition: transform 0.15s ease;
}
.admin-stat:hover { transform: translateY(-1px); }

.admin-stat--urgent {
  background: #fff7ed;
  border-left-color: #c2410c;
}
.admin-stat--urgent .admin-stat__value { color: #c2410c; }

.admin-stat__label {
  font-size: 11px;
  color: #6b7280;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.admin-stat__value {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
}
.admin-stat__value span {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  margin-left: 3px;
}
.admin-stat__value--small {
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  font-weight: 500;
}
.admin-stat__sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}

/* 액션 바 (검색 + 프리셋 + 추가) */
.admin-action-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.admin-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}
.admin-search__input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.admin-search__input:focus {
  outline: none;
  border-color: #C5A572;
  box-shadow: 0 0 0 3px rgba(197,165,114,0.15);
}

/* 필터 섹션 */
.admin-filter-section {
  background: #fafafa;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.admin-filter-section--admin {
  border-left: 3px solid #C5A572;
  padding-left: 18px;
  background: linear-gradient(90deg, rgba(197,165,114,0.05), transparent 30%);
}
.admin-filter-section__title {
  font-size: 11px;
  font-weight: 600;
  color: #C5A572;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.admin-filter-section__subtitle {
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 14px;
}
.admin-filter-group { margin-bottom: 14px; }
.admin-filter-group:last-child { margin-bottom: 0; }
.admin-filter-group__label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.3px;
}

/* 칩 (메인 페이지와 동일 톤) */
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-chip {
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: #1a1a1a;
}
.admin-chip:hover { border-color: #C5A572; }
.admin-chip--active {
  background: #1a1a1a;
  color: #C5A572;
  border-color: #1a1a1a;
  font-weight: 500;
}
.admin-chip__count {
  color: #9ca3af;
  font-size: 11px;
  margin-left: 4px;
}
.admin-chip--active .admin-chip__count { color: #d4b896; }

/* 정렬 */
.admin-sort-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0 0;
  border-top: 1px dashed #e5e7eb;
  margin-top: 12px;
}
.admin-sort-row label { font-size: 12px; color: #6b7280; font-weight: 500; }
.admin-sort-row select {
  padding: 6px 28px 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
}

/* 결과 바 (8번 아이디어, 다크) */
.admin-result-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-result-bar__count { font-size: 13px; }
.admin-result-bar__count strong { color: #C5A572; font-weight: 600; }
.admin-result-bar__reset {
  background: none;
  border: 1px solid #4b5563;
  color: #d1d5db;
  padding: 4px 12px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.admin-result-bar__reset:hover {
  border-color: #C5A572;
  color: #C5A572;
}

/* 빈 결과 */
.admin-empty-result {
  background: #fafafa;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
}
.admin-empty-result p {
  color: #6b7280;
  margin-bottom: 14px;
  font-size: 14px;
}

/* 체크박스 셀 */
.admin-checkbox-cell {
  width: 36px;
  text-align: center;
}
.admin-row-checkbox, #admin-select-all {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #C5A572;
}
.admin-row--selected {
  background: rgba(197,165,114,0.06) !important;
}

/* 리스 pill 색상 분기 (table 안) */
.admin-table .lease-pill--acq {
  background: #1a1a1a; color: #C5A572;
}
.admin-table .lease-pill--ret {
  background: #1e3a8a; color: #bfdbfe;
}
.admin-table .lease-pill--sub {
  background: #14532d; color: #86efac;
}

/* 일괄 작업 바 (다크) */
.admin-bulk-bar {
  background: #1a1a1a;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.2);
  position: sticky;
  bottom: 20px;
  z-index: 50;
}
.admin-bulk-bar__count { font-size: 13px; }
.admin-bulk-bar__count strong { color: #C5A572; font-weight: 600; }
.admin-bulk-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-bulk-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid #4b5563;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.admin-bulk-btn:hover {
  background: rgba(197,165,114,0.2);
  border-color: #C5A572;
  color: #C5A572;
}
.admin-bulk-btn--danger { color: #fca5a5; }
.admin-bulk-btn--danger:hover {
  background: rgba(220,38,38,0.2);
  border-color: #ef4444;
  color: #fca5a5;
}

/* 프리셋 드롭다운 (5번 아이디어) */
.preset-dropdown {
  position: absolute;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  margin-top: 4px;
  min-width: 280px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.15);
  z-index: 100;
}
.preset-dropdown__title {
  font-size: 11px;
  color: #C5A572;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 8px 12px 6px;
}
.preset-list { max-height: 200px; overflow-y: auto; }
.preset-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
}
.preset-item__apply {
  flex: 1;
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.preset-item__apply:hover { background: #f3f4f6; }
.preset-item__delete {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-family: inherit;
}
.preset-item__delete:hover { background: #fef2f2; color: #c92a2a; }
.preset-empty {
  font-size: 12px;
  color: #9ca3af;
  padding: 16px;
  text-align: center;
}
.preset-save-btn {
  width: 100%;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  padding: 10px;
  font-size: 12px;
  color: #6b7280;
  border-radius: 6px;
  margin-top: 8px;
  cursor: pointer;
  font-family: inherit;
}
.preset-save-btn:hover {
  background: #fff;
  border-color: #C5A572;
  color: #C5A572;
}

/* 미리보기 모달 카드 (3번 아이디어) */
.preview-card-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.preview-card {
  width: 280px;
  background: #fff;
  border: 0.5px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.1);
  position: relative;
}
.preview-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #C5A572, #a07b3a);
  z-index: 4;
}
.preview-card__media {
  position: relative;
  aspect-ratio: 4/3;
  background: #4a4a4a;
}
.preview-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.preview-card__lease-tag {
  position: absolute;
  top: 10px; left: 10px;
  background: #1a1a1a;
  color: #C5A572;
  border: 1px solid rgba(197,165,114,0.4);
  padding: 4px 11px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.preview-card__body { padding: 14px 16px; }
.preview-card__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #6b7280;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.preview-card__name {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.preview-card__specs {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}
.preview-card__price-box {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 4px;
}
.preview-card__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.preview-card__price-label {
  color: #d4b896;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.preview-card__price-value {
  color: #C5A572;
  font-size: 16px;
  font-weight: 500;
}
.preview-card__price-value strong {
  font-size: 24px;
  font-weight: 600;
}
.preview-card__price-condition {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 5px;
  text-align: right;
}
.preview-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-top: 0.5px solid #e5e7eb;
}
.preview-card__btn {
  text-align: center;
  padding: 11px;
  font-size: 12px;
  font-weight: 500;
}
.preview-card__btn--detail { background: #fff; color: #1a1a1a; }
.preview-card__btn--consult { background: #e03131; color: #fff; font-weight: 600; }

.preview-info {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
  font-size: 12px;
}
.preview-info__item { display: flex; flex-direction: column; gap: 2px; }
.preview-info__item span { color: #9ca3af; font-size: 11px; }
.preview-info__item strong { color: #1a1a1a; font-weight: 500; }

.preview-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.preview-actions .btn {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.preview-actions .btn--primary { background: #1a1a1a; color: #fff; border: none; }
.preview-actions .btn--ghost { background: #fff; color: #1a1a1a; border: 1px solid #e5e7eb; }

/* btn 헬퍼 (admin 전용, action bar 등에서 사용) */
.btn--ghost {
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #1a1a1a;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.btn--ghost:hover { border-color: #C5A572; color: #C5A572; }

/* 모바일 반응형 */
@media (max-width: 720px) {
  .admin-stats--4col { grid-template-columns: repeat(2, 1fr); }
  .admin-action-bar { flex-direction: column; align-items: stretch; }
  .admin-search { width: 100%; }
  .preview-info { grid-template-columns: 1fr; }
  .preview-actions { flex-direction: column; }
  .preview-actions .btn { text-align: center; }
  .admin-bulk-bar { flex-direction: column; align-items: stretch; }
  .admin-bulk-bar__actions { justify-content: stretch; }
  .admin-bulk-btn { flex: 1; }
}

/* ============================================================
   v13.7 — 모바일 반응형 점검 (★★★ 3가지 핵심 개선)
   ------------------------------------------------------------
   1. Admin 테이블 → 모바일 카드 형식
   2. Admin 필터 접기/펴기 (details/summary)
   3. 상담 모달 모바일 풀스크린 시트
   ------------------------------------------------------------
   데스크탑은 v13.6 그대로 유지, 모바일(720px↓)에서만 변형
   ============================================================ */

/* ─── 필터 details/summary 기본 처리 ─────────────────── */
/* 데스크탑: 항상 펼쳐진 상태, summary 숨김 */
.admin-filter-wrap {
  display: block;
}
.admin-filter-wrap[open] .admin-filter-toggle__chevron {
  transform: rotate(180deg);
}
.admin-filter-toggle {
  list-style: none;
  cursor: pointer;
  display: none; /* 데스크탑에선 토글 버튼 숨김 */
}
.admin-filter-toggle::-webkit-details-marker { display: none; }
.admin-filter-toggle::marker { content: ''; }

/* 데스크탑: details/summary 무시하고 항상 보이게 */
.admin-filter-wrap:not([open]) .admin-filter-panel-body,
.admin-filter-wrap[open] .admin-filter-panel-body {
  display: block;
}

/* ============================================================
   모바일 — 720px 이하
   ============================================================ */
@media (max-width: 720px) {

  /* ─── 1. Admin 필터 접기/펴기 ─────────────────────── */
  .admin-filter-wrap {
    background: #fafafa;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .admin-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    color: #1a1a1a;
    user-select: none;
  }
  .admin-filter-toggle__text { display: flex; align-items: center; gap: 8px; }
  .admin-filter-toggle__badge {
    background: #C5A572;
    color: #1a1a1a;
    padding: 2px 8px;
    font-size: 10px;
    border-radius: 999px;
    font-weight: 600;
  }
  .admin-filter-toggle__chevron {
    color: #C5A572;
    font-size: 14px;
    transition: transform 0.2s ease;
  }

  /* 닫혀있을 때 본문 숨김 (details/summary 표준) */
  .admin-filter-wrap:not([open]) .admin-filter-panel-body {
    display: none;
  }

  /* 모바일에서는 필터 섹션 자체의 좌측 골드 라인 제거 (이미 wrap이 가짐) */
  .admin-filter-wrap[open] .admin-filter-panel-body {
    padding: 4px 8px 8px;
  }
  .admin-filter-section { margin-bottom: 8px; padding: 12px; }
  .admin-filter-section--admin {
    background: linear-gradient(180deg, rgba(197,165,114,0.06), transparent);
    border-left: none;
    border-top: 2px solid rgba(197,165,114,0.2);
    padding-left: 12px;
  }

  /* ─── 2. Admin 테이블 → 카드 형식 ─────────────────── */
  .admin-table-wrap {
    border: none;
    background: transparent;
  }
  .admin-table { width: 100%; background: transparent; }
  .admin-table thead { display: none; }
  .admin-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* 각 row를 카드로 변형 */
  .admin-table tbody tr {
    display: grid;
    grid-template-areas:
      "photo  name    check"
      "photo  meta    lease"
      "photo  price   price"
      "actions actions actions";
    grid-template-columns: 56px 1fr auto;
    gap: 4px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #C5A572;
    border-radius: 8px;
    padding: 10px 12px;
    position: relative;
    align-items: center;
  }
  .admin-table tbody tr.admin-row--muted {
    border-left-color: #d1d5db;
    background: #f9fafb;
  }
  .admin-table tbody tr.admin-row--selected {
    background: rgba(197,165,114,0.08);
    border-left-color: #1a1a1a;
  }

  /* 모든 td 공통 */
  .admin-table tbody td {
    display: block;
    padding: 0;
    border: none;
    font-size: 12px;
  }

  /* 체크박스 셀: 우상단 */
  .admin-table tbody td.admin-checkbox-cell {
    grid-area: check;
    width: auto;
    text-align: right;
  }

  /* 차량 셀: 사진+이름 */
  .admin-table tbody td[data-label="차량"] {
    grid-area: name;
    overflow: hidden;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell {
    gap: 0;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell__photo {
    display: none; /* 그리드 area로 별도 배치하므로 인라인 사진은 숨김 */
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell__name {
    font-size: 13px;
  }

  /* 사진 area: tr::before 가짜 요소로 처리 어렵고, 첫 번째 td 사진을 별도 옮기는 게 어려움 */
  /* → 대신 사진을 그대로 차량 셀에 두되 photo만 grid-area에 넣음 */
  /* JS에서 photo만 분리하지 않고 CSS만으로 처리하려면 :nth-child 활용 */
  .admin-table tbody td[data-label="차량"] .admin-car-cell {
    display: flex;
    flex-direction: column;
  }
  .admin-table tbody tr {
    grid-template-areas:
      "name    name    check"
      "meta    meta    lease"
      "price   price   public"
      "actions actions actions";
    grid-template-columns: 1fr 1fr auto;
    padding-left: 16px;
  }
  .admin-table tbody td.admin-checkbox-cell {
    grid-area: check;
    align-self: start;
  }
  .admin-table tbody td[data-label="차량"] {
    grid-area: name;
  }

  /* 라벨 표시 (data-label 활용) */
  .admin-table tbody td[data-label="차량"]::before { display: none; }
  .admin-table tbody td.admin-checkbox-cell::before { display: none; }

  .admin-table tbody td[data-label="제조사 / 차급"] {
    grid-area: meta;
    color: #6b7280;
    font-size: 11px;
  }
  .admin-table tbody td[data-label="제조사 / 차급"]::before {
    display: none;
  }
  .admin-table tbody td[data-label="제조사 / 차급"] > div { display: inline; }
  .admin-table tbody td[data-label="제조사 / 차급"] > div:not(:last-child)::after {
    content: " · ";
    color: #d1d5db;
  }
  .admin-table tbody td[data-label="제조사 / 차급"] .text-muted::after {
    content: "";
  }

  .admin-table tbody td[data-label="리스"] {
    grid-area: lease;
    text-align: right;
  }

  .admin-table tbody td[data-label="월 가격"] {
    grid-area: price;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: left;
  }
  .admin-table tbody td[data-label="월 가격"]::before {
    content: "월 ";
    font-size: 10px;
    color: #9ca3af;
    font-weight: 400;
  }

  .admin-table tbody td[data-label="공개"] {
    grid-area: public;
    text-align: right;
  }

  /* 액션 (전체 너비) */
  .admin-table tbody td[data-label="액션"] {
    grid-area: actions;
    border-top: 1px solid #f3f4f6;
    padding-top: 8px;
    margin-top: 4px;
  }
  .admin-table tbody td[data-label="액션"] .admin-actions {
    display: flex;
    gap: 4px;
    justify-content: stretch;
  }
  .admin-table tbody td[data-label="액션"] .admin-actions > * {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1a1a1a;
  }
  .admin-table tbody td[data-label="액션"] .admin-actions > *.admin-link--danger {
    color: #c92a2a;
    border-color: #fef2f2;
    background: #fef2f2;
  }

  /* 액션 ".admin-help" 텍스트 모바일에서 작게 */
  .admin-help {
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.6;
    padding: 0 8px;
  }

  /* 통계 카드: 4개 → 2x2 (이미 v13.6에서 처리됨) */
  .admin-stats--4col { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .admin-stat { padding: 10px 12px; }
  .admin-stat__value { font-size: 18px; }
  .admin-stat__value--small { font-size: 12px; }

  /* 결과 바, 일괄 작업 바 모바일 정돈 */
  .admin-result-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .admin-result-bar__count { font-size: 12px; }
  .admin-result-bar__reset { align-self: flex-start; }

  .admin-bulk-bar {
    flex-direction: column;
    align-items: stretch;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    margin: 0 -8px 0 -8px;
  }
  .admin-bulk-bar__count { text-align: center; }
  .admin-bulk-bar__actions { gap: 6px; }
  .admin-bulk-btn { flex: 1; font-size: 11px; padding: 8px; }

  /* 검색바 + 추가 버튼: 1줄 → 2줄 */
  .admin-action-bar { flex-direction: column; gap: 8px; }
  .admin-action-bar .btn--ghost,
  .admin-action-bar .cta-button { width: 100%; text-align: center; }

  /* 칩들 살짝 작게 */
  .admin-chip { font-size: 11px; padding: 5px 10px; }

  /* ─── 3. 상담 모달 풀스크린화 ─────────────────────── */
  #consult-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  #consult-modal .modal__overlay {
    background: transparent;
  }
  #consult-modal .modal__card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
  }
  #consult-modal .modal__close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 100;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }
  #consult-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px 100px; /* 하단 100px = 신청하기 버튼 영역 확보 */
    -webkit-overflow-scrolling: touch;
  }

  /* 신청하기 버튼을 화면 하단에 sticky */
  #consult-content form .cta-button[type="submit"] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  }

  /* 신청하기 아래 안내 텍스트도 sticky 영역 위로 */
  #consult-content form .field__notice {
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 4px 16px;
    margin: 0;
    text-align: center;
    font-size: 10px;
    color: #9ca3af;
    z-index: 49;
    border-top: 1px solid #f3f4f6;
  }

  /* 견적 조건 그리드 1열로 */
  .modal__quote-summary-grid { grid-template-columns: 1fr !important; }
  .modal__quote-summary { padding: 12px 14px !important; }

  /* 같은 풀스크린 처리: 상담 상세 모달 (admin) */
  #consult-detail-modal,
  #preview-modal {
    padding: 0;
    align-items: stretch;
  }
  #consult-detail-modal .modal__card,
  #preview-modal .modal__card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto;
  }
  #consult-detail-modal .modal__overlay,
  #preview-modal .modal__overlay { background: transparent; }
  #consult-detail-modal .modal__close,
  #preview-modal .modal__close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 100;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  /* 미리보기 모달 카드 그리드 모바일 1열 */
  .preview-info { grid-template-columns: 1fr; gap: 8px; }
  .preview-actions { flex-direction: column; gap: 8px; }

  /* 프리셋 드롭다운 모바일 풀너비 */
  .preset-dropdown {
    position: fixed;
    left: 8px;
    right: 8px;
    min-width: 0;
    margin-top: 0;
    bottom: auto;
  }
}

/* 아주 작은 모바일 (380px↓) — 추가 미세 조정 */
@media (max-width: 380px) {
  .admin-table tbody tr {
    grid-template-columns: 1fr 1fr auto;
    padding: 8px 10px;
  }
  .admin-stat__value { font-size: 16px; }
  .admin-chip { font-size: 10px; padding: 4px 8px; }
  .admin-bulk-btn { font-size: 10px; padding: 6px; }
}

/* ============================================================
   v13.8 — Admin 모바일 카드 표시 수정 패치
   ------------------------------------------------------------
   v13.7 적용 후 발견된 문제 2가지 수정:
   1) 차량명/제조사가 모바일 카드에 안 보이는 문제
   2) 액션 버튼이 세로로 배치되는 문제
   ============================================================ */

@media (max-width: 720px) {
  /* === 문제 1 수정: 차량명/제조사 표시 강제 === */
  .admin-table tbody td[data-label="차량"] {
    grid-area: name;
    overflow: visible !important;
    min-height: 32px;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell__photo {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell__info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell__name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    display: block !important;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-table tbody td[data-label="차량"] .admin-car-cell__id {
    font-size: 11px !important;
    color: #9ca3af !important;
    display: block !important;
    line-height: 1.3;
  }

  /* 제조사 / 차급 명시적 표시 */
  .admin-table tbody td[data-label="제조사 / 차급"] {
    color: #6b7280 !important;
    font-size: 11px !important;
    display: block !important;
  }
  .admin-table tbody td[data-label="제조사 / 차급"] > div {
    display: inline !important;
    color: inherit !important;
  }

  /* === 문제 2 수정: 액션 버튼 가로 강제 === */
  .admin-table tbody td[data-label="액션"] {
    grid-area: actions;
  }
  .admin-table tbody td[data-label="액션"] .admin-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100%;
  }
  .admin-table tbody td[data-label="액션"] .admin-actions > * {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 7px 4px !important;
    font-size: 11px !important;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    display: block !important;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
  }
  .admin-table tbody td[data-label="액션"] .admin-actions > .admin-link--danger {
    color: #c92a2a !important;
    background: #fef2f2 !important;
    border-color: #fee2e2 !important;
  }

  /* 통계 카드 더 컴팩트 (375px iPhone SE 대응) */
  .admin-stats--4col {
    gap: 6px;
  }
  .admin-stat {
    padding: 8px 10px !important;
  }
  .admin-stat__label {
    font-size: 10px !important;
    line-height: 1.3;
  }
  .admin-stat__value {
    font-size: 18px !important;
  }
  .admin-stat__value--small {
    font-size: 11px !important;
    line-height: 1.5;
  }
  .admin-stat__sub {
    font-size: 10px !important;
    line-height: 1.3;
  }
}

/* ============================================================
   v13.9 — Admin 모바일 카드 명시적 마크업 (확실한 해결)
   ------------------------------------------------------------
   v13.7/v13.8에서 CSS 충돌로 차량명이 안 보이던 문제를
   HTML 마크업을 데스크탑/모바일 분리해서 확실하게 해결.
   ============================================================ */

/* 모바일 카드 마크업은 기본적으로 숨김 (데스크탑에서) */
.admin-car-mobile {
  display: none;
}

/* 모바일에서만 마크업 분기 */
@media (max-width: 720px) {
  /* 데스크탑용 .admin-car-cell 숨김 */
  .admin-table tbody td[data-label="차량"] .admin-car-cell {
    display: none !important;
  }

  /* 모바일용 마크업 표시 */
  .admin-table tbody td[data-label="차량"] .admin-car-mobile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* 사진 36×36 */
  .admin-car-mobile__photo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
  }
  .admin-car-mobile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 텍스트 영역 */
  .admin-car-mobile__text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
  }
  .admin-car-mobile__name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .admin-car-mobile__id {
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.3;
    display: block;
  }

  /* 비공개 차량은 흐리게 */
  .admin-row--muted .admin-car-mobile__name {
    color: #9ca3af;
  }
  .admin-row--muted .admin-car-mobile__photo {
    opacity: 0.6;
  }
}

/* ============================================================
   v13.10 — Admin 모바일 카드 width 0 문제 해결 (최종)
   ------------------------------------------------------------
   v13.9의 진단 결과: 차량명 element 텍스트는 있는데 width/height가 0.
   원인: CSS Grid의 1fr 컬럼이 flex 자식 컨텐츠와 충돌.
   해결: minmax(0, 1fr) + 모든 단계에 min-width/min-height 명시.
   ============================================================ */

@media (max-width: 720px) {
  /* 핵심 1: grid-template-columns에 minmax(0, 1fr) 사용 */
  .admin-table tbody tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-auto-rows: minmax(28px, auto) !important;
    align-items: center !important;
    padding: 12px 14px !important;
    gap: 8px 10px !important;
  }

  /* 핵심 2: 차량 td에 grid 영역 + min-height 명시 */
  .admin-table tbody td[data-label="차량"] {
    grid-area: name !important;
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: block !important;
  }

  /* 핵심 3: .admin-car-mobile wrapper에 width/height 강제 */
  .admin-table tbody td[data-label="차량"] .admin-car-mobile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
  }

  /* 핵심 4: 사진 - 고정 크기, shrink 금지 */
  .admin-car-mobile__photo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    flex-shrink: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
  }

  /* 핵심 5: 텍스트 영역 - flex grow + min-width 0 */
  .admin-car-mobile__text {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  /* 핵심 6: 차량명 - 명시적 block + width + min-height */
  .admin-car-mobile__name {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 핵심 7: ID - 명시적 block + width + min-height */
  .admin-car-mobile__id {
    display: block !important;
    width: 100% !important;
    min-height: 14px !important;
    font-size: 11px !important;
    color: #9ca3af !important;
    line-height: 1.3 !important;
  }

  /* 카드 시각적 구조 유지 */
  .admin-table tbody tr {
    padding-left: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #C5A572 !important;
    border-radius: 8px !important;
    background: #fff !important;
    margin-bottom: 8px !important;
  }
  .admin-table tbody tr.admin-row--muted {
    border-left-color: #d1d5db !important;
    background: #f9fafb !important;
  }
  .admin-table tbody tr.admin-row--selected {
    background: rgba(197, 165, 114, 0.08) !important;
    border-left-color: #1a1a1a !important;
  }
}

/* ============================================================
   v13.11 — 라이트 럭셔리 톤 (옵션 B 적용)
   ------------------------------------------------------------
   v13.5 다크+골드 가격 박스 → 화이트 베이스 + 골드 액센트로 전환.
   해외 자동차 구독 회사 표준 (FINN, Care by Volvo, Porsche Drive 등) 참고.
   
   변경:
   - 메인 카드 가격 박스: 다크 그라데이션 → 화이트 + 다크 텍스트
   - Admin 미리보기 모달 가격 박스: 동일 변경
   
   유지:
   - 메인 헤로 (TAGO MOBILITY) 다크 그라데이션
   - lease 배지 (인수형/반납형/보험포함) 다크+골드
   - 좌측 골드 라인 호버 효과
   - 상세 페이지 헤로 가격 박스 (큰 임팩트 영역)
   ============================================================ */

/* ─── 메인 카드 가격 박스 — 라이트 럭셔리 ───────── */
.car-card--luxury .car-card__price-box--luxury {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #f3f4f6 !important;
  border-radius: 0 !important;
  padding: 14px 0 8px !important;
  margin: 8px 0 0 !important;
}

.car-card--luxury .car-card__price-box--luxury .car-card__price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
}

.car-card--luxury .car-card__price-box--luxury .car-card__price-label {
  color: #9ca3af !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

.car-card--luxury .car-card__price-box--luxury .car-card__price,
.car-card--luxury .car-card__price-box--luxury .car-card__price--exact {
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.car-card--luxury .car-card__price-box--luxury .car-card__price-number {
  color: #1a1a1a !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.car-card--luxury .car-card__price-box--luxury .car-card__price-unit {
  color: #C5A572 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-left: 3px !important;
}

.car-card--luxury .car-card__price-box--luxury .car-card__price-condition {
  color: #9ca3af !important;
  font-size: 10px !important;
  text-align: right !important;
  margin-top: 4px !important;
  letter-spacing: 0.1px !important;
}

.car-card--luxury .car-card__price-box--luxury .car-card__price-insurance {
  color: #9ca3af !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

/* 호버 시 좌측 골드 라인은 유지 — 럭셔리 정체성 */
/* (기존 .car-card--luxury::before / :hover::before 스타일 그대로) */

/* ─── Admin 미리보기 모달 가격 박스 — 동일 변경 ───────── */
.preview-card__price-box {
  background: transparent !important;
  border-top: 1px solid #f3f4f6 !important;
  border-radius: 0 !important;
  padding: 14px 0 8px !important;
  margin-top: 8px !important;
}

.preview-card__price-label {
  color: #9ca3af !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

.preview-card__price-value {
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.preview-card__price-value strong {
  color: #1a1a1a !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.preview-card__price-condition {
  color: #9ca3af !important;
  font-size: 10px !important;
  margin-top: 4px !important;
}

/* ─── 모바일 라이트 럭셔리 미세 조정 ───────────────── */
@media (max-width: 720px) {
  .car-card--luxury .car-card__price-box--luxury {
    padding: 12px 0 6px !important;
  }
  .car-card--luxury .car-card__price-box--luxury .car-card__price-number {
    font-size: 24px !important;
  }
  .preview-card__price-value strong {
    font-size: 24px !important;
  }
}

/* ============================================================
   v13.12 — lease 배지 라이트 톤 + 카테고리별 보더색
   ------------------------------------------------------------
   v13.5에서 도입한 다크+골드 배지를 글로벌 표준에 맞게 라이트로 변경.
   카테고리별 보더 색으로 직관적 구분 유지.
   
   색상 매핑:
   - 인수형     → 골드 보더 #C5A572 (럭셔리 정체성)
   - 반납형     → 파랑 보더 #2563eb (신뢰감)
   - 보험포함 구독 → 녹색 보더 #16a34a (안전감)
   ============================================================ */

/* ─── 공통: 화이트 배경 + 다크 텍스트 ───────────── */
.car-card--luxury .car-card__lease-tag,
.car-card__lease-tag {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1a1a1a !important;
  border: 1.5px solid #d1d5db !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  text-shadow: none !important;
}

/* ─── 인수형 — 골드 ────────────────────────────── */
.car-card--luxury .lease-tag--acquisition,
.lease-tag--acquisition {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1a1a1a !important;
  border: 1.5px solid #C5A572 !important;
}

/* ─── 반납형 — 파랑 ────────────────────────────── */
.car-card--luxury .lease-tag--return,
.lease-tag--return {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1a1a1a !important;
  border: 1.5px solid #2563eb !important;
}

/* ─── 보험포함 구독 — 녹색 ──────────────────────── */
.car-card--luxury .lease-tag--subscription,
.lease-tag--subscription {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1a1a1a !important;
  border: 1.5px solid #16a34a !important;
}

/* ─── Admin 테이블 lease pill (데스크탑/모바일 공통) ──────── */
.admin-table .lease-pill--acq,
.lease-pill--acquisition {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1.5px solid #C5A572 !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

.admin-table .lease-pill--ret,
.lease-pill--return {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1.5px solid #2563eb !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

.admin-table .lease-pill--sub,
.lease-pill--subscription {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1.5px solid #16a34a !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

/* ─── Admin 미리보기 모달 lease 배지 ──────────── */
.preview-card__lease-tag {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1a1a1a !important;
  border: 1.5px solid #C5A572 !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ─── 모바일 미세 조정 ──────────────────────────── */
@media (max-width: 720px) {
  .car-card__lease-tag,
  .car-card--luxury .car-card__lease-tag {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

/* ============================================================
   v13.13 — 프론트엔드 모바일 ★★★ 3개 (상세 페이지)
   ------------------------------------------------------------
   1. 갤러리: 4-6열 그리드 → 가로 스와이프 + 점 인디케이터
   2. 정보 카드: 8개 그리드 → 한 줄 스펙
   3. 가격 매트릭스: 가로 표 → 약정 탭 + 보증금 리스트
   
   데스크탑(721px↑) 100% 영향 없음, 모바일(720px↓)에서만 변형
   ============================================================ */

/* 기본 상태: 모바일 마크업 숨김 (데스크탑) */
.gallery-counter-mobile,
.gallery-dots-mobile,
.info-spec-mobile,
.price-matrix-mobile {
  display: none;
}

@media (max-width: 720px) {

  /* ========================================================
     1. 갤러리 — 스와이프 변환
     ======================================================== */

  /* 데스크탑 그리드 그대로 두고 모바일에서만 스크롤 가로 슬라이더로 변경 */
  .gallery-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 0 12px 4px !important;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .gallery-grid__item {
    flex: 0 0 calc(100% - 24px) !important;
    aspect-ratio: 16 / 10 !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
    width: auto !important;
    height: auto !important;
  }
  .gallery-grid__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 모바일 카운터 표시 */
  .gallery-counter-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 12px 10px;
    font-size: 13px;
    color: #6b7280;
  }
  .gallery-counter-mobile__current {
    font-weight: 700;
    color: #1a1a1a;
  }
  .gallery-counter-mobile__sep {
    color: #9ca3af;
  }
  .gallery-counter-mobile__total {
    color: #9ca3af;
  }
  .gallery-counter-mobile__hint {
    margin-left: 8px;
    font-size: 11px;
    color: #C5A572;
  }

  /* 모바일 점 인디케이터 표시 */
  .gallery-dots-mobile {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px 0;
  }
  .gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.25s ease;
  }
  .gallery-dot--active {
    background: #C5A572;
    width: 20px;
    border-radius: 999px;
  }

  /* ========================================================
     2. 정보 카드 → 한 줄 스펙
     ======================================================== */

  /* 데스크탑 8개 카드 숨김 */
  .info-cards {
    display: none !important;
  }

  /* 모바일 한 줄 스펙 표시 */
  .info-spec-mobile {
    display: block !important;
    padding: 0 4px;
  }
  .info-spec-mobile__line {
    background: #fafafa;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
  }
  .info-spec-mobile__line strong {
    color: #1a1a1a;
    font-weight: 600;
  }
  .info-spec-mobile__sep {
    color: #d1d5db;
    margin: 0 4px;
  }
  .info-spec-mobile__line--ok {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
  }
  .info-spec-mobile__line--ok strong {
    color: #14532d;
    font-weight: 700;
  }

  /* ========================================================
     3. 가격 매트릭스 → 약정 탭 + 보증금 리스트
     ======================================================== */

  /* 데스크탑 가로 표 숨김 */
  .price-matrix__wrap {
    display: none !important;
  }

  /* 모바일 탭+리스트 표시 */
  .price-matrix-mobile {
    display: block !important;
    margin: 12px 0;
  }

  .price-matrix-mobile__tabs {
    display: flex;
    gap: 6px;
    padding: 0 4px;
    margin-bottom: 10px;
  }

  .price-matrix-mobile__tab {
    flex: 1;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
  }
  .price-matrix-mobile__tab:hover {
    border-color: #C5A572;
  }
  .price-matrix-mobile__tab--active {
    background: #1a1a1a;
    color: #C5A572;
    border-color: #1a1a1a;
  }

  .price-matrix-mobile__lists {
    padding: 0 4px;
  }
  .price-matrix-mobile__list {
    display: none;
  }
  .price-matrix-mobile__list--active {
    display: block;
  }

  .price-matrix-mobile__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid #f3f4f6;
  }

  .price-matrix-mobile__row-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .price-matrix-mobile__deposit {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
  }
  .price-matrix-mobile__tag {
    background: #C5A572;
    color: #1a1a1a;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.3px;
  }
  .price-matrix-mobile__row--lowest {
    background: #fef9e7;
    border-color: #fde68a;
  }
  .price-matrix-mobile__row--lowest .price-matrix-mobile__tag {
    background: #ef4444;
    color: #ffffff;
  }
  .price-matrix-mobile__row--standard {
    background: #1a1a1a;
    border-color: #1a1a1a;
  }
  .price-matrix-mobile__row--standard .price-matrix-mobile__deposit {
    color: #d4b896;
  }
  .price-matrix-mobile__row--standard .price-matrix-mobile__price {
    color: #C5A572 !important;
  }
  .price-matrix-mobile__row--standard .price-matrix-mobile__price strong {
    color: #C5A572 !important;
  }
  .price-matrix-mobile__row--standard .price-matrix-mobile__price-unit {
    color: #d4b896 !important;
  }

  .price-matrix-mobile__price {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
  }
  .price-matrix-mobile__price strong {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
  }
  .price-matrix-mobile__price-unit {
    color: #C5A572;
    font-size: 12px;
    font-weight: 600;
    margin-left: 2px;
  }
}

/* ============================================================
   v13.14 — 사장님 디자인 피드백 2가지 해결
   ------------------------------------------------------------
   1. TAGO MOBILITY 헤더 로고: 다크 헤로 위에서 안 보임 → 골드로 변경
   2. 사진 위 배지: 사각형(lease) + pill(보험) 불일치 → 둘 다 사각형 통일
   ============================================================ */

/* ─── 1. 헤더 로고 골드 (overlay 모드) ─────────────────── */
.site-header--overlay .site-logo,
.site-logo--light {
  color: #C5A572 !important;
}

.site-header--overlay .site-logo .site-logo__brand,
.site-logo--light .site-logo__brand {
  color: #C5A572 !important;
}

.site-header--overlay .site-logo .site-logo__sub,
.site-logo--light .site-logo__sub {
  color: rgba(197, 165, 114, 0.75) !important;
  border-left-color: rgba(197, 165, 114, 0.4) !important;
}

.site-header--overlay .site-logo:hover,
.site-logo--light:hover {
  background: rgba(197, 165, 114, 0.12) !important;
  color: #C5A572 !important;
}

/* 헤더 네비 링크도 골드 톤으로 (관리자 버튼) */
.site-header--overlay .site-nav__link,
.site-nav__link--light {
  color: rgba(197, 165, 114, 0.9) !important;
  border-color: rgba(197, 165, 114, 0.4) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.site-header--overlay .site-nav__link:hover,
.site-nav__link--light:hover {
  background: rgba(197, 165, 114, 0.15) !important;
  border-color: rgba(197, 165, 114, 0.6) !important;
  color: #C5A572 !important;
}

/* ─── 2. 보험 배지 사각형 통일 (lease 배지와 동일 스타일) ─── */
.car-card__insurance-badge {
  padding: 4px 11px !important;
  border-radius: 4px !important;   /* pill 999px → 사각형 4px */
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  text-shadow: none !important;
}

/* 보험 포함 — 녹색 보더 (구독 카테고리와 매칭) */
.insurance-badge--included {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #15803d !important;
  border: 1.5px solid #16a34a !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15) !important;
}

/* 보험 별도 — 회색 보더 (부가 정보 톤) */
.insurance-badge--excluded {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #4b5563 !important;
  border: 1.5px solid #d1d5db !important;
}

/* 보험 분리 — 파랑 보더 (반납형 카테고리와 매칭) */
.insurance-badge--split {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1e40af !important;
  border: 1.5px solid #2563eb !important;
}

/* v13.69: ⓘ 아이콘 — 원형 배경 채움(안 A)으로 또렷하게 */
.car-card__insurance-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  color: #fff !important;
  opacity: 1 !important;
  margin-left: 3px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  line-height: 1 !important;
}
.insurance-badge--included .car-card__insurance-info-icon { background: #16a34a !important; }
.insurance-badge--excluded .car-card__insurance-info-icon { background: #6b7280 !important; }
.insurance-badge--split    .car-card__insurance-info-icon { background: #2563eb !important; }

/* ─── 모바일 미세 조정 ────────────────────────────── */
@media (max-width: 720px) {
  .car-card__insurance-badge {
    font-size: 10px !important;
    padding: 3px 9px !important;
  }
}

/* ============================================================
   v13.15 (2026-05-25) — 3개 패치 묶음
   ① 헤더 ↔ 헤로 좌측 정렬 일치 (TAGO MOBILITY)
   ② 차량 정보 E안 (아이콘 삭제, 라벨+값, 카드 유지)
   ③ "출고 전 선지급 항목" → "선지급 항목"은 detail.js에서 처리됨
   ============================================================ */

/* ─── [1] 헤더 ↔ 헤로 좌측 정렬 일치 ────────────────── */
/* hero__inner가 .container를 적용 못 받아서 site-header보다 더 왼쪽에서
   시작하던 문제 해결. site-header__inner와 동일한 max-width/padding 강제. */
.hero__inner {
  max-width: var(--container-max, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 980px) {
  .hero__inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ─── [2] 차량 정보 박스 E안 (아이콘 삭제, 라벨+값 카드) ─── */
/* SVG 아이콘 숨김 (마크업은 그대로, 시각만 제거) */
.info-cards .info-card__icon {
  display: none !important;
}

/* 카드 가로형(flex row) → 세로형(중앙 정렬) */
.info-cards .info-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  min-height: 70px;
}

/* 카드 body 가운데 정렬 */
.info-cards .info-card__body {
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* 라벨: 더 부드럽게 (10px uppercase → 12px normal) */
.info-cards .info-card__label {
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: none;
  color: #9ca3af;
  font-weight: 500;
}

/* 값: 약간 더 크게 (15px → 16px) */
.info-cards .info-card__value {
  font-size: 16px;
  letter-spacing: -0.3px;
}

/* highlight 카드(사고이력)도 동일한 룩 유지 */
.info-cards .info-card--highlight .info-card__value--ok {
  font-size: 16px;
}

/* v13.52 작업5: 차량정보 카드는 hover·클릭·터치에도 테두리/이동 없이 고정 */
.info-cards .info-card {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.info-cards .info-card:hover,
.info-cards .info-card:active,
.info-cards .info-card:focus {
  border-color: #e8e8e8;
  transform: none;
  box-shadow: none;
}
.info-cards .info-card:hover::before { opacity: 0; }
.info-cards .info-card:hover .info-card__icon {
  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
  color: #C5A572;
}
.info-cards .info-card--highlight:hover,
.info-cards .info-card--highlight:active {
  border-color: rgba(22,163,74,0.25);
}

/* v13.52 작업6: 성능지 보기 버튼 — 카드 그리드 밖 독립 영역 (카드 높이 균일 유지) */
.inspection-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.inspection-view-btn--block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 11px 18px;
  font-size: 14px;
  border-radius: 8px;
}
.inspection-view-btn__count {
  background: rgba(146,64,14,0.12);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
}
.inspection-cta-row__hint {
  font-size: 12px;
  color: #9ca3af;
}
@media (max-width: 720px) {
  .inspection-cta-row {
    margin-top: 10px;
    padding: 0 4px;
  }
  .inspection-view-btn--block {
    width: 100%;
    justify-content: center;
  }
  .inspection-cta-row__hint {
    width: 100%;
    text-align: center;
  }

  /* v13.52 작업2-1: 상세페이지 히어로 사진을 화면 좌우 끝까지(풀블리드) */
  .detail-hero { display: block; }
  .detail-hero__media {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
    margin-bottom: 14px;
  }

  /* v13.52 작업4: 메인/상세 좌우 여백 축소 (콘텐츠·사진 더 꽉 차게) */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .site-header__inner,
  .hero__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ============================================================
   v13.16 (2026-05-25) — 헤더 정렬 강력 fix
   v13.15에서 .hero__inner padding 적용했지만 캡처 확인 시 정렬 안 됨.
   .container 부모 또는 다른 wrapper에 의한 cascade 문제 추정 →
   다양한 wrapping 케이스를 모두 커버하는 강력한 selector + !important
   ============================================================ */

/* [1] hero__inner 단독 wrapper 케이스 (가장 흔함) */
.hero > .hero__inner {
  max-width: var(--container-max, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
@media (min-width: 980px) {
  .hero > .hero__inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* [2] container > hero__inner 케이스 (이중 wrapper)
   바깥 container가 이미 padding을 가지므로 hero__inner는 padding 0으로 */
.hero > .container > .hero__inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* [3] hero 직접 자식이 다른 wrapper인 케이스 (예: <div>로 감싸진 경우)
   hero__bg는 absolute라 영향 없음, 다른 모든 직접 자식에 max-width 적용 */
.hero > div:not(.hero__bg) {
  max-width: var(--container-max, 1280px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


/* ============================================================
   v13.17 (2026-05-25) — 진짜 최종 헤더 fix + 메인 페이지 정돈
   원인 발견: site-header__inner와 hero__inner 둘 다 `class="container ___"`
   같은 div에 두 클래스 적용. box-sizing/padding 계산이 일관성 없어서 어긋남.
   해결: .container 자체에 box-sizing border-box + padding 통일 강제.
   ============================================================ */

/* [1] 헤더 ↔ 헤로 진짜 정렬 일치 ─────────────────────── */
/* .container 자체에 box-sizing border-box 강제. site-header__inner와
   hero__inner가 둘 다 .container 클래스를 함께 가지므로 한 번에 통일됨. */
.container {
  box-sizing: border-box !important;
  max-width: var(--container-max, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* site-header__inner와 hero__inner 모두 동일한 좌우 padding 강제 */
.site-header__inner,
.hero__inner {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (min-width: 980px) {
  .site-header__inner,
  .hero__inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* [2] 메인 페이지 제조사 그리드 컴팩트 ──────────────── */
/* 박스 간격 12px → 8px, 박스 크기 78px → 70px */
.brand-row {
  gap: 8px;
}
.brand-chip__box {
  width: 70px;
  height: 70px;
  padding: 6px 4px;
  gap: 3px;
}
.brand-chip__box-img {
  width: 32px;
  height: 24px;
}
.brand-chip__box-mark {
  font-size: 16px;
}
.brand-chip__box-name {
  font-size: 10px;
  letter-spacing: -0.02em;
}
.brand-chip__box--all .brand-chip__box-mark,
.brand-chip__box--import .brand-chip__box-mark {
  font-size: 18px;
}

/* [3] 가격 + 기간 chip 정돈 (간격 + 디자인 일관성) ─── */
/* 같은 row 간격으로 정돈, 위아래 섹션 간격 통일 */
.price-row,
.contract-row {
  gap: 6px;
  margin-top: 2px;
}

/* 가격 + 기간 chip 디자인 일관성 (둘 다 라이트 outline → 활성 시 다크/빨강) */
.price-chip,
.contract-chip {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
}

/* 모바일 컴팩트 추가 보정 ───────────────────────────── */
@media (max-width: 720px) {
  .brand-row {
    gap: 6px;
  }
  .brand-chip__box {
    width: 62px;
    height: 62px;
    padding: 5px 3px;
  }
  .brand-chip__box-img {
    width: 28px;
    height: 20px;
  }
  .brand-chip__box-name {
    font-size: 9px;
  }
  .brand-chip__box--all .brand-chip__box-mark,
  .brand-chip__box--import .brand-chip__box-mark {
    font-size: 15px;
  }
}


/* ============================================================
   v13.18 (2026-05-25) — 차량 카드 골드 border + 보증금 토글
   ============================================================ */

/* [1] 차량 카드 — 전체 골드 border로 살포시 감싸기 ────── */
/* 기존: 좌측 3px 골드 라인(hover 시) + 회색 border (기본)
   변경: 전체 카드를 반투명 골드 border로 감싸기 (살포시 럭셔리) */

/* 기본 상태 — 반투명 골드 border */
.car-card--luxury {
  border: 1px solid rgba(197, 165, 114, 0.35) !important;
}

/* hover 상태 — 더 진한 골드 + 골드 그림자 */
.car-card--luxury:hover {
  border-color: #C5A572 !important;
  box-shadow: 0 12px 28px -10px rgba(26, 26, 26, 0.18),
              0 4px 12px -4px rgba(197, 165, 114, 0.25) !important;
}

/* 좌측 골드 라인(::before) 제거 — 전체 border로 대체 */
.car-card--luxury::before,
.car-card--luxury:hover::before {
  display: none !important;
}

/* [2] 보증금 토글 버튼 — 약정 기간과 동일한 스타일이지만
       2개라 약간 좁아질 수 있음, 옆에 선수금 슬라이더와 정렬 보장 */
/* 약정 기간 토글의 기존 스타일을 그대로 사용하므로 추가 CSS 불필요.
   다만 폼 width가 자동으로 조절되도록 보장 */
.quote-calc-field .quote-calc-toggle {
  width: 100%;
}


/* ============================================================
   v13.19 (2026-05-25) — 토글 박스 통일 + 메인 페이지 추가 컴팩트
   ============================================================ */

/* [1] 견적계산기 토글 박스 높이 통일 ──────────────────── */
/* 약정 기간 column과 보증금 column이 같은 grid row에서 stretch되어
   토글의 높이가 달라 보이는 문제 해결. 각 field가 자기 컨텐츠만큼만 차지하도록 */
.quote-calc-body .quote-calc-field {
  align-self: start;
}

/* 모든 토글 버튼이 동일한 최소 높이 보장 */
.quote-calc-body .quote-calc-toggle__btn {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 토글 컨테이너 자체도 일관된 패딩 */
.quote-calc-body .quote-calc-toggle {
  align-items: stretch;
}

/* [2] 메인 페이지 제조사 박스 — 더 강제로 컴팩트 ──── */
/* v13.17 변경이 caching 또는 다른 정의로 덮어써질 수 있어 !important 강제 */
.brand-row {
  gap: 8px !important;
}
.brand-chip__box {
  width: 70px !important;
  height: 70px !important;
  padding: 6px 4px !important;
  gap: 3px !important;
}
.brand-chip__box-img {
  width: 32px !important;
  height: 24px !important;
}
.brand-chip__box-mark {
  font-size: 16px !important;
}
.brand-chip__box-name {
  font-size: 10px !important;
}
.brand-chip__box--all .brand-chip__box-mark,
.brand-chip__box--import .brand-chip__box-mark {
  font-size: 18px !important;
}

@media (max-width: 720px) {
  .brand-row {
    gap: 6px !important;
  }
  .brand-chip__box {
    width: 62px !important;
    height: 62px !important;
  }
  .brand-chip__box-img {
    width: 28px !important;
    height: 20px !important;
  }
}

/* [3] 헤더 site-logo 시각 정렬 미세 보정 ─────────────── */
/* 영문 폰트의 sidebearing이 한글보다 큼. 시각적으로 들여쓰기 효과
   생기는 것 -0.04em으로 좌측 보정 */
.site-logo__brand {
  display: inline-block;
  margin-left: -0.04em;
  letter-spacing: -0.02em;
}


/* ============================================================
   v13.20 (2026-05-25) — 진짜 마지막! 박스 좌측 정렬 + 강제 컴팩트
   원인 발견: main.css 3733~3740의 "C안: 칩 균등 분배"가
   .brand-row와 .price-row에 justify-content: space-evenly 적용 중.
   8개 박스가 컨테이너 폭에 균등 분배되어 시각적으로 떨어져 보임.
   ============================================================ */

/* [1] 박스/chip 좌측 정렬 강제 + 컴팩트 ───────────────── */
.brand-row {
  justify-content: flex-start !important;
  gap: 6px !important;
}

.price-row {
  justify-content: flex-start !important;
  gap: 6px !important;
}

.contract-row {
  justify-content: flex-start !important;
  gap: 6px !important;
}

/* 박스 크기 한번 더 강제 (이전 정의들이 덮어쓰는 것 방지) */
.brand-chip__box {
  width: 68px !important;
  height: 68px !important;
  padding: 6px 4px !important;
  gap: 3px !important;
}
.brand-chip__box-img {
  width: 30px !important;
  height: 22px !important;
}
.brand-chip__box-mark {
  font-size: 15px !important;
}
.brand-chip__box-name {
  font-size: 10px !important;
}
.brand-chip__box--all .brand-chip__box-mark,
.brand-chip__box--import .brand-chip__box-mark {
  font-size: 17px !important;
}

@media (max-width: 720px) {
  .brand-chip__box {
    width: 60px !important;
    height: 60px !important;
  }
  .brand-chip__box-img {
    width: 26px !important;
    height: 18px !important;
  }
}


/* ============================================================
   v13.21 (2026-05-25) — 헤더 TAGO MOBILITY 정렬 진짜 진짜 진짜 마지막!
   원인 발견: 라인 6581의 .site-logo { padding: 6px 10px } 에서
   padding-left: 10px이 TAGO MOBILITY 글자를 10px 안쪽으로 밀고 있었음.
   해결: 음수 margin-left -10px로 padding 상쇄 (hover 효과는 유지)
   ============================================================ */

.site-header__inner .site-logo,
.site-header--overlay .site-logo {
  margin-left: -10px !important;
}


/* ============================================================
   v13.22 (2026-05-25) — 제조사 박스 간격/크기 캡처처럼 (사장님 참고 디자인)
   ============================================================ */

/* 박스 사이 간격 6 → 12px, 박스 크기 68 → 76 (모바일 60 → 68) */
.brand-row {
  gap: 12px !important;
}
.brand-chip__box {
  width: 76px !important;
  height: 76px !important;
  padding: 8px 6px !important;
  gap: 4px !important;
}
.brand-chip__box-img {
  width: 34px !important;
  height: 26px !important;
}
.brand-chip__box-mark {
  font-size: 16px !important;
}
.brand-chip__box-name {
  font-size: 11px !important;
}
.brand-chip__box--all .brand-chip__box-mark,
.brand-chip__box--import .brand-chip__box-mark {
  font-size: 19px !important;
}

@media (max-width: 720px) {
  .brand-row {
    gap: 8px !important;
  }
  .brand-chip__box {
    width: 68px !important;
    height: 68px !important;
  }
  .brand-chip__box-img {
    width: 30px !important;
    height: 22px !important;
  }
}


/* ============================================================
   v13.23 (2026-05-25) — 차량 카드 가격 영역 C안 + 필터 초기화 위치
   ============================================================ */

/* [1] 차량 카드 가격 영역 C안 (좌우 분리 한 줄) ──────── */
.car-card__price-box--v23 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-top: 1px solid #f3f4f6 !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.car-card__price-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.car-card__price-label-v23 {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.car-card__price-box--v23 .car-card__price-insurance {
  font-size: 11px;
  color: #9ca3af;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 400;
}

.car-card__price-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.car-card__price-value-v23 {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  line-height: 1;
}

.car-card__price-value-v23 strong {
  font-size: 26px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  margin: 0 2px;
}

.car-card__price-unit-v23 {
  font-size: 14px;
  color: #C5A572;
  font-weight: 700;
  margin-left: 2px;
}

.car-card__price-cond-v23 {
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 0.2px;
}

/* 모바일에서도 동일 패턴, 살짝 작게 */
@media (max-width: 480px) {
  .car-card__price-box--v23 {
    padding: 14px 16px !important;
  }
  .car-card__price-value-v23 strong {
    font-size: 22px;
  }
}

/* [2] 필터 초기화 위치 조정 (result-count 옆에 가깝게) ──── */
.result-header {
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 14px 4px 12px !important;
}

.result-header .filter-reset {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}


/* ============================================================
   v13.24 (2026-05-25) — 관리자 대시보드 완전 재디자인
   세계 수준 UI/UX (사이드바 + KPI 카드 + 강력한 검색/필터)
   ============================================================ */

/* admin 전용 변수 (스코프 격리) */
.admin-body {
  --admin-bg: #f7f7f4;
  --admin-dark: #1a1a1a;
  --admin-gold: #C5A572;
  --admin-gold-soft: rgba(197, 165, 114, 0.12);
  --admin-red: #e03131;
  --admin-red-soft: #fef2f2;
  --admin-blue: #2563eb;
  --admin-blue-soft: #dbeafe;
  --admin-green: #16a34a;
  --admin-green-soft: #dcfce7;
  --admin-orange: #f59e0b;
  --admin-orange-soft: #fef3c7;
  --admin-border: #e5e7eb;
  --admin-border-light: #f3f4f6;
  --admin-text: #1a1a1a;
  --admin-text-muted: #6b7280;
  --admin-text-light: #9ca3af;
  --admin-sidebar-w: 240px;

  background: var(--admin-bg);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
}

/* 기존 헤더 숨김 (사이드바로 대체) */
.admin-body .site-header { display: none !important; }
.admin-body .site-footer { display: none !important; }

/* ─── LAYOUT ─── */
.admin-layout {
  display: grid;
  grid-template-columns: var(--admin-sidebar-w) 1fr;
  min-height: 100vh;
}

/* ─── SIDEBAR ─── */
.admin-sidebar {
  background: var(--admin-dark);
  color: white;
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-sidebar__brand {
  padding: 0 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 16px;
}
.admin-sidebar__logo {
  color: var(--admin-gold);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: block;
}
.admin-sidebar__sub {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.admin-sidebar__section {
  padding: 0 12px;
  margin-bottom: 20px;
}
.admin-sidebar__section-title {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0 12px 8px;
  font-weight: 600;
}
.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  margin-bottom: 2px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
}
.admin-sidebar__link:hover {
  background: rgba(255,255,255,0.05);
  color: white;
}
.admin-sidebar__link--active {
  background: var(--admin-gold-soft) !important;
  color: var(--admin-gold) !important;
  font-weight: 600;
}
.admin-sidebar__link-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.admin-sidebar__link-badge {
  margin-left: auto;
  font-size: 10px;
  background: var(--admin-red);
  color: white;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.admin-sidebar__user {
  margin-top: auto;
  margin: auto 12px 16px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-sidebar__user-avatar {
  width: 32px;
  height: 32px;
  background: var(--admin-gold);
  color: var(--admin-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.admin-sidebar__user-info { flex: 1; min-width: 0; }
.admin-sidebar__user-name { font-size: 12px; color: white; font-weight: 600; }
.admin-sidebar__user-email {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-sidebar__user-logout {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
}
.admin-sidebar__user-logout:hover { color: white; }

/* ─── MAIN ─── */
.admin-main {
  padding: 24px 32px;
  overflow-x: auto;
  min-width: 0;
}
.admin-main__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.admin-main__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--admin-text);
  margin: 0;
}
.admin-main__breadcrumb {
  font-size: 12px;
  color: var(--admin-text-muted);
  margin-bottom: 4px;
}
.admin-main__head-action {
  display: flex;
  gap: 8px;
}
.admin-main__head-action .btn--primary {
  background: var(--admin-red);
  color: white;
  border: 1px solid var(--admin-red);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.admin-main__head-action .btn--primary:hover {
  background: #c92a2a;
}

/* ─── KPI 카드 4개 ─── */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.admin-kpi-card {
  background: white;
  border: 1px solid var(--admin-border-light);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.admin-kpi-card:hover {
  border-color: var(--admin-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.admin-kpi-card--urgent {
  border-color: var(--admin-red);
  background: var(--admin-red-soft);
}
.admin-kpi-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.admin-kpi-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.admin-kpi-card__icon--gold { background: var(--admin-gold-soft); color: var(--admin-gold); }
.admin-kpi-card__icon--blue { background: var(--admin-blue-soft); color: var(--admin-blue); }
.admin-kpi-card__icon--green { background: var(--admin-green-soft); color: var(--admin-green); }
.admin-kpi-card__icon--orange { background: var(--admin-orange-soft); color: var(--admin-orange); }

.admin-kpi-card__trend {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.admin-kpi-card__trend--good { background: var(--admin-green-soft); color: var(--admin-green); }
.admin-kpi-card__trend--neutral { background: #f3f4f6; color: var(--admin-text-muted); }
.admin-kpi-card__trend--urgent { background: var(--admin-red-soft); color: var(--admin-red); }

.admin-kpi-card__label {
  font-size: 12px;
  color: var(--admin-text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.admin-kpi-card__value {
  font-size: 30px;
  font-weight: 800;
  color: var(--admin-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.admin-kpi-card__value-unit {
  font-size: 14px;
  color: var(--admin-text-muted);
  margin-left: 4px;
  font-weight: 500;
}
.admin-kpi-card__breakdown {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--admin-text-muted);
}
.admin-kpi-card__breakdown-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-kpi-card__breakdown-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.admin-kpi-card__breakdown-dot--gold { background: var(--admin-gold); }
.admin-kpi-card__breakdown-dot--blue { background: var(--admin-blue); }
.admin-kpi-card__breakdown-dot--green { background: var(--admin-green); }
.admin-kpi-card__breakdown-dot--gray { background: var(--admin-text-light); }

/* 차량 종류별 — 가로 한 줄 분포 */
.admin-kpi-card__lease-dist {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.lease-dist__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--admin-text-muted);
  font-weight: 500;
}
.lease-dist__item strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--admin-text);
  margin-left: 2px;
  letter-spacing: -0.02em;
}
.lease-dist__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lease-dist__dot--gold { background: var(--admin-gold); }
.lease-dist__dot--blue { background: var(--admin-blue); }
.lease-dist__dot--green { background: var(--admin-green); }

/* ─── 카테고리 탭 (큰 토글) ─── */
.admin-category-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: white;
  border: 1px solid var(--admin-border-light);
  border-radius: 10px;
  margin-bottom: 12px;
  width: fit-content;
}
.admin-category-tab {
  padding: 9px 18px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-category-tab:hover { color: var(--admin-text); }
.admin-category-tab.is-active {
  background: var(--admin-dark);
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.admin-category-tab__count {
  font-size: 11px;
  opacity: 0.7;
  background: rgba(255,255,255,0.15);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.admin-category-tab:not(.is-active) .admin-category-tab__count {
  background: var(--admin-bg);
  color: var(--admin-text-muted);
}

/* ─── 검색 + 액션 바 ─── */
.admin-action-bar-v24 {
  display: flex;
  gap: 12px;
  align-items: center;
  background: white;
  border: 1px solid var(--admin-border-light);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.admin-search-v24 {
  flex: 1;
  max-width: 500px;
  position: relative;
}
.admin-search-v24__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--admin-text-light);
  font-size: 14px;
  pointer-events: none;
}
.admin-search-v24__input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--admin-bg);
  font-family: inherit;
  transition: all 0.15s;
}
.admin-search-v24__input:focus {
  outline: none;
  border-color: var(--admin-gold);
  background: white;
}
.admin-action-bar-v24__spacer { flex: 1; }
.admin-filter-more-btn {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--admin-text-muted);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.admin-filter-more-btn:hover {
  border-color: var(--admin-text-muted);
  color: var(--admin-text);
}
.admin-filter-badge {
  background: var(--admin-red);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}

/* 추가 필터 영역 (접기/펴기) */
.admin-filter-wrap-v24 {
  background: white;
  border: 1px solid var(--admin-border-light);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 0;
}
.admin-filter-wrap-v24[open] {
  padding: 16px;
}

/* ─── 테이블 새 디자인 (v13.24) ─── */
.admin-table-wrap-v24 {
  background: white;
  border: 1px solid var(--admin-border-light);
  border-radius: 10px;
  overflow: hidden;
  overflow-x: auto;
}
.admin-table-v24 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table-v24 th {
  background: var(--admin-bg);
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--admin-text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-table-v24 td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--admin-border-light);
  vertical-align: middle;
}
.admin-table-v24 tr:last-child td { border-bottom: none; }
.admin-table-v24 tr:hover td { background: var(--admin-bg); }

/* 컬럼 너비 (v13.24 정렬 통일) */
.admin-table-v24 .admin-checkbox-cell { width: 40px; }
.admin-table-v24 .admin-col-plate { width: 120px; }
.admin-table-v24 .admin-col-vehicle { width: 320px; }
.admin-table-v24 .admin-col-class { width: 80px; }
.admin-table-v24 .admin-col-lease { width: 150px; }
.admin-table-v24 .admin-col-price { width: 100px; text-align: right; }
.admin-table-v24 th.admin-col-price,
.admin-table-v24 td.admin-col-price { text-align: right; }
.admin-table-v24 .admin-col-status { width: 110px; }
.admin-table-v24 .admin-col-action { width: 200px; }

/* 차량번호 셀 */
.admin-table-v24 .plate-cell {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--admin-text-muted);
  background: var(--admin-bg);
  padding: 6px 10px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--admin-border-light);
  font-weight: 600;
}
.admin-table-v24 .plate-cell__suffix {
  color: var(--admin-gold);
  font-weight: 700;
}

/* 차량 셀 (제조사 + 차종 통합) */
.admin-table-v24 .admin-car-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-table-v24 .admin-car-cell__photo {
  width: 48px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
}
.admin-table-v24 .admin-car-cell__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-table-v24 .admin-car-cell__info { min-width: 0; }
.admin-table-v24 .admin-car-cell__maker {
  font-size: 11px;
  color: var(--admin-gold);
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.admin-table-v24 .admin-car-cell__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--admin-text);
}

/* 차급 셀 */
.admin-table-v24 .class-cell {
  font-size: 12px;
  color: var(--admin-text-muted);
  font-weight: 500;
}

/* 리스 배지 */
.admin-table-v24 .lease-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  letter-spacing: -0.02em;
}
.admin-table-v24 .lease-pill--acq {
  color: var(--admin-gold);
  border-color: var(--admin-gold);
  background: var(--admin-gold-soft);
}
.admin-table-v24 .lease-pill--ret {
  color: var(--admin-blue);
  border-color: var(--admin-blue);
  background: var(--admin-blue-soft);
}
.admin-table-v24 .lease-pill--sub {
  color: var(--admin-green);
  border-color: var(--admin-green);
  background: var(--admin-green-soft);
}

/* 가격 셀 (우측 정렬) */
.admin-table-v24 .admin-num {
  text-align: right !important;
  font-size: 14px;
  font-weight: 700;
}

/* 공개 토글 (상태 컬럼) */
.admin-table-v24 .toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.admin-table-v24 .toggle__input { display: none; }
.admin-table-v24 .toggle__slider {
  position: relative;
  width: 34px;
  height: 18px;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.admin-table-v24 .toggle__slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.admin-table-v24 .toggle__input:checked + .toggle__slider { background: var(--admin-green); }
.admin-table-v24 .toggle__input:checked + .toggle__slider::after { left: 18px; }
.admin-table-v24 .toggle__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--admin-text-light);
}
.admin-table-v24 .toggle__input:checked ~ .toggle__label { color: var(--admin-green); }

/* 액션 버튼 */
.admin-table-v24 .admin-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.admin-table-v24 .admin-link {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--admin-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s;
}
.admin-table-v24 .admin-link:hover {
  background: var(--admin-bg);
  border-color: var(--admin-border);
  color: var(--admin-text);
}
.admin-table-v24 .admin-link--danger:hover {
  background: var(--admin-red-soft);
  border-color: var(--admin-red);
  color: var(--admin-red);
}

/* ─── 결과 바 ─── */
.admin-result-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--admin-text-muted);
  margin-bottom: 8px;
}
.admin-result-bar strong { color: var(--admin-text); font-weight: 700; }

/* 모바일 반응형 */
@media (max-width: 980px) {
  .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    display: none;
  }
  .admin-main { padding: 16px; }
}

@media (max-width: 640px) {
  .admin-kpi-grid { grid-template-columns: 1fr; }
  .admin-action-bar-v24 { flex-wrap: wrap; }
  .admin-search-v24 { max-width: 100%; }
  .admin-category-tabs { width: 100%; flex-wrap: wrap; }
  .admin-table-v24 { font-size: 12px; }
  .admin-table-v24 th,
  .admin-table-v24 td { padding: 10px 8px; }
}


/* ============================================================
   v13.24.1 (2026-05-25) — admin-body 클래스 없어도 작동하는 안전망
   ============================================================ */

/* admin/index.html의 body가 어떤 클래스든 admin 페이지면 작동 */
body:has(.admin-sidebar),
body:has(.admin-layout),
body:has(.admin-main),
.admin-body {
  --admin-bg: #f7f7f4;
  --admin-dark: #1a1a1a;
  --admin-gold: #C5A572;
  --admin-gold-soft: rgba(197, 165, 114, 0.12);
  --admin-red: #e03131;
  --admin-red-soft: #fef2f2;
  --admin-blue: #2563eb;
  --admin-blue-soft: #dbeafe;
  --admin-green: #16a34a;
  --admin-green-soft: #dcfce7;
  --admin-orange: #f59e0b;
  --admin-orange-soft: #fef3c7;
  --admin-border: #e5e7eb;
  --admin-border-light: #f3f4f6;
  --admin-text: #1a1a1a;
  --admin-text-muted: #6b7280;
  --admin-text-light: #9ca3af;
}

/* :root에도 fallback (변수가 어디서든 작동) */
:root {
  --admin-gold-fb: #C5A572;
  --admin-dark-fb: #1a1a1a;
  --admin-bg-fb: #f7f7f4;
}

/* 토글 슬라이더 위치 보정 (.toggle에 position: relative 누락 해결) */
.admin-table-v24 .toggle,
.admin-kpi-card ~ * .toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 카테고리 탭 "전체" 글자가 안 보이는 이슈 보정 */
.admin-category-tab {
  background: white !important;
  color: #6b7280 !important;
}
.admin-category-tab.is-active {
  background: #1a1a1a !important;
  color: #ffffff !important;
}
.admin-category-tab.is-active .admin-category-tab__count {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.9) !important;
}


/* ============================================================
   v13.25 (2026-05-25) — 관리 컬럼 정렬 + 결과바 다크 제거
   ============================================================ */

/* 관리 컬럼 헤더와 데이터 정렬 통일 (둘 다 우측) */
.admin-table-v24 th.admin-col-action,
.admin-table-v24 td.admin-col-action {
  text-align: right !important;
}
.admin-table-v24 .admin-actions {
  display: flex !important;
  gap: 4px !important;
  justify-content: flex-end !important;
}

/* 결과 바 다크 배경 → 깔끔한 흰색으로 */
.admin-result-bar,
.admin-content .admin-result-bar,
[class*="result-bar"],
[id*="result-bar"] {
  background: white !important;
  color: var(--admin-text-muted, #6b7280) !important;
  border: 1px solid var(--admin-border-light, #f3f4f6) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 20px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.admin-result-bar strong,
[class*="result-bar"] strong {
  color: var(--admin-text, #1a1a1a) !important;
  font-weight: 700 !important;
}
.admin-result-bar a,
.admin-result-bar button,
[class*="result-bar"] button {
  background: transparent !important;
  color: var(--admin-text-muted, #6b7280) !important;
  border: 1px solid var(--admin-border, #e5e7eb) !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  cursor: pointer !important;
}

/* 결과 바 다음에 테이블 wrap이 오는 경우, 위 모서리는 둥글지 않게 */
.admin-result-bar + .admin-table-wrap-v24,
[class*="result-bar"] + .admin-table-wrap-v24 {
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
}


/* ============================================================
   v13.25.1 (2026-05-25) — 토글 슬라이더 위치 충돌 fix
   옛 CSS의 transform과 새 CSS의 left가 결합되어 동그라미가
   토글 밖으로 튀어나가 라벨 위에 겹치는 문제 해결
   ============================================================ */

/* admin 페이지 토글 — 사이즈 통일 + transform 비활성화 */
.admin-table-v24 .toggle__slider {
  width: 36px !important;
  height: 20px !important;
}
.admin-table-v24 .toggle__slider::after {
  width: 16px !important;
  height: 16px !important;
  left: 2px !important;
  top: 2px !important;
  transform: none !important;
  transition: left 0.2s ease !important;
}
.admin-table-v24 .toggle__input:checked + .toggle__slider::after {
  left: 18px !important;
  transform: none !important;
}

/* 라벨 간격 보정 - 토글과 충분히 떨어지게 */
.admin-table-v24 .toggle__label {
  min-width: auto !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
}


/* ════════════════════════════════════════════════════════════════
   v13.27 — 관리자 차량 테이블 디자인 정돈
   ────────────────────────────────────────────────────────────────
   · 차량 셀에 한 줄 메타정보 (연식·색상·주행거리·연료) 추가
   · 다음검사일 / 요금(구독료+보증금) / 구독여부 컬럼 신규
   · 임박 강조 색상 (빨강/주황)
   · 미니멀 디자인 (아이콘 최소화)
   ════════════════════════════════════════════════════════════════ */

/* ─── 새 테이블 컬럼 폭 (admin-table-v27) ─── */
.admin-table-v27 { table-layout: auto; min-width: 1100px; }
.admin-table-v27 .admin-checkbox-cell { width: 36px; }
.admin-table-v27 .admin-col-vehicle   { min-width: 240px; }
.admin-table-v27 .admin-col-plate     { width: 110px; }
.admin-table-v27 .admin-col-inspection { width: 130px; }
.admin-table-v27 .admin-col-fee       { width: 150px; }
.admin-table-v27 .admin-col-lease     { width: 110px; }
.admin-table-v27 .admin-col-sub       { width: 70px;  text-align: center; }
.admin-table-v27 .admin-col-status    { width: 90px; }
.admin-table-v27 .admin-col-action    { width: 180px; }

/* ─── 차량 셀 메타 한 줄 (연식 · 색상 · 주행거리 · 연료) ─── */
.admin-car-cell__meta {
  font-size: 12px !important;
  color: #9ca3af !important;
  margin-top: 4px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* 차량 셀 maker 텍스트 → "기아 · 중형" 톤다운 */
.admin-car-cell__maker {
  font-size: 11px !important;
  color: #6b7280 !important;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* 차량 이름 강조 */
.admin-car-cell__name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-top: 2px;
  line-height: 1.4;
}

/* ─── 다음검사일 셀 ─── */
.inspection-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.inspection-cell__date {
  color: #374151;
  letter-spacing: -0.01em;
}
.inspection-cell__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
/* 30일 이내 - 빨강 */
.inspection-cell--urgent .inspection-cell__date {
  color: #dc2626;
  font-weight: 700;
}
.inspection-cell--urgent .inspection-cell__badge {
  background: #fee2e2;
  color: #b91c1c;
}
/* 60일 이내 - 주황 */
.inspection-cell--warning .inspection-cell__date {
  color: #d97706;
  font-weight: 600;
}
.inspection-cell--warning .inspection-cell__badge {
  background: #fef3c7;
  color: #b45309;
}
/* 만료 지남 - 진한 빨강 */
.inspection-cell--expired .inspection-cell__date {
  color: #7f1d1d;
  font-weight: 700;
  text-decoration: line-through;
}
.inspection-cell--expired .inspection-cell__badge {
  background: #dc2626;
  color: #fff;
}
/* 일반 (60일 초과) */
.inspection-cell--normal .inspection-cell__date {
  color: #4b5563;
}
/* 미입력 */
.inspection-cell--empty .inspection-cell__date {
  color: #9ca3af;
  font-style: italic;
}

/* ─── 요금 셀 (구독료 / 보증금) ─── */
.fee-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  line-height: 1.5;
}
.fee-cell__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.fee-cell__label {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.fee-cell__value {
  color: #111827;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 보증금은 살짝 약하게 */
.fee-cell__row:nth-child(2) .fee-cell__value {
  color: #4b5563;
  font-weight: 500;
  font-size: 12px;
}

/* ─── 구독여부 뱃지 ─── */
.sub-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sub-pill--active {
  background: #dcfce7;
  color: #15803d;
}
.sub-pill--inactive {
  background: #f3f4f6;
  color: #6b7280;
}

/* ─── 헤더 텍스트 미니멀화 ─── */
.admin-table-v27 thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 10px !important;
}

/* ─── 행 패딩 조정 (정보 늘어남에 따라) ─── */
.admin-table-v27 tbody td {
  padding: 14px 10px !important;
  vertical-align: middle;
}
.admin-table-v27 tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s;
}
.admin-table-v27 tbody tr:hover {
  background: #fafafa;
}

/* ─── admin-help 미니멀 ─── */
.admin-help {
  font-size: 12px !important;
  color: #9ca3af !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border-top: 1px dashed #e5e7eb;
  margin-top: 8px;
  line-height: 1.6;
}

/* ─── 차량 사진 셀 살짝 다듬기 ─── */
.admin-table-v27 .admin-car-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-table-v27 .admin-car-cell__photo {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-table-v27 .admin-car-cell__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── 사이드바 아이콘 없을 때 텍스트 정렬 보정 ─── */
.admin-sidebar__link:not(:has(.admin-sidebar__link-icon)) > span:first-child {
  margin-left: 2px;
}


/* ════════════════════════════════════════════════════════════════
   v13.28 — edit 페이지 4단계 카드 구조 + 직접 입력 + 색상 점 선택
   ════════════════════════════════════════════════════════════════ */

/* ─── v28: edit-page 폼 폭 확장 (4단계 카드용) ─── */
.admin-edit-page-v28 {
  max-width: 1100px !important;
  margin: 0 auto;
  padding-top: 8px;
}

/* ─── Step 카드 ─── */
.step-card {
  background: #fff;
  border: 1px solid #e8e6dc;
  border-radius: 10px;
  padding: 28px 32px 26px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.step-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0eee5;
  margin-bottom: 22px;
}
.step-card__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #C5A572;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.step-card__title-wrap { flex: 1; }
.step-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}
.step-card__sub {
  margin: 3px 0 0;
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
}
.step-card__head-badge {
  margin-left: auto;
  background: #f5f3eb;
  color: #6b4d1a;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
}

/* Step 카드 안 서브 그룹 */
.step-card__group {
  margin-bottom: 24px;
}
.step-card__group:last-child {
  margin-bottom: 0;
}
.step-card__group-title {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-left: 2px;
}

/* 큰 입력 (차량번호용) */
.field__input--big {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 14px 16px !important;
}

/* ─── 드롭다운 + 직접 입력 ─── */
.select-with-custom {
  position: relative;
}
.select-with-custom__select {
  width: 100%;
}
.select-with-custom__input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.select-with-custom__input input {
  flex: 1;
}
.select-with-custom__back {
  width: 38px;
  height: 38px;
  border: 1px solid #d4d2c8;
  background: #fff;
  border-radius: 6px;
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  font-weight: 400;
}
.select-with-custom__back:hover {
  border-color: #C5A572;
  color: #1a1a1a;
  background: #fff8e1;
}

/* ─── 외장 색상 점 선택기 ─── */
.color-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.color-picker__option {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.color-picker__option:hover {
  background: #fafaf7;
  border-color: #e8e6dc;
}
.color-picker__option--active {
  border-color: #C5A572 !important;
  background: #fff8e1;
}
.color-picker__swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.color-picker__option--active .color-picker__swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C5A572;
}
.color-picker__label {
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
}
.color-picker__option--active .color-picker__label {
  color: #1a1a1a;
  font-weight: 600;
}
.color-picker__input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* ─── 반응형: 좁은 화면에서 색상 점 4개씩 ─── */
@media (max-width: 768px) {
  .color-picker { grid-template-columns: repeat(4, 1fr); }
  .step-card { padding: 20px 18px 18px; }
  .step-card__head { gap: 12px; padding-bottom: 14px; margin-bottom: 18px; }
  .step-card__num { width: 34px; height: 34px; font-size: 15px; }
  .step-card__title { font-size: 16px; }
  .admin-edit-page-v28 { padding: 0 4px; }
}

/* ─── form-grid 간격 통일 ─── */
.step-card .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.step-card .field--full {
  grid-column: 1 / -1;
}
@media (max-width: 768px) {
  .step-card .form-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   v13.29 — 차량 등록 폼 추가 개선
   ────────────────────────────────────────────────────────────────
   · 3열 그리드 (form-grid--3col)
   · 사진 드롭존 (드래그&드롭 강조)
   · "메인으로" 버튼 스타일
   ════════════════════════════════════════════════════════════════ */

/* ─── 3열 그리드 (제조사·차종명·차급 / 배기량·인승·약정주행거리) ─── */
.step-card .form-grid--3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px 18px;
}
@media (max-width: 768px) {
  .step-card .form-grid--3col { grid-template-columns: 1fr; }
}

/* ─── 사진 드롭존 강조 ─── */
.photo-uploader-v13 {
  position: relative;
  border-radius: 10px;
  transition: all 0.15s;
}
.photo-uploader-v13--dragover {
  outline: 2px dashed #C5A572;
  outline-offset: 4px;
  background: #fff8e1;
}
.photo-uploader-v13--dragover::before {
  content: "여기에 사진을 놓으세요";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1a1a1a;
  color: #C5A572;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* ─── "메인으로" 버튼 (1번이 아닌 사진에만 표시) ─── */
.photo-item__btn--make-main {
  background: rgba(197, 165, 114, 0.95) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 16px !important;
  line-height: 1 !important;
}
.photo-item__btn--make-main:hover {
  background: #b29561 !important;
  transform: scale(1.08);
}

/* 사진 영역에 드롭 가능 표시 (평소에도 살짝) */
.photo-uploader-v13 .photo-grid-v13 {
  min-height: 100px;
}
.photo-empty-hint {
  padding: 28px 16px;
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
}


/* ════════════════════════════════════════════════════════════════
   v13.30 — 메인 페이지 카테고리 안내 카드
   ────────────────────────────────────────────────────────────────
   · 인수형/반납형/반납형(보험포함) 탭 선택 시 아래에 표시
   · 카테고리 색상 톤 적용 (골드/파랑/녹색)
   · 좌측 강조 바 + 옅은 배경 + 부드러운 전환
   ════════════════════════════════════════════════════════════════ */

.lease-info-card {
  position: relative;
  padding: 16px 20px 14px 24px;
  border-radius: 10px;
  margin-top: 14px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

/* 좌측 강조 바 */
.lease-info-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 12px;
  width: 3px;
  border-radius: 2px;
  transition: background 0.25s ease;
}

.lease-info-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.45;
}

.lease-info-card__body {
  font-size: 13.5px;
  color: #374151;
  line-height: 1.6;
  letter-spacing: -0.005em;
}

.lease-info-card__note {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

/* ─── 카테고리별 톤 ─── */

/* 인수형: 골드 */
.lease-info-card--acquisition {
  background: #fdf9f0;
  border-color: #e8dcc0;
}
.lease-info-card--acquisition::before {
  background: #C5A572;
}
.lease-info-card--acquisition .lease-info-card__title {
  color: #6b4d1a;
}

/* 반납형: 파랑 */
.lease-info-card--return {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.lease-info-card--return::before {
  background: #2563eb;
}
.lease-info-card--return .lease-info-card__title {
  color: #1e3a8a;
}

/* 반납형(보험포함): 녹색 */
.lease-info-card--insurance {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.lease-info-card--insurance::before {
  background: #16a34a;
}
.lease-info-card--insurance .lease-info-card__title {
  color: #14532d;
}

/* 반응형 */
@media (max-width: 600px) {
  .lease-info-card {
    padding: 14px 16px 12px 22px;
    margin-top: 12px;
  }
  .lease-info-card__title { font-size: 14px; }
  .lease-info-card__body { font-size: 13px; }
}


/* ════════════════════════════════════════════════════════════════
   v13.31 — 관리자 진입을 푸터로 이동 (메인 헤더에서 제거)
   ────────────────────────────────────────────────────────────────
   · 일반 사용자에게는 거의 보이지 않게 (회색·작게·반투명)
   · 호버 시에만 살짝 강조 (사장님이 알아볼 수 있게)
   ════════════════════════════════════════════════════════════════ */

.site-footer__admin-link {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  font-size: 11px;
  color: #9ca3af;
  text-decoration: none;
  opacity: 0.55;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
  letter-spacing: 0.02em;
}

.site-footer__admin-link:hover,
.site-footer__admin-link:focus {
  opacity: 1;
  color: #C5A572;
  border-color: rgba(197, 165, 114, 0.35);
  background: rgba(197, 165, 114, 0.08);
}

/* 푸터 우측 영역 (관리자 링크가 있어도 자연스럽게 정렬) */
.site-footer__inner > div:last-child {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ════════════════════════════════════════════════════════════════
   v13.32 — 새 푸터 디자인 + 약관/개인정보 모달
   ────────────────────────────────────────────────────────────────
   · 회사 정보 (좌) + 고객센터 (우)
   · 하단에 저작권 + 약관/개인정보 링크
   · 약관/개인정보는 모달로 표시 (full screen, 스크롤)
   ════════════════════════════════════════════════════════════════ */

/* ─── 새 푸터 (site-footer--v32) ─── */
.site-footer--v32 {
  background: #f3f3f0;
  border-top: 1px solid #e5e5e0;
  color: #4a4a48;
  padding: 0;
  margin-top: 40px;
}

.site-footer__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 16px 32px;
  flex-wrap: wrap;
}

/* ─── 좌측: 회사 정보 ─── */
.site-footer__company { flex: 1; min-width: 320px; }

.site-footer__tagline {
  font-size: 11px;
  color: #6b7280;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 4px;
}

.site-footer__brand {
  font-size: 22px;
  font-weight: 300;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.site-footer__brand-strong {
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}

.site-footer__company-info {
  font-size: 13px;
  color: #4a4a48;
  line-height: 1.7;
}
.site-footer__row {
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  align-items: center;
}
.site-footer__row strong { color: #1a1a1a; font-weight: 600; }
.site-footer__row--muted { color: #6b7280; font-size: 12px; margin-top: 6px; }
.site-footer__sep {
  display: inline-block;
  margin: 0 10px;
  color: #c7c7c0;
  font-weight: 300;
}

/* ─── 우측: 고객센터 ─── */
.site-footer__cs {
  text-align: right;
  min-width: 220px;
}

.site-footer__cs-links {
  margin-bottom: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.site-footer__cs-link {
  font-size: 13px;
  color: #4a4a48;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.site-footer__cs-link:hover { color: #1a1a1a; }
.site-footer__cs-link--accent { color: #16a34a; font-weight: 600; }
.site-footer__cs-link--accent:hover { color: #15803d; }

.site-footer__cs-label {
  font-size: 11px;
  color: #6b7280;
  letter-spacing: 0.15em;
  font-weight: 600;
  margin-bottom: 4px;
}

.site-footer__cs-tel {
  font-size: 30px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.site-footer__cs-hours {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
}

/* ─── 푸터 하단 ─── */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px;
  border-top: 1px solid #e5e5e0;
  background: #ececea;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer__copyright {
  color: #6b7280;
  letter-spacing: 0.02em;
  font-size: 11px;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer__legal-link {
  font-size: 13px;
  color: #4a4a48;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
  cursor: pointer;
}
.site-footer__legal-link:hover { color: #1a1a1a; }
.site-footer__legal-link--bold {
  font-weight: 700;
  color: #1a1a1a;
}
.site-footer__legal-sep {
  color: #c7c7c0;
  font-weight: 300;
}

/* 관리자 페이지 링크 (v13.31에서 추가된 것 - 새 푸터에서 위치 조정) */
.site-footer--v32 .site-footer__admin-link {
  margin-left: 16px;
  font-size: 11px;
  color: #9ca3af;
  opacity: 0.5;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.site-footer--v32 .site-footer__admin-link:hover {
  opacity: 1;
  color: #C5A572;
  border-color: rgba(197, 165, 114, 0.35);
  background: rgba(197, 165, 114, 0.08);
}

/* ─── 반응형 ─── */
@media (max-width: 720px) {
  .site-footer__main {
    flex-direction: column;
    gap: 24px;
    padding: 28px 16px 24px;
  }
  .site-footer__cs { text-align: left; min-width: 0; }
  .site-footer__cs-links { justify-content: flex-start; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__row { font-size: 12px; }
  .site-footer__sep { margin: 0 6px; }
  .site-footer__cs-tel { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════════
   약관/개인정보 모달 (legal-modal)
   ════════════════════════════════════════════════════════════════ */

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.legal-modal--open { display: flex; }

.legal-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.legal-modal__card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  max-width: 800px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: legal-modal-enter 0.18s ease-out;
}
@keyframes legal-modal-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.legal-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #fafafa;
}
.legal-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
.legal-modal__close {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  font-size: 22px;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.legal-modal__close:hover {
  background: #f3f4f6;
  color: #1a1a1a;
}

.legal-modal__body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.75;
  color: #374151;
}

/* 모달 본문 안의 마크업 톤 (pandoc 변환 결과 대응) */
.legal-modal__body p {
  margin: 0 0 12px;
}
.legal-modal__body strong { color: #1a1a1a; font-weight: 700; }
.legal-modal__body ol,
.legal-modal__body ul {
  margin: 8px 0 14px;
  padding-left: 24px;
}
.legal-modal__body li {
  margin-bottom: 6px;
}
.legal-modal__body li > p { margin-bottom: 4px; }

.legal-modal__loading {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
  font-size: 14px;
}

.legal-modal__foot {
  padding: 14px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  background: #fafafa;
}
.legal-modal__btn {
  padding: 9px 22px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.legal-modal__btn:hover { background: #f5f3eb; border-color: #C5A572; }
.legal-modal__btn--primary {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.legal-modal__btn--primary:hover { background: #000; border-color: #000; color: #fff; }

@media (max-width: 600px) {
  .legal-modal { padding: 16px 12px; }
  .legal-modal__head { padding: 14px 18px; }
  .legal-modal__title { font-size: 15px; }
  .legal-modal__body { padding: 18px 18px; font-size: 13px; }
  .legal-modal__foot { padding: 12px 18px; }
}


/* ════════════════════════════════════════════════════════════════
   v13.34 — 푸터 슬림화 + 비밀번호 변경 톱니 아이콘
   ════════════════════════════════════════════════════════════════ */

/* ─── 푸터 두께 줄이기 (v32 → 슬림 버전) ─── */
.site-footer--v32 .site-footer__main {
  padding: 24px 16px 20px !important;   /* 기존 40px 32px → 24px 20px */
}

.site-footer--v32 .site-footer__brand {
  font-size: 18px !important;            /* 기존 22px → 18px */
  margin-bottom: 12px !important;        /* 기존 20px → 12px */
}

.site-footer--v32 .site-footer__tagline {
  font-size: 10px !important;            /* 기존 11px → 10px */
  margin-bottom: 2px !important;
}

.site-footer--v32 .site-footer__company-info {
  font-size: 12px !important;            /* 기존 13px → 12px */
  line-height: 1.6 !important;           /* 기존 1.7 → 1.6 */
}

.site-footer--v32 .site-footer__row {
  margin-bottom: 2px !important;         /* 기존 4px → 2px */
}

.site-footer--v32 .site-footer__row--muted {
  font-size: 11px !important;
  margin-top: 3px !important;
}

.site-footer--v32 .site-footer__cs-tel {
  font-size: 24px !important;            /* 기존 30px → 24px */
  margin-bottom: 4px !important;
  line-height: 1 !important;
}

.site-footer--v32 .site-footer__cs-label {
  font-size: 10px !important;
  margin-bottom: 2px !important;
}

.site-footer--v32 .site-footer__cs-hours {
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.site-footer--v32 .site-footer__cs-links {
  margin-bottom: 8px !important;
}

.site-footer--v32 .site-footer__cs-link {
  font-size: 12px !important;
}

.site-footer--v32 .site-footer__bottom {
  padding: 12px 16px !important;         /* 기존 18px → 12px */
}

.site-footer--v32 .site-footer__copyright {
  font-size: 10px !important;
}

.site-footer--v32 .site-footer__legal-link {
  font-size: 12px !important;
}

/* 외부 여백도 살짝 줄이기 */
.site-footer--v32 {
  margin-top: 32px !important;           /* 기존 40px → 32px */
}

/* ════════════════════════════════════════════════════════════════
   비밀번호 변경 (사이드바 톱니 아이콘)
   ════════════════════════════════════════════════════════════════ */

.admin-sidebar__user-action {
  background: transparent;
  border: 1px solid rgba(197, 165, 114, 0.25);
  color: #C5A572;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-right: 4px;
  line-height: 1;
}
.admin-sidebar__user-action:hover {
  background: rgba(197, 165, 114, 0.15);
  border-color: #C5A572;
  color: #fff;
}


/* ════════════════════════════════════════════════════════════════
   v13.38 — 가격 추적 (인수형 전용, 하모니 30일 룰)
   ──────────────────────────────────────────────────────────────
   - admin/edit.html Step 3 안의 가격 추적 박스
   - admin/index.html 차량 셀 안의 가격 추적 한 줄 (B안)
   - admin/index.html 필터 그룹의 가격 추적 그룹 hint
   ═══════════════════════════════════════════════════════════════ */

/* ─── edit.html: 가격 추적 박스 ─── */
.price-tracking-box {
  margin-top: 16px;
  padding: 16px 18px;
  background: #fffaf0;
  border: 1px solid #f3d99e;
  border-radius: 8px;
}
.price-tracking-box--hidden {
  display: none;
}
.price-tracking-box__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.price-tracking-box__title {
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
}
.price-tracking-box__badge {
  display: inline-block;
  padding: 2px 8px;
  background: #92400e;
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.price-tracking-box__desc {
  margin: 0 0 14px;
  font-size: 12px;
  color: #78350f;
  line-height: 1.55;
}
.price-tracking-box__desc strong {
  color: #92400e;
  font-weight: 700;
}
.price-tracking-box__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .price-tracking-box__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── admin/index.html: 차량 셀 안의 가격 추적 한 줄 ─── */
.admin-car-cell__pricing {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.4;
}

.admin-car-cell__pricing .pricing-tag {
  padding: 1px 6px;
  background: #1a1a1a;
  color: #C5A572;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.admin-car-cell__pricing .pricing-item {
  color: #4b5563;
}
.admin-car-cell__pricing .pricing-item strong {
  color: #1a1a1a;
  font-weight: 700;
}
.admin-car-cell__pricing .pricing-sep {
  color: #cbd5e0;
}
.admin-car-cell__pricing .pricing-missing {
  color: #9ca3af;
  font-style: italic;
}

/* 가격 추적 D-N 배지 (상태별 색상) */
.admin-car-cell__pricing .pricing-badge {
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.pricing-badge--safe     { background: #e6f4ea; color: #16a34a; }
.pricing-badge--warning  { background: #fef9c3; color: #ca8a04; }
.pricing-badge--imminent { background: #fff1e6; color: #ea580c; }
.pricing-badge--expired  { background: #fee2e2; color: #dc2626; }

/* 가격 차이 표시 (-200만 / +50만) */
.admin-car-cell__pricing .pricing-diff {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
}
.pricing-diff--down { background: #dcfce7; color: #15803d; }  /* 더 싸게 매입 = 이득 = 녹색 */
.pricing-diff--up   { background: #fee2e2; color: #b91c1c; }  /* 더 비싸게 매입 = 손해 = 빨강 */

/* 컨테이너 톤 (전체 박스 자체 강조 - 임박/만료만) */
.admin-car-cell__pricing--imminent {
  background: #fff7ed;
  border-color: #fed7aa;
}
.admin-car-cell__pricing--expired {
  background: #fef2f2;
  border-color: #fecaca;
}
.admin-car-cell__pricing--missing {
  background: #f9fafb;
  border-color: #e5e7eb;
}

/* ─── admin filter group: hint 텍스트 ─── */
.admin-filter-group__hint {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════
   v13.39 — 가격 추적 박스 재설계 (오토핸즈 + 마진 + 하모니 자동계산)
   ─────────────────────────────────────────────────────────────
   - 인수형 라디오 직후 자리로 이동 (안내문구 자리)
   - 좌(입력) → 우(자동계산) 시각적 흐름
   - 차량가격 박스는 절반 너비로 축소
   ═══════════════════════════════════════════════════════════════ */

/* 가격 추적 박스 내부: 1차 / 2차 행 */
.price-tracking-row {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 14px;
}
.price-tracking-row--secondary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #f3d99e;
}

.price-tracking-row__inputs {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.6fr;  /* 오토핸즈가 가장 넓게 */
  gap: 10px;
}
.price-tracking-row--secondary .price-tracking-row__inputs {
  grid-template-columns: 1fr;  /* 2차 행: 오토핸즈만 (성능일/마진 없음) */
  max-width: 33%;
}

.price-tracking-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #C5A572;
  user-select: none;
}

.price-tracking-row__output {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 하모니 확정가 필드는 시각적으로 "자동 계산" 느낌 */
#harmony-price-1,
#harmony-price-2 {
  background: #fefce8;
  border-color: #f3d99e;
  font-weight: 700;
  color: #92400e;
}

/* 마진 드롭다운 살짝 강조 */
#margin-rate {
  font-weight: 700;
  color: #92400e;
  text-align: center;
}

/* 모바일 (좁은 화면): 세로로 정렬 */
@media (max-width: 820px) {
  .price-tracking-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .price-tracking-row__inputs {
    grid-template-columns: 1fr 1fr;
  }
  .price-tracking-row--secondary .price-tracking-row__inputs {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .price-tracking-row__arrow {
    transform: rotate(90deg);
    font-size: 18px;
  }
}

/* ─── 차량가격 박스 절반 너비 ─── */
.admin-vehicle-price-wrap {
  max-width: 50%;
}
@media (max-width: 720px) {
  .admin-vehicle-price-wrap {
    max-width: 100%;
  }
}

/* v13.38 price-tracking-box__grid (구식 3열 그리드) 사용 안 함 — 호환 위해 남김 */

/* ════════════════════════════════════════════════════════════════
   v13.40 — 가격 추적 박스 3 컬럼 구조 + 양쪽 카운트다운
   ─────────────────────────────────────────────────────────────
   - 좌: 오토핸즈(매입처) / 중: 마진+화살표 / 우: 하모니(운영사)
   - 양쪽 30일 룰: 성능일 D-N, 확정일 D-N 라이브 표시
   - 차량 관리 테이블 셀에도 양쪽 D-N 배지
   ═══════════════════════════════════════════════════════════════ */

/* ─── 가격 추적 박스 내부 3 컬럼 그리드 ─── */
.pt-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  margin-top: 14px;
  align-items: stretch;
}

/* 좌·우 컬럼 (오토핸즈 / 하모니) */
.pt-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #f3d99e;
  border-radius: 8px;
}
.pt-col--source {
  border-left: 3px solid #f59e0b;
}
.pt-col--dest {
  border-left: 3px solid #C5A572;
}

.pt-col__title {
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
  padding-bottom: 8px;
  border-bottom: 1px solid #fef3c7;
  margin-bottom: 2px;
}
.pt-col__subtitle {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}

/* ─── 중앙: 마진 + 화살표 ─── */
.pt-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 50px;  /* 좌우의 1차 가격 input 라인에 맞춤 */
  gap: 12px;
  min-width: 90px;
}
.pt-margin-field {
  width: 90px;
  margin: 0;
}
.pt-margin-field .field__label {
  text-align: center;
}
#margin-rate {
  font-weight: 700;
  color: #92400e;
  text-align: center;
}
.pt-arrow {
  font-size: 26px;
  font-weight: 700;
  color: #C5A572;
  user-select: none;
  line-height: 1;
}

/* ─── 하모니 확정가 필드: 자동 계산 강조 ─── */
#harmony-price-1,
#harmony-price-2 {
  background: #fefce8;
  border-color: #f3d99e;
  font-weight: 700;
  color: #92400e;
}

/* ─── 카운트다운 라이브 표시 ─── */
.pt-countdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  margin-top: -4px;  /* 직전 날짜 필드와 가깝게 */
}
.pt-countdown__line {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.pt-countdown__label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}
.pt-countdown__badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  background: #e5e7eb;
  color: #6b7280;
}
.pt-countdown__hint {
  font-size: 10.5px;
  color: #9ca3af;
  line-height: 1.4;
}

/* 카운트다운 상태별 색상 */
.pt-countdown--empty {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.pt-countdown--safe {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.pt-countdown--safe .pt-countdown__badge {
  background: #dcfce7;
  color: #16a34a;
}
.pt-countdown--warning {
  background: #fefce8;
  border-color: #fef08a;
}
.pt-countdown--warning .pt-countdown__badge {
  background: #fef9c3;
  color: #ca8a04;
}
.pt-countdown--imminent {
  background: #fff7ed;
  border-color: #fed7aa;
}
.pt-countdown--imminent .pt-countdown__badge {
  background: #fff1e6;
  color: #ea580c;
}
.pt-countdown--expired {
  background: #fef2f2;
  border-color: #fecaca;
}
.pt-countdown--expired .pt-countdown__badge {
  background: #fee2e2;
  color: #dc2626;
}

/* ─── 모바일 (좁은 화면): 세로 1열 ─── */
@media (max-width: 820px) {
  .pt-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pt-middle {
    flex-direction: row;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pt-arrow {
    transform: rotate(90deg);
  }
}

/* ════════════════════════════════════════════════════════════════
   v13.40 — 차량 셀 안의 양쪽 D-N 배지 (성능 / 확정)
   ═══════════════════════════════════════════════════════════════ */

.admin-car-cell__pricing .pricing-day {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.pricing-day--safe     { background: #e6f4ea; color: #16a34a; }
.pricing-day--warning  { background: #fef9c3; color: #ca8a04; }
.pricing-day--imminent { background: #fff1e6; color: #ea580c; }
.pricing-day--expired  { background: #fee2e2; color: #dc2626; }
.pricing-day--empty    { background: #f3f4f6; color: #9ca3af; }

/* ════════════════════════════════════════════════════════════════
   v13.41 — 마스터 DB 검색 모달 (하모니 견적기 239대)
   ─────────────────────────────────────────────────────────────
   - "마스터 DB에서 찾기" 버튼 (Step 1 헤더 우측)
   - 모달: 브랜드 칩 + 키워드 검색 + 결과 리스트
   - 차량 선택 → 폼 자동 채움
   ═══════════════════════════════════════════════════════════════ */

/* Step 1 헤더의 마스터 DB 버튼 */
.step-card__head {
  align-items: center;
  gap: 12px;
}
.master-db-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
  font-family: inherit;
  transition: background 0.15s;
}
.master-db-btn:hover {
  background: #C5A572;
}
.master-db-btn__count {
  padding: 2px 8px;
  background: #C5A572;
  color: #1a1a1a;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.master-db-btn:hover .master-db-btn__count {
  background: #1a1a1a;
  color: #C5A572;
}

/* ─── 마스터 DB 모달 ─── */
#master-db-modal .modal__card--wide {
  max-width: 880px;
  width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.mdb-modal__head {
  padding-right: 40px;
  margin-bottom: 18px;
}
.mdb-modal__title {
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.mdb-modal__sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* 검색 + 브랜드 필터 */
.mdb-modal__filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.mdb-modal__search {
  position: relative;
}
.mdb-modal__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
  pointer-events: none;
}
.mdb-modal__search-input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.mdb-modal__search-input:focus {
  border-color: #C5A572;
}
.mdb-modal__brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mdb-chip {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.mdb-chip:hover {
  border-color: #C5A572;
}
.mdb-chip--active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.mdb-chip__count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
}
.mdb-chip--active .mdb-chip__count {
  background: #C5A572;
  color: #1a1a1a;
}

/* 결과 바 */
.mdb-modal__result-bar {
  padding: 8px 12px;
  background: #fafafa;
  border-radius: 6px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 8px;
}

/* 결과 리스트 (스크롤 영역) */
.mdb-modal__list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  min-height: 240px;
  max-height: 380px;
}
.mdb-list__empty {
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}
.mdb-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.1s;
}
.mdb-item:hover {
  background: #fafaf7;
}
.mdb-item--selected {
  background: #fef3c7;
}
.mdb-item--selected:hover {
  background: #fde68a;
}
.mdb-item__main {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mdb-item__brand {
  display: inline-block;
  padding: 2px 8px;
  background: #1a1a1a;
  color: #C5A572;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.mdb-item__name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a1a;
}
.mdb-item__meta {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 11.5px;
  color: #6b7280;
}
.mdb-item__price {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-size: 14px;
  color: #C5A572;
  white-space: nowrap;
}

/* 모달 푸터 (선택 + 적용) */
.mdb-modal__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  margin-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.mdb-modal__selected {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}
.mdb-modal__selected-empty {
  color: #9ca3af;
  font-style: italic;
}
.mdb-modal__selected-label {
  color: #6b7280;
}
.mdb-modal__selected strong {
  color: #1a1a1a;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdb-modal__selected-price {
  color: #C5A572;
  font-weight: 700;
  flex-shrink: 0;
}
.mdb-modal__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  #master-db-modal .modal__card--wide {
    width: 96vw;
    max-height: 92vh;
  }
  .mdb-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .mdb-modal__actions {
    justify-content: flex-end;
  }
  .master-db-btn {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   v13.42 — 견적서 발행 페이지 (Phase D)
   ─────────────────────────────────────────────────────────────
   - 인쇄 친화적 디자인 (A4)
   - PDF 저장 가능 (브라우저 인쇄 → PDF로 저장)
   ═══════════════════════════════════════════════════════════════ */

.quote-sheet-body {
  background: #f3f4f6;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
}

.quote-sheet-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background: #1a1a1a;
  color: #fff;
  border-bottom: 2px solid #C5A572;
}
.quote-sheet-toolbar__spacer { flex: 1; }
.quote-sheet-toolbar .btn { font-family: inherit; }
.quote-sheet-toolbar .btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.quote-sheet-toolbar .btn--ghost:hover {
  border-color: #C5A572;
  color: #C5A572;
}
.quote-sheet-toolbar .btn--primary {
  background: #C5A572;
  color: #1a1a1a;
  border: none;
}
.quote-sheet-toolbar .btn--primary:hover {
  background: #a98b5d;
}

.quote-sheet {
  max-width: 800px;
  margin: 24px auto;
  background: #fff;
  padding: 40px 48px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  color: #1a1a1a;
  line-height: 1.5;
}

.quote-sheet__loading,
.quote-sheet__error {
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
}
.quote-sheet__error {
  color: #dc2626;
  font-weight: 600;
}

/* 헤더 */
.qs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 3px solid #1a1a1a;
}
.qs-header__logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1a1a1a;
}
.qs-header__subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: #C5A572;
  font-weight: 600;
}
.qs-header__meta {
  font-size: 12px;
}
.qs-header__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.qs-header__meta-label {
  color: #6b7280;
}
.qs-header__meta-row strong {
  color: #1a1a1a;
  font-weight: 700;
}

/* 섹션 */
.qs-section {
  margin-bottom: 22px;
}
.qs-section__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.qs-section__heading {
  display: inline-block;
  padding: 4px 10px;
  background: #1a1a1a;
  color: #C5A572;
  font-size: 13px;
  font-weight: 700;
  border-radius: 3px;
  margin: 0 0 8px;
}
.qs-section--highlight .qs-section__heading {
  background: #C5A572;
  color: #1a1a1a;
}

/* 테이블 */
.qs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.qs-table th,
.qs-table td {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}
.qs-table th {
  background: #fafaf7;
  font-weight: 600;
  color: #4b5563;
  width: 18%;
}
.qs-table__pct {
  color: #6b7280;
  font-size: 11px;
  margin-left: 4px;
}
.qs-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.qs-table__cat {
  background: #f9fafb;
  font-weight: 700;
  color: #1a1a1a;
  font-size: 12px;
  text-align: center;
}
.qs-table--breakdown thead th {
  background: #1a1a1a;
  color: #C5A572;
  text-align: center;
  font-weight: 700;
}
.qs-table__total {
  background: #fef9c3;
}
.qs-table__total td {
  font-size: 13px;
  padding: 10px;
}

/* 가격 표 */
.qs-table--price th {
  background: #fefce8;
  width: 60%;
}
.qs-table--price tr.qs-table__sub-total {
  background: #fef3c7;
}
.qs-table--price tr.qs-table__sub-total td,
.qs-table--price tr.qs-table__sub-total th {
  padding: 10px;
  font-size: 13.5px;
}
.qs-table__final {
  background: #1a1a1a;
  color: #fff;
}
.qs-table__final th {
  background: #1a1a1a;
  color: #C5A572;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 10px;
}
.qs-table__final td {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  padding: 14px 10px;
}
.qs-table__final-sub td {
  text-align: center;
  background: #2a2a2a;
  color: #C5A572;
  font-size: 11px;
  padding: 6px;
}

/* 푸터 */
.qs-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 2px solid #1a1a1a;
  font-size: 12px;
}
.qs-footer__company {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.qs-footer__contact {
  color: #C5A572;
  font-size: 13px;
  margin-bottom: 12px;
}
.qs-footer__contact strong {
  font-size: 15px;
}
.qs-footer__note {
  color: #6b7280;
  font-size: 10.5px;
  line-height: 1.7;
}

/* 인쇄용 */
@media print {
  .no-print { display: none !important; }
  body { background: white; }
  .quote-sheet {
    box-shadow: none;
    margin: 0;
    padding: 24px;
    max-width: 100%;
  }
  .qs-section { page-break-inside: avoid; }
  .qs-table { page-break-inside: avoid; }
}

/* 모바일 */
@media (max-width: 720px) {
  .quote-sheet {
    margin: 12px;
    padding: 20px;
  }
  .qs-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .qs-table th, .qs-table td {
    font-size: 11.5px;
    padding: 6px;
  }
}

/* v13.42: 견적서 보기 버튼 (인수형 견적 계산기 안) */
.quote-calc-result__sheet {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 16px;
  background: #fff;
  color: #1a1a1a;
  border: 1.5px solid #1a1a1a;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.quote-calc-result__sheet:hover {
  background: #1a1a1a;
  color: #C5A572;
}

/* ════════════════════════════════════════════════════════════════
   v13.43 — 통합 폼 개편 (cascade + 신차가 안내 + 견적 패널 강화)
   ─────────────────────────────────────────────────────────────
   1. cascade 드롭다운 (제조사 → 시리즈 → 라인업)
   2. 신차가 참고 안내 (마스터 DB 선택 시 차량가격 옆 표시)
   3. 견적 결과 영역 강화 (48/60/만기인수가 + 부대비용 명세 펼침)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Cascade 드롭다운 영역 ─── */
.cascade-row {
  margin-top: 12px;
  padding: 14px;
  background: linear-gradient(to right, #fef9e7 0%, #fafaf7 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.cascade-row__header {
  margin-bottom: 10px;
}
.cascade-row__title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
}
.cascade-row__hint {
  display: block;
  font-size: 11.5px;
  color: #92400e;
  margin-top: 2px;
}
.cascade-row__selects {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.cascade-row__selects .field__label {
  font-size: 11.5px;
  color: #6b7280;
  margin-bottom: 4px;
}
.cascade-row__selects .field__input {
  font-size: 13px;
}
.cascade-row__selects .field__input:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* ─── 신차가 참고 안내 (차량가격 옆) ─── */
.msrp-hint {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fffbeb;
  border: 1px dashed #fcd34d;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.msrp-hint__label {
  color: #92400e;
  font-weight: 600;
  margin-right: 4px;
}
.msrp-hint strong {
  color: #1a1a1a;
  font-weight: 700;
  margin-right: 6px;
}
.msrp-hint__note {
  display: block;
  color: #6b7280;
  font-size: 11px;
  margin-top: 2px;
}

/* ─── 견적 결과 영역 강화 (48/60/만기인수가 + 부대비용 명세) ─── */
.quote-result__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.quote-result__main {
  padding: 10px 12px;
  border-radius: 6px;
  text-align: center;
}
.quote-result__main--48 {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.quote-result__main--60 {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.quote-result__main--acq {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}
.quote-result__main-label {
  font-size: 11px;
  color: #4b5563;
  margin-bottom: 4px;
  font-weight: 600;
}
.quote-result__main-price {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}
.quote-result__main-price span {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin-left: 2px;
}
.quote-result__breakdown {
  margin-top: 12px;
  font-size: 12px;
}
.quote-result__breakdown summary {
  cursor: pointer;
  color: #6b7280;
  padding: 6px 8px;
  background: #fafaf7;
  border-radius: 4px;
  font-weight: 600;
  user-select: none;
}
.quote-result__breakdown summary:hover {
  background: #f3f4f6;
}
.quote-result__breakdown-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
}
.quote-result__breakdown-table tr td {
  padding: 4px 8px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 11.5px;
}
.quote-result__breakdown-table tr td:first-child {
  color: #6b7280;
}
.quote-result__breakdown-table tr td:last-child {
  text-align: right;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}
.quote-result__breakdown-total td {
  font-weight: 700;
  color: #1a1a1a !important;
  background: #fef3c7;
  padding: 6px 8px !important;
}
.quote-result__breakdown-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: #92400e;
  font-style: italic;
}

@media (max-width: 720px) {
  .cascade-row__selects {
    flex-direction: column;
    align-items: stretch;
  }
  .quote-result__grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   v13.45 — 차량등록페이지 대대적 개편 + 견적기 팝업 + 견적서
   ─────────────────────────────────────────────────────────────
   1. Step 0 (리스 유형 카드)
   2. 선택된 리스 유형 표시 (Step 3 안)
   3. 가격 체크 버튼
   4. 48/60 두 행 컨테이너
   5. 성능지 업로드 + 뷰어
   6. 외장색상 레이아웃 (간격 좁힘 + 선택 우측)
   7. 견적기 모달
   8. 견적기 버튼 (관리자 차량 행)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Step 0: 리스 유형 카드 ─── */
.step-card--lease-type {
  border-left: 4px solid #C5A572;
  background: linear-gradient(to right, #fffbeb 0%, #fff 50%);
}
.step-card__num--zero {
  background: #C5A572 !important;
  color: #1a1a1a !important;
}
.lease-type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.lease-type-card {
  position: relative;
  display: block;
  padding: 16px 18px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.lease-type-card:hover {
  border-color: #C5A572;
  transform: translateY(-1px);
}
.lease-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.lease-type-card--active {
  border-color: #1a1a1a;
  background: linear-gradient(to bottom right, #fef3c7 0%, #fff 100%);
  box-shadow: 0 2px 8px rgba(197,165,114,0.2);
}
.lease-type-card__body { }
.lease-type-card__name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.lease-type-card__desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}
.lease-type-card__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #C5A572;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
  opacity: 0;
  transition: opacity 0.15s;
}
.lease-type-card--active .lease-type-card__check {
  opacity: 1;
}

/* ─── 2. 선택된 리스 유형 표시 ─── */
.selected-lease-type {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: linear-gradient(to right, #fef3c7 0%, #fffbeb 100%);
  border: 2px solid #C5A572;
  border-radius: 8px;
  font-size: 14px;
}
.selected-lease-type__text {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.3px;
}
/* 미선택 상태 (Step 0에서 안 누른 경우) — 회색 */
.selected-lease-type:not(.selected-lease-type--filled) {
  background: #fafaf7;
  border-color: #d4d2c8;
}
.selected-lease-type:not(.selected-lease-type--filled) .selected-lease-type__text {
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
}

/* ─── 3. 가격 체크 버튼 (하모니 1차/2차 → 차량가격) ─── */
.price-check-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 8px;
  background: #C5A572;
  color: #1a1a1a;
  border: none;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.price-check-btn:hover {
  background: #a98b5d;
  color: #fff;
}

/* ─── 4. 48/60 두 행 (인수형 계약) ─── */
.contract-pair {
  padding: 16px;
  background: linear-gradient(to bottom, #fef9c3 0%, #fffbeb 100%);
  border: 1px solid #fcd34d;
  border-radius: 8px;
  margin-bottom: 14px;
}
.contract-pair__title {
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 4px;
}
.contract-pair__sub {
  font-size: 11.5px;
  color: #92400e;
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.contract-pair__row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 8px 0;
  border-bottom: 1px dashed #fde68a;
}
.contract-pair__row:last-child {
  border-bottom: none;
}
.contract-pair__row--summary {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  margin-top: 6px;
  border-bottom: none;
}
.contract-pair__col--label {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 8px 0;
}
.contract-pair__col--label strong {
  display: inline-block;
  padding: 4px 10px;
  background: #1a1a1a;
  color: #C5A572;
  border-radius: 4px;
  font-size: 13px;
}
.contract-single {
  /* v13.46: display:contents가 hidden 무시하던 문제 fix → 자식 div들 일반 흐름 */
  display: block;
}
.contract-single[hidden] {
  display: none !important;
}

/* ─── 5. 성능지 업로드 + 뷰어 ─── */
.inspection-report-block {
  margin-top: 18px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
}
.inspection-report-block__head {
  margin-bottom: 10px;
}
.inspection-report-block__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a1a;
}
.inspection-report-block__hint {
  display: block;
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}
.inspection-report-uploader {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.inspection-report-item {
  position: relative;
  width: 120px;
  height: 130px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.inspection-report-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.inspection-report-item__pdf-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #dc2626;
  font-weight: 700;
  font-size: 13px;
}
.inspection-report-item__name {
  padding: 6px 8px;
  font-size: 10.5px;
  color: #6b7280;
  background: #fafafa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspection-report-item__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  line-height: 22px;
  padding: 0;
}
.inspection-report-item--add {
  background: #fafaf7;
  border: 1.5px dashed #C5A572;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.inspection-report-item__plus {
  font-size: 32px;
  color: #C5A572;
  margin-bottom: 4px;
}

/* 성능지 뷰어 (사용자 페이지에서 뜨는 모달) */
.inspection-view-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.inspection-view-btn:hover {
  background: #fde68a;
}
.inspection-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
}
.inspection-viewer-modal[hidden] { display: none; }
.inspection-viewer-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
}
.inspection-viewer-modal__card {
  position: relative;
  z-index: 1;
  margin: 2.5vh auto;
  background: #fff;
  border-radius: 12px;
  max-width: 1100px;
  width: 96vw;
  max-height: 95vh;
  overflow-y: auto;
  padding: 24px;
}
.inspection-viewer-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
.inspection-viewer-modal__title {
  font-size: 18px;
  margin: 0 0 18px;
}
.inspection-viewer__item {
  margin-bottom: 18px;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}
.inspection-viewer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.inspection-viewer__name {
  font-size: 12px;
  color: #6b7280;
}
.inspection-viewer__newtab {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.inspection-viewer__newtab:hover {
  background: #f3f4f6;
  border-color: #C5A572;
}
.inspection-viewer__img {
  width: 100%;
  border-radius: 6px;
  display: block;
}
.inspection-viewer__pdf {
  width: 100%;
  height: 82vh;
  min-height: 560px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}
.inspection-viewer__download {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background: #1a1a1a;
  color: #C5A572;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

/* ─── 6. 외장 색상 레이아웃 (간격 좁힘 + 선택 표시 우측) ─── */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;  /* 간격 좁힘 (기존 12~16px → 6px) */
}
.color-picker__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.color-picker__option:hover {
  border-color: #C5A572;
}
.color-picker__option.is-selected {
  border-color: #1a1a1a;
}
.color-picker__swatch {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.color-picker__label {
  font-size: 10.5px;
  color: #6b7280;
}
/* 선택된 색상명 입력칸 — 색상 점들 맨 오른쪽 */
.color-picker__custom-input {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  margin-left: 12px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

/* ─── 7. 견적기 모달 (이미지 3+4 통합) ─── */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
}
.quote-modal[hidden] { display: none; }
.quote-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.quote-modal__card {
  position: relative;
  z-index: 1;
  margin: 24px auto;
  background: #fff;
  border-radius: 12px;
  max-width: 980px;
  width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.quote-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.quote-modal__title {
  background: linear-gradient(to right, #e0e7ff 0%, #c7d2fe 100%);
  color: #1e40af;
  padding: 12px 18px;
  margin: 0 0 18px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

/* 견적기 섹션 (차량/계약 정보) */
.quote-section {
  margin-bottom: 20px;
}
.quote-section__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quote-section__col { }
.quote-section__heading {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  padding: 6px 10px;
  margin: 0 0 6px;
  border-radius: 4px;
}
.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.quote-table th,
.quote-table td {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  text-align: left;
}
.quote-table th {
  background: #fafaf7;
  font-weight: 600;
  color: #4b5563;
  width: 30%;
}
.quote-table__hi {
  color: #dc2626;
  font-weight: 700;
}
.quote-table--inputs th {
  background: #eff6ff;
  width: 15%;
}
.quote-input {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
}

/* 견적 결과 표 (이미지 4) */
.quote-section--result {
  border-top: 2px solid #1e40af;
  padding-top: 14px;
}
.quote-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.quote-result-table th,
.quote-result-table td {
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  text-align: center;
}
.quote-result-table th {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 700;
}
.quote-result-table__head {
  background: #c7d2fe !important;
}
.quote-result-table__head48,
.quote-result-table__head60 {
  background: #dbeafe;
  color: #1e40af;
}
.quote-result-table td:first-child {
  text-align: left;
  background: #fafaf7;
  font-weight: 500;
}
.quote-result-table__summary {
  background: #dbeafe;
}
.quote-result-table__summary td {
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
}
.quote-result-table__group td {
  background: #fef3c7 !important;
  font-weight: 700;
  color: #92400e !important;
  text-align: center !important;
}
.quote-result-table__hi {
  color: #dc2626;
  font-weight: 700;
}
.quote-result-table__price {
  color: #1e40af;
  font-weight: 600;
}
.quote-result-table__highlight {
  background: #fff;
  border: 2px solid #dc2626 !important;
}
.quote-result-table__highlight td {
  font-size: 14px;
  font-weight: 700;
  color: #dc2626 !important;
  padding: 10px;
  background: #fff !important;
}

/* 견적기 액션 버튼 */
.quote-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}
.quote-modal__btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.quote-modal__btn--48 {
  background: #1e40af;
  color: #fff;
}
.quote-modal__btn--48:hover {
  background: #1e3a8a;
  transform: translateY(-1px);
}
.quote-modal__btn--60 {
  background: #C5A572;
  color: #1a1a1a;
}
.quote-modal__btn--60:hover {
  background: #a98b5d;
  color: #fff;
  transform: translateY(-1px);
}

/* ─── 8. 관리자 차량 행의 견적 버튼 ─── */
.admin-link--quote {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-weight: 700;
}
.admin-link--quote:hover {
  background: #fde68a;
}

/* 반응형 */
@media (max-width: 720px) {
  .lease-type-cards { grid-template-columns: 1fr; }
  .quote-section__row { grid-template-columns: 1fr; }
  .quote-modal__card { padding: 18px; }
  .contract-pair__row { flex-direction: column; align-items: stretch; }
  .color-picker__custom-input { margin-left: 0; margin-top: 8px; min-width: 100%; }
}

/* v13.46: 견적기 모달 — 차량가격 미등록 시 입력 UI */
.quote-modal__price-input {
  padding: 30px 20px;
  text-align: center;
}
.quote-modal__price-input-head {
  margin-bottom: 20px;
}
.quote-modal__price-input-head h3 {
  font-size: 18px;
  color: #1a1a1a;
}
.quote-modal__price-input-row {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.quote-modal__price-input-row input {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.quote-modal__price-input-row input:focus {
  border-color: #C5A572;
  outline: none;
}
.quote-modal__price-input-row .quote-modal__btn {
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 13px;
}

/* 임시 차량가격 사용 중 표시 배너 */
.quote-modal__manual-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 14px;
}
.quote-modal__reset-btn {
  margin-left: auto;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  color: #92400e;
}
.quote-modal__reset-btn:hover {
  background: #fde68a;
}

/* ════════════════════════════════════════════════════════════════
   v13.47 — 미등록 차량 견적기 + 차량가격 비공개 체크박스
   ═══════════════════════════════════════════════════════════════ */

/* 미등록 견적기 섹션 */
.new-quote-section {
  padding: 4px 0;
}
.new-quote-section__hint {
  margin: 0 0 18px 0;
  padding: 10px 14px;
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  font-size: 12.5px;
  color: #1e40af;
  border-radius: 4px;
}

/* 차량 정보 입력 3열 */
.new-quote-row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.new-quote-row3 label,
.new-quote-row2 label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.new-quote-row3 label > span,
.new-quote-row2 label > span {
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
}
.new-quote-row3 label > input,
.new-quote-row3 label > select,
.new-quote-row2 label > input,
.new-quote-row2 label > select {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.new-quote-row3 label > input:focus,
.new-quote-row3 label > select:focus,
.new-quote-row2 label > input:focus,
.new-quote-row2 label > select:focus {
  border-color: #C5A572;
  outline: none;
}

.new-quote-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

/* 입력 화면으로 돌아가기 버튼 */
.new-quote-back-btn {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: #fafaf7;
  color: #1a1a1a;
  border: 1px solid #d4d2c8;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.new-quote-back-btn:hover {
  background: #f3f4f6;
}

/* 차량가격 비공개 체크박스 (견적기 모달 + 미등록 견적기 공통) */
.quote-hide-price-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px dashed #fcd34d;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.quote-hide-price-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.quote-hide-price-toggle span {
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
}

/* 반응형 */
@media (max-width: 720px) {
  .new-quote-row3 { grid-template-columns: 1fr; }
  .new-quote-row2 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   v13.48 — 차량 관리 페이지 50대 직원 친화 디자인 개편
   ─────────────────────────────────────────────────────────────
   방안 1: KPI 박스 4개 → 한 줄 인라인 통계 띠
   방안 2: 탭 + 검색 + 추가필터 한 줄 통합
   방안 3: 액션 버튼 가로 배치 + 아이콘 + 큰 클릭 영역
   방안 4: 리스 유형 뱃지 단축 + 색상 강조
   방안 5: 상단 큰 골드 버튼 + 테이블 폰트 ↑
   ═══════════════════════════════════════════════════════════════ */

/* ─── 방안 1: 인라인 통계 띠 (KPI 박스 압축) ─── */
.admin-stats-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(to right, #fafaf7 0%, #fff 60%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.admin-stats-strip__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-stats-strip__group--alert {
  padding: 4px 10px;
  background: #fee2e2;
  border-radius: 6px;
  animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { background: #fee2e2; }
  50%      { background: #fecaca; }
}
.admin-stats-strip__icon {
  font-size: 18px;
}
.admin-stats-strip__main {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}
.admin-stats-strip__main--sm {
  font-size: 15px;
}
.admin-stats-strip__sub {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 500;
}
.admin-stats-strip__divider {
  width: 1px;
  height: 24px;
  background: #d4d2c8;
}
.admin-stats-strip__lease-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.admin-stats-strip__lease-pill--gold  { background: #fef3c7; color: #92400e; }
.admin-stats-strip__lease-pill--blue  { background: #dbeafe; color: #1e40af; }
.admin-stats-strip__lease-pill--green { background: #d1fae5; color: #047857; }

/* 기존 admin-kpi-grid는 한 줄이라 grid 해제 */
.admin-kpi-grid {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* ─── 방안 2: 탭 + 검색 + 필터 한 줄 통합 ─── */
.admin-quick-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.admin-category-tabs--inline {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.admin-category-tab--compact {
  padding: 11px 20px;            /* v13.49: 8px 14px → 11px 20px 크기 ↑ */
  background: #fafaf7;
  border: 1.5px solid transparent;
  border-radius: 8px;            /* v13.49: 6 → 8 */
  font-size: 15px;               /* v13.49: 13.5px → 15px */
  font-weight: 700;              /* v13.49: 600 → 700 */
  font-family: inherit;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.2px;
}
.admin-category-tab--compact:hover {
  background: #f3f4f6;
  border-color: #d4d2c8;
}
.admin-category-tab--compact.is-active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.admin-category-tab--compact .admin-category-tab__count {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.admin-category-tab--compact.is-active .admin-category-tab__count {
  background: #C5A572;
  color: #1a1a1a;
}

/* 인라인 검색창 */
.admin-search-inline {
  flex: 0 1 320px;
  margin-left: auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fafaf7;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.15s;
}
.admin-search-inline:focus-within {
  border-color: #C5A572;
}
.admin-search-inline__icon {
  font-size: 14px;
  color: #6b7280;
}
.admin-search-inline__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  padding: 4px 0;
}
.admin-quick-bar__filter-btn {
  flex-shrink: 0;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600;
}

/* ─── 방안 3: 액션 버튼 가로 배치 + 아이콘 ─── */
.admin-actions--row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-action-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px;
  min-width: 48px;
  background: #fafaf7;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  color: #4b5563;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s;
}
.admin-action-btn:hover {
  background: #fff;
  border-color: #C5A572;
  color: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.admin-action-btn__icon {
  font-size: 16px;
  line-height: 1;
}
.admin-action-btn__label {
  font-size: 10.5px;
  font-weight: 600;
}
.admin-action-btn--quote {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
  font-weight: 700;
}
.admin-action-btn--quote:hover {
  background: #fde68a;
  border-color: #C5A572;
  color: #1a1a1a;
}
.admin-action-btn--danger {
  color: #b91c1c;
}
.admin-action-btn--danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* ─── 방안 4: 리스 유형 뱃지 (가로 두 줄 자연스럽게 + 색상 강조) ─── */
.lease-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.lease-pill--acq { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.lease-pill--ret { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.lease-pill--sub { background: #d1fae5; color: #047857; border: 1px solid #6ee7b7; }

/* ─── 방안 5: 상단 큰 액션 버튼 (50대 친화) ─── */
.admin-main__head-action--v48 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn--big-action {
  padding: 11px 22px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}
.btn--secondary {
  background: #1a1a1a;
  color: #C5A572;
  border: 1.5px solid #1a1a1a;
}
.btn--secondary:hover {
  background: #C5A572;
  color: #1a1a1a;
}

/* ─── 차량가격 미입력 경고 ─── */
.fee-cell__warning {
  margin-top: 4px;
  padding: 3px 8px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #b91c1c;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ─── 테이블 폰트 / 줄높이 ↑ (50대 가독성) ─── */
.admin-table-v27 tbody td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.admin-car-cell__name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
}
.admin-car-cell__maker {
  font-size: 12px;
  color: #6b7280;
}
.fee-cell__value {
  font-size: 13px !important;
  font-weight: 600;
}

/* 반응형 — 모바일 대응 */
@media (max-width: 980px) {
  .admin-quick-bar { flex-direction: column; align-items: stretch; }
  .admin-search-inline { width: 100%; min-width: 0; }
  .admin-category-tabs--inline { justify-content: center; }
  .admin-main__head-action--v48 { flex-wrap: wrap; }
  .admin-stats-strip { flex-direction: column; align-items: flex-start; }
  .admin-stats-strip__divider { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   v13.49 — 견적서 정리 + 미등록 견적기 강화
   ─────────────────────────────────────────────────────────────
   1. 미등록 견적기 결과 화면 3개 액션 (48/60/재고등록)
   2. 재고 등록 버튼 (녹색)
   ═══════════════════════════════════════════════════════════════ */

.quote-modal__actions--three {
  flex-wrap: wrap;
  gap: 10px;
}
.quote-modal__btn--stock {
  background: #16a34a;
  color: #fff;
  border: 2px solid #16a34a;
}
.quote-modal__btn--stock:hover {
  background: #15803d;
  border-color: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(22,163,74,0.3);
}

@media (max-width: 720px) {
  .quote-modal__actions--three .quote-modal__btn {
    width: 100%;
    margin: 0;
  }
}

/* ============================================================
   v13.53 (2026-05-28) — 엔카 방식 사진 UX
   ① 히어로 사진 캐러셀(모바일 좌우 스와이프)
   ② 사진 클릭 → 세로 나열 갤러리(엔카처럼 위→아래)
   ③ 모바일 좌우 여백 최소화
   ============================================================ */

/* ── ① 히어로 사진 캐러셀 (기본/데스크탑: 첫 장만 노출) ── */
.hero-carousel {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  z-index: 1;
}
.hero-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.hero-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-carousel__counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  z-index: 3;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ── ② 세로 나열 갤러리 (엔카 방식) ── */
.vgallery {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}
.vgallery[hidden] { display: none; }
.vgallery__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #000;
  color: #fff;
}
.vgallery__title { font-size: 14px; font-weight: 600; }
.vgallery__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.vgallery__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 40px;
}
.vgallery__item {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.vgallery__item:last-child {
  margin-bottom: 0;
}
.vgallery__item img {
  width: 100%;
  display: block;
}
.vgallery__num {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
/* 데스크탑: 세로 갤러리 사진 가운데 정렬 + 최대폭 */
@media (min-width: 721px) {
  .vgallery__item {
    max-width: 900px;
    margin: 0 auto 10px;
  }
  /* 데스크탑은 히어로가 1장만 보이므로 캐러셀 카운터 숨김 (혼란 방지) */
  .hero-carousel__counter { display: none; }
}

/* ── ③ 모바일: 히어로 캐러셀 스와이프 + 여백 최소화 ── */
@media (max-width: 720px) {
  /* 히어로 사진을 좌우로 넘기게 (스와이프) */
  .hero-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-carousel::-webkit-scrollbar { display: none; }
  .hero-carousel__slide {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* 히어로 캐러셀이 맨 위 사진 역할 → 아래 "사진" 그리드 섹션은 중복이라 숨김 */
  .gallery-grid-section { display: none !important; }

  /* 좌우 여백 최소화: 콘텐츠 박스가 화면에 거의 꽉 차게 */
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .site-header__inner,
  .hero__inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .detail-v13 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ============================================================
   v13.56 — 구독 계약 정보 (큰 토글 + 구독자 입력)
   ============================================================ */
.toggle--big .toggle__slider {
  width: 56px;
  height: 30px;
}
.toggle--big .toggle__slider::after {
  width: 24px;
  height: 24px;
  top: 3px;
  left: 3px;
}
.toggle--big .toggle__input:checked + .toggle__slider::after {
  transform: translateX(26px);
}

.subscribe-switch {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.subscribe-switch__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.subscribe-switch__title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.subscribe-switch__desc {
  font-size: 12px;
  color: #6b7280;
}
/* 구독중(토글 ON) 상태 강조 */
.subscribe-switch:has(.toggle__input:checked) {
  background: #ecfdf5;
  border-color: #6ee7b7;
}

/* ============================================================
   v13.57 — 차량관리: 미구독/구독중 큰 탭 + 구독자 표시
   ============================================================ */
.admin-sub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-sub-tab:hover {
  border-color: #d1d5db;
}
.admin-sub-tab__count {
  font-size: 13px;
  font-weight: 700;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 999px;
  padding: 2px 10px;
}
.admin-sub-tab.is-active {
  color: #fff;
  border-color: #1a1a1a;
  background: #1a1a1a;
}
.admin-sub-tab.is-active .admin-sub-tab__count {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
/* 구독중 탭은 활성 시 초록 */
.admin-sub-tab--subscribed.is-active {
  background: #059669;
  border-color: #059669;
}
/* 구독자 이름 (목록 구독 칸) */
.sub-pill__name {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

/* ============================================================
   v13.58 — 구독중 모드: 하위 탭도 녹색 / 달력 입력칸
   ============================================================ */
/* 구독중 탭 선택 시 아래 리스유형 탭의 활성 항목도 녹색 */
.admin-quick-bar--sub .admin-category-tab.is-active {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
.admin-quick-bar--sub .admin-category-tab.is-active .admin-category-tab__count {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
/* flatpickr 입력칸: 달력 아이콘 커서 */
.field__input--date,
#first-reg-input {
  cursor: pointer;
  background: #fff;
}
/* 차량 셀 구독중 표시 */
.admin-car-cell__sub {
  margin-top: 4px;
  font-size: 12px;
  color: #059669;
}
.admin-car-cell__sub strong {
  color: #1a1a1a;
  margin-left: 2px;
}

/* ============================================================
   v13.59 — 상담 필터 바 + 상담 삭제 버튼
   ============================================================ */
.consult-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.consult-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.consult-filter-group__label {
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
}
.admin-chip__count {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
}
/* 상담 삭제 영역 */
.consult-detail__section--danger {
  border-top: 1px dashed #fca5a5;
  padding-top: 16px;
  margin-top: 4px;
}
.btn--danger,
.consult-delete-btn {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn--danger:hover,
.consult-delete-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
@media (max-width: 640px) {
  .consult-filter-bar { gap: 12px; }
  .consult-filter-group { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   v13.59 — 상담 상세: 차량 정보 (상담사 친화 레이아웃)
   ============================================================ */
.consult-car {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
}
.consult-car__name {
  font-size: 19px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.3;
}
.consult-car__meta {
  font-size: 13px;
  color: #6b7280;
  margin-top: 5px;
}
.consult-car__lease-row {
  margin: 14px 0 12px;
}
.consult-car__lease {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: #1a1a1a;
  padding: 7px 18px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
.consult-car__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.consult-car__cell {
  background: #f9fafb;
  border-radius: 8px;
  padding: 10px 14px;
}
.consult-car__cell span {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 3px;
}
.consult-car__cell strong {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
.consult-car__insurance {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.consult-car__insurance--yes {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.consult-car__insurance--no {
  background: #f3f4f6;
  color: #9ca3af;
}
@media (max-width: 480px) {
  .consult-car__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v13.59 — 차량가격 입력 정렬 (라벨 위 · 입력칸+버튼 한 줄)
   ============================================================ */
.admin-vehicle-price-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0ece3;
}
.admin-vehicle-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-vehicle-price-row .auto-calc-btn {
  white-space: nowrap;
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 18px;
  display: flex;
  align-items: center;
}
/* 약정기간별 자동 산출 박스를 차량가격과 같은 톤으로 정렬 */
.contract-pair {
  margin-top: 16px;
  padding: 16px;
  background: #fffdf6;
  border: 1px solid #f0e6c8;
  border-radius: 12px;
}
.contract-pair__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}
.contract-pair__col--label {
  min-width: 74px;
  display: flex;
  align-items: center;
}

/* v13.59 — 메인 리스유형 탭 대수 표시 */
.lease-tab__count {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.82em;
  font-weight: 700;
  opacity: 0.65;
}
.lease-tab--active .lease-tab__count {
  opacity: 0.9;
}

/* v13.60 — 검색바 줄에 항상 보이는 정렬 드롭다운 */
.admin-sort-inline {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.admin-sort-inline label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}
.admin-sort-inline select {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  cursor: pointer;
}
@media (max-width: 720px) {
  .admin-sort-inline label { display: none; }
}

/* v13.60 — 차량관리 조회수 컬럼 (한눈에 보기) */
.admin-col-views { text-align: center; width: 64px; vertical-align: middle; }
.views-cell__num {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a1a;
}

/* ============================================================
   v13.60 — 조회 통계 화면 (기간 탭 + 인기 차량 순위)
   ============================================================ */
.views-period-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.views-period-tab {
  padding: 9px 20px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}
.views-period-tab:hover { border-color: #d1d5db; }
.views-period-tab.is-active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.views-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.views-summary__card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.views-summary__num {
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
}
.views-summary__label {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}
.views-stats__title {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.views-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.views-rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 16px;
}
.views-rank-row--zero { opacity: 0.5; }
.views-rank-row__rank {
  font-size: 18px;
  font-weight: 800;
  color: #6b7280;
  min-width: 32px;
  text-align: center;
}
.views-rank-row__photo {
  width: 52px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.views-rank-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.views-rank-row__info { flex: 1; min-width: 0; }
.views-rank-row__name {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.views-rank-row__meta {
  font-size: 12px;
  color: #9ca3af;
  margin: 2px 0 6px;
}
.views-rank-row__bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}
.views-rank-row__bar span {
  display: block;
  height: 100%;
  background: #C5A572;
  border-radius: 3px;
}
.views-rank-row__nums { text-align: right; flex-shrink: 0; }
.views-rank-row__count {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
}
.views-rank-row__count span { font-size: 12px; font-weight: 600; color: #9ca3af; margin-left: 2px; }
.views-rank-row__uniq { font-size: 11px; color: #9ca3af; margin-top: 2px; }
@media (max-width: 640px) {
  .views-summary { grid-template-columns: 1fr; }
}


/* ============================================================
   ★ 디자인 개선 패치 v14 (2026-05-29)
   ------------------------------------------------------------
   목적: 30·40대(및 50대)가 한눈에 보기 쉽도록 개선
   - 이 묶음은 파일 맨 끝에 있어 기존 스타일을 안전하게 덮어씁니다.
   - 되돌리려면 이 블록 전체(★표시 사이)만 지우면 됩니다.
   수정 항목:
     [1] 가격 단위 '만원' 색 — 안 보이던 금색 → 진한 검정
     [2] 상담 버튼 색 — 빨강 → 차분한 남색(신뢰감)
     [3] 계약조건 박스 — 배경 빼서 가격보다 덜 튀게
     [4] 글씨 키우기 — 작던 정보 글씨를 읽기 편한 크기로
   ============================================================ */

/* [1] 가격 '만원' 단위를 또렷한 검정으로 (금색은 흰배경에서 잘 안 보임) */
.car-card__price-unit-v23 {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

/* 가격 숫자는 조금 더 크게 — 카드의 주인공으로 */
.car-card__price-value-v23 strong {
  font-size: 30px !important;
}

/* [2] 상담 문의 버튼: 빨강 → 차분한 남색 (구독·렌트 서비스 신뢰감) */
.car-card__btn--consult,
.car-card--luxury .car-card__btn--consult {
  background: #1a3a5c !important;   /* 짙은 남색 */
  border-color: #1a3a5c !important;
  color: #ffffff !important;
}
.car-card__btn--consult:hover,
.car-card--luxury .car-card__btn--consult:hover {
  background: #112d4e !important;   /* 호버 시 더 짙게 */
  border-color: #112d4e !important;
}

/* [3] 계약조건 박스: 배경·금색라인 제거해서 가격보다 덜 튀게 */
.car-card__contract {
  background: transparent !important;
  border-left: none !important;
  border: 1px solid #f0f2f5 !important;
  padding: 8px 12px !important;
}
.car-card__contract-label {
  font-size: 11px !important;   /* 10 → 11 */
}
.car-card__contract-value {
  font-size: 14px !important;   /* 13 → 14 */
}

/* [4] 작던 정보 글씨 키우기 (읽기 편하게) */
/* 연식·주행거리·연료 */
.car-card__specs {
  font-size: 13px !important;   /* 11~12 → 13 */
}
/* 주요 옵션 */
.car-card__options {
  font-size: 12px !important;   /* 11 → 12 */
}
/* 차량 이름 */
.car-card__name {
  font-size: 17px !important;   /* 16 → 17 */
}
/* 가격 밑 조건 설명 (60개월·보증금 20% 기준) */
.car-card__price-cond-v23 {
  font-size: 11px !important;   /* 10 → 11 */
}
/* '월 구독료' 라벨 */
.car-card__price-label-v23 {
  font-size: 13px !important;   /* 12 → 13 */
}

/* 모바일에서도 가격 숫자 충분히 크게 */
@media (max-width: 480px) {
  .car-card__price-value-v23 strong {
    font-size: 25px !important;
  }
}
/* ★ 디자인 개선 패치 v14 끝 ★ */


/* ============================================================
   ★ 상세페이지 디자인 개선 패치 v15 (2026-05-29)
   ------------------------------------------------------------
   목적: 상세페이지를 목록페이지와 색 통일 + 가격 또렷하게 + 글씨 키우기
   - 이 묶음도 파일 맨 끝에 있어 안전하게 덮어씁니다.
   - 되돌리려면 이 블록 전체(★표시 사이)만 지우면 됩니다.
   수정 항목:
     [1] 상단 검은 가격박스의 가격 — 금색 → 흰색(또렷하게)
     [2] 상담 신청 버튼(빨강) → 목록과 같은 남색으로 통일
     [3] 견적기 안 '상담 신청' 버튼(금색) → 같은 남색으로 통일
     [4] 견적기 결과 가격 — 금색 → 흰색(또렷·강조)
     [5] 차량 스펙·가격조건 등 작은 글씨 키우기
   ============================================================ */

/* [1] 상단 검은 가격박스: 가격 숫자를 또렷한 흰색으로 (금색은 묻힘) */
.hero-price__num {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* [2] 상담 신청 버튼: 빨강 → 남색 (목록 페이지와 통일) */
.hero-cta {
  background: #1a3a5c !important;
  box-shadow: 0 4px 12px rgba(26, 58, 92, 0.25) !important;
}
.hero-cta:hover {
  background: #112d4e !important;
  box-shadow: 0 6px 20px rgba(26, 58, 92, 0.35) !important;
}

/* 모바일 하단 고정 상담 버튼도 같은 남색으로 */
.mobile-sticky-cta__btn {
  background: #1a3a5c !important;
}

/* [3] 견적기 안 '이 조건으로 상담 신청' 버튼: 금색 → 남색 통일 */
.quote-calc-result__cta {
  background: #1a3a5c !important;
  color: #ffffff !important;
}
.quote-calc-result__cta:hover {
  background: #112d4e !important;
  color: #ffffff !important;
}

/* [4] 견적기 결과 가격: 금색 → 흰색 (검은 배경 위에서 또렷) */
.quote-calc-result__price strong {
  color: #ffffff !important;
}

/* [5] 작던 글씨 키우기 (읽기 편하게) */
/* 상단 차량 스펙 (연식·주행거리·연료) */
.hero-specs {
  font-size: 14px !important;   /* 12 → 14 */
}
/* 상단 가격 조건 (60개월·보증금 20% 기준) */
.hero-price__cond {
  font-size: 13px !important;   /* 11 → 13 */
}
/* 견적기 결과 조건 설명 */
.quote-calc-result__hint {
  font-size: 13px !important;   /* 12 → 13 */
}
/* 견적기 결과 라벨 (예상 월 구독료) */
.quote-calc-result__label {
  font-size: 13px !important;   /* 12 → 13 */
}
/* ★ 상세페이지 디자인 개선 패치 v15 끝 ★ */


/* ============================================================
   ★ 상담 신청 창 개선 패치 v16 (2026-05-29)
   ------------------------------------------------------------
   목적: 상담 신청 팝업창도 색 통일 (가격은 detail.js에서 별도 수정)
   - 상담창(#consult-modal) 안의 '신청하기' 버튼만 콕 집어 남색으로.
   - 다른 곳의 빨강 버튼(cta-button)은 그대로 둠.
   - 되돌리려면 이 블록 전체(★표시 사이)만 지우면 됩니다.
   ============================================================ */

/* 상담창 안의 빨강 '신청하기' 버튼 → 남색 (목록·상세와 통일) */
#consult-modal .cta-button:not(.cta-button--outline) {
  background: #1a3a5c !important;
  border-color: #1a3a5c !important;
  color: #ffffff !important;
}
#consult-modal .cta-button:not(.cta-button--outline):hover {
  background: #112d4e !important;
  border-color: #112d4e !important;
}
/* ★ 상담 신청 창 개선 패치 v16 끝 ★ */

/* ============================================================
   v13.61 — 메인 카드 차량번호 표시
   차량명 바로 아래에 번호판 스타일 뱃지로 표기
   ============================================================ */
.car-card__plate {
  display: inline-block;
  margin: 2px 0 2px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink, #1a2233);
  background: #f4f6f9;
  border: 1px solid #d7dde6;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   v13.62 — 인수형 카드 4가지 조건 가격 (B안: 대표가 + 펼침)
   60/48개월 × 보증금 20%/10% — 견적 계산기 자동 산출
   ============================================================ */
.acq-price {
  margin-top: 4px;
}

/* 대표가 (최저가) 박스 */
.acq-price__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-bg-elevated, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  padding: 11px 13px;
}
.acq-price__hero-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.acq-price__hero-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-muted);
}
.acq-price__best-flag {
  color: #a8842c;
  font-weight: 700;
}
.acq-price__hero-cond {
  font-size: 10px;
  color: var(--color-ink-soft);
  margin-top: 1px;
}
.acq-price__hero-value {
  font-size: 14px;
  font-weight: 600;
  color: #1b3a5b;
  white-space: nowrap;
  line-height: 1;
}
.acq-price__hero-value strong {
  font-size: 28px;
  font-weight: 800;
  margin: 0 1px;
  letter-spacing: -0.02em;
}
.acq-price__hero-unit {
  font-size: 13px;
  font-weight: 700;
}

/* 펼침 (다른 조건 3가지) */
.acq-combo {
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}
.acq-combo__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #1b3a5b;
  padding: 10px 13px;
  background: var(--color-bg-subtle);
  user-select: none;
}
.acq-combo__summary::-webkit-details-marker { display: none; }
.acq-combo__chev {
  transition: transform 0.2s ease;
  font-size: 11px;
}
.acq-combo[open] .acq-combo__chev { transform: rotate(180deg); }
.acq-combo__list { padding: 2px 0; }
.acq-combo__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--color-border-soft);
}
.acq-combo__cond { color: var(--color-ink-muted); }
.acq-combo__cond b { color: var(--color-ink); font-weight: 700; }
.acq-combo__price { font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.acq-combo__won { font-size: 10px; font-weight: 600; color: var(--color-ink-soft); margin-left: 1px; }
.acq-combo__note {
  font-size: 10.5px;
  color: var(--color-ink-soft);
  padding: 8px 13px 9px;
  line-height: 1.4;
}

/* ============================================================
   v13.62 — 인수형 카드 가격: 약정×보증금 2×2 미니 매트릭스 (안 A)
   60·48개월 × 보증금 20%·10% 4가지 월 구독료 동시 노출
   라벨: "월 구독료 (보험 별도)"
   ============================================================ */
.acq-matrix {
  margin-top: 12px;
}
.acq-matrix__caption {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 7px;
}
.acq-matrix__caption-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
}
/* (보험 별도) 라벨 — 기존 price-insurance 클래스 재사용 */
.acq-matrix__caption .car-card__price-insurance {
  font-size: 11px;
  color: var(--color-ink-muted);
}

.acq-matrix__grid {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* 헤더 줄 */
.acq-matrix__head {
  display: grid;
  grid-template-columns: 58px 1fr 1fr;
  background: var(--color-bg-subtle);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-ink-muted);
}
.acq-matrix__hcorner {
  padding: 7px 8px;
  color: var(--color-ink-soft);
}
.acq-matrix__hcol {
  padding: 7px 6px;
  text-align: center;
}

/* 데이터 줄 */
.acq-matrix__row {
  display: grid;
  grid-template-columns: 58px 1fr 1fr;
  border-top: 1px solid var(--color-border-soft);
  align-items: stretch;
}
.acq-matrix__rh {
  padding: 10px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #44464b;
  background: #fafbfc;
  display: flex;
  align-items: center;
}
.acq-matrix__cell {
  padding: 9px 6px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acq-matrix__cell--empty {
  color: var(--color-ink-soft);
  font-size: 12px;
}
.acq-matrix__won {
  font-size: 16px;
  font-weight: 800;
  color: #112d4e;
  letter-spacing: -0.02em;
}
.acq-matrix__won small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-ink-muted);
  margin-left: 1px;
}

/* 최저가 셀 강조 (골드) */
.acq-matrix__cell--best {
  background: #faf6ee;
  position: relative;
}
.acq-matrix__cell--best .acq-matrix__won {
  color: #b08433;
}
.acq-matrix__cell--best::after {
  content: "최저";
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 8.5px;
  font-weight: 800;
  color: #b08433;
  background: #fff;
  border: 1px solid #d9bd86;
  border-radius: 6px;
  padding: 0 4px;
  line-height: 1.4;
}

/* ============================================================
   v13.63 — 인수형 카드 정보 순서 정리
   1) 계약 조건 박스 제거 (가격 매트릭스와 중복) → JS에서 처리
   2) 주요 옵션을 가격 매트릭스 아래로 이동 → JS에서 처리
   여기서는 매트릭스 아래 옵션의 여백/구분만 보정
   ============================================================ */
.car-card--acquisition .car-card__options {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--color-border-soft);
}

/* ============================================================
   v13.64 — 견적서: 보험 시작일 주의사항 강조 박스
   (만기인수가 조정·보증차액 이자 행 삭제, 질권 설정 행 추가 동반)
   ============================================================ */
.qs-notice {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: #fff8ec;
  border: 1px solid #e7c873;
  border-left: 4px solid #c9961f;
  border-radius: 8px;
  page-break-inside: avoid;
}
.qs-notice__title {
  font-size: 14px;
  font-weight: 800;
  color: #8a6300;
  margin-bottom: 8px;
}
.qs-notice__list {
  margin: 0;
  padding-left: 18px;
}
.qs-notice__list li {
  font-size: 13px;
  line-height: 1.7;
  color: #3a3a3a;
}
.qs-notice__list li strong {
  color: #8a6300;
}

/* ============================================================
   v13.66 — 견적 계산기: 선수금은 보증금 20%일 때만 활성화
   10/15% 선택 시 선수금 슬라이더 잠금(흐림 + 안내문구)
   ============================================================ */
.quote-calc-field.is-locked .quote-calc-slider,
.quote-calc-field.is-locked .quote-calc-marks {
  opacity: 0.45;
}
.quote-calc-field.is-locked .quote-calc-slider {
  cursor: not-allowed;
}
.quote-calc-slider:disabled {
  cursor: not-allowed;
}
.quote-calc-slider:disabled::-webkit-slider-thumb {
  background: #b8bcc4;
  cursor: not-allowed;
}
.quote-calc-slider:disabled::-moz-range-thumb {
  background: #b8bcc4;
  cursor: not-allowed;
}
.quote-calc-field__lock {
  display: none;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--color-ink-muted);
}
.quote-calc-field.is-locked .quote-calc-field__lock {
  opacity: 1;
}

/* ============================================================
   v13.67 — 관리자: 다음검사일 경과일 빠른 필터 바
   리스 유형 탭 바로 아래에 배치, 칩으로 빠르게 선택
   ============================================================ */
.admin-inspection-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--color-bg-subtle, #f0f2f5);
  border-radius: 10px;
}
.admin-inspection-bar__label {
  font-size: 13px;
  font-weight: 700;
  color: #44464b;
  margin-right: 4px;
}
.admin-inspection-chip {
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border: 1px solid #d7dde6;
  background: #fff;
  color: #555;
  border-radius: 20px;
  cursor: pointer;
  transition: all .12s;
}
.admin-inspection-chip:hover {
  border-color: #b8bfc9;
}
.admin-inspection-chip.is-active {
  background: #112d4e;
  color: #fff;
  border-color: #112d4e;
}
/* 위험도별 색상 강조 (활성 시) */
.admin-inspection-chip--expired.is-active {
  background: #c92a2a;
  border-color: #c92a2a;
}
.admin-inspection-chip--d30.is-active {
  background: #e8590c;
  border-color: #e8590c;
}
.admin-inspection-chip--d60.is-active {
  background: #d9960a;
  border-color: #d9960a;
}

/* ============================================================
   v13.70 — 정확 금액(원 단위) 보조 표시 (안 A)
   계산기 결과 + 가격 매트릭스(데스크톱/모바일)에 만원 아래 원단위 병기
   ============================================================ */
/* 상세 계산기 결과 — 만원 아래 정확값 */
.quote-calc-result__exact {
  margin-top: 5px;
  font-size: 15px;
  color: #aeb6c2;
  letter-spacing: -0.01em;
}
.quote-calc-result__exact strong {
  color: #c2c9d3;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 데스크톱 매트릭스 — 만원 아래 정확값 (블록으로 줄바꿈) */
.price-matrix__exact {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.price-matrix__tr--lowest .price-matrix__exact {
  color: #b08433;
}

/* 모바일 매트릭스 — 만원 옆/아래 정확값 */
.price-matrix-mobile__exact {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ============================================================
   v13.71 (안 A) — 날짜 기준 정렬 칩 + 검사일 경과 필터 통합 바
   ============================================================ */
.admin-datebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--color-bg-subtle, #f0f2f5);
  border-radius: 10px;
}
.admin-datebar__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-muted, #6b7280);
  white-space: nowrap;
}
.admin-datebar__sep {
  width: 1px;
  height: 22px;
  background: var(--color-border-strong, #d1d5db);
  margin: 0 4px;
}

/* 날짜 기준 정렬 칩 — 골드 톤 (검사/성능/확정 묶음 인지) */
.admin-date-chip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid #f0d9a8;
  background: #fdf8ee;
  color: #9a7320;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.admin-date-chip:hover {
  border-color: #e3bf73;
  background: #fbf2dd;
}
.admin-date-chip.is-active {
  background: #c9961f;
  color: #ffffff;
  border-color: #c9961f;
}

/* 모바일: 가로 스크롤 허용 */
@media (max-width: 720px) {
  .admin-datebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-datebar__sep { flex-shrink: 0; }
  .admin-date-chip, .admin-datebar__label { flex-shrink: 0; }
}

/* ============================================================
   v13.71 — 상단 hero 가격 박스 원단위 + 보증금 기준 표기
   계산기 정확금액 라벨 삭제(월 ...원)는 기존 quote-calc-result__exact 재사용
   ============================================================ */
.hero-price__exact {
  margin-top: 5px;
  font-size: 13px;
  color: #cdd3dc;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hero-summary__note {
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 500;
}

/* v13.77 — 상세 hero 카드 차량번호 번호판 칩 */
.hero-plate {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 3px 11px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1f2937;
  background: #f3f5f8;
  border: 1px solid #d7dde6;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   v13.72 — 견적 계산기 결과 박스 좌우 분리 (안 1)
   가격·조건 = 왼쪽, 상담/견적서 버튼 = 오른쪽. 모바일은 세로.
   + 매트릭스/박스 원단위 일부 삭제, hero 박스 조건 줄 삭제 동반
   ============================================================ */
.quote-calc-result--split {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.quote-calc-result--split .quote-calc-result__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quote-calc-result--split .quote-calc-result__label {
  margin-bottom: 2px;
}
.quote-calc-result--split .quote-calc-result__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 6px;
}
/* 원단위 괄호 — 만원 옆 보조 */
.quote-calc-result__exact {
  font-size: 15px;
  color: #aeb6c2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.quote-calc-result__exact strong {
  font-size: 15px !important;
  color: #c2c9d3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
/* 오른쪽 버튼 묶음 */
.quote-calc-result--split .quote-calc-result__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 160px;
}
.quote-calc-result--split .quote-calc-result__cta,
.quote-calc-result--split .quote-calc-result__sheet {
  margin: 0;
  width: 100%;
}

/* 모바일: 세로로 쌓기 */
@media (max-width: 720px) {
  .quote-calc-result--split {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
  }
  .quote-calc-result--split .quote-calc-result__price {
    justify-content: center;
  }
  .quote-calc-result--split .quote-calc-result__actions {
    width: 100%;
  }
}

/* ============================================================
   v13.76 — 상담 상세 모달: 차량 상세/견적기 두 링크 나란히
   ============================================================ */
.consult-car__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft, #f0f2f5);
}
.consult-car__links .admin-link {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   v13.78 패치 — 가격 입력칸 숫자 폭 고정 (폰트 흔들림 수정)
   ────────────────────────────────────────────────────────────────
   증상: 오토핸즈 1차 판매가 등 숫자 입력 시 콤마가 들어가는 순간
        글자 크기가 변하는 것처럼 보임.
   원인: Pretendard 폰트는 숫자마다 폭이 달라(예: 1은 좁고 0은 넓음),
        자릿수가 바뀔 때 전체 너비가 출렁여 크기 변화로 착시됨.
   해결: 숫자 폭을 일정하게 맞추는 tabular-nums 적용.
   ════════════════════════════════════════════════════════════════ */
.field__input {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════
   v13.79 패치 — 판매가 변동 내역 (오토핸즈)
   고정 1차/2차 칸 대신 여러 줄로 가격 변동을 쌓는 UI.
   ════════════════════════════════════════════════════════════════ */
.ph-section { margin-top: 6px; }
.ph-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ph-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 700;
  color: #92400e;
  background: #fffbeb;
  border: 1.5px solid #f3d99e;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ph-add-btn:hover { background: #fef3c7; border-color: #e0b65f; }
.ph-add-btn:active { transform: scale(0.97); }

.ph-list { display: flex; flex-direction: column; gap: 8px; }

.ph-empty {
  padding: 14px;
  font-size: 12.5px; color: #9ca3af;
  text-align: center;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: var(--radius-md, 8px);
}

.ph-row {
  display: grid;
  grid-template-columns: 130px 1fr 34px;
  gap: 10px;
  align-items: end;
  padding: 10px 11px;
  background: var(--color-bg-elevated, #fff);
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
}
/* 기준 라디오가 있는 행: 맨 앞에 라디오 칸 추가 (날짜·판매가 안 좁아지게) */
.ph-row:has(.ph-row__basepick) { grid-template-columns: 34px 110px 1fr 34px; }
.ph-row__basepick {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding-bottom: 5px;
}
.ph-row__baseradio { width: 17px; height: 17px; cursor: pointer; accent-color: #C5A572; }
/* 선택된 기준 행 강조 */
.ph-row--base { border-color: #C5A572; background: #fffdf5; }
.ph-row--latest {
  border-color: #3b82f6;
  border-width: 2px;
  background: #f8fbff;
}
.ph-row__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ph-row__lbl { font-size: 10.5px; color: #9ca3af; }
.ph-row .field__input { padding: 7px 9px; font-size: 13px; }
.ph-row__tail {
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 7px;
}
.ph-row__badge {
  font-size: 10px; font-weight: 700;
  color: #1d4ed8; background: #dbeafe;
  padding: 3px 7px; border-radius: var(--radius-md, 8px);
  white-space: nowrap;
}
.ph-row__del {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: #9ca3af;
  background: transparent; border: none; cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.ph-row__del:hover { background: #fef2f2; color: #dc2626; }

/* 좁은 화면: 세로로 풀어줌 */
@media (max-width: 820px) {
  .ph-row {
    grid-template-columns: 1fr 1fr 34px;
    gap: 8px 10px;
  }
  .ph-row:has(.ph-row__basepick) { grid-template-columns: 44px 1fr 1fr 34px; }
  .ph-row__tail { justify-content: center; padding-bottom: 7px; }
}

/* ════════════════════════════════════════════════════════════════
   v13.79b 패치 — 하모니 확정가 칸 + 가격 체크 버튼 디자인 강화
   ════════════════════════════════════════════════════════════════ */
/* 확정가: 직접 수정 가능한 큰 숫자 입력칸 (노란 강조) */
#harmony-price-1 {
  background: #fffbeb;
  border: 1.5px solid #ef9f27;
  border-radius: var(--radius-md, 8px);
  font-size: 22px;
  font-weight: 700;
  color: #633806;
  letter-spacing: -0.01em;
  text-align: right;
  padding: 14px 14px;
  font-variant-numeric: tabular-nums;
}
#harmony-price-1::placeholder { color: #d6b06a; font-weight: 500; font-size: 15px; }
#harmony-price-1:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 151, 39, 0.18);
  background: #fff;
}

/* 가격 체크 → 차량가격 버튼: 파란 톤 + 아이콘 느낌 */
.pt-col--dest .price-check-btn {
  margin-left: 0;
  padding: 5px 11px;
  background: #e6f1fb;
  color: #0c447c;
  border: 0.5px solid #85b7eb;
  border-radius: var(--radius-md, 8px);
  font-size: 11.5px;
  font-weight: 700;
}
.pt-col--dest .price-check-btn:hover {
  background: #d4e6f9;
  color: #042c53;
}

/* 확정가 라벨 줄을 양끝 정렬(라벨 ↔ 버튼) */
.pt-col--dest .field__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════
   v13.79c 패치 — 약정기간별 자동 산출 표 디자인 정돈
   (왼쪽 견적기 요약 박스를 제거하면서 이 표가 메인이 되므로 강화)
   ════════════════════════════════════════════════════════════════ */
#contract-pair-acquisition {
  margin-top: 16px;
  padding: 18px;
  background: #fffdf6;
  border: 1px solid #f0e6c8;
  border-radius: 14px;
}
#contract-pair-acquisition .contract-pair__title {
  font-size: 14px;
  font-weight: 800;
  color: #633806;
  margin-bottom: 4px;
}
#contract-pair-acquisition .contract-pair__sub {
  font-size: 11.5px;
  color: #9ca3af;
  margin-bottom: 14px;
}
/* 48 / 60 각 행을 카드처럼 */
#contract-pair-acquisition .contract-pair__row {
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #f3ecd6;
  border-radius: 10px;
}
/* 약정 개월 라벨 배지 */
#contract-pair-acquisition .contract-pair__col--label strong {
  display: inline-block;
  padding: 5px 12px;
  background: #2b2620;
  color: #d8b97a;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}
/* 입력칸 숫자 오른쪽 정렬 + 폭 고정 */
#contract-pair-acquisition .field__input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* 만기인수가 행: 윗줄과 구분선으로 분리 + 강조 배경 */
#contract-pair-acquisition .contract-pair__row--summary {
  margin-top: 4px;
  margin-bottom: 0;
  background: #fef9c3;
  border: 1px solid #fcd34d;
}
#contract-pair-acquisition #admin-acquisition-price-display {
  background: #fffbeb;
  color: #633806;
  font-size: 16px;
  font-weight: 800;
}

/* ════════════════════════════════════════════════════════════════
   v13.79d 패치 — 확정가 칸 폰트 흔들림 방지
   증상: 금액 입력 시 글자가 작아졌다 다시 커짐.
   원인: 큰 폰트(22px)라 콤마 처리/펄스 애니메이션의 미세 변화가 두드러짐.
   해결: 확정가 칸은 펄스 애니메이션(scale) 제외 + 숫자 폭 완전 고정.
   ════════════════════════════════════════════════════════════════ */
#harmony-price-1.field__input--auto-filled {
  animation: none !important;   /* scale 펄스 제거 */
  transform: none !important;
}
#harmony-price-1 {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;  /* 크기 전환 없음 */
}

/* ════════════════════════════════════════════════════════════════
   v13.79e 패치 — 차량가격 칸 축소 + 약정표 가로 확장 + 부대비용 삭제
   ════════════════════════════════════════════════════════════════ */
/* 차량가격: 작은 표시줄로 축소 (값은 계산/저장에 필요해 유지) */
.admin-vehicle-price-wrap--compact {
  max-width: 100% !important;
  margin-top: 14px;
  padding-top: 14px;
}
.admin-vehicle-price-wrap--compact .vp-compact-hint {
  font-weight: 400;
  font-size: 11px;
  color: #9ca3af;
  margin-left: 8px;
}
.admin-vehicle-price-wrap--compact .admin-vehicle-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}
.admin-vehicle-price-wrap--compact .vp-compact-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.auto-calc-btn--sm {
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  white-space: nowrap;
}

/* 약정기간별 자동 산출: 전체 너비 사용 */
#contract-pair-acquisition {
  max-width: 100%;
  width: 100%;
}

/* v13.79e: 48개월 / 60개월 행을 좌우 카드로 나란히 (방향 ㄱ) */
@media (min-width: 720px) {
  #contract-pair-acquisition {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
  #contract-pair-acquisition .contract-pair__title,
  #contract-pair-acquisition .contract-pair__sub {
    grid-column: 1 / -1;
  }
  /* 각 약정 행: 세로 카드 형태 (라벨 위, 월구독료/보증금 아래로) */
  #contract-pair-acquisition .contract-pair__row--term {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 0;
  }
  #contract-pair-acquisition .contract-pair__row--term .contract-pair__col--label {
    min-width: 0;
  }
  /* 만기인수가는 아래 전체 너비로 */
  #contract-pair-acquisition .contract-pair__row--summary {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    margin-top: 2px;
  }
}

/* ============================================================
   v14.0: 크롤러 자동등록 — 승인 대기 탭 & 버튼
   ------------------------------------------------------------
   기존 admin-sub-tab 스타일 위에 덧붙임 (강조용)
   ============================================================ */

/* 승인 대기 탭 — 주황 계열로 "처리 필요" 강조 */
.admin-sub-tab--pending {
  position: relative !important;
}
.admin-sub-tab--pending.is-active {
  background: #f59e0b !important;
  color: #fff !important;
  border-color: #f59e0b !important;
}
.admin-sub-tab--pending .admin-sub-tab__count {
  background: #f59e0b !important;
  color: #fff !important;
}
.admin-sub-tab--pending.is-active .admin-sub-tab__count {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

/* 승인 버튼 — 초록 */
.admin-action-btn--approve {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}
.admin-action-btn--approve:hover {
  background: #15803d !important;
  border-color: #15803d !important;
}
.admin-action-btn--approve .admin-action-btn__icon,
.admin-action-btn--approve .admin-action-btn__label {
  color: #fff !important;
}

/* ============================================================
   v14.1: 승인 대기 영역 안내문구 박스
   ============================================================ */
.admin-pending-guide {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 10px 0 0 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #1e40af !important;
}
.admin-pending-guide__icon {
  flex: 0 0 auto !important;
}
.admin-pending-guide b {
  font-weight: 700 !important;
}

/* v14.1: 크롤러 수집일 표시 (차량 목록 셀) */
.admin-car-cell__collected {
  font-size: 11px !important;
  color: #6b7280 !important;
  margin-top: 2px !important;
}

/* ============================================================
   v14.1: 상단 공간 정리
   ============================================================ */
/* 왼쪽 메뉴 '차량 관리' 숫자 배지 키우기 */
.admin-sidebar__link-badge#sidebar-car-count {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 3px 11px !important;
  border-radius: 11px !important;
  min-width: 28px !important;
  text-align: center !important;
}
/* 탭 줄 오른쪽 상담 대기 정보 (작게) */
.admin-sub-tabs__consult {
  margin-left: auto !important;
  align-self: center !important;
  font-size: 12px !important;
  color: #9ca3af !important;
  white-space: nowrap !important;
}
.admin-sub-tabs__consult.is-waiting {
  color: #dc2626 !important;
  font-weight: 500 !important;
}
/* 상담 응대 필요 경고 띠 (대기 있을 때만) */
.admin-stats-strip--alert-only {
  margin-bottom: 10px !important;
}

/* ============================================================
   v14.2: 주요 옵션 칩 (엔카/티카풍 — 깔끔한 라인 아이콘 + 텍스트)
   ============================================================ */
.car-card__options-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
.car-card__option-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f4f4f5 !important;
  color: #3f3f46 !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
.car-card__option-tag .ti {
  font-size: 14px !important;
  color: #71717a !important;
}
.car-card__option-tag--more {
  background: transparent !important;
  color: #2563eb !important;
  font-weight: 500 !important;
}

/* v14.2: 상세 페이지 옵션 더보기 */
.options-rest {
  display: contents !important;
}
.options-rest.is-collapsed {
  display: none !important;
}
.options-more-btn {
  margin-top: 12px !important;
  background: #f4f4f5 !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  color: #3f3f46 !important;
  cursor: pointer !important;
  width: 100% !important;
}
.options-more-btn:hover {
  background: #e4e4e7 !important;
}

/* ============================================================
   v14.3: 옵션 — 트렌디 칩 + 카테고리 모달(팝업)
   ============================================================ */
/* 주요 옵션 칩 (상세 페이지) */
.opt-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.opt-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f4f4f5 !important;
  color: #27272a !important;
  border: 1px solid #ececee !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
.opt-chip .ti {
  font-size: 16px !important;
  color: #71717a !important;
}
.opt-chip--plain {
  border-radius: 8px !important;
  background: #f4f4f5 !important;
  border: none !important;
}
/* 전체 옵션 보기 버튼 */
.opt-all-btn {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-size: 14px !important;
  color: #27272a !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.opt-all-btn:hover {
  background: #f4f4f5 !important;
}
/* 모달(팝업) */
.opt-modal[hidden] { display: none !important; }
.opt-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.opt-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
}
.opt-modal__panel {
  position: relative !important;
  background: #fff !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 560px !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.opt-modal__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.opt-modal__title { font-size: 16px !important; font-weight: 600 !important; }
.opt-modal__close {
  background: none !important;
  border: none !important;
  font-size: 18px !important;
  color: #71717a !important;
  cursor: pointer !important;
  padding: 4px !important;
}
.opt-modal__scroll {
  padding: 18px 20px !important;
  overflow-y: auto !important;
}
.opt-modal__cat { margin-bottom: 26px !important; }
.opt-modal__cat:last-child { margin-bottom: 0 !important; }
.opt-modal__cat-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #18181b !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.opt-modal__cat-count {
  color: #a1a1aa !important;
  font-weight: 400 !important;
  margin-left: 2px !important;
}
.opt-modal__cat-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

/* v14.3.1: 모달 옵션 — 칩 대신 단어 격자 나열 (오토핸즈 방식) */
.opt-modal__cat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px 16px !important;
}
.opt-modal__word {
  font-size: 14px !important;
  color: #3f3f46 !important;
  line-height: 1.4 !important;
  padding: 2px 0 !important;
}
@media (max-width: 480px) {
  .opt-modal__cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* v14.4: 판매됨 탭 + 제조사 드롭다운 */
.admin-sub-tab--sold.is-active {
  background: #6b7280 !important;
  color: #fff !important;
  border-color: #6b7280 !important;
}
.admin-maker-inline select {
  min-width: 90px !important;
}

/* ============================================================
   v14.4: 관리자 옵션 — 카테고리별 체크박스 그리드
   ============================================================ */
.option-cat {
  margin-bottom: 18px !important;
}
.option-cat:last-child { margin-bottom: 0 !important; }
.option-cat__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #18181b !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #ececee !important;
}
.option-cat__count {
  color: #a1a1aa !important;
  font-weight: 400 !important;
  margin-left: 2px !important;
}
.option-cat__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 8px 14px !important;
}
.option-legacy-note {
  font-size: 12px !important;
  color: #a16207 !important;
  margin: 12px 0 8px !important;
}
.option-tag--legacy {
  background: #fef9c3 !important;
  border: 1px solid #fde047 !important;
}

/* ============================================================
   성능점검기록부 표·도면  (2026-06-10 성능기록부 재구성)
   ============================================================ */
.ins-wrap { display: flex !important; flex-direction: column !important; gap: 16px !important; margin-bottom: 20px !important; }

.ins-sec {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.ins-sec-tit {
  margin: 0 !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: #f7f8fa !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.ins-tbl {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}
.ins-tbl td { padding: 8px 14px !important; border-bottom: 1px solid #f0f1f3 !important; }
.ins-tbl tr:last-child td { border-bottom: 0 !important; }
.ins-l { color: #6b7280 !important; width: 42% !important; }
.ins-v { color: #111827 !important; }
.ins-diagrams {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 14px !important;
}
@media (max-width: 540px) { .ins-diagrams { grid-template-columns: 1fr !important; } }
.ins-diagram-tit { text-align: center !important; font-size: 12px !important; color: #6b7280 !important; margin-bottom: 6px !important; }
.ins-frame { position: relative !important; width: 100% !important; max-width: 386px !important; margin: 0 auto !important; }
.ins-frame img { width: 100% !important; height: auto !important; display: block !important; }
.ins-mark {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  width: 18px !important; height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: #fff !important;
  background: #e24b4a !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #fff !important;
}
.ins-legend { padding: 8px 14px !important; font-size: 12px !important; color: #6b7280 !important; border-top: 1px solid #f0f1f3 !important; }
.ins-legend.ins-ok { color: #0f6e56 !important; }
.ins-notes { margin: 0 !important; padding: 12px 14px !important; font-size: 12.5px !important; line-height: 1.6 !important; color: #6b7280 !important; }
.ins-foot { margin: 0 !important; padding: 4px 2px !important; font-size: 11.5px !important; color: #9ca3af !important; }
.ins-empty { padding: 20px !important; text-align: center !important; color: #9ca3af !important; font-size: 13px !important; }

/* ============================================================
   v14.5 — 수입차 보증금 20% 전용: 매트릭스 단일 열(20%만)
   국산차는 기존 2열(20%/10%) 그대로, 수입차만 1열로 표시.
   ============================================================ */
.acq-matrix--single .acq-matrix__head { grid-template-columns: 58px 1fr !important; }
.acq-matrix__row--single { grid-template-columns: 58px 1fr !important; }

/* v14.5 — 수입차 견적기 보증금 잠금 버튼 (10/15%) */
.quote-calc-toggle__btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
}

/* ════════════════════════════════════════════════════════════ */
/* 영업사원 관리 기능 (영업인 탭 + 상세페이지 영업비 + 상담폼)      */
/* 한 곳에 모음 — 롤백 시 이 블록만 삭제하면 됨                     */
/* ════════════════════════════════════════════════════════════ */

/* ── ① 관리자: 영업사원 카드 목록 ── */
.sales-list { display: flex; flex-direction: column; gap: 12px; }
.sales-card {
  border: 1px solid var(--admin-border-light, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s;
}
.sales-card--open { border-color: #C5A572; }
.sales-card--inactive { opacity: 0.6; }
.sales-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
}
.sales-card--open .sales-card__head { background: #faf8f4; }
.sales-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1a1a1a; color: #C5A572;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; flex-shrink: 0;
}
.sales-card__head-main { flex: 1; min-width: 0; }
.sales-card__name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sales-card__meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
.sales-card__head-right { text-align: right; flex-shrink: 0; }
.sales-card__paylabel { font-size: 11px; color: #9ca3af; }
.sales-card__pay { font-size: 16px; font-weight: 600; color: #C5A572; }
.sales-card__chev { color: #9ca3af; font-size: 11px; margin-left: 4px; }
.sales-chan {
  display: inline-block; font-size: 11px; background: #f1efe8; color: #5f5e5a;
  padding: 1px 8px; border-radius: 10px;
}
.sales-bonus-badge {
  font-size: 11px; background: #fef3c7; color: #92400e;
  padding: 2px 8px; border-radius: 10px; font-weight: 500;
}
.sales-inactive-badge {
  font-size: 11px; background: #f3f4f6; color: #6b7280;
  padding: 2px 8px; border-radius: 10px;
}
.sales-card__body { padding: 4px 16px 16px; border-top: 1px solid #f0eee8; }
.sales-card__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px; font-size: 13px; padding: 14px 0;
}
.sales-fact { display: flex; justify-content: space-between; gap: 10px; }
.sales-fact span { color: #6b7280; }
.sales-fact strong { font-weight: 500; text-align: right; }
.sales-code { font-family: monospace; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; }
.sales-code-copy, .sales-code-regen {
  border: none; background: #f1efe8; color: #5f5e5a; cursor: pointer;
  border-radius: 5px; width: 22px; height: 22px; font-size: 12px; line-height: 1;
}
.sales-code-copy:hover, .sales-code-regen:hover { background: #C5A572; color: #fff; }
.sales-memo {
  font-size: 12px; color: #6b7280; background: #f9fafb;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 12px;
}
.sales-card__deals-head { font-size: 12px; color: #6b7280; font-weight: 500; margin-bottom: 6px; }
.sales-car-table { border: 1px solid #f0eee8; border-radius: 8px; overflow: hidden; }
.sales-car-row {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.9fr;
  font-size: 12px; padding: 8px 12px; align-items: center;
}
.sales-car-row + .sales-car-row { border-top: 1px solid #f0eee8; }
.sales-car-row--head { background: #f9fafb; color: #6b7280; font-weight: 500; }
.sales-car-row--head span:nth-child(n+2),
.sales-car-row__num { text-align: right; }
.sales-car-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-car-row--total { background: #faf8f4; font-weight: 500; }
.sales-car-row--total span:nth-child(4) { text-align: right; }
.sales-card__actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.sales-del:hover { border-color: #dc2626 !important; color: #dc2626 !important; }

/* ── 영업사원 등록/수정 모달 ── */
.sp-modal { position: fixed; inset: 0; z-index: 1000; }
.sp-modal[hidden] { display: none; }
.sp-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.sp-modal__panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, 92vw); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 14px; display: flex; flex-direction: column;
}
.sp-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid #f0eee8; position: sticky; top: 0; background: #fff;
}
.sp-modal__header h2 { font-size: 17px; font-weight: 600; margin: 0; }
.sp-modal__close { border: none; background: none; font-size: 18px; cursor: pointer; color: #9ca3af; }
.sp-modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.sp-modal__footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid #f0eee8; position: sticky; bottom: 0; background: #fff;
}
.sales-chk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 6px; }
.sales-radio-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sales-chk {
  display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer;
  padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 8px;
}
.sales-chk input { accent-color: #C5A572; }

/* ── ② 상세페이지: 영업인 전용 영업비 영역 ── */
.sales-lock { margin-top: 20px; }
/* 미니: 평소엔 작은 회색 텍스트 링크만 보임 (일반 고객 노출 최소화) */
.sales-lock--mini { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0eee8; text-align: left; }
.sales-lock__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: #b9b9b9; font-size: 12px; padding: 4px 2px;
  border-radius: 6px; transition: color 0.15s;
}
.sales-lock__trigger:hover { color: #8a8a8a; }
.sales-lock__lockicon { font-size: 12px; opacity: 0.7; }
.sales-lock__panel {
  max-width: 360px; margin: 10px 0 0;
  background: #f4f3f0; border: 1px solid #e5e3dd; border-radius: 10px; padding: 12px;
}
.sales-lock__form { display: flex; gap: 8px; }
.sales-lock__input {
  flex: 1; height: 44px; border: 1px solid #d6d3cc; border-radius: 8px; padding: 0 12px;
  font-size: 16px; background: #fff; color: #1a1a1a;
}
.sales-lock__input::placeholder { color: #9ca3af; }
.sales-lock__btn {
  background: #1a1a1a; color: #fff; border: none; border-radius: 8px;
  padding: 0 16px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.sales-lock__error { color: #dc2626; font-size: 12px; margin: 8px 0 0; text-align: center; }
.sales-lock__unlocked { text-align: left; margin-top: 12px; }
.sales-comm { background: #fff; border: 1px solid #C5A572; border-radius: 14px; padding: 20px; }
.sales-comm__head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.sales-comm__icon { font-size: 18px; }
.sales-comm__title { font-weight: 600; font-size: 15px; }
.sales-comm__tag { font-size: 11px; color: #9ca3af; }
.sales-comm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13px; margin-bottom: 14px; }
.sales-comm__row { display: flex; justify-content: space-between; }
.sales-comm__row span { color: #6b7280; }
.sales-comm__row strong { font-weight: 500; }
.sales-comm__total {
  display: flex; justify-content: space-between; align-items: baseline;
  background: #1a1a1a; border-radius: 10px; padding: 14px 18px;
}
.sales-comm__total > span:first-child { color: #C5A572; font-size: 13px; }
.sales-comm__total-val { color: #fff; font-size: 24px; font-weight: 700; }
.sales-comm__net {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  margin-top: 14px; font-size: 13px;
}
.sales-comm__net > div { display: flex; justify-content: space-between; padding: 8px 0; }
.sales-comm__net span { color: #6b7280; }
.sales-comm__net strong { font-weight: 600; color: #1a1a1a; }
.sales-comm__note { font-size: 11px; color: #9ca3af; margin: 10px 0 0; line-height: 1.6; }
.sales-comm__lock-again {
  margin-top: 14px; width: 100%; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: 10px; font-size: 13px; color: #6b7280; cursor: pointer;
}
.sales-comm__lock-again:hover { background: #f3f4f6; }

@media (max-width: 520px) {
  .sales-comm__grid, .sales-comm__net { grid-template-columns: 1fr; }
  .sales-car-row { grid-template-columns: 1.3fr 1fr 0.9fr; }
  .sales-car-row span:nth-child(2) { display: none; }
  .sales-car-row--head span:nth-child(2) { display: none; }
}

/* 영업사원 카드 — 실지급액 블록 */
.sales-payout {
  margin-top: 14px; background: #faf8f4; border: 1px solid #ece4d6;
  border-radius: 10px; padding: 14px 16px;
}
.sales-payout__title { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sales-payout__biz { font-size: 11px; font-weight: 400; color: #92400e; background: #fef3c7; padding: 2px 8px; border-radius: 10px; }
.sales-payout__rows { display: flex; flex-direction: column; gap: 6px; }
.sales-payout__row { display: flex; justify-content: space-between; font-size: 13px; }
.sales-payout__row span { color: #6b7280; }
.sales-payout__row strong { font-weight: 500; }
.sales-payout__row--final {
  border-top: 1px dashed #ddd3c0; margin-top: 4px; padding-top: 8px;
}
.sales-payout__row--final span { color: #1a1a1a; font-weight: 600; }
.sales-payout__row--final strong { color: #C5A572; font-weight: 700; font-size: 16px; }
.sales-payout__note { font-size: 11px; color: #9ca3af; margin: 10px 0 0; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════ */
/* 차량 관리 필터 재구성 (리스유형 윗줄 / 반납형→타고·카온 / 구독상태 아랫줄) */
/* ════════════════════════════════════════════════════════════ */
.admin-return-ops {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px 0 12px 0; padding: 8px 12px;
  border-left: 3px solid #C5A572; background: #faf8f4; border-radius: 0 8px 8px 0;
}
.admin-return-ops__label { font-size: 12px; color: #9ca3af; margin-right: 4px; }
.admin-return-op {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 7px; border: 1px solid #e5e7eb;
  background: #fff; color: #374151; font-size: 13px; cursor: pointer;
}
.admin-return-op:hover { border-color: #C5A572; }
.admin-return-op.is-active { background: #5f5e5a; color: #fff; border-color: #5f5e5a; }
.admin-return-op__count { font-size: 12px; color: #9ca3af; }
.admin-return-op.is-active .admin-return-op__count { color: rgba(255,255,255,0.7); }

/* 아랫줄 구독상태 탭 색상 강조 */
.admin-category-tab--subscribed.is-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.admin-category-tab--available.is-active { background: #C5A572; color: #1a1a1a; border-color: #C5A572; }
.admin-category-tab--sold-state.is-active { background: #6b7280; color: #fff; border-color: #6b7280; }

/* 차량 관리 — 영업비 버튼 + 영업비 표 모달 */
.admin-action-btn--commission { color: #92400e; }
.admin-action-btn--commission:hover { background: #fef3c7; }
.cm-grid { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.cm-row { display: flex; justify-content: space-between; font-size: 13px; }
.cm-row span { color: #6b7280; }
.cm-row strong { font-weight: 500; }
.cm-total {
  display: flex; justify-content: space-between; align-items: baseline;
  background: #faf8f4; border: 1px solid #ece4d6; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px;
}
.cm-total > span { color: #6b7280; font-size: 13px; }
.cm-total > strong { font-size: 20px; font-weight: 700; }
.cm-payout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-payout { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; text-align: center; }
.cm-payout--biz { background: #f0f9ff; border-color: #bae6fd; }
.cm-payout--ind { background: #faf8f4; border-color: #ece4d6; }
.cm-payout__label { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.cm-payout__amt { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.cm-payout__note { font-size: 11px; color: #9ca3af; line-height: 1.5; }
.cm-formula { font-size: 11px; color: #9ca3af; text-align: center; margin: 12px 0 0; }

/* 상담폼 — 선택 옵션 묶음 (추천 영업인 + 보험 견적) */
.consult-options {
  margin: 4px 0 18px; padding: 14px; border-radius: 12px;
  background: #f9fafb; border: 1px solid #f0eee8;
}
.consult-options__title { font-size: 12px; color: #9ca3af; font-weight: 500; margin-bottom: 10px; }
.consult-options .consult-referral { margin-bottom: 10px; }
.consult-options .field:last-child { margin-bottom: 0; }

/* 차량 수정폼 — 3단계 상태 선택 (미구독/구독중/판매됨) */
.status-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.status-seg__opt { cursor: pointer; }
.status-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.status-seg__btn {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 14px 10px; border: 2px solid #e5e7eb; border-radius: 12px;
  background: #fff; transition: all 0.15s; text-align: center;
}
.status-seg__btn strong { font-size: 15px; font-weight: 600; color: #374151; }
.status-seg__btn small { font-size: 11px; color: #9ca3af; }
.status-seg__opt input:checked + .status-seg__btn { border-color: #C5A572; background: #faf8f4; }
.status-seg__opt input:checked + .status-seg__btn strong { color: #1a1a1a; }
.status-seg__opt:nth-child(3) input:checked + .status-seg__btn { border-color: #6b7280; background: #f3f4f6; }

/* 등록 폼 Step 0 — 반납형 운영사 선택 (타고/카온) */
.return-op-select { margin-top: 16px; padding: 14px 16px; background: #faf8f4; border: 1px solid #ece4d6; border-radius: 12px; }
.return-op-select__label { font-size: 13px; font-weight: 600; color: #92400e; margin-bottom: 10px; }
.return-op-select__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.return-op-card { cursor: pointer; }
.return-op-card input { position: absolute; opacity: 0; pointer-events: none; }
.return-op-card__box {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border: 2px solid #e5e7eb; border-radius: 10px;
  background: #fff; transition: all 0.15s;
}
.return-op-card__box strong { font-size: 14px; color: #374151; }
.return-op-card__box small { font-size: 11px; color: #9ca3af; }
.return-op-card input:checked + .return-op-card__box { border-color: #C5A572; background: #fffdf8; }
.return-op-card input:checked + .return-op-card__box strong { color: #1a1a1a; }

/* 등록폼 — 원가 항목 (성능보험료/매도비) */
.cost-items { margin-top: 14px; padding: 12px; background: #fff8ee; border: 1px solid #f3e3c3; border-radius: 10px; }
.cost-items__title { font-size: 12px; font-weight: 600; color: #92400e; margin-bottom: 8px; }
.cost-item { margin-bottom: 8px; }
.cost-item:last-of-type { margin-bottom: 0; }

/* 등록폼 — 영업비 정산 미리보기 (Image 5 형태) */
.edit-commission { margin-top: 14px; background: #fff; border: 1px solid #C5A572; border-radius: 12px; padding: 16px; }
.edit-comm__title { font-weight: 600; font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.edit-comm__title span { font-size: 11px; color: #9ca3af; font-weight: 400; }
.edit-comm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; font-size: 13px; margin-bottom: 12px; }
.edit-comm__grid > div { display: flex; justify-content: space-between; }
.edit-comm__grid span { color: #6b7280; }
.edit-comm__grid strong { font-weight: 500; }
.edit-comm__total { display: flex; justify-content: space-between; align-items: baseline; background: #1a1a1a; border-radius: 8px; padding: 12px 16px; }
.edit-comm__total > span { color: #C5A572; font-size: 13px; }
.edit-comm__total > strong { color: #fff; font-size: 20px; font-weight: 700; }
.edit-comm__net { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; font-size: 13px; }
.edit-comm__net > div { display: flex; justify-content: space-between; }
.edit-comm__net span { color: #6b7280; }
.edit-comm__net strong { font-weight: 600; }
.edit-comm__note { font-size: 12px; color: #dc2626; margin: 10px 0 0; }

/* [hidden] 속성이 .field{display:block} 에 가려지는 문제 방지 */
.field[hidden], .step-card__group[hidden] { display: none !important; }

/* 성능지 옆 성능보험료 입력 */
.perf-ins-near { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e5e7eb; }

/* 원가 반영 재계산 버튼 */
.cost-recalc-btn {
  margin-top: 10px; width: 100%; padding: 9px 12px;
  border: 1px solid #C5A572; border-radius: 8px; background: #fff;
  color: #92400e; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.cost-recalc-btn:hover { background: #fff8ee; }

/* 매도비 아래 원가 합계 표시 */
.cost-sum { margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid #f3e3c3; border-radius: 8px; }
.cost-sum:empty { display: none; }
.cost-sum__row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.cost-sum__row span { color: #6b7280; }
.cost-sum__row strong { font-weight: 500; }
.cost-sum__row--total { border-top: 1px solid #f0eee8; margin-top: 4px; padding-top: 7px; }
.cost-sum__row--total span, .cost-sum__row--total strong { font-weight: 700; color: #1a1a1a; }
.cost-sum__hint span, .cost-sum__hint strong { color: #92400e; font-size: 12px; }

/* 가격 추적 — 상단 요약 띠 */
.pt-summary {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
  background: #2C2C2A; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
}
.pt-summary__item { flex: 1; min-width: 100px; }
.pt-summary__label { display: block; font-size: 11px; color: #B4B2A9; margin-bottom: 2px; }
.pt-summary__value { display: block; font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.pt-summary__value--accent { color: #FAC775; }
.pt-summary__arrow { align-self: center; color: #888780; font-size: 14px; }

/* ════════════════════════════════════════════════════════════ */
/* 가격 추적 좌우 색 구분 (A안) — 왼쪽=입력(흰색) / 오른쪽=자동(회색)  */
/* ════════════════════════════════════════════════════════════ */
.pt-col--source { background: #ffffff; border-color: #e5e7eb; border-left: 3px solid #185FA5; }
.pt-col--dest   { background: #f9fafb; border-color: #e5e7eb; border-left: 3px solid #0F6E56; }
/* 제목 옆 입력/자동 안내 배지 */
.pt-col__title { color: #374151; border-bottom-color: #eef0f2; position: relative; }
.pt-col--source .pt-col__title::after {
  content: "입력"; position: absolute; right: 0; top: 0;
  font-size: 11px; font-weight: 500; color: #185FA5;
  background: #E6F1FB; padding: 2px 8px; border-radius: 6px;
}
.pt-col--dest .pt-col__title::after {
  content: "자동"; position: absolute; right: 0; top: 0;
  font-size: 11px; font-weight: 500; color: #0F6E56;
  background: #E1F5EE; padding: 2px 8px; border-radius: 6px;
}
.pt-col__subtitle { background: #f1f5f9; color: #64748b; }

/* 영업비 정산 상태 배지 (예상/유효/임박/만료/확정) */
.sales-comm__status { font-size: 11px; padding: 3px 9px; border-radius: 6px; font-weight: 500; margin-left: auto; }
.sales-comm__status--valid { background: rgba(255,255,255,0.15); color: #e5e7eb; }
.sales-comm__status--imminent { background: #FAC775; color: #854F0B; }
.sales-comm__status--expired { background: #F09595; color: #501313; }
.sales-comm__status--locked { background: #9FE1CB; color: #04342C; }

/* 영업비 모달 상태 배너 */
.cm-status { font-size: 12px; padding: 9px 12px; border-radius: 8px; margin-bottom: 12px; line-height: 1.5; }
.cm-status--valid { background: #f1f5f9; color: #475569; }
.cm-status--imminent { background: #FAEEDA; color: #854F0B; }
.cm-status--expired { background: #FCEBEB; color: #991b1b; }
.cm-status--locked { background: #E1F5EE; color: #0F6E56; }
/* 정산 탭 확정/예상 안내 */
.sales-est-note { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; margin-top: 6px; background: #f8fafc; border-radius: 8px; font-size: 11.5px; color: #64748b; }
.sales-est-note span:first-child { font-weight: 500; color: #475569; }
.sales-est-note--all-locked { background: #E1F5EE; color: #0F6E56; }

/* ════════════════════════════════════════════════════════════ */
/* 카드형 레이아웃 다듬기 (A안 목업 근접) — 가격 추적 영역             */
/* ════════════════════════════════════════════════════════════ */
.price-tracking-box { background: #f7f7f5; border-radius: 14px; padding: 18px; }
.pt-grid { gap: 12px; }
.pt-col { border-radius: 12px; padding: 16px; border-width: 1px; }
/* 카드 제목을 번호 원 + 텍스트 형태로 */
.pt-col__title { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pt-col--source .pt-col__title::before {
  content: "1"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #E6F1FB; color: #185FA5; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.pt-col--dest .pt-col__title::before {
  content: "2"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #E1F5EE; color: #0F6E56; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 하모니 가격 → 구독 확정가 사이 아래 화살표 느낌: 구독확정가 칸 강조 */
#subscription-confirmed-price { background: #f0f9ff; }
/* 매입 합계 줄을 카드 안 박스처럼 */
.cost-sum { background: #ffffff; border: 1px solid #eef0f2; border-radius: 8px; padding: 10px 12px; }
/* 영업비 미리보기를 어두운 띠 카드로 (간략) */
.edit-commission { border-radius: 12px; }

/* 영업비 미리보기 — 간략 띠 (목업) */
.edit-comm__brief { background: #1a1a1a; border-radius: 12px; padding: 14px 18px; }
.edit-comm__brief-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.edit-comm__brief-label { font-size: 13px; color: #C5A572; }
.edit-comm__brief-amt { font-size: 22px; font-weight: 700; color: #fff; }
.edit-comm__brief-sub { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.edit-comm__brief-sub span { font-size: 12px; color: #B4B2A9; }
.edit-comm__brief-sub strong { color: #fff; font-weight: 500; }
.edit-comm__brief-formula { font-size: 11px !important; color: #5F5E5A !important; }

/* 영업비 띠를 좌우 카드 아래 전체 너비로 */
#edit-commission { margin-top: 12px; width: 100%; }

/* ════════════════════════════════════════════════════════════ */
/* 가독성 개선 — 가격 입력값 진하게, 구독 확정가 강조                  */
/* ════════════════════════════════════════════════════════════ */
/* 모든 가격 입력칸 값은 진한 검정 + 굵게 */
#harmony-price-1, #subscription-confirmed-price,
.pt-col .field__input, .ph-row__price {
  color: #1a1a1a !important;
  font-weight: 600;
}
/* 구독 확정가: 파란 강조 박스 + 큰 글씨 (영업비 기준이므로 제일 눈에 띄게) */
#subscription-confirmed-price {
  color: #0b4a8c !important;
  font-weight: 700;
  font-size: 17px;
  background: #eff6ff !important;
  border: 1.5px solid #3b82f6 !important;
}
/* 하모니 가격도 또렷하게 */
#harmony-price-1 { font-size: 16px; background: #fffdf5 !important; }
/* 라벨(필드명)은 회색이어도 너무 흐리지 않게 한 단계 진하게 */
.pt-col .field__label { color: #374151; }
.pt-col .field__label span[style*="9ca3af"] { color: #6b7280 !important; }
/* 오른쪽 하모니 카드 배경을 너무 회색이지 않게 (살짝만) */
.pt-col--dest { background: #fcfcfb; }

/* 영업비 띠 — 더 직관적으로 (큰 숫자 + 명확한 라벨) */
.edit-comm__brief { padding: 16px 20px; background: #14110f; }
.edit-comm__brief-label { font-size: 14px !important; color: #FAC775 !important; font-weight: 500; }
.edit-comm__brief-amt { font-size: 30px !important; font-weight: 700; letter-spacing: -0.5px; }
.edit-comm__brief-sub { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2c2926; gap: 20px; }
.edit-comm__brief-sub span { font-size: 13px !important; color: #d6d3cd !important; }
.edit-comm__brief-sub strong { color: #fff !important; font-weight: 600; font-size: 14px; }
.edit-comm__brief-formula { font-size: 11px !important; color: #6b6660 !important; }

/* 공개 여부 토글 크게 (Step4) */
.toggle--inline .toggle__slider { width: 58px; height: 32px; }
.toggle--inline .toggle__slider::after { top: 3px; left: 3px; width: 26px; height: 26px; }
.toggle--inline .toggle__input:checked + .toggle__slider::after { transform: translateX(26px); }
.toggle--inline .toggle__label { font-size: 15px; font-weight: 500; margin-left: 10px; }
.toggle--inline { gap: 4px; }

/* ════════════════════════════════════════════════════════════ */
/* 영업비 정산 패널 (Image5 디자인 · 흰 카드)                         */
/* ════════════════════════════════════════════════════════════ */
.ecp { background: #fffdf7; border: 1px solid #f0e6cf; border-radius: 12px; padding: 16px 20px; }
.ecp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ecp__title { font-size: 14px; font-weight: 600; color: #374151; }
.ecp__badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 8px; }
.ecp__badge--valid { background: #FAEEDA; color: #854F0B; }
.ecp__badge--imminent { background: #FAC775; color: #6b3d05; }
.ecp__badge--expired { background: #FCEBEB; color: #991b1b; }
.ecp__total { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f0e6cf; }
.ecp__total-label { font-size: 13px; color: #6b7280; }
.ecp__total-amt { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.ecp__sub { display: flex; gap: 20px; padding: 10px 0; }
.ecp__sub span { font-size: 13px; color: #6b7280; }
.ecp__sub strong { color: #111827; font-weight: 600; }
.ecp__note { font-size: 12px; color: #92400e; background: #fef9ee; border-radius: 8px; padding: 9px 12px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════ */
/* 차량 정보 헤더 (Image3)                                          */
/* ════════════════════════════════════════════════════════════ */
.pt-car-info { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pt-car-info:empty { display: none; }
.pt-car-info__badge { background: #FAEEDA; color: #854F0B; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 8px; }
.pt-car-info__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }

/* 고객 월 구독료 — 48/60 가로 카드 (Image4) */
#contract-pair-acquisition { background: #fdfcf9; border: 1px solid #f0e9d8; border-radius: 12px; padding: 16px 18px; }
#contract-pair-acquisition .contract-pair__title { font-size: 14px; font-weight: 600; margin-bottom: 14px; color:#374151; }
#contract-pair-acquisition .contract-pair__row--term {
  background: #f5f3ee; border-radius: 10px; padding: 16px 18px;
}
#contract-pair-acquisition .contract-pair__col--label { margin-bottom: 8px; }
#contract-pair-acquisition .contract-pair__col--label strong {
  display: inline-block; background: #2C2C2A; color: #fff; font-size: 12px;
  padding: 3px 10px; border-radius: 6px; font-weight: 500;
}
#contract-pair-acquisition .contract-pair__row--term .field__label { font-size: 12px; color: #6b7280; }
#contract-pair-acquisition .contract-pair__row--term .field__input {
  font-size: 22px; font-weight: 700; color: #111827; text-align: left;
  background: transparent; border: none; padding: 4px 0; height: auto;
}

/* 영업인 영업비 — 유효기간 카운트다운 바 */
.sales-cd { margin: 10px 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; text-align: center; font-weight: 500; }
.sales-cd strong { font-weight: 700; }
.sales-cd--valid { background: rgba(255,255,255,0.12); color: #e5e7eb; }
.sales-cd--imminent { background: #FAC775; color: #6b3d05; }
.sales-cd--expired { background: #F09595; color: #501313; }
.sales-cd--locked { background: #9FE1CB; color: #04342C; }

/* 구독료 산출 버튼 */
.subprice-calc-btn {
  margin-left: 8px; background: #185FA5; color: #fff; border: none;
  font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 6px; cursor: pointer;
}
.subprice-calc-btn:hover { background: #134e87; }

/* ════════════════════════════════════════════════════════════ */
/* 영업사원 전용 대시보드 (sales.html)                              */
/* ════════════════════════════════════════════════════════════ */
.sales-dash { padding: 24px 0 60px; }

/* 로그인 카드 */
.sales-dash__login { display: flex; justify-content: center; padding: 40px 16px; }
.sales-login-card { background: #fff; border: 1px solid #eceae3; border-radius: 16px; padding: 32px 28px; max-width: 380px; width: 100%; text-align: center; }
.sales-login-card__icon { width: 48px; height: 48px; border-radius: 50%; background: #f1efe8; color: #5F5E5A; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 14px; }
.sales-login-card__title { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.sales-login-card__desc { font-size: 13px; color: #6b7280; margin: 0 0 18px; line-height: 1.5; }
.sales-login-card__row { display: flex; gap: 8px; }
.sales-login-card__input { flex: 1; height: 44px; border: 1px solid #d6d3cc; border-radius: 8px; padding: 0 12px; font-size: 16px; }
.sales-login-card__btn { background: #1a1a1a; color: #fff; border: none; border-radius: 8px; padding: 0 18px; font-size: 14px; font-weight: 500; cursor: pointer; }
.sales-login-card__err { color: #dc2626; font-size: 12px; margin: 10px 0 0; }

/* 헤더 */
.sd-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sd-head__title { font-size: 18px; font-weight: 600; }
.sd-head__name { font-size: 13px; color: #6b7280; font-weight: 400; }
.sd-head__right { display: flex; align-items: center; gap: 12px; }
.sd-head__login { font-size: 12px; color: #0F6E56; }
.sd-logout { background: transparent; border: 1px solid #d6d3cc; border-radius: 8px; padding: 5px 12px; font-size: 12px; color: #6b7280; cursor: pointer; }

/* 요약 카드 */
.sd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.sd-card { background: #f7f7f5; border-radius: 10px; padding: 14px 16px; }
.sd-card__label { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.sd-card__val { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sd-card__val--gold { color: #854F0B; }
.sd-card__val--red { color: #A32D2D; }

/* 컨트롤 (검색 + 사업자토글) */
.sd-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sd-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e5e3dc; border-radius: 8px; padding: 8px 12px; }
.sd-search i { color: #9ca3af; font-size: 16px; }
.sd-search input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
.sd-paytoggle { display: flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #e5e3dc; border-radius: 8px; padding: 5px 6px; }
.sd-paytoggle__label { font-size: 11px; color: #6b7280; padding: 0 4px; }
.sd-pt { background: transparent; border: none; font-size: 12px; color: #9ca3af; padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.sd-pt.is-on { background: #2C2C2A; color: #fff; }

/* 필터 칩 */
.sd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.sd-chip { background: #fff; color: #6b7280; font-size: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid #e5e3dc; cursor: pointer; }
.sd-chip.is-on { background: #185FA5; color: #fff; border-color: #185FA5; }
.sd-chip--sort { background: #2C2C2A; color: #fff; border-color: #2C2C2A; }
.sd-brand { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid #e5e3dc; background: #fff; color: #374151; cursor: pointer; }

/* 표 */
.sd-table { background: #fff; border: 1px solid #ececE5; border-radius: 12px; overflow: hidden; }
.sd-tr { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr 0.8fr 0.5fr; gap: 8px; padding: 13px 16px; align-items: center; border-top: 1px solid #f1efe9; text-decoration: none; color: inherit; }
.sd-tr--head { background: #f7f7f5; border-top: none; font-size: 11px; color: #6b7280; font-weight: 500; padding: 11px 16px; }
.sd-tr:not(.sd-tr--head):hover { background: #fafaf8; }
.sd-tr.is-exp { opacity: 0.5; }
.sd-r { text-align: right; }
.sd-c { text-align: center; }
.sd-veh__name { display: block; font-size: 13px; font-weight: 500; color: #1a1a1a; }
.sd-veh__sub { display: block; font-size: 11px; color: #b4b2a9; margin-top: 1px; }
.sd-comm { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sd-net { font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sd-month { font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sd-arrow { color: #185FA5; }
.sd-arrow i { font-size: 16px; }

/* 유효 뱃지 */
.sd-vb { font-size: 10px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.sd-vb--ok { background: #E1F5EE; color: #0F6E56; }
.sd-vb--imm { background: #FAC775; color: #6b3d05; }
.sd-vb--exp { background: #FCEBEB; color: #A32D2D; }
.sd-vb--none { background: #f1efe8; color: #888780; }

.sd-empty { padding: 32px; text-align: center; color: #9ca3af; font-size: 13px; }
.sd-note { font-size: 11px; color: #b4b2a9; margin: 10px 2px 0; }

@media (max-width: 640px) {
  .sd-tr { grid-template-columns: 1.6fr 1fr 0.7fr 0.4fr; }
  .sd-tr .sd-net, .sd-tr--head span:nth-child(3) { display: none; }
  .sd-cards { grid-template-columns: 1fr; }
}

/* 상세페이지 → 영업비 대시보드 바로가기 */
.sales-lock__dash-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #185FA5; text-decoration: none; }
.sales-lock__dash-link:hover { text-decoration: underline; }
.sales-lock__dash-link i { font-size: 15px; }

/* 메인 헤더 Partners 링크 (영업사원용 · 흐릿하게) */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }
.site-partners-link {
  font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.28);
  text-decoration: none; font-weight: 500; padding: 4px 8px; border-radius: 6px;
  transition: color 0.2s ease;
}
.site-partners-link:hover { color: rgba(255,255,255,0.7); }

/* 보류함 — 이유 필터 + 딱지 */
.admin-hold-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.admin-hold-filter__label { font-size: 12px; color: #6b7280; font-weight: 500; }
.admin-hold-chip { background: #fff; border: 1px solid #e5e3dc; border-radius: 8px; padding: 6px 12px; font-size: 12px; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.admin-hold-chip.is-on { background: #185FA5; color: #fff; border-color: #185FA5; }
.admin-hold-chip__count { font-size: 11px; opacity: 0.8; }
.admin-hold-chip.is-on .admin-hold-chip__count { opacity: 0.95; }
.admin-pending-guide--sub { background: #fffdf5; border-color: #f0e6c8; }

.hold-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.hold-pill--low { background: #FCEBEB; color: #A32D2D; }
.hold-pill--manual { background: #eef0f2; color: #5b6470; }

/* ════════════════════════════════════════════════════════════ */
/* 관리자 가격 추적 대시보드 (price-tracking.html)                  */
/* ════════════════════════════════════════════════════════════ */
.pt-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.pt-card { background: #f7f7f5; border-radius: 10px; padding: 13px 16px; }
.pt-card__l { font-size: 12px; color: #6b7280; margin-bottom: 5px; }
.pt-card__v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pt-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pt-search { width: 300px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d6d3cc; border-radius: 8px; padding: 0 12px; height: 38px; }
.pt-search i { color: #9ca3af; font-size: 16px; }
.pt-search input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; height: 100%; }
.pt-maker { font-size: 13px; padding: 0 12px; height: 38px; border-radius: 8px; border: 1px solid #d6d3cc; background: #fff; color: #5F5E5A; cursor: pointer; }
.pt-sortnote { font-size: 12px; color: #b4b2a9; }

.pt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pt-chip { background: #fff; border: 1px solid #e5e3dc; border-radius: 7px; padding: 6px 13px; font-size: 12px; color: #6b7280; cursor: pointer; }
.pt-chip.is-on { background: #185FA5; color: #fff !important; border-color: #185FA5; }
.pt-chip--all.is-on { background: #2C2C2A; border-color: #2C2C2A; }

.pt-table { background: #fff; border: 0.5px solid #e7e5de; border-radius: 12px; overflow: hidden; }
.pt-tr { display: grid; grid-template-columns: 2.6fr 1.3fr 1.1fr 1.3fr 1.5fr 1.2fr; gap: 10px; padding: 13px 16px; align-items: center; border-top: 0.5px solid #f1efe9; text-decoration: none; color: inherit; }
.pt-tr--head { background: #f7f7f5; border-top: none; font-size: 11px; color: #9b9a92; font-weight: 500; letter-spacing: 0.02em; padding: 11px 16px; }
.pt-tr:not(.pt-tr--head):hover { background: #fafaf8; }
.pt-r { text-align: right; font-variant-numeric: tabular-nums; }

.pt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pt-veh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-veh__body { min-width: 0; }
.pt-veh__top { display: flex; align-items: center; gap: 6px; }
.pt-maker-badge { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; }
.pt-veh__name { font-size: 13px; font-weight: 500; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-veh__plate { display: block; font-size: 11px; color: #b4b2a9; margin-top: 3px; }

.pt-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pt-amt { font-size: 13px; }
.pt-amt--muted { color: #6b7280; }
.pt-d { font-size: 10px; color: #b4b2a9; }
.pt-muted { color: #b4b2a9; }
.ptchip { font-size: 10px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

.pt-legend { display: flex; gap: 16px; margin: 12px 2px 0; }
.pt-legend span { font-size: 11px; color: #9b9a92; display: inline-flex; align-items: center; gap: 5px; }
.pt-empty { padding: 36px; text-align: center; color: #9ca3af; font-size: 13px; }
.pt-note { font-size: 11px; color: #b4b2a9; margin: 8px 2px 0; line-height: 1.6; }

@media (max-width: 900px) {
  .pt-cards { grid-template-columns: 1fr 1fr; }
  .pt-tr { grid-template-columns: 2fr 1.2fr 1.2fr 0.9fr 1fr; }
  .pt-tr .pt-r:nth-child(6), .pt-tr .pt-r:nth-child(7),
  .pt-tr--head span:nth-child(6), .pt-tr--head span:nth-child(7) { display: none; }
  .pt-search { width: 100%; }
}

/* 가격 추적 — 영업비 조정 패널 (5-2) */
.pt-row-wrap { border-top: 0.5px solid #f1efe9; }
.pt-row-wrap:first-child { border-top: none; }
.pt-row-wrap .pt-tr { border-top: none; }
.pt-tr--clickable { cursor: pointer; }
.pt-caret { font-size: 14px; margin-left: 5px; color: #b4b2a9; vertical-align: -2px; transition: transform 0.15s; }
.pt-row-wrap:has(.pt-panel) .pt-caret { transform: rotate(180deg); }
.pt-lock { color: #b4b2a9; font-size: 12px; margin-left: 4px; }
.pt-comm { display: inline-flex; align-items: center; justify-content: flex-end; }

.pt-panel { background: #faf9f6; border-top: 0.5px solid #ece9e1; padding: 14px 16px 16px; }
.pt-panel__hd { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #5F5E5A; font-weight: 500; margin-bottom: 10px; }
.pt-panel__hd i { vertical-align: -2px; margin-right: 4px; }
.pt-panel__edit { font-size: 12px; color: #185FA5; text-decoration: none; }
.pt-panel__opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-opt { flex: 1; min-width: 150px; background: #fff; border: 1px solid #e2dfd8; border-radius: 9px; padding: 10px 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.pt-opt:hover { border-color: #C5A572; }
.pt-opt.is-on { border-color: #C5A572; background: #fffdf5; box-shadow: 0 0 0 1px #C5A572; }
.pt-opt__lbl { font-size: 11px; color: #888780; }
.pt-opt__price { font-size: 14px; font-weight: 600; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.pt-opt__comm { font-size: 11px; font-weight: 500; }
.pt-panel__ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.pt-panel__note { font-size: 11px; color: #9b9a92; flex: 1; }
.pt-save { background: #185FA5; color: #fff; border: none; border-radius: 8px; padding: 9px 22px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pt-save:disabled { background: #d3d1c7; cursor: not-allowed; }

.pt-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: #2C2C2A; color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 9999; }
.pt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pt-toast--err { background: #A32D2D; }

/* 가격 추적 패널 — 영업비 크게 + 직접 입력 (재구성) */
.pt-panel__sec { font-size: 12px; color: #5F5E5A; font-weight: 500; margin: 12px 0 8px; }
.pt-panel__hint { font-size: 11px; color: #b4b2a9; font-weight: 400; }
.pt-opt { flex: 1; min-width: 160px; background: #fff; border: 1px solid #e2dfd8; border-radius: 9px; padding: 12px 14px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.pt-opt__comm { font-size: 18px; font-weight: 700; }
.pt-opt__sub { font-size: 11px; color: #888780; }
.pt-manual { display: flex; align-items: center; gap: 8px; }
.pt-manual__in { width: 200px; height: 38px; border: 1px solid #d6d3cc; border-radius: 8px; padding: 0 12px; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.pt-manual__in:focus { outline: none; border-color: #185FA5; box-shadow: 0 0 0 2px rgba(24,95,165,0.15); }
.pt-manual__won { font-size: 13px; color: #5F5E5A; }
.pt-manual__clear { background: #fff; border: 1px solid #e2dfd8; border-radius: 7px; padding: 7px 12px; font-size: 12px; color: #6b7280; cursor: pointer; }
.pt-manual__clear:hover { background: #f7f7f5; }

/* 가격 추적 — 가격 변동 확인 깃발 */
.pt-card--alert { background: #FCEBEB; }
.pt-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #A32D2D; background: #FCEBEB; padding: 2px 7px; border-radius: 5px; margin-left: 6px; white-space: nowrap; }
.pt-flag i { font-size: 12px; }
.pt-row-wrap--changed { background: #fffbfb; }
.pt-row-wrap--changed .pt-tr { border-left: 3px solid #E24B4A; }
.pt-changed-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #FCEBEB; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.pt-changed-note span { font-size: 12px; color: #A32D2D; }
.pt-changed-note i { vertical-align: -2px; margin-right: 2px; }
.pt-confirm { background: #fff; border: 1px solid #E24B4A; color: #A32D2D; border-radius: 7px; padding: 7px 16px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pt-confirm:hover { background: #A32D2D; color: #fff; }

/* 가격 추적 — 카드=필터 (제안 C) */
.pt-cards--6 { grid-template-columns: repeat(6, 1fr); }
.pt-card--btn { border: 1.5px solid transparent; cursor: pointer; text-align: left; font: inherit; transition: border-color 0.12s, background 0.12s; }
.pt-card--btn:hover { background: #efeee9; }
.pt-card--btn.is-on { border-color: #2C2C2A; background: #fff; }
.pt-card--btn.pt-card--alert.is-on { border-color: #A32D2D; }
.pt-clearf { background: none; border: none; color: #185FA5; font-size: 12px; cursor: pointer; padding: 0; margin-left: 2px; }
.pt-clearf:hover { text-decoration: underline; }
@media (max-width: 1100px) { .pt-cards--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .pt-cards--6 { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════════════════════════════
   v55: 관리자 수정 페이지 — 오토핸즈 자동수집 성능기록부 표·도면 영역
   (손님 화면 .ins- 스타일을 그대로 재사용, 래퍼만 추가)
   ──────────────────────────────────────────────────────────── */
.ins-admin-view {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #d1d5db;
}
.ins-admin-view .ins-wrap {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
}
.ins-admin-empty {
  margin: 0;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
}

/* v55: 성능기록부 세부상태 — 섹션 소제목 (원동기/변속기/제동 등) */
.ins-tbl .ins-subhead td {
  background: #eef2f7;
  font-weight: 600;
  color: #334155;
  padding: 7px 10px;
  font-size: 12.5px;
  border-top: 1px solid #d1d5db;
}

/* v56: 성능지 사진 업로더 강제 숨김 (hidden 속성이 display:flex에 무력화되던 문제 해결) */
.inspection-report-uploader.is-hidden-uploader { display: none !important; }

/* v56: 성능기록부 점검 확인란 (점검일/점검자/고지자) 안내문 */
.ins-sign-cert {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: #475569;
  text-align: center;
}

/* v58: 오토핸즈 차량코드 연결 박스 (직접등록 차 성능지 연결) */
.carcd-link-box {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
}
.carcd-link-box__title {
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
  margin-bottom: 8px;
}
.carcd-link-box__desc {
  font-size: 12px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 10px;
}
.carcd-link-box__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.carcd-link-box__row input {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.carcd-link-box__hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 8px;
  line-height: 1.6;
}
.carcd-link-box__hint code {
  font-family: 'Courier New', monospace;
  background: #e2e8f0;
  padding: 1px 5px;
  border-radius: 4px;
  color: #475569;
}

/* v58: 성능점검 상세(표·도면) 접기/펴기 토글 */
.ins-collapse {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.ins-collapse__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f8fafc;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-align: left;
}
.ins-collapse__head:hover { background: #f1f5f9; }
.ins-collapse__toggle {
  font-size: 12px;
  font-weight: 500;
  color: #2563eb;
  white-space: nowrap;
}
.ins-collapse__body {
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
}
.ins-collapse__body .ins-admin-view {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* v58: A안 — 사고이력 카드에 성능지 버튼 통합 (성능지 있을 때 전체폭) */
.info-card--has-inspection {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.info-card--has-inspection .inspection-view-btn {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 11px 12px;
  font-size: 13px;
  box-sizing: border-box;
}
.info-card--has-inspection .inspection-cta-row__hint {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  color: #b45309;
  margin-top: 6px;
}

/* v58: 모바일 차량정보 — 이모지 제거, 텍스트 라벨 통일 */
.info-spec-mobile__line { flex-wrap: wrap; }
.ispm__item { display: inline-flex; align-items: baseline; gap: 5px; }
.ispm__k {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}
.ispm__item strong { font-weight: 600; }

/* v59: 성능지 풀폭 가로 버튼 (엔카·KB 방식) — 차량정보 카드 아래 정렬 */
.inspection-bar {
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.inspection-bar:hover {
  background: #f8fafc;
  border-color: #2563eb;
}
.inspection-bar__icon { font-size: 17px; }
.inspection-bar__label {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.inspection-bar__hint {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
}
.inspection-bar__arrow {
  margin-left: auto;
  font-size: 22px;
  color: #cbd5e1;
  line-height: 1;
}
@media (max-width: 700px) {
  .inspection-bar { flex-wrap: wrap; padding: 13px 14px; gap: 6px; }
  .inspection-bar__hint { flex-basis: 100%; order: 3; }
  .inspection-bar__arrow { order: 2; }
}

/* v60: 사고이력 등급별 색상 (무사고 초록 / 단순수리 주황 / 사고 빨강) */
/* PC 카드 */
.info-card--acc-ok    { background:#f0fdf4; border-color:#bbf7d0 !important; }
.info-card--acc-ok    .info-card__icon--acc,
.info-card--acc-ok    .info-card__value--acc { color:#16a34a; }
.info-card--acc-ok    .info-card__value--acc { color:#166534; }
.info-card--acc-warn  { background:#fffbeb; border-color:#fde68a !important; }
.info-card--acc-warn  .info-card__icon--acc { color:#d97706; }
.info-card--acc-warn  .info-card__value--acc { color:#92400e; }
.info-card--acc-bad   { background:#fef2f2; border-color:#fecaca !important; }
.info-card--acc-bad   .info-card__icon--acc { color:#dc2626; }
.info-card--acc-bad   .info-card__value--acc { color:#991b1b; }
/* 모바일 줄 */
.info-spec-mobile__line--acc-ok   strong { color:#166534; }
.info-spec-mobile__line--acc-warn strong { color:#92400e; }
.info-spec-mobile__line--acc-bad  strong { color:#991b1b; }

/* v61: 관리자 목록 — 사고이력 등급 배지 */
.acc-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.acc-pill--bad  { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.acc-pill--warn { background:#fffbeb; color:#b45309; border:1px solid #fde68a; }

/* v61: 차량 정보 칸 클릭 가능 (수정페이지 이동) */
.admin-col-vehicle--clickable { cursor: pointer; }
.admin-col-vehicle--clickable:hover .admin-car-cell__name { color: #2563eb; text-decoration: underline; }

/* v61: 차량 수정 페이지 단계 바로가기 (래퍼가 sticky 담당) */
.step-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px;
  margin: 0;
  background: #fafbfc;
  border-top: 1px solid #f1f5f9;
}
.step-jump__label {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  margin-right: 2px;
}
.step-jump__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.step-jump__btn:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.step-jump__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.step-jump__btn:hover .step-jump__n { background: #2563eb; }
/* 앵커 이동 시 sticky 바에 가리지 않도록 여백 (헤더+바로가기 높이) */
.step-card { scroll-margin-top: 120px; }
@media (max-width: 700px) {
  .step-jump { gap: 6px; padding: 8px 10px; }
  .step-jump__btn { padding: 5px 9px; font-size: 12px; }
  .step-jump__label { display: none; }
}

/* v62: 수정페이지 헤더+바로가기 통합 고정 영역 */
.edit-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0 0 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  overflow: hidden;
}
/* 윗줄: 차량명 + 저장/취소 */
.edit-sticky-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}
.edit-sticky-bar__title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.edit-sticky-bar__kicker {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  flex-shrink: 0;
}
.edit-sticky-bar__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--admin-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.edit-sticky-bar__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .edit-sticky-bar__top { padding: 8px 12px; }
  .edit-sticky-bar__kicker { display: none; }
  .edit-sticky-bar__name { font-size: 15px; }
}

/* v64: 수정페이지에서 sticky 작동하도록 overflow 해제 (admin-main의 overflow-x:auto가 sticky를 깨뜨림) */
.edit-page-body .admin-main { overflow-x: visible; }

/* ════════════════════════════════════════════════════════════ */
/* v79 패치: 수정페이지 상단바 '이 차량 페이지 보기' 버튼 (A안)      */
/*   - 차량명 오른쪽에 배치 (top은 이미 space-between)             */
/*   - 저장된 차일 때만 노출 (admin-edit.js에서 hidden 토글)        */
/* ════════════════════════════════════════════════════════════ */
.edit-view-car-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-info-bg, #E6F1FB);
  color: var(--color-info-text, #185FA5);
  border: 1px solid var(--color-info-border, #B5D4F4);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.edit-view-car-btn:hover { background: #d3e6f8; }
.edit-view-car-btn:active { transform: scale(0.97); }
.edit-view-car-btn[hidden] { display: none; }
@media (max-width: 640px) {
  .edit-view-car-btn { padding: 6px 10px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════ */
/* v80 패치: 크롤링 현황 화면 (crawl-status.html)                  */
/* ════════════════════════════════════════════════════════════ */
.crawl-meta { color: #6b7280; font-size: 13px; margin: 0 0 18px; }
.crawl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.crawl-card {
  background: #f8f9fb;
  border: 1px solid #eef0f3;
  border-radius: 10px;
  padding: 16px 18px;
}
.crawl-card__label { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
.crawl-card__value { font-size: 26px; font-weight: 600; color: #111827; line-height: 1; }
.crawl-card__unit { font-size: 13px; font-weight: 400; color: #9ca3af; margin-left: 2px; }
.crawl-section-title {
  font-size: 16px; font-weight: 600; color: #111827;
  margin: 26px 0 12px;
}
.crawl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.crawl-chip {
  background: #fef3e2; color: #92591a;
  border-radius: 8px; padding: 6px 12px; font-size: 13px;
}
.crawl-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.crawl-filter-btn {
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.crawl-filter-btn:hover { background: #f3f4f6; }
.crawl-filter-btn.is-active { background: #111827; color: #fff; border-color: #111827; }
.crawl-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: #fff; border: 1px solid #eef0f3; border-radius: 10px; overflow: hidden;
}
.crawl-table thead th {
  text-align: left; padding: 10px 12px; font-weight: 600;
  font-size: 13px; color: #6b7280; background: #f8f9fb;
  border-bottom: 1px solid #eef0f3;
}
.crawl-table tbody td { padding: 9px 12px; border-bottom: 1px solid #f3f4f6; color: #1f2937; }
.crawl-table tbody tr:last-child td { border-bottom: none; }
.crawl-td-num { color: #9ca3af; }
.crawl-reason-tag {
  display: inline-block; background: #fef3e2; color: #92591a;
  border-radius: 6px; padding: 2px 8px; font-size: 12px; white-space: nowrap;
}
.crawl-empty { padding: 40px 20px; text-align: center; }
.crawl-empty-title { font-size: 16px; font-weight: 600; color: #374151; margin: 0 0 8px; }
.crawl-empty-sub { font-size: 14px; color: #9ca3af; margin: 0; }

/* ============================================================
   성능지 외판/주요골격 부위명 표 (2026-06 추가)
   오토핸즈 '외판 표시'/'주요골격 표시' 형식 — 2열 부위명+상태
   ============================================================ */
.ins-ptbl-tit {
  margin: 14px 2px 6px !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--color-text, #222) !important;
}
.ins-ptbl { width: 100% !important; border-collapse: collapse !important; }
.ins-ptbl td { padding: 7px 8px !important; font-size: 13px !important; border-top: 1px solid #eee !important; }
.ins-ptbl .ins-pl { color: #666 !important; }
.ins-ptbl .ins-pv { text-align: right !important; }
.ins-ptbl td:nth-child(3) { border-left: 1px solid #eee !important; }

/* 성능지 도면 마커 색상 — title 속성으로 상태 구분 (인라인 background 보강) */
.ins-mark[title*="판금"] { background: #185fa5 !important; } /* W 판금/용접 = 파랑 */
.ins-mark[title*="부식"] { background: #ba7517 !important; } /* C 부식 = 주황 */
.ins-mark[title*="흠집"] { background: #3b6d11 !important; } /* A 흠집 = 초록 */
.ins-mark[title*="요철"] { background: #534ab7 !important; } /* U 요철 = 보라 */
.ins-mark[title*="손상"] { background: #0f6e56 !important; } /* T 손상 = 청록 */
.ins-mark[title*="구멍"] { background: #5f5e5a !important; } /* H 구멍 = 회색 */

/* ===== 사고제외 기능 (보류함 사고제외) ===== */
/* 승인대기 차량의 [사고제외] 버튼 — 진한 빨강(보류 ✕와 구분) */
.admin-action-btn--accident {
  color: #9a2418;
}
.admin-action-btn--accident:hover {
  background: #fae4df;
  border-color: #e8a08c;
  color: #7a1c12;
}
/* 보류함 목록의 사고제외 배지 */
.hold-pill--accident { background: #FAECE7; color: #993C1D; }

/* ============================================================ */
/* 영업비 조정 펼침 패널 (v11 설계 — 금액 다이얼 + 슬라이더)        */
/* 차량 행 아래에 펼쳐지는 패널                                    */
/* ============================================================ */
.admin-comm-panel-row > td { padding: 0 !important; background: #fbfaf7; border-bottom: 1px solid #e6e4dc; }
.comm-panel { padding: 18px 20px; }
.comm-panel__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.comm-panel__title { font-size: 15px; font-weight: 700; color: #185fa5; }
.comm-flow { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.comm-flow__row { color: #555; }
.comm-flow__lbl { color: #999690; }
.comm-flow__date { color: #b4b2a9; font-size: 11px; }
.comm-flow__strike { text-decoration: line-through; color: #b4b2a9; }
.comm-flow__down { color: #9a6a0e; font-weight: 700; }
.comm-flow__same { color: #b4b2a9; }

.comm-dial { text-align: center; margin: 6px 0 4px; }
.comm-dial__val { font-size: 34px; font-weight: 800; color: #185fa5; line-height: 1.1; }
.comm-dial__val.is-hold { color: #a32d2d; }
.comm-dial__sub { font-size: 12px; color: #777570; margin-top: 3px; min-height: 16px; }

.comm-slider-block { margin: 12px 0 14px; }
.comm-caption { font-size: 12px; color: #777570; margin-bottom: 10px; }
.comm-caption b { color: #9a6a0e; }
.comm-caption--warn { color: #a32d2d; }
.comm-range { width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: linear-gradient(to right,#185fa5 0%,#185fa5 var(--p,0%),#dce6f1 var(--p,0%),#dce6f1 100%); outline: none; }
.comm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #185fa5; cursor: pointer; border: 4px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.comm-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #185fa5; cursor: pointer; border: 4px solid #fff; }
.comm-slider-ends { display: flex; justify-content: space-between; margin-top: 8px; }
.comm-end { font-size: 12px; }
.comm-end__amt { font-weight: 600; color: #555; }
.comm-end__base { color: #b4b2a9; font-size: 10px; }
.comm-end--right { text-align: right; }

.comm-adj-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comm-adj-label { font-size: 11px; color: #777570; white-space: nowrap; }
.comm-manual-input { flex: 1; min-width: 140px; font-size: 14px; padding: 9px 12px; border: 1px solid #b5d4f4; border-radius: 8px; outline: none; }
.comm-manual-input:focus { border-color: #185fa5; }
.comm-btn { font-size: 13px; padding: 9px 16px; border-radius: 8px; cursor: pointer; border: 1px solid #b5d4f4; }
.comm-btn--reset { background: #fff; color: #185fa5; }
.comm-btn--reset:hover { background: #eaf2fb; }
.comm-btn--save { background: #185fa5; color: #fff; border-color: #185fa5; font-weight: 600; }
.comm-btn--save:hover { background: #14507f; }
.comm-btn--save:disabled { opacity: .6; cursor: default; }
.comm-hint { font-size: 11px; color: #1d9e75; margin-top: 8px; }

/* ============================================================ */
/* 차량 칸 v11 정리 (방법1) — 차량번호 위로 / 등록일 사진아래 / 가격흐름 */
/* ============================================================ */
/* 사진 + 등록일 묶음 */
.admin-car-cell__photo-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.admin-car-cell__regdate { font-size: 10px; color: #999690; margin-top: 3px; white-space: nowrap; }
/* 차량번호 (차종명 위, 파란 강조) */
.admin-car-cell__plate-top { font-size: 12px; font-weight: 600; color: #185fa5; letter-spacing: .3px; margin-bottom: 1px; }
/* 가격흐름 줄 (처음/최신 2줄) */
.admin-car-cell__pricing--flow { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-size: 12px; }
.pricing-flow__line { color: #555; line-height: 1.4; }
.pricing-flow__lbl { color: #999690; }
.pricing-flow__date { color: #b4b2a9; font-size: 11px; }
.pricing-flow__strike { text-decoration: line-through; color: #b4b2a9; }
.pricing-flow__down { color: #9a6a0e; font-weight: 700; }
.pricing-flow__same { color: #b4b2a9; }
/* 견적 유효기간 배지 */
.pricing-valid { font-size: 10px; padding: 1px 6px; border-radius: 9px; font-weight: 600; margin-left: 3px; }
.pricing-valid--ok { background: #e1f5ee; color: #0f6e56; }
.pricing-valid--warn { background: #faf0db; color: #9a6a0e; }
.pricing-valid--expired { background: #fceaea; color: #a32d2d; }

/* ============================================================ */
/* 차량 관리 상단 KPI 카드 (v86 — 방향1)                          */
/* ============================================================ */
.car-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; margin-bottom: 16px; }
.car-kpi { background: #fff; border: 1px solid #e6e4dc; border-radius: 10px; padding: 12px 14px; }
.car-kpi[data-kpi-jump] { cursor: pointer; transition: box-shadow .15s; }
.car-kpi[data-kpi-jump]:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.car-kpi__label { font-size: 12px; color: #6a6862; margin-bottom: 5px; }
.car-kpi__value { font-size: 22px; font-weight: 700; line-height: 1.1; color: #2c2c2a; }
.car-kpi--warn { border-color: #e0a93a; }
.car-kpi--warn .car-kpi__label, .car-kpi--warn .car-kpi__value { color: #9a6a0e; }
.car-kpi--danger { border-color: #d68a82; }
.car-kpi--danger .car-kpi__label, .car-kpi--danger .car-kpi__value { color: #a32d2d; }

/* ============================================================ */
/* 차량 관리 카드형 리스트 (v88 — 방법2: 테이블→카드 전환)         */
/* ============================================================ */
.admin-cardlist { margin-top: 4px; }
.admin-cardlist__head { padding: 6px 4px 10px; }
.admin-cardlist__selectall { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6a6862; cursor: pointer; }
.admin-cardlist__body { display: flex; flex-direction: column; gap: 8px; }

/* 카드 한 장 */
.admin-card { background: #fff; border: 1px solid #e6e4dc; border-radius: 10px; transition: box-shadow .15s, border-color .15s; }
.admin-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.admin-card--muted { opacity: .68; }
.admin-card--selected { border-color: #185fa5; box-shadow: 0 0 0 1px #185fa5 inset; }
.admin-card--open { border-color: #185fa5; }

.admin-card__main { display: grid; grid-template-columns: auto minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; }
.admin-card__check { display: flex; align-items: center; }
.admin-card__vehicle { min-width: 0; cursor: pointer; }
/* 차량번호 줄 인라인 메타 (인수형·조회) */
.admin-car-cell__inline-meta { font-size: 11px; font-weight: 400; color: #999690; }
/* 메타 줄 검사 */
.admin-car-cell__insp { font-weight: 600; }
.admin-car-cell__insp.inspection-cell--expired { color: #a32d2d; }
.admin-car-cell__insp.inspection-cell--urgent { color: #c2410c; }
.admin-car-cell__insp.inspection-cell--warning { color: #9a6a0e; }
/* 가운데 가격흐름 구역 — 왼쪽 정렬, 아담하게 */
.admin-card__pricing { min-width: 0; padding-left: 14px; border-left: 1px solid #f0eee7; text-align: left; }
.admin-card__pricing .admin-car-cell__pricing--flow { margin-top: 0; font-size: 13px; align-items: flex-start; }
.admin-card__pricing .admin-car-cell__pricing { background: transparent; border: none; padding: 0; margin-top: 0; }
.admin-card__pricing-empty { color: #c5c3bb; font-size: 13px; }
/* 영업비 요약 구역 (항상 보임) */
.admin-card__comm { min-width: 0; padding-left: 14px; border-left: 1px solid #f0eee7; }
.comm-summary { font-size: 13px; }
.comm-summary__arrow { color: #c5c3bb; }
.comm-summary__label { font-weight: 600; color: #555; }
.comm-summary--set .comm-summary__label { color: #185fa5; }
.comm-summary--set .comm-summary__label b { font-size: 16px; }
.comm-summary--hold .comm-summary__label, .comm-summary--none .comm-summary__label { color: #a32d2d; }
.comm-summary__sub { font-size: 11px; color: #999690; margin-top: 2px; }
.comm-summary--hold .comm-summary__sub { color: #a32d2d; }

/* 우측 사이드 (메타/요금/공개/관리) */
.admin-card__side { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.admin-card__sidecol { display: flex; flex-direction: column; }
.admin-card__sidecol--meta { gap: 3px; min-width: 110px; }
.admin-card__metaitem { font-size: 12px; color: #555; display: flex; align-items: center; gap: 5px; }
.admin-card__metalbl { color: #999690; font-size: 11px; }
.admin-card__sidecol--fee { min-width: 120px; }
.admin-card__sidecol--toggle { align-items: center; }
.admin-card__sidecol--action { }
.admin-actions--card { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 200px; }

/* 영업비 펼침 패널 (카드 안) */
.admin-card__panel { border-top: 1px solid #eee9df; background: #fbfaf7; border-radius: 0 0 10px 10px; }
.admin-card__panel .comm-panel { padding: 16px 18px; }

/* 반응형: 좁으면 세로 적층 */
@media (max-width: 1240px) {
  .admin-card__main { grid-template-columns: auto 1fr; }
  .admin-card__pricing { grid-column: 1 / -1; padding-left: 0; border-left: none; padding-top: 8px; margin-top: 6px; border-top: 1px dashed #f0eee7; }
  .admin-card__comm { grid-column: 1 / -1; padding-left: 0; border-left: none; padding-top: 6px; }
  .admin-card__side { grid-column: 1 / -1; flex-wrap: wrap; gap: 12px; padding-top: 10px; margin-top: 6px; border-top: 1px dashed #f0eee7; justify-content: space-between; }
}

/* ============================================================ */
/* 카드형 차량정보 조정 (v89c) — 차종명 작게+줄바꿈 허용, maker/수집 삭제됨 */
/* ============================================================ */
.admin-card__vehicle .admin-car-cell__name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: normal;       /* 줄바꿈 허용 — 잘리지 않음 */
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  line-height: 1.35;
}
/* 차량번호(위)와 차종명 간격 살짝 */
.admin-card__vehicle .admin-car-cell__plate-top { margin-bottom: 2px; }

/* ============================================================ */
/* 영업비 패널 v91 — 제목→캡션, 슬라이더 금액 눈금                 */
/* ============================================================ */
.comm-panel__caption { font-size: 13px; color: #555; margin-bottom: 8px; }
.comm-panel__caption b { color: #9a6a0e; }
/* 슬라이더 금액 눈금 */
.comm-ticks { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 2px; }
.comm-tick { display: flex; flex-direction: column; align-items: center; flex: 1; }
.comm-tick:first-child { align-items: flex-start; }
.comm-tick:last-child { align-items: flex-end; }
.comm-tick__mark { width: 1px; height: 6px; background: #d6d3ca; margin-bottom: 3px; }
.comm-tick__amt { font-size: 10.5px; color: #999690; }
/* 손잡이 위치 강조용: 가운데 눈금은 중앙정렬 유지 */
.comm-tick:not(:first-child):not(:last-child) .comm-tick__mark { align-self: center; }

/* ============================================================ */
/* 차량 관리 상단 v92 — 목업 스타일 (탭 슬림, 검색 넓게, 결과 슬림) */
/* ============================================================ */
/* 리스유형 탭 — 작고 납작하게, 선택 시 파란 배경 */
.admin-sub-tabs .admin-sub-tab {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
}
.admin-sub-tabs .admin-sub-tab.is-active {
  background: #e8f0fb;
  color: #185fa5;
  border-color: #c5ddf7;
  font-weight: 600;
}
.admin-sub-tabs .admin-sub-tab.is-active .admin-sub-tab__count {
  background: #c5ddf7;
  color: #185fa5;
}
.admin-sub-tabs .admin-sub-tab--pending.is-active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.admin-sub-tabs .admin-sub-tab--pending.is-active .admin-sub-tab__count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.admin-sub-tabs .admin-sub-tab__count {
  font-size: 12px;
  opacity: 1;
  margin-left: 2px;
}
/* 검색창 넓게 한 줄 + 제조사·정렬 우측 */
.admin-quick-bar .admin-search-inline {
  flex: 1 1 auto;
  min-width: 240px;
}
.admin-quick-bar .admin-sort-inline {
  flex: 0 0 auto;
}
/* 결과 표시줄 슬림 (박스 제거, 작은 텍스트) */
.admin-result-bar--slim {
  background: transparent;
  border: none;
  padding: 4px 2px;
}
.admin-result-bar--slim .admin-result-bar__count {
  font-size: 12.5px;
  color: #999690;
}
.admin-result-bar--slim .admin-result-bar__count strong {
  color: #555;
}

/* ============================================================ */
/* v93 — 삭제 버튼 분리 (실수 방지), 변동없음 줄 정렬             */
/* ============================================================ */
/* 영업비·견적과 삭제 사이 구분선 */
.admin-actions--card .admin-actions__divider {
  width: 1px;
  align-self: stretch;
  background: #e6e4dc;
  margin: 0 4px;
}
/* 삭제 버튼 — 약하게 분리(평소 눈에 덜 띄게), hover 시만 빨강 강조 */
.admin-action-btn--delete-sep {
  opacity: .6;
}
.admin-action-btn--delete-sep:hover {
  opacity: 1;
  background: #fceaea;
  border-color: #e0bcbc;
}
/* 변동 없음 줄 — 처음 줄 아래 회색 작게 */
.admin-car-cell__pricing--flow .pricing-flow__same {
  color: #b4b2a9;
  font-size: 11px;
}
.comm-flow .comm-flow__same {
  color: #b4b2a9;
  font-size: 11px;
}

/* v95 — 판매됨 차 버튼 자리 표시 */
.admin-actions__sold-note {
  font-size: 12px;
  color: #999690;
  padding: 4px 8px;
  background: #f3f1ea;
  border-radius: 6px;
  white-space: nowrap;
}

/* v96 — 보증금 cell에 정확한 원 금액 표시 (만원 + 정확히 N원 2단) */
.hero-price__cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.hero-price__cell-exact {
  font-size: 11px;
  color: #9b9fa8;
  margin-top: 3px;
  white-space: nowrap;
}

/* ★ NEW: 손님 페이지 통합 검색창 (모델명 + 차량번호) */
.filter-section--search {
  padding-top: 4px;
}
.car-search {
  position: relative;
  display: flex;
  align-items: center;
}
.car-search__icon {
  position: absolute;
  left: 14px;
  color: var(--color-ink-muted);
  pointer-events: none;
}
.car-search__input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 42px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.car-search__input::placeholder {
  color: var(--color-ink-muted);
}
.car-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.car-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.car-search__clear {
  position: absolute;
  right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--color-ink-muted);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.car-search__clear:hover {
  background: var(--color-border);
  color: var(--color-ink);
}

/* ★ NEW: 더보기 버튼 */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
}
.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.load-more-btn:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}
.load-more-btn__rest {
  color: var(--color-ink-muted);
  font-weight: 400;
  font-size: 14px;
}