# Design System — Y2K Chrome (Y2K 크롬)

> 은색 크롬 그라디언트, 무지갯빛 홀로그램 하이라이트, 캡슐 버튼, 네 갈래 반짝이 별. 2000년 전후 MP3 플레이어·휴대폰 광고·음반 재킷의 낙관적인 테크 감성을 지금의 화면 규칙으로 다시 짠 스타일이다.
> 공통 규칙은 `anti-slop.md`를 함께 적용한다. 미리보기: `preview/y2k-chrome.html` (사내 송년회 이벤트 페이지 예시)

> **이 문서는 anti-slop.md의 "그라디언트·글로우 금지"를 풀어 준다. 단, 5절 효과 레시피에 적힌 효과만, 적힌 곳에, 적힌 양까지만이다.** 그 밖의 anti-slop 원칙(이모지 금지, 현실적인 한국어 더미 데이터, 아이콘 카드 3개 나열 금지, 빈 상태·로딩·에러 상태)은 그대로 지킨다. 반짝임이 많을수록 화려해지는 게 아니라 싸구려가 된다. 크롬은 "한 군데만 빛나는" 것이 핵심이다.

---

## 1. 분위기

밝은 은회색 바탕에 금속처럼 반사되는 글자 하나, 손에 쥐고 싶은 알약 모양 버튼, 모서리에 반짝 튀는 별 몇 개. 화면 전체가 번쩍이는 것이 아니라 **차분한 은색 위에 크롬 포인트 세 군데**가 빛나는 구조다. 나머지는 흰 카드와 짙은 남흑색 글자로 단정하게 둔다. 이 대비가 있어야 크롬이 금속처럼 보인다.

작은 대문자 라벨(`RSVP`, `PRIZE`, `TIMETABLE`)과 넓은 영문 서체가 "그 시절 기계" 느낌을 만든다. 한글 본문은 Pretendard로 읽기 쉽게 두고, 영문 포인트만 넓게 벌린다.

**어울리는 곳**
- 송년회·창립기념일·사내 축제 같은 연 1~2회 행사 페이지
- 동호회 모집, 사내 굿즈 판매, 경품 추첨, 레트로 콘셉트 캠페인
- 신제품 런칭 이벤트의 티저 페이지(기간 한정)

**쓰면 안 되는 곳**
- 업무 시스템, 대시보드, 결재·보고 화면 (매일 보는 화면에 반짝이는 장식은 피로를 만든다)
- 의약품 정보, 안전성·품질 공지, 인사·급여 안내처럼 신뢰가 먼저인 내용
- 조의·사과·장애 공지 등 가벼운 톤이 실례가 되는 내용

**핵심 특징**
- 바탕은 차분한 은회색(`--bg`), 카드는 흰색, 글자는 남흑색
- 크롬 그라디언트는 **화면당 3곳 이하** (보통 히어로 제목, 주 버튼, 배지 1개)
- 홀로그램(무지갯빛)은 **화면당 1개 면**만 (보통 강조 카드 테두리)
- 4각 스파클 SVG는 **화면당 5개 이하**, 크기 10~28px
- 버튼은 모두 캡슐형(`border-radius: 999px`)
- 작은 대문자 라벨 + 넓은 영문 포인트 서체(Michroma)

---

## 2. 컬러 팔레트 & 역할

차가운 은색 계열 중성색 + 남흑색 잉크 + 홀로그램 파스텔 4색. 홀로그램 색은 단독 채색에 쓰지 않고 그라디언트 안에서만 쓴다.

### Light (기본)

```css
:root {
  /* 표면 */
  --bg:          #EEF0F5;  /* 페이지 바탕, 차가운 은회색 */
  --bg-2:        #E3E6ED;  /* 가라앉은 면, 트랙, 칩 */
  --surface:     #FFFFFF;  /* 카드 */
  --ink:         #12141C;  /* 주 버튼 안쪽, 제목, 본문 */

  /* 텍스트 */
  --text:        #12141C;  /* 본문 (bg 위 16.6:1) */
  --muted:       #575D6C;  /* 보조 텍스트 (bg 위 5.9:1) */
  --faint:       #8A90A0;  /* 메타, 비활성 (본문에 쓰지 않음) */
  --on-ink:      #F4F6FA;  /* 잉크 위 글자 */

  /* 선 */
  --line:        #D3D7E0;
  --line-strong: #B4BAC7;

  /* 크롬 단계 (그라디언트 재료) */
  --chrome-hi:   #FFFFFF;
  --chrome-1:    #DADFE8;
  --chrome-2:    #A6AEBD;
  --chrome-3:    #7D8596;
  --chrome-lo:   #545B6B;

  /* 홀로그램 (그라디언트 안에서만) */
  --holo-pink:   #FFC9EC;
  --holo-sky:    #C8DCFF;
  --holo-mint:   #BFF5E6;
  --holo-lemon:  #FFF1B8;

  /* 액센트: 지금·다음을 가리키는 1곳 */
  --accent:      #E8338A;  /* 핫핑크, 흰 바탕 위 4.6:1 */
  --success:     #1E8A5A;
  --danger:      #C42B3A;
}
```

### Dark

다크에서는 바탕이 남흑색이 되고, 크롬은 더 어둡게 내려 반사광만 남긴다. 홀로그램은 채도를 그대로 두되 불투명도를 0.85로 낮춘다.

```css
:root[data-theme="dark"] {
  --bg:          #0E1017;
  --bg-2:        #171A24;
  --surface:     #1A1D28;
  --ink:         #F4F6FA;  /* 반전: 주 버튼 안쪽이 밝아진다 */
  --text:        #EEF0F5;
  --muted:       #A3A9B8;  /* surface 위 7.1:1 */
  --faint:       #6C7283;
  --on-ink:      #12141C;
  --line:        #2A2E3B;
  --line-strong: #3B4152;
  --chrome-hi:   #F4F6FA;
  --chrome-1:    #B9C0CC;
  --chrome-2:    #6F7788;
  --chrome-3:    #3E4453;
  --chrome-lo:   #22262F;
  --accent:      #FF5BA8;
  --success:     #48C08A;
  --danger:      #FF6B78;
}
```

### 역할 규칙

| 토큰 | 쓰는 곳 | 쓰지 않는 곳 |
|---|---|---|
| 크롬 그라디언트 | 히어로 제목 1개, 주 버튼 테두리 1개, 배지/카운터 1개 | 본문, 카드 배경 전체, 표 |
| 홀로그램 그라디언트 | 강조 카드 1장의 테두리 또는 띠 | 버튼 채움, 글자, 페이지 바탕 |
| `--ink` | 주 버튼 안쪽, 제목, 본문 | 카드 배경 (히어로 띠 1개 예외) |
| `--accent` | 마감 임박 표시, 현재 진행 중 타임테이블 행, 남은 자리 숫자 | 버튼 배경, 큰 면 |
| `--surface` | 모든 카드 | 페이지 바탕 |

---

## 3. 타이포그래피

| 역할 | 서체 |
|---|---|
| 한글 UI·본문 | **Pretendard Variable** (`cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css`) |
| 영문 포인트·라벨·큰 숫자 | **Michroma** (Google Fonts) — 넓고 기계적인 Y2K 서체 |
| 시간·숫자 표 | **Space Mono** (Google Fonts), `tabular-nums` |

```css
--font-sans:  "Pretendard Variable", Pretendard, -apple-system, sans-serif;
--font-wide:  "Michroma", "Pretendard Variable", sans-serif;
--font-mono:  "Space Mono", ui-monospace, monospace;
.label { font: 400 11px/1 var(--font-wide); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
```

Michroma에는 한글이 없다. **한글 문장에 Michroma를 걸지 않는다.** 영문 라벨, 연도(`2026`), 짧은 영문 슬로건에만 쓴다.

### 스케일 (6단계)

| 토큰 | 크기 / 굵기 / 자간 | 용도 |
|---|---|---|
| `display` | `clamp(48px, 6vw, 84px)` / Michroma 400 / -0.02em | 히어로 영문·연도 1개 (크롬 텍스트) |
| `title` | 34px / Pretendard 800 / -0.035em | 페이지 한글 제목 |
| `h2` | 20px / 700 / -0.02em | 카드 제목 |
| `body` | 15px / 400 / 1.6 | 본문 |
| `small` | 13px / 500 | 보조, 표 셀 |
| `label` | 11px / Michroma / 0.18em / 대문자 | 섹션 라벨, 배지 |

원칙: 크롬은 `display`에만 건다. 한글 제목은 짙은 잉크 단색으로 두어 읽힌다. 라벨은 작고 넓게, 본문은 Pretendard로 평범하게.

---

## 4. 컴포넌트

### 카드

```css
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;              /* --r-card, 모든 카드 동일 */
  padding: 24px;
  box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 2px rgba(18,20,28,.06);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
```

그림자는 이 한 종류만 쓴다. 카드를 띄우지 말고 바탕과의 명도 차이로 구분한다.

### 주 버튼 (캡슐 + 크롬 테두리, 화면에 1개)

```css
.btn-primary {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  font: 700 16px var(--font-sans); color: var(--on-ink); cursor: pointer;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(180deg, #FFFFFF 0%, #A6AEBD 45%, #F4F6FA 55%, #7D8596 100%) border-box;
  border: 2px solid transparent;
  box-shadow: 0 6px 16px -6px rgba(18,20,28,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary::after {           /* 윗면 광택 */
  content: ""; position: absolute; inset: 3px 14px auto; height: 40%;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-primary:disabled { background: var(--bg-2); color: var(--faint); box-shadow: none; cursor: not-allowed; }
```

### 보조 버튼

```css
.btn-ghost {
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--text); font: 600 14px var(--font-sans);
}
.btn-ghost:hover { background: var(--bg-2); }
```

### 배지 (크롬 배지는 화면에 1개)

```css
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px;
         border-radius: 999px; background: var(--bg-2); color: var(--muted);
         font: 400 10px var(--font-wide); letter-spacing: .16em; text-transform: uppercase; }
.badge--chrome { color: #12141C;
  background: linear-gradient(180deg, #FFFFFF 0%, #DADFE8 40%, #A6AEBD 60%, #E9ECF2 100%);
  box-shadow: inset 0 0 0 1px rgba(84,91,107,.35); }
.badge--accent { background: #FDE3F0; color: #A3175B; }   /* 마감 임박 */
```

### 입력

```css
.field label { display: block; font: 600 13px var(--font-sans); margin-bottom: 6px; }
.input { width: 100%; height: 46px; padding: 0 18px; border-radius: 999px;
         border: 1px solid var(--line-strong); background: var(--surface);
         font: 400 15px var(--font-sans); color: var(--text); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18,20,28,.12); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--danger); }
```

### 내비 (캡슐 바)

```css
.nav { display: flex; align-items: center; gap: 4px; padding: 5px;
       border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.nav a { padding: 8px 16px; border-radius: 999px; font: 600 14px var(--font-sans); color: var(--muted); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
```

### 진행 막대 (신청 현황)

```css
.meter { height: 12px; border-radius: 999px; background: var(--bg-2);
         box-shadow: inset 0 1px 2px rgba(18,20,28,.12); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px;
             background: linear-gradient(180deg, #4A5162, #12141C); }
```

진행 막대는 크롬이 아니라 잉크 단색이다. 크롬 3곳 한도를 막대에 쓰지 않는다.

---

## 5. 효과 레시피

이 절에 적힌 CSS만 쓴다. 값은 그대로 복사한다.

### 5-1. 크롬 텍스트 (히어로 영문·연도 1개)

```css
.chrome-text {
  font-family: var(--font-wide);
  background: linear-gradient(180deg,
    #FFFFFF 0%, #DADFE8 18%, #A6AEBD 44%, #545B6B 50%,
    #C9CFD9 56%, #F4F6FA 74%, #7D8596 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(84,91,107,.35);
  filter: drop-shadow(0 2px 0 rgba(18,20,28,.18));
}
```

44%→50%→56% 구간의 급격한 명암 전환이 "지평선 반사"다. 이 꺾임이 없으면 그냥 회색 그라디언트로 보인다.

### 5-2. 홀로그램 테두리 (강조 카드 1장)

```css
.holo {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(115deg, #FFC9EC, #C8DCFF, #BFF5E6, #FFF1B8, #FFC9EC) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: holo-shift 9s linear infinite;
}
@keyframes holo-shift { to { background-position: 0 0, 300% 0; } }
```

### 5-3. 4각 스파클

```html
<svg class="spark" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 0C12.9 7.6 16.4 11.1 24 12C16.4 12.9 12.9 16.4 12 24C11.1 16.4 7.6 12.9 0 12C7.6 11.1 11.1 7.6 12 0Z"/>
</svg>
```

```css
.spark { position: absolute; width: 18px; height: 18px; fill: #FFFFFF;
         filter: drop-shadow(0 0 4px rgba(200,220,255,.9)); }
.spark--ink { fill: var(--ink); filter: none; }        /* 흰 바탕 위 */
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: twinkle 2.8s ease-in-out infinite; }
  .spark:nth-of-type(2) { animation-delay: .9s; }
  .spark:nth-of-type(3) { animation-delay: 1.7s; }
}
@keyframes twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1; }
                     50% { transform: scale(.55) rotate(45deg); opacity: .55; } }
```

### 5-4. 광택 띠 (주 버튼 호버 1회)

```css
.btn-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::before { transition: background-position .45s ease; background-position: -20% 0; }
}
```

### 쓰는 양의 상한

| 효과 | 화면당 상한 | 비고 |
|---|---|---|
| 크롬 (5-1 텍스트 + 크롬 테두리 + 크롬 배지 합산) | **3곳** | 주 버튼이 이미 1곳을 차지한다 |
| 홀로그램 (5-2) | **1개 면** | 카드 테두리 또는 히어로 아래 4px 띠 |
| 스파클 (5-3) | **5개**, 10~28px | 크롬 요소 주변에만, 본문 위 금지 |
| 광택 띠 (5-4) | 주 버튼 1개 | 호버 시 1회만, 반복 금지 |
| 드롭 섀도 | 카드 1종 + 주 버튼 1종 | 그 밖의 그림자 없음 |

---

## 6. 레이아웃

- 최대 폭 1200px 중앙, 좌우 여백 32px(모바일 16px).
- 12열 그리드. 히어로는 **좌 7열(제목·일시·장소·버튼) + 우 5열(신청 현황 카드)** 비대칭.
- 아래 본문은 **경품(5열, 홀로그램 카드) + 타임테이블(7열)**, 그 아래 신청 폼 1장. 같은 크기 카드 3개를 나란히 두지 않는다.
- 간격은 8의 배수: 카드 사이 20px, 섹션 사이 56px.
- 반경은 카드 22px, 캡슐 999px 두 종류만.

```css
.page { max-width: 1200px; margin: 0 auto; padding: 24px 32px 64px; }
.hero { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: stretch; }
.body { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; margin-top: 20px; }
@media (max-width: 900px) { .hero, .body { grid-template-columns: 1fr; } }
```

---

## 7. 모션

| 상황 | 시간 | 방식 |
|---|---|---|
| 버튼 호버 | 180ms | 1px 상승 |
| 광택 띠 | 450ms | 호버 시 1회 통과 |
| 카드 등장 | 320ms | 8px 상승 + 페이드, 40ms 순차 |
| 스파클 깜빡임 | 2.8s 주기 | 장식 상시, 3개까지만 움직임 |
| 홀로그램 흐름 | 9s 주기 | 1개 면만 |

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
```

모션을 끈 상태에서도 화면은 완성돼 있어야 한다. 스파클은 멈춘 별로, 홀로그램은 멈춘 무지개 테두리로 남는다.

---

## 8. 접근성

- **크롬 텍스트는 장식용 큰 글자에만.** 본문·버튼 글자·숫자 정보에 크롬을 쓰지 않는다. 크롬 텍스트 안의 가장 어두운 구간(`#545B6B`)이 바탕 대비 3:1 미만으로 떨어지는 지점이 있으므로, 같은 내용을 `aria-label` 또는 바로 아래 한글 제목(잉크 단색)으로 다시 준다.
- 본문은 항상 `--surface`(흰 카드) 위 `--text`로. 홀로그램 테두리 안쪽도 흰 카드라 대비가 유지된다.
- 홀로그램 파스텔 위에 글자를 직접 올리지 않는다.
- 포커스 링은 3px `--accent`, offset 3px. 크롬 테두리와 구분되게 핫핑크로.
- 상태를 색만으로 알리지 않는다. 마감 임박은 배지 글자 + 숫자로.
- 효과 끄기 폴백: `@media (prefers-contrast: more)`와 `forced-colors: active`에서 그라디언트를 단색으로 바꾼다.

```css
@media (prefers-contrast: more), (forced-colors: active) {
  .chrome-text { background: none; color: var(--text); -webkit-text-stroke: 0; filter: none; }
  .holo { background: var(--surface); border-color: var(--text); animation: none; }
  .spark { display: none; }
}
```

---

## 9. 하지 말 것

- 페이지 바탕 전체를 크롬이나 홀로그램으로 채우기
- 한글 본문·버튼 글자에 크롬 그라디언트
- 스파클을 화면 곳곳에 흩뿌리기(6개 이상), 본문 위에 얹기
- 보라→분홍 그라디언트 버튼, 네온 글로우 테두리
- 크롬 카드 3장을 나란히(아이콘+제목+설명) 배치
- Michroma로 한글 쓰기 (대체 서체로 깨져 보인다)
- "역대급 경품!" "놓치면 후회!" 같은 과장 카피, 이모지
- 1,234명 / 99.9% 같은 가짜 숫자. 실제 정원·신청 수·마감 시각을 쓴다
- 신청 마감 후에도 버튼을 활성 상태로 두기 (마감·정원 초과 상태를 반드시 만든다)

---

## 10. 셀프 체크리스트

- [ ] 크롬 요소가 3곳 이하인가? (주 버튼 포함해서 센다)
- [ ] 홀로그램 면이 1개뿐인가?
- [ ] 스파클이 5개 이하이고 본문을 가리지 않는가?
- [ ] 한글 본문이 흰 카드 위 잉크 단색인가?
- [ ] 버튼이 모두 캡슐형이고 주 버튼이 1개인가?
- [ ] 마감·정원 초과·제출 오류·빈 목록 상태가 있는가?
- [ ] `prefers-reduced-motion`에서 모든 애니메이션이 멈추는가?
- [ ] 숫자·이름·날짜·장소가 현실적인가?

### 복사용 프롬프트

```
Y2K 크롬 스타일로 사내 송년회 신청 페이지를 만들어줘. designs/y2k-chrome.md를 따른다.
- 바탕 #EEF0F5, 카드 #FFFFFF(반경 22px), 글자 #12141C, 버튼은 전부 캡슐(999px)
- 크롬 그라디언트는 화면당 3곳만: 히어로 연도 "2026", 주 버튼 테두리, 배지 1개
- 홀로그램 테두리(115deg 파스텔 4색)는 경품 카드 1장에만
- 4각 스파클 SVG 5개 이하, 히어로 제목 주변에만
- 한글 Pretendard, 영문 라벨 Michroma 11px 대문자 0.18em
- 신청 현황(정원 대비 진행 막대), 경품 목록, 타임테이블(진행 중 행만 #E8338A), 신청 폼(오류 상태 포함)
- 마감 상태와 prefers-reduced-motion 처리 포함

[디자인 제약 — AI 기본값 금지]
- 효과는 문서 5절 레시피만, 정해진 곳·양만
- 보라/인디고 그라디언트 버튼, 네온 글로우, 블롭 배경 금지
- 아이콘+제목+설명 카드 3개 나열 금지
- 이모지 금지, 아이콘은 SVG 또는 lucide-react
- 현실적인 한국어 더미 데이터, 빈 상태·로딩·에러 포함
```