From fe9adcaa26f927cb90821934b5d8d315bddc8290 Mon Sep 17 00:00:00 2001
From: Mina Choi <mnchoi@o2o.kr>
Date: Wed, 29 Jul 2026 09:56:11 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20negosium/front:=20=ED=8F=AC=ED=84=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20safe-area=20=EC=97=AC=EB=B0=B1=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC=20=E2=80=94=20=ED=97=A4=EB=8D=94=20=EB=85=B8?=
 =?UTF-8?q?=EC=B9=98(safe-t+min-h)=C2=B7=EB=AA=A9=EB=A1=9D=20=EC=A2=8C?=
 =?UTF-8?q?=EC=9A=B0/=ED=95=98=EB=8B=A8(safe-x/safe-b)=C2=B7=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EA=B0=80=EC=9E=A5=EC=9E=90=EB=A6=AC=20=EC=97=AC?=
 =?UTF-8?q?=EB=B0=B1(p-4),=20=EC=B1=84=ED=8C=85=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=EB=B0=94=20=ED=8A=B8=EB=9E=99=20=EC=83=81=EB=8B=A8=20?=
 =?UTF-8?q?64px=20=EC=97=AC=EB=B0=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Modal.tsx     | 2 +-
 frontend/src/index.css                | 4 ----
 frontend/src/layouts/PortalHeader.tsx | 2 +-
 frontend/src/pages/ListPage.tsx       | 4 ++--
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 9ace715..05be20c 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -21,7 +21,7 @@ export function Modal({ children, onClose }: ModalProps) {
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.40)]"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.40)] p-4"
       onClick={handleBackdropClick}
     >
       {children}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5316240..d7e9966 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -221,10 +221,6 @@
 }
 
 /* 채팅 영역 스크롤바 (배경과 구분되게 진하게) */
-/* 트랙 상단 64px 여백: 콘텐츠는 맨 위까지 스크롤되지만 스크롤바는 우측 협상절차 카드 상단과 같은 높이에서 시작 */
-.chat-scroll::-webkit-scrollbar-track {
-  margin-top: 64px;
-}
 .chat-scroll::-webkit-scrollbar-thumb {
   background-color: var(--neutral-40);
 }
diff --git a/frontend/src/layouts/PortalHeader.tsx b/frontend/src/layouts/PortalHeader.tsx
index c3e161b..c79795c 100644
--- a/frontend/src/layouts/PortalHeader.tsx
+++ b/frontend/src/layouts/PortalHeader.tsx
@@ -14,7 +14,7 @@ export function PortalHeader() {
     logout.mutate(undefined, { onSuccess: () => navigate('/') })
 
   return (
-    <header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-border bg-white/90 px-4 shadow-sm backdrop-blur sm:px-6">
+    <header className="sticky top-0 z-40 flex min-h-[calc(4rem+env(safe-area-inset-top))] safe-t items-center justify-between border-b border-border bg-white/90 px-4 shadow-sm backdrop-blur sm:px-6">
       <Logo size="md" serviceName={user?.branding?.service_name} logoUrl={user?.branding?.logo_url} />
 
       <div className="flex items-center gap-2 sm:gap-3">
diff --git a/frontend/src/pages/ListPage.tsx b/frontend/src/pages/ListPage.tsx
index 311b4b3..e1c7efd 100644
--- a/frontend/src/pages/ListPage.tsx
+++ b/frontend/src/pages/ListPage.tsx
@@ -3,13 +3,13 @@ import { ListWorkspace } from '@/features/list'
 
 export function ListPage() {
   return (
-    <div className="flex min-h-svh flex-col bg-surface">
+    <div className="flex min-h-svh flex-col bg-surface safe-x">
       <PortalHeader />
       <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6">
         <ListWorkspace />
       </main>
       {/* 솔루션·제작사 표기 — 회사 브랜딩(헤더 로고)과 무관하게 고정 */}
-      <footer className="border-t border-border px-4 py-4 text-center sm:px-6">
+      <footer className="border-t border-border px-4 py-4 text-center sm:px-6 safe-b">
         <p className="text-[11px] font-medium text-neutral-50">
           © {new Date().getFullYear()} negotium · Made by AI O2O
         </p>