feat(M02): 집계표 아래 카드 — 표 아래 남은 창 높이만큼만 차지(메인 화면 세로 스크롤 없음) · 세 카드 같은 높이 · 최소 16rem 에서 멈추고 그때만 스크롤

- 집계표 카드가 보이면 메인 칸 = 창 높이 · 카드 영역 flex 로 남은 높이 · 카드 본문이 높이를 채움 · 표는 줄지 않음

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NWHNLQYPZN7kKf1rzrrRZq
This commit is contained in:
2026-09-28 16:48:14 +09:00
co-authored by Claude Sonnet 5
parent f85aa9136a
commit c4735e4669
@@ -8,11 +8,12 @@
/* 카드 셋 나란히(같은 폭) · 카드 하나가 300px 안 되면 자동으로 2열 → 1열(칸 폭에 따라 · 창이 작아지면 바로 바뀜) */
.m02-struct {
/* CAD 미리보기 · 면적산출 · 재료산출 내용 높이 — 한 값(창 높이에 맞춰 함께 변함) */
--m02-struct-body-h: clamp(18rem, 60vh, 40rem);
/* CAD 미리보기 · 면적산출 · 재료산출 내용 최소 높이 — 이보다 작아질 때만 화면이 스크롤 */
--m02-struct-body-min: 16rem;
display: grid;
flex: 1 1 0; /* 메인 칸(창 높이)에서 표 아래 남은 높이를 다 차지 */
grid-auto-rows: minmax(auto, 1fr); /* 카드 셋 같은 높이 */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
align-items: start;
padding-top: var(--spacing-12);
border-top: 1px solid var(--color-border);
min-width: 0;
@@ -22,6 +23,24 @@
min-width: 0;
}
/* 집계표 칸을 골라 카드가 보이면 메인 칸을 창 높이로 고정 — 표 아래 남은 높이만큼만 카드(스크롤 없음) */
.m02-main:has(> .m02-main__extra > .m02-struct:not([hidden])) {
box-sizing: border-box;
height: calc(100vh - var(--spacing-64));
}
/* 표는 줄어들지 않음(줄면 표가 카드 위로 넘침) — 창이 작으면 카드가 최소 높이에서 멈추고 화면이 스크롤 */
.m02-main:has(> .m02-main__extra > .m02-struct:not([hidden])) > .m02-main__host {
flex-shrink: 0;
}
/* 카드 = 제목 + 머리 + 본문 — 본문이 남는 높이를 채움 */
.m02-struct__card {
display: flex;
flex-direction: column;
min-height: 0;
}
/* ui-sidebar-panel 은 display:flex 라 hidden 속성을 덮어씀 — 안 보일 땐 확실히 안 보이게 */
.m02-struct[hidden] {
display: none;
@@ -65,8 +84,8 @@
.m02-struct__preview {
display: flex;
overflow: hidden;
height: var(--m02-struct-body-h);
min-height: 0;
flex: 1 1 0;
min-height: var(--m02-struct-body-min);
min-width: 0;
}
@@ -78,7 +97,8 @@
없으면 0 이 되어 칸이 안 보였음(진짜 원인). 약 30행이 늘 보이게 높이를 정하고
넘치면 격자 안쪽(.ss-grid-host)이 스스로 스크롤(spreadsheet_grid.css). */
.m02-struct__sheet {
height: var(--m02-struct-body-h);
flex: 1 1 0;
min-height: var(--m02-struct-body-min);
overflow: hidden;
min-width: 0;
}