feat(m01-sl): 상자와 선 · 시트 · 결과 세 칸을 내용 높이만큼 — 안쪽 세로 밀기 없앰(창만 밈) · 시트 판 높이 = 쓰는 줄 + 두 줄

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016PSXsvyDxjNmufteN5bqmt

M01_MasterData/SheetLogic/M01_SL_Diagram.css

@@ -52,10 +52,10 @@
   display: none;
 }
 
-/* 띠 — 화면 위 3분의 1 안쪽 · 길면 가로로 밀기 */
+/* 띠 — 세로는 상자 높이만큼 다 보임(사용자 요청) · 길면 가로로 밀기 */
 .m01-sldg__band {
-  max-height: 33vh;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: color-mix(in srgb, var(--color-accent) 5%, var(--color-canvas));

M01_MasterData/SheetLogic/M01_SL_Entry.css

@@ -8,9 +8,9 @@
   font-size: var(--text-body);
 }
 
+/* 세 칸은 내용 높이만큼 — 넘치면 창(모달) 전체만 세로로 밈 */
 .m01-sl .ui-modal__body {
-  flex: 1;
-  min-height: 0;
+  flex: 0 0 auto;
   gap: var(--spacing-12);
 }
 
@@ -111,11 +111,10 @@
 
 /* 위 가로 다이어그램 · 아래 왼쪽 시트 판 · 아래 오른쪽 결과 */
 .m01-sl__layout {
-  flex: 1;
-  min-height: 0;
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
-  grid-template-rows: minmax(160px, 2fr) minmax(0, 3fr);
+  grid-template-rows: auto auto;
+  align-items: start;
   grid-template-areas:
     "diagram diagram"
     "panel result";
@@ -137,7 +136,6 @@
 .m01-sl__part {
   display: flex;
   flex-direction: column;
-  min-height: 0;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
 }
@@ -149,9 +147,7 @@
 }
 
 .m01-sl__part-body {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
+  min-width: 0;
   padding: var(--spacing-12);
 }
 
@@ -164,7 +160,6 @@
       "diagram"
       "panel"
       "result";
-    overflow: auto;
   }
 }
 

M01_MasterData/SheetLogic/M01_SL_Entry_Paper.ts

@@ -139,6 +139,18 @@ export async function fillOutside(
   return { sl: M.ev.applyOutside(sl, values), errors };
 }
 
+/* 시트 판 높이 — 그 시트가 쓰는 줄 수 + 두 줄(안쪽 세로 밀기 없게 · 사용자 요청)
+ * ponytail: 편집기 줄 높이 · 띠 높이를 숫자로 둠 — 편집기 꾸밈이 바뀌면 같이 고침 */
+const ROW_PX = 20;
+const CHROME_PX = 26 + 24 + 24 + 20; // 위 띠 · 칸 머리 · 아래 상태줄 · 가로 밀기 막대
+function sheetHeight(sheet: { 칸: Record<string, unknown> } | null): number {
+  const rows = Object.keys(sheet?.칸 ?? {}).reduce(
+    (most, a1) => Math.max(most, Number(a1.replace(/^[A-Z]+/, "")) || 0),
+    0,
+  );
+  return CHROME_PX + (Math.max(rows, 6) + 2) * ROW_PX;
+}
+
 /** 서버가 다시 셈한 합계 — 결과 상자 「계」 알약 칸의 서버 계산값(수식이 아니면 칸 값) */
 function serverTotal(sl: SheetLogic): number | null {
   const box = sl.nodes.find((n) => n.kind === "result");
@@ -297,6 +309,7 @@ export function showPaper(
     panelHost.hidden = false;
     pickHint.hidden = true;
     toolsHost.className = ""; // 표 손잡이가 제 꾸밈 이름을 붙임 — 다른 종류로 바뀌면 지움
+    panelHost.style.setProperty("--sl-sheet-h", `${sheetHeight(M.model.nodeSheet(sl, node.id))}px`);
     M.panel.renderPanel(panelHost, sl, node.id, {
       change: (next) => edit(next),
       pill: (nodeId, cell, dir, pillName) => edit(M.model.setPill(sl, nodeId, cell, dir, pillName)),

M01_MasterData/SheetLogic/M01_SL_Panel.css

@@ -54,6 +54,8 @@
 .m01-slpanel-sheet {
   position: relative;
   min-height: 260px;
+  /* 그 시트가 쓰는 줄 수만큼(Entry 가 --sl-sheet-h 를 정함) — 안쪽 세로 밀기 없음(사용자 요청) */
+  height: var(--sl-sheet-h, 260px);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-cards);
   overflow: hidden;