# 되는것만 — 앱 화면

폰 두 대가 나란히 놓여 있습니다. **왼쪽에서 답하면 오른쪽 판정이 실시간으로 바뀝니다.**

```
xdg-open index.html          # 또는 standalone.html 한 파일만 옮겨도 동작
node build.js                # 원본 수정 후 standalone.html 재생성
```

---

## 웹 버전(`../policy-match-mockup`)과 무엇이 다른가

폼팩터가 바뀌면 디자인 논리도 바뀝니다. 반응형으로 줄인 게 아니라 다시 설계했습니다.

사장님은 손님 없는 오후 3시에 카운터 뒤에서 **한 손으로** 봅니다.

| | 웹 | 앱 |
|---|---|---|
| 눈금 140개 | 감싸는 격자 | **한 곳에 상주하는 빗살 70×2** — 연료계처럼 오른쪽 아래부터 꺼짐 |
| 선택지 | 본문 흐름 안 | **엄지 구역(하단 40%)에 고정** — 위는 보는 곳, 아래는 만지는 곳 |
| 제외 132개 | 페이지 하단 섹션 | **바텀시트** — 수면 아래에 있고 손잡이만 나와 있음 |
| 질문 | 스크롤해서 답함 | **질문 하나가 화면 하나** |
| 결과 | 별도 탭 | **옆 폰에서 실시간 갱신** |

숫자가 떨어지는 자리를 엄지에서 멀리 뒀습니다. 손가락은 쉬고 눈만 따라갑니다.

---

## 설계 결정

**빗살을 그리드로 짠 이유.** flex로 140개를 한 줄에 넣으면 폰 폭에서 개당 1.38px입니다.
서브픽셀이라 브라우저마다 뭉갭니다. `repeat(70, 1fr)` 2줄로 바꿔 2.77px을 확보했습니다.
정책 하나당 빗살 하나라는 대응은 그대로입니다.

**확정은 다 물어본 뒤에만 나옵니다.** 판정 중에는 제외 시트만 차오르고 확정 카드는
비어 있습니다. 요건을 다 확인하기 전에 "확정"이라고 쓰면 그게 이 제품이 고치려던
바로 그 문제(토스의 140개)가 됩니다.

**"모르겠어요"는 차감하지 않습니다.** 조건부로 넘어갑니다. 모르는 걸 추측해서 거르지
않는 것이 신뢰 조건입니다.

**시트 손잡이 높이는 JS로 실측합니다.** 폰트가 늦게 로드되면 높이가 바뀌어서
`--peek`을 공통 조상에 얹고 `fonts.ready` 뒤 한 번 더 잽니다. CTA 위치도 이 값을 따라갑니다.

---

## 팔레트 · 타이포

| 토큰 | 값 | 역할 |
|---|---|---|
| `--ink` | `#0B1020` | 앱 바탕 (OLED) |
| `--phosphor` | `#FFB13D` | 카운터 · 빗살 · 주요 행동 |
| `--paper` | `#F0EADC` | 확정 카드 **에만**. 화면에서 유일한 밝은 면 |
| `--seal-deep` | `#A82D14` | 직인 |
| `--cond` | `#86B6DB` | 조건부 |

- `IBM Plex Sans KR` — 인터페이스
- `IBM Plex Mono` — 카운터 · 금액 · 조문 (tabular)
- `Nanum Myeongjo` — **확정 카드와 직인에만.** 도구는 고딕, 결과는 명조

## 품질 기준

- 460px 이하에서는 프레임을 벗고 전체화면 앱이 됩니다
- 터치 타깃 최소 56px, 키보드 포커스 링, `aria-expanded`
- `prefers-reduced-motion` 존중
- 본문 대비비 4.5:1 이상 — 종이 위/잉크 위 붉은색을 `--seal-deep`/`--seal-lit`로 분리한 이유

---

## 데이터

정책명·금액·조문은 **실제 사업을 참고한 예시**이며 검증된 값이 아닙니다.
`app.js` 상단 `QUESTIONS` / `PAPERS` / `CONDS` / `REASONS` 만 고치면 전부 바뀝니다.

질문은 정보이득 내림차순입니다: **41 → 38 → 19 → 16 → 13 → 5** (합 132).
제외 사유 히스토그램은 하드코딩이 아니라 실제 답변에서 집계하므로 합계가 항상 맞습니다.