@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap");body{background-color:#36393f;color:#ffffff;font-family:Noto Sans KR,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}.container{background-color:#2f3136;padding:30px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.2);text-align:center}h1{margin-bottom:20px}.preview-box{background-color:#202225;padding:40px 20px;border-radius:8px;margin-bottom:30px;min-height:80px;display:flex;justify-content:center;align-items:center}#username-preview{font-size:2.5rem;font-weight:700;--custom-gradient-color-1:#00fff3;--custom-gradient-color-2:#ffffff;--custom-gradient-color-3:#00fff3}@keyframes animate-gradient{0%{background-position:200% 50%}to{background-position:0 50%}}.username-gradient{position:relative;background:linear-gradient(to right,var(--custom-gradient-color-1),var(--custom-gradient-color-2),var(--custom-gradient-color-3));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:200% 200%;transition:-webkit-text-decoration .2s ease;transition:text-decoration .2s ease;transition:text-decoration .2s ease,-webkit-text-decoration .2s ease}.username-gradient:after{content:attr(data-text);position:absolute;inset:0;z-index:-1;background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:blur(8px);opacity:0;transition:opacity .1s ease-in-out}.username-gradient.force-hover,.username-gradient:hover{text-decoration:underline;-webkit-text-decoration-color:var(--custom-gradient-color-1);text-decoration-color:var(--custom-gradient-color-1);text-underline-offset:4px;animation:animate-gradient 1.5s linear infinite}.username-gradient.force-hover:after,.username-gradient:hover:after{opacity:1}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}.control-group{flex-direction:column}.color-input-wrapper,.control-group{display:flex;align-items:center;gap:10px}.color-text-input{width:80px;padding:8px;border-radius:4px;border:1px solid #202225;background-color:#40444b;color:#ffffff;text-align:center;font-family:monospace}label{font-size:1rem}input[type=text]{padding:8px;border-radius:4px;border:1px solid #202225;background-color:#40444b;color:#ffffff;text-align:center}input[type=color]{width:60px;height:40px;border:none;background-color:transparent;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #202225;border-radius:4px}input[type=checkbox]{width:20px;height:20px;cursor:pointer}