폴센트는 쿠팡 관심상품의 가격을 추적해 **역대급최저가**일 때 알려주는 iOS 앱이다. 이 시스템은 2026-09-30 기준 앱 화면 55장(`assets/Screens/`)에서 색·타입·간격·컴포넌트를 그대로 추출한 것으로, 개선 시안이 기존 앱과 같은 옷을 입도록 만드는 데 쓴다. 코드가 아니라 스크린샷에서 읽었으므로 색은 픽셀값 그대로, 크기는 3x 기준 추정값이다 — 숫자가 1~2px 어긋나면 화면을 따른다.

## 콘텐츠 원칙

- **해요체, 한 문장.** "알려드려요", "없어요", "켜두세요". 설정 설명은 "~할 수 있어요"로 끝낸다. 제휴(B2B) 랜딩만 "~합니다"체.
- **숫자가 주인공.** 가격은 항상 원 단위 콤마(11,960원), 만 단위 범위는 "146만~169만원", 변동은 퍼센트(▼ 8%)와 차액(-1,199)을 함께. 날짜는 "목요일 오전 2:30", "9월 21일 오전 7:50".
- **강조는 색 한 단어.** 문장 안에서 한 단어만 `blue-500`(**오늘** 사면 좋은 상품, 가격이 **오른** 상품) 또는 `red-400`(아직 **역대급최저가**예요, 가격이 **하락**한 상품)으로.
- **이모지는 기능 아이콘으로 쓴다.** 설정 행 앞(🔔 알림 설정, 🌿 로켓프레시), 섹션 제목 앞(🚨 긴급 초특급 핫딜, 🔥 지금이 타이밍), 배송 라벨 앞(🚀). 장식으로 흩뿌리지 않고, 한 요소에 하나.
- 버튼 라벨은 동사형: "구매하러 가기", "지금 계정 연동하기", "제휴 문의 남기기", "완료", "확인".

## 색

- **`blue-500` #0084ff가 브랜드다.** 스플래시, 모든 Primary 버튼, 토글 on, 링크(최저가 ›, 더보기 ›), 1위 표시. 흰 글자와 3.3:1이므로 큰 볼드 라벨에만 흰 글자를 올리고, 작은 글자가 필요하면 `blue-600`.
- 관심상품 홈·상품상세·가격비교 등 구버전 화면에는 `blue-400` #3982f7이 남아 있다(전체 17 칩, 벨 버튼, 구매하러 가기). **개선 시안은 `blue-500`으로 통일**하고 `blue-400`은 기존 화면을 재현할 때만.
- 틴트는 `blue-100` #e3f2ff(안 읽은 알림, 안내 카드, 구매타이밍·진행중 뱃지)와 `blue-50` #e6f1fe(+ 칩, 재입고 칩).
- **빨강 = 가격 하락·역대급최저가, 초록 = 가격 상승.** `red-500` #e46f6a(퍼센트, 상세 뱃지, 최저 뱃지), `red-400` #f56666(썸네일 뱃지, 안내 배너 강조), `green-500` #14af40(상승). 이 외의 의미로 빨강·초록을 쓰지 않는다. 파괴적 액션(계정 탈퇴)만 `red-600`.
- 배송 라벨 색은 고정: 로켓배송 `blue-400`, 로켓프레시 `green-700`, 판매자로켓 `orange-500`, 판매자배송 `ink-800`.
- 중립: 글자 `ink` #212529 / `ink-900`(가격·헤더) / `ink-700`(설명) / `ink-500`(보조·취소선) / `ink-400`(플레이스홀더·품절). 면: `surface` → `gray-100` #f8f9fa(페이지 바탕) → `gray-200` #f2f4f7(노트·칩·검색창) → `gray-300` #e9ecef(선·트랙). 어두운 면은 `ink` 하나(다크 칩·다크 카드·툴팁), 토스트만 `ink-900`.
- `kakao`는 카카오 로그인 버튼에만, `yellow-400/500`은 왕관·열쇠·벨 일러스트에만.
- 대비 메모: `ink-500` 본문(3.5:1), `orange-500` 12px(3.2:1), `blue-500` 위 흰 글자(3.3:1)는 WCAG AA 미달인 채 앱에 쓰이고 있다. 토큰은 원본 그대로 두었고, 개선안에서는 각각 `ink-700`, `orange-600` 또는 13px 700, `blue-600`으로 올리기를 권장한다.

## 타입

- 서체는 **Pretendard**(`fonts/`에 400·500·600·700). 앱은 iOS 시스템 한글(Apple SD Gothic Neo)로 보이며 Pretendard가 가장 가까운 자유 서체다. 폴백 스택은 `sans`.
- 스케일: `display` 28/700(상세 현재가) · `title-1` 24/700(랜딩 헤드라인) · `title-2` 20/700(앱바 타이틀, 다이얼로그 제목) · `title-3` 18/600(섹션 제목, 카드 제목) · `body-1` 16/500(설정 행, 상품명 상세) · `body-2` 15/400(본문) · `body-3` 14/400(카드 상품명, 노트) · `label` 14/600(버튼 sm/md, 칩, 탭) · `label-lg` 16/600(풀폭 CTA) · `price` 16/700 · `price-lg` 18/700 · `caption-1` 13/400 · `caption-2` 12/600(배송 라벨, 뱃지) · `micro` 11/500(탭바).
- 상품명은 2줄 말줄임, 설명은 3줄까지. 큰 숫자는 자간 -0.02em.

## 간격·모서리

- 화면 좌우는 **`gutter` 20px**, 예외 없음. 칩·카드 가로 스크롤은 20px에서 시작해 화면 끝으로 bleed.
- 요소 사이 `space-2` 8(칩·그리드) → `space-3` 12(카드 사이, 썸네일-본문) → `space-4` 16(카드 패딩) → `space-6` 24(섹션 사이). 구분선 대신 여백과 `gray-100` 띠로 섹션을 나눈다.
- 컨트롤 높이: 풀폭 CTA·입력 48(`control-h`), 칩·세그먼트 36~44(`control-h-sm`), 앱바 56, 탭바 84.
- 모서리: 뱃지·수량 `radius-xs` 4 → 썸네일 뱃지·알림 썸네일 `radius-sm` 8 → 썸네일·입력·노트·버튼 `radius-md` 12 → 카드·다이얼로그·시트 `radius-lg` 16 → 검색창 `radius-xl` 20 → 칩·토글·토스트·FAB·pill 버튼 `radius-pill`.
- 그림자는 거의 없다. 카드는 `gray-100` 바탕 대비로만 구분하고, `shadow-segment`(세그먼트 선택 탭)·`shadow-fab`·`shadow-sheet`만 쓴다.

## 레이아웃 패턴

- **상품 그리드 3열**(110px, 간격 8)이 기본, 핫딜 큰 카드는 2열(170px). 그리드 위에는 정렬(최신순 ⌄) + 필터·편집·보기 전환 아이콘 행.
- **설정형 화면**은 `ListRow` 나열 + 행 아래 `NoteBox`(gray) + 섹션 라벨.
- **혜택·알림 요약**은 `gray-100` 바탕 위 `Card` 스택, 카드 사이 12px.
- **상품상세**: 앱바(뒤로·홈 | 알림·공유·삭제·별) → 썸네일+상품명 → `Price` display → 뱃지 행 → 인증·배송 행 → `gray-50` 띠 → 가격 그래프 → 연관 가격비교 → 추가 알림 설정 → 하단 고정 바(알림 켜기 아이콘 + `Button` primary 구매하러 가기).
- 하단 고정 CTA는 좌우 20px, 높이 48~52, 아래 홈 인디케이터 여백.

## 아이콘

두 체계가 섞여 있고 둘 다 유지한다. **라인 아이콘**(1.5px, 24px): 앱바·탭바·동작(필터·편집·공유·삭제·별·벨·검색·뒤로). 탭바 활성은 같은 아이콘의 채움형. **컬러 이모지**(20~24px): 설정·알림 설정 행의 앞 아이콘, 섹션 제목, 배송 라벨. 아이콘 파일은 추출하지 못했으므로 `components/`의 프리뷰는 같은 형태의 인라인 SVG로 대체했다 — 실제 구현은 SF Symbols 계열(iOS)을 쓴다.

## 상태·피드백

- 즉시 저장: 토글은 저장 버튼 없이 바로 반영. 결과는 `Toast`(다크 pill, 3초).
- 빈 목록은 `EmptyState`(벨 아이콘 + 한 줄), 유도가 필요하면 `NoteBox` blue.
- 선택지는 `BottomSheet`, 안내는 `Dialog`(확인 하나), 설득은 `Dialog` 유도형(일러스트 + Primary).
- 안 읽음은 배경 `blue-100`, 품절은 썸네일 35% 스크림 + "품절".
- 로딩·오류 상태는 화면에서 관찰되지 않아 정의하지 않았다.

## 컴포넌트 쓰는 법

`components/bundle.css`의 `fc-` 클래스가 전부이고 JS 번들은 없다 — 프리뷰 HTML을 그대로 복사해 쓰면 된다. 루트에 `class="fc"`를 두고 `tokens.css`를 먼저 불러온다. 390px 폭(iPhone 15 기준)으로 설계되었다.

## 개선 시안을 만들 때

- 참고 화면은 `assets/Screens/`에 번호순으로 있다(01 스플래시 … 56 마케팅 푸시). 어떤 화면을 고치든 해당 번호를 옆에 두고 작업한다.
- 바꿔도 되는 것: 정보 구조, 흐름, 카피, 대비 미달 색의 승격(`blue-400`→`blue-500`, `ink-500`→`ink-700`).
- 지켜야 하는 것: 20px gutter, 빨강=하락/초록=상승, 배송 라벨 색, 탭바 5개, Primary 버튼 한 화면에 하나, 둥근 pill 칩과 16px 카드.