eomsangdon
5d7c8aa41d
# Conflicts: # B06_Section/B06_Section_UI_Cross_Areas.ts # B06_Section/B06_Section_UI_Style_Cross_Areas.css
505 lines
15 KiB
CSS
505 lines
15 KiB
CSS
/* =============================================================================
|
|
* B06_Section_UI_Style_Cross_Areas.css
|
|
* 횡단 카드의 **면적 오버레이 계열** 스타일 — 면적 강조 밴드,
|
|
* 설계선·암 경계선·포장층, 암 경계선 제어 버튼.
|
|
*
|
|
* `_UI_Style_Cross.css`가 700줄을 넘겨, 도면 뼈대(섹션·카드·차트·줌/팬)와
|
|
* 그 위에 얹는 면적 표기 계열을 갈랐다. 색은 모두 theme.css 토큰만 쓴다.
|
|
* ========================================================================== */
|
|
|
|
/* 그림 칸 글자 = 칸(컨테이너) 폭 비례(173-3). 카드 좌상 면적표는 걷음 — 값은 상세 모달 표(379-2). */
|
|
.b06-cross-card__chart-wrap {
|
|
--b06-areas-font: clamp(0.6rem, 0.55rem + 0.7cqw, 0.9rem);
|
|
}
|
|
|
|
/* Y축 중심고 상자 색(379-3) — 원지반 = 원지반선 · 계획 = 설계선. */
|
|
.b06-chart__center-tag--ground {
|
|
--b06-tag: var(--color-chart-1);
|
|
}
|
|
|
|
.b06-chart__center-tag--design {
|
|
--b06-tag: var(--color-royal-amethyst);
|
|
}
|
|
|
|
/* 면적 강조 밴드 — 평소엔 클릭 대상으로만 남고, 켜질 때만 채워진다. */
|
|
.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;
|
|
}
|
|
|
|
/* 보라 선 고름(137-2) — 투명 판정 선 · 고르면 굵은 반투명 띠. */
|
|
.b06-chart__design-hit {
|
|
fill: none;
|
|
stroke: transparent;
|
|
stroke-width: 10;
|
|
stroke-linecap: round;
|
|
pointer-events: stroke;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 마우스 올림 = 고른 모양(379-1) · 고름은 누를 때만 */
|
|
.b06-chart__design-hit:hover,
|
|
.b06-chart__design-hit.is-active {
|
|
stroke: color-mix(in srgb, var(--color-royal-amethyst) 45%, transparent);
|
|
stroke-width: 7;
|
|
}
|
|
|
|
/* 중심점 고름(356-3) — 십자 자리 투명 원 · 고르면 보라 테두리 · 끌면 좌우. 십자는 누름을 원으로 넘김. */
|
|
.b06-chart__center {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b06-chart__center-hit {
|
|
fill: transparent;
|
|
stroke: transparent;
|
|
stroke-width: 2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b06-chart__center-hit.is-active {
|
|
fill: color-mix(in srgb, var(--color-royal-amethyst) 18%, transparent);
|
|
stroke: var(--color-royal-amethyst);
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
/* 교차점 손잡이(370-2) — 사면 ∩ 원지반 작은 원 · 늘 보임 · 고르면 채움 · 올리면 같은 모양(379-1). */
|
|
.b06-chart__toe-hit {
|
|
fill: var(--color-surface);
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.b06-chart__toe-hit:hover,
|
|
.b06-chart__toe-hit.is-active {
|
|
fill: var(--color-royal-amethyst);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 암 경계선 고름(370-3) — 점선 위 투명 판정 선 · 고르면 경고색 띠 · 세로 끌기. */
|
|
.b06-chart__design-hit.b06-chart__rock-hit:hover,
|
|
.b06-chart__design-hit.b06-chart__rock-hit.is-active {
|
|
stroke: color-mix(in srgb, var(--color-warning) 40%, transparent);
|
|
}
|
|
|
|
.b06-chart__design-hit.b06-chart__rock-hit.is-active {
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
/* 차도·노견 경계 짧은 수직 틱(N-4-2) — 설계선과 같은 계열, 얇게. */
|
|
.b06-chart__carriageway-tick {
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
/* 노견 바깥 끝 틱(2026-09-12) — 차도 틱보다 짧고 옅다. 차도 틱과 이 틱 사이가 노견이라,
|
|
노면이 넓어졌을 때 차도가 늘었는지 노견이 늘었는지 눈으로 바로 갈린다. */
|
|
.b06-chart__shoulder-tick {
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* 노폭 라벨(2026-09-06) — 차도 위 가운데. 확폭이 걸린 측점을 눈으로 가려내는 표기다. */
|
|
.b06-chart__carriageway-label {
|
|
fill: var(--color-royal-amethyst);
|
|
font-size: 11px;
|
|
text-anchor: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 암 경계선(설계선 복사 + 오프셋): 리핑암·발파암 구간 점선 */
|
|
.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;
|
|
}
|
|
|
|
/* 고른 노면공의 포장층(152-5) — 범위 카드마다 · 무늬 채움은 inline 이라 무늬 없는 층만 채움이 바뀌고 테두리로 강조 */
|
|
.b06-chart__pavement.is-active {
|
|
fill: color-mix(in srgb, var(--color-danger) 30%, transparent);
|
|
stroke: var(--color-danger);
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
/* 노면공 포장사양 무늬(88): 포장 박스 채움 = 바탕 + 무늬 — 콘크리트 빗금 · 아스콘 점 · 쇄석 돌 */
|
|
.b06-chart__pave-bg {
|
|
fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
|
|
}
|
|
|
|
.b06-chart__pave-mark {
|
|
fill: none;
|
|
stroke: color-mix(in srgb, var(--color-text-body) 70%, transparent);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-chart__pave-mark--dot {
|
|
fill: color-mix(in srgb, var(--color-text-body) 70%, transparent);
|
|
stroke: none;
|
|
}
|
|
|
|
/* 독립 기슭막이(2026-08-28): 성토면 끝에 서는 벽 — 배관 세트 기슭막이와 같은 색 계열 */
|
|
.b06-chart__revetment {
|
|
fill: color-mix(in srgb, #9b6bdc 22%, transparent);
|
|
stroke: #9b6bdc;
|
|
stroke-width: 1.4;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.b06-chart__revetment.is-selectable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b06-chart__revetment.is-active {
|
|
fill: color-mix(in srgb, #9b6bdc 42%, transparent);
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
/* 물넘이포장(287-2 · 287-4): 노면공 포장층(노견까지) + 월류 높이 점선 */
|
|
.b06-chart__ford-deck-plan {
|
|
fill: none;
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 5 4;
|
|
}
|
|
|
|
.b06-chart__ford-pavement {
|
|
stroke: var(--color-text-body);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/* 맹암거(288-1): 노면 아래 돌 무늬 형상 · 그림 전용 — 누름은 판정면(306-2) */
|
|
.b06-chart__underdrain {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 엇갈려 겹친 돌(306-1) — 맹암거 색 · 밝음 · 어두움 모두 읽힘 */
|
|
.b06-chart__underdrain .b06-chart__culvert-stone {
|
|
stroke: #3aa0a8;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
/* 맹암거 테두리 판정(306-2) — 면 판정 맨 위 · 안쪽 판정면은 맨 아래 */
|
|
.b06-chart__shape-hit.b06-chart__shape-hit--edge {
|
|
fill: none;
|
|
stroke: transparent;
|
|
stroke-width: 8;
|
|
pointer-events: stroke;
|
|
}
|
|
|
|
.b06-chart__underdrain-body {
|
|
fill: color-mix(in srgb, #3aa0a8 16%, transparent);
|
|
stroke: #3aa0a8;
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-chart__underdrain-body.is-active {
|
|
fill: color-mix(in srgb, #3aa0a8 34%, transparent);
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
/* 배수관 세트(2026-08-19): 배관·기슭막이·돌붙임 — 분리 도형 3종 + 집수정 라벨 */
|
|
/* 관은 실무 도면처럼 점선 윤곽 2줄 느낌 — 채움은 식별용으로만 아주 옅게. */
|
|
.b06-chart__culvert-pipe {
|
|
fill: color-mix(in srgb, #4f8ef7 10%, transparent); /* B05 배수관 레지스트리 색 계열 */
|
|
stroke: #4f8ef7;
|
|
stroke-width: 1.4;
|
|
stroke-dasharray: 6 3;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 관 외경선 — 관벽 두께만큼 바깥. 채움 없이 윤곽만(내경선과 두 줄로 보인다). */
|
|
.b06-chart__culvert-pipe--outer {
|
|
fill: none;
|
|
stroke-dasharray: none;
|
|
stroke-width: 1.1;
|
|
}
|
|
|
|
.b06-chart__culvert-revet {
|
|
fill: color-mix(in srgb, #8a7a5c 35%, transparent); /* 돌쌓기 석재 계열 */
|
|
stroke: #6f6248;
|
|
stroke-width: 1.2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 기슭막이 선택(2026-08-21) — 구조물 선택이 절·성토 면적 강조보다 우선한다.
|
|
강조 색은 면적 밴드와 같은 규칙으로 토큰만 쓴다. */
|
|
.b06-chart__culvert-revet.is-selectable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 연동 형상(옆 측점에서 넘어온 벽 · 79-6) — 주 형상과 갈라 보이게 옅은 청회색 · 점선 테두리. */
|
|
.b06-chart__culvert-revet.is-linked {
|
|
fill: color-mix(in srgb, #6f8696 30%, transparent);
|
|
stroke: #6f8696;
|
|
stroke-dasharray: 4 2;
|
|
}
|
|
|
|
/* 월류 폭으로 옆 측점에 걸친 물넘이포장(294-6) — 연동 형상과 같은 꼴 · 고름 강조(is-active)가 먼저. */
|
|
.b06-chart__ford-pavement.is-linked:not(.is-active) {
|
|
fill: color-mix(in srgb, #6f8696 30%, transparent);
|
|
stroke: #6f8696;
|
|
stroke-dasharray: 4 2;
|
|
}
|
|
|
|
.b06-chart__ford-deck-plan.is-linked {
|
|
stroke: #6f8696;
|
|
}
|
|
|
|
.b06-chart__culvert-revet.is-active {
|
|
fill: color-mix(in srgb, var(--color-danger) 45%, transparent);
|
|
stroke: var(--color-danger);
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
/* 흙막이 · 옹벽 덮개(66-5) — 벽 안으로 지나가는 다른 선을 바탕색으로 가림. */
|
|
.b06-chart__wall-cover {
|
|
fill: var(--color-surface-raised);
|
|
stroke: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 클릭 판정용 투명 겹면 — 관·보호공보다 위에 얹혀 벽 가운데도 눌린다. */
|
|
.b06-chart__culvert-revet-hit {
|
|
fill: transparent;
|
|
stroke: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 물넘이포장 · 맹암거 형상 고름 판정면(287-5 · 288-2) — 보라 손잡이 아래 */
|
|
.b06-chart__shape-hit {
|
|
fill: transparent;
|
|
stroke: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* BOX암거 끝 선택 강조 — 고른 절반을 옅게 칠하고 테두리를 두른다
|
|
(2026-08-30 사용자: 선택해도 하이라이트가 없었다). 색은 기슭막이·집수정 강조와
|
|
같은 계열이되, 면이 넓어 채도를 낮춘다. */
|
|
.b06-chart__box-hit.is-active {
|
|
fill: color-mix(in srgb, var(--color-danger) 16%, transparent);
|
|
stroke: var(--color-danger);
|
|
stroke-width: 1.6;
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
.b06-chart__culvert-apron {
|
|
fill: color-mix(in srgb, var(--color-text-secondary) 22%, transparent);
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2; /* 지반 아래 매설부 — 점선으로 구분 */
|
|
}
|
|
|
|
.b06-chart__culvert-label {
|
|
font-size: 9px;
|
|
font-weight: var(--font-weight-medium);
|
|
fill: var(--color-text-secondary);
|
|
}
|
|
|
|
/* 관 정보 글(관매설 · 세월교 · 267-1) — 노폭 라벨(`.b06-chart__carriageway-label`)과 같은 글 크기 */
|
|
.b06-chart__culvert-label.b06-chart__pipe-info {
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* 유입 보호공 공간 확보 절토선 — 말단에서 표준단면 절토경사로 지반까지 */
|
|
.b06-chart__culvert-cut {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.4;
|
|
stroke-dasharray: 5 3;
|
|
}
|
|
|
|
/* 기슭막이 돌 해칭 — 기운 띠 안에 한 줄로 쌓인 큰 돌(실무 도면 형상) */
|
|
.b06-chart__culvert-stone {
|
|
fill: none;
|
|
stroke: #6f6248;
|
|
stroke-width: 1;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* 옹벽 물빼기 파이프 단면(73-2) — 두 줄 평행선 · 밝음 · 어두움 토큰을 따름. */
|
|
.b06-chart__wall-drain line {
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
/* 유입 집수정 — 성토사면 ≤3m(절토 포함) 자동 또는 사용자 선택 단면 */
|
|
.b06-chart__culvert-basin {
|
|
fill: color-mix(in srgb, #8a7a5c 32%, transparent);
|
|
stroke: #6f6248;
|
|
stroke-width: 1.2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 집수정 선택 강조(2026-08-22 사용자) — 기슭막이와 같은 규칙. */
|
|
.b06-chart__culvert-basin.is-active {
|
|
fill: color-mix(in srgb, var(--color-danger) 45%, transparent);
|
|
stroke: var(--color-danger);
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
/* 유출부 도수로 · 돌붙임 띠(90-2) — 성토사면 안쪽으로 두께만큼 · 안에 돌(`appendChuteBand`) */
|
|
.b06-chart__culvert-pitching {
|
|
fill: color-mix(in srgb, #3fa34d 18%, transparent);
|
|
stroke: #3fa34d;
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 4 2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 도수로 · 돌붙임 띠 고름(152-4) — 관 고름과 같은 강조 · 판정면은 굵은 투명 테두리로 여유 */
|
|
.b06-chart__culvert-pitching.is-active {
|
|
fill: color-mix(in srgb, var(--color-danger) 30%, transparent);
|
|
stroke: var(--color-danger);
|
|
stroke-width: 2.2;
|
|
stroke-dasharray: none;
|
|
}
|
|
.b06-chart__culvert-revet-hit.b06-chart__chute-hit {
|
|
stroke: transparent;
|
|
stroke-width: 8;
|
|
}
|
|
|
|
/* 암 경계선 상/하/리셋 제어 (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: var(--b06-areas-font);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-warning);
|
|
align-self: center;
|
|
}
|
|
|
|
/* 세월교 구체(2026-08-25) — 바닥판은 콘크리트. 측벽은 ㄴ형 집수정 형상을 그대로
|
|
쓰므로 `.b06-chart__culvert-basin` 색을 공유한다. */
|
|
.b06-chart__ford-slab {
|
|
fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1.2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 세월교 본체(바닥판 · 관) 선택 강조(66-1) — 측벽 강조와 같은 색. */
|
|
.b06-chart__ford-slab.is-active,
|
|
.b06-chart__culvert-pipe.is-active {
|
|
fill: color-mix(in srgb, var(--color-danger) 30%, transparent);
|
|
stroke: var(--color-danger);
|
|
stroke-width: 2.2;
|
|
}
|
|
|
|
/* BOX암거 내공(유로) — 면은 비우고 윤곽만. 물이 지나는 빈 공간이라 채우지 않는다. */
|
|
.b06-chart__box-barrel {
|
|
fill: none;
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 4 3;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 터파기 선(2026-09-09 사용자 확정 ④) — **파선**으로 그린다. 구조물 실체가 아니라
|
|
「여기를 판다」는 표시이고, 근거의 급(법정 표 / 실무 관행)은 말풍선에 적힌다. */
|
|
.b06-chart__excavation {
|
|
fill: none;
|
|
stroke: #8a5c3c;
|
|
stroke-dasharray: 4 3;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/* 「측점 없는 관 N개」 알림 — 조용히 빠지던 것을 드러내는 줄(계획서 3-14 ㉯). */
|
|
.b06-missing-stations {
|
|
align-items: center;
|
|
background: #fff8e6;
|
|
border: 1px solid #e0b872;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 12px;
|
|
margin: 0 0 12px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.b06-missing-stations__text {
|
|
color: #7a5a12;
|
|
flex: 1 1 320px;
|
|
margin: 0;
|
|
}
|
|
|
|
.b06-missing-stations__reason {
|
|
color: #8a6a22;
|
|
flex: 1 1 100%;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|