ui: simplify local rail editor spacing

ui: refine editor sidebar scroll spacing
ui: preserve editor sidebar end spacing
2026-04-06 14:00:28 +09:00 · 2026-04-06 13:55:05 +09:00 · 2026-04-06 13:51:57 +09:00 · 2026-04-06 13:49:14 +09:00 · 2026-04-06 13:47:50 +09:00 · 2026-04-06 13:44:16 +09:00
11 changed files with 1111 additions and 153 deletions
--- a/backend/src/db.js
+++ b/backend/src/db.js
@@ -148,6 +148,37 @@ function mapCustomItemRow(row) {
  }
 }

+function getSharedItemDisplayPriority(item) {
+  if (!item) return 99
+  if (item.sourceType === 'user' && !item.replacedAt) return 0
+  if (item.sourceType === 'user') return 1
+  if (item.sourceType === 'template') return 2
+  if (item.sourceType === 'asset' || item.isAssetLibraryItem) return 3
+  return 4
+}
+
+function collapseSharedLibraryItems(items) {
+  const grouped = new Map()
+  for (const item of items || []) {
+    const key = String(item?.src || '').trim()
+    if (!key) continue
+    if (!grouped.has(key)) grouped.set(key, [])
+    grouped.get(key).push(item)
+  }
+
+  return Array.from(grouped.values())
+    .map((group) =>
+      group
+        .slice()
+        .sort((a, b) => {
+          const priorityDiff = getSharedItemDisplayPriority(a) - getSharedItemDisplayPriority(b)
+          if (priorityDiff !== 0) return priorityDiff
+          return Number(b.createdAt || 0) - Number(a.createdAt || 0)
+        })[0]
+    )
+    .sort((a, b) => Number(b.createdAt || 0) - Number(a.createdAt || 0))
+}
+
 function mapImageAssetRow(row) {
  if (!row) return null
  return {
@@ -1832,7 +1863,7 @@ async function getCustomItemUsageMeta() {
  }
 }

-async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMode = 'all' } = {}) {
+async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMode = 'all', collapseShared = false } = {}) {
  const normalizedLimit = Math.min(Math.max(Number(limit) || 50, 1), 200)
  const normalizedPage = Math.max(Number(page) || 1, 1)
  const searchText = (queryText || '').trim()
@@ -2076,9 +2107,10 @@ async function listCustomItems({ queryText = '', page = 1, limit = 50, filterMod
    })
    .sort((a, b) => Number(b.createdAt || 0) - Number(a.createdAt || 0))

-  const total = allItems.length
+  const visibleItems = collapseShared ? collapseSharedLibraryItems(allItems) : allItems
+  const total = visibleItems.length
  const offset = (normalizedPage - 1) * normalizedLimit
-  const pagedItems = allItems.slice(offset, offset + normalizedLimit)
+  const pagedItems = visibleItems.slice(offset, offset + normalizedLimit)

  return {
    items: pagedItems,
--- a/backend/src/routes/admin.js
+++ b/backend/src/routes/admin.js
@@ -394,6 +394,10 @@ router.get('/custom-items', requireAdmin, async (req, res) => {
    q: z.string().trim().max(120).optional().default(''),
    page: z.coerce.number().int().min(1).optional().default(1),
    limit: z.coerce.number().int().min(1).max(200).optional().default(50),
+    collapseShared: z
+      .union([z.string(), z.boolean(), z.number()])
+      .optional()
+      .transform((value) => value === true || value === 1 || value === '1' || value === 'true'),
    filter: z
      .enum(['library', 'all', 'user', 'template', 'asset', 'thumbnail', 'avatar', 'unused', 'unused-user', 'replaced-user', 'unused-admin'])
      .optional()
@@ -407,6 +411,7 @@ router.get('/custom-items', requireAdmin, async (req, res) => {
    page: parsed.data.page,
    limit: parsed.data.limit,
    filterMode: parsed.data.filter,
+    collapseShared: parsed.data.collapseShared,
  })
  res.json(result)
 })
@@ -862,6 +867,27 @@ router.post('/custom-items/:itemId/promote', requireAdmin, async (req, res) => {
  res.json({ item })
 })

+router.post('/custom-items/:itemId/unlink-template', requireAdmin, async (req, res) => {
+  const schema = z.object({
+    topicId: z.string().trim().min(1),
+  })
+  const parsed = schema.safeParse(req.body)
+  if (!parsed.success) return res.status(400).json({ error: 'bad_request' })
+
+  const template = await findTopicById(parsed.data.topicId)
+  if (!template) return res.status(404).json({ error: 'topic_not_found' })
+
+  const sourceItem = await findLibraryItemForReplacement(req.params.itemId)
+  if (!sourceItem?.src) return res.status(404).json({ error: 'not_found' })
+
+  const templateItems = await listTopicItems(template.id)
+  const matchedItems = templateItems.filter((item) => item?.src === sourceItem.src)
+  if (!matchedItems.length) return res.status(404).json({ error: 'linked_template_item_not_found' })
+
+  await Promise.all(matchedItems.map((item) => deleteTopicItem(item.id)))
+  res.json({ ok: true, deletedCount: matchedItems.length, topicId: template.id, src: sourceItem.src })
+})
+
 router.post('/custom-items/:itemId/replace', requireAdmin, async (req, res) => {
  const schema = z.object({
    targetItemId: z.string().trim().min(1),
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,60 @@
 # 의사결정 이력

+## 2026-04-06 v1.4.101
+- 실제 문제는 `editorCanvas` 자체보다 그 아래 `workspaceBody--localRail`의 하단 패딩까지 문서가 더 스크롤되는 구간에서 발생했다. 편집 캔버스 자체에도 하단 여백이 있으므로, 데스크톱의 `workspaceBody--localRail` 하단 패딩과 오른쪽 sticky 래퍼의 추가 보정 패딩은 제거하는 편이 더 단순하고 정확하다고 판단했다.
+- 아이템 풀은 내부 스크롤이 필요하지만, 오른쪽 패널 안에서 스크롤바가 항상 보이면 작업 화면이 좁고 복잡해 보일 수 있으므로 스크롤 동작만 유지하고 스크롤바 시각 요소는 숨기는 편이 낫다고 정리했다.
+
+## 2026-04-06 v1.4.100
+- 오른쪽 아이템 패널은 sticky로 동작하지만 부모 컨테이너의 끝에 닿으면 sticky 제한 때문에 마지막 스크롤 위치에서 위쪽 여백이 무너져 보일 수 있다. 그래서 편집 캔버스 자체에 작은 하단 여유 공간을 두어 마지막 위치에서도 패널 주변 여백이 유지되도록 하는 편이 낫다고 판단했다.
+
+## 2026-04-06 v1.4.99
+- 단축키는 실제 키 위치 기준으로 기대하는 경우가 많으므로, 한글 입력 상태에서 S 자리 키가 `ㄴ`으로 들어와도 같은 “아이템 검색” 동작을 실행하고, F 자리 키가 `ㄹ`로 들어와도 같은 “전체 화면” 동작을 실행하는 편이 한국어 사용자에게 자연스럽다고 정리했다.
+
+## 2026-04-06 v1.4.98
+- 방송/편집처럼 화면을 자주 정리해야 하는 사용 흐름에서는 사이드 패널과 전체 화면 전환을 마우스로만 조작하면 반복 비용이 커진다. 그래서 `[`/`]`/`F`/`S`처럼 한 손으로 누르기 쉬운 단축키를 두되, 입력창에서는 단축키를 무시해 실제 텍스트 입력을 방해하지 않는 편이 맞다고 정리했다.
+- `S`는 전역 템플릿 검색이 아니라 티어표 편집 화면의 아이템 검색으로 연결해야 하므로, 앱 셸이 편집 화면에 커스텀 이벤트를 보내고 편집 화면이 자신의 아이템 검색창에 포커스를 주는 방식으로 분리했다.
+
+## 2026-04-06 v1.4.97
+- 티어표 편집기의 오른쪽 아이템 패널은 페이지 내부 위치가 헤더, 제목, 스크롤 상태에 따라 달라지므로 `100dvh - 고정값` 방식으로는 왼쪽 레일처럼 하단이 자연스럽게 맞지 않을 수 있다. 실제 패널의 화면 내 시작 위치를 측정해 남은 높이를 계산하는 편이 더 안정적이라고 정리했다.
+
+## 2026-04-06 v1.4.96
+- 템플릿 제목을 버튼화하면 접근성은 좋아지지만, 포커스가 남은 상태의 `Space` 입력이 브라우저 스크롤과 섞이면 작업 화면을 갑자기 밀어낼 수 있다. 따라서 제목 버튼에서는 `Space` 기본 스크롤을 막고 의도한 본문 이동만 실행하는 편이 맞다고 정리했다.
+
+## 2026-04-06 v1.4.95
+- 티어표 편집 중에는 공통 헤더보다 보드와 아이템 풀이 더 중요한 작업 기준점이므로, 템플릿 제목을 본문 위치로 빠르게 이동하는 가벼운 컨트롤로 활용하는 편이 좋다고 정리했다. 별도 버튼을 추가하기보다 기존 제목 클릭 동작으로 두어 화면 복잡도를 늘리지 않는 쪽을 택했다.
+
+## 2026-04-06 v1.4.94
+- 아이템 수가 많을 때 오른쪽 풀 때문에 페이지 전체가 길어지면 왼쪽 티어표까지 함께 움직여 방송/녹화 환경에서 기준 화면이 흔들릴 수 있다. 그래서 데스크톱에서는 오른쪽 사이드의 실제 화면 시작 위치를 감안해 높이를 제한하되, 제목과 검색창은 유지하고 아이템 그리드만 스크롤되게 하는 편이 더 적절하다고 정리했다. 모바일에서는 기존처럼 문서 흐름을 유지한다.
+
+## 2026-04-06 v1.4.93
+- 티어표 편집기의 커스텀 이미지 추가 영역 아래는 아이템 수가 적을 때 비어 보이기 쉬우므로, 이 공간에는 큰 기능보다 방해되지 않는 작은 작업 팁을 두는 편이 자연스럽다고 정리했다. 특히 우클릭 복제, 미사용 아이템 처리, 브라우저 확대/축소처럼 초반 시행착오를 줄여 주는 내용이 효과적이라고 판단했다.
+
+## 2026-04-06 v1.4.92
+- 모바일 왼쪽 레일은 사용자 카드, 검색, 메뉴가 세로로 붙는 구조라 기본 `gap`이 빠지면 브라우저별 렌더링 차이에 따라 훨씬 답답하게 보일 수 있으므로, 이 영역 간격은 명시적으로 주는 편이 안전하다고 정리했다.
+
+## 2026-04-06 v1.4.91
+- 관리자 화면 모달이 많아질수록 `Esc` 동작이 일부 모달에서만 먹으면 예측 가능성이 떨어지므로, 열려 있는 공통 모달은 모두 `Esc = 취소` 규칙으로 맞추는 편이 더 자연스럽다고 정리했다.
+- 왼쪽 레일 사용자 카드의 두 번째 줄은 로그인된 상태에선 이메일이라 말줄임이 맞지만, 로그인 전/확인 중 메시지는 설명 성격이 강하므로 같은 `nowrap` 규칙을 쓰면 가로 스크롤을 유발할 수 있다. 그래서 이메일과 설명 문구의 줄 처리 정책을 분리하는 쪽이 맞다고 판단했다.
+
+## 2026-04-06 v1.4.90
+- `templateSettingsCard__actions`는 카드 안에서 버튼이 줄바꿈될 수 있어야 하지만, 공통 버튼 스타일의 높이 100% 규칙까지 그대로 받으면 줄바꿈된 행이 비정상적으로 늘어날 수 있으므로 이 영역의 버튼만 높이를 자동으로 되돌리는 편이 맞다고 정리했다.
+- 또 템플릿 기본 아이템 삭제는 “기존 저장 티어표에는 영향 없음”이라는 정책 설명이 중요하므로, 브라우저 기본 확인창보다 관리자 공통 모달로 통일해 같은 톤과 문구 체계 안에서 보여주는 쪽이 더 낫다고 판단했다.
+
+## 2026-04-06 v1.4.89
+- 템플릿 화면에서 이름/slug 저장과 아이템 태그 일괄 추가는 성격이 다르므로, 기존처럼 하나의 `메타` 개념으로 묶기보다 `이름/주소 저장`과 `공통 태그 추가`를 분리해 보여주는 편이 운영자가 이해하기 쉽다고 정리했다.
+- 또 `templateSettingsCard`는 버튼 문구가 비교적 길고 썸네일/폼/토글이 함께 들어가는 카드라서, 좁은 폭에서 각 블록의 최소 너비를 풀어 주지 않으면 카드 밖으로 밀려나기 쉬우므로 입력 필드와 액션 버튼 모두 카드 내부에서 줄어들고 줄바꿈되게 하는 쪽이 맞다고 판단했다.
+- 템플릿 기본 아이템 카드도 작은 썸네일 위에 버튼 두 개를 계속 노출하면 카드 높이가 불필요하게 커지고 반복 조작 밀도가 떨어지므로, 저장은 입력 후 `Enter`, 삭제는 우상단 `X`처럼 더 직접적인 마이크로 인터랙션으로 옮기는 편이 낫다고 정리했다.
+
+## 2026-04-06 v1.4.88
+- 같은 이미지를 사용자 항목, 템플릿 항목, 관리자 자산으로 각각 따로 카드에 늘어놓으면 운영자가 실제로 보고 싶은 “이미지 단위 상태”보다 내부 저장 단위가 더 크게 드러나므로, 관리자 목록과 검색은 기본적으로 같은 `src`를 하나로 묶어 보여주는 편이 더 자연스럽다고 정리했다.
+- 아이템 모달의 연결 템플릿 배지는 단순히 해당 템플릿 화면으로 점프하는 것보다, 그 자리에서 `이 템플릿에서 제외`를 바로 수행하는 액션이 훨씬 직접적이므로 배지에 제거 버튼을 붙이는 쪽이 더 낫다고 판단했다.
+- 한글 태그 입력은 IME 조합 중 `Enter`가 중간 문자열까지 함께 커밋될 수 있으므로, 배지형 태그 입력에서는 조합 상태를 명시적으로 감지해 완성된 문자열만 태그로 추가하는 편이 맞다고 정리했다.
+
+## 2026-04-06 v1.4.87
+- 템플릿 태그는 이름/slug 검색과 역할이 겹치고, 운영자가 실제로 원하는 것은 “템플릿 찾기”보다 “아이템 묶음 분류”에 가까웠으므로 템플릿 화면에서 직접 노출하지 않는 편이 더 맞다고 정리했다.
+- 태그 입력도 카드 곳곳에 흩어져 있으면 메인 작업인 업로드와 이름 정리가 묻히기 쉬우므로, 태그는 관리자 아이템 모달에서만 배지형으로 다루고 템플릿 화면 본문은 가볍게 유지하는 쪽을 택했다.
+- 기존 템플릿을 통째로 가져오는 기능만으로는 운영자가 “조건에 맞는 일부 아이템만” 빠르게 합치는 흐름이 부족하므로, 이름·파일명·태그 기반 개별 아이템 검색 후 초안 목록으로 담아두는 보조 모달을 추가하는 편이 더 실용적이라고 판단했다.
+
 ## 2026-04-06 v1.4.86
 - 내부 운영용 분류는 공개 노출용 필드와 분리하는 편이 맞다고 보고, 태그는 템플릿과 아이템의 관리자 전용 메타로만 저장하고 검색에 활용하는 방향으로 정리했다.
 - 기존 분기 템플릿이나 요청 아이템을 다시 재조합해 새 템플릿을 만드는 흐름은 완전히 별도 마법 기능보다, 이미 있는 `초안 목록`에 다른 출처의 아이템을 합류시키고 `제외` 버튼으로 정리하는 편이 훨씬 예측 가능하다고 판단했다.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,79 @@
 # 업데이트 로그

+## 2026-04-06 v1.4.101
+- `workspaceBody--localRail`의 하단 패딩 구간까지 스크롤했을 때 오른쪽 아이템 카드가 sticky 기준 영역을 벗어나 상단에 붙어 보이던 문제를 보정했다. 데스크톱에서는 `workspaceBody--localRail`의 하단 패딩과 오른쪽 sticky 래퍼 보정 패딩을 제거하고, 편집 캔버스 자체 여백만 사용하도록 정리했다.
+- 티어표 편집 화면의 아이템 그리드 내부 스크롤은 유지하되, 시각적인 스크롤바는 보이지 않도록 정리했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.100
+- 티어표 편집 화면을 가장 아래까지 스크롤했을 때 오른쪽 아이템 카드가 부모 컨테이너 끝에 걸리며 상단 여백이 무너져 보일 수 있어, 편집 캔버스 하단에 sticky 여백용 패딩을 추가했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.99
+- 티어표 편집 화면의 아이템 검색/전체 화면 단축키를 한글 입력 상태에서도 쓸 수 있게 보정했다. `S`뿐 아니라 같은 물리 키에서 들어오는 `ㄴ`도 아이템 검색 포커스로 처리하고, `F` 자리에서 들어오는 `ㄹ`도 전체 화면 토글로 처리한다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.98
+- 전역 단축키를 추가했다. `[`는 왼쪽 사이드 토글, `]`는 오른쪽 사이드 토글, `F`는 전체 화면 토글, `S`는 티어표 편집 화면의 아이템 검색창 포커스로 동작한다.
+- 입력창, textarea, select, contenteditable 영역에서는 단축키가 동작하지 않도록 막아 검색이나 이름 입력을 방해하지 않게 했다.
+- 가이드 보기 마지막 페이지에 단축키 안내를 추가하고, 모달은 `Esc`로 닫을 수 있다는 안내도 함께 정리했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.97
+- 티어표 편집 화면의 오른쪽 아이템 패널 높이를 고정 숫자 대신 실제 화면 내 시작 위치 기준으로 계산하도록 바꿨다. 공통 헤더/제목 영역/스크롤 위치가 달라져도 아이템 풀의 하단이 viewport 안에 더 자연스럽게 맞도록 보정했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.96
+- 티어표 편집 화면의 템플릿 제목에 포커스가 남은 상태에서 `Space`를 누르면 브라우저 기본 스크롤이 섞일 수 있어, 제목 버튼의 `Space` 기본 동작을 막고 본문 이동만 실행되도록 보정했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.95
+- 티어표 편집 화면의 템플릿 제목을 클릭하면 `workspaceBody`가 화면 최상단에 오도록 부드럽게 스크롤되게 했다. 작업 중 공통 헤더를 화면 밖으로 밀어내고 본문 중심으로 볼 수 있다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.94
+- 티어표 편집 화면에서 아이템이 많을 때 오른쪽 아이템 사이드가 문서 높이를 밀어 왼쪽 티어표까지 함께 움직이던 흐름을 줄였다. 데스크톱에서는 오른쪽 사이드의 실제 화면 시작 위치를 감안해 높이를 제한하고, 아이템 그리드만 내부 스크롤되게 해 검색창은 위에 유지하면서 필요한 아이템을 찾아 가져올 수 있게 했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.93
+- 티어표 편집 화면의 커스텀 이미지 추가 영역 아래에는 작은 `작업 팁` 안내를 추가했다. 복수 사용, 미사용 아이템 미리보기/저장 제외, 브라우저 확대/축소 활용 같은 자주 묻는 흐름을 바로 확인할 수 있다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.92
+- 모바일 왼쪽 사이드 메뉴(`leftRail__mobileMenu`)에 `gap`이 빠져 일부 브라우저에서 사용자 카드와 검색창/메뉴가 더 붙어 보일 수 있던 간격을 다시 정리했다.
+
+## 2026-04-06 v1.4.91
+- 관리자 화면의 각종 모달은 이제 `Esc` 키를 누르면 현재 열려 있는 모달이 바로 닫히도록 정리했다. 브라우저 기본 동작 대신 공통 `취소` 흐름으로 맞췄다.
+- 왼쪽 사이드에서 일부 브라우저 환경에 가로 스크롤이 생기던 문제를 보정했다. 사용자 카드와 검색창에 `min-width: 0`을 더 명확히 주고, 이메일은 계속 말줄임 처리하되 로그인 전 안내 문구처럼 긴 설명은 자연스럽게 줄바꿈되도록 분리했다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.90
+- `templateSettingsCard__actions` 내부 버튼은 좁은 화면에서 과하게 세로로 늘어나지 않도록 버튼 높이를 자동으로 풀고, 카드 너비 안에서 자연스럽게 줄바꿈되도록 다시 보정했다.
+- 템플릿 기본 아이템 삭제 확인은 브라우저 기본 `confirm` 대신 관리자 공통 모달로 바꿨다. 저장된 다른 티어표에는 영향을 주지 않고, 이후 새로 만드는 티어표에서만 제외된다는 안내도 모달 안에서 함께 보여준다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.89
+- 템플릿 관리의 `템플릿 메타 저장` 버튼은 실제 역할에 맞춰 `이름/주소 저장`으로 바꿨다. 이제 이 버튼은 템플릿 이름과 slug 저장만 담당한다.
+- 대신 현재 템플릿의 기본 아이템 전체에 같은 태그를 한 번에 추가하는 `기본 아이템 공통 태그` 기능을 추가했다. 배지형 입력으로 태그를 넣고 적용하면, 같은 태그는 중복 없이 각 아이템에 합쳐 저장된다.
+- 운영 문구도 `메타`보다 실제 의미가 분명한 `태그` 기준으로 맞췄다.
+- `adminCard templateSettingsCard`는 화면이 좁아질 때 내부 액션 버튼과 입력 필드가 카드 밖으로 밀려나지 않도록 최소 너비와 버튼 줄바꿈 규칙을 보정했다.
+- 템플릿 기본 아이템 카드(`thumbCard`)는 `이름 저장`/`아이템 삭제` 버튼을 걷어내고, 이름 입력 후 `Enter`로 바로 저장되게 바꿨다. 삭제는 티어표 편집기처럼 우상단 `X` 버튼으로 옮겨 카드 높이를 더 작게 유지한다.
+- 확인: `npm run build`
+
+## 2026-04-06 v1.4.88
+- 관리자 아이템 목록과 개별 아이템 검색에서는 같은 이미지 `src`를 공유하는 항목을 하나로 묶어 보여주도록 조정했다. 사용자 아이템, 템플릿 아이템, 관리자 자산이 같은 이미지를 가리키는 경우 카드가 반복해서 보이던 문제를 줄였다.
+- 아이템 모달의 `이 이미지를 사용하는 템플릿` 배지는 더 이상 단순 이동 버튼이 아니고, 각 배지의 `X` 버튼으로 해당 템플릿에서 이미지를 바로 제외할 수 있게 바꿨다.
+- 아이템 모달의 `새 템플릿 만들기` 버튼은 현재 흐름에선 분기만 늘린다고 보고 숨겼다. 이제 아이템 추가는 이미 선택한 템플릿 기준으로만 진행된다.
+- 배지형 태그 입력은 한글 IME 조합 중 `Enter`를 눌렀을 때 초성/중간 문자열이 중복 등록되던 문제를 막기 위해 조합 중 입력을 따로 감지하도록 보강했다.
+- 확인: `node --check backend/src/db.js`, `node --check backend/src/routes/admin.js`, `npm run build`
+
+## 2026-04-06 v1.4.87
+- 템플릿 설정 화면에서는 더 이상 템플릿 태그를 직접 입력하지 않도록 정리했다. 템플릿 자체는 이름과 slug로만 관리하고, 운영용 태그는 아이템 모달 안에서만 다루는 흐름으로 단순화했다.
+- 관리자 아이템 모달의 태그 입력은 쉼표 문자열 대신 배지형 입력으로 바꿨다. 태그를 입력하고 `Enter`를 누르면 아래에 배지로 붙고, 각 배지의 `X` 버튼으로 개별 제거할 수 있다.
+- 템플릿 관리 액션 영역은 좁은 화면에서도 버튼이 자연스럽게 오른쪽 정렬로 줄바꿈되도록 손봤고, `개별 아이템 검색` 모달을 추가해 이름·파일명·태그로 원하는 아이템만 직접 찾아 현재 템플릿 초안에 넣을 수 있게 했다.
+- 템플릿 화면의 기본 아이템 목록과 업로드 초안 카드에서는 태그 입력창을 제거해, 메인 작업 흐름이 이름 편집과 아이템 추가에 더 집중되도록 정리했다.
+- 확인: `npm run build`
+
 ## 2026-04-06 v1.4.86
 - 관리자 전용 내부 태그를 템플릿과 아이템 메타에 추가했다. 이제 템플릿 설정과 기본 아이템/관리자 아이템 모달에서 태그를 쉼표 기준으로 저장할 수 있고, 관리자 검색에서도 이름·파일명뿐 아니라 태그까지 함께 조회할 수 있다.
 - 템플릿 관리 화면에 `기존 템플릿 가져오기`를 추가했다. 현재 선택한 템플릿에 다른 템플릿들의 기본 아이템을 초안으로 모아 온 뒤, 필요 없는 항목은 `제외`하고 저장할 수 있다. 여러 분기 템플릿을 합쳐 연간 통합 템플릿을 만드는 흐름을 염두에 둔 기능이다.
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -22,7 +22,7 @@ import SvgIcon from './components/SvgIcon.vue'
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
-const { toasts, dismissToast } = useToast()
+const { toasts, dismissToast, error: showErrorToast } = useToast()
 const RIGHT_RAIL_COPYRIGHT_URL = 'https://x.com/zennbox'
 const currentTopicId = computed(() => route.params.topicId || '')

@@ -38,6 +38,7 @@ const guideStepIndex = ref(0)
 const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1440)
 const backendState = ref('online')
 const backendMessage = ref('')
+const isFullscreenActive = ref(false)
 provide('rightRailOpen', rightRailOpen)
 provide('localRightRailTarget', '#local-right-rail-root')

@@ -62,6 +63,7 @@ const accountEmail = computed(() => {
  if (!authReady.value) return '계정 상태를 확인하고 있어요.'
  return (auth.user?.email || '').trim() || '로그인 후 개인 메뉴를 사용할 수 있어요.'
 })
+const isAccountEmailHint = computed(() => !auth.user)
 const shellStyle = computed(() => ({
  '--left-rail-width': leftRailCollapsed.value ? '76px' : '248px',
  '--right-rail-width': !isRightRailOverlay.value && rightRailOpen.value ? '325px' : '0px',
@@ -136,6 +138,13 @@ const guideSteps = [
    description:
      '주제 템플릿은 즐겨찾기로 상단에 고정해둘 수 있고, 저장한 보드는 내 티어표에서 다시 열어 이어서 수정할 수 있어요. 자주 보는 템플릿, 공개 티어표, 내가 만든 결과물을 각각 다른 화면에서 정리해두면 이후 작업이 훨씬 빨라집니다.',
  },
+  {
+    id: 'keyboard-shortcuts',
+    title: '단축키로 빠른 조작',
+    summary: '사이드 패널과 전체 화면을 키보드로 빠르게 전환합니다.',
+    description:
+      '[ 키는 왼쪽 사이드를 열고 닫고, ] 키는 오른쪽 사이드를 열고 닫습니다. F 키는 전체 화면 보기 토글, S 키는 티어표 편집 화면의 아이템 검색창으로 바로 이동할 때 사용할 수 있어요. 한글 입력 상태에서는 F 자리의 ㄹ, S 자리의 ㄴ 키도 같은 단축키로 처리됩니다. 각종 모달은 Esc 키로 닫을 수 있습니다. 단, 검색창이나 입력칸에 글을 쓰는 중에는 단축키가 동작하지 않도록 처리되어 있어요.',
+  },
 ]
 const currentGuideStep = computed(() => guideSteps[guideStepIndex.value] || guideSteps[0])
 const isGuidePrevDisabled = computed(() => guideStepIndex.value <= 0)
@@ -287,6 +296,11 @@ function handleBackendStatus(event) {
  backendMessage.value = typeof event?.detail?.message === 'string' ? event.detail.message : ''
 }

+function syncFullscreenState() {
+  if (typeof document === 'undefined') return
+  isFullscreenActive.value = !!(document.fullscreenElement || document.webkitFullscreenElement)
+}
+
 function applyTheme(mode) {
  themeMode.value = mode === 'light' ? 'light' : 'dark'
  if (typeof document !== 'undefined') document.documentElement.dataset.theme = themeMode.value
@@ -311,9 +325,12 @@ onMounted(async () => {
  await auth.refresh()
  if (typeof window !== 'undefined') {
    syncViewportWidth()
+    syncFullscreenState()
    window.addEventListener('tier-maker:backend-status', handleBackendStatus)
    window.addEventListener('resize', syncViewportWidth)
    window.addEventListener('keydown', handleGlobalKeydown)
+    document.addEventListener('fullscreenchange', syncFullscreenState)
+    document.addEventListener('webkitfullscreenchange', syncFullscreenState)
    const leftSaved = window.localStorage.getItem('tier-maker:left-rail-collapsed')
    if (leftSaved === '1') leftRailCollapsed.value = true
    const saved = window.localStorage.getItem('tier-maker:right-rail-open')
@@ -335,6 +352,54 @@ function handleGlobalKeydown(event) {
  }
  if (event.key === 'Escape' && isCollapsedSearchOpen.value) {
    closeCollapsedSearch()
+    return
+  }
+  if (isGuideModalOpen.value || isCollapsedSearchOpen.value) return
+  if (shouldIgnoreGlobalShortcut(event)) return
+
+  if (event.key === '[') {
+    event.preventDefault()
+    toggleLeftRail()
+    return
+  }
+  if (event.key === ']') {
+    event.preventDefault()
+    toggleRightRail()
+    return
+  }
+  if (['f', 'ㄹ'].includes(String(event.key || '').toLowerCase())) {
+    event.preventDefault()
+    toggleFullscreen()
+    return
+  }
+  if (['s', 'ㄴ'].includes(String(event.key || '').toLowerCase()) && ['editEditor', 'newEditor'].includes(String(route.name || ''))) {
+    event.preventDefault()
+    window.dispatchEvent(new CustomEvent('tier-maker:focus-editor-item-search'))
+  }
+}
+
+function shouldIgnoreGlobalShortcut(event) {
+  if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return true
+  const target = event.target
+  if (!target || !(target instanceof HTMLElement)) return false
+  const tagName = target.tagName.toLowerCase()
+  return target.isContentEditable || ['input', 'textarea', 'select'].includes(tagName)
+}
+
+async function toggleFullscreen() {
+  if (typeof document === 'undefined') return
+  try {
+    const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement
+    if (fullscreenElement) {
+      const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen
+      if (exitFullscreen) await exitFullscreen.call(document)
+      return
+    }
+    const target = document.documentElement
+    const requestFullscreen = target.requestFullscreen || target.webkitRequestFullscreen
+    if (requestFullscreen) await requestFullscreen.call(target)
+  } catch (error) {
+    showErrorToast('전체 화면 전환을 실행하지 못했어요.')
  }
 }

@@ -343,6 +408,8 @@ onBeforeUnmount(() => {
    window.removeEventListener('tier-maker:backend-status', handleBackendStatus)
    window.removeEventListener('resize', syncViewportWidth)
    window.removeEventListener('keydown', handleGlobalKeydown)
+    document.removeEventListener('fullscreenchange', syncFullscreenState)
+    document.removeEventListener('webkitfullscreenchange', syncFullscreenState)
  }
  syncRightRailBodyScrollLock(false)
 })
@@ -529,7 +596,7 @@ function reloadApp() {
            <div v-else class="appUserCard__avatar appUserCard__avatar--fallback">{{ accountName[0]?.toUpperCase() || 'U' }}</div>
            <div class="appUserCard__meta">
              <div class="appUserCard__name">{{ accountName }}</div>
-              <div class="appUserCard__email">{{ accountEmail }}</div>
+              <div class="appUserCard__email" :class="{ 'appUserCard__email--hint': isAccountEmailHint }">{{ accountEmail }}</div>
            </div>
            <button
              v-if="isMobileLayout"
@@ -982,6 +1049,7 @@ function reloadApp() {
 .appUserCard__button,
 .appUserCard__guest {
  width: 100%;
+  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: center;
@@ -1022,6 +1090,7 @@ function reloadApp() {

 .leftRail__mobileMenu {
  display: grid;
+  min-width: 0;
 }

 .appUserCard__navToggle {
@@ -1042,18 +1111,30 @@ function reloadApp() {
 .appUserCard__name {
  font-size: 14px;
  font-weight: 800;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }

 .appUserCard__email {
  font-size: 12px;
  color: var(--theme-text-muted);
+  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

+.appUserCard__email--hint {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: unset;
+  overflow-wrap: anywhere;
+  word-break: keep-all;
+}
+
 .searchStub {
  width: 100%;
+  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
@@ -1381,7 +1462,7 @@ function reloadApp() {

 .workspaceBody--localRail {
  min-height: 0;
-  padding: 18px 18px 32px;
+  padding: 18px 18px 0;
  border: 0;
  border-radius: 0;
  background: var(--theme-workspace-bg);
--- a/frontend/src/components/TagBadgeInput.vue
+++ b/frontend/src/components/TagBadgeInput.vue
@@ -0,0 +1,158 @@
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  placeholder: { type: String, default: '태그 입력 후 Enter' },
+  disabled: { type: Boolean, default: false },
+  maxTags: { type: Number, default: 30 },
+  maxTagLength: { type: Number, default: 40 },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const draft = ref('')
+const isComposing = ref(false)
+
+const normalizedTags = computed(() =>
+  Array.from(
+    new Set(
+      (Array.isArray(props.modelValue) ? props.modelValue : [])
+        .map((tag) => String(tag || '').trim().replace(/^#/, '').slice(0, props.maxTagLength))
+        .filter(Boolean)
+    )
+  ).slice(0, props.maxTags)
+)
+
+function commitTags(nextTags) {
+  emit(
+    'update:modelValue',
+    Array.from(
+      new Set(
+        (nextTags || [])
+          .map((tag) => String(tag || '').trim().replace(/^#/, '').slice(0, props.maxTagLength))
+          .filter(Boolean)
+      )
+    ).slice(0, props.maxTags)
+  )
+}
+
+function addDraftTag() {
+  if (props.disabled) return
+  const nextTag = String(draft.value || '').trim().replace(/^#/, '').slice(0, props.maxTagLength)
+  if (!nextTag) return
+  commitTags([...normalizedTags.value, nextTag])
+  draft.value = ''
+}
+
+function removeTag(tag) {
+  if (props.disabled) return
+  commitTags(normalizedTags.value.filter((entry) => entry !== tag))
+}
+
+function handleKeydown(event) {
+  if (event.isComposing || isComposing.value) return
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    addDraftTag()
+    return
+  }
+
+  if (event.key === 'Backspace' && !draft.value && normalizedTags.value.length) {
+    removeTag(normalizedTags.value[normalizedTags.value.length - 1])
+  }
+}
+
+function handleBlur() {
+  if (isComposing.value) return
+  addDraftTag()
+}
+
+function handleCompositionStart() {
+  isComposing.value = true
+}
+
+function handleCompositionEnd() {
+  isComposing.value = false
+}
+</script>
+
+<template>
+  <div class="tagBadgeInput" :class="{ 'tagBadgeInput--disabled': disabled }">
+    <div v-if="normalizedTags.length" class="tagBadgeInput__list">
+      <span v-for="tag in normalizedTags" :key="tag" class="tagBadgeInput__badge">
+        <span>#{{ tag }}</span>
+        <button class="tagBadgeInput__remove" type="button" :disabled="disabled" @click="removeTag(tag)">X</button>
+      </span>
+    </div>
+    <input
+      v-model="draft"
+      class="tagBadgeInput__input"
+      type="text"
+      :placeholder="placeholder"
+      :disabled="disabled || normalizedTags.length >= maxTags"
+      :maxlength="maxTagLength"
+      @keydown="handleKeydown"
+      @blur="handleBlur"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
+    />
+  </div>
+</template>
+
+<style scoped>
+.tagBadgeInput {
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--theme-border-strong) 72%, rgba(255, 255, 255, 0.08));
+  background: color-mix(in srgb, var(--theme-surface-soft) 82%, rgba(255, 255, 255, 0.02));
+}
+
+.tagBadgeInput--disabled {
+  opacity: 0.72;
+}
+
+.tagBadgeInput__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tagBadgeInput__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 11px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--theme-accent-soft) 55%, rgba(255, 255, 255, 0.06));
+  color: var(--theme-text);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.tagBadgeInput__remove {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 11px;
+  font-weight: 800;
+  cursor: pointer;
+  padding: 0;
+}
+
+.tagBadgeInput__input {
+  width: 100%;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--theme-text);
+  font: inherit;
+}
+
+.tagBadgeInput__input::placeholder {
+  color: var(--theme-text-soft);
+}
+</style>
--- a/frontend/src/components/admin/AdminTemplatesSection.vue
+++ b/frontend/src/components/admin/AdminTemplatesSection.vue
@@ -10,16 +10,18 @@ const props = defineProps({
  appliedRequestItemCount: { type: Number, required: true },
  openTemplateCreateModal: { type: Function, required: true },
  openTemplateSourceImportModal: { type: Function, required: true },
+  openTemplateLibraryItemModal: { type: Function, required: true },
+  openTemplateBulkTagModal: { type: Function, required: true },
  isTemplateLoading: { type: Boolean, required: true },
  hasSelectedTemplate: { type: Boolean, required: true },
  selectedTemplate: { type: Object, default: null },
  displayThumbnailUrl: { type: String, default: '' },
  templateMetaDraftName: { type: String, default: '' },
  templateMetaDraftSlug: { type: String, default: '' },
-  templateMetaDraftTags: { type: String, default: '' },
  templateMetaSaving: { type: Boolean, required: true },
  canSaveTemplateMeta: { type: Boolean, required: true },
  saveTemplateMeta: { type: Function, required: true },
+  canBulkTagTemplateItems: { type: Boolean, required: true },
  canApplyThumbnail: { type: Boolean, required: true },
  templateVisibilitySaving: { type: Boolean, required: true },
  thumbFileInputRef: { type: Function, required: true },
@@ -54,7 +56,7 @@ const props = defineProps({
  selectedTemplateId: { type: String, default: '' },
 })

-defineEmits(['update:templateMetaDraftName', 'update:templateMetaDraftSlug', 'update:templateMetaDraftTags'])
+defineEmits(['update:templateMetaDraftName', 'update:templateMetaDraftSlug'])

 function setTemplateItemListElement(el) {
  props.templateItemListRef(el)
@@ -163,17 +165,6 @@ function setThumbFileElement(el) {
              @input="$emit('update:templateMetaDraftSlug', $event.target.value)"
            />
          </label>
-          <label class="templateMetaField">
-            <span class="templateMetaField__label">내부 태그</span>
-            <input
-              class="input input--dense"
-              type="text"
-              maxlength="240"
-              :value="props.templateMetaDraftTags"
-              placeholder="예: 2026Q1, 애니, 여캐릭"
-              @input="$emit('update:templateMetaDraftTags', $event.target.value)"
-            />
-          </label>
        </div>
        <div class="templateSettingsCard__meta">공개 URL: /topics/{{ props.selectedTemplate.template.slug || props.selectedTemplate.template.id }}</div>
        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': props.templateVisibilitySaving }">
@@ -183,8 +174,10 @@ function setThumbFileElement(el) {
        </label>
        <div class="templateSettingsCard__actions">
          <button class="btn btn--ghost" :disabled="!props.canSaveTemplateMeta || props.templateMetaSaving" @click="props.saveTemplateMeta">
-            {{ props.templateMetaSaving ? '저장중...' : '템플릿 메타 저장' }}
+            {{ props.templateMetaSaving ? '저장중...' : '이름/주소 저장' }}
          </button>
+          <button class="btn btn--ghost" :disabled="!props.canBulkTagTemplateItems" @click="props.openTemplateBulkTagModal">기본 아이템 공통 태그</button>
+          <button class="btn btn--ghost" @click="props.openTemplateLibraryItemModal">개별 아이템 검색</button>
          <button class="btn btn--ghost" @click="props.openTemplateSourceImportModal">기존 템플릿 가져오기</button>
          <button class="btn" :disabled="!props.canApplyThumbnail" @click="props.uploadThumbnail">썸네일 적용</button>
          <button class="btn btn--danger" @click="props.removeTemplate">템플릿 삭제</button>
@@ -232,7 +225,6 @@ function setThumbFileElement(el) {
                </div>
                <div class="itemDraftRow__body">
                  <input v-model="draft.label" class="input input--labelEdit input--dense" maxlength="60" placeholder="아이템 이름" />
-                  <input v-model="draft.tagsText" class="input input--labelEdit input--dense" maxlength="240" placeholder="내부 태그 (쉼표로 구분)" />
                  <div class="hint hint--tight">{{ draft.sourceName }}</div>
                  <div class="itemDraftRow__meta">
                    <span class="pill" :class="draft.kind === 'request' ? 'pill--requestItem' : 'pill--directFile'">
@@ -263,20 +255,17 @@ function setThumbFileElement(el) {
      <div v-if="!props.selectedTemplate?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
        <div v-else :ref="setTemplateItemListElement" class="thumbGrid">
        <div v-for="item in props.selectedTemplate.items" :key="item.id" class="thumbCard" :data-template-item-id="item.id">
-          <img class="thumb thumb--template" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
-          <input v-model="item.draftLabel" class="input input--labelEdit" placeholder="아이템 이름" data-no-drag />
-          <input v-model="item.draftTags" class="input input--labelEdit input--dense" placeholder="내부 태그 (쉼표로 구분)" data-no-drag />
-          <div class="thumbCard__actions">
-            <button
-              class="btn btn--ghost btn--small"
-              data-no-drag
-              :disabled="item.isSavingLabel || !item.draftLabel?.trim() || (item.draftLabel.trim() === item.label && (item.draftTags || '') === ((item.tags || []).join(', ')))"
-              @click="props.saveTemplateItemLabel(item)"
-            >
-              {{ item.isSavingLabel ? '저장중...' : '메타 저장' }}
-            </button>
-            <button class="btn btn--danger btn--small" data-no-drag @click="props.removeTemplateItem(item.id)">아이템 삭제</button>
+          <div class="thumbCard__media">
+            <img class="thumb thumb--template" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
+            <button class="thumbCard__deleteBtn" type="button" data-no-drag @click="props.removeTemplateItem(item)">X</button>
          </div>
+          <input
+            v-model="item.draftLabel"
+            class="input input--labelEdit"
+            placeholder="아이템 이름"
+            data-no-drag
+            @keydown.enter.prevent="props.saveTemplateItemLabel(item)"
+          />
        </div>
      </div>
    </div>
--- a/frontend/src/composables/useAdminCustomItems.js
+++ b/frontend/src/composables/useAdminCustomItems.js
@@ -1,5 +1,3 @@
-import { nextTick } from 'vue'
-
 export function useAdminCustomItems({
  api,
  toast,
@@ -26,8 +24,6 @@ export function useAdminCustomItems({
  selectedTemplateId,
  refreshCustomItems,
  loadTemplate,
-  setTab,
-  selectAdminTemplate,
  resetMessages,
  success,
  error,
@@ -76,6 +72,7 @@ export function useAdminCustomItems({
        page: 1,
        limit: 50,
        filter: 'all',
+        collapseShared: true,
      })
      customItemReplacementItems.value = (data.items || []).filter((item) => item?.id && item.id !== currentItemId)
    } catch (e) {
@@ -89,7 +86,7 @@ export function useAdminCustomItems({
  function openCustomItemModal(item) {
    modalTargetCustomItem.value = item || null
    customItemModalDraftLabel.value = item?.label || ''
-    customItemModalDraftTags.value = Array.isArray(item?.tags) ? item.tags.join(', ') : ''
+    customItemModalDraftTags.value = Array.isArray(item?.tags) ? [...item.tags] : []
    customItemModalTargetTemplateId.value = ''
    customItemReplacementQuery.value = ''
    customItemReplacementItems.value = []
@@ -104,7 +101,7 @@ export function useAdminCustomItems({
    customItemDeleteModalOpen.value = false
    modalTargetCustomItem.value = null
    customItemModalDraftLabel.value = ''
-    customItemModalDraftTags.value = ''
+    customItemModalDraftTags.value = []
    customItemModalLabelSaving.value = false
    customItemModalTargetTemplateId.value = ''
    customItemReplacementQuery.value = ''
@@ -138,15 +135,6 @@ export function useAdminCustomItems({
    customItemDeleteModalOpen.value = false
  }

-  function jumpToTemplateAdmin(templateId) {
-    if (!templateId) return
-    closeCustomItemModal()
-    setTab('template-admin')
-    nextTick(() => {
-      selectAdminTemplate(templateId)
-    })
-  }
-
  async function removeCustomItem(item = modalTargetCustomItem.value) {
    resetMessages()
    if (!item) return
@@ -203,8 +191,7 @@ export function useAdminCustomItems({
    const nextLabel = customItemModalDraftLabel.value.trim().slice(0, 60)
    const nextTags = Array.from(
      new Set(
-        String(customItemModalDraftTags.value || '')
-          .split(',')
+        (Array.isArray(customItemModalDraftTags.value) ? customItemModalDraftTags.value : [])
          .map((tag) => tag.trim().replace(/^#/, '').slice(0, 40))
          .filter(Boolean)
      )
@@ -224,7 +211,7 @@ export function useAdminCustomItems({
      item.label = data.item?.label || nextLabel
      item.tags = Array.isArray(data.item?.tags) ? data.item.tags : nextTags
      customItemModalDraftLabel.value = item.label
-      customItemModalDraftTags.value = item.tags.join(', ')
+      customItemModalDraftTags.value = [...item.tags]
      customItems.value = customItems.value.map((entry) => (entry.id === item.id ? { ...entry, label: item.label, tags: item.tags } : entry))
      toast.success('아이템 메타를 변경했어요.')
    } catch (e) {
@@ -256,6 +243,30 @@ export function useAdminCustomItems({
    }
  }

+  async function unlinkCustomItemTemplate(item = modalTargetCustomItem.value, template) {
+    resetMessages()
+    if (!item?.id || !template?.id) {
+      error.value = '제외할 템플릿 정보를 찾지 못했어요.'
+      return
+    }
+
+    const ok = window.confirm(`"${template.name}" 템플릿에서 이 이미지를 제외할까요?`)
+    if (!ok) return
+
+    try {
+      await api.unlinkAdminCustomItemTemplate(item.id, { topicId: template.id })
+      if (selectedTemplateId.value === template.id) await loadTemplate()
+      await refreshCustomItems()
+      modalTargetCustomItem.value = {
+        ...item,
+        linkedTemplates: (item.linkedTemplates || []).filter((entry) => entry.id !== template.id),
+      }
+      success.value = `"${template.name}" 템플릿에서 이미지를 제외했어요.`
+    } catch (e) {
+      error.value = '템플릿 연결 해제에 실패했어요.'
+    }
+  }
+
  async function replaceCustomItem(item = modalTargetCustomItem.value) {
    resetMessages()
    const targetItem = customItemReplacementItems.value.find((entry) => entry.id === customItemReplacementTargetId.value)
@@ -316,12 +327,12 @@ export function useAdminCustomItems({
    closeCustomItemModal,
    openCustomItemDeleteModal,
    closeCustomItemDeleteModal,
-    jumpToTemplateAdmin,
    removeCustomItem,
    removeUnusedCustomItems,
    showUnusedCustomItems,
    saveCustomItemModalLabel,
    promoteCustomItem,
+    unlinkCustomItemTemplate,
    refreshReplacementCandidates,
    replaceCustomItem,
    restoreCustomItem,
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -77,9 +77,9 @@ export const api = {
    request(`/api/admin/templates/${encodeURIComponent(templateId)}`, { method: 'PATCH', body: payload }),
  updateAdminTemplateItem: (templateId, itemId, payload) =>
    request(`/api/admin/templates/${encodeURIComponent(templateId)}/items/${encodeURIComponent(itemId)}`, { method: 'PATCH', body: payload }),
-  listAdminCustomItems: ({ q = '', page = 1, limit = 50, filter = 'all' } = {}) =>
+  listAdminCustomItems: ({ q = '', page = 1, limit = 50, filter = 'all', collapseShared = false } = {}) =>
    request(
-      `/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}&filter=${encodeURIComponent(filter)}`
+      `/api/admin/custom-items?q=${encodeURIComponent(q)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}&filter=${encodeURIComponent(filter)}&collapseShared=${encodeURIComponent(collapseShared ? '1' : '0')}`
    ),
  listAdminTierLists: ({ q = '', topicId = '', sort = 'recent', minFavorites = 0, page = 1, limit = 50 } = {}) =>
    request(`/api/admin/tierlists?q=${encodeURIComponent(q)}&topicId=${encodeURIComponent(topicId)}&sort=${encodeURIComponent(sort)}&minFavorites=${encodeURIComponent(minFavorites)}&page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`),
@@ -104,6 +104,8 @@ export const api = {
  cleanupAdminUnusedImageAssets: (payload) => request('/api/admin/image-assets/cleanup', { method: 'POST', body: payload || {} }),
  promoteAdminTemplateItem: (itemId, payload) =>
    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/promote`, { method: 'POST', body: payload }),
+  unlinkAdminCustomItemTemplate: (itemId, payload) =>
+    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/unlink-template`, { method: 'POST', body: payload }),
  replaceAdminCustomItem: (itemId, payload) =>
    request(`/api/admin/custom-items/${encodeURIComponent(itemId)}/replace`, { method: 'POST', body: payload }),
  restoreAdminCustomItem: (itemId) =>
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -6,6 +6,7 @@ import { editorPath, userProfilePath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import deleteIcon from '../assets/icons/delete.svg'
 import SvgIcon from '../components/SvgIcon.vue'
+import TagBadgeInput from '../components/TagBadgeInput.vue'
 import AdminFeaturedSection from '../components/admin/AdminFeaturedSection.vue'
 import AdminTemplatesSection from '../components/admin/AdminTemplatesSection.vue'
 import AdminItemsSection from '../components/admin/AdminItemsSection.vue'
@@ -73,6 +74,14 @@ const importModalNewTemplateName = ref('')
 const templateSourceImportModalOpen = ref(false)
 const templateSourceImportQuery = ref('')
 const templateSourceImportSelectedIds = ref([])
+const templateLibraryItemModalOpen = ref(false)
+const templateLibraryItemQuery = ref('')
+const templateLibraryItemResults = ref([])
+const templateLibraryItemSelectedIds = ref([])
+const templateLibraryItemLoading = ref(false)
+const templateBulkTagModalOpen = ref(false)
+const templateBulkTagDrafts = ref([])
+const templateBulkTagSaving = ref(false)
 const previewModalOpen = ref(false)
 const previewTierList = ref(null)
 const adminTierListManageModalOpen = ref(false)
@@ -83,6 +92,7 @@ const userDeleteModalOpen = ref(false)
 const userRoleModalOpen = ref(false)
 const customItemModalOpen = ref(false)
 const customItemDeleteModalOpen = ref(false)
+const templateItemDeleteModalOpen = ref(false)
 const customItemModalHistoryActive = ref(false)
 const modalTargetUser = ref(null)
 const modalPasswordDraft = ref('')
@@ -91,8 +101,10 @@ const modalUserDraftEmail = ref('')
 const modalUserDraftNickname = ref('')
 const modalUserDraftIsAdmin = ref(false)
 const modalTargetCustomItem = ref(null)
+const modalTargetTemplateItem = ref(null)
+const modalTargetTemplateItemUsage = ref({ totalCount: 0, publicCount: 0, privateCount: 0 })
 const customItemModalDraftLabel = ref('')
-const customItemModalDraftTags = ref('')
+const customItemModalDraftTags = ref([])
 const customItemModalLabelSaving = ref(false)
 const modalTargetAdminTierList = ref(null)
 const adminTierListDraftTitle = ref('')
@@ -121,7 +133,6 @@ const newTemplateName = ref('')
 const newTemplateIsPublic = ref(false)
 const templateMetaDraftName = ref('')
 const templateMetaDraftSlug = ref('')
-const templateMetaDraftTags = ref('')
 const templateMetaSaving = ref(false)
 const templateVisibilitySaving = ref(false)

@@ -190,10 +201,10 @@ function normalizeAdminSrc(src) {
 }

 function parseAdminTagsText(value) {
+  const values = Array.isArray(value) ? value : String(value || '').split(',')
  return Array.from(
    new Set(
-      String(value || '')
-        .split(',')
+      values
        .map((tag) => tag.trim().replace(/^#/, '').slice(0, 40))
        .filter(Boolean)
    )
@@ -206,16 +217,15 @@ const canSaveTemplateMeta = computed(() => {
  if (!template?.id) return false
  const nextName = templateMetaDraftName.value.trim()
  const nextSlug = templateMetaDraftSlug.value.trim()
-  const nextTags = parseAdminTagsText(templateMetaDraftTags.value)
  return (
    !!nextName &&
    !!nextSlug &&
    (nextName !== (template.name || '') ||
-      nextSlug !== (template.slug || template.id || '') ||
-      JSON.stringify(nextTags) !== JSON.stringify(Array.isArray(template.tags) ? template.tags : []))
+      nextSlug !== (template.slug || template.id || ''))
  )
 })
 const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedTemplateId.value)
+const canBulkTagTemplateItems = computed(() => !!selectedTemplate.value?.items?.length)
 const canAddItem = computed(() => uploadItemDrafts.value.length > 0 && uploadItemDrafts.value.every((item) => !!item.label.trim()) && !!selectedTemplateId.value)
 const stagedRequestDraftCount = computed(() => uploadItemDrafts.value.filter((item) => item.kind === 'request').length)
 const appliedRequestItemCount = computed(() => {
@@ -241,7 +251,7 @@ const filteredTemplatePickerTemplates = computed(() => {
  const query = templatePickerQuery.value.trim().toLowerCase()
  const list = templates.value.filter((template) => {
    if (!query) return true
-    const haystack = `${template.name || ''} ${template.slug || ''} ${template.id || ''} ${(template.tags || []).join(' ')}`.toLowerCase()
+    const haystack = `${template.name || ''} ${template.slug || ''} ${template.id || ''}`.toLowerCase()
    return haystack.includes(query)
  })

@@ -255,13 +265,16 @@ const customItemReplacementTarget = computed(
  () => customItemReplacementItems.value.find((item) => item.id === customItemReplacementTargetId.value) || null
 )
 const importModalItemCount = computed(() => importModalItems.value.length)
+const selectedTemplateLibraryItems = computed(() =>
+  templateLibraryItemResults.value.filter((item) => templateLibraryItemSelectedIds.value.includes(item.id))
+)
 const filteredTemplateSourceImportTemplates = computed(() => {
  const query = templateSourceImportQuery.value.trim().toLowerCase()
  return templates.value
    .filter((template) => template.id !== selectedTemplateId.value)
    .filter((template) => {
      if (!query) return true
-      const haystack = `${template.name || ''} ${template.slug || ''} ${template.id || ''} ${(template.tags || []).join(' ')}`.toLowerCase()
+      const haystack = `${template.name || ''} ${template.slug || ''} ${template.id || ''}`.toLowerCase()
      return haystack.includes(query)
    })
    .sort((a, b) => Number(b.createdAt || 0) - Number(a.createdAt || 0))
@@ -357,8 +370,13 @@ const isAnyModalOpen = computed(
    userDeleteModalOpen.value ||
    userRoleModalOpen.value ||
    importModalOpen.value ||
+    templateSourceImportModalOpen.value ||
+    templateLibraryItemModalOpen.value ||
+    templateBulkTagModalOpen.value ||
+    templatePickerModalOpen.value ||
    customItemModalOpen.value ||
    customItemDeleteModalOpen.value ||
+    templateItemDeleteModalOpen.value ||
    adminTierListManageModalOpen.value ||
    imageResetModalOpen.value ||
    previewModalOpen.value
@@ -401,6 +419,26 @@ function handleAdminPopState() {

 function handleAdminKeydown(event) {
  if (event.key !== 'Escape') return
+  if (previewModalOpen.value) {
+    event.preventDefault()
+    closePreviewModal()
+    return
+  }
+  if (imageResetModalOpen.value) {
+    event.preventDefault()
+    closeImageResetModal()
+    return
+  }
+  if (adminTierListManageModalOpen.value) {
+    event.preventDefault()
+    closeAdminTierListManageModal()
+    return
+  }
+  if (templateItemDeleteModalOpen.value) {
+    event.preventDefault()
+    closeTemplateItemDeleteModal()
+    return
+  }
  if (customItemDeleteModalOpen.value) {
    event.preventDefault()
    closeCustomItemDeleteModal()
@@ -411,9 +449,55 @@ function handleAdminKeydown(event) {
    closeCustomItemModal()
    return
  }
-  if (previewModalOpen.value) {
+  if (templatePickerModalOpen.value) {
    event.preventDefault()
-    closePreviewModal()
+    closeTemplatePickerModal()
+    return
+  }
+  if (templateBulkTagModalOpen.value) {
+    event.preventDefault()
+    closeTemplateBulkTagModal()
+    return
+  }
+  if (templateLibraryItemModalOpen.value) {
+    event.preventDefault()
+    closeTemplateLibraryItemModal()
+    return
+  }
+  if (templateSourceImportModalOpen.value) {
+    event.preventDefault()
+    closeTemplateSourceImportModal()
+    return
+  }
+  if (importModalOpen.value) {
+    event.preventDefault()
+    closeTierListImportModal()
+    return
+  }
+  if (userRoleModalOpen.value) {
+    event.preventDefault()
+    closeUserRoleModal()
+    return
+  }
+  if (userDeleteModalOpen.value) {
+    event.preventDefault()
+    closeUserDeleteModal()
+    return
+  }
+  if (userPasswordModalOpen.value) {
+    event.preventDefault()
+    closeUserPasswordModal()
+    return
+  }
+  if (userEditModalOpen.value) {
+    event.preventDefault()
+    closeUserEditModal()
+    return
+  }
+  if (templateCreateModalOpen.value) {
+    event.preventDefault()
+    closeTemplateCreateModal()
+    return
  }
 }

@@ -516,7 +600,6 @@ watch(
  async (templateId) => {
    templateMetaDraftName.value = selectedTemplate.value?.template?.name || ''
    templateMetaDraftSlug.value = selectedTemplate.value?.template?.slug || selectedTemplate.value?.template?.id || ''
-    templateMetaDraftTags.value = Array.isArray(selectedTemplate.value?.template?.tags) ? selectedTemplate.value.template.tags.join(', ') : ''
    await refreshSelectedTemplateTierListStats(templateId)
  },
  { immediate: true }
@@ -883,6 +966,7 @@ async function refreshCustomItems() {
      page: customItemPage.value,
      limit: customItemLimit.value,
      filter: customItemFilter.value,
+      collapseShared: !['user', 'template', 'unused-user', 'replaced-user'].includes(customItemFilter.value),
    })
    customItems.value = data.items || []
    customItemTotal.value = data.total || 0
@@ -1088,12 +1172,12 @@ const {
  closeCustomItemModal,
  openCustomItemDeleteModal,
  closeCustomItemDeleteModal,
-  jumpToTemplateAdmin,
  removeCustomItem,
  removeUnusedCustomItems,
  showUnusedCustomItems,
  saveCustomItemModalLabel,
  promoteCustomItem,
+  unlinkCustomItemTemplate,
  refreshReplacementCandidates,
  replaceCustomItem,
  restoreCustomItem,
@@ -1123,8 +1207,6 @@ const {
  selectedTemplateId,
  refreshCustomItems,
  loadTemplate,
-  setTab,
-  selectAdminTemplate,
  resetMessages,
  success,
  error,
@@ -1299,7 +1381,6 @@ async function saveTemplateMeta() {
    const data = await api.updateAdminTemplate(selectedTemplate.value.template.id, {
      name: templateMetaDraftName.value.trim(),
      slug: templateMetaDraftSlug.value.trim().toLowerCase(),
-      tags: parseAdminTagsText(templateMetaDraftTags.value),
      isPublic: !!selectedTemplate.value.template.isPublic,
    })
    const nextTemplate = data.template || {}
@@ -1312,9 +1393,8 @@ async function saveTemplateMeta() {
    }
    templateMetaDraftName.value = nextTemplate.name || selectedTemplate.value.template.name || ''
    templateMetaDraftSlug.value = nextTemplate.slug || selectedTemplate.value.template.slug || selectedTemplate.value.template.id || ''
-    templateMetaDraftTags.value = Array.isArray(nextTemplate.tags) ? nextTemplate.tags.join(', ') : templateMetaDraftTags.value
    await refreshTemplates()
-    success.value = '템플릿 메타를 저장했어요.'
+    success.value = '템플릿 이름과 주소를 저장했어요.'
  } catch (e) {
    const errorCode = e?.data?.error || ''
    if (errorCode === 'topic_slug_taken') {
@@ -1325,12 +1405,69 @@ async function saveTemplateMeta() {
      error.value = 'slug는 영문 소문자, 숫자, 하이픈만 사용할 수 있어요.'
      return
    }
-    error.value = '템플릿 메타를 저장하지 못했어요.'
+    error.value = '템플릿 이름과 주소를 저장하지 못했어요.'
  } finally {
    templateMetaSaving.value = false
  }
 }

+function openTemplateBulkTagModal() {
+  resetMessages()
+  if (!selectedTemplate.value?.items?.length) {
+    error.value = '태그를 추가할 기본 아이템이 없어요.'
+    return
+  }
+  templateBulkTagDrafts.value = []
+  templateBulkTagSaving.value = false
+  templateBulkTagModalOpen.value = true
+}
+
+function closeTemplateBulkTagModal() {
+  templateBulkTagModalOpen.value = false
+  templateBulkTagDrafts.value = []
+  templateBulkTagSaving.value = false
+}
+
+async function applyTemplateBulkTags() {
+  resetMessages()
+  if (!selectedTemplateId.value || !selectedTemplate.value?.items?.length) {
+    error.value = '태그를 적용할 템플릿을 먼저 선택해주세요.'
+    return
+  }
+
+  const nextTags = parseAdminTagsText(templateBulkTagDrafts.value)
+  if (!nextTags.length) {
+    error.value = '추가할 태그를 하나 이상 입력해주세요.'
+    return
+  }
+
+  try {
+    templateBulkTagSaving.value = true
+    const items = selectedTemplate.value.items || []
+    let updatedCount = 0
+
+    for (const item of items) {
+      const mergedTags = Array.from(new Set([...(Array.isArray(item.tags) ? item.tags : []), ...nextTags]))
+      if (JSON.stringify(mergedTags) === JSON.stringify(Array.isArray(item.tags) ? item.tags : [])) continue
+      const data = await api.updateAdminTemplateItem(selectedTemplateId.value, item.id, {
+        label: item.label,
+        tags: mergedTags,
+      })
+      item.tags = Array.isArray(data.item?.tags) ? data.item.tags : mergedTags
+      updatedCount += 1
+    }
+
+    closeTemplateBulkTagModal()
+    success.value = updatedCount
+      ? `기본 아이템 ${updatedCount}개에 공통 태그를 추가했어요.`
+      : '이미 같은 태그가 들어 있어서 바뀐 항목이 없었어요.'
+  } catch (e) {
+    error.value = '기본 아이템 공통 태그 추가에 실패했어요.'
+  } finally {
+    templateBulkTagSaving.value = false
+  }
+}
+
 async function toggleSelectedTemplateVisibility(nextValue) {
  if (!selectedTemplate.value?.template?.id || templateVisibilitySaving.value) return
  const previous = !!selectedTemplate.value.template.isPublic
@@ -1353,12 +1490,26 @@ async function toggleSelectedTemplateVisibility(nextValue) {
  }
 }

-async function removeTemplateItem(itemId) {
+function closeTemplateItemDeleteModal() {
+  templateItemDeleteModalOpen.value = false
+  modalTargetTemplateItem.value = null
+  modalTargetTemplateItemUsage.value = { totalCount: 0, publicCount: 0, privateCount: 0 }
+}
+
+function templateItemDeleteImpactText() {
+  const usage = modalTargetTemplateItemUsage.value || { totalCount: 0, publicCount: 0, privateCount: 0 }
+  if (usage.totalCount) {
+    return `이 아이템은 이미 저장된 티어표 ${usage.totalCount}개(공개 ${usage.publicCount}개, 비공개 ${usage.privateCount}개)에서 사용 중이에요. 기존 저장 티어표에는 영향을 주지 않고, 이후 새로 만드는 티어표에서만 제외됩니다.`
+  }
+  return '이 기본 아이템을 삭제할까요? 기존 저장 티어표에는 영향을 주지 않고, 이후 새로 만드는 티어표에서만 제외됩니다.'
+}
+
+async function removeTemplateItem(item) {
  resetMessages()
-  if (!selectedTemplateId.value) return
+  if (!selectedTemplateId.value || !item?.id) return
  try {
    const usageRes = await fetch(
-      toApiUrl(`/api/admin/templates/${encodeURIComponent(selectedTemplateId.value)}/items/${encodeURIComponent(itemId)}/usage`),
+      toApiUrl(`/api/admin/templates/${encodeURIComponent(selectedTemplateId.value)}/items/${encodeURIComponent(item.id)}/usage`),
      {
        credentials: 'include',
      }
@@ -1366,16 +1517,22 @@ async function removeTemplateItem(itemId) {
    if (!usageRes.ok) throw new Error('usage_failed')

    const usageData = await usageRes.json()
-    const usage = usageData?.usage || { totalCount: 0, publicCount: 0, privateCount: 0 }
-    const impactMessage = usage.totalCount
-      ? `이 아이템은 이미 저장된 티어표 ${usage.totalCount}개(공개 ${usage.publicCount}개, 비공개 ${usage.privateCount}개)에서 사용 중이에요.\n기존 티어표에는 영향을 주지 않고, 이후 새로 만드는 티어표에서만 제외됩니다.\n정말 삭제할까요?`
-      : '이 기본 아이템을 삭제할까요?\n기존 저장 티어표에는 영향을 주지 않고, 이후 새로 만드는 티어표에서만 제외됩니다.'
-    const ok = window.confirm(impactMessage)
-    if (!ok) return
+    modalTargetTemplateItem.value = item
+    modalTargetTemplateItemUsage.value = usageData?.usage || { totalCount: 0, publicCount: 0, privateCount: 0 }
+    templateItemDeleteModalOpen.value = true
+  } catch (e) {
+    error.value = '템플릿 기본 아이템 삭제에 실패했어요.'
+  }
+}

+async function confirmTemplateItemDelete() {
+  resetMessages()
+  if (!selectedTemplateId.value || !modalTargetTemplateItem.value?.id) return
+
+  try {
    const previousScrollY = window.scrollY
    const res = await fetch(
-      toApiUrl(`/api/admin/templates/${encodeURIComponent(selectedTemplateId.value)}/items/${encodeURIComponent(itemId)}`),
+      toApiUrl(`/api/admin/templates/${encodeURIComponent(selectedTemplateId.value)}/items/${encodeURIComponent(modalTargetTemplateItem.value.id)}`),
      {
        method: 'DELETE',
        credentials: 'include',
@@ -1383,6 +1540,7 @@ async function removeTemplateItem(itemId) {
    )
    if (!res.ok) throw new Error('failed')

+    closeTemplateItemDeleteModal()
    await loadTemplate()
    await nextTick()
    window.scrollTo({ top: previousScrollY, behavior: 'auto' })
@@ -1396,23 +1554,24 @@ async function saveTemplateItemLabel(item) {
  resetMessages()
  if (!selectedTemplateId.value) return
  const nextLabel = (item.draftLabel || '').trim()
-  const nextTags = parseAdminTagsText(item.draftTags || '')
  if (!nextLabel) {
    error.value = '아이템 이름을 입력해주세요.'
    return
  }
-  if (nextLabel === item.label && JSON.stringify(nextTags) === JSON.stringify(Array.isArray(item.tags) ? item.tags : [])) return
+  if (nextLabel === item.label) return

  try {
    item.isSavingLabel = true
-    const data = await api.updateAdminTemplateItem(selectedTemplateId.value, item.id, { label: nextLabel, tags: nextTags })
+    const data = await api.updateAdminTemplateItem(selectedTemplateId.value, item.id, {
+      label: nextLabel,
+      tags: Array.isArray(item.tags) ? item.tags : [],
+    })
    item.label = data.item.label
    item.draftLabel = data.item.label
    item.tags = Array.isArray(data.item.tags) ? data.item.tags : []
-    item.draftTags = item.tags.join(', ')
-    success.value = '기본 아이템 메타를 수정했어요.'
+    success.value = '기본 아이템 이름을 수정했어요.'
  } catch (e) {
-    error.value = '기본 아이템 메타 수정에 실패했어요.'
+    error.value = '기본 아이템 이름 수정에 실패했어요.'
  } finally {
    item.isSavingLabel = false
  }
@@ -1773,6 +1932,85 @@ function closeTemplateSourceImportModal() {
  templateSourceImportQuery.value = ''
 }

+function openTemplateLibraryItemModal() {
+  resetMessages()
+  if (!selectedTemplateId.value) {
+    error.value = '먼저 아이템을 받을 템플릿을 선택해주세요.'
+    return
+  }
+  templateLibraryItemQuery.value = ''
+  templateLibraryItemResults.value = []
+  templateLibraryItemSelectedIds.value = []
+  templateLibraryItemLoading.value = false
+  templateLibraryItemModalOpen.value = true
+}
+
+function closeTemplateLibraryItemModal() {
+  templateLibraryItemModalOpen.value = false
+  templateLibraryItemQuery.value = ''
+  templateLibraryItemResults.value = []
+  templateLibraryItemSelectedIds.value = []
+  templateLibraryItemLoading.value = false
+}
+
+function toggleTemplateLibraryItemSelection(itemId) {
+  if (!itemId) return
+  if (templateLibraryItemSelectedIds.value.includes(itemId)) {
+    templateLibraryItemSelectedIds.value = templateLibraryItemSelectedIds.value.filter((id) => id !== itemId)
+    return
+  }
+  templateLibraryItemSelectedIds.value = [...templateLibraryItemSelectedIds.value, itemId]
+}
+
+async function searchTemplateLibraryItems() {
+  resetMessages()
+  const query = templateLibraryItemQuery.value.trim()
+  if (!query) {
+    templateLibraryItemResults.value = []
+    templateLibraryItemSelectedIds.value = []
+    return
+  }
+
+  try {
+    templateLibraryItemLoading.value = true
+    const data = await api.listAdminCustomItems({
+      q: query,
+      page: 1,
+      limit: 50,
+      filter: 'library',
+      collapseShared: true,
+    })
+    templateLibraryItemResults.value = (data.items || []).filter((item) => item?.id)
+    templateLibraryItemSelectedIds.value = templateLibraryItemSelectedIds.value.filter((id) =>
+      templateLibraryItemResults.value.some((item) => item.id === id)
+    )
+  } catch (e) {
+    templateLibraryItemResults.value = []
+    templateLibraryItemSelectedIds.value = []
+    error.value = '개별 아이템 검색에 실패했어요.'
+  } finally {
+    templateLibraryItemLoading.value = false
+  }
+}
+
+async function confirmTemplateLibraryItemImport() {
+  resetMessages()
+  if (!selectedTemplateId.value) {
+    error.value = '아이템을 받을 템플릿을 먼저 선택해주세요.'
+    return
+  }
+  if (!selectedTemplateLibraryItems.value.length) {
+    error.value = '가져올 아이템을 하나 이상 선택해주세요.'
+    return
+  }
+
+  const stagedCount = mergeLibraryItemsIntoDrafts(selectedTemplateLibraryItems.value, '라이브러리 검색')
+  closeTemplateLibraryItemModal()
+  success.value = stagedCount
+    ? `${stagedCount}개의 아이템을 초안 목록에 추가했어요. 필요 없는 항목은 제외한 뒤 저장하면 됩니다.`
+    : '추가로 가져올 새 아이템이 없었어요.'
+}
+
 function toggleTemplateSourceImportSelection(templateId) {
  if (!templateId) return
  if (templateSourceImportSelectedIds.value.includes(templateId)) {
@@ -1947,16 +2185,18 @@ function openUserProfile(user) {
              :applied-request-item-count="appliedRequestItemCount"
              :open-template-create-modal="openTemplateCreateModal"
              :open-template-source-import-modal="openTemplateSourceImportModal"
+              :open-template-library-item-modal="openTemplateLibraryItemModal"
+              :open-template-bulk-tag-modal="openTemplateBulkTagModal"
              :is-template-loading="isTemplateLoading"
              :has-selected-template="hasSelectedTemplate"
              :selected-template="selectedTemplate"
              :display-thumbnail-url="displayThumbnailUrl"
              v-model:template-meta-draft-name="templateMetaDraftName"
              v-model:template-meta-draft-slug="templateMetaDraftSlug"
-              v-model:template-meta-draft-tags="templateMetaDraftTags"
              :template-meta-saving="templateMetaSaving"
              :can-save-template-meta="canSaveTemplateMeta"
              :save-template-meta="saveTemplateMeta"
+              :can-bulk-tag-template-items="canBulkTagTemplateItems"
              :can-apply-thumbnail="canApplyThumbnail"
              :template-visibility-saving="templateVisibilitySaving"
              :thumb-file-input-ref="setThumbFileInputRef"
@@ -2198,7 +2438,7 @@ function openUserProfile(user) {
                </div>

                <div class="modalCard__form">
-                  <input v-model="templateSourceImportQuery" class="input" placeholder="템플릿 이름, slug, 태그 검색" />
+                  <input v-model="templateSourceImportQuery" class="input" placeholder="템플릿 이름 또는 slug 검색" />
                </div>

                <div class="templateImportList">
@@ -2212,7 +2452,6 @@ function openUserProfile(user) {
                  >
                    <span class="adminTemplatePicker__name">{{ template.name }}</span>
                    <span class="adminTemplatePicker__meta">{{ template.slug || template.id }}</span>
-                    <span v-if="template.tags?.length" class="adminTemplatePicker__meta">#{{ template.tags.join(' #') }}</span>
                  </button>
                  <div v-if="!filteredTemplateSourceImportTemplates.length" class="hint">조건에 맞는 템플릿이 없어요.</div>
                </div>
@@ -2224,6 +2463,81 @@ function openUserProfile(user) {
              </div>
            </div>

+            <div v-if="templateLibraryItemModalOpen" class="modalOverlay" @click.self="closeTemplateLibraryItemModal">
+              <div class="modalCard modalCard--import" role="dialog" aria-modal="true">
+                <div class="modalCard__title">개별 아이템 검색</div>
+                <div class="modalCard__desc">
+                  이름, 파일명, 태그로 검색해서 현재 템플릿 초안 목록에 필요한 아이템만 모아둘 수 있어요.
+                </div>
+
+                <div class="modalCard__form modalCard__form--search">
+                  <input
+                    v-model="templateLibraryItemQuery"
+                    class="input"
+                    placeholder="아이템 이름, 파일명, 태그 검색"
+                    @keydown.enter.prevent="searchTemplateLibraryItems"
+                  />
+                  <button class="btn btn--ghost" type="button" @click="searchTemplateLibraryItems">
+                    {{ templateLibraryItemLoading ? '검색중...' : '검색' }}
+                  </button>
+                </div>
+
+                <div class="templateImportList">
+                  <div v-if="!templateLibraryItemQuery.trim() && !templateLibraryItemLoading" class="hint">
+                    검색 전에는 목록을 보여주지 않아요. 필요한 키워드로 직접 찾아서 추가해주세요.
+                  </div>
+                  <button
+                    v-for="item in templateLibraryItemResults"
+                    :key="item.id"
+                    type="button"
+                    class="adminTemplatePicker__item"
+                    :class="{ 'adminTemplatePicker__item--active': templateLibraryItemSelectedIds.includes(item.id) }"
+                    @click="toggleTemplateLibraryItemSelection(item.id)"
+                  >
+                    <span class="customItemModal__replacementRow">
+                      <img class="customItemModal__replacementThumb" :src="toApiUrl(item.src)" :alt="item.label" />
+                      <span class="customItemModal__replacementCopy">
+                        <span class="adminTemplatePicker__name">{{ item.label }}</span>
+                        <span class="adminTemplatePicker__meta">{{ item.sourceLabel }} · {{ item.ownerName || '알 수 없음' }}</span>
+                        <span v-if="item.tags?.length" class="adminTemplatePicker__meta">#{{ item.tags.join(' #') }}</span>
+                      </span>
+                    </span>
+                  </button>
+                  <div v-if="templateLibraryItemQuery.trim() && !templateLibraryItemLoading && !templateLibraryItemResults.length" class="hint">
+                    조건에 맞는 아이템이 없어요.
+                  </div>
+                </div>
+
+                <div class="modalCard__actions">
+                  <button class="btn btn--ghost" @click="closeTemplateLibraryItemModal">취소</button>
+                  <button class="btn btn--primary" :disabled="!selectedTemplateLibraryItems.length" @click="confirmTemplateLibraryItemImport">
+                    초안으로 가져오기
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div v-if="templateBulkTagModalOpen" class="modalOverlay" @click.self="closeTemplateBulkTagModal">
+              <div class="modalCard" role="dialog" aria-modal="true">
+                <div class="modalCard__title">기본 아이템 공통 태그</div>
+                <div class="modalCard__desc">
+                  현재 템플릿의 기본 아이템 전체에 같은 태그를 한 번에 추가합니다. 이미 있는 태그는 중복 저장하지 않아요.
+                </div>
+                <div class="modalCard__form">
+                  <label class="field">
+                    <span class="field__label">추가할 태그</span>
+                    <TagBadgeInput v-model="templateBulkTagDrafts" placeholder="태그 입력 후 Enter" :disabled="templateBulkTagSaving" />
+                  </label>
+                </div>
+                <div class="modalCard__actions">
+                  <button class="btn btn--ghost" :disabled="templateBulkTagSaving" @click="closeTemplateBulkTagModal">취소</button>
+                  <button class="btn btn--primary" :disabled="templateBulkTagSaving || !templateBulkTagDrafts.length" @click="applyTemplateBulkTags">
+                    {{ templateBulkTagSaving ? '적용중...' : '공통 태그 추가' }}
+                  </button>
+                </div>
+              </div>
+            </div>
+
            <div v-if="customItemModalOpen" class="modalOverlay" @click.self="closeCustomItemModal">
              <div class="modalCard modalCard--customItem" role="dialog" aria-modal="true">
                <div v-if="modalTargetCustomItem" class="customItemModal">
@@ -2239,7 +2553,6 @@ function openUserProfile(user) {
                    </div>
                    <div class="customItemModal__pickerActions">
                      <button class="btn btn--ghost" type="button" @click="openTemplatePickerModal('custom-item-target')">템플릿 선택</button>
-                      <button class="btn btn--ghost btn--small customItemModal__createTemplateButton" type="button" @click="openTemplateCreateModal">새 템플릿 만들기</button>
                    </div>
                    <template v-if="canReplaceModalTarget">
                      <div class="customItemModal__pickerHead">
@@ -2309,7 +2622,7 @@ function openUserProfile(user) {
                        </label>
                        <label v-if="modalTargetCustomItem.sourceType !== 'asset'" class="field">
                          <span class="field__label">내부 태그</span>
-                          <input v-model="customItemModalDraftTags" class="field__input" type="text" maxlength="240" placeholder="예: 여캐릭, 귀멸, 2026Q1" />
+                          <TagBadgeInput v-model="customItemModalDraftTags" placeholder="태그 입력 후 Enter" />
                        </label>
                        <button class="btn btn--ghost customItemModal__renameButton" type="button" :disabled="customItemModalLabelSaving || !customItemModalDraftLabel.trim() || (customItemModalDraftLabel.trim() === modalTargetCustomItem.label && (modalTargetCustomItem.sourceType === 'asset' || JSON.stringify(parseAdminTagsText(customItemModalDraftTags)) === JSON.stringify(modalTargetCustomItem.tags || [])))" @click="saveCustomItemModalLabel">
                          {{ customItemModalLabelSaving ? '저장중...' : '메타 저장' }}
@@ -2325,7 +2638,10 @@ function openUserProfile(user) {
                    <div class="customItemModal__linked">
                      <span class="customItemModal__label">이 이미지를 사용하는 템플릿</span>
                      <div v-if="visibleLinkedTemplates.length" class="customItemModal__chips">
-                        <button v-for="template in visibleLinkedTemplates" :key="template.id" type="button" class="pill pill--link" @click="jumpToTemplateAdmin(template.id)">{{ template.name }}</button>
+                        <span v-for="template in visibleLinkedTemplates" :key="template.id" class="customItemModal__templateChip">
+                          <span>{{ template.name }}</span>
+                          <button class="customItemModal__templateChipRemove" type="button" @click="unlinkCustomItemTemplate(modalTargetCustomItem, template)">X</button>
+                        </span>
                      </div>
                      <div v-else class="hint hint--tight">아직 템플릿에 연결된 항목이 없어요.</div>
                    </div>
@@ -2424,6 +2740,20 @@ function openUserProfile(user) {
              </div>
            </div>

+            <div v-if="templateItemDeleteModalOpen" class="modalOverlay" @click.self="closeTemplateItemDeleteModal">
+              <div class="modalCard" role="dialog" aria-modal="true">
+                <div class="modalCard__title">기본 아이템 삭제</div>
+                <div class="modalCard__desc">
+                  <strong>{{ modalTargetTemplateItem?.label || '선택한 아이템' }}</strong>
+                  {{ ' ' }}{{ templateItemDeleteImpactText() }}
+                </div>
+                <div class="modalCard__actions">
+                  <button class="btn btn--ghost" @click="closeTemplateItemDeleteModal">취소</button>
+                  <button class="btn btn--danger" @click="confirmTemplateItemDelete">삭제</button>
+                </div>
+              </div>
+            </div>
+
            <div v-if="adminTierListManageModalOpen" class="modalOverlay" @click.self="closeAdminTierListManageModal">
              <div class="modalCard" role="dialog" aria-modal="true">
                <div class="modalCard__title">티어표 관리</div>
@@ -2974,6 +3304,10 @@ function openUserProfile(user) {
  max-height: 360px;
  overflow: auto;
 }
+.adminUiScope .modalCard__form--search {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
 .adminUiScope .adminTemplatePicker__name {
  font-size: 13px;
  font-weight: 800;
@@ -3427,6 +3761,7 @@ function openUserProfile(user) {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
+  min-width: 0;
 }
 .adminUiScope .templateSettingsCard__media {
  min-width: 0;
@@ -3435,6 +3770,7 @@ function openUserProfile(user) {
  display: grid;
  gap: 14px;
  align-content: center;
+  min-width: 0;
 }
 .adminUiScope .templateSettingsCard__meta {
  color: var(--theme-text-soft);
@@ -3444,9 +3780,30 @@ function openUserProfile(user) {
 }
 .adminUiScope .templateSettingsCard__actions {
  display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
+  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
+  min-width: 0;
+}
+.adminUiScope .templateSettingsCard__actions > .btn {
+  flex: 0 0 auto;
+  height: auto;
+  max-width: 100%;
+  white-space: normal;
+}
+.adminUiScope .templateSettingsCard__actions > a.btn {
+  height: auto;
+  max-width: 100%;
+  white-space: normal;
+}
+.adminUiScope .templateMetaForm,
+.adminUiScope .templateMetaField {
+  min-width: 0;
+}
+.adminUiScope .templateMetaField .input {
+  width: 100%;
+  min-width: 0;
 }
 .adminUiScope .selectedThumb {
  width: min(100%, 256px);
@@ -3674,6 +4031,7 @@ function openUserProfile(user) {
  gap: 12px;
 }
 .adminUiScope .thumbCard {
+  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: var(--theme-surface-soft);
@@ -3684,6 +4042,9 @@ function openUserProfile(user) {
  -webkit-user-drag: none;
  touch-action: none;
 }
+.adminUiScope .thumbCard__media {
+  position: relative;
+}
 .adminUiScope .thumbCard:active {
  cursor: grabbing;
 }
@@ -3706,10 +4067,25 @@ function openUserProfile(user) {
  opacity: 0.9;
  word-break: break-word;
 }
-.adminUiScope .thumbCard__actions {
-  margin-top: 10px;
+.adminUiScope .thumbCard__deleteBtn {
+  position: absolute;
+  top: -24px;
+  right: -24px;
+  width: 28px;
+  height: 28px;
  display: grid;
-  gap: 8px;
+  place-items: center;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(9, 13, 22, 0.82);
+  color: var(--theme-text);
+  font-size: 11px;
+  font-weight: 900;
+  cursor: pointer;
+  z-index: 2;
+}
+.adminUiScope .thumbCard__deleteBtn:hover {
+  background: rgba(190, 24, 24, 0.9);
 }
 .adminUiScope .thumbLabel--preview {
  text-align: center;
@@ -3888,9 +4264,6 @@ function openUserProfile(user) {
  display: grid;
  gap: 2px;
 }
-.adminUiScope .customItemModal__createTemplateButton {
-  justify-self: start;
-}
 .adminUiScope .customItemModal__body {
  min-width: 0;
  min-height: 0;
@@ -3975,6 +4348,26 @@ function openUserProfile(user) {
  flex-wrap: wrap;
  gap: 8px;
 }
+.adminUiScope .customItemModal__templateChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 11px;
+  border-radius: 999px;
+  background: var(--theme-pill-bg);
+  border: 1px solid var(--theme-border);
+  font-size: 12px;
+  color: var(--theme-text);
+}
+.adminUiScope .customItemModal__templateChipRemove {
+  border: 0;
+  background: transparent;
+  color: var(--theme-text-soft);
+  cursor: pointer;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 800;
+}
 .adminUiScope .customItemModal__title {
  font-size: 19px;
  font-weight: 900;
@@ -4882,6 +5275,13 @@ function openUserProfile(user) {
  .adminUiScope .customItemModal__actions {
    grid-template-columns: 1fr;
  }
+  .adminUiScope .modalCard__form--search {
+    grid-template-columns: 1fr;
+  }
+  .adminUiScope .templateSettingsCard__actions > .btn,
+  .adminUiScope .templateSettingsCard__actions > a.btn {
+    width: 100%;
+  }
  .adminUiScope.adminSidebar {
    display: none;
  }
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -90,13 +90,17 @@ let editorLoadToken = 0
 const boardEl = ref(null)
 const exportBoardEl = ref(null)
 const groupListEl = ref(null)
+const sidebarEl = ref(null)
 const poolEl = ref(null)
+const poolSearchEl = ref(null)
 const groupDropEls = ref({})
 const fileEl = ref(null)
 const thumbnailFileEl = ref(null)
 const groupSortable = ref(null)
 const poolSortable = ref(null)
 const dropSortables = ref([])
+const editorSidebarMaxHeight = ref('')
+let editorSidebarMeasureFrame = 0

 const isNewTierList = computed(() => tierListId.value === 'new')
 const isOwnTierList = computed(() => !!auth.user && !!ownerId.value && ownerId.value === auth.user.id)
@@ -359,6 +363,35 @@ function closeItemContextMenu() {
  }
 }

+function scrollWorkspaceBodyToTop() {
+  const workspaceBody = document.querySelector('.workspaceBody')
+  workspaceBody?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+function updateEditorSidebarMaxHeight() {
+  if (typeof window === 'undefined' || !sidebarEl.value) return
+  const bottomGap = 14
+  const stickyTop = 14
+  const minHeight = 260
+  const sidebarTop = Math.max(sidebarEl.value.getBoundingClientRect().top, stickyTop)
+  const nextHeight = Math.max(minHeight, Math.floor(window.innerHeight - sidebarTop - bottomGap))
+  editorSidebarMaxHeight.value = `${nextHeight}px`
+}
+
+function scheduleEditorSidebarMeasure() {
+  if (typeof window === 'undefined') return
+  if (editorSidebarMeasureFrame) return
+  editorSidebarMeasureFrame = window.requestAnimationFrame(() => {
+    editorSidebarMeasureFrame = 0
+    updateEditorSidebarMaxHeight()
+  })
+}
+
+function focusPoolSearch() {
+  poolSearchEl.value?.focus()
+  poolSearchEl.value?.select()
+}
+
 function openItemContextMenu(itemId, event) {
  if (!canEdit.value || !itemId || !itemsById.value[itemId] || shouldIgnoreItemClick()) return
  selectedItemId.value = itemId
@@ -1350,6 +1383,7 @@ async function loadEditorState() {
  if (loadToken !== editorLoadToken) return

  syncSavedEditorSnapshot()
+  scheduleEditorSidebarMeasure()
  if (canEdit.value) {
    await initSortables()
  }
@@ -1369,6 +1403,10 @@ onMounted(() => {
  window.addEventListener('contextmenu', handleGlobalContextMenu, true)
  window.addEventListener('blur', closeItemContextMenu)
  window.addEventListener('scroll', closeItemContextMenu, true)
+  window.addEventListener('resize', scheduleEditorSidebarMeasure)
+  window.addEventListener('scroll', scheduleEditorSidebarMeasure, true)
+  window.addEventListener('tier-maker:focus-editor-item-search', focusPoolSearch)
+  nextTick(() => scheduleEditorSidebarMeasure())
 })

 onUnmounted(() => {
@@ -1377,6 +1415,13 @@ onUnmounted(() => {
    window.removeEventListener('contextmenu', handleGlobalContextMenu, true)
    window.removeEventListener('blur', closeItemContextMenu)
    window.removeEventListener('scroll', closeItemContextMenu, true)
+    window.removeEventListener('resize', scheduleEditorSidebarMeasure)
+    window.removeEventListener('scroll', scheduleEditorSidebarMeasure, true)
+    window.removeEventListener('tier-maker:focus-editor-item-search', focusPoolSearch)
+    if (editorSidebarMeasureFrame) {
+      window.cancelAnimationFrame(editorSidebarMeasureFrame)
+      editorSidebarMeasureFrame = 0
+    }
  }
  if (thumbnailPreviewUrl.value) URL.revokeObjectURL(thumbnailPreviewUrl.value)
  destroySortables()
@@ -1582,7 +1627,15 @@ onUnmounted(() => {
    <div class="editorMain">
      <section class="head">
        <div class="editorMain__headCopy">
-          <div class="editorMain__title">{{ templateName || templateId }}</div>
+          <button
+            class="editorMain__title editorMain__titleButton"
+            type="button"
+            title="본문을 화면 위로 이동"
+            @click="scrollWorkspaceBodyToTop"
+            @keydown.space.prevent="scrollWorkspaceBodyToTop"
+          >
+            {{ templateName || templateId }}
+          </button>
          <div class="editorMain__subtitle">
            <template v-if="canEdit">
              행/열 이름과 순서를 바꾸고 아이템을 드래그해서 배치할 수 있어요.
@@ -1746,60 +1799,71 @@ onUnmounted(() => {
              <button class="btn btn--ghost btn--small dropzone__button" @click="openFile">파일 선택</button>
            </div>
          </div>
+          <div class="editorTips">
+            <div class="editorTips__title">작업 팁</div>
+            <ul class="editorTips__list">
+              <li>마우스 오른쪽 클릭으로 아이템을 복수 사용하거나 커스텀 이미지를 빠르게 정리할 수 있어요.</li>
+              <li>미사용 아이템은 미리보기와 이미지 저장 결과에 표시되지 않으니, 필요한 것만 골라 배치해도 괜찮아요.</li>
+              <li>아이템이 많아 한 번에 보기 어렵다면 브라우저 확대/축소(`Ctrl +`, `Ctrl -`)로 화면 밀도를 조절해보세요.</li>
+            </ul>
+          </div>
        </div>

-        <div class="sidebar">
-          <div class="sidebar__titleRow">
-            <div class="sidebar__title">아이템</div>
-            <div class="sidebar__count">{{ visiblePoolCount }} / {{ pool.length }}</div>
-          </div>
-          <div class="sidebar__hint">
-            {{ canEdit ? '아이템을 드래그하거나, 클릭으로 선택한 뒤 원하는 셀/풀을 클릭해서 옮길 수 있어요.' : '공개 티어표는 보기 전용입니다.' }}
-          </div>
-          <input
-            v-model="poolSearchQuery"
-            class="sidebar__search"
-            type="text"
-            maxlength="60"
-            placeholder="아이템 이름 검색"
-          />
-          <div
-            ref="poolEl"
-            class="pool"
-            :class="{ 'pool--clickTarget': canEdit && !!selectedItemId }"
-            data-list-type="pool"
-            @click.self="moveSelectedItemToPool"
-          >
+        <div class="sidebarStickyFrame">
+          <div ref="sidebarEl" class="sidebar" :style="{ '--editor-sidebar-max-height': editorSidebarMaxHeight || undefined }">
+            <div class="sidebar__titleRow">
+              <div class="sidebar__title">아이템</div>
+              <div class="sidebar__count">{{ visiblePoolCount }} / {{ pool.length }}</div>
+            </div>
+            <div class="sidebar__hint">
+              {{ canEdit ? '아이템을 드래그하거나, 클릭으로 선택한 뒤 원하는 셀/풀을 클릭해서 옮길 수 있어요.' : '공개 티어표는 보기 전용입니다.' }}
+            </div>
+            <input
+              ref="poolSearchEl"
+              v-model="poolSearchQuery"
+              class="sidebar__search"
+              type="text"
+              maxlength="60"
+              placeholder="아이템 이름 검색"
+            />
            <div
-              v-for="id in pool"
-              :key="id"
-              class="poolItem"
-              :class="{
-                'poolItem--readonly': !canEdit,
-                'poolItem--hidden': !isPoolItemVisible(id),
-                'poolItem--selected': selectedItemId === id,
-              }"
-              :data-item-id="id"
-              @click.stop="selectItemByClick(id)"
+              ref="poolEl"
+              class="pool"
+              :class="{ 'pool--clickTarget': canEdit && !!selectedItemId }"
+              data-list-type="pool"
+              @click.self="moveSelectedItemToPool"
            >
-              <img
-                :src="resolveItemSrc(itemsById[id])"
-                class="thumb"
-                :alt="itemsById[id]?.label || id"
-                draggable="false"
-              />
-              <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
-              <button
-                v-if="canRemoveEditorItem(id)"
-                class="poolItem__deleteBtn"
-                type="button"
-                title="커스텀 이미지 제거"
-                @pointerdown.stop
-                @click.stop="deleteEditorItem(id)"
+              <div
+                v-for="id in pool"
+                :key="id"
+                class="poolItem"
+                :class="{
+                  'poolItem--readonly': !canEdit,
+                  'poolItem--hidden': !isPoolItemVisible(id),
+                  'poolItem--selected': selectedItemId === id,
+                }"
+                :data-item-id="id"
+                @click.stop="selectItemByClick(id)"
              >
-                삭제
-              </button>
-              <div v-if="!canEdit" class="poolItem__state">미배치</div>
+                <img
+                  :src="resolveItemSrc(itemsById[id])"
+                  class="thumb"
+                  :alt="itemsById[id]?.label || id"
+                  draggable="false"
+                />
+                <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
+                <button
+                  v-if="canRemoveEditorItem(id)"
+                  class="poolItem__deleteBtn"
+                  type="button"
+                  title="커스텀 이미지 제거"
+                  @pointerdown.stop
+                  @click.stop="deleteEditorItem(id)"
+                >
+                  삭제
+                </button>
+                <div v-if="!canEdit" class="poolItem__state">미배치</div>
+              </div>
            </div>
          </div>
        </div>
@@ -1960,12 +2024,36 @@ onUnmounted(() => {
  grid-template-columns: minmax(0, clamp(680px, 58vw, 960px)) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
+  padding-bottom: 14px;
+}
+.sidebarStickyFrame {
+  min-width: 0;
+  align-self: stretch;
+  box-sizing: border-box;
 }
 .editorMain__title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
 }
+.editorMain__titleButton {
+  width: fit-content;
+  max-width: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.editorMain__titleButton:hover {
+  color: var(--theme-text-strong);
+}
+.editorMain__titleButton:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--theme-accent) 70%, white);
+  outline-offset: 4px;
+  border-radius: 8px;
+}
 .editorMain__subtitle {
  color: var(--theme-text-soft);
  font-size: 13px;
@@ -2736,6 +2824,8 @@ onUnmounted(() => {
 }
 .sidebar {
  min-width: 0;
+  display: flex;
+  flex-direction: column;
  border: 1px solid var(--theme-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 94%, transparent), color-mix(in srgb, var(--theme-card-bg-hover) 88%, transparent));
  border-radius: 22px;
@@ -2743,6 +2833,9 @@ onUnmounted(() => {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 14px;
+  max-height: var(--editor-sidebar-max-height, calc(100dvh - 136px));
+  overflow: hidden;
+  overscroll-behavior: contain;
 }

 .dropzone--board {
@@ -3057,14 +3150,45 @@ onUnmounted(() => {
  color: var(--theme-text-faint);
 }
 .pool {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  align-content: start;
 }
+.pool::-webkit-scrollbar {
+  display: none;
+}
 .pool--clickTarget {
  cursor: copy;
 }
+.editorTips {
+  margin-top: 14px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: color-mix(in srgb, var(--theme-card-bg) 82%, transparent);
+}
+.editorTips__title {
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--theme-text-soft);
+}
+.editorTips__list {
+  margin: 8px 0 0;
+  padding-left: 16px;
+  color: var(--theme-text-faint);
+  font-size: 12px;
+  line-height: 1.55;
+}
+.editorTips__list li + li {
+  margin-top: 6px;
+}
 .poolItem {
  position: relative;
  min-width: 0;
@@ -3227,8 +3351,14 @@ onUnmounted(() => {
  }
  .sidebar {
    position: static;
+    max-height: none;
+    overflow: visible;
+  }
+  .sidebarStickyFrame {
+    padding-bottom: 0;
  }
  .pool {
+    overflow: visible;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
Author	SHA1	Message	Date
zenn	a6b5fc8b81	ui: simplify local rail editor spacing	2026-04-06 14:00:28 +09:00
zenn	ecd3e69b5a	ui: refine editor sidebar scroll spacing	2026-04-06 13:55:05 +09:00
zenn	3dba9b0a4d	ui: preserve editor sidebar end spacing	2026-04-06 13:51:57 +09:00
zenn	56b0035a45	ui: support Korean shortcut keys	2026-04-06 13:49:14 +09:00
zenn	929ffb2ed6	ui: add keyboard shortcuts	2026-04-06 13:47:50 +09:00
zenn	08ec6f42d1	ui: measure editor sidebar height	2026-04-06 13:44:16 +09:00
zenn	360ec5ac3d	ui: prevent title space scroll	2026-04-06 13:33:56 +09:00
zenn	71a13488d9	ui: let editor title focus workspace	2026-04-06 13:32:56 +09:00
zenn	ba9ba8013b	ui: constrain tier editor item scroll	2026-04-06 13:28:31 +09:00
zenn	da35351747	ui: add editor tips panel	2026-04-06 12:41:46 +09:00
zenn	305160663d	ui: restore rail menu spacing	2026-04-06 12:32:28 +09:00
zenn	58b8df51ab	ui: improve modal escape and rail wrapping	2026-04-06 12:30:49 +09:00
zenn	bdc7ee42e2	admin: polish template item actions	2026-04-06 12:26:22 +09:00
zenn	fd3f61ca2b	admin: refine template settings actions	2026-04-06 12:18:25 +09:00
zenn	47638b8b3e	admin: streamline item modal actions	2026-04-06 12:10:46 +09:00
zenn	632bebb8f9	admin: simplify template tagging flow	2026-04-06 12:05:04 +09:00