/* 지식베이스 화면 — DEEP Ops 공용 부품(vlmops.css) 위에 목록 카드와 DEEP Parser 구성의 지식베이스 화면을 더한다. 모서리는 직각. */
.kb-root.is-dragover .kb-viewer { outline: 2px dashed var(--vlm-accent); outline-offset: -12px; }
.kb-root .vlmops-card-action.kb-always { opacity: 1; }
.kb-root .vlmops-card-action.is-favorite { color: rgb(var(--k-favorite, 245 158 11)); }
.kb-root .vlmops-card-action.is-favorite svg { fill: currentColor; }
.kb-root input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--vlm-accent); cursor: pointer; }

.kb-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; padding: 1px 7px; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.kb-badge.is-brand { background: var(--vlm-accent-weak); color: var(--vlm-accent-deep); }
.kb-badge.is-green { background: #ecfdf5; color: #047857; }
.kb-badge.is-red { background: #fef2f2; color: #c2333f; }
.kb-spin { width: 9px; height: 9px; border: 1.5px solid #c9d9ff; border-top-color: var(--vlm-accent); border-radius: 50%; animation: kb-spin .8s linear infinite; }
@keyframes kb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kb-spin { animation: none; } }

.kb-back { display: inline-flex; flex: 0 0 auto; white-space: nowrap; align-items: center; gap: 4px; margin-bottom: 12px; border: 0; background: transparent; padding: 0; color: var(--vlm-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.kb-back:hover { color: var(--vlm-accent); }
.kb-panel { border: 1px solid #e1e5eb; background: #fff; }
.kb-help { margin: 10px 0 0; color: #64748b; font-size: 11px; line-height: 1.55; }

.kb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 999px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.kb-chip i { width: 4px; height: 4px; border-radius: 50%; }
.kb-thumb { display: grid; width: 32px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--vlm-line); background: #fff; color: #64748b; font-size: 8.5px; font-weight: 700; letter-spacing: .02em; }
.kb-thumb[data-ext="pdf"] { color: #dc2626; }
.kb-thumb[data-ext="docx"], .kb-thumb[data-ext="doc"] { color: #2563eb; }
.kb-thumb[data-ext="hwp"], .kb-thumb[data-ext="hwpx"] { color: #0e7490; }
.kb-thumb[data-ext="xlsx"] { color: #15803d; }
.kb-thumb[data-ext="pptx"] { color: #c2410c; }
.kb-thumb[data-ext="json"] { color: #7c3aed; }
.kb-thumb.is-lg { width: 40px; height: 50px; overflow: hidden; border-radius: 4px; }
/* 문서 보기 — DEEP Parser 화면 구성 */
.kb-viewer { height: 100%; display: flex; flex-direction: column; background: #fff; }
.kb-vhead { display: flex; min-height: 48px; align-items: center; gap: 10px; border-bottom: 1px solid var(--vlm-line); padding: 0 16px; }
.kb-back.is-inline { margin: 0; }
.kb-vsep { width: 1px; height: 16px; background: var(--vlm-border); }
.kb-vtitle { min-width: 0; overflow: hidden; color: #1f2937; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.kb-vactions { display: flex; gap: 6px; margin-left: auto; }
.kb-vbody { display: grid; min-height: 0; flex: 1; grid-template-columns: 224px minmax(300px, 1.35fr) minmax(320px, 1.25fr); }
.kb-vlist { position: relative; display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--vlm-line); }
.kb-vsearch { margin: 12px 12px 8px; }
.kb-vsearch .vlmops-input { background: #f5f5f5; border-color: transparent; }
.kb-vitems { min-height: 0; flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.kb-vitem { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px; text-align: left; cursor: pointer; }
.kb-vitem > input { flex: 0 0 auto; }
.kb-vitem.is-checked { background: #f1f5f9; }
.kb-vitem:hover { background: #f5f5f5; }
.kb-vitem.is-on { background: #f3f4f6; }
.kb-vitem-txt { min-width: 0; }
.kb-vitem-txt b { display: block; overflow: hidden; color: #1f2937; font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.kb-vitem-txt small { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--vlm-muted); font-size: 10.5px; white-space: nowrap; }
.kb-vitem-txt small i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; }
.kb-vempty { padding: 24px 8px; color: #94a3b8; font-size: 12px; text-align: center; }
.kb-vdoc { min-height: 0; overflow-y: auto; background: #f5f5f5; }
.kb-pages { display: grid; gap: 16px; padding: 24px; }
.kb-paper { position: relative; width: min(100%, 640px); min-height: 360px; margin: 0 auto; border: 1px solid var(--vlm-line); background: #fff; padding: 40px 44px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.kb-paper-no { position: absolute; top: 12px; right: 14px; color: #94a3b8; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.kb-pchunk { margin: 0 0 14px; outline: 1px dashed transparent; outline-offset: 4px; color: #334155; font-size: 13px; line-height: 1.75; cursor: pointer; }
.kb-pchunk:hover { outline-color: #c9d9ff; }
.kb-pchunk.is-on { background: rgba(41,112,255,.06); outline: 2px solid var(--vlm-accent); }
.kb-center { text-align: center; }
.kb-vcenter { display: grid; height: 100%; min-height: 240px; place-content: center; justify-items: center; gap: 8px; padding: 24px; color: #94a3b8; text-align: center; }
.kb-vcenter strong { color: #1f2937; font-size: 14px; }
.kb-vcenter p { max-width: 360px; margin: 0; color: var(--vlm-muted); font-size: 12px; line-height: 1.55; }
.kb-vcenter.is-sm { min-height: 160px; }
.kb-spin.is-lg { width: 22px; height: 22px; border-width: 2px; }
.kb-vres { display: flex; min-height: 0; flex-direction: column; border-left: 1px solid var(--vlm-line); }
.kb-rtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vlm-line); padding: 0 12px; }
.kb-rtab { margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 14px 12px 12px; color: var(--vlm-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.kb-rtab.is-on { border-bottom-color: var(--vlm-accent); color: var(--vlm-accent-deep); }
.kb-rbody { min-height: 0; flex: 1; overflow-y: auto; padding: 14px 16px; }
.kb-rmeta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; color: var(--vlm-muted); font-size: 11.5px; }
.kb-chunks li { cursor: pointer; }
.kb-chunks li:hover { border-color: #c9d9ff; }
.kb-chunks li.is-on { border-color: var(--vlm-accent); background: #f5f8ff; }
.kb-out { display: flex; flex-direction: column; border: 1px solid var(--vlm-line); }
.kb-out-bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vlm-line); padding: 6px 8px 6px 12px; color: var(--vlm-muted); font-size: 11.5px; font-weight: 600; }
.kb-out pre { margin: 0; overflow: auto; background: #fafafa; padding: 12px; color: #334155; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.kb-rfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--vlm-line); padding: 10px 12px; color: var(--vlm-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 모달 */
.kb-field { display: grid; gap: 6px; }
.kb-field > span { color: #334155; font-size: 12px; font-weight: 600; }
.vlmops-modal .kb-field + .kb-field { margin-top: 14px; }
.kb-form-error { margin-top: 10px; color: #c2333f; font-size: 12px; }
.kb-chunks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kb-chunks li { border: 1px solid var(--vlm-line); padding: 10px 12px; }
.kb-chunks header { display: flex; justify-content: space-between; gap: 8px; color: #64748b; font-size: 11px; }
.kb-chunks header b { color: #1f2937; }
.kb-chunks p { margin: 6px 0 0; color: #334155; font-size: 13px; line-height: 1.6; }

@media (max-width: 1100px) { .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kb-vbody { grid-template-columns: 1fr; overflow-y: auto; }
  .kb-vlist { display: none; }
  .kb-vres { border-left: 0; border-top: 1px solid var(--vlm-line); }
  .kb-vactions .vlmops-btn { padding: 7px 8px; }
  .kb-vtitle, .kb-vsep { display: none; }
}

/* 지식베이스 화면 머리, 목록 필터, 선택 막대, 문서 머리 (2026-10-27) */
.kb-vactions .vlmops-context-menu { right: 0; }
.kb-vfilters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 12px 8px; }
.kb-vfilters .vlmops-select-trigger { height: 32px; font-size: 12px; }
.kb-vitem-txt small .kb-source { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; color: var(--vlm-accent-deep); font-style: normal; }
.kb-vdoc { display: flex; flex-direction: column; }
.kb-dhead { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--vlm-line); background: #fff; padding: 8px 12px 8px 16px; }
.kb-dhead > b { min-width: 0; overflow: hidden; color: #1f2937; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.kb-dactions { display: flex; gap: 6px; margin-left: auto; }
.kb-dactions .vlmops-btn { padding: 5px 10px; font-size: 12px; }
.kb-vempty-all { display: grid; flex: 1; place-items: center; background: #f5f5f5; }
.kb-vempty-all .vlmops-empty { max-width: 460px; }

/* 지식베이스 추가 창 — DEEP Office와 같이 왼쪽에 기본 정보와 청크 설정 */
/* 추가와 수정 창의 고급 설정(2026-11-02): 템플릿 추가 창과 같은 한 장 틀에 접어 둔다 */
.kb-adv-toggle { display: flex; width: 100%; align-items: center; gap: 6px; margin-top: 18px; padding: 10px 0 2px; border: 0; border-top: 1px solid var(--vlm-line); background: transparent; color: #64748b; font-size: 11.5px; text-align: left; cursor: pointer; }
.kb-adv-toggle b { color: #334155; font-size: 12px; font-weight: 600; }
.kb-adv-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-adv-toggle svg { flex: none; transform: rotate(-90deg); transition: transform .18s; }
.kb-adv-toggle.is-open svg { transform: none; }
.kb-adv-toggle:hover b { color: var(--vlm-accent-deep); }
.kb-adv { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.kb-adv > section + section { padding-top: 16px; border-top: 1px dashed var(--vlm-line); }
.kb-numbox { position: relative; display: block; }
.kb-numbox input { padding-right: 28px; font-variant-numeric: tabular-nums; }
.kb-numbox em { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #94a3b8; font-size: 12px; font-style: normal; font-weight: 500; pointer-events: none; }
.kb-adv-help { display: block; margin-top: 4px; color: #94a3b8; font-size: 11px; font-weight: 400; line-height: 1.5; }
.kb-vitem-txt { flex: 1; }
.kb-vitem-txt small { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.kb-vitem-txt small .kb-source { margin-left: 0; flex-basis: 100%; }

/* 버전, 검색, 보관 근거 (2026-10-28) */
.kb-mt0 { margin-top: 0; }
.kb-mt6 { margin-top: 6px; }
.kb-mt14 { margin-top: 14px; }
.kb-vchip { flex: 0 0 auto; border: 1px solid var(--vlm-line); background: #fff; padding: 1px 6px; color: #475569; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.kb-vchip:hover { border-color: var(--vlm-accent); color: var(--vlm-accent-deep); }
.kb-vchip.is-old { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.kb-eff { flex: 0 0 auto; color: var(--vlm-muted); font-size: 11.5px; white-space: nowrap; }
.kb-banner { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #fde68a; background: #fffbeb; padding: 8px 16px; color: #92400e; font-size: 12px; }
.kb-banner > span { flex: 1; min-width: 0; }
.kb-banner .vlmops-btn { padding: 4px 10px; font-size: 12px; }
.kb-banner.is-gone { border-bottom-color: #fecaca; background: #fef2f2; color: #991b1b; }
.kb-vers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kb-vers > li { border: 1px solid var(--vlm-line); padding: 10px 12px; }
.kb-vers > li.is-on { border-color: var(--vlm-accent); background: #f5f8ff; }
.kb-ver-row { display: flex; min-width: 0; align-items: center; gap: 6px; }
.kb-ver-row > b { color: #1f2937; font-size: 13px; font-variant-numeric: tabular-nums; }
.kb-ver-name { min-width: 0; overflow: hidden; color: #334155; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kb-ver-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; color: var(--vlm-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.kb-ver-acts { display: flex; gap: 6px; margin-top: 8px; }
.kb-ver-acts:empty { display: none; }
.kb-ver-acts .vlmops-btn { padding: 4px 10px; font-size: 12px; }
.kb-diff { display: grid; gap: 8px; margin-top: 10px; border-top: 1px dashed var(--vlm-line); padding-top: 10px; }
.kb-diff-item header { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 11px; }
.kb-diff-item header b { color: #1f2937; font-size: 12px; }
.kb-diff-item header > span { margin-left: auto; }
.kb-diff-item p { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; margin: 4px 0 0; color: #334155; font-size: 12px; line-height: 1.6; }
.kb-diff-item p > .kb-dl { color: #94a3b8; font-size: 11px; }
.kb-diff-item del { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.kb-diff-item ins { background: #d1fae5; color: #065f46; font-weight: 600; text-decoration: none; }
.kb-vitem-txt small .kb-vmeta { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-vm { display: grid; gap: 6px; }
.kb-vm-row { display: grid; grid-template-columns: 52px 30px minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid var(--vlm-line); padding: 8px 10px; font-size: 12px; }
.kb-vm-row span { color: var(--vlm-muted); }
.kb-vm-row b { color: #1f2937; font-variant-numeric: tabular-nums; }
.kb-vm-row em { overflow: hidden; color: #334155; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.kb-vm-row.is-new { border-color: var(--vlm-accent); background: #f5f8ff; }
@media (max-width: 1100px) { .kb-dactions .vlmops-btn { padding: 5px 8px; } }

/* 지식베이스 탭(문서, 위키)과 문서 표, 위키 (2026-10-28) */
.kb-kbody { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; }
/* 문서 표 */
.kb-docs.kb-vlist { flex: 1; border-right: 0; }
.kb-dtool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--vlm-line); background: #fafafa; padding: 10px 16px; }
.kb-dsearch { width: 280px; }
.kb-dsearch .vlmops-input { background: #fff; }
.kb-qfs, .kb-wtypes { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-qf { display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid var(--vlm-border); background: #fff; padding: 0 11px; color: #475569; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.kb-qf span { color: #94a3b8; font-variant-numeric: tabular-nums; }
.kb-qf:hover { border-color: #94a3b8; color: #1f2937; }
.kb-qf.is-on { border-color: #1f2937; background: #1f2937; color: #fff; }
.kb-qf.is-on span { color: rgba(255,255,255,.7); }
.kb-dtype { width: 140px; margin-left: auto; }
.kb-dtype .vlmops-select-trigger { height: 32px; font-size: 12px; }
.kb-dscroll { min-height: 0; flex: 1; overflow: auto; }
.kb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kb-table thead th { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--vlm-line); background: #fff; padding: 10px 12px; color: #64748b; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.kb-table tbody tr { border-bottom: 1px solid var(--vlm-line); cursor: pointer; }
.kb-table tbody tr:hover { background: #f8fafc; }
.kb-table tbody tr.is-checked { background: #f1f5f9; }
.kb-table td { padding: 0 12px; color: #334155; white-space: nowrap; }
.kb-table .kb-tck { width: 44px; padding-left: 16px; }
.kb-table .is-num { text-align: right; }
.kb-tmono { color: #64748b; font-variant-numeric: tabular-nums; }
.kb-tname { display: inline-flex; max-width: 420px; align-items: center; gap: 10px; }
.kb-tname > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.kb-tname b { overflow: hidden; color: #1f2937; font-weight: 500; text-overflow: ellipsis; }
.kb-tname .kb-source { display: inline-flex; align-items: center; gap: 3px; color: var(--vlm-accent-deep); font-size: 10.5px; font-style: normal; }
/* 문서 상세: 이동용 왼쪽 목록과 접기 */
.kb-vlhead { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 0 16px; }
.kb-vlhead b { color: #1f2937; font-size: 12.5px; }
.kb-vfilter { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 12px 6px; background: var(--vlm-accent-weak); padding: 5px 8px; color: var(--vlm-accent-deep); font-size: 11.5px; }
.kb-vfilter button { border: 0; background: transparent; padding: 0; color: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.kb-vbody.is-nolist { grid-template-columns: minmax(0, 1fr) minmax(320px, 34%); }
.kb-dhead > .vlmops-card-action { flex: 0 0 auto; }
/* 위키 */
/* 추가와 수정 창의 위키 스위치 */
@media (prefers-reduced-motion: reduce) { .kb-switch, .kb-switch i { transition: none; } }
@media (max-width: 760px) {
  .kb-docs.kb-vlist { display: flex; }
}

/* 머리 탭, 문서 표 업로드, 위키 DEEP Office 기능 (2026-10-28 2차) */
.kb-dend { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kb-dend .kb-dtype { margin-left: 0; }
.kb-dend .vlmops-context-menu { right: 0; left: auto; }
/* 위키 사이드바 */
/* 위키 읽기 화면 */
/* 콘텐츠 문제 서랍 */
/* 문서 탭은 카드 목록과 같은 공용 틀 안에 둔다(2026-10-28). 도구 줄은 띠 없이, 표는 테두리 상자 */
.kb-docs.kb-vlist { flex: 1; min-height: 0; }
.kb-docs .kb-dtool { margin-bottom: 16px; border: 0; background: transparent; padding: 0; }
.kb-docs .kb-dsearch .vlmops-input { background: #fff; }
.kb-docs .kb-dscroll { flex: none; overflow: visible; border: 1px solid var(--vlm-line); background: #fff; }
.kb-docs .kb-dscroll > .kb-vempty { padding: 48px 8px; }
/* 표 영역은 10행(머리 45px와 행 64px 열 개) 높이를 최소로 잡는다. 건수가 적거나 비어도 영역이 줄지 않고, 빈 안내는 그 가운데 둔다(2026-11-04 Benson)
   화면이 낮으면 아래 쪽 이동 줄이 첫 화면에 보이도록 화면 높이에 맞춘다 */
.kb-docs-full .kb-dscroll { display: flex; flex-direction: column; min-height: min(685px, calc(100vh - 270px)); }
.kb-docs-full .kb-dscroll > .kb-vempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kb-docs-full .kb-dscroll > .min-h-\[240px\] { flex: 1; }
.kb-docs .kb-table thead th { top: 0; background: #f8fafc; }
.kb-docs [data-kb-selwrap] { position: sticky; bottom: 16px; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
.kb-docs .kb-dscroll { overflow-x: auto; }

/* ═══ 지식베이스 2차 정리(2026-10-28): Hub 디자인 시스템(각진 모서리, --vlm 토큰, 회색 바탕 위 흰 종이)으로 머리 탭, 목록, 위키를 맞춘다 ═══ */
/* 머리: 탭은 오른쪽 끝, 더보기 앞 */
.kb-vactions { align-self: stretch; align-items: center; }
/* 머리 탭: 회색 바탕 묶음 위에 선택 칸(연한 파랑)이 고른 탭으로 미끄러진다(2026-10-28 Benson) */
.kb-kcenter { display: grid; flex: 1; place-items: center; background: var(--vlm-background); padding: 24px; }
.kb-kcenter .vlmops-empty { max-width: 460px; }

/* 문서 표: 행 끝 아이콘 단추(열기, 삭제). Hub 목록의 삭제 아이콘과 같은 크기와 색 */
.kb-table .kb-tacts { width: 44px; padding-right: 12px; text-align: right; white-space: nowrap; }
.kb-ricon { display: inline-grid; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.kb-ricon:hover { background: #f1f5f9; color: var(--vlm-accent); }
.kb-ricon.is-danger:hover { background: #fef2f2; color: #e11d48; }
.kb-ricon:disabled { color: #cbd5e1; cursor: not-allowed; background: transparent; }
.kb-ricon:focus-visible { outline: 2px solid var(--vlm-accent); outline-offset: -2px; }
.kb-table tbody tr.is-busy { cursor: default; }
.kb-table tbody tr.is-busy:hover { background: transparent; }
.kb-table tbody tr.is-busy .kb-tname b { color: #64748b; }

/* 대기 중과 파싱 중: 행 외곽선을 따라 파란 빛이 돈다(SaaS processingRowFrame과 같은 표현, 대기 중은 두 배 느리게) */
@property --kb-run-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.kb-run { position: relative; }
.kb-run::after { content: ""; position: absolute; inset: 0; z-index: 1; padding: 2px; background: conic-gradient(from var(--kb-run-angle), transparent 0deg 210deg, #93c5fd 280deg, #2970ff 350deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kb-run-spin 2.4s steps(72) infinite; pointer-events: none; }
.kb-run.is-waiting::after { animation-duration: 4.8s; }
@keyframes kb-run-spin { to { --kb-run-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .kb-run::after { animation: none; background: #93c5fd; } }
/* 같은 외곽선 빛을 DEEP Parser 목록의 업로드 중, 파싱 중 문서에도 쓴다(2026-10-28 Benson). 둥근 항목이라 모서리를 따라간다 */
.hub-run { position: relative; }
.hub-run::after { content: ""; position: absolute; inset: 0; z-index: 1; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--kb-run-angle), transparent 0deg 210deg, #93c5fd 280deg, #2970ff 350deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kb-run-spin 2.4s steps(72) infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hub-run::after { animation: none; background: #93c5fd; } }
.kb-vitem.is-busy { cursor: default; opacity: .8; }
.kb-vitem.is-busy:hover { background: transparent; }

/* 일괄 작업 막대: Hub 문서 전체 보기의 막대와 같다 */
.kb-selbar { display: flex; align-items: center; gap: 4px; background: #1f2937; padding: 6px 8px 6px 16px; color: #fff; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); white-space: nowrap; }
.kb-selbar b { flex: none; margin-right: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-selbar button { min-height: 0; border: 0; background: transparent; padding: 6px 12px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.kb-selbar button:hover { background: rgba(255,255,255,.15); }
.kb-selbar button:disabled { background: transparent; color: rgba(255,255,255,.38); cursor: not-allowed; opacity: 1; }
.kb-selbar button:disabled:hover { background: transparent; }
.kb-selbar button.is-danger { color: #fda4af; }
.kb-selbar button.is-danger:hover { background: rgba(244,63,94,.25); }
.kb-selsep { width: 1px; height: 16px; margin: 0 4px; background: rgba(255,255,255,.25); }
.kb-selbar .kb-selx { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; }
.kb-vlist:not(.kb-docs) .kb-selbar { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; }

/* 실제 문서: PDF 페이지와 청크 위치 상자(DEEP Parser 뷰어와 같은 표현) */
.kb-paper.is-pdf { width: min(100%, 720px); min-height: 0; padding: 0; }
.kb-paper.is-pdf .kb-paper-no { z-index: 2; top: 8px; right: 10px; background: rgba(255,255,255,.9); padding: 1px 6px; }
.kb-paper.is-pdf.is-on { outline: 2px solid var(--vlm-accent); outline-offset: 2px; }
.kb-pdfpage { position: relative; min-height: 400px; background: #fff; }
.kb-pdfpage.is-ready { min-height: 0; }
.kb-pdfpage:not(.is-ready)::before { content: "페이지를 불러오는 중입니다"; position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; font-size: 12px; }
.kb-pdfpage img { display: block; width: 100%; height: auto; }
.kb-pdfpage img:not([src]) { visibility: hidden; }
.kb-pbox { position: absolute; border: 1.5px solid transparent; cursor: pointer; }
.kb-pbox:hover { border-color: #93b4ff; background: rgba(41,112,255,.05); }
.kb-pbox.is-on { border: 2px solid var(--vlm-accent); background: rgba(41,112,255,.1); }

/* 공통 태그: Hub 알약 칩(문서 상태 칩과 같은 크기) */
.kb-wtag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; border-radius: 999px; background: color-mix(in srgb, var(--wc) 12%, #fff); padding: 2px 6px; color: var(--wc); font-size: 10px; font-weight: 500; white-space: nowrap; }
.kb-wtag::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }   /* Hub 상태 칩(statusChip)과 같은 모양 */
.kb-wflag { display: inline-flex; align-items: center; gap: 3px; color: #b45309; font-size: 11px; font-style: normal; font-weight: 600; }
.kb-wnone { color: #94a3b8; font-size: 12px; }

/* 위키: 문서 상세와 같은 3단(왼쪽 목록 264px, 가운데 회색 바탕 위 흰 종이, 오른쪽 정보 34%) */
.kb-wiki { display: grid; min-height: 0; flex: 1; grid-template-columns: 224px minmax(0, 1fr); }
.kb-wiki.is-sys { grid-template-columns: 224px minmax(0, 1fr); }
.kb-wlist { display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--vlm-line); background: #fff; }
.kb-wmain { min-height: 0; overflow-y: auto; background: #fff; padding: 32px 40px 48px; }   /* 종이 틀 없이 가운데 영역 전체를 읽기 화면으로 쓴다(2026-10-29 Benson). 글줄은 읽기 좋은 폭으로 둔다 */
.kb-wread { width: min(100%, 760px); margin: 0 auto; }
.kb-wback { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; border: 0; background: transparent; padding: 0; color: var(--vlm-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.kb-wback:hover { color: var(--vlm-accent); }
.kb-wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--vlm-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.kb-wread h2 { margin: 10px 0 0; color: #1f2937; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.kb-walias { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.kb-walias span { color: var(--vlm-muted); font-size: 12px; }
.kb-walias em { background: #f1f5f9; padding: 2px 8px; color: #475569; font-size: 11.5px; font-style: normal; }
.kb-wlead { margin: 16px 0 0; border-left: 3px solid var(--vlm-accent); background: #f8fafc; padding: 10px 14px; color: #334155; font-size: 13.5px; line-height: 1.65; }
.kb-wbody { margin-top: 16px; }
.kb-wbody p { margin: 0 0 10px; color: #1f2937; font-size: 14px; line-height: 1.8; }
.kb-wlink { border: 0; border-bottom: 1px solid #93b4ff; background: transparent; padding: 0; color: var(--vlm-accent-deep); font: inherit; font-weight: 600; cursor: pointer; }
.kb-wlink:hover { background: var(--vlm-accent-weak); }
.kb-wsec { margin-top: 20px; }
.kb-wsec:first-child { margin-top: 0; }
.kb-wsec h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #1f2937; font-size: 12.5px; font-weight: 700; }
.kb-wsec h3 span { color: #94a3b8; font-weight: 500; font-variant-numeric: tabular-nums; }
.kb-wread .kb-wsec { margin-top: 24px; border-top: 1px solid var(--vlm-line); padding-top: 16px; }
.kb-wside { display: flex; min-height: 0; flex-direction: column; border-left: 1px solid var(--vlm-line); background: #fff; }
.kb-wside-bar { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--vlm-line); padding: 8px 12px 8px 16px; }
.kb-wside-bar .vlmops-btn { padding: 5px 10px; font-size: 12px; }
.kb-wside-body { min-height: 0; flex: 1; overflow-y: auto; padding: 16px; }
.kb-wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-wchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--vlm-line); background: #fff; padding: 4px 9px; color: #334155; font-size: 12px; cursor: pointer; }
.kb-wchip:hover { border-color: var(--vlm-accent); color: var(--vlm-accent-deep); }
.kb-wchip i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
.kb-issues { display: grid; border: 1px solid #fde68a; background: #fffdf5; }
.kb-issues.is-boxed { margin-top: 18px; border-color: var(--vlm-line); background: #fff; }
.kb-issue { display: grid; gap: 6px; border-bottom: 1px solid var(--vlm-line); padding: 12px 14px; }
.kb-issue:last-child { border-bottom: 0; }
.kb-issue > .kb-wtag { justify-self: start; }
.kb-issue p { margin: 0; color: #334155; font-size: 12.5px; line-height: 1.6; }
.kb-issue-page { justify-self: start; border: 0; background: transparent; padding: 0; color: var(--vlm-accent-deep); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.kb-issue-page:hover { text-decoration: underline; }
.kb-issue-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #94a3b8; font-size: 11px; }
.kb-issue-acts { display: flex; gap: 12px; }
.kb-issue-acts button { border: 0; background: transparent; padding: 0; color: var(--vlm-accent-deep); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.kb-issue-acts button.is-muted { color: var(--vlm-muted); font-weight: 500; }

/* 범례: 캔버스 왼쪽 아래에 띄운다. 페이지 유형은 눌러서 숨기고, 원본 문서와 충돌과 문제 표시는 설명만 한다 */
/* 처음 오른쪽 칸: 둘러보기 */

/* 추가와 수정 창의 위키 스위치 */
/* DEEP Parser 업로드 창의 개인정보 마스킹 스위치와 같은 꼴(36x20 알약, 16px 손잡이). 공용 버튼 초기화가 모서리를 없애지 않게 명시도를 올린다 */
button.kb-switch.kb-switch { position: relative; width: 36px; height: 20px; flex: 0 0 auto; border: 0; border-radius: 999px; background: #d4d4d4; padding: 0; cursor: pointer; transition: background .15s; }
button.kb-switch.kb-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.2); transition: transform .15s; }
button.kb-switch.kb-switch.is-on { background: var(--vlm-accent); }
button.kb-switch.kb-switch.is-on i { transform: translateX(16px); }
/* 공용 창의 각진 버튼 규칙(.vlmops-modal button, !important) 가운데 스위치만 알약 모양으로 남긴다. 스위치는 Hub 전체에서 둥글다 */
.vlmops-modal button.kb-switch { border-radius: 999px !important; }
.kb-switch:focus-visible { outline: 2px solid var(--vlm-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kb-switch, .kb-switch i { transition: none; } }

@media (max-width: 1100px) { .kb-wiki { grid-template-columns: 180px minmax(0, 1fr); } .kb-wread { padding: 24px; } }
@media (max-width: 760px) { .kb-wiki { grid-template-columns: 1fr; } .kb-wlist { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--vlm-line); } .kb-ktab { padding: 0 8px; } }

.kb-docs .kb-selbar { margin-top: 12px; pointer-events: auto; }

/* 지식베이스 카드 아이콘은 원형 칸에 둔다(2026-10-28 Benson). 공용 카드 아이콘(사각형)은 그대로 둔다 */

/* 개인정보 마스킹(2026-10-28, RFP SFR-018): 원본 위 가림 박스는 DEEP Parser와 같은 검은 칸, 표지는 회색 방패 */
.kb-mbox { position: absolute; z-index: 1; background: #111827; pointer-events: none; }
.kb-tname .kb-source.is-mask, .kb-vitem-txt small .kb-source.is-mask { color: #475569; }
.kb-tname .kb-source.is-plan, .kb-vitem-txt small .kb-source.is-plan { color: #b45309; }
.kb-tname .kb-source + .kb-source { margin-left: 8px; }
.kb-mchip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; background: #f1f5f9; padding: 2px 8px; color: #475569; font-size: 11px; font-weight: 600; white-space: nowrap; }
.kb-maskbox { display: grid; gap: 10px; margin-top: 2px; border: 1px solid var(--vlm-line); background: #fafafa; padding: 12px; }
.kb-maskbox > p { margin: 0; color: #64748b; font-size: 12px; }
.kb-maskbox label { display: flex; align-items: flex-start; gap: 8px; color: #1f2937; font-size: 13px; cursor: pointer; }
.kb-maskbox label input { width: 15px; height: 15px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--vlm-accent); }
.kb-maskbox label small { display: block; margin-top: 2px; color: #64748b; font-size: 11.5px; line-height: 1.5; }
.kb-maskbox .vlmops-input { height: 34px; }
/* 시행 예정 버전 */
.kb-banner.is-plan { border-bottom-color: #fde68a; background: #fffbeb; color: #92400e; }
.kb-vers li.is-plan { background: #fffdf5; }


/* 문서 머리: 원문 페이지 번호가 머리 위로 올라오지 않게 머리를 위에 둔다. 폭이 좁으면 단추를 아이콘만 남겨 문서 이름 자리를 지킨다 */
.kb-dhead > b { flex: 0 1 auto; min-width: 120px; }
.kb-dactions .vlmops-btn { gap: 4px; }
@media (max-width: 1599px) { .kb-dactions .kb-btxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kb-dactions .vlmops-btn { padding: 5px 8px; } }

/* 문서 상세를 DEEP Parser 작업 화면과 같게(2026-10-28 Benson): 목록, 공용 문서 보기 툴바와 한 장 보기, 결과 탭.
   모양은 Parser와 같은 유틸리티 클래스로 그리고, 여기에는 한 장 보기의 틀과 고른 청크 상자만 둔다 */
.kb-vres { border-left: 0; }
.kb-vlist .kb-vfilter { margin: 8px 0 0; }
.kb-vstage { position: relative; display: block; min-height: 0; }
.kb-vturn { position: relative; margin: 0 auto; }
.kb-vframe { position: absolute; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.08); transform-origin: center center; transition: transform .15s ease; }
.kb-vframe .kb-pdfpage { width: 100%; height: 100%; min-height: 0; }
.kb-vframe .kb-pdfpage img { width: 100%; height: 100%; }
.kb-tpage { height: 100%; overflow-y: auto; padding: 8% 9%; }
.kb-tpage .kb-pchunk { margin: 0 0 10px; }
.kb-tpage-none { margin: 0; color: #94a3b8; font-size: 12px; }
.kb-bbox { position: absolute; z-index: 3; border: 2px solid #2970ff; border-radius: 4px; background: rgba(41,112,255,.13); pointer-events: none; animation: kb-bbox-in .28s ease-out; }
.kb-bbox span { position: absolute; top: -24px; left: 0; padding: 2px 6px; border-radius: 4px; background: #2970ff; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.kb-bbox span.is-below { top: auto; bottom: -24px; }
@keyframes kb-bbox-in { from { opacity: 0; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .kb-bbox { animation: none; } .kb-vframe { transition: none; } }
.kb-vhead .kb-dtitle { min-width: 0; margin: 0; overflow: hidden; color: #1f2937; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kb-vhead .kb-dactions { margin-left: 0; }
/* 휴지통(2026-10-28 Benson): DEEP OCR, DEEP Parser 휴지통과 같은 표. 지식베이스 화면은 본문, 문서 상세는 팝업 */
/* 문서 표 머리의 휴지통: 행 삭제 단추와 같은 열, 오른쪽 끝에 붙인다 */
.kb-table th.kb-tacts .hub-list-trash { min-height: 28px; margin-right: -8px; }
.kb-vempty-trash { display: flex; justify-content: center; margin-top: -8px; }
/* 문서 표 아래 쪽 이동(Hub 문서 전체 보기의 아래 줄과 같다) */
.kb-docs .kb-dfoot { border: 1px solid var(--vlm-line); border-top: 0; background: #fff; padding: 0 24px; }
.kb-docs .kb-dfoot:empty { display: none; }
.kb-docs .kb-dend { align-items: center; gap: 8px; }
/* 창 안 단추를 각지게 하는 공용 규칙에서 스위치만 둥글게 둔다(DEEP Parser 업로드 창 스위치와 같은 모양) */
.vlmops-modal button.kb-hswitch { border-radius: 999px !important; }

/* 머리 탭: Hub 기본 밑줄 탭(DEEP Parser 결과 탭과 같음). 머리 아래 선에 밑줄을 맞춘다 */
.kb-ktabs { display: flex; align-self: stretch; align-items: stretch; gap: 4px; margin-right: 6px; }
.kb-ktabs .kb-ktab { background: transparent; cursor: pointer; }
.kb-ktabs .kb-ktab:focus-visible { outline: 2px solid var(--vlm-accent); outline-offset: -2px; }
/* 목록의 휴지통 단추 건수(워크플로우 목록 휴지통 단추와 같은 표시) */
.kb-tcount { font-style: normal; font-size: 11px; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }

/* 위키 정리(2026-10-28): 목록과 탭과 원본 문서 카드는 Hub 부품(유틸리티 클래스)으로 그린다 */
.kb-clamp2 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kb-wqueue { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; color: var(--vlm-muted); font-size: 11.5px; }
/* 원본 문서 보기(2026-11-04): 가운데 본문 자리에 문서 상세와 같은 뷰어를 연다 */
.kb-wmain.is-src { display: flex; flex-direction: column; overflow: hidden; padding: 0; background: var(--vlm-bg, #f5f7fa); }
.kb-wsrcbar { display: flex; min-height: 49px; align-items: center; gap: 10px; border-bottom: 1px solid var(--vlm-line); background: #fff; padding: 8px 16px; }
.kb-wsrcname { min-width: 0; overflow: hidden; color: #1f2937; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kb-wsrcpage { flex: none; color: var(--vlm-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.kb-wsrcbar .vlmops-btn { flex: none; margin-left: auto; padding: 5px 10px; font-size: 12px; }
.kb-wsrc.is-on { border-color: var(--vlm-accent); background: #f5f8ff; }   /* 문서 상세에서 고른 청크와 같은 표시 */
.kb-wread > h2:first-child { margin-top: 0; }




@media (max-width: 800px) { .kb-wiki { display:flex; flex-direction:column; overflow:auto; } .kb-wiki > * { flex:none; } .kb-wiki .kb-wlist { max-height:280px; border-right:0; border-bottom:1px solid var(--vlm-line); } .kb-wiki .kb-wside { min-height:240px; border-left:0; border-top:1px solid var(--vlm-line); } .kb-wiki .kb-wmain.is-src { height:75vh; } }

/* 문서 표를 Hub 문서 목록 보기에 맞춘다(2026-11-02): 칸 글씨 12px 회색, 파일명만 13px 진하게, 썸네일 32×40.
   문서 탭은 검색, 위키 탭처럼 전체 폭을 쓰고 좌우 여백을 머리 줄과 맞춘다 */
.kb-table td { font-size: 12px; color: #64748b; }
.kb-tname b { font-size: 13px; }
.kb-thumb.is-sm { overflow: hidden; border-radius: 4px; }
.kb-thumb.is-sm img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vlmops-content.kb-docs-full { width: 100%; padding-left: 16px; padding-right: 16px; }

/* 파싱 중 외곽선 빛(2026-11-02): 각도를 매 프레임이 아니라 72단계(초당 30번)로 돌려 칠하는 비용을 절반으로 줄인다. 모양은 같다 */
/* 문서 상세 왼쪽 목록 맨 위 [업로드]의 펼침 메뉴: 단추 폭에 맞춰 아래로 연다 */
.kb-upload-menu.is-left { top: calc(100% + 4px); right: 12px; left: 12px; z-index: 30; width: auto; min-width: 0; }

.kb-badge.is-gray { background: #f1f5f9; color: #475569; }

.vlmops-context-menu button:disabled { color: #cbd5e1; cursor: not-allowed; background: transparent; }

/* 예약 업로드(2026-11-03): 문서와 예약 문서 탭(Hub 공용 hub-ltabs), 예약 판이 덮을 칸 */
.kb-vdoc, .kb-vres { position: relative; }
.kb-vlist > .kb-ltabs { padding: 10px 12px 0; }
.kb-docs > .kb-ltabs { margin-bottom: 14px; }
.kb-docs > .kb-ltabs .hub-ltabs { max-width: 420px; }
.kb-vlist > .kb-ltabs .hub-ltabs { padding: 0 2px; }
.kb-vlist > .kb-ltabs .hub-ltab { flex: 1 1 auto; white-space: nowrap; gap: 4px; padding-left: 2px; padding-right: 2px; }
/* 휴지통 탭(2026-11-03): 문서 표 자리에 휴지통 표. 보관 안내는 도구 줄 가운데 */
.kb-trashdesc { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12.5px; color: rgb(var(--k-text2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 결과 탭 줄(2026-11-03): 좁을 때 가로로만 넘기고 스크롤바는 숨긴다. 탭 밑줄이 줄 아래 선과 겹치도록 1px 내려 세로 스크롤이 생기지 않게 한다 */
.kb-rtabbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: -1px; }
.kb-rtabbar::-webkit-scrollbar { display: none; }
/* 탭이 스크롤 영역 밖으로 1px 나가면 선택 밑줄 아래쪽이 잘린다(2026-11-10 Benson). 영역 안에 두어 2px을 그대로 보인다 */
.kb-rtabbar .kb-rtab { margin-bottom: 0; }

/* 지식베이스 추가와 수정 창(2026-11-10 Benson): DEEP Office 지식베이스 추가 창처럼 왼쪽 메뉴와 오른쪽 내용의 두 칸 */
.kb-cm { position: relative; z-index: 1; display: grid; grid-template-columns: 208px minmax(0, 1fr); width: min(860px, calc(100vw - 32px)); height: min(600px, calc(100vh - 48px)); overflow: hidden; border-radius: 0; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); outline: none; }
.kb-cm-nav { display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; border-right: 1px solid var(--vlm-line); background: #f8fafc; }
.kb-cm-nav h3 { margin: 4px 8px 14px; color: #0f172a; font-size: 16px; font-weight: 700; }
.kb-cm-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 0; background: transparent; color: #334155; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; }
.kb-cm-tab:hover { background: #eef2f7; }
.kb-cm-tab.is-on { background: #e0eaff; color: var(--vlm-accent-deep, #1b58d4); font-weight: 600; }
.kb-cm-tab svg { flex: none; }
.kb-cm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kb-cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 28px 16px; border-bottom: 1px solid var(--vlm-line); }
.kb-cm-head h4 { margin: 0; color: #0f172a; font-size: 17px; font-weight: 700; }
.kb-cm-head p { margin: 4px 0 0; color: #64748b; font-size: 12.5px; }
.kb-cm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 28px; }
.kb-cm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 28px; border-top: 1px solid var(--vlm-line); }
.kb-cm-row { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vlm-line); }
.kb-cm-slide { display: grid; grid-template-columns: minmax(0, 1fr) 220px 88px; align-items: start; gap: 20px; padding: 6px 0 22px; }
.kb-cm-slide + .kb-cm-slide { padding-top: 22px; border-top: 1px solid var(--vlm-line); }
.kb-cm-sl p { margin: 0; color: #0f172a; font-size: 14px; font-weight: 600; }
.kb-cm-sl small { display: block; margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.55; }
.kb-cm-sr { position: relative; padding-top: 2px; }
.kb-cm-sr input[type="range"] { width: 100%; height: 18px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.kb-cm-sr input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 0; background: linear-gradient(to right, var(--vlm-accent, #2970ff) var(--p, 0%), #e2e8f0 var(--p, 0%)); }
.kb-cm-sr input[type="range"]::-moz-range-track { height: 4px; border-radius: 0; background: linear-gradient(to right, var(--vlm-accent, #2970ff) var(--p, 0%), #e2e8f0 var(--p, 0%)); }
.kb-cm-sr input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border: 2px solid var(--vlm-accent, #2970ff); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); -webkit-appearance: none; appearance: none; }
.kb-cm-sr input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--vlm-accent, #2970ff); border-radius: 50%; background: #fff; }
.kb-cm-sr input[type="range"]:focus-visible { outline: 2px solid var(--vlm-accent, #2970ff); outline-offset: 4px; }
.kb-cm-ticks { position: relative; height: 16px; margin: 4px 9px 0; }
.kb-cm-ticks span { position: absolute; top: 0; transform: translateX(-50%); color: #64748b; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 슬라이더 값 상자(2026-11-10 Benson): 굵은 큰 글씨 대신 입력 상자 안에 담고 단위를 옅게 붙인다. 직접 입력해도 슬라이더가 따라온다 */
.kb-cm-num { position: relative; display: flex; align-items: center; height: 32px; margin-top: -7px; border: 1px solid var(--vlm-line); background: #fff; }
.kb-cm-num:focus-within { border-color: var(--vlm-accent, #2970ff); }
.kb-cm-num input { width: 100%; min-width: 0; height: 100%; padding: 0 28px 0 10px; border: 0; background: transparent; color: #0f172a; font: inherit; font-size: 13px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
.kb-cm-num input::-webkit-outer-spin-button, .kb-cm-num input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.kb-cm-num em { position: absolute; right: 10px; color: #94a3b8; font-size: 12px; font-style: normal; pointer-events: none; }
@media (max-width: 720px) { .kb-cm { grid-template-columns: 1fr; height: auto; max-height: calc(100vh - 32px); } .kb-cm-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--vlm-line); } .kb-cm-nav h3 { width: 100%; } .kb-cm-tab { width: auto; } .kb-cm-slide { grid-template-columns: 1fr; gap: 10px; } .kb-cm-num { width: 120px; margin-top: 0; } }

/* 위키 페이지의 콘텐츠 문제: 오른쪽 칸을 없애고(2026-11-10) 본문 위에 둔다 */
.kb-wpage-issues { margin: 0 0 16px; }

/* 위키를 끈 지식베이스의 위키 탭(2026-11-10): 누를 수 없음 */
.kb-ktab.is-off, .kb-ktab:disabled { color: #cbd5e1; cursor: not-allowed; }
.kb-ktab.is-off:hover { color: #cbd5e1; }

/* 위키 본문 제목 아래 업로드 일시(2026-11-10, DEEP Office 위키 본문과 같음) */
.kb-wdate { margin: 6px 0 0; color: #94a3b8; font-size: 12px; font-variant-numeric: tabular-nums; }