조정: 모바일 오른쪽 레일 전체 화면 패널화

docs/history.md

@@ -1,5 +1,13 @@
 # 의사결정 이력
 
+## 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)`로 고정하고 전체 콘텐츠 정렬을 위쪽으로 붙이는 편이 공통 회귀를 가장 작게 되돌리는 방법이라고 정리했다.

docs/update.md

@@ -1,5 +1,15 @@
 # 업데이트 로그
 
+## 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`를 적용해 상단 레일 바로 아래에 본문이 이어지도록 보정했다.

frontend/src/App.vue

@@ -2083,6 +2083,16 @@ function reloadApp() {
     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;
@@ -2149,12 +2159,14 @@ function reloadApp() {
   .workspaceBody {
     padding: 0 0 calc(28px + env(safe-area-inset-bottom));
     border-radius: 0;
+    background: transparent;
     margin: 14px 14px 0;
   }
 
   .workspaceBody--localRail {
     padding: 0 0 calc(28px + env(safe-area-inset-bottom));
     border-radius: 0;
+    background: transparent;
     margin: 14px 14px 0;
   }
 
@@ -2171,7 +2183,7 @@ function reloadApp() {
   }
 
   .rightRail--overlay .rightRail__body {
-    padding-bottom: calc(14px + env(safe-area-inset-bottom));
+    padding: 14px 20px calc(32px + env(safe-area-inset-bottom));
   }
 
   .collapsedSearchModal {