chore(saju-ui-v2): v1 components/ + Saju.css 일괄 삭제 (Phase 6 cleanup)

feat(saju-ui-v2): CompatibilityResult.jsx v2 — 점수 + 요약 + strengths/challenges
feat(saju-ui-v2): Compatibility.jsx — placeholder → 두 사람 입력 폼 + compat API
2026-05-27 07:48:32 +09:00 · 2026-05-27 07:47:39 +09:00 · 2026-05-27 07:47:22 +09:00 · 2026-05-27 07:47:12 +09:00 · 2026-05-27 07:47:07 +09:00 · 2026-05-27 07:45:13 +09:00
54 changed files with 2106 additions and 1117 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,6 @@ dist-ssr

 # Superpowers visual companion (mockup files)
 .superpowers/
+
+# git worktrees (subagent-driven 격리 작업)
+.worktrees/
--- a/index.html
+++ b/index.html
@@ -5,9 +5,13 @@
    <link rel="icon" type="image/svg+xml" href="/main_logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>가후습 개인기록</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Nanum+Gothic:wght@400;700;800&family=Gowun+Batang:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
  </head>
  <body>
    <div id="root"></div>
--- a/public/images/saju/horyung/background.png
+++ b/public/images/saju/horyung/background.png
--- a/public/images/saju/horyung/horyung-main.png
+++ b/public/images/saju/horyung/horyung-main.png
--- a/src/pages/saju/Compatibility.jsx
+++ b/src/pages/saju/Compatibility.jsx
@@ -1,19 +1,55 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import './Saju.css';
-import SajuNav from './components/SajuNav';
-import HoryungMascot from './components/HoryungMascot';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import MatchMobile from './views/match.mobile.jsx';
+import MatchDesktop from './views/match.desktop.jsx';
+import { compatInterpret } from '../../api';
+
+const EMPTY_PERSON = {
+  name: '', year: '', month: '', day: '', hour: null,
+  gender: 'male', calendar_type: 'solar',
+};

 export default function Compatibility() {
+  const mode = useViewportMode();
+  const navigate = useNavigate();
+  const [personA, setPersonA] = useState({ ...EMPTY_PERSON });
+  const [personB, setPersonB] = useState({ ...EMPTY_PERSON });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async (e) => {
+    if (e && e.preventDefault) e.preventDefault();
+    setError(null);
+    if (!personA.year || !personA.month || !personA.day ||
+        !personB.year || !personB.month || !personB.day) {
+      setError('두 사람의 생년월일을 입력해주세요.');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await compatInterpret({ person_a: personA, person_b: personB });
+      navigate(`/saju/compatibility/result?cid=${res.reading_id}`);
+    } catch (err) {
+      setError(err?.message || '궁합 풀이에 실패했어요.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const props = {
+    personA, personB, onChangeA: setPersonA, onChangeB: setPersonB,
+    onSubmit: handleSubmit, loading, error,
+  };
  return (
-    <div className="saju-page">
-      <SajuNav />
-      <div className="saju-stub">
-        <HoryungMascot pose="thinking" />
-        <h2 className="saju-h2">궁합보기는 곧 만나요</h2>
-        <p>두 사람의 사주를 함께 풀어보는 기능을 준비 중입니다.<br />조금만 기다려 주세요.</p>
-        <Link to="/saju">메인으로 돌아가기</Link>
-      </div>
+    <div className="saju-v2">
+      {mode === 'desktop' && <DesktopHeader />}
+      {mode === 'desktop' ? <MatchDesktop {...props} /> : <MatchMobile {...props} />}
+      {mode === 'mobile' && <BottomNav theme="ivory" />}
    </div>
  );
 }
--- a/src/pages/saju/CompatibilityResult.jsx
+++ b/src/pages/saju/CompatibilityResult.jsx
@@ -1,10 +1,108 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import TopRibbon from './_shell/TopRibbon';
+import TitleBlock from './_shell/TitleBlock';
+import Mascot from './_shell/Mascot';
+import MascotBubble from './_shell/MascotBubble';
+import OrnateFrame from './_shell/OrnateFrame';
+import PrimaryButton from './_shell/PrimaryButton';
+import GhostButton from './_shell/GhostButton';
+import { compatGetReading } from '../../api';

 export default function CompatibilityResult() {
+  const mode = useViewportMode();
+  const [params] = useSearchParams();
+  const cid = params.get('cid');
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!cid) return;
+    compatGetReading(parseInt(cid, 10))
+      .then(setResult)
+      .catch((e) => setError(e?.message || '결과를 가져오지 못했어요.'));
+  }, [cid]);
+
+  const interp = result?.interpretation_json || {};
+  const strengths = interp.strengths || [];
+  const challenges = interp.challenges || [];
+
  return (
-    <div style={{ padding: '2rem', color: '#fff' }}>
-      <h1>궁합 분석 결과</h1>
-      <p>UI 시안 적용 대기 중...</p>
+    <div className="saju-v2">
+      {mode === 'desktop' && <DesktopHeader />}
+      <main className="page paper-bg screen-in">
+        <TopRibbon color="#4E6B5C" opacity={0.6} />
+        <div style={{ maxWidth: mode === 'desktop' ? 720 : 'none', margin: '0 auto', padding: '24px 20px 40px' }}>
+          {!cid && (
+            <>
+              <TitleBlock title="궁합 결과" gold="#4E6B5C" />
+              <div style={{ textAlign: 'center', marginTop: 24 }}>
+                <MascotBubble tone="green" tail={false} text="궁합을 먼저 보세요." style={{ margin: '0 auto 20px' }} />
+                <Link to="/saju/compatibility">
+                  <PrimaryButton color="#4E6B5C" full={false}>궁합 입력하러 가기</PrimaryButton>
+                </Link>
+              </div>
+            </>
+          )}
+          {cid && !result && !error && (
+            <div style={{ textAlign: 'center', padding: 40 }}>
+              <Mascot variant="thinking" size={140} style={{ margin: '0 auto 16px' }} />
+              <MascotBubble tone="green" tail={false}
+                text="호령이 두 사주를 비교 중이에요..."
+                style={{ margin: '0 auto' }} />
+            </div>
+          )}
+          {cid && error && (
+            <div style={{ textAlign: 'center', padding: 40 }}>
+              <MascotBubble tone="green" tail={false}
+                text="궁합 결과를 가져오지 못했어요."
+                style={{ margin: '0 auto 20px' }} />
+              <GhostButton color="#4E6B5C" full={false} onClick={() => window.location.reload()}>다시 시도</GhostButton>
+            </div>
+          )}
+          {result && (
+            <>
+              <TitleBlock title="궁합 결과" gold="#4E6B5C"
+                subtitle={`${result.person_a?.name || '사람 A'} × ${result.person_b?.name || '사람 B'}`} />
+              <div style={{ marginTop: 20, textAlign: 'center' }}>
+                <div className="font-title" style={{ fontSize: 48, color: '#4E6B5C' }}>
+                  {result.score}<span style={{ fontSize: 18, color: '#9A968D', fontWeight: 500 }}>점</span>
+                </div>
+              </div>
+              {interp.summary && (
+                <OrnateFrame color="#4E6B5C" bg="#FBF7EF" radius={14} padding="16px 18px" style={{ marginTop: 20 }}>
+                  <div className="font-title" style={{ fontSize: 13, color: '#4E6B5C', textAlign: 'center', marginBottom: 6 }}>요약</div>
+                  <div style={{ fontSize: 13, color: '#1F2A44', lineHeight: 1.7, whiteSpace: 'pre-line' }}>
+                    {interp.summary}
+                  </div>
+                </OrnateFrame>
+              )}
+              {strengths.length > 0 && (
+                <OrnateFrame color="#4E6B5C" bg="#FBF7EF" radius={14} padding="16px 18px" style={{ marginTop: 14 }}>
+                  <div className="font-title" style={{ fontSize: 13, color: '#4E6B5C', marginBottom: 8 }}>강점</div>
+                  <ul style={{ margin: 0, paddingLeft: 18, color: '#1F2A44', fontSize: 13, lineHeight: 1.7 }}>
+                    {strengths.map((s, i) => (<li key={i}>{s}</li>))}
+                  </ul>
+                </OrnateFrame>
+              )}
+              {challenges.length > 0 && (
+                <OrnateFrame color="#C04A4A" bg="#FBF7EF" radius={14} padding="16px 18px" style={{ marginTop: 14 }}>
+                  <div className="font-title" style={{ fontSize: 13, color: '#C04A4A', marginBottom: 8 }}>주의할 점</div>
+                  <ul style={{ margin: 0, paddingLeft: 18, color: '#1F2A44', fontSize: 13, lineHeight: 1.7 }}>
+                    {challenges.map((s, i) => (<li key={i}>{s}</li>))}
+                  </ul>
+                </OrnateFrame>
+              )}
+            </>
+          )}
+        </div>
+      </main>
+      {mode === 'mobile' && <BottomNav theme="ivory" />}
    </div>
  );
 }
--- a/src/pages/saju/Me.jsx
+++ b/src/pages/saju/Me.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import TopRibbon from './_shell/TopRibbon';
+import Mascot from './_shell/Mascot';
+import MascotBubble from './_shell/MascotBubble';
+import OrnateFrame from './_shell/OrnateFrame';
+
+const DISABLED_CARDS = [
+  { title: '내 사주 이력', desc: '저장된 풀이를 한 번에' },
+  { title: '북마크',        desc: '관심 가는 해석 즐겨찾기' },
+  { title: '설정',          desc: '알림·테마·계정' },
+  { title: '문의',          desc: '호령이 듣고 있어요' },
+];
+
+export default function Me() {
+  const mode = useViewportMode();
+  return (
+    <div className="saju-v2">
+      {mode === 'desktop' && <DesktopHeader />}
+      <main className="page paper-bg screen-in">
+        <TopRibbon />
+        <div style={{
+          maxWidth: mode === 'desktop' ? 720 : 'none',
+          margin: '0 auto', padding: '24px 20px 40px',
+          textAlign: 'center',
+        }}>
+          <Mascot variant="thinking" size={140} style={{ margin: '0 auto 12px' }} />
+          <MascotBubble tone="purple" tail={false}
+            text={'마이페이지는 곧 만나요.\n조금만 기다려주세요.'}
+            style={{ margin: '0 auto 24px' }} />
+          <div style={{ display: 'grid', gap: 12 }}>
+            {DISABLED_CARDS.map((card) => (
+              <OrnateFrame key={card.title} color="#6A4C7C" bg="#FBF7EF" padding="18px 16px"
+                style={{ opacity: 0.55, textAlign: 'left' }}>
+                <div className="font-title" style={{ fontSize: 16, color: '#1F2A44' }}>
+                  {card.title}
+                </div>
+                <div style={{ marginTop: 6, fontSize: 12, color: '#6B6B6B' }}>{card.desc}</div>
+              </OrnateFrame>
+            ))}
+          </div>
+        </div>
+      </main>
+      {mode === 'mobile' && <BottomNav theme="ivory" />}
+    </div>
+  );
+}
--- a/src/pages/saju/Saju.css
+++ b/src/pages/saju/Saju.css
@@ -1,430 +0,0 @@
-/* saju-page scope — 다른 페이지에 영향 없음 */
-.saju-page {
-  /* 베이스 */
-  --saju-cream: #FAF6EE;
-  --saju-paper: #F2EAD8;
-  --saju-ink: #2E2D45;
-  --saju-ink-deep: #1F1D38;
-
-  /* 액센트 */
-  --saju-gold: #D4A574;
-  --saju-gold-deep: #B5874E;
-  --saju-apricot: #C58F76;
-  --saju-rose: #D9A2A6;
-  --saju-jade: #4B7065;
-  --saju-violet: #6A5285;
-
-  /* 카테고리 (3 ActionCard) */
-  --saju-today-bg: #4B7065;
-  --saju-gunghab-bg: #A8736E;
-  --saju-saju-bg: #4F4A78;
-
-  /* 점수 카테고리 (4 ScoreCard) */
-  --saju-wealth: #D4A574;
-  --saju-romance: #D9A2A6;
-  --saju-social: #4B7065;
-  --saju-career: #6A5285;
-
-  min-height: 100vh;
-  background: var(--saju-cream);
-  color: var(--saju-ink);
-  font-family: 'Pretendard', sans-serif;
-  padding: 0;
-  margin: 0;
-}
-
-.saju-page * { box-sizing: border-box; }
-
-.saju-page .saju-h1,
-.saju-page .saju-h2,
-.saju-page .saju-h3 {
-  font-family: 'Noto Serif KR', 'Pretendard', serif;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: var(--saju-ink);
-  margin: 0;
-}
-
-.saju-page .saju-h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.2; }
-.saju-page .saju-h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.3; }
-.saju-page .saju-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
-
-/* 호령 마스코트 */
-.horyung-mascot { display: block; object-fit: contain; }
-.horyung-mascot--sm { width: 80px; height: auto; }
-.horyung-mascot--md { width: 180px; height: auto; }
-.horyung-mascot--lg { width: 320px; height: auto; }
-
-/* 상단 네비게이션 */
-.saju-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 2rem;
-  background: var(--saju-ink);
-  color: var(--saju-cream);
-}
-.saju-nav__logo {
-  font-family: 'Noto Serif KR', serif;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--saju-cream);
-  text-decoration: none;
-}
-.saju-nav__links {
-  display: flex;
-  gap: 1.5rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.saju-nav__links a {
-  color: var(--saju-cream);
-  text-decoration: none;
-  font-size: 0.95rem;
-  opacity: 0.85;
-}
-.saju-nav__links a:hover { opacity: 1; }
-.saju-nav__cta {
-  background: var(--saju-gold);
-  color: var(--saju-ink);
-  border: none;
-  padding: 0.5rem 1.25rem;
-  border-radius: 999px;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: 'Pretendard', sans-serif;
-  text-decoration: none;
-}
-
-/* Hero */
-.saju-hero {
-  display: grid;
-  grid-template-columns: 1fr 1.4fr;
-  gap: 3rem;
-  padding: 3rem 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-.saju-hero__left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-}
-.saju-quote-box {
-  background: var(--saju-paper);
-  padding: 1rem 1.25rem;
-  border-radius: 12px;
-  border: 1px solid var(--saju-gold-deep);
-  color: var(--saju-ink);
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 280px;
-}
-.saju-hero__right {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  justify-content: center;
-}
-.saju-sub {
-  color: var(--saju-ink);
-  opacity: 0.7;
-  margin: 0;
-  line-height: 1.6;
-}
-
-/* ActionCard */
-.saju-action-cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
-  margin-top: 1rem;
-}
-.saju-action-card {
-  background: var(--saju-saju-bg);
-  color: var(--saju-cream);
-  padding: 1.5rem 1rem;
-  border-radius: 16px;
-  text-decoration: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  transition: transform 0.2s;
-  font-family: 'Pretendard', sans-serif;
-}
-.saju-action-card:hover { transform: translateY(-4px); }
-.saju-action-card--today { background: var(--saju-today-bg); }
-.saju-action-card--gunghab { background: var(--saju-gunghab-bg); }
-.saju-action-card--saju { background: var(--saju-saju-bg); }
-.saju-action-card[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
-.saju-action-card__icon { font-size: 2rem; }
-.saju-action-card__title { font-size: 1.1rem; font-weight: 700; }
-.saju-action-card__desc { font-size: 0.85rem; opacity: 0.85; text-align: center; }
-
-/* Bottom */
-.saju-bottom {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  padding: 3rem 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
-  background: var(--saju-ink);
-  color: var(--saju-cream);
-  border-radius: 24px 24px 0 0;
-}
-.saju-form { display: flex; flex-direction: column; gap: 1rem; }
-.saju-form input,
-.saju-form select {
-  padding: 0.75rem;
-  border-radius: 8px;
-  border: 1px solid var(--saju-gold-deep);
-  background: var(--saju-ink-deep);
-  color: var(--saju-cream);
-  font-family: inherit;
-  font-size: 1rem;
-}
-.saju-form button {
-  background: var(--saju-gold);
-  color: var(--saju-ink);
-  border: none;
-  padding: 0.875rem;
-  border-radius: 999px;
-  font-weight: 700;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 1rem;
-}
-.saju-form button:disabled { opacity: 0.6; cursor: not-allowed; }
-.saju-form__error {
-  background: rgba(217, 162, 166, 0.2);
-  color: var(--saju-rose);
-  padding: 0.75rem;
-  border-radius: 8px;
-  font-size: 0.9rem;
-}
-
-/* Fortune ring */
-.saju-fortune-ring {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-.saju-fortune-ring svg { width: 200px; height: 200px; }
-.saju-fortune-ring__score {
-  position: absolute;
-  font-family: 'Noto Serif KR', serif;
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: var(--saju-ink);
-}
-.saju-fortune-ring__total { font-size: 0.9rem; color: var(--saju-ink); opacity: 0.6; }
-
-/* ScoreCard */
-.saju-score-card {
-  background: var(--saju-cream);
-  border-radius: 16px;
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border: 1px solid var(--saju-paper);
-}
-.saju-score-card__head { display: flex; align-items: center; gap: 0.5rem; }
-.saju-score-card__icon { font-size: 1.5rem; }
-.saju-score-card__title { font-weight: 700; font-size: 0.95rem; }
-.saju-score-card__value {
-  font-family: 'Noto Serif KR', serif;
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--saju-ink);
-}
-.saju-score-card__bar {
-  height: 6px;
-  background: var(--saju-paper);
-  border-radius: 3px;
-  overflow: hidden;
-}
-.saju-score-card__bar > div { height: 100%; background: var(--saju-gold); transition: width 0.5s; }
-
-/* Lucky box */
-.saju-lucky-box {
-  background: var(--saju-paper);
-  border-radius: 16px;
-  padding: 1.5rem;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
-}
-.saju-lucky-box__item { text-align: center; }
-.saju-lucky-box__label { font-size: 0.8rem; color: var(--saju-ink); opacity: 0.7; margin-bottom: 0.25rem; }
-.saju-lucky-box__value {
-  font-family: 'Noto Serif KR', serif;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--saju-ink);
-}
-
-/* SajuPillars */
-.saju-pillars {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.75rem;
-}
-.saju-pillar {
-  background: var(--saju-paper);
-  border-radius: 12px;
-  padding: 1rem;
-  text-align: center;
-}
-.saju-pillar__label { font-size: 0.8rem; color: var(--saju-ink); opacity: 0.6; margin-bottom: 0.5rem; }
-.saju-pillar__stem,
-.saju-pillar__branch {
-  font-family: 'Noto Serif KR', serif;
-  font-size: 1.75rem;
-  font-weight: 700;
-  display: block;
-}
-.saju-pillar__stem-kr,
-.saju-pillar__branch-kr { font-size: 0.85rem; opacity: 0.7; }
-.saju-pillar__ten-god,
-.saju-pillar__fortune { font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7; }
-
-/* Element bars */
-.saju-element-bars {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1.5rem;
-  background: var(--saju-cream);
-  border-radius: 16px;
-}
-.saju-element-bar {
-  display: grid;
-  grid-template-columns: 60px 1fr 50px;
-  align-items: center;
-  gap: 0.75rem;
-}
-.saju-element-bar__label { font-size: 0.9rem; font-weight: 700; }
-.saju-element-bar__track {
-  height: 12px;
-  background: var(--saju-paper);
-  border-radius: 6px;
-  overflow: hidden;
-}
-.saju-element-bar__fill {
-  height: 100%;
-  border-radius: 6px;
-  transition: width 0.5s;
-}
-.saju-element-bar__fill--木 { background: #4B7065; }
-.saju-element-bar__fill--火 { background: #C56F5C; }
-.saju-element-bar__fill--土 { background: #D4A574; }
-.saju-element-bar__fill--金 { background: #B8B5A8; }
-.saju-element-bar__fill--水 { background: #4A5878; }
-.saju-element-bar__value { text-align: right; font-size: 0.85rem; opacity: 0.7; }
-
-/* Monthly flow */
-.saju-monthly-flow {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: 0.25rem;
-  padding: 1rem;
-  background: var(--saju-cream);
-  border-radius: 16px;
-}
-.saju-monthly-flow__cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem 0.25rem;
-  border-radius: 8px;
-  background: var(--saju-paper);
-}
-.saju-monthly-flow__month { font-size: 0.7rem; opacity: 0.7; }
-.saju-monthly-flow__score {
-  font-family: 'Noto Serif KR', serif;
-  font-weight: 700;
-  font-size: 1rem;
-}
-.saju-monthly-flow__label { font-size: 0.7rem; opacity: 0.8; margin-top: 0.25rem; }
-
-/* Horyung quote */
-.saju-horyung-quote {
-  background: var(--saju-ink);
-  color: var(--saju-cream);
-  padding: 1.5rem;
-  border-radius: 16px;
-  display: flex;
-  gap: 1rem;
-  align-items: flex-start;
-}
-.saju-horyung-quote__text { font-size: 0.95rem; line-height: 1.6; }
-
-/* Interpret accordion */
-.saju-interpret-accordion { display: flex; flex-direction: column; gap: 0.5rem; }
-.saju-interpret-item {
-  background: var(--saju-cream);
-  border-radius: 12px;
-  border: 1px solid var(--saju-paper);
-  overflow: hidden;
-}
-.saju-interpret-item__header {
-  padding: 1rem;
-  background: var(--saju-paper);
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 700;
-  user-select: none;
-}
-.saju-interpret-item__body { padding: 1rem; font-size: 0.95rem; line-height: 1.6; }
-.saju-interpret-item__evidence {
-  background: var(--saju-paper);
-  padding: 0.75rem;
-  border-radius: 8px;
-  margin-top: 0.75rem;
-  font-size: 0.85rem;
-  opacity: 0.85;
-}
-
-/* Stub */
-.saju-stub {
-  max-width: 480px;
-  margin: 5rem auto;
-  text-align: center;
-  padding: 2rem;
-  background: var(--saju-paper);
-  border-radius: 24px;
-}
-.saju-stub a {
-  display: inline-block;
-  margin-top: 1.5rem;
-  background: var(--saju-gold);
-  color: var(--saju-ink);
-  padding: 0.75rem 1.5rem;
-  border-radius: 999px;
-  text-decoration: none;
-  font-weight: 700;
-}
-
-/* 반응형 */
-@media (max-width: 1280px) {
-  .saju-hero { grid-template-columns: 1fr; text-align: center; }
-  .saju-hero__left { order: 2; }
-  .saju-hero__right { order: 1; }
-  .saju-bottom { grid-template-columns: 1fr; }
-}
-@media (max-width: 768px) {
-  .saju-nav { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
-  .saju-nav__links { display: none; }
-  .saju-action-cards { grid-template-columns: 1fr; }
-  .saju-pillars { grid-template-columns: repeat(2, 1fr); }
-  .saju-monthly-flow { grid-template-columns: repeat(4, 1fr); }
-  .horyung-mascot--lg { width: 220px; }
-}
--- a/src/pages/saju/Saju.jsx
+++ b/src/pages/saju/Saju.jsx
@@ -1,80 +1,19 @@
 import React from 'react';
-import './Saju.css';
-import SajuNav from './components/SajuNav';
-import HoryungMascot from './components/HoryungMascot';
-import SajuInputForm from './components/SajuInputForm';
-import ActionCard from './components/ActionCard';
-import useSajuForm from './hooks/useSajuForm';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import HomeMobile from './views/home.mobile.jsx';
+import HomeDesktop from './views/home.desktop.jsx';

 export default function Saju() {
-  const { form, handleChange, handleSubmit, loading, error } = useSajuForm();
-
+  const mode = useViewportMode();
  return (
-    <div className="saju-page saju-page--main">
-      <SajuNav />
-
-      <section className="saju-hero">
-        <div className="saju-hero__left">
-          <HoryungMascot pose="greeting" size="lg" />
-          <div className="saju-quote-box">
-            <p style={{ margin: 0 }}>
-              전통 사주명리학 + AI 인사이트로<br />
-              당신의 오늘을 풀어드립니다
-            </p>
-          </div>
-        </div>
-        <div className="saju-hero__right">
-          <h1 className="saju-h1">호령이 반갑게<br />맞이하는 오늘의 사주</h1>
-          <p className="saju-sub">
-            오랜 지혜와 정성으로 다듬어진 사주명리학을 호령이 풀어드립니다.<br />
-            당신의 사주 8자에 담긴 운명을 만나보세요.
-          </p>
-
-          <div className="saju-action-cards">
-            <ActionCard
-              to="/saju/today"
-              icon="today"
-              title="오늘의 운세"
-              desc="오늘 하루의 흐름을 확인하세요"
-              variant="today"
-            />
-            <ActionCard
-              to="/saju/compatibility"
-              icon="heart"
-              title="궁합보기"
-              desc="두 사람의 인연을 풀어보세요"
-              variant="gunghab"
-              disabled
-            />
-            <ActionCard
-              to="/saju/result"
-              icon="book"
-              title="사주풀이"
-              desc="당신의 사주 8자를 자세히"
-              variant="saju"
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className="saju-bottom">
-        <div>
-          <h2 className="saju-h2" style={{ color: 'var(--saju-cream)' }}>
-            오늘의 운세 미리보기
-          </h2>
-          <p style={{ color: 'var(--saju-cream)', opacity: 0.7, lineHeight: 1.6 }}>
-            사주 8자를 입력하시면 오늘의 종합점수, 4가지 카테고리 분석, 럭키 정보를 한 번에<br />
-            확인하실 수 있습니다.
-          </p>
-        </div>
-        <SajuInputForm
-          form={form}
-          onChange={handleChange}
-          onSubmit={handleSubmit}
-          loading={loading}
-          error={error}
-        />
-      </section>
+    <div className="saju-v2">
+      {mode === 'desktop' ? <DesktopHeader /> : null}
+      {mode === 'desktop' ? <HomeDesktop /> : <HomeMobile />}
+      {mode === 'mobile' ? <BottomNav theme="navy" /> : null}
    </div>
  );
 }
--- a/src/pages/saju/SajuResult.jsx
+++ b/src/pages/saju/SajuResult.jsx
@@ -1,142 +1,73 @@
 import React from 'react';
 import { useSearchParams, Link } from 'react-router-dom';
-import './Saju.css';
-import SajuNav from './components/SajuNav';
-import HoryungMascot from './components/HoryungMascot';
-import SajuPillars from './components/SajuPillars';
-import ElementBarChart from './components/ElementBarChart';
-import InterpretAccordion from './components/InterpretAccordion';
-import HoryungQuote from './components/HoryungQuote';
-import MonthlyFlow from './components/MonthlyFlow';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
 import useSajuReading from './hooks/useSajuReading';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import Mascot from './_shell/Mascot';
+import MascotBubble from './_shell/MascotBubble';
+import PrimaryButton from './_shell/PrimaryButton';
+import GhostButton from './_shell/GhostButton';
+import SajuMobile from './views/saju.mobile.jsx';
+import SajuDesktop from './views/saju.desktop.jsx';

 export default function SajuResult() {
+  const mode = useViewportMode();
  const [params] = useSearchParams();
  const rid = params.get('rid');
  const ridNum = rid ? parseInt(rid, 10) : null;
  const { data, loading, error } = useSajuReading(ridNum);

-  if (!rid) {
-    return (
-      <div className="saju-page">
-        <SajuNav />
-        <div className="saju-stub">
-          <HoryungMascot pose="thinking" />
-          <h2 className="saju-h2">사주 정보가 없어요</h2>
-          <p>먼저 메인 페이지에서 사주를 입력해주세요.</p>
-          <Link to="/saju">메인으로 가기</Link>
-        </div>
-      </div>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="saju-page">
-        <SajuNav />
-        <div className="saju-stub">
-          <HoryungMascot pose="thinking" />
-          <p>호령이 사주를 풀어보는 중...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error || !data) {
-    return (
-      <div className="saju-page">
-        <SajuNav />
-        <div className="saju-stub">
-          <h2 className="saju-h2">사주 결과를 찾을 수 없어요</h2>
-          <p>{error || '다시 입력해주세요.'}</p>
-          <Link to="/saju">메인으로 가기</Link>
-        </div>
-      </div>
-    );
-  }
-
-  const saju = data.saju_data;
-  const analysis = data.analysis_data;
-  const interp = data.interpretation_json;
-  const monthlyFlow = data.monthly_flow;
-
  return (
-    <div className="saju-page">
-      <SajuNav />
-
-      <section className="saju-hero">
-        <div className="saju-hero__left">
-          <HoryungMascot pose="thinking" size="lg" />
-        </div>
-        <div className="saju-hero__right">
-          <h1 className="saju-h1">사주풀이</h1>
-          <p className="saju-sub">
-            {data.birth_year}년 {data.birth_month}월 {data.birth_day}일
-            {data.birth_hour !== null ? ` ${data.birth_hour}시` : ' (시간 미상)'} ·{' '}
-            {data.gender === 'male' ? '남' : '여'} ·{' '}
-            {data.calendar_type === 'lunar' ? '음력' : '양력'}
-          </p>
-          {interp?.summary && (
-            <HoryungQuote pose="thinking" text={interp.summary} />
-          )}
-        </div>
-      </section>
-
-      <section style={{ padding: '0 2rem', maxWidth: 1400, margin: '0 auto', display: 'grid', gap: '2rem' }}>
-        <div>
-          <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>사주 4기둥</h2>
-          <SajuPillars saju={saju} />
-        </div>
-
-        <div>
-          <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>오행 분석</h2>
-          <ElementBarChart scores={analysis?.element_scores} />
-        </div>
-
-        {analysis?.day_master_strength && (
-          <div>
-            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>일간 강도</h2>
-            <div className="saju-quote-box" style={{ maxWidth: 'none' }}>
-              <p style={{ margin: 0 }}>
-                <strong>{analysis.day_master_strength.result}</strong> · 점수 {analysis.day_master_strength.score}<br />
-                {(analysis.day_master_strength.reasons || []).join(' · ')}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {monthlyFlow && (
-          <div>
-            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>12개월 운세 흐름</h2>
-            <MonthlyFlow flow={monthlyFlow} />
-          </div>
-        )}
-
-        {interp?.items && (
-          <div>
-            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>AI 12항목 해석</h2>
-            <InterpretAccordion items={interp.items} />
-          </div>
-        )}
-
-        {interp?.advice && (
-          <div>
-            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>호령의 조언</h2>
-            <HoryungQuote pose="happy" text={interp.advice} />
-          </div>
-        )}
-      </section>
-
-      <section style={{ padding: '3rem 2rem', display: 'flex', gap: '1rem', justifyContent: 'center' }}>
-        <Link to={`/saju/today?rid=${rid}`} className="saju-action-card saju-action-card--today" style={{ maxWidth: 240 }}>
-          <span className="saju-action-card__icon">☀</span>
-          <span className="saju-action-card__title">오늘의 운세</span>
-        </Link>
-        <Link to="/saju" className="saju-action-card saju-action-card--saju" style={{ maxWidth: 240 }}>
-          <span className="saju-action-card__icon">📖</span>
-          <span className="saju-action-card__title">새 사주 보기</span>
-        </Link>
-      </section>
+    <div className="saju-v2">
+      {mode === 'desktop' && <DesktopHeader />}
+      {!rid && <EmptyState />}
+      {rid && loading && <LoadingState />}
+      {rid && error && <ErrorState />}
+      {rid && data && (mode === 'desktop'
+        ? <SajuDesktop reading={data} />
+        : <SajuMobile reading={data} />
+      )}
+      {mode === 'mobile' && <BottomNav theme="ivory" />}
    </div>
  );
 }
+
+function EmptyState() {
+  return (
+    <main className="page paper-bg screen-in" style={{ padding: '40px 24px', textAlign: 'center' }}>
+      <Mascot variant="greeting" size={160} style={{ margin: '0 auto 16px' }} />
+      <MascotBubble tone="ivory" tail={false}
+        text="사주를 먼저 입력해주세요."
+        style={{ margin: '0 auto 24px' }} />
+      <Link to="/saju" style={{ display: 'inline-block' }}>
+        <PrimaryButton color="#6A4C7C" full={false}>사주 입력하러 가기</PrimaryButton>
+      </Link>
+    </main>
+  );
+}
+
+function LoadingState() {
+  return (
+    <main className="page paper-bg screen-in" style={{ padding: '60px 24px', textAlign: 'center' }}>
+      <Mascot variant="thinking" size={160} style={{ margin: '0 auto 16px' }} />
+      <MascotBubble tone="purple" tail={false}
+        text={'호령이 풀이 중이에요...\n(최대 1분 정도 걸려요)'}
+        style={{ margin: '0 auto' }} />
+    </main>
+  );
+}
+
+function ErrorState() {
+  return (
+    <main className="page paper-bg screen-in" style={{ padding: '40px 24px', textAlign: 'center' }}>
+      <Mascot variant="thinking" size={140} style={{ margin: '0 auto 16px' }} />
+      <MascotBubble tone="purple" tail={false}
+        text="아이고, 풀이를 가져오지 못했어요. 다시 시도해주세요."
+        style={{ margin: '0 auto 20px' }} />
+      <GhostButton color="#6A4C7C" full={false} onClick={() => window.location.reload()}>다시 시도</GhostButton>
+    </main>
+  );
+}
--- a/src/pages/saju/Today.jsx
+++ b/src/pages/saju/Today.jsx
@@ -1,138 +1,73 @@
 import React from 'react';
 import { useSearchParams, Link } from 'react-router-dom';
-import './Saju.css';
-import SajuNav from './components/SajuNav';
-import HoryungMascot from './components/HoryungMascot';
-import FortuneRing from './components/FortuneRing';
-import ScoreCard from './components/ScoreCard';
-import LuckyBox from './components/LuckyBox';
-import HoryungQuote from './components/HoryungQuote';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
 import useSajuReading from './hooks/useSajuReading';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import Mascot from './_shell/Mascot';
+import MascotBubble from './_shell/MascotBubble';
+import PrimaryButton from './_shell/PrimaryButton';
+import GhostButton from './_shell/GhostButton';
+import TodayMobile from './views/today.mobile.jsx';
+import TodayDesktop from './views/today.desktop.jsx';

 export default function Today() {
+  const mode = useViewportMode();
  const [params] = useSearchParams();
  const rid = params.get('rid');
  const ridNum = rid ? parseInt(rid, 10) : null;
  const { data, loading, error } = useSajuReading(ridNum);

-  if (!rid) {
-    return (
-      <div className="saju-page">
-        <SajuNav />
-        <div className="saju-stub">
-          <HoryungMascot pose="thinking" />
-          <h2 className="saju-h2">사주가 필요해요</h2>
-          <p>오늘의 운세를 보려면 먼저 사주를 입력해주세요.</p>
-          <Link to="/saju">사주 입력하러 가기</Link>
-        </div>
-      </div>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="saju-page">
-        <SajuNav />
-        <div className="saju-stub">
-          <HoryungMascot pose="thinking" />
-          <p>오늘의 운세를 풀어보는 중...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error || !data) {
-    return (
-      <div className="saju-page">
-        <SajuNav />
-        <div className="saju-stub">
-          <h2 className="saju-h2">결과를 찾을 수 없어요</h2>
-          <p>{error || '다시 입력해주세요.'}</p>
-          <Link to="/saju">메인으로 가기</Link>
-        </div>
-      </div>
-    );
-  }
-
-  const scores = data.fortune_scores;
-  const lucky = data.lucky;
-
  return (
-    <div className="saju-page">
-      <SajuNav />
-
-      <section className="saju-hero">
-        <div className="saju-hero__left">
-          <HoryungMascot pose="pointing" size="lg" />
-        </div>
-        <div className="saju-hero__right">
-          <h1 className="saju-h1">오늘의 운세</h1>
-          <p className="saju-sub">
-            오늘 하루 어떤 흐름이 호령을 따라올지 확인해보세요.
-          </p>
-        </div>
-      </section>
-
-      <section style={{ padding: '0 2rem', maxWidth: 1400, margin: '0 auto', display: 'grid', gap: '2rem' }}>
-        {scores && (
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '2rem', alignItems: 'center' }}>
-            <div>
-              <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>오늘의 종합점</h2>
-              <FortuneRing score={scores.overall} />
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem' }}>
-              <ScoreCard category="wealth" score={scores.wealth} />
-              <ScoreCard category="romance" score={scores.romance} />
-              <ScoreCard category="social" score={scores.social} />
-              <ScoreCard category="career" score={scores.career} />
-            </div>
-          </div>
-        )}
-
-        {lucky && (
-          <div>
-            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>오늘의 럭키</h2>
-            <LuckyBox lucky={lucky} />
-          </div>
-        )}
-
-        {(lucky?.good_signs?.length || lucky?.warnings?.length) ? (
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
-            {lucky.good_signs?.length > 0 && (
-              <div className="saju-quote-box" style={{ maxWidth: 'none', background: 'rgba(75, 112, 101, 0.15)' }}>
-                <strong style={{ color: 'var(--saju-jade)' }}>✦ 행운 알림</strong>
-                <ul style={{ marginTop: '0.5rem', paddingLeft: '1.2rem' }}>
-                  {lucky.good_signs.map((s, i) => <li key={i}>{s}</li>)}
-                </ul>
-              </div>
-            )}
-            {lucky.warnings?.length > 0 && (
-              <div className="saju-quote-box" style={{ maxWidth: 'none', background: 'rgba(197, 143, 118, 0.15)' }}>
-                <strong style={{ color: 'var(--saju-apricot)' }}>⚠ 주의사항</strong>
-                <ul style={{ marginTop: '0.5rem', paddingLeft: '1.2rem' }}>
-                  {lucky.warnings.map((s, i) => <li key={i}>{s}</li>)}
-                </ul>
-              </div>
-            )}
-          </div>
-        ) : null}
-
-        <HoryungQuote
-          pose="happy"
-          text="오늘 하루도 호령과 함께 평안하시길 바라요. 작은 신호에도 귀 기울이세요."
-        />
-      </section>
-
-      <section style={{ padding: '3rem 2rem', display: 'flex', gap: '1rem', justifyContent: 'center' }}>
-        <Link to={`/saju/result?rid=${rid}`} className="saju-action-card saju-action-card--saju" style={{ maxWidth: 240 }}>
-          <span className="saju-action-card__icon">📖</span>
-          <span className="saju-action-card__title">사주풀이 보기</span>
-        </Link>
-        <Link to="/saju" className="saju-action-card saju-action-card--gunghab" style={{ maxWidth: 240 }} aria-disabled="true">
-          <span className="saju-action-card__icon">♥</span>
-          <span className="saju-action-card__title">궁합 (준비 중)</span>
-        </Link>
-      </section>
+    <div className="saju-v2">
+      {mode === 'desktop' && <DesktopHeader />}
+      {!rid && <EmptyState />}
+      {rid && loading && <LoadingState />}
+      {rid && error && <ErrorState />}
+      {rid && data && (mode === 'desktop'
+        ? <TodayDesktop reading={data} />
+        : <TodayMobile reading={data} />
+      )}
+      {mode === 'mobile' && <BottomNav theme="ivory" />}
    </div>
  );
 }
+
+function EmptyState() {
+  return (
+    <main className="page paper-bg screen-in" style={{ padding: '40px 24px', textAlign: 'center' }}>
+      <Mascot variant="greeting" size={160} style={{ margin: '0 auto 16px' }} />
+      <MascotBubble tone="ivory" tail={false}
+        text="사주를 먼저 입력해주세요."
+        style={{ margin: '0 auto 24px' }} />
+      <Link to="/saju" style={{ display: 'inline-block' }}>
+        <PrimaryButton color="#D4AF37" full={false}>사주 입력하러 가기</PrimaryButton>
+      </Link>
+    </main>
+  );
+}
+
+function LoadingState() {
+  return (
+    <main className="page paper-bg screen-in" style={{ padding: '60px 24px', textAlign: 'center' }}>
+      <Mascot variant="thinking" size={160} style={{ margin: '0 auto 16px' }} />
+      <MascotBubble tone="ivory" tail={false}
+        text="호령이 오늘 운세를 살펴보고 있어요..."
+        style={{ margin: '0 auto' }} />
+    </main>
+  );
+}
+
+function ErrorState() {
+  return (
+    <main className="page paper-bg screen-in" style={{ padding: '40px 24px', textAlign: 'center' }}>
+      <Mascot variant="thinking" size={140} style={{ margin: '0 auto 16px' }} />
+      <MascotBubble tone="ivory" tail={false}
+        text="오늘 운세를 가져오지 못했어요."
+        style={{ margin: '0 auto 20px' }} />
+      <GhostButton color="#D4AF37" full={false} onClick={() => window.location.reload()}>다시 시도</GhostButton>
+    </main>
+  );
+}
--- a/src/pages/saju/_shell/BottomNav.jsx
+++ b/src/pages/saju/_shell/BottomNav.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { IconHome, IconSun, IconHeart, IconYinYang, IconUser } from './Icons';
+import hexA from './helpers/hexA';
+
+const NAV_ITEMS = [
+  { id: 'home',  to: '/saju',                label: '홈',         Icon: IconHome,    accent: '#1F2A44' },
+  { id: 'today', to: '/saju/today',          label: '오늘의 운세', Icon: IconSun,     accent: '#D4AF37' },
+  { id: 'match', to: '/saju/compatibility',  label: '궁합보기',    Icon: IconHeart,   accent: '#4E6B5C' },
+  { id: 'saju',  to: '/saju/result',         label: '사주풀이',    Icon: IconYinYang, accent: '#6A4C7C' },
+  { id: 'me',    to: '/saju/me',             label: '마이페이지',  Icon: IconUser,    accent: '#6B6B6B' },
+];
+
+function pathToCurrent(pathname) {
+  if (pathname === '/saju' || pathname === '/saju/') return 'home';
+  if (pathname.startsWith('/saju/today')) return 'today';
+  if (pathname.startsWith('/saju/compatibility')) return 'match';
+  if (pathname.startsWith('/saju/result')) return 'saju';
+  if (pathname.startsWith('/saju/me')) return 'me';
+  return 'home';
+}
+
+export default function BottomNav({ theme = 'ivory' }) {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const current = pathToCurrent(pathname);
+  const isDark = theme === 'navy';
+  const bg = isDark ? 'rgba(20,27,48,0.92)' : '#FBF7EF';
+  const border = isDark ? 'rgba(212,175,55,0.18)' : 'rgba(31,42,68,0.08)';
+  const inactive = isDark ? 'rgba(247,242,232,0.55)' : '#9A968D';
+
+  return (
+    <nav aria-label="사주 메뉴" style={{
+      position: 'fixed', left: 0, right: 0, bottom: 0,
+      paddingBottom: 'max(16px, env(safe-area-inset-bottom))', paddingTop: 8,
+      background: bg, borderTop: `1px solid ${border}`,
+      backdropFilter: 'blur(14px) saturate(140%)',
+      WebkitBackdropFilter: 'blur(14px) saturate(140%)',
+      zIndex: 30,
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'flex-end', padding: '0 6px' }}>
+        {NAV_ITEMS.map((item) => {
+          const active = item.id === current;
+          const activeColor = isDark
+            ? (item.id === 'today' ? '#E8C76B' : item.accent === '#1F2A44' ? '#F7F2E8' : item.accent)
+            : item.accent;
+          const color = active ? activeColor : inactive;
+          return (
+            <button key={item.id} onClick={() => navigate(item.to)} aria-label={item.label}
+              aria-current={active ? 'page' : undefined}
+              style={{
+                background: 'transparent', border: 'none', padding: '6px 4px',
+                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
+                color, flex: 1, minWidth: 0, position: 'relative',
+                transition: 'color .2s',
+              }}>
+              <span style={{
+                width: 36, height: 28, borderRadius: 999,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                background: active ? hexA(item.accent, isDark ? 0.18 : 0.10) : 'transparent',
+                transition: 'background .2s',
+              }}>
+                <item.Icon size={20} stroke={color} strokeWidth={active ? 1.8 : 1.5} />
+              </span>
+              <span style={{
+                fontSize: 9.5, fontWeight: active ? 700 : 500, letterSpacing: '-0.04em',
+                whiteSpace: 'nowrap',
+              }}>{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+
+export { NAV_ITEMS };
--- a/src/pages/saju/_shell/DesktopHeader.jsx
+++ b/src/pages/saju/_shell/DesktopHeader.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { NAV_ITEMS } from './BottomNav';
+
+function pathToCurrent(pathname) {
+  if (pathname === '/saju' || pathname === '/saju/') return 'home';
+  if (pathname.startsWith('/saju/today')) return 'today';
+  if (pathname.startsWith('/saju/compatibility')) return 'match';
+  if (pathname.startsWith('/saju/result')) return 'saju';
+  if (pathname.startsWith('/saju/me')) return 'me';
+  return 'home';
+}
+
+export default function DesktopHeader() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const current = pathToCurrent(pathname);
+
+  return (
+    <header style={{
+      position: 'sticky', top: 0, zIndex: 30, height: 64,
+      background: '#FBF7EF', borderBottom: '1px solid rgba(31,42,68,0.10)',
+      display: 'flex', alignItems: 'center', padding: '0 32px',
+      backdropFilter: 'blur(14px)',
+    }}>
+      <button onClick={() => navigate('/saju')} style={{
+        background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', gap: 10,
+      }}>
+        <span className="font-title" style={{
+          fontSize: 26, color: '#D4AF37', lineHeight: 1,
+        }}>壽</span>
+        <span className="font-title" style={{
+          fontSize: 18, color: '#1F2A44', letterSpacing: '-0.02em',
+        }}>호령사주</span>
+      </button>
+      <nav aria-label="사주 메뉴" style={{ marginLeft: 40, display: 'flex', gap: 8 }}>
+        {NAV_ITEMS.map((item) => {
+          const active = item.id === current;
+          return (
+            <button key={item.id} onClick={() => navigate(item.to)}
+              aria-current={active ? 'page' : undefined}
+              style={{
+                background: active ? 'rgba(31,42,68,0.06)' : 'transparent', border: 'none',
+                padding: '8px 14px', borderRadius: 8,
+                color: active ? item.accent : '#6B6B6B',
+                fontSize: 13, fontWeight: active ? 700 : 500, letterSpacing: '-0.02em',
+                display: 'flex', alignItems: 'center', gap: 6,
+              }}>
+              <item.Icon size={16} stroke={active ? item.accent : '#9A968D'} strokeWidth={active ? 1.8 : 1.5} />
+              {item.label}
+            </button>
+          );
+        })}
+      </nav>
+    </header>
+  );
+}
--- a/src/pages/saju/_shell/GhostButton.jsx
+++ b/src/pages/saju/_shell/GhostButton.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import hexA from './helpers/hexA';
+
+export default function GhostButton({
+  children, color = '#1F2A44', onClick, full = true, style = {}, type = 'button',
+}) {
+  return (
+    <button type={type} onClick={onClick} style={{
+      width: full ? '100%' : 'auto', padding: '13px 22px',
+      background: 'transparent', color, border: `1px solid ${hexA(color, 0.4)}`,
+      borderRadius: 12, fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+      ...style,
+    }}>
+      {children}
+    </button>
+  );
+}
--- a/src/pages/saju/_shell/Icons.jsx
+++ b/src/pages/saju/_shell/Icons.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+
+const base = (size, stroke, strokeWidth = 1.5) => ({
+  width: size, height: size, fill: 'none', stroke,
+  strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
+});
+
+export function IconHome({ size = 20, stroke = 'currentColor', strokeWidth }) {
+  return (
+    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
+      <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-3v-6h-8v6H5a2 2 0 0 1-2-2z" />
+    </svg>
+  );
+}
+
+export function IconSun({ size = 20, stroke = 'currentColor', strokeWidth }) {
+  return (
+    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" />
+    </svg>
+  );
+}
+
+export function IconHeart({ size = 20, stroke = 'currentColor', strokeWidth }) {
+  return (
+    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
+      <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 7a5.5 5.5 0 0 1 9.5 5c-2.5 4.5-9.5 9-9.5 9z" />
+    </svg>
+  );
+}
+
+export function IconYinYang({ size = 20, stroke = 'currentColor', strokeWidth }) {
+  return (
+    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 3a4.5 4.5 0 0 0 0 9 4.5 4.5 0 0 1 0 9" />
+      <circle cx="12" cy="7.5" r="1" fill={stroke} />
+      <circle cx="12" cy="16.5" r="1" fill={stroke} />
+    </svg>
+  );
+}
+
+export function IconUser({ size = 20, stroke = 'currentColor', strokeWidth }) {
+  return (
+    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
+      <circle cx="12" cy="8" r="4" />
+      <path d="M4 21c1-4 5-6 8-6s7 2 8 6" />
+    </svg>
+  );
+}
+
+export function IconPaw({ size = 12, color = 'currentColor' }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
+      <ellipse cx="6" cy="10" rx="2" ry="2.5" />
+      <ellipse cx="10" cy="6" rx="2" ry="2.5" />
+      <ellipse cx="14" cy="6" rx="2" ry="2.5" />
+      <ellipse cx="18" cy="10" rx="2" ry="2.5" />
+      <path d="M8 14c0-2 2-3 4-3s4 1 4 3-2 5-4 5-4-3-4-5z" />
+    </svg>
+  );
+}
+
+export function IconChevron({ size = 14, color = 'currentColor', dir = 'right' }) {
+  const rotate = { right: 0, down: 90, left: 180, up: 270 }[dir] || 0;
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size}
+      fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+      style={{ transform: `rotate(${rotate}deg)` }}>
+      <path d="M9 6l6 6-6 6" />
+    </svg>
+  );
+}
+
+export function IconSparkle({ size = 12, color = 'currentColor' }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
+      <path d="M12 2l2 7 7 2-7 2-2 7-2-7-7-2 7-2z" />
+    </svg>
+  );
+}
--- a/src/pages/saju/_shell/InputRow.jsx
+++ b/src/pages/saju/_shell/InputRow.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function InputRow({
+  label, name, type = 'text', value, onChange, placeholder, error, children,
+}) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', padding: '12px 14px',
+      borderBottom: '1px solid rgba(31,42,68,0.06)', gap: 12,
+    }}>
+      <label htmlFor={name} style={{
+        width: 80, fontSize: 12, color: '#6B6B6B', fontWeight: 700, letterSpacing: '-0.01em',
+      }}>{label}</label>
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
+        {children || (
+          <input
+            id={name} name={name} type={type} value={value} onChange={onChange}
+            placeholder={placeholder}
+            style={{
+              flex: 1, padding: '8px 10px', border: '1px solid rgba(31,42,68,0.12)',
+              borderRadius: 8, background: '#FBF7EF',
+              fontSize: 13, color: '#1F2A44', fontFamily: 'inherit',
+            }}
+          />
+        )}
+        {error && (
+          <span style={{ fontSize: 11, color: '#C04A4A', fontWeight: 700 }}>{error}</span>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/pages/saju/_shell/Mascot.jsx
+++ b/src/pages/saju/_shell/Mascot.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const VARIANT_TO_SRC = {
+  full:     '/images/saju/horyung/horyung-main.png',
+  head:     '/images/saju/horyung/horyung-bust.png',
+  upper:    '/images/saju/horyung/horyung-front.png',
+  greeting: '/images/saju/horyung/horyung-greeting.png',
+  thinking: '/images/saju/horyung/horyung-thinking.png',
+  pointing: '/images/saju/horyung/horyung-pointing.png',
+  happy:    '/images/saju/horyung/horyung-happy.png',
+};
+
+export default function Mascot({ variant = 'full', size = 200, style = {}, alt = '호령' }) {
+  const src = VARIANT_TO_SRC[variant] || VARIANT_TO_SRC.full;
+  return (
+    <img src={src} alt={alt} width={size} loading="lazy" style={{ display: 'block', ...style }} />
+  );
+}
--- a/src/pages/saju/_shell/Mascot.test.jsx
+++ b/src/pages/saju/_shell/Mascot.test.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Mascot from './Mascot';
+
+describe('Mascot', () => {
+  const VARIANTS = ['full', 'head', 'upper', 'greeting', 'thinking', 'pointing', 'happy'];
+  VARIANTS.forEach((v) => {
+    it(`renders variant=${v} with correct src`, () => {
+      const { container } = render(<Mascot variant={v} size={100} />);
+      const img = container.querySelector('img');
+      expect(img).toBeTruthy();
+      expect(img.getAttribute('src')).toContain('/images/saju/horyung/');
+    });
+  });
+});
--- a/src/pages/saju/_shell/MascotBubble.jsx
+++ b/src/pages/saju/_shell/MascotBubble.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconPaw } from './Icons';
+
+const PALETTES = {
+  ivory:  { bg: '#FBF7EF',                border: 'rgba(31,42,68,0.12)',  text: '#1F2A44', paw: '#B89530' },
+  navy:   { bg: 'rgba(255,255,255,0.06)', border: 'rgba(212,175,55,0.35)', text: '#F7F2E8', paw: '#D4AF37' },
+  green:  { bg: '#FBF7EF',                border: 'rgba(78,107,92,0.30)',  text: '#1F2A44', paw: '#B89530' },
+  purple: { bg: '#FBF7EF',                border: 'rgba(106,76,124,0.30)', text: '#1F2A44', paw: '#B89530' },
+};
+
+export default function MascotBubble({
+  text, align = 'left', tone = 'ivory', tail = true, paw = true, style = {},
+}) {
+  const p = PALETTES[tone] || PALETTES.ivory;
+  return (
+    <div style={{
+      position: 'relative', background: p.bg, color: p.text,
+      border: `1px solid ${p.border}`, borderRadius: 14,
+      padding: '12px 14px',
+      fontSize: 13, lineHeight: 1.55, letterSpacing: '-0.01em',
+      maxWidth: 240, boxShadow: '0 2px 6px rgba(31,42,68,0.04)',
+      ...style,
+    }}>
+      <div style={{ whiteSpace: 'pre-line' }}>{text}</div>
+      {paw && (
+        <div style={{ marginTop: 4, textAlign: 'right', color: p.paw, opacity: 0.8 }}>
+          <span className="paw-bob"><IconPaw size={12} color={p.paw} /></span>
+        </div>
+      )}
+      {tail && (
+        <div style={{
+          position: 'absolute', bottom: -7, [align]: 22,
+          width: 14, height: 14, background: p.bg,
+          borderRight: `1px solid ${p.border}`, borderBottom: `1px solid ${p.border}`,
+          transform: 'rotate(45deg)',
+        }} />
+      )}
+    </div>
+  );
+}
--- a/src/pages/saju/_shell/OrnamentBloom.jsx
+++ b/src/pages/saju/_shell/OrnamentBloom.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function OrnamentBloom({ size = 18, color = '#D4AF37' }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      <circle cx="9" cy="9" r="2.4" fill={color} />
+      {[0, 60, 120, 180, 240, 300].map((angle) => (
+        <ellipse key={angle} cx="9" cy="4" rx="1.6" ry="3" fill={color} opacity="0.7"
+          transform={`rotate(${angle} 9 9)`} />
+      ))}
+    </svg>
+  );
+}
--- a/src/pages/saju/_shell/OrnateFrame.jsx
+++ b/src/pages/saju/_shell/OrnateFrame.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import hexA from './helpers/hexA';
+
+export default function OrnateFrame({
+  children, color = '#D4AF37', bg = 'transparent', radius = 14, padding = '20px',
+  style = {}, double = false,
+}) {
+  return (
+    <div style={{
+      position: 'relative', borderRadius: radius,
+      background: bg, padding,
+      border: `1px solid ${hexA(color, 0.45)}`,
+      boxShadow: 'var(--shadow-card)',
+      ...style,
+    }}>
+      {double && (
+        <div style={{
+          position: 'absolute', inset: 4, borderRadius: radius - 4,
+          border: `1px solid ${hexA(color, 0.3)}`, pointerEvents: 'none',
+        }} />
+      )}
+      {[[0,0,0],[0,1,90],[1,1,180],[1,0,270]].map(([x,y,r], i) => (
+        <svg key={i} width="12" height="12" viewBox="0 0 12 12" style={{
+          position: 'absolute',
+          [x ? 'right' : 'left']: 6,
+          [y ? 'bottom' : 'top']: 6,
+          transform: `rotate(${r}deg)`,
+          pointerEvents: 'none',
+        }}>
+          <path d="M0 4 L0 0 L4 0" stroke={color} strokeWidth="1.2" fill="none" strokeLinecap="round" />
+        </svg>
+      ))}
+      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
+    </div>
+  );
+}
--- a/src/pages/saju/_shell/PrimaryButton.jsx
+++ b/src/pages/saju/_shell/PrimaryButton.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import hexA from './helpers/hexA';
+
+export default function PrimaryButton({
+  children, color = '#1F2A44', onClick, full = true, style = {}, gold = true, type = 'button',
+}) {
+  return (
+    <button type={type} onClick={onClick} style={{
+      width: full ? '100%' : 'auto', padding: '14px 22px',
+      background: color, color: '#F7F2E8',
+      border: 'none', borderRadius: 12,
+      fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
+      boxShadow: gold
+        ? `0 2px 0 ${hexA(color, 0.4)}, 0 6px 18px ${hexA(color, 0.25)}, inset 0 1px 0 rgba(212,175,55,0.4)`
+        : '0 4px 14px rgba(31,42,68,0.18)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+      ...style,
+    }}>
+      {children}
+    </button>
+  );
+}
--- a/src/pages/saju/_shell/TitleBlock.jsx
+++ b/src/pages/saju/_shell/TitleBlock.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import OrnamentBloom from './OrnamentBloom';
+
+export default function TitleBlock({
+  title, subtitle, color = '#1F2A44', subColor = '#6B6B6B',
+  center = true, withBloom = true, gold = '#D4AF37',
+}) {
+  return (
+    <div style={{ textAlign: center ? 'center' : 'left' }}>
+      {withBloom && center && (
+        <div style={{
+          display: 'flex', justifyContent: 'center', gap: 12,
+          alignItems: 'center', marginBottom: 10, color: gold,
+        }}>
+          <svg width="40" height="6" viewBox="0 0 40 6">
+            <path d="M0 3 L36 3" stroke={gold} strokeWidth="1" />
+            <circle cx="38" cy="3" r="1.5" fill={gold} />
+          </svg>
+          <OrnamentBloom size={18} color={gold} />
+          <svg width="40" height="6" viewBox="0 0 40 6">
+            <circle cx="2" cy="3" r="1.5" fill={gold} />
+            <path d="M4 3 L40 3" stroke={gold} strokeWidth="1" />
+          </svg>
+        </div>
+      )}
+      <h1 className="font-title" style={{
+        margin: 0, fontSize: 30, color, letterSpacing: '-0.02em',
+      }}>{title}</h1>
+      {subtitle && (
+        <div style={{
+          marginTop: 6, fontSize: 13, color: subColor, lineHeight: 1.55,
+          letterSpacing: '-0.01em',
+        }}>{subtitle}</div>
+      )}
+    </div>
+  );
+}
--- a/src/pages/saju/_shell/TopRibbon.jsx
+++ b/src/pages/saju/_shell/TopRibbon.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+function CloudOrnament({ width = 90, color = '#D4AF37', opacity = 0.85 }) {
+  return (
+    <svg width={width} height={width / 3.5} viewBox="0 0 90 26" fill="none" opacity={opacity}>
+      <path d="M5 18 Q12 6 24 12 Q36 4 48 14 Q60 6 72 14 Q82 8 88 18"
+        stroke={color} strokeWidth="1" fill="none" />
+      <circle cx="24" cy="12" r="1.4" fill={color} />
+      <circle cx="48" cy="14" r="1.4" fill={color} />
+      <circle cx="72" cy="14" r="1.4" fill={color} />
+    </svg>
+  );
+}
+
+export default function TopRibbon({ color = '#D4AF37', opacity = 0.5 }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 0', opacity }}>
+      <CloudOrnament width={90} color={color} opacity={0.85} />
+    </div>
+  );
+}
--- a/src/pages/saju/_shell/helpers/colorMap.js
+++ b/src/pages/saju/_shell/helpers/colorMap.js
@@ -0,0 +1,20 @@
+const ELEMENT_TO_VAR = {
+  wood: 'var(--el-wood)',
+  fire: 'var(--el-fire)',
+  earth: 'var(--el-earth)',
+  metal: 'var(--el-metal)',
+  water: 'var(--el-water)',
+};
+
+const ELEMENT_KO = { wood: '목', fire: '화', earth: '토', metal: '금', water: '수' };
+const ELEMENT_CH = { wood: '木', fire: '火', earth: '土', metal: '金', water: '水' };
+
+export function elementColor(id) {
+  return ELEMENT_TO_VAR[id] || 'var(--navy)';
+}
+export function elementKo(id) {
+  return ELEMENT_KO[id] || '';
+}
+export function elementCh(id) {
+  return ELEMENT_CH[id] || '';
+}
--- a/src/pages/saju/_shell/helpers/daeunLabel.js
+++ b/src/pages/saju/_shell/helpers/daeunLabel.js
@@ -0,0 +1,10 @@
+export default function daeunLabel(age) {
+  if (age < 10) return '성장기';
+  if (age < 20) return '학습기';
+  if (age < 30) return '도전기';
+  if (age < 40) return '성장기';
+  if (age < 50) return '전성기';
+  if (age < 60) return '안정기';
+  if (age < 70) return '정리기';
+  return '여유기';
+}
--- a/src/pages/saju/_shell/helpers/deriveTraits.js
+++ b/src/pages/saju/_shell/helpers/deriveTraits.js
@@ -0,0 +1,31 @@
+const TRAIT_DEFS = {
+  fire:  { id: 'challenge', ko: '도전정신', icon: 'challenge', color: 'var(--el-fire)' },
+  metal: { id: 'lead',      ko: '리더십',   icon: 'lead',      color: 'var(--el-metal)' },
+  wood:  { id: 'adapt',     ko: '적응력',   icon: 'adapt',     color: 'var(--el-wood)' },
+  water: { id: 'wisdom',    ko: '지혜',     icon: 'wisdom',    color: 'var(--el-water)' },
+  earth: { id: 'wealth',    ko: '풍부함',   icon: 'wealth',    color: 'var(--el-earth)' },
+};
+
+const WILL_TRAIT = { id: 'will', ko: '의지', icon: 'will', color: 'var(--purple)' };
+
+export default function deriveTraits(elements, sipsin = []) {
+  const sorted = Object.entries(elements || {})
+    .filter(([, v]) => typeof v === 'number')
+    .sort((a, b) => b[1] - a[1]);
+
+  const traits = [];
+  for (const [el, score] of sorted) {
+    if (score >= 30 && TRAIT_DEFS[el]) {
+      traits.push(TRAIT_DEFS[el]);
+    }
+  }
+  if (!traits.find((t) => t.id === 'will')) traits.push(WILL_TRAIT);
+
+  for (const [el] of sorted) {
+    if (traits.length >= 6) break;
+    if (TRAIT_DEFS[el] && !traits.find((t) => t.id === TRAIT_DEFS[el].id)) {
+      traits.push(TRAIT_DEFS[el]);
+    }
+  }
+  return traits.slice(0, 6);
+}
--- a/src/pages/saju/_shell/helpers/helpers.test.js
+++ b/src/pages/saju/_shell/helpers/helpers.test.js
@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import hexA from './hexA';
+import daeunLabel from './daeunLabel';
+import deriveTraits from './deriveTraits';
+import { elementColor } from './colorMap';
+
+describe('hexA', () => {
+  it('converts hex with alpha', () => {
+    expect(hexA('#1F2A44', 0.5)).toBe('rgba(31,42,68,0.5)');
+  });
+  it('handles 3-digit hex', () => {
+    expect(hexA('#abc', 1)).toBe('rgba(170,187,204,1)');
+  });
+});
+
+describe('daeunLabel', () => {
+  it('maps age ranges', () => {
+    expect(daeunLabel(5)).toBe('성장기');
+    expect(daeunLabel(15)).toBe('학습기');
+    expect(daeunLabel(25)).toBe('도전기');
+    expect(daeunLabel(35)).toBe('성장기');
+    expect(daeunLabel(45)).toBe('전성기');
+    expect(daeunLabel(55)).toBe('안정기');
+    expect(daeunLabel(65)).toBe('정리기');
+    expect(daeunLabel(75)).toBe('여유기');
+  });
+});
+
+describe('deriveTraits', () => {
+  it('derives strong-element traits (sorted by score)', () => {
+    const traits = deriveTraits({ fire: 55, metal: 40, wood: 35, earth: 15, water: 20 }, []);
+    expect(traits.length).toBeLessThanOrEqual(6);
+    expect(traits[0].id).toBe('challenge');
+    expect(traits.map((t) => t.id)).toContain('lead');
+  });
+  it('always includes will trait', () => {
+    const traits = deriveTraits({ fire: 50, metal: 30, wood: 30, earth: 30, water: 30 }, []);
+    expect(traits.map((t) => t.id)).toContain('will');
+  });
+});
+
+describe('elementColor', () => {
+  it('maps element ids to CSS vars', () => {
+    expect(elementColor('wood')).toBe('var(--el-wood)');
+    expect(elementColor('fire')).toBe('var(--el-fire)');
+    expect(elementColor('unknown')).toBe('var(--navy)');
+  });
+});
--- a/src/pages/saju/_shell/helpers/hexA.js
+++ b/src/pages/saju/_shell/helpers/hexA.js
@@ -0,0 +1,6 @@
+export default function hexA(hex, alpha) {
+  const h = hex.replace('#', '');
+  const expanded = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
+  const n = parseInt(expanded, 16);
+  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${alpha})`;
+}
--- a/src/pages/saju/_shell/shell.css
+++ b/src/pages/saju/_shell/shell.css
@@ -0,0 +1,81 @@
+/* 호령 사주 v2 — 배경 + ornament + animation */
+
+/* paper texture */
+.saju-v2 .paper-bg {
+  background:
+    radial-gradient(ellipse at top, rgba(212, 175, 55, 0.06), transparent 60%),
+    radial-gradient(ellipse at bottom, rgba(106, 76, 124, 0.04), transparent 60%),
+    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-soft) 100%);
+  position: relative;
+}
+.saju-v2 .paper-bg::after {
+  content: '';
+  position: absolute; inset: 0; pointer-events: none;
+  background-image:
+    radial-gradient(circle at 20% 30%, rgba(180, 140, 80, 0.04) 0, transparent 40%),
+    radial-gradient(circle at 80% 70%, rgba(180, 140, 80, 0.04) 0, transparent 40%);
+}
+
+/* night sky */
+.saju-v2 .night-bg {
+  background:
+    radial-gradient(ellipse 80% 50% at 30% 20%, rgba(232, 199, 107, 0.18), transparent 60%),
+    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(106, 76, 124, 0.3), transparent 60%),
+    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, #1A2238 100%);
+  position: relative;
+  color: var(--ivory);
+}
+
+/* mountain wash (desktop hero) */
+.saju-v2 .mt-wash {
+  position: relative;
+  background:
+    radial-gradient(ellipse 70% 50% at 10% 80%, rgba(31, 42, 68, 0.06), transparent 65%),
+    radial-gradient(ellipse 60% 40% at 90% 70%, rgba(31, 42, 68, 0.05), transparent 65%),
+    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(212, 175, 55, 0.04), transparent 70%),
+    linear-gradient(180deg, var(--ivory-soft) 0%, #F4ECDB 100%);
+}
+.saju-v2 .mt-wash::before,
+.saju-v2 .mt-wash::after {
+  content: ''; position: absolute; pointer-events: none;
+  background-repeat: no-repeat; opacity: 0.35; background-size: contain;
+}
+.saju-v2 .mt-wash::before {
+  left: 0; bottom: 0; width: 320px; height: 160px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160' fill='none' stroke='%231F2A44' stroke-width='1' opacity='0.45'><path d='M0 150 L40 90 L80 120 L130 60 L180 110 L220 80 L260 120 L310 70 L320 100 L320 160 L0 160 Z'/><path d='M30 130 L70 100 L110 130 L150 95 L200 120 L240 100 L280 120 L320 110' opacity='0.6'/></svg>");
+}
+.saju-v2 .mt-wash::after {
+  right: 0; bottom: 0; width: 380px; height: 180px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 180' fill='none' stroke='%231F2A44' stroke-width='1' opacity='0.4'><path d='M0 160 L50 100 L100 140 L160 70 L220 130 L280 90 L330 140 L380 110 L380 180 L0 180 Z'/></svg>");
+}
+
+/* screen entry */
+@keyframes saju-screen-in {
+  from { transform: translateY(6px); opacity: 0.8; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+.saju-v2 .screen-in {
+  animation: saju-screen-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* paw bob */
+@keyframes saju-paw-bob {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-2px); }
+}
+.saju-v2 .paw-bob {
+  animation: saju-paw-bob 2.4s ease-in-out infinite;
+  display: inline-block;
+}
+
+/* page container */
+.saju-v2 .page {
+  min-height: 100vh;
+  padding-bottom: var(--bottom-nav-h);
+}
+@media (min-width: 1024px) {
+  .saju-v2 .page {
+    padding-bottom: 0;
+    padding-top: var(--desktop-header-h);
+  }
+}
--- a/src/pages/saju/_shell/tokens.css
+++ b/src/pages/saju/_shell/tokens.css
@@ -0,0 +1,73 @@
+/* 호령 사주 v2 — 디자인 토큰 */
+.saju-v2 {
+  /* Brand palette */
+  --navy: #1F2A44;
+  --navy-deep: #141B30;
+  --navy-soft: #2E3B5A;
+  --ivory: #F7F2E8;
+  --ivory-soft: #FBF7EF;
+  --ivory-warm: #F0E9D9;
+  --gold: #D4AF37;
+  --gold-soft: #E8C76B;
+  --gold-dim: #B89530;
+  --green: #4E6B5C;
+  --green-soft: #6E8B7C;
+  --green-bg: #E6EBE5;
+  --purple: #6A4C7C;
+  --purple-soft: #8B6C9C;
+  --purple-bg: #ECE6F0;
+  --pink: #F2C7CD;
+  --pink-deep: #D89098;
+  --pink-bg: #FBE8EB;
+  --gray: #6B6B6B;
+  --gray-soft: #9A968D;
+  --gray-line: rgba(31, 42, 68, 0.10);
+  --gray-line-strong: rgba(31, 42, 68, 0.18);
+
+  /* Element colors (오행) */
+  --el-wood: #4E6B5C;
+  --el-fire: #C04A4A;
+  --el-earth: #A67B3F;
+  --el-metal: #D4AF37;
+  --el-water: #3A5A8C;
+
+  /* Shadows */
+  --shadow-card: 0 2px 8px rgba(31, 42, 68, 0.04), 0 8px 24px rgba(31, 42, 68, 0.06);
+  --shadow-pop: 0 8px 28px rgba(31, 42, 68, 0.16);
+  --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.35);
+
+  /* Fonts */
+  --font-title: 'Nanum Myeongjo', 'Gowun Batang', serif;
+  --font-body: 'Nanum Gothic', system-ui, -apple-system, sans-serif;
+
+  /* Layout */
+  --content-max-desktop: 1200px;
+  --bottom-nav-h: 72px;
+  --desktop-header-h: 64px;
+
+  color: var(--navy);
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.saju-v2 * { box-sizing: border-box; }
+
+.saju-v2 .font-title {
+  font-family: var(--font-title);
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.saju-v2 button {
+  font-family: inherit;
+  cursor: pointer;
+}
+.saju-v2 button:focus-visible {
+  outline: 2px solid var(--gold);
+  outline-offset: 2px;
+}
+
+/* hide scrollbar utility */
+.saju-v2 .no-scrollbar::-webkit-scrollbar { display: none; }
+.saju-v2 .no-scrollbar { scrollbar-width: none; }
--- a/src/pages/saju/_shell/useViewportMode.js
+++ b/src/pages/saju/_shell/useViewportMode.js
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+export default function useViewportMode() {
+  const [mode, setMode] = useState(() =>
+    typeof window !== 'undefined' && window.innerWidth >= 1024 ? 'desktop' : 'mobile'
+  );
+  useEffect(() => {
+    const onResize = () => {
+      const next = window.innerWidth >= 1024 ? 'desktop' : 'mobile';
+      setMode((prev) => (prev === next ? prev : next));
+    };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  return mode;
+}
--- a/src/pages/saju/_shell/useViewportMode.test.js
+++ b/src/pages/saju/_shell/useViewportMode.test.js
@@ -0,0 +1,32 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, beforeEach } from 'vitest';
+import useViewportMode from './useViewportMode';
+
+describe('useViewportMode', () => {
+  beforeEach(() => {
+    window.innerWidth = 800;
+  });
+
+  it('returns mobile when width < 1024', () => {
+    window.innerWidth = 1023;
+    const { result } = renderHook(() => useViewportMode());
+    expect(result.current).toBe('mobile');
+  });
+
+  it('returns desktop when width >= 1024', () => {
+    window.innerWidth = 1024;
+    const { result } = renderHook(() => useViewportMode());
+    expect(result.current).toBe('desktop');
+  });
+
+  it('updates on resize', () => {
+    window.innerWidth = 800;
+    const { result } = renderHook(() => useViewportMode());
+    expect(result.current).toBe('mobile');
+    act(() => {
+      window.innerWidth = 1200;
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(result.current).toBe('desktop');
+  });
+});
--- a/src/pages/saju/components/ActionCard.jsx
+++ b/src/pages/saju/components/ActionCard.jsx
@@ -1,28 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const ICON = {
-  today: '☀',
-  heart: '♥',
-  book: '📖',
-};
-
-export default function ActionCard({ to, icon, title, desc, variant = 'saju', disabled = false }) {
-  const cls = `saju-action-card saju-action-card--${variant}`;
-  if (disabled) {
-    return (
-      <span className={cls} aria-disabled="true">
-        <span className="saju-action-card__icon">{ICON[icon] || '✦'}</span>
-        <span className="saju-action-card__title">{title}</span>
-        <span className="saju-action-card__desc">{desc || '준비 중'}</span>
-      </span>
-    );
-  }
-  return (
-    <Link to={to} className={cls}>
-      <span className="saju-action-card__icon">{ICON[icon] || '✦'}</span>
-      <span className="saju-action-card__title">{title}</span>
-      <span className="saju-action-card__desc">{desc}</span>
-    </Link>
-  );
-}
--- a/src/pages/saju/components/ElementBarChart.jsx
+++ b/src/pages/saju/components/ElementBarChart.jsx
@@ -1,29 +0,0 @@
-import React from 'react';
-
-const ELEMENT_ORDER = ['木', '火', '土', '金', '水'];
-const ELEMENT_KR = { '木': '목', '火': '화', '土': '토', '金': '금', '水': '수' };
-
-export default function ElementBarChart({ scores }) {
-  if (!scores) return null;
-  const max = Math.max(...Object.values(scores), 1);
-  return (
-    <div className="saju-element-bars">
-      {ELEMENT_ORDER.map((e) => {
-        const value = scores[e] || 0;
-        const widthPct = (value / max) * 100;
-        return (
-          <div key={e} className="saju-element-bar">
-            <div className="saju-element-bar__label">{e} ({ELEMENT_KR[e]})</div>
-            <div className="saju-element-bar__track">
-              <div
-                className={`saju-element-bar__fill saju-element-bar__fill--${e}`}
-                style={{ width: `${widthPct}%` }}
-              />
-            </div>
-            <div className="saju-element-bar__value">{value.toFixed(1)}%</div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
--- a/src/pages/saju/components/FortuneRing.jsx
+++ b/src/pages/saju/components/FortuneRing.jsx
@@ -1,32 +0,0 @@
-import React from 'react';
-
-export default function FortuneRing({ score, max = 100 }) {
-  const radius = 80;
-  const circumference = 2 * Math.PI * radius;
-  const safe = Math.max(0, Math.min(score || 0, max));
-  const dashOffset = circumference - (safe / max) * circumference;
-
-  return (
-    <div className="saju-fortune-ring">
-      <svg viewBox="0 0 200 200">
-        <circle
-          cx="100" cy="100" r={radius}
-          stroke="var(--saju-paper)" strokeWidth="14" fill="none"
-        />
-        <circle
-          cx="100" cy="100" r={radius}
-          stroke="var(--saju-gold)" strokeWidth="14" fill="none"
-          strokeDasharray={circumference}
-          strokeDashoffset={dashOffset}
-          strokeLinecap="round"
-          transform="rotate(-90 100 100)"
-          style={{ transition: 'stroke-dashoffset 0.6s ease' }}
-        />
-      </svg>
-      <div style={{ position: 'absolute', textAlign: 'center' }}>
-        <div className="saju-fortune-ring__score">{safe}</div>
-        <div className="saju-fortune-ring__total">/ {max}</div>
-      </div>
-    </div>
-  );
-}
--- a/src/pages/saju/components/HoryungMascot.jsx
+++ b/src/pages/saju/components/HoryungMascot.jsx
@@ -1,22 +0,0 @@
-import React from 'react';
-
-const POSE_TO_FILE = {
-  front: '/images/saju/horyung/horyung-front.png',
-  bust: '/images/saju/horyung/horyung-bust.png',
-  greeting: '/images/saju/horyung/horyung-greeting.png',
-  thinking: '/images/saju/horyung/horyung-thinking.png',
-  pointing: '/images/saju/horyung/horyung-pointing.png',
-  happy: '/images/saju/horyung/horyung-happy.png',
-};
-
-export default function HoryungMascot({ pose = 'front', size = 'lg', className = '' }) {
-  const src = POSE_TO_FILE[pose] || POSE_TO_FILE.front;
-  return (
-    <img
-      src={src}
-      alt="호령"
-      className={`horyung-mascot horyung-mascot--${size} ${className}`}
-      onError={(e) => { e.target.style.visibility = 'hidden'; }}
-    />
-  );
-}
--- a/src/pages/saju/components/HoryungQuote.jsx
+++ b/src/pages/saju/components/HoryungQuote.jsx
@@ -1,12 +0,0 @@
-import React from 'react';
-import HoryungMascot from './HoryungMascot';
-
-export default function HoryungQuote({ pose = 'thinking', text }) {
-  if (!text) return null;
-  return (
-    <div className="saju-horyung-quote">
-      <HoryungMascot pose={pose} size="sm" />
-      <div className="saju-horyung-quote__text">{text}</div>
-    </div>
-  );
-}
--- a/src/pages/saju/components/InterpretAccordion.jsx
+++ b/src/pages/saju/components/InterpretAccordion.jsx
@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-
-export default function InterpretAccordion({ items }) {
-  const [openKey, setOpenKey] = useState(items?.[0]?.key);
-  if (!items || items.length === 0) return null;
-  return (
-    <div className="saju-interpret-accordion">
-      {items.map((it) => {
-        const isOpen = openKey === it.key;
-        return (
-          <div key={it.key} className="saju-interpret-item">
-            <div
-              className="saju-interpret-item__header"
-              onClick={() => setOpenKey(isOpen ? null : it.key)}
-              role="button"
-              tabIndex={0}
-              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setOpenKey(isOpen ? null : it.key); }}
-            >
-              <span>{it.title || it.key}</span>
-              <span aria-hidden>{isOpen ? '▾' : '▸'}</span>
-            </div>
-            {isOpen && (
-              <div className="saju-interpret-item__body">
-                <p style={{ margin: 0 }}>{it.content}</p>
-                {it.evidence && (
-                  <div className="saju-interpret-item__evidence">
-                    <strong>근거:</strong> {it.evidence.saju_element}<br />
-                    <strong>해석 논리:</strong> {it.evidence.reasoning}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
--- a/src/pages/saju/components/LuckyBox.jsx
+++ b/src/pages/saju/components/LuckyBox.jsx
@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function LuckyBox({ lucky }) {
-  if (!lucky) return null;
-  return (
-    <div className="saju-lucky-box">
-      <div className="saju-lucky-box__item">
-        <div className="saju-lucky-box__label">럭키 컬러</div>
-        <div className="saju-lucky-box__value">{(lucky.color || []).join(' · ')}</div>
-      </div>
-      <div className="saju-lucky-box__item">
-        <div className="saju-lucky-box__label">럭키 숫자</div>
-        <div className="saju-lucky-box__value">{lucky.number}</div>
-      </div>
-      <div className="saju-lucky-box__item">
-        <div className="saju-lucky-box__label">럭키 방향</div>
-        <div className="saju-lucky-box__value">{lucky.direction}</div>
-      </div>
-    </div>
-  );
-}
--- a/src/pages/saju/components/MonthlyFlow.jsx
+++ b/src/pages/saju/components/MonthlyFlow.jsx
@@ -1,26 +0,0 @@
-import React from 'react';
-
-const LABEL_COLOR = {
-  '성장': '#4B7065',
-  '안정': '#D4A574',
-  '변동': '#6A5285',
-  '도전': '#C58F76',
-  '정체': '#888',
-};
-
-export default function MonthlyFlow({ flow }) {
-  if (!flow || flow.length === 0) return null;
-  return (
-    <div className="saju-monthly-flow">
-      {flow.map((m) => (
-        <div key={m.month} className="saju-monthly-flow__cell">
-          <span className="saju-monthly-flow__month">{m.month}월</span>
-          <span className="saju-monthly-flow__score" style={{ color: LABEL_COLOR[m.label] }}>
-            {m.score}
-          </span>
-          <span className="saju-monthly-flow__label">{m.label}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
--- a/src/pages/saju/components/SajuInputForm.jsx
+++ b/src/pages/saju/components/SajuInputForm.jsx
@@ -1,42 +0,0 @@
-import React from 'react';
-
-export default function SajuInputForm({ form, onChange, onSubmit, loading, error }) {
-  return (
-    <form className="saju-form" onSubmit={onSubmit}>
-      <h3 className="saju-h3" style={{ color: 'var(--saju-cream)', marginBottom: '0.5rem' }}>
-        사주풀이 시작하기
-      </h3>
-      <input
-        type="text"
-        placeholder="이름 (선택)"
-        value={form.name}
-        onChange={(e) => onChange('name', e.target.value)}
-        disabled={loading}
-      />
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.5rem' }}>
-        <input type="number" placeholder="년 (1900-2100)" value={form.year}
-               onChange={(e) => onChange('year', e.target.value)} disabled={loading} min="1900" max="2100" />
-        <input type="number" placeholder="월" value={form.month}
-               onChange={(e) => onChange('month', e.target.value)} disabled={loading} min="1" max="12" />
-        <input type="number" placeholder="일" value={form.day}
-               onChange={(e) => onChange('day', e.target.value)} disabled={loading} min="1" max="31" />
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.5rem' }}>
-        <input type="number" placeholder="시 (선택, 0-23)" value={form.hour}
-               onChange={(e) => onChange('hour', e.target.value)} disabled={loading} min="0" max="23" />
-        <select value={form.gender} onChange={(e) => onChange('gender', e.target.value)} disabled={loading}>
-          <option value="male">남</option>
-          <option value="female">여</option>
-        </select>
-        <select value={form.calendar_type} onChange={(e) => onChange('calendar_type', e.target.value)} disabled={loading}>
-          <option value="solar">양력</option>
-          <option value="lunar">음력</option>
-        </select>
-      </div>
-      {error && <div className="saju-form__error">{error}</div>}
-      <button type="submit" disabled={loading}>
-        {loading ? '호령이 풀어보는 중...' : '사주풀이 시작하기 ✦'}
-      </button>
-    </form>
-  );
-}
--- a/src/pages/saju/components/SajuNav.jsx
+++ b/src/pages/saju/components/SajuNav.jsx
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Link, NavLink } from 'react-router-dom';
-
-export default function SajuNav() {
-  return (
-    <nav className="saju-nav" aria-label="호령 사주">
-      <Link to="/saju" className="saju-nav__logo">호령사주</Link>
-      <ul className="saju-nav__links">
-        <li><NavLink to="/saju/today">오늘의 운세</NavLink></li>
-        <li><NavLink to="/saju/compatibility">궁합보기</NavLink></li>
-        <li><NavLink to="/saju/result">사주풀이</NavLink></li>
-      </ul>
-      <Link to="/saju" className="saju-nav__cta">사주풀이 시작하기</Link>
-    </nav>
-  );
-}
--- a/src/pages/saju/components/SajuPillars.jsx
+++ b/src/pages/saju/components/SajuPillars.jsx
@@ -1,38 +0,0 @@
-import React from 'react';
-
-const PILLAR_LABELS = { year: '년주', month: '월주', day: '일주', hour: '시주' };
-
-export default function SajuPillars({ saju }) {
-  if (!saju) return null;
-  const pillars = ['year', 'month', 'day', 'hour'];
-  return (
-    <div className="saju-pillars">
-      {pillars.map((p) => {
-        const data = saju[p];
-        if (!data) {
-          return (
-            <div key={p} className="saju-pillar">
-              <div className="saju-pillar__label">{PILLAR_LABELS[p]}</div>
-              <div style={{ opacity: 0.4 }}>-</div>
-            </div>
-          );
-        }
-        return (
-          <div key={p} className="saju-pillar">
-            <div className="saju-pillar__label">{PILLAR_LABELS[p]}</div>
-            <div>
-              <span className="saju-pillar__stem">{data.stem}</span>
-              <span className="saju-pillar__stem-kr"> ({data.stem_kr})</span>
-            </div>
-            <div>
-              <span className="saju-pillar__branch">{data.branch}</span>
-              <span className="saju-pillar__branch-kr"> ({data.branch_kr})</span>
-            </div>
-            <div className="saju-pillar__ten-god">{data.ten_god}</div>
-            <div className="saju-pillar__fortune">{data.fortune}</div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
--- a/src/pages/saju/components/ScoreCard.jsx
+++ b/src/pages/saju/components/ScoreCard.jsx
@@ -1,38 +0,0 @@
-import React from 'react';
-
-const ICON_BY_CATEGORY = {
-  wealth: '💰',
-  romance: '💖',
-  social: '🤝',
-  career: '💼',
-};
-
-const COLOR_VAR_BY_CATEGORY = {
-  wealth: 'var(--saju-wealth)',
-  romance: 'var(--saju-romance)',
-  social: 'var(--saju-social)',
-  career: 'var(--saju-career)',
-};
-
-const TITLE_BY_CATEGORY = {
-  wealth: '재물운',
-  romance: '연애운',
-  social: '인간관계',
-  career: '직장운',
-};
-
-export default function ScoreCard({ category, score }) {
-  const safe = Math.max(0, Math.min(score || 0, 100));
-  return (
-    <div className="saju-score-card">
-      <div className="saju-score-card__head">
-        <span className="saju-score-card__icon">{ICON_BY_CATEGORY[category]}</span>
-        <span className="saju-score-card__title">{TITLE_BY_CATEGORY[category]}</span>
-      </div>
-      <div className="saju-score-card__value">{safe}<small style={{ fontSize: '1rem', opacity: 0.5 }}>/100</small></div>
-      <div className="saju-score-card__bar">
-        <div style={{ width: `${safe}%`, background: COLOR_VAR_BY_CATEGORY[category] }} />
-      </div>
-    </div>
-  );
-}
--- a/src/pages/saju/views/home.desktop.jsx
+++ b/src/pages/saju/views/home.desktop.jsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import TitleBlock from '../_shell/TitleBlock';
+import Mascot from '../_shell/Mascot';
+import MascotBubble from '../_shell/MascotBubble';
+import OrnateFrame from '../_shell/OrnateFrame';
+import PrimaryButton from '../_shell/PrimaryButton';
+import InputRow from '../_shell/InputRow';
+import { IconSparkle, IconChevron, IconSun, IconHeart, IconYinYang } from '../_shell/Icons';
+import useSajuForm from '../hooks/useSajuForm';
+
+const ACTIONS = [
+  { to: '/saju/today',         icon: IconSun,     label: '오늘의 운세', desc: '오늘 한 줄로 보는 운세', color: '#D4AF37' },
+  { to: '/saju/compatibility', icon: IconHeart,   label: '궁합보기',    desc: '두 사람의 만남 풀이',   color: '#4E6B5C' },
+  { to: '/saju/result',        icon: IconYinYang, label: '사주풀이',    desc: '내 사주 자세히',        color: '#6A4C7C' },
+];
+
+const inputStyle = {
+  flex: 1, padding: '8px 10px', border: '1px solid rgba(31,42,68,0.12)',
+  borderRadius: 8, background: '#FBF7EF', fontSize: 13, color: '#1F2A44',
+  fontFamily: 'inherit',
+};
+
+function pad(n) { return String(n).padStart(2, '0'); }
+function dateValue(form) {
+  if (!form.year || !form.month || !form.day) return '';
+  return `${form.year}-${pad(form.month)}-${pad(form.day)}`;
+}
+function timeValue(form) {
+  if (form.hour === '' || form.hour == null) return '';
+  return `${pad(form.hour)}:00`;
+}
+
+export default function HomeDesktop() {
+  const navigate = useNavigate();
+  const { form, handleChange, handleSubmit, loading, error } = useSajuForm();
+
+  const onDate = (e) => {
+    const v = e.target.value;
+    if (!v) { handleChange('year', ''); handleChange('month', ''); handleChange('day', ''); return; }
+    const [y, m, d] = v.split('-');
+    handleChange('year', y);
+    handleChange('month', String(parseInt(m, 10)));
+    handleChange('day', String(parseInt(d, 10)));
+  };
+  const onTime = (e) => {
+    const v = e.target.value;
+    if (!v) { handleChange('hour', ''); return; }
+    const [h] = v.split(':');
+    handleChange('hour', String(parseInt(h, 10)));
+  };
+
+  return (
+    <main className="page mt-wash screen-in">
+      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 32px' }}>
+        <TitleBlock title="호령이 안내하는 사주"
+          subtitle="오랜 명리학 지혜와 AI 인사이트로 당신만의 길을 비춥니다." />
+        <div style={{
+          marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 480px', gap: 40, alignItems: 'start',
+        }}>
+          <div>
+            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
+              <Mascot variant="full" size={260} />
+              <MascotBubble tone="ivory" align="left"
+                text={'안녕하세요!\n저는 호령이에요.\n사주를 입력해 보실래요?'}
+                style={{ marginBottom: 20 }}
+              />
+            </div>
+            <div style={{ marginTop: 32, display: 'grid', gap: 12 }}>
+              {ACTIONS.map((a) => (
+                <button key={a.to} onClick={() => navigate(a.to)} style={{
+                  display: 'flex', alignItems: 'center', gap: 16,
+                  background: '#FBF7EF', border: `1px solid ${a.color}40`,
+                  borderRadius: 12, padding: '16px 20px', color: '#1F2A44',
+                  fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em', textAlign: 'left',
+                  boxShadow: 'var(--shadow-card)',
+                }}>
+                  <a.icon size={24} stroke={a.color} strokeWidth={1.8} />
+                  <span style={{ flex: 1 }}>
+                    <div style={{ fontSize: 15 }}>{a.label}</div>
+                    <div style={{ fontSize: 12, color: '#6B6B6B', fontWeight: 500, marginTop: 2 }}>{a.desc}</div>
+                  </span>
+                  <IconChevron dir="right" size={16} color="#B89530" />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <OrnateFrame color="#D4AF37" bg="#FBF7EF" double radius={16} padding="24px 22px">
+            <form onSubmit={handleSubmit}>
+              <div className="font-title" style={{
+                fontSize: 18, color: '#1F2A44', marginBottom: 12, textAlign: 'center',
+              }}>사주 입력</div>
+              <InputRow label="이름">
+                <input value={form.name} onChange={(e) => handleChange('name', e.target.value)}
+                  placeholder="홍길동" style={inputStyle} />
+              </InputRow>
+              <InputRow label="생년월일">
+                <input type="date" value={dateValue(form)} onChange={onDate} style={inputStyle} />
+              </InputRow>
+              <InputRow label="시간">
+                <input type="time" value={timeValue(form)} onChange={onTime} style={inputStyle} />
+              </InputRow>
+              <InputRow label="성별">
+                <select value={form.gender} onChange={(e) => handleChange('gender', e.target.value)}
+                  style={inputStyle}>
+                  <option value="male">남</option>
+                  <option value="female">여</option>
+                </select>
+              </InputRow>
+              <InputRow label="달력">
+                <select value={form.calendar_type}
+                  onChange={(e) => handleChange('calendar_type', e.target.value)} style={inputStyle}>
+                  <option value="solar">양력</option>
+                  <option value="lunar">음력</option>
+                </select>
+              </InputRow>
+              {error && (
+                <div style={{ padding: '10px 14px', color: '#C04A4A', fontSize: 12 }}>{error}</div>
+              )}
+              <div style={{ padding: '14px 14px 6px' }}>
+                <PrimaryButton color="#6A4C7C" type="submit">
+                  {loading ? '호령이 풀이 중...' : '내 사주 보기'}
+                  {!loading && <IconSparkle size={12} color="#E8C76B" />}
+                </PrimaryButton>
+              </div>
+            </form>
+          </OrnateFrame>
+        </div>
+      </div>
+    </main>
+  );
+}
--- a/src/pages/saju/views/home.mobile.jsx
+++ b/src/pages/saju/views/home.mobile.jsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import TopRibbon from '../_shell/TopRibbon';
+import TitleBlock from '../_shell/TitleBlock';
+import Mascot from '../_shell/Mascot';
+import MascotBubble from '../_shell/MascotBubble';
+import OrnateFrame from '../_shell/OrnateFrame';
+import PrimaryButton from '../_shell/PrimaryButton';
+import InputRow from '../_shell/InputRow';
+import { IconChevron, IconSparkle, IconSun, IconHeart, IconYinYang } from '../_shell/Icons';
+import useSajuForm from '../hooks/useSajuForm';
+
+const ACTIONS = [
+  { to: '/saju/today',         icon: IconSun,     label: '오늘의 운세', color: '#D4AF37' },
+  { to: '/saju/compatibility', icon: IconHeart,   label: '궁합보기',    color: '#4E6B5C' },
+  { to: '/saju/result',        icon: IconYinYang, label: '사주풀이',    color: '#6A4C7C' },
+];
+
+const inputStyle = {
+  flex: 1, padding: '8px 10px', border: '1px solid rgba(31,42,68,0.12)',
+  borderRadius: 8, background: '#FBF7EF', fontSize: 13, color: '#1F2A44',
+  fontFamily: 'inherit',
+};
+
+function pad(n) { return String(n).padStart(2, '0'); }
+
+function dateValue(form) {
+  if (!form.year || !form.month || !form.day) return '';
+  return `${form.year}-${pad(form.month)}-${pad(form.day)}`;
+}
+
+function timeValue(form) {
+  if (form.hour === '' || form.hour == null) return '';
+  return `${pad(form.hour)}:00`;
+}
+
+export default function HomeMobile() {
+  const navigate = useNavigate();
+  const { form, handleChange, handleSubmit, loading, error } = useSajuForm();
+
+  const onDate = (e) => {
+    const v = e.target.value;
+    if (!v) { handleChange('year', ''); handleChange('month', ''); handleChange('day', ''); return; }
+    const [y, m, d] = v.split('-');
+    handleChange('year', y);
+    handleChange('month', String(parseInt(m, 10)));
+    handleChange('day', String(parseInt(d, 10)));
+  };
+
+  const onTime = (e) => {
+    const v = e.target.value;
+    if (!v) { handleChange('hour', ''); return; }
+    const [h] = v.split(':');
+    handleChange('hour', String(parseInt(h, 10)));
+  };
+
+  return (
+    <main className="page night-bg screen-in" style={{ paddingTop: 24 }}>
+      <TopRibbon color="#D4AF37" opacity={0.7} />
+      <div style={{ padding: '8px 24px 0', textAlign: 'center', color: '#F7F2E8' }}>
+        <TitleBlock color="#F7F2E8" subColor="rgba(247,242,232,0.7)"
+          title="호령이 안내하는 사주"
+          subtitle="오랜 명리학 지혜와 AI 인사이트로 당신만의 길을 비춥니다."
+        />
+      </div>
+      <div style={{ padding: '24px 20px 0', display: 'flex', gap: 12, alignItems: 'flex-end' }}>
+        <MascotBubble tone="navy" align="left"
+          text={'안녕하세요!\n저는 호령이에요.\n사주를 입력해 보실래요?'}
+          style={{ flex: 1, marginBottom: 8 }}
+        />
+        <Mascot variant="full" size={140} style={{ marginRight: -8 }} />
+      </div>
+
+      <div style={{ padding: '24px 20px 0', display: 'grid', gap: 10 }}>
+        {ACTIONS.map((a) => (
+          <button key={a.to} onClick={() => navigate(a.to)} style={{
+            display: 'flex', alignItems: 'center', gap: 12,
+            background: 'rgba(247,242,232,0.06)', border: `1px solid ${a.color}55`,
+            borderRadius: 12, padding: '14px 16px', color: '#F7F2E8',
+            fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em',
+          }}>
+            <a.icon size={20} stroke={a.color} strokeWidth={1.8} />
+            <span style={{ flex: 1, textAlign: 'left' }}>{a.label}</span>
+            <IconChevron dir="right" size={14} color="#E8C76B" />
+          </button>
+        ))}
+      </div>
+
+      <div style={{ padding: '24px 20px 40px' }}>
+        <OrnateFrame color="#D4AF37" bg="#FBF7EF" double radius={16}>
+          <form onSubmit={handleSubmit}>
+            <div className="font-title" style={{
+              fontSize: 16, color: '#1F2A44', marginBottom: 8, textAlign: 'center',
+            }}>사주 입력</div>
+            <InputRow label="이름">
+              <input value={form.name} onChange={(e) => handleChange('name', e.target.value)}
+                placeholder="홍길동" style={inputStyle} />
+            </InputRow>
+            <InputRow label="생년월일">
+              <input type="date" value={dateValue(form)} onChange={onDate} style={inputStyle} />
+            </InputRow>
+            <InputRow label="시간">
+              <input type="time" value={timeValue(form)} onChange={onTime} style={inputStyle} />
+            </InputRow>
+            <InputRow label="성별">
+              <select value={form.gender} onChange={(e) => handleChange('gender', e.target.value)}
+                style={inputStyle}>
+                <option value="male">남</option>
+                <option value="female">여</option>
+              </select>
+            </InputRow>
+            <InputRow label="달력">
+              <select value={form.calendar_type}
+                onChange={(e) => handleChange('calendar_type', e.target.value)} style={inputStyle}>
+                <option value="solar">양력</option>
+                <option value="lunar">음력</option>
+              </select>
+            </InputRow>
+            {error && (
+              <div style={{ padding: '10px 14px', color: '#C04A4A', fontSize: 12 }}>{error}</div>
+            )}
+            <div style={{ padding: '14px 14px 6px' }}>
+              <PrimaryButton color="#6A4C7C" type="submit">
+                {loading ? '호령이 풀이 중...' : '내 사주 보기'}
+                {!loading && <IconSparkle size={12} color="#E8C76B" />}
+              </PrimaryButton>
+            </div>
+          </form>
+        </OrnateFrame>
+      </div>
+    </main>
+  );
+}
--- a/src/pages/saju/views/match.desktop.jsx
+++ b/src/pages/saju/views/match.desktop.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import MatchMobile from './match.mobile.jsx';
+
+export default function MatchDesktop(props) {
+  return (
+    <div style={{ maxWidth: 900, margin: '0 auto' }}>
+      <MatchMobile {...props} />
+    </div>
+  );
+}
--- a/src/pages/saju/views/match.mobile.jsx
+++ b/src/pages/saju/views/match.mobile.jsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import TopRibbon from '../_shell/TopRibbon';
+import TitleBlock from '../_shell/TitleBlock';
+import Mascot from '../_shell/Mascot';
+import MascotBubble from '../_shell/MascotBubble';
+import OrnateFrame from '../_shell/OrnateFrame';
+import PrimaryButton from '../_shell/PrimaryButton';
+import InputRow from '../_shell/InputRow';
+import { IconHeart, IconSparkle } from '../_shell/Icons';
+
+const inputStyle = {
+  flex: 1, padding: '8px 10px', border: '1px solid rgba(31,42,68,0.12)',
+  borderRadius: 8, background: '#FBF7EF', fontSize: 13, color: '#1F2A44',
+  fontFamily: 'inherit',
+};
+
+function pad(n) { return String(n).padStart(2, '0'); }
+function dateValue(p) {
+  if (!p.year || !p.month || !p.day) return '';
+  return `${p.year}-${pad(p.month)}-${pad(p.day)}`;
+}
+function timeValue(p) {
+  if (p.hour === '' || p.hour == null) return '';
+  return `${pad(p.hour)}:00`;
+}
+function onDate(p, set, e) {
+  const v = e.target.value;
+  if (!v) return set({ ...p, year: '', month: '', day: '' });
+  const [y, m, d] = v.split('-');
+  set({ ...p, year: parseInt(y, 10), month: parseInt(m, 10), day: parseInt(d, 10) });
+}
+function onTime(p, set, e) {
+  const v = e.target.value;
+  if (!v) return set({ ...p, hour: null });
+  const [h] = v.split(':');
+  set({ ...p, hour: parseInt(h, 10) });
+}
+
+function PersonForm({ label, person, onChange }) {
+  return (
+    <OrnateFrame color="#4E6B5C" bg="#FBF7EF" radius={14} padding="14px 16px">
+      <div className="font-title" style={{
+        fontSize: 14, color: '#4E6B5C', textAlign: 'center', marginBottom: 8,
+      }}>{label}</div>
+      <InputRow label="이름">
+        <input value={person.name || ''}
+          onChange={(e) => onChange({ ...person, name: e.target.value })}
+          placeholder="홍길동" style={inputStyle} />
+      </InputRow>
+      <InputRow label="생년월일">
+        <input type="date" value={dateValue(person)}
+          onChange={(e) => onDate(person, onChange, e)} style={inputStyle} />
+      </InputRow>
+      <InputRow label="시간">
+        <input type="time" value={timeValue(person)}
+          onChange={(e) => onTime(person, onChange, e)} style={inputStyle} />
+      </InputRow>
+      <InputRow label="성별">
+        <select value={person.gender}
+          onChange={(e) => onChange({ ...person, gender: e.target.value })}
+          style={inputStyle}>
+          <option value="male">남</option>
+          <option value="female">여</option>
+        </select>
+      </InputRow>
+      <InputRow label="달력">
+        <select value={person.calendar_type}
+          onChange={(e) => onChange({ ...person, calendar_type: e.target.value })}
+          style={inputStyle}>
+          <option value="solar">양력</option>
+          <option value="lunar">음력</option>
+        </select>
+      </InputRow>
+    </OrnateFrame>
+  );
+}
+
+export default function MatchMobile({ personA, personB, onChangeA, onChangeB, onSubmit, loading, error }) {
+  return (
+    <main className="page paper-bg screen-in">
+      <TopRibbon color="#4E6B5C" opacity={0.6} />
+      <div style={{ padding: '8px 24px 0', textAlign: 'center' }}>
+        <TitleBlock title="궁합 보기" gold="#4E6B5C"
+          subtitle="두 사람의 사주를 입력하면 만남의 흐름을 알려드려요." />
+      </div>
+      <div style={{ padding: '14px 20px 0', display: 'flex', gap: 8, alignItems: 'flex-end' }}>
+        <MascotBubble tone="green"
+          text={'두 사주를 비교해\n어울리는 결을\n읽어드릴게요.'}
+          style={{ flex: 1, marginBottom: 8 }} />
+        <Mascot variant="upper" size={120} style={{ marginRight: -8 }} />
+      </div>
+      <form onSubmit={onSubmit} style={{ padding: '24px 20px 40px', display: 'grid', gap: 14 }}>
+        <PersonForm label="사람 A" person={personA} onChange={onChangeA} />
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <IconHeart size={28} stroke="#4E6B5C" strokeWidth={2} />
+        </div>
+        <PersonForm label="사람 B" person={personB} onChange={onChangeB} />
+        {error && (
+          <div style={{ color: '#C04A4A', fontSize: 12, textAlign: 'center' }}>{error}</div>
+        )}
+        <PrimaryButton color="#4E6B5C" type="submit">
+          {loading ? '호령이 두 사주를 비교 중...' : '궁합 보기'}
+          {!loading && <IconSparkle size={12} color="#E8C76B" />}
+        </PrimaryButton>
+      </form>
+    </main>
+  );
+}
--- a/src/pages/saju/views/saju.desktop.jsx
+++ b/src/pages/saju/views/saju.desktop.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import SajuMobile from './saju.mobile.jsx';
+
+export default function SajuDesktop({ reading }) {
+  return (
+    <div style={{ maxWidth: 900, margin: '0 auto' }}>
+      <SajuMobile reading={reading} />
+    </div>
+  );
+}
--- a/src/pages/saju/views/saju.mobile.jsx
+++ b/src/pages/saju/views/saju.mobile.jsx
@@ -0,0 +1,424 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import TopRibbon from '../_shell/TopRibbon';
+import TitleBlock from '../_shell/TitleBlock';
+import Mascot from '../_shell/Mascot';
+import MascotBubble from '../_shell/MascotBubble';
+import OrnateFrame from '../_shell/OrnateFrame';
+import OrnamentBloom from '../_shell/OrnamentBloom';
+import PrimaryButton from '../_shell/PrimaryButton';
+import { IconChevron, IconSparkle } from '../_shell/Icons';
+import deriveTraits from '../_shell/helpers/deriveTraits';
+import daeunLabel from '../_shell/helpers/daeunLabel';
+import hexA from '../_shell/helpers/hexA';
+
+// 한자 element key → english id (deriveTraits 입력 표준화)
+const HANJA_TO_ID = { '木': 'wood', '火': 'fire', '土': 'earth', '金': 'metal', '水': 'water' };
+const ID_TO_KO = { wood: '목', fire: '화', earth: '토', metal: '금', water: '수' };
+const ID_TO_CH = { wood: '木', fire: '火', earth: '土', metal: '金', water: '水' };
+const ID_TO_COLOR = {
+  wood: '#4E6B5C', fire: '#C04A4A', earth: '#A67B3F',
+  metal: '#D4AF37', water: '#3A5A8C',
+};
+
+function elementsByEngId(scores) {
+  if (!scores) return {};
+  const out = {};
+  for (const [hanja, val] of Object.entries(scores)) {
+    const id = HANJA_TO_ID[hanja];
+    if (id) out[id] = val;
+  }
+  return out;
+}
+
+function pillarStemColor(saju, pillarKey) {
+  const stem = saju?.[pillarKey]?.stem;
+  // 천간 → 오행 매핑 (간략 — 핵심 색만)
+  const STEM_EL = { '甲':'wood','乙':'wood','丙':'fire','丁':'fire','戊':'earth','己':'earth','庚':'metal','辛':'metal','壬':'water','癸':'water' };
+  return ID_TO_COLOR[STEM_EL[stem]] || '#1F2A44';
+}
+
+function pillarBranchColor(saju, pillarKey) {
+  const branch = saju?.[pillarKey]?.branch;
+  const BRANCH_EL = { '子':'water','丑':'earth','寅':'wood','卯':'wood','辰':'earth','巳':'fire','午':'fire','未':'earth','申':'metal','酉':'metal','戌':'earth','亥':'water' };
+  return ID_TO_COLOR[BRANCH_EL[branch]] || '#1F2A44';
+}
+
+const TABS = [
+  ['basic',  '기본정보'],
+  ['chart',  '사주명식'],
+  ['flow',   '운세흐름'],
+  ['traits', '성향분석'],
+];
+
+export default function SajuMobile({ reading }) {
+  const [tab, setTab] = useState('basic');
+  const navigate = useNavigate();
+  const elementsObj = elementsByEngId(reading?.analysis_data?.element_scores);
+  const traits = deriveTraits(elementsObj, []);
+
+  return (
+    <main className="page paper-bg screen-in">
+      <TopRibbon color="#6A4C7C" opacity={0.6} />
+      <div style={{ padding: '8px 24px 0', textAlign: 'center' }}>
+        <TitleBlock gold="#6A4C7C" title="사주풀이"
+          subtitle="당신의 사주를 자세히 풀이해드립니다." />
+      </div>
+      <div style={{ padding: '14px 20px 0', display: 'flex', gap: 8, alignItems: 'flex-end' }}>
+        <MascotBubble tone="purple"
+          text={'당신이 가진 타고난\n기운과 운명의 흐름을\n알려드릴게요.'}
+          style={{ flex: 1, marginBottom: 8 }} />
+        <Mascot variant="full" size={130} style={{ marginRight: -8 }} />
+      </div>
+
+      <div style={{ padding: '14px 16px 0' }}>
+        <div className="no-scrollbar" style={{
+          display: 'flex', gap: 6, overflowX: 'auto',
+          background: 'rgba(247,242,232,0.7)', borderRadius: 999,
+          padding: 4, border: '1px solid rgba(31,42,68,0.08)',
+        }}>
+          {TABS.map(([id, label]) => {
+            const active = tab === id;
+            return (
+              <button key={id} onClick={() => setTab(id)} style={{
+                flex: 1, padding: '10px 8px', borderRadius: 999, border: 'none',
+                background: active ? '#1F2A44' : 'transparent',
+                color: active ? '#F7F2E8' : '#6B6B6B',
+                fontSize: 12, fontWeight: 700, letterSpacing: '-0.02em', whiteSpace: 'nowrap',
+                boxShadow: active ? '0 2px 8px rgba(31,42,68,0.25), inset 0 1px 0 rgba(212,175,55,0.3)' : 'none',
+                transition: 'all .2s',
+              }}>{label}</button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div style={{ padding: '14px 20px 0' }}>
+        {tab === 'basic'  && <BasicTab reading={reading} traits={traits} onResult={() => setTab('chart')} />}
+        {tab === 'chart'  && <ChartTab reading={reading} elementsObj={elementsObj} />}
+        {tab === 'flow'   && <FlowTab reading={reading} />}
+        {tab === 'traits' && <TraitsTab traits={traits} onToday={() => navigate(`/saju/today?rid=${reading?.id || ''}`)} />}
+      </div>
+    </main>
+  );
+}
+
+function BasicTab({ reading, traits, onResult }) {
+  const r = reading || {};
+  const rows = [
+    ['생년월일', `${r.birth_year}년 ${r.birth_month}월 ${r.birth_day}일 (${r.calendar_type === 'lunar' ? '음력' : '양력'})`],
+    ['시간',     r.birth_hour != null ? `${r.birth_hour}시` : '시간 미상'],
+    ['성별',     r.gender === 'female' ? '여' : '남'],
+    ['사주',     [r.saju_data?.year, r.saju_data?.month, r.saju_data?.day, r.saju_data?.hour].filter(Boolean).map((p) => `${p.stem}${p.branch}`).join(' ') || '-'],
+  ];
+  const summary = reading?.interpretation_json?.summary || '풀이 결과를 준비 중입니다.';
+  return (
+    <div>
+      <div style={{
+        background: '#FBF7EF', borderRadius: 14,
+        border: '1px solid rgba(31,42,68,0.10)',
+        boxShadow: 'var(--shadow-card)', overflow: 'hidden',
+      }}>
+        {rows.map(([label, value], idx) => (
+          <div key={label} style={{
+            display: 'flex', alignItems: 'center', padding: '13px 16px',
+            borderBottom: idx === rows.length - 1 ? 'none' : '1px solid rgba(31,42,68,0.06)',
+          }}>
+            <div style={{ width: 80, fontSize: 12, color: '#6B6B6B', fontWeight: 700 }}>{label}</div>
+            <div style={{ flex: 1, fontSize: 13, color: '#1F2A44' }}>{value || '-'}</div>
+          </div>
+        ))}
+      </div>
+
+      <OrnateFrame color="#6A4C7C" bg="#FBF7EF" radius={14} padding="20px 18px 16px" style={{ marginTop: 14 }}>
+        <div className="font-title" style={{
+          fontSize: 13, color: '#6A4C7C', textAlign: 'center', marginBottom: 6,
+        }}>사주 요약</div>
+        <div style={{
+          fontSize: 13, color: '#1F2A44', lineHeight: 1.75, textAlign: 'center', whiteSpace: 'pre-line',
+        }}>{summary}</div>
+      </OrnateFrame>
+
+      <div style={{
+        marginTop: 14, background: '#FBF7EF', borderRadius: 14,
+        border: '1px solid rgba(31,42,68,0.10)', padding: '16px 12px',
+        boxShadow: 'var(--shadow-card)',
+      }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6 }}>
+          {traits.slice(0, 5).map((t) => (<TraitChip key={t.id} {...t} />))}
+        </div>
+      </div>
+
+      <div style={{ marginTop: 14 }}>
+        <PrimaryButton color="#6A4C7C" onClick={onResult}>
+          상세 풀이 보러가기
+          <IconChevron dir="right" size={14} color="#E8C76B" />
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+}
+
+function TraitChip({ ko, color }) {
+  // color는 'var(--el-fire)' 같은 CSS var. swatch에 직접 사용.
+  return (
+    <div style={{
+      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '10px 4px 8px',
+    }}>
+      <div style={{
+        width: 42, height: 42, borderRadius: '50%',
+        background: 'rgba(106,76,124,0.06)',
+        border: `1px solid ${color}`,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        color, fontSize: 18, fontWeight: 800,
+      }}>●</div>
+      <span style={{ fontSize: 11, color: '#1F2A44', fontWeight: 700, letterSpacing: '-0.02em' }}>{ko}</span>
+    </div>
+  );
+}
+
+function ChartTab({ reading, elementsObj }) {
+  const saju = reading?.saju_data || {};
+  const ohaengArr = ['wood', 'fire', 'earth', 'metal', 'water'].map((id) => ({
+    id, ko: ID_TO_KO[id], ch: ID_TO_CH[id],
+    value: Math.round(elementsObj?.[id] || 0),
+    color: ID_TO_COLOR[id],
+  }));
+  const strongest = ohaengArr.reduce((a, b) => (a.value > b.value ? a : b), { value: 0 });
+  const dms = reading?.analysis_data?.day_master_strength;
+  return (
+    <div>
+      <div style={{
+        background: '#FBF7EF', borderRadius: 14,
+        border: '1px solid rgba(31,42,68,0.10)', boxShadow: 'var(--shadow-card)',
+        padding: '14px 12px 12px',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10, padding: '0 6px' }}>
+          <OrnamentBloom size={14} color="#6A4C7C" />
+          <span style={{ fontSize: 13, fontWeight: 700, color: '#1F2A44' }}>사주 명식</span>
+          <span style={{ fontSize: 10, color: '#9A968D', marginLeft: 'auto' }}>일간 중심 해석</span>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
+          {['year', 'month', 'day', 'hour'].map((pk) => (
+            <PillarColumn key={pk} pillarKey={pk}
+              pillar={saju[pk]}
+              stemColor={pillarStemColor(saju, pk)}
+              branchColor={pillarBranchColor(saju, pk)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div style={{
+        marginTop: 14, background: '#FBF7EF', borderRadius: 14,
+        border: '1px solid rgba(31,42,68,0.10)', boxShadow: 'var(--shadow-card)',
+        padding: '16px 16px 14px',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
+          <OrnamentBloom size={14} color="#6A4C7C" />
+          <span style={{ fontSize: 13, fontWeight: 700, color: '#1F2A44' }}>오행 분석</span>
+        </div>
+        <div style={{
+          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
+          height: 110, gap: 4,
+        }}>
+          {ohaengArr.map((o) => (<OhaengBar key={o.id} {...o} />))}
+        </div>
+        {strongest.value > 0 && (
+          <div style={{
+            marginTop: 12, padding: '10px 12px',
+            background: hexA('#C04A4A', 0.06), borderRadius: 8,
+            border: `1px solid ${hexA(strongest.color, 0.25)}`,
+          }}>
+            <div style={{ fontSize: 12, fontWeight: 700, color: strongest.color, marginBottom: 4 }}>
+              {strongest.ko}({strongest.ch})의 기운이 강한 사주입니다.
+            </div>
+          </div>
+        )}
+        {dms && (
+          <div style={{
+            marginTop: 10, padding: '10px 12px',
+            background: 'rgba(106,76,124,0.06)', borderRadius: 8,
+            border: '1px dashed rgba(106,76,124,0.25)',
+          }}>
+            <div style={{ fontSize: 12, fontWeight: 700, color: '#6A4C7C', marginBottom: 4 }}>
+              일간 강도: {dms.result} · {dms.score}점
+            </div>
+            {dms.reasons && dms.reasons.length > 0 && (
+              <div style={{ fontSize: 11, color: '#6B6B6B', lineHeight: 1.55 }}>
+                {dms.reasons.join(' · ')}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const PILLAR_LABELS = { year: '년주', month: '월주', day: '일주', hour: '시주' };
+
+function PillarColumn({ pillarKey, pillar, stemColor, branchColor }) {
+  const isDay = pillarKey === 'day';
+  if (!pillar) {
+    return (
+      <div style={{ padding: '8px 4px 10px', textAlign: 'center', color: '#9A968D', fontSize: 11 }}>
+        {PILLAR_LABELS[pillarKey]}<br />-
+      </div>
+    );
+  }
+  return (
+    <div style={{
+      borderRadius: 10, padding: '8px 4px 10px',
+      background: isDay ? '#FBF7EF' : 'transparent',
+      border: isDay ? '1.5px solid #6A4C7C' : '1px solid rgba(31,42,68,0.06)',
+      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, position: 'relative',
+    }}>
+      {isDay && (
+        <div style={{
+          position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)',
+          background: '#6A4C7C', color: '#F7F2E8',
+          fontSize: 10, fontWeight: 700, padding: '2px 10px', borderRadius: 99,
+        }}>일간</div>
+      )}
+      <div style={{ fontSize: 10, color: '#6B6B6B', fontWeight: 700, marginTop: 2 }}>{PILLAR_LABELS[pillarKey]}</div>
+      <CharBox char={pillar.stem}   sub={pillar.stem_kr}   color={stemColor} />
+      <CharBox char={pillar.branch} sub={pillar.branch_kr} color={branchColor} />
+      <div style={{ width: '100%', height: 1, background: 'rgba(31,42,68,0.08)' }} />
+      <div style={{ fontSize: 10, color: '#6B6B6B' }}>{pillar.ten_god || '-'}</div>
+      <div style={{ fontSize: 10, color: '#9A968D' }}>{pillar.fortune || ''}</div>
+    </div>
+  );
+}
+
+function CharBox({ char, sub, color }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
+      <div className="font-title" style={{ fontSize: 24, color, lineHeight: 1, fontWeight: 800 }}>{char || '?'}</div>
+      <div style={{ fontSize: 8.5, color, opacity: 0.85, fontWeight: 700 }}>{sub || ''}</div>
+    </div>
+  );
+}
+
+function OhaengBar({ ko, ch, value, color }) {
+  return (
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
+      <div style={{ flex: 1, width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
+        <div style={{ fontSize: 10, color, fontWeight: 700, textAlign: 'center', marginBottom: 2 }}>{value}%</div>
+        <div style={{
+          width: '70%', margin: '0 auto', height: `${value}%`, minHeight: 4,
+          background: color, borderRadius: '6px 6px 2px 2px',
+          boxShadow: `0 -2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.3)`,
+        }} />
+      </div>
+      <div style={{ marginTop: 6, fontSize: 11, color: '#1F2A44', fontWeight: 700 }}>
+        {ko}<span style={{ fontSize: 9, color: '#9A968D', marginLeft: 2 }}>({ch})</span>
+      </div>
+    </div>
+  );
+}
+
+function FlowTab({ reading }) {
+  const daeun = reading?.daeun_data || [];
+  const currentYear = new Date().getFullYear();
+  const enriched = daeun.map((d) => ({
+    ...d,
+    label: daeunLabel(d.age),
+    current: d.start_year <= currentYear && currentYear <= d.end_year,
+  }));
+  const current = enriched.find((x) => x.current);
+  return (
+    <div>
+      <div style={{
+        background: '#FBF7EF', borderRadius: 14,
+        border: '1px solid rgba(31,42,68,0.10)', boxShadow: 'var(--shadow-card)',
+        padding: '16px 14px',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+          <OrnamentBloom size={14} color="#6A4C7C" />
+          <span style={{ fontSize: 13, fontWeight: 700, color: '#1F2A44' }}>대운 흐름</span>
+          <span style={{ marginLeft: 'auto', fontSize: 10, color: '#9A968D' }}>10년 단위</span>
+        </div>
+        <div style={{ fontSize: 11, color: '#6B6B6B', marginBottom: 12 }}>
+          10년 주기로 변화하는 운의 흐름을 확인하세요.
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
+          {enriched.map((du, i) => (<DaeunNode key={i} {...du} />))}
+        </div>
+      </div>
+      {current && (
+        <div style={{
+          marginTop: 14, background: '#1F2A44', borderRadius: 14,
+          border: '1px solid rgba(212,175,55,0.4)',
+          padding: '16px 16px 18px', color: '#F7F2E8',
+          boxShadow: '0 8px 24px rgba(31,42,68,0.2)', position: 'relative',
+        }}>
+          <div style={{
+            position: 'absolute', top: -10, left: 16,
+            background: '#6A4C7C', color: '#F7F2E8',
+            fontSize: 10, fontWeight: 700, padding: '3px 10px',
+            borderRadius: 99, border: '1px solid rgba(212,175,55,0.5)',
+          }}>현재 대운 · {current.age}~{current.age + 9}세</div>
+          <div className="font-title" style={{ marginTop: 8, fontSize: 18, color: '#E8C76B' }}>
+            {current.stem}{current.branch} · {current.label}
+          </div>
+          <div style={{ marginTop: 10, fontSize: 12.5, color: '#D9D2C0', lineHeight: 1.7 }}>
+            {current.start_year}년 ~ {current.end_year}년 — 이 시기는 {current.label} 단계로,
+            10년 간의 운기 흐름을 차분히 살펴보세요.
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DaeunNode({ age, stem, label, current }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, position: 'relative' }}>
+      {current && (
+        <div style={{
+          position: 'absolute', top: -6, left: '50%', transform: 'translateX(-50%)',
+          fontSize: 8, fontWeight: 700, color: '#F7F2E8', background: '#6A4C7C',
+          padding: '1px 6px', borderRadius: 99, zIndex: 1,
+        }}>현재</div>
+      )}
+      <div style={{ fontSize: 9.5, color: '#9A968D', marginTop: current ? 8 : 0, fontWeight: 700 }}>{age}세</div>
+      <div style={{
+        width: 42, height: 50, borderRadius: '50% 50% 40% 40%',
+        background: current ? '#6A4C7C' : '#FBF7EF',
+        border: current ? '1.5px solid #D4AF37' : '1px solid rgba(31,42,68,0.12)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        boxShadow: current ? '0 4px 12px rgba(106,76,124,0.4)' : 'none',
+      }}>
+        <span className="font-title" style={{ fontSize: 20, color: current ? '#E8C76B' : '#1F2A44' }}>{stem}</span>
+      </div>
+      <div style={{ fontSize: 10, color: current ? '#6A4C7C' : '#6B6B6B', fontWeight: current ? 700 : 500 }}>{label}</div>
+    </div>
+  );
+}
+
+function TraitsTab({ traits, onToday }) {
+  return (
+    <div>
+      <div style={{
+        background: '#FBF7EF', borderRadius: 14,
+        border: '1px solid rgba(31,42,68,0.10)', boxShadow: 'var(--shadow-card)',
+        padding: '16px 12px',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12, padding: '0 6px' }}>
+          <OrnamentBloom size={14} color="#6A4C7C" />
+          <span style={{ fontSize: 13, fontWeight: 700, color: '#1F2A44' }}>타고난 성향</span>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
+          {traits.map((t) => (<TraitChip key={t.id} {...t} />))}
+        </div>
+      </div>
+      <div style={{ marginTop: 14 }}>
+        <PrimaryButton color="#6A4C7C" onClick={onToday}>
+          오늘의 운세 확인하기
+          <IconSparkle size={12} color="#E8C76B" />
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/saju/views/today.desktop.jsx
+++ b/src/pages/saju/views/today.desktop.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import TodayMobile from './today.mobile.jsx';
+
+export default function TodayDesktop({ reading }) {
+  return (
+    <div style={{ maxWidth: 720, margin: '0 auto' }}>
+      <TodayMobile reading={reading} />
+    </div>
+  );
+}
--- a/src/pages/saju/views/today.mobile.jsx
+++ b/src/pages/saju/views/today.mobile.jsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import TopRibbon from '../_shell/TopRibbon';
+import TitleBlock from '../_shell/TitleBlock';
+import Mascot from '../_shell/Mascot';
+import MascotBubble from '../_shell/MascotBubble';
+import OrnateFrame from '../_shell/OrnateFrame';
+import OrnamentBloom from '../_shell/OrnamentBloom';
+import PrimaryButton from '../_shell/PrimaryButton';
+import { IconChevron } from '../_shell/Icons';
+
+const SCORE_LABELS = {
+  wealth:  { ko: '재물운',   icon: '財' },
+  romance: { ko: '연애운',   icon: '愛' },
+  social:  { ko: '인간관계', icon: '人' },
+  career:  { ko: '직장운',   icon: '職' },
+};
+
+export default function TodayMobile({ reading }) {
+  const navigate = useNavigate();
+  const scores = reading?.fortune_scores || {};
+  const lucky = reading?.lucky || {};
+  const signs = lucky.good_signs || [];
+  const warnings = lucky.warnings || [];
+  const overall = Math.round(scores.overall || 0);
+  const todayStr = new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
+
+  return (
+    <main className="page paper-bg screen-in">
+      <TopRibbon color="#D4AF37" opacity={0.7} />
+      <div style={{ padding: '8px 24px 0', textAlign: 'center' }}>
+        <TitleBlock title="오늘의 운세" gold="#D4AF37" subtitle={todayStr} />
+      </div>
+      <div style={{ padding: '14px 20px 0', display: 'flex', gap: 8, alignItems: 'flex-end' }}>
+        <MascotBubble tone="ivory"
+          text={'오늘 하루도\n좋은 흐름이 있어요.'}
+          style={{ flex: 1, marginBottom: 8 }} />
+        <Mascot variant="happy" size={130} style={{ marginRight: -8 }} />
+      </div>
+
+      <div style={{ padding: '20px', display: 'flex', justifyContent: 'center' }}>
+        <FortuneRing value={overall} />
+      </div>
+
+      <div style={{ padding: '0 20px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
+        {Object.entries(SCORE_LABELS).map(([key, { ko, icon }]) => (
+          <ScoreCard key={key} ko={ko} icon={icon} value={Math.round(scores[key] || 0)} />
+        ))}
+      </div>
+
+      <div style={{ padding: '20px' }}>
+        <OrnateFrame color="#D4AF37" bg="#FBF7EF" radius={14} padding="16px 18px" double>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
+            <OrnamentBloom size={14} color="#D4AF37" />
+            <span style={{ fontSize: 13, fontWeight: 700, color: '#1F2A44' }}>오늘의 럭키</span>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
+            <LuckyItem label="색" value={Array.isArray(lucky.color) ? lucky.color.join(', ') : lucky.color} />
+            <LuckyItem label="숫자" value={lucky.number} />
+            <LuckyItem label="방향" value={lucky.direction} />
+          </div>
+        </OrnateFrame>
+      </div>
+
+      {(signs.length > 0 || warnings.length > 0) && (
+        <div style={{ padding: '0 20px 20px', display: 'grid', gap: 12 }}>
+          {signs.length > 0 && <SignList title="좋은 징조" items={signs} color="#4E6B5C" />}
+          {warnings.length > 0 && <SignList title="주의할 점" items={warnings} color="#C04A4A" />}
+        </div>
+      )}
+
+      <div style={{ padding: '0 20px 40px' }}>
+        <PrimaryButton color="#D4AF37" onClick={() => navigate(`/saju/result?rid=${reading?.id || ''}`)}>
+          내 사주 자세히 보기 <IconChevron dir="right" size={14} color="#1F2A44" />
+        </PrimaryButton>
+      </div>
+    </main>
+  );
+}
+
+function FortuneRing({ value }) {
+  const R = 60;
+  const C = 2 * Math.PI * R;
+  const offset = C - (C * value) / 100;
+  return (
+    <svg width="160" height="160" viewBox="0 0 160 160">
+      <circle cx="80" cy="80" r={R} stroke="#F0E9D9" strokeWidth="14" fill="none" />
+      <circle cx="80" cy="80" r={R} stroke="#D4AF37" strokeWidth="14" fill="none"
+        strokeDasharray={C} strokeDashoffset={offset} strokeLinecap="round"
+        transform="rotate(-90 80 80)" />
+      <text x="80" y="86" textAnchor="middle" className="font-title"
+        style={{ fontSize: 32, fill: '#1F2A44', fontWeight: 800 }}>
+        {value}<tspan style={{ fontSize: 14, fill: '#9A968D' }}>점</tspan>
+      </text>
+    </svg>
+  );
+}
+
+function ScoreCard({ ko, icon, value }) {
+  return (
+    <div style={{
+      background: '#FBF7EF', borderRadius: 12,
+      border: '1px solid rgba(31,42,68,0.10)', boxShadow: 'var(--shadow-card)',
+      padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10,
+    }}>
+      <div style={{
+        width: 36, height: 36, borderRadius: '50%',
+        background: 'rgba(212,175,55,0.12)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        fontSize: 14, fontWeight: 800, color: '#B89530',
+      }}>{icon}</div>
+      <div style={{ flex: 1 }}>
+        <div style={{ fontSize: 11, color: '#6B6B6B', fontWeight: 700 }}>{ko}</div>
+        <div className="font-title" style={{ fontSize: 20, color: '#1F2A44' }}>
+          {value}<span style={{ fontSize: 12, color: '#9A968D', fontWeight: 500 }}>점</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LuckyItem({ label, value }) {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ fontSize: 11, color: '#6B6B6B', fontWeight: 700 }}>{label}</div>
+      <div className="font-title" style={{ fontSize: 18, color: '#D4AF37', marginTop: 4 }}>{value || '-'}</div>
+    </div>
+  );
+}
+
+function SignList({ title, items, color }) {
+  return (
+    <div style={{
+      background: '#FBF7EF', borderRadius: 12,
+      border: `1px solid ${color}40`, padding: '14px 16px',
+    }}>
+      <div style={{ fontSize: 12, fontWeight: 700, color, marginBottom: 8 }}>{title}</div>
+      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 6 }}>
+        {items.map((s, i) => (
+          <li key={i} style={{ fontSize: 12.5, color: '#1F2A44', lineHeight: 1.6 }}>• {s}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -40,6 +40,7 @@ const SajuResult = lazy(() => import('./pages/saju/SajuResult'));
 const SajuToday = lazy(() => import('./pages/saju/Today'));
 const Compatibility = lazy(() => import('./pages/saju/Compatibility'));
 const CompatibilityResult = lazy(() => import('./pages/saju/CompatibilityResult'));
+const SajuMe = lazy(() => import('./pages/saju/Me'));

 export const navLinks = [
    {
@@ -275,4 +276,8 @@ export const appRoutes = [
        path: 'saju/compatibility/result',
        element: <CompatibilityResult />,
    },
+    {
+        path: 'saju/me',
+        element: <SajuMe />,
+    },
 ];
Author	SHA1	Message	Date
gahusb	d29fdac4a0	chore(saju-ui-v2): v1 components/ + Saju.css 일괄 삭제 (Phase 6 cleanup)	2026-05-27 07:48:32 +09:00
gahusb	be762e1ee8	feat(saju-ui-v2): CompatibilityResult.jsx v2 — 점수 + 요약 + strengths/challenges	2026-05-27 07:47:39 +09:00
gahusb	1664fbda09	feat(saju-ui-v2): Compatibility.jsx — placeholder → 두 사람 입력 폼 + compat API	2026-05-27 07:47:22 +09:00
gahusb	3c64a4604f	feat(saju-ui-v2): match.desktop.jsx — max-width 900 wrapper	2026-05-27 07:47:12 +09:00
gahusb	29f37a1642	feat(saju-ui-v2): match.mobile.jsx — 두 사람 입력 폼 (PersonForm + IconHeart)	2026-05-27 07:47:07 +09:00
gahusb	e1804ad181	feat(saju-ui-v2): Today.jsx v2 진입 + 4 state branches	2026-05-27 07:45:13 +09:00
gahusb	6fdc2593be	feat(saju-ui-v2): today.desktop.jsx — max-width 720 wrapper	2026-05-27 07:44:52 +09:00
gahusb	9bc31d23f5	feat(saju-ui-v2): today.mobile.jsx — FortuneRing + 4 ScoreCard + LuckyBox + signs	2026-05-27 07:44:47 +09:00
gahusb	0d1e8b3c2d	feat(saju-ui-v2): SajuResult.jsx v2 진입 + Empty/Loading/Error state	2026-05-27 07:43:12 +09:00
gahusb	f8874b2aea	feat(saju-ui-v2): saju.desktop.jsx — 4탭 유지 + max-width 900 컨테이너	2026-05-27 07:42:50 +09:00
gahusb	da694266d4	feat(saju-ui-v2): saju.mobile.jsx — 4탭 (Basic/Chart/Flow/Traits) + 실 schema 매핑	2026-05-27 07:42:03 +09:00
gahusb	1bf1f1405b	feat(saju-ui-v2): Saju.jsx — useViewportMode 분기 + Home v2 진입	2026-05-27 02:12:25 +09:00
gahusb	e0834b1275	feat(saju-ui-v2): home.desktop.jsx — mt-wash 산수화 + 2-column hero	2026-05-27 02:11:52 +09:00
gahusb	5acf7db27c	feat(saju-ui-v2): home.mobile.jsx — night hero + ActionCard×3 + 입력 폼	2026-05-27 02:10:47 +09:00
gahusb	76c7bcc62b	feat(saju-ui-v2): /saju/me 라우트 + Me 컴포넌트 lazy import	2026-05-27 02:07:24 +09:00
gahusb	9453474c69	feat(saju-ui-v2): Me.jsx — placeholder + 비활성 4 카드	2026-05-27 02:06:52 +09:00
gahusb	f924c25f16	feat(saju-ui-v2): DesktopHeader.jsx — 로고 + 5 항목 horizontal nav	2026-05-27 02:06:23 +09:00
gahusb	7d89a664aa	feat(saju-ui-v2): BottomNav.jsx — 5 항목 + safe-area + active accent	2026-05-27 02:05:52 +09:00
gahusb	50ec52ab6e	feat(saju-ui-v2): PrimaryButton + GhostButton + InputRow	2026-05-27 02:05:08 +09:00
gahusb	78e7e68bb0	feat(saju-ui-v2): OrnamentBloom + TopRibbon + OrnateFrame + TitleBlock	2026-05-27 02:03:59 +09:00
gahusb	fd84e17f0b	feat(saju-ui-v2): MascotBubble.jsx — 4 tone (ivory/navy/green/purple) + paw-bob	2026-05-27 02:03:03 +09:00
gahusb	a6d52c9725	feat(saju-ui-v2): Mascot.jsx + 7 variant 매핑 test	2026-05-27 02:02:05 +09:00
gahusb	cc9028ac3d	feat(saju-ui-v2): Icons.jsx — 5 nav + IconPaw/Chevron/Sparkle	2026-05-27 02:00:45 +09:00
gahusb	47b5eab3ff	feat(saju-ui-v2): _shell/helpers — hexA/daeunLabel/deriveTraits/colorMap + tests	2026-05-27 01:58:26 +09:00
gahusb	7f42c40efc	feat(saju-ui-v2): useViewportMode hook (1024px breakpoint) + 3 tests	2026-05-27 01:55:58 +09:00
gahusb	d34bedcb4c	feat(saju-ui-v2): shell.css — paper/night/mt-wash 배경 + screenIn/paw-bob 애니메이션	2026-05-27 01:53:45 +09:00
gahusb	5f7e66c220	feat(saju-ui-v2): tokens.css — 디자인 변수 + 한글 폰트 토큰 (.saju-v2 scope)	2026-05-27 01:51:01 +09:00
gahusb	6040d5fd7f	fix(saju-ui-v2): index.html — Noto Serif KR link 복구 (v1 saju/tarot 페이지 폰트 회귀 방지) spec: head 내 <title> 다음 줄에 기존 Noto Serif KR 링크를 복구. 이전 커밋(`dd719f5`)에서 링크를 삭제한 것을 수정. 최종 헤드에 포함: - 2x preconnect (googleapis, gstatic) - 1x Noto Serif KR stylesheet (복구) - 1x Nanum/Gowun stylesheet (유지) v1 saju/tarot 페이지의 'Noto Serif KR' font-family 참조 유지. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>	2026-05-27 01:48:28 +09:00
gahusb	dd719f5b2e	feat(saju-ui-v2): Google Fonts (Nanum Myeongjo/Gothic/Gowun Batang) preconnect + link	2026-05-27 01:46:27 +09:00
gahusb	e91b7feada	chore: .gitignore에 .worktrees/ 추가 (worktree 격리 작업 보호)	2026-05-27 01:43:26 +09:00
gahusb	ac098faeea	chore(saju-v1): horyung-main + background PNG 자산 추가 호령 캐릭터 메인 PNG와 배경 자산을 main에 commit. v2 리디자인의 Mascot variant=full 매핑 + worktree 격리 작업에 필요. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-27 01:43:04 +09:00