/* dbmap/docs/DESIGN.md 를 따른다 — 어두운 테두리(nav)·밝은 콘텐츠(main) 원칙은
   dbmap 이 "테두리는 어둡고 지도(콘텐츠)는 밝다"로 이미 쓰던 것과 같다(사장님 결정,
   2026-08-29: "우리 색상은 너무 칙칙하다 · 컨텐츠를 직접 넣는 곳은 흰 배경이어도
   무방하다"). #nav 는 dbmap 과 결을 맞추려 어두운 색을 그대로 쓰고, #main(표·입력폼·
   가이드)과 #guide-drawer 는 흰 배경 + 어두운 글자로 바꾼다. 크기·속도 규칙(12px 기본·
   16px 이상 금지·0.15s)은 유지하되, 사장님 지적대로 여백은 20~40% 더 넉넉하게,
   CS 접수·클레임처럼 하루 종일 입력·판독하는 화면은 기본 글자를 13px 로 살짝 키웠다. */

:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --line: #334155;
  --border: #475569;
  --text-dim: #8492a8;
  --text: #94a3b8;
  --text-clear: #cbd5e1;
  --text-bright: #e2e8f0;

  --blue: #60a5fa;
  --red: #fca5a5;
  --lightblue: #93c5fd;
  --yellow: #fbbf24;
  --green: #16a34a;

  --input-bg: #16213a;

  --sb: rgba(255, 255, 255, 0.22);
  --sb-hover: rgba(255, 255, 255, 0.38);

  /* ── 디자인 토큰 — 화면마다 11.5/12.5/13.5/15/23px 처럼 반 픽셀씩 다른 값이
     제멋대로 쌓여서 "정리가 안 된 프로토타입" 처럼 보인다는 지적(2026-08-29)에
     따라, #main 콘텐츠 영역의 글자 크기·둥근 모서리를 이 6단계로만 쓴다. 새 화면을
     만들 때도 여기서 고른다 — 중간값을 새로 만들지 않는다. */
  --fs-2xs: 11px;   /* 배지·힌트·표의 부가 숫자(kpi-label 등) */
  --fs-xs: 12px;    /* 버튼·칩·드롭다운·표 헤더 */
  --fs-sm: 13px;    /* 본문·입력칸·표 셀 (기본값) */
  --fs-md: 14px;    /* 부제(h2) */
  --fs-lg: 16px;    /* 제목(h1) */
  --fs-xl: 24px;    /* 큰 지표 숫자(KPI) */

  --radius-sm: 6px;   /* 버튼·입력칸·인라인 편집 칸 */
  --radius-md: 8px;   /* 카드·패널 */
  --radius-lg: 16px;  /* 채팅 입력창·말풍선처럼 크고 부드러운 요소 */
  --radius-pill: 999px; /* 배지·상태/칩 드롭다운·필터 칩 */

  /* 글자·모서리와 같은 이유로 여백도 단계를 정해 둔다 — CS 요약처럼 카드가 여러
     층으로 쌓이는 화면에서 11/12/14/16/18/20/24px 이 뒤섞이면 "간격이 서로 안
     맞는다"는 느낌으로 바로 드러난다(사장님, 2026-08-30: "정신이하나도없네").
     새로 만드는 화면은 중간값을 만들지 말고 여기서 고른다. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 26px;
  --sp-6: 36px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--sb);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--sb-hover); }
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Malgun Gothic', sans-serif;
  font-size: 12px;
  /* color-scheme:dark — 안 정해두면 <input type=date> 의 달력 아이콘이 브라우저
     기본값(검은색)으로 그려져 어두운 배경 위에서 안 보인다(사장님 지적,
     2026-08-30: "달력은 왜 검은색이야"). 이 한 줄로 그 아이콘을 포함해 네이티브
     폼 컨트롤 전체가 어두운 배경에 맞게 그려진다. */
  color-scheme: dark;
}

/* :not(.btn) — a 의 색 규칙이 id 선택자(#main a)라 .btn 계열 클래스 색(활성 칩·
   엑셀버튼 등)을 늘 이겨버려서 글자가 배경과 같은 색이 되어 안 보이는 문제가
   있었다(사장님 지적, 2026-08-29: "내 할일 이쪽은 선택되면 글씨가 안보이네",
   "엑셀로내보내기도 안보이고") — 버튼처럼 쓰는 a 는 이 규칙에서 아예 뺀다. */
a:not(.btn) { color: var(--blue); text-decoration: none; }
a:not(.btn):hover { text-decoration: underline; }

/* ── 레이아웃 ── */
#app-shell { display: flex; height: 100vh; }

#nav {
  width: 180px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 13px 0;
  overflow: hidden;
  transition: width 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
}
.nav-icon { margin-right: 8px; }
/* 접힌 메뉴 — dbmap 의 목록 패널 접기 핸들(#list-toggle)과 같은 형태로 만든다
   (사장님 지적, 2026-08-29: "가로로 늘어나는 건 괜찮으니 왼쪽 패널을 접는 창으로,
   dbmap 과 같은 형태로"). 폭을 0 으로 접어 CS 접수 표처럼 칸이 많은 화면이 가로
   공간을 더 쓰게 한다 — dbmap 목록 패널이 화면 밖으로 완전히 사라지는 것과 같은
   뜻이다. */
body.nav-collapsed #nav { width: 0; padding-left: 0; padding-right: 0; border-color: transparent; }
body.nav-collapsed #nav > * { white-space: nowrap; }

/* dbmap #list-toggle 과 같은 규격(17x48·둥근 바깥쪽 모서리·그림자·화살표 180도
   회전)을 그대로 따른다 — 다른 도구인데 조작감이 다르면 또 새로 배워야 한다. */
#nav-toggle {
  position: fixed; left: 180px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 48px; z-index: 51;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid #334155; border-left: none; border-radius: 0 6px 6px 0;
  background: #1e293b; color: #94a3b8; font-size: 14px; line-height: 1; cursor: pointer;
  box-shadow: 2px 0 8px rgba(0,0,0,0.3);
  transition: left 0.22s ease, background 0.15s, color 0.15s;
}
#nav-toggle:hover { background: #334155; color: #e2e8f0; }
#nav-toggle:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }
#nav-toggle-arrow { transition: transform 0.22s ease; display: block; }
body.nav-collapsed #nav-toggle { left: 0; }
body.nav-collapsed #nav-toggle-arrow { transform: rotate(180deg); }
#nav-collapse-btn {
  position: absolute; top: 9px; right: -11px; width: 22px; height: 22px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text-dim); cursor: pointer; z-index: 5; font-size: var(--fs-2xs);
  display: flex; align-items: center; justify-content: center;
}
#nav-collapse-btn:hover { color: var(--text-bright); border-color: var(--blue); }
#nav.collapsed #nav-collapse-btn { transform: rotate(180deg); }
#nav .brand {
  font-size: 14px;
  color: var(--text-bright);
  padding: 0 13px 13px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 11px;
}
#nav a {
  display: block;
  padding: 9px 13px;
  color: var(--text-clear);
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
#nav a:hover { background: rgba(255,255,255,0.04); text-decoration: none; }
#nav a.active { border-left-color: var(--blue); color: var(--text-bright); background: rgba(96,165,250,0.08); }
#nav .nav-guide-btn {
  display: block;
  width: calc(100% - 26px);
  margin: 11px 13px 0;
  padding: 9px 11px;
  border-radius: 6px;
  border: 1px solid var(--blue);
  background: rgba(96,165,250,0.14);
  color: var(--text-bright);
  font-size: 11.5px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
#nav .nav-guide-btn:hover { background: rgba(96,165,250,0.26); }

#nav .user {
  margin-top: auto;
  padding: 13px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-dim);
}
#nav .user .role-cs { color: var(--blue); }
#nav .user .role-viewer { color: var(--yellow); }
#nav .user .role-master { color: var(--red); }

/* ── #main — "다크·프로" 테마 전체 적용 (사장님 지시, 2026-08-29: "다크프로로
   다 적용해라" — 목업으로 보여드렸던 테마 3종 중 B안을 실제 앱에 그대로 옮긴다).
   흰 배경 실험은 여기서 끝내고, nav 와 결이 같은 짙은 남색 계열로 통일한다. */
#main {
  --bg: #0b1120;
  --panel: #141b2d;
  --line: #232f47;
  --border: #2d3b58;
  --text-dim: #8492a8;
  --text: #94a3b8;
  --text-clear: #cbd5e1;
  --text-bright: #f1f5f9;

  --blue: #60a5fa;
  --red: #f87171;
  --yellow: #fbbf24;
  --green: #34d399;
  --lightblue: #93c5fd;

  --input-bg: #1a2338;

  --sb: rgba(255, 255, 255, 0.16);
  --sb-hover: rgba(255, 255, 255, 0.28);

  flex: 1;
  overflow-y: auto;
  padding: 20px 26px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
#main a:not(.btn) { color: var(--blue); }
#main a:not(.btn):hover { color: #7db8fb; }
#main tr:hover td { background: rgba(255, 255, 255, 0.03); }
#main .rank-track { background: rgba(255, 255, 255, 0.06); }

h1 { font-size: 15px; color: var(--text-bright); margin-bottom: 15px; }
h2 { font-size: 13.5px; color: var(--text-clear); margin: 20px 0 11px; }
h1 + p.hint, h1 + .hint { margin: -6px 0 18px; }

/* ── 버튼 ── */
.btn {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-clear);
  cursor: pointer;
  font-size: 12.5px;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--blue); color: var(--text-bright); text-decoration: none; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #0f172a; font-weight: bold; }
/* 빠른입력 줄 "+" 등록 버튼 — 글자가 너무 작아 보였다는 지적(사장님, 2026-09-03:
   "+버튼안에 +크기좀 키우자"). */
.quick-add-row button[type="submit"] { font-size: 20px; line-height: 1; padding: 4px 12px; }
.btn-primary:hover { background: #7db8fb; color: #0f172a; }
/* 밝은 초록 위 연한 글씨가 잘 안 보인다는 지적(2026-08-29) — .btn-primary 처럼
   짙은 글씨로 바꾼다(밝은 배경 버튼엔 밝은 글씨보다 짙은 글씨가 대비가 낫다). */
.btn-export { background: var(--green); border-color: var(--green); color: #0f172a; font-weight: bold; }
/* 평소엔 안 보이다가 hover 해야 보이는 정도로는 "이게 삭제 버튼인지 아닌지" 조차
   구분이 안 된다는 지적(2026-08-29) — 평소에도 옅은 빨강으로 눈에 띄게 둔다. */
.case-delete-btn {
  padding: 4px 9px; font-size: var(--fs-xs); background: rgba(248,113,113,0.10);
  border-color: rgba(248,113,113,0.35); color: var(--red);
}
.case-delete-btn:hover { background: rgba(248,113,113,0.22); border-color: var(--red); color: #fca5a5; }

/* ── 폼 ──
   input·select·textarea 는 어디서든(표 안 인라인 편집 포함) 같은 옅은 파란빛 배경을
   쓴다 — "여기는 눌러서 고칠 수 있는 칸이다" 라는 신호를 일관되게 주기 위해서다
   (사장님 지적, 2026-08-29: "어디를 입력해야 할지 우선순위도 모르겠다" · 시트처럼
   격자·칸 느낌이 없다). 읽기 전용 글자(표의 일반 텍스트)는 이 배경이 없다. */
input, select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-bright);
  padding: 7px 9px;
  font-family: inherit;
  font-size: 13px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
label { color: var(--text); font-size: 11.5px; display: block; margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.required::after { content: ' *'; color: var(--red); }

/* ── 표 ── 은은한 세로 격자선까지 더해 시트의 칸 느낌을 살린다. */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
th:last-child, td:last-child { border-right: none; }
th {
  color: var(--text-bright); font-weight: 700; font-size: 11.5px;
  background: var(--panel); border-bottom: 2px solid var(--border);
  /* 스프레드시트·엑셀은 스크롤해도 머리글이 고정된다 — 336건을 내려보다가
     "이 칸이 무슨 칸이었지" 하고 다시 위로 올라가야 하는 불편을 없앤다
     (사장님 지시, 2026-08-29: 시트·노션 사용 경험을 최대한 그대로). */
  position: sticky; top: 0; z-index: 5;
}
td.wrap { white-space: normal; }

/* ── 뱃지 ── */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; }

/* ── 상태 드롭다운 (표 안에서 바로 바꾼다) ──
   2026-08-30 — 진한 배경 + 검은 굵은 글씨가 너무 크고 튄다는 지적(다른 대시보드
   스크린샷 참고: "이렇게 깔끔하고 작게 해줘, 저렇게 클 필요가 있나") — 옅은
   배경(pill_bg) + 밝은 글자(text) 조합으로 작고 차분하게 바꾼다. 화살표는
   .chip-select 처럼 currentColor 로 그려서 상태마다 바뀌는 글자색에 맞춘다. */
.status-select {
  font-weight: 600;
  font-size: 12px;
  border: none;
  border-radius: 999px;
  padding: 3px 19px 3px 9px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px center, right 5px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
/* transition 을 뺐다 — 스크롤하는 동안 마우스 커서가 가만히 있어도 커서 아래로
   지나가는 행이 계속 바뀌면서 hover 가 반복 발동해, filter 애니메이션이 100건
   내내 끊이지 않고 겹쳐 돌아 렉으로 이어졌다(사장님 지적, 2026-08-29: "cs 접수
   내리면서 렉걸리는데" — Opus 로 원인 분석). 즉시 바뀌어도 눈에 띄는 건 똑같다. */
.status-select:hover { filter: brightness(1.25); }
.status-select:focus { outline: 2px solid var(--text-bright); }

/* ── 색 있는 드롭다운 칩 (클레임 요구사항·반품유형 등) ──
   구글시트의 색 드롭다운(정상=파랑·불량=빨강·미확인=회색 등)과 같은 조작감을
   준다(사장님이 스크린샷으로 직접 보여줌, 2026-08-29). 값마다 배경·글자색이
   바뀌므로 화살표는 currentColor 로 그려서 항상 글자색과 맞게 한다. */
.chip-select {
  font-weight: bold;
  font-size: 11.5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 22px 4px 11px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 11px center, right 7px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: filter 0.15s;
}
.chip-select:hover { filter: brightness(1.1); border-color: var(--blue); }
.chip-select:focus { outline: 2px solid var(--blue); }

/* 클레임 표 — 평소엔 칩 배지로만 보여주고 눌러야 .chip-select 로 바뀐다
   (UI 검토, 2026-09-02: "불량 클레임은 항상 편집 상태라 복잡해 보입니다"). */
.chip-badge {
  display: inline-block; font-weight: bold; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px;
}

/* ── 필터바 ──
   flex-wrap 만 믿고 있었더니 좁은 화면에서 [엑셀로 내보내기] 글자가 눌려서
   잘려 보이는 문제(사장님 지적, 2026-08-29) — 버튼은 줄어들지 않고 줄바꿈만
   되도록 못 박는다. */
.filter-bar { display: flex; gap: 9px; align-items: center; margin-bottom: 15px; flex-wrap: wrap; }
.filter-bar select, .filter-bar input[type=text] { min-width: 90px; }
.filter-bar .btn { flex-shrink: 0; white-space: nowrap; }

/* ── 표 밀도 — 촘촘히/보통/널찍이 선택지가 있었는데, 촘촘히 하나로 고정한다
   (사장님 지시, 2026-08-29: "표밀도는 촘촘히로 적용시키고 다없애고 ... 최대한
   행을 줄여서 cs 정보가 더많이보이게하자"). 이 표(.cases-table-wrap)에서만 셀
   안쪽 여백을 좁힌다 — 다른 화면(제품·클레임 등)의 표는 그대로 둔다.
   (2026-08-30 — 너무 좁혔다는 지적: "기존꺼는 시원시원한데 우리는 너무 답답
   하다" — 살짝 늘린다. 그래도 기본(8px 10px)보단 촘촘하다.) */
.cases-table-wrap table td { padding: 5px 9px; }
/* 머리글 고정을 하려면 이 칸 자체가 "진짜로 스크롤하는 상자"여야 한다 — CSS
   규칙상 overflow-x:auto 를 쓰면 overflow-y 는 강제로 auto 가 되어(visible 로
   못 둔다), 결국 페이지(#main) 대신 이 칸이 sticky 의 기준이 되어버린다.
   시트·엑셀도 전체 페이지가 아니라 표 영역 안에서만 스크롤된다.
   예전엔 고정 72vh 를 줬었는데, AI 도우미를 펼치면 위쪽 내용 높이가 늘어나면서
   #main 전체 높이가 뷰포트를 넘어 #main 도 같이 스크롤바가 생겼다 — 스크롤바가
   두 개 겹쳐 보이는 문제(사장님 지적, 2026-08-29: "오른쪽 사이드바가 2개"). 고정
   값 대신 flex 로 "남는 공간을 정확히 다 차지"하게 바꾼다 — #main 은 이제 표가
   있는 화면에서 스크롤할 일이 없다. `:has()` 대신 템플릿에서 내려주는 고정 클래스로
   켠다 — `:has()`는 표 안에서 아무 DOM이나 바뀔 때마다 이 선택자를 다시 검사해야
   해서, 셀 하나를 클릭할 때마다 불필요한 스타일 재계산을 더할 수 있다(Opus 성능
   재검토, 2026-08-30). */
#main.has-table { display: flex; flex-direction: column; overflow-y: hidden; }
.cases-table-wrap { flex: 1; min-height: 0; }

/* 표가 가로로 아주 넓어서(비고까지 넉넉히 늘린 뒤론 더) 가로 스크롤바를 자주
   쓰게 되는데, 사이트 기본 스크롤바(9px)는 마우스로 잡기 힘들다는 지적
   (2026-08-30: "가로 스크롤바는 좀 크기를 키우든지... 쉽게 눌러지게") — 이
   표에서만 두 배 가까이 키운다(다른 화면은 원래 얇은 스크롤바 그대로 둔다). */
.cases-table-wrap { scrollbar-width: auto; }
.cases-table-wrap::-webkit-scrollbar { width: 16px; height: 16px; }
.cases-table-wrap::-webkit-scrollbar-thumb { border-width: 3px; }

/* 머리글은 칸 내용과 상관없이 전부 가운데 정렬한다 — 어떤 건 가운데, 어떤 건
   왼쪽이라 제목 줄이 들쭉날쭉해 보인다는 지적(2026-08-30: "제목라인에서 어디는
   중간정렬이고 어디는 왼쪽정렬이여"). 몸통 칸은 아래 규칙대로 데이터 종류별로
   다르게 둔다(짧은 값은 가운데, 자유 텍스트는 왼쪽). */
.cases-table-wrap thead th { text-align: center; }

/* 원래 스프레드시트는 날짜·분류·상태처럼 짧고 정해진 값은 가운데 정렬이었다
   (사장님 스크린샷, 2026-08-30: "기존에는 가운대 정렬이네?") — 처음엔 내용처럼
   자유 텍스트인 칸은 왼쪽 정렬로 남겨 뒀는데, 나중에 그것도 가운데로 맞춰
   달라는 지시(2026-08-30: "내용, 처리내용, 비고의 내용들도 다 가운대 정렬해줘")
   — 이제 표 전체가 가운데 정렬이다.
   접수일(1)·채널(3)·대분류(8)·소분류(9)·내용(10)·처리내용(11)·처리완료일(12)·
   상태(13)·비고(14)·삭제(마지막). */
.cases-table-wrap td:nth-child(1),
.cases-table-wrap td:nth-child(3),
.cases-table-wrap td:nth-child(8),
.cases-table-wrap td:nth-child(9),
.cases-table-wrap td:nth-child(10),
.cases-table-wrap td:nth-child(11),
.cases-table-wrap td:nth-child(12),
.cases-table-wrap td:nth-child(13),
.cases-table-wrap td:nth-child(14),
.cases-table-wrap td:last-child {
  text-align: center;
}
/* input/select 는 부모 td 의 text-align 을 상속받지 않는다(직접 확인함 — 폼
   컨트롤은 text-align 을 상속이 아니라 자기 기본값으로 따로 그린다) — 위 규칙과
   같은 칸의 실제 입력칸(클릭했을 때만 생기는 .cell-editor)에 한 번 더 직접
   지정해야 한다. 빠른입력 행은 예전 <select> 그대로 쓰니 .quick-add-row select 도
   같이 맞춘다(원래도 가운데였다). */
.cases-table-wrap td:nth-child(1) .cell-editor, .cases-table-wrap td:nth-child(3) .cell-editor,
.cases-table-wrap td:nth-child(8) .cell-editor, .cases-table-wrap td:nth-child(9) .cell-editor,
.cases-table-wrap td:nth-child(10) .cell-editor, .cases-table-wrap td:nth-child(11) .cell-editor,
.cases-table-wrap td:nth-child(12) .cell-editor, .cases-table-wrap td:nth-child(13) .cell-editor,
.cases-table-wrap td:nth-child(14) .cell-editor {
  text-align: center;
}


/* ── 열 너비를 엑셀·스프레드시트처럼 드래그로 조절 (사장님 지시, 2026-08-29:
   "열 사이즈 길이 드래그로 옆으로 길게 만들 수 있게 해줘") — colgroup 으로 폭을
   주면 table-layout:fixed 에서 칸마다 정확히 그 폭을 지킨다(auto 레이아웃은
   내용에 따라 제멋대로 늘어나 드래그한 값이 무시된다). 초기 폭은 이름·연락처·
   주문번호가 잘린다는 지적(2026-08-29 스크린샷)을 반영해 넉넉하게 잡았고, 그
   뒤로는 드래그해서 고친 값이 이 초기값을 덮는다(app.js 아래, localStorage). */
.cases-table-wrap table { table-layout: fixed; }
.cases-table-wrap td { overflow: hidden; }
.cases-table-wrap td:not(.wrap) { white-space: nowrap; text-overflow: ellipsis; }
/* 불량 클레임 표도 같은 방식(사장님, 2026-08-30: "열들 길이 편하게 줄이고
   늘릴수있게해주고"). */
.claims-table-wrap table { table-layout: fixed; }
.claims-table-wrap td { overflow: hidden; }
.col-resize-handle {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 6;
}
.col-resize-handle:hover { background: rgba(96,165,250,0.5); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ── 더보기 — 렉의 진짜 원인은 JS 가 아니라 DOM 크기 자체였다(336행을 한 번에
   다 그리면 스크롤 자체가 무겁다). 100건씩 끊어서 그리고 눌러야 더 불러온다. */
.more-row { margin-top: 10px; text-align: center; }

/* ── 완료/미완료 — 큰 숫자 카드가 한 줄을 통째로 차지했다("쓸데없이 공간 차지
   하는거 같다", 2026-08-29) — quick-chips 줄 안에 작은 점+숫자로 합쳤다. */
.chip-stats { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 12px; }
.chip-stats a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-clear); }
.chip-stats a:hover { color: var(--text-bright); }
.chip-stats .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.chip-stats .dot-green { background: #34d399; }
.chip-stats .dot-red { background: #f87171; }

/* ── 로그인 ── 콘텐츠가 아니라 그대로 어두운 화면으로 둔다 (#main 밖). ── */
.login-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.error-msg { color: var(--red); font-size: 11.5px; margin-bottom: 11px; }

/* 담당자 선택 화면 — 비밀번호 입력칸 대신 이름 카드를 눌러 들어간다(사장님,
   2026-08-31: "처음 맨화면이 담당자 관리가 가운대 뜨고 거기서 클릭하면 이창으로
   넘어가게해야겟다"). */
/* 카드 뒤에서 캐릭터가 위로 얼굴을 내미는 무대(사장님, 2026-09-02: "db-map
   로그인화면 보면 여자캐릭터 뒤에 배경으로깔았는데 우리도 cs 캐릭터
   뒤로깔까?") — dbmap login.html 의 .stage/.hero 구성을 그대로 따라가되,
   색은 cs-desk 자기 팔레트(var(--panel) 등)를 쓴다. */
.login-stage { position: relative; width: 300px; }
.login-hero {
  --h: min(4200px, calc(78vh - 170px));
  position: absolute; left: 50%; bottom: 60%; height: var(--h); width: auto;
  margin-bottom: calc(var(--h) * -0.3);
  transform: translateX(-50%);
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.5));
}
.staff-select-box {
  position: relative; z-index: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
  width: 300px;
}
.staff-select-box h1 { text-align: center; margin-bottom: 4px; }
.staff-select-sub { text-align: center; color: var(--text-dim); font-size: 12.5px; margin-bottom: 20px; }
.staff-select-grid { display: flex; flex-direction: column; gap: 10px; }
.staff-select-card {
  position: relative;
  width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.staff-select-card:hover { border-color: var(--blue); background: rgba(96,165,250,0.08); }
.staff-select-name { font-size: 14px; font-weight: 700; color: var(--text-bright); }
.staff-select-role { font-size: 11px; color: var(--text-dim); }

/* 비밀번호 없는 계정 카드의 열쇠 아이콘 — 눌러서 비밀번호로 로그인(사장님,
   2026-09-03: "viewer 조회계정으로들어가서, 뭔가 비밀행위를하면 master
   계정으로바뀌면서 모든권한 다 생기게"). 평소엔 옅게, 눈에 띄지 않게 둔다. */
.staff-select-key {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; line-height: 1; padding: 5px; border-radius: 6px;
  opacity: 0.3; transition: opacity 0.15s, background 0.15s;
}
.staff-select-key:hover { opacity: 1; background: rgba(96,165,250,0.15); }

/* 이름 선택 다음 단계 — 비밀번호 입력(사장님, 2026-09-03: "담당자 누르면
   비밀번호 치고 로그인되어야할꺼같은데, 지금 계정생성시 비번을 만들게되어있잖아") */
.password-step { flex-direction: column; gap: 10px; }
.password-step-name { text-align: center; font-size: 15px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.password-step input[type="password"] {
  width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; color: var(--text-bright); font-size: 14px;
}
.password-step .btn { width: 100%; text-align: center; }

/* 담당자 관리 — 비밀번호 재설정(사장님, 2026-09-03: "비밀번호 재설정 기능도
   만들어줘") — 표 안에서 눌렀을 때만 입력칸이 펼쳐지게 details/summary 사용 */
.pw-reset summary { list-style: none; }
.pw-reset summary::-webkit-details-marker { display: none; }
.pw-reset[open] summary { margin-bottom: 6px; }
.pw-reset-form { display: flex; gap: 6px; }
.pw-reset-form input[type="password"] {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 9px; color: var(--text-bright); font-size: 12.5px; width: 160px;
}

/* ── 자동완성 ── */
.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  max-height: 220px; overflow-y: auto; margin-top: 4px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.12);
}
/* 검색 결과가 없을 때도 이 빈 상자가(그림자 있는 별도 레이어라) 100행마다 계속
   그려지고 있었다(Opus 로 렉 원인 분석, 2026-08-29) — 비어 있으면 아예 그리지 않는다. */
.autocomplete-list:empty { display: none; }
.autocomplete-item { padding: 7px 10px; cursor: pointer; font-size: 12px; }
.autocomplete-item:hover { background: rgba(96,165,250,0.12); }
.autocomplete-item .name { color: var(--text-bright); }
.autocomplete-item .meta { color: var(--text-dim); font-size: 11px; }

.hint { color: var(--text-dim); font-size: 12px; margin-top: 4px; line-height: 1.5; }

/* ── CS 응대 도우미 (AI 질문창) ──────────────────────────────────────
   기본은 접힌 한 줄 — 표를 밀어내리지 않는다. 펼치면 ChatGPT 홈 화면 얼개(가운데
   인사말 + 넓은 입력창 + 눌러 쓰는 예시 칩)를 쓴다(사장님이 ChatGPT 화면을 보여주며
   지시, 2026-08-29). 캐릭터·말풍선 결과 UI(.adv-scene 이하)는 그대로 둔다. */
#assistant {
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}

/* 클로드·챗GPT 홈 화면처럼 — 인사말을 아바타 옆이 아니라 가운데 위로, 세로로
   쌓는다(사장님, 2026-08-30: "왼쪽 글들을 클로드처럼 저렇게 가운데 위에 올릴 수
   있지 않니"). */
.adv-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 14px 10px; text-align: center; }
.adv-hero-greet { font-size: 19px; font-weight: bold; color: var(--text-bright); }
.adv-hero-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* 챗GPT 검색창처럼 얇게 시작해서 입력하는 만큼만 늘어난다(사장님, 2026-08-30:
   "이렇게 얄쌍하게") — rows=1 + JS 자동 늘어남(_assistant_widget.html growQuestion),
   긴 문의를 그대로 붙여넣어도(여러 줄) 그만큼 커진다. */
.adv-input-wrap { max-width: 900px; margin: 0 auto; padding: 0 14px; text-align: center; }
/* 입력창 옆에 가이드 단추, 입력창 안에 보내기 아이콘 — 예전엔 입력창 아래 버튼
   두 개가 줄을 하나 더 차지했다(사장님, 2026-08-30: "쓸떄없는 행이많이줄어들꺼
   같은데" — 가이드는 옆에 붙이고, 물어보기는 아이콘으로 입력창 안에).
   대화창+가이드 버튼을 한 덩어리로 놓고 가운데 정렬하면 버튼 폭만큼 대화창이
   왼쪽으로 밀린다(사장님, 2026-08-30: "대화창을 가운대 기준으로하는게어떄") —
   양옆에 똑같이 늘어나는 빈 칸을 두고 대화창은 그 사이 고정폭 칸에 두면,
   버튼이 있어도 대화창만 정확히 가운데가 된다. */
.adv-input-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr);
  column-gap: 8px; align-items: flex-end;
}
.adv-input-box { position: relative; grid-column: 2; }
#assistant-question {
  width: 100%; resize: none; font-size: 14px; padding: 12px 48px 12px 20px;
  border-radius: 24px; min-height: 46px; max-height: 220px; overflow-y: hidden; line-height: 1.4;
}
.adv-send-btn {
  position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px;
  border-radius: 999px; border: 1px solid var(--blue); background: var(--blue); color: #0f172a;
  font-size: 15px; font-weight: bold; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.adv-send-btn:hover { background: #7db8fb; }
/* align-self:stretch 였을 땐 입력창이 한 줄일 때만 우연히 맞아 보였다 — 문의를
   여러 줄 붙여넣어 입력창이 2줄로 늘어나면 이 버튼도 같이 늘어나 길쭉하게
   찌그러졌다(사장님, 2026-08-30: "메세지보내는게 2줄이되면 모양이망가지네").
   높이를 입력창 한 줄 높이(46px)로 고정하고, 늘어나는 입력창 바닥에 맞춰
   붙여 두면(align-self:flex-end, 보내기 버튼과 같은 기준) 늘어나도 안 찌그러진다. */
.adv-guide-btn {
  grid-column: 3; justify-self: start; align-self: flex-end;
  flex-shrink: 0; white-space: nowrap; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; padding: 0 16px; border-radius: 24px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-clear);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.adv-guide-btn:hover { border-color: var(--blue); color: var(--text-bright); background: rgba(96,165,250,0.08); }
/* "생각하는 중" — dbmap 의 AI 질문창(map.js typeInto/ASK_WAIT)과 같은 느낌으로
   맞췄다(사장님, 2026-08-30: "db-map은 굉장히 자연스러운 애니메이션으로 생각중
   부터해서 차근차근 글자가나오는데 여기는 뚝하고 튀어나와"). 점 3개가 통통 튀고,
   문구가 심심하지 않게 바뀐다. */
#assistant-loading { color: var(--text-dim); align-items: center; justify-content: center; gap: 7px; margin-top: 8px; }
.adv-typing { display: inline-flex; }
.adv-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim);
  animation: advDot 1.2s ease-in-out infinite;
}
.adv-typing i:nth-child(2) { animation-delay: 0.18s; }
.adv-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes advDot {
  0%, 65%, 100% { transform: translateY(0); opacity: 0.4; }
  32% { transform: translateY(-4px); opacity: 1; }
}
#assistant-loading-status { font-size: 12px; font-weight: 500; color: var(--text-dim); margin-left: 2px; }

.adv-examples { max-width: 720px; margin: 16px auto 4px; padding: 0 14px 18px; }
.adv-examples-label { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; text-align: center; }
/* 칩이 많으면 여러 줄로 접혀서 세로 공간을 많이 먹었다(사장님, 2026-08-30:
   "자주나오는문의도 최대한 한줄로만들고") — 한 줄로 두고 넘치면 옆으로 스크롤. */
.adv-chip-row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.adv-chip-row::-webkit-scrollbar { display: none; }
/* 스크롤로 더 볼 칩이 있는데 티가 안 나서 마지막 칩이 그냥 잘린 것처럼
   보였다(사장님, 2026-08-31: "참이길어지면...오른쪽라인에 닿자나. ui적인
   완성도가떨어져") — .lane-row.has-more 와 같은 이유로 같은 방식을 쓴다. */
.adv-chip-row-wrap { position: relative; }
.adv-chip-row-wrap.has-more::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, transparent, var(--panel));
  pointer-events: none;
}
.adv-chip {
  flex-shrink: 0; white-space: nowrap;
  font-size: 11.5px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-clear);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.adv-chip:hover { border-color: var(--blue); color: var(--text-bright); background: rgba(96,165,250,0.08); }
/* CS 요약은 6개만 먼저 보이고, "더보기"를 누르면 나머지가 나온다(사장님,
   2026-08-30: "펼치기 버튼 만들어서 펼치면 자주묻는질문들 더나오게 해줘") —
   한 줄 스크롤 대신 여러 줄로 펼쳐서 한눈에 다 보이게 한다. */
.adv-chip-row.expanded { flex-wrap: wrap; overflow-x: visible; }
/* 칩 줄 "안"에 뒀더니 그 줄이 옆으로 스크롤되는 줄이라 화면 끝까지 스크롤해야
   보였다(사장님, 2026-08-30: "자주묻는질문 열리는거 안만들었어?" — 실제로는
   있었는데 숨어 있었다) — 줄 밖, 가운데 아래에 항상 보이게 뺀다. */
.adv-chip-more {
  display: block; margin: 8px auto 0; white-space: nowrap; font-size: 11.5px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px dashed var(--border); background: transparent; color: var(--text-dim);
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.adv-chip-more:hover { border-color: var(--blue); color: var(--text-bright); }

.adv-scene { display: flex; gap: 16px; margin: 4px 14px 18px; align-items: flex-start; }
/* 허벅지 아래(다리·발)가 96px 폭에서 어정쩡하게 잘려 보인다는 지적(사장님,
   2026-09-03: "뒤에 cs캐릭터 허벅지밑으로 없애줘. 그라데이션으로하든지.") —
   이미지 자체를 다시 만들지 않고 CSS 마스크로 아래쪽을 페이드시킨다. */
.adv-actor {
  width: 96px; flex-shrink: 0; border-radius: 8px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
}
.adv-talkwrap { flex: 1; min-width: 0; }
.adv-talk {
  position: relative;
  background: #FEE500;
  color: #17171B;
  border-radius: 22px;
  padding: 16px 40px 12px 20px;
}
.adv-talk::after {
  content: ""; position: absolute; left: -10px; top: 28px;
  width: 0; height: 0; border-style: solid; border-color: transparent;
  border-top-width: 10px; border-bottom-width: 10px; border-right-width: 12px;
  border-right-color: #FEE500;
}
.adv-plate {
  position: absolute; top: -13px; left: 14px;
  padding: 3px 12px; border-radius: 999px;
  background: #1e293b; color: #FEE500;
  font-size: 11px; font-weight: 800;
}
/* 답이 뜬 뒤에도 닫을 방법이 없었다(사장님, 2026-08-30: "대화창이 나오고 나서
   닫기가없네") — 눌러 접으면 다시 빈 입력 상태로 돌아간다. */
.adv-result-close {
  position: absolute; top: 10px; right: 10px; background: transparent; border: none;
  color: #17171B; opacity: 0.45; font-size: 18px; line-height: 1; cursor: pointer; padding: 3px 7px;
}
.adv-result-close:hover { opacity: 0.85; }
.adv-category { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.adv-internal { font-size: 12.5px; color: #3f3f10; margin-bottom: 10px; white-space: pre-wrap; }
.adv-answer-box { background: rgba(0,0,0,0.06); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.adv-answer-head { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; margin-bottom: 6px; }
#assistant-answer { white-space: pre-wrap; font-family: inherit; font-size: 13px; margin: 0; }
.adv-warning { color: #7a1c1c; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.adv-decision {
  background: rgba(220,38,38,0.15); border: 1px solid #dc2626; color: #7a1c1c;
  border-radius: 6px; padding: 7px 10px; font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.adv-footnote { font-size: 11px; color: #6b6b1a; margin-bottom: 10px; }
.adv-feedback { display: flex; gap: 8px; }
.adv-feedback button { font-size: 11.5px; padding: 5px 10px; }

/* ── 빠른 입력 행 (표 맨 위, 시트처럼 바로 쓴다) ── */
.quick-add-row td {
  background: rgba(96,165,250,0.08);
  border-bottom: 1px solid var(--blue);
  padding: 6px 7px;
  vertical-align: top;
  white-space: normal;
}
.quick-add-row input, .quick-add-row select {
  font-size: 12px;
  padding: 5px 7px;
  width: 100%;
}
.quick-add-row .btn { font-size: 11.5px; padding: 5px 10px; white-space: nowrap; }

/* ── 표 안 인라인 편집 — 채널톡처럼 평소엔 그냥 글자, 눌러야 편집 칸으로 바뀐다
   (사장님 지적, 2026-08-29: "채널톡은 그냥 사각형이고 클릭하면 저렇게 수정하게
   되거든 — 행과 열 안에 또 둥근 박스를 만들지 말고"). 예전엔 반대로 "어디를
   입력해야 할지 모르겠다"는 지적으로 항상 박스를 보이게 했었는데, 이번 지적으로
   다시 뒤집었다 — 박스-안-박스가 오히려 더 어수선하다는 판단. 완전히 안 보이게
   하면 처음 쓰는 사람이 어디가 편집 가능한지 못 찾을 수 있어, hover 때는 옅은
   배경만 살짝 비쳐서 "여기 누르면 된다"는 최소한의 힌트만 남긴다. */
.inline-edit {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  /* 완료·처리중처럼 띠(행 배경)가 밝아진 행은 --row-text 로 검은 글씨를 내려보낸다
     (그 tr 의 인라인 style 에서 설정, 사장님: "검은글씨로 해도되겠는데") — 지정 안 된
     행(보류·취소·기본)은 그대로 밝은 글자를 쓴다. */
  color: var(--row-text, var(--text-clear));
  width: 100%;
  padding: 5px 7px;
  font-size: 13px;
  /* 칸보다 긴 값은 "..."로 접는다(input 은 이렇게 되지만, 네이티브 select 는
     overflow·text-overflow 를 아예 무시한다 — 직접 확인함, !important 를 줘도
     안 먹힌다. 대분류·소분류처럼 select 가 잘리는 칸은 여기 대신 열 너비를
     넓혀서 고쳤다). textarea 는 아래 textarea.autogrow 규칙이 더 구체적이라
     (element+class) 이 규칙을 덮어써서 영향 없다. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* transition 을 뺐다(100건짜리 표에서 스크롤 렉의 실제 원인 — Opus 로 분석, 2026-08-29):
   가만히 있는 마우스 커서 아래로 행이 계속 바뀌며 지나가면 매 칸마다 hover 진입/이탈이
   발동하고, border-color·box-shadow·background 세 가지가 동시에 150ms 씩 애니메이션을
   돌리며 겹쳐서 스크롤 내내 페인트가 끝나지 않았다. 즉시 바뀌어도 "눌러보면 된다"는
   힌트로는 충분하다. */
.inline-edit:hover { background: var(--input-bg); }
.inline-edit:focus {
  background: var(--input-bg); border-color: var(--blue); outline: none;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
/* 내용·처리내용·비고 — 고정 150px 는 짧은 글이 대부분인데도 행을 늘 위아래로
   넓게 만들어서(사장님, 2026-08-30: "처리내용,내용,비고 중 가장긴거에 맞추자
   지금은 전체적으로나 너무 위아래 넓어") 없앴다. 높이는 JS(cases_list.html)가
   그 행의 셋 중 실제로 가장 긴 내용에 맞춰 정확히 계산해서 넣는다 — 여기서는
   시작값만 잡아 준다. min-width 는 auto 테이블 레이아웃이 textarea 최소 너비를
   0으로 보고 칸을 찌그러뜨리는 버그 때문에 필요했었는데, 지금은
   table-layout:fixed + colgroup 이 폭을 정확히 정해서 필요 없다(넣으면 오히려
   좁은 칸에서 오른쪽이 잘리는 버그가 됐었다). */
textarea.autogrow {
  resize: vertical; line-height: 1.4; font-family: inherit;
  white-space: normal; overflow-y: hidden; text-overflow: clip;
}
/* 불량 클레임 "클레임 내용" — 늘어나는 textarea 였다가(2026-08-30) 행마다 줄
   수가 달라 수량 등 다른 칸과 줄이 안 맞는 문제로 이어져(사장님, 2026-08-30:
   "줄안맞는다. 수량부터 선이 안맞네"), CS 접수와 같은 한 줄 클램프 + 팝업 편집
   방식으로 바꿨다 — 아래 .case-cell 계열 스타일을 그대로 같이 쓴다. */
.cell-clamp-1 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}

/* ── CS 접수 표 — 클릭한 셀 하나만 편집기가 된다(챗지피티 성능 검토, 2026-08-30).
   평소엔 .cell-display 로 그냥 글자만 보여준다 — .inline-edit 처럼 hover 때만 옅은
   배경으로 "여기 누르면 된다"는 힌트만 준다(항상 박스면 "박스 안에 박스"라는
   지적을 다시 받는다). ── */
/* 완료(대부분의 행)는 상태별 색 띠가 따로 없다 — 그 기본값을 행마다 인라인으로
   반복하는 대신(321/336행이 똑같은 값을 반복했었다) 여기 한 번만 둔다(사장님
   지적, 2026-08-30: "완료되는거면 background: #1e293b 이거 구지 쓸필요가있을까"). */
.cases-table-wrap tbody tr.status-row { background: var(--panel); }
.case-cell { position: relative; cursor: pointer; border-radius: 5px; }
.case-cell:hover .cell-display { background: var(--input-bg); }
.cell-display {
  padding: 5px 7px; border-radius: 5px; color: var(--row-text, var(--text-clear));
  min-height: 17px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.cell-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* 상호명이 dbmap 거래처와 연결됐는지 보여주는 작은 표시(사장님, 2026-09-01:
   "cs 접수쪽에 그럼 거래처코드도 나오는 칸이 필요한건가") — 칸을 새로 두지 않고
   상호명 옆에 아이콘 하나만 붙인다. */
.clinic-linked { font-size: 11px; opacity: 0.85; }
/* 자동으로 하나로 못 고른 중복 거래처 후보 — 확실한 연결(파란 🔗)과 구분되게
   경고색으로 다르게 보여준다(사장님, 2026-09-01: "중복거래처같은경우에는
   두개든 세개든 거래처 다연결해버려야겟다"). */
.clinic-linked-multi { font-size: 11px; color: var(--yellow); font-weight: 700; cursor: help; }
/* 예전엔 이 페이드를 mask-image 로 넣었다가 셀 클릭마다 눈에 띄게 렉이 생겨서
   걷어냈다(사장님, 2026-08-30: "렉문제야" — mask-image 는 걸린 요소마다 GPU 합성
   레이어를 새로 만들어서, 표 안 아무 데나 DOM이 바뀔 때마다 전부 다시 합성해야
   했던 것으로 보인다). 이번엔 그냥 배경색으로 흐려지는 그라데이션(::after) 이라
   레이어를 새로 만들지 않는다 — 같은 문제가 재발하진 않을 걸로 보이지만, 실제
   클릭 반응성은 이 테스트 환경(화면을 안 그림)에선 확인이 안 되니 사장님 실제
   화면에서 한 번 봐 주셔야 한다. */
.case-cell.case-cell-long[data-clamp-overflow="1"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: linear-gradient(to bottom, transparent, var(--row-bg, var(--panel)) 65%);
  pointer-events: none; z-index: 1;
}

/* ── 긴 내용(내용/처리내용/비고) 편집 팝업 — 표 자체 행 높이는 안 건드리고 위에
   따로 띄운다. 표 안에서 칸을 늘리면 그 아래 수백 개 행이 밀려서 다시 그려야
   하는데(사장님 지적, 2026-08-30: "내용많은거 클릭하면 렉이걸리네"), 팝업은 표
   레이아웃을 전혀 안 바꾸니 그 비용이 없다. 4줄 안 넘는 짧은 칸은 지금처럼 표
   안에서 바로 편집한다 — 이 팝업은 "펼치기"가 뜨는 긴 칸에서만 연다.

   여러 개를 동시에 띄워서 비교할 수 있게 검은 배경 없이 각자 독립된 창으로
   띄운다(사장님, 2026-08-30: "여러 창을 띄울수있어서 비교해볼수있지않을까") — 그래서
   id 가 아니라 class 다(칸마다 하나씩 따로 생긴다). 드래그·리사이즈 가능. ── */
.cell-popup-box {
  position: fixed;
  width: 420px; max-width: 92vw; min-width: 280px;
  min-height: 220px; max-height: 90vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; padding: 14px;
  resize: both; overflow: auto;
}
.cell-popup-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
  cursor: move; /* 이 줄을 손잡이 삼아 창 전체를 옮긴다 */
}
.cell-popup-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-popup-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-bright); }
.cell-popup-sub {
  font-size: var(--fs-xs); color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-popup-close {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.cell-popup-close:hover { color: var(--text-bright); background: var(--input-bg); }
.cell-popup-textarea {
  flex: 1; min-height: 140px; resize: none; font-family: inherit; font-size: var(--fs-sm);
  line-height: 1.5; color: var(--text-bright); background: var(--input-bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px;
}
/* 내용 ‹ 처리내용 › 비고 — 같은 건의 세 칸을 창 하나로 넘겨보기(사장님, 2026-08-30:
   "넘겨가면서 확인가능하잖아"). 제목 옆(글자 길이가 매번 달라 버튼 위치가 계속
   바뀌었다 — 사장님, 2026-08-30: "글자크기에따라 버튼위치가바뀌닌깐") 대신 하단
   왼쪽에 고정해서, 확인/취소(하단 오른쪽)와 자리가 서로 안 바뀐다. */
.cell-popup-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-shrink: 0; }
.cell-popup-foot-nav { display: flex; gap: 6px; }
.cell-popup-foot-actions { display: flex; gap: 8px; }
.cell-popup-nav {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text-clear); cursor: pointer; font-size: 17px; font-weight: 700;
  line-height: 1; border-radius: 6px;
}
.cell-popup-nav:hover { color: var(--text-bright); background: var(--border); }
.case-cell .cell-editor { width: 100%; }
/* resize 손잡이(모서리 드래그)를 뺐다 — 어차피 입력할 때마다 JS 가 내용에 맞춰
   높이를 계속 늘려주니, 손잡이가 있으면 "수동으로도 조절해야 하나" 하는 혼란만
   준다(사장님 지적, 2026-08-30: "이거쓰지말고 그냥 행 줄전체를 늘리는거 쓰면
   안되니"). */
.case-cell textarea.cell-editor { resize: none; }
.cell-editor-autocomplete { position: relative; }
.cell-editor-autocomplete .autocomplete-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; }
/* 저장 중/성공/실패 — 색만으로 신호를 준다(새 텍스트·토스트 없이). */
.case-cell.is-saving { opacity: 0.6; }
.case-cell.is-saved { box-shadow: inset 0 0 0 1px var(--green); }
.case-cell.is-error { box-shadow: inset 0 0 0 1px var(--red); }

/* ── 실행 취소·삭제 되돌리기 (성능·UX 개선 3단계, 2026-08-30) — 새 토스트 UI
   없이, 이미 있던 "펼치기" 링크와 같은 자리·같은 느낌으로 잠깐 보여준다. ── */
.cell-undo-btn {
  display: block; margin-top: 2px; background: transparent; border: none; padding: 0;
  color: var(--blue); font-size: 11px; cursor: pointer;
}
.delete-undo-bar {
  text-align: center; color: var(--text-dim); padding: 10px; border-right: none;
}
.delete-undo-bar .delete-undo-btn {
  background: transparent; border: none; color: var(--blue); font-weight: 600;
  font-size: 12.5px; cursor: pointer; margin-left: 6px;
}

/* ── 가이드 드로어 (base.html) — 페이지 이동 없이 옆에서 연다. 이것도 콘텐츠(가이드
   글을 읽는 곳)라 #main 과 같은 다크·프로 계열로 맞춘다 — 말풍선(노란색)은 어느
   배경에서도 그대로 잘 어울려 그대로 둔다. ──────────────────────────────────── */
#guide-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
  z-index: 90;
}
#guide-drawer-overlay.open { opacity: 1; pointer-events: auto; }

#guide-drawer {
  --bg: #0b1120;
  --panel: #141b2d;
  --line: #232f47;
  --border: #2d3b58;
  --text-dim: #8492a8;
  --text: #94a3b8;
  --text-clear: #cbd5e1;
  --text-bright: #f1f5f9;
  --yellow: #fbbf24;
  --input-bg: #1a2338;

  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--bg); color: var(--text); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
  transform: translateX(100%); transition: transform 0.22s;
  z-index: 91; display: flex; flex-direction: column; padding: 16px;
  font-size: 13px;
}
#guide-drawer.open { transform: translateX(0); }
#guide-drawer a:not(.btn) { color: #60a5fa; }
.gd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.gd-title { font-size: 14px; color: var(--text-bright); }
#gd-search { width: 100%; margin-bottom: 11px; flex-shrink: 0; }
#gd-body { flex: 1; overflow-y: auto; }
.gd-foot { margin-top: 11px; flex-shrink: 0; }
.gd-foot .btn { width: 100%; text-align: center; }

.gd-section-title {
  font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
  margin: 15px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.gd-section-title:first-child { margin-top: 0; }
details.gd-doc, details.gd-major, details.gd-tpl { border-bottom: 1px solid var(--line); }
details.gd-doc summary, details.gd-major summary, details.gd-tpl summary {
  padding: 8px 2px; font-size: 12.5px; color: var(--text-clear); cursor: pointer;
}
details.gd-major summary { font-weight: bold; color: var(--text-bright); }
details.gd-tpl { margin-left: 8px; border-bottom: 1px dashed var(--line); }
details.gd-tpl summary { font-size: 12px; }
.gd-tpl-body { padding: 0 2px 11px; font-size: 12px; color: var(--text-dim); }
.gd-tpl-body b { display: block; color: var(--text); margin-top: 6px; font-size: 11px; }
.gd-tpl-body .wrap { white-space: pre-wrap; margin-top: 3px; color: var(--text-clear); }
.gd-tpl-answer-head { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }
.gd-tpl-answer-head .btn { font-size: 11px; padding: 3px 9px; }

/* 문서(process·return_policy) 렌더링 — 노션처럼 읽히게 */
.doc-view { padding: 10px 2px 16px; font-size: 13px; line-height: 1.65; color: var(--text-clear); }
/* 제목(h3=#)·부제(h4=##)·본문(13px)·주석(h5=###, figcaption) 크기를 뚜렷하게 단계 지어
   구분한다 — 이전엔 h4 와 본문이 똑같이 13px 라 부제가 본문에 묻혀 보였다. */
.doc-view .doc-h3 { font-size: 16px; font-weight: 700; color: var(--text-bright); margin: 20px 0 9px; }
.doc-view .doc-h3:first-child { margin-top: 0; }
.doc-view .doc-h4 { font-size: 13.5px; font-weight: 700; color: var(--text-bright); margin: 14px 0 6px; }
.doc-view .doc-h5 { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .02em; margin: 10px 0 5px; }
.doc-view .doc-list { margin: 3px 0 10px 18px; }
.doc-view .doc-list li { margin-bottom: 4px; }
.doc-view .doc-p { margin-bottom: 10px; }
.doc-view .doc-hr { border: none; border-top: 1px solid var(--line); margin: 15px 0; }
/* 표 블록(사장님, 2026-08-30: "표랑 구분선 이런거 다 쓸수있께해줭") — 굵기·색은
   기존 doc-view 톤에 맞추고, 칸마다 서식 없이 순수 텍스트만 담는다. */
.doc-view .doc-table { border-collapse: collapse; margin: 4px 0 10px; width: 100%; }
.doc-view .doc-td { border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; vertical-align: top; }
/* URL 자동 링크(사장님, 2026-08-30: "링크는 하이퍼링크로잡아줘") — 편집 중인
   블록 안에서는 클릭 한 번은 커서만 놓고(브라우저 기본), Ctrl/Cmd+클릭이나
   가운데 버튼 클릭으로 열린다 — 실제 노션도 편집 중인 페이지에서 똑같다. */
.doc-link { color: var(--blue); text-decoration: underline; }
.doc-link:hover { color: var(--text-bright); }
.doc-view .doc-quote {
  border-left: 3px solid var(--yellow); padding: 5px 11px; margin: 10px 0;
  background: rgba(180,83,9,0.06); color: var(--text);
}
.doc-view strong { color: var(--text-bright); }

/* 노션 토글(접기/펼치기) 구조 그대로 — 내용은 그대로 두고 접었다 펼 수만 있게 */
.doc-view details.doc-toggle {
  margin: 4px 0 10px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.015);
}
.doc-view details.doc-toggle > summary {
  list-style: none; cursor: pointer; padding: 7px 12px; user-select: none;
}
.doc-view details.doc-toggle > summary::-webkit-details-marker { display: none; }
.doc-view details.doc-toggle > summary::before {
  content: '▸'; display: inline-block; margin-right: 7px; color: var(--text-dim);
  transition: transform 0.15s;
}
.doc-view details.doc-toggle[open] > summary::before { transform: rotate(90deg); }
.doc-view details.doc-toggle > summary h3, .doc-view details.doc-toggle > summary h4,
.doc-view details.doc-toggle > summary h5 { display: inline; margin: 0; }
.doc-view .doc-toggle-body { padding: 2px 12px 10px 28px; }
.doc-view .doc-toggle-body .doc-toggle { margin-left: 0; }

/* 노션 원문의 스텝별 스크린샷 — 이미지 자체가 핵심 정보라 크게, 테두리로 캡처본임을 표시 */
.doc-view .doc-figure {
  margin: 8px 0 14px; padding: 0;
}
.doc-view .doc-img {
  max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px;
  display: block; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.doc-view .doc-figure figcaption {
  font-size: 11.5px; color: var(--text-dim); margin-top: 4px;
}

/* 이미지 크기 조절(노션처럼, 2026-08-30) — 편집 중일 때만(.doc-figure-resizable)
   모서리에 손잡이가 생긴다. 읽기 전용 화면(.doc-view 단독, 가이드 드로어 등)은
   이 클래스가 안 붙으니 그대로 block 레이아웃을 유지한다. */
.doc-figure-resizable { position: relative; display: inline-block; max-width: 100%; }
.doc-img-resize-handle {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px;
  background: var(--blue); border: 2px solid var(--panel); border-radius: 3px;
  cursor: nwse-resize; opacity: 0;
}
.doc-figure-resizable:hover .doc-img-resize-handle { opacity: 1; }
body.resizing-image, body.resizing-image * { cursor: nwse-resize !important; user-select: none !important; }

/* ── 가이드 문서 블록 에디터(노션처럼, 2026-08-30) ──────────────────────
   "보기"/"고치기" 를 나누지 않는다 — 블록을 그냥 눌러서 그 자리에서 고친다.
   블록마다 왼쪽에 "+"(바로 아래에 블록 추가)와 "⠿"(누르면 메뉴, 끌면 순서
   변경)가 hover 때만 보인다 — 실제 노션 화면 그대로(사장님 지시, 2026-08-30).
   항상 보이면 어수선하다(이 세션 내내 반복된 "박스 안에 박스" 지적과 같은 이유). */
.doc-editor { padding-top: 4px; }
.doc-block-row {
  position: relative; display: flex; align-items: flex-start; gap: 4px;
  border-radius: 5px; margin: 0 -6px; padding: 2px 6px 2px 38px;
}
.doc-block-row:hover { background: rgba(255,255,255,0.03); }
.doc-block-row.dragging { opacity: 0.35; }
.doc-block-row.drag-over-top { box-shadow: inset 0 2px 0 var(--blue); }
.doc-block-row.drag-over-bottom { box-shadow: inset 0 -2px 0 var(--blue); }
.doc-block-content { flex: 1; min-width: 0; }
.doc-block-controls {
  position: absolute; left: 4px; top: 2px; opacity: 0; transition: opacity 0.1s;
  display: flex; gap: 2px;
}
.doc-block-row:hover .doc-block-controls { opacity: 1; }
.doc-block-add-btn, .doc-block-drag-handle {
  background: transparent; border: none; color: var(--text-dim);
  border-radius: 4px; width: 16px; height: 22px; font-size: 13px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.doc-block-add-btn:hover, .doc-block-drag-handle:hover { background: var(--input-bg); color: var(--text-bright); }
.doc-block-drag-handle { cursor: grab; }
.block-editable {
  outline: none; border-radius: 4px; padding: 1px 3px; margin: -1px -3px;
  cursor: text;
}
.block-editable:hover { background: rgba(255,255,255,0.03); }
.block-editable:focus { background: var(--input-bg); }
.block-editable:empty::before { content: attr(data-placeholder); color: var(--text-dim); }
.doc-add-row { margin: 2px 0 6px; }
.doc-add-inline-btn { font-size: 11px; padding: 3px 9px; color: var(--text-dim); }
.doc-table-wrap { margin: 4px 0 10px; }
.doc-table-wrap .doc-table { margin-bottom: 6px; }
.doc-td[contenteditable] { cursor: text; }
.doc-td[contenteditable]:focus { background: var(--input-bg); outline: none; }
.doc-table-controls { display: flex; gap: 6px; }
.doc-table-controls .btn { font-size: 11px; padding: 3px 9px; color: var(--text-dim); }

/* 타입 선택·블록 메뉴 팝업 — 아주 작은 드롭다운, body 에 바로 붙여서 표 등 다른
   요소의 overflow:hidden 에 잘리지 않게 한다(select 가 overflow 를 무시하는 것과
   반대로, 이건 진짜 div 라 우리가 위치를 완전히 통제해야 한다). */
.doc-popup {
  position: absolute; z-index: 50; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.3); padding: 4px; min-width: 130px;
  display: flex; flex-direction: column;
}
.doc-popup button {
  background: transparent; border: none; color: var(--text-clear); text-align: left;
  padding: 6px 9px; font-size: 12.5px; border-radius: 4px; cursor: pointer;
}
.doc-popup button:hover { background: var(--input-bg); color: var(--text-bright); }

/* ── 스마트 뷰(자주 쓰는 조건 한 번에) — Zendesk 류 헬프데스크의 "저장된 필터" 감각 ── */
.quick-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.quick-chips .btn { font-size: 11.5px; padding: 6px 12px; border-radius: 999px; }
.quick-chips .btn.active { background: var(--blue); border-color: var(--blue); color: #0f172a; font-weight: bold; }

/* ── 빠른 메모 — 통화 중 두서없이 바로 적어 두는 자리 (사장님 지적) ── */
#quick-memo {
  display: flex; gap: 9px; margin-bottom: 12px; align-items: center;
  background: rgba(180,83,9,0.06); border: 1px dashed var(--yellow);
  border-radius: 6px; padding: 9px 11px;
}
#quick-memo label { color: var(--yellow); font-size: 11.5px; margin: 0; white-space: nowrap; }
#quick-memo input { flex: 1; }

/* 정식 CS 접수 건이 아니라 그냥 편하게 적었다 지웠다 하는 메모 목록(사장님,
   2026-08-29: "밑에 글 생겼다가 편하게 지워야하면 지우고") — 알약처럼 가볍게. */
#quick-memo-list { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
#quick-memo-list li {
  display: flex; align-items: center; gap: 8px; max-width: 420px;
  background: var(--panel); border: 1px dashed var(--yellow);
  border-radius: 999px; padding: 5px 6px 5px 13px; font-size: 12px;
}
#quick-memo-list .qm-text { color: var(--text-clear); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quick-memo-list .qm-meta { color: var(--text-dim); font-size: 10.5px; white-space: nowrap; }
#quick-memo-list .qm-delete {
  background: transparent; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 999px; line-height: 1;
}
#quick-memo-list .qm-delete:hover { background: rgba(248,113,113,0.16); color: var(--red); }

/* ── 빠른입력 행 — "여기 쓰는 칸이다" 신호를 더 뚜렷하게 (사장님 지적: 클레임 화면에서
   입력 가능한 줄인지 안 보임) ── */
.quick-add-row td:first-child { border-left: 3px solid var(--blue); }
.quick-add-hint { font-size: 11px; color: var(--blue); margin-bottom: 6px; }

/* ── AI 응대 도우미 — 접었다 펼 수 있게. 안 쓸 땐 한 줄만 차지해서 표가 위로 올라온다
   (사장님 지적: "가이드/AI 패널이 표까지 밀어내려서 스크롤해야 한다") ── */
#assistant { padding: 0; overflow: hidden; }
#assistant-toggle {
  width: 100%; text-align: left; background: transparent; border: none;
  color: var(--text-clear); font-size: 12.5px; padding: 12px 16px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
#assistant-toggle:hover { color: var(--text-bright); }
#assistant-panel { display: none; padding: 0 0 6px; }
#assistant.open #assistant-panel { display: block; }

/* ── 보고서 — 핵심 지표 카드 ──
   카드마다 부제(kpi-sub) 유무가 달라 높이가 들쭉날쭉했다(사장님 지적, 2026-08-29) —
   flex column + 최소 높이로 다섯 카드의 키를 맞춘다. */
.kpi-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); align-items: stretch; }
.kpi-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 13px 18px; min-width: 128px; min-height: 82px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.kpi-tile.kpi-claim { border-color: rgba(220,38,38,0.3); }
.kpi-label { font-size: var(--fs-2xs); color: var(--text-dim); margin-bottom: 5px; }
/* tabular-nums — 1초마다 바뀌는 시계와 마찬가지로, 숫자 폭이 들쭉날쭉하면 카드가
   미세하게 흔들리는 것처럼 보인다. 크기는 --fs-xl 토큰(24px)으로 맞춘다. */
.kpi-value { font-size: var(--fs-xl); color: var(--text-bright); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-unit { font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim); margin-left: 2px; }
.kpi-sub { font-size: var(--fs-2xs); color: var(--text-dim); margin-top: 4px; }
.kpi-delta { display: inline-block; margin-left: 4px; font-weight: 700; }
.kpi-delta.up { color: var(--green); }
.kpi-delta.down { color: var(--red); }

/* ── 그래프보다 먼저 봐야 하는 표 — LOT 반복 클레임처럼 "실제로 조치할 근거"를
   눈에 띄게 담는 카드 (사장님 지적: 읽어야 하는 내용이 그래프보다 아래로 밀려남,
   2026-08-29). ── */
.report-highlight {
  background: var(--panel); border: 1px solid rgba(220,38,38,0.3); border-left: 4px solid #dc2626;
  border-radius: var(--radius-md);
  padding: 4px 18px 14px; margin-bottom: 20px;
}
.report-highlight h2 { margin-top: 14px; }

/* ── 월말분석보고서(사장님, 2026-09-02) — 경고색(빨강)은 안 어울려서 파란
   테두리로 따로 준다. ── */
#mr-box { border-color: rgba(59,130,246,0.3); border-left-color: var(--blue); }
.mr-field { margin: 10px 0; }
.mr-field label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text-clear); }
.mr-field textarea, .mr-field input[type="text"] { width: 100%; max-width: 760px; }
#mr-narrative { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.mr-compare-table { margin: 4px 0 16px; }
.mr-compare-table td.left { text-align: left; }

/* ── 범례 (완료/미완료 2계열 — 색만으로 구분하지 않는다) ── */
.chart-legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 11.5px; color: var(--text-clear); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── 순위 막대 (대분류별·담당자별·반품유형별) — 표 대신 비중을 바로 보여준다 ── */
.rank-bars { max-width: 560px; margin-bottom: 8px; }
.rank-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.rank-label { width: 150px; flex-shrink: 0; font-size: 12px; color: var(--text-clear); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track { flex: 1; height: 16px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; }
.rank-fill { height: 100%; border-radius: 4px; }
.rank-value { width: 92px; flex-shrink: 0; font-size: 11.5px; color: var(--text-dim); }

/* ── 상세 표 접기 — 그래프와 같은 자료를 또 늘어놓지 않는다 ── */
/* 폭이 고정된 표를 좁은 화면에 그냥 두면 칸이 눌리고 주소 같은 긴 글자가
   행마다 뒤엉켜 보인다(사장님, 2026-09-03: "거래처도보니깐 모바일에서
   주소가 막 행이몰려있드만") — 표만 가로로 스크롤되게 감싼다(페이지
   전체가 가로로 밀리지 않게, .cases-table-wrap 등과 같은 방식). */
.table-wrap { overflow-x: auto; }

.report-detail { margin: 18px 0; }
.report-detail > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-dim); padding: 9px 0;
  border-top: 1px solid var(--line);
}
.report-detail > summary:hover { color: var(--text-clear); }

/* ── 보고서 — 그래프를 카드에 담아 2열로 (시트의 대시보드 배치와 같은 결) ── */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--panel); border: 1px solid var(--line); padding: 18px;
}
.chart-card h2 { margin: 0 0 11px; }
.donut-legend { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-clear); margin-top: 11px; }
.donut-legend .legend-item { justify-content: space-between; }

/* ══ CS 요약 — 메인 대시보드 ═════════════════════════════════════════════
   (사장님, 2026-08-30: "그걸 메인화면으로 쓸꺼야" / brief.dbmall.co.kr 참고 —
   실시간 시계·시간대 배지·카드형 레이아웃.)

   화면을 붙여 가며 키우다 보니 섹션마다 여백·제목 모양이 제각각이 됐다(사장님,
   2026-08-30: "정신이하나도없네"). 아래는 그걸 한 벌의 규칙으로 다시 짠 것이다.
     ① 세로 리듬 — 섹션 사이는 --sp-6, 섹션 안은 --sp-3 하나로만 쓴다.
     ② 제목 — 화면의 모든 구획이 .sec-head 한 종류(색 막대+제목+부연+오른쪽 링크).
     ③ 시선 순서 — 시계 → AI 도우미 → 오늘 할 일 → 지표 → LOT → 지난 칸반.
        지표(전체 누계)를 할 일보다 위에 두면 "오늘 뭘 해야 하나"가 아니라
        숫자가 먼저 눈에 든다 — 이 화면의 목적과 반대라 순서를 뒤집었다.
   ══════════════════════════════════════════════════════════════════════ */

/* 섹션 사이 간격은 각 섹션이 스스로 책임진다 — 안쪽 요소마다 margin-bottom 을
   따로 주다 보니 24/20/18px 로 흩어졌던 게 어긋남의 실제 원인이었다. */
.dash-sec { margin-bottom: var(--sp-6); }
.dash-sec:last-child { margin-bottom: var(--sp-4); }

/* ── 섹션 제목 — 맨 h2 로는 "여기서부터 새 이야기"라는 신호가 너무 약했다.
   왼쪽 색 막대로 시작점을 찍고, 부연과 바로가기 링크까지 한 줄에 고정한다. */
.sec-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.sec-head h2 {
  margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--text-bright);
  display: flex; align-items: center; gap: var(--sp-2);
}
.sec-head h2::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px;
  background: var(--blue); flex-shrink: 0;
}
/* "처리해야 할 것" / "최근 1주일 현황" 탭(사장님, 2026-08-31: "토글버튼으로 두개
   누르면 바꿔서 볼수잇는 폼으로하면되지않을까 보고싶은걸로") — .sec-head 의
   밑줄(border-bottom) 위에 활성 탭의 파란 밑줄이 겹치도록 padding/margin 을
   맞춘다(흔한 "언더라인 탭" 기법). */
.dash-tabs { align-items: flex-end; gap: var(--sp-4); }
.dash-tab-btn {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 4px 2px calc(var(--sp-2) + 1px); margin-bottom: calc(-1 * var(--sp-2) - 1px);
  font-size: var(--fs-md); font-weight: 700; color: var(--text-dim); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dash-tab-btn.active { color: var(--text-bright); border-bottom-color: var(--blue); }
.dash-tab-btn:hover { color: var(--text-bright); }
.dash-view-subhead { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.sec-head-warn h2::before { background: var(--red); }
.sec-note { font-size: var(--fs-2xs); color: var(--text-dim); }
.sec-link { margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; flex-shrink: 0; }
/* 접기·크기 초기화 — 계정에 저장된 상태를 만지다가 원래대로 되돌리고 싶을 때
   (사장님, 2026-08-30: "각 위치 초기화버튼같은거 각 오른쪽위에붙고"). */
.dash-reset-btn {
  margin-left: auto; font-size: var(--fs-2xs); color: var(--text-dim); white-space: nowrap; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 3px 10px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.dash-reset-btn:hover { border-color: var(--blue); color: var(--text-bright); }

/* ── 머리줄 — 화면 이름과 지금 시각을 한 줄에. 시계·배지가 세로로 쌓여 있으면
   그것만으로 한 층을 차지해서, AI 도우미까지 합쳐 첫 화면이 다 찼었다. */
.dash-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.dash-topbar h1 { margin: 0; }
.dash-topbar h1 + .hint { margin: 3px 0 0; }
.dash-clock { display: flex; align-items: center; gap: var(--sp-3); }
.dash-daypart {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--blue);
  background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.3);
  padding: 4px 11px; border-radius: var(--radius-pill);
}
/* 지금 구간이 얼마나 남았는지 배지 밑에 카운트다운 + 진행률 바로 보여준다
   (사장님, 2026-08-31: brief.dbmall.co.kr 참고 — "점심시간으로 나오고 아래
   로딩바도있는데, 우리 쪽에는 없네"). 주말엔 다음 구간 자체가 없어 숨긴다. */
.dash-focus { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.dash-focus.no-progress .dash-focus-meta,
.dash-focus.no-progress .dash-focus-bar { display: none; }
.dash-focus-meta { display: flex; align-items: baseline; gap: 6px; }
.dash-focus-time { font-size: var(--fs-sm); font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.dash-focus-sub { font-size: var(--fs-2xs); color: var(--text-dim); }
.dash-focus-bar { width: 100%; height: 4px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.09); overflow: hidden; }
.dash-focus-bar i { display: block; height: 100%; width: 0%; background: var(--yellow); border-radius: var(--radius-pill); transition: width 1s linear; }
.dash-clock-main { text-align: right; }
.dash-clock-time { font-size: 22px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; letter-spacing: .5px; line-height: 1.15; }
.dash-clock-date { font-size: var(--fs-2xs); color: var(--text-dim); margin-top: 1px; }

/* ── 자주 켜는 외부 도구 바로가기(채널톡·카카오채널·카페24·동방몰) — 매번
   즐겨찾기 뒤지지 않게(사장님, 2026-08-30). 아이콘+짧은 이름, 새 탭으로. ── */
.dash-quicklinks { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.dash-qlink {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs);
  color: var(--text-clear); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 5px 12px 5px 8px; text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.dash-qlink:hover { border-color: var(--blue); color: var(--text-bright); text-decoration: none; }
.dash-qlink .ic { font-size: 14px; line-height: 1; }

/* ── 지표 — CS 요약에서 이 숫자들은 "참고"다(전체 누계라 오늘 할 일이 아니다).
   보고서 화면은 같은 .kpi-tile 이 주인공이라 거기는 손대지 않고, 이 화면에서만
   조금 낮춰 잡는다. flex:1 로 한 줄을 꽉 채우는 건 왼쪽에 몰려 있고 오른쪽이
   텅 비어 "덜 만든 화면"처럼 보이던 문제를 없애기 위해서다. */
.kpi-row-quiet { gap: var(--sp-2); margin-bottom: 0; }
.kpi-row-quiet .kpi-tile { flex: 1 1 0; min-width: 120px; min-height: 0; padding: 11px 14px; }
.kpi-row-quiet .kpi-value { font-size: 20px; }

/* ── 처리해야 할 것 — 이 화면의 주인공. 세 칸 모양을 서로 다르게 만들면 오히려
   산만해지니, 급한 순서(오늘>이번 주>이번 달)는 제목 줄 색 하나로만 말한다. */
.dash-todo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 1000px) { .dash-todo-grid { grid-template-columns: 1fr; } }
.dash-todo-col {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.dash-todo-col.is-now { border-color: rgba(96,165,250,0.45); }
.dash-todo-head {
  padding: 10px 13px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-clear);
  background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-2);
}
.dash-todo-col.is-now .dash-todo-head {
  color: var(--text-bright); background: rgba(96,165,250,0.10);
  border-bottom-color: rgba(96,165,250,0.28);
}
.dash-todo-head .count {
  margin-left: auto; font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-dim); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 2px 9px;
}
.dash-todo-col.is-now .dash-todo-head .count { color: var(--blue); border-color: rgba(96,165,250,0.35); }
.dash-todo-head .range { font-size: var(--fs-2xs); font-weight: 400; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dash-todo-body { flex: 1; padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); max-height: 420px; overflow-y: auto; }
.dash-todo-more { text-align: center; margin-top: var(--sp-1); }
/* 빈 칸이 회색 글자 한 줄이면 "안 불러와진 건가?" 싶다 — 비어 있다는 걸 분명히.
   세 칸은 키가 같이 늘어나므로(grid), 빈 칸의 글자는 위에 붙이지 말고 가운데. */
.dash-empty { margin: auto; padding: 26px 8px; text-align: center; color: var(--text-dim); font-size: var(--fs-2xs); }
.dash-empty .em { display: block; font-size: 19px; margin-bottom: 5px; opacity: .7; }

/* ── 내 할 일 · 메모 — 로그인한 사람한테만 보이는 개인용(사장님, 2026-08-30:
   "개인별 메모나, 개인 to do list 자기만 봐야하는게 있을수잇잖아"). 옆에 있는
   "처리해야 할 것" 칸과 같은 부품(.dash-todo-col/.dash-todo-head)을 그대로
   재사용해서 카드 모양이 흔들리지 않게 한다. */
.dash-personal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 900px) { .dash-personal-grid { grid-template-columns: 1fr; } }
/* 위아래로 늘리거나 줄일 수 있게(사장님, 2026-08-30: "위아래로 사이즈도
   줄일수있게해라") — 처음엔 모서리 resize 손잡이를 썼는데 너무 작아서 찾기
   힘들다고 해서(사장님: "모서리에 각각 창 크기 줄이는거말고 구분선 행으로
   그냥 줄이게해"), 밑에 가로로 긴 구분선(.resize-handle)을 끌게 하는 걸로
   바꿨다 — 실제 크기 조절은 JS(cases_summary.html)가 이 height 를 바꾼다.
   flex:1 로 두면 JS 가 바꾼 높이를 flex 가 다시 덮어써서 flex:0 0 auto 로 둔다.
   처음엔 칸마다 손잡이를 따로 뒀는데, 사장님이 그린 그림은 두 칸 밑에
   가로로 하나만 있어서 끌면 둘 다 같이 줄어드는 모양이었다(2026-08-30: "빨간줄
   부분에 구분선이있고 이선이 움직여서 메모랑 할일 둘다 창이 함께 줄어드는걸
   생각했찌") — 그래서 손잡이를 칸 안이 아니라 .dash-personal-grid 바로 밑,
   두 칸에 공통으로 하나만 둔다. */
.personal-todo-body {
  flex: 0 0 auto; padding: var(--sp-2); display: flex; flex-direction: column;
  gap: 1px; height: 220px; min-height: 90px; max-height: 520px;
  overflow-y: auto;
}
.resize-handle {
  margin-top: var(--sp-2); height: 11px; cursor: row-resize;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--line); transition: background 0.12s;
}
.resize-handle:hover, .resize-handle.dragging { background: rgba(96,165,250,0.10); }
.resize-handle::after {
  content: ''; width: 30px; height: 3px; border-radius: 2px; background: var(--border);
  transition: background 0.12s;
}
.resize-handle:hover::after, .resize-handle.dragging::after { background: var(--blue); }
/* 각 칸을 통째로 접었다 펼 수 있다(사장님, 2026-08-30: "각각 접기 펼치기
   해놓고 기본은 펼치기") — 이 칸은 이미 .dash-todo-head 가 제목 줄 모양(패딩·
   배경)을 갖고 있어서 그건 그대로 두고 화살표만 덧붙인다. */
.dash-todo-col > summary.dash-todo-head {
  list-style: none; cursor: pointer; user-select: none;
}
.dash-todo-col > summary.dash-todo-head::-webkit-details-marker { display: none; }
.dash-todo-col > summary.dash-todo-head::before {
  content: '▸'; color: var(--text-dim); display: inline-block; transition: transform 0.15s;
}
.dash-todo-col[open] > summary.dash-todo-head::before { transform: rotate(90deg); }
.todo-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); }
.todo-row:hover { background: rgba(255,255,255,0.03); }
.todo-row.done .todo-text { color: var(--text-dim); text-decoration: line-through; }
.todo-check { flex-shrink: 0; accent-color: var(--blue); cursor: pointer; }
.todo-text { flex: 1; font-size: var(--fs-xs); word-break: break-word; }
.todo-del {
  flex-shrink: 0; background: transparent; border: none; color: var(--text-dim);
  font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; padding: 2px 6px;
  transition: opacity 0.12s, color 0.12s;
}
.todo-row:hover .todo-del { opacity: 1; }
.todo-del:hover { color: var(--red); }
.todo-add-row { padding: var(--sp-2); border-top: 1px solid var(--line); }
.todo-add-row input { width: 100%; font-size: var(--fs-xs); padding: 7px 10px; border-radius: var(--radius-sm); }
.note-saved-hint {
  margin-left: auto; font-size: var(--fs-2xs); font-weight: 400; color: var(--green);
  opacity: 0; transition: opacity 0.3s;
}
.note-saved-hint.show { opacity: 1; }
.personal-note-area {
  flex: 0 0 auto; width: 100%; resize: none; border: none; background: transparent;
  padding: var(--sp-3); font-size: var(--fs-xs); line-height: 1.6; color: var(--text-clear);
  height: 220px; min-height: 90px; max-height: 520px;
}
.personal-note-area:focus { outline: none; }

/* ── 반복 LOT — 제목은 .sec-head 가 맡으니, 카드 안에는 표만 남는다.
   (.report-highlight 는 보고서와 함께 쓰는 클래스라 안 건드리고 덧댄다.) */
.report-highlight.dash-lot { padding: var(--sp-4); margin-bottom: 0; }
.dash-lot .btn { margin-top: var(--sp-3); }


.board-wrap { position: relative; }
.board { display: flex; gap: var(--sp-3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--sp-2); }
/* 상태별 칸을 세로로 긴 열 대신 가로 줄로(사장님, 2026-08-30: "세로말고
   가로축으로 나열을 바꾸는게 나을듯") — 칸 하나는 이제 카드 한 줄 높이로
   고정되고, 그 안의 카드들이 옆으로 늘어서 넘치면 줄 하나만 옆으로 스크롤된다.
   .board 의 기본값(가로로 늘어선 열)은 CS 접수 등 다른 화면이 그대로 쓰므로
   안 건드리고, 이 modifier 로만 세로 쌓기로 뒤집는다. */
.board.board-rows { flex-direction: column; overflow-x: visible; align-items: stretch; }
.lane-row {
  position: relative; display: flex; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden;
}
.lane-row-head {
  flex: 0 0 130px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 10px 13px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-bright);
  background: rgba(255,255,255,0.02); border-right: 1px solid var(--line);
}
.lane-row-head .count { font-weight: 400; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.lane-row-body {
  flex: 1; display: flex; gap: var(--sp-2); padding: var(--sp-2);
  overflow-x: auto; min-width: 0;
}
.kcard-h { flex: 0 0 230px; }
/* 줄 안의 카드가 넘칠 때만 오른쪽에 살짝 그라데이션 — 안 그러면 스크롤해야
   보이는 카드가 아예 없는 것처럼 보인다(예전 .board-wrap.has-more 와 같은
   이유, 이제는 줄(lane-row)마다 따로 잰다). */
.lane-row.has-more::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
  background: linear-gradient(to right, transparent, var(--panel));
  pointer-events: none;
}
.kcard {
  display: block; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 11px; color: inherit; text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.kcard:hover { border-color: var(--blue); background: rgba(96,165,250,0.06); text-decoration: none; }
.kcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
/* 거래처 이름이 길면 이모지를 밀어내고 카드 폭을 넘겼다 — 이름만 줄이고 이모지는 지킨다. */
.kcard .clinic {
  font-weight: 700; font-size: var(--fs-xs); color: var(--text-bright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kcard .cat { flex-shrink: 0; }
/* 두 줄로 잘라서 카드 키를 고르게 — 내용 길이에 따라 카드가 들쭉날쭉하면 목록
   전체가 어수선해 보인다. 거래처 이름(밝음) > 내용(보통) > 날짜(어두움) 순서. */
.kcard-content {
  font-size: var(--fs-2xs); color: var(--text); margin-top: 4px; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.kcard-meta { font-size: 10.5px; color: var(--text-dim); margin-top: 6px; }

/* ══ AI 응대 도우미 — CS 요약(메인) 전용 배치 ════════════════════════════
   카드 디자인(그라데이션 배경·큰 글씨)은 CS 접수 쪽에서 펼쳤을 때도 똑같이
   보이게 .open 에도 같이 건다(사장님, 2026-08-30: "요약에있는 ai질문 ui
   cs접수에도 똑같이적용해줘") — 접기/펼치기 동작 자체는 그대로 두고 디자인만. */
#assistant.adv-page, #assistant.open {
  border-radius: var(--radius-lg); position: relative;
  /* 위쪽만 옅게 파랗게 — "여기가 물어보는 자리"라는 신호는 주되, 카드 전체가
     색을 띠면 아래 대시보드 카드들과 싸운다. */
  background: linear-gradient(180deg, rgba(96,165,250,0.07), rgba(96,165,250,0) 160px), var(--panel);
  margin-bottom: var(--sp-6);
}
#assistant.adv-page .adv-hero-greet, #assistant.open .adv-hero-greet { font-size: 22px; }
/* 답변 말풍선은 카드 폭(1100px 넘음)을 그대로 다 쓰면 한 줄이 너무 길어 읽다가
   다음 줄을 놓친다 — 읽기 좋은 폭에서 끊는다. */
#assistant.adv-page .adv-talkwrap { max-width: 860px; }
#assistant.adv-page .adv-scene { justify-content: center; }

/* ── 가이드 관리 — 카드형으로 해봤더니 한눈에 훑기 어렵다는 지적(2026-08-29:
   "가이드 관리는 카드형태로하니깐 가독성이 떨어지네") — 표로 되돌린다. 문서는
   기본 table 스타일 그대로, 응대 템플릿만 폭 지정 정도만 남긴다. */
.tpl-hidden { opacity: .45; }
.tpl-title-field { font-weight: 700; color: var(--text-bright); font-size: var(--fs-sm); }
input.tpl-title-field { padding: 3px 5px; }


/* ── 가이드 관리 목록 — 대분류 접기 ── */
.tpl-group summary { cursor: pointer; padding: 5px 0; }
.tpl-group summary h2 { display: inline; }

/* ── 분류 관리 팝업 (CS 접수·처리 화면 안) — 대분류·소분류 추가만 하는 작은
   기능이라 따로 화면을 안 두고 팝업으로 충분하다(사장님, 2026-08-31: "사이드바에
   말고, cs 접수 안쪽에있어야할꺼같은데 ... 이정도는 팝업으로 충분히
   표현가능할꺼같은데"). 가이드 드로어와 같은 어둡게-깔기 방식이지만, 옆이 아니라
   가운데 뜨는 작은 창이다. ── */
#cat-popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 90;
}
#cat-popup-overlay.open { opacity: 1; pointer-events: auto; }
#cat-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 800px; max-width: 94vw; max-height: 90vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: none; flex-direction: column; z-index: 91; padding: 16px 18px;
}
#cat-popup.open { display: flex; }
.cat-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cat-popup-head b { font-size: var(--fs-md); color: var(--text-bright); }

/* 지금 있는 목록(보는 곳)과 새로 추가하는 폼(고르고 적는 곳)이 같은 배경에
   붙어 있어 경계가 안 보였다(사장님, 2026-08-31: "상태창이랑 고를수잇는창이
   ui적으로 분류가되야지. 위에는 알림창같이하고") — 목록은 팝업보다 한 톤
   어두운 카드로 감싸 위쪽에 두고, 아래 입력 폼과 배경으로 확실히 구분한다.
   대분류 10개의 소분류를 세로로 다 늘어놓으면 한없이 길어지므로(사장님,
   2026-08-31: "아래로 길게말고 ... 옆에 이어서 창이생기면되잖아") 왼쪽에서
   대분류를 고르면 오른쪽이 그 소분류만 보여주는 좌우 2단, 각자 따로 스크롤한다. */
.cat-popup-panel {
  display: flex; height: 280px; flex-shrink: 0; margin-bottom: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 16px;
}
.cat-popup-panel-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-popup-panel-col + .cat-popup-panel-col { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--line); }
.cat-popup-panel-col h3 { font-size: var(--fs-sm); margin: 0 0 8px; flex-shrink: 0; }
.cat-popup-panel-col h3 .hint { font-weight: 400; }
#cat-major-list, #cat-minor-list { list-style: none; flex: 1; overflow-y: auto; min-height: 60px; }
#cat-minor-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 2px; font-size: var(--fs-sm); color: var(--text-clear); border-bottom: 1px solid var(--line);
}
.cat-major-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.cat-major-item {
  display: block; flex: 1; min-width: 0; text-align: left; padding: 7px 9px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-clear); font-size: var(--fs-sm); cursor: pointer;
}
.cat-major-item:hover { background: var(--input-bg); }
.cat-major-item.selected { background: rgba(96,165,250,0.14); border-color: rgba(96,165,250,0.4); color: var(--text-bright); font-weight: 700; }
/* 삭제 버튼은 늘 보이면 목록이 산만해서(사장님, 2026-08-31: "분류삭제도 되야지"
   요청에 맞춰 새로 넣으면서), 그 줄에 마우스를 올렸을 때만 보이게 한다. */
.cat-del-btn {
  flex-shrink: 0; background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 13px; padding: 3px 6px; border-radius: 4px; opacity: 0;
  transition: opacity 0.1s;
}
.cat-major-row:hover .cat-del-btn, #cat-minor-list li:hover .cat-del-btn { opacity: 1; }
.cat-del-btn:hover { color: var(--red); background: var(--input-bg); }

/* 목록 패널 아래, 새로 추가하는 폼은 별도 구역이다 — 대분류·소분류 추가를
   나란히 좌우로 둔다(팝업이 넓어져도 되니 — 사장님, 2026-08-31: "어차피
   팝업이면 옆으로 더길어져도되"). */
.cat-popup-forms { display: flex; gap: 16px; flex-shrink: 0; }
.cat-popup-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-popup-form input[type=text] { width: 100%; }
/* 이모지 28개를 한 줄씩 내려가는 select 로 고르게 했더니 계속 스크롤해야 했고
   (사장님, 2026-08-31: "이모지선택 지금 행마다 죽내렸는데 ... 길게쭉내릴필요있니"),
   격자로 바꾼 뒤에도 칸이 좁아 다시 스크롤이 생겼다("이모지가 스크롤없이
   나오게하는건안되니") — 팝업이 넓어진 만큼 칸도 넓어져 7열 4행(28개 정확히)이
   스크롤 없이 한 번에 다 보이고, 버튼 자체도 이전보다 작게 줄였다("저거는
   크기가 크지않아도될꺼같은데"). */
.cat-emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cat-emoji-btn {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; font-size: 14px; background: var(--input-bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.cat-emoji-btn:hover { border-color: var(--blue); background: rgba(96,165,250,0.08); }
.cat-emoji-btn.selected { border-color: var(--blue); background: rgba(96,165,250,0.18); box-shadow: inset 0 0 0 1px var(--blue); }
/* 문서/유형 편집 화면 — "고친 기록"은 기본 접어둔다(사장님, 2026-08-30: "문서나
   안에들어갔을때 고친기록 이걸가리라느건대") — 자동저장이라 기록이 금방 길게
   쌓여서 문서 내용보다 먼저 눈에 띄면 안 된다. */
.doc-history-group summary { cursor: pointer; padding: 5px 0; }
.doc-history-group summary h2 { display: inline; }

/* ── 거래처 조회(사장님, 2026-09-02: "cs 보고서 밑에 거래처 조회 만들어줘" →
   "사이드바에 cs접수처리 밑에 거래처 조회 넣어서") — 검색 결과 행을 누르면
   아래에 상세(최근 주문)가 펼쳐진다. ── */
#cust-tbody tr:hover { background: var(--input-bg); cursor: pointer; }
.cust-detail {
  display: none; margin-top: var(--sp-4); max-width: 900px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px;
}
.cust-detail.open { display: block; }
/* 검색 전 빈 화면 — 최근에 열어본 거래처를 칩으로(UI 검토, 2026-09-02: "거래처
   조회의 초기 화면이 너무 비어 있습니다"). */
.cust-recent-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; }
.cust-recent-chip { font-size: 12.5px; }
.cust-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cust-detail-head-actions { display: flex; align-items: center; gap: 8px; }
.cust-detail-head b { font-size: var(--fs-md); color: var(--text-bright); }
/* 필요한 칸(사장님, 2026-09-02: "거래처코드도 뜨고, 스프레드시트에있는내용들은
   다떠야할꺼같아" → "거래처코드. 거래처명, 대표명, 주소, 사업자등록번호,
   전화번호, 이메일, 아이디, 휴폐업조회, 조치일 까지")을 2열 표로 보여준다. */
.cust-detail-fields {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px;
  margin-bottom: 12px; padding: 10px 12px; background: var(--panel);
  border-radius: var(--radius-sm);
}
.cust-detail-field { display: flex; gap: 8px; font-size: var(--fs-sm); padding: 3px 0; }
.cust-detail-field .k { flex-shrink: 0; width: 92px; color: var(--text-dim); }
.cust-detail-field .v { color: var(--text-clear); overflow-wrap: anywhere; }
/* 항상 2열 고정이라 좁은 화면에서는 주소처럼 긴 값이 아주 좁은 칸에 억지로
   줄바꿈되며 뭉쳐 보였다(사장님, 2026-09-03: "거래처도보니깐 모바일에서
   주소가 막 행이몰려있드만") — 좁은 화면에서는 1열로 풀어 값이 넓게 쓰이게. */
@media (max-width: 480px) {
  .cust-detail-fields { grid-template-columns: 1fr; }
}