# UI Design System — Neo Brutalist

> **AI 도구를 위한 참고 문서입니다.** 이 파일에 정의된 토큰과 컴포넌트를 프로젝트에 그대로 적용할 수 있습니다.

---

## 철학 (Philosophy)

Brutalism applied to digital interfaces. Raw, honest, loud. No decoration that doesn't serve structure.
Heavy borders declare hierarchy. Bold type commands attention. Color is weaponized for emphasis.

| 원칙 | 설명 |
|------|------|
| **Raw over refined** | 구조를 보여라, 숨기지 마라 |
| **Heavy borders declare hierarchy** | 테두리 두께가 중요도를 전달한다 |
| **No gradients. No blur.** | 깊이 표현은 오직 오프셋 섀도우만 |
| **Type is architecture** | 헤드라인이 어떤 박스보다 먼저 구조를 만든다 |
| **Color is a tool** | 모든 색상은 장식이 아닌 기능을 가진다 |
| **Honest materials** | CSS 트릭으로 실제처럼 꾸미지 마라 |
| **Grid is law** | 8px 그리드를 절대적으로 준수한다 |

---

## 색상 시스템 (Color System)

### Design Tokens

| Token | Light | Dark | Description |
|-------|-------|------|-------------|
| `--color-bg` | `#ffffff` | `#0a0a0a` | 순수 화이트 / 거의 블랙 |
| `--color-surface` | `#f0f0f0` | `#1a1a1a` | 패널 표면 |
| `--color-surface-raised` | `#e8e8e8` | `#242424` | 상위 레이어 |
| `--color-text` | `#000000` | `#ffffff` | 순수 블랙 / 순수 화이트 |
| `--color-text-muted` | `#444444` | `#aaaaaa` | 보조 텍스트 |
| `--color-border` | `#000000` | `#ffffff` | 헤비 블랙 테두리 |
| `--color-point` | `#0000ff` | `#4040ff` | Electric blue |
| `--color-point-alt` | `#f0f000` | `#e0e000` | 옐로우 호버 하이라이트 |
| `--color-danger` | `#ff0040` | `#ff3366` | 레드 경고 |
| `--color-success` | `#00aa44` | `#00cc55` | 성공/확인 |

### Color CSS

```css
:root {
  --color-bg:            #ffffff;
  --color-surface:       #f0f0f0;
  --color-surface-raised:#e8e8e8;
  --color-text:          #000000;
  --color-text-muted:    #444444;
  --color-border:        #000000;
  --color-point:         #0000ff;
  --color-point-alt:     #f0f000;
  --color-danger:        #ff0040;
  --color-success:       #00aa44;
}

.dark {
  --color-bg:            #0a0a0a;
  --color-surface:       #1a1a1a;
  --color-surface-raised:#242424;
  --color-text:          #ffffff;
  --color-text-muted:    #aaaaaa;
  --color-border:        #ffffff;
  --color-point:         #4040ff;
  --color-point-alt:     #e0e000;
  --color-danger:        #ff3366;
  --color-success:       #00cc55;
}
```

### Usage Rules

- **모든 테두리:** `3px solid var(--color-border)` — 절대 더 얇게, 절대 블러 없이
- **섀도우:** 블러 0, 오프셋만: `4px 4px 0 var(--color-border)`
- **`--color-point-alt`:** 카드 및 리스트 아이템 호버 배경
- **Border-radius:** 없음 (0 everywhere)

### 접근성 대비비

| 조합 | 비율 | WCAG |
|------|------|------|
| `#000` on `#ffffff` | 21:1 | AAA |
| `#000` on `#f0f0f0` | 18.1:1 | AAA |
| `#444` on `#ffffff` | 9.7:1 | AAA |
| `#fff` on `#0000ff` | 8.6:1 | AAA |
| `#000` on `#f0f000` | 19.6:1 | AAA |

---

## 타이포그래피 (Typography)

### 폰트 스택

단 하나의 폰트. 모든 역할을 Gothic A1이 수행합니다. 한글과 라틴 모두 지원합니다.

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;500;700&display=swap"
  rel="stylesheet"
/>
```

### 폰트 CSS 변수

```css
:root {
  --font-heading: 'Gothic A1', 'Nanum Gothic', 'Arial Black', sans-serif;
  --font-body:    'Gothic A1', 'Nanum Gothic', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}
```

### 타입 스케일

| Role | Size | Weight | Transform | Letter Spacing |
|------|------|--------|-----------|----------------|
| Display | 4rem | 700 | Uppercase | 0.02em |
| H1 | 2.5rem | 700 | Uppercase | 0.01em |
| H2 | 1.75rem | 700 | — | 0 |
| H3 | 1.25rem | 700 | — | 0 |
| Body | 1rem | 400 | — | 0 |
| Label | 0.75rem | 700 | Uppercase | 0.08em |

### 타이포그래피 CSS

```css
/* Base */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Headings — bold, uppercase, space grotesk */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-top: 0;
}

h1 {
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

/* Display */
.display {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Label */
.label-text {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Body text */
p { margin-top: 0; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
```

---

## 간격 시스템 (Spacing System)

기본 단위: 8px (0.5rem). 항상 8px의 배수.

```css
:root {
  --space-1:  0.5rem;   /* 8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  2.5rem;   /* 40px — 사용 자제 */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
}
```

8px 그리드에서 벗어나는 값은 시스템 위반입니다.

---

## 경계 시스템 (Border & Shadow)

```css
:root {
  --border-heavy:  3px solid var(--color-border);
  --border-medium: 2px solid var(--color-border);
  --shadow-card:   4px 4px 0 var(--color-border);
  --shadow-hover:  6px 6px 0 var(--color-point);
  --shadow-inset:  inset 3px 3px 0 var(--color-border);
  /* border-radius: 없음. 항상 0 */
}
```

블러가 있는 box-shadow는 시스템 위반입니다.

---

## 레이아웃 시스템 (Layout System)

### 컨테이너

```css
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-2);
}
```

### 그리드

```css
.grid {
  display: grid;
  gap: var(--space-2);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
}
```

### 섹션

```css
.section {
  padding-block: var(--space-8);
  border-top: var(--border-heavy);
}

.section:first-of-type {
  border-top: none;
}
```

---

## 컴포넌트 (Components)

### Card

```html
<article class="card">
  <span class="label-text card-label">디자인</span>
  <h3 class="card-title">카드 제목</h3>
  <p class="card-body">
    원시적이고 솔직한 인터페이스. 구조가 장식이 되는 디자인.
  </p>
  <a href="#" class="card-cta">보러 가기 →</a>
</article>
```

```css
.card {
  background: var(--color-surface);
  border: var(--border-heavy);
  border-radius: 0;
  padding: var(--space-3);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
  cursor: pointer;
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translate(-2px, -2px);
}

.card-label {
  display: block;
  color: var(--color-point);
  margin-bottom: var(--space-1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.card-body {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.card-cta {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 1px;
}
.card-cta:hover {
  color: var(--color-point);
  border-color: var(--color-point);
}
```

---

### Button

```html
<!-- Primary -->
<button class="btn btn-primary">확인</button>

<!-- Secondary -->
<button class="btn btn-secondary">취소</button>

<!-- Danger -->
<button class="btn btn-danger">삭제</button>
```

```css
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 3px solid var(--color-point);
  outline-offset: 2px;
}

/* Primary */
.btn-primary {
  background: var(--color-point);
  color: #ffffff;
  border: var(--border-heavy);
  border-color: #000000;
}
.btn-primary:hover {
  background: var(--color-text);
}
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Secondary */
.btn-secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border: var(--border-heavy);
}
.btn-secondary:hover {
  background: var(--color-point-alt);
}
.btn-secondary:active {
  transform: translate(2px, 2px);
}

/* Danger */
.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
  border: var(--border-heavy);
  border-color: #000000;
}
.btn-danger:hover {
  background: #cc0033;
}

/* Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}
```

---

### Badge / Tag

```html
<span class="badge">추천</span>
<span class="badge badge-yellow">NEW</span>
<span class="badge badge-danger">경고</span>
```

```css
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.625em;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

.badge-yellow {
  background: var(--color-point-alt);
  color: #000;
  border-color: #000;
}

.badge-point {
  background: var(--color-point);
  color: #fff;
  border-color: #000;
}

.badge-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: #000;
}
```

---

### Form Inputs

```html
<div class="field">
  <label class="form-label" for="name">이름</label>
  <input class="input" id="name" type="text" placeholder="홍길동" />
  <p class="field-hint">!! 실명 입력 필수</p>
</div>

<div class="field">
  <label class="form-label" for="message">메시지</label>
  <textarea class="input input-textarea" id="message" rows="4"></textarea>
</div>
```

```css
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.input {
  width: 100%;
  padding: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--border-heavy);
  border-radius: 0;
  transition: box-shadow 0.1s ease;
  appearance: none;
}

.input:hover {
  box-shadow: var(--shadow-card);
}

.input:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--color-point);
}

.input-textarea {
  resize: vertical;
  min-height: 120px;
}

.field-hint {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0;
}
```

---

### 링크 (Links)

```css
a {
  color: var(--color-point);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: background 0.1s ease, color 0.1s ease;
}

a:hover {
  background: var(--color-point-alt);
  color: var(--color-text);
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid var(--color-point);
  outline-offset: 2px;
}
```

---

### Divider

```css
.divider {
  border: none;
  border-top: var(--border-heavy);
  margin-block: var(--space-4);
}

/* Striped divider for emphasis */
.divider-striped {
  border: none;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-text) 0px,
    var(--color-text) 8px,
    transparent 8px,
    transparent 16px
  );
  margin-block: var(--space-4);
}
```

---

### Blockquote

```html
<blockquote class="blockquote">
  <p>구조 자체가 아름다움이다.</p>
  <cite>— Neo Brutalist Manifesto</cite>
</blockquote>
```

```css
.blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: var(--border-heavy);
  border-left-width: 8px;
  background: var(--color-surface);
  position: relative;
}

.blockquote::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: var(--space-2);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-border);
}

.blockquote p {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.blockquote cite {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
```

---

## 헤더 / 네비게이션 (Header & Navigation)

```html
<header class="site-header">
  <div class="container site-header__inner">
    <a href="/" class="site-header__logo">BRAND</a>
    <nav class="site-nav">
      <a href="/about" class="nav-link">ABOUT</a>
      <a href="/work" class="nav-link">WORK</a>
      <a href="/contact" class="nav-link">CONTACT</a>
    </nav>
    <button class="btn btn-primary btn-sm">START</button>
  </div>
</header>
```

```css
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: var(--border-heavy);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 4rem;
}

.site-header__logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: auto;
}

.site-nav {
  display: flex;
  gap: 0;
}

.nav-link {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: var(--border-heavy);
  border-right: none;
  transition: background 0.1s ease;
}

.nav-link:first-child { border-left: none; }

.nav-link:hover,
.nav-link[aria-current="page"] {
  background: var(--color-point-alt);
}
```

---

## 푸터 (Footer)

```html
<footer class="site-footer">
  <div class="container site-footer__inner">
    <p class="site-footer__brand">BRAND</p>
    <p class="site-footer__copy">© 2025 BRAND. ALL RIGHTS RESERVED.</p>
    <nav class="site-footer__nav">
      <a href="/privacy">PRIVACY</a>
      <a href="/terms">TERMS</a>
    </nav>
  </div>
</footer>
```

```css
.site-footer {
  border-top: var(--border-heavy);
  padding-block: var(--space-4);
  background: var(--color-surface);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  margin-right: auto;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-footer__copy {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
}

.site-footer__nav {
  display: flex;
  gap: 0;
}

.site-footer__nav a {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  border: 2px solid var(--color-border);
  border-right: none;
}
.site-footer__nav a:last-child {
  border-right: 2px solid var(--color-border);
}
.site-footer__nav a:hover {
  background: var(--color-point-alt);
}
```

---

## 히어로 섹션 (Hero Section)

```html
<section class="hero">
  <div class="container">
    <span class="label-text hero__label">Neo Brutalist Design System</span>
    <h1 class="hero__headline">RAW.<br />HONEST.<br />LOUD.</h1>
    <p class="hero__subhead">
      Decoration lies. Structure speaks truth.
      Heavy borders. Pure type. No apologies.
    </p>
    <div class="hero__actions">
      <a href="#" class="btn btn-primary btn-lg">START NOW</a>
      <a href="#" class="btn btn-secondary btn-lg">VIEW DOCS</a>
    </div>
  </div>
</section>
```

```css
.hero {
  padding-block: var(--space-10);
  border-bottom: var(--border-heavy);
}

.hero__label {
  display: block;
  color: var(--color-point);
  margin-bottom: var(--space-2);
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: 8ch;
  margin-bottom: var(--space-3);
}

.hero__subhead {
  max-width: 44ch;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
```

---

## 다크 모드 (Dark Mode)

### 구현 원칙

- CSS 클래스 기반: `<html class="dark">`
- 다크 모드에서도 동일한 헤비 보더 원칙 유지
- 화이트 테두리가 블랙 테두리를 대체

### 깜빡임 방지 스크립트

```html
<script>
  (function () {
    try {
      var stored = localStorage.getItem('theme');
      var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (stored === 'dark' || (!stored && prefersDark)) {
        document.documentElement.classList.add('dark');
      }
    } catch (e) {}
  })();
</script>
```

### 다크 모드 조정

```css
/* 이미지 약간 어둡게 */
.dark img:not([src*=".svg"]) {
  filter: brightness(0.85) contrast(1.1);
}

/* 오프셋 섀도우 색상 반전 */
.dark .card:hover {
  box-shadow: 6px 6px 0 var(--color-point);
}
```

---

## 애니메이션 & 트랜지션

Neo Brutalist는 애니메이션을 거의 사용하지 않습니다. 움직임은 기능적이어야 합니다.

```css
:root {
  --transition-snap:   100ms ease;     /* 클릭, 누름 */
  --transition-fast:   150ms ease;     /* 호버 */
  --transition-slide:  200ms ease-out; /* 슬라이드인 */
}

/* 모션 감소 선호 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

### 허용된 움직임

- 버튼 `:active` 시 `translate(2px, 2px)` + shadow 제거
- 카드 `:hover` 시 `translate(-2px, -2px)` + shadow 추가
- 색상 전환 (hover) `100-150ms`

### 금지된 움직임

- 페이드인/아웃, 슬라이드 복잡 애니메이션
- bounce, spring, elastic easing
- 회전, 스케일 변환 (단 기능적 토글 제외)

---

## 상태 패턴 (State Patterns)

### 호버

카드 및 클릭 가능 요소는 `translate(-2px, -2px) + shadow` 효과.
버튼은 배경색 전환.

### 포커스

```css
:focus-visible {
  outline: 3px solid var(--color-point);
  outline-offset: 2px;
}
```

### Active/Press

```css
.interactive:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
```

### 비활성화 (Disabled)

```css
.btn:disabled,
.input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.5);
}
```

### 로딩

```css
@keyframes brutalist-stripe {
  0%   { background-position: 0 0; }
  100% { background-position: 24px 0; }
}

.loading-bar {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-point) 0px,
    var(--color-point) 12px,
    var(--color-bg) 12px,
    var(--color-bg) 24px
  );
  animation: brutalist-stripe 0.4s linear infinite;
}
```

---

## 코드 & 모노스페이스

```css
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.15em 0.4em;
  border: 2px solid var(--color-border);
  border-radius: 0;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--color-surface);
  border: var(--border-heavy);
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: 0;
}

pre code {
  background: none;
  border: none;
  padding: 0;
}
```

---

## 안티패턴 (Anti-Patterns)

| 안티패턴 | 이유 | 대안 |
|----------|------|------|
| `border-radius > 0` 사용 | 브루탈리스트 미학 완전 파괴 | `border-radius: 0` 유지 |
| `box-shadow` 에 `blur` 추가 | 솔직함 원칙 위반 | 오프셋 섀도우만: `4px 4px 0 #000` |
| 그라디언트 배경 | "꾸밈" — 시스템 금지 | 단색 배경만 |
| `1px` 테두리 사용 | 너무 약함 — 가시성 부족 | 최소 `2px`, 보통 `3px` |
| 8px 그리드 무시 | 시스템 일관성 파괴 | 항상 8px 배수 사용 |
| 커스텀 폰트 추가 | Gothic A1이 유일한 폰트 | `var(--font-body)` 유지 |
| 애니메이션 남용 | 브루탈리스트 원칙(직접성) 위배 | 기능적 움직임만 허용 |
| 부드러운 색상 사용 | 전기 파란색의 충격 효과 감소 | `#0000ff` 또는 `#f0f000` 고수 |
| CSS 변수 무시하고 하드코딩 | 다크 모드 / 테마 불가 | 항상 `var(--color-*)` 사용 |
| 과도한 여백으로 구조 희석 | 구조는 테두리로, 여백은 최소로 | 8px 그리드 적용 |

---

## 프레임워크 적용 가이드

### Tailwind CSS v4

```css
/* app/globals.css */
@import "tailwindcss";

@theme {
  /* Colors */
  --color-bg:          #ffffff;
  --color-surface:     #f0f0f0;
  --color-text:        #000000;
  --color-text-muted:  #444444;
  --color-border:      #000000;
  --color-point:       #0000ff;
  --color-point-alt:   #f0f000;
  --color-danger:      #ff0040;

  /* Typography */
  --font-heading:      'Gothic A1', 'Nanum Gothic', Arial, sans-serif;
  --font-body:         'Gothic A1', 'Nanum Gothic', Arial, sans-serif;

  /* No border radius */
  --radius-*:          0;

  /* Spacing (8px base) */
  --spacing-1:  0.5rem;
  --spacing-2:  1rem;
  --spacing-3:  1.5rem;
  --spacing-4:  2rem;
  --spacing-6:  3rem;
  --spacing-8:  4rem;
  --spacing-10: 5rem;
}
```

### Next.js App Router 셋업

```tsx
// app/layout.tsx
import { Gothic_A1 } from 'next/font/google';

const gothicA1 = Gothic_A1({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  variable: '--font-heading',
  display: 'swap',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className={spaceGrotesk.variable}>
      <head>
        <script dangerouslySetInnerHTML={{ __html: `
          (function(){
            try {
              var s = localStorage.getItem('theme');
              var p = window.matchMedia('(prefers-color-scheme: dark)').matches;
              if (s === 'dark' || (!s && p)) document.documentElement.classList.add('dark');
            } catch(e){}
          })();
        `}} />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

### CSS-in-JS (Styled Components / Emotion)

```tsx
export const NeoBrutalistTheme = {
  colors: {
    bg:         '#ffffff',
    surface:    '#f0f0f0',
    text:       '#000000',
    textMuted:  '#444444',
    border:     '#000000',
    point:      '#0000ff',
    pointAlt:   '#f0f000',
    danger:     '#ff0040',
    success:    '#00aa44',
  },
  fonts: {
    heading: "'Gothic A1', 'Nanum Gothic', Arial, sans-serif",
    body:    "'Gothic A1', 'Nanum Gothic', Arial, sans-serif",
  },
  borders: {
    heavy:  '3px solid #000000',
    medium: '2px solid #000000',
  },
  shadows: {
    card:  '4px 4px 0 #000000',
    hover: '6px 6px 0 #0000ff',
  },
  radii: {
    all: '0',
  },
};
```

---

## 체크리스트 (Implementation Checklist)

- [ ] Google Fonts 또는 `next/font` 로 Gothic A1 400/500/700 로드
- [ ] CSS 커스텀 프로퍼티(`:root`, `.dark`)를 글로벌 CSS에 추가
- [ ] 다크 모드 no-flash 스크립트를 `<head>` 에 인라인
- [ ] 모든 `border-radius` 를 `0` 으로 설정 — 예외 없음
- [ ] 모든 테두리를 `3px solid` 로 통일
- [ ] box-shadow 에서 blur 값 제거 확인
- [ ] 8px 그리드 준수 — 간격은 8의 배수
- [ ] `:focus-visible` 은 `3px solid var(--color-point)` 사용
- [ ] 색상 대비 확인 (이미 AAA 수준이나 커스텀 시 검증 필요)
- [ ] `prefers-reduced-motion` 적용 확인

---

*Neo Brutalist Design System — v1.0.0*
*Raw, honest, structural. No decoration. Pure function.*