Refactor: Adapt to design changes

The design has been significantly updated, requiring code adjustments.

src/index.css

@@ -1,3 +1,4 @@
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 @tailwind base;
@@ -51,6 +52,12 @@
     --sidebar-border: 220 13% 91%;
 
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    /* Safe area 값 */
+    --safe-area-top: 0px;
+    --safe-area-bottom: 0px;
+    --safe-area-left: 0px;
+    --safe-area-right: 0px;
   }
 
   .dark {
@@ -144,6 +151,19 @@
     @apply neuro-pressed px-4 py-3 w-full focus:outline-none focus:ring-2 focus:ring-neuro-accent/30;
   }
   
+  /* 안전 영역 관련 클래스 */
+  .has-safe-area-top {
+    padding-top: max(1rem, env(safe-area-inset-top));
+  }
+  
+  .has-safe-area-bottom {
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+  }
+  
+  .ios-header {
+    padding-top: max(1rem, env(safe-area-inset-top));
+  }
+  
   /* 모바일 화면에서의 추가 스타일 */
   @media (max-width: 768px) {
     .neuro-card {
@@ -185,6 +205,20 @@
   }
 }
 
+/* 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);
+  }
+}
+
 .font-inter {
   font-family: 'Inter', sans-serif;
 }
+