Aislo/D03_PlanAnalysis/D03_PlanAnalysis_UI_Style.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;
}

/* 586-1 GL 바탕 시험 — 바탕 캔버스 밑 MapLibre · 누름은 위 캔버스가 받음 */
.d03-plan__map .d03-plan__gl {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.d03-plan__map canvas:not(.d03-plan__base) {
  position: relative;
}

/* 571-1 — 왼쪽은 겹 단추줄(폭 = JS `--d03-layers-w`) 오른쪽까지 · 모자라면 도구줄이 가로 밀림 · 오른쪽 붙임 그대로 */
.d03-plan__tools {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-8);
  left: calc(2 * var(--spacing-8) + var(--d03-layers-w, 222px));
  align-items: flex-end;
}

/* 624-4 도구줄 끝 지형 칸 — 지형 칩 · LAS 올리기 · 진행 서클 한 줄 */
.d03-plan__terrain {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* 569-2 · 581-1 바탕 겹 단추 — 왼쪽 위 · 지도 반 넘으면 가로 밀림 · 범례 — 왼쪽 아래(켠 겹마다 한 줄) */
.d03-plan__layers {
  position: absolute;
  top: var(--spacing-8);
  left: var(--spacing-8);
  max-width: calc(55% - 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);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: calc(100% - 2 * var(--spacing-8));
}

.d03-plan__legend[hidden] {
  display: none;
}

.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__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;
}

/* 585-2 고른 구간 속성 판 — 도구줄 아래 오른쪽 · 몸 스크롤 · 구간 줄 = 고스트 단추 */
.d03-plan__props {
  top: calc(var(--spacing-8) * 6);
  right: var(--spacing-8);
  width: 300px;
  max-height: calc(100% - var(--spacing-8) * 8);
}

.d03-plan__props[hidden] {
  display: none;
}

.d03-plan__props .ui-float-panel__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-8);
  overflow: auto;
}

.d03-plan__props-rows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.d03-plan__props-rows > .ui-btn {
  justify-content: flex-start;
}

/* 597 지점 칸 — [추가] 머리 · 펼친 줄(이름 · 경도 · 위도) */
.d03-plan__points-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-8);
}

.d03-plan__point-edit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) calc(var(--spacing-8) * 2);
}

.d03-plan__point-edit > .ui-field {
  margin: 0;
}

/* 599 그리기 칸 — 방식 칸(마디 고름 2 × 2 · 길이 · 기울기 두 열) */
.d03-plan__draw-kind {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.d03-plan__draw-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
  align-items: start;
}

.d03-plan__draw-fields[hidden] {
  display: none;
}

.d03-plan__draw-fields .ui-field {
  margin: 0;
  min-width: 0;
}

.d03-plan__draw-fields .ui-input-unit,
.d03-plan__draw-fields .ui-input {
  width: 100%;
  min-width: 0;
}

/* 597 구역 · 연도 목록 — 구역 줄(이름 칸 · 연도 고름 · 지움) · 구간 줄(측점 글 작게) */
.d03-plan__line-tail {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}

.d03-plan__pieces .ui-list-row__label > .ui-field {
  margin: 0;
}

.d03-plan__piece-row {
  padding-left: calc(var(--spacing-8) * 2);
}

.d03-plan__piece-row .ui-list-row__label {
  font-size: var(--text-caption);
}