style.css

/* ═══════════════════════════════════════════════════════════
   🔘 NEUMORPHISM 스타일
   ═══════════════════════════════════════════════════════════ */

/* 🎨 핵심 색상 팔레트 */
:root {
    --neu-bg: #e0e5ec;
    --neu-shadow-dark: #b8bec5;
    --neu-shadow-light: #ffffff;
    --neu-text: #6d7b8d;
    --neu-text-dark: #5a6677;
    --neu-accent: #FF6B6B;
    --neu-accent-2: #4ECDC4;
}

/* 📦 기본 배경 */
body, .gradio-container {
    background: var(--neu-bg) !important;
}

.neu-container {
    background: var(--neu-bg);
}

/* 🔲 볼록 효과 (Raised) */
.neu-raised {
    background: var(--neu-bg);
    border-radius: 20px;
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
}

/* 🔳 오목 효과 (Inset/Pressed) */
.neu-inset {
    background: var(--neu-bg);
    border-radius: 15px;
    box-shadow: 
        inset 6px 6px 12px var(--neu-shadow-dark),
        inset -6px -6px 12px var(--neu-shadow-light);
}

/* 🔘 버튼 스타일 */
.neu-button, button.primary {
    background: var(--neu-bg) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 18px 50px !important;
    color: var(--neu-text) !important;
    font-weight: 700 !important;
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light) !important;
    transition: all 0.2s ease !important;
}

.neu-button:hover, button.primary:hover {
    box-shadow: 
        4px 4px 8px var(--neu-shadow-dark),
        -4px -4px 8px var(--neu-shadow-light) !important;
}

.neu-button:active, button.primary:active {
    box-shadow: 
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light) !important;
}

/* 📝 텍스트 스타일 */
.neu-text {
    color: var(--neu-text);
    text-shadow: 
        2px 2px 4px var(--neu-shadow-light),
        -1px -1px 3px rgba(0,0,0,0.1);
}

/* Gradio 컴포넌트 스타일 오버라이드 */
.gradio-container .tabs {
    background: var(--neu-bg) !important;
}

.gradio-container .tab-nav button {
    background: var(--neu-bg) !important;
    border-radius: 15px !important;
    margin: 5px !important;
    box-shadow: 
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light) !important;
}

.gradio-container .tab-nav button.selected {
    box-shadow: 
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light) !important;
}

/* DataFrame 스타일 */
.gradio-container table {
    background: var(--neu-bg) !important;
    border-radius: 15px !important;
    box-shadow: 
        inset 3px 3px 6px var(--neu-shadow-dark),
        inset -3px -3px 6px var(--neu-shadow-light) !important;
}

/* Plot 컨테이너 */
.gradio-container .plot-container {
    background: var(--neu-bg) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light) !important;
}

/* 카드 스타일 */
.space-card, .model-card {
    background: var(--neu-bg);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.space-card:hover, .model-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        12px 12px 24px var(--neu-shadow-dark),
        -12px -12px 24px var(--neu-shadow-light);
}

/* 링크 버튼 */
.visit-link {
    display: inline-block;
    padding: 12px 24px;
    background: var(--neu-bg);
    color: var(--neu-text);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 
        5px 5px 10px var(--neu-shadow-dark),
        -5px -5px 10px var(--neu-shadow-light);
    transition: all 0.2s ease;
}

.visit-link:hover {
    box-shadow: 
        3px 3px 6px var(--neu-shadow-dark),
        -3px -3px 6px var(--neu-shadow-light);
}

/* 그리드 레이아웃 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    padding: 20px;
}

/* 헤더 스타일 */
.main-title {
    color: var(--neu-text-dark);
    font-size: 2.5em;
    font-weight: 800;
    text-shadow: 
        2px 2px 4px var(--neu-shadow-light),
        -1px -1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* 뱃지 스타일 */
.korea-badge {
    display: inline-block;
    padding: 5px 15px;
    background: linear-gradient(145deg, #FF6B6B, #FF8E8E);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 
        3px 3px 6px var(--neu-shadow-dark),
        -3px -3px 6px var(--neu-shadow-light);
}

/* 차트 컨테이너 */
#spaces_pie, #models_pie, #spaces_bar, #models_bar {
    min-height: 400px;
    border-radius: 20px;
    box-shadow: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    background: var(--neu-bg);
    padding: 15px;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neu-bg);
    border-radius: 10px;
    box-shadow: 
        inset 2px 2px 4px var(--neu-shadow-dark),
        inset -2px -2px 4px var(--neu-shadow-light);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(145deg, #c8cdd4, #f0f5fc);
    border-radius: 10px;
    box-shadow: 
        2px 2px 4px var(--neu-shadow-dark),
        -2px -2px 4px var(--neu-shadow-light);
}