애시드 디스플레이 테크 진PREMIUM

# 애시드 디스플레이 테크 진 — web 디자인 팩

## 이 스타일의 정체성
거의 검정인 짙은 캔버스 위에서 애시드 민트와 울트라바이올렛이 듀오로 충돌하고, 굵은 디스플레이 활자가 헤드라인을 포스터처럼 짜며, 요소가 의도적으로 어긋난 비대칭 진(zine) 레이아웃의 테크 매거진 사이트다. 무엇을 보면 이 스타일임을 아는가 — 강조색이 하나가 아니라 애시드 민트 + 울트라바이올렛 두 색이 충돌하며 활기를 낸다, 헤드라인이 굵은 디스플레이로 포스터처럼 크다, 요소가 그리드에 정렬되지 않고 의도적으로 어긋나 진(zine)처럼 거칠다, 트랜지션이 120–180ms로 빠르고 단호하다.

## 색
- 배경: `#101014` (near-black). 패널: `#1B1B22`.
- 텍스트: `#ECECEC`. 보조: `#8A8A95`.
- 강조: 애시드 민트 `#4FFFB0` · 울트라바이올렛 `#7C4DFF`. **두 색을 듀오로** 함께 씀 — 둘 다 강조. 한 색으로 줄이면 정체성 상실. 그 외 강조색 금지.
- 본문 대비: `#ECECEC` on `#101014` ≈ 14:1 (WCAG AAA). 민트 텍스트는 큰 디스플레이·라벨에만(작은 본문 금지 — 대비 부족).

## 타이포그래피
- 디스플레이: `Clash Display`(Fontshare, 무료) weight 700, 대체 `'Arial Black', Helvetica, sans-serif`. H1 `clamp(2.8rem, 6vw, 5.5rem)`, line-height 0.98, `letter-spacing: -0.02em` — 굵은 포스터 디스플레이.
- 본문: `Inter`(Google Fonts) weight 400, `1rem`, line-height 1.6, 측정 56–66자.
- 키커/라벨: `Inter` weight 700, `0.74rem`, 대문자, `letter-spacing: 0.14em` — 민트 또는 바이올렛.
- 거대 인덱스/이슈 번호: `Clash Display` weight 700, `clamp(3rem,8vw,7rem)`, 민트/바이올렛 듀오 배색.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1280px`(데스크탑 1280px 뷰포트 기준). 좌우 패딩 모바일 20px / 데스크탑 56px.
- 브레이크포인트: 768px, 1120px.
- 비대칭 진(zine) 레이아웃 — 요소가 12열 베이스에서 의도적으로 어긋남(컬럼 경계를 살짝 벗어남, 일부 요소 겹침, 회전 -3~3°).
- 섹션 수직 리듬: `clamp(72px, 8vw, 104px)` (balanced).
- 헤드라인·이미지·텍스트 블록이 어긋난 레이어로 겹침 — 진(zine) 콜라주 느낌이되 풀블리드 미디어 콜라주는 아님.
- **구성 균형 — 평면 보이드 금지.** zine은 의도적으로 어긋나되 빈약하지 않다. 빈 near-black 영역에는 거대 이슈 번호(`clamp(3rem,8vw,7rem)` 민트/바이올렛), 듀오톤 이미지 패널, 민트/바이올렛 태그 칩 그룹, 또는 옅은 zine 패턴(점·라인)을 깐다. "헤드라인만 있고 나머지가 평평한 검정"은 미완성 — zine 콜라주는 레이어가 겹쳐 면을 채운다.
- **간격 리듬:** 8px 베이스 스케일. 키커↔헤드라인 12px, 헤드라인↔리드문 20px, 리드문↔버튼 24px, 카드 내부 패딩 24–28px 일관, 듀오 보더 1–2px 두께 통일. 어긋남(회전·오프셋)은 의도적이되 카드 내부 간격·보더 두께는 일관.
- 각 섹션은 완결 — 헤드라인 + 본문 + 듀오톤 이미지/거대 인덱스 번호가 어긋난 레이어로 겹쳐 면을 채운다. 빈약한 파편 금지.

## 형태 / 질감
- 보더: 1–2px 민트 또는 바이올렛 — `2px solid #4FFFB0` / `2px solid #7C4DFF`. 듀오로 섞어 씀.
- 모서리: `0–4px` — 거의 직각.
- 그림자: 없음 — 깊이는 패널 명도 차와 듀오 컬러 보더로. 컬러 보더에 하드 오프셋(예: `4px 4px 0 #7C4DFF`) 허용.
- 아이콘: 2px 스트로크 라인 아이콘, 민트/바이올렛. 이모지 금지.
- 이미지: radius 0–4px, 채도 +10%(애시드한 톤). 듀오톤 처리(섀도→바이올렛, 하이라이트→민트) 허용. 위에 민트/바이올렛 1–2px 보더.
- 버튼: 민트 솔리드 + `#101014` 텍스트 / 또는 바이올렛 솔리드 + 흰 텍스트. radius 4px, 패딩 `12px 28px`, Inter 700 대문자. 호버 시 하드 오프셋 그림자 등장.

## 모션
- 전환: `snappy` — `150ms cubic-bezier(0.3, 0, 0.2, 1)`.
- 스크롤 진입: 요소가 `opacity 0→1` + `translateY(14px→0)` 150ms — 빠르게, 약간의 회전(-2°→0)으로 진(zine) 거칠음.
- 호버: 카드·버튼이 하드 오프셋 그림자(`4px 4px 0`) 즉시 등장 + `translate(-2px,-2px)`. 컬러 보더가 민트↔바이올렛으로 즉시 스위치(120ms).
- 링크 호버: 텍스트 하이라이트가 민트→바이올렛 면으로 즉시 채워짐.
- `prefers-reduced-motion`: 진입 트랜스폼·회전 제거, opacity만.
- 느린 페이드(>250ms)·바운스·패럴랙스 금지 — 모션은 snappy.

## 컴포넌트
- **헤더/내비:** 높이 64px, `#101014` 배경, 하단 2px 민트 또는 바이올렛 라인. 좌측 워드마크(Clash Display 700), 우측 메뉴(Inter 700 대문자 0.74rem, 항목 간격 24px) + 민트 솔리드 CTA 버튼. 메뉴 호버: 텍스트 하이라이트가 바이올렛 면으로 즉시 채워짐.
- **기사 카드:** `#1B1B22` 패널, 2px 듀오 보더, radius 4px, 내부 패딩 24–28px. 안에 거대 인덱스 번호 + 민트/바이올렛 키커 + Clash Display 제목 + Inter 본문. 카드 내부 간격: 인덱스↔키커 12px, 키커↔제목 8px, 제목↔본문 12px 일관. 박스 안 죽은 공백 금지. 호버 시 하드 오프셋 그림자(`4px 4px 0`) + translate(-2px,-2px).
- **거대 인덱스 번호:** Clash Display 700, `clamp(3rem,8vw,7rem)`, 민트/바이올렛 듀오 배색 — 빈 면을 채우는 zine 장치. 헤드라인과 겹치거나 면 한 구석에 크게.
- **아이콘:** 2px 스트로크 라인 아이콘, 민트/바이올렛. 제너릭 아이콘 세트 금지 — zine 모티프(글리치·화살표·별표)로 거칠게 크래프트. 이모지 금지.
- **헤드라인 블록:** 굵은 Clash Display 헤드라인이 약간 회전(-3°)된 패널 위에, 일부 텍스트가 패널 경계 밖으로 넘침.
- **태그 칩:** 민트 또는 바이올렛 외곽선 칩, Inter 700 대문자, 패딩 `4px 12px`.
- **버튼:** 민트 솔리드 + `#101014` 텍스트 / 바이올렛 솔리드 + 흰 텍스트. radius 4px, 패딩 `12px 28px`, Inter 700 대문자. 호버 시 하드 오프셋 그림자 등장.

## 하지 말 것
- 풀블리드 미디어 콜라주 금지(immersive-media-grid 자리) — 진(zine)은 어긋난 레이어 콜라주이되 풀블리드 미디어 타일이 아님.
- 하드 섀도 + 원색(빨강·노랑) 금지(neo-brutalism 자리) — 민트/바이올렛 듀오 + 짙은 배경.
- 강조색을 1개로 줄이기 금지 — 애시드 민트 + 울트라바이올렛 듀오가 정체성.
- 둥근 카드(radius > 4px)·이모지·글래스 패널 금지.
- 그라디언트 텍스트·라디얼 글로우 금지.
- 요소를 그리드에 정확히 정렬하기 금지 — 의도적으로 어긋난 진(zine) 배치.
- 민트를 작은 본문 텍스트에 쓰기 금지(대비 부족) — 큰 디스플레이·라벨에만.
- 느린 페이드·바운스 모션 금지 — snappy.
- 평면 단색 데드 보이드 금지 — 빈 near-black 영역은 거대 이슈 번호·듀오톤 이미지 패널·태그 칩 그룹·옅은 zine 패턴으로 채운다.
- 빈 플레이스홀더 채움 블록 금지 — 이미지 패널에는 실제 듀오톤 이미지를 담는다.
- 길 잃은 떠다니는 요소 금지 — 어긋남은 의도적 zine 콜라주이되, 각 요소는 다른 레이어와 겹쳐 구성적으로 묶인다. 무작위 부유 금지.
- 정체성 약화 금지 — 민트+바이올렛 듀오 충돌, 굵은 포스터 디스플레이, 어긋난 zine 레이아웃이 모든 페이지에서 또렷해야 한다.
- 제너릭 플레이스홀더 아이콘 금지 — zine 모티프로 거칠게 크래프트한 2px 라인 아이콘만.

## 상세 페이지 (5종)

### 1. 히어로 (듀오 강조)
`#101014` 배경, min-height 88vh. 좌측에 바이올렛 키커 + 거대 Clash Display 헤드라인(`clamp(2.8rem,6vw,5.5rem)`) — 헤드라인 일부 단어를 애시드 민트로, 일부를 바이올렛으로 듀오 배색. 그 아래 Inter 리드문 + 민트 솔리드 CTA + 바이올렛 외곽선 세컨더리. 우측에 약간 회전(-3°)된 듀오톤 이미지 패널(2px 민트 보더 + 4px 바이올렛 하드 오프셋). 배경에 거대 이슈 번호 한 점.
**zine 면 완결(필수):** 히어로는 어긋난 레이어가 겹쳐 면을 채우는 zine 콜라주여야 한다 — 헤드라인 한 줄만 있고 나머지가 평평하면 미완성이다. 거대 이슈 번호(`clamp(3rem,8vw,7rem)`, 민트/바이올렛 듀오)를 헤드라인 뒤·구석에 크게 깔고, 우측 듀오톤 이미지 패널은 실제 비주얼로 채우고(평면 단색 패널 금지), 헤드라인 주위에 민트/바이올렛 태그 칩 2–3개를 어긋나게 배치한다. 옅은 zine 패턴(점·라인)을 배경 레이어로. 면이 비어 보이지 않게 레이어를 겹친다.

### 2. 헤더·내비게이션
높이 64px `#101014` 헤더, 하단 2px 민트 라인. 좌측 워드마크(Clash Display 700 1.2rem), 중앙 5개 메뉴(Inter 700 대문자 0.74rem letter-spacing 0.14em #8A8A95), 우측 민트 솔리드 CTA. 메뉴 호버 시 텍스트 하이라이트가 바이올렛 면으로 즉시 채워짐. 모바일은 우측 2px 보더 햄버거.

### 3. 기사 콘텐츠
content_max 1280px, 비대칭 진 레이아웃. 좌측에 거대 Clash Display 기사 헤드라인(약간 회전된 패널) + 바이올렛 키커, 우측에 좁은 Inter 본문 칼럼 — 본문 칼럼이 컬럼 경계를 살짝 벗어나 어긋남. 본문 중간에 민트 외곽선 풀쿼트 블록(인용). 듀오톤 이미지 1점이 텍스트 위로 살짝 겹침.

### 4. 기사 그리드 갤러리
`#101014` 풀폭. 기사 카드 6개를 어긋난 그리드로 — 카드마다 grid-row span·회전(-3~3°)이 제각각이라 의도적으로 어긋남. 각 카드 `#1B1B22` 패널 + 2px 듀오 보더(민트/바이올렛 번갈아) + 거대 인덱스 번호 + 키커 + Clash 제목 + 듀오톤 썸네일. 호버 시 하드 오프셋 그림자 + translate(-2px,-2px).

### 5. 구독 CTA·푸터
CTA: `#1B1B22` 패널(약간 회전), 중앙 거대 Clash Display CTA 헤드라인(민트/바이올렛 듀오 배색) + 이메일 입력 필드(바이올렛 외곽선) + 민트 솔리드 구독 버튼. 푸터: `#101014`, 상단 2px 바이올렛 라인. 4컬럼(워드마크 / 섹션 / 회사 / 법적고지), 각 컬럼 민트 대문자 헤더 + Inter 링크. 소셜은 바이올렛 외곽선 칩. 최하단 카피라이트.