Design: 공통 styles 파일 수정 및 추가

styles/_mixin.scss

@@ -1,4 +1,4 @@
-@use './variables' as *;
+@import '@/styles/variables.scss';
 
 @mixin a11y-hidden() {
   position: absolute;
@@ -10,21 +10,35 @@
   clip-path: polygon(0 0, 0 0, 0 0);
 }
 
+@mixin container {
+  max-width: 76.8rem;
+  width: 100%;
+  margin: 0 auto;
+  font-size: $font-size-base;
+}
+
 @mixin flex-center-row() {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+@mixin flex-between-row() {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 @mixin flex-center-col() {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
-@mixin shadow() {
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
+@mixin shadow-top() {
+  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.16);
+}
+@mixin shadow-bottom() {
+  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.3);
+}

styles/_variables.scss

@@ -1,6 +1,15 @@
-$bg-color: #ff3478;
-$text-color: #000;
-$font-size-logo: 40px;
-$font-size-title: 17px;
-$font-size-subtitle: 12px;
-$font-size: 14px;
+$black: #151515;
+$brand-pink: #ff3478;
+$brand-blue: #002d79;
+$light-pink: #ff5991;
+$light-gray: #f2f2f2;
+$light-blue: rgba(1, 82, 204, 0.1);
+$blue: #0152cc;
+
+$failed: #e74a3b;
+$success: #1cc88a;
+
+$font-size-logo: 4rem;
+$font-size-lg: 1.7rem;
+$font-size-base: 1.4rem;
+$font-size-s: 1.2rem;

styles/index.scss

@@ -0,0 +1,2 @@
+@import '@/styles/variables';
+@import '@/styles/mixin';

styles/normalize.scss

@@ -11,6 +11,7 @@
 html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
+  font-size: 62.5%;
 }
 
 /* Sections
@@ -76,6 +77,9 @@ pre {
 
 a {
   background-color: transparent;
+  text-decoration: none;
+  color: #000;
+  cursor: pointer;
 }
 
 /**
@@ -350,3 +354,9 @@ template {
 [hidden] {
   display: none;
 }
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}