feat(ui): 장비 페이지 및 스탯 패널 개선

- equipment_page: 레이아웃 및 스타일 개선
- equipment_stats_panel: 스탯 표시 UI 업데이트

lib/src/features/game/pages/equipment_page.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:askiineverdie/l10n/app_localizations.dart';
 import 'package:askiineverdie/src/core/model/game_state.dart';
 import 'package:askiineverdie/src/features/game/widgets/equipment_stats_panel.dart';
+import 'package:askiineverdie/src/shared/retro_colors.dart';
 
 /// 장비 페이지 (캐로셀)
 ///
@@ -29,17 +30,35 @@ class EquipmentPage extends StatelessWidget {
   }
 
   Widget _buildSectionHeader(BuildContext context, String title) {
+    final gold = RetroColors.goldOf(context);
+    final goldDark = RetroColors.goldDarkOf(context);
+    final panelBg = RetroColors.panelBgOf(context);
+
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-      color: Theme.of(context).colorScheme.primaryContainer,
-      child: Text(
-        title,
-        style: TextStyle(
-          fontWeight: FontWeight.bold,
-          fontSize: 13,
-          color: Theme.of(context).colorScheme.onPrimaryContainer,
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      decoration: BoxDecoration(
+        color: panelBg,
+        border: Border(
+          top: BorderSide(color: gold, width: 2),
+          left: BorderSide(color: gold, width: 2),
+          bottom: BorderSide(color: goldDark, width: 2),
+          right: BorderSide(color: goldDark, width: 2),
         ),
       ),
+      child: Row(
+        children: [
+          Icon(Icons.shield, size: 16, color: gold),
+          const SizedBox(width: 8),
+          Text(
+            title,
+            style: TextStyle(
+              fontWeight: FontWeight.bold,
+              fontSize: 13,
+              color: gold,
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

lib/src/features/game/widgets/equipment_stats_panel.dart

@@ -7,6 +7,7 @@ import 'package:askiineverdie/src/core/model/equipment_item.dart';
 import 'package:askiineverdie/src/core/model/equipment_slot.dart';
 import 'package:askiineverdie/src/core/model/game_state.dart';
 import 'package:askiineverdie/src/core/model/item_stats.dart';
+import 'package:askiineverdie/src/shared/retro_colors.dart';
 
 /// 장비 스탯 표시 패널
 ///
@@ -130,7 +131,7 @@ class _EquipmentSlotTile extends StatelessWidget {
   }
 }
 
-/// 빈 슬롯 타일
+/// 빈 슬롯 타일 (레트로 스타일)
 class _EmptySlotTile extends StatelessWidget {
   const _EmptySlotTile({required this.slot});
 
@@ -138,6 +139,8 @@ class _EmptySlotTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final textMuted = RetroColors.textMutedOf(context);
+
     return ListTile(
       dense: true,
       contentPadding: const EdgeInsets.symmetric(horizontal: 8),
@@ -146,7 +149,7 @@ class _EmptySlotTile extends StatelessWidget {
         '[${_getSlotName(slot)}] ${l10n.uiEmpty}',
         style: TextStyle(
           fontSize: 11,
-          color: Colors.grey.shade600,
+          color: textMuted,
           fontStyle: FontStyle.italic,
         ),
       ),
@@ -154,7 +157,7 @@ class _EmptySlotTile extends StatelessWidget {
   }
 }
 
-/// 슬롯 아이콘
+/// 슬롯 아이콘 (레트로 스타일)
 class _SlotIcon extends StatelessWidget {
   const _SlotIcon({required this.slot, this.isEmpty = false});
 
@@ -177,15 +180,15 @@ class _SlotIcon extends StatelessWidget {
       EquipmentSlot.sollerets => Icons.do_not_step,
     };
 
-    return Icon(
-      icon,
-      size: 16,
-      color: isEmpty ? Colors.grey.shade400 : Colors.grey.shade700,
-    );
+    final color = isEmpty
+        ? RetroColors.textMutedOf(context)
+        : RetroColors.textSecondaryOf(context);
+
+    return Icon(icon, size: 16, color: color);
   }
 }
 
-/// 점수 배지
+/// 점수 배지 (레트로 스타일)
 class _ScoreBadge extends StatelessWidget {
   const _ScoreBadge({required this.score});
 
@@ -193,25 +196,29 @@ class _ScoreBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final gold = RetroColors.goldOf(context);
+    final surface = RetroColors.surfaceOf(context);
+
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
       decoration: BoxDecoration(
-        color: Colors.blueGrey.shade100,
-        borderRadius: BorderRadius.circular(8),
+        color: surface,
+        border: Border.all(color: gold, width: 1),
+        borderRadius: BorderRadius.circular(4),
       ),
       child: Text(
         '$score',
         style: TextStyle(
           fontSize: 10,
           fontWeight: FontWeight.bold,
-          color: Colors.blueGrey.shade700,
+          color: gold,
         ),
       ),
     );
   }
 }
 
-/// 장비 점수 총합 헤더
+/// 장비 점수 총합 헤더 (레트로 스타일)
 class _TotalScoreHeader extends StatelessWidget {
   const _TotalScoreHeader({
     required this.totalScore,
@@ -225,26 +232,29 @@ class _TotalScoreHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final gold = RetroColors.goldOf(context);
+    final goldDark = RetroColors.goldDarkOf(context);
+    final panelBg = RetroColors.panelBgOf(context);
+    final border = RetroColors.borderOf(context);
+    final textPrimary = RetroColors.textPrimaryOf(context);
+    final textSecondary = RetroColors.textSecondaryOf(context);
+
     return Container(
       margin: const EdgeInsets.only(bottom: 8),
       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
       decoration: BoxDecoration(
-        gradient: LinearGradient(
-          colors: [Colors.blueGrey.shade700, Colors.blueGrey.shade600],
+        color: panelBg,
+        border: Border(
+          top: BorderSide(color: gold, width: 2),
+          left: BorderSide(color: gold, width: 2),
+          bottom: BorderSide(color: goldDark, width: 2),
+          right: BorderSide(color: goldDark, width: 2),
         ),
-        borderRadius: BorderRadius.circular(8),
-        boxShadow: [
-          BoxShadow(
-            color: Colors.black.withValues(alpha: 0.2),
-            blurRadius: 4,
-            offset: const Offset(0, 2),
-          ),
-        ],
       ),
       child: Row(
         children: [
           // 장비 아이콘
-          const Icon(Icons.shield, size: 20, color: Colors.white70),
+          Icon(Icons.shield, size: 20, color: gold),
           const SizedBox(width: 8),
 
           // 총합 점수
@@ -254,14 +264,14 @@ class _TotalScoreHeader extends StatelessWidget {
               children: [
                 Text(
                   l10n.uiEquipmentScore,
-                  style: const TextStyle(fontSize: 10, color: Colors.white70),
+                  style: TextStyle(fontSize: 10, color: textSecondary),
                 ),
                 Text(
                   '$totalScore',
-                  style: const TextStyle(
+                  style: TextStyle(
                     fontSize: 18,
                     fontWeight: FontWeight.bold,
-                    color: Colors.white,
+                    color: gold,
                   ),
                 ),
               ],
@@ -272,15 +282,15 @@ class _TotalScoreHeader extends StatelessWidget {
           Container(
             padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
             decoration: BoxDecoration(
-              color: Colors.white.withValues(alpha: 0.2),
-              borderRadius: BorderRadius.circular(12),
+              color: border,
+              borderRadius: BorderRadius.circular(4),
             ),
             child: Text(
               '$equippedCount / $totalSlots',
-              style: const TextStyle(
+              style: TextStyle(
                 fontSize: 11,
                 fontWeight: FontWeight.w500,
-                color: Colors.white,
+                color: textPrimary,
               ),
             ),
           ),
@@ -381,7 +391,7 @@ class _StatsGrid extends StatelessWidget {
     if (entries.isEmpty) {
       return Text(
         l10n.uiNoBonusStats,
-        style: const TextStyle(fontSize: 10, color: Colors.grey),
+        style: TextStyle(fontSize: 10, color: RetroColors.textMutedOf(context)),
       );
     }
 
@@ -400,7 +410,7 @@ class _StatEntry {
   final String value;
 }
 
-/// 스탯 칩
+/// 스탯 칩 (레트로 스타일)
 class _StatChip extends StatelessWidget {
   const _StatChip({required this.entry});
 
@@ -408,22 +418,32 @@ class _StatChip extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final surface = RetroColors.surfaceOf(context);
+    final border = RetroColors.borderOf(context);
+    final textMuted = RetroColors.textMutedOf(context);
+    final textPrimary = RetroColors.textPrimaryOf(context);
+
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
       decoration: BoxDecoration(
-        color: Colors.grey.shade200,
-        borderRadius: BorderRadius.circular(4),
+        color: surface,
+        border: Border.all(color: border, width: 1),
+        borderRadius: BorderRadius.circular(2),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
           Text(
             '${entry.label}: ',
-            style: TextStyle(fontSize: 9, color: Colors.grey.shade600),
+            style: TextStyle(fontSize: 9, color: textMuted),
           ),
           Text(
             entry.value,
-            style: const TextStyle(fontSize: 9, fontWeight: FontWeight.bold),
+            style: TextStyle(
+              fontSize: 9,
+              fontWeight: FontWeight.bold,
+              color: textPrimary,
+            ),
           ),
         ],
       ),
@@ -431,7 +451,7 @@ class _StatChip extends StatelessWidget {
   }
 }
 
-/// 아이템 메타 정보 행
+/// 아이템 메타 정보 행 (레트로 스타일)
 class _ItemMetaRow extends StatelessWidget {
   const _ItemMetaRow({required this.item});
 
@@ -440,12 +460,13 @@ class _ItemMetaRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final rarityName = _getTranslatedRarity(item.rarity);
+    final textMuted = RetroColors.textMutedOf(context);
 
     return Row(
       children: [
         Text(
           l10n.uiLevel(item.level),
-          style: const TextStyle(fontSize: 9, color: Colors.grey),
+          style: TextStyle(fontSize: 9, color: textMuted),
         ),
         const SizedBox(width: 8),
         Text(
@@ -459,7 +480,7 @@ class _ItemMetaRow extends StatelessWidget {
         const SizedBox(width: 8),
         Text(
           l10n.uiWeight(item.weight),
-          style: const TextStyle(fontSize: 9, color: Colors.grey),
+          style: TextStyle(fontSize: 9, color: textMuted),
         ),
       ],
     );