refactor: 멤버 초대 모달을 BaseModal 로 전환 (Phase 1b)

- 중복 모달 셸/헤더/푸터/필드 CSS(~150줄) 제거 → BaseModal + 전역 .form-*
- BaseModal 에 subtitle 슬롯 + 푸터 버튼 아이콘 정렬 추가
- 본문 폼은 display:contents 로 BaseModal 본문 간격 상속,
  고유 요소(자동완성/역할 힌트/푸터 노트)만 .invite-body 로 재스코프

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/common/BaseModal.vue

@@ -35,7 +35,15 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
         aria-modal="true"
       >
         <div class="bm-head">
-          <h3>{{ title }}</h3>
+          <div class="bm-head-text">
+            <h3>{{ title }}</h3>
+            <div
+              v-if="$slots.subtitle"
+              class="bm-sub"
+            >
+              <slot name="subtitle" />
+            </div>
+          </div>
           <button
             type="button"
             class="bm-x"
@@ -92,8 +100,9 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
 }
 .bm-head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
+  gap: 0.75rem;
   padding: 1.375rem 1.5rem 1rem;
   position: sticky;
   top: 0;
@@ -106,6 +115,18 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
   font-weight: 700;
   letter-spacing: -0.01875rem;
 }
+.bm-sub {
+  font-size: 0.8125rem;
+  color: var(--text-2);
+  margin-top: 0.25rem;
+}
+.bm-sub :deep(b) {
+  color: var(--text-2);
+  font-weight: 600;
+}
+.bm-x {
+  flex-shrink: 0;
+}
 .bm-x {
   width: 2rem;
   height: 2rem;
@@ -149,6 +170,13 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
   flex: 0 0 auto;
   height: 2.375rem;
   padding: 0 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.bm-foot :deep(.mbtn svg) {
+  width: 0.9375rem;
+  height: 0.9375rem;
 }
 .bm-foot :deep(.mbtn:disabled) {
   opacity: 0.45;