From 840cc280434ef92a7aa84991acd23f49aedab5df Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sun, 24 May 2026 01:40:13 +0900
Subject: [PATCH] =?UTF-8?q?feat(tarot):=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=ED=92=80-width=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20+=20cl?=
 =?UTF-8?q?amp=20=EA=B8=B0=EB=B0=98=20fluid=20sizing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

랜딩:
- topbar로 brand + nav 같은 줄에 묶음 (시안 부합)
- hero content max-width 1200→1600px, padding clamp(24px,4vw,80px)
- h1 size clamp(40px,6vw,84px), margin clamp(40px,6vw,80px)
- sub max-width 520px→44ch + line-height
- tier-row repeat(auto-fit, minmax(240px,1fr)) — 큰 화면 자동 펼침

Reading:
- max-width 1280→1800px, padding clamp(20px,3vw,60px)
- grid columns clamp 기반 fluid (좌 22vw, 우 26vw)
- mid breakpoint 1280px에서 비율 보정, 1024px 이하 single column

History: max-width 960→1400px

Card grid: repeat(auto-fit) — 화면 폭 활용
640px 이하 step indicator wrap + cta wrap

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/tarot/Tarot.css | 79 ++++++++++++++++++++++++++++-----------
 src/pages/tarot/Tarot.jsx | 20 +++++-----
 2 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/src/pages/tarot/Tarot.css b/src/pages/tarot/Tarot.css
index 243f554..b0ab5db 100644
--- a/src/pages/tarot/Tarot.css
+++ b/src/pages/tarot/Tarot.css
@@ -53,11 +53,20 @@
 .tarot__hero-content {
   position: relative;
   z-index: 3;
-  padding: 60px 40px 80px;
-  max-width: 1200px;
+  padding: 40px clamp(24px, 4vw, 80px) 80px;
+  max-width: 1600px;
   margin: 0 auto;
 }
 
+.tarot__topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: clamp(40px, 6vw, 80px);
+  flex-wrap: wrap;
+}
+
 .tarot__brand {
   display: flex;
   align-items: center;
@@ -66,14 +75,15 @@
   font-size: 18px;
   letter-spacing: 4px;
   color: var(--tarot-gold);
-  margin-bottom: 40px;
+  margin: 0;
 }
 
 .tarot__nav {
   display: flex;
-  gap: 24px;
+  gap: clamp(16px, 2vw, 32px);
   font-size: 14px;
   color: var(--tarot-text-dim);
+  flex-wrap: wrap;
 }
 .tarot__nav a {
   color: inherit;
@@ -85,17 +95,19 @@
 
 .tarot__h1 {
   font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
-  font-size: clamp(36px, 5vw, 64px);
-  line-height: 1.1;
-  margin: 60px 0 20px;
+  font-size: clamp(40px, 6vw, 84px);
+  line-height: 1.05;
+  margin: clamp(40px, 6vw, 80px) 0 20px;
   color: var(--tarot-text);
+  max-width: 16ch;
 }
 
 .tarot__sub {
-  font-size: 16px;
+  font-size: clamp(15px, 1.1vw, 18px);
   color: var(--tarot-text-dim);
-  max-width: 520px;
+  max-width: 44ch;
   margin-bottom: 36px;
+  line-height: 1.55;
 }
 
 .tarot__cta-row {
@@ -128,9 +140,10 @@
 
 .tarot__tier-row {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  margin-top: 40px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: clamp(16px, 1.5vw, 28px);
+  margin-top: clamp(40px, 5vw, 72px);
+  max-width: 980px;
 }
 
 .tarot__tier {
@@ -200,12 +213,12 @@
 }
 
 .tarot-reading {
-  max-width: 1280px;
+  max-width: 1800px;
   margin: 0 auto;
-  padding: 32px 24px 40px;
+  padding: 32px clamp(20px, 3vw, 60px) 40px;
   display: grid;
-  grid-template-columns: 320px 1fr 380px;
-  gap: 24px;
+  grid-template-columns: clamp(260px, 22vw, 360px) minmax(0, 1fr) clamp(300px, 26vw, 440px);
+  gap: clamp(16px, 1.5vw, 32px);
   position: relative;
   z-index: 1;
 }
@@ -394,9 +407,11 @@
 /* ===== Grid + Slots ===== */
 .tarot-grid {
   display: grid;
-  grid-template-columns: repeat(4, var(--tarot-card-w));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(var(--tarot-card-w), max-content));
+  gap: clamp(8px, 1vw, 16px);
   justify-content: center;
+  width: 100%;
+  max-width: 720px;
 }
 
 .tarot-slots {
@@ -537,9 +552,9 @@
 
 /* ===== History ===== */
 .tarot-history {
-  max-width: 960px;
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 40px 24px;
+  padding: 40px clamp(20px, 3vw, 60px);
 }
 .tarot-history__item {
   display: grid;
@@ -563,10 +578,32 @@
 }
 
 /* Responsive */
-@media (max-width: 1100px) {
+@media (max-width: 1280px) {
+  .tarot-reading {
+    grid-template-columns: 280px minmax(0, 1fr) 320px;
+  }
+}
+
+@media (max-width: 1024px) {
   .tarot-reading {
     grid-template-columns: 1fr;
   }
+  .tarot__hero-content {
+    padding: 32px 24px 64px;
+  }
+}
+
+@media (max-width: 640px) {
+  .tarot-reading {
+    padding: 24px 16px 32px;
+  }
+  .tarot-reading-steps {
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  .tarot-reading-steps__sep { display: none; }
+  .tarot__cta-row { flex-wrap: wrap; }
+  .tarot__topbar { gap: 16px; }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/src/pages/tarot/Tarot.jsx b/src/pages/tarot/Tarot.jsx
index 1d3d727..66dd075 100644
--- a/src/pages/tarot/Tarot.jsx
+++ b/src/pages/tarot/Tarot.jsx
@@ -26,16 +26,18 @@ export default function Tarot() {
       <div className="tarot__hero-overlay" />
 
       <div className="tarot__hero-content">
-        <header className="tarot__brand">
-          <span>✦</span>
-          <span>ARCANA TAROT</span>
-        </header>
+        <div className="tarot__topbar">
+          <header className="tarot__brand">
+            <span>✦</span>
+            <span>ARCANA TAROT</span>
+          </header>
 
-        <nav className="tarot__nav" aria-label="Tarot navigation">
-          <Link to="/tarot/today">오늘의 카드</Link>
-          <Link to="/tarot/reading">타로 리딩</Link>
-          <Link to="/tarot/history">히스토리</Link>
-        </nav>
+          <nav className="tarot__nav" aria-label="Tarot navigation">
+            <Link to="/tarot/today">오늘의 카드</Link>
+            <Link to="/tarot/reading">타로 리딩</Link>
+            <Link to="/tarot/history">히스토리</Link>
+          </nav>
+        </div>
 
         <h1 className="tarot__h1">당신의 오늘을<br />비추는 타로</h1>
         <p className="tarot__sub">