eomsangdonandClaude Opus 5
bc877b832a
참고 도면의 토량배분도는 블록마다 수평선이 여러 개(A-A' 기선 / B-B' / C-C')이고 그 사이 띠마다 번호가 붙어 종단면 해칭 구간과 1:1로 대응한다. 하단 브래킷의 폭이 각 수평선의 길이와 같다. 즉 수평선 높이는 그 현의 길이가 장비 경계거리와 같아지는 높이이고, 세로축이 곧 토량이므로 두 수평선 사이 띠 두께가 그 장비의 운반토량이다. 블록 하나에 평균운반거리 하나 / 장비 하나이던 모델을 띠(HaulBand) 여럿으로 바꿨다. 경계 탐색이 단조가 아니라는 것을 무작위 검증이 잡았다. 가지치기로 블록을 하나로 묶어도 원래 폴리라인에 잔요철이 남아 높이를 올리는 도중 현이 잠깐 다시 길어진다. 순수 이분법은 엉뚱한 근으로 수렴했다(종무대 경계현 45m). 훑기 64칸 + 이분법 24회 2단계로 바꿔, 현이 상한을 넘는 가장 높은 자리 위를 경계로 잡는다. - 장비 경계 dozer 50 -> 70m (사용자 확정, 정의처는 config 한 곳 유지) - balloon 도형 = 운반수단: 종무대 육각 / 도쟈 원 / 덤프 사각, 사토는 언더바만 - 띠 면 클릭 시 balloon 강조, 다른 띠·빈 곳 클릭 시 해제 - 선타입: 기선 실선 / 경계현 파선 / 평균운반거리 점선 + 방향 화살촉 - 유토곡선 0선을 파선에서 실선으로 (파선은 경계현의 몫) - 암 경계선 오프셋 상한 0 (양수면 경계선이 지표면 위로 떠 토사층이 음수가 된다) - 종단도 구조물 라벨을 플롯 하단으로 옮기고 맨 마지막에 그려 가리지 않게 - 암 경계선 제어를 그래프 하단 행 가운데로 검증: 수동 4종 + 실측 26측점 + 무작위 100건에서 띠 합=Q, 띠 연속성, 경계현<=상한, 안분합, 보존 성립. 렌더 스모크 4개 크기 NaN 0건 + 도형·클릭 강조 확인. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
737 lines
21 KiB
CSS
737 lines
21 KiB
CSS
/* =============================================================================
|
||
* B06_wf3_ProfileCross_UI_Style_Cross.css
|
||
* 종·횡단 도면 뷰(섹션·카드·차트·설계 컨트롤·줌/팬·오버레이) 스타일.
|
||
* 700줄 제한 대응으로 _UI_Style.css에서 분리(패널/폼/모식도는 원본 유지).
|
||
* ========================================================================== */
|
||
|
||
/* --- 종·횡단 도면 --- */
|
||
.b06-profile__main,
|
||
.b06-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-24);
|
||
min-width: 0;
|
||
}
|
||
|
||
.b06-section {
|
||
box-sizing: border-box;
|
||
padding-inline: var(--spacing-24);
|
||
}
|
||
|
||
/* 상단 패널이 sticky라 카드로 스크롤하면 그 아래로 숨는다. 패널 높이를 JS가
|
||
`--b06-cross-scroll-margin`으로 실어 주고, 스크롤 정지 위치를 그만큼 아래로 민다
|
||
(패널을 키우거나 줄이면 이 여백도 따라 바뀐다). */
|
||
.b06-cross-card {
|
||
overflow: hidden;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-cards);
|
||
background: var(--color-surface-raised);
|
||
scroll-margin-top: var(--b06-cross-scroll-margin, 240px);
|
||
}
|
||
|
||
/* 상단 슬라이드 패널(종단면도 + 유토곡선).
|
||
높이는 인라인이 아니라 CSS 변수로만 받는다 — 인라인 height는 접기 규칙을 이겨
|
||
패널이 접히지 않는다(ui_template_resizer.ts 주석). sticky는 그 자체로 위치 지정
|
||
요소라 리사이저 손잡이(absolute)의 기준이 되므로 position: relative가 따로 필요 없다. */
|
||
.b06-section__panel {
|
||
position: sticky;
|
||
z-index: 2;
|
||
top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: var(--b06-profile-height, auto);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-cards);
|
||
background: var(--color-surface-raised);
|
||
/* `overflow: hidden`을 걸지 않는다 — 접기 손잡이가 패널 경계 **밖 아래**에 떠 있어
|
||
잘라내면 통째로 사라진다(B05 하단 패널도 같은 이유로 걸지 않는다). 안쪽 스크롤은
|
||
`.b06-section__panel-body`가 맡는다. */
|
||
}
|
||
|
||
/* 최소 높이는 **펼친 상태에만** 건다. 접힘에도 걸리면(인라인 min-height가 그랬다) 접어도
|
||
그 높이만큼 빈 배경이 남는다. 값은 JS가 `--b06-profile-min-height`로 실어 준다. */
|
||
.b06-section__panel:not(.is-collapsed) {
|
||
min-height: var(--b06-profile-min-height, 360px);
|
||
}
|
||
|
||
/* 접으면 높이를 0으로 접고 알맹이를 숨긴다 — 패널 밖 아래에 뜬 손잡이만 남아 다시 펼 수 있다.
|
||
(B05 하단 패널과 같은 방식: 전역 `ui-collapsible` 규칙에 기대지 않고 여기서 명시한다.) */
|
||
.b06-section__panel.is-collapsed {
|
||
height: 0;
|
||
min-height: 0;
|
||
}
|
||
|
||
.b06-section__panel.is-collapsed > header,
|
||
.b06-section__panel.is-collapsed > .b06-section__panel-body,
|
||
.b06-section__panel.is-collapsed > .ui-resizer {
|
||
display: none;
|
||
}
|
||
|
||
/* 공용 리사이저는 손잡이를 패널 위쪽 경계에 두지만(B05 하단 패널 기준),
|
||
이 패널은 화면 위에 붙어 있으므로 아래쪽 경계로 옮긴다(아래로 끌면 커짐). */
|
||
.b06-section__panel > .ui-resizer--vertical {
|
||
top: auto;
|
||
/* 경계에 그대로 둔다 — 손잡이가 패널 밖으로 나가 z축으로 덮으므로 자리를 비켜 줄 필요가 없다. */
|
||
bottom: 0;
|
||
height: 8px;
|
||
}
|
||
|
||
/* position: relative — 유토곡선 범례가 이 상자를 기준으로 우측 상단에 겹친다. */
|
||
.b06-section__panel-body {
|
||
position: relative;
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
gap: var(--spacing-8);
|
||
min-height: 0;
|
||
padding-bottom: var(--spacing-8);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.b06-section__panel > header,
|
||
.b06-cross-card > header,
|
||
.b06-cross-card > footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--spacing-8);
|
||
padding: var(--spacing-8) var(--spacing-16);
|
||
background: var(--color-surface);
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
/* 상태 문구만 담는 행 — 비어 있을 때가 많아 높이를 최소로 둔다. */
|
||
.b06-section__panel > header {
|
||
justify-content: center;
|
||
padding-block: 2px;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
/* B05 하단 패널 손잡이와 **같은 구조**로, 상하만 뒤집는다: 공용 `--bottom` 손잡이(64×24)를
|
||
패널 경계 **바깥**으로 내보내 리사이저를 z축으로 덮는다. 패널 안 흐름에 두면 리사이저와
|
||
위아래로 나란히 서서, 손잡이를 누르러 가는 길에 리사이저 hover 색이 먼저 켜진다
|
||
(2026-08-02 사용자 지적). 이 때문에 패널에는 `overflow: hidden`을 걸지 않는다. */
|
||
.b06-section__panel-toggle {
|
||
z-index: 3;
|
||
top: auto;
|
||
bottom: calc(-1 * var(--spacing-24));
|
||
border-top: 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
border-radius: 0 0 var(--radius-buttons) var(--radius-buttons);
|
||
}
|
||
|
||
/* 종단면도와 유토곡선이 이 컨테이너 하나를 공유한다 — 가로 스크롤을 함께 써야
|
||
같은 측점이 두 그래프에서 같은 자리에 선다. wrap을 나누면 정렬이 깨진다. */
|
||
.b06-section__chart-wrap {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
min-height: 0;
|
||
overflow-x: auto;
|
||
/* 한 축만 auto로 두면 브라우저가 나머지 축도 auto로 올려 세로 스크롤이 생긴다.
|
||
높이는 `chartHeights()`가 정확히 맞추므로 잘릴 것도 없다. */
|
||
overflow-y: hidden;
|
||
}
|
||
|
||
.b06-section__chart {
|
||
display: block;
|
||
max-width: none;
|
||
}
|
||
|
||
/* 상단 패널의 두 그래프는 세로로 눌리면 안 된다. flex 기본값(shrink: 1)으로 두면 패널을
|
||
줄였을 때 렌더 높이가 height 속성보다 작아지고, SVG는 preserveAspectRatio 기본값이 meet라
|
||
**가로까지 같은 비율로 축소**된다(그래프 폭이 줄어 보이던 원인). */
|
||
.b06-section__chart-wrap > .b06-section__chart {
|
||
flex: none;
|
||
}
|
||
|
||
/* 횡단도 줌·팬 영역(E-5) — 휠 줌/드래그 팬. */
|
||
.b06-cross-card__chart-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
/* 좌클릭은 선택, 팬은 가운데 버튼 드래그다 — 손 모양 커서는 실제로 미는 동안에만 띄운다. */
|
||
.b06-cross-card__chart-wrap .b06-section__chart {
|
||
touch-action: none;
|
||
}
|
||
|
||
.b06-cross-card__chart-wrap .b06-section__chart.is-panning,
|
||
.b06-section__chart-wrap.is-panning {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
/* 확대해도 선 굵기 고정(E-5) — 줌 시 해상도 저하처럼 보이던 문제 해소. */
|
||
.b06-section__chart line,
|
||
.b06-section__chart polyline,
|
||
.b06-section__chart polygon,
|
||
.b06-section__chart rect {
|
||
vector-effect: non-scaling-stroke;
|
||
}
|
||
|
||
.b06-cross-card > .b06-section__chart,
|
||
.b06-cross-card__chart-wrap > .b06-section__chart {
|
||
width: 100%;
|
||
}
|
||
|
||
.b06-section__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
|
||
gap: var(--spacing-16);
|
||
}
|
||
|
||
.b06-cross-card {
|
||
cursor: pointer;
|
||
transition:
|
||
border-color var(--transition-fast),
|
||
box-shadow var(--transition-fast);
|
||
}
|
||
|
||
/* 마우스 hover 회색 강조는 선택 강조(빨강)보다 하위 — 미선택 카드에만 적용해
|
||
:not(...):hover 특정도가 selected 규칙을 넘어 빨강 테두리를 덮지 않게 한다. */
|
||
.b06-cross-card:not(.b06-cross-card--selected):hover {
|
||
border-color: var(--color-text-muted);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.b06-cross-card--selected {
|
||
border-color: var(--color-danger);
|
||
box-shadow: 0 0 0 2px var(--color-danger);
|
||
}
|
||
|
||
/* 제목행 1행 구조(E-2/E-3): 측점 라벨 → 단면유형 pill → 지반유형 → 구조물·kind. */
|
||
.b06-cross-card > header {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
gap: var(--spacing-8);
|
||
border-bottom: 1px solid var(--color-border);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.b06-cross-card__title,
|
||
.b06-cross-card > header > .b06-cross-card__meta {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--spacing-8);
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
/* 지반유형 세그먼트(D-6): 제목행 1행 내 인라인 배치. 좌측 구분선(3번). */
|
||
.b06-design__seg--header {
|
||
flex: 0 0 auto;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.b06-cross-card__ground {
|
||
padding-left: var(--spacing-8);
|
||
border-left: 1px solid var(--color-border);
|
||
}
|
||
|
||
/* 단면유형 pill(E-3) — 구조물 pill과 동일 표기. */
|
||
.b06-cross-card__mode {
|
||
flex: 0 0 auto;
|
||
padding: 1px 6px;
|
||
border-radius: var(--radius-pills);
|
||
background: color-mix(in srgb, var(--color-info, rgb(37 99 235)) 14%, transparent);
|
||
color: var(--color-info, rgb(37 99 235));
|
||
font-size: var(--text-caption);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 단면유형 pill을 지반유형 우측·우측 맞춤으로 밀어 붙인다(1번). meta는 그 뒤에 따라온다. */
|
||
.b06-cross-card__mode--right {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.b06-cross-card > header strong {
|
||
color: var(--color-text);
|
||
font-size: var(--text-body-sm);
|
||
}
|
||
|
||
/* 비정규 측점의 구조물 라벨 — kind(일반측점/BP/EP) 좌측에 자수정색 pill로 표기. */
|
||
.b06-cross-card__structure {
|
||
padding: 1px 6px;
|
||
border-radius: var(--radius-pills);
|
||
background: color-mix(in srgb, var(--color-royal-amethyst, rgb(109 40 217)) 16%, transparent);
|
||
color: var(--color-royal-amethyst, rgb(109 40 217));
|
||
font-size: var(--text-caption);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.b06-cross-card > footer {
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.b06-section__empty {
|
||
display: flex;
|
||
min-height: 180px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--spacing-24);
|
||
border: 1px dashed var(--color-text-muted);
|
||
color: var(--color-text-muted);
|
||
background: var(--color-surface);
|
||
}
|
||
|
||
/* SVG 차트 색상은 테마 토큰만 사용한다. */
|
||
.b06-chart__bg {
|
||
fill: var(--color-surface-raised);
|
||
}
|
||
|
||
.b06-chart__grid {
|
||
stroke: var(--color-border);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
.b06-chart__axis {
|
||
stroke: var(--color-text-secondary);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
.b06-chart__tick,
|
||
.b06-chart__station-label,
|
||
.b06-chart__axis-label {
|
||
fill: var(--color-text-secondary);
|
||
font-family: var(--font-body);
|
||
}
|
||
|
||
.b06-chart__tick,
|
||
.b06-chart__station-label {
|
||
font-size: 10px;
|
||
}
|
||
|
||
/* 구조물(비정규) 측점 이름 — 종단면도 측점선 상단 표기. */
|
||
.b06-chart__structure-label {
|
||
font-size: 9px;
|
||
font-weight: var(--font-weight-medium);
|
||
fill: rgb(180 83 9);
|
||
}
|
||
|
||
.b06-chart__axis-label {
|
||
fill: var(--color-text-body);
|
||
font-size: var(--text-caption);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.b06-chart__profile {
|
||
fill: none;
|
||
stroke: var(--color-chart-0);
|
||
stroke-width: 2.5;
|
||
}
|
||
|
||
.b06-chart__cross-profile {
|
||
fill: none;
|
||
stroke: var(--color-chart-1);
|
||
stroke-width: 2.4;
|
||
}
|
||
|
||
/* 종단 계획선(시공계획고): 지반선과 구분되도록 파선 + 강조색 */
|
||
.b06-chart__design-profile {
|
||
fill: none;
|
||
stroke: var(--color-royal-amethyst);
|
||
stroke-width: 2.2;
|
||
stroke-dasharray: 8 4;
|
||
}
|
||
|
||
/* 절토(계획고가 지반고보다 낮음) / 성토 구간 음영 */
|
||
.b06-chart__band {
|
||
stroke: none;
|
||
}
|
||
|
||
.b06-chart__band--cut {
|
||
fill: rgb(220 38 38 / 14%);
|
||
}
|
||
|
||
.b06-chart__band--fill {
|
||
fill: rgb(37 99 235 / 14%);
|
||
}
|
||
|
||
.b06-chart__balance-boundary {
|
||
stroke: var(--color-royal-amethyst);
|
||
stroke-width: 1.2;
|
||
stroke-dasharray: 3 3;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.b06-chart__station {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 구조물 측점선은 끌어 옮길 수 있다 — 커서로 그 사실을 알린다(2026-08-01 사용자 지시). */
|
||
.b06-chart__station--draggable {
|
||
cursor: ew-resize;
|
||
touch-action: none;
|
||
}
|
||
|
||
.b06-chart__station-line {
|
||
stroke-width: 1.2;
|
||
}
|
||
|
||
.b06-chart__station-hit {
|
||
stroke: transparent;
|
||
stroke-width: 14;
|
||
pointer-events: stroke;
|
||
}
|
||
|
||
.b06-chart__station-line--bp,
|
||
.b06-chart__station-line--regular {
|
||
stroke: var(--color-warning);
|
||
}
|
||
|
||
.b06-chart__station-line--ep {
|
||
stroke: var(--color-accent);
|
||
stroke-dasharray: 4 3;
|
||
}
|
||
|
||
/* 비정규 측점(구조물)은 종단면도에서도 자수정색 파선으로 구분한다(B05 종단 규칙과 정합).
|
||
미선택 시 stroke 미정의로 세로선이 안 그려지던 문제 해소. */
|
||
.b06-chart__station-line--irregular {
|
||
stroke: var(--color-royal-amethyst, rgb(139 92 246));
|
||
stroke-width: 1.4;
|
||
stroke-dasharray: 5 3;
|
||
}
|
||
|
||
.b06-chart__station-line--selected,
|
||
.b06-chart__center-marker {
|
||
stroke: var(--color-danger);
|
||
stroke-width: 2.5;
|
||
}
|
||
|
||
/* 십자선이 계획 노선(계획고) 위치를 가리킬 때: 종단 계획선과 동일 색으로 대응시킨다 */
|
||
.b06-chart__center-marker--design {
|
||
stroke: var(--color-royal-amethyst);
|
||
}
|
||
|
||
.b06-chart__station--selected .b06-chart__station-label {
|
||
fill: var(--color-danger);
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
|
||
/* 측점 표준횡단 설계 지정 컨트롤 (카드 헤더 아래) — 좌측 여유 추가(2번).
|
||
한 행 고정(nowrap): 넘치는 컨트롤은 다음 행으로 밀지 않고 "⋯" 드롭다운으로 이동(N-2-2). */
|
||
.b06-design {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
gap: var(--spacing-8) var(--spacing-16);
|
||
padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-16);
|
||
border-bottom: 1px solid var(--color-border);
|
||
margin-bottom: var(--spacing-8);
|
||
}
|
||
|
||
/* 오버플로 드롭다운(N-2-2): 넘친 컨트롤을 담는 우측 맞춤 "⋯" 메뉴. 세로 배치. */
|
||
.b06-design__more {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.b06-design__more-summary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 22px;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: var(--color-surface);
|
||
color: var(--color-text-secondary);
|
||
font-size: 0.9rem;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
list-style: none;
|
||
}
|
||
|
||
.b06-design__more-summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.b06-design__more[open] .b06-design__more-summary {
|
||
color: var(--color-surface);
|
||
background: var(--color-royal-amethyst);
|
||
border-color: var(--color-royal-amethyst);
|
||
}
|
||
|
||
.b06-design__more-panel {
|
||
position: absolute;
|
||
right: 0;
|
||
top: calc(100% + 4px);
|
||
z-index: 3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-8);
|
||
padding: var(--spacing-8);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: var(--color-surface-raised);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.b06-design__seg {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-8);
|
||
}
|
||
|
||
.b06-design__seg-legend {
|
||
font-size: 0.72rem;
|
||
color: var(--color-text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 선행 조건 미충족 옵션(E-6) — 상시 노출하되 흐리게·클릭 불가. */
|
||
.b06-design__seg--disabled {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.b06-design__seg--disabled .b06-design__btn {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.b06-design__seg-buttons {
|
||
display: inline-flex;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.b06-design__btn {
|
||
padding: 3px 8px;
|
||
font-size: 0.72rem;
|
||
color: var(--color-text-secondary);
|
||
background: var(--color-surface);
|
||
border: none;
|
||
border-left: 1px solid var(--color-border);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.b06-design__btn:first-child {
|
||
border-left: none;
|
||
}
|
||
|
||
.b06-design__btn--active {
|
||
color: var(--color-surface);
|
||
background: var(--color-royal-amethyst);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.b06-design__areas {
|
||
display: inline-flex;
|
||
gap: var(--spacing-8);
|
||
margin-left: auto;
|
||
font-size: 0.72rem;
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
/* 암 경계선 제어(E-7) — 그래프 영역 **하단 행 가운데**(2026-08-02 사용자 지시).
|
||
우측 맞춤이던 것을 가운데로 옮겼다. `left: 50%` + 음수 translate가 폭을 모르고도
|
||
가운데를 잡는 유일한 방법이다(절대 위치라 flex 정렬이 안 먹는다). */
|
||
.b06-cross-card__rockb {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 2px;
|
||
background: color-mix(in srgb, var(--color-surface) 82%, transparent);
|
||
border-radius: var(--radius-inputs);
|
||
padding: 1px 4px;
|
||
}
|
||
|
||
/* 절·성토 면적 오버레이(E-4) — 그래프 중상단, 배경색으로 그래프 선과 겹쳐도 가독.
|
||
절토/성토 × EA·RR·BR·계 표라서 칩을 늘어놓을 때보다 가로 폭을 덜 먹는다. */
|
||
.b06-cross-card__areas {
|
||
position: absolute;
|
||
top: var(--spacing-8);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 2px 6px;
|
||
border-radius: var(--radius-inputs);
|
||
background: color-mix(in srgb, var(--color-surface) 88%, transparent);
|
||
font-size: 0.72rem;
|
||
font-family: var(--font-mono);
|
||
white-space: nowrap;
|
||
border-collapse: collapse;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.b06-cross-card__areas th,
|
||
.b06-cross-card__areas td {
|
||
padding: 0 5px;
|
||
text-align: center;
|
||
font-weight: var(--font-weight-regular);
|
||
}
|
||
|
||
/* 열 제목은 가운데 맞춤 — 값은 우측 정렬이라 자릿수가 흔들려도 머리글은 열 중앙에 선다. */
|
||
.b06-cross-card__areas thead th {
|
||
text-align: center;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* 행 이름(절토/성토)은 왼쪽 정렬 — 숫자 열과 구분된다. */
|
||
.b06-cross-card__areas tbody th {
|
||
text-align: left;
|
||
}
|
||
|
||
/* 면적 표기 색은 **테마 토큰만** 쓴다. 고정 RGB를 박으면 다크 테마에서 글자가 배경에
|
||
묻힌다(발파암에 쓰던 검정이 그랬다). 차트 팔레트는 밝기가 두 테마 모두에 맞춰져 있다. */
|
||
.b06-design__area--cut,
|
||
.b06-design__area--cut_total {
|
||
color: var(--color-danger);
|
||
}
|
||
|
||
/* 절토 내역 — 토사(EA), 리핑암(RR), 발파암(BR)을 색으로 갈라 둔다. */
|
||
.b06-design__area--cut_soil {
|
||
color: var(--color-chart-2);
|
||
}
|
||
|
||
/* RR은 `--color-slate`를 쓰면 안 된다 — 그 토큰이 곧 `--color-text-secondary`라
|
||
라이트 테마에서 회색 글자가 "비활성"으로 읽히고, 28% 밴드는 흰 배경에 묻힌다.
|
||
`--color-warning`도 못 쓴다(암 경계선 점선이 이미 그 색이라 밴드가 제 경계선과 섞인다). */
|
||
.b06-design__area--cut_rr {
|
||
color: var(--color-success);
|
||
}
|
||
|
||
.b06-design__area--cut_br {
|
||
color: var(--color-chart-3);
|
||
}
|
||
|
||
.b06-design__area--fill {
|
||
color: var(--color-chart-0);
|
||
}
|
||
|
||
.b06-design__area--unset {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* 선택된 카드에서만 값 칸이 버튼이 된다 — 부모가 pointer-events: none이라 여기서 되살린다. */
|
||
.b06-cross-card__areas button {
|
||
padding: 0 2px;
|
||
border: none;
|
||
border-radius: var(--radius-inputs);
|
||
background: none;
|
||
color: inherit;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
cursor: pointer;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 켠 칸은 글자색을 유지한 채 같은 색으로 옅게 칠하고 테두리를 둘러 대비를 살린다. */
|
||
.b06-cross-card__areas button.is-active {
|
||
background: color-mix(in srgb, currentcolor 18%, transparent);
|
||
box-shadow: inset 0 0 0 1px currentcolor;
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
/* 면적 강조 밴드 — 평소엔 클릭 대상으로만 남고, 켜질 때만 채워진다. */
|
||
.b06-chart__area > polygon {
|
||
fill: transparent;
|
||
stroke: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 밴드 색은 위 면적표 글자색과 짝을 맞춘다 — 어느 숫자를 켰는지 색으로 바로 읽히게. */
|
||
.b06-chart__area--cut_soil.is-active > polygon {
|
||
fill: color-mix(in srgb, var(--color-chart-2) 28%, transparent);
|
||
stroke: var(--color-chart-2);
|
||
stroke-width: 1.2;
|
||
}
|
||
|
||
/* 암반 밴드는 하나지만 색은 암종을 따라간다 — 표의 RR/BR 글자색과 같아야 짝이 읽힌다. */
|
||
.b06-chart__area--cut_rr.is-active > polygon {
|
||
fill: color-mix(in srgb, var(--color-success) 28%, transparent);
|
||
stroke: var(--color-success);
|
||
stroke-width: 1.2;
|
||
}
|
||
|
||
.b06-chart__area--cut_br.is-active > polygon {
|
||
fill: color-mix(in srgb, var(--color-chart-3) 28%, transparent);
|
||
stroke: var(--color-chart-3);
|
||
stroke-width: 1.2;
|
||
}
|
||
|
||
.b06-chart__area--fill.is-active > polygon {
|
||
fill: color-mix(in srgb, var(--color-chart-0) 28%, transparent);
|
||
stroke: var(--color-chart-0);
|
||
stroke-width: 1.2;
|
||
}
|
||
|
||
/* 횡단 표준단면 설계선 오버레이. 기본은 실선. */
|
||
.b06-chart__design-cross {
|
||
fill: none;
|
||
stroke: var(--color-royal-amethyst);
|
||
stroke-width: 1.8;
|
||
stroke-linejoin: round;
|
||
}
|
||
|
||
/* 지면선과 겹치는 구간만 점선(dash:gap = 1:1)으로 그려 뒤 지표선이 빈 칸으로 비쳐 보이게 한다. */
|
||
.b06-chart__design-cross--overlap {
|
||
stroke-dasharray: 4 4;
|
||
}
|
||
|
||
/* 차도·노견 경계 짧은 수직 틱(N-4-2) — 설계선과 같은 계열, 얇게. */
|
||
.b06-chart__carriageway-tick {
|
||
stroke: var(--color-royal-amethyst);
|
||
stroke-width: 1.2;
|
||
}
|
||
|
||
/* 암 경계선(설계선 복사 + 오프셋): 리핑암·발파암 구간 점선 */
|
||
.b06-chart__rock-boundary {
|
||
fill: none;
|
||
stroke: var(--color-warning);
|
||
stroke-width: 1.6;
|
||
stroke-dasharray: 6 4;
|
||
stroke-linejoin: round;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* 포장층 박스: 노면 양 끝점 기준 두께만큼 하향 채움 */
|
||
.b06-chart__pavement {
|
||
fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
|
||
stroke: var(--color-text-secondary);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
/* 암 경계선 상/하/리셋 제어 (B05 측점 선 제어 ▲/▼/↺ 버튼 패턴 재활용) */
|
||
.b06-design__rockb-btn {
|
||
width: 22px;
|
||
height: 22px;
|
||
padding: 0;
|
||
font-size: 0.7rem;
|
||
line-height: 1;
|
||
color: var(--color-text-secondary);
|
||
background: var(--color-surface);
|
||
border: none;
|
||
border-left: 1px solid var(--color-border);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.b06-design__rockb-btn:first-child {
|
||
border-left: none;
|
||
}
|
||
|
||
.b06-design__rockb-btn:hover {
|
||
color: var(--color-text);
|
||
background: var(--color-surface-raised);
|
||
}
|
||
|
||
.b06-design__rockb-btn.is-reset {
|
||
color: var(--color-warning);
|
||
}
|
||
|
||
.b06-design__rockb-readout {
|
||
padding: 0 var(--spacing-8);
|
||
font-size: 0.72rem;
|
||
font-family: var(--font-mono);
|
||
color: var(--color-warning);
|
||
align-self: center;
|
||
}
|
||
|
||
/* 포장 제안 배지: B05 법정 경사 분석이 포장을 권장한 측점 표시 */
|
||
.b06-design__paved-badge {
|
||
font-size: 0.72rem;
|
||
color: var(--color-warning);
|
||
cursor: help;
|
||
}
|