/* =============================================================
   영업 지식AI — 맥 고밀도. 범위: #knowledge-content 안쪽 + 이 화면 창(body 에 붙는 .kb-ui.kb-overlay).
   값은 ui-tokens.css 에서만. knowledge.js 의 화면 전용 스타일(_kbInstallStyle, .kb-ui)은 그대로 두고 그 위에 덮는다
   — 색은 화면 원래 남색 · 노란 표시 그대로(사용자 요청), 둥근 알약 단추 → 맥 단추, 큰 카드 → 묶음, 제목 띠 → 제목 한 줄.
   채운 남색 단추는 화면마다 하나: AI 도우미 [질문하기] · 지식 관리 [등록하기] · 고치기 창 [저장].
   되돌리기: index.tsx 의 이 파일 <link> 한 줄 + #knowledge-content class(kn-mac → toss-knowledge-page).
   ============================================================= */
html #knowledge-content.kn-mac{ background:var(--ui-bg); color:var(--ui-text-1) }
html #knowledge-content.kn-mac, html #knowledge-content.kn-mac *{ font-family:var(--ui-font) }
html #knowledge-content .kn-loading{ padding:48px 0; text-align:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }

/* 화면 전용 색: 바탕 · 선 · 글자만 맥 토큰으로. 남색(--kb-brand) · 노란 표시(--kb-mark)는 knowledge.js 원래 색 그대로 */
html #knowledge-content .kb-ui{ --kb-ink:var(--ui-text-1); --kb-bg:var(--ui-bg); --kb-line:var(--ui-line); --kb-field:var(--ui-line-control); --kb-soft:var(--ui-fill); --kb-error:var(--ui-danger); font-size:var(--ui-text-body); line-height:var(--ui-leading) }
html #knowledge-content .kb-ui ::placeholder{ color:var(--ui-text-3) }
html #knowledge-content .kb-ui button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }
html #knowledge-content .kb-page{ background:transparent }

/* 제목 한 줄: 제목 · 건수 설명 · (오른쪽) AI 도우미 | 지식 관리 */
html #knowledge-content .kb-head{ padding:4px 16px 0; background:transparent; border:0 }
html #knowledge-content .kb-head-in, html #knowledge-content .kb-main{ max-width:1040px; margin:0 }
html #knowledge-content .kb-head-in{ min-height:36px; margin-top:4px; flex-wrap:nowrap }
html #knowledge-content .kb-head-in > div:first-child{ display:flex; align-items:baseline; gap:10px; min-width:0 }
html #knowledge-content .kb-title{ font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); line-height:1.3; white-space:nowrap }
html #knowledge-content .kb-sub{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-num{ color:var(--kb-brand); font-weight:var(--ui-weight-bold) }
html #knowledge-content .kb-main{ padding:10px 16px 32px; gap:10px }

/* 분할 단추(화면 · 말투 · 기간) */
html #knowledge-content .kb-seg{ padding:2px; gap:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #knowledge-content .kb-ui .kb-seg-btn, html #knowledge-content #tab-knowledge #kb-tab-chat, html #knowledge-content #tab-knowledge #kb-tab-manage{ min-height:24px !important; height:24px; padding:0 14px; border-radius:calc(var(--ui-radius-control) - 2px) !important; font-size:var(--ui-text-footnote); line-height:24px; cursor:default }
html #knowledge-content .kb-ui .kb-mode .kb-seg-btn{ min-width:0; padding:0 14px }
html #knowledge-content .kb-ui .kb-seg-btn[aria-checked="true"]{ background:var(--kb-brand); color:var(--ui-on-accent); font-weight:var(--ui-weight-semibold); box-shadow:none !important }
html #knowledge-content .kb-toolbar{ gap:8px }
html #knowledge-content .kb-mode{ gap:8px 10px }
html #knowledge-content .kb-caption, html #knowledge-content .kb-small, html #knowledge-content .kb-hint{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }

/* 단추: 맥 흰 단추 · 채운 파랑 · 빨간 글자 */
html #knowledge-content .kb-ui .kb-btn{ min-height:var(--ui-control); height:var(--ui-control); padding:0 12px; gap:0; border:0; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface); box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular); cursor:default }
html #knowledge-content .kb-ui .kb-btn svg{ display:none }
html #knowledge-content .kb-ui .kb-btn-outline:hover, html #knowledge-content .kb-ui .kb-btn-danger:hover{ background:var(--ui-fill-subtle) }
html #knowledge-content .kb-ui .kb-btn-danger{ color:var(--ui-danger) }
html #knowledge-content .kb-ui .kb-btn-sm{ min-height:var(--ui-control-sm); height:var(--ui-control-sm); padding:0 10px; font-size:var(--ui-text-footnote) }
html #knowledge-content .kb-ui .kb-btn-lg{ padding:0 18px }
html #knowledge-content .kb-ui .kb-btn-primary{ background:var(--ui-surface); color:var(--ui-text-1) }
html #knowledge-content .kb-ui .kb-ask-btn, html #knowledge-content .kb-ui #kb-save-btn, html #knowledge-content .kb-ui .kb-sheet .kb-btn-primary{ background:var(--kb-brand); color:var(--ui-on-accent); box-shadow:none !important; font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-ui .kb-ask-btn:hover, html #knowledge-content .kb-ui #kb-save-btn:hover, html #knowledge-content .kb-ui .kb-sheet .kb-btn-primary:hover{ background:var(--kb-brand); filter:brightness(.82) }
html #knowledge-content .kb-ui .kb-btn-primary:disabled{ opacity:.55 }
html #knowledge-content .kb-ui .kb-link{ color:var(--kb-brand); text-decoration:none; cursor:default }
html #knowledge-content .kb-ui .kb-link:hover{ text-decoration:underline; color:var(--kb-brand) }
html #knowledge-content .kb-ui .kb-danger-run{ min-height:var(--ui-control) !important; padding:0 14px; border:0; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-control); color:var(--ui-danger); font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-ui .kb-danger-run:disabled{ border:0; color:var(--ui-text-3); font-weight:var(--ui-weight-regular) }

/* 묶음(카드) */
html #knowledge-content .kb-card{ padding:14px 16px; border:0; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #knowledge-content .kb-section-head{ margin-bottom:10px; gap:8px 12px; align-items:center }
html #knowledge-content .kb-h2{ font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold); line-height:1.35 }
html #knowledge-content .kb-lead{ margin-top:1px; font-size:var(--ui-text-footnote); color:var(--ui-text-2); line-height:1.45 }

/* 대화 */
html #knowledge-content .kb-chat{ gap:14px }
html #knowledge-content #kb-chat-messages{ gap:14px; max-height:min(620px, calc(100vh - 330px)) }
html #knowledge-content .kb-intro{ font-size:var(--ui-text-body); color:var(--ui-text-2); line-height:1.6 }
html #knowledge-content .kb-bubble{ max-width:72%; padding:7px 12px; border-radius:16px 16px 4px 16px; background:var(--kb-brand); color:var(--ui-on-accent); font-size:var(--ui-text-callout); line-height:1.55 }
html #knowledge-content .kb-answer{ gap:8px }
html #knowledge-content .kb-answer-head{ font-size:var(--ui-text-footnote); color:var(--ui-text-2); gap:6px }
html #knowledge-content .kb-badge{ padding:0 6px; border:1px solid var(--kb-brand); border-radius:var(--ui-radius-row); background:transparent; color:var(--kb-brand); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-badge.is-error{ background:var(--ui-danger-tint); color:var(--ui-danger) }
html #knowledge-content .kb-answer-body{ padding:10px 14px; border-radius:var(--ui-radius-group); background:var(--ui-fill-subtle); font-size:var(--ui-text-callout); line-height:1.65 }
html #knowledge-content .kb-ui .kb-ref{ min-width:18px; height:18px; padding:0 4px; border-radius:var(--ui-radius-pill) !important; background:var(--kb-brand); color:var(--ui-on-accent); font-size:var(--ui-text-caption); cursor:default }
html #knowledge-content .kb-check-note{ padding:8px 12px; border-radius:var(--ui-radius-group); font-size:var(--ui-text-body); line-height:1.55 }
html #knowledge-content .kb-check-title{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-warn{ display:flex; gap:8px; padding:7px 12px; border:0; border-radius:var(--ui-radius-group); background:var(--ui-danger-tint); font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-src{ gap:6px }
html #knowledge-content .kb-src-row{ gap:6px }
html #knowledge-content .kb-src-label{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-ui .kb-src-chip{ min-height:var(--ui-control-sm); padding:0 8px; gap:5px; border:0; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface); box-shadow:var(--ui-elev-control) !important; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); cursor:default }
html #knowledge-content .kb-ui .kb-src-chip[aria-expanded="true"]{ padding:0 8px; border:0; background:var(--kb-mark); box-shadow:inset 0 0 0 1px var(--kb-brand) !important }
html #knowledge-content .kb-src-num{ min-width:16px; height:16px; border-radius:var(--ui-radius-pill); background:var(--kb-brand); color:var(--ui-on-accent); font-size:var(--ui-text-caption) }
html #knowledge-content .kb-src-cat{ color:var(--ui-text-2) }
html #knowledge-content .kb-src-box{ padding:10px 12px; border-radius:var(--ui-radius-group); font-size:var(--ui-text-body); line-height:1.55 }
html #knowledge-content .kb-src-open svg{ display:none }
html #knowledge-content .kb-src-open{ font-size:var(--ui-text-footnote) }
html #knowledge-content .kb-actions{ gap:6px; align-items:center }
html #knowledge-content .kb-loading, html #knowledge-content .kb-note{ padding:9px 12px; border-radius:var(--ui-radius-group); background:var(--ui-fill-subtle); font-size:var(--ui-text-body) }
html #knowledge-content .kb-note.is-error{ border:0; background:var(--ui-danger-tint) }
html #knowledge-content .kb-no-knowledge{ gap:4px; padding:10px 12px; border:0; border-radius:var(--ui-radius-group); box-shadow:inset 0 0 0 1px var(--ui-line-dashed) }
html #knowledge-content .kb-nk-title{ font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-nk-title svg{ display:none }
html #knowledge-content .kb-nk-title::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-warning-dot) }
html #knowledge-content .kb-nk-text{ font-size:var(--ui-text-body); color:var(--ui-text-2) }
html #knowledge-content .kb-no-knowledge .kb-actions{ margin-top:4px }

/* 평가 */
html #knowledge-content .kb-rate{ gap:4px; padding:1px 4px; border-width:1px; border-radius:var(--ui-radius-control) }
html #knowledge-content .kb-rate.is-nudge{ background:var(--kb-mark); border-color:var(--kb-brand) }
html #knowledge-content .kb-rate-q{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #knowledge-content .kb-ui .kb-rate-btn{ min-height:var(--ui-control-sm) !important; padding:0 8px; gap:4px; border:0; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface); box-shadow:var(--ui-elev-control) !important; font-size:var(--ui-text-footnote); cursor:default }
html #knowledge-content .kb-ui .kb-rate-btn[aria-pressed="true"]{ background:var(--kb-brand); color:var(--ui-on-accent); font-weight:var(--ui-weight-semibold); box-shadow:none !important }
html #knowledge-content .kb-rate-why, html #knowledge-content .kb-rate-done{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-rate-note{ padding:8px 10px; border-radius:var(--ui-radius-group); background:var(--ui-fill-subtle) }

/* 질문칸 · 칩 */
html #knowledge-content .kb-ask{ gap:8px; padding-top:12px }
html #knowledge-content .kb-chip-group{ gap:6px }
html #knowledge-content .kb-chip-label{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #knowledge-content .kb-chip-row{ gap:6px }
html #knowledge-content .kb-ui .kb-chip{ min-height:var(--ui-control-sm); padding:0 9px; gap:4px; border:0; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-footnote); cursor:default }
html #knowledge-content .kb-ui .kb-chip:hover{ background:var(--ui-fill-hover) }
html #knowledge-content .kb-ui .kb-chip.is-tag{ border:0; background:var(--ui-fill-subtle) }
html #knowledge-content .kb-ui .kb-chip[aria-pressed="true"], html #knowledge-content .kb-ui .kb-chip[aria-checked="true"]{ border:0; background:var(--kb-brand); color:var(--ui-on-accent); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-chip[aria-pressed="true"] .kb-num{ color:var(--ui-on-accent) }
html #knowledge-content .kb-askbox{ gap:8px; padding:6px 6px 6px 12px; border:0; border-radius:var(--ui-radius-group); box-shadow:var(--ui-elev-field) }
html #knowledge-content .kb-askbox:focus-within{ box-shadow:var(--ui-focus-ring) }
html #knowledge-content .kb-ui .kb-ask-input{ font-size:var(--ui-text-callout); line-height:1.55; min-height:24px; border:0 !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important }
html #knowledge-content .kb-ui .kb-ask-btn{ min-height:var(--ui-control); padding:0 14px }

/* 지식 관리: 등록 · 목록 */
html #knowledge-content .kb-form{ gap:10px }
html #knowledge-content .kb-label{ margin-bottom:4px; font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-label small{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-ui .kb-field{ padding:6px 10px; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-body); line-height:1.55 }
html #knowledge-content .kb-ui .kb-field:focus{ box-shadow:var(--ui-focus-ring) !important }
html #knowledge-content .kb-ui .kb-field-sm{ min-height:var(--ui-control); height:var(--ui-control); padding:0 10px }
html #knowledge-content .kb-form-foot{ gap:8px }
html #knowledge-content .kb-ui .kb-search-box .kb-field{ width:240px; min-height:var(--ui-control); padding-left:30px; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important; box-shadow:none !important }
html #knowledge-content .kb-search-box svg{ left:9px; width:13px; height:13px }
html #knowledge-content .kb-search-box svg *{ stroke:var(--ui-text-2) }
html #knowledge-content .kb-filters{ gap:6px; margin-bottom:10px }
html #knowledge-content .kb-list{ border:0; border-radius:var(--ui-radius-group); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #knowledge-content .kb-item{ gap:12px; padding:8px 12px; border-bottom:var(--ui-hairline) solid var(--ui-line); align-items:center }
@media (hover:hover){ html #knowledge-content .kb-item:hover{ background:var(--ui-fill-subtle) } }
html #knowledge-content .kb-item-main{ gap:2px }
html #knowledge-content .kb-item-title{ font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
html #knowledge-content .kb-item-title.hidden + *, html #knowledge-content .kb-item-title:not(.hidden)[id$="-full"]{ -webkit-line-clamp:unset }
html #knowledge-content .kb-item-answer{ padding-left:0; border-left:0; font-size:var(--ui-text-footnote); color:var(--ui-text-2); line-height:1.5; -webkit-line-clamp:1 }
html #knowledge-content .kb-item-meta{ gap:2px 8px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-cat{ padding:0 6px; border:1px solid var(--kb-brand); border-radius:var(--ui-radius-row); color:var(--kb-brand); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-item-imgs img{ width:36px; height:36px; border-radius:var(--ui-radius-row) }
html #knowledge-content .kb-item-actions{ gap:4px }
html #knowledge-content .kb-more{ padding-top:10px }
html #knowledge-content .kb-ui .kb-more-btn{ min-height:var(--ui-control); font-weight:var(--ui-weight-regular) }
html #knowledge-content .kb-more-sub{ color:var(--ui-text-2) }
html #knowledge-content .kb-empty{ padding:28px 0; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-error-text{ font-size:var(--ui-text-footnote) }

/* 관리자 도구 */
html #knowledge-content .kb-admin{ gap:8px }
html #knowledge-content .kb-admin-h{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #knowledge-content .kb-admin-title{ font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold) }
html #knowledge-content .kb-admin-row{ gap:6px; margin-top:10px }
html #knowledge-content .kb-gap-totals{ gap:8px; margin:10px 0 }
html #knowledge-content .kb-gap-total{ padding:8px 12px; border:0; border-radius:var(--ui-radius-group); background:var(--ui-fill-subtle) }
html #knowledge-content .kb-gap-total b{ font-size:var(--ui-text-title2); color:var(--kb-brand); font-variant-numeric:tabular-nums }
html #knowledge-content .kb-gap-total span{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-gap-list{ border:0; border-radius:var(--ui-radius-group); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #knowledge-content .kb-gap-item{ padding:8px 12px; border-top:var(--ui-hairline) solid var(--ui-line) }
html #knowledge-content .kb-gap-q{ font-size:var(--ui-text-body) }
html #knowledge-content .kb-gap-meta, html #knowledge-content .kb-gap-note, html #knowledge-content .kb-gap-ans{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #knowledge-content .kb-gap-kind{ padding:0 5px; border:0; border-radius:var(--ui-radius-row); background:var(--ui-fill); font-size:var(--ui-text-caption); color:var(--ui-text-1) }
html #knowledge-content .kb-alert{ margin-top:10px; padding:10px 12px; border:0; border-radius:var(--ui-radius-group); background:var(--ui-danger-tint) }
html #knowledge-content .kb-alert-title{ font-size:var(--ui-text-body) }

/* ── 맥 강하게(사용자 요청): 창 하나 · 옆 목록 · 메시지 · 시트 ── */
/* AI 도우미 = 메시지 앱: 카드 대신 창 하나, 내 질문 오른쪽 남색 말풍선 · AI 답 왼쪽 회색 말풍선, 질문칸은 아래 둥근 막대 */
html #knowledge-content .kb-chat{ gap:0; padding:0; overflow:hidden; border-radius:var(--ui-radius-panel); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line), var(--ui-elev-raised) }
html #knowledge-content #kb-chat-messages{ gap:12px; height:calc(100vh - 300px); height:calc(100dvh - 300px); min-height:320px; max-height:none; padding:16px 16px 12px; background:var(--ui-surface) !important }
html #knowledge-content .kb-intro{ align-self:center; max-width:420px; margin:24px auto; text-align:center; font-size:var(--ui-text-body); color:var(--ui-text-2) }
html #knowledge-content .kb-bubble{ padding:6px 12px; border-radius:18px 18px 4px 18px; font-size:var(--ui-text-callout) }
html #knowledge-content .kb-answer{ align-self:flex-start; max-width:82%; gap:6px }
html #knowledge-content .kb-answer-head{ padding-left:12px }
html #knowledge-content .kb-answer-body{ padding:8px 12px; border-radius:18px 18px 18px 4px; background:var(--ui-fill); color:var(--ui-text-1) }
html #knowledge-content .kb-check-note{ margin-left:0; border:0; background:var(--ui-fill-subtle) }
html #knowledge-content .kb-src, html #knowledge-content .kb-actions{ padding-left:4px }
html #knowledge-content .kb-no-knowledge{ align-self:flex-start; max-width:82%; border-radius:18px 18px 18px 4px; background:var(--ui-fill); box-shadow:none }
html #knowledge-content .kb-loading{ align-self:flex-start; border-radius:18px 18px 18px 4px; background:var(--ui-fill) }
html #knowledge-content .kb-ui .kb-actions > .kb-btn{ height:var(--ui-control-sm); min-height:var(--ui-control-sm); padding:0 8px; font-size:var(--ui-text-footnote) }
html #knowledge-content .kb-ask{ gap:6px; padding:8px 12px 10px; border-top:var(--ui-hairline) solid var(--ui-line); background:var(--ui-material, var(--ui-surface-alt)) }
html #knowledge-content .kb-askbox{ padding:3px 3px 3px 14px; border-radius:18px; background:var(--ui-surface); box-shadow:inset 0 0 0 1px var(--ui-line-control) }
html #knowledge-content .kb-askbox:focus-within{ box-shadow:inset 0 0 0 1px var(--kb-brand), var(--ui-focus-ring) }
html #knowledge-content .kb-ui .kb-ask-btn{ min-height:28px; height:28px; border-radius:14px !important; padding:0 14px }
html #knowledge-content .kb-ask-help{ text-align:center; color:var(--ui-text-3) }
html #knowledge-content #kb-suggestion-keywords{ flex-wrap:nowrap }
html #knowledge-content #kb-keyword-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
html #knowledge-content #kb-keyword-chips::-webkit-scrollbar{ display:none }
html #knowledge-content #kb-keyword-chips .kb-chip{ flex:none }
html #knowledge-content .kb-follow-hint{ text-align:center }

/* 지식 관리 = 위 지식 등록 묶음(원래 자리) + 메일 · 메모 앱식 목록: 왼쪽 분류 · 태그 | 오른쪽 위 막대(건수 · 검색) + 다섯 줄 보이는 줄 목록 */
html #knowledge-content .kb-lib{ display:grid; grid-template-columns:200px minmax(0,1fr); grid-template-rows:auto 1fr; padding:0; overflow:hidden; border-radius:var(--ui-radius-panel); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line), var(--ui-elev-raised) }
html #knowledge-content .kb-lib > .kb-section-head{ grid-column:2; grid-row:1; flex-wrap:nowrap; margin:0; padding:8px 12px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #knowledge-content .kb-lib > .kb-section-head > div:first-child{ display:flex; align-items:baseline; gap:8px; margin-right:auto; min-width:0 }
html #knowledge-content .kb-lib .kb-h2{ white-space:nowrap }
html #knowledge-content .kb-ui .kb-lib .kb-search-box .kb-field{ width:220px }
html #knowledge-content .kb-lib > #kb-filter-bar{ grid-column:1; grid-row:1 / span 2; min-height:100%; padding:10px 8px; background:var(--ui-surface-alt); border-right:var(--ui-hairline) solid var(--ui-line) }
html #knowledge-content .kb-lib > #kb-list-wrap{ grid-column:2; grid-row:2; min-width:0 }
/* 옆 목록: 칩 → 한 줄씩(이름 · 오른쪽 건수), 고른 줄은 남색 */
html #knowledge-content .kb-lib .kb-filters{ gap:12px; margin:0 }
html #knowledge-content .kb-lib .kb-chip-group{ flex-direction:column; align-items:stretch; gap:1px }
html #knowledge-content .kb-lib .kb-chip-label{ width:auto; padding:0 8px 4px; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #knowledge-content .kb-lib .kb-chip-row{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:1px; width:auto; max-width:none; margin:0; padding:0; overflow:visible }
html #knowledge-content .kb-ui .kb-lib .kb-chip, html #knowledge-content .kb-ui .kb-lib .kb-chip.is-tag{ display:flex; justify-content:flex-start; width:100%; height:26px; min-height:26px !important; padding:0 8px; border-radius:var(--ui-radius-row) !important; background:transparent; font-size:var(--ui-text-body); text-align:left; white-space:nowrap }
html #knowledge-content .kb-ui .kb-lib .kb-chip:hover{ background:var(--ui-fill-subtle) }
html #knowledge-content .kb-lib .kb-chip .kb-num{ margin-left:auto; padding-left:8px; color:var(--ui-text-2); font-weight:var(--ui-weight-regular); font-variant-numeric:tabular-nums }
html #knowledge-content .kb-lib .kb-chip .kb-check{ display:none !important }
html #knowledge-content .kb-ui .kb-lib .kb-chip[aria-pressed="true"]{ background:var(--kb-brand); color:var(--ui-on-accent) }
html #knowledge-content .kb-lib .kb-chip[aria-pressed="true"] .kb-num{ color:var(--ui-on-accent) }
html #knowledge-content .kb-lib .kb-filters > div:last-child > .kb-link{ padding:0 8px }
/* 줄 목록: 제목 한 줄 · 내 대응 한 줄 · 분류 · 날짜 · 작성자, 오른쪽 [수정] [삭제] 글자 단추 */
html #knowledge-content .kb-lib .kb-list{ border-radius:0; box-shadow:none; overflow-y:auto; overscroll-behavior:contain; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #knowledge-content .kb-lib .kb-item{ gap:10px; padding:7px 12px; align-items:center }
html #knowledge-content .kb-lib .kb-item-title{ -webkit-line-clamp:1 }
html #knowledge-content .kb-lib .kb-cat{ padding:0; border:0; color:var(--kb-brand) }
html #knowledge-content .kb-ui .kb-lib .kb-item-actions .kb-btn{ height:var(--ui-control-sm); min-height:var(--ui-control-sm); padding:0 6px; background:transparent; box-shadow:none !important; color:var(--kb-brand); font-size:var(--ui-text-footnote) }
html #knowledge-content .kb-ui .kb-lib .kb-item-actions .kb-btn-danger{ color:var(--ui-danger) }
html #knowledge-content .kb-ui .kb-lib .kb-item-actions .kb-btn:hover{ background:var(--ui-fill-subtle) }
html #knowledge-content .kb-lib .kb-more{ padding:8px 0 10px }
html #knowledge-content .kb-lib .kb-empty{ padding:40px 16px }

/* 관리자 도구 = 시스템 설정: 묶음 위 회색 머리글 · 숫자 4개 한 줄 */
html #knowledge-content .kb-admin{ gap:6px; margin-top:6px }
html #knowledge-content .kb-admin-h{ padding:0 4px; font-size:var(--ui-text-caption); text-transform:none }
html #knowledge-content .kb-admin .kb-card{ border-radius:var(--ui-radius-group) }
html #knowledge-content .kb-gap-totals{ gap:0; border-radius:var(--ui-radius-group); background:var(--ui-fill-subtle) }
html #knowledge-content .kb-gap-total{ background:transparent; border-radius:0 }
html #knowledge-content .kb-gap-total + .kb-gap-total{ box-shadow:inset var(--ui-hairline) 0 0 var(--ui-line) }
html #knowledge-content .kb-ui .kb-admin-row select.kb-field{ width:auto; flex:0 1 280px; box-shadow:var(--ui-elev-control) !important }

/* 창(맥 시트) — 고치기 · 전체 보기 창은 body 에 붙는다(.kb-ui.kb-overlay) */
html .kb-ui.kb-overlay{ --kb-ink:var(--ui-text-1); --kb-bg:var(--ui-bg); --kb-line:var(--ui-line); --kb-field:var(--ui-line-control); --kb-error:var(--ui-danger); background:var(--ui-scrim); font-family:var(--ui-font); font-size:var(--ui-text-body) }
html .kb-ui.kb-overlay *{ font-family:var(--ui-font) }
html .kb-ui.kb-overlay .kb-sheet{ max-width:600px; border:0; border-radius:var(--ui-radius-sheet); background:var(--ui-bg); box-shadow:var(--ui-elev-sheet) }
html .kb-ui.kb-overlay .kb-sheet-bar{ min-height:44px; padding:6px 12px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html .kb-ui.kb-overlay .kb-sheet-title{ font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) !important }
html .kb-ui.kb-overlay .kb-sheet-body{ padding:12px 16px; gap:10px }
html .kb-ui.kb-overlay .kb-sheet-foot{ padding:10px 16px; background:var(--ui-surface); border-top:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html .kb-ui.kb-overlay .kb-label{ margin-bottom:4px; font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html .kb-ui.kb-overlay .kb-label small, html .kb-ui.kb-overlay .kb-hint{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html .kb-ui.kb-overlay .kb-src-a{ font-size:var(--ui-text-callout); line-height:1.6 }
html .kb-ui.kb-overlay .kb-field{ padding:6px 10px; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-body); line-height:1.55 }
html .kb-ui.kb-overlay .kb-field:focus{ box-shadow:var(--ui-focus-ring) !important }
html .kb-ui.kb-overlay .kb-field-sm{ min-height:var(--ui-control); height:var(--ui-control); padding:0 10px }
html .kb-ui.kb-overlay .kb-link{ color:var(--kb-brand); text-decoration:none; font-size:var(--ui-text-body); cursor:default }
html .kb-ui.kb-overlay .kb-link:hover{ text-decoration:underline }
html .kb-ui.kb-overlay .kb-btn{ min-height:var(--ui-control); height:var(--ui-control); padding:0 14px; border:0; border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body); cursor:default }
html .kb-ui.kb-overlay .kb-btn-primary{ background:var(--kb-brand); color:var(--ui-on-accent); box-shadow:none !important; font-weight:var(--ui-weight-semibold) }
html .kb-ui.kb-overlay .kb-btn-primary:hover{ background:var(--kb-brand); filter:brightness(.82) }
html .kb-ui.kb-overlay button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }
@media (max-width:767px){
  html .kb-ui.kb-overlay .kb-sheet{ max-width:none; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 }
  html .kb-ui.kb-overlay .kb-btn{ min-height:var(--ui-control-mobile); height:var(--ui-control-mobile) }
  html .kb-ui.kb-overlay .kb-field-sm{ height:var(--ui-control-mobile) }
}

@media (max-width:767px){
  html #knowledge-content .kb-head{ padding:4px 12px 0 }
  html #knowledge-content .kb-head-in{ flex-wrap:wrap; flex-direction:column; align-items:stretch; gap:8px }
  html #knowledge-content .kb-head-in > div:first-child{ flex-wrap:wrap; gap:2px 8px }
  html #knowledge-content .kb-main{ padding:8px 12px 32px; gap:8px }
  html #knowledge-content .kb-card{ padding:12px }
  html #knowledge-content .kb-ui .kb-seg .kb-seg-btn, html #knowledge-content #tab-knowledge #kb-tab-chat, html #knowledge-content #tab-knowledge #kb-tab-manage{ min-height:32px !important; height:32px; line-height:32px }
  html #knowledge-content .kb-ui .kb-btn, html #knowledge-content .kb-ui .kb-chip, html #knowledge-content .kb-ui .kb-src-chip, html #knowledge-content .kb-ui .kb-rate-btn, html #knowledge-content .kb-ui .kb-danger-run{ min-height:var(--ui-control-mobile) !important; height:auto }
  html #knowledge-content .kb-ui .kb-ask-btn{ min-height:var(--ui-control-mobile) !important }
  html #knowledge-content .kb-ui .kb-field-sm{ height:var(--ui-control-mobile) }
  /* 강한 맥 · 휴대폰: 옆 목록 → 위 가로 칩 두 줄, 위 막대 두 줄, 시트는 아래에서 */
  html #knowledge-content .kb-lib{ display:block }
  html #knowledge-content .kb-lib > .kb-section-head{ flex-wrap:wrap; padding:10px 12px 8px; border-bottom:0 }
  html #knowledge-content .kb-lib > #kb-filter-bar{ min-height:0; padding:0 0 8px; background:transparent; border-right:0; border-bottom:var(--ui-hairline) solid var(--ui-line) }
  html #knowledge-content .kb-lib .kb-filters{ gap:6px }
  html #knowledge-content .kb-lib .kb-chip-group{ flex-direction:row; align-items:center; gap:0 }
  html #knowledge-content .kb-lib .kb-chip-label{ flex:none; width:40px; padding:0 0 0 12px }
  html #knowledge-content .kb-lib .kb-chip-row{ flex-direction:row; flex:1; min-width:0; gap:6px; margin:0; padding:0 12px 0 0; overflow-x:auto; scrollbar-width:none }
  html #knowledge-content .kb-ui .kb-lib .kb-chip, html #knowledge-content .kb-ui .kb-lib .kb-chip.is-tag{ width:auto; flex:none; height:30px; min-height:30px !important; padding:0 10px; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill); font-size:var(--ui-text-footnote) }
  html #knowledge-content .kb-lib .kb-chip .kb-num{ padding-left:4px }
  html #knowledge-content .kb-lib .kb-filters > div:last-child > .kb-link{ padding:0 12px }
  html #knowledge-content .kb-ui .kb-lib .kb-search-box .kb-field{ width:100% }
  html #knowledge-content .kb-lib .kb-list{ margin:0 }
  html #knowledge-content .kb-card.kb-chat{ padding:0; border-radius:var(--ui-radius-group) }
  html #knowledge-content .kb-lib .kb-item{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:2px 8px }
  html #knowledge-content .kb-lib .kb-item-main{ flex:1 1 100% }
  html #knowledge-content .kb-lib .kb-item-actions{ margin:0 0 -4px auto }
  html #knowledge-content #kb-chat-messages{ height:auto; min-height:0; max-height:none; padding:12px }
  html #knowledge-content .kb-answer, html #knowledge-content .kb-no-knowledge{ max-width:94% }
  html #knowledge-content .kb-ask{ position:sticky; bottom:0; z-index:2 }
  /* 칩 줄(주제 · 분류 · 태그 · 자주 묻는 주제): 묶음 폭 안에서만 옆으로 밀기 — 카드 · 화면 밖으로 벗어나지 않게 */
  html #knowledge-content .kb-chip-group{ min-width:0; max-width:100% }
  html #knowledge-content .kb-chip-row{ box-sizing:border-box; width:calc(100% + 24px); max-width:calc(100% + 24px); min-width:0; margin:0 -12px; padding:0 12px 2px; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-padding:0 12px }
  html #knowledge-content .kb-ui .kb-chip{ flex:none; min-height:32px !important; height:32px; padding:0 12px }
  /* 아쉬워요 이유 칸: 이유 4개는 줄바꿈(회색 칸 밖으로 안 나가게), 메모칸 한 줄 → [보내기] [건너뛰기] 나란히 */
  html #knowledge-content .kb-rate-note .kb-chip-row{ width:100%; max-width:100%; margin:0; padding:0; flex-wrap:wrap; overflow:visible }
  html #knowledge-content .kb-ui .kb-rate-note .kb-field{ flex:1 1 100%; min-width:0 }
  html #knowledge-content .kb-ui .kb-rate-note .kb-btn{ flex:1 }
  /* 위 막대: 말투 분할 단추 + [새 대화] 한 줄, 설명은 아래 */
  html #knowledge-content .kb-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px 8px }
  html #knowledge-content .kb-mode{ width:auto; min-width:0 }
  html #knowledge-content .kb-ui .kb-toolbar > .kb-btn{ width:auto; min-height:32px !important; height:32px; padding:0 12px }
  /* 질문칸: 바깥 상자 하나만(안쪽 입력칸 테두리 · 흰 바탕 없음) */
  html #knowledge-content .kb-ui .kb-ask-input{ border:0 !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important; padding:6px 0 }
  html #knowledge-content .kb-askbox{ align-items:center }
  /* 지식 목록: 카드 안 또 하나의 테두리 상자 → 카드 폭 가득 줄 목록 */
  html #knowledge-content .kb-search-box{ width:100% }
  html #knowledge-content .kb-ui .kb-search-box .kb-field{ width:100%; height:var(--ui-control-mobile) }
  html #knowledge-content .kb-list{ margin:0 -12px; border-radius:0; box-shadow:none; border-top:var(--ui-hairline) solid var(--ui-line); border-bottom:var(--ui-hairline) solid var(--ui-line) }
  html #knowledge-content .kb-item{ flex-direction:column; align-items:stretch; gap:4px; padding:10px 12px }
  /* 수정 · 삭제: 큰 두 단추 → 줄 오른쪽 아래 글자 단추 */
  html #knowledge-content .kb-item-actions{ width:auto; justify-content:flex-end; gap:2px; margin:-2px -6px -4px 0 }
  html #knowledge-content .kb-ui .kb-item-actions .kb-btn{ flex:none; min-height:32px !important; height:32px; padding:0 8px; background:transparent; box-shadow:none !important; color:var(--kb-brand); font-size:var(--ui-text-body) }
  html #knowledge-content .kb-ui .kb-item-actions .kb-btn-danger{ color:var(--ui-danger) }
  html #knowledge-content .kb-item-actions.kb-small{ justify-content:flex-start; margin:0 }
  /* 관리자 도구: 태그 고르기는 맥 팝업 단추 */
  html #knowledge-content .kb-ui .kb-admin-row .kb-field{ min-width:0; height:var(--ui-control-mobile); box-shadow:var(--ui-elev-control) !important }
  html #knowledge-content .kb-ui .kb-admin-row .kb-btn{ flex:none }
  html #knowledge-content .kb-bubble{ max-width:88% }
  html #knowledge-content #kb-chat-messages{ max-height:55dvh }
  html #knowledge-content #kb-mode-group{ flex:1 1 100% }
  html #knowledge-content .kb-ui .kb-mode .kb-seg-btn{ flex:1; padding:0 6px; white-space:nowrap }
}