Show * mark when list editor has unsaved changes

Add a red asterisk in the top-right of the dashboard header (and
prefix the document title with *) whenever the dirty flag is set,
so the user can tell at a glance that the music/image list hasn't
been saved yet. The indicator is driven by markDirty/markClean so
it follows the existing tracking.

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

public/listEditor.js

@@ -10,8 +10,14 @@
 
   // 저장되지 않은 변경 추적
   var dirty = false
-  function markDirty() { dirty = true }
+  var dirtyMarkEl = document.getElementById('dirty-mark')
-  function markClean() { dirty = false }
+  var baseTitle = document.title
+  function updateDirtyIndicator() {
+    if (dirtyMarkEl) dirtyMarkEl.hidden = !dirty
+    document.title = dirty ? ('*' + baseTitle) : baseTitle
+  }
+  function markDirty() { dirty = true; updateDirtyIndicator() }
+  function markClean() { dirty = false; updateDirtyIndicator() }
 
   // ── 탭 ────────────────────────────────────────────
   var tabBtns = document.querySelectorAll('.tabBtn')

public/styles.css

@@ -545,3 +545,15 @@ body.siteBody.centerLayout {
 }
 .packCard.pickable { cursor: pointer; }
 .packCard.pickable:hover { border-color: var(--accent); }
+
+/* 저장 안 됨 표시 (목록 편집기) */
+.dirtyMark {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--danger, #f85149);
+  line-height: 1;
+  margin-left: auto;
+  align-self: flex-start;
+  padding: 4px 8px;
+  user-select: none;
+}

views/op/listEditor.ejs

@@ -16,6 +16,7 @@
         <h1 style="margin-top:20px;"><%= pack.name %></h1>
         <p class="muted"><%= packKey %>.json</p>
       </div>
+      <div class="dirtyMark" id="dirty-mark" hidden title="저장되지 않은 변경사항이 있습니다">*</div>
     </section>
 
     <div class="tabBar">