fix(layout): make pages responsive for mobile viewports

Replace fixed width values with responsive max-width pattern to prevent
horizontal overflow on mobile devices.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: ppippi-dev

src/pages/blog/index.astro

@@ -18,7 +18,10 @@ const posts = (await getCollection('blog')).sort(
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 		<style>
 			main {
-				width: 960px;
+				width: 100%;
+				max-width: 720px;
+				margin: 0 auto;
+				padding: 48px 24px 80px;
 			}
 			ul {
 				display: flex;
@@ -55,21 +58,24 @@ const posts = (await getCollection('blog')).sort(
 			}
 			.title {
 				margin: 0;
-				color: rgb(var(--black));
-				line-height: 1;
+				color: var(--text-primary);
+				line-height: 1.3;
 			}
 			.date {
 				margin: 0;
-				color: rgb(var(--gray));
+				color: var(--text-muted);
 			}
 			ul li a:hover h4,
 			ul li a:hover .date {
-				color: rgb(var(--accent));
+				color: var(--accent-primary);
 			}
 			ul a:hover img {
-				box-shadow: var(--box-shadow);
+				box-shadow: var(--shadow-md);
 			}
-			@media (max-width: 720px) {
+			@media (max-width: 768px) {
+				main {
+					padding: 32px 20px 60px;
+				}
 				ul {
 					gap: 0.5em;
 				}

src/pages/contact.astro

@@ -11,19 +11,21 @@ import { SITE_TITLE } from '../consts';
 		<BaseHead title={`Contact | ${SITE_TITLE}`} description="연락처 정보" />
 		<style>
 			main {
-				width: 960px;
-				max-width: calc(100% - 2em);
-				margin: auto;
-				padding: 3em 1em;
+				width: 100%;
+				max-width: 720px;
+				margin: 0 auto;
+				padding: 48px 24px 80px;
 			}
 			h1, h2, h3 {
 				line-height: 1.2;
+				color: var(--text-primary);
 			}
 			h3 {
 				margin-top: 1.5rem;
 			}
 			p, ul {
 				line-height: 1.6;
+				color: var(--text-secondary);
 			}
 			ul {
 				padding-left: 1.5rem;
@@ -32,12 +34,17 @@ import { SITE_TITLE } from '../consts';
 				margin-bottom: 0.5rem;
 			}
 			a {
-				color: rgb(var(--accent));
+				color: var(--accent-primary);
 			}
 			hr {
 				margin: 2rem 0;
 				border: none;
-				border-top: 1px solid rgb(var(--gray-light));
+				border-top: 1px solid var(--border-color);
+			}
+			@media (max-width: 768px) {
+				main {
+					padding: 32px 20px 60px;
+				}
 			}
 		</style>
 	</head>

src/pages/en/blog/index.astro

@@ -18,10 +18,10 @@ const posts = (await getCollection('blog-en')).sort(
 		<BaseHead title={`Blog | ${SITE_TITLE}`} description={SITE_DESCRIPTION} />
 		<style>
 			main {
-				width: 1200px;
-				max-width: calc(100% - 2em);
-				margin: auto;
-				padding: 60px 40px 0 40px;
+				width: 100%;
+				max-width: 720px;
+				margin: 0 auto;
+				padding: 48px 24px 80px;
 			}
 			.page-title {
 				font-size: 2rem;
@@ -108,7 +108,7 @@ const posts = (await getCollection('blog-en')).sort(
 			}
 			@media (max-width: 768px) {
 				main {
-					padding: 40px 20px 0 20px;
+					padding: 32px 20px 60px;
 				}
 				.page-title {
 					font-size: 1.5rem;

src/pages/search.astro

@@ -12,13 +12,19 @@ import { SITE_TITLE } from '../consts';
 		<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
 		<style>
 			main {
-				width: 960px;
-				max-width: calc(100% - 2em);
-				margin: auto;
-				padding: 3em 1em;
+				width: 100%;
+				max-width: 720px;
+				margin: 0 auto;
+				padding: 48px 24px 80px;
 			}
 			h1 {
 				margin-bottom: 1.5rem;
+				color: var(--text-primary);
+			}
+			@media (max-width: 768px) {
+				main {
+					padding: 32px 20px 60px;
+				}
 			}
 			:root {
 				--pagefind-ui-scale: 1;