eomsangdonandClaude Opus 5.5
e2b3a87828
- 줌 [+ − ⤢] = 아이콘 단추 22 · 상세 [칸에 넣기] = 단추 22 · [여럿] = 켜기 칩 22 · 사이 금 지움 - 구조물 조정창 십자 · 9키 · 단 수 [－][＋] = 아이콘 단추(선) 22 · ✕ = 고스트 · 옵션 연동 · 경사 = 켜기 칩 24(유입 · 유출 칸 꼴은 그대로) - 카드 머리 단면유형 = 배지(정보) 20 · 구조물 = 배지(강조) 20 - 알림 칩 = 단추(고스트) 20(색만 경고 / 정보) · 측점 목록 날 단추 = 단추(고스트) 20 - 날 details 넷(변수 위치 안내 · 상세값 · 다른 프로젝트 불러오기 · 횡단 조정) = 접이 구역(ui-collapsible) · 가이드 장면 선택자 `details.` 뗌 - 측점 없는 구조물 줄 · 표준 미반영 알림 = 띠 알림(경고) — 날 색 #fff8e6 · #e0b872 · #7a5a12 · #8a6a22 · 폴백 #d98324 지움 - 빈 그림 자리 = 빈 상태 · 선 치수 글 옛 보라 이름 → --color-accent - 흉내 DOM 시험 · 서버 Node 묶음이 끄는 파일이라 부품 함수 대신 클래스 · data-size 계약 + 부품 CSS 직접 실음(묶음 셋 빌드 정상) - 시험 넷 기대 고침 — 108(닫기 클래스) · 179-1(줌 사이 금 규칙 없음) · 196-1(칩 클래스) · 207-1(칩 반경 = 부품) - 그대로 둔 것 — 수량 산출표(b06-detail__qtable · B07 산출서 병합 칸 · 세로선 = 부품 표에 없는 꼴) · 조정창 고르기 · 암 절토 칸(작은 단 없음) · 조정창 · ⋯ · 측점 목록 떠 있는 판 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
343 lines
10 KiB
CSS
343 lines
10 KiB
CSS
/* =============================================================================
|
|
* B06_Section_UI_Style_Cross.css
|
|
* 종·횡단 도면 뷰(섹션·카드·차트·설계 컨트롤·줌/팬·오버레이) 스타일.
|
|
* 700줄 제한 대응으로 _UI_Style.css에서 분리(패널/폼/모식도는 원본 유지).
|
|
* ========================================================================== */
|
|
|
|
/* --- 종·횡단 도면 ---
|
|
횡단 보기 = 위 칸(횡단 카드 · 그 안에서 스크롤) + 가운데 아래쪽 종단도 한 벌
|
|
(종단 보기와 같은 자리 · 같은 높이 키, 계획서 24-0 · 24-2c). */
|
|
.b06-profile__main,
|
|
.b06-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.b06-section {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b06-section__cards {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: var(--spacing-24);
|
|
min-height: 0;
|
|
padding: var(--spacing-16) var(--spacing-24);
|
|
overflow: auto;
|
|
}
|
|
|
|
/* 종단도는 종단 보기에서 3D 위에 떠 있는 판(absolute)이다 — 횡단 보기에서는 카드 칸
|
|
아래 흐름에 선다. 높이 · 접기 규칙은 종단 보기와 같은 것을 그대로 쓴다. */
|
|
.b06-section > .b05-route-profile {
|
|
position: relative;
|
|
flex: none;
|
|
}
|
|
|
|
.b06-cross-card {
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
/* 고정 알림 줄 높이만큼 띄움(138-3) — 고른 카드가 줄 밑에 숨지 않게 */
|
|
scroll-margin-top: calc(var(--b06-notice-h, 0px) + var(--spacing-8));
|
|
/* 카드를 **자체 쌓임 맥락**으로 만든다. 이게 없으면 카드 안 오버레이(줌 버튼·면적 표)의
|
|
z-index가 최상위 축에서 겨루게 되어 이웃 판 위로 삐져나온다(2026-08-02 사용자 지적). */
|
|
isolation: isolate;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 종단면도와 유토곡선이 이 컨테이너 하나를 공유한다 — 가로 스크롤을 함께 써야
|
|
같은 측점이 두 그래프에서 같은 자리에 선다. 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);
|
|
/* 카드 = 내용 높이만큼 — 같은 줄 큰 카드에 맞춰 늘어나 아래 띠 밑이 비던 것(318-3 · 띠 높이 그대로) */
|
|
align-items: start;
|
|
}
|
|
|
|
/* 알림 줄(138-3) — 카드 칸 맨 위 고정 · 알림 없어도 줄 유지 · 오른쪽 끝 열 수 칸.
|
|
위 여백(카드 칸 padding)만큼 끌어올려 그 틈으로 카드가 비치지 않게.
|
|
217-1 — 칩 줄 위 여백 16→8 · 칩 줄 ↔ 첫 카드 28→16(카드 칸 gap 24 에서 8 을 당김) */
|
|
.b06-section__notice-bar {
|
|
position: sticky;
|
|
top: calc(-1 * var(--spacing-16));
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-8);
|
|
margin-block: calc(-1 * var(--spacing-16)) calc(-1 * var(--spacing-8));
|
|
padding-block: var(--spacing-8) 0;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
/* ☰ 들여쓰기(7-2) */
|
|
html.is-bm-route .b06-section__notice-bar {
|
|
padding-left: max(0px, calc(var(--wf-burger-pad, 0px) - var(--spacing-24)));
|
|
}
|
|
|
|
.b06-section__notice-blocks {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 열 수 칸 — 라벨 왼쪽 · 한 줄(150-1) */
|
|
.ui-field.b06-section__columns {
|
|
flex: none;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.b06-section__columns .ui-field__label {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b06-section__columns .ui-input {
|
|
width: 4.5em;
|
|
}
|
|
|
|
.b06-section__columns .ui-field__error {
|
|
display: none;
|
|
}
|
|
|
|
/* 알림 칩 한 줄(196-1) — 짧은 이름 + 수 · 긴 설명 = 호버 · 누른 칩 = 눌림 꼴 */
|
|
.b06-section__notice-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* 칩 = 부품 단추(고스트) 20 — 둥근 사각(207-1 · 알약 아님) · 색만 경고 / 정보(553-2) */
|
|
.b06-section__notice-chip {
|
|
border-color: currentColor;
|
|
color: var(--color-warning);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 소단 검토 — 정보(경고 색 아님 · 2026-09-15 브레인 ③). */
|
|
.b06-section__notice-chip--info,
|
|
.b06-section__notice-list.is-info {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-section__notice-chip[aria-expanded="true"] {
|
|
background: var(--color-surface-raised);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 내용 칸 하나(누른 칩의 측점 목록) — 길면 칸 안에서 스크롤 · 고정 줄이 카드 칸을 다 덮지 않게.
|
|
207-1 — 줄 아래 카드 위에 겹쳐 뜸(흐름 밖) · 열고 닫아도 줄 높이 · 카드 자리 그대로 */
|
|
.b06-section__notice-list {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
max-height: 30vh;
|
|
overflow: auto;
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-lg);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.b06-section__notice-list[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.b06-section__notice-list > button {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 지금 고른 측점(207-1) — 카드 고름 색과 같음 */
|
|
.b06-section__notice-list > button.is-selected {
|
|
outline: 2px solid var(--color-danger);
|
|
outline-offset: -1px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 연동 구조물을 옆 측점에서 고를 때의 주 횡단도(79-6) — 선택 강조보다 한 단 옅게. */
|
|
.b06-cross-card--link-owner:not(.b06-cross-card--selected) {
|
|
border-color: var(--color-danger);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 45%, transparent);
|
|
}
|
|
|
|
/* 구간형 구조물(노면공 등)을 고르면 시작~종료 안 모든 카드(106-1) — 가까운 한 장의 선택 강조보다 옅게. */
|
|
.b06-cross-card--span:not(.b06-cross-card--selected) {
|
|
border-color: var(--color-danger);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 45%, transparent);
|
|
}
|
|
|
|
/* 제목행 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;
|
|
}
|
|
|
|
/* 사면 미교차 경고 — 면적이 계산 반폭에서 잘린 측점(2026-09-03). */
|
|
.b06-cross-card__warning {
|
|
color: var(--color-warning);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 성토사면 경사길이 — 제목행 우측 끝(2026-09-03). meta 의 마지막 칸이라 우측 맞춤이다. */
|
|
.b06-cross-card__fillslope {
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 지반유형 세그먼트(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) = 부품 배지(정보) 20 · 구조물 pill = 배지(강조) 20(553-2). */
|
|
.b06-cross-card__mode {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* 단면유형 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);
|
|
}
|
|
|
|
/* MC 측점 이름(507-3) — 카드 머리 글보다 한 단계 크게 · 경고색 */
|
|
.b06-cross-card > header strong.b06-station--mc {
|
|
color: var(--color-warning);
|
|
font-size: var(--text-body);
|
|
}
|
|
|
|
.b06-cross-card > footer {
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* 빈 띠(토사 측점 · 중심고는 Y축으로 옮김 318-2)도 글 한 줄 높이 그대로 */
|
|
.b06-cross-card > footer:empty::before {
|
|
content: "\200b";
|
|
}
|
|
|
|
/* 꼴 = 부품 빈 상태(553-2) — 페이지는 높이 · 가운데만 */
|
|
.b06-section__empty {
|
|
min-height: 180px;
|
|
justify-content: center;
|
|
}
|