/* bizCRM 슬림판 — 기존 bizCrm 화면(상단 헤더 · 남색 통화 제어 바 · 좌측 메뉴) 스타일. 칼럼·동작은 CRM 2.0(dcs.html)·엔콜 구조 그대로. */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #1677ff; --primary-dark: #0958d9; --primary-light: #e8f3ff;
  --bg: #f1f5f9; --card: #ffffff; --card2: #f8fafc;
  --text: #334155; --text-dim: #7b8796; --muted: #7b8796; --border: #e6ebf2;
  --title: #1d3554; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #ffffff; --elevated: #e8f3ff;
  --success: #16a34a; --warning: #f08c00; --danger: #e5484d;
  --x-pr: #1677ff; --x-title: #1d3554; --x-line: #e6ebf2; --x-soft: #f5f8fc;
}
html, body { height: 100%; }
body { font-family: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif; background: var(--bg); color: var(--text); height: 100vh; font-size: 13px; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--text-dim); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* 고객 전화번호(발신번호·수신번호·연락처): 상담내역과 같은 본문 글꼴(Pretendard 계열) 정자체 — 10-14 윤선님 요청(고정폭 글꼴이 읽기 어려움) */
.telno { font-family: inherit; font-style: normal; font-stretch: normal; }
.grow { flex: 1; min-width: 0; }
.x-ic { flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }

/* 앱 틀: 상단 헤더 → 통화 제어 바 → (좌측 메뉴 | 본문) */
.app-shell { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
.app-body { display: flex; flex: 1; min-height: 0; position: relative; }

/* 상단 헤더 (흰색) */
.topbar { height: 56px; background: #fff; border-bottom: 1px solid #e6ebf2; display: flex; align-items: stretch; flex-shrink: 0; z-index: 30; }
.topbar-brand { width: 220px; display: flex; align-items: center; justify-content: flex-start; padding: 0 16px; border-right: 1px solid #e6ebf2; overflow: hidden; flex-shrink: 0; transition: width .18s ease, padding .18s ease; }
body.side-collapsed .topbar-brand { width: auto; padding: 0 14px; }
.brand-inline { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; text-decoration: none !important; }
.topbar-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; }
.topbar-left-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: 6px; }
.tb-sel { width: auto; min-width: 200px; max-width: 280px; height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; background: #fff; font-size: 12.5px; color: var(--text); }
.tb-sel:disabled { background: #f8fafc; color: var(--text); opacity: 1; cursor: default; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; font-size: 12px; color: #64748b; }
.topbar-right .x-iconbtn { width: 36px; height: 36px; border-radius: 8px; color: #64748b; flex-shrink: 0; }
.topbar-right .x-apk-btn { width: auto; min-width: 36px; padding: 0 10px; }
.topbar-right .x-iconbtn:hover { background: #f3f4f6; color: #111827; }
html.theme-dark .topbar-brand { border-right-color: var(--border); }
html.theme-dark .topbar-right .x-iconbtn { color: var(--muted); }
html.theme-dark .topbar-right .x-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.tb-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.tb-live #clock { font-variant-numeric: tabular-nums; color: var(--text); }
.x-crumb { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; margin-right: 10px; }
.x-crumb i { font-style: normal; color: #a0acbb; }
.x-crumb b { color: var(--x-title); font-size: 14px; font-weight: 750; }
.x-iconbtn { position: relative; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); background: none; border: 1px solid transparent; }
.x-iconbtn:hover { background: var(--x-soft); color: var(--text); }
.x-dotn { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; border-radius: 8px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 3px; border: 1.5px solid #fff; }
.x-userchip { display: flex; align-items: center; gap: 7px; padding-left: 10px; border-left: 1px solid var(--x-line); line-height: 1.2; white-space: nowrap; text-align: left; }
.x-userchip b { display: block; font-size: 12px; color: var(--x-title); }
.x-userchip small { font-size: 10.5px; color: var(--muted); }
.x-userchip.x-userchip-btn { cursor: pointer; border-radius: 8px; padding: 3px 8px 3px 10px; }
.x-userchip.x-userchip-btn:hover { background: rgba(15, 23, 42, .06); }
.x-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, #4f8df9, #1f5fd1); flex-shrink: 0; }
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 4px 15px; border-radius: 6px; font-size: 13px; line-height: 1; border: 1px solid var(--x-line); background: #fff; color: var(--text); white-space: nowrap; cursor: pointer; }
.x-btn:hover { border-color: #9cc3ff; color: var(--x-pr); }
.x-btn.pr { background: var(--x-pr); border-color: var(--x-pr); color: #fff; }
.x-btn.pl { background: #e8f3ff; border-color: #cfe3ff; color: #0958d9; }
.x-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }

/* 통화 제어 바 (남색) */
.x-sp { min-height: 52px; background: linear-gradient(90deg, #0d2342 0%, #123360 60%, #15407a 100%); display: flex; align-items: center; padding: 5px 12px; gap: 10px; color: #fff; flex-shrink: 0; border-bottom: 1px solid #0a1c36; overflow-x: auto; scrollbar-width: none; }
html.callbar-off[data-view="main"] .x-sp { display: none; }
.x-sp::-webkit-scrollbar { display: none; }
.x-sp-state { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 184px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); height: 36px; border-radius: 8px; padding: 0 12px; white-space: nowrap; flex: none; cursor: default; }
.x-sp-state i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.12); flex: none; }
.x-sp-state b { font-size: 13px; flex: none; overflow: hidden; text-overflow: ellipsis; }
.x-sp-state .x-sp-t { flex: none; width: 78px; margin-left: auto; text-align: right; font-size: 12px; color: #9fb4d4; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.x-sp-ext { font-size: 11px; color: #9fb4d4; line-height: 1.25; white-space: nowrap; flex-shrink: 0; }
.x-sp-ext b { display: block; color: #fff; font-size: 13px; }
.x-sp-call { display: flex; align-items: center; gap: 12px; background: rgba(22,163,74,.16); border: 1px solid rgba(74,222,128,.35); border-radius: 8px; min-height: 38px; padding: 3px 12px; min-width: 230px; max-width: 420px; flex-shrink: 1; }
.x-sp-call.idle { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.x-sp-call.ring { background: rgba(250,173,20,.2); border-color: rgba(255,214,102,.6); animation: xpulse 1s infinite alternate; }
.x-sp-call.hold { background: rgba(250,140,22,.18); border-color: rgba(255,169,64,.55); }
.x-sp-cn { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-sp-cs { font-size: 10.5px; color: #a7f3c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-sp-call.idle .x-sp-cs { color: #9fb4d4; }
.x-sp-btns { display: flex; gap: 3px; flex-shrink: 0; }
.x-cb { width: 54px; height: 42px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; color: #dbe7f7; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 0; white-space: nowrap; }
.x-cb:hover:not(.dis) { background: rgba(255,255,255,.16); }
.x-cb.dis { opacity: .36; cursor: not-allowed; }
.x-sp-q { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.x-qi { background: rgba(255,255,255,.07); border-radius: 7px; padding: 3px 10px; text-align: center; border: 1px solid rgba(255,255,255,.1); color: #fff; min-width: 58px; }
.x-qi small { display: block; font-size: 10px; color: #9fb4d4; white-space: nowrap; }
.x-qi b { font-size: 15px; font-variant-numeric: tabular-nums; }
.x-qi.warn { background: rgba(229,72,77,.25); border-color: rgba(255,120,120,.5); }

/* 좌측 메뉴 */
.leftpanel { width: 220px; flex-shrink: 0; background: var(--surface-3); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; padding: 12px 10px; scrollbar-width: thin; }
.x-nav { display: flex; flex-direction: column; gap: 2px; min-height: 100%; }
.x-nav-g { margin-bottom: 4px; }
.x-nav-gt { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; font-size: 13px; font-weight: 700; color: var(--x-title); border-radius: 6px; background: none; border: 0; text-align: left; }
.x-nav-gt:hover { background: var(--x-soft); }
.x-nav-gt .x-cv { margin-left: auto; font-style: normal; color: #a0acbb; font-size: 10px; transition: transform .15s; }
.x-nav-g.closed .x-cv { transform: rotate(-90deg); }
.x-nav-g.closed .x-nav-items { display: none; }
.x-nav-g.has-on > .x-nav-gt { color: var(--x-pr); }
.x-nav-it { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 33px; font-size: 13px; color: var(--muted); border-radius: 6px; background: none; border: 0; text-align: left; white-space: nowrap; }
.x-nav-it:hover { background: var(--x-soft); color: var(--text); }
.x-nav-it.on { background: var(--elevated); color: var(--primary-dark); font-weight: 700; }
.x-nav-it.on:before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--x-pr); }
.x-nbdg { margin-left: auto; background: #ff4d4f; color: #fff; border-radius: 8px; font-size: 10px; font-weight: 800; padding: 0 6px; line-height: 16px; font-style: normal; }
.x-nav-foot { margin-top: auto; border-top: 1px solid var(--x-line); padding: 10px 6px 2px; font-size: 10.5px; color: #94a3b8; line-height: 1.5; }

/* 본문 · 페이지 제목 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 12px; overflow: auto; min-height: 0; }
.x-phd { display: flex; justify-content: space-between; align-items: center; gap: 4px 16px; flex-wrap: wrap; margin: 0 0 2px; flex-shrink: 0; }
.x-phd h1 { font-size: 22px; font-weight: 700; color: var(--x-title); letter-spacing: -.03em; margin: 0; }
.x-phd-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.x-phd-acts[hidden] { display: none; }
.x-phd .ds { flex: 1 0 100%; font-size: 13px; color: var(--muted); line-height: 1.45; }
.x-phd .ds[hidden] { display: none; }
#crmView, #listView { flex: 1; min-height: 520px; display: flex; flex-direction: column; gap: 10px; }
.top-row { display: grid; grid-template-columns: 1fr 1fr 360px; gap: 10px; min-height: 100px; }
.bottom-row { flex: 1; overflow: hidden; min-height: 320px; display: flex; }
@keyframes xpulse { from { box-shadow: 0 0 0 0 rgba(255,214,102,.0); } to { box-shadow: 0 0 0 3px rgba(255,214,102,.35); } }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.status-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); animation: pulse 2s infinite; }
.status-dot.offline { background: var(--danger); }
.notice-btn { padding: 4px 10px; border: 1px solid #f59e0b; border-radius: 6px; background: #fffbeb; color: #d97706; font-size: 11px; font-weight: 700; cursor: pointer; }
.notice-btn:hover { background: #fef3c7; }
.price-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; font-size: 10.5px; font-weight: 700; color: #92400e; }
.price-pill .pp-label { font-size: 9.5px; font-weight: 600; opacity: .7; }
.price-pill .pp-amt { color: #1d1d1f; font-weight: 800; font-size: 11.5px; }
.price-pill .pp-div { opacity: .4; margin: 0 2px; }
.ext-roster .er-item.on { background: var(--primary-light); outline: 1px solid var(--primary); }

.card { background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.card-header { padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-header h2 { font-size: 13px; font-weight: 700; }
.count-badge { font-size: 11px; color: var(--text-dim); font-weight: 400; }

/* 상담사 현황 줄 */
.ext-roster { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 13px; background: #fff; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; }
.ext-roster .er-title { font-weight: 700; color: var(--primary); margin-right: 4px; }
.ext-roster .er-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: #f4f5fb; border-radius: 20px; color: var(--text); cursor: pointer; }
.ext-roster .er-item:hover { background: var(--primary-light); }
.ext-roster .er-item b { color: var(--primary); font-weight: 700; }
.ext-roster .er-none { color: var(--text-dim); }

/* 대기 접수 카드 */
.live-calls { min-height: 50px; padding: 8px; max-height: 190px; overflow-y: auto; }
.call-item { background: var(--card2); border-radius: 10px; padding: 8px 12px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--border); border-left: 4px solid var(--warning); cursor: pointer; }
.call-item:hover { background: #f0f4ff; }
.call-item.ringing { border-left-color: var(--danger); animation: pulseCard 1.5s infinite; }
.call-item.connected { border-left-color: var(--success); }
.call-number { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.call-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.call-wait { font-size: 11px; font-weight: 700; color: var(--warning); white-space: nowrap; }
.call-item.ringing .call-wait { color: var(--danger); }
.no-calls { text-align: center; padding: 14px; color: var(--text-dim); font-size: 12px; }
.site-row { display: grid; grid-template-columns: 1fr 52px 52px 52px; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.site-row:hover { background: #f0f4ff; }
.site-row.head { cursor: default; font-size: 10px; color: var(--text-dim); font-weight: 700; }
.site-row.head:hover { background: none; }
.site-row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.site-row .red { color: var(--danger); font-weight: 700; }

/* 통계 */
.stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; padding: 8px 10px; }
.stat-box { background: var(--card2); border-radius: 10px; padding: 10px 6px; text-align: center; border: 1px solid var(--border); cursor: pointer; }
.stat-box:hover { border-color: var(--primary); }
.stat-num { font-size: 18px; font-weight: 700; }
.stat-num.blue { color: var(--primary); } .stat-num.green { color: var(--success); }
.stat-num.yellow { color: var(--warning); } .stat-num.red { color: var(--danger); }
.stat-label { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.stat-foot { padding: 0 12px 8px; font-size: 11px; color: var(--text-dim); }
.stat-foot b.red { color: var(--danger); }

/* 접수 목록 */
.history-section { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.filter-bar { padding: 7px 12px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--card2); }
.filter-bar input[type="date"], .filter-bar input[type="text"], .filter-bar select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; color: var(--text); background: #fff; }
.filter-bar input[type="text"] { width: 130px; }
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--primary); }
.filter-sep { width: 1px; height: 18px; background: var(--border); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.filter-chip { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text-dim); user-select: none; }
.filter-chip .chip-n { margin-left: 4px; font-weight: 800; font-variant-numeric: tabular-nums; color: #1677ff; }
.filter-chip.active .chip-n { color: #fff; }
.filter-chip.active { color: #fff; border-color: transparent; background: var(--primary); }
.filter-chip.active.c-new { background: #f59e0b; } .filter-chip.active.c-working { background: #2563eb; } .filter-chip.active.c-done { background: #16a34a; } .filter-chip.active.c-dup { background: #d97706; }
.range-btn { padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text-dim); user-select: none; }
.range-btn:hover { border-color: var(--primary); color: var(--primary); }
.range-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.sum-bar { padding: 5px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--border); gap: 8px; flex-wrap: wrap; }
.sum-bar b { color: var(--text); }
.live { display: inline-flex; align-items: center; gap: 5px; }
.btn-refresh { background: #fff; border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 3px 10px; font-size: 10px; cursor: pointer; font-weight: 600; }
.btn-refresh:hover { border-color: var(--primary); color: var(--primary); }
.btn-refresh.pr { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-refresh.pr:hover { background: var(--primary-dark); color: #fff; }
.btn-refresh.cy { background: #0891b2; color: #fff; border-color: #0891b2; }
.history-table-wrap { flex: 1; overflow: auto; min-height: 0; position: relative; }
table.htbl { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 12px; table-layout: auto; }
table.htbl thead { position: sticky; top: 0; z-index: 2; }
table.htbl th { background: var(--card2); padding: 8px 6px; text-align: center; font-weight: 700; font-size: 11px; color: var(--text-dim); border-bottom: 2px solid var(--border); white-space: nowrap; overflow: hidden; }
table.htbl td { padding: 6px 6px; text-align: center; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; overflow: hidden; }
table.htbl tr:hover td { background: #f0f4ff; }
table.htbl tr.row-new td { background: #fffdf5; }
table.htbl tr.dup-row td { background: #fefce8; }
table.htbl tr.test-row td { opacity: .75; }
.td-time { color: var(--text-dim); font-size: 11px; line-height: 1.35; }
.td-phone { font-weight: 600; font-size: 13px; letter-spacing: 0.5px; }
.td-agent { color: var(--primary); font-weight: 600; font-size: 11px; }
.td-w { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
table.htbl th.th-chk, table.htbl td.td-chk { width: 32px; }
table.htbl th.th-act, table.htbl td.td-act { width: 96px; white-space: normal; }
table.htbl th.th-hist, table.htbl td.td-hist { width: 42%; min-width: 360px; text-align: left; vertical-align: top; }
table.htbl td.td-hist { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; line-height: 1.45; padding: 8px 10px; }
.td-sub { display: block; font-size: 10px; color: var(--text-dim); }
.td-act { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.td-act .btn-sm { width: 100%; }
.dup-badge { font-size: 9px; color: #d97706; font-weight: 700; margin-left: 4px; cursor: pointer; }
.memo-c { font-size: 10px; color: #7c3aed; font-weight: 700; margin-left: 3px; }
.tag-item { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #1e293b; background: #e2e8f0; line-height: 16px; }
.st-상담신청 { background: #f59e0b; } .st-상담중 { background: #2563eb; } .st-상담완료 { background: #16a34a; }
.st-재전 { background: #8b5cf6; } .st-접수완료 { background: #16a34a; } .st-상담종료 { background: #2563eb; }
.st-취소 { background: #dc2626; } .st-불량 { background: #64748b; } .st-제외 { background: #334155; }
.st-reentry { background: #db2777; } .tag-item.st-reentry { color: #fff; }
.dnis-chip { display: block; margin-top: 2px; line-height: 1; } .dnis-chip .route-chip { font-size: 10px; padding: 1px 6px; }
.co-sub { margin: 10px 0 4px; font-size: 12px; } .rl-in { width: 110px; }
.route-chip { display: inline-block; padding: 1px 7px; border-radius: 8px; background: #7c3aed; color: #fff; font-size: 11px; font-weight: 700; }
.st-신콜 { background: #f59e0b; } .st-간편 { background: #2563eb; } .st-아웃 { background: #0891b2; } .st-발신 { background: #0e7490; }
.tag-display { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.tag-add { color: #94a3b8; font-size: 10px; cursor: pointer; padding: 0 4px; border: 1px dashed #cbd5e1; border-radius: 4px; line-height: 16px; }
.tag-pick { cursor: pointer; }
.tag-pick:not([class*="st-"]) { color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; }
.tag-dropdown { position: fixed; z-index: 200; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 4px; min-width: 100px; display: flex; flex-direction: column; gap: 2px; }
.tag-opt { padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #1e293b; background: #e2e8f0; cursor: pointer; text-align: center; }
.tag-opt:hover { filter: brightness(1.08); }
.tag-item.st-재전, .tag-item.st-접수완료, .tag-item.st-상담종료, .tag-item.st-취소, .tag-item.st-불량, .tag-item.st-제외, .tag-item.st-신콜, .tag-item.st-간편, .tag-item.st-아웃, .tag-item.st-발신,
.tag-opt.st-재전, .tag-opt.st-접수완료, .tag-opt.st-상담종료, .tag-opt.st-취소, .tag-opt.st-불량, .tag-opt.st-제외, .tag-opt.st-신콜, .tag-opt.st-간편, .tag-opt.st-아웃, .tag-opt.st-발신 { color: #fff; }
.tag-opt.st-재전 { background: #8b5cf6; } .tag-opt.st-접수완료 { background: #16a34a; } .tag-opt.st-상담종료 { background: #2563eb; }
.tag-opt.st-취소 { background: #dc2626; } .tag-opt.st-불량 { background: #64748b; } .tag-opt.st-제외 { background: #334155; }
.tag-opt.st-신콜 { background: #f59e0b; } .tag-opt.st-간편 { background: #2563eb; } .tag-opt.st-아웃 { background: #0891b2; } .tag-opt.st-발신 { background: #0e7490; }
.agent-select { border: none; background: transparent; color: var(--primary); font-weight: 600; font-size: 11px; font-family: inherit; cursor: pointer; max-width: 100%; }
.edit-cell { width: 100%; border: none; background: transparent; text-align: center; font-size: 11px; color: var(--text); padding: 3px 4px; border-bottom: 1px dashed #d0d5dd; }
.edit-cell:focus { outline: none; background: var(--primary-light); border-radius: 4px; }
.call-dir { display: inline-block; min-width: 16px; height: 16px; border-radius: 4px; text-align: center; line-height: 16px; font-size: 8px; font-weight: 800; margin-right: 4px; vertical-align: middle; padding: 0 3px; }
.call-dir.in { background: #dbeafe; color: #2563eb; } .call-dir.out { background: #fef3c7; color: #d97706; }
.call-dir.missed { background: #fee2e2; color: #dc2626; } .call-dir.nk { background: #ede9fe; color: #7c3aed; } .call-dir.sm { background: #ccfbf1; color: #0d9488; }
.memo-preview { display: block; font-size: 11px; line-height: 1.45; text-align: left; white-space: normal; word-break: break-word; }
.memo-empty { color: #cbd5e1; font-size: 10px; }
.memo-important { color: #dc2626; font-weight: 800; } .memo-blue { color: #2563eb; font-weight: 700; }
.memo-green { color: #16a34a; font-weight: 700; } .memo-bold { font-weight: 800; color: #1e293b; }
.memo-orange { color: #d97706; font-weight: 700; } .memo-purple { color: #7c3aed; font-weight: 700; }
.info-filled-badge { display: inline-block; margin-left: 3px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #15803d; background: #dcfce7; }
table.crmt { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
table.crmt col.c-time { width: 112px; } table.crmt col.c-phone { width: 128px; } table.crmt col.c-agent { width: 96px; }
table.crmt col.c-type { width: 118px; } table.crmt col.c-name { width: 120px; } table.crmt col.c-tag { width: 128px; } table.crmt col.c-del { width: 40px; }
table.crmt thead { position: sticky; top: 0; z-index: 2; }
table.crmt th { background: var(--card2); padding: 8px 6px; text-align: center; font-weight: 700; font-size: 11px; color: var(--text-dim); border-bottom: 2px solid var(--border); white-space: nowrap; overflow: hidden; }
table.crmt td { padding: 6px 6px; text-align: center; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; overflow: hidden; }
table.crmt tr:hover td { background: #f0f4ff; }
table.crmt td.tags-cell { white-space: normal; text-align: left; }
table.crmt th.th-memo, table.crmt td.memo-td { text-align: left; vertical-align: top; white-space: normal; word-break: break-word; overflow-wrap: anywhere; border-left: 2px solid #94a3b8; }
table.crmt td.memo-td { cursor: pointer; padding: 8px 10px; }
table.crmt td.td-phone.missed { color: var(--danger); }
.test-badge { display: inline-block; padding: 0 5px; border-radius: 5px; font-size: 9px; font-weight: 700; color: #c2410c; background: #ffedd5; margin-left: 3px; }
.kind-badge { display: inline-block; padding: 0 5px; border-radius: 5px; font-size: 9px; font-weight: 700; color: var(--text-dim); background: #eef2f7; }
.btn-sm { border: none; border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; background: #eef2f7; color: var(--text); }
.btn-sm:hover { filter: brightness(.95); }
.btn-sm:disabled { opacity: .5; cursor: default; }
.btn-sm.pr { background: #2563eb; color: #fff; } .btn-sm.gr { background: var(--success); color: #fff; } .btn-sm.dg { background: var(--danger); color: #fff; }
.list-foot { padding: 6px 12px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.pager { display: flex; align-items: center; gap: 3px; font-size: 11px; margin-left: auto; }
.pager button { min-width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: #fff; font-size: 11px; cursor: pointer; color: var(--text); }
.pager button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.pager .muted { margin-left: 8px; }

/* 로딩 막대 */
.loading { padding: 34px 12px; text-align: center; color: var(--text-dim); font-size: 12px; }
.loading .bar { width: 220px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--primary-light); overflow: hidden; position: relative; }
.loading .bar::after { content: ""; position: absolute; left: -40%; top: 0; height: 100%; width: 40%; background: var(--primary); border-radius: 4px; animation: loadbar 1.1s ease-in-out infinite; }
.top-loading { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; z-index: 3; }
.top-loading::after { content: ""; position: absolute; left: -30%; width: 30%; height: 100%; background: var(--primary); animation: loadbar 1s ease-in-out infinite; }

/* 모달 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.38); z-index: 400; display: flex; align-items: center; justify-content: center; animation: ciFadeIn .15s ease; }
.modal-overlay.modal-float { background: transparent; pointer-events: none; }
.modal-overlay.modal-float .ci-modal { pointer-events: auto; }
.ci-modal { background: #fff; border-radius: 16px; width: 680px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.25); animation: ciSlideUp .2s ease; }
.ci-modal.sm { width: 420px; } .ci-modal.lg { width: 880px; }
.ci-modal.ci-drag { position: fixed; margin: 0; animation: none; transform: none; }
.ci-header { padding: 5px 10px 5px 14px; min-height: 36px; border-bottom: 0; background: #2563eb; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: grab; user-select: none; touch-action: none; }
.ci-header:active { cursor: grabbing; }
.ci-header h3 { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; display: flex; align-items: center; gap: 8px; }
.ci-header h3 * { color: inherit; }
.ci-close { width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: #fff; font-size: 15px; cursor: pointer; }
.ci-close:hover { background: rgba(255,255,255,.2); color: #fff; }
.ci-body { flex: 1; overflow-y: auto; padding: 14px 20px; font-size: 12px; }
.ci-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ci-btn { padding: 8px 18px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; background: var(--card2); color: var(--text-dim); border: 1px solid var(--border); }
.ci-btn.pr { background: var(--primary); color: #fff; border-color: var(--primary); }
.ci-btn.gr { background: var(--success); color: #fff; border-color: var(--success); }
.ci-btn.dg { background: var(--danger); color: #fff; border-color: var(--danger); }
.ci-section-title { font-size: 12px; font-weight: 700; color: var(--primary); margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--primary-light); }
.ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ci-grid.c3 { grid-template-columns: 1fr 1fr 1fr; }
.ci-field label { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 3px; font-weight: 600; }
.ci-field input, .ci-field select, .ci-field textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; background: #fff; }
.ci-field input:focus, .ci-field select:focus, .ci-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.ci-field.full { grid-column: 1 / -1; }
.ci-field input.inv { border-color: var(--danger); }
/* 등록 팝업 양식 — 구역 제목 + 표 칸. 상담메모 팝업은 이 클래스를 쓰지 않는다. */
.fm { border: 1px solid #d7dbe3; background: #fff; margin: 0 0 10px; }
.fm-h { margin: 0; padding: 7px 10px; font-size: 13px; font-weight: 700; color: #1f2937; background: #fff; border-bottom: 1px solid #e6e8ee; display: flex; align-items: center; gap: 6px; }
.fm-h::before { content: "✓"; color: #e11d48; font-size: 14px; line-height: 1; }
.fm-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fm-t th { width: 108px; background: #f4f6f8; color: #374151; font-weight: 600; font-size: 12px; text-align: center; padding: 5px 8px; border: 1px solid #e3e6ec; vertical-align: middle; }
.fm-t td { background: #fff; border: 1px solid #e3e6ec; padding: 4px 6px; vertical-align: middle; }
.fm-t input, .fm-t select, .fm-t textarea { width: 100%; box-sizing: border-box; height: 28px; border: 1px solid #cfd5de; border-radius: 2px; background: #fff; color: #111; padding: 2px 8px; font-size: 12px; box-shadow: none; }
.fm-t textarea { height: auto; min-height: 64px; padding: 6px 8px; resize: vertical; }
.fm-t .pw-edit { display: flex; gap: 6px; align-items: center; }
.fm-t .pw-edit input { flex: 1; min-width: 0; width: auto; }
.fm-t .pw-edit .btn-sm { height: 28px; flex: none; }
.fm-t input.inv { border-color: var(--danger); }
.fm-t .cfg-row { margin: 0; align-items: center; }
.fm-t .cfg-row input { width: auto; height: auto; margin: 0; }
.fm-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
html.theme-dark .fm { background: var(--card); border-color: var(--border); }
html.theme-dark .fm-h { background: var(--card); color: var(--text); border-color: var(--border); }
html.theme-dark .fm-t th { background: #2a3142; color: var(--text); border-color: var(--border); }
html.theme-dark .fm-t td { background: var(--card); border-color: var(--border); }
html.theme-dark .fm-t input, html.theme-dark .fm-t select, html.theme-dark .fm-t textarea { background: #1c2230; color: var(--text); border-color: var(--border); }
.kv { display: grid; grid-template-columns: 110px 1fr 110px 1fr; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.kv dt, .kv dd { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.kv dt { background: var(--card2); color: var(--text-dim); font-weight: 600; font-size: 11px; }
.kv dd { word-break: break-all; }
.warn-box { padding: 8px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; margin: 10px 0; line-height: 1.6; }
.info-box { padding: 8px 12px; border-radius: 10px; background: #f0f9ff; border: 1px solid #bae6fd; color: #075985; margin: 8px 0; line-height: 1.6; }
.help { font-size: 11px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
table.stbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.stbl th { text-align: left; background: var(--card2); color: var(--text-dim); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.stbl td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.stbl td.wrap { white-space: pre-wrap; word-break: break-all; }
.memo-input-wrap { display: flex; gap: 6px; margin-top: 10px; align-items: flex-start; }
.memo-input-wrap textarea { flex: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; resize: vertical; min-height: 44px; }
.pre { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 8px 10px; font-size: 11px; white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow: auto; margin-top: 6px; }
.row-flex { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-flex input { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; }

/* 토스트 */
#toasts { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); z-index: 600; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; box-sizing: border-box; width: 100%; max-width: 440px; text-align: center; background: #1565c0; color: #fff; padding: 14px 18px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; box-shadow: 0 12px 40px rgba(15,23,42,.28); animation: toastIn .18s ease; }
.toast.ok { background: #1565c0; }
.toast.err, .toast.warn { background: #c62828; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes pulseCard { 0%,100%{ background:var(--card2); } 50%{ background:#fef2f2; } }
@keyframes loadbar { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes ciFadeIn { from{opacity:0} to{opacity:1} }
@keyframes ciSlideUp { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

@media (max-width: 1100px) {
  .top-row { grid-template-columns: 1fr 1fr; }
  .top-row > .card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body { height: auto; min-height: 100vh; }
  .main { overflow: visible; }
  .top-row { grid-template-columns: 1fr; }
  .bottom-row { min-height: 70vh; }
  .kv { grid-template-columns: 90px 1fr; }
  .ci-grid, .ci-grid.c3 { grid-template-columns: 1fr; }
}

/* 상담관리 목록 — 엔콜 고객상담목록 칼럼(번호·상담날짜·예약날짜·발신번호·수신번호·분류·진행상황·고객명·상담회수·상담자·SMS·상담내역) */
table.crmt.nc { min-width: 1320px; }
table.crmt.nc col.c-no { width: 54px; } table.crmt.nc col.c-time { width: 132px; } table.crmt.nc col.c-resv { width: 92px; }
table.crmt.nc col.c-phone { width: 122px; } table.crmt.nc col.c-dnis { width: 124px; } table.crmt.nc col.c-type { width: 96px; }
table.crmt.nc col.c-tag { width: 150px; } table.crmt.nc col.c-name { width: 96px; } table.crmt.nc col.c-cnt { width: 60px; }
table.crmt.nc col.c-agent { width: 96px; } table.crmt.nc col.c-sms { width: 48px; }
table.crmt td.td-no { color: var(--text-dim); font-size: 11px; }
table.crmt .crm-no { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
table.crmt .crm-sel, table.crmt .crm-no input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: #2563eb; flex: none; }
table.crmt td.td-time .td-date { color: var(--text-dim); font-size: 11px; margin-right: 2px; }
table.crmt td.td-resv { font-size: 11px; }
table.crmt td.memo-td { cursor: pointer; }
.resv-on { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #fef3c7; color: #92400e; font-weight: 700; }
table.crmt td.td-dnis, table.crmt td.td-phone { font-size: 11px; line-height: 1.35; }
table.crmt td.td-dnis { white-space: normal; }
table.crmt td.td-phone { font-weight: 400; letter-spacing: 0; }
table.crmt td.td-dnis .td-sub { display: block; }
.dnis-site { display: inline-block; padding: 1px 6px; border-radius: 6px; background: #e0f2fe; color: #075985; font-weight: 700; }
.dnis-site.s-nationcompany { background: #ede9fe; color: #5b21b6; }
.dnis-site.s-tdanawa { background: #ffedd5; color: #c2410c; }
.lead-st { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff; line-height: 16px; margin: 0 4px 2px 0; text-decoration: none; }
.lead-st.st-삭제 { background: #94a3b8; }
table.crmt td.td-cnt a, table.crmt td.td-phone a { color: inherit; text-decoration: none; }
table.crmt td.td-cnt a { border-bottom: 1px dashed #94a3b8; }
table.crmt td.td-phone a { cursor: pointer; }
.sms-c { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 9px; background: #dcfce7; color: #166534; font-weight: 700; font-size: 11px; }
.flt-label { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-right: 2px; }
#crmFlt select { max-width: 150px; }

/* 로그목록 · 환경설정 · 납부내역 */
#logsView .card, #payView .card { margin-top: 10px; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; margin-top: 10px; }
.cfg-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cfg-row { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; cursor: pointer; }
.cfg-row input { margin-top: 4px; }

/* 회사·부서 */
.co-switch { padding: 3px 6px; border: 1px solid #6366f1; border-radius: 6px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 700; }
.co-tag { padding: 2px 8px; border-radius: 10px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 700; }
.co-card { margin-top: 12px; }
.co-tbl td, .co-tbl th { white-space: nowrap; }
.co-tbl select { max-width: 180px; }
.neg { color: #dc2626; font-weight: 700; }
#coWrap { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 12px; align-items: start; }
#coWrap .co-card { margin-top: 0; overflow: hidden; }
#coWrap .co-card > .cfg-body { overflow-x: auto; }
#coWrap .co-card { grid-column: 1 / -1; }
#coWrap .co-card.half { grid-column: auto; }
.co-tbl td, .co-tbl th { text-align: left; }
.cfg-body > button.btn-sm { align-self: flex-start; }

/* 기존 bizCrm 타이틀 로고 */
.brand-mark { display: block; height: 34px; width: auto; object-fit: contain; flex: 0 0 auto; }
.brand-word { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; font-weight: 600; font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; background-image: linear-gradient(180deg, #d9bf7c 0%, #b8913f 40%, #8a6a2c 70%, #a8843f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ===== 기존 bizCrm 카드·표·버튼 톤 (x-card / x-tbl / x-btn) ===== */
.card { border-radius: 8px; border-color: var(--x-line); box-shadow: none; }
.card-header { padding: 10px 14px; border-bottom-color: var(--x-line); }
.card-header h2 { font-size: 13.5px; font-weight: 750; color: var(--x-title); }
.count-badge { font-size: 11.5px; color: var(--muted); }
.ext-roster { border-radius: 8px; border-color: var(--x-line); }
.ext-roster .er-title { color: var(--x-title); }
.ext-roster .er-item { background: var(--x-soft); border: 1px solid var(--x-line); }
.filter-bar { padding: 10px 14px; background: #fff; gap: 6px; }
.filter-bar input[type="date"], .filter-bar input[type="text"], .filter-bar select { height: 30px; padding: 0 8px; border-radius: 6px; font-size: 12px; border-color: var(--x-line); }
.filter-bar input[type="text"] { width: 150px; }
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--x-pr); outline: 2px solid #bfdbfe; }
.range-btn, .filter-chip { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 13px; font-size: 11.5px; border-color: var(--x-line); }
.range-btn.active, .filter-chip.active { background: var(--x-pr); border-color: var(--x-pr); }
.filter-chip.active.c-new { background: #e5484d; } .filter-chip.active.c-working { background: #f08c00; } .filter-chip.active.c-done { background: #16a34a; } .filter-chip.active.c-dup { background: #d97706; }
.flt-label { font-size: 12px; font-weight: 400; color: var(--muted); }
.sum-bar { padding: 8px 14px; font-size: 12px; color: var(--muted); }
.sum-bar b { color: var(--x-title); }
.btn-refresh { height: 32px; padding: 0 12px; border-radius: 4px; font-size: 13px; font-weight: 600; color: #374151; border-color: #d1d5db; background: #fff; }
.btn-refresh:hover { border-color: #d1d5db; color: #374151; background: #f8fafc; }
.btn-refresh.pr { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-refresh.pr:hover { background: #1d4ed8; color: #fff; }
.btn-refresh.cy { background: #e8f3ff; border-color: #cfe3ff; color: #0958d9; }
table.htbl th, table.crmt th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12px; padding: 9px 7px; border-bottom: 1px solid var(--x-line); }
table.htbl td, table.crmt td { padding: 8px 7px; border-bottom-color: var(--x-line); color: var(--text); }
table.htbl tr:hover td, table.crmt tr:hover td { background: #f4f8ff; }
table.htbl tr.row-new td { background: #fffafa; }
.td-phone { font-weight: 400; font-size: 11px; letter-spacing: 0; color: var(--text); }
.td-agent, .agent-select { color: var(--text); font-weight: 500; }
.td-time { color: var(--text); font-size: 11.5px; }
/* 상태: 기존 bizCrm 목록처럼 색 글자 (상담신청 빨강 · 상담중 주황 · 상담완료 초록) */
.tag-item.st-상담신청, .tag-item.st-상담중, .tag-item.st-상담완료 { background: none; padding: 0; font-size: 12px; font-weight: 800; }
.tag-item.st-상담신청 { color: #e5484d; } .tag-item.st-상담중 { color: #f08c00; } .tag-item.st-상담완료 { color: #16a34a; }
.lead-st.st-상담신청 { background: #fff1f0; color: #cf1322; } .lead-st.st-상담중 { background: #fff4e5; color: #c2410c; } .lead-st.st-상담완료 { background: #e7f7ed; color: #15803d; }
.tag-opt.st-상담신청 { background: #e5484d; color: #fff; } .tag-opt.st-상담중 { background: #f08c00; color: #fff; } .tag-opt.st-상담완료 { background: #16a34a; color: #fff; }
.stat-num.yellow { color: #f08c00; } .stat-num.red { color: #e5484d; } .stat-num.blue { color: var(--x-pr); }
.stat-box, .call-item { border-radius: 8px; border-color: var(--x-line); }
/* 처리 버튼: 상담관리 목록(.bx-btn)과 같은 흰 테두리. 상담 시작 = 파랑, 완료 = 초록 */
.btn-sm, a.btn-sm { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1; background: #fff; color: #374151; border: 1px solid #d1d5db; text-decoration: none; vertical-align: middle; }
.btn-sm:hover, a.btn-sm:hover { filter: none; border-color: #d1d5db; color: #374151; background: #f8fafc; text-decoration: none; }
.btn-sm.pr, a.btn-sm.pr { background: #2563eb; border-color: #2563eb; color: #fff; } .btn-sm.pr:hover, a.btn-sm.pr:hover { background: #1d4ed8; color: #fff; }
.btn-sm.gr { background: #16a34a; border-color: #16a34a; color: #fff; } .btn-sm.gr:hover { color: #fff; filter: brightness(1.06); background: #16a34a; }
.btn-sm.dg { background: #fff; border-color: #fecaca; color: #b91c1c; } .btn-sm.dg:hover { background: #fff; color: #b91c1c; border-color: #fecaca; }
.td-act { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.td-act .btn-sm { width: auto; }
table.htbl th.th-act, table.htbl td.td-act { width: 190px; }
.pager button { height: 28px; min-width: 28px; border-radius: 6px; border-color: var(--x-line); }
.pager button.on { background: var(--x-pr); border-color: var(--x-pr); }
.list-foot { border-top-color: var(--x-line); }
.ci-modal { border-radius: 10px; }
.ci-header h3 { color: #fff; font-weight: 700; }
.ci-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1; background: #fff; color: #374151; border: 1px solid #d1d5db; }
.ci-btn.pr { background: #2563eb; border-color: #2563eb; color: #fff; }
.ci-btn.pr:hover { background: #1d4ed8; }
.ci-btn.dg { background: #fff; border-color: #fecaca; color: #b91c1c; }
.price-pill { border-radius: 14px; }
.co-switch { height: 28px; border-radius: 6px; border-color: #b9d7ff; background: #e8f3ff; color: #0958d9; }
.co-tag { background: #e8f3ff; color: #0958d9; padding: 3px 10px; }
.cfg-grid, #logsView .card, #payView .card { margin-top: 0; }

/* 로그인 (기존 bizCrm login.html) */
.login-body { background: #1e3a6b; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #1e3a6b; padding: 24px; }
.login-box { width: 400px; max-width: 100%; background: #fff; color: #0f172a; border-radius: 16px; padding: 36px 36px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.login-logo img { display: block; height: 64px; width: auto; object-fit: contain; }
.login-logo .brand-word { font-size: 30px; }
.login-brand p { margin: 12px 0 0; font-size: 14px; color: #64748b; }
.login-box .field { margin-bottom: 14px; }
.login-box .field label { display: block; margin: 0 0 6px; font-size: 12px; color: #64748b; }
.login-box .field input { width: 100%; border: 1px solid #e2e8f0; background: #f8fafc; color: #0f172a; border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none; }
.login-box .field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
.login-error { color: #dc2626; font-size: 12px; margin: 4px 0 0; }
.login-submit { width: 100%; margin-top: 10px; border: none; border-radius: 8px; padding: 11px 14px; font-size: 14px; font-weight: 600; background: #2563eb; color: #fff; cursor: pointer; }
.login-submit:hover { background: #1d4ed8; }
.login-demo { margin: 16px 0 0; font-size: 12px; color: #64748b; text-align: center; }

/* 좁은 화면 */
@media (max-width: 1280px) {
  .x-crumb { display: none; }
  .tb-live #liveText, .price-pill .pp-label { display: none; }
  .x-sp-ext, .x-sp-q .x-qi:nth-child(3) { display: none; }
}
@media (max-width: 1100px) {
  .leftpanel, .topbar-brand { width: 180px; }
  .price-pill, .tb-lbl { display: none; }
  .x-userchip span:not(.x-av) { display: none; }
  .tb-sel { width: auto; min-width: 168px; max-width: 220px; }
}
@media (max-width: 720px) {
  .app-shell { height: auto; min-height: 100vh; }
  .app-body { flex-direction: column; }
  .leftpanel { width: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 6px; }
  .x-nav { flex-direction: row; flex-wrap: wrap; min-height: 0; }
  .x-nav-gt, .x-nav-foot { display: none; }
  .x-nav-it { padding: 6px 10px; width: auto; }
  .topbar-brand { width: auto; border-right: 0; }
  .topbar-left-tools, .tb-live { display: none; }
  .main { overflow: visible; padding: 10px; }
}

/* ===== 간편문의 › 접수 목록 — 원스마트 ones-intake(webui.py) 접수 목록 그대로: 한 줄 필터 · 요약 · 촘촘한 격자 표 ===== */
.ot-list { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #ddd; padding: 12px; color: #30343b; }
.ot-filters { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; background: #f8f9fa; padding: 10px; border: 1px solid #ddd; font-size: 12px; }
.ot-filters label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ot-filters input, .ot-filters select { border: 1px solid #cbd0d8; background: #fff; border-radius: 3px; padding: 5px 6px; font-size: 12px; height: 29px; color: #30343b; }
.ot-filters select { max-width: 170px; }
.ot-filters input[type=search] { width: 155px; }
.ot-btn { border: 1px solid #c9cdd3; background: #fff; color: #30343b; border-radius: 3px; padding: 5px 11px; font-size: 12px; cursor: pointer; line-height: 1.3; white-space: nowrap; }
.ot-btn:hover { background: #f4f5f7; }
.ot-btn.dark { background: #414b5b; border-color: #414b5b; color: #fff; }
.ot-btn.dark:hover { background: #353d4a; }
.ot-btn.danger { color: #b52727; border-color: #d8b8b8; }
.ot-btn:disabled { opacity: .5; cursor: default; }
.ot-btn.sm { padding: 2px 8px; font-size: 11px; margin-left: 6px; }
.ot-live { margin: 8px 0 0; font-size: 11px; color: #7e8793; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ot-x { display: inline-block; padding: 0 7px; border: 1px solid #d8b8b8; border-radius: 3px; color: #b52727; background: #fff7f7; cursor: pointer; font-size: 11px; }
.ot-summary { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-size: 12px; color: #68717f; gap: 10px; flex-wrap: wrap; }
.ot-summary b { color: #30343b; }
.ot-sr { display: inline-flex; align-items: center; }
.ot-scroll { flex: 1; min-height: 200px; overflow: auto; border: 1px solid #d6d6d6; position: relative; }
table.ot-table { border-collapse: collapse; width: 100%; min-width: 1100px; table-layout: fixed; text-align: center; white-space: normal; }
table.ot-table thead { position: sticky; top: 0; z-index: 2; }
table.ot-table th { background: #f4f4f4; font-size: 10.5px; font-weight: 500; color: #404040; padding: 8px 3px; line-height: 1.35; }
table.ot-table th, table.ot-table td { border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e5e5e5; }
table.ot-table td { padding: 7px 4px; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; word-break: keep-all; vertical-align: middle; color: #30343b; }
table.ot-table tr:hover td { background: #fafbfc; }
table.ot-table tr.test-row td { opacity: .7; }
table.ot-table a { color: #354a68; }
table.ot-table a.nm { color: #30343b; }
table.ot-table input[type=checkbox] { margin: 0; width: 13px; height: 13px; accent-color: #475568; }
table.ot-table .new { color: #e33c35; font-weight: 600; white-space: nowrap; }
table.ot-table .working { color: #a5710b; white-space: nowrap; }
table.ot-table .done { color: #237453; white-space: nowrap; }
table.ot-table .stamp { display: block; white-space: nowrap; font-size: 10.5px; letter-spacing: -.2px; }
table.ot-table .cell-phone { white-space: nowrap; font-size: 10.5px; letter-spacing: -.3px; }
table.ot-table .cell-device { white-space: nowrap; font-size: 10.5px; }
table.ot-table .cell-actions { display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; }
table.ot-table .cell-actions button { border: 1px solid #c9cdd3; background: #fff; color: #30343b; border-radius: 3px; padding: 4px 5px; font-size: 10.5px; line-height: 1.35; margin: 2px 0; white-space: nowrap; cursor: pointer; }
table.ot-table .cell-actions button:hover { background: #f4f5f7; }
table.ot-table .cell-actions button:disabled { opacity: .5; }
table.ot-table td.empty { padding: 36px 20px; color: #828995; text-align: left; }

/* ===== 대시보드 · 보드 화면 카드 격자 (Bizcare 대시보드: 흰 카드, 숫자 칸, 2열 그리드) ===== */
#dashView { display: flex; flex-direction: column; gap: 22px; }
#dashView[hidden] { display: none !important; }
.dash-sec { display: flex; flex-direction: column; gap: 14px; }
.dash-h { margin: 0; font-size: 15px; font-weight: 800; color: var(--x-title); display: flex; align-items: baseline; gap: 8px; letter-spacing: -.02em; }
.dash-h span { font-size: 12px; font-weight: 500; color: var(--muted); }
.bx-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bx-metric { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.05); padding: 14px 16px 16px; min-height: 108px; cursor: pointer; display: flex; flex-direction: column; }
.bx-metric:has(.stat-dd-pop:not([hidden])) { position: relative; z-index: 6; }
.bx-metric:hover { border-color: var(--primary); }
.bx-metric .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bx-metric .stat-label { font-size: 13px; font-weight: 700; color: var(--text-dim); text-align: left; }
.stat-dd { position: relative; flex: 0 0 auto; }
.stat-dd-btn { height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-dd-btn:hover { border-color: var(--primary); }
.stat-dd-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; width: 220px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.14); }
.stat-dd-tools { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); }
.stat-dd-tools button { flex: 1; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.stat-dd-tools button:hover { border-color: var(--primary); color: var(--primary); }
.stat-dd-list { max-height: 240px; overflow: auto; padding: 4px 0; }
.stat-dd-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.stat-dd-row:hover { background: rgba(37,99,235,.06); }
.stat-dd-row input { margin: 0; }
.stat-dd-empty { padding: 10px; font-size: 12px; color: var(--muted); }
.bx-metric .stat-num { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin-top: 10px; text-align: left; }
.bx-metric .stat-sub { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--muted); }
.bx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
#dashView .card, #dcsView .card, #dcsctlView .card, #astView .card, #calldashView .card, #rlogView .card {
  border-radius: 14px; border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.05);
}
#dashView .card-header, #dcsView .card-header, #dcsctlView .dc-c .card-header, #astView .card-header, #calldashView .card-header, #rlogView .card-header {
  background: transparent; padding: 14px 16px; border-bottom: 1px solid var(--border);
}
#dashView .card-header h2, #dcsView .card-header h2, #dcsctlView .card-header h2, #astView .card-header h2, #calldashView .card-header h2, #rlogView .card-header h2 {
  font-size: 14px; font-weight: 800; letter-spacing: -.02em;
}
#dashView .card-header[data-cgo] { cursor: pointer; }
#dashView .ext-roster { border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 12px 16px; }
#dashView .live-calls { max-height: 280px; }
#dashView .stat-foot { margin: -4px 2px 0; }
#missedCalls .call-item { cursor: pointer; }
@media (max-width: 1100px) {
  .bx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bx-metrics, .bx-grid { grid-template-columns: minmax(0, 1fr); }
  .bx-metric .stat-num { font-size: 28px; }
}

/* 좌측 메뉴 접기/펼치기 토글 */
.leftpanel { transition: width .18s ease, padding .18s ease; }
.x-side-tg { position: absolute; left: 220px; top: 50%; transform: translateY(-50%); z-index: 30; width: 16px; height: 48px; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: #64748b; border: 1px solid var(--border); border-left: 0; border-radius: 0 8px 8px 0; box-shadow: 2px 0 6px rgba(15,23,42,.06); cursor: pointer; transition: left .18s ease, color .15s; }
.x-side-tg:hover { color: var(--x-pr, #2563eb); background: #f8fafc; }
.x-side-tg svg { transition: transform .18s ease; }
body.side-collapsed .leftpanel { width: 0; padding-left: 0; padding-right: 0; border-right: 0; overflow: hidden; }
body.side-collapsed .x-side-tg { left: 0; }
body.side-collapsed .x-side-tg svg { transform: rotate(180deg); }
@media (max-width: 720px) { .x-side-tg { display: none; } body.side-collapsed .leftpanel { width: auto; padding: 6px; overflow: visible; } }

/* ── 상담관리 목록: 상담내역 칸을 가로로 최대한 넓게 (v13) ──
   다른 칸은 좁게·한 줄 고정, 상담내역은 남는 너비를 모두 씀. 메모는 한 줄(여러 개는 " | ")로 보이고,
   칸보다 길면 말줄임 — 마우스를 올리면 전체 내용(title). 행 높이는 늘리지 않는다. */
table.crmt.nc { min-width: 1280px; }
table.crmt.nc col.c-no { width: 40px; } table.crmt.nc col.c-time { width: 210px; } table.crmt.nc col.c-resv { width: 72px; }
table.crmt.nc col.c-phone { width: 114px; } table.crmt.nc col.c-dnis { width: 180px; } table.crmt.nc col.c-type { width: 66px; }
table.crmt.nc col.c-tag { width: 92px; } table.crmt.nc col.c-name { width: 66px; } table.crmt.nc col.c-cnt { width: 54px; }
table.crmt.nc col.c-agent { width: 66px; } table.crmt.nc col.c-sms { width: 40px; } table.crmt.nc col.c-del { width: 40px; }
table.crmt.nc col.c-memo { width: auto; }
table.crmt.nc th, table.crmt.nc td { padding-left: 4px; padding-right: 4px; text-overflow: ellipsis; }
table.crmt.nc td.memo-td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; vertical-align: middle; padding: 6px 10px; }
table.crmt.nc td.memo-td .memo-line { font-size: 12px; line-height: 1.4; }
table.crmt.nc td.memo-td .memo-sep { color: #94a3b8; }
table.crmt.nc td .edit-cell { width: 100%; min-width: 0; }
.list-foot .page-size { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
.list-foot .page-size select { height: 28px; padding: 0 6px; border: 1px solid var(--x-line, var(--border)); border-radius: 6px; background: #fff; font-size: 12px; color: var(--text); cursor: pointer; }
.pager .page-size { margin-left: 8px; flex: none; }
table.crmt.nc td.tags-cell { white-space: nowrap; }
/* 상담날짜 · 수신번호는 말줄임 없이 전부 보이게. 날짜·시간은 한 줄, 수신번호는 번호 뒤에 경로가 길면 다음 줄 */
table.crmt.nc td.td-time,
table.crmt.nc td.td-dnis { overflow: visible; text-overflow: clip; }
table.crmt.nc td.td-time { white-space: nowrap; }
table.crmt.nc td.td-dnis { white-space: normal; }
table.crmt.nc td.td-dnis .mono, table.crmt.nc td.td-dnis .telno { white-space: nowrap; }
table.crmt.nc td.td-dnis .td-sub { display: inline; margin-left: 3px; white-space: normal; }

/* 좌측 메뉴: 묶음마다 흰 카드, 옅은 제목 줄, 항목은 글씨만 (PC) */
@media (min-width: 721px) {
  .leftpanel { background: #fff; border-right: 1px solid #e6ebf2; padding: 14px 12px 16px; scrollbar-color: #8ea0d0 transparent; }
  .leftpanel::-webkit-scrollbar { width: 8px; }
  .leftpanel::-webkit-scrollbar-thumb { background: #8ea0d0; border-radius: 8px; }
  .x-nav { gap: 0; }
  .x-nav-g { background: #fff; border: 1px solid #d5deea; border-radius: 12px; margin-bottom: 14px; overflow: hidden; box-shadow: none; }
  .x-nav-gt { padding: 12px 16px; border-radius: 0; background: #f4f7fb; font-size: 14px; font-weight: 700; color: #1f2937; gap: 8px; min-height: 46px; }
  .x-nav-gt:hover { background: #eef2f7; }
  .x-nav-g:not(.closed) > .x-nav-gt { border-bottom: 1px solid #e6edf5; }
  .x-nav-g.has-on > .x-nav-gt { color: #1f2937; }
  .x-nav-gt .x-ic { display: none; }
  .x-nav-gt .x-cv { font-size: 0; transform: none !important; width: 14px; height: 14px; display: grid; place-items: center; }
  .x-nav-gt .x-cv:before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #64748b; }
  .x-nav-g.closed .x-nav-gt .x-cv:before { transform: rotate(-90deg); }
  .x-nav-items { padding: 6px 0 10px; display: flex; flex-direction: column; gap: 0; }
  .x-nav-it { padding: 11px 18px; font-size: 14px; font-weight: 500; color: #5c6d86; border-radius: 0; }
  .x-nav-it:hover { background: #f8fafc; color: #334155; }
  .x-nav-it.on { background: transparent; color: #1e3a5f; font-weight: 700; box-shadow: none; }
  .x-nav-it.on:before { display: none; }
  .x-nav-it.on .x-nbdg { background: #ef4444; color: #fff; }
  .x-nav-foot { border-top: 0; padding: 2px 6px 0; color: #94a3b8; }
}

/* 모바일 전용 요소(앱 바·하단 탭·더보기·필터 시트 제목)는 PC(769px 이상)에서 숨김. 모바일 화면은 mobile.css */
@media (min-width: 769px) { .m-only { display: none !important; } }

/* 앱 안(BizCrm 안드로이드)에서만 보이는 앱 정보 카드 */
.app-info .app-info-v { margin: 0 0 10px; line-height: 1.6; }

/* ---- 머리줄 계정 드롭다운 (bizCare .account-popover 와 같은 치수) ---- */
.x-acct-wrap { position: relative; display: flex; align-items: center; }
.x-userchip.x-userchip-btn.on { background: rgba(15, 23, 42, .08); }
.x-acct-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: #fff; border: 1px solid var(--x-line, #e5e7eb); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06); z-index: 1200; overflow: hidden; text-align: left; }
.x-acct-pop[hidden] { display: none; }
.x-acct-head { margin: 12px 12px 0; padding: 14px 10px 12px; border-radius: 4px; background: #f3f4f6; text-align: center; }
.x-acct-name { font-size: 18px; font-weight: 700; color: var(--x-title, #111827); line-height: 1.3; word-break: keep-all; }
.x-acct-sub { margin-top: 4px; font-size: 13px; color: #8b95a1; line-height: 1.35; }
.x-acct-meta { padding: 14px 18px 10px; display: flex; flex-direction: column; gap: 7px; }
.x-acct-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.4; }
.x-acct-label { color: var(--primary, #2563eb); font-weight: 600; min-width: 2.5em; flex-shrink: 0; }
.x-acct-value { color: var(--muted, #6b7280); word-break: break-all; }
.x-acct-actions { margin: 0 14px 8px; padding: 8px 0 6px; border-top: 1px solid var(--x-line, #e5e7eb); display: flex; flex-direction: column; }
.x-acct-action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; color: var(--muted, #6b7280); cursor: pointer; text-align: left; }
.x-acct-action:hover, .x-acct-action:focus-visible { background: #f5f6f8; color: var(--x-title, #111827); outline: 0; }
.x-acct-action svg { flex-shrink: 0; }

/* ---- 설정 > U+ 전화 연동 화면 (DCS 중계 + 고급형 센트릭스(미사용)) ---- */
.up-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 1100px; }
.up-card .cfg-body .stbl { width: 100%; }
.up-card .row-flex { flex-wrap: wrap; }
.up-kv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.up-kv > span { min-width: 110px; color: var(--muted); font-weight: 600; }
.up-kv code { background: #f3f4f6; border: 1px solid var(--x-line, #e5e7eb); border-radius: 6px; padding: 3px 8px; word-break: break-all; }
.up-card .pre { white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto; }
.dcs-use { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #dbeafe; color: #1d4ed8; vertical-align: middle; }
.dcs-sum { margin-left: 6px; font-size: 12px; font-weight: 700; vertical-align: middle; }
.dcs-sum.on { color: #16a34a; } .dcs-sum.off { color: #dc2626; }
.dcs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: #9ca3af; }
.dcs-dot.on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); } .dcs-dot.off { background: #dc2626; }
.dcs-chip { display: inline-block; padding: 1px 7px; margin: 1px 0; border-radius: 6px; font-size: 11.5px; border: 1px solid var(--x-line, #e5e7eb); white-space: nowrap; }
.dcs-chip.on { background: #dcfce7; color: #166534; border-color: #bbf7d0; } .dcs-chip.off { background: #fee2e2; color: #991b1b; border-color: #fecaca; } .dcs-chip.wait { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.up-legacy { border: 1px dashed var(--x-line, #d1d5db); border-radius: 10px; padding: 8px 12px; background: var(--surface, #fff); }
.up-legacy > summary { cursor: pointer; padding: 4px 0; font-size: 13.5px; }
.up-legacy[open] > summary { margin-bottom: 10px; }
.up-legacy-body { display: flex; flex-direction: column; gap: 12px; opacity: .92; }

/* ---- 머리줄 팝오버: APK 다운로드 · 화면 테마 ---- */
.x-pop-wrap { position: relative; display: flex; align-items: center; }
.x-iconbtn.on { background: var(--x-soft); color: var(--primary); border-color: var(--x-line); }
.x-apk-btn { width: auto; padding: 0 8px; display: inline-flex; gap: 4px; align-items: center; }
.x-apk-lbl { font-size: 11px; font-weight: 800; letter-spacing: .3px; }
/* 수신테스트(가상 전화) — APK 버튼 왼쪽, 전체 관리자만 */
.x-rt-btn { height: 32px; padding: 0 10px; border-radius: 8px; display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--x-line); background: none; color: var(--primary); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.x-rt-btn:hover { background: var(--x-soft); }
.x-rt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.x-rt-btn[hidden] { display: none; }
.x-pop { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface, #fff); border: 1px solid var(--x-line, #e5e7eb); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06); z-index: 1200; }
.x-pop[hidden] { display: none; }
.x-apk-pop { width: 236px; padding: 14px 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.x-apk-title { font-size: 14px; font-weight: 800; color: var(--x-title); }
.x-apk-qr { width: 168px; height: 168px; image-rendering: pixelated; border: 1px solid var(--x-line); border-radius: 8px; padding: 6px; background: #fff; }
.x-apk-help { font-size: 12px; color: var(--muted); line-height: 1.45; }
.x-apk-dl { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border-radius: 8px; background: var(--primary); color: #fff !important; font-weight: 700; font-size: 13px; text-decoration: none !important; }
.x-apk-dl:hover { background: var(--primary-dark); }
.x-apk-ver { font-size: 12px; color: var(--muted); line-height: 1.45; }
.x-apk-ver b { color: var(--x-title); }
.x-apk-page { font-size: 12px; }
html.in-app #apkWrap { display: none; }
.x-theme-pop { width: 168px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.x-theme-it { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #111827; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.x-theme-it .x-theme-ck { flex-shrink: 0; visibility: hidden; color: #2563eb; }
.x-theme-it:hover { background: #f3f4f6; }
.x-theme-it.on { background: #dbeafe; color: #2563eb; }
.x-theme-it.on .x-theme-ck { visibility: visible; }
.x-theme-it.on:hover { background: #dbeafe; }
html.theme-dark .x-theme-it { color: var(--text); }
html.theme-dark .x-theme-it:hover { background: var(--elevated); }
html.theme-dark .x-theme-it.on,
html.theme-dark .x-theme-it.on:hover { background: var(--highlight-bg); color: var(--primary); }
html.theme-dark .x-theme-it .x-theme-ck { color: var(--primary); }
/* 환경설정 › 화면 테마 */
.theme-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--x-line); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); }
.theme-opt.on { border-color: var(--primary); color: var(--primary); font-weight: 700; box-shadow: 0 0 0 2px var(--primary-light); }
.theme-sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); }
.theme-sw-light { background: linear-gradient(135deg, #fff 50%, #e8f3ff 50%); }
.theme-sw-dark { background: linear-gradient(135deg, #16181e 50%, #24283b 50%); }
.theme-sw-sky { background: linear-gradient(135deg, #e7f4fc 50%, #0284c7 50%); }
.theme-sw-pink { background: linear-gradient(135deg, #fff1f5 50%, #db4d7a 50%); }
/* 더보기 › 화면 테마 */
.m-theme-li .m-theme-ck { font-style: normal; margin-left: auto; color: var(--primary); font-weight: 800; }
.m-theme-li.on .m-theme-ck::before { content: "✓"; }
.m-theme-li.on span { color: var(--primary); font-weight: 700; }
.x-apk-note { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--muted); white-space: pre-line; }
.x-apk-changes { margin: 6px 0 0; padding-left: 16px; text-align: left; font-size: 11px; color: var(--muted); }
.x-apk-changes li { margin-top: 2px; }
.x-iconbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 상담관리 목록: 행 어디를 눌러도 고객 상세 */
table.crmt.nc tbody tr[data-id] { cursor: pointer; }
table.crmt.nc tbody tr[data-id] input, table.crmt.nc tbody tr[data-id] select { cursor: auto; }
/* 고객 상세 · 상담내역: 입력(태그 칩 + 입력칸) → 목록(한 건 한 줄, 구분선) */
.memo-compose { margin-bottom: 10px; }
@media (min-width: 769px) {
.memo-compose .memo-format-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.memo-compose .memo-fmt-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--card); font-size: 12px; cursor: pointer; user-select: none; }
.memo-compose .memo-fmt-btn:hover { border-color: var(--primary); color: var(--primary); }
.memo-compose .memo-input-wrap { margin-top: 0; }
.memo-compose .memo-input-wrap textarea { font-size: 14px; line-height: 1.5; min-height: 58px; padding: 8px 10px; background: var(--card); color: var(--text); }
.memo-compose .memo-input-wrap textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
}
.memo-rows { margin-top: 8px; border-top: 1px solid var(--border); max-height: 320px; overflow-y: auto; background: transparent; }
.memo-rows .no-calls { padding: 14px 2px; }
.memo-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.55; }
.memo-when { flex: 0 0 auto; color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.memo-who { flex: 0 0 auto; color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.memo-txt { flex: 1 1 auto; min-width: 0; color: var(--text); white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.memo-txt .memo-preview { display: inline; font-size: inherit; line-height: inherit; }
.memo-row .memo-del { order: 9; margin-left: auto; }
.memo-del { flex: 0 0 auto; border: 0; background: none; color: #dc2626; font-size: 13px; cursor: pointer; padding: 0 2px; }
/* 고객 상세: 같은 번호 · 다른 인입경로 상담이력(t252) */
.or-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.or-title .or-cnt { font-weight: 700; color: var(--text); }
.or-title .or-help { font-weight: 400; color: var(--text-dim); font-size: 12px; margin-left: auto; }
.or-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.or-case { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2, transparent); }
.or-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.or-route { font-weight: 700; padding: 1px 8px; border-radius: 10px; background: var(--primary-light); color: var(--primary); }
.or-route.phone { background: #fef3c7; color: #92400e; }
.or-when { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.or-type { font-weight: 700; }
.or-agent { margin-left: auto; }
.or-rows { max-height: none; overflow: visible; margin-top: 6px; }
.or-rows .memo-row { font-size: 13px; padding: 6px 2px; }
.or-more { font-size: 12px; padding: 6px 2px 0; }
.x-nav-g[hidden], .x-nav-it[hidden], .filter-chip[hidden] { display: none !important; }
/* 날짜 빠른 선택(오늘·전일·금월·전월) · 날짜 칸 전체 클릭 */
.qd-row { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
button.range-btn { font-family: inherit; line-height: 1; }
input[type="date"] { cursor: pointer; }

/* 메모 색 버튼(모양·색 고정, 이름은 환경설정) — 고객 상세 · 메모 창 공통 */
.memo-fmt-btn.mf-0 { color: #dc2626; } .memo-fmt-btn.mf-1 { color: #2563eb; } .memo-fmt-btn.mf-2 { color: #16a34a; }
.memo-fmt-btn.mf-3 { color: var(--text, #111827); font-weight: 800; } .memo-fmt-btn.mf-4 { color: #ea580c; } .memo-fmt-btn.mf-5 { color: #7c3aed; }
html.theme-dark .memo-fmt-btn.mf-0 { color: #f87171; } html.theme-dark .memo-fmt-btn.mf-1 { color: #60a5fa; } html.theme-dark .memo-fmt-btn.mf-2 { color: #4ade80; }
html.theme-dark .memo-fmt-btn.mf-4 { color: #fb923c; } html.theme-dark .memo-fmt-btn.mf-5 { color: #a78bfa; }

/* 상담내역 → 메모 창 (crm.one-mart '메모 - 번호' 그대로: 카드 → 색 버튼 → 입력 + 추가 → 닫기) */
.ci-modal.mp { width: 540px; }
.mp-sub { color: var(--muted, #6b7280); font-size: 13px; margin: -6px 0 12px; }
.mp-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
.mp-list .no-calls { padding: 14px; border: 1px dashed var(--border, #e5e7eb); border-radius: 10px; }
.mp-card { padding: 9px 12px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--bg-soft, #f8fafc); }
.mp-card .mp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-card .mp-when { color: var(--muted, #94a3b8); font-size: 12px; }
.mp-card .memo-del { color: #dc2626; font-size: 12px; }
.mp-card .mp-txt { margin-top: 3px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--text, #111827); }
html.theme-dark .mp-card { background: rgba(148,163,184,.08); }
.mp-compose .memo-format-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mp-compose .memo-fmt-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border: 1px solid var(--border, #e5e7eb); border-radius: 13px; background: var(--card, #fff); font-size: 12px; cursor: pointer; user-select: none; }
.mp-compose .memo-fmt-btn:hover { border-color: var(--primary, #2563eb); }
.mp-split { margin: 12px 0 10px; border-top: 1px solid var(--border, #e5e7eb); }
.mp-prog { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; flex-wrap: wrap; }
.mp-prog label { font-weight: 700; }
.mp-prog .req { color: #dc2626; }
.mp-prog select { height: 32px; min-width: 170px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); background: var(--card, #fff); color: var(--text, #111827); }
.mp-prog select.need { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.18); }
.kv dd .mp-name { width: 100%; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border, #e5e7eb); font-size: 13px; box-sizing: border-box; }
.mp-in { display: flex; gap: 8px; align-items: stretch; }
.mp-in textarea { flex: 1; min-height: 76px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); font-size: 14px; line-height: 1.5; resize: vertical; background: var(--card, #fff); color: var(--text, #111827); }
.mp-in textarea:focus { outline: none; border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px var(--primary-light, rgba(37,99,235,.15)); }
.mp-add { flex: 0 0 72px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.mp-add:hover { background: #1d4ed8; } .mp-add:disabled { opacity: .6; cursor: default; }
.mp-resv { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, #e5e7eb); font-size: 13px; }
.mp-resv .mp-rl { font-weight: 700; flex: none; }
.mp-resv .resv-box .row-flex { gap: 6px; flex-wrap: wrap; align-items: center; }
.resv-box input[type="date"], .resv-box .tp-in { height: 32px; min-width: 132px; }
.resv-acts { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.resv-al { display: inline-flex; align-items: center; gap: 5px; height: 32px; margin: 0; font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; }
.resv-al input { width: 16px; height: 16px; min-width: 0; margin: 0; padding: 0; accent-color: var(--primary, #2563eb); cursor: pointer; }
.tp-in { font-variant-numeric: tabular-nums; }
.tp-pop { position: fixed; z-index: 450; width: 248px; padding: 10px; border-radius: 12px; background: var(--surface, #fff); color: var(--text, #111827); border: 1px solid var(--border, #e5e7eb); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
.tp-ap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.tp-ap button, .tp-grid button { height: 32px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface-2, #f8fafc); color: var(--text, #111827); font-size: 13px; font-weight: 700; cursor: pointer; }
.tp-ap button.on, .tp-grid button.on { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.tp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.tp-lab { margin: 8px 0 4px; font-size: 11px; font-weight: 700; color: var(--text-dim, #64748b); }
html.theme-dark .tp-pop { background: var(--surface); }

/* 환경설정 › 진행상황 목록 · 메모 버튼 이름 */
.leg-tags td:last-child { text-align: right; white-space: nowrap; }
table.stbl.leg-tags th,
table.stbl.leg-tags td { vertical-align: middle; }
table.stbl.leg-tags .st-sw,
table.stbl.leg-tags small,
table.stbl.leg-tags .btn-sm { vertical-align: middle; }
.leg-memo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.leg-mi { display: flex; align-items: center; gap: 6px; }
.leg-mi .memo-fmt-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border, #e5e7eb); border-radius: 14px; font-size: 13px; }
.leg-mi input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); }
@media (max-width: 768px) { .leg-memo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.leg-fin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.leg-auto-on { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 10px; cursor: pointer; }
.leg-ag-list { display: flex; flex-direction: column; gap: 8px; }
.leg-ag-co { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }
.leg-ag-co > b { flex: 0 0 100%; }
.leg-ag { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.leg-tags td:first-child { white-space: nowrap; }

/* ===== 설정 화면 (goldenChart PC 설정 배치) ===== */
.st-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 4px; }
.st-side { position: sticky; top: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 10px; }
.st-side-t { font-size: 15px; font-weight: 800; color: var(--text); padding: 2px 8px 10px; }
.st-cats { display: flex; flex-direction: column; gap: 4px; }
.st-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.st-cat svg { flex: none; color: var(--text-dim); }
.st-cat:hover { background: var(--card2); }
.st-cat.on { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.st-cat.on svg { color: var(--primary); }
.st-cat .st-chev { display: none; margin-left: auto; font-style: normal; color: var(--text-dim); }
.st-main { position: relative; min-width: 0; background: transparent; border: 0; border-radius: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.st-back { display: none; }
.st-head { display: flex; align-items: center; gap: 14px; padding: 2px 2px 0; border-bottom: 0; background: transparent; }
.st-tile { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-light); color: var(--primary); }
.st-tile svg { width: 22px; height: 22px; }
.st-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.st-head p { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }
.st-body { padding: 0; flex: 1; min-width: 0; background: transparent; }
.st-groups { display: flex; flex-direction: column; gap: 16px; }
.st-grp, .st-body .card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: none; margin: 0 0 16px; }
.st-groups > .st-grp, .st-groups .st-grp,
.st-body .up-wrap > .card, .st-body .rt-wrap > .card, .up-legacy-body > .card,
#coWrap > .co-card, #legWrap > .st-grp, #dwWrap > .st-grp, #autoWrap > .st-grp { margin: 0; }
#legWrap, #autoWrap, #coWrap, #dwWrap, #distWrap { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.st-gh, .st-body .card > .card-header { padding: 8px 16px; background: var(--card2); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-header h2, .st-gh > span { flex: 1; min-width: 0; }
.st-body .card > .card-header h2 { font-size: 12px; font-weight: 700; color: var(--text-dim); margin: 0; }
.hd-act { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.hd-act .btn-sm, .hd-act .btn-refresh { height: 28px; padding: 0 10px; font-size: 12px; }
.st-head .hd-act[hidden] { display: none; }
.st-gb { display: flex; flex-direction: column; }
.st-gb > .stbl, .st-gb > table { margin: 10px 16px; width: calc(100% - 32px); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--border); }
.st-gb > .st-row:first-child { border-top: 0; }
.st-row-top { padding-bottom: 6px; }
.st-row-wrap { flex-wrap: wrap; }
.st-l { min-width: 0; flex: 1; }
.st-l b { display: block; font-size: 14px; color: var(--text); font-weight: 700; }
.st-l small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.st-c { flex: none; display: flex; align-items: center; gap: 6px; justify-content: flex-end; max-width: 60%; }
.st-roles { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; }
.st-role { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; cursor: pointer; }
.st-c .st-role input { width: 16px; height: 16px; margin: 0; padding: 0; border: 0; accent-color: var(--primary); background: transparent; }
.st-c input[type="number"] { width: 90px; height: 32px; text-align: right; }
.st-c input:not([type]), .st-c input[type="text"] { width: 200px; height: 32px; }
.st-c input, .st-c select { padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 13px; }
#lgAssignPos { height: 40px; min-width: 188px; padding: 0 14px; font-size: 15px; cursor: pointer; }
.st-unit { font-size: 12px; color: var(--text-dim); }
.st-mono { font-size: 12px; word-break: break-all; text-align: right; color: var(--text); }
.st-note { margin: 0; padding: 10px 16px 14px; font-size: 12px; line-height: 1.6; color: var(--text-dim); border-top: 1px solid var(--border); }
.ipg-lock { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #9a3412; background: #fff7ed; border: 1px solid #fdba74; }
.dist-fadd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 16px 0; }
.dist-fadd input, .dist-fadd select { height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: var(--card); color: var(--text); font-size: 13px; }
.dist-fadd input[type="tel"] { width: 148px; }
.dist-fadd input[type="text"] { flex: 1; min-width: 120px; }
.dist-flag { display: inline-block; min-width: 36px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; text-align: center; }
.dist-flag.vip { background: #fef3c7; color: #92400e; }
.dist-flag.black { background: #fee2e2; color: #991b1b; }
@media (max-width: 768px) {
  .dist-fadd input, .dist-fadd select, .dist-fadd .btn-sm { height: 40px; font-size: 15px; }
  .dist-fadd input[type="tel"], .dist-fadd select { flex: 1; min-width: 120px; }
}
.st-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1; background: #fff; color: #374151; border: 1px solid #d1d5db; }
.st-badge.on { background: #2563eb; color: #fff; border-color: #2563eb; }
.st-sym { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 11px; font-size: 12px; margin-right: 4px; vertical-align: -3px; }
/* 토글 스위치 */
.st-sw { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.st-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.st-sw span { position: absolute; inset: 0; border-radius: 11px; background: #cbd5e1; transition: background .15s; }
.st-sw span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.st-sw input:checked + span { background: var(--primary) !important; }
.st-sw input:checked + span::after { left: 21px; }
.st-sw input:disabled + span { opacity: .5; }
.st-sw input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 고정 저장줄 */
.st-foot { position: sticky; bottom: 0; box-shadow: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; z-index: 2; }
.st-foot[hidden] { display: none; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer; }
.st-btn.pr { background: #2563eb; border-color: #2563eb; color: #fff; }
.st-btn.pr:hover { background: #1d4ed8; }
.st-btn:disabled { opacity: .6; cursor: default; }
.leg-ag-list { padding: 0 16px 14px; }
.st-body .up-wrap, .st-body .rt-wrap { margin: 0; }
html.theme-dark .st-sw span { background: #475569; }
html.theme-dark .st-btn.pr { color: var(--on-primary, #0b1020); }
html.theme-dark .st-side, html.theme-dark .st-foot, html.theme-dark .st-grp, html.theme-dark .st-body .card { background: var(--card); border-color: var(--border); }
html.theme-dark .st-main { background: transparent; border: 0; }
html.theme-dark .st-gh, html.theme-dark .st-body .card > .card-header { background: var(--card2); }
.st-l small b { display: inline; font-size: inherit; color: var(--text); font-weight: 700; }
.mn-scroll { overflow-x: auto; }
.mn-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mn-tbl th, .mn-tbl td { padding: 9px 12px; border-top: 1px solid var(--border); text-align: center; white-space: nowrap; }
.mn-tbl thead th { border-top: 0; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.mn-tbl th:first-child, .mn-tbl td:first-child { text-align: left; white-space: normal; color: var(--text); font-weight: 600; }
.mn-tbl input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.mn-tbl input:disabled { cursor: not-allowed; }
.st-groups > .st-note { border: 0; padding: 0 2px 8px; }

/* 검색 카드 + 목록 카드 (접수리스트형) */
.bx-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.bx-find, .bx-sheet { background: #fff; border: 1px solid #e6ebf2; border-radius: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.bx-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 12px 14px; }
.bx-find .filter-bar, .bx-find .ot-filters { grid-column: 1; margin: 0; padding: 0; background: transparent; border: 0; }
.bx-find-actions { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#crmView .bx-find-actions { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; gap: 8px; }
#crmView .bx-find-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#crmView .crm-find-side { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#crmView .crm-find-side .grp-toggle { margin-left: 0; }
#crmFlt { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; min-width: 0; }
#crmFlt .crm-flt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; max-width: 100%; min-width: 0; }
#crmFlt .crm-flt-line2 { flex-wrap: nowrap; overflow: hidden; }
#crmFlt .crm-flt-line2 > .filter-sep,
#crmFlt .crm-flt-line2 > input,
#crmFlt .crm-flt-line2 > #typeChips { flex: none; }
#crmFlt #typeChips { flex-wrap: nowrap; }
#crmFlt .tag-scroll { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; }
#crmFlt #tagChips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: thin; }
#crmFlt #tagChips .filter-chip { flex: none; }
#crmFlt .chip-ellipsis { display: none; flex: none; color: #64748b; font-weight: 700; letter-spacing: 1px; line-height: 1; }
#crmFlt .tag-scroll.is-more-l .chip-ellipsis-l,
#crmFlt .tag-scroll.is-more-r .chip-ellipsis-r { display: inline; }
html.theme-dark #crmFlt .chip-ellipsis { color: #94a3b8; }
.bx-find-meta { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; font-size: 12px; color: #6b7280; }
.bx-find-meta .ot-live { margin: 0; }
.bx-tilde { color: #9ca3af; font-size: 12px; }
.bx-btn { height: 32px; padding: 0 12px; border-radius: 4px; border: 1px solid #d1d5db; background: #fff; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bx-btn:hover { background: #f8fafc; }
.bx-btn.pr { background: #2563eb; border-color: #2563eb; color: #fff; }
.bx-btn.pr:hover { background: #1d4ed8; }
.bx-btn.danger { color: #b91c1c; border-color: #fecaca; background: #fff; }
.col-set-help { margin: 0 0 12px; font-size: 13px; color: #64748b; line-height: 1.45; }
.col-set { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; color: #1e293b; }
.col-set h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.col-set-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; max-height: 46vh; overflow: auto; align-content: start; }
.col-set-it { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 2px; cursor: pointer; }
.col-set-it input { margin: 0; width: 15px; height: 15px; cursor: pointer; flex: none; }
.col-set-empty { padding: 14px; text-align: center; color: #94a3b8; font-size: 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #fff; }
html.theme-dark .col-set,
html.theme-dark .col-set h4 { color: var(--text); }
html.theme-dark .col-set-empty { background: var(--surface); border-color: var(--border); }
@media (max-width: 720px) { .col-set, .col-set-list { grid-template-columns: 1fr; } }
.bx-find .range-btn { height: 28px; padding: 0 10px; border-radius: 4px; border: 1px solid #e5e7eb; background: #fff; color: #4b5563; font-size: 12px; }
.bx-find .range-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.bx-page, .bx-sheet, .bx-find { min-width: 0; }
.bx-sheet { flex: 1; min-height: 280px; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.bx-sheet.ot-list { border-radius: 10px; }
.bx-sheet .history-table-wrap, .bx-sheet .ot-scroll { width: 100%; min-width: 0; border: 0; border-radius: 10px 10px 0 0; }
/* 메뉴를 접고 펼 때 표가 본문 너비에 맞춰 칸 비율이 같이 변한다. 픽셀 고정·최소 너비는 쓰지 않는다. */
.bx-sheet table.crmt.nc,
.bx-sheet table.ot-table,
.bx-sheet table.htbl,
#logsView table.htbl,
#payView table.htbl { width: 100%; min-width: 0; table-layout: fixed; }
/* 수신로그·처리로그: 칸을 똑같이 나누면 시각·번호가 overflow:hidden 으로 잘린다. 글자 너비로 두고 좁으면 가로 스크롤 */
#logsView table.htbl { width: max-content; min-width: 100%; table-layout: auto; }
#logsView table.htbl th,
#logsView table.htbl td { overflow: visible; text-overflow: clip; }
#logsView table.htbl td.wrap { white-space: pre-wrap; word-break: break-word; max-width: 36em; text-align: left; }
/* 상담내역 외 칸 = 내용(머리글·검색칸·데이터)이 잘리지 않는 최소 고정 폭, 상담내역 = 나머지 전부(넘치면 말줄임) (2026-10-02) */
.bx-sheet table.crmt.nc col.c-no { width: 44px; }
.bx-sheet table.crmt.nc col.c-time { width: 100px; }
.bx-sheet table.crmt.nc col.c-resv { width: 88px; }
.bx-sheet table.crmt.nc col.c-phone { width: 112px; }
.bx-sheet table.crmt.nc col.c-dnis { width: 112px; }
.bx-sheet table.crmt.nc col.c-type { width: 64px; }
.bx-sheet table.crmt.nc col.c-tag { width: 88px; }
.bx-sheet table.crmt.nc col.c-name { width: 96px; }
.bx-sheet table.crmt.nc col.c-cnt { width: 56px; }
.bx-sheet table.crmt.nc col.c-agent { width: 72px; }
.bx-sheet table.crmt.nc col.c-sms { width: 52px; }
.bx-sheet table.crmt.nc col.c-del { width: 40px; }
.bx-sheet table.crmt.nc col.c-memo { width: auto; }
/* 분류·진행상황: 배지가 여러 개면 잘리지 않고 다음 줄로 */
.bx-sheet table.crmt.nc td.tags-cell { white-space: normal; overflow: visible; text-overflow: clip; }
.bx-sheet table.crmt.nc td.tags-cell .tag-display { flex-wrap: wrap; }
/* 머리글은 자르지 않음 · 검색칸 선택상자는 좌우 여백을 줄여 '전체'가 다 보이게 */
.bx-sheet table.crmt.nc thead th { text-overflow: clip; padding-left: 2px; padding-right: 2px; }
.bx-sheet table.crmt.nc tr.th-filters th { padding: 4px 2px; }
.bx-sheet table.crmt.nc tr.th-filters select { padding: 0 0 0 4px; }
.bx-sheet table.crmt.nc tr.th-filters input[type="date"] { font-size: 11px; padding: 0 1px; letter-spacing: -0.2px; }
.bx-sheet table.crmt.nc tr.th-filters input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; width: 11px; }
.bx-sheet table.crmt.nc tr.th-filters input[type="date"]::-webkit-datetime-edit { padding: 0; }
/* 상담날짜: 날짜(배지 포함) / 시간 두 줄 · 발신·수신번호: 전체 번호(000-0000-0000)가 꼭 맞는 고정 폭 — 넘침·잘림 없음(2026-10-02) */
.bx-sheet table.crmt.nc td.td-time { white-space: normal; line-height: 1.3; padding-top: 4px; padding-bottom: 4px; }
.bx-sheet table.crmt.nc td.td-time .td-tm { display: block; white-space: nowrap; }
.bx-sheet table.crmt.nc td.td-phone, .bx-sheet table.crmt.nc td.td-dnis { overflow: hidden; text-overflow: clip; }
.bx-sheet table.crmt.nc td.td-phone a, .bx-sheet table.crmt.nc td.td-dnis .mono, .bx-sheet table.crmt.nc td.td-dnis .telno { white-space: nowrap; }
.bx-sheet .list-foot { padding: 8px 12px; border-top: 1px solid #eef2f6; }
table.crmt.nc th, table.crmt.nc td, #logsView table.htbl th, #logsView table.htbl td, #payView table.htbl th, #payView table.htbl td { border: 1px solid #e8edf3; }
table.crmt.nc thead th, #logsView table.htbl thead th, #payView table.htbl thead th, table.ot-table thead th { background: #f8fafc; color: #374151; font-weight: 700; }
table.ot-table tr.th-filters th, table.crmt.nc tr.th-filters th { background: #fff; padding: 4px; font-weight: 400; overflow: visible; }
table.ot-table tr.th-filters select, table.ot-table tr.th-filters input, table.crmt.nc tr.th-filters select, table.crmt.nc tr.th-filters input { width: 100%; height: 28px; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; font-size: 12px; padding: 0 6px; }
table.crmt.nc tr.th-filters input[type="date"] { padding: 0 2px; min-width: 0; }
button.hf-reset { width: 28px; height: 28px; padding: 0; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; color: #64748b; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
button.hf-reset:hover { color: #1e293b; border-color: #cbd5e1; }
/* 상담관리·간편문의 목록: 칼럼 헤더 아래 검색·필터는 동작은 두고 화면에서만 숨김 */
table.crmt.nc tr.th-filters,
table.ot-table tr.th-filters { display: none; }
/* SMS | 상담내역 경계. 헤더 왼쪽 선을 끌어 상담내역 너비를 바꾼다 */
table.crmt.nc th.th-memo { position: relative; overflow: visible; }
table.crmt.nc th.th-memo .col-split { position: absolute; left: -7px; top: 0; width: 12px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
table.crmt.nc th.th-memo .col-split:hover,
body.crm-col-drag table.crmt.nc th.th-memo,
body.crm-col-drag table.crmt.nc td.memo-td { border-left-color: #2563eb; }
body.crm-col-drag { cursor: col-resize; user-select: none; }

/* 상담관리 목록 · 번호별 묶기 / 고객명 보충 / 통화중 배지 (원스마트 비교 반영) */
.call-dir.live { background: #dcfce7; color: #15803d; }
.name-hint { color: #94a3b8; font-style: italic; }
.grp-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; color: #334155; cursor: pointer; user-select: none; }
.grp-toggle input { margin: 0; }
.grp-badge { display: flex; width: max-content; align-items: center; gap: 4px; margin: 3px 0 0; height: 18px; padding: 0 6px; border-radius: 9px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 700; line-height: 16px; cursor: pointer; vertical-align: middle; }
.grp-badge.open { background: #2563eb; border-color: #2563eb; color: #fff; }
.grp-badge .grp-miss { font-style: normal; color: #dc2626; font-weight: 700; }
.grp-badge.open .grp-miss { color: #fee2e2; }
.crmt tr.grp-head > td { box-shadow: inset 0 1px 0 #e2e8f0; }
.crmt tr.grp-sub > td { background: #f8fafc; color: #475569; }
.crmt tr.grp-sub > td.td-no { text-align: right; }
.grp-sub-mark { color: #94a3b8; }
.crmt tr.grp-more > td { font-size: 12px; color: #64748b; text-align: center; padding: 6px; }
html.theme-dark .crmt tr.grp-sub > td { background: #1c1f27; color: #cbd5e1; }
html.theme-dark .grp-toggle { color: #cbd5e1; }
html.theme-dark .grp-badge { background: #1e293b; border-color: #334155; color: #93c5fd; }
html.theme-dark .grp-badge.open { background: #2563eb; color: #fff; }

/* 간편문의 자동배정 대시보드 */
.ad-board { display: flex; flex-direction: column; gap: 12px; }
.ad-board .cd-tile,
.ad-board .ad-card,
.ad-ag { outline: 1px solid #c5ced9; outline-offset: 0; }
.ad-board .cd-sum.ad-sum { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.15fr); }
.ad-board .cd-tile { min-height: 132px; padding: 18px 20px 16px; justify-content: space-between; gap: 8px; }
.ad-board .cd-tile small { font-size: 14px; font-weight: 700; }
.ad-board .cd-tile b { font-size: 36px; line-height: 1; letter-spacing: -.03em; }
.ad-sum .cd-tile b { overflow: hidden; text-overflow: ellipsis; }
.ad-board .cd-tile > span,
.ad-board .cd-tile .ad-next-count { font-size: 13px; line-height: 1.35; }
.ad-board .cd-tile.ad-next b { font-size: 28px; line-height: 1.2; }
.ad-board .cd-tile.t-in b { color: #1677ff; }
.ad-board .cd-tile.t-note b { color: #7c3aed; }
.ad-board .cd-tile.t-live b { color: #16a34a; }
.ad-board .cd-tile.t-ans b { color: #d97706; }
.ad-board .cd-tile.ad-next b { color: #0891b2; }
.cd-tile.ad-next { position: relative; }
.ad-next-top { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.ad-next-top small { white-space: nowrap; }
.ad-next-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.ad-force { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.ad-force select { height: 26px; max-width: 132px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); padding: 0 4px; }
.ad-next-tools .bx-btn { height: 26px; padding: 0 8px; font-size: 12px; line-height: 24px; }
.cd-tile.ad-next b, .cd-tile.ad-next .ad-next-count { display: block; width: 100%; text-align: center; }
html.theme-dark .ad-force select { background: var(--surface-2); color: var(--text); }
html.theme-dark .ad-board .cd-tile,
html.theme-dark .ad-board .ad-card,
html.theme-dark .ad-ag { outline-color: #3c445c; }
html.theme-dark .ad-board .cd-tile.t-in b { color: #60a5fa; }
html.theme-dark .ad-board .cd-tile.t-note b { color: #c4b5fd; }
html.theme-dark .ad-board .cd-tile.t-live b { color: #4ade80; }
html.theme-dark .ad-board .cd-tile.t-ans b { color: #fbbf24; }
html.theme-dark .ad-board .cd-tile.ad-next b { color: #22d3ee; }
.ad-card .card-header b { color: var(--title); }
.ad-flow { display: flex; align-items: center; flex-wrap: wrap; row-gap: 16px; padding: 22px 28px 8px; }
.ad-node { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 16px; font-weight: 700; color: var(--title); white-space: nowrap; }
.ad-node small { font-size: 12px; font-weight: 600; color: var(--muted); }
.ad-node .ad-flow-sw { width: 28px; height: 16px; margin-top: 0; }
.ad-node .ad-flow-sw span { border-radius: 8px; }
.ad-node .ad-flow-sw span::after { width: 12px; height: 12px; top: 2px; left: 2px; }
.ad-node .ad-flow-sw input:checked + span::after { left: 14px; }
.ad-node.now .ad-flow-sw span { background: rgba(255,255,255,.4); }
.ad-node.now .ad-flow-sw input:checked + span { background: #fff !important; }
.ad-node.now .ad-flow-sw input:checked + span::after { background: #1677ff; left: 14px; }
.ad-node.on { background: #ecfdf3; border-color: #86efac; color: #166534; }
.ad-node.now { background: #1677ff; border-color: #1677ff; color: #fff; }
.ad-node.now small { color: #dbeafe; }
.ad-node.off { border-style: dashed; color: #94a3b8; background: var(--surface-2); }
.ad-node.start { background: #1677ff; border-color: #1677ff; color: #fff; }
.ad-hint { position: fixed; z-index: 90; max-width: 280px; padding: 8px 10px; border-radius: 8px; background: #1e293b; color: #f8fafc; font-size: 12.5px; font-weight: 600; line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(15, 23, 42, .22); pointer-events: none; }
.ad-hint[hidden] { display: none; }
.ad-arr { flex: 1 1 48px; display: flex; align-items: center; justify-content: center; min-width: 48px; color: #94a3b8; }
.ad-arr svg { display: block; }
.ad-cap { text-align: center; color: var(--muted); font-size: 12.5px; margin: 4px 16px 14px; }
.ad-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 14px; }
.ad-cycle-note { margin: 0; padding: 10px 14px 0; color: var(--muted); font-size: 12.5px; }
.ad-ag { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.ad-queue .ad-ag { display: flex; align-items: flex-start; gap: 8px; }
.ad-ag .ad-body { flex: 1; min-width: 0; }
.ad-drag { flex: 0 0 auto; width: 22px; height: 28px; margin-top: 1px; padding: 0; border: 0; background: transparent; color: #94a3b8; cursor: grab; touch-action: none; }
.ad-drag svg { display: block; margin: 6px auto 0; fill: currentColor; }
.ad-ag.dragging { position: fixed; z-index: 80; display: flex; align-items: flex-start; gap: 8px; margin: 0; opacity: 1; pointer-events: none; cursor: grabbing; box-shadow: 0 16px 36px rgba(15, 23, 42, .22); }
.ad-hold { border: 1.5px dashed #94a3b8; border-radius: 14px; background: rgba(22, 119, 255, .06); box-sizing: border-box; }
body.ad-dragging, body.ad-dragging * { cursor: grabbing !important; }
body.ad-dragging { user-select: none; }
.ad-ord { display: inline-block; min-width: 1.2em; margin-right: 4px; color: #1677ff; font-size: 13px; }
.ad-ag.next { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.ad-ag h3 { margin: 0; font-size: 16px; color: var(--title); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ad-badges { display: inline-flex; align-items: center; gap: 4px; }
.ad-ag p { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.ad-badge { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: #ecfdf3; color: #166534; white-space: nowrap; }
.ad-badge.talk { background: #dbeafe; color: #1d4ed8; }
.ad-badge.away { background: #f1f5f9; color: #64748b; }
html.theme-dark .ad-node.on { background: #14532d; border-color: #166534; color: #bbf7d0; }
html.theme-dark .ad-node.off { color: #94a3b8; }
html.theme-dark .ad-badge.talk { background: #1e3a8a; color: #bfdbfe; }
html.theme-dark .ad-badge.away { background: #1e293b; color: #94a3b8; }
html.theme-dark .ad-hold { border-color: #475569; background: rgba(148, 163, 184, .1); }
html.theme-dark .ad-ag.dragging { box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
@media (max-width: 720px) {
  .ad-board .cd-sum.ad-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-board .cd-tile { min-height: 112px; padding: 14px 14px 12px; }
  .ad-board .cd-tile b { font-size: 30px; }
  .ad-board .cd-tile.ad-next b { font-size: 22px; }
}
.ci-body:has(.ntc-board) { padding: 6px 12px 10px; }
.ntc-board { min-height: 260px; }
.ntc-article { padding: 12px 16px 6px; }
.ntc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ntc-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: 12px; font-weight: 700; }
.ntc-chip.pin { background: #e0f2fe; color: #0369a1; }
.ntc-chip.must { background: #fee2e2; color: #b91c1c; }
.ntc-title { margin: 0 0 8px; font-size: 22px; line-height: 1.4; font-weight: 800; color: var(--title); letter-spacing: -.02em; }
.ntc-sub { margin: 0 0 16px; font-size: 13px; color: var(--text-dim); }
.ntc-body { font-size: 16px; line-height: 1.8; color: var(--text); padding: 18px 2px 8px; border-top: 1px solid var(--border); word-break: break-word; }
.ntc-body p { margin: 0 0 14px; }
.ntc-body p:last-child { margin-bottom: 0; }
.ntc-body ul, .ntc-body ol { margin: 0 0 14px; padding-left: 1.3em; }
.ntc-body li { margin: 6px 0; }
.ntc-body h3, .ntc-body h4 { margin: 0 0 10px; font-size: 18px; line-height: 1.45; color: var(--title); }
.ntc-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 8px 0; padding: 14px 8px 4px; border-top: 1px solid var(--border); }
.ntc-nav button { height: 38px; min-width: 92px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--title); font-size: 14px; font-weight: 700; }
.ntc-nav button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.ntc-nav button:disabled { opacity: .35; cursor: default; }
.ntc-nav span { font-size: 14px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ntc-empty, .ntc-loading { padding: 48px 16px; text-align: center; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
html.theme-dark .ntc-chip.pin { background: #0c4a6e; color: #bae6fd; }
html.theme-dark .ntc-chip.must { background: #7f1d1d; color: #fecaca; }
@media (max-width: 768px) {
  .ntc-title { font-size: 19px; }
  .ntc-body { font-size: 15px; }
}

.memo-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.memo-cell > .memo-line, .memo-cell > .memo-empty { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.crmt:not(.nc) .memo-cell { align-items: flex-start; }
table.crmt:not(.nc) .memo-cell > .memo-line { white-space: normal; }

/* t226u: 받은 내선에 연결 계정이 없는 콜 — 상담자 칸 '내선 N 미연결' · 관리자 배너 */
.unl-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #fff4e5; border: 1px solid #f5b971; color: #b45309; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.agent-select.unl { color: #b45309; font-weight: 600; border-color: #f5b971; background-color: #fff8ee; }
.agent-select.unl option { color: var(--text, #222); font-weight: 400; }
.unl-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid #f5b971; border-radius: 8px; background: #fff8ee; color: #8a4b08; font-size: 13px; line-height: 1.5; }
.unl-banner[hidden] { display: none; }
.unl-banner > .x-ic { flex: none; color: #d97706; }
.unl-banner .unl-txt { flex: 1; min-width: 0; }
.unl-banner .unl-txt .unl-badge { margin: 0 2px; }
.unl-banner .unl-help { color: #9a6a33; }
.unl-banner .unl-x { flex: none; border: 1px solid #f5b971; background: #fff; color: #8a4b08; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.unl-banner .unl-x:hover { background: #fff1dc; }
/* 상담관리 › 전화번호검색 창 */
.ci-modal.pf-modal { width: 832px; min-height: 220px; }
.pf-modal .ci-footer { display: none; }
.pf-card { background: #fff; border: 1px solid #e6ebf2; border-radius: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 14px 16px 16px; }
.pf-row { display: flex; align-items: center; gap: 6px; }
.pf-row input { flex: none; width: 18ch; height: 32px; padding: 0 8px; border: 1px solid var(--x-line, #e5e7eb); border-radius: 6px; background: #fff; font-size: 13px; letter-spacing: 0; }
.pf-help { margin: 6px 0 0; font-size: 12px; }
.pf-out { max-height: 52vh; overflow: auto; margin-top: 8px; }
.pf-out:empty { display: none; margin: 0; }
.pf-out table.crmt.nc { width: max-content; min-width: 100%; }
.pf-out table.crmt.nc td.td-time { white-space: normal; line-height: 1.3; padding-top: 4px; padding-bottom: 4px; overflow: hidden; }
.pf-out table.crmt.nc td.td-time .td-tm { display: block; white-space: nowrap; }
.pf-out table.crmt.nc td.td-phone { overflow: hidden; }
.pf-out table.crmt.nc tbody tr { cursor: pointer; }
.pf-out table.crmt.nc tbody tr:hover, .pf-out table.crmt.nc tbody tr:focus { background: #f8fafc; }
.pf-none { padding: 10px 0; display: flex; gap: 10px; align-items: center; } .pf-more { font-size: 12px; margin-top: 6px; }
html.theme-dark .pf-card { background: var(--surface-2); border-color: rgba(192, 202, 245, .22); }
html.theme-dark .pf-row input { background: var(--surface-3); color: var(--text); border-color: rgba(192, 202, 245, .22); }
html.theme-dark .pf-out table.crmt.nc tbody tr:hover { background: var(--surface-3); }
.eff-from { opacity: .85; }

/* 배정 한도 잘못된 값 */
.stbl input.dist-bad, input.dist-bad { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(229,72,77,.25); }

/* 부재·콜백 안 함·상담내역 없음(빨간 번호와 같은 조건) — 행 전체 연한 빨강 */
table.crmt tbody tr.miss-row > td { background: #fef2f2; }
table.crmt tbody tr.miss-row:hover > td { background: #fee2e2; }
html.theme-dark table.crmt tbody tr.miss-row > td { background: rgba(247,118,142,.10); }
/* 상담이력 줄의 인입경로(사이트·받은 번호) */
.memo-row .memo-route { font-size: 11px; color: var(--text-dim); margin-right: 6px; white-space: nowrap; }
/* 상담관리 상담자 여러 명 선택 */
.ag-ms { position: relative; display: inline-block; }
.ag-ms > summary { list-style: none; cursor: pointer; height: 32px; line-height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card, #fff); color: var(--text); font-size: 13px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; position: relative; }
.ag-ms > summary::-webkit-details-marker { display: none; }
.ag-ms > summary::after { content: "▾"; position: absolute; right: 9px; top: 0; color: var(--text-dim); }
.ag-ms.on > summary { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.ag-ms-pop { position: absolute; z-index: 60; top: 36px; left: 0; min-width: 180px; max-height: 320px; overflow: auto; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, #fff); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.ag-ms-pop label { display: flex; align-items: center; gap: 6px; padding: 5px 6px; font-size: 13px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.ag-ms-pop label:hover { background: var(--primary-light); }
.ag-ms-pop .ag-ms-all { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ag-ms-foot { position: sticky; bottom: -6px; margin: 4px -6px -6px; padding: 6px; border-top: 1px solid var(--border); background: var(--card, #fff); text-align: right; }
.ag-ms-foot .ag-ms-ok { height: 28px; padding: 0 16px; font-size: 13px; }

/* 대시보드 상담현황(게시글 39) — 상담사별 표 + CSS 막대 */
.dc-board { margin: 0 0 14px; }
.dcb-note { font-size: 12px; color: var(--muted, #64748b); margin: 0 0 10px; line-height: 1.45; }
.dcb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 12px; }
.dcb-kpi { background: var(--card, #fff); border: 1px solid var(--border, #e6ebf2); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 12px 14px 14px; min-height: 84px; }
.dcb-kpi > span { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim, #64748b); }
.dcb-kpi b { display: block; margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.dcb-kpi a { color: inherit; text-decoration: none; }
.dcb-kpi a:hover { text-decoration: underline; }
.dcb-kpi.sin b, .dcb-nums .dcb-n-sin b { color: #2563eb; }
.dcb-kpi.easy b, .dcb-nums .dcb-n-easy b { color: #16a34a; }
.dcb-kpi.asg b, .dcb-nums .dcb-n-asg b { color: #7c3aed; }
.dcb-nums .dcb-n-cap b { color: #d97706; }
.dcb-kpi.hnd b { color: #0f766e; }
.dcb-kpi.wait b { color: #b45309; }
.dcb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dcb-card { background: #fff; border: 1px solid #e6ebf2; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); padding: 12px 14px 14px; }
.dcb-card.off { opacity: .72; }
.dcb-card h4 { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--x-title, #1e293b); }
.dcb-card h4 small { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--muted, #64748b); }
.dcb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dcb-nums > div { background: #f8fafc; border-radius: 8px; padding: 6px 8px; min-width: 0; }
.dcb-nums span { display: block; font-size: 11px; font-weight: 700; color: #64748b; }
.dcb-nums b { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; color: #1e293b; }
.dcb-nums a { color: inherit; text-decoration: none; }
.dcb-nums a:hover { text-decoration: underline; }
.dcb-empty { margin: 0; padding: 18px; text-align: center; color: var(--muted, #64748b); background: #fff; border: 1px solid #e6ebf2; border-radius: 12px; }
html.theme-dark .dcb-kpi,
html.theme-dark .dcb-card,
html.theme-dark .dcb-empty { background: var(--surface); border-color: var(--border); }
html.theme-dark .dcb-card h4,
html.theme-dark .dcb-nums b { color: var(--text); }
html.theme-dark .dcb-nums .dcb-n-sin b { color: #60a5fa; }
html.theme-dark .dcb-nums .dcb-n-easy b { color: #4ade80; }
html.theme-dark .dcb-nums .dcb-n-asg b { color: #c4b5fd; }
html.theme-dark .dcb-nums .dcb-n-cap b { color: #fbbf24; }
html.theme-dark .dcb-kpi.sin b { color: #60a5fa; }
html.theme-dark .dcb-kpi.easy b { color: #4ade80; }
html.theme-dark .dcb-kpi.asg b { color: #c4b5fd; }
html.theme-dark .dcb-nums > div { background: var(--surface-2); }

/* 자동배정: 카드 기간 선택 · 다음 배정 + 배정 흐름 한 줄 (게시글 35) */
#distPeriod { margin-left: 6px; height: 32px; padding: 0 8px; }
.ad-board .cd-sum.ad-sum { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ad-row { display: flex; gap: 12px; align-items: stretch; margin: 12px 0; }
.ad-row > .cd-tile.ad-next { flex: 0 0 210px; padding: 10px 12px; }
.ad-board .ad-row .cd-tile.ad-next b { font-size: 20px; }
.ad-board .ad-row .cd-tile .ad-next-count { font-size: 12px; }
.ad-row > .ad-card { flex: 1 1 auto; min-width: 0; margin: 0; }
.ad-row .ad-flow { padding: 12px 14px 6px; row-gap: 8px; }
.ad-row .ad-node { padding: 5px 10px; font-size: 14px; gap: 6px; }
.ad-row .ad-arr svg { width: 18px; height: 10px; }
.ad-row .ad-arr { flex: 0 0 auto; min-width: 20px; margin: 0 2px; }
@media (max-width: 900px) { .ad-row { flex-wrap: wrap; } .ad-row > .cd-tile.ad-next { flex: 1 1 100%; } }
/* 건수 기준 안내(2026-10-14) */
.chip-basis{font-size:11px;color:#64748b;align-self:center;margin-right:4px;cursor:help;white-space:nowrap}
.ag-ms-mode{display:flex;gap:10px;align-items:center;padding:4px 6px 6px;border-bottom:1px solid #e2e8f0;margin-bottom:4px;font-size:12px}
.ag-ms-mode label{display:inline-flex;gap:4px;align-items:center}
/* 상담관리 목록 발신번호·수신번호(10-14 16:28 윤선님): 한 단계 크게(11→12px)·중간 굵기(600)·숫자 폭 고정(tabular-nums) — 본문 글꼴(.telno) 그대로, 부재 빨간색은 칸 색 상속 */
table.crmt td.td-phone .telno, table.crmt td.td-dnis .telno { font-size: 12px; font-weight: 600; font-style: normal; font-stretch: normal; letter-spacing: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
/* 진행상황 색(환경설정 › 상담관리 › 진행상황 목록) */
.lg-color { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg-color input[type=color] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; }
.lg-color input[type=color]:disabled { cursor: default; opacity: .6; }
.mp-cur-tags .tag-item, .or-st .tag-item { vertical-align: middle; }

/* 고객상세 상담이력 진행상황 칸(10-15 18:15): 메모를 남긴 그때 진행상황 칩 · 인입경로 칩 · 창 넓힘(작은 화면은 95vw/모바일 규칙 그대로) */
.ci-modal.lg.cd-wide { width: 1040px; }
.memo-row .memo-route .route-chip { font-size: 11px; padding: 1px 7px; }
.memo-tags { flex: 0 0 auto; display: inline-flex; gap: 3px; flex-wrap: wrap; max-width: 220px; align-self: center; }
.memo-tags .tag-item { font-size: 11px; padding: 1px 7px; line-height: 1.5; }
.memo-tags .memo-tag-none { background: #e2e8f0; color: #475569; }
.memo-tags-none { color: var(--text-dim); font-size: 12px; min-width: 14px; text-align: center; }
@media (max-width: 760px) { .memo-row { flex-wrap: wrap; row-gap: 2px; } .memo-row .memo-txt { flex-basis: 100%; } .memo-tags { max-width: none; } }

/* 상담관리 '검색 취소'(10-15 18:36) */
.crm-cancel-wrap { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.crm-cancel { font-size: 13px; padding: 6px 16px; }
.crm-cancel-tip { font-size: 11px; }

/* 고객상세 · 추가번호 (맨 위 칩) */
.xp-box { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; background: var(--card2); }
.xp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xp-title { font-weight: 700; font-size: 12px; color: var(--primary); }
.xp-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.xp-inp { flex: 1; min-width: 220px; max-width: 320px; height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border, #e5e7eb); font-size: 13px; box-sizing: border-box; background: #fff; margin-left: auto; }
.xp-inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.xp-btn { height: 30px; padding: 0 14px; border-radius: 6px; border: 0; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: 15px; background: #fff; border: 1px solid var(--primary-light); }
.xp-num { font-weight: 700; font-size: 13px; }
.xp-meta { color: var(--text-dim); font-size: 10px; padding-right: 6px; }
.xp-x { width: 22px; height: 22px; border-radius: 11px; border: 0; background: transparent; color: #9ca3af; font-size: 16px; line-height: 1; cursor: pointer; }
.xp-x:hover { background: #fee2e2; color: #dc2626; }
.xp-empty { font-size: 12px; }
.xp-err { margin-top: 6px; color: #dc2626; font-size: 12px; font-weight: 600; }
.xp-hd { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.xp-hchip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.22); }

/* 추가번호로 연 패널: 대표번호 안내 · 현재 번호 칩 */
.xp-of { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: #fff7e6; border: 1px solid #f5c26b; color: #7a4b00; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xp-of b { color: #5a3500; }
.xp-chip.xp-cur { border: 2px solid #f59e0b; background: #fffbeb; }
.xp-curtag { font-size: 11px; font-weight: 700; color: #fff; background: #f59e0b; border-radius: 8px; padding: 1px 6px; }