.url-input-explanation{
    padding: 8px 4px;
    position: absolute;
    top: -70%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: max-content;
    background: var(--white);
    box-shadow: 0 4px 15px 0 #4B577545;
    border-radius: 4px;
    color: var(--black);
}
.url-input-explanation::after{
    position: absolute;
    top: 80%;
    left: 50%;
    content: " ";
    height: 0;
    border-bottom: 15px solid;
    border-left: 10px solid var(--opacity00);
    border-right: 10px solid  var(--opacity00);
    color: var(--white);
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}


main{
    width: 1420px;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ and Edge */
    user-select: none;         /* Standard syntax */
}
.product_section>h2{
    position: sticky;
    top: 60px;
    z-index: 4;
    background: var(--white);
}
.product-title{
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    height: 40px;
    font-weight: 600;
    background: #fff;
    z-index: 5;
}
.product-title>div:nth-of-type(3){
    color: var(--black60);
    font-weight: 500;

}
.product-title>div:nth-of-type(2){
    margin-left: 6px;
    margin-right: 9px;
}
.product-title>div:nth-of-type(1)>a{
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--blue10);
}
.product-title>div:nth-of-type(1)>a:hover{
    background: var(--blue70);
}
/* 상품 URL 입력하는 섹션*/
.search{
    margin-top: 140px;
    width: 910px;
}
.search .input{
    width: 700px;
    margin: 0 auto;
    -webkit-box-shadow: 0px 23px 50px -8px #8088A522; 
    box-shadow: 0px 23px 50px -8px #8088A522;
}
/* 작업 div */
.work_section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #B1B8C750;
    margin-bottom: 35px;
    padding: 12px 20px;
    background: #B1B8C710;
}

.change_view{
    color: rgba(23, 43, 77, 0.25);
    font-weight: 700;
}
.change_view .action{
    color: var(--black);
}
.select_all_box{
    padding: 12px;
    border-radius: 6px;
    background: rgba(177, 184, 199, 0.15);
}
.select_all{
    width: 13px;
    height: 13px;
}
.new_folder{
    cursor: pointer;
    padding: 12px 10px;
    border-radius: 6px;
    background: var(--blue);
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  
}

.work_button{
    cursor: pointer;
    padding: 12px 12px;
    border-radius: 6px;
    background: rgba(177, 184, 199, 0.15);
    font-size: 12px;
    font-weight: 700;
}
.work_button:hover{
    background: rgba(177, 184, 199, 0.30);
}


/* 폴더 섹션 디자인 */
.folder_section{
    margin-bottom: 85px;
}
.folder_box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 24px;
}

.folder_card{
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 26px 0 16px;
    border-radius: 6px;
    border: 1px solid #b1b8c773;
    background: #FFF;
}
.folder_card .folder_icon{
    width: 52.25px;
    height: 38px;
    background-image: url(../../image/product/folder.png);
    background-size: cover;
}
.folder_card .folder_name{
    font-size: 14px;
    font-weight: 700;
}
.folder_card .folder_summary{
    color: #B1B8C7;
    font-size: 12px;
    font-weight: 700;
}
.folder_card>input[type=checkbox]{
    position: absolute;
    top: 14px;
    left: 14px;
    display: none;
}
.folder_card .folder-more-button{
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #B1B8C725;
}


/* 볼더 호버 했을때 */
.folder_card:hover{
    background: rgba(56, 116, 255, 0.10);    
}
.folder_card:hover>input[type=checkbox]{
    display: block;
}
/* v폴더 선택 했을 겨우 */
.folder_card.action{
    background: rgba(56, 116, 255, 0.10);    
}
.folder_card.action>input[type=checkbox]{
    display: block;
}
.folder_card.action .folder-more-button{
    display: flex;
    
}
.folder_card .folder-more-work{
    position: absolute;
    background-color: #fff;
    z-index: 5;
    top: 100%;
    left: 0;
    transform: translate(-20%, 0%);
    padding: 5px;
    width: max-content;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #F5F5F550;
    border-radius: 5px;
    box-shadow: 0px 1px 0px 2px #00000013;
}
.folder_card .folder-more-work li{
    padding: 7px 23px;
}
.folder_card .folder-more-work li:hover{
    background: var(--blue08);
}


/* 폴더 더보기 카드 */
.folder_more{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(177, 184, 199, 0.15);
    font-size: 14px;
    font-weight: 700;
}
.folder_more>a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
/* 상품 섹션 디자인 */
.product_section{
    margin-bottom: 115px;
    min-height: 1230px;
}
.product_box{
    display: block;
}
.product_box .product_card{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 16px;
    height: 116px;
    border-radius: 6px;
    background: #B1B8C708;
    box-shadow: 0 2px 6px 0 #B1B8C743;
}
.product_list_header>div,
.product_box .product_card>div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}
.product_list_header>div:nth-of-type(1),
.product_box .product_card>div:nth-of-type(1){
    display: flex;
    min-width: 60px;
    height: 100%;
    background: #B1B8C710;
}
.product_list_header>div:nth-of-type(2),
.product_box .product_card>div:nth-of-type(2){
    min-width: 86px;
    height: 100%;
}
.product_box .product_card>div:nth-of-type(2)>div{
    background: var(--blue10);
    border-radius: 5px;
    padding: 4px;
}
.product_list_header>div:nth-of-type(3),
.product_box .product_card>div:nth-of-type(3){
    min-width: 86px;
    height: 100%;
}
.product_box .product_card>div:nth-of-type(3)>div{
    background: #03CF5D15;
    border-radius: 5px;
    padding: 4px;
}

.product-img-title{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.product_box .product_card input[type=checkbox]{
    position: relative;
    display: block;
    top: 0;
    left: 0;

}

.product_box .product-thumbnail{
    width: 54px;
    height: 54px;
    border-radius: 5px;
}

.product_list_header{
    display: flex;
    justify-content: flex-start;
    background: var(--white);
    height: 30px;
    position: sticky;
    top: 100px;
    background: #ffffff;
    z-index: 4;
    border-bottom: 1px solid #B1B8C750;
    border-radius: 0;
    margin-bottom: 16px;
}
.product_list_header:hover{
    box-shadow : none;
    
}
.product_box .product_card.action,
.product_box .product_card:hover{
    background: var(--blue05);
    border: 1px solid #B1B8C750;
}
.product_box .product_card:hover .summary{
    text-decoration: underline;
    text-underline-position : under;
}


.product_card{
    position: relative;
    height: 380px;
    border: 1px solid  var(--opacity00);
    border-radius: 22px;
    background: #F4F5F7;
}
.product_card.disable .price{
    color: #B1B8C7;
}
.product_card.disable .product-thumbnail{
    /* filter: grayscale(100%); */
    opacity: 25%;
}

.product_card>div:nth-of-type(1){
    padding: 14px;
}
.product_card>div:nth-of-type(1)>div:nth-of-type(1){
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
}
.product_card>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1){
    min-width: 80px;
    height: 80px;
    border-radius: 5px;
    background: #fff;
}
/* 상품 카드 리뷰,평점 배송비 7일판매량  */
.summary{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0;
}
.product_card .title{
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
}
.product_card .price{
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
}

.product_card .data{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 19px;
    border-radius: 15px;
    background: #FFF;
}
.product_card .data li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.product_card>div:nth-of-type(2){
    padding: 16px;
}
/* 상품 키워드  */
.product_card .keyword li{
    display: inline-flex;
    padding: 6px 8px;
    align-items: center;
    gap: 4px;
    width: max-content;
    border-radius: 12px;
    border: none;
    background: #B1B8C715;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.product_card .keyword li>span:first-of-type{
    color: #172B4D;
}
.product_card .keyword li>span:last-of-type{
    color: var(--blue);
}
.product_card .keyword div{
    display: inline-flex;
    margin-left: 12px;
    font-size: 12px;
    font-weight: 700;
}
.product_card input[type=checkbox]{
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: none;
}

/* 상품 카드 호버했을때 */
.product_card:hover{
    border: 0.5px solid var(--black10);
    background: rgba(177, 184, 199, 0.15);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.11);
}
.product_card:hover input[type=checkbox]{
    display: block;
}
.product_card.action::after{
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 2px solid var(--blue);
    background: rgba(56, 116, 255, 0.10);
}
.product_card.action .title{
    text-decoration: underline;

}
.product_card.action input[type=checkbox]{
    display: block;
}


.product-work{
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-left: 28px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #B1B8C715;
    font-size: 14px;
}
.product-work svg{
    cursor: pointer;
}
.new-folder-button path{
    stroke: var(--black);
}
.move-button path{
    stroke: var(--black);
}
.delete-button path{
    fill: var(--black);
}

.new-folder-button:hover path{
    stroke: var(--blue);
}
.move-button:hover path{
    stroke: var(--blue);
}
.delete-button:hover path{
    fill: var(--blue);
}
.product-work>div{
    position: relative;
}
.product-work>div>.comment{
    position: absolute;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    width: max-content;
    border-radius: 4px;
    background: var(--black);
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    left: 50%;
    transform: translate(-50%, 50%);
}
.product-work>div:hover>.comment{
    display: flex;
}
.folder-select-modal{
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 36px 24px;
    transform: translate(-50%,-50%);
    background: #fff;
    border: 1px solid #B1B8C750;
    border-radius: 30px;
    z-index: 10;
}
.folder-select-modal .title{
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
}
.folder-select-modal .sub-title{
    margin-bottom: 10px;
    color: #B1B8C7;
    font-size: 13px;
    font-weight: 500;
}
.folder-select-modal select{
    padding: 14px 16px;
    width: 313px;
    border: 1px solid var(--black80);
    border-radius: 3px;
}
.folder-select-modal .button-box{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 700;
}
.folder-select-modal .button-box>button{
    font-size: 14px;
    font-weight: 700;
}
.folder-select-modal .button-box>button:last-of-type{
    color: var(--blue);

}
.lost-guid-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    

}
.lost-guid-modal>div{
    position: relative;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 50px 40px 27px;
    background: #FFF;
    border: 1px solid #B1B8C750;
    border-radius: 20px;
    z-index: 10;

}


.lost-guid-modal>div>div:nth-of-type(1){
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
.lost-guid-modal>div>div:nth-of-type(2){
    font-size: 16px;
    color: #1E1E1E70;
    text-align: center;
    line-height: 150%;
}
.lost-guid-modal>div>div:nth-of-type(3){
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.lost-guid-modal>div>div:nth-of-type(3)>button:nth-of-type(1){
    padding: 16px 24px;
    color: var(--black60);
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #B1B8C770;
    border-radius: 10px;
}
.lost-guid-modal>div>div:nth-of-type(3)>button:nth-of-type(2){
    padding: 16px 24px;
    background: var(--blue);
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--blue);
    border-radius: 10px;
}

.spinner{
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-text{
    margin-top: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;

}

.no-product{
    width: max-content;
    margin: 10% auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #B1B8C7;
    font-size: 16px;
}



@media screen and (min-width: 812px) and (max-width: 1420px) {
    main{
        width: 1040px;
    }
    .folder_box{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    /* .product_box{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
    } */
    .product_card>div:nth-of-type(2){
        padding: 0px 16px ;
    }
}
@media screen and (min-width: 360px) and (max-width: 812px)  {
    /* main{
        width: 360px;
    } */
    
    .product_box{
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .product_card{
        height: max-content;
    }
    .product_card>div:nth-of-type(1){
        padding: 4px 0;
        border-bottom: none;
    }
    .product_card>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1){
        min-width: 36px;
        height: 36px;
    }
    .product_card>div:nth-of-type(2){
        display: none;
    }
    .product_card .price,
    .product_card .data{
        display: none;
    }
  
}
@media screen and (max-width: 360px){
    main{
        width: 100%;
    }
 
}

.search-box{
    padding: 12px 10px;
    border-radius: 6px;
}
.search-box:hover{
    background: #B1B8C715;
}
.search-box .search-input{ 
    display: block;
    width: 0px;
    transition: all 0.3s;
}
.search-box .button{ 
    display: block;
}
.search-box.action{
    background: #B1B8C715;
}
.search-box.action .search-input{ 
    display: block;
    width: 300px;
}
.search-box.action .button{ 
    display: none;
}
.search-box.action .search-input:focus{ 
    outline: none;
}

.search-box .close-button{
    display: none;
}
.search-box.action .close-button{
    display: block;
}


.product-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.all-rank-download{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}