Use two-row mobile usage metrics

README.md

@@ -15,7 +15,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
 - 허용된 차량 명령 TCP 전송
 - monitor 화면과 AJAX 상태 갱신
 - monitor 화면 WakeLock, 언어, 테마 토글
-- 모바일 폭에 맞춘 사용량/로그 가로 스크롤과 시간 문구 축약
+- 모바일 폭에 맞춘 사용량 2줄 배치, 로그 가로 스크롤, 시간 문구 축약
 - 사용량/요금 표시와 보정 metadata
 - 4.95초 UI timeout과 60초 사용량 정산 분리
 - TCP 실패 reason과 마지막 수신 지연 표시
@@ -39,7 +39,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
 
 상태 기록 섹션의 경과는 각 로그가 기록된 시각부터 현재까지 흐른 시간입니다. 각 행의 `age_seconds`는 서버 현재시각과 로그 timestamp의 차이로 계산해 내려주며, 화면 갱신마다 상단 조회 주기 경과처럼 계속 증가합니다.
 
-모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표와 상태 기록 테이블은 카드 내부에서 좌우 스크롤되도록 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다.
+모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표는 3열 2줄로 카드 안에 배치하고, 상태 기록 테이블은 카드 내부 좌우 스크롤로 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다.
 
 실시간 차량 그림의 도어/트렁크 열림 표시선은 열림 애니메이션 중에도 차량 기준 위치를 유지합니다. 트렁크 표시선은 중앙 정렬 기준을 유지한 상태에서 확대되어 PC와 모바일 모두에서 차체 하단과 맞도록 표시됩니다.
 

monitor.php

@@ -1117,13 +1117,27 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             }
             .usage-main {
                 padding-bottom: 0.25rem;
+                overflow-x: visible;
+                overflow-y: visible;
             }
             .usage-metrics {
-                gap: 0.8rem;
-                min-width: 600px;
+                display: grid;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                gap: 0.75rem 0.9rem;
+                min-width: 0;
             }
             .usage-meter {
-                min-width: 600px;
+                min-width: 0;
+            }
+            .usage-metric {
+                min-width: 0;
+                text-align: center;
+            }
+            .usage-metric:nth-child(3n + 1) {
+                text-align: left;
+            }
+            .usage-metric:nth-child(3n) {
+                text-align: right;
             }
             .usage-metric .label-text { font-size: 0.64rem; }
             .usage-metric .font-mono { font-size: 0.88rem; }