chore(plan): 54-33 횡단 카드 폭 · 종단 하단 창 분리 조사 보관

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

docs/raw/조사/2026-10-06_54-33_횡단카드_종단창.md

@@ -0,0 +1,72 @@
+54-33 끝 조사 · ① 갈래 3(추천 B: 열 수 자동 + 카드 최소·최대 폭) · ② 됨(같은 창 코드로 화면 조각만 팝업에 옮기는 길 · 키보드·메뉴 연결 손봐야 함)
+
+# ① 횡단 카드 크기
+
+## 지금 크기가 정해지는 곳
+- 열 수 — `B06_Section_UI_Section_View.ts:319-326` : 열 수 = 칸 폭 ÷ (최소 폭 560 + 간격 16) 내림. 카드 폭 = 칸 폭을 열 수로 나눈 값. 최대 폭 없음 (`_Section_Common.ts:39-40` 상수 560·16).
+- 높이 — `_Cross_View_Metrics.ts:57-64` : 1m 당 픽셀 = (카드 폭 − 좌우 여백 78) ÷ 가로 범위(m). 높이 = 고도 범위 × 1m 당 픽셀 + 위아래 여백 36 + 면적 표 머리방 58. 바닥 250 (`_Section_Common.ts:37`).
+- 줄 높이 — `_Section_View.ts:344-349` : 같은 줄 카드 중 가장 큰 높이로 통일 (낮은 카드는 위아래 빈 자리).
+- 그림 — `_Cross_View.ts:310-314` : SVG 가로세로 = 카드 px 그대로, viewBox 도 같은 값. 즉 CSS 확대·축소 없음 · 가로세로 같은 1m 당 픽셀 · 글자 크기 고정.
+- 카드 틀 — `_Style_Cross.css:42-63`(머리·꼬리 줄) · `:119-123`(바둑판 · 열 수는 JS 가 직접 덮어씀).
+
+## 원인
+- 카드 높이 = 폭에 비례 (그림 모양 고정이므로). 칸 폭 1500 이면 2열 · 카드 약 740 폭 · 그림 높이 약 480 + 머리·꼬리 줄 → 한 줄이 칸 높이를 넘음.
+- 폭을 줄이면 그림 전체가 같은 비율로 작아짐 = 축척(가로세로 비) 유지. 높이만 자르면 위아래 고도가 잘리거나 빈 자리가 늚.
+- 줄여도 안 줄어드는 고정분 : 여백 36 · 면적 표 머리방 58 · 카드 머리·꼬리 · 바닥 250 → 아주 좁은 카드에서 높이가 폭을 따라 안 줄어듦.
+
+## 갈래
+- A. 최소 폭만 낮추기 (560 → 약 400)
+  - 고칠 곳 : 상수 한 줄.
+  - 장 : 가장 작음 · 축척 그대로.
+  - 단 : 1.5줄 보장 없음 (칸 높이를 안 봄) · 칸 폭마다 우연히 맞음.
+  - 크기 : 1줄.
+- B. 열 수 자동 (추천)
+  - 고칠 곳 : `_Section_View.ts:319-326` 열 수 결정부 + 칸 높이도 보기(ResizeObserver 가 지금 폭만 봄 `:402-412`).
+  - 방식 : 열 수 2·3·4… 를 차례로 시험 → 첫 줄 높이 + 간격 + 둘째 줄 절반이 칸 높이 안에 드는 가장 적은 열 수 채택. 카드 폭이 최소 폭(예 360~400) 아래로 내려가면 거기서 멈춤. 최대 폭(예 800~900)을 넘는 1열은 열을 늘리거나 가운데 정렬로 폭 상한.
+  - 장 : 칸 높이가 달라져도(하단 패널 끌기·창 크기) 늘 1.5줄 근처 · 축척 유지(그림이 통째로 작아질 뿐 · 잘림 없음) · 계산이 기존 `crossPlotBase` 재사용.
+  - 단 : 하단 패널을 끌 때 열 수가 바뀌면 카드 전체 다시 그림 (열 수가 바뀔 때만 다시 그리게 막아야 함 · 줌·팬 상태는 측점별 캐시라 유지) · 좁아진 카드는 글자 대비 그림이 작아 읽기 힘든 한계(바닥 폭이 정함) · 바닥 250 · 머리방 58 같은 고정분이 1.5줄에 못 미치게 할 수 있음 → 이 값도 열 수 계산에 넣어야 함.
+  - 크기 : 약 40~60줄 + 시험 (`_Section_View.ts` 700줄 한계 확인 필요 · 열 수 계산을 별 파일로).
+- C. 높이 상한 + 그림 맞춤 (CSS 만)
+  - 방식 : 카드 높이를 상한으로 막고 SVG 를 `preserveAspectRatio` 로 맞춤.
+  - 장 : 고치는 곳 적음.
+  - 단 : 그림이 줄어 양옆이 비고(폭 낭비) 카드 안 모든 클릭 좌표·끌기(`data-px-per-m`·팬)·글자 크기가 화면 배율과 어긋나 축척 신뢰 훼손 → 비추천.
+
+## 한계·확인 필요
+- 1.5줄이 실제로 되는 폭은 칸 높이와 단면 모양(고도 범위 · 가로 범위 · 세로 과장 배율)에 따라 다름 — 실측값 아님 · 식으로만 추정 : 칸 높이 500, 가로 40m, 고도 범위 23m 이면 카드 폭 약 300 까지 내려가야 1.5줄 → 바닥 폭 360~400 이면 칸 높이가 작은 화면에서는 1.5줄에 못 미칠 수 있음. 바닥 폭은 사용자 협의 대상(임의 확정 안 함).
+- 줄 높이가 줄 최댓값이라 줄마다 열 수 시험 값이 다름 → 시험은 첫 줄과 둘째 줄을 실제 데이터로 계산.
+
+# ② 종단 하단 패널을 별도 브라우저 창으로
+
+## 지금 하단 패널이 기대는 것
+- 한 벌만 존재 — `A00_Common/design/design_page.ts:116-118,125-138` (`profileSlot` · `shared.profile`) · 종단 보기·횡단 보기가 같은 인스턴스를 씀. 만드는 곳 `design_profile.ts:128-239`.
+- 자료 — 같은 창 메모리(모듈 변수) + `sessionStorage`(초안·결과 · `b_page_state.ts:46-199,249-250`) + 설계 가게(`design_store.ts` : 구독 방식이 같은 창 안에서만 동작). 화면 취향(패널 높이·접힘)은 `localStorage` (+ 계정 서버 저장) → 창끼리 이미 공유.
+- 페이지 쪽 연결 — 콜백 약 12 종 (`B05_Profile_UI_Profile_Panel_Types.ts:17-57` : 관 변경 · 구조물 이동·추가·삭제 · 측점 선택 · 횡단 재계산 알림 등) + `onSelectStation` · `onResetAll` + 횡단 카드 갱신 `refreshCards`.
+- 창 전역에 거는 리스너 — `window` 포인터 놓기·취소·blur·keydown·keyup (`_Profile_Drag.ts:82-83,201-202` · `_Profile_Edit.ts:60-62` · `_Profile_Panel_Tools.ts:268-269,313-317` · `_Profile_Wheel`) · 우클릭 메뉴가 `document` 에 리스너 (`ui_template_context_menu.ts:57,67`) · 화면 크기 `window.innerHeight` (`_Profile_Heights.ts:26` · `_MassHaul.ts:231` · `_TableOverlay.ts:84`) · 토스트·모달은 `document.body` (`ui_template_elements.ts`, `ui_template_modal.ts`).
+- 위치 — 종단 보기에서는 3D 위에 뜨는 판(`B05_Profile_UI_Style.css:42-54` absolute) · 횡단 보기는 카드 아래 흐름(`design_page.css:38-41`).
+
+## 갈래
+- A. 같은 창 코드로 화면 조각만 팝업에 옮기기 (추천)
+  - 방식 : [분리] 단추 → `window.open`(같은 출처 · 사용자 클릭 안에서) → 팝업 문서에 스타일 복사 → `profileSlot` 안 종단도 DOM 을 팝업 본문으로 옮김. 코드는 메인 창에서 계속 실행.
+  - 자료 공유 : 필요 없음 — 같은 메모리 · 같은 `sessionStorage` · 같은 가게. 편집 → 횡단 카드·3D 갱신도 지금 경로 그대로.
+  - 손볼 곳 : ① 창 전역 리스너를 요소의 소속 창(`ownerDocument.defaultView`)에 걸도록 약 10곳 ② 우클릭 메뉴 `document` 리스너와 화면 밖 보정 `window.innerWidth/Height` ③ 팝업 닫힘(`pagehide`) 때 DOM 을 원래 자리로 되돌림 · 메인 창 새로고침·이동 때 팝업 닫기 ④ 메인 쪽 빈 자리 처리(종단 보기 = 3D 가 전면 · 횡단 보기 = 카드 칸이 아래까지 늘어남) ⑤ 스타일 복사 (`link`·`style` 통째 복제 · 개발 서버 핫리로드 스타일 포함) ⑥ 토스트·모달은 메인 창에 뜸 (팝업 쪽에서 보이려면 별도 처리).
+  - 크기 : 신규 약 200~300줄 + 기존 약 8 파일 소폭 수정. 위험 중간 — 키보드(▲▼ 방향키)·끌기·우클릭 전부 다시 시험해야 함.
+- B. 팝업이 자체 앱을 띄우고 BroadcastChannel 로 동기화
+  - 방식 : 별도 라우트로 종단도만 띄우고 메인과 메시지 주고받기.
+  - 막히는 것 : `sessionStorage` 는 탭마다 따로(팝업 열릴 때 복사본만 받고 이후 갈라짐 · `storage` 이벤트도 세션 저장소는 창 사이 안 옴) → 초안 5종(계획고·관·구조물·선택·횡단 상세) 양방향 동기화 직접 구현 · 콜백 12종을 메시지로 바꿔야 함 · 자료 정본이 둘로 갈려 `CLAUDE.md` 5장(캐시 한 곳)과 충돌 · 횡단 상세 응답이 커서 메시지 비용 큼.
+  - 크기 : 큼 (수백 줄 + 충돌 처리). 비추천.
+- C. 읽기 전용 거울 (팝업은 종단도 그림 + 선택 표시만, 편집은 메인)
+  - 장 : 단순(BroadcastChannel 로 선택 측점·종단 자료 복사).
+  - 단 : 편집 도구(▲▼·직선화·유토곡선 표)를 쓰려는 목적이면 의미 없음.
+
+## 한계·확인 필요
+- ORCA 내장 브라우저에서 `window.open` 팝업이 뜨는지 확인 안 함 — 되는지 먼저 한 번 시험 필요(안 되면 공용 브라우저에서만 검증).
+- 팝업 차단 : 반드시 단추 클릭 안에서 열어야 함.
+- 메인 창 닫기·이동 시 팝업 정리, 팝업 위치·크기 기억(취향 저장소 `pref` 에 한 칸)은 부가 작업.
+- 두 창을 동시에 켜는 쓰기 충돌은 A 에서는 없음 (한 인스턴스).
+
+# 요약 다섯 줄
+1. ① 카드 높이는 폭에 비례(그림이 CSS 확대 없이 px 그대로) → 폭을 줄이면 축척 유지한 채 높이가 줄어듦.
+2. 추천 B : 열 수를 칸 높이에 맞춰 자동 선택(1.5줄) + 카드 최소·최대 폭 상한 · 약 50줄 · 최소 폭 값은 협의 필요.
+3. 한계 : 여백 36·머리방 58·바닥 250 은 안 줄어서 칸이 낮은 화면에서는 1.5줄에 못 미칠 수 있음.
+4. ② 종단 패널은 지금 한 벌 + 같은 창 메모리·세션 저장소에 기댐 → 팝업에 별도 앱을 띄우면 동기화가 크게 어려움.
+5. 추천 A : 코드는 메인에 두고 화면 조각만 팝업으로 옮김(자료 공유 불필요) · 창 전역 리스너 약 10곳과 메뉴 손봐야 함 · ORCA 에서 팝업 되는지 먼저 확인.