feat: 전역 css 수정

Author: minsukim-29cm

index.html

@@ -11,7 +11,7 @@
 
     <meta charset="UTF-8" />
     <meta name="description" content="Human Zipyo" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
     <link
       rel="preload"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"

src/index.css

@@ -54,6 +54,15 @@ body {
   background-color: rgba(255, 255, 255, 0.2);
   min-width: 320px;
   min-height: 100vh;
+  min-height: 100dvh; /* 동적 viewport height - 모바일 브라우저 주소창 제외 */
   /* overflow: hidden; */
   overscroll-behavior: contain;
+  /* 웹뷰 최적화 */
+  -webkit-tap-highlight-color: transparent; /* 터치 하이라이트 제거 */
+  touch-action: pan-y; /* 가로 스크롤 방지 */
+  /* Safe Area 패딩 - 노치/홈 인디케이터 영역 */
+  padding-top: env(safe-area-inset-top);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  /* bottom은 바텀 네비게이션에서 처리 */
 }

src/layout/BottomNavigation/BottomNavigation.Style.ts

@@ -10,10 +10,16 @@ const NavContainer = styled('nav')({
   backgroundColor: theme.colors.sub_black,
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: '20px 33px 30px',
+  padding: '16px 33px',
+  paddingBottom: 'max(16px, env(safe-area-inset-bottom))',
   boxSizing: 'border-box',
   zIndex: '10',
   boxShadow: '0px -2px 10px 0px rgba(255, 255, 255, 0.05)',
+  // 웹뷰 최적화
+  WebkitBackfaceVisibility: 'hidden',
+  backfaceVisibility: 'hidden',
+  transform: 'translateZ(0)', // GPU 가속
+  willChange: 'transform',
 });
 
 const NavItem = styled('div')<{ isActive: boolean }>(({ isActive }) => ({