/* -------------------------------------------------------------------------- */
/* REAL META | GLOBAL B2B USED CAR EXPORT REVERSE AUCTION PLATFORM           */
/* HeyDealer Official Clean White UX + Precision B2B Global Fintech Engine   */
/* -------------------------------------------------------------------------- */

:root {
  /* HeyDealer Clean White Surface System */
  --hd-bg-body: #FFFFFF;
  --hd-bg-subtle: #F8FAFC;
  --hd-bg-card: #FFFFFF;
  --hd-bg-tag: #F1F5F9;
  --hd-border-light: #E2E8F0;
  --hd-border-medium: #CBD5E1;
  --hd-border-dark: #0F172A;

  /* Typography Colors */
  --hd-text-black: #0F172A;
  --hd-text-main: #1E293B;
  --hd-text-secondary: #475569;
  --hd-text-muted: #94A3B8;

  /* HeyDealer Brand Accents */
  --hd-blue-primary: #2563EB;
  --hd-blue-hover: #1D4ED8;
  --hd-blue-light: #EFF6FF;
  --hd-emerald-pure: #10B981;
  --hd-amber-pure: #F59E0B;
  --hd-crimson-pure: #EF4444;

  /* Legacy Compatibility */
  --bg-core: #070B14;
  --bg-surface-primary: #0F172A;
  --bg-surface-secondary: #162036;
  --bg-surface-elevated: #1E2942;
  --bg-surface-input: #0B1120;
  --bg-surface-card: #0E1628;

  /* Global Fintech Brand Accents */
  --brand-blue: #3B82F6;
  --brand-blue-hover: #2563EB;
  --brand-blue-glow: rgba(59, 130, 246, 0.35);
  --brand-blue-tint: rgba(59, 130, 246, 0.12);
  --brand-blue-border: rgba(59, 130, 246, 0.28);
  --brand-cyan: #06B6D4;
  --brand-cyan-glow: rgba(6, 182, 212, 0.3);

  /* HeyDealer Trust Emerald Accents (무사고 진단) */
  --emerald-pure: #10B981;
  --emerald-light: #34D399;
  --emerald-dark: #059669;
  --emerald-glow: rgba(16, 185, 129, 0.28);
  --emerald-tint: rgba(16, 185, 129, 0.12);
  --emerald-border: rgba(16, 185, 129, 0.35);

  /* Auction Heat & Urgency Accents */
  --urgency-amber: #F59E0B;
  --urgency-amber-glow: rgba(245, 158, 11, 0.25);
  --urgency-amber-tint: rgba(245, 158, 11, 0.12);
  --urgency-crimson: #EF4444;
  --urgency-crimson-light: #F87171;
  --urgency-crimson-glow: rgba(239, 68, 68, 0.35);
  --urgency-crimson-tint: rgba(239, 68, 68, 0.15);
  --purple-accent: #8B5CF6;
  --purple-tint: rgba(139, 92, 246, 0.15);

  /* Typography Colors */
  --text-pure: #FFFFFF;
  --text-main: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-dark: #0F172A;

  /* Borders & Glassmorphism */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-light: rgba(255, 255, 255, 0.09);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-focus: rgba(59, 130, 246, 0.65);
  --glass-bg: rgba(15, 23, 42, 0.85);
  --glass-blur: blur(14px);

  /* Shadows */
  --shadow-subtle: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 24px 52px rgba(0, 0, 0, 0.7);
  --shadow-glow-blue: 0 0 26px var(--brand-blue-glow);
  --shadow-glow-emerald: 0 0 22px var(--emerald-glow);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Typography */
  --font-family-base: 'Pretendard', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, Menlo, Consolas, monospace;

  /* Motion & Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.16s var(--ease-out);
  --transition-normal: 0.26s var(--ease-out);
  --transition-smooth: 0.45s var(--ease-out);
}

/* -------------------------------------------------------------------------- */
/* GLOBAL RESET & BASE RULES                                                  */
/* -------------------------------------------------------------------------- */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background-color: var(--bg-core);
  color: var(--text-main);
  font-family: var(--font-family-base);
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

img, svg {
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-pure);
  background-color: var(--bg-surface-input);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}

/* Custom Scrollbar (Modern Sleek Pill Style) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.48);
  border-radius: var(--radius-pill);
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.82);
}

/* Utility Helpers */
.text-pure { color: var(--text-pure) !important; }
.text-emerald { color: var(--emerald-light) !important; }
.text-amber { color: var(--urgency-amber) !important; }
.text-crimson { color: var(--urgency-crimson-light) !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.mt-16 { margin-top: 16px !important; }

/* -------------------------------------------------------------------------- */
/* TOP LIVE TICKER & FX BAR                                                   */
/* -------------------------------------------------------------------------- */

.top-ticker-bar {
  background: #090E1A;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  position: relative;
  z-index: 50;
}

.ticker-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fx-pill {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: var(--emerald-pure);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px var(--emerald-pure);
  animation: pulse-dot 1.8s infinite ease-in-out;
}

@keyframes pulse-dot {
  0% { transform: scale(0.92); opacity: 0.75; }
  50% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0.75; }
}

.ticker-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--brand-cyan);
}

.ticker-value {
  color: var(--text-pure);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticker-delta.positive {
  color: var(--emerald-light);
  font-weight: 700;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.currency-switch, .lang-switch {
  display: inline-flex;
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 2px;
}

.lang-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}

.lang-btn.active {
  background: var(--brand-blue);
  color: var(--text-pure);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.45);
}

.lang-btn:hover:not(.active) {
  color: var(--text-main);
}

/* -------------------------------------------------------------------------- */
/* PRIMARY APP HEADER                                                         */
/* -------------------------------------------------------------------------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition-normal);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-mark {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, #1D4ED8 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: var(--shadow-glow-blue);
  transition: transform var(--transition-fast);
}

.brand-logo:hover .logo-mark {
  transform: rotate(6deg) scale(1.05);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-pure);
}

.brand-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--emerald-light);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  position: relative;
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.04);
}

.nav-link.active {
  color: var(--text-pure);
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
}

.nav-pulse {
  width: 6px;
  height: 6px;
  background: var(--emerald-pure);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--emerald-pure);
}

.header-cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.buyer-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}

.flag-icon-buyer {
  font-size: 1.1rem;
}

.buyer-profile-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-pure);
}

/* Button Component Hierarchy */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8125rem;
  border-radius: var(--radius-xs);
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1.0625rem;
  border-radius: var(--radius-md);
}

.btn-ghost {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-medium);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-pure);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
  color: var(--text-pure);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.58);
}

/* -------------------------------------------------------------------------- */
/* HEYDEALER OFFICIAL HOME PAGE (INDEX.HTML) STYLES                           */
/* -------------------------------------------------------------------------- */

.hd-home-body {
  background-color: var(--hd-bg-body);
  color: var(--hd-text-main);
  font-family: var(--font-family-base);
  min-height: 100vh;
}

/* 1. 최상단 블랙 마키 띠배너 */
.hd-top-black-strip {
  background-color: #03060C;
  color: #FFFFFF;
  height: 38px;
  overflow: hidden;
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
}

.hd-marquee-track {
  display: flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: hd-marquee 28s linear infinite;
}

.hd-strip-item {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94A3B8;
  display: inline-flex;
  align-items: center;
}

.hd-strip-item.highlight {
  color: #FFFFFF;
  font-weight: 800;
}

@keyframes hd-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 2. GNB 헤더 */
.hd-main-gnb {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hd-border-light);
}

.hd-gnb-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hd-gnb-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.hd-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  text-decoration: none;
  flex-shrink: 0;
}

.hd-wm-text {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0F172A;
}

.hd-wm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--hd-blue-primary);
  display: inline-block;
}

.hd-gnb-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.hd-nav-tab {
  font-size: 0.95rem;
  font-weight: 700;
  color: #64748B;
  transition: color 0.16s ease;
  position: relative;
  white-space: nowrap !important;
  word-break: keep-all;
  flex-shrink: 0;
}

.hd-nav-tab:hover, .hd-nav-tab.active {
  color: #0F172A;
}

.hd-nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  height: 3px;
  background: #0F172A;
  border-radius: 2px;
}

.hd-gnb-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.hd-gnb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 9999px;
  padding: 7px 16px;
  width: 200px;
  min-width: 140px;
  transition: all 0.2s ease;
}

.hd-gnb-search:focus-within {
  border-color: var(--hd-blue-primary);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.hd-gnb-search input {
  background: none;
  border: none;
  font-size: 0.875rem;
  color: #0F172A;
  width: 100%;
  outline: none;
}

.hd-gnb-user-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 단일 클릭 원클릭 토글 버튼 스타일 (초경량 캡슐) */
.hd-single-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: 0.78125rem;
  font-weight: 800;
  color: #0F172A;
  background: #F1F5F9;
  border: 1px solid var(--hd-border-light);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
  user-select: none;
}

.hd-single-toggle-btn:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

.hd-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
}

.hd-quick-link:hover {
  color: #0F172A;
}

/* 3. 헤이딜러 메인 레이아웃 컨테이너 */
.hd-home-main {
  padding: 24px 0 80px;
}

.hd-page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 3-1. 히어로 검색 및 신뢰 센터 블록 */
.hd-hero-search-block {
  margin-bottom: 40px;
}

.hd-hero-top-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.hd-hero-main-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.75rem;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 18px;
  text-decoration: none;
  letter-spacing: -0.03em;
}

.hd-hero-main-heading:hover {
  color: var(--hd-blue-primary);
}

/* 3단 셀렉터 바 */
.hd-hero-filter-bar {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 140px;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 20px;
}

.filter-select-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--hd-border-light);
  border-radius: 8px;
  padding: 0 14px;
  height: 48px;
}

.filter-select-box select {
  width: 100%;
  border: none;
  background: none;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0F172A;
  outline: none;
  cursor: pointer;
}

.btn-hd-view-cars {
  background-color: var(--hd-blue-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.16s ease;
}

.btn-hd-view-cars:hover {
  background-color: var(--hd-blue-hover);
}

/* 인기 검색어 2열 그리드 */
.hd-trending-keywords-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.trending-title-tag {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #94A3B8;
  margin-top: 4px;
  white-space: nowrap;
}

.trending-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
  flex-grow: 1;
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  cursor: pointer;
}

.rank-item:hover .r-text {
  color: var(--hd-blue-primary);
  text-decoration: underline;
}

.r-num {
  font-weight: 900;
  color: #0F172A;
  width: 14px;
}

.r-text {
  font-weight: 700;
  color: #334155;
}

.r-mark {
  font-size: 0.6875rem;
  font-weight: 800;
  margin-left: auto;
}

.r-mark.up { color: #EF4444; }
.r-mark.down { color: var(--hd-blue-primary); }
.r-mark.neutral { color: #94A3B8; }

/* 8개 원형 카테고리 퀵메뉴 */
.hd-icon-categories-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0;
}

.cat-circle-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.circle-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}

.cat-circle-btn:hover .circle-icon-box {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.circle-icon-box.bg-dark {
  background-color: #0F172A;
  color: #FFFFFF;
}

.circle-icon-box.bg-blue {
  background-color: var(--hd-blue-primary);
  color: #FFFFFF;
}

.circle-icon-box.bg-slate {
  background-color: #F1F5F9;
  color: #0F172A;
}

.icon-tag {
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.icon-tag.sale {
  font-style: italic;
  font-size: 0.875rem;
}

.circle-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.cat-circle-btn.active .circle-label {
  color: var(--hd-blue-primary);
  font-weight: 900;
}

/* 3-2. 우측 턴테이블 배너 */
.hd-inspect-turntable-banner {
  background-color: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 280px;
  position: relative;
  overflow: hidden;
}

.inspect-banner-header strong {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.3;
  display: block;
}

.inspect-sub-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  margin-top: 6px;
  text-decoration: none;
}

.inspect-sub-link:hover {
  color: var(--hd-blue-primary);
}

.turntable-photo-stage {
  position: relative;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.car-on-turntable-render {
  width: 180px;
  height: 100px;
  background: radial-gradient(circle, #334155 0%, #0F172A 100%);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  z-index: 2;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-play-btn {
  width: 36px;
  height: 36px;
  background: rgba(220, 38, 38, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1rem;
  padding-left: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}

.hd-inspect-turntable-banner:hover .yt-play-btn {
  transform: scale(1.15);
  background: rgba(220, 38, 38, 1);
}

.turntable-base-ring {
  position: absolute;
  bottom: 10px;
  width: 220px;
  height: 24px;
  border: 2px solid #CBD5E1;
  border-radius: 50%;
  background: #E2E8F0;
  z-index: 1;
}

/* 4. 캐러셀 매물 섹션 공통 스타일 */
.hd-carousel-section {
  margin-bottom: 52px;
}

.hd-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.sec-title-lead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.sec-title-lead h2 {
  font-size: 1.375rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.sec-title-lead .arrow {
  font-size: 1.25rem;
  color: #94A3B8;
  font-weight: 700;
}

.carousel-nav-arrows {
  display: flex;
  align-items: center;
  gap: 6px;
}

.caro-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--hd-border-light);
  color: #334155;
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
}

.caro-btn:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

.hd-cards-carousel-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.hd-cards-carousel-container .hd-car-card {
  min-width: 195px;
  width: 195px;
  flex-shrink: 0;
}

/* 헤이딜러 스타일 개별 차량 카드 */
.hd-car-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.hd-car-card:hover {
  transform: translateY(-4px);
}

.card-thumb-wrap {
  position: relative;
  width: 100%;
  height: 130px;
  background: #F1F5F9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.card-img-render {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #1E293B;
  transition: transform 0.3s ease;
}

.hd-car-card:hover .card-img-render {
  transform: scale(1.05);
}

.card-heart-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  cursor: pointer;
  transition: color 0.15s ease;
  z-index: 5;
}

.card-heart-btn:hover, .card-heart-btn.active {
  color: #EF4444;
}

.card-car-name {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-trim-sub {
  font-size: 0.75rem;
  color: #64748B;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-spec-meta {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-bottom: 6px;
}

.card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
}

.orig-strike {
  font-size: 0.75rem;
  color: #94A3B8;
  text-decoration: line-through;
}

.final-price-bold {
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--hd-blue-primary);
  font-variant-numeric: tabular-nums;
}

/* 7. 인기 모델 랭킹 섹션 (1~10위) */
.hd-ranking-section {
  margin-bottom: 56px;
}

.hd-ranking-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.rank-tab-btn {
  padding: 8px 18px;
  border-radius: 9999px;
  background: #F1F5F9;
  border: 1px solid transparent;
  color: #64748B;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.rank-tab-btn.active {
  background: #0F172A;
  color: #FFFFFF;
}

.hd-popular-models-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.popular-model-card {
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.popular-model-card:hover {
  transform: translateY(-3px);
  border-color: #0F172A;
  background: #FFFFFF;
}

.model-rank-badge {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 1.125rem;
  font-weight: 900;
  color: #0F172A;
}

.model-thumb-frame {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.model-render-img {
  width: 130px;
  height: 70px;
  background: radial-gradient(circle, #334155 0%, #0F172A 100%);
  border-radius: 6px;
}

.model-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 2px;
}

.model-specs-sub {
  font-size: 0.75rem;
  color: #64748B;
  margin-bottom: 6px;
}

.model-count-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--hd-blue-primary);
}

/* 8. 타 본 사람들 이야기 (오너 리뷰 캐러셀) */
.hd-owner-stories-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.story-review-card {
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
}

.story-car-name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.story-quote {
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.story-author-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 600;
}

/* 9. 먼저 구매한 8,595명이 남긴 후기 */
.hd-reviews-feed-section {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  margin-bottom: 60px;
  padding-top: 20px;
}

.hd-reviews-header h2 {
  font-size: 1.625rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.35;
}

.hd-reviews-list-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hd-review-entry-card {
  border-bottom: 1px solid var(--hd-border-light);
  padding-bottom: 24px;
}

.rev-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.buyer-profile-tag {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-circle {
  font-size: 1.25rem;
}

.buyer-meta {
  display: flex;
  flex-direction: column;
}

.buyer-car {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
}

.buyer-location {
  font-size: 0.75rem;
  color: #64748B;
}

.rev-date-tag {
  font-size: 0.75rem;
  color: #94A3B8;
}

.rev-text-content {
  font-size: 0.84375rem;
  color: #334155;
  line-height: 1.65;
  margin-bottom: 14px;
}

.rev-photos-strip {
  display: flex;
  gap: 8px;
}

.rev-thumb-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: #E2E8F0;
  background-size: cover;
  background-position: center;
}

.rev-load-more-row {
  text-align: center;
  padding-top: 10px;
}

.btn-more-reviews {
  padding: 10px 28px;
  background: #F1F5F9;
  border: 1px solid var(--hd-border-light);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-more-reviews:hover {
  background: #0F172A;
  color: #FFFFFF;
}

/* 13. 중고차 구매 가이드 아티클 캐러셀 */
.hd-guide-section {
  margin-bottom: 56px;
}

.hd-guide-carousel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.guide-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.guide-card:hover {
  transform: translateY(-3px);
}

.guide-thumb {
  height: 120px;
  border-radius: 10px;
  background: radial-gradient(circle, #334155 0%, #0F172A 100%);
  margin-bottom: 8px;
}

.guide-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 14. hey care 안심 케어 배너 */
.hd-hey-care-banner {
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px;
}

.care-logo {
  font-size: 1.375rem;
  font-weight: 900;
  color: #0F172A;
  display: block;
  margin-bottom: 6px;
}

.care-lead {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.5;
}

.hey-care-actions {
  display: flex;
  align-items: center;
  gap: 48px;
}

.care-action-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.care-action-item.link {
  text-decoration: none;
}

.action-heading-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-heading {
  font-size: 1rem;
  font-weight: 900;
  color: #0F172A;
}

.care-action-item.link .action-heading {
  color: var(--hd-blue-primary);
}

.action-desc {
  font-size: 0.8125rem;
  color: #64748B;
}

/* 15. 헤이딜러 공식 푸터 */
.hd-official-footer {
  border-top: 1px solid var(--hd-border-light);
  padding: 48px 0 32px;
  background-color: #FFFFFF;
}

.hd-footer-inner-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.hd-footer-links-row {
  display: flex;
  gap: 64px;
  margin-bottom: 32px;
}

.group-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 12px;
  display: block;
}

.links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.links-list a {
  font-size: 0.8125rem;
  color: #64748B;
  text-decoration: none;
}

.links-list a:hover {
  color: #0F172A;
}

.hd-footer-biz-details {
  border-top: 1px solid #F1F5F9;
  padding-top: 24px;
  margin-bottom: 24px;
}

.biz-name {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #334155;
  display: block;
  margin-bottom: 6px;
}

.biz-info-line, .biz-legal-notice {
  font-size: 0.75rem;
  color: #94A3B8;
  line-height: 1.6;
}

.biz-legal-notice {
  margin-top: 6px;
}

.hd-footer-bottom-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}

.copyright-text {
  font-size: 0.75rem;
  color: #94A3B8;
}

.hd-sns-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sns-icon {
  font-size: 1rem;
  color: #64748B;
}

/* 상세페이지 인터랙티브 모달 전용 추가 스타일 */
.perf-diag-table th, .perf-diag-table td {
  padding: 8px 10px;
}
.underbody-gallery-grid .photo-cell:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}
.hidden-history-items-list .hist-metric-item:hover {
  background: #F1F5F9 !important;
}

/* -------------------------------------------------------------------------- */
/* REAL META BUY MARKETPLACE DEDICATED STYLES (buy.html)                      */
/* -------------------------------------------------------------------------- */

.hd-buy-page-body {
  background-color: #FFFFFF;
  color: #0F172A;
  min-height: 100vh;
  font-family: var(--font-family-base);
}

/* 1. 상단 블랙 마키 띠배너 */
.hd-buy-black-strip {
  background: #03060C;
  color: #FFFFFF;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 100;
}

.hd-buy-marquee-track {
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: hd-marquee 30s linear infinite;
  font-size: 0.8125rem;
}

.hd-buy-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94A3B8;
  font-weight: 500;
}

.hd-buy-marquee-item.brand-lead {
  color: #FFFFFF;
  font-weight: 800;
}

.hd-buy-marquee-item.brand-lead span {
  color: #38BDF8;
}

.hd-buy-marquee-item .blue-tag {
  color: #38BDF8;
  font-weight: 800;
}

/* 2. 내차사기 3단 레이아웃 */
.hd-buy-main-layout {
  padding: 24px 0 80px;
}

.hd-buy-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 240px 1fr 70px;
  gap: 28px;
  align-items: start;
}

/* 2-1. 좌측 사이드바 */
.hd-buy-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.buy-warranty-card-black {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.buy-warranty-card-black:hover {
  transform: translateY(-2px);
}

.b-card-text strong {
  font-size: 0.9375rem;
  font-weight: 900;
  display: block;
  line-height: 1.25;
}

.b-card-text span {
  font-size: 0.8125rem;
  color: #94A3B8;
}

.b-card-thumb-mock {
  width: 44px;
  height: 58px;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 800;
  color: #38BDF8;
  text-align: center;
  padding: 4px;
  line-height: 1.1;
}

.sidebar-filter-section {
  display: flex;
  flex-direction: column;
}

.sidebar-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}

.filter-head-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
}

.filter-exclude-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #64748B;
  cursor: pointer;
}

.toggle-switch-ui {
  position: relative;
  width: 32px;
  height: 18px;
  background: #CBD5E1;
  border-radius: 9999px;
  transition: background 0.2s ease;
}

.filter-exclude-toggle input {
  display: none;
}

.filter-exclude-toggle input:checked + .toggle-switch-ui {
  background: #0055FE;
}

.toggle-switch-ui::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.filter-exclude-toggle input:checked + .toggle-switch-ui::after {
  transform: translateX(14px);
}

.sidebar-brands-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-list-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.brand-list-btn:hover {
  background: #F8FAFC;
  color: #0F172A;
}

.brand-list-btn.active {
  background: #EFF6FF;
  color: #0055FE;
  font-weight: 800;
}

.brand-left-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo-ico {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #64748B;
}

.brand-count-num {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0055FE;
}

.brand-count-num.zero {
  color: #CBD5E1;
}

/* 2-2. 중앙 메인 콘텐츠 */
.hd-buy-center-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 가로 필터 칩 바 */
.buy-filter-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
  scrollbar-width: none;
}

.buy-filter-chips-row::-webkit-scrollbar {
  display: none;
}

.btn-filter-master {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-filter-master:hover {
  border-color: #0F172A;
}

.filter-bar-divider {
  width: 1px;
  height: 18px;
  background: #E2E8F0;
  flex-shrink: 0;
  margin: 0 4px;
}

.chip-filter-btn {
  padding: 7px 13px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.16s ease;
}

.chip-filter-btn:hover {
  border-color: #94A3B8;
  color: #0F172A;
}

.chip-filter-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

/* 리스트 상단 툴바 */
.buy-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.buy-total-count {
  font-size: 1.125rem;
  font-weight: 900;
  color: #0F172A;
}

.buy-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sort-select-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84375rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
}

.sort-select-wrap select {
  border: none;
  background: none;
  font-size: 0.84375rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  outline: none;
}

.view-mode-toggle-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-view-mode {
  padding: 4px;
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
}

.btn-view-mode.active, .btn-view-mode:hover {
  color: #0F172A;
}

/* 듀얼 썸네일 수평 차량 리스트 */
.buy-vehicles-list-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.buy-car-card {
  display: grid;
  grid-template-columns: 340px 1fr 140px;
  gap: 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.buy-car-card:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

/* 좌측 듀얼 썸네일 */
.dual-thumb-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 125px;
  border-radius: 8px;
  overflow: hidden;
  background: #F1F5F9;
}

.thumb-pane {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1E293B;
}

.thumb-pane.ext-side {
  background-color: #334155;
}

.thumb-pane.int-side {
  background-color: #1E293B;
}

/* 중앙 차량 스펙 정보 */
.card-info-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.car-main-model {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #0F172A;
}

.title-arrow-ico {
  font-size: 1rem;
  color: #94A3B8;
  font-weight: 700;
}

.car-trim-subline {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 2px;
}

.car-specs-subline {
  font-size: 0.8125rem;
  color: #64748B;
  margin-bottom: 6px;
}

.car-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #475569;
}

.tag-badge.accident-free {
  background: #EFF6FF;
  color: #0055FE;
  font-weight: 800;
}

.tag-badge.battery-ok {
  background: #ECFDF5;
  color: #059669;
  font-weight: 800;
}

/* 우측 가격 및 찜 컬럼 */
.card-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  padding: 4px 0;
}

.btn-card-heart-round {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.16s ease, color 0.16s ease;
}

.btn-card-heart-round:hover, .btn-card-heart-round.active {
  color: #EF4444;
  transform: scale(1.1);
}

.price-box-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.discount-drop-pill {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #0055FE;
  margin-bottom: 2px;
}

.price-strike-row {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-bottom: 2px;
}

.final-price-bold-big {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.orig-new-price {
  font-size: 0.6875rem;
  color: #94A3B8;
  margin-top: 2px;
}

/* 2-3. 우측 플로팅 사이드바 */
.hd-buy-floating-aside {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.floating-action-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #0F172A;
}

.floating-action-pill .ico-heart {
  font-size: 1.2rem;
  color: #0F172A;
}

.floating-action-pill .lbl-text {
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.floating-recent-thumb-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1E293B;
  background-size: cover;
  background-position: center;
  border: 2px solid #E2E8F0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 2px;
}

/* 플로팅 1:1 상담 캡슐 */
.buy-chat-floating-capsule {
  position: fixed;
  bottom: 32px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid var(--hd-border-light);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.16s ease;
}

.buy-chat-floating-capsule:hover {
  transform: translateY(-2px);
}

/* 반응형 처리 */
@media (max-width: 1100px) {
  .hd-buy-container {
    grid-template-columns: 220px 1fr;
  }
  .hd-buy-floating-aside {
    display: none;
  }
}

@media (max-width: 768px) {
  .hd-buy-container {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .hd-buy-sidebar {
    display: none; /* 모바일에서는 상단 가로 칩으로 간소화 */
  }
  .buy-car-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dual-thumb-wrapper {
    height: 140px;
  }
  .card-price-col {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid #F1F5F9;
    padding-top: 10px;
    margin-top: 4px;
  }
  .price-box-bottom {
    align-items: flex-start;
  }
  .final-price-bold-big {
    font-size: 1.125rem;
  }
}

/* 플로팅 툴 */
.hd-floating-side-tools {
  position: fixed;
  bottom: 32px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.btn-float-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--hd-border-light);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s ease;
}

.btn-float-top:hover {
  transform: translateY(-2px);
}

.btn-float-chat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid var(--hd-border-light);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.16s ease;
}

.btn-float-chat:hover {
  transform: translateY(-2px);
}

.chat-agent-avatar {
  font-size: 1.25rem;
}

.chat-text {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
}

/* -------------------------------------------------------------------------- */
/* HEYDEALER MOBILE 1:1 ACCURATE STYLES (SCREENSHOT REPLICATION)              */
/* -------------------------------------------------------------------------- */

/* Top Mobile App Smart Banner (Hidden on desktop by default) */
.hd-app-banner-strip {
  display: none;
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
  height: 56px;
  padding: 0 16px;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 105;
}

.btn-close-app-banner {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 1rem;
  padding: 4px;
  cursor: pointer;
}

.app-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0055FE;
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}

.app-banner-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  flex-grow: 1;
}

.app-banner-text span {
  font-size: 0.75rem;
  color: #475569;
}

.app-banner-text strong {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
}

.btn-app-open {
  background-color: #0055FE;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}

/* Mobile Search Capsule & Hamburger Button */
.hd-mobile-search-capsule {
  display: none;
  background: #F1F5F9;
  border-radius: 9999px;
  height: 46px;
  padding: 0 16px;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.hd-mobile-search-capsule input {
  background: none;
  border: none;
  font-size: 0.9375rem;
  color: #0F172A;
  width: 100%;
  outline: none;
}

.hd-mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.mobile-title-text {
  display: none;
}

/* Certified Video Banner Section */
.hd-certified-video-section {
  margin-bottom: 44px;
}

@media (max-width: 768px) {
  .hd-video-stage-card {
    height: 220px !important;
  }
}

.sec-video-heading {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0F172A;
}

.hd-video-stage-card {
  position: relative;
  height: 500px;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  background-image: radial-gradient(circle at 60% 40%, #334155 0%, #0F172A 100%);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}

.video-overlay-header {
  display: flex;
  align-items: flex-start;
}

.video-hey-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.video-hey-badge .v-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0055FE;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-hey-badge .v-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.video-hey-badge .v-text strong {
  font-size: 0.875rem;
  font-weight: 800;
  color: #FFFFFF;
}

.video-hey-badge .v-text span {
  font-size: 0.6875rem;
  color: #94A3B8;
}

.video-play-center-btn {
  align-self: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-play-center-btn:hover {
  transform: scale(1.08);
}

.video-bottom-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #FFFFFF;
}

.video-action-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-v-tool {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #FFFFFF;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.youtube-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Icon Categories Specials */
.circle-icon-box.bg-top50 {
  background: #0055FE;
  color: #FFFFFF;
}

.circle-icon-box.bg-transparent {
  background: transparent;
  border: 1px solid #E2E8F0;
}

.icon-tag.sale-cursive {
  font-size: 1.125rem;
  font-weight: 900;
  font-style: italic;
  color: #0055FE;
}

.icon-tag.for-you {
  font-size: 0.6875rem;
  font-weight: 900;
  line-height: 1.1;
}

.circle-icon-box.bg-red {
  background: #EF4444;
  color: #FFFFFF;
}

.icon-tag.new-badge {
  font-size: 0.75rem;
  font-weight: 900;
}

.circle-photo-thumb.key-thumb {
  background: radial-gradient(circle at center, #475569 0%, #1E293B 100%);
}

/* Mobile Bottom Fixed Nav Bar */
.hd-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1000;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.m-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #94A3B8;
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  flex: 1;
}

.m-nav-item.active {
  color: #0F172A;
  font-weight: 900;
}

/* Footer Accordion & Details */
.hd-footer-company-toggle {
  margin-bottom: 12px;
}

.btn-company-accordion {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #64748B;
  cursor: pointer;
  padding: 0;
}

.privacy-link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
  margin-top: 8px;
  text-decoration: underline;
}

.aftercare-banner-text {
  font-size: 0.8125rem;
  color: #0055FE;
  font-weight: 700;
  margin-top: 14px;
  text-align: center;
  width: 100%;
}

.sns-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE MEDIA QUERIES (DESKTOP & MOBILE TRANSITIONS)                     */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hd-hero-top-row {
    grid-template-columns: 1fr;
  }
  .hd-hero-right-col {
    display: none;
  }
  .hd-cards-carousel-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .hd-popular-models-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hd-reviews-feed-section {
    grid-template-columns: 1fr;
  }
  .hd-owner-stories-carousel {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile Screen (Screen Width <= 768px): Exact Screenshot Layout Match */
@media (max-width: 768px) {
  body.hd-home-body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* 1. App Smart Banner Enabled */
  .hd-app-banner-strip {
    display: flex;
  }

  /* 2. Top Marquee Strip & Desktop GNB elements Hidden */
  .hd-top-black-strip {
    display: none;
  }
  .hd-gnb-nav, .hd-gnb-search, .hd-gnb-user-group {
    display: none !important;
  }
  .hd-mobile-menu-btn {
    display: block;
  }

  .hd-main-gnb {
    border-bottom: none;
    padding: 10px 0;
  }
  .hd-gnb-container {
    padding: 0 16px;
  }
  .hd-wm-text {
    font-size: 1.375rem;
  }

  /* 3. Hero Section Mobile Optimization */
  .hd-home-main {
    padding: 12px 0 32px;
  }
  .hd-page-container {
    padding: 0 16px;
  }

  .desktop-title-text {
    display: none;
  }
  .mobile-title-text {
    display: block;
    line-height: 1.22;
  }

  .hd-hero-main-heading {
    font-size: 1.625rem;
    font-weight: 900;
    margin-bottom: 14px;
    align-items: flex-end;
  }

  .hd-hero-filter-bar, .hd-trending-keywords-box {
    display: none !important;
  }

  .hd-mobile-search-capsule {
    display: flex;
  }

  /* 4. 8-Icon Grid (4x2 on Mobile exactly as screenshot) */
  .hd-icon-categories-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
    overflow-x: visible;
    padding: 8px 0 20px;
  }

  .cat-circle-btn {
    width: 100%;
  }

  .circle-icon-box {
    width: 52px;
    height: 52px;
  }

  .circle-label {
    font-size: 0.72rem;
    color: #1E293B;
    text-align: center;
    line-height: 1.15;
  }

  /* 5. Carousels: Smooth horizontal swipe with 155px compact cards */
  .hd-cards-carousel-container {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 12px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .hd-cards-carousel-container::-webkit-scrollbar {
    display: none;
  }

  .hd-car-card {
    min-width: 155px;
    width: 155px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .card-thumb-wrap {
    height: 115px;
    margin-bottom: 8px;
  }

  .card-car-name {
    font-size: 0.8125rem;
  }
  .card-trim-sub {
    font-size: 0.71875rem;
  }
  .card-spec-meta {
    font-size: 0.6875rem;
    margin-bottom: 4px;
  }
  .final-price-bold {
    font-size: 0.9375rem;
  }
  .orig-strike {
    font-size: 0.6875rem;
  }

  .carousel-nav-arrows {
    display: none;
  }
  .sec-title-lead h2 {
    font-size: 1.1875rem;
  }

  /* 6. Popular Models (3 Columns on Mobile) */
  .hd-ranking-tabs-bar {
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 16px;
  }
  .hd-ranking-tabs-bar::-webkit-scrollbar {
    display: none;
  }
  .rank-tab-btn {
    padding: 6px 14px;
    font-size: 0.8125rem;
    flex-shrink: 0;
  }

  .hd-popular-models-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .popular-model-card {
    padding: 10px 8px;
  }
  .model-thumb-frame {
    height: 60px;
  }
  .model-render-img {
    width: 90px;
    height: 50px;
  }
  .model-title {
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .model-specs-sub, .model-count-tag {
    display: none;
  }

  /* 7. Owner Stories (Horizontal scroll on mobile) */
  .hd-owner-stories-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 16px 8px;
    margin: 0 -16px;
    gap: 12px;
    scrollbar-width: none;
  }
  .hd-owner-stories-carousel::-webkit-scrollbar {
    display: none;
  }
  .story-review-card {
    min-width: 250px;
    width: 250px;
    flex-shrink: 0;
    height: 160px;
  }

  /* 8. Hey Care */
  .hd-hey-care-banner {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .hey-care-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .care-action-item {
    background: #FFFFFF;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
  }

  /* 9. Floating Side Tools on Mobile: Keep Chat Button Visible Above Bottom Nav */
  .hd-floating-side-tools {
    bottom: 72px;
    right: 16px;
  }
  .hd-floating-side-tools .btn-float-top {
    display: none;
  }

  /* 10. Mobile Bottom Nav Visible */
  .hd-mobile-bottom-nav {
    display: flex;
  }
}

/* -------------------------------------------------------------------------- */
/* HERO SECTION & METRIC COUNTERS (INDEX.HTML)                                */
/* -------------------------------------------------------------------------- */

.hero-section {
  position: relative;
  padding: 84px 24px 64px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 12%, rgba(37, 99, 235, 0.16) 0%, rgba(7, 11, 20, 0) 70%);
}

.hero-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(59, 130, 246, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  opacity: 0.6;
  pointer-events: none;
}

.hero-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  text-align: center;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-pure);
  box-shadow: 0 0 10px var(--emerald-pure);
}

.hero-title {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-pure);
  margin-bottom: 20px;
}

.text-gradient {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 40%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 1.1875rem;
  color: var(--text-secondary);
  max-width: 780px;
  margin: 0 auto 40px;
  line-height: 1.65;
}

/* Hero Search & Filter Tool Card */
.hero-search-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 48px;
  backdrop-filter: var(--glass-blur);
}

.quick-filter-form {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr auto;
  gap: 12px;
  align-items: flex-end;
}

.form-group-field {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 6px;
}

.form-group-field label {
  font-size: 0.78125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.req {
  color: var(--urgency-crimson-light);
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon svg {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.input-with-icon input {
  padding-left: 42px;
}

.quick-filter-form input,
.quick-filter-form select {
  height: 48px;
  padding: 0 16px;
  background: var(--bg-surface-input);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-pure);
  font-weight: 500;
  width: 100%;
}

.btn-search {
  height: 48px;
  padding: 0 28px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
  color: var(--text-pure);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  transition: all var(--transition-fast);
}

.btn-search:hover {
  background: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
}

/* Metric Counters */
.hero-metrics-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 32px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  backdrop-filter: var(--glass-blur);
  max-width: 960px;
  margin: 0 auto;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-num {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.metric-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.metric-divider {
  width: 1px;
  height: 36px;
  background: var(--border-light);
}

/* -------------------------------------------------------------------------- */
/* MAIN CONTENT LAYOUT & SECTION HEADLINE                                     */
/* -------------------------------------------------------------------------- */

.main-content-layout {
  padding: 40px 24px 80px;
  position: relative;
  z-index: 10;
}

.layout-container {
  max-width: 1400px;
  margin: 0 auto;
}

.section-headline-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
}

.live-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ping-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--urgency-crimson);
  box-shadow: 0 0 10px var(--urgency-crimson);
  animation: pulse-dot 1.4s infinite;
}

.headline-tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--urgency-crimson);
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.section-sub {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.filter-tabs {
  display: flex;
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}

.tab-chip {
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}

.tab-chip:hover {
  color: var(--text-pure);
}

.tab-chip.active {
  background: var(--brand-blue);
  color: var(--text-pure);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* -------------------------------------------------------------------------- */
/* AUCTION GRID & VEHICLE CARDS                                               */
/* -------------------------------------------------------------------------- */

.auction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.car-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
}

.car-card:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: var(--shadow-card), 0 0 24px rgba(59, 130, 246, 0.15);
}

.car-card.featured {
  border-color: rgba(59, 130, 246, 0.45);
}

.car-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--emerald-pure) 100%);
  z-index: 10;
}

/* Card Media Frame */
.card-media-wrapper {
  position: relative;
  height: 220px;
  background: #090E1A;
  overflow: hidden;
}

.badge-row-top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.status-badge.live-badge {
  background: var(--emerald-tint);
  color: var(--emerald-light);
  border: 1px solid var(--emerald-border);
}

.status-badge.timer-badge {
  background: rgba(15, 23, 42, 0.85);
  color: var(--text-pure);
  border: 1px solid var(--border-medium);
  font-variant-numeric: tabular-nums;
}

.status-badge.urgent-badge {
  background: var(--urgency-crimson-tint);
  color: var(--urgency-crimson-light);
  border: 1px solid rgba(239, 68, 68, 0.4);
  animation: pulse-card-border 2s infinite ease-in-out;
}

@keyframes pulse-card-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.65); }
}

.pulse-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-pure);
  box-shadow: 0 0 8px var(--emerald-pure);
}

.car-image-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  background: radial-gradient(circle at 50% 50%, #1A2642 0%, #0D1424 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.car-image-placeholder.alt-bg {
  background: radial-gradient(circle at 50% 50%, #162438 0%, #0A1220 100%);
}

.car-image-placeholder.ev-bg {
  background: radial-gradient(circle at 50% 50%, #0E2E38 0%, #081622 100%);
}

.car-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.1) 0%, rgba(7, 11, 20, 0.85) 100%);
}

.vehicle-graphic {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

.vehicle-silhouette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.car-badge-make {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  padding: 2px 10px;
  border-radius: var(--radius-xs);
}

.car-badge-model {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.01em;
}

.badge-row-bottom {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

/* HeyDealer Signature Inspection Pills */
.inspect-pill {
  font-size: 0.71875rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inspect-pill.perfect {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
}

.inspect-pill.origin {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

/* Card Body */
.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.car-specs-header {
  margin-bottom: 16px;
}

.car-year-mileage {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 6px;
}

.dot-sep {
  color: var(--text-muted);
}

.car-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-pure);
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Bidding Status Board Inside Card */
.bid-status-board {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.price-block {
  display: flex;
  flex-direction: column;
}

.price-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.price-figures {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-usd {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.price-krw {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bid-count-box {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  text-align: center;
}

.count-number {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--brand-blue);
  display: block;
  line-height: 1;
}

.count-unit {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.top-bidders-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78125rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  padding: 0 4px;
}

.bidder-flag-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.bidder-delta-tag {
  font-weight: 700;
  color: var(--emerald-light);
}

.bidder-delta-tag.fire {
  color: var(--urgency-crimson);
}

.card-actions {
  margin-top: auto;
}

.btn-card-detail {
  width: 100%;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-pure);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.btn-card-detail:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

/* -------------------------------------------------------------------------- */
/* INTERACTIVE AUCTION ROOM MODAL                                             */
/* -------------------------------------------------------------------------- */

.modal-backdrop-layer {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal-backdrop-layer.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-window {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 1280px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  animation: modal-zoom-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-zoom-in {
  from { transform: scale(0.96) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-header {
  padding: 16px 24px;
  background: #090E1A;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-live-pill {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.modal-item-code {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-family: var(--font-family-mono);
}

.modal-close-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  transition: all var(--transition-fast);
}

.modal-close-icon:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

/* Modal Split Layout */
.modal-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  flex-grow: 1;
  overflow-y: auto;
}

.modal-left-panel {
  padding: 28px;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vehicle-headline-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-car-heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-pure);
  line-height: 1.3;
}

.modal-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spec-tag {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.78125rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
}

/* Gallery Frame */
.media-gallery-frame {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.main-preview-viewport {
  position: relative;
  height: 320px;
  background: radial-gradient(circle at 50% 50%, #1A2644 0%, #0A101D 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-badge-stack {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.gallery-badge {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-light);
  color: var(--text-pure);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.gallery-badge.hd {
  color: var(--brand-cyan);
}

.car-graphic-stage {
  text-align: center;
  position: relative;
  z-index: 2;
}

.stage-watermark {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.15);
  margin-bottom: 8px;
}

.car-body-silhouette .model-large-text {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #FFFFFF 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gallery-thumbs-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.thumb-btn {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xs);
  padding: 8px 4px;
  text-align: center;
  transition: all var(--transition-fast);
}

.thumb-btn:hover, .thumb-btn.active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-tint);
}

.thumb-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.thumb-btn.active .thumb-label {
  color: var(--text-pure);
}

/* Inspection Diagnostics Card (HeyDealer Trust Standard) */
.inspection-report-card {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 20px;
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.report-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-title-group h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-pure);
}

.grade-pill {
  font-size: 0.78125rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.grade-pill.grade-a, .grade-pill.grade-s {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.diag-item {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diag-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.diag-val.clean {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--emerald-light);
}

/* Modal Right Panel: Cockpit & WASM Engine */
.modal-right-panel {
  padding: 28px;
  background: #0B1120;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.live-cockpit-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Digital Countdown Clock */
.timer-banner {
  background: #070B14;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timer-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.ping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--urgency-crimson);
  box-shadow: 0 0 8px var(--urgency-crimson);
  animation: pulse-dot 1.2s infinite;
}

.digital-timer-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-mono);
}

.digit-box {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  text-align: center;
  min-width: 44px;
}

.digit-box .digits {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-pure);
  display: block;
}

.digit-box .digits.highlight {
  color: #F87171;
}

.digit-unit {
  font-size: 0.5625rem;
  color: var(--text-muted);
  font-weight: 700;
}

.colon {
  font-weight: 800;
  color: var(--text-muted);
}

/* Current Top Bid Section */
.current-bid-highlight {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bid-title-tag {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-cyan);
}

.bid-money-display {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.bid-val-usd {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bid-val-krw {
  font-size: 1rem;
  font-weight: 600;
  color: var(--emerald-light);
  font-variant-numeric: tabular-nums;
}

.bid-leader-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.bid-leader-notice strong {
  color: var(--text-pure);
}

/* Live Bid History Stream */
.live-stream-box {
  background: #070B14;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
}

.stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stream-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.stream-pulse {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--emerald-light);
  background: var(--emerald-tint);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.bid-activity-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.02);
  transition: background var(--transition-fast);
}

.bid-row.highlight-row {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
}

.bid-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.bidder-name {
  color: var(--text-main);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bid-amount-entry {
  color: var(--text-pure);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Interactive Bidding Controller */
.bid-input-controller {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bid-input-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.min-next-bid {
  color: var(--brand-blue);
}

.quick-bid-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.preset-pill {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-medium);
  color: var(--text-pure);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all var(--transition-fast);
}

.preset-pill:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.bid-input-bar {
  display: flex;
  align-items: center;
  position: relative;
}

.currency-prefix {
  position: absolute;
  left: 16px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.bid-number-input {
  width: 100%;
  height: 52px;
  background: #070B14;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 0 60px 0 36px;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-pure);
  font-variant-numeric: tabular-nums;
}

.bid-number-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

.currency-suffix {
  position: absolute;
  right: 16px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-bid-submit {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: var(--text-pure);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.0625rem;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
  transition: all var(--transition-fast);
}

.btn-bid-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.6);
}

.bidding-terms-hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* WASM FREIGHT & CIF LOGISTICS SIMULATOR                                     */
/* -------------------------------------------------------------------------- */

.wasm-calculator-card {
  background: #090E1A;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 20px;
}

.wasm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.wasm-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wasm-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-blue);
}

.wasm-heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-pure);
}

.wasm-speed-pill {
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: var(--font-family-mono);
  background: var(--emerald-tint);
  color: var(--emerald-light);
  border: 1px solid var(--emerald-border);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.wasm-form-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.calc-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-col label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.wasm-select {
  height: 40px;
  padding: 0 10px;
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xs);
  color: var(--text-main);
  font-size: 0.8125rem;
  font-weight: 500;
}

.wasm-results-box {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.result-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.breakdown-val {
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.result-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.result-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-pure);
}

.total-val-cif {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
}

/* Landed Cost Extended Breakdown */
.result-landed-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-medium);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.landed-badge {
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.result-landed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
  margin-top: 2px;
}

.landed-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-pure);
}

.total-val-landed {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--emerald-light);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* AUCTION.HTML DEDICATED STYLES                                              */
/* -------------------------------------------------------------------------- */

.auction-room-body {
  background: var(--bg-core);
}

.auction-headline-strip {
  background: #090E1A;
  border-bottom: 1px solid var(--border-light);
  padding: 20px 24px;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.crumb-sep {
  color: var(--text-muted);
}

.crumb-current {
  color: var(--text-secondary);
  font-weight: 600;
}

.headline-flex-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.headline-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.status-live-pill {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lot-vin-badge {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  font-size: 0.75rem;
  font-family: var(--font-family-mono);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.escrow-shield-pill {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vehicle-primary-heading {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.02em;
}

.headline-share-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auction-main-viewport {
  padding: 32px 24px 80px;
}

.auction-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
}

.stage-card-frame {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}

.main-viewport-stage {
  position: relative;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, #1A2644 0%, #0A101D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-overlay-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.view-tag {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  color: var(--text-pure);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vr-gyro-hint-bar {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  z-index: 5;
}

.stage-graphic-render {
  text-align: center;
  position: relative;
  z-index: 2;
}

.render-watermark {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
}

.render-silhouette-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.car-brand-emblem {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  padding: 4px 12px;
  border-radius: var(--radius-xs);
}

.car-model-massive {
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #FFFFFF 0%, #64748B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.car-vin-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--emerald-light);
  letter-spacing: 0.08em;
}

.gallery-thumbs-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 12px;
  background: #090E1A;
  border-top: 1px solid var(--border-light);
}

.thumb-chip {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all var(--transition-fast);
}

.thumb-chip:hover, .thumb-chip.active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-tint);
}

.thumb-num {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--brand-blue);
  font-family: var(--font-family-mono);
}

.thumb-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.thumb-chip.active .thumb-title {
  color: var(--text-pure);
}

/* Inspection Report Panel */
.inspection-report-box {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.inspect-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.inspect-brand-lead {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inspect-shield-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inspect-box-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-pure);
  margin-bottom: 2px;
}

.inspect-box-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.inspection-matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.diag-card {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diag-state-badge.pass {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.diag-card .diag-val {
  font-size: 1rem;
  font-weight: 800;
  color: var(--emerald-light);
}

.diag-sub-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.diagnostic-measurements-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #090E1A;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.measure-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}

.measure-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-cyan);
}

.measure-name {
  color: var(--text-muted);
}

.measure-value {
  color: var(--text-pure);
  font-weight: 700;
}

/* Specs Table Card */
.specs-table-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.specs-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.specs-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.specs-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text-pure);
}

.port-location-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--emerald-light);
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.specs-table-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.spec-cell {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-cell-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.spec-cell-val {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Right Column Cockpit */
.auction-col-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timer-display-panel {
  background: #070B14;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.timer-lead-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.ping-crimson-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--urgency-crimson);
  box-shadow: 0 0 10px var(--urgency-crimson);
  animation: pulse-dot 1.2s infinite;
}

.timer-lead-text {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--urgency-crimson-light);
  text-transform: uppercase;
}

.countdown-digits-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.countdown-digit-cell {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-width: 64px;
}

.digit-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-pure);
  font-family: var(--font-family-mono);
  display: block;
}

.digit-value.digit-pulse {
  color: #F87171;
  animation: pulse-dot 1s infinite alternate;
}

.digit-caption {
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--text-muted);
}

.digit-divider {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-muted);
}

.timer-softclose-note {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.highest-bid-hero-board {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(16, 185, 129, 0.12) 100%);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bid-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bid-hero-pill {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}

.bid-hero-incoterms {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.bid-figures-hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.bid-val-usd-hero {
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bid-val-krw-hero {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--emerald-light);
  font-variant-numeric: tabular-nums;
}

.bid-leader-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.leader-flag {
  font-size: 1.25rem;
}

.bids-stream-container {
  background: #070B14;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
}

.stream-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.stream-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 8px var(--brand-cyan);
  animation: pulse-dot 1.5s infinite;
}

.stream-status-chip {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--emerald-light);
  background: var(--emerald-tint);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.bid-activity-feed-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  transition: background var(--transition-fast);
}

.feed-row.current-lead-row {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
}

.feed-buyer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flag-circle {
  font-size: 1.2rem;
}

.feed-company {
  font-size: 0.8125rem;
  color: var(--text-pure);
  display: block;
}

.feed-location {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.feed-price-col {
  text-align: right;
}

.feed-amount {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-pure);
  display: block;
  font-variant-numeric: tabular-nums;
}

.feed-time {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.bidding-input-controller {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.input-ctrl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ctrl-label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--text-pure);
}

.ctrl-hint {
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--brand-blue);
}

.bid-quick-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.preset-pill-btn {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-medium);
  color: var(--text-pure);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 10px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.preset-pill-btn:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.bid-numeric-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-symbol {
  position: absolute;
  left: 18px;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-muted);
}

.bid-num-input {
  width: 100%;
  height: 56px;
  background: #070B14;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 0 64px 0 40px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-pure);
  font-variant-numeric: tabular-nums;
}

.input-currency-tag {
  position: absolute;
  right: 18px;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-muted);
}

.btn-bid-submit-primary {
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: var(--text-pure);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.125rem;
  font-weight: 800;
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.5);
  transition: all var(--transition-fast);
}

.btn-bid-submit-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(37, 99, 235, 0.65);
}

.escrow-notice-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* WASM Simulator Card */
.wasm-simulator-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.wasm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.wasm-chip {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.08em;
  display: block;
}

.wasm-card-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text-pure);
}

.wasm-card-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.wasm-parameters-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.param-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.param-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.param-field label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.wasm-select-input {
  height: 44px;
  padding: 0 12px;
  background: var(--bg-surface-input);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-pure);
  font-size: 0.8125rem;
}

.wasm-output-sheet {
  background: #090E1A;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sheet-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.sheet-val {
  color: var(--text-pure);
  font-variant-numeric: tabular-nums;
}

.sheet-separator {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.sheet-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-caption {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-pure);
  display: block;
}

.total-sub-note {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.total-cif-amount {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
}

.landed-cost-subcard {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-medium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landed-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landed-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand-blue);
}

.landed-stat-rate {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--emerald-light);
}

.landed-total-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.landed-total-text {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-pure);
}

.landed-total-number {
  font-size: 1.1875rem;
  font-weight: 900;
  color: var(--emerald-light);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* SELL.HTML DEDICATED STYLES                                                 */
/* -------------------------------------------------------------------------- */

.sell-page-body {
  background: var(--bg-core);
}

.sell-hero-section {
  position: relative;
  padding: 60px 24px 36px;
  background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 60%);
  border-bottom: 1px solid var(--border-light);
}

.sell-hero-container {
  max-width: 1360px;
  margin: 0 auto;
}

.sell-hero-headline {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 40px;
}

.sell-chip-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.pulse-dot-emerald {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-pure);
  box-shadow: 0 0 8px var(--emerald-pure);
  animation: pulse-dot 1.5s infinite;
}

.sell-main-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--text-pure);
  line-height: 1.25;
  margin-bottom: 16px;
}

.sell-main-description {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Stepper Progress Indicator */
.stepper-indicator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 18px 32px;
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
}

.stepper-step {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.stepper-step.active {
  opacity: 1;
}

.step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-surface-secondary);
  border: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--text-pure);
  transition: all var(--transition-fast);
}

.stepper-step.active .step-circle {
  background: var(--brand-blue);
  border-color: #60A5FA;
  box-shadow: var(--shadow-glow-blue);
}

.step-check {
  display: none;
}

.step-info {
  display: flex;
  flex-direction: column;
}

.step-tag {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.05em;
}

.step-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-pure);
}

.stepper-line {
  flex-grow: 1;
  height: 2px;
  background: var(--border-light);
  margin: 0 16px;
}

/* Sell Form Layout */
.sell-main-layout {
  padding: 40px 24px 100px;
}

.sell-layout-container {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 36px;
  align-items: flex-start;
}

.sell-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sell-card-panel {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast);
}

.sell-card-panel:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.panel-badge-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-step-pill {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  color: var(--brand-blue);
}

.panel-step-pill.emerald {
  background: var(--emerald-tint);
  border-color: var(--emerald-border);
  color: var(--emerald-light);
}

.panel-step-pill.amber {
  background: var(--urgency-amber-tint);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--urgency-amber);
}

.panel-step-pill.blue {
  background: var(--brand-blue-tint);
  border-color: var(--brand-blue-border);
  color: var(--brand-cyan);
}

.panel-title {
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--text-pure);
}

.panel-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.trust-shield-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--emerald-light);
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.fx-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-cyan);
}

.gcs-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Fast VIN Lookup Banner */
.vin-lookup-banner {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.vin-lookup-lead {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lookup-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  flex-shrink: 0;
}

.lookup-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-pure);
  display: block;
}

.lookup-sub {
  font-size: 0.78125rem;
  color: var(--text-secondary);
}

.vin-input-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vin-field-input {
  height: 44px;
  width: 240px;
  padding: 0 14px;
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-vin-lookup {
  height: 44px;
  padding: 0 16px;
  background: var(--brand-blue);
  color: var(--text-pure);
  font-weight: 700;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.btn-vin-lookup:hover {
  background: var(--brand-blue-hover);
}

/* Form Grids */
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.select-wrapper, .input-unit-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.select-wrapper select,
.input-unit-wrapper input,
.form-group-field input,
.form-group-field select {
  height: 46px;
  padding: 0 14px;
  width: 100%;
}

.input-unit-tag {
  position: absolute;
  right: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
}

.input-highlighted {
  border-color: rgba(59, 130, 246, 0.4);
}

.field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Inspection Checklist Grid */
.inspect-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.check-item-box {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all var(--transition-fast);
}

.check-item-box:hover {
  border-color: rgba(16, 185, 129, 0.35);
}

.check-item-lead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--emerald-pure);
  cursor: pointer;
}

.check-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-pure);
  cursor: pointer;
}

.check-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.check-status-badge.pass {
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--emerald-light);
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}

.trust-pledge-banner {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid var(--emerald-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  gap: 14px;
}

.pledge-icon {
  flex-shrink: 0;
}

.pledge-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--emerald-light);
  margin-bottom: 4px;
  display: block;
}

.pledge-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Price Policy Cards */
.price-card-box {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 18px;
}

.price-card-box.highlight-reserve {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(180deg, var(--bg-surface-secondary) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.price-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.price-hint-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
}

.price-hint-badge.secure {
  color: var(--emerald-light);
}

.currency-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.currency-symbol {
  position: absolute;
  left: 14px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.currency-input-wrap input {
  height: 52px;
  padding: 0 54px 0 36px;
  font-size: 1.375rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text-pure);
}

.currency-code {
  position: absolute;
  right: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
}

.usd-converted-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
}

.usd-label {
  color: var(--text-muted);
}

.usd-val {
  font-weight: 800;
  color: var(--text-pure);
  font-variant-numeric: tabular-nums;
}

/* WASM Preview Benchmarks */
.landed-cost-preview-box {
  background: #090E1A;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px;
}

.preview-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wasm-micro-chip {
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  margin-right: 6px;
}

.preview-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-pure);
}

.preview-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

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

.benchmark-cell {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cell-flag {
  font-size: 1rem;
}

.cell-dest {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.cell-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--emerald-light);
  font-variant-numeric: tabular-nums;
}

.cell-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.rules-callout-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--urgency-amber-tint);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.78125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.rules-callout-note strong {
  color: var(--text-pure);
}

/* GCS Upload Dropzone */
.photo-guide-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guide-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.guide-chip.required {
  border-color: var(--brand-blue-border);
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
}

.gcs-upload-dropzone {
  position: relative;
  background: #090E1A;
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.gcs-upload-dropzone:hover, .gcs-upload-dropzone.dragover {
  border-color: var(--brand-blue);
  background: var(--brand-blue-tint);
}

.dropzone-animated-icon {
  color: var(--brand-blue);
  transition: transform var(--transition-fast);
}

.gcs-upload-dropzone:hover .dropzone-animated-icon {
  transform: translateY(-4px);
}

.dropzone-primary-text {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-pure);
  display: block;
}

.dropzone-sub-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.gcs-upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.uploaded-previews-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.previews-placeholder {
  grid-column: 1 / -1;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-light);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gcs-infrastructure-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.71875rem;
  color: var(--text-muted);
}

.infra-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-pure);
}

/* Terms Panel */
.sell-terms-panel {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.terms-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.terms-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.terms-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-blue);
  margin-top: 2px;
  flex-shrink: 0;
}

.terms-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Sell Submission Action Bar */
.sell-submit-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.btn-launch-auction {
  flex-grow: 1;
  height: 64px;
}

.btn-text-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.btn-main-label {
  font-size: 1.125rem;
  font-weight: 900;
}

.btn-sub-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* Floating Sticky Summary Console (Sell Page) */
.sell-summary-sidebar {
  position: sticky;
  top: 96px;
}

.summary-sticky-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-elevated);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.summary-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.summary-live-tag {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}

.summary-card-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-pure);
}

.summary-car-thumbnail-frame {
  height: 160px;
  background: radial-gradient(circle at 50% 50%, #1A2644 0%, #0A101D 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-badge-row {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  z-index: 5;
}

.thumb-badge-live {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  color: var(--brand-blue);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.thumb-badge-fob {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.thumb-graphic-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 0 16px;
}

.thumb-make-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.12em;
}

.thumb-model-text {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-pure);
}

.summary-stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.stat-name {
  color: var(--text-secondary);
}

.stat-value {
  color: var(--text-pure);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.summary-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.summary-escrow-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--emerald-border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  gap: 12px;
}

.escrow-desc-text strong {
  font-size: 0.8125rem;
  color: var(--emerald-light);
  display: block;
}

.escrow-desc-text p {
  font-size: 0.71875rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.summary-card-footer {
  text-align: center;
}

.footer-note {
  font-size: 0.71875rem;
  color: var(--text-muted);
}

/* Mobile Sell Bottom Action Bar */
.mobile-sell-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border-medium);
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 900;
}

.mobile-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mobile-price-preview {
  display: flex;
  flex-direction: column;
}

.mobile-price-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
}

.mobile-price-value {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--emerald-light);
  font-variant-numeric: tabular-nums;
}

.btn-mobile-submit {
  padding: 12px 20px;
  font-weight: 800;
}

/* -------------------------------------------------------------------------- */
/* DASHBOARD.HTML DEDICATED STYLES                                            */
/* -------------------------------------------------------------------------- */

.dashboard-body {
  background: var(--bg-core);
}

.dashboard-hero-section {
  background: #090E1A;
  border-bottom: 1px solid var(--border-light);
  padding: 36px 24px;
}

.dashboard-hero-container {
  max-width: 1400px;
  margin: 0 auto;
}

.buyer-welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.buyer-meta-cluster {
  display: flex;
  align-items: center;
  gap: 20px;
}

.buyer-avatar-shield {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-elevated);
  border: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.avatar-flag {
  font-size: 2.25rem;
}

.verified-tick-icon {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--emerald-pure);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #090E1A;
}

.buyer-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.b-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.b-badge.role-tag {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  color: var(--brand-blue);
}

.b-badge.port-tag {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
}

.b-badge.escrow-tag {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
}

.buyer-display-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.company-sub {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.buyer-account-id {
  font-size: 0.78125rem;
  color: var(--text-muted);
}

.buyer-account-id code {
  color: var(--brand-cyan);
  font-family: var(--font-family-mono);
  font-weight: 700;
}

.buyer-wallet-cluster {
  display: flex;
  align-items: center;
  gap: 20px;
}

.wallet-stat-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-lead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-icon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-pure);
}

.wallet-icon-dot.pulse {
  box-shadow: 0 0 8px var(--emerald-pure);
  animation: pulse-dot 1.5s infinite;
}

.wallet-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.wallet-amount-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wallet-val-usd {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--emerald-light);
  font-variant-numeric: tabular-nums;
}

.wallet-val-krw {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wallet-subtext {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.wallet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 4 KPI Cards Grid */
.dashboard-kpi-section {
  padding: 32px 24px 0;
}

.dashboard-kpi-container {
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.kpi-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.4);
}

.kpi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon-box.blue {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  color: var(--brand-blue);
}

.kpi-icon-box.emerald {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
}

.kpi-icon-box.amber {
  background: var(--urgency-amber-tint);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--urgency-amber);
}

.kpi-icon-box.purple {
  background: var(--purple-tint);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: var(--purple-accent);
}

.kpi-trend {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up {
  background: var(--brand-blue-tint);
  color: var(--brand-cyan);
}

.kpi-trend.neutral {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.kpi-trend.secure {
  background: var(--purple-tint);
  color: #C4B5FD;
}

.pulse-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-pure);
  box-shadow: 0 0 6px var(--emerald-pure);
}

.kpi-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.kpi-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.kpi-val {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--text-pure);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kpi-unit {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}

.kpi-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.kpi-subtext strong {
  color: var(--text-main);
}

/* Dashboard Main Layout & Tabs */
.dashboard-main-layout {
  padding: 32px 24px 80px;
}

.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-tabs-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.d-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.d-tab-btn:hover {
  color: var(--text-pure);
  border-color: rgba(255, 255, 255, 0.25);
}

.d-tab-btn.active {
  background: var(--brand-blue-tint);
  border-color: var(--brand-blue);
  color: var(--text-pure);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.d-tab-counter {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.d-tab-btn.active .d-tab-counter {
  background: var(--brand-blue);
  color: var(--text-pure);
}

.d-tab-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  background: var(--emerald-tint);
  color: var(--emerald-light);
  border: 1px solid var(--emerald-border);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* Tab Panels */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.dashboard-table-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.table-card-head {
  padding: 24px;
  background: #090E1A;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.table-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
  margin-bottom: 6px;
}

.table-badge.blue {
  background: var(--brand-blue-tint);
  color: var(--brand-cyan);
  border: 1px solid var(--brand-blue-border);
}

.table-badge.emerald {
  background: var(--emerald-tint);
  color: var(--emerald-light);
  border: 1px solid var(--emerald-border);
}

.table-badge.amber {
  background: var(--urgency-amber-tint);
  color: var(--urgency-amber);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.table-heading {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-pure);
  margin-bottom: 4px;
}

.table-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.live-sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-cyan);
}

.table-responsive-wrapper {
  overflow-x: auto;
  width: 100%;
}

/* Fintech Table System */
.d-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.d-table th {
  padding: 14px 20px;
  background: #0B1120;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-light);
}

.d-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.875rem;
  color: var(--text-main);
  vertical-align: middle;
}

.d-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.v-cell-flex {
  display: flex;
  align-items: center;
  gap: 14px;
}

.v-cell-thumb {
  width: 60px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: radial-gradient(circle at 50% 50%, #1A2644 0%, #0A101D 100%);
  border: 1px solid var(--border-light);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v-cell-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-placeholder-text {
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--brand-blue);
}

.v-cell-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-cell-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-pure);
}

.v-cell-vin {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-family-mono);
}

.inspect-tag-mini {
  background: var(--emerald-tint);
  color: var(--emerald-light);
  border: 1px solid var(--emerald-border);
  font-size: 0.625rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}

.countdown-cell {
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-pure);
}

.countdown-cell.urgent {
  color: var(--urgency-crimson-light);
  animation: pulse-dot 1.2s infinite alternate;
}

.price-figure-cell {
  display: flex;
  flex-direction: column;
}

.price-figure-usd {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-pure);
  font-variant-numeric: tabular-nums;
}

.price-figure-krw {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.status-pill.lead {
  background: var(--emerald-tint);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-light);
}

.status-pill.outbid {
  background: var(--urgency-crimson-tint);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--urgency-crimson-light);
}

.status-pill.sold {
  background: var(--brand-blue-tint);
  border: 1px solid var(--brand-blue-border);
  color: var(--brand-cyan);
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill-dot.pulse {
  animation: pulse-dot 1.4s infinite;
}

/* Timeline & EDI Track */
.logistics-timeline-card {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.timeline-card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.timeline-badge.purple {
  background: var(--purple-tint);
  color: #C4B5FD;
  border: 1px solid rgba(139, 92, 246, 0.35);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
  margin-bottom: 6px;
}

.timeline-heading {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-pure);
  margin-bottom: 4px;
}

.timeline-sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  max-width: 720px;
}

.vehicle-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vehicle-picker-wrap label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.d-select {
  height: 42px;
  padding: 0 14px;
  background: var(--bg-surface-input);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-pure);
  font-size: 0.875rem;
}

.stepper-track-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-bottom: 36px;
}

.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  flex: 1;
}

.node-marker {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface-secondary);
  border: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 14px;
  transition: all var(--transition-fast);
}

.step-node.completed .node-marker {
  background: var(--emerald-tint);
  border-color: var(--emerald-pure);
  color: var(--emerald-light);
  box-shadow: 0 0 16px var(--emerald-glow);
}

.step-node.active .node-marker.pulsing {
  background: var(--brand-blue);
  border-color: #60A5FA;
  color: var(--text-pure);
  box-shadow: 0 0 20px var(--brand-blue-glow);
}

.node-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px #FFFFFF;
  animation: pulse-dot 1s infinite alternate;
}

.node-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
}

.node-step-tag {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.05em;
}

.node-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-pure);
}

.node-time {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.node-desc {
  font-size: 0.71875rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.step-line {
  flex-grow: 1;
  height: 3px;
  background: var(--border-light);
  margin-top: 22px;
}

.step-line.active {
  background: linear-gradient(90deg, var(--emerald-pure) 0%, var(--brand-blue) 100%);
}

.logistics-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: #090E1A;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.l-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-meta-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
}

.l-meta-val {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-pure);
}

/* -------------------------------------------------------------------------- */
/* B2B COMMERCIAL INVOICE CONTRACT MODAL                                      */
/* -------------------------------------------------------------------------- */

.contract-modal-window {
  max-width: 960px;
  background: #070B14;
}

.contract-scroll-viewport {
  max-height: calc(92vh - 70px);
  overflow-y: auto;
  padding: 32px;
  background: #050811;
}

/* Photorealistic White Paper Invoice Container */
.invoice-paper {
  background: #FFFFFF;
  color: #0F172A;
  border-radius: var(--radius-xs);
  padding: 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  position: relative;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  overflow: hidden;
}

.invoice-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.03);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.1em;
  z-index: 1;
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #0F172A;
  position: relative;
  z-index: 2;
}

.invoice-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 900;
  color: #1D4ED8;
  margin-bottom: 8px;
}

.invoice-brand-sub {
  font-size: 0.75rem;
  color: #64748B;
  line-height: 1.45;
}

.invoice-title-block {
  text-align: right;
}

.invoice-main-heading {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.05em;
  line-height: 1;
}

.invoice-kr-sub {
  font-size: 0.8125rem;
  color: #64748B;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}

.invoice-doc-meta {
  font-size: 0.8125rem;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invoice-parties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.party-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 18px;
}

.party-tag {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #2563EB;
  margin-bottom: 6px;
  display: block;
}

.party-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
  display: block;
}

.party-details {
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.5;
}

.invoice-table-container {
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
}

.invoice-table th {
  background: #0F172A;
  color: #FFFFFF;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invoice-table td {
  padding: 14px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 0.8125rem;
  color: #1E293B;
  vertical-align: middle;
}

.item-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
}

.item-sub-meta {
  font-size: 0.71875rem;
  color: #64748B;
  line-height: 1.4;
  margin-top: 4px;
}

.unit-price {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #0F172A;
}

.invoice-table tfoot td {
  background: #F8FAFC;
  padding: 12px 14px;
  border-bottom: 1px solid #CBD5E1;
}

.total-price {
  font-size: 1.375rem;
  font-weight: 900;
  color: #1D4ED8;
}

.krw-caption {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
}

.krw-amount {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #059669;
}

.invoice-terms-block {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 36px;
  position: relative;
  z-index: 2;
}

.terms-title {
  font-size: 0.75rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.terms-list {
  padding-left: 18px;
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.6;
}

.invoice-signature-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.signature-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sign-label {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #64748B;
  margin-bottom: 8px;
}

.stamp-box {
  height: 80px;
  border-bottom: 2px solid #0F172A;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sign-text {
  font-family: 'Pretendard', cursive, sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  color: #0F172A;
}

.official-seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #DC2626;
  color: #DC2626;
  font-size: 0.5rem;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  transform: rotate(-12deg);
  opacity: 0.85;
}

.buyer-digital-seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #2563EB;
  color: #2563EB;
  font-size: 0.5625rem;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
  opacity: 0.85;
}

.sign-caption {
  font-size: 0.6875rem;
  color: #64748B;
  margin-top: 6px;
}

/* -------------------------------------------------------------------------- */
/* MOBILE STICKY ACTION BAR & FOOTER                                          */
/* -------------------------------------------------------------------------- */

.mobile-sticky-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border-medium);
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 900;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
}

.sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sticky-meta {
  display: flex;
  flex-direction: column;
}

.sticky-sub-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.sticky-price-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sticky-price-usd {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--text-pure);
  font-variant-numeric: tabular-nums;
}

.sticky-price-krw {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.btn-sticky-bid {
  background: var(--brand-blue);
  color: var(--text-pure);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
}

/* Platform Footer */
.app-footer {
  background: #050811;
  border-top: 1px solid var(--border-light);
  padding: 60px 24px 24px;
  position: relative;
  z-index: 10;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-pure);
}

.footer-summary {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 520px;
}

.footer-compliance {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.col-title {
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-pure);
}

.col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.col-list li a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.col-list li a:hover {
  color: var(--brand-blue);
}

.footer-bottom-bar {
  border-top: 1px solid var(--border-light);
  padding-top: 24px;
}

.footer-bottom-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-badges {
  display: flex;
  align-items: center;
  gap: 12px;
}

.security-chip {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-weight: 600;
}

/* Toast Notifications */
.toast-viewport {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-item {
  background: var(--bg-surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  color: var(--text-pure);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.toast-item.success {
  border-color: var(--emerald-pure);
  border-left: 4px solid var(--emerald-pure);
}

.toast-item.error {
  border-color: var(--urgency-crimson);
  border-left: 4px solid var(--urgency-crimson);
}

@keyframes toast-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* -------------------------------------------------------------------------- */
/* ADMIN DASHBOARD CONSOLE STYLES (/admin)                                    */
/* -------------------------------------------------------------------------- */

.admin-body {
  background-color: #0A0F1D;
  color: #F1F5F9;
  font-family: var(--font-family-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-layout {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 40px);
}

/* Admin Sidebar */
.admin-sidebar {
  width: 260px;
  background: #060A14;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 100;
  transition: transform 0.25s ease;
}

.admin-sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
}

.admin-brand .brand-txt {
  font-size: 1.25rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.03em;
}

.admin-brand .admin-tag {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.admin-menu-list {
  list-style: none;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  overflow-y: auto;
}

.admin-menu-item button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #94A3B8;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: left;
}

.admin-menu-item button:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05);
}

.admin-menu-item button.active {
  color: #FFFFFF;
  background: #2563EB;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.admin-menu-item button .menu-icon {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.admin-sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
}

.admin-user-name {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #FFFFFF;
}

.admin-user-role {
  font-size: 0.6875rem;
  color: #10B981;
}

.btn-admin-logout {
  color: #94A3B8;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

/* Admin Main Content */
.admin-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: #0B1120;
}

.admin-top-bar {
  background: #090E1A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-top-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 1.25rem;
  cursor: pointer;
}

.admin-page-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #FFFFFF;
}

.admin-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-goto-client {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #38BDF8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 6px 14px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-goto-client:hover {
  background: rgba(56, 189, 248, 0.2);
}

.admin-content-body {
  padding: 28px;
  flex: 1;
}

/* Section Panes */
.admin-tab-pane {
  display: none;
}

.admin-tab-pane.active {
  display: block;
}

/* KPI Grid */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.admin-kpi-card {
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-kpi-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-kpi-val {
  font-size: 1.875rem;
  font-weight: 900;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.admin-kpi-sub {
  font-size: 0.75rem;
  color: #64748B;
}

/* Admin Card Container */
.admin-card {
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-card-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #FFFFFF;
}

.admin-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Admin Search & Filter Bar */
.admin-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-search-input {
  background: #070B14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #FFFFFF;
  padding: 8px 14px;
  font-size: 0.875rem;
  width: 220px;
}

.admin-select-input {
  background: #070B14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #FFFFFF;
  padding: 8px 14px;
  font-size: 0.875rem;
}

/* Admin Data Table */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.admin-table th {
  background: #080D1A;
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.84375rem;
  color: #E2E8F0;
  vertical-align: middle;
}

.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Badges */
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 800;
}

.admin-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.admin-badge.sold {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.admin-badge.review {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Action Buttons inside Table */
.btn-table-action {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #E2E8F0;
  transition: all 0.15s ease;
}

/* Sidebar close button */
.admin-sidebar-close-btn {
  display: none;
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px;
}

.admin-sidebar-close-btn:hover {
  color: #FFFFFF;
}

/* Sidebar overlay for mobile */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(4px);
  z-index: 2050;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.admin-sidebar-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.admin-top-fx-chip {
  font-size: 0.8125rem;
  color: #94A3B8;
  font-weight: 700;
}

.admin-lang-pill {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 2px;
}

.admin-lang-btn {
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #94A3B8;
  border-radius: 9999px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-lang-btn.active {
  background: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.admin-theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.78125rem;
  font-weight: 800;
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.admin-theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

/* Admin Light Theme System */
body.admin-body.theme-light {
  background-color: #F8FAFC;
  color: #0F172A;
}

body.admin-body.theme-light .admin-sidebar {
  background: #FFFFFF;
  border-right-color: #E2E8F0;
}

body.admin-body.theme-light .admin-sidebar-header {
  border-bottom-color: #F1F5F9;
}

body.admin-body.theme-light .admin-brand .brand-txt {
  color: #0F172A;
}

body.admin-body.theme-light .admin-menu-item button {
  color: #475569;
}

body.admin-body.theme-light .admin-menu-item button:hover {
  color: #0F172A;
  background: #F1F5F9;
}

body.admin-body.theme-light .admin-menu-item button.active {
  color: #FFFFFF;
  background: #2563EB;
}

body.admin-body.theme-light .admin-sidebar-footer {
  border-top-color: #F1F5F9;
}

body.admin-body.theme-light .admin-user-name {
  color: #0F172A;
}

body.admin-body.theme-light .admin-main {
  background: #F1F5F9;
}

body.admin-body.theme-light .admin-top-bar {
  background: #FFFFFF;
  border-bottom-color: #E2E8F0;
}

body.admin-body.theme-light .admin-page-title {
  color: #0F172A;
}

body.admin-body.theme-light .admin-mobile-toggle {
  color: #0F172A;
  background: #F1F5F9;
}

body.admin-body.theme-light .admin-theme-toggle-btn {
  color: #334155;
  background: #F1F5F9;
  border-color: #CBD5E1;
}

body.admin-body.theme-light .admin-theme-toggle-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

body.admin-body.theme-light .admin-lang-pill {
  background: #F1F5F9;
  border-color: #E2E8F0;
}

body.admin-body.theme-light .admin-lang-btn {
  color: #64748B;
}

body.admin-body.theme-light .admin-lang-btn.active {
  background: #2563EB;
  color: #FFFFFF;
}

body.admin-body.theme-light .admin-top-fx-chip {
  color: #64748B;
}

body.admin-body.theme-light .admin-card,
body.admin-body.theme-light .admin-kpi-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

body.admin-body.theme-light .admin-card-title,
body.admin-body.theme-light .admin-kpi-val {
  color: #0F172A;
}

body.admin-body.theme-light .admin-kpi-lbl {
  color: #64748B;
}

body.admin-body.theme-light .admin-search-input,
body.admin-body.theme-light .admin-select-input,
body.admin-body.theme-light .admin-form-group input,
body.admin-body.theme-light .admin-form-group select,
body.admin-body.theme-light .admin-form-group textarea {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
}

body.admin-body.theme-light #adm-v-options-container {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

body.admin-body.theme-light #adm-v-options-container label {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

body.admin-body.theme-light .admin-search-input::placeholder {
  color: #94A3B8;
}

body.admin-body.theme-light .admin-form-group label {
  color: #475569;
}

body.admin-body.theme-light .admin-table-wrap {
  border-color: #E2E8F0;
}

body.admin-body.theme-light .admin-table th {
  background: #F8FAFC;
  color: #64748B;
  border-bottom-color: #E2E8F0;
}

body.admin-body.theme-light .admin-table td {
  color: #1E293B;
  border-bottom-color: #F1F5F9;
}

body.admin-body.theme-light .admin-table tr:hover td {
  background: #F8FAFC;
}

body.admin-body.theme-light .btn-table-action {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #334155;
}

body.admin-body.theme-light .btn-table-action:hover {
  background: #E2E8F0;
  color: #0F172A;
}

body.admin-body.theme-light .admin-modal-box {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

body.admin-body.theme-light .admin-modal-title {
  color: #0F172A;
}

body.admin-body.theme-light .admin-modal-head,
body.admin-body.theme-light .admin-modal-foot {
  border-color: #E2E8F0;
}

.btn-table-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.btn-table-action.danger {
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.3);
}

.btn-table-action.danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Admin Forms */
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-group label {
  font-size: 0.78125rem;
  font-weight: 700;
  color: #94A3B8;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
  background: #070B14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #FFFFFF;
  padding: 10px 14px;
  font-size: 0.875rem;
}

.admin-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.admin-photo-guide {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.admin-photo-guide .guide-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #38BDF8;
  margin-bottom: 8px;
}
.admin-photo-guide .guide-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.admin-photo-guide .guide-box {
  background: #070B14;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  font-size: 0.75rem;
  color: #94A3B8;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  line-height: 1.2;
}
body.admin-body.theme-light .admin-photo-guide {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
body.admin-body.theme-light .admin-photo-guide .guide-box {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #64748B;
}

/* Admin Modals */
.admin-modal-layer {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal-layer.hidden {
  display: none;
}

.admin-modal-box {
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}

.admin-modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-modal-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #FFFFFF;
}

.admin-modal-close {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 1.25rem;
  cursor: pointer;
}

.admin-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-modal-foot {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

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

@media (max-width: 768px) {
  .admin-photo-guide .guide-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .admin-sidebar {
    position: fixed;
    transform: translateX(-100%);
    width: 280px;
    max-width: 82vw;
    z-index: 2100;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.7);
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 1.25rem;
  }
  .admin-sidebar-close-btn {
    display: flex;
  }
  .admin-top-bar {
    padding: 12px 16px;
    gap: 12px;
  }
  .admin-page-title {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
  }
  .admin-top-fx-chip {
    display: none;
  }
  .btn-goto-client {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
  .admin-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .admin-kpi-card {
    padding: 14px;
    gap: 4px;
  }
  .admin-kpi-val {
    font-size: 1.35rem;
  }
  .admin-content-body {
    padding: 14px 12px;
  }
  .admin-card {
    padding: 16px 12px;
    border-radius: 10px;
    margin-bottom: 16px;
  }
  .admin-card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-card-actions {
    justify-content: flex-end;
  }
  .admin-card-title {
    font-size: 1rem;
  }
  .admin-filter-bar {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .admin-search-input,
  .admin-select-input {
    width: 100% !important;
    height: 42px;
  }
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table {
    min-width: 640px;
  }
  .admin-table th,
  .admin-table td {
    padding: 10px 12px;
    font-size: 0.78125rem;
  }
  .btn-table-action {
    padding: 7px 10px;
    font-size: 0.75rem;
    min-height: 32px;
  }
  .admin-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .admin-modal-box {
    max-width: calc(100vw - 24px);
    max-height: 88vh;
    border-radius: 12px;
  }
  .admin-modal-head,
  .admin-modal-body,
  .admin-modal-foot {
    padding: 16px;
  }
  .admin-modal-body {
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* PRINT STYLES                                                               */
/* -------------------------------------------------------------------------- */

@media print {
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .print-hide, .app-header, .top-ticker-bar, .app-footer, .mobile-sticky-action-bar, .toast-viewport {
    display: none !important;
  }

  .contract-modal-window {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
  }

  .contract-scroll-viewport {
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #FFFFFF !important;
  }

  .invoice-paper {
    padding: 0 !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* HEYDEALER CLEAN WHITE SELL PAGE DEDICATED STYLES (sell.html)               */
/* -------------------------------------------------------------------------- */

.hd-sell-page-body {
  background-color: #FFFFFF;
  color: #0F172A;
  min-height: 100vh;
  font-family: var(--font-family-base);
}

/* 1. 히어로 차량 번호판 인풋 섹션 */
.hd-sell-hero-section {
  padding: 56px 20px 48px;
  text-align: center;
  background-color: #FFFFFF;
}

.hd-sell-hero-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hd-sell-main-heading {
  font-size: 2.25rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.35;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.hd-sell-main-heading .text-blue {
  color: #0055FE;
}

.hd-sell-sub-desc {
  font-size: 1rem;
  color: #475569;
  font-weight: 600;
  margin-bottom: 28px;
}

/* 실제 한국 차량 번호판 디자인 플레이트 프레임 */
.hd-car-plate-container {
  width: 100%;
  max-width: 440px;
  margin-bottom: 14px;
}

.hd-car-plate-frame {
  position: relative;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 30%, #F1F5F9 100%);
  border: 4px solid #1E293B;
  border-radius: 14px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  transition: all 0.2s ease;
}

.hd-car-plate-frame:focus-within {
  border-color: #0055FE;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(0, 85, 254, 0.2);
}

.plate-bolt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #CBD5E1 30%, #64748B 100%);
  border-radius: 50%;
  border: 1px solid #475569;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6);
}
.plate-bolt.left { left: 16px; }
.plate-bolt.right { right: 16px; }

.plate-input-field {
  width: 100%;
  border: none;
  background: none;
  font-size: 2.25rem;
  font-weight: 900;
  color: #0F172A;
  text-align: center;
  letter-spacing: 0.12em;
  outline: none;
  box-shadow: none;
}

.plate-input-field::placeholder {
  color: #CBD5E1;
  font-weight: 900;
}

.plate-input-field:focus {
  border: none;
  box-shadow: none;
}

/* 빠른 차량 번호 선택 칩 */
.hd-sell-quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
}

.btn-plate-chip {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-plate-chip:hover {
  background: #0055FE;
  color: #FFFFFF;
  border-color: #0055FE;
}

/* 대형 10초 확인 파란 버튼 */
.btn-hd-sell-confirm {
  width: 100%;
  max-width: 440px;
  height: 56px;
  background-color: #0055FE;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 85, 254, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.16s ease;
}

.btn-hd-sell-confirm:hover {
  background-color: #0045D8;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 85, 254, 0.45);
}

/* 2. 블랙 마키 띠배너 */
.hd-sell-marquee-strip {
  background-color: #030712;
  color: #FFFFFF;
  height: 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 50;
}

.hd-sell-marquee-track {
  display: flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: hd-marquee 32s linear infinite;
  font-size: 0.84375rem;
  font-weight: 600;
}

.hd-sell-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #CBD5E1;
}

.hd-sell-marquee-item strong {
  color: #FFFFFF;
}

/* 3. 4단계 프로세스 카드 섹션 */
.hd-sell-process-section {
  padding: 64px 20px 72px;
  background-color: #FFFFFF;
  text-align: center;
}

.hd-process-container {
  max-width: 1200px;
  margin: 0 auto;
}

.hd-process-top-badge {
  font-size: 1.75rem;
  color: #0055FE;
  margin-bottom: 12px;
  line-height: 1;
}

.hd-process-section-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.4;
  margin-bottom: 40px;
}

.hd-process-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

/* 개별 프로세스 카드 */
.hd-process-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 380px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hd-process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.process-card-header {
  margin-bottom: 16px;
}

.step-badge-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #0055FE;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.step-card-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #0F172A;
  display: block;
  margin-bottom: 4px;
}

.step-card-desc {
  font-size: 0.8125rem;
  color: #64748B;
  line-height: 1.4;
}

/* 카드 내부 목업 프레임 */
.process-mock-screen {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
}

.mock-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0F172A;
  text-align: center;
  display: block;
  margin-bottom: 8px;
}

.mock-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 0.625rem;
  color: #94A3B8;
  font-weight: 700;
}

.mock-calendar-grid .day.active {
  background: #0055FE;
  color: #FFFFFF;
  border-radius: 50%;
}

.mock-bid-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock-bid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.71875rem;
}

.mock-bid-item.lead {
  border-color: #0055FE;
  background: #EFF6FF;
}

.mock-confirm-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font-size: 0.71875rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-mock-confirm {
  background: #0055FE;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 6px;
  font-size: 0.71875rem;
  font-weight: 800;
}

/* 4번째 블루 강조 카드 (숫자 0) */
.hd-process-card.blue-highlight {
  background: linear-gradient(135deg, #2B66FF 0%, #1A4BD6 100%);
  color: #FFFFFF;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 10px 30px rgba(43, 102, 255, 0.35);
}

.zero-big-number {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}

.zero-card-lead {
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 8px;
}

.zero-card-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.btn-process-more-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-process-more-detail:hover {
  border-color: #0F172A;
  background: #F8FAFC;
}

/* 4. 자주 묻는 질문 FAQ 섹션 */
.hd-sell-faq-section {
  padding: 60px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.faq-sec-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 24px;
}

.hd-sell-faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #E2E8F0;
}

.hd-sell-faq-item {
  border-bottom: 1px solid #E2E8F0;
  padding: 18px 0;
}

.hd-sell-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
}

.hd-sell-faq-item summary::-webkit-details-marker {
  display: none;
}

.hd-sell-faq-item .faq-ans-text {
  padding-top: 12px;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.6;
}

/* 5. 판매후기 섹션 */
.hd-sell-reviews-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.reviews-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.reviews-sec-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0F172A;
}

.hd-sell-reviews-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 48px;
  gap: 20px;
  align-items: center;
}

.sell-review-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 290px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.rev-car-header {
  margin-bottom: 8px;
}

.rev-car-title {
  font-size: 1rem;
  font-weight: 900;
  color: #0F172A;
  display: block;
}

.rev-stars-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 2px;
}

.rev-stars-time .stars {
  color: #0055FE;
  font-weight: 900;
}

.rev-comment {
  font-size: 0.84375rem;
  color: #334155;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.rev-img-box {
  height: 110px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #1E293B;
}

.btn-rev-next-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-rev-next-arrow:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

/* 6. 앱에서 더 많은 경험하기 (QR & 스마트폰 2대 3D 목업) */
.hd-app-experience-section {
  padding: 80px 20px;
  background-color: #FFFFFF;
  max-width: 1200px;
  margin: 0 auto;
}

.app-exp-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: center;
}

.app-exp-left {
  display: flex;
  flex-direction: column;
}

.app-exp-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.3;
  margin-bottom: 14px;
}

.app-exp-sub {
  font-size: 1rem;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 28px;
}

.app-qr-cluster {
  display: flex;
  align-items: center;
  gap: 16px;
}

.qr-frame-box {
  padding: 12px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 14px;
  display: inline-flex;
}

/* 듀얼 스마트폰 목업 */
.app-exp-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.phones-dual-mockup {
  display: flex;
  gap: 20px;
  align-items: center;
}

.phone-mock-frame {
  width: 240px;
  height: 480px;
  background: #FFFFFF;
  border: 8px solid #0F172A;
  border-radius: 36px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

.phone-header-notch {
  width: 70px;
  height: 12px;
  background: #0F172A;
  border-radius: 9999px;
  margin: 0 auto 12px;
}

.mock-graph-box {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  border: 1px solid #E2E8F0;
}

.graph-bar {
  width: 14px;
  background: #CBD5E1;
  border-radius: 4px;
}
.graph-bar.highlight {
  background: #0055FE;
  height: 100px;
}

.mock-dealer-list-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.dealer-bid-pill {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
}

/* 모바일 반응형 처리 */
@media (max-width: 1024px) {
  .hd-process-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hd-sell-reviews-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .btn-rev-next-arrow {
    display: none;
  }
  .app-exp-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .app-exp-left {
    align-items: center;
  }
}

@media (max-width: 768px) {
  .hd-sell-main-heading {
    font-size: 1.75rem;
  }
  .plate-input-field {
    font-size: 1.75rem;
  }
  .hd-car-plate-frame {
    height: 72px;
  }
  .hd-process-cards-grid {
    grid-template-columns: 1fr;
  }
  .hd-sell-reviews-row {
    grid-template-columns: 1fr;
  }
  .phones-dual-mockup {
    flex-direction: column;
  }
  .phone-mock-frame {
    width: 260px;
    height: 440px;
  }
}

/* -------------------------------------------------------------------------- */
/* HEYDEALER CLEAN HIDDEN HISTORY PAGE DEDICATED STYLES (history.html 1:1)    */
/* -------------------------------------------------------------------------- */

.hd-history-page-body {
  background-color: #FFFFFF;
  color: #0F172A;
  min-height: 100vh;
  font-family: var(--font-family-base);
}

/* 1. 상단 GNB (스크린샷 다크 테마 일체형) */
.hd-history-gnb {
  background: #111625;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.hd-history-gnb-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hd-history-gnb-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hd-history-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.hd-logo-dots {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: radial-gradient(circle, #38BDF8 40%, #0284C7 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}

.hd-logo-text {
  font-size: 1.35rem;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.04em;
}

.hd-history-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hd-history-nav .hd-nav-link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.16s ease;
}

.hd-history-nav .hd-nav-link:hover {
  color: #FFFFFF;
}

.hd-history-nav .hd-nav-link.active {
  color: #FFFFFF;
  font-weight: 900;
}

/* 2. 다크 히어로 섹션 (스크린샷 1:1) */
.hd-history-hero {
  background: #111625;
  color: #FFFFFF;
  padding: 84px 20px 68px;
  text-align: center;
  position: relative;
}

.history-hero-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.history-hero-heading {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  color: #FFFFFF;
}

.history-hero-sub {
  font-size: 1rem;
  color: #94A3B8;
  margin-bottom: 32px;
}

/* 번호판 인풋 그래픽 박스 */
.history-plate-box {
  width: 100%;
  max-width: 440px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 6px 16px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 24px;
  border: 3px solid #CBD5E1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.history-plate-box:focus-within {
  border-color: #0055FE;
  box-shadow: 0 0 0 4px rgba(0, 85, 254, 0.25);
}

.history-plate-input {
  width: 100%;
  border: none;
  background: none;
  font-size: 2.75rem;
  font-weight: 900;
  color: #1E293B;
  text-align: center;
  letter-spacing: 0.1em;
  outline: none;
}

.history-plate-input::placeholder {
  color: #CBD5E1;
  font-weight: 800;
}

/* 퀵 칩 */
.history-quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.history-quick-chips .chip-label {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 700;
}

.history-quick-chips .btn-plate-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #CBD5E1;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.history-quick-chips .btn-plate-chip:hover {
  background: #0055FE;
  color: #FFFFFF;
  border-color: #0055FE;
}

/* 대형 블루 버튼 (5초 만에 확인 >) */
.btn-history-5sec {
  width: 100%;
  max-width: 440px;
  height: 56px;
  background-color: #0055FE;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 85, 254, 0.4);
  transition: all 0.16s ease;
}

.btn-history-5sec:hover {
  background-color: #0045D8;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 85, 254, 0.5);
}

.btn-history-5sec .arr-ico {
  font-size: 1.35rem;
  line-height: 1;
}

/* 3. 블랙 마키 띠배너 */
.hd-history-marquee-strip {
  background-color: #000000;
  color: #94A3B8;
  height: 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 0.84375rem;
  position: relative;
  z-index: 50;
}

.hd-history-marquee-track {
  display: flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: hd-marquee 32s linear infinite;
}

.m-item {
  color: #94A3B8;
  font-weight: 500;
}

.m-item.highlight {
  color: #FFFFFF;
  font-weight: 800;
}

/* 4. 이 차, 사도 되는걸까? 섹션 (스크린샷 1:1) */
.hd-doubt-section {
  padding: 84px 20px 80px;
  text-align: center;
  background-color: #FFFFFF;
}

.doubt-inner-wrap {
  max-width: 580px;
  margin: 0 auto;
}

.doubt-sec-title {
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}

.doubt-bubbles-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.doubt-bubble-pill {
  padding: 14px 28px;
  border-radius: 9999px;
  background: #F3F4F6;
  font-size: 1rem;
  font-weight: 700;
  color: #374151;
  display: inline-block;
}

.doubt-bubble-pill.bubble-1 {
  transform: translateX(-12px);
}

.doubt-bubble-pill.bubble-2 {
  transform: translateX(20px);
}

.doubt-bubble-pill.bubble-3 {
  transform: translateX(-16px);
}

/* 5. 타임라인 & 정비 이력 쇼케이스 (스크린샷 1:1) */
.hd-history-timeline-showcase {
  padding: 40px 20px 100px;
  background-color: #FFFFFF;
}

.timeline-showcase-container {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.timeline-feature-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: center;
}

.timeline-feature-row.reverse {
  grid-template-columns: 1fr 340px;
}

.feature-heading {
  font-size: 2.25rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.32;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.feature-sub {
  font-size: 1.0625rem;
  color: #64748B;
  font-weight: 600;
}

/* 스마트폰 화면 목업 프레임 */
.history-phone-mockup {
  width: 320px;
  height: 520px;
  background: #FFFFFF;
  border: 9px solid #0F172A;
  border-radius: 38px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
}

.phone-mock-top-bar {
  padding: 14px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F1F5F9;
}

.p-plate-tag {
  font-size: 1rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: 0.04em;
}

.p-icons {
  display: flex;
  gap: 10px;
  color: #334155;
}

.phone-tabs-bar {
  display: flex;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 16px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 0.78125rem;
  font-weight: 800;
  color: #94A3B8;
  cursor: pointer;
}

.tab-item.active {
  color: #0F172A;
  border-bottom: 2px solid #0F172A;
}

/* 타임라인 플로우 */
.phone-timeline-flow {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #F8FAFC;
  scrollbar-width: none;
}

.phone-timeline-flow::-webkit-scrollbar {
  display: none;
}

.timeline-node-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.node-time-col {
  width: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 4px;
}

.node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBD5E1;
}

.node-dot.blue { background: #0055FE; }
.node-dot.orange { background: #F97316; }

.node-date {
  font-size: 0.75rem;
  font-weight: 800;
  color: #64748B;
}

.node-card-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.75rem;
}

.node-card-box.highlight-blue {
  border-color: #BFDBFE;
  background: #EFF6FF;
}

.node-title-link {
  font-size: 0.8125rem;
  color: #0F172A;
  text-decoration: underline;
  cursor: pointer;
}

.node-title.text-black {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
}

.node-title.text-blue {
  font-size: 0.8125rem;
  font-weight: 900;
  color: #0055FE;
}

.node-sub {
  color: #94A3B8;
  font-size: 0.6875rem;
}

.node-link-sub {
  color: #64748B;
  text-decoration: underline;
  font-size: 0.6875rem;
  margin-top: 2px;
}

.mock-btn-blue-outline {
  border: 1px solid #0055FE;
  background: #FFFFFF;
  color: #0055FE;
  font-size: 0.6875rem;
  font-weight: 800;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  margin-top: 6px;
}

.timeline-year-divider {
  font-size: 1.125rem;
  font-weight: 900;
  color: #0F172A;
  padding: 6px 0 2px 46px;
}

/* 정비 이력 리스트 목업 */
.repair-records-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F8FAFC;
  scrollbar-width: none;
}

.repair-records-list::-webkit-scrollbar {
  display: none;
}

.repair-record-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.repair-record-card.danger {
  border-color: #FECACA;
  background: #FEF2F2;
}

.rep-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.rep-badge {
  font-size: 0.71875rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rep-badge.amber { background: #FEF3C7; color: #D97706; }
.rep-badge.blue { background: #EFF6FF; color: #2563EB; }
.rep-badge.gray { background: #F1F5F9; color: #475569; }
.rep-badge.red { background: #FEE2E2; color: #DC2626; }

.rep-date {
  font-size: 0.6875rem;
  color: #94A3B8;
  font-weight: 600;
}

.rep-bullets {
  list-style: none;
  font-size: 0.6875rem;
  color: #475569;
  line-height: 1.5;
}

.rep-money-sum {
  font-size: 1.1875rem;
  font-weight: 900;
  color: #0F172A;
  margin-top: 2px;
}

.rep-money-sum.text-red {
  color: #DC2626;
}

.rep-breakdown-sub {
  font-size: 0.65625rem;
  color: #94A3B8;
}

/* 6. 이력 조회한 고객 후기 섹션 (스크린샷 1:1) */
.hd-history-reviews-section {
  padding: 72px 20px 84px;
  background-color: #FFFFFF;
  border-top: 1px solid #F1F5F9;
}

.reviews-inner-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.reviews-sec-title {
  font-size: 1.875rem;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 28px;
  letter-spacing: -0.03em;
}

.history-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.history-review-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 230px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.history-review-card:hover {
  transform: translateY(-3px);
  border-color: #CBD5E1;
}

.rev-quote-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 10px;
}

.rev-quote-body {
  font-size: 0.84375rem;
  color: #475569;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

.rev-car-plate-tag {
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 700;
}

/* 7. 푸터 커스텀 */
.history-footer-custom {
  background-color: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.history-biz-block {
  display: block !important;
  border-top: 1px solid #E2E8F0;
  padding-top: 24px;
}

.history-sns-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* 8. 우측 하단 플로팅 독 (스크린샷 1:1 "작은 창 열기") */
.history-floating-mini-window {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 1000;
}

.dock-preview-card {
  width: 170px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  text-align: center;
}

.dock-thumb-header {
  height: 90px;
  background: #111625;
  color: #FFFFFF;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dock-hero-mini {
  font-size: 0.5625rem;
  line-height: 1.15;
}

.dock-hero-mini strong {
  display: block;
  font-size: 0.625rem;
}

.dock-mini-input {
  background: #FFFFFF;
  color: #1E293B;
  font-weight: 900;
  font-size: 0.5rem;
  border-radius: 2px;
  padding: 1px 4px;
  margin-top: 3px;
}

.dock-mini-btn {
  width: 40px;
  height: 6px;
  background: #0055FE;
  border-radius: 2px;
  margin-top: 3px;
}

.dock-text-wrap {
  padding: 8px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}

.btn-dock-open-window {
  width: 170px;
  height: 40px;
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  transition: all 0.16s ease;
}

.btn-dock-open-window:hover {
  background: #0055FE;
}

@media (max-width: 768px) {
  .hd-history-gnb-left { gap: 16px; }
  .hd-history-nav { display: none; }
  .history-hero-heading { font-size: 2rem; }
  .history-plate-box { height: 70px; }
  .history-plate-input { font-size: 2.1rem; }
  .timeline-feature-row, .timeline-feature-row.reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .history-reviews-grid { grid-template-columns: 1fr; }
  .history-floating-mini-window { display: none; }
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE BREAKPOINTS                                                     */
/* -------------------------------------------------------------------------- */

/* Tablet & Smaller Desktops (768px ~ 1199px) */
@media (max-width: 1199px) {
  .auction-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .hero-title, .sell-main-title {
    font-size: 2.5rem;
  }

  .quick-filter-form {
    grid-template-columns: 1fr 1fr;
  }

  .quick-filter-form .btn-search {
    grid-column: span 2;
  }

  .modal-split-grid, .auction-split-grid {
    grid-template-columns: 1fr;
  }

  .modal-left-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .sell-layout-container {
    grid-template-columns: 1fr;
  }

  .sell-summary-sidebar {
    position: static;
  }

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

  .buyer-welcome-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .buyer-wallet-cluster {
    width: 100%;
    justify-content: space-between;
  }

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

  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand-col {
    grid-column: span 2;
  }
}

/* Mobile Screens (max-width: 767px) */
@media (max-width: 767px) {
  .top-ticker-bar .mobile-hide {
    display: none;
  }

  .ticker-container {
    padding: 6px 16px;
  }

  .header-inner {
    padding: 12px 16px;
  }

  .desktop-nav, .brand-badge {
    display: none;
  }

  .hero-section, .sell-hero-section {
    padding: 40px 16px 32px;
  }

  .hero-title, .sell-main-title {
    font-size: 1.875rem;
  }

  .hero-description, .sell-main-description {
    font-size: 0.9375rem;
  }

  .stepper-indicator-bar {
    overflow-x: auto;
    padding: 14px 16px;
    justify-content: flex-start;
    gap: 16px;
  }

  .stepper-step {
    flex-shrink: 0;
  }

  .stepper-line {
    display: none;
  }

  .quick-filter-form, .form-row-2col, .form-row-3col, .inspect-checklist-grid {
    grid-template-columns: 1fr;
  }

  .vin-lookup-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .vin-field-input {
    width: 100%;
  }

  .landed-benchmarks-grid, .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }

  .uploaded-previews-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-metrics-strip {
    flex-direction: column;
    gap: 16px;
    border-radius: var(--radius-lg);
    padding: 20px;
  }

  .metric-divider {
    display: none;
  }

  .section-headline-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .tab-chip {
    flex-shrink: 0;
  }

  .auction-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .modal-window {
    max-height: 96vh;
    border-radius: var(--radius-lg);
  }

  .modal-left-panel, .modal-right-panel, .sell-card-panel, .dashboard-table-card {
    padding: 16px;
  }

  .diagnostic-grid, .inspection-matrix-grid, .specs-table-grid, .param-row-2col {
    grid-template-columns: 1fr;
  }

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

  .calc-row {
    grid-template-columns: 1fr;
  }

  .buyer-meta-cluster {
    flex-direction: column;
    align-items: flex-start;
  }

  .buyer-display-name {
    flex-direction: column;
    gap: 4px;
    font-size: 1.375rem;
  }

  .buyer-wallet-cluster {
    flex-direction: column;
    align-items: stretch;
  }

  .stepper-track-container {
    flex-direction: column;
    gap: 20px;
  }

  .step-line {
    display: none;
  }

  .logistics-meta-strip {
    grid-template-columns: 1fr;
  }

  .invoice-paper {
    padding: 20px;
  }

  .invoice-header, .invoice-parties-grid, .invoice-signature-row {
    flex-direction: column;
    gap: 20px;
  }

  .invoice-title-block {
    text-align: left;
  }

  .sell-summary-sidebar {
    display: none;
  }

  .mobile-sell-bottom-bar, .mobile-sticky-action-bar {
    display: block;
  }

  .sell-main-layout, .main-content-layout, .auction-main-viewport, .dashboard-main-layout {
    padding-bottom: 120px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* -------------------------------------------------------------------------- */
/* HEYDEALER DETAIL PAGE DEDICATED STYLES (auction.html - CLEAN ALL-WHITE UX)  */
/* -------------------------------------------------------------------------- */

.hd-detail-body {
  background-color: #FFFFFF;
  color: #0F172A;
  min-height: 100vh;
  font-family: var(--font-family-base);
}

.hd-mobile-detail-header {
  display: none !important;
}

.hd-mobile-bottom-fixed-bar {
  display: none !important;
}

/* Clean Top Navigation */
.hd-nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #E2E8F0;
}

.hd-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hd-nav-left {
  display: flex;
  align-items: center;
  gap: 36px;
}

.hd-brand-logo {
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
}

.hd-logo-text {
  font-size: 1.45rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.04em;
}

.hd-logo-sub {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0055FE;
  letter-spacing: 0.04em;
}

.hd-menu-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.hd-link {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #64748B;
  transition: color var(--transition-fast);
}

.hd-link:hover, .hd-link.active {
  color: #0F172A;
}

.hd-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hd-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 7px 16px;
  width: 240px;
  transition: all 0.2s ease;
}

.hd-search-box:focus-within {
  background: #FFFFFF;
  border-color: #0055FE;
  box-shadow: 0 0 0 3px rgba(0, 85, 254, 0.1);
}

.hd-search-box input {
  background: none;
  border: none;
  color: #0F172A;
  font-size: 0.84375rem;
  width: 100%;
  outline: none;
}

.hd-user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hd-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
  background: #FFFFFF;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.hd-icon-btn:hover {
  color: #0F172A;
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.hd-avatar-dot {
  font-size: 1rem;
}

/* 360° Studio Viewer & Rotating Stage */
.hd-viewer-hero {
  position: relative;
  background: linear-gradient(180deg, #F8FAFC 0%, #EDF2F7 100%);
  border-bottom: 1px solid #E2E8F0;
  overflow: hidden;
}

.hd-viewer-viewport {
  position: relative;
  max-width: 1280px;
  height: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hd-photo-counter-pill {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(15, 23, 42, 0.7);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  z-index: 10;
  letter-spacing: 0.05em;
}

.hd-360-guide {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #E2E8F0;
  padding: 6px 16px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 10;
}

.hd-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #E2E8F0;
  color: #334155;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.hd-arrow-btn:hover {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #CBD5E1;
}

.hd-arrow-btn.left { left: 24px; }
.hd-arrow-btn.right { right: 24px; }

.hd-car-stage-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.4s var(--ease-out);
  cursor: grab;
}

.hd-car-stage-center:active {
  cursor: grabbing;
}

.hd-car-graphic-silhouette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
}

.mercedes-sedan-render {
  width: 360px;
  height: 200px;
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 85%);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
  position: relative;
}

.hd-plate-sticker {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  background: #FFFFFF;
  padding: 4px 18px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 1px solid #CBD5E1;
}

.hd-cluster-thumb-card {
  position: absolute;
  bottom: 24px;
  right: 28px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  z-index: 10;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.hd-cluster-thumb-card:hover {
  transform: translateY(-2px);
}

.cluster-img-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cluster-mileage-tag {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
}

.hd-fullscreen-btn {
  position: absolute;
  bottom: 24px;
  left: 28px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hd-view-toggle-capsule {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 3px;
  gap: 4px;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.toggle-pill {
  padding: 6px 20px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  border-radius: 9999px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle-pill.active {
  background: #0F172A;
  color: #FFFFFF;
}

/* Black Trust Banner Strip (헤이딜러 인증 띠배너) */
.hd-black-trust-banner {
  background: #03060C;
  color: #FFFFFF;
  padding: 12px 24px;
}

.hd-trust-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}

.trust-brand {
  font-weight: 900;
  color: #FFFFFF;
}

.trust-tag {
  color: #60A5FA;
  font-size: 0.8125rem;
  margin-left: 2px;
}

.trust-divider-bar {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #4B5563;
  margin: 0 10px;
  vertical-align: middle;
}

.trust-text {
  color: #FFFFFF;
  font-weight: 700;
}

/* Main Split Layout */
.hd-main-layout {
  padding: 40px 0 80px;
  background: #FFFFFF;
}

.hd-layout-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.hd-split-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

/* Left Column Content */
.hd-col-content {
  display: flex;
  flex-direction: column;
}

.hd-sec-header {
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 28px;
  margin-bottom: 12px;
}

.title-with-arrow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.hd-vehicle-title {
  font-size: 1.875rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
}

.arrow-ico {
  font-size: 1.5rem;
  color: #94A3B8;
  font-weight: 700;
}

.hd-vehicle-sub {
  font-size: 1.125rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 20px;
}

/* 스크린샷 1:1 스펙 2열 리스트 */
.hd-mobile-specs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 36px;
  margin-bottom: 20px;
}

.m-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  padding: 4px 0;
}

.m-spec-label {
  color: #64748B;
  font-weight: 600;
}

.m-spec-val {
  color: #0F172A;
  font-weight: 700;
}

.m-spec-link {
  color: #0055FE;
  font-weight: 800;
  text-decoration: none;
}

.hd-specs-btn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}

.btn-specs-pill {
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-specs-pill:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.specs-view-heart-count {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #94A3B8;
}

/* Sections Common Structure (좌측 140px 고정 헤딩, 우측 콘텐츠 그리드) */
.hd-section-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid #E2E8F0;
  align-items: start;
}

.sec-heading {
  font-size: 1.1875rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.sec-body-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.color-text-specs {
  display: flex;
  gap: 28px;
  margin-bottom: 16px;
}

.color-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.color-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 4px;
}

.color-name {
  color: #0F172A;
  font-weight: 800;
}

.hd-dual-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.photo-cell {
  position: relative;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
  height: 140px;
}

.photo-render {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #1E293B;
}

.photo-label-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.75);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

/* 주요 옵션 클린 2열 */
.hd-options-checklist-clean {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 12px;
}

.opt-row-clean {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
  padding: 4px 0;
}

.opt-row-clean .info-circle {
  color: #94A3B8;
  font-size: 0.8125rem;
}

.opt-row-clean.muted {
  color: #94A3B8;
}

.options-more-container {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed #E2E8F0;
}

.options-more-container.open {
  display: grid;
}

.option-more-fold-row {
  text-align: center;
  padding: 10px 0 16px;
}

.btn-fold-options {
  background: none;
  border: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-fold-options:hover {
  color: #0F172A;
}

.hd-recommend-bubble-card {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid #E2E8F0;
  margin-top: 12px;
}

.rec-bubble-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
}

.rec-bubble-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.5;
}

.rec-bubble-bullets li::before {
  content: "• ";
  color: #64748B;
  font-weight: 800;
}

/* 관리 상태 */
.hd-stat-lines-clean {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.stat-line-clean {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.875rem;
}

.stat-line-clean .stat-lbl {
  width: 60px;
  color: #64748B;
  font-weight: 600;
}

.stat-line-clean .stat-val {
  color: #0F172A;
  font-weight: 800;
}

.m-defect-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 12px;
}

.m-defect-list li::before {
  content: "• ";
  color: #0F172A;
}

.maintenance-photo-hint {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-bottom: 10px;
}

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

.tri-cell {
  height: 90px;
  background: #F1F5F9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
}

.tri-render {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #1E293B;
}

/* heydealer eye™ Section (올화이트 클린 테마) */
.hd-eye-section {
  padding: 36px 0;
  border-bottom: 1px solid #E2E8F0;
}

.eye-brand-badge-clean {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 14px;
}

.eye-brand-badge-clean .tm {
  font-size: 0.75rem;
  color: #0055FE;
}

.hd-xray-frame-stage {
  height: 220px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.car-xray-render {
  width: 260px;
  height: 130px;
  background: radial-gradient(circle, #3B82F6 0%, #1E3A8A 100%);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.2);
}

.hd-inspect-checklist-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diag-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.diag-title-row .check-blue {
  color: #0055FE;
  font-weight: 900;
}

.btn-inspect-photo-link {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #64748B;
  cursor: pointer;
  text-decoration: underline;
}

.diag-sub-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  font-size: 0.8125rem;
}

.sub-item {
  display: flex;
  justify-content: space-between;
}

.sub-item span { color: #64748B; }
.sub-item strong { color: #0F172A; }

.diag-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #E2E8F0;
}

.btn-diag-tab {
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-diag-tab:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

/* 링크 박스 */
.hd-btn-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  font-size: 0.875rem;
  color: #0F172A;
  text-decoration: none;
  margin-top: 10px;
  transition: all 0.16s ease;
}

.hd-btn-card-link:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hd-btn-card-link strong {
  color: #0055FE;
}

.hd-btn-card-link .arr {
  color: #94A3B8;
  font-weight: 700;
}

/* 살균 세차 */
.clean-check-list-blue {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  color: #334155;
  font-weight: 700;
  margin-bottom: 12px;
}

.hd-cleaning-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.clean-cell {
  position: relative;
  height: 120px;
  background: #1E293B;
  border-radius: 8px;
  overflow: hidden;
}

.c-render {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.c-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 8px;
  border-radius: 4px;
}

/* 총 구매 비용 */
.hd-cost-sheet-clean {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.cost-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #475569;
}

.cost-line .val {
  font-weight: 700;
  color: #0F172A;
}

.cost-line .val.free {
  color: #0055FE;
}

.cost-line .strike {
  color: #94A3B8;
}

.cost-sum-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid #E2E8F0;
  margin-top: 6px;
}

.lbl-sum {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
}

.val-sum {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0F172A;
}

.hd-refund-assurance-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  margin-bottom: 20px;
  transition: all 0.16s ease;
}

.hd-refund-assurance-box:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
}

.refund-title {
  font-size: 0.875rem;
  color: #0F172A;
  display: block;
}

.refund-title strong {
  color: #0055FE;
}

.refund-sub {
  font-size: 0.75rem;
  color: #64748B;
}

.compare-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
}

.compare-dual-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.btn-compare-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-compare-box:hover {
  border-color: #0F172A;
  background: #F8FAFC;
}

.btn-compare-box strong {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
}

.btn-compare-box span {
  font-size: 0.6875rem;
  color: #64748B;
}

/* 숨은 이력 */
.history-list-clean {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.hist-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.hist-line .lbl { color: #64748B; font-weight: 600; }
.hist-line .val { color: #0F172A; font-weight: 800; }

.btn-history-round, .btn-reviews-round {
  width: 100%;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-history-round:hover, .btn-reviews-round:hover {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

/* 타 본 사람들 이야기 */
.hd-review-chips-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.rev-chip {
  padding: 6px 14px;
  border-radius: 9999px;
  background: #F1F5F9;
  border: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  white-space: nowrap;
}

.rev-chip.active {
  background: #0F172A;
  color: #FFFFFF;
}

.hd-review-stories-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.m-story-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 140px;
}

.story-body {
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.5;
}

.story-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 600;
}

/* 캐러셀 3종: 비슷한 차, 함께 본 모델, 같은 예산대 추천 */
.hd-together-models-carousel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;
}

.together-car-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.together-car-card:hover {
  transform: translateY(-3px);
}

.t-card-thumb {
  position: relative;
  height: 100px;
  background: #F1F5F9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.t-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #1E293B;
}

.t-heart {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #94A3B8;
  font-size: 0.875rem;
  cursor: pointer;
}

.t-car-name {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-trim-name {
  font-size: 0.71875rem;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.t-spec-meta {
  font-size: 0.6875rem;
  color: #94A3B8;
  margin-bottom: 4px;
}

.t-price-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.bold-blue {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #0055FE;
}

.bold-dark {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #0F172A;
}

/* 먼저 구매한 후기 */
.hd-buyer-photo-reviews-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.m-buyer-rev-card {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  background: #FFFFFF;
}

.b-rev-photos {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.p-thumb {
  width: 65px;
  height: 65px;
  border-radius: 6px;
  background: #F1F5F9;
  background-size: cover;
  background-position: center;
  background-color: #1E293B;
}

.b-rev-car-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  display: block;
  margin-bottom: 2px;
}

.b-rev-date {
  font-size: 0.6875rem;
  color: #94A3B8;
}

.b-rev-text {
  font-size: 0.78125rem;
  color: #475569;
  line-height: 1.45;
  margin-top: 6px;
}

/* FAQ 10종 아코디언 */
.hd-faq-accordion-clean {
  display: flex;
  flex-direction: column;
}

.faq-accordion-item {
  border-bottom: 1px solid #F1F5F9;
  padding: 14px 0;
}

.faq-accordion-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #0F172A;
  cursor: pointer;
}

.faq-accordion-item summary::-webkit-details-marker {
  display: none;
}

.faq-ans {
  padding-top: 10px;
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.5;
}

/* 서비스 개선 의견 배너 */
.hd-feedback-banner-section {
  text-align: center;
  padding: 36px 20px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  margin-top: 20px;
  margin-bottom: 20px;
}

.feedback-icon-bulb {
  font-size: 2rem;
  margin-bottom: 8px;
}

.feedback-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #0F172A;
  display: block;
  margin-bottom: 6px;
}

.feedback-sub {
  font-size: 0.8125rem;
  color: #64748B;
  line-height: 1.45;
  margin-bottom: 16px;
}

.btn-submit-feedback {
  padding: 10px 24px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-submit-feedback:hover {
  background: #0F172A;
  color: #FFFFFF;
}

/* Right Column Sticky Purchase Cockpit (스크린샷 1:1 클린 화이트 카드 - 스마트 스크롤 & 컴팩트 다이어트) */
.hd-col-sticky {
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 85px);
  display: flex;
  flex-direction: column;
  align-self: start;
}

.hd-sticky-card-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.hd-sticky-card-box::-webkit-scrollbar {
  width: 5px;
}

.hd-sticky-card-box::-webkit-scrollbar-track {
  background: transparent;
}

.hd-sticky-card-box::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}

.hd-sticky-card-box::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.sticky-head-pricing {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 2px;
}

.price-stack {
  display: flex;
  flex-direction: column;
}

.original-price {
  font-size: 0.75rem;
  color: #94A3B8;
  text-decoration: line-through;
  line-height: 1.1;
}

.main-bold-price {
  font-size: 1.75rem;
  font-weight: 900;
  color: #0055FE;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.interest-sub-tag {
  font-size: 0.6875rem;
  color: #94A3B8;
  font-weight: 600;
}

.heart-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.heart-toggle-btn:hover, .heart-toggle-btn.active {
  color: #EF4444;
  border-color: #FCA5A5;
  background: #FEF2F2;
}

/* 총 구매 비용 블록 (컴팩트 최적화) */
.sticky-cost-breakdown {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cost-breakdown-title {
  font-size: 0.78125rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 2px;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #475569;
  line-height: 1.35;
}

.cost-row .val {
  color: #0F172A;
  font-weight: 700;
}

.cost-row .val.free {
  color: #0055FE;
}

.cost-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 3px 0;
}

.cost-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #0F172A;
}

.total-blue-val {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #0F172A;
}

/* 단순 변심도 무료 환불 배너 */
.free-delivery-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.75rem;
  color: #1D4ED8;
  font-weight: 700;
  text-decoration: none;
}

/* 라이브 경매 타이머 & 리드 박스 컴팩트 */
.live-auction-meta-strip {
  background: #070B14;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timer-mini-lead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--urgency-crimson-light);
  font-weight: 700;
}

.timer-clock {
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
  font-weight: 800;
}

.current-leader-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.action-buttons-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 대형 블루 CTA 버튼 (바로 구매예약) */
.btn-primary-blue {
  width: 100%;
  height: 46px;
  background: #0055FE;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 85, 254, 0.25);
  transition: all var(--transition-fast);
}

.btn-primary-blue:hover {
  background: #0045D8;
  transform: translateY(-1px);
}

.dual-sub-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sub-white-btn {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: all 0.15s ease;
}

.sub-white-btn:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
}

.sub-white-btn .sub-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0F172A;
}

.sub-white-btn .sub-sub {
  font-size: 0.625rem;
  color: #64748B;
}

/* WASM 운임 및 관세 임베디드 카드 컴팩트 */
.wasm-embedded-calculator {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wasm-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wasm-title-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0F172A;
}

.wasm-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.wasm-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wasm-col label {
  font-size: 0.65rem;
  color: #64748B;
  font-weight: 600;
}

.wasm-compact-select {
  height: 28px;
  font-size: 0.71875rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 5px;
  color: #0F172A;
  padding: 0 4px;
}

.wasm-total-strip {
  display: flex;
  justify-content: space-between;
  font-size: 0.71875rem;
  border-top: 1px solid #E2E8F0;
  padding-top: 4px;
}

.wasm-total-strip .total-cif {
  color: #0055FE;
  font-weight: 800;
}

/* 앱 QR 프로모 및 매니저 카드 슬림화 */
.app-qr-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 10px;
}

.qr-text-side strong {
  font-size: 0.75rem;
  color: #0F172A;
  display: block;
}

.qr-text-side p {
  font-size: 0.65rem;
  color: #64748B;
}

.qr-code-box svg {
  width: 32px;
  height: 32px;
}

.manager-contact-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.manager-avatar {
  font-size: 1.25rem;
}

.manager-text {
  flex-grow: 1;
}

.mgr-sub {
  font-size: 0.65rem;
  color: #64748B;
  display: block;
}

.mgr-name {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0F172A;
}

.btn-chat-link {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0055FE;
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
}

/* HD Footer */
.hd-footer {
  background: #03060C;
  border-top: 1px solid var(--border-light);
  padding: 40px 24px;
}

.hd-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.footer-meta-block {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-meta-block .company-name {
  font-weight: 800;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.footer-meta-block .legal-notice {
  margin: 10px 0;
}

.footer-sub-links {
  display: flex;
  gap: 16px;
  margin: 12px 0 16px;
}

.footer-sub-links a {
  font-size: 0.75rem;
  color: #64748B;
  text-decoration: underline;
}

.hd-footer-sns-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 1024px) {
  .hd-split-grid {
    grid-template-columns: 1fr;
  }
  .hd-col-sticky {
    position: static;
  }
}

/* -------------------------------------------------------------------------- */
/* HEYDEALER MOBILE DETAIL 1:1 SCREENSHOT EXACT REPLICATION STYLES           */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.hd-detail-body {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    padding-bottom: calc(115px + env(safe-area-inset-bottom, 0px));
  }

  .desktop-only {
    display: none !important;
  }

  /* 1. 모바일 전용 상단 헤더 */
  .hd-mobile-detail-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #F1F5F9;
  }

  .btn-m-back, .btn-m-tool {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }

  .m-header-tools {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* 2. 포토 뷰어 영역 & 1/60 인디케이터 배너 */
  .hd-viewer-hero {
    background: #F1F5F9;
    border-bottom: none;
  }

  .hd-viewer-viewport {
    height: 270px;
    background: #E2E8F0;
    position: relative;
  }

  .hd-photo-counter-pill {
    top: auto;
    bottom: 12px;
    right: 14px;
    font-size: 0.6875rem;
    padding: 3px 10px;
  }

  .hd-view-toggle-capsule {
    bottom: 10px;
    padding: 2px;
    gap: 2px;
  }

  .hd-view-toggle-capsule .toggle-pill {
    padding: 5px 12px;
    font-size: 0.75rem;
  }

  .hd-car-stage-center {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .emira-sports-render {
    width: 290px;
    height: 155px;
    background: radial-gradient(circle at center, #DC2626 0%, #991B1B 70%, #450A0A 100%);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }

  .hd-plate-sticker {
    position: absolute;
    bottom: 24px;
    font-size: 0.8125rem;
    font-weight: 800;
    padding: 2px 14px;
  }

  /* 블랙 띠배너: heydealer 인증 | 완전무사고 · 1년 보증 무료 */
  .hd-black-trust-banner {
    background: #030712;
    padding: 12px 16px;
    border: none;
  }

  .hd-trust-banner-inner {
    justify-content: flex-start;
  }

  .trust-brand {
    font-size: 0.875rem;
    color: #FFFFFF;
  }

  .trust-tag {
    color: #60A5FA;
    font-size: 0.8125rem;
  }

  .trust-divider-bar {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #4B5563;
    margin: 0 10px;
    vertical-align: middle;
  }

  .trust-text {
    font-size: 0.8125rem;
    color: #FFFFFF;
    font-weight: 700;
  }

  /* 3. 모바일 레이아웃 및 폰트 크기 */
  .hd-main-layout {
    padding: 18px 16px 30px;
  }

  .hd-split-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hd-col-sticky {
    display: none !important; /* 모바일에서는 하단 고정바로 대체 */
  }

  /* 헤더 차량명 & 스펙 리스트 */
  .hd-sec-header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 8px solid #F8FAFC;
  }

  .hd-vehicle-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #0F172A;
  }

  .hd-vehicle-sub {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 20px;
  }

  .hd-mobile-specs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .m-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
  }

  .m-spec-label {
    color: #64748B;
    font-weight: 600;
  }

  .m-spec-val {
    color: #0F172A;
    font-weight: 700;
  }

  .m-spec-link {
    color: #0F172A;
    font-weight: 800;
    text-decoration: none;
  }

  .m-spec-link.underline {
    text-decoration: underline;
  }

  .hd-specs-btn-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
  }

  .btn-specs-pill {
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0F172A;
    cursor: pointer;
  }

  .specs-view-heart-count {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94A3B8;
  }

  /* 섹션 공통 스타일 */
  .hd-section-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 8px solid #F8FAFC;
  }

  .sec-heading {
    font-size: 1.1875rem;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -0.02em;
  }

  /* 색상 썸네일 */
  .color-text-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .color-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
  }

  .color-tag {
    font-size: 0.75rem;
    color: #64748B;
    background: #F1F5F9;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
  }

  .color-name {
    color: #0F172A;
    font-weight: 800;
  }

  .hd-dual-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .photo-cell {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 120px;
    background: #1E293B;
  }

  .photo-render {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .emira-ext-thumb {
    background: radial-gradient(circle at center, #EF4444 0%, #7F1D1D 100%);
  }

  .emira-int-thumb {
    background: radial-gradient(circle at center, #F59E0B 0%, #1E293B 100%);
  }

  .photo-label-tag {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
  }

  /* 옵션 리스트 */
  .hd-options-checklist-clean {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .opt-row-clean {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
  }

  .opt-row-clean.muted {
    color: #CBD5E1;
  }

  .info-circle {
    color: #94A3B8;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .option-more-fold-row {
    text-align: center;
    padding-top: 10px;
  }

  .btn-fold-options {
    background: none;
    border: none;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* 말풍선 카드 */
  .hd-recommend-bubble-card {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 18px 16px;
    border: 1px solid #F1F5F9;
    margin-top: 12px;
  }

  .rec-bubble-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 12px;
  }

  .rec-bubble-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.5;
  }

  .rec-bubble-bullets li::before {
    content: "• ";
    color: #64748B;
    font-weight: 800;
  }

  /* 관리 상태 */
  .hd-stat-lines-clean {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .stat-line-clean {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.875rem;
  }

  .stat-lbl {
    width: 60px;
    color: #64748B;
    font-weight: 600;
  }

  .stat-val {
    color: #0F172A;
    font-weight: 800;
  }

  .m-defect-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.45;
  }

  .m-defect-list li::before {
    content: "• ";
    color: #0F172A;
  }

  .maintenance-photo-hint {
    font-size: 0.78125rem;
    color: #94A3B8;
  }

  .hd-photo-tri-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .tri-cell {
    height: 80px;
    background: #F1F5F9;
    border-radius: 8px;
    overflow: hidden;
  }

  .tri-render {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .spoiler-1 { background: radial-gradient(circle, #475569 0%, #0F172A 100%); }
  .spoiler-2 { background: radial-gradient(circle, #64748B 0%, #1E293B 100%); }
  .bumper-1 { background: radial-gradient(circle, #EF4444 0%, #7F1D1D 100%); }

  /* heydealer™ 인증 엑스레이 & 체크 카드 */
  .eye-brand-badge-clean {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0F172A;
    margin-bottom: 12px;
  }

  .eye-brand-badge-clean .tm {
    font-size: 0.75rem;
    color: #0055FE;
  }

  .hd-xray-frame-stage {
    height: 180px;
    background: #E2E8F0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

  .car-xray-render {
    width: 220px;
    height: 110px;
    background: radial-gradient(circle, #93C5FD 0%, #1E3A8A 100%);
    border-radius: 8px;
  }

  .hd-inspect-checklist-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .check-blue {
    color: #0055FE;
    font-weight: 900;
  }

  .diag-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 8px;
  }

  .btn-inspect-photo-link {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 0.75rem;
    color: #64748B;
    cursor: pointer;
  }

  .diag-sub-specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 20px;
    font-size: 0.8125rem;
  }

  .sub-item {
    display: flex;
    justify-content: space-between;
  }

  .sub-item span { color: #64748B; }
  .sub-item strong { color: #0F172A; }

  .diag-buttons-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
  }

  .btn-diag-tab {
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0F172A;
    cursor: pointer;
  }

  /* 링크 알약 박스 */
  .hd-btn-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #0F172A;
    text-decoration: none;
    margin-top: 8px;
  }

  .hd-btn-card-link strong {
    color: #0055FE;
  }

  .hd-btn-card-link .arr {
    color: #94A3B8;
    font-weight: 700;
  }

  /* 살균 세차 */
  .clean-check-list-blue {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
    color: #334155;
    font-weight: 700;
  }

  .hd-cleaning-photos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .clean-cell {
    position: relative;
    height: 110px;
    background: #0F172A;
    border-radius: 8px;
    overflow: hidden;
  }

  .c-render {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .seat-clean { background: radial-gradient(circle, #334155 0%, #0F172A 100%); }
  .interior-clean { background: radial-gradient(circle, #475569 0%, #1E293B 100%); }

  .c-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
  }

  /* 총 구매 비용 (스크린샷 정확 구현) */
  .hd-cost-sheet-clean {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }

  .cost-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #475569;
  }

  .cost-line .val {
    font-weight: 700;
    color: #0F172A;
  }

  .cost-line .val.free {
    color: #0055FE;
  }

  .cost-line .strike {
    color: #94A3B8;
  }

  .cost-sum-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid #E2E8F0;
    margin-top: 6px;
  }

  .lbl-sum {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0F172A;
  }

  .val-sum {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0F172A;
  }

  .hd-refund-assurance-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .refund-title {
    font-size: 0.875rem;
    color: #0F172A;
    display: block;
  }

  .refund-title strong {
    color: #0055FE;
  }

  .refund-sub {
    font-size: 0.75rem;
    color: #64748B;
  }

  .hd-compare-sub-section {
    padding-top: 8px;
  }

  .compare-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 10px;
  }

  .compare-dual-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .btn-compare-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
  }

  .btn-compare-box strong {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0F172A;
  }

  .btn-compare-box span {
    font-size: 0.6875rem;
    color: #64748B;
  }

  /* 숨은 이력 */
  .history-list-clean {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .hist-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
  }

  .hist-line .lbl { color: #64748B; font-weight: 600; }
  .hist-line .val { color: #0F172A; font-weight: 800; }

  .history-more-row, .reviews-more-row {
    text-align: center;
  }

  .btn-history-round, .btn-reviews-round {
    width: 100%;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 800;
    color: #0F172A;
    cursor: pointer;
  }

  /* 타 본 사람들 이야기 */
  .hd-review-chips-tabs {
    display: flex;
    gap: 8px;
  }

  .rev-chip {
    padding: 6px 14px;
    border-radius: 9999px;
    background: #F1F5F9;
    border: none;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
  }

  .rev-chip.active {
    background: #0F172A;
    color: #FFFFFF;
  }

  .hd-review-stories-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }

  .m-story-card {
    min-width: 240px;
    width: 240px;
    flex-shrink: 0;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 140px;
  }

  .story-body {
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.5;
  }

  .story-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94A3B8;
  }

  /* 다른 고객이 함께 본 모델 & 같은 예산대 추천 슬라이드 */
  .hd-together-models-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }

  .together-car-card {
    min-width: 155px;
    width: 155px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }

  .t-card-thumb {
    position: relative;
    height: 110px;
    background: #0F172A;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
  }

  .t-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .benz-s { background: radial-gradient(circle, #334155 0%, #0F172A 100%); }
  .benz-e { background: radial-gradient(circle, #475569 0%, #1E293B 100%); }
  .taycan { background: radial-gradient(circle, #64748B 0%, #0F172A 100%); }
  .bmw-i7 { background: radial-gradient(circle, #1E3A8A 0%, #0F172A 100%); }
  .bmw-ix { background: radial-gradient(circle, #1E293B 0%, #0F172A 100%); }
  .macan-ev { background: radial-gradient(circle, #334155 0%, #0F172A 100%); }

  .t-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #FFFFFF;
    font-size: 0.875rem;
  }

  .t-car-name {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0F172A;
  }

  .t-trim-name {
    font-size: 0.71875rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .t-spec-meta {
    font-size: 0.6875rem;
    color: #94A3B8;
    margin-bottom: 4px;
  }

  .t-price-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .bold-blue {
    font-size: 0.9375rem;
    font-weight: 900;
    color: #0055FE;
  }

  .bold-dark {
    font-size: 0.9375rem;
    font-weight: 900;
    color: #0F172A;
  }

  /* 먼저 구매한 후기 */
  .hd-buyer-photo-reviews-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 8px;
    scrollbar-width: none;
  }

  .m-buyer-rev-card {
    min-width: 250px;
    width: 250px;
    flex-shrink: 0;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px;
    background: #FFFFFF;
  }

  .b-rev-photos {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }

  .p-thumb {
    width: 65px;
    height: 65px;
    border-radius: 6px;
    background: #E2E8F0;
  }

  .rev-1 { background: radial-gradient(circle, #334155 0%, #0F172A 100%); }
  .rev-2 { background: radial-gradient(circle, #475569 0%, #1E293B 100%); }
  .rev-3 { background: radial-gradient(circle, #64748B 0%, #0F172A 100%); }
  .rev-4 { background: radial-gradient(circle, #94A3B8 0%, #1E293B 100%); }

  .b-rev-car-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #0F172A;
    display: block;
    margin-bottom: 2px;
  }

  .b-rev-date {
    font-size: 0.6875rem;
    color: #94A3B8;
  }

  .b-rev-text {
    font-size: 0.78125rem;
    color: #475569;
    line-height: 1.45;
    margin-top: 6px;
  }

  /* FAQ 10종 아코디언 */
  .hd-faq-accordion-clean {
    display: flex;
    flex-direction: column;
  }

  .faq-accordion-item {
    border-bottom: 1px solid #F1F5F9;
    padding: 14px 0;
  }

  .faq-accordion-item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    cursor: pointer;
  }

  .faq-accordion-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-accordion-item .arrow-down {
    font-size: 0.8125rem;
    color: #94A3B8;
  }

  .faq-ans {
    padding-top: 10px;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
  }

  /* 서비스 개선 의견 배너 */
  .hd-feedback-banner-section {
    text-align: center;
    padding: 32px 16px;
    background: #F8FAFC;
    border-radius: 12px;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .feedback-icon-bulb {
    font-size: 2rem;
    margin-bottom: 8px;
  }

  .feedback-title {
    font-size: 1rem;
    font-weight: 900;
    color: #0F172A;
    display: block;
    margin-bottom: 6px;
  }

  .feedback-sub {
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 16px;
  }

  .btn-submit-feedback {
    padding: 10px 24px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0F172A;
    cursor: pointer;
  }

  /* 4. 모바일 최하단 2단 고정 액션 바 (스크린샷 정확 구현) */
  .hd-mobile-bottom-fixed-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: flex !important;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 1단 띠: 👀 이 차의 숨은이력까지 확인 */
  .m-bottom-hint-strip {
    background: #F1F5F9;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
  }

  .hint-left {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .hint-link {
    color: #0055FE;
    font-weight: 800;
    text-decoration: none;
  }

  /* 2단 메인 CTA: 하트 + 가격 + 바로 구매예약 버튼 */
  .m-bottom-main-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
  }

  .btn-m-heart {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }

  .btn-m-heart.active svg {
    stroke: #EF4444;
    fill: #EF4444;
  }

  .m-bottom-price-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex-grow: 1;
  }

  .m-price-usd {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748B;
  }

  .m-price-bold {
    font-size: 1.1875rem;
    font-weight: 900;
    color: #0F172A;
  }

  .btn-m-bid-submit {
    height: 48px;
    padding: 0 18px;
    background: #0055FE;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 모바일 푸터 */
  .hd-footer {
    padding: 24px 16px 40px;
    background: #FFFFFF;
    border-top: 1px solid #F1F5F9;
  }

  .footer-sub-links {
    display: flex;
    gap: 16px;
    margin: 10px 0 16px;
  }

  .footer-sub-links a {
    font-size: 0.75rem;
    color: #64748B;
    text-decoration: underline;
  }

  .hd-footer-sns-icons {
    display: flex;
    gap: 10px;
  }
}

/* -------------------------------------------------------------------------- */
/* MOBILE DRAWER & INTERACTIVE MODAL STYLES                                   */
/* -------------------------------------------------------------------------- */
.hd-mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  justify-content: flex-start;
  animation: fadeInDrawer 0.2s ease;
}

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

.hd-mobile-drawer {
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  animation: slideInDrawer 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInDrawer {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hd-border-light);
}

.drawer-brand {
  display: flex;
  align-items: baseline;
  gap: 2px;
  text-decoration: none;
}

.btn-close-drawer {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #64748B;
  cursor: pointer;
  padding: 4px;
}

.drawer-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--hd-border-light);
}

.drawer-avatar {
  font-size: 1.75rem;
}

.drawer-user-meta {
  display: flex;
  flex-direction: column;
}

.drawer-user-meta strong {
  font-size: 0.9375rem;
  color: #0F172A;
}

.drawer-user-meta span {
  font-size: 0.75rem;
  color: #64748B;
}

.drawer-nav-list {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 4px;
  flex-grow: 1;
  overflow-y: auto;
}

.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
  transition: all 0.16s ease;
}

.drawer-nav-item:hover, .drawer-nav-item.active {
  background: #F1F5F9;
  color: var(--hd-blue-primary);
}

.drawer-nav-item .d-ico {
  font-size: 1.15rem;
}

.drawer-footer-actions {
  padding: 16px 20px;
  border-top: 1px solid var(--hd-border-light);
}

/* Hidden Option Extended List in auction.html */
.options-more-container {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

.options-more-container.open {
  display: grid;
}

/* Specs Details Popup Modal */
.hd-specs-modal-layer {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hd-specs-modal-layer.hidden {
  display: none;
}

.hd-specs-modal-box {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.hd-specs-modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hd-specs-modal-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #0F172A;
}

.hd-specs-modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #64748B;
  cursor: pointer;
}

.hd-specs-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.specs-category-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--hd-blue-primary);
  margin-bottom: 6px;
}

.specs-table-mini {
  width: 100%;
  border-collapse: collapse;
}

.specs-table-mini td {
  padding: 8px 10px;
  font-size: 0.8125rem;
  border-bottom: 1px solid #F1F5F9;
}

.specs-table-mini td.label {
  color: #64748B;
  width: 40%;
  font-weight: 600;
}

.specs-table-mini td.val {
  color: #0F172A;
  font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* 메인페이지 인터랙티브 모달 팝업 & 1:1 채팅 위젯 스타일                        */
/* -------------------------------------------------------------------------- */

.hd-custom-modal-layer {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInModal 0.2s ease;
}

.hd-custom-modal-layer.hidden {
  display: none !important;
}

@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.hd-custom-modal-box {
  background: #FFFFFF;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}

.hd-custom-modal-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--hd-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #FFFFFF;
  z-index: 5;
}

.hd-custom-modal-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0F172A;
}

.hd-custom-modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #64748B;
  cursor: pointer;
  padding: 4px;
}

.hd-custom-modal-body {
  padding: 20px 24px 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.hd-custom-modal-body::-webkit-scrollbar,
.hd-timeline-stream-box::-webkit-scrollbar,
.hd-19check-grid::-webkit-scrollbar,
.policy-content-area::-webkit-scrollbar,
.chat-widget-messages::-webkit-scrollbar,
.hd-specs-modal-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.hd-custom-modal-body::-webkit-scrollbar-track,
.hd-timeline-stream-box::-webkit-scrollbar-track,
.hd-19check-grid::-webkit-scrollbar-track,
.policy-content-area::-webkit-scrollbar-track,
.chat-widget-messages::-webkit-scrollbar-track,
.hd-specs-modal-box::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 9999px;
  margin: 4px 0;
}

.hd-custom-modal-body::-webkit-scrollbar-thumb,
.hd-timeline-stream-box::-webkit-scrollbar-thumb,
.hd-19check-grid::-webkit-scrollbar-thumb,
.policy-content-area::-webkit-scrollbar-thumb,
.chat-widget-messages::-webkit-scrollbar-thumb,
.hd-specs-modal-box::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}

.hd-custom-modal-body::-webkit-scrollbar-thumb:hover,
.hd-timeline-stream-box::-webkit-scrollbar-thumb:hover,
.hd-19check-grid::-webkit-scrollbar-thumb:hover,
.policy-content-area::-webkit-scrollbar-thumb:hover,
.chat-widget-messages::-webkit-scrollbar-thumb:hover,
.hd-specs-modal-box::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.modal-lead-desc {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* 폐차 계산기 스타일 */
.scrap-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.scrap-form-grid input,
.scrap-form-grid select {
  height: 44px;
  border: 1px solid var(--hd-border-medium);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 0.9375rem;
  color: #0F172A;
}

.scrap-result-card {
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scrap-res-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #334155;
}

.scrap-res-row.total {
  font-size: 1rem;
  color: #0F172A;
}

.scrap-total-price {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--hd-blue-primary);
}

.scrap-res-divider {
  height: 1px;
  background: var(--hd-border-light);
  margin: 4px 0;
}

.scrap-notice-text {
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 4px;
}

/* 찜한 차 모달 리스트 */
.wishlist-modal-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wish-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 10px;
  gap: 12px;
}

.wish-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wish-item-thumb {
  width: 60px;
  height: 45px;
  border-radius: 6px;
  background: #1E293B;
  background-size: cover;
  background-position: center;
}

.wish-item-info {
  display: flex;
  flex-direction: column;
}

.wish-item-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
}

.wish-item-price {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--hd-blue-primary);
}

.btn-remove-wish {
  color: #EF4444;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* 360° 대화형 턴테이블 쇼룸 */
.turntable-interactive-stage {
  height: 240px;
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
  border-radius: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
  cursor: grab;
}

.turntable-interactive-stage:active {
  cursor: grabbing;
}

.car-interactive-mesh {
  width: 220px;
  height: 120px;
  background: radial-gradient(circle, #EF4444 0%, #7F1D1D 100%);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-angle-degree-pill {
  position: absolute;
  bottom: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.turntable-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* 가이드 리더 & hey care 스타일 */
.care-detail-section h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.care-detail-section p {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.55;
}

.care-points-list {
  padding-left: 20px;
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.6;
  margin-top: 8px;
}

/* 1:1 상담원 플로팅 채팅 위젯 */
.hd-chat-widget-box {
  position: fixed;
  bottom: 90px;
  right: 28px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 480px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--hd-border-light);
  display: flex;
  flex-direction: column;
  z-index: 2500;
  overflow: hidden;
  animation: slideUpChat 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hd-chat-widget-box.hidden {
  display: none !important;
}

@keyframes slideUpChat {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-widget-header {
  padding: 14px 18px;
  background: #0F172A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-header-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
}

.chat-online-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10B981;
}

.btn-close-chat {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 1.15rem;
  cursor: pointer;
}

.chat-widget-messages {
  flex-grow: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #F8FAFC;
}

.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.84375rem;
  line-height: 1.45;
}

.chat-bubble.agent {
  align-self: flex-start;
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid var(--hd-border-light);
  border-bottom-left-radius: 2px;
}

.chat-bubble.user {
  align-self: flex-end;
  background: var(--hd-blue-primary);
  color: #FFFFFF;
  border-bottom-right-radius: 2px;
}

.chat-quick-questions {
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  background: #FFFFFF;
  border-top: 1px solid var(--hd-border-light);
}

.chat-quick-chip {
  background: #F1F5F9;
  border: 1px solid var(--hd-border-light);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}

.chat-widget-input-row {
  display: flex;
  padding: 10px 14px;
  background: #FFFFFF;
  border-top: 1px solid var(--hd-border-light);
  gap: 8px;
}

.chat-widget-input-row input {
  flex: 1;
  border: 1px solid var(--hd-border-medium);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.875rem;
  outline: none;
}

.btn-chat-send {
  background: var(--hd-blue-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-float-chat {
  position: relative;
}

.chat-unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 900;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
}

.chat-unread-badge.hidden {
  display: none !important;
}

.chat-user-profile-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 12px;
  background: #F1F5F9;
  border-bottom: 1px solid var(--hd-border-light);
}

.chat-user-profile-bar input {
  height: 30px;
  padding: 0 8px;
  font-size: 0.75rem;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  color: #0F172A;
}

/* Admin 1:1 Chat Inquiry Management Console Styles */
.admin-chat-console-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  min-height: 540px;
}

.admin-chat-session-list {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #080D1A;
  overflow-y: auto;
  max-height: 560px;
  display: flex;
  flex-direction: column;
}

.admin-chat-session-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s ease;
}

.admin-chat-session-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.admin-chat-session-item.active {
  background: rgba(37, 99, 235, 0.16);
  border-left: 3px solid #38BDF8;
}

.chat-s-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.chat-s-name {
  font-size: 0.875rem;
  font-weight: 800;
  color: #FFFFFF;
}

.admin-chat-unread-pill {
  background: #EF4444;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 9999px;
}

.chat-s-preview {
  font-size: 0.8125rem;
  color: #CBD5E1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.chat-s-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: #64748B;
}

.admin-chat-room-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #080D1A;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-chat-room-head {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0B1120;
}

.admin-chat-messages-box {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adm-msg-row {
  display: flex;
}

.adm-msg-row.user-side {
  justify-content: flex-start;
}

.adm-msg-row.admin-side {
  justify-content: flex-end;
}

.adm-msg-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.84375rem;
  line-height: 1.5;
}

.adm-msg-row.user-side .adm-msg-bubble {
  background: #1E293B;
  color: #F1F5F9;
  border-bottom-left-radius: 2px;
}

.adm-msg-row.admin-side .adm-msg-bubble {
  background: #2563EB;
  color: #FFFFFF;
  border-bottom-right-radius: 2px;
}

.adm-msg-sender {
  font-size: 0.6875rem;
  font-weight: 800;
  opacity: 0.8;
  margin-bottom: 4px;
}

.admin-chat-canned-bar {
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  background: #0B1120;
}

.btn-canned-chip {
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38BDF8;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.btn-canned-chip:hover {
  background: #2563EB;
  color: #FFFFFF;
}

.admin-chat-reply-form {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
  background: #0B1120;
}

.admin-chat-reply-form input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  background: #070B14;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 0.875rem;
}

body.admin-body.theme-light .admin-chat-session-list,
body.admin-body.theme-light .admin-chat-room-panel {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

body.admin-body.theme-light .admin-chat-room-head,
body.admin-body.theme-light .admin-chat-canned-bar,
body.admin-body.theme-light .admin-chat-reply-form {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

body.admin-body.theme-light .chat-s-name,
body.admin-body.theme-light #adm-chat-active-user {
  color: #0F172A !important;
}

body.admin-body.theme-light .chat-s-preview {
  color: #475569;
}

body.admin-body.theme-light .adm-msg-row.user-side .adm-msg-bubble {
  background: #F1F5F9;
  color: #0F172A;
}

body.admin-body.theme-light .admin-chat-reply-form input {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
}

@media (max-width: 900px) {
  .admin-chat-console-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin Car History & Valuation API Provider (CODEF.io & COOCON) Styles */
.car-api-provider-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}

.provider-radio-card {
  background: #080D1A;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.16s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.provider-radio-card input[type="radio"] {
  display: none;
}

.provider-radio-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
}

.provider-radio-card.active {
  background: rgba(37, 99, 235, 0.14);
  border-color: #38BDF8;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.15);
}

.p-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.p-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: #FFFFFF;
}

.p-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.18);
  color: #38BDF8;
}

.p-badge.coocon {
  background: rgba(16, 185, 129, 0.18);
  color: #34D399;
}

.p-badge.sim {
  background: rgba(148, 163, 184, 0.2);
  color: #CBD5E1;
}

.p-desc {
  font-size: 0.78125rem;
  color: #94A3B8;
  line-height: 1.45;
}

.car-api-panels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.api-config-subcard {
  background: #080D1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
}

.api-config-subcard.active-provider {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25);
}

.subcard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.subcard-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #FFFFFF;
  display: block;
}

.subcard-sub {
  font-size: 0.75rem;
  color: #64748B;
}

.subcard-status-pill {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: #94A3B8;
  white-space: nowrap;
}

.subcard-status-pill.active {
  background: rgba(16, 185, 129, 0.18);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.btn-toggle-pw {
  background: none;
  border: none;
  color: #38BDF8;
  font-size: 0.71875rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
}

.admin-form-group label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.car-api-test-bar {
  background: rgba(56, 189, 248, 0.07);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.test-bar-left strong {
  font-size: 0.875rem;
  color: #FFFFFF;
  display: block;
}

.test-bar-left span {
  font-size: 0.75rem;
  color: #94A3B8;
}

.test-bar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.car-api-test-output {
  margin-top: 12px;
  background: #050811;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 14px;
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: #38BDF8;
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Admin PR Management Live Social Feed Preview Styles */
.sns-live-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.sns-preview-card {
  background: #050811;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sns-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 800;
  color: #38BDF8;
}

.sns-preview-body {
  font-size: 0.8125rem;
  color: #E2E8F0;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.sns-preview-tags {
  font-size: 0.75rem;
  color: #60A5FA;
  font-weight: 700;
}

.sns-preview-link-chip {
  font-size: 0.72rem;
  color: #34D399;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-family-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-body.theme-light .sns-preview-card {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

body.admin-body.theme-light .sns-preview-body {
  color: #1E293B;
}

@media (max-width: 768px) {
  .sns-live-preview-grid {
    grid-template-columns: 1fr;
  }
}

body.admin-body.theme-light .provider-radio-card,
body.admin-body.theme-light .api-config-subcard {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

body.admin-body.theme-light .provider-radio-card.active {
  background: #EFF6FF;
  border-color: #2563EB;
}

body.admin-body.theme-light .p-title,
body.admin-body.theme-light .subcard-title,
body.admin-body.theme-light .test-bar-left strong {
  color: #0F172A;
}

@media (max-width: 960px) {
  .car-api-provider-selector,
  .car-api-panels-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* NEW INTERACTIVE MODALS STYLING (HISTORY, VIDEO INSPECT, APP, POLICY)      */
/* -------------------------------------------------------------------------- */

/* 1. 중고차 숨은 이력 조회 모달 */
.history-result-card {
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history-res-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hd-border-light);
  padding-bottom: 12px;
}

.history-target-car {
  font-size: 1.05rem;
  font-weight: 900;
  color: #0F172A;
  display: block;
}

.history-vin-tag {
  font-size: 0.75rem;
  color: #64748B;
  font-family: var(--font-family-mono);
}

.history-badge-clean {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9999px;
}

.history-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.hist-metric-item {
  background: #FFFFFF;
  border: 1px solid var(--hd-border-light);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hist-metric-item .h-label {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 600;
}

.hist-metric-item .h-value {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
}

.history-guarantee-note {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: #1E40AF;
  line-height: 1.45;
}

.hd-custom-modal-box .btn-ghost {
  color: #1E293B;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
}

.hd-custom-modal-box .btn-ghost:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #94A3B8;
}

/* 헤이딜러 스타일 실시간 4단계 스캔 & 시간순 타임라인 애니메이션 */
@keyframes hdTimelineNodeAppear {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hdPulseRadar {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 85, 254, 0.45); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(0, 85, 254, 0); }
}

.hd-live-scan-box {
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 24px 20px;
  margin: 8px 0 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}

.hd-scan-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hd-scan-plate-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 900;
  font-size: 1rem;
  padding: 5px 14px;
  border-radius: 8px;
  border: 2px solid #38BDF8;
  letter-spacing: 0.05em;
}

.hd-scan-percent {
  font-size: 1.25rem;
  font-weight: 900;
  color: #38BDF8;
  font-variant-numeric: tabular-nums;
}

.hd-scan-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 18px;
}

.hd-scan-bar-fill {
  height: 100%;
  width: 8%;
  background: linear-gradient(90deg, #0055FE 0%, #38BDF8 50%, #10B981 100%);
  border-radius: 9999px;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.hd-scan-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hd-scan-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  color: #94A3B8;
  transition: all 0.25s ease;
}

.hd-scan-step-row.active {
  background: rgba(0, 85, 254, 0.22);
  border-color: #38BDF8;
  color: #FFFFFF;
  font-weight: 700;
}

.hd-scan-step-row.done {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
  color: #E2E8F0;
}

.hd-scan-step-status {
  font-size: 0.75rem;
  font-weight: 800;
}

.hd-scan-step-row.active .hd-scan-step-status {
  color: #38BDF8;
}

.hd-scan-step-row.done .hd-scan-step-status {
  color: #34D399;
}

.hd-report-view-tabs {
  display: flex;
  gap: 6px;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 10px;
  margin: 14px 0 12px;
}

.hd-report-tab-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #64748B;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
}

.hd-report-tab-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

.hd-timeline-stream-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 14px;
  max-height: clamp(200px, 32vh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hd-tl-year-header {
  font-size: 1rem;
  font-weight: 900;
  color: #0F172A;
  padding: 6px 0 2px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: hdTimelineNodeAppear 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hd-tl-year-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #CBD5E1;
}

.hd-tl-step-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  opacity: 0;
  animation: hdTimelineNodeAppear 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hd-tl-left-col {
  width: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
}

.hd-tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94A3B8;
  flex-shrink: 0;
}

.hd-tl-dot.emerald { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.hd-tl-dot.blue { background: #0055FE; box-shadow: 0 0 0 3px rgba(0, 85, 254, 0.2); }
.hd-tl-dot.orange { background: #F97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2); }
.hd-tl-dot.crimson { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22); }
.hd-tl-dot.amber { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }

.hd-tl-month {
  font-size: 0.75rem;
  font-weight: 800;
  color: #475569;
}

.hd-tl-card {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.hd-tl-card.accident-card {
  border-color: #FECACA;
  background: #FFFBFB;
}

.hd-tl-card.verify-card {
  border-color: #BFDBFE;
  background: #EFF6FF;
}

.hd-tl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.hd-tl-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #334155;
}

.hd-tl-badge.emerald { background: #ECFDF5; color: #059669; }
.hd-tl-badge.blue { background: #EFF6FF; color: #0055FE; }
.hd-tl-badge.orange { background: #FFF7ED; color: #EA580C; }
.hd-tl-badge.crimson { background: #FEF2F2; color: #DC2626; }
.hd-tl-badge.amber { background: #FFFBEB; color: #D97706; }

.hd-tl-date-exact {
  font-size: 0.6875rem;
  color: #94A3B8;
  font-family: var(--font-family-mono);
}

.hd-tl-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
  display: block;
}

.hd-tl-sub {
  font-size: 0.78125rem;
  color: #64748B;
  margin-top: 2px;
  display: block;
}

.hd-tl-cost-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

.hd-tl-cost-chip {
  font-size: 0.71875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #334155;
}

.hd-19check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: clamp(200px, 32vh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F1F5F9;
  padding: 4px 6px 4px 2px;
}

.hd-report-bottom-actions {
  position: sticky;
  bottom: -24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #FFFFFF 28%);
  padding: 14px 0 4px;
  margin-top: 12px;
  z-index: 10;
}

.hd-19check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 0.78125rem;
}

.hd-19check-row .c-name {
  color: #475569;
  font-weight: 600;
}

.hd-19check-row .c-val {
  font-weight: 800;
  color: #059669;
}

.hd-19check-row .c-val.warn {
  color: #DC2626;
}

/* 어드민 모달 내 차량 이력 타임라인 리포트 가독성 보장 */
#modal-admin-car-history-detail .hd-custom-modal-box {
  background: #FFFFFF;
  color: #0F172A;
}

#modal-admin-car-history-detail .hd-custom-modal-head {
  background: #0F172A;
  color: #FFFFFF;
  border-bottom: 1px solid #1E293B;
}

#modal-admin-car-history-detail .hd-custom-modal-title {
  color: #FFFFFF;
}

#modal-admin-car-history-detail .hd-custom-modal-close {
  color: #CBD5E1;
}

/* 2. 3D 무사고 인증 검수 시뮬레이터 */
.inspection-stage-screen {
  height: 200px;
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.scan-laser-beam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #38BDF8;
  box-shadow: 0 0 16px #38BDF8, 0 0 32px #0284C7;
  animation: scanLaserAnim 2.5s ease-in-out infinite alternate;
}

@keyframes scanLaserAnim {
  0% { top: 10%; opacity: 0.8; }
  100% { top: 85%; opacity: 1; }
}

.scan-car-wireframe {
  width: 240px;
  height: 110px;
  border: 2px dashed rgba(56, 189, 248, 0.5);
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.2);
}

.scan-hud-data {
  position: absolute;
  bottom: 10px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: #38BDF8;
}

.inspection-tabs-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.btn-scan-tab {
  padding: 8px 14px;
  border-radius: 8px;
  background: #F1F5F9;
  border: 1px solid var(--hd-border-light);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}

.btn-scan-tab.active {
  background: #0F172A;
  color: #FFFFFF;
}

.inspection-step-detail {
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 10px;
  padding: 16px;
}

.inspection-step-detail h4 {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
}

.inspection-step-detail p {
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 10px;
}

.scan-score-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 800;
}

/* 3. 모바일 앱 다운로드 모달 */
.app-qr-display-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.app-qr-code-frame {
  padding: 16px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 16px;
  display: inline-flex;
}

/* 4. 정책 뷰어 모달 */
.policy-tabs-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--hd-border-light);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.policy-tab-btn {
  padding: 6px 14px;
  border-radius: 9999px;
  background: #F1F5F9;
  border: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
}

.policy-tab-btn.active {
  background: #0F172A;
  color: #FFFFFF;
}

.policy-content-area {
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.policy-faq-item {
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 12px;
}

.policy-faq-item strong {
  font-size: 0.875rem;
  color: #0F172A;
  display: block;
  margin-bottom: 4px;
}

.policy-faq-item p {
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.5;
}

/* 빠른 차량번호 선택 칩 */
.btn-quick-car-chip {
  background: #F1F5F9;
  border: 1px solid var(--hd-border-light);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-quick-car-chip:hover {
  background: var(--hd-blue-primary);
  color: #FFFFFF;
  border-color: var(--hd-blue-primary);
}

/* 오너 스토리 모달 스타일 */
.owner-story-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.score-box-item {
  background: #F8FAFC;
  border: 1px solid var(--hd-border-light);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.score-box-item .lbl {
  font-size: 0.75rem;
  color: #64748B;
  display: block;
}

.score-box-item .val {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--hd-blue-primary);
}

/* -------------------------------------------------------------------------- */
/* MEMBER AUTHENTICATION & MY PROFILE MODAL STYLES                            */
/* -------------------------------------------------------------------------- */
.rm-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.rm-auth-tab-btn {
  padding: 10px;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #64748B;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.16s ease;
}

.rm-auth-tab-btn.active {
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.rm-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rm-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-auth-field label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #334155;
}

.rm-auth-field input,
.rm-auth-field select {
  height: 44px;
  padding: 0 14px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: #0F172A;
}

.rm-auth-field input:focus,
.rm-auth-field select:focus {
  background: #FFFFFF;
  border-color: #2563EB;
}

.rm-demo-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  font-size: 0.75rem;
  color: #64748B;
}

.rm-demo-chip-btn {
  padding: 4px 10px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.rm-demo-chip-btn:hover {
  background: #2563EB;
  color: #FFFFFF;
}

.rm-profile-summary-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.rm-grade-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 900;
  background: #2563EB;
  color: #FFFFFF;
}

/* -------------------------------------------------------------------------- */
/* DIRECT VEHICLE REGISTRATION & SELLER MANAGEMENT STUDIO (sell.html)         */
/* -------------------------------------------------------------------------- */
.btn-scroll-direct-sell {
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: 9999px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  font-size: 0.875rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.btn-scroll-direct-sell:hover {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
}

.hd-direct-sell-section {
  padding: 64px 20px;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.hd-direct-sell-container {
  max-width: 1120px;
  margin: 0 auto;
}

.direct-sell-header {
  text-align: center;
  margin-bottom: 28px;
}

.direct-sell-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.direct-sell-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.direct-sell-sub {
  font-size: 0.9375rem;
  color: #64748B;
}

.seller-role-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.seller-role-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.16s ease;
}

.seller-role-btn:hover {
  border-color: #94A3B8;
}

.seller-role-btn.active {
  border-color: #0055FE;
  background: #EFF6FF;
  box-shadow: 0 4px 16px rgba(0, 85, 254, 0.12);
}

.seller-role-btn .r-ico {
  font-size: 1.75rem;
}

.seller-role-btn .r-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seller-role-btn .r-txt strong {
  font-size: 1rem;
  font-weight: 900;
  color: #0F172A;
}

.seller-role-btn .r-txt span {
  font-size: 0.78125rem;
  color: #475569;
}

.sell-reg-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.buyer-preset-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  margin-bottom: 20px;
}

.buyer-preset-bar .preset-lbl {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #334155;
}

.btn-buyer-preset {
  padding: 6px 12px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  font-size: 0.78125rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.btn-buyer-preset.active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

.sell-form-section-title {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #0F172A;
  padding-bottom: 8px;
  margin: 18px 0 14px;
  border-bottom: 1px solid #F1F5F9;
}

.sell-form-section-title:first-of-type {
  margin-top: 0;
}

.sell-reg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sell-reg-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.sell-reg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sell-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sell-field label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sell-field input,
.sell-field select,
.sell-field textarea {
  height: 44px;
  padding: 0 12px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #0F172A;
  font-weight: 600;
}

.sell-field textarea {
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
}

.sell-field input:focus,
.sell-field select:focus,
.sell-field textarea:focus {
  background: #FFFFFF;
  border-color: #0055FE;
}

.btn-inline-mini {
  padding: 2px 8px;
  border-radius: 4px;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 0.6875rem;
  font-weight: 800;
  border: 1px solid #BFDBFE;
  cursor: pointer;
}

.sell-price-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sell-price-box.highlight {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.sell-price-box label {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
}

.sell-price-box input {
  height: 46px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 900;
  color: #0055FE;
}

.usd-convert-hint {
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
}

.sell-options-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opt-chip-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.opt-chip-lbl input {
  width: 15px;
  height: 15px;
  accent-color: #0055FE;
}

.sell-file-input {
  padding: 8px !important;
  height: auto !important;
}

.sell-photo-previews {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.sell-thumb-item {
  width: 68px;
  height: 52px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1px solid #CBD5E1;
}

.sell-submit-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sell-guarantee-note {
  font-size: 0.8125rem;
  color: #475569;
}

.btn-submit-user-car {
  padding: 0 32px;
  height: 54px;
  border-radius: 12px;
  background: #0055FE;
  color: #FFFFFF;
  font-size: 1.0625rem;
  font-weight: 900;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 85, 254, 0.32);
  transition: all 0.16s ease;
}

.btn-submit-user-car:hover {
  background: #0045D8;
  transform: translateY(-2px);
}

/* My Selling Cars Section */
.my-selling-section {
  padding: 60px 20px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.my-selling-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.my-selling-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.my-sell-tab {
  padding: 8px 16px;
  border-radius: 9999px;
  background: #F1F5F9;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
}

.my-sell-tab.active {
  background: #0F172A;
  color: #FFFFFF;
}

.my-selling-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.my-selling-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.my-selling-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.my-selling-thumb {
  height: 150px;
  background: radial-gradient(circle, #334155 0%, #0F172A 100%);
  background-size: cover;
  background-position: center;
  position: relative;
}

.sell-status-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: #FFFFFF;
}

.sell-status-chip.live {
  background: #059669;
}

.sell-status-chip.sold {
  background: #2563EB;
}

.sell-plate-tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #0F172A;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 4px;
}

.my-selling-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.my-selling-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.seller-tag-pill {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.seller-tag-pill.member {
  background: #ECFDF5;
  color: #059669;
}

.seller-tag-pill.buyer {
  background: #EFF6FF;
  color: #1D4ED8;
}

.seller-tag-pill.admin {
  background: #F1F5F9;
  color: #475569;
}

.lot-code-txt {
  font-size: 0.6875rem;
  color: #94A3B8;
  font-family: var(--font-family-mono);
}

.my-selling-title {
  font-size: 1rem;
  font-weight: 900;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-selling-specs {
  font-size: 0.75rem;
  color: #64748B;
}

.my-selling-price-board {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.my-selling-price-board .p-lbl {
  font-size: 0.6875rem;
  color: #64748B;
  display: block;
}

.my-selling-price-board .p-val-main {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #0055FE;
}

.my-selling-price-board .p-val-sub {
  font-size: 0.875rem;
  font-weight: 800;
  color: #0F172A;
}

.my-selling-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.btn-sell-act {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #334155;
  text-align: center;
}

.btn-sell-act.confirm {
  flex: 1;
  background: #0055FE;
  color: #FFFFFF;
  border-color: #0055FE;
}

.btn-sell-act.confirm:hover {
  background: #0045D8;
}

.btn-sell-act.cancel {
  color: #EF4444;
  border-color: #FECACA;
}

.btn-sell-act.sold-done {
  flex: 1;
  background: #ECFDF5;
  color: #059669;
  border-color: #A7F3D0;
}

@media (max-width: 960px) {
  .sell-reg-grid-4,
  .sell-reg-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .my-selling-list-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .seller-role-switcher,
  .sell-reg-grid-4,
  .sell-reg-grid-3,
  .sell-reg-grid-2,
  .my-selling-list-grid {
    grid-template-columns: 1fr;
  }
  .btn-submit-user-car {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* AUTOWINI-STYLE BUYER REVIEWS (TESTIMONIALS) LIST & DETAIL PAGE             */
/* -------------------------------------------------------------------------- */
.aw-reviews-page-body {
  background-color: #F8FAFC;
  color: #0F172A;
  min-height: 100vh;
}

.aw-reviews-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #1D4ED8 100%);
  color: #FFFFFF;
  padding: 52px 24px 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.aw-hero-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.aw-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38BDF8;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.aw-hero-title {
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 10px;
}

.aw-hero-sub {
  font-size: 1rem;
  color: #CBD5E1;
  max-width: 640px;
}

.aw-hero-stats-box {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 20px 28px;
  backdrop-filter: blur(10px);
}

.aw-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aw-stat-val {
  font-size: 1.65rem;
  font-weight: 900;
  color: #FBBF24;
  display: flex;
  align-items: center;
  gap: 6px;
}

.aw-stat-lbl {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 700;
  margin-top: 2px;
}

.aw-stat-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.14);
}

.aw-reviews-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 90px;
}

.aw-country-chips-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.aw-country-chip {
  padding: 8px 16px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.aw-country-chip:hover {
  border-color: #94A3B8;
}

.aw-country-chip.active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

.aw-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.aw-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aw-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aw-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  width: 260px;
}

.aw-search-box input {
  border: none;
  background: none;
  color: #0F172A;
  font-size: 0.875rem;
  width: 100%;
}

.aw-select {
  height: 40px;
  padding: 0 12px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  color: #0F172A;
  font-size: 0.84rem;
  font-weight: 700;
}

.aw-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.aw-review-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.aw-review-card:hover {
  transform: translateY(-5px);
  border-color: #93C5FD;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.1);
}

.aw-card-thumb {
  position: relative;
  height: 215px;
  background: #0F172A;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.aw-card-country-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.aw-card-media-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(37, 99, 235, 0.9);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
}

.aw-card-car-tag {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.65) 100%);
  color: #38BDF8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aw-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.aw-star-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.aw-stars-gold {
  color: #F59E0B;
  font-size: 1rem;
  letter-spacing: 1px;
  font-weight: 900;
}

.aw-rating-score-badge {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
}

.aw-card-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aw-card-excerpt {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.58;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aw-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #64748B;
  font-weight: 600;
}

.aw-reply-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #059669;
  font-weight: 800;
  font-size: 0.74rem;
}

/* Detail View Styles */
.aw-detail-container {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.aw-detail-head {
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 24px;
  margin-bottom: 28px;
}

.aw-detail-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.aw-detail-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.32;
  margin-bottom: 14px;
}

.aw-detail-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.875rem;
  color: #475569;
}

.aw-detail-vehicle-banner {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.aw-detail-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.aw-detail-photo-item {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
}

.aw-detail-story-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #1E293B;
  white-space: pre-line;
  margin-bottom: 32px;
}

.aw-star-voter-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #FDE68A;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 32px;
}

.aw-star-buttons-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
}

.btn-aw-star-pick {
  font-size: 2rem;
  line-height: 1;
  color: #CBD5E1;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.btn-aw-star-pick.active,
.btn-aw-star-pick:hover {
  color: #F59E0B;
  transform: scale(1.15);
}

.aw-official-reply-box {
  background: #EFF6FF;
  border-left: 4px solid #2563EB;
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 32px;
}

.aw-adj-nav-list {
  border-top: 1px solid #E2E8F0;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aw-adj-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s ease;
}

.aw-adj-row:hover {
  background: #F1F5F9;
}

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

@media (max-width: 680px) {
  .aw-reviews-grid {
    grid-template-columns: 1fr;
  }
  .aw-detail-container {
    padding: 20px;
  }
  .aw-detail-title {
    font-size: 1.35rem;
  }
  .aw-hero-stats-box {
    width: 100%;
    justify-content: space-around;
    padding: 16px;
  }
}

/* -------------------------------------------------------------------------- */
/* COUNTRY TERMS VERSION MANAGEMENT BOARD (terms.html)                        */
/* -------------------------------------------------------------------------- */
.ct-page-body {
  background-color: #F8FAFC;
  color: #0F172A;
  min-height: 100vh;
}

.ct-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 65%, #1E3A8A 100%);
  color: #FFFFFF;
  padding: 48px 24px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-hero-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.ct-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38BDF8;
  font-size: 0.76rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.ct-hero-title {
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.ct-hero-sub {
  font-size: 0.95rem;
  color: #CBD5E1;
  max-width: 680px;
  line-height: 1.55;
}

.ct-hero-kpi-group {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 18px 24px;
}

.ct-kpi-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ct-kpi-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: #38BDF8;
}

.ct-kpi-lbl {
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 700;
  margin-top: 2px;
}

.ct-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 90px;
}

.ct-country-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.ct-country-tab {
  padding: 8px 16px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  font-size: 0.84rem;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.ct-country-tab:hover {
  border-color: #94A3B8;
}

.ct-country-tab.active {
  background: #0F172A;
  color: #FFFFFF;
  border-color: #0F172A;
}

.ct-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.ct-toolbar-left,
.ct-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ct-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  width: 260px;
}

.ct-search-wrap input {
  border: none;
  background: none;
  color: #0F172A;
  font-size: 0.875rem;
  width: 100%;
}

.ct-select {
  height: 40px;
  padding: 0 12px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  color: #0F172A;
  font-size: 0.84rem;
  font-weight: 700;
}

.ct-board-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.ct-board-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ct-board-table th {
  background: #F1F5F9;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border-bottom: 1px solid #E2E8F0;
}

.ct-board-table td {
  padding: 16px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.875rem;
  color: #1E293B;
  vertical-align: middle;
}

.ct-board-table tbody tr {
  cursor: pointer;
  transition: background 0.14s ease;
}

.ct-board-table tbody tr:hover {
  background: #F8FAFC;
}

.ct-doc-code {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: #475569;
  background: #F1F5F9;
  padding: 3px 8px;
  border-radius: 6px;
}

.ct-country-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0F172A;
}

.ct-cat-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  background: #EFF6FF;
  color: #1D4ED8;
}

.ct-ver-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 900;
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.ct-ver-badge.scheduled {
  background: #FFFBEB;
  color: #D97706;
  border-color: #FDE68A;
}

.ct-ver-badge.archived {
  background: #F1F5F9;
  color: #64748B;
  border-color: #CBD5E1;
}

.ct-ver-count-chip {
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748B;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-left: 6px;
}

/* Detail & Version Switcher Panel */
.ct-detail-panel {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.ct-detail-top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid #E2E8F0;
  margin-bottom: 22px;
}

.ct-version-timeline-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
}

.ct-version-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ct-ver-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  font-size: 0.84rem;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  transition: all 0.16s ease;
}

.ct-ver-switch-btn:hover {
  border-color: #93C5FD;
}

.ct-ver-switch-btn.active {
  background: #EFF6FF;
  border-color: #2563EB;
  color: #1D4ED8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.ct-changelog-banner {
  background: #FFFBEB;
  border-left: 4px solid #F59E0B;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 0.875rem;
  color: #78350F;
  line-height: 1.6;
}

.ct-diff-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.ct-diff-pane {
  border-radius: 12px;
  padding: 18px;
  font-size: 0.86rem;
  line-height: 1.7;
  white-space: pre-line;
}

.ct-diff-pane.old-ver {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #7F1D1D;
}

.ct-diff-pane.new-ver {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #064E3B;
}

.ct-clause-body {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 26px;
  font-size: 0.95rem;
  line-height: 1.85;
  color: #1E293B;
  white-space: pre-line;
}

/* Customer Frontend Tab + Select Box Viewer Styles */
.ct-front-viewer-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 34px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ct-front-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #E2E8F0;
}

.ct-version-selector-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 290px;
}

.ct-version-selector-box label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ct-version-select {
  height: 40px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1.5px solid #2563EB;
  border-radius: 8px;
  color: #0F172A;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
}

.ct-doc-subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ct-doc-subtab-btn {
  padding: 8px 14px;
  border-radius: 10px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ct-doc-subtab-btn.active {
  background: #EFF6FF;
  border-color: #2563EB;
  color: #1D4ED8;
}

/* Admin Dark Mode Adaptation for Country Terms Board */
.admin-body:not(.theme-light) #pane-terms .ct-board-card,
.admin-body:not(.theme-light) #pane-terms .ct-detail-panel,
.admin-body:not(.theme-light) #pane-terms .ct-toolbar {
  background: #0F172A;
  border-color: rgba(255, 255, 255, 0.08);
  color: #F1F5F9;
}

.admin-body:not(.theme-light) #pane-terms .ct-board-table th {
  background: #080D1A;
  color: #94A3B8;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.admin-body:not(.theme-light) #pane-terms .ct-board-table td {
  color: #E2E8F0;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.admin-body:not(.theme-light) #pane-terms .ct-board-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.admin-body:not(.theme-light) #pane-terms .ct-country-tab {
  background: #0F172A;
  border-color: rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
}

.admin-body:not(.theme-light) #pane-terms .ct-country-tab.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}

.admin-body:not(.theme-light) #pane-terms .ct-search-wrap,
.admin-body:not(.theme-light) #pane-terms .ct-select {
  background: #070B14;
  border-color: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

.admin-body:not(.theme-light) #pane-terms .ct-search-wrap input {
  color: #FFFFFF;
}

.admin-body:not(.theme-light) #pane-terms .ct-version-timeline-box,
.admin-body:not(.theme-light) #pane-terms .ct-clause-body {
  background: #080D1A;
  border-color: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
}

.admin-body:not(.theme-light) #pane-terms .ct-ver-switch-btn {
  background: #0F172A;
  border-color: rgba(255, 255, 255, 0.14);
  color: #CBD5E1;
}

.admin-body:not(.theme-light) #pane-terms .ct-ver-switch-btn.active {
  background: rgba(37, 99, 235, 0.25);
  border-color: #38BDF8;
  color: #38BDF8;
}

@media (max-width: 860px) {
  .ct-diff-compare-grid {
    grid-template-columns: 1fr;
  }
  .ct-board-table th:nth-child(4),
  .ct-board-table td:nth-child(4) {
    display: none;
  }
  .ct-detail-panel,
  .ct-front-viewer-card {
    padding: 20px;
  }
  .ct-version-selector-box {
    width: 100%;
  }
}