diff --git a/src/gateway/music-renderer.ts b/src/gateway/music-renderer.ts
new file mode 100644
index 0000000..d2b3f3d
--- /dev/null
+++ b/src/gateway/music-renderer.ts
@@ -0,0 +1,450 @@
+/**
+ * music-renderer.ts
+ * LilyPond-based sheet music renderer.
+ * Accepts ABC notation, LilyPond source, or MIDI file path.
+ * Returns SVG (cropped preview) + MIDI + PDF file paths.
+ */
+
+import { spawnSync, spawn } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import * as crypto from 'crypto';
+
+export interface RenderResult {
+  id: string;
+  svgPath: string;
+  svgPages: string[];   // all page SVG paths (length >= 1)
+  pdfPath: string | null;
+  midiPath: string | null;
+}
+
+const LILYPOND_BIN = '/usr/bin/lilypond';
+const ABC2LY_BIN   = '/usr/bin/abc2ly';
+const MIDI2LY_BIN  = '/usr/bin/midi2ly';
+
+const RENDER_DIR = path.join(os.tmpdir(), 'homeclaw-music');
+
+function ensureRenderDir() {
+  if (!fs.existsSync(RENDER_DIR)) fs.mkdirSync(RENDER_DIR, { recursive: true });
+}
+
+function detectFormat(source: string): 'abc' | 'lilypond' {
+  const trimmed = source.trimStart();
+  if (/^(X:|T:|M:|L:|K:|%abc)/m.test(trimmed)) return 'abc';
+  if (trimmed.includes('\\version') || trimmed.includes('\\score') || trimmed.includes('\\relative')) return 'lilypond';
+  if (/\\(clef|key|time|new Staff|Staff)/.test(trimmed)) return 'lilypond';
+  return 'abc';
+}
+
+function wrapLilypond(source: string, tempo = 120): string {
+  if (source.includes('\\score')) {
+    if (!source.includes('\\midi')) {
+      return source.replace(/\\layout\s*\{[^}]*\}/, m => m + `\n  \\midi { \\tempo 4 = ${tempo} }`);
+    }
+    return source;
+  }
+  return `\\version "2.24.0"
+\\score {
+  \\new Staff {
+    ${source}
+  }
+  \\layout { }
+  \\midi { \\tempo 4 = ${tempo} }
+}
+`;
+}
+
+function abcToLilypond(abcSource: string, workDir: string): string {
+  const abcFile = path.join(workDir, 'input.abc');
+  const lyFile  = path.join(workDir, 'input.ly');
+  fs.writeFileSync(abcFile, abcSource, 'utf8');
+
+  const result = spawnSync(ABC2LY_BIN, ['-o', lyFile, abcFile], {
+    cwd: workDir, timeout: 15_000, encoding: 'utf8',
+  });
+  if (result.status !== 0) throw new Error(`abc2ly failed: ${result.stderr || result.stdout}`);
+  if (!fs.existsSync(lyFile)) throw new Error('abc2ly produced no output file');
+
+  let ly = fs.readFileSync(lyFile, 'utf8');
+  if (!ly.includes('\\midi')) {
+    ly = ly.replace(/\\layout\s*\{[^}]*\}/, m => m + '\n  \\midi { \\tempo 4 = 120 }');
+    if (!ly.includes('\\midi')) {
+      ly = ly.replace(/(\\\s*score\s*\{)([\s\S]*?)(\}\s*)$/, (_, open, body, close) =>
+        open + body + '  \\midi { \\tempo 4 = 120 }\n' + close);
+    }
+    fs.writeFileSync(lyFile, ly, 'utf8');
+  }
+  return lyFile;
+}
+
+const LILYPOND_PYTHON_DIR = '/usr/share/lilypond/2.24.4/python';
+
+/**
+ * Write a patched midi.py into workDir and a thin wrapper script.
+ * midi2ly does sys.path.insert(0, lilypond_python_dir) which overrides PYTHONPATH,
+ * so we pre-load our patched midi into sys.modules before exec'ing midi2ly.
+ * midi2ly's own "import midi" then finds sys.modules['midi'] and skips the import.
+ */
+function ensureMidi2lyPatch(workDir: string): void {
+  const patchedMidiPath = path.join(workDir, 'midi.py');
+  const wrapperPath     = path.join(workDir, 'midi2ly_wrapper.py');
+  if (fs.existsSync(wrapperPath)) return;
+
+  // Read original midi.py and patch _read_string to tolerate truncated SysEx.
+  const originalMidi = fs.readFileSync(path.join(LILYPOND_PYTHON_DIR, 'midi.py'), 'utf8');
+  const patched = originalMidi.replace(
+    /def _read_string\(nextbyte, getbyte\):\n    length = _get_variable_length_number\(nextbyte, getbyte\)\n    return ''.join\(chr\(getbyte\(\)\) for i in range\(length\)\)/,
+    [
+      'def _read_string(nextbyte, getbyte):',
+      '    length = _get_variable_length_number(nextbyte, getbyte)',
+      '    out = []',
+      '    for _ in range(length):',
+      '        try:',
+      '            out.append(chr(getbyte()))',
+      '        except (StopIteration, RuntimeError):',
+      '            break',
+      '    return \'\'.join(out)',
+    ].join('\n'),
+  );
+  fs.writeFileSync(patchedMidiPath, patched, 'utf8');
+
+  // Wrapper: pre-import patched midi, then exec the real midi2ly
+  const wrapper = [
+    'import sys, os',
+    `sys.path.insert(0, ${JSON.stringify(workDir)})`,
+    'import midi  # loads patched version into sys.modules',
+    '# exec real midi2ly — its own "import midi" finds sys.modules cache',
+    `with open(${JSON.stringify(MIDI2LY_BIN)}) as _f:`,
+    `    exec(compile(_f.read(), ${JSON.stringify(MIDI2LY_BIN)}, 'exec'),`,
+    `         {'__file__': ${JSON.stringify(MIDI2LY_BIN)}, '__name__': '__main__'})`,
+  ].join('\n');
+  fs.writeFileSync(wrapperPath, wrapper, 'utf8');
+}
+
+/** Convert a MIDI file to LilyPond via midi2ly (with SysEx-tolerant patch). */
+function midiToLilypond(midiPath: string, workDir: string): string {
+  const lyFile = path.join(workDir, 'input.ly');
+  ensureMidi2lyPatch(workDir);
+  const wrapperPath = path.join(workDir, 'midi2ly_wrapper.py');
+  const result = spawnSync('python3', [wrapperPath, midiPath, '-o', lyFile], {
+    cwd: workDir, timeout: 15_000, encoding: 'utf8',
+  });
+  if (result.status !== 0) throw new Error(`midi2ly failed: ${result.stderr || result.stdout}`);
+  if (!fs.existsSync(lyFile)) throw new Error('midi2ly produced no output file');
+
+  // Fix old version string that midi2ly emits (2.14.0 → 2.24.0)
+  let ly = fs.readFileSync(lyFile, 'utf8');
+  ly = ly.replace(/\\version\s+"[^"]*"/, '\\version "2.24.0"');
+  // Remove bar check assertions ("| % N") that midi2ly emits — these fail on
+  // irregular time signatures. Keep the comment but drop the assertion.
+  ly = ly.replace(/\|\s*(%\s*\d+)/g, '$1');
+
+  // Compact rendering: staff size 10, tight margins, and compressed note spacing.
+  // Remove any \paper block midi2ly may have emitted, then inject our own.
+  ly = ly.replace(/\\paper\s*\{[^}]*\}/s, '');
+
+  // Count staves to decide spacing strategy.
+  const trackCount = (ly.match(/^track[A-Z] = <</gm) || []).length;
+  const isMultiStaff = trackCount > 2;
+
+  const compactBlock = [
+    `#(set-global-staff-size ${isMultiStaff ? 10 : 12})`,
+    '\\paper {',
+    '  left-margin   = 0.5\\cm',
+    '  right-margin  = 0.5\\cm',
+    '  top-margin    = 0.5\\cm',
+    '  bottom-margin = 0.5\\cm',
+    '  ragged-last-bottom = ##f',
+    '  system-system-spacing =',
+    '    #\'((basic-distance . 8) (minimum-distance . 4) (padding . 1) (stretchability . 60))',
+      '}',
+    '% compress horizontal note spacing',
+    '\\layout {',
+    '  \\context {',
+    '    \\Score',
+    '    \\override SpacingSpanner.base-shortest-duration =',
+    '      #(ly:make-moment 1/32)',
+    '    \\override SpacingSpanner.shortest-duration-space = #0.6',
+    '  }',
+    '}',
+  ].join('\n');
+  ly = ly.replace(/(\\version\s+"[^"]*")/, `$1\n${compactBlock}`);
+
+  // Limit voices per track to 4 — more than 4 causes overlapping noteheads.
+  ly = ly.replace(/^(track[A-Z] = <<\n)([\s\S]*?)^(>>)/gm, (match, open, inner, close) => {
+    const voiceLines = inner.split('\n').filter((l: string) => /^\s+\\context Voice/.test(l));
+    if (voiceLines.length <= 4) return match;
+    return `${open}${voiceLines.slice(0, 4).join('\n')}\n${close}`;
+  });
+
+  // Add layout block if missing
+  if (!ly.includes('\\layout')) {
+    ly += '\n\\score {\n  \\new Staff { \\unfoldRepeats \\midi {} }\n  \\layout {}\n}\n';
+  }
+  fs.writeFileSync(lyFile, ly, 'utf8');
+  return lyFile;
+}
+
+/** Collect all SVG page files produced by LilyPond in workDir. */
+function collectSvgPages(workDir: string): string[] {
+  const previewSvg = path.join(workDir, 'output.preview.svg');
+  if (fs.existsSync(previewSvg)) return [previewSvg];
+
+  const fullSvg = path.join(workDir, 'output.svg');
+  if (fs.existsSync(fullSvg)) return [fullSvg];
+
+  // Multi-page: output-1.svg, output-2.svg, ...
+  const pages: string[] = [];
+  for (let i = 1; ; i++) {
+    const p = path.join(workDir, `output-${i}.svg`);
+    if (!fs.existsSync(p)) break;
+    pages.push(p);
+  }
+  return pages;
+}
+
+/** Run LilyPond: SVG + PDF + MIDI.
+ *  preview=true  → -dpreview --svg (compact single-page crop for short ABC/LilyPond)
+ *  preview=false → --svg (all pages, for MIDI or long scores)
+ */
+function runLilypond(lyFile: string, workDir: string, preview = true): { svg: string; pages: string[]; pdf: string | null; midi: string | null } {
+  const svgArgs = preview
+    ? ['-dpreview', '--svg', '-o', 'output', lyFile]
+    : ['--svg', '-o', 'output', lyFile];
+  const r1 = spawnSync(LILYPOND_BIN, svgArgs, {
+    cwd: workDir, timeout: 60_000, encoding: 'utf8',
+  });
+
+  // Collect SVG pages regardless of exit status — LilyPond often exits 1 on
+  // warnings (e.g. barcheck) but still writes complete output files.
+  const pages = collectSvgPages(workDir);
+  if (pages.length === 0) {
+    throw new Error(`LilyPond (svg) failed: ${(r1.stderr || r1.stdout || '').slice(0, 2000)}`);
+  }
+
+  // Pass 2: PDF
+  spawnSync(LILYPOND_BIN, ['--pdf', '-o', 'output', lyFile], {
+    cwd: workDir, timeout: 60_000, encoding: 'utf8',
+  });
+  // PDF failure is non-fatal
+
+  const pdfPath  = path.join(workDir, 'output.pdf');
+  const midiPath = path.join(workDir, 'output.midi');
+
+  return {
+    svg:   pages[0],
+    pages,
+    pdf:   fs.existsSync(pdfPath)  ? pdfPath  : null,
+    midi:  fs.existsSync(midiPath) ? midiPath : null,
+  };
+}
+
+/** Render ABC or LilyPond source → SVG + PDF + MIDI. */
+export function renderMusic(source: string): RenderResult {
+  ensureRenderDir();
+
+  const id      = crypto.createHash('sha1').update(source).digest('hex').slice(0, 12);
+  const workDir = path.join(RENDER_DIR, id);
+
+  const cached = collectSvgPages(workDir);
+  if (cached.length > 0) {
+    const pdfOut  = path.join(workDir, 'output.pdf');
+    const midiOut = path.join(workDir, 'output.midi');
+    return {
+      id,
+      svgPath:  cached[0],
+      svgPages: cached,
+      pdfPath:  fs.existsSync(pdfOut)  ? pdfOut  : null,
+      midiPath: fs.existsSync(midiOut) ? midiOut : null,
+    };
+  }
+
+  fs.mkdirSync(workDir, { recursive: true });
+
+  const fmt = detectFormat(source);
+  const lyFile = fmt === 'abc'
+    ? abcToLilypond(source, workDir)
+    : (() => { const f = path.join(workDir, 'input.ly'); fs.writeFileSync(f, wrapLilypond(source), 'utf8'); return f; })();
+
+  const { svg, pages, pdf, midi } = runLilypond(lyFile, workDir);
+  return { id, svgPath: svg, svgPages: pages, pdfPath: pdf, midiPath: midi };
+}
+
+/** Render a MIDI file → SVG + PDF (no MIDI output). */
+export function renderMidi(midiFilePath: string): RenderResult {
+  ensureRenderDir();
+
+  const content = fs.readFileSync(midiFilePath);
+  const id      = crypto.createHash('sha1').update(content).digest('hex').slice(0, 12);
+  const workDir = path.join(RENDER_DIR, 'midi-' + id);
+
+  const cached = collectSvgPages(workDir);
+  if (cached.length > 0) {
+    const pdfOut      = path.join(workDir, 'output.pdf');
+    const originalOut = path.join(workDir, 'original.midi');
+    const midiOut     = path.join(workDir, 'output.midi');
+    return {
+      id: 'midi-' + id,
+      svgPath:  cached[0],
+      svgPages: cached,
+      pdfPath:  fs.existsSync(pdfOut)      ? pdfOut      : null,
+      midiPath: fs.existsSync(originalOut) ? originalOut :
+                fs.existsSync(midiOut)     ? midiOut     : midiFilePath,
+    };
+  }
+
+  fs.mkdirSync(workDir, { recursive: true });
+  // Save original MIDI as original.midi — LilyPond overwrites output.midi during SVG render
+  const originalMidi = path.join(workDir, 'original.midi');
+  const midiCopy     = path.join(workDir, 'output.midi');
+  fs.copyFileSync(midiFilePath, originalMidi);
+  fs.copyFileSync(midiFilePath, midiCopy);
+  const lyFile = midiToLilypond(midiCopy, workDir);
+  const { svg, pages, pdf } = runLilypond(lyFile, workDir, false);
+
+  return { id: 'midi-' + id, svgPath: svg, svgPages: pages, pdfPath: pdf, midiPath: originalMidi };
+}
+
+/** Serve a specific SVG page (1-indexed). */
+export function getRenderPageFile(id: string, page: number): string | null {
+  const workDir = path.join(RENDER_DIR, id);
+  // Multi-page output
+  const paged = path.join(workDir, `output-${page}.svg`);
+  if (fs.existsSync(paged)) return paged;
+  // Single-page: only valid for page 1
+  if (page === 1) return getRenderFile(id, 'svg');
+  return null;
+}
+
+/** Serve a rendered file. ext: 'svg' | 'midi' | 'pdf' */
+export function getRenderFile(id: string, ext: 'svg' | 'midi' | 'pdf'): string | null {
+  const workDir = path.join(RENDER_DIR, id);
+  if (ext === 'svg') {
+    const preview = path.join(workDir, 'output.preview.svg');
+    const full    = path.join(workDir, 'output.svg');
+    const page1   = path.join(workDir, 'output-1.svg');
+    if (fs.existsSync(preview)) return preview;
+    if (fs.existsSync(full))    return full;
+    if (fs.existsSync(page1))   return page1;
+    return null;
+  }
+  if (ext === 'midi') {
+    const orig = path.join(workDir, 'original.midi');
+    const out  = path.join(workDir, 'output.midi');
+    if (fs.existsSync(orig)) return orig;
+    if (fs.existsSync(out))  return out;
+    return null;
+  }
+  const filePath = path.join(workDir, `output.${ext}`);
+  return fs.existsSync(filePath) ? filePath : null;
+}
+
+/** Async MIDI → sheet music render with progress callbacks. No timeout. */
+export function renderMidiAsync(
+  midiFilePath: string,
+  onProgress: (msg: string) => void,
+  onDone: (result: RenderResult) => void,
+  onError: (err: Error) => void,
+): void {
+  ensureRenderDir();
+
+  let content: Buffer;
+  try { content = fs.readFileSync(midiFilePath); }
+  catch (e: any) { onError(e); return; }
+
+  const id      = crypto.createHash('sha1').update(content).digest('hex').slice(0, 12);
+  const workDir = path.join(RENDER_DIR, 'midi-' + id);
+
+  // Cache hit
+  const cached = collectSvgPages(workDir);
+  if (cached.length > 0) {
+    const pdfOut  = path.join(workDir, 'output.pdf');
+    const midiOut = path.join(workDir, 'output.midi');
+    onProgress('캐시에서 불러오는 중...');
+    onDone({
+      id: 'midi-' + id,
+      svgPath:  cached[0],
+      svgPages: cached,
+      pdfPath:  fs.existsSync(pdfOut)  ? pdfOut  : null,
+      midiPath: fs.existsSync(midiOut) ? midiOut : midiFilePath,
+    });
+    return;
+  }
+
+  fs.mkdirSync(workDir, { recursive: true });
+  // Save original as original.midi — LilyPond overwrites output.midi during SVG render
+  const originalMidi = path.join(workDir, 'original.midi');
+  const midiCopy     = path.join(workDir, 'output.midi');
+  try {
+    fs.copyFileSync(midiFilePath, originalMidi);
+    fs.copyFileSync(midiFilePath, midiCopy);
+  } catch (e: any) { onError(e); return; }
+
+  // Step 1: midi2ly (sync, fast — typically <2s)
+  let lyFile: string;
+  try {
+    onProgress('MIDI 파싱 중...');
+    lyFile = midiToLilypond(midiCopy, workDir);
+  } catch (e: any) { onError(e); return; }
+
+  // Step 2: LilyPond SVG async — no timeout
+  onProgress('악보 렌더링 시작...');
+  const proc = spawn(LILYPOND_BIN, ['--svg', '-o', 'output', lyFile], { cwd: workDir });
+
+  let totalPages = 0;
+  let stderrBuf  = '';
+  let lastSvgCount = 0;
+
+  // Poll filesystem every 2s to report SVG page generation progress
+  const svgPoll = setInterval(() => {
+    const n = collectSvgPages(workDir).length;
+    if (n > 0 && n !== lastSvgCount) {
+      lastSvgCount = n;
+      const label = totalPages > 0 ? `${n} / ${totalPages}페이지` : `${n}페이지`;
+      onProgress(`악보 생성 중... ${label}`);
+    }
+  }, 2000);
+
+  proc.stderr.on('data', (chunk: Buffer) => {
+    const text = chunk.toString('utf8');
+    stderrBuf += text;
+
+    const measures = text.match(/\[(\d+)\]/g);
+    if (measures) {
+      const last = measures[measures.length - 1].replace(/[\[\]]/g, '');
+      onProgress(`${last}마디 처리 중...`);
+    }
+    const pageMatch = text.match(/Fitting music on (\d+) pages?/);
+    if (pageMatch) {
+      totalPages = parseInt(pageMatch[1], 10);
+      onProgress(`${totalPages}페이지 레이아웃 중...`);
+    }
+  });
+
+  proc.on('error', (err: Error) => { clearInterval(svgPoll); onError(err); });
+
+  proc.on('close', () => {
+    clearInterval(svgPoll);
+    const pages = collectSvgPages(workDir);
+    if (pages.length === 0) {
+      onError(new Error(`LilyPond SVG 렌더 실패:\n${stderrBuf.slice(0, 1000)}`));
+      return;
+    }
+
+    const pdfOut = path.join(workDir, 'output.pdf');
+    onDone({
+      id: 'midi-' + id,
+      svgPath:  pages[0],
+      svgPages: pages,
+      pdfPath:  fs.existsSync(pdfOut) ? pdfOut : null,
+      midiPath: originalMidi,
+    });
+
+    // PDF fire-and-forget in background
+    if (!fs.existsSync(pdfOut)) {
+      const pdfProc = spawn(LILYPOND_BIN, ['--pdf', '-o', 'output', lyFile], { cwd: workDir });
+      pdfProc.on('error', () => { /* ignore */ });
+    }
+  });
+}
diff --git a/web-ui/index.html b/web-ui/index.html
index 1669030..7b91b2c 100644
--- a/web-ui/index.html
+++ b/web-ui/index.html
@@ -2248,7 +2248,127 @@
   .error-context-detail.visible {
     display: block;
   }
+
+  /* Music widget */
+  .music-widget {
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    overflow: hidden;
+    margin: 10px 0;
+    background: var(--surface);
+  }
+  .music-widget-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: var(--hover);
+    border-bottom: 1px solid var(--line);
+  }
+  .music-widget-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--muted);
+  }
+  .music-render-btn {
+    font-size: 12px;
+    padding: 4px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--brand);
+    background: var(--brand);
+    color: #fff;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .music-render-btn:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .music-widget-body {
+    overflow: hidden;
+    transition: max-height 0.2s ease;
+  }
+  .music-widget-body.collapsed {
+    max-height: 0 !important;
+  }
+  .music-output {
+    padding: 12px;
+  }
+  .music-output img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  midi-player {
+    display: block;
+    width: 100%;
+    max-width: 420px;
+    margin-top: 6px;
+    --player-row-height: 16px;
+    --player-font-size: 11px;
+  }
+  .music-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  .music-dl-btn {
+    font-size: 12px;
+    padding: 4px 12px;
+    border-radius: 8px;
+    border: 1px solid var(--line);
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+    text-decoration: none;
+    font-family: inherit;
+  }
+  .music-dl-btn:hover { background: var(--hover); }
+  .music-page-nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    font-size: 12px;
+    color: var(--muted);
+  }
+  .music-page-btn {
+    padding: 2px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--line);
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.4;
+  }
+  .music-page-btn:disabled { opacity: 0.35; cursor: default; }
+  .music-page-btn:not(:disabled):hover { background: var(--hover); }
+  .midi-router-panel {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-top: 4px;
+    width: 100%;
+  }
+  .midi-router-sel {
+    font-size: 11px;
+    padding: 2px 6px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: var(--surface);
+    color: var(--text);
+    max-width: 200px;
+    flex: 1;
+  }
+  .midi-router-status { font-size: 11px; color: var(--muted); }
 </style>
+<script src="https://cdn.jsdelivr.net/npm/@tonejs/midi@2.0.28/build/Midi.js"></script>
+<script src="https://cdn.jsdelivr.net/combine/npm/tone@14,npm/@magenta/music@1.23.1/es6/core.js,npm/html-midi-player@1.6.0" defer></script>
 </head>
 <body>
 
@@ -2335,6 +2455,12 @@
       <span>Skills</span>
       <button class="sidebar-action" onclick="openCreateSkillModal()">+ Create</button>
     </div>
+    <div id="skills-user-selector" style="display:none;padding:5px 10px 6px;border-bottom:1px solid var(--line);background:var(--panel-2)">
+      <label style="font-size:10px;color:var(--muted);display:block;margin-bottom:3px">대상 유저</label>
+      <select id="skills-target-user" onchange="onSkillsUserChange()" style="width:100%;font-size:12px;padding:3px 6px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:6px">
+        <option value="">글로벌 기본값</option>
+      </select>
+    </div>
     <div id="skills-list" style="flex:1;min-height:0;overflow-y:auto;padding:10px">
       <div class="empty-state" style="padding:16px">스킬 로딩 중...</div>
     </div>
@@ -2381,6 +2507,12 @@
           <input type="checkbox" id="tts-mode-toggle" onchange="updateTTSMode()">
           <span class="toggle-track"></span>
         </label>
+        <span style="color:var(--line);margin:0 6px;user-select:none">|</span>
+        <span class="agent-toggle-label">바로보내기</span>
+        <label class="toggle-switch" title="음성 인식 후 자동 전송">
+          <input type="checkbox" id="mic-autosend-toggle" onchange="updateMicAutosend()">
+          <span class="toggle-track"></span>
+        </label>
         <div class="agent-toggle-right" style="display:flex;align-items:center;gap:6px">
           <button class="quick-mode-btn" id="context-pin-btn" onclick="toggleContextPinMode()" title="메시지를 컨텍스트에 고정">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>
@@ -2429,7 +2561,7 @@
 	      <!-- 첨부 파일 카드 영역 (전송 전 표시) -->
       <div id="staged-attachments" style="display:none;flex-wrap:wrap;gap:8px;padding:8px 12px 0;border-top:1px solid var(--line)"></div>
       <div class="chat-input-row">
-        <input type="file" id="file-upload" accept="image/*,.pdf,.txt,.md,.csv,.xlsx,.xls,.docx,.pptx" style="display:none" onchange="handleFileUpload(this)" />
+        <input type="file" id="file-upload" accept="image/*,.pdf,.txt,.md,.csv,.xlsx,.xls,.docx,.pptx,.mid,.midi" style="display:none" onchange="handleFileUpload(this)" />
         <button class="send-btn" onclick="document.getElementById('file-upload').click()" title="파일 첨부 (이미지·PDF·Excel·txt 등)" style="font-size:18px;width:44px;height:44px" aria-label="파일 첨부">📎</button>
         <button class="send-btn" id="mic-btn" onclick="toggleMicRecording()" title="음성 입력 (클릭: 시작/중지)" style="font-size:18px;width:44px;height:44px" aria-label="음성 입력">🎤</button>
         <textarea
@@ -3123,6 +3255,7 @@
           <option value="lm_studio">LM Studio (로컬)</option>
           <option value="openai">OpenAI — API 키</option>
           <option value="openai_codex">OpenAI — GPT Plus / Codex (OAuth)</option>
+          <option value="anthropic">Anthropic — Claude API 키</option>
         </select>
       </div>
 
@@ -3196,6 +3329,23 @@
             <div id="provider-status-msg-openai" style="font-size:11px;color:var(--muted);margin-top:6px"></div>
           </div>
 
+          <!-- Anthropic -->
+          <div id="prov-fields-anthropic" style="display:none">
+            <div class="right-section-title" style="margin-bottom:8px">Anthropic API 키</div>
+            <label style="display:block;font-size:12px;color:var(--muted);margin-bottom:6px">API 키</label>
+            <input id="settings-anthropic-key" type="password" placeholder="sk-ant-api03-..." style="width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px;font-family:'IBM Plex Mono',monospace" />
+            <label style="display:block;font-size:12px;color:var(--muted);margin:10px 0 6px">모델</label>
+            <select id="settings-anthropic-model" class="settings-input" style="font-size:13px">
+              <option value="claude-sonnet-4-6">claude-sonnet-4-6 (권장)</option>
+              <option value="claude-opus-4-7">claude-opus-4-7</option>
+              <option value="claude-haiku-4-5-20251001">claude-haiku-4-5-20251001 (빠름)</option>
+            </select>
+            <div style="display:flex;gap:8px;margin-top:8px">
+              <button class="btn btn-sm" onclick="testProviderConnection()" style="background:#fff;border:1px solid var(--line);color:var(--text)">연결 테스트</button>
+            </div>
+            <div id="provider-status-msg-anthropic" style="font-size:11px;color:var(--muted);margin-top:6px"></div>
+          </div>
+
           <!-- OpenAI Codex OAuth -->
           <div id="prov-fields-openai_codex" style="display:none">
             <div class="right-section-title" style="margin-bottom:8px">OpenAI — GPT Plus / Codex</div>
@@ -3954,6 +4104,7 @@ let currentUser = null;
 setAgentSessionId(generateSessionId()); // always fresh session on page load
 checkAuth(); // Check authentication on page load
 initTTSToggle();
+initMicAutosendToggle();
 
 // ── Server log panel ──────────────────────────────────────────────────────────
 let logScrollLocked = true;
@@ -4461,7 +4612,7 @@ function setSidebarTab(tab) {
   document.getElementById('tab-skills').classList.toggle('active', tab === 'skills');
   document.getElementById('sidebar-jobs').style.display = tab === 'jobs' ? 'flex' : 'none';
   document.getElementById('sidebar-skills').style.display = tab === 'skills' ? 'flex' : 'none';
-  if (tab === 'skills') loadInstalledSkills();
+  if (tab === 'skills') { initSkillsUserSelector(); loadInstalledSkills(); }
 }
 
 // ---- Agent mode toggle ----
@@ -4754,6 +4905,9 @@ function renderChatMessages() {
     // Also show green for confirmed pins even outside pin mode
     const confirmedClass = (!contextPinMode && confirmedPins.some(p => p.content === msg.content && p.role === (msg.role === 'user' ? 'user' : 'assistant'))) ? ' pin-selected' : '';
     const clickHandler = contextPinMode ? ` onclick="togglePinMessage(${idx})"` : '';
+    if (msg.role === 'widget') {
+      return `<div class="msg widget${pinClass}${selectedClass}${confirmedClass}"${clickHandler}><div class="msg-content">${msg.content}</div></div>`;
+    }
     return `
     <div class="msg ${msg.role}${pinClass}${selectedClass}${confirmedClass}"${clickHandler}>
       <div class="msg-avatar">${msg.role === 'user' ? 'U' : '<img src="cherry_logo.png" style="width:48px;height:48px;border-radius:6px">'}</div>
@@ -6267,7 +6421,7 @@ function toggleCredVis(inputId, btn) {
 
 // --- Provider-aware Model Settings ------------------------------------------
 
-const PROVIDER_IDS = ['ollama', 'llama_cpp', 'lm_studio', 'openai', 'openai_codex'];
+const PROVIDER_IDS = ['ollama', 'llama_cpp', 'lm_studio', 'openai', 'openai_codex', 'anthropic'];
 
 function onProviderChange() {
   const provider = document.getElementById('settings-llm-provider').value;
@@ -6307,6 +6461,8 @@ async function loadModelSettings() {
     v('settings-lmstudio-endpoint', pc.lm_studio?.endpoint);
     v('settings-lmstudio-model',    pc.lm_studio?.model);
     v('settings-openai-key',        pc.openai?.api_key);
+    v('settings-anthropic-key',     pc.anthropic?.api_key);
+    if (pc.anthropic?.model) { const s = document.getElementById('settings-anthropic-model'); if (s) s.value = pc.anthropic.model; }
 
     // Set primary model from saved config before refreshing the list
     const savedPrimaryModel = pc[prov]?.model || '';
@@ -6358,7 +6514,7 @@ async function refreshProviderModels() {
 
 async function testProviderConnection() {
   const provider = document.getElementById('settings-llm-provider').value;
-  const statusIds = { ollama: 'provider-status-msg', llama_cpp: 'provider-status-msg-llamacpp', lm_studio: 'provider-status-msg-lmstudio', openai: 'provider-status-msg-openai', openai_codex: 'codex-oauth-status' };
+  const statusIds = { ollama: 'provider-status-msg', llama_cpp: 'provider-status-msg-llamacpp', lm_studio: 'provider-status-msg-lmstudio', openai: 'provider-status-msg-openai', openai_codex: 'codex-oauth-status', anthropic: 'provider-status-msg-anthropic' };
   const msgId = statusIds[provider] || 'provider-status-msg';
   const msg = document.getElementById(msgId);
   if (msg) msg.textContent = '테스트 중…';
@@ -6423,6 +6579,7 @@ function buildProviderPayload() {
   providers.lm_studio = { endpoint: document.getElementById('settings-lmstudio-endpoint')?.value || 'http://localhost:1234',  model: document.getElementById('settings-lmstudio-model')?.value   || '' };
   providers.openai    = { api_key:  document.getElementById('settings-openai-key')?.value         || '',                       model: document.getElementById('settings-openai-model')?.value      || 'gpt-4o' };
   providers.openai_codex = { model: document.getElementById('settings-codex-model')?.value         || 'gpt-5.3-codex' };
+  providers.anthropic    = { api_key: document.getElementById('settings-anthropic-key')?.value      || '', model: document.getElementById('settings-anthropic-model')?.value || 'claude-sonnet-4-6' };
   return { provider, providers };
 }
 
@@ -8843,6 +9000,17 @@ function initLuckyModalInteraction() {
 // ── Voice: STT (Web Speech API — Chrome 내장 Google STT) ────────────────
 var _speechRecog = null;
 var _isRecording = false;
+var _micAutosend = localStorage.getItem('micAutosend') !== 'false'; // default on
+
+function updateMicAutosend() {
+  _micAutosend = document.getElementById('mic-autosend-toggle').checked;
+  localStorage.setItem('micAutosend', String(_micAutosend));
+}
+
+function initMicAutosendToggle() {
+  var toggle = document.getElementById('mic-autosend-toggle');
+  if (toggle) toggle.checked = _micAutosend;
+}
 
 function toggleMicRecording() {
   if (_isRecording) stopMicRecording();
@@ -8874,7 +9042,7 @@ function startMicRecording() {
       input.value = (input.value ? input.value + ' ' : '') + transcript;
       input.focus();
       input.dispatchEvent(new Event('input'));
-      setTimeout(function() { handleSendStop(); }, 50);
+      if (_micAutosend) setTimeout(function() { handleSendStop(); }, 50);
     }
   };
   _speechRecog.onerror = function(e) {
@@ -9055,7 +9223,26 @@ function renderMarkdown(text, opts) {
 
   // Code blocks (``` ... ```)
   html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function(_, lang, code) {
-    return '<pre class="md-code-block"><code>' + code.trim() + '</code></pre>';
+    var trimmed = code.trim();
+    if (lang === 'abc' || lang === 'lilypond') {
+      var encoded = encodeURIComponent(trimmed);
+      var widgetId = 'music-' + Math.random().toString(36).slice(2, 9);
+      return '<div class="music-widget" id="' + widgetId + '">' +
+        '<div class="music-widget-header">' +
+          '<span class="music-widget-label">🎵 ' + (lang === 'abc' ? 'ABC Notation' : 'LilyPond') + '</span>' +
+          '<div style="display:flex;gap:6px;align-items:center">' +
+            '<button class="music-render-btn" onclick="renderMusicBlock(\'' + widgetId + '\', decodeURIComponent(\'' + encoded + '\'))">악보 렌더링</button>' +
+            '<button onclick="toggleMusicWidget(\'' + widgetId + '\')" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:2px 4px" title="접기/펼치기">▾</button>' +
+            '<button onclick="closeMusicWidget(\'' + widgetId + '\')" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:2px 4px" title="닫기">✕</button>' +
+          '</div>' +
+        '</div>' +
+        '<div class="music-widget-body">' +
+          '<pre class="md-code-block music-source" style="margin:0;border-radius:0;border:none;border-bottom:1px solid var(--line);max-height:120px;overflow-y:auto;font-size:11px"><code>' + escHtml(trimmed) + '</code></pre>' +
+          '<div class="music-output" style="display:none"></div>' +
+        '</div>' +
+      '</div>';
+    }
+    return '<pre class="md-code-block"><code>' + trimmed + '</code></pre>';
   });
 
   // Inline code
@@ -9088,6 +9275,376 @@ function renderMarkdown(text, opts) {
   return html;
 }
 
+function toggleMusicWidget(widgetId) {
+  var widget = document.getElementById(widgetId);
+  if (!widget) return;
+  // widgetId may point to either .music-widget or .music-widget-body
+  var body = widget.classList.contains('music-widget-body')
+    ? widget
+    : widget.querySelector('.music-widget-body');
+  var btn  = widget.classList.contains('music-widget-body')
+    ? widget.closest('.music-widget')?.querySelector('[title="접기/펼치기"]')
+    : widget.querySelector('[title="접기/펼치기"]');
+  if (!body) return;
+  var collapsed = body.classList.toggle('collapsed');
+  if (btn) btn.textContent = collapsed ? '▸' : '▾';
+}
+
+function closeMusicWidget(widgetId) {
+  var el = document.getElementById(widgetId);
+  if (!el) return;
+  var widget = el.closest('.music-widget') || el;
+  widget.remove();
+}
+
+// ── Web MIDI router ──────────────────────────────────────────────────────────
+const midiRouter = {
+  access: null,
+  timers: [],
+  isPlaying: false,
+
+  stop() {
+    this.timers.forEach(t => clearTimeout(t));
+    this.timers = [];
+    this.isPlaying = false;
+    if (this.access) {
+      this.access.outputs.forEach(out => {
+        for (let ch = 0; ch < 16; ch++) {
+          try { out.send([0xB0 | ch, 123, 0]); } catch {}  // All Notes Off
+          try { out.send([0xB0 | ch, 121, 0]); } catch {}  // Reset All Controllers
+        }
+      });
+    }
+  },
+
+  // Parse raw MIDI bytes → scheduled events list
+  // Returns [{timeMs, msg:[...bytes]}, ...]
+  _parseMidiRaw(buf) {
+    const u8  = new Uint8Array(buf);
+    const dv  = new DataView(buf);
+    if (dv.getUint32(0) !== 0x4D546864) return [];   // not MThd
+    const tpq   = dv.getUint16(12);
+    const ntrk  = dv.getUint16(10);
+    let tempo   = 500000;
+    const events = [];
+
+    const readVarLen = (pos) => {
+      let val = 0, b;
+      do { b = u8[pos++]; val = (val << 7) | (b & 0x7F); } while (b & 0x80);
+      return { val, pos };
+    };
+    const ticksToMs = (ticks) => (ticks / tpq) * (tempo / 1000);
+
+    let p = 14;
+    for (let t = 0; t < ntrk; t++) {
+      if (p + 8 > u8.length || dv.getUint32(p) !== 0x4D54726B) break;
+      const tlen = dv.getUint32(p + 4);
+      p += 8;
+      const end = p + tlen;
+      let tick = 0, rs = 0;
+      while (p < end) {
+        const dl = readVarLen(p); p = dl.pos; tick += dl.val;
+        let b = u8[p];
+        if (b & 0x80) { rs = b; p++; } else { b = rs; }
+        const typ = b & 0xF0, ch = b & 0x0F;
+        const ms  = ticksToMs(tick);
+        if (typ === 0x90 || typ === 0x80) {
+          const note = u8[p++], vel = u8[p++];
+          events.push({ ms, msg: [typ | ch, note, vel] });
+        } else if (typ === 0xA0 || typ === 0xB0 || typ === 0xE0) {
+          events.push({ ms, msg: [b, u8[p], u8[p+1]] }); p += 2;
+        } else if (typ === 0xC0) {
+          events.push({ ms, msg: [0xC0 | ch, u8[p++]] });
+        } else if (typ === 0xD0) {
+          events.push({ ms, msg: [b, u8[p++]] });
+        } else if (b === 0xFF) {
+          const mt = u8[p++];
+          const ll = readVarLen(p); p = ll.pos;
+          if (mt === 0x51 && ll.val >= 3) {
+            // Tempo change: recalculate from current tick
+            tempo = (u8[p] << 16) | (u8[p+1] << 8) | u8[p+2];
+          }
+          p += ll.val;
+        } else if (b === 0xF0 || b === 0xF7) {
+          const ll = readVarLen(p); p = ll.pos + ll.val;
+        } else { p++; }
+      }
+      p = end;
+    }
+    events.sort((a, b) => a.ms - b.ms);
+    return events;
+  },
+
+  async play(midiUrl, outputId, onStatus) {
+    this.stop();
+    const output = this.access.outputs.get(outputId);
+    if (!output) throw new Error('기기를 찾을 수 없습니다');
+
+    if (onStatus) onStatus('로딩 중...');
+    const resp = await fetch(midiUrl);
+    const buf  = await resp.arrayBuffer();
+
+    // Parse raw MIDI for exact Program Change + all events
+    const events = this._parseMidiRaw(buf);
+    if (!events.length) throw new Error('MIDI 파싱 실패');
+
+    // GM Reset SysEx → 신디를 GM 모드로 초기화
+    try { output.send(new Uint8Array([0xF0, 0x7E, 0x7F, 0x09, 0x01, 0xF7])); } catch {}
+
+    // Send all PC + Bank Select (CC#0=0, CC#32=0) events upfront
+    const initPc = new Set();
+    events.forEach(ev => {
+      if ((ev.msg[0] & 0xF0) === 0xC0 && !initPc.has(ev.msg[0] & 0x0F)) {
+        initPc.add(ev.msg[0] & 0x0F);
+        const ch = ev.msg[0] & 0x0F;
+        try { output.send(new Uint8Array([0xB0 | ch, 0,  0])); } catch {}  // Bank Select MSB=0
+        try { output.send(new Uint8Array([0xB0 | ch, 32, 0])); } catch {}  // Bank Select LSB=0
+        try { output.send(new Uint8Array(ev.msg)); } catch {}
+      }
+    });
+
+    const NOTE_DELAY = 200;  // ms — give synth time to process GM reset + PCs
+    const totalMs = events[events.length - 1].ms + NOTE_DELAY + 500;
+    this.isPlaying = true;
+    if (onStatus) onStatus('재생 중...');
+
+    events.forEach(ev => {
+      this.timers.push(setTimeout(() => {
+        if (!this.isPlaying) return;
+        try { output.send(new Uint8Array(ev.msg)); } catch {}
+      }, ev.ms + NOTE_DELAY));
+    });
+
+    this.timers.push(setTimeout(() => {
+      this.isPlaying = false;
+      if (onStatus) onStatus('완료');
+    }, totalMs));
+  }
+};
+
+async function midiRouterToggle(routerId, btnId) {
+  const panel = document.getElementById(routerId);
+  if (!panel) { alert('패널을 찾을 수 없습니다: ' + routerId); return; }
+  const isHidden = panel.style.display === 'none' || panel.style.display === '';
+  if (isHidden) {
+    panel.style.display = 'flex';
+    panel.style.flexWrap = 'wrap';
+    panel.style.gap = '6px';
+    panel.style.alignItems = 'center';
+    const sel = document.getElementById(routerId + '-sel');
+    const st  = document.getElementById(routerId + '-st');
+    try {
+      if (!navigator.requestMIDIAccess) throw new Error('Web MIDI 미지원 — Chrome/Edge 필요');
+      if (!midiRouter.access) {
+        midiRouter.access = await navigator.requestMIDIAccess();
+      }
+      if (sel) {
+        sel.innerHTML = '<option value="">-- MIDI 기기 선택 --</option>';
+        midiRouter.access.outputs.forEach((out, id) => {
+          const opt = document.createElement('option');
+          opt.value = id; opt.textContent = out.name; sel.appendChild(opt);
+        });
+        if (sel.options.length <= 1 && st) st.textContent = 'MIDI 출력 기기 없음';
+      }
+    } catch (e) {
+      if (st) st.textContent = '오류: ' + e.message;
+    }
+  } else {
+    panel.style.display = 'none';
+    midiRouter.stop();
+  }
+}
+
+async function midiRouterPlay(routerId, midiUrl) {
+  const sel = document.getElementById(routerId + '-sel');
+  const st  = document.getElementById(routerId + '-st');
+  const outputId = sel ? sel.value : '';
+  if (!outputId) { if (st) st.textContent = '기기를 선택하세요'; return; }
+  try {
+    await midiRouter.play(midiUrl, outputId, msg => { if (st) st.textContent = msg; });
+  } catch (e) { if (st) st.textContent = '오류: ' + e.message; }
+}
+
+function midiRouterStop(routerId) {
+  midiRouter.stop();
+  const st = document.getElementById(routerId + '-st');
+  if (st) st.textContent = '정지';
+}
+
+function buildMusicActions(data, downloadName) {
+  var midiUrl = data.midi_url;
+  var pdfUrl  = data.pdf_url;
+  var rid = 'mr-' + Math.random().toString(36).slice(2, 10);
+  var html = '<div class="music-actions">';
+  if (midiUrl) {
+    html += '<div class="midi-router-panel" id="' + rid + '" style="display:none;margin-bottom:4px">'
+      + '<select class="midi-router-sel" id="' + rid + '-sel" style="font-size:11px;padding:2px 6px;border:1px solid var(--line);border-radius:6px"><option value="">-- MIDI 기기 선택 --</option></select>'
+      + '<button class="music-page-btn" onclick="midiRouterPlay(\'' + rid + '\',\'' + midiUrl + '\')">▶</button>'
+      + '<button class="music-page-btn" onclick="midiRouterStop(\'' + rid + '\')">■</button>'
+      + '<span style="font-size:11px;color:var(--muted)" id="' + rid + '-st"></span>'
+      + '</div>';
+    html += '<button class="music-dl-btn" id="' + rid + '-btn" onclick="midiRouterToggle(\'' + rid + '\',\'' + rid + '-btn\')">🎛 외부 신디</button>';
+    html += '<button class="music-dl-btn" onclick="window.open(\'/midi-editor.html?url=\'+encodeURIComponent(\'' + midiUrl + '\'),\'_blank\')">✏ 편집</button>';
+    html += '<a class="music-dl-btn" href="' + midiUrl + '" download="' + escHtml(downloadName || 'score.midi') + '">⬇ MIDI</a>';
+  }
+  if (pdfUrl) html += '<a class="music-dl-btn" href="' + pdfUrl + '" download="score.pdf">⬇ PDF</a>';
+  html += '</div>';
+  return html;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+
+function buildSvgPagesHtml(data) {
+  var pages = data.page_count || 1;
+  var baseId = data.id;
+  // Use a random suffix so duplicate renders in chat history never share the same navId
+  var navId  = 'music-nav-' + Math.random().toString(36).slice(2, 10);
+  var src1   = pages === 1 ? data.svg_url : '/api/music/file/' + baseId + '/svg/1';
+
+  var nav = '';
+  if (pages > 1) {
+    nav = '<div class="music-page-nav" id="' + navId + '" data-page="1" data-total="' + pages + '" data-id="' + baseId + '">' +
+      '<button class="music-page-btn" onclick="musicPageNav(\'' + navId + '\',-1)" id="' + navId + '-prev" disabled>◀</button>' +
+      '<span id="' + navId + '-label">1 / ' + pages + '</span>' +
+      '<button class="music-page-btn" onclick="musicPageNav(\'' + navId + '\',1)" id="' + navId + '-next"' + (pages <= 1 ? ' disabled' : '') + '>▶</button>' +
+      '</div>';
+  }
+  return nav + '<img id="' + navId + '-img" src="' + src1 + '" alt="악보" style="width:100%;height:auto;background:#fff;border-radius:8px;padding:8px;display:block" />';
+}
+
+function musicPageNav(navId, delta) {
+  var nav   = document.getElementById(navId);
+  if (!nav) return;
+  var cur   = parseInt(nav.dataset.page, 10);
+  var total = parseInt(nav.dataset.total, 10);
+  var next  = cur + delta;
+  if (next < 1 || next > total) return;
+  nav.dataset.page = String(next);
+  var baseId = nav.dataset.id;
+  var img  = document.getElementById(navId + '-img');
+  var lbl  = document.getElementById(navId + '-label');
+  var prev = document.getElementById(navId + '-prev');
+  var nxt  = document.getElementById(navId + '-next');
+  var url  = '/api/music/file/' + baseId + '/svg/' + next;
+  if (img) img.src = url;
+  if (lbl) lbl.textContent = next + ' / ' + total;
+  if (prev) prev.disabled = next <= 1;
+  if (nxt)  nxt.disabled  = next >= total;
+}
+
+async function renderMusicBlock(widgetId, source) {
+  var widget = document.getElementById(widgetId);
+  if (!widget) return;
+  var btn = widget.querySelector('.music-render-btn');
+  var output = widget.querySelector('.music-output');
+  if (btn) { btn.disabled = true; btn.textContent = '렌더링 중…'; }
+  try {
+    var data = await api('/api/music/render', {
+      method: 'POST',
+      body: JSON.stringify({ source: source }),
+    });
+    if (data.error) throw new Error(data.error);
+
+    var html = buildSvgPagesHtml(data);
+    html += buildMusicActions(data, 'score.midi');
+
+    if (output) {
+      output.innerHTML = html;
+      output.style.display = 'block';
+      // Update chatHistory so the rendered output survives page reload
+      persistActiveChat();
+    }
+    if (btn) { btn.textContent = '다시 렌더링'; btn.disabled = false; }
+  } catch (e) {
+    if (output) {
+      output.innerHTML = '<span style="color:var(--err);font-size:12px">렌더링 실패: ' + escHtml(e.message) + '</span>';
+      output.style.display = 'block';
+    }
+    if (btn) { btn.textContent = '악보 렌더링'; btn.disabled = false; }
+  }
+}
+
+async function uploadMidiAndRender(file) {
+  var msgId = 'midi-render-' + Date.now();
+  appendChatBubble('system',
+    '<div id="' + msgId + '" style="font-size:13px;color:var(--muted)">' +
+    '🎵 <strong>' + escHtml(file.name) + '</strong> 악보 변환 중...' +
+    '<br><span id="' + msgId + '-prog" style="font-size:11px;opacity:0.7">준비 중...</span>' +
+    '</div>'
+  );
+
+  try {
+    var form = new FormData();
+    form.append('file', file);
+    var resp = await fetch('/api/music/midi', { method: 'POST', headers: authHeaders(), body: form });
+    if (!resp.ok || !resp.body) throw new Error('서버 오류 ' + resp.status);
+
+    var reader = resp.body.getReader();
+    var decoder = new TextDecoder();
+    var buf = '';
+
+    while (true) {
+      var chunk = await reader.read();
+      if (chunk.done) break;
+      buf += decoder.decode(chunk.value, { stream: true });
+
+      var parts = buf.split('\n\n');
+      buf = parts.pop() || '';
+
+      for (var i = 0; i < parts.length; i++) {
+        var part = parts[i];
+        if (!part.startsWith('data: ')) continue;
+        var ev;
+        try { ev = JSON.parse(part.slice(6)); } catch (e) { continue; }
+
+        if (ev.type === 'progress') {
+          var progEl = document.getElementById(msgId + '-prog');
+          if (progEl) progEl.textContent = ev.message;
+
+        } else if (ev.type === 'done') {
+          var wid = msgId + '-widget';
+          var html = '<div class="music-widget" id="' + wid + '">' +
+            '<div class="music-widget-header">' +
+              '<span class="music-widget-label">🎵 ' + escHtml(file.name) + '</span>' +
+              '<div style="display:flex;gap:6px;align-items:center">' +
+                '<button onclick="toggleMusicWidget(\'' + wid + '\')" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:2px 4px" title="접기/펼치기">▾</button>' +
+                '<button onclick="closeMusicWidget(\'' + wid + '\')" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:2px 4px" title="닫기">✕</button>' +
+              '</div>' +
+            '</div>' +
+            '<div class="music-widget-body">' +
+              '<div class="music-output">';
+          if (ev.svg_url) html += buildSvgPagesHtml(ev);
+          html += buildMusicActions(ev, file.name);
+          html += '</div></div></div>';
+
+          var placeholder = document.getElementById(msgId);
+          if (placeholder) placeholder.outerHTML = html;
+
+          // Persist to chatHistory so it survives page reload
+          chatHistory.push({ role: 'widget', content: html });
+          persistActiveChat();
+
+        } else if (ev.type === 'error') {
+          var pl2 = document.getElementById(msgId);
+          if (pl2) pl2.outerHTML = '<span style="color:var(--err);font-size:12px">MIDI 변환 실패: ' + escHtml(ev.message) + '</span>';
+        }
+      }
+    }
+  } catch (e) {
+    var pl3 = document.getElementById(msgId);
+    if (pl3) pl3.outerHTML = '<span style="color:var(--err);font-size:12px">MIDI 변환 실패: ' + escHtml(e.message) + '</span>';
+  }
+}
+
+function appendChatBubble(role, html) {
+  var wrap = document.getElementById('chat-messages');
+  if (!wrap) return;
+  var div = document.createElement('div');
+  div.className = 'msg msg-' + role;
+  div.innerHTML = '<div class="msg-content">' + html + '</div>';
+  wrap.appendChild(div);
+  wrap.scrollTop = wrap.scrollHeight;
+}
+
 function openImageZoom(src) {
   var modal = document.getElementById('image-zoom-modal');
   var img = document.getElementById('image-zoom-img');
@@ -9262,6 +9819,12 @@ function handleFileUpload(input) {
   input.value = '';
   var name = file.name.toLowerCase();
 
+  // MIDI → 악보 변환
+  if (/\.(mid|midi)$/.test(name) || file.type === 'audio/midi' || file.type === 'audio/x-midi') {
+    uploadMidiAndRender(file);
+    return;
+  }
+
   // 이미지
   if (file.type.startsWith('image/')) {
     var imgForm = new FormData();
@@ -9677,11 +10240,44 @@ function openOllamaInfo() { window.open('http://localhost:11434','_blank'); }
 let skillsCache = [];
 let editingSkillId = null;
 
+let skillsTargetUser = ''; // '' = global (admin) or own username (regular user)
+
+async function initSkillsUserSelector() {
+  const selector = document.getElementById('skills-user-selector');
+  if (!selector) return;
+  if (!currentUser) { selector.style.display = 'none'; return; }
+  if (currentUser.role !== 'admin') {
+    selector.style.display = 'none';
+    skillsTargetUser = currentUser.username || '';
+    return;
+  }
+  selector.style.display = 'block';
+  try {
+    const data = await api('/api/users');
+    const sel = document.getElementById('skills-target-user');
+    if (!sel || !data.users) return;
+    const opts = ['<option value="">글로벌 기본값</option>'];
+    for (const u of data.users) {
+      const selected = u.username === skillsTargetUser ? ' selected' : '';
+      opts.push(`<option value="${escHtml(u.username)}"${selected}>${escHtml(u.username)}</option>`);
+    }
+    sel.innerHTML = opts.join('');
+  } catch {}
+}
+
+function onSkillsUserChange() {
+  const sel = document.getElementById('skills-target-user');
+  skillsTargetUser = sel ? sel.value : '';
+  loadInstalledSkills();
+}
+
 async function loadInstalledSkills() {
   const el = document.getElementById('skills-list');
   el.innerHTML = '<div style="padding:12px;color:var(--muted);font-size:11px"><span class="spinner"></span> Loading...</div>';
   try {
-    const data = await api('/api/skills');
+    const effectiveUser = skillsTargetUser || (currentUser?.role !== 'admin' ? currentUser?.username : null);
+    const url = effectiveUser ? `/api/skills?username=${encodeURIComponent(effectiveUser)}` : '/api/skills';
+    const data = await api(url);
     const skills = data.skills || [];
     skillsCache = skills;
     if (skills.length === 0) {
@@ -9689,12 +10285,13 @@ async function loadInstalledSkills() {
     } else {
       el.innerHTML = skills.map(s => {
         const skillEmoji = (s.emoji === '🧩' || s.emoji === '🦞' || s.emoji === '⚠️') ? s.emoji : '🧩';
+        const globalBadge = s.globalOnly ? '<span style="font-size:9px;opacity:.6;margin-left:4px">[전체]</span>' : '';
         return `
         <div class="skill-card ${s.enabled ? 'enabled' : ''}" data-skill-id="${escHtml(s.id)}" onclick="toggleSkill('${escHtml(s.id)}')">
           <div class="skill-card-top">
             <div class="skill-card-emoji">${escHtml(skillEmoji)}</div>
             <div class="skill-card-info">
-              <div class="skill-card-name">${escHtml(s.name)}</div>
+              <div class="skill-card-name">${escHtml(s.name)}${globalBadge}</div>
               <div class="skill-card-desc">${escHtml(s.description || 'No description')}</div>
             </div>
             <div class="skill-card-actions">
@@ -9715,18 +10312,25 @@ async function loadInstalledSkills() {
 
 async function toggleSkill(id) {
   const skillMeta = (skillsCache || []).find(s => s.id === id);
-  // Block only when trying to enable an ineligible skill.
   if (skillMeta && skillMeta.eligible === false && !skillMeta.enabled) {
     addProcessEntry('error', skillMeta.eligibleReason || 'This skill is currently unavailable.');
     return;
   }
+  // globalOnly 스킬은 per-user 모드에서 토글 불가
+  if (skillMeta?.globalOnly && (skillsTargetUser || currentUser?.role !== 'admin')) {
+    addProcessEntry('error', `"${skillMeta.name}" 스킬은 글로벌 전용입니다.`);
+    return;
+  }
   try {
-    const res = await api(`/api/skills/${encodeURIComponent(id)}/toggle`, { method: 'POST' });
+    const effectiveUser = skillsTargetUser || (currentUser?.role !== 'admin' ? currentUser?.username : null);
+    const body = effectiveUser ? JSON.stringify({ username: effectiveUser }) : undefined;
+    const res = await api(`/api/skills/${encodeURIComponent(id)}/toggle`, { method: 'POST', body });
     if (!res.success) {
       addProcessEntry('error', res.error || 'Failed to toggle skill.');
       return;
     }
-    addProcessEntry('info', `Skill "${res.skill.name}": ${res.skill.enabled ? 'ENABLED' : 'DISABLED'}`);
+    const label = res.targetUser ? ` (${res.targetUser})` : '';
+    addProcessEntry('info', `Skill "${res.skill.name}"${label}: ${res.skill.enabled ? 'ENABLED' : 'DISABLED'}`);
     loadInstalledSkills();
   } catch (err) {
     addProcessEntry('error', `Failed to toggle skill: ${err.message}`);
diff --git a/web-ui/midi-editor.html b/web-ui/midi-editor.html
new file mode 100644
index 0000000..c698316
--- /dev/null
+++ b/web-ui/midi-editor.html
@@ -0,0 +1,901 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MIDI Editor — Homeclaw</title>
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { background: #1e1e2e; color: #cdd6f4; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; height: 100vh; display: flex; flex-direction: column; overflow: hidden; user-select: none; }
+
+/* ── Toolbar ── */
+#toolbar { display: flex; align-items: center; gap: 3px; padding: 4px 8px; background: #181825; border-bottom: 1px solid #313244; flex-shrink: 0; flex-wrap: wrap; min-height: 36px; }
+.tb-sep  { width: 1px; height: 22px; background: #45475a; margin: 0 4px; }
+.tb-btn  { background: #313244; border: 1px solid #45475a; color: #cdd6f4; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 12px; white-space: nowrap; }
+.tb-btn:hover { background: #45475a; }
+.tb-btn.active { background: #89b4fa; color: #1e1e2e; border-color: #89b4fa; }
+.tb-lbl  { color: #6c7086; font-size: 11px; }
+select.tb-sel { background: #313244; border: 1px solid #45475a; color: #cdd6f4; border-radius: 4px; padding: 2px 4px; font-size: 12px; }
+input.tb-num  { background: #313244; border: 1px solid #45475a; color: #cdd6f4; border-radius: 4px; padding: 2px 6px; width: 58px; font-size: 12px; text-align: center; }
+#midi-out-sel { background: #313244; border: 1px solid #45475a; color: #cdd6f4; border-radius: 4px; padding: 2px 4px; font-size: 11px; max-width: 160px; }
+
+/* ── Main ── */
+#main { display: flex; flex: 1; overflow: hidden; }
+
+/* ── Track Panel ── */
+#track-panel { width: 162px; flex-shrink: 0; background: #181825; border-right: 1px solid #313244; display: flex; flex-direction: column; overflow: hidden; }
+#tp-head { padding: 4px 8px; color: #6c7086; font-size: 11px; border-bottom: 1px solid #313244; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
+#track-list { flex: 1; overflow-y: auto; }
+.ti { padding: 4px 6px 3px; border-bottom: 1px solid #252535; cursor: pointer; }
+.ti:hover { background: #252535; }
+.ti.sel { background: #313244; }
+.ti-top { display: flex; align-items: center; gap: 5px; }
+.ti-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; cursor: pointer; }
+.ti-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.ti-ch { color: #6c7086; font-size: 10px; flex-shrink: 0; }
+.ti-btns { display: flex; gap: 2px; margin-top: 3px; }
+.ti-btn { background: #252535; border: 1px solid #45475a; color: #6c7086; border-radius: 3px; padding: 1px 5px; cursor: pointer; font-size: 10px; }
+.ti-btn:hover { background: #45475a; color: #cdd6f4; }
+.ti-btn.m-on { background: #f38ba8; color: #1e1e2e; border-color: #f38ba8; }
+.ti-btn.s-on { background: #a6e3a1; color: #1e1e2e; border-color: #a6e3a1; }
+.ti-prog { font-size: 9px; color: #585b70; margin-top: 1px; }
+
+/* ── Roll Container ── */
+#roll-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+#ruler-row  { display: flex; flex-shrink: 0; border-bottom: 1px solid #313244; }
+#corner     { width: 56px; flex-shrink: 0; background: #1a1a2a; border-right: 1px solid #313244; height: 24px; display: flex; align-items: center; justify-content: center; }
+#corner span { color: #45475a; font-size: 9px; }
+#ruler-canvas { flex: 1; display: block; background: #1a1a2a; height: 24px; cursor: pointer; }
+#roll-row   { flex: 1; display: flex; overflow: hidden; min-height: 0; }
+#keys-canvas { display: block; flex-shrink: 0; width: 56px; background: #1a1a2a; border-right: 1px solid #313244; cursor: pointer; }
+#roll-canvas { display: block; flex: 1; min-width: 0; cursor: default; }
+#vel-row    { height: 70px; flex-shrink: 0; display: flex; border-top: 1px solid #313244; }
+#vel-label  { width: 56px; flex-shrink: 0; background: #1a1a2a; border-right: 1px solid #313244; display: flex; align-items: center; justify-content: center; color: #45475a; font-size: 9px; }
+#vel-canvas { display: block; flex: 1; min-width: 0; cursor: ns-resize; background: #16161e; }
+
+/* ── Transport ── */
+#transport { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: #181825; border-top: 1px solid #313244; flex-shrink: 0; }
+.tr-btn { background: #313244; border: 1px solid #45475a; color: #cdd6f4; border-radius: 4px; padding: 2px 10px; cursor: pointer; font-size: 14px; }
+.tr-btn:hover { background: #45475a; }
+#pos-disp { font-family: monospace; color: #a6e3a1; font-size: 12px; min-width: 90px; }
+</style>
+</head>
+<body>
+
+<div id="toolbar">
+  <button class="tb-btn" onclick="openFileDialog()">📂 열기</button>
+  <button class="tb-btn" onclick="doSave()">💾 저장</button>
+  <div class="tb-sep"></div>
+  <button class="tb-btn" onclick="doUndo()" title="Ctrl+Z">↩</button>
+  <button class="tb-btn" onclick="doRedo()" title="Ctrl+Y">↪</button>
+  <div class="tb-sep"></div>
+  <button class="tb-btn" id="t-sel"   onclick="setTool('sel')"   title="V">▢ 선택</button>
+  <button class="tb-btn" id="t-draw"  onclick="setTool('draw')"  title="P">✏ 그리기</button>
+  <button class="tb-btn" id="t-erase" onclick="setTool('erase')" title="E">✗ 지우개</button>
+  <div class="tb-sep"></div>
+  <span class="tb-lbl">양자화</span>
+  <select class="tb-sel" id="q-sel" onchange="setQ(this.value)">
+    <option value="0">없음</option>
+    <option value="30">1/64</option>
+    <option value="60">1/32</option>
+    <option value="120" selected>1/16</option>
+    <option value="240">1/8</option>
+    <option value="480">1/4</option>
+    <option value="960">1/2</option>
+    <option value="1920">1/1</option>
+  </select>
+  <div class="tb-sep"></div>
+  <span class="tb-lbl">BPM</span>
+  <input class="tb-num" id="bpm-in" type="number" value="120" min="20" max="300" onchange="setBpm(+this.value)">
+  <div class="tb-sep"></div>
+  <button class="tb-btn" onclick="zoomX(1.3)">X+</button>
+  <button class="tb-btn" onclick="zoomX(1/1.3)">X−</button>
+  <button class="tb-btn" onclick="zoomY(1.3)">Y+</button>
+  <button class="tb-btn" onclick="zoomY(1/1.3)">Y−</button>
+  <div class="tb-sep"></div>
+  <button class="tb-btn" onclick="doAddTrack()">+ 트랙</button>
+  <div class="tb-sep"></div>
+  <span class="tb-lbl">MIDI 출력</span>
+  <select id="midi-out-sel"><option value="">-- 없음 --</option></select>
+  <button class="tb-btn" onclick="refreshMidiOuts()">↻</button>
+</div>
+
+<div id="main">
+  <div id="track-panel">
+    <div id="tp-head"><span>트랙</span></div>
+    <div id="track-list"></div>
+  </div>
+  <div id="roll-wrap">
+    <div id="ruler-row">
+      <div id="corner"><span>bar</span></div>
+      <canvas id="ruler-canvas" height="24"></canvas>
+    </div>
+    <div id="roll-row">
+      <canvas id="keys-canvas" width="56"></canvas>
+      <canvas id="roll-canvas"></canvas>
+    </div>
+    <div id="vel-row">
+      <div id="vel-label">vel</div>
+      <canvas id="vel-canvas" height="70"></canvas>
+    </div>
+  </div>
+</div>
+
+<div id="transport">
+  <button class="tr-btn" onclick="doRewind()">⏮</button>
+  <button class="tr-btn" id="play-btn" onclick="doTogglePlay()">▶</button>
+  <button class="tr-btn" onclick="doStop()">■</button>
+  <span id="pos-disp">1:1:000</span>
+  <span class="tb-lbl">루프</span>
+  <input type="checkbox" id="loop-en">
+  <span class="tb-lbl">In</span><input class="tb-num" id="loop-in"  type="number" value="1" min="1" style="width:42px">
+  <span class="tb-lbl">Out</span><input class="tb-num" id="loop-out" type="number" value="5" min="1" style="width:42px">
+  <span style="flex:1"></span>
+  <span class="tb-lbl" id="status-txt"></span>
+</div>
+
+<input type="file" id="file-in" accept=".mid,.midi" style="display:none" onchange="handleOpen(this)">
+
+<script>
+// ═══════════════════════════════════════════════════════════════════
+// Constants
+// ═══════════════════════════════════════════════════════════════════
+const KEY_W  = 56;
+const RULE_H = 24;
+const VEL_H  = 70;
+const COLORS = ['#e06c75','#98c379','#61afef','#c678dd','#e5c07b','#56b6c2','#d19a66','#be5046','#a6e3a1','#89dceb','#cba6f7','#f9e2af','#74c7ec','#fab387'];
+const GM_NAMES = ['Piano','Bright Piano','E.Grand','Honky-Tonk','E.Piano1','E.Piano2','Harpsichord','Clavinet','Celesta','Glockenspiel','Music Box','Vibraphone','Marimba','Xylophone','Tubular Bells','Dulcimer','Hammond Organ','Perc.Organ','Rock Organ','Church Organ','Reed Organ','Accordion','Harmonica','Bandoneon','Nylon Guitar','Steel Guitar','Jazz Guitar','Clean Guitar','Muted Guitar','Overd.Guitar','Dist.Guitar','Harmonics','Acoustic Bass','Finger Bass','Pick Bass','Fretless Bass','Slap Bass1','Slap Bass2','Synth Bass1','Synth Bass2','Violin','Viola','Cello','Contrabass','Tremolo Str','Pizzicato','Harp','Timpani','Str Ensemble1','Str Ensemble2','Synth Str1','Synth Str2','Choir Aahs','Voice Oohs','Synth Choir','Orch.Hit','Trumpet','Trombone','Tuba','Muted Trumpet','French Horn','Brass Section','Synth Brass1','Synth Brass2','Soprano Sax','Alto Sax','Tenor Sax','Baritone Sax','Oboe','English Horn','Bassoon','Clarinet','Piccolo','Flute','Recorder','Pan Flute','Bottle Blow','Shakuhachi','Whistle','Ocarina','Square Lead','Sawtooth Lead','Calliope Lead','Chiffer Lead','Charang Lead','Solo Vox','5th Sawtooth','Bass+Lead','Fantasia','Warm Pad','Polysynth','Choir Pad','Bowed Pad','Metallic Pad','Halo Pad','Sweep Pad','Rain','Soundtrack','Crystal','Atmosphere','Brightness','Goblins','Echoes','Sci-Fi','Sitar','Banjo','Shamisen','Koto','Kalimba','Bag Pipe','Fiddle','Shanai','Tinkle Bell','Agogo','Steel Drums','Woodblock','Taiko Drum','Melodic Tom','Synth Drum','Rev.Cymbal','Guitar Fret','Breath Noise','Seashore','Bird Tweet','Telephone','Helicopter','Applause','Gunshot'];
+const NOTE_NAMES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
+const BLACK_K = new Set([1,3,6,8,10]);
+
+// ═══════════════════════════════════════════════════════════════════
+// State
+// ═══════════════════════════════════════════════════════════════════
+let midi = mkMidi();
+let view = { scrollX: 0, scrollY: 57 * 8, pxPerTick: 0.15, noteH: 8 };
+let tool  = 'sel';
+let qTicks = 120;
+let activeTi = 0;
+let sel  = new Set();
+let hist = [], histIdx = -1;
+let drag = null;
+let ph   = 0;     // playhead ticks
+let playing = false;
+let midiAccess = null, midiOut = null;
+let animId = null;
+let playT0 = 0, playTick0 = 0;
+let velDrag = null;
+let clip = [];
+
+function mkMidi() {
+  return { format:1, tpq:480, tracks:[], tempos:[{tick:0,uspb:500000}], timeSigs:[{tick:0,num:4,den:4}] };
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Canvases
+// ═══════════════════════════════════════════════════════════════════
+const rulerC = document.getElementById('ruler-canvas');
+const keysC  = document.getElementById('keys-canvas');
+const rollC  = document.getElementById('roll-canvas');
+const velC   = document.getElementById('vel-canvas');
+const rCtx   = rulerC.getContext('2d');
+const kCtx   = keysC.getContext('2d');
+const pCtx   = rollC.getContext('2d');
+const vCtx   = velC.getContext('2d');
+
+function resize() {
+  const wrap = document.getElementById('roll-wrap');
+  const rr   = document.getElementById('roll-row');
+  const W    = wrap.clientWidth - KEY_W;
+  const H    = rr.clientHeight;
+  rulerC.width  = W; rulerC.height = RULE_H;
+  keysC.height  = H;
+  rollC.width   = W; rollC.height  = H;
+  velC.width    = W; velC.height   = VEL_H;
+  renderAll();
+}
+window.addEventListener('resize', resize);
+
+// ═══════════════════════════════════════════════════════════════════
+// MIDI Parser (tick-based)
+// ═══════════════════════════════════════════════════════════════════
+function parseMidi(buf) {
+  const u8 = new Uint8Array(buf), dv = new DataView(buf);
+  if (dv.getUint32(0) !== 0x4D546864) throw new Error('Not a MIDI file');
+  const format = dv.getUint16(8), ntrk = dv.getUint16(10), tpq = dv.getUint16(12);
+  const res = { format, tpq, tracks:[], tempos:[], timeSigs:[] };
+
+  const readVL = (pos) => {
+    let val=0,b; do { b=u8[pos++]; val=(val<<7)|(b&0x7F); } while(b&0x80);
+    return { val, pos };
+  };
+
+  let p = 14;
+  for (let t = 0; t < ntrk; t++) {
+    if (p+8 > u8.length || dv.getUint32(p) !== 0x4D54726B) break;
+    const tlen = dv.getUint32(p+4); p+=8; const end = p+tlen;
+    let tick=0, rs=0;
+    const open={}, notes=[], pcs=[];
+    let name=`Track ${t+1}`, ch=-1;
+
+    while (p < end) {
+      const dl=readVL(p); p=dl.pos; tick+=dl.val;
+      let b=u8[p]; if(b&0x80){rs=b;p++;} else {b=rs;}
+      const typ=b&0xF0, c=b&0x0F;
+
+      if (typ===0x90) {
+        const n=u8[p++],v=u8[p++]; if(ch<0)ch=c;
+        if(v>0) open[`${c}_${n}`]={tick,vel:v};
+        else { const o=open[`${c}_${n}`]; if(o){notes.push({tick:o.tick,dur:Math.max(1,tick-o.tick),pitch:n,vel:o.vel});delete open[`${c}_${n}`];} }
+      } else if (typ===0x80) {
+        const n=u8[p++]; p++; if(ch<0)ch=c;
+        const o=open[`${c}_${n}`]; if(o){notes.push({tick:o.tick,dur:Math.max(1,tick-o.tick),pitch:n,vel:o.vel});delete open[`${c}_${n}`];}
+      } else if (typ===0xA0) { p+=2; }
+      else if (typ===0xB0) { p+=2; }
+      else if (typ===0xC0) { pcs.push({tick,prog:u8[p++]}); if(ch<0)ch=c; }
+      else if (typ===0xD0) { p++; }
+      else if (typ===0xE0) { p+=2; }
+      else if (b===0xFF) {
+        const mt=u8[p++]; const ll=readVL(p); p=ll.pos;
+        if(mt===0x03) try{name=new TextDecoder().decode(u8.slice(p,p+ll.val));}catch{}
+        else if(mt===0x51&&ll.val>=3) res.tempos.push({tick,uspb:(u8[p]<<16)|(u8[p+1]<<8)|u8[p+2]});
+        else if(mt===0x58&&ll.val>=4) res.timeSigs.push({tick,num:u8[p],den:1<<u8[p+1]});
+        p+=ll.val;
+      } else if (b===0xF0||b===0xF7) { const ll=readVL(p); p=ll.pos+ll.val; }
+      else { p++; }
+      p = Math.min(p, end);
+    }
+    // Close orphaned notes
+    for(const k in open){const[,np]=k.split('_').map(Number);const o=open[k];notes.push({tick:o.tick,dur:tpq,pitch:np,vel:o.vel});}
+    if(notes.length>0||pcs.length>0) {
+      res.tracks.push({name,channel:ch>=0?ch:t%16,notes,pcs,muted:false,solo:false,color:COLORS[res.tracks.length%COLORS.length]});
+    }
+    p=end;
+  }
+  if(!res.tempos.length) res.tempos.push({tick:0,uspb:500000});
+  if(!res.timeSigs.length) res.timeSigs.push({tick:0,num:4,den:4});
+  return res;
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MIDI Writer
+// ═══════════════════════════════════════════════════════════════════
+function writeVL(n) {
+  if(n===0)return[0];
+  const b=[]; while(n>0){b.unshift(n&0x7F);n>>>=7;} for(let i=0;i<b.length-1;i++)b[i]|=0x80; return b;
+}
+function writeMidi(state) {
+  const trks=[];
+  // Tempo track
+  const tevs=[];
+  for(const ts of [...state.timeSigs].sort((a,b)=>a.tick-b.tick))
+    tevs.push({tick:ts.tick,bytes:[0xFF,0x58,0x04,ts.num,Math.round(Math.log2(ts.den)),24,8]});
+  for(const t of [...state.tempos].sort((a,b)=>a.tick-b.tick))
+    tevs.push({tick:t.tick,bytes:[0xFF,0x51,0x03,(t.uspb>>16)&0xFF,(t.uspb>>8)&0xFF,t.uspb&0xFF]});
+  tevs.sort((a,b)=>a.tick-b.tick);
+  const tb=[]; let pv=0;
+  for(const e of tevs){tb.push(...writeVL(e.tick-pv),...e.bytes);pv=e.tick;}
+  tb.push(0x00,0xFF,0x2F,0x00); trks.push(tb);
+
+  for(const trk of state.tracks){
+    const evs=[];
+    for(const pc of (trk.pcs||[])) evs.push({tick:pc.tick,bytes:[0xC0|trk.channel,pc.prog]});
+    for(const n of trk.notes){
+      evs.push({tick:n.tick,      bytes:[0x90|trk.channel,n.pitch,n.vel]});
+      evs.push({tick:n.tick+n.dur,bytes:[0x80|trk.channel,n.pitch,0]});
+    }
+    evs.sort((a,b)=>a.tick-b.tick);
+    const bytes=[]; pv=0;
+    for(const e of evs){bytes.push(...writeVL(e.tick-pv),...e.bytes);pv=e.tick;}
+    bytes.push(0x00,0xFF,0x2F,0x00); trks.push(bytes);
+  }
+
+  let total=14; for(const t of trks) total+=8+t.length;
+  const buf=new ArrayBuffer(total), dv=new DataView(buf), u8=new Uint8Array(buf);
+  let p=0;
+  dv.setUint32(p,0x4D546864);p+=4; dv.setUint32(p,6);p+=4;
+  dv.setUint16(p,1);p+=2; dv.setUint16(p,trks.length);p+=2; dv.setUint16(p,state.tpq);p+=2;
+  for(const t of trks){dv.setUint32(p,0x4D54726B);p+=4;dv.setUint32(p,t.length);p+=4;u8.set(t,p);p+=t.length;}
+  return buf;
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Coordinate helpers
+// ═══════════════════════════════════════════════════════════════════
+const tX  = tick  => tick * view.pxPerTick - view.scrollX;
+const pY  = pitch => (127-pitch)*view.noteH - view.scrollY;
+const xT  = x     => (x + view.scrollX) / view.pxPerTick;
+const yP  = y     => 127 - Math.floor((y + view.scrollY) / view.noteH);
+const qz  = tick  => qTicks>0 ? Math.round(tick/qTicks)*qTicks : Math.round(tick);
+const bpm = ()    => Math.round(60000000 / (midi.tempos[0]?.uspb||500000));
+const mspT= ()    => (midi.tempos[0]?.uspb||500000) / midi.tpq / 1000;
+
+// ═══════════════════════════════════════════════════════════════════
+// Rendering
+// ═══════════════════════════════════════════════════════════════════
+function renderAll() { renderRuler(); renderKeys(); renderRoll(); renderVel(); }
+
+function renderRuler() {
+  const W=rulerC.width, H=RULE_H;
+  rCtx.fillStyle='#1a1a2a'; rCtx.fillRect(0,0,W,H);
+  const tpb=midi.tpq*(midi.timeSigs[0]?.num||4);
+  const startBar=Math.floor(view.scrollX/(tpb*view.pxPerTick));
+  const endBar=startBar+Math.ceil(W/(tpb*view.pxPerTick))+2;
+  rCtx.font='10px monospace'; rCtx.textBaseline='middle';
+  for(let bar=startBar; bar<=endBar; bar++){
+    const x=bar*tpb*view.pxPerTick-view.scrollX;
+    rCtx.strokeStyle='#45475a'; rCtx.lineWidth=1;
+    rCtx.beginPath(); rCtx.moveTo(x+.5,0); rCtx.lineTo(x+.5,H); rCtx.stroke();
+    if(x>=0&&x<W){rCtx.fillStyle='#a6adc8'; rCtx.fillText(bar+1,x+3,H/2);}
+    if(tpb*view.pxPerTick>40){
+      for(let b=1;b<(midi.timeSigs[0]?.num||4);b++){
+        const bx=x+b*midi.tpq*view.pxPerTick;
+        rCtx.strokeStyle='#313244'; rCtx.lineWidth=.5;
+        rCtx.beginPath(); rCtx.moveTo(bx+.5,H/2); rCtx.lineTo(bx+.5,H); rCtx.stroke();
+      }
+    }
+  }
+  const phx=tX(ph); if(phx>=0&&phx<=W){rCtx.fillStyle='#f38ba8'; rCtx.fillRect(phx-1,0,2,H);}
+}
+
+function renderKeys() {
+  const W=KEY_W, H=keysC.height;
+  kCtx.fillStyle='#1a1a2a'; kCtx.fillRect(0,0,W,H);
+  for(let p=0; p<=127; p++){
+    const y=pY(p); if(y+view.noteH<0||y>H) continue;
+    const isB=BLACK_K.has(p%12), isC=p%12===0;
+    kCtx.fillStyle=isB?'#2a2a3a':(isC?'#3a3a5a':'#e8e8f0');
+    kCtx.fillRect(0,y,W-(isB?14:0),view.noteH);
+    kCtx.strokeStyle='#45475a'; kCtx.lineWidth=.5;
+    kCtx.strokeRect(.5,y+.5,W-(isB?14:0)-1,view.noteH-1);
+    if(!isB&&view.noteH>=7){
+      kCtx.fillStyle=isC?'#89b4fa':'#6c7086';
+      kCtx.font=`${Math.min(9,view.noteH-1)}px monospace`;
+      kCtx.textAlign='right'; kCtx.textBaseline='middle';
+      kCtx.fillText(NOTE_NAMES[p%12]+(isC?Math.floor(p/12)-1:''),W-16,y+view.noteH/2);
+    }
+  }
+}
+
+function renderRoll() {
+  const W=rollC.width, H=rollC.height;
+  pCtx.fillStyle='#1e1e2e'; pCtx.fillRect(0,0,W,H);
+  const nh=view.noteH;
+  // Pitch rows
+  for(let p=127;p>=0;p--){
+    const y=pY(p); if(y+nh<0||y>H) continue;
+    const isB=BLACK_K.has(p%12), isC=p%12===0;
+    pCtx.fillStyle=isB?'#191926':(isC?'#1e1e38':'#1e1e2e');
+    pCtx.fillRect(0,y,W,nh);
+    if(isC){pCtx.strokeStyle='#2e2e50';pCtx.lineWidth=.5;pCtx.beginPath();pCtx.moveTo(0,y+.5);pCtx.lineTo(W,y+.5);pCtx.stroke();}
+  }
+  // Bar/beat grid
+  const tpb=midi.tpq*(midi.timeSigs[0]?.num||4);
+  const s0=Math.floor(view.scrollX/(tpb*view.pxPerTick));
+  const s1=s0+Math.ceil(W/(tpb*view.pxPerTick))+2;
+  for(let bar=s0;bar<=s1;bar++){
+    const x=bar*tpb*view.pxPerTick-view.scrollX;
+    pCtx.strokeStyle='#313244'; pCtx.lineWidth=1;
+    pCtx.beginPath(); pCtx.moveTo(x+.5,0); pCtx.lineTo(x+.5,H); pCtx.stroke();
+    if(view.pxPerTick*midi.tpq>16){
+      for(let b=1;b<(midi.timeSigs[0]?.num||4);b++){
+        const bx=x+b*midi.tpq*view.pxPerTick;
+        pCtx.strokeStyle='#252535'; pCtx.lineWidth=.5;
+        pCtx.beginPath(); pCtx.moveTo(bx+.5,0); pCtx.lineTo(bx+.5,H); pCtx.stroke();
+      }
+    }
+  }
+  // Sub-beat grid (1/16) when zoomed in
+  if(view.pxPerTick*midi.tpq>60){
+    const subT=midi.tpq/4;
+    const subS=Math.floor(view.scrollX/(subT*view.pxPerTick));
+    const subE=subS+Math.ceil(W/(subT*view.pxPerTick))+2;
+    for(let i=subS;i<=subE;i++){
+      if(i%(4*(midi.timeSigs[0]?.num||4))===0) continue;
+      if(i%4===0) continue;
+      const x=i*subT*view.pxPerTick-view.scrollX;
+      pCtx.strokeStyle='#232333'; pCtx.lineWidth=.5;
+      pCtx.beginPath(); pCtx.moveTo(x+.5,0); pCtx.lineTo(x+.5,H); pCtx.stroke();
+    }
+  }
+
+  const anySolo=midi.tracks.some(t=>t.solo);
+  // Notes
+  for(let ti=0;ti<midi.tracks.length;ti++){
+    const trk=midi.tracks[ti];
+    if(trk.muted||(anySolo&&!trk.solo)) continue;
+    for(const n of trk.notes){
+      const x=tX(n.tick), w=Math.max(2,n.dur*view.pxPerTick-1), y=pY(n.pitch);
+      if(x+w<0||x>W||y+nh<0||y>H) continue;
+      const isSel=sel.has(n);
+      pCtx.fillStyle=isSel?'#fff':trk.color;
+      pCtx.fillRect(x,y+1,w,nh-2);
+      if(isSel){pCtx.strokeStyle=trk.color;pCtx.lineWidth=1;pCtx.strokeRect(x+.5,y+1.5,w-1,nh-3);}
+      else if(w>5){pCtx.fillStyle='rgba(0,0,0,.25)';pCtx.fillRect(x+w-3,y+1,3,nh-2);}
+    }
+  }
+  // Drag select box
+  if(drag?.type==='box'){
+    const {x0,y0,x1,y1}=drag;
+    pCtx.strokeStyle='#89b4fa'; pCtx.lineWidth=1; pCtx.setLineDash([4,2]);
+    pCtx.strokeRect(Math.min(x0,x1),Math.min(y0,y1),Math.abs(x1-x0),Math.abs(y1-y0));
+    pCtx.setLineDash([]);
+  }
+  // Playhead
+  const phx=tX(ph); if(phx>=0&&phx<=W){pCtx.fillStyle='#f38ba8';pCtx.fillRect(phx-1,0,2,H);}
+}
+
+function renderVel() {
+  const W=velC.width, H=VEL_H;
+  vCtx.fillStyle='#16161e'; vCtx.fillRect(0,0,W,H);
+  vCtx.strokeStyle='#252535'; vCtx.lineWidth=.5;
+  [.25,.5,.75].forEach(f=>{vCtx.beginPath();vCtx.moveTo(0,H*f);vCtx.lineTo(W,H*f);vCtx.stroke();});
+  const anySolo=midi.tracks.some(t=>t.solo);
+  for(const trk of midi.tracks){
+    if(trk.muted||(anySolo&&!trk.solo)) continue;
+    for(const n of trk.notes){
+      const x=tX(n.tick); if(x<-4||x>W+4) continue;
+      const bH=Math.max(2,Math.round((n.vel/127)*(H-4)));
+      vCtx.fillStyle=sel.has(n)?'#fff':trk.color+'bb';
+      vCtx.fillRect(x-1,H-bH-2,3,bH);
+    }
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Track Panel
+// ═══════════════════════════════════════════════════════════════════
+function renderTracks() {
+  const list=document.getElementById('track-list');
+  list.innerHTML='';
+  midi.tracks.forEach((trk,i)=>{
+    const prog=trk.pcs?.[0]?.prog;
+    const progName=prog!==undefined?(trk.channel===9?'Drums':GM_NAMES[prog]||`Prog ${prog}`):'';
+    const div=document.createElement('div');
+    div.className='ti'+(i===activeTi?' sel':'');
+    div.onclick=()=>{activeTi=i;renderTracks();};
+    div.innerHTML=`<div class="ti-top">
+      <div class="ti-dot" style="background:${trk.color}" title="색상변경" onclick="event.stopPropagation();cycleColor(${i})"></div>
+      <div class="ti-name" title="${trk.name}">${trk.name}</div>
+      <div class="ti-ch">ch${trk.channel+1}</div>
+    </div>
+    <div class="ti-btns">
+      <button class="ti-btn${trk.muted?' m-on':''}" onclick="event.stopPropagation();toggleMute(${i})">M</button>
+      <button class="ti-btn${trk.solo?' s-on':''}" onclick="event.stopPropagation();toggleSolo(${i})">S</button>
+      <select style="font-size:9px;background:#252535;color:#cdd6f4;border:1px solid #45475a;border-radius:2px;padding:1px;max-width:70px" onchange="event.stopPropagation();setTrackProg(${i},+this.value)" onclick="event.stopPropagation()">
+        ${Array.from({length:128},(_,k)=>`<option value="${k}"${k===(prog??0)?' selected':''}>${k}:${GM_NAMES[k]||k}</option>`).join('')}
+      </select>
+      <button class="ti-btn" style="margin-left:auto" onclick="event.stopPropagation();delTrack(${i})">✕</button>
+    </div>
+    ${progName?`<div class="ti-prog">${progName}</div>`:''}`;
+    list.appendChild(div);
+  });
+}
+
+function cycleColor(i) {
+  const idx=COLORS.indexOf(midi.tracks[i].color);
+  midi.tracks[i].color=COLORS[(idx+1)%COLORS.length];
+  renderAll(); renderTracks();
+}
+function toggleMute(i) { pushH(); midi.tracks[i].muted=!midi.tracks[i].muted; renderAll(); renderTracks(); }
+function toggleSolo(i) { pushH(); midi.tracks[i].solo=!midi.tracks[i].solo; renderAll(); renderTracks(); }
+function delTrack(i) { pushH(); midi.tracks.splice(i,1); if(activeTi>=midi.tracks.length)activeTi=Math.max(0,midi.tracks.length-1); renderAll(); renderTracks(); }
+function setTrackProg(i, prog) { pushH(); if(!midi.tracks[i].pcs.length)midi.tracks[i].pcs.push({tick:0,prog}); else midi.tracks[i].pcs[0].prog=prog; renderTracks(); }
+function doAddTrack() {
+  pushH();
+  const ch=midi.tracks.length%16;
+  midi.tracks.push({name:`Track ${midi.tracks.length+1}`,channel:ch,notes:[],pcs:[{tick:0,prog:0}],muted:false,solo:false,color:COLORS[midi.tracks.length%COLORS.length]});
+  activeTi=midi.tracks.length-1;
+  renderAll(); renderTracks();
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Tools
+// ═══════════════════════════════════════════════════════════════════
+function setTool(t) {
+  tool=t;
+  ['sel','draw','erase'].forEach(n=>document.getElementById('t-'+n).classList.toggle('active',n===t));
+}
+setTool('sel');
+function setQ(v) { qTicks=+v; }
+function setBpm(v) { pushH(); const b=Math.max(20,Math.min(300,v||120)); midi.tempos=[{tick:0,uspb:Math.round(60000000/b)}]; document.getElementById('bpm-in').value=b; }
+function zoomX(f) { const mid=view.scrollX+rollC.width/2; view.pxPerTick=Math.max(.02,Math.min(4,view.pxPerTick*f)); view.scrollX=Math.max(0,mid-rollC.width/2); renderAll(); }
+function zoomY(f) { view.noteH=Math.max(3,Math.min(24,Math.round(view.noteH*f))); renderAll(); }
+
+// ═══════════════════════════════════════════════════════════════════
+// Hit Test
+// ═══════════════════════════════════════════════════════════════════
+function hitNote(cx,cy) {
+  const tick=xT(cx),pitch=yP(cy);
+  const anySolo=midi.tracks.some(t=>t.solo);
+  for(let i=midi.tracks.length-1;i>=0;i--){
+    const trk=midi.tracks[i]; if(trk.muted||(anySolo&&!trk.solo)) continue;
+    for(const n of trk.notes){
+      if(n.pitch===pitch&&tick>=n.tick&&tick<n.tick+n.dur) return {n,trk,ti:i};
+    }
+  }
+  return null;
+}
+function hitResize(cx,cy) {
+  const RZ=6/view.pxPerTick, pitch=yP(cy);
+  const anySolo=midi.tracks.some(t=>t.solo);
+  for(let i=midi.tracks.length-1;i>=0;i--){
+    const trk=midi.tracks[i]; if(trk.muted||(anySolo&&!trk.solo)) continue;
+    for(const n of trk.notes){
+      if(n.pitch!==pitch) continue;
+      const endTick=n.tick+n.dur;
+      if(Math.abs(xT(cx)-endTick)<=RZ) return {n,trk,ti:i};
+    }
+  }
+  return null;
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Mouse Events (Roll)
+// ═══════════════════════════════════════════════════════════════════
+let mdown=false;
+rollC.addEventListener('contextmenu',e=>e.preventDefault());
+
+rollC.addEventListener('mousedown',e=>{
+  if(e.button!==0&&e.button!==2) return;
+  mdown=true; e.preventDefault();
+  const cx=e.offsetX, cy=e.offsetY;
+
+  if(e.button===2||tool==='erase'){
+    const h=hitNote(cx,cy);
+    if(h){pushH();h.trk.notes.splice(h.trk.notes.indexOf(h.n),1);sel.delete(h.n);renderAll();renderVel();}
+    drag={type:'erase'}; return;
+  }
+
+  if(tool==='draw'){
+    const pitch=yP(cy); if(pitch<0||pitch>127) return;
+    if(activeTi>=midi.tracks.length) doAddTrack();
+    pushH();
+    const tick=Math.max(0,qz(xT(cx)));
+    const dur=qTicks>0?qTicks:midi.tpq/4;
+    const n={tick,dur,pitch,vel:80};
+    midi.tracks[activeTi].notes.push(n);
+    sel=new Set([n]);
+    drag={type:'draw',n,startTick:tick};
+    renderAll(); return;
+  }
+
+  // Select tool
+  const rh=hitResize(cx,cy);
+  if(rh){
+    if(!sel.has(rh.n)){if(!e.shiftKey)sel.clear();sel.add(rh.n);}
+    pushH();
+    drag={type:'resize',n:rh.n,startX:cx,origDur:rh.n.dur,origTick:rh.n.tick};
+    return;
+  }
+  const h=hitNote(cx,cy);
+  if(h){
+    if(!e.shiftKey&&!sel.has(h.n)) sel.clear();
+    sel.add(h.n); pushH();
+    drag={type:'move',startX:cx,startY:cy,origNotes:[...sel].map(n=>({n,tick:n.tick,pitch:n.pitch}))};
+    renderAll(); return;
+  }
+  if(!e.shiftKey) sel.clear();
+  drag={type:'box',x0:cx,y0:cy,x1:cx,y1:cy};
+  renderAll();
+});
+
+rollC.addEventListener('mousemove',e=>{
+  const cx=e.offsetX,cy=e.offsetY;
+  if(!mdown||!drag){
+    if(tool==='sel'){
+      const rh=hitResize(cx,cy);
+      rollC.style.cursor=rh?'ew-resize':(hitNote(cx,cy)?'grab':'default');
+    } else {
+      rollC.style.cursor=tool==='draw'?'crosshair':'cell';
+    }
+    return;
+  }
+  if(drag.type==='erase'){
+    const h=hitNote(cx,cy);
+    if(h){h.trk.notes.splice(h.trk.notes.indexOf(h.n),1);sel.delete(h.n);renderAll();renderVel();}
+    return;
+  }
+  if(drag.type==='draw'){
+    const minDur=Math.max(1,qTicks>0?qTicks:1);
+    const endTick=Math.max(drag.startTick+minDur,qz(xT(cx)));
+    drag.n.dur=endTick-drag.startTick;
+    renderAll(); return;
+  }
+  if(drag.type==='resize'){
+    const minDur=Math.max(1,qTicks>0?qTicks:1);
+    drag.n.dur=Math.max(minDur,qz(xT(cx))-drag.n.tick||minDur);
+    renderAll(); renderVel(); return;
+  }
+  if(drag.type==='move'){
+    const dtick=qz(xT(cx))-qz(xT(drag.startX));
+    const dpitch=yP(cy)-yP(drag.startY);
+    for(const {n,tick:ot,pitch:op} of drag.origNotes){
+      n.tick=Math.max(0,ot+dtick);
+      n.pitch=Math.max(0,Math.min(127,op+dpitch));
+    }
+    renderAll(); return;
+  }
+  if(drag.type==='box'){
+    drag.x1=cx; drag.y1=cy; renderRoll(); return;
+  }
+});
+
+rollC.addEventListener('mouseup',e=>{
+  mdown=false;
+  if(drag?.type==='box'){
+    const {x0,y0,x1,y1}=drag;
+    const t0=xT(Math.min(x0,x1)),t1=xT(Math.max(x0,x1));
+    const p0=yP(Math.max(y0,y1)),p1=yP(Math.min(y0,y1));
+    if(!e.shiftKey) sel.clear();
+    for(const trk of midi.tracks) for(const n of trk.notes)
+      if(n.tick<t1&&n.tick+n.dur>t0&&n.pitch>=p0&&n.pitch<=p1) sel.add(n);
+    renderAll();
+  }
+  drag=null; renderVel();
+});
+
+rollC.addEventListener('wheel',e=>{
+  e.preventDefault();
+  if(e.ctrlKey){
+    const f=e.deltaY<0?1.2:.8, bt=xT(e.offsetX);
+    view.pxPerTick=Math.max(.02,Math.min(4,view.pxPerTick*f));
+    view.scrollX=Math.max(0,bt*view.pxPerTick-e.offsetX);
+  } else if(e.shiftKey){
+    view.scrollX=Math.max(0,view.scrollX+e.deltaY);
+  } else {
+    view.scrollY=Math.max(0,Math.min(127*view.noteH-rollC.height*.5,view.scrollY+e.deltaY));
+  }
+  renderAll();
+},{passive:false});
+
+rulerC.addEventListener('click',e=>{
+  ph=Math.max(0,qz(xT(e.offsetX)));
+  renderRuler(); renderRoll(); updPos();
+});
+
+// Velocity lane drag
+velC.addEventListener('mousedown',e=>{
+  velDrag={startY:e.offsetY}; e.preventDefault();
+});
+velC.addEventListener('mousemove',e=>{
+  if(!velDrag) return;
+  const x=e.offsetX;
+  const anySolo=midi.tracks.some(t=>t.solo);
+  for(const trk of midi.tracks){
+    if(trk.muted||(anySolo&&!trk.solo)) continue;
+    for(const n of trk.notes){
+      if(Math.abs(tX(n.tick)-x)<4){
+        n.vel=Math.max(1,Math.min(127,Math.round((1-(e.offsetY/(VEL_H-4)))*127)));
+      }
+    }
+  }
+  renderVel();
+});
+velC.addEventListener('mouseup',()=>{if(velDrag){pushH();velDrag=null;}});
+
+// Keys: click to preview note
+keysC.addEventListener('click',e=>{
+  const pitch=yP(e.offsetY);
+  if(pitch<0||pitch>127||!midiOut) return;
+  const ch=midi.tracks[activeTi]?.channel??0;
+  try{midiOut.send(new Uint8Array([0x90|ch,pitch,80]));}catch{}
+  setTimeout(()=>{try{midiOut.send(new Uint8Array([0x80|ch,pitch,0]));}catch{}},300);
+});
+
+// ═══════════════════════════════════════════════════════════════════
+// Undo / Redo
+// ═══════════════════════════════════════════════════════════════════
+function pushH() {
+  const snap=JSON.stringify(midi);
+  hist=hist.slice(0,histIdx+1); hist.push(snap);
+  if(hist.length>60) hist.shift();
+  histIdx=hist.length-1;
+}
+function doUndo() {
+  if(histIdx<=0) return;
+  histIdx--; midi=JSON.parse(hist[histIdx]); sel.clear();
+  document.getElementById('bpm-in').value=bpm();
+  renderAll(); renderTracks();
+}
+function doRedo() {
+  if(histIdx>=hist.length-1) return;
+  histIdx++; midi=JSON.parse(hist[histIdx]); sel.clear();
+  document.getElementById('bpm-in').value=bpm();
+  renderAll(); renderTracks();
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// File I/O
+// ═══════════════════════════════════════════════════════════════════
+function openFileDialog() { document.getElementById('file-in').click(); }
+async function handleOpen(inp) {
+  const f=inp.files[0]; if(!f) return;
+  try {
+    const buf=await f.arrayBuffer();
+    midi=parseMidi(buf); sel.clear(); hist=[]; histIdx=-1; pushH();
+    document.getElementById('bpm-in').value=bpm();
+    view.scrollX=0; view.scrollY=57*view.noteH;
+    document.title=`MIDI Editor — ${f.name}`;
+    renderAll(); renderTracks(); status('로드: '+f.name);
+  } catch(e) { alert('읽기 실패: '+e.message); }
+  inp.value='';
+}
+async function loadUrl(url) {
+  try {
+    const r=await fetch(url); if(!r.ok) throw new Error(r.status);
+    const buf=await r.arrayBuffer();
+    midi=parseMidi(buf); sel.clear(); hist=[]; histIdx=-1; pushH();
+    document.getElementById('bpm-in').value=bpm();
+    view.scrollX=0; view.scrollY=57*view.noteH;
+    const name=decodeURIComponent(url.split('/').pop());
+    document.title=`MIDI Editor — ${name}`;
+    renderAll(); renderTracks(); status('로드 완료');
+  } catch(e) { alert('로드 실패: '+e.message); }
+}
+function doSave() {
+  const buf=writeMidi(midi);
+  const a=document.createElement('a');
+  a.href=URL.createObjectURL(new Blob([buf],{type:'audio/midi'}));
+  a.download=(document.title.replace('MIDI Editor — ','').replace(/\.midi?$/,'')||'edited')+'.mid';
+  document.body.appendChild(a); a.click();
+  setTimeout(()=>{URL.revokeObjectURL(a.href);a.remove();},1000);
+  status('저장 완료');
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MIDI Output / Playback
+// ═══════════════════════════════════════════════════════════════════
+async function initMidiOut() {
+  if(!navigator.requestMIDIAccess) return;
+  try {
+    midiAccess=await navigator.requestMIDIAccess();
+    midiAccess.onstatechange=()=>refreshMidiOuts();
+    refreshMidiOuts();
+  } catch {}
+}
+function refreshMidiOuts() {
+  if(!midiAccess) { initMidiOut(); return; }
+  const sel=document.getElementById('midi-out-sel');
+  const cur=sel.value;
+  sel.innerHTML='<option value="">-- 없음 --</option>';
+  midiAccess.outputs.forEach((out,id)=>{
+    const o=document.createElement('option');
+    o.value=id; o.textContent=out.name;
+    if(id===cur) o.selected=true;
+    sel.appendChild(o);
+  });
+  midiOut=cur?midiAccess.outputs.get(cur):null;
+  if(!midiOut&&midiAccess.outputs.size>0){
+    const first=midiAccess.outputs.values().next().value;
+    midiOut=first; sel.value=first.id;
+  }
+}
+document.getElementById('midi-out-sel').addEventListener('change',function(){
+  midiOut=midiAccess?.outputs.get(this.value)||null;
+});
+
+function doTogglePlay() { playing?doStop():doPlay(); }
+function doRewind() { doStop(); ph=0; renderRuler(); renderRoll(); updPos(); }
+function doStop() {
+  playing=false;
+  document.getElementById('play-btn').textContent='▶';
+  if(animId){cancelAnimationFrame(animId);animId=null;}
+  if(midiOut) for(let c=0;c<16;c++) try{midiOut.send(new Uint8Array([0xB0|c,123,0]));}catch{}
+}
+
+function doPlay() {
+  if(!midiOut){alert('MIDI 출력 기기를 선택하세요.');return;}
+  playing=true;
+  document.getElementById('play-btn').textContent='⏸';
+  playTick0=ph; playT0=performance.now();
+  const mspt=mspT();
+  const anySolo=midi.tracks.some(t=>t.solo);
+  const loopEn=document.getElementById('loop-en').checked;
+  const loopIn=(+document.getElementById('loop-in').value-1)*midi.tpq*(midi.timeSigs[0]?.num||4);
+  const loopOut=(+document.getElementById('loop-out').value)*midi.tpq*(midi.timeSigs[0]?.num||4);
+
+  // GM Reset + Program Changes
+  try{midiOut.send(new Uint8Array([0xF0,0x7E,0x7F,0x09,0x01,0xF7]));}catch{}
+  for(const trk of midi.tracks){
+    if(trk.pcs?.length){const c=trk.channel;
+      try{midiOut.send(new Uint8Array([0xB0|c,0,0]));}catch{}
+      try{midiOut.send(new Uint8Array([0xB0|c,32,0]));}catch{}
+      try{midiOut.send(new Uint8Array([0xC0|c,trk.pcs[0].prog]));}catch{}
+    }
+  }
+
+  // Schedule notes
+  const t0=performance.now()+200;
+  for(const trk of midi.tracks){
+    if(trk.muted||(anySolo&&!trk.solo)) continue;
+    for(const n of trk.notes){
+      if(n.tick<playTick0) continue;
+      if(loopEn&&n.tick>=loopOut) continue;
+      const on =(n.tick-playTick0)*mspt+t0;
+      const off=(n.tick+n.dur-playTick0)*mspt+t0;
+      try{midiOut.send(new Uint8Array([0x90|trk.channel,n.pitch,n.vel]),on);}catch{}
+      try{midiOut.send(new Uint8Array([0x80|trk.channel,n.pitch,0]),off);}catch{}
+    }
+  }
+
+  const maxTick=Math.max(0,...midi.tracks.flatMap(t=>t.notes.map(n=>n.tick+n.dur)));
+
+  function loop(){
+    if(!playing) return;
+    const elapsed=(performance.now()-playT0-200);
+    ph=playTick0+elapsed/mspt;
+    if(loopEn&&ph>=loopOut){ doStop(); ph=loopIn; doPlay(); return; }
+    if(ph>=maxTick){ doStop(); return; }
+    updPos();
+    // Auto-scroll playhead into view
+    const phx=tX(ph);
+    if(phx>rollC.width*.8) view.scrollX+=rollC.width*.4;
+    else if(phx<20&&view.scrollX>0) view.scrollX=Math.max(0,view.scrollX-rollC.width*.4);
+    renderRuler(); renderRoll();
+    animId=requestAnimationFrame(loop);
+  }
+  animId=requestAnimationFrame(loop);
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Keyboard Shortcuts
+// ═══════════════════════════════════════════════════════════════════
+document.addEventListener('keydown',e=>{
+  if(e.target.tagName==='INPUT'||e.target.tagName==='SELECT') return;
+  const ctrl=e.ctrlKey||e.metaKey;
+  if(ctrl&&e.key==='z'){e.preventDefault();doUndo();return;}
+  if(ctrl&&(e.key==='y'||(e.shiftKey&&e.key==='Z'))){e.preventDefault();doRedo();return;}
+  if(ctrl&&e.key==='a'){e.preventDefault();sel=new Set(midi.tracks.flatMap(t=>t.notes));renderAll();return;}
+  if(ctrl&&e.key==='c'){clip=[...sel].map(n=>({...n}));status(`${clip.length}개 복사`);return;}
+  if(ctrl&&e.key==='d'){e.preventDefault();sel=new Set([...sel].map(n=>({...n})));if(activeTi<midi.tracks.length){pushH();midi.tracks[activeTi].notes.push(...sel);renderAll();renderVel();}return;}
+  if(ctrl&&e.key==='v'){
+    if(!clip.length) return; e.preventDefault(); pushH();
+    const minT=Math.min(...clip.map(n=>n.tick));
+    const ns=clip.map(n=>({...n,tick:n.tick-minT+ph}));
+    if(activeTi<midi.tracks.length) midi.tracks[activeTi].notes.push(...ns);
+    sel=new Set(ns); renderAll(); renderVel(); status(`${ns.length}개 붙여넣기`); return;
+  }
+  if((e.key==='Delete'||e.key==='Backspace')&&!ctrl){
+    if(!sel.size) return; pushH();
+    for(const trk of midi.tracks) trk.notes=trk.notes.filter(n=>!sel.has(n));
+    sel.clear(); renderAll(); renderVel(); return;
+  }
+  if(e.key==='v'||e.key==='V') setTool('sel');
+  if(e.key==='p'||e.key==='P') setTool('draw');
+  if(e.key==='e'||e.key==='E') setTool('erase');
+  if(e.key===' '){e.preventDefault();doTogglePlay();}
+  if(e.key==='Home'){doRewind();}
+  // Arrow keys: move selected notes
+  if(e.key==='ArrowLeft'||e.key==='ArrowRight'||e.key==='ArrowUp'||e.key==='ArrowDown'){
+    if(!sel.size) return; e.preventDefault(); pushH();
+    const dt=e.key==='ArrowLeft'?-(qTicks||midi.tpq/4):e.key==='ArrowRight'?(qTicks||midi.tpq/4):0;
+    const dp=e.key==='ArrowUp'?1:e.key==='ArrowDown'?-1:0;
+    for(const n of sel){n.tick=Math.max(0,n.tick+dt);n.pitch=Math.max(0,Math.min(127,n.pitch+dp));}
+    renderAll();
+  }
+});
+
+// ═══════════════════════════════════════════════════════════════════
+// Utilities
+// ═══════════════════════════════════════════════════════════════════
+function updPos() {
+  const tpb=midi.tpq*(midi.timeSigs[0]?.num||4);
+  const bar=Math.floor(ph/tpb)+1, beat=Math.floor((ph%tpb)/midi.tpq)+1, tick=Math.floor(ph%midi.tpq);
+  document.getElementById('pos-disp').textContent=`${bar}:${beat}:${String(tick).padStart(3,'0')}`;
+}
+function status(msg) { document.getElementById('status-txt').textContent=msg; setTimeout(()=>document.getElementById('status-txt').textContent='',3000); }
+
+// ═══════════════════════════════════════════════════════════════════
+// Init
+// ═══════════════════════════════════════════════════════════════════
+initMidiOut();
+window.addEventListener('load',()=>{
+  resize(); pushH();
+  const url=new URLSearchParams(location.search).get('url');
+  if(url) loadUrl(url);
+  updPos();
+});
+</script>
+</body>
+</html>