diff --git a/docs/convention.md b/docs/convention.md
index 67b782d..60b386f 100644
--- a/docs/convention.md
+++ b/docs/convention.md
@@ -14,6 +14,8 @@
 - 정적 파일 URL 조합은 `toApiUrl()`로 처리한다.
 - 화면 상태는 `ref`, `computed`, `onMounted` 중심의 단순한 Composition API 패턴을 유지한다.
 - 설정/계정처럼 자주 바꾸지 않는 정보는 상시 입력 폼보다 `현재 상태 요약 + 필요 시 모달 편집` 흐름을 우선한다.
+- 모달이 배경 화면 위에 떠 있고 모달 내부 선택이 주 작업인 경우, 열림 상태 동안 `body` 스크롤 잠금을 함께 적용해 뒤쪽 화면 위치가 바뀌지 않게 한다.
+- 정렬 가능한 카드 목록을 버튼으로도 재정렬할 때는 즉시 재렌더링으로 깜빡이게 두지 않고, `TransitionGroup` move 전환 등으로 위치 이동을 부드럽게 표현한다.
 
 ## 백엔드
 - 라우트 검증은 `zod`로 처리한다.
diff --git a/docs/history.md b/docs/history.md
index 9921cee..f867b49 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,10 @@
 # 의사결정 이력
 
+## 2026-04-08 v1.1.30
+- 관리자 목록관리의 상단 고정 템플릿 후보가 많아지면 모든 후보를 화면에 상시 렌더링하는 방식은 탐색성이 떨어지고 관리 영역을 불필요하게 길게 만든다고 판단했다. 따라서 고정 목록은 현재 선택된 항목만 보여주고, 추가는 검색 모달로 분리하는 쪽으로 정리했다.
+- 모달이 열린 상태에서 배경 스크롤이 움직이면 선택 작업 중 문맥 위치가 바뀌어 관리자가 다시 위치를 찾아야 하므로, 이 유형의 모달은 배경 스크롤을 잠그는 것이 맞다고 정리했다.
+- 드래그 정렬과 버튼 정렬은 같은 “순서 변경” 동작이므로, 버튼 이동도 즉시 깜빡이는 교체보다 카드가 부드럽게 이동하는 전환을 적용해 같은 감각으로 맞추기로 했다.
+
 ## 2026-04-07 v1.1.29
 - 프리뷰 여부는 페이지 맥락과 우측 뷰어 카드만으로 충분히 전달되므로, 헤더 아이브로우에 `Preview`를 한 줄 더 두는 것은 중복 정보라고 정리했다.
 - `커스텀 티어표 만들기`는 버튼 문구로 다소 길고 반복될수록 무거워 보여, 주요 CTA 에서는 `커스텀 티어표`로 짧게 통일하는 편이 더 낫다고 판단했다.
diff --git a/docs/map.md b/docs/map.md
index 6e02dc6..076d78e 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -57,7 +57,7 @@
 
 ## `/admin`
 - 화면 파일: `frontend/src/views/AdminView.vue`
-- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `템플릿 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 선택된 템플릿 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 템플릿 이름/slug 수정, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/받은 즐겨찾기 수 표시/인기순 정렬/최소 즐겨찾기 필터/추천 지정 토글/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려와 일반 완성본과 같은 보드 문법의 요청 미리보기, 회원의 작성 티어표·팔로워·받은 즐겨찾기·최근 콘텐츠 활동·마지막 접속일 확인과 회원 정보·권한 수정 및 공개 프로필 보기, 파일 입력 초기화, 아이템 삭제, 템플릿 삭제
+- 역할: 공통 우측 패널 대신 전용 `320px` 운영 패널을 사용해 `목록 관리 / 템플릿 관리 / 아이템 관리 / 티어표 관리 / 회원 관리` 탭과 검색·필터·빠른 작업을 우측에 배치하고, 중앙에는 홈 상단 고정 템플릿 순서, 선택된 템플릿 상세, 커스텀 아이템 목록, 템플릿 요청/전체 티어표, 회원 카드 등 실제 관리 대상만 표시, 목록 관리에서는 고정 템플릿을 드래그 또는 위/아래 버튼 애니메이션으로 정렬하고 `템플릿 추가` 검색 모달에서 후보를 선택, 템플릿 이름/slug 수정, 기본 아이템 다중 드래그 앤 드롭 업로드, 기본 아이템 이름 수정, 사용자 커스텀 아이템 검색/페이지네이션/사용 횟수 확인/미사용 이미지 개별·일괄 삭제, 사용자 커스텀 아이템의 기본 템플릿 승격, 전체 티어표 검색/페이지네이션/공개 여부 확인/받은 즐겨찾기 수 표시/인기순 정렬/최소 즐겨찾기 필터/추천 지정 토글/썸네일 클릭 기반 완성본 보기, 티어표의 추가 커스텀 아이템을 모달 기반으로 기존 템플릿 또는 새 템플릿에 가져오기, freeform 티어표의 템플릿화, 사용자 템플릿 등록/업데이트 요청 승인·반려와 일반 완성본과 같은 보드 문법의 요청 미리보기, 회원의 작성 티어표·팔로워·받은 즐겨찾기·최근 콘텐츠 활동·마지막 접속일 확인과 회원 정보·권한 수정 및 공개 프로필 보기, 파일 입력 초기화, 아이템 삭제, 템플릿 삭제
 - 연동 API: `GET /api/admin/templates`, `POST /api/admin/templates`, `POST /api/admin/templates/:templateId/thumbnail`, `POST /api/admin/templates/:templateId/images`, `PATCH /api/admin/templates/:templateId/items/:itemId`, `GET /api/admin/custom-items`, `POST /api/admin/custom-items/:itemId/promote`, `DELETE /api/admin/custom-items/:itemId`, `DELETE /api/admin/custom-items`, `GET /api/admin/tierlists`, `GET /api/admin/tierlists/stats`, `PATCH /api/admin/tierlists/:tierListId/featured`, `GET /api/admin/template-requests`, `POST /api/admin/template-requests/:requestId/approve`, `POST /api/admin/template-requests/:requestId/reject`, `POST /api/admin/template-requests/:requestId/link-template`, `POST /api/admin/tierlists/:tierListId/promote-items`, `POST /api/admin/tierlists/:tierListId/create-template`, `GET /api/admin/users`, `PATCH /api/admin/users/:userId`, `PATCH /api/admin/users/:userId/password`, `DELETE /api/admin/users/:userId`, `DELETE /api/admin/templates/:templateId/items/:itemId`, `DELETE /api/admin/templates/:templateId`
 
 ## `/profile`
diff --git a/docs/spec.md b/docs/spec.md
index c66f0d0..2f79f9c 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -331,7 +331,9 @@
 - 기본 아이템 이름 저장 버튼은 값이 실제로 바뀐 경우에만 활성화된다.
 - 아이템 미리보기는 반응형 환경에서도 최대 `192px` 크기 안에서 표시한다.
 - 게임 전환 또는 업로드 성공 뒤에는 파일 입력값을 초기화해 같은 파일도 다시 선택할 수 있다.
-- 게임 관리 탭에서는 홈 화면 상단에 먼저 노출할 게임을 최대 50개까지 지정하고, 드래그 또는 위/아래 버튼으로 순서를 저장할 수 있다.
+- 목록 관리 탭에서는 홈 화면 상단에 먼저 노출할 템플릿을 최대 50개까지 지정한다. 새 고정 템플릿은 `템플릿 추가` 모달에서 이름/slug/ID로 검색해 선택하며, 이미 고정된 템플릿은 후보에서 제외한다.
+- 상단 고정 템플릿 순서는 드래그 또는 위/아래 버튼으로 바꿀 수 있고, 버튼 이동도 카드 위치가 부드럽게 전환되는 애니메이션을 사용한다.
+- 상단 고정 템플릿 추가 모달이 열려 있는 동안에는 배경 관리자 화면 스크롤을 잠가 모달 선택 흐름이 뒤쪽 화면 위치를 바꾸지 않도록 한다.
 - 사용자 아이템은 관리자 화면의 아이템 관리 탭에서 검색, 페이지네이션, 다운로드할 수 있다.
 - 사용자 커스텀 아이템은 선택한 게임의 기본 템플릿으로 복제해 가져올 수 있다.
 - 사용자 아이템은 사용 횟수(`usageCount`)를 표시하며, `미사용 아이템` 필터에서 저장 티어표/템플릿 참조가 더 이상 없는 항목만 개별/일괄 삭제할 수 있다. 사용자가 계정 탈퇴 등으로 삭제된 경우는 `custom_items.owner_id` 외래키로 레코드가 같이 사라지므로 보통 `미사용 아이템`으로 남지 않는다.
diff --git a/docs/todo.md b/docs/todo.md
index bad271e..090f155 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -1,6 +1,9 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- `v1.1.30` 이후 관리자 목록관리에서 `템플릿 추가` 모달을 열고 검색·선택·닫기 흐름이 자연스러운지, 이미 고정된 템플릿이 추가 후보에서 제외되는지 확인한다.
+- `v1.1.30` 이후 상단 고정 템플릿 추가 모달이 열린 동안 마우스 휠/트랙패드/모바일 터치로 뒤쪽 관리자 화면이 스크롤되지 않는지 확인한다.
+- `v1.1.30` 이후 상단 고정 목록의 `위로 / 아래로` 버튼을 눌렀을 때 카드가 깜빡이지 않고 부드럽게 이동하며, 드래그 정렬과 저장 순서가 계속 일치하는지 확인한다.
 - `v1.1.29` 이후 보기 전용 티어표 헤더에서 아이브로우가 템플릿 이름 한 줄만 남고, 더 이상 `Preview`와 중복되지 않는지 확인한다.
 - `v1.1.29` 이후 좌측 빠른 시작 버튼과 템플릿 화면 액션의 `커스텀 티어표` 문구가 전체 화면에서 같은 톤으로 보이는지 확인한다.
 - `v1.1.29` 이후 편집 화면에서 `풀 → 보드`, `보드 → 다른 칸`, `보드 → 풀` 드래그가 모두 다시 동작하는지 최우선으로 확인한다.
diff --git a/docs/update.md b/docs/update.md
index 78398bf..402e2d2 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 로그
 
+## 2026-04-08 v1.1.30
+- 관리자 목록관리의 홈 화면 상단 고정 템플릿 추가 방식을 전체 템플릿 목록 상시 노출에서 `템플릿 추가` 버튼 기반 검색 모달로 변경했다. 템플릿 이름, slug, ID로 검색한 뒤 선택한 항목만 고정 목록에 추가한다.
+- 상단 고정 템플릿 추가 모달이 열려 있는 동안 배경 페이지가 휠/터치 스크롤로 움직이지 않도록 `body.modal-scroll-lock` 잠금 처리를 추가했다.
+- 상단 고정 목록의 `위로 / 아래로` 버튼 순서 변경에 `TransitionGroup` move 애니메이션을 적용했다. 버튼으로 이동해도 카드가 즉시 깜빡이며 바뀌지 않고 드래그 정렬과 비슷하게 부드럽게 자리 이동한다.
+- 확인: `npm run build`
+
 ## 2026-04-07 v1.1.29
 - 보기 전용 티어표 헤더에서 중복이던 `Preview` 아이브로우를 제거했다. 이제 프리뷰 화면 헤더는 템플릿 이름 아이브로우 한 줄만 남고, 그 아래 티어표 제목과 설명이 이어진다.
 - 앱 전반의 `커스텀 티어표 만들기` 문구를 `커스텀 티어표`로 짧게 통일했다. 좌측 빠른 시작 버튼, 템플릿 화면 우측 액션, 가이드 설명 문구까지 같은 표현을 사용한다.
diff --git a/frontend/src/components/admin/AdminFeaturedSection.vue b/frontend/src/components/admin/AdminFeaturedSection.vue
index b355b1f..f4587d7 100644
--- a/frontend/src/components/admin/AdminFeaturedSection.vue
+++ b/frontend/src/components/admin/AdminFeaturedSection.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+
 const props = defineProps({
   featuredTemplates: { type: Array, required: true },
   availableTemplatesForFeatured: { type: Array, required: true },
@@ -9,6 +11,44 @@ const props = defineProps({
   removeFeaturedTemplate: { type: Function, required: true },
   addFeaturedTemplate: { type: Function, required: true },
 })
+
+const featuredTemplateSearchQuery = ref('')
+const featuredTemplatePickerOpen = ref(false)
+
+const filteredAvailableTemplatesForFeatured = computed(() => {
+  const query = featuredTemplateSearchQuery.value.trim().toLowerCase()
+  if (!query) return props.availableTemplatesForFeatured
+  return props.availableTemplatesForFeatured.filter((template) => {
+    const haystack = `${template.name || ''} ${template.slug || ''} ${template.id || ''}`.toLowerCase()
+    return haystack.includes(query)
+  })
+})
+
+function openFeaturedTemplatePicker() {
+  featuredTemplateSearchQuery.value = ''
+  featuredTemplatePickerOpen.value = true
+}
+
+function closeFeaturedTemplatePicker() {
+  featuredTemplatePickerOpen.value = false
+}
+
+function chooseFeaturedTemplate(templateId) {
+  props.addFeaturedTemplate(templateId)
+  closeFeaturedTemplatePicker()
+}
+
+function setFeaturedTransitionListRef(el) {
+  props.featuredListRef(el?.$el || el)
+}
+
+watch(featuredTemplatePickerOpen, (isOpen) => {
+  document.body.classList.toggle('modal-scroll-lock', isOpen)
+})
+
+onUnmounted(() => {
+  document.body.classList.remove('modal-scroll-lock')
+})
 </script>
 
 <template>
@@ -18,14 +58,23 @@ const props = defineProps({
         <div class="panel__title">홈 화면 상단 고정 순서</div>
         <div class="hint hint--tight">여기에 넣은 템플릿은 지정한 순서대로 먼저 노출되고, 나머지 템플릿은 최근 생성순으로 뒤에 이어집니다. 최대 50개까지 설정할 수 있어요.</div>
       </div>
-      <button class="btn btn--primary" @click="props.saveFeaturedOrder">순서 저장</button>
+      <div class="featuredOrderPanel__headActions">
+        <button
+          class="btn btn--ghost"
+          :disabled="props.featuredTemplateIds.length >= 50 || !props.availableTemplatesForFeatured.length"
+          @click="openFeaturedTemplatePicker"
+        >
+          템플릿 추가
+        </button>
+        <button class="btn btn--primary" @click="props.saveFeaturedOrder">순서 저장</button>
+      </div>
     </div>
 
     <div class="featuredOrderPanel">
       <div class="featuredOrderPanel__list">
         <div class="section__title">상단 고정 목록</div>
         <div v-if="!props.featuredTemplates.length" class="hint">아직 상단 고정 템플릿이 없어요.</div>
-        <div v-else :ref="props.featuredListRef" class="featuredList">
+        <TransitionGroup v-else :ref="setFeaturedTransitionListRef" tag="div" name="featured-list" class="featuredList">
           <article v-for="(template, index) in props.featuredTemplates" :key="template.id" class="featuredCard" :data-featured-id="template.id">
             <div class="featuredCard__meta">
               <span class="featuredCard__rank">{{ index + 1 }}</span>
@@ -41,22 +90,35 @@ const props = defineProps({
               <button class="btn btn--danger btn--small" @click="props.removeFeaturedTemplate(template.id)">제외</button>
             </div>
           </article>
-        </div>
+        </TransitionGroup>
       </div>
+    </div>
 
-      <div class="featuredOrderPanel__picker">
-        <div class="section__title">템플릿 추가</div>
-        <div class="featuredPickerList">
+    <div v-if="featuredTemplatePickerOpen" class="modalOverlay" @click.self="closeFeaturedTemplatePicker">
+      <div class="modalCard" role="dialog" aria-modal="true">
+        <div class="modalCard__titleRow">
+          <div>
+            <div class="modalCard__title">상단 고정 템플릿 추가</div>
+            <div class="modalCard__desc">템플릿 이름, slug, ID로 검색한 뒤 고정 목록에 추가할 항목을 선택하세요.</div>
+          </div>
+          <button class="btn btn--ghost btn--small" @click="closeFeaturedTemplatePicker">닫기</button>
+        </div>
+        <div class="modalCard__form modalCard__form--search">
+          <input v-model="featuredTemplateSearchQuery" class="input" placeholder="템플릿 이름 또는 slug 검색" autofocus />
+          <span class="hint hint--tight">{{ filteredAvailableTemplatesForFeatured.length }}개 결과</span>
+        </div>
+        <div class="templatePickerModalList">
           <button
-            v-for="template in props.availableTemplatesForFeatured"
+            v-for="template in filteredAvailableTemplatesForFeatured"
             :key="template.id"
-            class="featuredPickerItem"
-            :disabled="props.featuredTemplateIds.length >= 50"
-            @click="props.addFeaturedTemplate(template.id)"
+            class="adminTemplatePicker__item"
+            type="button"
+            @click="chooseFeaturedTemplate(template.id)"
           >
-            <span>{{ template.name }}</span>
-            <span class="featuredPickerItem__id">{{ template.slug || template.id }}</span>
+            <span class="adminTemplatePicker__name">{{ template.name }}</span>
+            <span class="adminTemplatePicker__meta">{{ template.slug || template.id }}</span>
           </button>
+          <div v-if="!filteredAvailableTemplatesForFeatured.length" class="hint hint--tight">추가할 수 있는 템플릿이 없어요.</div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/composables/useAdminFeaturedTemplates.js b/frontend/src/composables/useAdminFeaturedTemplates.js
index e86f384..ce69492 100644
--- a/frontend/src/composables/useAdminFeaturedTemplates.js
+++ b/frontend/src/composables/useAdminFeaturedTemplates.js
@@ -64,7 +64,6 @@ export function useAdminFeaturedTemplates({
     const [moved] = nextIds.splice(currentIndex, 1)
     nextIds.splice(nextIndex, 0, moved)
     featuredTemplateIds.value = nextIds
-    syncFeaturedSortable()
   }
 
   async function saveFeaturedOrder() {
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 961faf6..ecc8fd6 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -3470,12 +3470,22 @@ function openUserProfile(user) {
   color: var(--theme-text-muted);
   line-height: 1.6;
 }
+body.modal-scroll-lock {
+  overflow: hidden;
+  overscroll-behavior: none;
+}
 .adminUiScope .featuredOrderPanel {
   margin-top: 14px;
   display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: 16px;
 }
+.adminUiScope .featuredOrderPanel__headActions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
 .adminUiScope .featuredOrderPanel__list,
 .adminUiScope .featuredOrderPanel__picker {
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -3485,6 +3495,7 @@ function openUserProfile(user) {
 }
 .adminUiScope .featuredList,
 .adminUiScope .featuredPickerList {
+  position: relative;
   margin-top: 10px;
   display: grid;
   gap: 10px;
@@ -3501,6 +3512,20 @@ function openUserProfile(user) {
   border: 1px solid var(--theme-border);
   background: var(--theme-pill-bg);
 }
+.adminUiScope .featured-list-move,
+.adminUiScope .featured-list-enter-active,
+.adminUiScope .featured-list-leave-active {
+  transition: transform 180ms ease, opacity 180ms ease;
+}
+.adminUiScope .featured-list-enter-from,
+.adminUiScope .featured-list-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.adminUiScope .featured-list-leave-active {
+  position: absolute;
+  width: calc(100% - 32px);
+}
 .adminUiScope .featuredCard__meta {
   display: flex;
   gap: 12px;