/**********채팅**********/
.com_chat #head { display: flex; } 
.com_chat #head .btn_prev { order:1; } 
.com_chat #head .btn_profile { order:2; width: 60px; height: 26px; padding: 0 7px 0; border-radius: 5px; border: solid 1px #999; background-color: #fff; font-size: 11px; font-weight: normal; line-height:initial; letter-spacing: -0.28px; text-align: center; color: var(--black); display:inline-flex; justify-content: center; align-items: center; margin-left: auto;} 
.com_chat #head .head_link { order:3; margin-left: 0; } 
.com_chat #head .head_link .btn_pop_more { margin-left: 15px; } 
.com_chat #head .page_tit{text-align:center; display: block;  width:calc(100% - 60px - (var(--pd-inline) *2 )); left:calc(30px + var(--pd-inline)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.com_chat .page_tit .profile{aspect-ratio: 1 / 1; display: inline-flex; justify-content: center; align-items: center; width:30px; margin-right: 5px; vertical-align: -8px; overflow: hidden; border-radius: 100%;}
.com_chat .page_tit .profile img{object-fit: cover; max-width:none; max-height: 100%; min-height: 100%; min-width: 100%;}

.chat_wrap { height:calc(100vh - 50px); display: flex; flex-direction: column; } 

/*채팅 상단*/
.chat_top{height: 141px; overflow-y: auto;}
.chat_top .com_find_item{padding-block:10px; align-items: center; min-height: 141px;}
.chat_top .com_find_item .item_btn_area{margin-top: 5px;}
.chat_top .item_btn_area .btn.purple:disabled { border:1px solid #999; color:var(--black); background: #fff; } 

.chat_top .com_item_text_container .seller{word-break: break-all; display: block;}
.chat_top .com_item_text_container .seller span{display: inline-block;}

.chat_top .type_group .com_item_text_container .seller{padding-top:6px; }
.chat_top .type_group .com_item_text_container .seller span{display: inline-block;}
.chat_top  .com_find_item .com_price_container .left_wrap{margin-top: 5px;}

.pubchat_top{height: 157px; overflow-y: auto;}
.pubchat_top .com_find_item{padding-block:10px; align-items: center; min-height: 141px;}
.pubchat_top .com_find_item .item_btn_area{margin-top: 5px;}
.pubchat_top .item_btn_area .btn.purple:disabled { border:1px solid #999; color:var(--black); background: #fff; } 

.pubchat_top .com_item_text_container .seller{word-break: break-all; display: block;}
.pubchat_top .com_item_text_container .seller span{display: inline-block;}

.pubchat_top .type_group .com_item_text_container .seller{padding-top:6px; }
.pubchat_top .type_group .com_item_text_container .seller span{display: inline-block;}
.pubchat_top  .com_find_item .com_price_container .left_wrap{margin-top: 5px;}

.chat_wrap .chat_mid { height:calc(100% - 141px); } 
.chat_wrap .chat_mid .scroll_body { height:calc(100% - 50px); overflow-y: auto; padding-inline: var(--pd-inline); } 


/*공지사항*/
.chat_mid .notice_field { font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.42; letter-spacing: -0.3px; text-align: left; color: #666; padding:18px 0 20px } 
/*채팅일*/
.chat_mid .date_area { font-size: 12px; line-height: 1.67; letter-spacing: -0.3px; text-align: center; color: #666; position: relative; text-align: center; margin-bottom: 20px; } 
.chat_mid .date_area:before { content: ''; display: block; position:absolute; width:100%; height: 1px; background-color: #f4f4f4; top:9px; z-index: 1; } 
.chat_mid .date_area span { background: #fff; display: inline-block; padding:0 10px; position: relative; z-index: 2; } 

/*하단으로 버튼*/
.btn_down { width: 44px; height: 44px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: var(--yellow); display: flex; align-items: center; justify-content: center; position:fixed; right: 12px; bottom:67px; border-radius: 100px; z-index: 9; } 
.btn_down img { width: 24px; } 

/*채팅내역*/
.chat_mid .box { padding:13px 20px; font-size: 13px; line-height: 1.54; letter-spacing: -0.33px; text-align: left; color: var(--black); max-width:54%; width:auto; margin-top: 3px; border-radius:5px; position:relative; word-break: break-all;} 
.chat_mid .info_area { display: flex; align-items: center; float:right; width:calc(100% - 44px); justify-content:flex-end; } 
/*.chat_mid .profile { background: url("../img/sub/bg_profile.gif") no-repeat; background-size: cover; width:34px; height: 34px; border-radius: 100px; } */
.chat_mid .name_field { font-size: 12px; letter-spacing: -0.6px; text-align: right; color: var(--black); margin-right: 10px; } 
.chat_mid .date_field { font-size: 10px; letter-spacing: -0.5px; text-align: right; color: #c2c2c2; margin-right: 10px; } 
.chat_mid .img { border-radius:10px; overflow:hidden; } 
.chat_mid .img img {max-width:none;} 

.chat_mid .get,
.chat_mid .send { clear: both; padding-bottom: 25px; overflow: hidden; } 
.chat_mid .send { align-items:flex-end; } 
.chat_mid .send .profile { float:right; margin-left: 10px; } 
.chat_mid .send .box { background:#fff6e8; float:right } 
.chat_mid .send .box:after { content:''; display: block; width:8.8px; height: 6.7px; position:absolute; right:-8.8px; top:10px; background:url("../img/sub/chat_send.jpg"); background-size: cover; } 
.chat_mid .send .name_field { order:2; margin-right:1px } 
.chat_mid .send .field_date { order:1 } 
.chat_mid .send .img { float: right; } 

.chat_mid .get { align-items:flex-start; } 
.chat_mid .get .box { background:#f4f4f4; float: left; } 
.chat_mid .get .box:before { content:''; display: block; width:8.8px; height: 6.7px; position:absolute; left:-8.8px; top:10px; background:url("../img/sub/chat_get.jpg"); background-size: cover; } 
.chat_mid .get .profile { float: left; margin-right: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 100%; aspect-ratio: 1 / 1;} 
.chat_mid .get .profile img{object-fit: cover; min-height: 100%; min-width: 100%; max-height: 100%; max-width: none;}
.chat_mid .get .info_area { float: left; justify-content: flex-start; } 
.chat_mid .get .img { float: left; } 

/*채팅하단*/
.chat_bottom { height: 50px; background: #666; display: flex; align-items: center; padding-inline: var(--pd-inline); } 
.chat_bottom .textarea { padding:14.5px 10px; height: 50px; min-height: 50px; background: none; border:none; border-radius: 0; color:#fff; font-size:14px; line-height: 1.2; } 
.chat_bottom .textarea:focus { outline: none; } 
.chat_bottom .textarea::-webkit-input-placeholder{ color:#fff; opacity:1; font-size:14px; } 
.chat_bottom .textarea:-ms-input-placeholder { color:#fff; opacity:1; font-size:14px; } 
.chat_bottom .textarea::-ms-input-placeholder { color:#fff; opacity:1; font-size:14px; } 
.chat_bottom .textarea::placeholder { color:#fff; opacity:1; font-size:14px; } 
.chat_bottom .textarea:-ms-input-placeholder { color:#fff; opacity:1; font-size:14px; } 
.chat_bottom .btn_photo img,
.chat_bottom .btn_send img { width:20px } 

/*!카타로그*/
.p_chat_find .com_search_sort,
.p_chat_catalog .com_search_sort { padding-top:13px; padding-bottom:11px; border-bottom:1px solid #f4f4f4 } 

/*!채팅 리스트*/
.p_chat_list main { padding-bottom: 54px; } 
.com_chat_list .item { padding:15px var(--pd-inline); border-bottom:1px solid #f4f4f4; display: flex; align-items: center; } 
.com_chat_list .item .profile_field { border-radius: 100px; overflow: hidden; min-width: 50px; width:50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-right: 10px; } 
.com_chat_list .item .profile_field img { max-width: none; max-height: 100%; min-width: 100%; min-height: 100%; object-fit: cover;} 
.com_chat_list .item .info_area{display: block;}
.com_chat_list .item .name_field { font-size: 15px; font-weight: bold; line-height: 1.2; letter-spacing: -0.38px; color: var(--black); margin-bottom: 5px;} 
.com_chat_list .item .date_field { font-size: 11px; line-height: 1.18; letter-spacing: -0.28px; color: #999; } 
.com_chat_list .item .img_area{margin-left:auto; border-radius: 5px; width:50px; height: 50px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-right: 5px;}
.com_chat_list .item .img_area img{max-width: none; max-height: 100%; min-height: 100%; min-width: 100%; object-fit: cover;}
