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)/billing/page.tsx

@@ -0,0 +1,151 @@
+// apps/web/src/app/(app)/billing/page.tsx
+// 구독 및 결제 페이지 — auth/Sidebar는 (app)/layout.tsx가 제공
+
+import { Box, Grid, Stack } from '@mui/material'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, typoSx } from '@d3ro/ui/theme'
+import { CheckoutButton } from '@/components/billing/checkout-button'
+import { PortalButton } from '@/components/billing/portal-button'
+import { getSupabaseServerClient } from '@/lib/supabase-server'
+
+interface Plan {
+  tier: 'free' | 'pro' | 'team'
+  name: string
+  price: string
+  features: string[]
+  highlight?: boolean
+}
+
+const PLANS: Plan[] = [
+  {
+    tier: 'free',
+    name: 'Free',
+    price: '$0',
+    features: [
+      '월 5시간 전사',
+      '월 50회 LLM 처리',
+      '1기기 동기화',
+      '로컬 모델 (데스크톱)'
+    ]
+  },
+  {
+    tier: 'pro',
+    name: 'Pro',
+    price: '$10/월',
+    highlight: true,
+    features: [
+      '무제한 전사',
+      '무제한 LLM 처리',
+      '5기기 동기화',
+      'Sonnet 모델 사용',
+      '우선 지원'
+    ]
+  },
+  {
+    tier: 'team',
+    name: 'Team',
+    price: '$20/인/월',
+    features: [
+      'Pro 모든 기능',
+      '무제한 멤버',
+      '팀 회의 공유',
+      '관리자 대시보드',
+      'Opus 모델 사용',
+      'SSO/SAML (V2-8b)'
+    ]
+  }
+]
+
+async function loadCurrentTier(): Promise<string> {
+  try {
+    const supabase = await getSupabaseServerClient()
+    const { data } = await supabase.from('subscriptions').select('tier').maybeSingle()
+    return ((data as { tier?: string } | null)?.tier as string) ?? 'free'
+  } catch {
+    return 'free'
+  }
+}
+
+export default async function BillingPage(): Promise<React.ReactElement> {
+  const currentTier = await loadCurrentTier()
+
+  return (
+    <Box sx={{ p: 4 }}>
+      <Stack direction="row" alignItems="flex-end" justifyContent="space-between" sx={{ mb: 4 }}>
+        <Box>
+          <PhosphorText variant="title" sx={{ mb: 1 }}>
+            BILLING
+          </PhosphorText>
+          <Box sx={{ color: d3roPalette.text.muted, fontSize: 13 }}>
+            현재 구독: <strong>{currentTier.toUpperCase()}</strong>
+          </Box>
+        </Box>
+        {currentTier !== 'free' && <PortalButton />}
+      </Stack>
+
+        <Grid container spacing={3}>
+          {PLANS.map((plan) => {
+            const active = currentTier === plan.tier
+            return (
+              <Grid size={{ xs: 12, md: 4 }} key={plan.tier}>
+                <MetalCard
+                  sx={{
+                    p: 4,
+                    height: '100%',
+                    border: active
+                      ? `2px solid ${d3roPalette.accent.amber}`
+                      : plan.highlight
+                        ? `2px solid ${d3roPalette.tag.purple}`
+                        : undefined
+                  }}
+                >
+                  <Box sx={{ ...typoSx('label'), color: d3roPalette.text.label, mb: 1 }}>
+                    {plan.tier.toUpperCase()}
+                  </Box>
+                  <PhosphorText variant="title" sx={{ mb: 1 }}>
+                    {plan.name}
+                  </PhosphorText>
+                  <Box sx={{ ...typoSx('value'), color: d3roPalette.text.primary, mb: 3 }}>
+                    {plan.price}
+                  </Box>
+
+                  <Box component="ul" sx={{ pl: 2, mb: 3, color: d3roPalette.text.secondary }}>
+                    {plan.features.map((f) => (
+                      <Box component="li" key={f} sx={{ fontSize: 13, mb: 0.5 }}>
+                        {f}
+                      </Box>
+                    ))}
+                  </Box>
+
+                  {active ? (
+                    <Box
+                      sx={{
+                        textAlign: 'center',
+                        p: 1.5,
+                        bgcolor: d3roPalette.bg.inset,
+                        borderRadius: 1,
+                        color: d3roPalette.accent.amber,
+                        ...typoSx('label')
+                      }}
+                    >
+                      현재 구독 중
+                    </Box>
+                  ) : plan.tier === 'free' ? (
+                    <Box sx={{ textAlign: 'center', color: d3roPalette.text.muted, fontSize: 12 }}>
+                      기본 플랜
+                    </Box>
+                  ) : (
+                    <CheckoutButton tier={plan.tier} />
+                  )}
+                </MetalCard>
+              </Grid>
+            )
+          })}
+        </Grid>
+
+      <Box sx={{ mt: 4, color: d3roPalette.text.muted, fontSize: 11 }}>
+        결제는 Stripe로 안전하게 처리됩니다. 언제든 취소할 수 있습니다.
+      </Box>
+    </Box>
+  )
+}