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

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

docs/00-overview.md

@@ -20,7 +20,7 @@
 - 인원: 각 게임의 원래 최소/최대 인원을 그대로 따른다.
 - 계정: 디스코드 로그인 또는 닉네임만 정하는 게스트. 디스코드 로그인 사용자도 닉네임을 바꿀 수 있다.
 - 방: 6자리 숫자 코드, 초대 링크, 코드/링크 복사, QR, 모바일 공유 시트, 빠른 시작, 관전, 재접속.
-- 기기: 모바일(세로) 우선, 태블릿·PC 모두 지원. 최신 Chrome/Safari/Edge/Samsung Internet.
+- 기기: **PC 우선**(사용자 결정, 2026-10-04). 태블릿·휴대폰도 같은 화면을 접어서 지원. 최신 Chrome/Edge/Safari/Firefox/Samsung Internet.
 
 ## 5. 범위 밖 (Non-goals)
 - 실제 돈, 유료 재화, 환전, 사이트 전체에서 유지되는 칩/포인트. 포커·섯다·고스톱의 칩/점수는 **그 방 안에서만** 쓰이고 방이 끝나면 사라진다(법적 위험 회피, `04-stability-security.md` 6절).

docs/06-lobby-rooms.md

@@ -29,7 +29,7 @@
 3. 대기실에서 방장이 바꿀 수 있는 것: 게임 모드/옵션(시간 제한 포함 — 게임마다 다름), 최대 인원(게임의 최소~최대 범위 안), 공개/비공개, 관전 허용, 채팅 허용.
 4. 옵션은 "기본 설정" 몇 개만 보이고 나머지는 "자세한 설정" 접기 안에 둔다.
 
-## 5. 대기실 화면 (위에서 아래 순서, 모바일 세로 기준)
+## 5. 대기실 화면 (PC는 두 칸 배치 — `07-ui-ux.md` 3.4. 아래는 내용 순서이며 좁은 화면에서는 이 순서로 한 칸에 쌓인다)
 1. **초대 카드**(가장 눈에 띄게): 큰 글씨 코드 `123 456`
    - [코드 복사] [링크 복사] [공유하기](모바일: 공유 시트 → 카카오톡 등) [QR 보기](같은 공간의 가족이 폰으로 찍어서 입장)
    - 복사하면 버튼이 1.5초간 "복사했어요 ✓"로 바뀜 + 진동(지원 기기).

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): 뒤로, 게임·코드, 메뉴
+│ ● 같이 놀자 보드게임    홈   게임 목록   [코드 6자리 입력칸][참여]      👤 닉네임 ▾ │ 64px
-│ 내 차례예요 (●흑)  ◔ 23초  │  ← 상태 줄: 지금 할 일 + 타이머
+└──────────────────────────────────────────────────────────────────────────┘
-├──────────────────────────┤
-│  상대 정보 (이름, 시간)      │
-│                          │
-│        게임 보드           │  ← 화면 폭에 맞춰 정사각형
-│                          │
-│  내 정보 / 내 손패         │
-├──────────────────────────┤
-│ [주요 행동 버튼들]          │  ← 하단 고정, 엄지 영역
-│ 💬 채팅  😊 반응            │
-└──────────────────────────┘
 ```
-- 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. 공통 컴포넌트
 | 컴포넌트 | 동작 |

docs/10-testing.md

@@ -13,9 +13,9 @@
 | 정보 유출 | 같은 도구 | 숨김 정보 게임 | 매 커밋 |
 | 서버 통합 | `bun test` + 실제 WS 클라이언트 | 인증, 방 만들기/입장, 행동, 재접속, 강퇴, 한 판 더 | 매 커밋 |
 | 복구 | 통합 테스트 | 서버 인스턴스 종료 → 같은 DB로 재시작 → 상태 동일 | 매 커밋 |
-| E2E | Playwright(크로미움 + 모바일 뷰포트) | 게스트 시작 → 방 만들기 → 링크로 두 번째 사용자 입장 → 오목 한 판 끝까지 | 마일스톤마다 |
+| E2E | Playwright(크로미움, PC 1440×900 기준 + 모바일 뷰포트 1개) | 게스트 시작 → 방 만들기 → 링크로 두 번째 사용자 입장 → 오목 한 판 끝까지 | 마일스톤마다 |
 | 접근성 | axe-core(Playwright) | 주요 화면 | 마일스톤마다 |
-| 성능 | Lighthouse(모바일) | 홈, 방 | 마일스톤마다, 예산 위반 시 실패 |
+| 성능 | Lighthouse(데스크톱 + 모바일) | 홈, 방 | 마일스톤마다, 예산 위반 시 실패 |
 | 부하 | 자체 Bun 스크립트(가짜 클라이언트) | 동시 2,000 연결, 방 500개, 각 방 2초마다 행동 | 마일스톤 M2, M5, 출시 전 |
 | 장애 주입 | 스크립트 | 게임 중 서버 강제 종료(SIGKILL), 네트워크 끊김, 느린 클라이언트 | 마일스톤 M2, 출시 전 |
 

docs/13-decisions.md

@@ -6,6 +6,7 @@
 - 도메인: **game.tkrmagid.kr** 고정. 모든 기능을 완성한 뒤 연결한다.
 - 상표명: 친구끼리 쓰는 사이트라 **원래 이름을 그대로 사용**한다.
 - 관리자 사이트 추가. 슈퍼어드민은 디스코드 ID `293719842274541579`, 어드민은 디스코드 ID로 추가(`14-admin.md`).
+- 화면은 **PC 버전 중심**으로 만든다(휴대폰은 접어서 지원).
 - 게임 규칙 기본값은 관리자 사이트에서 모두 바꿀 수 있으므로, 3절의 기본안은 "처음 값"이다.
 
 ## 1. 운영 (진행에 꼭 필요)

docs/games/_TEMPLATE.md

@@ -34,7 +34,7 @@
 ### 8.6 종료 조건과 결과(GameResult)
 
 ## 9. UI/UX
-- 화면 배치(모바일 세로 / PC), 조작 방법, 합법 수 하이라이트, 애니메이션, 초보자 도움말
+- 화면 배치(PC 기준 — 판 + 오른쪽 패널, 좁은 화면 접힘), 조작 방법, 합법 수 하이라이트, 애니메이션, 초보자 도움말
 
 ## 10. 테스트 체크리스트
 - [ ] 구체적인 시나리오