Fix trunk indicator alignment

README.md

@@ -21,6 +21,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
 - TCP 실패 reason과 마지막 수신 지연 표시
 - 수집 공백을 반영한 차량 상태 경과 시간 표시
 - 도어/경계/시동/공조 상태 해석
+- 실시간 차량 도어/트렁크 열림 표시
 - service worker와 PWA icon 제공
 
 ## 주요 API
@@ -40,6 +41,8 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
 
 모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표와 상태 기록 테이블은 카드 내부에서 좌우 스크롤되도록 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다.
 
+실시간 차량 그림의 도어/트렁크 열림 표시선은 열림 애니메이션 중에도 차량 기준 위치를 유지합니다. 트렁크 표시선은 중앙 정렬 기준을 유지한 상태에서 확대되어 PC와 모바일 모두에서 차체 하단과 맞도록 표시됩니다.
+
 ## Monitor 화면 제어
 
 헤더 우측 컨트롤은 WakeLock, 언어, 테마 순서입니다. WakeLock은 Screen Wake Lock API를 지원하는 브라우저에서 화면 꺼짐을 방지하며, 활성 상태는 초록색 아이콘 버튼으로 표시합니다. 사용자의 선택은 `localStorage`에 저장하고, 새로고침이나 탭 복귀 후에는 브라우저 정책에 맞춰 다시 획득을 시도합니다.

monitor.php

@@ -830,9 +830,11 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
             position: absolute; background: var(--accent-red);
             box-shadow: 0 0 10px var(--accent-red);
             opacity: 0; border-radius: 2px;
+            transform: var(--door-transform, none);
+            transform-origin: center;
             transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
         }
-        .door-line.open { opacity: 1; transform: scale(1.1); }
+        .door-line.open { opacity: 1; transform: var(--door-transform, none) scale(1.1); }
 
         /* 더뉴 니로 2020 탑뷰 실루엣 기준 */
                 .dp-fl { top: 132px; left: calc(50% - 86px); width: 4px; height: 72px; }
@@ -841,7 +843,7 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
                 .dp-rl { top: 225px; left: calc(50% - 86px); width: 4px; height: 78px; }
                 .dp-rr { top: 225px; right: calc(50% - 86px); width: 4px; height: 78px; }
 
-                .dp-tk { bottom: 28px; left: 50%; transform: translateX(-50%); width: 86px; height: 4px; }
+                .dp-tk { --door-transform: translateX(-50%); bottom: 28px; left: 50%; width: 86px; height: 4px; }
 
         /* Headlights */
         .headlight-beam {