docs: 절대 지침 섹션 추가 (develop 동기화 + design-system 준수)

CLAUDE.md

@@ -2,6 +2,45 @@
 
 해양경찰청 AI 기반 불법어선 탐지 및 단속 지원 플랫폼
 
+## 🚨 절대 지침 (Absolute Rules)
+
+아래 두 지침은 모든 작업에 우선 적용된다. 사용자가 명시적으로 해제하지 않는 한 우회 금지.
+
+### 1. 신규 기능 설계·구현 착수 시: 원격 develop 동기화 필수
+
+신규 기능/버그 수정/리팩터 등 **어떤 작업이든 브랜치를 새로 만들기 전**에는 아래 절차를 반드시 수행한다.
+
+```bash
+git fetch origin --prune
+# origin/develop이 로컬 develop보다 앞서 있는지 확인
+git log --oneline develop..origin/develop | head
+```
+
+- **로컬 develop이 뒤처진 경우** → 사용자에게 다음을 권유하고 동의를 받은 후 진행:
+  > "`origin/develop`이 로컬보다 N개 커밋 앞서 있습니다. 최신화 후 신규 브랜치를 생성하는 것을 권장합니다. 진행할까요?"
+  승인 시: `git checkout develop && git pull --ff-only origin develop` → 그 위에서 `git checkout -b <new-branch>`
+- **로컬 develop이 최신인 경우** → 그대로 develop에서 신규 브랜치 분기
+- **로컬 develop이 없는 경우** → `git checkout -b develop origin/develop`로 tracking branch 먼저 생성
+- **로컬에 unstaged/uncommitted 변경이 있을 때** → 사용자에게 먼저 알리고 stash/commit 여부 확인 후 진행. 임의로 폐기 금지.
+
+**이유**: 오래된 develop 위에서 작업하면 머지 충돌·리베이스 비용이 커지고, 이미 해결된 이슈를 중복 해결할 위험이 있다. 브랜치 분기 시점의 기반을 항상 최신으로 맞춘다.
+
+**적용 범위**: `/push`, `/mr`, `/create-mr`, `/release`, `/fix-issue` 스킬 실행 시, 그리고 Claude가 자발적으로 새 브랜치를 만들 때 모두.
+
+### 2. 프론트엔드 개발 시: `design-system.html` 쇼케이스 규칙 전면 준수
+
+`frontend/` 하위의 모든 페이지·컴포넌트·스타일 작성은 `design-system.html`(쇼케이스)에 정의된 컴포넌트·토큰·카탈로그만 사용한다. 이 문서 하단 **"디자인 시스템 (필수 준수)"** 섹션의 규칙을 **예외 없이** 따른다.
+
+핵심 요약 (상세는 하단 섹션 참조):
+- 공통 컴포넌트 우선 사용: `Badge`, `Button`, `Input`, `Select`, `TabBar`, `Card`, `PageContainer`, `PageHeader`, `Section`
+- 라벨/색상은 `shared/constants/` 카탈로그 API(`getAlertLevelIntent` 등) 경유, ad-hoc 문자열 매핑 금지
+- **인라인 색상·하드코딩 Tailwind 색상·`!important` 전면 금지**
+- 접근성: `<button type="button">`, 아이콘 전용은 `aria-label`, 폼 요소는 `aria-label`/`<label>` 필수
+
+위반 시 리뷰 단계에서 반려 대상. 신규 페이지는 하단의 **"페이지 작성 표준 템플릿"** 을 시작점으로 사용한다.
+
+---
+
 ## 모노레포 구조
 
 ```