feat(mobile): Phase M-1 모바일 프로젝트 기반 + V3 마스터 플랜

- V3 모바일 마스터 플랜 작성 (docs/v3/00-mobile-master-plan.md)
  11개 Phase, 5주 로드맵, 전략 결정사항 확정
- 7개 디자인 HTML 레퍼런스 저장 (docs/v3/designs/)
- app.json → app.config.ts 전환 + 환경변수 체계
- 5탭 네비게이션 (DASH/HIST/REC FAB/TALK/SET)
- metro.config.js monorepo 격리 (root RN 0.84 충돌 해결)
- ui-native 테마 디자인 목업 색상 동기화
- SafeArea 적용 (useSafeAreaInsets)
- DEV 로그인 우회 (__DEV__ 전용)
- Supabase .env 연동
- iOS 시뮬레이터 검증 완료

apps/mobile/app/(tabs)/talk.tsx

@@ -0,0 +1,188 @@
+// apps/mobile/app/(tabs)/talk.tsx
+// AI 대화 탭 — 텍스트+음성 채팅
+// Phase M-2에서 디자인(docs/v3/designs/talk.html) 정밀 적용
+// Phase M-5에서 음성 파이프라인 구현
+
+import { useState } from 'react'
+import { View, ScrollView, TextInput, StyleSheet, Pressable, KeyboardAvoidingView, Platform } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { MetalCard, PhosphorText, Led, d3roNativePalette } from '@d3ro/ui-native'
+
+interface ChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+}
+
+export default function TalkScreen(): React.ReactElement {
+  const insets = useSafeAreaInsets()
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      id: '1',
+      role: 'assistant',
+      content: 'Hello! How can I help you today?'
+    }
+  ])
+  const [input, setInput] = useState('')
+
+  function handleSend(): void {
+    if (!input.trim()) return
+    const userMsg: ChatMessage = {
+      id: String(Date.now()),
+      role: 'user',
+      content: input.trim()
+    }
+    setMessages((prev) => [...prev, userMsg])
+    setInput('')
+    // Phase M-5: 실제 AI 응답 구현
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={80}
+    >
+      {/* Header */}
+      <View style={[styles.header, { paddingTop: insets.top + 8 }]}>
+        <View style={styles.headerLeft}>
+          <Led color="amber" size={8} />
+          <PhosphorText variant="label" color="muted" style={{ letterSpacing: 3 }}>
+            TALK
+          </PhosphorText>
+        </View>
+        <View style={styles.headerRight}>
+          <PhosphorText variant="label" color="amber">LIVE</PhosphorText>
+          <Led color="green" size={6} />
+        </View>
+      </View>
+
+      {/* Chat Messages */}
+      <ScrollView style={styles.chatArea} contentContainerStyle={styles.chatContent}>
+        {messages.map((msg) => (
+          <View
+            key={msg.id}
+            style={[
+              styles.bubble,
+              msg.role === 'user' ? styles.userBubble : styles.aiBubble
+            ]}
+          >
+            <PhosphorText
+              variant="body"
+              color={msg.role === 'user' ? 'amber' : 'primary'}
+              style={{ fontFamily: undefined }}
+            >
+              {msg.content}
+            </PhosphorText>
+            <PhosphorText variant="label" color="muted" style={styles.bubbleLabel}>
+              {msg.role === 'user' ? 'YOU' : 'CLAUDE'}
+            </PhosphorText>
+          </View>
+        ))}
+      </ScrollView>
+
+      {/* Input Area */}
+      <View style={styles.inputArea}>
+        <View style={styles.inputRow}>
+          <TextInput
+            style={styles.textInput}
+            placeholder="Type or speak..."
+            placeholderTextColor={d3roNativePalette.text.muted}
+            value={input}
+            onChangeText={setInput}
+            onSubmitEditing={handleSend}
+            returnKeyType="send"
+          />
+          <Pressable style={styles.sendBtn} onPress={handleSend}>
+            <View style={styles.sendArrow} />
+          </Pressable>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: d3roNativePalette.bg.app },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: d3roNativePalette.border.default
+  },
+  headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  chatArea: { flex: 1 },
+  chatContent: { padding: 20, paddingBottom: 20, gap: 16 },
+  bubble: {
+    maxWidth: '85%',
+    padding: 16,
+    borderRadius: 16,
+    position: 'relative',
+    marginBottom: 12
+  },
+  aiBubble: {
+    alignSelf: 'flex-start',
+    backgroundColor: d3roNativePalette.bg.card,
+    borderWidth: 1,
+    borderColor: d3roNativePalette.border.default,
+    borderTopLeftRadius: 4
+  },
+  userBubble: {
+    alignSelf: 'flex-end',
+    backgroundColor: d3roNativePalette.accent.amberDim,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 92, 53, 0.3)',
+    borderTopRightRadius: 4
+  },
+  bubbleLabel: {
+    position: 'absolute',
+    bottom: -16,
+    fontSize: 9
+  },
+  inputArea: {
+    backgroundColor: 'rgba(25, 25, 27, 0.95)',
+    borderTopWidth: 1,
+    borderTopColor: d3roNativePalette.border.default,
+    padding: 12,
+    paddingBottom: 24
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: d3roNativePalette.bg.inset,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: d3roNativePalette.border.default,
+    padding: 8
+  },
+  textInput: {
+    flex: 1,
+    color: d3roNativePalette.text.primary,
+    fontSize: 14,
+    paddingHorizontal: 8
+  },
+  sendBtn: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: d3roNativePalette.accent.amberDim,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 92, 53, 0.3)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  sendArrow: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: 5,
+    borderRightWidth: 5,
+    borderBottomWidth: 8,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: d3roNativePalette.accent.amber
+  }
+})