diff --git a/src/pages/saju/_shell/Mascot.jsx b/src/pages/saju/_shell/Mascot.jsx
new file mode 100644
index 0000000..61a42ea
--- /dev/null
+++ 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 }} />
+  );
+}
diff --git a/src/pages/saju/_shell/Mascot.test.jsx b/src/pages/saju/_shell/Mascot.test.jsx
new file mode 100644
index 0000000..0bc404b
--- /dev/null
+++ 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/');
+    });
+  });
+});