fix #488: improve mobile responsive layout

docs/design/488-ux-mobile-responsive/README.md

@@ -0,0 +1,43 @@
+# Redmine #488 - 모바일 VPD/권한 화면 반응형 개선 설계
+
+## 프로젝트 개요
+
+VPD Backoffice는 Oracle Database VPD/ORDS 기능을 백오피스 권한 테이블로 제어하기 위한 Spring Boot 관리 도구다. 사용자는 사용자, 그룹, 역할, TABLE/VIEW 권한, VPD policy/filter, Bearer Token, ORDS 검증, MCP Reasoning을 한 화면 흐름에서 운영한다.
+
+## 목표
+
+390px 모바일 viewport에서 `VPD 설정`과 `권한 관리` 화면이 가로로 밀리지 않고, 아키텍처 설명 카드와 테이블/폼이 읽을 수 있는 형태로 표시되게 한다.
+
+## 문제
+
+캡처 기준:
+
+- `/tmp/vpd-ux-audit/screenshots/mobile-vpd-policies.png`
+- `/tmp/vpd-ux-audit/screenshots/mobile-permissions.png`
+
+확인된 문제:
+
+- `architecture-strip` 모바일 override가 기본 grid 선언보다 앞에 있어 390px에서도 5열 grid가 유지된다.
+- 일부 grid/table item이 `min-width:auto`로 계산되어 `.table-responsive` 바깥의 body 폭을 밀어낸다.
+- 행 규칙 grid가 모바일에서도 4열을 유지해 입력 컨트롤이 좁아진다.
+
+## 설계
+
+- 공통 CSS에서 architecture strip의 모바일 override를 실제 선언 뒤쪽에 다시 배치한다.
+- card, form, table wrapper에 `min-width: 0`을 부여해 내부 overflow가 body 폭을 밀지 않게 한다.
+- 모바일에서 큰 table은 body가 아니라 wrapper 내부에서만 horizontal scroll 되게 한다.
+- 모바일에서 `form-grid`, `rule-row`, `section-heading`은 1열 또는 wrap 형태로 전환한다.
+
+## 완료 기준
+
+- 390px viewport에서 `document.documentElement.scrollWidth <= window.innerWidth`가 성립한다.
+- `VPD 설정`, `권한 관리` 모바일 캡처에서 architecture strip이 1열로 표시된다.
+- 테이블은 화면 밖으로 body를 밀지 않고 wrapper 내부에서 스크롤된다.
+- 1440px 데스크톱 화면의 정보 밀도는 유지된다.
+
+## 검증
+
+- `mvn test`
+- Playwright 캡처 또는 DOM 검사:
+  - `/vpd-policies`
+  - `/permissions`