fix(device): 휴대폰 폭 남은 넘침 — B06 횡단 카드 한 장씩 · B05 3D 보기 단추 줄바꿈 · 접힌 서랍 내용 숨김 · 터치 손잡이 화면 안 · 재기 「넓은 상자」 = 어느 조상이든 가로 밀기면 닿음 (기기대응 5)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ji4nuyLVHcxrXWHTdb5nRD

A00_Common/device_context.css

@@ -35,7 +35,7 @@ html[data-touch="on"] .ui-checkbox {
 /* 좌측 패널 손잡이 — 손가락 폭 */
 html[data-touch="on"] .ui-workflow-overlay__handle--side {
   width: 32px;
-  right: -31px;
+  right: -32px;
 }
 
 /* 팝업(2-4) — 폭 600 미만은 전체 화면 · 겹치면 나중 것(맨 위)만 보이고 × 로 앞 창.

B05_Profile/B05_Profile_UI_Style.css

@@ -603,3 +603,13 @@
   font-size: var(--text-caption);
   font-style: normal;
 }
+
+/* 휴대폰 폭(기기대응) — 3D 보기 단추 줄이 화면 밖으로 안 나가게 줄바꿈 */
+html[data-size="compact"] .b05-route__view-controls {
+  right: var(--spacing-16);
+  flex-wrap: wrap;
+}
+
+html[data-size="compact"] .b05-route__view-group {
+  flex-wrap: wrap;
+}

B06_Section/B06_Section_UI_Section_View.ts

@@ -435,11 +435,13 @@ export function createSectionView(
       true,
     );
     // 열 수 = 사용자 값 · 폭 = (칸 폭 − 간격) ÷ 열 수(`_Section_Columns` · 138-3).
-    cachedCardWidth = crossCardWidth(renderWidth, columnCount, CROSS_GRID_GAP);
+    // 휴대폰 폭(기기대응 · <html data-size>)은 한 장씩 — 카드가 반으로 눌려 단추 · 면적표가 잘림
+    const cols = document.documentElement.dataset.size === "compact" ? 1 : columnCount;
+    cachedCardWidth = crossCardWidth(renderWidth, cols, CROSS_GRID_GAP);
     // CSS auto-fill의 자체 열 수와 JS columnCount가 어긋나면 같은 행 높이 그룹핑이 실제
     // 렌더 행과 달라져 카드 내부가 뒤죽박죽된다(N-2-6). 열 수 · 폭을 JS가 명시해 일치시킨다.
-    grid.style.gridTemplateColumns = `repeat(${columnCount}, ${cachedCardWidth}px)`;
-    grid.dataset.columns = String(columnCount); // 4열부터 면적표 「계」만(173-3 · CSS)
+    grid.style.gridTemplateColumns = `repeat(${cols}, ${cachedCardWidth}px)`;
+    grid.dataset.columns = String(cols); // 4열부터 면적표 「계」만(173-3 · CSS)
     // 맹암거 형상 누름 = 그 구조물 id 고름(288-2 · 노면공 포장 범위 표식과 따로 · 같은 id 고름 창구)
     grid.addEventListener(SHAPE_PICK_EVENT, (event) => {
       const id = (event as CustomEvent<string>).detail;
@@ -460,7 +462,7 @@ export function createSectionView(
         baseHeightsOf(plotBases, cachedCardWidth, baseWidth),
         baseWidth,
         cachedCardWidth,
-        columnCount,
+        cols,
       );
       sections.forEach((section, index) => {
         cachedRowHeight.set(section.station_id, rowHeights[index]);

resources/tester/test_173_areas_detail.py

@@ -69,7 +69,7 @@ def test_면적표_4열부터_계만_접기():
     )
     assert rule, "4~6열 EA · RR · BR 접기 규칙 없음"
     src = _read("B06_Section_UI_Section_View.ts")
-    assert "grid.dataset.columns = String(columnCount);" in src
+    assert "grid.dataset.columns = String(cols);" in src  # 실제 그린 열 수(휴대폰 폭 = 1 · 기기대응)
 
 
 # ── 173-4 [상세] 그림 ────────────────────────────────────────

resources/tester/test_device_audit.py

@@ -113,7 +113,7 @@ AUDIT_JS = r"""
   // 본문 안 화면보다 넓은 상자(고정 폭)
   const outlet = document.getElementById('app-outlet');
   if (outlet) for (const el of outlet.querySelectorAll('*')) {
-    if (el.offsetWidth > vw + 1 && !scrollable(el.parentElement || el, 'x')) out.too_wide++;
+    if (el.offsetWidth > vw + 1 && !reachable(el, 'x')) out.too_wide++;
   }
   out.pointer = matchMedia('(pointer: coarse)').matches ? 'coarse' : 'fine';
   out.rendered = !!(outlet && outlet.childElementCount);

ui_template/ui_template_overlay.css

@@ -551,3 +551,10 @@ html:is([data-size="compact"], [data-size="medium"]) .ui-workflow-overlay__panel
   flex-direction: column;
   border-radius: var(--radius-cards) var(--radius-cards) 0 0;
 }
+
+/* 접힌 서랍 — 화면 밖 내용은 안 보이게(손가락 · 읽기 프로그램이 밖의 단추를 잡지 않음) · 손잡이만 남김 */
+html:is([data-size="compact"], [data-size="medium"])
+  .ui-workflow-overlay__panel--title.is-collapsed
+  > :not(.ui-workflow-overlay__handle) {
+  visibility: hidden;
+}