Aislo/B08_Quantity/B08_Quantity_UI_Milestone.css

/* B08 거리이정표(244) — 경로 컨테이너 · 단추 줄 · 그림. 색은 테마 변수만(밝음 · 어두움 같이). */

.b08-milestone {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  /* 149 — 페이지 폭 전체(다이어그램 · 표 같은 폭) */
  width: 100%;
}

/* 149 표도 폭 전체 — 열 너비는 비율대로 늘음 */
.b08-milestone > .ui-data-table {
  width: 100%;
}

.b08-milestone > .ui-data-table .ui-data-table__table {
  width: 100%;
}

.b08-milestone__route {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
}

.b08-milestone__route h4 {
  margin: var(--spacing-8) 0 0;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.b08-milestone__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-8) var(--spacing-16);
}

.b08-milestone__head > .ui-field {
  min-width: 160px;
}

.b08-milestone__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.b08-milestone__image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  align-self: flex-start;
  border: 1px solid var(--color-border);
}

/* 244-2 다이어그램 — 상자 · 선 · km 글(테마 변수) · 스크롤 없음(244-8 · 그림 = 틀 안 맞춤) */
/* 153 · 155 · 157 [자동 정렬](끌어 놓은 자리 있을 때만) · [요소 추가] — 다이어그램 왼쪽 아래 · 단추 = 메인 탭 크기 */
.b08-milestone__tools {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
}

.b08-milestone__diagram {
  position: relative;
  /* 149 높이 고정 · 그림은 틀 비율로 넓힌 범위에 맞춤(스크롤 없음 · 244-8) */
  height: clamp(420px, 58vh, 760px);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
}

.b08-milestone__diagram svg {
  display: block;
  font-size: 13px;
}

.b08-milestone__line {
  stroke: var(--color-text-secondary);
  stroke-width: 1.5;
}

.b08-milestone__box rect {
  fill: var(--color-surface);
  stroke: var(--color-text-secondary);
  stroke-width: 1.2;
}

.b08-milestone__box text {
  fill: var(--color-text);
}

/* 153 상자 색 — 공사지(시점 · 중점) = 강조색 · 기준점 = 경고색 · 거래처 = 성공색 · 옅은 채움 + 테두리(테마 변수 · 밝음 · 어두움 같이) */
.b08-milestone__box.is-site rect {
  fill: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
  stroke: var(--color-accent);
  stroke-dasharray: 4 3;
}

.b08-milestone__box.is-start rect,
.b08-milestone__box.is-mid rect {
  fill: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  stroke: var(--color-accent);
}

.b08-milestone__box.is-base rect {
  fill: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
  stroke: var(--color-warning);
}

.b08-milestone__box.is-route rect {
  fill: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
  stroke: var(--color-success);
}

.b08-milestone__box.is-route {
  cursor: pointer;
}

.b08-milestone__box.is-route:hover rect,
.b08-milestone__box.is-route:focus-visible rect {
  stroke: var(--color-accent);
  stroke-width: 2;
}

.b08-milestone__km {
  fill: var(--color-text);
  font-size: 12px;
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* 모달 구간 · 표 줄 — 칸 · [×] 한 줄(244-4) */
.b08-milestone__line-edit {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.b08-milestone__diagram svg.is-panning {
  cursor: grabbing;
}

/* 선 글 바로 고침(244-4 ⑥) — 글 아래 작은 판 */
.b08-milestone__km tspan {
  cursor: pointer;
}

.b08-milestone__leg-edit {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.b08-milestone__leg-edit .ui-input {
  width: 80px;
}

/* 거래처 상자 윗줄 = 항목(244-6) */
.b08-milestone__items {
  fill: var(--color-text-secondary);
  font-size: 12px;
}

/* 상자 작은 글씨 = 주소 · 좌표(244-12) */
.b08-milestone__note {
  fill: var(--color-text-secondary);
  font-size: 10px;
}

/* 경로 지도(244-9) — 카카오 지도 칸 · 표지 이름 · 높이 어디서나 한 값(150) */
.b08-milestone__map {
  width: 100%;
  height: 480px;
  border: 1px solid var(--color-border);
}

.b08-milestone__map-label {
  padding: 2px 6px;
  border: 1px solid #3c3c3c;
  background: #fff;
  color: #141414;
  font-size: 12px;
  white-space: nowrap;
}

/* 등록 · 연결선 모달(244-13) — 더 큰 창 · 2열 칸 */
.ui-modal.b08-milestone__modal {
  width: min(960px, 94vw);
  --modal-max: 90vh;
}

.b08-milestone__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  align-items: end;
}

.b08-milestone__place {
  margin: 6px 0;
  font-weight: 600;
}

/* 연결선 누름 자리 — 투명한 굵은 선(244-13) */
.b08-milestone__line-hit {
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

/* 154 연결 점 ● — 거래처 상자 오른쪽 가운데 · 끌어 기준점 · 공사지에 놓으면 연결 */
.b08-milestone__connect {
  fill: var(--color-success);
  stroke: var(--color-surface);
  stroke-width: 2;
  cursor: crosshair;
  opacity: 0.55;
}

.b08-milestone__box:hover .b08-milestone__connect {
  opacity: 1;
}

.b08-milestone__wire {
  stroke: var(--color-success);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

.b08-milestone__box.is-drop-target rect {
  stroke-width: 3;
  stroke-dasharray: none;
}

/* 157 경로 탭 머리 줄 — 거래처 이름 · 주소(왼) + [그림 변경] · [초기화](오른) · 글자 = 메인 탭 크기 */
.b08-milestone__route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.b08-milestone__route-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8) var(--spacing-16);
  font-size: var(--text-body-sm);
}

.b08-milestone__route-addr {
  color: var(--color-text-secondary);
}