Aislo/B06_wf3_ProfileCross/B06_wf3_ProfileCross_UI_Style_MassHaul.css

/* =============================================================================
 * B06_wf3_ProfileCross_UI_Style_MassHaul.css
 * 유토곡선(Mass Haul Diagram) 스타일 — 곡선·오버레이 범례·요약줄.
 * 700줄 제한 대응으로 _UI_Style_Cross.css에서 분리(종·횡단 도면 본체는 원본 유지).
 *
 * 곡선이 여러 개라 읽는 규칙을 둘로 나눈다:
 *   색     = 산출 기준 (횡단 = 브랜드 보라 / 종단 = 성공색 초록)
 *   선모양 = 환산 방식 (실선 = 지반유형별 / 파선 = 토사 단일 / 점선 = 환산 없음)
 * 색상은 theme.css 변수만 쓴다. 횡단 기준의 보라는 참고 도면의 자주색에 대응한다.
 * ========================================================================== */

/* 범례는 유토곡선 **우측 상단에 겹친다**. 단 가로 스크롤 컨테이너 **밖**에서 절대 위치로
   띄운다 — 안에 넣으면 컨테이너 폭 계산에 끼어들어 종단면도와 측점 세로선이 어긋난다.
   세로 위치(top)는 종단면도 높이에 맞춰 렌더러가 인라인으로 넣는다. */
.b06-masshaul__legend {
  position: absolute;
  right: var(--spacing-8);
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-4);
}

.b06-masshaul__legend-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pills);
  background: var(--color-surface-raised);
  color: var(--color-text-body);
  font-size: var(--text-caption);
  line-height: 1.2;
  cursor: pointer;
}

.b06-masshaul__legend-item.is-off {
  color: var(--color-text-muted);
}

/* 스와치는 곡선을 그대로 축소한 것 — 색과 선모양이 그래프와 같아야 범례 구실을 한다. */
.b06-masshaul__legend-swatch {
  width: 18px;
  height: 0;
  border-top: 2px solid var(--color-royal-amethyst);
}

.b06-masshaul__legend-item--longitudinal .b06-masshaul__legend-swatch {
  border-top-color: var(--color-success);
}

.b06-masshaul__legend-item--soil_only .b06-masshaul__legend-swatch {
  border-top-style: dashed;
}

.b06-masshaul__legend-item--natural .b06-masshaul__legend-swatch {
  border-top-style: dotted;
}

.b06-masshaul__legend-item.is-off .b06-masshaul__legend-swatch {
  border-top-color: var(--color-smoke);
}

.b06-masshaul__curve {
  fill: none;
  stroke: var(--color-royal-amethyst);
  stroke-width: 2;
  stroke-linejoin: round;
}

.b06-masshaul__curve--longitudinal {
  stroke: var(--color-success);
}

/* 곡선과 0선 사이 — 절토 우세/성토 우세 구간을 한눈에 가르는 옅은 면.
   여러 곡선에 겹쳐 칠하면 서로 가리므로 렌더러가 맨 앞 곡선 하나에만 붙인다. */
.b06-masshaul__band {
  fill: var(--color-royal-amethyst);
  opacity: 0.12;
  stroke: none;
}

.b06-masshaul__band--longitudinal {
  fill: var(--color-success);
}

/* 0선: 절토 우세와 성토 우세의 경계라 격자보다 진하게. 어떤 노선에서도 반드시 보인다. */
.b06-masshaul__zero {
  stroke: var(--color-text-secondary);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}

.b06-masshaul__zero-tick {
  fill: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* 그래프 이름표 배경 — 이름이 곡선 위에 놓이므로 불투명하게 깐다. */
.b06-masshaul__name-plate {
  fill: var(--color-surface);
  stroke: none;
}

.b06-masshaul__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-16);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.b06-masshaul__chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-8);
}

.b06-masshaul__chip em {
  font-style: normal;
}

.b06-masshaul__chip strong {
  color: var(--color-text-body);
  font-variant-numeric: tabular-nums;
}

/* 요약 수치가 어느 곡선의 것인지 밝히는 꼬리표. */
.b06-masshaul__basis {
  margin-inline-start: auto;
  color: var(--color-text-muted);
}

/* 선택 측점이 곡선의 어디인지 찍는 점 — 말풍선과 시선을 잇는다. */
.b06-masshaul__focus {
  fill: var(--color-royal-amethyst);
  stroke: var(--color-surface);
  stroke-width: 1.5;
}

/* 선택 측점 구간 물량 말풍선. 렌더러가 곡선이 지나지 않는 자리를 골라 놓지만, 배치가
   빡빡한 화면에서도 곡선이 비쳐 보이도록 배경을 완전 불투명으로 두지 않는다. */
.b06-masshaul__callout > rect {
  fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
  stroke: var(--color-royal-amethyst);
  stroke-width: 1;
}

.b06-masshaul__callout-tail {
  fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
  stroke: var(--color-royal-amethyst);
  stroke-width: 1;
}

.b06-masshaul__callout-leader {
  stroke: var(--color-royal-amethyst);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.b06-masshaul__callout-text {
  fill: var(--color-text-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}