diff --git a/src/App.tsx b/src/App.tsx
index bee594d..89ffca5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,10 @@
-import { css } from '@emotion/react';
-import { useEffect } from 'react';
+import { css, keyframes } from '@emotion/react';
+import { useCallback, useEffect, useState } from 'react';
 import { BottomTabBar } from './components/BottomTabBar';
 import { OfflineRewardModal } from './components/OfflineRewardModal';
 import { AchievementToast } from './components/AchievementToast';
+import { AdBanner } from './components/AdBanner';
+import { IntroSplash } from './components/IntroSplash';
 import { ElementsScreen } from './components/screens/ElementsScreen';
 import { EvolutionScreen } from './components/screens/EvolutionScreen';
 import { FusionScreen } from './components/screens/FusionScreen';
@@ -14,7 +16,16 @@ import { useIdleTick } from './hooks/useIdleTick';
 import { useGameStore } from './store/useGameStore';
 import { trackGameEvent } from './platform/analytics';
 
-const rootStyle = css`
+const legendaryShake = keyframes`
+  0%, 100% { transform: translate3d(0, 0, 0); filter: none; }
+  15% { transform: translate3d(-6px, 2px, 0); filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.7)); }
+  30% { transform: translate3d(5px, -3px, 0); }
+  45% { transform: translate3d(-4px, -2px, 0); }
+  60% { transform: translate3d(4px, 3px, 0); }
+  75% { transform: translate3d(-2px, 1px, 0); }
+`;
+
+const rootStyle = (shaking: boolean) => css`
   width: 100%;
   height: 100vh;
   display: flex;
@@ -26,18 +37,26 @@ const rootStyle = css`
     -apple-system,
     BlinkMacSystemFont,
     sans-serif;
+  animation: ${shaking ? css`${legendaryShake} 0.42s ease-out` : 'none'};
 `;
 
 const contentStyle = css`
   flex: 1;
   overflow-y: auto;
-  padding-bottom: 72px;
+  padding-bottom: 106px;
 `;
 
 export function App() {
   const { activeTab, setActiveTab, elements, gold, elementLevels } = useGameStore();
+  const [shaking, setShaking] = useState(false);
+  const [showIntro, setShowIntro] = useState(() => localStorage.getItem('firstspark-intro-seen') !== '1');
   useIdleTick();
 
+  const handleIntroDone = useCallback(() => {
+    localStorage.setItem('firstspark-intro-seen', '1');
+    setShowIntro(false);
+  }, []);
+
   useEffect(() => {
     const ownedCount = Object.values(elements).filter((c) => c > 0).length;
     const totalLevel = Object.values(elementLevels).reduce((sum, lv) => sum + lv, 0);
@@ -50,8 +69,22 @@ export function App() {
     });
   }, []);
 
+  useEffect(() => {
+    const handler = () => {
+      setShaking(true);
+      window.setTimeout(() => setShaking(false), 440);
+    };
+    window.addEventListener('legendaryImpact', handler);
+    return () => window.removeEventListener('legendaryImpact', handler);
+  }, []);
+
   return (
-    <div css={rootStyle}>
+    <div css={rootStyle(shaking)}>
+      {showIntro && (
+        <IntroSplash
+          onDone={handleIntroDone}
+        />
+      )}
       <OfflineRewardModal />
       <AchievementToast />
       <div css={contentStyle}>
@@ -62,6 +95,7 @@ export function App() {
         {activeTab === 'achievements' && <AchievementsScreen />}
         {activeTab === 'settings' && <SettingsScreen />}
       </div>
+      <AdBanner />
       <BottomTabBar activeTab={activeTab} onTabChange={setActiveTab} />
       <TutorialOverlay />
     </div>
diff --git a/src/components/CharacterSprite.tsx b/src/components/CharacterSprite.tsx
index 541f309..89351fd 100644
--- a/src/components/CharacterSprite.tsx
+++ b/src/components/CharacterSprite.tsx
@@ -1,10 +1,11 @@
 /**
  * CharacterSprite
  *
- * docs/character-design-guide.md 에 정의된 카와이 치비 스타일을 SVG로 구현.
- * 각 원소의 색상·Tier·파티클 유형에 따라 고유한 캐릭터를 생성합니다.
+ * 원소별 속성 문양과 티어 프레임을 가진 SVG 스프라이트.
+ * 같은 둥근 캐릭터처럼 보이지 않도록 색, 문양, 실루엣, 오라가 함께 달라집니다.
  */
-import { Fragment, useMemo, type ReactElement } from 'react';
+import { css, keyframes } from '@emotion/react';
+import { Fragment, useId, useMemo, type ReactElement } from 'react';
 import {
   CHARACTER_VISUAL,
   DEFAULT_VISUAL,
@@ -12,6 +13,112 @@ import {
   type ParticleType,
   type PatternType,
 } from '../data/characterVisual';
+import earthAsset from '../assets/elements/earth.png';
+import fireAsset from '../assets/elements/fire.png';
+import waterAsset from '../assets/elements/water.png';
+import windAsset from '../assets/elements/wind.png';
+
+type RasterMotion = 'fire' | 'water' | 'wind' | 'earth';
+
+const RASTER_SPRITES: Record<string, { src: string; motion: RasterMotion }> = {
+  fire: { src: fireAsset, motion: 'fire' },
+  water: { src: waterAsset, motion: 'water' },
+  wind: { src: windAsset, motion: 'wind' },
+  earth: { src: earthAsset, motion: 'earth' },
+};
+
+const fireFlicker = keyframes`
+  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: brightness(1) saturate(1.04); }
+  18% { transform: translateY(-2px) scale(1.035, 0.985) rotate(-1.4deg); filter: brightness(1.12) saturate(1.18); }
+  36% { transform: translateY(1px) scale(0.985, 1.035) rotate(1.1deg); filter: brightness(0.96) saturate(1.08); }
+  62% { transform: translateY(-3px) scale(1.045, 0.975) rotate(0.8deg); filter: brightness(1.18) saturate(1.22); }
+  82% { transform: translateY(-1px) scale(1.01, 1.02) rotate(-0.6deg); filter: brightness(1.04) saturate(1.12); }
+`;
+
+const waterRipple = keyframes`
+  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: brightness(1); }
+  30% { transform: translateY(-2px) scale(1.02, 0.99) rotate(0.8deg); filter: brightness(1.08); }
+  58% { transform: translateY(1px) scale(0.99, 1.02) rotate(-0.7deg); filter: brightness(0.98); }
+  78% { transform: translateY(-1px) scale(1.015, 1) rotate(0.4deg); filter: brightness(1.04); }
+`;
+
+const windFlow = keyframes`
+  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.96; }
+  25% { transform: translate(2px, -2px) scale(1.02) rotate(1.6deg); opacity: 1; }
+  52% { transform: translate(-2px, 1px) scale(0.99, 1.02) rotate(-1.2deg); opacity: 0.92; }
+  76% { transform: translate(1px, -1px) scale(1.01) rotate(0.8deg); opacity: 0.98; }
+`;
+
+const earthGrow = keyframes`
+  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); filter: brightness(1); }
+  38% { transform: translateY(-1px) scale(1.01, 1.015) rotate(-0.4deg); filter: brightness(1.05); }
+  72% { transform: translateY(1px) scale(0.995, 1.005) rotate(0.5deg); filter: brightness(0.98); }
+`;
+
+const rasterFloat = keyframes`
+  0%, 100% { transform: translateY(0) scale(1); }
+  50% { transform: translateY(-3px) scale(1.02); }
+`;
+
+const glowPulse = keyframes`
+  0%, 100% { opacity: 0.08; transform: scale(0.94); }
+  50% { opacity: 0.18; transform: scale(1.04); }
+`;
+
+const rasterWrapStyle = (size: number, color: string, tier: number) => css`
+  position: relative;
+  width: ${size}px;
+  height: ${size}px;
+  display: inline-block;
+  border-radius: 999px;
+  filter: drop-shadow(0 7px 10px rgba(15, 23, 42, 0.16));
+  animation: ${rasterFloat} 2.2s ease-in-out infinite;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: ${Math.max(1, size * 0.04)}px;
+    border-radius: 999px;
+    background: ${color};
+    opacity: ${tier >= 3 ? 0.16 : 0.08};
+    filter: blur(${Math.max(6, size * 0.14)}px);
+    animation: ${glowPulse} 2.3s ease-in-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: ${Math.max(1, size * 0.03)}px;
+    border-radius: 999px;
+    border: ${Math.max(1, size * 0.025)}px solid rgba(255, 255, 255, 0.6);
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
+    pointer-events: none;
+  }
+`;
+
+function getRasterMotionStyle(motion: RasterMotion) {
+  switch (motion) {
+    case 'fire':
+      return css`${fireFlicker} 0.82s ease-in-out infinite`;
+    case 'water':
+      return css`${waterRipple} 1.7s ease-in-out infinite`;
+    case 'wind':
+      return css`${windFlow} 1.35s ease-in-out infinite`;
+    case 'earth':
+      return css`${earthGrow} 2.2s ease-in-out infinite`;
+  }
+}
+
+const rasterImageStyle = (size: number, motion: RasterMotion) => css`
+  position: absolute;
+  inset: 0;
+  width: ${size}px;
+  height: ${size}px;
+  object-fit: contain;
+  transform-origin: 50% 62%;
+  animation: ${getRasterMotionStyle(motion)};
+  will-change: transform, filter, opacity;
+`;
 
 // ─── 색상 유틸 ───────────────────────────────────────────────
 
@@ -33,16 +140,44 @@ function rgbToHex(r: number, g: number, b: number): string {
   );
 }
 
-function lighten(hex: string, amt: number): string {
-  const [r, g, b] = hexToRgb(hex);
-  return rgbToHex(r + amt, g + amt, b + amt);
-}
-
 function darken(hex: string, amt: number): string {
   const [r, g, b] = hexToRgb(hex);
   return rgbToHex(r - amt, g - amt, b - amt);
 }
 
+function mix(hexA: string, hexB: string, ratio: number): string {
+  const [ar, ag, ab] = hexToRgb(hexA);
+  const [br, bg, bb] = hexToRgb(hexB);
+  return rgbToHex(
+    ar + (br - ar) * ratio,
+    ag + (bg - ag) * ratio,
+    ab + (bb - ab) * ratio
+  );
+}
+
+function luminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((v) => v / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+function readableBase(hex: string): string {
+  if (luminance(hex) > 0.82) return mix(hex, '#3182F6', 0.28);
+  if (luminance(hex) < 0.08) return mix(hex, '#7C4DFF', 0.32);
+  return hex;
+}
+
+const TIER_FRAME: Record<number, { stroke: string; accent: string; aura: number; dash?: string }> = {
+  1: { stroke: '#94A3B8', accent: '#CBD5E1', aura: 0.08 },
+  2: { stroke: '#22C55E', accent: '#86EFAC', aura: 0.12, dash: '4 5' },
+  3: { stroke: '#3B82F6', accent: '#93C5FD', aura: 0.18, dash: '7 4' },
+  4: { stroke: '#A855F7', accent: '#D8B4FE', aura: 0.24 },
+  5: { stroke: '#F59E0B', accent: '#FDE68A', aura: 0.32 },
+};
+
+function getTierFrame(tier: number) {
+  return TIER_FRAME[Math.min(5, Math.max(1, tier))] ?? TIER_FRAME[1];
+}
+
 // ─── 파티클 위치 ──────────────────────────────────────────────
 
 interface ParticlePos {
@@ -309,6 +444,141 @@ function renderBodyPattern(
   }
 }
 
+function renderElementCrest(
+  particleType: ParticleType,
+  color: string,
+  accentColor: string,
+  cx: number,
+  cy: number,
+  tier: number
+): ReactElement {
+  const crestY = cy + 5;
+  const opacity = tier >= 4 ? 0.28 : 0.22;
+
+  switch (particleType) {
+    case 'flame':
+      return (
+        <path
+          d={`M${cx},${crestY - 18} C${cx - 13},${crestY - 4} ${cx - 9},${crestY + 12} ${cx},${crestY + 16} C${cx + 12},${crestY + 10} ${cx + 12},${crestY - 2} ${cx + 4},${crestY - 9} C${cx + 2},${crestY - 12} ${cx + 2},${crestY - 15} ${cx},${crestY - 18} Z`}
+          fill={accentColor}
+          opacity={opacity}
+        />
+      );
+    case 'water':
+      return (
+        <path
+          d={`M${cx},${crestY - 18} C${cx - 12},${crestY - 3} ${cx - 13},${crestY + 8} ${cx},${crestY + 15} C${cx + 13},${crestY + 8} ${cx + 12},${crestY - 3} ${cx},${crestY - 18} Z`}
+          fill={accentColor}
+          opacity={opacity}
+        />
+      );
+    case 'wind':
+      return (
+        <Fragment>
+          <path
+            d={`M${cx - 18},${crestY - 5} C${cx - 7},${crestY - 14} ${cx + 14},${crestY - 12} ${cx + 18},${crestY - 2}`}
+            fill="none"
+            stroke={accentColor}
+            strokeWidth="4"
+            strokeLinecap="round"
+            opacity={opacity + 0.06}
+          />
+          <path
+            d={`M${cx - 14},${crestY + 7} C${cx - 2},${crestY + 14} ${cx + 11},${crestY + 9} ${cx + 15},${crestY + 1}`}
+            fill="none"
+            stroke={accentColor}
+            strokeWidth="3"
+            strokeLinecap="round"
+            opacity={opacity}
+          />
+        </Fragment>
+      );
+    case 'earth':
+    case 'leaf':
+      return (
+        <Fragment>
+          <ellipse
+            cx={cx - 6}
+            cy={crestY + 3}
+            rx="9"
+            ry="15"
+            fill={accentColor}
+            opacity={opacity}
+            transform={`rotate(-32 ${cx - 6} ${crestY + 3})`}
+          />
+          <ellipse
+            cx={cx + 7}
+            cy={crestY + 4}
+            rx="8"
+            ry="13"
+            fill={color}
+            opacity={opacity * 0.85}
+            transform={`rotate(34 ${cx + 7} ${crestY + 4})`}
+          />
+        </Fragment>
+      );
+    case 'crystal':
+      return (
+        <polygon
+          points={`${cx},${crestY - 19} ${cx + 15},${crestY - 2} ${cx + 7},${crestY + 17} ${cx - 9},${crestY + 16} ${cx - 16},${crestY - 2}`}
+          fill={accentColor}
+          opacity={opacity}
+        />
+      );
+    case 'spark':
+      return (
+        <path
+          d={`M${cx + 1},${crestY - 20} L${cx + 8},${crestY - 2} L${cx + 1},${crestY - 2} L${cx + 10},${crestY + 18} L${cx - 10},${crestY - 6} L${cx - 2},${crestY - 6} Z`}
+          fill={accentColor}
+          opacity={opacity + 0.08}
+        />
+      );
+    case 'smoke':
+      return (
+        <Fragment>
+          <circle cx={cx - 10} cy={crestY + 1} r="10" fill={accentColor} opacity={opacity} />
+          <circle cx={cx + 2} cy={crestY - 7} r="12" fill={accentColor} opacity={opacity * 0.88} />
+          <circle cx={cx + 13} cy={crestY + 3} r="8" fill={accentColor} opacity={opacity * 0.74} />
+        </Fragment>
+      );
+    case 'rainbow':
+      return (
+        <Fragment>
+          <path
+            d={`M${cx - 18},${crestY + 10} A18,18 0 0 1 ${cx + 18},${crestY + 10}`}
+            fill="none"
+            stroke="#FF4D6D"
+            strokeWidth="4"
+            opacity={opacity + 0.1}
+          />
+          <path
+            d={`M${cx - 13},${crestY + 10} A13,13 0 0 1 ${cx + 13},${crestY + 10}`}
+            fill="none"
+            stroke="#4ADE80"
+            strokeWidth="4"
+            opacity={opacity + 0.1}
+          />
+          <path
+            d={`M${cx - 8},${crestY + 10} A8,8 0 0 1 ${cx + 8},${crestY + 10}`}
+            fill="none"
+            stroke="#60A5FA"
+            strokeWidth="4"
+            opacity={opacity + 0.1}
+          />
+        </Fragment>
+      );
+    case 'star':
+    default:
+      return (
+        <polygon
+          points={`${cx},${crestY - 19} ${cx + 5},${crestY - 5} ${cx + 19},${crestY - 5} ${cx + 8},${crestY + 4} ${cx + 12},${crestY + 18} ${cx},${crestY + 9} ${cx - 12},${crestY + 18} ${cx - 8},${crestY + 4} ${cx - 19},${crestY - 5} ${cx - 5},${crestY - 5}`}
+          fill={accentColor}
+          opacity={opacity}
+        />
+      );
+  }
+}
+
 // ─── 눈 렌더링 ────────────────────────────────────────────────
 
 function renderEyes(
@@ -382,29 +652,36 @@ export function CharacterSprite({
   size = 120,
   state = 'obtained',
 }: CharacterSpriteProps) {
+  const instanceId = useId().replace(/:/g, '');
   const config = CHARACTER_VISUAL[elementId] ?? DEFAULT_VISUAL;
   const [bodyRx, bodyRy] = config.bodyShape ?? [33, 31];
+  const frame = getTierFrame(tier);
 
   const colors = useMemo(() => {
     if (state === 'undiscovered') {
       return {
-        body1: '#C8C8C8',
-        body2: '#A0A0A0',
-        body3: '#808080',
-        outline: '#606060',
-        pattern: '#888888',
-        glow: '#AAAAAA',
+        body1: '#E5E7EB',
+        body2: '#B8C0CC',
+        body3: '#7C8798',
+        outline: '#667085',
+        pattern: '#98A2B3',
+        glow: '#CBD5E1',
+        crest: '#F8FAFC',
+        shine: '#FFFFFF',
       };
     }
     const isLocked = state === 'locked';
-    const base = isLocked ? '#9E9E9E' : elementColor;
+    const base = isLocked ? '#9E9E9E' : readableBase(elementColor);
+    const glowBase = isLocked ? '#CCCCCC' : readableBase(config.glowColor);
     return {
-      body1: lighten(base, 45),
-      body2: base,
-      body3: darken(base, 20),
-      outline: darken(base, 35),
-      pattern: darken(base, 15),
-      glow: isLocked ? '#CCCCCC' : config.glowColor,
+      body1: mix(base, '#FFFFFF', 0.58),
+      body2: mix(base, '#FFFFFF', 0.12),
+      body3: mix(base, '#111827', 0.22),
+      outline: mix(base, '#0F172A', 0.48),
+      pattern: mix(base, '#FFFFFF', 0.18),
+      glow: glowBase,
+      crest: mix(base, '#FFFFFF', 0.66),
+      shine: mix(base, '#FFFFFF', 0.82),
     };
   }, [elementColor, state, config.glowColor]);
 
@@ -414,9 +691,21 @@ export function CharacterSprite({
   const showRing = showDetails && tier >= 4;
   const showRainbow = showDetails && tier >= 5;
 
-  const uid = `cs-${elementId}`;
+  const uid = `cs-${elementId}-${instanceId}`;
   const CX = 60;
   const CY = 64;
+  const coreScale = tier >= 5 ? 1.06 : tier >= 4 ? 1.03 : 1;
+  const rx = bodyRx * coreScale;
+  const ry = bodyRy * coreScale;
+  const rasterSprite = RASTER_SPRITES[elementId];
+
+  if (state === 'obtained' && rasterSprite) {
+    return (
+      <span css={rasterWrapStyle(size, elementColor, tier)} aria-hidden="true">
+        <img src={rasterSprite.src} css={rasterImageStyle(size, rasterSprite.motion)} alt="" />
+      </span>
+    );
+  }
 
   return (
     <svg
@@ -427,6 +716,10 @@ export function CharacterSprite({
       overflow="visible"
     >
       <defs>
+        <filter id={`${uid}-shadow`} x="-35%" y="-35%" width="170%" height="180%">
+          <feDropShadow dx="0" dy="7" stdDeviation="5" floodColor="#101828" floodOpacity="0.18" />
+        </filter>
+
         {/* 몸체 그라디언트 */}
         <radialGradient id={`${uid}-grad`} cx="38%" cy="32%" r="65%">
           <stop offset="0%" stopColor={colors.body1} />
@@ -434,6 +727,12 @@ export function CharacterSprite({
           <stop offset="100%" stopColor={colors.body3} />
         </radialGradient>
 
+        <linearGradient id={`${uid}-frame`} x1="18" y1="20" x2="102" y2="102">
+          <stop offset="0%" stopColor={frame.accent} />
+          <stop offset="46%" stopColor={frame.stroke} />
+          <stop offset="100%" stopColor={colors.outline} />
+        </linearGradient>
+
         {/* 글로우 필터 (T3+) */}
         {showGlow && (
           <filter id={`${uid}-glow`} x="-25%" y="-25%" width="150%" height="150%">
@@ -465,16 +764,25 @@ export function CharacterSprite({
         )}
       </defs>
 
-      {/* ① 배경 글로우 헤일로 (T3+) */}
-      {showGlow && (
+      <ellipse cx={CX} cy="101" rx={rx * 0.78} ry="8" fill="#101828" opacity="0.12" />
+
+      {/* ① 배경 오라 */}
+      {showDetails && (
         <ellipse
           cx={CX}
           cy={CY}
-          rx={bodyRx + 12}
-          ry={bodyRy + 12}
+          rx={rx + 16 + tier * 1.5}
+          ry={ry + 16 + tier * 1.5}
           fill={colors.glow}
-          opacity={tier >= 5 ? 0.2 : tier >= 4 ? 0.15 : 0.1}
-        />
+          opacity={frame.aura}
+        >
+          <animate
+            attributeName="opacity"
+            values={`${frame.aura * 0.7};${frame.aura};${frame.aura * 0.7}`}
+            dur={`${2.8 - Math.min(tier, 5) * 0.16}s`}
+            repeatCount="indefinite"
+          />
+        </ellipse>
       )}
 
       {/* ② 에너지 링 (T4) */}
@@ -482,22 +790,23 @@ export function CharacterSprite({
         <ellipse
           cx={CX}
           cy={CY}
-          rx={bodyRx + 14}
-          ry={bodyRy + 14}
+          rx={rx + 14}
+          ry={ry + 14}
           fill="none"
-          stroke={elementColor}
-          strokeWidth="1.5"
-          opacity="0.4"
+          stroke={`url(#${uid}-frame)`}
+          strokeWidth="2.2"
+          strokeDasharray={frame.dash}
+          opacity="0.55"
         >
           <animate
             attributeName="rx"
-            values={`${bodyRx + 12};${bodyRx + 16};${bodyRx + 12}`}
+            values={`${rx + 12};${rx + 17};${rx + 12}`}
             dur="2.4s"
             repeatCount="indefinite"
           />
           <animate
             attributeName="ry"
-            values={`${bodyRy + 12};${bodyRy + 16};${bodyRy + 12}`}
+            values={`${ry + 12};${ry + 17};${ry + 12}`}
             dur="2.4s"
             repeatCount="indefinite"
           />
@@ -510,11 +819,11 @@ export function CharacterSprite({
         <ellipse
           cx={CX}
           cy={CY}
-          rx={bodyRx + 14}
-          ry={bodyRy + 14}
+          rx={rx + 17}
+          ry={ry + 17}
           fill="none"
           stroke={`url(#${uid}-rainbow)`}
-          strokeWidth="2.5"
+          strokeWidth="3"
           opacity="0.75"
         >
           <animateTransform
@@ -531,12 +840,28 @@ export function CharacterSprite({
       {showDetails &&
         renderParticles(config.particleType, config.particleColors, tier, CX, CY)}
 
-      {/* ⑤ 몸체 */}
+      {/* ⑤ 티어 프레임 */}
+      {state !== 'undiscovered' && (
+        <ellipse
+          cx={CX}
+          cy={CY}
+          rx={rx + 6}
+          ry={ry + 6}
+          fill="rgba(255,255,255,0.18)"
+          stroke={`url(#${uid}-frame)`}
+          strokeWidth={tier >= 4 ? 3 : tier >= 2 ? 2.4 : 1.8}
+          strokeDasharray={tier < 4 ? frame.dash : undefined}
+          opacity={state === 'locked' ? 0.52 : 0.9}
+          filter={`url(#${uid}-shadow)`}
+        />
+      )}
+
+      {/* ⑥ 몸체 */}
       <ellipse
         cx={CX}
         cy={CY}
-        rx={bodyRx}
-        ry={bodyRy}
+        rx={rx}
+        ry={ry}
         fill={`url(#${uid}-grad)`}
         stroke={colors.outline}
         strokeWidth={showGlow ? 2.5 : 2}
@@ -554,33 +879,45 @@ export function CharacterSprite({
         )}
       </ellipse>
 
-      {/* ⑥ 몸체 패턴 */}
+      {/* ⑦ 속성 문양과 몸체 패턴 */}
+      {showDetails &&
+        renderElementCrest(config.particleType, colors.pattern, colors.crest, CX, CY, tier)}
       {showDetails &&
         renderBodyPattern(config.patternType, colors.pattern, CX, CY)}
 
-      {/* ⑦ 눈 */}
+      <ellipse
+        cx={CX - rx * 0.28}
+        cy={CY - ry * 0.42}
+        rx={Math.max(7, rx * 0.22)}
+        ry={Math.max(4, ry * 0.12)}
+        fill={colors.shine}
+        opacity={state === 'obtained' ? 0.38 : 0.16}
+        transform={`rotate(-22 ${CX - rx * 0.28} ${CY - ry * 0.42})`}
+      />
+
+      {/* ⑧ 눈 */}
       {state !== 'undiscovered' &&
         renderEyes(
           showDetails ? config.eyeStyle : 'steady',
           CX,
           CY,
-          bodyRy,
+          ry,
           colors.outline,
         )}
 
-      {/* ⑧ 잠금 눈 가리개 */}
+      {/* ⑨ 잠금 눈 가리개 */}
       {state === 'locked' && (
         <path
-          d={`M${CX - 14},${CY - bodyRy * 0.18 - 2} Q${CX},${CY - bodyRy * 0.18 + 6} ${CX + 14},${CY - bodyRy * 0.18 - 2}`}
+          d={`M${CX - 14},${CY - ry * 0.18 - 2} Q${CX},${CY - ry * 0.18 + 6} ${CX + 14},${CY - ry * 0.18 - 2}`}
           fill={darken(colors.body2, 25)}
           opacity="0.5"
         />
       )}
 
-      {/* ⑨ 미소 */}
+      {/* ⑩ 미소 */}
       {state !== 'undiscovered' && (
         <path
-          d={`M${CX - 8},${CY + bodyRy * 0.22} Q${CX},${CY + bodyRy * 0.22 + 6} ${CX + 8},${CY + bodyRy * 0.22}`}
+          d={`M${CX - 8},${CY + ry * 0.22} Q${CX},${CY + ry * 0.22 + 6} ${CX + 8},${CY + ry * 0.22}`}
           fill="none"
           stroke={colors.outline}
           strokeWidth="1.5"
@@ -588,7 +925,16 @@ export function CharacterSprite({
         />
       )}
 
-      {/* ⑩ 미발견 ? */}
+      {/* ⑪ 고티어 장식 */}
+      {showDetails && tier >= 4 && (
+        <Fragment>
+          <circle cx={CX - rx - 6} cy={CY - ry * 0.5} r={tier >= 5 ? 3.2 : 2.4} fill={frame.accent} opacity="0.9" />
+          <circle cx={CX + rx + 6} cy={CY - ry * 0.35} r={tier >= 5 ? 3.2 : 2.4} fill={frame.accent} opacity="0.9" />
+          <circle cx={CX} cy={CY - ry - 9} r={tier >= 5 ? 3.5 : 2.6} fill={frame.accent} opacity="0.86" />
+        </Fragment>
+      )}
+
+      {/* ⑫ 미발견 ? */}
       {state === 'undiscovered' && (
         <text
           x={CX}
diff --git a/src/components/OfflineRewardModal.tsx b/src/components/OfflineRewardModal.tsx
index 0dcb898..d1731d8 100644
--- a/src/components/OfflineRewardModal.tsx
+++ b/src/components/OfflineRewardModal.tsx
@@ -1,8 +1,11 @@
 import { css, keyframes } from '@emotion/react';
+import { useState } from 'react';
 import { adaptive } from '../styles/adaptive';
 import elementsData from '../data/elements.json';
 import { useGameStore } from '../store/useGameStore';
 import { trackGameEvent } from '../platform/analytics';
+import { showRewardedAd } from '../platform/ads';
+import type { OfflineReward } from '../store/useGameStore';
 
 function formatDuration(seconds: number): string {
   if (seconds >= 3600) {
@@ -33,7 +36,7 @@ const overlayStyle = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: 2000;
   padding: 20px;
 `;
 
@@ -192,27 +195,88 @@ const claimButtonStyle = css`
       transparent
     );
     animation: ${shimmer} 2.8s ease-in-out infinite;
+    pointer-events: none;
   }
 
   &:active {
     transform: scale(0.97);
   }
+
+  &:disabled {
+    cursor: wait;
+    opacity: 0.72;
+  }
+`;
+
+const doubleButtonStyle = css`
+  width: 100%;
+  padding: 13px;
+  background: #101828;
+  color: white;
+  border: none;
+  border-radius: 14px;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  margin-bottom: 10px;
+
+  &:active {
+    transform: scale(0.97);
+  }
+
+  &:disabled {
+    cursor: wait;
+    opacity: 0.72;
+  }
 `;
 
 export function OfflineRewardModal() {
   const pendingOfflineReward = useGameStore((s) => s.pendingOfflineReward);
   const claimOfflineReward = useGameStore((s) => s.claimOfflineReward);
   const set = useGameStore.setState;
+  const [isClaiming, setIsClaiming] = useState(false);
 
   if (!pendingOfflineReward) return null;
 
-  const handleClaim = () => {
-    trackGameEvent('offline_reward_claimed', {
-      offline_sec: pendingOfflineReward.offlineSec,
-      gold_reward: pendingOfflineReward.gold,
-      element_types_count: Object.values(pendingOfflineReward.elements).filter((c) => c > 0).length,
-    });
-    claimOfflineReward();
+  const trackClaim = (reward: OfflineReward, multiplier: number) => {
+    try {
+      trackGameEvent('offline_reward_claimed', {
+        offline_sec: reward.offlineSec,
+        gold_reward: reward.gold * multiplier,
+        multiplier,
+        element_types_count: Object.values(reward.elements).filter((c) => c > 0).length,
+      });
+    } catch (error) {
+      console.warn('Failed to track offline reward claim', error);
+    }
+  };
+
+  const claimReward = (reward: OfflineReward, multiplier = 1) => {
+    claimOfflineReward(multiplier);
+    trackClaim(reward, multiplier);
+  };
+
+  const handleClaim = (multiplier = 1) => {
+    if (isClaiming) return;
+    setIsClaiming(true);
+    claimReward(pendingOfflineReward, multiplier);
+  };
+
+  const handleDoubleClaim = async () => {
+    if (isClaiming) return;
+    setIsClaiming(true);
+
+    try {
+      const result = await showRewardedAd();
+      if (result.rewarded) {
+        claimReward(pendingOfflineReward, 2);
+        return;
+      }
+    } catch (error) {
+      console.warn('Failed to show rewarded ad', error);
+    }
+
+    setIsClaiming(false);
   };
 
   const elementRewards = Object.entries(pendingOfflineReward.elements)
@@ -260,8 +324,13 @@ export function OfflineRewardModal() {
           <p css={subtitleStyle}>아직 수집된 원소가 없습니다.</p>
         )}
 
-        <button css={claimButtonStyle} onClick={handleClaim}>
-          수령하기
+        {hasRewards && (
+          <button css={doubleButtonStyle} onClick={handleDoubleClaim} disabled={isClaiming}>
+            {isClaiming ? '처리 중...' : '광고 보고 2배 수령'}
+          </button>
+        )}
+        <button css={claimButtonStyle} onClick={() => handleClaim()} disabled={isClaiming}>
+          {isClaiming ? '처리 중...' : '수령하기'}
         </button>
       </div>
     </div>
diff --git a/src/components/screens/ElementsScreen.tsx b/src/components/screens/ElementsScreen.tsx
index 81f0fb0..4692afd 100644
--- a/src/components/screens/ElementsScreen.tsx
+++ b/src/components/screens/ElementsScreen.tsx
@@ -1,32 +1,30 @@
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import { memo, useEffect, useRef, useState } from 'react';
 import { adaptive } from '../../styles/adaptive';
 import { FloatingOverlay } from '../FloatingOverlay';
 import { useFloatingItems } from '../../hooks/useFloatingItems';
 import elementsData from '../../data/elements.json';
+import recipesData from '../../data/recipes.json';
 import { CharacterSprite } from '../CharacterSprite';
 import {
+  calcResonanceBonuses,
+  calcTierAutomationStatus,
+  countDiscoveredByTier,
   calcEffectiveIdleRate,
   calcEnhanceCost,
   calcSpawnRate,
+  DAILY_MISSIONS,
   ENHANCE_MAX_LEVEL,
+  getDailyMissionProgress,
+  getDiscoveredElementIds,
   isElementUnlocked,
+  TIER_AUTOMATION_GOALS,
   useGameStore,
 } from '../../store/useGameStore';
 
 // 원소 상태 분류
 type ElementState = 'obtained' | 'locked' | 'undiscovered';
 
-function getElementState(
-  elementId: string,
-  elements: Record<string, number>
-): ElementState {
-  const count = elements[elementId] ?? 0;
-  if (count > 0) return 'obtained';
-  if (isElementUnlocked(elementId, elements)) return 'locked';
-  return 'undiscovered';
-}
-
 // 골드 금액 표시 포맷
 function formatGold(amount: number): string {
   if (amount >= 1_000_000) return `${(amount / 1_000_000).toFixed(1)}M`;
@@ -34,6 +32,27 @@ function formatGold(amount: number): string {
   return String(amount);
 }
 
+function formatSeconds(seconds: number): string {
+  if (!Number.isFinite(seconds)) return '-';
+  if (seconds < 1) return '<1초';
+  if (seconds < 60) return `${Math.ceil(seconds)}초`;
+  return `${Math.ceil(seconds / 60)}분`;
+}
+
+function formatBoostTime(ms: number): string {
+  return formatSeconds(Math.max(0, Math.ceil(ms / 1000)));
+}
+
+function formatRemaining(ms: number): string {
+  const seconds = Math.max(0, Math.ceil(ms / 1000));
+  if (seconds >= 3600) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    return `${h}시간 ${m}분`;
+  }
+  return formatSeconds(seconds);
+}
+
 // ────────────────────────────────────────────────────────────
 // Styles
 // ────────────────────────────────────────────────────────────
@@ -113,6 +132,483 @@ const progressFillStyle = (ratio: number) => css`
   transition: width 0.3s ease;
 `;
 
+const dailyPanelStyle = css`
+  background: #ffffff;
+  border: 1px solid ${adaptive.grey200};
+  border-radius: 16px;
+  padding: 14px;
+  margin-bottom: 16px;
+  box-shadow: 0 8px 20px rgba(49, 64, 84, 0.06);
+`;
+
+const dailyHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+`;
+
+const dailyTitleStyle = css`
+  font-size: 14px;
+  font-weight: 900;
+  color: ${adaptive.grey900};
+`;
+
+const dailyStreakStyle = css`
+  border-radius: 999px;
+  background: #fff3cd;
+  color: #8a5a00;
+  padding: 5px 9px;
+  font-size: 11px;
+  font-weight: 900;
+  white-space: nowrap;
+`;
+
+const dailyBonusRowStyle = css`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+  background: linear-gradient(135deg, #f0f7ff, #f8fbff);
+  border-radius: 12px;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+`;
+
+const dailyBonusTextStyle = css`
+  min-width: 0;
+`;
+
+const dailyBonusNameStyle = css`
+  font-size: 13px;
+  font-weight: 900;
+  color: ${adaptive.grey900};
+`;
+
+const dailyBonusDescStyle = css`
+  margin-top: 2px;
+  font-size: 11px;
+  font-weight: 700;
+  color: ${adaptive.grey500};
+`;
+
+const compactButtonStyle = (active: boolean) => css`
+  border: none;
+  border-radius: 10px;
+  background: ${active ? adaptive.blue500 : adaptive.grey200};
+  color: ${active ? '#ffffff' : adaptive.grey500};
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: ${active ? 'pointer' : 'default'};
+  white-space: nowrap;
+`;
+
+const missionListStyle = css`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+
+  @media (max-width: 520px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const missionCardStyle = (done: boolean, claimed: boolean) => css`
+  border-radius: 12px;
+  border: 1px solid ${claimed ? '#8bd5a2' : done ? adaptive.blue500 : adaptive.grey200};
+  background: ${claimed ? '#f0fff4' : done ? '#f0f7ff' : adaptive.greyBackground};
+  padding: 10px;
+`;
+
+const missionNameStyle = css`
+  font-size: 12px;
+  font-weight: 900;
+  color: ${adaptive.grey900};
+  margin-bottom: 3px;
+`;
+
+const missionDescStyle = css`
+  font-size: 10px;
+  line-height: 1.35;
+  font-weight: 700;
+  color: ${adaptive.grey500};
+`;
+
+const missionProgressStyle = css`
+  height: 5px;
+  border-radius: 999px;
+  background: ${adaptive.grey200};
+  overflow: hidden;
+  margin: 8px 0 7px;
+`;
+
+const missionProgressFillStyle = (ratio: number) => css`
+  height: 100%;
+  width: ${(Math.min(1, Math.max(0, ratio)) * 100).toFixed(1)}%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #3182f6, #22c55e);
+`;
+
+const missionFooterStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  font-weight: 900;
+  color: #8a5a00;
+`;
+
+const stormPanelStyle = (active: boolean) => css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-radius: 16px;
+  padding: 12px 14px;
+  margin-bottom: 16px;
+  color: #ffffff;
+  background: ${active
+    ? 'linear-gradient(135deg, #0f172a, #1d4ed8)'
+    : 'linear-gradient(135deg, #334155, #64748b)'};
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
+`;
+
+const stormTitleStyle = css`
+  font-size: 13px;
+  font-weight: 900;
+`;
+
+const stormDescStyle = css`
+  margin-top: 3px;
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.72);
+`;
+
+const stormBadgeStyle = css`
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  padding: 7px 10px;
+  font-size: 11px;
+  font-weight: 900;
+  white-space: nowrap;
+`;
+
+const tierRewardPanelStyle = css`
+  background: #ffffff;
+  border: 1px solid ${adaptive.grey200};
+  border-radius: 14px;
+  padding: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 8px 20px rgba(49, 64, 84, 0.06);
+`;
+
+const tierRewardHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+
+const tierRewardTitleStyle = css`
+  font-size: 13px;
+  font-weight: 800;
+  color: ${adaptive.grey900};
+`;
+
+const tierRewardBadgeStyle = css`
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: ${adaptive.blue500};
+  color: #ffffff;
+  padding: 5px 9px;
+  font-size: 11px;
+  font-weight: 800;
+`;
+
+const tierRewardTrackStyle = css`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+
+  @media (max-width: 420px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+`;
+
+const tierRewardStepStyle = (unlocked: boolean) => css`
+  border-radius: 10px;
+  padding: 9px;
+  background: ${unlocked ? '#eef8f1' : adaptive.greyBackground};
+  border: 1px solid ${unlocked ? '#67c587' : adaptive.grey200};
+`;
+
+const tierRewardStepNameStyle = css`
+  font-size: 11px;
+  font-weight: 900;
+  color: ${adaptive.grey900};
+  margin-bottom: 5px;
+`;
+
+const tierRewardStepTextStyle = css`
+  font-size: 10px;
+  line-height: 1.35;
+  font-weight: 700;
+  color: ${adaptive.grey500};
+`;
+
+const tierRewardProgressStyle = css`
+  height: 5px;
+  border-radius: 999px;
+  background: ${adaptive.grey200};
+  overflow: hidden;
+  margin-top: 7px;
+`;
+
+const tierRewardProgressFillStyle = (ratio: number, unlocked: boolean) => css`
+  height: 100%;
+  width: ${(Math.min(1, Math.max(0, ratio)) * 100).toFixed(1)}%;
+  border-radius: 999px;
+  background: ${unlocked ? '#22c55e' : adaptive.blue500};
+`;
+
+const scenePulse = keyframes`
+  0%, 100% { transform: scale(1); opacity: 0.75; }
+  50% { transform: scale(1.08); opacity: 1; }
+`;
+
+const driftMote = keyframes`
+  0% { transform: translateY(18px) scale(0.7); opacity: 0; }
+  20% { opacity: 0.85; }
+  100% { transform: translateY(-84px) scale(1); opacity: 0; }
+`;
+
+const laneFlow = keyframes`
+  0% { background-position: 0 0; }
+  100% { background-position: 44px 0; }
+`;
+
+const sceneStyle = css`
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 18% 22%, rgba(255, 176, 64, 0.18), transparent 26%),
+    radial-gradient(circle at 82% 18%, rgba(49, 130, 246, 0.16), transparent 26%),
+    linear-gradient(135deg, #ffffff, #f3f7fb 62%, #fff8ed);
+  border: 1px solid ${adaptive.grey200};
+  border-radius: 16px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 12px 28px rgba(49, 64, 84, 0.08);
+`;
+
+const sceneHeaderStyle = css`
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 14px;
+`;
+
+const sceneTitleStyle = css`
+  font-size: 15px;
+  font-weight: 800;
+  color: ${adaptive.grey900};
+`;
+
+const sceneSubtitleStyle = css`
+  margin-top: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  color: ${adaptive.grey500};
+`;
+
+const sceneStatusStyle = css`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 999px;
+  background: rgba(25, 25, 25, 0.72);
+  color: #ffffff;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 700;
+`;
+
+const statusDotStyle = css`
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #30d158;
+  box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.18);
+  animation: ${scenePulse} 1.4s ease-in-out infinite;
+`;
+
+const sceneBodyStyle = css`
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 116px;
+  gap: 12px;
+
+  @media (max-width: 420px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const producerGridStyle = css`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+`;
+
+const producerLaneStyle = (color: string, active: boolean, ready = false) => css`
+  position: relative;
+  overflow: hidden;
+  min-height: 98px;
+  background: rgba(255, 255, 255, 0.76);
+  border: 1px solid ${ready ? '#22c55e' : active ? color : adaptive.grey200};
+  border-radius: 12px;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  cursor: ${ready ? 'pointer' : 'default'};
+  box-shadow: ${ready ? '0 0 0 3px rgba(34, 197, 94, 0.14)' : 'none'};
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 8px;
+    height: 4px;
+    border-radius: 999px;
+    background-image: linear-gradient(
+      90deg,
+      ${color} 0 18px,
+      rgba(255, 255, 255, 0.25) 18px 28px
+    );
+    background-size: 44px 4px;
+    opacity: ${ready ? 0.85 : active ? 0.55 : 0.2};
+    animation: ${laneFlow} 1.1s linear infinite;
+  }
+
+  &:active {
+    transform: ${ready ? 'scale(0.98)' : 'none'};
+  }
+`;
+
+const producerSpriteStyle = (active: boolean) => css`
+  width: 42px;
+  height: 42px;
+  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.1));
+  animation: ${active ? `${scenePulse} 1.8s ease-in-out infinite` : 'none'};
+`;
+
+const producerInfoStyle = css`
+  min-width: 0;
+`;
+
+const producerNameStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 800;
+  color: ${adaptive.grey900};
+`;
+
+const producerRateStyle = css`
+  margin-top: 3px;
+  font-size: 10px;
+  font-weight: 700;
+  color: ${adaptive.grey500};
+`;
+
+const producerTrackStyle = css`
+  height: 6px;
+  background: ${adaptive.grey200};
+  border-radius: 999px;
+  overflow: hidden;
+  margin-top: 8px;
+`;
+
+const producerFillStyle = (ratio: number, color: string) => css`
+  height: 100%;
+  width: ${(Math.min(1, Math.max(0, ratio)) * 100).toFixed(1)}%;
+  background: ${color};
+  border-radius: 999px;
+  transition: width 0.25s ease;
+`;
+
+const producerNextStyle = css`
+  margin-top: 5px;
+  font-size: 10px;
+  font-weight: 700;
+  color: ${adaptive.blue500};
+`;
+
+const activityPanelStyle = css`
+  min-height: 100%;
+  background: rgba(255, 255, 255, 0.68);
+  border: 1px solid rgba(255, 255, 255, 0.78);
+  border-radius: 12px;
+  padding: 10px;
+`;
+
+const activityTitleStyle = css`
+  font-size: 11px;
+  font-weight: 800;
+  color: ${adaptive.grey700};
+  margin-bottom: 8px;
+`;
+
+const activityListStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const activityItemStyle = css`
+  font-size: 10px;
+  line-height: 1.3;
+  font-weight: 700;
+  color: ${adaptive.grey700};
+  background: rgba(255, 255, 255, 0.72);
+  border-radius: 8px;
+  padding: 6px 7px;
+`;
+
+const activityEmptyStyle = css`
+  font-size: 10px;
+  line-height: 1.4;
+  color: ${adaptive.grey400};
+`;
+
+const moteStyle = (left: number, delay: number, color: string) => css`
+  position: absolute;
+  left: ${left}%;
+  bottom: 4px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: ${color};
+  opacity: 0;
+  filter: blur(0.1px);
+  animation: ${driftMote} 3.2s ${delay}s ease-in-out infinite;
+`;
+
 const idleInfoStyle = css`
   background: ${adaptive.greyBackground};
   border-radius: 12px;
@@ -139,6 +635,68 @@ const idleValueStyle = css`
   color: ${adaptive.blue500};
 `;
 
+const boostPanelStyle = css`
+  background: #0f172a;
+  border-radius: 14px;
+  padding: 12px;
+  margin-bottom: 20px;
+  color: #ffffff;
+`;
+
+const boostPanelHeaderStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+const boostPanelTitleStyle = css`
+  font-size: 13px;
+  font-weight: 900;
+`;
+
+const boostPanelCountStyle = css`
+  font-size: 11px;
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.62);
+`;
+
+const boostListStyle = css`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  gap: 8px;
+`;
+
+const boostChipStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 9px 10px;
+`;
+
+const boostChipNameStyle = css`
+  font-size: 12px;
+  line-height: 1.25;
+  font-weight: 900;
+`;
+
+const boostChipDescStyle = css`
+  font-size: 10px;
+  line-height: 1.35;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.62);
+`;
+
+const boostEmptyStyle = css`
+  color: rgba(255, 255, 255, 0.56);
+  font-size: 12px;
+  font-weight: 700;
+`;
+
 const tierSectionStyle = css`
   margin-bottom: 20px;
 `;
@@ -148,30 +706,36 @@ const tierLabelStyle = css`
   font-weight: 600;
   color: ${adaptive.grey500};
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0;
   margin-bottom: 10px;
 `;
 
 const elementGridStyle = css`
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
+  gap: 12px;
 `;
 
 const elementCardBaseStyle = `
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-radius: 14px;
-  padding: 12px 6px 10px;
+  border-radius: 999px;
+  padding: 10px 6px 12px;
   gap: 5px;
   position: relative;
 `;
 
 const obtainedCardStyle = css`
   ${elementCardBaseStyle}
-  background: ${adaptive.background};
-  border: 1.5px solid ${adaptive.grey200};
+  min-height: 104px;
+  justify-content: center;
+  background:
+    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.95), rgba(246, 248, 251, 0.82) 58%, rgba(232, 238, 247, 0.88));
+  border: 1px solid rgba(49, 130, 246, 0.18);
+  box-shadow:
+    inset 0 1px 8px rgba(255, 255, 255, 0.9),
+    0 8px 18px rgba(49, 64, 84, 0.08);
   cursor: pointer;
   &:active {
     transform: scale(0.96);
@@ -197,8 +761,8 @@ const undiscoveredCardStyle = css`
 `;
 
 const spriteWrapStyle = css`
-  width: 56px;
-  height: 56px;
+  width: 52px;
+  height: 52px;
   flex-shrink: 0;
 `;
 
@@ -234,6 +798,113 @@ const spawnRateStyle = css`
   color: ${adaptive.grey400};
 `;
 
+const discoveryPanelStyle = css`
+  background: #101828;
+  border-radius: 16px;
+  padding: 14px;
+  color: #ffffff;
+  margin-bottom: 20px;
+`;
+
+const discoveryHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+`;
+
+const discoveryTitleStyle = css`
+  font-size: 14px;
+  font-weight: 800;
+`;
+
+const discoveryCountStyle = css`
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.65);
+`;
+
+const recipeTargetGridStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const recipeTargetStyle = css`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 10px 12px;
+`;
+
+const recipeFormulaStyle = css`
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  font-weight: 800;
+`;
+
+const recipeHintStyle = css`
+  margin-top: 3px;
+  color: rgba(255, 255, 255, 0.62);
+  font-size: 10px;
+  font-weight: 600;
+`;
+
+const recipeRewardStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 800;
+  color: #ffd166;
+`;
+
+const collectionHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 12px;
+  margin-bottom: 12px;
+`;
+
+const collectionTitleStyle = css`
+  font-size: 15px;
+  font-weight: 800;
+  color: ${adaptive.grey900};
+`;
+
+const resonanceBadgeStyle = css`
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  color: ${adaptive.grey500};
+  font-size: 10px;
+  font-weight: 700;
+`;
+
+const resonanceValueStyle = css`
+  color: ${adaptive.blue500};
+  font-size: 12px;
+  font-weight: 900;
+`;
+
+const emptyTargetStyle = css`
+  color: rgba(255, 255, 255, 0.62);
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 600;
+`;
+
 // ────────────────────────────────────────────────────────────
 // 상세 정보 패널
 // ────────────────────────────────────────────────────────────
@@ -363,6 +1034,54 @@ const detailCountBadgeStyle = css`
   color: ${adaptive.blue500};
 `;
 
+const loreBoxStyle = css`
+  background: #111827;
+  color: #ffffff;
+  border-radius: 14px;
+  padding: 12px 14px;
+  margin-bottom: 12px;
+`;
+
+const loreTitleStyle = css`
+  font-size: 12px;
+  font-weight: 900;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 5px;
+`;
+
+const loreTextStyle = css`
+  font-size: 13px;
+  line-height: 1.5;
+  font-weight: 700;
+`;
+
+const genealogyStyle = css`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 12px;
+`;
+
+const genealogyCardStyle = css`
+  background: ${adaptive.greyBackground};
+  border-radius: 12px;
+  padding: 10px 12px;
+`;
+
+const genealogyTitleStyle = css`
+  font-size: 11px;
+  font-weight: 900;
+  color: ${adaptive.grey500};
+  margin-bottom: 6px;
+`;
+
+const genealogyTextStyle = css`
+  font-size: 12px;
+  line-height: 1.45;
+  font-weight: 800;
+  color: ${adaptive.grey900};
+`;
+
 // ────────────────────────────────────────────────────────────
 // Tier labels
 // ────────────────────────────────────────────────────────────
@@ -381,6 +1100,38 @@ const TIER_LABELS: Record<number, string> = {
 
 type ElementData = (typeof elementsData)[number];
 
+interface ActivityEntry {
+  id: number;
+  text: string;
+}
+
+interface ActiveBoostSummary {
+  id: string;
+  name: string;
+  desc: string;
+  remainingMs: number;
+}
+
+function getBoostSummary(boostId: string, remainingMs: number): ActiveBoostSummary | null {
+  if (boostId === 'global_spawn_boost') {
+    return { id: boostId, name: '전체 생산 x2', desc: '모든 자동 생산 속도 적용 중', remainingMs };
+  }
+  if (boostId === 'gold_boost') {
+    return { id: boostId, name: '골드 수입 x2', desc: '모든 골드 수입 적용 중', remainingMs };
+  }
+  if (boostId.startsWith('tier_') && boostId.endsWith('_boost')) {
+    const tier = boostId.replace('tier_', '').replace('_boost', '');
+    return { id: boostId, name: `Tier ${tier} 생산 x2`, desc: `Tier ${tier} 원소 생산 속도 적용 중`, remainingMs };
+  }
+  if (boostId.endsWith('_boost')) {
+    const elementId = boostId.replace('_boost', '');
+    const el = elementsData.find((item) => item.id === elementId);
+    if (!el) return null;
+    return { id: boostId, name: `${el.name} 생산 x2`, desc: `${el.emoji} ${el.name} 원소 생산 속도 적용 중`, remainingMs };
+  }
+  return null;
+}
+
 interface DetailPanelProps {
   el: ElementData;
   count: number;
@@ -393,6 +1144,20 @@ function DetailPanel({ el, count, level, onClose }: DetailPanelProps) {
   const idleRate = calcEffectiveIdleRate(el.id, level);
   const isMaxLevel = level >= ENHANCE_MAX_LEVEL;
   const nextCost = isMaxLevel ? null : calcEnhanceCost(level);
+  const parentRecipe = recipesData.find((recipe) => recipe.result === el.id);
+  const childRecipes = recipesData.filter((recipe) => recipe.ingredients.includes(el.id));
+  const parentText = parentRecipe
+    ? parentRecipe.ingredients
+        .map((id) => elementsData.find((item) => item.id === id)?.name ?? id)
+        .join(' + ')
+    : '태초 원소';
+  const childText =
+    childRecipes.length > 0
+      ? childRecipes
+          .slice(0, 3)
+          .map((recipe) => elementsData.find((item) => item.id === recipe.result)?.name ?? recipe.result)
+          .join(' · ')
+      : '최종 계열';
 
   return (
     <div css={overlayStyle} onClick={onClose}>
@@ -418,6 +1183,22 @@ function DetailPanel({ el, count, level, onClose }: DetailPanelProps) {
           <span css={detailCountBadgeStyle}>×{count.toLocaleString()}</span>
         </div>
 
+        <div css={loreBoxStyle}>
+          <div css={loreTitleStyle}>도감 기록</div>
+          <div css={loreTextStyle}>{el.description}</div>
+        </div>
+
+        <div css={genealogyStyle}>
+          <div css={genealogyCardStyle}>
+            <div css={genealogyTitleStyle}>탄생 계보</div>
+            <div css={genealogyTextStyle}>{parentText}</div>
+          </div>
+          <div css={genealogyCardStyle}>
+            <div css={genealogyTitleStyle}>다음 가능성</div>
+            <div css={genealogyTextStyle}>{childText}</div>
+          </div>
+        </div>
+
         <div css={detailGridStyle}>
           <div css={detailStatCardStyle}>
             <div css={detailStatLabelStyle}>생산 속도</div>
@@ -469,10 +1250,19 @@ interface ElementCardProps {
   count: number;
   level: number;
   onSelect: (el: ElementData) => void;
+  isAutomated?: boolean;
   isTutorialTarget?: boolean;
 }
 
-const ElementCard = memo(function ElementCard({ el, state, count, level, onSelect, isTutorialTarget }: ElementCardProps) {
+const ElementCard = memo(function ElementCard({
+  el,
+  state,
+  count,
+  level,
+  onSelect,
+  isAutomated = true,
+  isTutorialTarget,
+}: ElementCardProps) {
   const spawnRate = calcSpawnRate(el.id, level);
 
   if (state === 'undiscovered') {
@@ -509,7 +1299,7 @@ const ElementCard = memo(function ElementCard({ el, state, count, level, onSelec
       </div>
       <span css={elementNameStyle}>{el.name}</span>
       <span css={elementCountStyle}>×{count.toLocaleString()}</span>
-      <span css={spawnRateStyle}>+{spawnRate.toFixed(2)}/s</span>
+      <span css={spawnRateStyle}>{isAutomated ? `+${spawnRate.toFixed(2)}/s` : '티어 대기'}</span>
     </div>
   );
 });
@@ -522,18 +1312,33 @@ export function ElementsScreen() {
   // 전체 store 구독 대신 필요한 slice만 selector로 구독 (불필요한 리렌더 방지)
   const gold = useGameStore((s) => s.gold);
   const elements = useGameStore((s) => s.elements);
+  const discoveredElements = useGameStore((s) => s.discoveredElements);
   const elementLevels = useGameStore((s) => s.elementLevels);
+  const spawnAccumulators = useGameStore((s) => s.spawnAccumulators);
+  const activeBoosts = useGameStore((s) => s.activeBoosts);
+  const prestigeGoldMultiplier = useGameStore((s) => s.prestigeGoldMultiplier);
+  const prestigeSpawnMultiplier = useGameStore((s) => s.prestigeSpawnMultiplier);
+  const permanentGoldMultiplier = useGameStore((s) => s.permanentGoldMultiplier);
+  const permanentSpawnMultiplier = useGameStore((s) => s.permanentSpawnMultiplier);
+  const dailyProgress = useGameStore((s) => s.dailyProgress);
+  const activeStorm = useGameStore((s) => s.activeStorm);
+  const claimDailyBonus = useGameStore((s) => s.claimDailyBonus);
+  const claimDailyMission = useGameStore((s) => s.claimDailyMission);
+  const harvestElement = useGameStore((s) => s.harvestElement);
   const [selectedEl, setSelectedEl] = useState<ElementData | null>(null);
+  const [activityLog, setActivityLog] = useState<ActivityEntry[]>([]);
   const { items: floatItems, add: addFloat } = useFloatingItems(1100);
   const prevElements = useRef<Record<string, number>>({});
   const prevGold = useRef<number>(-1);
   const floatCount = useRef<number>(0);
+  const activitySeq = useRef<number>(0);
 
   // 자동 수집 플로팅 이펙트: 원소 수 또는 골드 증가 감지
   useEffect(() => {
     const W = window.innerWidth;
     const H = window.innerHeight;
     let showed = 0;
+    const newActivities: ActivityEntry[] = [];
 
     // 원소 증가 감지 (idle tick에서 발생)
     for (const el of elementsData) {
@@ -551,6 +1356,10 @@ export function ElementsScreen() {
           });
           showed++;
         }
+        newActivities.push({
+          id: activitySeq.current++,
+          text: `${el.emoji} ${el.name} +${curr - prev}`,
+        });
       }
     }
     prevElements.current = { ...elements };
@@ -569,39 +1378,107 @@ export function ElementsScreen() {
           fontSize: 13,
         });
       }
+      newActivities.push({
+        id: activitySeq.current++,
+        text: `💰 골드 +${formatGold(gained)}`,
+      });
     }
     prevGold.current = gold;
+
+    if (newActivities.length > 0) {
+      setActivityLog((prev) => [...newActivities.reverse(), ...prev].slice(0, 5));
+    }
   }, [elements, gold]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const totalElements = elementsData.length;
+  const discoveredElementIds = getDiscoveredElementIds(discoveredElements, elements);
+  const tierAutomation = calcTierAutomationStatus(discoveredElementIds);
 
-  const obtainedElements = elementsData.filter(
-    (el) => (elements[el.id] ?? 0) > 0
+  const discoveredElementList = elementsData.filter((el) =>
+    discoveredElementIds.includes(el.id)
   );
 
-  const unlockedElements = elementsData.filter((el) =>
-    isElementUnlocked(el.id, elements)
+  const autoProducerElements = discoveredElementList.filter(
+    (el) => el.tier <= tierAutomation.unlockedTier
   );
 
-  const totalSpawnPerSec = obtainedElements.reduce(
-    (sum, el) => sum + calcSpawnRate(el.id, elementLevels[el.id] ?? 0),
+  const craftableRecipes = recipesData.filter(
+    (recipe) => !discoveredElementIds.includes(recipe.result) && isElementUnlocked(recipe.result, elements)
+  );
+
+  const resonance = calcResonanceBonuses(elements);
+  const now = Date.now();
+  const effectiveSpawnRate = (el: ElementData) => {
+    const boostId = el.id + '_boost';
+    const boostMultiplier = (activeBoosts[boostId] ?? 0) > now ? 2.0 : 1.0;
+    const globalSpawnMultiplier = (activeBoosts.global_spawn_boost ?? 0) > now ? 2.0 : 1.0;
+    const tierBoostMultiplier = (activeBoosts[`tier_${el.tier}_boost`] ?? 0) > now ? 2.0 : 1.0;
+    const stormMultiplier =
+      activeStorm && activeStorm.expiresAt > now && activeStorm.elementId === el.id ? 5.0 : 1.0;
+    return (
+      calcSpawnRate(el.id, elementLevels[el.id] ?? 0) *
+      boostMultiplier *
+      globalSpawnMultiplier *
+      tierBoostMultiplier *
+      stormMultiplier *
+      prestigeSpawnMultiplier *
+      permanentSpawnMultiplier *
+      resonance.spawnMultiplier
+    );
+  };
+  const goldBoostMultiplier = (activeBoosts.gold_boost ?? 0) > now ? 2.0 : 1.0;
+  const effectiveGoldRate = (el: ElementData) =>
+    calcEffectiveIdleRate(el.id, elementLevels[el.id] ?? 0) *
+    goldBoostMultiplier *
+    prestigeGoldMultiplier *
+    permanentGoldMultiplier *
+    resonance.goldMultiplier;
+
+  const totalSpawnPerSec = autoProducerElements.reduce(
+    (sum, el) => sum + effectiveSpawnRate(el),
     0
   );
 
-  const totalGoldPerSec = obtainedElements.reduce(
-    (sum, el) => sum + calcEffectiveIdleRate(el.id, elementLevels[el.id] ?? 0),
+  const totalGoldPerSec = autoProducerElements.reduce(
+    (sum, el) => sum + effectiveGoldRate(el),
     0
   );
 
+  const activeProducers = autoProducerElements
+    .slice()
+    .sort((a, b) => {
+      const countDiff = (elements[b.id] ?? 0) - (elements[a.id] ?? 0);
+      if (countDiff !== 0) return countDiff;
+      return b.tier - a.tier;
+    })
+    .slice(0, 4);
+
+  const sceneStatus = ['채집 중', '응축 중', '정제 중'][Math.floor(Date.now() / 1000) % 3];
+  const moteColors = activeProducers.length > 0
+    ? activeProducers.map((el) => el.color)
+    : ['#3182F6', '#FFB020', '#00C853'];
+  const activeBoostSummaries = Object.entries(activeBoosts)
+    .map(([boostId, expiresAt]) => getBoostSummary(boostId, expiresAt - now))
+    .filter((summary): summary is ActiveBoostSummary => summary !== null && summary.remainingMs > 0)
+    .sort((a, b) => a.remainingMs - b.remainingMs);
+
   const tierGroups = [1, 2, 3, 4, 5].map((tier) => ({
     tier,
-    items: elementsData.filter((el) => el.tier === tier),
-  }));
+    items: discoveredElementList.filter((el) => el.tier === tier),
+  })).filter(({ items }) => items.length > 0);
 
   // 첫 번째 obtained 원소 ID (튜토리얼 스포트라이트용)
-  const firstObtainedId = obtainedElements[0]?.id ?? null;
+  const firstObtainedId = discoveredElementList[0]?.id ?? null;
 
-  const unlockRatio = obtainedElements.length / totalElements;
+  const unlockRatio = discoveredElementList.length / totalElements;
+  const dailyBonusGold = 100 + Math.min(6, dailyProgress.streak) * 25;
+  const stormElement = activeStorm
+    ? elementsData.find((el) => el.id === activeStorm.elementId)
+    : null;
+  const stormActive = Boolean(activeStorm && activeStorm.expiresAt > now);
+  const stormRemainingMs = activeStorm
+    ? (stormActive ? activeStorm.expiresAt - now : activeStorm.nextAt - now)
+    : 0;
 
   return (
     <div css={containerStyle}>
@@ -615,7 +1492,7 @@ export function ElementsScreen() {
         <div css={progressHeaderStyle}>
           <span css={progressLabelStyle}>원소 해금 진행</span>
           <span css={progressCountStyle}>
-            {obtainedElements.length} / {totalElements}
+            {discoveredElementList.length} / {totalElements}
           </span>
         </div>
         <div css={progressTrackStyle}>
@@ -623,6 +1500,200 @@ export function ElementsScreen() {
         </div>
       </div>
 
+      <section css={dailyPanelStyle}>
+        <div css={dailyHeaderStyle}>
+          <div css={dailyTitleStyle}>오늘의 창조 루틴</div>
+          <div css={dailyStreakStyle}>연속 {dailyProgress.streak}일</div>
+        </div>
+        <div css={dailyBonusRowStyle}>
+          <div css={dailyBonusTextStyle}>
+            <div css={dailyBonusNameStyle}>데일리 보너스</div>
+            <div css={dailyBonusDescStyle}>
+              오늘 접속 보상 💰{dailyBonusGold.toLocaleString()}G
+            </div>
+          </div>
+          <button
+            css={compactButtonStyle(!dailyProgress.bonusClaimed)}
+            onClick={claimDailyBonus}
+            disabled={dailyProgress.bonusClaimed}
+          >
+            {dailyProgress.bonusClaimed ? '수령 완료' : '받기'}
+          </button>
+        </div>
+        <div css={missionListStyle}>
+          {DAILY_MISSIONS.map((mission) => {
+            const current = getDailyMissionProgress(mission, dailyProgress);
+            const done = current >= mission.target;
+            const claimed = dailyProgress.claimedMissionIds.includes(mission.id);
+            return (
+              <div key={mission.id} css={missionCardStyle(done, claimed)}>
+                <div css={missionNameStyle}>{mission.title}</div>
+                <div css={missionDescStyle}>{mission.description}</div>
+                <div css={missionProgressStyle}>
+                  <div css={missionProgressFillStyle(current / mission.target)} />
+                </div>
+                <div css={missionFooterStyle}>
+                  <span>
+                    {Math.min(current, mission.target).toLocaleString()}/{mission.target.toLocaleString()}
+                    {' · '}
+                    💰{mission.rewardGold}
+                  </span>
+                  <button
+                    css={compactButtonStyle(done && !claimed)}
+                    onClick={() => claimDailyMission(mission.id)}
+                    disabled={!done || claimed}
+                  >
+                    {claimed ? '완료' : '수령'}
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {activeStorm && stormElement && (
+        <section css={stormPanelStyle(stormActive)}>
+          <div>
+            <div css={stormTitleStyle}>
+              {stormActive ? 'Element Storm 진행 중' : '다음 Element Storm'}
+            </div>
+            <div css={stormDescStyle}>
+              {stormElement.emoji} {stormElement.name}
+              {stormActive ? ' 생산 속도 x5' : ' 폭풍 예보'}
+            </div>
+          </div>
+          <div css={stormBadgeStyle}>
+            {stormActive ? '남은 시간 ' : '시작까지 '}
+            {formatRemaining(stormRemainingMs)}
+          </div>
+        </section>
+      )}
+
+      <section css={tierRewardPanelStyle}>
+        <div css={tierRewardHeaderStyle}>
+          <div css={tierRewardTitleStyle}>자동 생산 티어 보상</div>
+          <div css={tierRewardBadgeStyle}>T{tierAutomation.unlockedTier} 생산 중</div>
+        </div>
+        <div css={tierRewardTrackStyle}>
+          {TIER_AUTOMATION_GOALS.map((goal) => {
+            const current = countDiscoveredByTier(discoveredElementIds, goal.requiredTier);
+            const unlocked = tierAutomation.unlockedTier >= goal.tier;
+            const ratio = current / goal.requiredCount;
+
+            return (
+              <div key={goal.tier} css={tierRewardStepStyle(unlocked)}>
+                <div css={tierRewardStepNameStyle}>
+                  {unlocked ? '해금됨' : `목표 T${goal.tier}`}
+                </div>
+                <div css={tierRewardStepTextStyle}>
+                  T{goal.requiredTier} 발견 {Math.min(current, goal.requiredCount)}/{goal.requiredCount}
+                  {' · '}
+                  보상 {goal.rewardGold}G
+                </div>
+                <div css={tierRewardProgressStyle}>
+                  <div css={tierRewardProgressFillStyle(ratio, unlocked)} />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      <section css={sceneStyle} aria-label="자동 생산 현장">
+        {moteColors.slice(0, 4).map((color, i) => (
+          <span key={`${color}-${i}`} css={moteStyle(16 + i * 22, i * 0.45, color)} />
+        ))}
+        <div css={sceneHeaderStyle}>
+          <div>
+            <div css={sceneTitleStyle}>원소 작업장</div>
+            <div css={sceneSubtitleStyle}>
+              T{tierAutomation.unlockedTier} 이하 발견 원소 {autoProducerElements.length}종이 생성됩니다
+            </div>
+          </div>
+          <div css={sceneStatusStyle}>
+            <span css={statusDotStyle} />
+            <span>{sceneStatus}</span>
+          </div>
+        </div>
+
+        <div css={sceneBodyStyle}>
+          <div css={producerGridStyle}>
+            {activeProducers.map((el) => {
+              const rate = effectiveSpawnRate(el);
+              const progress = spawnAccumulators[el.id] ?? 0;
+              const nextSec = rate > 0 ? (1 - progress) / rate : Infinity;
+              const active = rate > 0;
+              const harvestReady = active && progress >= 0.75;
+
+              return (
+                <div
+                  key={el.id}
+                  css={producerLaneStyle(el.color, active, harvestReady)}
+                  onClick={() => {
+                    if (!harvestReady) return;
+                    const result = harvestElement(el.id);
+                    if (!result.success) return;
+                    addFloat({
+                      text: `${el.emoji} +${result.count} 수확`,
+                      x: window.innerWidth * 0.5,
+                      y: window.innerHeight * 0.28,
+                      color: el.color,
+                      fontSize: 16,
+                    });
+                    setActivityLog((prev) => [
+                      {
+                        id: activitySeq.current++,
+                        text: `${el.emoji} ${el.name} 직접 수확 +${result.count}`,
+                      },
+                      ...prev,
+                    ].slice(0, 5));
+                  }}
+                >
+                  <div css={producerSpriteStyle(active)}>
+                    <CharacterSprite
+                      elementId={el.id}
+                      elementColor={el.color}
+                      tier={el.tier}
+                      size={42}
+                      state={(elements[el.id] ?? 0) > 0 ? 'obtained' : 'locked'}
+                    />
+                  </div>
+                  <div css={producerInfoStyle}>
+                    <div css={producerNameStyle}>
+                      <span>{el.name}</span>
+                      <span>×{formatGold(elements[el.id] ?? 0)}</span>
+                    </div>
+                    <div css={producerRateStyle}>+{rate.toFixed(2)}/s</div>
+                    <div css={producerTrackStyle}>
+                      <div css={producerFillStyle(progress, el.color)} />
+                    </div>
+                    <div css={producerNextStyle}>
+                      {harvestReady ? '탭해서 보너스 수확' : `다음 생성 ${formatSeconds(nextSec)}`}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <aside css={activityPanelStyle}>
+            <div css={activityTitleStyle}>최근 획득</div>
+            {activityLog.length > 0 ? (
+              <div css={activityListStyle}>
+                {activityLog.map((entry) => (
+                  <div key={entry.id} css={activityItemStyle}>
+                    {entry.text}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div css={activityEmptyStyle}>잠시 후 생산 기록이 표시됩니다.</div>
+            )}
+          </aside>
+        </div>
+      </section>
+
       {/* 방치 수입 요약 */}
       <div css={idleInfoStyle}>
         <div css={idleStatStyle}>
@@ -635,11 +1706,82 @@ export function ElementsScreen() {
         </div>
         <div css={idleStatStyle}>
           <span css={idleLabelStyle}>발견 가능</span>
-          <span css={idleValueStyle}>{unlockedElements.length}종</span>
+          <span css={idleValueStyle}>{craftableRecipes.length}종</span>
         </div>
       </div>
 
-      {/* 티어별 원소 그리드 */}
+      <section css={boostPanelStyle}>
+        <div css={boostPanelHeaderStyle}>
+          <div css={boostPanelTitleStyle}>상점 효과 적용 현황</div>
+          <div css={boostPanelCountStyle}>{activeBoostSummaries.length}개 활성</div>
+        </div>
+        {activeBoostSummaries.length > 0 ? (
+          <div css={boostListStyle}>
+            {activeBoostSummaries.map((boost) => (
+              <div key={boost.id} css={boostChipStyle}>
+                <div css={boostChipNameStyle}>
+                  {boost.name} · {formatBoostTime(boost.remainingMs)}
+                </div>
+                <div css={boostChipDescStyle}>{boost.desc}</div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div css={boostEmptyStyle}>상점에서 구매한 시간제 효과가 여기에 표시됩니다.</div>
+        )}
+      </section>
+
+      <section css={discoveryPanelStyle}>
+        <div css={discoveryHeaderStyle}>
+          <div css={discoveryTitleStyle}>다음 발견 목표</div>
+          <div css={discoveryCountStyle}>{craftableRecipes.length}개 조합 가능</div>
+        </div>
+        {craftableRecipes.length > 0 ? (
+          <div css={recipeTargetGridStyle}>
+            {craftableRecipes.slice(0, 4).map((recipe) => {
+              const left = elementsData.find((el) => el.id === recipe.ingredients[0]);
+              const right = elementsData.find((el) => el.id === recipe.ingredients[1]);
+              const result = elementsData.find((el) => el.id === recipe.result);
+              if (!left || !right || !result) return null;
+
+              return (
+                <div key={recipe.id} css={recipeTargetStyle}>
+                  <div>
+                    <div css={recipeFormulaStyle}>
+                      <span>{left.emoji}</span>
+                      <span>+</span>
+                      <span>{right.emoji}</span>
+                      <span>→</span>
+                      <span>{result.emoji}</span>
+                      <span>{result.name}</span>
+                    </div>
+                    <div css={recipeHintStyle}>
+                      합성하면 작업장에 새 생산원이 추가됩니다
+                    </div>
+                  </div>
+                  <div css={recipeRewardStyle}>+{recipe.tier * 10}G</div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div css={emptyTargetStyle}>
+            보유 원소를 더 모으거나 합성 화면에서 새 조합을 찾아보세요.
+          </div>
+        )}
+      </section>
+
+      <div css={collectionHeaderStyle}>
+        <div css={collectionTitleStyle}>보유 원소 궤도</div>
+        <div css={resonanceBadgeStyle}>
+          <span>상위 원소 공명</span>
+          <span css={resonanceValueStyle}>
+            생산 x{resonance.spawnMultiplier.toFixed(2)} · 골드 x{resonance.goldMultiplier.toFixed(2)}
+          </span>
+        </div>
+      </div>
+
+      {/* 티어별 보유 원소 */}
       {tierGroups.map(({ tier, items }) => (
         <div key={tier} css={tierSectionStyle}>
           <div css={tierLabelStyle}>{TIER_LABELS[tier]}</div>
@@ -648,10 +1790,11 @@ export function ElementsScreen() {
               <ElementCard
                 key={el.id}
                 el={el}
-                state={getElementState(el.id, elements)}
+                state="obtained"
                 count={elements[el.id] ?? 0}
                 level={elementLevels[el.id] ?? 0}
                 onSelect={setSelectedEl}
+                isAutomated={el.tier <= tierAutomation.unlockedTier}
                 isTutorialTarget={el.id === firstObtainedId}
               />
             ))}
diff --git a/src/components/screens/EvolutionScreen.tsx b/src/components/screens/EvolutionScreen.tsx
index 086d095..afed9f2 100644
--- a/src/components/screens/EvolutionScreen.tsx
+++ b/src/components/screens/EvolutionScreen.tsx
@@ -9,6 +9,7 @@ import {
 } from '../../store/useGameStore';
 import { FloatingOverlay } from '../FloatingOverlay';
 import { trackGameEvent } from '../../platform/analytics';
+import { showRewardedAd } from '../../platform/ads';
 import { useFloatingItems } from '../../hooks/useFloatingItems';
 
 const containerStyle = css`
@@ -144,6 +145,27 @@ const enhanceButtonStyle = (canEnhance: boolean) => css`
   }
 `;
 
+const fundingButtonStyle = (enabled: boolean) => css`
+  width: 100%;
+  padding: 9px;
+  margin-top: 8px;
+  background: ${enabled ? '#101828' : '#f0f0f0'};
+  color: ${enabled ? '#ffffff' : '#a0a0a0'};
+  border: none;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: ${enabled ? 'pointer' : 'default'};
+`;
+
+const fundingLimitStyle = css`
+  margin-top: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #8b8b8b;
+  text-align: center;
+`;
+
 const emptyStyle = css`
   text-align: center;
   padding: 60px 20px;
@@ -153,8 +175,16 @@ const emptyStyle = css`
 const LEVEL_LABELS = ['기본', '강화 I', '강화 II', '강화 III', '강화 IV', '강화 V (최대)'];
 
 export function EvolutionScreen() {
-  const { gold, elements, elementLevels, enhance } = useGameStore();
+  const {
+    gold,
+    elements,
+    elementLevels,
+    enhance,
+    adRewardProgress,
+    claimAdGoldFunding,
+  } = useGameStore();
   const [flashedId, setFlashedId] = useState<string | null>(null);
+  const [fundingId, setFundingId] = useState<string | null>(null);
   const { items: floatItems, add: addFloat } = useFloatingItems(1000);
 
   const ownedElements = elementsData.filter((el) => (elements[el.id] ?? 0) > 0);
@@ -191,6 +221,33 @@ export function EvolutionScreen() {
     }
   };
 
+  const handleGoldFunding = async (elementId: string, cost: number) => {
+    if (fundingId || adRewardProgress.goldFundingUses >= 5) return;
+    const missingGold = Math.max(0, cost - useGameStore.getState().gold);
+    if (missingGold <= 0) return;
+
+    setFundingId(elementId);
+    try {
+      const adResult = await showRewardedAd();
+      if (adResult.rewarded && claimAdGoldFunding(missingGold)) {
+        addFloat({
+          text: `+${missingGold} 💰`,
+          x: window.innerWidth / 2 - 28,
+          y: window.innerHeight * 0.38,
+          color: '#F7C12A',
+          fontSize: 15,
+        });
+        trackGameEvent('rewarded_ad_claimed', {
+          placement: 'enhance_gold_funding',
+          reward_gold: missingGold,
+          element_id: elementId,
+        });
+      }
+    } finally {
+      setFundingId(null);
+    }
+  };
+
   if (ownedElements.length === 0) {
     return (
       <div css={containerStyle}>
@@ -260,6 +317,24 @@ export function EvolutionScreen() {
                       ? `🔒 골드 부족 (${cost - gold}G 필요)`
                       : `🔒 강화 불가`}
               </button>
+              {!isMax && !canEnhance && gold < cost && (
+                <>
+                  <button
+                    css={fundingButtonStyle(!fundingId && adRewardProgress.goldFundingUses < 5)}
+                    onClick={() => handleGoldFunding(el.id, cost)}
+                    disabled={Boolean(fundingId) || adRewardProgress.goldFundingUses >= 5}
+                  >
+                    {fundingId === el.id
+                      ? '광고 확인 중...'
+                      : adRewardProgress.goldFundingUses >= 5
+                        ? '오늘 보충 한도 완료'
+                        : `광고 보고 ${cost - gold}G 보충`}
+                  </button>
+                  <div css={fundingLimitStyle}>
+                    오늘 골드 보충 {adRewardProgress.goldFundingUses}/5
+                  </div>
+                </>
+              )}
             </div>
           </div>
         );
diff --git a/src/components/screens/FusionScreen.tsx b/src/components/screens/FusionScreen.tsx
index 6bc255e..114bd2b 100644
--- a/src/components/screens/FusionScreen.tsx
+++ b/src/components/screens/FusionScreen.tsx
@@ -6,6 +6,9 @@ import { useGameStore } from '../../store/useGameStore';
 import { FloatingOverlay } from '../FloatingOverlay';
 import { useFloatingItems } from '../../hooks/useFloatingItems';
 import { trackGameEvent } from '../../platform/analytics';
+import { showRewardedAd } from '../../platform/ads';
+import { DiscoveryHero } from '../DiscoveryHero';
+import { playRaritySfx, vibrate } from '../../lib/sfx';
 
 // TDS 색상 팔레트
 const tds = {
@@ -189,6 +192,23 @@ const previewBannerStyle = css`
   color: ${tds.blue};
 `;
 
+const comboBarStyle = (active: boolean) => css`
+  background: ${active ? 'linear-gradient(135deg, #101828, #27364f)' : tds.gray100};
+  color: ${active ? '#ffffff' : tds.gray500};
+  border-radius: 12px;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 800;
+`;
+
+const comboValueStyle = css`
+  color: #ffd166;
+`;
+
 const fuseButtonStyle = (canFuse: boolean) => css`
   width: 100%;
   padding: 14px;
@@ -271,6 +291,30 @@ const errorBannerStyle = css`
   margin-bottom: 10px;
 `;
 
+const assistBannerStyle = css`
+  background: ${tds.goldLight};
+  border: 1px solid ${tds.gold};
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: 12px;
+  color: ${tds.gray900};
+  font-weight: 800;
+  text-align: center;
+  margin-bottom: 10px;
+`;
+
+const assistButtonStyle = (enabled: boolean) => css`
+  margin-top: 8px;
+  border: none;
+  border-radius: 9px;
+  background: ${enabled ? '#101828' : tds.gray200};
+  color: ${enabled ? tds.white : tds.gray500};
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: ${enabled ? 'pointer' : 'default'};
+`;
+
 // ─── 인벤토리 섹션 ──────────────────────────────────────────────────────────
 
 const inventorySectionStyle = css`
@@ -389,7 +433,17 @@ const shineBadgeStyle = css`
 // ─── 컴포넌트 ────────────────────────────────────────────────────────────────
 
 export function FusionScreen() {
-  const { elements, fuse } = useGameStore();
+  const {
+    elements,
+    discoveredElements,
+    comboCount,
+    comboExpiresAt,
+    sfxEnabled,
+    hapticEnabled,
+    adRewardProgress,
+    claimAdFusionAssist,
+    fuse,
+  } = useGameStore();
   const [slot1, setSlot1] = useState<string | null>(null);
   const [slot2, setSlot2] = useState<string | null>(null);
   const [selectingSlot, setSelectingSlot] = useState<1 | 2 | null>(null);
@@ -400,8 +454,22 @@ export function FusionScreen() {
     message?: string;
   } | null>(null);
   const [isFusing, setIsFusing] = useState(false);
+  const [assistLoading, setAssistLoading] = useState(false);
+  const [assistMessage, setAssistMessage] = useState<string | null>(null);
   const [fuseRarity, setFuseRarity] = useState<string>('common');
+  const [hero, setHero] = useState<{
+    elementId: string;
+    name: string;
+    color: string;
+    tier: number;
+    rarity: string;
+    discoveredCount: number;
+    isLucky: boolean;
+  } | null>(null);
   const { items: floatItems, add: addFloat } = useFloatingItems(1100);
+  const comboRemainingSec = Math.max(0, Math.ceil((comboExpiresAt - Date.now()) / 1000));
+  const comboMultiplier = comboCount >= 10 ? 3 : comboCount >= 6 ? 2 : comboCount >= 3 ? 1.5 : 1;
+  const comboActive = comboRemainingSec > 0 && comboCount > 0;
 
   // 보유 중인 원소 목록 (보유량 > 0)
   const ownedElements = elementsData.filter((el) => (elements[el.id] ?? 0) > 0);
@@ -416,10 +484,49 @@ export function FusionScreen() {
   };
 
   const matchingRecipe = getMatchingRecipe();
+  const sameSelectedElement = slot1 !== null && slot1 === slot2;
   const canFuse =
     !!matchingRecipe &&
-    (elements[slot1 ?? ''] ?? 0) > 0 &&
-    (elements[slot2 ?? ''] ?? 0) > 0;
+    (sameSelectedElement
+      ? (elements[slot1 ?? ''] ?? 0) >= 2
+      : (elements[slot1 ?? ''] ?? 0) > 0 && (elements[slot2 ?? ''] ?? 0) > 0);
+
+  const findAssistRecipe = () =>
+    recipesData.find((recipe) => {
+      const [first, second] = recipe.ingredients;
+      const same = first === second;
+      if (same) return (elements[first] ?? 0) >= 2;
+      return (elements[first] ?? 0) > 0 && (elements[second] ?? 0) > 0;
+    });
+
+  const handleFusionAssist = async () => {
+    if (assistLoading || adRewardProgress.fusionAssistUses >= 5) return;
+    const recipe = findAssistRecipe();
+    if (!recipe) {
+      setAssistMessage('추천할 수 있는 조합이 아직 없습니다. 원소를 더 모아보세요.');
+      return;
+    }
+
+    setAssistLoading(true);
+    try {
+      const adResult = await showRewardedAd();
+      if (adResult.rewarded && claimAdFusionAssist()) {
+        setSlot1(recipe.ingredients[0]);
+        setSlot2(recipe.ingredients[1]);
+        setSelectingSlot(null);
+        const resultEl = elementMap[recipe.result];
+        setAssistMessage(`${resultEl?.emoji ?? '✨'} ${resultEl?.name ?? '새 원소'} 조합을 슬롯에 넣었습니다.`);
+        setLastResult(null);
+        trackGameEvent('rewarded_ad_claimed', {
+          placement: 'fusion_assist',
+          recipe_id: recipe.id,
+          result_id: recipe.result,
+        });
+      }
+    } finally {
+      setAssistLoading(false);
+    }
+  };
 
   const handleFuse = () => {
     if (!slot1 || !slot2) return;
@@ -430,21 +537,59 @@ export function FusionScreen() {
       setFuseRarity(rarity);
       setIsFusing(true);
       setTimeout(() => setIsFusing(false), 750);
+      playRaritySfx(rarity, sfxEnabled);
+      vibrate(rarity === 'legendary' ? [80, 40, 80] : 50, hapticEnabled);
+      if (rarity === 'legendary') {
+        window.dispatchEvent(new CustomEvent('legendaryImpact'));
+      }
 
       // 골드 획득 플로팅 텍스트
       const cx = window.innerWidth / 2 - 30;
       const cy = window.innerHeight * 0.45;
       addFloat({ text: `+${result.goldGained} 💰`, x: cx + (Math.random() - 0.5) * 60, y: cy, color: tds.gold, fontSize: 14 });
+      if (result.comboMultiplier && result.comboMultiplier > 1) {
+        addFloat({
+          text: `${result.comboCount} COMBO x${result.comboMultiplier}`,
+          x: cx + (Math.random() - 0.5) * 80,
+          y: cy - 28,
+          color: '#FFD166',
+          fontSize: 15,
+        });
+      }
+      if (result.isLucky) {
+        addFloat({
+          text: '🍀 LUCKY!',
+          x: cx + (Math.random() - 0.5) * 80,
+          y: cy - 54,
+          color: '#22C55E',
+          fontSize: 16,
+        });
+      }
 
       trackGameEvent('fusion_completed', {
         result_id: result.resultId,
         result_name: resultEl?.name ?? '',
         result_tier: rarity,
         gold_gained: result.goldGained ?? 0,
+        combo_count: result.comboCount ?? 1,
+        combo_multiplier: result.comboMultiplier ?? 1,
+        lucky: result.isLucky ?? false,
         ingredient_1: slot1,
         ingredient_2: slot2,
       });
 
+      if (result.isNewDiscovery && resultEl) {
+        setHero({
+          elementId: result.resultId,
+          name: resultEl.name,
+          color: resultEl.color,
+          tier: resultEl.tier,
+          rarity,
+          discoveredCount: discoveredElements.length + 1,
+          isLucky: result.isLucky ?? false,
+        });
+      }
+
       setLastResult({
         type: 'success',
         resultId: result.resultId,
@@ -461,6 +606,7 @@ export function FusionScreen() {
             ? '⚠️ 알 수 없는 조합입니다'
             : '⚠️ 원소가 부족합니다',
       });
+      vibrate(35, hapticEnabled);
     }
     // 3초 후 피드백 초기화
     setTimeout(() => setLastResult(null), 3000);
@@ -497,6 +643,12 @@ export function FusionScreen() {
 
       {/* ── 합성 패널 ── */}
       <div css={fusionPanelStyle}>
+        <div css={comboBarStyle(comboActive)}>
+          <span>합성 콤보</span>
+          <span css={comboValueStyle}>
+            {comboActive ? `${comboCount} COMBO · x${comboMultiplier} · ${comboRemainingSec}s` : '8초 안에 연속 합성'}
+          </span>
+        </div>
         {/* 슬롯 */}
         <div css={slotsRowStyle}>
           <div
@@ -556,16 +708,32 @@ export function FusionScreen() {
             </span>
             <div css={resultTextStyle}>
               <div css={resultNameStyle}>
-                {elementMap[lastResult.resultId]?.name} 합성 성공!
+                {lastResult.resultId && elementMap[lastResult.resultId]?.name} 합성 성공!
               </div>
               <div css={resultGoldStyle}>+{lastResult.goldGained} Gold 획득</div>
             </div>
-            <span css={shineBadgeStyle}>NEW</span>
+            <span css={shineBadgeStyle}>
+              {lastResult.resultId && elementMap[lastResult.resultId]?.rarity === 'legendary' ? 'LEGEND' : 'NEW'}
+            </span>
           </div>
         )}
         {lastResult?.type === 'error' && (
-          <div css={errorBannerStyle}>{lastResult.message}</div>
+          <div css={errorBannerStyle}>
+            <div>{lastResult.message}</div>
+            <button
+              css={assistButtonStyle(!assistLoading && adRewardProgress.fusionAssistUses < 5)}
+              onClick={handleFusionAssist}
+              disabled={assistLoading || adRewardProgress.fusionAssistUses >= 5}
+            >
+              {assistLoading
+                ? '광고 확인 중...'
+                : adRewardProgress.fusionAssistUses >= 5
+                  ? '오늘 힌트 한도 완료'
+                  : '광고 보고 추천 조합'}
+            </button>
+          </div>
         )}
+        {assistMessage && <div css={assistBannerStyle}>{assistMessage}</div>}
 
         {/* 합성 버튼 + 파티클 버스트 */}
         <div css={fuseButtonWrapStyle}>
@@ -657,6 +825,19 @@ export function FusionScreen() {
           </div>
         )}
       </div>
+
+      {hero && (
+        <DiscoveryHero
+          elementId={hero.elementId}
+          name={hero.name}
+          color={hero.color}
+          tier={hero.tier}
+          rarity={hero.rarity}
+          discoveredCount={hero.discoveredCount}
+          isLucky={hero.isLucky}
+          onClose={() => setHero(null)}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/screens/SettingsScreen.tsx b/src/components/screens/SettingsScreen.tsx
index 96a1322..580a5ed 100644
--- a/src/components/screens/SettingsScreen.tsx
+++ b/src/components/screens/SettingsScreen.tsx
@@ -215,7 +215,18 @@ function Toggle({ enabled, onToggle }: { enabled: boolean; onToggle: () => void
 type ResetStep = 'idle' | 'confirm1' | 'confirm2';
 
 export function SettingsScreen() {
-  const { language, bgmEnabled, lastTickAt, setLanguage, setBgmEnabled, resetGame } = useGameStore();
+  const {
+    language,
+    bgmEnabled,
+    sfxEnabled,
+    hapticEnabled,
+    lastTickAt,
+    setLanguage,
+    setBgmEnabled,
+    setSfxEnabled,
+    setHapticEnabled,
+    resetGame,
+  } = useGameStore();
   const [resetStep, setResetStep] = useState<ResetStep>('idle');
 
   const lastSavedDate = new Date(lastTickAt);
@@ -262,12 +273,20 @@ export function SettingsScreen() {
 
         {/* 사운드 설정 */}
         <div css={sectionStyle}>
-          <p css={sectionTitleStyle}>사운드</p>
+          <p css={sectionTitleStyle}>사운드와 반응</p>
           <div css={cardStyle}>
             <div css={rowStyle}>
               <span css={rowLabelStyle}>BGM</span>
               <Toggle enabled={bgmEnabled} onToggle={() => setBgmEnabled(!bgmEnabled)} />
             </div>
+            <div css={rowStyle}>
+              <span css={rowLabelStyle}>효과음</span>
+              <Toggle enabled={sfxEnabled} onToggle={() => setSfxEnabled(!sfxEnabled)} />
+            </div>
+            <div css={rowStyle}>
+              <span css={rowLabelStyle}>햅틱 진동</span>
+              <Toggle enabled={hapticEnabled} onToggle={() => setHapticEnabled(!hapticEnabled)} />
+            </div>
           </div>
         </div>
 
diff --git a/src/components/screens/ShopScreen.tsx b/src/components/screens/ShopScreen.tsx
index e30589d..704c8a6 100644
--- a/src/components/screens/ShopScreen.tsx
+++ b/src/components/screens/ShopScreen.tsx
@@ -4,9 +4,12 @@ import { adaptive } from '../../styles/adaptive';
 import { rarityGradient } from '../../styles/gameColors';
 import { useGameStore, isElementUnlocked } from '../../store/useGameStore';
 import { trackGameEvent } from '../../platform/analytics';
+import { showRewardedAd } from '../../platform/ads';
 import elementsData from '../../data/elements.json';
+import recipesData from '../../data/recipes.json';
 
 const BOOST_DURATION_SEC = 30;
+const ADVANCED_BOOST_DURATION_SEC = 45;
 
 const containerStyle = css`
   padding: 24px 20px;
@@ -34,6 +37,88 @@ const goldRowStyle = css`
   color: #5a3200;
 `;
 
+const rewardSectionStyle = css`
+  background: #101828;
+  color: #ffffff;
+  border-radius: 18px;
+  padding: 16px;
+  margin-bottom: 18px;
+  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
+`;
+
+const rewardHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+`;
+
+const rewardTitleStyle = css`
+  font-size: 15px;
+  font-weight: 900;
+`;
+
+const rewardLimitStyle = css`
+  font-size: 11px;
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.58);
+  white-space: nowrap;
+`;
+
+const rewardGridStyle = css`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+
+  @media (max-width: 520px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const rewardCardStyle = css`
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 14px;
+  padding: 12px;
+`;
+
+const rewardNameStyle = css`
+  font-size: 13px;
+  font-weight: 900;
+  margin-bottom: 4px;
+`;
+
+const rewardDescStyle = css`
+  font-size: 11px;
+  line-height: 1.4;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.64);
+  margin-bottom: 10px;
+`;
+
+const rewardButtonStyle = (enabled: boolean) => css`
+  width: 100%;
+  border: none;
+  border-radius: 10px;
+  background: ${enabled ? '#ffffff' : 'rgba(255, 255, 255, 0.14)'};
+  color: ${enabled ? '#101828' : 'rgba(255, 255, 255, 0.52)'};
+  padding: 10px 12px;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: ${enabled ? 'pointer' : 'default'};
+`;
+
+const rewardResultStyle = css`
+  margin-top: 10px;
+  border-radius: 10px;
+  background: rgba(34, 197, 94, 0.15);
+  color: #bbf7d0;
+  padding: 8px 10px;
+  font-size: 11px;
+  font-weight: 900;
+`;
+
 const shopGridStyle = css`
   display: flex;
   flex-direction: column;
@@ -179,28 +264,95 @@ const SHOP_ITEMS = [
     price: 50,
     rarity: 'uncommon',
   },
+  {
+    id: 'wind_boost',
+    name: '바람 강화석',
+    desc: `바람 원소 획득량 2배 (${BOOST_DURATION_SEC}초)`,
+    icon: '🌪️',
+    price: 50,
+    rarity: 'uncommon',
+  },
+  {
+    id: 'earth_boost',
+    name: '대지 강화석',
+    desc: `흙 원소 획득량 2배 (${BOOST_DURATION_SEC}초)`,
+    icon: '🌱',
+    price: 50,
+    rarity: 'uncommon',
+  },
+  {
+    id: 'starter_bundle',
+    name: '기본 원소 묶음',
+    desc: 'Tier 1 원소를 각각 +3 획득',
+    icon: '🧪',
+    price: 90,
+    rarity: 'uncommon',
+  },
   {
     id: 'fusion_scroll',
     name: '합성 두루마리',
-    desc: '랜덤 원소 합성 시도',
+    desc: '현재 만들 수 있는 미발견 원소 1개 획득',
     icon: '📜',
-    price: 80,
+    price: 160,
     rarity: 'rare',
   },
+  {
+    id: 'global_spawn_boost',
+    name: '정령 가속 코어',
+    desc: `전체 원소 생산량 2배 (${ADVANCED_BOOST_DURATION_SEC}초)`,
+    icon: '⚙️',
+    price: 180,
+    rarity: 'rare',
+  },
+  {
+    id: 'gold_boost',
+    name: '황금 향로',
+    desc: `골드 수입 2배 (${ADVANCED_BOOST_DURATION_SEC}초)`,
+    icon: '🏺',
+    price: 200,
+    rarity: 'rare',
+  },
+  {
+    id: 'tier_2_boost',
+    name: '2티어 공명석',
+    desc: `Tier 2 원소 생산량 2배 (${ADVANCED_BOOST_DURATION_SEC}초)`,
+    icon: '🔷',
+    price: 260,
+    rarity: 'epic',
+  },
+  {
+    id: 'tier_3_boost',
+    name: '3티어 공명석',
+    desc: `Tier 3 원소 생산량 2배 (${ADVANCED_BOOST_DURATION_SEC}초)`,
+    icon: '💠',
+    price: 520,
+    rarity: 'epic',
+  },
   {
     id: 'gold_bag',
     name: '골드 주머니',
-    desc: '+50 골드 즉시 획득',
+    desc: '+120 골드 즉시 획득',
     icon: '👝',
-    price: 100,
+    price: 90,
     rarity: 'epic',
   },
 ];
 
 export function ShopScreen() {
-  const { gold, addGold, addElement, activeBoosts, activateBoost } = useGameStore();
+  const {
+    gold,
+    addGold,
+    addElement,
+    activeBoosts,
+    activateBoost,
+    adRewardProgress,
+    claimAdFreeBoost,
+    claimAdDailyGacha,
+  } = useGameStore();
   const [boughtId, setBoughtId] = useState<string | null>(null);
   const [noGoldId, setNoGoldId] = useState<string | null>(null);
+  const [rewardLoadingId, setRewardLoadingId] = useState<string | null>(null);
+  const [rewardResult, setRewardResult] = useState<string | null>(null);
   const [, setTick] = useState(0);
 
   // 버프 타이머 갱신 (1초마다 re-render)
@@ -215,6 +367,44 @@ export function ShopScreen() {
     return Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000));
   };
 
+  const handleAdFreeBoost = async () => {
+    if (rewardLoadingId || adRewardProgress.freeBoostUses >= 3) return;
+    setRewardLoadingId('free_boost');
+    try {
+      const result = await showRewardedAd();
+      if (result.rewarded && claimAdFreeBoost()) {
+        setRewardResult('전체 생산 x2 부스트 30분이 적용되었습니다.');
+        trackGameEvent('rewarded_ad_claimed', {
+          placement: 'shop_free_boost',
+          reward: 'global_spawn_boost_30m',
+        });
+      }
+    } finally {
+      setRewardLoadingId(null);
+    }
+  };
+
+  const handleAdDailyGacha = async () => {
+    if (rewardLoadingId || adRewardProgress.dailyGachaClaimed) return;
+    setRewardLoadingId('daily_gacha');
+    try {
+      const adResult = await showRewardedAd();
+      if (adResult.rewarded) {
+        const gachaResult = claimAdDailyGacha();
+        if (gachaResult.success && gachaResult.elementId) {
+          const el = elementsData.find((item) => item.id === gachaResult.elementId);
+          setRewardResult(`${el?.emoji ?? '✨'} ${el?.name ?? gachaResult.elementId} 원소를 획득했습니다.`);
+          trackGameEvent('rewarded_ad_claimed', {
+            placement: 'shop_daily_gacha',
+            reward: gachaResult.elementId,
+          });
+        }
+      }
+    } finally {
+      setRewardLoadingId(null);
+    }
+  };
+
   const handleBuy = (item: (typeof SHOP_ITEMS)[0]) => {
     // 스토어에서 최신 골드 값을 직접 읽어 스테일 클로저로 인한 음수 골드 버그 방지
     const currentGold = useGameStore.getState().gold;
@@ -226,19 +416,43 @@ export function ShopScreen() {
     addGold(-item.price);
 
     if (item.id === 'gold_bag') {
-      addGold(50);
+      addGold(120);
+    } else if (item.id === 'starter_bundle') {
+      addElement('fire', 3);
+      addElement('water', 3);
+      addElement('wind', 3);
+      addElement('earth', 3);
     } else if (item.id === 'fusion_scroll') {
-      // 미보유 원소 우선 제공, 없으면 보유 중 랜덤
+      // 현재 재료로 만들 수 있는 미발견 원소를 우선 제공
       const currentElements = useGameStore.getState().elements;
-      const unlockedIds = elementsData
-        .filter((el) => isElementUnlocked(el.id, currentElements))
+      const discoveredElements = useGameStore.getState().discoveredElements;
+      const craftableIds = recipesData
+        .filter(
+          (recipe) =>
+            !discoveredElements.includes(recipe.result) &&
+            isElementUnlocked(recipe.result, currentElements)
+        )
+        .map((recipe) => recipe.result);
+      const fallbackIds = elementsData
+        .filter((el) => discoveredElements.includes(el.id))
         .map((el) => el.id);
-      const unownedIds = unlockedIds.filter((id) => (currentElements[id] ?? 0) === 0);
-      const pool = unownedIds.length > 0 ? unownedIds : unlockedIds;
+      const pool = craftableIds.length > 0 ? craftableIds : fallbackIds;
       if (pool.length > 0) {
         addElement(pool[Math.floor(Math.random() * pool.length)]);
       }
-    } else if (item.id === 'fire_boost' || item.id === 'water_boost') {
+    } else if (
+      item.id === 'global_spawn_boost' ||
+      item.id === 'gold_boost' ||
+      item.id === 'tier_2_boost' ||
+      item.id === 'tier_3_boost'
+    ) {
+      activateBoost(item.id, ADVANCED_BOOST_DURATION_SEC);
+    } else if (
+      item.id === 'fire_boost' ||
+      item.id === 'water_boost' ||
+      item.id === 'wind_boost' ||
+      item.id === 'earth_boost'
+    ) {
       activateBoost(item.id, BOOST_DURATION_SEC);
     }
 
@@ -260,11 +474,65 @@ export function ShopScreen() {
         <span>💰</span>
         <span>보유 골드: {gold.toLocaleString()}</span>
       </div>
+
+      <section css={rewardSectionStyle}>
+        <div css={rewardHeaderStyle}>
+          <div css={rewardTitleStyle}>무료 보상</div>
+          <div css={rewardLimitStyle}>
+            부스트 {adRewardProgress.freeBoostUses}/3 · 가챠 {adRewardProgress.dailyGachaClaimed ? '완료' : '가능'}
+          </div>
+        </div>
+        <div css={rewardGridStyle}>
+          <div css={rewardCardStyle}>
+            <div css={rewardNameStyle}>⚡ 30분 생산 부스트</div>
+            <div css={rewardDescStyle}>
+              광고를 보고 전체 자동 생산 속도를 30분 동안 2배로 올립니다.
+            </div>
+            <button
+              css={rewardButtonStyle(!rewardLoadingId && adRewardProgress.freeBoostUses < 3)}
+              onClick={handleAdFreeBoost}
+              disabled={Boolean(rewardLoadingId) || adRewardProgress.freeBoostUses >= 3}
+            >
+              {rewardLoadingId === 'free_boost'
+                ? '광고 확인 중...'
+                : adRewardProgress.freeBoostUses >= 3
+                  ? '오늘 한도 완료'
+                  : '광고 보고 받기'}
+            </button>
+          </div>
+          <div css={rewardCardStyle}>
+            <div css={rewardNameStyle}>🎁 일일 원소 가챠</div>
+            <div css={rewardDescStyle}>
+              광고를 보고 만들 수 있는 미발견 원소 또는 상위 원소 1개를 획득합니다.
+            </div>
+            <button
+              css={rewardButtonStyle(!rewardLoadingId && !adRewardProgress.dailyGachaClaimed)}
+              onClick={handleAdDailyGacha}
+              disabled={Boolean(rewardLoadingId) || adRewardProgress.dailyGachaClaimed}
+            >
+              {rewardLoadingId === 'daily_gacha'
+                ? '광고 확인 중...'
+                : adRewardProgress.dailyGachaClaimed
+                  ? '오늘 수령 완료'
+                  : '광고 보고 뽑기'}
+            </button>
+          </div>
+        </div>
+        {rewardResult && <div css={rewardResultStyle}>{rewardResult}</div>}
+      </section>
+
       <div css={shopGridStyle}>
         {SHOP_ITEMS.map((item) => {
           const remaining = getRemainingSeconds(item.id);
           const isActive = remaining > 0;
-          const progress = (remaining / BOOST_DURATION_SEC) * 100;
+          const duration =
+            item.id === 'global_spawn_boost' ||
+            item.id === 'gold_boost' ||
+            item.id === 'tier_2_boost' ||
+            item.id === 'tier_3_boost'
+              ? ADVANCED_BOOST_DURATION_SEC
+              : BOOST_DURATION_SEC;
+          const progress = (remaining / duration) * 100;
 
           return (
             <div key={item.id} css={noGoldId === item.id ? shopItemNoGoldStyle : isActive ? shopItemActiveStyle : shopItemStyle}>
diff --git a/src/components/tutorial/TutorialOverlay.tsx b/src/components/tutorial/TutorialOverlay.tsx
index 4c4d9e1..6fb0d1f 100644
--- a/src/components/tutorial/TutorialOverlay.tsx
+++ b/src/components/tutorial/TutorialOverlay.tsx
@@ -112,8 +112,14 @@ const completionBadgeStyle = css`
 `;
 
 export function TutorialOverlay() {
-  const { tutorialStep, tutorialCompleted, advanceTutorial, skipTutorial, setActiveTab } =
-    useGameStore();
+  const {
+    tutorialStep,
+    tutorialCompleted,
+    pendingOfflineReward,
+    advanceTutorial,
+    skipTutorial,
+    setActiveTab,
+  } = useGameStore();
 
   const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
   const [showCompletionBadge, setShowCompletionBadge] = useState(false);
@@ -170,8 +176,9 @@ export function TutorialOverlay() {
 
   // 완전히 완료된 경우 렌더링하지 않음
   if (tutorialCompleted && !showCompletionBadge) return null;
+  if (pendingOfflineReward) return null;
   if (tutorialCompleted && showCompletionBadge) {
-    return <div css={completionBadgeStyle}>🎉 튜토리얼 완료!</div>;
+    return <div css={completionBadgeStyle}>🎁 환영 선물 지급! T2 원소 + 120G</div>;
   }
 
   // Step 0: 환영 카드
diff --git a/src/store/useGameStore.ts b/src/store/useGameStore.ts
index 462332c..c12da97 100644
--- a/src/store/useGameStore.ts
+++ b/src/store/useGameStore.ts
@@ -52,6 +52,7 @@ const INITIAL_ELEMENTS: Record<string, number> = {
   wind: 5,
   earth: 5,
 };
+const INITIAL_DISCOVERED_ELEMENT_IDS = Object.keys(INITIAL_ELEMENTS);
 
 export const ENHANCE_MAX_LEVEL = 5;
 const ENHANCE_BASE_COST = 50;
@@ -59,6 +60,392 @@ const ENHANCE_COST_MULTIPLIER = 1.5;
 const ENHANCE_RATE_MULTIPLIER = 1.2;
 const SPAWN_ENHANCE_MULTIPLIER = 1.2;
 const MAX_OFFLINE_SECONDS = 86400; // 24시간
+const MAX_RESONANCE_SPAWN_BONUS = 2.0;
+const MAX_RESONANCE_GOLD_BONUS = 3.0;
+const TIER_SPAWN_RATE_MULTIPLIER: Record<number, number> = {
+  1: 1.0,
+  2: 0.12,
+  3: 0.025,
+  4: 0.004,
+  5: 0.0007,
+};
+const COMBO_WINDOW_MS = 8_000;
+const LUCKY_FUSION_RATE = 0.01;
+const STORM_INTERVAL_MS = 6 * 60 * 60 * 1000;
+const STORM_DURATION_MS = 5 * 60 * 1000;
+const TAP_HARVEST_THRESHOLD = 0.75;
+const TAP_HARVEST_BONUS = 1.5;
+
+export type DailyMissionType = 'fuse' | 'collect' | 'discover';
+
+export interface DailyMissionDefinition {
+  id: string;
+  type: DailyMissionType;
+  title: string;
+  description: string;
+  target: number;
+  rewardGold: number;
+  rewardBoostId?: string;
+  rewardBoostDurationSec?: number;
+}
+
+export interface DailyProgress {
+  dateKey: string;
+  fuseCount: number;
+  elementsCollected: number;
+  newDiscoveries: number;
+  goldEarned: number;
+  claimedMissionIds: string[];
+  bonusClaimed: boolean;
+  streak: number;
+  lastBonusDateKey: string | null;
+}
+
+export interface ActiveStorm {
+  elementId: string;
+  startedAt: number;
+  expiresAt: number;
+  nextAt: number;
+}
+
+export interface TapHarvestResult {
+  success: boolean;
+  elementId?: string;
+  count?: number;
+  goldGained?: number;
+  error?: 'not_ready' | 'not_found';
+}
+
+export interface DailyBonusResult {
+  success: boolean;
+  goldGained?: number;
+  streak?: number;
+  error?: 'already_claimed';
+}
+
+export interface AdRewardProgress {
+  dateKey: string;
+  freeBoostUses: number;
+  dailyGachaClaimed: boolean;
+  goldFundingUses: number;
+  fusionAssistUses: number;
+}
+
+export interface DailyGachaResult {
+  success: boolean;
+  elementId?: string;
+  error?: 'already_claimed' | 'no_reward';
+}
+
+export const DAILY_MISSIONS: DailyMissionDefinition[] = [
+  {
+    id: 'daily_fuse_5',
+    type: 'fuse',
+    title: '연금술 점화',
+    description: '합성을 5회 완료',
+    target: 5,
+    rewardGold: 120,
+  },
+  {
+    id: 'daily_collect_60',
+    type: 'collect',
+    title: '작업장 순찰',
+    description: '원소를 60개 수집',
+    target: 60,
+    rewardGold: 160,
+    rewardBoostId: 'global_spawn_boost',
+    rewardBoostDurationSec: 120,
+  },
+  {
+    id: 'daily_discover_1',
+    type: 'discover',
+    title: '새 발견 기록',
+    description: '새 원소 1종 발견',
+    target: 1,
+    rewardGold: 220,
+  },
+];
+
+export interface TierAutomationGoal {
+  tier: number;
+  requiredTier: number;
+  requiredCount: number;
+  rewardGold: number;
+  label: string;
+}
+
+export const TIER_AUTOMATION_GOALS: TierAutomationGoal[] = [
+  {
+    tier: 2,
+    requiredTier: 2,
+    requiredCount: 1,
+    rewardGold: 50,
+    label: 'Tier 2 자동 생산 해금',
+  },
+  {
+    tier: 3,
+    requiredTier: 2,
+    requiredCount: 5,
+    rewardGold: 180,
+    label: 'Tier 3 자동 생산 해금',
+  },
+  {
+    tier: 4,
+    requiredTier: 3,
+    requiredCount: 6,
+    rewardGold: 600,
+    label: 'Tier 4 자동 생산 해금',
+  },
+  {
+    tier: 5,
+    requiredTier: 4,
+    requiredCount: 4,
+    rewardGold: 1800,
+    label: 'Tier 5 자동 생산 해금',
+  },
+];
+
+function uniq(ids: string[]): string[] {
+  return Array.from(new Set(ids));
+}
+
+function getDateKey(time = Date.now()): string {
+  const date = new Date(time);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function getPreviousDateKey(dateKey: string): string {
+  const [year, month, day] = dateKey.split('-').map(Number);
+  const date = new Date(year, month - 1, day);
+  date.setDate(date.getDate() - 1);
+  return getDateKey(date.getTime());
+}
+
+function createDailyProgress(dateKey = getDateKey(), previous?: DailyProgress): DailyProgress {
+  const streak =
+    previous?.lastBonusDateKey === getPreviousDateKey(dateKey) ? previous.streak : 0;
+
+  return {
+    dateKey,
+    fuseCount: 0,
+    elementsCollected: 0,
+    newDiscoveries: 0,
+    goldEarned: 0,
+    claimedMissionIds: [],
+    bonusClaimed: previous?.lastBonusDateKey === dateKey && previous.bonusClaimed,
+    streak,
+    lastBonusDateKey: previous?.lastBonusDateKey ?? null,
+  };
+}
+
+function ensureDailyProgress(progress: DailyProgress | undefined): DailyProgress {
+  const today = getDateKey();
+  if (!progress || progress.dateKey !== today) {
+    return createDailyProgress(today, progress);
+  }
+  return progress;
+}
+
+function addDailyProgress(
+  progress: DailyProgress,
+  patch: Partial<Pick<DailyProgress, 'fuseCount' | 'elementsCollected' | 'newDiscoveries' | 'goldEarned'>>
+): DailyProgress {
+  const current = ensureDailyProgress(progress);
+  return {
+    ...current,
+    fuseCount: current.fuseCount + (patch.fuseCount ?? 0),
+    elementsCollected: current.elementsCollected + (patch.elementsCollected ?? 0),
+    newDiscoveries: current.newDiscoveries + (patch.newDiscoveries ?? 0),
+    goldEarned: current.goldEarned + (patch.goldEarned ?? 0),
+  };
+}
+
+function createAdRewardProgress(dateKey = getDateKey()): AdRewardProgress {
+  return {
+    dateKey,
+    freeBoostUses: 0,
+    dailyGachaClaimed: false,
+    goldFundingUses: 0,
+    fusionAssistUses: 0,
+  };
+}
+
+function ensureAdRewardProgress(progress: AdRewardProgress | undefined): AdRewardProgress {
+  const today = getDateKey();
+  if (!progress || progress.dateKey !== today) return createAdRewardProgress(today);
+  return {
+    dateKey: progress.dateKey,
+    freeBoostUses: progress.freeBoostUses ?? 0,
+    dailyGachaClaimed: progress.dailyGachaClaimed ?? false,
+    goldFundingUses: progress.goldFundingUses ?? 0,
+    fusionAssistUses: progress.fusionAssistUses ?? 0,
+  };
+}
+
+export function getDailyMissionProgress(
+  mission: DailyMissionDefinition,
+  progress: DailyProgress
+): number {
+  switch (mission.type) {
+    case 'fuse':
+      return progress.fuseCount;
+    case 'collect':
+      return progress.elementsCollected;
+    case 'discover':
+      return progress.newDiscoveries;
+  }
+}
+
+function pickStormElementId(discoveredElementIds: string[]): string {
+  const candidates = elementsData.filter((el) => discoveredElementIds.includes(el.id));
+  const pool = candidates.length > 0 ? candidates : elementsData.filter((el) => el.tier === 1);
+  return pool[Math.floor(Math.random() * pool.length)]?.id ?? 'fire';
+}
+
+function pickDailyGachaElementId(
+  elements: Record<string, number>,
+  discoveredElements: string[]
+): string | null {
+  const discoveredElementIds = getDiscoveredElementIds(discoveredElements, elements);
+  const craftableIds = recipesData
+    .filter(
+      (recipe) =>
+        !discoveredElementIds.includes(recipe.result) &&
+        isElementUnlocked(recipe.result, elements)
+    )
+    .map((recipe) => recipe.result);
+  if (craftableIds.length > 0) {
+    return craftableIds[Math.floor(Math.random() * craftableIds.length)];
+  }
+
+  const maxTier = Math.max(
+    1,
+    ...elementsData
+      .filter((el) => discoveredElementIds.includes(el.id))
+      .map((el) => el.tier)
+  );
+  const targetTier = Math.min(5, maxTier + 1);
+  const nextTierIds = elementsData
+    .filter((el) => el.tier === targetTier && !discoveredElementIds.includes(el.id))
+    .map((el) => el.id);
+  if (nextTierIds.length > 0) {
+    return nextTierIds[Math.floor(Math.random() * nextTierIds.length)];
+  }
+
+  const fallbackIds = discoveredElementIds.filter((id) => (elements[id] ?? 0) > 0);
+  if (fallbackIds.length === 0) return null;
+  return fallbackIds[Math.floor(Math.random() * fallbackIds.length)];
+}
+
+function refreshStorm(
+  storm: ActiveStorm | null,
+  now: number,
+  discoveredElementIds: string[]
+): ActiveStorm {
+  if (storm && storm.expiresAt > now) return storm;
+  const nextAt = storm?.nextAt ?? now + STORM_INTERVAL_MS;
+  if (now < nextAt) {
+    return {
+      elementId: storm?.elementId ?? pickStormElementId(discoveredElementIds),
+      startedAt: storm?.startedAt ?? nextAt,
+      expiresAt: storm?.expiresAt ?? nextAt,
+      nextAt,
+    };
+  }
+
+  return {
+    elementId: pickStormElementId(discoveredElementIds),
+    startedAt: now,
+    expiresAt: now + STORM_DURATION_MS,
+    nextAt: now + STORM_INTERVAL_MS,
+  };
+}
+
+function getDiscoveredFromElements(elements: Record<string, number>): string[] {
+  return Object.entries(elements)
+    .filter(([, count]) => count > 0)
+    .map(([id]) => id);
+}
+
+export function getDiscoveredElementIds(
+  discoveredElements: string[] | undefined,
+  elements: Record<string, number>
+): string[] {
+  return uniq([
+    ...INITIAL_DISCOVERED_ELEMENT_IDS,
+    ...(discoveredElements ?? []),
+    ...getDiscoveredFromElements(elements),
+  ]);
+}
+
+export function countDiscoveredByTier(discoveredElementIds: string[], tier: number): number {
+  return elementsData.filter(
+    (el) => el.tier === tier && discoveredElementIds.includes(el.id)
+  ).length;
+}
+
+export function calcTierAutomationStatus(discoveredElementIds: string[]): {
+  unlockedTier: number;
+  nextGoal: TierAutomationGoal | null;
+} {
+  let unlockedTier = 1;
+
+  for (const goal of TIER_AUTOMATION_GOALS) {
+    if (countDiscoveredByTier(discoveredElementIds, goal.requiredTier) >= goal.requiredCount) {
+      unlockedTier = Math.max(unlockedTier, goal.tier);
+    }
+  }
+
+  return {
+    unlockedTier,
+    nextGoal: TIER_AUTOMATION_GOALS.find((goal) => goal.tier > unlockedTier) ?? null,
+  };
+}
+
+function collectTierAutomationRewards(
+  discoveredElementIds: string[],
+  claimedTierRewards: number[]
+): { newlyClaimedTiers: number[]; goldBonus: number } {
+  const newlyClaimedTiers: number[] = [];
+  let goldBonus = 0;
+
+  for (const goal of TIER_AUTOMATION_GOALS) {
+    if (claimedTierRewards.includes(goal.tier)) continue;
+    if (countDiscoveredByTier(discoveredElementIds, goal.requiredTier) >= goal.requiredCount) {
+      newlyClaimedTiers.push(goal.tier);
+      goldBonus += goal.rewardGold;
+    }
+  }
+
+  return { newlyClaimedTiers, goldBonus };
+}
+
+function calcComboMultiplier(comboCount: number): number {
+  if (comboCount >= 10) return 3;
+  if (comboCount >= 6) return 2;
+  if (comboCount >= 3) return 1.5;
+  return 1;
+}
+
+function pickRandomTier2ElementId(): string {
+  const pool = elementsData.filter((el) => el.tier === 2);
+  return pool[Math.floor(Math.random() * pool.length)]?.id ?? 'steam';
+}
+
+function pickLuckyResultId(baseResultId: string, discoveredElements: string[]): string {
+  const baseTier =
+    (elementsData as Array<{ id: string; tier: number }>).find((el) => el.id === baseResultId)
+      ?.tier ?? 1;
+  const targetTier = baseTier + 1;
+  const candidates = elementsData.filter(
+    (el) => el.tier === targetTier && !discoveredElements.includes(el.id)
+  );
+  if (candidates.length === 0) return baseResultId;
+  return candidates[Math.floor(Math.random() * candidates.length)].id;
+}
 
 export function calcEnhanceCost(level: number): number {
   return Math.floor(ENHANCE_BASE_COST * Math.pow(ENHANCE_COST_MULTIPLIER, level));
@@ -72,7 +459,28 @@ export function calcEffectiveIdleRate(elementId: string, level: number): number
 export function calcSpawnRate(elementId: string, level: number): number {
   const el = elementsData.find((e) => e.id === elementId);
   const baseSpawnSpeed = el?.baseSpawnSpeed ?? 5.0;
-  return (1 / baseSpawnSpeed) * Math.pow(SPAWN_ENHANCE_MULTIPLIER, level);
+  const tierMultiplier = TIER_SPAWN_RATE_MULTIPLIER[el?.tier ?? 1] ?? 1.0;
+  return (1 / baseSpawnSpeed) * tierMultiplier * Math.pow(SPAWN_ENHANCE_MULTIPLIER, level);
+}
+
+export function calcResonanceBonuses(elements: Record<string, number>): {
+  spawnMultiplier: number;
+  goldMultiplier: number;
+  power: number;
+} {
+  let power = 0;
+
+  for (const el of elementsData) {
+    const count = elements[el.id] ?? 0;
+    if (count <= 0 || el.tier <= 1) continue;
+    power += (el.tier - 1) * Math.sqrt(count);
+  }
+
+  return {
+    spawnMultiplier: 1 + Math.min(MAX_RESONANCE_SPAWN_BONUS, power * 0.015),
+    goldMultiplier: 1 + Math.min(MAX_RESONANCE_GOLD_BONUS, power * 0.02),
+    power,
+  };
 }
 
 export function isElementUnlocked(elementId: string, elements: Record<string, number>): boolean {
@@ -81,7 +489,13 @@ export function isElementUnlocked(elementId: string, elements: Record<string, nu
   if (el.unlockCondition === 'initial') return true;
   if (el.unlockCondition.startsWith('recipe:')) {
     const ids = el.unlockCondition.replace('recipe:', '').split('+');
-    return ids.every((id) => (elements[id] ?? 0) > 0);
+    const requiredCounts = ids.reduce<Record<string, number>>((acc, id) => {
+      acc[id] = (acc[id] ?? 0) + 1;
+      return acc;
+    }, {});
+    return Object.entries(requiredCounts).every(
+      ([id, required]) => (elements[id] ?? 0) >= required
+    );
   }
   return false;
 }
@@ -90,6 +504,11 @@ export interface FuseResult {
   success: boolean;
   resultId?: string;
   goldGained?: number;
+  comboCount?: number;
+  comboMultiplier?: number;
+  isLucky?: boolean;
+  isNewDiscovery?: boolean;
+  rarity?: string;
   error?: 'no_recipe' | 'insufficient_elements';
 }
 
@@ -284,6 +703,7 @@ interface GameState {
 
   // 원소 인벤토리
   elements: Record<string, number>;
+  discoveredElements: string[];
   gold: number;
   addGold: (amount: number) => void;
   addElement: (elementId: string, count?: number) => void;
@@ -293,6 +713,8 @@ interface GameState {
   enhance: (elementId: string) => EnhanceResult;
 
   // 합성 액션
+  comboCount: number;
+  comboExpiresAt: number;
   fuse: (slot1Id: string, slot2Id: string) => FuseResult;
 
   // 방치형 시스템
@@ -301,11 +723,24 @@ interface GameState {
   pendingOfflineReward: OfflineReward | null;
   tickIdle: (deltaSec: number) => void;
   initOffline: () => void;
-  claimOfflineReward: () => void;
+  claimOfflineReward: (multiplier?: number) => void;
+  harvestElement: (elementId: string) => TapHarvestResult;
 
   // 상점 버프 시스템 (boostId -> 만료 시각 ms)
   activeBoosts: Record<string, number>;
   activateBoost: (boostId: string, durationSec: number) => void;
+  claimedTierRewards: number[];
+
+  // v1.1 리텐션 시스템
+  dailyProgress: DailyProgress;
+  activeStorm: ActiveStorm | null;
+  adRewardProgress: AdRewardProgress;
+  claimDailyBonus: () => DailyBonusResult;
+  claimDailyMission: (missionId: string) => boolean;
+  claimAdFreeBoost: () => boolean;
+  claimAdDailyGacha: () => DailyGachaResult;
+  claimAdGoldFunding: (amount: number) => boolean;
+  claimAdFusionAssist: () => boolean;
 
   // 프레스티지 시스템
   prestigeCount: number;
@@ -323,14 +758,19 @@ interface GameState {
   // 튜토리얼 상태
   tutorialStep: number;       // 0~5 (0=미시작, 5=완료)
   tutorialCompleted: boolean; // true면 튜토리얼 UI 완전히 숨김
+  welcomeGiftClaimed: boolean;
   advanceTutorial: () => void;
   skipTutorial: () => void;
 
   // 설정
   language: Language;
   bgmEnabled: boolean;
+  sfxEnabled: boolean;
+  hapticEnabled: boolean;
   setLanguage: (lang: Language) => void;
   setBgmEnabled: (enabled: boolean) => void;
+  setSfxEnabled: (enabled: boolean) => void;
+  setHapticEnabled: (enabled: boolean) => void;
   resetGame: () => void;
 }
 
@@ -338,10 +778,17 @@ type PersistedState = Pick<
   GameState,
   | 'activeTab'
   | 'elements'
+  | 'discoveredElements'
   | 'gold'
   | 'elementLevels'
+  | 'comboCount'
+  | 'comboExpiresAt'
   | 'lastTickAt'
   | 'activeBoosts'
+  | 'claimedTierRewards'
+  | 'dailyProgress'
+  | 'activeStorm'
+  | 'adRewardProgress'
   | 'spawnAccumulators'
   | 'language'
   | 'bgmEnabled'
@@ -355,6 +802,9 @@ type PersistedState = Pick<
   | 'achievementStats'
   | 'tutorialStep'
   | 'tutorialCompleted'
+  | 'welcomeGiftClaimed'
+  | 'sfxEnabled'
+  | 'hapticEnabled'
 >;
 
 export const useGameStore = create<GameState>()(
@@ -364,18 +814,56 @@ export const useGameStore = create<GameState>()(
       setActiveTab: (tab) => set({ activeTab: tab }),
 
       elements: { ...INITIAL_ELEMENTS },
+      discoveredElements: [...INITIAL_DISCOVERED_ELEMENT_IDS],
       gold: 0,
       activeBoosts: {},
+      claimedTierRewards: [],
+      dailyProgress: createDailyProgress(),
+      activeStorm: null,
+      adRewardProgress: createAdRewardProgress(),
+      comboCount: 0,
+      comboExpiresAt: 0,
 
-      addGold: (amount) => set((state) => ({ gold: state.gold + amount })),
+      addGold: (amount) =>
+        set((state) => ({
+          gold: state.gold + amount,
+          dailyProgress:
+            amount > 0
+              ? addDailyProgress(state.dailyProgress, { goldEarned: amount })
+              : ensureDailyProgress(state.dailyProgress),
+        })),
 
       addElement: (elementId, count = 1) =>
-        set((state) => ({
-          elements: {
+        set((state) => {
+          const elements = {
             ...state.elements,
             [elementId]: (state.elements[elementId] ?? 0) + count,
-          },
-        })),
+          };
+          const wasDiscovered = getDiscoveredElementIds(
+            state.discoveredElements,
+            state.elements
+          ).includes(elementId);
+          const discoveredElements = getDiscoveredElementIds(
+            [...state.discoveredElements, elementId],
+            elements
+          );
+          const { newlyClaimedTiers, goldBonus } = collectTierAutomationRewards(
+            discoveredElements,
+            state.claimedTierRewards
+          );
+
+          return {
+            elements,
+            discoveredElements,
+            gold: state.gold + goldBonus,
+            dailyProgress: addDailyProgress(state.dailyProgress, {
+              elementsCollected: Math.max(0, count),
+              newDiscoveries: wasDiscovered ? 0 : 1,
+              goldEarned: goldBonus,
+            }),
+            claimedTierRewards: [...state.claimedTierRewards, ...newlyClaimedTiers],
+          };
+        }),
 
       elementLevels: {},
 
@@ -432,7 +920,7 @@ export const useGameStore = create<GameState>()(
       },
 
       fuse: (slot1Id, slot2Id) => {
-        const { elements } = get();
+        const { elements, discoveredElements, comboCount, comboExpiresAt } = get();
 
         const recipe = recipesData.find(
           (r) =>
@@ -450,11 +938,22 @@ export const useGameStore = create<GameState>()(
         if (!sameElement && (slot1Count < 1 || slot2Count < 1))
           return { success: false, error: 'insufficient_elements' };
 
-        const goldGained = recipe.tier * 10;
+        const now = Date.now();
+        const nextComboCount = comboExpiresAt > now ? comboCount + 1 : 1;
+        const comboMultiplier = calcComboMultiplier(nextComboCount);
+        const isLucky = Math.random() < LUCKY_FUSION_RATE;
+        const actualResultId = isLucky
+          ? pickLuckyResultId(recipe.result, getDiscoveredElementIds(discoveredElements, elements))
+          : recipe.result;
+        const actualResult = elementsData.find((el) => el.id === actualResultId);
+        const goldGained = Math.floor(recipe.tier * 10 * comboMultiplier);
         const resultTier =
           (elementsData as Array<{ id: string; tier: number }>).find(
-            (e) => e.id === recipe.result
+            (e) => e.id === actualResultId
           )?.tier ?? 0;
+        const wasDiscovered = getDiscoveredElementIds(discoveredElements, elements).includes(
+          actualResultId
+        );
 
         set((state) => {
           const next = { ...state.elements };
@@ -462,7 +961,13 @@ export const useGameStore = create<GameState>()(
           if (!sameElement) {
             next[slot2Id] = (next[slot2Id] ?? 0) - 1;
           }
-          next[recipe.result] = (next[recipe.result] ?? 0) + 1;
+          next[actualResultId] = (next[actualResultId] ?? 0) + 1;
+          const discoveredElements = getDiscoveredElementIds(
+            [...state.discoveredElements, actualResultId],
+            next
+          );
+          const { newlyClaimedTiers, goldBonus: tierRewardGold } =
+            collectTierAutomationRewards(discoveredElements, state.claimedTierRewards);
 
           const newTiersUnlocked = state.achievementStats.tiersUnlocked.includes(resultTier)
             ? state.achievementStats.tiersUnlocked
@@ -473,10 +978,11 @@ export const useGameStore = create<GameState>()(
             fuseCount: state.achievementStats.fuseCount + 1,
             tiersUnlocked: newTiersUnlocked,
           };
+          const nextGold = state.gold + goldGained + tierRewardGold;
 
           const checkState = {
             elements: next,
-            gold: state.gold + goldGained,
+            gold: nextGold,
             elementLevels: state.elementLevels,
             achievementStats: newStats,
             unlockedAchievements: state.unlockedAchievements,
@@ -489,7 +995,17 @@ export const useGameStore = create<GameState>()(
 
           return {
             elements: next,
-            gold: state.gold + goldGained + goldBonus,
+            discoveredElements,
+            gold: nextGold + goldBonus,
+            dailyProgress: addDailyProgress(state.dailyProgress, {
+              fuseCount: 1,
+              elementsCollected: 1,
+              newDiscoveries: wasDiscovered ? 0 : 1,
+              goldEarned: goldGained + tierRewardGold + goldBonus,
+            }),
+            claimedTierRewards: [...state.claimedTierRewards, ...newlyClaimedTiers],
+            comboCount: nextComboCount,
+            comboExpiresAt: now + COMBO_WINDOW_MS,
             achievementStats: newStats,
             unlockedAchievements: [
               ...state.unlockedAchievements,
@@ -501,14 +1017,27 @@ export const useGameStore = create<GameState>()(
           };
         });
 
-        return { success: true, resultId: recipe.result, goldGained };
+        return {
+          success: true,
+          resultId: actualResultId,
+          goldGained,
+          comboCount: nextComboCount,
+          comboMultiplier,
+          isLucky: actualResultId !== recipe.result,
+          isNewDiscovery: !wasDiscovered,
+          rarity: actualResult?.rarity,
+        };
       },
 
       // 설정
       language: 'ko',
       bgmEnabled: false,
+      sfxEnabled: true,
+      hapticEnabled: true,
       setLanguage: (lang) => set({ language: lang }),
       setBgmEnabled: (enabled) => set({ bgmEnabled: enabled }),
+      setSfxEnabled: (enabled) => set({ sfxEnabled: enabled }),
+      setHapticEnabled: (enabled) => set({ hapticEnabled: enabled }),
       resetGame: () => {
         flushGameState();
         localStorage.removeItem('archetype-game-state');
@@ -525,6 +1054,187 @@ export const useGameStore = create<GameState>()(
         }));
       },
 
+      claimDailyBonus: () => {
+        const progress = ensureDailyProgress(get().dailyProgress);
+        if (progress.bonusClaimed) return { success: false, error: 'already_claimed' };
+
+        const nextStreak = progress.streak + 1;
+        const goldGained = 100 + Math.min(6, nextStreak - 1) * 25;
+        set((state) => {
+          const current = ensureDailyProgress(state.dailyProgress);
+          return {
+            gold: state.gold + goldGained,
+            dailyProgress: {
+              ...current,
+              bonusClaimed: true,
+              streak: nextStreak,
+              lastBonusDateKey: current.dateKey,
+              goldEarned: current.goldEarned + goldGained,
+            },
+          };
+        });
+
+        return { success: true, goldGained, streak: nextStreak };
+      },
+
+      claimDailyMission: (missionId) => {
+        const mission = DAILY_MISSIONS.find((item) => item.id === missionId);
+        if (!mission) return false;
+
+        const progress = ensureDailyProgress(get().dailyProgress);
+        if (progress.claimedMissionIds.includes(missionId)) return false;
+        if (getDailyMissionProgress(mission, progress) < mission.target) return false;
+
+        set((state) => {
+          const current = ensureDailyProgress(state.dailyProgress);
+          const activeBoosts = { ...state.activeBoosts };
+          if (mission.rewardBoostId && mission.rewardBoostDurationSec) {
+            activeBoosts[mission.rewardBoostId] =
+              Date.now() + mission.rewardBoostDurationSec * 1000;
+          }
+
+          return {
+            gold: state.gold + mission.rewardGold,
+            activeBoosts,
+            dailyProgress: {
+              ...current,
+              goldEarned: current.goldEarned + mission.rewardGold,
+              claimedMissionIds: [...current.claimedMissionIds, missionId],
+            },
+          };
+        });
+
+        return true;
+      },
+
+      claimAdFreeBoost: () => {
+        const progress = ensureAdRewardProgress(get().adRewardProgress);
+        if (progress.freeBoostUses >= 3) return false;
+
+        set((state) => {
+          const current = ensureAdRewardProgress(state.adRewardProgress);
+          if (current.freeBoostUses >= 3) return {};
+
+          const now = Date.now();
+          const currentExpiresAt = state.activeBoosts.global_spawn_boost ?? 0;
+          const baseTime = Math.max(now, currentExpiresAt);
+
+          return {
+            activeBoosts: {
+              ...state.activeBoosts,
+              global_spawn_boost: baseTime + 30 * 60 * 1000,
+            },
+            adRewardProgress: {
+              ...current,
+              freeBoostUses: current.freeBoostUses + 1,
+            },
+          };
+        });
+
+        return true;
+      },
+
+      claimAdDailyGacha: () => {
+        const progress = ensureAdRewardProgress(get().adRewardProgress);
+        if (progress.dailyGachaClaimed) return { success: false, error: 'already_claimed' };
+
+        let result: DailyGachaResult = { success: false, error: 'no_reward' };
+        set((state) => {
+          const current = ensureAdRewardProgress(state.adRewardProgress);
+          if (current.dailyGachaClaimed) {
+            result = { success: false, error: 'already_claimed' };
+            return {};
+          }
+
+          const elementId = pickDailyGachaElementId(state.elements, state.discoveredElements);
+          if (!elementId) {
+            result = { success: false, error: 'no_reward' };
+            return {};
+          }
+
+          const wasDiscovered = getDiscoveredElementIds(
+            state.discoveredElements,
+            state.elements
+          ).includes(elementId);
+          const elements = {
+            ...state.elements,
+            [elementId]: (state.elements[elementId] ?? 0) + 1,
+          };
+          const discoveredElements = getDiscoveredElementIds(
+            [...state.discoveredElements, elementId],
+            elements
+          );
+          const { newlyClaimedTiers, goldBonus } = collectTierAutomationRewards(
+            discoveredElements,
+            state.claimedTierRewards
+          );
+
+          result = { success: true, elementId };
+
+          return {
+            elements,
+            discoveredElements,
+            gold: state.gold + goldBonus,
+            claimedTierRewards: [...state.claimedTierRewards, ...newlyClaimedTiers],
+            dailyProgress: addDailyProgress(state.dailyProgress, {
+              elementsCollected: 1,
+              newDiscoveries: wasDiscovered ? 0 : 1,
+              goldEarned: goldBonus,
+            }),
+            adRewardProgress: {
+              ...current,
+              dailyGachaClaimed: true,
+            },
+          };
+        });
+
+        return result;
+      },
+
+      claimAdGoldFunding: (amount) => {
+        const goldGained = Math.max(0, Math.ceil(amount));
+        if (goldGained <= 0) return false;
+        const progress = ensureAdRewardProgress(get().adRewardProgress);
+        if (progress.goldFundingUses >= 5) return false;
+
+        set((state) => {
+          const current = ensureAdRewardProgress(state.adRewardProgress);
+          if (current.goldFundingUses >= 5) return {};
+
+          return {
+            gold: state.gold + goldGained,
+            dailyProgress: addDailyProgress(state.dailyProgress, {
+              goldEarned: goldGained,
+            }),
+            adRewardProgress: {
+              ...current,
+              goldFundingUses: current.goldFundingUses + 1,
+            },
+          };
+        });
+
+        return true;
+      },
+
+      claimAdFusionAssist: () => {
+        const progress = ensureAdRewardProgress(get().adRewardProgress);
+        if (progress.fusionAssistUses >= 5) return false;
+
+        set((state) => {
+          const current = ensureAdRewardProgress(state.adRewardProgress);
+          if (current.fusionAssistUses >= 5) return {};
+
+          return {
+            adRewardProgress: {
+              ...current,
+              fusionAssistUses: current.fusionAssistUses + 1,
+            },
+          };
+        });
+
+        return true;
+      },
+
       // 프레스티지 시스템
       prestigeCount: 0,
       prestigeGoldMultiplier: 1.0,
@@ -610,15 +1320,45 @@ export const useGameStore = create<GameState>()(
       // 튜토리얼 상태
       tutorialStep: 0,
       tutorialCompleted: false,
+      welcomeGiftClaimed: false,
       advanceTutorial: () =>
         set((state) => {
           const nextStep = state.tutorialStep + 1;
+          if (nextStep >= 5 && !state.welcomeGiftClaimed) {
+            const giftId = pickRandomTier2ElementId();
+            const elements = {
+              ...state.elements,
+              [giftId]: (state.elements[giftId] ?? 0) + 1,
+            };
+            const discoveredElements = getDiscoveredElementIds(
+              [...state.discoveredElements, giftId],
+              elements
+            );
+            const { newlyClaimedTiers, goldBonus } = collectTierAutomationRewards(
+              discoveredElements,
+              state.claimedTierRewards
+            );
+            return {
+              elements,
+              discoveredElements,
+              gold: state.gold + goldBonus + 120,
+              claimedTierRewards: [...state.claimedTierRewards, ...newlyClaimedTiers],
+              tutorialStep: nextStep,
+              tutorialCompleted: true,
+              welcomeGiftClaimed: true,
+            };
+          }
           return {
             tutorialStep: nextStep,
             tutorialCompleted: nextStep >= 5,
           };
         }),
-      skipTutorial: () => set({ tutorialStep: 5, tutorialCompleted: true }),
+      skipTutorial: () =>
+        set((state) => ({
+          tutorialStep: 5,
+          tutorialCompleted: true,
+          welcomeGiftClaimed: state.welcomeGiftClaimed,
+        })),
 
       // 방치형 시스템
       lastTickAt: Date.now(),
@@ -628,6 +1368,7 @@ export const useGameStore = create<GameState>()(
       tickIdle: (deltaSec) => {
         const {
           elements,
+          discoveredElements,
           elementLevels,
           spawnAccumulators,
           activeBoosts,
@@ -635,26 +1376,48 @@ export const useGameStore = create<GameState>()(
           prestigeSpawnMultiplier,
           permanentGoldMultiplier,
           permanentSpawnMultiplier,
+          tutorialCompleted,
+          tutorialStep,
+          activeStorm,
         } = get();
+        if (!tutorialCompleted && tutorialStep <= 2) {
+          set({ lastTickAt: Date.now() });
+          return;
+        }
         const newAccumulators = { ...spawnAccumulators };
         const spawnedElements: Record<string, number> = {};
         let goldGained = 0;
         const now = Date.now();
+        const discoveredElementIds = getDiscoveredElementIds(discoveredElements, elements);
+        const automationStatus = calcTierAutomationStatus(discoveredElementIds);
+        const resonance = calcResonanceBonuses(elements);
+        const currentStorm = refreshStorm(activeStorm, now, discoveredElementIds);
+        const globalSpawnMultiplier = (activeBoosts.global_spawn_boost ?? 0) > now ? 2.0 : 1.0;
+        const goldBoostMultiplier = (activeBoosts.gold_boost ?? 0) > now ? 2.0 : 1.0;
 
         for (const el of elementsData) {
-          if (!isElementUnlocked(el.id, elements)) continue;
+          if (!discoveredElementIds.includes(el.id) || el.tier > automationStatus.unlockedTier) {
+            continue;
+          }
           const level = elementLevels[el.id] ?? 0;
 
           // 버프 배수 계산 (해당 원소 강화석이 활성 중이면 2배)
           const boostId = el.id + '_boost';
           const boostMultiplier = (activeBoosts[boostId] ?? 0) > now ? 2.0 : 1.0;
+          const tierBoostMultiplier = (activeBoosts[`tier_${el.tier}_boost`] ?? 0) > now ? 2.0 : 1.0;
+          const stormMultiplier =
+            currentStorm.expiresAt > now && currentStorm.elementId === el.id ? 5.0 : 1.0;
 
           // 원소 자동 생성 (프레스티지 + 영구 스폰 배율 적용)
           const rate =
             calcSpawnRate(el.id, level) *
             boostMultiplier *
+            tierBoostMultiplier *
+            stormMultiplier *
+            globalSpawnMultiplier *
             prestigeSpawnMultiplier *
-            permanentSpawnMultiplier;
+            permanentSpawnMultiplier *
+            resonance.spawnMultiplier;
           const prev = newAccumulators[el.id] ?? 0;
           const next = prev + rate * deltaSec;
           const spawned = Math.floor(next);
@@ -665,8 +1428,10 @@ export const useGameStore = create<GameState>()(
           goldGained +=
             calcEffectiveIdleRate(el.id, level) *
             deltaSec *
+            goldBoostMultiplier *
             prestigeGoldMultiplier *
-            permanentGoldMultiplier;
+            permanentGoldMultiplier *
+            resonance.goldMultiplier;
         }
 
         set((state) => {
@@ -674,7 +1439,12 @@ export const useGameStore = create<GameState>()(
           for (const [id, count] of Object.entries(spawnedElements)) {
             newElements[id] = (newElements[id] ?? 0) + count;
           }
+          const newDiscoveredElements = getDiscoveredElementIds(
+            state.discoveredElements,
+            newElements
+          );
           const goldToAdd = Math.floor(goldGained);
+          const collectedCount = Object.values(spawnedElements).reduce((sum, count) => sum + count, 0);
 
           // tickIdle에서도 gold_amount, element_count 등 업적 체크
           const checkState = {
@@ -696,9 +1466,15 @@ export const useGameStore = create<GameState>()(
 
           return {
             elements: newElements,
+            discoveredElements: newDiscoveredElements,
             gold: state.gold + goldToAdd + goldBonus,
             spawnAccumulators: newAccumulators,
             lastTickAt: Date.now(),
+            activeStorm: currentStorm,
+            dailyProgress: addDailyProgress(state.dailyProgress, {
+              elementsCollected: collectedCount,
+              goldEarned: goldToAdd + goldBonus,
+            }),
             unlockedAchievements: [
               ...state.unlockedAchievements,
               ...newlyUnlocked.map((a) => a.id),
@@ -715,6 +1491,7 @@ export const useGameStore = create<GameState>()(
         const {
           lastTickAt,
           elements,
+          discoveredElements,
           elementLevels,
           prestigeSpawnMultiplier,
           permanentSpawnMultiplier,
@@ -731,15 +1508,30 @@ export const useGameStore = create<GameState>()(
 
         const rewardElements: Record<string, number> = {};
         let rewardGold = 0;
+        const discoveredElementIds = getDiscoveredElementIds(discoveredElements, elements);
+        const automationStatus = calcTierAutomationStatus(discoveredElementIds);
+        const resonance = calcResonanceBonuses(elements);
+        const activeBoosts = get().activeBoosts;
+        const nowForBoosts = Date.now();
+        const globalSpawnMultiplier =
+          (activeBoosts.global_spawn_boost ?? 0) > nowForBoosts ? 2.0 : 1.0;
+        const goldBoostMultiplier = (activeBoosts.gold_boost ?? 0) > nowForBoosts ? 2.0 : 1.0;
 
         for (const el of elementsData) {
-          if (!isElementUnlocked(el.id, elements)) continue;
+          if (!discoveredElementIds.includes(el.id) || el.tier > automationStatus.unlockedTier) {
+            continue;
+          }
           const level = elementLevels[el.id] ?? 0;
+          const tierBoostMultiplier =
+            (activeBoosts[`tier_${el.tier}_boost`] ?? 0) > nowForBoosts ? 2.0 : 1.0;
 
           const spawned = Math.floor(
             calcSpawnRate(el.id, level) *
+              tierBoostMultiplier *
+              globalSpawnMultiplier *
               prestigeSpawnMultiplier *
               permanentSpawnMultiplier *
+              resonance.spawnMultiplier *
               offlineSec
           );
           if (spawned > 0) rewardElements[el.id] = spawned;
@@ -747,8 +1539,10 @@ export const useGameStore = create<GameState>()(
           rewardGold +=
             calcEffectiveIdleRate(el.id, level) *
             offlineSec *
+            goldBoostMultiplier *
             prestigeGoldMultiplier *
-            permanentGoldMultiplier;
+            permanentGoldMultiplier *
+            resonance.goldMultiplier;
         }
 
         set({
@@ -761,22 +1555,29 @@ export const useGameStore = create<GameState>()(
         });
       },
 
-      claimOfflineReward: () => {
-        const { pendingOfflineReward } = get();
-        if (!pendingOfflineReward) return;
+      claimOfflineReward: (multiplier = 1) => {
+        const safeMultiplier = Math.max(1, Math.floor(multiplier));
 
         set((state) => {
+          const pendingOfflineReward = state.pendingOfflineReward;
+          if (!pendingOfflineReward) return {};
+
           const newElements = { ...state.elements };
           for (const [id, count] of Object.entries(pendingOfflineReward.elements)) {
-            newElements[id] = (newElements[id] ?? 0) + count;
+            newElements[id] = (newElements[id] ?? 0) + count * safeMultiplier;
           }
+          const rewardGold = pendingOfflineReward.gold * safeMultiplier;
+          const newDiscoveredElements = getDiscoveredElementIds(
+            state.discoveredElements,
+            newElements
+          );
           const newStats: AchievementStats = {
             ...state.achievementStats,
             offlineClaimCount: state.achievementStats.offlineClaimCount + 1,
           };
           const checkState = {
             elements: newElements,
-            gold: state.gold + pendingOfflineReward.gold,
+            gold: state.gold + rewardGold,
             elementLevels: state.elementLevels,
             achievementStats: newStats,
             unlockedAchievements: state.unlockedAchievements,
@@ -790,12 +1591,21 @@ export const useGameStore = create<GameState>()(
           for (const ach of newlyUnlocked) {
             window.dispatchEvent(new CustomEvent('newAchievement', { detail: ach }));
           }
+          const collectedCount = Object.values(pendingOfflineReward.elements).reduce(
+            (sum, count) => sum + count * safeMultiplier,
+            0
+          );
 
           return {
             elements: newElements,
-            gold: state.gold + pendingOfflineReward.gold + goldBonus,
+            discoveredElements: newDiscoveredElements,
+            gold: state.gold + rewardGold + goldBonus,
             pendingOfflineReward: null,
             achievementStats: newStats,
+            dailyProgress: addDailyProgress(state.dailyProgress, {
+              elementsCollected: collectedCount,
+              goldEarned: rewardGold + goldBonus,
+            }),
             unlockedAchievements: [
               ...state.unlockedAchievements,
               ...newlyUnlocked.map((a) => a.id),
@@ -807,6 +1617,69 @@ export const useGameStore = create<GameState>()(
           };
         });
       },
+
+      harvestElement: (elementId) => {
+        let result: TapHarvestResult = { success: false, error: 'not_ready' };
+
+        set((state) => {
+          const el = elementsData.find((item) => item.id === elementId);
+          if (!el) {
+            result = { success: false, error: 'not_found' };
+            return {};
+          }
+
+          const discoveredElementIds = getDiscoveredElementIds(
+            state.discoveredElements,
+            state.elements
+          );
+          const automationStatus = calcTierAutomationStatus(discoveredElementIds);
+          const progress = state.spawnAccumulators[elementId] ?? 0;
+          if (
+            !discoveredElementIds.includes(elementId) ||
+            el.tier > automationStatus.unlockedTier ||
+            progress < TAP_HARVEST_THRESHOLD
+          ) {
+            result = { success: false, error: 'not_ready' };
+            return {};
+          }
+
+          const now = Date.now();
+          const level = state.elementLevels[elementId] ?? 0;
+          const goldBoostMultiplier = (state.activeBoosts.gold_boost ?? 0) > now ? 2.0 : 1.0;
+          const resonance = calcResonanceBonuses(state.elements);
+          const elementGain = Math.ceil(TAP_HARVEST_BONUS);
+          const goldGained = Math.ceil(
+            calcEffectiveIdleRate(elementId, level) *
+              5 *
+              TAP_HARVEST_BONUS *
+              goldBoostMultiplier *
+              state.prestigeGoldMultiplier *
+              state.permanentGoldMultiplier *
+              resonance.goldMultiplier
+          );
+          const elements = {
+            ...state.elements,
+            [elementId]: (state.elements[elementId] ?? 0) + elementGain,
+          };
+          const spawnAccumulators = {
+            ...state.spawnAccumulators,
+            [elementId]: 0,
+          };
+          result = { success: true, elementId, count: elementGain, goldGained };
+
+          return {
+            elements,
+            spawnAccumulators,
+            gold: state.gold + goldGained,
+            dailyProgress: addDailyProgress(state.dailyProgress, {
+              elementsCollected: elementGain,
+              goldEarned: goldGained,
+            }),
+          };
+        });
+
+        return result;
+      },
     }),
     {
       name: 'archetype-game-state',
@@ -814,10 +1687,17 @@ export const useGameStore = create<GameState>()(
       partialize: (state): PersistedState => ({
         activeTab: state.activeTab,
         elements: state.elements,
+        discoveredElements: state.discoveredElements,
         gold: state.gold,
         elementLevels: state.elementLevels,
+        comboCount: state.comboCount,
+        comboExpiresAt: state.comboExpiresAt,
         lastTickAt: state.lastTickAt,
         activeBoosts: state.activeBoosts,
+        claimedTierRewards: state.claimedTierRewards,
+        dailyProgress: state.dailyProgress,
+        activeStorm: state.activeStorm,
+        adRewardProgress: state.adRewardProgress,
         spawnAccumulators: state.spawnAccumulators,
         language: state.language,
         bgmEnabled: state.bgmEnabled,
@@ -831,6 +1711,9 @@ export const useGameStore = create<GameState>()(
         achievementStats: state.achievementStats,
         tutorialStep: state.tutorialStep,
         tutorialCompleted: state.tutorialCompleted,
+        welcomeGiftClaimed: state.welcomeGiftClaimed,
+        sfxEnabled: state.sfxEnabled,
+        hapticEnabled: state.hapticEnabled,
       }),
       onRehydrateStorage: () => (state) => {
         // 앱 재시작 시 localStorage에서 복원된 만료 부스트를 자동 정리
@@ -856,6 +1739,16 @@ export const useGameStore = create<GameState>()(
           state.achievementStats.tiersUnlocked = [];
         }
         if (!state.unlockedAchievements) state.unlockedAchievements = [];
+        state.discoveredElements = getDiscoveredElementIds(state.discoveredElements, state.elements);
+        if (!state.claimedTierRewards) state.claimedTierRewards = [];
+        state.dailyProgress = ensureDailyProgress(state.dailyProgress);
+        if (!state.activeStorm) state.activeStorm = null;
+        state.adRewardProgress = ensureAdRewardProgress(state.adRewardProgress);
+        if (!state.comboCount) state.comboCount = 0;
+        if (!state.comboExpiresAt) state.comboExpiresAt = 0;
+        if (!state.welcomeGiftClaimed) state.welcomeGiftClaimed = false;
+        if (state.sfxEnabled === undefined) state.sfxEnabled = true;
+        if (state.hapticEnabled === undefined) state.hapticEnabled = true;
         if (!state.permanentGoldMultiplier) state.permanentGoldMultiplier = 1.0;
         if (!state.permanentSpawnMultiplier) state.permanentSpawnMultiplier = 1.0;
         if (!state.prestigeCount) state.prestigeCount = 0;