eomsangdonandClaude Opus 5.5
271c460641
- 위험 채움 토큰 밝음 #e5484d → #d6363c(흰 글 3.91 → 4.72) · 어두움 5.6 · 위험 글 #c0392b 그대로 - 새 부품 계산 줄(ui_template_calc_row) — B08 수리집수면적표 b08-hydro__row · 식 칸 배치를 대신함 - 표 부품 칸 램프(ui-data-table__lamp · --only · ✓) — B08 집계표 · 거리이정표 · B09 설계내역 램프 CSS 세 벌을 걷음(표지 class 는 풍선 · 가이드용으로 남김) - 모달 넓은 중간 창(wide + width 1100px · 1100 × 680) — B09 운반 창 손 인라인 크기를 걷음 - 값 목록 규칙 꼴(rule) — ☰ 설정 규칙 줄 ul/li 를 걷음 - 접이 구역 머리(createCollapsibleHead = 패널 머리 + 접는 제목) — B08 구조물도 「조합 연결」 제목(옛 b08-sheets__title)을 대신함 - 일반 화면 틀 좁은 폭 · 입력 칸 2열 · 끝 단추 줄 — D01 · E01 이 B02 CSS 를 빌리던 것을 끊음(가이드 장면 선택자 맞춤) - 부품 모음 견본 · 지킴 시험 test_557_2 · 낡은 시험(198_1 · 247_1 · 251_1 · 257_1 · 276_1 · 551_1)은 부품 CSS · 새 class 로 맞춤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
129 lines
3.0 KiB
CSS
129 lines
3.0 KiB
CSS
/* B08 4탭 홍수량 계산서(PLAN 62-2 · 69-4) — 공용 카드 · 계산 줄(557-2) · 입력 · 드롭다운 위에 카드 배치만.
|
|
색은 테마 토큰만(밝음 · 어두움 같이) · 테두리는 입력 · 선택 칸(공용 ui-input · ui-select)만
|
|
· 굵게 + 붉은 계열은 중요 결과(.is-key)만. */
|
|
|
|
/* 보조 탭 + [저장] 한 줄 = 부품 도구줄 · 여기는 아래 틈만 */
|
|
.b08-hydro__toolbar {
|
|
margin-bottom: var(--spacing-16);
|
|
}
|
|
|
|
/* 보조 탭 줄 = 다른 B08 보조 탭(.b08-quantity__tabs) 양식 · [저장] 옆까지 줄을 늘림 */
|
|
.b08-hydro__tabs {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.b08-hydro__sheet {
|
|
container-type: inline-size; /* 2열 ↔ 1열 = 창이 아닌 이 칸 폭 기준 */
|
|
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);
|
|
}
|
|
|
|
@container (max-width: 800px) {
|
|
.b08-hydro__body {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 카드 높이 = 화면 따라(B08 다른 표와 같은 calc(100dvh − N)) · 넘치면 카드 몸만 스크롤 */
|
|
.b08-hydro__card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100dvh - 240px);
|
|
}
|
|
|
|
.b08-hydro__card .ui-card__body {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 중요 결과 — Qd · 유출량 · 판정 · 유출율 · 글자색은 판정 따라(O K 초록 · N G 붉음 · 없으면 기본) · 계산 칸 굵기 = 부품 계산 줄 */
|
|
.is-key.b08-hydro__verdict {
|
|
color: var(--color-text-body);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.b08-hydro__sheet.is-ok .is-key {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.b08-hydro__sheet.is-ng .is-key {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.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: var(--text-caption);
|
|
fill: var(--draw-text-secondary);
|
|
}
|
|
|
|
.b08-hydro__water {
|
|
fill: color-mix(in srgb, var(--draw-chart-0) 30%, transparent);
|
|
}
|
|
|
|
.b08-hydro__wall {
|
|
fill: none;
|
|
stroke: var(--draw-text-body);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.b08-hydro__line {
|
|
fill: none;
|
|
stroke: var(--draw-text-secondary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b08-hydro__verdict {
|
|
padding: var(--spacing-8) 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body);
|
|
text-align: center;
|
|
}
|
|
|
|
.b08-hydro__status {
|
|
margin: var(--spacing-8) 0 0;
|
|
color: var(--color-danger);
|
|
}
|