eomsangdonandClaude Opus 5
be78af0460
좌측 「계획노선」 섹션의 [계획노선 편집] 로 큰 모달을 엶(PLAN 0-2). - 등고선 도엽 위에 예상노선(점선)·계획노선(실선)을 함께 그림. 지도 그리기는 배수유역도와 같은 도구(`B04_PreProcess_UI_MapRender`) 재사용. - 노드 끌어 옮기기 · 선 두 번 클릭으로 노드 끼우기 · 오른쪽 클릭으로 지우기, 배경 끌기로 화면 이동, 휠로 확대. - 편집 중에는 계산이 나가지 않음. [확인]에서만 서버가 배수유역부터 재계산하며 그동안 화면을 덮는 안내를 띄움. 끝나면 세션 초안·조회 캐시를 비우고 페이지를 다시 세움. - [예상노선으로] 는 수정본을 지우고 같은 재계산(노선 초기화). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
133 lines
2.9 KiB
CSS
133 lines
2.9 KiB
CSS
/* 계획노선 편집 모달 — 큰 모달 하나. 계산이 오래 걸리는 조작이라 화면을 통째로 덮는다
|
|
(2026-09-06 사용자 확정). 색은 전부 테마 토큰을 쓴다. */
|
|
|
|
.b05-routeedit {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: var(--z-modal, 1000);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgb(0 0 0 / 55%);
|
|
}
|
|
|
|
.b05-routeedit__box {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(1200px, 94vw);
|
|
height: min(820px, 92vh);
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-16, 12px);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: 0 12px 40px rgb(0 0 0 / 45%);
|
|
}
|
|
|
|
.b05-routeedit__head {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--spacing-12);
|
|
padding: var(--spacing-12) var(--spacing-16);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.b05-routeedit__hint {
|
|
flex: 1 1 auto;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b05-routeedit__close {
|
|
flex: none;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-secondary);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b05-routeedit__canvas-wrap {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.b05-routeedit__canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
touch-action: none;
|
|
}
|
|
|
|
.b05-routeedit__foot {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-12) var(--spacing-16);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.b05-routeedit__status {
|
|
flex: 1 1 auto;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b05-routeedit__legend {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b05-routeedit__legend i {
|
|
display: inline-block;
|
|
width: 22px;
|
|
height: 0;
|
|
margin-right: 2px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.b05-routeedit__legend i.is-expected {
|
|
border-top: 2px dashed var(--color-text-secondary, #9ca3af);
|
|
}
|
|
|
|
.b05-routeedit__legend i.is-planned {
|
|
border-top: 2px solid var(--map-route, #f97316);
|
|
}
|
|
|
|
.b05-routeedit__btn {
|
|
flex: none;
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-8, 6px);
|
|
background: var(--color-surface);
|
|
color: var(--color-text-body);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b05-routeedit__btn.is-primary {
|
|
border-color: transparent;
|
|
background: var(--color-primary, #7c3aed);
|
|
color: #fff;
|
|
}
|
|
|
|
/* 재계산 중에는 화면 전체를 덮는다 — 결과를 기다릴 수밖에 없는 조작(CLAUDE.md 5장). */
|
|
.b05-routeedit__busy {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-16);
|
|
background: rgb(0 0 0 / 55%);
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|