eomsangdonandClaude Opus 5.5
426e574cd2
- 엑셀 모양(흰 종이 · 노랑 칸 · 쪽 표시) 대신 공용 카드 · 입력 · 드롭다운 · 테마 토큰 색 - 테두리는 입력 · 선택 칸만 · 굵게 + 붉은 계열은 Qd · 유출량 · 판정 · 유출율만 · 관 단면 그림 테마 색 - 지역 = 전처리 행정구역(노선 대표점) > 시군구 하나 > 프로젝트 등록 지역 · R24 = 전처리 강우량표의 재현기간별 24시간 값(없으면 입력 칸) - 계산 때 R24 는 서버가 공사지 표로 정함 · 빈칸에 기대는 계산 칸은 「—」 - 처음 값 = 표준 값만(할증 2.0 · 관 종류 · 단면 가정 · 유출계수 0.8 · 재현기간 100년) · 측점 고유 값 빈칸 - [저장] = PUT …/quantity/hydro → B08_Quantity/quantities/hydro_inputs.json 만 · 성공 뒤 캐시 비움 · 캐시 판 올림(v2) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4
202 lines
4.1 KiB
CSS
202 lines
4.1 KiB
CSS
/* B08 4탭 홍수량 계산서(PLAN 62-2 · 69-4) — 공용 카드 · 입력 · 드롭다운 위에 줄 배치만.
|
|
색은 테마 토큰만(밝음 · 어두움 같이) · 테두리는 입력 · 선택 칸(공용 ui-input · ui-select)만
|
|
· 굵게 + 붉은 계열은 중요 결과(.is-key)만. */
|
|
|
|
/* 오른쪽 「진행단계」 떠 있는 판에 안 가리게 */
|
|
.b08-hydro__toolbar,
|
|
.b08-hydro__sheet {
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.b08-hydro__toolbar {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-16);
|
|
margin-bottom: var(--spacing-16);
|
|
}
|
|
|
|
.b08-hydro__tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.b08-hydro__toolbar > .ui-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.b08-hydro__sheet {
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.b08-hydro__body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.b08-hydro__body {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.b08-hydro__card .ui-card__title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.b08-hydro__card .ui-card__body {
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b08-hydro__h2 {
|
|
margin: var(--spacing-8) 0 0;
|
|
padding-top: var(--spacing-8);
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.b08-hydro__formula {
|
|
margin: 0 0 0 var(--spacing-8);
|
|
font-family: "Cambria Math", "Times New Roman", serif;
|
|
font-size: 15px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b08-hydro__row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 112px minmax(0, 0.8fr);
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
min-height: var(--control-height-sm);
|
|
}
|
|
|
|
.b08-hydro__row--f {
|
|
grid-template-columns: max-content minmax(0, 1fr) 112px;
|
|
}
|
|
|
|
.b08-hydro__label {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b08-hydro__label--select {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b08-hydro__row .b08-hydro__formula {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b08-hydro__hint {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
/* 계산 칸 — 테두리 없이 글자만 · 숫자 자리 맞춤 */
|
|
.b08-hydro__out,
|
|
.b08-hydro__value {
|
|
padding: 0 var(--spacing-8);
|
|
color: var(--color-text-body);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
.b08-hydro__value {
|
|
text-align: left;
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.b08-hydro__in {
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 줄에 바로 놓인 드롭다운은 값 칸 + 덧칸 — 선택지 글이 안 잘리게 */
|
|
.b08-hydro__row > .b08-hydro__select {
|
|
grid-column: 2 / 4;
|
|
justify-self: start;
|
|
width: auto;
|
|
}
|
|
|
|
/* 식 칸에 놓인 입력(하상경사 1 / ☐)은 값 칸 폭 */
|
|
.b08-hydro__row--f > .b08-hydro__in:nth-child(2) {
|
|
justify-self: start;
|
|
width: 112px;
|
|
}
|
|
|
|
/* 중요 결과 — Qd · 유출량 · 판정 · 유출율 */
|
|
.is-key.b08-hydro__out,
|
|
.is-key.b08-hydro__verdict {
|
|
color: var(--color-danger);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.b08-hydro__figure {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
justify-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.b08-hydro__dims {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
justify-self: stretch;
|
|
}
|
|
|
|
.b08-hydro__pipe {
|
|
width: 170px;
|
|
height: 145px;
|
|
}
|
|
|
|
.b08-hydro__pipe text {
|
|
font-size: 12px;
|
|
fill: var(--color-text-secondary);
|
|
}
|
|
|
|
.b08-hydro__water {
|
|
fill: color-mix(in srgb, var(--color-chart-0) 30%, transparent);
|
|
}
|
|
|
|
.b08-hydro__wall {
|
|
fill: none;
|
|
stroke: var(--color-text-body);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.b08-hydro__line {
|
|
fill: none;
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b08-hydro__verdict {
|
|
padding: var(--spacing-8) 0;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body);
|
|
text-align: center;
|
|
}
|
|
|
|
.b08-hydro__verdict.is-ng {
|
|
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.b08-hydro__status {
|
|
margin: var(--spacing-8) 0 0;
|
|
color: var(--color-danger);
|
|
}
|