fix(modal): 상세 모달 폭 확대 + 공개/비공개 배지 클릭 토글

- 모달 max-width 760→880px (min-width 아님: 화면 분할 시 잘림 방지 위해
  반응형 유지).
- 상세 모달의 '공개/비공개' 배지를 소유자가 클릭하면 바로 토글되도록 변경.
  별도 '비공개로 전환' 버튼은 제거(배지가 그 역할). 삭제 버튼은 유지.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/css/components.css

@@ -67,6 +67,10 @@
 }
 .vis-badge.public { color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-bd); }
 .vis-badge.private { color: var(--fg2); background: var(--panel); border: 1px solid var(--border); }
+/* 배지 자체를 클릭하면 공개/비공개 토글(소유자). 버튼 기본 스타일 초기화 + 클릭 어포던스. */
+.vis-badge-form { display: inline-flex; }
+.vis-badge-btn { cursor: pointer; font-family: inherit; line-height: 1.4; transition: filter .14s ease, box-shadow .14s ease; }
+.vis-badge-btn:hover { filter: brightness(1.05); box-shadow: 0 0 0 3px var(--focus-ring); }
 .toggle-share-btn {
   display: inline-flex; align-items: center; gap: 5px; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 10px;
   cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; transition: background .14s ease, color .14s ease, border-color .14s ease;

public/css/modal.css

@@ -4,7 +4,7 @@
 .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; }
 /* margin:auto → 내용이 짧으면 화면 정중앙, 길면 위에 붙어 스크롤(잘림 방지). */
-.modal { width: 100%; max-width: 760px; 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 { width: 100%; max-width: 880px; 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; }