/* SDP-CRM (PHP) 기본 스타일 — 0단계 뼈대.
   Next.js 판의 디자인 토큰(Modern B2B SaaS)을 최소로 옮긴다. 색·간격은
   재작성이 진행되며 docs/DESIGN_SYSTEM.md 를 따라 채운다. */

:root {
  --bg: #f6f7f9;
  --surface: #fff;
  --fg: #1a1d21;
  --muted: #6b7280;
  --border: #e5e8ee;
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --sidebar: #111a33;
  --sidebar-fg: #aab4c8;
  --radius: 12px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-pop: 0 12px 32px rgba(15,23,42,.14);
  --si1: #7aa5ff; --si2: #5ed3b0; --si3: #ffc46b; --si4: #f894b3; --si5: #b7a3ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
}
a { color: inherit; text-decoration: none; }

/* ── 로그인 ── */
body.auth { display: grid; place-items: center; background: var(--bg); }
.auth-card {
  width: min(360px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .3);
}
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label span { font-size: 12px; color: var(--muted); font-weight: 600; }
.auth-form input {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 15px; font-family: inherit;
}
.auth-form input:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.form-error {
  background: #fee2e2; color: #7f1d1d;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 16px 0 0;
}

.brand { font-weight: 800; font-size: 18px; }
.brand span { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }
body.auth .brand span, .sidebar .brand span { opacity: .7; }

.btn-primary {
  background: var(--brand); color: #fff; border: 0; border-radius: 8px;
  padding: 11px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { background: var(--brand-hover); }

/* ── 셸(사이드바 + 본문) ── */
.shell { display: grid; grid-template-columns: 258px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, #16213f 0%, #111a33 100%);
  color: var(--sidebar-fg); padding: 16px 12px 12px;
  display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0;
}
/* 브랜드 */
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #fff; font-weight: 800; font-size: 12px; color: #1d4ed8; letter-spacing: -.5px; line-height: .9; box-shadow: 0 2px 8px rgba(0,0,0,.25); flex-shrink: 0; }
.brand-mark i { font-style: normal; display: block; font-size: 8px; color: #64748b; font-weight: 700; letter-spacing: 1px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; font-weight: 800; }
.brand-txt b { font-weight: 800; }
.brand-txt span { font-size: 10.5px; font-weight: 500; color: #7f8aa6; margin-top: 2px; }
/* 검색 */
.side-search { position: relative; margin: 0 4px 12px; }
.side-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #6b7794; }
.side-search input { width: 100%; border: 1px solid #26324f; background: #0e1730; color: #dbe3f0; border-radius: 10px; padding: 11px 12px 11px 36px; font-size: 14px; font-family: inherit; }
.side-search input::placeholder { color: #6b7794; }
.side-search input:focus { outline: none; border-color: #3b82f6; background: #0c142a; }
/* 내비 (3단계 중첩 접힘 메뉴) */
.side-nav { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; margin: 4px -2px 0; padding: 0 2px; scrollbar-width: thin; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: #26324f; border-radius: 3px; }
.nav-grp { margin-top: 6px; }
.nav-grp-btn { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: transparent; color: #d5dcea; font-family: inherit; font-size: 15px; font-weight: 700; padding: 11px 10px; border-radius: 9px; cursor: pointer; text-align: left; }
.nav-grp-btn:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-grp-ic { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; }
.nav-grp-ic svg { width: 20px; height: 20px; }
.nav-grp-ic.c1 { color: var(--si1); } .nav-grp-ic.c2 { color: var(--si2); } .nav-grp-ic.c3 { color: var(--si3); } .nav-grp-ic.c4 { color: var(--si4); } .nav-grp-ic.c5 { color: var(--si5); } .nav-grp-ic.c6 { color: #7c3aed; } .nav-grp-ic.c0 { color: #8592ab; }
.nav-grp-label { flex: 1; min-width: 0; }
.nav-chev { display: grid; place-items: center; transition: transform .2s ease; color: #6b7794; flex-shrink: 0; }
.nav-chev svg { width: 17px; height: 17px; }
.nav-grp.is-open > .nav-grp-btn .nav-chev { transform: rotate(90deg); }
.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-grp.is-open > .nav-sub { grid-template-rows: 1fr; }
.nav-sub-in { overflow: hidden; min-height: 0; }
.nav-item { display: block; padding: 10px 10px; border-radius: 9px; color: #aab4c8; font-size: 15px; font-weight: 500; position: relative; transition: background .12s, color .12s; }
.nav-item.has-ic { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 700; color: #d5dcea; }
.nav-item.has-ic .nav-grp-ic svg { width: 20px; height: 20px; }
.nav-item.lvl-1 { padding: 9px 10px 9px 46px; font-size: 14.5px; }
.nav-item.lvl-2 { padding: 8px 10px 8px 46px; font-size: 13.5px; }
.nav-item.lvl-3 { padding: 7px 10px 7px 60px; font-size: 13.5px; }
.nav-sub .nav-grp-btn.lvl-1 { padding-left: 46px; font-size: 14.5px; font-weight: 600; }
.nav-sub .nav-grp-btn.lvl-2 { padding-left: 46px; font-size: 13.5px; font-weight: 500; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #eef2f8; }
.nav-item.is-active { background: rgba(59,130,246,.18); color: #fff; font-weight: 600; }
.nav-item.is-active::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 3px; background: #3b82f6; }
.nav-item.has-ic.is-active::before { display: none; }
/* 하단 사용자 */
.side-user { display: flex; align-items: center; gap: 9px; padding: 10px 8px 4px; margin-top: 8px; border-top: 1px solid #22304d; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.side-user-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.side-user-txt b { font-size: 13px; color: #eef2f8; font-weight: 600; }
.side-user-txt span { font-size: 11px; color: #7f8aa6; }
.side-logout button { border: 0; background: transparent; color: #7f8aa6; font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.side-logout button:hover { color: #fff; background: rgba(255,255,255,.06); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { min-width: 0; }
.page-h1 { font-weight: 800; font-size: 20px; margin: 0; letter-spacing: -.3px; }
.page-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); cursor: pointer; border: 1px solid transparent; }
.icon-btn:hover { background: #f1f4f9; color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }
.topbar-user { display: flex; align-items: center; gap: 8px; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--border); padding: 0 0 0 12px; }
.topbar-user b { font-size: 13px; font-weight: 600; }
.topbar-user em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }

.content { padding: 24px 28px; }
.page-desc { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card);
}
.stat:hover { border-color: #d3dae6; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-value { font-size: 28px; font-weight: 800; }
.stat-value em { font-size: 14px; font-weight: 400; color: var(--muted); font-style: normal; margin-left: 4px; }

.scaffold-note {
  margin-top: 24px; padding: 14px 16px; background: #eef4ff; color: #1d4ed8;
  border-radius: var(--radius); font-size: 13px; line-height: 1.6;
}

@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* ── 1단계: 목록·상세·오늘 할 일 ── */
.muted { color: var(--muted); }
.strong { font-weight: 700; }

.toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search { flex: 1; max-width: 360px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; }
.search:focus { outline: 2px solid var(--brand); outline-offset: 0; }
.btn-line { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 9px 14px; font-size: 14px; cursor: pointer; color: var(--fg); }
.btn-line:hover { border-color: #c7d0e0; }

.empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 24px; text-align: center; color: var(--muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th, .grid td { padding: 11px 14px; text-align: left; white-space: nowrap; }
.grid thead th { background: #fafbfc; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 12px; }
.grid tbody tr { border-top: 1px solid var(--border); cursor: pointer; }
.grid tbody tr:first-child { border-top: 0; }
.grid tbody tr:hover { background: #f7f9fc; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }

.badge { display: inline-block; background: #eef2f7; color: #334155; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.badge.sm { font-size: 11px; padding: 1px 6px; }
.chip { display: inline-block; background: #e0edff; color: #1d4ed8; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; margin-left: 4px; }
.chip.late { background: #fee2e2; color: #b91c1c; }

.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.pager a { color: var(--brand); font-weight: 600; }
.pager-info { color: var(--muted); font-size: 13px; }

/* 상세 */
.back { color: var(--brand); font-weight: 600; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); margin-bottom: 16px; }
.card-title { font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.memo { margin: 14px 0 0; font-size: 13px; color: #475569; line-height: 1.6; }
.memo strong { color: var(--fg); margin-right: 6px; }
.row-line { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.row-line:first-child { border-top: 0; padding-top: 0; }

.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.log li:first-child { border-top: 0; }
.log-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.log-body { color: #334155; }
.log-next { color: var(--brand); font-size: 12px; }

/* 오늘 할 일 */
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.task { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.task.is-late { border-color: #fecaca; }
.task-time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; font-size: 13px; padding-top: 1px; }
.task-main { min-width: 0; flex: 1; }
.task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-memo { color: #475569; font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* ── 2단계: 쓰기 (연락 등록·업무 처리) ── */
.flash { border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 600; }
.flash-ok { background: #dcfce7; color: #166534; }
.flash-err { background: #fee2e2; color: #b91c1c; }

.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.contact-form label > span { color: var(--muted); font-weight: 600; font-size: 12px; }
.contact-form input, .contact-form select, .contact-form textarea {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand);
}
.contact-form textarea { resize: vertical; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > label { flex: 1; min-width: 160px; }
.form-row > label.grow { flex: 2; }
.form-actions { display: flex; justify-content: flex-end; }
.btn-primary.sm { padding: 8px 18px; font-size: 14px; }

/* 오늘 할 일 처리 버튼 */
.task { align-items: flex-start; }
.task-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.task-actions form { margin: 0; }
.btn-primary.xs, .btn-line.xs { padding: 5px 12px; font-size: 12px; border-radius: 7px; }
.btn-line.xs.danger { color: #b91c1c; }
.btn-line.xs.danger:hover { border-color: #fecaca; background: #fef2f2; }

@media (max-width: 640px) {
  .task { flex-wrap: wrap; }
  .task-actions { width: 100%; margin-top: 8px; }
}

/* CSO 실적 보드 — 셀 단위로 눌러 여는 표라 행 전체를 링크로 두지 않는다 */
.grid.board tbody tr { cursor: default; }
.grid.board .cell-link { color: var(--fg); text-decoration: none; }
.grid.board .cell-link:hover { color: var(--brand); text-decoration: underline; }
.grid.board td .muted.sm { display: block; font-size: 11px; font-weight: 400; }
.grid.board .amt-link {
  color: var(--fg); text-decoration: none;
  font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--border);
}
.grid.board .amt-link:hover { color: var(--brand); border-bottom-color: var(--brand); }
.grid.board td.is-selected { background: #eff4ff; box-shadow: inset 0 0 0 1.5px var(--brand); }
.grid.board tfoot td { border-top: 2px solid var(--border); background: #fafbfc; font-variant-numeric: tabular-nums; }
/* 딜러 고르개는 넉넉하게 — 라벨과 CSO/도매 표시가 길다 */
.toolbar select.search { min-width: 260px; max-width: 380px; }

/* 도매 보드 — 한 칸에 매출/수금 두 줄 */
.stat-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.grid.board th .wlegend { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.grid.board .wsale { display: block; font-variant-numeric: tabular-nums; }
.grid.board .wcoll { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.grid.board .amt-link .wsale { border-bottom: 1px dashed var(--border); }
.grid.board .amt-link:hover .wsale { border-bottom-color: var(--brand); }
.grid.board td.unpaid { color: #b91c1c; }
.grid.board tr.is-open { background: #eff4ff; }
.grid.board tr.is-open > td { border-top-color: var(--brand); }

/* 수금리포팅 — 안내·회전칩·채권연령 바 */
.notice {
  background: #f0f6ff; border: 1px solid #cfe0ff; color: #24427a;
  border-radius: var(--radius); padding: 12px 14px; font-size: 13px; line-height: 1.65; margin-bottom: 16px;
}
.filter-label { align-self: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.chip-btn {
  display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--fg); text-decoration: none; background: var(--surface);
}
.chip-btn:hover { border-color: var(--brand); color: var(--brand); }
.chip-btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ag-cell { min-width: 160px; }
.ag-bar { display: flex; height: 12px; width: 100%; min-width: 140px; border-radius: 6px; overflow: hidden; background: #eef2f7; }
.ag-seg { display: block; height: 100%; }
.ag-nd { background: #cbd5e1; } .ag-due { background: #2563eb; }
.ag-o1 { background: #f59e0b; } .ag-o2 { background: #ea580c; } .ag-o3 { background: #dc2626; }
.ag-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 2px 14px; font-size: 12px; color: var(--muted); }
.ag-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ag-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* 수금리스팅 — 증감·배지·강조 */
.notice.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.chip.warn { background: #fef3c7; color: #92400e; }
.grid.board td.due-amt { color: #b45309; }
.grid.board td.overdue-amt { color: #b91c1c; font-weight: 600; }
.delta-up { color: #b91c1c; font-variant-numeric: tabular-nums; }   /* 미수 늘어남 = 나쁨 */
.delta-down { color: #15803d; font-variant-numeric: tabular-nums; } /* 미수 줄어듦 = 좋음 */
.grid.board tfoot .delta-up, .grid.board tfoot .delta-down { font-weight: 700; }

/* 실적분석 — 추이 인라인 막대 + 실적 등락(상승=녹색, 하락=적색) */
.rowbar { height: 8px; width: 100%; max-width: 150px; background: #eef2f6; border-radius: 9999px; overflow: hidden; }
.rowbar > i { display: block; height: 100%; background: var(--brand); border-radius: 9999px; }
.chg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chg svg { width: 12px; height: 12px; }
.chg-up { color: #15803d; }
.chg-down { color: #b91c1c; font-weight: 600; }

/* 공지분석 — 색조 배지·최근 공지·분류 막대 */
.badge.tone-red { background: #fee2e2; color: #b91c1c; }
.badge.tone-amber { background: #fef3c7; color: #92400e; }
.badge.tone-green { background: #dcfce7; color: #15803d; }
.badge.tone-blue { background: #dbeafe; color: #1d4ed8; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.notice-list { list-style: none; display: flex; flex-direction: column; }
.notice-list li { padding: 12px 0; border-top: 1px solid var(--border); }
.notice-list li:first-child { border-top: 0; padding-top: 0; }
.notice-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.notice-sum { font-size: 13px; color: #475569; margin-top: 5px; line-height: 1.5; }
.cat-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cat-list li { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; }
.cat-name { font-size: 12px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-bar { height: 8px; background: #eef2f7; border-radius: 5px; overflow: hidden; }
.cat-fill { display: block; height: 100%; background: #93a3b8; border-radius: 5px; }
.cat-fill.tone-red { background: #ef4444; } .cat-fill.tone-amber { background: #f59e0b; }
.cat-fill.tone-green { background: #22c55e; } .cat-fill.tone-blue { background: #3b82f6; }
.cat-num { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* 카카오 — 탭·진행 배지·지시문 카드 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs .tab { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs .tab:hover { color: var(--fg); }
.tabs .tab.is-on { color: var(--brand); border-bottom-color: var(--brand); }
.pill-num { display: inline-block; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 3px; }
.pill-num.done { background: #dcfce7; color: #15803d; }
.pill-num.fail { background: #fee2e2; color: #b91c1c; }
.pill-num.wait { background: #eef2f7; color: #475569; }
.var { background: #eef2f7; border-radius: 5px; padding: 1px 6px; font-size: 12px; color: #1d4ed8; font-family: ui-monospace, monospace; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.preset-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.preset-body { background: #f7f9fc; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; }
.preset-memo { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* 딜러 목록 — 탭 카운트·필터·수명주기 뱃지 */
.tabs .tab .tab-n { display: inline-block; margin-left: 4px; font-size: 11px; color: var(--muted); background: #eef2f7; border-radius: 8px; padding: 0 6px; font-weight: 700; }
.tabs .tab.is-on .tab-n { background: #dbeafe; color: var(--brand); }
.filter-row { flex-wrap: wrap; }
.search.sm-sel { flex: 0 1 160px; min-width: 130px; }
.badge.lc-INFLOW { background: #e0e7ff; color: #3730a3; }
.badge.lc-APP_INSTALLED { background: #ccfbf1; color: #0f766e; }
.badge.lc-NEW_CONTRACT { background: #dbeafe; color: #1d4ed8; }
.badge.lc-REPORTING { background: #dcfce7; color: #15803d; }
.badge.lc-STALLED { background: #fee2e2; color: #b91c1c; }

/* 섹션 제목 (업무 목록 등) */
.section-h { font-size: 15px; font-weight: 800; margin: 22px 0 10px; }
.section-h .muted { font-weight: 400; font-size: 13px; }

/* 주간 스케줄 보드 */
.week-board { display: grid; gap: 10px; margin-top: 8px; }
.week-col { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0; }
.week-col.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.week-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: #fafbfc; }
.week-dow { font-weight: 800; font-size: 14px; }
.week-date { font-size: 12px; color: var(--muted); }
.week-cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: #eef2f7; border-radius: 8px; padding: 0 6px; }
.week-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.week-empty { text-align: center; color: var(--border); padding: 10px 0; }
.wcard { border: 1px solid var(--border); border-left: 3px solid #93a3b8; border-radius: 8px; padding: 8px 10px; background: #fff; }
.wcard.g-CONTACT { border-left-color: #2563eb; } .wcard.g-SEND { border-left-color: #f59e0b; } .wcard.g-CHECK { border-left-color: #14b8a6; }
.wcard.is-closed { opacity: .5; }
.wcard-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wcard-time { font-size: 11px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.wcard-body { margin-top: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wcard-actions { margin-top: 8px; display: flex; gap: 5px; }
.wcard-actions form { margin: 0; }
.ag-sw.g-CONTACT { background: #2563eb; } .ag-sw.g-SEND { background: #f59e0b; } .ag-sw.g-CHECK { background: #14b8a6; }
@media (max-width: 900px) { .week-board { grid-template-columns: repeat(2, 1fr) !important; } }

/* 내 업무 현황 — 일별 추이·퍼널·품질 */
.trend { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 4px 0; }
.trend-col { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.trend-bars { display: flex; align-items: flex-end; gap: 1px; width: 100%; height: 100%; }
.trend-bars .tb { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.tb.c { background: #2563eb; } .tb.d { background: #22c55e; } .tb.a { background: #f59e0b; }
.funnel { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.funnel li { display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; gap: 8px; }
.fn-label { font-size: 12px; font-weight: 600; }
.fn-bar { height: 12px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.fn-fill { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.fn-num { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.q-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 14px; }
.q-row strong { font-size: 18px; }
.q-row .muted { font-size: 12px; }
.cat-fill.lc-fill-INFLOW { background: #6366f1; } .cat-fill.lc-fill-APP_INSTALLED { background: #14b8a6; }
.cat-fill.lc-fill-NEW_CONTRACT { background: #3b82f6; } .cat-fill.lc-fill-REPORTING { background: #22c55e; } .cat-fill.lc-fill-STALLED { background: #ef4444; }

/* SDPC 에이전트 대화창 */
.agent-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: 0; border-radius: 9999px;
  padding: 12px 18px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  will-change: transform; animation: agent-float 3.2s ease-in-out infinite;
}
.agent-fab { cursor: pointer; touch-action: none; }
.agent-fab:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.agent-fab:active { transform: translateY(-1px) scale(.98); animation: none; }
.agent-fab.dragging { animation: none; cursor: grabbing; transform: none; box-shadow: 0 20px 34px rgba(37,99,235,.35); }
.agent-fab:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37,99,235,.35), 0 12px 24px rgba(37,99,235,.32); }
/* 둥둥 떠 있는 효과 — 위로 살짝 떠오르며 그림자가 넓어졌다 좁아진다. */
@keyframes agent-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 20px rgba(37,99,235,.40); }
  50% { transform: translateY(-7px); box-shadow: 0 18px 28px rgba(37,99,235,.24); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-fab { animation: none; box-shadow: 0 8px 20px rgba(37,99,235,.38); }
}
.agent-fab-icon { display: inline-grid; place-items: center; }
.agent-fab-icon svg { width: 46px; height: 46px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.agent-fab-label { text-align: center; line-height: 1.42; font-size: 13.5px; }
.agent-panel {
  position: fixed; right: 24px; bottom: 88px; z-index: 50;
  width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(15, 24, 48, .22); overflow: hidden;
}
/* hidden 속성을 존중한다 — 클래스의 display:flex 가 UA [hidden](display:none)을 덮어써
   패널이 늘 열린 채 본문을 가리던 버그를 막는다. 토글 버튼으로만 연다. */
.agent-panel[hidden] { display: none; }
/* 창 조절 — 헤더 드래그 이동 + 8방향 리사이즈 */
.agent-head { cursor: grab; user-select: none; }
.agent-head:active { cursor: grabbing; }
body.agent-dragging { cursor: inherit; user-select: none; }
body.agent-dragging .agent-panel { transition: none; }
.agent-rz { position: absolute; z-index: 6; }
.agent-rz-n { top: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.agent-rz-s { bottom: 0; left: 12px; right: 12px; height: 5px; cursor: ns-resize; }
.agent-rz-w { left: 0; top: 12px; bottom: 12px; width: 5px; cursor: ew-resize; }
.agent-rz-e { right: 0; top: 12px; bottom: 12px; width: 5px; cursor: ew-resize; }
.agent-rz-nw { top: 0; left: 0; width: 26px; height: 26px; cursor: nwse-resize; display: flex; align-items: flex-start; justify-content: flex-start; padding: 7px; }
.agent-rz-nw svg { width: 10px; height: 10px; }
.agent-rz-nw svg path { stroke: rgba(100,116,139,.5); transition: stroke .12s; }
.agent-rz-nw:hover svg path { stroke: rgba(51,65,85,.85); }
.agent-panel .agent-head { padding-left: 20px; }
.agent-rz-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.agent-rz-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.agent-rz-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.agent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.agent-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.agent-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #eef4ff; color: var(--brand); flex-shrink: 0; }
.agent-ic svg { width: 18px; height: 18px; }
.agent-title { font-weight: 700; font-size: 14.5px; }
.agent-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.agent-head-r { display: flex; gap: 2px; flex-shrink: 0; }
.agent-hbtn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 7px; }
.agent-hbtn:hover { background: #f1f5f9; color: var(--fg); }
.agent-hbtn svg { width: 17px; height: 17px; }
.agent-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; }
/* 인사말 + 추천 칩(대화 없을 때만) */
.agent-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.agent-intro-msg { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; border-top-left-radius: 4px; padding: 9px 12px; font-size: 12.5px; color: var(--fg); line-height: 1.55; }
.agent-suggests { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.agent-sugg { border: 1px solid rgba(37,99,235,.32); color: var(--brand); background: transparent; border-radius: 999px; padding: 7px 13px; font-size: 12.5px; text-align: left; cursor: pointer; font-family: inherit; line-height: 1.4; }
.agent-sugg:hover { background: #eff4ff; }
.agent-msg { display: flex; }
.agent-msg.user { justify-content: flex-end; }
.agent-bubble { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.agent-msg.model .agent-bubble { background: #f1f5f9; color: var(--fg); border-bottom-left-radius: 4px; }
.agent-msg.user .agent-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.agent-msg.is-pending .agent-bubble { color: var(--muted); }
.agent-msg.is-error .agent-bubble { background: #fef2f2; color: #b91c1c; }
.agent-input { display: flex; gap: 8px; padding: 12px 14px 8px; border-top: 1px solid var(--border); align-items: flex-end; }
.agent-input input, .agent-input textarea { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; font-size: 13.5px; font-family: inherit; }
.agent-input textarea { resize: none; line-height: 1.45; max-height: 120px; overflow-y: auto; display: block; }
.agent-input input:focus, .agent-input textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.agent-sendbtn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; cursor: pointer; flex-shrink: 0; }
.agent-sendbtn:hover { background: var(--brand-hover); }
.agent-sendbtn:disabled { opacity: .5; cursor: not-allowed; }
.agent-sendbtn svg { width: 17px; height: 17px; }
.agent-foot { font-size: 11px; color: var(--muted); padding: 0 14px 12px; margin: 0; line-height: 1.5; }
/* 답변 평가(👍/👎) */
.agent-fb { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.agent-fb-btn { border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px; opacity: .45; }
.agent-fb-btn:hover:not(:disabled) { opacity: 1; background: #eef2f7; }
.agent-fb-btn:disabled { cursor: default; }
.agent-fb.is-done .agent-fb-btn { opacity: .75; }
.agent-fb-said { font-size: 11px; color: var(--muted); margin-left: 2px; }

/* ── 도매 수금 리스팅 — 필터·증감 ───────────────────────────── */
.cl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.cl-filters .fg-field.grow { flex: 0 1 360px; }
.cl-search .fg-field { min-width: 0; }
.cl-search-row { display: flex; gap: 8px; }
.cl-search-row input { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-family: inherit; height: 40px; background: #f8fafc; }
.cl-search-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.cl-search-row .btn-line { display: inline-flex; align-items: center; gap: 5px; height: 40px; white-space: nowrap; }
.cl-search-row .btn-line svg { width: 14px; height: 14px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cl-trunc { background: #fffbeb; color: #b45309; font-size: 12.5px; padding: 8px 20px; margin: 0; border-bottom: 1px solid var(--border); }
.cl-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; vertical-align: middle; }
.delta-ic { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 500; }
.delta-ic svg { width: 12px; height: 12px; }
.delta-ic.delta-up { color: #b91c1c; }
.delta-ic.delta-down { color: #15803d; }

/* ── 도매 수금리포팅 — 안내·회전·채권 연령·드릴 ───────────────── */
.flash-note { display: flex; gap: 10px; background: #f1f5fb; border: 1px solid #dbe3ef; border-radius: 12px; padding: 13px 16px; margin-bottom: 16px; }
.flash-note .flash-ic { flex-shrink: 0; color: var(--brand); }
.flash-note .flash-ic svg { width: 18px; height: 18px; }
.flash-note p { margin: 0; font-size: 12.5px; line-height: 1.7; color: #475569; }
.flash-note b { color: var(--fg); font-weight: 700; }
.rot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rot-chip { padding: 4px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; color: var(--muted); text-decoration: none; background: var(--surface); }
.rot-chip:hover { background: #f1f5f9; }
.rot-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.aging-bar { display: flex; height: 10px; width: 100%; background: #eef2f6; border-radius: 9999px; overflow: hidden; }
.aging-seg { height: 100%; }
.aging-seg.notdue, .aging-dot.notdue { background: #16a34a; }
.aging-seg.due, .aging-dot.due { background: #d97706; }
.aging-seg.o1, .aging-dot.o1 { background: #f87171; }
.aging-seg.o2, .aging-dot.o2 { background: #ef4444; }
.aging-seg.o3, .aging-dot.o3 { background: #b91c1c; }
.aging-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 12px; }
.aging-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aging-legend .aging-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.aging-legend dt { color: var(--muted); margin: 0; }
.aging-legend dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.drill-chev { display: inline-grid; place-items: center; color: var(--muted); transition: transform .18s ease; }
.drill-chev svg { width: 16px; height: 16px; }
.drill-chev.on { transform: rotate(180deg); }
.grid.board tr.drill-row.is-open > td { background: #f1f5fb; }
.ar-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.ar-pager-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.ar-pager .pg { font-size: 12px; border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; text-decoration: none; color: var(--fg); font-variant-numeric: tabular-nums; }
.ar-pager .pg:hover { background: #f1f5f9; }
.ar-pager .pg.on { border-color: var(--brand); background: #eef4ff; color: var(--brand); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .drill-chev { transition: none; } }

/* ── CSO 거래처제품분석 — 3단 + 대체추천/미정산 보드 ───────────────── */
.pa-grid { display: grid; gap: 16px; align-items: start; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 1280px) { .pa-grid { grid-template-columns: minmax(0,1fr) 23rem; } }
@media (min-width: 1400px) { .pa-grid.has-third { grid-template-columns: minmax(0,1fr) 19rem 25rem; } }
@media (min-width: 1536px) { .pa-grid.has-third { grid-template-columns: minmax(0,1fr) 21rem 27rem; } }
@media (min-width: 1800px) { .pa-grid.has-third { grid-template-columns: minmax(0,1fr) 23rem 29rem; } }
/* 도매 제품분석 — 거래처는 알맞게, 품목별 이익은 넓게(제품명이 다 보이게) */
@media (min-width: 1280px) { .pa-grid.wp { grid-template-columns: 23rem minmax(0,1fr); } }
@media (min-width: 1400px) { .pa-grid.wp.has-third { grid-template-columns: 22rem minmax(0,1fr) 23rem; } }
@media (min-width: 1536px) { .pa-grid.wp.has-third { grid-template-columns: 24rem minmax(0,1fr) 25rem; } }
@media (min-width: 1800px) { .pa-grid.wp.has-third { grid-template-columns: 26rem minmax(0,1fr) 27rem; } }
/* 넓어진 품목별 이익 칸에선 품목명을 최대 2줄까지 펼쳐 다 보인다 */
.pa-grid.wp #g .pa-name-line { align-items: flex-start; }
.pa-grid.wp #g .pa-name-line .tname { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-grid .panel { margin-bottom: 0; display: flex; flex-direction: column; min-width: 0; }
.pa-scroll { max-height: 34rem; overflow: auto; }
/* 좁은 칸 표 — 품목명이 길어도 이익/이익률이 가로 스크롤에 가리지 않게 고정 폭 */
.pa-fixed { table-layout: fixed; width: 100%; }
.pa-fixed td, .pa-fixed th { overflow: hidden; }
.pa-fixed .pa-name-line { min-width: 0; }
.pa-scroll table.grid.board thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.pa-cust { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pa-cust svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.pa-cust-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-cust-sum { display: block; font-size: 11px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.pa-money { display: block; padding: 9px 12px; text-align: right; text-decoration: none; color: var(--fg); font-variant-numeric: tabular-nums; }
.pa-money:hover { background: #f1f5f9; text-decoration: underline; }
.pa-money.on { background: rgba(37,99,235,.12); color: var(--brand); font-weight: 700; }
.grid.board td.pa-cell { padding: 0; }
.pa-top { background: #f0fdf4; border-bottom: 1px solid var(--border); padding: 14px 18px; }
.pa-top-h { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #15803d; }
.pa-top-h svg { width: 14px; height: 14px; }
.pa-top-name { font-weight: 700; font-size: 13.5px; margin: 6px 0 0; }
.pa-top-mk { font-size: 11.5px; color: var(--muted); margin: 1px 0 0; }
.pa-top-val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 7px 0 2px; }
.pa-top-val em { font-size: 12px; font-weight: 600; color: var(--muted); font-style: normal; margin-left: 3px; }
.pa-sub { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pa-name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pa-name-line .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-sub2 { display: block; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.pa-tab { display: inline-block; padding: 4px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; color: var(--muted); text-decoration: none; }
.pa-tab:hover { background: #f1f5f9; }
.pa-tab.on { border-color: var(--brand); background: #eef4ff; color: var(--brand); font-weight: 600; }
.pa-tab .amt { margin-left: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
.pa-sumbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; background: #f8fafc; border-bottom: 1px solid var(--border); }
.pa-sumbar .nm { font-weight: 700; font-size: 13px; }
.pa-close { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); color: var(--muted); background: var(--surface); cursor: pointer; text-decoration: none; }
.pa-close:hover { background: #f1f5f9; color: var(--fg); }
.pa-close svg { width: 15px; height: 15px; }
.pa-gain { color: #15803d; } .pa-loss { color: #b91c1c; }
.reason { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.reason.settled { background: #dcfce7; color: #15803d; }
.reason.min { background: #dbeafe; color: var(--brand); }
.reason.best { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.badge.warn2 { background: #fef3c7; color: #b45309; }
.badge.out { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.badge.brandy { background: #dbeafe; color: var(--brand); }
.badge.okk { background: #dcfce7; color: #15803d; }
/* 급여/비급여 — 급여는 수수료율(파랑), 비급여는 매입-판매 마진(슬레이트) */
.badge.b-cov { background: #e0edff; color: #1d4ed8; }
.badge.b-non { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.badge.b-unk { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.b-cov-t { color: #1d4ed8; }
.b-non-t { color: #be123c; }
.b-unk-t { color: var(--muted); }

/* ── 딜러 수명주기 칸반 보기 ─────────────────────────────── */
.lv-kanban { padding: 12px; }
.dk-scroll { overflow-x: auto; padding-bottom: 4px; }
.dk-cols { display: flex; gap: 12px; align-items: flex-start; }
.dk-col { width: 264px; flex: 0 0 264px; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-elevated, #fff); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.dk-head { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.dk-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dk-head h3 { font-size: .875rem; font-weight: 600; margin: 0; color: inherit; }
.dk-n { font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; }
.dk-hint { font-size: .75rem; margin: 2px 0 0; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-head.dk-muted { background: #f1f5f9; color: #475569; }
.dk-head.dk-info { background: #e0f2fe; color: #0369a1; }
.dk-head.dk-brand { background: #eef2ff; color: var(--brand); }
.dk-head.dk-ok { background: #dcfce7; color: #15803d; }
.dk-head.dk-warn { background: #fef3c7; color: #b45309; }
.dk-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 96px; flex: 1; background: #f8fafc; }
.dk-empty { color: var(--muted); font-size: .75rem; text-align: center; padding: 12px 4px; margin: 0; }
.dk-card { display: block; background: var(--surface-elevated, #fff); border: 1px solid var(--border); border-radius: 10px; padding: 12px; transition: border-color .12s ease; text-decoration: none; color: inherit; }
.dk-card:hover, .dk-card:focus-visible { border-color: var(--brand); outline: none; }
.dk-name { font-size: .875rem; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-co { font-size: .75rem; color: var(--muted); margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-flag { margin-top: 6px; }
.dk-owner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.dk-owner-n { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-sub { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
/* 관계그룹·관리상태 배지 톤 */
.badge.gt-ok { background: #dcfce7; color: #15803d; }
.badge.gt-info { background: #dbeafe; color: #1d4ed8; }
.badge.gt-warn { background: #fef3c7; color: #b45309; }
.badge.gt-err { background: #fee2e2; color: #b91c1c; }
.badge.gt-neu { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

/* ── 딜러 상세 (원본 dealers/[id]) ─────────────────────── */
/* 배지 톤 */
.badge.bt-neutral { background: #f1f5f9; color: #475569; }
.badge.bt-info { background: #e0f2fe; color: #0369a1; }
.badge.bt-brand { background: #eef2ff; color: var(--brand); }
.badge.bt-success { background: #dcfce7; color: #15803d; }
.badge.bt-warning { background: #fef3c7; color: #b45309; }
.badge.bt-error { background: #fee2e2; color: #b91c1c; }
/* 상태 칩 행 */
.dd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; }
.dd-chip-g { display: inline-flex; align-items: center; gap: 6px; }
.dd-chip-l { font-size: 11px; color: var(--muted); }
.dd-warn { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; border-radius: 8px; font-size: .8rem; }
.dd-warn svg { width: 15px; height: 15px; flex-shrink: 0; }
.dd-warn-sep { color: #fca5a5; }
/* 레이아웃 */
.dd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) { .dd-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.dd-main, .dd-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* 딜러 정보 4열 */
.dd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 14px 0 0; }
@media (min-width: 900px) { .dd-fields { grid-template-columns: repeat(4, 1fr); } }
.dd-f dt { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.dd-f dd { font-size: .875rem; margin: 0; word-break: break-word; }
.dd-f-wide { grid-column: 1 / -1; }
.dd-f dd.pre { white-space: pre-wrap; }
.dd-link { color: var(--brand); text-decoration: none; }
.dd-link:hover { text-decoration: underline; }
.dd-sep { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.dd-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dd-sub-head h3 { font-size: .875rem; font-weight: 600; margin: 0; }
.dd-sub-act { display: inline-flex; align-items: center; gap: 8px; }
.dd-cnt { font-size: .75rem; color: var(--muted); font-weight: 600; }
.dd-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dd-dot { color: var(--muted); }
.dd-unknown { font-size: .8rem; color: #b45309; margin: 8px 0 0; }
.dd-empty-line { margin: 4px 0 0; }
.dd-rel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dd-rel li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dd-rel-p { font-size: .875rem; font-weight: 500; display: block; }
.dd-rel-s { font-size: .8rem; color: var(--muted); display: block; margin-top: 2px; }
.dd-del { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px; }
.dd-del:hover { color: #b91c1c; background: #fef2f2; }
.dd-del svg { width: 15px; height: 15px; }
/* 최근 문의/응대 */
.dd-two { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .dd-two { grid-template-columns: 1fr 1fr; } }
.dd-quote { font-size: .875rem; margin: 10px 0 6px; white-space: pre-wrap; }
/* 히스토리 타임라인 */
.dd-tl { list-style: none; margin: 12px 0 0; padding: 0; }
.dd-tl-i { position: relative; padding: 0 0 16px 22px; }
.dd-tl-i:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--border); }
.dd-tl-dot { position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface-elevated, #fff); }
.dot-event { background: var(--brand); }
.dot-activity { background: #16a34a; }
.dot-info { background: #d97706; }
.dd-tl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dd-tl-t { font-size: .875rem; font-weight: 600; }
.dd-tl-w { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-tl-d { font-size: .8rem; color: var(--fg); margin: 3px 0 0; white-space: pre-wrap; }
.dd-tl-f { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
/* 사이드바 요소 */
.dd-kv { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.dd-kv div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dd-kv dt { font-size: .8rem; color: var(--muted); }
.dd-kv dd { font-size: .875rem; font-weight: 600; margin: 0; }
.dd-rev { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .8rem; }
.dd-rev th, .dd-rev td { padding: 5px 6px; border-top: 1px solid var(--border); text-align: left; }
.dd-rev th.num, .dd-rev td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dd-rev th { color: var(--muted); font-weight: 500; border-top: 0; }
.dd-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; padding: 0; }
.dd-steps li { font-size: .75rem; padding: 4px 8px; border-radius: 6px; border: 1px dashed var(--border); color: var(--muted); }
.dd-steps li.on { border-style: solid; border-color: var(--brand); color: var(--brand); font-weight: 600; }
.dd-notice-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; }
.dd-nr-i { color: var(--muted); display: inline-flex; } .dd-nr-i svg { width: 18px; height: 18px; }
.dd-nr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dd-nr-t b { font-size: .8rem; } .dd-nr-t em { font-size: 11px; color: var(--muted); font-style: normal; }
.dd-nr-r { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.dd-nr-r.on { color: #b45309; font-weight: 600; }
.dd-alerts { margin-top: 10px; max-height: 24rem; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.dd-alert { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.dd-alert.unread { background: #fffbeb; border-color: #fde68a; }
.dd-alert-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dd-alert-t { font-size: .8rem; font-weight: 600; }
.dd-alert-m { font-size: 11px; color: var(--muted); } .dd-alert-m.un { color: #b45309; font-weight: 700; }
.dd-alert-c { font-size: .78rem; color: var(--fg); margin: 4px 0 0; }
.dd-alert-f { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.dd-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dd-form .fg-field[hidden] { display: none; }
.dd-actions { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dd-actions li { border-top: 1px solid var(--border); padding-top: 10px; }
.dd-act-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dd-act-t { font-size: .82rem; font-weight: 600; }
.dd-act-badges { display: inline-flex; gap: 4px; flex-shrink: 0; }
.dd-act-i { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
.dd-act-f { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.dd-act-btns { display: flex; gap: 6px; margin-top: 8px; }
.dd-act-btns form { display: inline; }
.dd-rec { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.dd-rec-n { font-size: .82rem; font-weight: 500; margin: 0 0 2px; word-break: break-all; }
.dd-rec audio { width: 100%; margin-top: 6px; }
.dd-contract { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.dd-ct-h { display: flex; align-items: center; gap: 8px; }
.dd-ct-t { font-size: .82rem; font-weight: 600; }
.dd-refs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dd-refs li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .85rem; }
.card-desc { font-size: .8rem; color: var(--muted); margin: 2px 0 0; }
.btn-line.xs.danger { color: #b91c1c; }
.req { color: #dc2626; }

/* 질문 히스토리 — 열리면 로그·입력·푸터를 대신한다 */
.agent-history[hidden] { display: none; }
.agent-history { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.agent-panel.agent-hist-open .agent-log,
.agent-panel.agent-hist-open .agent-input,
.agent-panel.agent-hist-open .agent-foot { display: none; }
.agent-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.agent-history-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; color: var(--fg); }
.agent-history-title svg { width: 15px; height: 15px; color: var(--brand); }
.agent-history-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
.agent-history-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 28px 12px; margin: 0; }
.agent-hi { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.agent-hi.open { border-color: #bfd3f7; box-shadow: 0 0 0 2px rgba(37,99,235,.10); }
.agent-hi-q { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 10px 12px; font-family: inherit; }
.agent-hi-q:hover { background: #f1f5f9; }
.agent-hi-qt { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent-hi-at { flex-shrink: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.agent-hi-chev { flex-shrink: 0; color: var(--muted); display: grid; place-items: center; transition: transform .18s ease; }
.agent-hi-chev svg { width: 15px; height: 15px; }
.agent-hi.open .agent-hi-chev { transform: rotate(180deg); }
.agent-hi-a { padding: 0 12px 12px; font-size: 13px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--border); padding-top: 10px; }
.agent-hi-a[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .agent-hi-chev { transition: none; } }

@media (max-width: 480px) {
  .agent-panel { right: 8px; left: 8px; width: auto; bottom: 80px; height: calc(100vh - 100px); }
  .agent-fab-label { display: none; }
}

/* 에이전트 기억 목록 */
.mem-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mem { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.mem-body { flex: 1; font-size: 14px; line-height: 1.55; }
.mem-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.mem form { margin: 0; }

/* 에이전트 예약 확인 카드 (대화창 안) */
.agent-card { border: 1px solid var(--brand); border-radius: 12px; padding: 12px; margin-top: 8px; background: #f7faff; font-size: 13px; }
.agent-card h4 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.agent-card dl { display: grid; grid-template-columns: 64px 1fr; gap: 4px 8px; margin-bottom: 10px; }
.agent-card dt { color: var(--muted); font-weight: 600; }
.agent-card dd { word-break: break-word; }
.agent-card .agent-card-actions { display: flex; gap: 8px; }
.agent-card .default-note { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
/* 좁은 화면: 필터가 세로로 쌓이고 각 요소가 한 줄을 차지한다(가로 넘침 방지) */
@media (max-width: 640px) {
  .toolbar .search { flex: 1 1 100%; max-width: none; }
  .toolbar select.search { min-width: 0; max-width: none; }
  .toolbar .btn-line { flex: 1 1 auto; }
}

/* ERP 연결 화면 */
.stat-value.danger { color: #b91c1c; }
.danger-text { color: #b91c1c; }
.grid.board .link-cands { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.grid.board .link-cands li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.grid.board .cand-name { font-size: 12px; min-width: 0; flex: 1 1 auto; }
.grid.board .cand-name .muted { font-size: 11px; }
.grid.board form.link-manual { display: flex; gap: 6px; margin: 0; }
.grid.board form.link-manual input { width: 150px; height: 30px; padding: 4px 8px; }
.grid.board td form { display: inline-flex; }

/* 관리자 설정 화면 */
.add-form { margin-bottom: 14px; }
.add-form > summary { display: inline-block; list-style: none; cursor: pointer; }
.add-form > summary::-webkit-details-marker { display: none; }
.btn-primary.sm.inline { padding: 8px 16px; }
.check-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.contact-form label.chk { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); font-weight: 500; cursor: pointer; }
.contact-form label.chk > input { width: auto; }
.inline-form { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.inline-form label { flex: 0 1 200px; }
.inline-form .btn-primary { margin-bottom: 1px; }
.rule-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; gap: 12px; }
.rule-head { display: flex; align-items: center; justify-content: space-between; }
.info-list { margin: 0 0 10px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.info-list li { margin: 0; }
.grid.board tr.row-off td { color: var(--muted); background: #fafbfc; }
.grid.board td.row-actions { white-space: nowrap; }
.grid.board td.row-actions form, .grid.board td.row-actions details { display: inline-block; vertical-align: middle; margin-right: 4px; }
.inline-edit > summary { list-style: none; cursor: pointer; display: inline-block; }
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit[open] { position: relative; }
.edit-pop { position: absolute; z-index: 20; right: 0; margin-top: 6px; width: 560px; max-width: 88vw;
    background: var(--surface); border: 1px solid var(--border-strong, #c7d0e0); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15,23,42,.16); padding: 16px; text-align: left; white-space: normal; }

/* 코드조회 화면 */
.flash-info { background: #e0f2fe; color: #075985; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; font-weight: 500; line-height: 1.6; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; }
.grid.board td.warn-num, .warn-num { color: #92400e; font-weight: 600; }
.grid.board tr.row-open > td { background: #eff4ff; }
.grid.board tr.row-miss > td { background: #fffbeb; }

/* 매출원장 화면 */
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.flash-warn { background: #fef3c7; color: #92400e; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 500; line-height: 1.6; }
.contact-form .span-links { display: inline-flex; gap: 6px; align-items: flex-end; }
.grid.board.ledger tr.ldg-open > td { background: #f6f8fb; }
.grid.board.ledger tr.ldg-sub > td { background: #eff4ff; }
.grid.board.ledger tr.ldg-total > td { background: #eef2f7; border-top: 2px solid var(--border-strong, #c7d0e0); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pager-nums { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* 자동 규칙·플레이북 화면 */
.pb-list { display: flex; flex-direction: column; gap: 12px; }
.pb-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.pb-card.row-off { background: #fafbfc; }
.pb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pb-head strong { margin-right: 6px; }
.pb-meta { margin: 6px 0 10px; }
.pb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-steps li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.pb-day { font-weight: 700; color: var(--brand); min-width: 42px; font-variant-numeric: tabular-nums; }
.pb-instr { color: var(--muted); }

/* 도매 제품분석 화면 */
.alt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin: 2px 0; }
.alt-gain { color: #15803d; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 딜러 공지 화면 (기존 /notices 의 .notice-head 와 겹치지 않게 .notice-card 로 한정) */
.notice-card { margin-bottom: 12px; }
.notice-card .notice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notice-card .notice-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.notice-card .notice-title { font-size: 15px; font-weight: 700; margin: 6px 0 0; line-height: 1.4; }
.notice-card .notice-summary { font-size: 13px; line-height: 1.6; margin: 8px 0 0; white-space: pre-wrap; }
.notice-card .notice-action { font-size: 13px; color: var(--brand); font-weight: 600; margin: 6px 0 0; }

/* CSO 거래처제품분석 (피벗 그리드) */
.grid.board.pivot th, .grid.board.pivot td { white-space: nowrap; }
.cell-money { color: var(--fg); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; border-bottom: 1px dashed transparent; }
.cell-money:hover { color: var(--brand); border-bottom-color: var(--brand); }
.cell-money.is-on { color: var(--brand); background: #eff4ff; padding: 2px 6px; border-radius: 6px; border-bottom-color: transparent; }

/* 계약 행(등록/수정) */
.row-line.contract-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ── 대시보드 타일 ── */
.sec-head { margin-bottom: 14px; }
.sec-title { font-size: 15px; font-weight: 800; margin: 0; }
.sec-desc { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }
.tile-grid { display: grid; gap: 12px; }
.tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tile-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px){ .tile-grid.cols-4,.tile-grid.cols-5{grid-template-columns:repeat(3,1fr);} }
@media (max-width: 720px){ .tile-grid{grid-template-columns:repeat(2,1fr)!important;} }
.tile { display: block; border: 1px solid var(--border); border-radius: 11px; padding: 15px 16px; background: var(--surface); color: inherit; transition: border-color .12s, box-shadow .12s; }
a.tile:hover { border-color: #c7d3e6; box-shadow: var(--shadow-card); }
.tile-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #eef2f8; color: #64748b; margin-bottom: 12px; }
.tile-ic svg { width: 17px; height: 17px; }
.tile-ic.tone-warn { background: #fef3c7; color: #b45309; }
.tile-ic.tone-danger { background: #fee2e2; color: #dc2626; }
.tile-ic.tone-ok { background: #dcfce7; color: #16a34a; }
.tile-ic.tone-info { background: #dbeafe; color: #2563eb; }
.tile-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tile-val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile-val em { font-size: 13px; font-weight: 500; color: var(--muted); font-style: normal; margin-left: 4px; }
.tile-hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.goalbar { margin-top: 14px; }
.goalbar-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.goalbar-track { height: 8px; background: #eef2f7; border-radius: 5px; overflow: hidden; }
.goalbar-track > span { display: block; height: 100%; background: linear-gradient(90deg,#3b82f6,#2563eb); border-radius: 5px; }
.quick-links { display: flex; flex-direction: column; gap: 8px; }
.quick-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.quick-link:hover { border-color: var(--brand); color: var(--brand); background: #f7faff; }
.quick-link svg { width: 18px; height: 18px; color: var(--muted); }
.quick-link:hover svg { color: var(--brand); }

/* ── 목록 필터 패널 (딜러/리드) ── */
.list-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 4px 16px 16px; margin-bottom: 16px; }
.list-panel .tabs { margin: 0 -16px 0; padding: 0 16px; }
.quick-row { display: flex; gap: 7px; flex-wrap: wrap; padding: 14px 0 0; }
.filter-grid { display: flex; gap: 12px 14px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
/* 셀렉트는 좁은 고정폭(늘어나지 않음), 검색은 넓게 — 원본과 같이 한 줄에 많이 들어간다. */
.fg-field { display: flex; flex-direction: column; gap: 6px; flex: 0 1 148px; min-width: 120px; }
.fg-field.grow { flex: 0 1 320px; min-width: 220px; }
.fg-field > span { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.fg-field input, .fg-field select { border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 13.5px; font-family: inherit; background: var(--surface); height: 38px; width: 100%; }
.fg-field input:focus, .fg-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.fg-actions { display: flex; gap: 8px; align-items: flex-end; flex: 0 0 auto; }
.fg-actions .btn-primary.sm, .fg-actions .btn-line.sm { height: 38px; display: inline-flex; align-items: center; }

/* 이동+펼침 겸용 그룹(딜러 관리) */
.nav-grp-link { color: inherit; text-decoration: none; }
.nav-grp-btn > .nav-grp-link:hover { color: #fff; }
.nav-chev-btn { border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px; }
.nav-chev-btn:hover { background: rgba(255,255,255,.08); color: #cdd6e6; }
.nav-grp-btn.is-active { background: rgba(59,130,246,.18); color: #fff; }
.nav-grp-btn.is-active .nav-grp-link { color: #fff; font-weight: 600; }

/* ══════════ 통합 대시보드 ══════════ */
:root { --chart-1: #22c55e; --chart-2: #3b82f6; }
.dash > * { margin-bottom: 16px; }
.dash > *:last-child { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.grid-3 .span-2 { grid-column: span 2; }
.grid-2 > *, .grid-3 > * { margin-bottom: 0; }
@media (max-width: 1080px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-3 .span-2 { grid-column: auto; } }

/* 헤더 기간 선택기 */
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.period-picker { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.topbar-title .page-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg { display: inline-flex; background: #eef2f7; border-radius: 9px; padding: 3px; gap: 2px; }
.seg-btn { padding: 6px 13px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg-btn:hover { color: var(--fg); }
.seg-btn.is-on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-card); }
.date-nav { display: inline-flex; align-items: center; gap: 4px; }
.date-ico { display: grid; place-items: center; width: 32px; height: 34px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }
.date-ico:hover { background: #f7faff; color: var(--brand); border-color: #c7d3e6; }
.date-ico svg { width: 16px; height: 16px; }
.date-box { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.date-box svg { width: 15px; height: 15px; color: var(--muted); }
.date-today { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.date-today:hover { color: var(--brand); }

/* 타일 강조/축약 + 이동 화살표 */
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.tile-go { color: #cbd5e1; opacity: 0; transition: opacity .12s; }
.tile-go svg { width: 15px; height: 15px; }
a.tile:hover .tile-go { opacity: 1; }
.tile-lead .tile-val { font-size: 30px; }
.tile-compact { padding: 14px 15px; }
.tile-compact .tile-ic { width: 26px; height: 26px; margin-bottom: 9px; }
.tile-compact .tile-ic svg { width: 15px; height: 15px; }
.tile-compact .tile-val { font-size: 22px; }
.tile-hint.tone-danger { color: #dc2626; }
.tile-hint.tone-warn { color: #b45309; }
.goalbar-track.warn > span { background: linear-gradient(90deg,#f59e0b,#d97706); }
.goalbar-track.ok > span { background: linear-gradient(90deg,#22c55e,#16a34a); }

/* 바로가기 열(오른쪽) */
.quick-col { display: grid; gap: 12px; align-content: stretch; }
.quick-col .quick-link { flex: 1; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); padding: 0 18px; }
.ql-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef2f8; color: var(--muted); flex-shrink: 0; }
.ql-ic svg { width: 15px; height: 15px; }
.ql-t { flex: 1; }
.quick-col .quick-link > svg:last-child { width: 15px; height: 15px; color: #cbd5e1; }
.quick-col .quick-link:hover .ql-ic { background: var(--brand); color: #fff; }

/* 카드 헤더 */
.card-head { margin-bottom: 14px; }
.card-head .card-title { margin: 0; }
.card-desc { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }

/* 라인/막대 차트 */
.chart-wrap { width: 100%; }
.chart-svg { width: 100%; height: 240px; display: block; overflow: visible; }
.ch-grid { stroke: #eef2f7; stroke-width: 1; stroke-dasharray: 3 3; }
.ch-axis { fill: #94a3b8; font-size: 11px; font-family: inherit; }
.chart-legend { display: flex; justify-content: center; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-item i { width: 10px; height: 10px; border-radius: 3px; }
.hbars { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; min-height: 200px; }
.hbar-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.hbar-name { color: var(--fg); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { position: relative; height: 26px; }
.hbar-fill { position: absolute; left: 0; height: 11px; border-radius: 0 4px 4px 0; }
.hbar-fill.c-in { top: 0; background: var(--chart-2); }
.hbar-fill.c-re { bottom: 0; background: var(--chart-1); }
.hbar-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 전환 퍼널 */
.funnel { display: flex; flex-direction: column; gap: 13px; }
.fn-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; }
.fn-label { font-weight: 600; }
.fn-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.fn-track { height: 8px; background: #eef2f7; border-radius: 5px; overflow: hidden; }
.fn-fill { display: block; height: 100%; background: var(--brand); border-radius: 5px; transition: width .3s; }

/* 목록/피드/알림 */
.li-list, .feed { list-style: none; margin: 0; padding: 0; }
.li-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: 13.5px; border-top: 1px solid var(--border); }
.li-row:first-child { border-top: 0; }
.feed-row { padding: 10px 0; border-top: 1px solid var(--border); }
.feed-row:first-child { border-top: 0; padding-top: 0; }
.feed-row:last-child { padding-bottom: 0; }
.feed-row .feed-main, .feed-row { display: flex; }
.feed-row { align-items: flex-start; justify-content: space-between; gap: 12px; }
.feed-main { flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.feed-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.feed-name:hover { text-decoration: underline; }
.feed-sub { font-size: 12px; color: var(--muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.feed-meta { flex-shrink: 0; text-align: right; font-size: 12px; color: var(--muted); }
.feed-meta p { margin: 0; }
.feed-row.nt { padding: 3px 0; }
.nt-link { display: block; padding: 8px 8px; margin: 0 -8px; border-radius: 8px; }
a.nt-link:hover { background: #f7faff; }
.nt-link > * { display: inline; }
.nt-link { display: flex; align-items: flex-start; gap: 9px; }
.nt-dot { margin-top: 6px; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nt-dot.new { background: var(--brand); }
.nt-dot.urgent { background: #ef4444; }
.nt-dot.read { background: #cbd5e1; }
.min0 { min-width: 0; flex: 1; }
.nt-title { font-size: 13.5px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-title.muted { color: var(--muted); font-weight: 400; }
.badge-unread { display: inline-block; font-size: 11px; font-weight: 600; color: #dc2626; background: #fee2e2; border-radius: 6px; padding: 2px 7px; vertical-align: middle; margin-left: 6px; }

/* 빈 상태(카드 내부) */
.empty-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 16px; gap: 4px; }
.empty-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #eef2f7; color: #94a3b8; margin-bottom: 8px; }
.empty-ic svg { width: 20px; height: 20px; }
.empty-t { font-size: 13.5px; font-weight: 600; margin: 0; }
.empty-d { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.empty-box .btn-primary.sm { margin-top: 8px; }

/* 담당자별 성과 표 */
.perf .lnk { color: var(--fg); }
.perf .lnk:hover { text-decoration: underline; }
td.danger, .danger { color: #dc2626; }
.perf td.num, .perf th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ══════════ 오늘 할 일 (/my) ══════════ */
.sec-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sec-count { font-size: 14px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.sec-note { font-size: 12px; color: var(--muted); margin: 0; }
.upcoming { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.up-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.up-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--fg); font-variant-numeric: tabular-nums; }
.up-chip:hover { border-color: var(--brand); color: var(--brand); }
.up-chip b { font-weight: 700; }
.task-group { padding: 16px 20px; }
.tg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tg-title { font-size: 13.5px; font-weight: 700; margin: 0; color: var(--fg); }
.tg-title.late { color: #b91c1c; }
.tg-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #eef2f7; color: var(--muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-title .tg-n { vertical-align: middle; margin-left: 4px; }
/* 계산형 업무 행 */
.mt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.mt-row:first-child { border-top: 0; padding-top: 0; }
.mt-row:last-child { padding-bottom: 0; }
.mt-main { min-width: 0; flex: 1; }
.mt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mt-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.mt-name:hover { text-decoration: underline; }
.kbadge { display: inline-block; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; background: #eef2f7; color: #334155; }
.kbadge.k-danger { background: #fee2e2; color: #b91c1c; }
.kbadge.k-warn { background: #fef3c7; color: #92400e; }
.kbadge.k-info { background: #e0f2fe; color: #075985; }
.kbadge.k-ok { background: #dcfce7; color: #166534; }
.mt-due { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mt-due.over { color: #dc2626; font-weight: 600; }
.mt-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mt-actions form { margin: 0; }
.mt-actions .btn-primary.xs { display: inline-flex; align-items: center; }
@media (max-width: 640px){ .mt-row { flex-wrap: wrap; } .mt-actions { width: 100%; } }

/* ══════════ 주간 스케줄 (/my/schedule) ══════════ */
.wk-tools { display: flex; flex-direction: column; gap: 12px; }
.wk-nav { display: flex; flex-wrap: wrap; gap: 7px; }
.wk-btn { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--fg); background: var(--surface); }
.wk-btn:hover { border-color: var(--brand); color: var(--brand); background: #f7faff; }
.wk-btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.wk-staff { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-staff-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.wk-staff select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 13.5px; font-family: inherit; background: var(--surface); min-width: 150px; }
.wk-staff select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.wk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }
.wk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg-dot.g-CONTACT { background: #22c55e; } .lg-dot.g-SEND { background: #8b5cf6; } .lg-dot.g-CHECK { background: #f59e0b; }
.wk-legend-note { color: var(--muted-2, #94a3b8); }

.wk-grid { display: grid; gap: 12px; }
.wk-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-width: 0; display: flex; flex-direction: column; min-height: 300px; transition: border-color .12s, background-color .12s; }
.wk-col.is-today { border-color: var(--brand); background: #f5f9ff; }
.wk-col.drop-over { border-color: var(--brand); background: #eef5ff; box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.wk-col-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.wk-col.is-today .wk-col-head { color: var(--brand); }
.wk-dow { font-size: 14px; font-weight: 700; }
.wk-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #eef2f7; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.wk-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wk-empty { flex: 1; display: grid; place-items: center; color: #b6c0cf; font-size: 12.5px; }
.wcard { border: 1px solid var(--border); border-left: 3px solid #93a3b8; border-radius: 8px; padding: 9px 11px; background: #fff; cursor: default; }
.wcard[draggable="true"] { cursor: grab; }
.wcard[draggable="true"]:active { cursor: grabbing; }
.wcard.dragging { opacity: .45; }
.wcard.g-CONTACT { border-left-color: #22c55e; } .wcard.g-SEND { border-left-color: #8b5cf6; } .wcard.g-CHECK { border-left-color: #f59e0b; }
.wcard.is-closed { opacity: .5; }
.wcard-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wcard-time { font-size: 11px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.wcard-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.wcard-name:hover { text-decoration: underline; }
.wcard-body { margin-top: 6px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wcard-actions { margin-top: 8px; display: flex; gap: 5px; }
.wcard-actions form { margin: 0; }
@media (max-width: 900px){ .wk-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px){ .wk-grid { grid-template-columns: 1fr !important; } .wk-col { min-height: 0; } }

/* ══════════ 업무 목록 (/my/tasks) ══════════ */
.filter-grid.nostroke { margin-top: 0; padding-top: 0; border-top: 0; }
.btn-ghost { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 8px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-ghost:hover { background: #f1f5f9; color: var(--fg); }
.btn-ghost.xs { padding: 5px 12px; font-size: 12px; border-radius: 7px; }
/* 헤더+표를 붙인 패널 카드 */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 16px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.panel-title { font-size: 14.5px; font-weight: 700; margin: 0; }
.panel-n { font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; }
.panel-note { font-size: 12px; color: var(--muted); margin: 0; }
.panel-foot { border-top: 1px solid var(--border); padding: 12px 20px; }
.panel .empty-box { padding: 40px 16px; }
/* 업무 표 */
.grid.board.tasks td, .grid.board.tasks th { white-space: normal; vertical-align: top; }
.grid.board.tasks .align-top { vertical-align: top; }
.tasks .w-time { width: 64px; } .tasks .w-task { width: 210px; } .tasks .w-dealer { width: 200px; }
.tasks .w-st { width: 108px; } .tasks .w-act { width: 190px; }
.tasks .grp-row td { background: #f6f8fb; padding: 7px 14px; white-space: nowrap; }
.tasks tr.grp-row { border-top: 1px solid var(--border); cursor: default; }
.tasks tr.grp-row:hover { background: transparent; }
.grp-h { font-size: 12.5px; font-weight: 700; }
.grp-dday { font-size: 11.5px; color: var(--muted); margin-left: 8px; font-variant-numeric: tabular-nums; }
.grp-dday.over { color: #dc2626; font-weight: 600; }
.grp-n { font-size: 11.5px; color: var(--muted); margin-left: 8px; font-variant-numeric: tabular-nums; }
.tasks tbody tr { cursor: default; }
.t-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-time.over { color: #dc2626; font-weight: 600; }
.t-type { font-size: 13px; font-weight: 600; }
.t-sub { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.t-bot { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.t-bot svg { width: 12px; height: 12px; }
.t-dealer { font-size: 13px; font-weight: 600; color: var(--fg); }
.t-dealer:hover { text-decoration: underline; }
.block, .muted.sm.block { display: block; }
.t-instr { font-size: 12px; display: block; line-height: 1.5; }
.t-result { font-size: 12px; display: block; margin-top: 4px; line-height: 1.5; }
.t-warn { font-size: 11.5px; color: #b45309; display: block; margin-top: 4px; }
.t-actions { display: flex; gap: 5px; }
.t-actions form { margin: 0; }
/* 상태 배지 톤 */
.badge.st-ok { background: #dcfce7; color: #166534; }
.badge.st-warn { background: #fef3c7; color: #92400e; }
.badge.st-info { background: #e0f2fe; color: #075985; }
.badge.st-off { background: #f1f5f9; color: #94a3b8; }
.badge.st-danger { background: #fee2e2; color: #b91c1c; }

/* ══════════ 공지분석 (/notices) ══════════ */
/* 라벨(위)+트리거(아래) 스택이라 바닥 정렬 후, 곁 요소를 트리거와 같은 높이 박스로 만들어
   세로 중앙이 트리거 중앙과 겹치게 한다. */
.nb-picker { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.nb-picker .nb-note { display: inline-flex; align-items: center; min-height: 40px; margin: 0; }
.nb-picker .fg-field.grow { flex: 0 1 360px; }
.nb-note { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
/* 선택 해제 — 원본 ghost 버튼(테두리·배경 없음, 회색, hover 시만 옅은 배경) */
.nb-clear { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0;
  height: 40px; border: 0; background: transparent; color: var(--fg); padding: 0 9px; border-radius: 8px;
  font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; }
.nb-clear:hover { background: #f1f5f9; }
.nb-clear svg { width: 14px; height: 14px; stroke-width: 2.2; }
.mcell-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.nb-cats { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.nb-cats-h { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.ncat-row { display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.ncat-name { width: 96px; flex-shrink: 0; font-size: 12px; color: var(--fg); }
.ncat-bar { flex: 1; min-width: 0; height: 8px; background: #eef2f7; border-radius: 5px; overflow: hidden; }
.ncat-bar > span { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.ncat-n { width: 44px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nb-foot { font-size: 12px; color: var(--muted); }
.nb-foot a { color: var(--brand); }
.grid.board .w-date { width: 110px; } .grid.board .w-cat { width: 110px; } .grid.board .w-pharma { width: 150px; }
.grid.board .w-gubun { width: 120px; } .grid.board .w-owner { width: 100px; } .grid.board .w-dealer { width: 180px; }

/* ══════════ 딜러 검색 콤보박스 (실적·분석·공지) ══════════ */
.dcombo { position: relative; }
.dcombo-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: #f8fafc; font-family: inherit; font-size: 13.5px; color: var(--fg); cursor: pointer; text-align: left; }
.dcombo-trigger:hover { border-color: #c7d3e6; }
.dcombo-trigger[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.dcombo-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcombo-val.ph { color: var(--muted); }
.dcombo-trigger > svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
/* 이름+업체명이 다 보이도록 내용 폭만큼 넓힌다. 트리거보다 좁아지지 않고(min-width:100%),
   아주 긴 이름은 화면 밖으로 나가지 않게 상한(560px)에서만 말줄임. */
.dcombo-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: max-content; min-width: 100%; max-width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; }
.dcombo-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.dcombo-search svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.dcombo-search input { flex: 1; border: 0; outline: none; font-size: 13.5px; font-family: inherit; background: transparent; }
.dcombo-list { list-style: none; margin: 0; padding: 5px; max-height: 320px; overflow-y: auto; }
.dcombo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.dcombo-item:hover, .dcombo-item.kb { background: #f1f5f9; }
.dcombo-item.on { background: #eef4ff; }
.dcombo-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dcombo-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dcombo-hint { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dtag { display: inline-block; border: 1px solid transparent; border-radius: 6px; padding: 0 6px; font-size: 10.5px; font-weight: 600; line-height: 17px; }
.dtag.cso { border-color: rgba(37,99,235,.4); background: #eef4ff; color: var(--brand); }
.dtag.wholesale { border-color: rgba(22,163,74,.3); background: #dcfce7; color: #166534; }
.dtag.none { border-color: var(--border); background: #f1f5f9; color: var(--muted); }
.dcombo-empty { padding: 20px; text-align: center; font-size: 12.5px; color: var(--muted); margin: 0; }
.grid.board td.block, .grid.board .block { display: block; }

/* ══════════ 자동 규칙 · 플레이북 (/my/playbooks) ══════════ */
.icon-btn-sm { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn-sm:hover { background: #f1f5f9; color: var(--fg); }
.icon-btn-sm.danger:hover { background: #fef2f2; color: #dc2626; }
.icon-btn-sm svg { width: 15px; height: 15px; }
.badge-line { display: inline-block; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 17px; }
/* 스위치 */
.sw-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.sw-label { font-size: 11.5px; color: var(--muted); }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw-track { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s; }
.sw-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .sw-track { background: var(--brand); }
.switch input:checked + .sw-track::after { transform: translateX(14px); }
.switch input:focus-visible + .sw-track { box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
/* 규칙 목록 */
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-row { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--border); }
.rule-row:first-child { border-top: 0; }
.rule-main { min-width: 0; flex: 1; }
.rule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rule-name { font-size: 13.5px; font-weight: 600; }
.rule-row.is-off .rule-name { color: var(--muted); }
.rule-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rule-arrow { font-size: 11px; color: var(--muted); }
.rule-desc { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.rule-last { font-size: 11.5px; color: var(--muted); margin: 4px 0 0; }
.rule-ctrl { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rule-edit-btn.is-on { background: #f1f5f9; color: var(--brand); }
.rule-edit-wrap { flex-basis: 100%; width: 100%; order: 9; }
.rule-foot { display: flex; align-items: center; gap: 6px; }
.rule-foot svg { width: 13px; height: 13px; color: #eab308; flex-shrink: 0; }
/* 인라인 편집 폼(규칙·플레이북 공용) */
.rule-edit, .pb-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfe; }
.rule-edit-wrap[hidden] { display: none; }
.edit-pop[open] > summary { background: #f1f5f9; color: var(--brand); }
.pb-ed-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-ed-grid .fg-field { flex: 1 1 180px; }
.pb-editor .fg-field textarea, .rule-edit .fg-field textarea { border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit; width: 100%; resize: vertical; }
.pb-ed-label { font-size: 12px; font-weight: 600; margin: 4px 0 2px; }
.w-day { flex: 0 0 84px !important; } .w-method { flex: 0 0 130px !important; }
.pb-step-row { display: grid; grid-template-columns: 84px 1fr 130px auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin-bottom: 8px; }
.pb-step-row .fg-field { flex: none; }
.pb-step-instr { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 12.5px; font-family: inherit; resize: vertical; }
.pb-step-del { align-self: end; margin-bottom: 1px; }
.pb-step-add { align-self: flex-start; }
.pb-new-btn, .pb-step-add { display: inline-flex; align-items: center; gap: 5px; }
.pb-new-btn svg, .pb-step-add svg { width: 14px; height: 14px; flex-shrink: 0; }
.rule-runnow { display: inline-flex; align-items: center; gap: 5px; }
.rule-runnow svg { width: 14px; height: 14px; }
.pb-ed-actions { display: flex; gap: 8px; margin-top: 4px; }
/* 플레이북 카드 */
.pb-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.pb-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.pb-card.is-off { opacity: .62; }
.pb-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pb-card-title { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pb-name { font-size: 13.5px; font-weight: 600; }
.pb-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pb-icons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pb-icons form { margin: 0; }
.pb-desc { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.pb-cancel { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.pb-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pb-steps li { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
.pb-day { color: var(--muted); font-variant-numeric: tabular-nums; width: 44px; flex-shrink: 0; font-weight: 600; }
.pb-step-main { min-width: 0; flex: 1; }
.pb-step-act { font-weight: 500; }
.pb-instr { display: block; color: var(--muted); margin-top: 1px; line-height: 1.5; }
.pb-new { border: 1px dashed var(--border); border-radius: 10px; padding: 4px 14px 14px; }
/* 적용 이력 */
.run-list { list-style: none; margin: 0; padding: 0; }
.run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 20px; border-top: 1px solid var(--border); }
.run-row:first-child { border-top: 0; }
.run-main { min-width: 0; flex: 1; }
.run-dealer { font-size: 13px; font-weight: 600; }
.run-dealer a { color: var(--fg); }
.run-dealer a:hover { text-decoration: underline; }
.run-pb { font-size: 11.5px; color: var(--muted); margin-left: 8px; }
.run-sub { font-size: 11.5px; color: var(--muted); margin: 3px 0 0; }
.run-row .btn-line.xs { display: inline-flex; align-items: center; gap: 3px; }
.run-row .btn-line.xs svg { width: 13px; height: 13px; }

/* ══════════ 내 업무 현황 (/my/report) ══════════ */
/* 플러시 지표 격자 — 원본 StatGroup: 한 카드 안 1px 구분선 셀(개별 카드·간격 없음). */
.mgrid { display: grid; gap: 1px; background: var(--border); }
.mgrid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.mgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px){ .mgrid.cols-5, .mgrid.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px){ .mgrid.cols-5, .mgrid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
.mcell { background: var(--surface); padding: 16px 20px; color: inherit; display: block; transition: background-color .12s; }
a.mcell:hover { background: #f7f9fc; }
.mcell-top { display: flex; align-items: center; gap: 8px; }
.mcell-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef2f8; color: #64748b; flex-shrink: 0; }
.mcell-ic svg { width: 15px; height: 15px; }
.mcell-label { font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 0; flex: 1; line-height: 1.3; }
.mcell-go { color: #cbd5e1; opacity: 0; transition: opacity .12s; }
.mcell-go svg { width: 14px; height: 14px; }
a.mcell:hover .mcell-go { opacity: 1; }
.mcell-val { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-top: 10px; font-variant-numeric: tabular-nums; line-height: 1; }
.mcell-val em { font-size: 12.5px; font-weight: 500; color: var(--muted); font-style: normal; margin-left: 4px; }
.mcell-val.tone-ok { color: #16a34a; } .mcell-val.tone-warn { color: #b45309; } .mcell-val.tone-danger { color: #dc2626; }
/* ══════════ 딜러 유입/관리 목록 (/leads, /dealers) ══════════ */
.lv-tabs-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.lv-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lv-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.lv-tab:hover { background: #f1f5f9; color: var(--fg); }
.lv-tab.is-on { background: #eef4ff; color: var(--brand); }
.lv-n { display: inline-block; min-width: 18px; text-align: center; font-size: 12px; font-weight: 700; color: inherit; opacity: .85; font-variant-numeric: tabular-nums; }
.lv-arrow { color: #cbd5e1; font-size: 15px; padding: 0 2px; }
.lv-view { display: inline-flex; gap: 2px; background: #eef2f7; border-radius: 9px; padding: 3px; }
.viewbtn { display: grid; place-items: center; width: 32px; height: 30px; border-radius: 7px; color: var(--muted); }
.viewbtn svg { width: 17px; height: 17px; }
.viewbtn:hover { color: var(--fg); }
.viewbtn.is-on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-card); }
/* 빠른 보기 칩 */
.quickbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.qchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--fg); background: var(--surface); }
.qchip svg { width: 14px; height: 14px; color: var(--muted); }
.qchip:hover { border-color: var(--brand); color: var(--brand); }
.qchip:hover svg { color: var(--brand); }
.qchip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.qchip.is-on svg { color: #fff; }
/* 필터 체크박스 */
.fg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); align-self: flex-end; padding-bottom: 9px; white-space: nowrap; }
.fg-check input { width: 15px; height: 15px; }
.lv-filter { padding: 16px; }
/* 표 툴바 */
.lv-table { overflow: visible; }
.lv-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lv-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.lv-selall input { width: 15px; height: 15px; }
.lv-selnote { font-size: 12px; color: var(--muted); }
.lv-selcount { font-size: 12.5px; color: var(--brand); font-weight: 600; }
.lv-tb-actions { margin-left: auto; display: flex; gap: 6px; }
.lv-tb-actions .btn-line.xs { display: inline-flex; align-items: center; gap: 4px; }
.lv-tb-actions .btn-line.xs svg { width: 13px; height: 13px; }
.lv-tb-actions .btn-line.xs:disabled { opacity: .5; cursor: not-allowed; }
/* 표 */
.lv-grid th.col-chk, .lv-grid td.col-chk { width: 36px; text-align: center; padding-left: 14px; padding-right: 6px; }
.lv-grid td.col-chk input, .lv-grid th.col-chk input { width: 15px; height: 15px; }
.lv-grid .th-a { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 600; }
.lv-grid .th-a:hover { color: var(--fg); }
.th-sort { font-size: 8px; opacity: 0; }
.lv-grid th:hover .th-sort { opacity: .4; }
.th-sort.is-on { opacity: 1; color: var(--brand); }
.sm2 { font-size: 11.5px; }
.pill-num.zero { background: #f1f5f9; color: #94a3b8; }
.pill-num.wait { background: #e0edff; color: #1d4ed8; }
/* 열 팝오버 — 자주 보는 구성 + 표시할 열·순서 */
.col-pop { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 14px 16px; }
.col-pop.wide { width: 320px; max-height: min(560px, calc(100vh - 90px)); overflow-y: auto; }
.cp-sec { padding: 4px 0 12px; }
.cp-sec + .cp-sec { border-top: 1px solid var(--border); padding-top: 12px; }
.cp-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.cp-count { font-size: 11.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-links { display: inline-flex; gap: 12px; }
.cp-links a { font-size: 11.5px; color: var(--brand); font-weight: 600; }
.cp-note { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.cp-presets { display: flex; flex-direction: column; gap: 4px; }
.cp-preset { display: flex; align-items: center; gap: 4px; }
.cp-pr-load { flex: 1; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; color: var(--fg); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pr-load:hover { background: #f1f5f9; }
.cp-pr-load.empty { color: #b6c0cf; cursor: default; }
.cp-pr-load.empty:hover { background: transparent; }
.cp-pr-save, .cp-pr-del { border: 0; background: transparent; cursor: pointer; font-size: 12px; padding: 4px; border-radius: 6px; opacity: .7; }
.cp-pr-save:hover, .cp-pr-del:hover { background: #f1f5f9; opacity: 1; }
.cp-pr-del:disabled { opacity: .25; cursor: default; }
.cp-cols { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-col { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; }
.cp-col:hover { background: #f7f9fc; }
.cp-grip { color: #cbd5e1; font-size: 12px; cursor: grab; letter-spacing: -2px; }
.cp-cl { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.cp-cl input { width: 15px; height: 15px; }
.cp-move { display: inline-flex; gap: 2px; }
.cp-move button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; padding: 3px 4px; border-radius: 5px; }
.cp-move button:hover:not(:disabled) { background: #eef2f7; color: var(--brand); }
.cp-move button:disabled { opacity: .25; cursor: default; }
/* 모달(dialog) */
dialog.modal { border: 0; border-radius: 14px; padding: 0; box-shadow: 0 24px 60px rgba(15,23,42,.28); width: min(460px, 92vw); }
dialog.modal::backdrop { background: rgba(15,23,42,.4); }
.modal-form { display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.modal-x { border: 0; background: transparent; font-size: 16px; color: var(--muted); cursor: pointer; line-height: 1; }
.modal-x:hover { color: var(--fg); }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.modal-body .req { color: #dc2626; }
.bulk-grp { display: flex; flex-direction: column; gap: 12px; }
.bulk-grp[hidden] { display: none; } /* display:flex 가 [hidden] 을 덮지 않게 — 액션별로 한 그룹만 보인다 */
/* 필터바용 .fg-field 는 flex-basis:148px(가로폭)라, 세로(칼럼) 배치인 모달 안에서는
   그 148px 가 '높이'로 잡혀 필드마다 세로 여백이 벌어진다. 모달에선 내용 높이로 되돌린다. */
.modal-body .fg-field { flex: 0 0 auto; min-width: 0; }
.bulk-row { display: flex; gap: 10px; }
.bulk-row .fg-field { flex: 1 1 0; }
.modal-body .fg-field small { font-weight: 400; margin-left: 6px; font-size: 11px; }
.modal-body textarea { border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 13.5px; font-family: inherit; width: 100%; resize: vertical; }

/* 오른쪽 슬라이드 패널(Sheet) — 원본 예약발송·플레이북·액션지정 다이얼로그 형태 */
dialog.modal.sheet { width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; box-shadow: -12px 0 44px rgba(15, 23, 42, .18); }
dialog.modal.sheet::backdrop { background: rgba(15, 23, 42, .12); }
dialog.modal.sheet .modal-form { height: 100dvh; }
dialog.modal.sheet .modal-body { flex: 1 1 auto; overflow-y: auto; }
dialog.modal.sheet[open] { animation: sheetIn .26s cubic-bezier(.32, .72, 0, 1); }
@keyframes sheetIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
dialog.modal.sheet[open]::backdrop { animation: sheetFade .26s ease; }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.modal.sheet[open] { animation: none; } }
/* 채널 2-카드 선택 */
.ch-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-card { position: relative; display: block; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.ch-card input { position: absolute; opacity: 0; pointer-events: none; }
.ch-card b { display: block; font-size: 13px; font-weight: 600; }
.ch-card em { font-style: normal; font-size: 11px; color: var(--muted); }
.ch-card:has(input:checked) { border-color: var(--brand); background: #eef2ff; box-shadow: 0 0 0 1px var(--brand) inset; }

/* 내용 가져오기 — 소스 선택 pill + 검색 결과 */
.src-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.src-pill { border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 9999px; padding: 4px 12px; font-size: 12px; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; }
.src-pill:hover { background: var(--surface-muted, #f3f4f6); }
.src-pill.is-on { border-color: var(--brand); background: #eef2ff; color: var(--brand); }
#src-panel input#src-search { width: 100%; }
.src-list { max-height: 176px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin: 8px 0 6px; }
.src-list ul { list-style: none; margin: 0; padding: 0; }
.src-list li + li { border-top: 1px solid var(--border); }
.src-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; cursor: pointer; transition: background-color .12s; }
.src-item:hover { background: var(--surface-muted, #f3f4f6); }
.src-item-t { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-item-h { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-empty { padding: 12px; font-size: 12px; color: var(--muted); margin: 0; }
.src-empty.src-err { color: #b91c1c; }

.tnum { font-variant-numeric: tabular-nums; }

/* 얼라이언스 표기 배지 */
.badge.bt-al { background: #ede9fe; color: #6d28d9; }
.badge.bt-al2 { background: #fef3c7; color: #b45309; }
.al-checks { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 0; }
.al-checks .fg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* 제약사관리 — 표만 안쪽에서 스크롤시켜 상단바·검색·표 머리글이 늘 보이게 한다.
   높이는 pharma.php 의 스크립트가 창 크기에 맞춰 다시 잡는다(아래 calc 는 대체값). */
.ph-scroll { max-height: calc(100vh - 260px); min-height: 260px; overflow: auto; overscroll-behavior: contain; }
.ph-scroll table.grid.board thead th {
  position: sticky; top: 0; z-index: 3;
  background: #fafbfc; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border);
}

/* 제약사담당자 ↔ 통합 거래처 관리(TCUSTOMER) 연동 위젯 */
.tc-wrap { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fafbfc; }
/* hidden 속성이 확실히 숨기도록 — display 규칙이 이를 덮지 않게 한다. */
.tc-linked[hidden], .tc-picker[hidden] { display: none !important; }
.tc-linked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-linked-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #dcfce7; color: #16a34a; flex-shrink: 0; }
.tc-linked-ic svg { width: 13px; height: 13px; }
.tc-linked-name { font-weight: 600; font-size: 14px; margin-right: auto; }
.tc-search-row { display: flex; gap: 6px; }
.tc-search-row .tc-q { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 13.5px; font-family: inherit; }
.tc-search-row .tc-q:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tc-search-row .btn-line { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tc-search-row .btn-line svg { width: 13px; height: 13px; }
.tc-results { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow: auto; }
.tc-results:empty { margin-top: 0; }
.tc-p { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 10px 12px; }
.tc-p-h { font-size: 13.5px; margin-bottom: 6px; }
.tc-c-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tc-c { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-radius: 7px; }
.tc-c:hover { background: #f1f5fb; }
.tc-c-name { font-size: 13px; font-weight: 600; }
.tc-c-act { margin-left: auto; display: inline-flex; gap: 4px; }
.tc-add { width: 100%; }
.tc-form { margin-top: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; background: #f8fafc; display: flex; flex-direction: column; gap: 8px; }
.tc-form-row { display: flex; gap: 8px; }
.tc-form-row input, .tc-form-row select { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.tc-form .fg-check.sm { font-size: 13px; }
.tc-form-foot { display: flex; justify-content: flex-end; gap: 6px; }
.cf-err { margin: 0; font-size: 12.5px; }

/* 에이전트 현황(관리자) */
.ag-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .ag-two { grid-template-columns: 1fr; } }
.ag-two .panel { margin-bottom: 0; }
.ag-body { padding: 16px 20px; }
.ag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ag-list li { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.ag-k { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ag-bar { display: block; height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.ag-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.grid.board td.ag-cell { white-space: normal; max-width: 320px; word-break: break-word; }

/* 학습데이터 검수 */
.ds-list { display: flex; flex-direction: column; }
.ds-item { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.ds-item:first-child { border-top: 0; }
.ds-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ds-flag { margin: 0; font-size: 12.5px; color: #92400e; background: #fef3c7; padding: 7px 10px; border-radius: 8px; }
.ds-qa { display: grid; gap: 8px; }
.ds-qa > div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: start; }
.ds-k { font-size: 12px; color: var(--muted); font-weight: 600; padding-top: 2px; }
.ds-qa p { margin: 0; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.ds-item textarea { border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit; resize: vertical; }
.ds-acts { display: flex; justify-content: flex-end; gap: 6px; }

/* 담당자 정보 팝업(목록 이름 클릭) */
.pd-card { padding: 2px 0; }
.pd-name { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.pd-name .muted { font-weight: 500; font-size: 13px; }
.pd-list { margin: 0; display: grid; gap: 0; }
.pd-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.pd-row:first-child { border-top: 0; }
.pd-row dt { margin: 0; color: var(--muted); font-size: 12.5px; }
.pd-row dd { margin: 0; font-size: 13.5px; }
.pd-sep { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }

/* 제약사 인센티브 팝업 */
.ph-sec-t { font-size: 13px; font-weight: 700; color: var(--fg); margin: 0 0 6px; }
/* 팝업 안 표는 좌우 스크롤 없이 셀이 줄바꿈되게 — 비고 긴 글이 넘치지 않도록 */
#incen-dlg .table-wrap { overflow-x: hidden; }
#incen-dlg table.grid { width: 100%; }
#incen-dlg table.grid th, #incen-dlg table.grid td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
#incen-dlg table.grid td.num, #incen-dlg table.grid th.num { white-space: nowrap; }
tr.is-cur { background: #eff6ff; }
tr.is-cur td { font-weight: 600; }

/* 열람 링크 다이얼로그 */
.share-btn { white-space: nowrap; }
.sh-loading[hidden], .sh-result[hidden], .sh-error[hidden] { display: none; } /* display:flex 가 [hidden] 을 덮지 않게 */
.sh-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.sh-loading { display: flex; align-items: center; gap: 8px; padding: 28px 0; justify-content: center; }
.sh-spin { width: 18px; height: 18px; border: 2px solid #dbe3ef; border-top-color: var(--brand); border-radius: 50%; animation: sh-spin .7s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sh-spin { animation: none; } }
.sh-error { background: #fef2f2; color: #b91c1c; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0; }
.sh-result { display: flex; flex-direction: column; gap: 12px; }
.sh-url-row { display: flex; gap: 8px; }
.sh-url { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: 12px; font-family: inherit; font-variant-numeric: tabular-nums; background: #f8fafc; color: var(--fg); }
.sh-copy { flex-shrink: 0; }
.sh-qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.sh-qr { width: 160px; }
.sh-qr svg { width: 100%; height: auto; display: block; }
.sh-note { line-height: 1.6; margin: 0; }

/* 열람 링크 공개 페이지 */
.share-body { background: #eef1f6; margin: 0; }
.share-main { min-height: 100dvh; padding: 24px 16px 48px; }
.share-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.share-brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0 6px; }
.share-brand .brand-mark { width: 40px; height: 40px; font-size: 12px; }
.share-brand-t { font-weight: 800; font-size: 15px; color: #1e293b; letter-spacing: -.2px; }
.share-notice { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px 24px; text-align: center; }
.share-notice h1 { font-size: 18px; font-weight: 800; margin: 0 0 10px; color: var(--fg); }
.share-notice p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }
.share-hint { margin-top: 12px !important; font-size: 12.5px !important; }
.share-head { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.share-eyebrow { font-size: 12px; font-weight: 700; color: var(--brand); margin: 0 0 6px; }
.share-head h1 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--fg); }
.share-sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.share-banner { border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; margin: 0; }
.share-banner.ok { background: #ecfdf3; color: #15803d; border: 1px solid #bbf7d0; }
.share-banner.warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.share-banner b { font-weight: 800; }
.share-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.share-pill { flex-shrink: 0; padding: 7px 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: 12.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.share-pill.on { border-color: var(--brand); background: #eef4ff; color: var(--brand); font-weight: 600; }
.share-pill .amt { opacity: .7; font-variant-numeric: tabular-nums; }
.share-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.share-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; }
.sh-item { padding: 14px 18px; border-bottom: 1px solid #eef2f6; }
.sh-item:last-child { border-bottom: 0; }
.sh-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sh-item-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 14px; }
.sh-item-name .tname { overflow: hidden; text-overflow: ellipsis; }
.sh-item-amt { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; }
.sh-item-amt b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sh-item-meta { font-size: 12px; color: var(--muted); margin: 4px 0 0; font-variant-numeric: tabular-nums; line-height: 1.5; }
.sh-item-note { margin: 8px 0 0; }
.sh-swap { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; background: #f8fafc; border-radius: 10px; }
.sh-arrow { flex-shrink: 0; color: #15803d; font-weight: 800; font-size: 15px; line-height: 1.3; }
.sh-swap-body { flex: 1; min-width: 0; }
.sh-swap-amt { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; }
.sh-swap-amt b { font-size: 14px; font-variant-numeric: tabular-nums; }
.sh-swap-amt span { font-size: 12px; font-variant-numeric: tabular-nums; }
.sh-empty { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.share-foot { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 0; padding: 0 4px; }

/* 날짜별 추이 — 고정 높이 HTML 막대 차트 + 호버 툴팁(원본 WorkTrendChart). */
.wtrend { width: 100%; }
.wt-plot { position: relative; height: 240px; margin-left: 30px; }
.wt-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.wt-line { display: block; height: 0; border-top: 1px dashed #eef2f7; }
.wt-yaxis { position: absolute; left: -30px; top: -6px; bottom: -6px; width: 26px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
.wt-y { font-size: 11px; color: #94a3b8; line-height: 1; font-variant-numeric: tabular-nums; }
.wt-cols { position: absolute; inset: 0; display: flex; }
.wt-col { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: 4px; }
.wt-col:hover { background: rgba(59,130,246,.07); }
.wt-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; width: 100%; }
.wt-bar { width: 5px; border-radius: 2px 2px 0 0; }
.wt-bar.b-c { background: #3b82f6; } .wt-bar.b-d { background: #60a5fa; } .wt-bar.b-a { background: #22c55e; }
.wt-tip { display: none; position: absolute; bottom: 55%; left: 50%; transform: translateX(-50%); z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(15,23,42,.16); padding: 8px 11px; white-space: nowrap; pointer-events: none; min-width: 116px; }
.wt-col:hover .wt-tip { display: block; }
.wt-tip-d { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.wt-tr { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.wt-tr i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.wt-tr i.b-c { background: #3b82f6; } .wt-tr i.b-d { background: #60a5fa; } .wt-tr i.b-a { background: #22c55e; }
.wt-tr b { margin-left: auto; padding-left: 14px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.wt-xaxis { display: flex; margin: 8px 0 0 30px; }
.wt-xaxis span { flex: 1; text-align: center; font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.chart-wrap { overflow: visible; }
.sec-head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.sec-head-row .sec-title { margin: 0; }
.sec-action { flex-shrink: 0; }
/* 담당자별 처리 현황 표 */
.standings th, .standings td { padding: 12px 16px; }
.standings tbody tr { cursor: default; }
.standings .lnk { color: var(--fg); }
.standings .lnk:hover { text-decoration: underline; }
.standings .warn-num { color: #b45309; font-weight: 600; }
.pill-red { display: inline-block; min-width: 26px; text-align: center; background: #fee2e2; color: #dc2626; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-cell { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.rate-bar { flex: 1; height: 7px; background: #eef2f7; border-radius: 4px; overflow: hidden; }
.rate-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#3b82f6,#2563eb); border-radius: 4px; }
.rate-pct { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; width: 34px; text-align: right; }
/* 전환 성과 목록 */
.center-note { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 0; }
.conv-list { margin: 0; }
.conv-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.conv-row:first-child { border-top: 0; }
.conv-row dt { font-size: 13px; margin: 0; }
.conv-row dd { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.conv-n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.conv-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; width: 46px; text-align: right; }
/* 처리 품질 4칸 */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.qbox { padding: 14px 16px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.qbox:nth-child(-n+2) { border-top: 0; }
.qbox:nth-child(odd) { border-left: 0; }
.qbox-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.qbox-val { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.qbox-val em { font-size: 12px; font-weight: 500; color: var(--muted); font-style: normal; margin-left: 3px; }
.qbox-val.tone-ok { color: #16a34a; } .qbox-val.tone-danger { color: #dc2626; } .qbox-val.tone-warn { color: #b45309; }
.qbox-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }