M9: 게임 26종 30초 요약 카드·[?] 지금 할 수 있는 것 내용

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/games/mafia/quick.tsx

@@ -0,0 +1,41 @@
+/** 마피아 30초 규칙 요약 (docs/07 §5). */
+import type { QuickCard } from '../types';
+
+/** Big emoji composition on a soft panel (no images). */
+function Scene({ bg, rows }: { bg: string; rows: { e: string; label?: string }[][] }) {
+  return (
+    <div aria-hidden style={{ width: 240, height: 150, borderRadius: 14, background: bg, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6, padding: 8, boxSizing: 'border-box' }}>
+      {rows.map((row, i) => (
+        <div key={i} style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
+          {row.map((c, j) => (
+            <div key={j} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 44 }}>
+              <span style={{ fontSize: 34, lineHeight: 1.1 }}>{c.e}</span>
+              {c.label && <span style={{ fontSize: 13, fontWeight: 700, color: '#111827', background: 'rgba(255,255,255,.85)', borderRadius: 6, padding: '0 4px' }}>{c.label}</span>}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const quickStart: QuickCard[] = [
+  {
+    pic: <Scene bg="linear-gradient(#fde68a, #fef3c7)" rows={[[{ e: '☀️' }], [{ e: '🙂', label: '토론' }, { e: '🤔', label: '투표' }, { e: '👉', label: '탈락' }]]} />,
+    alt: '해가 뜬 낮에 사람들이 토론하고 투표해서 한 명을 가리켜요',
+    title: '낮: 토론하고 투표',
+    text: '낮에는 [전체] 채팅으로 누가 마피아 같은지 이야기하고, 투표로 한 명을 골라 찬성이 많으면 탈락시켜요.',
+  },
+  {
+    pic: <Scene bg="linear-gradient(#1e1b4b, #312e81)" rows={[[{ e: '🌙' }], [{ e: '🕶️', label: '마피아' }, { e: '🔎', label: '경찰' }, { e: '🩺', label: '의사' }]]} />,
+    alt: '달이 뜬 밤에 마피아, 경찰, 의사가 몰래 행동해요',
+    title: '밤: 직업대로 몰래',
+    text: '밤에는 마피아가 한 명을 노리고, 경찰은 한 명을 조사하고, 의사는 한 명을 지켜요. 내 직업은 [내 직업] 카드를 꾹 눌러 봐요.',
+  },
+  {
+    pic: <Scene bg="linear-gradient(#dcfce7, #fee2e2)" rows={[[{ e: '🙂', label: '시민 팀' }, { e: '⚔️' }, { e: '🕶️', label: '마피아 팀' }]]} />,
+    alt: '시민 팀과 마피아 팀이 마주 보고 있어요',
+    title: '팀이 함께 이겨요',
+    text: '시민 팀은 마피아를 모두 찾으면, 마피아 팀은 시민만큼 많이 남으면 이겨요. 탈락하면 살아 있는 사람에게 힌트를 주면 안 돼요.',
+  },
+];