Hugging Face's logo

Spaces:
ssboost
/
3gghdf5
Running

App Files Community
ssboost commited on
Commit
09602b4
·
verified ·
1 Parent(s): 8f571da

Create keyword_analysis_report.css

Browse files
Files changed (1) hide show
  1. keyword_analysis_report.css +308 -0
keyword_analysis_report.css ADDED
@@ -0,0 +1,308 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* 키워드 분석 보고서 전용 CSS */
2
+ .keyword-analysis-report {
3
+ font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
4
+ line-height: 1.6;
5
+ color: #333;
6
+ margin: 0;
7
+ padding: 0;
8
+ background-color: #f8f9fa;
9
+ }
10
+
11
+ .report-container {
12
+ max-width: 900px;
13
+ margin: 20px auto;
14
+ padding: 0;
15
+ background: transparent;
16
+ }
17
+
18
+ .report-title {
19
+ text-align: center;
20
+ font-size: 2.2em;
21
+ margin-bottom: 30px;
22
+ color: #2c3e50;
23
+ font-weight: 700;
24
+ border-bottom: 3px solid #2ecc71;
25
+ padding-bottom: 15px;
26
+ }
27
+
28
+ /* 각 분석 항목별 섹션 블록 */
29
+ .analysis-section-block {
30
+ background-color: #ffffff;
31
+ padding: 25px 30px;
32
+ margin-bottom: 25px;
33
+ border-radius: 12px;
34
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
35
+ border-left: 5px solid #2ecc71;
36
+ }
37
+
38
+ .analysis-section-block:nth-child(1) { border-left-color: #3498db; }
39
+ .analysis-section-block:nth-child(2) { border-left-color: #e74c3c; }
40
+ .analysis-section-block:nth-child(3) { border-left-color: #f39c12; }
41
+ .analysis-section-block:nth-child(4) { border-left-color: #9b59b6; }
42
+ .analysis-section-block:nth-child(5) { border-left-color: #1abc9c; }
43
+ .analysis-section-block:nth-child(6) { border-left-color: #34495e; }
44
+ .analysis-section-block:nth-child(7) { border-left-color: #e67e22; }
45
+
46
+ .analysis-section-title {
47
+ margin: 0 0 20px 0;
48
+ color: #2c3e50;
49
+ font-size: 1.6em;
50
+ font-weight: 700;
51
+ display: flex;
52
+ align-items: center;
53
+ border-bottom: 2px solid #ecf0f1;
54
+ padding-bottom: 10px;
55
+ }
56
+
57
+ .section-icon {
58
+ font-size: 1.3em;
59
+ margin-right: 12px;
60
+ vertical-align: middle;
61
+ }
62
+
63
+ /* 아이콘 색상 */
64
+ .analysis-section-block:nth-child(1) .section-icon { color: #3498db; }
65
+ .analysis-section-block:nth-child(2) .section-icon { color: #e74c3c; }
66
+ .analysis-section-block:nth-child(3) .section-icon { color: #f39c12; }
67
+ .analysis-section-block:nth-child(4) .section-icon { color: #9b59b6; }
68
+ .analysis-section-block:nth-child(5) .section-icon { color: #1abc9c; }
69
+ .analysis-section-block:nth-child(6) .section-icon { color: #34495e; }
70
+ .analysis-section-block:nth-child(7) .section-icon { color: #e67e22; }
71
+
72
+ .subsection-title {
73
+ color: #34495e;
74
+ margin: 20px 0 10px 0;
75
+ font-size: 1.1em;
76
+ font-weight: 600;
77
+ }
78
+
79
+ .key-insight {
80
+ background-color: #e8f6f3;
81
+ padding: 15px 20px;
82
+ border-left: 5px solid #2ecc71;
83
+ margin: 20px 0;
84
+ border-radius: 5px;
85
+ font-weight: 500;
86
+ }
87
+
88
+ /* 텍스트 스타일 - 기본은 일반, 중요한 부분만 볼드 */
89
+ .analysis-content {
90
+ color: #333;
91
+ font-weight: normal;
92
+ line-height: 1.7;
93
+ }
94
+
95
+ .analysis-content strong {
96
+ color: #2c3e50;
97
+ font-weight: 600;
98
+ }
99
+
100
+ .analysis-content p {
101
+ margin-bottom: 15px;
102
+ font-weight: normal;
103
+ }
104
+
105
+ .analysis-list {
106
+ list-style: none;
107
+ padding: 0;
108
+ margin-bottom: 20px;
109
+ }
110
+
111
+ .analysis-list li {
112
+ position: relative;
113
+ padding-left: 25px;
114
+ margin-bottom: 12px;
115
+ line-height: 1.8;
116
+ font-weight: normal;
117
+ }
118
+
119
+ .analysis-list li:before {
120
+ content: '▶';
121
+ color: #2ecc71;
122
+ position: absolute;
123
+ left: 0;
124
+ font-weight: bold;
125
+ font-size: 1.1em;
126
+ }
127
+
128
+ .concern-list {
129
+ list-style: none;
130
+ padding: 0;
131
+ margin-bottom: 20px;
132
+ }
133
+
134
+ .concern-list li {
135
+ position: relative;
136
+ padding-left: 25px;
137
+ margin-bottom: 12px;
138
+ line-height: 1.8;
139
+ font-weight: normal;
140
+ }
141
+
142
+ .concern-list li:before {
143
+ content: '⚠️';
144
+ position: absolute;
145
+ left: 0;
146
+ font-size: 1.1em;
147
+ }
148
+
149
+ .solution-list {
150
+ list-style: none;
151
+ padding: 0;
152
+ margin-bottom: 20px;
153
+ }
154
+
155
+ .solution-list li {
156
+ position: relative;
157
+ padding-left: 25px;
158
+ margin-bottom: 12px;
159
+ line-height: 1.8;
160
+ font-weight: normal;
161
+ }
162
+
163
+ .solution-list li:before {
164
+ content: '✅';
165
+ position: absolute;
166
+ left: 0;
167
+ font-size: 1.1em;
168
+ }
169
+
170
+ .checklist {
171
+ background-color: #fff3cd;
172
+ padding: 20px;
173
+ border-radius: 8px;
174
+ border-left: 5px solid #ffc107;
175
+ margin: 20px 0;
176
+ }
177
+
178
+ .checklist-title {
179
+ font-weight: 700;
180
+ color: #856404;
181
+ margin-bottom: 15px;
182
+ font-size: 1.2em;
183
+ }
184
+
185
+ .checklist-items {
186
+ list-style: none;
187
+ padding: 0;
188
+ }
189
+
190
+ .checklist-items li {
191
+ position: relative;
192
+ padding-left: 25px;
193
+ margin-bottom: 10px;
194
+ line-height: 1.6;
195
+ font-weight: normal;
196
+ }
197
+
198
+ .checklist-items li:before {
199
+ content: '📋';
200
+ position: absolute;
201
+ left: 0;
202
+ font-size: 1.1em;
203
+ }
204
+
205
+ .cross-sell-section {
206
+ background-color: #f8f9fa;
207
+ padding: 20px;
208
+ border-radius: 8px;
209
+ border-left: 5px solid #17a2b8;
210
+ margin: 20px 0;
211
+ }
212
+
213
+ .cross-sell-title {
214
+ font-weight: 700;
215
+ color: #0c5460;
216
+ margin-bottom: 15px;
217
+ font-size: 1.2em;
218
+ }
219
+
220
+ .product-suggestion {
221
+ background-color: white;
222
+ padding: 15px;
223
+ border-radius: 6px;
224
+ margin-bottom: 15px;
225
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
226
+ }
227
+
228
+ .product-name {
229
+ font-weight: 600;
230
+ color: #2c3e50;
231
+ margin-bottom: 8px;
232
+ font-size: 1.1em;
233
+ }
234
+
235
+ .product-reason {
236
+ color: #6c757d;
237
+ font-size: 0.95em;
238
+ line-height: 1.5;
239
+ font-weight: normal;
240
+ }
241
+
242
+ .final-recommendation {
243
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
244
+ border-radius: 12px;
245
+ color: white;
246
+ padding: 25px;
247
+ }
248
+
249
+ .final-recommendation h3 {
250
+ color: white;
251
+ font-size: 1.8em;
252
+ margin-bottom: 20px;
253
+ font-weight: 700;
254
+ }
255
+
256
+ .recommendation-content {
257
+ font-size: 1.1em;
258
+ line-height: 1.7;
259
+ text-align: left;
260
+ font-weight: normal;
261
+ }
262
+
263
+ .recommendation-content strong {
264
+ font-weight: 600;
265
+ }
266
+
267
+ .trend-insight {
268
+ background-color: #e3f2fd;
269
+ padding: 15px 20px;
270
+ border-left: 5px solid #2196f3;
271
+ margin: 20px 0;
272
+ border-radius: 5px;
273
+ }
274
+
275
+ .market-metrics {
276
+ display: grid;
277
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
278
+ gap: 20px;
279
+ margin: 20px 0;
280
+ }
281
+
282
+ .metric-card {
283
+ background-color: #f8f9fa;
284
+ padding: 20px;
285
+ border-radius: 8px;
286
+ text-align: center;
287
+ border: 1px solid #dee2e6;
288
+ }
289
+
290
+ .metric-value {
291
+ font-size: 2em;
292
+ font-weight: 700;
293
+ color: #2ecc71;
294
+ margin-bottom: 5px;
295
+ }
296
+
297
+ .metric-label {
298
+ color: #6c757d;
299
+ font-size: 0.9em;
300
+ font-weight: normal;
301
+ }
302
+
303
+ .highlight-text {
304
+ background-color: #fff3cd;
305
+ padding: 2px 6px;
306
+ border-radius: 3px;
307
+ font-weight: 600;
308
+ }