eomsangdonandClaude Opus 5
7bf2cff68e
- 종단면도 X축 제목을 그래프 상단으로 올린다. 아래쪽은 측점 라벨 몫으로 비워, 바로 밑에 붙는 유토곡선과 X축을 공유하는 것처럼 읽히게 한다(B05 종단 패널도 같은 렌더러). - 유토곡선 범례를 그래프 위 오버레이에서 패널 본문 하단으로 내린다. 개수가 늘어도 높이 배분이 흔들리지 않게 한 줄 고정 + 가로 스크롤. 유토곡선 X축 제목은 삭제(중복). - 측점 세로선 어긋남 해소: 유토곡선 SVG만 감싸던 `.b06-masshaul__frame`이 스크롤 컨테이너 폭 계산에 끼어들어 두 SVG의 렌더 폭이 달랐다. SVG는 preserveAspectRatio 기본값이 meet라 렌더 폭 차이가 그대로 X 매핑 차이가 된다. 상자를 없애 같은 부모의 형제로 맞췄다. - 선택 횡단도가 sticky 패널에 가리지 않게 패널 실측 높이를 `--b06-cross-scroll-margin`으로 넘겨 `scroll-margin-top`에 물리고, 스크롤을 center → nearest로 바꿨다. 패널 리사이즈가 끝나면 선택 카드를 새 높이 기준으로 다시 끌어올린다. - 패널 위 휠은 페이지 대신 그래프를 좌우로 민다. 더 밀 곳이 없으면 기본 동작을 넘긴다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
157 lines
4.6 KiB
CSS
157 lines
4.6 KiB
CSS
/* =============================================================================
|
|
* B06_wf3_ProfileCross_UI_Style_MassHaul.css
|
|
* 유토곡선(Mass Haul Diagram) 스타일 — 곡선·오버레이 범례·요약줄.
|
|
* 700줄 제한 대응으로 _UI_Style_Cross.css에서 분리(종·횡단 도면 본체는 원본 유지).
|
|
*
|
|
* 곡선이 여러 개라 읽는 규칙을 둘로 나눈다:
|
|
* 색 = 산출 기준 (횡단 = 브랜드 보라 / 종단 = 성공색 초록)
|
|
* 선모양 = 환산 방식 (실선 = 지반유형별 / 파선 = 토사 단일 / 점선 = 환산 없음)
|
|
* 색상은 theme.css 변수만 쓴다. 횡단 기준의 보라는 참고 도면의 자주색에 대응한다.
|
|
* ========================================================================== */
|
|
|
|
/* 범례는 그래프 **아래**, 가로 스크롤 컨테이너 밖에 놓인다(곡선 폭 계산에 끼어들면 종단면도와
|
|
측점 세로선이 어긋난다). 개수가 늘어도 패널 높이 배분이 흔들리지 않도록 한 줄로 고정하고,
|
|
넘치면 줄바꿈 대신 이 줄만 가로로 민다. */
|
|
.b06-masshaul__legend {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-4) var(--spacing-16);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|