body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;background:linear-gradient(160deg,#dbeafe,#eff6ff 55%,#f5f3ff);font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;padding:2.5rem 1.5rem;box-sizing:border-box}.app-container{background:#fff;border-radius:20px;box-shadow:0 4px 6px #0000000a,0 20px 50px #1877f21a;width:100%;max-width:840px;overflow:hidden}.app-header{background:linear-gradient(135deg,#1877f2,#1251a3);padding:2rem 2.5rem;text-align:center}h1{color:#fff;font-size:1.75rem;font-weight:700;line-height:1.55;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.15)}.main-content{display:flex;gap:2rem;padding:2rem 2.5rem 2.5rem}.controls{flex:1;display:flex;flex-direction:column;gap:1.25rem}.preview{flex:1;display:flex;flex-direction:column;align-items:center}h2{font-size:.7rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .875rem}.input-group{display:flex;flex-direction:column;gap:.4rem}.input-group label{font-size:.875rem;font-weight:600;color:#374151}.input-group input[type=text],.input-group textarea{padding:.7rem .875rem;border:1.5px solid #e5e7eb;border-radius:8px;font-size:.95rem;color:#111827;outline:none;transition:border-color .15s,box-shadow .15s;font-family:inherit}.input-group input[type=text]:focus,.input-group textarea:focus{border-color:#1877f2;box-shadow:0 0 0 3px #1877f21f}.input-group input[type=text]::placeholder,.input-group textarea::placeholder{color:#c4cad4}.input-group textarea{resize:none;line-height:1.55}.color-picker-group{display:flex;gap:1rem}.color-picker-group .input-group{flex:1}.input-group input[type=color]{height:44px;width:100%;border:1.5px solid #e5e7eb;border-radius:8px;padding:3px 4px;cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s}.input-group input[type=color]:focus{border-color:#1877f2;box-shadow:0 0 0 3px #1877f21f}button{padding:.8rem 1.25rem;border:none;background:#1877f2;color:#fff;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;line-height:1.45;transition:background .15s,box-shadow .15s,transform .1s}button:hover:not(:disabled){background:#1565d8;box-shadow:0 4px 14px #1877f259}button:active:not(:disabled){transform:translateY(1px);box-shadow:none}button:disabled{opacity:.4;cursor:not-allowed}.button-group{display:flex;gap:8px}.button-group button{flex:6}.button-group button.secondary{flex:4;background:#fff;color:#1877f2;border:1.5px solid #1877f2}.button-group button.secondary:hover:not(:disabled){background:#eff6ff;box-shadow:0 4px 14px #1877f226}.qr-code-container{padding:1.25rem;border:1.5px solid #eef0f5;border-radius:16px;background:#fff;display:inline-block;text-align:center;box-shadow:0 2px 16px #00000012}.caption{margin-top:.875rem;font-size:1rem;color:#374151;font-weight:600;white-space:pre-line}canvas{display:block}.error-message{color:#dc2626;font-size:.825rem;margin:0;padding:.6rem .875rem;background:#fef2f2;border:1px solid #fecaca;border-radius:8px}@media(max-width:768px){#root{padding:0;align-items:flex-start}.app-container{border-radius:0;box-shadow:none;min-height:100vh}.app-header{padding:1.5rem 1.25rem}h1{font-size:1.4rem}.main-content{flex-direction:column;gap:1.25rem;padding:1.25rem}.preview{order:-1}}