Check iOS notch handling

Verify that the iOS notch handling feature is working correctly.

src/components/SafeAreaContainer.tsx

@@ -12,6 +12,7 @@ interface SafeAreaContainerProps {
 /**
  * 플랫폼별 안전 영역(Safe Area)을 고려한 컨테이너 컴포넌트
  * iOS에서는 노치/다이나믹 아일랜드를 고려한 여백 적용
+ * CSS 변수와 env() 함수를 사용하여 정확한 안전 영역 계산
  */
 const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   children,
@@ -24,17 +25,24 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   // 마운트 시 플랫폼 확인
   useEffect(() => {
     setIsIOS(isIOSPlatform());
+    
+    // iOS 디버깅용 로그
+    if (isIOSPlatform()) {
+      console.info('iOS 플랫폼 감지됨 - 안전 영역 적용');
+    }
   }, []);
 
   // 플랫폼에 따른 클래스 결정
   let safeAreaClass = '';
   
   if (isIOS) {
-    if (!bottomOnly) safeAreaClass += ' pt-12'; // iOS 상단 안전 영역
-    if (!topOnly) safeAreaClass += ' pb-8';     // iOS 하단 안전 영역
+    safeAreaClass = 'ios-safe-area';
+    
+    if (bottomOnly) safeAreaClass += ' ios-safe-area-bottom-only';
+    if (topOnly) safeAreaClass += ' ios-safe-area-top-only';
   } else {
-    if (!bottomOnly) safeAreaClass += ' pt-4';  // 안드로이드 상단 여백
-    if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백
+    // 안드로이드 기본 여백
+    safeAreaClass = 'android-safe-area';
   }
 
   return (