# 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`