/* ============================================================
   withVTM 영업 CRM — 공통 스타일
   외부 폰트·CDN 금지(사내 오프라인 구동 전제). 빌드 도구 없음.

   프로모션 앱의 아케이드 테마를 쓰지 않는 이유: 저쪽은 순위·상금을 보여주는
   화면이라 연출이 목적이지만, 여기는 영업이 하루 몇 시간씩 표를 읽는 곳이다.
   밀도와 가독성이 우선이다.
   ============================================================ */

:root{
  --bg:        #F6F7F9;
  --panel:     #FFFFFF;
  --edge:      #E3E6EB;
  --edge-2:    #CFD4DC;
  --ink:       #1B2130;
  --dust:      #6B7383;
  --dust-2:    #99A0AD;

  --brand:     #1E3A8A;      /* 위드 네이비 */
  --brand-2:   #2F52C8;
  --accent:    #0EA5E9;

  --hot:       #DC2626;
  --hot-bg:    #FEE2E2;
  --warm:      #D97706;
  --warm-bg:   #FEF3C7;
  --cold:      #64748B;
  --cold-bg:   #E9EDF2;
  --ok:        #059669;
  --ok-bg:     #D1FAE5;
  --danger:    #B91C1C;

  --kr: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", "D2Coding", Consolas, monospace;
  --r: 8px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--kr);
  font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------- 상단 바 */
header.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:20px;
  background:var(--brand); color:#fff; padding:0 18px; height:48px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
header.top .brand{ font-weight:700; font-size:15px; letter-spacing:-.2px; white-space:nowrap; }
header.top .brand small{ opacity:.66; font-weight:400; margin-left:6px; font-size:11.5px; }
header.top nav{ display:flex; gap:2px; flex:1; }
header.top nav a{
  color:#C8D3F0; padding:6px 12px; border-radius:6px; font-size:13px; white-space:nowrap;
}
header.top nav a:hover{ background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
header.top nav a.on{ background:#fff; color:var(--brand); font-weight:600; }
header.top .who{ font-size:12.5px; opacity:.9; display:flex; align-items:center; gap:10px; }
header.top .who button{
  background:rgba(255,255,255,.14); border:0; color:#fff; padding:4px 10px;
  border-radius:5px; cursor:pointer; font-size:12px; font-family:inherit;
}
header.top .who button:hover{ background:rgba(255,255,255,.26); }

main{ padding:16px 18px 60px; max-width:1800px; margin:0 auto; }

/* ---------------------------------------------------------- 패널 */
.panel{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  margin-bottom:14px;
}
.panel > h2{
  font-size:13px; font-weight:700; padding:10px 14px; border-bottom:1px solid var(--edge);
  display:flex; align-items:center; gap:10px; color:var(--ink);
}
.panel > h2 .sub{ font-weight:400; color:var(--dust); font-size:12px; }
.panel > h2 .spacer{ flex:1; }
.panel .body{ padding:14px; }

/* ---------------------------------------------------------- 필터 줄 */
.filters{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--edge);
}
.filters input[type=search], .filters input[type=text], .filters select, .filters input[type=date]{
  font-family:inherit; font-size:13px; padding:5px 9px;
  border:1px solid var(--edge-2); border-radius:6px; background:#fff; color:var(--ink);
}
.filters input[type=search]{ min-width:230px; }
.filters label{ font-size:12.5px; color:var(--dust); display:flex; align-items:center; gap:5px; }

/* ---------------------------------------------------------- 버튼 */
button, .btn{
  font-family:inherit; font-size:13px; padding:5px 12px; border-radius:6px;
  border:1px solid var(--edge-2); background:#fff; color:var(--ink); cursor:pointer;
}
button:hover, .btn:hover{ background:#F0F2F6; text-decoration:none; }
button:disabled{ opacity:.45; cursor:not-allowed; }
button.primary, .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
button.primary:hover{ background:var(--brand-2); }
button.danger{ background:#fff; border-color:var(--danger); color:var(--danger); }
button.danger:hover{ background:#FEF2F2; }
button.sm{ padding:3px 8px; font-size:12px; }

/* ---------------------------------------------------------- 표 */
.tbl-wrap{ overflow:auto; max-height:calc(100vh - 230px); }
table{ border-collapse:separate; border-spacing:0; width:100%; font-size:13px; }
th, td{ padding:6px 9px; border-bottom:1px solid var(--edge); text-align:left; white-space:nowrap; }
thead th{
  position:sticky; top:0; z-index:2; background:#F0F2F6; font-size:12px; font-weight:600;
  color:var(--dust); border-bottom:1px solid var(--edge-2); cursor:pointer; user-select:none;
}
thead th:hover{ background:#E7EAF0; }
thead th.nosort{ cursor:default; }
thead th .arrow{ opacity:.5; font-size:10px; margin-left:3px; }
tbody tr:hover{ background:#F7F9FC; }
tbody tr.sel{ background:#EAF2FE; }
td.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.wrap{ white-space:normal; min-width:220px; max-width:460px; }
/* 값이 길어 표를 밀어내는 칸. 폭을 묶고 넘치면 말줄임 — 전문은 title 툴팁으로 본다. */
td.clip{ max-width:170px; overflow:hidden; text-overflow:ellipsis; }
td.clip > span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.id{ font-family:var(--mono); font-size:12px; }

/* 열 고정 — 좌측 식별 정보는 가로 스크롤에도 남는다 */
.freeze1{ position:sticky; left:0;     z-index:1; background:#fff; }
.freeze2{ position:sticky; left:92px;  z-index:1; background:#fff; }
thead .freeze1, thead .freeze2{ z-index:3; background:#F0F2F6; }
tbody tr:hover .freeze1, tbody tr:hover .freeze2{ background:#F7F9FC; }
tbody tr.sel .freeze1, tbody tr.sel .freeze2{ background:#EAF2FE; }

/* ---------------------------------------------------------- 배지 */
.g{ display:inline-block; padding:1px 8px; border-radius:20px; font-size:11.5px; font-weight:700; }
.g.HOT{ background:var(--hot-bg); color:var(--hot); }
.g.WARM{ background:var(--warm-bg); color:var(--warm); }
.g.COLD{ background:var(--cold-bg); color:var(--cold); }
.g.미평가{ background:#F1F3F6; color:var(--dust-2); font-weight:500; }

.chip{
  display:inline-block; padding:1px 7px; border-radius:4px; font-size:11.5px;
  background:#EEF1F5; color:var(--dust); border:1px solid var(--edge);
}
.chip.ok{ background:var(--ok-bg); color:var(--ok); border-color:#A7F3D0; }
.chip.warn{ background:var(--warm-bg); color:var(--warm); border-color:#FDE68A; }
.chip.bad{ background:var(--hot-bg); color:var(--hot); border-color:#FECACA; }
/* 자동 적재로 새로 들어온, 아직 아무도 안 본 리드. 표에서 먼저 눈에 띄어야 한다. */
.chip.new{ background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }

/* ---------------------------------------------------------- 지표 카드 */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.card{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r); padding:12px 14px;
}
.card .k{ font-size:12px; color:var(--dust); margin-bottom:4px; }
.card .v{ font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.card .v small{ font-size:13px; font-weight:400; color:var(--dust); margin-left:3px; }
.card.alert{ border-color:#FECACA; background:#FFF7F7; }
.card.alert .v{ color:var(--hot); }

/* ---------------------------------------------------------- 폼 */
.form-grid{ display:grid; grid-template-columns:120px 1fr; gap:8px 12px; align-items:center; }
.form-grid label{ font-size:12.5px; color:var(--dust); }
/* 체크박스·라디오는 제외한다. width:100% 가 걸리면 체크박스가 칸 전체로 늘어나
   옆의 글자를 밀어내고 이름이 안 보인다(관심 솔루션 목록에서 실제로 발생). */
.form-grid input:not([type=checkbox]):not([type=radio]),
.form-grid select, .form-grid textarea{
  font-family:inherit; font-size:13px; padding:5px 9px; width:100%;
  border:1px solid var(--edge-2); border-radius:6px; background:#fff; color:var(--ink);
}
.form-grid input[type=checkbox], .form-grid input[type=radio]{ width:auto; flex:none; margin:0; }
.form-grid textarea{ min-height:66px; resize:vertical; line-height:1.5; }
.form-grid .full{ grid-column:1 / -1; }
input:focus, select:focus, textarea:focus{ outline:2px solid #BFDBFE; outline-offset:-1px; border-color:var(--brand-2); }
input[readonly]{ background:#F4F6F8; color:var(--dust); }

/* ---------------------------------------------------------- 타임라인 */
.tl{ list-style:none; }
.tl li{ position:relative; padding:0 0 14px 20px; border-left:2px solid var(--edge); }
.tl li:last-child{ border-left-color:transparent; padding-bottom:0; }
.tl li::before{
  content:""; position:absolute; left:-6px; top:4px; width:10px; height:10px;
  border-radius:50%; background:#fff; border:2px solid var(--edge-2);
}
.tl li.up::before{ border-color:var(--hot); background:var(--hot); }
.tl li .when{ font-size:11.5px; color:var(--dust-2); font-family:var(--mono); }
.tl li .what{ font-size:13px; margin:1px 0; }
.tl li .what b{ font-weight:600; }
.tl li .meta{ font-size:12px; color:var(--dust); }

/* ---------------------------------------------------------- 알림/보조 */
.empty{ padding:40px; text-align:center; color:var(--dust-2); font-size:13px; }
.note{
  font-size:12.5px; color:var(--dust); background:#F4F6F8;
  border-left:3px solid var(--edge-2); padding:8px 12px; border-radius:0 6px 6px 0; margin-bottom:10px;
}
.note.warn{ background:#FFFBEB; border-left-color:var(--warm); color:#92400E; }
.note.bad{ background:#FEF2F2; border-left-color:var(--hot); color:#991B1B; }

#toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(80px);
  background:#1B2130; color:#fff; padding:9px 18px; border-radius:8px; font-size:13px;
  z-index:100; opacity:0; transition:.22s; pointer-events:none; max-width:80vw;
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast.bad{ background:var(--danger); }

dialog{
  border:0; border-radius:12px; padding:0; max-width:620px; width:92vw;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
dialog::backdrop{ background:rgba(15,20,32,.45); }
dialog h3{ font-size:14px; padding:13px 16px; border-bottom:1px solid var(--edge); }
dialog .body{ padding:16px; max-height:66vh; overflow:auto; }
dialog .foot{ padding:11px 16px; border-top:1px solid var(--edge); display:flex; gap:8px; justify-content:flex-end; }

.rowsel{ width:28px; text-align:center; }
.muted{ color:var(--dust-2); }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }