:root {
  --accent: #5e6ad2;
  --accent-dark: #4c58c4;
  --accent-soft: #eef0fd;
  --text: #1a1a1e;
  --text-muted: #6b7280;
  --text-faint: #9ca0ab;
  --bg: #fbfbfa;
  --card-bg: #ffffff;
  --border: #e6e6e4;
  --border-soft: #eeeeed;
  --radius: 8px;
  --ok: #1a7f37;
  --ok-soft: #eaf6ee;
  --err: #d1453b;
  --err-soft: #fdeceb;
  --warn: #a6650a;
  --warn-soft: #fbf1e2;
  --agency-a: #f97316;
  --agency-b: #1e3a8a;
  --cabinet: #b183c4;
  --cabinet-soft: #f3e9f6;
  --trash: #6b7280;
  --trash-soft: #eceef0;
  --backdrop: rgba(26, 26, 30, 0.45);
  --overlay-highlight: rgba(94, 106, 210, 0.18);
  color-scheme: light;
}

* { box-sizing: border-box; }

.crm-loading, .crm-empty { text-align: center; color: var(--text-faint); font-size: 13px; padding: 40px 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Malgun Gothic", sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
}

header.topbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

header.topbar .logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
}

header.topbar .brand {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.01em;
}

header.topbar .board-nav-btn {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid var(--accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

header.topbar .board-nav-btn:hover {
  background: var(--overlay-highlight);
}

.stats {
  display: flex;
  gap: 22px;
  padding: 10px 18px 14px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.stats .stat { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; text-decoration: none; cursor: pointer; padding: 3px 8px; border-radius: 5px; }
.stats .stat:hover { background: var(--bg); text-decoration: none; }
.stats .stat .label { font-size: 9px; color: var(--text-muted); }
.stats .stat .value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.stats .stat.pending .value { color: var(--warn); }
.stats .stat.contacted .value { color: var(--accent-dark); }
.stats .stat.reviewing .value { color: var(--accent); }
.stats .stat.rejected .value { color: var(--err); }
.stats .stat.advertising .value { color: var(--warn); }
.stats .stat.partner .value { color: var(--accent-dark); }
.stats .stat.paid_setup .value { color: var(--ok); }

.layout { display: flex; min-height: calc(100vh - 84px); }

nav.sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  padding: 10px 0;
}

nav.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  border-left: 3px solid transparent;
}

nav.sidebar a.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-left-color: var(--accent);
}

nav.sidebar a:not(.active):hover { background: var(--bg); color: var(--text); text-decoration: none; }

main.content { flex: 1; padding: 18px 20px; overflow-x: auto; }

h1.page-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin: 0 0 12px; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

select, input[type="text"], textarea {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 10.5px;
  font-family: inherit;
}

select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

button {
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
}

button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.ghost { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); }
button.danger { background: var(--err); color: #fff; border-color: var(--err); }
button.tiny { padding: 3px 8px; font-size: 9.5px; margin-right: 4px; border: none; color: #fff; }
button.tiny.primary { background: var(--accent); color: #fff; }
button.tiny.ghost { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); }
button.b-detail { background: var(--accent); }
button.b-edit { background: var(--ok); }
button.b-memo { background: var(--accent-dark); }
button.b-delete { background: var(--err); }

table { width: 100%; border-collapse: collapse; }

thead th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding: 8px 7px;
  white-space: nowrap;
}

tbody td {
  padding: 8px 7px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  color: var(--text);
}

tbody tr:hover { background: var(--bg); }
tbody tr.clickable-row { cursor: pointer; }
tbody td.name-cell { max-width: 56px; overflow: hidden; text-overflow: ellipsis; }

th.bulk-col, td.bulk-col { display: none; width: 24px; padding-right: 0; }
table.bulk-mode th.bulk-col, table.bulk-mode td.bulk-col { display: table-cell; }

.badge-select { border-radius: 5px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark); padding: 4px 7px; font-size: 10px; font-weight: 600; }

.status-badge { display: inline-block; border-radius: 4px; background: var(--accent-soft); color: var(--accent-dark); padding: 1px 5px; font-size: 9px; line-height: 1.5; white-space: nowrap; }

.pagination { display: flex; gap: 5px; margin-top: 14px; justify-content: center; }
.pagination button.current { background: var(--accent); color: #fff; border-color: var(--accent); }

.formcard {
  max-width: 640px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.field select, .field input, .field textarea { width: 100%; }
.field textarea { min-height: 80px; resize: vertical; }

.form-actions { display: flex; gap: 9px; margin-top: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   폰 화면 전용 (2026-09-07 추가)
   여기 아래 규칙은 전부 @media (max-width: 640px) 안에 들어 있습니다.
   = "화면 가로가 640px 이하일 때만 켜라" 라는 뜻입니다.
   데스크탑(641px 이상)에서는 하나도 켜지지 않으므로 기존 화면은 그대로입니다.
   위쪽의 기존 규칙은 한 줄도 고치지 않았습니다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── ① 상단 메뉴 ───────────────────────────────────────────────
     메뉴 버튼이 5~8개라 폰 너비를 넘어 잘려 나갑니다.
     아랫줄로 흘리는 대신, 손가락으로 좌우로 밀어 보는 한 줄로 만듭니다. */
  header.topbar {
    flex-wrap: nowrap;            /* 아랫줄로 넘기지 않는다 */
    overflow-x: auto;             /* 대신 좌우로 밀린다 */
    -webkit-overflow-scrolling: touch;  /* 아이폰에서 부드럽게 밀림 */
    gap: 7px;
    padding: 10px 12px;
  }
  header.topbar::-webkit-scrollbar { display: none; }  /* 밀대(스크롤바)는 숨김 */
  header.topbar .logo,
  header.topbar .brand,
  header.topbar .board-nav-btn { flex-shrink: 0; }     /* 눌려서 찌그러지지 않게 */
  header.topbar .brand { white-space: nowrap; font-size: 13px; }
  header.topbar .board-nav-btn {
    white-space: nowrap;          /* 버튼 글자가 두 줄로 쪼개지지 않게 */
    padding: 7px 12px;
    font-size: 12px;
  }

  /* 상단 메뉴 바로 아래 숫자 요약줄도 같은 이유로 좌우로 밀리게 */
  .stats { overflow-x: auto; gap: 14px; padding: 8px 12px 10px; }
  .stats::-webkit-scrollbar { display: none; }
  .stats .stat { flex-shrink: 0; }

  /* ── 본문 틀 ──────────────────────────────────────────────────
     데스크탑은 [왼쪽 메뉴 | 본문] 가로 배치인데 폰에서는 위아래로 둡니다. */
  .layout { display: block; min-height: 0; }
  main.content { padding: 14px 12px 20px; }
  h1.page-title { font-size: 18px; margin-bottom: 12px; }

  /* ── ③ 파트너 찾기 — 8칸 표를 카드 목록으로 ────────────────────
     표를 그대로 두면 폰에서 옆으로 삐져나가 못 읽습니다.
     그래서 폰에서만 표를 "카드 한 장 = 사람 한 명" 으로 접습니다.
     partners.html 의 <body class="page-partners"> 가 붙은 화면에서만 켜집니다
     (현장 목록 sites.html 도 같은 id 를 쓰기 때문에 구분해 둡니다). */

  /* 표 머리글은 폰에서 필요 없습니다. 항목 이름을 각 칸 앞에 붙일 것이므로. */
  body.page-partners #list-table thead { display: none; }
  body.page-partners #list-table,
  body.page-partners #list-table tbody { display: block; width: 100%; }

  /* 줄(tr) 하나 = 카드 한 장 */
  body.page-partners #list-table tbody tr {
    display: flex;
    flex-wrap: wrap;              /* 자리가 모자라면 아랫줄로 */
    align-items: baseline;
    gap: 4px 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 15px;
    margin-bottom: 10px;
  }
  /* 폰에는 마우스가 없어 "올려놓은 색"이 손가락 뗀 뒤에도 남습니다. 그래서 끕니다. */
  body.page-partners #list-table tbody tr:hover { background: var(--card-bg); }

  /* 칸(td) 하나 = 카드 안의 한 조각. 표 테두리와 줄바꿈 금지를 풉니다. */
  body.page-partners #list-table tbody td {
    display: block;
    padding: 0;
    border-bottom: none;
    white-space: normal;          /* 길면 다음 줄로 넘어가게 */
    word-break: break-word;
    font-size: 13px;
    color: var(--text-muted);
  }
  /* 데스크탑에서는 이름 칸을 56px 로 잘라 두는데, 폰에서는 다 보여야 합니다. */
  body.page-partners #list-table tbody td.name-cell { max-width: none; overflow: visible; }

  /* 각 칸 앞에 항목 이름 붙이기.
     list.js 가 <td data-label="현장명"> 처럼 적어 둔 값을 그대로 꺼내 씁니다.
     데스크탑에서는 이 규칙이 꺼져 있어 아무것도 안 보입니다(표시 안 바뀜). */
  body.page-partners #list-table tbody td::before {
    content: attr(data-label) " ";
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
  }
  /* 이름·직급·진행상태·호감도는 보면 바로 아는 값이라 항목 이름을 안 붙입니다 */
  body.page-partners #list-table tbody td[data-label="이름"]::before,
  body.page-partners #list-table tbody td[data-label="직급"]::before,
  body.page-partners #list-table tbody td[data-label="진행상태"]::before,
  body.page-partners #list-table tbody td[data-label="호감도"]::before { content: none; }

  /* 일괄수정 체크박스는 폰에서 거의 안 쓰므로 항상 감춥니다 */
  body.page-partners #list-table.bulk-mode tbody td.bulk-col { display: none; }

  /* --- 카드 안 자리 배치 ---
     order 는 "몇 번째로 놓을지" 정하는 값입니다. 표에 적힌 순서와 상관없이
     화면에서만 자리를 바꿔 줍니다(코드나 데이터는 그대로). */

  /* 1줄 : 이름(크게) · 직급(작게) · 진행상태 딱지(오른쪽 끝) */
  body.page-partners #list-table tbody td[data-label="이름"] {
    order: 1; font-size: 16.5px; font-weight: 800; color: var(--text);
  }
  body.page-partners #list-table tbody td[data-label="직급"] {
    order: 2; font-size: 12px; font-weight: 600; color: var(--text-faint);
  }
  body.page-partners #list-table tbody td[data-label="진행상태"] {
    order: 3; margin-left: auto;   /* 남는 자리를 왼쪽에 몰아 오른쪽 끝으로 민다 */
  }

  /* 2줄 : 현장명 / 3줄 : 연락처 — 각각 한 줄을 통째로 차지 */
  body.page-partners #list-table tbody td[data-label="현장명"] { order: 4; flex: 0 0 100%; }
  body.page-partners #list-table tbody td[data-label="연락처"] {
    order: 5; flex: 0 0 100%; color: var(--text); font-weight: 600; font-size: 13.5px;
  }

  /* 4줄 : 호감도 딱지(왼쪽) · 등록번호 + 등록일시(오른쪽, 작게) */
  body.page-partners #list-table tbody td[data-label="호감도"] { order: 6; margin-top: 4px; }
  body.page-partners #list-table tbody td[data-label="등록번호"] {
    order: 7; margin-left: auto; margin-top: 4px; font-size: 10.5px; color: var(--text-faint);
  }
  body.page-partners #list-table tbody td[data-label="등록일시"] {
    order: 8; margin-top: 4px; font-size: 10.5px; color: var(--text-faint);
  }
  body.page-partners #list-table tbody td[data-label="등록번호"]::before,
  body.page-partners #list-table tbody td[data-label="등록일시"]::before {
    font-size: 10.5px; font-weight: 600;
  }

  /* 진행상태·호감도 딱지를 폰에서 읽기 좋은 크기로 */
  body.page-partners #list-table .status-badge {
    font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  }

  /* 쪽 번호 버튼도 손가락으로 누를 만한 크기로 */
  body.page-partners .pagination { flex-wrap: wrap; }
  body.page-partners .pagination button { padding: 8px 13px; font-size: 12px; }
}

/* 현장투입 배지 — 이름 옆에 붙는 표시. 인재풀·상세·현장투입 화면 공통 (2026-09-14) */
.status-badge.special-badge { background: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe; margin-left: 4px; }
/* 이름 칸에 현장투입 배지가 붙으면 이름이 …로 잘리지 않게 줄바꿈을 허용 */
#list-table td.name-cell:has(.special-badge) { white-space: normal; }