# studio — 슬라이드 만들기 지시서 (채팅 AI용)

> 이 파일은 **ChatGPT·Claude·Gemini 같은 채팅 AI**에게 통째로 주면, 이 디자인(`studio`)으로 수업 슬라이드를 만들어 주도록 쓴 지시서입니다.
> 파일을 읽고 쓸 수 있는 에이전트 AI(Claude Code 등)를 쓴다면 갤러리의 **받기 .zip**을 쓰세요.

## 사용법 (사람이 읽는 안내)

1. 채팅 AI 대화창에 **이 파일을 첨부**합니다. 첨부가 안 되면 파일 내용을 **전부 복사해 붙여 넣습니다**(끝까지 빠짐없이).
2. 이어서 만들고 싶은 수업을 말합니다(**"결과는 .html 파일로 만들어 줘"**도 같이 말하면 좋습니다). 예) "6학년 2학기 과학 1단원 3~4차시, 학습 목표는 ○○○, 00초등학교, 슬라이드로 만들어 줘(장 수와 구성은 내용에 맞게 정해 줘)."
3. AI가 먼저 **장별 구성안**(장마다 제목·내용·쓸 부품)을 보여 줍니다. 마음에 들면 "좋아, 만들어 줘", 고칠 곳이 있으면 "3장은 빼고 퀴즈를 하나 더 넣어 줘"처럼 말합니다. 구성 확인 없이 바로 받고 싶으면 2번에서 "구성 확인 없이 바로 만들어 줘"라고 하세요.
4. AI가 **슬라이드.html 파일**을 만들어 줍니다. 내려받아 더블클릭하면 브라우저에서 열립니다. 방향키(→ ←)와 스페이스로 넘깁니다. 만약 파일 대신 **코드만 글로 보여 주면** "코드 말고 .html 파일로 만들어서 내려받게 해 줘"라고 다시 요청하세요. 그래도 안 되면 코드를 모두 복사해 메모장에 붙여 넣고 `슬라이드.html`로 저장합니다(파일 형식은 '모든 파일', 인코딩은 UTF-8).
5. 고치고 싶으면 AI에게 "2장 제목을 ○○로 바꿔 줘"처럼 말하면 됩니다. 중간에 코드가 끊기면 "끊긴 곳부터 이어서 출력해 줘"라고 하세요.

서비스별 팁 (메뉴 이름은 서비스마다 바뀔 수 있습니다)
- 공통: 고를 수 있다면 **생각하는(추론) 모드**나 상위 모델을 쓰세요. 긴 코드를 끝까지 정확하게 쓰는 데 차이가 큽니다.
- ChatGPT: "캔버스로 만들어 줘" 또는 "다운로드할 수 있는 .html 파일로 만들어 줘"라고 요청합니다.
- Gemini: 입력창의 **Canvas**를 켜고 요청하면 화면에서 바로 보고 내려받을 수 있습니다.
- Claude: 결과가 **아티팩트**(오른쪽 창)로 열리면 거기서 내려받습니다.
- AI가 그림 파일(이미지)을 따로 만들어 주더라도 슬라이드에는 들어가지 않습니다. 슬라이드는 .html 파일입니다.
- **AI 화면 안의 미리보기에서는 색·모양·버튼이 안 나올 수 있습니다.** 이 디자인의 공통 모양과 동작은 슬라이드를 열 때 인터넷(`https://k-slide.web.app`)에서 불러오는데, 일부 서비스의 미리보기 창은 바깥 파일을 막기 때문입니다. **내려받아 브라우저(크롬·엣지 등)로 열면 정상**으로 보입니다.

알아 둘 점
- 이 디자인의 한글 글씨체는 제목 Cafe24 Ohsquare v2.0(400) · 본문 Noto Sans KR Regular(400)입니다. 글씨체와 공통 모양·동작은 **인터넷에서 불러오므로 슬라이드를 열 때 인터넷이 필요**합니다(영문 글꼴도 마찬가지). 인터넷 없이 발표하려면 갤러리의 **받기 .zip**(모든 것이 파일 안에 들어 있음)을 쓰세요.
- AI가 긴 코드를 일부 생략하거나 어긋나게 쓸 수 있습니다. 열어서 한 번 확인하세요. 안 열리거나 깨지면 "코드가 생략되었어. 완성된 HTML 하나로 처음부터 끝까지 다시 출력해 줘"라고 요청합니다.
- 사진·학생 이름 같은 개인정보는 AI에게 넣지 마세요.

## 라이선스

폰트 라이선스 안내
==================

- Cafe24 Ohsquare v2.0: Cafe24 Ohsquare — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright (c) 2020by Cafe24. All rights reserved.
  파일: Cafe24Ohsquare-v2.0.ttf
- Noto Sans KR Regular: Noto Sans KR — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: (c) 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'.
  파일: NotoSansKR-Regular.ttf

SIL Open Font License 1.1 요약
- 폰트를 자유롭게 사용·복제·수정·재배포할 수 있습니다(폰트 파일 단독 판매는 불가).
- 수정본(글자를 줄인 서브셋 포함)은 원래 폰트의 '예약 이름'을 쓰지 못할 수 있습니다.
- 재배포할 때는 저작권 표시와 라이선스 문구를 함께 넣어야 합니다.
- 전문: https://openfontlicense.org

학교안심 글꼴과 easy3D 폴더의 글꼴은 사용자가 OFL로 확인한 내용을 따랐습니다. 배포 전에 각 배포처에서 최신 라이선스를 다시 확인하세요.

design.md 라이선스 (MIT)
=======================
design.md는 frontend-slides(https://github.com/zarazhangrui/frontend-slides)의 템플릿을 바탕으로 한 것이며, 아래 MIT 라이선스를 따릅니다.

MIT License

Copyright (c) 2025 Zara Zhang

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

# ▼▼▼ 여기부터 AI에게 주는 지시서 ▼▼▼

(이 줄 위의 '사용법'과 '라이선스'는 사람을 위한 안내입니다. AI는 아래 지시서를 따르세요.)

## 0. 당신(AI)의 일

당신은 슬라이드 제작 도우미입니다. 사용자가 알려 주는 수업 내용으로, 아래 **디자인 규칙(1)**, **부품 사전(3)**, **HTML 뼈대(4)**를 지켜 **브라우저에서 바로 열리는 슬라이드 HTML 파일 하나**를 만듭니다.
이 디자인의 공통 CSS(글씨체·색·부품 모양)와 동작 엔진은 사이트에 올려 둔 파일이라, 뼈대의 `<link>`·`<script src>` 두 줄이 불러옵니다. **당신이 쓰는 것은 슬라이드 HTML(`<section class="slide">`들과 내비)과, 꼭 필요할 때만 '추가 부품' CSS뿐입니다.** 공통 CSS의 내용은 참고용으로 5에 있습니다.

### 진행 순서
1. 사용자가 아직 수업 내용을 말하지 않았다면, 먼저 아래를 짧게 물어보세요: 학교급·학년·과목, 단원과 차시, 학습 목표, 학교 이름(선택), 원하는 장 수(말하지 않으면 내용 분량에 맞게 정함).
2. **장별 구성안을 먼저 보여 주고 확인을 받습니다**(아래 '구성은 내용이 정합니다'). 이때는 코드를 쓰지 마세요.
3. 확인을 받으면 HTML을 만들고, 내보내기 전에 아래 '내보내기 전 점검'을 하나씩 확인합니다.
- 내용은 사용자가 준 것만 쓰고, **숫자·사실·출처를 지어내지 마세요.** 모르면 묻거나 "(예시)"라고 표시하세요.
- **사용자가 주지 않은 사실(연도·기록·수치·등재·'세계 최고'·'가장 ○○하다' 같은 말)을 덧붙이고 싶으면, 구성안에 '추가 사실'로 따로 적어 확인을 받으세요.** 확인받지 않은 사실은 슬라이드에 넣지 않습니다. 널리 알려진 이야기라도 정확한 대상을 쓰세요(예: 유네스코 세계기록유산에 오른 것은 '한글'이 아니라 《훈민정음》 해례본이라는 책).

### 반드시 지킬 것
1. **디자인 규칙(1)을 어기지 마세요.** 색·글꼴·배치·장식·움직임 규칙과 '하지 말 것'을 그대로 따릅니다. 규칙에 없는 효과(임의의 애니메이션, 새 색, 새 장식)를 더하지 마세요.
2. **뼈대(4)의 공통 파일 두 줄을 그대로 두세요.** `<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/studio.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/studio.js"></script>`(body 맨 끝)는 주소 한 글자도 바꾸거나 지우지 마세요. **공통 CSS(5)나 엔진을 HTML 안에 옮겨 쓰거나, 줄이거나, 비슷하게 새로 짜지 마세요**(이미 불러오므로 같은 규칙을 또 쓰면 서로 부딪혀 깨집니다). `<style>`에는 '추가 부품' 줄과 그 아래에 직접 정의한 클래스만 둡니다. 엔진이 쓰는 속성 이름(`data-steps`, `data-s`, `data-quiz`, `data-opt`, `data-act`, `data-blank` 등)은 5의 엔진 사용법대로 씁니다.
3. **클래스는 부품 사전(3)과 공통 CSS(5)에 있는 것만 쓰세요.** 없는 클래스 이름을 지어 쓰면 아무 모양도 적용되지 않아 배치가 무너집니다(창이 좁아지고 빈 공간이 생김). 새 부품이 꼭 필요하면 `<style>`의 '추가 부품' 주석 줄 **아래에** 그 클래스를 직접 정의하세요(디자인 규칙의 색·선·글꼴만 사용). 모양을 `style="…"`로 하나하나 지정하는 것보다 부품 클래스를 쓰는 쪽이 낫습니다.
   - **새 배치를 만들기 전에, 예시 장의 배치 클래스로 할 수 있는지 먼저 보세요.** 직접 만든 배치는 화면을 볼 수 없는 상태에서 쓰기 때문에 깨질 위험이 큽니다. 예시 배치로 안 될 때만 새로 정의합니다.
4. **슬라이드의 장 수·순서·내용은 사용자 수업에 맞게 새로 구성하세요.** 뼈대의 슬라이드는 '계절의 변화' 예시이므로 그 문구는 하나도 남기지 마세요. 장을 늘리거나 줄이거나 순서를 바꾸면 **내비 점 개수와 쪽 표시(예: 01 / 06)를 실제 장 수에 맞추세요.** 뼈대의 6번째 장은 이 디자인의 대표 장치를 눌러 보여 주는 안내 장이므로, 그 부품·움직임(예: data-demo 시연 버튼과 .play 상태)만 참고하고 디자인 안내 문구는 남기지 마세요. 아래 '구성은 내용이 정합니다'를 따르세요.
5. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Cafe24 Ohsquare v2.0(400) · 본문 Noto Sans KR Regular(400))는 공통 CSS가 불러옵니다. `@font-face`를 새로 쓰지 말고, 글꼴은 `var(--kt)`(제목)·`var(--kb)`(본문)·`var(--ka)`(포인트) 변수로만 지정하세요.
6. **글자 크기와 화면 채우기** (슬라이드는 1920×1080 기준으로 그려져 화면 크기에 맞게 통째로 줄어듭니다)
   - 읽어야 하는 글(본문·설명·표 내용·보기)은 **28px 이상**, 보조 글(캡션·주석)은 **22px 이상**으로 씁니다. 창 제목줄·쪽 번호·작은 라벨 같은 장식 글자는 디자인 규칙의 크기를 따릅니다.
   - 창·판·카드가 **화면의 대부분을 채우게** 하세요. 한쪽에 작게 몰리거나 큰 빈 공간이 남으면 안 됩니다. 내용이 적은 장은 글자와 그림을 키우거나 다른 장과 합칩니다.
   - **높이 예산**: 장 제목과 아래 내비를 빼면 본문에 쓸 수 있는 높이는 대략 **650~750px**입니다. 모든 내용이 1920×1080 안에 들어가야 하고, 넘친 부분은 잘려서 보이지 않습니다. 쓰기 전에 줄 수 × 줄 높이(글자 크기의 약 1.5배)로 높이를 어림해 보세요.
   - **카드 규칙**: 한 장에 카드(칸)를 4개 이상 놓으면 카드마다 글은 **3줄 이하**로 줄입니다. 글이 들어가는 칸은 **너비 400px 이상**으로 두고(그림+글을 나란히 놓을 때는 글 칸 기준), 한 줄에 몇 글자밖에 안 들어가게 좁히지 마세요. 카드를 두 줄로 쌓아야 하면 그 줄들의 높이 합이 높이 예산 안에 드는지 확인합니다.
   - 제목은 **두 줄 이내**로 씁니다. 표지 제목은 한 줄에 15자 안팎으로 끊어 줄을 바꾸세요. 글이 창 밖으로 넘치거나 잘리면 글자를 줄이지 말고 문장을 짧게 고칩니다.
   - 한글은 단어 중간에서 줄이 바뀌지 않게(`word-break:keep-all`) 합니다(공통 CSS에 이미 들어 있음).
7. 저작권이 있는 글·그림·사진을 가져오지 마세요. **사용자가 요청하지 않으면 그림 파일(이미지 생성)을 따로 만들지 마세요. 슬라이드에 필요한 그림은 HTML 안에서 SVG·CSS로 그립니다.**

### 구성은 내용이 정합니다
- 예시 덱(deck.html)은 이 디자인의 **부품 견본**입니다. 따라야 할 장 구성이 아닙니다. 예시의 장 순서·장 수·제목 짜임·문장 구조를 그대로 따라 하지 마세요.
- 사용자가 준 내용을 먼저 살펴 **필요한 장 수와 장별 역할을 직접 정하세요.** 내용이 적으면 3~4장, 많으면 8장 이상도 괜찮습니다.
- **코드를 쓰기 전에 장별 구성안(장마다 제목 · 전할 내용 한 줄 · 쓸 부품)을 먼저 보여 주고 확인을 받으세요.** 사용자가 고치라고 하면 고친 구성안을 다시 보여 주고, "좋아", "만들어 줘"라고 하면 그때 만듭니다. 사용자가 처음부터 "구성 확인 없이 바로 만들어 줘"라고 했으면 이 단계는 건너뜁니다.
- 아래 부품 중 **필요한 것만 골라 쓰세요.** 안 쓰는 부품이 있어도 되고(예: 퀴즈 없는 덱), 같은 부품을 여러 장에 쓰거나 한 장에 섞어 써도 됩니다.
  · 표지 · 단계 버튼이 있는 흐름(data-steps) · 큰 숫자와 통계 · 그래프 · 비교와 표 · 목록과 인용 · 퀴즈와 다시 풀기 · 빈칸 채우기 · 시연 버튼(data-demo)
- 장마다 전하는 메시지는 하나로 하고, 같은 모양의 장이 연달아 나오지 않게 하세요.
- 지켜야 하는 것은 디자인 규칙(design.md)과 동작 엔진입니다. 자유로운 것은 장의 수·순서·구성입니다.

### 출력 방식
- **결과물은 '.html 파일'로 주세요.** 파일 이름은 슬라이드.html, 형식은 UTF-8 HTML 문서 하나입니다. 파일을 만들거나 내려받게 해 주는 기능(아티팩트·캔버스·코드 실행 환경·파일 첨부 등)이 있으면 **반드시 그 기능으로 .html 파일을 만들어 내려받거나 열 수 있게** 하세요. 코드만 글로 보여 주고 끝내지 마세요.
- 파일을 만들 수 있는 기능이 **전혀 없을 때만**, 설명은 한두 줄로 줄이고 **완성된 HTML 전체를 ```html 코드 블록 하나**로 출력하세요(이때 사용자가 직접 .html로 저장합니다).
- **`...`, "(이하 동일)", "(생략)" 같은 생략 표시를 쓰지 마세요.** `<!DOCTYPE html>`부터 `</html>`까지 전부 씁니다.
- 너무 길어 끊길 것 같으면 먼저 쓰지 말고, 사용자에게 "장 수를 줄일까요?"라고 묻거나, 끊기면 사용자가 "이어서"라고 할 때 **끊긴 글자 바로 다음부터** 이어 쓰세요.
- **미리보기 창에서 색·모양·버튼이 안 보여도 고치지 마세요.** 공통 CSS·엔진은 인터넷 주소(`https://k-slide.web.app`)에서 불러오는데, 일부 미리보기 창은 바깥 파일을 막습니다. 내려받아 브라우저로 열면 정상입니다. 이때 공통 CSS나 엔진을 HTML 안에 직접 써 넣으면 안 됩니다. 사용자에게 "내려받아 브라우저로 열어 보세요"라고 안내하세요.
- 파일을 코드(파이썬 등)로 써서 만든다면, HTML 전체를 **원문 그대로의 문자열**로 쓰세요(예: 파이썬은 따옴표 세 개짜리 raw 문자열). 백슬래시(`\`)가 다른 문자로 바뀌어 깨지는 일을 막기 위해서입니다. 새로 쓰는 CSS·JS에서도 `\00a0` 같은 이스케이프 대신 실제 문자를 쓰세요.
- 파일로 줬다면 "슬라이드.html을 내려받아 더블클릭하세요(열 때 인터넷 필요)"라고, 코드 블록으로 줬다면 "코드를 모두 복사해 메모장에 붙여 넣고 슬라이드.html로 저장한 뒤 더블클릭하세요(열 때 인터넷 필요)"라고 한 줄로 안내하세요.

### 내보내기 전 점검 (하나라도 아니면 고친 뒤 내보내기)
1. HTML에 쓴 클래스가 모두 부품 사전(3)·공통 CSS(5)·'추가 부품' 칸에 정의되어 있는가?
2. 공통 파일 두 줄(`<link>`·`<script src>`)이 주소 그대로 있고, 공통 CSS·엔진을 HTML 안에 옮겨 쓰지 않았는가? `@font-face`를 새로 쓰지 않았는가?
3. 장 수 = 내비 점 개수 = 쪽 표시 숫자인가?
4. 모든 장의 내용이 1920×1080 안에 들어가는가(높이 예산, 카드 규칙)? 제목·글이 창 밖으로 넘치거나 잘리지 않는가(특히 표지 제목과 마지막 장)? 읽는 글이 28px 이상이고, 화면에 큰 빈 공간이 없는가?
5. '계절의 변화' 예시 문구나 디자인 안내 문구가 남아 있지 않은가?
6. 사용자가 주지 않았고 확인도 받지 않은 사실을 넣지 않았는가?
7. `...`·"(생략)" 같은 생략이 없고, `<!DOCTYPE html>`부터 `</html>`까지 다 있는가?
8. 사용자가 요청하지 않은 그림 파일을 따로 만들지 않았는가?

---

## 1. 디자인 규칙 (`studio` design.md)

````markdown
---
version: alpha
name: Studio
description: "A \"Boring Studios\" agency presentation system — type-as-graphic-mass in the spirit of contemporary design-studio decks (Pentagram, Anti, Order). The entire system runs on Barlow at weight 900 uppercase, with type so heavy at display scale that it stops being type and starts being a shape. The palette is binary plus one: near-black field (#1C1C1C), acid yellow type (#F5D200), and the same yellow as a full slide background. IBM Plex Mono carries every footer metadata, slide counter, and three-column lockup. No drop shadows, no rounded corners, no accent colors — the headline IS the design, and the only chromatic decision per slide is dark-yellow-on-near-black or near-black-on-acid-yellow."

colors:
  near-black: "#1C1C1C"
  near-black-alt: "#242422"
  acid-yellow: "#F5D200"
  acid-yellow-alt: "#F0CC00"
  text-on-dark-2: "rgba(245,210,0,0.58)"
  text-on-dark-3: "rgba(245,210,0,0.32)"
  text-on-light-2: "rgba(28,28,28,0.62)"
  text-on-light-3: "rgba(28,28,28,0.35)"
  border-dark: "#2E2E2C"
  border-light: "rgba(28,28,28,0.18)"

color-aliases:
  c-bg: near-black
  c-bg-alt: near-black-alt
  c-bg-light: acid-yellow
  c-bg-light-alt: acid-yellow-alt
  c-fg: acid-yellow
  c-fg-light: near-black
  c-accent: acid-yellow
  c-fg-2: text-on-dark-2
  c-fg-3: text-on-dark-3
  c-fg-light-2: text-on-light-2
  c-fg-light-3: text-on-light-3

typography:
  display:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: 12vw
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.02em
    textTransform: uppercase
  h1:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: 7.5vw
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: -0.02em
    textTransform: uppercase
  h2:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: 4.8vw
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.01em
    textTransform: uppercase
  h3:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: 2.8vw
    fontWeight: 700
    lineHeight: 1.1
    textTransform: uppercase
  quote-text:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: 3.8vw
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.02em
    textTransform: uppercase
  stat-value:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: 5.5vw
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.03em
    textTransform: uppercase
  lead:
    fontFamily: "Barlow, Noto Sans SC, system-ui, sans-serif"
    fontSize: 1.6vw
    fontWeight: 500
    lineHeight: 1.45
  body:
    fontFamily: "Barlow, Noto Sans SC, system-ui, sans-serif"
    fontSize: 1.15vw
    fontWeight: 400
    lineHeight: 1.6
  caption:
    fontFamily: "Barlow, Noto Sans SC, system-ui, sans-serif"
    fontSize: 0.85vw
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "IBM Plex Mono, monospace"
    fontSize: 0.72vw
    fontWeight: 500
    letterSpacing: 0.06em

spacing:
  pad-x: 5vw
  pad-y: 5vh
  gap-lg: 3.5vh
  gap-md: 2vh
  gap-sm: 1vh

canvas:
  width: 100vw
  height: 100vh

components:
  chrome-bar:
    borderBottom: "1px solid {colors.border-dark} (or {colors.border-light} on yellow)"
    paddingBottom: "{spacing.gap-sm}"
    marginBottom: "{spacing.gap-md}"
    description: "Top chrome bar — mono label left, mono counter right, hairline rule beneath."
  foot-bar:
    borderTop: "1px solid {colors.border-dark} (or {colors.border-light} on yellow)"
    paddingTop: "{spacing.gap-sm}"
    marginTop: "{spacing.gap-md}"
    description: "Bottom chrome bar — mirror of chrome-bar."
  cover-meta:
    display: "grid 1fr 1fr 1fr"
    borderTop: "1px solid rgba(245,210,0,0.25)"
    description: "Three-column mono metadata footer over the cover image: studio × client + date, presentation title (center), studio name (right). The signature 'Boring Studios' lockup."
  stat-card:
    borderTop: "2px solid (acid-yellow on dark, near-black on yellow)"
    padding: "{spacing.gap-md} {spacing.gap-md} {spacing.gap-md} 0"
    description: "Stat tile with a 2px top rule. Value at 5.5vw weight 900 in the surface's foreground color; label and mono note beneath."
  bullet-marker:
    content: "—"
    color: "acid-yellow on dark, near-black on yellow"
    fontFamily: "{typography.body.fontFamily}"
    description: "Em-dash bullet prefix on every list item; color follows the surface accent."
  compare-divider:
    borderRight: "2px solid (near-black on yellow, dark-text-3 on dark)"
    description: "Single vertical 2px rule separating two compare panels."
  bar-fill-default:
    background: "muted text-on-surface (dark-text-3 or light-text-3)"
    description: "Default chart bar fill — muted version of the surface text color."
  bar-fill-accent:
    background: "acid-yellow on dark, near-black on yellow"
    description: "Highlighted chart bar — the surface's primary foreground color."
  chart-baseline:
    height: "2px"
    background: "muted accent (dark-text-3 or border-light)"
    description: "Heavier 2px baseline beneath chart bars — Studio uses thicker rules than Signal."
  cover-img-area:
    position: "absolute inset 0"
    background: "{colors.near-black-alt}"
    description: "Cover image placeholder filling the entire slide behind the cover-type and cover-meta. Image-or-placeholder occupies the whole canvas; type sits on top."
  img-placeholder:
    background: "near-black-alt on dark, acid-yellow-alt on yellow"
    description: "Warm-toned rectangular placeholder for images, centered mono label inside, no border on dark / hairline border on yellow."
---

## Frontend Slides Fixed-Stage Policy

When this design system is used by the `frontend-slides` skill, generate the final deck as a **fixed 1920×1080 stage** that scales uniformly to the browser viewport. The deck should preserve a 16:9 slide canvas on every screen, including phones; it may letterbox or pillarbox, but it should not reflow slide content for mobile.

This policy has higher priority than any source-template responsive behavior described later in this file. If a later section says the original template is viewport-fluid, treat that as source history only, not as the target generation model for `frontend-slides`.

This policy applies even if the source template was originally implemented with viewport-fluid CSS such as `100vw`, `100vh`, `vw`, `vh`, or `clamp()`. Treat those values as design proportions to translate into 1920×1080 stage coordinates, not as live responsive rules in the generated deck.

Use `deck-stage.js` or an equivalent inline stage scaler for final output: render each slide at 1920×1080, scale the whole stage with one transform, and verify rendered screenshots for both text overflow and panel overlap.


## Overview

Studio is a **type-as-graphic-mass** presentation system — the visual register of contemporary design-studio decks (Pentagram, Anti, Order, "Boring Studios" agency aesthetic). The premise is reductive to the point of severity: a single typeface (Barlow), at a single weight (900), in strict uppercase, at scales so large that type stops behaving like type and starts behaving like a graphic shape. The headline IS the design — there are no decorative elements, no accent colors, no ornaments. If you removed every other element from a Studio slide and left only the headline, the slide would still read as Studio.

The palette is **binary plus one**. The dark surface is `{colors.near-black}` (#1C1C1C) — a warm dark, not cold neutral. The light surface is `{colors.acid-yellow}` (#F5D200) — a saturated cadmium yellow that fills the entire slide, not as an accent but as the environment. On dark slides, text is `{colors.acid-yellow}`. On yellow slides, text is `{colors.near-black}`. That's the entire color system: dark/yellow, yellow/dark. There are no secondary colors, no grays, no warming accents. Even muted text is just the same color at reduced opacity (yellow at 58%, near-black at 62%).

The typeface stack is **functional rather than expressive**. Barlow at weight 900 carries every headline at every scale — from 1.15vw body all the way up to 12vw cover display. Barlow at 500 carries body and lead paragraphs. IBM Plex Mono carries the metadata footer, slide counter, and three-column cover lockup — and is the only point in the system where a second face appears. Mono is the system's "spec sheet" voice; everywhere else, Barlow dominates.

Depth is **flat and severe**. No drop shadows. No rounded corners. No gradients. Borders are 1px or 2px hairlines in `{colors.border-dark}` or `{colors.border-light}`. The 2px chart baseline and 2px stat-card top-rule are the heaviest lines in the system. The system reads as an architectural drawing or a manifesto poster — every line is intentional, nothing decorative.

**Density philosophy: low and deliberate.** Studio is sparse by design. A statement slide is one headline filling most of the canvas with empty surface above and below. A chapter slide is a small mono label and a headline. A cover is an image placeholder behind a single word at 12vw. Padding runs tighter than Signal (5vw / 5vh vs 7.5vw / 5.5vh) because the type itself runs nearly to the edge — the heading is the spatial fill, not the margin. A slide that feels broken in Studio is one that contains multiple competing elements or fills its canvas with body paragraphs. The correct register is "one massive thing, said once, in 900 weight uppercase."

**Key Characteristics:**
- Binary palette — `{colors.near-black}` field with `{colors.acid-yellow}` type, or `{colors.acid-yellow}` field with `{colors.near-black}` type. No third color.
- Barlow at weight 900 uppercase for every headline at every scale; Barlow 400/500 for body; IBM Plex Mono only for metadata chrome.
- Headlines run massive — cover display at 12vw (~230px at 1920px viewport), statements at 7.5vw, section headers at 4.8vw.
- Tight negative letter-spacing on all display type (-0.01 to -0.03em); uppercase non-negotiable.
- Flat: no drop shadows, no rounded corners, no gradients, no accent colors beyond the yellow/dark binary.
- Hairline 1px borders on chrome; 2px on stat-card tops, chart baselines, and compare panel dividers.
- Three-column mono metadata footer on the cover slide is the system's signature lockup (studio × client / presentation title / studio name).
- Em-dash bullet markers in the surface accent color (yellow on dark, near-black on yellow).
- Body and chrome opacity-tuned versions of the same color (yellow at 58%/32%, near-black at 62%/35%) — never a separate grey color.

## Colors

### Palette

- **Near-Black** (`{colors.near-black}` — #1C1C1C): The dark surface. A warm dark, slightly biased toward brown rather than cold neutral. The "ink" of the system.
- **Near-Black Alt** (`{colors.near-black-alt}` — #242422): A barely-lifted near-black for image placeholders and secondary dark surfaces. Visually nearly identical to near-black.
- **Acid Yellow** (`{colors.acid-yellow}` — #F5D200): The light surface AND the primary text color on dark surfaces. Cadmium yellow, saturated and slightly warm. On dark slides, this is the type color. On light slides, this is the background. Same color, two roles.
- **Acid Yellow Alt** (`{colors.acid-yellow-alt}` — #F0CC00): A slightly cooler yellow for adjacent-surface differentiation on light slides. Used sparingly.
- **Text on Dark 2** (`{colors.text-on-dark-2}` — rgba(245,210,0,0.58)): Secondary text on dark — yellow at 58% opacity. The system never uses a separate "grey" color; muting is opacity only.
- **Text on Dark 3** (`{colors.text-on-dark-3}` — rgba(245,210,0,0.32)): Tertiary text on dark — yellow at 32%.
- **Text on Light 2** (`{colors.text-on-light-2}` — rgba(28,28,28,0.62)): Secondary text on yellow — near-black at 62%.
- **Text on Light 3** (`{colors.text-on-light-3}` — rgba(28,28,28,0.35)): Tertiary text on yellow — near-black at 35%.
- **Border Dark** (`{colors.border-dark}` — #2E2E2C): Hairline border color on dark surfaces. Slightly lifted from near-black so it reads as a line, not a void.
- **Border Light** (`{colors.border-light}` — rgba(28,28,28,0.18)): Hairline border color on yellow surfaces. Low-opacity near-black for subtle separation.

### Defaults

- **Default surface**: alternate between `{colors.near-black}` (dark) and `{colors.acid-yellow}` (light) across the deck. Both surfaces are first-class. If unsure, reach for near-black for cover/quote/statement slides, acid-yellow for chapter and end slides.
- **Default primary text on dark**: `{colors.acid-yellow}`.
- **Default primary text on yellow**: `{colors.near-black}`.
- **Default secondary text on dark**: `{colors.text-on-dark-2}` (yellow at 58% opacity).
- **Default secondary text on yellow**: `{colors.text-on-light-2}` (near-black at 62%).
- **Default tertiary text** (mono captions, chart axis labels, stat notes): tier-3 opacity on the surface accent.
- **Default border on dark**: `{colors.border-dark}`.
- **Default border on yellow**: `{colors.border-light}`.
- **Default headline color**: surface accent — yellow on dark, near-black on yellow. Never any other color.
- **Default chart accent fill**: surface accent (yellow on dark, near-black on yellow). The "highlighted" bar is just the primary text color; "default" bars are tier-3 muted.

There are no semantic color roles. Yellow does not mean "warning"; near-black does not mean "primary." They are simply the two surfaces. Choice between them is rhythmic — alternate to vary the visual cadence, or run several dark slides in a row for a quiet section followed by a single yellow slide for a punctuation moment.

## Typography

### Font Family

Studio runs **two families** in strictly separated roles:

- **Barlow** (`{typography.display.fontFamily}`) — a contemporary grotesque with a wide weight axis. Carries every headline at every scale (display through h3), every numeral (stat-value), every quote, all body, and all lead paragraphs. The system uses weight 900 for all display and headline tokens; weight 700 for h3; weight 500 for lead and bullet markers; weight 400 for body and caption.
- **IBM Plex Mono** (`{typography.label.fontFamily}`) — a precision monospace. Used **only** for metadata labels — chrome bars, slide counters, chapter numbers, the three-column cover lockup, stat notes, mono captions inside cover-meta. Mono is the system's "metadata voice"; everywhere else, Barlow dominates.

The emotional split is binary: Barlow for content (loud, uppercase, dominant); IBM Plex Mono for spec-sheet metadata (small, precise, supportive). There is no third face.

Barlow weight 900 at display scale stops behaving like a typeface and starts behaving like a graphic shape — the letterforms are so heavy that counters (the holes inside letters) become structural negative space, and the headline reads as a black or yellow geometric block before it reads as words. This is the system's identity.

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display}` | 12vw | Barlow | 900 | Cover hero at maximum scale |
| `{typography.h1}` | 7.5vw | Barlow | 900 | Chapter title, full-slide statement headline |
| `{typography.stat-value}` | 5.5vw | Barlow | 900 | Statistical numeral inside a stat card |
| `{typography.h2}` | 4.8vw | Barlow | 900 | Primary slide headline |
| `{typography.quote-text}` | 3.8vw | Barlow | 900 | Pull-quote body (uppercase, no quote marks) |
| `{typography.h3}` | 2.8vw | Barlow | 700 | Sub-headline, panel title |
| `{typography.lead}` | 1.6vw | Barlow | 500 | Lead paragraph, intro sentence |
| `{typography.body}` | 1.15vw | Barlow | 400 | Default body paragraph, bullet body |
| `{typography.caption}` | 0.85vw | Barlow | 400 | Caption, source attribution |
| `{typography.label}` | 0.72vw | IBM Plex Mono | 500 | Mono chrome, slide counter, chapter number, stat note, cover-meta |

### Defaults

- **Default size for a primary section headline**: `{typography.h2}` (4.8vw).
- **Default size for a chapter or statement headline**: `{typography.h1}` (7.5vw).
- **Default size for a cover hero**: `{typography.display}` (12vw).
- **Default size for a paragraph body**: `{typography.body}` (1.15vw).
- **Default size for a lead sentence**: `{typography.lead}` (1.6vw).
- **Default size for any chrome label, counter, or mono caption**: `{typography.label}` (0.72vw).
- **Default size for a statistical numeral**: `{typography.stat-value}` (5.5vw) in the surface accent.
- **Default weight for any headline**: 900.
- **Default weight for any body element**: 400 (lead = 500).

When unsure between sizes, lean larger. Studio's identity depends on type running massive — a 4.8vw h2 reads as the system; a 2.8vw h3 used as a primary headline reads as a different system.

### Signature Treatments

These treatments are **non-optional whenever the corresponding element type is used**:

- **Every display, h1, h2, h3, quote-text, and stat-value is uppercase.** Sentence-case display type does not exist. Even h3 (2.8vw) at weight 700 runs uppercase.
- **Every display headline uses weight 900.** Display, h1, h2, quote-text, and stat-value are all weight 900 — no exceptions. Using weight 800 or 700 at display scale breaks the type-as-graphic-mass effect.
- **Every display element uses negative letter-spacing.** Display at –0.02em, h1 at –0.02em, h2 at –0.01em, stat-value at –0.03em. Display Barlow 900 without negative tracking reads as untreated; the negative tracking is what gives the type its compressed density.
- **All chrome, labels, counters, and metadata are IBM Plex Mono at 0.06em tracking.** No exceptions. Mono labels in Barlow break the metadata/content separation.
- **Headlines are always rendered in the surface accent color** — yellow on dark, near-black on yellow. Never a muted opacity, never a different color.
- **Body bullets use an em-dash in the surface accent color**, never a dot, never a different glyph. The em-dash carries surface-aware color (yellow on dark, near-black on yellow).
- **Stat cards have a 2px (not 1px) top rule** in the surface accent (or muted accent on the dark side). The 2px rule is heavier than chrome hairlines because stats are anchors.
- **The three-column cover-meta lockup uses IBM Plex Mono with column 1 left-aligned, column 2 centered, column 3 right-aligned.** This is the "Boring Studios" signature; the column structure is non-negotiable.

### Typography Principles

The face ladder is fixed: Barlow for everything except metadata; IBM Plex Mono for metadata only. Mono outside metadata roles, or Barlow inside metadata roles, breaks the typographic separation.

The weight ladder is fixed too: 900 / 700 / 500 / 400. Intermediate weights (600, 800) are not used. The four-tier weight system is the entire expressive register of the typography.

Line-height runs tight at display scale (0.9 on display, 0.92 on h1) and opens to 1.5–1.6 on body. Letter-spacing is uniformly negative on display (–0.01 to –0.03em), zero on body, positive 0.06em on mono labels.

Italic is not used. Underline is not used. There is no font-style variation in the system; emphasis is achieved purely by weight contrast (900 headline against 400 body).

## Layout

### Canvas System

Studio targets `100vw × 100vh` — full viewport. Each `.slide` flexes to fill the viewport exactly, and slides sit side-by-side in a horizontal strip that translates left/right on navigation. All sizes use viewport-relative units (`vw`, `vh`) so layout scales fluidly.

### Padding and Gap Scale

| Token | Value | Use |
|---|---|---|
| `{spacing.pad-x}` | 5vw | Horizontal slide padding |
| `{spacing.pad-y}` | 5vh | Vertical slide padding |
| `{spacing.gap-lg}` | 3.5vh | Between major content sections |
| `{spacing.gap-md}` | 2vh | Between related elements |
| `{spacing.gap-sm}` | 1vh | Between tightly coupled elements |

Statement and chapter slides increase bottom padding to 1.5× pad-y so the headline drops to the lower portion of the slide with deliberate empty space above. The cover slide uses zero outer padding because the image area fills the entire canvas.

### Chrome Frame

Standard slides carry a top chrome bar and a bottom foot bar:

- **Chrome bar** — left-aligned mono label, right-aligned mono counter, 1px hairline rule beneath. Padding-bottom is `{spacing.gap-sm}`, margin-bottom is `{spacing.gap-md}`.
- **Foot bar** — left-aligned mono label, right-aligned mono counter, 1px hairline rule above. Mirror of the chrome bar.

The cover, chapter, statement, quote, and end slides omit standard chrome — those layouts use either the cover-meta lockup (cover) or nothing (chapter, statement, quote, end).

### Cover Lockup

The cover slide is the system's signature layout:
- An image placeholder fills the entire canvas behind everything.
- A single display headline (typically one word at 12vw) sits in the top area as `cover-type`.
- A three-column mono metadata footer sits at the bottom — column 1 left ("studio × client" + date), column 2 center (presentation title), column 3 right (studio name) — separated from the image area by a 1px hairline in yellow at 25% opacity.

## Depth and Elevation

Studio is **flat by design**. There are no drop shadows. No rounded card elevation. No gradients. Every element sits flush with the surface.

Apparent depth comes from:
- **Surface contrast** — near-black against acid-yellow when both appear (compare panels, image placeholders).
- **Hairline separation** — 1px and 2px borders divide regions.
- **Heavy type** — display headlines at weight 900 create visual mass that reads as foreground against the flat surface.

The system is intentionally severe. If a layout requires elevation to read correctly, the layout is wrong for Studio — reduce content or reorganize so that the flat surface plus heavy type plus hairlines provide enough hierarchy.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 0 | Everything in the system |
| 50% (circle) | Nav dots and slide-counter UI only (not part of the slide content) |

Studio has **no rounded chrome**. Cards, panels, stat tiles, chart frames, image placeholders, compare panels — all strict rectangles with sharp corners. The only round shapes are the navigation dots and the underlying slide counter UI, which are deck-stage chrome, not slide content.

### Border Weights

- **1px solid** in `{colors.border-dark}` (on near-black) or `{colors.border-light}` (on yellow) — the universal hairline. Used on chrome bars, foot bars, cover-meta separator.
- **2px solid** in the surface accent (yellow on dark, near-black on yellow) — the heavier rule. Used on stat-card top rules, compare panel vertical dividers, chart baselines, chart bar-track left rules.
- **No dashed borders.** Every border in the system is solid.

### Decorative Element Types

**Display headline as graphic mass** — Barlow at weight 900 at display scale (4.8vw and above) sits as a black or yellow geometric block. The headline is the primary decorative element of every slide; there are no additional ornaments.

**Hairline rule** — a 1px solid line in the surface border color. Used to separate chrome from body, body from foot, and inside compare panels. The rule is the system's only structural divider.

**Heavy rule** — a 2px solid line in the surface accent (or muted accent). Used on stat-card tops, chart baselines, compare-panel vertical dividers. Heavier than the chrome hairline; reads as "anchor" rather than "separator."

**Stat card** — a flat region with a 2px top rule, a stat numeral (5.5vw Barlow 900) in the surface accent, a stat label (1.15vw Barlow 500), and an optional mono stat-note (0.85vw IBM Plex Mono at tier-3 opacity). Padding right and bottom; left padding is zero (the rule starts flush with the card's left edge).

**Cover-meta lockup** — the three-column mono footer at the bottom of the cover slide. Column 1: studio × client name on row 1, date on row 2. Column 2: presentation title (centered). Column 3: studio name (right-aligned). Separated from the cover-type by a 1px hairline in yellow at 25% opacity.

**Image placeholder** — a flat rectangle filled with `{colors.near-black-alt}` (on dark) or `{colors.acid-yellow-alt}` with a hairline border (on yellow), containing centered IBM Plex Mono text at tier-3 opacity. Used for image slots that haven't been filled.

**Chart bar** — a flat vertical rectangle in muted text-on-surface color (default) or the surface accent (highlighted). No rounded ends, no gradient. The "hi" variant uses the full accent color and weight 900 on its numerical label.

**Chart baseline** — a 2px solid line in muted surface accent (yellow tier-3 on dark, border-light on yellow) running the full width of the chart wrapper, below the bar tops.

**Em-dash bullet** — `—` prefix on every list item in the surface accent color, with 0.5em right margin. Color flips with the surface.

## Do's and Don'ts

### Do

- Use Barlow at weight 900 uppercase for every headline at every scale, with negative letter-spacing of at least -0.01em. The type-as-graphic-mass effect is the system's identity.
- Alternate `{colors.near-black}` and `{colors.acid-yellow}` surfaces freely. Both are first-class; the rhythm of dark/yellow alternation is the system's pacing.
- Color every headline in the surface accent — yellow on dark, near-black on yellow. Never a muted version, never a third color.
- Use IBM Plex Mono only for metadata (chrome labels, slide counters, chapter numbers, cover-meta lockup, stat notes, mono captions). Mono is the spec-sheet voice; never use it for content.
- Render the cover-meta footer as a three-column mono lockup (left/center/right). This is the system's signature pattern.
- Mute secondary text with opacity (.58 on yellow, .62 on near-black), not with a separate grey color. The system has no greys — only opacity variants of yellow and near-black.
- Apply 2px rules to stat-card tops, chart baselines, and compare-panel dividers. The 2px weight differentiates "anchor" elements from chrome hairlines.
- Use em-dashes in the surface accent color as bullet markers — never dots, never circles.
- Pad slides tight (5vw / 5vh) so display type runs near the edge. Studio depends on type filling the canvas; generous padding breaks the scale effect.
- Leave statement and chapter slides deliberately sparse. One massive headline against empty surface is the correct register for those slide types.

### Don't

- Don't lowercase a headline. Every Barlow 900 element runs uppercase, no exceptions.
- Don't use weight 800 or 700 at display scale. Display = 900 weight, always.
- Don't add a third color to the palette. The system is binary plus opacity variants — adding red, blue, or any accent breaks the binary logic.
- Don't round any corner. Strict rectangles everywhere; only the nav dots are circles.
- Don't add drop shadows or gradients. The system is severely flat — depth comes from contrast and weight, not elevation.
- Don't use Barlow for chrome metadata. Mono is the metadata voice; chrome in Barlow reads as content rather than spec.
- Don't use Mono for headlines or body. Mono lives in the metadata role only.
- Don't add italic, underline, or color variants for emphasis. The only emphasis mechanism is weight contrast (900 vs 400).
- Don't introduce dashed borders. Every line in the system is solid.
- Don't fill more than ~60% of a typical slide with content. The empty surface is structural — Studio reads as broken when crowded.

## Responsive Behavior

Studio targets a 1920×1080 viewport and uses viewport-relative units (`vw`, `vh`) throughout, so layout scales fluidly between 1280×720 and 2560×1440 without breakpoints. There are no fixed pixel measurements except deck-chrome dots and the slide counter.

### Scaling Behavior

- Display headline scales: 12vw → ~230px at 1920px viewport, ~154px at 1280px.
- Body text scales: 1.15vw → ~22px at 1920px, ~15px at 1280px.
- Padding scales: pad-x 5vw → ~96px at 1920px, ~64px at 1280px.

The 2px and 1px border weights are fixed pixel sizes that do not scale; at large viewports, borders read proportionally finer.

### Presenter Behavior

The deck is JS-driven, with slides arranged side-by-side in a horizontal strip that translates left/right on navigation. The current slide carries `is-active`, which triggers any `[data-anim]` elements to animate in. Animations are sharper and shorter than Signal (0.5s duration vs 0.65s; 0.75s slide vs 0.85s) — "agency urgency, not editorial grace," per the source comment. Animation keyframes include fade-up, fade-in, reveal-right, reveal-left, scale-in with staggered `data-delay` (0–6).

Nav dots and a slide counter sit fixed at the bottom of the viewport — small white-on-dark UI that is intentionally subtle.

### Print Behavior

There is no embedded print stylesheet. The horizontal-strip layout would need to be unwound for static export.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin face (default) | Chinese face | Weight | Notes |
|---|---|---|---|---|
| Display / h1 / h2 / quote-text / stat-value | Barlow 900 uppercase | 思源宋体 / Noto Serif SC | 700 | Studio's defining "type-as-graphic-mass" effect depends on a single typeface at maximum weight. NSC 700 is the heaviest Song-style serif on CDN that holds visual mass at 12vw / 7.5vw / 4.8vw display sizes. |
| h3 | Barlow 700 uppercase | 思源宋体 / Noto Serif SC | 700 | Sub-headline weight matches. |
| Lead / Body / Caption | Barlow 500 / 400 | 思源宋体 / Noto Serif SC | 400 | Minimal editorial body — NSC 400 reads cleanly in the system's sparse layouts. |
| Metadata / chrome / label / stat-note | IBM Plex Mono 500 | IBM Plex Mono + Noto Sans Mono CJK fallback | 400–500 | Mono CJK is rarely needed (most metadata stays in Latin: dates, counters, studio names) but if Chinese appears in chrome, use Noto Sans Mono CJK SC. |

### Mixed-Content Strategy

This template uses **Strategy A**: replace the Latin face entirely with the CJK face for any element rendering Chinese characters. Studio's identity is type-as-graphic-mass — and Barlow 900 cannot render CJK glyphs (no glyph coverage). Mixing Barlow Latin with NSC CJK in the same line via stack fallback creates a metric mismatch at display scale that breaks the "single typeface, single weight" register. Replace the entire `font-family` with NSC for any Chinese-content element.

```css
font-family: 'Noto Serif SC', 'Barlow', sans-serif;  /* display / headlines — CJK first */
font-family: 'Noto Serif SC', 'Barlow', sans-serif;  /* body — CJK first */
font-family: 'IBM Plex Mono', 'Noto Sans Mono CJK SC', monospace;  /* mono — Latin first, CJK only if needed */
```

For pure-Chinese decks, the system's "uppercase" identity drops away (Chinese has no case), so Studio's character shifts from "industrial agency manifesto" toward "editorial Chinese newspaper headline." This is a real register change — Chinese Studio reads as serious and severe, but no longer reads as Pentagram/Anti. Accept this trade-off or scope Chinese to specific slides while keeping the cover and section dividers in Latin Barlow.

### Loading

Add to `<head>` (Google Fonts hosts Noto Serif SC and Noto Sans SC):

```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=Barlow:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
```

The Barlow stack in the original design.md already wires Noto Sans SC as the CJK fallback. We're upgrading to Noto Serif SC for headlines and body because the Song-style serif at 900 weight carries graphic mass equivalent to Barlow 900, where Noto Sans SC at the same weight reads as too smooth/round and loses the "graphic block" character. Keep Noto Sans SC available for body-only decks where the cleaner sans is preferred.

### Universal CJK Adjustments

Apply on any element rendering Chinese content (typically scope via `:lang(zh)` or `<span lang="zh">`):

- **Line-height**: body 1.75–1.85 (Studio's 1.5–1.6 Barlow-default is fine for Latin but tight for CJK strokes); display 1.15–1.25 (looser than Latin 0.9–0.95 because CJK glyphs at 12vw need vertical breathing).
- **Letter-spacing**: 0 on CJK. Studio's negative tracking (-0.01 to -0.03em) on display Latin is wrong for Chinese — CJK glyphs are pre-spaced; negative tracking causes glyphs to touch or overlap at display scale.
- **Text-transform**: no uppercase on CJK. Studio's `text-transform: uppercase` on display tokens is a no-op on Han characters, but ensure no parent rule attempts unexpected behavior. The "uppercase" identity of the system drops away in Chinese.
- **Full-width punctuation**: use `，。：；！？` (full-width) not `,.:;!?` (half-width). The full-width forms include their own surrounding whitespace and align to the CJK em-box.
- **No period on display headlines**: Chinese headlines drop the terminal `。` — Studio headlines never carry periods in Latin and the rule extends to CJK.
- **Pangu spacing (盘古之白)**: insert a thin space between CJK and adjacent Latin/numerals. Write `使用 Claude` not `使用Claude`; `2024 年` not `2024年`. Studio's mono metadata frequently sits beside Chinese labels — pangu spacing is essential there.
- **One font per sentence**: don't mix NSC and Noto Sans SC inside a single line. The serif/sans switch should happen at element boundaries.

### Aesthetic Notes for This System

Studio's binary palette (acid yellow on near-black, near-black on acid yellow) is perfectly preserved in CJK — no color decisions change. NSC 700 in `{colors.acid-yellow}` against the `{colors.near-black}` field at 12vw display size carries the same visual punch as Barlow 900 in the same role; the saturated yellow against the warm dark surface makes Chinese characters read with the same poster-like authority.

The "type-as-graphic-mass" effect is genuinely altered in CJK, but in an interesting way: where Barlow 900 uppercase blocks read as Western signage / industrial manifesto, NSC 700 at display scale reads as **Chinese woodblock or letterpress poster** — equally severe, equally graphic, but in a different cultural register. For Chinese-language audiences this reads as authoritative and well-designed; for mixed audiences it shifts the perceived tone slightly toward "editorial publication" and away from "design agency."

The em-dash bullet markers translate directly — keep `—` in the surface accent color. The three-column mono cover-meta lockup also translates without modification — write the studio × client / presentation title / studio name in either Chinese or Latin and the IBM Plex Mono renders both cleanly (with CJK falling back to Noto Sans Mono CJK SC if Chinese appears in the lockup).

Stat cards work well in CJK — the 5.5vw italic-style stat numeral can render in NSC 700 if the value is a Chinese numeral (`三百万`) or stay in Barlow if Arabic (`3M`). The 2px top rule and the stat-note (mono) are unaffected.

### Known CJK Gap

- The "uppercase + negative tracking + weight 900" formula that defines the system cannot be reproduced in CJK. Chinese gets weight 700 (the heaviest NSC weight), no case transformation, and zero tracking. The system loses ~30% of its Latin character in pure-Chinese mode.
- IBM Plex Mono is Latin-only at its full feature set. If Chinese characters appear in metadata (rare in Studio decks), they fall back to Noto Sans Mono CJK SC or system monospace, which may have visually different proportions than the Plex Mono around them.
- NSC 900 weight (which would better match Barlow 900) exists on Google Fonts but is heavy enough at large sizes that counter shapes start to close — at 12vw display, NSC 900 may render some characters as near-solid blocks. NSC 700 is the recommended ceiling; for extreme display moments, test NSC 900 case-by-case.
- The system's "alternate dark/yellow surfaces" rhythm is unaffected by CJK, but Chinese readers may parse the rhythm differently than Western readers (cultural reading conventions for color affect pacing perception).

## Iteration Guide

1. Any new headline uses Barlow weight 900 uppercase with negative letter-spacing. Without all three (weight, case, tracking), the type loses its graphic-mass character.
2. Any new slide alternates surface from the previous — generally don't run more than 2–3 dark slides in a row before a yellow break, or vice versa. Rhythm is part of the design.
3. Any new chrome, metadata, label, or counter uses IBM Plex Mono. Mono in any other role breaks the metadata separation.
4. Any new color introduces a third option to the binary palette — don't. Stick to yellow and near-black, with opacity variants for muting.
5. Any new bullet list uses em-dash markers in the surface accent. Dot bullets break the system.
6. Stat cards use the 2px top rule plus a 5.5vw weight 900 numeral. Smaller stats, sentence-case stats, or rounded stat tiles break the pattern.
7. Cover slides use the three-column mono lockup at the bottom. Don't omit it; it is the system's most identifiable pattern.
8. Chapter, statement, quote, and end slides are chromeless. Standard slides carry chrome and foot. Don't blend the two — a chromeless quote is correct; a chromed quote reads as a different system.
9. New layouts should aim for one dominant element (the headline) plus minimal supporting elements. Multi-element layouts (more than 4–5 distinct regions) crowd the design.
10. The 2px rule weight is reserved for anchors (stat-tops, baselines, compare dividers). Chrome and structural separators stay at 1px.

## Known Gaps

- The two font families (Barlow, IBM Plex Mono) load from Google Fonts. If fonts fail, fallbacks are Noto Sans SC / system-ui (for Barlow) and monospace (for IBM Plex Mono); the system degrades significantly without Barlow 900, since the type-as-graphic-mass effect depends on the specific letterforms.
- Chinese fallback (Noto Sans SC) is wired into the Barlow stack but ships with weights 400, 500, 700, 900 only — using h3 (700) and lead (500) in Chinese content renders cleanly; intermediate weights would fall back to closest available.
- The `--c-bg-alt`, `--c-bg-light-alt`, and several muted color tokens are defined but used sparingly — they exist as a reserve for adjacent-surface differentiation.
- The slide navigation JS is embedded inline; the system depends on it for the slide deck transform behavior and the `is-active` class management.
- The cover image placeholder uses a hardcoded `IMAGE PLACEHOLDER` label and a flat near-black-alt fill; real image insertion requires replacing the placeholder div with a background-image-styled element matching the parent canvas.
- The 5vw / 5vh padding is intentionally tight, which means at very small viewports headlines may approach the edge uncomfortably; the system is tuned for 16:9 displays at 1280px and above.
- The compare panel uses a 2px right border on the left panel only (no left border on the right), creating an asymmetry between the two panels — this is intentional but worth noting if extending the compare layout to 3-up.
````

---

## 2. 글씨체

- 이 디자인의 한글 글씨체: 제목 Cafe24 Ohsquare v2.0(400) · 본문 Noto Sans KR Regular(400). (쓰는 폰트: Cafe24 Ohsquare v2.0, Noto Sans KR Regular)
- 글씨체 파일은 공통 CSS(5)의 `@font-face`가 인터넷의 폰트 창고(`https://maker-ssam.github.io/korean-ofl-fonts/…`)에서 불러옵니다. 설치하지 않아도 되지만 열 때 인터넷이 필요합니다.
- 글씨체 규칙(굵기·크기·자간)은 1의 디자인 규칙을 따르고, 한글 폰트는 변수(`--kt` 제목, `--kb` 본문, `--ka` 포인트)로만 지정하세요.

---

## 3. 부품 사전 (이 디자인의 CSS에 정의된 클래스)

이 목록과 공통 CSS(5)에 있는 클래스만 쓰세요. '○장'은 아래 뼈대에서 그 클래스를 쓴 예시 장이고, '예'는 그 장의 실제 태그입니다. 장 구성은 따라 하지 말고, 필요한 부품을 골라 어느 장에서든 쓰면 됩니다. 클래스를 조합하는 방법(어떤 부품 안에 어떤 부품이 들어가는지)은 뼈대의 예시 장을 보고 따르세요.
- 여러 장에서 쓰인 클래스는 이 디자인의 공통 부품입니다(창·제목줄·버튼·표 등).
- 한 장에서만 쓰인 클래스 중 크기·위치를 정하는 것(이름에 번호가 붙은 창·격자 등)은 **그 예시 장 전용 배치**입니다. 같은 배치를 다시 쓸 때만 쓰고, 새 배치가 필요하면 비슷한 이름을 지어 쓰지 말고 '추가 부품' 칸에 직접 정의하세요.
- 예시 장의 측정기 그림(`g-…` 클래스)은 예시 주제 전용이라 이 목록에 없습니다. 새 주제의 그림은 SVG로 새로 그리세요.

**1장(표지)에서 처음 나오는 부품**
- `.c` — 1장 — 예: `<div class="c">`
- `.dark` — 1·3·5·6장 — 예: `<section class="slide dark">`
- `.dash` — 1·2·4·5·6장 — 예: `<span class="dash">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.gl` — 1장 — 예: `<p class="gl" data-anim="fade-in" data-delay="1">`
- `.img` — 1장 — 예: `<div class="img">`
- `.meta3` — 1장 — 예: `<div class="meta3" data-anim="fade-in" data-delay="3">`
- `.nr` — 1·2·3·4·5장 — 예: `<p class="nr top">`
- `.r` — 1장 — 예: `<div class="r">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide dark">`
- `.t1` — 1장 — 예: `<h1 class="t1" data-anim="fade-up" data-delay="1">`
- `.top` — 1장 — 예: `<p class="nr top">`
- `.unit` — 1장 — 예: `<p class="unit" data-anim="fade-up" data-delay="0">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.bl` — 2장 — 예: `<p class="bl" data-anim="fade-in" data-delay="3">`
- `.bt` — 2·5·6장 — 예: `<button class="bt go" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns" data-anim="fade-in" data-delay="6">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quo…`
- `.chrome` — 2·3·4·5·6장 — 예: `<div class="chrome" data-anim="fade-in" data-delay="0">`
- `.def` — 2장 — 예: `<p class="def" data-anim="fade-in" data-delay="2">`
- `.fig` — 2장 — 예: `<figure class="fig" data-anim="fade-in" data-delay="2">`
- `.foot` — 2·3·4·5·6장 — 예: `<div class="foot" data-anim="fade-in" data-delay="6">`
- `.go` — 2장 — 예: `<button class="bt go" data-act="step">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd" data-anim="fade-up" data-delay="1">`
- `.note` — 2·3장 — 예: `<span class="note">`
- `.st2` — 2장 — 예: `<div class="st2">`
- `.stat` — 2·3장 — 예: `<div class="stat" data-s="1" data-anim="fade-up" data-delay="3">`
- `.sv` — 2·3장 — 예: `<b class="sv">`
- `.yellow` — 2·4·6장 — 예: `<section class="slide yellow" data-steps="4">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.b` — 3장 — 예: `<i class="b" style="height:133px">`
- `.bv` — 3장 — 예: `<span class="bv">`
- `.chart` — 3장 — 예: `<div class="chart" data-anim="fade-in" data-delay="5">`
- `.clabel` — 3장 — 예: `<p class="clabel" data-anim="fade-in" data-delay="4">`
- `.col` — 3장 — 예: `<div class="col">`
- `.hi` — 3장 — 예: `<div class="col hi">`
- `.lb` — 3장 — 예: `<p class="lb">`
- `.rl` — 3장 — 예: `<div class="rl">`
- `.rn` — 3장 — 예: `<span class="rn">`
- `.row` — 3장 — 예: `<div class="row">`
- `.rows` — 3장 — 예: `<div class="rows" data-anim="fade-in" data-delay="6">`
- `.src` — 3장 — 예: `<p class="src">`
- `.st3` — 3장 — 예: `<div class="stats st3">`
- `.stats` — 3장 — 예: `<div class="stats st3">`
- `.tm` — 3장 — 예: `<span class="tm">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cmp` — 4장 — 예: `<div class="cmp" data-anim="reveal-left" data-delay="2">`
- `.h4` — 4장 — 예: `<h2 class="hd h4" data-anim="fade-up" data-delay="1">`
- `.lst` — 4장 — 예: `<div class="lst" data-anim="fade-up" data-delay="4">`
- `.pn` — 4장 — 예: `<div class="pn">`
- `.qt` — 4장 — 예: `<blockquote class="qt" data-anim="fade-up" data-delay="5">`
- `.tbl` — 4장 — 예: `<div class="tbl" data-anim="reveal-right" data-delay="3">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tl` — 4장 — 예: `<span class="tl">`
- `.tr` — 4장 — 예: `<div class="tr th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="blk" data-anim="reveal-right" data-delay="3">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.mono` — 5·6장 — 예: `<span class="mono">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.quiz` — 5장 — 예: `<div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해…`
- `.wl` — 5장 — 예: `<span class="mono wl">`
- `.words` — 5장 — 예: `<p class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.about` — 6장 — 예: `<p class="about">`
- `.dark6` — 6장 — 예: `<div class="dbox up dark6" id="st-up">`
- `.dbox` — 6장 — 예: `<div class="dbox strip" id="st-strip">`
- `.demo` — 6장 — 예: `<div class="demo">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.ft6` — 6장 — 예: `<div class="ft6">`
- `.gl6` — 6장 — 예: `<div class="gl6" data-anim="fade-up" data-delay="2">`
- `.inv` — 6장 — 예: `<div class="dbox inv" id="st-inv">`
- `.pn6` — 6장 — 예: `<div class="pn6 dark">`
- `.sig6` — 6장 — 예: `<div class="sig6" data-anim="fade-up" data-delay="3">`
- `.strip` — 6장 — 예: `<div class="dbox strip" id="st-strip">`
- `.sw6` — 6장 — 예: `<div class="sw6">`
- `.tip6` — 6장 — 예: `<div class="tip6">`
- `.track` — 6장 — 예: `<div class="track">`
- `.up` — 6장 — 예: `<div class="dbox up dark6" id="st-up">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.on` `.now` `.open` `.right` `.wrong` `.play` `.solved` `.tried` `.active` `.visible` `.flash` `.in-frame`)와 내비 클래스(`.dk-…`)는 배치용으로 쓰지 마세요(뼈대의 내비 부분은 그대로 둡니다).

---

## 4. HTML 뼈대 (예시 덱 6장 — 부품 견본입니다. 장 구성은 따라 하지 말고, 공통 파일 두 줄은 그대로 두며, 장은 내용에 맞게 새로 구성)

```html
<!DOCTYPE html>
<html lang="ko" data-template="studio">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계절의 변화</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;900&family=IBM+Plex+Mono:wght@500&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/studio.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide dark">
  <div class="img"><span>IMAGE PLACEHOLDER — 태양 · 막대기 · 그림자</span></div>
  <p class="unit" data-anim="fade-up" data-delay="0"><b>계절의 변화</b><span>Sun, Shadow & Temperature</span></p>
  <p class="gl" data-anim="fade-in" data-delay="1"><span class="dash">—</span>학습 목표</p>
  <h1 class="t1" data-anim="fade-up" data-delay="1">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <div class="meta3" data-anim="fade-in" data-delay="3"><div><span>00초등학교 × 초등 과학 · 6학년 2학기</span><span>2026</span></div><div class="c">계절의 변화 — 1단원 · 3~4차시</div><div class="r">00 SCIENCE STUDIO</div></div>
  <p class="nr top">배지 규칙 없음 → 표지 모노 묶음으로 표현</p>
</section>
<section class="slide yellow" data-steps="4">
  <div class="chrome" data-anim="fade-in" data-delay="0"><span>측정 준비</span><span>02 / 06</span></div>
  <h2 class="hd" data-anim="fade-up" data-delay="1">태양 고도 측정기 만들기</h2>
  <figure class="fig" data-anim="fade-in" data-delay="2"><figcaption>FIG. 01 — 태양 고도 측정기</figcaption><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></figure>
  <p class="bl" data-anim="fade-in" data-delay="3"><span class="dash">—</span>막대기의 그림자와 실이 이루는 각 = 태양 고도</p>
  <p class="def" data-anim="fade-in" data-delay="2"><span class="dash">—</span><b>태양 고도</b> = 태양이 지표면과 이루는 각</p>
  <div class="st2"><div class="stat" data-s="1" data-anim="fade-up" data-delay="3"><b class="sv">01</b><div><h3>자 붙이기<span class="note">TAG · 준비</span></h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="stat" data-s="2" data-anim="fade-up" data-delay="4"><b class="sv">02</b><div><h3>수수깡 꽂기<span class="note">TAG · 수직</span></h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="stat" data-s="3" data-anim="fade-up" data-delay="5"><b class="sv">03</b><div><h3>실 묶기<span class="note">TAG · 실</span></h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="stat" data-s="4" data-anim="fade-up" data-delay="6"><b class="sv">04</b><div><h3>각도기 끼우기<span class="note">TAG · 각도</span></h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns" data-anim="fade-in" data-delay="6"><button class="bt go" data-act="step">다음 단계</button><button class="bt" data-act="reset">처음부터</button><p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quot;03 — 실 묶기&quot;,&quot;04 — 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
  <div class="foot" data-anim="fade-in" data-delay="6"><span>계절의 변화</span><span class="nr">타임라인 규칙 없음 → 통계 카드으로 표현 · 버튼 규칙 없음 → 2px 선 사각형으로 표현</span><span>00 SCIENCE STUDIO</span></div>
</section>
<section class="slide dark">
  <div class="chrome" data-anim="fade-in" data-delay="0"><span>측정 결과</span><span>03 / 06</span></div>
  <h2 class="hd" data-anim="fade-up" data-delay="1">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats st3"><div class="stat" data-anim="fade-up" data-delay="2"><b class="sv">12:30</b><p class="lb">태양 고도가 가장 높아요</p><span class="note">무렵 · 남중</span></div><div class="stat" data-anim="fade-up" data-delay="3"><b class="sv">정남</b><p class="lb">남중할 때 태양의 위치</p><span class="note">쪽</span></div><div class="stat" data-anim="fade-up" data-delay="4"><b class="sv">14:30</b><p class="lb">기온이 가장 높아요</p><span class="note">무렵</span></div><div class="stat" data-anim="fade-up" data-delay="5"><b class="sv">9:30</b><p class="lb">그림자가 가장 길어요</p><span class="note">· 15:30</span></div></div>
  <p class="clabel" data-anim="fade-in" data-delay="4">측정 시각별 태양 고도, 그림자 길이, 기온 · 예시 값</p>
  <div class="chart" data-anim="fade-in" data-delay="5">
    <div class="rl"><span>태양 고도 (°)</span></div>
    <div class="col"><span class="bv">38</span><i class="b" style="height:133px"></i><span class="tm">9:30</span></div><div class="col"><span class="bv">48</span><i class="b" style="height:168px"></i><span class="tm">10:30</span></div><div class="col"><span class="bv">55</span><i class="b" style="height:193px"></i><span class="tm">11:30</span></div><div class="col hi"><span class="bv">57</span><i class="b" style="height:200px"></i><span class="tm">12:30</span></div><div class="col"><span class="bv">54</span><i class="b" style="height:189px"></i><span class="tm">13:30</span></div><div class="col"><span class="bv">47</span><i class="b" style="height:165px"></i><span class="tm">14:30</span></div><div class="col"><span class="bv">37</span><i class="b" style="height:130px"></i><span class="tm">15:30</span></div>
  </div>
  <div class="rows" data-anim="fade-in" data-delay="6"><div class="row"><span class="rn">그림자 길이 (cm)</span><span>12.9</span><span>9.1</span><span>7</span><span>6.4</span><span>7.2</span><span>9.4</span><span>13.4</span></div><div class="row"><span class="rn">기온 (℃)</span><span>22</span><span>23.8</span><span>25.2</span><span>26.3</span><span>27</span><span>27.4</span><span>26.9</span></div></div>
  <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
  <div class="foot" data-anim="fade-in" data-delay="6"><span>계절의 변화</span><span class="nr">꺾은선 규칙 없음 → 숫자 줄으로 표현</span><span>00 SCIENCE STUDIO</span></div>
</section>
<section class="slide yellow">
  <div class="chrome" data-anim="fade-in" data-delay="0"><span>관계 정리</span><span>04 / 06</span></div>
  <h2 class="hd h4" data-anim="fade-up" data-delay="1">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp" data-anim="reveal-left" data-delay="2"><div class="pn"><h3>태양 고도가 높을 때</h3><p><span class="dash">—</span>그림자 길이는 짧아져요</p><p><span class="dash">—</span>기온은 높아져요</p></div><div class="pn"><h3>태양 고도가 낮을 때</h3><p><span class="dash">—</span>그림자 길이는 길어져요</p><p><span class="dash">—</span>기온은 낮아져요</p></div></div>
  <div class="tbl" data-anim="reveal-right" data-delay="3"><span class="tl">시각별 변화</span>
    <div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div>
    <div class="tr"><span>오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span>낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span>오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div>
  </div>
  <div class="lst" data-anim="fade-up" data-delay="4"><h3>남중</h3><p><span class="dash">—</span>태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p><span class="dash">—</span>이때의 태양 고도를 남중 고도라고 해요</p></div>
  <blockquote class="qt" data-anim="fade-up" data-delay="5"><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span>— 오늘의 정리</span></blockquote>
  <div class="foot" data-anim="fade-in" data-delay="6"><span>계절의 변화</span><span class="nr">표 규칙 없음 → 1px 선 행으로 표현</span><span>00 SCIENCE STUDIO</span></div>
</section>
<section class="slide dark">
  <div class="chrome" data-anim="fade-in" data-delay="0"><span>확인하기</span><span>05 / 06</span></div>
  <h2 class="hd" data-anim="fade-up" data-delay="1">배운 내용을 확인해 볼까요?</h2>
  <div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요" data-anim="reveal-left" data-delay="2">
    <span class="mono">QUESTION</span>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <button class="opt" data-opt="0"><span class="dash">—</span>오전 9시 30분</button><button class="opt" data-opt="1"><span class="dash">—</span>낮 12시 30분 무렵</button><button class="opt" data-opt="2"><span class="dash">—</span>오후 3시 30분</button>
    <p class="fb" data-fb></p>
    <button class="bt" data-act="retry">다시 풀기</button>
  </div>
  <div class="blk" data-anim="reveal-right" data-delay="3">
    <span class="mono">빈칸을 눌러 확인해요</span>
    <p><span class="dash">—</span><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p><span class="dash">—</span><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p><span class="dash">—</span><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
    <span class="mono wl">오늘의 낱말</span>
    <p class="words"><span><span class="dash">—</span>태양 고도</span><span><span class="dash">—</span>남중 고도</span><span><span class="dash">—</span>그림자 길이</span><span><span class="dash">—</span>기온</span></p>
  </div>
  <div class="foot" data-anim="fade-in" data-delay="6"><span>계절의 변화</span><span class="nr">버튼 규칙 없음 → 2px 선 사각형으로 표현 · 빈칸 규칙 없음 → 2px 밑선 칸으로 표현</span><span>00 SCIENCE STUDIO</span></div>
</section>
<section class="slide yellow guide">
  <div class="chrome" data-anim="fade-in" data-delay="0"><span>디자인 안내</span><span>06 / 06</span></div>
  <h2 class="hd" data-anim="fade-up" data-delay="1">이 디자인 사용 설명서</h2>
  <div class="gl6" data-anim="fade-up" data-delay="2">
    <span class="mono">한눈에</span>
    <p class="about">디자인 스튜디오 제안서처럼 <b>아주 굵은 대문자 글자를 그림처럼</b> 크게 씁니다. 색은 <b>거의 검정과 애시드 노랑 둘뿐</b>이고, 장마다 바탕을 번갈아 바꿉니다. 그림자·둥근 모서리·셋째 색이 없습니다.</p>
    <span class="mono">색</span>
    <div class="sw6"><span><i style="background:#1C1C1C"></i>거의 검정 #1C1C1C</span><span><i style="background:#F5D200;outline:1px solid rgba(28,28,28,.35)"></i>애시드 노랑 #F5D200</span><span><i style="background:rgba(28,28,28,.62)"></i>흐린 글 = 같은 색 62%·35%</span></div>
    <span class="mono">글꼴</span>
    <div class="ft6"><p><b>제목</b> Barlow 900 → Cafe24 Ohsquare v2.0</p><p><b>본문</b> Barlow 400 → Noto Sans KR Regular</p><p><b>라벨</b> IBM Plex Mono(쪽번호·메타데이터만)</p></div>
    <span class="mono">이렇게 쓰면 좋아요</span>
    <div class="tip6"><p><span class="dash">—</span>한 장에 한 문장만 아주 크게 — 핵심 질문, 결론 장</p><p><span class="dash">—</span>검정 장 ↔ 노랑 장을 번갈아 써서 '주제가 바뀐다'를 보여 주기</p><p><span class="dash">—</span>측정 결과 같은 숫자 발표(통계 카드)</p></div>
  </div>
  <div class="sig6" data-anim="fade-up" data-delay="3">
    <span class="mono">대표 장치 — 눌러 보세요</span>
    <div class="demo"><div class="dh"><h3>가로 띠 넘김</h3><button class="bt" data-demo="#st-strip">다시 보기</button></div><p>장들이 한 줄 띠처럼 옆으로 밀려 넘어갑니다(0.75초).</p>
      <div class="dbox strip" id="st-strip"><div class="track"><div class="pn6 dark"><b>01</b><span>SLIDE</span></div><div class="pn6 yellow"><b>02</b><span>SLIDE</span></div><div class="pn6 dark"><b>03</b><span>SLIDE</span></div></div></div></div>
    <div class="demo"><div class="dh"><h3>계단 등장</h3><button class="bt" data-demo="#st-up">다시 보기</button></div><p>장에 들어오면 요소가 아래에서 차례로 떠오릅니다(0.5초, 0.06~0.66초 간격).</p>
      <div class="dbox up dark6" id="st-up"><i>01</i><i>02</i><i>03</i><i>04</i></div></div>
    <div class="demo"><div class="dh"><h3>검정 ↔ 노랑 뒤집기</h3><button class="bt" data-demo="#st-inv" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>같은 글자를 바탕만 바꿔 씁니다. 회색은 없고 투명도만 씁니다.</p>
      <div class="dbox inv" id="st-inv"><b>TYPE AS MASS</b><span>흐린 글 58%</span></div></div>
  </div>
  <div class="foot" data-anim="fade-in" data-delay="6"><span>계절의 변화</span><span>00 SCIENCE STUDIO</span></div>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">←</button><span class="dk-dots"><button class="dk-dot" aria-label="1장"></button><button class="dk-dot" aria-label="2장"></button><button class="dk-dot" aria-label="3장"></button><button class="dk-dot" aria-label="4장"></button><button class="dk-dot" aria-label="5장"></button><button class="dk-dot" aria-label="6장"></button></span><button class="dk-next" aria-label="다음">→</button></nav>
  </main>
</div>

<!-- 슬라이드 넘김·단계 버튼·퀴즈 엔진. 이 줄은 지우거나 바꾸지 마세요 -->
<script src="https://k-slide.web.app/kit/v1/studio.js"></script>
</body>
</html>
```

---

## 5. 참고: 공통 CSS와 엔진 사용법 (뼈대가 이미 불러옴 — HTML에 옮겨 쓰지 마세요)

아래는 `https://k-slide.web.app/kit/v1/studio.css`의 내용과 엔진(`https://k-slide.web.app/kit/v1/studio.js`)의 사용법 주석입니다. 클래스의 모양·크기·배치를 이해하는 데에만 쓰세요. 이 내용을 `<style>`이나 `<script>`에 넣으면 안 됩니다.

```css
/* studio — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-10';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/cafe24-ohsquare/Cafe24Ohsquare-v2.0.woff2") format("woff2");font-weight:400}
@font-face{font-family:'kp-13';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/noto-sans-kr/NotoSansKR-Regular.woff2") format("woff2");font-weight:400}
/* === THEME === */
:root{--stage-bg:#1C1C1C;--slide-bg:#1C1C1C;
  --kt:'kp-10';--kb:'kp-13';--ka:'kp-13';
  --wt:400;--wb:400}
*{margin:0;padding:0;box-sizing:border-box}
body{font-synthesis:none;word-break:keep-all;letter-spacing:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
/* === VIEWPORT BASE (frontend-slides, mandatory) === */
/* ===========================================
   FIXED 16:9 STAGE: MANDATORY BASE STYLES
   Include this ENTIRE file in every presentation.
   Slides are authored at 1920×1080 and scaled as a whole.
   =========================================== */

/* 1. Lock the browser viewport */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 2. Full-window deck viewport */
.deck-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 3. Fixed 16:9 design canvas.
   JavaScript sets transform: translate(...) scale(...). */
.deck-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform-origin: 0 0;
    background: var(--slide-bg, #fff);
}

/* 4. Slides stack inside the fixed stage.
   Content must be laid out at 1920×1080, not reflowed per device. */
.slide {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--slide-bg, #fff);
}

.slide.active,
.slide.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* 5. Keep media inside authored slide bounds */
img,
video,
canvas,
svg {
    max-width: 100%;
    max-height: 100%;
}

/* 6. Presentation chrome stays outside the slide design system */
.deck-controls {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 1000;
}

/* 7. Print one fixed-size slide per page */
@media print {
    html,
    body {
        width: 1920px;
        height: auto;
        overflow: visible;
        background: #fff;
    }

    .deck-viewport {
        position: static;
        overflow: visible;
        background: #fff;
    }

    .deck-stage {
        position: static;
        width: auto;
        height: auto;
        transform: none !important;
        background: none;
    }

    .slide {
        position: relative;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 1920px;
        height: 1080px;
        break-after: page;
        page-break-after: always;
    }

    .slide:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .deck-controls {
        display: none !important;
    }
}

/* 8. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
}

/* 동작 줄이기(Windows '애니메이션 효과' 끔 등): 위 규칙이 길이를 0.01ms로 줄이면 반복 애니메이션이 깜빡이듯 빨라짐 → 반복은 한 번만 */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-iteration-count:1 !important}}
.dk-nav{position:absolute;z-index:50}


/* === 측정기 그림(figure-gauge.js) 기본 === */
.gauge{display:block;width:100%;height:auto;overflow:visible;--g-sw:2.5}
.gauge .g-lb{font-family:var(--g-font,var(--kb));font-size:40px;font-weight:700;fill:var(--g-ink,currentColor)}
.gauge .g-ground{stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw);opacity:.35}
.gauge .g-board{fill:var(--g-board,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-ruler{fill:var(--g-ruler,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-tick{stroke:var(--g-ink,currentColor);stroke-width:1.5}
.gauge .g-stick{fill:var(--g-stick,var(--g-ink,currentColor));stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-mark,.gauge .g-lead,.gauge .g-dim,.gauge .g-angle{fill:none;stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-angle{stroke-width:4}
.gauge .g-shadow{fill:var(--g-shadow,var(--g-ink,currentColor));opacity:.6}
.gauge .g-string{stroke:var(--g-acc,var(--g-ink,currentColor));stroke-width:4}
.gauge .g-prot{fill:var(--g-prot,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-prot2{fill:none;stroke:var(--g-ink,currentColor);stroke-width:1.5}
.gauge .g-hole{fill:var(--g-ink,currentColor)}
.gauge .g-ray{stroke:var(--g-acc,var(--g-ink,currentColor));stroke-width:7}
.gauge .g-rayh{fill:var(--g-acc,var(--g-ink,currentColor))}
/* 만드는 중(1~3단계): 아직 안 만든 부품과 측정 표시는 흐리게 / 0·4단계는 모두 또렷 */
.slide[data-step="1"] .gauge .g-part:not(.on),.slide[data-step="2"] .gauge .g-part:not(.on),.slide[data-step="3"] .gauge .g-part:not(.on),
.slide[data-step="1"] .gauge .g-meas,.slide[data-step="2"] .gauge .g-meas,.slide[data-step="3"] .gauge .g-meas{opacity:var(--g-dim,.2)}

/* === TEMPLATE STYLES === */

/* --- 둘뿐인 색 + 투명도 (5vw = 96px, 5vh = 54px) --- */
:root{--k:#1C1C1C;--k2:#242422;--y:#F5D200;--px:96px;--sp:cubic-bezier(.16,1,.3,1)}
.slide{font-family:'Barlow',var(--kb),sans-serif;font-weight:var(--wb)}
.dark{background:var(--k);color:var(--y);--f2:rgba(245,210,0,.58);--f3:rgba(245,210,0,.32);--bd:#2E2E2C;--acc:var(--y);--bg:var(--k)}
.yellow{background:var(--y);color:var(--k);--f2:rgba(28,28,28,.62);--f3:rgba(28,28,28,.35);--bd:rgba(28,28,28,.18);--acc:var(--k);--bg:var(--y)}
.slide>*{position:absolute}
.chrome,.foot,.mono,.meta3,.img span,.note,.clabel,.tm,.th,.tl,.qt span,.nr{font-family:'IBM Plex Mono',var(--kb),monospace;font-weight:500;letter-spacing:.06em}
.dash{color:var(--acc);margin-right:.5em}
.hd,.t1,.sv,h3,.q,.qt p{font-family:'Barlow',var(--kt),sans-serif;font-weight:var(--wt);letter-spacing:0}

/* --- 크롬 바 · 발 바 · 규칙 없음 표시 --- */
.chrome,.foot{left:var(--px);right:var(--px);display:flex;justify-content:space-between;font-size:22px;color:var(--f2)}
.chrome{top:54px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.foot{bottom:54px;padding-top:10px;border-top:1px solid var(--bd)}
.nr{font-size:17px;color:var(--f3);align-self:center}
.nr.top{left:var(--px);top:18px}

/* --- 1. 표지: 화면 전체 이미지 자리 + 단원(작게) + 학습 목표(큰 900 글자 덩어리, 핵심 낱말만 100% 노랑) + 세 칸 모노 묶음 --- */
.img{inset:0;background:var(--k2)}
.img span{position:absolute;right:var(--px);top:60px;font-size:22px;color:var(--f3)}
.unit{left:var(--px);top:118px;display:flex;align-items:baseline;gap:36px;white-space:nowrap}
.unit b{font-family:'Barlow',var(--kt),sans-serif;font-weight:var(--wt);font-size:96px;line-height:1.15}
.unit span{font:900 54px/1 'Barlow',sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--f2)}
.gl{left:var(--px);top:330px;font-size:28px;color:var(--f2)}
.t1{left:var(--px);top:376px;font-size:136px;line-height:1.16;white-space:nowrap;color:var(--f2)}
.t1 .gk{font-style:normal;color:var(--y)}
.meta3{left:var(--px);right:var(--px);bottom:54px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;padding-top:18px;border-top:1px solid rgba(245,210,0,.25);font-size:22px;line-height:1.5}
.meta3>div:first-child{display:flex;flex-direction:column}
.meta3 .c{text-align:center}.meta3 .r{text-align:right}

/* --- 공통: h2(4.8vw) · 통계 카드(2px 윗선, 왼쪽 여백 0) --- */
.hd{left:var(--px);right:var(--px);top:128px;font-size:92px;line-height:1.15;white-space:nowrap}
.stats{left:var(--px);right:var(--px);display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stat{border-top:2px solid var(--acc);padding:18px 20px 0 0}
.sv{display:block;font:900 106px/.95 'Barlow',var(--kt),sans-serif;letter-spacing:-.03em}
.stat h3{margin-top:14px;font-size:52px;line-height:1.1}
.note{display:block;margin-top:10px;font-size:20px;color:var(--f3)}
.stat p{margin-top:12px;font-size:28px;line-height:1.55;color:var(--f2)}

/* --- 2. 흐름(노랑): 이미지 자리(노랑 alt + 헤어라인) 안에 측정기 그림 | 정의 줄 + 단계 행 4개(2px 윗선, 단계 버튼으로 하나씩 켜짐) --- */
.fig{left:var(--px);width:820px;top:262px;background:#F0CC00;border:1px solid var(--bd);padding:18px 30px 22px;
  --g-ink:var(--k);--g-acc:var(--k);--g-stick:var(--k);--g-prot:rgba(28,28,28,.06);--g-font:'Barlow',var(--kb),sans-serif}
.fig figcaption{font-size:20px;color:var(--f2);margin-bottom:6px}
.bl{left:var(--px);width:820px;top:884px;font-size:30px;font-weight:500}
.def{left:980px;right:var(--px);top:266px;font-size:32px;font-weight:500}
.def b{font-weight:900}
.st2{left:980px;right:var(--px);top:330px;display:flex;flex-direction:column;gap:12px}
.st2 .stat{display:grid;grid-template-columns:84px 1fr;padding:12px 0 0;opacity:.35}
.st2 .stat.on{opacity:1}
.st2 .sv{font-size:56px;line-height:1}
.st2 h3{margin:0;font-size:40px;line-height:1.15;display:flex;align-items:baseline;gap:16px}
.st2 .note{margin:0;font-size:18px}
.st2 p{margin-top:4px;font-size:28px;line-height:1.45}
.btns{left:980px;right:var(--px);top:858px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.bt{border:2px solid var(--acc);color:var(--acc);padding:12px 26px;font:900 30px/1 'Barlow',var(--kb),sans-serif}
.bt.go{background:var(--acc);color:var(--bg)}
.bt:disabled{opacity:.3}
.cap{width:100%;font-size:28px;color:var(--f2)}

/* --- 3. 숫자와 그래프(검정): 통계 카드 4장 + 막대(흐림 · 가장 높은 막대만 노랑) + 2px 기준선 + 숫자 줄 --- */
.st3{top:270px}
.st3 .lb{margin-top:12px;font-size:30px;line-height:1.4;color:var(--y)}
.clabel{left:var(--px);top:525px;font-size:20px;color:var(--f3)}
.chart{left:var(--px);right:var(--px);top:565px;height:240px;display:grid;grid-template-columns:260px repeat(7,1fr);gap:24px;align-items:end;border-bottom:2px solid var(--f3)}
.rl{align-self:end;padding-bottom:8px;font-size:26px;color:var(--f2)}
.col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;position:relative}
.b{display:block;background:var(--f3)}
.col.hi .b{background:var(--y)}
.bv{font:500 28px/1 'Barlow',sans-serif;color:var(--f2);margin-bottom:8px}
.col.hi .bv{font-weight:900;color:var(--y)}
.tm{position:absolute;left:0;bottom:-34px;font-size:20px;color:var(--f3)}
.rows{left:var(--px);right:var(--px);top:850px;display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:260px repeat(7,1fr);gap:24px;font-size:28px;font-weight:500;color:var(--f2)}
.rn{color:var(--y)}
.src{left:var(--px);right:var(--px);top:942px;font-size:18px;color:var(--f3)}

/* --- 4. 비교와 표(노랑): 비교 두 칸(2px 세로 구분선) | 1px 선 행 표 / 대시 목록 | 인용 글자 --- */
.h4{font-size:80px}
.cmp{left:var(--px);width:860px;top:270px;display:grid;grid-template-columns:1fr 1fr}
.pn{padding:0 36px 0 0}
.pn+.pn{padding:0 0 0 36px}
.pn:first-child{border-right:2px solid var(--acc)}
.pn h3,.lst h3{font-size:44px;line-height:1.15;margin-bottom:14px}
.pn p,.lst p{font-size:30px;line-height:1.55;font-weight:500}
.tbl{left:1040px;right:var(--px);top:262px}
.tl{display:block;font-size:20px;color:var(--f2);margin-bottom:10px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd);font-size:27px;font-weight:500}
.tr.th{font-size:19px;color:var(--f2);border-bottom-color:var(--acc)}
.lst{left:var(--px);width:860px;top:600px}
.qt{left:1040px;right:var(--px);top:600px}
.qt p{font-size:52px;line-height:1.25}
.qt span{display:block;margin-top:18px;font-size:20px;color:var(--f2)}

/* --- 5. 확인하기(검정): 퀴즈 | 2px 구분선 | 빈칸 + 오늘의 낱말 --- */
.quiz{left:var(--px);width:860px;top:270px;bottom:150px;display:flex;flex-direction:column;align-items:flex-start}
.mono{font-size:20px;color:var(--f2)}
.q{margin:12px 0 22px;font-size:54px;line-height:1.2}
.opt{width:100%;display:flex;align-items:baseline;text-align:left;padding:12px 0;border-top:1px solid var(--bd);font-size:36px;font-weight:500;color:var(--y)}
.opt:last-of-type{border-bottom:1px solid var(--bd)}
.opt.right{background:var(--y);color:var(--k);font-weight:900}
.opt.right .dash{color:var(--k)}
.opt.wrong,.opt:disabled:not(.right){color:var(--f3)}
.fb{margin:18px 0;min-height:84px;font-size:28px;line-height:1.5;color:var(--f2)}
.blk{left:1040px;right:var(--px);top:270px;bottom:150px;border-left:2px solid var(--f3);padding-left:56px;display:flex;flex-direction:column}
.blk>p{margin-top:22px;font-size:34px;line-height:1.5;font-weight:500}
.blank{display:inline-block;margin-right:.3em;padding:0 10px;border-bottom:2px solid var(--y);color:var(--y);font-weight:900;position:relative}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;text-align:center}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:12px;font-family:'Barlow',var(--kt),sans-serif;font-weight:var(--wt);font-size:38px}

/* --- 6. 디자인 안내(노랑): 왼쪽 설명 | 오른쪽 대표 장치 시연(2px 윗선 틀 · 2px 선 사각형 버튼) --- */
.gl6{left:var(--px);width:820px;top:262px;display:flex;flex-direction:column;gap:10px}
.gl6 .mono,.sig6>.mono{font-size:20px;color:var(--f2);margin-top:10px}
.about{font-size:30px;line-height:1.55;font-weight:500}
.about b{font-weight:900}
.sw6{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:24px;font-weight:500}
.sw6 i{display:inline-block;width:30px;height:30px;margin-right:10px;vertical-align:-7px}
.ft6 p,.tip6 p{font-size:26px;line-height:1.5;font-weight:500}
.ft6 b{font-weight:900;margin-right:10px}
.sig6{left:980px;right:var(--px);top:250px;display:flex;flex-direction:column;gap:12px}
.demo{border-top:2px solid var(--acc);padding-top:12px}
.dh{display:flex;justify-content:space-between;align-items:center;gap:20px}
.demo h3{font-size:38px;line-height:1.1}
.demo .bt{font-size:22px;padding:8px 18px;flex:none}
.demo .bt[aria-pressed="true"]{background:var(--acc);color:var(--bg)}
.demo p{margin:4px 0 8px;font-size:22px;line-height:1.4;color:var(--f2);font-weight:500}
.dbox{height:92px;position:relative;overflow:hidden}
.strip .track{display:flex;width:300%;height:100%}
.pn6{flex:1;display:flex;align-items:baseline;gap:18px;padding:14px 24px}
.pn6.dark{background:var(--k);color:var(--y)}.pn6.yellow{background:#F0CC00;color:var(--k)}
.pn6 b{font:900 60px/1 'Barlow',sans-serif}
.pn6 span{font:500 18px/1 'IBM Plex Mono',monospace;letter-spacing:.06em}
.strip.play .track{animation:st-strip 2.6s both}
@keyframes st-strip{0%{transform:none;animation-timing-function:cubic-bezier(.77,0,.175,1)}29%,50%{transform:translateX(-33.333%);animation-timing-function:cubic-bezier(.77,0,.175,1)}79%,100%{transform:translateX(-66.666%)}}
.dark6{background:var(--k);color:var(--y)}
.up{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:14px 24px}
.up i{font:900 52px/1 'Barlow',sans-serif;font-style:normal;border-top:2px solid var(--y);padding-top:8px}
.up.play i{animation:st-up .5s var(--sp) both}
.up.play i:nth-child(2){animation-delay:.14s}.up.play i:nth-child(3){animation-delay:.24s}.up.play i:nth-child(4){animation-delay:.36s}.up.play i:nth-child(1){animation-delay:.06s}
@keyframes st-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.inv{background:var(--k);color:var(--y);display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.inv b{font:900 56px/1 'Barlow',sans-serif;letter-spacing:-.02em}
.inv span{font:500 20px/1 'IBM Plex Mono',monospace;color:rgba(245,210,0,.58)}
.inv.play{background:var(--y);color:var(--k);outline:1px solid var(--bd)}
.inv.play span{color:rgba(28,28,28,.62)}

/* --- 요소 등장(명세): fade-up · fade-in · reveal-right · reveal-left · scale-in, .5s, data-delay 0~6 --- */
[data-anim]{opacity:0;transition:opacity .5s var(--sp),transform .5s var(--sp)}
[data-anim="fade-up"]{transform:translateY(40px)}
[data-anim="reveal-right"]{transform:translateX(-40px)}
[data-anim="reveal-left"]{transform:translateX(40px)}
[data-anim="scale-in"]{transform:scale(.94)}
.visible [data-anim]{opacity:1;transform:none}
.visible .st2 .stat[data-anim]:not(.on){opacity:.35}
[data-delay="1"]{transition-delay:.06s}[data-delay="2"]{transition-delay:.14s}[data-delay="3"]{transition-delay:.24s}[data-delay="4"]{transition-delay:.36s}[data-delay="5"]{transition-delay:.5s}[data-delay="6"]{transition-delay:.66s}

/* --- 내비: 아래 가운데 작은 점 + 모노 화살표 --- */
.dk-nav{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:40;--c:var(--y)}
[data-slide="2"] .dk-nav,[data-slide="4"] .dk-nav,[data-slide="6"] .dk-nav{--c:var(--k)}
.dk-dots{display:flex;gap:10px}
.dk-dot{width:9px;height:9px;border-radius:50%;background:var(--c);opacity:.3}
.dk-dot.on{opacity:1}
.dk-prev,.dk-next{font:500 24px/1 'IBM Plex Mono',monospace;color:var(--c);padding:2px 8px}
.dk-prev:disabled,.dk-next:disabled{opacity:.25}

/* === DECK ENGINE (slide-refs 공용, 덱 HTML에 그대로 인라인됨) ===
   window.DECK_CFG = { type: 'x' | 'y' | 'fade' | 'shift' | 'rise', dur: ms, ease: css, dist: px, wheel: bool }
   window.DECK_FX  = { enter(slide, i), step(slide, k), answer(quiz, ok, btn) }  // 템플릿별 효과 훅(선택)
   - 넘김: → ↓ Space PageDown Enter = 다음(단계가 남았으면 단계 먼저), ← ↑ PageUp = 이전, Home/End
   - 내비: .dk-dot(점) .dk-count(번호, data-pad면 01 형식) .dk-prev .dk-next
   - 단계: <section data-steps="4"> 안의 [data-s="k"] 요소가 k단계부터 .on, 현재 단계는 .now
           [data-caps='["...",...]'] 요소의 글이 단계마다 바뀜, 버튼 [data-act="step"] [data-act="reset"]
   - 퀴즈: [data-quiz data-answer data-right data-wrong] 안의 버튼 [data-opt="i"], 결과 글 [data-fb], 다시 풀기 [data-act="retry"]
   - 빈칸: [data-blank] 를 누르면 .open (답 보이기/숨기기)
   - 시연(6장 디자인 안내): 버튼 [data-demo="선택자"] 를 누르면 같은 장 안의 그 요소에 .play
       data-mode="toggle" 이면 .play 켜기/끄기(aria-pressed), 아니면 .play를 뺐다 다시 붙여 애니메이션을 처음부터 다시 재생 */
```

(끝. 사용자의 수업 내용을 받아 위 지시대로 HTML을 만드세요.)