/* BizCrm 모바일 화면 (768px 이하에서만 적용: app.html 에서 media="(max-width: 768px)" 로 불러옴)
   앱처럼: 위 앱 바(제목 + 필터·새로고침) · 아래 탭(대시보드/상담관리/간편문의/더보기) · 목록은 카드 ·
   필터는 아래에서 올라오는 시트 · 상세 창은 전체 화면 · 누르는 곳은 44px 이상 · 가로 스크롤 없음.
   PC 좌측 카드 메뉴는 모바일에서 쓰지 않고, 나머지 메뉴는 '더보기' 목록으로. */
:root { --m-bar: 54px; --m-tab: 58px; --m-pr: #2563eb; --m-line: #e5e7eb; --m-bg: #f3f5f8; }
html, body { height: auto; min-height: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { background: var(--m-bg); font-size: 14px; height: auto; -webkit-tap-highlight-color: rgba(37,99,235,.12); }
.app-shell { height: auto; min-height: 100vh; display: block; }
.app-body { display: block; }

/* 숨김: PC 머리줄 · 통화 제어 바 · 좌측 메뉴 · 접기 버튼 · 페이지 제목(앱 바가 대신) */
.topbar, .x-sp, .leftpanel, .x-side-tg, .x-phd { display: none !important; }

/* 앱 바 */
.m-appbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 6px; height: calc(var(--m-bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); background: #fff; border-bottom: 1px solid var(--m-line); }
.m-logo { width: 28px; height: 28px; object-fit: contain; }
.m-appbar h1 { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ib { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: #374151; border-radius: 12px; }
.m-ib:active { background: #eef2f7; }
#mFltBtn { display: none; }
/* 상담관리·간편문의 목록은 앱 바 아래 필터 요약 칩으로 시트를 연다 → 앱 바 필터 아이콘 없음(요약 칩이 없는 로그·정산만 표시) */
body[data-view="logs"] #mFltBtn, body[data-view="pay"] #mFltBtn { display: inline-flex; }
body.m-flt-open #mFltBtn { color: var(--m-pr); background: #eaf1ff; }

/* 하단 탭 */
.m-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--m-tab) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #fff; border-top: 1px solid var(--m-line); box-shadow: 0 -2px 10px rgba(15,23,42,.05); }
.m-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; border: 0; background: none; color: #8a94a6; font-size: 11px; font-weight: 600; }
.m-tabs button.on { color: var(--m-pr); }
.m-tabs button.on svg { stroke-width: 2.2; }
.m-bdg { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; font-style: normal; }
.m-bdg[hidden] { display: none; }

/* 본문 */
.main { display: block; overflow: visible; padding: 12px max(12px, env(safe-area-inset-right)) calc(var(--m-tab) + env(safe-area-inset-bottom) + 16px) max(12px, env(safe-area-inset-left)); min-height: 0; }
.main > [hidden] { display: none !important; }
.bottom-row { display: block; min-height: 0; overflow: visible; }
.card, .history-section { overflow: visible; border-radius: 14px; border: 0; background: transparent; box-shadow: none; display: block; }
.card-header { flex-wrap: wrap; padding: 4px 2px 10px; border: 0; background: transparent; }
.card-header h2 { font-size: 15px; }
.card-header > div { flex-wrap: wrap; }
.btn-refresh { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.btn-refresh[data-c="refresh"], .btn-refresh[data-l="refresh"], .btn-refresh[data-p="refresh"] { display: none; }
.history-table-wrap, .ot-scroll { overflow: visible; flex: none; }

/* 필터: 아래에서 올라오는 시트 (앱 바의 깔때기 버튼) */
.filter-bar, .ot-filters { display: none !important; }
body.m-flt-open .filter-bar, body.m-flt-open .ot-filters { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; max-height: 82vh; overflow-y: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(15,23,42,.18); animation: mUp .18s ease; }
@keyframes mUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.m-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; flex-basis: 100%; padding: 14px 0 10px; background: #fff; border-bottom: 1px solid var(--m-line); margin-bottom: 4px; }
.m-sheet-head:before { content: ""; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: #d1d5db; }
.m-sheet-head b { font-size: 16px; }
.m-sheet-done { min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--m-pr); color: #fff; font-weight: 700; font-size: 14px; }
body.m-flt-open .filter-bar input, body.m-flt-open .filter-bar select, body.m-flt-open .ot-filters input, body.m-flt-open .ot-filters select { min-height: 44px; font-size: 16px; border-radius: 10px; flex: 1 1 40%; min-width: 0; max-width: 100%; }
body.m-flt-open .filter-bar input[name="q"], body.m-flt-open .ot-filters input[name="q"] { flex-basis: 100%; }
body.m-flt-open .ot-filters label { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; font-size: 13px; color: #6b7280; }
body.m-flt-open .ot-filters label select, body.m-flt-open .ot-filters label input { flex: 1; }
body.m-flt-open .flt-label { flex-basis: 100%; font-size: 12px; color: #6b7280; margin-top: 4px; }
body.m-flt-open .filter-sep { flex-basis: 100%; height: 0; border: 0; margin: 2px 0; }
body.m-flt-open .range-btn, body.m-flt-open .filter-chip { min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 19px; font-size: 13px; }
body.m-flt-open .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.m-flt-open .ot-btn { min-height: 44px; flex: 1; border-radius: 10px; font-size: 15px; }
body.m-flt-open .help { flex-basis: 100%; font-size: 12px; }
.m-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(15,23,42,.38); }
.m-backdrop[hidden] { display: none; }

/* 카드 목록 */
.m-cards { display: flex; flex-direction: column; gap: 10px; }
.m-card { background: #fff; border: 1px solid var(--m-line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); cursor: pointer; }
.m-card:active { background: #f8fafc; }
.m-card.missed { border-left: 4px solid #ef4444; }
.m-card.test-row { opacity: .75; }
.m-r1, .m-r2, .m-r3 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.m-r1 { margin-bottom: 6px; }
.m-name { font-size: 16px; font-weight: 800; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; text-decoration: none; }
.m-time { margin-left: auto; font-size: 12px; color: #6b7280; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-tel { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; font-weight: 700; color: var(--m-pr); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.m-tel:before { content: "☎"; font-size: 13px; margin-right: 5px; }
.m-sub { margin-left: auto; font-size: 12.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-memo { margin: 6px 0 8px; font-size: 13.5px; line-height: 1.45; color: #374151; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.m-memo .memo-line { font-size: inherit; }
.m-dim { color: #9ca3af; }
.m-r3 { flex-wrap: wrap; font-size: 12.5px; color: #6b7280; }
.m-agent { margin-right: auto; }
.m-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 700; background: #eef2f7; color: #475569; white-space: nowrap; }
.m-chip.ty { background: #f1f5f9; font-weight: 600; }
.m-chip.miss { background: #fee2e2; color: #b91c1c; }
.m-chip.st-상담신청 { background: #fee2e2; color: #dc2626; }
.m-chip.st-상담중 { background: #fef3c7; color: #b45309; }
.m-chip.st-상담완료 { background: #dcfce7; color: #15803d; }
.m-mini, .m-card .cell-actions button { min-height: 36px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; color: #374151; }
.m-card .cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.m-card .cell-actions button[data-a="start"] { background: var(--m-pr); border-color: var(--m-pr); color: #fff; }
.m-card .dup-badge { margin-left: 4px; }
.m-loadmore { display: block; width: 100%; min-height: 48px; margin: 12px 0 0; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; color: #1f2937; }
.m-loadmore small { color: #6b7280; font-weight: 500; margin-left: 4px; }
.m-end { text-align: center; color: #9ca3af; font-size: 12.5px; padding: 14px 0 4px; }
.list-foot { border: 0; padding: 0; background: transparent; display: block; }
.list-foot .page-size, #btnDel { display: none !important; }
.pager { display: block; }

/* 간편문의 화면 요소 */
.ot-list { background: transparent; border: 0; padding: 0; }
.ot-live { font-size: 12px; margin: 0 2px 6px; }
.ot-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; margin: 0 2px 10px; }
.ot-summary .ot-sr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: #9ca3af; font-size: 12px; }
.ot-btn.sm { min-height: 34px; padding: 0 12px; border-radius: 9px; }
#crmCount { font-weight: 600; color: #6b7280; }

/* 대시보드: 한 줄에 카드 하나 */
.dash-sec { margin-bottom: 14px; }
.dash-h { font-size: 15px; margin: 4px 2px 8px; flex-wrap: wrap; }
.dash-h span { display: block; font-size: 12px; font-weight: 500; }
.top-row { display: flex; flex-direction: column; gap: 10px; }
#dashView .card, #dcsView .card, #dcsctlView .card, #astView .card, #calldashView .card { background: #fff; border: 1px solid var(--m-line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
#dashView .card-header, #dcsView .card-header, #dcsctlView .card-header, #astView .card-header, #calldashView .card-header { padding: 12px 14px; border-bottom: 1px solid var(--m-line); background: #fff; }
.bx-metrics, .bx-grid { grid-template-columns: minmax(0, 1fr); }
.stats-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.stat-box { min-height: 64px; border-radius: 12px; }
.ext-roster { flex-wrap: wrap; overflow: visible; background: #fff; border-radius: 14px; border: 1px solid var(--m-line); padding: 10px 12px; gap: 6px; }
.live-calls { max-height: none; }
.call-item { min-height: 52px; }
.call-item button { min-height: 36px; }

/* 로그 · 납부 · 설정: 폭 넓은 표는 칸 이름이 붙은 카드로 */
table.m-tbl { display: block; width: 100% !important; min-width: 0 !important; border: 0; table-layout: auto; }
table.m-tbl thead { display: none; }
table.m-tbl tbody, table.m-tbl tr, table.m-tbl td { display: block; width: auto !important; }
table.m-tbl tr { background: #fff; border: 1px solid var(--m-line); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; }
table.m-tbl td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important; word-break: break-word; font-size: 13px; min-height: 30px; background: transparent !important; }
table.m-tbl td[data-label]:before { content: attr(data-label); flex-shrink: 0; max-width: 45%; text-align: left; color: #6b7280; font-size: 12px; font-weight: 600; }
table.m-tbl td:empty { display: none; }
table.m-tbl td[colspan] { justify-content: center; }
table.m-tbl input, table.m-tbl select { min-height: 40px; font-size: 16px; max-width: 60%; }
.bx-page { gap: 10px; }
.bx-find, .bx-sheet { background: #fff; border-radius: 14px; }
.bx-find { display: flex; flex-direction: column; padding: 10px 12px; }
.bx-find-actions { justify-content: flex-start; }
#crmView .bx-find-actions,
#crmView .bx-find-btns,
#crmView .crm-find-side { align-items: flex-start; justify-content: flex-start; }
body.m-flt-open #crmFlt .crm-flt-line { display: contents; }
body.m-flt-open #crmFlt .crm-flt-line2 { flex-wrap: wrap; }
body.m-flt-open #crmFlt .tag-scroll { flex: 1 1 100%; overflow: visible; }
body.m-flt-open #crmFlt #tagChips { flex-wrap: wrap; overflow: visible; }
body.m-flt-open #crmFlt .chip-ellipsis { display: none !important; }
.bx-sheet { min-height: 0; }
#logsView .card, #payView .card { background: #fff; }
.cfg-grid { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.cfg-grid > .card, #configView .card { background: #fff; border: 1px solid var(--m-line); border-radius: 14px; overflow: hidden; }
#configView .card-header { padding: 12px 14px; border-bottom: 1px solid var(--m-line); }
#configView input, #configView select, #configView textarea { font-size: 16px; min-height: 42px; max-width: 100%; }
#configView button, .ci-btn { min-height: 42px; }
.kv { grid-template-columns: 1fr; }

/* 상세·편집 창: 전체 화면 시트 + 아래 고정 버튼 */
.modal-overlay { align-items: stretch; justify-content: stretch; background: rgba(15,23,42,.4); }
.modal-overlay.modal-float { align-items: center; justify-content: center; background: transparent; pointer-events: none; }
.modal-overlay.modal-float .ci-modal, .modal-overlay.modal-float .ci-modal.sm, .modal-overlay.modal-float .ci-modal.lg { width: calc(100vw - 24px) !important; max-width: 640px !important; height: auto; max-height: 86vh; border-radius: 16px !important; }
.ci-modal, .ci-modal.sm, .ci-modal.lg { width: 100% !important; max-width: 100% !important; max-height: none; height: 100%; border-radius: 0 !important; animation: mUp .18s ease; }
.ci-header { position: sticky; top: 0; z-index: 2; background: #fff; padding: calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); min-height: 56px; }
.ci-header h3 { font-size: 17px; min-width: 0; flex-wrap: wrap; }
.ci-close { width: 44px; height: 44px; font-size: 20px; flex-shrink: 0; }
.ci-body { padding: 14px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); font-size: 14px; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.ci-body input, .ci-body select, .ci-body textarea { font-size: 16px; min-height: 44px; max-width: 100%; }
.ci-body textarea { min-height: 88px; }
.ci-grid, .ci-grid.c3 { grid-template-columns: 1fr !important; }
.ci-footer { position: sticky; bottom: 0; background: #fff; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-shadow: 0 -4px 12px rgba(15,23,42,.06); flex-wrap: nowrap; }
.ci-footer .ci-btn { flex: 1; min-height: 48px; font-size: 15px; border-radius: 12px; }
.memo-list-wrap { max-height: none !important; }
.tag-dropdown { max-width: 92vw; }

/* 더보기: 전체 화면 목록(일반 모바일 설정 화면 형태) */
.m-more { position: fixed; left: 0; right: 0; top: calc(var(--m-bar) + env(safe-area-inset-top)); bottom: calc(var(--m-tab) + env(safe-area-inset-bottom)); z-index: 55; overflow-y: auto; background: var(--m-bg); padding: 12px max(12px, env(safe-area-inset-right)) 20px max(12px, env(safe-area-inset-left)); }
.m-more[hidden] { display: none; }
.m-more-head { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--m-line); }
.m-more-head .x-av { width: 44px; height: 44px; font-size: 18px; }
.m-more-head b { display: block; font-size: 16px; }
.m-more-head small { color: #6b7280; font-size: 12.5px; }
.m-grp { background: #fff; border-radius: 14px; border: 1px solid var(--m-line); overflow: hidden; margin-bottom: 14px; }
.m-gt { padding: 10px 16px 6px; font-size: 12px; font-weight: 700; color: #6b7280; }
.m-li { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-top: 1px solid #f1f3f6; background: #fff; font-size: 15px; color: #111827; text-align: left; }
.m-li:active { background: #f3f4f6; }
.m-li span { flex: 1; }
.m-li small { color: #9ca3af; }
.m-li i { font-style: normal; color: #c0c6d0; font-size: 20px; }
.m-li.m-sel select { min-height: 40px; font-size: 16px; max-width: 60%; border: 1px solid var(--m-line); border-radius: 10px; padding: 0 8px; background: #fff; }
.m-li.m-sw { cursor: pointer; }
.m-li.m-sw span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.m-li.m-sw span small { color: #9ca3af; font-size: 12px; line-height: 1.3; }
.m-li.m-sw input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.m-foot { text-align: center; color: #9ca3af; font-size: 12px; padding: 6px 0; }
body.m-more-open .main { visibility: hidden; }

/* 알림 — 화면 가운데 (수신 팝업은 .cp-pop 그대로) */
#toasts { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); }
.loading { margin: 20px 0; }

/* 목록 위 필터 요약 칩(누르면 필터 시트) */
.m-fsum { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0 0 10px; padding: 0 14px; border: 1px solid var(--m-line); border-radius: 22px; background: #fff; font-size: 14px; color: #1f2937; text-align: left; }
.m-fsum span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.m-fsum i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--m-pr); white-space: nowrap; }
.m-fsum i:after { content: " ▾"; font-size: 11px; }
.card-header .btn-refresh { white-space: nowrap; min-height: 36px; padding: 0 10px; font-size: 13px; }
.card-header h2 { white-space: nowrap; }
.sync-pill, .price-pill { display: none !important; }

/* 로그인 */
.login-wrap { padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); align-items: flex-start; padding-top: 12vh; }
.login-box { padding: 28px 22px 22px; border-radius: 20px; }
.login-box .field input { min-height: 48px; font-size: 16px; border-radius: 12px; }
.login-submit { min-height: 50px; font-size: 16px; border-radius: 12px; }
#coWrap { display: flex; flex-direction: column; gap: 12px; }
#coWrap .co-card, #coWrap .co-card.half { width: 100%; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--m-line); border-radius: 14px; }
#configView .cfg-body, #configView .card { min-width: 0; max-width: 100%; }
#configView pre, #configView code { white-space: pre-wrap; word-break: break-all; }
.m-card .cell-actions button, .m-mini { min-height: 44px; }

/* ═════ MUI 스타일 다이얼로그/폼/셀렉트/칩/스낵바 (v16, 모바일 전용) ═════ */
:root { --mui-pr: #1976d2; --mui-pr-d: #1565c0; --mui-line: rgba(0,0,0,.23); --mui-txt: rgba(0,0,0,.87); --mui-dim: rgba(0,0,0,.6); --mui-err: #d32f2f; }
html.mui body, html.mui .ci-modal, html.mui button, html.mui input, html.mui select, html.mui textarea { font-family: Roboto, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* 풀스크린 다이얼로그 + 앱바 */
.modal-overlay { background: rgba(0,0,0,.5); }
.ci-modal { background: #fff; box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12); }
.ci-header { display: flex; align-items: center; gap: 4px; background: var(--mui-pr); color: #fff; border-bottom: 0; padding: env(safe-area-inset-top) max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); min-height: 56px; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); }
.ci-header h3 { order: 2; flex: 1; color: #fff; font-size: 19px; font-weight: 500; letter-spacing: .15px; margin: 0; padding: 0 4px; overflow: hidden; }
.ci-header h3 * { color: inherit; }
.ci-header h3 .badge, .ci-header h3 [class*="tag"] { background: rgba(255,255,255,.2) !important; color: #fff !important; border-color: transparent !important; }
.ci-close { order: 1; width: 48px; height: 48px; border-radius: 50%; background: transparent; color: #fff; font-size: 22px; }
.ci-close:hover, .ci-close:active { background: rgba(255,255,255,.14); color: #fff; }
.mui-act { order: 3; flex-shrink: 0; min-width: 64px; height: 40px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .4px; }
.mui-act:active { background: rgba(255,255,255,.14); }
.mui-act:disabled { opacity: .5; }
.ci-body { padding-top: 20px; color: var(--mui-txt); }
.ci-footer { gap: 8px; box-shadow: 0 -1px 0 rgba(0,0,0,.12); }
/* 버튼 (contained / outlined) */
.ci-btn, .btn-sm { border-radius: 4px !important; font-weight: 500; letter-spacing: .3px; transition: background-color .2s, box-shadow .2s; }
.ci-btn { background: #fff; color: var(--mui-pr); border: 1px solid rgba(25,118,210,.5); box-shadow: none; }
.ci-btn:active { background: rgba(25,118,210,.08); }
.ci-btn.pr { background: var(--mui-pr); border-color: var(--mui-pr); color: #fff; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); }
.ci-btn.pr:active { background: var(--mui-pr-d); box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); }
.ci-btn.gr { background: #2e7d32; border-color: #2e7d32; color: #fff; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14); }
.ci-btn.dg { background: var(--mui-err); border-color: var(--mui-err); color: #fff; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14); }
.ci-btn:disabled, .btn-sm:disabled { opacity: .45; box-shadow: none; }
.mui-rp-host { overflow: hidden; }
.mui-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: muiRp .55s ease-out forwards; }
@keyframes muiRp { to { transform: scale(1); opacity: 0; } }
/* 폼 그리드: 한 줄에 한 필드 (인라인 span 무시) */
.ci-grid, .ci-grid.c3 { display: flex !important; flex-direction: column; gap: 20px !important; }
.ci-grid > * { grid-column: auto !important; width: 100% !important; min-width: 0; }
/* MUI outlined TextField */
.mui-tf { position: relative; }
.ci-field.mui-tf > label:first-child { font-size: 13px; font-weight: 400; color: var(--mui-dim); margin: 0 0 6px 2px; letter-spacing: .15px; }
.ci-field.mui-notch > label:first-child { position: absolute; z-index: 1; left: 10px; top: -9px; margin: 0; padding: 0 5px; background: #fff; font-size: 12px; line-height: 18px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: color .15s; }
.ci-field.mui-tf input:not([type=checkbox]):not([type=radio]), .ci-field.mui-tf textarea, .ci-body .mui-sel, .mui-tf .mui-sel, .memo-input-wrap textarea { width: 100%; min-height: 56px; padding: 16px 14px; border: 1px solid var(--mui-line); border-radius: 4px !important; background: #fff; color: var(--mui-txt); font-size: 16px; line-height: 1.4; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.ci-field.mui-tf textarea, .memo-input-wrap textarea { min-height: 112px; resize: vertical; }
.ci-field.mui-tf input:focus, .ci-field.mui-tf textarea:focus, .memo-input-wrap textarea:focus, .mui-sel:focus-visible, .mui-sel.open { outline: none; border-color: var(--mui-pr) !important; box-shadow: inset 0 0 0 1px var(--mui-pr) !important; }
.ci-field.mui-tf:focus-within > label:first-child { color: var(--mui-pr); }
.ci-field.mui-tf input.inv { border-color: var(--mui-err) !important; box-shadow: inset 0 0 0 1px var(--mui-err) !important; }
.ci-field.mui-tf input::placeholder, .ci-field.mui-tf textarea::placeholder, .memo-input-wrap textarea::placeholder { color: rgba(0,0,0,.38); }
.ci-field .help, .ci-field small, .ci-body .help { display: block; font-size: 12px; color: var(--mui-dim); margin: 4px 14px 0; line-height: 1.66; letter-spacing: .3px; }
.memo-input-wrap.mui-tf { display: block; position: relative; margin-top: 18px; }
.memo-input-wrap .mui-float { position: absolute; z-index: 1; left: 10px; top: -9px; padding: 0 5px; background: #fff; font-size: 12px; line-height: 18px; color: var(--mui-dim); pointer-events: none; }
.memo-input-wrap:focus-within .mui-float { color: var(--mui-pr); }
/* 커스텀 셀렉트 (네이티브 팝업 차단) */
select.mui-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.mui-sel { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--mui-line); border-radius: 4px; background: #fff; color: var(--mui-txt); font-size: 16px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; }
.mui-sel-v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mui-sel-ar { flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(0,0,0,.54); }
.mui-sel:disabled { color: rgba(0,0,0,.38); background: rgba(0,0,0,.03); }
.ci-body .mui-sel, .mui-tf .mui-sel { display: flex; }
body.m-flt-open .filter-bar .mui-sel, body.m-flt-open .ot-filters .mui-sel { flex: 1 1 40%; min-height: 48px; }
body.m-flt-open .ot-filters label .mui-sel { flex: 1; }
.m-li.m-sel .mui-sel { max-width: 60%; min-height: 40px; }
#configView .mui-sel { min-height: 44px; }
.mui-menu-ov { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; background: rgba(0,0,0,.5); animation: ciFadeIn .15s ease; }
.mui-menu { width: 100%; max-height: 72vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12); animation: mUp .2s cubic-bezier(0,0,.2,1); }
.mui-menu-grab { width: 32px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.2); margin: 10px auto 4px; flex-shrink: 0; }
.mui-menu-title { padding: 8px 20px 10px; font-size: 14px; font-weight: 500; color: var(--mui-dim); border-bottom: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.mui-menu-list { overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }
.mui-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 20px; border: 0; background: transparent; color: var(--mui-txt); font-size: 16px; text-align: left; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.mui-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mui-opt.on { background: rgba(25,118,210,.08); color: var(--mui-pr); font-weight: 500; }
.mui-opt-ck { flex-shrink: 0; width: 18px; height: 10px; }
.mui-opt.on .mui-opt-ck { width: 7px; height: 13px; margin: 0 6px 4px 5px; border: solid var(--mui-pr); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.mui-opt:disabled { color: rgba(0,0,0,.38); }
/* 메모 태그 칩 */
.memo-format-bar.mui-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px !important; }
.mui-chip { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid #bdbdbd; border-radius: 16px; background: #fff; color: var(--mui-txt); font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s; }
.mui-chip:active { background: rgba(0,0,0,.06); }
.mui-chip.on { background: rgba(25,118,210,.12); border-color: var(--mui-pr); color: var(--mui-pr); font-weight: 500; }
.mui-chip[data-pre^="★"] { --c: #d32f2f; } .mui-chip[data-pre^="◆"] { --c: #1976d2; } .mui-chip[data-pre^="●"] { --c: #2e7d32; }
.mui-chip[data-pre^="■"] { --c: #212121; } .mui-chip[data-pre^="▲"] { --c: #ed6c02; } .mui-chip[data-pre^="♦"] { --c: #9c27b0; }
.mui-chip.on { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
/* 메모 목록 / 빈 상태 */
.memo-entry { border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08); border: 0 !important; }
.ci-body .no-calls { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; color: var(--mui-dim); font-size: 14px; }
.ci-body .no-calls::before { content: ""; width: 48px; height: 48px; border-radius: 50%; background: rgba(25,118,210,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231976d2'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") center / 24px no-repeat; }
/* 체크박스 / 스위치 */
.ci-body input[type=checkbox], #configView input[type=checkbox], .m-card input[type=checkbox] { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 20px !important; height: 20px !important; min-height: 20px !important; margin: 4px 6px 4px 2px; border: 2px solid rgba(0,0,0,.54); border-radius: 2px; background: #fff; vertical-align: middle; position: relative; cursor: pointer; transition: background-color .15s, border-color .15s; }
.ci-body input[type=checkbox]:checked, #configView input[type=checkbox]:checked, .m-card input[type=checkbox]:checked { background: var(--mui-pr); border-color: var(--mui-pr); }
.ci-body input[type=checkbox]:checked::after, #configView input[type=checkbox]:checked::after, .m-card input[type=checkbox]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ci-body input[type=checkbox]:disabled, #configView input[type=checkbox]:disabled { opacity: .4; }
.cfg-row input[type=checkbox] { width: 38px !important; height: 20px !important; min-height: 20px !important; border: 0 !important; border-radius: 10px !important; background: rgba(0,0,0,.38) !important; margin-top: 6px; }
.cfg-row input[type=checkbox]::after { content: "" !important; position: absolute; left: -2px !important; top: -2px !important; width: 24px !important; height: 24px !important; border: 0 !important; border-radius: 50%; background: #fafafa; transform: none !important; box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.12); transition: left .15s; }
.cfg-row input[type=checkbox]:checked { background: rgba(25,118,210,.5) !important; }
.cfg-row input[type=checkbox]:checked::after { left: 16px !important; background: var(--mui-pr); }
/* 스낵바 (토스트) — 안내 파랑, 실패·오류 빨강. 위치는 화면 가운데 */
#toasts { align-items: center; }
.toast { width: 100%; max-width: 440px; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 12px; background: #1565c0; color: #fff; font-size: 14px; letter-spacing: .25px; line-height: 1.45; text-align: center; box-shadow: 0 12px 40px rgba(15,23,42,.28); }
.toast.ok { background: #1565c0; }
.toast.err, .toast.warn { background: #c62828; }
/* 필터 시트도 MUI 바텀시트 느낌 */
body.m-flt-open .filter-bar, body.m-flt-open .ot-filters { border-radius: 16px 16px 0 0; box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12); }
body.m-flt-open .filter-bar input, body.m-flt-open .ot-filters input { border-radius: 4px; border-color: var(--mui-line); }
/* 확인(confirm) 다이얼로그는 MUI 기본 다이얼로그 (가운데, 텍스트 버튼) */
.mui-confirm.modal-overlay { align-items: center; justify-content: center; padding: 24px; }
.mui-confirm .ci-modal { width: 100% !important; max-width: 400px !important; height: auto !important; border-radius: 4px !important; animation: ciFadeIn .15s ease; }
.mui-confirm .ci-header { background: #fff; color: var(--mui-txt); box-shadow: none; padding: 16px 24px 0; min-height: 0; }
.mui-confirm .ci-header h3 { color: var(--mui-txt); font-size: 20px; padding: 0; }
.mui-confirm .ci-close { display: none; }
.mui-confirm .ci-body { padding: 12px 24px 8px; color: var(--mui-dim); font-size: 16px; }
.mui-confirm .ci-footer { position: static; justify-content: flex-end; box-shadow: none; padding: 8px; }
.mui-confirm .ci-footer .ci-btn { flex: 0 0 auto; min-width: 64px; min-height: 40px; padding: 0 12px; font-size: 15px; background: transparent; border: 0; box-shadow: none; color: var(--mui-pr); }
.mui-confirm .ci-footer .ci-btn.dg { color: var(--mui-err); }
/* 대시보드 상담사 현황: 2~3줄 높이로 고정 + 카드 안 세로 스크롤, 제목 고정, 하단 페이드 */
.ext-roster { position: relative; max-height: 124px; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; align-content: flex-start; padding-top: 0 !important; padding-bottom: 0 !important; scrollbar-width: thin; }
.ext-roster .er-title { position: sticky; top: 0; z-index: 1; flex: 0 0 100%; margin: 0; padding: 10px 0 4px; background: #fff; }
.ext-roster::after { content: ""; position: sticky; bottom: 0; flex: 0 0 100%; height: 22px; margin-top: -16px; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; transition: opacity .2s; }
.ext-roster.er-end::after { opacity: 0; }
.ext-roster.er-more .er-title::after { content: "↓ 스크롤하여 모두 보기"; float: right; font-size: 11px; font-weight: 400; color: rgba(0,0,0,.45); }
.ext-roster.er-end .er-title::after { content: none; }
.memo-list-wrap { display: flex; flex-direction: column; gap: 8px; }
.memo-entry { padding: 10px 12px !important; margin: 0 !important; background: #fff; }
.memo-entry-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--mui-dim); }
.memo-entry-agent { font-weight: 500; color: var(--mui-txt); }
.memo-entry-del { color: var(--mui-err); margin-left: 6px; padding: 4px; }
.memo-entry-text { font-size: 14px; line-height: 1.5; color: var(--mui-txt); }
.ci-field.mui-tf input::-webkit-calendar-picker-indicator { opacity: .54; }
@media (hover: none) { .mui-chip:hover, .mui-chip:active:not(.on) { background: #fff; } }
/* 필터 시트: 라벨 위 + MUI 버튼 */
body.m-flt-open .ot-filters label { flex-direction: column; align-items: stretch; gap: 4px; font-size: 12px; color: var(--mui-dim); letter-spacing: .15px; }
body.m-flt-open .ot-filters label:focus-within { color: var(--mui-pr); }
body.m-flt-open .ot-filters label .mui-sel, body.m-flt-open .ot-filters label input { flex: none; width: 100%; min-height: 48px; }
body.m-flt-open .filter-bar input, body.m-flt-open .ot-filters input { min-height: 48px; }
body.m-flt-open .filter-bar input:focus, body.m-flt-open .ot-filters input:focus { outline: none; border-color: var(--mui-pr); box-shadow: inset 0 0 0 1px var(--mui-pr); }
.m-sheet-done { border-radius: 4px; background: transparent; color: var(--mui-pr); font-weight: 500; font-size: 15px; }
.m-sheet-done:active { background: rgba(25,118,210,.08); }
body.m-flt-open .ot-btn { border-radius: 4px; font-weight: 500; border: 1px solid rgba(25,118,210,.5); background: #fff; color: var(--mui-pr); }
body.m-flt-open .ot-btn.pr, body.m-flt-open .ot-btn.dark, body.m-flt-open .ot-btn[data-a="search"], body.m-flt-open [data-crm="search"] { background: var(--mui-pr); border-color: var(--mui-pr); color: #fff; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); }
body.m-flt-open .range-btn, body.m-flt-open .filter-chip { border-radius: 16px; }
/* 상담사 현황: 2열 그리드 (칸을 꽉 채움, 한 줄: 이름…  상담중 N · 완료 N) */
#itkRoster { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
#itkRoster .er-title, #itkRoster .er-none, #itkRoster::after { grid-column: 1 / -1; }
#itkRoster .er-item { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; height: 32px; padding: 0 10px; border-radius: 16px; font-size: 12px; white-space: nowrap; overflow: hidden; }
#itkRoster .er-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
#itkRoster .er-c { flex: 0 0 auto; color: var(--mui-dim); }
@media (max-width: 374px) { #itkRoster .er-item { font-size: 11px; padding: 0 8px; gap: 4px; } }
/* 더보기: 앱 정보 */
.m-app-li { cursor: default; }
.m-li[data-app] small, .m-app-li small { margin-left: auto; margin-right: 6px; color: var(--mui-dim); }
.m-li .mui-sel span.mui-sel-v { flex: 1 1 auto; }
.m-li .mui-sel span.mui-sel-ar { flex: 0 0 auto; }
.m-li.m-sel .mui-sel { flex: 0 1 60%; }
/* U+ 전화 연동 (모바일) */
#uplusView .card { background: #fff; border: 1px solid var(--m-line); border-radius: 14px; overflow: hidden; min-width: 0; }
#uplusView .card-header { padding: 12px 14px; border-bottom: 1px solid var(--m-line); }
#uplusView .stbl { display: block; overflow-x: auto; }
#uplusView input { font-size: 16px; min-height: 42px; max-width: 100%; }
#uplusView code, #uplusView .mono { word-break: break-all; }
.x-acct-pop { position: fixed; top: 56px; right: 8px; }
.cfg-row input[type=checkbox] { margin-right: 14px; margin-left: 4px; } /* 스위치 손잡이가 글자에 겹치지 않게 */
/* 하단 탭: goldenChart 앱처럼 짙은 파랑 바탕 + 흰 아이콘·글자, 선택 탭은 밝은 둥근 아이콘 상자 (안드로이드 내비게이션 바도 같은 색) */
:root { --m-tabbg: #0f3ca8; --m-tabon: rgba(255,255,255,.22); --m-tabdim: rgba(255,255,255,.74); }
.m-tabs { background: var(--m-tabbg); border-top: 0; box-shadow: 0 -2px 12px rgba(11,58,164,.28); }
.m-tabs button { color: var(--m-tabdim); gap: 2px; -webkit-tap-highlight-color: rgba(255,255,255,.15); }
.m-tabs button svg { box-sizing: content-box; padding: 3px 16px; border-radius: 16px; transition: background-color .15s; }
.m-tabs button.on { color: #fff; font-weight: 800; }
.m-tabs button.on svg { background: var(--m-tabon); }
.m-tabs button:active svg { background: rgba(255,255,255,.14); }
.m-bdg { top: 3px; left: calc(50% + 8px); box-shadow: 0 0 0 2px var(--m-tabbg); }
/* 하단 탭 5개 (대시보드·상담관리·간편문의·설정·더보기) — 360px 에서도 한 줄 */
.m-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m-tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.2px; }
@media (max-width: 370px) { .m-tabs button { font-size: 10.5px; } .m-tabs button svg { padding: 3px 12px; } }
/* 더보기 = 전체 메뉴 (PC 사이드바와 같은 묶음) */
.m-more-title { padding: 2px 4px 10px; font-size: 13px; font-weight: 700; color: #6b7280; }
.m-menu-grp .m-gt { display: flex; align-items: center; gap: 6px; padding: 12px 16px 8px; color: #374151; font-size: 13px; }
.m-menu-grp .m-gt .x-ic { width: 16px; height: 16px; color: var(--m-pr); flex: 0 0 auto; }
.m-menu-li { min-height: 56px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.m-menu-li span { flex: 1 1 calc(100% - 30px); font-weight: 600; }
.m-menu-li i { order: 2; }
.m-menu-li small { order: 3; flex: 1 1 100%; font-size: 12px; line-height: 1.4; color: #8a94a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-menu-li.on span { color: var(--m-pr); }
html.theme-dark .m-more-title, html.theme-dark .m-menu-grp .m-gt { color: var(--text-dim); }
html.theme-dark .m-menu-grp .m-gt .x-ic, html.theme-dark .m-menu-li.on span { color: var(--primary); }
html.theme-dark .m-menu-li small { color: var(--text-dim); }
table.m-tbl td.m-dash { display: none; } /* 값 없는 칸('-')은 카드에서 뺀다 */
body.m-more-open #mFltBtn { visibility: hidden; }
/* 상담관리 카드: 번호는 글자(누르면 상세), 전화는 오른쪽 둥근 버튼 */
.m-card .m-r2 .m-tel { color: #111827; }
.m-call { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: #e8f0fe; color: var(--m-pr); text-decoration: none; }
.m-call:active { background: #d2e3fc; }
.m-card .m-r2 .m-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-card .m-memo { -webkit-line-clamp: 1; }
/* 고객 상세 상담내역 (모바일): 글자 조금 크게 */
.memo-compose .memo-format-bar.mui-chips { margin: 4px 0 2px !important; }
.memo-compose .memo-input-wrap.mui-tf { margin-top: 14px; }
.memo-rows { max-height: none; border-radius: 12px; }
/* 한 줄 흐름: 일시·작성자 바로 뒤에 내용, 길면 다음 줄로 이어짐 */
.memo-row { display: block; padding: 10px 12px; font-size: 15.5px; line-height: 1.55; }
.memo-when, .memo-who { display: inline; margin-right: 8px; font-size: 13.5px; }
.memo-txt { display: inline; }
.memo-del { float: right; min-height: 28px; margin: -3px -4px 0 8px; padding: 0 6px; font-size: 13px; }
/* 상담사: 대시보드 탭 없음 → 4탭 */
.m-tabs button[hidden] { display: none; }
body.role-agent .m-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 필터 시트 — 날짜 빠른 선택 줄은 날짜 아래 한 줄 전체 */
body.m-flt-open #flt .qd-row { display: flex; width: 100%; gap: 6px; margin: 2px 0 4px; }
body.m-flt-open #flt .qd-row .range-btn { flex: 1; justify-content: center; }

/* 설정 화면 — 모바일: 위 묶음 탭 · 아래 본문(PC와 같음). 백업관리 등 st-side 는 그대로 */
.st-shell { display: block; margin: 0; }
.st-shell.st-top { display: flex; flex-direction: column; gap: 8px; }
.st-side { position: static; border-radius: 14px; padding: 6px; }
.st-side-t { padding: 10px 10px 6px; }
.st-shell:not(.st-top) .st-cat { padding: 14px 12px; border: 0; border-bottom: 1px solid var(--m-line, #eee); border-radius: 0; }
.st-shell:not(.st-top) .st-cat:last-child { border-bottom: 0; }
.st-shell:not(.st-top) .st-cat.on { background: transparent; color: var(--text); }
.st-shell:not(.st-top) .st-cat .st-chev { display: block; }
.st-shell:not(.st-top):not(.st-list) .st-side { display: none; }
.st-shell:not(.st-top).st-list .st-main { display: none; }
.st-shell.st-top > .st-cats {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--m-line, #eee); margin: 0 -4px; padding: 0 4px;
}
.st-shell.st-top > .st-cats .st-cat { flex: none; padding: 10px 12px; white-space: nowrap; font-size: 13px; }
.st-shell.st-top > .st-cats .st-cat svg { width: 16px; height: 16px; }
.st-main { border: 0; background: transparent; border-radius: 0; min-height: 0; }
.st-back { display: none; }
.st-shell:not(.st-top) .st-back { display: block; border: 0; background: none; color: var(--primary); font-size: 15px; font-weight: 600; text-align: left; padding: 0 0 4px; cursor: pointer; }
.st-head { padding: 2px 0 0; }
.st-gh { flex-wrap: wrap; }
.hd-act .ipg-add { width: 100%; max-width: 220px; }
.st-body { padding: 0; }
.st-row { flex-direction: column; align-items: stretch; gap: 8px; }
.st-c { max-width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.st-row .st-c:has(.st-sw:only-child) { position: absolute; right: 16px; }
.st-row:has(.st-sw) { position: relative; padding-right: 72px; }
.st-foot { position: sticky; bottom: 64px; padding: 10px 12px; }
.st-gb > .stbl, .st-gb > table { margin: 8px; width: calc(100% - 16px); }
#setShell .st-gb > .stbl, #setShell .st-gb > table { margin: 0; width: 100%; }
.st-sw input[type=checkbox] { width: 100% !important; height: 100% !important; opacity: 0 !important; }

.m-memo-row { display: flex; align-items: flex-start; gap: 8px; }
.m-memo-row > .m-memo { flex: 1 1 auto; min-width: 0; }

/* t226u: 미연결 내선 배너·배지(휴대폰) */
.unl-banner { margin: 0 0 8px; padding: 8px 10px; font-size: 12.5px; align-items: flex-start; }
.unl-banner .unl-help { display: block; margin-top: 2px; }
.m-card .m-agent .unl-badge { font-size: 11.5px; padding: 0 6px; }
/* 상담관리: 페이지당 수는 아래 페이지 칸에만 있음 → 모바일에서도 보이게 */
#crmPager .page-size { display: inline-flex !important; }