/* mixin */ 
@import "../mixin/ui-mixin";

/* ******************** pop style ******************** */

.popup-wrap {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index:400;
	.popup {
		position: absolute; top: 50%; left: 50%; width: 800px; height: 40vh; background-color: #fff; transform: translate(-50%,-50%); border-radius: 5px; box-shadow: 0px 10px 20px #929292; overflow:hidden; 
		&.company {
      width:550px; height:525px;
    }
    &.researcher {
      height: 600px;
      .modal-text-area {
        &.company-search {
          .search-wrap {
            border-bottom: 0;
          }
        }
      }
    }
    &.tech {
      height: 90vh; max-height: 90vh;
      .modal-text-area {
        display: flex; flex-direction: column; overflow-y: hidden !important; height: calc(100% - 195px);  padding: 0;
        .search-wrap {
          flex: 0 0 auto; padding: 0;
        }
        .result-wrap {
          flex: 1 1 auto; overflow-y: auto; background: #efefef; padding: 20px; min-height: 250px; max-height: 100%;  height: auto;
        }
      }
    }
    .modal-title-area {
			padding: 20px; font-size: 1.5rem; font-weight: 600; border-bottom: 1px solid #dee3eb; position: relative;
      .close-btn {
        position: absolute; right:20px; top: 17px; cursor: pointer;
        &:hover {
          opacity: 0.8
        }
        img {
          width: 22px; height: 22px; opacity: 0.5
        }
      }
		}
    .modal-text-area {
      padding: 15px 20px; font-size: 1.5rem; line-height: 20px; overflow-y: auto; height: calc(100% - 135px);
      &.not-scroll {
        overflow-y: hidden;
      }
      .box {
        width: 100%; padding: 15px 10px; border: 1px solid var(--line-color); margin-bottom: 15px; border-top: 1px solid #b1b1b1;
        .profil-section { 
          .profil-area {
            position: relative; display: flex; gap: 15px; 
            .profil-left { 
              position: relative; width: 105px; height: 130px;
              .img-area {
                position: relative; overflow: hidden; width: 100%; height: 100%;
                img {
                  position: absolute; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);
                }
              }
            }
            .profil-right { 
              width: calc(100% - 120px);
              .name {
                font-size: 1.7rem; font-weight: 600; color: #20368a; margin: 0 0 15px 0;
                .faculty {
                  font-size: 1.2rem; color: #707070; display: inline-block;
                }
              }
              .info {
                dl {
                  position: relative; display: flex; flex-wrap: wrap; gap: 7px 6px;
                  .item {
                    width:calc(50% - 10px); display: flex; flex-wrap: wrap; line-height: 1.5; font-size: 1.3rem;
                    &.full-width {
                      width: 100%;
                    }
                    dt.tit {
                      width: 45px; font-weight: 500;
                    }
                    dd.txt {
                      width: 100%; word-break: break-all;
                    }
                  }
                }
                .left-txt {
                  width: 100px; font-weight: 500;
                }
                .right-txt {
                  width: 100%; padding-left: 10px; word-break: break-all; line-height: 1.5;
                }
              }
            }
          }
        }
      }
      .pop-bg {
        text-align: center; background:#f1f6fb; padding:30px 15px;
        p {
          margin-bottom:30px
        }
        span {
          font-weight:600;
        }
        .material-icons {
          font-size:45px; margin-bottom:20px; display:block; text-align: center; color:#5d8fff
        }
      }
      &.company-search {
        padding:0px;
        input[type=text], input[type=password] {
          &.join-id {
            width:calc(100% - 135px); float:left;
          }
          &.join-password {
            margin-bottom:15px
          }
        }
        .search-wrap {
          padding:20px; border-bottom:1px solid var(--line-color);
          .pop-tab {
            padding-bottom: 10px;
            ul {
              display: flex; gap: 14px 5px; flex-wrap: wrap;
              li {
                &:hover {
                  a {
                    background: var(--main-color); color: #fff;
                  }
                }
                &.active {
                  a {
                    background: var(--main-color); color: #fff;
                  }
                }
                a {
                  background: #ebedf4; color: #222; padding: 6px 8px; border-radius: 3px; font-size: 1.4rem; font-weight: 500;
                }
              }
            }
          }
          .check-box-wrap {
            p {
              display: inline-block; margin-right:20px; font-size:1.3rem; font-weight: 400;
              span {
                font-weight: 500;
              }
            }
          }
          .company-wrap {
            position:relative;
            input[type=text] {
              border-radius: 0; border-color:var(--main-color);padding-right:60px; height:40px;
            }      
            .btn-wrap {
              button {
                position: absolute; top: -45px; right: -5px; background-color: var(--main-color); width: 50px; text-align: center; border-radius: 0 0 10px 0; cursor: pointer; transition: background-color .2s;border:0;z-index: 20; height:50px;
                img {
                  width: 17px; height: 17px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                }
                &:hover {
                  background-color: var(--main-hover-color);
                }
              }
            }      
          }
        }
        .result-wrap {
          padding: 20px; background: #efefef; overflow-y: auto;  @include scrollbar;height: 278px; 
          &.empty {
            font-size: 1.3rem; color: #8d8d8d; padding-top:115px;text-align: center; 
          }
          .check-input {
            margin-bottom:5px;
            input[type=radio]+label {
              font-weight:600;
            }
          }
          .result {            
            background:#fff; padding:10px; border:1px solid var(--line-color); margin-bottom:15px; cursor:pointer;
            ul {
              li {
                float:left; position:relative; padding:5px 17px 0 0 ; font-size:1.2rem; color:#7c7c7c;
                &:last-child:after {
                  content:none;
                }
                &:before {
                  content: attr(data-label); padding-right: 5px;color: #7f7f7f; font-weight:600;
                }
              }
            }
            .name {
              font-size:1.3rem; font-weight:600; color:var(--main-color)
            }
            &:hover, &.select {border-color:var(--main-color)}
          }
        }
      }
      .btn-wrap.id-btn {float:left; margin-left:15px;
        button {
          height:40px; line-height:38px; font-size:1.2rem; min-width:120px
        }
      }
    }
    .modal-foot-area {
      padding: 20px; border-top: 1px solid #dee3eb; background-color: #fff;
      .btn-wrap {
        button {
          height: 40px; line-height: 38px; font-size: 1.3rem; width: auto; min-width: 120px; float: none;
        }
      }
    }
	}
  &.find-pop {
    .popup {
      height:auto;
    }
    .modal-text-area {
      height:auto;
      .pop-tit {
        position:relative; padding-left:20px; font-weight:500; padding-bottom:10px; font-size:1.4rem;
        &:after {
          content: ""; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #7babff;
        }
      }
    }
    input[type=text], input[type=password] {
      height:35px; line-height:28px; padding-left:10px;    
      
    }
    .select-box {
      select {
        height:35px;
      }
    }
    .vertic-table {
      table {
        tr {
          &:hover {
            background-color: transparent
          }
          td {
            .com-num {
              input.text-input {              
                display:inline-block;
                &.com-input  {
                  &:first-child {
                    width:100px; margin-right:15px;
                  }
                  &:nth-child(2) {
                    width:100px; margin-right:15px;
                  }
                  &:last-child {
                    width:calc(100% - 237px)
                  }
                }
              }
            }      
          }
        }
      }
    } 
  }
  .check-input {  
    input[type="radio"] {    
      & + label:before {
        background-image:url("../../../img/common/radio.svg");margin: 0px 7px 0 0; 
      }    
    }
  }
  .paging {
    margin: 15px 0;
  }
}


@media(max-width: 800px) {
	.popup-wrap {
    .popup, .popup.company {
      width: calc(100% - 40px);      
    }
  }
}

@media(max-width: 768px) {
  .popup-wrap {    
    .popup {
      .modal-title-area {        
        font-size: 1.6rem;padding: 15px;
        .close-btn {
          top: 14px; right: 15px;
        }
      }
      .modal-text-area {
        height: calc(100% - 120px);
        .pop-bg {
          p {font-size:1.3rem;}          
        }
        &.company-search {
          .result-wrap {
            height:294px;
          }
        }
        &.tech {
          .modal-text-area {
            .search-wrap {
              padding: 0; height: calc(100% - 170px);
            }
          }
        }
      }      
      .modal-foot-area {
        padding: 15px;
      }
    }  
    &.find-pop {
      .vertic-table {
        table {
          tr {
            &:hover {
              background-color:transparent;
            }
            td {
              .com-num {
                input.text-input {
                  &.com-input {
                    display:inline-block;
                    &:first-child {
                      width:calc(50% - 8px); margin-right:10px; 
                    }
                    &:nth-child(2) {
                      width:calc(50% - 8px); margin-right:0;
                    }
                    &:last-child {
                      width:100%; margin-top:5px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }  
  }
  
}

@media(max-width: 550px) {
  .popup-wrap {
    .popup {
      .modal-title-area {
        font-size: 1.5rem;
        .close-btn {
          top:13px
        }
      }
      .modal-text-area {
        height: calc(100% - 115px);
        .pop-bg {
          text-align: center; background:#f1f6fb; padding:30px 15px;
          .material-icons {
            font-size:30px; margin-bottom:15px;
          }
        }
        &.company-search {
          .result-wrap {
            height:299px;
          }
        }
      }
      .modal-foot-area {
        .btn-wrap {
          button {
            width: calc(50% - 4px);
          }
        }
      }
    }
  }
}


@media(max-width:500px) {
  .popup-wrap {
    .popup {    
      &.company {
        .modal-text-area {
          &.company-search {   
            input[type=text], input[type=password] {
              &.join-id {
                float:none; width:100%; 
              }
            }
            .search-wrap {
              padding:15px; text-align: center;
              .check-box-wrap {
                p {
                  display: none;
                }
              }
            }
            .result-wrap {
              height:309px; padding:15px;
              &.empty {
                padding-top: 133px;
              }
            }
          }
          .btn-wrap {
            &.id-btn {
              float:none; margin-top:10px; margin-left:0;
            }
          }
          .box {
            .profil-section { 
              .profil-area {
                .profil-right { 
                  .info {
                    dl {
                      .item {
                        width: 100%
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }  
      
    }
  }
}