Update keyword_analysis_report.css

keyword_analysis_report.css

@@ -1,11 +1,84 @@
-/* 키워드 분석 보고서 전용 CSS */
+/* 키워드 분석 보고서 전용 CSS - 다크모드 적용 */
+
+/* CSS 변수 정의 (라이트모드) */
+:root {
+    --primary-color: #FB7F0D;
+    --text-color: #333;
+    --bg-color: #f8f9fa;
+    --card-bg: #ffffff;
+    --border-color: #ecf0f1;
+    --section-bg: #ffffff;
+    --insight-bg: #fff5e6;
+    --warning-bg: #fff3cd;
+    --warning-text: #856404;
+    --checklist-bg: #fff3cd;
+    --cross-sell-bg: #f8f9fa;
+    --cross-sell-border: #17a2b8;
+    --cross-sell-text: #0c5460;
+    --product-bg: white;
+    --trend-bg: #e3f2fd;
+    --trend-border: #2196f3;
+    --metric-bg: #f8f9fa;
+    --metric-border: #dee2e6;
+    --highlight-bg: #fff3cd;
+}
+
+/* 다크모드 색상 변수 (자동 감지) */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text-color: #e5e5e5;
+        --bg-color: #1a1a1a;
+        --card-bg: #2d2d2d;
+        --border-color: #404040;
+        --section-bg: #2d2d2d;
+        --insight-bg: #3d2817;
+        --warning-bg: #3d3317;
+        --warning-text: #d4b75f;
+        --checklist-bg: #3d3317;
+        --cross-sell-bg: #1a1a1a;
+        --cross-sell-border: #17a2b8;
+        --cross-sell-text: #4dd0e1;
+        --product-bg: #2d2d2d;
+        --trend-bg: #1a2332;
+        --trend-border: #2196f3;
+        --metric-bg: #2d2d2d;
+        --metric-border: #404040;
+        --highlight-bg: #3d3317;
+    }
+}
+
+/* 수동 다크모드 클래스 */
+[data-theme="dark"],
+.dark,
+.gr-theme-dark {
+    --text-color: #e5e5e5;
+    --bg-color: #1a1a1a;
+    --card-bg: #2d2d2d;
+    --border-color: #404040;
+    --section-bg: #2d2d2d;
+    --insight-bg: #3d2817;
+    --warning-bg: #3d3317;
+    --warning-text: #d4b75f;
+    --checklist-bg: #3d3317;
+    --cross-sell-bg: #1a1a1a;
+    --cross-sell-border: #17a2b8;
+    --cross-sell-text: #4dd0e1;
+    --product-bg: #2d2d2d;
+    --trend-bg: #1a2332;
+    --trend-border: #2196f3;
+    --metric-bg: #2d2d2d;
+    --metric-border: #404040;
+    --highlight-bg: #3d3317;
+}
+
 .keyword-analysis-report {
     font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
     line-height: 1.6;
-    color: #333;
+    color: var(--text-color);
     margin: 0;
     padding: 0;
-    background-color: #f8f9fa;
+    background-color: var(--bg-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .report-container {
@@ -19,20 +92,22 @@
     text-align: center;
     font-size: 2.2em;
     margin-bottom: 30px;
-    color: #2c3e50;
+    color: var(--text-color);
     font-weight: 700;
-    border-bottom: 3px solid #2ecc71;
+    border-bottom: 3px solid var(--primary-color);
     padding-bottom: 15px;
 }
 
 /* 각 분석 항목별 섹션 블록 */
 .analysis-section-block {
-    background-color: #ffffff;
+    background-color: var(--section-bg);
     padding: 25px 30px;
     margin-bottom: 25px;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    border-left: 5px solid #2ecc71;
+    border-left: 5px solid var(--primary-color);
+    color: var(--text-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .analysis-section-block:nth-child(1) { border-left-color: #3498db; }
@@ -45,12 +120,12 @@
 
 .analysis-section-title {
     margin: 0 0 20px 0;
-    color: #2c3e50;
+    color: var(--text-color);
     font-size: 1.6em;
     font-weight: 700;
     display: flex;
     align-items: center;
-    border-bottom: 2px solid #ecf0f1;
+    border-bottom: 2px solid var(--border-color);
     padding-bottom: 10px;
 }
 
@@ -65,41 +140,44 @@
 .analysis-section-block:nth-child(2) .section-icon { color: #e74c3c; }
 .analysis-section-block:nth-child(3) .section-icon { color: #f39c12; }
 .analysis-section-block:nth-child(4) .section-icon { color: #9b59b6; }
-.analysis-section-block:nth-child(5) .section-icon { color: #1abc9c; }
+.analysis-section-block:nth-child(5) .section-icon { color: var(--primary-color); }
 .analysis-section-block:nth-child(6) .section-icon { color: #34495e; }
 .analysis-section-block:nth-child(7) .section-icon { color: #e67e22; }
 
 .subsection-title {
-    color: #34495e;
+    color: var(--text-color);
     margin: 20px 0 10px 0;
     font-size: 1.1em;
     font-weight: 600;
 }
 
 .key-insight {
-    background-color: #e8f6f3;
+    background-color: var(--insight-bg);
     padding: 15px 20px;
-    border-left: 5px solid #2ecc71;
+    border-left: 5px solid var(--primary-color);
     margin: 20px 0;
     border-radius: 5px;
     font-weight: 500;
+    color: var(--text-color);
+    transition: background-color 0.3s ease;
 }
 
 /* 텍스트 스타일 - 기본은 일반, 중요한 부분만 볼드 */
 .analysis-content {
-    color: #333;
+    color: var(--text-color);
     font-weight: normal;
     line-height: 1.7;
 }
 
 .analysis-content strong {
-    color: #2c3e50;
+    color: var(--text-color);
     font-weight: 600;
 }
 
 .analysis-content p {
     margin-bottom: 15px;
     font-weight: normal;
+    color: var(--text-color);
 }
 
 .analysis-list {
@@ -114,11 +192,12 @@
     margin-bottom: 12px;
     line-height: 1.8;
     font-weight: normal;
+    color: var(--text-color);
 }
 
 .analysis-list li:before {
     content: '▶';
-    color: #2ecc71;
+    color: var(--primary-color);
     position: absolute;
     left: 0;
     font-weight: bold;
@@ -137,6 +216,7 @@
     margin-bottom: 12px;
     line-height: 1.8;
     font-weight: normal;
+    color: var(--text-color);
 }
 
 .concern-list li:before {
@@ -158,6 +238,7 @@
     margin-bottom: 12px;
     line-height: 1.8;
     font-weight: normal;
+    color: var(--text-color);
 }
 
 .solution-list li:before {
@@ -168,16 +249,17 @@
 }
 
 .checklist {
-    background-color: #fff3cd;
+    background-color: var(--checklist-bg);
     padding: 20px;
     border-radius: 8px;
     border-left: 5px solid #ffc107;
     margin: 20px 0;
+    transition: background-color 0.3s ease;
 }
 
 .checklist-title {
     font-weight: 700;
-    color: #856404;
+    color: var(--warning-text);
     margin-bottom: 15px;
     font-size: 1.2em;
 }
@@ -193,6 +275,7 @@
     margin-bottom: 10px;
     line-height: 1.6;
     font-weight: normal;
+    color: var(--warning-text);
 }
 
 .checklist-items li:before {
@@ -203,40 +286,43 @@
 }
 
 .cross-sell-section {
-    background-color: #f8f9fa;
+    background-color: var(--cross-sell-bg);
     padding: 20px;
     border-radius: 8px;
-    border-left: 5px solid #17a2b8;
+    border-left: 5px solid var(--cross-sell-border);
     margin: 20px 0;
+    transition: background-color 0.3s ease;
 }
 
 .cross-sell-title {
     font-weight: 700;
-    color: #0c5460;
+    color: var(--cross-sell-text);
     margin-bottom: 15px;
     font-size: 1.2em;
 }
 
 .product-suggestion {
-    background-color: white;
+    background-color: var(--product-bg);
     padding: 15px;
     border-radius: 6px;
     margin-bottom: 15px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: background-color 0.3s ease;
 }
 
 .product-name {
     font-weight: 600;
-    color: #2c3e50;
+    color: var(--text-color);
     margin-bottom: 8px;
     font-size: 1.1em;
 }
 
 .product-reason {
-    color: #6c757d;
+    color: var(--text-color);
     font-size: 0.95em;
     line-height: 1.5;
     font-weight: normal;
+    opacity: 0.8;
 }
 
 .final-recommendation {
@@ -258,18 +344,22 @@
     line-height: 1.7;
     text-align: left;
     font-weight: normal;
+    color: white;
 }
 
 .recommendation-content strong {
     font-weight: 600;
+    color: white;
 }
 
 .trend-insight {
-    background-color: #e3f2fd;
+    background-color: var(--trend-bg);
     padding: 15px 20px;
-    border-left: 5px solid #2196f3;
+    border-left: 5px solid var(--trend-border);
     margin: 20px 0;
     border-radius: 5px;
+    color: var(--text-color);
+    transition: background-color 0.3s ease;
 }
 
 .market-metrics {
@@ -280,29 +370,53 @@
 }
 
 .metric-card {
-    background-color: #f8f9fa;
+    background-color: var(--metric-bg);
     padding: 20px;
     border-radius: 8px;
     text-align: center;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--metric-border);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .metric-value {
     font-size: 2em;
     font-weight: 700;
-    color: #2ecc71;
+    color: var(--primary-color);
     margin-bottom: 5px;
 }
 
 .metric-label {
-    color: #6c757d;
+    color: var(--text-color);
     font-size: 0.9em;
     font-weight: normal;
+    opacity: 0.8;
 }
 
 .highlight-text {
-    background-color: #fff3cd;
+    background-color: var(--highlight-bg);
     padding: 2px 6px;
     border-radius: 3px;
     font-weight: 600;
+    color: var(--warning-text);
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* 다크모드에서 그라데이션 배경 조정 */
+@media (prefers-color-scheme: dark) {
+    .final-recommendation {
+        background: linear-gradient(135deg, #4a5568 0%, #553c9a 100%);
+    }
+}
+
+[data-theme="dark"] .final-recommendation,
+.dark .final-recommendation,
+.gr-theme-dark .final-recommendation {
+    background: linear-gradient(135deg, #4a5568 0%, #553c9a 100%);
+}
+
+/* 전환 애니메이션 */
+* {
+    transition: background-color 0.3s ease, 
+                color 0.3s ease, 
+                border-color 0.3s ease;
 }