정밀 핀테크 라이트

# 정밀 핀테크 라이트 — web 디자인 팩

## 이 스타일의 정체성
오프화이트 캔버스 위에서, 페이지 상단 약 1/3을 가로로 가르는 부드러운 이리데센트 파스텔 밴드(크림→셔벗→라벤더→인디고)가 분위기 배경 역할을 한다. 그 위 본문은 잉크 네이비. 음수 자간의 가는 그로테스크 디스플레이체가 편집 밀도를 만들고, 숫자가 들어가는 캡션·표는 등폭 숫자(`font-variant-numeric: tabular-nums`)로 자릿수를 정렬해 금융다운 신뢰감을 낸다. 본문 그래픽은 제품 스크린샷과 코드 스니펫을 좌우로 나란히 놓는 2분할 셀이 반복된다. 한눈에 "정밀하게 정렬된 금융 제품 페이지"로 읽혀야 한다.

## 색
- 배경: `#f6f5f3` (오프화이트, 약간 웜)
- 표면(카드·코드 패널): `#ffffff`
- 본문 텍스트: `#1a2233` (잉크 네이비) / 보조 텍스트 `#5b6472`
- 보더: `#e4e2dd` (1px 헤어라인)
- 강조색 1개: `#4f46e5` (인디고) — 링크·CTA·활성 상태에만, 면적 5% 이하
- 이리데센트 밴드(상단 1/3 한정 배경 그라디언트): `linear-gradient(105deg, #fef6e4 0%, #fcd9c6 26%, #e6d6f5 58%, #cdd3f5 82%, #c3c9f0 100%)` — 채도 낮은 파스텔만, 어두운 보라·검정 섞지 않음. 밴드는 페이지 상단에서만 쓰고 본문 영역으로 끌고 내려오지 않는다.
- 그라디언트는 오직 이 상단 밴드 1곳에만. 텍스트·버튼·카드에는 절대 그라디언트 금지.

## 타이포그래피
- 디스플레이/헤딩: `Inter Tight, Pretendard, -apple-system, sans-serif` (Inter Tight = Google Fonts 공개)
- 본문: `Inter, Pretendard, sans-serif` (Google Fonts)
- 캡션/표/숫자: `IBM Plex Mono, ui-monospace, monospace` 또는 본문 폰트에 `font-variant-numeric: tabular-nums` 적용
- H1: `clamp(2.6rem, 5.5vw, 4.6rem)`, weight 500, letter-spacing `-0.035em`, line-height 1.04
- H2: `clamp(1.7rem, 3vw, 2.5rem)`, weight 500, letter-spacing `-0.025em`, line-height 1.12
- 본문: `1.0625rem`, weight 400, line-height 1.65, 측정 폭 64~72자
- 라벨/eyebrow: `0.8125rem`, weight 500, letter-spacing `0.08em`, 대문자
- 숫자 캡션: `0.875rem`, `tabular-nums`, 자릿수 정렬 — 통계·요율·가격에 필수
- 디스플레이 폰트는 가는 웨이트(500)를 고수한다. 700+ 굵은 헤드라인은 쓰지 않는다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1120px`, 좌우 패딩 `24px`, 12열 그리드
- 브레이크포인트: `<768px` 1열 스택 / `768–1024px` 2열 / `>1024px` 풀 12열
- 섹션 수직 간격 `112px`, 블록 간격 `32px` (balanced)
- 상단 밴드: 뷰포트 높이의 약 33%(`min-height: 38vh`)를 차지하는 배경 레이어. 헤더·히어로가 그 위에 올라탄다.
- 2분할 셀: 좌측 설명 텍스트 + 우측 제품 스크린샷 또는 코드 패널을 6:6 또는 7:5로 나란히. 셀마다 좌우를 번갈아 뒤집어 리듬을 만든다.

## 형태 / 질감
- radius: 카드·패널 `10px`, 버튼 `8px`, 코드 패널 `12px`
- 보더: `1px solid #e4e2dd` — 분리는 보더로, 그림자는 최소화
- 그림자: 카드에 `0 1px 2px rgba(26,34,51,0.05)` 한 단계만. 두껍거나 번지는 섀도 금지.
- 코드 패널: `#ffffff` 배경, `1px` 헤어라인 보더, 상단에 신호등 점 대신 `IBM Plex Mono` 파일명 라벨 한 줄.
- 제품 스크린샷: 1px 헤어라인 보더 + `10px` radius로 감싸고, 듀오톤 처리하지 않음 — 실제 UI처럼 선명하게.
- 아이콘: 1.5px stroke 라인 아이콘, 단색 `#1a2233`. 채워진 아이콘·이모지 금지.

## 모션
- subtle. 트랜지션 `200ms cubic-bezier(0.22,0.61,0.36,1)` (ease-out).
- 호버: 카드·링크는 보더 색이 `#e4e2dd → #4f46e5`로 전환, 카드는 `translateY(-2px)`만. 그림자 키우지 않음.
- 스크롤 진입: 섹션이 `opacity 0→1` + `translateY(12px→0)`, 220ms, 1회만.
- `prefers-reduced-motion: reduce` 시 모든 transform 제거, opacity 전환만 유지.

## 하지 말 것
- 상단 이리데센트 밴드 외에 그라디언트 금지. 보라/인디고 풀블리드 메시 배경 금지 — 밴드는 상단 1/3에 한정.
- 굵은(700+) 디스플레이 헤드라인 금지 — 디스플레이는 가는 500 웨이트 고정.
- 카드마다 같은 soft drop shadow 깔지 말 것. 분리는 1px 헤어라인 보더로.
- 둥근 알약 외 과한 라운드(20px+) 금지. 이모지·정체불명 일러스트·blob 도형 금지.
- 숫자 데이터를 가변폭 숫자로 두지 말 것 — 통계·요율은 반드시 `tabular-nums`.
- 강조 인디고를 넓은 면에 칠하지 말 것 — 링크·CTA·활성 상태에만, 면적 5% 이하.
- 중앙 정렬 히어로를 모든 섹션에 반복하지 말 것 — 2분할 셀의 좌우 교차가 본문 리듬.

## 적용 예
- **히어로**: 상단 이리데센트 밴드 위에 좌측 정렬 H1(weight 500, 음수 자간), 아래 한 줄 태그라인(보조 네이비), 인디고 CTA 알약 1개 + 텍스트 링크 1개. 우측에는 1px 보더로 감싼 제품 스크린샷을 살짝 밴드 아래로 걸쳐 앉힌다.
- **2분할 콘텐츠 셀**: 좌측 6열에 eyebrow 라벨 + H2 + 본문 + 숫자 캡션(tabular-nums), 우측 6열에 코드 패널 또는 스크린샷. 다음 셀은 좌우를 뒤집는다.
- **푸터**: 오프화이트 유지, 상단 1px 헤어라인 분할. 등폭 폰트로 링크 그룹을 3~4열 정렬, 하단에 작은 회사 정보. 색 반전하지 않는다.