# 되는것만 — 소상공인 정책자금 판정 목업

`index.html`을 브라우저에서 열면 됩니다. 빌드 없음, 의존성 없음.

```
open index.html          # macOS
xdg-open index.html      # Linux
```

---

## 이 목업이 증명하려는 것

토스·카카오페이는 **필터링만 하고 판정을 안 합니다.** 그래서 140개가 나옵니다.
이 목업은 그 140개가 **어떤 순서로, 왜 3개가 되는지**를 실제로 동작시켜 보여줍니다.

설명하는 화면이 아니라 **줄어드는 걸 눈으로 보는** 화면입니다.

---

## 화면 1 · 질문 (정보이득 순)

질문은 임의 순서가 아니라 **남은 정책을 가장 크게 가르는 순서**로 나옵니다.

| # | 질문 | 갈리는 정책 |
|---|---|---|
| 1 | 사업용 차량 보유 | **41** |
| 2 | 업력 | 38 |
| 3 | 업종 | 19 |
| 4 | 상시근로자 수 | 16 |
| 5 | 수령 이력 | 13 |
| 6 | 연매출 | 5 |

차량을 제일 먼저 묻는 게 이상해 보이는 것이 핵심입니다. "왜 이 질문이 먼저인가요?"를
누르면 근거가 나옵니다 — **41개를 가르니까요.** 알고리즘의 판단을 사용자에게 그대로 보여줍니다.

### 설계 포인트

- **눈금 140개** — 정책 하나당 눈금 하나. 답하면 해당 개수가 실제로 꺼지고 떨어집니다.
  진행바가 차오르는 게 아니라 **덜어냅니다.** 이 제품은 덧셈이 아니라 뺄셈이니까요.
- **선택지마다 `−41` 표시** — 이 답을 고르면 몇 개가 빠지는지 미리 보여줍니다.
- **"이 질문 하나로 41개가 갈립니다"** — `걸러집니다`가 아니라 `갈립니다`입니다.
  질문이 해소하는 불확실성의 크기는 답과 무관하므로, 이 표현이 정확합니다.
  실제 차감량은 답한 뒤 영수증에 `−41`로 찍힙니다.
- **영수증(지나온 질문)** — 금전등록기 테이프 형식. 소상공인의 실제 사물 언어.
- **"모르겠어요"는 차감하지 않습니다** — 조건부로 넘어갑니다. 모르는 걸 추측해서
  거르지 않는다는 것이 이 제품의 신뢰 조건입니다.

---

## 화면 2 · 판정 (제외 사유 투명성)

```
확정   3     요건 전부 확인 · 종이 + 직인
조건부 5     딱 하나가 비어 있음 · 무엇이 비었는지 명시
제외  132    사유별 히스토그램 · 클릭하면 정책명 + 근거 조문
```

- **확정 3개만 종이가 됩니다.** 어두운 잉크 화면에서 실제로 손에 쥐는 종이 3장으로
  뒤집히고 붉은 직인이 찍힙니다. 소음 → 서류. 감정 곡선을 재질로 표현했습니다.
- **제외 132개를 숨기지 않습니다.** 사유별 막대(빗금 = 무효 처리)를 누르면
  실제 정책명과 근거 조문이 나옵니다. "임의로 감춘 게 아니라 규칙대로 뺐다"는 증거이자,
  좁게 줄인 것에 대한 방어선입니다.
- **히스토그램은 사용자의 실제 답변에서 집계됩니다.** 하드코딩이 아니라서
  합계가 제외 총계와 항상 일치합니다. (검증 완료 — 클램프 미발동)

---

## 디자인 결정

**팔레트 "장부와 직인"**

| 토큰 | 값 | 역할 |
|---|---|---|
| `--ink` | `#10162A` | 잉크 네이비 바탕 |
| `--phosphor` | `#F2A93B` | 금전등록기 앰버 — 카운터, 계산 중 |
| `--paper` | `#EDE7DA` | 확정 카드 **에만**. 유일한 밝은 면 |
| `--seal` | `#D9412A` | 직인. 확정 3개에만 |
| `--cond` | `#7FB0D4` | 조건부 — 미해결 |
| `--hatch` | `#46538A` | 제외 막대 빗금 |

**타이포 — 역할별 3종**

- `IBM Plex Sans KR` — 인터페이스 (당신의 도구)
- `IBM Plex Mono` — 카운터·영수증 (tabular numerals)
- `Nanum Myeongjo` — **확정 카드와 직인에만**. 관공서 문서의 서체로 결론을 씁니다.
  도구는 고딕, 결과는 명조.

**품질 기준**

- 모바일 대응 (눈금·카운터 clamp 스케일)
- 키보드 포커스 링, skip link, `aria-expanded`
- `prefers-reduced-motion` 존중 (트윈·스태거·스크롤 전부 정지)
- 모든 본문 텍스트 대비비 4.5:1 이상 — 종이 위 muted 톤과 잉크 위 seal 색을
  각각 `--paper-mute` / `--seal-lit`로 분리한 이유

---

## 데이터에 대한 주의

정책명·금액·조문 인용은 **실제 사업을 참고해 만든 그럴듯한 예시**이며 사실 검증된 값이
아닙니다. 실제 기획서나 데모에 쓰기 전에 소진공·지역신보·근로복지공단 공고 원문으로
반드시 대조하세요.

`app.js` 상단 `QUESTIONS` / `PAPERS` / `CONDS` / `REASONS` 만 고치면 내용이 전부 바뀝니다.