Merge remote-tracking branch 'origin/sub_desktop_1' into main_desktop_1

B03_FileInput/B03_FileInput_UI_Style.css

@@ -14,6 +14,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-32);
+  /* ⚠ flex 자식은 기본이 `min-width: auto` 라 **내용보다 안 줄어든다** — 그래서 안쪽
+     격자가 넘치면 페이지 몸통이 통째로 가로로 밀렸다(2026-09-08). 여기서 끊는다. */
+  min-width: 0;
+}
+
+.b03-file__main-layout > * {
+  min-width: 0;
 }
 
 .b03-file__control-panel {
@@ -52,7 +59,8 @@
    칸을 먼저 나누므로 내용과 무관하게 정확히 1:1:1 이 된다. 좁아지면 칸이 접힌다. */
 .b03-file__pick-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  /* ⚠ 좁은 폭에서는 200px 도 넘친다 — `min(200px, 100%)` 로 컨테이너까지만 줄인다. */
+  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
   align-items: stretch;
   gap: var(--spacing-8);
 }
@@ -213,10 +221,15 @@
 }
 
 /* 계획노선 | 지형(LAS) — 컨테이너를 둘로 나눈다(2026-08-31 사용자 지시).
-   노선은 카드 5장(shapefile 한 벌), 지형은 4장이라 폭을 5:4 비슷하게 준다. */
+   노선은 카드 5장(shapefile 한 벌), 지형은 4장이라 폭을 5:4 비슷하게 준다.
+
+   ⚠ **좁아지면 한 줄로 접는다**(2026-09-08 사용자 지적) — 2열을 고정하면 좁은 폭에서
+   각 열이 카드 하나도 못 담아 내용이 컨테이너 밖으로 넘치고 글자가 안 읽혔다.
+   `auto-fit` + `min(360px, 100%)` 이라, 폭이 모자라면 칸 수가 스스로 1로 줄고
+   **최소폭이 컨테이너를 넘지 않는다**(고정 minmax 는 그 아래에서 넘친다). */
 .b03-file__columns {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
   gap: var(--spacing-16);
   align-items: start;
 }
@@ -353,9 +366,12 @@
 
 /* 카드가 좁아지면 한 줄에 제목·상태·[선택]이 못 들어가 제목이 글자 단위로 접힌다
    (2026-09-03 실측: 안내 패널을 연 상태에서 카드 폭 210px). 폭이 모자라면 열을 줄인다. */
+/* ⚠ `minmax(260px, …)` 는 **칸이 260px 보다 좁아질 수 없다**는 뜻이라, 컨테이너가
+   그보다 좁아지면 카드가 밖으로 넘친다(2026-09-08 좁은 폭 실측). `min(260px, 100%)`
+   으로 두면 좁을 때 **컨테이너 폭까지 줄어들어** 넘치지 않는다. */
 .b03-file__group-content {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
   gap: var(--spacing-12);
 }
 
@@ -425,11 +441,19 @@
    글자 단위로 접히므로, 자리가 모자라면 배지·삭제 버튼이 다음 줄로 내려가게 한다. */
 /* 제목·상태·[선택]이 **한 줄**에 선다(2026-09-03) — 줄바꿈을 허용하면 [선택]이 아래로
    내려가 카드가 두 줄이 됐다. 자리가 모자라면 제목이 줄어든다(min-width: 0). */
+/* ⚠ 좁은 폭에서 배지·[선택]·[×] 가 밀려 나가지 않게 **줄 자체가 넘치지 않도록** 막는다
+   (2026-09-08). 제목은 이미 말줄임이라, 넘치는 것은 늘 오른쪽 붙박이들이었다. */
 .b03-file__card-header {
   display: flex;
   flex-wrap: nowrap;
   gap: var(--spacing-8);
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.b03-file__card-header > * {
+  min-width: 0;
 }
 
 .b03-file__card-icon {