Improve UI layout and notification system

- Fix overlapping text issues in file cards and meta information
- Improve download success notification with actual filenames
- Enhance file actions button layout with better spacing
- Add modern notification system with animations and better styling
- Improve responsive design for mobile devices
- Add proper spacing and alignment for read-only badges
- Update notification positioning and mobile responsiveness

UI improvements:
• Better text spacing and wrapping
• Professional notification animations
• Improved mobile layout
• Enhanced file action button alignment

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

script.js

@@ -915,7 +915,8 @@ class FileManager {
                     document.body.removeChild(link);
                 }
             }
-            this.showNotification(`${file.files.length}개의 파일이 다운로드되었습니다!`, 'success');
+            const fileNames = file.files.map(f => f.original_name || f.name).join(', ');
+            this.showNotification(`파일 다운로드 완료: ${fileNames}`, 'success');
         } catch (error) {
             console.error('파일 다운로드 오류:', error);
             this.showNotification('파일 다운로드 중 오류가 발생했습니다.', 'error');
@@ -994,33 +995,23 @@ class FileManager {
     }
 
     showNotification(message, type = 'info') {
+        // 기존 알림이 있으면 제거
+        const existingNotification = document.querySelector('.notification');
+        if (existingNotification) {
+            existingNotification.remove();
+        }
+        
         const notification = document.createElement('div');
-        notification.className = `notification notification-${type}`;
+        notification.className = `notification ${type}`;
-        notification.style.cssText = `
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: ${type === 'success' ? '#48bb78' : '#667eea'};
-            color: white;
-            padding: 15px 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            z-index: 1001;
-            animation: slideIn 0.3s ease;
-            max-width: 300px;
-            word-wrap: break-word;
-        `;
         notification.textContent = message;
         
         document.body.appendChild(notification);
         
-        setTimeout(() => {
+        // 3초 후 자동 제거
-            notification.style.animation = 'slideOut 0.3s ease';
         setTimeout(() => {
             if (notification.parentNode) {
-                    notification.parentNode.removeChild(notification);
+                notification.remove();
             }
-            }, 300);
         }, 3000);
     }
 

styles.css

@@ -158,10 +158,14 @@ header p {
 .read-only-badge {
     background: #74b9ff;
     color: white;
-    padding: 4px 8px;
+    padding: 6px 12px;
-    border-radius: 4px;
+    border-radius: 15px;
     font-size: 0.8em;
     font-weight: 500;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
 }
 
 .sync-status {
@@ -398,6 +402,11 @@ header p {
     color: #666;
     margin-bottom: 10px;
     flex-wrap: wrap;
+    align-items: center;
+}
+
+.file-meta span {
+    white-space: nowrap;
 }
 
 .file-description {
@@ -426,6 +435,8 @@ header p {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
+    align-items: center;
+    margin-top: 10px;
 }
 
 .file-actions button {
@@ -622,4 +633,78 @@ header p {
     .guest-login-btn {
         margin-top: 10px;
     }
+    
+    .notification {
+        left: 10px;
+        right: 10px;
+        top: 10px;
+        max-width: none;
+        margin: 0;
+    }
+    
+    .file-meta {
+        gap: 8px;
+    }
+    
+    .file-meta span {
+        font-size: 0.8rem;
+    }
+    
+    header h1 {
+        font-size: 2rem;
+    }
+}
+
+/* 알림 메시지 스타일 */
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    max-width: 400px;
+    padding: 15px 20px;
+    border-radius: 8px;
+    color: white;
+    font-weight: 500;
+    z-index: 10000;
+    animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s;
+    animation-fill-mode: forwards;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    word-wrap: break-word;
+    line-height: 1.4;
+}
+
+.notification.success {
+    background: linear-gradient(135deg, #48bb78, #38a169);
+    border-left: 4px solid #2f855a;
+}
+
+.notification.error {
+    background: linear-gradient(135deg, #f56565, #e53e3e);
+    border-left: 4px solid #c53030;
+}
+
+.notification.info {
+    background: linear-gradient(135deg, #4299e1, #3182ce);
+    border-left: 4px solid #2c5282;
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
 }