feat(B06): 보라 선 치수 두 줄 · 사면 이동 패널(151-1 · 151-3)

- 치수 글 두 줄(사면길이 · 수평 / 높이 · 구배 · 이동) · 좁은 카드는 면적표 아래 높이로
- [◀ ▶] 지움 → 공용 조정창 꼴 이동 패널(◀ ↺ ▶ · 방향키 ←→ · 0.1 m · ✕ = 고름 풂)
- 시험 — test_137_design_pick · test_139_6_line_shift(패널 · 방향키 · ↺ · 숨김)

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

B06_Section/B06_Section_UI_Style_Cross_Controls.css

@@ -223,14 +223,39 @@
   background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
 }
 
-/* 고른 보라 선 치수(137-2) — [+ − ⤢] 왼쪽 같은 줄. */
+/* 고른 보라 선 치수(137-2) — [+ − ⤢] 왼쪽 · 두 줄(151-1 · 길이 · 수평 / 높이 · 구배). */
 .b06-cross-card__line-dims {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--spacing-4);
+  align-self: center;
+  padding: 1px var(--spacing-4);
   color: var(--color-royal-amethyst);
   font-size: 0.75rem;
-  white-space: nowrap;
+  line-height: 1.25;
+  text-align: right;
+  white-space: pre-line;
+}
+
+/* 좁은 카드(3열 등)는 막대 옆에 두면 왼쪽 면적표를 덮음 — 표 아래 높이로 내려 오른쪽에 붙임(151-1). */
+.b06-cross-card__chart-wrap {
+  container-type: inline-size;
+}
+
+@container (max-width: 620px) {
+  .b06-cross-card__zoom {
+    overflow: visible;
+  }
+
+  .b06-cross-card__line-dims {
+    position: absolute;
+    top: calc(var(--spacing-8) + var(--b06-areas-height, 3.6rem));
+    right: -1px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-inputs);
+    background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
+  }
+
+  .b06-cross-card__line-dims + .b06-cross-card__zoom-btn {
+    border-left: none;
+  }
 }
 
 .b06-cross-card__line-dims[hidden] {