/*마이페이지 공통*/
.mypage_left{width: 250px;}
.mypage_profile img{width: 150px; border-radius: 50%;}
.mypage_profile p{font-size:20px; font-weight: bold;}
.mypage_profile p span{font-size:14px;}
.mypage_profile .r_btn,.mypage_profile .r_l_btn{font-size:12px; height:35px; line-height: 35px;}

.profile_info li{display: flex; font-size:14px; justify-content: space-between;}
.profile_info h4,.profile_info p{font-size: 14px; font-weight: normal;}
.profile_info p{font-weight: bold;}

.mypage_left_menu li{line-height: 30px;}
.mypage_left_menu li.active{font-weight: bold;}

/*채팅*/
.mypage_area.chat_area{padding:30px 20px; gap: 20px; height: 850px;}
.chat_left{width: 300px;}
.chat_left .filter_search{background: #fff; margin:20px 0; padding-right: 10px;}
.chat_left .filter_search input{width: 85%;}
.chat_list li{display: flex; gap:10px; align-items: center; padding:10px; background:#f9f9f9}
.chat_list li.active{border-left: 3px solid #4f53fd; background: #fff;}
.chat_profile img,.chat_right .profile img{width: 60px; border-radius: 50%;}
.chat_info{position: relative;}
.chat_info h3{font-size: 14px; margin-bottom: 5px;}
.chat_info p{font-size: 14px; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.chat_info span{position: absolute; font-size: 11px; right:0; top:0;}

.chat_right{width: 640px;background: #fff; border-radius: 20px; padding:20px; position: relative;}
.chat_all{display: flex; flex-direction: column;}
.chat_right .notice{text-align: center; font-size: 14px; color: #999; margin-bottom: 20px;}
.chat_right .profile img{width: 40px;}
.speech_bubble_goods,.speech_bubble>div{width:460px; background: #f9f9f9; padding:10px 15px; border-radius: 5px; font-size: 15px;}
.speech_bubble_goods img,.chat_con .file img{width: 80px;}
.chat_goods_img h4,.chat_con .file h4{font-weight: normal; font-size: 14px;}
.chat_goods_img p{font-weight: bold;}
.speech_bubble{position: relative; align-items: end; gap:10px}
.chat_con .date{font-size: 11px; color:#999}
.chat_con .date span{display: block;}
.chat_myself .speech_bubble{flex-direction: row-reverse; margin:30px 0;}
.chat_myself .speech_bubble>div{background: #e8e8ff;}
.chat_con .file{border: 1px solid #eee; width: 460px;}
.chat_con .file p{font-size: 12px; margin-top: 5px;}
.chat_con .file p a{text-decoration: underline;}

.chat_text{position: absolute; width: 100%; bottom: 0; left:0; padding:20px; background: #fcfcfc;}
.chat_text textarea{width:100%; border:1px solid #eee; padding:10px 15px; min-height: 80px; max-height: 163px; overflow-y: auto; resize: none;}
.chat_file{border:1px solid #eee; cursor: pointer; padding:10px; font-size: 14px; border-radius: 5px; background: #fff;}
.chat_file label{cursor: pointer; }
.chat_send{background:#4f53fd; color:#fff; border-radius: 5px; padding:10px 15px; font-size: 14px; cursor: pointer;}


/*나의성과*/
.proceeds_area{background:#f9f9ff; padding:20px; font-size:14px; align-items: center;}
.proceeds_area p,.proceeds_area h4{font-size:18px; font-weight: bold;}
.proceeds_area p{color: #4f53fd;}
.proceeds_area a{margin:0 0 0 auto;}
.proceeds_area a span,.mypage_content_info .b_txt span{vertical-align: middle;}

.mypage_content{width:1000px}
.mypage_content_info{padding:20px;}
.mypage_content_info li{width:25%; box-shadow: 0 0 20px rgba(0,0,0,0.03); padding:20px;  border-radius: 20px;}
.mypage_content_info li h4{font-size: 14px; font-weight: normal;}
.mypage_content_info li p{font-size:20px; margin-top: 15px;}
.mypage_content_info .b_txt{font-size: 14px;}

.graph_area{width:80%;}
.graph{width:100%; height: 350px; background:#f2f2f2;}
.graph_result_box{width:20%; border:1px solid #f2f2f2; padding:20px;}
.graph_result_box h3{font-size: 30px; margin-bottom: 50px;}
.graph_result_box h4{font-weight: normal; margin-top: 20px;}
.graph_result_box p{text-align: right; font-size: 40px; margin-top: 10px;}

.all_result{margin-top: 30px;}
.all_result li{width: 20%; border:1px solid #f2f2f2; padding:20px; border-radius: 10px;}
.all_result li h3{font-size: 14px; margin-bottom: 10px;}
.all_result li p{font-size:18px;}

.sale_img_tab{position: relative; font-size: 14px;}
.sale_img_tab li.active{border:1px solid #4f53fd; color:#4f53fd; padding:10px 20px; border-radius: 20px;}
.sale_img_tab li{border:1px solid #f2f2f2; padding:10px 20px; border-radius: 20px; color:#999; cursor: pointer;}
.sale_img_tab>div{position: absolute; right:0; top:0;}
.sale_img>ul{flex-wrap: wrap;}
.sale_img>ul li{width:calc(25% - 15px);}
.sale_img>ul li:nth-child(4n){margin-right: 0;}
.sale_img>ul li img{width: 100%;}

.filter_search{border:1px solid #eee; border-radius: 10px; padding:5px 15px;}
.filter_search .search_icon span{color:#1e202e}
.filter_search .search_icon{background: none;}

/*작품업로드*/
.upload_area,.profits_bg{background:#f9f9ff; padding:50px 0 30px 0}
.upload_area p span{font-size: 13px; font-weight: 600;}
.upload_btn h4{font-size: 14px; color: #4f53fd;}
.upload_btn label span{font-size: 40px; cursor: pointer; color: #4f53fd;}

.upload_guide_area h3{margin-bottom: 10px;}
.upload_guide_area li{width:33%; border:1px solid #f2f2f2; padding:30px; cursor: pointer; transition: border 0.3s;}
.upload_guide_area li:hover{border-color: #4f53fd;}
.upload_guide_area p:last-child{font-size:12px; font-weight: bold; color: #4f53fd; text-decoration: underline; margin-top:5px}

.upload_img ul{padding:20px; flex-wrap: wrap;}
.upload_img li{width:calc(25% - 15px);}
.upload_img li img{width:100%; border-radius: 10px; margin-bottom: 10px;}
.upload_success_txt,.upload_alert_txt{height: 20px;}
.upload_alert_txt{color: #ff2a2a; font-size: 14px;}
.img_upload_progress{background:#fff; font-size: 0; height: 10px; margin:10px 0}
.upload_img .r_btn{width: 150px; margin:30px auto;}

.uplod_info_select>div{border:1px solid #eee; border-right: 0; background:#fff; line-height: 35px; width: 150px; cursor: pointer;}
.uplod_info_select>div:last-child{border-right: 1px solid #eee;}
.uplod_info_select>div:hover,.uplod_info_select>div.active{background: #4f53fd; color:#fff;}
.uplod_info_select>div span{vertical-align: sub; font-size: 20px;}
.uplod_info_select input::before,.uplod_info_select input::after{position: absolute;}

.upload_info_img li{width: calc(15% - 24px); position: relative;}
.upload_info_img li .num{background: #4f53fd; color: #fff; position: absolute; top:0; right:0; z-index: 10; width: 30px; font-size: 11px; padding:3px 0; border-radius: 0 10px 0 10px;}
.upload_info_img [type="checkbox"] + label{padding-left: 0;}
.upload_info_img [type="checkbox"]:checked + label img{border: 2px solid #4f53fd}

.upload_info_btn li{background:#fff; border-radius: 10px; padding:10px 0; cursor: pointer; border:1px solid #eee; font-size: 14px;}
.upload_info_btn li:hover{border-color: #4f53fd; color: #4f53fd;}

.upload_info_txt{background: #fff; margin:0 30px; margin-top: 50px; position: relative;}
.upload_info_txt.active,.upload_info_txt.active .num{border:2px solid #4f53fd;}
.upload_info_txt.active .num{border-bottom: 0; color: #4f53fd;}
.upload_info_txt .num{position: absolute; border:2px solid #fff; top:-27px; left:5px; background: #fff; width: 35px; padding:5px 0; font-size:13px; border-radius: 10px 10px 0 0;}  
.upload_info_txt .img_area{width: 30%;}
.upload_info_txt .img_area img{width: 100%;}
.img_txt_area{width: 70%;}
.img_txt_area textarea{width: 100%; height: 80px; resize: none; border: 1px solid #ddd; outline: none; box-shadow: none; padding:10px;}

.info_btn{font-size: 14px; border:1px solid #4f53fd; color: #4f53fd; cursor: pointer; padding:5px 20px;}
.info_btn.help{border:0; padding:0;}

ul.commercial{padding:0;}
.commercial li{width: 48%; border: 1px solid #ddd; line-height: 40px; cursor: pointer;}
.commercial li:hover{background: #f9f9f9;}

.img_txt_area .upload_btn label,.agree_down{width:100%; border: 1px solid #ddd; padding:10px 20px; cursor: pointer; display: block;}
.file_list{width:68%; background-color: white; height:92px; overflow-y:scroll; border:1px solid #ddd;}
.file_list input{display: none;}

.tag_area ul{border: 1px solid #ddd; height: 80px;}
.tag_area span{text-align: right; display: block; font-size: 12px;}

.multi_select_area{padding:20px; margin-top: 50px;}
.multi_select_area>div{width: 25%;}
.multi_select_area>div:nth-child(2){width: 100px;}
.multi_select_area h3{font-size: 16px;}
.multi_select_area h3 span{display: block;}
.multi_select_area .r_btn{width:50px; height: auto; padding:0; line-height: normal; margin:0}
.multi_select_area .r_btn span{display: block;}
.multi_select_area.img_txt_area{width: 100%; background: #fff;}
.multi_select_area .commercial li{width: 100%; font-size: 13px; margin-bottom: 5px;}
.multi_select_area .info_btn{height: 30px; line-height: 28px; padding:0 20px;}

.multi_select_notice{text-align: left; margin:20px; padding:20px; background: #fff; border-radius: 20px;}
.multi_select_notice h2{font-size: 20px;}
.multi_select_notice p{margin-bottom: 5px;}
.multi_select_notice p:last-child{font-size: 13px;}
.multi_select_notice .point_color{color: #4f53fd;}

.upload_info_img.fixed .fixed_area{position:fixed; background:#fff; bottom:0; left:0; z-index: 100; width: 100%; padding:20px; box-shadow: 0 0 30px rgba(0,0,0,0.03);}
.upload_info_img.fixed .upload_img_select li{width: 100px;}
.upload_info_img.fixed .uplod_info_select{bottom:150px; justify-content: unset;}
.upload_info_img.fixed .upload_img_select{padding-bottom: 0;}

/*작품관리*/
.goods_admin_con li{position: relative;}
.goods_admin_con .extension{position: absolute; left:10px; top:10px; background: #f9f9ff; width: 50px; text-align: center; color: #4f53fd; margin:0; padding:5px 0; border-radius: 50px;}
.goods_admin_con .btn{position: absolute; right:10px; top:10px}
.goods_admin_con .btn span{font-size: 20px;}

/*판매내역*/
.sale_history .sub_filter{justify-content: end;}
.sale_history_tb{width: 100%; text-align: center; font-size: 14px;}
.sale_history_tb th{background: #f9f9ff; color: #4f53fd; padding:20px 0; font-weight: bold;}
.sale_history_tb td{padding:20px 0; border-bottom: 1px solid #eee;}
.sale_history_tb td img{width: 150px;}

/*수익금출금전환*/
.profits_bg{padding:30px 0;}
.profits_menu li{width: 45%; background: #fff; padding:50px; border-radius: 20px;}
.profits_menu li .material-symbols-outlined{font-size:60px; margin-bottom: 30px; background:#fff; padding:20px; border-radius: 50%; background: #f9f9f9;}
.profits_menu li h3 span{color: #4f53fd;}
.profits_menu li p span{font-weight: bold;}
.profits_menu li p{margin-top:15px; margin-bottom:30px}

/*고스터프로필-유저페이지*/
.mypage_profile img.profile_bg_img{border-radius: 0; position: absolute; z-index: -1; width: 100%; left:0}
.profile_share,.profile_edit{position: absolute; right:0; bottom:35px; width: 30px; height: 30px; border:1px solid #666; border-radius: 50%; cursor: pointer; transition: 0.2s background;}
.profile_edit{bottom: 0;}
.profile_share span,.profile_edit span{font-size: 18px; line-height: 28px; vertical-align: middle; color:#666}
.mypage_profile .profile_link{font-size: 14px; font-weight: normal; color:#999}
.mypage_profile .profile{position: relative;}
.mypage_profile .profile>div:hover{background:#eee}
.mypage_profile .profile_sns h3{text-align: left;}
.mypage_profile .profile_sns li{background: #f2f2f2; width:30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px;}
.mypage_profile .profile_sns li .material-symbols-outlined{font-size: 20px; vertical-align: middle;}
.mypage_profile .profile_sns li img{width: 20px; display: inline-block; margin:0 auto; vertical-align: middle;}
.mypage_profile .profile_info{text-align: left;}
.mypage_profile .profile_info p{font-weight: normal;}

    /*프로필수정팝업*/
    .popup_con .profile{position: relative;}
    .popup_con img{position: absolute; border-radius: 50%; bottom:50px; width: 150px; left:50%; transform: translateX(-50%);}
    .popup_con .profile_bg_img{width: 100%; border-radius: 0; position: static; transform: none;}
    .popup_con .profile_img_upload{font-size: 14px; border-radius: 5px; border: 1px solid #4f53fd; padding:10px; margin-top: 10px; color: #4f53fd;}
    .popup_con .profile_img_upload label{cursor: pointer;}
    .edit_item h3{font-weight: normal; font-size: 16px;}
    .edit_item h4{font-size: 14px; font-weight: normal; margin-top: 10px;}
    .edit_item input{width: 100%;border-bottom: 1px solid #999; padding:10px 0; color: #999;}
    .edit_item input:focus{border-color: #4f53fd;}

/*고스터프로필*/
.goster_profile .mypage_left_menu li{display: flex; justify-content: space-between; color:#999}
.goster_profile .mypage_left_menu li span{color:#1e202e}