Kami/index-ko.html at main · tw93/Kami · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>Kami 紙: AI 에이전트를 위한 문서 디자인 시스템</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kami - AI 기반 전문 문서를 위한 따뜻한 양피지 디자인 시스템. 하나의 강조색, 세리프 주도 계층 구조, 에디토리얼 여백으로 구성됩니다.">
  <link rel="icon" href="assets/images/logo.svg" type="image/svg+xml">
  <link rel="stylesheet" href="./styles.css">
  <link rel="canonical" href="https://kami.tw93.fun/index-ko.html">
  <link rel="alternate" hreflang="en" href="https://kami.tw93.fun/">
  <link rel="alternate" hreflang="zh-CN" href="https://kami.tw93.fun/index-zh.html">
  <link rel="alternate" hreflang="ja" href="https://kami.tw93.fun/index-ja.html">
  <link rel="alternate" hreflang="zh-Hant" href="https://kami.tw93.fun/index-tw.html">
  <link rel="alternate" hreflang="ko" href="https://kami.tw93.fun/index-ko.html">
  <link rel="alternate" hreflang="x-default" href="https://kami.tw93.fun/">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Kami: AI 에이전트를 위한 문서 디자인 시스템">
  <meta property="og:description" content="Kami - AI 기반 전문 문서를 위한 따뜻한 양피지 디자인 시스템. 하나의 강조색, 세리프 주도 계층 구조, 에디토리얼 여백으로 구성됩니다.">
  <meta property="og:url" content="https://kami.tw93.fun/index-ko.html">
  <meta property="og:image" content="https://kami.tw93.fun/assets/showcase/kami-landing.png">
  <meta property="og:image:width" content="3110">
  <meta property="og:image:height" content="2392">
  <meta property="og:locale" content="ko_KR">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Kami: AI 에이전트를 위한 문서 디자인 시스템">
  <meta name="twitter:description" content="Kami - AI 기반 전문 문서를 위한 따뜻한 양피지 디자인 시스템. 하나의 강조색, 세리프 주도 계층 구조, 에디토리얼 여백으로 구성됩니다.">
  <meta name="twitter:image" content="https://kami.tw93.fun/assets/showcase/kami-landing.png">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Kami",
    "description": "AI 기반 전문 문서를 위한 따뜻한 양피지 디자인 시스템. 하나의 강조색, 세리프 주도 계층 구조, 에디토리얼 여백.",
    "url": "https://kami.tw93.fun",
    "applicationCategory": "DesignApplication",
    "operatingSystem": "Any",
    "author": {
      "@type": "Person",
      "name": "Tw93",
      "url": "https://tw93.fun",
      "sameAs": ["https://github.com/tw93", "https://twitter.com/HiTw93", "https://tw93.fun", "https://weekly.tw93.fun", "https://yobi.tw93.fun"]
    },
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD"
    }
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Kami란 무엇인가요?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "AI 생성 문서를 위한 제약 기반 디자인 시스템입니다. 하나의 강조색, 세리프 주도 계층 구조, 따뜻한 양피지 캔버스. 이미지 렌더러를 위한 비주얼 브리프로도 활용할 수 있습니다."
        }
      },
      {
        "@type": "Question",
        "name": "Kami로 무엇을 만들 수 있나요?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "8가지 문서 템플릿: 원페이저, 긴 문서, 레터, 포트폴리오, 이력서, 슬라이드, 주식 리포트, 변경 로그에 더해 랜딩 페이지 시스템(영문 + 중문 + 한국어). 18가지 인라인 SVG 다이어그램 유형 포함. HTML 출력물을 PDF, PNG 또는 편집 가능한 PPTX 슬라이드 덱으로 내보낼 수 있습니다."
        }
      },
      {
        "@type": "Question",
        "name": "Kami는 어떻게 설정하나요?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Claude Code(v2.1.142+): /plugin marketplace add tw93/kami && /plugin install kami@kami. Codex plugin marketplace: codex plugin marketplace add tw93/kami && codex plugin add kami@kami. ~/.agents를 읽는 범용 에이전트: npx skills add tw93/kami/plugins/kami -a universal -g -y. Claude Desktop: GitHub Releases에서 릴리스 에셋 kami.zip을 다운로드하세요. Source code ZIP이 아닙니다. Skills 설정에서 업로드하세요."
        }
      },
      {
        "@type": "Question",
        "name": "Kami는 어떤 언어를 지원하나요?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "영어, 중국어, 일본어, 한국어를 지원합니다. 각 언어별 전용 세리프 폰트를 사용합니다: 영어는 Charter, 중국어는 TsangerJinKai02, 일본어는 YuMincho, 한국어는 Source Han Serif K이며, 언어별 타이포그래피 튜닝이 적용됩니다."
        }
      }
    ]
  }
  </script>
</head>
<body>
<main class="page">

  <!-- ============ HERO ============ -->
  <header class="hero">
    <div class="eyebrow">
      <span>Design System · v1.9.3<span class="eyebrow-date"> · 2026.07</span></span>
      <span class="hero-links">
        <nav class="lang-switch" aria-label="Language" data-lang-switch>
          <button class="lang-trigger" type="button" aria-expanded="false" data-lang-trigger>한국어</button>
          <div class="lang-menu" data-lang-menu>
            <a href="./index.html" data-lang="en">English</a>
            <a href="./index-zh.html" data-lang="zh">简体中文</a>
            <a href="./index-tw.html" data-lang="tw">繁體中文</a>
            <a href="./index-ja.html" data-lang="ja">日本語</a>
            <a href="./index-ko.html" class="active" data-lang="ko">한국어</a>
          </div>
        </nav>
        <a href="https://github.com/tw93/kami" target="_blank" rel="noopener" aria-label="GitHub">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/>
          </svg>
        </a>
        <a href="https://x.com/HiTw93" target="_blank" rel="noopener" aria-label="X">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
          </svg>
        </a>
      </span>
    </div>
    <h1>Kami<span class="cn">紙</span></h1>
    <p class="tagline">좋은 콘텐츠는 좋은 종이를 만날 자격이 있습니다. Kami는 AI 시대를 위한 레이아웃 디자인 시스템으로, 문서를 명확하고 읽기 쉽고 기억에 남게 만듭니다.</p>
    <div class="hero-tokens">
      <span><b>Canvas</b>#f5f4ed</span>
      <span><b>Accent</b>#1B365D</span>
      <span><b>Serif</b>Charter / TsangerJinKai</span>
      <span><b>Sans</b>= Serif (페이지당 단일 폰트)</span>
    </div>
  </header>

  <!-- ============ 00 DEMOS ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">00 · See it</p>
      <h2 class="section-title">출력 샘플</h2>
      <p class="section-lede">Claude에게 브리프를 전달하세요: 원페이저, 긴 문서, 레터, 포트폴리오, 이력서, 슬라이드 모두 하나의 작고 신뢰할 수 있는 규칙 세트에서 정돈된 레이아웃으로 완성됩니다. 동일한 브리프는 <a href="https://github.com/tw93/kami#beyond-documents" style="color:var(--brand); text-decoration:none; font-weight:500;">이미지 렌더러에도 적용</a>할 수 있으며, README에 복사-붙여넣기 프롬프트와 샘플 출력물이 포함되어 있습니다.</p>
    </div>
    <div class="demo-grid">
      <div class="demo-card">
        <a href="assets/demos/demo-tesla.pdf" target="_blank"><img src="assets/demos/demo-tesla.png" alt="Tesla equity report" loading="lazy" decoding="async"></a>
        <p class="demo-title">Equity Report</p>
        <p class="demo-desc">Tesla 2026년 1분기 실적 분석</p>
      </div>
      <div class="demo-card">
        <a href="assets/demos/demo-resume-ko.pdf" target="_blank"><img src="assets/demos/demo-resume-ko.png" alt="Korean resume" loading="lazy" decoding="async"></a>
        <p class="demo-title">Resume</p>
        <p class="demo-desc">개발자 이력서, 2페이지</p>
      </div>
      <div class="demo-card">
        <a href="assets/demos/demo-kami-print.pdf" target="_blank"><img src="assets/demos/demo-kami-print.png" alt="Kami print one-pager" loading="lazy" decoding="async"></a>
        <p class="demo-title">One-Pager</p>
        <p class="demo-desc">Kami 소개, 흰 종이 인쇄, 1페이지</p>
      </div>
      <div class="demo-card">
        <a href="assets/demos/demo-agent-slides.pdf" target="_blank"><img src="assets/demos/demo-agent-slides.png" alt="Agent slides" loading="lazy" decoding="async"></a>
        <p class="demo-title">Slides</p>
        <p class="demo-desc">에이전트 키노트, 6슬라이드</p>
      </div>
    </div>
  </section>

  <!-- ============ LANDING PAGES ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">Landing Pages</p>
      <h2 class="section-title">Kami로 제작</h2>
      <p class="section-lede">동일한 랜딩 페이지 템플릿을 세 가지 다른 제품에 적용한 결과. 하나의 제약 세트, 세 가지 다른 목적.</p>
    </div>
    <div class="landing-grid">
      <div class="landing-card">
        <a href="https://kami.tw93.fun" target="_blank" rel="noopener"><img src="assets/showcase/kami-landing.png" alt="Kami landing page" loading="lazy" decoding="async"></a>
        <p class="demo-title">Kami</p>
        <p class="demo-desc">디자인 시스템 홈페이지</p>
      </div>
      <div class="landing-card">
        <a href="https://luo.tw93.fun" target="_blank" rel="noopener"><img src="assets/showcase/luo-landing.png" alt="Luo landing page" loading="lazy" decoding="async"></a>
        <p class="demo-title">Luo</p>
        <p class="demo-desc">CJK 읽기용 폰트, 중국어</p>
      </div>
      <div class="landing-card">
        <a href="https://mole.fit" target="_blank" rel="noopener"><img src="assets/showcase/mole-landing.png" alt="Mole landing page" loading="lazy" decoding="async"></a>
        <p class="demo-title">Mole</p>
        <p class="demo-desc">macOS 시스템 유틸리티</p>
      </div>
    </div>
  </section>

  <!-- ============ 01 INSTALL ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">01 · Usage</p>
      <h2 class="section-title">설치 및 사용</h2>
      <p class="section-lede">Claude에게 필요한 것을 말하세요. 예를 들어 "이력서 만들어 줘", "스타트업 원페이저 만들어 줘", "발표용 슬라이드 디자인해 줘". 스킬이 자동으로 실행되며, 슬래시 명령어가 필요 없습니다.</p>
    </div>
<pre class="code"><span class="c"># Claude Code (v2.1.142+)</span>
/plugin marketplace add tw93/kami
/plugin install kami@kami

<span class="c"># Codex plugin marketplace</span>
codex plugin marketplace add tw93/kami
codex plugin add kami@kami</pre>
    <p class="section-lede" style="font-size:14px;"><code>~/.agents/</code>를 읽는 범용 에이전트: <code>npx skills add tw93/kami/plugins/kami -a universal -g -y</code>. 이 plugin 경로는 생성된 경량 스킬 번들을 제공합니다. 그냥 <code>tw93/kami</code>를 쓰면 SKILL.md만 설치됩니다.</p>
    <p class="section-lede" style="font-size:14px;">Claude Desktop: 릴리스 에셋 <a href="https://github.com/tw93/kami/releases/latest/download/kami.zip" style="color:var(--brand); text-decoration:none; font-weight:500;">kami.zip</a>을 다운로드하세요. GitHub Source code ZIP이 아닙니다. Customize &gt; Skills &gt; "+" &gt; Create skill에서 업로드하세요.</p>
  </section>

  <!-- ============ 02 MANIFESTO ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">02 · Manifesto</p>
      <h2 class="section-title">디자인 원칙</h2>
    </div>
    <p class="manifesto">따뜻한 양피지 캔버스, <em>잉크 블루</em>를 유일한 강조색으로, 세리프가 계층 구조를 담당하며, 하드 섀도우와 화려한 팔레트는 배제합니다. 이 시스템은 인쇄물을 위해 만들어졌습니다: 안정적이고, 명확하며, 절제되어 있습니다. 양피지가 기본이며, 선택형 흰 종이 변형을 사용하면 가정용이나 사무용 프린터를 위해 어떤 문서든 흰 배경으로 인쇄하면서도 카드와 표에 따뜻함을 남깁니다.</p>
    <ol class="rules">
      <li><span class="n">1</span><p>페이지 배경은 양피지 <code>#f5f4ed</code>, 순백은 절대 사용하지 않음</p></li>
      <li><span class="n">2</span><p>강조색은 잉크 블루 <code>#1B365D</code> 하나만; 두 번째 유채색 없음</p></li>
      <li><span class="n">3</span><p>모든 회색은 따뜻한 색조, 황갈색 기반; 차가운 청회색 사용 금지</p></li>
      <li><span class="n">4</span><p>영문은 제목과 본문 모두 세리프; 중문은 제목에 세리프, 본문에 산세리프</p></li>
      <li><span class="n">5</span><p>세리프 본문은 400, 제목은 500. 합성 볼드 사용 금지</p></li>
      <li><span class="n">6</span><p>세 가지 행간 밴드: 타이트 제목 1.1-1.3 / 밀집 1.4-1.45 / 읽기 1.5-1.55</p></li>
      <li><span class="n">7</span><p>태그 배경은 반드시 솔리드 hex; rgba 금지, WeasyPrint 이중 사각형 버그</p></li>
      <li><span class="n">8</span><p>그림자: 링 또는 위스퍼만 허용, 하드 드롭 섀도우 금지</p></li>
    </ol>
  </section>

  <!-- ============ 03 COLOR ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">03 · Color</p>
      <h2 class="section-title">따뜻한 절제</h2>
      <p class="section-lede">하나의 강조색 + 따뜻한 중성색 + 차가운 색상 제로. 잉크 블루는 어떤 페이지에서든 <b>5%</b> 이하만 차지합니다. 그 이상은 절제가 아니라 혼잡입니다.</p>
    </div>

    <h3 class="subhead">Canvas</h3>
    <div class="swatches">
      <div class="swatch"><div class="chip" style="background:#f5f4ed"></div><div class="info"><p class="name">Parchment</p><p class="role">페이지 배경, 감성의 기초</p><span class="hex">#F5F4ED</span></div></div>
      <div class="swatch"><div class="chip" style="background:#faf9f5"></div><div class="info"><p class="name">Ivory</p><p class="role">카드 / 부상된 표면</p><span class="hex">#FAF9F5</span></div></div>
      <div class="swatch"><div class="chip" style="background:#e8e6dc"></div><div class="info"><p class="name">Warm Sand</p><p class="role">버튼 기본 / 인터랙티브 표면</p><span class="hex">#E8E6DC</span></div></div>
      <div class="swatch dark"><div class="chip" style="background:#141413"></div><div class="info"><p class="name" style="color:var(--deep-dark)">Deep Dark</p><p class="role">다크 테마 페이지 기본, 순수 블랙 아님</p><span class="hex">#141413</span></div></div>
    </div>

    <h3 class="subhead">Brand</h3>
    <div class="swatches">
      <div class="swatch brand"><div class="chip" style="background:#1B365D"></div><div class="info"><p class="name">Ink Blue</p><p class="role">기본 색상 · CTA · 인용 바 · 섹션 오버라인</p><span class="hex">#1B365D</span></div></div>
      <div class="swatch"><div class="chip" style="background:#2D5A8A"></div><div class="info"><p class="name">Ink Light</p><p class="role">다크 표면 위 링크 · 밝은 변형</p><span class="hex">#2D5A8A</span></div></div>
      <div class="swatch"><div class="chip" style="background:#30302e"></div><div class="info"><p class="name" style="color:var(--deep-dark)">Dark Surface</p><p class="role">다크 테마 컨테이너 · 웜 차콜</p><span class="hex">#30302E</span></div></div>
      <div class="swatch"><div class="chip" style="background:#b53333"></div><div class="info"><p class="name">Error</p><p class="role">오류 상태, 깊은 따뜻한 레드</p><span class="hex">#B53333</span></div></div>
    </div>

    <h3 class="subhead">Warm Neutrals</h3>
    <div class="swatches" style="grid-template-columns: repeat(4, 1fr);">
      <div class="swatch"><div class="chip" style="background:#141413"></div><div class="info"><p class="name">Near Black</p><span class="hex">#141413</span></div></div>
      <div class="swatch"><div class="chip" style="background:#3d3d3a"></div><div class="info"><p class="name">Dark Warm</p><span class="hex">#3D3D3A</span></div></div>
      <div class="swatch"><div class="chip" style="background:#504e49"></div><div class="info"><p class="name">Olive</p><span class="hex">#504e49</span></div></div>
      <div class="swatch"><div class="chip" style="background:#6b6a64"></div><div class="info"><p class="name">Stone</p><span class="hex">#6b6a64</span></div></div>
    </div>

    <h3 class="subhead">Tag Tints: rgba에서 솔리드 hex로</h3>
    <p style="font-size:14px; color: var(--olive); margin: 0 0 16px; line-height: 1.55;">양피지 위 잉크 블루 <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">#1B365D</code>의 솔리드 hex 등가값. 태그는 WeasyPrint 이중 사각형 렌더링 버그를 피하기 위해 <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">rgba()</code> 대신 솔리드 hex를 사용합니다.</p>
    <div class="tint-strip">
      <div class="tint"><span class="flag">&nbsp;</span><span class="sample" style="background:#EEF2F7">Tag sample</span><p class="opacity">0.08</p><span class="hex">#EEF2F7</span></div>
      <div class="tint"><span class="flag">&nbsp;</span><span class="sample" style="background:#E4ECF5">Tag sample</span><p class="opacity">0.14</p><span class="hex">#E4ECF5</span></div>
      <div class="tint default"><span class="flag">Default</span><span class="sample" style="background:#E4ECF5">Tag sample</span><p class="opacity">0.18</p><span class="hex">#E4ECF5</span></div>
      <div class="tint"><span class="flag">&nbsp;</span><span class="sample" style="background:#D0DCE9">Tag sample</span><p class="opacity">0.22</p><span class="hex">#D0DCE9</span></div>
      <div class="tint"><span class="flag">&nbsp;</span><span class="sample" style="background:#D6E1EE">Tag sample</span><p class="opacity">0.30</p><span class="hex">#D6E1EE</span></div>
    </div>
  </section>

  <!-- ============ 04 TYPE ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">04 · Typography</p>
      <h2 class="section-title">타입 시스템</h2>
      <p class="section-lede">세리프는 계층을, 산세리프는 기능을 담당합니다. 세리프 본문은 400, 제목은 500.</p>
    </div>

    <div class="family-grid">
      <div class="family serif">
        <p class="glyph">Aa</p>
        <p class="role">Serif · 제목 + 본문</p>
        <p class="name">Charter / TsangerJinKai02</p>
        <p class="use">제목, 본문, 풀 인용, 숫자 강조에 사용됩니다. 영문은 Charter, 중문은 TsangerJinKai02를 사용합니다.</p>
      </div>
      <div class="family mono">
        <p class="glyph">&lt;/&gt;</p>
        <p class="role">Mono · 코드</p>
        <p class="name">JetBrains Mono</p>
        <p class="use">코드 블록, 버전 번호, hex 값, 표형 숫자.</p>
      </div>
    </div>

    <h3 class="subhead">스케일 (인쇄 pt; 화면 px = pt x 1.33)</h3>
    <div class="type-grid">
      <div class="type-row">
        <div class="type-label">Display</div>
        <div class="type-sample display">좋은 문서는 명확하고<br>안정적이며 절제되어 있다</div>
        <div class="type-specs"><b>36-48 pt</b><br>weight 500<br>line 1.10</div>
      </div>
      <div class="type-row">
        <div class="type-label">H1 Section</div>
        <div class="type-sample h1">Color System · Palette</div>
        <div class="type-specs"><b>18-22 pt</b><br>weight 500<br>line 1.20</div>
      </div>
      <div class="type-row">
        <div class="type-label">H2 Subsection</div>
        <div class="type-sample h2">Canvas · Warm Neutrals</div>
        <div class="type-specs"><b>14-16 pt</b><br>weight 500<br>line 1.25</div>
      </div>
      <div class="type-row">
        <div class="type-label">H3 Item</div>
        <div class="type-sample h3">Tag Tints · Solid Hex</div>
        <div class="type-specs"><b>12-13 pt</b><br>weight 500<br>line 1.30</div>
      </div>
      <div class="type-row">
        <div class="type-label">Body</div>
        <div class="type-sample body">잉크 블루는 어떤 페이지에서든 5% 이하만 차지합니다. 그 이상은 절제가 아니라 혼잡입니다. 모든 회색은 황갈색 기반입니다: R ≈ G > B가 기본 원칙입니다.</div>
        <div class="type-specs"><b>9.5-10 pt</b><br>weight 400<br>line 1.55</div>
      </div>
      <div class="type-row">
        <div class="type-label">Caption</div>
        <div class="type-sample caption">그림 주석, 각주, 주석 텍스트. 색상은 올리브 또는 스톤으로 낮아집니다.</div>
        <div class="type-specs"><b>8.5-9 pt</b><br>weight 400<br>line 1.45</div>
      </div>
      <div class="type-row">
        <div class="type-label">Label</div>
        <div class="type-sample label">Design System · v1.9.3</div>
        <div class="type-specs"><b>7.5-8 pt</b><br>weight 600<br>line 1.35</div>
      </div>
    </div>
  </section>

  <!-- ============ 05 SPACING ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">05 · Spacing &amp; Shape</p>
      <h2 class="section-title">리듬과 형태</h2>
      <p class="section-lede">기본 단위: 4pt. 밀집 레이아웃은 더 작은 여백을, 격식 있는 문서는 더 큰 여백을 사용합니다.</p>
    </div>

    <table class="space-table">
      <tr><th>스케일</th><th>값</th><th>용도</th><th></th></tr>
      <tr><td class="name">xs</td><td class="val">2-3 pt</td><td class="use">인라인 요소</td><td class="bar"><span style="width:6px"></span></td></tr>
      <tr><td class="name">sm</td><td class="val">4-5 pt</td><td class="use">태그 패딩 · 타이트 레이아웃</td><td class="bar"><span style="width:12px"></span></td></tr>
      <tr><td class="name">md</td><td class="val">8-10 pt</td><td class="use">컴포넌트 내부</td><td class="bar"><span style="width:24px"></span></td></tr>
      <tr><td class="name">lg</td><td class="val">16-20 pt</td><td class="use">컴포넌트 간격 · 카드 패딩</td><td class="bar"><span style="width:48px"></span></td></tr>
      <tr><td class="name">xl</td><td class="val">24-32 pt</td><td class="use">섹션 제목 마진</td><td class="bar"><span style="width:72px"></span></td></tr>
      <tr><td class="name">2xl</td><td class="val">40-60 pt</td><td class="use">주요 섹션 간격</td><td class="bar"><span style="width:140px"></span></td></tr>
      <tr><td class="name">3xl</td><td class="val">80-120 pt</td><td class="use">긴 문서 챕터 간격</td><td class="bar"><span style="width:240px"></span></td></tr>
    </table>

    <h3 class="subhead">Radii</h3>
    <div class="radii">
      <div class="radius"><div class="box" style="border-radius:4px"></div><div class="r"><b>4</b> pt</div><div class="label">타이트</div></div>
      <div class="radius"><div class="box" style="border-radius:6px"></div><div class="r"><b>6</b> pt</div><div class="label">코드 블록</div></div>
      <div class="radius"><div class="box" style="border-radius:8px"></div><div class="r"><b>8</b> pt</div><div class="label">기본 카드</div></div>
      <div class="radius"><div class="box" style="border-radius:12px"></div><div class="r"><b>12</b> pt</div><div class="label">컨테이너</div></div>
      <div class="radius"><div class="box" style="border-radius:16px"></div><div class="r"><b>16</b> pt</div><div class="label">피처 카드</div></div>
      <div class="radius"><div class="box" style="border-radius:24px"></div><div class="r"><b>24</b> pt</div><div class="label">대형 컨테이너</div></div>
      <div class="radius"><div class="box" style="border-radius:32px"></div><div class="r"><b>32</b> pt</div><div class="label">히어로</div></div>
    </div>

    <h3 class="subhead">깊이: 세 가지 그림자 방식</h3>
    <p style="font-size:14px; color: var(--olive); margin: 0 0 12px; line-height: 1.55;">Kami는 전통적인 하드 섀도우를 피합니다. 깊이감은 링 섀도우, 위스퍼 섀도우, 명암 교차를 통해 표현합니다.</p>
    <div class="shadow-row">
      <div class="shadow-demo sd-ring">
        <p class="t">링 섀도우</p>
        <p class="s">0 0 0 1pt var(--ring-warm)<br>&nbsp;<br>버튼 · 카드 호버</p>
      </div>
      <div class="shadow-demo sd-whisper">
        <p class="t">위스퍼 섀도우</p>
        <p class="s">0 4pt 24pt rgba(0,0,0,0.05)<br>&nbsp;<br>부드러운 부상 · 피처 카드</p>
      </div>
      <div class="shadow-demo sd-alt">
        <p class="t">라이트 ⇌ 다크</p>
        <p class="s">parchment ⇌ deep-dark<br>&nbsp;<br>섹션 레벨 · 가장 강한 대비</p>
      </div>
    </div>
  </section>

  <!-- ============ 06 COMPONENTS ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">06 · Components</p>
      <h2 class="section-title">원자 모듈</h2>
      <p class="section-lede">작은 고정 세트로, 구체적인 문서 문제를 해결하는 곳에만 유지합니다.</p>
    </div>

    <div class="comp-grid">
      <div class="comp">
        <h3>버튼</h3>
        <p class="hint">하드 드롭 대신 링 섀도우 · 8pt radius</p>
        <div class="demo" style="display:flex; gap:10px; flex-wrap:wrap;">
          <span class="btn btn-primary">Primary CTA</span>
          <span class="btn btn-secondary">Secondary</span>
          <span class="btn btn-ghost">Ghost</span>
        </div>
      </div>
      <div class="comp">
        <h3>태그, 세 단계</h3>
        <p class="hint">솔리드 hex · 약에서 강으로 선택</p>
        <div class="demo" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
          <span class="tag calm">Light 0.08</span>
          <span class="tag standard">Standard 0.18</span>
          <span class="tag brush">Brush gradient</span>
        </div>
      </div>
      <div class="comp">
        <h3>인용</h3>
        <p class="hint">좌측 2pt brand solid + olive 텍스트</p>
        <blockquote class="quote">천 번의 거절 끝에 하나의 승낙, 장식보다 명확함을 우선합니다.</blockquote>
      </div>
      <div class="comp">
        <h3>메트릭</h3>
        <p class="hint">세리프 숫자 + 산세리프 레이블 · tabular-nums</p>
        <div class="metrics demo">
          <div class="metric"><span class="metric-value">8</span><span class="metric-label">문서 유형</span></div>
          <div class="metric"><span class="metric-value">1</span><span class="metric-label">강조색</span></div>
          <div class="metric"><span class="metric-value">8</span><span class="metric-label">규칙</span></div>
        </div>
      </div>
      <div class="comp">
        <h3>섹션 제목</h3>
        <p class="hint">serif 500 · 15pt · 크기 주도 계층, 장식 없음</p>
        <div class="demo">
          <span class="sample-section-title">Selected Works · Projects</span>
        </div>
      </div>
      <div class="comp">
        <h3>대시 목록</h3>
        <p class="hint">불릿 대신 대시 · 에디토리얼 톤</p>
        <ul class="dash demo">
          <li>따뜻한 양피지, 순백은 절대 아님</li>
          <li>잉크 블루 강조색, 두 번째 색상 없음</li>
          <li>세리프가 권위를 담당</li>
        </ul>
      </div>
      <div class="comp">
        <h3>코드 블록</h3>
        <p class="hint">ivory bg + 0.5pt border + 6pt radius</p>
<pre class="code"><span class="c">// warmth from restraint, not from color</span>
canvas   = parchment; accent = <span class="k">ink_blue</span>
palette  = <span class="k">warm_neutrals</span> − cool_grays
document = <span class="k">serif</span> × hierarchy + generous_space
beauty   = constraints × <span class="k">intention</span> ÷ noise</pre>
      </div>
      <div class="comp">
        <h3>피처 카드</h3>
        <p class="hint">whisper shadow + 16pt radius</p>
        <div class="demo" style="background:var(--ivory); border-radius:16px; padding:18px 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.05); border: 1px solid var(--border-cream);">
          <p style="font-family:var(--serif); font-weight:500; font-size:15px; margin:0 0 6px; color:var(--near-black);">Tesla Company Profile · One-Pager</p>
          <p style="font-size:12px; color:var(--olive); margin:0 0 10px; line-height:1.5;">단일 A4 페이지 · 메트릭 카드 4개 + 본문 섹션 3개 + 타임라인</p>
          <div style="display:flex; gap:8px; flex-wrap:wrap;">
            <span class="tag calm">English</span>
            <span class="tag calm">A4 x 1</span>
            <span class="tag calm">Ink Blue</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 07 DIAGRAMS ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">07 · Diagrams</p>
      <h2 class="section-title">인라인 차트</h2>
      <p class="section-lede">아키텍처, 프로세스, 데이터 차트 시나리오를 아우르는 18가지 인라인 SVG 다이어그램 유형. Claude에게 필요한 유형을 말하면 문서에 직접 삽입되며, 색상과 폰트는 Kami 디자인 언어를 따릅니다.</p>
    </div>
    <div class="chart-showcase">
      <!-- Architecture mini -->
      <div class="chart-card">
        <div class="chart-label">Architecture</div>
        <svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
          <rect width="280" height="160" fill="#f5f4ed"/>
          <!-- Browser → API -->
          <path d="M 84,79.5 L 103,79.5 L 103,78 L 107,80 L 103,82 L 103,80.5 L 84,80.5 Z" fill="#6b6a64"/>
          <!-- API → Database -->
          <path d="M 172,79.5 L 191,79.5 L 191,78 L 195,80 L 191,82 L 191,80.5 L 172,80.5 Z" fill="#504e49"/>
          <!-- Node: Client -->
          <rect x="20" y="58" width="64" height="44" rx="3" fill="#f5f4ed" stroke="#6b6a64" stroke-width="0.8"/>
          <text x="52" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#6b6a64">CLIENT</text>
          <text x="52" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">Browser</text>
          <!-- Node: API (focal) -->
          <rect x="108" y="58" width="64" height="44" rx="3" fill="#EEF2F7" stroke="#1B365D" stroke-width="1"/>
          <text x="140" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#1B365D">SERVICE</text>
          <text x="140" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">API</text>
          <!-- Node: Database -->
          <rect x="196" y="58" width="64" height="44" rx="3" fill="#f5f4ed" stroke="#504e49" stroke-width="0.8"/>
          <text x="228" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#6b6a64">DATA</text>
          <text x="228" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">Database</text>
        </svg>
        <p class="chart-caption">시스템 구성 요소와 연결, 하나의 포컬 노드</p>
      </div>
      <!-- Flowchart mini -->
      <div class="chart-card">
        <div class="chart-label">Flowchart</div>
        <svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
          <rect width="280" height="160" fill="#f5f4ed"/>
          <rect x="100" y="8" width="80" height="28" rx="14" fill="#141413"/>
          <text x="140" y="25" text-anchor="middle" font-size="9" fill="#f5f4ed">Start</text>
          <!-- Start → diamond -->
          <path d="M 139.5,36 L 139.5,48 L 138,48 L 140,52 L 142,48 L 140.5,48 L 140.5,36 Z" fill="#504e49"/>
          <polygon points="140,52 172,72 140,92 108,72" fill="#f5f4ed" stroke="#141413" stroke-width="1"/>
          <text x="140" y="76" text-anchor="middle" font-size="8" fill="#141413">Valid?</text>
          <!-- Yes right -->
          <path d="M 172,71.5 L 204,71.5 L 204,70 L 208,72 L 204,74 L 204,72.5 L 172,72.5 Z" fill="#1B365D"/>
          <text x="186" y="68" text-anchor="middle" font-size="8" fill="#1B365D">Yes</text>
          <rect x="208" y="56" width="64" height="32" rx="4" fill="#EEF2F7" stroke="#1B365D" stroke-width="1"/>
          <text x="240" y="75" text-anchor="middle" font-size="9" fill="#141413">Process</text>
          <!-- No down -->
          <path d="M 139.5,92 L 139.5,112 L 138,112 L 140,116 L 142,112 L 140.5,112 L 140.5,92 Z" fill="#504e49"/>
          <text x="151" y="106" font-size="8" fill="#504e49">No</text>
          <rect x="96" y="116" width="88" height="32" rx="4" fill="#f5f4ed" stroke="#6b6a64" stroke-width="0.8"/>
          <text x="140" y="134" text-anchor="middle" font-size="9" fill="#504e49">Reject</text>
        </svg>
        <p class="chart-caption">분기 결정, 예/아니오 경로, 성공에 포컬</p>
      </div>
      <!-- Bar chart (shifted left) -->
      <div class="chart-card">
        <div class="chart-label">Bar Chart</div>
        <svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
          <rect width="280" height="160" fill="#f5f4ed"/>
          <rect x="18" y="78" width="42" height="50" rx="3" fill="#6b6a64"/>
          <rect x="78" y="62" width="42" height="66" rx="3" fill="#504e49"/>
          <rect x="138" y="44" width="42" height="84" rx="3" fill="#2d4e7a"/>
          <rect x="198" y="30" width="42" height="98" rx="3" fill="#1B365D"/>
          <text x="39" y="145" text-anchor="middle" font-size="10" fill="#6b6a64">Q1</text>
          <text x="99" y="145" text-anchor="middle" font-size="10" fill="#504e49">Q2</text>
          <text x="159" y="145" text-anchor="middle" font-size="10" fill="#4d4c48">Q3</text>
          <text x="219" y="145" text-anchor="middle" font-size="10" fill="#4d4c48">Q4</text>
          <text x="39" y="73" text-anchor="middle" font-size="9" font-weight="600" fill="#6b6a64">180</text>
          <text x="99" y="57" text-anchor="middle" font-size="9" font-weight="600" fill="#504e49">220</text>
          <text x="159" y="39" text-anchor="middle" font-size="9" font-weight="600" fill="#2d4e7a">195</text>
          <text x="219" y="25" text-anchor="middle" font-size="9" font-weight="600" fill="#1B365D">240</text>
        </svg>
        <p class="chart-caption">분기별 매출 비교, 그라데이션 또는 단색</p>
      </div>
      <!-- Donut chart -->
      <div class="chart-card">
        <div class="chart-label">Donut Chart</div>
        <svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
          <rect width="280" height="160" fill="#f5f4ed"/>
          <path d="M 80,25 A 55,55 0 1,1 47.7,124.5 L 62.4,104.3 A 30,30 0 1,0 80,50 Z" fill="#1B365D" stroke="white" stroke-width="1.5"/>
          <path d="M 47.7,124.5 A 55,55 0 0,1 35.5,47.7 L 55.7,62.4 A 30,30 0 0,0 62.4,104.3 Z" fill="#504e49" stroke="white" stroke-width="1.5"/>
          <path d="M 35.5,47.7 A 55,55 0 0,1 80,25 L 80,50 A 30,30 0 0,0 55.7,62.4 Z" fill="#6b6a64" stroke="white" stroke-width="1.5"/>
          <text x="80" y="77" text-anchor="middle" font-size="13" font-weight="600" fill="#1B365D">60%</text>
          <text x="80" y="92" text-anchor="middle" font-size="10" fill="#504e49">Primary</text>
          <rect x="150" y="46" width="10" height="10" rx="2" fill="#1B365D"/>
          <text x="165" y="55" font-size="11" fill="#4d4c48">Core revenue · 60%</text>
          <rect x="150" y="72" width="10" height="10" rx="2" fill="#504e49"/>
          <text x="165" y="81" font-size="11" fill="#4d4c48">Services · 25%</text>
          <rect x="150" y="98" width="10" height="10" rx="2" fill="#6b6a64"/>
          <text x="165" y="107" font-size="11" fill="#4d4c48">Other · 15%</text>
        </svg>
        <p class="chart-caption">매출 구조 분석, 3-6개 세그먼트 지원</p>
      </div>
    </div>
  </section>

  <!-- ============ 07 DECISION TABLE ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">08 · Decision Lookup</p>
      <h2 class="section-title">빠른 참조</h2>
      <p class="section-lede">무엇을 사용해야 할지 확신이 없을 때 이 표를 참고하세요. 여기에 없다면, 기본 원칙으로 돌아가세요.</p>
    </div>
    <table class="decision">
      <tr><th>작업</th><th>방법</th></tr>
      <tr><td class="task">큰 제목</td><td class="how">serif <code>500</code>, 계층에 따른 크기, line-height <code>1.10-1.30</code></td></tr>
      <tr><td class="task">읽기 본문</td><td class="how">serif <code>400</code>, <code>9.5-10 pt</code>, line-height <code>1.55</code></td></tr>
      <tr><td class="task">숫자 강조</td><td class="how"><code>color: var(--brand)</code>, 볼드 아님</td></tr>
      <tr><td class="task">두 섹션 구분</td><td class="how"><code>2.5pt</code> brand 좌측 바, 또는 <code>0.5pt</code> warm-gray 점선</td></tr>
      <tr><td class="task">인용</td><td class="how">좌측 <code>2pt</code> brand solid + olive 텍스트</td></tr>
      <tr><td class="task">코드 표시</td><td class="how">Ivory bg + <code>0.5pt</code> border + <code>6pt</code> radius + mono font</td></tr>
      <tr><td class="task">기본 vs 보조</td><td class="how">기본: brand fill + ivory text; 보조: warm-sand + charcoal</td></tr>
      <tr><td class="task">특별 카드 표시</td><td class="how"><code>border: 0.5pt solid var(--brand)</code> 또는 <code>border-left: 3pt</code></td></tr>
      <tr><td class="task">섹션 시작</td><td class="how">Serif <code>500</code> · <code>15pt</code> · 크기 주도 계층, 장식 불필요</td></tr>
      <tr><td class="task">문서 표지</td><td class="how">단일 페이지, Display 크기 + 우측 정렬 저자/날짜 + 넉넉한 여백</td></tr>
      <tr><td class="task">데이터 카드</td><td class="how">Ivory bg + <code>8pt</code> radius + serif 큰 숫자, ink blue + sans 작은 레이블</td></tr>
    </table>
  </section>

  <!-- ============ 09 ANTI ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">09 · Anti-Patterns</p>
      <h2 class="section-title">피해야 할 것</h2>
      <p class="section-lede">예외는 허용되지만, 이유는 명시적이어야 합니다.</p>
    </div>

    <div class="anti">
      <div class="no">
        <h3>하지 마세요</h3>
        <p><code>#ffffff</code> 순백이나 <code>#f3f4f6</code> 쿨 그레이를 페이지 배경으로 사용하지 마세요. 페이지가 딱딱해지고 따뜻한 양피지 특성이 약해집니다.</p>
      </div>
      <div class="yes">
        <h3>하세요</h3>
        <p>항상 <code>#f5f4ed</code> 양피지를 사용하세요. 인쇄 시 흰 테두리를 방지하기 위해 <code>@page background</code>도 같은 색상으로 설정하세요.</p>
      </div>
      <div class="no">
        <h3>하지 마세요</h3>
        <p>태그에 <code>rgba(27,54,93,0.18)</code>를 사용하지 마세요. WeasyPrint는 패딩과 글리프 영역을 다른 불투명도로 렌더링하여 이중 사각형을 만듭니다.</p>
      </div>
      <div class="yes">
        <h3>하세요</h3>
        <p>등가 솔리드 hex <code>#E4ECF5</code>를 위한 틴트 조회 표를 사용하세요. 렌더링이 깔끔하게 유지되고 색상이 안정적입니다.</p>
      </div>
      <div class="no">
        <h3>하지 마세요</h3>
        <p>제목을 <code>font-weight: 600</code> 이상의 합성 볼드로 설정하지 마세요. 합성 볼드는 획을 흐리게 하고 타이포그래피 품질을 떨어뜨립니다.</p>
      </div>
      <div class="yes">
        <h3>하세요</h3>
        <p>본문 400, 제목 500 (실제 W05). 더 강한 존재감이 필요하면 크기나 brand 좌측 바를 사용하고, 합성 볼드는 절대 사용하지 마세요.</p>
      </div>
      <div class="no">
        <h3>하지 마세요</h3>
        <p>하드 드롭 섀도우 <code>0 2px 8px rgba(0,0,0,0.3)</code>을 사용하지 마세요. 시각적으로 무겁고 인쇄 시 어두운 얼룩으로 나타날 수 있습니다.</p>
      </div>
      <div class="yes">
        <h3>하세요</h3>
        <p>링 섀도우 <code>0 0 0 1pt</code> 또는 위스퍼 <code>rgba 0.05</code>, 아니면 단순히 밝고 어두운 섹션을 교차시키세요.</p>
      </div>
    </div>
  </section>

  <!-- ============ 10 BACKGROUND ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">10 · Background</p>
      <h2 class="section-title">디자인 기원</h2>
    </div>
    <div class="background-text">
      <p>저는 미국 주식에 투자하며 항상 Claude에게 리서치 리포트를 작성해 달라고 합니다. 매번 출력물은 같은 기본 문서 모양이었습니다: 회색이고, 평면적이며, 세션마다 레이아웃이 달랐습니다. 구조를 파악하기 어렵고, 서식은 구식이었으며, 페이지의 어떤 것도 계속 읽고 싶게 만들지 못했습니다. 그래서 타이포그래피, 팔레트, 간격을 하나의 규칙씩 고쳐나가기 시작했고, 결국 리포트는 제가 실제로 즐길 수 있는 페이지가 되었습니다.</p>
      <p>나중에 "당신이 모르는 에이전트: 원칙, 아키텍처, 엔지니어링 실무"를 발표해야 했습니다. 이미 문서가 있었고 슬라이드를 처음부터 만들고 싶지 않아서, Claude Design으로 제 스타일에 맞게 레이아웃을 잡고 여러 차례 수정하여 만족스러운 수준에 도달했습니다. 그 과정에서 인라인 SVG 차트, 통일된 웜 팔레트, 더 타이트한 에디토리얼 리듬이 추가되었습니다. 정기적으로 작성하는 모든 문서를 커버할 때까지 계속 성장했고, 추상화 과정을 거쳐 kami가 되었습니다: 어떤 에이전트에게든 넘겨주고 출력물을 신뢰할 수 있는, 하나의 조용한 디자인 시스템입니다.</p>
    </div>
  </section>

  <!-- ============ 11 FAQ ============ -->
  <section>
    <div class="section-head">
      <p class="section-num">11 · Questions</p>
      <h2 class="section-title">FAQ</h2>
    </div>
    <dl class="faq">
      <div class="faq-pair">
        <dt>Kami란 무엇인가요?</dt>
        <dd>AI 생성 문서를 위한 제약 기반 디자인 시스템입니다. 하나의 강조색, 세리프 주도 계층 구조, 따뜻한 양피지 캔버스. LLM 에이전트에게 브리프를 전달하면 정돈된 레이아웃을 돌려받습니다. Claude Design이나 GPT Canvas 같은 이미지 렌더러에 전달할 수 있는 비주얼 브리프로도 활용됩니다.</dd>
      </div>
      <div class="faq-pair">
        <dt>무엇을 만들 수 있나요?</dt>
        <dd>8가지 문서 템플릿: 원페이저, 긴 문서, 레터, 포트폴리오, 이력서, 슬라이드, 주식 리포트, 변경 로그에 더해 랜딩 페이지 시스템(영문 + 중문 + 한국어). 비주얼 설명을 위한 18가지 인라인 SVG 다이어그램 유형 포함. HTML 출력물을 PDF, PNG 또는 편집 가능한 PPTX 슬라이드 덱으로 내보낼 수 있습니다.</dd>
      </div>
      <div class="faq-pair">
        <dt>어떻게 설정하나요?</dt>
        <dd>Claude Code(v2.1.142+): <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">/plugin marketplace add tw93/kami</code> 실행 후 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">/plugin install kami@kami</code>. Codex: <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">codex plugin marketplace add tw93/kami</code> 실행 후 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">codex plugin add kami@kami</code>. <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">~/.agents</code>를 읽는 범용 에이전트: <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">npx skills add tw93/kami/plugins/kami -a universal -g -y</code>. Claude Desktop: GitHub Releases에서 릴리스 에셋 kami.zip을 다운로드하세요. Source code ZIP이 아닙니다. Customize &gt; Skills에서 업로드하세요. 슬래시 명령어가 필요 없으며, 자연어 요청으로 스킬이 자동 실행됩니다.</dd>
      </div>
      <div class="faq-pair">
        <dt>어떤 언어를 지원하나요?</dt>
        <dd>영어, 중국어, 일본어, 한국어를 지원합니다. 각 언어별 전용 세리프 폰트를 사용합니다: 영어는 Charter, 중국어는 TsangerJinKai02, 일본어는 YuMincho, 한국어는 Source Han Serif K. 자간, 행간, 폰트 크기는 인쇄 품질을 위해 언어별로 튜닝됩니다. 일본어와 한국어는 배포 전 비주얼 QA를 포함하는 최선의 CJK 경로입니다.</dd>
      </div>
    </dl>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="mark">
      <svg width="56" height="56" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-label="Kami mark">
        <rect x="6" y="6" width="68" height="68" rx="10" fill="#faf9f5" stroke="#1B365D" stroke-width="1.25"/>
        <line x1="16" y1="26" x2="64" y2="26" stroke="#1B365D" stroke-width="1.25"/>
        <text x="40" y="56" font-family="TsangerJinKai02, Georgia, serif" font-size="34" font-weight="500" fill="#141413" text-anchor="middle">紙</text>
      </svg>
      <div>
        <p class="wm-name">Kami · 紙</p>
        <p class="wm-sub">좋은 콘텐츠는 좋은 종이를 만날 자격이 있습니다.</p>
      </div>
    </div>
    <div class="colophon">
      <div><a href="https://github.com/tw93/kami" style="color:var(--brand); text-decoration:none; font-weight:500;">GitHub</a>&nbsp;&nbsp;·&nbsp;&nbsp;One-Pager · Long Doc · Letter · Portfolio · Resume · Slides</div>
      <div style="margin-top:8px; color: var(--olive); font-family: var(--serif);">
        Serif는 권위를, sans는 기능을, 따뜻한 회색은 리듬을, 잉크 블루는 초점을 담당합니다.
      </div>
    </div>
  </footer>

</main>
<script>
(function(){
  var sw=document.querySelector('[data-lang-switch]');
  if(!sw)return;
  var trigger=sw.querySelector('[data-lang-trigger]');
  function setOpen(open){
    sw.classList.toggle('is-open',open);
    trigger.setAttribute('aria-expanded',open);
  }
  trigger.addEventListener('click',function(e){
    e.stopPropagation();
    setOpen(!sw.classList.contains('is-open'));
  });
  sw.querySelectorAll('[data-lang-menu] a').forEach(function(a){
    a.addEventListener('click',function(){
      localStorage.setItem('kami-lang',a.getAttribute('data-lang'));
    });
  });
  document.addEventListener('click',function(e){
    if(!sw.contains(e.target))setOpen(false);
  });
  document.addEventListener('keydown',function(e){
    if(e.key==='Escape')setOpen(false);
  });
})();
</script>
</body>
</html>