fix(project): 보드 세션 매이슨리 배치 — 열별 독립 높이, 행 강제 확장 제거

CSS Grid 4열은 같은 행의 세션 하나만 카드가 많아도 그 행 전체 높이가
맞춰져 다른 칸이 텅 빈 채로 늘어나는 문제가 있었다(그 여파로 .pj-main이
불필요하게 커져 페이지 전체가 스크롤되고 "내 업무" 패널까지 스크롤되는
것처럼 보였음). layoutMasonry()로 세션을 절대배치해 열은 왼쪽부터 고정
순서로 배정하고, 각 열은 자기 카드 높이만큼만 다음 세션을 바로 그 밑에
쌓는다. 창 크기 변경 시 재계산.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/static/project.js

@@ -1108,8 +1108,38 @@
       if (boardAddStageBtn) boardAddStageBtn.hidden = !(viewScope === "project" && canManage);
       if (viewScope === "project") renderBoardByStage(board, vis);
       else renderBoardByName(board, vis);
+      layoutMasonry(board);
     }
 
+    // 세션(보드 컬럼) 매이슨리 배치 — 열은 왼쪽부터 순서대로 고정 배정하고,
+    // 각 열은 자기 안에 쌓인 카드 높이만큼만 다음 세션을 그 밑에 이어붙인다
+    // (CSS Grid처럼 행 전체를 가장 큰 세션에 맞춰 늘리지 않는다).
+    function layoutMasonry(board) {
+      const items = Array.prototype.slice.call(board.children).filter(function (node) {
+        return node.classList.contains("pj-col");
+      });
+      if (!items.length) { board.style.height = "auto"; return; }
+      const gap = 16, minColWidth = 220, maxCols = 4;
+      const boardWidth = board.clientWidth || 1;
+      const cols = Math.max(1, Math.min(maxCols, Math.floor((boardWidth + gap) / (minColWidth + gap))));
+      const colWidth = (boardWidth - gap * (cols - 1)) / cols;
+      const colHeights = new Array(cols).fill(0);
+      items.forEach(function (node, i) {
+        const c = i % cols;
+        node.style.width = colWidth + "px";
+        node.style.left = (c * (colWidth + gap)) + "px";
+        node.style.top = colHeights[c] + "px";
+        colHeights[c] += node.offsetHeight + gap;
+      });
+      board.style.height = Math.max.apply(null, colHeights) + "px";
+    }
+    let boardResizeTimer = null;
+    window.addEventListener("resize", function () {
+      if (currentView !== "board") return;
+      clearTimeout(boardResizeTimer);
+      boardResizeTimer = setTimeout(function () { layoutMasonry(el("pj-board")); }, 120);
+    });
+
     function renderBoardByName(board, vis) {
       // 컬럼 이름 = 서버가 정렬해준 전체 세션 이름 + 세션 미지정 업무용 '미지정'
       let names = boardStages.slice();