광터지하차도 새 모델 프로젝트 시작

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.local

AGENTS.md

@@ -0,0 +1,51 @@
+# 프로젝트 지침: 도면 기반 웹 3D 모델
+
+## 기본 원칙
+- 사용자와 주고받는 설명 및 웹 화면 문구는 한국어로 작성하고, 개발 초보자도 이해하기 쉬운 용어를 쓴다.
+- 작업 전 기존 폴더 구조와 코드를 확인하고 필요한 부분만 수정한다. 큰 구조 변경이 필요하면 이유와 범위를 먼저 설명한다.
+- 비밀번호, API 키 등 민감한 정보를 코드나 Git 기록에 포함하지 않는다.
+- 도면 첨부 후에는 분석, 주요 형상 모델링, 세부 형상, 뷰어 기능, 검증 및 문서화처럼 검토 가능한 작업 단위로 나누어 진행한다. 각 단위가 완료되고 변경 내용을 확인한 뒤 해당 변경만 Git 커밋으로 저장한다.
+- 커밋 메시지는 변경 내용을 쉽게 알 수 있도록 한국어로 작성한다. 사용자가 요청한 각 작업 단위별 커밋을 만들되, 원격 저장소로 푸시하거나 공개하지 않는다.
+- 도면 파일이 없거나 판독이 불가능하면 그 사실을 알리고, 도면 근거가 필요한 형상·치수를 임의로 확정하지 않는다. 정보가 부족해도 진행 가능한 부분은 먼저 진행하고 확인 항목과 나눈다.
+
+## 1. 도면 분석
+- 평면도,상부평면도,종단면도,단면도A-A,단면도B-B,측구상세도를 참고한다. 
+- 평면도·종단면도·단면도·상세도에서 같은 대상을 어떤 근거로 연결해 읽었는지 설명한다.
+- 모델은 평면도상의 선형중심선과 종단면도와 단면A-A, 단면B-B를 기준으로 한다.
+- 평면도·종단면도·단면도·상세도의 스케일값을 확인한다.
+- 평면도의 중심선형의 시점과 단면도A-A, 종점과 단면도B-B의 중심 기준점 EL값을 일치시킨다.
+- 종단면도의 시종점 벽체상단 EL값과 단면A-A와 단면B-B의 벽체 상단의 EL값이 동일한지 확인한다.
+- 실제 모델 윤곽선인 CS-CONC-MAJR,CS-CONC-MINR레이어를 가진 구조물선관 그에 해당하는 치수가 일치하는지 확인한다.
+- CS-CONC-MAJR,CS-CONC-MINR 이 두레이어의 표기 치수가 부족한 경우 실제 윤곽선을 측정하여 모델링한다.
+
+## 2. 모델링 값 기록
+- 대상별 위치, 길이, 폭, 높이, 두께, 간격, 경사 등 모델에 필요한 값을 표로 정리한다.
+- 각 값에 근거 도면 번호와 도면 안의 위치를 함께 기록한다.
+- 각 값을 다음 상태 중 하나로 표시한다: `도면 명시값`, `계산으로 도출한 값`, `추정값`, `확인 필요`.
+- 축척으로 재어 얻은 값은 도면에 적힌 치수와 혼동되지 않도록 별도로 표시한다.
+
+## 3. 오류 및 정보 부족 검토
+- 도면 간 치수·위치·높이의 불일치를 확인해 기록한다.
+- 누락되었거나 판독하기 어려운 정보를 목록으로 만든다.
+- 형상과 배치에 영향을 주는 치수는 임의로 결정하지 않고 사용자 확인을 요청한다.
+
+## 4. 모델 구성 및 생성
+- 단면도의 치수선을 제외한 구조물선을 누락없이 모델링에 반영한다.
+- 부재를 개별 선택·숨김·수정할 수 있도록 객체를 나누고 알아보기 쉬운 이름을 붙인다.
+- 도면 개정 때 치수와 배치를 쉽게 바꾸도록 값을 코드와 모델 구조에서 관리하기 쉽게 구성한다.
+- 먼저 주요 형상과 전체 배치를 만들고, 이후 세부 형상을 추가한다.
+
+## 5. 웹 3D 뷰어
+- 마우스 또는 터치로 회전·확대/축소·이동할 수 있게 한다.
+- 전체 보기와 평면·정면·측면 보기를 제공한다.
+- 객체를 선택하면 이름과 주요 치수를 보여준다.
+- 객체별 표시/숨김 기능을 제공한다.
+- 추정값 또는 확인 필요 항목으로 만든 형상은 화면에서 명확히 구분한다.
+- 기본 모델 보기와 표면 명암·배경·그림자를 적용한 렌더링 보기를 전환할 수 있게 한다. 렌더링 보기는 도면 검토용 시각화이며 실사 렌더링으로 오해하지 않도록 표시한다.
+
+## 6. 검증 및 결과 보고
+- 주요 치수, 기준 높이, 부재 개수와 배치를 원도면과 대조한다.
+- 검증 완료 항목과 미검증 항목을 나누어 보고한다.
+- 도면과 다르게 표현한 부분, 추정한 부분, 생략한 부분을 기록한다.
+- 실행 방법과 다음 수정 때 변경할 항목을 안내한다.
+- 변경 후 가능한 실행·검증을 수행하고, 확인하지 못한 부분을 명시한다.

README.md

@@ -0,0 +1,26 @@
+# 광터지하차도 새 모델 프로젝트
+
+기존 웹 모델을 이어서 수정하지 않고 새로 시작하는 프로젝트입니다. 원본 DXF를 다시 분석해 평면 선형, 종단 표고, A-A/B-B 단면의 대응을 확인한 뒤 주요 형상부터 모델링합니다.
+
+## 현재 상태
+
+- 원본 도면: `public/drawings/광터지하차도_일반도(BLOCK7).dxf`
+- 이전 분석 문서: `docs/참고_기존도면분석.md` (참고 자료이며, 새 분석으로 다시 검증해야 합니다)
+- 기존 3D 모델 코드는 복사하지 않았습니다.
+- 새 프로젝트 단계: 도면 재분석 준비
+
+## 실행
+
+```bash
+npm install
+npm run dev
+```
+
+브라우저에서 터미널에 표시된 주소를 엽니다. 배포용 파일은 `npm run build`로 만듭니다.
+
+## 작업 순서
+
+1. 원본 도면의 시트·축척·중심선·단면 위치를 다시 분석합니다.
+2. 치수와 근거, 계산값, 추정값, 확인 항목을 문서화합니다.
+3. 주요 구조 형상을 만든 뒤 세부 부재를 추가합니다.
+4. 뷰어 조작과 치수를 확인하고 원도면과 대조합니다.

docs/참고_기존도면분석.md

@@ -0,0 +1,241 @@
+# 광터지하차도 일반도 (BLOCK7) 도면 분석
+
+## 받은 파일과 도면 구성
+
+| 파일/도면 | 확인된 역할 | 확인 근거 |
+|---|---|---|
+| `광터지하차도_일반도(BLOCK7).dxf` | CAD 원본. 한 파일 안에 일반도 13번·14번과 상세 도면이 함께 있음 | 도곽 문자 `광터지하차도 일반도(13)`, `(14)`, 상세 제목들 |
+| 같은 DXF 안의 13번 시트 | 평면도, 상부 평면도, 종단면도 등 전체 배치와 BLOCK7 접속부 확인 | 도면 제목, 축척 표기 `1:100`, 위치도 `1:3500` |
+| 같은 DXF 안의 14번 시트 | 단면 A-A/B-B, 측구·슬래브·신축이음 등 구조 상세 | 도면 제목, 축척 표기 `1:100`, `1:30`, `1:20` |
+| `광터지하차도_일반도(BLOCK7).gbk` | DXF 형식의 백업 파일로 확인됨. 본 모델은 DXF를 기준으로 함 | 파일 헤더가 DXF `AC1027` |
+
+시트 제목의 `13`, `14`는 도면 페이지 번호이고, `BLOCK7`은 모델 대상 구간 이름으로 읽었다. 사용자의 지시에 따라 평면도와 상부평면도는 형상 근거에서 제외하고, 종단면의 측점과 단면 A-A/B-B의 표고·폭 치수만 연결한다.
+
+## 좌표·단위·기준
+
+- DXF 좌표는 동쪽 약 1,128,000, 북쪽 약 -80,000 부근에 놓여 있다. 이는 도면 내부 CAD 좌표이며, 이 값만으로 측지 좌표계나 절대 기준점을 특정할 수 없다.
+- DXF `$INSUNITS` 값은 `0`(미지정)이다. 도곽과 치수 표기에는 m 단위 값(예: `STA. 0K+299.000`, `19.500`, `EL. 106.675`)과 mm로 보이는 상세 치수가 함께 있다. 모델의 기준 단위는 m로 정리하되, 단위 확인이 필요한 값은 따로 표시한다.
+- 도면에 측점(STA.)과 EL. 표고가 있어 길이 방향은 측점 기준, 높이는 표고 기준으로 읽는다. 도면 원점, 좌표계 명칭, 표고 기준면은 제공 정보만으로 확인되지 않았다.
+- 전체 엔티티 범위는 X 약 -116,729~1,693,286, Y 약 -292,813~-55,495로 지나치게 크다. 일부 기준선/외부 참조 또는 도면 편집 요소가 포함됐을 가능성이 있어 이 범위를 모델 크기로 쓰지 않는다.
+
+## 도면 기호와 실제 형상 구분
+
+- DXF의 레이어 이름상 `CS-DIMT`, `CS-DIML`은 치수 문자·치수선, `CS-TEXT`, `CS-NOTE`는 제목·주기, `CS-CONC-MAJR/MINR`는 콘크리트 윤곽/세부선, `CS-SYMB`는 기호, `CX-BORD-*`는 도곽·표제란 계열이다.
+- 치수 숫자, 측점, 표고, 경사 표기(`S=-2.000%`)는 주석 정보로 취급하고 3D 부재로 만들지 않는다. 콘크리트 단면의 닫힌 외곽과 해칭 경계를 형상 후보로 취급한다.
+- DXF 내부에는 선 1,078개, TEXT 2,473개, MTEXT 10개, 삽입 블록 273개와 속성 문자 168개 등이 섞여 있다. 모든 엔티티를 모델 형상으로 변환하지 않는다.
+
+## 모델링 값 초안
+
+아래 값은 DXF 문자에서 확인한 항목이며, 실제 단면 위치와 치수선 연결은 3D 형상 확정 전에 화면 또는 CAD 뷰어에서 대조해야 한다.
+
+| 대상/값 | 값 | 구분 | 근거 위치 | 메모 |
+|---|---:|---|---|---|
+| BLOCK7 전후 측점 | STA. 0K+299.010 ~ 0K+318.990 | 도면 명시값 | 13번 종단면도, 신축이음 양 끝 | A-A/B-B 단면 위치로 연결 |
+| A-A~B-B 길이 | 19.980 m | 계산으로 도출한 값 | 종단면도 측점 차 `318.990 - 299.010` | 이전 초안의 `20.118 m`를 사용하지 않음 |
+| 접속부/U형 구간 길이 | L=19.882 m | 도면 명시값 | 종단면/구간 표기 | 인접 구간 측점 및 경계와 대조 필요 |
+| 단면 안쪽 폭 치수열 | 8.750 + 1.000 + 8.750 m | 도면 명시값 | 14번 단면 A-A/B-B, 폭 치수선 | 합계 18.500 m |
+| 횡단 경사 | S=-2.000% | 도면 명시값 | 시트 13·14, 평면/단면 주기 | 좌우 어느 쪽으로 낮아지는지 도면 방향 확인 필요 |
+| A-A 벽체 상단/하단 | EL. 106.675 / 101.636 | 도면 명시값 | 14번 단면 A-A 표고 표기 | 높이 차 5.039 m |
+| A-A 바닥판 상면 | EL. 102.436 | 도면 명시값 | 13번 종단면도, STA. 0K+299.010 | 벽체 하단과 차이 0.800 m |
+| B-B 벽체 상단/하단 | EL. 107.307 / 101.069 | 도면 명시값 | 14번 단면 B-B 및 13번 종단면도 표고 표기 | 높이 차 6.238 m |
+| B-B 바닥판 상면 | EL. 101.869 | 도면 명시값 | 13번 종단면도, STA. 0K+318.990 | 벽체 하단과 차이 0.800 m |
+| 벽체 높이 변화 | A-A 5.039 m → B-B 6.238 m | 계산으로 도출한 값 | A-A/B-B의 상·하단 EL 차 | 두 단면 사이를 종단 방향으로 보간 |
+| 외벽 폭 및 벽체 두께 | 바닥 쪽 폭 20.100 m, 안쪽 폭 18.500 m, 바닥판 0.800 m | 도면 명시값/계산값 | 14번 단면 폭 치수열 `800 + 8.750 + 1.000 + 8.750 + 800` | A-A/B-B 단면에서 치수 연결을 화면으로 추가 대조해야 함 |
+| 단면의 전체 폭·내부 폭 | 20.100 m / 18.500 m로 초안 구성 | 확인 필요 | 14번 단면의 폭 치수열 | 폭 치수의 외곽/내곽 기준점을 원도면과 더 대조해야 함 |
+| 공동구 외곽(양쪽) | 폭 약 1.000 m × 높이 약 2.070 m | 도면 축척 측정 | 14번 단면의 좌우 삽입 윤곽 `A$C2017021411375356`; 단면의 CAD 단위(mm) 기준 | 치수선은 없음. 선 윤곽의 바운딩 크기이며 내부 두께는 약 0.100m로 추정 |
+| 공동구 위치·EL | 단면 중심에서 좌우 각 8.750 m. A-A 하단/상단 EL 102.598/104.668, B-B 101.949/104.019 | 도면 축척 측정 | A-A/B-B 위치의 블록 삽입점, 블록 바운딩, 벽체 상단 EL을 좌표로 연결 | 벽체 안쪽 하단. A-A와 B-B 사이 표고는 선형 연결 |
+| 측구 외곽 폭/깊이 | 약 0.500 m × 0.230 m | 도면 축척 측정 | 14번 `측구 상세`, 축척 `S=1:30` | 상세의 CAD 선 길이를 축척 환산 |
+| 측구 내부 폭/깊이 | 약 0.400 m × 0.200 m | 도면 명시값/축척 측정 | `측구 상세` 치수 `50`, `200` 및 윤곽 측정 | 측벽 약 0.050m, 바닥 약 0.030m; 바닥판 상면보다 0.050m 낮춰 표현 |
+
+도면 축척으로 측정한 값은 아직 추출하지 않았다. 위 값은 문자로 읽은 치수이며, CAD 좌표 거리를 실제 치수로 환산한 값과는 별도로 대조해야 한다.
+
+## 불일치 및 추가 확인 항목
+
+- `L=20.118m`, `20.098`, `20.100`은 종단면도 측점 차에서 구한 `19.980m`와 다르다. 사용자 지시에 따라 길이 모델에는 측점 차를 사용하고, 다른 치수는 끝점 기준을 확인하기 전 구간 길이로 쓰지 않는다.
+- `L=19.882m`와 `19.862`도 함께 나타나므로 기준점 차이 또는 치수 불일치 여부를 확인해야 한다.
+- `$INSUNITS=0`이므로 CAD 좌표 단위는 파일 헤더만으로 확정할 수 없다. 치수열 및 알려진 구간 길이와 비교해 스케일을 확인해야 한다.
+- 기준 좌표계/원점, EL 표고의 기준면, 단면 A-A/B-B가 평면상 어느 위치인지, 0.5/0.8/0.1m 치수가 가리키는 부재를 확인해야 한다.
+- 공동구에는 상세 치수가 없어서 DXF 블록의 외곽 선을 측정했다. 외곽 크기는 약 1.000m×2.070m이며, 블록 내부 선은 단순 직사각형과 다르므로 모델은 바운딩 크기에 맞춘 개략 공동구로 표현하고 벽 두께 0.100m는 추정으로 표시한다. EL은 각 단면의 벽체 상단 표고와 블록 삽입 좌표의 차이로 구했다.
+- 측구 상세의 `50`, `200`은 표기 치수로 사용하고, 폭 0.500m·바닥 0.030m·전체 깊이 0.230m는 `S=1:30` 윤곽으로 측정했다. 모델에서는 양쪽 벽체 하단에 놓았다.
+- 측구 상세에는 구간 길이 방향의 시작·끝이 따로 표시되지 않아, 19.980m 전체에 이어지는 것으로 모델링했다. 길이 방향 연장은 추정값이다.
+- 도면 텍스트는 일부 CAD 인코딩·문자 스타일에 의존한다. 판독이 불명확한 주기는 원본 CAD에서 확인할 필요가 있다.
+
+## 모델링 범위 초안
+
+- 포함: 종단면에 표시된 19.980m 구간, 단면 A-A와 B-B의 열린 단면 바닥판 및 양쪽 벽체, 벽체 하단 양쪽의 공동구와 측구, 단면별 벽체 상·하단 EL.
+- 제외: 평면도와 상부평면도에서 가져오는 형상, 덮개/상부판, 지반·되메우기, 철근 전체, 치수선·문자·도곽, 상세 적용이 불명확한 부속물.
+- 표현 수준: A-A/B-B를 각 측점 위치에 배치하고, 바닥 EL과 벽체 상단 EL을 종단 방향으로 이어서 주요 구조 형상을 만든다. 부재는 각각 선택·숨김 가능하게 분리한다.
+- 검증 제한: 단면별 표고와 측점은 도면 문자에서 확인했다. 단면 폭의 외곽/내곽 기준, 벽체 기울기, 중간 측점의 종단 형상은 CAD 화면 대조가 추가로 필요하다.
+
+## 모델 기준 수정 기록 (사용자 지시에 따른 재구성)
+
+| 모델 항목 | 적용 값 | 상태/근거 |
+|---|---:|---|
+| 길이 방향 | 19.980 m | 종단면도의 STA. 0K+299.010(A-A)에서 0K+318.990(B-B)까지 |
+| A-A 단면 벽체 | 바닥 EL. 101.636, 상단 EL. 106.675 | 단면 A-A의 표고값 사용. 높이 5.039m |
+| B-B 단면 벽체 | 바닥 EL. 101.069, 상단 EL. 107.307 | 단면 B-B의 표고값 사용. 높이 6.238m |
+| 바닥판 상면·두께 | A-A: EL. 102.436, B-B: EL. 101.869, 두께 0.800m | 종단면의 바닥 상면과 단면 하단 EL 차로 구성 |
+| 폭 방향 | 전체 20.100m, 유효 폭 18.500m | 당시 초안의 기준. 이후 아래 「평면도 선형에 맞춘 단면 재배치」에서 평면 배치 방향도 추가 반영 |
+| 공동구(좌/우) | 외곽 약 1.000m × 2.070m, 벽 두께 약 0.100m | A-A/B-B의 연두색 윤곽을 측정. 외곽은 축척 측정, 내부 두께는 추정 상태로 화면에 표시 |
+| 측구(좌/우) | 외곽 약 0.500m × 0.230m, 내부 폭 0.400m·깊이 0.200m | 측구 상세 S=1:30의 50/200 치수와 도면 선 길이에서 추출 |
+| 벽체 연결 | A-A에서 B-B까지 각 EL을 직선 보간 | 종단면 측점 거리를 기준으로 길이 방향 변화 반영 |
+
+브라우저 모델은 부재별 표시/숨김, 선택, 회전·확대/축소·이동, 전체·평면·정면·측면 보기를 제공한다. 형상은 HTML Canvas에 투영하는 개략 모델이며, 원본 DXF를 자동 3D 변환하지 않았다. 위와 같은 종단면·단면 연결을 사용했지만, 최종 벽체 단면 윤곽과 폭 치수 위치를 CAD 화면에서 추가 대조해야 한다. 지반·되메우기·철근·도곽은 모델에서 제외했다.
+
+## 사용자 지시에 따른 단면 레이어 재구성
+
+기존 치수 기반의 단순 벽체·바닥판과 축척 추정 공동구·측구 객체를 제거했다. 현재 웹 모델은 평면도·상부평면도를 형상 근거로 사용하지 않고, 14번 시트의 단면 A-A/B-B에서 `CS-CONC-MAJR`, `CS-CONC-MINR` 레이어 선을 읽어 13번 종단면도의 측점 및 EL 기준으로 연결한다.
+
+| 항목 | 적용 내용 | 상태와 근거 |
+|---|---|---|
+| 단면 연결 위치 | A-A `0K+299.010`에서 B-B `0K+318.990`, 길이 `19.980 m` | 도면 명시 측점, 차이 계산 |
+| 횡방향 기준 | CAD X 중심 `1,128,486.2181`, 폭 방향 좌표로 환산 | 단면 바깥 폭 경계 `1,118,436.2181~1,138,536.2181`의 중심 계산 |
+| A-A 표고 변환 | CAD Y `-74,271`을 EL `106.675`에 맞춤, CAD 1,000 단위 = 1 m | 단면 A-A 상단 EL 및 DXF 좌표 축척 대조 |
+| B-B 표고 변환 | CAD Y `-91,211`을 EL `107.307`에 맞춤, CAD 1,000 단위 = 1 m | 단면 B-B 상단 EL 및 DXF 좌표 축척 대조 |
+| 주요 콘크리트 선 | A-A 90개, B-B 90개를 동일 횡방향 끝점 순서로 연결 | `CS-CONC-MAJR`; 반복되는 긴 내부 해칭 대각선 18개씩 제외 |
+| 세부 콘크리트 선 | A-A 6개, B-B 6개를 연결 | `CS-CONC-MINR`; DXF 선 좌표 직접 사용 |
+| 길이 방향 중간 형상 | A-A와 B-B 사이를 직선 보간 | 두 단면 사이 중간 단면이 없어 계산상 연결이며 도면 명시 형상은 아님 |
+
+좌표 데이터는 `src/model/sectionLayerGeometry.js`, 연결 로직과 표시 대상은 `src/model/block7.js`에 있다. 각 선 쌍은 STA 방향의 4점 표면으로 연결되어, 두 레이어를 웹 화면에서 별도로 선택하거나 숨길 수 있다. 이 방식은 CAD 선을 직접 반영한 **표면 연결 모델**이다. 단면 레이어의 모든 콘크리트 경계를 닫힌 체적으로 자동 복원한 것은 아니므로, 표면이 실제 구조체의 두께와 맞는지 CAD에서 최종 확인이 필요하다.
+
+공동구·측구는 해당 두 콘크리트 레이어에서 사용자 지정 윤곽으로 분리 확인되지 않아, 기존에 축척·두께를 추정해 만든 별도 상자 형상은 이번 모델에서 제거했다. 실제로 `CS-CONC-MAJR/MINR`에 포함되는 세부 윤곽은 레이어 원형 선으로 남겨 연결했다. 레이어 외의 형상·두께·길이 연장은 새로 추정하지 않았다.
+
+### 현재 검증 상태
+
+- 확인: A-A/B-B의 두 레이어 선 개수가 각각 90쌍과 6쌍으로 맞고, 대응 선의 좌우 끝점(횡방향 좌표) 순서가 같습니다.
+- 확인: 상단 CAD Y 좌표를 각 단면 상단 EL에 맞추면 바닥 경계가 A-A EL 101.636, B-B EL 101.069와 일치합니다.
+- 미검증: 긴 내부 해칭 대각선 제거 후 남은 모든 `CS-CONC-MAJR` 선이 실제 구조 경계인지, 각 세부선의 콘크리트 체적 소속인지 CAD 화면 대조가 필요합니다.
+- 미검증: 단면 A-A/B-B 사이 실제 종단 형상이 직선 보간과 일치하는지, 중간 측점 자료가 없어 확인할 수 없습니다.
+- 미검증: 화면에 연결된 표면 모델은 체적 모델이 아니며, 시공용 구조 형상이나 철근·마감 상세 검증에 사용할 수 없습니다.
+
+## 공동구 블록 추가 반영
+
+사용자 지정 객체 `A$C2017021411375356`를 DXF에서 확인했다. 이 블록은 단면 A-A/B-B의 좌우에 각각 삽입되어 있고, 삽입 엔티티 레이어는 `CS-DIML`이다. 블록 정의 안에는 `CS-CONC-MAJR`의 LINE 18개와 ARC 2개가 있다. 이번 모델에는 블록 안의 선·호를 사용했으며, 호는 각 12개 직선 조각으로 근사했다.
+
+| 값 | 적용 | 근거/상태 |
+|---|---|---|
+| 블록 크기 | 약 폭 1.000 m × 높이 2.070 m | 블록 내부 로컬 좌표 범위 X=-500~500, Y=-900~1170. DXF 블록 좌표에서 계산 |
+| 좌우 위치 | 단면 중심에서 좌·우 약 8.750 m | CS-DIML INSERT 좌표, 오른쪽 블록의 X 반전(-1) 반영 |
+| A-A 하단/상단 | EL. 102.598 / 104.668 | A-A 삽입 좌표와 단면 상단 EL로 계산 |
+| B-B 하단/상단 | EL. 101.949 / 104.019 | B-B 삽입 좌표와 단면 상단 EL로 계산 |
+| 길이 방향 연결 | STA. 0K+299.010~0K+318.990, 19.980 m | 해당 단면 사이 직선 보간. 중간 상세는 확인 필요 |
+
+좌·우 공동구를 별도 객체로 추가해 선택·숨김할 수 있도록 했다. 색상은 콘크리트 레이어와 구분했고, 겹쳐 보이지 않도록 뷰어에서 공동구 윤곽을 위에 그린다. 이는 공동구를 확인하기 위한 화면 표시 순서이며, 겹치는 다른 구조체와의 실제 앞뒤·접합 관계를 검증한 것은 아니다. 공동구도 닫힌 체적이 아니라 DXF 윤곽을 종단 방향으로 이은 표면 모델이다.
+
+## 도로 포장면 추가
+
+단면 A-A/B-B의 `CS-CONC-MAJR` 해칭 상단 경계선을 포장면의 좌우 단면선으로 읽어, 각 측점에서 횡방향 표면 패치를 만들고 종단 방향으로 연결했다. 좌우 포장면은 중앙부에서 바깥쪽으로 낮아진다. CAD 좌표로 확인한 좌측 외측→내측은 `145 / 7,250 = +2.000%`, 우측 내측→외측은 `-145 / 7,250 = -2.000%`여서 도면의 `S=-2.000%`와 맞는다.
+
+| 항목 | 적용값 | 근거/상태 |
+|---|---:|---|
+| 횡단 경사 | 중앙부에서 좌우 바깥쪽으로 각각 -2.000% | 도면 표기 `S=-2.000%`; 실제 단면선 좌표 차이로 검산 |
+| 좌측/우측 포장 폭 | 각 약 7.250 m | A-A/B-B 해칭 상단 경계 좌표 측정 |
+| A-A 외측/내측 EL | 102.598 / 102.743 | A-A 상단 EL 기준 CAD Y 좌표 변환 |
+| B-B 외측/내측 EL | 101.949 / 102.094 | B-B 상단 EL 기준 CAD Y 좌표 변환 |
+| 종단 연결 | 19.980 m, A-A에서 B-B까지 | 종단면 측점 차, 두 단면 사이 직선 보간 |
+| 두께 | 모델 표면에 두께를 부여하지 않음 | 이번 요청은 포장면 생성이며 포장 두께 치수는 확인되지 않음 |
+
+포장면은 `도로 포장면 (횡단경사 -2%)` 객체로 분리해 선택·숨김할 수 있다. 모델 표면은 CAD 단면선에 따른 시각화이며, 포장층 두께와 재료 구성을 표현하지 않는다. A-A/B-B 사이 실제 종단 포장고 자료는 별도 확인되지 않아 두 단면 사이만 선형으로 연결했다.
+
+## 공동구 내측 하부벽체 형상 수정
+
+공동구 바로 안쪽의 낮은 벽체를 좌·우 기초벽 객체로 분리했다. 해당 벽체는 A-A/B-B 단면의 CAD 선 끝점을 연결한 표면으로 구성했다. 각 벽체는 개별 선택·숨김이 가능하다. 금속 난간의 형상은 아래 이미지 참고 추가 작업에서 별도 객체로 얹었다.
+
+| 항목 | 적용값 | 근거/상태 |
+|---|---:|---|
+| 단면 폭 | 약 0.400 m | 14번 단면 A-A/B-B, `CS-CONC-MAJR`의 x=±7.8~±8.2 윤곽 좌표 차이에서 계산 |
+| A-A 높이 | 약 0.312 m, EL. 102.236~102.548 | 14번 단면 A-A CAD 좌표와 상단 EL 기준으로 계산 |
+| B-B 높이 | 약 0.230 m, EL. 101.669~101.899 | 14번 단면 B-B CAD 좌표와 상단 EL 기준으로 계산 |
+| 길이 | 19.980 m | 13번 종단면의 STA. 0K+299.010~0K+318.990 측점 차 |
+| 상세 두께·마감 | 미표현 | 기초벽 상세와 재료 치수가 없어 단면 윤곽 기반 표면으로 표시; 확인 필요 |
+
+두 단면의 세로 윤곽은 도면 선 좌표에서 읽었지만, 기초벽 상단은 끝점 사이에 연결했다. 기초벽 두께, 길이 방향 중간 형상과 공동구 접합부는 미검증이다.
+
+## 참고 이미지 형식의 금속 난간 추가
+
+사용자가 제공한 참고 이미지처럼 낮은 콘크리트 기초벽 위에 금속 세로 지주와 둥근 가로 봉 1개를 배치했다. 좌·우 금속 난간은 기초벽과 별도 객체로 만들어 각각 선택·숨김할 수 있다. 난간 중심은 단면의 공동구 안쪽 위치(중심에서 좌·우 약 8.000m)에 두고, A-A/B-B 사이에서 기초벽 상단선을 따라 연결했다.
+
+| 항목 | 모델 값 | 상태/근거 |
+|---|---:|---|
+| 가로 난간봉 | 지름 약 0.070m, 지주 상단 높이에 설치 | 사용자 표시 단면에서 지주 끝의 원형 난간봉 위치를 반영; 지름은 이미지 비례 추정 |
+| 세로 지주 | 약 0.060m × 0.060m, 기초벽에서 높이 1.150m | 제공 이미지 비례로 추정 |
+| 지주 배치 | 한쪽당 11개, 간격 약 2.000m | 19.980m 구간에 균등 배치한 추정값 |
+| 난간 위치 | 단면 중심에서 좌·우 약 8.150m | 사용자 표시 위치를 공동구 안쪽 가장자리로 해석; 도면 좌표 기반 배치 |
+| 난간 연장 | STA. 0K+299.010~0K+318.990, 19.980m | 종단면 측점 차 |
+
+앞서 난간 위치를 공동구 중심에서 8.000m, 봉 높이를 기초벽 위 0.750m로 잘못 잡았다. 사용자가 지정한 단면 이미지를 기준으로 위치를 공동구 안쪽 가장자리인 좌·우 8.150m로 옮기고, 가로 봉을 지주 상단에 맞췄다. 참고 이미지에 축척과 치수 표기가 없어 봉 지름, 지주 크기·간격·높이는 시각 검토용 추정값이다. 도면에 금속 난간 상세가 추가되면 `communalHandrailPart`의 지주 간격, 단면 크기, 기초벽 위 높이와 봉 지름을 수정해야 한다. 재질·도장색·기초 정착 방식은 반영하지 않았다.
+
+## 수정 지침에 따른 원본 재분석 및 모델 기준 갱신 (2026-10-19)
+
+이번 갱신은 저장소의 수정된 `AGENTS.md` 1~6항을 기준으로 DXF 원본과 모델 생성 코드를 다시 대조한 결과다. 앞 절의 변경 이력은 당시 작업 기록이고, 현재 적용 기준은 이 절과 현재 `src/model/` 데이터다.
+
+### 도면 구성·축척·대상 연결
+
+| 도면 | 도면 내 표기/축척 | 재분석한 역할과 연결 근거 |
+|---|---|---|
+| 일반도 13번 평면도 | `S=1:100` | BLOCK7 구간의 평면상 중심선·위치 확인 대상. 현재 모델은 중심선 전체 형상을 아직 입력하지 않았으므로 단면 위치 배치 근거로 완결 검증하지 못함 |
+| 일반도 13번 상부평면도 | `S=1:100` | 상부 배치·부재 위치의 교차 확인 자료. 평면 중심선 및 구조 외곽과 대조해야 함 |
+| 일반도 13번 종단면도 | `S=1:100` | 측점 `0K+299.010`, `0K+318.990`과 시·종점 표고를 단면 A-A/B-B에 연결하는 길이·높이 기준 |
+| 일반도 14번 단면 A-A, B-B | 각각 `S=1:100` | 단면별 구조 윤곽 및 EL. 종단면의 같은 측점과 대응시킴 |
+| 일반도 14번 측구 상세 | `S=1:30` | 측구 형상·표기 치수 확인 자료. 상세 치수 `50`, `200`은 원도면 표기(mm)이며 상세 축척 측정값과 구분 |
+| 일반도 14번 기타 상세 | `S=1:20` 등 | 해당 상세 부재의 형상 검토 자료. 적용 위치가 BLOCK7인지 확인되지 않으면 모델에 임의 추가하지 않음 |
+
+시점 연결은 종단면 측점 `0K+299.010`과 단면 A-A, 종점 연결은 `0K+318.990`과 단면 B-B로 설정했다. 중심 기준 EL은 A-A `106.675`, B-B `107.307`을 단면 상단 기준에 맞췄다. 종단면의 시·종점 벽체 상단 EL과 단면 값이 각각 같은지 DXF 표기를 대조했으며, 현재 변환 데이터는 상단 기준 CAD Y `-74,271`, `-91,211`에 맞춘 상태다. 원도면에서 표시 위치·부재별 상단 기준을 CAD 화면으로 재확인하는 것은 남은 검증 항목이다.
+
+### 기준값·상태·근거
+
+| 대상/항목 | 적용값 | 상태 | 도면 번호와 위치 / 판정 |
+|---|---:|---|---|
+| A-A 측점 | STA. 0K+299.010 | 도면 명시값 | 13번 종단면도 시작부. 모델 단면 A-A와 연결 |
+| B-B 측점 | STA. 0K+318.990 | 도면 명시값 | 13번 종단면도 끝부. 모델 단면 B-B와 연결 |
+| 모델 구간 길이 | 19.980 m | 계산으로 도출한 값 | 위 두 측점 차. 코드 `block7.length`에 적용 |
+| 인접 구간 표기 | L=19.882 m 등 | 확인 필요 | 13번 종단면/접속부 주변의 별도 구간 표기. A-A~B-B 측점 차와 같지 않아 모델 길이로 대체하지 않음 |
+| A-A 벽체 상단/하단 EL | 106.675 / 101.636 | 도면 명시값 | 14번 단면 A-A 표기; 높이 차 5.039m는 계산값 |
+| B-B 벽체 상단/하단 EL | 107.307 / 101.069 | 도면 명시값 | 14번 단면 B-B 표기; 높이 차 6.238m는 계산값 |
+| A-A/B-B 간 폭 방향 외곽 | 약 20.100 m | 도면 치수/좌표 대조 필요 | 14번 단면 폭 치수열과 `CS-CONC-MAJR` 바깥 윤곽 측정치를 서로 대조해야 함. 현재 코드 `width` 20.1m |
+| `CS-CONC-MAJR` 선 | A-A/B-B 각 90개 | 도면 좌표 측정 | 14번 A-A/B-B의 해당 레이어. 내부 해칭 추정선도 레이어 원본선이므로 모델에서 버리지 않도록 수정 |
+| `CS-CONC-MINR` 선 | A-A/B-B 각 6개 | 도면 좌표 측정 | 14번 A-A/B-B의 해당 레이어. 같은 순번 단면선을 연결 |
+| 포장 횡단경사 | S=-2.000% | 도면 명시값 + 좌표 검산 | 14번 단면 및 포장선 좌표. 중앙부에서 양 외측으로 낮아지는지 좌우 방향을 단면 방향과 함께 확인 |
+| 공동구 블록 외곽 | DXF 블록 로컬 범위에 따른 약 1.000×2.100 m | 도면 좌표 측정 | 14번 A-A/B-B의 `A$C2017021411375356`. 기존 문서의 2.070m는 로컬 Y 최대값 1,200과 최소값 -900의 차(2,100mm)와 불일치하므로 수정 필요 |
+| 공동구 삽입 위치 | 중심에서 좌우 약 8.750 m | 계산으로 도출한 값 | 14번 A-A/B-B의 블록 INSERT X 좌표 및 단면 중심 좌표 |
+| 측구 `50`, `200` | 도면상 mm 표기 | 도면 명시값 | 14번 측구 상세. 폭·깊이 방향 연결은 상세 윤곽 좌표와 함께 대조 필요 |
+| 금속 난간 | 지주·봉 크기 및 간격은 기존 코드 추정값 | 추정값 | 도면 치수·구조 레이어에서 근거 확인되지 않음. 참고 이미지 기반 시각 형상으로 구분하고 도면 확정값처럼 사용하지 않음 |
+
+CAD 헤더의 `$INSUNITS=0`은 단위 미지정이다. 따라서 이 문서에서 m 환산은 측점·EL·표기 치수와 DXF 좌표 차이를 대조해 적용한 모델 변환이며, 파일 헤더에 기록된 단위라고 해석하지 않는다. 시트 축척을 이용한 측정값은 `도면 좌표 측정`으로 별도 표시하고 명시 치수와 혼용하지 않는다.
+
+후속 좌표 확인에서 일반도 14번 A-A/B-B 폭 치수 `20.100`을 확인했고, 두 단면의 기준 중심 X는 각각 `1128486.2181`과 같은 폭 중앙 좌표로 모델링 데이터에 사용한다. 단면 좌표 외곽 폭은 `20.300m`(±10.150m)까지 그려지는 선도 있어, 도면의 20.100m 치수 기준선이 구조물 외측면 전체 폭과 일치하는지는 서로 다른 윤곽(벽체/돌출부)의 기준을 나눠 추가 대조해야 한다. 따라서 모델 UI의 `전체 폭 20.100m`는 도면 치수값이며 가장 바깥 좌표 경계값이라고 단정하지 않는다.
+
+### 도면 간 점검 및 미확정 사항
+
+- BLOCK7 표기와 폭 치수열 부근의 평면 `CS-CONC-MAJR` 선을 배치 기준으로 모델 방향에 반영했다. 이 선이 실제 측량 중심선인지, 별도 절단 표식과 일치하는지, 두 끝의 단면 중심 좌표와 횡방향 기준까지 완전히 대조했는지는 추가 확인이 필요하다. 해당 엔티티는 직선이어서 중간 곡률은 재현하지 않는다.
+- 종단면의 측점 차 19.980m와 별도 구간 표기 19.882m 및 주변 19.862/20.098/20.100 표기의 기준점이 다를 가능성이 있다. 도면 내 치수 보조선의 양 끝점을 확인해야 하며, 현재 두 단면 위치 사이 연결에는 측점 차만 사용한다.
+- 단면 레이어 선 개수와 끝점 순서가 A-A/B-B에서 일치하는 것은 데이터 구조상 확인했다. 그러나 레이어의 모든 선이 구조 경계인지, 해칭선·치수 인접선인지 화면에서 분류하는 검토는 완료되지 않았다. 지침에 따라 원본 레이어 선은 삭제하지 않고 반영하되, 실제 체적 경계 해석은 미검증으로 남긴다.
+- 공동구 블록의 로컬 좌표 범위는 X -500~500, Y -900~1200이므로 외곽 바운딩 높이는 2.100m다. 곡선/외곽 윤곽과 블록 내 부재의 포함 범위가 단순 바운딩과 다를 수 있어 2.100m는 외곽 경계 사각형 치수로만 사용한다.
+- 단면 도면의 치수선·문자·기호를 모델 구조물로 변환하지 않는다. 구조선으로 보이는 선의 소속이 불명확한 곳은 코드 모델에 임의 체적을 만들지 않고 확인 필요로 남긴다.
+- 포장면은 단면 A-A/B-B 사이를 직선 보간한다. 중간 측점 포장 EL과 평면 중심선 곡률은 미확정이다.
+- 금속 난간은 원도면에서 치수·재료 상세를 확인하지 못했으므로 해당 형상을 도면 명시값으로 간주하지 않는다. 필요 시 별도 확인 후 도면 반영 범위를 결정한다.
+
+### 모델 재생성 변경·검증 기록
+
+이번 분석을 기준으로 `src/model/block7.js`의 `CS-CONC-MAJR` 생성에서 제외하던 17개 선을 복원했다. 이전에는 내부 해칭으로 판단해 제외했지만, 이는 새 지침의 “구조물선을 누락 없이 반영” 및 레이어 좌표 부족 시 윤곽 측정 지침과 맞지 않았다. 현재 연결 표면은 `CS-CONC-MAJR` 90개와 `CS-CONC-MINR` 6개를 단면별로 전부 생성한다.
+
+| 확인 항목 | 결과 | 상태 |
+|---|---|---|
+| 측점 길이 | 318.990−299.010=19.980m | 확인 |
+| A-A/B-B 단면 레이어 개수 | MAJR 90/90, MINR 6/6 | 좌표 데이터에서 확인 |
+| 단면 상단 EL 기준 | A-A 106.675, B-B 107.307 | 코드 변환 기준 확인 |
+| MAJR 선 제외 | 기존 17개 제외 목록 제거 | 코드 수정 완료 |
+| 폭 치수 | 도면 표기 20.100m | A-A/B-B 단면 치수 문자 확인, 외곽 좌표선의 기준선은 별도 대조 필요 |
+| 공동구 높이 안내 | 약 2.100m | 블록 로컬 Y 범위 -900~1200을 코드 객체 정보에 반영 |
+| 평면 선형 배치 | 선택한 BLOCK7 평면 선형의 방향을 모델에 적용 | 완료. 엔티티가 직선이라 중간 곡률은 확인되지 않음 |
+| 표면 모델의 체적·접합 검증 | 닫힌 체적이 아닌 선 연결 표면 | 미검증, 시공용 사용 불가 |
+
+브라우저 모델은 도면선 연결 표면을 검토하기 위한 시각화다. 길이·폭·표고와 평면 배치 기준은 `src/model/block7.js`, 단면 윤곽은 `src/model/sectionLayerGeometry.js`, 포장 경계는 `src/model/pavementGeometry.js`, 공동구 원형은 `src/model/communalDuctGeometry.js`에서 바꾼다. 선형 엔티티가 추가되면 같은 파일의 `alignment` 시작·끝 좌표와 경로 변환을 갱신한다.
+
+## 평면도 선형에 맞춘 단면 재배치
+
+사용자 요청에 따라 두 단면으로 만든 부재 전체의 평면 방향을 BLOCK7 표기와 폭 치수열 부근의 `CS-CONC-MAJR` 종방향 선에 맞췄다. 이 선을 실제 중심선으로 확정한 것은 아니며, 단면 배치를 위한 평면 기준선으로 사용했다. A-A측 끝점은 `(1055963.44842508, -71293.23557967)`, B-B측 끝점은 `(1056081.68303708, -91392.88783067)`이다. 두 점 차이는 `(118.234612, -20099.652251)` CAD 좌표, 길이 20.100m, 방향각 약 -89.663°다.
+
+코드에서는 단면 생성 시의 길이축·횡축 좌표를 이 기준선의 접선·수직 방향으로 회전해 주요 콘크리트, 세부 콘크리트, 포장면, 공동구, 난간에 동일하게 적용한다. 길이 방향 모델 범위는 종단면 측점 차인 19.980m이며, 횡방향 단면과 표고는 A-A/B-B 값을 유지한다. 기준선 길이 20.100m와 측점 차 19.980m의 차이 0.120m는 코드에서 축척 보정하지 않아 양 끝에 각각 0.060m 차이가 남는다. 모델 길이는 측점값을 따른다.
+
+이 평면도 데이터 구간에는 위 기준선 외에 A-A~B-B 사이의 중간 곡선점이나 원호가 확인되지 않았다. 따라서 현재 모델은 평면곡선을 재현한 것이 아니라, 도면에서 확인 가능한 직선 기준선의 방향에 맞춘 결과다. 실제 곡률이 별도 선형 도면·좌표표에 있다면 그 자료가 있어야 곡선으로 갱신할 수 있다. 앱 좌표는 원본의 큰 CAD 동쪽/북쪽 수치를 중심점 기준 상대 미터로 바꿔 표시한다.

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#edf1ed" />
+    <title>광터지하차도 새 모델</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "gwangteo-tunnel-rebuild",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "oxlint": "^1.81.0",
+    "vite": "^8.3.0"
+  }
+}

src/App.jsx

@@ -0,0 +1,60 @@
+const stages = [
+  { number: '01', title: '도면 다시 읽기', detail: '평면 선형, 종단 표고, A-A/B-B 단면 위치와 축척 확인', state: '진행 예정' },
+  { number: '02', title: '주요 구조 만들기', detail: '확인된 중심선과 단면값으로 바닥판·벽체 형상 구성', state: '대기' },
+  { number: '03', title: '세부 형상과 뷰어', detail: '부재 선택, 숨김, 시점 전환과 치수 표시 추가', state: '대기' },
+]
+
+function App() {
+  return (
+    <main className="shell">
+      <header className="topbar">
+        <a className="brand" href="#top"><span className="brand-icon">G</span>도면 모델 작업실</a>
+        <div className="project-label"><span className="live-dot" />새 프로젝트 <b>/</b> 광터지하차도 BLOCK7</div>
+        <a className="drawing-link" href="/drawings/광터지하차도_일반도(BLOCK7).dxf" download>원본 도면 받기 <span>↓</span></a>
+      </header>
+
+      <section className="intro" id="top">
+        <div>
+          <span className="kicker">새로 시작하는 도면 기반 모델</span>
+          <h1>광터지하차도 BLOCK7</h1>
+          <p>기존 모델을 가져오지 않고, 원본 도면을 다시 확인해 구조와 배치를 새로 구성합니다.</p>
+        </div>
+        <span className="status-pill">도면 분석 준비</span>
+      </section>
+
+      <section className="workspace">
+        <div className="viewer-card">
+          <div className="viewer-head">
+            <div><span className="eyebrow">3D 미리보기</span><h2>모델 영역</h2></div>
+            <span className="review-tag">도면 검토용</span>
+          </div>
+          <div className="empty-viewer">
+            <div className="axis-mark"><i /><i /><i /></div>
+            <strong>도면 분석이 끝나면 모델을 표시합니다</strong>
+            <p>평면 선형과 단면의 기준을 확인한 뒤 형상을 만들 예정입니다.</p>
+          </div>
+          <div className="viewer-foot"><span>원본 도면 기준으로 치수와 위치를 확인합니다</span><span>단위: m</span></div>
+        </div>
+
+        <aside className="side-card">
+          <span className="eyebrow">프로젝트 단계</span>
+          <h2>처음부터 차근차근</h2>
+          <div className="stage-list">
+            {stages.map((stage) => (
+              <article className="stage" key={stage.number}>
+                <span className="stage-number">{stage.number}</span>
+                <div><strong>{stage.title}</strong><p>{stage.detail}</p></div>
+                <span className="stage-state">{stage.state}</span>
+              </article>
+            ))}
+          </div>
+          <div className="source-note"><strong>참고 자료</strong><p>이전 분석 문서는 참고용으로만 보관했습니다. 새 모델의 기준은 원본 DXF를 다시 확인해 정합니다.</p></div>
+        </aside>
+      </section>
+
+      <footer>추정값은 확인된 도면 치수와 구분해 기록합니다.</footer>
+    </main>
+  )
+}
+
+export default App

src/index.css

@@ -0,0 +1,46 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
+:root { font-family: 'DM Sans', 'Noto Sans KR', sans-serif; color: #26332e; background: #edf1ed; font-synthesis: none; text-rendering: optimizeLegibility; }
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; min-height: 100vh; }
+a { color: inherit; text-decoration: none; }
+.shell { max-width: 1440px; margin: 0 auto; padding: 0 36px 24px; }
+.topbar { height: 74px; display: flex; align-items: center; border-bottom: 1px solid #dce3dd; gap: 32px; }
+.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
+.brand-icon { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: #597567; border-radius: 9px; }
+.project-label { margin-left: auto; color: #63736a; font-size: 12px; }
+.project-label b { color: #a4aea7; padding: 0 7px; }
+.live-dot { display: inline-block; width: 7px; height: 7px; background: #86a578; border-radius: 50%; margin-right: 7px; }
+.drawing-link { font-size: 12px; font-weight: 600; color: #456354; padding: 10px 13px; border: 1px solid #d6e0d8; border-radius: 9px; background: #f5f7f4; }
+.drawing-link span { margin-left: 8px; }
+.intro { padding: 38px 2px 26px; display: flex; justify-content: space-between; align-items: end; }
+.kicker, .eyebrow { display: block; color: #718078; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; }
+h1 { font-size: 30px; letter-spacing: -.04em; margin: 8px 0 7px; }
+.intro p { color: #758179; font-size: 13px; margin: 0; }
+.status-pill, .review-tag { border: 1px solid #d4dfd6; color: #567061; background: #f6f8f5; padding: 8px 11px; font-size: 11px; font-weight: 600; border-radius: 20px; }
+.workspace { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, .9fr); gap: 18px; }
+.viewer-card, .side-card { border: 1px solid #dce3dd; background: #f8faf7; border-radius: 15px; box-shadow: 0 10px 30px #354b3c0a; }
+.viewer-card { padding: 20px; }
+.viewer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 17px; }
+h2 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.025em; }
+.empty-viewer { height: min(58vh, 490px); min-height: 330px; border: 1px dashed #cbd6ce; border-radius: 11px; background: radial-gradient(ellipse at center, #f3f6f2 0, #e9eeea 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #58675e; }
+.empty-viewer strong { font-size: 14px; margin-top: 25px; }
+.empty-viewer p { color: #859088; font-size: 12px; margin: 8px 18px; }
+.axis-mark { position: relative; width: 54px; height: 46px; }
+.axis-mark i { position: absolute; left: 26px; bottom: 5px; width: 1px; height: 38px; background: #92a49a; transform-origin: bottom; }
+.axis-mark i:nth-child(2) { transform: rotate(90deg); }
+.axis-mark i:nth-child(3) { transform: rotate(-45deg); background: #b3a789; height: 27px; }
+.viewer-foot { display: flex; justify-content: space-between; color: #87928a; font-size: 10px; padding: 13px 2px 0; }
+.side-card { padding: 21px 19px; }
+.side-card h2 { font-size: 18px; margin: 7px 0 21px; }
+.stage-list { display: grid; }
+.stage { display: grid; grid-template-columns: 33px 1fr; gap: 10px; padding: 15px 0; border-top: 1px solid #e5eae5; }
+.stage-number { color: #84968a; font-size: 11px; font-weight: 700; padding-top: 2px; }
+.stage strong { font-size: 12px; }
+.stage p { margin: 5px 0 0; color: #7e8982; font-size: 11px; line-height: 1.6; }
+.stage-state { grid-column: 2; color: #88958c; font-size: 10px; margin-top: 5px; }
+.stage:first-child .stage-state { color: #5d7b68; }
+.source-note { margin-top: 15px; padding: 14px; border-radius: 10px; background: #eff3ee; }
+.source-note strong { font-size: 11px; }
+.source-note p { color: #768279; font-size: 10px; line-height: 1.7; margin: 6px 0 0; }
+footer { color: #849087; font-size: 10px; padding: 19px 3px 0; }
+@media (max-width: 820px) { .shell { padding: 0 18px 20px; } .topbar { height: 64px; gap: 10px; } .project-label { display: none; } .drawing-link { margin-left: auto; font-size: 10px; } .intro { padding-top: 28px; align-items: start; flex-direction: column; gap: 16px; } h1 { font-size: 25px; } .workspace { grid-template-columns: 1fr; } .empty-viewer { min-height: 290px; height: 45vh; } }

src/main.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+createRoot(document.getElementById('root')).render(
+  <React.StrictMode><App /></React.StrictMode>,
+)

vite.config.js

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({ plugins: [react()] })