차량 목적지 경로 미리보기 추가

apps/web/public/styles.css

@@ -724,6 +724,87 @@ button:hover {
   font-weight: 900;
 }
 
+.popup-route {
+  display: grid;
+  gap: 4px;
+  margin: 8px 0;
+  padding: 8px;
+  border: 1px solid rgba(31, 111, 235, 0.18);
+  border-radius: 6px;
+  background: rgba(31, 111, 235, 0.07);
+}
+
+.popup-route div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.popup-route span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.popup-route strong {
+  color: #174ea6;
+  font-size: 12px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.route-destination-marker,
+.route-destination-leaflet {
+  pointer-events: none;
+}
+
+.route-destination-marker,
+.route-destination-leaflet,
+.route-destination-leaflet > div {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  column-gap: 7px;
+  min-width: 112px;
+  padding: 7px 9px;
+  border: 1px solid rgba(23, 33, 43, 0.16);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10px 24px rgba(20, 40, 70, 0.18);
+}
+
+.route-destination-pin {
+  grid-row: 1 / span 2;
+  display: grid;
+  place-items: center;
+  min-width: 34px;
+  height: 24px;
+  border-radius: 999px;
+  background: #1f6feb;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.route-destination-marker strong,
+.route-destination-leaflet strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.route-destination-marker small,
+.route-destination-leaflet small {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+}
+
 @media (max-width: 860px) {
   .app-shell {
     grid-template-rows: auto minmax(0, 1fr);