feat(V2-X-b): UI 정리 + pull 동기화 + Stripe 서명 검증 + ui-native 패키지

묶음 A — UI 정리 + i18n 완성:
[A1] desktop SettingsModal에 CloudSyncSection 통합 (탭 6번째)
  - CloudIcon import, settings.tabs.cloud 키 추가
  - 기존 about 탭은 index 5 -> 6

[A2] apps/web Sidebar 공유 layout 리팩터링
  - app/(app)/layout.tsx 신규 (route group)
  - dashboard/meetings/record/teams/billing을 (app)/ 아래로 git mv
  - app/(app)/layout.tsx에 auth 가드 + Sidebar 통합
  - 기존 개별 page.tsx에서 Sidebar/auth 중복 제거
  - app/(app)/dashboard/layout.tsx 제거 (루트 layout이 처리)

[A3] 11개 locale에 V2 새 키 추가 (en/ja/zh/zh-TW/es/fr/de/pt/ru/vi/th)
  - nav.meetings/record/teams/billing/logout
  - login.subtitle/google/github/terms
  - settings.tabs.cloud

묶음 B — V2-4b pull 동기화:
- CloudSyncService.pullAll() 신규
  - history/dictionary 테이블 원격에서 fetch
  - last_sync_at 이후 updated_at만 필터
  - Last-Write-Wins 충돌 해결 (remote.updated_at > local.updated_at)
  - 로컬에 없는 행은 INSERT, 있는 행은 UPDATE (구체적 컬럼 지정)
- IPC CLOUD_SYNC.PULL_ALL 채널 + handler + preload api
- CloudSyncSection에 Pull 버튼 추가 (Push 옆에 위치)

묶음 C — V2-8b Stripe webhook 서명 검증:
- stripe-webhook Edge Function에 Web Crypto API 기반 HMAC-SHA256 검증
  - Stripe-Signature 헤더 파싱 (t=, v1= 엔트리)
  - Replay 방지 (timestamp tolerance 300초)
  - constantTimeEqual로 타이밍 공격 방지
  - crypto.subtle.importKey/sign으로 HMAC 계산
- stripe-portal Edge Function 신규 (Customer Portal)
  - JWT 인증 -> 기존 customer_id 조회 -> billing_portal/sessions 생성
  - return_url 지원
- apps/web/components/billing/portal-button.tsx (구독 관리 버튼)
- billing 페이지에 Free 외 tier 사용자에게 PortalButton 표시
- config.toml에 stripe-portal 함수 등록 (verify_jwt=true)

묶음 D — V2-6b packages/ui-native:
- @d3ro/ui-native 신규 패키지 (React Native 전용 DS)
  - theme.ts: d3roNativePalette/Typo/Radius (MUI 없는 정적 값)
  - components/MetalCard.tsx: View + 섀시 섀도우
  - components/PhosphorText.tsx: Text + 앰버 glow (textShadow)
  - components/Led.tsx: View 원 + glow
  - components/PhysicalButton.tsx: Pressable + 누름 느낌
- React/React-Native는 peerDependencies
- apps/mobile/package.json에 @d3ro/ui-native를 file: 의존성으로 추가
  (mobile은 npm workspace 제외이므로 file path 필요)

검증:
- desktop typecheck OK
- web typecheck OK
- web next build OK (11 라우트, (app) 그룹 반영)
- 회귀 없음

apps/web/src/app/(app)/meetings/[id]/page.tsx

@@ -0,0 +1,141 @@
+// apps/web/src/app/(app)/meetings/[id]/page.tsx
+// 회의록 상세 — transcripts + memos + documents
+
+import { notFound } from 'next/navigation'
+import { Box, Stack } from '@mui/material'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
+
+interface PageProps {
+  params: Promise<{ id: string }>
+}
+
+export default async function MeetingDetailPage({ params }: PageProps): Promise<React.ReactElement> {
+  const { id } = await params
+
+  const supabase = await getSupabaseServerClient()
+
+  const [{ data: meeting }, { data: transcripts }, { data: memos }, { data: documents }] =
+    await Promise.all([
+      supabase.from('meetings').select('*').eq('id', id).maybeSingle(),
+      supabase
+        .from('transcripts')
+        .select('*')
+        .eq('meeting_id', id)
+        .order('segment_index', { ascending: true }),
+      supabase
+        .from('meeting_memos')
+        .select('*')
+        .eq('meeting_id', id)
+        .order('timestamp_ms', { ascending: true }),
+      supabase
+        .from('meeting_documents')
+        .select('*')
+        .eq('meeting_id', id)
+        .order('created_at', { ascending: true })
+    ])
+
+  if (!meeting) {
+    notFound()
+  }
+
+  return (
+    <Box sx={{ p: 4 }}>
+      <Box sx={{ mb: 4 }}>
+        <PhosphorText variant="title">
+          {meeting.title ?? '(제목 없음)'}
+        </PhosphorText>
+        <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mt: 1 }}>
+          {new Date(meeting.started_at).toLocaleString('ko-KR')} · {meeting.status}
+        </Box>
+      </Box>
+
+      <Stack spacing={3}>
+          {/* Transcript */}
+          <MetalCard sx={{ p: 3 }}>
+            <PhosphorText variant="heading" sx={{ mb: 2 }}>
+              TRANSCRIPT
+            </PhosphorText>
+            {(transcripts ?? []).length === 0 ? (
+              <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
+                전사 세그먼트가 없습니다.
+              </Box>
+            ) : (
+              <Stack spacing={1.5}>
+                {(transcripts ?? []).map((seg) => (
+                  <Box key={seg.id}>
+                    <Box sx={{ color: d3roPalette.text.label, fontSize: 11, mb: 0.5 }}>
+                      {Math.floor(seg.timestamp_ms / 60000)}:
+                      {String(Math.floor((seg.timestamp_ms / 1000) % 60)).padStart(2, '0')}
+                      {seg.speaker && ` · ${seg.speaker}`}
+                    </Box>
+                    <Box sx={{ color: d3roPalette.text.primary, ...typoSx("body") }}>
+                      {seg.text}
+                    </Box>
+                  </Box>
+                ))}
+              </Stack>
+            )}
+          </MetalCard>
+
+          {/* Memos */}
+          <MetalCard sx={{ p: 3 }}>
+            <PhosphorText variant="heading" sx={{ mb: 2 }}>
+              MEMOS
+            </PhosphorText>
+            {(memos ?? []).length === 0 ? (
+              <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>메모가 없습니다.</Box>
+            ) : (
+              <Stack spacing={1}>
+                {(memos ?? []).map((memo) => (
+                  <Box
+                    key={memo.id}
+                    sx={{
+                      p: 1.5,
+                      borderLeft: `3px solid ${d3roPalette.accent.amber}`,
+                      bgcolor: d3roPalette.bg.inset
+                    }}
+                  >
+                    <Box sx={{ color: d3roPalette.text.primary, fontSize: 13 }}>{memo.content}</Box>
+                  </Box>
+                ))}
+              </Stack>
+            )}
+          </MetalCard>
+
+          {/* Documents */}
+          <MetalCard sx={{ p: 3 }}>
+            <PhosphorText variant="heading" sx={{ mb: 2 }}>
+              DOCUMENTS
+            </PhosphorText>
+            {(documents ?? []).length === 0 ? (
+              <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
+                생성된 문서가 없습니다.
+              </Box>
+            ) : (
+              <Stack spacing={1}>
+                {(documents ?? []).map((doc) => (
+                  <Box
+                    key={doc.id}
+                    sx={{
+                      p: 2,
+                      bgcolor: d3roPalette.bg.inset,
+                      borderRadius: 1
+                    }}
+                  >
+                    <Box sx={{ ...typoSx("body"), color: d3roPalette.text.primary, mb: 0.5 }}>
+                      {doc.title}
+                    </Box>
+                    <Box sx={{ color: d3roPalette.text.label, fontSize: 11 }}>
+                      {doc.template_type} · {new Date(doc.created_at).toLocaleDateString('ko-KR')}
+                    </Box>
+                  </Box>
+                ))}
+              </Stack>
+            )}
+        </MetalCard>
+      </Stack>
+    </Box>
+  )
+}

apps/web/src/app/(app)/meetings/page.tsx

@@ -0,0 +1,75 @@
+// apps/web/src/app/(app)/meetings/page.tsx
+// 회의록 리스트 — auth/Sidebar는 (app)/layout.tsx가 제공
+
+import Link from 'next/link'
+import { Box, Grid } from '@mui/material'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
+
+async function loadMeetings(): Promise<Array<{ id: string; title: string; started_at: string; status: string }>> {
+  try {
+    const supabase = await getSupabaseServerClient()
+    const { data } = await supabase
+      .from('meetings')
+      .select('id, title, started_at, status')
+      .order('started_at', { ascending: false })
+      .limit(100)
+    return (data ?? []).map((m) => ({
+      id: m.id,
+      title: m.title ?? '(제목 없음)',
+      started_at: m.started_at,
+      status: m.status
+    }))
+  } catch {
+    return []
+  }
+}
+
+export default async function MeetingsPage(): Promise<React.ReactElement> {
+  const meetings = await loadMeetings()
+
+  return (
+    <Box sx={{ p: 4 }}>
+      <PhosphorText variant="title" sx={{ mb: 4 }}>
+        MEETINGS
+      </PhosphorText>
+
+      {meetings.length === 0 ? (
+        <MetalCard sx={{ p: 6, textAlign: 'center', color: d3roPalette.text.muted }}>
+          아직 회의가 없습니다. Record 탭에서 새 녹음을 시작하세요.
+        </MetalCard>
+      ) : (
+        <Grid container spacing={3}>
+          {meetings.map((meeting) => (
+            <Grid size={{ xs: 12, sm: 6, md: 4 }} key={meeting.id}>
+              <Link href={`/meetings/${meeting.id}`} style={{ textDecoration: 'none' }}>
+                <MetalCard sx={{ p: 3, cursor: 'pointer', minHeight: 140 }}>
+                  <Box sx={{ ...typoSx('body'), color: d3roPalette.text.primary, mb: 1 }}>
+                    {meeting.title}
+                  </Box>
+                  <Box sx={{ color: d3roPalette.text.muted, fontSize: 12, mb: 2 }}>
+                    {new Date(meeting.started_at).toLocaleString('ko-KR')}
+                  </Box>
+                  <Box
+                    sx={{
+                      display: 'inline-block',
+                      px: 1.5,
+                      py: 0.5,
+                      borderRadius: 1,
+                      fontSize: 11,
+                      bgcolor: d3roPalette.bg.inset,
+                      color: d3roPalette.text.label
+                    }}
+                  >
+                    {meeting.status}
+                  </Box>
+                </MetalCard>
+              </Link>
+            </Grid>
+          ))}
+        </Grid>
+      )}
+    </Box>
+  )
+}