Add /op/list, /op/list/:pack, /op/datapack web admin + spec lock

docs/add.md
 - 사진 PNG 규격을 1024×1024 (4×4 블록 슬롯 × ×16 배율) 로 못박음
 - 짧은 변 기준 가운데 정사각 크롭 + 1024 초과 시만 축소, 미만은 native 유지

신규 라우트 (모두 requireAuth):
 - GET  /op/list                          → manifest 카드 목록
 - GET  /op/list/:pack                    → 음악목록·사진목록 탭 편집기
 - POST /op/list/:pack                    → file/list/<pack>.json 저장 (JSON)
 - POST /op/list/:pack/playlist           → yt-dlp 로 플레이리스트 펼치기
 - GET  /op/datapack                      → 음악퀴즈 선택 + 출력
 - GET  /op/datapack/:pack/generate       → 임시 포맷 mcfunction 텍스트

shared/types.ts: PackList / MusicListEntry / ImageListEntry
shared/store.ts: loadPackList, savePackList, normalizePackList
shared/paths.ts: fileListDirPath = file/list/
server/youtube.ts: yt-dlp 플레이리스트 펼치기 (--flat-playlist --dump-json),
  설치 안 됐을 때 NO_YTDLP 코드로 503.

UI:
 - views/op/list.ejs: 가로 카드 목록 + 돌아가기 버튼
 - views/op/listEditor.ejs + public/listEditor.js: 탭 전환, 드래그 정렬,
   우클릭 컨텍스트 메뉴(수정/삭제), 사진 수정 모달의 [유튜브 / 이미지] 토글,
   목록 저장·초기화·플레이리스트 불러오기 확인 팝업
 - views/op/datapack.ejs: 음악퀴즈 카드 선택 팝업 → 데이터팩 출력 + 복사
 - views/op/dashboard.ejs: 상단에 [음악목록 수정] [데이터팩 수정] 버튼
 - public/styles.css: 탭, 트랙 로우, 이미지 그리드, 컨텍스트 메뉴, 모달, 코드블록

.gitignore: conversations/ 추가.

스모크: login → /op/list 렌더, POST 저장 라운드트립 OK,
/op/datapack/.../generate 텍스트 출력 OK, 플레이리스트 fetch는 yt-dlp 미설치
환경에서 503 NO_YTDLP 메시지 정상.

Section 1 (리소스팩 설치기 EXE: yt-dlp 음악 다운로드, painting variant
텍스처 패키징, 리소스팩 zip 배치) 은 후속 커밋에서 작업.

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

public/styles.css

@@ -357,3 +357,125 @@ body.siteBody.centerLayout {
   font-size: 13px;
   margin: 0 0 14px;
 }
+
+/* ── /op/list, /op/list/:pack, /op/datapack ────────────── */
+
+.tabBar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
+.tabBtn {
+  background: transparent; border: none; color: var(--text-muted);
+  padding: 10px 18px; cursor: pointer; font-size: 14px;
+  border-bottom: 2px solid transparent;
+}
+.tabBtn:hover { color: var(--text); }
+.tabBtn.active { color: var(--text); border-bottom-color: var(--accent); }
+
+.tabPanel { display: block; }
+
+.listActionsRow { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
+.statusText { font-size: 13px; color: var(--text-muted); margin-left: 8px; }
+.statusText.error { color: var(--danger); }
+
+.playlistRow { display: flex; gap: 8px; margin-bottom: 16px; }
+.textInput {
+  flex: 1; background: var(--bg); color: var(--text);
+  border: 1px solid var(--border); padding: 10px 12px; border-radius: 8px;
+  font-size: 14px;
+}
+.textInput:focus { outline: none; border-color: var(--accent); }
+
+/* 음악 행 */
+.trackList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
+.trackRow {
+  display: grid;
+  grid-template-columns: 36px 80px 1fr auto;
+  gap: 12px; align-items: center;
+  padding: 8px 12px; background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: 8px;
+  cursor: grab; user-select: none;
+}
+.trackRow.dragging { opacity: 0.5; }
+.trackRow.dragOver { border-color: var(--accent); }
+.rowNum { color: var(--text-muted); font-size: 14px; text-align: center; }
+.rowThumb { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; background: #000; }
+.rowMeta { min-width: 0; }
+.rowTitle { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.rowSub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+.rowDur { color: var(--text-muted); font-size: 13px; }
+
+/* 사진 그리드 */
+.imageGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+.imageCard {
+  position: relative; aspect-ratio: 1 / 1; background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: 10px;
+  overflow: hidden; cursor: grab; user-select: none;
+}
+.imageCard.dragging { opacity: 0.5; }
+.imageCard.dragOver { border-color: var(--accent); }
+.imageCard img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.cardNum {
+  position: absolute; top: 6px; left: 6px;
+  background: rgba(0,0,0,0.7); color: #fff;
+  padding: 2px 8px; border-radius: 999px;
+  font-size: 12px; font-weight: 600;
+}
+
+/* 컨텍스트 메뉴 */
+.ctxMenu {
+  position: absolute; z-index: 200;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 8px; padding: 4px; min-width: 120px;
+  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
+}
+.ctxMenu button {
+  display: block; width: 100%; text-align: left;
+  background: transparent; border: none; color: var(--text);
+  padding: 8px 12px; cursor: pointer; font-size: 13px; border-radius: 4px;
+}
+.ctxMenu button:hover { background: var(--bg); }
+
+/* 모달 (음악퀴즈 인스톨러의 modalOverlay 와 호환) */
+.modalOverlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
+  display: flex; align-items: center; justify-content: center; z-index: 1000;
+}
+.modalOverlay[hidden] { display: none; }
+.modalCard {
+  background: var(--bg-alt); border: 1px solid var(--border);
+  border-radius: 12px; width: min(560px, 92vw); max-height: 86vh;
+  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
+}
+.modalCard > header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 12px 16px; border-bottom: 1px solid var(--border);
+}
+.modalCard > header h3 { margin: 0; font-size: 16px; }
+.modalCard > footer { padding: 12px 16px; border-top: 1px solid var(--border); }
+.modalClose { background: transparent; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; }
+.modalClose:hover { color: var(--text); }
+.modalBody { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
+.modalBody label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
+
+/* 토글 버튼 (segmented) */
+.segmentedRow { display: flex; gap: 4px; }
+.segBtn {
+  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
+  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
+}
+.segBtn.active { border-color: var(--accent); color: var(--text); background: rgba(47,129,247,0.15); }
+
+/* 데이터팩 페이지 */
+.dpControls { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
+.dpActions { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
+.codeBlock {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 14px 16px; overflow-x: auto;
+  font-family: 'Consolas','SFMono-Regular',monospace; font-size: 13px;
+  white-space: pre-wrap; word-break: break-word;
+  max-height: 60vh; overflow-y: auto;
+}
+.packCard.pickable { cursor: pointer; }
+.packCard.pickable:hover { border-color: var(--accent); }