Files
Aislo/B06_Section/B06_Section_UI_Style_Cross_Controls.css
T
eomsangdonandClaude Opus 5 917cdce5df feat(B06): 집수정 9키 조작 · 좌우 화면 기준 통일 · 계류측 성토부 체계 도입
① 집수정 조작을 9키(3×3)로 — 십자 축은 이동(◀▶ 좌우 / ▲▼ 사면 대각),
   네 모서리는 크기(⇕ 내부 높이 · ⇔ 내부 폭), 가운데는 초기화. 기슭막이
   십자와 같은 축 규칙·버튼 크기라 행열이 맞는다. I형은 내공 개념이 없어
   네 모서리만 숨긴다.
② 좌우 반전 해소 — 집수정 lateralM이 계류측(outward) 기준값에 그대로 묶여
   유입이 우측인 측점에서 ◀가 화면 오른쪽으로 갔다. 버튼을 **화면 기준**으로
   받아 카드가 부호를 환산한다. 노견 안쪽(음수)은 0에서 멈추고 토스트로 알린다.
③ 집수정 계류측에 **유출측과 같은 성토부 체계** 적용(ㄴ·ㄷ형) — 구조물 계류측
   끝이 원지반 위로 나오면 1:1.2 성토부선을 긋고, 5m를 넘으면 다단 기슭막이를
   둘 수 있다(키 , 단 수 행 별도). 원지반 안이면 종전 절토선,
   I형은 관 하단 3도 되메움선이 맡는다. 좌우 이동 시 마감선을 억제하던 임시
   조건은 제거했다(급경사 선의 근본 원인은 이미 설계선 트림에서 해결).
- 700줄 유지: attachBasin(Basin)·buildExtrasAt(Extra) 추출 + 주석 정리

검증: 4+4.3 ㄴ형 좌우 2m — 성토부선 2.41m가 원지반에 0.001m 오차로 접함
(종전 마감선 없음) · ◀ 클릭 시 4+4.3(유입 좌)·13+15.7(유입 우) 모두 화면
왼쪽으로 이동 · 9키 3×3 좌표 정렬 확인 · tsc·ruff·prettier 통과 ·
pytest 148 passed, 7 skipped · B06_Section 700줄 초과 0건.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-22 18:59:09 +09:00

207 lines
4.4 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* 구조물 위치 조정 오버레이 창. */
.b06-structure-panel {
position: absolute;
bottom: var(--spacing-8);
left: var(--spacing-8);
z-index: 3;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--spacing-8);
border: 1px solid var(--color-danger);
border-radius: var(--radius-inputs);
background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
}
.b06-structure-panel.is-hidden,
.b06-structure-panel__value span.is-hidden,
.b06-structure-panel__btn.is-hidden,
.b06-structure-panel__buttons.is-hidden,
.b06-structure-panel__struct.is-hidden {
display: none;
}
.b06-structure-panel__head {
display: flex;
align-items: center;
gap: var(--spacing-8);
justify-content: space-between;
}
.b06-structure-panel__title {
color: var(--color-danger);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
}
.b06-structure-panel__value {
display: flex;
flex-direction: column;
gap: 1px;
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.b06-structure-panel__controls.b06-structure-panel__buttons {
display: grid;
grid-template-areas: ". up ." "left reset right" ". down equal";
justify-content: center;
gap: 2px;
}
.b06-structure-panel__btn--up {
grid-area: up;
}
.b06-structure-panel__btn--down {
grid-area: down;
}
.b06-structure-panel__btn--left {
grid-area: left;
}
.b06-structure-panel__btn--right {
grid-area: right;
}
.b06-structure-panel__btn--reset {
grid-area: reset;
}
.b06-structure-panel__btn--equal {
grid-area: equal;
}
.b06-structure-panel__controls .b06-structure-panel__btn {
box-sizing: border-box;
width: 26px;
height: 22px;
padding: 0;
text-align: center;
line-height: 1;
}
.b06-structure-panel__hval {
box-sizing: border-box;
width: 3.5em;
text-align: center;
color: var(--color-text-body);
font-size: var(--text-caption);
align-self: center;
}
.b06-structure-panel__struct {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.b06-structure-panel__label {
color: var(--color-text-muted);
font-size: var(--text-caption);
line-height: 1.2;
}
.b06-structure-panel__controls {
display: flex;
align-items: center;
gap: 2px;
}
/* 집수정 조작 = 9키(3×3, 2026-08-22 사용자) — 십자 축 이동 · 모서리 크기 · 중앙 초기화.
기슭막이 십자와 같은 폭·버튼 크기로 맞춰 행열이 어긋나지 않게 한다. */
.b06-structure-panel__controls.b06-structure-panel__basin-buttons {
display: grid;
grid-template-areas:
"nw up ne"
"left reset right"
"sw down se";
justify-content: center;
gap: 2px;
}
.b06-structure-panel__btn--nw {
grid-area: nw;
}
.b06-structure-panel__btn--ne {
grid-area: ne;
}
.b06-structure-panel__btn--sw {
grid-area: sw;
}
.b06-structure-panel__btn--se {
grid-area: se;
}
.b06-structure-panel__basin-reset {
margin-left: auto;
}
.b06-structure-panel__select {
flex: 1;
padding: 1px var(--spacing-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-caption);
}
.b06-structure-panel__btn {
padding: 0 var(--spacing-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: var(--color-surface);
color: var(--color-text-secondary);
cursor: pointer;
font-size: var(--text-caption);
line-height: 1.6;
}
.b06-structure-panel__btn:hover {
border-color: var(--color-danger);
color: var(--color-danger);
}
.b06-structure-panel__close {
padding: 0 4px;
border-color: transparent;
background: transparent;
}
.b06-cross-card__zoom {
position: absolute;
top: var(--spacing-4);
right: var(--spacing-4);
z-index: 2;
display: flex;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-inputs);
background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
}
.b06-cross-card__zoom-btn {
width: 22px;
height: 22px;
padding: 0;
border: none;
border-left: 1px solid var(--color-border);
background: none;
color: var(--color-text-secondary);
font-size: 0.8rem;
line-height: 1;
cursor: pointer;
}
.b06-cross-card__zoom-btn:first-child {
border-left: none;
}
.b06-cross-card__zoom-btn:hover {
color: var(--color-text);
background: var(--color-surface);
}