codeit-bootcamp-frontend · GANGYIKIM · Mar 20, 2025 · Mar 17, 2025 · Mar 17, 2025 · Mar 17, 2025
diff --git a/assets/img_home_01.png b/assets/img_home_01.png
diff --git a/assets/img_home_02.png b/assets/img_home_02.png
diff --git a/assets/img_home_03.png b/assets/img_home_03.png
diff --git a/assets/img_home_bottom.png b/assets/img_home_bottom.png
diff --git a/assets/img_home_top.png b/assets/img_home_top.png
diff --git a/assets/visibility_off.png b/assets/visibility_off.png
diff --git a/assets/visibility_on.png b/assets/visibility_on.png
diff --git a/css/auth.css b/css/auth.css
@@ -2,69 +2,76 @@ main {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin: 231px auto;
+  margin: 0 auto;
   width: 640px;
-  height: 618px;
 }
 
 .logo-auth-box {
- display: flex;
- justify-content: center; 
+  display: flex;
+  justify-content: center;
 }
 
-.logo-auth-box img{
-  width: 396px;
-  height: 132px;
+.logo-auth-box a {
+  margin: 0 auto;
+  display: block;
+  margin-top: 24px;
+  margin-bottom: 24px;
 }
 
-.cont-area {
-  margin-top: 40px;
+.logo-auth-box img{
+  width: 396px;
 }
 
-.group-inp {
-  height: 98px;
+.group-input {
+  display: flex;
+  flex-direction: column;
   margin-bottom: 24px;
 }
 
-.group-inp label {
+.group-input label {
   color: var(--gray-800);
   font-weight: 700;
   font-size: 18px;
-  line-height: 26px;
   margin-bottom: 16px;
 }
 
-.group-inp input {
+.group-input input {
   background-color: var(--gray-100);
   width: 100%;
   height: 56px;
   border: none;
   border-radius: 12px;
-  margin: 16px 0 24px;
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
   vertical-align: middle;
-  padding-left: 24px;
+  padding: 16px 24px;
   outline: none;
 }
 
-#inputPwd {
+.input-font {
   font-size: 18px;
   color: var(--gray-800);
 }
 
 .inputPwd-wrap {
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
-.inputPwd-wrap i {
+.inputPwd-wrap .toggle-password {
+  width: 24px;
   position: absolute;
-  top: 34px;
-  right: 16px;
+  right: 24px;
   cursor: pointer;
 }
 
+.inputPwd-wrap img {
+  width: 100%;
+  border: none;
+}
+
 .login-btn {
   width: 100%;
   padding: 16px 124px;
@@ -107,16 +114,29 @@ main {
 }
 
 .sign-up-link {
-    display: flex;
-    justify-content: center;
-    margin-top: 24px;
-    gap: 4px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 24px;
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
 }
 
 .sign-up-link a {
   color: var(--blue-100);
   text-decoration: underline;
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  main {
+    max-width: 400px;
+    padding: 0 16px;
+    margin: 0 auto;
+  }
+
+  .logo-auth-box img {
+    width: 198px;
+  }
 }
diff --git a/css/palette.css b/css/palette.css
diff --git a/css/reset.css b/css/reset.css
@@ -1,10 +1,35 @@
 /* Reset CSS - Enhanced Version */
+:root {
+  --gray-900: #111827;
+  --gray-800: #1F2937;
+  --gray-700: #374151;
+  --gray-600: #4B5563;
+  --gray-500: #6B7280;
+  --gray-400: #9CA3AF;
+  --gray-200: #E5E7EB;
+  --gray-100: #F3F4F6;
+  --gray-50:  #F9FAFB;
+
+  --blue-300: #1251AA;
+  --blue-200: #1967D6;
+  --blue-100: #3692FF;
+  --blue-light: #CFE5FF;
+
+  --gray: #FCFCFC;
+  --white: #FFFFFF;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+body {
+  word-break: keep-all;
+  font-family: "Pretendard", sans-serif;
+}
+
 a {
   text-decoration: none;
 }