1/*
2 * Todo 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, #667eea 0%, #764ba2 100%);
14 min-height: 100vh;
15 padding: 40px 20px;
16}
17
18.app {
19 max-width: 500px;
20 margin: 0 auto;
21 background: white;
22 border-radius: 16px;
23 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
24 overflow: hidden;
25}
26
27/* Header */
28.header {
29 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
30 color: white;
31 padding: 30px;
32 text-align: center;
33}
34
35.header h1 {
36 font-size: 2rem;
37 margin-bottom: 5px;
38}
39
40.header .date {
41 opacity: 0.8;
42 font-size: 0.9rem;
43}
44
45/* Input Section */
46.input-section {
47 display: flex;
48 padding: 20px;
49 gap: 10px;
50 border-bottom: 1px solid #eee;
51}
52
53.input-section input {
54 flex: 1;
55 padding: 15px;
56 font-size: 1rem;
57 border: 2px solid #eee;
58 border-radius: 8px;
59 transition: border-color 0.3s;
60}
61
62.input-section input:focus {
63 outline: none;
64 border-color: #667eea;
65}
66
67.input-section button {
68 padding: 15px 25px;
69 background: #667eea;
70 color: white;
71 border: none;
72 border-radius: 8px;
73 font-size: 1rem;
74 cursor: pointer;
75 transition: background 0.3s;
76}
77
78.input-section button:hover {
79 background: #5a67d8;
80}
81
82/* Filters */
83.filters {
84 display: flex;
85 justify-content: center;
86 gap: 10px;
87 padding: 15px;
88 background: #f8f9fa;
89}
90
91.filter-btn {
92 padding: 8px 16px;
93 background: transparent;
94 border: 1px solid #ddd;
95 border-radius: 20px;
96 cursor: pointer;
97 transition: all 0.3s;
98}
99
100.filter-btn:hover {
101 border-color: #667eea;
102 color: #667eea;
103}
104
105.filter-btn.active {
106 background: #667eea;
107 color: white;
108 border-color: #667eea;
109}
110
111/* Todo List */
112.todo-list {
113 list-style: none;
114 max-height: 400px;
115 overflow-y: auto;
116}
117
118.todo-item {
119 display: flex;
120 align-items: center;
121 padding: 15px 20px;
122 border-bottom: 1px solid #eee;
123 transition: background 0.2s;
124}
125
126.todo-item:hover {
127 background: #f8f9fa;
128}
129
130.todo-item.completed .todo-text {
131 text-decoration: line-through;
132 color: #999;
133}
134
135.todo-item input[type="checkbox"] {
136 width: 22px;
137 height: 22px;
138 margin-right: 15px;
139 cursor: pointer;
140 accent-color: #667eea;
141}
142
143.todo-text {
144 flex: 1;
145 font-size: 1rem;
146}
147
148.todo-item .edit-input {
149 flex: 1;
150 padding: 8px;
151 font-size: 1rem;
152 border: 2px solid #667eea;
153 border-radius: 4px;
154 margin-right: 10px;
155}
156
157.todo-actions {
158 display: flex;
159 gap: 8px;
160 opacity: 0;
161 transition: opacity 0.2s;
162}
163
164.todo-item:hover .todo-actions {
165 opacity: 1;
166}
167
168.todo-actions button {
169 padding: 5px 10px;
170 border: none;
171 border-radius: 4px;
172 cursor: pointer;
173 font-size: 0.85rem;
174}
175
176.edit-btn {
177 background: #ffc107;
178 color: #333;
179}
180
181.delete-btn {
182 background: #dc3545;
183 color: white;
184}
185
186.save-btn {
187 background: #28a745;
188 color: white;
189}
190
191.cancel-btn {
192 background: #6c757d;
193 color: white;
194}
195
196/* Footer */
197.footer {
198 display: flex;
199 justify-content: space-between;
200 align-items: center;
201 padding: 15px 20px;
202 background: #f8f9fa;
203 font-size: 0.9rem;
204 color: #666;
205}
206
207.footer button {
208 background: transparent;
209 border: none;
210 color: #dc3545;
211 cursor: pointer;
212 font-size: 0.85rem;
213}
214
215.footer button:hover {
216 text-decoration: underline;
217}
218
219/* Empty State */
220.empty-state {
221 text-align: center;
222 padding: 40px 20px;
223 color: #999;
224}
225
226.empty-state p {
227 font-size: 1.1rem;
228}
229
230/* Animations */
231@keyframes fadeIn {
232 from {
233 opacity: 0;
234 transform: translateY(-10px);
235 }
236 to {
237 opacity: 1;
238 transform: translateY(0);
239 }
240}
241
242.todo-item {
243 animation: fadeIn 0.3s ease;
244}
245
246/* Scrollbar */
247.todo-list::-webkit-scrollbar {
248 width: 6px;
249}
250
251.todo-list::-webkit-scrollbar-track {
252 background: #f1f1f1;
253}
254
255.todo-list::-webkit-scrollbar-thumb {
256 background: #ccc;
257 border-radius: 3px;
258}
259
260.todo-list::-webkit-scrollbar-thumb:hover {
261 background: #999;
262}