chore(M01): 원가 다이어그램 문서 같은 내용 먼저 담음(합치기 충돌 방지)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D2nUMUMTsqm93PbQtipo6c

docs/raw/M01_쉬운단가/시험판_단추_점검.md

@@ -0,0 +1,110 @@
+# 시험판 단추 공용 양식 점검 (35-5 · sub7 · 확인만)
+
+대상 = `M01_MasterData/EasyCalc` · `LogicBuilder` · `SheetLogic` 의 누르는 것 전부. 화면 수치 = 내 포트 5182 ORCA · `getComputedStyle`(전환 끔 · 밝음 · 어두움) · 판정 직전 `/api/auth/session` 200.
+
+## 0. 한눈에
+
+- **날 단추(`el("button")` 직접) 23 자리** — EasyCalc 5 · LogicBuilder 12 · SheetLogic 6(목록 줄 8 · 칩 11 · 「석공 ▾」 2 · 그림 알약 1 · 글 링크 1). 모두 자체 css 꼴(회색 바탕 · 16px · 테두리 1.75px · 둥글기 8 · 999 · **2px**).
+- **공용 `createButton` 을 쓰되 css 가 모양을 덮음 4 곳** — 작은(sm 18px · 12px)을 44px · 16px 로(EasyCalc Cards · LB Steps · SL Panel) · 큰 시작 단추 56px(세 시작 화면).
+- **한 화면 안 크기가 섞임** — SL 「+ 상자」 「상자 지우기」 18px 옆에 시트 판 단추 44px · LB 「문장 / 격자」 「빈틈 검사」 18px 옆에 산출근거 단추 44px.
+- 색은 모두 테마 토큰 — 어두움에서 자체 꼴도 바뀜(SL 상자 · 알약 · 시트 판 알약 확인) · 문제는 **모양(높이 · 둥글기 · 글 크기 · 테두리)**.
+- 시험판 들어가는 단추 셋(「쉬운 단가산출(시험)」 「로직 만들기(시험)」 「시트 로직(시험)」)은 공용 filled md 그대로 — 옆 「식으로 새로 만들기」와 같음(32px · 8px · 14px).
+
+## 1. 공용 양식
+
+| 공용 꼴 | 어디 | 모양(밝음 실측) | 쓰임 |
+| --- | --- | --- | --- |
+| `createButton` md | `ui_template_elements.ts:43` · 꼴 `ui_template_elements_styles.ts:17-80` | 높이 32 · 둥글기 8px(`--radius-buttons`) · 14px · 500 · 테두리 1px | 모든 단추 |
+| `createButton` sm | 같음 `.ui-btn--sm` | 높이 18 · 12px · 안쪽 2px 8px | 표 칸 · 카드 머리 작은 단추 |
+| 종류 | `filled` 바탕 rgb(38,17,74) 흰 글 · `ghost` 투명 + 보라 테두리 · `pill` 투명 · 둥글기 1440 · `is-active` 때 mist-violet · `danger` 빨강 · `glass` 3D 위 | 어두움 = filled rgb(185,154,255) · ghost 글 같은 보라 | 탭 · 보기 바꿈 = `pill` + `is-active`(전용 탭 부품 없음) |
+| `createTag` | `ui_template_elements.ts:217` · `.ui-tag` | 둥글기 1440 · 12px · 안쪽 4px 16px · accent · neutral · success · warning · danger | 누르지 않는 글 알약 |
+| 목록 줄 `.ui-sidebar-row` | `ui_template_overlay.css:384-437` (M01 · M02 공용) | 투명 바탕 · 14px · 둥글기 8 · 안쪽 4px 8px · hover paper · `is-active` mist-violet | 왼쪽 목록 · 찾기 결과 줄 |
+| 나무 줄 `createTreeRow` | `ui_template_tree.ts:118` | `.ui-sidebar-row` + 화살표 · 아이콘 · 수 | M02 나무 |
+| 모달 `openModal` | `ui_template_modal.ts:20` | 머리 줄 닫기 = ghost md | 세 시험판 모두 씀 ✔ |
+| (M01 자체) 알약 `pillButton` | `M01_MasterData_UI_LogicLab_Pill.ts:18` `.m01lab__pill` | M01 지금 화면 것 — ui_template 아님 | 수량 칸 안 표 조각 |
+| (엔진 공용) 시트 도구막대 `ss-brush` 등 | `A00_Common/spreadsheet` | 25px · 13px · 테두리 없음 | M02 시트와 같음 — 그대로 |
+
+## 2. 누르는 것 전수
+
+✔ = 공용 그대로 · ▲ = 공용인데 css 가 모양을 덮음 · ✖ = 날 단추(자체 꼴)
+
+### EasyCalc (쉬운 단가산출)
+
+| 파일:줄 | 화면 글 | 만드는 법 | 실측(높이 · 둥글기 · 바탕 · 글) | 같은 일의 공용 꼴 | 고칠 안 |
+| --- | --- | --- | --- | --- | --- |
+| `M01_EasyCalc_Entry.ts:177` | 시작 목록 줄 「돌쌓기 메쌓기(인력) · 내가 만든 것」 | ✖ `m01-easycalc__item` | 42 · 8 · rgb(246,247,250) · 16px · 테두리 0.9 | `.ui-sidebar-row` | 공용 목록 줄 꼴로 |
+| `M01_EasyCalc_Entry.ts:565` | 빈 종이로 새로 만들기 | ▲ filled + `m01-easycalc__big` | **56** · 8 · 16px | 없음(큰 크기 없음) | 그대로(초등학생 큰 시작 단추) — 공용에 큰 크기 하나 청하면 덮기 지움 |
+| `M01_EasyCalc_Entry.ts` 위 띠 | 되돌리기 · 저장 · 지우기 · 닫기 | ✔ ghost · filled · danger md | 32 · 8 · 14px | — | 그대로 |
+| `M01_EasyCalc_Cards.ts:273` | 「석공 ▾」(다시 고르기) | ✖ `m01-easycards-name--pick` | 44 · 8 · 회색 · 16px · 400 | `createButton` ghost | 공용 createButton(ghost)로 |
+| `M01_EasyCalc_Cards.css:145` | ▲ ▼ 지움 · 숫자로 바꾸기 | ▲ ghost **sm** → css 44px · 16px | 44 · 8 · 16px | sm 18px | 공용 createButton(ghost · md)로 · sm 덮기 지움 |
+| `M01_EasyCalc_Cards.css:179` | + 사람 · + 재료 · + 기계 · + 다른 일위대가 · + 덧붙임 | ▲ ghost md → 44px · 16px | 44 · 8 · 16px | md 32 | 그대로 or 공용 큰 크기(청함) |
+| `M01_EasyCalc_Cond.ts:421` | 「표에서 찾은 값」 칩 | ✖ `m01-easycond__chip` 점선 · 1440 | 36 · 999 · 투명 · 16px | `pill` 단추 | 공용 createButton(pill)로 |
+| `M01_EasyCalc_Pick.ts:288` | 사람 · 재료 · 기계 · 다른 일위대가(무엇) | ✖ `m01-easypick__kind` | (큰 칸) | `pill` + `is-active` | 공용 pill 로 |
+| `M01_EasyCalc_Pick.ts:433` | 고르기 목록 줄 「보통인부 인 하루 172,068」 | ✖ `m01-easypick__row` | **52** · 8 · 회색 · **18px** · 테두리 1.75 | `.ui-sidebar-row` | 공용 목록 줄 꼴로 |
+| `M01_EasyCalc_Pick.ts` 아래 | 넣기 · 닫기 | ✔ filled · ghost md | 32 | — | 그대로 |
+| `M01_EasyCalc_Table.ts:630` | 표 줄 누르기(tr) | 표 칸 | — | 표 | 그대로(표 줄 고르기) |
+| `M01_EasyCalc_Table.ts` 5 곳 | 표 고르기 단추 | ✔ ghost · sm | 18 | — | 그대로 |
+
+### LogicBuilder (로직 만들기)
+
+| 파일:줄 | 화면 글 | 만드는 법 | 실측 | 같은 일의 공용 꼴 | 고칠 안 |
+| --- | --- | --- | --- | --- | --- |
+| `M01_LB_Entry.ts:194` | 시작 목록 줄 「돌쌓기 메쌓기(인력) 표준 1㎡」 | ✖ `m01-lb__item` | 42 · 8 · 회색 · 16px | `.ui-sidebar-row` | 공용 목록 줄 꼴로 |
+| `M01_LB_Entry.ts:691` | 단계 안내로 새로 만들기 | ▲ filled + `m01-lb__big` | **56** · 16px | — | 그대로(큰 시작) · 공용 큰 크기 청함 |
+| `M01_LB_Entry.ts:585-593` | 문장 / 격자(보기 바꿈) | ✔ sm 인데 filled ↔ ghost 를 바꿔 끼움 | **18** · 8 · 12px | `pill` + `is-active`(탭 꼴) | 공용 createButton(pill) + `is-active` 로 |
+| `M01_LB_Entry_Result.ts` | 빈틈 검사 · 지금 예시값으로 한 줄 더하기 · 모두 돌리기 | ✔ ghost sm | 18 · 12px | — | 공용 그대로 · 단 옆 산출근거 44px 와 크기 다름 → md 로 |
+| `M01_LB_Source.ts:177` | 표 머리 역할 칩 「조건」 「결과」 「고정」 | ✖ `m01-lbsrc__chip` | 20 · 999 · 옅은 보라 / 초록 · 12px | `createTag`(accent · success) 꼴 + 누름 | 공용 pill sm 로(색은 tag 갈래) |
+| `M01_LB_Source.ts:241` | 이 표를 쓰는 로직 N 개 | ✖ `m01-lbsrc__users` 글 단추 | 21 · 0 · 테두리 없음 · 14px | 없음(글 링크) | 그대로(글 링크) 또는 ghost sm |
+| `M01_LB_Source.ts:286` | 표 칸 누르기(td) | 표 칸 | — | — | 그대로 |
+| `M01_LB_Steps.ts:206` | 「석공 ▾」 | ✖ `m01-lbsteps-pick` | (EasyCalc 와 같은 꼴) | ghost | 공용 createButton(ghost)로 |
+| `M01_LB_Steps.css:163` | 산출근거 안 단추 모두 | ▲ `.m01-lbsteps .ui-btn` → 44px · 16px | 44 | — | 공용 md 로(덮기 지움) |
+| `M01_LB_Grid.ts:509` | 격자 줄 누르기(tr) | 표 줄 | — | — | 그대로 |
+| `M01_LB_Wizard.ts:250 · 291` | 단계 안내 절 · 표 목록 줄 | ✖ `m01-lbw__row` | (목록 줄) | `.ui-sidebar-row` | 공용 목록 줄 꼴로 |
+| `M01_LB_Wizard.ts:376` | 칸 역할 「조건 · 고정 · 결과」 | ✖ `m01-lbw__role` | (역할 칩) | pill + is-active | 공용 pill 로 |
+| `M01_LB_Wizard.ts:499` · `Wizard_Calc.ts:199 · 448 · 459` | 종류 · 틀 · 항목 연결 · 건너뛰기 칩 | ✖ `m01-lbw__chip` | (칩) | pill + is-active | 공용 pill 로 |
+| `M01_LB_Wizard_Calc.ts:172` | 주 고르기 | ✖ `m01-lbw__note` | (칩) | pill + is-active | 공용 pill 로 |
+
+### SheetLogic (시트 로직)
+
+| 파일:줄 | 화면 글 | 만드는 법 | 실측 | 같은 일의 공용 꼴 | 고칠 안 |
+| --- | --- | --- | --- | --- | --- |
+| `M01_SL_Entry.ts:178` | 시작 목록 줄(기존 로직 가져오기) | ✖ `m01-sl__item` | 42 · 8 · 회색 · 16px | `.ui-sidebar-row` | 공용 목록 줄 꼴로 |
+| `M01_SL_Entry.ts:297` | 새로 만들기(빈 판) | ▲ filled + `m01-sl__big` | **56** · 16px | — | 그대로(큰 시작) · 공용 큰 크기 청함 |
+| `M01_SL_Entry_Paper.ts` | 실행 취소 · 저장 · 지우기 · 닫기 | ✔ ghost · filled · danger md | 32 | — | 그대로 |
+| `M01_SL_Diagram.ts` | + 상자 · 상자 지우기 | ✔ filled sm · danger sm | **18** · 12px | — | 공용 md 로(옆 시트 판 44px 와 맞춤) |
+| `M01_SL_Diagram.ts:181` | 상자 양옆 알약 「뒷길이 25」 「? 단가 268,908」 | ✖ `m01-sldg__pill` | 20 · 999 · 입력 옅은 주황 / 출력 옅은 보라 / 빈 칸 점선 · 12px | 그림 요소(공용 없음) | 그대로(다이어그램 그림) — 둥글기 · 글은 tag 와 같음 |
+| `M01_SL_Diagram.ts:249` | 상자 누르기(div) | 그림 상자 | 80~152 · 8 | — | 그대로 |
+| `M01_SL_Panel.ts:323` | 시트 판 알약 「입력 · 뒷길이 (B2)」 | ✖ `m01-slpanel-pill` | **44** · 1440 · 회색 · 16px · 테두리 1.75 | pill 단추 · 그림 알약(20px)과 같은 것인데 꼴 다름 | 공용 pill 로 · 다이어그램 알약과 한 꼴 |
+| `M01_SL_Panel.css:35` | 입력 알약으로 · 출력 알약으로 · 할증 · 나누기 · 만약 · 표에서 찾기 | ▲ ghost **sm** → 44px · 16px | 44 · 8 | sm 18 | 공용 md 로 · sm 덮기 지움 |
+| `M01_SL_Table.ts:301 · 338` | 품셈 표 찾기 결과 줄 | ✖ `m01-sltbl__row` | (목록 줄) | `.ui-sidebar-row` | 공용 목록 줄 꼴로 |
+| `M01_SL_Table.ts:509` | 칸 역할 「높이 조건 → 입력 알약」 | ✖ `m01-sltbl__role` | **63** · **2px**(토큰 밖) · 회색 · 16px · 테두리 1.75 실선 / 점선 | pill + is-active | 공용 pill 로 · 둥글기 2px 버림 |
+| `M01_SL_Item.ts` | 종류 고르기 · 다시 고르기 · 단가 다시 가져오기 | ✔ ghost · sm | — | — | 그대로 |
+| 시트 도구막대 | 서식… · 붓 · ↑ … | 엔진 `ss-brush` | 25 · 0 · 13px | M02 시트와 같음 | 그대로 |
+
+## 3. 어두움(실측 — SL)
+
+| 꼴 | 바탕 | 글 |
+| --- | --- | --- |
+| filled md · sm | rgb(185,154,255) | rgb(22,18,31) |
+| ghost | 투명 | rgb(185,154,255) |
+| danger sm | rgb(232,105,90) | rgb(22,18,31) |
+| `m01-sldg__box` | rgb(30,25,48) | rgb(228,224,240) |
+| `m01-sldg__pill`(입력) | 어두운 주황 | rgb(229,168,102) |
+| `m01-slpanel-pill` | rgb(30,25,48) | rgb(228,224,240) |
+
+→ 자체 꼴도 토큰이라 어두움에서 깨지지 않음 · 고칠 것은 모양뿐.
+
+## 4. 고칠 안 (갈래별)
+
+1. **목록 줄 8 자리**(Easy 시작 · Easy 고르기 · LB 시작 · LB 단계 절 · 표 · SL 시작 · SL 표 찾기 둘) → 공용 `.ui-sidebar-row` 꼴. 초등학생용 큰 줄이 필요하면 ⬜ 공용에 「큰 줄」 갈래 하나를 청함(자체 css 로 덮지 않음).
+2. **칩 · 역할 · 틀 11 자리 + 보기 바꿈 1**(Cond 칩 · Pick 종류 · LB 역할 칩 · 단계 안내 칩 넷 · 역할 · 주 · SL 칸 역할 · SL 시트 판 알약 + LB 문장/격자) → 공용 `createButton({ variant: "pill" })` + `is-active`. 역할 색(조건 보라 · 결과 초록)은 `ui-tag` 색 갈래를 빌림.
+3. **「석공 ▾」 다시 고르기 2 곳**(Easy Cards · LB Steps) → 공용 `createButton({ variant: "ghost" })`.
+4. **sm 를 44px 로 덮는 css 3 곳**(Easy Cards · LB Steps · SL Panel) → 덮기 지우고 공용 md(32px). 한 화면에 18 · 32 · 44 가 섞이지 않게 — SL 「+ 상자」 · LB 「빈틈 검사」 sm 도 md 로.
+5. **큰 시작 단추 3 곳**(56px) → 그대로(설계 「초등학생 큰 단추」) · ⬜ 공용에 큰 크기(`lg`)를 더하면 그것으로 바꿈.
+6. **그대로** — 다이어그램 상자 · 알약(그림 요소) · 표 줄 · 표 칸 누르기 · 시트 도구막대(엔진 공용) · 「이 표를 쓰는 로직 N 개」 글 링크.
+7. SL 칸 역할 둥글기 **2px** 는 토큰(8 · 1440) 밖 — 2번에서 함께 바뀜.
+
+## 덧
+
+- EasyCalc 시작 화면 「내가 만든 것」 줄이 **53 개** — 여러 창의 시험 저장이 `로직_자체.json`(공유 storage)에 남은 것으로 보임(점검 범위 밖 · 사실만).
+- 측정 주의 — 보기 바꿈처럼 class 를 바꾼 직후 `getComputedStyle` 은 0.12 초 전환 중 값을 줌 → 전환을 끈 뒤 잼.

docs/raw/M01_쉬운단가/원가다이어그램_정함.md

@@ -0,0 +1,40 @@
+# 단가산출 다이어그램 시험판 — 정함 (PLAN 35-7 · 브레인 · 10-01 오후)
+
+사용자 기준(10-01 14시 무렵 · 요약): 다이어그램은 요소 종류로 칸을 나누지 않고 자유 배치 · 단가산출 로직 = 최종 원가를 내는 로직 · 상자는 입력 · 함수 · 출력 · 입력 상자 = M01 저장 그룹(인력 · 재료 · 유가/전력 · 기계 · 소요량 · 계수 · 환율) · 입력 상자를 누르면 그 정보 — M01 그룹 내용 · 요소 고르기 · M01 표 「추가」 화면을 다시 써서 추가 / 삭제 · 그룹 밖 정보(면적 · 길이 · 부피)는 변수 + 입력 정의 · 함수 상자도 변수 + 입력 정의 · 함수 상자는 받은 입력을 엑셀로 셈해 결과를 다음으로 · 함수 상자 하나 = 함수 하나(연속 연산 가능 · 출력은 하나) · 함수 상자 직렬 · 병렬 · 모든 상자 오른쪽 위에 단위(무차원 · 글 · 어려우면 「-」) · 출력 상자는 입력 · 함수 상자에 이어지고 어떤 비용인지(노무비 · 재료비 · 경비 …) 정함 · 품셈 분석보다 사용자와 브레인이 같이 쓸 프로그램이 먼저 · 상자 색 지정 · 엑셀 · 다이어그램 영역 더 높게 · 「상자와 선」 이름은 「다이어그램」 · 별도 단추로 시험판 페이지 · M02 폴더 · 기존 시험판과 다른 폴더 · 화면에 보일 임시 파일도 같은 폴더.
+
+## 기준 점검 — 빠진 곳 · 두 뜻인 곳과 브레인 정함(사용자가 바꿀 수 있음)
+
+1. **요율이 입력 그룹에 없음** — M01 에는 요율(19줄 · 공구손료 등 비율)이 있음 → 입력 그룹에 넣음.
+2. **유가/전력 · 품셈재료** — M01 에서는 재료 그룹 안의 파일 → 입력 그룹에서 유가/전력은 따로 · 품셈재료는 재료 안.
+3. **소요량 · 계수는 조건 표** — 요소 하나가 아니라 「조건 칸 → 값 칸」 표 → 입력 상자는 표(또는 고른 줄 하나)를 내보내고, 조건에 맞는 줄 찾기는 함수 상자의 엑셀 수식(XLOOKUP · INDEX/MATCH)이 함.
+4. **함수 상자 「함수 하나 · 연속 연산 · 출력 하나」** — 상자 안에서는 여러 칸으로 이어 셈해도 되고, 밖으로 나가는 출력은 한 칸만.
+5. **비용이 아닌 출력** — 시간당 작업량처럼 다른 로직이 받을 값도 있음 → 출력 종류에 「값(비용 아님)」 더함.
+6. **최종 원가 합계** — 출력 상자들을 비목별로 모아 원가(노무비 · 재료비 · 경비 · 계 · 기준단위당)를 보이는 칸을 둠.
+7. **「추가 / 삭제」 뜻** — 입력 상자에 넣을 요소를 M01 그룹 화면에서 골라 넣고 빼는 것. 그룹에 없는 새 요소는 M01 표 「추가」 화면 꼴로 만들되 마스터에 쓰지 않고 시험 폴더에 「사용자 요소」로 저장.
+8. **단위** — 상자 오른쪽 위 = 그 상자 출력의 단위 · 입력 상자는 요소 단위를 따름(요소가 여럿이면 알약마다 · 상자 표시는 「-」) · 함수 · 출력 상자는 사용자가 정함(기본 「-」).
+9. **색** — 종류별 기본 색(입력 · 함수 · 출력이 서로 다름) + 상자마다 색 바꾸기.
+10. **들어가는 곳** — 별도 단추 「단가산출 다이어그램(시험)」 = M01 단가산출 막대의 다른 시험판 단추 옆 · 누르면 화면 전체를 덮는 시험판 페이지(닫기로 돌아감) — 길잡이(router)는 안 고침.
+11. **폴더** — `M02_MasterTemplete/CostFlow/` · 저장 · 임시 파일 = 그 안 `_data/`(git 밖) · 화면에 처음 보일 견본 로직 = 그 안 `_sample/` · 폴더째 지우면 끝 · SheetLogic · LogicBuilder 폴더에 기대지 않음(필요한 코드는 새 폴더로 옮겨 고쳐 씀 · 엔진 · ui_template · M01 Api 는 가져다 씀).
+12. **다이어그램** — 상자는 끌어 자유 배치(자리 저장) · 판 끌기 · 확대 / 축소 · 선은 굽은 선 · 고른 상자와 이어진 선만 진하게 · 「다이어그램」 이름 · 높이 크게(화면 위쪽 큰 영역) · 아래 고른 상자 판도 크게(안쪽 스크롤 없이).
+13. **우선** — 품셈 1,469 로직 옮기기 · 분석은 안 함 · 사용자와 브레인이 같이 쓰는 프로그램 먼저.
+
+## 상자 · 선 약속
+
+- 입력 상자: 갈래 = 그룹(인력 · 재료 · 유가/전력 · 기계 · 소요량 · 계수 · 환율 · 요율) 또는 변수 · 그룹이면 고른 요소마다 출력 알약(이름 · 값 · 단위) · 소요량 / 계수면 표(또는 한 줄) 알약 · 변수면 변수마다 알약(이름 · 갈래 숫자 / 선택 / 글 · 단위 · 범위 · 예시값).
+- 함수 상자: 시트 하나 · 입력 알약(받는 칸) 여럿 · 변수(입력 정의) · **출력 알약 하나** · 단위.
+- 출력 상자: 받는 자리 하나 · 비용 종류(노무비 · 재료비 · 경비 · 값) · 단위.
+- 선: 입력 → 함수 · 입력 → 출력 · 함수 → 함수(직렬) · 여러 함수 → 한 함수(병렬 모음) · 함수 → 출력. 출력에서 나가는 선 없음 · 순환 막음.
+- 계산: 우리 스프레드시트 엔진 한 벌 · 화면은 브라우저 · 저장은 서버가 같은 엔진 Node 로 다시 셈 · 입력 값(노임 · 단가 · 표)은 열 때 · 저장 때 마스터에서.
+
+## 파일 · 창 (`M02_MasterTemplete/CostFlow/` · 700줄 안)
+
+| 파일 | 창 |
+| --- | --- |
+| `M02_CF_Model.ts` · `M02_CF_Eval.ts` | sub7 — 타입 먼저 |
+| `M02_CF_Router.py` · `M02_CF_Api.ts` · `.gitignore` | sub4 |
+| `M02_CF_Diagram.ts` + css | sub8 |
+| `M02_CF_FuncPanel.ts` + css | sub2 |
+| `M02_CF_InputPanel.ts` + css | sub3 |
+| `M02_CF_OutputPanel.ts` · `M02_CF_Summary.ts` + css | sub5 |
+| `_sample/*.json` · `M02_CF_Sample.ts` | sub6 |
+| `M02_CF_Entry.ts` + css | sub1 — 단추 · 시험판 페이지 · 잇기 · 끝 검증 |