feat(ui): 고르기 모달 나무 M02 나무 꼴 — 층 단추 셋 · 잎 = 마지막 이름 · 폴더 먼저 · 왼쪽 폭 320px(173-2)

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

ui_template/ui_template_item_picker.css

@@ -3,7 +3,8 @@
 
 .ui-item-picker__cols {
   display: grid;
-  grid-template-columns: minmax(220px, 3fr) minmax(320px, 9fr);
+  /* 왼쪽 = M02 좌측 패널 폭(320px · 173-2) */
+  grid-template-columns: var(--wf-left-panel-width) minmax(320px, 1fr);
   gap: var(--spacing-12);
   flex: 1;
   min-height: 0;
@@ -17,18 +18,28 @@
   min-width: 0;
 }
 
+.ui-item-picker__layers {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+/* 나무 상자 = M02 나무 꼴(테두리 없음 · 긴 이름은 줄바꿈 · 173-2) */
 .ui-item-picker__tree {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1;
   min-height: 0;
-  padding: var(--spacing-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
   overflow: auto;
 }
 
+.ui-item-picker__tree .ui-tree__row {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .ui-item-picker__detail {
   display: flex;
   flex-direction: column;