이리데센트 누아르 프레스티지

# 이리데센트 누아르 프레스티지 — web 디자인 팩

## 이 스타일의 정체성
딥 잉크 블랙 위에 홀로그래픽 메탈릭이 가장자리에만 스미는 프레스티지 다크 미감이다. 면 전체를 그라디언트로 칠하지 않는다 — 텍스트 가장자리와 헤어라인 보더에만 실버·바이올렛-시안 이리데센트가 절제되어, 표면이 빛의 각도에 따라 색을 바꾸는 메탈릭 셰이딩처럼 보인다. 무엇을 보면 이 스타일임을 아는가 — (1) 배경 대부분이 균질한 잉크 블랙이고 이리데센트는 1px 보더·텍스트 윤곽·아주 가는 하이라이트에만 나타나며, (2) 가는 그로테스크 디스플레이 헤딩과 등폭 영향의 작은 라벨이 혼합되고, (3) 비대칭 배치 — 콘텐츠가 중앙축에서 벗어나 한쪽으로 무게가 쏠린다. 반투명 유리가 아니라 빛에 반응하는 금속 표면.

## 색
- 배경: `#08080a` (딥 잉크 블랙). 전 페이지 균질.
- 표면(섹션 미세 구분): `#0e0e12`. blur 패널 금지 — 솔리드 다크.
- 텍스트: 헤딩·본문 `#eceaf0` (쿨 오프화이트). 보조 메타: `#85838f`.
- 이리데센트(강조): 다중 정지점 그라디언트 — `#c9c9d4`(실버) → `#9b7fe8`(바이올렛) → `#5fd4e0`(시안). 헤어라인 보더·텍스트 가장자리(`background-clip: text` 또는 미세 stroke 효과)·아주 가는 하이라이트 라인에만 적용. 면적으로 칠하는 면적은 1% 이하.
- 본문 대비: `#eceaf0` on `#08080a` ≈ 17:1 (WCAG AAA). 이리데센트는 본문 텍스트에 쓰지 않는다 — 디스플레이 헤딩·장식에만.

## 타이포그래피
- 디스플레이 그로테스크(헤딩): `Geist`(Google Fonts), weight 400~500, 대체 `'Inter Tight', 'Helvetica Neue', sans-serif`. 크기 `clamp(2.2rem, 5.5vw, 4.8rem)`, `letter-spacing: -0.022em`, line-height 1.04. 가늘고 타이트한 그로테스크.
- 본문: `Inter Tight`(Google Fonts) `1rem`, weight 400, line-height 1.62, 측정 60~70자.
- 라벨·메타(등폭 영향): `Geist Mono`(Google Fonts) `0.75rem`, weight 400, 대문자, `letter-spacing: 0.14em`, `font-variant-numeric: tabular-nums`. 등폭이 정밀함을 준다.
- 위계는 `mixed` — 가는 그로테스크 디스플레이(서사)와 등폭 모노 라벨(메타·번호)이 또렷이 분리.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: 1200px. 좌우 패딩 모바일 22px / 데스크탑 60px.
- 브레이크포인트: 720px, 1080px.
- `asymmetric` — 12열 그리드를 비대칭으로 쓴다. 히어로 헤딩은 좌측 7열에 치우치고 우측 4열은 비움 또는 작은 메타. 섹션마다 무게중심을 좌·우로 번갈아 둔다. 중앙 정렬 금지.
- 섹션 수직 리듬: 블록 간 `clamp(80px, 12vh, 160px)` (airy).
- 콘텐츠는 들쭉날쭉한 비대칭 — 모든 카드를 같은 폭으로 정렬하지 않는다.

## 형태 / 질감
- 모서리: radius `2px` — 거의 직각, 미세한 다듬음만. 둥근 카드 금지.
- 보더: `1px` 이리데센트 헤어라인 — `border-image`에 이리데센트 그라디언트, 또는 가는 그라디언트 라인을 보더처럼 배치. 솔리드 다크 보더는 `#1d1d24`.
- 그림자: 박스 섀도 금지. 깊이는 이리데센트 헤어라인과 미세 다크 톤 차(`#08080a`/`#0e0e12`)로만.
- 이리데센트 적용처: (a) 헤딩 텍스트의 가장자리/일부 글자, (b) 카드·섹션의 1px 보더, (c) 가는 하이라이트 라인 1~2개. 면으로 칠하지 않는다.
- 이미지: 직각에 가깝게(`2px`), 위에 미세한 이리데센트 1px 보더. 채도 약간 낮춰 다크 톤과 조화.

## 모션
- `motion: subtle` — 절제. 이리데센트가 표면을 따라 천천히 흐르는 것이 핵심 모션.
- 이리데센트 흐름: 헤어라인 보더·텍스트의 그라디언트 `background-position`이 스크롤 진행도 또는 호버에 따라 천천히 이동(`6000ms` 이상 linear, 또는 호버 시 `1800ms ease`). 색이 표면을 따라 흐르는 느낌.
- 진입: 요소가 `opacity 0→1` + `translateY(12px→0)`, `360ms ease-out`. 절제된 한 번만.
- 호버: 카드 보더의 이리데센트가 한 바퀴 흐르고, 카드는 `translateY(-2px)` 미세 상승 `200ms ease-out`.
- **reduced-motion 폴백 필수:** `prefers-reduced-motion: reduce`이면 이리데센트 흐름 애니메이션 정지(고정 그라디언트 각도) + 진입 트랜지션 제거 — 이리데센트는 정적 메탈릭 셰이딩으로 고정 표시. 정적 폴백을 적용 코드에 반드시 포함.

## 하지 말 것
- 면 전체 그라디언트 배경 금지 — 이리데센트는 보더·텍스트 가장자리·가는 라인에만, 면적 1% 이하.
- `backdrop-filter: blur`·반투명 유리 패널 금지 — 이건 글래스모피즘이 아니다. 표면은 솔리드 다크 메탈릭.
- 보라 단색 그라디언트 텍스트(흔한 AI 기본값) 금지 — 이리데센트는 실버·바이올렛·시안 다중 정지점이고 가장자리에만.
- 둥근 카드(radius 8px+)·박스 섀도·균일 soft shadow 금지.
- 중앙 정렬 히어로의 무조건 반복 금지 — 비대칭 무게중심.
- 본문 텍스트에 이리데센트 적용 금지 — 가독을 위해 본문은 쿨 오프화이트 솔리드.
- reduced-motion 폴백 없는 이리데센트 흐름 애니메이션 금지.
- 이모지·blob·정체불명 일러스트 금지.

## 적용 예
- **히어로:** 잉크 블랙 풀폭, 비대칭 — 좌측 7열에 가는 Geist 디스플레이 헤딩(일부 단어 가장자리에 이리데센트), 우측 4열에 작은 Geist Mono 메타 라벨 한 줄. 상하에 가는 이리데센트 하이라이트 라인 한 줄씩, 천천히 흐름.
- **카드 섹션:** 들쭉날쭉한 비대칭 배치의 카드들 — 각 카드는 솔리드 다크 면(`#0e0e12`) + 1px 이리데센트 헤어라인 보더(`2px` radius). 호버 시 보더 이리데센트가 한 바퀴 흐르고 카드 미세 상승. 카드 폭은 일부러 다르게.
- **푸터:** 잉크 블랙 유지, 색 반전 없음. 상단 1px 이리데센트 헤어라인. 좌측 가는 Geist 워드마크, 비대칭으로 우측에 Geist Mono 내비·메타. 하단 작은 모노 카피라이트.