Files
Aislo/D03_PlanAnalysis/D03_PlanAnalysis_UI_Style.css
T
eomsangdonandClaude Opus 5.5 5e906ceb44 perf(D03): 노선분석 평면 두 장 캔버스 · 한 화면 한 번 그리기 · 등고선 줌 단계 색인 · 글 폭 기억 — 그림 그대로 (PLAN 582-0 · 582-1 · 요구 440-9 · 441)
- D03 평면 = 바탕(위성 · 바탕 겹 다섯) / 위(그은 선 · 재기) 두 장 · 마우스 움직임 · 누름 = 위만 · 화면 바뀜 = 둘 다 · rAF 한 화면 한 번
- PlanMap.redraw = 위 겹만 · redrawBase = 바탕까지(겹 켬끔 · 받음)
- 공용 그리기에 선택 칸만 더함 — 조각 색인(part.lod · indexLayerLod 를 부른 레이어만) · 글 폭 기억(widths 인자) · B04 · B05 는 안 켬
- 한 판 한 번 긋기(d)는 뺌 — 반투명 선 겹침 색이 바뀌고(픽셀 14만 차) 래스터가 더 느림(36 → 60 ms)
- 지킴 시험 test_582_contour_lod — 색인 그린 명령 = 지금 명령(27 줌 · 자리 · 닫힌 고리 · 짧은 조각) · 글 폭 기억 같은 글

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-29 14:41:59 +09:00

138 lines
2.7 KiB
CSS

/* D03 예정노선 2단계 노선분석(PLAN 530-3 · 563-1) — 평면이 본문을 채움 · 위에 도구줄 · 좌측 지형 · 그리기 · 구역 · 연도. */
.d03-plan-layout .ui-workflow-layout__main {
height: calc(100dvh - var(--app-header-h));
overflow: hidden;
}
.d03-plan {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.d03-plan__map {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
background: #1f2937;
}
.d03-plan__map canvas {
display: block;
touch-action: none;
}
/* 582 바탕 캔버스 — 위 캔버스 밑에 겹침 · 누름은 위가 받음 */
.d03-plan__map .d03-plan__base {
position: absolute;
inset: 0;
pointer-events: none;
}
.d03-plan__map canvas:not(.d03-plan__base) {
position: relative;
}
/* 571-1 — 왼쪽은 겹 단추줄(222px) 오른쪽까지 · 그 사이가 모자라면 도구줄이 가로 밀림 · 오른쪽 붙임 그대로 */
.d03-plan__tools {
position: absolute;
top: var(--spacing-8);
right: var(--spacing-8);
left: calc(2 * var(--spacing-8) + 222px);
align-items: flex-end;
}
/* 569-2 바탕 겹 단추 — 왼쪽 위 · 급경사 범례 — 왼쪽 아래 */
.d03-plan__layers {
position: absolute;
top: var(--spacing-8);
left: var(--spacing-8);
}
.d03-plan__legend {
position: absolute;
bottom: var(--spacing-8);
left: var(--spacing-8);
padding: var(--spacing-4) var(--spacing-8);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.d03-plan__hint {
margin: 0 0 6px;
}
.d03-plan__row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
align-items: flex-end;
margin-bottom: 6px;
}
.d03-plan__row > .ui-field {
flex: 1 1 6rem;
margin: 0;
}
.d03-plan__draw {
display: flex;
flex-direction: column;
gap: 6px;
}
.d03-plan__pieces {
display: flex;
flex-direction: column;
gap: 4px;
}
.d03-plan__piece-head {
margin: 6px 0 0;
font-weight: 600;
color: var(--color-text);
}
.d03-plan__piece {
display: flex;
gap: var(--spacing-8);
align-items: center;
justify-content: space-between;
}
.d03-plan__piece > .ui-text {
margin: 0;
}
.d03-plan__piece > .ui-field {
flex: 0 0 6.5rem;
margin: 0;
}
/* 지형 받기 범위 미리보기 — 카카오 지도 */
.d03-plan__extent > .ui-text {
margin: 0 0 6px;
}
/* 3D 큰 모달 — 3D 화면이 모달 몸을 꽉 채움 · 몸 스크롤 없음 */
.ui-modal--wide > .ui-modal__body.d03-plan__3d-body {
overflow: hidden;
}
.d03-plan__3d-body > .b05-route__viewport {
flex: 1 1 auto;
min-height: 0;
border-radius: var(--radius-lg);
}
.d03-plan__3d-top {
display: flex;
gap: var(--spacing-8);
align-items: center;
justify-content: flex-end;
margin-bottom: 6px;
}