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;
    /* SPEC-QAP-CUS-0728-CTXBUBBLE: 우클릭으로 강조된 말풍선(1001)이 헤더를 뚫고 올라오지 않도록
       대화방 UI 를 딤(1000)·말풍선(1001) 위에 둔다. 메뉴만 그보다 위(1003). */
    z-index: 1002;
}
.hd_m.bg-sky{border-color:#69788C0F;}

/* ─── SPEC-QAP-CUS-0909-CHATHEADER: 대화방 상단 헤더 개편 ────────────────────────────
   피그마 `380:43825 new_chat_hd` (파일 GaBxzSsWIwPfN9EjKAMpg0) · 곽 대표 2026-09-10 확정.
   ★★★이 블록은 **전부 `.newhd` 안에서만** 적용된다. 클래스는 `chk_gate($GATE_NEWCHATHD)`
      (lib.inc.php, 기본 'dev' = 사무실 IP)일 때만 붙는다 — CHIPUNIFY 와 같은 방식이다.
        · `.hd_m.newhd`  ← index_update.php (헤더는 `.wrap` 밖이라 따로 붙인다)
        · `.wrap.newhd`  ← chat_detail.php
      **선택자에서 `.newhd` 를 빼지 말 것.** 2026-09-10 에 게이트 없이 올려 전 사용자에게
      확정 전 화면이 노출됐고 즉시 되돌렸다.
   ★자산(hd_back.png · 780×210 = 390×105 @2x · 흰색 α0.400 균일)은 디자이너가 준 것을 그대로 쓴다.
     색을 CSS 로 적지 않는 이유 — 웹·iOS·Android 가 **같은 파일**을 봐야 모습이 안 갈라진다.
   ★40% 흰색만으로는 안 보인다(앱 실측: 대화 배경이 이미 밝아 채널당 12단계). 「띠」로 보이게
     하는 것은 blur 다. 웹은 backdrop-filter 가 네이티브라 피그마와 같은 그림이 나온다. */
.hd_m.bg-sky.newhd{
    background: url(../img/hd_back.png) no-repeat center / 100% 100%;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* 피그마: 높이 58 · 좌우 16 · 상하 8 · 덩어리 사이 8
       ★높이만 **60** 이다 — 2026-09-10 사용자 지시 「헤더 높이를 좀더 높이자 60px」.
         알약 42 는 그대로고 상하 여백이 8→9 가 된다. 앱 `CHAT_HEADER_H` 도 같은 60 이다. */
    height: 6.0rem !important;
    padding: 0.8rem 1.6rem;
    gap: 0.8rem;
    justify-content: flex-start;   /* 제목 알약이 남는 폭을 먹으므로 분배가 필요 없다 */
    border-bottom: 0;              /* 시안에 바 경계선 없음 */
}
/* 헤더가 48→60 이 되었으니 **아래에 붙는 것들도 같이 내린다.**
   `--hd_height_m`(4.8rem)은 다른 페이지 헤더가 함께 쓰는 전역값이라 건드리지 않는다.
   ★`.fixed_message`(광고+고정공지 바)를 빠뜨리면 안 된다 — `top:var(--hd_height_m)` 이라 48 에 붙는데
     헤더는 58 이라 **아래 10px 를 광고가 덮는다**(z-index 가 같고 DOM 이 뒤라 광고가 위로 온다).
     2026-09-10 에 실제로 그렇게 나왔다. 헤더 높이를 또 바꾸면 이 두 줄을 같이 고친다.
   ★JS 는 `.hd_m`/`.fixed_message` 의 `getBoundingClientRect().bottom` 을 매번 실측하므로
     (chat_detail.php `topCoverH()`) 따로 고칠 것이 없다. */
.wrap.newhd{ padding-top: 6.0rem; }
.wrap.newhd .fixed_message{ top: 6.0rem; }

/* ── 알약 3덩어리 (뒤로가기 · 방 이름 · 아이콘 묶음) — 곽 대표 0910 12:33 「3개의 둥근버튼」 ──
   공통: h42 · 완전 알약 · 흰색 75% · 그림자 0 0 10 rgba(0,0,0,.05) · 뒤 블러 6px.
   ★테두리가 아니라 **그림자**다 — 곽 대표 13:04 이 12:32 「테두리」 결정을 뒤집었다. */
.hd_m.bg-sky.newhd > .hd_btn,
.hd_m.bg-sky.newhd > .page_tit{
    height: 4.2rem;
    border-radius: 10rem;
    background: rgba(255,255,255,0.75);
    box-shadow: 0 0 1rem rgba(0,0,0,0.05);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
/* 뒤로가기 = 42 정원.
   ★화살표가 원 중앙에 안 온다는 지적(2026-09-10) — 원인은 배치가 아니라 **자산**이었다.
     `top_history.png` 는 75×72 인데 화살표 잉크가 x0~25 에만 있고 **우측 여백이 49px** 다.
     즉 이미지 상자는 정중앙인데 그 안의 그림이 왼쪽 끝에 붙어 있어 −25px(=폭의 1/3) 치우쳐 보였다.
     (앱도 같은 비율로 치우쳐 있었다 — 같은 원인)
   → 잉크 상자만 잘라낸 `hd_back_arrow.png`(26×48)를 새로 만들어 **배경으로** 넣는다.
     원본 `top_history.png` 는 다른 화면들이 함께 쓰므로 건드리지 않는다.
     `background-size: contain` 이라 9×16 상자 안에서 비율을 유지한 채 가운데 놓인다. */
.hd_m.bg-sky.newhd > .hd_btn:first-child{ width:4.2rem; min-width:4.2rem; padding:0; justify-content:center; }
/* ★버튼은 **원 전체(42)** 를 채운다 — 화살표 크기로 줄이면 누를 수 있는 곳이 9×16 밖에 안 된다
     (2026-09-10 지적 「뒤로가기 버튼영역이 화살표에만 있다」. 내가 화살표를 배경으로 옮기면서
      버튼 자체를 화살표 크기로 줄인 것이 원인이었다).
     화살표는 배경으로 **가운데에 9×16 크기**로만 그린다 — 크기 지정을 `contain` 이 아니라
     명시값으로 줘야 버튼이 커져도 화살표가 같이 커지지 않는다. */
.hd_m.bg-sky.newhd > .hd_btn:first-child button{
    width:4.2rem; height:4.2rem; padding:0;
    background: url(../img/hd_back_arrow.png) no-repeat center / 0.9rem 1.6rem;
}
.hd_m.bg-sky.newhd > .hd_btn:first-child button img{ display:none; }
/* 방 이름 = 남는 폭 전부. 피그마 텍스트 #121212 16 SemiBold, 넘치면 말줄임 */
.hd_m.bg-sky.newhd > .page_tit{
    display:flex; align-items:center;
    flex:1 1 0; min-width:0; padding:0 1.6rem;
    font-size:1.6rem; font-weight:600; color:#121212;
}
/* SPEC-QAP-CUS-0911-DMTITLECENTER: 1:1 상대 이름도 가운데(티르 0911 12:02). 그룹방은 아래 :has() 규칙으로 이미 가운데.
   max-width 100% — 긴 이름은 알약 안에서 말줄임(우측 묶음 침범 없음). 앱 headerTitlePillText 와 같다. */
.hd_m.bg-sky.newhd > .page_tit{ justify-content:center; }
.hd_m.bg-sky.newhd > .page_tit > .line_text{ max-width:100%; text-align:center; }
/* 우측 묶음 = 좌우 12 · 아이콘 사이 12 · 아이콘 각 28 */
.hd_m.bg-sky.newhd > .hd_btn:last-child{ padding:0 1.2rem; gap:1.2rem; }
.hd_m.bg-sky.newhd > .hd_btn:last-child .icon28,
.hd_m.bg-sky.newhd > .hd_btn:last-child .icon28 img{ width:2.8rem; height:2.8rem; }
/* 케이브 = **아이콘만**(칩 배경·「케이브」 글자 제거) — 시안이 아이콘 하나다.
   ★`.mk_cave_ico` 까지 같이 숨기지 않도록 :not() 으로 글자 span 만 고른다(0910 실수). */
.hd_m.bg-sky.newhd .mk_chip_cave{
    padding:0 !important; background:transparent !important; border:0 !important;
    box-shadow:none !important; width:2.8rem !important; min-width:2.8rem !important;
    height:2.8rem !important; align-items:center; justify-content:center;
}
.hd_m.bg-sky.newhd .mk_chip_cave > span:not(.mk_cave_ico){ display:none !important; }
.hd_m.bg-sky.newhd .mk_chip_cave .mk_cave_ico{ width:2.8rem !important; height:2.8rem !important; }
/* SPEC-QAP-CUS-0911-HDMEMBERCNT: 그룹방 = 제목 아래 [사람 아이콘] 인원 — 곽 대표 0911 그림.
   **제목·인원 둘 다 가운데**(2026-09-11 사용자 결정). 알약 높이 42 는 그대로다.
   ★1:1 방은 인원 줄이 없어 `:has()` 에 안 걸린다 → 기존 왼쪽 정렬 그대로.
   ★아이콘은 그룹 프로필 배지와 **같은 파일**(level_badge_people.png) — 그림의 아이콘 색·모양과 같다. */
/* ★세로는 가운데 몰아넣기가 아니라 **위에서부터** 놓는다 — 2026-09-11 사용자 지적 「여백이 너무 없게 하지 마라.
     고객이 준 것처럼 여유가 있어야 한다」. 가운데(justify center)로 두면 제목·인원 줄이 붙고(간격 3.2) 위로 몰렸다.
   그림 실측(알약 상단 기준, pt): 제목 한글 윗선 9.6 · 인원 줄 중심 32.5 · 아래 여백 약 5.
   → 위 패딩 7.2 + 제목 줄 19(한글 윗선 = +2.4 → 9.6) + 인원 줄 12(중심 32.2). 합 38.2 < 42. 앱도 같은 값. */
/* ★2차(2026-09-11 사용자 지적 「제목과 숫자 간격이 다르다 — 고객이 준 건 조금 더 있다」):
     곽 대표 그림과 **같은 글자**(한글 제목·3,153)로 넣어 재니 제목→숫자 간격이 그림 7.1 ↔ 웹 5.3 이었다
     (제목 아래끝 22.2↔23.0 · 숫자 윗선 29.3↔28.3). → 제목만 1 올리고(인원 줄 자리는 그대로 = margin-top 0.1),
     웹은 숫자가 앱보다 약 1 높게 그려져 숫자만 0.09rem 내린다(앱 숫자 윗선은 이미 29.0~29.2). */
.hd_m.bg-sky.newhd > .page_tit:has(.hd_member_cnt){ flex-direction:column; justify-content:flex-start; align-items:center; padding-top:0.62rem; }
.hd_m.bg-sky.newhd .hd_member_cnt{ margin-top:0.1rem; }
.hd_m.bg-sky.newhd .hd_member_cnt > span{ position:relative; top:0.09rem; }
.hd_m.bg-sky.newhd > .page_tit:has(.hd_member_cnt) > .line_text{ max-width:100%; text-align:center; line-height:1.9rem; }
.hd_m.bg-sky.newhd .hd_member_cnt{ display:flex; align-items:center; height:1.2rem; font-size:0.9rem; font-weight:400; line-height:1.2rem; color:#777; }
.hd_m.bg-sky.newhd .hd_member_cnt img{ width:1.1rem; height:1.1rem; margin-right:0.4rem; }
/* ★★`.mk_cave_ico_line`(흰 선 오버레이)을 **반드시 제외**한다 — cave.css:878 과 같은 이유다.
     흰 선은 육각형 위에 **40% 크기**로 얹히는 것인데, 여기서 `img{width:100%!important}` 로
     싸잡아 덮었더니 선이 아이콘 전체 크기로 늘어나 그림을 가로질렀다(2026-09-10 실측:
     `mk_icon_cave_lines.svg` 가 28×28 로 렌더). 케이브 아이콘이 시안과 달라 보인 원인이 이것이다.
     자산 문제가 아니었다. */
.hd_m.bg-sky.newhd .mk_chip_cave .mk_cave_ico > img:not(.mk_cave_ico_line){
    width:100% !important; height:100% !important; object-fit:contain;
}
/* 알림종은 헤더에서 뺀다 — **기능이 없어지는 게 아니다.** 메뉴 시트 안에 이미 있다
   (foot.inc.php:270 그룹 / :293 1:1 의 `.bs_alert_toggle`). SPEC 3절 참조. */
.hd_m.bg-sky.newhd .stt_push-btn{ display:none !important; }
/* ─── SPEC-QAP-CUS-0909-CHATHEADER 끝 ─────────────────────────────────────────── */
.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;
    /* SPEC-QAP-CUS-0728-CTXBUBBLE: 목록에서도 강조된 행(1001)이 하단 탭을 덮지 않게 */
    z-index: 1002;
    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 .tab_unread_badge{position:absolute;top:.1rem;left:calc(50% + .7rem);z-index:2;display:flex;align-items:center;justify-content:center;min-width:1.7rem;height:1.7rem;padding:0 .4rem;border-radius:.9rem;background:#ff3b30;color:#fff;font-size:1rem;font-weight:700;line-height:1;}
.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=20260915);}
.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;}
/* SPEC-GODOHWA-M2-CTXMENU — Figma 실측: 목록 메뉴 204 / 말풍선 메뉴 240, 행 높이 40 */
.context_menu {
	display:none;
    padding: 0;
    width: 20.4rem;
    border: 0;
    overflow: visible;
    z-index: 1003; /* SPEC-QAP-CUS-0728-CTXBUBBLE — 대화방 UI(1002) 보다 위 */
    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; }
/* SPEC-QAP-CUS-0911-WEBIMGMENU: 감정표현 바와 메뉴 상자 사이 간격 — 앱 `MessageContextMenu emojiBar marginBottom: 6` 미러.
   2026-09-11 사용자 지적 「답장 위에 앱은 간격이 있는데 웹은 없다」 — 웹은 두 상자가 붙어 있었다. */
.context_menu .context_menu_box.reaction_scroll{ margin-bottom: 0.6rem; }
.context_menu .reaction_scroll::-webkit-scrollbar{ display: none; }
.context_menu .reaction_scroll .btn-icon{ flex: 0 0 auto; }
#chat_detail_box .context_menu{width:24.0rem;}
.context_menu .dropdown-item{padding:0 1.2rem;height:4.0rem;box-sizing:border-box;line-height:2.0rem;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 아이콘은 반전으로 흰색화.
   ★★SPEC-QAP-CUS-0921-HDDARKMIX: **알약 헤더(`.newhd`)는 이 반전에서 뺀다.**
     곽 대표 0921 10:45 「배경이 진한 색상인 경우 상단 색상이 통일되지 않고 검은색 + 흰색 조합」.
     원인은 이 블록이 알약 구조에 그대로 남아 있던 것이다 —
       · 우측 검색·햄버거는 `button img` 라 invert 가 걸려 **흰색**이 되고,
         그 아래 알약이 흰색 75% 라 아이콘이 거의 사라졌다.
       · 뒤로가기는 img 를 display:none 하고 `hd_back_arrow.png` 를 **배경**으로 그려
         filter 가 안 걸린다 → **검은색** 그대로. 그래서 한 헤더 안에 검정과 흰색이 섞였다.
       · 띠 배경도 `var(--chat-bg)!important` 가 `hd_back.png`(흰 40%)를 덮어
         진한 커스텀색 위에 흰 알약만 둥둥 떠 보였다.
     앱은 이 반전을 하지 않는다(ChatDetailScreen `chromeColor` 제거 — 「대비는 배경색이 아니라
     알약이 만든다」). 웹도 같게 맞춘다. 2026-09-21 S22+(1.0.97)·웹 390px 같은 색(#5688BB)으로
     실측 대조: 띠 앱 (154,184,214) ↔ 웹 (153,183,213), 아이콘 둘 다 #121212 계열.
     0909-CHATHEADER 커밋이 [ASSUME] 로 남겨 둔 「알약 구조가 웹에 들어올 때 같이 정리한다」가 이것이다.
   ★`:not(.newhd)` 를 빼지 말 것 — 빼면 위 증상이 그대로 돌아온다.
     `$GATE_NEWCHATHD` 를 닫아 옛 헤더로 되돌릴 때를 위해 이 규칙 자체는 남겨 둔다. */
body.chat-bg-custom .hd_m:not(.newhd){ background: var(--chat-bg) !important; color:#fff; border-bottom-color: rgba(255,255,255,0.18); }
body.chat-bg-custom .hd_m:not(.newhd) .tit{ color:#fff; }
body.chat-bg-custom .hd_m:not(.newhd) button img{ filter: brightness(0) invert(1); }
body.chat-bg-custom .hd_m:not(.newhd) .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; }
/* SPEC-QAP-CUS-0807-SYSMSGCHIP: 어두운 방에서는 칸을 방보다 **밝게**(흰색 α) + 글자는 밝은 회색.
   목업 문구의 "조금 더 진한 색"은 밝은 방 기준이다 — 어두운 방에 그대로 넣으면 더 안 보인다. */
body.chat-bg-custom .talk_content .date{ background: rgba(255,255,255,0.22); color:#CDD0D5 !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 부여 → 텍스트/아이콘을 어둡게 원복(가독)
   ★알약 헤더는 위에서 이미 반전을 안 하므로 여기서도 제외한다(원복할 것이 없다) — 0921-HDDARKMIX. */
body.chat-bg-custom.chat-bg-light .hd_m:not(.newhd){ color:#333; border-bottom-color: rgba(0,0,0,0.10); }
body.chat-bg-custom.chat-bg-light .hd_m:not(.newhd) .tit{ color:#333; }
body.chat-bg-custom.chat-bg-light .hd_m:not(.newhd) button img,
body.chat-bg-custom.chat-bg-light .hd_m:not(.newhd) .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 .date{ background: rgba(0,0,0,0.07); color:#3D4548 !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;
    /* SPEC-QAP-CUS-0828-LATESTSIZE: 0828 곽 대표 「웹/갤럭시/아이폰 모두 최신버튼과 펀쿨빌 아이콘 크기를
         **아이콘 배경 기준** 동일하게」 + 「정렬 위치도 맞춰 주시고요」 → 3.6rem → **4.2rem**
         (.btn_puntalker 와 동일 · 0827-FCVSIZE 에서 + 버튼 크기로 맞춘 값).
       ★정렬은 이 변경으로 자동 해결 — 둘 다 right:1.6rem 인데 폭이 달라 중심이 0.3rem 어긋나 있었다.
       ★세로도 함께 맞는다 — emoji.css 의 top:-9.8rem 은 원래 «4.2rem 높이 + 0.8rem 간격» 기준으로
         잡힌 값이라(−4.8−0.8−4.2), 3.6rem 일 때는 간격이 1.4rem 으로 벌어져 있었다.
       ★글리프(btn_more_8.png 1.4rem)는 그대로 둔다 — 지시가 「아이콘 배경 기준」이다. */
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    /* SPEC-QAP-CUS-0910-BTNBORDER(웹): 곽 대표 0910 07:10 · 티르 09:38 「좌측 + 처럼 테두리 같게」.
         앱(아이폰·갤럭시)에 먼저 적용했고, 2026-09-10 사용자 「웹도 반영한다」로 웹까지 맞춘다.
       기준인 `.talk_input .input_wrap .btn_more`(+)에는 **테두리도 그림자도 없다**(:1140).
       그래서 border 와 box-shadow 를 **둘 다** 뺀다 — 그림자만 남기면 테두리를 지워도
       원 둘레에 띠가 남아 + 와 여전히 달라 보인다.
       배경 rgba(255,255,255,0.9) 은 + 와 이미 같은 값이라 건드리지 않는다.
       ★`border: 0` 을 **명시**한다 — 이 요소는 `<button id="btn_scroll_bottom">` 이고
         `.btn` 클래스가 없어 리셋을 안 받는다. 선언만 지우면 브라우저 기본값
         `2px outset` 이 드러나 **고치기 전보다 더 두꺼워진다**(2026-09-10 운영에서 실제로 그랬다). */
    border: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
}
/* SPEC-QAP-CUS-0719-REPLYRETURN: 답글 복귀 알약 버튼 — btn_scroll_bottom 과 동일 앵커(.talk_input absolute)·중앙 */
.reply_return_btn {
    position: absolute;
    top: -4.8rem;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    height: 3.6rem;
    padding: 0 1.6rem;
    border-radius: 1.8rem;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    font-size: 1.3rem;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    white-space: nowrap;
}
.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: 1002; /* SPEC-QAP-CUS-0728-CTXBUBBLE — 강조 말풍선이 입력바를 덮지 않게 */
}
.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;*/
	/* SPEC-QAP-CUS-0801-EDITLINEGAP: 22px(=1.375배) 는 글자 크기 16px 에 비해 줄이 붙어 보인다는
	   고객 지적(0801, 곽 대표). 26px(=1.625배)로 넓힘 — 말풍선(14/20=1.43)보다도 낮던 배율을 올린다. */
	line-height: 140%;line-height: 26px;
    word-break: keep-all;
	background: transparent;
	font-size:1.6rem;
    height: 42px;
    /* SPEC-QAP-CUS-0801-EDITLINEGAP: 1줄 높이 29→33 (26 + padding-top 5 = 31 > 29 라 두면 1줄이 잘린다).
       pill 높이 42px 은 유지 — margin 을 .6/.7rem → .4/.5rem 으로 줄여 33+4+5 = 42 (기존 29+6+7 과 동일). */
    height: 33px;padding: 0.5rem 0 0;margin-top: 0.4rem;margin-bottom: 0.5rem;
    overflow: hidden !important;
    resize: none;

    display: block !important;
    overflow-y: auto !important; /* 항상 스크롤바가 작동 가능한 상태 유지 */
    /* SPEC-QAP-CUS-0801-EDITLINEGAP: 112→135 = 5줄(26×5=130) + padding 5. 줄간격만 넓히면
       같은 max-height 에서 보이는 줄 수가 5줄 → 4줄로 줄어들기 때문에 함께 올린다. */
    max-height: 135px; /* 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;}
/* SPEC-GODOHWA-M3-2 답장 배너 — Figma 96:19401 실측: 높이 45, 좌우 여백 20, 아이콘 20, 텍스트 x=50 */
/* 고객QA20260629(곽 대표): "답장 바가 반투명이라 뒤 말풍선·광고가 비쳐 입력칸에 겹쳐 보인다" 지적.
   앱은 그때 불투명 흰색으로 바꿨는데 웹만 반영이 빠져 완전 투명으로 남아 있었다(비침이 더 심한 상태).
   0630(B방식)의 "대화입력칸만 투명"은 입력 dock 에 대한 지시이고, 답장 바는 0629 지시가 적용 대상이다.
   → 그때는 앱과 동일하게 불투명 흰색으로 뒀다. 아래 0811 지시로 대체된다. */
/* SPEC-QAP-CUS-0811-REPLYBG (곽 대표 0811): "답글 띄울때 … 고정 메시지 배경처럼 해주세요."
   → 상단 고정 메시지 바(.fixed_message .cont)와 **같은 값**을 쓴다: #FFFFFFAD + blur(6px).
   ★ 0629 지적이 되살아나지 않게 하려면 **알파만 옮기면 안 된다.** 고정 바가 같은 알파(0.68)인데도
     지적이 없었던 이유는 blur 다 — 뒤가 형체로만 남고 글자가 안 읽힌다.
   ★ 0630 "블러 금지"는 **입력 dock** 에 대한 지시였다. 고정 메시지 바는 지금도 blur(6px) 로 살아 있고,
     이번 지시가 "고정 메시지처럼" 이므로 답장 바도 같은 블러를 쓴다. */
.ipunt_reply.active{display:flex;align-items:center;min-height:4.5rem;padding: 0 2.0rem;background:#FFFFFFAD;backdrop-filter: blur(6px);}
/* Figma 96:19403/19404 는 1행·2행 모두 #121212(gray600). 웹은 부모의 text-gray-500(#38404B)을 물려받고 있었다. */
.ipunt_reply .text-reply-nick, .ipunt_reply .text-reply-content{ color:#121212; }
.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 + 흰색 border.
   여러장 grid 안의 img 는 .image-grid button > img 에서 aspect-ratio 1/1 강제.
   고객QA20260722 곽: 흰색 테두리 매우 얇게 2px→1px. */
/* SPEC-QAP-CUS-0818-WEBSHAKE: ★width:auto 를 뺐다. 이 한 줄이 흔들림의 마지막 고리였다.
     lib.inc.php 가 <img width="800" height="600"> 을 주는데, 저자 CSS 의 width:auto 가
     그 **속성 힌트를 덮어써** 폭이 정해지지 않았다 → 브라우저가 종횡비로 높이를 못 잡는다
     → 로드 전 높이가 min-height(4rem=40px)뿐이고 로드되는 순간 165px 로 뛴다.
     실측(방 3596, 390x844): 사진 7장이 38→164px, 합계 +882px → 그 높이 변화가
     재착지를 불러 879px 점프(=흔들림)를 만들었다.
   ★ width 의 초기값도 auto 다. 선언을 빼면 속성 힌트(800px)가 살아나고,
     max-width:100% 가 부모 폭(22rem)으로 깎아 준다 → 보이는 크기는 그대로,
     다만 **로드 전에** 자리를 잡는다.
   ★ 치수 속성이 없는 옛 사진은 예전과 동일하게 동작한다(속성이 없으니 auto). */
.speech_photo > button > img {
    max-height: 38rem; /* 19rem(speech_photo max-width) × 2 */
    height: auto;
    max-width: 100%;
    object-fit: cover;
    border: 1px 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%;}
/* 고객QA20260722(티르): 다중 이미지 뷰어 좌우 화살표 — 어두운 뷰어에 흰 화살표(반투명 원형 배경) */
.full_photo .swiper-button-prev.viewer-nav-btn,
.full_photo .swiper-button-next.viewer-nav-btn{color:#fff;width:4.4rem;height:4.4rem;background:rgba(0,0,0,0.35);border-radius:50%;margin-top:-2.2rem;}
.full_photo .swiper-button-prev.viewer-nav-btn{left:1.2rem;}
.full_photo .swiper-button-next.viewer-nav-btn{right:1.2rem;}
.full_photo .swiper-button-prev.viewer-nav-btn::after,
.full_photo .swiper-button-next.viewer-nav-btn::after{font-size:2.0rem;font-weight:700;}
.full_photo .swiper-button-disabled{opacity:0.3;}
.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;
}

/*톡 콘텐츠*/
/* SPEC-QAP-CUS-0807-SYSMSGCHIP: 입퇴장·삭제·날짜 안내에 **배경 칸(알약)**.
   ★ .date 는 블록 <p> 라 배경을 주면 줄 전체가 칠해진다 → 내용 폭만큼만 칠하고 가운데 둔다.
   ★★ width:fit-content 는 **먹지 않았다**(2026-08-07 곽 대표 지적 "날짜가 길게 나온다").
      부모가 flex 라 align-self:stretch 가 이겨 가로로 늘어난다.
      display:table 은 flex 자식이어도 shrink-to-fit 이라 확실하다. margin-inline:auto 로 가운데.
      margin 을 inline 만 쓰는 이유는 위/아래 여백(default_user.css
      .talk_content .date{margin-bottom:2.4rem})을 건드리지 않기 위해서다.
   ★ 앱과 맞춘다 — 앱 systemMsgText(paddingHorizontal 12/Vertical 5) · dateSepBg(minWidth 110).
   ★★★ 반드시 :not(.d-none) 을 붙인다 (2026-08-07 곽 대표 "날짜가 2회 출력" 원인).
      날짜 구분선은 **메시지마다 하나씩** 렌더되고(lib.inc.php getHtml_chat 끝),
      JS(syncChatDetailDates)가 날짜별 첫 개만 남기고 나머지에 .d-none 을 건다.
      .d-none 은 `display:none !important`(특이도 0,1,0)인데
      `#chat_detail_box .date`(1,1,0)·`.talk_content .date`(0,2,0)가 **이겨서**
      숨겨야 할 구분선 147/150 개가 전부 화면에 칠해졌다(실측 2026-08-07). */
.talk_content .date:not(.d-none){
  font-size:1.4rem;line-height:100%;color:#3D4548;text-align:center;
  padding:0.5rem 1.2rem;border-radius:999px;background:rgba(0,0,0,0.07);
  /* ★ 폭이 계속 전체로 늘어나 !important 로 못박는다. display:table 하나만으로는
     안 먹는 환경이 있어(원인 미특정) width:auto + max-width:fit-content 를 함께 건다.
     셋 중 하나라도 통하면 내용 폭이 된다. */
  display:table !important;
  width:auto !important;
  max-width:fit-content !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* 날짜 구분선만 앱과 같은 최소 폭(앱 dateSepBg minWidth:110) */
.talk_content .date.chatdate{ min-width:11rem; }
/* 셀렉터가 안 닿는 경우 대비 — 대화 목록 컨테이너 기준으로도 같은 규칙을 건다.
   (.date 가 .talk_content 밖에 렌더되는 화면이 있는지 확인 전이라 양쪽에 건다)
   ★ 여기도 :not(.d-none) 필수 — 위 주석 참고. */
#chat_detail_box .date:not(.d-none){
  display:table !important;
  width:auto !important;
  max-width:fit-content !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.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;
}

/* ══ SPEC-QAP-CUS-0813-CHIPUNIFY ═══════════════════════════════════════════
   대화방 안내를 한 벌로 통일한다. **`.wrap.chipv2` 안에서만** 적용된다 —
   chipv2 는 chat_detail.php 가 chk_gate($GATE_CHIPUNIFY) 일 때만 붙인다(사무실 미리보기).
   게이트를 'open' 으로 올리면 그대로 전체에 나간다. 되돌릴 때도 lib.inc.php 한 단어다.

   ★ 색은 곽 대표가 0813 09:02 에 기준으로 주신 카카오톡 화면에서 **실측**했다
     (칩 안쪽과 바로 위 배경의 픽셀 차이로 알파 역산):
       어두운 방  배경 rgb(62,81,121)  → 칩 rgb(77,95,131)   = 흰색 α0.08 · 글자 흰색
       밝은 방    배경 rgb(253,254,240) → 칩 rgb(243,244,230) = 검정 α0.04 · 글자 ≈검정
   ★ 0807(SYSMSGCHIP)의 흰색 α0.22 / 글자 #CDD0D5 를 **뒤집는다** —
     카카오톡은 칸을 거의 안 보이게 두고 **글자 대비**로 읽히게 한다.
   ★ 앱(ChatDetailScreen CHIP_BG/CHIP_FG)과 **같은 값**이어야 한다. 한쪽만 바꾸면 웹·앱이 갈린다.
   ────────────────────────────────────────────────────────────────────────── */
/* 밝은 방(기본) */
.wrap.chipv2 .talk_content .date:not(.d-none),
.wrap.chipv2 .talk_content .random_info{
  background: rgba(0,0,0,0.04);
  color:#1A1A1A;
  font-size:1.2rem;          /* 앱 12px 과 통일 — 웹만 1.4rem 이라 더 컸다(0813 곽 대표 5번 승인) */
  line-height:1.8rem;
  padding:0.5rem 1.2rem;     /* 앱 paddingHorizontal 12 / Vertical 5 */
  border-radius:999px;
  text-align:center;
}
/* random_info 는 원래 칸이 없고 height 가 고정이라 함께 풀어 준다.
   ★ ct_action 이 없는 notice(방 개설·랜덤매칭·앱에서 나가기)가 여기로 온다 — lib.inc.php getHtml_chat.
     웹에만 있던 "칸 없는 안내" 가 산만함의 원인이었다. */
.wrap.chipv2 .talk_content .random_info{
  height:auto;
  display:table !important;
  width:auto !important;
  max-width:fit-content !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* ★!important 가 필요한 이유 — chat_detail.php 인라인에 `#chat_detail_box > .random_info{width:100%}` 가 있다.
     ID 셀렉터(1,0,1)라 내 (0,3,0) 규칙을 이긴다. .date 는 기존 규칙이 이미 !important 라 살아 있었고
     .random_info 만 폭 350px(전체 폭)로 늘어나 있었다(0813 실측). 같은 함정이 두 번 났다.
   ★안전망 — 내용이 비면 칩을 그리지 않는다. 위 PHP 폴백으로 대부분 채워지지만,
     ct_content·ct_notice 가 **둘 다** 빈 옛 데이터가 있으면 빈 회색 띠가 남는다. */
.wrap.chipv2 .talk_content .random_info:empty{
  background:none !important;
  padding:0 !important;
  height:0 !important;
  margin:0 !important;
}
/* 최소 폭 해제 — 날짜만 넓어 보이던 원인. 앱도 minWidth 를 걷어냈다(0813 실기기 실측:
   450dpi 에서 110dp = 309.375px 라 여백을 줄여도 화면이 안 바뀌었다). */
.wrap.chipv2 .talk_content .date.chatdate{ min-width:0; }
/* 삭제·게시중단(대화 중간에 끼는 안내) = 앱 systemMsgWrapInline(marginVertical 8) 과 같은 8px.
   웹 기본은 default_user.css 의 `.talk_content .date{margin-bottom:2.4rem}` 이라 **웹만 3배** 벌어져 있었다
   (2026-08-13 15:25 곽 대표 2번 "웹과 앱 둘다 간격 동일하게").
   ★ 특이도 — 내 규칙 (0,5,0) > default_user.css (0,2,0) 라 !important 없이 이긴다.
     `#chat_detail_box .date`(1,1,0)는 좌우 margin 만 건드리므로 상하와 무관하다.
   ★ 날짜·입퇴장·random_info 는 아래 !important 규칙(0.3rem)이 이겨 3px 그대로 — 그쪽은 연달아 쌓이는 것들이다. */
.wrap.chipv2 .talk_content .date:not(.d-none){ margin-top:0.8rem; margin-bottom:0.8rem; }
/* 연달아 쌓이는 안내(날짜·입장·퇴장)는 촘촘하게. 앱 marginVertical 3 과 맞춘다.
   ★ 삭제·게시중단은 대화 중간에 끼는 것이라 좁히지 않는다(0813 곽 대표 4번 승인) →
     아래에서 data-type 이 notice 인 것만 좁힌다. */
.wrap.chipv2 .talk_content .date[data-type="notice"]:not(.d-none),
.wrap.chipv2 .talk_content .date.chatdate:not(.d-none),
.wrap.chipv2 .talk_content .random_info{
  margin-top:0.3rem !important;
  margin-bottom:0.3rem !important;
}
/* ★ random_info 를 함께 좁히는 이유 — **앱에서 나간 퇴장 안내가 여기로 온다.**
     chats.js 의 leave 는 ct_action 을 안 넣어서 lib.inc.php getHtml_chat 이 .random_info 로 보낸다.
     빼놓으면 "웹에서 나간 퇴장은 촘촘, 앱에서 나간 퇴장은 벌어짐" 이 된다.
     방 개설·랜덤매칭 안내도 함께 좁아지지만 그건 방당 1회라 무해하다. */
/* "여기까지 읽었습니다" — 틀은 위와 똑같이, **색만 파란색**을 유지한다.
   0602 에 "더 눈에 잘 띄게" 요청으로 파랗게 만든 것이라 회색으로 통일하면 그 요청이 되돌아간다.
   양옆 가로선(::before/::after)은 텔레그램처럼 없앤다(0813 곽 대표 3번 승인). */
/* ★ justify-content:center 필수 — 원래는 좌우 ::before/::after 가 flex:1 로 늘어나며
     가운데 span 을 밀어 중앙에 놓고 있었다. 그 선을 없애자 flex 기본값(flex-start)이 드러나
     **왼쪽으로 붙었다**(2026-08-13 곽 대표 지적). 선을 지우면 정렬을 직접 줘야 한다. */
.wrap.chipv2 .chat_unread_divider{ margin:0.8rem 0; gap:0; justify-content:center; }
.wrap.chipv2 .chat_unread_divider::before,
.wrap.chipv2 .chat_unread_divider::after{ display:none; }
.wrap.chipv2 .chat_unread_divider span{
  font-size:1.2rem;
  line-height:1.8rem;
  padding:0.5rem 1.2rem;
  border-radius:999px;
  box-shadow:none;           /* 다른 칩과 같은 납작한 알약 */
}
/* 어두운 커스텀 방 — 칸은 방보다 밝게(흰색 α0.08), 글자는 흰색 */
body.chat-bg-custom .wrap.chipv2 .talk_content .date:not(.d-none),
body.chat-bg-custom .wrap.chipv2 .talk_content .random_info{
  background: rgba(255,255,255,0.08);
  color:#FFFFFF !important;
}
/* 밝은 커스텀 방 — 기본과 같은 대비로 되돌린다 */
body.chat-bg-custom.chat-bg-light .wrap.chipv2 .talk_content .date:not(.d-none),
body.chat-bg-custom.chat-bg-light .wrap.chipv2 .talk_content .random_info{
  background: rgba(0,0,0,0.04);
  color:#1A1A1A !important;
}

/*톡 상단 고정*/
.fixed_message{position: fixed;top: var(--hd_height_m);width: 100%;max-width: var(--body_width);z-index: 1002;/* SPEC-QAP-CUS-0728-CTXBUBBLE */}
/* SPEC-GODOHWA-M3-PIN: Figma 96:19939(공지2) — bg rgba(255,255,255,.68) + blur 6 */
.fixed_message .cont{display:none;align-items: flex-start;padding:1.1rem 2.0rem;background: #FFFFFFAD;backdrop-filter: blur(6px)}
.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; }
/* SPEC-GODOHWA-M3-PIN: 접힘 한 줄을 Figma 와 동일하게 nowrap + ellipsis 로.
   기존 -webkit-line-clamp:1 은 '줄바꿈 가능한 지점'에서만 잘라서, 긴 URL 처럼 끊기지 않는
   덩어리가 오면 그 앞에서 줄이 끝나 한 줄을 다 못 채우고 조기 말줄임됐다
   (예: "[HTTPSLINK]…" 만 보이고 우측이 비어 있음). nowrap+ellipsis 는 덩어리 중간에서도
   잘라 한 줄을 꽉 채운다. Figma 96:19939 = whitespace-nowrap + text-ellipsis + overflow-hidden. */
.fixed_message .cont:not(.active) .text{
    min-width: 0; flex: 1 1 0 !important;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: none;
}
/* Figma 쉐브론은 우측 여백 20 에 붙는다. 웹 화살표는 20×20 박스 안에 10×6 쉐브론이
   중앙 정렬돼 실제 여백이 25 가 된다 → 박스를 5 바깥으로 밀어 쉐브론 여백을 20 으로 맞춘다. */
.fixed_message .cont .arrow{ margin-right: -0.5rem; }


/*음성,녹음*/
.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;}
/* SPEC-GODOHWA-M2-BSMENU-ALIGN: 대화방 설정 시트 항목이 가운데로 몰려 있던 문제(0801 곽 대표 지적).
   .btn 이 justify-content:center 를 갖는데 여기서는 text-align:left 만 덮어써서, flex 컨테이너라
   실제 정렬은 계속 가운데였다. Figma·앱은 좌측 정렬이다 → justify-content 를 함께 덮어쓴다. */
.bs_menu li .bs_btn{height:5.5rem;color:var(--gray-500);width:100%;border-top:1px solid var(--gray-100);border-radius:0;text-align:left;padding-left:3.2rem;padding-right:3.2rem;display:flex;align-items:center;justify-content:flex-start;}
.bs_menu .bs_alert_row{height:5.5rem;color:var(--gray-500);border-top:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;padding:0 3.2rem;}
.bs_alert_toggle{position:relative;width:4.4rem;height:2.6rem;padding:0;border:0;border-radius:1.3rem;background:var(--gray-200);transition:background .2s;}
.bs_alert_toggle span{position:absolute;top:.3rem;left:.3rem;width:2rem;height:2rem;border-radius:50%;background:#fff;box-shadow:0 .1rem .3rem rgba(0,0,0,.2);transition:left .2s;}
.bs_alert_toggle.active{background:var(--primary);}
.bs_alert_toggle.active span{left:2.1rem;}



/*바텀시트 공유하기*/
#bs_share .header .drag-icon{padding-bottom:2.4rem;}
#bs_share .content{max-height:calc(100dvh - 13.6rem);}
#bs_share .body{padding-left:1.6rem;padding-right:1.6rem;}
.share_search_wrap{height:4.2rem;display:flex;align-items:center;gap:1.4rem;padding:0 1.4rem;margin-bottom:2.4rem;border-radius:.8rem;background:var(--gray-100);}
.share_search_wrap .share_search_icon{flex:0 0 1.6rem;width:1.6rem;height:1.6rem;background:url(../img/top_search.png) no-repeat center/contain;opacity:.8;}
.share_search_wrap .form-control{height:4.2rem;padding:0;border:0;background:transparent;font-size:1.5rem;font-weight:500;box-shadow:none;}
/* SPEC-GODOHWA-E3-SHARE(0801 곽 대표): 탭줄과 목록이 붙어 있어 답답하다는 지적.
   Figma(E-3_공유하기_바텀시트)는 탭 하단과 첫 항목 사이에 약 32px 여백이 있다. */
.share_tabs{display:flex;gap:1rem;padding-bottom:0;margin-bottom:3.2rem;}
.share_tab{height:3.8rem;padding:0 1.8rem;border:1px solid var(--gray-200);border-radius:2rem;background:#fff;color:var(--gray-500);font-size:1.5rem;letter-spacing:-.03rem;}
.share_tab.active{border-color:var(--gray-500);background:var(--gray-500);color:#fff;font-weight:600;}
/* SPEC-GODOHWA-E3-SHARE(0801 곽 대표): "웹에서 공유하기 시 링크복사, 전송하기 버튼이 안나온다".
   원인 — 목록이 max-height:34rem 고정이라 390x844 에서 목록 끝이 888px(화면 밖)까지 내려가고
   그 아래 두 버튼이 935/988px 로 완전히 밀려났다. 시트를 스크롤해야만 보였다.
   → 목록을 남는 공간에 맞춰 줄어들게 한다. 시트(.content)를 세로 flex 로 두고
     목록만 늘어나고(flex:1) 버튼줄은 줄지 않게(flex-shrink:0) 해 항상 화면에 남긴다. */
/* SPEC-GODOHWA-E3-SHARE(0801 곽 대표): "웹에서 공유하기 시 링크복사, 전송하기 버튼이 안나온다".
   목록이 34rem 고정이라 390x844 에서 목록 끝이 888px, 버튼이 929/982px 로 화면 밖이었다.
   ★ flex(목록 flex:1) 와 sticky 둘 다 안 먹었다 — 시트 .content 높이가 내용에 따라 정해져
     줄일 여지가 없고, 그래서 sticky 가 붙을 공간도 생기지 않았다.
   → 목록 상한을 **화면 높이 기준으로** 잡는다. 목록 위(시트상단~탭) 약 21rem +
     버튼줄·여백 약 12rem 을 뺀 만큼만 목록에 준다. 작은 화면일수록 목록이 먼저 줄어든다. */
/* 목록 높이는 종전대로 둔다 — 시트 상한을 85dvh 로 올려(bottomsheet.js) 내용이 그대로 들어간다.
   여기서 목록을 억지로 줄이면 대화방 항목(84px)이 잘려 보인다(0801 지적). */
.user_share_list{max-height:34rem;overflow-y:auto;margin-top:0;}
#bs_share .share_actions{padding-bottom:1.6rem;}
.user_share_list ul{margin:0;padding:0;}
/* 이전 가로형 공유 목록이 남은 배포 환경에서도 프로필 사이 여백을 유지한다. */
#friend_share_list_box.d-flex{gap:1.6rem;padding-left:1.6rem;padding-right:1.6rem;}
#friend_share_list_box.d-flex>.list-item{flex:0 0 7.2rem;min-width:7.2rem;}
.share_target{min-height:8.4rem;border-bottom:1px solid var(--gray-100);}
.share_target .user_select{position:relative;display:flex;align-items:center;width:100%;height:100%;padding:0 2rem;}
.share_checkbox{display:flex;align-items:center;justify-content:center;flex:0 0 1.6rem;width:1.6rem;height:1.6rem;margin-right:1.2rem;border:1px solid var(--gray-300);border-radius:.4rem;background:#fff;}
.user_select input:checked + .share_checkbox{border-color:var(--primary);background:var(--primary);}
.user_select input:checked + .share_checkbox span{width:1.1rem;height:1.1rem;background:url(../img/check_mini.png) no-repeat center/contain;}
.share_avatar{display:block;flex:0 0 4.6rem;width:4.6rem;height:4.6rem;margin-right:1.2rem;overflow:hidden;border-radius:50%;background:var(--gray-200);}
.share_avatar img{width:100%;height:100%;object-fit:cover;}
.share_room_badge{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:-.6rem;margin-right:.6rem;}
.share_room_badge img{width:100%;height:100%;object-fit:contain;}
.share_name{min-width:0;overflow:hidden;color:var(--gray-600);font-size:1.7rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap;}
.user_select{cursor: pointer;}
.user_select input{display: none;}
.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); }

/* SPEC-PHOTO-02 대화방 사진 모아보기 — 날짜별 격자 (제안서 목업 2번) */
.photo_group{margin-bottom:2.4rem;}
.photo_group_date{font-size:1.4rem;font-weight:600;color:#121212;margin-bottom:1.2rem;}
.photo_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem;}
.photo_cell{position:relative;padding:0;border:0;background:var(--gray-100);aspect-ratio:1/1;overflow:hidden;border-radius:0.4rem;}
.photo_cell img{width:100%;height:100%;object-fit:cover;display:block;}
/* PC 는 대화방과 같은 좁은 컬럼이라 3열을 유지한다(폭을 넓히면 대화방과 어긋난다) */

/* ─────────────────────────────────────────────────────────────────────────────
   SPEC-QAP-CUS-0831-WEBFONT — 대화 글자 크기(웹)
   앱 MY > 글자 크기와 같은 7단계(0.85 / 1.0 / 1.2 / 1.45 / 1.75 / 2.1 / 2.55).
   배율은 head.inc.php 의 조기 스크립트가 --chat-font-scale 로 넣는다.

   ★배율 1 이면 종전과 **픽셀 동일**해야 한다.
     - 말풍선은 값을 새로 박지 않고 `1em`(상속값 15px)에 곱만 한다. line-height 는
       body 가 무단위(1.4)로 상속시키므로 font-size 만 바꾸면 자동으로 따라온다(실측 21→42px).
     - 입력칸은 line-height 가 26px 고정이라 함께 곱한다. 높이는 «한 줄 = 26+7», «최대 5줄 = 26×5+5»
       라는 기존 관계식(EDITLINEGAP)을 그대로 배율에 태운다 → 배율 1 에서 33px / 135px 로 종전과 같다.
   ★대상은 «대화 본문»과 «입력칸»뿐이다. 닉·시간·날짜칩·인용·전체보기는 앱도 고정이다.
   ───────────────────────────────────────────────────────────────────────────── */
:root{ --chat-font-scale:1; }

/* 말풍선 본문 — #chat_detail_box 안으로 한정(알림 등 다른 화면의 speech_bubble 에 영향 금지) */
#chat_detail_box .speech_bubble{ font-size: calc(1em * var(--chat-font-scale)); }

/* 입력칸 — 앱 inputTextScaled(16/26 × 배율) 미러 */
.talk_input .write_ip .text_area{
    font-size: calc(1.6rem * var(--chat-font-scale));
    line-height: calc(26px * var(--chat-font-scale));
    height: calc(26px * var(--chat-font-scale) + 7px);
    max-height: calc(26px * var(--chat-font-scale) * 5 + 5px);
}

/* SPEC-QAP-CUS-0906-CHIPFONT — 날짜·입장/퇴장·안내 칩과 «여기까지 읽었습니다» 도 배율을 탄다.
   0906 곽 대표 전달(eYe · S22 울트라 캡처): «글씨 크기 조절할 때 저것(날짜·입장 알림)도 같이 조절되게».
   CHIPUNIFY 의 12px/18px 에 곱만 한다 — 배율 1 이면 종전과 픽셀 동일. 앱(RN chipTextScaled ·
   네이티브 12/18 × fontScale)과 같은 식. 위 1455·1519 행의 chipv2 규칙과 같은 셀렉터라 순서로 이긴다. */
.wrap.chipv2 .talk_content .date:not(.d-none),
.wrap.chipv2 .talk_content .random_info{
  font-size: calc(1.2rem * var(--chat-font-scale));
  line-height: calc(1.8rem * var(--chat-font-scale));
}
.wrap.chipv2 .chat_unread_divider span{
  font-size: calc(1.2rem * var(--chat-font-scale));
  line-height: calc(1.8rem * var(--chat-font-scale));
}

/* SPEC-QAP-CUS-0928-FRIENDGOTOP — 친구탭(index.php) 「맨 위로」.
   모양·동작은 케이브 .mk_float / .mk_gotop(cave.css) 그대로. cave.css 는 케이브 게이트가 열렸을 때만
   index.php 에 실리므로, 친구탭 전용 클래스(.fr_float / .fr_gotop)로 따로 둔다 — 케이브 화면에는 영향 없음.
   다른 점은 자리 하나: 하단 탭(.bt_menu, fixed · z 1002 · 높이 --ft_height_m + safe-area) 위에 떠야 하므로
   래퍼 바닥을 탭 높이만큼 올리고 z-index 를 탭보다 위(1003)로 둔다. */
.fr_float {
	position: fixed;
	bottom: calc(var(--ft_height_m) + env(safe-area-inset-bottom));
	z-index: 1003;
	width: 100%;
	max-width: var(--body_width);           /* .bt_menu 와 같은 방식 — PC 에서도 모바일 영역 기준 */
	height: 0;                              /* 목록 클릭을 가리지 않게 높이 0 */
	pointer-events: none;
}
.fr_float > * { pointer-events: auto; }
/* ★0928 사용자 지시 「고객이 요청한 방식으로」 — 곽 대표 참고 사진(카톡 10:12 ⑥)대로 **오른쪽 아래 · 연한 파랑 원 · 파란 ↑**.
   사진 실측(화면 폭 534px 기준 지름 45 · 오른쪽 22)을 390 폭으로 환산 → 지름 3.3rem · 오른쪽 1.6rem. 앱 FriendsScreen styles.gotop 과 같은 값.
   화살표는 index.php 의 꺾쇠 <img> 를 숨기고 배경 SVG 로 그린다(PHP 는 그대로). */
.fr_gotop {
	position: absolute;
	right: 1.6rem;
	bottom: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.3rem;
	height: 3.3rem;
	padding: 0;
	border: 1px solid #CEE7F4;
	border-radius: 50%;
	background: #DFF0FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cpath d='M22.5 34V11M14.5 18.5L22.5 10.5L30.5 18.5' fill='none' stroke='%233784FF' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	line-height: 0;
	opacity: 0; visibility: hidden;         /* 스크롤 200 초과에서만 노출(.on) */
	transition: opacity .2s ease, visibility .2s ease;
}
.fr_gotop.on { opacity: 1; visibility: visible; }
.fr_gotop img { display: none; }