feat(ui): SheetSelect 시트 내용을 리스트 → 칩 그리드(CategoryPicker 형태)

- 셀렉트형 선택(계좌·태그·구분 등)을 바텀시트 안에서 칩 그리드로 표시

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/ui/SheetSelect.vue

@@ -31,17 +31,13 @@ function pick(o) {
   </button>
 
   <BottomSheet v-model="open" :title="title">
-    <ul v-if="options.length" class="ss-list">
+    <div v-if="options.length" class="ss-chips">
-      <li v-for="o in options" :key="o.value">
+      <button
-        <button
+        v-for="o in options" :key="o.value"
-          type="button" class="ss-opt" :class="{ active: o.value === modelValue }"
+        type="button" class="ss-chip" :class="{ active: o.value === modelValue }"
-          @click="pick(o)"
+        @click="pick(o)"
-        >
+      >{{ o.label }}</button>
-          <span>{{ o.label }}</span>
+    </div>
-          <span v-if="o.value === modelValue" class="ss-check">✓</span>
-        </button>
-      </li>
-    </ul>
     <p v-else class="ss-empty">{{ emptyText }}</p>
   </BottomSheet>
 </template>
@@ -79,31 +75,29 @@ function pick(o) {
   font-size: 0.8rem;
   flex-shrink: 0;
 }
-.ss-list {
+/* CategoryPicker 스타일의 칩 그리드 */
-  list-style: none;
+.ss-chips {
-  margin: 0;
-  padding: 0;
-}
-.ss-opt {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 0.4rem;
-  width: 100%;
+  padding: 0.2rem 0 0.4rem;
-  padding: 0.85rem 0.4rem;
+}
-  border: 0;
+.ss-chip {
-  border-bottom: 1px solid var(--color-border);
+  padding: 0.4rem 0.85rem;
-  background: transparent;
+  border: 1.5px solid var(--color-border);
+  border-radius: 100px;
+  background: var(--color-background-soft);
   color: var(--color-text);
-  font-size: 0.95rem;
+  font-size: 0.9rem;
+  font-weight: 500;
   cursor: pointer;
-  text-align: left;
+  line-height: 1.4;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
 }
-.ss-opt.active {
+.ss-chip.active {
-  color: hsla(160, 100%, 37%, 1);
+  border-color: hsla(160, 100%, 37%, 1);
-  font-weight: 700;
+  background: hsla(160, 100%, 37%, 1);
-}
+  color: #fff;
-.ss-check {
-  color: hsla(160, 100%, 37%, 1);
 }
 .ss-empty {
   padding: 1.2rem 0.4rem;