/* ===================================================================
   Work Flow - 팀 협업 프로그램
   =================================================================== */

:root {
  --bg:        #f4f6fa;
  --panel:     #ffffff;
  --panel-2:   #fafbfd;
  /* 테두리 — 선은 은은하게 두고 옅은 그림자로 칸을 띄웁니다.
     (진한 선으로 격자를 그리면 화면이 투박해 보입니다)
       --border   : 카드·표·칸을 둘러싸는 바깥 선
       --border-2 : 칸 안에서 줄을 나누는 선 */
  --border:    #e3e8f0;
  --border-2:  #eef1f6;
  --text:      #1a2233;
  --text-2:    #5b6879;
  --text-3:    #8b96a8;
  --primary:   #3b6ef5;
  --primary-d: #2c58d0;   /* 파란 글씨 (옅은 파란 바탕 위) */
  --primary-h: #2c58d0;   /* 파란 단추에 손을 올렸을 때 바탕 */
  --primary-l: #eaf0ff;
  --green:     #12a05f;
  --green-l:   #e3f7ee;
  --orange:    #e08010;
  --orange-l:  #fdf2e0;
  --red:       #dc3b47;
  --red-l:     #fdeaec;
  --purple:    #7a5af0;
  --purple-l:  #f0ecfe;
  --gray-l:    #eff2f6;
  --shadow:    0 1px 2px rgba(20,32,64,.05), 0 4px 14px rgba(20,32,64,.06);
  --shadow-lg: 0 12px 40px rgba(20,32,64,.18);
  --radius:    10px;
  --sidebar-w: 210px;
  /* 화면 맨 윗줄(제목 + 전체 검색)의 높이.
     아래쪽에서 **위에 붙어 따라오는 것들**(사용 안내의 찾기칸·목차)이
     이 줄에 파고들지 않도록, 높이를 한 곳에 적어 두고 같이 씁니다. */
  --topbar-h: 58px;

  /* 왼쪽 메뉴 색 — 참조 그림처럼 **흰 바탕에 회색 글씨**, 지금 보고 있는 메뉴
     하나만 파란 알약으로 칠합니다. 색을 여기 이름표로 모아 두었으므로
     나중에 어두운 화면(다크 모드)을 넣을 때 이 여섯 줄만 바꾸면 됩니다. */
  --side-bg:     #ffffff;   /* 메뉴 바탕 */
  --side-fg:     #4b586c;   /* 메뉴 글씨 */
  --side-fg-2:   #97a3b6;   /* 묶음 이름 · 아래 작은 글씨 */
  --side-strong: #1a2233;   /* 제목 · 내 이름 */
  --side-line:   #e6eaf1;   /* 구분선 */
  --side-hover:  #f1f4f9;   /* 마우스를 올렸을 때 */

  /* 아래쪽 알림 띠 — 어느 화면에서나 글자가 보이게 짝으로 정합니다 */
  --toast-bg:    #1a2233;
  --toast-fg:    #ffffff;

  /* ── 곁들임 색 ──────────────────────────────────────────────────
     화면 곳곳에 흩어져 있던 색을 **여기 한 자리로** 모았습니다.
     어두운 화면(다크 모드)을 넣을 때 이 목록만 바꾸면 전체가 따라옵니다.
       -l  = 아주 옅은 바탕     -b  = 테두리
       -d  = 진한 글씨          -gd = 안내선 */
  --hover:      #f8faff;   /* 표·목록·달력 줄에 마우스를 올렸을 때 */
  --hover-b:    #eef2ff;   /* 파란 기운이 도는 강조 바탕 */
  --border-3:   #cdd6e4;   /* 조금 진한 테두리 (단추에 손을 올렸을 때) */
  --gray-2:     #eaeef5;   /* 칸반 칸처럼 한 단계 어두운 바탕 */
  --gray-b:     #b9c3d3;   /* 연한 회색 테두리 */
  --gray-gd:    #c9d2e0;   /* 회색 안내선 */

  --blue-l2:    #f4f7ff;   /* 파랑 띠 바탕 */
  --blue-b:     #cbd9fb;   /* 파랑 테두리 */
  --blue-d2:    #23439c;   /* 파랑 진한 글씨 */
  --blue-gd:    #b9ccf7;   /* 파랑 안내선 */

  --green-l2:   #f2fbf5;   /* 초록 옅은 바탕 */
  --green-b:    #cfeede;   /* 초록 테두리 */
  --green-d:    #0b6b40;   /* 초록 진한 글씨 */
  --green-gd:   #a6dcc2;   /* 초록 안내선 */

  --orange-l2:  #fff8ec;   /* 주황 옅은 바탕 */
  --orange-b:   #f0d9a8;   /* 주황 테두리 */
  --orange-d:   #96560a;   /* 주황 진한 글씨 */
  --orange-gd:  #f2d3a0;   /* 주황 안내선 */

  --red-l2:     #fff7f7;   /* 빨강 옅은 바탕 (공휴일 칸 등) */
  --red-b:      #f2c9cd;   /* 빨강 테두리 */

  --purple-l2:  #f8f5ff;   /* 보라 옅은 바탕 */
  --purple-b:   #e6ddfa;   /* 보라 테두리 */
  --purple-d:   #4b2e9e;   /* 보라 진한 글씨 */

  --mark:       #fff2b2;   /* 찾은 글자에 치는 형광펜 */
  --warn-l:     #fffbe6;   /* 확인이 필요한 칸 (사진에서 읽은 값) */
  --warn-b:     #f0c419;
  --code-bg:    #20242c;   /* 코드·사진 다듬기 판의 어두운 바탕 */
  --code-fg:    #e6edf3;
  --topbar-bg:  rgba(255,255,255,.92);  /* 화면 맨 윗줄 (살짝 비치는 바탕) */
}

/* ===================================================================
   어두운 화면 (다크 모드)
   ------------------------------------------------------------------
   위에서 모아 둔 **색 이름표만** 바꿉니다. 규칙은 하나도 건드리지 않으므로
   밝은 화면과 어두운 화면이 언제나 같은 모양을 유지합니다.
   화면 오른쪽 위의 🌙 / ☀ 단추로 바꾸고, 고른 값은 그 브라우저에 기억됩니다.
   =================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;                 /* 날짜칸·고르는칸·스크롤막대까지 어둡게 */

  --bg:        #12151d;
  --panel:     #1a1f2b;
  --panel-2:   #212736;
  --border:    #2e3648;
  --border-2:  #262d3c;
  --border-3:  #3d4759;
  --text:      #e6eaf2;
  --text-2:    #a9b4c6;
  --text-3:    #7b8799;

  --primary:   #4d80ff;
  --primary-d: #bcd0ff;   /* 옅은 파란 바탕 위의 글씨 — 밝게 */
  --primary-h: #6d97ff;   /* 파란 단추 눌렀을 때 */
  --primary-l: #23325a;
  --green:     #2fbd7a;
  --green-l:   #18382a;
  --orange:    #e8981f;
  --orange-l:  #3d2d14;
  --red:       #ef5a67;
  --red-l:     #44222b;
  --purple:    #9b82f5;
  --purple-l:  #2f2759;
  --gray-l:    #262d3c;

  --shadow:    0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 14px 44px rgba(0,0,0,.6);

  /* 왼쪽 메뉴 */
  --side-bg:     #161b26;
  --side-fg:     #a9b4c6;
  --side-fg-2:   #6d7994;
  --side-strong: #eef2f8;
  --side-line:   #262d3c;
  --side-hover:  #1f2634;

  /* 어두운 화면에서는 **밝은 알약에 어두운 글자** — 화면과 또렷이 갈립니다 */
  --toast-bg:    #eef2f8;
  --toast-fg:    #141924;

  /* 곁들임 색 */
  --hover:      #212938;
  --hover-b:    #22304f;
  --gray-2:     #1d2330;
  --gray-b:     #3b4356;
  --gray-gd:    #39415a;

  --blue-l2:    #22304f;
  --blue-b:     #33436b;
  --blue-d2:    #d2dfff;
  --blue-gd:    #3a5490;

  --green-l2:   #18382a;
  --green-b:    #2b6b4c;
  --green-d:    #9eecc4;
  --green-gd:   #2f6b52;

  --orange-l2:  #3d2d14;
  --orange-b:   #6b5326;
  --orange-d:   #f9d7a6;
  --orange-gd:  #6b5326;

  --red-l2:     #44222b;
  --red-b:      #6e3038;

  --purple-l2:  #2f2759;
  --purple-b:   #4b3f80;
  --purple-d:   #dacdff;

  --mark:       #5d4c14;
  --warn-l:     #37310f;
  --warn-b:     #8a7420;
  --code-bg:    #0f131b;
  --code-fg:    #e6edf3;
  --topbar-bg:  rgba(26,31,43,.92);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: "Pretendard", -apple-system, "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* 적는 칸의 **기본 바탕**.
   줄 안에 바로 놓은 칸(할 일 추가칸 등)은 바탕색을 따로 안 주면 브라우저 기본색이
   되는데, 어두운 화면에서는 그 색이 주변 상자와 달라 혼자 튀어 보였습니다.
   여기서 한 번에 맞춰 두면 어느 화면에 놓아도 같은 색이 됩니다.
   (체크박스·라디오는 제외 — 바탕을 주면 모양이 깨집니다) */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--panel); color: var(--text);
}
input[type=number] { -moz-appearance: textfield; }

/* ---------- 로그인 ---------- */
#login-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--primary-d) 0%, #5b3af0 55%, #8b46e8 100%);
  z-index: 900;
}
.login-card {
  width: 380px; background: var(--panel); border-radius: 16px; padding: 40px 36px 32px;
  box-shadow: 0 24px 70px rgba(10,20,60,.35);
}
.login-card h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.5px; }
.login-card p.sub { margin: 0 0 26px; color: var(--text-3); font-size: 13px; }
.login-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 14px 0 6px; }
.login-card input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel-2); outline: none;
}
.login-card input:focus { border-color: var(--primary); background: var(--panel); }
.login-card button {
  width: 100%; margin-top: 22px; padding: 12px; border: 0; border-radius: 8px;
  background: var(--primary); color: #fff; font-weight: 700; cursor: pointer;
}
.login-card button:hover { background: var(--primary-d); }
.login-hint { margin-top: 18px; font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.7; }
.login-err { margin-top: 14px; padding: 9px 12px; border-radius: 7px; background: var(--red-l);
             color: var(--red); font-size: 12.5px; display: none; }

/* ---------- 레이아웃 ---------- */
#app { display: none; min-height: 100%; }
#app.on { display: block; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--side-bg); color: var(--side-fg);
  border-right: 1px solid var(--side-line);
  display: flex; flex-direction: column; z-index: 40;
}
.brand { padding: 20px 20px 16px; border-bottom: 1px solid var(--side-line); }
.brand b { display: block; color: var(--side-strong); font-size: 17px; letter-spacing: -.4px; }
.brand span { font-size: 11px; color: var(--side-fg-2); letter-spacing: .5px; }
/* 메뉴가 16개로 늘어 창이 낮으면 넘칩니다.
   ① 줄 간격을 조금 줄여 웬만한 창에서는 다 들어가게 하고
   ② 그래도 넘칠 때를 위해 스크롤은 살려 두되 **막대는 감춥니다**
      (마우스 휠·터치로는 그대로 굴러갑니다) */
.nav {
  flex: 1; padding: 8px 10px; overflow-y: auto;
  scrollbar-width: none;            /* 파이어폭스 */
  -ms-overflow-style: none;         /* 옛 엣지 */
}
.nav::-webkit-scrollbar { width: 0; height: 0; }   /* 크롬·엣지 */
/* 아직 아래에 메뉴가 더 있을 때만 흐릿하게 — 잘린 줄 모르는 일이 없게 */
.nav.more::after {
  content: '⌄'; display: block; position: sticky; bottom: -8px;
  height: 30px; margin: -30px -10px 0; pointer-events: none;
  text-align: center; line-height: 40px; font-size: 15px; color: var(--side-fg-2);
  background: linear-gradient(transparent, var(--side-bg) 62%);
}
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin-bottom: 1px;
  border-radius: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
/* ── 어디를 눌러도 커서가 깜빡이지 않게 ────────────────────────────
   work flow 화면의 거의 모든 글자는 **읽고 누르는 것**이지 고쳐 쓰는 글이
   아닙니다. 그런데 그냥 두면 눌렀을 때 글자 사이에 커서가 내려앉아
   깜빡이거나 글씨가 파랗게 잡힙니다. 단추·꼬리표를 하나씩 막아 보았지만
   **사이사이 빈 자리**가 남아 계속 새어 나왔습니다.

   그래서 화면 전체를 기본으로 막고, **복사할 일이 있는 곳만** 도로 풉니다.
   아래 목록에 없는데 복사가 필요한 자리가 나오면 여기에 한 줄 보태면 됩니다. */
body { -webkit-user-select: none; user-select: none; }

/* 복사가 돼야 하는 곳 */
input, textarea, select,          /* 적는 칸은 당연히 */
table.tbl td,                     /* 표의 칸 — 전화번호·금액 등 */
.cd-line b, .cd-line a, .cd-tags, /* 명함 상세의 값 */
.cd-memo,                         /* 명함 메모 */
.info-v,                          /* 견적·방문보고서 상세의 값 */
.note-card .tx,                   /* 메모 카드 본문 */
.ncard .ln,                       /* 명함 카드의 연락처 */
.gd-body {                        /* 사용 안내 본문 */
  -webkit-user-select: text; user-select: text;
}
/* 값은 복사되게 풀어 두었지만, 그 안의 **이름표**는 도로 막습니다 */
.cd-memo .lb, .info-lb { -webkit-user-select: none; user-select: none; }
.nav a .ic { width: 18px; text-align: center; font-size: 15px; }
.nav a:hover { background: var(--side-hover); color: var(--side-strong); }
/* **지금 보고 있는 메뉴 하나만** 색이 들어갑니다 (참조 그림과 같은 방식) */
.nav a.on { background: var(--primary); color: #fff; font-weight: 600;
            box-shadow: 0 1px 4px rgba(59,110,245,.30); }
.nav a .cnt {
  margin-left: auto; background: var(--gray-l); color: var(--text-2);
  font-size: 11px; padding: 1px 7px; border-radius: 10px; font-weight: 700;
}
.nav a.on .cnt { background: rgba(255,255,255,.26); color: #fff; }
.nav-sep { margin: 9px 12px 4px; font-size: 10.5px; letter-spacing: 1px;
           color: var(--side-fg-2); font-weight: 700; }
.side-foot { padding: 14px 16px; border-top: 1px solid var(--side-line);
             font-size: 11.5px; color: var(--side-fg-2); }
.side-foot b { color: var(--side-strong); }
.side-foot a { color: var(--side-fg-2); cursor: pointer; }
.side-foot a:hover { color: var(--primary); }

.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30; background: var(--topbar-bg);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
  padding: 0 24px; height: var(--topbar-h); display: flex; align-items: center; gap: 14px;
}
.topbar h2 { margin: 0; font-size: 17px; letter-spacing: -.3px; white-space: nowrap; }
.topbar .spacer { flex: 1; }

/* 어느 화면에서나 쓰는 전체 검색창 */
.topsearch { position: relative; flex: 1; max-width: 420px; margin-left: 10px; }
.topsearch .ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .55; pointer-events: none;
}
.topsearch input {
  width: 100%; padding: 8px 12px 8px 32px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--panel-2);
  outline: none; color: var(--text);
}
.topsearch input:focus { border-color: var(--primary); background: var(--panel); }
@media (max-width: 900px) { .topsearch { display: none; } }

/* 검색 결과에서 찾은 낱말 강조 */
mark.hit { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px; }

/* 최근 활동처럼 목록이 길어질 수 있는 영역 — 카드 안에서만 스크롤됩니다.
   높이는 화면을 그린 뒤 자바스크립트가 '줄 경계'에 딱 맞춰 정합니다.
   (px 로 고정해 두면 마지막 줄이 반쯤 잘려 보입니다)
   아래 값은 자바스크립트가 아직 손대기 전의 임시 높이입니다. */
.scroll-box {
  max-height: 360px; overflow-y: auto;
  scroll-snap-type: y proximity;          /* 스크롤해도 줄 경계에 붙습니다 */
}
.scroll-box > .list-item { scroll-snap-align: start; }
.scroll-box::-webkit-scrollbar { width: 9px; }
.scroll-box::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 5px; }
.scroll-box::-webkit-scrollbar-thumb:hover { background: var(--gray-b); }
.scroll-box::-webkit-scrollbar-track { background: transparent; }

/* 페이지 나누기 */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 18px; border-top: 1px solid var(--border-2); flex-wrap: wrap;
}
.pager button {
  min-width: 30px; height: 30px; padding: 0 8px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel);
  color: var(--text-2); cursor: pointer;
}
.pager button:hover:not(:disabled) { background: var(--panel-2); border-color: var(--border-3); }
.pager button.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .gap { color: var(--text-3); padding: 0 2px; }
.pager .info { color: var(--text-3); font-size: 12px; margin-right: auto; }

/* 카드 제목줄에 들어가는 작은 선택상자 */
.mini-sel {
  font-size: 12px; padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); color: var(--text-2); outline: none; max-width: 108px;
}
.mini-sel:focus { border-color: var(--primary); }

/* 히스토리 타임라인 */
.tl { position: relative; padding-left: 26px; }
.tl::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.tl-item { position: relative; padding: 0 0 16px 0; }
.tl-item::before {
  content: ''; position: absolute; left: -22px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--primary);
}
.tl-item.q::before { border-color: var(--green); }
.tl-item.t::before { border-color: var(--orange); }
.tl-item.c::before { border-color: var(--text-3); }
.tl-date { font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.tl-title { font-size: 13.5px; font-weight: 600; }
.tl-note { font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.6; }
.topbar .who { font-size: 13px; color: var(--text-2); }
/* 밝은 화면 ↔ 어두운 화면 바꾸는 단추 */
.theme-btn {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel); cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-btn:hover { background: var(--panel-2); border-color: var(--border-3); }
.topbar .who b { color: var(--text); }

.content { padding: 20px 24px 60px; flex: 1; }

/* ---------- 공통 요소 ---------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
        box-shadow: var(--shadow); }
.card > h3 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--border-2);
             font-size: 14px; display: flex; align-items: center; gap: 8px; }
.card > h3 .spacer { flex: 1; }
.card-body { padding: 16px 18px; }
.grid { display: grid; gap: 16px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap;
}
.btn:hover { background: var(--panel-2); border-color: var(--border-3); }
.btn.pri { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.pri:hover { background: var(--primary-h); border-color: var(--primary-h); }
.btn.dgr { color: var(--red); border-color: var(--red-b); }
.btn.dgr:hover { background: var(--red-l); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.gh { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.gh:hover { background: var(--gray-l); }
/* 누를 수 없는 버튼 (예: 아무것도 고르지 않았을 때의 [선택 삭제]) */
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--panel); border-color: var(--border); }
/* 지우는 단추는 **고른 것이 있을 때만 빨갛게** 합니다.
   아무것도 안 골랐는데 빨간 글씨가 떠 있으면 (특히 어두운 화면에서)
   위험한 단추가 늘 켜져 있는 것처럼 보였습니다. 그때는 그냥 회색으로 둡니다. */
.btn.dgr:disabled { color: var(--text-3); border-color: var(--border); opacity: .7; }
.btn.dgr:disabled:hover { background: var(--panel); border-color: var(--border); }

.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }
/* 입력칸 제목 옆의 작은 전환 링크 */
.link-btn {
  float: right; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--primary); text-decoration: underline;
}
.link-btn:hover { color: var(--primary-d); }

/* 고객사 입력칸 — 적는 대로 비슷한 회사를 찾아 보여줍니다 */
.cust-pick { position: relative; }
.ac-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: var(--shadow-lg); max-height: 232px; overflow-y: auto; margin-top: 3px;
}
.ac-item {
  padding: 9px 12px; font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--border-2);
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.on { background: var(--primary-l); }
.ac-item .sub { color: var(--text-3); font-size: 11.5px; margin-left: auto; }
.ac-item.new { color: var(--primary-d); font-weight: 600; }
.ac-none { padding: 10px 12px; font-size: 12.5px; color: var(--text-3); }
/* 목록 화면 검색칸 아래에 뜨는 추천 상자 (툴바에 가리지 않게 화면 기준으로 띄웁니다) */
/* 추천 목록은 화면 기준으로 떠 있어서, 팝업창·메모창보다 위에 있어야 고를 수 있습니다 */
.ac-pop { position: fixed; z-index: 950; max-height: 330px; }
.ac-pop .ac-item .sub { white-space: nowrap; padding-left: 12px; }
.ac-item.find { background: var(--panel-2); }
.ac-item.find b { color: var(--primary-d); }
.ac-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-hint { padding: 8px 12px; font-size: 11.5px; color: var(--text-3);
           border-top: 1px solid var(--border-2);
           position: sticky; bottom: 0; background: var(--panel); }
/* 체크박스는 제외 — 포함시키면 width:100% 가 걸려 옆 글자를 밀어냅니다 */
.field input:not([type=checkbox]), .field select, .field textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel); outline: none;
}
.field input[type=checkbox] {
  width: 17px; height: 17px; flex-shrink: 0;
  accent-color: var(--primary); cursor: pointer; margin: 0;
}
.field textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l);
}
.field .hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input[type=search], .toolbar input[type=text], .toolbar select, .toolbar input[type=date] {
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); outline: none;
}
/* 검색칸 — 안내 글(제목 · 목적 · 내용 · 고객사 검색 (엔터))이 잘리지 않을 만큼
   넓게 잡고, 도구막대에 남는 자리가 있으면 더 늘어나게 합니다.
   폭이 좁은 화면에서는 260px 까지 줄고 그 아래로는 줄이 바뀝니다. */
.toolbar input[type=search] {
  min-width: 260px; flex: 1 1 300px; max-width: 420px; text-overflow: ellipsis;
}
@media (max-width: 760px) { .toolbar input[type=search] { min-width: 180px; flex-basis: 180px; } }
/* 거르는 칸이 많은 화면(명함첩)의 검색칸 — 좁게 잡아 거르기 줄이 한 줄에 들어가게.
   찾는 범위는 그대로입니다 (이름 · 회사 · 전화 · 메모). */
.toolbar input[type=search].sm-search {
  min-width: 160px; flex: 0 1 176px; max-width: 280px;
}
.toolbar .spacer { flex: 1; }
/* 도구막대 안의 칸과 단추 높이를 모두 같게 맞춥니다 */
.toolbar .btn, .toolbar .size-box,
.toolbar input[type=search], .toolbar input[type=text],
.toolbar input[type=date], .toolbar input[type=number], .toolbar select {
  height: 34px; box-sizing: border-box;
}
.toolbar .btn.sm { padding: 5px 12px; }
/* 도구막대의 체크 항목 (자료 없는 곳만 / 감춘 곳 포함) */
.toolbar .chk { display: inline-flex; align-items: center; gap: 5px;
                font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; padding: 10px 12px; background: var(--panel-2); color: var(--text-2);
  font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5; white-space: nowrap;
}
table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
/* 눌러서 순서를 바꾸는 머리글 (견적일 · 고객사) */
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--primary-d); background: var(--primary-l); }
table.tbl th .sort-ic { margin-left: 4px; font-size: 9px; opacity: .3; }
table.tbl th .sort-ic.on { opacity: 1; color: var(--primary); }
table.tbl tbody tr:hover { background: var(--hover); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 긴 글이 든 칸 — 한 줄로 줄이고 넘치면 … 로 (마우스를 올리면 전체가 보입니다).
   줄마다 높이가 달라지면 눈이 줄을 따라가기 어려워서입니다. */
table.tbl .ell { display: block; max-width: 100%; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
table.tbl td .dim { color: var(--text-3); }
/* 이름 + 꼬리표를 한 줄에. 이름이 길면 이름만 … 로 줄고 꼬리표는 그대로 보입니다 */
table.tbl .cell-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
table.tbl .cell-row .ell { flex: 0 1 auto; }
table.tbl .cell-row .tag { flex: none; }
/* 전화번호 · 날짜는 줄이 바뀌면 읽기 어렵습니다 */
table.tbl td.nowrap { white-space: nowrap; }
/* 칸이 많은 표 (고객관리처럼 열이 열 개쯤 되는 것).
   머리글에 적어 둔 칸 너비를 그대로 지켜서, 글이 길면 칸이 벌어지는 대신 … 로 줄입니다.
   이렇게 하지 않으면 이름이 '황/성/모' 처럼 세로로 쪼개져 보입니다. */
table.tbl.fixed { table-layout: fixed; }
table.tbl.fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; background: var(--gray-l); color: var(--text-2); white-space: nowrap;
}
.tag.blue   { background: var(--primary-l); color: var(--primary-d); }
.tag.green  { background: var(--green-l);   color: var(--green); }
.tag.orange { background: var(--orange-l);  color: var(--orange); }
.tag.red    { background: var(--red-l);     color: var(--red); }
/* 눌러서 바꿀 수 있는 꼬리표 (고객사 등급 등) */
.tag.clickable-tag { cursor: pointer; border: 1px dashed transparent; }
.tag.clickable-tag:hover { border-color: currentColor; }
.tag.purple { background: var(--purple-l);  color: var(--purple); }

.avatar {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-size: 11px;
  font-weight: 700; flex-shrink: 0;
}
.who-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* 칸이 좁으면 동그란 얼굴은 그대로 두고 이름만 … 로 줄입니다 */
.who-cell .avatar { flex: none; }
.who-cell .ell { flex: 0 1 auto; }

.empty { padding: 46px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.empty .big { font-size: 34px; display: block; margin-bottom: 10px; opacity: .5; }

.bar { height: 6px; border-radius: 4px; background: var(--gray-l); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 4px; }

/* ---------- 대시보드 ---------- */
/* ── 살짝 거들어 주기 ─────────────────────────────────────────────
   **눈에 띄되 다그치지 않게.** 빨강 대신 은은한 바탕을 쓰고,
   테두리도 왼쪽 한 줄만 둡니다. 걸리는 것이 없으면 아예 안 그립니다. */
.assist-wrap { display: grid; gap: 10px; margin-bottom: 18px; }
.assist {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 16px 8px;
}
.assist .as-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.assist .as-top .ic { font-size: 15px; }
.assist .as-top b { font-size: 13.5px; }
.assist .as-hint { font-size: 12px; color: var(--text-3); }
.as-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 2px; border-top: 1px solid var(--border);
  font-size: 13px;
}
.as-row .as-name { font-weight: 600; cursor: pointer; color: var(--text); }
.as-row .as-name:hover { color: var(--primary); text-decoration: underline; }
.as-row .as-sub { font-size: 12px; color: var(--text-3); }
.as-row .as-days { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.as-more { padding: 7px 2px 2px; font-size: 12px; color: var(--text-3);
           border-top: 1px solid var(--border); }
.as-more a { color: var(--primary); cursor: pointer; margin-left: 6px; }
.as-more a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .as-row { flex-wrap: wrap; }
  .as-row .spacer { flex: 0 0 100% !important; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 15px 16px; box-shadow: var(--shadow); }
.stat .lbl { font-size: 12px; color: var(--text-2); font-weight: 600; }
.stat .val { font-size: 25px; font-weight: 800; letter-spacing: -1px; margin-top: 3px; }
.stat .val small { font-size: 13px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.stat.warn .val { color: var(--red); }
.stat.ok .val { color: var(--green); }

/* 누르면 해당 목록으로 가는 숫자 칸 */
.stat.go { cursor: pointer; transition: .12s; position: relative; }
.stat.go:hover {
  border-color: var(--primary); box-shadow: 0 2px 10px rgba(59,110,245,.15);
  transform: translateY(-1px);
}
.stat.go::after {
  content: '›'; position: absolute; right: 13px; top: 12px;
  font-size: 17px; color: var(--text-3); opacity: 0; transition: .12s;
}
.stat.go:hover::after { opacity: 1; }
.mini-stat { transition: .12s; }
.mini-stat:hover { background: var(--primary-l) !important; }

/* 다른 화면에서 넘어와 걸려 있는 조건 표시 (누르면 풀립니다) */
.btn.chip {
  background: var(--primary-l); border-color: var(--blue-b); color: var(--primary-d);
  font-weight: 600;
}
.btn.chip:hover { background: var(--primary-l); border-color: var(--primary); }

.dash-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
/* 칸 안의 글이 길어도 화면 밖으로 밀지 않게 (안 넣으면 가로 스크롤이 생깁니다) */
.dash-grid > *, .grid > * { min-width: 0; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

.list-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px;
             border-bottom: 1px solid var(--border-2); cursor: pointer; }
.list-item:hover { background: var(--hover); }
.list-item:last-child { border-bottom: 0; }
.list-item .ttl { flex: 1; min-width: 0; }
.list-item .ttl b { display: block; font-weight: 600; font-size: 13.5px;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .ttl span { font-size: 11.5px; color: var(--text-3); }
/* 최근 활동 — 한 줄로 (업체명 + 한 일 + 자세한 내용 + 시각) */
.act-row .line { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.act-row .line b { font-weight: 600; font-size: 13px; white-space: nowrap; }
.act-row .line .sub { flex: 1; min-width: 0; font-size: 12px; color: var(--text-3);
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 무슨 이야기가 오갔는지 — 제목보다 한 톤 흐리게 이어 붙입니다.
   한 줄이 넘치면 … 로 잘립니다 (위 .sub 가 그렇게 해 둡니다). */
.act-row .line .act-note { color: var(--text-4, var(--text-3)); }
.act-row .when { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* 🗓 월간 정리 — 지난달과 견주는 작은 글씨 */
.stat .mo-sub { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.mo-diff { font-weight: 700; margin-left: 3px; }
.mo-diff.up { color: var(--green); }
.mo-diff.dn { color: var(--red); }

/* 📋 오늘의 팀 — 하루치 일일보고를 한 장으로.
   팀은 보통 열 명 안쪽이라 **한 번에 다 보이는 편**이 낫습니다.
   (스크롤이 생기면 '누가 안 썼나' 를 보려고 또 굴려야 합니다) */
#team-day .scroll-box { max-height: 620px; }
.td-row { cursor: pointer; align-items: flex-start; }
.td-row.td-flat { cursor: default; }
.td-row:not(.td-flat):hover { background: var(--panel-2); }
.td-row .line { flex: 1; min-width: 0; display: flex; flex-wrap: wrap;
                align-items: baseline; gap: 4px 8px; }
.td-row .line > b { font-weight: 600; font-size: 13px; white-space: nowrap; }
.td-row .line .sub { flex: 1 1 100%; min-width: 0; font-size: 12px; color: var(--text-3); }
/* 업체 한 곳이 **한 줄**입니다. 예전에는 옆으로 죽 이어 붙여서
   업체명과 내용이 뒤엉켜 어디까지가 한 곳인지 알아보기 어려웠습니다. */
.td-co { display: block; margin: 1px 0; }
.td-co + .td-co { margin-top: 2px; }
.td-co b { color: var(--text-2); font-weight: 600; }
.td-co b::after { content: ' '; }
.td-co i, .td-row .line .sub i { font-style: normal; color: var(--text-3); opacity: .75; }
.td-next, .td-note { flex: 1 1 100%; font-size: 11.5px; color: var(--text-3); }
.td-next::before { content: '↳ '; opacity: .6; }
/* 📮 못 보낸 보고서 띠 — 화면 맨 위, 내용 바로 above.
   보관한 것이 없으면 아예 보이지 않습니다(hidden). */
#outbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 18px 0; padding: 9px 13px; border-radius: 10px;
  background: #fff6e5; color: #6b4a12; font-size: 12.5px; line-height: 1.5;
  border: 1px solid #f0d9a8; }
:root:not([data-theme="light"]) #outbox { background: #3a2f18; color: #f2d79a;
  border-color: #5a4720; }
:root[data-theme="dark"] #outbox { background: #3a2f18; color: #f2d79a;
  border-color: #5a4720; }
#outbox .ob-ico { font-size: 15px; }
#outbox .ob-txt { flex: 1 1 260px; min-width: 0; }
#outbox .ob-txt b { font-weight: 700; }
#outbox .ob-list { display: flex; flex-wrap: wrap; gap: 5px; }
#outbox .ob-one { padding: 2px 7px; border-radius: 6px; font-size: 11.5px;
  background: rgba(0, 0, 0, .06); }
:root:not([data-theme="light"]) #outbox .ob-one { background: rgba(255, 255, 255, .1); }
#outbox .ob-one i { font-style: normal; color: #c0392b; }

/* ✏ 저장 못 하고 닫은 내용이 남아 있을 때 */
.rp-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 9px 13px; border-radius: 10px;
  background: var(--panel-2); color: var(--text-2); font-size: 12.5px;
  line-height: 1.5; }
.rp-draft span { flex: 1 1 260px; min-width: 0; }
.rp-draft b { color: var(--text-1); font-weight: 600; }

/* 지난 날 기록을 보여 줄 때 **왜 그런지** 한 줄로. 날짜만 슬쩍 바뀌면
   "오늘 날짜로 안 바뀐다" 고 읽힙니다 (2026-09-23 실제 문의). */
.td-back { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 8px; padding: 7px 10px; border-radius: 8px;
  background: var(--panel-2); color: var(--text-2); font-size: 12px;
  line-height: 1.5; }
.td-back b { color: var(--text-1); font-weight: 600; }
.td-back .btn { margin-left: auto; }
.td-row.td-none { opacity: .62; }
.td-row.td-none .sub { color: var(--warn, #d08b2c); }
.td-firms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
            padding: 10px 18px; border-top: 1px solid var(--border-2); }
.td-firms .lbl { font-size: 11.5px; color: var(--text-3); margin-right: 2px; }

.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--border-2); }
.rank-row:last-child { border-bottom: 0; }
.rank-row .nm { flex: 1; font-weight: 600; font-size: 13px; }
.rank-row .nm small { display: block; font-weight: 400; color: var(--text-3); font-size: 11px; }
.rank-row .bars { display: flex; gap: 5px; align-items: center; }
.rank-row.clickable { cursor: pointer; }
.rank-row.clickable:hover { background: var(--panel-2); }
.rank-row .caret { color: var(--text-3); font-size: 11px; margin-left: 4px; width: 12px; }
/* 팀원 줄을 눌렀을 때 아래에 펼쳐지는 업무 목록 */
.rank-open { background: var(--panel-2); border-bottom: 1px solid var(--border-2); }
.member-tabs { display: flex; gap: 6px; align-items: center; padding: 9px 18px 4px; flex-wrap: wrap; }
.member-tabs .spacer { flex: 1; }

/* ---------- 칸반 ---------- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(215px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1280px) { .kanban { grid-template-columns: repeat(3, minmax(215px, 1fr)); } }
@media (max-width: 820px)  { .kanban { grid-template-columns: 1fr; } }
.kcol { background: var(--gray-2); border-radius: var(--radius); padding: 8px; min-height: 130px; }
.kcol.over { background: var(--primary-l); outline: 2px dashed var(--primary); }
.kcol > h4 { margin: 4px 6px 10px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.kcol > h4 .n { background: var(--panel); padding: 0 7px; border-radius: 10px; font-size: 11px; }
.kcol > h4 .dot { width: 8px; height: 8px; border-radius: 50%; }
.kcard {
  background: var(--panel); border-radius: 8px; padding: 11px 12px; margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(20,32,64,.09); cursor: pointer; border-left: 3px solid transparent;
}
.kcard:hover { box-shadow: 0 4px 14px rgba(20,32,64,.14); }
.kcard.dragging { opacity: .4; }
.kcard.p1 { border-left-color: var(--red); }
.kcard.p2 { border-left-color: var(--orange); }
.kcard.p3 { border-left-color: var(--gray-b); }
.kcard.p4 { border-left-color: var(--border-2); }
.kcard .cust { font-size: 11px; color: var(--primary); font-weight: 700; }
.kcard .ttl { font-size: 13px; font-weight: 600; margin: 2px 0 8px; line-height: 1.4; }
.kcard .meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.kcard .meta .spacer { flex: 1; }
.kcard .due.over { color: var(--red); font-weight: 700; }

/* ---------- 모달 ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(16,24,44,.5); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 30px 16px; overflow: hidden;
}
/* 세로가 낮은 화면에서는 팝업 위아래 여백을 줄여 더 많이 담습니다 */
@media (max-height: 780px) { .modal-bg { padding: 12px 16px; } }
/* 팝업이 화면보다 길어지면 팝업 안쪽(.body)만 스크롤되게 합니다.
   제목줄과 버튼줄은 항상 제자리에 보입니다. */
.modal {
  background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px; max-height: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
.modal.wide { max-width: 900px; }
.modal.xwide { max-width: 1080px; }
/* 견적 상세는 이카운트 견적 화면처럼 칸이 많아 더 넓게 씁니다 */
.modal.qwide { max-width: 1320px; }
/* 창을 옮기는 중에는 글자가 선택되지 않게 */
.modal > header.drag-handle h3 { user-select: none; }
.modal > header {
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; background: var(--panel);
  cursor: move;                      /* 제목 줄을 잡고 창을 옮길 수 있습니다 */
  border-radius: 14px 14px 0 0; z-index: 2; flex-shrink: 0;
}
.modal > header h3 { margin: 0; font-size: 16px; flex: 1; }
.modal > header .x { cursor: pointer; color: var(--text-3); font-size: 20px; line-height: 1;
                     border: 0; background: none; padding: 4px 8px; border-radius: 6px; }
.modal > header .x:hover { background: var(--gray-l); color: var(--text); }
.modal > .body { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.modal > footer {
  padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px;
  justify-content: flex-end; background: var(--panel-2); border-radius: 0 0 14px 14px;
  flex-shrink: 0;
}
.modal > footer .spacer { flex: 1; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -4px 0 16px; }
.tabs button {
  padding: 9px 14px; border: 0; background: none; cursor: pointer; font-weight: 600;
  font-size: 13px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- 코멘트 ---------- */
.cmt { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-2); }
.cmt:last-child { border-bottom: 0; }
.cmt .bd { flex: 1; min-width: 0; }
.cmt .hd { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.cmt .hd b { color: var(--text); font-size: 12.5px; }
.cmt .tx { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.cmt.inst { background: var(--orange-l2); margin: 0 -12px; padding: 11px 12px; border-radius: 8px;
            border-bottom: 1px solid var(--border-2); }
.cmt.inst .tx { font-weight: 500; }

/* ---------- 체크리스트 ---------- */
.chk { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-2); }
.chk:last-child { border-bottom: 0; }
/* 글자 옆까지만 눌리게. (기본 .chk 는 줄 전체를 덮어서
   같은 줄 아무 데나 눌러도 체크가 바뀝니다) */
.chk.inline { display: inline-flex; width: auto; gap: 6px;
              padding: 4px 2px; border-bottom: 0; cursor: pointer; }
.chk input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; }
.chk .tx { flex: 1; font-size: 13.5px; }
.chk.done .tx { text-decoration: line-through; color: var(--text-3); }
.chk .rm { opacity: 0; cursor: pointer; color: var(--text-3); border: 0; background: none; }
.chk:hover .rm { opacity: 1; }

/* ---------- 캘린더 ---------- */
.cal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
       overflow: hidden; box-shadow: var(--shadow); }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--panel-2);
            border-bottom: 1px solid var(--border); }
.cal-head div { padding: 9px 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-2); }
.cal-head div:first-child { color: var(--red); }
.cal-head div:last-child { color: var(--primary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 116px; border-right: 1px solid var(--border-2);
            border-bottom: 1px solid var(--border-2); padding: 6px; cursor: pointer; }
.cal-cell:hover { background: var(--hover); }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.other { background: var(--panel-2); }
.cal-cell.other .dnum { color: var(--gray-b); }
.cal-cell.today .dnum { background: var(--primary); color: #fff; border-radius: 50%;
                        width: 22px; height: 22px; display: inline-flex;
                        align-items: center; justify-content: center; }
.cal-cell .dnum { font-size: 12px; font-weight: 700; color: var(--text-2); }
/* 공휴일 · 주말 날짜 색 + 공휴일 이름 */
.cal-cell .dnum.red { color: var(--red); }
.cal-cell .dnum.blue { color: var(--primary); }
.cal-cell.holi { background: var(--red-l2); }
.cal-cell.holi:hover { background: var(--red-l); }
.cal-cell .hol-nm { font-weight: 600; font-size: 10.5px; color: var(--red); margin-left: 4px; }
/* 기념일 (생일 · 입사 기념일 · 퇴사일) */
.cal-mk {
  font-size: 10.5px; margin-top: 3px; padding: 1px 5px; border-radius: 4px;
  background: var(--panel-2); color: var(--text-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev {
  font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 600;
}

/* ---------- 견적 품목 ---------- */
table.items { width: 100%; border-collapse: collapse; font-size: 13px; }
table.items th { padding: 7px 6px; background: var(--panel-2); font-size: 11.5px;
                 color: var(--text-2); border-bottom: 1px solid var(--border); text-align: left; }
table.items td { padding: 4px; border-bottom: 1px solid var(--border-2); }
table.items input {
  width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; outline: none;
}
table.items input:hover { background: var(--panel-2); }
table.items input:focus { border-color: var(--primary); background: var(--panel); }
table.items input.num { text-align: right; font-variant-numeric: tabular-nums; }
table.items td.amt { text-align: right; font-variant-numeric: tabular-nums;
                     font-weight: 700; padding-right: 10px; }
.q-total { margin-top: 14px; display: flex; justify-content: flex-end; }
.q-total table { font-size: 13.5px; }
.q-total td { padding: 5px 0 5px 26px; text-align: right; font-variant-numeric: tabular-nums; }
.q-total td.k { color: var(--text-2); font-weight: 600; padding-left: 0; text-align: left; }
.q-total tr.sum td { font-size: 18px; font-weight: 800; color: var(--primary);
                     border-top: 2px solid var(--border); padding-top: 9px; }

/* 견적 상세의 품목표 — 이카운트 견적 화면처럼 한 품목에 여러 줄이 들어갑니다 */
table.tbl.q-items { font-size: 12.5px; min-width: 1080px; }
table.tbl.q-items th { padding: 7px 9px; line-height: 1.4; }
table.tbl.q-items th small { font-weight: 600; color: var(--text-3); }
table.tbl.q-items td { padding: 9px 9px; }
table.tbl.q-items tbody tr { border-bottom: 1px solid var(--border); }

/* ---------- 업무지시 ---------- */
.instr-hint { display: flex; align-items: center; gap: 6px; cursor: pointer;
              background: var(--orange-l2); border: 1px solid var(--orange-b); border-radius: 8px;
              padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.instr-hint:hover { background: var(--orange-l); }
.instr-hint .spacer { flex: 1; }
.instr-hint .go { color: var(--primary); font-weight: 600; }
.instr { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--orange);
         border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.instr.done { border-left-color: var(--green); opacity: .82; }
/* 어느 방문보고서에서 나온 지시인지 한눈에 보이는 줄 */
.instr .src { display: flex; align-items: center; gap: 6px; cursor: pointer;
              background: var(--panel-2); border: 1px solid var(--border);
              border-radius: 8px; padding: 7px 11px; margin-bottom: 9px;
              font-size: 12.5px; color: var(--text-2); }
.instr .src:hover { background: var(--hover-b); border-color: var(--primary); }
.instr .src b { color: var(--text); font-weight: 650; }
.instr .src .spacer { flex: 1; }
.instr .src .go { color: var(--primary); font-weight: 600; white-space: nowrap; }
.instr .hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
             font-size: 12.5px; margin-bottom: 8px; }
.instr .hd .spacer { flex: 1; }
.instr .hd .sep, .instr .hd .when { color: var(--text-3); }
.instr .ask { font-size: 13.5px; line-height: 1.75; background: var(--panel-2);
              padding: 10px 13px; border-radius: 8px; }
.instr .ans { margin-top: 8px; }
.instr .ans textarea { width: 100%; min-height: 58px; padding: 9px 12px; resize: vertical;
                       border: 1px solid var(--border); border-radius: 8px; outline: none;
                       font-family: inherit; font-size: 13px; line-height: 1.7; }
.instr .ans textarea:focus { border-color: var(--primary); }
.instr .row2 { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.instr .row2 .spacer { flex: 1; }
.instr .row2 .chk { display: inline-flex; align-items: center; gap: 5px;
                    font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.instr .row2 .state { font-size: 11.5px; color: var(--text-3); }

/* ---------- 빠른 메모 ---------- */
.qn-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 22px;
  box-shadow: var(--shadow-lg);
}
.qn-fab:hover { background: var(--primary-d); }

.qnote {
  position: fixed; right: 22px; bottom: 86px; z-index: 71;
  width: 360px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
.qnote > header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); cursor: move; font-size: 13px;
}
.qnote > header .state { font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.qnote > header .spacer { flex: 1; }
.qnote > header .x { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--text-3); }
.qnote .body { padding: 12px 14px 14px; }
.qnote textarea {
  width: 100%; min-height: 150px; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; outline: none;
  font-size: 13.5px; line-height: 1.7; font-family: inherit;
}
.qnote textarea:focus { border-color: var(--primary); }
.qnote .cust { position: relative; margin-top: 8px; }
.qnote .cust input { width: 100%; padding: 7px 11px; border: 1px solid var(--border);
                     border-radius: 8px; outline: none; font-size: 12.5px; }
.qnote .foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.qnote .foot .spacer { flex: 1; }
.qnote .chk { display: inline-flex; align-items: center; gap: 5px;
              font-size: 12.5px; color: var(--text-2); cursor: pointer; }

/* ---------- 메모함 ---------- */
.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.note-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
             box-shadow: var(--shadow);
             padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.note-card.pin { border-color: var(--primary); }
/* [☑ 여러 개 고르기] 를 누른 동안 — 고른 카드가 한눈에 보이게 */
.note-card .npick { width: 16px; height: 16px; cursor: pointer; margin: 0 2px 0 0; flex: none; }
.note-card .npick { accent-color: var(--red); }
.note-card.picking:has(.npick:checked) {
  border-color: var(--red); background: var(--red-l2);
}
.note-card .head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; }
.note-card .head .spacer { flex: 1; }
.note-card .head .who, .note-card .head .when { color: var(--text-3); }
.note-card .tx { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
                 max-height: 190px; overflow-y: auto; }
.note-card .act { display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
                  border-top: 1px solid var(--border-2); padding-top: 8px; }

/* ---------- 토스트 ---------- */
/* 알림 띠 — **바탕과 글자를 따로** 정합니다.
   전에는 바탕에 `--side-strong` 을 쓰고 글자는 흰색으로 못박아 두었는데,
   어두운 화면에서 `--side-strong` 이 거의 흰색(#eef2f8)이라
   **흰 글씨가 흰 바탕에 찍혀 아무것도 안 보였습니다.**
   저장을 눌러도 빈 알약만 깜빡이던 것이 이것 때문입니다. */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--toast-bg); color: var(--toast-fg); padding: 11px 20px; border-radius: 30px;
  font-size: 13.5px; font-weight: 600; z-index: 999; opacity: 0;
  transition: all .22s ease; box-shadow: var(--shadow-lg); pointer-events: none;
}
#toast.on { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.err { background: var(--red); color: #fff; }

/* ---------- 알림 드롭다운 ---------- */
.notif-wrap { position: relative; }
.notif-btn { position: relative; border: 1px solid var(--border); background: var(--panel);
             width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.notif-btn .dot { position: absolute; top: -4px; right: -4px; background: var(--red);
                  color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px;
                  padding: 1px 5px; min-width: 16px; }
.notif-panel {
  position: absolute; right: 0; top: 42px; width: 330px; max-height: 400px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); z-index: 60;
}
.notif-panel .it { padding: 10px 14px; border-bottom: 1px solid var(--border-2);
                   font-size: 12.5px; cursor: pointer; }
.notif-panel .it:hover { background: var(--panel-2); }
.notif-panel .it.unread { background: var(--hover-b); font-weight: 600; }
.notif-panel .it small { display: block; color: var(--text-3); font-size: 11px; font-weight: 400; }

@media print {
  .sidebar, .topbar, .toolbar, .modal > header, .modal > footer, #toast { display: none !important; }
  .main { margin-left: 0; }
  .modal-bg { position: static; background: none; padding: 0; }
  .modal { box-shadow: none; max-width: none; }
}

/* ---------- 명함첩 ---------- */
/* 카드 폭은 명함 느낌이 나도록 좁게 잡습니다.
   1fr 로 늘려 놓으면 화면이 넓을 때 카드가 가로로 길쭉해 보입니다. */
.ncards { display: grid; gap: 10px; justify-content: start;
          grid-template-columns: repeat(auto-fill, minmax(176px, 196px)); }

.ncard {
  position: relative; cursor: pointer;
  /* 다른 화면의 상자와 같은 모양 — 얇은 테두리에 옅은 그림자만 */
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px 9px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow);
  transition: box-shadow .12s, transform .12s;
}
.ncard:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.ncard.on { border-color: var(--primary); background: var(--hover-b); }
.ncard .pick { position: absolute; top: 9px; right: 10px; }
.ncard .nm { font-size: 14.5px; padding-right: 22px; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.ncard .nm b { font-weight: 700; }
.ncard .nm .pos { font-size: 12px; color: var(--text-2); margin-left: 5px; }
.ncard .co { font-size: 12.5px; color: var(--text-2); font-weight: 600;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard .co .none { color: var(--text-3); font-weight: 400; }
.ncard .ln { font-size: 12px; color: var(--text-2); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.ncard .tags { margin-top: 4px; display: flex; gap: 4px; align-items: center;
               white-space: nowrap; overflow: hidden; }
.ncard .tags .more { font-size: 11px; color: var(--text-3); }

/* 명함 상세 — 칸이 짧아 좌우 두 줄씩. 창을 최대한 작게 씁니다 */
/* 명함 상세 위쪽 — 사진이 **한 장**일 때는 왼쪽에 사진, 오른쪽에 정보를 놓습니다.
   위아래로 쌓으면 팝업이 화면보다 길어져 스크롤해야 아래 칸이 보였습니다.
   창이 좁아지면(900px 아래) 저절로 위아래로 바뀝니다. */
.cd-top.split { display: grid; grid-template-columns: 56% 1fr; gap: 18px; align-items: start; }
.cd-top.split .ph-row { grid-template-columns: 1fr; margin-bottom: 0; }
.cd-top.split .cd-grid { grid-template-columns: 1fr; }
/* 칸이 좁아졌으니 주소만은 줄을 바꿔 **끝까지 보이게** 합니다 */
.cd-top.split .cd-line.wide { align-items: flex-start; }
.cd-top.split .cd-line.wide b { white-space: normal; overflow: visible; }
/* 사진 칸 여백을 조금 줄여 팝업이 낮은 화면(노트북)에서도 한 눈에 들어오게 */
.cd-top.split .ph-slot { padding: 6px; gap: 5px; }
/* 세로가 낮은 화면(노트북 1366×768 등)에서는 사진 높이를 눌러 담습니다.
   보통 화면에서는 그대로 크게 보여 줍니다. */
@media (max-height: 780px) {
  .cd-top.split .ph-slot img { max-height: 175px; width: auto; margin: 0 auto; }
  .modal > .body { padding: 14px 18px; }
  .cd-grid .cd-line { padding: 4px 2px; }
}
@media (max-width: 900px) { .cd-top.split { grid-template-columns: 1fr; } }

.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cd-line { display: flex; align-items: center; gap: 7px; min-width: 0;
           font-size: 13px; padding: 7px 2px; border-bottom: 1px solid var(--border-2); }
.cd-line.wide { grid-column: 1 / -1; }
.cd-line .ic { width: 17px; flex: none; text-align: center; font-size: 12px; opacity: .8; }
.cd-line .lb { width: 52px; flex: none; color: var(--text-3); font-size: 12px; }
.cd-line b, .cd-line a { min-width: 0; overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap; }
.cd-line a { color: var(--primary); text-decoration: none; }
.cd-line a:hover { text-decoration: underline; }
.cd-line.blank .lb, .cd-line .dash { color: var(--text-3); }

.cd-memo { margin-top: 10px; white-space: pre-wrap; font-size: 13px; line-height: 1.7;
           background: var(--panel-2); padding: 11px 13px; border-radius: 8px; text-align: left; }
.cd-memo .lb { display: block; font-size: 12px; color: var(--text-3);
               font-style: normal; margin-bottom: 4px; }
.cd-memo.blank { color: var(--text-3); font-style: italic; background: transparent;
                 border: 1px dashed var(--border); }

.cd-more { width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 8px;
           background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
           padding: 10px 13px; font-family: inherit; font-size: 13px; cursor: pointer;
           color: var(--text); text-align: left; }
.cd-more:hover { background: var(--hover-b); border-color: var(--primary); }
.cd-more.on { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cd-more .ar { color: var(--text-3); width: 12px; }
.cd-more .n { color: var(--text-2); font-size: 12.5px; }
.cd-more .spacer { flex: 1; }
.cd-more .go { color: var(--primary); font-weight: 600; font-size: 12.5px; }
#cd-hist { border: 1px solid var(--border); border-top: 0;
           border-radius: 0 0 8px 8px; padding: 12px 13px; }

/* 창이 좁아지면 (휴대폰 등) 한 줄씩 */
@media (max-width: 640px) { .cd-grid { grid-template-columns: 1fr; } }

.cd-h4 { margin: 14px 0 5px; font-size: 13px; }

/* 입력칸 안의 '한 번에 지우기' × */
.field.has-x { position: relative; }
.field.has-x input { padding-right: 30px; }
.fx {
  position: absolute; right: 8px; transform: translateY(-50%);
  width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%;
  background: var(--gray-l); color: var(--text-3);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.fx:hover { background: var(--red); color: #fff; }

/* 꼬리표 — 눌러서 거르기 */
.tag.click { cursor: pointer; }
.tag.click:hover { background: var(--primary); color: #fff; }
.tag.sm.on { background: var(--primary); color: #fff; }
.cd-tags { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.tag-pick { margin-top: 7px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tag-pick .lb { font-size: 11.5px; color: var(--text-3); margin-right: 4px; }

/* ---------- 명함 사진 ---------- */
.ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ph-slot { border: 1px dashed var(--border); border-radius: 10px; padding: 9px;
           background: var(--panel-2); min-height: 120px;
           display: flex; flex-direction: column; gap: 7px; }
.ph-slot.has { border-style: solid; background: var(--panel); }
.ph-slot .ph-lb { font-size: 11.5px; color: var(--text-3); }
.ph-slot img { width: 100%; border-radius: 7px; display: block;
               border: 1px solid var(--border); cursor: zoom-in; }
.ph-slot img:hover { border-color: var(--primary); }

/* 사진 칸이 하나일 때 (앞면만 있거나, 아직 한 장도 없을 때) — 왼쪽 칸을 혼자 씁니다.
   **사진이 없어도 자리를 그대로 비워 둡니다.** 사진이 있는 명함과 배치가 같아야
   명함을 넘겨 볼 때마다 눈이 다시 적응하지 않습니다. */
.ph-row.one { grid-template-columns: 1fr; }
.ph-row.one .ph-slot:not(.has) { min-height: 248px; }

/* 크게 보기 창 — 창 폭을 꽉 채웁니다 */
.ph-big { text-align: center; }
.ph-big img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.ph-slot .ph-act { display: flex; gap: 5px; flex-wrap: wrap; }
.ph-add { flex: 1; display: flex; flex-direction: column; align-items: center;
          justify-content: center; gap: 3px; border: 0; background: none;
          cursor: pointer; color: var(--text-2); font-family: inherit; font-size: 13px;
          padding: 12px 8px; border-radius: 8px; }
.ph-add:hover { background: var(--hover-b); color: var(--primary); }
.ph-add .ic { font-size: 24px; }
.ph-add .sub { font-size: 11.5px; color: var(--text-3); }

/* 사진 다듬기 창 */
.pe-wrap { background: var(--code-bg); border-radius: 10px; padding: 10px;
           display: flex; justify-content: center; align-items: center; min-height: 220px; }
.pe-wrap canvas { max-width: 100%; touch-action: none; cursor: crosshair;
                  border-radius: 4px; }
.pe-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }

/* 목록 카드의 작은 사진 */
/* 사진은 잘라내지 않고 통째로, 다만 카드가 길어지지 않게 높이를 묶어 둡니다. */
/* 배경은 비워 둡니다. 명함은 가로세로 비율이 제각각이라 `contain` 으로 넣으면
   남는 자리가 생기는데, 거기에 회색을 깔면 명함 둘레에 띠가 둘러진 것처럼 보여
   지저분했습니다. 테두리도 빼고 **명함만** 보이게 둡니다. */
.ncard .thumb { width: 100%; height: 64px; object-fit: contain;
                border-radius: 6px; margin-bottom: 6px; background: transparent; }

/* 사진으로 명함 추가 — 위에 사진을 두고 아래에 내용을 적습니다 */
.cf-photo { display: flex; gap: 14px; align-items: center; margin-bottom: 16px;
            background: var(--panel-2); border: 1px solid var(--border);
            border-radius: 10px; padding: 12px 14px; }
.cf-photo img { width: 240px; max-width: 45%; border-radius: 8px; display: block;
                border: 1px solid var(--border); }
.cf-photo .tx { display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
                font-size: 13px; }
.cf-photo .tx span { font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

/* 한 쪽에 몇 개씩 볼지 직접 적는 칸 */
.size-box { display: inline-flex; align-items: center; gap: 4px;
            border: 1px solid var(--border); border-radius: 8px;
            padding: 0 9px 0 4px; height: 34px; background: var(--panel); }
.size-box input { width: 52px; border: 0; outline: none; text-align: right;
                  font-family: inherit; font-size: 13px; height: 30px;
                  background: transparent; }
.size-box span { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }

/* 사진에서 읽어 채운 칸 — 한 번 확인해 달라는 표시 */
.ocr-check { background: var(--warn-l) !important; border-color: var(--warn-b) !important; }
.ocr-check:focus { background: var(--panel) !important; }
.ocr-mark { background: var(--warn-l); border: 1px solid var(--warn-b); border-radius: 4px;
            padding: 0 4px; }

/* 명함 추가 단추 줄 (도구막대 아랫줄) */
/* 명함첩 아랫줄 — 명함을 넣고 치우는 단추 줄 (윗줄은 거르는 칸만) */
.toolbar.add-bar { margin-top: -8px; margin-bottom: 14px; }
/* 표 칸 안의 꼬리표 */
.cell-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* 메모 목록 보기 */
.nt-cell { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2;
           -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; }
.nt-act { white-space: nowrap; }
.nt-act .btn { margin-right: 3px; }

/* ---------- 🛠 관리 도구 ---------- */
/* 점검·업데이트 단추. 한 칸에 이름·설명·걸리는 시간을 함께 적습니다 */
.adm-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.adm-job {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  height: auto; padding: 11px 13px; text-align: left; white-space: normal;
}
.adm-job b { font-size: 13.5px; }
.adm-job span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.adm-job small { font-size: 11.5px; color: var(--text-3); }
/* 검은 창에 나오던 그대로 보여 줍니다 */
.adm-log {
  margin: 0; padding: 12px 14px; border-radius: 8px;
  background: var(--code-bg); color: var(--code-fg);
  font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-all;
  max-height: 420px; overflow-y: auto;
}

/* 팝업으로 읽는 문서 — 사용 안내와 같은 모양으로 */
.md-doc { padding: 0 4px; box-shadow: none; border: 0; background: none; }
.md-doc .md-h1 { margin-top: 0; }

/* ---------- 📖 사용 안내 ---------- */
/* 사용 안내는 장이 길어 아래로 많이 내려갑니다. 그래서 **검색칸이 있는
   도구막대도 장 목록처럼 따라오게** 합니다 (내려가도 늘 찾을 수 있게).

   붙는 자리는 **맨 윗줄 바로 아래**(--topbar-h) 입니다.
   top: 0 으로 두면 화면 맨 위에 붙으면서 윗줄(제목·전체 검색)을 덮어 버립니다.
   층(z-index)도 윗줄(30)보다 낮게 두어, 혹시 겹쳐도 윗줄이 위에 오게 합니다. */
.toolbar.gd-bar {
  position: sticky; top: var(--topbar-h); z-index: 20;
  background: var(--bg); padding: 8px 0 8px; margin-bottom: 8px;
}
.gd-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
/* 장 목록은 **찾기칸 아래**에 붙습니다 (--gd-bar-h = 찾기칸 줄의 높이) */
.gd-nav { position: sticky; top: calc(var(--topbar-h) + var(--gd-bar-h, 52px));
          z-index: 10; display: flex; flex-direction: column; gap: 2px;
          background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
          box-shadow: var(--shadow);
          padding: 8px;
          max-height: calc(100vh - var(--topbar-h) - var(--gd-bar-h, 52px) - 30px);
          overflow: auto; }
.gd-nav button { text-align: left; border: 0; background: none; cursor: pointer;
                 padding: 8px 10px; border-radius: 7px; font-family: inherit;
                 font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.gd-nav button:hover { background: var(--panel-2); }
.gd-nav button.on { background: var(--primary); color: #fff; font-weight: 700; }
.gd-body { padding: 22px 26px 30px; min-width: 0; }

.md-h { margin: 22px 0 8px; line-height: 1.45; }
.md-h1 { font-size: 22px; }
.md-h2 { font-size: 19px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }
/* 소제목은 **덩어리의 머리**입니다. 글씨만 조금 키워 두면 본문에 묻혀
   어디서 새 이야기가 시작되는지 안 보입니다. 그래서 왼쪽에 파란 막대를 세우고
   위 여백을 넉넉히 두어, 훑어도 덩어리가 나뉘어 보이게 합니다. */
.md-h3 {
  font-size: 15.5px; margin: 34px 0 10px;
  padding: 3px 0 3px 12px; border-left: 4px solid var(--primary);
}
/* 장이 소제목으로 바로 시작할 때는 위 여백을 줄입니다 */
.gd-body .md-h2 + .md-h3 { margin-top: 18px; }
.md-h4 { font-size: 14px; color: var(--text-2); }
.md-p { font-size: 13.5px; line-height: 1.85; margin: 8px 0; }

/* 소제목과 그 아래 묶음 --------------------------------------------------
   ✍ 어떻게 쓰나 · 🔗 이어지는 곳 · 💡 알아 두실 것 처럼 **그림글자로 시작하는
   소제목** 아래 내용을 한 칸 들여쓰고 왼쪽에 옅은 줄을 둡니다.
   어디까지가 그 소제목 이야기인지 훑기만 해도 보입니다. */
.md-lead {
  font-size: 13.5px; font-weight: 800; color: var(--text);
  margin: 22px 0 7px;
}
.md-sec {
  padding-left: 15px; margin: 0 0 6px;
  border-left: 2px solid var(--border);
}
.md-sec > *:first-child { margin-top: 0; }
.md-sec > *:last-child { margin-bottom: 0; }
/* ### 소제목 아래 묶음은 그 소제목의 **파란 막대를 이어서** 내려 긋습니다 */
.md-h3 + .md-sec {
  border-left: 4px solid var(--primary-l);
  padding-left: 13px; margin-top: 2px;
}
/* 묶음 **안에서** 다시 나누는 작은 제목 */
.md-sub {
  font-size: 13px; font-weight: 700; color: var(--text-2);
  margin: 14px 0 5px;
}
.md-list { font-size: 13.5px; line-height: 1.85; margin: 8px 0; padding-left: 22px; }
.md-list li { margin: 3px 0; }
.md-pre { background: var(--code-bg); color: var(--code-fg); padding: 13px 15px; border-radius: 8px;
          font-size: 12.5px; line-height: 1.7; overflow-x: auto; margin: 10px 0;
          white-space: pre; }
.md-quote { border-left: 3px solid var(--primary); background: var(--primary-l);
            padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 10px 0;
            font-size: 13px; line-height: 1.8; }
.md-hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

/* ── 💬 둘러보기 말풍선 ────────────────────────────────────────── */
/* 화면을 덮는 가림막. **가리키는 자리만 남기고 네 조각으로 가립니다.**
   (clip-path 로 도려내거나 큰 그림자로 덮는 방법은 화면에 따라
    안 그려지는 일이 있어, 눈에 보이는 네모 네 개로 확실하게 합니다) */
.tour-back { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tour-back > i {
  position: absolute; display: block;
  background: rgba(12, 16, 26, .5);
  pointer-events: auto;
}
/* 구멍 둘레를 밝게 둘러 어디를 가리키는지 분명히 합니다.
   (움직임(transition)은 넣지 않습니다 — 화면을 찍을 때 옮겨지는 도중이
    찍혀 엉뚱한 곳을 가리키는 것처럼 보입니다) */
.tour-ring {
  position: fixed; z-index: 9001; border-radius: 10px;
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 4px rgba(77, 128, 255, .3);
  pointer-events: none;
}
.tour-tip {
  position: fixed; z-index: 9002; width: min(330px, calc(100vw - 24px));
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  padding: 13px 15px 11px;
}
/* 말풍선 꼬리 */
.tour-tip::before {
  content: ''; position: absolute; left: var(--ax, 30px); top: -7px;
  width: 12px; height: 12px; background: var(--panel);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.tour-tip.up::before { top: auto; bottom: -7px; transform: translateX(-50%) rotate(225deg); }
.tour-tip .tt-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.tour-tip .tt-no {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 12.5px;
  line-height: 1; flex: none;
}
.tour-tip .tt-top b { font-size: 13.5px; }
.tour-tip .tt-cnt { font-size: 11.5px; color: var(--text-3); }
.tour-tip .tt-body { font-size: 13px; line-height: 1.7; color: var(--text-2); }
.tour-tip .tt-body .dim { color: var(--text-3); font-size: 12.5px; }
.tour-tip .tt-btns { display: flex; gap: 6px; margin-top: 11px; }

/* 사용 안내 : 번호 박힌 화면 그림 + 번호별 설명을 **나란히** */
.md-shot {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 14px; align-items: start; margin: 16px 0 22px;
}
/* 그림을 누르면 원래 크기로 크게 봅니다 (번호를 읽으려면 필요합니다) */
.md-shot .md-fig img { cursor: zoom-in; }
.md-shot .md-fig figcaption::after { content: ' · 누르면 크게 보입니다'; }
.md-shot .md-fig { margin: 0; }
.md-shot .md-tblwrap { margin: 0; }
.md-shot .md-tbl { font-size: 12.5px; }
.md-shot .md-tbl td, .md-shot .md-tbl th { padding: 7px 9px; }
/* 번호 칸은 좁게, 가운데로 */
.md-shot .md-tbl td:first-child, .md-shot .md-tbl th:first-child {
  width: 40px; text-align: center;
}

/* 그림에 박힌 것과 **똑같은 모양**의 번호 동그라미 */
.shot-dot {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%;
  background: #e8342b; color: #fff;
  font-weight: 800; font-size: 13.5px; line-height: 1;
  border: 1px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  flex: none;
}
/* 눌러서 자세히 볼 수 있는 줄 */
.shot-tbl tr[data-more] { cursor: pointer; }
.shot-tbl tr[data-more]:hover { background: var(--panel-2); }
.shot-tbl tr[data-more] td:nth-child(2)::after {
  content: ' ›'; color: var(--text-3); font-weight: 700;
}
@media (max-width: 1100px) {
  .md-shot { grid-template-columns: 1fr; }
}

/* 사용 안내의 화면 그림 */
.md-fig { margin: 16px 0 20px; }
.md-fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); background: var(--panel);
}
.md-fig figcaption {
  margin-top: 7px; font-size: 12.5px; color: var(--text-3); text-align: center;
}
.md-tblwrap { overflow-x: auto; margin: 10px 0; }
.md-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.md-tbl th { text-align: left; padding: 9px 11px; background: var(--panel-2);
             border-bottom: 1px solid var(--border); font-size: 12px; white-space: nowrap; }
.md-tbl td { padding: 9px 11px; border-bottom: 1px solid var(--border-2);
             line-height: 1.7; vertical-align: top; }
.gd-body code { background: var(--panel-2); border: 1px solid var(--border-2);
                border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.gd-body a { color: var(--primary); }
@media (max-width: 900px) {
  .gd-wrap { grid-template-columns: 1fr; }
  .gd-nav { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
}


/* 여러 개를 고르는 단추 — 폭을 미리 잡아 둡니다 ---------------------
   고른 건수가 들어가면서(🗑 선택 삭제 → 🗑 선택 20건 삭제) 단추가 넓어지면
   도구막대가 밀려 옆 단추(이카운트 가져오기 등)가 아랫줄로 내려갔습니다.
   처음부터 넓은 쪽 폭을 잡아 두면 글씨만 바뀌고 자리는 그대로입니다. */
/* 도구막대 오른쪽 끝에 붙는 묶음 (건수 + 정리 단추).
   따로 두면 줄이 바뀔 때 단추만 혼자 아랫줄로 떨어집니다. */
.toolbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.toolbar .btn.pickdel { min-width: 146px; }
@media (max-width: 900px) { .toolbar .btn.pickdel { min-width: 0; } }

/* 대시보드 ─ 차분하게 ---------------------------------------------------
   한 줄에 색깔 꼬리표가 넷씩 붙으면 눈이 분산됩니다.
   **강조는 파랑, 위험은 빨강** 둘만 남기고 참고 정보(진행률·코멘트·상태)는
   회색으로 내립니다. 우선순위(긴급)와 지난 날짜는 그대로 눈에 띄게 둡니다. */
.dash-grid .list-item .tag.green,
.dash-grid .list-item .tag.blue,
.dash-grid .list-item .tag.purple {
  background: var(--gray-l); color: var(--text-2);
}
/* 줄 간격과 카드 여백을 조금 넓혀 훑어보기 쉽게 */
.dash-grid .list-item { padding: 12px 18px; }
.dash-grid .card > h3 { padding: 13px 18px; font-size: 13.5px; font-weight: 700; }
.dash-grid .card > h3 .tag { background: var(--gray-l); color: var(--text-3); font-weight: 600; }
.dash-grid .chk { padding: 9px 2px; }

/* 스케줄 목록 보기 — 요약 띠와 줄 ------------------------------------ */
.sm-band { padding: 13px 16px 14px; margin-bottom: 14px; }
.sm-co { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px;
         margin-bottom: 10px; }
.sm-cells { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-cell { flex: 1; min-width: 96px; text-align: center; background: var(--panel-2);
           border-radius: 8px; padding: 9px 6px; }
.sm-cell b { display: block; font-size: 16px; font-weight: 700; }
.sm-cell span { font-size: 11px; color: var(--text-3); }
.sm-cell.warn { background: var(--orange-l2); }
.sm-cell.warn b { color: var(--orange); }
/* 달이 바뀌는 자리의 머리글 */
.tbl tr.sl-grp td { background: var(--panel-2); font-weight: 700; font-size: 12.5px;
                    color: var(--text-2); padding: 7px 14px; }
.tbl tr.sl-grp td span { color: var(--text-3); font-weight: 400; margin-left: 6px; }
.tbl tr.sl-past td { color: var(--text-2); }
.sl-rep { font-size: 11.5px; color: var(--primary-d); cursor: pointer; white-space: nowrap; }
.sl-rep:hover { text-decoration: underline; }
.sl-rep.no { color: var(--orange); cursor: default; }
.sl-rep.no:hover { text-decoration: none; }

/* 도구막대의 고객사 거르기 칸 — 적으면 찾아 주는 칸 */
.cofil { position: relative; display: inline-flex; align-items: center; }
.cofil input { min-width: 232px; padding-right: 26px; }
.cofil.on input {
  border-color: var(--green); background: var(--green-l2); font-weight: 600;
}
.cofil button {
  position: absolute; right: 4px; width: 22px; height: 22px; border: 0;
  background: none; color: var(--text-3); font-size: 15px; line-height: 1;
  cursor: pointer; border-radius: 6px;
}
.cofil button:hover { background: var(--panel-2); color: var(--text); }

/* 적으면 찾아 주는 칸 (이카운트 연동 · 가져오기 결과의 고객사/팀원 고르기) --- */
.pickbox { position: relative; flex: 1; min-width: 160px; }
.pickbox .pick-in {
  width: 100%; height: 32px; padding: 0 26px 0 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.pickbox .pick-in:focus { outline: none; border-color: var(--primary); }
.pickbox.picked .pick-in { border-color: var(--green); background: var(--green-l2); font-weight: 600; }
.pickbox .pick-x {
  position: absolute; right: 4px; top: 4px; width: 24px; height: 24px;
  border: 0; background: none; color: var(--text-3); font-size: 16px;
  line-height: 1; cursor: pointer; border-radius: 6px;
}
.pickbox .pick-x:hover { background: var(--panel-2); color: var(--text); }
.pickbox .pick-list { z-index: 30; }

/* 아직 연결되지 않은 이름 한 줄 */
.un-row, .pi-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.un-row .un-kind { width: 56px; font-size: 12px; color: var(--text-3); flex: none; }
.un-name  { width: 190px; font-size: 13px; flex: none;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-row .un-name { width: 200px; }
.un-cnt   { color: var(--text-3); font-size: 11.5px; width: 110px; flex: none; }
.pi-row .un-cnt { width: 52px; }


/* AI 도우미 ------------------------------------------------------- */
.ai-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 12px;
  font-size: 13px; border: 1px solid var(--border);
}
.ai-bar.ok   { background: var(--green-l2); border-color: var(--green-b); }
.ai-bar.warn { background: var(--orange-l2); border-color: var(--orange-b); }
.ai-bar .spacer { flex: 1; }

.ai-setup { padding: 16px 18px; margin-bottom: 12px; }
.ai-setup h4 { margin: 0 0 10px; font-size: 14px; }
.ai-setup ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 2 }
.ai-cmd {
  display: flex; align-items: center; gap: 8px; margin: 6px 0;
  background: var(--code-bg); color: var(--code-fg); padding: 8px 10px; border-radius: 8px;
}
.ai-cmd code { color: #a5e0a5; font-size: 12.5px; }

.ai-wrap { display: flex; flex-direction: column; padding: 0; }
.ai-list {
  padding: 16px 18px; min-height: 200px; max-height: calc(100vh - 300px);
  overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
}
.ai-wrap.in-modal .ai-list { min-height: 220px; max-height: 46vh; }

/* 첫 안내 상자 — 위아래로 헐렁하지 않게 */
.ai-hello { text-align: center; margin: auto; padding: 6px 10px; }
.ai-hello .big { font-size: 26px; line-height: 1.2; }
.ai-hello b { display: block; margin: 4px 0 2px; font-size: 14.5px; }
.ai-hello .hint { line-height: 1.6; }
.ai-ex { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

.ai-me {
  align-self: flex-end; max-width: 76%; background: var(--primary); color: #fff;
  padding: 10px 14px; border-radius: 14px 14px 3px 14px; font-size: 13.5px;
  white-space: pre-wrap; line-height: 1.6;
}
.ai-bot {
  align-self: flex-start; max-width: 92%; background: var(--panel-2);
  padding: 13px 16px; border-radius: 14px 14px 14px 3px; font-size: 13.5px;
}
.ai-bot.pending { color: var(--text-3); }
.ai-bot.pending .hint { display: block; margin-top: 4px; }
.ai-answer { line-height: 1.75; }
.ai-answer .md-p:first-child { margin-top: 0; }
.ai-err  { color: var(--red); margin-bottom: 8px; }
.ai-warn { margin-top: 8px; padding: 8px 10px; background: var(--orange-l2);
           border: 1px solid var(--orange-b); border-radius: 8px; font-size: 12.5px; }

.ai-ref {
  border: 0; background: var(--primary-l); color: var(--primary-d);
  font-weight: 700; font-size: 11.5px; padding: 1px 5px; border-radius: 5px;
  cursor: pointer; margin: 0 1px;
}
.ai-ref:hover { background: var(--primary); color: #fff; }

.ai-stats { margin-top: 10px; }
.ai-stats summary { cursor: pointer; font-size: 12.5px; color: var(--text-3); }
.ai-stats pre {
  margin: 8px 0 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; font-size: 12px; line-height: 1.7; white-space: pre-wrap;
  max-height: 300px; overflow-y: auto;
}
.ai-srcs { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.ai-src {
  text-align: left; border: 1px solid var(--border); background: var(--panel);
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; cursor: pointer;
  display: flex; gap: 7px; align-items: center;
}
.ai-src:hover { border-color: var(--primary); background: var(--primary-l); }
.ai-src span { color: var(--text-3); overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.ai-more { margin-top: 2px; }
.ai-more summary {
  cursor: pointer; font-size: 12px; color: var(--text-3); padding: 5px 2px;
}
.ai-more summary:hover { color: var(--primary-d); }
.ai-more .ai-src { margin-top: 4px; }
.ai-meta { margin-top: 8px; font-size: 11.5px; color: var(--text-3); }

.ai-bottom {
  display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border);
  align-items: flex-end;
}
.ai-in {
  flex: 1; resize: none; min-height: 40px; max-height: 140px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px;
  font-family: inherit; line-height: 1.5;
}
.ai-in:focus { outline: none; border-color: var(--primary); }
.ai-foot {
  padding: 0 14px 12px; font-size: 11.5px; color: var(--text-3);
}


/* 스케줄 년·월 칸 ------------------------------------------------- */
.toolbar .ym {
  height: 34px; width: 158px; padding: 0 10px; font-size: 15px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  color: var(--text); text-align: center;
}
.toolbar .ym:focus { outline: none; border-color: var(--primary); }
.toolbar .ym::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.toolbar .ym::-webkit-calendar-picker-indicator:hover { opacity: 1; }


/* 완료 묶음 (오늘 끝냄 · 어제 끝냄 …) --------------------------- */
.done-grp + .done-grp { border-top: 1px solid var(--border-2); }
.done-hd {
  padding: 8px 18px 2px; font-size: 12.5px; font-weight: 700; color: var(--text-2);
}
.done-hd .tag { font-weight: 400; margin-left: 4px; }


/* 카드↔목록 바꾸는 단추 ------------------------------------------
   글자가 '🗂 카드' ↔ '📄 목록' 로 바뀌는데 그림글자 너비가 달라서
   (65.3px ↔ 69.8px) 누를 때마다 옆의 거르기 칸들이 밀렸습니다.
   너비를 고정해 자리가 흔들리지 않게 합니다. */
.btn.view-toggle { min-width: 76px; justify-content: center; }
/* 기간 단추도 같은 문제가 있습니다
   ('📅 전체 기간 보는 중' ↔ '📅 최근 1년만 보는 중' — 글자 수가 다릅니다) */
.btn.view-toggle.wide { min-width: 152px; }

/* ── 단추는 하는 일에 따라 세 가지로 나눠 보입니다 ───────────────────
     ① 보기 바꾸기 (카드↔목록, 달력↔목록, 기간)  — 둥근 회색 알약
     ② 자료 가져오기 (사진으로 추가 · 불러오기 · 이카운트) — 점선 테두리
     ③ 새로 만들기 (+ 명함 추가 · + 견적 작성 …)  — 꽉 찬 파랑 (.btn.pri)
   자료를 **새로 쓰는** 일과 **밖에서 들여오는** 일과 **보는 방식만 바꾸는** 일이
   다 같은 파란 단추여서 헷갈렸습니다. 색과 모양을 갈라 둡니다. */

/* ① 보기 바꾸기 — 자료는 그대로고 보는 방식만 바뀝니다. 알약 모양 회색. */
.btn.view-toggle {
  border-radius: 20px; background: var(--gray-l); border-color: var(--border-2);
  color: var(--text-2); font-weight: 600;
}
.btn.view-toggle:hover { background: var(--gray-2); border-color: var(--border-3); color: var(--text); }
/* 지금 보고 있는 모양 — 흰 알약이 눌려 나온 것처럼 */
.btn.view-toggle.on {
  background: var(--panel); border-color: var(--border-3); color: var(--text); font-weight: 700;
  box-shadow: 0 1px 2px rgba(20,32,64,.08);
}

/* ② 자료 가져오기 — 밖에서 들여오는 일이라 점선으로 표시합니다. */
.btn.imp {
  border-style: dashed; border-color: var(--border-3); background: var(--panel-2);
  color: var(--text-2);
}
.btn.imp:hover {
  background: var(--primary-l); border-color: var(--primary); color: var(--primary-d);
}


/* 나만 보기 자물쇠 ------------------------------------------------ */
.lock { font-size: 12px; opacity: .85; }
.ncard .nm .lock { margin-right: 2px; }


/* 사용 안내 — 장 옆의 '관리자' 표시 ------------------------------- */
/* 제목이 길어 줄바꿈될 때 '관리자' 표시가 홀로 떨어지지 않게,
   제목과 표시를 가로로 나란히 두고 표시는 오른쪽 위에 붙입니다 */
.gd-nav button { display: flex; align-items: flex-start; gap: 6px; }
.gd-nav button .gd-tag {
  flex: none; margin-top: 1px;
  font-size: 10px; font-weight: 700; padding: 1px 5px;
  border-radius: 6px; background: var(--orange-l); color: var(--orange);
  white-space: nowrap;
}
.gd-nav button.on .gd-tag { background: rgba(255,255,255,.22); color: #fff; }


/* 일일·주간 보고 -------------------------------------------------- */
.toolbar .rp-date { height: 34px; padding: 0 10px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.rp-wrap { padding: 0 0 14px; }
.rp-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rp-meta b { font-size: 15px; }
.rp-meta .hint { margin-left: auto; }
/* 구획(진행업무·명일예상·NBO·특이사항) 제목 띠.
   넷이 똑같이 생기면 한눈에 구분이 안 됩니다. 그래서 구획마다
   **왼쪽 색막대 · 옅은 색 배경 · 그림글자 · 한 줄 설명**을 따로 줍니다. */
.rp-sec { padding: 4px 18px 12px; }
.rp-sec + .rp-sec { border-top: 1px dashed var(--border-2); }
.rp-band { display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 4px solid var(--text-3); border-radius: 7px;
  padding: 7px 12px; font-weight: 700; font-size: 13px; margin: 12px 0 8px; }
.rp-band .ic { font-size: 14px; line-height: 1; }
.rp-band .tt { font-size: 14px; letter-spacing: -.2px; }
.rp-band .sub { font-weight: 500; font-size: 11.5px; color: var(--text-3); }
.rp-band .btn { margin-left: auto; }
.s-done .rp-band { border-left-color: var(--primary); background: var(--blue-l2); border-color: var(--blue-b); }
.s-next .rp-band { border-left-color: var(--green); background: var(--green-l2); border-color: var(--green-b); }
.s-nbo  .rp-band { border-left-color: var(--orange); background: var(--orange-l2); border-color: var(--orange-b); }
.s-note .rp-band { border-left-color: var(--text-3); background: var(--panel-2); border-color: var(--border); }
.s-done .rp-band .tt { color: var(--blue-d2); }
.s-next .rp-band .tt { color: var(--green-d); }
.s-nbo  .rp-band .tt { color: var(--orange-d); }

/* 업체 한 곳 = 상자 하나 ------------------------------------------------
   업체를 여러 곳 넣으면 상자들이 붙어 보여 어디부터 어디까지가 한 업체인지
   잘 안 갈렸습니다. 세 가지를 함께 써서 **한 덩어리**로 읽히게 합니다.
     ① 묶음(진행업무·명일예상…)보다 한 칸 **안으로 들여 씁니다**
     ② 들여쓴 자리에 **묶음 색 세로 안내선**을 그어 어디 소속인지 보이게
     ③ 상자 바탕에 **옅은 음영**을 깔고, 안쪽 입력칸만 흰색으로 남깁니다
   (상자 안이 하얗고 밖도 하야면 테두리 선 하나로만 갈려서 흐릿했습니다) */
.rp-blk { position: relative; margin-left: 15px;
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  margin-bottom: 10px; background: var(--panel-2); }
/* 세로 안내선 — 위아래로 조금 넘겨 그어 상자 사이가 끊겨 보이지 않게 */
.rp-blk::before { content: ''; position: absolute; left: -15px; top: -6px; bottom: -6px;
  width: 3px; border-radius: 3px; background: var(--border); }
.rp-blk:first-child::before { top: 0; }
.rp-blk:last-child::before  { bottom: 0; }
.s-done .rp-blk::before  { background: var(--blue-gd); }
.s-next .rp-blk::before  { background: var(--green-gd); }
.s-nbo  .rp-blk::before  { background: var(--orange-gd); }
.s-visit .rp-blk::before { background: var(--gray-gd); }
/* 상자 안의 칸은 흰색 — 음영 위에 떠 있는 것처럼 */
.rp-blk .rp-co, .rp-blk .rp-memo, .rp-blk .rp-lines { background: var(--panel); }
/* 업체가 아직 없을 때의 안내 글도 같은 자리에서 시작하게 */
.rp-sec > div > .hint { margin-left: 15px; }
.rp-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.rp-head .rp-co { flex: 1; height: 30px; padding: 0 10px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 7px; }
.rp-head .rp-memo { height: 30px; padding: 0 8px; font-size: 12.5px; text-align: center;
  border: 1px solid var(--border); border-radius: 7px; }
.rp-head .rp-co:focus, .rp-head .rp-memo:focus { outline: none; border-color: var(--primary); }
/* 등록된 고객사와 **이름이 똑같을 때** 왼쪽에 초록 띠.
   주간보고 비고의 방문일이 이 이름으로 맞춰지므로, 목록에서 고른 것인지
   손으로 적은 것인지 한눈에 보이게 합니다. */
.rp-head .rp-co.rp-co-ok { border-left: 3px solid var(--green); padding-left: 8px; }
/* 내용 입력칸도 **화면 곳곳에서 쓰는 글꼴 그대로** 씁니다.
   전에는 고정폭 글꼴(D2Coding → 없으면 굴림체)을 썼습니다. 빈칸 2개가 한글 1글자와
   정확히 맞아 들여쓰기가 자로 잰 듯 떨어졌지만, 깔려 있지 않은 컴퓨터에서는
   굴림체로 떨어져 메뉴 글씨와 확연히 달라 보였습니다.
   들여쓰기는 [⇥ 들여쓰기] 단추가 단계마다 같은 칸수를 넣어 주므로
   같은 단계끼리는 여전히 나란히 섭니다. */
.rp-lines, .rp-note { width: 100%; border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 10px; font-size: 13px; line-height: 1.75;
  font-family: inherit; resize: vertical; background: var(--panel); }
.rp-lines:focus, .rp-note:focus { outline: none; border-color: var(--primary); }

.rp-nbo-tbl input { width: 100%; border: 0; background: none; font-size: 12.5px;
  font-family: inherit; padding: 2px 0; }
/* 누른 칸에 아무 표시도 하지 않습니다. 칸을 색으로 덮으면 글자가 가려지고,
   밑줄을 그으면 표의 가로선과 겹쳐 지저분합니다.
   누르면 글자가 통째로 선택되므로 어느 칸을 만지고 있는지는 그것으로 보입니다. */
.rp-nbo-tbl input:focus { outline: none; background: none; }
/* 줄 위에 마우스를 올렸을 때 생기는 음영도 뺍니다 (목록이 아니라 입력표입니다) */
.rp-nbo-tbl tbody tr:hover { background: none; }
/* 합계는 저절로 계산되는 칸입니다 */
.rp-nbo-tbl input.n-amt { color: var(--text-2); cursor: default; }

.rp-person { padding: 4px 18px 6px; }
.rp-who { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px;
  padding: 7px 10px; margin: 10px 0 8px; border-radius: 7px;
  background: var(--primary-l); color: var(--primary-d); }
.rp-who .btn { margin-left: auto; }

.rp-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.rp-foot .hint { margin-left: auto; }



/* 내용 박스 도구상자 (Asset\업무보고 도구상자\도구상자 참조.png 모양) ----- */
.rp-tools { position: relative; display: flex; align-items: center; gap: 3px;
  margin: 0 0 5px; padding: 3px 5px; background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: 6px; flex-wrap: wrap; }
.rp-tools button { height: 26px; min-width: 26px; padding: 0 5px; cursor: pointer;
  border: 1px solid transparent; border-radius: 5px; background: none;
  display: inline-flex; align-items: center; justify-content: center; }
.rp-tools button:hover { background: var(--panel); border-color: var(--border); }
.rp-grp { display: inline-flex; align-items: center; }
.rp-grp button:first-child { border-radius: 5px 0 0 5px; }
.rp-grp button:last-child { border-radius: 0 5px 5px 0; min-width: 18px;
  font-size: 11px; color: var(--text-3); padding: 0 3px; }
.rp-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

/* 모양 고르는 판 */
.rp-pop { display: none; position: absolute; top: 32px; left: 4px; z-index: 40;
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: var(--shadow-lg); padding: 8px; }
.rp-pop.on { display: block; }
.rp-pop-right { left: 66px; }
/* 무엇을 고르는 판인지 한 줄 (왼쪽 = 맨 앞 · 오른쪽 = 한 칸 들여씀) */
.rp-pop-hd { font-size: 11.5px; color: var(--text-2); font-weight: 700;
  padding: 0 2px 7px; margin-bottom: 7px; border-bottom: 1px solid var(--border-2); }
/* 기호 / 숫자 — 두 칸으로 나눠 보여 줍니다 */
.rp-pop-t { font-size: 11px; color: var(--text-3); margin: 0 2px 6px; font-weight: 700; }
.rp-pop-n + .rp-pop-t, .rp-pop-g + .rp-pop-t { margin-top: 10px; }
.rp-pop-g { display: grid; grid-template-columns: repeat(6, 34px); gap: 4px; }
.rp-pop-g button { height: 30px; width: 34px; font-size: 15px; color: var(--text);
  border: 1px solid var(--border-2); background: var(--panel); }
/* '없음' 처럼 글자로 된 것은 두 칸을 씁니다 (한 글자씩 잘려 보이지 않게) */
.rp-pop-g button.wide { grid-column: span 2; width: auto; font-size: 12px; }
.rp-pop-n { display: grid; grid-template-columns: repeat(2, 104px); gap: 4px; }
.rp-pop-n button { height: 30px; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--border-2); background: var(--panel); justify-content: flex-start;
  padding: 0 8px; }
.rp-pop button:hover { background: var(--primary-l); border-color: var(--primary);
  color: var(--primary-d); }
/* 지금 고른 모양에 표시 — 판을 열면 무엇을 쓰고 있는지 바로 보입니다 */
.rp-pop button.on { background: var(--primary-l); border-color: var(--primary);
  color: var(--primary-d); font-weight: 700; }
/* 단추 위의 조그만 이름표 (⌄ 를 안 열어도 지금 모양을 알 수 있게) */
.rp-tools .rp-now { font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--primary-d); margin-left: 3px; line-height: 1;
  max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tools .rp-go { gap: 1px; }

/* 보고서 메일 설정 — 미리보기 상자 */
.rm-prev { border: 1px solid var(--border-2); border-radius: 8px; background: var(--panel-2);
  padding: 10px 12px; max-height: 260px; overflow: auto; font-size: 12.5px; }
.rm-hd { padding: 2px 0; color: var(--text-2); }
.rm-hd b { color: var(--text); margin-right: 6px; }
.rm-body { margin: 8px 0 0; padding: 8px 10px; background: var(--panel); border-radius: 6px;
  border: 1px solid var(--border-2); font-family: inherit;
  font-size: 12.5px; line-height: 1.65; }
/* 미리보기 안의 서명 — 붙여 넣은 서식이 그대로 보여야 합니다 */
.rm-sg { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rm-sg img { max-width: 100%; }
/* 서명 붙여 넣는 칸 */
.rm-line { height: 1px; background: var(--border); margin: 14px 0 12px; }
.rm-sign { min-height: 78px; max-height: 220px; overflow: auto; padding: 8px 10px;
  border: 1px solid var(--border-2); border-radius: 8px; background: var(--panel);
  font-size: 12.5px; line-height: 1.6; }
.rm-sign:focus { outline: none; border-color: var(--primary); }
.rm-sign:empty::before { content: attr(data-ph); color: var(--text-3); }
.rm-sign img { max-width: 100%; }

/* 메일 미리보기 — 어느 칸에서 온 글인지 꼬리표를 붙입니다 */
.rm-part { position: relative; padding: 4px 0 4px 62px; margin: 2px 0; }
.rm-part + .rm-part { border-top: 1px dashed var(--border-2); }
.rm-tag { position: absolute; left: 0; top: 5px; width: 54px; text-align: right;
  font-size: 10.5px; color: var(--text-3); line-height: 1.5; }
.rm-note { font-size: 10.5px; color: var(--orange); margin-top: 2px; }
.rm-part .rm-sg { margin-top: 0; padding-top: 0; border-top: 0; }

/* 메일 설정 — 내 설정 / 팀 공용 기본값 탭 */
.rm-tabs { display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-2); flex-wrap: wrap; }

/* 들여쓰기·내어쓰기 단추 — 아이콘(16px)이 눌리지 않게 조금 넓게 둡니다 */
.rp-tools .rp-ind { min-width: 28px; padding: 0 5px; }
.rp-tools .rp-out + .rp-in { margin-left: 3px; }

/* 업체 덩어리 번호 — 내보낸 파일에 붙는 1. 2. 3. 과 같은 번호를 화면에도.
   동그란 표로 그려서 '여기서부터 새 업체' 라는 것이 한눈에 보이게 합니다. */
.rp-head .rp-no { flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border);
  font-weight: 700; font-size: 11.5px; color: var(--text-2); user-select: none; }
/* 번호에도 묶음 색을 살짝 입혀 '여기서부터 새 업체' 가 더 또렷하게 */
.s-done .rp-head .rp-no  { background: var(--primary-l); border-color: var(--blue-b); color: var(--primary-d); }
.s-next .rp-head .rp-no  { background: var(--green-l2); border-color: var(--green-b); color: var(--green-d); }
.s-nbo  .rp-head .rp-no  { background: var(--orange-l2); border-color: var(--orange-b); color: var(--orange-d); }

/* 지난 보고서에서 가져오기 창 */
.cp-blk { border: 1px solid var(--border-2); border-radius: 8px; padding: 8px 10px;
  margin-bottom: 8px; background: var(--panel-2); }
.cp-co { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.cp-src { font-size: 11px; color: var(--text-3); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px; background: var(--panel); }
.cp-src.nx { color: var(--green-d); border-color: var(--green-b); background: var(--green-l2); }
.cp-tip { font-size: 11px; color: var(--primary-d); }
.cp-ln { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px;
  padding: 3px 0 3px 20px; cursor: pointer; color: var(--text-2); }
.cp-ln span { white-space: pre-wrap;
  font-family: "D2Coding", "나눔고딕코딩", "굴림체", GulimChe, monospace; }
.cp-ln input { margin-top: 2px; }

/* 가져오기 창은 내용이 많든 적든 **크기가 고정**입니다.
   내용에 따라 창이 늘었다 줄었다 하면 누르려던 단추가 움직여 잘못 누릅니다.
     · 고르는 칸 자리 : 두 갈래(날짜로·업체로)의 높이를 같게 맞춥니다
     · 목록          : 높이를 못 박고 넘치면 그 안에서만 굴립니다 */
/* 두 갈래의 고르는 칸 모양을 같게 둡니다 (고르는 칸 2개 + 셈 한 줄) */
#cp-pick-day, #cp-pick-co { min-height: 86px; }
.cp-cnt { margin: -2px 0 0; min-height: 17px; }
.cp-list { height: 340px; overflow-y: auto; padding: 8px 4px 0 0;
  border-top: 1px solid var(--border-2); }
.cp-list .cp-blk:last-child { margin-bottom: 0; }

/* 특이사항 칸 — 업체 덩어리와 같은 편집 메뉴를 씁니다 */
.rp-noteblk .rp-tools { margin-bottom: 6px; }

/* 주간보고 — 방문고객 구획 (담당자별 한 줄) */
.s-visit .rp-band { border-left-color: var(--purple); background: var(--purple-l2); border-color: var(--purple-b); }
.s-visit .rp-band .tt { color: var(--purple-d); }
.wk-vis { padding: 2px 0 0; }
.wk-vrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wk-vwho { flex: 0 0 86px; font-weight: 700; font-size: 13px; text-align: right;
  color: var(--text-2); }
.wk-vco { flex: 1; height: 32px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel); }
.wk-vco:focus { outline: none; border-color: var(--primary); }

/* 주간보고 — 누구 것을 볼지 고르는 칸 (글자가 잘리지 않게) */
#rp-scope { min-width: 138px; }

/* 보기 바꾸는 단추 — '칸반보드' 처럼 글자가 긴 것도 자리가 흔들리지 않게 */
.btn.view-toggle.w2 { min-width: 104px; }

/* 툴바에 붙는 '무엇을 보고 있나' 이름표 (고르는 칸이 없어진 자리) */
.toolbar .tool-lbl { font-weight: 700; font-size: 13px; color: var(--text-2);
  padding: 0 4px 0 2px; }

/* ═══════════════════════════════════════════════════════════════════
   🎙 회의록
   ═══════════════════════════════════════════════════════════════════ */

/* 녹음 파일을 끌어다 놓는 자리 */
.mt-drop {
  border: 2px dashed var(--border-3); border-radius: 12px;
  padding: 26px 18px; text-align: center; background: var(--panel-2);
  transition: border-color .12s, background .12s;
}
.mt-drop.over { border-color: var(--primary); background: var(--primary-l); }
.mt-drop .ic { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.mt-drop b { display: block; font-size: 14px; margin-bottom: 8px; }
.mt-drop .sub { font-size: 12px; color: var(--text-3); margin: 6px 0; line-height: 1.7; }

/* 고른 파일 목록 */
.mt-files { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.mt-file {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel); font-size: 13px;
}
.mt-file.bad { border-color: var(--red-b); background: var(--red-l); }
.mt-file .n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.mt-file b { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.mt-file .sz { color: var(--text-3); font-size: 12px; white-space: nowrap; }

/* 진행 막대 */
.mt-bar {
  position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 3px; border-radius: 3px; background: var(--gray-l); overflow: hidden;
}
.mt-bar > div { height: 100%; background: var(--primary); transition: width .2s; }

/* 처리 중인 작업 */
.mt-job { padding: 9px 0 12px; border-bottom: 1px solid var(--border-2); position: relative; }
.mt-job:last-child { border-bottom: 0; }
.mt-job-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mt-job .mt-bar { left: 0; right: 0; bottom: 4px; }

/* 말한 사람 이름 붙이기 */
.mt-spk { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
.mt-spk-row { display: flex; align-items: center; gap: 6px; }
.mt-spk-row select,
.mt-spk-row input[type="text"] {
  height: 30px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--panel); font-size: 12.5px;
  color: var(--text);
}
/* 팀원이 아닌 고객사 담당자도 적을 수 있게 **직접 입력**을 받습니다 */
.mt-spk-row input[type="text"] { width: 178px; }
.mt-spk-row input[type="text"]:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-l);
}

/* 회의록 읽기 전용 보기 (마크다운) */
.md-box { font-size: 13.5px; line-height: 1.75; padding: 4px 2px; }
.md-box h3 { font-size: 15px; margin: 14px 0 6px; }
.md-box h4, .md-box h5 { font-size: 13.5px; margin: 12px 0 5px; color: var(--text-2); }
.md-box .md-li { padding-left: 4px; display: flex; gap: 6px; align-items: baseline; }
.md-box .md-mk { flex: none; color: var(--text-3); }
/* 주제 아래 딸린 사실 줄 — 한 칸 들여씁니다 */
.md-box .md-li2 { padding-left: 22px; }
.md-box .md-li2 .md-mk { color: var(--primary); }
/* '결론:' 으로 맺는 줄은 조금 눈에 띄게 */
.md-box .md-sum { color: var(--text); font-weight: 600; }
.md-box .md-row { font-family: inherit; color: var(--text-2); }
.md-box .md-gap { height: 7px; }

/* 원본 녹음 듣기 */
.mt-audio { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.mt-audio-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-audio-row b { font-size: 12.5px; font-weight: 600; min-width: 0; max-width: 240px; }
.mt-audio-row audio { height: 34px; flex: 1 1 260px; min-width: 200px; }