Memphis Postmodern

# Memphis Postmodern — web 디자인 팩

## 이 스타일의 정체성
1980년대 Memphis Milano(에토레 소트사스) 계보의 포스트모던 웹이다. 원색과 파스텔이 충돌하고, 지그재그·물방울·삼각형·반원이 화면 곳곳에 무작위처럼 흩뿌려진다. 테라초(돌가루) 질감 패턴, 검정 가는 그리드 선, 의도적 키치. 무엇을 보면 이 스타일임을 아는가 — 장식 도형이 콘텐츠와 무관하게 배경을 떠다니고, 색 조합이 일부러 "잘못된" 듯 명랑하게 부딪힌다.

## 색
- 배경: `#fbf6e9` (크림). 섹션 교차로 `#f5d0e0`(베이비핑크), `#cfe8f0`(파우더블루) 패널.
- 텍스트: `#1c1c1c` (검정 본문·헤드라인).
- 강조색 5개(모두 도형·CTA·강조 텍스트에 자유 사용): 체리 `#e8412c`, 옐로 `#f5c518`, 코발트 `#2b59c3`, 민트 `#3fbf9a`, 핫핑크 `#e85a9c`.
- 그리드 선: `#1c1c1c` 1px.
- 강조색 면적 제한 없음 — Memphis는 색의 과잉이 정체성. 단 한 섹션에 5색 전부를 동시에 쓰지는 않음(3~4색).

## 타이포그래피
- 디스플레이: `Poppins`(Google Fonts) weight 800, 대체 `sans-serif`. 헤드라인 `clamp(2.2rem, 6vw, 4.5rem)`, `letter-spacing: -0.01em`, line-height 1.05. 헤드라인 단어를 일부러 다른 색으로 칠하거나 `rotate(-3deg)`로 기울임.
- 보조 디스플레이: `Space Mono`(Google Fonts) — 라벨·캡션·숫자. `0.8rem`, weight 700, 대문자.
- 본문: `Poppins` `1.05rem`, weight 400, line-height 1.6, 측정 60~70자.
- 위계는 폰트 2종 혼합(`mixed`)과 색·회전으로 만든다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1180px. 좌우 패딩 모바일 20px / 데스크탑 48px.
- 브레이크포인트: 640px, 1024px.
- 비대칭 배치: 콘텐츠 블록을 12열 그리드에서 일부러 어긋나게 — 한 블록은 1~7열, 다음 블록은 6~12열. 중앙 정렬 금지.
- 섹션 수직 리듬: 섹션 간 80px(dense). 장식 도형이 섹션 경계를 넘나들며 겹침.
- 배경 전면에 `#1c1c1c` 1px 그리드 패턴(40px 간격) 또는 테라초 도트 산포.

## 형태 / 질감
- 모서리: 콘텐츠 카드 radius `4px`(거의 직각), 장식 도형은 자유(원·반원).
- 보더: 카드 `2px solid #1c1c1c`.
- 그림자: 오프셋 하드 섀도 `5px 5px 0 #1c1c1c` — 흐림 0.
- 장식 도형: 절대 위치(`position:absolute`) SVG/CSS 도형 — 지그재그 라인, 속 빈 원, 색 채운 삼각형, 반원, 작은 도트 클러스터. 한 화면당 6~10개, 각기 다른 강조색, `rotate` 무작위(-20°~20°).
- 테라초: 배경에 5색 도트를 20~40px 간격 무작위 산포(저밀도).

## 모션
- 전환: `playful` — `220ms cubic-bezier(0.34, 1.56, 0.64, 1)` (오버슈트 바운스).
- 호버: 카드 `translate(-3px,-3px)` + 섀도 `8px 8px 0`, 도형은 `rotate` 15° 추가 회전.
- 스크롤 진입: 장식 도형이 `scale(0 → 1)` + `rotate` 회전하며 통통 등장, stagger 80ms.
- 버튼 호버: 배경색이 강조색 간 즉시 스왑(예: 옐로 → 핫핑크).

## 하지 말 것
- 보라/인디고 그라디언트 금지 — 색은 항상 플랫 솔리드.
- soft shadow·blur 그림자 금지. 그림자는 흐림 0의 하드 오프셋만.
- 도형을 콘텐츠 위계에 정렬시키지 말 것 — 의도적으로 무작위·비대칭.
- 중앙 정렬 히어로 금지. 좌·우 어긋난 비대칭만.
- 차분한/세련된 무채 팔레트로 후퇴 금지 — 색이 과해야 정상.
- 이모지로 장식 도형을 대체하지 말 것. CSS/SVG 기하 도형만.
- 도형을 너무 적게(3개 미만) 쓰지 말 것 — 흩뿌림이 정체성.

## 적용 예
- **히어로:** 좌측 5열에 800 굵기 헤드라인(단어마다 다른 강조색·일부 rotate), 우측에 색 채운 반원+지그재그+속 빈 원 클러스터. 배경 1px 그리드.
- **카드:** 2px 검정 보더 + `5px 5px 0` 하드 섀도, 배경은 강조색 또는 크림. 카드 모서리 밖으로 작은 삼각형 하나가 삐져나옴. 호버 시 -3px 이동.
- **푸터:** 코발트 `#2b59c3` 패널로 색 반전, 크림 텍스트. 테라초 도트 산포, Space Mono 대문자 메뉴, 큰 반원 장식이 좌하단 모서리에 절반 걸침.