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,9 +298,13 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
             const SizedBox(height: 16),
 
             // 종족 미리보기 (Phase 5: 종족별 캐릭터 애니메이션)
-            Center(
+            RetroPanel(
-              child: RacePreview(
+              title: 'PREVIEW',
-                raceId: _races[_selectedRaceIndex].raceId,
+              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,124 +338,140 @@ 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(
-        child: Row(
+        children: [
-          children: [
+          Expanded(
-            Expanded(
+            child: TextField(
-              child: TextField(
+              controller: _nameController,
-                controller: _nameController,
+              style: const TextStyle(
-                decoration: InputDecoration(
+                fontFamily: 'PressStart2P',
-                  labelText: l10n.name,
+                fontSize: 10,
-                  border: const OutlineInputBorder(),
+                color: RetroColors.textLight,
-                ),
-                maxLength: 30,
               ),
+              decoration: InputDecoration(
+                labelText: l10n.name,
+                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(
+          const SizedBox(width: 8),
-              onPressed: _onGenerateName,
+          RetroIconButton(
-              icon: const Icon(Icons.casino),
+            icon: Icons.casino,
-              tooltip: l10n.generateName,
+            onPressed: _onGenerateName,
-            ),
+          ),
-          ],
+        ],
-        ),
       ),
     );
   }
 
   Widget _buildStatsSection() {
     final l10n = L10n.of(context);
-    return Card(
+    return RetroPanel(
-      child: Padding(
+      title: 'STATS',
-        padding: const EdgeInsets.all(16),
+      child: Column(
-        child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
-          crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
-          children: [
+          // 스탯 그리드
-            Text(l10n.stats, style: Theme.of(context).textTheme.titleMedium),
+          Row(
-            const SizedBox(height: 12),
+            children: [
+              Expanded(child: _buildStatTile(l10n.statStr, _str)),
+              Expanded(child: _buildStatTile(l10n.statCon, _con)),
+              Expanded(child: _buildStatTile(l10n.statDex, _dex)),
+            ],
+          ),
+          const SizedBox(height: 8),
+          Row(
+            children: [
+              Expanded(child: _buildStatTile(l10n.statInt, _int)),
+              Expanded(child: _buildStatTile(l10n.statWis, _wis)),
+              Expanded(child: _buildStatTile(l10n.statCha, _cha)),
+            ],
+          ),
+          const SizedBox(height: 12),
 
-            // 스탯 그리드
+          // Total
-            Row(
+          Container(
-              children: [
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-                Expanded(child: _buildStatTile(l10n.statStr, _str)),
+            decoration: BoxDecoration(
-                Expanded(child: _buildStatTile(l10n.statCon, _con)),
+              color: _getTotalColor().withValues(alpha: 0.2),
-                Expanded(child: _buildStatTile(l10n.statDex, _dex)),
+              border: Border.all(color: _getTotalColor(), width: 2),
-              ],
             ),
-            const SizedBox(height: 8),
+            child: Row(
-            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                Expanded(child: _buildStatTile(l10n.statInt, _int)),
+                Text(
-                Expanded(child: _buildStatTile(l10n.statWis, _wis)),
+                  l10n.total.toUpperCase(),
-                Expanded(child: _buildStatTile(l10n.statCha, _cha)),
+                  style: const TextStyle(
-              ],
+                    fontFamily: 'PressStart2P',
-            ),
+                    fontSize: 8,
-            const SizedBox(height: 12),
+                    fontWeight: FontWeight.bold,
-
+                    color: RetroColors.textLight,
-            // Total
-            Container(
-              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-              decoration: BoxDecoration(
-                color: _getTotalColor().withValues(alpha: 0.3),
-                borderRadius: BorderRadius.circular(8),
-                border: Border.all(color: _getTotalColor()),
-              ),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  Text(
-                    l10n.total,
-                    style: const TextStyle(fontWeight: FontWeight.bold),
-                  ),
-                  Text(
-                    '$_total',
-                    style: TextStyle(
-                      fontSize: 20,
-                      fontWeight: FontWeight.bold,
-                      color: _getTotalColor() == Colors.white
-                          ? Colors.black
-                          : _getTotalColor(),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            const SizedBox(height: 12),
-
-            // Roll 버튼들
-            Wrap(
-              alignment: WrapAlignment.center,
-              spacing: 16,
-              runSpacing: 8,
-              children: [
-                OutlinedButton.icon(
-                  onPressed: _onUnroll,
-                  icon: const Icon(Icons.undo),
-                  label: Text(l10n.unroll),
-                  style: OutlinedButton.styleFrom(
-                    foregroundColor: _rollHistory.isEmpty ? Colors.grey : null,
                   ),
                 ),
-                FilledButton.icon(
+                Text(
-                  onPressed: _onReroll,
+                  '$_total',
-                  icon: const Icon(Icons.casino),
+                  style: TextStyle(
-                  label: Text(l10n.roll),
+                    fontFamily: 'PressStart2P',
+                    fontSize: 14,
+                    fontWeight: FontWeight.bold,
+                    color: _getTotalColor(),
+                  ),
                 ),
               ],
             ),
-            if (_rollHistory.isNotEmpty)
+          ),
-              Padding(
+          const SizedBox(height: 12),
-                padding: const EdgeInsets.only(top: 8),
+
+          // Roll 버튼들
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              RetroTextButton(
+                text: l10n.unroll,
+                icon: Icons.undo,
+                onPressed: _rollHistory.isEmpty ? null : _onUnroll,
+                isPrimary: false,
+              ),
+              const SizedBox(width: 16),
+              RetroTextButton(
+                text: l10n.roll,
+                icon: Icons.casino,
+                onPressed: _onReroll,
+              ),
+            ],
+          ),
+          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,51 +510,59 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
   }
 
   Widget _buildRaceSection() {
-    return Card(
+    return RetroPanel(
-      child: Padding(
+      title: 'RACE',
-        padding: const EdgeInsets.all(16),
+      child: SizedBox(
-        child: Column(
+        height: 300,
-          crossAxisAlignment: CrossAxisAlignment.start,
+        child: ListView.builder(
-          children: [
+          controller: _raceScrollController,
-            Text(
+          itemCount: _races.length,
-              L10n.of(context).race,
+          itemBuilder: (context, index) {
-              style: Theme.of(context).textTheme.titleMedium,
+            final isSelected = index == _selectedRaceIndex;
-            ),
+            final race = _races[index];
-            const SizedBox(height: 8),
+            return GestureDetector(
-            SizedBox(
+              onTap: () => setState(() => _selectedRaceIndex = index),
-              height: 300,
+              child: Container(
-              child: ListView.builder(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-                controller: _raceScrollController,
+                decoration: BoxDecoration(
-                itemCount: _races.length,
+                  color: isSelected ? RetroColors.panelBgLight : null,
-                itemBuilder: (context, index) {
+                  border: isSelected
-                  final isSelected = index == _selectedRaceIndex;
+                      ? Border.all(color: RetroColors.gold, width: 1)
-                  final race = _races[index];
+                      : null,
-                  return ListTile(
+                ),
-                    leading: Icon(
+                child: Column(
-                      isSelected
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                          ? Icons.radio_button_checked
+                  children: [
-                          : Icons.radio_button_unchecked,
+                    Row(
-                      color: isSelected
+                      children: [
-                          ? Theme.of(context).colorScheme.primary
+                        Icon(
-                          : null,
+                          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(
+                              fontFamily: 'PressStart2P',
+                              fontSize: 8,
+                              color: isSelected
+                                  ? RetroColors.gold
+                                  : RetroColors.textLight,
+                            ),
+                          ),
+                        ),
+                      ],
                     ),
-                    title: Text(
+                    if (isSelected) _buildRaceInfo(race),
-                      GameDataL10n.getRaceName(context, race.name),
+                  ],
-                      style: TextStyle(
+                ),
-                        fontWeight: isSelected
-                            ? FontWeight.bold
-                            : FontWeight.normal,
-                      ),
-                    ),
-                    subtitle: isSelected ? _buildRaceInfo(race) : null,
-                    dense: !isSelected,
-                    visualDensity: VisualDensity.compact,
-                    onTap: () => setState(() => _selectedRaceIndex = index),
-                  );
-                },
               ),
-            ),
+            );
-          ],
+          },
         ),
       ),
     );
@@ -531,22 +580,23 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
         ? race.passives.map((p) => _translateRacePassive(p)).join(', ')
         : '';
 
-    return Column(
+    return Padding(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      padding: const EdgeInsets.only(left: 16, top: 4),
-      children: [
+      child: Column(
-        if (statMods.isNotEmpty)
+        crossAxisAlignment: CrossAxisAlignment.start,
-          Text(
+        children: [
-            statMods.join(', '),
+          if (statMods.isNotEmpty)
-            style: Theme.of(context).textTheme.bodySmall,
+            Text(
-          ),
+              statMods.join(', '),
-        if (passiveDesc.isNotEmpty)
+              style: const TextStyle(fontSize: 9, color: RetroColors.textLight),
-          Text(
-            passiveDesc,
-            style: Theme.of(context).textTheme.bodySmall?.copyWith(
-              color: Theme.of(context).colorScheme.primary,
             ),
-          ),
+          if (passiveDesc.isNotEmpty)
-      ],
+            Text(
+              passiveDesc,
+              style: const TextStyle(fontSize: 9, color: RetroColors.expGreen),
+            ),
+        ],
+      ),
     );
   }
 
@@ -576,51 +626,59 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
   }
 
   Widget _buildKlassSection() {
-    return Card(
+    return RetroPanel(
-      child: Padding(
+      title: 'CLASS',
-        padding: const EdgeInsets.all(16),
+      child: SizedBox(
-        child: Column(
+        height: 300,
-          crossAxisAlignment: CrossAxisAlignment.start,
+        child: ListView.builder(
-          children: [
+          controller: _klassScrollController,
-            Text(
+          itemCount: _klasses.length,
-              L10n.of(context).classTitle,
+          itemBuilder: (context, index) {
-              style: Theme.of(context).textTheme.titleMedium,
+            final isSelected = index == _selectedKlassIndex;
-            ),
+            final klass = _klasses[index];
-            const SizedBox(height: 8),
+            return GestureDetector(
-            SizedBox(
+              onTap: () => setState(() => _selectedKlassIndex = index),
-              height: 300,
+              child: Container(
-              child: ListView.builder(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-                controller: _klassScrollController,
+                decoration: BoxDecoration(
-                itemCount: _klasses.length,
+                  color: isSelected ? RetroColors.panelBgLight : null,
-                itemBuilder: (context, index) {
+                  border: isSelected
-                  final isSelected = index == _selectedKlassIndex;
+                      ? Border.all(color: RetroColors.gold, width: 1)
-                  final klass = _klasses[index];
+                      : null,
-                  return ListTile(
+                ),
-                    leading: Icon(
+                child: Column(
-                      isSelected
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                          ? Icons.radio_button_checked
+                  children: [
-                          : Icons.radio_button_unchecked,
+                    Row(
-                      color: isSelected
+                      children: [
-                          ? Theme.of(context).colorScheme.primary
+                        Icon(
-                          : null,
+                          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(
+                              fontFamily: 'PressStart2P',
+                              fontSize: 8,
+                              color: isSelected
+                                  ? RetroColors.gold
+                                  : RetroColors.textLight,
+                            ),
+                          ),
+                        ),
+                      ],
                     ),
-                    title: Text(
+                    if (isSelected) _buildClassInfo(klass),
-                      GameDataL10n.getKlassName(context, klass.name),
+                  ],
-                      style: TextStyle(
+                ),
-                        fontWeight: isSelected
-                            ? FontWeight.bold
-                            : FontWeight.normal,
-                      ),
-                    ),
-                    subtitle: isSelected ? _buildClassInfo(klass) : null,
-                    dense: !isSelected,
-                    visualDensity: VisualDensity.compact,
-                    onTap: () => setState(() => _selectedKlassIndex = index),
-                  );
-                },
               ),
-            ),
+            );
-          ],
+          },
         ),
       ),
     );
@@ -638,22 +696,23 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
         ? klass.passives.map((p) => _translateClassPassive(p)).join(', ')
         : '';
 
-    return Column(
+    return Padding(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      padding: const EdgeInsets.only(left: 16, top: 4),
-      children: [
+      child: Column(
-        if (statMods.isNotEmpty)
+        crossAxisAlignment: CrossAxisAlignment.start,
-          Text(
+        children: [
-            statMods.join(', '),
+          if (statMods.isNotEmpty)
-            style: Theme.of(context).textTheme.bodySmall,
+            Text(
-          ),
+              statMods.join(', '),
-        if (passiveDesc.isNotEmpty)
+              style: const TextStyle(fontSize: 9, color: RetroColors.textLight),
-          Text(
-            passiveDesc,
-            style: Theme.of(context).textTheme.bodySmall?.copyWith(
-              color: Theme.of(context).colorScheme.secondary,
             ),
-          ),
+          if (passiveDesc.isNotEmpty)
-      ],
+            Text(
+              passiveDesc,
+              style: const TextStyle(fontSize: 9, color: RetroColors.expGreen),
+            ),
+        ],
+      ),
     );
   }
 
@@ -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,
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
       ),
     );
   }