fix(modal): 모달 닫기·프로젝트 삭제 동작 + 세로 가운데 정렬

- 모달 오버레이 마커를 data-open-id → data-open-pid 로 변경
  (열기 감지 셀렉터 [data-open-id] 와 충돌해 모달 내부 클릭이
   닫기/삭제 대신 모달 재오픈으로 잡히던 문제)
- .modal/.share-modal 에 margin:auto → 짧으면 정중앙, 길면 스크롤
- 프로젝트 삭제 버튼 앞에 휴지통 아이콘 추가

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

public/css/modal.css

@@ -1,9 +1,10 @@
 /* 모달 — 상세 모달 · 댓글 스레드 · 공유(등록) 모달 · 토스트 · 플라이어. */
 
 /* ===================== 상세 모달 ===================== */
-.modal-overlay { position: fixed; inset: 0; z-index: 500; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; animation: aidev-fade .16s ease-out; }
+.modal-overlay { position: fixed; inset: 0; z-index: 500; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; animation: aidev-fade .16s ease-out; }
 .modal-overlay[hidden] { display: none; }
-.modal { width: 100%; max-width: 640px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
+/* margin:auto → 내용이 짧으면 화면 정중앙, 길면 위에 붙어 스크롤(잘림 방지). */
+.modal { width: 100%; max-width: 640px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
 .modal-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--divider); }
 .modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
 .modal-titlewrap { min-width: 0; }
@@ -64,7 +65,7 @@
 .comment-hint { margin-top: 7px; font-size: 11px; color: var(--fg3); padding-left: 38px; }
 
 /* ===================== 공유(등록) 모달 ===================== */
-.share-modal { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
+.share-modal { width: 100%; max-width: 520px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
 .share-head { padding: 20px 24px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; }
 .share-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--fg); }
 .share-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 15px; }

public/js/modals.js

@@ -9,7 +9,9 @@ export function openDetail(id) {
   mount.innerHTML = tpl.innerHTML;
   overlay.hidden = false;
   document.body.style.overflow = "hidden";
-  overlay.setAttribute("data-open-id", id);
+  // 주의: 열기 감지 셀렉터가 [data-open-id] 라서 같은 이름을 쓰면 모달 내부 클릭(닫기/삭제)이
+  // 다시 "열기"로 잡힌다. 마커는 반드시 다른 속성명(data-open-pid)으로 둔다.
+  overlay.setAttribute("data-open-pid", id);
   const ta = $(".comment-input", overlay);
   if (ta) ta.focus();
 }
@@ -17,7 +19,7 @@ function closeDetail() {
   const overlay = $("#detailModal");
   if (!overlay || overlay.hidden) return;
   overlay.hidden = true;
-  overlay.removeAttribute("data-open-id");
+  overlay.removeAttribute("data-open-pid");
   document.body.style.overflow = "";
 }
 

views/_project_detail.ejs

@@ -57,7 +57,7 @@
     <% if (p.owner_sabun === me) { %>
       <form method="post" action="/projects/<%= p.id %>/delete" style="margin-left:auto">
         <input type="hidden" name="return_to" value="/" />
-        <button type="submit" class="comment-link comment-del" data-confirm="이 프로젝트를 삭제할까요? 댓글·반응도 함께 삭제됩니다." style="font-size:12.5px">프로젝트 삭제</button>
+        <button type="submit" class="comment-link comment-del" data-confirm="이 프로젝트를 삭제할까요? 댓글·반응도 함께 삭제됩니다." style="font-size:12.5px"><%- icon("trash", { size: 13 }) %>프로젝트 삭제</button>
       </form>
     <% } %>
   </div>