From 3379c54033b868b0db4a25d97533420cfdee0d9d Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sun, 21 Jun 2026 12:19:03 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20AI=20=EC=B6=94=EC=B2=9C=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C=ED=8E=B8=20?=
 =?UTF-8?q?+=204=EA=B0=9C=20=EA=B3=A0=EC=A0=95=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC(=ED=95=84=EC=88=98/=EA=B4=80=EB=A6=AC/?=
 =?UTF-8?q?=EB=B3=B4=EC=95=88/=EB=B6=80=EA=B0=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

백엔드:
- SUGGEST_SYSTEM_PROMPT 를 정확히 4개 카테고리(필수/관리/보안/부가 기능)로 고정
  (parseSuggestions 가 빈 카테고리는 자동 제외)

프론트(시안 'AI 추천 모달.html' 반영):
- 그라데이션 헤더(배지 아이콘 + '자동 생성' 뱃지 + 분석 요약 서브타이틀)
- 카테고리별 색상 아이콘 dot + 개수 pill + 전체 추가/해제 토글
- 항목을 체크 토글로 '선택' 후 푸터의 'N개 업무에 추가'로 일괄 반영(기존 즉시추가 → 선택→커밋 모델)
- 이미 체크리스트에 있는 항목은 잠금(added) 표시
- 푸터: 선택 개수 + 취소/추가 버튼(.ai-btn — 페이지 .btn 과 분리)

검증: 백엔드 build/lint 0·8 tests, 프론트 type-check/lint/build 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 backend/src/modules/ai/ai.service.ts        |   7 +-
 frontend/src/pages/relay/TaskCreatePage.vue | 736 +++++++++++++++-----
 2 files changed, 581 insertions(+), 162 deletions(-)

diff --git a/backend/src/modules/ai/ai.service.ts b/backend/src/modules/ai/ai.service.ts
index 1b52cd3..3e75b85 100644
--- a/backend/src/modules/ai/ai.service.ts
+++ b/backend/src/modules/ai/ai.service.ts
@@ -83,12 +83,13 @@ const SUGGEST_SYSTEM_PROMPT = [
   '',
   '[규칙]',
   '- 반드시 아래 JSON 형식으로만 응답하세요. 설명·인사·마크다운 코드펜스 없이 순수 JSON 만 출력합니다.',
-  '- 카테고리는 "필수 기능", "추가 기능", "보안 기능" 을 기본으로 하되 업무 성격에 맞게 가감하세요.',
+  '- 카테고리는 정확히 "필수 기능", "관리 기능", "보안 기능", "부가 기능" 4개를 이 순서대로 사용하세요. (다른 이름·추가/누락 카테고리 금지)',
+  '- 각 카테고리에 해당하는 항목을 3~6개씩 제안합니다. 적합한 항목이 없으면 빈 배열([])로 두세요.',
   '- 각 항목은 한국어로 간결한 한 문장(체크리스트 항목)으로 작성합니다.',
-  '- 업무·프로젝트 맥락에 구체적으로 맞추고 일반론은 피하세요. 카테고리당 3~6개가 적당합니다.',
+  '- 업무·프로젝트 맥락에 구체적으로 맞추고 일반론은 피하세요.',
   '',
   '[형식]',
-  '{"groups":[{"category":"필수 기능","items":["...","..."]},{"category":"보안 기능","items":["..."]}]}',
+  '{"groups":[{"category":"필수 기능","items":["..."]},{"category":"관리 기능","items":["..."]},{"category":"보안 기능","items":["..."]},{"category":"부가 기능","items":["..."]}]}',
 ].join('\n');
 
 // AI(Claude) 채팅 서비스 — 대화/메시지를 DB 에 보관하고 Anthropic Messages API 를 호출.
diff --git a/frontend/src/pages/relay/TaskCreatePage.vue b/frontend/src/pages/relay/TaskCreatePage.vue
index 8dd02ce..eb6cd5c 100644
--- a/frontend/src/pages/relay/TaskCreatePage.vue
+++ b/frontend/src/pages/relay/TaskCreatePage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 업무 작성/수정 — 제목/내용/체크리스트 + 사이드(담당자/마감/지시자) · 백엔드 연동
 // taskId 파라미터가 있으면 '수정 모드'로 동작(기존 값 미리 채움 + PATCH 저장)
-import { computed, ref, watch } from 'vue'
+import { computed, defineComponent, h, ref, watch } from 'vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import AppShell from '@/layouts/AppShell.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
@@ -172,6 +172,7 @@ async function requestAiSuggestions() {
   aiSuggesting.value = true
   aiError.value = null
   aiSuggestions.value = null
+  selectedSuggestions.value = new Set()
   try {
     const content = contentText.value
       .split('\n')
@@ -190,22 +191,93 @@ async function requestAiSuggestions() {
   }
 }
 
-// 추천 항목을 체크리스트에 추가(중복 텍스트는 건너뜀)
+// --- 추천 선택 모델: 항목을 골라(selected) '업무에 추가' 시 일괄 반영 ---
+const selectedSuggestions = ref<Set<string>>(new Set())
+
+// 이미 체크리스트에 있는 항목(중복 방지 — 잠금 표시)
 function isSuggestionAdded(text: string): boolean {
   return checklist.value.some((c) => c.text === text)
 }
+function isSelected(text: string): boolean {
+  return selectedSuggestions.value.has(text)
+}
+// 항목 토글(이미 추가된 항목은 잠금)
+function toggleSuggestion(text: string) {
+  if (isSuggestionAdded(text)) return
+  const next = new Set(selectedSuggestions.value)
+  if (next.has(text)) next.delete(text)
+  else next.add(text)
+  selectedSuggestions.value = next
+}
+// 그룹에서 아직 추가되지 않은(선택 가능한) 항목
+function selectableItems(group: ChecklistSuggestionGroup): string[] {
+  return group.items.filter((t) => !isSuggestionAdded(t))
+}
+function isGroupAllSelected(group: ChecklistSuggestionGroup): boolean {
+  const sel = selectableItems(group)
+  return sel.length > 0 && sel.every((t) => isSelected(t))
+}
+function toggleGroup(group: ChecklistSuggestionGroup) {
+  const sel = selectableItems(group)
+  const makeAll = !isGroupAllSelected(group)
+  const next = new Set(selectedSuggestions.value)
+  sel.forEach((t) => (makeAll ? next.add(t) : next.delete(t)))
+  selectedSuggestions.value = next
+}
+const selectedCount = computed(() => selectedSuggestions.value.size)
+const suggestionTotal = computed(
+  () => aiSuggestions.value?.reduce((s, g) => s + g.items.length, 0) ?? 0,
+)
+// 카테고리 → 섹션 스타일 클래스
+function sectionClass(category: string): string {
+  const map: Record<string, string> = {
+    '필수 기능': 'sec-1',
+    '관리 기능': 'sec-2',
+    '보안 기능': 'sec-3',
+    '부가 기능': 'sec-4',
+  }
+  return map[category] ?? 'sec-1'
+}
+// 선택 항목을 체크리스트에 일괄 추가 후 모달 닫기
+function commitSelected() {
+  if (selectedCount.value === 0) return
+  selectedSuggestions.value.forEach((t) => addSuggestion(t))
+  dismissSuggestions()
+}
 function addSuggestion(text: string) {
   if (isSuggestionAdded(text)) return
   checklist.value.push({ text, done: false })
 }
-function addSuggestionGroup(group: ChecklistSuggestionGroup) {
-  group.items.forEach((item) => addSuggestion(item))
-}
 function dismissSuggestions() {
   aiSuggestions.value = null
   aiError.value = null
+  selectedSuggestions.value = new Set()
 }
 
+// 섹션 아이콘(카테고리별) — 다중 path 대응 위해 innerHTML 렌더
+const SEC_ICONS: Record<string, string> = {
+  '필수 기능': '<path d="m5 12 5 5L20 7"/>',
+  '관리 기능': '<path d="M20 7H4M20 12H4M20 17H4"/>',
+  '보안 기능': '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
+  '부가 기능':
+    '<path d="M9 18h6M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.6c.6.5 1 1.2 1 2v.4h6v-.4c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z"/>',
+}
+const SecIcon = defineComponent({
+  props: { cat: { type: String, required: true } },
+  setup(props) {
+    return () =>
+      h('svg', {
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': '2',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        innerHTML: SEC_ICONS[props.cat] ?? '',
+      })
+  },
+})
+
 // --- 첨부파일 ---
 // 생성 화면엔 업무가 아직 없어 바로 업로드 못 함 → 선택한 파일을 들고 있다가 제출 시 업로드.
 // 수정 모드에선 기존 첨부(existingFiles)도 표시하고, 새 파일은 저장 시 업로드한다.
@@ -605,7 +677,7 @@ function goBack() {
             <Teleport to="body">
               <div
                 v-if="aiSuggesting || aiSuggestions || aiError"
-                class="ai-modal-overlay"
+                class="ai-overlay"
                 @click.self="!aiSuggesting && dismissSuggestions()"
               >
                 <div
@@ -614,8 +686,42 @@ function goBack() {
                   aria-modal="true"
                   aria-label="AI 추천 할 일"
                 >
-                  <div class="ai-suggest-head">
-                    <span class="ai-suggest-title">
+                  <!-- 헤더 -->
+                  <div class="ai-head">
+                    <div class="ai-head-top">
+                      <div class="ai-badge">
+                        <svg
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                        >
+                          <path d="M12 2.5l1.8 4.9 4.9 1.8-4.9 1.8L12 15.9l-1.8-4.9L5.3 9.2l4.9-1.8L12 2.5z" />
+                          <path d="M19 14l.9 2.4 2.4.9-2.4.9L19 20.6l-.9-2.4-2.4-.9 2.4-.9L19 14z" />
+                        </svg>
+                      </div>
+                      <div class="ai-htext">
+                        <div class="ai-title">
+                          AI 추천 할 일 <span class="auto">자동 생성</span>
+                        </div>
+                        <div class="ai-sub">
+                          <template v-if="aiSuggesting">
+                            프로젝트와 업무 내용을 분석하고 있어요…
+                          </template>
+                          <template v-else-if="aiError">
+                            {{ aiError }}
+                          </template>
+                          <template v-else>
+                            프로젝트 <b>{{ repo?.name ?? '' }}</b> 내용을 분석해 <b>{{ suggestionTotal }}개</b> 항목을 제안했어요. 필요한 항목만 골라 추가하세요.
+                          </template>
+                        </div>
+                      </div>
+                    </div>
+                    <button
+                      class="ai-x"
+                      type="button"
+                      aria-label="닫기"
+                      :disabled="aiSuggesting"
+                      @click="dismissSuggestions"
+                    >
                       <svg
                         viewBox="0 0 24 24"
                         fill="none"
@@ -623,69 +729,126 @@ function goBack() {
                         stroke-width="2"
                         stroke-linecap="round"
                         stroke-linejoin="round"
-                      >
-                        <path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
-                      </svg>
-                      AI 추천 할 일
-                    </span>
-                    <button
-                      v-if="aiSuggestions || aiError"
-                      class="ai-suggest-close"
-                      type="button"
-                      aria-label="닫기"
-                      @click="dismissSuggestions"
-                    >
-                      ×
+                      ><path d="M18 6 6 18M6 6l12 12" /></svg>
                     </button>
                   </div>
 
-                  <div class="ai-modal-body">
+                  <!-- 본문 -->
+                  <div class="ai-body">
                     <div
                       v-if="aiSuggesting"
-                      class="ai-suggest-msg"
+                      class="ai-state"
                     >
-                      프로젝트와 업무 내용을 분석하고 있어요…
+                      잠시만 기다려 주세요…
                     </div>
                     <div
                       v-else-if="aiError"
-                      class="ai-suggest-msg err"
+                      class="ai-state err"
                     >
                       {{ aiError }}
                     </div>
                     <template v-else-if="aiSuggestions">
-                      <div
+                      <section
                         v-for="group in aiSuggestions"
                         :key="group.category"
-                        class="ai-group"
+                        class="sec"
+                        :class="sectionClass(group.category)"
                       >
-                        <div class="ai-group-head">
-                          <span class="ai-group-cat">{{ group.category }}</span>
+                        <div class="sec-head">
+                          <span class="sec-dot"><SecIcon :cat="group.category" /></span>
+                          <span class="sec-name">{{ group.category }}</span>
+                          <span class="sec-count">{{ group.items.length }}</span>
                           <button
-                            class="ai-group-all"
+                            class="sec-all"
+                            :class="{ on: isGroupAllSelected(group) }"
                             type="button"
-                            @click="addSuggestionGroup(group)"
+                            @click="toggleGroup(group)"
                           >
-                            전체 추가
+                            <svg
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2.2"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                            ><path :d="isGroupAllSelected(group) ? 'M5 12h14' : 'M5 12h14M12 5v14'" /></svg>
+                            {{ isGroupAllSelected(group) ? '전체 해제' : '전체 추가' }}
                           </button>
                         </div>
-                        <button
-                          v-for="(item, i) in group.items"
-                          :key="i"
-                          class="ai-sg-item"
-                          :class="{ added: isSuggestionAdded(item) }"
-                          type="button"
-                          :disabled="isSuggestionAdded(item)"
-                          @click="addSuggestion(item)"
-                        >
-                          <span class="ai-sg-ico">{{ isSuggestionAdded(item) ? '✓' : '+' }}</span>
-                          <span class="ai-sg-txt">{{ item }}</span>
-                        </button>
-                      </div>
-                      <div class="ai-suggest-foot">
-                        필요한 항목만 골라 추가하세요. (전부 추가할 필요는 없어요)
-                      </div>
+                        <div class="items">
+                          <button
+                            v-for="(item, i) in group.items"
+                            :key="i"
+                            class="item"
+                            :class="{ added: isSuggestionAdded(item) || isSelected(item) }"
+                            type="button"
+                            :disabled="isSuggestionAdded(item)"
+                            @click="toggleSuggestion(item)"
+                          >
+                            <span class="item-check">
+                              <svg
+                                class="plus"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2.4"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              ><path d="M5 12h14M12 5v14" /></svg>
+                              <svg
+                                class="tick"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="3"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              ><path d="M20 6 9 17l-5-5" /></svg>
+                            </span>
+                            <span class="item-text">{{ item }}</span>
+                          </button>
+                        </div>
+                      </section>
                     </template>
                   </div>
+
+                  <!-- 푸터 -->
+                  <div
+                    v-if="aiSuggestions"
+                    class="ai-foot"
+                  >
+                    <div class="foot-info">
+                      <div class="foot-count">
+                        <span class="n">{{ selectedCount }}</span>개 선택됨
+                      </div>
+                      <div class="foot-hint">
+                        필요한 항목만 골라 추가하세요. 전부 추가할 필요는 없어요.
+                      </div>
+                    </div>
+                    <button
+                      class="ai-btn ghost"
+                      type="button"
+                      @click="dismissSuggestions"
+                    >
+                      취소
+                    </button>
+                    <button
+                      class="ai-btn primary"
+                      type="button"
+                      :disabled="selectedCount === 0"
+                      @click="commitSelected"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2.2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      ><path d="M5 12h14M12 5v14" /></svg>
+                      {{ selectedCount === 0 ? '업무에 추가' : selectedCount + '개 업무에 추가' }}
+                    </button>
+                  </div>
                 </div>
               </div>
             </Teleport>
@@ -1239,143 +1402,398 @@ function goBack() {
 }
 
 /* AI 추천 할 일 */
-.ai-modal-overlay {
+.ai-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(16, 18, 24, 0.45);
-  display: grid;
-  place-items: center;
-  padding: 1.5rem;
   z-index: 1000;
+  background: rgba(22, 24, 29, 0.46);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.75rem;
 }
 .ai-modal {
   width: 100%;
-  max-width: 32rem;
-  max-height: 80vh;
+  max-width: 37.5rem;
+  max-height: calc(100vh - 3.5rem);
   background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 0.75rem;
-  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.22);
+  border-radius: 1rem;
+  box-shadow:
+    0 1.5rem 4.375rem rgba(20, 24, 33, 0.3),
+    0 0.25rem 0.875rem rgba(20, 24, 33, 0.14);
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.ai-modal-body {
-  padding: 1rem 1.25rem 1.25rem;
-  overflow-y: auto;
-}
-.ai-suggest-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.875rem 1.25rem;
+
+/* 헤더 */
+.ai-head {
+  position: relative;
+  padding: 1.25rem 1.375rem 1.125rem;
+  background:
+    radial-gradient(120% 140% at 0% 0%, #f0eefe 0%, rgba(240, 238, 254, 0) 55%),
+    linear-gradient(180deg, #f6f5ff 0%, #ffffff 100%);
   border-bottom: 1px solid var(--border);
-  background: #faf9ff;
   flex-shrink: 0;
 }
-.ai-suggest-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 700;
-  color: var(--accent);
-}
-.ai-suggest-title svg {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-.ai-suggest-close {
-  border: none;
-  background: transparent;
-  color: var(--text-3);
-  font-size: 1.125rem;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0 0.25rem;
-}
-.ai-suggest-close:hover {
-  color: var(--text);
-}
-.ai-suggest-msg {
-  font-size: 0.8125rem;
-  color: var(--text-2);
-  padding: 0.375rem 0;
-}
-.ai-suggest-msg.err {
-  color: var(--red);
-}
-.ai-group {
-  margin-top: 0.625rem;
-}
-.ai-group:first-of-type {
-  margin-top: 0;
-}
-.ai-group-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.3125rem;
-}
-.ai-group-cat {
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--text);
-}
-.ai-group-all {
-  border: none;
-  background: transparent;
-  color: var(--accent);
-  font-family: inherit;
-  font-size: 0.7187rem;
-  font-weight: 600;
-  cursor: pointer;
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-}
-.ai-group-all:hover {
-  background: var(--accent-weak);
-}
-.ai-sg-item {
+.ai-head-top {
   display: flex;
   align-items: flex-start;
-  gap: 0.4375rem;
-  width: 100%;
-  text-align: left;
-  border: 1px solid var(--border);
-  background: #fff;
-  border-radius: 0.4375rem;
-  padding: 0.4375rem 0.5625rem;
-  margin-bottom: 0.3125rem;
-  font-family: inherit;
-  font-size: 0.8125rem;
-  color: var(--text);
-  cursor: pointer;
+  gap: 0.75rem;
 }
-.ai-sg-item:hover:not(:disabled) {
-  border-color: var(--accent-border);
-  background: var(--accent-weak);
+.ai-badge {
+  width: 2.375rem;
+  height: 2.375rem;
+  border-radius: 0.6875rem;
+  flex-shrink: 0;
+  background: linear-gradient(140deg, #6366f1, #4338ca);
+  display: grid;
+  place-items: center;
+  color: #fff;
+  box-shadow:
+    0 0.25rem 0.75rem rgba(79, 70, 229, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
-.ai-sg-item.added {
-  cursor: default;
-  color: var(--text-3);
-  background: #f4f5f7;
+.ai-badge svg {
+  width: 1.3125rem;
+  height: 1.3125rem;
 }
-.ai-sg-ico {
+.ai-htext {
+  flex: 1;
+  min-width: 0;
+  padding-top: 0.0625rem;
+}
+.ai-title {
+  font-size: 1.0625rem;
+  font-weight: 700;
+  letter-spacing: -0.01875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ai-title .auto {
+  font-size: 0.656rem;
   font-weight: 700;
   color: var(--accent);
-  line-height: 1.45;
+  background: #fff;
+  border: 1px solid var(--accent-border);
+  border-radius: 20px;
+  padding: 0.125rem 0.5rem;
+  white-space: nowrap;
 }
-.ai-sg-item.added .ai-sg-ico {
-  color: var(--green);
+.ai-sub {
+  font-size: 0.781rem;
+  color: var(--text-2);
+  margin-top: 0.25rem;
+  line-height: 1.5;
 }
-.ai-sg-txt {
+.ai-sub b {
+  color: var(--text);
+  font-weight: 600;
+}
+.ai-x {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: transparent;
+  color: var(--text-3);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.ai-x:hover {
+  background: rgba(20, 24, 33, 0.06);
+  color: var(--text);
+}
+.ai-x:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.ai-x svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* 본문 */
+.ai-body {
+  overflow-y: auto;
+  padding: 0.375rem 1.375rem 0.5rem;
   flex: 1;
 }
-.ai-suggest-foot {
-  margin-top: 0.5rem;
-  font-size: 0.7187rem;
+.ai-state {
+  padding: 2rem 0;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--text-2);
+}
+.ai-state.err {
+  color: var(--red);
+}
+.sec {
+  padding: 1rem 0 0.25rem;
+}
+.sec + .sec {
+  border-top: 1px solid var(--border);
+}
+.sec-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  margin-bottom: 0.625rem;
+}
+.sec-dot {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.4375rem;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.sec-dot svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.sec-1 .sec-dot {
+  background: var(--accent-weak);
+  color: var(--accent);
+}
+.sec-2 .sec-dot {
+  background: #e7f3ee;
+  color: #1b7a47;
+}
+.sec-3 .sec-dot {
+  background: #fdeef0;
+  color: #c0394f;
+}
+.sec-4 .sec-dot {
+  background: #fbf1e0;
+  color: #a96a13;
+}
+.sec-name {
+  font-size: 0.844rem;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.0125rem;
+  white-space: nowrap;
+}
+.sec-count {
+  font-size: 0.719rem;
+  font-weight: 600;
+  color: var(--text-2);
+  background: #f1f2f4;
+  border-radius: 20px;
+  padding: 0.0625rem 0.5rem;
+}
+.sec-all {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--accent);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 0.25rem 0.5625rem;
+  cursor: pointer;
+  font-family: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+.sec-all:hover {
+  background: var(--accent-weak);
+}
+.sec-all svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.sec-all.on {
+  color: var(--text-2);
+}
+.sec-all.on:hover {
+  background: #f1f2f4;
+}
+
+/* 항목 목록 */
+.items {
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+  overflow: hidden;
+  background: #fff;
+}
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  text-align: left;
+  padding: 0.75rem 0.8125rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  border-top: 1px solid var(--border);
+  position: relative;
+}
+.item:first-child {
+  border-top: none;
+}
+.item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 0.1875rem;
+  background: var(--accent);
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.item:hover:not(:disabled) {
+  background: #fafaff;
+}
+.item:disabled {
+  cursor: default;
+}
+.item-check {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.4375rem;
+  flex-shrink: 0;
+  border: 1.5px solid var(--border-strong);
+  background: #fff;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  position: relative;
+  transition: all 0.13s;
+}
+.item-check .plus {
+  width: 0.8125rem;
+  height: 0.8125rem;
   color: var(--text-3);
+  transition: opacity 0.12s;
+}
+.item-check .tick {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.item:hover:not(:disabled) .item-check {
+  border-color: var(--accent-border);
+}
+.item:hover:not(:disabled) .item-check .plus {
+  color: var(--accent);
+}
+.item-text {
+  flex: 1;
+  font-size: 0.844rem;
+  color: var(--text);
+  line-height: 1.5;
+  letter-spacing: -0.00625rem;
+}
+.item.added {
+  background: #f7f7ff;
+}
+.item.added::before {
+  opacity: 1;
+}
+.item.added .item-check {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.item.added .item-check .plus {
+  opacity: 0;
+}
+.item.added .item-check .tick {
+  opacity: 1;
+}
+.item.added .item-text {
+  color: var(--text-2);
+}
+
+/* 푸터 */
+.ai-foot {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.8125rem 1.375rem;
+  border-top: 1px solid var(--border);
+  background: #fbfbfd;
+  flex-shrink: 0;
+}
+.foot-info {
+  margin-right: auto;
+  min-width: 0;
+}
+.foot-count {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+.foot-count .n {
+  color: var(--accent);
+}
+.foot-hint {
+  font-size: 0.719rem;
+  color: var(--text-3);
+  margin-top: 0.125rem;
+}
+.ai-btn {
+  height: 2.375rem;
+  padding: 0 1rem;
+  border-radius: var(--radius);
+  font-size: 0.844rem;
+  font-weight: 600;
+  border: 1px solid var(--border-strong);
+  background: #fff;
+  color: var(--text-2);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4375rem;
+  line-height: 1;
+  font-family: inherit;
+  white-space: nowrap;
+}
+.ai-btn:hover {
+  background: #f7f8fa;
+  color: var(--text);
+}
+.ai-btn.ghost {
+  border-color: transparent;
+  background: transparent;
+}
+.ai-btn.ghost:hover {
+  background: #eceef1;
+}
+.ai-btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.4);
+}
+.ai-btn.primary:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+.ai-btn.primary:disabled {
+  background: #c3c7ce;
+  border-color: #c3c7ce;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.ai-btn svg {
+  width: 0.9375rem;
+  height: 0.9375rem;
 }
 
 /* 사이드바 */