Tutorial: 3x larger panels/text, add 5 more tour steps

- Prompt panel: padding 60/80, msg 42px, buttons 28px, checkbox 24px
- Tooltip: padding 36/44, body 28px, nav buttons 22px, max-width 600px
- New steps: rest toggle, delete, undo/redo, triplet, playback (12 total)

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

static/corrector.css

@@ -520,18 +520,19 @@ body.mode-barline #marker-svg .marker { opacity: 0.3; transition: opacity .15s;
 #tour-prompt.hidden { display: none; }
 #tour-prompt-inner {
   background: var(--bg-2); border: 1px solid var(--line-strong);
-  border-radius: 12px; padding: 28px 36px;
-  box-shadow: var(--shadow-lg); text-align: center; min-width: 300px;
+  border-radius: 18px; padding: 60px 80px;
+  box-shadow: var(--shadow-lg); text-align: center; min-width: 500px;
 }
 #tour-prompt-msg {
-  font-size: 16px; color: var(--ink-0); margin-bottom: 16px; font-weight: 600;
+  font-size: 42px; color: var(--ink-0); margin-bottom: 36px; font-weight: 600;
 }
 #tour-prompt-skip-label {
-  display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 18px; cursor: pointer;
+  display: block; font-size: 24px; color: var(--ink-2); margin-bottom: 40px; cursor: pointer;
 }
-#tour-prompt-btns { display: flex; gap: 12px; justify-content: center; }
+#tour-prompt-skip-label input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; }
+#tour-prompt-btns { display: flex; gap: 24px; justify-content: center; }
 #tour-prompt-btns button {
-  padding: 8px 24px; border-radius: 6px; font-size: 13px; cursor: pointer; border: none;
+  padding: 18px 56px; border-radius: 10px; font-size: 28px; cursor: pointer; border: none;
 }
 #tour-btn-yes { background: var(--accent); color: #fff; }
 #tour-btn-yes:hover { filter: brightness(1.1); }
@@ -551,9 +552,9 @@ body.mode-barline #marker-svg .marker { opacity: 0.3; transition: opacity .15s;
 
 #tour-tooltip {
   position: fixed; z-index: 9300;
-  background: var(--bg-2); border: 2px solid var(--accent);
-  border-radius: 10px; padding: 16px 20px;
-  box-shadow: var(--shadow-lg); max-width: 340px;
+  background: var(--bg-2); border: 3px solid var(--accent);
+  border-radius: 14px; padding: 36px 44px;
+  box-shadow: var(--shadow-lg); max-width: 600px;
   animation: tour-fade-in 0.25s ease;
 }
 #tour-tooltip.hidden { display: none; }
@@ -562,17 +563,17 @@ body.mode-barline #marker-svg .marker { opacity: 0.3; transition: opacity .15s;
   to { opacity: 1; transform: translateY(0); }
 }
 #tour-tooltip-body {
-  font-size: 13px; color: var(--ink-0); line-height: 1.7; margin-bottom: 14px;
+  font-size: 28px; color: var(--ink-0); line-height: 1.7; margin-bottom: 28px;
 }
 #tour-tooltip-footer {
   display: flex; align-items: center; justify-content: space-between;
 }
 #tour-step-indicator {
-  font-size: 11px; color: var(--ink-2); font-family: var(--font-mono, monospace);
+  font-size: 22px; color: var(--ink-2); font-family: var(--font-mono, monospace);
 }
-#tour-tooltip-btns { display: flex; gap: 8px; }
+#tour-tooltip-btns { display: flex; gap: 14px; }
 #tour-tooltip-btns button {
-  padding: 5px 14px; border-radius: 5px; font-size: 12px; cursor: pointer; border: none;
+  padding: 12px 30px; border-radius: 8px; font-size: 22px; cursor: pointer; border: none;
 }
 #tour-btn-prev { background: var(--bg-3); color: var(--ink-1); }
 #tour-btn-next { background: var(--accent); color: #fff; }

static/corrector.js

@@ -10682,13 +10682,18 @@ function copyBarlinePattern(fromSysIdx, toSysIdx) {
   const LS_KEY = "omr_corrector_skip_tutorial";
 
   const STEPS = [
-    { target: "#canvas-wrapper",  text: "악보 영역입니다.\n마커를 클릭하면 음표가 선택됩니다.\nCtrl+클릭으로 여러 음표를 동시에 선택할 수 있습니다." },
-    { target: "#btn-up",          text: "음 높이 변경 버튼입니다.\n↑↓ 방향키로도 조작할 수 있습니다.\n선택한 음표의 피치를 반음 단위로 올리거나 내립니다." },
+    { target: "#canvas-wrapper",   text: "악보 영역입니다.\n마커를 클릭하면 음표가 선택됩니다.\nCtrl+클릭으로 여러 음표를 동시에 선택할 수 있습니다." },
+    { target: "#btn-up",           text: "음 높이 변경 버튼입니다.\n↑↓ 방향키로도 조작할 수 있습니다.\n선택한 음표의 피치를 반음 단위로 올리거나 내립니다." },
     { target: "#btn-dur-quarter",  text: "음표 길이 변경 버튼입니다.\n숫자키 1(온음표)~7(32분음표)로 빠르게 바꿀 수 있습니다.\n점(.) 키로 점음표를 토글합니다." },
-    { target: "#btn-sharp",       text: "임시표(#/b/♮) 변경 버튼입니다.\n선택한 음표에 샵, 플랫, 내추럴 등을 적용합니다." },
-    { target: "#btn-timeline",    text: "타임라인(TL) 패널을 엽니다.\n마디 안에서 음표들의 시간 배치를 시각적으로 확인하고,\n드래그로 위치를 조정할 수 있습니다." },
-    { target: "#btn-auto-align",  text: "마디 자동 정렬 (Shift+A).\n선택한 마디의 음표 간격을 균등하게 맞춥니다." },
-    { target: "#btn-download",    text: "완성된 악보를 XML 또는 MML 파일로 내보냅니다." },
+    { target: "#btn-sharp",        text: "임시표(#/b/♮) 변경 버튼입니다.\n선택한 음표에 샵, 플랫, 내추럴 등을 적용합니다." },
+    { target: "#btn-rest-toggle",  text: "음표 ↔ 쉼표 전환 (R 키).\n선택한 음표를 쉼표로, 쉼표를 음표로 바꿉니다." },
+    { target: "#btn-delete",       text: "음표 삭제 (Del 키).\n선택한 음표를 악보에서 제거합니다." },
+    { target: "#btn-undo",         text: "실행취소 / 다시실행 (Ctrl+Z / Ctrl+Y).\n잘못된 편집을 되돌리거나 복원합니다." },
+    { target: "#btn-triplet",      text: "셋잇단(Triplet) 적용/해제.\n선택 음표의 길이를 ×2/3 또는 ×3/2로 바꿉니다." },
+    { target: "#btn-timeline",     text: "타임라인(TL) 패널을 엽니다.\n마디 안에서 음표들의 시간 배치를 시각적으로 확인하고,\n드래그로 위치를 조정할 수 있습니다." },
+    { target: "#btn-auto-align",   text: "마디 자동 정렬 (Shift+A).\n선택한 마디의 음표 간격을 균등하게 맞춥니다." },
+    { target: "#btn-playall",      text: "전체 재생 (Space 키).\n악보를 처음부터 끝까지 소리로 들어볼 수 있습니다.\nBPM과 볼륨도 조절 가능합니다." },
+    { target: "#btn-download",     text: "완성된 악보를 XML 또는 MML 파일로 내보냅니다." },
   ];
 
   let currentStep = -1;