/* ===== Design Tokens ===== */
:root, [data-theme="light"] {
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #f8f9fb;
  --color-surface-offset: #edf0f4;
  --color-border: #dce0e6;
  --color-divider: #e8ecf0;
  --color-text: #1a1d23;
  --color-text-muted: #6b7280;
  --color-text-faint: #9ca3af;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e40af;
  --color-primary-bg: #eff6ff;
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-warning: #d97706;
  --color-rent: #8b5cf6;
  --color-rent-bg: #f5f3ff;
  --color-buy: #0891b2;
  --color-buy-bg: #ecfeff;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Car type colors */
  --ct-ev: #10b981; --ct-lpg: #f59e0b; --ct-diesel: #6366f1; --ct-gasoline: #ef4444;
  --ct-ev-bg: #ecfdf5; --ct-lpg-bg: #fffbeb; --ct-diesel-bg: #eef2ff; --ct-gasoline-bg: #fef2f2;
}
[data-theme="dark"] {
  --color-bg: #0f1117; --color-surface: #1a1d27; --color-surface-2: #1f2333;
  --color-surface-offset: #161923; --color-border: #2e3345; --color-divider: #252a3a;
  --color-text: #e2e5eb; --color-text-muted: #8b92a5; --color-text-faint: #5c6478;
  --color-primary: #60a5fa; --color-primary-hover: #93c5fd; --color-primary-active: #3b82f6;
  --color-primary-bg: #1e293b;
  --color-success: #34d399; --color-success-bg: #064e3b;
  --color-error: #f87171; --color-error-bg: #450a0a;
  --color-rent: #a78bfa; --color-rent-bg: #2e1065;
  --color-buy: #22d3ee; --color-buy-bg: #083344;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --ct-ev: #34d399; --ct-lpg: #fbbf24; --ct-diesel: #818cf8; --ct-gasoline: #f87171;
  --ct-ev-bg: #064e3b; --ct-lpg-bg: #451a03; --ct-diesel-bg: #1e1b4b; --ct-gasoline-bg: #450a0a;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  min-height: 100dvh; font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  line-height: 1.6; color: var(--color-text); background: var(--color-bg);
}
input, button, textarea, select { font: inherit; color: inherit; }
a, button, input, textarea, select {
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
button { cursor: pointer; background: none; border: none; }

/* ===== Layout ===== */
.app-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* ===== Header ===== */
.app-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
  backdrop-filter: blur(12px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; }
.logo-area { display: flex; align-items: center; gap: 0.5rem; }
.logo-icon { color: var(--color-primary); }
.logo-text { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: 700; letter-spacing: -0.02em; }
.theme-toggle { padding: 0.5rem; border-radius: var(--radius-md); color: var(--color-text-muted); }
.theme-toggle:hover { background: var(--color-surface-offset); color: var(--color-text); }

/* ===== Tabs ===== */
.category-tabs { display: flex; gap: 0.25rem; padding: 0.75rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.875rem; border-radius: var(--radius-lg);
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  font-weight: 500; color: var(--color-text-muted);
  white-space: nowrap; border: 1px solid transparent;
}
.tab-btn:hover { background: var(--color-surface); color: var(--color-text); }
.tab-btn.active {
  background: var(--color-primary-bg); color: var(--color-primary);
  border-color: var(--color-primary); font-weight: 600;
}
.tab-btn svg { flex-shrink: 0; }
@media (max-width: 768px) { .category-tabs { gap: 0.10625rem; } }

/* ===== Main (Rent vs Buy) ===== */
.main-content {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; padding: 1.5rem 0 3rem; align-items: start;
}
@media (max-width: 768px) { .main-content { grid-template-columns: 1fr; } }

/* ===== Panels ===== */
.input-panel, .result-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.result-panel { position: sticky; top: 5rem; }
@media (max-width: 768px) { .result-panel { position: static; } }
.panel-header { margin-bottom: 1.25rem; }
.panel-title { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-weight: 700; letter-spacing: -0.01em; }
.panel-subtitle { font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); color: var(--color-text-muted); margin-top: 0.25rem; }

/* ===== Inputs ===== */
.input-group { margin-bottom: 0.875rem; }
.input-label { display: block; font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); font-weight: 600; margin-bottom: 0.25rem; }
.input-field {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  font-variant-numeric: tabular-nums; outline: none;
}
.input-field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
[data-theme="dark"] .input-field:focus { box-shadow: 0 0 0 3px rgba(96,165,250,0.2); }
.input-hint { display: block; font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); color: var(--color-text-faint); margin-top: 0.2rem; }
.section-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0 1rem; }
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-divider); }
.divider-label {
  font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); white-space: nowrap;
}

/* ===== Buttons ===== */
.calc-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.75rem; margin-top: 1.5rem;
  background: var(--color-primary); color: #fff; border-radius: var(--radius-lg);
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); font-weight: 600;
}
.calc-btn:hover { background: var(--color-primary-hover); }
.calc-btn:active { background: var(--color-primary-active); transform: translateY(1px); }

/* ===== Verdict ===== */
.verdict-card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid var(--color-border); margin-bottom: 1rem; }
.verdict-card.rent-wins { background: var(--color-rent-bg); border-color: var(--color-rent); }
.verdict-card.buy-wins { background: var(--color-buy-bg); border-color: var(--color-buy); }
.verdict-card.tie { background: var(--color-surface-offset); }
.verdict-icon { font-size: 1.75rem; line-height: 1; }
.verdict-text { display: flex; flex-direction: column; }
.verdict-label { font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); font-weight: 700; }
.verdict-amount { font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); color: var(--color-text-muted); }

/* ===== Summary Cards ===== */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
.summary-card { display: flex; flex-direction: column; padding: 0.875rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.rent-card { background: var(--color-rent-bg); border-color: var(--color-rent); }
.buy-card { background: var(--color-buy-bg); border-color: var(--color-buy); }
.summary-card-label { font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.summary-card-amount { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rent-card .summary-card-amount { color: var(--color-rent); }
.buy-card .summary-card-amount { color: var(--color-buy); }
[data-theme="dark"] .rent-card .summary-card-amount { color: #c4b5fd; }
[data-theme="dark"] .buy-card .summary-card-amount { color: #67e8f9; }
.summary-card-monthly { font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); color: var(--color-text-faint); margin-top: 0.125rem; }

/* ===== Breakdown ===== */
.breakdown-section { margin-bottom: 1rem; }
.breakdown-title { font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); font-weight: 600; margin-bottom: 0.5rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--color-divider); }
.breakdown-list { display: flex; flex-direction: column; gap: 0.25rem; }
.breakdown-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.25rem 0; font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); }
.breakdown-row-label { color: var(--color-text-muted); }
.breakdown-row-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.breakdown-row-value.positive { color: var(--color-success); }
.breakdown-row-value.negative { color: var(--color-error); }

/* ===== Crossover Info ===== */
.crossover-info { margin: 0.75rem 0 0.5rem; }
.crossover-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem; border-radius: var(--radius-lg);
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  font-weight: 600; background: var(--color-primary-bg); color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.crossover-badge svg { flex-shrink: 0; }

/* ===== Chart ===== */
.chart-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-divider); }
.chart-section canvas { width: 100% !important; height: auto !important; max-height: 280px; }

/* ========== CAR TYPE SECTION ========== */
.cartype-section { padding: 1.5rem 0 3rem; }
.cartype-intro { margin-bottom: 1.5rem; }
.cartype-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
  margin-bottom: 0;
}
@media (max-width: 1024px) { .cartype-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cartype-grid { grid-template-columns: 1fr; } }

.cartype-shared-panel, .cartype-car-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.cartype-panel-title {
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); font-weight: 700;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.ct-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ct-ev { background: var(--ct-ev); }
.ct-lpg { background: var(--ct-lpg); }
.ct-diesel { background: var(--ct-diesel); }
.ct-gasoline { background: var(--ct-gasoline); }

.ct-calc-btn { max-width: 400px; margin: 1.5rem auto; }

/* ===== CT Results ===== */
.ct-results { margin-top: 1.5rem; }
.ct-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 768px) { .ct-summary-grid { grid-template-columns: repeat(2, 1fr); } }

.ct-summary-card {
  display: flex; flex-direction: column; padding: 0.875rem;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
}
.ct-summary-card[data-ct="ev"] { background: var(--ct-ev-bg); border-color: var(--ct-ev); }
.ct-summary-card[data-ct="lpg"] { background: var(--ct-lpg-bg); border-color: var(--ct-lpg); }
.ct-summary-card[data-ct="diesel"] { background: var(--ct-diesel-bg); border-color: var(--ct-diesel); }
.ct-summary-card[data-ct="gasoline"] { background: var(--ct-gasoline-bg); border-color: var(--ct-gasoline); }

.ct-card-name { font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.ct-card-amount { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ct-card-amount[data-ct="ev"] { color: var(--ct-ev); }
.ct-card-amount[data-ct="lpg"] { color: var(--ct-lpg); }
.ct-card-amount[data-ct="diesel"] { color: var(--ct-diesel); }
.ct-card-amount[data-ct="gasoline"] { color: var(--ct-gasoline); }
.ct-card-sub { font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); color: var(--color-text-faint); margin-top: 0.125rem; }
.ct-card-rank {
  display: inline-block; margin-top: 0.375rem;
  font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm); background: var(--color-primary-bg); color: var(--color-primary);
}

/* ===== Advantage Section ===== */
.ct-advantage-section { margin-bottom: 1.25rem; }
.ct-advantage-title {
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  font-weight: 700; margin-bottom: 0.75rem;
}
.ct-advantage-list { display: flex; flex-direction: column; gap: 0.375rem; }
.ct-advantage-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
}
.ct-advantage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ct-advantage-period { font-weight: 600; min-width: 7rem; }
.ct-advantage-name { font-weight: 700; }

/* ===== CT Detail Grid ===== */
.ct-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.25rem;
}
@media (max-width: 768px) { .ct-detail-grid { grid-template-columns: 1fr; } }
.ct-detail-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.ct-detail-card h4 {
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.375rem;
}

.ct-chart-section canvas { max-height: 340px; }

/* ========== FOOD HOGU SECTION ========== */
.food-section { padding: 1.5rem 0 3rem; }
.food-intro { margin-bottom: 1.5rem; }
.food-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media (max-width: 768px) { .food-grid { grid-template-columns: 1fr; } }
.food-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.food-panel-title {
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); font-weight: 700;
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;
}
.food-icon { font-size: 1.25rem; }
.food-calc-btn { max-width: 400px; margin: 1.5rem auto; }

/* Food verdict */
.food-verdict { margin-bottom: 1.5rem; }
.food-verdict-card {
  text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
}
.food-verdict-card.is-hogu {
  background: var(--color-error-bg); border-color: var(--color-error);
}
.food-verdict-card.is-hyeja {
  background: var(--color-success-bg); border-color: var(--color-success);
}
.food-verdict-card.is-tie {
  background: var(--color-surface-offset); border-color: var(--color-border);
}
.food-verdict-emoji { font-size: 3rem; margin-bottom: 0.5rem; line-height: 1.2; }
.food-verdict-label {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 800; letter-spacing: -0.02em;
}
.is-hogu .food-verdict-label { color: var(--color-error); }
.is-hyeja .food-verdict-label { color: var(--color-success); }
.food-verdict-sub {
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  color: var(--color-text-muted); margin-top: 0.375rem;
}
.food-verdict-diff {
  display: inline-block; margin-top: 0.75rem;
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  font-weight: 700; padding: 0.375rem 1rem;
  border-radius: var(--radius-lg);
}
.is-hogu .food-verdict-diff { background: rgba(220,38,38,0.1); color: var(--color-error); }
.is-hyeja .food-verdict-diff { background: rgba(5,150,105,0.1); color: var(--color-success); }
[data-theme="dark"] .is-hogu .food-verdict-diff { background: rgba(248,113,113,0.15); }
[data-theme="dark"] .is-hyeja .food-verdict-diff { background: rgba(52,211,153,0.15); }

/* Food compare grid */
.food-compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem;
}
@media (max-width: 640px) { .food-compare-grid { grid-template-columns: 1fr; } }
.food-compare-card {
  display: flex; flex-direction: column; padding: 1rem;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.food-compare-card.delivery-card { border-left: 3px solid var(--color-rent); }
.food-compare-card.cook-card { border-left: 3px solid var(--color-success); }
.food-compare-card-label {
  font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.375rem;
}
.food-compare-card-amount {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.delivery-card .food-compare-card-amount { color: var(--color-rent); }
.cook-card .food-compare-card-amount { color: var(--color-success); }
[data-theme="dark"] .delivery-card .food-compare-card-amount { color: #c4b5fd; }
[data-theme="dark"] .cook-card .food-compare-card-amount { color: #34d399; }
.food-compare-card-sub {
  font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  color: var(--color-text-faint); margin-top: 0.125rem;
}

/* Food detail */
.food-detail {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 1.25rem; box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.food-detail-title {
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); font-weight: 700;
  margin-bottom: 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--color-divider);
}
.food-detail-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media (max-width: 640px) { .food-detail-cols { grid-template-columns: 1fr; } }
.food-detail-col h4 {
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem); font-weight: 700;
  margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.375rem;
}

/* Food tip */
.food-tip {
  padding: 1rem; border-radius: var(--radius-lg);
  background: var(--color-primary-bg); border: 1px solid var(--color-primary);
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  color: var(--color-primary); font-weight: 500; line-height: 1.6;
}
.food-tip strong { font-weight: 700; }

/* ===== Footer ===== */
.app-footer {
  text-align: center; padding: 2rem 0; border-top: 1px solid var(--color-divider);
  font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  color: var(--color-text-faint); display: flex; flex-direction: column; gap: 0.375rem;
}
.app-footer a { color: var(--color-text-faint); text-decoration: none; }
.app-footer a:hover { color: var(--color-text-muted); text-decoration: underline; }

/* ===== Utility ===== */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f1117; --color-surface: #1a1d27; --color-surface-2: #1f2333;
    --color-surface-offset: #161923; --color-border: #2e3345; --color-divider: #252a3a;
    --color-text: #e2e5eb; --color-text-muted: #8b92a5; --color-text-faint: #5c6478;
    --color-primary: #60a5fa; --color-primary-hover: #93c5fd; --color-primary-active: #3b82f6;
    --color-primary-bg: #1e293b;
    --color-success: #34d399; --color-error: #f87171;
    --color-rent: #a78bfa; --color-rent-bg: #2e1065; --color-buy: #22d3ee; --color-buy-bg: #083344;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --ct-ev: #34d399; --ct-lpg: #fbbf24; --ct-diesel: #818cf8; --ct-gasoline: #f87171;
    --ct-ev-bg: #064e3b; --ct-lpg-bg: #451a03; --ct-diesel-bg: #1e1b4b; --ct-gasoline-bg: #450a0a;
  }
}