chore(요구): 요구서 375 전역 테마 — 조사 둘(토큰 · 공용 부품 · 페이지별 위험) · 공통 값 한 벌 · 그림 색 고정 · 단계 셋

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/raw/요구_1025/_분석_375-A_토큰_공용부품.md

@@ -0,0 +1,163 @@
+# 375-A 토큰 · 공용 부품 전역화 — 대시보드 테마를 프로젝트 안 화면까지
+
+## ① 결론 다섯 줄
+
+1. 토큰이 두 벌 — 옛 전역 `theme.css`(보라 Wiza · `:root` · CAD iframe 도 import) vs 대시보드 `--b01-*`(초록 · `.b01-shell` 안만 · 셸 안에서 `--color-*` 10개를 거꾸로 덮음) → **값 = 대시보드 값인 전역 의미 토큰 한 벌을 `theme.css` 에 두고 `--b01-*` 는 그 별칭으로 뒤집음** · 셸 덮어쓰기 10줄 · 셸 어두움 블록은 반드시 지움(남기면 순환 참조로 둘 다 무효).
+2. 보라를 직접 부르는 옛 이름 약 260곳(`royal-amethyst` 67 · `mist-violet` 51 · `deep-iris` 20 …)은 이름을 두고 새 토큰의 별칭으로 돌림 → 파일 하나로 B · D · E · M · CAD 가 함께 바뀜 · 시험 11개가 지키는 값(12/14/16px · 320 · 밝음/어두움/시스템 블록)은 그대로.
+3. 공용 부품은 거의 「제자리 다시 칠하기」 — 클래스 · `data-` 그대로(가이드 장면이 `ui-collapsible__title` 78 · `ui-sidebar-actions` 63 · `ui-btn--filled` 13 · `ui-btn--ghost` 11 씀) · PageKit 으로 갈아 끼울 곳 없음 · 탭만 공용 `.ui-tabs` 한 벌 새로(채운 단추 = 고른 탭 규칙 유지).
+4. 상세 틀은 값만 — 좌측 패널 = 대시보드 메뉴처럼 1px 선 · 그림자 없음 · 카드 10px · 손잡이만 강조색 · 위 얇은 머리줄은 `--app-header-h` 가 이미 19 파일에 깔려 있어 뒤 단계로 가능(날 `100dvh` 5곳만 손봄).
+5. 차례 = 0 토큰(1창 · 먼저) → 1 공용 틀 · 부품 · 아이콘(3창) → 2 페이지별(5창) → 3 머리줄(선택) → 가이드 재촬영 한 번 · 글꼴은 `--font-ui` 한 토큰으로 묶어 Pretendard 결정 뒤 한 줄 교체.
+
+## ② 항목별 현황(근거)
+
+### 1. 토큰 두 벌
+
+| 구분 | 옛 전역 `ui_template/ui_template_theme.css` | 대시보드 `B01_Dashboard_UI_Style_Shell.css` |
+|---|---|---|
+| 자리 | `:root`(:12) · CAD `openwebcad/src/App.css:3` 가 import | `.b01-shell` 안만(:2-16) · 시험이 `:root` 금지 · `#1f7a4d` 글자 확인(`test_546_b01_shell.py:106-107`) |
+| 강조 | primary = deep-iris #26114a(:19,77) · accent · 초점 = royal-amethyst #3e0079(:21,79-80) | accent #1f7a4d · soft #eaf5ee · 위 글 #fff(:3-5) |
+| 바탕 · 카드 | bg = canvas #fff · surface = paper #f6f7fa · raised #fff(:69-71) | bg #f6f7f9 · card #fff(:6-7) |
+| 선 · 글 | mist #e6e2e3 · text = deep-iris · body #333 · secondary #615e6e · muted #9491a1(:29,73-76) | line #e6e8ec · text #1f2328 · muted #6b7280(:8-10) |
+| 올림 · 위험 | 올림 없음 · danger #c0392b(:40) | hover #f3f4f6 · alert #e5484d(:11-12) |
+| 둥긂 · 그림자 | 8 시그니처(:149) · 파랑 끼 여러 겹(:179-189) | 10(:13) · 메뉴만 `0 8px 24px rgba(16,24,40,.12)`(:186) · 카드는 선만 |
+| 어두움 | `:root[data-theme=dark]` 보라 끼(:303-342) + 시스템 자동(:345-381) | `:root[data-theme=dark] .b01-shell`(:37-48) 중립 회색 |
+
+- 셸 안 덮어쓰기 — `--color-bg` · `surface` · `border` · `primary` · `text` 등 10개를 `--b01-*` 로(`Style_Shell.css:19-28`) → 옛 단추 · 카드 · 표가 셸 안에서만 초록 · 셸 밖은 보라.
+- 대시보드가 따로 막은 보라 — 단추 hover(`Style_Pages.css:632-638` ← `elements_styles.ts:48,55`) · 알약 색(`Style_Pages.css:431-457` ← `elements_styles.ts:190-194`).
+- 하드코딩 보라 — 고르기 화살표 SVG `%233e0079`(`elements_styles.ts:143`) · 가림막 `rgba(38,17,74,…)` 7곳(`elements_styles.ts:203,253` · `modal.css:8` · `overlay.css:541` · `app_shell.ts:469` · `B01_Dashboard_UI_Style.css:275` · `M01_MasterData_UI_Logic_Style.css:340`).
+- 흠 — 정의 없는 `--color-muted`(`workflow_layout.css:102`) · `--color-surface-sunken`(`context_menu.css:42,56` · `Style_Projects.css:11`) · 안 쓰는 것 = 그라디언트 3 · `--shadow-feature` · `.ui-wf` 규칙(`elements_styles.ts:276-302` · `createWorkflowShell` 부름 0).
+- 사용 수(theme.css 밖) — 옛 이름: canvas 84 · royal-amethyst 67 · mist-violet 51 · slate 24 · deep-iris 20 · paper 17 · plum-velvet 9 / 별칭: border 399 · surface 190 · danger 188 · text 144 · accent 111 · primary 83.
+- 값 지키는 시험 — `--text-body-sm: 14px`(164 · 228_1) · `--text-body: 16px` · `--text-caption: 12px`(228_1) · `--wf-left-panel-width: 320px`(173_2) · 어두움 블록 안 canvas · mist · accent · shadow-lg(185_3 · 218_1) · 시스템 블록 안 success · danger(215_1) · warning · success `#` 두 번(177_1 · 198_1 · 247_1) · `--map-route-locked` 개수(391).
+- 캔버스가 `--color-primary` 를 읽어 선을 그림 — `B05_Profile_UI_RouteEdit_Recommend_Map.ts:132` · `D03_PlanAnalysis_UI_Map.ts:251` · `E07_StabArea_UI_Map.ts:171` → 초록이 되면 숲 위성 위에서 묻힘.
+
+### 2. 공용 부품
+
+| 부품 | 지금(근거) | 대시보드 짝 | 권함 |
+|---|---|---|---|
+| 단추 6꼴 | `.ui-btn` filled · ghost · pill · danger · danger-ghost · glass(`elements_styles.ts:17-94`) · hover 보라 고정(:48,55,63) | 같은 `.ui-btn` + hover 덮음(`Style_Pages.css:632-638`) | 제자리 — hover 를 `--color-primary-hover` · `--color-accent-soft` 로 · 꼴 이름 그대로 |
+| 입력 · 고르기 | `.ui-input` · `.ui-select` 42px(:97-162) · 화살표 보라(:143) · 좌측 양식 26px(`overlay.css:419-488`) | 같은 부품 · `b01-sys-input` 32px(`Style_Pages.css:476-489`) | 제자리 — 화살표 회색 · 초점 = 토큰 · 높이는 정할 거리 |
+| 카드 · 구역 | `.ui-card` 여백 24 · 그림자 · 제목 plum-velvet · font-display(:165-178) | `.b01-pg-card` 선 + 10px · 그림자 없음(`Style_Pages.css:43-47`) | 제자리 — `--card-padding` 16 · 그림자 0 · 제목 글색 |
+| 접는 판 | `createPanelCard`(`collapsible.ts:18-24`) · 캐럿 ▾▸ 1.7em 글자(`theme.css:450-471`) · ⚙ 글자(`collapsible.ts:32`) | 셰브런 아이콘(`icons.ts:56`) | 제자리 — 캐럿 = CSS mask 셰브런(TS 안 고침) · ⚙ → `icon("settings")` |
+| 표 | 데이터표 28px · 세로선 · 머리 · hover 강조색 섞음(`data_table.css:6-29,54-65`) · 일반표 위아래 12 · 16(`general_layout.css:92-102`) · 손표(M02 16 · M01 11 · E03 5) | `dataTable` 40px · 세로선 없음 · 머리 12px 회색(`PageKit.ts:182` · `Style_Pages.css:51-93`) | 데이터표 = 밀도 그대로 · 머리 `--color-surface` · hover `--color-hover` / 일반표 = PageKit 꼴을 `general_layout.css` 로 옮김(M02 가 클래스 직접 씀 — 교체 불가) |
+| 탭 7꼴 | B08 · B09 위 탭 = filled/ghost 단추(`B08_Quantity_UI_Page.ts:120-135` · `B09_Estimation_UI_TabBar.ts:23-40` · css `B08…Page.css:14` · `B09…Page.css:21`) · `.ui-subtabs`(`general_layout.css:59-71`) · `app-settings__tabs`(`app_settings.css:2`) · `m02-sod__tabs`(`M02_SO_Style.css:373`) · 문서 탭 `cad-tabs`(`cad_host_tabs.css:3-40`) · `ss-tabs`(`spreadsheet_toolbar.css:190-233`) | 밑줄 탭 `tabBar`(`PageKit.ts:224-265` · `Style_Pages.css:185-223`) | 공용 `.ui-tabs` 새 규칙(밑줄 꼴 · `.ui-btn--filled` = 고른 탭) + 탭 줄 4곳에 클래스 한 줄 · `.ui-subtabs` = 작은 알약 꼴 · 문서 탭 둘은 꼴 그대로(토큰만) |
+| 알약 · 배지 | `.ui-tag` 5색 · 여백 4/16 · mist-violet 바탕(`elements_styles.ts:181-194`) | `badge()`(`PageKit.ts:49`) + 색 규칙(`Style_Pages.css:123-128,431-457`) | B01 색 규칙을 전역으로 올림 · 여백 2/8 |
+| 모달 · 확인창 | `openModal`(`modal.ts:28-50`) · 12px · 가림막 보라 · 제목 = 전역 h3 24px(`modal.css:1-66` · `theme.css:531`) · `.ui-confirm`(`elements_styles.ts:247-274`) | 같은 `openModal`(B01 5 파일) | 제자리 — 가림막 토큰 · 제목 16px 600 |
+| 토스트 | 단색 4꼴 · info = royal-amethyst(`elements_styles.ts:221-244`) | 같은 `showToast` | 토큰만(info = `--color-info`) |
+| 툴팁 | `.ui-hover-info` 2px · 12px(`hover_info.css:6-21`) + `title=` | 없음 | 둥긂 6 · 그림자 `--shadow-lg` |
+| ⋯ · 오른쪽 메뉴 | `.ui-ctx-menu`(`context_menu.css:12-62`) | `rowMenu`(`PageKit.ts:100-142` · `Style_Pages.css:131-182`) | 제자리 — `--color-surface-sunken` 정의로 hover 해결 · 줄 둥긂 6 |
+| 세그먼트 | 공용 없음 · 페이지마다 filled/ghost 짝 · `.b06-design__seg`(`B06…Cross_Chart.css:250`) | 셋 따로(`b01-home__seg` Home.css:44 · `b01-proj-seg` Projects.css:88 · `b01-sys-seg` Pages.css:522-541) | 새로 안 만듦 — 쓸 페이지가 생길 때 `b01-sys-seg` 를 `.ui-seg` 로 올림 |
+| 아래 단추 줄 | `.ui-sidebar-actions`(`overlay.css:317-385`) · B05 · B06 dock 도 같은 클래스(`design_dock.ts:56`) | 없음 | 토큰만 · 바탕 = 패널 바탕 |
+| [?][<][>] | ghost 단추 글자 `?` `<` `>`(`help.ts:41,49,322-345,354-374`) · 정사각(`help.css:2-11`) | 머리 아이콘 단추 32 · 선 · 회색(`Style_Shell.css:107-125`) | `help.css` 에서 같은 꼴로 · 글자 유지(시험 = 클래스 · `data-step-nav` 만 봄 `helper_280_2_step_nav.cjs:228`) |
+
+### 3. 상세 틀(좌측 패널 · 본문 · 아래 줄 · 덮개)
+
+- 좌측 패널 = `.ui-workflow-overlay__panel--title`(`overlay.css:21-40`) — 흰 바탕 · `--shadow-lg`(:16) · 오른쪽 테두리 = 강조 파랑 75%(:33-37) · 손잡이 파랑 테두리 · 접힘 시 파랑 칠(:156-187) → 대시보드 메뉴(`Style_Shell.css:248-256` 흰 판 · 1px 선 · 그림자 없음)와 다름.
+- 바꿀 값(배치 · 동작 그대로) — 판 그림자 0 · 오른쪽 선 `--color-border` · 손잡이 = `--panel-handle-border: var(--color-accent)`(보임 지시 2026-08-04 유지) · 머리 제목 16 → 14px 600 · 프로젝트 이름 12px 회색(:116-143) · 카드 `.ui-sidebar-card` 둥긂 10(:407-411) · 강한 외곽선 `.ui-sidebar-section` 은 섞기 대신 `--color-border-strong`(:392-396 · 흐리다는 보고 두 번 — 너무 옅게 안 함) · 줄 고름 = accent-soft(:519-526 · 별칭으로 자동) · 덮개 = `--color-scrim`(:541).
+- 단계 목록(☰ 서랍 안 · `workflow_layout.css:7-108`) — 고름 = mist-violet · accent(:83-86) → 별칭으로 대시보드 메뉴 고름(`Style_Shell.css:275-279`)과 같은 꼴이 됨 · `--color-muted` 흠 고침(:102).
+- 본문 `__main` = 흰 canvas(`workflow_layout.css:132-138`) — 지도 · 3D · CAD 라 흰 바탕 유지.
+- ☰ 서랍 CSS(`app_shell.ts:445-581` 문자열) — 대시보드 메뉴 줄 꼴(36px 줄 · 8px 둥긂 · 고름 accent-soft)로 맞춤.
+- 위 얇은 머리줄(프로젝트 이름 + 단계 막대) — 가능 · 뒤 단계: 지금 B · M 은 머리 0 + ☰ 만 띄움(`device_context.css:89-98` · `app_shell.ts:534-556`) · 높이 계산이 `--app-header-h` 하나(19 파일)라 `html.is-bm-route { --app-header-h: 48px }` 로 판 · 덮개 · 본문이 함께 내려감 · 손볼 곳 = 날 `100dvh` 5곳(`design_page.css:51,84` · `E04…Style.css:8` · `E06…Style.css:15` · `E07…Style.css:8`) · ☰ 들여쓰기 변수(`--app-burger-inset` · `--wf-burger-pad` `workflow_layout.css:143-155`) 0 · 단계 막대는 `createStepBar` 의 `compact` 꼴(`workflow_layout.ts:77`) 재사용 · 패널 머리의 프로젝트 이름(`overlay.ts:148`)과 겹침 정리 · 가이드 그림 전부 바뀜 → 마지막.
+
+### 4. 글꼴
+
+- 지금 — `body { font-family: var(--font-body) }`(`theme.css:504`) · 첫 둘 Inter · Noto Sans KR 은 파일 없음(@font-face 0) → 깔린 PC 만 그 글꼴 · 아니면 Segoe UI + 맑은 고딕 · 대시보드도 글꼴 지정 없음(상속) = 「시스템 글꼴」 · 제목은 `--font-display`(Britti Sans 등 · 역시 없음 · :92-94 · h1~h6 :519 · 쓰는 곳 7).
+- Pretendard = SIL OFL 1.1(웹 내장 · 상용 가능 · 글꼴만 팔기 금지) · 허용 목록(BSD · MIT · Apache) 밖 → 결정 대기(`_조사_366-B_대시보드_SaaS.md:95,107` · `PLAN.md:110`).
+- 한 줄 교체 설계 — `--font-ui` 하나 · `--font-body` · `--font-display` = `var(--font-ui)` · 코드의 font-family 는 이미 전부 var(인쇄 HTML `spreadsheet_print_html.ts:200` 은 문서 글꼴이라 제외) · 채택 시 `theme.css` 안 `@font-face` 한 블록(상대 경로 woff2) + `--font-ui` 첫 칸 → CAD 도 theme.css 를 import 해 함께 따라옴(CAD 빌드 1번) · 숫자 칸 = `tabular-nums`(`data_table.css:70` 이미).
+
+### 5. 아이콘(이모지 · 글자 기호 — git 추적 .ts/.css · 주석 · 글 화살표 → ← 뺌)
+
+| 폴더 | 이모지 | 도형 · 화살표 | 대표 자리 |
+|---|---|---|---|
+| A00_Common | 29 | 13 | 단계 📍🧭✅ · 🪨📐🧊📄⛰️🗺️(`group_workflow.ts:30,42`) · ☰ ☀ ☾(`app_shell.ts:98,166,221`) · ↶↷(`spreadsheet_toolbar.ts:147,149`) |
+| B06 | 11 | 41 | ▲▼◀▶ 미세 이동 · ⚠ · ↺ |
+| B05 | 6 | 28 | ✕(`RouteEdit_Chrome.ts:226` · `RouteEdit_Label.ts:175`) · ▲▼ · ⇧⇩ |
+| ui_template | 8 | 11 | 📁🗺️🛣️📐∑🏗️📄(`workflow_layout.ts:65`) · 🏠(:88) · ⚙(`collapsible.ts:32`) · ▾▸(`theme.css:460,470`) |
+| 글 묶음(locale) | 18 | 15 | `locale_b5.ts` 14 |
+| M02 | 13 | 16 | ×(`Hopyo_Ledger.ts:200` · `M02_DF_FuncPanel.ts:339`) · 🔒 |
+| B09 · B08 | 2 · 0 | 10 · 1 | ×(`B09_Estimation_UI_Popup.ts:157` · `B08_Quantity_UI_Milestone_LegModal.ts:82`) |
+| B07 · B03 · M01 · E03 · D02 · D04 · E06 | 4 · 1 · 1 · 2 · 1 · 0 · 0 | 0 · 8 · 3 · 1 · 0 · 1 · 1 | ⚙ · 📍 단추(`D02_PlanBase_UI_Page.ts:164`) · ×(`D04…Page.ts:196` · `E06…Joints.ts:150`) |
+
+- 바꾸는 길 — `ui_template_icons.ts`(Tabler MIT · 21개 :30-64)에 약 20개 한 줄씩 더함(map · road · ruler · sum · crane · mapPin · compass · circleCheck · mountain · cube · settings · x · chevronLeft/Right · menu · undo/redo · alert · lock · help) · `PageKit.ts:14-22` 의 6개도 이 파일로 옮겨 중복 없앰.
+- 단계 아이콘 — `createStepBar` 의 `icon.textContent = iconText`(`workflow_layout.ts:102-107`) → 아이콘 이름이면 `icon(name, 16)` · 배열 셋(`workflow_layout.ts:65` · `group_workflow.ts:30,42`)을 이름으로.
+- 단추 — `createButton({ label, iconStart: icon(…, 16) })`(`elements.ts:39-52` · PageKit 과 같은 길) · 아이콘만 단추 = label "" + title · aria-label.
+- 함정 — `.ui-icon` 규칙이 대시보드 CSS 에만 있음(`Style_Shell.css:132-136` · 대시보드를 안 거친 화면엔 없음) → 전역(`elements_styles.ts`)으로 옮김.
+
+### 6. 어두움
+
+- 켜는 법은 이미 하나 — 둘 다 `<html data-theme>` + localStorage `frd_theme`(`app_shell.ts:26-42` · `B01_Dashboard_UI_Shell.ts:53-57`) · CAD 도 같은 열쇠(`openwebcad/src/theme.ts:13-36`) · 단 바꾸는 함수가 두 벌 · 단추 셋(`app_shell.ts:97-98,221` · `B01…Shell.ts:127-134`).
+- 값이 세 벌 — 전역 어두움(`theme.css:303-342`) · 시스템 자동(:345-381 · `--color-warning` 빠짐 · `index.html:2` `data-theme="light"` 고정이라 사실상 안 쓰임) · 셸 어두움(`Style_Shell.css:37-48`).
+- 하나로 — 값은 theme.css 두 블록에만(시스템 블록은 시험 215_1 때문에 두되 같은 값) · 셸 블록 지움 · 바꾸는 함수는 `app_shell.ts` 하나를 내보내 B01 이 부름.
+
+## ③ 권하는 전역화 설계
+
+### 토큰 표(`theme.css` 한 곳 · 「대시보드 별칭」 = `.b01-shell` 안 새 정의)
+
+| 토큰 | 밝음 | 어두움 | 대시보드 별칭 · 비고 |
+|---|---|---|---|
+| `--font-ui`(새) | 지금 `--font-body` 줄 그대로 | 같음 | `--font-body` · `--font-display` = `var(--font-ui)` |
+| `--color-accent` | #1f7a4d | #3fae75 | `--b01-accent` · focus-ring · panel-handle-border 도 이것 |
+| `--color-accent-soft`(새) | #eaf5ee | #173326 | `--b01-accent-soft` |
+| `--color-primary` · `-text` | var(accent) · #ffffff | var(accent) · #0e1512 | `--b01-accent-text` |
+| `--color-primary-hover`(새) | `color-mix(in srgb, var(--color-primary) 88%, #000)` | `… 85%, #fff` | `Style_Pages.css:632-638` 대체 |
+| `--color-bg` | #f6f7f9 | #121417 | `--b01-bg` |
+| `--color-surface`(= paper) | #f6f7f9 | #121417 | 얼룩줄 · 표 머리 · 판 바탕 |
+| `--color-surface-raised` · `--color-canvas` | #ffffff | #1b1e23 | `--b01-card` |
+| `--color-hover`(새) · `--color-surface-sunken`(새 · 별칭) | #f3f4f6 | #242830 | `--b01-hover` |
+| `--color-border`(= mist) | #e6e8ec | #2c3038 | `--b01-line` |
+| `--color-border-strong`(새 · 제안값) | #cfd4db | #3b414b | 좌측 카드 외곽 · 표 머리 밑줄 |
+| `--color-text` · `-body` | #1f2328 | #e6e8eb | `--b01-text` |
+| `--color-text-secondary` · `-muted` | #6b7280 | #9aa1ab | `--b01-muted`(셸이 지금도 둘을 한 값으로 씀) |
+| `--color-success` | #1f8a4c | #3fbb6f | 그대로 |
+| `--color-warning` | #b45309 | #f5a524 | 대시보드 알약 값(`Style_Pages.css:449,456`) |
+| `--color-danger` | #e5484d | #f06b6f | `--b01-alert` · 대비는 정할 거리 |
+| `--color-info` | #3b82c4 | #6aa6e0(제안) | `--b01-s2` |
+| `--color-scrim`(새) | rgba(16,24,40,.40) | rgba(0,0,0,.55) | 가림막 7곳 |
+| `--radius-cards` | 10px | — | `--b01-radius` · 단추 · 입력 8 그대로 |
+| `--shadow-sm` · `-lg` | 0 1px 2px rgba(16,24,40,.06) · 0 8px 24px rgba(16,24,40,.12) | 지금 값 | 카드는 선만 |
+| `--card-padding` | 16px | — | 지금 24 |
+
+- 옛 이름 — deep-iris · plum-velvet → `var(--color-text)` · royal-amethyst · lavender-wash → `var(--color-accent)` · mist-violet → `var(--color-accent-soft)` · 중립(canvas · paper · mist · smoke · ash · slate · charcoal · carbon · ink)은 새 값을 직접 둠(시험이 어두움 블록 안 canvas · mist 를 봄) · 의미 토큰이 중립을 부르는 지금 방향은 둠 · 「옛 이름 — 새 코드 금지」 주석 · twilight-beam · 그라디언트 3 · shadow-feature 지움.
+- 대시보드 — `.b01-shell { --b01-accent: var(--color-accent); … --b01-radius: var(--radius-cards); }` · 배치 값(head-h 48 · nav-w 210 · rail-w 56)은 그대로 · `Style_Shell.css:19-28` · `:37-48` 지움 · `test_546_b01_shell.py:106-107` 을 「theme.css 에 `--color-accent: #1f7a4d;` · 셸에 별칭」으로 고침(까닭은 커밋 글에).
+
+### 부품 · 틀 표(클래스 이름 그대로 · 값만)
+
+| 파일 | 바꿀 것 |
+|---|---|
+| `ui_template_elements_styles.ts` | 단추 hover · 고르기 화살표 회색 · 카드(16 · 그림자 0) · 알약 5색(B01 규칙 이전) · 토스트 info · 가림막 · `.ui-icon` 이전 · `.ui-wf` 지움 |
+| `ui_template_theme.css` | 토큰 표 · 캐럿 ▾▸ → mask 셰브런(:450-471) |
+| `ui_template_overlay.css` | 판 그림자 · 오른쪽 선 · 머리 글 크기 · 카드 둥긂 · 강한 외곽선 · 덮개 |
+| `ui_template_workflow_layout.css` · `ui_template_help.css` | `--color-muted` 흠 · [?][<][>] = 대시보드 아이콘 단추 꼴 |
+| `ui_template_general_layout.css` | 제목 32 → 20px 700 · 부제 13 · 바깥 여백 20/24/32(B02 · D01 · E01 · B03 꼴이 대시보드 페이지 머리와 같아짐) · 일반표 = PageKit 표 꼴 · `.ui-tabs` 새 규칙 · `.ui-subtabs` 알약 꼴 |
+| `ui_template_modal.css` · `_data_table.css` · `_context_menu.css` · `_hover_info.css` | 제목 16 · 가림막 / 머리 · hover 중립 / hover · 둥긂 / 둥긂 · 그림자 |
+
+## ④ 단계 · 창 나눔(같은 단계 안 파일 겹침 0 · 단계는 앞 단계 dev 합류 뒤 시작)
+
+| 단계 | 창 | 이 창만 고치는 파일 | 검증 |
+|---|---|---|---|
+| 0 토큰 | W0 | `ui_template_theme.css` · `ui_template_elements_styles.ts` · `B01_Dashboard_UI_Style_Shell.css` · `B01_Dashboard_UI_Style_Pages.css`(:430-465 · 631-638만) · `resources/tester/test_546_b01_shell.py` | `npm run typecheck` · 테마 시험 11(164 · 173_2 · 177_1 · 185_3 · 198_1 · 212_3 · 215_1 · 218_1 · 228_1 · 247_1 · 391) + 546 · 549 · 대시보드 홈 · 목록 · 시스템 밝음/어두움 전후 그림이 같음 · B05 · B08 · D03 한 장씩 · `openwebcad` `npm run build` 뒤 B07 한 장 |
+| 1 틀 | W1 | `ui_template_overlay.css` · `ui_template_workflow_layout.css` · `ui_template_help.css` · `A00_Common/design/design_dock.css` | 280_2 · 538 · 122 · 302_1 · design_view_parity · B04 · B05 · B08 · E02 · M02 패널 열림/접힘 · 폭 860 · 560 그림 |
+| 1 부품 | W2 | `ui_template_general_layout.css` · `_modal.css` · `_data_table.css` · `_context_menu.css` · `_hover_info.css` · `_group_cards.css` · `_tree.css` · `_side_panels.css` | 228_1 · 199_1 · 201_1 · 243_1 · 246_2 · 185_3 · B02 양식 · B08 표 · M02 표 · 모달 · 오른쪽 메뉴 그림 |
+| 1 아이콘 · 셸 | W3 | `ui_template_icons.ts` · `ui_template_workflow_layout.ts` · `ui_template_collapsible.ts` · `A00_Common/group_workflow.ts` · `A00_Common/app_shell.ts` · `B01_Dashboard_UI_Shell.ts` · `B01_Dashboard_UI_PageKit.ts` | typecheck · 546 · 549 · 280_2 · ☰ 서랍 · 단계 목록 · 대시보드 머리 그림 · 아이콘 파일은 먼저 push(2단계가 씀) |
+| 2 페이지 | P1 | `B02_*` · `B03_*` · `B04_*` · `B07_*`(openwebcad 은 빌드만) | 자기 페이지 시험 · 자기 포트 그림 |
+| 2 페이지 | P2 | `A00_Common/design/` · `B05_*` · `B06_*` | 〃 · `test_design_view_parity.py` |
+| 2 페이지 | P3 | `B08_*` · `B09_*` · `A00_Common/app_settings.*` | 〃 · 122 · 156_1 · 185_1 · 200_2 · 235_1 |
+| 2 페이지 | P4 | `D01~D04_*` · `E01~E07_*` | 〃 |
+| 2 페이지 | P5 | `M01_*` · `M02_*` · `A00_Common/spreadsheet/` | 〃 · `test_cad_host_tabs.py` · M02 시험 |
+| 3 머리줄(선택) | H1 | `app_shell.ts` · `device_context.css` · `overlay.css`(bm 규칙) · `workflow_layout.css` · `general_layout.css` · `design_page.css` · E04 · E06 · E07 `*_UI_Style.css` | 전 상세 페이지 높이 · 넘침 0 · 터치 모드 그림 |
+| 끝 | 1창 | `A05_EduDetail/guide/*` 그림만 | `A05_EduDetail_Guide_Capture.py --page <X>` 20 페이지 · 장면 셀렉터 깨짐 0 |
+
+- 2단계 공통 할 일 — 탭 줄에 `ui-tabs` 한 줄(B08 `Page.ts:120` · B09 `TabBar.ts:37` · `app_settings` · `m02-sod__tabs`) · ×✕📍↶↷⚙ → `icon()` · 겉 틀 hex → 토큰(캔버스 · 3D · 지도 그림 색 제외) · `--color-primary` 로 선 그리는 지도 3곳 → 지도 전용 토큰.
+- 공용 파일 변경 = 알릴 일 — 0 · 1단계 push 때 쪽지 한 줄.
+
+## ⑤ 정할 거리
+
+- 공개 쪽(A01~A08)도 초록 · 회색 바탕을 함께 받음(theme.css 전역) — 기본 = 같이 바뀜 · 막으려면 `html.is-bm-route` 범위(단 CAD iframe 은 그 클래스 없음).
+- 위험색 #e5484d 글 대비 3.9:1(작은 글 AA 미달) — 대시보드 값 통일 vs 글 전용만 #c0392b 유지.
+- 좌측 패널 — 흰 판(대시보드 메뉴 꼴) vs 회색 판 + 흰 카드.
+- 밀도 — 입력 높이 42 유지 vs 36(대시보드 양식도 같이 바뀜).
+- 지도 위 계획선 색 — 지금 보라 primary · 초록이면 숲에 묻힘 → 지도 전용 색 고름.
+- 시스템 어두움 따름(`index.html:2` 고정 풀기) 여부.
+- 글꼴 — Pretendard(OFL) 허용 여부 · 글꼴 줄을 시스템 먼저로 고정할지(Noto Sans KR 깔린 PC 와 아닌 PC 의 차이).
+- 구분 색(임도 · 예정노선 · 안정성 `Style_Projects.css:17-19`)을 전역 토큰으로 올릴지.
+- PageKit(⋯ 메뉴 · 빈 상태 · 설정 줄)을 `ui_template` 로 올릴지 — 페이지가 쓸 때만.
+- 위 머리줄(3단계) 할지 · 가이드 그림 300장 재촬영 시점(마지막 한 번 권함).

docs/raw/요구_1025/_분석_375-B_페이지별_위험.md

@@ -0,0 +1,136 @@
+# 375-B 페이지별 손볼 양 · 위험 목록 — 대시보드 테마를 프로젝트 안 화면까지
+
+세는 법 — 주석 뺀 원본(`node_modules` · `dist` · `guide` 뺌). 색 = CSS 날값(var 대체값 · `--변수:` 정의 따로) · TS 는 hex+rgb(그림 상수 섞임). 글자 = `font-size: 숫자` · `font: …px`. 기호 = 따옴표 안 그림 이모지 / 화살표 · 도형 기호. 자체 부품 = 페이지 CSS 의 btn · tab · table · badge · chip · pill · tag · toolbar 선택자(ui- 뺌) / `ui-btn` 없는 날 `<button>`.
+
+## ① 결론 다섯 줄
+
+1. 페이지 대부분은 이미 토큰만 씀 — CSS 날 색은 B06 33 · B05 26 · M02 14 · B03 8 · E06 7 뿐 · D01~D04 · E01 · E02 · E05 · B02 는 거의 0 → 큰 덩어리는 B05·B06 · M02 · CAD 앱 · 스프레드시트(E05) 넷.
+2. 가장 큰 위험 = 그림이 UI 토큰을 씀 — SVG 선 · 면이 `--color-royal-amethyst` · `accent` · `primary` · `chart-*` 를 직접 씀(B06 55줄 · B05 20 · B08 19 · M02 27 · E03 66 · E06 15) · CAD 바탕 = `--color-canvas` · 격자 = `--color-mist` · 3D 바탕 = `--color-surface-raised` → 375-A 안(옛 보라 이름을 새 강조색 별칭으로)이면 B06 설계선이 초록이 되어 원지반선(chart-1 #34c38f)과 겹침 → **그림 토큰 고정이 0단계 선행 조건**.
+3. 출력은 UI CSS 를 안 읽음 — B09 표 PDF(서버 `PRINT_CSS`) · 도면 PDF(`paint_color` 파이썬 짝) · E05 PDF(`spreadsheet_print_html.ts` `BASE_CSS`) · E05 그림(서버 SVG) 모두 자체 색 → 색 누수 없음 · 단 B09 표 PDF 는 `.ui-data-table__table` 클래스 이름에, 도면 PDF 는 「밝은 바탕 = 흰 종이」 가정에 묶임.
+4. 시험은 값보다 「var 를 쓰는지」를 봄 — 값 단정 11줄(글자 16/14/12 · 320 · 지도 · 발자국 색 · warning/success `#` 정의) · 기호 단정(→ 24파일 · ← 6 · ✓ 5 · ▾ 4 · ▲▼◀▶ 3) · 클래스 이름 270 파일 · 가이드 표시 선택자 704(페이지 클래스 472) → **클래스 이름 · 기호 글자 · DOM 단계는 그대로, 값만 바꿈**이 원칙.
+5. 순서 = 0단계 공용(한 창 · 그림 토큰 고정 포함) → 5창 병행(B05·B06 / B07+CAD / B08·B09 / E+스프레드시트 / B02~B04·D) → M02 · A군은 따로 결정 · 창마다 typecheck · 대상 시험 · tmp 전후 촬영 · 그림 · PDF 불변 확인.
+
+## ② 페이지별 표
+
+| 폴더 | CSS 파일/줄 | 색 CSS 날(대체·정의) · TS | 글자 CSS·TS | 이모지/기호 | 자체 부품 · 날 단추 | 주요 자리 | 크기 |
+|---|---|---|---|---|---|---|---|
+| B02 | 1/49 | 0 · 0 | 0 | 0/0 | 0 · 0 | 공용 부품만 | 소 |
+| B03 | 3/796 | 8(63·0) · 0 | 0 | 1/6(▤◈●◇□▧) | 1 · 3 | `B03_FileInput_UI_Style_Card.css` 40 · 보라 이름 23 | 중 |
+| B04 | 2/850 | 0(1·0) · 75 | 0 · 3 | 0/1 | 7 · 13 | `_UI_TerrainViewer_Chrome.ts:141-156` 범례 칩 인라인 색(UI) · `_UI_Watershed.ts:28-34` 지도 | 중 |
+| B05 | 10/3668 | 26(54·9) · 74 + 0x 33 | 19 · 0(캔버스 7) | 4/27(▲▼▾↶↷ ⚠✕) | 29 · 22 | `_UI_Style_Table.css` 22 · `_Style_Structures.css` 18 · `_RouteEdit_Render.ts` 26 | 대 |
+| B06 | 6/2336 | 33(8·0) · 3 | 21 | 10/42(▲▼◀▶↺ ⚠8) | 26 · 12 | `_UI_Style_Cross_Areas.css` 26 · 그림 선 55줄 | 대 |
+| A00 design(B05·B06 공용) | 2/197 | 0 | 0 | — | 0 | `design_page.css` · `design_dock.css` | B05·B06 몫 |
+| B07 페이지 | 1/550 | 0(1·0) · 3 | 7 | 4/1(⚙) | 8 · 2 | `B07_DesignDetail_UI_Style.css` | 중 |
+| B07 CAD 앱 `openwebcad/src` | 4/944 | 0(1·0) · 100(도면 상수) | 42 | 42/62(⚙✎💾🖼🔒⛶🔍) | 5 · 34(React) | `App.css:3` theme import · `App.consts.ts:25-236` | 대 |
+| B08 | 4/738 | 1 · 0 | 4 | 0/10(→) | 9 · 0 | `B08_Quantity_UI_Milestone.css` 그림 19줄 | 중 |
+| B09(+draft 인쇄) | 3/478 | 0 · 0 | 0 | 2/24(→←↑↓ ✓) | 4 · 1 | 탭 막대 `_UI_TabBar.ts` · 램프 · `B09_Draft_Print_Page.css` | 중 |
+| D01 | 0/0 | 0 · 0 | 0 · 1 | 0 | 0 | 공용만 | 소 |
+| D02 | 1/51 | 0(2·0) · 6 | 0 | 1/0(📍) | 0 | `D02_PlanBase_UI_Page.ts:41` 연도 색(지도) | 소 |
+| D03 | 1/129 | 1 · 18 | 4 | 0 | 0 · 1 | `D03_PlanAnalysis_UI_Edit.ts:93-103` 캔버스 | 소 |
+| D04 | 1/62 | 0 | 0 | 0 | 1 | — | 소 |
+| E01 | 1/21 | 0 | 1 | 0 | 0 | — | 소 |
+| E02 | 1/186 | 0 | 0 | 0 | 2 | — | 소 |
+| E03 | 4/891 | 4(0·66) · 3 | 6 | 2/2(★☆ ▦) | 2 | `E03_StabSection_UI_Style.css:8-74` 재료 · 위험 색 정의 | 중 |
+| E04 | 1/286 | 0 · 18 + 0x 8 | 9 · 캔버스 3 | 0 | 3 | `logic/E04_Stab3D_Raster.ts:74-` 색 띠 | 소~중 |
+| E05 | 1/81 | 2 · 0 | 0 | 0 | 0 | 화면 = 스프레드시트 | 소 |
+| E06 | 1/491 | 7(0·7) · 1 | 9 | 0 | 4 | `E06_StabRock_UI_Style.css:8-10` 판정 색 | 중 |
+| E07 | 1/236 | 0 · 19 | 8 · 캔버스 2 | 0 | 3 | `logic/E07_StabArea_Raster.ts` 색 띠 | 소 |
+| 스프레드시트 `A00_Common/spreadsheet` | 9/1848 | 5(1·1) · 22 | 33 · 4 | 8/35 | 34 · 2 | `spreadsheet.css:9` 13px · `spreadsheet_grid.css:9-16` 격자 토큰 | 대 |
+| M02 | 22/4368 | 14(3·12) · 7 | 16 | 13/41(→▸▾ ⚠✓✗🔒) | 37 · 0 | `DataFlow/M02_DF_Diagram.css` 11 · `M02_DF_FuncPanel.css` 9 | 대 |
+| A군 공개(A01~A09) | 9/747 | 0 · 0 | 0 | 0 | 0 | 토큰만 · 보라 이름 7(A01·A02·A06) | 소(범위 밖 권장) |
+| 참고 B10 · B11 | 1/14 · 1/72 | 0 | 0 | 0 | 0 | — | 소 |
+
+- 보라 옛 이름 직접 씀(UI 줄/그림 줄) — ui_template 49/2 · B03 23/0 · B05 23/1 · B06 20/13 · M02 13/0 · A00 11/0 · B04 3 · B07 3 · CAD `--cad-hover: var(--color-mist-violet)`(`App.css:30`).
+- B05·B06 은 한 페이지 — B05 CSS 가 `b06-chart__*` 를 씀(`B05_Profile_UI_Style.css:155`) → 한 창에서만.
+
+## ③ 그림 · 출력 색 — 테마를 따르면 안 되는 것
+
+| 무엇 | 색 자리 | 테마 영향 길 | 지킬 것 |
+|---|---|---|---|
+| B06 횡단 · 종단 선 | `B06_Section_UI_Style_Cross_Chart.css:84`(지반 chart-0) · `:96`(chart-1) · `:103` 설계선 royal-amethyst · `:155` EP 측점선 accent · `_Cross_Areas.css:34,47,53`(절·성토 chart-2/3/0) · `:60,108,120,137,144,151` royal-amethyst · `_Style.css:220` | SVG = CSS 변수 상속 → 감싸개 덮어쓰기 · :root 교체 둘 다 번짐 | 그림 전용 토큰(현 값 고정)으로 옮김 |
+| B05 종단 · 노선 추천 | `B05_Profile_UI_Style_Table.css:363,369` freemark = primary · `_RouteRecommend.css:512` = primary · `_Style.css:156` · 발자국 `_RouteEdit_Footprint.css:3-18` | 같음 | 같음 |
+| B08 이정표 그림 | `B08_Quantity_UI_Milestone.css:101,108,128` = accent | 같음 | 정할 거리 ② |
+| E03 · E06 · M02 그림 | `E03_..._UI_Style.css:8-74` 자체 토큰 · `E06_..._UI_Style.css:8-10` · M02 `DataFlow/M02_DF_Diagram.css` | 자체 토큰이라 안전 · `--color-text-secondary` 선 7(E03) · `--color-text`(E06) 만 따라감 | 글 색만 따라가도 됨 |
+| 지도 2D(캔버스) | `ui_template_theme.css:229-270` `--map-*` · 읽기 `ui_template_palette.ts:33` · `B05_..._RouteEdit_Render.ts:169-370` | `document.documentElement` 에서 읽음 → 감싸개 덮어쓰기는 안 닿음 · :root 교체만 닿음 | `--map-*` 손대지 않음(시험 391) · `Render.ts:172,370` `--color-surface` 바탕은 #f6f7fa→#fff 정도 |
+| 3D 바탕 | `B05_Profile_UI_Viewer.ts:122-124` · `B04_PreProcess_UI_Camera.ts:468-471` `--color-surface-raised` · B05 `0x` 33 · E04 8 | :root 만 | 흰색 유지면 무해 |
+| CAD 도면 | `openwebcad/src/App.css:3` theme import · `:31` `--cad-canvas: var(--color-canvas)` · `screenCanvas.drawController.ts:339,342` 바탕 · 격자 · `theme.ts:97` `paintColor`(밝은 바탕 = 흰 종이 가정) · `App.consts.ts:25-236` | iframe 이 theme.css 를 직접 읽음 → :root 교체가 그대로 번짐 · 감싸개 덮어쓰기는 안 닿음(별도 App.css 손질 필요) | `--cad-canvas` #fff 고정 · `paintColor` 손대지 않음 |
+| 래스터 · 색 띠 | `E04_Stab3D_Raster.ts:74-`·`E07_StabArea_Raster.ts` · `D02_..._UI_Page.ts:41` · `D03_..._UI_Edit.ts:93-103` · `spreadsheet_grid.ts:47` | TS 상수 · 영향 없음 | 그대로 |
+| B09 표 PDF | `B09_Draft_Print_Router.py:47-78` `PRINT_CSS`(자체 색 · `.ui-data-table__table` 선택자) ← `renderDataTableHtml` | 클래스 이름만 묶임 | 표 클래스 이름 유지 · 전후 PDF 대조 |
+| B09 도면 PDF | `B09_Draft_Print_Drawings_Pdf.py:8,44-55` `paint_color` = `theme.ts` 짝(시험 `test_302_2_print_drawings`) | 없음 | `theme.ts` 를 고치면 짝도 |
+| E05 보고서 PDF | `spreadsheet_print_html.ts:200,232-235` `BASE_CSS`(맑은 고딕 10pt · #000) · 서버 묶음 `build:spreadsheet` · 그림 `E05_StabReport_Figure.py:21-22,86` | 없음 | 이 파일 손대지 않음(손대면 서버 묶음 다시 지음) |
+| 도움말 | `ui_template_help.ts:56` 가이드 webp 300장 표시 · 인쇄 길 없음 | 그림이 옛 모습으로 남음 | 전 창 끝난 뒤 재촬영 한 번 |
+
+## ④ 깨질 시험 · 촬영 선택자
+
+값 단정(theme 값을 바꾸면 깨짐)
+- `test_228_1_table_level_font.py:98-99` — `--text-body: 16px` · `-sm: 14px` · `caption: 12px` / `test_164_detail_zoom.py:157` — 14px
+- `test_173_2_picker_tree.py:62` — `--wf-left-panel-width: 320px`
+- `test_391_routeedit_plan_draw.py:81-82` — `--map-route-locked` 밝음 1 · 어두움 2
+- `test_346_2_footprint_draw.py:116-118` — B05 발자국 hex(CSS · TS 대체값)
+- `test_177_1:27` · `test_198_1:118` · `test_247_1:107` — `--color-warning/success: #` 두 번 이상(별칭 `var()` 로 바꾸면 깨짐)
+- `test_185_3_hover_info.py:183` — 어두움 블록에 canvas · mist / `test_218_1_loupe.py:189-190` — `--loupe-border: var(--color-accent)`
+- `test_546_b01_shell.py:106` — `--b01-accent: #1f7a4d;` · 셸 CSS 에 `:root` 없음(B01 토큰을 올리면 고침)
+- 화면 스크립트 `ui_checks/45-6_삭제_단추_색.js:7` — danger = rgb(192,57,43) / rgb(232,105,90) 단정 · `43-5_돌아가기_대비.js` · `275_챗봇_테마_엔터.js` = 대비 재기(검증에 다시 씀) · `ui_checks` 96개 중 계산 스타일 29
+
+규칙 단정(선택자 안 `var(...)` 를 바꾸면 깨짐 — 그림 토큰 옮길 때 같이 고침)
+- B05 `test_215_1:185-187`(freemark success · danger) · `test_177_1:20-22` · `test_345_5c` · `test_507_3:72-73,86`(warning · 캔버스 `bold 13px`)
+- B06 `test_318_cross_card.py:162,193,195`(chart-1 · `--b06-tag`) · `test_164:140,146` · `test_173_areas_detail.py:48-50` · `test_207_1`
+- B08 · B09 `test_198_1:115` · `test_247_1:105` · `test_257_1:55-56`(램프) · `test_235_1:189-192` · `test_200_2:183`(`font-size: 13px` 없음) · `test_203_1` · `test_183_3` · `test_277_1`
+- 공용 표 · 모달 `test_199_1:75` · `test_243_1` · `test_185_1:74` · `test_modal_top_and_add_word.py:30-31` / B07 `test_212_3:46,55` · `test_280_5` · CAD `test_cad_host_tabs.py`(App.css · App_Layers.css · host-burger.css)
+- CSS 파일을 읽는 시험 106개 — 많은 순 ui_template 33 · B05 RouteEdit 8 · B06 7 · B08 6 · B06 Cross_Areas 6 · B09 Page 5 · M02 4
+
+기호 글자 단정(아이콘으로 바꾸면 깨짐)
+- → 24파일 · ← 6(B09 `test_182` · `184_3` · `200_2:142`「→ 들여쓰기」 · `204_1` · `166_2` · B08 `244_13`) · ▾ 4(`235_1:99` · `184_3` · `246_2` · `345_5c`) · ✓ 5 · ✗ 2(B09 `183_3` · M02 `128_icon_chip_center` · `area_old_links` · `hopyo_flow` · `hopyo_screen`) · ▲▼◀▶(`test_108_drag_box_hit` · `139_6_line_shift` · `271_straighten_pick`)
+- 클래스 이름을 문자열로 잡는 시험 · 도우미 270 파일 → 이름 바꾸기 금지
+
+가이드 촬영(`A05_EduDetail/guide/*/_scenes.json` · 300장면)
+- 표시 선택자 704 — 페이지 클래스 472 · `.ui-*` 183(`ui-collapsible__title` 78 · `ui-sidebar-actions` 63 · `ui-btn` 25 · `ui-btn--filled` 13) · `data-`·id 173 · `has-text` 9 / 대기 · 누름 포함 전체 1777(has-text 52 = B09 28 · E05 11 `ss-tabs__tab:has-text` · B01 10)
+- 깨지는 꼴 — 클래스 이름 바꿈 · 감싸는 칸 추가(`>` 자식 결합 · `nth-child(7)` · `>> nth=0` 347곳) · 단추 글 바꿈(has-text) · 숨김 기본값 바뀜
+- 형식 검사 `test_539_guide_capture.py` 는 DOM 을 안 봄 → 실제 확인은 촬영 돌리기뿐(실패 = 종료 코드 1)
+
+## ⑤ 권하는 순서 · 창 나눔 · 검증 목록
+
+| 단계 · 창 | 맡는 폴더(겹침 없음) | 크기 |
+|---|---|---|
+| 0 공용(한 창 · 먼저 · 합친 뒤 모두 받기) | `ui_template/*`(cad_host 뺌) · `A00_Common/*.css` · `app_shell.ts` · 그림 전용 토큰 추가(현 값 고정 — `--draw-*` 류) · 보라 옛 이름 UI 줄 → 의미 토큰 | 대 |
+| 1-① B05·B06 | `B05_Profile/` · `B06_Section/` · `A00_Common/design/` — 그림 선택자 55+20줄을 그림 토큰으로 | 대 |
+| 1-② B07 + CAD | `B07_DesignDetail/`(openwebcad 포함) · `ui_template/cad_host/` — `App.css` 감싸기 · `--cad-canvas` 고정 · `npm run build:b07-cad` | 대 |
+| 1-③ B08·B09 | `B08_Quantity/` · `B09_Estimation/`(draft 포함) — 탭 막대 · 램프 · 이정표 그림 | 중 |
+| 1-④ E군 + 스프레드시트 | `E01~E07/` · `A00_Common/spreadsheet/`(`spreadsheet_print_html.ts` 손대지 않음) | 중~대 |
+| 1-⑤ B02~B04 · D군 | `B02~B04/` · `D01~D04/` | 소~중 |
+| 2 나중(따로 결정) | `M02_MasterTemplete/` · `M01_MasterData/`(스프레드시트 · cad_host 는 안 만짐) · A군 | 대 |
+
+창마다 검증 목록
+1. `npm run typecheck` · 고친 CSS · TS `prettier`
+2. 대상 시험만 — ④ 의 그 창 몫 + 그 폴더 이름이 든 시험(`pytest resources/tester/<파일> -q`) · 0단계는 `test_228_1 · 164 · 173_2 · 185_3 · 177_1 · 198_1 · 247_1 · 218_1 · 199_1 · 243_1 · 546 · modal_top`
+3. 이름 불변 대조 — `git diff` 에서 지운 클래스 이름 · 기호 글자를 `resources/tester` · `guide/*/_scenes.json` 에서 grep → 0 이어야 함
+4. 전후 촬영 — 시작 전 `guide/<P>/_scenes.json` 을 `tmp/brain_375/cap/<P>_before/` 로 복사(촬영기는 out 폴더의 `_scenes.json` 을 읽음) → `./venv/Scripts/python.exe A05_EduDetail/A05_EduDetail_Guide_Capture.py --page <P> --out tmp/brain_375/cap/<P>_before --vite http://localhost:<자기 vite> --project-id <자기 검증 프로젝트>` · 고친 뒤 `_after` 로 같게 · 실패 0 · 3D · 지도 장면은 `--headed`
+5. 그림 불변 — ORCA `eval` 로 핵심 선 계산 색 전후 같음(B06 `.b06-chart__design-profile` · `__profile` · `__cross-profile` stroke · B05 freemark · B08 이정표 · CAD 바탕 #ffffff · 3D 배경)
+6. 출력 불변(③ 해당 창) — B09 표 PDF · 도면 PDF · E05 PDF 를 전후로 받아 쪽 수 · 글 · 해시 대조
+7. 어두움 한 장면(`data-theme=dark`) · 대비 스크립트(`ui_checks/43-5` · `275` 방식)로 강조 단추 · 흐린 글 비율
+8. CAD 창만 — 빌드 뒤 `orca reload` · 옛 화면이 남으면 새 탭
+
+## ⑥ 정할 거리
+
+대비(현행 대 새 값 · 흰 바탕 기준 · WCAG 글 4.5)
+
+| 짝 | 현행 | 새(B01) |
+|---|---|---|
+| 주 단추 흰 글 / 강조 바탕 | 16.65(#26114a) | 5.32(#1f7a4d) 통과 |
+| 강조 글 / 연한 강조 바탕 #eaf5ee | — | 4.76 통과 |
+| 흐린 글 / 흰 · 회색 바탕 | 3.08 · 2.87(#9491a1) 미달 | 4.83 · 4.51(#6b7280) 통과 · hover #f3f4f6 위 4.39 살짝 미달 |
+| 위험 글 / 흰 바탕 | 5.44(#c0392b) | 3.91(#e5484d) 미달 |
+| 경고 글 #b8860b · 공정 경고 #d97706 | 3.25 · 3.19 미달 | 그대로면 그대로 미달 |
+| 성공색 #1f8a4c 대 강조 #1f7a4d | — | 1.21 = 사실상 같은 색 |
+| 원지반선 chart-1 #34c38f 대 강조 | — | 2.37 = 둘 다 초록 |
+| 어두움 강조 #3fae75 위 #0e1512 · 흐린 글 | — | 6.63 · 6.41 통과 |
+
+정할 것
+1. 바꾸는 자리 — :root 값 교체(375-A 안 · A군 공개 화면 · CAD iframe · 캔버스 · 3D 까지 번짐) 대 프로젝트 화면 감싸개 덮어쓰기(B01 식 · 캔버스 · CAD 는 안 닿고 SVG 만 닿음) 중 하나 · A군 공개 사이트를 보라로 둘지.
+2. 그림 속 강조 — B06 설계선 · EP 선 · B05 freemark · 노선 추천 계획선 · B08 이정표를 지금 보라로 고정할지, 새 강조색을 따를지(따르면 원지반선 · 성공 램프와 초록 셋이 겹침).
+3. 성공색 — 강조색과 1.21:1 → 「연결됨 · 성공」 램프(B08 · B09)가 주 단추와 구분 안 됨 · 성공색을 옮길지.
+4. 위험색 — 글자에 쓸 값(#c0392b 유지 권장 · #e5484d 는 채운 바탕용) · `ui_checks/45-6` 단정 고침 여부.
+5. 글자 크기 — B01 은 11~13px 날값 · 페이지는 16/14/12 토큰 · 내리면 표 · 측점 카드 줄바꿈 · 가이드 표시 위치가 다 바뀜.
+6. 머리줄 — 프로젝트 화면의 ☰ 서랍(`app-header`) 유지 대 B01 셸(위 머리 + 왼쪽 메뉴) 씌움.
+7. 기호 → Tabler 아이콘 범위 — 글자 기호(→ ← ▾ ▲▼◀▶ ✓ ✗)는 시험 · has-text 가 글자로 잡음 → 남김 권장 · 그림 이모지(⚠ ⚙ 💾 🖼 🔒 📍 등)만 교체.
+8. M02 · M01 을 이번에 넣을지 · 가이드 300장 재촬영 시점(모든 창 합친 뒤 한 번).

docs/raw/요구_1025/요구서_375_전역테마.md

@@ -0,0 +1,46 @@
+# 요구서 375 — 대시보드 테마를 프로젝트 안 화면까지 전역으로
+
+원문 = `사용자요구_1025.md` 요구 375 · 근거 = `_분석_375-A_토큰_공용부품.md`(토큰 · 공용 부품 · 단계) · `_분석_375-B_페이지별_위험.md`(페이지별 차이 · 그림 색 · 시험 · 대비) · 본보기 = 새 대시보드(PLAN 546~549) · 계획 = `PLAN.md` 551~554.
+
+## 1. 지금
+
+- 색 값이 두 벌 — 옛 공통 값(`ui_template/ui_template_theme.css` · 보라 · 마케팅 사이트 꼴 · CAD 화면도 씀) / 대시보드 값(`--b01-*` · 초록 · 대시보드 안에서만).
+- 대부분 페이지는 이미 공통 색 변수만 씀 — 색을 박아 둔 곳은 B06 33 · B05 26 · M02 14 · B03 8 · E06 7 곳 정도.
+- 가장 큰 위험 = 그림(종단 · 횡단 · 이정표 SVG · CAD 바탕 · 3D 바탕)이 화면 색 변수를 같이 씀 — 바탕 색만 바꾸면 설계선이 초록 원지반선과 겹침.
+- 인쇄 · PDF(B09 표 · 도면 · E05 보고서)는 화면 CSS 를 안 읽어 색이 새지 않음.
+- 시험 · 가이드 촬영 장면(704 곳)이 클래스 이름 · 기호 글자를 잡음.
+
+## 2. 만들 것
+
+- **공통 값 한 벌** — 대시보드 값(초록 강조 #1f7a4d · 바탕 #f6f7f9 · 카드 흰색 · 선 #e6e8ec · 글 #1f2328 · 보조 #6b7280 · 둥글기 10 · 밝음 / 어두움)을 `theme.css` 한 곳에 둠 · 대시보드는 그 값을 받아 씀 · 옛 보라 이름은 새 값의 별칭으로 돌려 260 곳이 저절로 따라옴.
+- **그림 색은 따로 고정** — 설계선 · 원지반선 · 이정표 · 지도 계획선 · CAD 바탕 · 3D 바탕은 그림 전용 값으로 지금 색 그대로 묶음(화면 테마와 떨어짐).
+- **공용 부품 모양** — 단추 · 입력 · 카드 · 표 · 탭 · 모달 · 알림 · 오른쪽 메뉴 · 좌측 패널 · 아래 단추 줄을 대시보드 꼴로(클래스 이름 그대로 · 값만) · 공용 탭 모양 하나 새로.
+- **아이콘** — 그림 이모지(⚠ ⚙ 💾 🔒 📍 등)를 Tabler 아이콘으로 · 글자 기호(→ ▾ ▲▼ ✓)는 그대로(시험이 글자로 잡음).
+- **글꼴** — 한 토큰(`--font-ui`)으로 묶음 · Pretendard 는 라이센스 답 뒤 한 줄로.
+- **배치 · 동작은 그대로** — 왼쪽 패널 · 지도 · 아래 단추 줄 자리 · ☰ 서랍 유지.
+
+## 3. 정함(브레인 · 사용자가 바꿀 수 있음)
+
+| 번호 | 정할 거리 | 정함 |
+| --- | --- | --- |
+| 1 | 바꾸는 자리 | `theme.css` 한 곳(전 페이지 · CAD 함께) |
+| 2 | 그림 속 선 색 | 지금 색 그대로 고정(그림 전용 값) |
+| 3 | 성공색 · 강조색이 둘 다 초록 | 성공 램프에 ✓ 아이콘 같이(색만으로 안 가름) |
+| 4 | 위험색 | 글자 = #c0392b(대비 5.4) · 채운 바탕 = #e5484d |
+| 5 | 글자 크기 | 페이지 16 / 14 / 12 그대로(표 · 측점 줄바꿈 · 촬영 자리 보호) |
+| 6 | 입력 높이 | 42 그대로 |
+| 7 | 좌측 패널 | 흰 판 + 1 px 선 · 그림자 없음(대시보드 메뉴 꼴) |
+| 8 | 가이드 그림 300 장 | 모든 창 합친 뒤 한 번 다시 찍음 |
+
+## 4. 사용자 확정
+
+1. 공개 화면(로그인 전 · A 그룹)도 같이 초록 · 회색으로 바뀌어도 되는지(기본 = 같이).
+2. M02 · M01 마스터 화면을 이번에 같이 할지(기본 = 이번에 같이).
+3. 프로젝트 화면 위에 대시보드 같은 머리 줄을 씌울지(기본 = 이번엔 안 함 · 뒤 단계).
+4. 글꼴 Pretendard(SIL OFL) 허용 여부.
+
+## 5. 지킬 것
+
+- 클래스 이름 · data- · 기호 글자 · 화면 구조는 바꾸지 않음(시험 · 촬영 장면 보호).
+- 단계마다 전후 촬영 대조 · 그림 색 전후 같음 · B09 · E05 PDF 전후 같음.
+- 새 라이브러리 0.