Merge remote-tracking branch 'origin/main'

# Conflicts:
#	docs/deploy-checklist.md

docs/deploy-checklist.md

@@ -38,9 +38,12 @@ Phase 1 **A~C** 이후 실행 트랙. 작업 단위를 하나씩 처리한다.
 - 앱 코드는 클로즈드 베타 직전 수준
 - **`https://msn.iykyka.com` 라이브 + N3 완료 + Gemini 실초안 OK + Track A/B 완료**
 - 진행 중: **N4 FCM 코드 경로** → Master 시크릿 대기 → Android UI QA
+- UI: **Soft Neutral + surface hierarchy** (`553cb62`) — GitHub `main` 머지 완료.
+  프로덕션 web 재빌드는 이 세션에 SSH/`.env`가 없어 보류 → 서버에서
+  `cd ~/project/ykavu && git pull && docker compose build web && docker compose up -d web`
 - **발견(2026-07-31): Track C 콘텐츠 갭** — `PRD.md` P0 대비 단톡 따라잡기·관계별 페르소나·
-  스팸 감지 미구현. Master 액션(FCM 시크릿, 실기기 탭)과 별개로 지금 바로 코드 착수 가능
+  스팸 감지 미구현. Master 액션(FCM 시크릿, 실기기 탭, 웹 재배포)과 별개로 지금 바로 코드 착수 가능
-- 실 FCM 전송·Android 실기기 탭 · 사람 PoC 실행은 남음
+- 실 FCM 기기 수신 · Android 실기기 탭 · 사람 PoC 실행은 남음
 
 ### NEXT 순서
 

mobile/lib/screens/autonomy_settings_screen.dart

@@ -66,24 +66,27 @@ class _AutonomySettingsScreenState extends State<AutonomySettingsScreen> {
       body: ListView(
         padding: const EdgeInsets.fromLTRB(16, 8, 16, 32),
         children: [
-          Card(
+          Container(
+            decoration: BoxDecoration(
+              color: AppTheme.glassFill(theme.brightness),
+              borderRadius: BorderRadius.circular(AppTheme.rPanel),
+              border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
+            ),
             child: Column(
               children: [
                 ListTile(
-                  leading: const Icon(Icons.privacy_tip_outlined),
                   title: const Text('데이터 흐름'),
                   subtitle: const Text('무엇이 기기에 남고 서버로 가는지'),
-                  trailing: const Icon(Icons.chevron_right),
+                  trailing: const Icon(Icons.chevron_right, size: 18),
                   onTap: () {
                     Navigator.of(context).push(MaterialPageRoute(builder: (_) => const DataFlowScreen()));
                   },
                 ),
-                const Divider(height: 1, indent: 16, endIndent: 16),
+                Divider(height: 1, indent: 16, endIndent: 16, color: AppTheme.glassBorder(theme.brightness)),
                 ListTile(
-                  leading: const Icon(Icons.devices),
                   title: const Text('로그인 세션'),
                   subtitle: const Text('멀티 디바이스 세션 목록'),
-                  trailing: const Icon(Icons.chevron_right),
+                  trailing: const Icon(Icons.chevron_right, size: 18),
                   onTap: () {
                     Navigator.of(context).push(MaterialPageRoute(builder: (_) => const SessionsScreen()));
                   },

mobile/lib/screens/chat_screen.dart

@@ -256,10 +256,10 @@ class _ChatScreenState extends State<ChatScreen> {
     if (draft.isEscalate) {
       return Container(
         margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
-        padding: const EdgeInsets.all(16),
+        padding: const EdgeInsets.all(14),
         decoration: BoxDecoration(
-          color: theme.colorScheme.errorContainer.withOpacity(0.85),
+          color: theme.colorScheme.errorContainer.withValues(alpha: 0.55),
-          borderRadius: BorderRadius.circular(16),
+          borderRadius: BorderRadius.circular(AppTheme.rPanel),
           border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
         ),
         child: Column(
@@ -300,32 +300,27 @@ class _ChatScreenState extends State<ChatScreen> {
 
     return Container(
       margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
-      padding: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(14),
       decoration: BoxDecoration(
-        color: theme.colorScheme.secondaryContainer.withOpacity(0.85),
+        color: AppTheme.glassFill(theme.brightness),
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(AppTheme.rPanel),
         border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          Row(
+          Text(
-            children: [
-              Icon(Icons.auto_awesome, size: 18, color: theme.colorScheme.onSecondaryContainer),
-              const SizedBox(width: 6),
-              Expanded(
-                child: Text(
             title,
-                  style: theme.textTheme.titleSmall?.copyWith(color: theme.colorScheme.onSecondaryContainer),
+            style: theme.textTheme.titleSmall?.copyWith(
+              color: theme.colorScheme.onSurface,
+              fontWeight: FontWeight.w600,
             ),
           ),
-            ],
-          ),
           if (isL0) ...[
             const SizedBox(height: 6),
             Text(
               'L0에서는 와카뷰 발송이 막혀 있습니다. 초안을 입력창으로 옮긴 뒤 직접 보내거나, 메뉴 → 자율성에서 L1으로 바꾸세요.',
-              style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSecondaryContainer),
+              style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
             ),
           ],
           const SizedBox(height: 10),

mobile/lib/screens/contacts_screen.dart

@@ -299,8 +299,6 @@ class _ContactsScreenState extends State<ContactsScreen> {
                       padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 32),
                       child: Column(
                         children: [
-                          Icon(Icons.person_add_outlined, size: 40, color: theme.colorScheme.outline),
-                          const SizedBox(height: 12),
                           Text('연락처가 없습니다', style: theme.textTheme.titleMedium),
                           const SizedBox(height: 8),
                           Text(
@@ -316,16 +314,16 @@ class _ContactsScreenState extends State<ContactsScreen> {
                       ),
                     ),
                   for (final c in _contacts)
-                    Padding(
+                    ListTile(
-                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+                      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
-                      child: ListTile(
                       leading: CircleAvatar(
-                          backgroundColor: theme.colorScheme.secondaryContainer,
+                        radius: 20,
+                        backgroundColor: theme.colorScheme.surfaceContainerHighest,
                         child: Text(
                           c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1),
                           style: TextStyle(
-                              color: theme.colorScheme.onSecondaryContainer,
+                            color: theme.colorScheme.onSurfaceVariant,
-                              fontWeight: FontWeight.w700,
+                            fontWeight: FontWeight.w600,
                           ),
                         ),
                       ),
@@ -347,7 +345,7 @@ class _ContactsScreenState extends State<ContactsScreen> {
                         mainAxisSize: MainAxisSize.min,
                         children: [
                           if (c.contactUserId != null) ...[
-                              FilledButton.tonal(
+                            TextButton(
                               onPressed: () => _startChat(c),
                               child: const Text('대화'),
                             ),
@@ -376,7 +374,6 @@ class _ContactsScreenState extends State<ContactsScreen> {
                         }
                       },
                     ),
-                    ),
                   const SizedBox(height: 72),
                 ],
               ),

mobile/lib/screens/conversation_list_screen.dart

@@ -4,7 +4,6 @@ import 'package:provider/provider.dart';
 import '../models/models.dart';
 import '../services/api_client.dart';
 import '../state/session_state.dart';
-import '../theme/app_theme.dart';
 import '../widgets/gradient_text.dart';
 import '../widgets/my_user_id_chip.dart';
 import 'autonomy_settings_screen.dart';
@@ -155,14 +154,18 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
   }
 
   Color _avatarColor(BuildContext context, int seed) {
-    final scheme = Theme.of(context).colorScheme;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
-    final palette = [scheme.primaryContainer, scheme.tertiaryContainer, scheme.secondaryContainer];
+    final palette = isDark
+        ? const [Color(0xFF1C1C1C), Color(0xFF22262E), Color(0xFF242018)]
+        : const [Color(0xFFF4F4F5), Color(0xFFE8EEF4), Color(0xFFF3F0EA)];
     return palette[seed % palette.length];
   }
 
   Color _onAvatarColor(BuildContext context, int seed) {
-    final scheme = Theme.of(context).colorScheme;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
-    final palette = [scheme.onPrimaryContainer, scheme.onTertiaryContainer, scheme.onSecondaryContainer];
+    final palette = isDark
+        ? const [Color(0xFFA3A3A3), Color(0xFF8BB4D9), Color(0xFFC4A574)]
+        : const [Color(0xFF525252), Color(0xFF3B6D9B), Color(0xFF9A7B4F)];
     return palette[seed % palette.length];
   }
 
@@ -220,10 +223,10 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
           const SizedBox(width: 4),
         ],
       ),
-      floatingActionButton: FloatingActionButton.extended(
+      floatingActionButton: FloatingActionButton(
         onPressed: _createConversation,
-        icon: const Icon(Icons.chat),
+        tooltip: '새 대화',
-        label: const Text('새 대화'),
+        child: const Icon(Icons.chat_outlined),
       ),
       body: RefreshIndicator(
         onRefresh: _load,
@@ -254,23 +257,6 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
                       padding: const EdgeInsets.fromLTRB(32, 48, 32, 32),
                       child: Column(
                         children: [
-                          Container(
-                            width: 72,
-                            height: 72,
-                            decoration: BoxDecoration(
-                              shape: BoxShape.circle,
-                              gradient: AppTheme.brandGradient,
-                              boxShadow: [
-                                BoxShadow(
-                                  color: const Color(0xFF6D5BD0).withValues(alpha: 0.3),
-                                  blurRadius: 24,
-                                  offset: const Offset(0, 10),
-                                ),
-                              ],
-                            ),
-                            child: const Icon(Icons.chat_bubble_outline, size: 30, color: Colors.white),
-                          ),
-                          const SizedBox(height: 16),
                           Text('대화방이 없습니다', style: theme.textTheme.titleMedium),
                           const SizedBox(height: 8),
                           Text(
@@ -280,57 +266,26 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
                             textAlign: TextAlign.center,
                             style: theme.textTheme.bodySmall?.copyWith(
                               color: theme.colorScheme.onSurfaceVariant,
-                              height: 1.45,
+                              height: 1.5,
                             ),
                           ),
-                          const SizedBox(height: 16),
+                          const SizedBox(height: 18),
-                          FilledButton.tonalIcon(
+                          OutlinedButton(
                             onPressed: () async {
                               await Navigator.of(context).push(
                                 MaterialPageRoute(builder: (_) => const ContactsScreen()),
                               );
                               await _load();
                             },
-                            icon: const Icon(Icons.contacts_outlined),
+                            child: const Text('연락처 열기'),
-                            label: const Text('연락처 열기'),
                           ),
                         ],
                       ),
                     ),
                   for (final room in _rooms)
-                    Padding(
+                    Material(
-                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+                      color: Colors.transparent,
-                      child: ListTile(
+                      child: InkWell(
-                        leading: CircleAvatar(
-                          backgroundColor: _avatarColor(context, room.id),
-                          child: Icon(
-                            room.isGroup ? Icons.groups_outlined : Icons.person_outline,
-                            color: _onAvatarColor(context, room.id),
-                          ),
-                        ),
-                        title: Text(
-                          _titleFor(room, me),
-                          style: theme.textTheme.titleSmall,
-                        ),
-                        subtitle: Row(
-                          children: [
-                            if (room.twinDisabledByPeer) ...[
-                              Icon(Icons.block, size: 13, color: theme.colorScheme.error),
-                              const SizedBox(width: 4),
-                            ],
-                            Expanded(
-                              child: Text(
-                                _subtitleFor(room, me),
-                                style: theme.textTheme.bodySmall?.copyWith(
-                                  color: room.twinDisabledByPeer
-                                      ? theme.colorScheme.error
-                                      : theme.colorScheme.onSurfaceVariant,
-                                ),
-                              ),
-                            ),
-                          ],
-                        ),
-                        trailing: const Icon(Icons.chevron_right, size: 20),
                         onTap: () async {
                           await Navigator.of(context).push(
                             MaterialPageRoute(
@@ -342,6 +297,56 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
                           );
                           await _load();
                         },
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                          child: Row(
+                            children: [
+                              CircleAvatar(
+                                radius: 22,
+                                backgroundColor: _avatarColor(context, room.id),
+                                child: Icon(
+                                  room.isGroup ? Icons.groups_outlined : Icons.person_outline,
+                                  size: 20,
+                                  color: _onAvatarColor(context, room.id),
+                                ),
+                              ),
+                              const SizedBox(width: 12),
+                              Expanded(
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Text(
+                                      _titleFor(room, me),
+                                      style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600),
+                                    ),
+                                    const SizedBox(height: 2),
+                                    Row(
+                                      children: [
+                                        if (room.twinDisabledByPeer) ...[
+                                          Icon(Icons.block, size: 13, color: theme.colorScheme.error),
+                                          const SizedBox(width: 4),
+                                        ],
+                                        Expanded(
+                                          child: Text(
+                                            _subtitleFor(room, me),
+                                            maxLines: 1,
+                                            overflow: TextOverflow.ellipsis,
+                                            style: theme.textTheme.bodySmall?.copyWith(
+                                              color: room.twinDisabledByPeer
+                                                  ? theme.colorScheme.error
+                                                  : theme.colorScheme.onSurfaceVariant,
+                                            ),
+                                          ),
+                                        ),
+                                      ],
+                                    ),
+                                  ],
+                                ),
+                              ),
+                              Icon(Icons.chevron_right, size: 18, color: theme.colorScheme.onSurfaceVariant),
+                            ],
+                          ),
+                        ),
                       ),
                     ),
                   const SizedBox(height: 72),

mobile/lib/screens/data_flow_screen.dart

@@ -10,42 +10,28 @@ class DataFlowScreen extends StatelessWidget {
 
   Widget _section(
     BuildContext context, {
-    required IconData icon,
-    required Color tint,
     required String title,
     required String body,
   }) {
     final theme = Theme.of(context);
     return Container(
-      margin: const EdgeInsets.only(bottom: 16),
+      margin: const EdgeInsets.only(bottom: 12),
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         color: AppTheme.glassFill(theme.brightness),
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(AppTheme.rPanel),
         border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
       ),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Container(
-            width: 36,
-            height: 36,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(color: tint.withValues(alpha: 0.15), shape: BoxShape.circle),
-            child: Icon(icon, size: 18, color: tint),
-          ),
-          const SizedBox(width: 12),
-          Expanded(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(title, style: theme.textTheme.titleSmall),
-                const SizedBox(height: 4),
+          const SizedBox(height: 6),
           Text(
             body,
-                  style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant),
+            style: theme.textTheme.bodyMedium?.copyWith(
-                ),
+              color: theme.colorScheme.onSurfaceVariant,
-              ],
+              height: 1.45,
             ),
           ),
         ],
@@ -66,32 +52,40 @@ class DataFlowScreen extends StatelessWidget {
         children: [
           _section(
             context,
-            icon: Icons.lock_outline,
-            tint: Colors.green.shade600,
             title: '기기 안에만 둡니다',
             body: '말투 샘플·온보딩 입력은 이 기기의 로컬 저장소에만 보관합니다. '
                 '원문 대화 전체를 서버로 올리지 않는 것이 기본 원칙입니다.',
           ),
-          Card(
+          Container(
-            margin: const EdgeInsets.only(bottom: 16),
+            margin: const EdgeInsets.only(bottom: 12),
-            child: ListTile(
+            padding: const EdgeInsets.all(16),
-              leading: Icon(Icons.record_voice_over_outlined, color: theme.colorScheme.primary),
+            decoration: BoxDecoration(
-              title: Text('말투 샘플 ${samples.length}개'),
+              color: AppTheme.glassFill(theme.brightness),
-              subtitle: Text(
+              borderRadius: BorderRadius.circular(AppTheme.rPanel),
+              border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text('말투 샘플 ${samples.length}개', style: theme.textTheme.titleSmall),
+                const SizedBox(height: 6),
+                Text(
                   [
                     samples.isEmpty ? '(아직 없음 — 말투 샘플 화면에서 추가)' : samples.take(3).join(' · '),
                     session.localDbEncrypted
                         ? '저장: drift + SQLCipher(암호화)'
                         : '저장: 메모리/웹 스텁(이 환경에 SQLCipher 없음 — Chrome·Linux 폴백)',
                   ].join('\n'),
+                  style: theme.textTheme.bodyMedium?.copyWith(
+                    color: theme.colorScheme.onSurfaceVariant,
+                    height: 1.45,
                   ),
-              isThreeLine: true,
+                ),
+              ],
             ),
           ),
           _section(
             context,
-            icon: Icons.cloud_upload_outlined,
-            tint: Colors.amber.shade800,
             title: '서버로 보낼 수 있는 것',
             body: '초안이 필요할 때: 최근 대화 몇 줄 + 말투 샘플 일부(최소 컨텍스트)\n'
                 '채팅 릴레이: 보낸 메시지 본문\n'
@@ -100,8 +94,6 @@ class DataFlowScreen extends StatelessWidget {
           ),
           _section(
             context,
-            icon: Icons.block,
-            tint: theme.colorScheme.error,
             title: '보내지 않는 것',
             body: '전체 채팅 백업 업로드, 온디바이스 말투 학습 원문 코퍼스, '
                 '관계 메모의 자동 클라우드 분석',

mobile/lib/screens/inbox_screen.dart

@@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
 import '../models/models.dart';
 import '../services/api_client.dart';
 import '../state/session_state.dart';
+import '../theme/app_theme.dart';
 import 'chat_screen.dart';
 
 /// Post-hoc notification inbox: escalation logs that need human attention.
@@ -53,38 +54,30 @@ class _InboxScreenState extends State<InboxScreen> {
         child: _loading
             ? ListView(children: const [SizedBox(height: 160), Center(child: CircularProgressIndicator())])
             : ListView(
-                padding: const EdgeInsets.fromLTRB(12, 12, 12, 24),
+                padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
                 children: [
-                  Padding(
+                  Text(
-                    padding: const EdgeInsets.fromLTRB(4, 0, 4, 12),
-                    child: Text(
                     '와카뷰가 보류·차단한 내용과 에스컬레이션 기록입니다. '
                     '이미 보낸 와카뷰 메시지는 해당 대화방에서 되돌릴 수 있습니다.',
                     style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant),
                   ),
-                  ),
+                  const SizedBox(height: 12),
                   if (_error != null)
                     Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+                      padding: const EdgeInsets.only(bottom: 8),
                       child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)),
                     ),
                   if (_logs.isEmpty)
                     Padding(
-                      padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 32),
+                      padding: const EdgeInsets.symmetric(vertical: 56),
-                      child: Column(
+                      child: Center(
-                        children: [
+                        child: Text('새 알림이 없습니다', style: theme.textTheme.titleMedium),
-                          Icon(Icons.notifications_none, size: 40, color: theme.colorScheme.outline),
-                          const SizedBox(height: 12),
-                          Text('새 알림이 없습니다', style: theme.textTheme.titleMedium),
-                        ],
                       ),
                     ),
                   for (final log in _logs)
-                    Padding(
+                    Material(
-                      padding: const EdgeInsets.only(bottom: 8),
+                      color: Colors.transparent,
-                      child: Card(
                       child: InkWell(
-                          borderRadius: BorderRadius.circular(16),
                         onTap: () {
                           Navigator.of(context).push(
                             MaterialPageRoute(
@@ -92,34 +85,37 @@ class _InboxScreenState extends State<InboxScreen> {
                             ),
                           );
                         },
-                          child: Padding(
+                        child: Container(
+                          margin: const EdgeInsets.only(bottom: 8),
                           padding: const EdgeInsets.all(14),
-                            child: Row(
+                          decoration: BoxDecoration(
-                              crossAxisAlignment: CrossAxisAlignment.start,
+                            borderRadius: BorderRadius.circular(AppTheme.rPanel),
-                              children: [
+                            border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
-                                CircleAvatar(
+                            color: AppTheme.glassFill(theme.brightness),
-                                  radius: 18,
-                                  backgroundColor: log.resolved
-                                      ? theme.colorScheme.primaryContainer
-                                      : theme.colorScheme.errorContainer,
-                                  child: Icon(
-                                    log.resolved ? Icons.check_circle_outline : Icons.warning_amber_rounded,
-                                    size: 18,
-                                    color: log.resolved
-                                        ? theme.colorScheme.onPrimaryContainer
-                                        : theme.colorScheme.onErrorContainer,
                           ),
-                                ),
-                                const SizedBox(width: 12),
-                                Expanded(
                           child: Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
-                                      Text(
+                              Row(
+                                children: [
+                                  Expanded(
+                                    child: Text(
                                       log.reason.isEmpty ? '에스컬레이션' : log.reason,
                                       style: theme.textTheme.titleSmall,
                                     ),
-                                      const SizedBox(height: 2),
+                                  ),
+                                  Text(
+                                    log.resolved ? '처리됨' : '확인 필요',
+                                    style: theme.textTheme.labelSmall?.copyWith(
+                                      color: log.resolved
+                                          ? theme.colorScheme.onSurfaceVariant
+                                          : theme.colorScheme.error,
+                                      fontWeight: FontWeight.w600,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                              const SizedBox(height: 4),
                               Text(
                                 '대화방 #${log.conversationId}',
                                 style: theme.textTheme.bodySmall
@@ -143,10 +139,6 @@ class _InboxScreenState extends State<InboxScreen> {
                             ],
                           ),
                         ),
-                              ],
-                            ),
-                          ),
-                        ),
                       ),
                     ),
                 ],

mobile/lib/screens/onboarding_tone_screen.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 import '../state/session_state.dart';
-import '../theme/app_theme.dart';
 import '../widgets/primary_gradient_button.dart';
 
 /// Phase 1 onboarding skeleton: capture a few style samples locally.
@@ -62,30 +61,16 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
       ),
       body: SafeArea(
         child: ListView(
-          padding: const EdgeInsets.all(24),
+          padding: const EdgeInsets.fromLTRB(24, 12, 24, 32),
           children: [
-            Align(
-              alignment: Alignment.centerLeft,
-              child: Container(
-                width: 56,
-                height: 56,
-                decoration: BoxDecoration(
-                  gradient: AppTheme.brandGradient,
-                  borderRadius: BorderRadius.circular(18),
-                  boxShadow: [
-                    BoxShadow(color: const Color(0xFF6D5BD0).withValues(alpha: 0.3), blurRadius: 18, offset: const Offset(0, 8)),
-                  ],
-                ),
-                child: const Icon(Icons.record_voice_over_outlined, size: 28, color: Colors.white),
-              ),
-            ),
-            const SizedBox(height: 16),
             Text('와카뷰가 따라 쓸 말투', style: theme.textTheme.headlineSmall),
             const SizedBox(height: 8),
             Text(
-              '자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다. '
+              '자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다.',
-              '최종 문구·수집 방식은 사람 PoC 이후에 다듬습니다.',
+              style: theme.textTheme.bodyMedium?.copyWith(
-              style: theme.textTheme.bodyMedium?.copyWith(color: scheme.onSurfaceVariant),
+                color: scheme.onSurfaceVariant,
+                height: 1.45,
+              ),
             ),
             const SizedBox(height: 28),
             for (var i = 0; i < _samples.length; i++) ...[
@@ -95,30 +80,21 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
                 decoration: InputDecoration(
                   labelText: '샘플 ${i + 1}',
                   hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null,
-                  prefixIcon: Padding(
-                    padding: const EdgeInsets.only(left: 4, right: 4, top: 4),
-                    child: CircleAvatar(
-                      radius: 12,
-                      backgroundColor: scheme.secondaryContainer,
-                      child: Text(
-                        '${i + 1}',
-                        style: TextStyle(
-                          fontSize: 12,
-                          fontWeight: FontWeight.w700,
-                          color: scheme.onSecondaryContainer,
-                        ),
-                      ),
-                    ),
-                  ),
                 ),
               ),
               const SizedBox(height: 12),
             ],
-            const SizedBox(height: 12),
+            const SizedBox(height: 8),
             PrimaryGradientButton(
               label: '이 말투로 시작',
               onPressed: () => _save(markDone: true),
             ),
+            const SizedBox(height: 12),
+            Text(
+              '말투는 나중에 메뉴에서 다시 수정할 수 있습니다.',
+              textAlign: TextAlign.center,
+              style: theme.textTheme.bodySmall?.copyWith(color: scheme.onSurfaceVariant),
+            ),
           ],
         ),
       ),

mobile/lib/screens/sessions_screen.dart

@@ -95,20 +95,8 @@ class _SessionsScreenState extends State<SessionsScreen> {
                       child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)),
                     ),
                   for (final s in _sessions)
-                    Padding(
+                    ListTile(
-                      padding: const EdgeInsets.symmetric(vertical: 2),
+                      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
-                      child: ListTile(
-                        leading: CircleAvatar(
-                          backgroundColor: s['is_current'] == true
-                              ? theme.colorScheme.primaryContainer
-                              : theme.colorScheme.surfaceContainerHighest,
-                          child: Icon(
-                            s['is_current'] == true ? Icons.smartphone : Icons.devices_other,
-                            color: s['is_current'] == true
-                                ? theme.colorScheme.onPrimaryContainer
-                                : theme.colorScheme.onSurfaceVariant,
-                          ),
-                        ),
                       title: Text(
                         s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}',
                         style: theme.textTheme.titleSmall,
@@ -120,7 +108,6 @@ class _SessionsScreenState extends State<SessionsScreen> {
                         onPressed: () => _revoke(s),
                       ),
                     ),
-                    ),
                 ],
               ),
       ),

mobile/lib/screens/signup_screen.dart

@@ -133,19 +133,16 @@ class _DemoTestPanel extends StatelessWidget {
     final brightness = theme.brightness;
     return Material(
       color: Colors.transparent,
-      borderRadius: BorderRadius.circular(16),
+      borderRadius: BorderRadius.circular(AppTheme.rPanel),
       child: InkWell(
         onTap: onFill,
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(AppTheme.rPanel),
         child: Container(
           padding: const EdgeInsets.fromLTRB(16, 14, 12, 14),
           decoration: BoxDecoration(
             color: AppTheme.glassFill(brightness),
-            borderRadius: BorderRadius.circular(16),
+            borderRadius: BorderRadius.circular(AppTheme.rPanel),
             border: Border.all(color: AppTheme.glassBorder(brightness)),
-            boxShadow: [
-              BoxShadow(color: AppTheme.glassShadow(brightness), blurRadius: 20, offset: const Offset(0, 8)),
-            ],
           ),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -153,8 +150,9 @@ class _DemoTestPanel extends StatelessWidget {
               Text(
                 '테스트용 (누구나)',
                 style: theme.textTheme.labelLarge?.copyWith(
-                  color: theme.colorScheme.primary,
+                  color: theme.colorScheme.onSurfaceVariant,
-                  letterSpacing: 0.4,
+                  letterSpacing: 0.15,
+                  fontWeight: FontWeight.w600,
                 ),
               ),
               const SizedBox(height: 6),
@@ -165,7 +163,7 @@ class _DemoTestPanel extends StatelessWidget {
                       '초대 코드  ${AppConfig.demoInviteCode}\n표시 이름  ${AppConfig.demoDisplayName}',
                       style: theme.textTheme.titleSmall?.copyWith(
                         height: 1.45,
-                        fontWeight: FontWeight.w700,
+                        fontWeight: FontWeight.w600,
                       ),
                     ),
                   ),

mobile/lib/screens/splash_screen.dart

@@ -33,9 +33,12 @@ class SplashScreen extends StatelessWidget {
             ),
             const SizedBox(height: 32),
             SizedBox(
-              width: 28,
+              width: 22,
-              height: 28,
+              height: 22,
-              child: CircularProgressIndicator(strokeWidth: 2.5, color: scheme.primary),
+              child: CircularProgressIndicator(
+                strokeWidth: 2,
+                color: scheme.onSurfaceVariant,
+              ),
             ),
           ],
         ),

mobile/lib/theme/app_theme.dart

@@ -1,223 +1,257 @@
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 
-/// Central design tokens for 와카뷰 (Ykavu) — "aurora glass" direction.
+/// Soft Neutral + surface hierarchy for 와카뷰.
-/// `backgroundGradient` + the glow orbs in [GradientBackdrop] paint behind
+/// Neutrals dominate; accent is thin (mine bubbles / small links only).
-/// every screen (wired into `MaterialApp.builder`); cards/inputs/app bars
+/// Radii: input/button 12, bubble 18. No glow, almost no shadow.
-/// are semi-transparent "glass" surfaces with a soft colored shadow so they
-/// visibly lift off that background. `twinAccent` stays a separate warm
-/// accent so a twin-written bubble never reads as something the human
-/// actually typed (PRD §3.1 와카뷰 뱃지).
 class AppTheme {
   AppTheme._();
 
-  static const _seed = Color(0xFF6D5BD0);
+  // Light neutrals
+  static const canvasLight = Color(0xFFFAFAF9);
+  static const surfaceLight = Color(0xFFFFFFFF);
+  static const inkLight = Color(0xFF171717);
+  static const mutedLight = Color(0xFF737373);
+  static const lineLight = Color(0xFFE5E5E5);
+  static const softFillLight = Color(0xFFF4F4F5);
 
-  /// Brand gradient used for the wordmark, brand mark and primary CTAs.
+  // Dark neutrals
+  static const canvasDark = Color(0xFF0A0A0A);
+  static const surfaceDark = Color(0xFF141414);
+  static const inkDark = Color(0xFFFAFAFA);
+  static const mutedDark = Color(0xFFA3A3A3);
+  static const lineDark = Color(0xFF262626);
+  static const softFillDark = Color(0xFF1C1C1C);
+
+  /// Thin accent — used for mine bubbles & primary actions, not chrome.
+  static const accentLight = Color(0xFF3B6D9B);
+  static const accentDark = Color(0xFF8BB4D9);
+  static const accentSoftLight = Color(0xFFE8F0F7);
+  static const accentSoftDark = Color(0xFF1A2836);
+
+  static const twinAmberLight = Color(0xFF9A7B4F);
+  static const twinAmberDark = Color(0xFFC4A574);
+
+  /// Compat for older call sites.
+  static const teal = accentLight;
+  static const tealBright = accentDark;
+  static const canvasDarkCompat = canvasDark;
   static const brandGradient = LinearGradient(
-    begin: Alignment.centerLeft,
+    colors: [accentLight, accentLight],
-    end: Alignment.centerRight,
-    colors: [Color(0xFF6D5BD0), Color(0xFFA855C9), Color(0xFFE0609A)],
   );
 
-  static Color twinAccent(Brightness brightness) =>
+  static Color twinAccent(Brightness b) => b == Brightness.dark ? twinAmberDark : twinAmberLight;
-      brightness == Brightness.dark ? Colors.amber.shade300 : Colors.amber.shade800;
 
-  /// Diagonal aurora gradient painted behind every screen. Light: violet →
+  static LinearGradient backgroundGradient(Brightness b) {
-  /// sky → pink, more saturated than a "safe" pastel so it reads as
+    final c = b == Brightness.dark ? canvasDark : canvasLight;
-  /// intentional branding rather than a default Material backdrop. Dark:
+    return LinearGradient(colors: [c, c]);
-  /// deep indigo → navy → plum. Paired with the blurred glow orbs in
-  /// [GradientBackdrop].
-  static LinearGradient backgroundGradient(Brightness brightness) {
-    if (brightness == Brightness.dark) {
-      return const LinearGradient(
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-        colors: [Color(0xFF201A3D), Color(0xFF16213E), Color(0xFF351C3C)],
-      );
-    }
-    return const LinearGradient(
-      begin: Alignment.topLeft,
-      end: Alignment.bottomRight,
-      colors: [Color(0xFFDCCBFF), Color(0xFFC3E4FF), Color(0xFFFFC9E8)],
-    );
   }
 
-  /// Soft blurred accent blobs layered over [backgroundGradient] by
+  static Color glassFill(Brightness b) => b == Brightness.dark ? surfaceDark : surfaceLight;
-  /// [GradientBackdrop] for depth ("aurora glow").
+  static Color glassBorder(Brightness b) => b == Brightness.dark ? lineDark : lineLight;
-  static Color glowPrimary(Brightness brightness) => brightness == Brightness.dark
+  static Color glassShadow(Brightness b) => Colors.transparent;
-      ? const Color(0xFF8B7CF6).withValues(alpha: 0.35)
-      : const Color(0xFFB79CFF).withValues(alpha: 0.55);
 
-  static Color glowSecondary(Brightness brightness) => brightness == Brightness.dark
+  static Color mineBubble(Brightness b) => b == Brightness.dark ? accentSoftDark : accentLight;
-      ? const Color(0xFFE879C4).withValues(alpha: 0.25)
+  static Color mineBubbleFg(Brightness b) => b == Brightness.dark ? inkDark : Colors.white;
-      : const Color(0xFFFFA9DC).withValues(alpha: 0.50);
+  static Color peerBubble(Brightness b) => b == Brightness.dark ? softFillDark : softFillLight;
 
-  /// "Glass" fill for cards/panels — semi-transparent so the gradient
+  static const rInput = 12.0;
-  /// behind still reads through, with a bright border for the classic
+  static const rButton = 12.0;
-  /// glassmorphism edge highlight and a tinted shadow so the surface
+  static const rBubble = 18.0;
-  /// visibly lifts off the backdrop instead of blending into it.
+  static const rPanel = 12.0;
-  static Color glassFill(Brightness brightness) => brightness == Brightness.dark
-      ? Colors.white.withValues(alpha: 0.08)
-      : Colors.white.withValues(alpha: 0.72);
-
-  static Color glassBorder(Brightness brightness) => brightness == Brightness.dark
-      ? Colors.white.withValues(alpha: 0.16)
-      : Colors.white.withValues(alpha: 0.85);
-
-  static Color glassShadow(Brightness brightness) => brightness == Brightness.dark
-      ? Colors.black.withValues(alpha: 0.45)
-      : const Color(0xFF6D5BD0).withValues(alpha: 0.18);
 
   static ThemeData light() => _build(Brightness.light);
   static ThemeData dark() => _build(Brightness.dark);
 
   static ThemeData _build(Brightness brightness) {
-    final scheme = ColorScheme.fromSeed(seedColor: _seed, brightness: brightness);
+    final isDark = brightness == Brightness.dark;
-    final glass = glassFill(brightness);
+    final primary = isDark ? accentDark : accentLight;
-    final glassEdge = glassBorder(brightness);
+    final onPrimary = isDark ? canvasDark : Colors.white;
-    final glassShadowColor = glassShadow(brightness);
+    final ink = isDark ? inkDark : inkLight;
-    final glassShape = RoundedRectangleBorder(
+    final muted = isDark ? mutedDark : mutedLight;
-      borderRadius: BorderRadius.circular(18),
+    final line = isDark ? lineDark : lineLight;
-      side: BorderSide(color: glassEdge, width: 1),
+    final canvas = isDark ? canvasDark : canvasLight;
+    final surface = isDark ? surfaceDark : surfaceLight;
+    final soft = isDark ? softFillDark : softFillLight;
+
+    final scheme = ColorScheme(
+      brightness: brightness,
+      primary: primary,
+      onPrimary: onPrimary,
+      primaryContainer: isDark ? accentSoftDark : accentSoftLight,
+      onPrimaryContainer: primary,
+      secondary: isDark ? twinAmberDark : twinAmberLight,
+      onSecondary: isDark ? canvasDark : Colors.white,
+      secondaryContainer: soft,
+      onSecondaryContainer: muted,
+      tertiary: primary,
+      onTertiary: onPrimary,
+      error: isDark ? const Color(0xFFF87171) : const Color(0xFFB91C1C),
+      onError: Colors.white,
+      surface: surface,
+      onSurface: ink,
+      onSurfaceVariant: muted,
+      outline: line,
+      outlineVariant: line,
+      surfaceContainerHighest: soft,
+      surfaceContainerHigh: soft,
+      surfaceContainer: surface,
     );
 
+    final textTheme = _textTheme(GoogleFonts.plusJakartaSansTextTheme(), ink);
+
     return ThemeData(
       useMaterial3: true,
       brightness: brightness,
       colorScheme: scheme,
-      // Transparent so the gradient painted by MaterialApp.builder shows
-      // through behind every Scaffold.
       scaffoldBackgroundColor: Colors.transparent,
-      visualDensity: VisualDensity.comfortable,
+      visualDensity: VisualDensity.standard,
-      textTheme: _textTheme(),
+      textTheme: textTheme,
+      primaryTextTheme: textTheme,
       appBarTheme: AppBarTheme(
-        backgroundColor: Colors.transparent,
+        backgroundColor: canvas.withValues(alpha: 0.92),
-        foregroundColor: scheme.onSurface,
+        foregroundColor: ink,
         surfaceTintColor: Colors.transparent,
         elevation: 0,
         scrolledUnderElevation: 0,
         centerTitle: false,
-        titleTextStyle: TextStyle(
+        titleTextStyle: textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600, letterSpacing: -0.2),
-          fontSize: 20,
-          fontWeight: FontWeight.w800,
-          color: scheme.onSurface,
-          letterSpacing: -0.2,
-        ),
       ),
       cardTheme: CardThemeData(
-        elevation: 8,
+        elevation: 0,
-        shadowColor: glassShadowColor,
+        color: surface,
-        color: glass,
+        shape: RoundedRectangleBorder(
-        shape: glassShape,
+          borderRadius: BorderRadius.circular(rPanel),
+          side: BorderSide(color: line),
+        ),
         margin: EdgeInsets.zero,
       ),
       listTileTheme: ListTileThemeData(
-        iconColor: scheme.onSurfaceVariant,
+        iconColor: muted,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)),
-        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
+        contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 2),
+        minVerticalPadding: 8,
       ),
-      dividerTheme: DividerThemeData(color: scheme.outlineVariant, space: 32, thickness: 1),
+      dividerTheme: DividerThemeData(color: line, space: 1, thickness: 1),
       inputDecorationTheme: InputDecorationTheme(
         filled: true,
-        fillColor: glass,
+        fillColor: surface,
-        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+        contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
         border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(14),
+          borderRadius: BorderRadius.circular(rInput),
-          borderSide: BorderSide(color: glassEdge, width: 1),
+          borderSide: BorderSide(color: line),
         ),
         enabledBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(14),
+          borderRadius: BorderRadius.circular(rInput),
-          borderSide: BorderSide(color: glassEdge, width: 1),
+          borderSide: BorderSide(color: line),
         ),
         focusedBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(14),
+          borderRadius: BorderRadius.circular(rInput),
-          borderSide: BorderSide(color: scheme.primary, width: 1.6),
+          borderSide: BorderSide(color: primary, width: 1.2),
         ),
         errorBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(14),
+          borderRadius: BorderRadius.circular(rInput),
-          borderSide: BorderSide(color: scheme.error, width: 1.2),
+          borderSide: BorderSide(color: scheme.error),
         ),
         focusedErrorBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(14),
+          borderRadius: BorderRadius.circular(rInput),
-          borderSide: BorderSide(color: scheme.error, width: 1.6),
+          borderSide: BorderSide(color: scheme.error, width: 1.2),
         ),
-        hintStyle: TextStyle(color: scheme.onSurfaceVariant.withValues(alpha: 0.7)),
+        hintStyle: TextStyle(color: muted.withValues(alpha: 0.8)),
+        labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500),
       ),
       filledButtonTheme: FilledButtonThemeData(
         style: FilledButton.styleFrom(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
+          backgroundColor: isDark ? inkDark : inkLight,
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
+          foregroundColor: isDark ? canvasDark : Colors.white,
-          textStyle: const TextStyle(fontWeight: FontWeight.w700),
+          padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
+          minimumSize: const Size(0, 46),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
+          textStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 15),
+          elevation: 0,
         ),
       ),
       outlinedButtonTheme: OutlinedButtonThemeData(
         style: OutlinedButton.styleFrom(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
+          foregroundColor: ink,
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
+          padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
+          minimumSize: const Size(0, 46),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
+          side: BorderSide(color: line),
         ),
       ),
       textButtonTheme: TextButtonThemeData(
         style: TextButton.styleFrom(
+          foregroundColor: primary,
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
         ),
       ),
       iconButtonTheme: IconButtonThemeData(
         style: IconButton.styleFrom(
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+          foregroundColor: muted,
-        ),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-      ),
-      segmentedButtonTheme: SegmentedButtonThemeData(
-        style: SegmentedButton.styleFrom(
-          backgroundColor: glass,
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
         ),
       ),
       chipTheme: ChipThemeData(
-        shape: RoundedRectangleBorder(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
-          borderRadius: BorderRadius.circular(10),
+        side: BorderSide(color: line),
-          side: BorderSide(color: glassEdge, width: 1),
+        backgroundColor: surface,
-        ),
+        labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500, fontSize: 12),
-        side: BorderSide.none,
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
-        backgroundColor: glass,
-        labelStyle: TextStyle(color: scheme.onSurfaceVariant, fontWeight: FontWeight.w600, fontSize: 12),
-        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
       ),
       floatingActionButtonTheme: FloatingActionButtonThemeData(
-        backgroundColor: scheme.primary,
+        backgroundColor: isDark ? inkDark : inkLight,
-        foregroundColor: scheme.onPrimary,
+        foregroundColor: isDark ? canvasDark : Colors.white,
-        elevation: 4,
+        elevation: 0,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
       ),
       snackBarTheme: SnackBarThemeData(
         behavior: SnackBarBehavior.floating,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+        backgroundColor: isDark ? softFillDark : inkLight,
-      ),
+        contentTextStyle: TextStyle(color: isDark ? inkDark : Colors.white),
-      bannerTheme: MaterialBannerThemeData(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)),
-        backgroundColor: glass,
+        elevation: 0,
-        padding: const EdgeInsets.all(16),
       ),
       dialogTheme: DialogThemeData(
-        backgroundColor: brightness == Brightness.dark
+        backgroundColor: surface,
-            ? const Color(0xFF211D3D)
+        elevation: 0,
-            : Colors.white.withValues(alpha: 0.95),
+        shape: RoundedRectangleBorder(
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+          borderRadius: BorderRadius.circular(16),
+          side: BorderSide(color: line),
+        ),
+      ),
+      progressIndicatorTheme: ProgressIndicatorThemeData(color: primary),
+      bannerTheme: MaterialBannerThemeData(backgroundColor: surface, padding: const EdgeInsets.all(16)),
+      segmentedButtonTheme: SegmentedButtonThemeData(
+        style: SegmentedButton.styleFrom(
+          backgroundColor: surface,
+          foregroundColor: muted,
+          selectedForegroundColor: ink,
+          selectedBackgroundColor: soft,
+          side: BorderSide(color: line),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
+          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+        ),
       ),
-      progressIndicatorTheme: ProgressIndicatorThemeData(color: scheme.primary),
     );
   }
 
-  static TextTheme _textTheme() {
+  static TextTheme _textTheme(TextTheme base, Color ink) {
-    return const TextTheme(
+    TextStyle s(TextStyle? t, {FontWeight? w, double? size, double? ls, double? h}) =>
-      displayLarge: TextStyle(fontWeight: FontWeight.w800, letterSpacing: -1.2),
+        (t ?? const TextStyle()).copyWith(color: ink, fontWeight: w, fontSize: size, letterSpacing: ls, height: h);
-      displaySmall: TextStyle(fontWeight: FontWeight.w800, letterSpacing: -0.5),
+
-      headlineSmall: TextStyle(fontWeight: FontWeight.w800, letterSpacing: -0.3),
+    return base.copyWith(
-      titleLarge: TextStyle(fontWeight: FontWeight.w700),
+      displayLarge: s(base.displayLarge, w: FontWeight.w600, size: 36, ls: -1.0),
-      titleMedium: TextStyle(fontWeight: FontWeight.w700),
+      displaySmall: s(base.displaySmall, w: FontWeight.w600, size: 28, ls: -0.6),
-      titleSmall: TextStyle(fontWeight: FontWeight.w700),
+      headlineSmall: s(base.headlineSmall, w: FontWeight.w600, size: 20, ls: -0.2),
-      bodyLarge: TextStyle(height: 1.4),
+      titleLarge: s(base.titleLarge, w: FontWeight.w600, size: 17, ls: -0.2),
-      bodyMedium: TextStyle(height: 1.4),
+      titleMedium: s(base.titleMedium, w: FontWeight.w600, size: 15),
-      labelLarge: TextStyle(fontWeight: FontWeight.w700),
+      titleSmall: s(base.titleSmall, w: FontWeight.w600, size: 14),
+      bodyLarge: s(base.bodyLarge, w: FontWeight.w400, size: 15, h: 1.45),
+      bodyMedium: s(base.bodyMedium, w: FontWeight.w400, size: 14, h: 1.45),
+      bodySmall: s(base.bodySmall, w: FontWeight.w400, size: 12, h: 1.4),
+      labelLarge: s(base.labelLarge, w: FontWeight.w500, size: 13),
+      labelSmall: s(base.labelSmall, w: FontWeight.w500, size: 11),
     );
   }
 }

mobile/lib/widgets/brand_mark.dart

@@ -2,10 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../theme/app_theme.dart';
 
-/// The 와카뷰 app icon mark: a gradient-filled rounded badge with a bold
+/// Soft Neutral brand mark — ink monogram, no glow or heavy tile chrome.
-/// "Y" monogram and a soft brand-tinted shadow, used wherever the splash /
-/// signup / onboarding screens need a small brand anchor instead of a
-/// generic Material icon.
 class BrandMark extends StatelessWidget {
   const BrandMark({super.key, this.size = 64});
 
@@ -13,29 +10,25 @@ class BrandMark extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final radius = size * 0.32;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final fill = isDark ? AppTheme.inkDark : AppTheme.inkLight;
+    final fg = isDark ? AppTheme.canvasDark : Colors.white;
     return Container(
       width: size,
       height: size,
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(radius),
+        color: fill,
-        gradient: AppTheme.brandGradient,
+        borderRadius: BorderRadius.circular(AppTheme.rPanel),
-        boxShadow: [
-          BoxShadow(
-            color: const Color(0xFF6D5BD0).withValues(alpha: 0.38),
-            blurRadius: size * 0.35,
-            offset: Offset(0, size * 0.12),
-          ),
-        ],
       ),
       alignment: Alignment.center,
       child: Text(
         'Y',
         style: TextStyle(
-          color: Colors.white,
+          color: fg,
-          fontWeight: FontWeight.w900,
+          fontWeight: FontWeight.w700,
-          fontSize: size * 0.46,
+          fontSize: size * 0.42,
           height: 1,
+          letterSpacing: -0.5,
         ),
       ),
     );

mobile/lib/widgets/gradient_backdrop.dart

@@ -1,14 +1,8 @@
-import 'dart:ui';
-
 import 'package:flutter/material.dart';
 
 import '../theme/app_theme.dart';
 
-/// Paints the app-wide aurora gradient + soft blurred glow orbs behind
+/// Quiet canvas behind every screen — near-flat wash, no aurora orbs.
-/// [child]. Wired into `MaterialApp.builder` so every screen gets it
-/// automatically without each Scaffold needing its own background —
-/// screens just need a transparent `scaffoldBackgroundColor` (set globally
-/// in [AppTheme]).
 class GradientBackdrop extends StatelessWidget {
   const GradientBackdrop({super.key, required this.child});
 
@@ -17,43 +11,9 @@ class GradientBackdrop extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final brightness = Theme.of(context).brightness;
-    return Stack(
+    return DecoratedBox(
-      fit: StackFit.expand,
+      decoration: BoxDecoration(gradient: AppTheme.backgroundGradient(brightness)),
-      children: [
+      child: child,
-        DecoratedBox(decoration: BoxDecoration(gradient: AppTheme.backgroundGradient(brightness))),
-        Positioned(
-          top: -90,
-          right: -70,
-          child: _Glow(color: AppTheme.glowPrimary(brightness), size: 260),
-        ),
-        Positioned(
-          bottom: -110,
-          left: -90,
-          child: _Glow(color: AppTheme.glowSecondary(brightness), size: 320),
-        ),
-        if (child != null) child!,
-      ],
-    );
-  }
-}
-
-class _Glow extends StatelessWidget {
-  const _Glow({required this.color, required this.size});
-
-  final Color color;
-  final double size;
-
-  @override
-  Widget build(BuildContext context) {
-    return IgnorePointer(
-      child: ImageFiltered(
-        imageFilter: ImageFilter.blur(sigmaX: 60, sigmaY: 60),
-        child: Container(
-          width: size,
-          height: size,
-          decoration: BoxDecoration(shape: BoxShape.circle, color: color),
-        ),
-      ),
     );
   }
 }

mobile/lib/widgets/gradient_text.dart

@@ -2,9 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../theme/app_theme.dart';
 
-/// Renders [text] filled with [AppTheme.brandGradient] instead of a flat
+/// Brand wordmark — ink weight, no rainbow gradient.
-/// color — used for the "와카뷰" wordmark so the brand reads as designed
-/// rather than default black-on-gradient body text.
 class GradientText extends StatelessWidget {
   const GradientText(this.text, {super.key, this.style, this.textAlign});
 
@@ -14,10 +12,11 @@ class GradientText extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ShaderMask(
+    final ink = Theme.of(context).brightness == Brightness.dark ? AppTheme.inkDark : AppTheme.inkLight;
-      blendMode: BlendMode.srcIn,
+    return Text(
-      shaderCallback: (bounds) => AppTheme.brandGradient.createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height)),
+      text,
-      child: Text(text, style: style, textAlign: textAlign),
+      textAlign: textAlign,
+      style: (style ?? const TextStyle()).copyWith(color: ink, fontWeight: FontWeight.w700),
     );
   }
 }

mobile/lib/widgets/message_bubble.dart

@@ -3,8 +3,7 @@ import 'package:flutter/material.dart';
 import '../models/models.dart';
 import '../theme/app_theme.dart';
 
-/// Twin messages get a dashed border + badge (PRD §3.1 와카뷰 뱃지) so an
+/// Twin messages get a warm thin border + label (PRD §3.1 와카뷰 뱃지).
-/// auto-sent bubble never reads as something the human actually typed.
 class MessageBubble extends StatelessWidget {
   const MessageBubble({
     super.key,
@@ -31,53 +30,59 @@ class MessageBubble extends StatelessWidget {
     final twin = message.isTwin;
     final retracted = message.retracted;
     final accent = AppTheme.twinAccent(theme.brightness);
+    final brightness = theme.brightness;
 
     final Color bg;
     final Color fg;
+    Border? border;
     if (retracted) {
       bg = scheme.surfaceContainerHigh;
       fg = scheme.onSurfaceVariant;
-    } else if (isMine) {
+    } else if (twin) {
-      bg = scheme.primaryContainer;
+      bg = brightness == Brightness.dark
-      fg = scheme.onPrimaryContainer;
+          ? const Color(0xFF221C14)
-    } else {
+          : const Color(0xFFFAF6F0);
-      bg = scheme.surfaceContainerHighest;
       fg = scheme.onSurface;
+      border = Border.all(color: accent.withValues(alpha: 0.4), width: 1);
+    } else if (isMine) {
+      bg = AppTheme.mineBubble(brightness);
+      fg = AppTheme.mineBubbleFg(brightness);
+    } else {
+      bg = AppTheme.peerBubble(brightness);
+      fg = scheme.onSurface;
+      border = Border.all(color: scheme.outlineVariant.withValues(alpha: 0.9));
     }
 
     final radius = BorderRadius.only(
-      topLeft: const Radius.circular(18),
+      topLeft: const Radius.circular(AppTheme.rBubble),
-      topRight: const Radius.circular(18),
+      topRight: const Radius.circular(AppTheme.rBubble),
-      bottomLeft: Radius.circular(isMine ? 18 : 4),
+      bottomLeft: Radius.circular(isMine ? AppTheme.rBubble : 6),
-      bottomRight: Radius.circular(isMine ? 4 : 18),
+      bottomRight: Radius.circular(isMine ? 6 : AppTheme.rBubble),
     );
 
     final bubble = Container(
       constraints: BoxConstraints(maxWidth: MediaQuery.sizeOf(context).width * 0.76),
       padding: const EdgeInsets.fromLTRB(14, 10, 14, 8),
-      decoration: BoxDecoration(color: bg, borderRadius: radius),
+      decoration: BoxDecoration(
+        color: bg,
+        borderRadius: radius,
+        border: border,
+      ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,
         children: [
           if (twin)
             Padding(
-              padding: const EdgeInsets.only(bottom: 6),
+              padding: const EdgeInsets.only(bottom: 4),
-              child: Row(
+              child: Text(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  Icon(Icons.auto_awesome, size: 13, color: accent),
-                  const SizedBox(width: 4),
-                  Text(
                 '와카뷰',
                 style: theme.textTheme.labelSmall?.copyWith(
                   color: accent,
-                      fontWeight: FontWeight.w800,
+                  fontWeight: FontWeight.w700,
                   letterSpacing: 0.2,
                 ),
               ),
-                ],
-              ),
             ),
           if (retracted)
             Row(
@@ -94,12 +99,12 @@ class MessageBubble extends StatelessWidget {
           else
             Text(
               message.text,
-              style: theme.textTheme.bodyMedium?.copyWith(color: fg, height: 1.35),
+              style: theme.textTheme.bodyMedium?.copyWith(color: fg, height: 1.4),
             ),
           const SizedBox(height: 4),
           Text(
             _time(message.createdAt),
-            style: theme.textTheme.labelSmall?.copyWith(color: fg.withOpacity(0.55), fontSize: 10),
+            style: theme.textTheme.labelSmall?.copyWith(color: fg.withValues(alpha: 0.55), fontSize: 10),
           ),
         ],
       ),
@@ -109,12 +114,7 @@ class MessageBubble extends StatelessWidget {
       crossAxisAlignment: isMine ? CrossAxisAlignment.end : CrossAxisAlignment.start,
       mainAxisSize: MainAxisSize.min,
       children: [
-        twin
+        bubble,
-            ? CustomPaint(
-                painter: _DashedRRectPainter(color: accent, radius: radius),
-                child: bubble,
-              )
-            : bubble,
         if (twin && isMine && !retracted && onRetract != null)
           Padding(
             padding: const EdgeInsets.only(top: 2, right: 4, left: 4),
@@ -135,7 +135,7 @@ class MessageBubble extends StatelessWidget {
     );
 
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
+      padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 12),
       child: Align(
         alignment: isMine ? Alignment.centerRight : Alignment.centerLeft,
         child: content,
@@ -143,40 +143,3 @@ class MessageBubble extends StatelessWidget {
     );
   }
 }
-
-class _DashedRRectPainter extends CustomPainter {
-  _DashedRRectPainter({required this.color, required this.radius});
-
-  final Color color;
-  final BorderRadius radius;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..color = color
-      ..style = PaintingStyle.stroke
-      ..strokeWidth = 1.4;
-    final rrect = radius.toRRect(Rect.fromLTWH(0.7, 0.7, size.width - 1.4, size.height - 1.4));
-    final path = Path()..addRRect(rrect);
-    final dashed = _dashPath(path, dashLength: 5, gapLength: 4);
-    canvas.drawPath(dashed, paint);
-  }
-
-  Path _dashPath(Path source, {required double dashLength, required double gapLength}) {
-    final metrics = source.computeMetrics();
-    final out = Path();
-    for (final metric in metrics) {
-      var distance = 0.0;
-      while (distance < metric.length) {
-        final next = distance + dashLength;
-        out.addPath(metric.extractPath(distance, next.clamp(0, metric.length)), Offset.zero);
-        distance = next + gapLength;
-      }
-    }
-    return out;
-  }
-
-  @override
-  bool shouldRepaint(covariant _DashedRRectPainter oldDelegate) =>
-      oldDelegate.color != color || oldDelegate.radius != radius;
-}

mobile/lib/widgets/my_user_id_chip.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import '../theme/app_theme.dart';
+
 /// Shows the signed-in numeric user id with one-tap copy.
 class MyUserIdChip extends StatelessWidget {
   const MyUserIdChip({super.key, required this.userId, this.compact = false});
@@ -29,18 +31,23 @@ class MyUserIdChip extends StatelessWidget {
         icon: const Icon(Icons.badge_outlined),
       );
     }
+    final brightness = theme.brightness;
     return Material(
-      color: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.7),
+      color: AppTheme.glassFill(brightness),
-      borderRadius: BorderRadius.circular(12),
+      borderRadius: BorderRadius.circular(AppTheme.rPanel),
       child: InkWell(
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(AppTheme.rPanel),
         onTap: () => _copy(context),
-        child: Padding(
+        child: Container(
-          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(AppTheme.rPanel),
+            border: Border.all(color: AppTheme.glassBorder(brightness)),
+          ),
           child: Row(
             children: [
-              Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.primary),
+              Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.onSurfaceVariant),
-              const SizedBox(width: 8),
+              const SizedBox(width: 10),
               Expanded(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
@@ -54,17 +61,18 @@ class MyUserIdChip extends StatelessWidget {
                     Text(
                       '$userId',
                       style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w700,
+                        fontWeight: FontWeight.w600,
-                        letterSpacing: 0.5,
+                        letterSpacing: 0.3,
                       ),
                     ),
                   ],
                 ),
               ),
               Text(
-                '탭하여 복사',
+                '복사',
                 style: theme.textTheme.labelSmall?.copyWith(
                   color: theme.colorScheme.primary,
+                  fontWeight: FontWeight.w600,
                 ),
               ),
               const SizedBox(width: 4),

mobile/lib/widgets/primary_gradient_button.dart

@@ -2,10 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../theme/app_theme.dart';
 
-/// Primary call-to-action button filled with [AppTheme.brandGradient] and a
+/// Primary CTA — Soft Neutral ink fill (API name kept for call sites).
-/// soft brand-tinted shadow, so the one action per screen that matters most
-/// (시작하기 / 이 말투로 시작 …) visibly outranks the flat glass buttons
-/// around it.
 class PrimaryGradientButton extends StatelessWidget {
   const PrimaryGradientButton({
     super.key,
@@ -20,40 +17,34 @@ class PrimaryGradientButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final disabled = onPressed == null;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
-    return Opacity(
+    final bg = isDark ? AppTheme.inkDark : AppTheme.inkLight;
-      opacity: disabled ? 0.6 : 1,
+    final fg = isDark ? AppTheme.canvasDark : Colors.white;
-      child: Material(
+    final disabled = onPressed == null || loading;
-        color: Colors.transparent,
+    return SizedBox(
-        borderRadius: BorderRadius.circular(16),
+      height: 48,
-        child: InkWell(
+      width: double.infinity,
-          borderRadius: BorderRadius.circular(16),
+      child: FilledButton(
-          onTap: onPressed,
+        onPressed: disabled && !loading ? null : onPressed,
-          child: Container(
+        style: FilledButton.styleFrom(
-            height: 52,
+          backgroundColor: bg,
-            alignment: Alignment.center,
+          foregroundColor: fg,
-            decoration: BoxDecoration(
+          disabledBackgroundColor: bg.withValues(alpha: 0.35),
-              borderRadius: BorderRadius.circular(16),
+          shape: RoundedRectangleBorder(
-              gradient: AppTheme.brandGradient,
+            borderRadius: BorderRadius.circular(AppTheme.rButton),
-              boxShadow: [
-                BoxShadow(
-                  color: const Color(0xFF6D5BD0).withValues(alpha: 0.35),
-                  blurRadius: 20,
-                  offset: const Offset(0, 8),
           ),
-              ],
+          elevation: 0,
+          shadowColor: Colors.transparent,
         ),
         child: loading
-                ? const SizedBox(
+            ? SizedBox(
-                    height: 20,
+                height: 18,
-                    width: 20,
+                width: 18,
-                    child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
+                child: CircularProgressIndicator(strokeWidth: 2, color: fg),
               )
             : Text(
                 label,
-                    style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 16),
+                style: TextStyle(color: fg, fontWeight: FontWeight.w600, fontSize: 15),
-                  ),
-          ),
               ),
       ),
     );