/* is-active 클래스가 추가되면 보인다. */
#result-screen{
    position: fixed;
    /* 가운데 정렬한다. */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    z-index: 8;
    display: none; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;    
    /* visibility: hidden으로 해도 애드센스 광고가 보인다.*/
    /* visibility: hidden; */
    /* 클릭할 수 없도록 한다. */
    /* pointer-events: none; */
}
#result-screen.is-active{
    display: flex;
    /* visibility: visible; */    
}
#result-title{
    font-size: 27px;
    font-weight: bold;
    padding: 20px;
    animation: titlePulse 1s infinite;
}

@keyframes titlePulse {
    50%{
        transform: scale(1.1);
    }
}
#result-entry{
    min-width: 400px;
    display: flex;
    flex-direction: column;
}

#result-form{
    display: flex;
    flex-direction: column;
    gap: 5px
}
#result-form input{
    width: 100%;
    padding: 20px;
    font-size: 22px;
    border-radius: 15px;
    border: 3px solid var(--site-color-1);
    outline: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.button-container{
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.button-container button{
    background-color: var(--site-color-1);
    font-size: 20px;
    padding: 10px;
    border-radius: 10px;
}