/* 크몽과 동일한 레이아웃 + 다른 색감(인디고/블루 톤) */
:root {
  --accent: #4263eb;          /* 메인 인디고 */
  --accent-dark: #2f4ad0;
  --bg: #f4f6fa;
  --panel: #ffffff;
  --line: #e8ebf0;
  --text: #1c2430;
  --text-sub: #8a93a3;
  --mine: #e7ecff;            /* 내 말풍선 (연한 인디고) */
  --accent-tint: #eef2ff;     /* 강조 배경 틴트 */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Pretendard', 'Pretendard Variable', 'Malgun Gothic', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex; flex-direction: column;
  min-width: 1320px; /* 이보다 좁아지면 찌그러지지 않고 가로 스크롤 */
}

/* 헤더 */
header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0 12px; height: 56px; gap: 12px;
  display: flex; align-items: center;
  flex-shrink: 0;
}
/* 제목은 채팅방 칸(340px) 폭 차지 -> 계정 버튼이 큰 채팅 박스 바로 위에서 시작 */
header h1 { width: 340px; flex-shrink: 0; margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; user-select: none; }
header h1::before { content: ''; width: 18px; height: 18px; background: var(--accent); border-radius: 5px; display: inline-block; }
.account-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.account-bar label { color: var(--text-sub); }
/* 계정 버튼(탭) — 상단 헤더, 큰 채팅 박스 바로 위에서 시작 */
.acct-tabs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.acct-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-sub);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.acct-tab:hover { border-color: var(--accent); color: var(--accent); }
.acct-tab.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 누방(답변 대기) 카운터 — 연한 빨강 tint + 진한 빨강 숫자, 0은 흐린 회색 */
.acct-await { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 7px; background: #ffe8e4; color: #c5341f; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acct-await.zero { background: #eef0f4; color: #9aa1ae; font-weight: 600; }
.acct-tab.sel .acct-await { background: rgba(255,255,255,0.22); color: #fff; }
.acct-tab.sel .acct-await.zero { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); }
/* 비즈머니 상태 점 (이름 앞) — 충분=초록 / 20만원 이하=앰버 */
.acct-lowdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.acct-lowdot.ok { background: #18a957; }
.acct-lowdot.low { background: #ef5a48; }
.acct-tab.sel .acct-lowdot.ok { background: #6ee7a8; }
.acct-tab.sel .acct-lowdot.low { background: #ff7c6c; }
/* 계정 상태 점 (온라인 초록 / 오프라인 회색) */
.acct-dot { width: 7px; height: 7px; border-radius: 50%; background: #c4c9cf; flex-shrink: 0; }
.acct-dot.on { background: #18a957; }
.acct-tab.sel .acct-dot { background: rgba(255,255,255,0.55); }
.acct-tab.sel .acct-dot.on { background: #4ade80; }
.acct-tab-empty { color: var(--text-sub); font-size: 13px; }
.account-bar { margin-left: auto; }
.status { font-size: 12px; color: var(--text-sub); display: flex; align-items: center; gap: 5px; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #c4c9cf; }
.status.on { color: #18a957; }
.status.on::before { background: #18a957; }
.status.off { color: #e0563f; }
.status.off::before { background: #e0563f; }
.staff-sep { width: 1px; height: 18px; background: var(--line); }
/* 내 프로필 아바타 (우측 위) */
.staff-avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; padding: 0; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.staff-avatar:hover { box-shadow: 0 0 0 3px rgba(91,108,207,.18); }
.staff-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-avatar.lg { width: 52px; height: 52px; }
.avatar-initial { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; }
.staff-avatar.lg .avatar-initial { font-size: 22px; }
.ctx-menu.hidden { display: none; }
/* 내 계정 설정 모달 */
.modal.profile-modal { width: 380px; max-width: 100%; }
.profile-preview { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.profile-preview-name { font-size: 15px; font-weight: 700; }
.profile-preview-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.sel { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.08); }
.modal-btn.logout { margin-right: auto; background: #cf432a; border-color: #cf432a; color: #fff; }
.modal-btn.logout:hover { background: #b5371f; border-color: #b5371f; }
/* 카테고리 랭킹 (트로피) 패널 — 가로 7열 그리드 */
.modal.rank-modal { width: 90vw; max-width: 90vw; height: 90vh; display: flex; flex-direction: column; }
.rank-head { display: flex; align-items: center; gap: 12px; }
.rank-head .modal-title { margin: 0; }
.rank-body { flex: 1; min-height: 0; overflow-y: auto; margin-top: 12px; padding-right: 12px; margin-right: -14px; }
.rank-body::-webkit-scrollbar { width: 12px; }
.rank-body::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 6px; border: 3px solid #fff; background-clip: padding-box; }
.rank-body::-webkit-scrollbar-thumb:hover { background: #b9bec5; background-clip: padding-box; }
.rank-empty { color: var(--text-sub); font-size: 13px; text-align: center; padding: 24px 2px; }
.rank-updated { font-size: 16px; font-weight: 700; color: var(--accent-dark); }
.rank-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: 2px 8px; }
.rank-cat { min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; background: #fff; }
.rank-cat.draggable { cursor: grab; }
.rank-cat.draggable:active { cursor: grabbing; }
.rank-cat-head { display: flex; align-items: center; gap: 6px; }
.rank-cat-name { min-width: 0; flex: 1; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-cat-id { font-size: 11px; color: var(--text-sub); margin: 2px 0 8px; }
.rank-rm { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 10px; color: var(--text-sub); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.rank-rm:hover { border-color: #e0563f; color: #e0563f; }
.rank-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.rank-no { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: #b9bec5; }
.rank-no-1 { background: #e3b341; }
.rank-no-2 { background: #a8b0bd; }
.rank-no-3 { background: #cd8b5c; }
.rank-no-4 { background: #d4d8de; color: #5a6270; }
.rank-no.mine { background: #22c55e; color: #fff; }   /* 우리 판매자 계정 = 밝은 초록 */
.rank-no.other { background: #e0563f; color: #fff; }  /* 아니면 빨강 */
.rank-name { min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-admin { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rank-admin .modal-input { width: 120px; border-color: #a7aeba; height: 32px; padding: 0 11px; box-sizing: border-box; }
.rank-admin .modal-btn { height: 32px; padding: 0 16px; box-sizing: border-box; }
/* 중복 추가 시 붉게 진동 */
.rank-cat.rank-dupe { border-color: #e0563f; background: #fdece8; animation: rankShake .5s ease; }
@keyframes rankShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
/* 드래그 */
.rank-drag-src { opacity: .32; }
.rank-drag-ghost { position: fixed; z-index: 1200; pointer-events: none; margin: 0; border-color: var(--accent); box-shadow: 0 10px 26px rgba(20,30,60,.22); transform: scale(1.03); opacity: .95; }
body.rank-dragging { user-select: none; cursor: grabbing; }

/* 로그인 화면 */
.login-screen { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.login-box { width: 340px; max-width: 90%; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; box-shadow: 0 12px 40px rgba(20,30,60,0.1); display: flex; flex-direction: column; gap: 10px; }
.login-title { font-size: 18px; font-weight: 700; text-align: center; }
.login-sub { font-size: 13px; color: var(--text-sub); text-align: center; margin-bottom: 12px; }
.login-box input { height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; outline: none; }
.login-box input:focus { border-color: var(--accent); }
.login-error { min-height: 16px; font-size: 12.5px; color: #e0563f; text-align: center; }
.login-submit { height: 44px; border: none; background: var(--accent); color: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 2px; }
.login-submit:hover { background: var(--accent-dark); }
.login-switch { text-align: center; font-size: 12.5px; color: var(--text-sub); margin-top: 6px; }
.login-link { border: none; background: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-dark); cursor: pointer; }
.login-link:hover { text-decoration: underline; }
/* 관리자 톱니바퀴 */
.admin-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: var(--text-sub); cursor: pointer; }
.admin-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); }
/* 관리자 패널 */
.admin-modal { width: 460px; max-width: 100%; }
.admin-users { max-height: 56vh; overflow-y: auto; margin-top: 8px; padding-right: 12px; margin-right: -14px; }
.admin-loading, .admin-empty { color: var(--text-sub); font-size: 13px; padding: 10px 2px; }
.admin-group-title { font-size: 12px; font-weight: 700; color: var(--text-sub); margin: 14px 0 8px; }
.admin-group-title:first-child { margin-top: 4px; }
.admin-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 14px; margin-bottom: 8px; background: var(--bg, #f6f8fc); border: 1px solid var(--line); border-radius: 11px; }
.admin-row.sel { border-color: var(--accent); background: var(--accent-tint); }
.admin-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.admin-line1 { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.admin-nick { font-size: 14.5px; font-weight: 700; }
.admin-cred { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.3; }
.admin-cred-k { color: var(--text-sub); min-width: 48px; flex-shrink: 0; }
.admin-cred-v { color: var(--text); font-weight: 600; word-break: break-all; user-select: text; }
.admin-cred-na { color: var(--text-sub); font-weight: 400; }
.admin-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 6px; }
.admin-badge.pending { color: #b26a00; background: #fff3e0; }
.admin-badge.role-admin { color: var(--accent-dark); background: var(--accent-tint); }
.admin-badge.role-manager { color: #6b4fc4; background: #efeaff; }
.admin-badge.role-staff { color: var(--text-sub); background: #e9edf3; }
.admin-act { display: flex; flex-direction: column; align-items: stretch; justify-content: center; align-self: center; gap: 6px; flex-shrink: 0; min-width: 92px; }
.admin-role-wrap { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-sub); }
.admin-role { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 12.5px; background: #fff; cursor: pointer; }
.admin-role:disabled { background: #eef1f5; color: var(--text-sub); cursor: default; }
.admin-btn-sm { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: #fff; }
.admin-btn-sm.approve { color: #fff; background: var(--accent); border-color: var(--accent); }
.admin-btn-sm.approve:hover { background: var(--accent-dark); }
.admin-btn-sm.reject { color: #e0563f; border-color: #f0c4ba; }
.admin-btn-sm.reject:hover { background: #fdece8; border-color: #e0563f; }

/* 본문 레이아웃 */
main { flex: 1; display: flex; min-height: 0; padding: 12px; gap: 12px; }
/* 서버 연결 끊김 오버레이 */
.disconnected-overlay { position: fixed; inset: 0; z-index: 990; background: rgba(20,28,44,.55); display: flex; align-items: center; justify-content: center; }
.disconnected-card { background: #fff; border-radius: 16px; padding: 28px 36px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.disconnected-spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: disc-spin 0.8s linear infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }
.disconnected-title { font-size: 16px; font-weight: 700; color: var(--text); }
.disconnected-sub { margin-top: 6px; font-size: 13px; color: var(--text-sub); }
.no-accounts { flex: 1; display: flex; align-items: center; justify-content: center; }
.no-accounts-inner { text-align: center; }
.no-accounts-title { font-size: 17px; font-weight: 700; color: var(--text); }
.no-accounts-sub { margin-top: 8px; font-size: 13.5px; color: var(--text-sub); }
.col { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.col-title { height: 54px; padding: 0 18px; display: flex; align-items: center; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--line); flex-shrink: 0; }

/* 채팅방 목록 */
.conv-col { width: 340px; flex-shrink: 0; }
.conv-search { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.conv-search-input { position: relative; flex: 1; min-width: 0; }
/* 인풋 클릭 시 뜨는 검색 기준 선택 메뉴 */
.search-type-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 22px rgba(20,30,60,0.13); padding: 5px; }
.search-type-menu.hidden { display: none; }
.search-type-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border: none; background: transparent; text-align: left; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 7px; }
.search-type-opt:hover { background: var(--bg, #f6f8fc); }
.search-type-opt.sel { color: var(--accent); font-weight: 700; }
.search-type-opt.sel::after { content: '✓'; font-size: 12px; }
.conv-search input { width: 100%; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 13.5px; outline: none; background: var(--bg, #f6f8fc); }
.conv-search input:focus { border-color: var(--accent); background: #fff; }
.conv-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: none; background: transparent; color: var(--text-sub); font-size: 12px; cursor: pointer; border-radius: 50%; line-height: 1; }
.conv-search-btn { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; background: var(--accent); color: #fff; border-radius: 9px; cursor: pointer; }
.conv-search-btn:hover { background: var(--accent-dark); }
.conv-search-clear:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.conv-search-clear.hidden { display: none; }
.conv-empty { list-style: none; padding: 24px 12px; text-align: center; color: var(--text-sub); font-size: 13px; }
#conversations { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
#conversations li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px; cursor: pointer; position: relative;
  transition: background .12s;
}
#conversations li:hover { background: #f6f8fc; }
#conversations li.active { background: var(--accent-tint); }
/* 답변 대기(고객이 마지막으로 보냄 = 아직 답장 안 함) — 카드 배경을 밝은 빨간색 톤으로 */
#conversations li.conv-await { background: #ffe8e5; }
#conversations li.conv-await:hover { background: #ffe0db; }
#conversations li.conv-await.active { background: #ffccc2; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #8aa3ff, var(--accent));
  color: #fff; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.avatar.sm { width: 32px; height: 32px; font-size: 14px; }
.conv-body { flex: 1; min-width: 0; }
.conv-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-sub { display: flex; align-items: center; margin-top: 7px; min-width: 0; } /* 배지+미리보기 한 줄, 계정명과 간격 */
.conv-last { font-size: 12.5px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-block; flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; margin-right: 6px; }
.badge.ongoing { background: var(--accent-tint); color: var(--accent-dark); }
/* 오른쪽 칼럼: 시간(위) + 안읽음 점(아래) 균일 정렬 */
.conv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; align-self: flex-start; padding-top: 2px; }
.conv-time { font-size: 11px; color: var(--text-sub); }
/* 즐겨찾기 별표 (대화 행) */
.conv-star { display: inline-flex; padding: 6px; margin: -6px -4px -4px; border: none; background: none; border-radius: 8px; cursor: pointer; color: #c4c9cf; }
.conv-star:hover { color: #f0b429; background: #fff8e6; }
.conv-star.on { color: #f5b400; }
/* 즐겨찾기 필터 + 알림 버튼 (헤더) */
.conv-col .col-title { justify-content: space-between; }
.col-title-actions { display: flex; align-items: center; gap: 8px; }
.star-filter, .notif-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text-sub); cursor: pointer; }
.star-filter:hover { color: #f0b429; border-color: #f0b429; }
.star-filter.on { color: #f5b400; border-color: #f5b400; background: #fff8e6; }
.notif-btn:hover { color: var(--accent-dark); border-color: var(--accent); background: var(--accent-tint); }
/* 계정 설정 모달 */
.modal.acct-modal { width: 700px; max-width: 96vw; height: 620px; max-height: 90vh; display: flex; flex-direction: column; }
.acct-modal-name { font-size: 13px; font-weight: 600; color: var(--accent-dark); }
.acct-set-tabs { display: flex; gap: 6px; margin: 6px 0 4px; border-bottom: 1px solid var(--line); }
.acct-set-tab { padding: 9px 14px; border: none; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-sub); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.acct-set-tab.sel { color: var(--accent-dark); border-bottom-color: var(--accent); }
.acct-modal-body { margin-top: 16px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 12px; margin-right: -14px; }
.acct-modal-body::-webkit-scrollbar { width: 12px; }
.acct-modal-body::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 6px; border: 3px solid #fff; background-clip: padding-box; }
.acct-modal-body::-webkit-scrollbar-thumb:hover { background: #b9bec5; background-clip: padding-box; }
.acct-loading { color: var(--text-sub); font-size: 13px; padding: 20px 2px; text-align: center; }
.biz-total { background: var(--accent-tint); border-radius: 12px; padding: 16px 18px; }
.biz-total-label { font-size: 13px; color: var(--accent-dark); font-weight: 600; }
.biz-total-amount { font-size: 26px; font-weight: 800; color: var(--accent-dark); margin-top: 4px; }
.biz-row { display: flex; gap: 10px; margin-top: 10px; }
.biz-card { flex: 1; border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; }
.biz-card-label { font-size: 12.5px; color: var(--text-sub); }
.biz-card-amount { font-size: 17px; font-weight: 700; margin-top: 5px; }
.biz-sub { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; padding-left: 15px; display: flex; flex-direction: column; gap: 7px; }
.biz-sub-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-sub); }
.biz-sub-row > span:first-child { width: 130px; flex-shrink: 0; }
.biz-sub-row > span:last-child { font-weight: 600; color: var(--text); }
.biz-sub-row .biz-warn { color: #e0563f; font-weight: 700; }
/* 비즈머니 충전 */
.biz-charge { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.biz-charge-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-left: 15px; }
.biz-charge-sub { font-size: 12px; font-weight: 500; color: var(--text-sub); }
.biz-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.biz-amt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.biz-amt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-tint); }
.biz-amt:disabled { opacity: .5; cursor: default; }
.biz-amt.sending { border-color: var(--accent); background: var(--accent-tint); }
.biz-amt-bonus { font-size: 11px; font-weight: 700; color: #2e8b57; line-height: 1; }
.biz-charge-hint { margin-top: 10px; font-size: 12px; color: var(--text-sub); }
.charge-count { margin-top: 14px; font-size: 13.5px; color: var(--text-sub); text-align: center; }
.charge-count b { color: var(--accent-dark); font-variant-numeric: tabular-nums; font-size: 15px; }
.charge-count.low b { color: #e0563f; }
/* 광고 관리 탭 */
/* 자체 스크롤 없이 본문(.acct-modal-body) 하나만 스크롤 → 세로바 1개, 가로 오버플로우 없음 */
.cu-list { display: flex; flex-direction: column; gap: 9px; }
.cu-row { display: flex; flex-direction: column; gap: 9px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.cu-row:hover { border-color: #c7ccd4; box-shadow: 0 2px 8px rgba(20,28,44,.05); }
.cu-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cu-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-row-bottom { display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
.cu-bid-field { display: flex; align-items: center; gap: 9px; }
.cu-bid-label { font-size: 12.5px; color: var(--text-sub); }
.cu-bid-box { display: inline-flex; align-items: center; gap: 3px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; transition: border-color .12s, background .12s; }
.cu-bid-box:focus-within { border-color: var(--accent); }
.cu-bid-box.changed { border-color: var(--accent); background: #f3f1ff; }
.cu-bid-input { width: 52px; border: none; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); text-align: right; outline: none; padding: 0; }
.cu-bid-box.changed .cu-bid-input { color: var(--accent-dark); }
.cu-bid-unit { font-size: 12.5px; color: var(--text-sub); }
.cu-saving { font-size: 12.5px; color: var(--text-sub); font-weight: 600; }
.cu-status.pill { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cu-status.pill.on { background: #e3f4ea; color: #1f7a47; }
.cu-status.pill.ready { background: #fbf0d6; color: #a3720a; }
.cu-status.pill.stop { background: #fde7e2; color: #cf432a; }
.cu-toggle { flex-shrink: 0; width: 44px; height: 24px; border-radius: 12px; border: none; background: #cfd4da; cursor: pointer; position: relative; transition: background 0.15s; padding: 0; }
.cu-toggle.on { background: var(--accent); }
.cu-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cu-toggle.on .cu-toggle-knob { left: 22px; }
/* 광고별 자동 예약 */
.cu-sched { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.cu-sched-head { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; user-select: none; }
.cu-sched-head input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.cu-sched-body { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.cu-sched-grp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.cu-sched-glabel { flex-shrink: 0; width: 30px; font-size: 12px; font-weight: 700; color: var(--text-sub); }
.cu-sched-pair { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-sub); }
.cu-sched-plabel { font-weight: 600; }
.cu-sched-tilde { color: var(--text-sub); }
.cu-sched-input { padding: 2px 6px; border: 1px solid var(--line); border-radius: 7px; font-family: inherit; font-size: 12px; color: var(--text); outline: none; }
.cu-sched-input:focus { border-color: var(--accent); }
/* 알림 모달 */
.notif-modal { width: 440px; max-width: 100%; }
.notif-tabs { display: flex; gap: 6px; margin: 6px 0 4px; border-bottom: 1px solid var(--line); }
.notif-tab { padding: 9px 14px; border: none; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-sub); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.notif-tab.sel { color: var(--accent-dark); border-bottom-color: var(--accent); }
.notif-list { max-height: 58vh; overflow-y: auto; margin-top: 6px; padding-right: 12px; margin-right: -14px; }
.notif-list::-webkit-scrollbar { width: 12px; }
.notif-list::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 6px; border: 3px solid #fff; background-clip: padding-box; }
.notif-list::-webkit-scrollbar-thumb:hover { background: #b9bec5; background-clip: padding-box; }
.notif-loading, .notif-empty { color: var(--text-sub); font-size: 13px; padding: 14px 2px; text-align: center; }
.notif-date { font-size: 12px; font-weight: 700; color: var(--text-sub); padding: 12px 2px 6px; }
.notif-item { padding: 11px 4px; border-top: 1px solid var(--line); }
.notif-item.unread { background: var(--accent-tint); border-radius: 8px; padding: 11px 8px; }
.notif-msg { font-size: 13px; line-height: 1.45; word-break: break-word; }
.notif-msg b { font-weight: 700; }
.notif-item.warning .notif-msg { color: #e0563f; }
.notif-time { font-size: 11.5px; color: var(--text-sub); margin-top: 4px; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
li.is-unread .unread-dot { background: var(--accent); }
li.is-unread .conv-name { color: var(--text); }
li.is-unread .conv-last { color: var(--text); font-weight: 600; }

/* 대화 선택 전: 채팅이 우측 전체 차지. 선택 후: 대화목록 제외 영역의 65% */
.right-area { flex: 1; min-width: 0; display: flex; gap: 12px; }
#main.has-side .right-area { flex: 0 0 auto; width: calc((100% - 352px) * 0.65); }

/* 대화 영역 - 묶음 안에서 나머지 채움 (사이드 등장 시 줄어듦) */
.chat-col { flex: 1; min-width: 0; position: relative; }
/* 채팅창 박스 전체로 파일 드래그 시 하이라이트 + 안내 오버레이 */
.chat-col.drag-over::after {
  content: '파일 첨부';
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--accent);
  background: rgba(66, 99, 235, 0.06);
  border: 2px dashed var(--accent); border-radius: 14px;
  pointer-events: none;
}

/* 우측 사이드 패널 - 대화 선택해야만 등장, 묶음의 25% (채팅 75 : 사이드 25) */
.side-col { flex: 0 0 25%; min-width: 0; display: none; }
/* 사이드 패널은 메모 입력칸 빼고 드래그(텍스트 선택) 금지 — 더블클릭하다 선택되는 것 방지 */
.side-col { -webkit-user-select: none; user-select: none; }
.side-col .memo-input { -webkit-user-select: text; user-select: text; }
#main.has-side .side-col { display: flex; flex-direction: column; }

/* 템플릿 패널 - 대화 정보 패널과 동일 크기(=묶음의 25% = 전체영역의 16.25%), 우측 빈 공간에 배치 */
.task-col { flex: 0 0 auto; width: calc((100% - 352px) * 0.1625); min-width: 0; display: none; }
#main.has-side .task-col { display: flex; flex-direction: column; }
.task-col .side-section { flex: 1; min-height: 0; }
.task-col .side-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; }

/* 템플릿: 폴더/멘트 추가 버튼 (첨부파일·결제요청 버튼과 동일한 tool-btn 룩, 전체폭) */
.tpl-add { flex-shrink: 0; width: 100%; font-family: inherit; }
/* 위: 폴더 목록 / 아래: 멘트 목록 (각각 세로 스택, 사이 구분선) */
.tpl-folders { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex-shrink: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tpl-folders .tpl-add { grid-column: 1 / -1; }
.tpl-ments .tpl-add { width: 34px; height: 34px; padding: 0; font-size: 17px; align-self: center; }
.tpl-ments { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; }
.tpl-hint { color: var(--text-sub); font-size: 13px; text-align: center; padding: 14px 6px; }
/* 폴더 행 */
.tpl-folder { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.tpl-folder:hover { background: var(--bg, #f6f8fc); border-color: var(--accent); }
.tpl-folder.sel { background: #1c2430; border-color: #1c2430; color: #fff; }
.tpl-folder.sel:hover { background: #1c2430; }
.tpl-folder.sel .tpl-count { color: rgba(255,255,255,0.6); }
/* 우클릭 컨텍스트 메뉴 */
.ctx-menu { position: fixed; z-index: 1100; min-width: 110px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 22px rgba(20,30,60,0.16); padding: 4px; }
.ctx-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 6px; }
.ctx-item:hover { background: var(--bg, #f6f8fc); }
.ctx-item.danger { color: #e0563f; }
.ctx-item.danger:hover { background: #fdece8; }
/* 입력 모달: 제목과 입력창 사이 간격 */
.msg-modal .modal-input { margin-top: 12px; }
/* 붉은 경고 모달 */
.error-modal { border-top: 5px solid #cf432a; }
.error-modal-title { color: #cf432a; font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.error-modal .modal-btn.primary { background: #cf432a; border-color: #cf432a; }
.error-modal .modal-btn.primary:hover { background: #b5371f; border-color: #b5371f; }
/* 모달 좌측 아래 체크박스(덮어쓰기) - 버튼은 우측 유지 */
.modal-check { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none; }
.modal-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.tpl-folder-name { font-size: 13px; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-count { color: var(--text-sub); font-weight: 400; font-size: 12px; margin-left: 2px; }
/* 멘트 행 */
.tpl-ment { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.tpl-ment:hover { background: var(--bg, #f6f8fc); border-color: var(--accent); }
/* 폴더 첨부 항목 */
.tpl-add-row { display: flex; gap: 8px; justify-content: center; flex-shrink: 0; }
.tpl-add-row .tpl-add { width: 34px; height: 34px; padding: 0; align-self: auto; display: inline-flex; align-items: center; justify-content: center; }
.tpl-dir { display: flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; background: var(--accent-tint); }
.tpl-dir:hover { border-color: var(--accent); }
.tpl-dir-ic { color: var(--accent-dark); flex-shrink: 0; }
.tpl-dir-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-dir-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: var(--accent-dark); background: #fff; border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.tpl-ment-text { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.tpl-del, .tpl-del-ment { flex-shrink: 0; width: 20px; height: 20px; border: none; background: transparent; color: var(--text-sub); font-size: 11px; cursor: pointer; border-radius: 50%; line-height: 1; }
.tpl-del:hover, .tpl-del-ment:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* 작업 리스트 패널 - 우측 남은 공간 전부 채움 */
.work-col { flex: 1; min-width: 0; display: none; }
#main.has-side .work-col { display: flex; flex-direction: column; }
.work-col .side-section { flex: 1; min-height: 0; }
.work-col .side-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

/* 채팅 헤더 "작업 리스트 추가" 버튼 - 전송 버튼 색감, 크기는 컴팩트 */
.add-task-btn { margin-left: auto; flex-shrink: 0; padding: 10px 12px; border: none; background: var(--accent); color: #fff; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s; }
.add-task-btn:hover { background: var(--accent-dark); }
.add-task-btn:disabled { background: #d7dbe0; cursor: not-allowed; }

/* 작업 리스트 항목 카드 */
.work-empty { color: var(--text-sub); font-size: 13px; text-align: center; padding: 20px 6px; line-height: 1.5; }
.work-item { position: relative; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--panel); }
.work-item-x { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border: none; background: transparent; color: var(--text-sub); font-size: 12px; cursor: pointer; border-radius: 50%; line-height: 1; }
.work-item-x:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.work-item-title { font-weight: 700; font-size: 13px; padding-right: 22px; margin-bottom: 8px; word-break: break-all; }
.work-item-memo { width: 100%; height: 56px; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; font-family: inherit; font-size: 12.5px; line-height: 1.45; outline: none; background: var(--bg, #f6f8fc); }
.work-item-memo:focus { border-color: var(--accent); background: #fff; }
.side-card { width: 100%; flex: 1 1 0; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.side-section { display: flex; flex-direction: column; }
.memo-section { flex: none; }                       /* 메모는 항상 고정 크기 */
.order-section { flex: 1; min-height: 0; } /* 거래중이 나머지 공간 채움, 구분선 없음 */
.order-section .side-card-title { border-bottom: none; }
.order-section .side-card-body { flex: 1; min-height: 0; padding-top: 0; }
/* 대화정보·거래중·판매완료 3섹션: 카드 전체가 스크롤되고 각 섹션은 자연 높이 (겹침/넘침 방지) */
.side-col .side-card { overflow-y: auto; position: relative; }
.side-col .side-section { flex: none; min-height: 0; }
.side-col .order-section .side-card-body,
.side-col .sales-section .side-card-body { flex: none; min-height: 0; overflow: visible; }
.sales-section { border-top: 1px solid var(--line); }
.sales-section .side-card-title { border-bottom: none; }
.side-card-title { height: 54px; padding: 0 18px; display: flex; align-items: center; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; white-space: nowrap; }
.side-card-body { padding: 14px; overflow-y: auto; }
/* 메모 입력칸 (저장 버튼이 칸 안 우하단에) - 크몽 정도 크기 */
.memo-body { padding: 14px; }
.memo-wrap { position: relative; }
.memo-wrap .memo-input { width: 100%; height: 130px; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px 44px; font-family: inherit; font-size: 13.5px; line-height: 1.5; outline: none; }
.memo-wrap .memo-input:focus { border-color: var(--accent); }
.memo-wrap .memo-count { position: absolute; left: 12px; bottom: 16px; font-size: 12px; color: var(--text-sub); pointer-events: none; }
.memo-wrap .memo-save { position: absolute; right: 10px; bottom: 10px; padding: 6px 14px; border: none; background: var(--accent); color: #fff; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.memo-wrap .memo-save:hover { background: var(--accent-dark); }
.memo-wrap .memo-save:disabled { background: #d7dbe0; color: #fff; cursor: default; }
.side-empty { color: var(--text-sub); font-size: 13px; padding-left: 4px; }
/* 거래 세트마다 테두리 박스 */
.order-set { border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; margin-bottom: 10px; }
.order-set:last-child { margin-bottom: 0; }
.order-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent-dark); background: var(--accent-tint); padding: 2px 8px; border-radius: 6px; margin-bottom: 8px; }
.order-svc { font-size: 14px; font-weight: 600; line-height: 1.4; }
.order-amt { font-size: 15px; font-weight: 700; color: var(--accent-dark); margin-top: 6px; }
.order-set.clickable { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; }
.order-set.clickable:hover,
.order-set.active { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 2px 10px rgba(20,30,60,0.07); }
/* 토글로 닫은 직후엔 마우스가 카드 위에 있어도 호버 강조 끔 (일반 카드처럼) */
.order-set.clickable.no-hover:hover { border-color: var(--line); background: none; box-shadow: none; }
.order-action-hint { font-size: 11px; color: var(--text-sub); margin-top: 8px; }
/* 거래중 서비스 카드 클릭 액션 메뉴 */
.order-action-menu { position: absolute; z-index: 120; min-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 26px rgba(20,30,60,0.18); padding: 4px; }
.order-action-menu.hidden { display: none; }
.oam-item { display: block; width: 100%; text-align: left; padding: 9px 13px; border: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; border-radius: 7px; }
.oam-item:hover { background: var(--accent-tint); color: var(--accent-dark); }
.oam-item:disabled { opacity: .35; cursor: default; }
.oam-item:disabled:hover { background: transparent; color: var(--text); }
/* 주문 상세 모달 */
.order-detail-modal { max-width: 460px; width: 92%; }
.order-detail-body { max-height: 62vh; overflow-y: auto; margin-top: 6px; padding-right: 12px; margin-right: -14px; }
.order-detail-body::-webkit-scrollbar { width: 12px; }
.order-detail-body::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 6px; border: 3px solid #fff; background-clip: padding-box; }
.order-detail-body::-webkit-scrollbar-thumb:hover { background: #b9bec5; background-clip: padding-box; }
.od-more { margin-top: 10px; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg, #f6f8fc); font-family: inherit; font-size: 12.5px; color: var(--text-sub); cursor: pointer; }
.od-more:hover { background: #eef1f7; }
.od-loading, .od-empty { color: var(--text-sub); font-size: 13px; padding: 10px 2px; }
.od-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.od-svc { font-size: 15px; font-weight: 700; line-height: 1.4; }
.od-sub { font-size: 12.5px; color: var(--text-sub); margin-top: 5px; }
.od-status { color: var(--accent-dark); font-weight: 600; }
.od-section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.od-section:last-child { border-bottom: none; }
.od-section-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.od-item { padding: 9px 0; }
.od-item + .od-item { border-top: 1px dashed var(--line); }
.od-item-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.od-item-meta { font-size: 12.5px; color: var(--text-sub); margin-top: 4px; }
.od-prices { display: flex; flex-direction: column; gap: 7px; }
.od-price-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-sub); }
.od-price-row.total { padding-top: 9px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--text); }
.od-prog { padding: 9px 0; }
.od-prog + .od-prog { border-top: 1px dashed var(--line); }
.od-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.od-prog-label { font-size: 13px; font-weight: 600; }
.od-prog-at { font-size: 11.5px; color: var(--text-sub); white-space: nowrap; }
.od-prog-guide { font-size: 12px; color: var(--text-sub); margin-top: 4px; line-height: 1.45; white-space: pre-line; }
.od-prog-msg { font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
/* 판매완료(거래완료) 토글 + 인라인 목록 */
.sales-block { margin-top: 10px; }
.sales-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg, #f6f8fc); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: background 0.12s; }
.sales-toggle:hover { background: #eef1f7; }
.sales-caret { font-size: 11px; color: var(--text-sub); transition: transform 0.18s; }
.sales-toggle.open .sales-caret { transform: rotate(180deg); }
.sales-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.sales-list.hidden { display: none; }
.sales-loading { color: var(--text-sub); font-size: 13px; padding: 6px 4px; }
.sales-item { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.sales-item-svc { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.sales-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.sales-item-amt { font-size: 14px; font-weight: 700; color: var(--accent-dark); }
.sales-item-status { font-size: 11px; font-weight: 600; color: #2e7d4f; background: #e7f6ed; padding: 2px 8px; border-radius: 6px; }
.sales-item-date { font-size: 12px; color: var(--text-sub); margin-top: 5px; }
.chat-header { height: 54px; padding: 0 18px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.chat-header .copy-name { cursor: pointer; transition: text-shadow .1s; }
.chat-header .copy-name:hover { text-shadow: 0 0 .45px currentColor; }
.chat-header .copy-name.copied { animation: nameCopied .7s ease; }
@keyframes nameCopied {
  0%   { color: var(--accent); }
  100% { color: inherit; }
}
.order-info { padding: 9px 18px; font-size: 12.5px; color: var(--accent-dark); background: var(--accent-tint); border-bottom: 1px solid var(--line); display: none; }
.order-info.show { display: block; }
.messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #fbfcfe; }
.msg { max-width: 68%; display: flex; flex-direction: column; gap: 4px; }
.msg .bubble { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.msg .meta { font-size: 10.5px; color: var(--text-sub); margin-top: 4px; }
.msg.them { align-self: flex-start; }
.msg.them .bubble { background: #fff; border: 1px solid var(--line); border-top-left-radius: 4px; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.me .bubble { background: var(--mine); border-top-right-radius: 4px; }
/* 첨부파일 카드 (크몽 형식) */
.bubble.plain { background: transparent !important; border: none !important; padding: 0; }
.att-card { display: flex; align-items: center; gap: 11px; width: 290px; max-width: 290px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.att-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #f1f3f7; display: flex; align-items: center; justify-content: center; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-thumb.clickable { cursor: pointer; }
.att-thumb.clickable:hover { opacity: .85; }
.att-ic { font-size: 20px; }
/* 확장자 배지 (이모지 대체) */
.att-thumb.badge { background: transparent; }
.att-ext { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #fff; background: #8a93a3; }
.att-ext.k-pdf { background: #e0563f; }
.att-ext.k-doc { background: #4263eb; }
.att-ext.k-sheet { background: #18a957; }
.att-ext.k-ppt { background: #e0822f; }
.att-ext.k-zip { background: #b08a2e; }
.att-ext.k-video { background: #8b4ddb; }
.att-ext.k-audio { background: #2aa7b8; }
.att-ext.k-img { background: #5a9; }
.att-ext.k-etc { background: #6b7385; }
.pf-thumb .att-ext { font-size: 10px; border-radius: 7px; }
.att-info { flex: 1; min-width: 0; }
.att-fname { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-ftype { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.att-dl { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-sub); text-decoration: none; border-radius: 7px; border: none; background: transparent; cursor: pointer; }
.att-dl:hover { background: #f1f3f7; color: var(--accent); }
.att-dl.dl-progress { background: var(--accent-tint); color: var(--accent); cursor: default; }
.att-dl .dl-pct { font-size: 10px; font-weight: 800; }

/* 이미지 미리보기 라이트박스 */
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .82); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 40px; cursor: zoom-out; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.lb-loading { color: #fff; font-size: 15px; }
.lb-close { position: fixed; top: 20px; right: 26px; width: 42px; height: 42px; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1001; transition: background .12s; }
.lb-close:hover { background: rgba(255,255,255,.32); }

/* 안전결제 요청 카드 */
.pay-card { width: 290px; max-width: 290px; border: 1px solid var(--line); background: #fff; border-radius: 12px; overflow: hidden; }
.pay-head { background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; padding: 8px 13px; }
.pay-body { display: flex; gap: 11px; padding: 12px 13px; align-items: flex-start; }
.pay-img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #eef0f4; }
.pay-info { min-width: 0; }
.pay-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.pay-amount { font-size: 13.5px; font-weight: 700; color: var(--accent-dark); margin-top: 4px; }
.pay-content { font-size: 12px; color: var(--text-sub); margin-top: 4px; }
.pay-actions { display: flex; gap: 7px; padding: 0 13px 12px; }
.pay-btn { flex: 1; padding: 8px 0; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); }
.pay-btn.cancel { background: #fff; color: var(--text-sub); }
.pay-btn.cancel:hover { border-color: #e0563f; color: #e0563f; }
.pay-btn.again { background: var(--accent-tint); color: var(--accent-dark); border-color: transparent; }
.pay-btn.again:hover { background: var(--accent); color: #fff; }
.pay-status { padding: 10px 13px; border-top: 1px solid var(--line); }
/* 결제 완료 = 초록 배경 흰 글씨 작은 배지 (윗 구분선 있는 칸 안에) */
.pay-done { display: inline-block; padding: 5px 12px; background: #18a957; color: #fff; border-radius: 7px; font-size: 12px; font-weight: 700; }
.deliver-oid { font-size: 14px; font-weight: 700; color: var(--accent-dark); padding: 4px 0 2px; }
.deliver-service { font-size: 14px; font-weight: 600; color: var(--text); padding: 4px 0 2px; line-height: 1.4; }
.pay-oid { font-size: 13.5px; font-weight: 700; color: var(--accent-dark); margin-top: 6px; }
/* 결제한 서비스 카드 = 안전결제 요청 카드와 동일 스타일 (파란 헤더), 헤더에 시간만 추가 */
.pay-head .pay-time { font-weight: 400; font-size: 11px; color: rgba(255,255,255,0.78); }
.pay-canceled-msg { padding: 9px 14px; background: #f5f6f8; border: 1px solid var(--line); border-radius: 12px; color: #b4bac4; font-size: 13px; }

/* 모달 공용 */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,28,44,.5); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 24px; }
.modal-overlay.hidden { display: none; }
.modal { width: 460px; max-width: 100%; background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
/* 숫자 입력 스피너(증감 화살표) 제거 -> 직접 입력만 */
.modal-input[type=number]::-webkit-inner-spin-button,
.modal-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.modal-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.modal-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-sub); margin: 12px 0 5px; }
.modal-input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 13.5px; outline: none; resize: none; }
.pay-modal { width: 660px; padding: 36px; }
.pay-modal .modal-title { font-size: 21px; margin-bottom: 20px; }
.pay-modal .modal-label { font-size: 14.5px; margin: 18px 0 8px; }
.pay-modal .modal-input { padding: 13px 15px; font-size: 15px; border-radius: 11px; }
.pay-modal #payContent { min-height: 140px; }
.pay-modal .modal-btn { padding: 13px 28px; font-size: 15px; }
.pay-modal .input-unit .modal-input { padding-right: 40px; }
.pay-modal .input-unit .unit { font-size: 14.5px; }
.pay-modal .modal-actions { margin-top: 24px; }
.char-count { text-align: right; font-size: 12.5px; color: var(--text-sub); margin-top: 5px; }
.modal-count { text-align: right; font-size: 12px; color: var(--text-sub); margin-top: 6px; }
.pay-row { display: flex; gap: 12px; }
.pay-col { flex: 1; min-width: 0; }
.input-unit { position: relative; }
.input-unit .modal-input { padding-right: 34px; }
.input-unit .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-sub); pointer-events: none; }
.modal-input:focus { border-color: var(--accent); }
.modal-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.modal-btn { padding: 9px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); }
.modal-btn.ghost { background: #fff; color: var(--text-sub); }
.modal-btn.ghost:hover { background: #f4f6fa; }
.modal-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.modal-btn.primary:hover { background: var(--accent-dark); }
.modal-btn:disabled { background: #d7dbe0; border-color: #d7dbe0; color: #fff; cursor: not-allowed; }
.modal-btn:disabled:hover { background: #d7dbe0; }
/* 메시지 모달 (alert/confirm 대체) */
.msg-modal { width: 460px; }
.msg-modal textarea.modal-input { min-height: 160px; resize: vertical; }
.modal-msg { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-line; word-break: break-word; }
.msg-modal .modal-actions { margin-top: 18px; }

.read { margin-left: 5px; font-weight: 700; }
.read.seen { color: var(--accent); }
.read.unread { color: #c4c9cf; }

/* 문의 서비스 카드 (대화 흐름 속, 보낸사람 쪽으로) */
.gig-card-row { max-width: 320px; display: flex; flex-direction: column; margin: 2px 0; }
.gig-card-row.them { align-self: flex-start; }
.gig-card-row.me { align-self: flex-end; }
.gig-card { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(20,30,50,.05); }
.gig-tag { background: var(--accent-tint); color: var(--accent-dark); font-size: 11.5px; font-weight: 700; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.gig-main { display: flex; gap: 12px; padding: 12px 14px; align-items: center; }
.gig-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #eef0f4; }
.gig-info { min-width: 0; }
.gig-cat { font-size: 11px; color: var(--text-sub); margin-bottom: 2px; }
.gig-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gig-price { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 4px; }
.gig-time { font-size: 10.5px; color: var(--text-sub); margin-top: 4px; }

/* 입력창 */
/* 입력 중 표시(프레즌스) — 입력창 위에 은은하게, 바운스 점 3개 + 이름 */
.typing-indicator { display: none; align-items: center; gap: 7px; padding: 5px 16px 7px; font-size: 12px; }
.typing-indicator.show { display: flex; }
.typing-indicator .tw-text { font-weight: 600; color: var(--accent); }
.typing-indicator .tw-dots { display: inline-flex; gap: 3px; }
.typing-indicator .tw-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .3; animation: twBounce 1.25s infinite ease-in-out; }
.typing-indicator .tw-dots i:nth-child(2) { animation-delay: .18s; }
.typing-indicator .tw-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes twBounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.composer { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.composer.hidden { display: none; }
/* 전송 대기 파일 (입력창 위) */
.pending-files { display: flex; flex-wrap: wrap; gap: 8px; }
.pending-files.hidden { display: none; }
.pf-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; background: #f4f6fa; border: 1px solid var(--line); border-radius: 10px; max-width: 220px; }
.pf-thumb { width: 34px; height: 34px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: #e6e9ef; display: flex; align-items: center; justify-content: center; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-ic { font-size: 18px; }
.pf-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-x { flex-shrink: 0; width: 20px; height: 20px; border: none; background: #d7dbe0; color: #fff; border-radius: 50%; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pf-x:hover { background: var(--accent); }
.composer textarea {
  width: 100%; resize: none; min-height: 44px; max-height: 160px; overflow-y: auto;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 14px; line-height: 1.4; outline: none; transition: border-color .12s;
}
.composer textarea:focus { border-color: var(--accent); }
/* 하단 툴바: 첨부/결제/일정 (왼쪽) + 전송 (오른쪽) */
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer-actions { display: flex; gap: 6px; }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 40px; padding: 0 26px;
  border: 1px solid #d4d9e0; background: #fff; color: var(--text);
  border-radius: 10px; font-size: 14px; font-weight: 400; cursor: pointer; transition: all .12s;
}
.tool-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.tool-btn span { font-size: 14px; }
#sendBtn {
  height: 40px; padding: 0 26px; border: none; background: var(--accent); color: #fff;
  border-radius: 10px; font-size: 14px; font-weight: 400; cursor: pointer; flex-shrink: 0; transition: background .12s;
}
#sendBtn:hover { background: var(--accent-dark); }
#sendBtn:disabled { background: #d7dbe0; cursor: not-allowed; }
.empty { color: var(--text-sub); text-align: center; margin: auto; font-size: 13px; }

/* 대화 미선택 시 본문: 답변 대기(누방) — 좌 SALES / 우 CS 두 패널. 세로 중앙 정렬로 여백 균형 */
.messages.nubang-mode { padding: 0; } /* 누방 화면: 여백 제거 → 구분선이 본문 가장자리까지 */
.nb-wrap { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
/* 구분선 없이, 영역을 SALES | CS 두 열로 (각 열 내용 가운데 정렬) */
.nb-cols { flex: 1; min-height: 0; display: flex; }
.nb-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nb-col + .nb-col { border-left: 1px solid var(--line); } /* 가운데 SALES|CS 구분선 */
.nb-col-head { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 18px 4px; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.nb-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.nb-col-cnt { font-weight: 800; font-size: 12px; min-width: 24px; text-align: center; padding: 3px 9px; border-radius: 11px; }
.nb-col.sales .nb-col-title { color: #2f6fd0; }
.nb-col.sales .nb-col-dot { background: #3b7dd8; }
.nb-col.sales .nb-col-cnt { background: #e8f0fc; color: #2f6fd0; }
.nb-col.sales .nb-av { background: #e8f0fc; color: #2f6fd0; }
.nb-col.cs .nb-col-title { color: #c5341f; }
.nb-col.cs .nb-col-dot { background: #e0563f; }
.nb-col.cs .nb-col-cnt { background: #ffe6e1; color: #c5341f; }
.nb-col.cs .nb-av { background: #ffe6e1; color: #c5341f; }
/* 스크롤 없이: 카드가 많아 넘치면 세로폭이 줄며 전부 들어가게 */
.nb-list { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; overflow: hidden; }
.nb-item { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 15px; width: 100%; max-width: 500px; text-align: left; padding: 11px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-family: inherit; box-shadow: 0 1px 3px rgba(20, 30, 50, .05); transition: border-color .12s, box-shadow .12s, transform .06s; }
.nb-item:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20, 30, 50, .11); }
.nb-item:active { transform: scale(.995); }
.nb-av { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.nb-body { flex: 1; min-width: 0; }
.nb-name { font-weight: 700; font-size: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-msg { font-size: 13.5px; color: var(--text-sub); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-time { font-size: 12px; color: var(--text-sub); flex-shrink: 0; align-self: flex-start; margin-top: 3px; }
/* 열이 비었을 때: 허전하지 않게 아이콘+문구 중앙 정렬 */
.nb-col-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.nb-col-empty-ic { width: 48px; height: 48px; border-radius: 50%; background: #eef1f5; color: #aab3c0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.nb-col-empty-t { font-size: 13px; font-weight: 600; color: var(--text-sub); }
/* 둘 다 없을 때 전체 빈 상태 */
.nb-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-sub); }
.nb-empty-check { width: 46px; height: 46px; border-radius: 50%; background: #e8f6ee; color: #18a957; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
.nb-empty-t { font-size: 15px; font-weight: 700; color: var(--text); }
.nb-empty-s { font-size: 13px; }

/* 이전 메시지 불러오기 버튼 */
.load-more { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 12px; padding: 9px 20px; border: none; background: #6182f2; color: #fff; border-radius: 22px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(97, 130, 242, .32); transition: all .12s; }
.load-more svg { display: block; }
.load-more:hover { background: var(--accent); box-shadow: 0 3px 12px rgba(66, 99, 235, .4); }
.load-more:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* 스크롤바 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #d7dbe0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c4c9cf; }