Fix notch issue on iOS

Addresses the notch display issue on iOS devices.

src/components/Header.tsx

@@ -37,8 +37,10 @@ const Header: React.FC = () => {
     };
   }, []);
 
+  const headerClass = isIOS ? 'has-safe-area-top' : 'py-4';
+
   return (
-    <header className={`py-4 ${isIOS ? 'ios-header' : ''}`}>
+    <header className={headerClass}>
       <div className="flex justify-between items-center">
         <div className="flex items-center">
           <Avatar className="h-12 w-12 mr-3">

src/components/SafeAreaContainer.tsx

@@ -30,8 +30,8 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   let safeAreaClass = '';
   
   if (isIOS) {
-    if (!bottomOnly) safeAreaClass += ' pt-12'; // iOS 상단 안전 영역
+    if (!bottomOnly) safeAreaClass += ' has-safe-area-top'; // iOS 상단 안전 영역
-    if (!topOnly) safeAreaClass += ' pb-8';     // iOS 하단 안전 영역
+    if (!topOnly) safeAreaClass += ' has-safe-area-bottom'; // iOS 하단 안전 영역
   } else {
     if (!bottomOnly) safeAreaClass += ' pt-4';  // 안드로이드 상단 여백
     if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백

src/index.css

@@ -53,10 +53,10 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
 
     /* Safe area 값 */
-    --safe-area-top: 0px;
+    --safe-area-top: env(safe-area-inset-top, 0px);
-    --safe-area-bottom: 0px;
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
-    --safe-area-left: 0px;
+    --safe-area-left: env(safe-area-inset-left, 0px);
-    --safe-area-right: 0px;
+    --safe-area-right: env(safe-area-inset-right, 0px);
   }
 
   .dark {
@@ -152,15 +152,15 @@
   
   /* 안전 영역 관련 클래스 */
   .has-safe-area-top {
-    padding-top: max(1rem, env(safe-area-inset-top));
+    padding-top: max(1rem, var(--safe-area-top));
   }
   
   .has-safe-area-bottom {
-    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+    padding-bottom: max(1rem, var(--safe-area-bottom));
   }
   
   .ios-header {
-    padding-top: max(1rem, env(safe-area-inset-top));
+    padding-top: max(1rem, var(--safe-area-top));
   }
   
   /* 모바일 화면에서의 추가 스타일 */
@@ -260,12 +260,10 @@
 /* iOS 전용 스타일 */
 @supports (-webkit-touch-callout: none) {
   .ios-safe-area-top {
-    --safe-area-top: env(safe-area-inset-top);
     padding-top: var(--safe-area-top);
   }
   
   .ios-safe-area-bottom {
-    --safe-area-bottom: env(safe-area-inset-bottom);
     padding-bottom: var(--safe-area-bottom);
   }
 }

src/pages/Settings.tsx

@@ -8,6 +8,7 @@ import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from '
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/auth';
 import { useToast } from '@/hooks/useToast.wrapper';
+import SafeAreaContainer from '@/components/SafeAreaContainer';
 
 const SettingsOption = ({
   icon: Icon,
@@ -57,8 +58,9 @@ const Settings = () => {
     navigate(path);
   };
   
-  return <div className="min-h-screen bg-neuro-background pb-24">
+  return (
-      <div className="max-w-md mx-auto px-6">
+    <SafeAreaContainer className="min-h-screen bg-neuro-background">
+      <div className="max-w-md mx-auto px-6 pb-24">
         {/* Header */}
         <header className="py-4">
           <h1 className="font-bold neuro-text mb-3 text-xl">설정</h1>
@@ -121,7 +123,8 @@ const Settings = () => {
       </div>
 
       <NavBar />
-    </div>;
+    </SafeAreaContainer>
+  );
 };
 
 export default Settings;