kasaframe 0.1.1 → 0.1.4

package/themes/manga-panel/sample/style.json

@@ -0,0 +1,105 @@
+{
+  "name": "manga-panel",
+  "label": "만화 칸 — 정보가 칸으로 나뉘어 그려지고, 결정타에 집중선이 터진다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F7F5F0",
+    "surface": "#FFFFFF",
+    "raised": "#ECE9E2",
+    "line": "#111111",
+    "ink": "#111111",
+    "inkSoft": "#2B2B2B",
+    "dim": "#5E5A53",
+    "accent": "#E3242B",
+    "accentSoft": "#F7C3C0",
+    "accentText": "#C41E24",
+    "onAccent": "#FFFFFF",
+    "success": "#111111",
+    "danger": "#E3242B",
+    "warning": "#E3242B",
+    "paper": "#F7F5F0",
+    "tone": "#111111",
+    "spot": "#E3242B"
+  },
+  "fonts": {
+    "sans": "\"Do Hyeon\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Gasoek One\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gasoek One",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gasoekone/GasoekOne-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Do Hyeon",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/dohyeon/DoHyeon-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      }
+    ]
+  },
+  "type": {
+    "hero": 240,
+    "title": 110,
+    "body": 48,
+    "caption": 34,
+    "weightDisplay": 400,
+    "weightBody": 400,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "pop",
+    "ease": "outBack",
+    "durations": {
+      "fast": 0.083,
+      "base": 0.2,
+      "slow": 0.42
+    }
+  },
+  "theme": {
+    "inks": [
+      "#111111 먹 — 칸 테두리·글·베타·집중선",
+      "#F7F5F0 원고지 종이 · #FFFFFF 칸 안",
+      "#E3242B 붉은 별색 한 판 — 결정타 숫자·창·드롭에만"
+    ],
+    "texture": "G펜 선(칸 테두리는 고른 굵은 선, 그림 선은 들어가고 빠질 때 가늘다), 회색은 45° 망점 스크린톤으로만, 넓은 검은 면(베타). 집중선·효과선은 초당 12번 다시 그려 끓는다",
+    "movement": "칸이 펜으로 그어지며 박마다 한 칸씩 열린다(오른쪽 위부터). 말풍선은 짓눌렸다 튀어 서고(3장), 효과음 글자는 한 자씩 쾅 찍힌다. 결정타는 흑백 반전 두 장 + 집중선 터짐. 마디마다 새 쪽"
+  },
+  "notes": [
+    "흑백이 기본 — 회색 단색 면 금지, 회색은 망점으로만. 붉은 별색(accent)은 한 화면에 한 곳.",
+    "칸 테두리는 먹 6–8px, 홈(칸 사이)은 가로 18px·세로 40px 안팎 — 홈 폭은 시간(지연)을 뜻하니 넓힐 때는 이유가 있어야 한다.",
+    "효과음 꼴(흰 테두리 굵은 글자)은 실제 숫자·주소·모델 ID 에만 — 뜻 없는 소리 글자를 지어내지 않는다.",
+    "큰 글은 Gasoek One(효과음·숫자), 말풍선 글은 Do Hyeon, 주소·ID 는 Do Hyeon 이 좁아 잘 들어간다. 한글은 Pretendard 로 받친다."
+  ]
+}

package/themes/manga-panel/slots.ts

@@ -0,0 +1,127 @@
+import { clamp, rand, randRange, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { impactFrame, onTwos } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 만화 원고의 결로. 끓는 선·쾅 앉음은 초당 12장으로 끊는다
+const SVG = "http://www.w3.org/2000/svg";
+const frameOf = (t: number): number => Math.floor(t * 12 + 1e-6);
+
+export const slots: ThemeSlots = {
+  // 원고지 — 종이 위에 인쇄되지 않는 하늘색 기본 테두리와 재단 표시만. 서 있는 질감이라 움직이지 않는다
+  surface(el) {
+    const guide = "rgba(120, 190, 225, 0.32)";
+    layer(el, "inset:0;background:var(--kf-bg)");
+    layer(el, `left:3.5%;right:3.5%;top:3.5%;bottom:3.5%;border:2px solid ${guide}`);
+    layer(el, `left:6.5%;right:6.5%;top:6%;bottom:6%;border:1px dashed ${guide}`);
+    for (const [x, y] of [[0, 0], [1, 0], [0, 1], [1, 1]]) {
+      layer(el, `${x ? "right" : "left"}:1.2%;${y ? "bottom" : "top"}:3.5%;width:1.8%;height:0;border-top:2px solid ${guide}`);
+      layer(el, `${x ? "right" : "left"}:3.5%;${y ? "bottom" : "top"}:1.2%;width:0;height:1.8%;border-left:2px solid ${guide}`);
+    }
+    return () => {};
+  },
+
+  // 칸 — 펜이 테두리를 한 바퀴 긋고(0.125초) 칸이 한 번 부풀며 열린다. 강조 칸은 붉은 별색 면
+  panel(el, { at, tone }) {
+    const box = layer(el, `inset:0;background:${tone === "accent" ? "var(--kf-accent)" : "var(--kf-surface)"}`, true);
+    const sv = document.createElementNS(SVG, "svg");
+    sv.setAttribute("viewBox", "0 0 100 100");
+    sv.setAttribute("preserveAspectRatio", "none");
+    sv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;overflow:visible";
+    const r = document.createElementNS(SVG, "rect");
+    for (const [k, v] of Object.entries({ x: 0, y: 0, width: 100, height: 100, fill: "none", stroke: "var(--kf-ink)", "stroke-width": 7, "vector-effect": "non-scaling-stroke", pathLength: 1, "stroke-dasharray": "1 1" })) r.setAttribute(k, String(v));
+    sv.append(r);
+    box.append(sv);
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      const p = clamp(onTwos(t - at, 24) / 0.125);
+      r.setAttribute("stroke-dashoffset", String(1 - p));
+      box.style.background = p >= 1 ? (tone === "accent" ? "var(--kf-accent)" : "var(--kf-surface)") : "transparent";
+      const k = frameOf(t - at - 0.125);
+      box.style.transform = p >= 1 && k === 0 ? "scale(1.03)" : "none";
+    };
+  },
+
+  // 효과음처럼 쾅 — 크게 찍혔다 눌려 앉고, 둘레로 짧은 집중선이 세 장 터진다
+  land(el, { at, seed }) {
+    const sv = document.createElementNS(SVG, "svg");
+    sv.setAttribute("viewBox", "-60 -60 120 120");
+    sv.setAttribute("preserveAspectRatio", "none");
+    sv.style.cssText = "position:absolute;left:-22%;top:-30%;width:144%;height:160%;overflow:visible;pointer-events:none;display:none;z-index:-1";
+    const sets = [0, 1, 2].map((f) => {
+      const g = document.createElementNS(SVG, "path");
+      let d = "";
+      for (let i = 0; i < 26; i++) {
+        const a = ((i + rand(`${seed}:${f}`, i)) / 26) * Math.PI * 2;
+        const r0 = 44 + rand(`${seed}:${f}`, i + 50) * 6;
+        const r1 = 58 + rand(`${seed}:${f}`, i + 90) * 8;
+        const w = 0.035;
+        d += `M${Math.cos(a) * r1},${Math.sin(a) * r1}L${Math.cos(a - w) * r0},${Math.sin(a - w) * r0}L${Math.cos(a + w) * r0},${Math.sin(a + w) * r0}Z`;
+      }
+      g.setAttribute("d", d);
+      g.setAttribute("fill", "var(--kf-ink)");
+      g.style.display = "none";
+      sv.append(g);
+      return g;
+    });
+    el.append(sv);
+    const rot = randRange(seed, 0, -5, 5);
+    return (t): Style => {
+      const k = frameOf(t - at);
+      sv.style.display = t >= at && k < 4 ? "block" : "none";
+      sets.forEach((g, i) => (g.style.display = k % 3 === i ? "block" : "none"));
+      if (t < at || k >= 4) return {};
+      return k === 0 ? { scale: 1.45, rotate: rot } : k === 1 ? { scale: 0.93, rotate: -rot * 0.4 } : { scale: 1.0 };
+    };
+  },
+
+  // 손글씨 레터링 — 글자가 한 자씩 크게 찍혔다 앉고(효과음 꼴의 작은 판), 다 쓰면 흰 테두리가 둘러 그림 위에서도 읽힌다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    for (const s of spans) if (s.textContent!.trim()) s.style.display = "inline-block";
+    const n = spans.length;
+    return (t) => {
+      const shown = shownCount(n, t, at, dur);
+      spans.forEach((s, i) => {
+        s.style.visibility = i < shown ? "visible" : "hidden";
+        const born = at + (dur * i) / Math.max(1, n);
+        const k = t - born;
+        s.style.transform = i < shown && k < 1 / 30 ? "scale(1.5)" : i < shown && k < 2 / 30 ? "scale(0.92)" : "none";
+      });
+      el.style.textShadow = t >= at + dur ? "3px 0 0 var(--kf-surface), -3px 0 0 var(--kf-surface), 0 3px 0 var(--kf-surface), 0 -3px 0 var(--kf-surface)" : "none";
+    };
+  },
+
+  // G펜 선 — 들어가고 빠질 때 가는 먹 선이 펜 속도로 그어지고, 다 그은 뒤엔 선 위로 흰 효과선 틈이 흐른다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const ink = getComputedStyle(el).getPropertyValue(tone === "accent" ? "--kf-accent" : "--kf-ink").trim() || "#111111";
+    const paper = getComputedStyle(el).getPropertyValue("--kf-surface").trim() || "#FFFFFF";
+    return (t) => {
+      clear();
+      const p = clamp(onTwos(t - at, 24) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const pts = partial(points, p);
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.strokeStyle = ink;
+      g.lineWidth = 9;
+      g.beginPath();
+      pts.forEach((q, i) => (i ? g.lineTo(q[0], q[1]) : g.moveTo(q[0], q[1])));
+      g.stroke();
+      if (p < 1) return;
+      g.strokeStyle = paper;
+      g.lineWidth = 3;
+      g.setLineDash([14, 46]);
+      g.lineDashOffset = -frameOf(t) * 10;
+      g.beginPath();
+      pts.forEach((q, i) => (i ? g.lineTo(q[0], q[1]) : g.moveTo(q[0], q[1])));
+      g.stroke();
+      g.setLineDash([]);
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return impactFrame(el, { ctx, drop });
+  },
+};

package/themes/manga-panel/style.json

@@ -0,0 +1,105 @@
+{
+  "name": "manga-panel",
+  "label": "만화 칸 — 정보가 칸으로 나뉘어 그려지고, 결정타에 집중선이 터진다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F7F5F0",
+    "surface": "#FFFFFF",
+    "raised": "#ECE9E2",
+    "line": "#111111",
+    "ink": "#111111",
+    "inkSoft": "#2B2B2B",
+    "dim": "#5E5A53",
+    "accent": "#E3242B",
+    "accentSoft": "#F7C3C0",
+    "accentText": "#C41E24",
+    "onAccent": "#FFFFFF",
+    "success": "#111111",
+    "danger": "#E3242B",
+    "warning": "#E3242B",
+    "paper": "#F7F5F0",
+    "tone": "#111111",
+    "spot": "#E3242B"
+  },
+  "fonts": {
+    "sans": "\"Do Hyeon\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Gasoek One\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gasoek One",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gasoekone/GasoekOne-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Do Hyeon",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/dohyeon/DoHyeon-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      }
+    ]
+  },
+  "type": {
+    "hero": 240,
+    "title": 110,
+    "body": 48,
+    "caption": 34,
+    "weightDisplay": 400,
+    "weightBody": 400,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "pop",
+    "ease": "outBack",
+    "durations": {
+      "fast": 0.083,
+      "base": 0.2,
+      "slow": 0.42
+    }
+  },
+  "theme": {
+    "inks": [
+      "#111111 먹 — 칸 테두리·글·베타·집중선",
+      "#F7F5F0 원고지 종이 · #FFFFFF 칸 안",
+      "#E3242B 붉은 별색 한 판 — 결정타 숫자·창·드롭에만"
+    ],
+    "texture": "G펜 선(칸 테두리는 고른 굵은 선, 그림 선은 들어가고 빠질 때 가늘다), 회색은 45° 망점 스크린톤으로만, 넓은 검은 면(베타). 집중선·효과선은 초당 12번 다시 그려 끓는다",
+    "movement": "칸이 펜으로 그어지며 박마다 한 칸씩 열린다(오른쪽 위부터). 말풍선은 짓눌렸다 튀어 서고(3장), 효과음 글자는 한 자씩 쾅 찍힌다. 결정타는 흑백 반전 두 장 + 집중선 터짐. 마디마다 새 쪽"
+  },
+  "notes": [
+    "흑백이 기본 — 회색 단색 면 금지, 회색은 망점으로만. 붉은 별색(accent)은 한 화면에 한 곳.",
+    "칸 테두리는 먹 6–8px, 홈(칸 사이)은 가로 18px·세로 40px 안팎 — 홈 폭은 시간(지연)을 뜻하니 넓힐 때는 이유가 있어야 한다.",
+    "효과음 꼴(흰 테두리 굵은 글자)은 실제 숫자·주소·모델 ID 에만 — 뜻 없는 소리 글자를 지어내지 않는다.",
+    "큰 글은 Gasoek One(효과음·숫자), 말풍선 글은 Do Hyeon, 주소·ID 는 Do Hyeon 이 좁아 잘 들어간다. 한글은 Pretendard 로 받친다."
+  ]
+}

package/themes/manga-panel/theme.json

@@ -0,0 +1,148 @@
+{
+  "id": "manga-panel",
+  "name": "만화 칸",
+  "metaphor": "정보가 만화 한 쪽의 칸으로 나뉘어 차례로 그려지고, 결정타는 집중선과 효과음 글자로 터진다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "promo",
+    "shorts",
+    "launch",
+    "explainer",
+    "square"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16",
+    "1:1"
+  ],
+  "vary": {
+    "scheme": [
+      "light"
+    ],
+    "hue": [
+      [
+        335,
+        45
+      ],
+      [
+        195,
+        235
+      ]
+    ],
+    "chroma": [
+      0.85,
+      1.1
+    ],
+    "tint": [
+      0,
+      0.02
+    ],
+    "bg": {
+      "light": [
+        0.93,
+        0.99
+      ]
+    },
+    "fonts": [
+      "base",
+      "black-han",
+      "gasoek",
+      "do-hyeon",
+      "wanted"
+    ],
+    "texture": [
+      "none",
+      "halftone"
+    ],
+    "stroke": [
+      0.8,
+      1.5
+    ],
+    "tempo": [
+      0.9,
+      1.2
+    ]
+  },
+  "tags": {
+    "mood": [
+      "극적",
+      "역동적",
+      "대담한",
+      "만화",
+      "흑백"
+    ],
+    "light": "light",
+    "use": [
+      "공개",
+      "홍보",
+      "결정타",
+      "순서",
+      "이야기",
+      "숫자"
+    ],
+    "dims": "2D"
+  },
+  "effects": [
+    {
+      "name": "panelPage",
+      "kind": "layer",
+      "does": "쪽을 칸으로 나눈다 — 칸마다 펜이 테두리를 긋고 칸이 쾅 열린다(오른쪽 위부터). 크기가 무게, 홈 폭이 시간, 기운 칸이 긴장",
+      "use": "const page = panelPage(el, { ctx, rows: [{ h: 1, cols: [2, 1], slant: 60, tilt: -40 }, { h: 1, cols: [1, 1, 1] }], at: hits, until: nextBar, build: (cell, i, box) => { … } })"
+    },
+    {
+      "name": "focusLines",
+      "kind": "layer",
+      "does": "집중선 — 가장자리에서 한 점으로 모이는 먹 선, 가운데 타원은 비워 주인공이 빛난다. 초당 12번 다시 그려 끓고 at 에 쏘아 들어온다",
+      "use": "const lines = focusLines(el, { ctx, cx: 960, cy: 540, rx: 520, ry: 260, at: hit, burst: 0.15, strength: (t) => 0.6 + 0.4 * beat(t) })"
+    },
+    {
+      "name": "speedLines",
+      "kind": "layer",
+      "does": "효과선 — 평행한 먹 선이 한 방향으로 흐른다. rate 가 처리량(높을수록 빽빽하고 길다), 초당 12번 다시 그려 끓는다",
+      "use": "const flow = speedLines(el, { ctx, area: [x, y, w, h], clip: box.poly, angle: 0, rate: (t) => 0.4 + t / 2 })"
+    },
+    {
+      "name": "balloon",
+      "kind": "layer",
+      "does": "말풍선 — 요청은 둥근(round), 모델 응답은 꺾인 전자음(electric), 장애는 가시(blast), 캐시는 생각(thought), 설명은 상자(box), 충격은 플래시(flash). 짓눌렸다 튀어 선다",
+      "use": "const ask = balloon(el, { ctx, kind: \"electric\", x: 640, y: 300, w: 620, h: 220, text: \"anthropic/claude-opus-5-5\", size: 52, tail: [960, 760], at: hit })"
+    },
+    {
+      "name": "sfx",
+      "kind": "layer",
+      "does": "효과음 글자 — 실제 숫자·주소·낱말이 흰 테두리 굵은 글자로 한 자씩 쾅 찍힌다. 앉은 뒤에도 손글씨처럼 1px 끓는다",
+      "use": "const n = sfx(el, { ctx, text: \"102\", x: 960, y: 520, size: 420, rotate: -6, at: drop, ink: \"accent\" })"
+    },
+    {
+      "name": "screentone",
+      "kind": "layer",
+      "does": "스크린톤 — 칼로 오려 붙인 45° 망점(또는 평행선). 회색·계조는 이것으로만, at 에 칼이 대각선으로 지나가며 붙는다",
+      "use": "const tone = screentone(el, { ctx, poly: box.poly, pitch: 10, value: (u, v) => 0.15 + 0.5 * v, at: hit })"
+    },
+    {
+      "name": "penStroke",
+      "kind": "layer",
+      "does": "G펜 선 — 들어가고 빠질 때 가늘고 가운데가 굵은 먹 선이 펜 속도로 그어진다. 취소선·시곗바늘·연결선, arrow 면 화살촉",
+      "use": "const strike = penStroke(el, { ctx, points: [[420, 520], [980, 470]], at: hit, dur: 0.2, width: 14, ink: \"accent\" })"
+    },
+    {
+      "name": "impactFrame",
+      "kind": "layer",
+      "does": "임팩트 프레임 — 드롭에 화면이 두 장 흑백 반전되고 주인공 둘레로 검은 가시(베타 플래시)가 터졌다 걷힌다. 흔들림을 돌려준다",
+      "use": "const hit = impactFrame(el, { ctx, drop: 0, origin: [960, 520] }); const s = hit(t); applyStyle(frame, s.shake)"
+    },
+    {
+      "name": "pageTurn",
+      "kind": "layer",
+      "does": "쪽 넘김 — 장면 끝에 새 원고지가 넘어와 앞 쪽을 덮는다(접힌 자리에 망점 그림자). 다음 장면은 빈 쪽에서 칸을 긋기 시작한다",
+      "use": "const turn = pageTurn(el, { ctx, at: ctx.dur - 0.3 })"
+    },
+    {
+      "name": "onTwos",
+      "kind": "value",
+      "does": "t 를 초당 12장으로 끊는다 — 선이 두 장마다 다시 그려지는 박자. 손으로 짠 움직임도 이걸 거치면 만화 PV 처럼 끊긴다",
+      "use": "const tq = onTwos(t)"
+    }
+  ]
+}

package/themes/manga-panel/variants/chalk-cyan-dots.json

@@ -0,0 +1,122 @@
+{
+  "id": "chalk-cyan-dots",
+  "world": "manga-panel",
+  "name": "Chalk Cyan Dots",
+  "desc": "분필빛 바탕에 하늘빛 청록 강조 · 꽉 찬 검은 고딕 제목 · 망점",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9546,
+    "tint": {
+      "h": 205.5789,
+      "c": 0.0054
+    },
+    "inkL": 0.1776,
+    "hue": 203.7935,
+    "chroma": 1.014,
+    "fonts": "black-han",
+    "texture": {
+      "kind": "halftone",
+      "amount": 0.16
+    },
+    "stroke": 0.83,
+    "radius": null,
+    "tempo": 1.16,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#ECF1F2",
+      "surface": "#F5FBFF",
+      "raised": "#E1E5E4",
+      "line": "#0E1115",
+      "ink": "#0E1115",
+      "inkSoft": "#272B2F",
+      "dim": "#595957",
+      "accent": "#008B95",
+      "accentSoft": "#9EDADD",
+      "accentText": "#007880",
+      "onAccent": "#060606",
+      "success": "#0E1115",
+      "danger": "#008B95",
+      "warning": "#008B95",
+      "paper": "#ECF1F2",
+      "tone": "#0E1115",
+      "spot": "#008B95"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Black Han Sans\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Black Han Sans",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/blackhansans/BlackHanSans-Regular.ttf",
+          "weight": "400"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "JetBrains Mono",
+          "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+          "weight": "100 800"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 500,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "texture": {
+        "kind": "halftone",
+        "amount": 0.16
+      },
+      "stroke": 0.83,
+      "tempo": 1.16
+    }
+  },
+  "tags": {
+    "mood": [
+      "극적",
+      "역동적",
+      "대담한",
+      "만화",
+      "흑백",
+      "밝은",
+      "차가운",
+      "아날로그"
+    ],
+    "light": "light",
+    "use": [
+      "공개",
+      "홍보",
+      "결정타",
+      "순서",
+      "이야기",
+      "숫자"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 16.57,
+      "inkSoft": 12.51,
+      "dim": 6.16,
+      "accentText": 4.62,
+      "accent": 3.59,
+      "onAccent": 4.97,
+      "success~danger": 0.4,
+      "success~warning": 0.4,
+      "accent~ink": 0.4
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.slam"
+  }
+}