From fd84e17f0b98ad98343d2c17f396bc6abcf74106 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 27 May 2026 02:03:03 +0900
Subject: [PATCH] =?UTF-8?q?feat(saju-ui-v2):=20MascotBubble.jsx=20?=
 =?UTF-8?q?=E2=80=94=204=20tone=20(ivory/navy/green/purple)=20+=20paw-bob?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/saju/_shell/MascotBubble.jsx | 40 ++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/pages/saju/_shell/MascotBubble.jsx

diff --git a/src/pages/saju/_shell/MascotBubble.jsx b/src/pages/saju/_shell/MascotBubble.jsx
new file mode 100644
index 0000000..06b5505
--- /dev/null
+++ 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>
+  );
+}