Files
Aislo/E02_StabGround/E02_StabGround_UI_Style.css
T
eomsangdonandClaude Opus 5.5 f4077fbcf6 feat(532-3): E02 지하수 갈래 — 우기 규칙 넷(KDS 기본 · 지표 아래 깊이 비율 · r_u · 사용자 수위선 구간) · 엔진 꼴 바꿈 · 지하수 카드
- ground.json groundwater 칸 덧붙임(wet_mode · depth_ratio · ru · lines · 기존 칸 그대로) · 기본값 = KDS · 범위 칸 넷
- check_ground ↔ checkGround 짝 고침(갈래 · 비율 · r_u · 수위선 구간 · 점) · 거울 시험 판 넷 더함
- groundwater_for · station_groundwater — 측점 모형 → {mode: none | ru | line}(좌 · 우 비탈 높이 따로 · 덮지 않은 측점 = KDS)
- GET · [초기화] = 옛 정본 빠진 칸 기본값으로 채움 · 화면 옛 캐시도 서버 값으로 채움
- 화면 = 지하수 카드 따로(「KDS 기본 · 우기 기준안전율 1.2 와 짝」 안내) · 하중 카드 = 노면 하중 · 지진
- 시험 test_532_4_stab_walls_water(벽 · 지하수) · test_532_3 기본값 지하수 칸 대조 고침(칸 늘어남)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-25 20:44:00 +09:00

187 lines
3.4 KiB
CSS

/* =============================================================================
* E02_StabGround_UI_Style.css
* E02 지반 조건 본문 카드 · 표 · 입력 칸 — 색은 테마 토큰만(밝음 · 어두움 같이)
* ========================================================================== */
.e02-page {
height: 100%;
overflow: auto;
padding: var(--spacing-16);
box-sizing: border-box;
}
.e02-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr));
gap: var(--spacing-16);
align-items: start;
}
.e02-card {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
min-width: 0;
padding: var(--spacing-12) var(--spacing-16);
border-radius: var(--radius-sm);
background: var(--color-surface-raised);
}
.e02-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-8);
}
.e02-card__title,
.e02-card__sub {
margin: 0;
color: var(--color-text);
font-size: var(--text-body);
}
.e02-card__sub {
font-size: var(--text-body-sm);
margin-top: var(--spacing-8);
}
.e02-card__actions {
display: flex;
gap: var(--spacing-4);
}
.e02-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-body-sm);
color: var(--color-text-body);
}
.e02-table th {
padding: var(--spacing-4);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
text-align: left;
white-space: nowrap;
}
.e02-table td {
padding: 2px var(--spacing-4);
vertical-align: middle;
}
.e02-table--read td {
padding: 2px var(--spacing-8);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.e02-table--read tr.is-zoned td {
background: var(--color-mist-violet);
color: var(--color-text);
}
.e02-stations {
max-height: 320px;
overflow: auto;
}
.e02-input {
width: 100%;
min-width: 64px;
box-sizing: border-box;
}
.e02-input--num {
min-width: 56px;
text-align: right;
}
.e02-input--name {
min-width: 96px;
}
.e02-input.is-invalid {
border-color: var(--color-danger);
box-shadow: 0 0 0 1px var(--color-danger);
}
.e02-rowhead {
white-space: nowrap;
color: var(--color-text-secondary);
}
.e02-map,
.e02-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--spacing-8);
align-items: end;
}
.e02-map__title {
grid-column: 1 / -1;
color: var(--color-text-secondary);
font-size: var(--text-body-sm);
}
.e02-field {
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--text-caption);
color: var(--color-text-secondary);
}
.e02-hint,
.e02-empty {
margin: 0;
font-size: var(--text-caption);
color: var(--color-text-secondary);
}
.e02-status {
margin: var(--spacing-8) 0 0;
white-space: pre-line;
font-size: var(--text-body-sm);
color: var(--color-warning);
}
.e02-status.is-error {
color: var(--color-danger);
}
.e02-table .ui-btn {
white-space: nowrap;
}
.e02-input[data-path$=".water"] {
min-width: 120px;
}
/* 좁은 화면 — 표만 옆으로 밀림(카드 밖으로 안 나감) */
.e02-card {
overflow-x: auto;
}
/* 물성 표는 열이 많아 한 줄 통째 */
.e02-card--wide {
grid-column: 1 / -1;
}
/* 지하수 카드 — 사용자 수위선 점(offset · 깊이) 줄 */
.e02-points {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
align-items: center;
}
.e02-point {
display: inline-flex;
gap: 2px;
align-items: center;
}