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>
361 lines
9.1 KiB
CSS
361 lines
9.1 KiB
CSS
/* =============================================================================
|
|
* B06_Section_UI_Style.css
|
|
* 3차 워크플로우(종·횡단 생성) 페이지 전용 스타일.
|
|
*
|
|
* 원칙(frontend.md §1): 하드코딩 색상 금지. theme.css 변수(var(--...))만 참조.
|
|
* 공통 컴포넌트 스타일은 ui_template_elements.ts가 주입하므로 여기서는
|
|
* B06 고유 레이아웃(옵션 그룹/결과 메트릭)만 정의한다.
|
|
* ========================================================================== */
|
|
|
|
/* --- 좌측 입력 폼 --- */
|
|
.b06-profile-layout {
|
|
height: calc(100dvh - var(--app-header-h));
|
|
height: calc(100dvh - var(--app-header-h));
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b06-profile-layout .ui-workflow-layout__body,
|
|
.b06-profile-layout .ui-workflow-layout__main {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.b06-profile-layout .ui-workflow-layout__main {
|
|
overflow: auto;
|
|
}
|
|
|
|
.b06-profile__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
/* 스크롤 영역 상단 여유 — 첫 컨테이너(구조물 배치)가 패널 상단 경계에 붙지 않게
|
|
B05(.b05-route__panel .ui-sidebar-scroll)와 같은 값을 쓴다(2026-08-29 일원화). */
|
|
.b06-profile__form .ui-sidebar-scroll {
|
|
padding-top: var(--spacing-8);
|
|
}
|
|
|
|
/* 사이드 컨테이너 양식은 B05 경로 패널(.b05-route__panel-section)과 같게 맞춘다
|
|
— 두 화면의 좌측 패널이 같은 폼으로 보여야 한다(2026-08-23 사용자 지시).
|
|
여백·글자 크기·색을 B05 값으로 옮겼고, 표준단면 「변수 위치 안내」 모식도만
|
|
기존 스타일(.b06-std__diagram*)을 그대로 둔다. */
|
|
.b06-profile__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
margin: 0;
|
|
padding: calc(var(--spacing-8) + var(--spacing-4));
|
|
/* 테두리는 공통 ui-sidebar-section이 전담 — 로컬 border 선언이 공통 색을 덮던
|
|
문제 제거(2026-08-06 사용자 보고). */
|
|
border-radius: var(--radius-cards);
|
|
background-color: var(--color-surface-raised);
|
|
}
|
|
|
|
.b06-profile__group-legend {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* 라벨·입력·버튼을 **한 줄**로 세운다(횡단 보기 설정, 2026-08-23 사용자 지시).
|
|
ui-field는 기본이 세로(라벨 위·입력 아래·그 아래 오류 슬롯)라 그대로 두면 버튼이
|
|
오류 슬롯 높이만큼 밀려 수평이 안 맞는다 — 이 줄에서만 가로로 눕힘(오류 슬롯 접기 = 공용 양식 `.ui-panel-form`). */
|
|
.b06-profile__field-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-profile__field-row > .ui-field {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
min-width: 0;
|
|
}
|
|
|
|
.b06-profile__field-row .ui-field__label {
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b06-profile__field-row .ui-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 창이 좁아 좌측 패널이 237px 까지 물러난 자리 — 라벨이 안 줄어 2px 이 새어 나왔다.
|
|
그 폭에서만 라벨을 윗줄로 접는다. 넓은 폭 배치는 손대지 않는다(2026-09-08 실측).
|
|
⚠ 폭 제한 없이 `flex-wrap` 을 주면 넓은 폭에서도 라벨이 윗줄로 올라간다 — 재 보고 되돌렸다. */
|
|
@media (max-width: 560px) {
|
|
.b06-profile__field-row > .ui-field {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.b06-profile__field-row > .ui-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* --- 읽기 전용 경로 컨텍스트 --- */
|
|
.b06-profile__info-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
.b06-profile__info-line span {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-profile__info-line strong {
|
|
font-family: var(--font-mono);
|
|
text-align: right;
|
|
}
|
|
|
|
/* --- 액션 버튼 행 --- */
|
|
.b06-profile__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-profile__actions > * {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* --- 표준 횡단면 설정 패널 --- */
|
|
.b06-std {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
.b06-std__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
/* ─── 변수 위치 안내 모식도 (작업 C-5) ───────────────────────────── */
|
|
.b06-std__diagram {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
padding: var(--spacing-8);
|
|
}
|
|
|
|
/* 접이 구역 제목 = 부품 접이 제목 줄(553-2) — 글 꼴만 */
|
|
.b06-std__diagram-summary,
|
|
.b06-std__loader-summary,
|
|
.b06-std__legend {
|
|
margin: 0;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-std__diagram-svg {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-top: var(--spacing-8);
|
|
}
|
|
|
|
/* ─── 다른 프로젝트에서 불러오기 (작업 C-6) ───────────────────────── */
|
|
.b06-std__loader {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
padding: var(--spacing-8);
|
|
}
|
|
|
|
.b06-std__loader-status {
|
|
margin: 0;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.b06-std__loader-preview {
|
|
margin: 0;
|
|
padding: var(--spacing-8);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface-raised);
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
white-space: pre-wrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.b06-diag__ground {
|
|
fill: none;
|
|
stroke: var(--draw-text-muted);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
.b06-diag__road {
|
|
fill: none;
|
|
stroke: var(--draw-text-body);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.b06-diag__center {
|
|
stroke: var(--draw-accent);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
.b06-diag__tick {
|
|
stroke: var(--draw-text-secondary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-diag__ditch {
|
|
fill: color-mix(in srgb, rgb(37 99 235) 20%, transparent);
|
|
stroke: rgb(37 99 235);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-diag__cut {
|
|
stroke: rgb(220 38 38);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.b06-diag__fill {
|
|
stroke: rgb(37 99 235);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.b06-diag__label {
|
|
fill: var(--draw-text-body);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.b06-diag__label-sm {
|
|
fill: var(--draw-text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 구간 그룹(details/summary) — 상단 "변수 위치 안내" 모식도와 동일한 균일 8px 패딩으로
|
|
맞춰 접힘 시 좌측·하단 여백을 줄인다(N-4 후속). */
|
|
.b06-std__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
margin: 0;
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.b06-std__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 구간 구분선 — 「표준횡단면 상세값」 한 컨테이너 안에서 공통 / 암 / 포장을 가른다
|
|
(2026-09-04 사용자 지시: 공통 항목은 지우고 구분선을 쓸 것). */
|
|
.b06-std__divider {
|
|
margin: var(--spacing-4) 0 0;
|
|
padding-top: var(--spacing-8);
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* 공통 칸 라벨 끝 작은 글 — 고치기 전 암 · 포장이 실제로 쓰는 값(364-6 · 보기 전용) */
|
|
.b06-std__label-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
min-width: 0;
|
|
}
|
|
|
|
.b06-std__label-text {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b06-std__group-note {
|
|
flex: none;
|
|
margin-left: auto;
|
|
padding-left: var(--spacing-4);
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
color: var(--color-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b06-std__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 고친 값이 아직 측점에 안 실렸다는 알림 — [전체 측점 반영] 바로 위 · 꼴 = 부품 띠 알림(경고 · 553-2). */
|
|
.b06-std__pending {
|
|
margin: var(--spacing-8) 0 0;
|
|
}
|
|
|
|
/* --- 우측 결과 --- */
|
|
.b06-profile__result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
padding: var(--spacing-24);
|
|
}
|
|
|
|
.b06-profile__result-title {
|
|
font-size: var(--text-subheading);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.b06-profile__empty {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.b06-profile__result-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
max-width: 480px;
|
|
}
|
|
|
|
.b06-profile__metric {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-16);
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.b06-profile__metric-key {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-profile__metric-val {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-body);
|
|
word-break: break-all;
|
|
text-align: right;
|
|
}
|