docs: PC 중심 화면 설계로 변경(07 화면 틀, 상단 메뉴·홈·대기실·게임·관리자 PC 배치)

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

docs/07-ui-ux.md

@@ -40,24 +40,62 @@
 - 모서리 둥글기 12px(버튼), 16px(카드).
 - 바둑판처럼 칸이 작은 보드: 칸 크기가 32px 미만이면 "확대 보기" 버튼 + 두 손가락 확대 지원, "두 번 눌러 확정" 기본 켜짐.
 
-## 3. 공통 화면 틀
+## 3. 화면 틀 — PC 중심 (2026-10-04 결정)
+사용자 요청으로 **PC 화면을 기준으로 설계**한다. 휴대폰·태블릿은 같은 화면을 세로로 접어서 지원한다.
+
+### 3.1 화면 폭 구간
+| 구간 | 폭 | 배치 |
+|---|---|---|
+| PC (기준) | 1100px 이상 (설계 기준 1280~1920) | 상단 메뉴 + 여러 칸 배치, 채팅·기보 항상 보임 |
+| 태블릿 | 720~1099px | 두 칸 → 한 칸으로 접힘, 오른쪽 패널은 판 아래로 |
+| 휴대폰 | 720px 미만 | 한 칸, 채팅은 버튼으로 여는 시트, 주요 버튼은 아래 고정 |
+
+### 3.2 공통 상단 메뉴 (PC)
 ```
-┌──────────────────────────┐
-│ ← 홈   오목 · 123 456   ⋯ │  ← 상단 바(56px): 뒤로, 게임·코드, 메뉴
-│ 내 차례예요 (●흑)  ◔ 23초  │  ← 상태 줄: 지금 할 일 + 타이머
-├──────────────────────────┤
-│  상대 정보 (이름, 시간)      │
-│                          │
-│        게임 보드           │  ← 화면 폭에 맞춰 정사각형
-│                          │
-│  내 정보 / 내 손패         │
-├──────────────────────────┤
-│ [주요 행동 버튼들]          │  ← 하단 고정, 엄지 영역
-│ 💬 채팅  😊 반응            │
-└──────────────────────────┘
+┌──────────────────────────────────────────────────────────────────────────┐
+│ ● 같이 놀자 보드게임    홈   게임 목록   [코드 6자리 입력칸][참여]      👤 닉네임 ▾ │ 64px
+└──────────────────────────────────────────────────────────────────────────┘
 ```
-- PC(가로 넓음): 보드 가운데, 오른쪽 패널에 플레이어 목록·채팅·기록.
-- 카드 게임: 원형 테이블 배치, 나는 항상 아래. 상대는 인원에 따라 위/좌/우에 자동 배치.
+- 어느 화면에서든 코드를 바로 넣어 참여할 수 있게 상단에 코드 입력칸을 둔다.
+- 내용 폭은 최대 1280px, 가운데 정렬. 게임 화면만 화면 전체 폭을 쓴다.
+
+### 3.3 홈 (PC)
+```
+┌ 상단 메뉴 ───────────────────────────────────────────────────────────────┐
+│ [＋ 방 만들기 (큰 버튼)]   [코드로 참여: □□□ □□□ ]   [▶ 하던 게임으로]        │
+├──────────────────────────────────────────────────────┬───────────────────┤
+│ 게임 카드 격자 (4~5열, 카드에 인원·시간·난이도)            │ 지금 열린 공개 방   │
+│                                                      │ (게임·인원·참여)    │
+└──────────────────────────────────────────────────────┴───────────────────┘
+```
+
+### 3.4 대기실 (PC)
+```
+┌──────────────────────────────┬────────────────────────────────┐
+│ 초대 카드(코드 크게, 복사·QR)     │ 자리 목록(2~10칸 격자)              │
+│ 게임 설정(펼쳐서 바로 수정 — 방장)  │ 채팅(항상 보임)                    │
+│ 규칙 요약                       │ [게임 시작] / [준비하기]            │
+└──────────────────────────────┴────────────────────────────────┘
+```
+
+### 3.5 게임 화면 (PC)
+```
+┌ 상단 메뉴(얇게 48px: 게임명·코드·메뉴) ─────────────────────────────────────┐
+│                                              │ 상태: 내 차례예요 ◔ 23초       │
+│                                              │ 상대 정보 · 시계               │
+│             게임 판 (화면 높이에 맞춤)            │ 내 정보 · 시계                 │
+│                                              │ [무르기][무승부][기권]          │
+│                                              │ 기보(수 목록)                  │
+│                                              │ 채팅 + 반응 버튼               │
+└──────────────────────────────────────────────┴──────────────────────────────┘
+```
+- 오른쪽 패널 폭 360px, 판은 남은 공간에서 가장 큰 정사각형.
+- 카드 게임: 판 자리에 원형 테이블, 나는 항상 아래, 내 패는 판 아래쪽 넓게.
+- PC 조작: 마우스를 올리면 미리 보기 돌(반투명), 클릭 한 번에 착수(기본값). "두 번 눌러 확정"은 터치 기기의 기본값이고 설정에서 바꿀 수 있다.
+- 단축키: `Enter` 채팅 입력, `Esc` 창 닫기, 방향키+`Enter` 판 조작.
+
+### 3.6 관리자 (PC)
+왼쪽 사이드바(220px)에 메뉴, 오른쪽에 내용. 표는 PC에서 표 형태, 좁은 화면에서는 카드 목록.
 
 ## 4. 공통 컴포넌트
 | 컴포넌트 | 동작 |