feat(ui): 캐릭터 생성 화면 레트로 UI 전면 개편

- RetroPanel, RetroButton 사용으로 통일
- 스탯 표시 레트로 스타일 적용
- 종족/직업 선택 UI 개선
- 전체 레이아웃 레트로 RPG 느낌으로 변경

lib/src/features/new_character/new_character_screen.dart

@@ -13,6 +13,8 @@ import 'package:askiineverdie/src/core/util/deterministic_random.dart';
 import 'package:askiineverdie/src/core/l10n/game_data_l10n.dart';
 import 'package:askiineverdie/src/core/util/pq_logic.dart';
 import 'package:askiineverdie/src/features/new_character/widgets/race_preview.dart';
+import 'package:askiineverdie/src/shared/retro_colors.dart';
+import 'package:askiineverdie/src/shared/widgets/retro_widgets.dart';
 
 /// 캐릭터 생성 화면 (NewGuy.pas 포팅)
 class NewCharacterScreen extends StatefulWidget {
@@ -268,9 +270,19 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      backgroundColor: RetroColors.deepBrown,
       appBar: AppBar(
-        title: Text(L10n.of(context).newCharacterTitle),
+        backgroundColor: RetroColors.darkBrown,
+        title: Text(
+          L10n.of(context).newCharacterTitle.toUpperCase(),
+          style: const TextStyle(
+            fontFamily: 'PressStart2P',
+            fontSize: 12,
+            color: RetroColors.gold,
+          ),
+        ),
         centerTitle: true,
+        iconTheme: const IconThemeData(color: RetroColors.gold),
       ),
       body: SingleChildScrollView(
         padding: const EdgeInsets.all(16),
@@ -286,11 +298,15 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
             const SizedBox(height: 16),
 
             // 종족 미리보기 (Phase 5: 종족별 캐릭터 애니메이션)
-            Center(
+            RetroPanel(
+              title: 'PREVIEW',
+              padding: const EdgeInsets.all(8),
+              child: Center(
                 child: RacePreview(
                   raceId: _races[_selectedRaceIndex].raceId,
                 ),
               ),
+            ),
             const SizedBox(height: 16),
 
             // 종족/직업 선택 섹션
@@ -309,13 +325,10 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
             const SizedBox(height: 24),
 
             // Sold! 버튼
-            FilledButton.icon(
+            RetroTextButton(
+              text: L10n.of(context).soldButton,
+              icon: Icons.check,
               onPressed: _onSold,
-              icon: const Icon(Icons.check),
-              label: Text(L10n.of(context).soldButton),
-              style: FilledButton.styleFrom(
-                padding: const EdgeInsets.symmetric(vertical: 16),
-              ),
             ),
           ],
         ),
@@ -325,44 +338,56 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
 
   Widget _buildNameSection() {
     final l10n = L10n.of(context);
-    return Card(
+    return RetroPanel(
-      child: Padding(
+      title: 'NAME',
-        padding: const EdgeInsets.all(16),
       child: Row(
         children: [
           Expanded(
             child: TextField(
               controller: _nameController,
+              style: const TextStyle(
+                fontFamily: 'PressStart2P',
+                fontSize: 10,
+                color: RetroColors.textLight,
+              ),
               decoration: InputDecoration(
                 labelText: l10n.name,
-                  border: const OutlineInputBorder(),
+                labelStyle: const TextStyle(
+                  fontFamily: 'PressStart2P',
+                  fontSize: 8,
+                  color: RetroColors.gold,
+                ),
+                border: const OutlineInputBorder(
+                  borderSide: BorderSide(color: RetroColors.panelBorderInner),
+                ),
+                enabledBorder: const OutlineInputBorder(
+                  borderSide: BorderSide(color: RetroColors.panelBorderInner),
+                ),
+                focusedBorder: const OutlineInputBorder(
+                  borderSide: BorderSide(color: RetroColors.gold, width: 2),
+                ),
+                counterStyle: const TextStyle(color: RetroColors.textDisabled),
               ),
               maxLength: 30,
             ),
           ),
           const SizedBox(width: 8),
-            IconButton.filled(
+          RetroIconButton(
+            icon: Icons.casino,
             onPressed: _onGenerateName,
-              icon: const Icon(Icons.casino),
-              tooltip: l10n.generateName,
           ),
         ],
       ),
-      ),
     );
   }
 
   Widget _buildStatsSection() {
     final l10n = L10n.of(context);
-    return Card(
+    return RetroPanel(
-      child: Padding(
+      title: 'STATS',
-        padding: const EdgeInsets.all(16),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-            Text(l10n.stats, style: Theme.of(context).textTheme.titleMedium),
-            const SizedBox(height: 12),
-
           // 스탯 그리드
           Row(
             children: [
@@ -385,25 +410,28 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
           Container(
             padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
             decoration: BoxDecoration(
-                color: _getTotalColor().withValues(alpha: 0.3),
+              color: _getTotalColor().withValues(alpha: 0.2),
-                borderRadius: BorderRadius.circular(8),
+              border: Border.all(color: _getTotalColor(), width: 2),
-                border: Border.all(color: _getTotalColor()),
             ),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Text(
-                    l10n.total,
+                  l10n.total.toUpperCase(),
-                    style: const TextStyle(fontWeight: FontWeight.bold),
+                  style: const TextStyle(
+                    fontFamily: 'PressStart2P',
+                    fontSize: 8,
+                    fontWeight: FontWeight.bold,
+                    color: RetroColors.textLight,
+                  ),
                 ),
                 Text(
                   '$_total',
                   style: TextStyle(
-                      fontSize: 20,
+                    fontFamily: 'PressStart2P',
+                    fontSize: 14,
                     fontWeight: FontWeight.bold,
-                      color: _getTotalColor() == Colors.white
+                    color: _getTotalColor(),
-                          ? Colors.black
-                          : _getTotalColor(),
                   ),
                 ),
               ],
@@ -412,38 +440,39 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
           const SizedBox(height: 12),
 
           // Roll 버튼들
-            Wrap(
+          Row(
-              alignment: WrapAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
-              spacing: 16,
-              runSpacing: 8,
             children: [
-                OutlinedButton.icon(
+              RetroTextButton(
-                  onPressed: _onUnroll,
+                text: l10n.unroll,
-                  icon: const Icon(Icons.undo),
+                icon: Icons.undo,
-                  label: Text(l10n.unroll),
+                onPressed: _rollHistory.isEmpty ? null : _onUnroll,
-                  style: OutlinedButton.styleFrom(
+                isPrimary: false,
-                    foregroundColor: _rollHistory.isEmpty ? Colors.grey : null,
               ),
-                ),
+              const SizedBox(width: 16),
-                FilledButton.icon(
+              RetroTextButton(
+                text: l10n.roll,
+                icon: Icons.casino,
                 onPressed: _onReroll,
-                  icon: const Icon(Icons.casino),
-                  label: Text(l10n.roll),
               ),
             ],
           ),
           if (_rollHistory.isNotEmpty)
             Padding(
               padding: const EdgeInsets.only(top: 8),
+              child: Center(
                 child: Text(
                   game_l10n.uiRollHistory(_rollHistory.length),
-                  style: Theme.of(context).textTheme.bodySmall,
+                  style: const TextStyle(
-                  textAlign: TextAlign.center,
+                    fontFamily: 'PressStart2P',
+                    fontSize: 6,
+                    color: RetroColors.textDisabled,
+                  ),
+                ),
               ),
             ),
         ],
       ),
-      ),
     );
   }
 
@@ -452,16 +481,28 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
       margin: const EdgeInsets.all(4),
       padding: const EdgeInsets.symmetric(vertical: 8),
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+        color: RetroColors.panelBgLight,
-        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: RetroColors.panelBorderInner),
       ),
       child: Column(
         children: [
-          Text(label, style: Theme.of(context).textTheme.labelSmall),
+          Text(
+            label.toUpperCase(),
+            style: const TextStyle(
+              fontFamily: 'PressStart2P',
+              fontSize: 6,
+              color: RetroColors.gold,
+            ),
+          ),
           const SizedBox(height: 4),
           Text(
             '$value',
-            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            style: const TextStyle(
+              fontFamily: 'PressStart2P',
+              fontSize: 12,
+              fontWeight: FontWeight.bold,
+              color: RetroColors.textLight,
+            ),
           ),
         ],
       ),
@@ -469,18 +510,9 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
   }
 
   Widget _buildRaceSection() {
-    return Card(
+    return RetroPanel(
-      child: Padding(
+      title: 'RACE',
-        padding: const EdgeInsets.all(16),
+      child: SizedBox(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Text(
-              L10n.of(context).race,
-              style: Theme.of(context).textTheme.titleMedium,
-            ),
-            const SizedBox(height: 8),
-            SizedBox(
         height: 300,
         child: ListView.builder(
           controller: _raceScrollController,
@@ -488,33 +520,50 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
           itemBuilder: (context, index) {
             final isSelected = index == _selectedRaceIndex;
             final race = _races[index];
-                  return ListTile(
+            return GestureDetector(
-                    leading: Icon(
+              onTap: () => setState(() => _selectedRaceIndex = index),
-                      isSelected
+              child: Container(
-                          ? Icons.radio_button_checked
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-                          : Icons.radio_button_unchecked,
+                decoration: BoxDecoration(
-                      color: isSelected
+                  color: isSelected ? RetroColors.panelBgLight : null,
-                          ? Theme.of(context).colorScheme.primary
+                  border: isSelected
+                      ? Border.all(color: RetroColors.gold, width: 1)
                       : null,
                 ),
-                    title: Text(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        Icon(
+                          isSelected ? Icons.arrow_right : Icons.remove,
+                          size: 12,
+                          color: isSelected
+                              ? RetroColors.gold
+                              : RetroColors.textDisabled,
+                        ),
+                        const SizedBox(width: 4),
+                        Expanded(
+                          child: Text(
                             GameDataL10n.getRaceName(context, race.name),
                             style: TextStyle(
-                        fontWeight: isSelected
+                              fontFamily: 'PressStart2P',
-                            ? FontWeight.bold
+                              fontSize: 8,
-                            : FontWeight.normal,
+                              color: isSelected
+                                  ? RetroColors.gold
+                                  : RetroColors.textLight,
                             ),
                           ),
-                    subtitle: isSelected ? _buildRaceInfo(race) : null,
-                    dense: !isSelected,
-                    visualDensity: VisualDensity.compact,
-                    onTap: () => setState(() => _selectedRaceIndex = index),
-                  );
-                },
-              ),
                         ),
                       ],
                     ),
+                    if (isSelected) _buildRaceInfo(race),
+                  ],
+                ),
+              ),
+            );
+          },
+        ),
       ),
     );
   }
@@ -531,22 +580,23 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
         ? race.passives.map((p) => _translateRacePassive(p)).join(', ')
         : '';
 
-    return Column(
+    return Padding(
+      padding: const EdgeInsets.only(left: 16, top: 4),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           if (statMods.isNotEmpty)
             Text(
               statMods.join(', '),
-            style: Theme.of(context).textTheme.bodySmall,
+              style: const TextStyle(fontSize: 9, color: RetroColors.textLight),
             ),
           if (passiveDesc.isNotEmpty)
             Text(
               passiveDesc,
-            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+              style: const TextStyle(fontSize: 9, color: RetroColors.expGreen),
-              color: Theme.of(context).colorScheme.primary,
-            ),
             ),
         ],
+      ),
     );
   }
 
@@ -576,18 +626,9 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
   }
 
   Widget _buildKlassSection() {
-    return Card(
+    return RetroPanel(
-      child: Padding(
+      title: 'CLASS',
-        padding: const EdgeInsets.all(16),
+      child: SizedBox(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Text(
-              L10n.of(context).classTitle,
-              style: Theme.of(context).textTheme.titleMedium,
-            ),
-            const SizedBox(height: 8),
-            SizedBox(
         height: 300,
         child: ListView.builder(
           controller: _klassScrollController,
@@ -595,33 +636,50 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
           itemBuilder: (context, index) {
             final isSelected = index == _selectedKlassIndex;
             final klass = _klasses[index];
-                  return ListTile(
+            return GestureDetector(
-                    leading: Icon(
+              onTap: () => setState(() => _selectedKlassIndex = index),
-                      isSelected
+              child: Container(
-                          ? Icons.radio_button_checked
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-                          : Icons.radio_button_unchecked,
+                decoration: BoxDecoration(
-                      color: isSelected
+                  color: isSelected ? RetroColors.panelBgLight : null,
-                          ? Theme.of(context).colorScheme.primary
+                  border: isSelected
+                      ? Border.all(color: RetroColors.gold, width: 1)
                       : null,
                 ),
-                    title: Text(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        Icon(
+                          isSelected ? Icons.arrow_right : Icons.remove,
+                          size: 12,
+                          color: isSelected
+                              ? RetroColors.gold
+                              : RetroColors.textDisabled,
+                        ),
+                        const SizedBox(width: 4),
+                        Expanded(
+                          child: Text(
                             GameDataL10n.getKlassName(context, klass.name),
                             style: TextStyle(
-                        fontWeight: isSelected
+                              fontFamily: 'PressStart2P',
-                            ? FontWeight.bold
+                              fontSize: 8,
-                            : FontWeight.normal,
+                              color: isSelected
+                                  ? RetroColors.gold
+                                  : RetroColors.textLight,
                             ),
                           ),
-                    subtitle: isSelected ? _buildClassInfo(klass) : null,
-                    dense: !isSelected,
-                    visualDensity: VisualDensity.compact,
-                    onTap: () => setState(() => _selectedKlassIndex = index),
-                  );
-                },
-              ),
                         ),
                       ],
                     ),
+                    if (isSelected) _buildClassInfo(klass),
+                  ],
+                ),
+              ),
+            );
+          },
+        ),
       ),
     );
   }
@@ -638,22 +696,23 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
         ? klass.passives.map((p) => _translateClassPassive(p)).join(', ')
         : '';
 
-    return Column(
+    return Padding(
+      padding: const EdgeInsets.only(left: 16, top: 4),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           if (statMods.isNotEmpty)
             Text(
               statMods.join(', '),
-            style: Theme.of(context).textTheme.bodySmall,
+              style: const TextStyle(fontSize: 9, color: RetroColors.textLight),
             ),
           if (passiveDesc.isNotEmpty)
             Text(
               passiveDesc,
-            style: Theme.of(context).textTheme.bodySmall?.copyWith(
+              style: const TextStyle(fontSize: 9, color: RetroColors.expGreen),
-              color: Theme.of(context).colorScheme.secondary,
-            ),
             ),
         ],
+      ),
     );
   }
 
@@ -678,13 +737,81 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
 
   /// 테스트 모드 토글 위젯
   Widget _buildTestModeToggle() {
-    return Card(
+    return RetroPanel(
-      child: SwitchListTile(
+      title: 'OPTIONS',
-        title: Text(game_l10n.uiTestMode),
+      child: GestureDetector(
-        subtitle: Text(game_l10n.uiTestModeDesc),
+        onTap: () => setState(() => _testModeEnabled = !_testModeEnabled),
-        value: _testModeEnabled,
+        child: Container(
-        onChanged: (value) => setState(() => _testModeEnabled = value),
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
-        secondary: const Icon(Icons.phone_android),
+          child: Row(
+            children: [
+              Icon(
+                Icons.phone_android,
+                size: 18,
+                color: _testModeEnabled
+                    ? RetroColors.gold
+                    : RetroColors.textDisabled,
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      game_l10n.uiTestMode,
+                      style: TextStyle(
+                        fontFamily: 'PressStart2P',
+                        fontSize: 8,
+                        color: _testModeEnabled
+                            ? RetroColors.gold
+                            : RetroColors.textLight,
+                      ),
+                    ),
+                    const SizedBox(height: 4),
+                    Text(
+                      game_l10n.uiTestModeDesc,
+                      style: const TextStyle(
+                        fontFamily: 'PressStart2P',
+                        fontSize: 6,
+                        color: RetroColors.textDisabled,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              Container(
+                width: 40,
+                height: 20,
+                decoration: BoxDecoration(
+                  color: _testModeEnabled
+                      ? RetroColors.expGreen
+                      : RetroColors.panelBgLight,
+                  border: Border.all(
+                    color: _testModeEnabled
+                        ? RetroColors.expGreen
+                        : RetroColors.panelBorderInner,
+                    width: 2,
+                  ),
+                ),
+                child: Row(
+                  mainAxisAlignment: _testModeEnabled
+                      ? MainAxisAlignment.end
+                      : MainAxisAlignment.start,
+                  children: [
+                    Container(
+                      width: 16,
+                      height: 16,
+                      margin: const EdgeInsets.all(1),
+                      color: _testModeEnabled
+                          ? RetroColors.textLight
+                          : RetroColors.textDisabled,
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
       ),
     );
   }