:root{--bg-primary:#0a0f1d;--bg-secondary:#111827;--bg-tertiary:#1e293b;--bg-card:#1e293bb3;--bg-card-hover:#334155cc;--bg-input:#0f172a;--border-subtle:#1e293b;--border-medium:#334155;--border-focus:#38bdf8;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-accent:#38bdf8;--accent-cyan:#06b6d4;--accent-blue:#3b82f6;--accent-indigo:#6366f1;--accent-purple:#8b5cf6;--accent-green:#10b981;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--gradient-primary:linear-gradient(135deg, #0284c7 0%, #6366f1 100%);--gradient-card:linear-gradient(180deg, #1e293b99 0%, #0f172acc 100%);--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0003, 0 2px 4px -2px #0003;--shadow-lg:0 10px 15px -3px #0000004d, 0 4px 6px -4px #0000004d;--shadow-glow:0 0 20px #38bdf840;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--font-sans:"Pretendard", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5;overflow-x:hidden}#app{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0}.header-container{justify-content:space-between;align-items:center;gap:1rem;max-width:1440px;margin:0 auto;padding:1rem 1.5rem;display:flex}.header-brand{align-items:center;gap:.875rem;display:flex}.brand-icon{border-radius:var(--radius-md);background:var(--gradient-primary);color:#fff;width:44px;height:44px;box-shadow:var(--shadow-glow);justify-content:center;align-items:center;display:flex;position:relative}.icon-pulse{border-radius:var(--radius-md);z-index:-1;background:#38bdf866;width:100%;height:100%;animation:2.5s infinite pulse-ring;position:absolute}@keyframes pulse-ring{0%{opacity:.8;transform:scale(.95)}50%{opacity:0;transform:scale(1.15)}to{opacity:0;transform:scale(.95)}}.brand-title{letter-spacing:-.02em;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;display:flex}.badge-wasm{color:var(--accent-cyan);border-radius:var(--radius-sm);text-transform:uppercase;background:#38bdf826;border:1px solid #38bdf84d;padding:.15rem .45rem;font-size:.675rem;font-weight:700}.brand-subtitle{color:var(--text-secondary);font-size:.825rem}.header-actions{align-items:center;gap:.75rem;display:flex}.model-status-badge{border-radius:var(--radius-sm);background:var(--bg-tertiary);border:1px solid var(--border-medium);align-items:center;gap:.5rem;padding:.4rem .75rem;font-size:.8rem;font-weight:500;display:flex}.status-indicator{border-radius:50%;width:8px;height:8px}.status-offline{background:var(--accent-rose);box-shadow:0 0 8px var(--accent-rose)}.status-loading{background:var(--accent-amber);box-shadow:0 0 8px var(--accent-amber);animation:1s infinite alternate blink}.status-ready{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}@keyframes blink{0%{opacity:.4}to{opacity:1}}.progress-bar-container{border-top:1px solid var(--border-subtle);background:#0f172ae6;padding:.4rem 1.5rem;position:relative;overflow:hidden}.progress-bar-fill{background:var(--gradient-primary);width:0%;height:3px;transition:width .2s;position:absolute;top:0;left:0}.progress-info{color:var(--accent-cyan);font-size:.75rem;font-family:var(--font-mono);justify-content:space-between;display:flex}.app-main{flex-direction:column;flex:1;gap:1.5rem;width:100%;max-width:1440px;margin:0 auto;padding:1.5rem;display:flex}.app-layout{grid-template-columns:1fr 1fr;align-items:start;gap:1.5rem;display:grid}@media (width<=1024px){.app-layout{grid-template-columns:1fr}}.right-column-stack{flex-direction:column;gap:1.5rem;display:flex}.panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-md);padding:1.25rem;transition:border-color .2s}.panel:hover{border-color:var(--border-medium)}.panel-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.panel-title-group{align-items:center;gap:.6rem;display:flex}.step-num{width:24px;height:24px;color:var(--accent-cyan);background:#38bdf826;border:1px solid #38bdf84d;border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.panel-header h2{letter-spacing:-.01em;font-size:1rem;font-weight:600}.panel-hint{color:var(--text-muted);font-size:.75rem}.category-tabs{gap:.4rem;margin-bottom:.75rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.category-tab-btn{background:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:1px solid #0000;padding:.4rem .75rem;font-size:.75rem;font-weight:500;transition:all .2s}.category-tab-btn:hover{color:var(--text-primary);background:var(--border-medium)}.category-tab-btn.active{color:var(--accent-cyan);background:#38bdf826;border-color:#38bdf866}.preset-list{flex-direction:column;gap:.5rem;max-height:230px;margin-bottom:1.25rem;padding-right:.25rem;display:flex;overflow-y:auto}.preset-card{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;padding:.75rem .875rem;transition:all .2s}.preset-card:hover{border-color:var(--accent-cyan);background:#1e293be6;transform:translateY(-1px)}.preset-card.selected{border-color:var(--accent-cyan);box-shadow:inset 0 0 0 1px var(--accent-cyan);background:#06b6d41a}.preset-korean{color:var(--text-primary);margin-bottom:.25rem;font-size:.925rem;font-weight:600}.preset-meta{color:var(--text-muted);flex-direction:column;gap:.2rem;font-size:.75rem;display:flex}.preset-translation{color:var(--text-secondary)}.preset-focus{color:var(--accent-cyan);font-size:.7rem}.custom-editor-box{flex-direction:column;gap:.875rem;display:flex}.editor-header{justify-content:space-between;align-items:center;display:flex}.editor-label{color:var(--text-secondary);font-size:.8rem;font-weight:600}.char-count{color:var(--text-muted);font-size:.7rem;font-family:var(--font-mono)}textarea#koreanInput{background:var(--bg-input);border:1px solid var(--border-medium);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-size:.95rem;font-family:var(--font-sans);resize:vertical;outline:none;padding:.75rem;line-height:1.5;transition:border-color .2s,box-shadow .2s}textarea#koreanInput:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px #38bdf833}.payload-header-left{align-items:center;gap:.5rem;font-weight:600;display:flex}.badge-ipa{color:var(--accent-cyan);border-radius:var(--radius-sm);letter-spacing:.02em;background:#38bdf826;border:1px solid #38bdf84d;padding:.1rem .4rem;font-size:.65rem;font-weight:700}.phonetic-preview-card{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.75rem}.phonetic-preview-header{color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:.4rem;font-size:.725rem;display:flex}.phonetic-pronunciation-row{align-items:baseline;gap:.4rem;margin-bottom:.35rem;font-size:.8rem;display:flex}.phonetic-pronunciation-label{color:var(--text-muted);font-size:.725rem;font-weight:500}.phonetic-pronunciation-text{color:#34d399;font-family:var(--font-sans);letter-spacing:.02em;font-weight:600}.phonetic-text{font-family:var(--font-mono);color:var(--accent-cyan);word-break:break-word;min-height:24px;font-size:.825rem;line-height:1.4}.manual-phoneme-input{background:var(--bg-secondary);border:1px solid var(--border-medium);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-mono);outline:none;margin-top:.3rem;padding:.4rem .5rem;font-size:.8rem}.controls-grid{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;display:grid}@media (width<=640px){.controls-grid{grid-template-columns:1fr}}.control-item{flex-direction:column;gap:.35rem;display:flex}.voice-control-item{grid-column:span 2}@media (width<=640px){.voice-control-item{grid-column:span 1}}.control-label{color:var(--text-secondary);font-size:.775rem;font-weight:600}.control-label-row{justify-content:space-between;align-items:center;display:flex}.control-val{font-size:.775rem;font-family:var(--font-mono);color:var(--accent-cyan);font-weight:600}.form-select,.form-input{background:var(--bg-input);border:1px solid var(--border-medium);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;font-family:var(--font-sans);outline:none;padding:.5rem .75rem}.form-select:focus,.form-input:focus{border-color:var(--border-focus)}.voice-description{color:var(--text-muted);margin-top:.1rem;font-size:.7rem}.form-range{width:100%;accent-color:var(--accent-cyan);cursor:pointer}.range-labels{color:var(--text-muted);justify-content:space-between;font-size:.675rem;display:flex}.generate-btn-row{gap:.75rem;display:flex}.generate-btn{flex:1;justify-content:center;padding:.75rem 1.5rem;font-size:.95rem}.cancel-btn{align-items:center;gap:.4rem;padding:.75rem 1.25rem;font-weight:600;display:inline-flex}.audio-metrics-badge{font-size:.725rem;font-family:var(--font-mono);color:var(--accent-cyan);border-radius:var(--radius-sm);background:#38bdf81a;border:1px solid #38bdf840;padding:.2rem .5rem}.visualizer-container{border:1px solid var(--border-medium);border-radius:var(--radius-md);background:#0f172a;height:100px;margin-bottom:.875rem;position:relative;overflow:hidden}#waveformCanvas{width:100%;height:100%;display:block}.visualizer-overlay{width:100%;height:100%;color:var(--text-muted);pointer-events:none;justify-content:center;align-items:center;font-size:.8rem;display:flex;position:absolute;top:0;left:0}.player-controls-row{align-items:center;gap:.875rem;display:flex}.btn-circle{background:var(--gradient-primary);color:#fff;cursor:pointer;width:42px;height:42px;box-shadow:var(--shadow-glow);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:transform .15s,opacity .2s;display:flex}.btn-circle:hover:not(:disabled){transform:scale(1.05)}.btn-circle:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.playback-progress-wrap{flex:1;align-items:center;gap:.6rem;display:flex}.time-display{font-size:.725rem;font-family:var(--font-mono);color:var(--text-muted);min-width:36px}.seek-slider{accent-color:var(--accent-cyan);cursor:pointer;flex:1}.player-action-btns{gap:.5rem;display:flex}.btn{border-radius:var(--radius-sm);font-size:.825rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;border:1px solid #0000;align-items:center;gap:.4rem;padding:.5rem 1rem;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-glow)}.btn-primary:hover:not(:disabled){opacity:.95;transform:translateY(-1px)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-medium)}.btn-secondary:hover:not(:disabled){background:var(--border-medium);border-color:var(--text-muted)}.btn-danger{color:var(--accent-rose);background:#f43f5e26;border-color:#f43f5e66}.btn-danger:hover:not(:disabled){background:var(--accent-rose);color:#fff;border-color:var(--accent-rose);transform:translateY(-1px)}.btn-outline{color:var(--text-secondary);border-color:var(--border-medium);background:0 0}.btn-outline:hover:not(:disabled){color:var(--text-primary);border-color:var(--accent-cyan)}.btn-ghost{color:var(--text-muted);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--accent-rose)}.btn-sm{padding:.35rem .65rem;font-size:.75rem}.btn-lg{padding:.75rem 1.25rem;font-size:.925rem}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.btn-link{color:var(--accent-cyan);cursor:pointer;background:0 0;border:none;font-size:.725rem;text-decoration:underline}.btn-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-footer{background:var(--bg-secondary);border-top:1px solid var(--border-subtle);color:var(--text-muted);margin-top:auto;padding:1rem 1.5rem;font-size:.75rem}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;max-width:1440px;margin:0 auto;display:flex}