From 46f5a2432c458f7c68e908f1f3deceea938267a7 Mon Sep 17 00:00:00 2001
From: "sunjin.jo" <sunjin.jo@selim.kr>
Date: Wed, 5 Aug 2026 16:49:25 +0900
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20=EC=95=84=EC=9D=B4=ED=8F=B0=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=E2=80=94=20=EC=95=88=EC=A0=84?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=20=EC=83=81=EC=8B=9C=20=EC=A0=81=EC=9A=A9?=
 =?UTF-8?q?=C2=B7=ED=91=B8=ED=84=B0=20=EB=B6=95=EA=B4=B4=C2=B7=ED=82=A4?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=ED=9E=8C=ED=8A=B8=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Capacitor 네이티브 셸은 display-mode standalone이 아니라 안전영역
패딩이 빠져 헤더가 노치/상태바와 겹치던 문제를 body 상시 적용으로
수정하고(데스크톱은 env()=0이라 무해), 패딩 영역 배경을 앱 다크 톤과
일치. FooterHelp는 좁은 화면에서 팁 텍스트가 1글자 폭으로 세로
붕괴하고 터치 기기에 키보드 단축키(DFJK/Ctrl+Z)가 노출되던 것을
md 브레이크포인트로 분리 — 모바일은 탭 안내 한 줄만. 데스크톱 표시는
무변경(e2e 영향 없음).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/maestro/FooterHelp.jsx | 14 ++++++++++----
 src/index.css                         | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/maestro/FooterHelp.jsx b/src/components/maestro/FooterHelp.jsx
index 2b486cc..b699c08 100644
--- a/src/components/maestro/FooterHelp.jsx
+++ b/src/components/maestro/FooterHelp.jsx
@@ -8,11 +8,17 @@ export default function FooterHelp({ lanes = [] }) {
     .join(' ');
 
   return (
-    <footer className="p-3 bg-gray-900 border-t border-gray-800 text-xs text-gray-500 flex justify-between items-center z-10">
-      <div>
-        Tip: 떨어지는 노트를 <strong className="text-gray-300">클릭</strong>하여 코드 수정 내역(Diff)을 살짝 엿볼 수 있습니다.
+    <footer className="p-3 bg-gray-900 border-t border-gray-800 text-xs text-gray-500 flex justify-between items-center gap-3 z-10">
+      <div className="min-w-0">
+        <span className="hidden md:inline">
+          Tip: 떨어지는 노트를 <strong className="text-gray-300">클릭</strong>하여 코드 수정 내역(Diff)을 살짝 엿볼 수 있습니다.
+        </span>
+        {/* 좁은 화면(터치): 키보드 힌트 대신 탭 안내 한 줄만 */}
+        <span className="md:hidden">
+          Tip: 노트를 <strong className="text-gray-300">탭</strong>하면 Diff, 하단 레인 버튼으로 승인/반려.
+        </span>
       </div>
-      <div className="flex space-x-4">
+      <div className="hidden md:flex space-x-4">
         <span className="flex items-center"><kbd className="bg-gray-800 px-1.5 py-0.5 rounded border border-gray-700 mx-1">1</kbd><kbd className="bg-gray-800 px-1.5 py-0.5 rounded border border-gray-700 mr-1">2</kbd><kbd className="bg-gray-800 px-1.5 py-0.5 rounded border border-gray-700">3</kbd> 프로젝트 전환</span>
         <span className="flex items-center"><kbd className="bg-gray-800 px-1.5 py-0.5 rounded border border-gray-700 mx-1 text-gray-300">{laneKeys || 'Click'}</kbd> 승인</span>
         <span className="flex items-center"><kbd className="bg-gray-800 px-1.5 py-0.5 rounded border border-gray-700 mx-1 text-gray-300">Shift + {laneKeys || 'Click'}</kbd> 반려(피드백)</span>
diff --git a/src/index.css b/src/index.css
index 24b02cf..29abc90 100644
--- a/src/index.css
+++ b/src/index.css
@@ -45,12 +45,14 @@
   min-width: auto;
 }
 
-/* --- PWA standalone(홈 화면 추가) 안전 영역 — 노치/홈 인디케이터 침범 방지 --- */
-@media (display-mode: standalone) {
-  body {
-    padding-top: env(safe-area-inset-top);
-    padding-right: env(safe-area-inset-right);
-    padding-bottom: env(safe-area-inset-bottom);
-    padding-left: env(safe-area-inset-left);
-  }
+/* --- 안전 영역 — 노치/홈 인디케이터 침범 방지 ---
+   PWA standalone뿐 아니라 Capacitor 네이티브 셸(WKWebView, display-mode: browser)도
+   침범 대상이라 무조건 적용한다. 데스크톱/일반 브라우저는 env()가 0이라 무해. */
+body {
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  /* 안전 영역(패딩) 뒤로 비치는 배경을 앱 다크 톤(bg-gray-950)과 일치시킨다 */
+  background-color: #030712;
 }