@charset "utf-8";

/* dialog */
.dialog{
    position: fixed; z-index: 13; top: 50%; left: 50%; transform: translate(-50%, -35%);
    width: 318px; height: auto; aspect-ratio: 1; margin: 0 auto; background: #d9d9d9 url("/assets/site/img/common/dialog-bg.svg") repeat-x center top;
    padding: 25px 20px; border-radius: 10px; border: 1px solid #fff; 
    opacity: 0; visibility: hidden; pointer-events: none;
    & .d-body{
        height: 100%; display: flex; flex-direction: column;
        
        & .d-mid{
            & .rslt{
                text-align: center; padding: 27px 0 0;
                & .tit{
                    position: relative; font-size: 36px; font-weight: var(--fweb); color: #002a3d; line-height: 1.2;
                    &:before{content: ""; display: block; margin: 0 auto 6px; width: 60px; height: auto; aspect-ratio: 1; border-radius: 8px; box-shadow: 0px 4px 4px rgba(0,0,0,0.25); background: url("/assets/site/img/common/success-chk.svg") no-repeat center; background-size: 100% auto;}
                }
                & .msg{padding: 6px 0 0; font-size: 16px; font-weight: var(--fwm); color: #a2a2a2; line-height: 1.25;}
            }
        }
        & .d-bot{
            margin-top: auto;
            & .btn-wrap{
                display: flex; justify-content: center; gap: 5px;

                & .btn{
                    display: block; padding: 0 15px; min-width: 140px; line-height: 35px; border-radius: 8px; background: #cbcbcb; border: 1px solid transparent; font-size: 16px; font-weight: var(--fwsb); color: #696969; transition: 0.2s;
                    &:hover{background: #8a8a8a; color: #fff;}
                }
            }
        }
    }

    &.on{opacity: 1; visibility: visible; pointer-events: initial; transform: translate(-50%, -50%); transition: 0.2s ease-out;}

    @media (width <= 640px){
        padding: 20px; aspect-ratio: initial; background-position: center bottom 80px;
        & .d-body{
            & .d-mid{
                & .rslt{
                    padding: 10px 0 20px;
                    & .tit{
                        font-size: 30px;
                        &:before{width: 40px;}
                    }
                }
            }
        }
    }
}