{"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":["시간 슬라이더의 방향키, 재생·초기화·배속·반복 컨트롤과 작업 버튼으로 같은 상태에 접근합니다.","연결선은 장식용 SVG입니다. 선행 작업 관계는 선택 상세의 이름 있는 버튼으로도 제공합니다.","모든 조작의 이름·보이는 초점·실제 target 경계를 확인한다. reduced-motion에서도 기능에 필요한 상태 안내를 유지한다.","표·워터폴·스윔레인은 내부 가로 스크롤을 유지합니다. 바깥 페이지, 툴바와 상세는 좁은 폭에 맞춰 재배치합니다.","CSS viewport·실제 콘텐츠 컨테이너·사용자 확대·명시적 density를 별개의 시험 조건으로 기록한다."],"density":{"compact":"반복 목록에서만 여백을 줄이고 주요 행동 간격은 유지합니다.","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에 맞추는 구현 범위다. 제품 저장·인증·외부 연동·배포의 완료를 보장하지 않는다.","예제의 비용은 단계 비용에 경과 비율을 곱해 누적하는 시뮬레이션입니다. 실제 청구·배포·승인·외부 API를 실행하지 않습니다."],"checklist":["키보드로 주요 행동을 실행합니다.","compact·normal·relaxed와 Light/Dark를 각각 확인합니다.","빈 결과·로딩·오류와 긴 한글 콘텐츠를 확인합니다."],"exports":{"design":"/design/block/timeline-release-gates/DESIGN.md","contract":"/design/block/timeline-release-gates/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC 릴리즈 게이트 타임라인 (block/timeline-release-gates)을 사용해 화면을 구성하세요. 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나 실제 저장 기능을 만들어내지 마세요."}