From a54a71b1fbf4cddcd0aaa84b0d89f23a0f1a3a13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=8C=E1=85=B5=E1=84=92?=
 =?UTF-8?q?=E1=85=AE=E1=86=AB?= <kim@jihun.io>
Date: Thu, 19 Dec 2024 22:24:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20404=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20header=EB=A5=BC=20=EC=88=A8?=
 =?UTF-8?q?=EA=B9=80=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 8f3da61e..5ad1373a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -225,7 +225,8 @@ body:has(header):has(main):has(footer) main {
   padding: 16.6rem 0 16.6rem 6.4rem;
 }
 
-/* 404 페이지에서는 footer를 숨김 처리 */
+/* 404 페이지에서는 header, footer를 숨김 처리 */
+body:has(#not-found-wrap) header,
 body:has(#not-found-wrap) footer {
   display: none;
 }

From 956df6318e3849eb40d5b303d6ca20efaeea3787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=8C=E1=85=B5=E1=84=92?=
 =?UTF-8?q?=E1=85=AE=E1=86=AB?= <kim@jihun.io>
Date: Thu, 19 Dec 2024 22:48:43 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20=EB=A9=94=EC=9D=B8=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95:=20fo?=
 =?UTF-8?q?oter=EC=9D=98=20position=EC=9D=84=20absolute=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=ED=95=98=EC=97=AC=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=9C=A0=EC=A7=80=EB=B3=B4=EC=88=98=20?=
 =?UTF-8?q?=EC=9A=A9=EC=9D=B4=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                     | 23 +++++++++++++++++------
 src/components/footer/Footer.module.css |  4 ++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 5ad1373a..37b3e6e6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -199,17 +199,17 @@ body {
   font-size: var(--body-font-size);
   line-height: 1.44;
   letter-spacing: 0.03em;
+  position: relative;
 }
 
 body:has(header):has(main):has(footer) {
   width: 100%;
-  display: grid;
-  grid-template-columns: 1fr auto;
+  min-height: 100%;
   height: auto;
   background-color: var(--background-color);
   column-gap: 6.4rem;
-  padding-left: calc(32rem);
-  padding-right: 8.4rem;
+  padding-left: 32rem;
+  padding-right: 26rem;
 }
 
 body {
@@ -222,7 +222,7 @@ main {
 }
 
 body:has(header):has(main):has(footer) main {
-  padding: 16.6rem 0 16.6rem 6.4rem;
+  padding: 16.6rem 6.4rem 16.6rem 6.4rem;
 }
 
 /* 404 페이지에서는 header, footer를 숨김 처리 */
@@ -231,6 +231,13 @@ body:has(#not-found-wrap) footer {
   display: none;
 }
 
+body:has(header):has(main):has(footer) footer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20rem;
+}
+
 * {
   font-family: inherit;
   box-sizing: border-box;
@@ -263,7 +270,6 @@ body:has(#not-found-wrap) footer {
 @media (max-width: 1152px) {
   body:has(header):has(main):has(footer) {
     padding-left: 10.4rem;
-    padding-right: calc(6.4rem + (100vw - 969px) * 0.26087 / 16);
   }
 }
 
@@ -275,12 +281,17 @@ body:has(#not-found-wrap) footer {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr auto;
+    padding-right: 0;
   }
 
   body:has(header):has(main):has(footer) main {
     padding-top: 16.6rem;
   }
 
+  body:has(header):has(main):has(footer) footer {
+    position: inherit;
+  }
+
   html body:has(header):has(main.no-posts):has(footer) footer {
     width: 100%;
     height: fit-content;
diff --git a/src/components/footer/Footer.module.css b/src/components/footer/Footer.module.css
index cbb0b860..30bf8981 100644
--- a/src/components/footer/Footer.module.css
+++ b/src/components/footer/Footer.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin: 19.1rem 0 0 0;
+  margin: 19.1rem 6rem 0 0;
   max-width: 100%;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .recommend-wrap .recommend-list {
-  max-width: 26rem;
+  width: 20rem;
   background-color: var(--background-white);
   border-radius: 1.5rem;
   filter: drop-shadow(6px 6px 9.4px rgba(0, 0, 0, 0.15));