Structure legacy-compatible frontend CSS

docs/architecture/game-frontend-spa-plan.md

@@ -158,5 +158,8 @@
 ## Open Questions
 
 - Public 상태 동향 범위는 캐싱된 지도, 중원 정세, 세력일람으로 제한한다. 장수일람은 실시간 제공하되 이름/NPC 여부/국가/기본 능력치만 노출한다. 그 외 장수 정보는 캐싱된 자료에 기반하며, 빈번한 접근 제한 우회를 막기 위해 캐싱 전략을 유지한다.
-- UI 스타일은 당분간 \"고전 게임\" 감성을 유지한다. 전체 이식이 완료된 뒤 현대화하며, 새 UI는 Tailwind 등 CSS 라이브러리를 적극 활용한다.
+- UI 스타일은 ref의 렌더링 계약을 유지한다. CSS 구조화는 공통 token과
+  검증된 shell 단위로 수행하되, ref의 computed DOM 치수·typography·texture·
+  interaction과 충돌하면 페이지별 ref 규칙을 우선한다. 새로운 디자인으로의
+  현대화는 이 이관의 기본 후속 단계로 간주하지 않는다.
 - 실시간 업데이트는 메인 화면에 한정한다. 대상: 지도, 명령 목록, 현재 도시 정보, 소속 국가 정보, 장수 스탯, 장수 동향, 개인 기록, 중원 정세, 메시지함. 메인 화면에는 \"실시간 동기화 켬/끔\" 토글이 필요하다.

docs/frontend-css-architecture.md

@@ -0,0 +1,61 @@
+# Game frontend CSS architecture
+
+The game frontend preserves the rendered contract of `ref/sam`; CSS reuse is
+not a reason to normalize a page's width, height, typography, texture, or
+interaction states. When reuse and the reference geometry conflict, the
+reference geometry wins.
+
+## Layers
+
+`app/game-frontend/src/assets/main.css` is the single global entry point. It
+loads the following layers:
+
+1. `styles/tokens.css`: exact shared font, color, and `/image/game` texture
+   values. These are value aliases only and must resolve to the same computed
+   value as the ref page.
+2. `styles/game-shell.css`: the flexible shell shared by the main dashboard,
+   public dashboard, and chief center. Only declarations proven identical
+   across those screens belong here.
+3. `styles/ref-shell.css`: fixed ref geometry, including the 1000px desktop /
+   500px mobile family used by the battle center. Its namespace stays separate
+   from the flexible shell so a generic responsive rule cannot override it.
+4. Scoped SFC styles: page-specific grids, fixed table dimensions, selectors,
+   and state styling. These remain closest to the DOM contract they implement.
+
+## Class naming
+
+- `.game-shell`, `.game-shell__header`, `.game-shell__actions`: flexible
+  application shell.
+- `.ref-shell`, `.ref-shell__topbar`, `.ref-shell__control`: measured legacy
+  shell and controls.
+- `.game-feedback--error`, `.ref-feedback--error`: feedback scoped to its
+  visual family.
+- Feature-specific classes stay namespaced by their feature or component.
+  Generic names such as `.title`, `.error`, `.ghost`, `.stack`, and
+  `.layout-grid` must not be promoted from a scoped SFC merely because the same
+  spelling appears elsewhere.
+
+Existing feature hooks may remain while a screen is migrated, but new shared
+presentation must be selected through one of the explicit shell namespaces.
+
+## Consolidation rule
+
+Before moving declarations out of an SFC:
+
+1. Compare every same-named selector's declarations and semantic role.
+2. Confirm the affected pages use the same layout family.
+3. Record desktop and mobile `getBoundingClientRect()` and
+   `getComputedStyle()` values before the move.
+4. Move only identical declarations; keep exceptions in the owning SFC.
+5. Re-run Chromium geometry plus hover, focus, active, and disabled states.
+
+The main page and chief center are the flexible-shell references. The battle
+center is the fixed ref-shell reference. If another page has a measured ref
+contract that differs from both, preserve that page's local contract rather
+than forcing it into either family.
+
+## Asset boundary
+
+The CSS variables contain `/image/game/*` URLs but do not import or copy image
+files. Caddy continues to own `/image/*`; Vite must not rewrite the image tree
+as application assets.