eomsangdonandClaude Opus 5
39d7c2daee
절토부의 토사·암반 구분은 환산계수가 아니라 횡단도 기하로 갈린다. 지표면~암반 경계선이 토사, 그 아래가 암이다. 기존에는 측점당 절토 단면적이 하나뿐이라 리핑암/발파암 측점의 상단 토사층까지 암 환산계수로 곱해졌다(실데이터 기준 다짐환산 +21% 과대). - Engine_Design: `_split_cut_areas()` 신설. `d=0`, `d=t0` 교차점을 브레이크포인트로 넣어 정확 적분(무작위 2,000회 검산 `soil+rock==cut` 최대오차 1.4e-14). `cut_soil_area_m2` / `cut_rock_area_m2` / `cut_rock_kind` 3필드 추가(기존 키 불변). - UI_Cross_Areas(신규): 면적 readout을 4칩으로 확장하고 절토(토사)/절토(암반)/성토 밴드를 그린다. 선택된 카드에서만 붙어 다른 측점을 고르면 자동 해제된다. - UI_MassHaul: `AreaSample`을 2분할로 교체해 부분별 환산계수를 물리고, 측점별 구간 물량 내역(토사/암반/다짐환산/성토)을 남긴다. 구 데이터는 전량 측점 지반유형으로 폴백. - UI_MassHaul_View: 선택 측점의 구간 물량 표기 줄과 곡선 위 강조점 추가. 측점 매칭은 id가 아니라 누가거리로 한다(종단 기준 곡선의 점 id는 파생값이라 형태가 다름). 암반 경계선 오프셋을 바꾸면 분리 면적과 유토곡선 환산량이 함께 움직인다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
163 lines
4.6 KiB
CSS
163 lines
4.6 KiB
CSS
/* =============================================================================
|
|
* B06_wf3_ProfileCross_UI_Style_MassHaul.css
|
|
* 유토곡선(Mass Haul Diagram) 스타일 — 곡선·오버레이 범례·요약줄.
|
|
* 700줄 제한 대응으로 _UI_Style_Cross.css에서 분리(종·횡단 도면 본체는 원본 유지).
|
|
*
|
|
* 곡선이 여러 개라 읽는 규칙을 둘로 나눈다:
|
|
* 색 = 산출 기준 (횡단 = 브랜드 보라 / 종단 = 성공색 초록)
|
|
* 선모양 = 환산 방식 (실선 = 지반유형별 / 파선 = 토사 단일 / 점선 = 환산 없음)
|
|
* 색상은 theme.css 변수만 쓴다. 횡단 기준의 보라는 참고 도면의 자주색에 대응한다.
|
|
* ========================================================================== */
|
|
|
|
.b06-masshaul__frame {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 범례는 그래프 위에 겹친다. `height: 0`이라 세로 흐름을 밀지 않아 곡선 위로 떠 있고,
|
|
가로 스크롤 컨테이너 안에서도 `sticky; left: 0`이라 옆으로 밀어도 왼쪽에 남는다. */
|
|
.b06-masshaul__legend {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-4) var(--spacing-8);
|
|
height: 0;
|
|
padding-inline-start: var(--spacing-8);
|
|
}
|
|
|
|
.b06-masshaul__legend-item {
|
|
display: inline-flex;
|
|
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);
|
|
}
|
|
|
|
.b06-masshaul__curve--soil_only {
|
|
stroke-width: 1.6;
|
|
stroke-dasharray: 7 4;
|
|
}
|
|
|
|
.b06-masshaul__curve--natural {
|
|
stroke-width: 1.6;
|
|
stroke-dasharray: 2 3;
|
|
}
|
|
|
|
/* 곡선과 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__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__station {
|
|
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);
|
|
background: color-mix(in srgb, var(--color-royal-amethyst) 7%, transparent);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
/* 선택 측점이 곡선의 어디인지 찍는 점 — 물량 줄과 시선을 잇는다. */
|
|
.b06-masshaul__focus {
|
|
fill: var(--color-royal-amethyst);
|
|
stroke: var(--color-surface);
|
|
stroke-width: 1.5;
|
|
}
|