eomsangdonandClaude Opus 5
76fa78c528
B군(측구·맹암거 등)을 넣어도 **어디에 놓였는지 안 보였음**. 알약은 기준점 한 곳에만 찍히고, 시~종점 띠는 **고른 동안만** 폈기 때문. 측구처럼 길게 이어지는 시설은 「어디부터 어디까지」가 곧 그 시설의 내용이라 늘 보여야 함(2026-09-07 사용자 지시). - 구간형이면 **늘** 띠를 그림. 고른 것은 두껍고 진하게(4px·0.55), 나머지는 얇고 옅게(3px·0.45). - **레인 높이는 42px 그대로** — 2-5b 에서 줄여 둔 것을 안 부풀림. - B05 가 레지스트리를 **한 번만 받아 쓰는 자리에 따라 나눔** — 추가 메뉴는 켜진 종류만 (종전대로 여섯 군), **알약 레인·군 판정은 전부**. B06 에서 넣은 B군은 레지스트리에서 꺼져 있어, 켜진 것만 주면 종단에 이름·색 없이 「?」 회색 알약으로 떴을 자리였음. 실측(용화, 구간형 7건) — 띠 **0 → 7개**, 높이 3px, 레인 42px 그대로, 알약 18개 그대로. B군 6종은 전부 `interval` 이라 확인한 C군과 같은 경로를 탐. 타입 응답 36종에 B군 6종 포함 확인. 평면(지도)은 손대지 않음 — 노선 위에 구간을 얹는 방법이 지금 없어 **별건**으로 둠. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
411 lines
12 KiB
CSS
411 lines
12 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);
|
||
}
|
||
|
||
/* 시작·기준·종료 측점 = 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;
|
||
}
|