1/*
2 * Weather App 스타일
3 */
4
5* {
6 margin: 0;
7 padding: 0;
8 box-sizing: border-box;
9}
10
11body {
12 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13 background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
14 min-height: 100vh;
15 padding: 20px;
16}
17
18.app {
19 max-width: 500px;
20 margin: 0 auto;
21}
22
23/* Header */
24.header {
25 text-align: center;
26 color: white;
27 margin-bottom: 30px;
28}
29
30.header h1 {
31 font-size: 2.5rem;
32 margin-bottom: 5px;
33 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
34}
35
36.header .subtitle {
37 opacity: 0.8;
38 font-size: 1rem;
39}
40
41/* Search Section */
42.search-section {
43 display: flex;
44 gap: 10px;
45 margin-bottom: 15px;
46}
47
48.search-section input {
49 flex: 1;
50 padding: 15px 20px;
51 border: none;
52 border-radius: 30px;
53 font-size: 1rem;
54 background: rgba(255, 255, 255, 0.9);
55 outline: none;
56 transition: box-shadow 0.3s;
57}
58
59.search-section input:focus {
60 box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
61}
62
63.search-section button {
64 padding: 15px 25px;
65 background: #ff6b6b;
66 color: white;
67 border: none;
68 border-radius: 30px;
69 font-size: 1rem;
70 cursor: pointer;
71 transition: background 0.3s, transform 0.2s;
72}
73
74.search-section button:hover {
75 background: #ee5a5a;
76 transform: scale(1.05);
77}
78
79/* Quick Cities */
80.quick-cities {
81 display: flex;
82 flex-wrap: wrap;
83 gap: 8px;
84 justify-content: center;
85 margin-bottom: 25px;
86}
87
88.city-btn {
89 padding: 8px 16px;
90 background: rgba(255, 255, 255, 0.2);
91 color: white;
92 border: 1px solid rgba(255, 255, 255, 0.3);
93 border-radius: 20px;
94 cursor: pointer;
95 font-size: 0.9rem;
96 transition: all 0.3s;
97}
98
99.city-btn:hover {
100 background: rgba(255, 255, 255, 0.3);
101 transform: translateY(-2px);
102}
103
104/* Loading */
105.loading {
106 text-align: center;
107 color: white;
108 padding: 40px;
109}
110
111.spinner {
112 width: 50px;
113 height: 50px;
114 border: 4px solid rgba(255, 255, 255, 0.3);
115 border-top-color: white;
116 border-radius: 50%;
117 animation: spin 1s linear infinite;
118 margin: 0 auto 15px;
119}
120
121@keyframes spin {
122 to { transform: rotate(360deg); }
123}
124
125/* Error */
126.error {
127 background: rgba(220, 53, 69, 0.9);
128 color: white;
129 padding: 20px;
130 border-radius: 12px;
131 text-align: center;
132 margin-bottom: 20px;
133}
134
135/* Weather Display */
136.weather-display {
137 background: rgba(255, 255, 255, 0.95);
138 border-radius: 20px;
139 padding: 30px;
140 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
141}
142
143.weather-main {
144 text-align: center;
145 margin-bottom: 30px;
146}
147
148.location h2 {
149 font-size: 2rem;
150 color: #333;
151 margin-bottom: 5px;
152}
153
154.location p {
155 color: #666;
156 font-size: 1rem;
157}
158
159.temperature {
160 font-size: 5rem;
161 font-weight: 300;
162 color: #333;
163 margin: 20px 0;
164}
165
166.temperature .unit {
167 font-size: 2rem;
168 vertical-align: top;
169}
170
171.weather-icon img {
172 width: 100px;
173 height: 100px;
174}
175
176.description {
177 font-size: 1.2rem;
178 color: #666;
179 text-transform: capitalize;
180}
181
182/* Weather Details */
183.weather-details {
184 display: grid;
185 grid-template-columns: repeat(3, 1fr);
186 gap: 15px;
187 margin-bottom: 25px;
188}
189
190.detail-item {
191 text-align: center;
192 padding: 15px;
193 background: #f8f9fa;
194 border-radius: 12px;
195}
196
197.detail-item .label {
198 display: block;
199 font-size: 0.85rem;
200 color: #888;
201 margin-bottom: 5px;
202}
203
204.detail-item .value {
205 display: block;
206 font-size: 1.1rem;
207 font-weight: 600;
208 color: #333;
209}
210
211/* Sun Times */
212.sun-times {
213 display: flex;
214 justify-content: center;
215 gap: 40px;
216 padding: 20px;
217 background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
218 border-radius: 12px;
219 margin-bottom: 20px;
220}
221
222.sun-item {
223 text-align: center;
224}
225
226.sun-label {
227 display: block;
228 font-size: 0.9rem;
229 color: rgba(0, 0, 0, 0.6);
230 margin-bottom: 5px;
231}
232
233.sun-value {
234 display: block;
235 font-size: 1.3rem;
236 font-weight: 600;
237 color: #333;
238}
239
240/* Update Info */
241.update-info {
242 text-align: center;
243 color: #999;
244 font-size: 0.85rem;
245}
246
247/* Footer */
248.footer {
249 text-align: center;
250 color: rgba(255, 255, 255, 0.7);
251 margin-top: 30px;
252 font-size: 0.85rem;
253}
254
255.footer a {
256 color: white;
257 text-decoration: none;
258}
259
260.footer a:hover {
261 text-decoration: underline;
262}
263
264.footer .note {
265 margin-top: 10px;
266 font-size: 0.75rem;
267 opacity: 0.7;
268}
269
270/* Utility */
271.hidden {
272 display: none !important;
273}
274
275/* Responsive */
276@media (max-width: 480px) {
277 .header h1 {
278 font-size: 2rem;
279 }
280
281 .temperature {
282 font-size: 4rem;
283 }
284
285 .weather-details {
286 grid-template-columns: repeat(2, 1fr);
287 }
288
289 .search-section {
290 flex-direction: column;
291 }
292
293 .search-section button {
294 width: 100%;
295 }
296}
297
298/* Weather-based backgrounds (optional enhancement) */
299.app.sunny {
300 background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
301}
302
303.app.cloudy {
304 background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
305}
306
307.app.rainy {
308 background: linear-gradient(135deg, #373b44 0%, #4286f4 100%);
309}
310
311.app.snowy {
312 background: linear-gradient(135deg, #e6dada 0%, #274046 100%);
313}