:root{--primary-color:#2d2d2d;--secondary-color:#666;--accent-color:#1a1a1a;--success-color:#666;--danger-color:#999;--bg-light:#1a1a1a;--bg-white:#fff;--bg-dark:#000;--text-dark:#fff;--text-light:#999;--border-color:#333;--shadow:0 4px 6px #00000080;--shadow-lg:0 10px 25px #00000080}*{box-sizing:border-box;margin:0;padding:0}body{background:#000;min-height:100vh;padding:20px;font-family:Segoe UI,Malgun Gothic,맑은 고딕,sans-serif;line-height:1.6}.container{max-width:800px;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);background:#1a1a1a;border-radius:16px;margin:0 auto;padding:40px}.top-bar{border:1px solid var(--border-color);background:#2d2d2d;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:30px;padding:15px 20px;display:flex}.user-info{align-items:center;gap:15px;display:flex}.welcome-text{color:var(--text-light);font-size:.95rem}.badge{border-radius:6px;padding:6px 12px;font-size:.85rem;font-weight:500}.trial-badge{color:#81c784;background:#4caf501a;border:1px solid #4caf504d}.paid-badge{color:#64b5f6;background:#2196f31a;border:1px solid #2196f34d}.expired-badge{color:#ffb74d;background:#ff98001a;border:1px solid #ff98004d}.top-actions{gap:10px;display:flex}.btn-secondary{color:var(--text-light);border:1px solid var(--border-color);background:0 0;border-radius:6px;padding:8px 16px;font-size:.9rem;text-decoration:none;transition:all .3s}.btn-secondary:hover{color:#fff;background:#333;border-color:#666}header{text-align:center;margin-bottom:40px}h1{color:var(--text-dark);margin-bottom:10px;font-size:2.5rem}.subtitle{color:var(--text-light);font-size:1.1rem}.disclaimer{background:#2d2d2d;border-left:4px solid #666;border-radius:8px;margin-bottom:30px;padding:20px}.disclaimer h3{color:#999;margin-bottom:10px;font-size:1.1rem}.disclaimer ul{color:var(--text-light);margin-left:20px}.disclaimer li{color:var(--text-light);margin-bottom:8px}.form-group{margin-bottom:25px}label{color:var(--text-dark);margin-bottom:8px;font-size:1.05rem;font-weight:600;display:block}.required{color:var(--danger-color)}.help-text{color:var(--text-light);margin-bottom:8px;font-size:.9rem}input[type=file]{border:2px dashed var(--border-color);background:var(--bg-dark);width:100%;color:var(--text-dark);cursor:pointer;border-radius:8px;padding:12px;transition:all .3s}input[type=file]:hover{background:#0d0d0d;border-color:#666}.image-preview{text-align:center;margin-top:15px}.image-preview img{max-width:100%;max-height:300px;box-shadow:var(--shadow);border-radius:8px}textarea{border:2px solid var(--border-color);resize:vertical;background:var(--bg-dark);width:100%;color:var(--text-dark);border-radius:8px;padding:15px;font-family:inherit;font-size:1rem;transition:border-color .3s}textarea:focus{border-color:#666;outline:none}.char-count{text-align:right;color:var(--text-light);margin-top:5px;font-size:.9rem}select{border:2px solid var(--border-color);background:var(--bg-dark);width:100%;color:var(--text-dark);cursor:pointer;border-radius:8px;padding:12px;font-size:1rem;transition:border-color .3s}select:focus{border-color:#666;outline:none}.voice-mode-selector{flex-direction:column;gap:12px;display:flex}.radio-option{border:2px solid var(--border-color);cursor:pointer;background:var(--bg-dark);color:var(--text-dark);border-radius:8px;align-items:center;padding:15px;transition:all .3s;display:flex}.radio-option:hover{background:#0d0d0d;border-color:#666}.radio-option input[type=radio]{cursor:pointer;width:20px;height:20px;margin-right:12px}.radio-option span{color:var(--text-dark);font-size:1rem}.voice-options{flex-direction:column;gap:12px;margin-top:15px;display:flex}.voice-option{border:2px solid var(--border-color);background:var(--bg-dark);border-radius:8px;justify-content:space-between;align-items:center;padding:12px 15px;transition:all .3s;display:flex}.voice-option:hover{background:#0d0d0d;border-color:#666}.voice-radio{cursor:pointer;flex:1;align-items:center;display:flex}.voice-radio input[type=radio]{cursor:pointer;width:20px;height:20px;margin-right:12px}.voice-info{flex-direction:column;gap:4px;display:flex}.voice-info strong{color:var(--text-dark);font-size:1rem}.voice-desc{color:#888;font-size:.85rem}.preview-btn{background:var(--bg-white);color:var(--bg-dark);border:2px solid var(--bg-white);cursor:pointer;white-space:nowrap;border-radius:6px;padding:8px 16px;font-size:.9rem;font-weight:600;transition:all .3s}.preview-btn:hover{background:var(--bg-dark);color:var(--bg-white);transform:translateY(-2px)}.preview-btn:active{transform:translateY(0)}.preview-btn.playing{color:var(--bg-white);background:#666;border-color:#666}.voice-input-methods{flex-direction:column;gap:20px;margin-top:15px;display:flex}.method-option{border:2px dashed var(--border-color);background:var(--bg-light);border-radius:8px;padding:20px}.method-divider{text-align:center;color:var(--text-light);padding:10px 0;font-weight:600;position:relative}.method-divider:before,.method-divider:after{content:"";background:var(--border-color);width:40%;height:1px;position:absolute;top:50%}.method-divider:before{left:0}.method-divider:after{right:0}.method-btn{background:var(--bg-white);width:100%;color:var(--bg-dark);border:2px solid var(--bg-white);cursor:pointer;border-radius:8px;padding:14px;font-size:1.05rem;font-weight:600;transition:all .3s}.method-btn:hover{background:var(--bg-dark);color:var(--bg-white);transform:translateY(-2px)}.file-name{color:var(--success-color);margin-top:10px;font-size:.95rem;font-weight:500}.recording-indicator{background:#2d2d2d;border:2px solid #666;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:12px;animation:2s infinite pulse;display:flex}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}#recordingStatus{color:var(--danger-color);font-weight:600}#recordingTime{color:var(--text-dark);font-family:monospace;font-size:1.1rem;font-weight:700}.stop-btn{background:var(--border-color);width:100%;color:var(--bg-white);cursor:pointer;border:2px solid #666;border-radius:8px;padding:12px;font-size:1rem;font-weight:600;transition:all .3s}.stop-btn:hover{background:#666;border-color:#999}.submit-btn{background:var(--bg-white);width:100%;color:var(--bg-dark);border:2px solid var(--bg-white);cursor:pointer;box-shadow:var(--shadow);border-radius:8px;padding:16px;font-size:1.2rem;font-weight:600;transition:all .3s}.submit-btn:hover{background:var(--bg-dark);color:var(--bg-white);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.submit-btn:active{transform:translateY(0)}.loading-overlay{z-index:9999;background:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.loading-overlay.active{display:flex}.loading-content{text-align:center;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:16px;padding:40px}.spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:60px;height:60px;margin:0 auto 20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-content h2{margin-bottom:15px;font-size:1.5rem}.loading-message{margin-bottom:25px;font-size:1.1rem;font-weight:500}.progress-container{width:100%;max-width:500px;margin:0 auto 20px}.progress-bar{background:#fff3;border-radius:15px;width:100%;height:30px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.progress-fill{background:linear-gradient(90deg,#fff,#e0e0e0);border-radius:15px;width:0%;height:100%;transition:width .5s;box-shadow:0 2px 8px #ffffff4d}.progress-text{text-align:center;color:#fff;margin-top:10px;font-size:1.2rem;font-weight:600}.loading-detail{color:#ffffffe6;min-height:20px;margin-bottom:10px;font-size:.95rem}.loading-note{color:#ffffffb3;margin-top:15px;font-size:.9rem}.result-section{margin-top:30px}.video-container{box-shadow:var(--shadow-lg);border-radius:12px;margin-bottom:30px;overflow:hidden}.video-container video{width:100%;display:block}.result-actions{gap:15px;margin-bottom:30px;display:flex}.btn{text-align:center;box-shadow:var(--shadow);border-radius:8px;flex:1;padding:14px 20px;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s}.btn-download{background:var(--bg-white);color:var(--bg-dark);border:2px solid var(--bg-white)}.btn-download:hover{background:var(--bg-dark);color:var(--bg-white);transform:translateY(-2px)}.btn-secondary{background:var(--border-color);color:var(--bg-white);border:2px solid #666}.btn-secondary:hover{background:#666;border-color:#999;transform:translateY(-2px)}.message-info{background:var(--bg-light);border-radius:8px;margin-bottom:20px;padding:20px}.message-info h3{color:var(--text-dark);margin-bottom:10px}.message-box{background:var(--bg-dark);color:var(--text-light);border-left:4px solid #666;border-radius:6px;padding:15px;line-height:1.8}.info-box{background:#2d2d2d;border-left:4px solid #666;border-radius:8px;padding:15px}.info-box p{color:var(--text-light);margin:5px 0}.sample-text-section{background:#2d2d2d;border:2px solid #666;border-radius:10px;margin-top:15px;padding:20px}.sample-text-header{margin-bottom:15px}.sample-text-header strong{color:var(--bg-white);font-size:1.1rem}.sample-text-header .help-text{margin-top:5px;font-size:.9rem}.sample-texts{flex-direction:column;gap:12px;display:flex}.sample-text-item{background:var(--bg-dark);border-left:4px solid #666;border-radius:8px;padding:12px 15px}.sample-text-item strong{color:#999;margin-bottom:6px;font-size:.95rem;display:block}.sample-text-item p{color:var(--text-light);margin:0;font-size:.95rem;line-height:1.7}footer{border-top:2px solid var(--border-color);text-align:center;color:var(--text-light);margin-top:40px;padding-top:20px;font-size:.9rem}@media (max-width:768px){.container{padding:20px}h1{font-size:2rem}.result-actions{flex-direction:column}}.draft-box{background:#2d2d2d;border:1px dashed #666;border-radius:8px;margin-bottom:12px;padding:12px 14px}.draft-input{border:2px solid var(--border-color);background:var(--bg-dark);min-width:0;color:var(--text-dark);border-radius:6px;flex:1;padding:10px 12px;font-family:inherit;font-size:.95rem}.draft-input:focus{border-color:#666;outline:none}.btn-secondary,.badge,.welcome-text{white-space:nowrap}@media (max-width:768px){body{padding:10px}.top-bar{flex-direction:column;align-items:stretch;gap:12px;padding:12px}.user-info{flex-wrap:wrap;gap:8px}.top-actions{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px;display:grid}.top-actions .btn-secondary{text-align:center;padding:8px 6px;font-size:.85rem}h1{word-break:keep-all;font-size:1.6rem}.subtitle{word-break:keep-all;font-size:.95rem}}