From c4735e4669f493fe9b75225bfb506cbb47b0f2e4 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Mon, 28 Sep 2026 16:48:14 +0900 Subject: [PATCH] =?UTF-8?q?feat(M02):=20=EC=A7=91=EA=B3=84=ED=91=9C=20?= =?UTF-8?q?=EC=95=84=EB=9E=98=20=EC=B9=B4=EB=93=9C=20=E2=80=94=20=ED=91=9C?= =?UTF-8?q?=20=EC=95=84=EB=9E=98=20=EB=82=A8=EC=9D=80=20=EC=B0=BD=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=EB=A7=8C=ED=81=BC=EB=A7=8C=20=EC=B0=A8?= =?UTF-8?q?=EC=A7=80(=EB=A9=94=EC=9D=B8=20=ED=99=94=EB=A9=B4=20=EC=84=B8?= =?UTF-8?q?=EB=A1=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=97=86=EC=9D=8C)?= =?UTF-8?q?=20=C2=B7=20=EC=84=B8=20=EC=B9=B4=EB=93=9C=20=EA=B0=99=EC=9D=80?= =?UTF-8?q?=20=EB=86=92=EC=9D=B4=20=C2=B7=20=EC=B5=9C=EC=86=8C=2016rem=20?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=A9=88=EC=B6=94=EA=B3=A0=20=EA=B7=B8?= =?UTF-8?q?=EB=95=8C=EB=A7=8C=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 집계표 카드가 보이면 메인 칸 = 창 높이 · 카드 영역 flex 로 남은 높이 · 카드 본문이 높이를 채움 · 표는 줄지 않음 Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01NWHNLQYPZN7kKf1rzrrRZq --- .../M02_MasterTemplete_Structure.css | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/M02_MasterTemplete/M02_MasterTemplete_Structure.css b/M02_MasterTemplete/M02_MasterTemplete_Structure.css index 463c6efd..104ed6ac 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Structure.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Structure.css @@ -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; }