{"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":["「분기 마일스톤 로드맵 간트 차트 (Quarterly Milestone Roadmap)」의 용도: 2026년 Q1~Q4 분기별 전략 이니셔티브와 핵심 결과(OKR) 달성률, 주요 출시 다이아몬드 마일스톤(◆) 마커, 분기 필터 및 실시간 마일스톤 추가를 지원하는 연간 로드맵 간트 블록입니다.","분기 마일스톤 로드맵 간트 차트 (Quarterly Milestone Roadmap) · 간트 차트 분류.","작업명·시간 축·일정 막대·범례·선택 상세를 연결한다. 작업 ID와 시작·종료·진행률의 의미를 유지한다."],"avoid":["좁은 화면을 이유로 수치·단위·범례를 생략하거나 폰트를 일괄 축소하지 않습니다.","샘플 데이터·로컬 상호작용을 실제 저장·인증·운영 기능으로 표시하지 않습니다."],"accessibility":["작업 선택과 상세 열기를 키보드로 실행할 수 있게 한다. 편집 취소 후 해당 작업으로 초점을 복귀시킨다.","기간 변경은 드래그 외에 버튼 또는 날짜 입력으로도 제공한다.","모든 조작의 이름·보이는 초점·실제 target 경계를 확인한다. reduced-motion에서도 기능에 필요한 상태 안내를 유지한다.","시간 축과 행의 의미가 필요한 2차원 영역은 내부 가로 스크롤을 허용한다. 페이지 자체는 가로로 넘치지 않게 한다.","좁은 폭에서는 필터와 상세를 재배치하며 글자·행을 자동 축소하지 않는다.","CSS viewport·실제 콘텐츠 컨테이너·사용자 확대·명시적 density를 별개의 시험 조건으로 기록한다."],"density":{"compact":"데이터 비교·반복 행에 사용하며 셀 padding만 줄입니다. 글자 크기와 단위는 유지합니다.","normal":"기본 권장 밀도입니다. 읽기 순서와 레이블·컨트롤·피드백 그룹을 유지합니다.","relaxed":"설명 중심·프레젠테이션 화면에 사용합니다. 정보 계층을 유지하며 여백을 늘립니다."},"states":[{"name":"데이터 생명주기","condition":"조합 정책","response":"최초 로딩, 일정 없음, 필터 0건, 기간 변경 중, 저장 실패를 구분한다. 실패 시 마지막 확정 일정과 선택을 복구한다."},{"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/gantt-milestone-roadmap/DESIGN.md","contract":"/design/block/gantt-milestone-roadmap/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC 분기 마일스톤 로드맵 간트 차트 (Quarterly Milestone Roadmap) (block/gantt-milestone-roadmap)을 사용해 화면을 구성하세요. 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나 실제 저장 기능을 만들어내지 마세요."}