{"delivery":{"type":"reference-library","npmPackagePublished":false,"npmPackage":{"name":"klic-design","version":"0.0.4","published":false,"status":"source-ready","registry":"https://registry.npmjs.org/","runtime":"Bun 1.4.2 preferred; Node.js 22+ supported","exports":["tokens","theme","motion","motions/runtime","motions/runtime.css","components","blocks","Agent Skill","CSS","TypeScript","CLI"],"publishedExports":["tokens","theme","motion","motions/runtime","motions/runtime.css","components","blocks","Agent Skill","CSS","TypeScript","CLI"],"candidateExports":["tokens","theme","motion","motions/runtime","motions/runtime.css","components","blocks","Agent Skill","CSS","TypeScript","CLI"],"candidateOnlyExports":[],"publicationExportsVerified":true,"skillPath":"skills/klic-design/SKILL.md","buildCommand":"bun run pack:npm","publishedVersion":"0.0.3","publishedIntegrity":"sha512-GJJOOXh5UXxSSURZLxXLU5qq968O+p91TeTkNtqo527mzj9BOtoOH4nyMfNWZwrQwJ4o+zhy9i+cnlX71nPeKA==","installCommand":"bun add klic-design@0.0.3","cliCommand":"bunx --bun --package=klic-design@0.0.3 klic","nodeCliCommand":"npx --yes --package=klic-design@0.0.3 klic","sourceCLICommand":"curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs\nbun ./klic.mjs","sourceNodeCLICommand":"curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs\nnode ./klic.mjs"},"scope":"/about","licenses":"/licenses/README.md"},"system":{"schemaVersion":"1.0","revision":"6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97","definition":"/api/v1/design-system.json","docs":"/#docs/architecture"},"schemaVersion":"1.0","scope":"adoption-guidance","implementation":"react-demo","use":["「배포 파이프라인」의 용도: 병렬 작업과 단계 간 흐름, 실행 시간, 실패 상세와 로컬 재시도 상태를 보여줍니다.","빌드·검증·배포 단계의 병렬성과 실패 지점을 설명할 때 사용합니다.","Use to explain parallel work and failure points across build, validation and deployment stages."],"avoid":["좁은 화면을 이유로 수치·단위·범례를 생략하거나 폰트를 일괄 축소하지 않습니다.","샘플 데이터·로컬 상호작용을 실제 저장·인증·운영 기능으로 표시하지 않습니다.","실제 CI 작업을 시작하거나 배포하지 않습니다. 재시도는 이 화면의 샘플 상태만 변경합니다.","Do not start CI jobs or deploy. Retry changes only the sample state in this view."],"accessibility":["입력은 네이티브 폼 컨트롤을 우선하고, 트리·선택 목록·파이프라인은 이름 있는 키보드 조작과 보이는 초점을 제공합니다.","모든 조작의 이름·보이는 초점·실제 target 경계를 확인한다. reduced-motion에서도 기능에 필요한 상태 안내를 유지한다.","컨테이너 폭에 따라 패널과 단계 열을 재배치하고, 긴 표·로그만 내부 스크롤을 사용합니다.","CSS viewport·실제 콘텐츠 컨테이너·사용자 확대·명시적 density를 별개의 시험 조건으로 기록한다."],"density":{"compact":"데이터 비교·반복 행에 사용하며 셀 padding만 줄입니다. 글자 크기와 단위는 유지합니다.","normal":"기본 권장 밀도입니다. 읽기 순서와 레이블·컨트롤·피드백 그룹을 유지합니다.","relaxed":"설명 중심·프레젠테이션 화면에 사용합니다. 정보 계층을 유지하며 여백을 늘립니다."},"states":[{"name":"데이터 생명주기","condition":"조합 정책","response":"기본·선택·비활성·진행·완료·실패·빈 상태를 텍스트와 아이콘으로 구분합니다."},{"name":"완료·선택","condition":"조합 정책","response":"완료·성공은 블루와 체크·명시적 문구로 전달한다. hover가 selected·invalid·focus 의미를 지우지 않도록 한다."}],"recovery":{"loading":"진행 중임을 알리고 중복 요청을 차단합니다. 기존 데이터가 있으면 갱신 중에도 유지합니다.","empty":"처음부터 데이터가 없는 상태에는 생성·연결 행동을 제공합니다.","filtered":"검색 결과가 없으면 데이터 없음과 구분하고 필터 초기화 행동을 제공합니다.","error":"마지막 정상 데이터를 보존하고 실패 영역에 재시도를 제공합니다."},"tokenMapping":[{"path":"klic.component.block.color.surface","purpose":"페이지 표면","cssVariable":"--klic-component-block-color-surface","cssProperty":"background-color","value":"#fbfcfe","chain":["klic.component.block.color.surface","klic.semantic.color.surface","klic.brand.color.surface","klic.primitive.color.theme.klic.light.surface"],"tailwind":"bg-[var(--klic-component-block-color-surface)]"},{"path":"klic.component.block.color.panel","purpose":"컨테이너 표면","cssVariable":"--klic-component-block-color-panel","cssProperty":"background-color","value":"#ffffff","chain":["klic.component.block.color.panel","klic.semantic.color.panel","klic.brand.color.panel","klic.primitive.color.theme.klic.light.panel"],"tailwind":"bg-[var(--klic-component-block-color-panel)]"},{"path":"klic.component.block.color.soft","purpose":"보조 표면","cssVariable":"--klic-component-block-color-soft","cssProperty":"background-color","value":"#f5f7fb","chain":["klic.component.block.color.soft","klic.semantic.color.surface-soft","klic.brand.color.surface-soft","klic.primitive.color.theme.klic.light.soft"],"tailwind":"bg-[var(--klic-component-block-color-soft)]"},{"path":"klic.component.block.color.selected","purpose":"선택 표면","cssVariable":"--klic-component-block-color-selected","cssProperty":"background-color","value":"#eaf0fb","chain":["klic.component.block.color.selected","klic.semantic.color.surface-selected","klic.brand.color.surface-selected","klic.primitive.color.theme.klic.light.selected"],"tailwind":"bg-[var(--klic-component-block-color-selected)]"},{"path":"klic.component.block.color.text","purpose":"본문","cssVariable":"--klic-component-block-color-text","cssProperty":"color","value":"#132c46","chain":["klic.component.block.color.text","klic.semantic.color.text","klic.brand.color.text","klic.primitive.color.theme.klic.light.text"],"tailwind":"text-[var(--klic-component-block-color-text)]"},{"path":"klic.component.block.color.muted","purpose":"보조 문구","cssVariable":"--klic-component-block-color-muted","cssProperty":"color","value":"#52657b","chain":["klic.component.block.color.muted","klic.semantic.color.muted","klic.brand.color.muted","klic.primitive.color.theme.klic.light.muted"],"tailwind":"text-[var(--klic-component-block-color-muted)]"},{"path":"klic.component.block.color.border","purpose":"구분 경계","cssVariable":"--klic-component-block-color-border","cssProperty":"border-color","value":"#dfe5ee","chain":["klic.component.block.color.border","klic.semantic.color.border","klic.brand.color.border","klic.primitive.color.theme.klic.light.line"],"tailwind":"border-[var(--klic-component-block-color-border)]"},{"path":"klic.component.block.color.control-border","purpose":"컨트롤 경계","cssVariable":"--klic-component-block-color-control-border","cssProperty":"border-color","value":"#7e8fa7","chain":["klic.component.block.color.control-border","klic.semantic.color.control-border","klic.brand.color.control-border","klic.primitive.color.theme.klic.light.control-border"],"tailwind":"border-[var(--klic-component-block-color-control-border)]"},{"path":"klic.component.block.color.accent","purpose":"주요 행동","cssVariable":"--klic-component-block-color-accent","cssProperty":"color","value":"#245fc2","chain":["klic.component.block.color.accent","klic.semantic.color.accent","klic.brand.color.accent","klic.primitive.color.palette.klic.accent"],"tailwind":"text-[var(--klic-component-block-color-accent)]"},{"path":"klic.component.block.color.accent-hover","purpose":"주요 행동 호버","cssVariable":"--klic-component-block-color-accent-hover","cssProperty":"color","value":"#1c4fa4","chain":["klic.component.block.color.accent-hover","klic.semantic.color.accent-hover","klic.brand.color.accent-hover","klic.primitive.color.palette.klic.hover"],"tailwind":"text-[var(--klic-component-block-color-accent-hover)]"},{"path":"klic.component.block.color.on-accent","purpose":"강조 위 문구","cssVariable":"--klic-component-block-color-on-accent","cssProperty":"color","value":"#ffffff","chain":["klic.component.block.color.on-accent","klic.semantic.color.on-accent","klic.brand.color.on-accent","klic.primitive.color.white"],"tailwind":"text-[var(--klic-component-block-color-on-accent)]"},{"path":"klic.component.block.color.success","purpose":"완료 의미","cssVariable":"--klic-component-block-color-success","cssProperty":"color","value":"#1c4fa4","chain":["klic.component.block.color.success","klic.semantic.color.success","klic.brand.color.success","klic.primitive.color.palette.klic.hover"],"tailwind":"text-[var(--klic-component-block-color-success)]"},{"path":"klic.component.block.color.success-surface","purpose":"완료 표면","cssVariable":"--klic-component-block-color-success-surface","cssProperty":"background-color","value":"#eaf0fb","chain":["klic.component.block.color.success-surface","klic.semantic.color.success-surface","klic.brand.color.success-surface","klic.primitive.color.blue-050"],"tailwind":"bg-[var(--klic-component-block-color-success-surface)]"},{"path":"klic.component.block.color.warning","purpose":"주의 의미","cssVariable":"--klic-component-block-color-warning","cssProperty":"color","value":"#835600","chain":["klic.component.block.color.warning","klic.semantic.color.warning","klic.brand.color.warning","klic.primitive.color.warning-800"],"tailwind":"text-[var(--klic-component-block-color-warning)]"},{"path":"klic.component.block.color.warning-surface","purpose":"주의 표면","cssVariable":"--klic-component-block-color-warning-surface","cssProperty":"background-color","value":"#fff4dd","chain":["klic.component.block.color.warning-surface","klic.semantic.color.warning-surface","klic.brand.color.warning-surface","klic.primitive.color.warning-050"],"tailwind":"bg-[var(--klic-component-block-color-warning-surface)]"},{"path":"klic.component.block.color.danger","purpose":"오류 의미","cssVariable":"--klic-component-block-color-danger","cssProperty":"color","value":"#b13c43","chain":["klic.component.block.color.danger","klic.semantic.color.danger","klic.brand.color.danger","klic.primitive.color.danger-700"],"tailwind":"text-[var(--klic-component-block-color-danger)]"},{"path":"klic.component.block.color.danger-surface","purpose":"오류 표면","cssVariable":"--klic-component-block-color-danger-surface","cssProperty":"background-color","value":"#fff0f0","chain":["klic.component.block.color.danger-surface","klic.semantic.color.danger-surface","klic.brand.color.danger-surface","klic.primitive.color.danger-050"],"tailwind":"bg-[var(--klic-component-block-color-danger-surface)]"},{"path":"klic.component.block.content.max-width","purpose":"콘텐츠 최대 폭","cssVariable":"--klic-component-block-content-max-width","cssProperty":"max-width","value":"80rem","chain":["klic.component.block.content.max-width","klic.semantic.size.layout.content.max","klic.brand.dimension.content.width.wide","klic.primitive.dimension.content.width.wide"],"tailwind":"max-w-[var(--klic-component-block-content-max-width)]"},{"path":"klic.component.block.section.gap","purpose":"섹션 간격","cssVariable":"--klic-component-block-section-gap","cssProperty":"gap","value":"1.5rem","chain":["klic.component.block.section.gap","klic.semantic.space.layout.section","klic.brand.spacing.section","klic.primitive.dimension.step.6"],"tailwind":"gap-[var(--klic-component-block-section-gap)]"},{"path":"klic.component.block.container.padding","purpose":"컨테이너 안쪽 간격","cssVariable":"--klic-component-block-container-padding","cssProperty":"padding","value":"1rem","chain":["klic.component.block.container.padding","klic.semantic.space.container.default","klic.brand.spacing.md","klic.primitive.dimension.step.4"],"tailwind":"p-[var(--klic-component-block-container-padding)]"},{"path":"klic.component.block.control.height","purpose":"컨트롤 최소 높이","cssVariable":"--klic-component-block-control-height","cssProperty":"min-height","value":"2rem","chain":["klic.component.block.control.height","klic.semantic.size.action.default","klic.brand.dimension.control.height.md","klic.primitive.dimension.step.8"],"tailwind":"min-h-[var(--klic-component-block-control-height)]"},{"path":"klic.component.block.surface.radius","purpose":"표면 반경","cssVariable":"--klic-component-block-surface-radius","cssProperty":"border-radius","value":"0.5rem","chain":["klic.component.block.surface.radius","klic.semantic.radius.container.default","klic.brand.radius.md","klic.primitive.dimension.step.2"],"tailwind":"rounded-[var(--klic-component-block-surface-radius)]"},{"path":"klic.component.block.icon.size","purpose":"아이콘 크기","cssVariable":"--klic-component-block-icon-size","cssProperty":"width","value":"1rem","chain":["klic.component.block.icon.size","klic.semantic.size.icon.default","klic.brand.icon.size.md","klic.primitive.dimension.step.4"],"tailwind":"w-[var(--klic-component-block-icon-size)]"},{"path":"klic.component.block.typography.body.font-size","purpose":"본문 크기","cssVariable":"--klic-component-block-typography-body-font-size","cssProperty":"font-size","value":"1rem","chain":["klic.component.block.typography.body.font-size","klic.semantic.typography.body.font-size","klic.brand.typography.scale.body.font-size","klic.primitive.dimension.step.4"],"tailwind":"text-[length:var(--klic-component-block-typography-body-font-size)]"},{"path":"klic.component.block.typography.label.font-size","purpose":"레이블 크기","cssVariable":"--klic-component-block-typography-label-font-size","cssProperty":"font-size","value":"0.75rem","chain":["klic.component.block.typography.label.font-size","klic.semantic.typography.label.font-size","klic.brand.typography.scale.label.font-size","klic.primitive.dimension.step.3"],"tailwind":"text-[length:var(--klic-component-block-typography-label-font-size)]"}],"limitations":["각 디멘션의 상태는 정책 채택(policy-adopted)이다. 연결된 소스나 토큰이 존재한다는 사실을 실제 동작 검증 완료로 해석하지 않는다.","실제 200% 브라우저 확대·스크린리더·한글 IME·forced-colors·물리 모바일 키보드는 미검증이다. 지원 환경별 결과와 예외 근거를 별도로 기록한다.","사용자 제공 상호작용 참고를 KLIC 토큰과 샘플 데이터로 재해석한 독립 구현입니다. 실제 업로드·로그 수신·CI 실행은 하지 않습니다.","참고 화면의 제품명·브랜드·소스 구현을 복사하지 않은 KLIC 독립 샘플입니다. 외부 저장·전송·실행은 하지 않습니다."],"checklist":["키보드로 주요 행동을 실행합니다.","compact·normal·relaxed와 Light/Dark를 각각 확인합니다.","빈 결과·로딩·오류와 긴 한글 콘텐츠를 확인합니다."],"exports":{"design":"/design/block/deploy-pipeline/DESIGN.md","contract":"/design/block/deploy-pipeline/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC 배포 파이프라인 (block/deploy-pipeline)을 사용해 화면을 구성하세요. KLIC은 7개 디자인 디멘션과 4계층 토큰을 공통 기반으로 씁니다. 적용 기준은 다릅니다. 컴포넌트는 개별 조작 요소, 블록은 업무 흐름, 모션은 시간에 따른 전환을 다룹니다. 공개 npm: klic-design@0.0.3. 소스 후보 klic-design@0.0.4는 미발행이며 klic-design@0.0.3가 현재 발행본입니다. 먼저 https://design.klic.co.kr/api/v1/design-system.json의 공통 기준(revision 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97), DESIGN.md와 실제 소스를 읽고, 구현 책임·프리셋 허용 범위·충돌 해결 순서를 적용하세요. 사용 원칙·금지 사항·접근성·밀도·빈 상태·오류 처리를 준수하세요. 토큰은 klic. 4계층 참조를 보존하고 없는 API나 실제 저장 기능을 만들어내지 마세요."}