feat(tarot): 반응형 풀-width 레이아웃 + clamp 기반 fluid sizing

랜딩:
- 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

@@ -53,11 +53,20 @@
 .tarot__hero-content {
   position: relative;
   z-index: 3;
-  padding: 60px 40px 80px;
+  padding: 40px clamp(24px, 4vw, 80px) 80px;
-  max-width: 1200px;
+  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);
+  font-size: clamp(40px, 6vw, 84px);
-  line-height: 1.1;
+  line-height: 1.05;
-  margin: 60px 0 20px;
+  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);
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 16px;
+  gap: clamp(16px, 1.5vw, 28px);
-  margin-top: 40px;
+  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;
+  grid-template-columns: clamp(260px, 22vw, 360px) minmax(0, 1fr) clamp(300px, 26vw, 440px);
-  gap: 24px;
+  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));
+  grid-template-columns: repeat(auto-fit, minmax(var(--tarot-card-w), max-content));
-  gap: 12px;
+  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) {

src/pages/tarot/Tarot.jsx

@@ -26,6 +26,7 @@ export default function Tarot() {
       <div className="tarot__hero-overlay" />
 
       <div className="tarot__hero-content">
+        <div className="tarot__topbar">
           <header className="tarot__brand">
             <span>✦</span>
             <span>ARCANA TAROT</span>
@@ -36,6 +37,7 @@ export default function Tarot() {
             <Link to="/tarot/reading">타로 리딩</Link>
             <Link to="/tarot/history">히스토리</Link>
           </nav>
+        </div>
 
         <h1 className="tarot__h1">당신의 오늘을<br />비추는 타로</h1>
         <p className="tarot__sub">