feat(ui): 레트로 다이얼로그 및 앱 테마 개선

- RetroDialog 스타일 업데이트
- 앱 테마 색상 및 스타일 통일
- 버튼/텍스트 스타일 일관성 강화

lib/src/shared/widgets/retro_dialog.dart

@@ -5,6 +5,7 @@ import 'package:askiineverdie/src/shared/retro_colors.dart';
 /// 레트로 스타일 다이얼로그 베이스 위젯
 ///
 /// 8-bit RPG 스타일의 다이얼로그 프레임
+/// 라이트/다크 모드 자동 지원
 class RetroDialog extends StatelessWidget {
   const RetroDialog({
     super.key,
@@ -13,7 +14,7 @@ class RetroDialog extends StatelessWidget {
     this.titleIcon,
     this.maxWidth = 500,
     this.maxHeight = 600,
-    this.accentColor = RetroColors.gold,
+    this.accentColor,
   });
 
   final String title;
@@ -21,25 +22,29 @@ class RetroDialog extends StatelessWidget {
   final String? titleIcon;
   final double maxWidth;
   final double maxHeight;
-  final Color accentColor;
+  final Color? accentColor;
 
   @override
   Widget build(BuildContext context) {
+    final accent = accentColor ?? RetroColors.goldOf(context);
+    final panelBackground = RetroColors.panelBgOf(context);
+    final borderColor = RetroColors.borderOf(context);
+
     return Dialog(
       backgroundColor: Colors.transparent,
       child: Container(
         constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
         decoration: BoxDecoration(
-          color: RetroColors.panelBg,
+          color: panelBackground,
           border: Border(
-            top: BorderSide(color: accentColor, width: 3),
-            left: BorderSide(color: accentColor, width: 3),
-            bottom: const BorderSide(color: RetroColors.panelBorderOuter, width: 3),
-            right: const BorderSide(color: RetroColors.panelBorderOuter, width: 3),
+            top: BorderSide(color: accent, width: 3),
+            left: BorderSide(color: accent, width: 3),
+            bottom: BorderSide(color: borderColor, width: 3),
+            right: BorderSide(color: borderColor, width: 3),
           ),
           boxShadow: [
             BoxShadow(
-              color: accentColor.withValues(alpha: 0.3),
+              color: accent.withValues(alpha: 0.3),
               blurRadius: 20,
               spreadRadius: 2,
             ),
@@ -49,7 +54,7 @@ class RetroDialog extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           children: [
             // 헤더 바
-            _buildHeader(context),
+            _buildHeader(context, accent),
             // 본문
             Flexible(child: child),
           ],
@@ -58,14 +63,16 @@ class RetroDialog extends StatelessWidget {
     );
   }
 
-  Widget _buildHeader(BuildContext context) {
+  Widget _buildHeader(BuildContext context, Color accent) {
+    final mutedColor = RetroColors.textMutedOf(context);
+
     return Container(
       width: double.infinity,
       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
       decoration: BoxDecoration(
-        color: accentColor.withValues(alpha: 0.2),
+        color: accent.withValues(alpha: 0.2),
         border: Border(
-          bottom: BorderSide(color: accentColor, width: 2),
+          bottom: BorderSide(color: accent, width: 2),
         ),
       ),
       child: Row(
@@ -73,7 +80,7 @@ class RetroDialog extends StatelessWidget {
           if (titleIcon != null) ...[
             Text(
               titleIcon!,
-              style: TextStyle(fontSize: 14, color: accentColor),
+              style: TextStyle(fontSize: 14, color: accent),
             ),
             const SizedBox(width: 8),
           ],
@@ -83,7 +90,7 @@ class RetroDialog extends StatelessWidget {
               style: TextStyle(
                 fontFamily: 'PressStart2P',
                 fontSize: 10,
-                color: accentColor,
+                color: accent,
                 letterSpacing: 1,
               ),
             ),
@@ -93,14 +100,14 @@ class RetroDialog extends StatelessWidget {
             child: Container(
               padding: const EdgeInsets.all(4),
               decoration: BoxDecoration(
-                border: Border.all(color: RetroColors.textDisabled, width: 1),
+                border: Border.all(color: mutedColor, width: 1),
               ),
-              child: const Text(
+              child: Text(
                 'X',
                 style: TextStyle(
                   fontFamily: 'PressStart2P',
                   fontSize: 8,
-                  color: RetroColors.textDisabled,
+                  color: mutedColor,
                 ),
               ),
             ),
@@ -112,37 +119,42 @@ class RetroDialog extends StatelessWidget {
 }
 
 /// 레트로 스타일 탭 바
+/// 라이트/다크 모드 자동 지원
 class RetroTabBar extends StatelessWidget {
   const RetroTabBar({
     super.key,
     required this.controller,
     required this.tabs,
-    this.accentColor = RetroColors.gold,
+    this.accentColor,
   });
 
   final TabController controller;
   final List<String> tabs;
-  final Color accentColor;
+  final Color? accentColor;
 
   @override
   Widget build(BuildContext context) {
+    final accent = accentColor ?? RetroColors.goldOf(context);
+    final borderColor = RetroColors.borderOf(context);
+    final mutedColor = RetroColors.textMutedOf(context);
+
     return Container(
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
         border: Border(
-          bottom: BorderSide(color: RetroColors.panelBorderOuter, width: 2),
+          bottom: BorderSide(color: borderColor, width: 2),
         ),
       ),
       child: TabBar(
         controller: controller,
         isScrollable: tabs.length > 3,
         indicator: BoxDecoration(
-          color: accentColor.withValues(alpha: 0.3),
+          color: accent.withValues(alpha: 0.3),
           border: Border(
-            bottom: BorderSide(color: accentColor, width: 2),
+            bottom: BorderSide(color: accent, width: 2),
           ),
         ),
-        labelColor: accentColor,
-        unselectedLabelColor: RetroColors.textDisabled,
+        labelColor: accent,
+        unselectedLabelColor: mutedColor,
         labelStyle: const TextStyle(
           fontFamily: 'PressStart2P',
           fontSize: 7,
@@ -159,20 +171,23 @@ class RetroTabBar extends StatelessWidget {
 }
 
 /// 레트로 스타일 섹션 헤더
+/// 라이트/다크 모드 자동 지원
 class RetroSectionHeader extends StatelessWidget {
   const RetroSectionHeader({
     super.key,
     required this.title,
     this.icon,
-    this.accentColor = RetroColors.gold,
+    this.accentColor,
   });
 
   final String title;
   final String? icon;
-  final Color accentColor;
+  final Color? accentColor;
 
   @override
   Widget build(BuildContext context) {
+    final accent = accentColor ?? RetroColors.goldOf(context);
+
     return Padding(
       padding: const EdgeInsets.only(bottom: 8),
       child: Row(
@@ -180,7 +195,7 @@ class RetroSectionHeader extends StatelessWidget {
           if (icon != null) ...[
             Text(
               icon!,
-              style: TextStyle(fontSize: 12, color: accentColor),
+              style: TextStyle(fontSize: 12, color: accent),
             ),
             const SizedBox(width: 6),
           ],
@@ -189,7 +204,7 @@ class RetroSectionHeader extends StatelessWidget {
             style: TextStyle(
               fontFamily: 'PressStart2P',
               fontSize: 8,
-              color: accentColor,
+              color: accent,
             ),
           ),
           const SizedBox(width: 8),
@@ -199,8 +214,8 @@ class RetroSectionHeader extends StatelessWidget {
               decoration: BoxDecoration(
                 gradient: LinearGradient(
                   colors: [
-                    accentColor,
-                    accentColor.withValues(alpha: 0.3),
+                    accent,
+                    accent.withValues(alpha: 0.3),
                     Colors.transparent,
                   ],
                 ),
@@ -214,6 +229,7 @@ class RetroSectionHeader extends StatelessWidget {
 }
 
 /// 레트로 스타일 정보 박스
+/// 라이트/다크 모드 자동 지원
 class RetroInfoBox extends StatelessWidget {
   const RetroInfoBox({
     super.key,
@@ -226,19 +242,23 @@ class RetroInfoBox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final bgColor = backgroundColor ?? RetroColors.backgroundOf(context);
+    final borderColor = RetroColors.borderOf(context);
+    final textColor = RetroColors.textPrimaryOf(context);
+
     return Container(
       width: double.infinity,
       padding: const EdgeInsets.all(10),
       decoration: BoxDecoration(
-        color: backgroundColor ?? RetroColors.deepBrown,
-        border: Border.all(color: RetroColors.panelBorderOuter, width: 1),
+        color: bgColor,
+        border: Border.all(color: borderColor, width: 1),
       ),
       child: Text(
         content,
-        style: const TextStyle(
+        style: TextStyle(
           fontFamily: 'PressStart2P',
           fontSize: 7,
-          color: RetroColors.textLight,
+          color: textColor,
           height: 1.8,
         ),
       ),
@@ -247,22 +267,27 @@ class RetroInfoBox extends StatelessWidget {
 }
 
 /// 레트로 스타일 통계 행
+/// 라이트/다크 모드 자동 지원
 class RetroStatRow extends StatelessWidget {
   const RetroStatRow({
     super.key,
     required this.label,
     required this.value,
     this.highlight = false,
-    this.highlightColor = RetroColors.gold,
+    this.highlightColor,
   });
 
   final String label;
   final String value;
   final bool highlight;
-  final Color highlightColor;
+  final Color? highlightColor;
 
   @override
   Widget build(BuildContext context) {
+    final accent = highlightColor ?? RetroColors.goldOf(context);
+    final mutedColor = RetroColors.textMutedOf(context);
+    final textColor = RetroColors.textPrimaryOf(context);
+
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 3),
       child: Row(
@@ -270,10 +295,10 @@ class RetroStatRow extends StatelessWidget {
         children: [
           Text(
             label,
-            style: const TextStyle(
+            style: TextStyle(
               fontFamily: 'PressStart2P',
               fontSize: 6,
-              color: RetroColors.textDisabled,
+              color: mutedColor,
             ),
           ),
           Container(
@@ -282,8 +307,8 @@ class RetroStatRow extends StatelessWidget {
                 : null,
             decoration: highlight
                 ? BoxDecoration(
-                    color: highlightColor.withValues(alpha: 0.2),
-                    border: Border.all(color: highlightColor, width: 1),
+                    color: accent.withValues(alpha: 0.2),
+                    border: Border.all(color: accent, width: 1),
                   )
                 : null,
             child: Text(
@@ -291,7 +316,7 @@ class RetroStatRow extends StatelessWidget {
               style: TextStyle(
                 fontFamily: 'JetBrainsMono',
                 fontSize: 9,
-                color: highlight ? highlightColor : RetroColors.textLight,
+                color: highlight ? accent : textColor,
                 fontWeight: FontWeight.bold,
               ),
             ),