관제 화면 문구와 반응형 표시 개선

apps/web/public/styles.css

@@ -225,7 +225,7 @@ button:hover {
   overflow: hidden;
   color: var(--navy);
   font-size: 22px;
-  line-height: 1.15;
+  line-height: 1.25;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -236,6 +236,7 @@ button:hover {
   font-size: 13px;
   font-weight: 750;
   line-height: 1.45;
+  word-break: keep-all;
 }
 
 .ops-brief-grid {
@@ -686,7 +687,7 @@ button:hover {
 }
 
 .speed small {
-  max-width: 92px;
+  max-width: 112px;
   overflow: hidden;
   color: #174ea6;
   font-size: 11px;
@@ -815,11 +816,12 @@ button:hover {
   font-size: 12px;
   font-weight: 800;
   line-height: 1.45;
+  word-break: keep-all;
 }
 
 .map-legend {
   top: 18px;
-  right: 18px;
+  right: 86px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1316,4 +1318,27 @@ button:hover {
     max-width: calc(100% - 20px);
     overflow: auto;
   }
+
+  .vehicle-item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .vehicle-title {
+    flex-wrap: wrap;
+  }
+
+  .vehicle-title strong {
+    white-space: normal;
+  }
+
+  .speed {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    align-items: baseline;
+    justify-items: start;
+  }
+
+  .speed small {
+    max-width: none;
+    text-align: left;
+  }
 }