fix: 프로필 카드 오버플로우와 프리뷰 풀 노출 정리

docs/history.md

@@ -1,5 +1,35 @@
 # 의사결정 이력
 
+## 2026-04-06 v1.4.77
+- 작성자 프로필 화면의 공개 티어표 카드는 같은 계열의 다른 목록 뷰와 거의 동일한 마크업을 쓰고 있었지만, `overflow: hidden`과 일부 최소 너비 제약이 빠져 있어 긴 제목/메타/썸네일이 카드 라운드 경계 안에서 안정적으로 잘리지 못한다고 판단했다.
+- 또 공유용 프리뷰는 “완성된 티어표 보드”를 보여주는 화면이므로, 편집 중 보조 영역인 미사용 풀까지 노출하면 실제 배치 결과보다 산만해질 수 있어 프리뷰에서는 보드에 배치된 아이템만 노출하는 쪽이 더 일관된다고 정리했다.
+
+## 2026-04-03 v1.4.76
+- 프리뷰용 `viewerSidebar__section`은 데스크톱 오른쪽 레일에서 하단 액션 카드처럼 보이게 하려고 `margin-top: auto`를 갖고 있었지만, 모바일 전체 화면 overlay에서는 이 규칙이 카드를 바닥으로 밀어 과도하게 붙은 인상을 만들 수 있다고 판단했다.
+- 게다가 `localRightRailRoot`가 최소 높이 100%를 유지한 채 상위 콘텐츠 컨테이너도 flex 남은 높이를 채우면, 하단 footer 영역과 Teleport 콘텐츠의 시각적 쌓임이 어색해질 수 있으므로 모바일 overlay에서는 콘텐츠 컨테이너를 내용 높이 기준으로 풀어 footer가 자연스럽게 아래로 따라오게 정리했다.
+
+## 2026-04-03 v1.4.75
+- 데스크톱/태블릿에서는 오른쪽 레일을 폭이 정해진 서랍 패널처럼 여는 게 맞지만, 모바일에서는 같은 폭 규칙을 유지하면 오히려 “오른쪽에서 덜 열린 반쪽 패널”처럼 보여 하단 공간까지 어색해질 수 있다고 판단했다.
+- 그래서 모바일 한정으로 오른쪽 레일 overlay를 전체 화면 패널로 바꾸고, 공유/복사 같은 하단 액션이 기기 하단 UI나 safe-area에 붙어 잘리지 않도록 내부 바디 패딩을 더 넉넉하게 두는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.74
+- 모바일에서는 `workspaceBody` 자체가 카드처럼 배경색을 가지는 것보다, 바깥 앱 셸 배경 위에 각 화면의 실제 카드/섹션만 떠 있는 편이 시각 구조가 더 명확하다고 판단했다.
+- 특히 `workspaceBody`가 좌우 마진을 가진 상태로 별도 배경색을 칠하면 “내용과 무관한 중간 레이어 박스”처럼 보일 수 있으므로, 모바일 한정으로 공통 워크스페이스 배경을 투명 처리해 불필요한 레이어감을 줄이는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.73
+- 모바일 `appShell`은 PC처럼 좌우 3열이 아니라 위쪽 레일과 아래쪽 본문이 세로로 쌓이는 2행 구조이므로, 열 정의만 1fr로 바꾸고 행 정의를 비워두면 암묵 그리드 행이 남는 높이를 늘려 본문이 아래로 밀려 보일 수 있다고 판단했다.
+- 이 문제는 각 화면 본문을 개별 조정하기보다 모바일 셸 컨테이너에서 첫 행은 `auto`, 본문 행은 `minmax(0, 1fr)`로 고정하고 전체 콘텐츠 정렬을 위쪽으로 붙이는 편이 공통 회귀를 가장 작게 되돌리는 방법이라고 정리했다.
+
+## 2026-04-03 v1.4.72
+- 모바일 상단 레일은 왼쪽 유저 카드 영역과 오른쪽 패널 토글 버튼이 같은 시각적 간격 체계를 가져야 전체 셸이 덜 비뚤어져 보이므로, 모바일에서만 `railHeader` 좌우 패딩을 본문 카드 여백보다 조금 넓은 `20px`로 맞추는 편이 낫다고 판단했다.
+- 오른쪽 레일 토글 아이콘이 모바일에서 테두리 없는 아이콘만 보이면 왼쪽 네비 토글 버튼과 컴포넌트 문법이 달라 보이므로, 모바일 한정으로 같은 버튼형 배경/테두리/라운드를 적용해 조작 가능한 컨트롤처럼 통일하는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.71
+- 모바일에서 공통 본문 하단이 딱 붙어 보이는 문제는 로그인 화면 하나만 고치는 것보다 `workspaceBody` 공통 하단 여백을 safe-area까지 포함해 보강하는 편이 이후 모든 본문 화면에 일괄 적용되어 유지보수상 낫다고 판단했다.
+- 모바일 왼쪽 네비게이션은 데스크톱의 폭 축소형 접기와 목적이 다르므로, 기존 `leftRailCollapsed`를 억지로 재사용하기보다 `mobileLeftNavOpen` 상태를 분리하고 유저 카드 우측 버튼으로 검색/메뉴 묶음만 접는 방식이 더 자연스럽다고 정리했다.
+- 오른쪽 레일은 모바일에서 기본 자동 열림이 실제 조작 공간을 빼앗는 경우가 많으므로, 모바일 진입과 라우트 이동 시 기본 닫힘으로 두되 PC 레이아웃으로 돌아오면 다시 기본 열림을 복원하는 쪽으로 맞췄다.
+- 모바일 터치에서는 짧은 탭 선택과 드래그 시작이 같은 포인터 입력에서 충돌하기 쉬우므로, Sortable에 터치 전용 지연과 threshold를 둬 탭은 선택, 길게 누르고 움직이면 드래그가 되도록 의도를 분리했다.
+
 ## 2026-04-03 v1.4.70
 - 카카오톡/디스코드/X 공유 미리보기는 대개 프런트 SPA 자바스크립트를 실행하기 전에 HTML 메타를 먼저 읽으므로, 기존 `index.html` 고정 메타를 프런트 런타임에서 바꾸는 방식만으로는 티어표별 썸네일/제목/설명을 안정적으로 보여주기 어렵다고 판단했다.
 - 현재 운영 구조가 프런트 Nginx 정적 서빙 + 백엔드 API 분리 형태이므로, 모든 SPA 경로를 SSR로 바꾸기보다 공유 버튼만 `/share/editor/...` 서버 렌더링 경로를 사용하게 하고, 이 경로에서 OG 메타를 만든 뒤 기존 `preview=1` 화면으로 넘기는 방식이 가장 작은 변경이라고 정리했다.

docs/update.md

@@ -1,5 +1,44 @@
 # 업데이트 로그
 
+## 2026-04-06 v1.4.77
+- 작성자 프로필 보기 화면에서 공개 티어표 카드의 내부 콘텐츠가 카드 라운드 테두리 밖으로 밀려 보이거나 일부가 잘려 보일 수 있던 문제를 정리했다.
+- `UserProfileView`의 카드 본문/헤더에 `overflow: hidden`을 맞추고 썸네일 래퍼에도 `min-width: 0`을 추가해, 다른 목록 화면과 같은 카드 경계 안에서 안정적으로 렌더링되도록 조정했다.
+- 티어표 프리뷰 화면에서는 더 이상 `남은 아이템` 풀을 노출하지 않도록 바꿔, 실제 완성본과 공유 미리보기가 같은 기준으로 보이게 맞췄다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.76
+- 모바일 티어표 프리뷰에서 오른쪽 레일의 `VIEWER MODE` 카드가 패널 바닥에 딱 붙고, 카피라이트 문구가 카드 뒤쪽 중간 높이에 겹쳐 보일 수 있던 배치를 보정했다.
+- 모바일 오른쪽 overlay 레일에서는 `rightRail__content`가 남는 높이를 억지로 채우지 않도록 `flex: 0 0 auto`로 풀고, `localRightRailRoot`의 최소 높이도 `auto`로 낮춰 footer와 콘텐츠가 자연스럽게 순서대로 쌓이게 했다.
+- 프리뷰 전용 `viewerSidebar__section`의 `margin-top: auto`는 모바일에서만 끄고, 광고 아래에 바로 카드가 이어지도록 조정했다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.75
+- 모바일에서 오른쪽 레일을 열었을 때 패널이 `calc(100vw - 20px)` 폭의 좁은 서랍처럼 떠서 화면 전체를 채우지 못하고, 아래쪽도 어색하게 비어 보이던 부분을 조정했다.
+- 모바일 오른쪽 레일 overlay는 `inset: 0`, `width: 100vw`, `height: 100dvh`로 화면 전체를 덮는 패널처럼 열리게 바꾸고, 하단 액션/공유 버튼이 바닥에 붙거나 잘려 보이지 않도록 내부 패딩을 `32px + safe-area`까지 늘렸다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.74
+- 모바일 본문 영역에서 `workspaceBody` 배경색이 좌우 마진 안쪽에만 칠해져 중앙에 어설픈 배경 박스가 떠 있는 것처럼 보이던 부분을 정리했다.
+- 모바일에서는 공통 워크스페이스 배경을 투명하게 두고, 실제 화면별 카드/섹션 배경만 남겨 덜 미완성처럼 보이도록 조정했다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.73
+- 모바일에서 왼쪽 레일 아래 메인 컨텐츠가 화면 중간부터 시작하는 것처럼 보이던 회귀를 수정했다.
+- 원인은 모바일 `.appShell`이 1열 그리드로 바뀐 상태에서 세로 행 정의가 없어 `leftRail` 행과 `appMain` 행이 남는 높이를 나눠 가지며 위쪽이 불필요하게 늘어날 수 있던 점이었다. 모바일 그리드를 `auto + minmax(0, 1fr)` 행으로 고정하고 `align-content: start`를 적용해 상단 레일 바로 아래에 본문이 이어지도록 보정했다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.72
+- 모바일 공통 상단 헤더(`railHeader`) 좌우 패딩을 `20px`로 넓혀, 오른쪽 레일 토글 버튼과 화면 가장자리 간격이 왼쪽 유저 카드 쪽과 더 자연스럽게 맞도록 조정했다.
+- 모바일에서 오른쪽 레일 열기/닫기 아이콘도 왼쪽 네비게이션 토글과 같은 버튼형 카드 스타일로 보이도록 `42px` 크기, 테두리, 배경, 둥근 모서리를 맞췄다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.71
+- 모바일에서 본문 페이지나 로그인 화면 하단이 카드/버튼 바로 아래에서 끊겨 보여 답답했던 부분을 줄이기 위해, 공통 워크스페이스 본문 하단에 모바일 safe-area 기반 여백을 추가했다.
+- 모바일 왼쪽 네비게이션은 유저 프로필 카드 오른쪽 토글 버튼으로 접고 펼칠 수 있게 바꾸고, 닫힘/열림 전환 시 검색창과 메뉴가 위아래로 부드럽게 스르륵 접히는 애니메이션을 추가했다.
+- 모바일 진입 시 오른쪽 레일은 기본 닫힘으로 시작하고, 모바일에서 직접 오른쪽 레일을 열었을 때도 레일 하단 컨텐츠가 화면 바닥에 붙지 않도록 safe-area 여백을 더했다.
+- 티어표 편집기 모바일 터치 조작에서 아이템을 짧게 탭하면 선택만 하고, 길게 누른 뒤 움직일 때 드래그가 시작되도록 Sortable 터치 시작 지연과 이동 임계값을 추가했다.
+- 서버 점검 안내 문구는 `서비스 내부 점검이 필요합니다.` 대신 `서비스 내부 점검중입니다.`로 다듬었고, 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
 ## 2026-04-03 v1.4.70
 - 저장된 티어표의 `공유하기` 버튼이 기존 `preview=1` 편집기 주소 대신 `/share/editor/:topicId/:tierListId` 공유 전용 주소를 복사하도록 바꿨다.
 - 이 공유 전용 주소는 공개 티어표인 경우 해당 티어표의 제목, 설명, 썸네일을 기반으로 Open Graph/Twitter 메타 태그를 서버에서 동적으로 생성한 뒤, 실제 뷰어 화면 `/editor/:topicId/:tierListId?preview=1`로 즉시 이동시킨다.

frontend/src/App.vue

@@ -27,6 +27,7 @@ const RIGHT_RAIL_COPYRIGHT_URL = 'https://x.com/zennbox'
 const currentTopicId = computed(() => route.params.topicId || '')
 
 const leftRailCollapsed = ref(false)
+const mobileLeftNavOpen = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
 const leftRailSearchPlaceholder = '주제 템플릿 검색'
@@ -145,6 +146,7 @@ const showSettingsThemePanel = computed(() => route.name === 'profile')
 const showTopicViewToggle = computed(() => route.name === 'topicHub')
 const topicViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const showBackendFallback = computed(() => !isPreviewMode.value && ['maintenance', 'offline'].includes(backendState.value))
+const shouldLockRightRailBodyScroll = computed(() => isRightRailOverlay.value && rightRailOpen.value && !showBackendFallback.value)
 const leftBottomPrimaryAction = computed(() => {
   if (!authReady.value) return null
   if (route.name === 'home' && auth.user) {
@@ -295,6 +297,11 @@ function toggleTheme() {
   applyTheme(isLightTheme.value ? 'dark' : 'light')
 }
 
+function syncRightRailBodyScrollLock(shouldLock) {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = shouldLock ? 'hidden' : ''
+}
+
 onMounted(async () => {
   if (typeof window !== 'undefined') {
     const savedTheme = window.localStorage.getItem('tier-maker:theme')
@@ -312,6 +319,12 @@ onMounted(async () => {
     const saved = window.localStorage.getItem('tier-maker:right-rail-open')
     if (saved === '0') rightRailOpen.value = false
   }
+  if (isMobileLayout.value) {
+    mobileLeftNavOpen.value = false
+    rightRailOpen.value = false
+  } else {
+    rightRailOpen.value = true
+  }
   searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
 })
 
@@ -331,6 +344,7 @@ onBeforeUnmount(() => {
     window.removeEventListener('resize', syncViewportWidth)
     window.removeEventListener('keydown', handleGlobalKeydown)
   }
+  syncRightRailBodyScrollLock(false)
 })
 
 watch(
@@ -339,13 +353,27 @@ watch(
     searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
     isCollapsedSearchOpen.value = false
     isGuideModalOpen.value = false
+    if (isMobileLayout.value) {
+      mobileLeftNavOpen.value = false
+      rightRailOpen.value = false
+    }
   }
 )
 
 watch(
   isMobileLayout,
   (mobile) => {
-    if (mobile) leftRailCollapsed.value = false
+    if (mobile) {
+      leftRailCollapsed.value = false
+      mobileLeftNavOpen.value = false
+      rightRailOpen.value = false
+      return
+    }
+    mobileLeftNavOpen.value = false
+    rightRailOpen.value = true
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('tier-maker:right-rail-open', '1')
+    }
   },
   { immediate: true }
 )
@@ -353,7 +381,7 @@ watch(
 watch(
   usesLocalRightRail,
   (needed) => {
-    if (!needed || rightRailOpen.value) return
+    if (!needed || rightRailOpen.value || isMobileLayout.value) return
     rightRailOpen.value = true
     if (typeof window !== 'undefined') {
       window.localStorage.setItem('tier-maker:right-rail-open', '1')
@@ -362,13 +390,24 @@ watch(
   { immediate: true }
 )
 
+watch(
+  shouldLockRightRailBodyScroll,
+  (shouldLock) => {
+    syncRightRailBodyScrollLock(shouldLock)
+  },
+  { immediate: true }
+)
+
 function isRouteActive(path) {
   if (path === '/') return route.path === '/'
   return route.path.startsWith(path)
 }
 
 function toggleLeftRail() {
-  if (isMobileLayout.value) return
+  if (isMobileLayout.value) {
+    mobileLeftNavOpen.value = !mobileLeftNavOpen.value
+    return
+  }
   leftRailCollapsed.value = !leftRailCollapsed.value
   if (typeof window !== 'undefined') {
     window.localStorage.setItem('tier-maker:left-rail-collapsed', leftRailCollapsed.value ? '1' : '0')
@@ -449,6 +488,7 @@ function reloadApp() {
     class="appShell"
     :class="{
       'appShell--leftCollapsed': leftRailCollapsed,
+      'appShell--mobileNavClosed': isMobileLayout && !mobileLeftNavOpen,
       'appShell--rightClosed': !rightRailOpen,
       'appShell--rightOverlay': isRightRailOverlay,
     }"
@@ -483,7 +523,7 @@ function reloadApp() {
 
         <div class="leftRail__body">
         <div class="leftRail__content">
-        <div v-if="authReady && auth.user" class="appUserCard">
+        <div v-if="authReady" class="appUserCard">
           <div class="appUserCard__button">
             <img v-if="avatarUrl" :src="avatarUrl" class="appUserCard__avatar" alt="avatar" draggable="false" />
             <div v-else class="appUserCard__avatar appUserCard__avatar--fallback">{{ accountName[0]?.toUpperCase() || 'U' }}</div>
@@ -491,40 +531,52 @@ function reloadApp() {
               <div class="appUserCard__name">{{ accountName }}</div>
               <div class="appUserCard__email">{{ accountEmail }}</div>
             </div>
+            <button
+              v-if="isMobileLayout"
+              class="appUserCard__navToggle"
+              type="button"
+              :aria-label="mobileLeftNavOpen ? '네비게이션 메뉴 닫기' : '네비게이션 메뉴 열기'"
+              :aria-expanded="mobileLeftNavOpen"
+              @click="toggleLeftRail"
+            >
+              <SvgIcon :src="mobileLeftNavOpen ? iconDockToLeft : iconDockToRight" :size="24" />
+            </button>
           </div>
         </div>
 
-        <form class="searchStub" @submit.prevent="submitGlobalSearch">
-          <button class="searchStub__iconButton" type="button" :aria-label="leftRailCollapsed ? '검색 열기' : '검색'" @click="handleLeftRailSearch">
-            <span class="searchStub__icon">
-              <SvgIcon :src="iconSearch" :size="24" />
-            </span>
-          </button>
-          <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : leftRailSearchPlaceholder" />
-        </form>
+        <div class="leftRail__mobileMenu">
+          <form class="searchStub" @submit.prevent="submitGlobalSearch">
+            <button class="searchStub__iconButton" type="button" :aria-label="leftRailCollapsed ? '검색 열기' : '검색'" @click="handleLeftRailSearch">
+              <span class="searchStub__icon">
+                <SvgIcon :src="iconSearch" :size="24" />
+              </span>
+            </button>
+            <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : leftRailSearchPlaceholder" />
+          </form>
 
-        <nav
-          class="leftNav"
-          :class="{ 'leftNav--hasActive': activeLeftNavIndex >= 0 }"
-          :style="{ '--left-nav-active-index': String(Math.max(activeLeftNavIndex, 0)) }"
-        >
-          <span class="leftNav__indicator" aria-hidden="true"></span>
-          <RouterLink
-            v-for="item in leftNavItems"
-            :key="item.key"
-            :to="item.path"
-            class="leftNav__item"
-            :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
-            :title="leftRailCollapsed ? item.label : ''"
-            :aria-label="leftRailCollapsed ? item.label : undefined"
+          <nav
+            class="leftNav"
+            :class="{ 'leftNav--hasActive': activeLeftNavIndex >= 0 }"
+            :style="{ '--left-nav-active-index': String(Math.max(activeLeftNavIndex, 0)) }"
           >
-            <span class="leftNav__glyph">
-              <SvgIcon v-if="item.iconSrc" :src="item.iconSrc" :size="24" />
-              <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
-            </span>
-            <span class="leftNav__label">{{ item.label }}</span>
-          </RouterLink>
-        </nav>
+            <span class="leftNav__indicator" aria-hidden="true"></span>
+            <RouterLink
+              v-for="item in leftNavItems"
+              :key="item.key"
+              :to="item.path"
+              class="leftNav__item"
+              :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
+              :title="leftRailCollapsed ? item.label : ''"
+              :aria-label="leftRailCollapsed ? item.label : undefined"
+            >
+              <span class="leftNav__glyph">
+                <SvgIcon v-if="item.iconSrc" :src="item.iconSrc" :size="24" />
+                <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
+              </span>
+              <span class="leftNav__label">{{ item.label }}</span>
+            </RouterLink>
+          </nav>
+        </div>
 
         </div>
         <div class="leftRail__bottom">
@@ -968,6 +1020,25 @@ function reloadApp() {
   transition: opacity 180ms ease, max-width 220ms ease, transform 220ms ease;
 }
 
+.leftRail__mobileMenu {
+  display: grid;
+}
+
+.appUserCard__navToggle {
+  display: none;
+  width: 42px;
+  height: 42px;
+  margin-left: auto;
+  border: 0;
+  border-radius: 14px;
+  background: var(--theme-surface-soft);
+  color: var(--theme-text-soft);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .appUserCard__name {
   font-size: 14px;
   font-weight: 800;
@@ -1975,9 +2046,15 @@ function reloadApp() {
 @media (max-width: 860px) {
   .appShell {
     grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+    align-content: start;
     min-height: 100dvh;
   }
 
+  .railHeader {
+    padding: 0 20px;
+  }
+
   .leftRail {
     min-height: auto;
     height: auto;
@@ -1994,6 +2071,43 @@ function reloadApp() {
     padding: 12px 14px;
   }
 
+  .appUserCard {
+    margin-bottom: 0;
+  }
+
+  .appUserCard__button {
+    padding: 8px 6px;
+  }
+
+  .appUserCard__meta {
+    max-width: none;
+  }
+
+  .appUserCard__navToggle {
+    display: inline-flex;
+  }
+
+  .workspaceHead .ghostIcon--iconOnly,
+  .rightRail__top .ghostIcon--iconOnly {
+    width: 42px;
+    height: 42px;
+    min-width: 42px;
+    border: 1px solid var(--theme-border);
+    border-radius: 14px;
+    background: var(--theme-surface-soft);
+    color: var(--theme-text-soft);
+  }
+
+  .rightRail--overlay {
+    inset: 0;
+    width: 100vw;
+    min-width: 0;
+    height: 100dvh;
+    min-height: 100dvh;
+    border-left: 0;
+    box-shadow: none;
+  }
+
   .appMain {
     min-height: auto;
     border-left: 0;
@@ -2011,6 +2125,18 @@ function reloadApp() {
     overflow: visible;
   }
 
+  .leftRail__mobileMenu {
+    max-height: 540px;
+    opacity: 1;
+    transform: translateY(0);
+    overflow: hidden;
+    transition:
+      max-height 260ms ease,
+      opacity 220ms ease,
+      transform 220ms ease,
+      margin-top 220ms ease;
+  }
+
   .appShell--leftCollapsed .leftRail__top {
     display: none;
   }
@@ -2046,17 +2172,44 @@ function reloadApp() {
   }
 
   .workspaceBody {
-    padding: 0;
+    padding: 0 0 calc(28px + env(safe-area-inset-bottom));
     border-radius: 0;
+    background: transparent;
     margin: 14px 14px 0;
   }
 
   .workspaceBody--localRail {
-    padding: 0;
+    padding: 0 0 calc(28px + env(safe-area-inset-bottom));
     border-radius: 0;
+    background: transparent;
     margin: 14px 14px 0;
   }
 
+  .appShell--mobileNavClosed .leftRail__mobileMenu {
+    max-height: 0;
+    margin-top: -8px;
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+  }
+
+  .appShell--mobileNavClosed .leftRail__bottom {
+    display: none;
+  }
+
+  .rightRail--overlay .rightRail__body {
+    padding: 14px 20px calc(32px + env(safe-area-inset-bottom));
+  }
+
+  .rightRail--overlay .rightRail__content {
+    flex: 0 0 auto;
+    overflow: visible;
+  }
+
+  .rightRail--overlay .localRightRailRoot {
+    min-height: auto;
+  }
+
   .collapsedSearchModal {
     padding: 72px 16px 16px;
   }

frontend/src/lib/api.js

@@ -39,7 +39,7 @@ async function request(path, { method = 'GET', body, headers } = {}) {
     } else if (res.status >= 500) {
       emitBackendStatus({
         state: 'maintenance',
-        message: '서비스 내부 점검이 필요합니다. 잠시 후 다시 이용해주세요.',
+        message: '서비스 내부 점검중입니다. 잠시 후 다시 이용해주세요.',
         path,
       })
     }

frontend/src/views/TierEditorView.vue

@@ -102,6 +102,12 @@ const isNewTierList = computed(() => tierListId.value === 'new')
 const isOwnTierList = computed(() => !!auth.user && !!ownerId.value && ownerId.value === auth.user.id)
 const canEdit = computed(() => !!auth.user && !previewMode.value && (!ownerId.value || ownerId.value === auth.user.id))
 const iconSizeOptions = [48, 64, 80, 96, 112]
+const touchSortableOptions = {
+  delayOnTouchOnly: true,
+  delay: 180,
+  touchStartThreshold: 8,
+  fallbackTolerance: 8,
+}
 const hasCustomTitle = computed(() => !!(title.value || '').trim())
 const fallbackTimestamp = computed(() => (updatedAt.value ? updatedAt.value : Date.now()))
 const effectiveAuthorName = computed(() => {
@@ -547,6 +553,7 @@ async function initSortables() {
   destroySortables()
 
   groupSortable.value = Sortable.create(groupListEl.value, {
+    ...touchSortableOptions,
     animation: 160,
     handle: '[data-group-handle]',
     ghostClass: 'ghost',
@@ -560,6 +567,7 @@ async function initSortables() {
   })
 
   poolSortable.value = Sortable.create(poolEl.value, {
+    ...touchSortableOptions,
     group: 'tier-items',
     animation: 160,
     draggable: '[data-item-id]',
@@ -577,6 +585,7 @@ async function initSortables() {
 
   dropSortables.value = Object.entries(groupDropEls.value).map(([, el]) =>
     Sortable.create(el, {
+      ...touchSortableOptions,
       group: 'tier-items',
       animation: 160,
       draggable: '[data-item-id]',
@@ -1387,14 +1396,6 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-      <div v-if="pool.length" class="previewOnly__pool">
-        <div class="previewOnly__poolTitle">남은 아이템</div>
-        <div class="previewOnly__poolGrid">
-          <div v-for="id in pool" :key="id" class="previewOnly__poolItem previewOnly__poolItem--inactive">
-            <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
-          </div>
-        </div>
-      </div>
       <div class="previewOnly__footer">
         <span>{{ effectiveAuthorName }}</span>
         <span>{{ formatExportDate(fallbackTimestamp) }}</span>
@@ -3189,6 +3190,9 @@ onUnmounted(() => {
   .previewOnly {
     padding: 14px;
   }
+  .viewerSidebar__section {
+    margin-top: 0;
+  }
   .pool {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

frontend/src/views/UserProfileView.vue

@@ -333,8 +333,10 @@ watch(userId, loadProfile, { immediate: true })
   color: inherit;
   padding: 0;
   display: grid;
+  overflow: hidden;
 }
 .boardCard__thumbWrap {
+  min-width: 0;
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 14px 14px 0;
@@ -363,6 +365,7 @@ watch(userId, loadProfile, { immediate: true })
   padding: 16px 18px 18px;
   display: grid;
   gap: 8px;
+  overflow: hidden;
 }
 .boardCard__titleRow,
 .boardCard__metaRow {