eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
e371c2754a1c4a63efd1520fc3554e9ace0a2f00
Aislo/B06_Section/B06_Section_UI_Style_Cross_Areas.css
T
eomsangdonandClaude Opus 5 e371c2754a feat(B05,B06): 물넘이 3D 파임 + 독립 기슭막이 횡단·3D + 포장 기본값·표준횡단 반영 
2026-08-28 사용자 지시 4건.

① 물넘이 파임을 3D 코리도에도 반영
   classifyStation 이 노면·노견 조각 표고를 횡단도와 같은 산식(fordDeckElevationAt)
   으로 내린다. 노면 밖 비탈은 그대로라 노견 끝에 수직 단차가 선다. BUILD_VERSION 85.

② 표준횡단면 저장분을 포장 재계산에 싣는다
   확정 때 종단 정본 options 에 실린 standard_cross_section 을 읽어
   enforce_pavement_ranges / attach_default_designs 에 넘긴다. 없으면 config 기본값.

③ 포장 구간 기본값 10 / 5 / 5 (기슭막이와 같은 출발값).

④ 독립 기슭막이
   - 측점: is_station_planting_type() 규칙 신설(A군 + D군 구간형). 구간형은
     시작·기준·종료에 측점을 심는다 — 길이가 길수록 횡단도가 여러 장 나온다.
     구조물 재이관 차단도 같은 규칙을 본다(기타 고스트 방지).
   - 서버: B06_Section_Engine_Revetment 신설 — 구간 안 측점 전부에 section.revetment.
   - 횡단도: B06_Section_UI_Cross_Revetment 신설 — 벽 상단 = 성토면 끝(설계선-지반
     교차점), 아래로 높이 + 근입 0.5m, 전면 1:0.3(교본 7-3). 설치 측은 사용자가
     좌/우로 고른다(레지스트리 side 옵션 신설 — 자동 판정 없음).
   - 3D: 같은 폴리곤을 기준측점 전/후만큼 스윕. BUILD_VERSION 86 + 구조물 해시에
     물넘이·기슭막이 제원 추가.

검증: pytest 241 passed / 7 skipped(신규 4건). 공용 브라우저 실측 —
물넘이 240m 투입 시 3D 노면이 계획고보다 0.38~0.42m 아래(대조군 200m 정상),
기슭막이 225~255 투입 시 측점 23→25·횡단 카드 3장·3D revet 솔리드 3개(31링).
임시 데이터는 원래 정본으로 복구했다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-28 12:54:45 +09:00

355 lines
11 KiB
CSS
Raw Blame History

/* =============================================================================
* B06_Section_UI_Style_Cross_Areas.css
* 횡단 카드의 **면적 오버레이 계열** 스타일 — 절·성토 면적 표, 면적 강조 밴드,
* 설계선·암 경계선·포장층, 암 경계선 제어 버튼.
*
* `_UI_Style_Cross.css`가 700줄을 넘겨, 도면 뼈대(섹션·카드·차트·줌/팬)와
* 그 위에 얹는 면적 표기 계열을 갈랐다. 색은 모두 theme.css 토큰만 쓴다.
* ========================================================================== */
/* 절·성토 면적 오버레이(E-4) — 그래프 **좌측 상단**(축선 바로 안쪽), 배경색으로 그래프
선과 겹쳐도 가독. 절토/성토 × EA·RR·BR·계 표라서 칩을 늘어놓을 때보다 가로 폭을 덜 먹는다.
가운데(left:50%)에 두던 것을 좌측으로만 옮겼다 — 세로 자리는 그대로(2026-08-23 사용자 지시).
58px = CROSS_PAD.left(Y축 눈금 띠 폭) — 표가 플롯 왼쪽 끝에 맞춰 선다. */
.b06-cross-card__areas {
position: absolute;
top: var(--spacing-8);
left: 58px;
transform: none;
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;
}
/* 독립 기슭막이(2026-08-28): 성토면 끝에 서는 벽 — 배관 세트 기슭막이와 같은 색 계열 */
.b06-chart__revetment {
fill: color-mix(in srgb, #9b6bdc 22%, transparent);
stroke: #9b6bdc;
stroke-width: 1.4;
stroke-linejoin: round;
}
/* 물넘이포장(2026-08-28): 파인 노면 — 기존 계획고 점선 + 바닥 실선 + 진한 회색 빗금 포장 */
.b06-chart__ford-deck-plan {
fill: none;
stroke: var(--color-text-secondary);
stroke-width: 1;
stroke-dasharray: 5 4;
}
.b06-chart__ford-deck {
fill: none;
stroke: var(--color-text-primary);
stroke-width: 1.8;
stroke-linejoin: round;
}
.b06-chart__ford-pavement {
stroke: var(--color-text-primary);
stroke-width: 1;
}
.b06-chart__ford-pavement-hatch {
stroke: color-mix(in srgb, var(--color-text-primary) 70%, transparent);
stroke-width: 1.2;
fill: none;
}
/* 배수관 세트(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;
}
.b06-chart__culvert-revet.is-active {
fill: color-mix(in srgb, var(--color-danger) 45%, transparent);
stroke: var(--color-danger);
stroke-width: 2.2;
}
/* 클릭 판정용 투명 겹면 — 관·보호공보다 위에 얹혀 벽 가운데도 눌린다. */
.b06-chart__culvert-revet-hit {
fill: transparent;
stroke: none;
cursor: pointer;
}
.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);
}
/* 유입 보호공 공간 확보 절토선 — 말단에서 표준단면 절토경사로 지반까지 */
.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;
}
/* 유입 집수정 — 성토사면 ≤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;
}
/* 유출부 돌붙임 — 성토사면을 따라 원지반까지 덮는 돌붙임 띠(실무 도면의 돌 연쇄) */
.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;
}
/* 암 경계선 상/하/리셋 제어 (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;
}
/* 세월교 구체(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;
}
/* BOX암거 내공(유로) — 면은 비우고 윤곽만. 물이 지나는 빈 공간이라 채우지 않는다. */
.b06-chart__box-barrel {
fill: none;
stroke: var(--color-text-secondary);
stroke-width: 1;
stroke-dasharray: 4 3;
stroke-linejoin: round;
}
Reference in New Issue View Git Blame Copy Permalink