eomsangdonandClaude Opus 5
475ad7875e
- 문구 못박음 셋: ① 옹벽 높이 칸 밑 「기본값 · 소광리 도면 H=2.0 · 바꿀 수 있음」(등록부 default_basis 를 모든 칸 밑 회색 한 줄로) · ② 일반관리비 「임도가 어느 쪽인지 규정이 없어 (주)공사 기본 · 칸에서 바꿀 수 있음」 · ③ 모르타르 배합 「산림품셈에 배합 절이 없어 건설품셈 [건축] 9-1-1 을 씀(교차 참조)」 - B08: 막자갈 비고 「칸을 새로 두는 것은 B05 등록부 몫」 · 일위대가 머리 5단 한도 · 야면석 계수 칸 밑 「돌 종류는 그대로」 · 식 저장 전 상태 줄 「제원을 바꿔도 따라감」 · 양식 장 머리 「반올림은 m당 값에 걸고 수량 = m당 × 연장」 - 산출 조건 제근 굴착기 크기 칸(임목축적 등급 밑 · 「안 정함」 · 회색 제안 0.7㎥ + 근거 + [제안값 넣기] 누른 때만) — 936be972 소림 + 0.7 → 뿌리뽑기 55원/㎡ × 17,873.80㎡ = 983,057원(되돌림) - 라이브러리 이름표: [내 라이브러리에 저장]·[발행] 창이 장 이름(종류 + 제원 요약)을 채워 묻고 고친 이름으로 저장 · 취소면 안 씀 · 비우면 양식 이름 - B05 계곡 통과 시설 폼 머리 「[저장]은 이 폼에 있는 칸만 바꿈 — 폼에 없는 칸은 그대로 둠」 · B09 폐기물처리비 자리 칸 밑 「법정경비 밑수에는 안 넣음」 · 내역서 「금액을 못 세운 줄」 첫 줄 「사유는 아래 단계가 낸 것을 그대로 옮김」 - 남은 하나(표 형태 66표 까닭 form_basis 화면)는 자원 축 파일을 거쳐야 해 브레인 물음 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016VBGFXB9AbJBwXP19z75Qq
440 lines
13 KiB
CSS
440 lines
13 KiB
CSS
/* =============================================================================
|
||
* B05 구조물 서클마크·벌룬 오버레이 스타일.
|
||
*
|
||
* 종단 그래프(.b05-profile__chart) 위에 얹는 레이어다. 그래프 자체의 조작(측점선 끌기,
|
||
* 우클릭 메뉴)을 막지 않도록 레이어는 이벤트를 통과시키고, 마크·벌룬만 이벤트를 받는다.
|
||
* ========================================================================== */
|
||
|
||
/* 구조물 알약 레인 — 그래프 바로 아래 한 줄(2026-08-17 사용자 지시 1·3·6).
|
||
높이는 2행분 고정이고, 겹치지 않으면 알약이 세로 가운데에 놓인다. */
|
||
.b05-structure__lane {
|
||
position: relative;
|
||
overflow: visible;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* 레인 왼쪽 Y축 띠 — 그래프 sticky Y축과 같은 폭·같은 배경으로 이어 붙여, 가로
|
||
스크롤된 알약이 축 값 영역으로 새 나가지 않게 덮는다(2026-08-17 사용자 지시 2). */
|
||
.b05-structure__axis {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 5;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.b05-structure__axis-inner {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 6px;
|
||
overflow: hidden;
|
||
background: var(--color-surface-raised);
|
||
border-right: 1px solid var(--color-text-secondary);
|
||
color: var(--color-text-secondary);
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 알약 — 종류를 3자 이하 이름으로 보여 준다. 2026-09-06 사용자 지시로 한 단 낮췄다
|
||
(높이 24 → 18, 글자 11 → 10) — 그래프가 그만큼 세로를 더 쓴다. */
|
||
.b05-structure__mark {
|
||
position: absolute;
|
||
transform: translateX(-50%);
|
||
height: 18px;
|
||
min-width: 18px;
|
||
padding: 0 7px;
|
||
border-radius: 9px;
|
||
border: 1.5px solid currentColor;
|
||
background: var(--color-surface, #fff);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
cursor: grab;
|
||
pointer-events: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 혼자 있는 알약 — 겹치는 알약보다 조금만 키운다(옛 31px 는 과했다, 2026-09-06). */
|
||
.b05-structure__mark.is-solo {
|
||
height: 22px;
|
||
min-width: 22px;
|
||
padding: 0 9px;
|
||
border-radius: 11px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.b05-structure__mark:hover {
|
||
filter: brightness(0.92);
|
||
}
|
||
|
||
.b05-structure__mark.is-selected {
|
||
border-width: 3px;
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
|
||
}
|
||
|
||
.b05-structure__mark:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
/* 구간 띠 — 고른 동안에만 시~종점을 펼쳐 보여 준다. */
|
||
/* 구간형 시설이 놓인 자리 — 늘 보인다(2026-09-07). 고르지 않은 것은 옅은 실선으로 깔려
|
||
있고, 고른 것만 두껍고 진해진다. 길게 이어지는 시설(측구·맹암거)이 많아도 알약을 가리지
|
||
않도록 얇게 둔다. */
|
||
.b05-structure__band {
|
||
position: absolute;
|
||
height: 3px;
|
||
border-radius: 1.5px;
|
||
opacity: 0.45;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.b05-structure__band.is-selected {
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
/* 값 벌룬 — 유토곡선 벌룬과 같은 결(테두리 도형 + 여러 줄 텍스트). */
|
||
/* 벌룬은 알약 위로 뜬다(2026-08-18) — 아래는 도면 테이블에 가린다. 전개 방향:
|
||
1행 알약 = 좌측 위(is-left), 2행 = 우측 위(is-right), 솔로 = 위 중앙(is-center). */
|
||
.b05-structure__balloon {
|
||
position: absolute;
|
||
z-index: 6;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
padding: 4px 8px;
|
||
border: 1.5px solid currentColor;
|
||
border-radius: 6px;
|
||
background: var(--color-surface, #fff);
|
||
box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
|
||
font-size: 11px;
|
||
line-height: 1.35;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
z-index: 4;
|
||
}
|
||
|
||
.b05-structure__balloon.is-left {
|
||
/* 오른쪽 끝을 알약 기준점에 붙이고 왼쪽 위로 편다(+10px는 알약과 살짝 겹침 방지). */
|
||
transform: translateX(calc(-100% + 10px));
|
||
}
|
||
|
||
.b05-structure__balloon.is-right {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
.b05-structure__balloon strong {
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.b05-structure__balloon-memo {
|
||
opacity: 0.7;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ── 계곡 통과 시설 부속 옵션 서브폼 (구조물 배치 폼 안, 2026-08-17 UI 개편) ──
|
||
* 배관·BOX암거·세월교·독립 기슭막이의 부속 옵션을 2열 격자로 담는다. */
|
||
.b05-drainage__facility {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 2열 기본 격자 — 칸이 셋이면 세 번째가 다음 줄로 흐른다. */
|
||
.b05-structure__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 6px;
|
||
}
|
||
|
||
.b05-structure__grid > .b05-route__field {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 유입구·유출구·날개벽 소그룹 상자. */
|
||
.b05-structure__group {
|
||
margin: 0;
|
||
padding: 6px 8px 8px;
|
||
border: 1px solid var(--border-color, #3a3f4a);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.b05-structure__group > legend {
|
||
padding: 0 4px;
|
||
font-size: 11px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.b05-structure__group-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 구조물 배치 폼 본문 — 기본 2열(측점 행 등 전폭 항목은 아래에서 되돌린다). */
|
||
.b05-route__panel-section .b05-route__panel-body > .b05-route__field {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 측점 미입력 상태의 상세 옵션 잠금 — 입력 순서 가이드(2026-08-18 사용자 지시).
|
||
조작 차단은 disabled·inert가 맡고 여기서는 흐림만 그린다. */
|
||
.b05-structure__grid.is-locked,
|
||
.b05-drainage__facility.is-locked {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* 측점 그룹과 그 아래 옵션 나열을 가르는 선(2026-08-17 사용자 지시 2). */
|
||
.b05-structure__divider {
|
||
width: 100%;
|
||
height: 0;
|
||
margin: 2px 0;
|
||
border: 0;
|
||
border-top: 1px solid var(--color-border, #3a3f4a);
|
||
}
|
||
|
||
/* 「제원·수량은 다른 화면이 냅니다」 안내 — 경고가 아니라 안내라 색은 흐리게,
|
||
* 왼쪽 선 하나로만 구분한다(2026-09-07). */
|
||
.b05-structure__owner-note {
|
||
margin: 0;
|
||
padding: 4px 0 4px 8px;
|
||
border-left: 2px solid var(--color-border, #3a3f4a);
|
||
color: var(--color-text-muted, #9aa1ad);
|
||
font-size: var(--text-caption, 12px);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 칸 밑 근거 한 줄 — 등록부 `default_basis`(10-A). 회색 작은 글씨. */
|
||
.b05-structure__basis {
|
||
color: var(--color-text-muted, #9aa1ad);
|
||
font-size: var(--text-caption, 12px);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* 근거 줄로 옆 칸이 길어져도 [제안값 넣기]가 세로로 늘지 않게. */
|
||
.b05-structure__suggest {
|
||
align-self: start;
|
||
}
|
||
|
||
/* 시작·기준·종료 측점 = 3행. 한 행은 [라벨][측점][+거리] 가로 배치
|
||
* (2026-08-17 사용자 지시 2). */
|
||
.b05-structure__position-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.b05-structure__position-row > .b05-route__field {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.b05-structure__position-row > .b05-route__field > span {
|
||
flex: 0 0 72px;
|
||
}
|
||
|
||
.b05-structure__position-row .b05-structure__station-pair {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 측점 입력이 형식에 안 맞을 때(예: "3+18.0"도 숫자도 아님) 칸을 붉힌다. */
|
||
.b05-route__field input.is-invalid {
|
||
border-color: #e05b5b;
|
||
background: rgba(224, 91, 91, 0.08);
|
||
}
|
||
|
||
/* 측점 범위(계산 표시) — C군 등 길이 옵션 기반 구간 타입. 입력 칸이 아니라 기준
|
||
* 측점 + 길이로 계산된 "시작 ~ 종료"를 보여만 준다(2026-08-19 사용자 지시).
|
||
* 글자 크기는 기준 측점 입력 칸과 동일(크롬 input 기본 13.333px — 패널 입력에
|
||
* 별도 font-size가 없어 이 값으로 그려진다), 굵기만 유지(2026-08-19 지시 7). */
|
||
.b05-structure__position-row > .b05-route__field > .b05-structure__range-value {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 13.3333px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 측점번호 + 잔여거리 두 칸 입력(2026-08-17 통합 — 구 비정규 측점 UI와 같은 방식). */
|
||
.b05-structure__station-pair {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.b05-structure__station-pair input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 숫자 칸 + [－][＋] 묶음(2026-08-29 사용자 지시 2) — 유입구·유출구 폼에서도
|
||
조정창처럼 눈금으로 고친다. 여백 0이라 기존 2열 격자 폭·간격은 그대로다. */
|
||
/* [－][숫자][＋]가 테두리 하나를 나눠 쓰는 한 덩어리(2026-08-29 사용자 지시).
|
||
바깥 여백은 0이라 2열 격자 폭·간격은 그대로다. */
|
||
.b05-structure__stepper {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: stretch;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 1px solid var(--color-border, #3a3f4a);
|
||
border-radius: var(--radius-inputs, 4px);
|
||
background: var(--color-surface);
|
||
gap: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.b05-structure__stepper:focus-within {
|
||
border-color: var(--color-royal-amethyst, rgb(109 40 217));
|
||
}
|
||
|
||
/* 가운데 숫자칸은 자기 테두리·배경을 버리고 덩어리 안에 녹는다. */
|
||
.b05-structure__stepper > input {
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
text-align: center;
|
||
}
|
||
|
||
.b05-structure__stepper > input:focus {
|
||
outline: none;
|
||
}
|
||
|
||
/* 좌우 끝 버튼 — 덩어리 안에서는 가르는 선 하나씩만 갖는다. */
|
||
.b05-structure__step {
|
||
flex: none;
|
||
/* 손가락·마우스로 집기 쉽게 넓힌다(2026-08-29 사용자 지시). 숫자칸이 남는 폭을
|
||
차지하므로 이 값이 곧 버튼 폭이다. */
|
||
width: 28px;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
color: var(--color-text-body);
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.b05-structure__step:first-child {
|
||
border-right: 1px solid var(--color-border, #3a3f4a);
|
||
}
|
||
|
||
.b05-structure__step:last-child {
|
||
border-left: 1px solid var(--color-border, #3a3f4a);
|
||
}
|
||
|
||
.b05-structure__step:hover {
|
||
background: color-mix(in srgb, var(--color-royal-amethyst, rgb(109 40 217)) 14%, transparent);
|
||
}
|
||
|
||
/* 구조물 배치 폼의 숫자 칸 — 브라우저 기본 증감 화살표(스피너)를 없앤다
|
||
(2026-08-29 사용자 지시). 증감은 옆의 [－][＋] 버튼이 맡고, 화살표는 칸 폭만
|
||
먹으면서 눈금(0.1)도 우리 규칙과 달라 혼동을 준다. */
|
||
.b05-route__panel-section input[type="number"]::-webkit-outer-spin-button,
|
||
.b05-route__panel-section input[type="number"]::-webkit-inner-spin-button,
|
||
.b05-drainage__facility input[type="number"]::-webkit-outer-spin-button,
|
||
.b05-drainage__facility input[type="number"]::-webkit-inner-spin-button {
|
||
margin: 0;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.b05-route__panel-section input[type="number"],
|
||
.b05-drainage__facility input[type="number"] {
|
||
appearance: textfield;
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
/* ── 조작 컨트롤 높이 템플릿(2026-08-29 사용자 지시) ──────────────────────
|
||
* 「구조물 배치」 섹션 안의 입력·셀렉트·스텝 묶음·이식 행이 **한 높이**를 쓴다.
|
||
* 값을 바꾸려면 이 변수 하나만 고치면 된다. 기준은 조정창에서 옮겨 온 행의
|
||
* 컨트롤 높이(26px)다 — 사용자가 그 크기를 기준으로 정했다. */
|
||
.b05-structure-section,
|
||
.b05-drainage__facility {
|
||
--b05-control-h: 26px;
|
||
}
|
||
|
||
.b05-structure-section input:not([type="checkbox"]),
|
||
.b05-structure-section select,
|
||
.b05-drainage__facility input:not([type="checkbox"]),
|
||
.b05-drainage__facility select {
|
||
box-sizing: border-box;
|
||
height: var(--b05-control-h);
|
||
padding: 0 6px;
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
/* 물넘이·세월교 개략 단면 결과 — 읽어 보는 안내문이라 입력 칸보다 작게 둔다
|
||
(2026-08-30 사용자: 글자가 너무 크다). */
|
||
.b05-drainage__facility-note {
|
||
margin: 0;
|
||
font-size: 10px;
|
||
line-height: 1.4;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
/* 스텝 묶음과 그 안의 버튼·숫자칸도 같은 높이로 선다. */
|
||
.b05-structure__stepper {
|
||
height: var(--b05-control-h);
|
||
}
|
||
|
||
.b05-structure__step {
|
||
height: 100%;
|
||
}
|
||
|
||
/* 조정창에서 옮겨 온 행(단 수·옵션) — 같은 변수로 맞춘다. */
|
||
.b05-structure__adjust-slot .b06-structure-panel__controls {
|
||
height: var(--b05-control-h);
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__controls .b06-structure-panel__btn {
|
||
height: 100%;
|
||
min-height: 0;
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__hval {
|
||
height: 100%;
|
||
}
|
||
|
||
/* 제목(라벨)과 항목 사이 간격도 한 변수로 묶는다(2026-08-29 사용자 지시) — 기준은
|
||
조정창에서 옮겨 온 행(2px·작은 글자). 측점 행은 가로 배치라 열 간격을 그대로 둔다. */
|
||
.b05-structure-section {
|
||
--b05-label-gap: 2px;
|
||
}
|
||
|
||
.b05-structure-section .b05-route__field {
|
||
gap: var(--b05-label-gap);
|
||
}
|
||
|
||
.b05-structure-section .b05-route__field > span {
|
||
font-size: var(--text-caption);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__struct {
|
||
gap: var(--b05-label-gap);
|
||
}
|
||
|
||
.b05-structure-section .b05-structure__position-row .b05-route__field {
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 전면 기울기가 품셈 표준경사 표(0.20~0.50) 밖일 때 — 실무가 S0.7 을 쓰므로 **막지 않고**
|
||
테두리로만 알린다(2026-09-09). 말풍선에 까닭이 들어 있다. */
|
||
.is-outside-standard {
|
||
border-color: var(--color-warning, #c98a00);
|
||
}
|