다크모드 테크

# 다크모드 테크 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 다크 테크 — 거의 검정인 차콜 배경에 네온 시안·바이올렛 강조와 얇은 발광 라인, 모노스페이스 라벨, 코드 블록형 표면.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 배경이 거의 검정인 차콜 단색, 모든 텍스트가 밝게 떠 있다, (2) 모노스페이스 폰트로 쓰인 라벨·메타데이터(`// 01`, `[ DATA ]` 식), (3) 네온 시안/바이올렛 1px 라인이 미세하게 발광하며 박스와 차트를 구획. 사이버·터미널 분위기.

## 색
- 배경 `#0C0D10` (거의 검정 차콜)
- 표면/코드 블록 `#16181D`
- 본문 텍스트 `#E4E6EB`, 보조 `#8A8F9A`
- 헤어라인·보더 `#2A2D35`
- 강조색 **2개**: 네온 시안 `#3DF5E0`, 바이올렛 `#9D7BFF` — 핵심 숫자, 차트 라인, 발광 보더, 키워드에. 두 색만 쓰고 그 외 금지.
- 발광 효과: 강조색에 `0 0 12px` 같은 색 글로우.

## 타이포그래피
- 디스플레이/본문 폰트: `Space Grotesk` (대체 `Arial`, `Pretendard`). 한글은 `Pretendard`.
- 모노 라벨 폰트: `JetBrains Mono` (대체 `Consolas`, `D2Coding`).
- 헤드라인: 38pt / Bold(700) / 자간 -1% / 행간 1.15 / 흰색
- 서브헤드: 20pt / Medium(500)
- 본문: 17pt / Regular(400) / 행간 1.4
- 모노 라벨/메타: 13pt / Regular / 자간 +5% / 색 `#3DF5E0` 또는 `#8A8F9A`
- KPI 숫자: 44pt / Bold / 색 `#3DF5E0` + 글로우
- 캡션: 11pt / 모노 / 색 `#8A8F9A`

## 레이아웃 / 그리드
- **비대칭 그리드.** 좌우 여백 0.6in. 콘텐츠 블록을 좌우 비대칭으로 — 한쪽에 큰 블록, 반대쪽에 작은 메타.
- 헤드라인 위에 모노 키커(`// SECTION 02` 식).
- 코드 블록형 표면(`#16181D`) + 1px 발광 보더로 데이터 영역 구획.
- 미세한 격자 라인 배경(`#16181D` 1px, 간격 0.5in) 선택적 — 사이버 깊이.

## 형태 / 질감
- 모서리 반경 4px. 보더 1px `#2A2D35`, 강조 영역은 1px 네온 + 글로우.
- 부드러운 그림자 대신 네온 글로우(`0 0 12px` 강조색 40%).
- 아이콘: 1.5px 스트로크 라인 아이콘, 시안 또는 흰색. 화살표는 가늘고 날카롭게.

## 차트 / 데이터 시각화 (발광 라인 + 모노 라벨)
차트는 SVG로 정밀 렌더한다. 다크 테크의 차트 정체성은 "차콜 위 발광 데이터 라인 + 모노스페이스 수치 라벨"이다.
- **라인 차트(기본형):** 2pt 실선, 주계열 네온 시안 `#3DF5E0`·보조 바이올렛 `#9D7BFF`. 각 선에 `0 0 8px` 같은 색 글로우. 면적 채움은 선 색 10% 알파 그라디언트(선 아래만, 페이드아웃). 꼭짓점 마커는 끝점·강조점만 작은 발광 원. 곡선 보간 금지(직선 세그먼트).
- **막대 차트:** 평면 채움(그라디언트 금지), 주계열 `#3DF5E0`·강조 1개 외 나머지는 `#2A2D35` 위 `#3A3D45`(어두운 중립). 막대 상단에 1px 네온 시안 글로우 엣지. 막대 폭 : 간격 = 3 : 2, 모서리 반경 2px.
- **데이터 잉크 최소화:** 차트 테두리 박스 제거, 배경 채움 제거, 범례 박스 제거(계열 4개 이상일 때만). 격자선은 `#2A2D35` 0.75pt 헤어라인 가로선 1~2개만(발광 없음 — 격자는 어둡게 가라앉힌다).
- **축:** x축 베이스라인만 `#2A2D35` 0.75pt. y축선 생략. **막대 기준선 0에서 시작**(잘린 y축 금지).
- **값/축 레이블 = 모노:** 값 레이블은 막대 끝/꼭짓점에 직접, `JetBrains Mono` 13pt, 색은 계열색(`#3DF5E0`/`#9D7BFF`). 축·카테고리 라벨도 `JetBrains Mono` 11pt `#8A8F9A`. 직접 레이블링 — 계열명을 선 끝에 모노로.
- **KPI 카드:** 코드 블록형 표면(`#16181D`) + 1px 네온 보더, 안에 44pt 시안 KPI 숫자 + 글로우, 위에 모노 키커(`// METRIC`).

## 다이어그램·컴포넌트 (다크 테크 — 발광 노드 + 모노 라벨 키트)
색만으로는 템플릿이 아니다. 아래 컴포넌트를 모두 SVG로 정밀 렌더하며(div 블록 금지), **하나의 다이어그램 언어**를 공유한다 — 노드는 코드 블록형 표면(`#16181D`, 모서리 4px) + 1px 보더, 활성/강조 노드만 1px 네온 시안 보더 + `0 0 8px` 글로우, 커넥터는 1.5pt 직선 세그먼트(곡선 금지) + 가늘고 날카로운 화살촉, 모든 번호·라벨은 `JetBrains Mono`(`// 01`, `[STEP]` 식), 강조색은 시안/바이올렛 2색만.
- **프로세스 플로우:** 코드 블록 노드(높이 0.8in, `#16181D` 채움 + 1px `#2A2D35` 보더, 4px 모서리), 노드 좌상단에 모노 단계 번호(`// 01` 13pt 시안), 노드 사이 1.5pt `#3DF5E0` 직선 커넥터 + 날카로운 화살촉(글로우 없음 — 라인은 가라앉힘). 활성 단계 노드만 1px 시안 보더 + `0 0 8px` 글로우. 가로 4~5단계.
- **타임라인:** 수평 0.75pt `#2A2D35` 축선, 마일스톤은 작은 발광 원(`#3DF5E0` 채움 + `0 0 6px` 글로우), 현재 시점은 바이올렛 `#9D7BFF` 발광 원 + 위에 모노 `[ NOW ]` 13pt 라벨. 날짜는 축 아래 `JetBrains Mono` 11pt `#8A8F9A`, 이벤트명 축 위 17pt `#E4E6EB`.
- **비교 레이아웃:** 2~3열, 각 열을 코드 블록 표면으로 분리(`#16181D` + 1px `#2A2D35`), 열 헤더는 모노 라벨(`[ OPTION A ]` 13pt 시안). 우세 열만 1px 시안 보더 + 글로우. 항목 행 사이 0.75pt `#2A2D35` 헤어라인. 우열은 시안(우세)·`#8A8F9A`(열세) 모노 글리프.
- **매트릭스 2×2:** 1px `#2A2D35` 십자 축(미세 격자 배경 위), 4축 끝에 모노 11pt `#8A8F9A` 라벨, 사분면 채움 없음. 데이터 포인트는 0.28in 발광 원(`#3DF5E0` 채움 + `0 0 8px`), 핵심 사분면(우상) 항목만 바이올렛 `#9D7BFF` 발광. 사분면 제목은 각 칸 모노 13pt 시안.
- **계층/퍼널:** 계층은 코드 블록 노드 + 1.5pt `#3DF5E0` 수직 직선 커넥터. 퍼널은 위→아래 폭 좁아지는 4단(4px 모서리), 각 단 `#16181D` 채움 + 상단 엣지에 1px 네온 시안 글로우(단계 깊을수록 글로우 강), 단 우측에 모노 단계명 + 시안 KPI 숫자 + 글로우.
- **KPI·스탯 카드:** 코드 블록 표면(`#16181D` + 1px `#2A2D35`, 4px 모서리), 강조 카드만 1px 네온 보더 + `0 0 12px` 글로우. 위에 모노 키커(`// METRIC` 13pt), 거대 수치 44pt Bold 시안 `#3DF5E0` + 글로우, 아래 증감은 시안(상승)·바이올렛(하락) 모노 13pt + 화살표. 카드 패딩 0.2in.
- **목차/섹션 디바이더:** 목차는 모노 번호(`// 01`~`// 06`) + 17pt 항목명 세로 배열, 항목 사이 0.75pt `#2A2D35` 헤어라인. 디바이더는 차콜 + 격자 배경 + 거대 모노 섹션 번호(`02` 120pt `#2A2D35` 워터마크) + 38pt 흰 섹션명 + 시안 발광 라인. 인용 슬라이드는 좌측 1px 시안 발광 보더 + 28pt 흰 풀쿼트 + 모노 출처 라벨.

## 전환 (PPT)
0.15s 스냅 컷 또는 미세 글리치 느낌의 빠른 페이드. 부드러운 디졸브 지양.

## 하지 말 것
- 밝은 배경 — 배경은 반드시 차콜 다크.
- 강조색 3개 이상 — 시안·바이올렛 2개만.
- 부드러운 확산 그림자 — 깊이는 네온 글로우로.
- 둥근 큰 모서리(8px 초과), 파스텔 색, 그라디언트 배경.
- 이모지·클립아트·스톡 아이콘.
- 모노 라벨 없이 일반 산세리프로만 라벨링 — 메타 라벨·차트 수치 라벨은 모노 필수.
- **아마추어 차트 회귀 금지:** 3D·입체 차트, 부드러운 확산 그림자(깊이는 네온 글로우로), 무지개·계열별 색칠(시안·바이올렛 2색만), 막대 그라디언트 채움, 격자선 과다·격자선 발광, 차트 테두리 박스, 잘린 y축. 차트 수치 라벨을 일반 산세리프로 쓰기.

## 적용 예
- **표지:** 차콜 배경 + 격자 라인, 중앙 좌측에 38pt 흰 헤드라인, 그 위 모노 키커 `// 2026`. 우하단에 시안 발광 라인 장식.
- **본문 슬라이드:** 좌측 큰 코드 블록 표면에 본문, 우측 작은 모노 메타 리스트. 강조 영역만 네온 보더.
- **차트 슬라이드:** 차콜 배경에 SVG 네온 시안 발광 라인 차트(2pt 선 + `0 0 8px` 글로우, 선 아래 10% 알파 페이드), 값 레이블은 꼭짓점에 `JetBrains Mono` 13pt 시안, x축 `#2A2D35` 헤어라인·가로 격자선 1~2개·0 기준선. 우측에 코드 블록 KPI 카드 — 44pt 시안 숫자 + 글로우 + 모노 키커.
- **프로세스 슬라이드:** 차콜 배경 + 격자, 가로 4단계 코드 블록 노드(각 좌상단 모노 `// 01`), 노드 사이 1.5pt 시안 직선 커넥터 + 날카로운 화살촉. 활성 단계만 1px 시안 보더 + 글로우.
- **매트릭스 슬라이드:** 차콜 배경에 1px `#2A2D35` 2×2 십자 축, 4축 모노 라벨, 데이터 항목은 0.28in 시안 발광 원(우상 사분면 항목만 바이올렛). 우측에 코드 블록 메타 리스트로 사분면 해석.
- **KPI 슬라이드:** 차콜 배경에 코드 블록 KPI 카드 3개 가로 — 각 모노 키커 + 44pt 시안 발광 숫자 + 시안/바이올렛 증감 모노 라벨, 강조 카드만 네온 보더 + 글로우.