/*
    [제목] 핀업챗 팝업 CSS
    [생성일] 2020-02-04
    [내용] 핀업챗내에 사용되고 있는 모든 팝업의 스타일.
           * 예외, 메인 플로우팅 팝업, 리스트나 상세에 속한 툴팁팝업 등은 해당 파일에 작성한다.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/

/*멘토소개팝업*/
.popup_mentor_intro .popup_wrap { position:absolute; max-width:500px; width:calc(100% - 30px); height:auto; padding:25px 25px 30px; }
.popup_mentor_intro .popup_wrap .cm_thumb_wrap { position:absolute; top:25px; left:25px; width:80px; height:80px; border-radius:50%; background:#ddd; border:1px solid #ddd; box-sizing:border-box; }
.popup_mentor_intro .popup_wrap .box_desc { position:relative; width:100%; padding-left:105px; overflow:hidden; }
.popup_mentor_intro .popup_wrap .box_desc .cm_mentor_name { float:left; font-size:20px; line-height:22px; }
.popup_mentor_intro .popup_wrap .box_desc .cm_tendency_wrap { float:right; }
.popup_mentor_intro .popup_wrap .box_desc .cm_info_desc { padding:0 0 0 5px; margin-top:25px; }
.popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .info_desc_txt { height:auto; margin-top:5px; }
.popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .info_desc_txt:first-child { margin-top:0; }
.popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .tit { width:80px; color:#999; font-size:13px; line-height:22px; }
.popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .tit:before { width:2px; height:2px; background:#999; }
.popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .txt { width:calc(100% - 80px); padding-left:0; color:#999; font-size:13px; font-weight:500; line-height:22px; }
.popup_mentor_intro .popup_wrap .box_btn { width:100%; text-align:center; }
.popup_mentor_intro .popup_wrap .box_btn a { display:inline-block; width:150px; margin:0 10px; }
/* Legacy class compatibility: React uses button in .box_btn */
.popup_mentor_intro .popup_wrap .box_btn button { display:inline-block; width:150px; margin:0 10px; }

@media all and (max-width:480px){
    .popup_mentor_intro .popup_wrap { max-width:360px; padding:20px; }
    .popup_mentor_intro .popup_wrap:after { display:block; content:''; clear:both; }
    .popup_mentor_intro .popup_wrap .cm_thumb_wrap {top:20px; left:20px; width:56px; height:56px; }
    .popup_mentor_intro .popup_wrap .box_desc { padding-left:71px; }
    .popup_mentor_intro .popup_wrap .box_desc .cm_mentor_name { display:block; float:none; height:20px; margin-top:5px; font-size:13px; line-height:20px; }
    .popup_mentor_intro .popup_wrap .box_desc .cm_tendency_wrap { float:none; margin-top:10px; height:auto; }
    .popup_mentor_intro .popup_wrap .box_desc .cm_tendency_wrap .cm_tendency { height:auto; padding:1px 5px; font-size:11px; line-height:12px; }
    .popup_mentor_intro .popup_wrap .box_desc + .box_desc { padding-left:0; }
    .popup_mentor_intro .popup_wrap .box_desc .cm_info_desc { padding:0; margin-top:15px; }
    .popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .info_desc_txt:first-child { display:none; }
    .popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .tit { display:none; }
    .popup_mentor_intro .popup_wrap .box_desc .cm_info_desc .txt { width:100%; font-size:12px; line-height:18px; }
    .popup_mentor_intro .popup_wrap .box_btn { overflow:hidden; }
    .popup_mentor_intro .popup_wrap .box_btn a { display:block; float:left; width:calc(50% - 5px); height:30px; padding:4px; margin:0; font-size:13px; line-height:22px; }
    .popup_mentor_intro .popup_wrap .box_btn a:first-of-type { margin-right:10px; }
    .popup_mentor_intro .popup_wrap .box_btn button { display:block; float:left; width:calc(50% - 5px); height:30px; padding:4px; margin:0; font-size:13px; line-height:22px; }
    .popup_mentor_intro .popup_wrap .box_btn button:first-of-type { margin-right:10px; }
}

/* Legacy popup class compatibility hooks */
.popup_chat_download .btn_download,
.popup_chat_finish .btn_download { width:100%; }
.popup_chat_download .box_btn.wide .btn_move,
.popup_chat_finish .box_btn.wide .btn_move { width:100%; }

.popup_img_modal .popup_wrap { position:relative; width:60%; max-width:760px; padding:65px; text-align:center; }
.popup_img_modal .popup_wrap .btn_close { top:15px; right:15px; color:#777; }
.popup_img_modal .popup_wrap .box_img { position:relative; width:calc(100% - 84px); max-width:420px; height:420px; margin:0 auto; border:1px solid #ededed; overflow:hidden; }
.popup_img_modal .popup_wrap .box_img img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%,-50%); max-width:100%; max-height:100%; }
.popup_img_modal .popup_wrap .box_count { display:inline-block; width:75px; margin-top:-50px; border:1px solid #ddd; border-radius:20px; background:rgba(000,000,000,0.7); color:#fff; font-size:13px; line-height:40px; text-align:center; position: absolute; bottom: 10px; left: calc(50% - 37.5px); }
.popup_img_modal .popup_wrap .btn_arrow { position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:32px; height:32px; text-align:center; line-height:30px; }
.popup_img_modal .popup_wrap .btn_arrow.btn_left { left:65px; }
.popup_img_modal .popup_wrap .btn_arrow.btn_right { right:65px; }
.popup_img_modal .popup_wrap .btn_arrow .im { font-size:24px; color:#777; vertical-align:middle; line-height:32px; }

@media all and (max-width:1023px ){
    .popup_img_modal .popup_wrap { padding:65px; }
}
@media all and (max-width:767px ){
    .popup_img_modal .popup_wrap { width:100%; padding:15px; }
    .popup_img_modal .popup_wrap .box_img { width:calc(100% - 94px); height:40vh; max-height:none; max-width:none; }
    .popup_img_modal .popup_wrap .btn_arrow.btn_left { left:15px; }
    .popup_img_modal .popup_wrap .btn_arrow.btn_right { right:15px; }
    .popup_img_modal .popup_wrap .box_count { width:60px; margin-top:-40px; border-radius:15px;  font-size:75%; line-height:30px;}
}

/* Operator tools popup */
.popup_operator_tools .popup_operator_tools_wrap {
    width:min(980px, calc(100% - 20px));
    max-height:calc(100vh - 40px);
    padding-bottom:20px;
}

.popup_operator_tools .popup_operator_tools_wrap .popup_desc {
    max-height:calc(100vh - 220px);
}

.popup_operator_tools .ops_summary {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:15px;
    color:#666;
    font-size:13px;
    line-height:20px;
}

.popup_operator_tools .ops_tabs {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.popup_operator_tools .ops_tabs .cm_btn_line,
.popup_operator_tools .ops_tabs .cm_btn_bg {
    min-width:88px;
    height:34px;
    font-size:13px;
    line-height:32px;
}

.popup_operator_tools .ops_section {
    margin-top:12px;
}

.popup_operator_tools .ops_note {
    padding:12px 14px;
    border:1px solid #ececec;
    background:#f8f8f8;
    color:#555;
    font-size:13px;
    line-height:20px;
}

.popup_operator_tools .ops_form {
    margin-top:10px;
}

.popup_operator_tools .ops_form .cm_form.text01,
.popup_operator_tools .ops_form .cm_form.textarea {
    width:100%;
}

.popup_operator_tools .ops_form .cm_form.textarea {
    min-height:96px;
    margin-top:8px;
}

.popup_operator_tools .ops_form.ops_form_inline {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.popup_operator_tools .ops_form.ops_form_inline .cm_form.text01 {
    width:220px;
}

.popup_operator_tools .ops_actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.popup_operator_tools .ops_actions .cm_btn_line,
.popup_operator_tools .ops_actions .cm_btn_bg {
    min-width:100px;
    height:34px;
    font-size:13px;
    line-height:32px;
}

.popup_operator_tools .ops_actions .ops_meta {
    color:#777;
    font-size:12px;
    line-height:18px;
}

.popup_operator_tools .ops_table_wrap {
    margin-top:10px;
    border:1px solid #ececec;
    max-height:340px;
    overflow:auto;
}

.popup_operator_tools .ops_table_wrap .cm_table_wrap {
    width:100%;
}

.popup_operator_tools .ops_table_wrap .cm_table_wrap td {
    vertical-align:top;
    font-size:13px;
    line-height:18px;
}

.popup_operator_tools .ops_table_wrap .cm_table_wrap .ops_row_subtxt {
    margin-top:4px;
    color:#777;
    font-size:12px;
    line-height:16px;
}

@media all and (max-width:767px){
    .popup_operator_tools .popup_operator_tools_wrap {
        width:calc(100% - 10px);
        max-height:calc(100vh - 20px);
    }

    .popup_operator_tools .popup_operator_tools_wrap .popup_desc {
        max-height:calc(100vh - 200px);
    }

    .popup_operator_tools .ops_form.ops_form_inline .cm_form.text01 {
        width:100%;
    }

    .popup_operator_tools .ops_actions {
        justify-content:flex-start;
    }
}