/* ─────────────────────────────────────────────
 *  고객관리 v4 (2026-05-19) — mockup-customer-v4.html 이식
 *  핵심: 아바타 제거 + 가나다 그룹/인덱스 + PC 한 화면 분할
 *
 *  다크모드 대응 — 색은 var(--surface)/var(--text) 우선,
 *  목업 고정 색은 컬러바·배지·nudge·danger 등 강조 영역만.
 * ───────────────────────────────────────────── */

/* ── 헤더 + 칩 ─────────────────────────────────── */
#customerSheet .cv4-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
#customerSheet .cv4-hd h1 { font-size:22px;font-weight:700;color:var(--text,#111);letter-spacing:-0.5px;margin:0; }
#customerSheet .cv4-hd-add {
  width:34px;height:34px;border-radius:50%;background:var(--text,#111);color:var(--surface,#fff);
  border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
}

#customerSheet .cv4-chips { display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap; }
#customerSheet .cv4-chip {
  font-size:12px;padding:6px 10px;border-radius:20px;cursor:pointer;font-weight:500;white-space:nowrap;
  transition:background .15s,color .15s;border:none;flex-shrink:0;
}
/* [v212] PC 좌측 380px 안에 6칩 들어가도록 더 빠듯하게 */
#customerSheet.cv4-pc .cv4-chip { padding:6px 9px;font-size:11px; }
#customerSheet.cv4-pc .cv4-chips { gap:4px; }
#customerSheet .cv4-chip.off { background:var(--surface-2,#F7F8FA);color:#999; }
#customerSheet .cv4-chip.green { background:#EEFBF3;color:#16B55E; }
#customerSheet .cv4-chip.brand { background:#F7EFF0;color:#BC6675; }
/* [v211] 활성 칩은 항상 검정 — green/brand/off 위로 올라가도록 마지막에 선언 */
#customerSheet .cv4-chip.is-on { background:var(--text,#111) !important;color:var(--surface,#fff) !important; }

/* "전체" 칩 좁게 — 검색창 너비와 균형 */
#customerSheet .cv4-chip[data-seg="all"] { padding:6px 14px; }

/* ── 가나다 섹션 헤더 + 인덱스바 ────────────────── */
#customerSheet .sec-hd {
  font-size:12px;color:#BBB;font-weight:600;padding:8px 0 4px;letter-spacing:1px;margin-top:4px;
}
#customerSheet .idx-bar {
  position:absolute;right:4px;top:200px;display:flex;flex-direction:column;align-items:center;gap:1px;z-index:10;
  user-select:none;-webkit-user-select:none;
}
#customerSheet .idx-bar span {
  font-size:9px;color:#BBB;padding:1px 4px;cursor:pointer;font-weight:500;
}
#customerSheet .idx-bar span:active,
#customerSheet .idx-bar span.is-on { color:var(--text,#111);font-weight:700; }

/* ── 고객 row ─────────────────────────────────── */
#customerSheet .c-row {
  display:flex;align-items:center;padding:13px 0;border-bottom:1px solid var(--border,#F5F5F7);
  cursor:pointer;transition:background .12s;position:relative;padding-left:16px;
}
#customerSheet .c-row:active { background:var(--surface-2,#FAFAFA); }
#customerSheet .c-row:last-child { border-bottom:none; }
#customerSheet .c-bar {
  position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;
}
#customerSheet .c-bar.b1 { background:#DDD; }            /* 1~2회 */
#customerSheet .c-bar.b2 { background:#16B55E; }         /* 3~9회 */
#customerSheet .c-bar.b3 { background:#BC6675; }         /* 10회+ */
#customerSheet .c-info { flex:1;min-width:0; }
#customerSheet .c-name {
  font-size:15px;color:var(--text,#111);font-weight:500;display:flex;align-items:center;gap:6px;
}
#customerSheet .c-name-txt { min-width:5em;display:inline-block; }
#customerSheet .c-badge {
  font-size:11px;padding:2px 7px;border-radius:8px;font-weight:600;
}
#customerSheet .c-badge.b1 { background:var(--surface-2,#F7F8FA);color:#999; }
#customerSheet .c-badge.b2 { background:#EEFBF3;color:#16B55E; }
#customerSheet .c-badge.b3 { background:#F7EFF0;color:#BC6675; }
#customerSheet .c-sub { font-size:12px;color:#C4C4C4;margin-top:2px; }
#customerSheet .c-arr { font-size:16px;color:#DDD;flex-shrink:0;margin-left:8px; }

/* ── PC 한 화면 분할 ──────────────────────────── */
#customerSheet.cv4-pc { display:flex;flex-direction:row !important;height:100vh;overflow:hidden;padding:0; }
#customerSheet.cv4-pc .pc-l {
  width:380px;border-right:1px solid var(--border,#F5F5F7);display:flex;flex-direction:column;
  background:var(--surface,#fff);overflow:hidden;
}
#customerSheet.cv4-pc .pc-l-head { padding:24px 24px 16px; }
#customerSheet.cv4-pc .pc-r {
  flex:1;background:var(--surface-2,#FAFBFC);padding:32px;overflow-y:auto;
}
#customerSheet.cv4-pc .pc-items { flex:1;overflow-y:auto;padding-bottom:24px; }
#customerSheet.cv4-pc .pi {
  display:flex;align-items:center;padding:11px 24px;border-bottom:1px solid var(--surface-2,#F7F8FA);
  cursor:pointer;transition:background .12s;position:relative;padding-left:32px;
}
#customerSheet.cv4-pc .pi:hover { background:var(--surface-2,#FAFBFC); }
#customerSheet.cv4-pc .pi.on { background:var(--surface-2,#F7F8FA); }
#customerSheet.cv4-pc .pi .c-bar { left:24px;top:8px;bottom:8px; }
#customerSheet.cv4-pc .pi-sec {
  font-size:11px;color:#CCC;font-weight:600;padding:10px 24px 4px;letter-spacing:1px;
}

/* PC 디테일 mount 빈 상태 */
#customerSheet.cv4-pc .pc-r-empty {
  display:flex;align-items:center;justify-content:center;height:100%;color:#BBB;font-size:14px;
}

/* ── 디테일 (PC 우측 + 모바일 시트 본문 공용) ───── */
.cv4-detail .d-header {
  margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border,#F0F0F0);
}
.cv4-detail .d-name-row {
  display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;
}
.cv4-detail .d-name { font-size:22px;font-weight:700;color:var(--text,#111);letter-spacing:-0.5px; }
.cv4-detail .d-badge-lg {
  font-size:11px;padding:3px 10px;border-radius:8px;font-weight:600;margin-left:8px;
}
.cv4-detail .d-phone {
  font-size:14px;color:#999;margin-bottom:16px;letter-spacing:0.3px;
}
.cv4-detail .d-actions { display:flex;gap:8px;flex-wrap:wrap; }
.cv4-detail .d-act {
  padding:10px 20px;border-radius:12px;border:1px solid var(--border,#F0F0F0);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;
  background:var(--surface,#fff);color:#666;
}
.cv4-detail .d-act.primary { background:var(--text,#111);color:var(--surface,#fff);border-color:var(--text,#111); }
.cv4-detail .d-act.primary:hover { background:#333;border-color:#333; }
.cv4-detail .d-act.ghost { background:var(--surface,#fff);color:#666; }
.cv4-detail .d-act.ghost:hover { background:var(--surface-2,#F7F8FA); }
.cv4-detail .d-act.danger { background:none;color:#EF4444;font-size:12px;border-color:transparent; }
.cv4-detail .d-act.danger:hover { background:#FEF2F2; }

.cv4-detail .nudge {
  background:#F7EFF0;border-radius:14px;padding:14px 18px;margin-bottom:24px;
  font-size:13px;color:#BC6675;line-height:1.5;display:flex;align-items:center;
}

.cv4-detail .d-cards { display:flex;gap:10px;margin-bottom:24px; }
.cv4-detail .dc {
  flex:1;background:var(--surface,#fff);border-radius:14px;padding:16px;text-align:center;
}
.cv4-detail .dc-v {
  font-size:26px;font-weight:700;color:var(--text,#111);letter-spacing:-0.5px;line-height:1.2;
}
.cv4-detail .dc-v small {
  font-size:14px;font-weight:400;color:#BBB;margin-left:1px;
}
.cv4-detail .dc-l { font-size:11px;color:#CCC;margin-top:6px;letter-spacing:0.2px; }

.cv4-detail .d-sec {
  font-size:12px;color:#BBB;font-weight:600;margin-bottom:10px;letter-spacing:0.3px;
  display:flex;align-items:center;justify-content:space-between;
}
.cv4-detail .d-sec-link { font-size:12px;color:#CCC;cursor:pointer;font-weight:500; }
.cv4-detail .d-sec-link:hover { color:#999; }

.cv4-detail .d-pref {
  font-size:13px;color:#666;margin-bottom:24px;line-height:1.6;
}

.cv4-detail .vr-wrap {
  background:var(--surface,#fff);border-radius:14px;padding:4px 16px;margin-bottom:24px;
}
.cv4-detail .vr {
  display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--surface-2,#F7F8FA);
}
.cv4-detail .vr:last-child { border-bottom:none; }
.cv4-detail .vr.hidden { display:none; }
.cv4-detail .vr-d { font-size:13px;color:#999;min-width:44px; }
.cv4-detail .vr-s { font-size:13px;color:#555;flex:1;margin:0 12px; }
.cv4-detail .vr-p { font-size:13px;color:var(--text,#111);font-weight:600; }

.cv4-detail .memo {
  background:var(--surface,#fff);border-radius:14px;padding:16px;
  font-size:13px;color:#555;line-height:1.7;white-space:pre-wrap;
}

/* ── 모바일 디테일 시트 헤더 (뒤로가기 등) ───────── */
#customerDashSheet .cv4-detail-mobile-head {
  display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border,#F0F0F0);
  background:var(--surface,#fff);position:sticky;top:0;z-index:5;
}
#customerDashSheet .cv4-detail-mobile-head .back {
  background:none;border:none;font-size:20px;cursor:pointer;color:var(--text,#111);padding:4px 8px;
}
#customerDashSheet .cv4-detail-mobile-body { padding:20px 16px; }