릴리스: v1.3.68 관리자 아이템 모달 레이아웃 안정화

docs/history.md

@@ -1,5 +1,9 @@
 # 의사결정 이력
 
+## 2026-04-02 v1.3.68
+- 관리자 아이템 상세는 새 모달을 겹쳐 올리는 방식보다 기존 모달 안에서 `왼쪽 선택 대상 / 오른쪽 작업과 참조 정보` 역할만 분명히 나누는 편이 더 안정적이라고 정리했다.
+- 같은 이미지를 두 위치에서 반복 노출하면 “모달이 두 개 겹친 것처럼” 느껴질 수 있으므로, 선택 썸네일은 한 곳에만 두고 양쪽 패널은 각자 스크롤되는 구조로 정리하는 편이 맞다고 판단했다.
+
 ## 2026-04-02 v1.3.67
 - 같은 이미지 공유 구조는 저장 효율에는 유리하지만 운영자가 관계를 읽기 어렵기 때문에, 카드 단계에서는 참조 수를 바로 보여주고 상세 모달에서는 같은 `src`를 가리키는 기록들을 함께 펼쳐 보여주는 편이 맞다고 정리했다.
 - 삭제 제한을 과하게 두기보다, 삭제 전 영향 범위를 문구와 개수로 먼저 보여주는 쪽이 운영 측면에서 더 현실적이라고 판단했다.

docs/todo.md

@@ -1,6 +1,7 @@
 # 할 일 및 이슈
 
 ## 단기 확인
+- 관리자 아이템 상세 모달은 왼쪽 선택 카드와 오른쪽 상세 본문으로 다시 정리했으므로, 데스크톱/모바일에서 긴 게임 목록과 긴 참조 목록이 각각 자연스럽게 스크롤되는지 한 번 더 QA한다.
 - 관리자 계정으로 `/admin/...`을 직접 새로고침했을 때 홈으로 튕기지 않고 그대로 유지되는지, 실제 세션이 살아 있는 브라우저와 만료된 브라우저 각각에서 한 번 더 QA한다.
 - 티어표 만들기 화면의 보드 드롭존은 점선/높이/중앙 정렬로 존재감이 커졌으므로, 데스크톱과 모바일에서 파일 선택 버튼과 안내 문구 밀도를 한 번 더 QA한다.
 - 관리자 썸네일 드롭존과 기본 아이템 추가 드롭존은 에디터 드롭존과 시각 문법을 맞췄으므로, 라이트모드와 좁은 화면에서 아이콘 대비와 배경 밝기가 과하지 않은지 한 번 더 QA한다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 로그
 
+## 2026-04-02 v1.3.68
+- 관리자 아이템 상세 모달은 같은 이미지를 왼쪽 선택 카드와 오른쪽 본문에서 두 번 보여주던 중복 미리보기를 제거해, 한 모달 안에서 정보가 겹쳐 보이던 문제를 정리함.
+- 왼쪽 게임 선택 패널과 오른쪽 상세 정보 패널은 각각 독립 스크롤이 되도록 바꾸고, 스크롤바도 다시 보이게 조정해 긴 목록이나 긴 참조 정보가 있어도 레이아웃이 깨지지 않고 탐색할 수 있게 함.
+- 현재 선택한 이미지 요약 카드에는 별도 배경과 테두리를 추가해, 기존 클릭 모달의 “선택 대상”과 오른쪽 작업 영역이 한눈에 구분되도록 시각 계층을 정리함.
+
 ## 2026-04-02 v1.3.67
 - 관리자 아이템 관리 카드에는 이제 같은 `src`를 공유하는 참조 수와 연결 게임 수를 함께 표시해, 같은 이미지가 얼마나 넓게 쓰이는지 목록 단계에서 바로 파악할 수 있게 함.
 - 아이템 상세 모달은 왼쪽 패널 상단에 현재 선택한 이미지와 `총 참조 / 사용자 업로드 / 템플릿 항목 / 보관 자산` 요약을 보여주고, 오른쪽에는 같은 이미지를 가리키는 다른 기록 목록을 함께 표시해 실제로 어떤 참조들이 묶여 있는지 모달 안에서 바로 확인할 수 있게 함.

frontend/src/views/AdminView.vue

@@ -1842,7 +1842,6 @@ function userAvatarFallback(user) {
                           <div class="customItemModal__source">{{ modalTargetCustomItem.sourceLabel }}</div>
                         </div>
                       </div>
-                      <img class="customItemModal__image" :src="toApiUrl(modalTargetCustomItem.src)" :alt="modalTargetCustomItem.label" />
                       <div class="customItemModal__labelEditor">
                         <label class="field">
                           <span class="field__label">아이템 이름</span>
@@ -3216,9 +3215,12 @@ function userAvatarFallback(user) {
   align-content: start;
   gap: 18px;
   min-width: 0;
+  min-height: 0;
   padding: 28px 22px;
   border-right: 1px solid var(--theme-border);
   background: var(--theme-pill-bg);
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 .adminUiScope .customItemModal__pickerHead {
   display: grid;
@@ -3227,6 +3229,10 @@ function userAvatarFallback(user) {
 .adminUiScope .customItemModal__selected {
   display: grid;
   gap: 12px;
+  padding: 14px;
+  border-radius: 20px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
 }
 .adminUiScope .customItemModal__selectedImage {
   width: 100%;
@@ -3306,6 +3312,7 @@ function userAvatarFallback(user) {
   grid-template-rows: auto minmax(0, 1fr);
   gap: 16px;
   padding: 24px 28px 28px;
+  overflow: hidden;
 }
 .adminUiScope .customItemModal__content {
   min-width: 0;
@@ -3314,14 +3321,24 @@ function userAvatarFallback(user) {
   align-content: start;
   gap: 18px;
   overflow: auto;
-  padding-right: 0;
+  padding-right: 8px;
   overscroll-behavior: contain;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
 }
+.adminUiScope .customItemModal__pickerPanel::-webkit-scrollbar,
 .adminUiScope .customItemModal__content::-webkit-scrollbar {
-  width: 0;
-  height: 0;
+  width: 8px;
+  height: 8px;
+}
+.adminUiScope .customItemModal__pickerPanel::-webkit-scrollbar-thumb,
+.adminUiScope .customItemModal__content::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+}
+.adminUiScope .customItemModal__pickerPanel::-webkit-scrollbar-track,
+.adminUiScope .customItemModal__content::-webkit-scrollbar-track {
+  background: transparent;
 }
 .adminUiScope .customItemModal__labelEditor {
   display: flex;
@@ -3369,15 +3386,6 @@ function userAvatarFallback(user) {
   cursor: pointer;
   font-size: 13px;
 }
-.adminUiScope .customItemModal__image {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  max-height: min(360px, 34dvh);
-  object-fit: cover;
-  border-radius: 24px;
-  background: radial-gradient(circle at top, rgba(77, 127, 233, 0.18), rgba(255, 255, 255, 0.02) 52%), rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--theme-border);
-}
 .adminUiScope .customItemModal__label {
   font-size: 11px;
   color: var(--theme-text-faint);