Merge branch 'design/frontend' into feature/negodata

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}

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);
 }

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">

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>