{"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":["「병렬 실행과 동기화」의 용도: 분기와 합류 접점을 구분해 병렬 작업의 동기화를 표시합니다.","관계의 방향과 의미를 명시할 때 사용합니다."],"avoid":["좁은 화면을 이유로 수치·단위·범례를 생략하거나 폰트를 일괄 축소하지 않습니다.","샘플 데이터·로컬 상호작용을 실제 저장·인증·운영 기능으로 표시하지 않습니다.","색상이나 모션만으로 관계의 의미를 전달하지 않습니다."],"accessibility":["Tab으로 연결선과 노드를 이동하고 Enter·Space로 선택합니다. 관계 표의 버튼으로도 같은 선택을 제공합니다.","조정값은 range의 방향키로 변경하고 초기화·SVG·JSON 내보내기를 키보드로 실행합니다.","모든 조작의 이름·보이는 초점·실제 target 경계를 확인한다. reduced-motion에서도 기능에 필요한 상태 안내를 유지한다.","2차원 다이어그램은 내부 가로 스크롤을 허용하고 관계 목록과 조정 컨트롤은 좁은 폭에서도 접근 가능하게 유지합니다.","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·물리 모바일 키보드는 미검증이다. 지원 환경별 결과와 예외 근거를 별도로 기록한다.","미리보기와 예제 코드는 제공 ZIP을 KLIC에 맞추는 구현 범위다. 제품 저장·인증·외부 연동·배포의 완료를 보장하지 않는다."],"checklist":["키보드로 주요 행동을 실행합니다.","compact·normal·relaxed와 Light/Dark를 각각 확인합니다.","빈 결과·로딩·오류와 긴 한글 콘텐츠를 확인합니다."],"exports":{"design":"/design/block/flow-connector-parallel/DESIGN.md","contract":"/design/block/flow-connector-parallel/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC 병렬 실행과 동기화 (block/flow-connector-parallel)을 사용해 화면을 구성하세요. 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나 실제 저장 기능을 만들어내지 마세요."}