@charset "utf-8";

/* ===== 마이페이지 채팅 (목록 + 채팅방) — Figma 1119:6459 (teal 액센트) =====
   720px 뷰포트 / 375 Figma = 1.92x. 색상 토큰은 main.css(:root / .dark-mode)에서 상속. */

/* ============================================================
   ① 채팅 목록 — Figma 1119:5968
   ============================================================ */
.mch-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 헤더 (sticky) */
.mch-head {position:sticky; top:0; z-index:20; background:var(--card);}

/* 타이틀바: 뒤로 + 제목 + 새 채팅 — Figma 1119:5978 */
.mch-bar {display:flex; align-items:center; gap:15px; padding:21px 27px; border-bottom:1.92px solid var(--line);}
.mch-iconbtn {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:19px; background:transparent;}
.mch-iconbtn img {width:38px; height:38px;}
.mch-title {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink);}

/* 검색바 — Figma 1119:5988 */
.mch-searchwrap {padding:19px 27px 21px; border-bottom:1.92px solid var(--line); background:var(--card);}
.mch-search {display:flex; align-items:center; gap:15px; height:69px; padding:0 29px; background:var(--snow); border:1.92px solid var(--line); border-radius:42px;}
.mch-search img {width:31px; height:31px;}
.mch-search input {flex:1; min-width:0; border:0; background:transparent; font-size:25px; color:var(--ink);}
.mch-search input::placeholder {color:#94A3B8;}

/* 탭 (active = teal + 밑줄) — Figma 1119:5995 */
.mch-tabs {display:flex; background:var(--card); border-bottom:3.84px solid var(--line);}
.mch-tab {flex:1; position:relative; display:flex; align-items:center; justify-content:center; gap:11px; padding:21px 7px; background:none; color:#94A3B8; font-size:25px; font-weight:600; white-space:nowrap;}
.mch-tab.on {color:var(--teal); font-weight:800;}
.mch-tab.on::after {content:''; position:absolute; left:0; right:0; bottom:-3.84px; height:3.84px; border-radius:3px 3px 0 0; background:var(--teal-2, #0D9488);}
.mch-tab-num {font-size:21px; font-weight:800; color:#94A3B8;}
.mch-tab.on .mch-tab-num {color:var(--teal);}
.mch-tab-badge {display:inline-flex; align-items:center; justify-content:center; min-width:35px; padding:2px 12px; border-radius:20px; background:#DC2626; color:#fff; font-size:19px; font-weight:700;}

/* 스와이프 힌트 — Figma 1119:6010 */
.mch-hint {display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 27px 13px; background:var(--snow); border-bottom:1.92px solid var(--line); font-size:19px; color:#94A3B8;}
.mch-hint img {width:23px; height:23px;}

/* 대화 목록 — Figma 1119:6014 */
.mch-list {flex:1; padding-bottom:130px;}
.mch-row {display:flex; align-items:center; gap:23px; width:100%; padding:25px 27px; text-align:left; background:var(--card); border-bottom:1.92px solid var(--line);}
.mch-row.unread {background:var(--mch-unread-bg, #FFFDF5);}

/* 아바타 (이니셜) */
.mch-av {position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:100px; height:100px; border-radius:50px; color:#fff; font-size:35px; font-weight:800;}
.mch-av-dot {position:absolute; right:4px; bottom:4px; width:25px; height:25px; border-radius:50%; background:#16A34A; border:3.84px solid var(--card);}
/* 아바타 그라데이션 톤 — 목록(mch)/채팅방(mcr)/메시지(mcr-msg)/타이핑(mcr-typing) 공통 */
.mch-av.g-orange, .mcr-av.g-orange, .mcr-msg-av.g-orange, .mcr-typing-av.g-orange {background:linear-gradient(135deg, #D97706 0%, #F59E0B 100%);}
.mch-av.g-teal,   .mcr-av.g-teal,   .mcr-msg-av.g-teal,   .mcr-typing-av.g-teal   {background:linear-gradient(135deg, #0F766E 0%, #0D9488 100%);}
.mch-av.g-navy,   .mcr-av.g-navy,   .mcr-msg-av.g-navy,   .mcr-typing-av.g-navy   {background:linear-gradient(135deg, #1E3A5F 0%, #2D4F7F 100%);}
.mch-av.g-blue,   .mcr-av.g-blue,   .mcr-msg-av.g-blue,   .mcr-typing-av.g-blue   {background:linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);}
.mch-av.g-violet, .mcr-av.g-violet, .mcr-msg-av.g-violet, .mcr-typing-av.g-violet {background:linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);}
.mch-av.g-mix,    .mcr-av.g-mix,    .mcr-msg-av.g-mix,    .mcr-typing-av.g-mix    {background:linear-gradient(135deg, #0D9488 0%, #1E3A5F 100%);}
.mch-av.g-green,  .mcr-av.g-green,  .mcr-msg-av.g-green,  .mcr-typing-av.g-green  {background:linear-gradient(135deg, #16A34A 0%, #14532D 100%);}

/* 본문 */
.mch-body {flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.mch-line1 {display:flex; align-items:center; gap:6px;}
.mch-name {flex:0 1 auto; font-size:27px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mch-cat {flex:0 0 auto; padding:2px 12px; border-radius:38px; font-size:17px; font-weight:700; white-space:nowrap;}
.mch-time {flex:0 0 auto; margin-left:auto; font-size:21px; color:#94A3B8; white-space:nowrap;}
.mch-line2 {display:flex; align-items:center; gap:14px;}
.mch-last {flex:1; min-width:0; font-size:23px; font-weight:600; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mch-last.muted {color:#94A3B8; font-weight:400;}
.mch-last.mine {color:var(--teal); font-weight:400;}
.mch-unread {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 13px; border-radius:19px; background:var(--teal-2, #0D9488); color:#fff; font-size:21px; font-weight:700;}

/* 카테고리 배지 색상 (라이트) */
.mch-cat.c-market   {background:#FFFBEB; color:#D97706;}
.mch-cat.c-talent   {background:#F0FDFA; color:#0F766E;}
.mch-cat.c-recruit  {background:#F0FDF4; color:#16A34A;}
.mch-cat.c-space    {background:#EFF6FF; color:#1D4ED8;}
.mch-cat.c-together {background:#FFF7ED; color:#EA580C;}

/* ============================================================
   ③ 빈 상태 — Figma 1119:6389
   ============================================================ */
.mch-empty {flex:1; display:flex; flex-direction:column; align-items:center; padding:82px 54px 40px; background:var(--snow);}
.mch-empty-ic {display:flex; align-items:center; justify-content:center; width:169px; height:169px; border-radius:50%; background:var(--mint); border:1.92px solid var(--teal); margin-bottom:35px;}
.mch-empty-ic img {width:77px; height:77px;}
.mch-empty-title {font-size:42px; font-weight:800; color:var(--ink); margin-bottom:16px;}
.mch-empty-desc {font-size:25px; line-height:1.6; color:var(--sub); text-align:center; margin-bottom:38px;}

/* 채팅이 시작되는 경우 카드 */
.mch-cases {width:100%; padding:29px; background:var(--card); border:1.92px solid var(--line); border-radius:31px; box-shadow:0 1.92px 11.52px rgba(15,23,42,.06);}
.mch-cases-head {display:flex; align-items:center; gap:18px; font-size:27px; font-weight:800; color:var(--teal); padding-bottom:18px;}
.mch-cases-head img {width:25px; height:25px;}
.mch-case {display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1.92px solid var(--line); font-size:23px; color:var(--body);}
.mch-case:first-of-type {border-top:0;}
.mch-case-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:42px; height:42px;}
.mch-case-ic img {width:23px; height:23px;}

/* CTA — Figma 1119:6429 */
.mch-cta {display:inline-flex; align-items:center; justify-content:center; gap:14px; margin-top:38px; padding:23px 38px; border-radius:38px; background:var(--teal); color:#fff; font-size:27px; font-weight:700;}
.mch-cta img {width:29px; height:29px;}

/* 하단 탭바 (fixed) — meet-place 규약 재사용 */
.mch-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.mch-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mch-nav .tab img {width:42px; height:42px;}
.mch-nav .tab.on {color:var(--teal);}
.mch-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mch-nav .tab-fab .fab {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488, #1E3A5F); border:5px solid var(--card); box-shadow:0 10px 24px rgba(13,148,136,0.4);}
.mch-nav .tab-fab .fab img {width:48px; height:48px;}

/* ============================================================
   ② 채팅방 내부 (거래 대화) — Figma 1119:6163
   ============================================================ */
.mcr-wrap {display:flex; flex-direction:column; height:100vh; background:var(--snow);}

/* 상대방 헤더 (sticky) — Figma 1119:6173 */
.mcr-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:15px; padding:21px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mcr-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; height:69px; background:transparent;}
.mcr-back img {width:38px; height:38px;}
.mcr-av {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; border-radius:50%; color:#fff; font-size:25px; font-weight:800;}
.mcr-who {flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.mcr-name {font-size:31px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mcr-status {display:flex; align-items:center; gap:10px; font-size:21px; color:#16A34A;}
.mcr-status::before {content:''; width:14px; height:14px; border-radius:50%; background:#16A34A;}
.mcr-actions {flex:0 0 auto; display:flex; gap:8px;}
.mcr-actbtn {display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:19px; background:transparent;}
.mcr-actbtn img {width:38px; height:38px;}

/* 고정 거래 상품 배너 — Figma 1119:6195 */
.mcr-banner {display:flex; align-items:center; gap:19px; margin:18px 27px 0; padding:23px; background:var(--mint); border:1.92px solid var(--teal); border-radius:23px;}
.mcr-banner-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; border-radius:19px; background:var(--card); border:1.92px solid var(--teal); font-size:35px;}
.mcr-banner-txt {flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.mcr-banner-cat {font-size:21px; font-weight:700; color:var(--teal);}
.mcr-banner-title {font-size:25px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mcr-banner-arr {flex:0 0 auto; width:27px; height:27px;}

/* 메시지 스크롤 영역 — Figma 1119:6207 */
.mcr-scroll {flex:1; overflow-y:auto; padding:8px 0 24px;}

/* 날짜 구분선 — Figma 1119:6208 */
.mcr-date {display:flex; align-items:center; justify-content:center; gap:20px; padding:23px 31px 17px;}
.mcr-date::before, .mcr-date::after {content:''; flex:1; max-width:233px; height:1.92px; background:var(--line);}
.mcr-date span {flex:0 0 auto; font-size:23px; color:var(--sub);}

/* 시스템 안내 — Figma 1119:6213 */
.mcr-sys {display:flex; justify-content:center; padding:6px 27px 12px;}
.mcr-sys span {padding:9px 25px; border-radius:38px; background:var(--mint); border:1.92px solid var(--teal); font-size:21px; color:var(--teal);}

/* 메시지 행 */
.mcr-msg {display:flex; gap:15px; padding:6px 27px; align-items:flex-end;}
.mcr-msg.mine {flex-direction:row-reverse;}

/* 상대방 아바타 (작은) */
.mcr-msg-av {flex:0 0 auto; align-self:flex-start; display:flex; align-items:center; justify-content:center; width:61px; height:61px; border-radius:50%; color:#fff; font-size:23px; font-weight:800; margin-top:31px;}
.mcr-msg.mine .mcr-msg-av {display:none;}

.mcr-bubble-wrap {display:flex; flex-direction:column; max-width:460px;}
.mcr-msg.mine .mcr-bubble-wrap {align-items:flex-end;}
.mcr-sender {font-size:23px; color:var(--sub); padding:0 4px 6px;}

.mcr-bubble {padding:21px 27px; font-size:25px; line-height:1.5; word-break:break-word;}
/* 상대방 말풍선 (흰색) */
.mcr-msg.theirs .mcr-bubble {background:var(--card); border:1.92px solid var(--line); border-radius:4px 31px 31px 31px; color:var(--ink); box-shadow:0 1.92px 5.76px rgba(15,23,42,.05);}
/* 내 말풍선 (teal) */
.mcr-msg.mine .mcr-bubble {background:var(--teal); border-radius:31px 4px 31px 31px; color:#fff; box-shadow:0 3.84px 9.6px rgba(15,118,110,.25);}

/* 이미지 말풍선 */
.mcr-bubble.img {display:flex; align-items:center; justify-content:center; width:346px; height:230px; padding:0; background:var(--snow); border:1.92px solid var(--line); border-radius:23px;}
.mcr-bubble.img img {width:69px; height:69px; opacity:.5;}

/* 메타 (읽음 + 시간) */
.mcr-meta {display:flex; align-items:center; gap:10px; padding:8px 6px 0; font-size:21px; color:#94A3B8;}
.mcr-msg.mine .mcr-meta {flex-direction:column; align-items:flex-end; gap:2px; justify-content:flex-end; align-self:flex-end; padding:0 14px 0 0;}
.mcr-read {color:var(--teal); font-weight:600;}

/* 입력 중 (타이핑) — Figma 1119:6310 */
.mcr-typing {display:flex; align-items:center; gap:15px; padding:8px 27px;}
.mcr-typing-av {display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; color:#fff; font-size:19px; font-weight:800;}
.mcr-typing-dots {display:flex; align-items:center; gap:8px; padding:18px 27px; background:var(--card); border:1.92px solid var(--line); border-radius:38px;}
.mcr-typing-dots span {width:13px; height:13px; border-radius:50%; background:#94A3B8; animation:mcr-blink 1.2s infinite ease-in-out;}
.mcr-typing-dots span:nth-child(2) {animation-delay:.2s;}
.mcr-typing-dots span:nth-child(3) {animation-delay:.4s;}
@keyframes mcr-blink {0%,60%,100% {opacity:.3;} 30% {opacity:1;}}

/* 하단 입력바 (fixed) — Figma 1119:6317 */
.mcr-inputbar {flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:21px 27px calc(21px + env(safe-area-inset-bottom)); background:var(--card); border-top:1.92px solid var(--line);}
.mcr-attach {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; border-radius:50%; background:var(--snow); border:1.92px solid var(--line);}
.mcr-attach img {width:35px; height:35px;}
.mcr-field {flex:1; display:flex; align-items:center; gap:14px; height:77px; padding:0 29px; background:var(--snow); border:1.92px solid var(--line); border-radius:38px;}
.mcr-field input {flex:1; min-width:0; border:0; background:transparent; font-size:25px; color:var(--ink);}
.mcr-field input::placeholder {color:#94A3B8;}
.mcr-emoji {flex:0 0 auto; display:flex; align-items:center; background:transparent;}
.mcr-emoji img {width:34px; height:34px;}
.mcr-send {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; border-radius:50%; background:var(--teal); box-shadow:0 4px 11px rgba(15,118,110,.35);}
.mcr-send img {width:33px; height:33px;}

/* ===== 메뉴 액션시트 (헤더 메뉴 버튼) ===== */
.mcr-menu-overlay {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:1000; width:720px; max-width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(15,23,42,.45);}
.mcr-menu-sheet {display:flex; flex-direction:column; gap:8px; padding:15px 27px calc(31px + env(safe-area-inset-bottom)); background:var(--card); border-radius:42px 42px 0 0; box-shadow:0 -11.52px 38.4px rgba(0,0,0,.22);}
.mcr-menu-grab {width:77px; height:8px; border-radius:8px; background:var(--line); margin:8px auto 15px;}
.mcr-menu-item {display:flex; align-items:center; gap:19px; padding:25px 21px; border-radius:19px; background:transparent; font-size:27px; font-weight:600; color:var(--ink); text-align:left;}
.mcr-menu-item:active {background:var(--snow);}
.mcr-menu-item.danger {color:#DC2626;}
.churchro.dark-mode .mcr-menu-item.danger {color:#F87171;}
.mcr-menu-ic {flex:0 0 auto; font-size:31px; line-height:1;}
.mcr-menu-cancel {margin-top:8px; padding:25px; border-radius:19px; background:var(--snow); font-size:27px; font-weight:700; color:var(--sub);}

/* 상품 배너 — 버튼화 (클릭 가능): button 기본값 리셋, 기존 flex 레이아웃 유지 */
.mcr-banner {text-align:left; cursor:pointer; font:inherit; color:inherit;}

/* ===== 다크 모드 ===== */
.churchro.dark-mode .mch-row.unread {background:#1A2530;}
.churchro.dark-mode .mch-cat.c-market   {background:#2E2410; color:#FBBF24;}
.churchro.dark-mode .mch-cat.c-talent   {background:#11302C; color:#5EEAD4;}
.churchro.dark-mode .mch-cat.c-recruit  {background:#13301C; color:#86EFAC;}
.churchro.dark-mode .mch-cat.c-space    {background:#16243E; color:#93C5FD;}
.churchro.dark-mode .mch-cat.c-together {background:#2E1D10; color:#FDBA74;}
.churchro.dark-mode .mch-last {color:#CBD5E1;}
.churchro.dark-mode .mcr-msg.theirs .mcr-bubble {background:#16202E; color:var(--ink);}

@media (hover:hover) and (pointer:fine) {
	.mch-row:hover {background:var(--snow);}
}