Update assets/styles.css

assets/styles.css

@@ -1,163 +1,86 @@
-body {
-    font-family: 'Outfit', sans-serif;
-    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
-    margin: 0;
-    padding: 20px;
-    min-height: 100vh;
-}
-
-.header {
-    background: linear-gradient(135deg, #ff6b35, #d43425);
-    padding: 20px 30px;
-    border-radius: 15px;
-    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
-    margin-bottom: 20px;
-}
-
-.control-card {
-    background: rgba(15, 15, 20, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 15px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-}
-
-.chart-card {
-    background: rgba(15, 15, 20, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 15px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-}
-
-.datacard {
-    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(212, 52, 37, 0.1));
-    border: 1px solid rgba(255, 107, 53, 0.3);
-    border-radius: 12px;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
-}
-
-.datacard:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 30px rgba(255, 107, 53, 0.2);
-}
-
-.year-slider .mantine-Slider-track {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.year-slider .mantine-Slider-bar {
-    background: linear-gradient(90deg, #ff6b35, #d43425);
-}
-
-.year-slider .mantine-Slider-thumb {
-    background: #ff6b35;
-    border: 2px solid white;
-}
-
-.continent-select .mantine-Select-input,
-.country-select .mantine-Select-input {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-}
-
-.continent-select .mantine-Select-input:focus,
-.country-select .mantine-Select-input:focus {
-    border-color: #ff6b35;
-    box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
-}
-
-/* Custom scrollbar for dropdowns */
-.mantine-Select-dropdown {
-    background: rgba(15, 15, 20, 0.95);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-}
-
-.mantine-Select-item {
-    color: white;
-}
-
-.mantine-Select-item:hover {
-    background: rgba(255, 107, 53, 0.2);
-}
+/* ===== Flat Minimal theme (no shadows, no glass, no gradients) ===== */
 
-/* Graph styling adjustments */
-.js-plotly-plot {
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    body {
-        padding: 10px;
-    }
-    
-    .header {
-        padding: 15px 20px;
-    }
-    
-    .control-card,
-    .chart-card {
-        margin: 10px 0;
-    }
-}
-
-/* Sankey 그래프 id가 fig-sankey 라고 가정 */
-#fig-sankey .js-plotly-plot,
-#fig-sankey .plot-container,
-#fig-sankey .main-svg{
-  height: 420px !important;   /* 컨테이너 강제 고정 */
-}
-
-
-/* ===== Global look & feel ===== */
+/* 페이지 기본톤 */
 :root{
-  --bg: #f8fafc;         /* page background */
-  --card-bg: #ffffff;    /* panels */
+  --bg: #f6f7fb;
+  --card-bg: #ffffff;
   --text: #0f172a;
   --muted: #64748b;
   --grid: #e5e7eb;
-  --shadow: 0 6px 20px rgba(2,6,23,.06);
-  --radius: 14px;
+  --radius: 12px;
 }
 
-/* Page */
-body{
+/* 전체 페이지 */
+html, body{
   background: var(--bg) !important;
   color: var(--text);
   font-family: Inter, Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
-/* Plotly graphs → card 느낌 */
+/* 헤더/컨트롤/카드: 그림자·블러 제거, 플랫 보더만 */
+.header,
+.control-card,
+.chart-card,
+.datacard{
+  background: var(--card-bg) !important;
+  border: 1px solid #eaecef !important;
+  border-radius: var(--radius) !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+/* Plotly 그래프 컨테이너: 플랫 카드 */
 .js-plotly-plot{
-  background: var(--card-bg);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 12px;
+  background: var(--card-bg) !important;
+  border: 1px solid #eaecef !important;
+  border-radius: var(--radius) !important;
+  box-shadow: none !important;
+  padding: 8px !important;
+}
+
+/* Sankey 높이 락(필요 시 유지) */
+#fig-sankey .js-plotly-plot,
+#fig-sankey .plot-container,
+#fig-sankey .main-svg{
+  height: 420px !important;
 }
 
 /* Dash DataTable */
 .dash-table-container{
-  background: var(--card-bg);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 8px 10px;
+  background: var(--card-bg) !important;
+  border: 1px solid #eaecef !important;
+  border-radius: var(--radius) !important;
+  box-shadow: none !important;
+  padding: 8px 10px !important;
 }
 .dash-table-container .dash-spreadsheet-container{
   border: none !important;
 }
-.dash-table-container .dash-table-tooltip{
-  font-size: 12px;
-}
 
-/* Tabs (워터폴/PPC) 정리 */
+/* Tabs (워터폴/PPC) */
 .tab, .tab--selected{
   background: var(--card-bg) !important;
+  border: 1px solid #eaecef !important;
   border-radius: 10px !important;
-  box-shadow: var(--shadow);
+  box-shadow: none !important;
   margin-right: 8px;
 }
+
+/* 선택/드롭다운 등(사용 중이면) */
+.continent-select .mantine-Select-input,
+.country-select .mantine-Select-input{
+  background: #fff !important;
+  border: 1px solid #eaecef !important;
+  color: var(--text) !important;
+}
+.mantine-Select-dropdown{
+  background: #fff !important;
+  border: 1px solid #eaecef !important;
+}
+
+/* 반응형 여백 */
+@media (max-width: 768px){
+  .control-card, .chart-card{ margin: 10px 0 !important; }
+}