이머시브 미디어 그리드

# Immersive Media Grid — web 디자인 팩

## 이 스타일의 정체성
잉크 블랙 캔버스에 콘텐츠·아트워크 타일이 모듈러 미디어 그리드로 빽빽이 깔린 몰입형 콜라주다. 풀블리드 이미지가 그리드 셀을 가장자리까지 채우고, 큰 산세리프 디스플레이체와 활기찬 단일 강조 그린이 어둠 위에서 튄다. 호버하면 타일이 확대·재생되고 라벨이 슬라이드인하는 발랄한 마이크로모션이 살아 있다. 스크롤할수록 새 미디어 행이 끊김 없이 이어진다.

## 색
- 배경: 잉크 블랙 `#0b0b0c`. 카드 사이 갭이 이 검정으로 비쳐 타일이 떠 보인다.
- 타일 표면(이미지 없는 경우): `#161618`.
- 텍스트: 헤드라인·타일 라벨 `#f5f5f3`, 보조 메타 `#9a9a98`. 본문 대비 4.5:1 이상.
- 강조: 단 하나, 활기찬 시그널 그린 `#19e57d`. 1차 CTA·재생 아이콘·활성 태그·"NEW" 배지·호버 시 드러나는 라벨 액센트에. 전체 면적 6% 이하.
- 보더: 타일 보더는 기본 없음(갭으로 분리). 필요 시 1px `rgba(255,255,255,0.08)`.
- 그린 위 텍스트는 `#0b0b0c`(검정).

## 타이포그래피
- 디스플레이 폰트: `Space Grotesk`(Google Fonts), 대체 `system-ui, sans-serif`. 큼직한 디스플레이 산세리프.
- 본문/메타 폰트: `Inter`(Google Fonts), 대체 `system-ui, sans-serif`.
- H1: `clamp(2.8rem, 6.5vw, 6rem)`, weight 700, letter-spacing `-0.03em`, line-height 1.0.
- H2(섹션 제목): `clamp(1.8rem, 3.4vw, 3rem)`, weight 600, line-height 1.1.
- 타일 라벨(이미지 위): `Space Grotesk` `1.0625rem`, weight 600, line-height 1.25.
- 본문/메타: `Inter` `0.9375rem`, weight 400, line-height 1.55, 색 `#9a9a98`.
- 태그/배지: `Inter` `0.6875rem`, weight 700, letter-spacing `0.08em`, 대문자.

## 레이아웃 / 그리드
- 콘텐츠 폭: 거의 풀폭. 좌우 패딩 `clamp(16px, 3vw, 40px)` — 미디어가 가장자리까지 닿는다.
- 모듈러 미디어 그리드: CSS Grid 12열, gap 12px(빽빽). 타일은 비균일 — 2x2 피처 타일, 1x1 표준 타일, 2x1 와이드 타일이 섞인다(`grid-column/row span`).
- 섹션 수직 리듬: 행 사이 gap 12px, 섹션 간 `clamp(48px, 6vw, 88px)`.
- 그리드 종횡비: 표준 타일 `aspect-ratio: 1/1`, 와이드 `16/9`, 피처 `1/1`(2x2 span).
- 브레이크포인트: 1280px(12열) / 880px(6열, 피처는 3x3 span) / 540px(2열, 피처는 풀폭).
- 헤더: 고정, 높이 64px, 배경 `rgba(11,11,12,0.8)` + `backdrop-filter: blur(10px)`. 좌측 워드마크, 우측 메뉴 + 그린 알약 CTA.
- 스크롤 시 새 미디어 행을 연속 로드(무한 그리드 느낌) — 행 경계가 보이지 않게 gap 균일.

## 형태 / 질감
- 타일/카드: radius 14px. 이미지는 `object-fit: cover`로 셀을 가득 채움. 그림자 없음 — 분리는 검정 갭으로.
- 이미지 위 텍스트: 하단에 `linear-gradient(transparent, rgba(0,0,0,0.75))` 오버레이 그라데로 가독 확보 + 라벨 얹기.
- 재생 버튼: 원형, 지름 56px, 배경 `#19e57d`, 삼각형 글리프 `#0b0b0c`. 미디어 타일 중앙에 오버레이.
- 1차 버튼: radius 999px, 배경 `#19e57d`, 텍스트 `#0b0b0c`, weight 600, 패딩 12px 22px.
- 배지("NEW" 등): radius 6px, 배경 `#19e57d`, 텍스트 `#0b0b0c`, 대문자 마이크로 텍스트.
- 아이콘: 2px stroke 라인 아이콘, `#f5f5f3`. 활성/재생 글리프만 그린.

## 모션 (웹)
- 타일 호버(핵심): `transform: scale(1.04)` + 타일이 다른 타일 위로 올라옴(`z-index` 상승), duration 260ms, easing `cubic-bezier(0.22,1,0.36,1)`.
- 호버 시 라벨 슬라이드인: 하단 라벨이 `translateY(12px→0)` + `opacity 0→1`, 200ms ease-out. 재생 버튼 `scale(0.8→1)` 동반.
- 미디어 타일 호버 시 영상 placeholder 자동재생(또는 GIF/이미지 전환) — 발랄한 "재생되는" 느낌.
- 스크롤 등장: 새 미디어 행이 `opacity 0→1` + `translateY(24px→0)`, 320ms ease-out, 타일마다 50ms 스태거.
- 그린 배지: 미세 펄스(`scale 1→1.06→1`) 1.8s 무한 루프 — 활기 신호.
- `prefers-reduced-motion: reduce`이면 scale·슬라이드·자동재생·펄스 제거. 라벨은 항상 표시, 미디어는 정지 프레임.

## 하지 말 것
- 보라/인디고 그라디언트 금지. 강조는 시그널 그린 단색 하나뿐.
- 그린을 넓은 면 배경으로 칠하지 말 것 — 6% 면적 상한. 검정 캔버스가 주인공이다.
- 둥근 soft-shadow 카드 부유 효과 금지 — 타일은 검정 갭으로만 분리, 그림자 없음.
- 섹션마다 동일 크기 타일을 균일 그리드로 반복하지 말 것 — 피처/표준/와이드 타일을 비균일하게 섞는다.
- 그라디언트 텍스트·이모지·정체불명 일러스트 금지. 시각은 실제 미디어 타일과 라인 아이콘.
- 타일 사이 gap을 헐겁게 두지 말 것 — 12px의 빽빽한 갭으로 콜라주 밀도를 유지한다.
- 라이트 배경 금지 — 이 팩은 잉크 블랙 다크 캔버스다.
- 미디어 호버 모션을 빼고 정적으로만 두지 말 것(reduced-motion 제외) — 발랄한 마이크로모션이 정체성이다.

## 적용 예
- **히어로:** `#0b0b0c` 배경. 상단에 Space Grotesk 거대 H1 + 그린 1차 CTA, 그 아래 풀폭 2x2 피처 미디어 타일이 바로 그리드를 연다. 헤더는 blur 고정.
- **미디어 그리드:** 12열 그리드에 피처(2x2)·표준(1x1)·와이드(2x1) 타일 혼합. 각 타일은 풀블리드 이미지 + 하단 그라데 오버레이 + Space Grotesk 라벨. 호버 시 1.04 확대 + 라벨 슬라이드인 + 그린 재생 버튼.
- **카드(콘텐츠 타일):** radius 14px, `#161618` 표면(이미지 없을 때). 상단 라인 아이콘 + 제목 + 메타 + 대문자 태그. 호버 시 확대·전면화.
- **푸터:** `#0b0b0c` 배경, 풀폭. 좌측 워드마크 + 한 줄, 우측 다열 링크. 상단 1px `rgba(255,255,255,0.08)` 룰. 그린은 링크 호버·소셜 아이콘에만.