릴리스: v1.3.38 설정 우측 패널과 아이템 모달 보정

docs/todo.md

@@ -16,3 +16,5 @@
 - 라이트모드 최종 QA 시 홈/설정/관리자/에디터를 실제 사용 흐름으로 돌리며, 남아 있는 하드코딩 텍스트 색과 플레이스홀더 배경을 한 번 더 점검한다.
 
 - 관리자 아이템 라이브러리는 보관 자산까지 노출되므로, 이후에는 `활성 템플릿 / 보관 자산` 분리 필터나 그룹 보기까지 검토한다.
+
+- 가이드 모달과 관리자 아이템 모달은 현재 같은 톤의 큰 셸을 쓰므로, 이후 공통 모달 레이아웃 컴포넌트로 분리할지 검토한다.

docs/update.md

@@ -1,5 +1,15 @@
 # 업데이트 로그
 
+## 2026-04-01 v1.3.38
+- Settings 화면 오른쪽 사이드의 테마 설정 패널은 다시 쓰기 전까지 숨김 처리하고, 현재 기본 다크모드를 유지한 채 다른 화면과 동일하게 스폰서 광고만 노출되도록 정리함.
+- 관리자 아이템 모달에서 템플릿에 사용 중인 게임 배지는 다크모드에서도 읽히는 텍스트 색으로 맞추고, hover/focus 전환 효과를 추가해 상호작용이 더 분명하게 보이도록 보강함.
+- 관리자 아이템 모달은 데스크톱에서 최소 폭을 800px로 늘리고 최대 높이를 뷰포트 안으로 제한했으며, 16:9 이미지는 높이 상한을 둬서 모달이 넓어질 때도 이미지와 하단 버튼이 과하게 뭉개지지 않도록 정리함.
+
+## 2026-04-01 v1.3.37
+- 가이드 모달은 모바일에서 왼쪽 단계 목록 대신 현재 단계만 선택하는 셀렉트형 피커를 중심으로 쓰도록 높이와 내부 스크롤 구조를 다시 잡아, 작은 화면에서도 내용이 잘리지 않고 조작할 수 있게 정리함.
+- 관리자 아이템 상세 모달은 가이드 모달과 같은 큰 2단 셸 문법으로 다시 묶어, 왼쪽 게임 선택 패널과 오른쪽 이미지·메타·액션 영역이 더 넓고 여유 있게 보이도록 재구성함.
+- 아이템 상세 모달 내부 정보 카드와 액션 영역도 같은 톤의 패널형 블록으로 정리해, 가이드와 관리자 모달 사이의 시각적 통일감을 높임.
+
 ## 2026-04-01 v1.3.36
 - `내 티어표` 화면 헤더를 공통 `pageHead` 문법으로 통일하고, 라이트모드에서는 공통 `railHeader` 배경을 사이드 레일과 같은 톤으로 맞춰 화면 간 상단 밀도 차를 줄임.
 - 관리자 아이템 상세 모달은 더 넓은 비율로 키우고, 템플릿에 연결된 게임 이름은 hover 가능한 버튼으로 바꿔 클릭 시 해당 게임이 선택된 `게임 관리` 탭으로 바로 이동할 수 있게 함.

frontend/src/App.vue

@@ -128,7 +128,7 @@ const isGuidePrevDisabled = computed(() => guideStepIndex.value <= 0)
 const isGuideNextDisabled = computed(() => guideStepIndex.value >= guideSteps.length - 1)
 const isLightTheme = computed(() => themeMode.value === 'light')
 const themeToggleLabel = computed(() => (isLightTheme.value ? '다크 모드' : '라이트 모드'))
-const showSettingsThemePanel = computed(() => route.name === 'profile')
+const showSettingsThemePanel = computed(() => false && route.name === 'profile')
 const showGameHubViewToggle = computed(() => route.name === 'gameHub')
 const gameHubViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const leftBottomPrimaryAction = computed(() => {
@@ -526,6 +526,12 @@ function submitGlobalSearch() {
           <div class="guideModal__sidebar">
             <div class="guideModal__eyebrow">Guide</div>
             <div class="guideModal__title">티어 메이커 기능 안내</div>
+            <div class="guideModal__mobilePicker">
+              <label class="guideModal__mobileLabel" for="guide-step-select">단계 선택</label>
+              <select id="guide-step-select" class="guideModal__mobileSelect" :value="guideStepIndex" @change="selectGuideStep(Number($event.target.value))">
+                <option v-for="(step, index) in guideSteps" :key="step.id + '-select'" :value="index">{{ index + 1 }}. {{ step.title }}</option>
+              </select>
+            </div>
             <div class="guideModal__list">
               <button
                 v-for="(step, index) in guideSteps"
@@ -1266,7 +1272,7 @@ function submitGlobalSearch() {
 
 .guideModal__dialog {
   width: min(1180px, calc(100vw - 40px));
-  min-height: min(760px, calc(100dvh - 64px));
+  height: min(760px, calc(100dvh - 64px));
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
   border-radius: 28px;
@@ -1299,6 +1305,28 @@ function submitGlobalSearch() {
   letter-spacing: -0.04em;
 }
 
+.guideModal__mobilePicker {
+  display: none;
+}
+
+.guideModal__mobileLabel {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--theme-text-faint);
+}
+
+.guideModal__mobileSelect {
+  width: 100%;
+  min-height: 56px;
+  padding: 0 18px;
+  border-radius: 18px;
+  border: 1px solid rgba(77, 127, 233, 0.46);
+  background: rgba(77, 127, 233, 0.14);
+  color: var(--theme-text-strong);
+  font-weight: 800;
+}
+
 .guideModal__list {
   display: grid;
   gap: 8px;
@@ -1341,8 +1369,10 @@ function submitGlobalSearch() {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   padding: 24px 28px 28px;
+  min-height: 0;
 }
 
+
 .guideModal__close {
   justify-self: end;
   border: 0;
@@ -1354,6 +1384,7 @@ function submitGlobalSearch() {
 
 .guideModal__content {
   min-width: 0;
+  min-height: 0;
   display: grid;
   grid-template-columns: 52px minmax(0, 1fr) 52px;
   gap: 16px;
@@ -1362,6 +1393,7 @@ function submitGlobalSearch() {
 
 .guideModal__body {
   min-width: 0;
+  min-height: 0;
   display: grid;
   gap: 18px;
 }
@@ -1617,7 +1649,7 @@ function submitGlobalSearch() {
 @media (max-width: 1200px) {
   .guideModal__dialog {
     grid-template-columns: 1fr;
-    min-height: auto;
+    height: min(860px, calc(100dvh - 40px));
   }
 
   .guideModal__sidebar {
@@ -1669,20 +1701,55 @@ function submitGlobalSearch() {
 
   .guideModal__dialog {
     width: min(100%, calc(100vw - 24px));
+    height: min(100%, calc(100dvh - 24px));
+  }
+
+  .guideModal__sidebar {
+    gap: 14px;
+    padding: 20px 18px;
+  }
+
+  .guideModal__mobilePicker {
+    display: grid;
+    gap: 8px;
+  }
+
+  .guideModal__list {
+    display: none;
   }
 
   .guideModal__main {
     padding: 20px 18px 18px;
+    min-height: 0;
   }
 
   .guideModal__content {
     grid-template-columns: 1fr;
+    min-height: 0;
   }
 
   .guideModal__arrow {
     display: none;
   }
 
+  .guideModal__body {
+    align-content: start;
+    overflow: auto;
+    padding-right: 2px;
+  }
+
+  .guideModal__mediaPlaceholder {
+    border-radius: 22px;
+  }
+
+  .guideModal__stepTitle {
+    font-size: 24px;
+  }
+
+  .guideModal__stepSummary {
+    font-size: 15px;
+  }
+
   .guideModal__footer {
     flex-direction: column;
     align-items: stretch;
@@ -1695,10 +1762,6 @@ function submitGlobalSearch() {
   .guideDockButton {
     display: none;
   }
-
-  .guideModal__list {
-    grid-template-columns: 1fr 1fr;
-  }
 }
 
 @media (max-width: 860px) {

frontend/src/views/AdminView.vue

@@ -1979,10 +1979,6 @@ async function saveFeaturedOrder() {
 
             <div v-if="customItemModalOpen" class="modalOverlay" @click.self="closeCustomItemModal">
               <div class="modalCard modalCard--customItem" role="dialog" aria-modal="true">
-                <div class="modalCard__titleRow">
-                  <div class="modalCard__title">아이템 상세</div>
-                  <button class="btn btn--ghost btn--small" @click="closeCustomItemModal">닫기</button>
-                </div>
                 <div v-if="modalTargetCustomItem" class="customItemModal">
                   <aside class="customItemModal__pickerPanel">
                     <div class="customItemModal__pickerHead">
@@ -2015,7 +2011,9 @@ async function saveFeaturedOrder() {
                     </div>
                   </aside>
                   <div class="customItemModal__body">
-                    <div class="customItemModal__titleRow">
+                    <button class="customItemModal__close" type="button" @click="closeCustomItemModal">닫기</button>
+                    <div class="customItemModal__content">
+                      <div class="customItemModal__titleRow">
                       <div>
                         <div class="customItemModal__title">{{ modalTargetCustomItem.label }}</div>
                         <div class="customItemModal__source">{{ modalTargetCustomItem.sourceLabel }}</div>
@@ -2035,12 +2033,13 @@ async function saveFeaturedOrder() {
                       </div>
                       <div v-else class="hint hint--tight">아직 템플릿에 연결된 게임이 없어요.</div>
                     </div>
-                    <div class="customItemModal__actions">
-                      <a class="btn btn--ghost customItemModal__action" :href="toApiUrl(modalTargetCustomItem.src)" :download="modalTargetCustomItem.label">이미지 다운로드</a>
-                      <button class="btn btn--ghost customItemModal__action" :disabled="!customItemModalTargetGameId || modalTargetCustomItem.isPromoting" @click="promoteCustomItem(modalTargetCustomItem)">
-                        {{ modalTargetCustomItem.isPromoting ? '추가중...' : '기본 템플릿에 추가' }}
-                      </button>
-                      <button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.sourceType === 'user' && (modalTargetCustomItem.usageCount > 0 || visibleLinkedGames.length > 0)" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
+                      <div class="customItemModal__actions">
+                        <a class="btn btn--ghost customItemModal__action" :href="toApiUrl(modalTargetCustomItem.src)" :download="modalTargetCustomItem.label">이미지 다운로드</a>
+                        <button class="btn btn--ghost customItemModal__action" :disabled="!customItemModalTargetGameId || modalTargetCustomItem.isPromoting" @click="promoteCustomItem(modalTargetCustomItem)">
+                          {{ modalTargetCustomItem.isPromoting ? '추가중...' : '기본 템플릿에 추가' }}
+                        </button>
+                        <button v-if="modalTargetCustomItem.canDelete" class="btn btn--danger customItemModal__action" :disabled="modalTargetCustomItem.sourceType === 'user' && (modalTargetCustomItem.usageCount > 0 || visibleLinkedGames.length > 0)" @click="openCustomItemDeleteModal(modalTargetCustomItem)">삭제</button>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -3186,17 +3185,17 @@ async function saveFeaturedOrder() {
 }
 .customItemModal {
   display: grid;
-  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
-  gap: 28px;
-  align-items: start;
+  grid-template-columns: 300px minmax(0, 1fr);
+  min-height: min(820px, calc(100dvh - 48px));
+  align-items: stretch;
 }
 .customItemModal__pickerPanel {
   display: grid;
-  gap: 12px;
+  align-content: start;
+  gap: 18px;
   min-width: 0;
-  padding: 16px;
-  border-radius: 20px;
-  border: 1px solid var(--theme-border);
+  padding: 28px 22px;
+  border-right: 1px solid var(--theme-border);
   background: var(--theme-pill-bg);
 }
 .customItemModal__pickerHead {
@@ -3251,22 +3250,49 @@ async function saveFeaturedOrder() {
   color: var(--theme-text-soft);
 }
 .customItemModal__body {
-  display: grid;
-  gap: 14px;
   min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 16px;
+  padding: 24px 28px 28px;
+}
+.customItemModal__content {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 18px;
+  overflow: auto;
+  padding-right: 2px;
 }
 .customItemModal__titleRow,
 .customItemModal__linked {
   display: grid;
   gap: 8px;
 }
+.customItemModal__linked {
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
+}
+.customItemModal__close {
+  justify-self: end;
+  border: 0;
+  background: transparent;
+  color: var(--theme-text-muted);
+  cursor: pointer;
+  font-size: 13px;
+}
 .customItemModal__image {
   width: 100%;
   aspect-ratio: 16 / 9;
+  max-height: min(360px, 34dvh);
   object-fit: cover;
-  border-radius: 20px;
-  background: var(--theme-surface-soft);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  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);
 }
 .customItemModal__label {
   font-size: 11px;
@@ -3291,6 +3317,10 @@ async function saveFeaturedOrder() {
 .customItemModal__metaList {
   display: grid;
   gap: 10px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface-soft);
 }
 .customItemModal__metaRow {
   display: grid;
@@ -3312,7 +3342,8 @@ async function saveFeaturedOrder() {
 .customItemModal__actions {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+  gap: 12px;
+  align-self: end;
 }
 .customItemModal__action {
   width: 100%;
@@ -3323,7 +3354,16 @@ async function saveFeaturedOrder() {
   text-align: center;
 }
 .modalCard--customItem {
-  width: min(1280px, calc(100vw - 40px));
+  width: min(1360px, calc(100vw - 40px));
+  min-width: min(800px, calc(100vw - 40px));
+  height: min(820px, calc(100dvh - 40px));
+  max-height: calc(100dvh - 40px);
+  padding: 0;
+  overflow: hidden;
+  border-radius: 28px;
+  border: 1px solid var(--theme-border-strong);
+  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(18, 18, 18, 0.98));
+  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
 }
 .pager {
   margin-top: 16px;
@@ -3806,6 +3846,7 @@ async function saveFeaturedOrder() {
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: var(--theme-surface-soft);
+  color: var(--theme-text);
   font-size: 12px;
   font-weight: 800;
 }
@@ -3814,6 +3855,22 @@ async function saveFeaturedOrder() {
   background: rgba(251, 191, 36, 0.12);
   color: rgba(253, 230, 138, 0.96);
 }
+.pill--link {
+  color: var(--theme-text);
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, color 160ms ease, box-shadow 160ms ease;
+}
+.pill--link:hover {
+  color: var(--theme-text-strong);
+  border-color: rgba(96, 165, 250, 0.4);
+  background: color-mix(in srgb, var(--theme-surface-soft) 76%, rgba(96, 165, 250, 0.2));
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
+  transform: translateY(-1px);
+}
+.pill--link:focus-visible {
+  outline: 2px solid rgba(96, 165, 250, 0.42);
+  outline-offset: 2px;
+}
 .tierAdminSection {
   display: grid;
   gap: 10px;
@@ -3941,6 +3998,23 @@ async function saveFeaturedOrder() {
   }
   .customItemModal {
     grid-template-columns: 1fr;
+    min-height: auto;
+  }
+  .modalCard--customItem {
+    width: min(100%, calc(100vw - 24px));
+    height: min(100%, calc(100dvh - 24px));
+  }
+  .customItemModal__pickerPanel {
+    border-right: 0;
+    border-bottom: 1px solid var(--theme-border);
+    padding: 20px 18px;
+  }
+  .customItemModal__body {
+    min-height: 0;
+    padding: 20px 18px 18px;
+  }
+  .customItemModal__content {
+    min-height: 0;
   }
   .customItemModal__actions {
     grid-template-columns: 1fr;