M9: [?] 도움 버튼을 차례 안내 옆으로, 튜토리얼 E2E, 기존 E2E는 요약 카드 본 것으로 처리

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

apps/web/src/components/GameHelp.tsx

@@ -87,7 +87,7 @@ export function QuickStartButton({ title, cards }: { title: string; cards: Quick
 }
 
 /**
- * [?] button for the room bar while a game is on screen. Also opens the summary cards by itself
+ * [?] button next to the turn status while a game is on screen. Also opens the summary cards by itself
  * the first time this device sees a running game of this kind.
  */
 export function GameHelp({ room, ui, title, me, players }: { room: RoomView; ui: GameUI; title: string; me: string; players: Record<string, PublicUser> }) {
@@ -118,8 +118,9 @@ export function GameHelp({ room, ui, title, me, players }: { room: RoomView; ui:
 
   return (
     <>
-      <button className="btn btn-ghost btn-sm" onClick={() => (setRules(false), setOpen(true))} aria-label="도움말: 지금 할 수 있는 것" aria-haspopup="dialog">
-        ❓ 도움
+      <button className="btn btn-secondary" style={{ flexShrink: 0, padding: '0 12px', flexDirection: 'column', gap: 0, lineHeight: 1.1 }} onClick={() => (setRules(false), setOpen(true))} aria-label="도움말: 지금 할 수 있는 것" aria-haspopup="dialog">
+        <span aria-hidden style={{ fontSize: '1.3rem' }}>?</span>
+        <span className="small">도움</span>
       </button>
       {open &&
         createPortal(

apps/web/src/pages/RoomPage.tsx

@@ -160,7 +160,6 @@ function Room({ code, me }: { code: string; me: PublicUser }) {
           </strong>
           <CopyButton text={`${location.origin}/r/${code}`} label={<>방 <CodeLabel code={code} /> 🔗</>} done="링크 복사됨 ✓" className="btn btn-ghost btn-sm" />
           <span style={{ flex: 1 }} />
-          {inGame && game && <GameHelp room={room} ui={ui} title={g.nameKo} me={me.id} players={players} />}
           {!roomChatClosed && (
             <span className="phone-only">
               <ChatButton onOpen={() => setChatOpen(true)} />
@@ -546,14 +545,21 @@ function GameView({ room, ui, me, players, pending, slow }: { room: RoomView; ui
       )}
     </div>
   );
+  // [?] 지금 할 수 있는 것 sits right next to the turn status (docs/07 §5).
+  const statusRow = (
+    <div className="row" style={{ flexWrap: 'nowrap', gap: 8, width: '100%', alignItems: 'stretch' }}>
+      {status}
+      <GameHelp room={room} ui={ui} title={gameName(room.gameId)} me={me.id} players={players} />
+    </div>
+  );
   return (
     <div className="game-layout">
       <div className="game-main">
-        {!wide && status}
+        {!wide && statusRow}
         <ui.Board {...props} />
       </div>
       <aside className="game-side" aria-label="게임 정보">
-        {wide && status}
+        {wide && statusRow}
         <ui.Side {...props} />
         {wide && !(ui.ownChat && (room.status === 'playing' || room.status === 'paused')) && <ChatPanel room={room} me={me} title={false} />}
       </aside>