diff --git a/lib/src/shared/retro_colors.dart b/lib/src/shared/retro_colors.dart
index 66c758c..20b7622 100644
--- a/lib/src/shared/retro_colors.dart
+++ b/lib/src/shared/retro_colors.dart
@@ -1,147 +1,297 @@
 import 'package:flutter/material.dart';
 
-/// 레트로 RPG 스타일 색상 팔레트 (8-bit/16-bit 클래식 RPG 느낌)
+/// 레트로 RPG 스타일 색상 팔레트 (다크/라이트 모드 지원)
+///
+/// 다크 모드: Dark Fantasy (도쿄 나이트 영감)
+/// 라이트 모드: Classic Parchment (양피지/세피아 톤)
 class RetroColors {
   RetroColors._();
 
   // ═══════════════════════════════════════════════════════════════════════
-  // 메인 UI 컬러 (Main UI Colors)
+  // 테마 감지 유틸리티 (Theme Detection)
   // ═══════════════════════════════════════════════════════════════════════
 
-  /// 골드 (테두리, 강조, 타이틀)
-  static const Color gold = Color(0xFFD4A84B);
-
-  /// 밝은 골드 (호버, 하이라이트)
-  static const Color goldLight = Color(0xFFE8C97A);
-
-  /// 어두운 골드 (눌림 상태)
-  static const Color goldDark = Color(0xFFB08A3A);
-
-  /// 갈색 (프레임, 테두리)
-  static const Color brown = Color(0xFF8B4513);
-
-  /// 크림색 (텍스트 배경, 밝은 패널)
-  static const Color cream = Color(0xFFF5E6C8);
-
-  /// 다크 브라운 (패널 배경)
-  static const Color darkBrown = Color(0xFF3D2817);
-
-  /// 매우 어두운 브라운 (딥 배경)
-  static const Color deepBrown = Color(0xFF2A1A0F);
+  /// 다크 모드 여부 확인
+  static bool isDarkMode(BuildContext context) =>
+      Theme.of(context).brightness == Brightness.dark;
 
   // ═══════════════════════════════════════════════════════════════════════
-  // 상태 바 컬러 (Status Bar Colors)
+  // 다크 모드 색상 (Dark Fantasy)
   // ═══════════════════════════════════════════════════════════════════════
 
-  /// HP 바 빨간색
-  static const Color hpRed = Color(0xFFCC3333);
+  // 배경 계열 (어두운 블루-그레이 기반)
+  static const Color _darkBg = Color(0xFF1A1B26);
+  static const Color _darkPanelBg = Color(0xFF24283B);
+  static const Color _darkSurface = Color(0xFF2A2E3F);
 
-  /// HP 바 빨간색 (어두운)
-  static const Color hpRedDark = Color(0xFF8B2222);
+  // 테두리/강조
+  static const Color _darkGold = Color(0xFFE0AF68);
+  static const Color _darkGoldLight = Color(0xFFF0C98A);
+  static const Color _darkGoldDark = Color(0xFFC89B50);
+  static const Color _darkBorder = Color(0xFF3B4261);
+  static const Color _darkBorderLight = Color(0xFF545C7E);
 
-  /// MP 바 파란색
-  static const Color mpBlue = Color(0xFF3366CC);
+  // 텍스트 (고대비)
+  static const Color _darkTextPrimary = Color(0xFFC0CAF5);
+  static const Color _darkTextSecondary = Color(0xFF9AA5CE);
+  static const Color _darkTextMuted = Color(0xFF565F89);
 
-  /// MP 바 파란색 (어두운)
-  static const Color mpBlueDark = Color(0xFF224488);
+  // 상태 색상
+  static const Color _darkHp = Color(0xFFF7768E);
+  static const Color _darkHpDark = Color(0xFFB85A6A);
+  static const Color _darkMp = Color(0xFF7AA2F7);
+  static const Color _darkMpDark = Color(0xFF5A7AB8);
+  static const Color _darkExp = Color(0xFF9ECE6A);
+  static const Color _darkExpDark = Color(0xFF7AA850);
+  static const Color _darkWarning = Color(0xFFFF9E64);
 
-  /// EXP/성공 초록색
-  static const Color expGreen = Color(0xFF33CC66);
-
-  /// EXP/성공 초록색 (어두운)
-  static const Color expGreenDark = Color(0xFF228844);
+  // 버튼
+  static const Color _darkButtonPrimary = Color(0xFF3D4260);
+  static const Color _darkButtonPressed = Color(0xFF2D3250);
 
   // ═══════════════════════════════════════════════════════════════════════
-  // ASCII 애니메이션 컬러 (기존 유지)
+  // 라이트 모드 색상 (Classic Parchment)
+  // ═══════════════════════════════════════════════════════════════════════
+
+  // 배경 계열 (양피지/크림 기반)
+  static const Color _lightBg = Color(0xFFFAF4ED);
+  static const Color _lightPanelBg = Color(0xFFF2E8DC);
+  static const Color _lightSurface = Color(0xFFFFFFFF);
+
+  // 테두리/강조
+  static const Color _lightGold = Color(0xFFB8860B);
+  static const Color _lightGoldLight = Color(0xFFD4A84B);
+  static const Color _lightGoldDark = Color(0xFF8B6914);
+  static const Color _lightBorder = Color(0xFFD4C4B0);
+  static const Color _lightBorderDark = Color(0xFF8B7355);
+
+  // 텍스트 (고대비)
+  static const Color _lightTextPrimary = Color(0xFF1F1F28);
+  static const Color _lightTextSecondary = Color(0xFF4A4458);
+  static const Color _lightTextMuted = Color(0xFF797593);
+
+  // 상태 색상
+  static const Color _lightHp = Color(0xFFD7263D);
+  static const Color _lightHpDark = Color(0xFFA81C30);
+  static const Color _lightMp = Color(0xFF2E5EAA);
+  static const Color _lightMpDark = Color(0xFF234A88);
+  static const Color _lightExp = Color(0xFF2E8B57);
+  static const Color _lightExpDark = Color(0xFF236B44);
+  static const Color _lightWarning = Color(0xFFCD7F32);
+
+  // 버튼
+  static const Color _lightButtonPrimary = Color(0xFFE8DDD0);
+  static const Color _lightButtonPressed = Color(0xFFD8C8B8);
+
+  // ═══════════════════════════════════════════════════════════════════════
+  // ASCII 애니메이션 컬러 (테마 무관, 고정)
   // ═══════════════════════════════════════════════════════════════════════
 
-  /// ASCII 흰색 (캐릭터/몬스터)
   static const Color asciiWhite = Color(0xFFFFFFFF);
-
-  /// ASCII 시안 (긍정 효과)
   static const Color asciiCyan = Color(0xFF00FFFF);
-
-  /// ASCII 마젠타 (부정 효과)
   static const Color asciiMagenta = Color(0xFFFF00FF);
-
-  /// ASCII 노란색 (경고, 중요)
   static const Color asciiYellow = Color(0xFFFFFF00);
-
-  /// ASCII 초록색 (성공, 회복)
   static const Color asciiGreen = Color(0xFF00FF00);
-
-  /// ASCII 빨간색 (데미지, 위험)
   static const Color asciiRed = Color(0xFFFF0000);
 
   // ═══════════════════════════════════════════════════════════════════════
-  // 텍스트 컬러 (Text Colors)
+  // 동적 색상 Getter (테마에 따라 자동 전환)
+  // 사용법: RetroColors.goldOf(context), RetroColors.textPrimaryOf(context)
   // ═══════════════════════════════════════════════════════════════════════
 
-  /// 기본 텍스트 (밝은 배경용)
-  static const Color textDark = Color(0xFF2A1A0F);
+  // === 배경 색상 ===
+  static Color backgroundOf(BuildContext context) =>
+      isDarkMode(context) ? _darkBg : _lightBg;
 
-  /// 기본 텍스트 (어두운 배경용)
-  static const Color textLight = Color(0xFFF5E6C8);
+  static Color panelBgOf(BuildContext context) =>
+      isDarkMode(context) ? _darkPanelBg : _lightPanelBg;
 
-  /// 비활성 텍스트
-  static const Color textDisabled = Color(0xFF7A6A5A);
+  static Color surfaceOf(BuildContext context) =>
+      isDarkMode(context) ? _darkSurface : _lightSurface;
+
+  // === 강조/골드 색상 ===
+  static Color goldOf(BuildContext context) =>
+      isDarkMode(context) ? _darkGold : _lightGold;
+
+  static Color goldLightOf(BuildContext context) =>
+      isDarkMode(context) ? _darkGoldLight : _lightGoldLight;
+
+  static Color goldDarkOf(BuildContext context) =>
+      isDarkMode(context) ? _darkGoldDark : _lightGoldDark;
+
+  // === 테두리 색상 ===
+  static Color borderOf(BuildContext context) =>
+      isDarkMode(context) ? _darkBorder : _lightBorder;
+
+  static Color borderLightOf(BuildContext context) =>
+      isDarkMode(context) ? _darkBorderLight : _lightBorderDark;
+
+  // === 텍스트 색상 ===
+  static Color textPrimaryOf(BuildContext context) =>
+      isDarkMode(context) ? _darkTextPrimary : _lightTextPrimary;
+
+  static Color textSecondaryOf(BuildContext context) =>
+      isDarkMode(context) ? _darkTextSecondary : _lightTextSecondary;
+
+  static Color textMutedOf(BuildContext context) =>
+      isDarkMode(context) ? _darkTextMuted : _lightTextMuted;
+
+  // === 상태 바 색상 ===
+  static Color hpOf(BuildContext context) =>
+      isDarkMode(context) ? _darkHp : _lightHp;
+
+  static Color hpDarkOf(BuildContext context) =>
+      isDarkMode(context) ? _darkHpDark : _lightHpDark;
+
+  static Color mpOf(BuildContext context) =>
+      isDarkMode(context) ? _darkMp : _lightMp;
+
+  static Color mpDarkOf(BuildContext context) =>
+      isDarkMode(context) ? _darkMpDark : _lightMpDark;
+
+  static Color expOf(BuildContext context) =>
+      isDarkMode(context) ? _darkExp : _lightExp;
+
+  static Color expDarkOf(BuildContext context) =>
+      isDarkMode(context) ? _darkExpDark : _lightExpDark;
+
+  static Color warningOf(BuildContext context) =>
+      isDarkMode(context) ? _darkWarning : _lightWarning;
+
+  // === 버튼 색상 ===
+  static Color buttonPrimaryOf(BuildContext context) =>
+      isDarkMode(context) ? _darkButtonPrimary : _lightButtonPrimary;
+
+  static Color buttonPressedOf(BuildContext context) =>
+      isDarkMode(context) ? _darkButtonPressed : _lightButtonPressed;
 
   // ═══════════════════════════════════════════════════════════════════════
-  // 버튼 컬러 (Button Colors)
+  // 레거시 호환 (Static Colors) - 마이그레이션 중 사용
+  // 점진적으로 context 버전으로 교체 예정
   // ═══════════════════════════════════════════════════════════════════════
 
-  /// 주요 버튼 배경
-  static const Color buttonPrimary = Color(0xFF5A4A3A);
+  /// @deprecated Use goldOf(context) instead
+  static const Color gold = _darkGold;
 
-  /// 주요 버튼 배경 (눌림)
-  static const Color buttonPrimaryPressed = Color(0xFF3A2A1A);
+  /// @deprecated Use goldLightOf(context) instead
+  static const Color goldLight = _darkGoldLight;
 
-  /// 보조 버튼 배경
+  /// @deprecated Use goldDarkOf(context) instead
+  static const Color goldDark = _darkGoldDark;
+
+  /// @deprecated Use textPrimary(context) instead
+  static const Color textLight = _darkTextPrimary;
+
+  /// @deprecated Use textSecondary(context) instead
+  static const Color textDark = _lightTextPrimary;
+
+  /// @deprecated Use textMuted(context) instead
+  static const Color textDisabled = _darkTextMuted;
+
+  /// @deprecated Use panelBgOf(context) instead
+  static const Color panelBg = _darkPanelBg;
+
+  /// @deprecated Use surfaceOf(context) instead
+  static const Color panelBgLight = _darkSurface;
+
+  /// @deprecated Use border(context) instead
+  static const Color panelBorderOuter = _darkBorder;
+
+  /// @deprecated Use borderLight(context) instead
+  static const Color panelBorderInner = _darkBorderLight;
+
+  /// @deprecated Use background(context) instead
+  static const Color deepBrown = _darkBg;
+
+  /// @deprecated 레거시 색상 - 다크 브라운
+  static const Color darkBrown = _darkPanelBg;
+
+  /// @deprecated 레거시 색상 - 브라운
+  static const Color brown = Color(0xFF8B4513);
+
+  /// @deprecated 레거시 색상 - 크림
+  static const Color cream = Color(0xFFF5E6C8);
+
+  /// @deprecated Use hp(context) instead
+  static const Color hpRed = _darkHp;
+
+  /// @deprecated Use hpDark(context) instead
+  static const Color hpRedDark = _darkHpDark;
+
+  /// @deprecated Use mp(context) instead
+  static const Color mpBlue = _darkMp;
+
+  /// @deprecated Use mpDark(context) instead
+  static const Color mpBlueDark = _darkMpDark;
+
+  /// @deprecated Use exp(context) instead
+  static const Color expGreen = _darkExp;
+
+  /// @deprecated Use expDark(context) instead
+  static const Color expGreenDark = _darkExpDark;
+
+  /// @deprecated Use buttonPrimary(context) instead
+  static const Color buttonPrimary = _darkButtonPrimary;
+
+  /// @deprecated Use buttonPressed(context) instead
+  static const Color buttonPrimaryPressed = _darkButtonPressed;
+
+  /// @deprecated 레거시 호환
   static const Color buttonSecondary = Color(0xFF4A3A2A);
 
-  /// 보조 버튼 배경 (눌림)
+  /// @deprecated 레거시 호환
   static const Color buttonSecondaryPressed = Color(0xFF2A1A0A);
 
   // ═══════════════════════════════════════════════════════════════════════
-  // 패널 컬러 (Panel Colors)
+  // ColorScheme 생성기 (Theme Data용)
   // ═══════════════════════════════════════════════════════════════════════
 
-  /// 패널 배경 (기본)
-  static const Color panelBg = Color(0xFF3D2817);
+  /// 다크 모드 ColorScheme
+  static ColorScheme get darkColorScheme => ColorScheme.dark(
+        primary: _darkGold,
+        onPrimary: _darkBg,
+        primaryContainer: _darkGoldDark,
+        onPrimaryContainer: _darkTextPrimary,
+        secondary: _darkBorder,
+        onSecondary: _darkTextPrimary,
+        secondaryContainer: _darkPanelBg,
+        onSecondaryContainer: _darkTextPrimary,
+        tertiary: _darkMp,
+        onTertiary: _darkBg,
+        tertiaryContainer: _darkMpDark,
+        onTertiaryContainer: _darkTextPrimary,
+        error: _darkHp,
+        onError: _darkBg,
+        surface: _darkBg,
+        onSurface: _darkTextPrimary,
+        surfaceContainerHighest: _darkPanelBg,
+        outline: _darkBorder,
+        outlineVariant: _darkBorderLight,
+      );
 
-  /// 패널 배경 (밝은)
-  static const Color panelBgLight = Color(0xFF5D4837);
+  /// 라이트 모드 ColorScheme
+  static ColorScheme get lightColorScheme => ColorScheme.light(
+        primary: _lightGold,
+        onPrimary: _lightSurface,
+        primaryContainer: _lightGoldLight,
+        onPrimaryContainer: _lightTextPrimary,
+        secondary: _lightBorder,
+        onSecondary: _lightTextPrimary,
+        secondaryContainer: _lightPanelBg,
+        onSecondaryContainer: _lightTextPrimary,
+        tertiary: _lightMp,
+        onTertiary: _lightSurface,
+        tertiaryContainer: _lightMpDark,
+        onTertiaryContainer: _lightSurface,
+        error: _lightHp,
+        onError: _lightSurface,
+        surface: _lightBg,
+        onSurface: _lightTextPrimary,
+        surfaceContainerHighest: _lightPanelBg,
+        outline: _lightBorder,
+        outlineVariant: _lightBorderDark,
+      );
 
-  /// 패널 테두리 (외곽, 어두운)
-  static const Color panelBorderOuter = Color(0xFF1A0F08);
-
-  /// 패널 테두리 (내곽, 밝은)
-  static const Color panelBorderInner = Color(0xFF8B7355);
-
-  // ═══════════════════════════════════════════════════════════════════════
-  // 유틸리티 메서드 (Utility Methods)
-  // ═══════════════════════════════════════════════════════════════════════
-
-  /// 레트로 테마용 ColorScheme 생성
-  static ColorScheme get colorScheme => ColorScheme.dark(
-    primary: gold,
-    onPrimary: textDark,
-    primaryContainer: goldDark,
-    onPrimaryContainer: textLight,
-    secondary: brown,
-    onSecondary: textLight,
-    secondaryContainer: darkBrown,
-    onSecondaryContainer: textLight,
-    tertiary: cream,
-    onTertiary: textDark,
-    tertiaryContainer: panelBgLight,
-    onTertiaryContainer: textLight,
-    error: hpRed,
-    onError: textLight,
-    surface: deepBrown,
-    onSurface: textLight,
-    surfaceContainerHighest: panelBg,
-    outline: panelBorderOuter,
-    outlineVariant: panelBorderInner,
-  );
+  /// @deprecated Use darkColorScheme or lightColorScheme instead
+  static ColorScheme get colorScheme => darkColorScheme;
 }