body {
            font-family: 'Noto Sans KR', sans-serif;
            background-color: #F8FAFC; /* Slate 50 */
        }
        
        /* Sidebar Active State */
        .nav-item.active {
            background-color: #E0F2FE; /* Sky 100 */
            color: #0284C7; /* Sky 600 */
            border-right: 3px solid #0284C7;
        }
        .nav-item {
            transition: all 0.2s;
            border-right: 3px solid transparent;
        }

        /* Mode Selection Card Selected State */
        .mode-card.selected {
            border-color: #0284C7;
            background-color: #F0F9FF;
            box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.1), 0 2px 4px -1px rgba(2, 132, 199, 0.06);
        }
        .mode-card.selected .check-icon {
            opacity: 1;
            transform: scale(1);
        }

        /* Animation */
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Custom File Input */
        .file-drop-zone {
            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23CBD5E1FF' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
            transition: all 0.2s;
        }
        .file-drop-zone:hover {
            background-color: #F8FAFC;
            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%230EA5E9FF' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
        }

        /* Loading Spinner */
        .spinner {
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 3px solid #0284C7;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }