1/**
2 * Webpack 프로젝트 스타일
3 */
4
5:root {
6 --primary-color: #2563eb;
7 --primary-hover: #1d4ed8;
8 --bg-color: #0f172a;
9 --text-color: #e2e8f0;
10 --card-bg: #1e293b;
11}
12
13* {
14 margin: 0;
15 padding: 0;
16 box-sizing: border-box;
17}
18
19body {
20 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
21 min-height: 100vh;
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 background-color: var(--bg-color);
26 color: var(--text-color);
27}
28
29#app {
30 text-align: center;
31 padding: 2rem;
32 max-width: 600px;
33}
34
35h1 {
36 font-size: 2.5rem;
37 margin-bottom: 1rem;
38 background: linear-gradient(135deg, var(--primary-color), #06b6d4);
39 -webkit-background-clip: text;
40 -webkit-text-fill-color: transparent;
41}
42
43p {
44 margin-bottom: 1.5rem;
45 color: #94a3b8;
46}
47
48#content {
49 margin-bottom: 1.5rem;
50}
51
52.greeting {
53 background: var(--card-bg);
54 padding: 1.5rem;
55 border-radius: 12px;
56 border: 1px solid #334155;
57}
58
59.greeting h2 {
60 color: var(--text-color);
61 margin-bottom: 0.5rem;
62}
63
64.extra-content {
65 background: var(--card-bg);
66 padding: 1.5rem;
67 border-radius: 12px;
68 border: 1px solid #334155;
69 margin-top: 1rem;
70 text-align: left;
71}
72
73.extra-content h3 {
74 color: #22c55e;
75 margin-bottom: 0.5rem;
76}
77
78.extra-content ul {
79 margin-left: 1.5rem;
80 margin-top: 0.5rem;
81}
82
83.extra-content li {
84 margin: 0.3rem 0;
85}
86
87button {
88 padding: 0.8rem 1.6rem;
89 font-size: 1rem;
90 font-weight: 500;
91 background-color: var(--primary-color);
92 color: white;
93 border: none;
94 border-radius: 8px;
95 cursor: pointer;
96 transition: all 0.25s;
97}
98
99button:hover {
100 background-color: var(--primary-hover);
101 transform: translateY(-2px);
102}
103
104button:active {
105 transform: translateY(0);
106}