From fb1d6d089fd399fd362b35b34d6dbe0a49fbf465 Mon Sep 17 00:00:00 2001
From: bamcasa <combeesang@gmail.com>
Date: Wed, 9 Oct 2024 13:35:17 +0900
Subject: [PATCH] Refactor CSS to adjust font sizes, margins, and paddings for
 better responsiveness

---
 styles.css | 244 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 128 insertions(+), 116 deletions(-)

diff --git a/styles.css b/styles.css
index e05e01b..a3bf302 100644
--- a/styles.css
+++ b/styles.css
@@ -19,50 +19,70 @@
   --black: #332c27;
 }
 
-html body {
-  margin: 0;
+/* 기본 font-size 설정 (16px) */
+html {
+  font-size: 16px;
+}
+
+/* 태블릿 크기에서의 font-size 조정 */
+@media screen and (max-width: 768px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+/* 모바일 크기에서의 font-size 조정 */
+@media screen and (max-width: 480px) {
+  html {
+    font-size: 10px;
+  }
 }
 
+html,
 body {
-  background: linear-gradient(180deg, #ffe1d0 0%, #fffae2 13%);
+  margin: 0;
+  padding: 0;
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+body {
+  background: linear-gradient(180deg, #ffe1d0 0%, #fffae2 13%);
 }
 
 #header {
   justify-content: center;
-  /* height: 100vh; */
 }
 
 .logo-container {
   display: flex;
   justify-content: center;
-  margin-top: 32px;
+  margin-top: 2rem;
 }
 
 .header-title {
-  font-size: 84px;
+  font-size: 5.25rem;
   color: var(--orange);
   text-align: center;
   font-family: "SB AggroOTF";
-  margin-top: 130px;
+  margin-top: 8.125rem;
 }
 
 .header-title img {
-  width: 84px;
-  height: 84px;
+  width: 5.25rem;
+  height: 5.25rem;
   vertical-align: middle;
 }
 
 .header-title p {
-  margin: 12px;
+  margin: 0.75rem;
 }
 
 .header-subtitle {
   color: #565656;
   text-align: center;
   font-family: Pretendard;
-  font-size: 28px;
+  font-size: 1.75rem;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -78,17 +98,17 @@ body {
   color: #ff6737;
   text-align: center;
   font-family: "SB AggroOTF";
-  font-size: 22px;
+  font-size: 1.375rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
 
   display: inline-flex;
-  padding: 15.012px 41.282px 9.382px 41.282px;
+  padding: 0.938rem 2.58rem 0.586rem 2.58rem;
   justify-content: center;
   align-items: center;
-  border-radius: 46.912px;
-  border: 1.876px solid #000;
+  border-radius: 2.932rem;
+  border: 0.117rem solid #000;
   background: #fff;
 }
 
@@ -101,60 +121,58 @@ body {
 .btn-hackathon {
   position: absolute;
   left: calc(286 / 1440 * 100%);
-  top: 100px;
+  top: 6.25rem;
   transform: rotate(-9.372deg);
 }
 
 .btn-together {
   position: absolute;
   left: calc(866 / 1440 * 100%);
-  top: 70px;
+  top: 4.375rem;
   transform: rotate(13.544deg);
 }
 
 .btn-fun {
   position: absolute;
   left: calc(861 / 1440 * 100%);
-  top: 120px;
+  top: 7.5rem;
   transform: rotate(-8.747deg);
 }
 
 .btn-keepitup {
   position: absolute;
   left: calc(1133 / 1440 * 100%);
-
   transform: rotate(-1.404deg);
 }
 
 .apply-btn-container {
   text-align: center;
-
-  margin-top: 208px;
+  margin-top: 13rem;
 }
 
 .apply-btn1 {
   background-color: var(--black);
   color: white;
-  padding: 21px 66px;
-  border-radius: 44px;
+  padding: 1.313rem 4.125rem;
+  border-radius: 2.75rem;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   font-family: Pretendard;
-  font-size: 34px;
+  font-size: 2.125rem;
   font-weight: 800;
 }
 
 .apply-btn {
   background-color: var(--black);
   color: white;
-  padding: 23px 72px;
-  border-radius: 60px;
+  padding: 1.438rem 4.5rem;
+  border-radius: 3.75rem;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   font-family: Pretendard;
-  font-size: 34px;
+  font-size: 2.125rem;
   font-weight: 800;
 }
 
@@ -166,30 +184,28 @@ main {
   font-family: "Pretendard";
   display: flex;
   flex-direction: column;
-  /* align-items: center; */
-  font-size: 22px;
+  font-size: 1.375rem;
   color: var(--black);
   align-items: center;
-  /* width: 54%; */
-  margin: 324px auto 0;
+  margin: 20.25rem auto 0;
   position: relative;
 }
 
 .introduce-title {
   color: #565656;
-  font-size: 25px;
+  font-size: 1.563rem;
 }
 
 .introduce-title img {
-  width: 25px;
-  height: 25px;
-  margin-right: 10px;
+  width: 1.563rem;
+  height: 1.563rem;
+  margin-right: 0.625rem;
   vertical-align: middle;
 }
 
 .introduce-content {
   color: var(--black);
-  font-size: 70px;
+  font-size: 4.375rem;
   font-style: normal;
   font-weight: 600;
   margin: 0;
@@ -198,80 +214,81 @@ main {
 
 .introduce-content p {
   margin: 0;
-  margin-top: 9px;
+  margin-top: 0.563rem;
 }
 
 .rounded-text {
-  padding: 4px 52px;
-  border-radius: 60px;
+  padding: 0.25rem 3.25rem;
+  border-radius: 3.75rem;
   background: #ff6737;
   color: white;
-  margin-right: 20px;
+  margin-right: 1.25rem;
 }
 
 #character {
   display: flex;
   flex-direction: column;
-  align-items: flex-start; /* Changed from center to flex-start */
+  align-items: flex-start;
   text-align: center;
-  margin-top: 352px;
-  width: 100%; /* Added to ensure full width */
+  margin-top: 22rem;
+  width: 100%;
 }
 
 .character-title,
 .character-content {
-  align-self: center; /* Center these elements */
-  width: 100%; /* Ensure full width for text alignment */
+  align-self: center;
+  width: 100%;
 }
 
 .character-title {
-  font-size: 25px;
+  font-size: 1.563rem;
 }
 
 .character-title img {
-  width: 33px;
-  height: 33px;
-  margin-right: 10px;
+  width: 2.063rem;
+  height: 2.063rem;
+  margin-right: 0.625rem;
   vertical-align: middle;
 }
 
 .character-content {
-  font-size: 42px;
+  font-size: 2.625rem;
 }
 
 .card-container {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
   overflow: hidden;
   align-self: center;
   width: 100%;
 }
 
 .card {
-  width: 286.23px;
-  height: 369.77px;
+  width: 17.889rem;
+  height: 23.111rem;
   background: var(--orange);
-  border-radius: 38.35px;
-  border: 2px black solid;
+  border-radius: 2.397rem;
+  border: 0.125rem black solid;
   display: flex;
   flex-direction: column;
-  margin-left: 48px;
+  margin-left: 3rem;
 }
 
 .card-name {
   display: inline-flex;
   width: fit-content;
-  padding: 14px 29px 10px 29px;
+  padding: 0.875rem 1.813rem 0.625rem 1.813rem;
   justify-content: center;
   align-items: center;
-  border-radius: 38px;
+  border-radius: 2.375rem;
   background: #fff;
-  margin: 16px;
+  margin: 1rem;
 }
 
 .card p {
   font-family: "SB AggroOTF";
-  font-size: 34.238px;
+  font-size: 2.14rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -279,43 +296,43 @@ main {
 
 .card-character {
   margin: auto;
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
 }
 
 #schedule {
   width: 58%;
-  margin: 242px auto 0;
+  margin: 15.125rem auto 0;
   font-family: Pretendard;
 }
 
 .schedule-title {
-  font-size: 25px;
+  font-size: 1.563rem;
   color: #565656;
 }
 
 .schedule-title img {
-  width: 67px;
-  height: 35px;
-  margin-right: 10px;
+  width: 4.188rem;
+  height: 2.188rem;
+  margin-right: 0.625rem;
   vertical-align: middle;
 }
 
 .schedule-table {
   width: 100%;
-  border-radius: 38.72px;
+  border-radius: 2.42rem;
   border-collapse: collapse;
   overflow: hidden;
-  font-size: 28px;
+  font-size: 1.75rem;
 }
 
 tr {
-  height: 100px;
+  height: 6.25rem;
 }
 
 td {
   text-align: center;
-  padding: 10px 20px;
-  border-bottom: 3.1px solid rgba(255, 255, 255, 0.3);
+  padding: 0.625rem 1.25rem;
+  border-bottom: 0.194rem solid rgba(255, 255, 255, 0.3);
 }
 tr:last-child td {
   border-bottom: none;
@@ -332,44 +349,42 @@ tr:last-child td {
 
 .notification-list {
   color: #332c27;
-  font-size: 22px;
+  font-size: 1.375rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 135%; /* 29.7px */
-  margin: 30px 64px 0 64px;
+  line-height: 135%;
+  margin: 1.875rem 4rem 0 4rem;
 }
 
 .notification-list li {
-  margin: 10px 0;
+  margin: 0.625rem 0;
 }
 
 #timetable {
   display: flex;
   flex-direction: column;
-  margin: 106px auto 0;
-  padding: 56px;
+  margin: 6.625rem auto 0;
+  padding: 3.5rem;
   width: 50%;
-  border-radius: 50px;
+  border-radius: 3.125rem;
   font-family: Pretendard;
   background-color: white;
 }
 
 .timetable-title {
-  font-size: 25px;
+  font-size: 1.563rem;
   color: #565656;
 }
 
 .timetable-title img {
-  width: 67px;
-  margin-right: 10px;
+  width: 4.188rem;
+  margin-right: 0.625rem;
   vertical-align: middle;
 }
 
 .timeline-container {
-  /* margin: 0 auto; */
   display: flex;
   flex-direction: row;
-  /* justify-content: space-between; */
 }
 
 #timeline {
@@ -377,49 +392,48 @@ tr:last-child td {
   list-style: none;
   margin: 0 auto;
   margin-left: 40%;
-  padding-left: 19px;
-  border-left: 2px solid var(--black); /* border-left를 2px로 변경 */
-  font-size: 30px;
+  padding-left: 1.188rem;
+  border-left: 0.125rem solid var(--black);
+  font-size: 1.875rem;
 }
 
 #timeline li {
-  margin: 68px 0;
+  margin: 4.25rem 0;
   position: relative;
 }
 
 .date {
   top: 50%;
-  left: -120px; /* 왼쪽 여백을 줄여 레이아웃을 맞춤 */
-  line-height: 20px;
+  left: -7.5rem;
+  line-height: 1.25rem;
   position: absolute;
 }
 
 .circle {
   top: 50%;
-  left: -28px;
-  width: 8px;
-  height: 8px;
+  left: -1.75rem;
+  width: 0.5rem;
+  height: 0.5rem;
   background: #614d4d;
-  border: 5px solid #332c27;
+  border: 0.313rem solid #332c27;
   border-radius: 50%;
   position: absolute;
 }
 
 .event {
-  padding: 17px 20px 0;
+  padding: 1.063rem 1.25rem 0;
 }
 
 .day {
-  /* display: inline-flex; */
-  padding: 15.012px 41.282px 9.382px 41.282px;
-  margin-top: 70px;
+  padding: 0.938rem 2.58rem 0.586rem 2.58rem;
+  margin-top: 4.375rem;
   justify-content: center;
   align-items: center;
-  border-radius: 46.912px;
-  border: 1.876px solid #000;
+  border-radius: 2.932rem;
+  border: 0.117rem solid #000;
   color: #332c27;
   font-family: "SB AggroOTF";
-  font-size: 28px;
+  font-size: 1.75rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -427,45 +441,43 @@ tr:last-child td {
 
 footer {
   background: var(--black);
-  position: relative; /* 기본 위치 설정 */
-  bottom: 0; /* 페이지 하단에 붙이기 */
+  position: relative;
+  bottom: 0;
   width: 100%;
   color: white;
   font-family: Pretendard;
-  margin-top: 230px;
+  margin-top: 14.375rem;
 }
 
 .footer-content {
-  padding-top: 64px;
+  padding-top: 4rem;
   padding-left: 26%;
-  font-size: 40px;
+  font-size: 2.5rem;
 }
 
 .footer-apply {
   padding: 0 26%;
-  margin-top: 132px;
+  margin-top: 8.25rem;
 }
 
 .footer-contact {
-  /* padding-top: 37px; */
   padding-left: 20%;
   padding-right: 20%;
-  padding-bottom: 100px;
-  font-size: 14px;
+  padding-bottom: 6.25rem;
+  font-size: 0.875rem;
   display: flex;
-  /* justify-content: space-between; */
 }
 
 footer p {
-  margin-top: 36px;
-  margin-right: 90px;
+  margin-top: 2.25rem;
+  margin-right: 5.625rem;
 }
 
 hr {
-  border: 1px solid white; /* 라인의 두께와 색상 */
-  width: 95%; /* 라인의 길이 */
-  margin: 20px auto;
-  margin-top: 130px;
+  border: 0.063rem solid white;
+  width: 95%;
+  margin: 1.25rem auto;
+  margin-top: 8.125rem;
 }
 
 .copyright {