feat(ui): 메인 레이아웃/홈 페이지를 타깃 사이트 구조로 Tailwind 클론

- layout.tsx: 상단 고정 헤더/중앙 컨테이너/푸터 구성
- page.tsx: 히어로 + 12그리드 메인 + 하단 3컬럼 섹션 추가
- globals.css: 테마 변수/폰트/중립 배경 헬퍼 추가

Refs: @101101_메인페이지구성.md

src/app/page.tsx

@@ -1,17 +1,41 @@
-import Image from "next/image";
-import { QuickActions } from "@/app/components/QuickActions";
 import { HeroBanner } from "@/app/components/HeroBanner";
-import { PostList } from "@/app/components/PostList";
-import { PersonalWidgets } from "@/app/components/PersonalWidgets";
 
 export default function Home({ searchParams }: { searchParams?: { sort?: "recent" | "popular" } }) {
   const sort = searchParams?.sort ?? "recent";
   return (
-    <div className="">
-      <HeroBanner />
-      <QuickActions />
-      <PostList sort={sort} />
-      <PersonalWidgets />
+    <div className="space-y-8">
+      {/* 히어로 섹션: 상단 대형 비주얼 영역 */}
+      <section>
+        <HeroBanner />
+      </section>
+
+      {/* 메인 그리드: 좌 대형 카드, 우 2열 카드 등 타깃 사이트 구조를 단순화한 12그리드 */}
+      <section className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        <div className="md:col-span-8 grid grid-cols-1 gap-4">
+          <div className="aspect-[16/9] rounded-xl bg-neutral-100 overflow-hidden" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="h-40 rounded-xl bg-neutral-100" />
+            <div className="h-40 rounded-xl bg-neutral-100" />
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div className="h-28 rounded-lg bg-neutral-100" />
+            <div className="h-28 rounded-lg bg-neutral-100" />
+            <div className="h-28 rounded-lg bg-neutral-100" />
+          </div>
+        </div>
+        <aside className="md:col-span-4 space-y-4">
+          <div className="h-40 rounded-xl bg-neutral-100" />
+          <div className="h-40 rounded-xl bg-neutral-100" />
+          <div className="h-40 rounded-xl bg-neutral-100" />
+        </aside>
+      </section>
+
+      {/* 하단 롤링 배너/뉴스 영역 유사 섹션 */}
+      <section className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="h-28 rounded-lg bg-neutral-100" />
+        <div className="h-28 rounded-lg bg-neutral-100" />
+        <div className="h-28 rounded-lg bg-neutral-100" />
+      </section>
     </div>
   );
 }