docs: [CLAUDE.md] Tailwind CSS 레이아웃 규칙 추가

- 반응형 클래스 대신 inline style 사용 규칙
- flex 레이아웃 패턴 정리
- w-full 금지 규칙 (flex 컨테이너 자식)

CLAUDE.md

@@ -86,6 +86,46 @@ ## 프로젝트 기술 스택
 
 ---
 
+## Tailwind CSS 레이아웃 규칙 (필수)
+
+> **경고: 이 프로젝트는 Tailwind CSS 빌드 시점에 포함되지 않은 유틸리티 클래스가 런타임에 적용되지 않습니다.**
+
+### 반응형 클래스 대신 inline style 사용
+
+Tailwind 반응형 클래스(`sm:`, `md:`, `lg:`)가 빌드에 누락될 수 있으므로, **레이아웃 관련 속성은 inline style을 사용**한다.
+
+```
+❌ class="w-full sm:w-1/3 sm:flex-nowrap"
+✅ style="flex: 1 1 250px; max-width: 400px;"
+```
+
+### flex 레이아웃 패턴
+
+| 항목 유형 | 사용 방법 | 예시 |
+|----------|----------|------|
+| 가변 너비 | inline style flex | `style="flex: 1 1 250px; max-width: 400px;"` |
+| 고정 너비 | `shrink-0` + inline width | `class="shrink-0" style="width: 140px;"` |
+| 줄바꿈 방지 | `whitespace-nowrap` | `class="whitespace-nowrap"` |
+
+### flex 컨테이너 직계 자식에서 `w-full` 금지
+
+`flex-wrap` 컨테이너에서 `w-full`은 항목이 한 줄 전체를 차지하여 **줄바꿈을 유발**한다. flex 자식 요소의 너비는 flex 속성이나 inline style로 제어한다.
+
+```
+❌ <div class="w-full sm:w-1/3">  ← w-full이 줄바꿈 유발
+✅ <div style="flex: 1 1 250px; max-width: 400px;">  ← inline flex로 제어
+```
+
+### Tailwind 기본 클래스는 그대로 사용
+
+색상, 패딩, 마진, 보더, 라운드 등 **비-반응형 클래스는 Tailwind 사용**:
+
+```html
+class="px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-800"
+```
+
+---
+
 ## 데이터베이스 아키텍처 (필수 규칙)
 
 > **경고: MNG 프로젝트에서는 마이그레이션 파일을 생성하지 않습니다!**