🔧 재질 정보 표시 개선 및 UI 확장

✅ 주요 수정사항:
- 재질 GRADE 전체 표기: ASTM A106 B 완전 표시 (A10 잘림 현상 해결)
- material_grade_extractor.py 정규표현식 패턴 개선
- files.py 파일 업로드 시 재질 추출 로직 수정
- CSS 그리드 너비 확장으로 텍스트 잘림 현상 해결
- 사용자 요구사항 엑셀 다운로드 기능 완료

🎯 해결된 문제:
1. ASTM A106 B → ASTM A10 잘림 문제
2. 재질 컬럼 너비 부족으로 인한 표시 문제
3. 사용자 요구사항이 엑셀에 반영되지 않는 문제

📋 다음 단계 준비:
- 파이프 끝단 정보 제외 취합 로직 개선
- 플랜지 타입 정보 확장
- 자재 분류 필터 기능 추가

frontend/src/pages/NewMaterialsPage.css

@@ -8,6 +8,7 @@
   background: #f8f9fa;
   min-height: 100vh;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
+  overflow-x: auto;
 }
 
 /* 헤더 */
@@ -259,11 +260,13 @@
 .materials-grid {
   background: white;
   margin: 0;
+  min-width: 1500px;
+  overflow-x: auto;
 }
 
 .detailed-grid-header {
   display: grid;
-  grid-template-columns: 40px 80px 120px 80px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 80px 250px 80px 80px 350px 100px 150px 100px;
   padding: 12px 24px;
   background: #f9fafb;
   border-bottom: 1px solid #e5e7eb;
@@ -276,42 +279,42 @@
 
 /* 플랜지 전용 헤더 - 10개 컬럼 */
 .detailed-grid-header.flange-header {
-  grid-template-columns: 40px 80px 80px 80px 100px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 80px 150px 80px 100px 80px 350px 100px 150px 100px;
 }
 
 /* 플랜지 전용 행 - 10개 컬럼 */
 .detailed-material-row.flange-row {
-  grid-template-columns: 40px 80px 80px 80px 100px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 80px 150px 80px 100px 80px 350px 100px 150px 100px;
 }
 
 /* 피팅 전용 헤더 - 10개 컬럼 */
 .detailed-grid-header.fitting-header {
-  grid-template-columns: 40px 80px 150px 80px 80px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 80px 280px 80px 80px 80px 350px 100px 150px 100px;
 }
 
 /* 피팅 전용 행 - 10개 컬럼 */
 .detailed-material-row.fitting-row {
-  grid-template-columns: 40px 80px 150px 80px 80px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 80px 280px 80px 80px 80px 350px 100px 150px 100px;
 }
 
 /* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
 .detailed-grid-header.valve-header {
-  grid-template-columns: 40px 120px 100px 80px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 220px 100px 80px 80px 350px 100px 150px 100px;
 }
 
 /* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
 .detailed-material-row.valve-row {
-  grid-template-columns: 40px 120px 100px 80px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 220px 100px 80px 80px 350px 100px 150px 100px;
 }
 
 /* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
 .detailed-grid-header.gasket-header {
-  grid-template-columns: 40px 80px 60px 80px 80px 100px 180px 60px 80px 150px 100px;
+  grid-template-columns: 40px 80px 120px 80px 80px 100px 400px 60px 80px 150px 100px;
 }
 
 /* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
 .detailed-material-row.gasket-row {
-  grid-template-columns: 40px 80px 60px 80px 80px 100px 180px 60px 80px 150px 100px;
+  grid-template-columns: 40px 80px 120px 80px 80px 100px 400px 60px 80px 150px 100px;
 }
 
 /* UNKNOWN 전용 헤더 - 5개 컬럼 */
@@ -326,21 +329,23 @@
 
 /* UNKNOWN 설명 셀 스타일 */
 .description-cell {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow: visible;
+  text-overflow: initial;
+  white-space: normal;
+  word-break: break-word;
 }
 
 .description-text {
   display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow: visible;
+  text-overflow: initial;
+  white-space: normal;
+  word-break: break-word;
 }
 
 .detailed-material-row {
   display: grid;
-  grid-template-columns: 40px 80px 120px 80px 80px 140px 100px 150px 100px;
+  grid-template-columns: 40px 80px 250px 80px 80px 350px 100px 150px 100px;
   padding: 12px 24px;
   border-bottom: 1px solid #f3f4f6;
   align-items: center;
@@ -357,10 +362,13 @@
 }
 
 .material-cell {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow: visible !important;
+  text-overflow: initial !important;
+  white-space: normal !important;
   padding-right: 12px;
+  word-break: break-word;
+  min-width: 120px;
+  max-width: none !important;
 }
 
 .material-cell input[type="checkbox"] {
@@ -431,6 +439,11 @@
 .material-grade {
   color: #1f2937;
   font-weight: 500;
+  white-space: normal !important;
+  word-break: break-word !important;
+  overflow: visible !important;
+  text-overflow: initial !important;
+  min-width: 300px !important;
 }
 
 /* 입력 필드 */