Risograph Print

# Risograph Print — web 디자인 팩

## 이 스타일의 정체성
리소그래프(등사 인쇄)의 미감을 웹으로 옮긴 스타일이다. 2~3색 스폿 컬러의 의도적 오프셋(misregistration), 거친 망점·그레인 텍스처, 형광 핑크·블루 잉크 톤. 종이빛 배경에 인쇄물의 불완전함을 절차적으로 재현한다. 무엇을 보면 이 스타일임을 아는가 — 색 레이어가 1~4px 어긋나 인쇄 정합 오류처럼 보이고, 모든 색 면에 거친 망점/그레인이 깔리며, 잉크가 살짝 비치듯 `multiply` 합성된다.

## 색
- 배경: `#f3eee2` (재생 종이 톤).
- 스폿 잉크 3색(리소 잉크 시뮬레이션, `mix-blend-mode: multiply`로 쌓음):
  - 잉크 1 형광 핑크: `#ff4d8d`
  - 잉크 2 코발트 블루: `#2647e0`
  - 잉크 3 머스터드 옐로: `#f2b417`
- 텍스트: `#1a1814` (잉크 블랙 — 종이 위 직접). 핑크/블루 면 위 텍스트는 종이색 `#f3eee2`.
- 색 운용: 한 화면에 잉크 2~3색만. 잉크끼리 겹치는 영역은 `multiply`로 제3의 색이 생김(핑크+블루 = 보랏빛 — 이건 의도된 인쇄 중첩이므로 허용).

## 질감 / 인쇄 효과 명세 (절차적, 수치 강제)
- **Misregistration 오프셋:** 색 레이어를 의도적으로 어긋나게 — 각 스폿 색 요소를 `transform: translate(2px, -3px)` 식으로 옮긴 복제 레이어를 깔거나, 텍스트에 `text-shadow: 2px 2px 0 #2647e0, -1px -1px 0 #ff4d8d` 식 채널 분리. 오프셋 범위 `1~4px`.
- **망점(halftone):** 색 면에 SVG/CSS `radial-gradient` 도트 패턴 또는 PNG 망점을 `mix-blend-mode: multiply`, 도트 간격 `4~6px`로 깐다. 면적이 큰 색 블록은 망점 그라데이션으로 톤 표현.
- **그레인 텍스처:** 전체 페이지에 `feTurbulence` 노이즈 `opacity: 0.12`, `mix-blend-mode: multiply`, 타일 `200px`. 노이즈가 인쇄지 거칠기를 만든다.
- **잉크 불균일:** 색 면 가장자리를 살짝 흐리거나(`filter: blur(0.3px)`) 불투명도를 `0.92`로 — 잉크가 종이에 고르지 않게 먹은 느낌.

## 타이포그래피
- 디스플레이: `Archivo Black`(Google Fonts) 또는 `Anton`, 대체 `sans-serif`. 헤드라인 `clamp(2.4rem, 6vw, 4.6rem)`, weight 900, `letter-spacing: -0.02em`, line-height 1.05. 헤드라인에 채널 분리 오프셋(text-shadow 2색) 적용.
- 라벨: `Archivo`(Google Fonts) `0.78rem`, weight 700, 대문자, `letter-spacing: 0.08em`.
- 본문: `Archivo` `1.05rem`, weight 400, line-height 1.6, 측정 60~70자.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1140px. 좌우 패딩 모바일 20px / 데스크탑 44px.
- 브레이크포인트: 640px, 1024px.
- `block-grid` — 색 블록의 모자이크. 12열 그리드, 거터 24px. 블록은 잉크색 면 또는 종이색 면.
- 섹션 수직 리듬: 섹션 간 `clamp(72px, 9vw, 120px)`(balanced).

## 형태 / 질감
- 모서리: radius `2px`(거의 직각 — 인쇄물 재단선 느낌).
- 보더: 색 블록은 보더 없음(망점·오프셋으로 구분). 필요 시 `2px solid #1a1814`.
- 그림자: blur 그림자 금지. 깊이는 misregistration 오프셋 레이어로(어긋난 색 그림자).
- 버튼: 잉크색 솔리드 면 + 망점 + 종이색 텍스트, 호버 시 오프셋 레이어가 더 어긋남.
- 이미지: `grayscale(1)` 후 단일 잉크색 `multiply` 듀오톤 처리, 망점 오버레이.

## 모션
- 전환: `snappy` — `140ms steps(2)` 또는 `cubic-bezier(0.2, 0, 0, 1)`. 인쇄물의 즉각적 톤 — 부드럽지 않게.
- 호버: 요소의 오프셋 레이어가 `1px → 5px`로 더 어긋남(채널 분리 강조). 버튼 잉크색 스왑.
- 스크롤 진입: 색 레이어가 각기 다른 방향에서 `translate`로 모여 정합(misregistration이 맞춰지듯), 180ms.
- 패럴랙스·페이드 금지 — 모션은 짧고 또렷하게.

## 하지 말 것
- 보라 그라디언트 금지. 부드러운 그라디언트 배경 금지 — 톤은 망점으로만.
- 망점·그레인·misregistration 생략 금지 — 셋 다 없으면 이 팩이 아니다(그레인 opacity 0.12 필수).
- soft blur 박스 섀도 금지. 깊이는 어긋난 색 레이어로.
- 매끈한 깔끔한 면 금지 — 모든 색 면에 텍스처.
- 잉크 색을 4색 이상 동시 사용 금지(한 화면 2~3색).
- 둥근 모서리(radius > 4px) 금지.
- 이모지·반들거리는 3D·글래스 금지.

## 적용 예
- **히어로:** 종이색 배경 + 그레인. 형광 핑크 망점 블록 위에 채널 분리(핑크+블루 text-shadow) 초대형 헤드라인. 코발트 잉크 도형 하나가 핑크 블록과 겹쳐 `multiply`로 보랏빛 중첩.
- **카드:** 잉크색 솔리드 면(망점 톤) 블록 모자이크, 보더 없음. 각 블록은 종이색 텍스트, 모서리에 작은 재단선 마크. 호버 시 오프셋 레이어 5px로 어긋남.
- **푸터:** 코발트 블루 `#2647e0` 면 + 망점, 종이색 텍스트. 상단에 misregistration 된 핑크 1px 라인. 대문자 Archivo 메뉴.