릴리스: v1.3.56 관리자 배지 색상 적용 및 아이템 드래그 핸들 추가

frontend/src/components/admin/AdminGamesSection.vue

@@ -147,6 +147,7 @@ const props = defineProps({
       <div v-if="!props.selectedGame?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
       <div v-else :ref="props.gameItemListRef" class="thumbGrid">
         <div v-for="item in props.selectedGame.items" :key="item.id" class="thumbCard" :data-game-item-id="item.id">
+          <div class="thumbCard__dragHandle" data-game-item-handle>순서 이동</div>
           <img class="thumb thumb--game" :src="toApiUrl(item.src)" :alt="item.label" />
           <input v-model="item.draftLabel" class="input input--labelEdit" placeholder="아이템 이름" />
           <div class="thumbCard__actions">

frontend/src/composables/useAdminGameManager.js

@@ -50,6 +50,7 @@ export function useAdminGameManager({
     gameItemSortable.value = Sortable.create(gameItemListEl.value, {
       animation: 160,
       draggable: '[data-game-item-id]',
+      handle: '[data-game-item-handle]',
       ghostClass: 'ghost',
       chosenClass: 'chosen',
       onEnd: (evt) => {

frontend/src/views/AdminView.vue

@@ -2734,6 +2734,25 @@ function userAvatarFallback(user) {
   padding: 12px;
   min-width: 0;
 }
+.adminUiScope .thumbCard__dragHandle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  padding: 5px 9px;
+  border-radius: 999px;
+  border: 1px dashed rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--theme-text-soft);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  cursor: grab;
+  user-select: none;
+}
+.adminUiScope .thumbCard__dragHandle:active {
+  cursor: grabbing;
+}
 .adminUiScope .thumb {
   width: 100%;
   aspect-ratio: 1 / 1;
@@ -3632,6 +3651,26 @@ function userAvatarFallback(user) {
   font-size: 12px;
   font-weight: 800;
 }
+.adminUiScope .pill--create {
+  border-color: rgba(56, 189, 248, 0.36);
+  background: rgba(56, 189, 248, 0.16);
+  color: rgba(224, 242, 254, 0.98);
+}
+.adminUiScope .pill--owned {
+  border-color: rgba(167, 139, 250, 0.34);
+  background: rgba(167, 139, 250, 0.14);
+  color: rgba(243, 232, 255, 0.98);
+}
+.adminUiScope .pill--requestItem {
+  border-color: rgba(250, 204, 21, 0.34);
+  background: rgba(250, 204, 21, 0.14);
+  color: rgba(254, 249, 195, 0.98);
+}
+.adminUiScope .pill--directFile {
+  border-color: rgba(52, 211, 153, 0.34);
+  background: rgba(52, 211, 153, 0.14);
+  color: rgba(209, 250, 229, 0.98);
+}
 .adminUiScope .pill--accent {
   border-color: rgba(251, 191, 36, 0.32);
   background: rgba(251, 191, 36, 0.12);