# JANYTREE Design System (JDS) v5.0 — AI 참조용 압축 스펙
# 출처: https://ds.janytree.app  ·  값의 정본: jt-tokens.css
# 이 파일을 프롬프트에 통째로 붙여넣고 작업하세요.

## 0. 절대 규칙 (어길 경우 결과물을 폐기합니다)
1. 색·크기·간격에 **리터럴 값을 쓰지 않는다**. #hex, rgb(), 임의 px 전부 금지. 반드시 var(--토큰).
2. Tailwind 임의값 대괄호 표기 금지: bg-[#305CDE], text-[13px], p-[7px] 등 전부 금지.
3. z-index 숫자 금지. --z-* 토큰만.
4. 원시 팔레트(--blue-500 등)를 컴포넌트에서 직접 쓰지 않는다. Alias(--color-*)만.
5. 시스템 CSS 파일(jt-tokens.css / jt-utilities.css)을 수정하지 않는다. --jt-* 노브만 덮어쓴다.
6. 고정 width/height 금지. min-width / min-height 사용 (다국어 텍스트 팽창 대비).
7. 판정·상태를 색만으로 전달 금지. 반드시 글자 병기.
8. --color-text-tertiary 를 글자에 쓰지 않는다 (대비 3.04:1로 기준 미달).
9. word-break:keep-all 을 전역/중일태국어에 적용 금지 (:lang(ko) 한정, 토큰 파일이 이미 처리).
10. 새 값이 필요하면 지어내지 말고 '토큰에 없다'고 보고한다.

## 1. 설치 (이 두 줄이면 웹폰트까지 포함)
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-tokens.css">
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-utilities.css">
다크: <html data-theme="dark">  ·  밀도: data-density="compact"  ·  큰조판: data-typeset="expressive"

## 2. 브랜드 원칙 (2톤 모델)
Charcoal #1F2328 = primary = '이것이 제니트리다' → 솔리드 주버튼·헤더·본문
Blue     #305CDE = accent  = '여기를 누를 수 있다' → 링크·포커스·활성탭·선택행
⚠️ 주버튼을 파랑으로 만들지 말 것. 뉴트럴이 화면의 90%, 색은 의미가 있을 때만.

## 3. 토큰 목록 (이름만. 값은 CSS가 가짐)
폰트 (3)
  --font-base --font-num --font-display
타입 Productive (9)
  --fs-2xs --fs-xs --fs-sm --fs-base --fs-lg --fs-xl --fs-2xl --fs-3xl --fs-4xl
타입 Expressive (3)
  --fs-display-sm --fs-display-md --fs-display-lg
행간·자간 (6)
  --lh-display --lh-tight --lh-snug --lh-normal --lh-relaxed --ls-display
간격 4px그리드 (12)
  --space-1 --space-2 --space-3 --space-4 --space-5 --space-6 --space-7 --space-8 --space-9 --space-10 --space-11 --space-12
라운드 (6)
  --r-none --r-sm --r-md --r-lg --r-xl --r-full
그림자 (7)
  --shadow-1 --shadow-2 --shadow-3 --shadow-4 --elev-card --elev-pop --elev-modal
레이어 z-index (9)
  --z-base --z-raised --z-sticky --z-drawer --z-dropdown --z-overlay --z-modal --z-toast --z-tooltip
아이콘·컨트롤 (9)
  --icon-sm --icon-md --icon-lg --control-height --control-height-sm --control-height-lg --touch-target-min --focus-ring-width --focus-ring-offset
컨테이너·브레이크포인트 (6)
  --container-narrow --container-max --container-wide --bp-mobile --bp-tablet --bp-desktop
모션 (9)
  --dur-instant --dur-fast --dur-base --dur-slow --dur-page --ease-standard --ease-decelerate --ease-accelerate --ease-emphasized
밀도 (5)
  --density-fs-base --density-fs-sm --density-lh --cell-pad-x --cell-pad-y
색 Alias (68)
  --color-text --color-text-secondary --color-text-tertiary --color-text-disabled --color-on-primary --color-bg-layout --color-bg-container --color-bg-elevated --color-fill-hover --color-fill-active --color-fill-selected --color-fill-disabled --color-text-selected --color-border-selected --color-border --color-border-strong --color-split --color-dim-weak --color-overlay --color-dim-strong --color-dim-image --color-primary --color-primary-hover --color-primary-active --color-accent --color-accent-hover --color-accent-bg --color-accent-border --color-link --color-link-hover --color-focus --color-success --color-success-bg --color-success-border --color-success-text --color-warning --color-warning-bg --color-warning-border --color-warning-text --color-error --color-error-bg --color-error-border --color-error-text --color-info --color-info-bg --color-info-border --color-info-text --color-science --color-science-bg --color-science-border --color-science-text --color-pass --color-pass-bg --color-pass-border --color-pass-text --color-fail --color-fail-bg --color-fail-border --color-fail-text --color-hold --color-hold-bg --color-hold-border --color-hold-text --color-oos --color-oos-bg --color-oos-border --color-oos-text --color-product-bg

원시 팔레트(직접 쓰지 말 것, 참고용): --neutral-0~950 --gray-50~900 --blue/green/yellow/red/purple/teal-50~900
purple·teal은 8단계: 50 100 300 400 500 600 700 900

## 4. 컴포넌트 클래스 (177개)
  .jt-accordion .jt-accordion-body .jt-accordion-head .jt-avatar .jt-avatar-lg .jt-avatar-sm .jt-badge .jt-badge-error .jt-badge-fail .jt-badge-hold .jt-badge-info .jt-badge-oos .jt-badge-pass .jt-badge-success .jt-badge-warning .jt-btn .jt-btn-danger .jt-btn-ghost .jt-btn-lg .jt-btn-sm .jt-bulkbar .jt-bulkbar-count .jt-card .jt-card-row .jt-card-row-main .jt-card-row-meta .jt-card-row-title .jt-check .jt-check-row .jt-code .jt-code-inline .jt-container .jt-container-full .jt-container-narrow .jt-container-wide .jt-crumb .jt-date .jt-date-range .jt-desc .jt-display-lg .jt-display-md .jt-display-sm .jt-divider .jt-divider-strong .jt-divider-v .jt-ellipsis .jt-empty .jt-empty-desc .jt-empty-title .jt-error .jt-filterbar .jt-grid-cards .jt-help .jt-ico .jt-ico-filled .jt-ico-lg .jt-ico-mask .jt-ico-sm .jt-ico-svg .jt-icon-btn .jt-img-caption .jt-img-overlay .jt-input .jt-label .jt-lat-display .jt-link .jt-list .jt-list-item .jt-loader .jt-loader-lg .jt-main .jt-menu .jt-menu-item .jt-menu-list .jt-menu-sep .jt-modal .jt-modal-actions .jt-modal-sm .jt-modal-title .jt-nav-item .jt-note .jt-note-error .jt-note-success .jt-note-warning .jt-num .jt-overlay .jt-page .jt-pagination .jt-popover .jt-popover-body .jt-product-img .jt-progress .jt-progress-bar .jt-progress-row .jt-progress-value .jt-r-full .jt-r-lg .jt-r-md .jt-r-none .jt-r-sm .jt-result .jt-result-desc .jt-result-fail .jt-result-hold .jt-result-icon .jt-result-pass .jt-result-title .jt-row .jt-scope .jt-search .jt-search-clear .jt-search-input .jt-select .jt-sheet .jt-sheet-dim .jt-sheet-grip .jt-shell .jt-sidebar .jt-skeleton .jt-slider .jt-sr-only .jt-stack-2 .jt-stack-3 .jt-stack-4 .jt-stack-6 .jt-stat .jt-stat-delta .jt-stat-label .jt-stat-unit .jt-stat-value .jt-step .jt-step-dot .jt-stepper .jt-stepper-btn .jt-stepper-input .jt-steps .jt-switch .jt-switch-track .jt-switcher .jt-switcher-item .jt-tab .jt-tabbar .jt-tabbar-item .jt-tabbar-label .jt-table .jt-table-empty .jt-table-wrap .jt-tabs .jt-tag .jt-tag-x .jt-textarea .jt-tile .jt-tile-desc .jt-tile-title .jt-timeline .jt-timeline-item .jt-timeline-time .jt-timeline-title .jt-toast .jt-toast-area .jt-toast-error .jt-toggletip .jt-toggletip-body .jt-tooltip .jt-tooltip-body .jt-topbar .jt-topbar-actions .jt-topbar-title .jt-tree .jt-tree-leaf .jt-tree-node .jt-upload .jt-upload-hint .jt-upload-item .jt-upload-list .jt-upload-name .jt-upload-size

## 5. 자주 쓰는 조합
버튼      <button class="jt-btn">저장</button> / .jt-btn-ghost / .jt-btn-danger / .jt-btn-sm|lg
입력      <label class="jt-label">…</label><input class="jt-input"><p class="jt-help">…</p>
여러줄    <textarea class="jt-textarea">
날짜      <input class="jt-date" type="date">
판정배지  <span class="jt-badge jt-badge-pass|fail|hold|oos">적합</span>  ← 글자 필수
표        <div class="jt-table-wrap"><table class="jt-table">…  숫자열은 class="jt-num" 우측정렬
라벨-값   <dl class="jt-desc"><dt>LOT</dt><dd class="jt-num">26H21-03</dd></dl>
카드      <div class="jt-card">  ·  선택형은 <label class="jt-tile"><input type="radio">
아이콘    <span class="jt-ico-mask" style="--jt-ico-url:url(/brand/icons/search.svg)" aria-hidden="true"></span>
모바일탭  <nav class="jt-tabbar">  ← 주요메뉴 5개 이하일 때. 6개 이상이면 드로어
도움말    모바일은 .jt-tooltip(hover) 불가 → .jt-toggletip(클릭) 사용
로딩버튼  <button class="jt-btn" data-loading="true">저장 중</button>

## 6. 레이아웃 규칙
컨테이너 4종: --container-narrow 720(문서) / --container-max 1200(앱) / --container-wide 1440(대시보드) / full
브레이크포인트: mobile ~639 / tablet 640~1023 / desktop 1024~1439 / wide 1440~
강제되는 것은 3개뿐: 간격 4px 단위 · 터치타깃 44px · 가로 스크롤 금지
구조(사이더+헤더 등)는 강제하지 않음. 앱이 정함.

## 7. 접근성 (필수)
본문 대비 4.5:1 / UI 경계 3:1 / 터치 44px
장식 아이콘 aria-hidden="true" · 아이콘만 있는 버튼 aria-label · 장식 이미지 alt=""
차트는 요약문장+수치표 병기 · QR/바코드는 코드값 텍스트 병기
증감은 색+▲▼ 기호 병기

## 8. Tailwind 사용 시
v4: jt-tailwind-v4.css (@theme inline) · v3: tailwind.config.js
⚠️ v4에서 tailwind.config.js는 에러 없이 조용히 무시됨. 버전을 먼저 확인할 것.
⚠️ content/@source 경로 누락 시 개발서버는 정상, 프로덕션 빌드에서만 스타일 소멸.
Tailwind 노출 이름은 토큰명과 다름(자기참조 방지): text-ink bg-brand bg-surface border-line text-action 등

## 9. 자가 점검
getComputedStyle(document.documentElement).getPropertyValue('--jt-ds-version') → "5.0"
하드코딩 검사: grep -rnE '#[0-9a-fA-F]{3,8}|\[[0-9]+px\]' src/