@import url(/assets/css/reset.css);
@import url(/assets/css/serviceRoot.css);

html{
    background: #fff;
}

.desc-blank{
    background: #fff;
    padding: 24px;
    height: 100vh;
}

.desc-blank .desc-blank-wrapper{
    border-radius: 16px;
    border: 1px solid var(--Color-greyscale-300);
    height: 100%;
    overflow: hidden;
}

.desc-blank .desc-blank-wrapper .header {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--Color-greyscale-300);
    background: var(--Color-greyscale-100);
}
.desc-blank .desc-blank-wrapper .header .header-wrapper {
height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px 0;
max-width: 1440px;
width: 100%;
}
.desc-blank .desc-blank-wrapper .header .header-wrapper .logo {
height: 36px;
display: flex;
justify-content: flex-end;
}
.desc-blank .desc-blank-wrapper .header .header-wrapper .title {
display: flex;
justify-content: space-between;
align-items: baseline;
}

.desc-blank .desc-blank-wrapper .header .header-wrapper .title > div{
    display: flex;
    align-items: center;
    gap: 10px;
}

.desc-blank .desc-blank-wrapper .header .header-wrapper .title .ct_custom.btn.icon{
    width: 50px;
    font-size: 32px;
}

.desc-blank .desc-blank-wrapper .header .header-wrapper .title h1 {
color: var(--Color-greyscale-1100);
font-size: 32px;
font-weight: 600;
}
.desc-blank .desc-blank-wrapper .header .header-wrapper .title p {
color: var(--Color-greyscale-800);
text-align: right;
font-size: 14px;
font-weight: 400;
line-height: 150%;
}
  
.desc-blank .desc-blank-wrapper .custom-scroll{
    height: calc(100% - 180px);
}

.desc-blank .desc-blank-wrapper .body {
    display: flex;
    justify-content: center;
    background: var(--Color-greyscale-050);
    min-height: calc(100vh - 230px);
    
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper {
    display: flex;
    max-width: 1440px;
    width: 100%;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .content {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 200px;
    flex: 1;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker {
    width: fit-content;
    padding: 40px 20px 40px 0;
    height: 600px;
    position: relative;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker .tracker-scroll {
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker .tracker-scroll::-webkit-scrollbar { display: none; }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker ol {
    padding-left: 45px;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker ol.steps{
    padding-left: 16px;
  }

  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker ol.steps li{
    list-style: none;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker li {
    list-style: auto;
    color: var(--Color-greyscale-600);
    height: fit-content;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 130%;
    position: relative;
    cursor: pointer;
    transition: all 0.5s;
    padding-left: 4px;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker li span {
    margin-right: 4px;
    font-weight: 400;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker li::before {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    position: absolute;
    top: 0;
    left: -45px;
    background: var(--Color-greyscale-400);
  }

  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker .steps li::before{
    left: -16px;
  }

  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker li.active {
    color: var(--Color-greyscale-900);
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker li.active::before {
    background: var(--Color-greyscale-900);
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker.shadow-up .shadow-top {
    opacity: 1;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker.shadow-down .shadow-bottom {
    opacity: 1;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker .shadow-top {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 54px;
    top: 40px;
    background: linear-gradient(0deg, rgba(252, 252, 252, 0) 0%, #FCFCFC 100%);
    z-index: 1;
    transition: all 0.2s;
  }
  .desc-blank .desc-blank-wrapper .body .body-wrapper .tracker .shadow-bottom {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 54px;
    bottom: 40px;
    background: linear-gradient(180deg, rgba(252, 252, 252, 0) 0%, #FCFCFC 100%);
    transition: all 0.2s;
  }
  

#save-privacy-table{

    tr > *:nth-child(1){
        width: 311px;
    }
    tr > *:nth-child(2){
        width: 156px;
    }

}


.content{
    > article, > div{
        display: flex;
        flex-direction: column;
        max-width: 740px;
    }
   

    div:not(.ct_custom) ul:not(.accordion-list){
        &[data-step='0']{
            padding: 4px 10px;
        }
        &[data-step='1']{
            padding: 4px 20px;
        }
        margin-bottom: -4px;
        li{
            padding-bottom: 4px;
            display: grid;
            grid-template-columns: 26px 1fr;
            color: var(--Color-greyscale-900);
            font-size: 16px;
            font-weight: 300;
            line-height: 26px;
            align-items: start;
            &::before{
                content: "·";
                font-weight: 900;
                width: 26px;
                height: 26px;
                position: relative;
                display: block;
                text-align: center;
            }
        }
    }
}


.ct_custom.check-desc p{
    color: var(--Color-greyscale-900);
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
}

.ct_custom.check-desc ul li{
    height: fit-content;
    align-items: start;
}

.ct_custom.alert-desc {
    border-radius: 6px;
    border: 1px solid var(--Color-yellow-100);
    background: var(--Color-yellow-0);
    padding: 16px;
}
.ct_custom.alert-desc .desc-title{
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    align-items: center;
    padding-bottom: 8px;
}
.ct_custom.alert-desc .desc-title .icon{
    font-size: 18px;
}
.ct_custom.alert-desc .desc-title p{
    color: var(--Color-yellow-600, #c2821b);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.15px;
}


.ct_custom.alert-desc .desc-content{
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ct_custom.alert-desc p {
    color: var(--Color-yellow-900);
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
}

.ct_custom.alert-desc a {
    color: var(--Color-yellow-900);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    text-decoration: underline;
}
.ct_custom.alert-desc ul{
    margin-bottom: unset;
}

.ct_custom.alert-desc ul li {
    height: auto;
    align-items: center;
    color: var(--Color-yellow-900);
    font-size: 13px;
    /* font-weight: 900; */
    font-weight: 400;
    line-height: normal;
    padding: 0;
}
.ct_custom.alert-desc ul li::before{
    height: unset;
}

.ct_custom.alert-desc .guide-image{
    width: 100%;
    border-radius: 10px;

}

.ct_custom.alert-desc .guide-image img{
    width: 100%;
    mix-blend-mode: multiply;
}


.content.terms{
    gap: 40px;
    > article, > div{
        gap: 12px;
    }
    h2{
        color: var(--Color-greyscale-1000);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 29px;
        span{
            font-weight: 300;
        }
    }
    h3{
        color: var(--Color-greyscale-1000);
        font-size: 16px;
        font-weight: 600;
        line-height: 26px; /* 162.5% */
    }
    p,a{
        color: var(--Color-greyscale-900);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
        word-break: break-all;
    }
    *.light{
        font-weight: 300;
    }
    *.medium{
        color: var(--Color-greyscale-1000);
        font-weight: 500;
    }

    ol{
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin:0;
        padding-left: 18px;
       li{
           list-style: auto;
           color: var(--Color-greyscale-900);
           font-size: 16px;
           line-height: 26px;
           word-break: break-all;
           > ol {
               list-style: none;
               counter-reset: list-counter;
               padding: 4px 0;
               > li{
                   list-style: none;
                   counter-increment: list-counter;
                   display: grid;
                   grid-template-columns: 30px 1fr;
               }
               > li::before{
                   content: counter(list-counter) " )";
                   white-space: nowrap;
               }
           }
       }
    }
    .ul-container{
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 0;
    }
    .table-container{
        padding: 12px 0;
    }
    div[data-step='1']{
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    div[data-step='2']{
        padding: 6px 20px 4px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
}

.guide,.list{
    a{
        color: var(--Color-greyscale-900);
        font-weight: 300;
        line-height: normal;
        text-decoration: none;
        span.icon{
            height: 28px;
            color: var(--Color-greyscale-700);
            top: 5px;
            position: relative;
            font-weight: 300;
        }
        &:hover{
            color: var(--Color-blue-500);
            span.icon{color: var(--Color-blue-500);}
        }
    }
    .guide-image{
        border-radius: 8px;
        background: var(--Color-greyscale-200);
        height: 260px;
        width: 740px;
        display: flex;
        justify-content: center;
        img{
            width: auto;
            height: 100%;
        }
    }
    p{
        color: var(--Color-greyscale-1000);
        font-size: 16px;
        font-weight: 400;
        line-height: 25px;
        letter-spacing: 0.08px;
        word-break: break-all;
    }
    ul li{
        p{
            color: var(--Color-greyscale-1000);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }
    }
    .warning-desc{
        padding: 8px 10px;
    }
}

.content.guide{
    gap: 60px;
    .bold{
        font-weight: 600;
        line-height: 24px;
    }
    .light{
        font-weight: 500;
        line-height: 24px;
    }
    .red{
        color: var(--Color-red-600);
    }
    > article, > div {
        gap: 16px;
        .article-title{
            display: inline;
            font-size: 20px;
            *{
                display: inline;
            }
            p{
                color: var(--Color-greyscale-900);
                font-size: 20px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
            }
            .step{
                color: var(--Color-greyscale-1000);
                font-weight: 700;
            }
            .light{
                color: var(--Color-greyscale-700);
                font-weight: 400;
            }
            .icon.light{
                color: var(--Color-greyscale-600);
                font-size: 20px;
                top: 4px;
                position: relative;
            }
            div.light{
                gap: 2px;
            }
            a{
                font-size: 20px;
                font-weight: 600;
                span.icon{
                    font-size: 24px;
                }
            }
            
        }
    }
}

table{
    width: 100%;
}

table thead tr{
    
    border: 1px solid var(--Color-greyscale-300);
    border-right: 0;
}
table th{
    background: var(--Color-greyscale-200);
    border-right: 1px solid var(--Color-greyscale-300);
    padding: 8px 16px;
    font-size: 14px;
    text-align: left;
}
table tbody tr{
    border: 1px solid var(--Color-greyscale-300);
    border-right: 0;
}
table tbody tr > *{
    border-right: 1px solid var(--Color-greyscale-300);
}

table tbody tr > *:first-child{
    border-left: 1px solid var(--Color-greyscale-300);
}

table tbody tr td,
table tbody tr td:first-child,
table tbody tr td:last-child{
    padding: 12px 16px;
    font-size: 14px;
    color: var(--Color-greyscale-1000);
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
}


.list-wrapper{
    background: var(--Color-greyscale-200);
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 2px;
}

.list-wrapper .list-container{
    background: var(--Color-greyscale-050);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    
    color: var(--Color-greyscale-800);
    font-size: 15px;
    font-weight: 500;
}

.list-wrapper a.list-container:hover{
    background: var(--Color-greyscale-100);
    color: var(--Color-greyscale-1000);
}

.list-wrapper .list-container p.icon{
    width: 24px;
    height: 24px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-wrapper .list-children{
    background: var(--Color-greyscale-100);
    padding: 16px 10px 20px 10px;
}

.list-wrapper .list-children.buttons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}



/* 아코디언 */

.accordion-list {
    width: 100%;
    border-top: 1px solid var(--Color-greyscale-200); 
}
.content .accordion-list .accordion-item {
    border-bottom: 1px solid var(--Color-greyscale-200); 
}
.accordion-list .accordion-item::before{
    display: none !important;
}
.accordion-list .accordion-item .accordion-link {
    display: grid; 
    grid-template-columns: 30px 1fr;
    gap: 15px;
    align-items: center;
    position: relative; 
    padding: 17px 0; 
    transition: all 0.3s;    
    color: var(--Color-greyscale-1000);
    font-size: 15px;
    font-weight: 600;
}
.accordion-list .accordion-item .accordion-link::before {
    content: "keyboard_control_key"; 
    font-family: 'Material Symbols Rounded';
    position: absolute;
    right: 4px;
    font-size: 22px;
    transition: all 0.3s;
    color: var(--Color-greyscale-600);
    font-weight: 300;
}
.accordion-list .accordion-item.active .accordion-link::before {
    transform: rotateX(180deg);
    color: var(--Color-greyscale-1000);
    font-weight: 400;
}
.accordion-list .accordion-name {
    position: relative; 
    width: calc(100% - 50px); 
}

.accordion-list .accordion-item .accordion-desc {
    display: none;
    padding: 16px 10px 20px 10px;
    border-top: 1px solid var(--Color-greyscale-200); 
    background: var(--Color-greyscale-100);
    color: var(--Color-greyscale-900);
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}