{"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":["「스플릿 아키텍처 그리드 & 3D 리본 로그인 (Split Grid & Glass Ribbon Login)」의 용도: 아키텍처 그리드 패턴 배경 위에 좌측 다크 스쿼클 로고 기반 미니멀 로그인 폼(비밀번호 표시 토글, Google·Apple 2열 소셜 버튼)과 우측 3D 아이스 블루 글래스 리본 아트 패널을 결합한 스플릿 로그인 뷰입니다.","스플릿 아키텍처 그리드 & 3D 리본 로그인 (Split Grid & Glass Ribbon Login) · 인증 분류.","제목·필드 그룹·레이블·입력·도움말·오류·제출 행동을 연결한다. 단계형 폼은 현재 단계와 이전 입력을 보존한다."],"avoid":["검증 오류를 토스트만으로 안내하거나 실패 후 입력을 지우지 않습니다.","샘플 데이터·로컬 상호작용을 실제 저장·인증·운영 기능으로 표시하지 않습니다."],"accessibility":["Tab 순서를 필드의 읽기 순서와 맞춘다. IME 조합 중 Enter가 제출이나 단계 이동을 확정하지 않도록 한다.","오류 원인과 수정 경로를 입력에 연결하고 제출 실패 시 첫 오류 또는 오류 요약으로 합리적으로 안내한다.","모든 조작의 이름·보이는 초점·실제 target 경계를 확인한다. reduced-motion에서도 기능에 필요한 상태 안내를 유지한다.","필드 열은 컨테이너 폭에 따라 한 열로 재배치한다. 레이블·도움말·오류는 줄바꿈하며 내용 길이에 맞춰 높이를 늘린다.","소프트 키보드가 열려도 입력·오류·제출·취소에 도달할 수 있도록 스크롤 소유권을 정한다.","CSS viewport·실제 콘텐츠 컨테이너·사용자 확대·명시적 density를 별개의 시험 조건으로 기록한다."],"density":{"compact":"관리자 반복 입력에만 사용합니다. 도움말·오류와 실제 클릭 영역은 유지합니다.","normal":"기본 권장 밀도입니다. 읽기 순서와 레이블·컨트롤·피드백 그룹을 유지합니다.","relaxed":"처음 작성하는 폼·긴 안내에 권장합니다. 필드 그룹의 간격을 늘립니다."},"states":[{"name":"데이터 생명주기","condition":"조합 정책","response":"입력 전·편집 중·invalid+focus·readonly·disabled·busy·저장 완료·저장 실패를 구분한다. 입력 오류는 사라지는 toast만으로 알리지 않는다."},{"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/auth-mfa-totp-verify/DESIGN.md","contract":"/design/block/auth-mfa-totp-verify/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC 스플릿 아키텍처 그리드 & 3D 리본 로그인 (Split Grid & Glass Ribbon Login) (block/auth-mfa-totp-verify)을 사용해 화면을 구성하세요. 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나 실제 저장 기능을 만들어내지 마세요."}