feat(ui): 입력 모달 전체화면 슬라이드업 + 셀렉트→뱃지 전면 전환

- AppModal.vue: 전체화면 슬라이드업 공통 모달 (Teleport+Transition)
- CategoryPicker.vue: 대/소분류 아코디언 칩 공통 컴포넌트
  admin 모드(일반: 행 단위+수정/삭제, 순서변경: flat+SortableJS)
- AccountView: 계좌종류·구분 셀렉트→뱃지, 분류→CategoryPicker
- RecurringView: 구분·주기 셀렉트→뱃지, 계좌/카드→뱃지, 분류→CategoryPicker
- AccountWalletView: 카드종류·상환방식 셀렉트→뱃지
- BudgetView: 비고정/고정 라디오→뱃지, 카테고리→CategoryPicker
- CategoryView: 리스트 UI → CategoryPicker 칩 그리드 관리 모드

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/ui/AppModal.vue

@@ -0,0 +1,88 @@
+<script setup>
+defineProps({
+  modelValue: { type: Boolean, required: true },
+  title: { type: String, default: '' },
+  zIndex: { type: Number, default: 1000 },
+})
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="am">
+      <div v-if="modelValue" class="am-wrap" :style="{ zIndex }">
+        <div class="am-panel" role="dialog" aria-modal="true">
+          <button class="am-close" type="button" @click="$emit('update:modelValue', false)">×</button>
+          <div class="am-inner">
+            <h2 v-if="title" class="am-title">{{ title }}</h2>
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.am-wrap {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.am-panel {
+  position: absolute;
+  inset: 0;
+  background: var(--color-background);
+  overflow-y: auto;
+  padding: calc(3rem + env(safe-area-inset-top)) 1.25rem calc(2rem + env(safe-area-inset-bottom));
+}
+
+.am-inner {
+  max-width: 460px;
+  margin: 0 auto;
+}
+
+.am-close {
+  position: absolute;
+  top: calc(0.5rem + env(safe-area-inset-top));
+  right: 0.6rem;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  background: transparent;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--color-text);
+  z-index: 1;
+}
+
+.am-title {
+  margin-bottom: 1.25rem;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+/* ── 슬라이드업 애니메이션 ── */
+.am-enter-active {
+  transition: background 0.25s ease;
+}
+.am-leave-active {
+  transition: background 0.2s ease;
+}
+.am-enter-from,
+.am-leave-to {
+  background: rgba(0, 0, 0, 0);
+}
+.am-enter-active .am-panel {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.am-leave-active .am-panel {
+  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
+}
+.am-enter-from .am-panel,
+.am-leave-to .am-panel {
+  transform: translateY(100%);
+}
+</style>