feat: カスタムカラーパレット機能を追加

- パレットモードの選択（自動生成/カスタム/プリセット）
- カスタムパレットエディタUI実装
- 色の追加/削除/編集機能
- プリセットパレット6種類追加（GameBoy, NES, PICO-8, CGA, グレースケール, セピア）
- カスタムパレットによる量子化アルゴリズム実装

🤖 Generated with [Claude Code](https://claude.ai/code)

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

Author: ayutaz

index.html

@@ -36,13 +36,49 @@ <h1 class="title">Image to Pixel Art</h1>
                 <h2 class="section-title">変換設定</h2>
                 <div class="settings-grid">
                     <div class="setting-group">
+                        <label class="setting-label">パレットモード</label>
+                        <div class="setting-control">
+                            <select id="paletteMode" class="select">
+                                <option value="auto">自動生成</option>
+                                <option value="custom">カスタムパレット</option>
+                                <option value="preset">プリセット</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="setting-group" id="autoColorGroup">
                         <label class="setting-label">色数</label>
                         <div class="setting-control">
                             <input type="range" id="colorCount" class="slider" min="2" max="256" value="8">
                             <span class="slider-value" id="colorCountValue">8</span>
                         </div>
                     </div>
 
+                    <div class="setting-group" id="customPaletteGroup" style="display: none;">
+                        <label class="setting-label">カスタムパレット</label>
+                        <div class="color-palette-editor">
+                            <div class="color-palette-grid" id="colorPaletteGrid">
+                                <!-- Colors will be added dynamically -->
+                            </div>
+                            <button class="btn btn-small" id="addColorButton">色を追加</button>
+                            <button class="btn btn-small" id="clearPaletteButton">クリア</button>
+                        </div>
+                    </div>
+                    
+                    <div class="setting-group" id="presetPaletteGroup" style="display: none;">
+                        <label class="setting-label">プリセットパレット</label>
+                        <div class="setting-control">
+                            <select id="presetPalette" class="select">
+                                <option value="gameboy">ゲームボーイ (4色)</option>
+                                <option value="nes">ファミコン (54色)</option>
+                                <option value="pico8">PICO-8 (16色)</option>
+                                <option value="cga">CGA (16色)</option>
+                                <option value="grayscale">グレースケール (8色)</option>
+                                <option value="sepia">セピア (8色)</option>
+                            </select>
+                        </div>
+                    </div>
+                    
                     <div class="setting-group">
                         <label class="setting-label">ピクセルサイズ</label>
                         <div class="setting-control">
@@ -117,6 +153,6 @@ <h2 class="section-title">変換結果</h2>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
 
     <!-- Main Application -->
-    <script src="src/js/app-v2.js"></script>
+    <script src="src/js/app-v3.js"></script>
 </body>
 </html>

src/css/main.css

@@ -195,13 +195,117 @@ body {
     border-color: #667eea;
 }
 
+/* Color Palette Editor */
+.color-palette-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.color-palette-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    gap: 8px;
+    padding: 12px;
+    background: #f7fafc;
+    border-radius: 8px;
+    min-height: 60px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.color-item {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+    border: 2px solid #e2e8f0;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.color-item:hover {
+    transform: scale(1.1);
+    border-color: #667eea;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+.color-item-remove {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    background: #e74c3c;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    font-size: 10px;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.color-item:hover .color-item-remove {
+    display: flex;
+}
+
+.color-item-add {
+    width: 40px;
+    height: 40px;
+    border: 2px dashed #cbd5e0;
+    border-radius: 6px;
+    background: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #a0aec0;
+    font-size: 24px;
+    transition: all 0.3s;
+}
+
+.color-item-add:hover {
+    border-color: #667eea;
+    color: #667eea;
+    background: #f7fafc;
+}
+
+.color-picker-popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    padding: 24px;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    z-index: 1001;
+}
+
+.color-picker-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 1000;
+}
+
 /* Buttons */
 .button-group {
     display: flex;
     gap: 16px;
     justify-content: center;
 }
 
+.btn-small {
+    padding: 6px 16px;
+    font-size: 14px;
+}
+
 .btn {
     padding: 12px 32px;
     border: none;