# Nordic / Scandinavian Minimal

> 북유럽 감성의 클린 미니멀 디자인. 화이트스페이스와 절제미.

## 핵심 원칙
- **Simplicity**: 필요한 것만 남기기
- **Whitespace**: 여백이 곧 디자인
- **Functionality**: 아름다움은 기능에서
- **Nature**: 자연 색상과 소재감
- **Timeless**: 유행 타지 않는 스타일

---

## 컬러 시스템

```
기본 팔레트 (매우 절제된 색상 사용)
  White:       #FFFFFF
  Off-white:   #FAFAF9
  Light:       #F5F5F4   ← 기본 페이지 bg
  Mist:        #E7E5E4
  Stone:       #D6D3D1
  Warm Gray:   #A8A29E
  Gray:        #78716C
  Dark Gray:   #44403C
  Charcoal:    #292524
  Almost Black:#1C1917   ← 기본 텍스트

Accent (딱 1-2개 사용 권장)
  Sage Green:  #84A98C   ← Nature accent
  Warm Beige:  #C8B89A
  Dusty Rose:  #B69090
  Nordic Blue: #6B8CAE
  Terracotta:  #C17767
  Forest:      #4A7C59

절대 피해야 할 색상:
  형광색, 채도 높은 원색, 과도한 그라디언트
```

## 타이포그래피

```
폰트 (하나 또는 둘만 사용)
  Heading: "Playfair Display", "DM Serif Display", Georgia, serif (선택)
  또는
  Heading: "Inter", "DM Sans", sans-serif (모던 미니멀)
  Body:    "Inter", "DM Sans", system-ui, sans-serif
  한국어:  Pretendard (단독 사용 권장 - 세리프 없이도 우아함)
  코드:    "JetBrains Mono", monospace

Scale:
  xs:   12px / Line 16px / Weight 400
  sm:   14px / Line 20px / Weight 400
  base: 16px / Line 24px / Weight 400  ← 기본
  lg:   18px / Line 28px / Weight 400
  xl:   20px / Line 28px / Weight 500
  2xl:  24px / Line 32px / Weight 500
  3xl:  30px / Line 36px / Weight 400 (세리프 시) / 600 (산세리프)
  4xl:  36px / Line 40px / Weight 400
  5xl:  48px / Line 52px / Weight 400
  6xl:  60px / Line 64px / Weight 300

주요 규칙:
  - 폰트 2종 이하 사용
  - 크기 대비로 계층 표현 (색상보다 크기로)
  - 자간: 헤딩 -0.02em ~ -0.04em
  - 행간: 넉넉하게 (body 1.6, 헤딩 1.1~1.2)
```

## 스페이싱 (넉넉하게!)

```
핵심: 여백을 아끼지 말 것. 좁으면 Nordic이 아님.

xs:   8px     sm: 16px     md: 24px     lg: 32px
xl:   48px    2xl: 64px    3xl: 96px    4xl: 128px
5xl:  192px

컨테이너 패딩: 24~32px (모바일), 48~64px (데스크탑)
섹션 간격:    64~128px
```

## Border Radius

```
미니멀:   0px ~ 2px (하드 엣지)
모던:     8px ~ 16px (부드럽지만 과하지 않게)
카드:     12px ~ 16px
버튼:     4px ~ 8px (pill 버튼 지양)
```

## 그림자 (절제하여 사용)

```
미니멀 접근법: 그림자 대신 테두리 또는 배경색 차이로 구분
사용 시:
  subtle:  0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.03)
  card:    0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)
  modal:   0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)
```

---

## 레이아웃 원칙

```
최대 너비: 1200px (콘텐츠), 960px (텍스트 중심)
컬럼 수:  최소화 (2~3컬럼이 최대, 가능하면 1컬럼)
비율:     황금비율 (1:1.618) 또는 1:2 단순 비율
그리드:   8px 베이스 그리드

히어로 섹션:
  - 텍스트 왼쪽 정렬 또는 중앙 정렬 (일관성)
  - 큰 화이트스페이스 (py: 96~160px)
  - 배경: 단색 또는 매우 미묘한 텍스처

카드:
  - 얇은 테두리 (1px, 옅은 회색) 또는 그림자 중 하나만
  - 내부 패딩 넉넉히 (24~32px)
  - 정보 과부하 금지 (카드 1개 = 핵심 정보 3개 이하)
```

---

## 주요 컴포넌트 패턴

### 버튼
```html
<!-- Primary: 어둡고 깔끔 -->
<button class="bg-stone-900 hover:bg-stone-800 text-white
               text-sm font-medium px-6 py-2.5 rounded-lg
               transition-colors tracking-wide">
  시작하기
</button>

<!-- Secondary: 테두리만 -->
<button class="bg-transparent border border-stone-300 text-stone-700
               hover:bg-stone-50 text-sm font-medium px-6 py-2.5
               rounded-lg transition-colors">
  더 알아보기
</button>

<!-- Ghost: 텍스트만, 밑줄 없음 -->
<button class="text-stone-500 hover:text-stone-900
               text-sm font-medium transition-colors">
  건너뛰기
</button>
```

### 카드
```html
<div class="bg-white rounded-xl border border-stone-100
            p-6 hover:shadow-md transition-shadow">
  <p class="text-xs text-stone-400 uppercase tracking-widest mb-2">카테고리</p>
  <h3 class="text-lg font-semibold text-stone-900 mb-3">제목</h3>
  <p class="text-sm text-stone-500 leading-relaxed">설명 텍스트</p>
</div>
```

### 입력 필드
```html
<div class="space-y-2">
  <label class="text-sm font-medium text-stone-700">레이블</label>
  <input class="w-full px-4 py-3 rounded-lg border border-stone-200
                bg-stone-50 text-stone-900 text-sm
                focus:outline-none focus:border-stone-400 focus:bg-white
                placeholder:text-stone-300 transition-colors" />
</div>
```

### 내비게이션
```html
<!-- 심플 헤더 -->
<header class="border-b border-stone-100 bg-white/80 backdrop-blur-sm">
  <div class="max-w-6xl mx-auto px-8 h-16 flex items-center justify-between">
    <span class="font-semibold text-stone-900 tracking-tight">로고</span>
    <nav class="flex items-center gap-8 text-sm text-stone-500">
      <a class="hover:text-stone-900 transition-colors">메뉴1</a>
      <a class="hover:text-stone-900 transition-colors">메뉴2</a>
    </nav>
  </div>
</header>
```

### 구분선 / 섹션 구분
```html
<!-- 얇은 구분선보다 여백으로 구분 권장 -->
<div class="my-16 border-t border-stone-100"></div>

<!-- 배경색 구분 -->
<section class="bg-stone-50 py-24">...</section>
```

---

## Tailwind 커스텀 설정 (Nordic 테마)

```ts
// tailwind.config.ts
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Pretendard', 'Inter', 'DM Sans', 'system-ui'],
        serif: ['Playfair Display', 'Georgia', 'serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      colors: {
        nordic: {
          sage:      '#84A98C',
          beige:     '#C8B89A',
          rose:      '#B69090',
          blue:      '#6B8CAE',
          forest:    '#4A7C59',
          terracotta:'#C17767',
        },
      },
      letterSpacing: {
        tight: '-0.02em',
        tighter: '-0.04em',
      },
      maxWidth: {
        reading: '65ch',  // 가독성 최적 너비
      },
    },
  },
}
```

## 금지 사항
- 이모티콘 사용 금지 → lucide-react 또는 SVG 아이콘 (단순한 것)
- 여백 줄이기 금지 → 좁으면 Nordic 스타일 아님
- 형광/채도 높은 색상 사용 금지
- 그림자 남발 금지 → 1종 이하 사용
- 애니메이션 과다 금지 → 미묘한 transition만 허용
- 폰트 3종 이상 사용 금지
- 정보 밀도 과다 금지 → 핵심만 표시