:root{--primary:#2563eb;--secondary:#1e40af;--accent:#f59e0b;--background:#fff;--text:#111827}*{box-sizing:border-box;margin:0;padding:0}body{color:#111827;background:#f3f4f6;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}.app-container{max-width:1400px;margin:0 auto;padding:24px}.app-header{text-align:center;margin-bottom:32px}.app-header h1{color:#111827;font-size:28px;font-weight:800}.app-header h1 span{color:#2563eb}.app-header p{color:#6b7280;margin-top:4px;font-size:14px}.main-layout{align-items:flex-start;gap:32px;display:flex}.left-panel{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.right-panel{flex:0 0 450px;position:sticky;top:24px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 1px 3px #00000014}.card h3{color:#111827;align-items:center;gap:8px;margin-bottom:12px;font-size:15px;font-weight:700;display:flex}.card h3 .step-badge{color:#fff;background:#2563eb;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:inline-flex}textarea{resize:vertical;border:1px solid #d1d5db;border-radius:8px;width:100%;min-height:120px;padding:12px;font-family:inherit;font-size:14px;transition:border-color .2s}textarea:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb1a}input[type=text],input[type=email],input[type=tel],input[type=url]{border:1px solid #d1d5db;border-radius:8px;width:100%;padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .2s}input:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb1a}select{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;width:100%;padding:10px 12px;font-family:inherit;font-size:14px}label{color:#374151;margin-bottom:4px;font-size:13px;font-weight:600;display:block}.btn-primary{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 20px;font-family:inherit;font-size:15px;font-weight:700;transition:background .2s;display:inline-flex}.btn-primary:hover{background:#1d4ed8}.btn-primary:disabled{cursor:not-allowed;background:#93c5fd}.btn-secondary{color:#374151;cursor:pointer;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px 16px;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:#e5e7eb}.template-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.template-option{text-align:center;cursor:pointer;background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:12px;transition:all .2s}.template-option:hover{border-color:#93c5fd}.template-option.active{background:#eff6ff;border-color:#2563eb}.template-option .template-icon{margin-bottom:4px;font-size:24px}.template-option .template-name{color:#374151;font-size:12px;font-weight:600}.theme-options{gap:10px;display:flex}.theme-circle{cursor:pointer;border:3px solid #0000;border-radius:50%;width:36px;height:36px;transition:all .2s;position:relative}.theme-circle:hover{transform:scale(1.1)}.theme-circle.active{border-color:#111827}.theme-circle.active:after{content:"✓";color:#fff;font-size:14px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.copy-field{margin-bottom:12px}.copy-field:last-child{margin-bottom:0}.copy-field label{color:#6b7280;margin-bottom:2px;font-size:12px}.copy-field input{font-size:14px}.body-text-list{flex-direction:column;gap:6px;display:flex}.contact-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.preview-container{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 1px 3px #00000014}.preview-container h3{color:#111827;margin-bottom:16px;font-size:15px;font-weight:700}.preview-wrapper{background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.download-buttons{gap:10px;margin-top:16px;display:flex}.download-buttons button{flex:1}@media (width<=960px){.main-layout{flex-direction:column}.right-panel{flex:none;width:100%;position:static}.contact-grid{grid-template-columns:1fr}}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}