body{overflow-y: scroll;background:var(--gray-200);}
.mobile_wr{max-width:var(--body_width);width: 100%;background:#fff;}

/* bar */
.bar{ height: 0.8rem; background-color: var(--gray-100);}

/*버튼*/
.bottom_btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: var(--body_width);
	padding-bottom: env(safe-area-inset-bottom);
	z-index:1040;
	background:#fff;
	margin-left:-2.4rem;
	margin-right:-2.4rem;
}
.bottom_btn .btn_wrap{padding:0 2.4rem 1.8rem;}

.zd_2{position:relative;z-index:2;}
.zd_3{position:relative;z-index:3;}

.icon120{width:12.0rem;flex-shrink: 0;}
.icon100{width:10.0rem;flex-shrink: 0;}
.icon90{width:9.0rem;flex-shrink: 0;}
.icon80{width:8.0rem;flex-shrink: 0;}
.icon70{width:7.0rem;flex-shrink: 0;}
.icon65{width:6.5rem;flex-shrink: 0;}
.icon64{width:6.4rem;flex-shrink: 0;}
.icon60{width:6.0rem;flex-shrink: 0;}
.icon56{width:5.6rem;flex-shrink: 0;}
.icon52{width:5.2rem;flex-shrink: 0;}
.icon50{width:5.0rem;flex-shrink: 0;}
.icon46{width:4.6rem;flex-shrink: 0;}
.icon44{width:4.4rem;flex-shrink: 0;}
.icon42{width:4.2rem;flex-shrink: 0;}
.icon40{width:4.0rem;flex-shrink: 0;}
.icon38{width:3.8rem;flex-shrink: 0;}
.icon36{width:3.6rem;flex-shrink: 0;}
.icon34{width:3.4rem;flex-shrink: 0;}
.icon32{width:3.2rem;flex-shrink: 0;}
.icon30{width:3.0rem;flex-shrink: 0;}
.icon28{width:2.8rem;flex-shrink: 0;}
.icon26{width:2.6rem;flex-shrink: 0;}
.icon24{width:2.4rem;flex-shrink: 0;}
.icon20{width:2.0rem;flex-shrink: 0;}
.icon18{width:1.8rem;flex-shrink: 0;}
.icon16{width:1.6rem;flex-shrink: 0;}
.icon15{width:1.5rem;flex-shrink: 0;}
.icon14{width:1.4rem;flex-shrink: 0;}
.icon12{width:1.2rem;flex-shrink: 0;}
.icon8{width:0.8rem;flex-shrink: 0;}
.icon6{width:0.6rem;flex-shrink: 0;}
.icon4{width:0.4rem;flex-shrink: 0;}


/*PC*/
.body_center {width: 100%;max-width: 92.6rem;margin: 0 auto;display: flex;justify-content: center;}
.body_left {
    flex: 1 1 auto;
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}
.left_logo {width: 26rem;display: flex;justify-content: center;}
.left_logo img{width:17rem;}
.left_qr {
    width: 26rem;
    height: 26rem;
    background: #fff;
    border-radius: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 3px 12px 0px #00000017;
}
.left_qr img{width:18.6rem;    height: 18.6rem;}


/* 헤더 */
.hd_m {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--hd_height_m) !important;
    width: 100%;
    max-width: var(--body_width);
	color:var(--gray-600);
	border-bottom:1px solid var(--gray-100);
    position: fixed;
    top: 0;
    padding: 0 2.4rem;
    z-index: 1000;
}
.hd_m.bg-sky{border-color:#69788C0F;}
.hd_m button{border:0; background: transparent;}
.hd_m .tit{font-size:1.7rem;font-weight:600;flex:1 1 auto;}
.hd_m .hd_btn{min-width:3.0rem;}
.hd_m .hd_btn, .modal-header .hd_btn {display: flex;align-items: center;flex-shrink: 0;gap:1.6rem;}

.top_push{display:block;background:url(../img/top_push.png?v=1)no-repeat center / cover !important;width: 2.8rem;height:2.8rem;position: relative;}
/*.top_push.push_on{background:url(../img/top_push_on.png)no-repeat center / cover !important;}*/
.btn.push_on span.dot,
.top_push.push_on span {
    display: block;
}
.btn span.dot,
.top_push span {
    display: none;
    color: #fff;
    background: #FF4D4D;
    padding: 0.15rem 0.4rem;
    font-size: 1.1rem;
    line-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 2.30rem;
    transform: translateX(10%);
}

.push_toggle{width:2.8rem;height:2.8rem;background:url(../img/top_push.png?v=1)no-repeat center / cover !important;}
.push_toggle[aria-expanded="false"]{background-image:url(../img/top_push.png?v=1) !important;}
.push_toggle[aria-expanded="true"], .push_toggle.active{background-image:url(../img/top_push_not.png?v=1) !important;}

.hd_m img{flex-shrink: 0;}
.hd_m .sch_ip{background: rgba(255,255,255,0.1);border: 0;}
.hd_m .sch_ip button{width:3.0rem;}
.hd_m .sch_ip button > img{height:auto;}
.hd_m .sch_ip .form-control{height: 4.0rem;font-size:1.5rem;}


/* 모바일 메뉴 */
.hd_menu_btn {font-size: 2rem;}
.m_menu_wr {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: var(--body_width);
    z-index: 99999;
    transition: all 0.5s ease-in-out;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    transform: translateX(-50%);
}

/* x버튼 */
.close_btn_wr{display: none; opacity: 0;}
.m_nav .close_btn_wr{display: flex; justify-content: flex-end; opacity: 0;}
.menu_on .m_nav .close_btn_wr{opacity: 1;}
.close_btn{font-size: 2rem; border:0; height: auto; }
.close_btn img{width:3.0rem;}

/* 메뉴 열렸을때 외부 */
.menu_on .m_menu_wr{visibility: visible; opacity: 1; }
.m_nav{position: relative; width: 100%; height: 100%; z-index: 99999;  background: #fff; transition: all 0.4s ease-in-out; max-width: 0; transform: translateX(100%); visibility: hidden; opacity: 0; }
.menu_on .m_nav {
    transform: translateX(0%);
    visibility: visible;
    opacity: 1;
    max-width: var(--body_width);
    width: 80%;
}

.menu_bg{position: fixed;  left: 50%; top: 0; background: rgba(0,0,0,0.6); transition: all 0.4s ease-in-out; width: 100%; height: 100%; z-index: 99998; visibility: hidden; opacity: 0; transform: translateX(-50%); max-width:var(--body_width);}
.menu_on .menu_bg{visibility: visible; opacity: 1;}


/* 메뉴 열렸을때 내부 */
.m_nav .nav_wr{height: auto;}
.m_nav .nav_ul{display: block;}
.m_nav .nav_li{height: 100%; position: relative;}
.m_nav .nav_a{display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 1.2rem 1.6rem;}
.m_nav .nav_a i{display: inline-block;}
.m_nav .nav_a img{width:2.0rem;}

.m_nav .nav_ul2{display: none;background: var(--light);}
.m_nav .nav_ul2 a{display: block; padding: 1.2rem 1.6rem; white-space: nowrap;}



/*검색*/
.sch_ip {display: flex;background:#fff;padding: 0 1.6rem;border-radius: 0.8rem;border:1px solid var(--border-200);}
.sch_ip .form-control{height:4.4rem;padding: 0.5rem 0;border:0;}
.sch_ip .form-control:focus {background-color: transparent;}
.sch_ip button{width:1.6rem;height:1.6rem;border:0;background: transparent;}


/* IE의 경우 */
.sch_ip .form-control::-ms-clear,
.sch_ip .form-control::-ms-reveal{
    display:none;
}

/* 크롬의 경우 */
.sch_ip .form-control::-webkit-search-decoration,
.sch_ip .form-control::-webkit-search-cancel-button,
.sch_ip .form-control::-webkit-search-results-button,
.sch_ip .form-control::-webkit-search-results-decoration{
    display:none;
}
/*회색 검색*/
.sch_gray.sch_ip{background: var(--light);border:0;}


/*새로운 input 스타일*/
.form_box {
    border: 1px solid var(--border-300);
    border-radius: 0.8rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    display: flex;
    height: 5.0rem;
    align-items: center;
}
.form_box .form-control{flex:1 1 auto;height:2.4rem;border:0;border-radius:0;padding: 0;line-height: 2.4rem;}
.form_box .form-control[type="file" i]::-webkit-file-upload-button{display:none;}
.form_box .custom-select, .form_box .custom-select2{background-position: center right;}
.form_box .form_time{display:none;}
.ip_box .ip_valid{display:none;}
.ip_box.ip_valid .ip_valid{display:block;}
.form_box .btn-sm{transform: translateX(0.6rem);}
.form_box input.form-control[type="date"]::before, .form_box input.form-control[type="time"]::before{right:0;}

.form_box.disabled{background:var(--gray-50);}
.form_box.disabled .form-control{background:var(--gray-50);color:var(--gray-300);}
.form_box .btn:disabled, .form_box .btn.disabled{border-color: var(--border-300);}
.form_box .form-control[readonly]{background-color: var(--disabled);border:0;}
.form_box:has(input[readonly]), .form_box:has(input[disabled]) {
    background-color: var(--disabled);
    border-color: var(--gray-200);
}

.form_box span{line-height:2.4rem;}
.form_box.form_textarea{height:auto;padding-top:1.5rem;padding-bottom:1.5rem;}

/*노데이터*/
.result_data{display:flex;align-items: center;justify-content: center; flex-direction: column;}
.result_data img {width: 5.6rem;}



/*숫자 증감*/
.item_opt_counter {
    position: relative;
    width: 100%;
    height: 2.2rem;
    line-height: 2.2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
	justify-content: space-between;
	z-index:2;
}
.item_opt_counter_btn {
    width: 2.2rem;
    height: 2.2rem;
    vertical-align: top;
    padding: 0;
    background: var(--primary);
    border: 0;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
}
.item_opt_counter_btn img{filter: invert(100%) sepia(0%) saturate(8%) hue-rotate(163deg) brightness(101%) contrast(105%);}
.item_opt_counter_btn.disabled, .item_opt_counter_btn:disabled{background:var(--gray-200);}
.item_opt_counter_btn.disabled img, .item_opt_counter_btn:disabled img{filter: invert(74%) sepia(8%) saturate(398%) hue-rotate(178deg) brightness(85%) contrast(86%);}
.item_opt_counter .quantity {
    vertical-align: top;
    font-size: inherit;
    font-weight: 500;
    text-align: center;
    border: unset;
	width: auto; /* 초기 너비 (JS로 조절됨) */
	min-width: 18px; /* 최소 너비 설정 */
	color:var(--gray-600);
	font-size: 1.7rem;
    /*max-width: 60%;margin: 0 auto;*/
}
.item_opt_counter .quantity:focus{outline: 0;}
.item_opt_counter .quantity::placeholder {color: var(--input_placeholder);}
.item_opt_counter.disabled .quantity{color:#999;}
.item_opt_counter.disabled .item_opt_counter_btn{opacity: 0.3;}

/*양옆정렬 정보*/
.between_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
	margin-bottom:0.5rem;
}
.between_info:last-child{margin-bottom:0 !important;}

/*왼쪽정렬 정보*/
.left_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	margin-bottom:0.5rem;
}
.left_info:last-child{margin-bottom:0 !important;}



/*하단메뉴*/
.bt_menu {
    width: calc(100% + 2px);
    max-width: var(--body_width);
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    display: block;
	padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--gray-200);
}
.bt_menu.dark_menu{background: var(--gray-600);border-top: 0;}
.bt_menu ul{display: flex;justify-content: space-between;align-items: center;text-align:center;}
.bt_menu ul li{width:20%;touch-action: manipulation;}
.bt_menu ul li a {
    display: flex;
    color: var(--gray-500);
    font-weight: 500;
    font-size: 1.1rem;
    flex-direction: column;
    padding: 1rem 0;
    min-height: var(--ft_height_m);
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.bt_menu ul li a * {
    pointer-events: none;
}
.bt_menu ul li a.tab-pressing {
    transform: scale(0.9);
    opacity: 0.6;
}
.bt_menu ul li.on a {
	/* 고객QA20260630 #3: 선택 탭 글씨를 앱과 동일한 파랑(#3A86FF)으로 — 기존 회색(--gray-500)은 아이콘만 파랑이라 불일치 */
	color:#3A86FF;
	font-weight: 600;
}
.bt_menu ul li .ico {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    margin: 0 auto;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
/* 고객QA20260630 W2: 웹 하단탭 아이콘을 앱(tab0X) 업데이트본으로 교체(선택탭 블루 #3A86FF). mn04 svg→png. ?v 갱신=캐시리로드. */
.bt_menu ul li.mn01 .ico{background-image:url(../img/bottom_light_mn01_off.png?v=20260630w2);}
.bt_menu ul li.mn02 .ico{background-image:url(../img/bottom_light_mn02_off.png?v=20260630w2);}
.bt_menu ul li.mn03 .ico{background-image:url(../img/bottom_light_mn03_off.png?v=20260630w2);}
.bt_menu ul li.mn04 .ico{background-image:url(../img/bottom_light_mn04_off.png?v=20260630w2);}
.bt_menu ul li.mn05 .ico{background-image:url(../img/bottom_light_mn05_off.png?v=20260630w2);}
.bt_menu ul li.mn01.on .ico{background-image:url(../img/bottom_light_mn01_on.png?v=20260630w2);}
.bt_menu ul li.mn02.on .ico{background-image:url(../img/bottom_light_mn02_on.png?v=20260630w2);}
.bt_menu ul li.mn03.on .ico{background-image:url(../img/bottom_light_mn03_on.png?v=20260630w2);}
.bt_menu ul li.mn04.on .ico{background-image:url(../img/bottom_light_mn04_on.png?v=20260630w2);}
.bt_menu ul li.mn05.on .ico{background-image:url(../img/bottom_light_mn05_on.png?v=20260630w2);}
.bt_menu.dark_menu ul li.mn01 .ico{background-image:url(../img/bottom_dark_mn01_off.png?v=1);}
.bt_menu.dark_menu ul li.mn02 .ico{background-image:url(../img/bottom_dark_mn02_off.png?v=1);}
.bt_menu.dark_menu ul li.mn03 .ico{background-image:url(../img/bottom_dark_mn03_off.png?v=1);}
.bt_menu.dark_menu ul li.mn04 .ico{background-image:url(../img/bottom_dark_mn04_off.svg?v=1);}
.bt_menu.dark_menu ul li.mn05 .ico{background-image:url(../img/bottom_dark_mn05_off.png?v=1);}
.bt_menu.dark_menu ul li.mn01.on .ico{background-image:url(../img/bottom_dark_mn01_on.png?v=1);}
.bt_menu.dark_menu ul li.mn02.on .ico{background-image:url(../img/bottom_dark_mn02_on.png?v=1);}
.bt_menu.dark_menu ul li.mn03.on .ico{background-image:url(../img/bottom_dark_mn03_on.png?v=1);}
.bt_menu.dark_menu ul li.mn04.on .ico{background-image:url(../img/bottom_dark_mn04_on.png?v=1);}
.bt_menu.dark_menu ul li.mn05.on .ico{background-image:url(../img/bottom_dark_mn05_on.png?v=1);}
.bt_menu ul li a p {/*margin-top: 1.0rem;*/margin-top: 0rem;word-break: keep-all;/*line-height: 0.8rem;*/}
.bt_menu.dark_menu ul li.on a{opacity:1;}
.bt_menu.dark_menu ul li a{color:#fff;opacity:0.4;}


/*메뉴그룹*/
.mn_group{padding:2.6rem 0;}
.mn_group .item{display:flex;align-items: center;padding:1.58rem 0;border-bottom:1px solid var(--gray-100);}
.mn_group li:nth-child(1) .item{padding-top:0;}
.mn_group li:last-child .item{padding-bottom:0;border:0;}
.mn_group .item .tit{flex:1 1 auto;font-weight:600;}


.mn_group.my_mn .item{padding:1.35rem 0;}
.mn_group.my_mn .item .tit{font-size:1.5rem;}


.mn_group.terms_mn{padding:0;}
.mn_group.terms_mn .item{padding:1.83rem 0 !important;    border-bottom: 1px solid var(--gray-100) !important;}
.mn_group.terms_mn .item .tit{font-weight: 500;}


.mn_group.my_login_mn{padding:0;}
.mn_group.my_login_mn .item{padding:1.512rem 2.4rem !important;    border-bottom: 1px solid var(--gray-100) !important;}
.mn_group.my_login_mn .item .tit{font-weight: 500;}

/*하단배너*/
.bottom_banner {
    position: fixed;z-index: 1;
    bottom: 0;
    width: 100%;
    max-width: var(--body_width);
	padding-bottom: env(safe-area-inset-bottom);
	background:#fff;
	margin-left:-2.4rem;
	margin-right:-2.4rem;
}

/*아이템*/
.item{}
.item.media{align-items: center;}
.item .thum{position:relative;flex-shrink: 0;}
.item .item_hd{display:flex;align-items: center;}
.item .hd_left {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
	padding-right: 1.0rem;
}
.item .tit.line2_text {flex-shrink: 1;}
.item .list_pin{display: inline-flex;transform: translateY(-0.3rem);}
.item .tit{font-size:1.6rem;font-weight:600;}
.item .time{font-size:1.2rem;color:var(--gray-400);font-weight:500;    flex-shrink: 0;}
.item .item_body{flex:1 1 auto;}
.item .item-body-link, .item .thum-link{cursor: pointer;}
.item .item_bottom{display:flex;align-items: center;}
.item .article{font-size:1.3rem;color:var(--gray-500);flex:1 1 auto;}
.item .unread{
    display: inline-flex;
    min-width: 1.6rem;
	padding-left:0.2rem;
	padding-right:0.2rem;
    height: 1.6rem;
    background: var(--red);
    border-radius: 2.0rem;
    color: #fff;
    font-size: 1.0rem;
    align-items: center;
    justify-content: center;
	flex-shrink: 0;
}
.item .q_round, .item .a_round {
    font-size: 1.6rem;
    font-weight: 600;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-right:0.6rem;
}
.item .q_round{background:var(--primary);}
.item .disabled .q_round{background:#EFF1F4;color:var(--gray-400);}
.item .a_round{background:var(--gray-500);}
.item .answer_status{font-size:1.4rem;font-weight:600;color:var(--primary);}
.item .disabled .answer_status{color:var(--gray-400);}
.item .btn{flex-shrink: 0;}


/*로그인*/
.login_pg{padding-top:6.0rem;padding-bottom:3.7rem;}
.account_find a{color:var(--gray-400);font-size:1.4rem;line-height:100%;}
.account_find .line{width:1px;height:1.0rem;background:var(--gray-200);margin:0 1.3rem;display: block;}


/*회원가입*/
.sign_progress{height:0.4rem;background:var(--gray-200);position:relative;}
.sign_progress .ing{height:0.4rem;display:block;background:var(--primary);position:absolute;top:0;left:0;}
.agree_all .btn-light {
    color: var(--gray-400);
    font-weight: 500;
    background-image: url(../img/check_icon_off.png);
    background-size: 2.4rem;
    background-position: left 2.0rem center;
    background-repeat: no-repeat;
}
.agree_all .btn-light:hover {color: var(--gray-400);}
.agree_all .btn-light:focus, .agree_all .btn-light.focus {color: var(--gray-400);}
.agree_all .btn-light:not(:disabled):not(.disabled):active, .agree_all .btn-light:not(:disabled):not(.disabled).active, .show > .agree_all .btn-light.dropdown-toggle {
    background-image: url(../img/check_icon_on.png);
    color: var(--primary);
}
.agree_cont li{
    display: flex;
    align-items: center;
	margin-bottom:2.4rem;
}
.agree_cont .checks{flex:1 1 auto;}
.agree_cont .checks label{ align-items: start;}
.agree_cont .chk_p{display: flex; align-items: start;}
.agree_cont .chk_p p{color:var(--gray-500);word-break: keep-all;}
.agree_cont .chk_p span{flex-shrink: 0;}

.profile_upload .btn{margin:0 auto;position:relative;}
.profile_upload .icon_camera{width:2.8rem;height:2.8rem;border-radius:50%;background:var(--gray-500);border:2px solid #fff;position:absolute;right:0;bottom:0;z-index: 1;}
.profile_upload .rect{width:8.0rem;border-radius:50%;}
.profile_upload .img_upload{display:none;}
.profile_upload.on .img_upload{display:block;}
.profile_upload.on .img_no{display:none;}


/*친구(홈)*/
.popular_list .item{box-shadow: 0px 2px 9px 0px #D9DDE280;padding:1.2rem 0.8rem 0.8rem;background:#fff;border-radius:1.2rem;}

.popular_swiper{overflow-y: visible;}
.popular_swiper li{width:10.0rem;}

.main_friend li{/*margin-bottom:0.8rem;*/margin-bottom: 0;}
/*.main_friend li:last-child{margin-bottom:0;}*/
.main_friend .item{/*padding:1.5rem;*/padding: 1.0rem 2.4rem !important;background:#fff;/*border-radius:1.2rem;*/border:0;box-shadow: 0px 3px 12px 0px #D9DDE24D;}

/*푸쉬, 알림*/
.push_list .push_item{padding:1.6rem;border-bottom:1px solid var(--gray-100);}
.push_list .push_item .unread{
    width: 1.0rem;
    height: 1.0rem;
    border: 1px solid #fff;
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    z-index: 1;
    display: block;
    min-width: auto;
}


/*프로필이미지*/
.profile_img{position:relative;}
.profile_img .rect{border-radius:50%;}
.profile_img .img_upload{display:none;}
.profile_img.on .img_upload{display:block;}
.profile_img.on .img_no{display:none;}
.icon_status {
    width: 3.6rem;
    height: 3.6rem;
    background: var(--primary);
    border: 0.3rem solid #fff;
    display: block;
    position: absolute;
    right:-0.4rem;
    bottom:-0.4rem;
    z-index: 1;
    border-radius: 50%;
}
.icon_status img{width: 100%; display: block;}

/*친구프로필*/
.friend_profile {padding-bottom: 6.0rem;position:relative;}
.friend_profile:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background: linear-gradient(180deg, rgba(58, 134, 255, 0) 0%, #3A86FF 100%);opacity:0.05;}
.friend_profile > .container{position:relative;z-index: 1;}
.friend_profile .profile_img{width:11rem;}
.friend_fun ul{max-width:29.0rem;margin:0 auto;}
.friend_fun li .btn{flex-direction: column;width: 100%;}
.friend_fun li .fun_icon{width:6.4rem;}
.friend_fun li .fun_icon img{filter: drop-shadow(0.3rem 0.6rem 1.2rem #DDE4ED);}
.friend_fun li .count{font-size:1.8rem;font-weight:600;line-height: 0.723;}
.friend_fun li .name{font-size:1.1rem;color:var(--gray-500);line-height: 0.723;}

/*친구프로필 하단*/
.friend_profile_bottom {
    padding-top: 2.4rem;
    padding-bottom: 4.3rem;
    border-radius: 1.6rem 1.6rem 0 0;
    background: #fff;
    margin-top: -2.1rem;
    position: relative;
    z-index: 1;
    box-shadow: 0px -2px 6px 0px #D9DDE24D;
}
.profile_btn li{border-right:1px solid var(--gray-200);}
.profile_btn li:last-child{border-right:0;}
.profile_btn li .btn{flex-direction: column;width: 100%;}

.profile_btn .friend_del_add .icon_toggle{width:3.2rem;height:3.2rem;background-image: url(../img/profile_icon02.png); background-position: center; background-size: cover; background-repeat: no-repeat;}
.profile_btn .friend_del_add input:checked + .icon_toggle {background-image: url(../img/profile_icon02_on.png);}
.profile_btn .name{font-size:1.2rem;color:var(--gray-500);line-height: 1.4rem;}

/*펀점수주기*/
.fun_score_body{padding-top:3.1rem !important;padding-bottom:2.2rem  !important;}
.fun_message_body{padding-top:2.6rem !important;padding-bottom:2.3rem  !important;}
.fun_message_body .info_box{padding-top: 0.8rem;padding-bottom: 0.8rem;}


/*룩앳미 공통요소*/
.play_icon{border-radius:50%;background:rgba(0,0,0,0.5);z-index: 1;position:absolute;z-index: 2;}
.playtime{display:flex;position:absolute;z-index: 2;align-items: center;}
.look_list_item{display:block;}
.look_list_item .hits {
    position: absolute;
    z-index: 2;
    bottom: 1.2rem;
    left: 1.2rem;
}
.rect_look2,
.look_list_item .thum .rect_look{border-radius:1.5rem;}
.look_list_item .thum .rect_look:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.15);z-index: 1;}
.look_list_item .play_icon{top:50%;lefT:50%;transform: translate(-50%, -50%);}
.look_list_item .playtime{bottom:1.4rem;lefT:1.2rem;}



/*큰이미지 업로드*/

.image_upload_lg{display: block;position: relative;}
.image_upload_lg{width: 100%;position: relative;overflow: hidden; } 
.image_upload_lg:after{content: "";display: block;padding-bottom: calc(200 / 350 * 100%); } 
.upload_box_lg {
    width: 100%;
    cursor: pointer;
    background: url(../img/upload_lookatme.png) no-repeat center top 32% / 4.6rem;
    background-color: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 1.2rem;
    position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
    padding: 0;
    height: auto;
	overflow: hidden;
}
.upload_box_lg:has(.video_area){background:#000;}
.upload_box_lg .video_area {
  width: 40.23%;            
  height: 100%;       
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden; 
}
.upload_box_lg .video_area img{ position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.upload_box_lg .video_area video{position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.upload_box_lg .info {
    position: absolute;
    bottom: 50%;
    width: 100%;
    left: 0;
    font-size: 1.4rem;
    text-align: center;
    color: var(--gray-400);
    font-weight: 500;
    transform: translateY(4.7rem);
    line-height: 140%;
}
.upload_box_lg .upload_del {
    position: absolute;
    top: 1.0rem;
    right: 1.0rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: transparent;
    padding: 0 !important;
    display: none;
}
.image_upload_lg .upload_del img{width:100%;}
.image_upload_lg .upload_del{display: flex;}
.image_upload_lg .play_icon{top:50%;lefT:50%;transform: translate(-50%, -50%);}
.image_upload_lg .playtime{bottom:2.5rem;lefT:1.2rem;}
.image_upload_lg .video_control {
    bottom: 1.6rem;
    lefT: 1.2rem;
    right: 1.2rem;
    position: absolute;
}
.image_upload_lg .video_control .play_bar{height:0.4rem;}


.image_upload_xl{display: block;position: relative;}
.image_upload_xl{width: 100%;position: relative;overflow: hidden; } 
.image_upload_xl:after{content: "";display: block;padding-bottom: calc(300 / 390 * 100%); } 
.image_upload_xl .upload_box_lg .video_area{width: 51.55%;}

/*룩앳미 전체*/
.lookatme_list li .look_list_item{border:none;border-radius:1.2rem;overflow:hidden;}


/*룩앳미 릴스*/
.lookatme_tab{position:absolute;top:5.8rem;left:0;width:100%;z-index:2;}
.lookatme_tab .look_btn{border:1px solid var(--gray-300);border-radius:2.0rem;margin-right:1.0rem;color:#fff;backdrop-filter: blur(4px);background:rgba(255,255,255,0.2);padding-left:1.5rem;padding-right:1.5rem;}
.lookatme_tab .look_btn:last-child{margin-right: 0;}
.lookatme_tab .look_btn.active{border:1px solid #fff;background:#fff;color:#000;}

.lookatme_full{height:calc(100dvh - var(--ft_height_m) - env(safe-area-inset-bottom));padding-bottom:0;overflow:hidden;}
.full_video{height:100%;position:relative;overflow: hidden;background:#000;}
/* M11-31: 동영상이 화면 전체 높이를 채우도록 height:100% + object-fit:contain (이전: width:100% 만 → 가로/세로 비율 mismatch 시 여백) */
.full_video video{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:contain;z-index:0;}
.full_right_btn{position:absolute;bottom:1.6rem;right:1.6rem;z-index:1;}
.full_right_btn li{margin-bottom:2.0rem;}
.full_right_btn li:last-child{margin-bottom:0;}
.full_right_btn .btn-icon{flex-direction: column;width: 100%;}
.full_right_btn .btn-icon .fun_icon{width:5.0rem;padding:0.5rem;background:rgba(0,0,0,0.15);backdrop-filter: blur(2px);border-radius:50%;}
.full_right_btn .btn-icon .count, .full_right_btn .btn-icon .text{font-size:1.2rem;font-weight:400;color:#fff;line-height: 1.0;text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.25);}

.video_info{position:absolute;left:0;bottom:0;padding:0 1.6rem 1.6rem;z-index: 1;color:#fff;max-width: calc(100% - 8rem);}
.video_info .special_info span{gap:0.6rem;}
.video_info .video_user{display:flex;align-items: center;}
.video_info .video_user .name{font-size:1.6rem;font-weight:600;color:#fff;}
.video_info .info_dt *{text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.25);}
.video_info .info_dt .tit{font-size:1.5rem;font-weight:600;}
.video_info .info_dt .info_tag{gap:0.4rem;font-size:1.4rem;}
.video_info .info_dt .info_tag span{line-height:100%;padding:0.6rem 0;} /* 고객QA20260706: 어르신 탭 편의 — 해시태그 세로 탭영역 확대 */

.video_control .play_bar {
    width: 100%;
    height: 0.3rem;
    background: rgba(255,255,255,0.3);
    position: absolute;
	left:0;
	bottom:1rem; /* 고객QA20260706: 최대한 아래(탭바 바로 위). 시크 제어는 위임+캡처로 격리해 낮아도 안 걸림 */
	z-index: 6;
}
.video_control .play_bar .play_ing {
    height: 100%;
    background: #FF2D2D; /* 고객QA20260706: 붉은색 재생바 */
    position: absolute;
    left: 0;
    top: 0;
}
/* 고객QA20260706: 진행 위치 점(노브) — 붉은 원 */
.video_control .play_bar .play_ing::after{
    content:'';
    position:absolute;
    right:-0.6rem;
    top:50%;
    transform:translateY(-50%);
    width:1.2rem;
    height:1.2rem;
    border-radius:50%;
    background:#FF2D2D;
    box-shadow:0 0 3px rgba(0,0,0,0.5);
}
/* 고객QA20260706: 룩앳미 재생바 시크 — 터치영역 확장 + 드래그 중 두껍게 + 시간 표시 */
.video_control .play_bar{cursor:pointer;}
.video_control .play_bar::before{content:'';position:absolute;left:0;right:0;top:-1.4rem;bottom:-0.4rem;} /* 터치영역: 위로 축소(해시태그 클릭 안 막게), 아래 최소(탭바 회피) */
.video_control .play_bar.seeking{height:0.6rem;}
/* 드래그 중 시간 표시(화면 중앙 알약) — body 에 append(위임) → 별도 셀렉터 */
.seek_time_fixed{display:none;position:fixed;top:46%;left:50%;transform:translateX(-50%);color:#fff;font-size:2.2rem;font-weight:700;background:rgba(0,0,0,0.55);padding:0.8rem 1.6rem;border-radius:0.8rem;white-space:nowrap;z-index:9999;pointer-events:none;}
/* 고객QA20260706: 캡션은 재생바 바로 위(고객 확정 레이아웃) — 태그→바 간격 ~27px */
@media (max-width:991.98px){
  .full_video .video_info{ bottom:2.4rem; }
}



/*그룹대화*/
.group_item{padding:1.6rem 2.4rem;border-bottom:1px solid var(--gray-100);user-select: none;background: #fff;}
.group_item .thum{width:5.6rem;margin-right:1.4rem;}
.group_item .thum .rect{border-radius: 0.8rem;}

.modal-body .group_list li:last-child .group_item{border-bottom:0;}


/*개인대화*/
.one_item{padding:1.75rem 2.4rem;padding: 1.4rem 2.4rem;border-bottom:1px solid var(--gray-100);user-select: none;background: #fff;}
.one_item .thum{width:4.6rem;width:5.6rem;margin-right:1.4rem;}
.one_item .thum .rect{border-radius: 50%;}
.one_item .icon_status, .friend_list .icon_status{
    width: 2.2rem;
    height: 2.2rem;
    border: 0.2rem solid #fff;
    right:-0.2rem;
    bottom:-0.2rem;
}
.one_item .icon_status img{width:100%;display:block;}


/*컨텍스트 메뉴*/
body.context-active {
    position: fixed;
    top: 0;
    overflow-y: scroll;
    width: 100%;
}
.context_dropdown {
    position: relative;
    -webkit-touch-callout: none;
}
/* 터치 디바이스 (모바일/태블릿) 한정 — 길게 누름 시 OS 네이티브 선택 메뉴와 커스텀 contextmenu 가 충돌하는 것을 회피. */
@media (pointer: coarse) {
    .context_dropdown .chat-box1,
    .context_dropdown .chat-box2,
    .context_dropdown .speech_bubble,
    .context_dropdown .cont {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* PC 마우스/트랙패드 (pointer:fine) — default_user.css 의 body { user-select: none } 가 채팅 메시지에도 상속되어
   드래그 선택이 차단되는 문제 회피. 채팅 본문 영역만 명시적으로 text 로 무력화. */
@media (pointer: fine) {
    .context_dropdown .chat-box1,
    .context_dropdown .chat-box2,
    .context_dropdown .speech_bubble,
    .context_dropdown .cont,
    .context_dropdown .cont * {
        -webkit-touch-callout: default;
        -webkit-user-select: text !important;
        -moz-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
    }
}

/* 모달 방식으로 변경하여 is_upward 불필요 */
/*.context_dropdown.is_upward .context_menu{flex-direction: column-reverse;bottom: calc(100% + 1.5rem);top: unset;}*/
.context_dropdown.active .item {position: relative; z-index: 1001;}
.context_dropdown.active .context_menu{display:flex;}
.context_menu {
	display:none;
    padding: 0;
    width: 18.4rem;
    border: 0;
    overflow: visible;
    z-index: 1001;
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    height: fit-content;
	flex-direction: column;
    background: transparent;
}
.context_menu .context_menu_box{ box-shadow: 0 0.4rem 2.0rem rgba(0, 0, 0, 0.15);border-radius: 1.2rem;font-size: 1.5rem;color: #000;background: #fff; overflow-y: auto; max-height: 50vh; position: relative; z-index: 1;}
/* SPEC-QAP-CUS-0717-MENTION: 본문 @멘션 강조 + 입력바 위 추천 목록 */
.cont .mention{ color: var(--primary); font-weight: 600; }
/* 내 말풍선(파란 배경)은 primary 가 배경과 동색이라 흰색+밑줄로 구분 (스크린샷 검증에서 발견) */
.bubble_right .cont .mention{ color: #fff; font-weight: 700; text-decoration: underline; }
.mention_suggest{ position: absolute; left: 1.6rem; right: 1.6rem; bottom: 100%; margin-bottom: .6rem; background: #fff; border-radius: 1.2rem; box-shadow: 0 .4rem 2.0rem rgba(0,0,0,.15); max-height: 26rem; overflow-y: auto; z-index: 1050; }
.mention_suggest .mention_item{ display: flex; align-items: center; gap: 1rem; padding: 1.0rem 1.4rem; color: #121212; border-bottom: 1px solid var(--gray-100); }
.mention_suggest .mention_item:last-child{ border-bottom: 0; }
.mention_suggest .mention_item img, .mention_suggest .mimg_empty{ width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; background: var(--gray-100); flex: 0 0 auto; }
.mention_suggest .mention_item .mnick{ font-size: 1.5rem; }
.mention_suggest .mention_item .msn{ color: var(--gray-400); font-size: 1.2rem; margin-left: auto; }
/* SPEC-QAP-CUS-0717-REACTIONADD: 리액션 바 좌우 스크롤(텔레그램식) — 10종 나열, 스크롤바 숨김 */
.context_menu .reaction_scroll{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; column-gap: 1.7rem; }
.context_menu .reaction_scroll::-webkit-scrollbar{ display: none; }
.context_menu .reaction_scroll .btn-icon{ flex: 0 0 auto; }
.context_menu .dropdown-item{padding:1.0rem 1.2rem;cursor: pointer;color:#121212 !important;display: flex !important; justify-content: space-between;align-items: center;border-bottom:1px solid var(--gray-100);}
.context_menu .dropdown-item span{color:#121212 !important; flex-shrink:0;}
.context_menu .dropdown-item:last-child{border-bottom:0;}
.context_menu .dropdown-item.active, .context_menu .dropdown-item:active{background:var(--gray-100) !important;color:var(--gray-600) !important;}
.context_dropdown .context_backdrop {
    display: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: calc(50% + var(--body_width02));
    width: 100%;
    height: 100%;
    z-index:1000;
    /* backdrop-filter: blur(8px); — Android WebView 렌더링 문제로 비활성화 */
    transform: translateX(-50%);
    max-width: var(--body_width);
}
.context_dropdown.active .context_backdrop{display: block;}



/*프로필 영역의 그룹대화 리스트*/
.profile_group .group_item{padding:0;border-bottom:0;margin-bottom:2.0rem;}

/*인포박스*/
.info_box {
    border-radius: 1.0rem;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    background: var(--gray-100);
}


/*결제정보*/
.pay_detail .pay_dt.border_dashed{border-top-style: dashed;}
.pay_detail .pay_dt{padding:3.0rem 0.4rem;border-top: 1px solid var(--gray-200);border-bottom: 1px solid var(--gray-200);}
.pay_detail .between_info {margin-bottom: 2.4rem;}




/*골드 충전*/
.gold_radio li{margin-bottom:1.0rem;}
.gold_radio li:last-child{margin-bottom:0;}
.gold_radio_btn.btn {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 6.4rem;
    background: var(--gray-100);
    border: 1px solid transparent;
    border-radius: 1.0rem;
	padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.gold_radio_btn .left {display: flex;align-items: center;flex: 1 1 auto;}
.gold_radio_btn .name{font-size:1.8rem;font-weight:700;color:var(--gray-500);}
.gold_radio_btn .amount{font-size:1.6rem;font-weight:500;color:var(--gray-400);}

.gold_radio_btn.active, .gold_radio_btn:has(input:checked){border-color:var(--primary-200);background:#fff;}
.gold_radio_btn.active .name, .gold_radio_btn:has(input:checked) .name{color:var(--gray-600);}
.gold_radio_btn.active .amount, .gold_radio_btn:has(input:checked) .amount{color:var(--gray-500);}


/*음성통화, 영상통화*/
.call_voice_pg{background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10% 100%);}

.call_person{text-align:center;position: relative;z-index: 1;}
.call_person .name{font-size:2.4rem;font-weight:700;color:#fff;}
.call_person .state_time {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading_text {display: inline-block;width:1.5rem;text-align: left;}
.loading_text::after {
    content: '';
    display: inline-block;
    animation: loadingDots 2.0s infinite step-end;
}
@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}
.call_button {
    padding: 0 4.0rem;
    position: absolute;
    bottom: 5.8rem;
    left: 50%;
    right: 0;
    max-width: 44rem;
    width: 100%;
    transform: translateX(-50%);
	gap: 2.4rem;
	flex-wrap: wrap;
}
.call_button .row{justify-content: space-between;    width: 100%;}
.call_button .btn{border:0;width:7.6rem;height:7.6rem;border-radius:50%;background:rgba(255,255,255,0.2);padding: 1.0rem;flex-shrink: 0;}
.call_button .btn:hover{background:rgba(255,255,255,0.25);}

.call_button .btn.call_down{background:var(--red) !important;}
.call_button .btn.call_accept{background:#0BCD2E !important;}
.call_button .btn.call_speaker{background-image:url(../img/speaker_on.png);background-size:5.6rem;background-position:center;background-repeat:no-repeat;}
.call_button .btn.call_speaker.active{background-image:url(../img/speaker_off.png);background-color:#fff;}
.call_button .btn.call_voice{background-image:url(../img/voice_on.png);background-size:5.6rem;background-position:center;background-repeat:no-repeat;}
.call_button .btn.call_voice.active{background-image:url(../img/voice_off.png);background-color:#fff;}

.call_video_pg{background:url(../img/sample02.jpg)no-repeat center / cover;}
.video_overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:0;}
.camera_thum{display:none;width:12rem;height:16rem;border:1px solid var(--gray-200);border-radius:1.2rem;position:absolute;top:2.0rem;left:1.6rem;background:url(../img/sample01.jpg)no-repeat center / cover;z-index:2;}
.call_video_pg .call_button .btn{background-color:rgba(0,0,0,0.45);}


/*프로필 모양*/
.user_column{display:flex; align-items: center; flex-direction: column;text-align:center;}
.user_column .thum{position:relative;flex-shrink: 0;}
.user_column .name{font-size:1.3rem;font-weight:500;}


/*검색*/
.search_history li{display:flex;align-items: center;    justify-content: space-between;margin-bottom:2.4rem;}
/*.search_history li:last-child{margin-bottom:0;}*/
.search_history li a{display:flex;align-items: center;line-height: 100%;}


/*채팅*/
.wrap:has(.talk_pg) {
    min-height: 100dvh;
    background: linear-gradient(0deg, #E2EDFF, #E2EDFF), radial-gradient(164.76% 81.16% at 12.69% 100%, rgba(80, 217, 255, 0.12) 0%, rgba(236, 243, 255, 0.12) 100%);
}
.talk_content {padding-bottom: 10rem;}
.talk_content.is_more_content_open{padding-bottom: 20rem;}
/* 채팅방 배경색(개인별·방별, 2026-07-03) — 선택 시 전체 배경을 커스텀 색으로. 헤더는 투명이라 색이 비쳐
   상단(시간영역 포함)까지 적용됨. 어두운 색이므로 헤더 텍스트/아이콘을 밝게 전환한다. */
.wrap.chat-bg-custom:has(.talk_pg){ background: var(--chat-bg) !important; }
/* 헤더 .hd_m 은 .wrap 밖(position:fixed, .bg-sky 자체배경)이라 body 기준으로 커스텀색·밝은텍스트 적용
   → 상단(시간영역)까지 전체 커스텀색. img/bell 아이콘은 반전으로 흰색화. */
body.chat-bg-custom .hd_m{ background: var(--chat-bg) !important; color:#fff; border-bottom-color: rgba(255,255,255,0.18); }
body.chat-bg-custom .hd_m .tit{ color:#fff; }
body.chat-bg-custom .hd_m button img{ filter: brightness(0) invert(1); }
body.chat-bg-custom .hd_m .stt_push-btn{ filter: brightness(0) invert(1); }
/* 보조 텍스트(시간·날짜구분·"들어왔습니다/나갔습니다" 안내·삭제안내·random_info)도 어두운 배경에서 밝게(가독).
   ★.date 는 입장/퇴장 안내(data-type=notice)·날짜구분·삭제안내에 공통 사용되며 기본색 #69788C(회색)라 안 보였음. */
body.chat-bg-custom .chattime,
body.chat-bg-custom .chatdate,
body.chat-bg-custom .talk_content .date,
body.chat-bg-custom .talk_content .random_info{ color: rgba(255,255,255,0.92) !important; }
body.chat-bg-custom .talk_content .date img{ filter: brightness(0) invert(1); } /* 입장/퇴장 회색 아이콘 → 흰색 */
body.chat-bg-custom .talk_content .name{ color: rgba(255,255,255,0.92) !important; } /* 고객QA20260705: 어두운 배경서 발신자 닉네임 흰색 */
/* 로딩 오버레이도 커스텀색으로(로딩 중 연파랑 깜빡임 방지) */
body.chat-bg-custom .modal_loading{ background: var(--chat-bg) !important; }
/* 밝은 커스텀색(예: 카톡 하늘색): 밝기 판정으로 body.chat-bg-light 부여 → 텍스트/아이콘을 어둡게 원복(가독) */
body.chat-bg-custom.chat-bg-light .hd_m{ color:#333; border-bottom-color: rgba(0,0,0,0.10); }
body.chat-bg-custom.chat-bg-light .hd_m .tit{ color:#333; }
body.chat-bg-custom.chat-bg-light .hd_m button img,
body.chat-bg-custom.chat-bg-light .hd_m .stt_push-btn,
body.chat-bg-custom.chat-bg-light .talk_content .date img{ filter: none; }
body.chat-bg-custom.chat-bg-light .chattime,
body.chat-bg-custom.chat-bg-light .chatdate,
body.chat-bg-custom.chat-bg-light .talk_content .date,
body.chat-bg-custom.chat-bg-light .talk_content .random_info{ color: rgba(0,0,0,0.55) !important; }
body.chat-bg-custom.chat-bg-light .talk_content .name{ color: var(--gray-500) !important; } /* 밝은 커스텀=원복 */
/* 색상 팔레트 */
.bg_color_list{ display:flex; flex-wrap:wrap; gap:1.8rem; justify-content:center; padding:1rem 0 2.4rem; }
.bg_color_swatch{ width:5.6rem; height:5.6rem; border-radius:50%; border:2px solid rgba(0,0,0,0.08); padding:0; }
.bg_color_swatch.on{ border-color:#4d83ff; box-shadow:0 0 0 2px #4d83ff; }
.bg_color_default{ background:#E2EDFF; display:flex; align-items:center; justify-content:center; }
.bg_color_default span{ font-size:1.2rem; color:#666; }
.btn_scroll_bottom {
    /* 고객QA20260707: 답글배너와 겹침 → 입력바(.talk_input) 기준 absolute 로 배너/첨부 높이 따라 자동 상승 (모바일 동일) */
    position: absolute;
    top: -4.8rem;
    bottom: auto;
    right: 1.6rem;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--gray-200);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
}
.talk_input {
    position: fixed;
    bottom: 0;
    /*padding: 0 1.6rem;*/
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
    max-width: var(--body_width);
    /* 고객QA20260630(B방식): 입력바는 안드로이드 앱(=iPhone 11pro)처럼 — 바 배경 '없음(완전 투명)'.
       입력 컨트롤(pill·+버튼)만 흰 0.9(아래). 단색배경/네모박스/블러 모두 금지(고객: "대화입력칸만 투명").
       마지막 메시지가 입력바 뒤로 가려지는 것은 .talk_content 하단 스페이서(chat_detail.php)로 방지. */
	z-index: 999;
}
.talk_input .input_wrap{display: flex;align-items: end;padding:1.4rem 1.6rem;position: relative;}
/* 고객QA20260630: 안드로이드 앱(CHAT_FLOATING_CONTROL_BG=rgba(255,255,255,0.9))과 동일 — 입력 pill 반투명 0.9, 그림자 제거(반투명에 비쳐 회색지저분 방지). blur 미사용. */
.talk_input .write_ip {display: flex;background:rgba(255,255,255,0.9);padding:0 1.0rem 0 1.6rem;width:calc(100% - 8.0rem - 0.8rem - 4.2rem - 4.2rem);border-radius:2.4rem;}
.talk_input .write_ip .text_area {
    margin-right: 1.0rem;
	/*padding:1.1rem 0 0;padding: 1.1rem 0;*/
	line-height: 140%;line-height: 22px;
    word-break: keep-all;
	background: transparent;
	font-size:1.6rem;
    height: 42px;
    height: 29px;padding: 0.5rem 0 0;margin-top: 0.6rem;margin-bottom: 0.7rem;
    overflow: hidden !important;
    resize: none;

    display: block !important;
    overflow-y: auto !important; /* 항상 스크롤바가 작동 가능한 상태 유지 */
    max-height: 112px; /* JS의 maximumAllowedHeight와 동일하게 설정 */
    box-sizing: border-box; /* 패딩이 높이 계산에 영향을 주지 않도록 */
    touch-action: auto !important;
}
.talk_input .write_ip .text_area::placeholder{color:var(--gray-400);}
.talk_input .write_ip .text_area:focus-visible{outline: 0;}
.talk_input .write_ip .text_area:focus {background-color: transparent;}
.talk_input .input_wrap button{border:0; padding: 0;border-radius:50%;}
.talk_input .input_wrap .btn_more{width:4.2rem;height:4.2rem;border-radius:50%; flex-shrink: 0;margin-right:0.8rem;transition: all 0.2s ease;background: rgba(255,255,255,0.9);}
.talk_input .input_wrap .btn_more[aria-expanded="true"] img{transform: rotate(-45deg);transition: all 0.2s ease;}

.talk_input .input_wrap .btn_puntalker{
    width: 4.2rem;
    height: 4.2rem;
    padding: 0.6rem;
    flex-shrink: 0;
    margin-left: 0.8rem;
    background: rgba(255,255,255,0.9);
}
.talk_input .write_send{position:relative;padding:0;width: 2.6rem; height: 2.6rem; flex-shrink: 0;align-self: end;margin-bottom:0.9rem;}
.talk_input .write_send:before{
    content: ''; display: block; width: 2.6rem; height: 2.6rem; position: absolute; top: 0;left: 0; background: var(--gray-400);cursor: pointer;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover !important; mask-size: cover !important;
	-webkit-mask: var(--ic_send); mask: var(--ic_send);
}
.talk_input .write_ip .text_area:focus + .write_send:before, .talk_input .write_send:hover:before, .talk_input .write_send:active:before{background: var(--primary);}

.more_file{padding:3.6rem 3.5rem;background: #fff;border-radius: 1.6rem 1.6rem 0 0;}
.more_file .btn{font-size:1.2rem;font-weight:500;color:var(--gray-500);line-height:100%; flex-direction: column; align-items: center;}
.more_file img{width:100%;height:auto;border-radius:50%;background:var(--gray-100);}

.ipunt_reply{padding:1.2rem 0.4rem 0.2rem;display:none;}
.ipunt_reply.active{display:flex;padding: 0 1.6rem;}
.talk_input:has(.ipunt_reply.active) {
    /* 고객QA20260630(B방식): 답장 시에도 바 투명 유지 — 옛 프로스트 박스(#FFFFFFAD 68%+blur) 제거. 배경 없음. */
    padding-top: 1.2rem;
}
.ipunt_puntalker{position:absolute;right:1.6rem;bottom:100%;display:none;}
.ipunt_puntalker.active{display:block;}
.ipunt_puntalker li{margin-bottom:1.6rem;}
.ipunt_puntalker li:last-child{margin-bottom:0;}
.ipunt_puntalker li .fun_icon{width:5.0rem;padding:0.5rem;background:#fff;border-radius:50%;box-shadow: 0 0.3rem 1.2rem 0 #00000017;}


.speech_item{display: flex;align-items: flex-start;margin-top: 2.4rem;}
.speech_item .context_dropdown{display:flex;flex-direction: column; gap: 0.6rem;}
.speech_item ul, .speech_item li{
	display: flex;
    flex-direction: column;
    align-items: self-start;
    gap: 0.2rem;
}
.speech_item ul{gap: 0.6rem;}
.speech_item li .speech_bubble{background: #fff;color: var(--gray-600);border-radius: 0.2rem 1.6rem 1.6rem 0.2rem;box-shadow: 0px 3px 9px 0px #1F2A3C0F;}
.speech_item li + li .speech_bubble{border-radius: 0.2rem 1.6rem 1.6rem 0.2rem;}
.speech_item li:last-child .speech_bubble{border-radius: 0.2rem 1.6rem 1.6rem 1.6rem;}
.speech_item li:has(.sympathy) .speech_bubble{border-bottom-left-radius:1.6rem;}
.speech_item li:has(.speech_link) .speech_bubble{border-bottom-left-radius:0.2rem;border-top-left-radius:1.6rem;}

.speech_item .thum{margin-right:0.8rem;}
.speech_item .thum .rect{width:3.6rem;border-radius:50%;}
.speech_item .name{font-size:1.1rem;color:var(--gray-500);margin-bottom:0.6rem;padding-top:0.2rem;}

.speech_bubble {
    display: inline-block;
    width: fit-content;
    background: var(--gray-100);
    padding: 0.75rem 1.3rem;
	cursor: pointer;
	color:var(--gray-600);
	position: relative;
	max-width: 26.0rem;
}
.speech_bubble{max-width: 24.0rem;}
.speech_item.speech_item_me .speech_bubble{max-width: 26.0rem;}
.speech_bubble .cont_reply{font-size:1.2rem;font-weight:500;border-bottom:0.5px solid var(--gray-200);padding-bottom:1.0rem;margin-bottom:1.0rem;}
/* 고객QA20260707: 사진 답장 인용박스 — 사진은 말풍선 배경이 없어 카드형으로 */
.speech_photo .cont_reply_photo{background:#fff;border:1px solid var(--gray-200);border-radius:0.8rem;padding:0.8rem 1.2rem;margin-bottom:0.6rem;max-width:24rem;}
.speech_photo .cont_reply_photo .cont_reply{font-size:1.2rem;font-weight:500;border-bottom:0;padding-bottom:0;margin-bottom:0;cursor:pointer;}
.speech_photo .cont_reply_photo .cont_reply p:first-child{color:var(--gray-500);margin-bottom:0.2rem;}
/* SPEC-QAP-CUS-0601-1: 채팅 메시지/전체보기 모달 링크를 '링크처럼' — 파란색+밑줄+hover */
.speech_bubble .cont a,.fun_message_body a{color:var(--primary);text-decoration: underline;word-break: break-all;}
.speech_bubble .cont a:hover,.fun_message_body a:hover{opacity:0.85;}
/* SPEC-QAP-CUS-0601-6: 안읽음 구분선 '여기까지 읽었습니다' */
.chat_unread_divider{display:flex;align-items:center;text-align:center;margin:1.6rem 0;gap:0.8rem;}
.chat_unread_divider::before,.chat_unread_divider::after{content:'';flex:1;height:1px;background:var(--primary);opacity:0.5;}
.chat_unread_divider span{background:var(--primary);color:#fff;font-size:1.2rem;font-weight:600;white-space:nowrap;padding:0.5rem 1.4rem;border-radius:2rem;box-shadow:0 1px 4px rgba(77,131,255,0.35);}
.speech_item .cont_date {
    font-size: 1.1rem;
    color: #69788C;
    white-space: nowrap;
}
.speech_item .message_unread {
    font-size: 1.1rem;
    color: var(--primary);
    line-height: 1;
}
.speech_item .message_unread::after {
    content: '✓';
}
.sympathy{display:inline-flex;align-items: center;gap:0.2rem;}
.sympathy_item{display: flex;align-items: center;font-size: 1.0rem;font-weight: 500;padding: 0.4rem 0.6rem;border-radius: 2.0rem;background: #FFFFFF80 !important;}
.sympathy_item img{width:1.2rem;margin-right:0.3rem;}





.speech_item.speech_item_me li .speech_bubble{background: var(--primary);color:#fff;border-radius: 1.6rem 0.2rem 0.2rem 1.6rem;}
.speech_item.speech_item_me li + li .speech_bubble{border-radius: 1.6rem 1.6rem 0.2rem 1.6rem;}
.speech_item.speech_item_me li:last-child .speech_bubble{border-radius: 1.6rem 0.2rem 1.6rem 1.6rem;}
.speech_item.speech_item_me li:has(.sympathy) .speech_bubble{border-top-right-radius:1.6rem;}
.speech_item.speech_item_me li:has(.speech_link) .speech_bubble{border-bottom-right-radius:0.2rem;border-top-right-radius:1.6rem;}
.speech_item.speech_item_me, .speech_item.speech_item_me .context_dropdown{justify-content: end;align-items: self-end;}
.speech_item.speech_item_me ul, .speech_item.speech_item_me li{align-items: end;}
.speech_item.speech_item_me .cont_date{}
.speech_item.speech_item_me .cont_reply{border-color:rgba(255,255,255,0.2);}
.speech_item.speech_item_me .message_unread{}

.speech_item.speech_item_me .context_menu{right:0;left: unset;}
.speech_item.speech_item_me .speech_bubble .cont a{color:#fff;}
.speech_photo {
    display: inline-block;
    width: fit-content;
    border-radius: 0rem !important;
    cursor: pointer;
    position: relative;
    max-width: 22.0rem;
    padding: 0;
	background:transparent !important;
}
.speech_photo img{border-radius: 1.0rem;min-height:4rem;background:#f0f0f0;}
/* 2026-05-23: 1장 (낱장 — .image-grid 안 거치는 케이스) — 비율 보존 + max-height 2x cap + 흰색 2px border.
   여러장 grid 안의 img 는 .image-grid button > img 에서 aspect-ratio 1/1 강제. */
.speech_photo > button > img {
    max-height: 38rem; /* 19rem(speech_photo max-width) × 2 */
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    border: 2px solid #fff;
    box-sizing: border-box;
}
.speech_photo .photo_not {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
	background: #00000066;
	border-radius: 1.0rem;
}
.speech_record{overflow: hidden; border-radius: 1.6rem;	border:1px solid var(--gray-200);}
.speech_record .play_bar {
	background: #fff;
    padding: 1.0rem 1.2rem;
    position: relative;
    display: flex;
    width: 22rem;
    max-width: calc(100vw - 12rem);
    height: 5.0rem;
    align-items: center;
    gap: 0.8rem;
    z-index: 0;
    box-shadow: 0px 3px 9px 0px #1F2A3C0F;
}
.speech_record .play_bar .play_time{flex-shrink:0;min-width:3.2rem;text-align:right;}
.speech_record.disabled .play_bar{background:#EFF1F4;}
.speech_record.disabled .play_bar .text-gray-600{color: var(--gray-400);}
.speech_record .play_bar .play_toggle.disabled, .speech_record .play_bar .play_toggle:disabled{background-image:url(../img/voice_play_dis.png) !important;opacity:1;}
.speech_record .play_bar .play_toggle{width:1.6rem;height:1.6rem;background:url(../img/voice_play_d.png)no-repeat center / cover !important;} 
.speech_record .play_bar .play_toggle[aria-expanded="false"]{background-image:url(../img/voice_play_d.png) !important;}
.speech_record .play_bar .play_toggle[aria-expanded="true"], .speech_record .play_bar .play_toggle.active{background-image:url(../img/voice_pause_d.png) !important;}

.speech_record .play_bar .play_ing {
    height: 100%;
    background: var(--primary);
    position: absolute;
    left: 0;
    top: 0;
	z-index: -1;
}
.speech_media{background:transparent !important;}
.speech_media .media_down{width:23rem;border-radius: 1.6rem;padding:1.4rem;height:6.4rem;border:1px solid var(--gray-200);text-align: left;background: #fff;box-shadow: 0px 3px 9px 0px #1F2A3C0F;}
.speech_media .media_down .icon_down{width:3.6rem;height:3.6rem;background:url(../img/media_down.png)no-repeat center / cover;}
.speech_media.disabled .media_down{color: var(--gray-400);}
.speech_media.disabled .media_down .icon_down{background-image:url(../img/media_down_dis.png);}

.speech_link{display:block;max-width:23rem;border-radius:1.0rem;background:#fff;overflow: hidden;box-shadow: 0px 3px 9px 0px #1F2A3C0F;}
.speech_link .link_body{padding:1.0rem;}

.context_dropdown.active .speech_fun {position: relative; z-index: 1001;}
.speech_fun{padding:1.2rem;display:block;max-width:22rem;border:1px solid var(--gray-200);border-radius:1.0rem;background:#fff;overflow: hidden;}
.speech_fun .fun_icon{display:flex;align-items: center; justify-content: center;padding:0.8rem;border-radius:0.8rem;background:var(--gray-100);box-shadow: 0px 3px 9px 0px #1F2A3C0F;}


/*사진 크게 보기*/
.full_photo.modal .modal-header{background: rgba(0,0,0,0.8);position: fixed;z-index: 2;}
.full_photo.modal .modal-footer{background: rgba(0,0,0,0.8);position: fixed;z-index: 2; padding: 1.3rem 2.4rem calc(1.3rem + env(safe-area-inset-bottom));}
.full_photo.modal .modal-body {
    border: 0;
    padding: 0 2.4rem 6.0rem;
    display: flex;
    /*align-items: center;
    justify-content: center;*/
}
.full_photo.modal .modal-body img{max-height:100%;}
.full_photo_not {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
	background: #00000066;
}

/*톡 콘텐츠*/
.talk_content .date{font-size:1.4rem;line-height:100%;color:#69788C;text-align:center;}
.talk_content .random_info {
    font-size: 1.3rem;
    line-height: 100%;
    color: #69788C;
    text-align: center;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*톡 상단 고정*/
.fixed_message{position: fixed;top: var(--hd_height_m);width: 100%;max-width: var(--body_width);z-index: 2;}
.fixed_message .cont{display:none;align-items: flex-start;padding:1.1rem 2.0rem;background: #FFFFFFAD;backdrop-filter: blur(12px)}
.fixed_message .text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
    font-size: 1.4rem;
    flex: 1 1 auto;
}
/* SPEC-QAP-INT-29: 펼친 상태에서는 줄바꿈 + max-height + 스크롤 처리 — 긴 메시지가 화면 초과 방지 */
.fixed_message .cont.active .text{display: block; white-space: pre-wrap; word-break: break-word; max-height: 12rem; overflow-y: auto;}
.fixed_message .cont .arrow{transform: rotate(0deg);transition: all 0.2s;}
.fixed_message .cont.active .arrow{transform: rotate(180deg);transition: all 0.2s;}
/* 고객QA20260606: 고정 메시지 글자 복사 — 본문(.text)만 선택 가능하게(body{user-select:none} 상속 무력화). PC 드래그 + 모바일 long-press 선택/복사. */
.fixed_message .text, .fixed_message .text * { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; }
/* 고객QA20260703: 고정공지 접힘 상태를 모바일처럼 한 줄로 — 📌·텍스트·⌄ 를 한 행에.
   기존엔 텍스트가 flex-fill(내용폭)이라 아이콘/텍스트/화살표가 각각 줄바꿈돼 3줄 높이였음.
   텍스트를 flex:1 1 0 + min-width:0 으로 축소해 한 행에 담고 남는 텍스트는 말줄임(line-clamp:1).
   펼침(.active)은 기존대로 flex-fill+wrap 유지 → 다줄 본문 + 이미지 슬라이더가 아래 새 줄로. */
.fixed_message .cont:not(.active){ align-items: center; }
.fixed_message .cont:not(.active) .text{ min-width: 0; flex: 1 1 0 !important; }


/*음성,녹음*/
.voice_control .play_bar {
    height: 5.0rem;
    border-radius: 1.2rem;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.0rem;
    font-size: 1.5rem;
    color: var(--gray-400);
}
.voice_control .play_bar.active{background:var(--primary);color:#fff;}
.voice_control .play_bar .play_line {
	display:none;
    overflow-x: hidden;
    margin-left: 1.2rem;
    margin-right: 1.5rem;
    flex: 1 1 auto;
    height: 1.2rem;
    background: url(../img/voice_line.svg) repeat;
    background-size: auto 1.2rem;
	background-position: left;
	position:relative;
    touch-action: none; /* 드래그 시 브라우저 스크롤 방해 금지 */
}
.voice_control .play_bar .play_line .play_ing {
    width: 3.4rem;
    height: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: url(../img/voice_ing.svg) no-repeat;
    background-color: var(--primary);
    background-size: auto 1.2rem;
    background-position: center left;
}
.voice_control .play_bar.active .play_line{display:flex;}
.voice_control .play_bar .play_toggle{width:1.6rem;height:1.6rem;background:url(../img/voice_play.png)no-repeat center / cover !important;} 
.voice_control .play_bar .play_toggle[aria-expanded="false"]{background-image:url(../img/voice_play.png) !important;}
.voice_control .play_bar .play_toggle[aria-expanded="true"], .voice_control .play_bar .play_toggle.active{background-image:url(../img/voice_pause.png) !important;}
.record_toggle{width:4.0rem;height:4.0rem;background:url(../img/voice_record.png)no-repeat center / cover !important;} 
.record_toggle[aria-expanded="false"]{background-image:url(../img/voice_record.png) !important;}
.record_toggle[aria-expanded="true"], .record_toggle.active{background-image:url(../img/voice_stop.png) !important;}
.control_btn .btn_send{position:relative;padding:0;width: 2.6rem; height: 2.6rem; flex-shrink: 0;align-self: end;margin-bottom:0.9rem;}
.control_btn .btn_send:before{
    content: ''; display: block; width: 2.6rem; height: 2.6rem; position: absolute; top: 0;left: 0; background: var(--gray-400);cursor: pointer;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover !important; mask-size: cover !important;
	-webkit-mask: var(--ic_send); mask: var(--ic_send);
}
.control_btn .btn_send:focus + .control_btn .btn_send:before, .control_btn .btn_send:hover:before, .control_btn .btn_send.active:before{background: var(--primary);}


/*1:1대화방 생성*/
.create_list li{padding:2.4rem 1.6rem 2.4rem;background:var(--gray-100);border-radius:1.6rem;margin-bottom:1.0rem;}

/*그룹대화방 생성*/
.friend_list li .item.media{padding:1.5rem 2.4rem;border-bottom:1px solid var(--gray-100);}
.friend_list li .item.media .name{flex:1 1 auto;}


.friend_profile_bottom .friend_list li:last-child .item.media{border-bottom:0;}
.friend_block[aria-expanded="false"] .icon_toggle, .friend_block .icon_toggle{width:1.8rem;height:1.8rem;background-image: url(../img/btn_friend_block_18.png); background-position: center; background-size: cover; background-repeat: no-repeat;}
.friend_block[aria-expanded="true"] .icon_toggle, .friend_block.active .icon_toggle{background-image: url(../img/btn_friend_block_18_on.png);}


.group_select_list li{margin-right:1.6rem;max-width:4.6rem;}
.group_select_list .delet_icon{position:absolute;right:-0.15rem;top:-0.15rem;z-index: 1;width:1.9rem;}
.user_select.active .check_icon, .user_select:has(input:checked) .check_icon{display:block;}


/*그룹이미지 업로드*/
.group_upload {
    width: 13.6rem;
    margin-left: auto;
    margin-right: auto;
}
.group_upload .btn{margin:0 auto;position:relative;}
.group_upload .icon_camera{width:3.8rem;height:3.8rem;border-radius:50%;background:#fff;border:1px solid var(--gray-200);position:absolute;right:-0.8rem;bottom:-0.8rem;z-index: 1;}
.group_upload .rect{width:13.6rem;border-radius:2.4rem;border:1px solid var(--gray-300);}
.group_upload .img_upload{display:none;}
.group_upload.on .img_upload{display:block;}
.group_upload.on .img_no{display:none;}

/*결제내역*/
.pay_history li .item{padding:2.0rem 2.4rem;border-bottom:1px solid var(--gray-100);}
.pay_history li .btn.curs_default{}

.my_push_set li:nth-child(1) .item{margin-bottom:0.7rem;padding:3.0rem 0;}
.my_push_set li .item{padding-top:2.1rem;padding-bottom:2.1rem;}

/*faq*/
.collapse_faq li{border-bottom:1px solid var(--gray-100);}
.collapse_faq li .btn{padding:2.1rem 2.4rem;}

/*1:1문의*/
.contact_list li {border-bottom: 0.8rem solid var(--gray-100);padding: 0.4rem 2.4rem;}
.contact_list li:last-child{border-bottom:0;}
.contact_list li .item{border-bottom:1px solid var(--gray-100);padding:2.0rem 0;}
.contact_list li .item:last-child{border-bottom:0;}

/*공지사항*/
.notice_list .item{border-bottom:1px solid var(--gray-100);padding:1.792rem 2.4rem;    display: block;}


/*푸터*/

/*바텀시트 기본메뉴*/
.bs_menu ul{font-size:1.6rem;font-weight:500;margin-left:-1.6rem;margin-right:-1.6rem;}
.bs_menu li .bs_btn{height:5.5rem;color:var(--gray-500);width:100%;border-top:1px solid var(--gray-100);border-radius:0;}



/*바텀시트 공유하기*/
#bs_share .header .drag-icon{padding-bottom:2.4rem;}
.user_share_list li{margin-right:2.4rem;max-width:6.4rem;}
.user_share_list li:last-child{margin-right:0;}
.user_select{cursor: pointer;}
.user_select input{display: none;}
.user_select .check_icon{display:none;width:2.2rem;height:2.2rem;background:url(../img/check_mini.png)no-repeat center / cover;background-color:var(--primary);border:0.2rem solid #fff;position:absolute;right:-0.2rem;bottom:0.2rem;z-index: 1; border-radius: 50%;}
.user_select.active .check_icon, .user_select:has(input:checked) .check_icon{display:block;}
.user_select.disabled{opacity: 0.5;}


/*바텀시트 더보기*/
.selected_quality{display:flex;color:var(--gray-400);font-size:1.6rem;}
.selected_quality:before{content:'';display:block;width:0.3rem;height:0.3rem;border-radius:50%;background:var(--gray-400);margin-right:0.8rem;}
.quality_cont li{margin-bottom:2.0rem;}
.quality_cont li:last-child{margin-bottom:0rem;}


/* 초기 상태에서는 화살표 아래 아이콘을 보여줌 */
.collapse_ex .btn[aria-expanded="false"] img{transform: rotate(0deg);}

 /* 펼쳐진 상태에서는 화살표 위 아이콘을 보여줌 */
.collapse_ex .btn[aria-expanded="true"] img{transform: rotate(180deg);}



/*반응형 max 992px lg*/
@media (max-width: 991.98px) {
	.body_left{display:none;}

	.hd_m {padding: 0 2.0rem;}

	/*버튼*/
	.bottom_btn {margin-left:-2.0rem;margin-right:-2.0rem;}
	.bottom_btn .btn_wrap{padding-left:2.0rem;padding-right:2.0rem;}

	/*하단배너*/
	.bottom_banner {margin-left:-2.0rem;margin-right:-2.0rem;}
	
	/*그룹대화*/
	.group_item{padding:1.6rem 2.0rem;}

	/*개인대화*/
	.one_item{padding:1.75rem 2.0rem;}

	.context_dropdown .context_backdrop{left: 50%;}

	/*그룹대화 생성*/
	.friend_list li .item.media{padding:1.5rem 2.0rem;}

	
	/*결제내역*/
	.pay_history li .item{padding:2.0rem 2.0rem;}

	/*faq*/
	.collapse_faq li .btn{padding:2.1rem 2.0rem;}

	
	/*1:1문의*/
	.contact_list li {padding: 0.4rem 2.0rem;}

	/*공지사항*/
	.notice_list .item{border-bottom:1px solid var(--gray-100);padding:1.792rem 1.6rem;}

	
} 


/*반응형 max 767px md*/
@media (max-width: 767.98px) { 

	.m_menu_wr{width: 100%; left: 50%; transform: translate(-50%); max-width:var(--body_width);}
	.menu_bg{width: 100%; left: 50%;}
	.menu_on .m_nav{max-width: 80%;}



	
}

/*반응형 max 576px sm*/
@media (max-width: 575.98px) { 

	.mobile_wr {
		border-left: 0;
		border-right: 0;
	}
    
}


/*반응형 max 360px*/
@media (max-width: 360px) {
    .call_button .btn{
		width: 5.6rem;
		height: 5.6rem;
	}

	.speech_bubble{max-width: 22.0rem;}
	.speech_photo, .speech_media .media_down, .speech_link, .speech_fun{max-width: 19.0rem;}

}

/* 고객QA20260630 #1: 인기상승친구 흰(서로친구/너만친구/나만친구) 버튼 테두리가 너무 연해(gray-200) 박스가 안 보여
   파란 친구추가 버튼과 크기·정렬이 달라 보였음 → gray-300 으로 또렷하게(높이는 이미 파란 버튼과 동일). 앱과 동일 처리. */
.wish-btn.btn-outline-border { border-color: var(--gray-300); }