From 2558fcdd1a3b6e5cc4f946c9d095cafc66a464fe Mon Sep 17 00:00:00 2001
From: developer-jyyun <developer.jyyun@gmail.com>
Date: Thu, 9 Nov 2023 15:35:23 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EA=B3=B5=ED=86=B5=20styles=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/_mixin.scss     | 26 ++++++++++++++++++++------
 styles/_variables.scss | 21 +++++++++++++++------
 styles/index.scss      |  2 ++
 styles/normalize.scss  | 10 ++++++++++
 4 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 styles/index.scss

diff --git a/styles/_mixin.scss b/styles/_mixin.scss
index b8668fd9..f4304cff 100644
--- a/styles/_mixin.scss
+++ b/styles/_mixin.scss
@@ -1,4 +1,4 @@
-@use './variables' as *;
+@import '@/styles/variables.scss';
 
 @mixin a11y-hidden() {
   position: absolute;
@@ -10,12 +10,25 @@
   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;
@@ -23,8 +36,9 @@
   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);
-}
\ No newline at end of file
+@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);
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
index f3f3579b..433cef6b 100644
--- a/styles/_variables.scss
+++ b/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;
diff --git a/styles/index.scss b/styles/index.scss
new file mode 100644
index 00000000..f77ffa8b
--- /dev/null
+++ b/styles/index.scss
@@ -0,0 +1,2 @@
+@import '@/styles/variables';
+@import '@/styles/mixin';
diff --git a/styles/normalize.scss b/styles/normalize.scss
index d5444eed..947067e0 100644
--- a/styles/normalize.scss
+++ b/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;
+}