AI 코딩 — 규칙과 프롬프트

이 프로젝트는 JANYTREE 디자인 시스템(JDS) v5.0을 사용합니다.
스펙: https://ds.janytree.app/llms.txt

절대 규칙:
1. 색·크기·간격에 리터럴 값을 쓰지 마세요. hex, rgb(), 임의 px 전부 금지.
   반드시 var(--토큰) 을 씁니다.
2. Tailwind 임의값 대괄호 표기 금지 (예: bg-[#305CDE], text-[13px], p-[7px])
3. z-index 숫자 금지. --z-* 토큰만.
4. 원시 팔레트(--blue-500)를 직접 쓰지 말고 Alias(--color-*)만 쓰세요.
5. jt-tokens.css / jt-utilities.css 파일을 수정하지 마세요.
   모양을 바꿔야 하면 --jt-* 노브만 덮어씁니다.
6. 고정 width/height 금지. min-width / min-height 를 쓰세요.
7. 판정·상태를 색만으로 전달 금지. 반드시 글자를 함께 넣으세요.
8. 주버튼은 먹색(--color-primary)입니다. 파랑으로 만들지 마세요.
9. 필요한 값이 토큰에 없으면 지어내지 말고 "토큰에 없다"고 알려주세요.

컴포넌트는 .jt-* 클래스를 씁니다 (버튼 .jt-btn, 입력 .jt-input,
표 .jt-table, 배지 .jt-badge-pass 등 총 47종).

작업 후에는 하드코딩된 색·크기가 남았는지 스스로 검사하고 보고하세요.

--- 아래는 JDS v5.0 압축 스펙 ---
(여기에 llms.txt 내용 붙여넣기)

이 앱은 이미 운영 중입니다. JANYTREE 디자인 시스템(JDS) v5.0을 입히려 합니다.

가장 중요한 규칙:
- 구조·클래스명·레이아웃·기능을 절대 바꾸지 마세요.
- 이번 작업 범위는 "색상 값만" 입니다. 그 외에는 손대지 마세요.
- 하드코딩된 색을 var(--color-*) 로만 교체합니다.
- 어떤 값을 어떤 토큰으로 바꿨는지 표로 보고하세요.
- 대응되는 토큰이 애매하면 바꾸지 말고 물어보세요.

색 대응:
  주버튼·헤더·본문 글자 → var(--color-primary) / var(--color-text)
  링크·포커스·활성 탭   → var(--color-accent)
  카드 배경             → var(--color-bg-container)
  페이지 배경           → var(--color-bg-layout)
  테두리                → var(--color-border)   (입력칸은 --color-border-strong)
  보조 글자             → var(--color-text-secondary)
  성공/경고/오류        → var(--color-success) / --color-warning / --color-error

--- 아래는 JDS v5.0 압축 스펙 ---
(여기에 llms.txt 내용 붙여넣기)

아래 색과 규칙만 사용해서 디자인해 주세요. 다른 색을 만들지 마세요.

색 (이 목록 밖의 색 금지)
  주요/글자   1F2328    보조 글자 6B7684    비활성 B0B8C1
  링크·강조   305CDE
  페이지 배경 F9FAFB    카드 배경 FFFFFF    테두리 E5E8EB
  성공 0F8E5F   경고 F0B01C   오류 C93A3F   과학·임상 12A3A3

규칙
  - 주요 버튼은 1F2328 채움 + 흰 글자입니다. 파란 버튼을 만들지 마세요.
  - 본문 글자 16px. 크기는 12/14/16/18/20/24/28/32 중에서만 고르세요.
  - 간격은 4의 배수만 (4·8·12·16·20·24·32·40·48).
  - 모서리 둥글기는 0 / 4 / 8 / 16 / 24px 중에서만.
  - 버튼·입력 높이는 40px (작은 것 32px, 큰 것 48px).
  - 터치 영역은 최소 44 x 44px.
  - 그림자는 아주 옅게. 짙은 드롭섀도 금지.
  - 폰트는 Pretendard(한글·영문), 숫자는 Figtree.