.modu-bg-overlay {
    background:
            radial-gradient(
                    ellipse at left top,
                    rgba(15, 25, 35, 0.7) 0%,
                    rgba(11, 20, 38, 0.8) 5%,
                    rgba(5,10,20,0.9) 55%,
                    rgba(0,0,0,1) 100%
            );
}

/* Chrome / Edge 자동완성 배경 제거 */
input.corner-gradient-input:-webkit-autofill,
input.corner-gradient-input:-webkit-autofill:hover,
input.corner-gradient-input:-webkit-autofill:focus,
input.corner-gradient-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;   /* 글자색 */
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    caret-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow:
            inset 2px -2px 1px rgb(115, 115, 115, 0.8),
            inset 2px 2px 1px rgb(0,0,0, 0.5),
            inset -2px 2px 1px rgba(155, 155, 155, 0.8),
            inset -2px -2px 1px rgb(0,0,0, 0.5) !important;
    transition: background-color 9999s ease-in-out 0s;

}

.corner-gradient-input {
    border: none;
    outline: none;

    box-shadow:
            inset 2px -2px 1px rgb(115, 115, 115, 0.8),
            inset 2px 2px 1px rgb(0,0,0, 0.5),
            inset -2px 2px 1px rgb(115, 115, 115, 0.8),
            inset -2px -2px 1px rgb(0,0,0, 0.5);

    transition: all 0.3s ease;
}

/* 프로필 눈덩이 */
.bounce {
    animation: bounceIn 0.4s ease;
}

@keyframes bounceIn {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.8);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

:root {
    font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
.pl,
.pl__inner-ring,
.pl__outer-ring,
.pl__track-cover {
    border-radius: 50%;
}
.pl {
    position: relative;
    width: 12em;
    height: 12em;
}
.pl__inner-ring,
.pl__outer-ring,
.pl__track-cover {
    position: absolute;
}
.pl__inner-ring {
    box-shadow:
    0 -0.25em 0.5em hsla(0, 0%, 100%, 0.4),
    0 0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset,
    0 0.5em 0.375em hsla(0, 0%, 0%, 0.15),
    0 -0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset;
    top: 2.375em;
    left: 2.375em;
    width: calc(100% - 4.75em);
    height: calc(100% - 4.75em);
}
.pl__outer-ring {
    box-shadow:
    0 -0.45em 0.375em hsla(0, 0%, 0%, 0.15),
    0 0.5em 0.75em hsla(0, 0%, 0%, 0.15) inset,
    0 0.25em 0.5em hsla(0, 0%, 100%, 0.4),
    0 -0.5em 0.75em hsla(0, 0%, 100%, 0.4) inset;
    top: 0.75em;
    left: 0.75em;
    width: calc(100% - 1.5em);
    height: calc(100% - 1.5em);
}
.pl__track-cover {
    animation-name: trackCover;
    background-image: conic-gradient(rgba(0,0,0,0) 210deg, hsla(223, 90%, 95%, 0) 270deg);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}