Reverted to edit edt-308e7f80-d1d7-4d72-9210-72d1422090e9: "Visual edit in Lovable

Edited UI in Lovable"

src/index.css

@@ -1,84 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* Define the glassmorphism effect */
-.glass {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-/* Define the neumorphism effect */
-.neuro {
-  background: #E0E5EC;
-  border-radius: 10px;
-  box-shadow: -5px -5px 10px #FFFFFF,
-              5px 5px 10px #BABECC;
-}
-/* Neumorphism text */
-.neuro-text {
-  color: #666;
-  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #babebc;
-}
-/* Flat neumorphism effect (pressed) */
-.neuro-flat {
-  border-radius: 10px;
-  background: #E0E5EC;
-  box-shadow: inset -5px -5px 10px #FFFFFF,
-              inset 5px 5px 10px #BABECC;
-}
-/* Skeleton styles */
-.skeleton {
-  animation: skeleton-loading 1.2s linear infinite alternate;
-}
 
-@keyframes skeleton-loading {
-  0% {
-    background-color: hsl(200, 20%, 70%);
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 1rem;
+
+    --sidebar-background: 0 0% 98%;
+
+    --sidebar-foreground: 240 5.3% 26.1%;
+
+    --sidebar-primary: 240 5.9% 10%;
+
+    --sidebar-primary-foreground: 0 0% 98%;
+
+    --sidebar-accent: 240 4.8% 95.9%;
+
+    --sidebar-accent-foreground: 240 5.9% 10%;
+
+    --sidebar-border: 220 13% 91%;
+
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
-  100% {
-    background-color: hsl(200, 20%, 95%);
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
-/* 안전 영역 (Safe Area) 관련 유틸리티 클래스 */
-:root {
-  --safe-area-top: 0px;
-  --safe-area-bottom: 0px;
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-neuro-background text-foreground font-inter antialiased;
+  }
+  
+  html, body, #root {
+    @apply h-full overflow-x-hidden;
+  }
 }
 
-.pt-safe-area {
-  padding-top: var(--safe-area-top);
+@layer components {
+  .neuro-flat {
+    @apply bg-neuro-background shadow-neuro-flat rounded-xl;
+  }
+  
+  .neuro-pressed {
+    @apply bg-neuro-background shadow-neuro-pressed rounded-xl;
+  }
+  
+  .neuro-convex {
+    @apply bg-neuro-background shadow-neuro-convex rounded-xl;
+  }
+  
+  .neuro-text {
+    @apply font-medium tracking-wide;
+  }
+  
+  .page-transition-enter {
+    @apply animate-fade-in;
+  }
+  
+  .glass-effect {
+    @apply bg-white/10 backdrop-blur-lg border border-white/20 rounded-xl;
+  }
+  
+  .neuro-button {
+    @apply neuro-flat px-4 py-3 text-neuro-accent font-medium transition-all duration-200
+    hover:shadow-neuro-convex hover:text-neuro-accent-light active:shadow-neuro-pressed;
+  }
+  
+  .neuro-card {
+    @apply neuro-flat p-6 transition-all duration-300 hover:shadow-neuro-convex;
+  }
+  
+  .neuro-input {
+    @apply neuro-pressed px-4 py-3 w-full focus:outline-none focus:ring-2 focus:ring-neuro-accent/30;
+  }
+  
+  /* 모바일 화면에서의 추가 스타일 */
+  @media (max-width: 768px) {
+    .neuro-card {
+      @apply w-full;
+    }
+    
+    #root {
+      @apply p-0;
+    }
+    
+    /* 모바일에서 팝업과 다이얼로그 스타일 보정 */
+    [role="dialog"] {
+      @apply rounded-xl overflow-hidden;
+    }
+    
+    /* 다이얼로그 내용에 적용되는 스타일 */
+    .DialogContent, 
+    .PopoverContent, 
+    .AlertDialogContent, 
+    .DrawerContent, 
+    .SheetContent {
+      @apply rounded-xl overflow-hidden;
+    }
+  }
+  
+  /* 데스크탑 화면에서의 추가 스타일 */
+  @media (min-width: 769px) {
+    #root {
+      @apply px-0;
+    }
+    
+    .desktop-container {
+      @apply max-w-md mx-auto;
+    }
+    
+    .desktop-card {
+      @apply w-full mx-auto;
+    }
+  }
 }
 
-.pb-safe-area {
-  padding-bottom: var(--safe-area-bottom);
-}
-
-.ios-platform .needs-top-safe-area {
-  padding-top: var(--safe-area-top);
-}
-
-.ios-platform .needs-bottom-safe-area {
-  padding-bottom: var(--safe-area-bottom);
-}
-
-/* 추가 플랫폼별 스타일 */
-.ios-platform-only {
-  display: none;
-}
-
-.android-platform-only {
-  display: none;
-}
-
-.ios-platform .ios-platform-only {
-  display: block;
-}
-
-.android-platform .android-platform-only {
-  display: block;
+.font-inter {
+  font-family: 'Inter', sans-serif;
 }