Add bottom padding to page

Adds 80px of bottom padding to the page.

src/components/SafeAreaContainer.tsx

@@ -7,6 +7,7 @@ interface SafeAreaContainerProps {
   className?: string;
   topOnly?: boolean;
   bottomOnly?: boolean;
+  extraBottomPadding?: boolean; // 추가 하단 여백 옵션
 }
 
 /**
@@ -17,7 +18,8 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   children,
   className = '',
   topOnly = false,
-  bottomOnly = false
+  bottomOnly = false,
+  extraBottomPadding = false // 기본값은 false
 }) => {
   const [isIOS, setIsIOS] = useState(false);
   
@@ -37,8 +39,11 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
     if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백
   }
 
+  // 추가 하단 여백 적용
+  const extraBottomClass = extraBottomPadding ? 'pb-[80px]' : '';
+
   return (
-    <div className={`${safeAreaClass} ${className}`}>
+    <div className={`${safeAreaClass} ${extraBottomClass} ${className}`}>
       {children}
     </div>
   );

src/pages/Index.tsx

@@ -150,7 +150,7 @@ const Index = () => {
   }, []);
 
   return (
-    <SafeAreaContainer className="min-h-screen bg-neuro-background pb-24">
+    <SafeAreaContainer className="min-h-screen bg-neuro-background pb-24" extraBottomPadding={true}>
       <div className="max-w-md mx-auto px-6">
         <Header />