화물차 지도 마커와 카카오 키 전환

apps/web/public/styles.css

@@ -498,31 +498,94 @@ button:hover {
   font-weight: 800;
 }
 
-.kakao-marker {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.truck-marker {
+  --truck-color: var(--blue);
+  --truck-cab: #1556b8;
+  position: relative;
+  display: inline-flex;
+  align-items: flex-end;
   width: max-content;
-  min-width: 42px;
-  min-height: 30px;
-  padding: 0 9px;
-  border: 2px solid #ffffff;
-  border-radius: 999px;
-  background: var(--blue);
+  min-width: 56px;
+  min-height: 34px;
+  border: 0;
+  padding: 0 0 7px;
+  background: transparent;
   color: #ffffff;
-  box-shadow: 0 8px 18px rgba(16, 32, 48, 0.25);
-  font-size: 11px;
-  font-weight: 900;
+  filter: drop-shadow(0 8px 13px rgba(16, 32, 48, 0.28));
   font-family: inherit;
   cursor: pointer;
 }
 
-.kakao-marker.stale {
-  background: var(--amber);
+.truck-marker.stale {
+  --truck-color: var(--amber);
+  --truck-cab: #8f4307;
 }
 
-.kakao-marker.offline {
-  background: var(--red);
+.truck-marker.offline {
+  --truck-color: var(--red);
+  --truck-cab: #8f1d15;
+}
+
+.truck-marker::before,
+.truck-marker::after {
+  content: "";
+  position: absolute;
+  bottom: 1px;
+  width: 7px;
+  height: 7px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  background: #17212b;
+}
+
+.truck-marker::before {
+  left: 10px;
+}
+
+.truck-marker::after {
+  right: 11px;
+}
+
+.truck-marker__trailer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 38px;
+  height: 22px;
+  padding: 0 7px;
+  border: 2px solid #ffffff;
+  border-right: 0;
+  border-radius: 5px 0 0 5px;
+  background: var(--truck-color);
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.truck-marker__cab {
+  position: relative;
+  width: 18px;
+  height: 19px;
+  border: 2px solid #ffffff;
+  border-radius: 0 6px 5px 0;
+  background: var(--truck-cab);
+}
+
+.truck-marker__cab::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 7px;
+  height: 5px;
+  border-radius: 1px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.leaflet-truck-marker {
+  border: 0;
+  background: transparent;
 }
 
 .kakao-popup {
@@ -543,6 +606,11 @@ button:hover {
   font-weight: 900;
 }
 
+.popup-cargo {
+  margin-top: 6px;
+  font-weight: 900;
+}
+
 @media (max-width: 860px) {
   .app-shell {
     grid-template-rows: auto minmax(0, 1fr);