전국 화물차 시뮬레이터 추가

apps/web/public/styles.css

@@ -236,8 +236,7 @@ button:hover {
   min-width: 0;
 }
 
-.driver-form label:nth-child(3),
-.driver-form label:nth-child(4),
+.driver-form label:nth-child(n + 3),
 .driver-form button {
   grid-column: 1 / -1;
 }
@@ -248,7 +247,8 @@ button:hover {
   font-weight: 800;
 }
 
-.driver-form input {
+.driver-form input,
+.driver-form select {
   width: 100%;
   min-height: 36px;
   border: 1px solid var(--border);
@@ -259,7 +259,8 @@ button:hover {
   font: inherit;
 }
 
-.driver-form input:focus {
+.driver-form input:focus,
+.driver-form select:focus {
   border-color: var(--blue);
   outline: 2px solid rgba(31, 111, 235, 0.14);
 }
@@ -388,6 +389,34 @@ button:hover {
   color: var(--red);
 }
 
+.vehicle-type-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 7px;
+  border-radius: 5px;
+  background: #e8eef6;
+  color: #2c3b4f;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.vehicle-type-chip.type-trailer,
+.vehicle-type-chip.type-container {
+  background: rgba(44, 62, 80, 0.1);
+  color: #2c3e50;
+}
+
+.vehicle-type-chip.type-van {
+  background: rgba(2, 132, 199, 0.12);
+  color: #0369a1;
+}
+
+.vehicle-type-chip.type-cold {
+  background: rgba(14, 116, 144, 0.12);
+  color: #0e7490;
+}
+
 .speed {
   color: var(--text);
   font-size: 13px;
@@ -501,19 +530,80 @@ button:hover {
 .truck-marker {
   --truck-color: var(--blue);
   --truck-cab: #1556b8;
+  --truck-accent: rgba(255, 255, 255, 0.2);
+  --body-width: 42px;
+  --body-height: 24px;
+  --cab-width: 19px;
   position: relative;
   display: inline-flex;
   align-items: flex-end;
   width: max-content;
-  min-width: 56px;
-  min-height: 34px;
+  min-width: calc(var(--body-width) + var(--cab-width));
+  min-height: 38px;
   border: 0;
-  padding: 0 0 7px;
+  padding: 0 0 8px;
   background: transparent;
   color: #ffffff;
   filter: drop-shadow(0 8px 13px rgba(16, 32, 48, 0.28));
   font-family: inherit;
   cursor: pointer;
+  transition: filter 0.18s ease, transform 0.18s ease;
+}
+
+.truck-marker:hover {
+  filter: drop-shadow(0 10px 16px rgba(16, 32, 48, 0.34));
+  transform: translateY(-1px);
+}
+
+.truck-marker.stale {
+  --truck-color: var(--amber);
+  --truck-cab: #8f4307;
+}
+
+.truck-marker.offline {
+  --truck-color: var(--red);
+  --truck-cab: #8f1d15;
+}
+
+.truck-marker.type-trailer {
+  --truck-color: #334155;
+  --truck-cab: #0f172a;
+  --body-width: 62px;
+  --body-height: 24px;
+}
+
+.truck-marker.type-container {
+  --truck-color: #475569;
+  --truck-cab: #1e293b;
+  --body-width: 58px;
+  --body-height: 24px;
+  --truck-accent: repeating-linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.18) 0 2px,
+    transparent 2px 8px
+  );
+}
+
+.truck-marker.type-box,
+.truck-marker.type-wing {
+  --body-width: 48px;
+  --body-height: 25px;
+}
+
+.truck-marker.type-van {
+  --truck-color: #0284c7;
+  --truck-cab: #0369a1;
+  --body-width: 34px;
+  --body-height: 21px;
+  --cab-width: 22px;
+}
+
+.truck-marker.type-cold {
+  --truck-color: #0e7490;
+  --truck-cab: #155e75;
+  --body-width: 47px;
+  --body-height: 25px;
+  --truck-accent: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 45%);
 }
 
 .truck-marker.stale {
@@ -539,34 +629,57 @@ button:hover {
 }
 
 .truck-marker::before {
-  left: 10px;
+  left: 11px;
 }
 
 .truck-marker::after {
-  right: 11px;
+  right: 12px;
 }
 
-.truck-marker__trailer {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 38px;
-  height: 22px;
-  padding: 0 7px;
+.truck-marker__body {
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  place-items: center;
+  width: var(--body-width);
+  height: var(--body-height);
   border: 2px solid #ffffff;
   border-right: 0;
   border-radius: 5px 0 0 5px;
-  background: var(--truck-color);
-  font-size: 11px;
+  background:
+    var(--truck-accent),
+    var(--truck-color);
+  font-size: 10px;
   font-weight: 900;
   line-height: 1;
   white-space: nowrap;
+  overflow: hidden;
+}
+
+.truck-marker.type-van .truck-marker__body {
+  grid-template-rows: 1fr;
+  border-radius: 9px 0 0 7px;
+}
+
+.truck-marker.type-van .truck-marker__type {
+  display: none;
+}
+
+.truck-marker__type {
+  align-self: end;
+  font-size: 9px;
+  opacity: 0.88;
+}
+
+.truck-marker__plate {
+  align-self: start;
+  font-size: 11px;
 }
 
 .truck-marker__cab {
   position: relative;
-  width: 18px;
-  height: 19px;
+  width: var(--cab-width);
+  height: calc(var(--body-height) - 3px);
   border: 2px solid #ffffff;
   border-radius: 0 6px 5px 0;
   background: var(--truck-cab);