/* 벡터DB 조회 화면. 탭과 빈 상태 메시지 스타일은 style.css의 .vdb-*를 쓴다.
   구간 색은 관계가 깊어질수록 짙어지는 청록 계열이다(만남: 옅은 청록 → 연인 후반: 짙은 청록). */
.vdb-page {
  --b1: #e2f6f2; --b1-ink: #14524b;   /* 만남 */
  --b2: #c2f2e7; --b2-ink: #14524b;   /* 친구 */
  --b3: #62dfca; --b3-ink: #0b3f39;   /* 썸 */
  --b4: #15917f; --b4-ink: #ffffff;   /* 연인 초반 */
  --b5: #0f5d55; --b5-ink: #ffffff;   /* 연인 후반 */
  --vk-mark: #0d8a7b;                 /* #[n단계] 마커 · 레코드 카드 메타 항목 이름 */
  --vk-add: #0f5d55;                  /* 단계별 데이터에서 그 단계에 추가된 텍스트 */
  --vk-slash: #9bdcd1;                /* 말풍선 구분자 「/」 */
}
.vdb-page .vdb-top { max-width: 1240px; }
.vk, .vm { max-width: 1240px; margin: 14px auto 0; }
.vk[hidden], .vm[hidden], .vl[hidden] { display: none; }
.vl { max-width: 1240px; margin: 14px auto 0; }
/* 대화 로그 VectorDB: 왼쪽 회원 목록 아래에 선택한 회원의 대화 목록을 둔다 */
.vl-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vl-h { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
.vl-convs button { font-weight: 500; font-variant-numeric: tabular-nums; }
.b1 { background: var(--b1); color: var(--b1-ink); }
.b2 { background: var(--b2); color: var(--b2-ink); }
.b3 { background: var(--b3); color: var(--b3-ink); }
.b4 { background: var(--b4); color: var(--b4-ink); }
.b5 { background: var(--b5); color: var(--b5-ink); }

/* 진케이 VectorDB: 상단 구간 버튼 */
.vk-bands { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-bands button {
  min-width: 64px; padding: 7px 14px; border-radius: 10px; border: 2px solid transparent; font-size: 13.5px; font-weight: 700;
  background: #f1f0f5; color: #4b4757;
}
.vk-bands button.b1 { background: var(--b1); color: var(--b1-ink); }
.vk-bands button.b2 { background: var(--b2); color: var(--b2-ink); }
.vk-bands button.b3 { background: var(--b3); color: var(--b3-ink); }
.vk-bands button.b4 { background: var(--b4); color: var(--b4-ink); }
.vk-bands button.b5 { background: var(--b5); color: var(--b5-ink); }
.vk-bands button[aria-pressed="true"] { border-color: #1d1b22; box-shadow: 0 2px 6px rgba(20, 40, 38, .18); }

/* 왼쪽(카테고리 · 주제 목록, sticky) + 오른쪽(주제 상세) 2단 그리드 */
.vk-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; margin-top: 14px; align-items: start; }
.vk-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100vh - 24px); }
.vk-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-cats button {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #4b4757; font-size: 12.5px; font-weight: 600;
}
.vk-cats button[aria-pressed="true"] { background: #1f2a29; border-color: #1f2a29; color: #fff; }
.vk-topics { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow-y: auto; min-height: 0; }
.vk-topics button {
  display: block; width: 100%; padding: 8px 10px; border-radius: 9px; background: transparent; color: var(--text);
  text-align: left; font-weight: 500; font-size: 13.5px; line-height: 1.4;
}
.vk-topics button:hover { background: #f4faf9; }
.vk-topics button[aria-current="true"] { background: var(--b1); color: var(--b1-ink); font-weight: 700; }
.vk-topics small { display: block; font: 500 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); }

.vk-main { min-width: 0; transition: opacity .15s; }
.vk-main[aria-busy="true"] { opacity: .45; }
.vk-head { margin: 0 0 4px; font-size: 21px; line-height: 1.35; word-break: break-word; }
.vk-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); word-break: break-word; }
.vk-sec + .vk-sec { margin-top: 22px; }
.vk-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.vk-h small { font-size: 12px; font-weight: 600; color: var(--muted); }

/* 단계별 데이터 · 레코드 카드 공통 행: 왼쪽 「n단계 · 구간」 라벨 + 오른쪽 본문 */
.vk-rows { display: flex; flex-direction: column; gap: 8px; }
.vk-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.vk-lab {
  display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 800; line-height: 1.35; word-break: keep-all;
}
.vk-box { min-width: 0; padding: 11px 14px; border: 1px solid #e3e6e8; border-radius: 10px; background: #fff; font-size: 13.5px; line-height: 1.7; word-break: break-word; }
.vk-prev { color: #2c3433; }
.vk-add { color: var(--vk-add); font-weight: 800; }
.vk-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #e8ecec; font-size: 13px; }
.vk-meta b { color: var(--vk-mark); margin-right: 6px; }
.vk-meta .vk-vec { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.vk-line { margin: 0; }
.vk-line + .vk-line { margin-top: 6px; }
.vk-mark { color: var(--vk-mark); font-weight: 800; margin-right: 6px; }
.vk-slash { color: var(--vk-slash); font-weight: 700; padding: 0 2px; }

/* 회원 VectorDB(대화 로그 탭도 같은 규칙을 쓴다): 왼쪽 목록 + 오른쪽 본문.
   본문(.vm-memo)은 드래그해서 복사할 수 있도록 일반 텍스트(<pre>)로 표시한다 */
.vm-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.vm-list { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.vm-list button {
  display: block; width: 100%; padding: 9px 11px; border-radius: 9px; background: transparent; color: var(--text); text-align: left;
  font-weight: 600; font-size: 14px; line-height: 1.4;
}
.vm-list button:hover { background: #f6f5fa; }
.vm-list button[aria-current="true"] { background: var(--strip); color: var(--accent-text); }
.vm-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); }
.vm-main { min-width: 0; }
.vm-memo {
  margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; white-space: pre-wrap; word-break: break-word;
  font: 400 14.5px/1.85 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  user-select: text;
}

/* 760px 이하: 2단 그리드를 1단으로 바꾼다. 왼쪽 목록(카테고리 · 주제 / 회원)이 본문 위로 올라가므로 sticky를 풀고 목록 높이를 제한한다 */
@media (max-width: 760px) {
  .vk-grid, .vm-grid { grid-template-columns: minmax(0, 1fr); }
  .vk-side { position: static; max-height: none; }
  .vk-topics { max-height: 220px; }
  .vk-row { grid-template-columns: 64px minmax(0, 1fr); gap: 6px; }
  .vk-lab { padding: 8px; font-size: 12.5px; }
  .vk-box { padding: 10px 11px; }
  .vm-list { max-height: 200px; overflow-y: auto; }
  .vm-memo { padding: 14px; }
}