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

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

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

app/static/project.css

@@ -191,21 +191,24 @@
   transform-origin: top center;
 }
 
-/* ── 보드(칸반) — 4열 x 2행 그리드. 세션이 8개를 넘으면 이 영역 안에서만
+/* ── 보드(칸반) — 최대 4열 매이슨리(masonry). CSS Grid로 4열을 만들면 같은
+   행의 한 칸만 카드가 많아도 그 행 전체 높이가 맞춰져 빈 칸이 생긴다 —
+   그래서 각 세션을 JS(layoutMasonry)로 절대배치해 열은 고정(왼쪽부터
+   순서대로 배정)하되 높이는 열마다 독립적으로 쌓이게 한다(같은 열의 다음
+   세션이 바로 위 세션 아래에 붙는다). 세션이 많아지면 이 영역 안에서만
    세로 스크롤되고, "+ 세션 추가" 버튼은 이 영역 밖(pj-board-toolbar)에
    있어 스크롤과 무관하게 항상 보인다. ── */
 .pj-board-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
 .pj-board-toolbar .pj-add-stage { width: auto; padding: 8px 18px; }
 .pj-board {
-  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min-content;
-  gap: 16px; align-content: start; max-height: 74vh; overflow-y: auto; padding-right: 4px; padding-bottom: 8px;
+  position: relative; max-height: 74vh; overflow-y: auto; overflow-x: hidden;
+  padding-right: 4px; padding-bottom: 8px;
 }
-@media (max-width: 1400px) { .pj-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
-@media (max-width: 1100px) { .pj-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 700px) { .pj-board { grid-template-columns: 1fr; } }
 /* 세션(보드 컬럼) — 배경이 페이지와 거의 같으면 구분이 안 되므로(#f6f5fb ≈
-   흰 배경) 뚜렷한 회색 톤 + 테두리로 아사나처럼 컬럼 경계를 분명히 준다. */
-.pj-col { background: #eef0f4; border: 1px solid #e2e4ea; border-radius: 14px; padding: 12px; min-width: 0; }
+   흰 배경) 뚜렷한 회색 톤 + 테두리로 아사나처럼 컬럼 경계를 분명히 준다.
+   position/width/left/top 은 layoutMasonry 가 매번 인라인으로 계산해 준다. */
+.pj-col { position: absolute; background: #eef0f4; border: 1px solid #e2e4ea; border-radius: 14px; padding: 12px; box-sizing: border-box; }
+.pj-empty { position: static; }
 .pj-col-head {
   display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px;
   padding: 2px 6px 12px; margin-bottom: 4px; color: var(--pj-ink);