📝 프로젝트 등록 페이지 간소화 및 개선

핵심 변경사항:
✅ 간단한 프로젝트 등록 요청 시스템으로 변경
- 복잡한 2단계 시스템 → 간단한 요청 폼으로 단순화
- 필수 입력 항목만 4개로 축소

📋 새로운 입력 항목 (4개만)
1. 프로젝트명 *
2. 고객사 정보 (엔드유저 * + EPC/실제고객사)
3. 납기일 *
4. 납품방식 * (현장납품/공장인도/부분납품)

🎯 Job No. 자동 생성 시스템
- TK-년도-순번 규칙 (예: TK-2024-156)
- 실시간 미리보기 기능
- 등록 승인 후 자동 부여

🎨 UI/UX 개선
- 좌측: 간단한 등록 폼
- 우측: 최근 등록 요청 현황 리스트
- 상태별 색상 구분 (승인완료/검토중/추가정보필요)
- 반응형 디자인 (모바일 지원)

⚡ 인터랙티브 기능
- 실시간 Job No. 미리보기
- 폼 검증 및 제출 처리
- 새 요청 자동 리스트 추가
- 애니메이션 효과 (fade-in, slide-in)
- 초기화 버튼 기능

💾 하드코딩 데이터
- 기존 요청 3개 (승인완료/검토중/보류)
- 실제 업무 시나리오 반영
- 다양한 고객사 유형 (엔드유저 vs EPC)

시연 준비: 간단하고 직관적인 프로젝트 등록 시스템 완성

demo/styles/devonthink.css

@@ -382,6 +382,199 @@ body {
     }
 }
 
+/* 프로젝트 등록 컨테이너 */
+.project-registration-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    max-width: 1200px;
+}
+
+@media (max-width: 1000px) {
+    .project-registration-container {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 프로젝트 폼 */
+.project-form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.customer-section, .delivery-section {
+    padding: 20px;
+    background-color: var(--dt-gray-50);
+    border-radius: 8px;
+    border: 1px solid var(--dt-gray-200);
+}
+
+.customer-section h4, .delivery-section h4 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--dt-gray-800);
+    margin-bottom: 16px;
+}
+
+.customer-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+@media (max-width: 600px) {
+    .customer-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+@media (max-width: 600px) {
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 자동 생성 미리보기 */
+.generated-preview {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.generated-preview .label {
+    font-size: 14px;
+    color: var(--dt-gray-600);
+    font-weight: 500;
+}
+
+.generated-preview .value {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--dt-gray-500);
+    font-family: 'Monaco', 'Menlo', monospace;
+}
+
+.generation-rule {
+    font-size: 12px;
+    color: var(--dt-gray-500);
+    font-style: italic;
+}
+
+/* 폼 액션 */
+.form-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+    padding-top: 20px;
+    border-top: 1px solid var(--dt-gray-200);
+}
+
+@media (max-width: 600px) {
+    .form-actions {
+        flex-direction: column;
+    }
+}
+
+/* 요청 리스트 */
+.request-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.request-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border: 1px solid var(--dt-gray-200);
+    border-radius: 8px;
+    background-color: var(--dt-gray-50);
+    transition: all 0.2s ease;
+}
+
+.request-item:hover {
+    background-color: white;
+    box-shadow: var(--dt-shadow);
+}
+
+.request-item.status-approved {
+    border-left: 4px solid var(--dt-success);
+}
+
+.request-item.status-pending {
+    border-left: 4px solid var(--dt-warning);
+}
+
+.request-item.status-review {
+    border-left: 4px solid var(--dt-danger);
+}
+
+.request-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--dt-gray-800);
+    margin-bottom: 6px;
+}
+
+.request-details {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    font-size: 12px;
+    color: var(--dt-gray-600);
+}
+
+.request-details span {
+    padding: 2px 8px;
+    background-color: white;
+    border-radius: 12px;
+    border: 1px solid var(--dt-gray-200);
+}
+
+.request-status {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+}
+
+.job-no {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--dt-primary);
+    font-family: 'Monaco', 'Menlo', monospace;
+}
+
+/* 상태별 스타일 */
+.status-warning {
+    background-color: var(--dt-danger);
+    color: white;
+}
+
+@media (max-width: 600px) {
+    .request-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+    
+    .request-status {
+        align-items: flex-start;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+    }
+}
+
 /* 자동 생성 정보 */
 .auto-generated {
     margin: 20px 0;