/* ===== CS 센터 ===== */

/* ── 섹션 탭 ── */
.csg-section-tabs{display:flex;gap:2px;padding:0 24px;border-bottom:1px solid var(--border);background:var(--bg3);flex-shrink:0}
.csg-sec-tab{background:none;border:none;border-bottom:2px solid transparent;padding:12px 18px;font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.csg-sec-tab:hover{color:var(--txt);background:var(--bg2)}
.csg-sec-active{color:var(--green)!important;border-bottom-color:var(--green)!important}
.csg-sec-count{font-size:10px;font-weight:400;opacity:0.7;margin-left:2px}

/* ══════════════════════════
   ① 대시보드
   ══════════════════════════ */
.csg-dashboard{padding:20px 24px;display:flex;flex-direction:column;gap:20px}

/* 통계 카드 */
.csg-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.csg-stat-card{background:var(--bg2);border-radius:10px;padding:16px 18px}
.csg-stat-label{font-size:12px;color:var(--txt2);margin-bottom:4px;font-weight:500}
.csg-stat-value{font-size:26px;font-weight:700;color:var(--txt);line-height:1.2}
.csg-stat-unit{font-size:13px;color:var(--txt3);font-weight:400;margin-left:3px}
.csg-stat-warn .csg-stat-value{color:#E24B4A}

/* 차트 행 */
.csg-charts-row{display:grid;grid-template-columns:1fr 320px;gap:16px}
.csg-chart-card{background:var(--bg2);border-radius:10px;padding:16px 18px}
.csg-chart-title{font-size:13px;font-weight:600;color:var(--txt2);margin-bottom:10px}
.csg-chart-wrap{position:relative;height:160px}

/* 카테고리 분포 */
.csg-cat-dist{display:flex;flex-direction:column;gap:0}
.csg-dist-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.csg-dist-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.csg-dist-name{font-size:12px;color:var(--txt);flex:0 0 60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csg-dist-bar-bg{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.csg-dist-bar{height:100%;border-radius:3px;transition:width .3s}
.csg-dist-count{font-size:11px;color:var(--txt2);min-width:36px;text-align:right}
.csg-dist-more{font-size:11px;color:var(--txt3);text-align:right;padding-top:4px}

/* 빠른 검색 */
.csg-quick-section{border-top:1px solid var(--border);padding-top:20px}
.csg-quick-title{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:12px}
.csg-quick-search-wrap{position:relative;margin-bottom:10px}
.csg-quick-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;color:var(--txt3)}
.csg-quick-input{width:100%;font-size:14px;padding:14px 36px 14px 42px;border-radius:12px;border:2px solid var(--green);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;box-sizing:border-box;transition:border-color .15s}
.csg-quick-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(91,107,82,0.08)}
.csg-quick-input::placeholder{color:var(--txt3)}
.csg-quick-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--txt3);cursor:pointer;padding:4px}
.csg-quick-clear:hover{color:#E24B4A}
.csg-quick-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.csg-chip{font-size:12px;color:var(--txt2);padding:6px 14px;border-radius:100px;background:var(--bg2);cursor:pointer;transition:all .12s;white-space:nowrap}
.csg-chip:hover{background:var(--green-bg);color:var(--green)}

/* 검색 결과 */
.csg-quick-results{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:10px}
.csg-quick-results-header{padding:10px 16px;font-size:12px;font-weight:600;color:var(--txt2);background:var(--bg2);border-bottom:1px solid var(--border)}
.csg-quick-item{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.csg-quick-item:last-child{border-bottom:none}
.csg-quick-item:hover{background:var(--bg2)}
.csg-quick-cat{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0;margin-top:2px}
.csg-quick-content{flex:1;min-width:0}
.csg-quick-q{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:3px}
.csg-quick-a{font-size:12px;color:var(--txt2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csg-quick-more{padding:12px 16px;text-align:center;font-size:12px;color:var(--green);cursor:pointer;font-weight:600}
.csg-quick-more:hover{background:var(--green-bg)}
.csg-quick-empty{padding:24px;text-align:center;font-size:13px;color:var(--txt2);background:var(--bg2);border-radius:10px;margin-top:10px}
.csg-quick-add-link{color:var(--green);cursor:pointer;font-weight:600}

/* 최근 문의 */
.csg-recent-section{border-top:1px solid var(--border);padding-top:20px}
.csg-recent-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.csg-recent-title{font-size:15px;font-weight:700;color:var(--txt)}
.csg-recent-more{font-size:12px;color:var(--green);cursor:pointer;font-weight:600}

/* 최근 문의 행 (대시보드 미리보기용) */
.csg-inq-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;border-radius:8px;padding:12px}
.csg-inq-row:hover{background:var(--bg2)}
.csg-inq-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.csg-inq-info{flex:1;min-width:0}
.csg-inq-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.csg-inq-name{font-size:13px;font-weight:700;color:var(--txt)}
.csg-inq-channel{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--bg2);color:var(--txt2);font-weight:500}
.csg-inq-status{font-size:10px;padding:2px 8px;border-radius:100px;font-weight:600}
.csg-inq-time{font-size:10px;color:var(--txt3);margin-left:auto;white-space:nowrap}
.csg-inq-preview{font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csg-inq-action-btn{background:none;border:1px solid var(--green);border-radius:6px;padding:4px 12px;font-size:11px;color:var(--green);cursor:pointer;font-family:inherit;font-weight:600;white-space:nowrap;flex-shrink:0;transition:all .12s}
.csg-inq-action-btn:hover{background:var(--green);color:#fff}

/* 빠른 검색 결과 복사 피드백 */
.csg-quick-copy-hint{font-size:11px;color:var(--txt3);white-space:nowrap;flex-shrink:0;opacity:0;transition:opacity .15s}
.csg-quick-item:hover .csg-quick-copy-hint{opacity:1}
.csg-quick-copied{background:var(--green-bg)!important;transition:background .15s}

/* ══════════════════════════
   ② 문의 기록 (엑셀시스템)
   ══════════════════════════ */
.csg-inquiries{display:flex;flex-direction:column;flex:1;overflow:hidden}
.csg-inq-toolbar{display:flex;align-items:center;gap:12px;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--bg3);flex-shrink:0;flex-wrap:wrap}
.csg-inq-tabs{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.csg-inq-tab{background:none;border:1px solid transparent;border-radius:100px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.csg-inq-tab:hover{background:var(--bg2);color:var(--txt)}
.csg-inq-tab-active{background:var(--green-bg)!important;border-color:var(--green)!important;color:var(--green)!important}
.csg-inq-tab-count{font-size:10px;font-weight:400;opacity:0.7;margin-left:2px}
.csg-inq-add-btn{background:var(--green);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.csg-inq-add-btn:hover{opacity:0.9}
.csg-inq-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;color:var(--txt2)}
.csg-inq-empty-icon{font-size:48px;margin-bottom:16px;opacity:0.6}
.csg-inq-empty-title{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:6px}
.csg-inq-empty-sub{font-size:13px;color:var(--txt2)}

/* 엑셀시스템 테이블 */
.ci-table-wrap{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--bg3)}
.ci-table{border-collapse:collapse;table-layout:fixed}
.ci-table thead th:last-child,.ci-table tbody td:last-child{padding-right:40px}
.ci-table{width:max-content;min-width:calc(100% - 24px);border-collapse:collapse;table-layout:fixed}
.ci-table thead{background:var(--bg2);position:sticky;top:0;z-index:4}
.ci-table th{padding:10px 12px;text-align:left;font-weight:700;font-size:11px;color:var(--txt2);border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:0.04em;text-transform:uppercase;user-select:none}
.ci-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-table tr{background:var(--bg3)}
.ci-table thead tr{background:var(--bg2)}
.ci-th-chk{text-align:center;padding:0 8px!important}
.ci-td-chk{text-align:center;padding:0 8px!important}
.ci-sticky-col{position:sticky!important;background:var(--bg3)!important;z-index:2!important}
.ci-table thead .ci-sticky-col{background:var(--bg2)!important;z-index:5!important}
.ci-sticky-last{box-shadow:2px 0 4px rgba(45,51,40,0.08)!important}
.ci-row:hover td{background:var(--bg2)!important}
.ci-row:hover .ci-sticky-col{background:var(--bg2)!important}
.ci-row-selected td{background:rgba(91,107,82,0.06)!important}
.ci-row-selected .ci-sticky-col{background:rgba(91,107,82,0.06)!important}
.ci-row{cursor:pointer;transition:background .08s}
.ci-th-col{cursor:pointer;position:relative;transition:background .1s}
.ci-th-col:hover{background:rgba(91,107,82,0.06)}
.ci-td-cell{transition:background .08s}
.ci-col-resizer{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:3;transition:background .12s}
.ci-col-resizer:hover,.ci-col-resizer-active{background:var(--green);opacity:0.5}
.ci-col-resizer-active{opacity:0.8}
.ci-status-badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:700;white-space:nowrap}
.ci-channel-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;background:var(--bg2);color:var(--txt2);white-space:nowrap}

/* 헤더 팝오버 */
.ci-hdr-popover{position:fixed;z-index:9500;background:var(--bg3);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(45,51,40,0.15);min-width:180px;padding:6px 0;overflow:hidden}
.ci-pop-name{padding:10px 16px;font-size:13px;font-weight:700;color:var(--txt)}
.ci-pop-sep{height:1px;background:var(--border);margin:4px 0}
.ci-pop-item{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;color:var(--txt);cursor:pointer;transition:background .1s}
.ci-pop-item:hover{background:var(--bg2)}
.ci-pop-item-active{color:var(--green);font-weight:700}
.ci-pop-icon{font-size:14px;width:18px;text-align:center;opacity:0.7}

/* 인라인 편집 */
.ci-inline-input{width:100%;font-size:13px;padding:4px 8px;border:2px solid var(--green);border-radius:4px;background:var(--bg);color:var(--txt);outline:none;font-family:inherit;box-sizing:border-box;resize:vertical}
.ci-td-cell[data-editable="1"]:hover{background:rgba(91,107,82,0.05);outline:1px dashed rgba(91,107,82,0.2);outline-offset:-1px}

/* 인라인 드롭다운 */
.ci-inline-dropdown{position:fixed;z-index:9500;background:var(--bg3);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 20px rgba(45,51,40,0.15);padding:4px 0;overflow:hidden}
.ci-inline-drop-opt{padding:8px 14px;font-size:13px;cursor:pointer;transition:background .08s}
.ci-inline-drop-opt:hover{background:var(--bg2)}
.ci-inline-drop-active{background:var(--green-bg);font-weight:700}

/* 셀 드래그 선택 */
.ci-cell-selected{background:rgba(91,107,82,0.12)!important;outline:2px solid var(--green)!important;outline-offset:-2px}

/* 문의 상세 모달 */
.csg-detail-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--txt2);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.csg-detail-block{margin-bottom:14px}
.csg-detail-label{font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px}
.csg-detail-content{font-size:13px;color:var(--txt);line-height:1.7;background:var(--bg2);border-radius:8px;padding:12px 16px;word-break:break-word}
.csg-detail-qa-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:background .1s}
.csg-detail-qa-item:hover{background:var(--bg2)}
.csg-detail-qa-q{flex:1;font-size:12px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csg-detail-qa-copy{background:none;border:1px solid var(--border);border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;color:var(--txt2);font-family:inherit}
.csg-detail-qa-copy:hover{border-color:var(--green);color:var(--green)}

/* ══════════════════════════
   ③ Q&A 지식베이스
   ══════════════════════════ */
.csg-qa-section{display:flex;flex-direction:column;flex:1;overflow:hidden}
.csg-qa-actions{display:flex;gap:6px;padding:8px 24px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.csg-qa-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--txt2);cursor:pointer;font-family:inherit;font-weight:500;transition:all .12s}
.csg-qa-btn:hover{border-color:var(--green);color:var(--green)}
.csg-qa-btn-new{background:var(--green);color:#fff!important;border-color:var(--green)!important}
.csg-qa-btn-new:hover{opacity:0.9}

/* 폼 행 */
.csg-form-row{display:flex;gap:12px}
@media(max-width:560px){.csg-form-row{flex-direction:column;gap:0}}

/* ── 기존 Q&A 테이블 스타일 (유지) ── */
.csg-tip{display:flex;align-items:center;gap:10px;padding:10px 24px;background:rgba(91,107,82,0.06);border-bottom:1px solid rgba(91,107,82,0.12);flex-shrink:0}
.csg-tip-text{flex:1;font-size:12px;color:var(--txt2);line-height:1.6}
.csg-tip-close{background:none;border:none;font-size:14px;color:var(--txt3);cursor:pointer;padding:4px 8px;border-radius:4px;flex-shrink:0}
.csg-tip-close:hover{color:var(--txt);background:var(--bg2)}
.csg-toolbar{display:flex;align-items:center;gap:12px;padding:10px 24px;border-bottom:1px solid var(--border);background:var(--bg3);flex-shrink:0;flex-wrap:wrap}
.csg-tabs{display:flex;gap:4px;flex:1;flex-wrap:wrap;min-width:0}
.csg-tab{background:none;border:1px solid transparent;border-radius:100px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.csg-tab:hover{background:var(--bg2);color:var(--txt)}
.csg-tab-active{background:var(--green-bg)!important;border-color:var(--green)!important;color:var(--green)!important}
.csg-tab-count{font-size:10px;font-weight:400;opacity:0.7;margin-left:2px}
.csg-tab-add{color:var(--green);border:1px dashed var(--green);opacity:0.6}
.csg-tab-add:hover{opacity:1;background:var(--green-bg)}
.csg-search-wrap{position:relative;min-width:180px;max-width:300px}
.csg-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none}
.csg-search{width:100%;font-size:13px;padding:8px 30px 8px 32px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;transition:border-color .15s}
.csg-search:focus{border-color:var(--green)}
.csg-search::placeholder{color:var(--txt3)}
.csg-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--txt3);cursor:pointer;padding:2px}
.csg-search-clear:hover{color:#E24B4A}
.csg-cat-select{font-size:13px;padding:9px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;cursor:pointer;min-width:140px}
.csg-cat-select:focus{border-color:var(--green)}
.csg-count{font-size:12px;color:var(--txt2);white-space:nowrap;padding:6px 12px;background:var(--bg2);border-radius:100px;font-weight:600}
.csg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;color:var(--txt2)}
.csg-empty-icon{font-size:48px;margin-bottom:16px;opacity:0.6}
.csg-empty-title{font-size:16px;font-weight:700;color:var(--txt);margin-bottom:6px}
.csg-empty-sub{font-size:13px;color:var(--txt2);line-height:1.8}
.csg-table-wrap{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.csg-table{width:100%;border-collapse:collapse;table-layout:fixed}
.csg-table thead{background:var(--bg2);position:sticky;top:0;z-index:2}
.csg-table th{padding:10px 14px;text-align:left;font-weight:700;font-size:11px;color:var(--txt2);border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:0.04em;text-transform:uppercase}
.csg-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csg-row{cursor:pointer;transition:background .1s}
.csg-row:hover td{background:var(--bg2)}
.csg-row-active td{background:rgba(91,107,82,0.06)!important}
.csg-td-q{text-align:left;min-width:160px}
.csg-q-text{font-weight:600;color:var(--txt)}
.csg-td-a{text-align:left;color:var(--txt);position:relative}
.csg-a-preview{font-size:12px;color:var(--txt)}
.csg-hover-copy{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:12px;cursor:pointer;z-index:2;box-shadow:0 1px 4px rgba(0,0,0,0.06);transition:all .15s;line-height:1}
.csg-td-a:hover .csg-hover-copy{display:inline-flex}
.csg-hover-copy:hover{background:var(--green);color:#fff;border-color:var(--green)}
.csg-cat-badge{display:inline-flex;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:700;white-space:nowrap}
.csg-tag{display:inline-flex;font-size:10px;color:var(--green);background:var(--green-bg);padding:2px 6px;border-radius:3px;font-weight:500;margin-right:3px;white-space:nowrap}
.csg-expand-row td{padding:0!important;background:var(--bg)!important;border-bottom:2px solid var(--green)}
.csg-expand{padding:16px 20px}
.csg-expand-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.csg-expand-label{font-size:14px;font-weight:800;color:var(--green)}
.csg-expand-btns{display:flex;gap:6px}
.csg-btn-sm{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--txt2);font-family:inherit;font-weight:600;transition:all .15s}
.csg-btn-sm:hover{border-color:var(--green);color:var(--green)}
.csg-btn-danger:hover{border-color:#E24B4A!important;color:#E24B4A!important}
.csg-expand-body{font-size:13px;color:var(--txt);line-height:1.8;background:var(--bg3);border-radius:8px;padding:14px 18px;border:1px solid var(--border);white-space:pre-wrap;word-break:break-word}

/* 모달 */
.csg-modal-bg{position:fixed;inset:0;background:rgba(45,51,40,0.4);z-index:9000;display:flex;align-items:center;justify-content:center}
.csg-modal{background:var(--bg3);border-radius:var(--radius-lg);padding:28px;width:540px;max-width:92vw;max-height:85vh;overflow-y:auto;box-shadow:0 16px 50px rgba(45,51,40,0.2)}
.csg-modal h3{font-size:18px;font-weight:700;margin-bottom:20px;color:var(--txt)}
.csg-form-field{margin-bottom:14px}
.csg-form-field label{display:block;font-size:12px;font-weight:600;color:var(--txt2);text-transform:uppercase;margin-bottom:5px;letter-spacing:0.04em}
.csg-form-field input,.csg-form-field textarea,.csg-form-field select{width:100%;font-size:14px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;box-sizing:border-box;transition:border-color .15s}
.csg-form-field input:focus,.csg-form-field textarea:focus,.csg-form-field select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(91,107,82,0.06)}
.csg-form-field textarea{resize:vertical;min-height:80px;line-height:1.7}
.csg-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.csg-catm-add{display:flex;gap:8px;margin-bottom:14px}
.csg-catm-add input{flex:1;font-size:13px;padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit}
.csg-catm-add input:focus{border-color:var(--green)}
.csg-catm-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.csg-catm-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.csg-catm-del{background:none;border:none;font-size:14px;color:var(--txt3);cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1}
.csg-catm-del:hover{color:#E24B4A;background:rgba(226,75,74,0.08)}

/* 모바일 */
@media (max-width: 768px) {
  .csg-stats{grid-template-columns:repeat(2,1fr)}
  .csg-charts-row{grid-template-columns:1fr}
  .csg-toolbar{padding:8px 16px;gap:6px}
  .csg-tabs{gap:2px}
  .csg-tab{padding:5px 10px;font-size:11px}
  .csg-search-wrap{min-width:0;max-width:none;flex:1}
  .csg-modal{width:95vw;padding:20px}
  .csg-table th,.csg-table td{padding:8px 10px;font-size:12px}
  .ci-table th,.ci-table td{padding:8px 8px;font-size:12px}
  .csg-dashboard{padding:16px}
  .csg-section-tabs{padding:0 16px}
  .csg-inq-toolbar{padding:8px 16px}
  .csg-qa-actions{padding:8px 16px}
}

/* 문의 검색 */
.ci-search-wrap{position:relative;min-width:180px;max-width:280px}
.ci-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none}
.ci-search{width:100%;font-size:13px;padding:7px 28px 7px 30px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;transition:border-color .15s}
.ci-search:focus{border-color:var(--green)}
.ci-search::placeholder{color:var(--txt3)}
.ci-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--txt3);cursor:pointer}
.ci-search-clear:hover{color:#E24B4A}

/* 문의 CSV/추가 액션바 */
.ci-action-bar{display:flex;align-items:center;gap:8px;padding:6px 24px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.ci-action-count{font-size:12px;color:var(--txt2);font-weight:600;padding:4px 10px;background:var(--bg2);border-radius:100px}
.ci-action-btns{display:flex;gap:6px;margin-left:auto}
.ci-act-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--txt2);cursor:pointer;font-family:inherit;font-weight:500;transition:all .12s;white-space:nowrap}
.ci-act-btn:hover{border-color:var(--green);color:var(--green)}
.ci-act-btn-new{background:var(--green);color:#fff!important;border-color:var(--green)!important}
.ci-act-btn-new:hover{opacity:0.9}

@media(max-width:768px){
  .ci-search-wrap{min-width:0;max-width:none;flex:1}
  .ci-action-bar{padding:6px 16px}
  .ci-action-btns{margin-left:0;flex-wrap:wrap}
}

/* 열기 버튼 (hover시 표시) */
.ci-row-btn-wrap{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:none;z-index:4}
.ci-row:hover .ci-row-btn-wrap{display:flex}
.ci-row-open-btn{background:var(--green);color:#fff;border:none;border-radius:5px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:0 1px 4px rgba(45,51,40,0.15);transition:opacity .12s}
.ci-row-open-btn:hover{opacity:0.85}

/* 태그선택기 드롭다운 (채널/카테고리) */
.ci-tag-picker-drop{position:fixed;z-index:9500;background:var(--bg3);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(45,51,40,0.15);width:220px;overflow:hidden}
.ci-tp-search{padding:8px 10px;border-bottom:1px solid var(--border)}
.ci-tp-input{width:100%;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--txt);outline:none;font-family:inherit;box-sizing:border-box}
.ci-tp-input:focus{border-color:var(--green)}
.ci-tp-list{max-height:200px;overflow-y:auto}
.ci-tp-opt{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;transition:background .08s;font-size:13px}
.ci-tp-opt:hover{background:var(--bg2)}
.ci-tp-active{background:rgba(91,107,82,0.08);font-weight:600}
.ci-tp-check{width:16px;text-align:center;font-size:12px;color:var(--green);flex-shrink:0}
.ci-tp-create:hover{background:var(--green-bg)}

/* Q&A 마이그레이션 바 */
.csg-migrate-bar{display:flex;align-items:center;gap:12px;padding:10px 24px;background:#E6F1FB;border-bottom:1px solid #B5D4F4;flex-shrink:0;font-size:13px;color:#0C447C}
.csg-migrate-btn{background:#0C447C;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.csg-migrate-btn:hover{opacity:0.9}

/* 추가/복사 버튼 컬럼 */
.ci-th-act{text-align:center!important;font-size:9px;color:var(--txt3);font-weight:500;padding:4px 2px!important;line-height:1.3}
.ci-th-act-label{display:block}
.ci-td-act{text-align:center;padding:0 2px!important;white-space:nowrap}
.ci-act-row-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;border-radius:4px;cursor:pointer;font-size:12px;background:transparent;color:var(--txt3);transition:all .1s;padding:0}
.ci-act-row-btn:hover{background:var(--bg2);color:var(--txt)}
.ci-act-add:hover{color:var(--green)}

/* ═══════════════════════════════════════
   채팅 UI
   ═══════════════════════════════════════ */
.ci-chat-layout{display:flex;flex:1;overflow:hidden;min-height:0}

/* 좌측 대화 리스트 */
.ci-chat-list{width:320px;min-width:280px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg3);flex-shrink:0}
.ci-cl-header{padding:12px;border-bottom:1px solid var(--border);flex-shrink:0}
.ci-cl-filters{display:flex;gap:4px;margin-bottom:8px}
.ci-cl-filter{flex:1;background:none;border:1px solid var(--border);border-radius:6px;padding:5px 0;font-size:11px;color:var(--txt2);cursor:pointer;font-family:inherit;font-weight:500;transition:all .12s}
.ci-cl-filter:hover{border-color:var(--green);color:var(--green)}
.ci-cl-filter-on{background:var(--green);color:#fff!important;border-color:var(--green)!important}
.ci-cl-search{width:100%;font-size:13px;padding:7px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;box-sizing:border-box}
.ci-cl-search:focus{border-color:var(--green)}
.ci-cl-search-wrap{position:relative}

/* 대화 목록 */
.ci-cl-convos{flex:1;overflow-y:auto;min-height:0}
.ci-cl-empty{padding:40px 20px;text-align:center;color:var(--txt3);font-size:13px}
.ci-convo{display:flex;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .08s;align-items:center}
.ci-convo:hover{background:var(--bg2)}
.ci-convo-active{background:var(--bg)!important;border-left:3px solid var(--green)}
.ci-convo-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.ci-convo-body{flex:1;min-width:0}
.ci-convo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.ci-convo-name{font-size:13px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-convo-time{font-size:10px;color:var(--txt3);flex-shrink:0}
.ci-convo-bottom{display:flex;align-items:center;gap:6px}
.ci-convo-preview{font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ci-convo-badge{background:#E24B4A;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:100px;flex-shrink:0}
.ci-cl-footer{padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0}
.ci-cl-new-btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:8px;padding:9px 0;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.ci-cl-new-btn:hover{opacity:0.9}

/* 우측 채팅창 */
.ci-chat-window{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}

/* 빈 상태 */
.ci-cw-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ci-cw-empty-icon{font-size:48px;opacity:0.3}
.ci-cw-empty-text{font-size:16px;font-weight:600;color:var(--txt2)}
.ci-cw-empty-sub{font-size:13px;color:var(--txt3)}

/* 채팅 헤더 */
.ci-cw-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.ci-cw-header-info{display:flex;align-items:center;gap:10px}
.ci-cw-header-name{font-size:15px;font-weight:700;color:var(--txt)}
.ci-cw-header-ch{font-size:11px;color:var(--txt3)}
.ci-cw-header-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px}
.ci-cw-header-actions{display:flex;gap:6px}
.ci-cw-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--txt2);cursor:pointer;font-family:inherit;transition:all .12s}
.ci-cw-btn:hover{border-color:var(--green);color:var(--green)}
.ci-cw-btn-resolve{background:var(--green);color:#fff!important;border-color:var(--green)!important}
.ci-cw-btn-resolve:hover{opacity:0.9}

/* 메시지 영역 */
.ci-cw-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:6px;min-height:0}
.ci-msg-date{text-align:center;font-size:11px;color:var(--txt3);padding:12px 0 6px;font-weight:500}
.ci-msg{display:flex;flex-direction:column;max-width:70%}
.ci-msg-customer{align-self:flex-start}
.ci-msg-agent{align-self:flex-end;align-items:flex-end}
.ci-msg-author{font-size:10px;color:var(--txt3);margin-bottom:2px}
.ci-msg-bubble{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.6;word-break:break-word}
.ci-msg-customer .ci-msg-bubble{background:var(--bg2);color:var(--txt);border-bottom-left-radius:4px}
.ci-msg-agent .ci-msg-bubble{background:var(--green);color:#fff;border-bottom-right-radius:4px}
.ci-msg-time{font-size:10px;color:var(--txt3);margin-top:2px}

/* 입력 영역 */
.ci-cw-input-area{border-top:1px solid var(--border);flex-shrink:0}
.ci-cw-quick-bar{display:flex;gap:6px;padding:8px 16px 0}
.ci-cw-quick-btn{background:none;border:1px solid var(--border);border-radius:100px;padding:4px 12px;font-size:11px;color:var(--txt2);cursor:pointer;font-family:inherit;transition:all .12s}
.ci-cw-quick-btn:hover{border-color:var(--green);color:var(--green)}
.ci-cw-input-wrap{display:flex;gap:8px;padding:10px 16px 14px;align-items:center}
.ci-cw-input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:var(--bg);color:var(--txt);outline:none;font-family:inherit}
.ci-cw-input:focus{border-color:var(--green)}
.ci-cw-send-btn{background:var(--green);color:#fff;border:none;border-radius:10px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.ci-cw-send-btn:hover{opacity:0.9}

@media(max-width:768px){
  .ci-chat-layout{flex-direction:column}
  .ci-chat-list{width:100%;min-width:0;max-height:40vh;border-right:none;border-bottom:1px solid var(--border)}
  .ci-msg{max-width:85%}
}
.ci-msg-product-card{border:0.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg);max-width:240px;margin-bottom:4px}
.ci-msg-product-tag{display:inline-block;font-size:11px;padding:3px 8px;background:#E6F1FB;color:#0C447C;font-weight:500}
.ci-msg-product-body{display:flex;gap:8px;padding:8px;align-items:center}
.ci-msg-product-img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0}
.ci-msg-product-info{flex:1;min-width:0}
.ci-msg-product-title{font-size:12px;font-weight:500;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-msg-product-price{font-size:12px;color:var(--txt2);margin-top:2px}
.ci-msg-system{align-self:center!important;opacity:.8}
.ci-msg-system .ci-msg-bubble{background:var(--bg2);font-size:11px;color:var(--txt2);border-radius:100px!important;padding:4px 14px!important}
.ci-suggest-wrap{border-top:0.5px solid var(--border);background:var(--bg2);padding:0}
.ci-suggest-label{font-size:10px;color:var(--txt2);padding:6px 12px 4px;font-weight:500}
.ci-suggest-btn{display:block;width:100%;text-align:left;padding:7px 12px;border:none;border-top:0.5px solid var(--border);background:transparent;cursor:pointer;transition:background .12s}
.ci-suggest-btn:hover{background:var(--bg3)}
.ci-suggest-q{display:block;font-size:11px;color:var(--txt2);margin-bottom:2px}
.ci-suggest-a{display:block;font-size:12px;color:var(--txt);font-weight:500}
.ci-cw-img-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;cursor:pointer;color:var(--txt2);transition:background .15s;flex-shrink:0}
.ci-cw-img-btn:hover{background:var(--bg2)}

/* ══════════════════════════════════════════════════
   CS 응대 대시보드 v2 (신규)
   ══════════════════════════════════════════════════ */
.ci-dash{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:var(--bg3)}

/* 팁 배너 */
.ci-dash-tip{display:flex;align-items:center;gap:10px;background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 18px;flex-shrink:0}
.ci-dash-tip-text{flex:1;font-size:12px;color:var(--txt2);line-height:1.5}
.ci-dash-tip-close{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:16px;padding:2px 8px;border-radius:4px}
.ci-dash-tip-close:hover{background:var(--bg3);color:var(--txt)}

/* KPI 스트립 */
.ci-kpi-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px 18px 8px;background:var(--bg3);flex-shrink:0}
.ci-kpi-card{background:var(--bg2);border-radius:8px;padding:10px 12px;transition:background .12s}
.ci-kpi-card[style*="cursor:pointer"]:hover{background:var(--bg)}
.ci-kpi-label{font-size:11px;color:var(--txt2);margin-bottom:3px;font-weight:500}
.ci-kpi-value{font-size:20px;font-weight:700;color:var(--txt);line-height:1.1}
.ci-kpi-unit{font-size:11px;color:var(--txt3);font-weight:400;margin-left:2px}
.ci-kpi-card.warn .ci-kpi-value{color:#E24B4A}

/* 채널 칩 */
.ci-ch-chips{display:flex;gap:6px;padding:4px 18px 8px;background:var(--bg3);flex-shrink:0;flex-wrap:wrap;align-items:center}
.ci-ch-chip{font-size:12px;padding:5px 11px;border-radius:100px;border:1px solid var(--border);cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:var(--bg);color:var(--txt);font-family:inherit;transition:all .12s}
.ci-ch-chip:hover{border-color:var(--green);color:var(--green)}
.ci-ch-chip-on{background:var(--txt)!important;color:var(--bg)!important;border-color:var(--txt)!important}
.ci-ch-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ci-ch-chip-n{font-size:10px;opacity:.7;font-weight:500}
.ci-ch-chips-sep{flex:1}
.ci-ch-unassigned{color:#E24B4A!important;border-color:#F7C1C1!important;background:#FCEBEB!important}
.ci-ch-unassigned.ci-ch-chip-on{color:#fff!important;background:#E24B4A!important;border-color:#E24B4A!important}

/* 상태 탭 */
.ci-status-tabs{display:flex;padding:0 18px;background:var(--bg3);border-bottom:1px solid var(--border);flex-shrink:0}
.ci-status-tab{flex:1;padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--txt2);font-family:inherit;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:7px;transition:color .12s}
.ci-status-tab:hover{color:var(--txt)}
.ci-status-tab-on{color:var(--txt)!important;border-bottom-color:var(--txt)!important}
.ci-status-tab-count{font-size:10px;font-weight:600;padding:2px 7px;border-radius:100px;background:var(--bg2);color:var(--txt2)}
.ci-status-tab.warn.ci-status-tab-on .ci-status-tab-count{background:#FCEBEB;color:#A32D2D}
.ci-status-tab.ok.ci-status-tab-on .ci-status-tab-count{background:#EAF3DE;color:#085041}

/* 3-column 본문 */
.ci-dash-main{display:grid;grid-template-columns:340px 1fr 280px;flex:1;min-height:0;overflow:hidden;background:var(--border);gap:1px}
.ci-dash-list{background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.ci-dash-center{background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.ci-dash-ctx{background:var(--bg);overflow-y:auto}

/* 정렬 바 */
.ci-sort-bar{padding:8px 12px;display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.ci-sort-label{font-size:10px;color:var(--txt3);margin-right:2px;font-weight:500}
.ci-sort-btn{font-size:11px;padding:3px 9px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--txt2);cursor:pointer;font-family:inherit;font-weight:500;transition:all .12s}
.ci-sort-btn:hover{border-color:var(--green);color:var(--green)}
.ci-sort-btn-on{background:var(--txt)!important;color:var(--bg)!important;border-color:var(--txt)!important}
.ci-dash-search{font-size:11px;padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;width:130px}
.ci-dash-search:focus{border-color:var(--green)}

/* 리스트 본문 */
.ci-dash-list-body{flex:1;overflow-y:auto;min-height:0}
.ci-dash-list-empty{padding:40px 20px;text-align:center;font-size:13px;color:var(--txt3)}

/* 대화 카드 */
.ci-dash-convo{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .08s;align-items:flex-start;border-left:3px solid transparent}
.ci-dash-convo:hover{background:var(--bg2)}
.ci-dash-convo.ci-convo-urgent{border-left-color:#E24B4A}
.ci-dash-convo.ci-convo-warn{border-left-color:#EF9F27}
.ci-dash-convo.ci-convo-active{background:var(--bg2);border-left-color:var(--green)!important}
.ci-convo-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;position:relative}
.ci-convo-av-ch{position:absolute;bottom:-2px;right:-2px;width:15px;height:15px;border-radius:50%;font-size:8px;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.ci-convo-body{flex:1;min-width:0}
.ci-convo-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:3px}
.ci-convo-name{font-size:13px;font-weight:700;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ci-convo-time{font-size:10px;color:var(--txt3);white-space:nowrap;flex-shrink:0}
.ci-convo-sla{font-size:10px;white-space:nowrap;font-weight:600;flex-shrink:0}
.ci-sla-urgent{color:#A32D2D!important}
.ci-sla-warn{color:#854F0B!important}
.ci-sla-normal{color:var(--txt3)}
.ci-convo-prev{font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px}
.ci-convo-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ci-convo-store{font-size:10px;padding:1px 7px;border-radius:100px;font-weight:500;white-space:nowrap}
.ci-convo-mode{font-size:10px;padding:1px 6px;border-radius:4px;font-weight:500;background:var(--bg2);color:var(--txt2)}
.ci-convo-assignee{width:17px;height:17px;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;background:var(--green-bg);color:var(--green);font-weight:600;flex-shrink:0}
.ci-convo-unassigned{font-size:10px;color:#A32D2D;background:#FCEBEB;padding:1px 7px;border-radius:4px;font-weight:600}
.ci-convo-unread{background:#E24B4A;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:100px;margin-left:4px}

/* 중앙 채팅/Q&A 빈 화면 */
.ci-center-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;color:var(--txt3)}
.ci-center-empty-icon{font-size:42px;opacity:.4}
.ci-center-empty-text{font-size:14px;font-weight:500;color:var(--txt2)}
.ci-center-empty-sub{font-size:12px;color:var(--txt3)}

/* 채팅/Q&A 공통 헤더 */
.ci-cv-pane,.ci-qa-pane{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.ci-cv-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:var(--bg);flex-shrink:0}
.ci-cv-header-i{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0}
.ci-cv-name{font-size:14px;font-weight:700;color:var(--txt)}
.ci-cv-meta{font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.ci-cv-status{font-size:10px;padding:2px 8px;border-radius:100px;font-weight:600}
.ci-cv-assignee{font-size:11px;color:var(--txt2)}
.ci-cv-unassigned{font-size:10px;color:#A32D2D;background:#FCEBEB;padding:1px 7px;border-radius:4px;font-weight:600}
.ci-cv-wait{font-size:11px;font-weight:600}
.ci-cv-actions{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap}
.ci-cv-btn{font-size:11px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;color:var(--txt);font-family:inherit;font-weight:500;white-space:nowrap;transition:all .12s}
.ci-cv-btn:hover{border-color:var(--green);color:var(--green)}
.ci-cv-btn-resolve{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.ci-cv-btn-resolve:hover{opacity:.9}

/* 채팅 메시지 */
.ci-cv-msgs{flex:1;overflow-y:auto;padding:14px 16px;background:var(--bg3);min-height:0}
.ci-cv-day{text-align:center;font-size:10px;color:var(--txt3);margin:6px 0 10px}
.ci-cv-msg{display:flex;flex-direction:column;margin-bottom:10px;max-width:75%}
.ci-cv-msg-cu{align-items:flex-start}
.ci-cv-msg-ag{align-items:flex-end;margin-left:auto}
.ci-cv-bub{padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.45;word-break:break-word}
.ci-cv-msg-cu .ci-cv-bub{background:var(--bg);border:1px solid var(--border);color:var(--txt)}
.ci-cv-msg-ag .ci-cv-bub{background:var(--green);color:#fff}
.ci-cv-bub-img{padding:4px!important;overflow:hidden}
.ci-cv-bub-img img{max-width:200px;max-height:200px;border-radius:8px;cursor:pointer;display:block}
.ci-cv-msg-t{font-size:10px;color:var(--txt3);margin-top:3px;padding:0 4px}
.ci-cv-product{padding:0!important;overflow:hidden;max-width:280px;background:var(--bg)!important;border:1px solid var(--border)!important}
.ci-cv-product-img{width:100%;height:120px;object-fit:cover;display:block}
.ci-cv-product-body{padding:8px 10px}
.ci-cv-product-tag{font-size:10px;color:var(--green);font-weight:600;margin-bottom:2px}
.ci-cv-product-title{font-size:12px;font-weight:600;color:var(--txt);line-height:1.3}
.ci-cv-product-desc{font-size:11px;color:var(--txt2);margin-top:3px}

/* 템플릿 칩 */
.ci-tpl-strip{padding:8px 12px;border-top:1px solid var(--border);display:flex;gap:5px;flex-wrap:wrap;align-items:center;background:var(--bg2);flex-shrink:0}
.ci-tpl-label{font-size:10px;color:var(--txt3);font-weight:500;margin-right:2px}
.ci-tpl-chip{font-size:11px;padding:4px 10px;border-radius:100px;border:1px solid var(--border);background:var(--bg);cursor:pointer;white-space:nowrap;color:var(--txt2);font-family:inherit;font-weight:500;transition:all .12s}
.ci-tpl-chip:hover{border-color:var(--green);color:var(--green)}

/* 입력창 */
.ci-cv-input-wrap{padding:10px 12px;display:flex;gap:8px;align-items:center;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}
.ci-cv-img-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;cursor:pointer;color:var(--txt2);transition:background .12s;flex-shrink:0;font-size:16px}
.ci-cv-img-btn:hover{background:var(--bg2)}
.ci-cv-input{flex:1;font-size:13px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--txt);outline:none;font-family:inherit}
.ci-cv-input:focus{border-color:var(--green);background:var(--bg)}
.ci-cv-send{background:var(--green);color:#fff;padding:8px 18px;font-size:13px;font-weight:600;border:none;border-radius:8px;cursor:pointer;font-family:inherit}
.ci-cv-send:hover{opacity:.9}

/* Q&A 뷰 */
.ci-qa-body{flex:1;overflow-y:auto;padding:14px 16px;background:var(--bg);min-height:0}
.ci-qa-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ci-qa-public{font-size:10px;padding:2px 7px;border-radius:100px;background:#FAEEDA;color:#633806;font-weight:600}
.ci-qa-linked{display:flex;gap:10px;background:var(--bg2);border-radius:8px;padding:10px 12px;margin-bottom:12px;align-items:center}
.ci-qa-linked-img{width:48px;height:48px;border-radius:6px;background:var(--green-bg);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden}
.ci-qa-linked-img img{width:100%;height:100%;object-fit:cover}
.ci-qa-linked-body{flex:1;min-width:0}
.ci-qa-linked-tag{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;font-weight:600;margin-bottom:2px}
.ci-qa-linked-title{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-qa-linked-sub{font-size:11px;color:var(--txt2)}
.ci-qa-q-block{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.ci-qa-q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ci-qa-q-from{font-size:12px;font-weight:600;color:var(--txt)}
.ci-qa-q-time{font-size:11px;color:var(--txt3)}
.ci-qa-q-text{font-size:13px;line-height:1.6;color:var(--txt)}
.ci-qa-q-attach{margin-top:10px}
.ci-qa-q-attach img{max-width:200px;max-height:200px;border-radius:6px;cursor:pointer}
.ci-qa-answers{background:var(--bg2);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.ci-qa-answers-label{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;font-weight:600;margin-bottom:8px}
.ci-qa-answer-block{background:var(--bg);border-radius:6px;padding:10px 12px;margin-bottom:6px}
.ci-qa-answer-block:last-child{margin-bottom:0}
.ci-qa-answer-label{font-size:11px;color:var(--txt2);font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.ci-qa-textarea{width:100%;min-height:120px;padding:10px 12px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--txt);font-family:inherit;line-height:1.6;outline:none;resize:vertical;box-sizing:border-box}
.ci-qa-textarea:focus{border-color:var(--green)}
.ci-qa-submit-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.ci-qa-chk{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--txt2);cursor:pointer}
.ci-qa-resolved{padding:12px;text-align:center;background:#EAF3DE;color:#085041;border-radius:8px;font-size:13px;font-weight:500;margin-top:10px}

/* 컨텍스트 패널 */
.ci-ctx{padding:12px 14px;display:flex;flex-direction:column;gap:16px}
.ci-ctx-empty{padding:40px 20px;text-align:center;font-size:12px;color:var(--txt3)}
.ci-ctx-section{display:flex;flex-direction:column;gap:5px}
.ci-ctx-label{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.03em;font-weight:600;margin-bottom:3px}
.ci-ctx-row{font-size:12px;display:flex;justify-content:space-between;padding:3px 0;gap:6px}
.ci-ctx-k{color:var(--txt2)}
.ci-ctx-v{font-weight:500;color:var(--txt);text-align:right;word-break:break-word}
.ci-ctx-btn{width:100%;padding:8px 10px;font-size:12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;text-align:left;color:var(--txt);font-family:inherit;font-weight:500;margin-bottom:4px;transition:all .12s}
.ci-ctx-btn:hover{border-color:var(--green);color:var(--green)}
.ci-ctx-task-card{background:var(--bg2);border-radius:6px;padding:8px 10px;font-size:11px;cursor:pointer;transition:background .12s}
.ci-ctx-task-card:hover{background:var(--bg3)}
.ci-ctx-task-title{font-weight:600;color:var(--txt);margin-bottom:3px;line-height:1.4}
.ci-ctx-task-meta{color:var(--txt2);display:flex;justify-content:space-between}
.ci-ctx-memo{width:100%;min-height:60px;padding:8px 10px;font-size:12px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);color:var(--txt);font-family:inherit;line-height:1.5;outline:none;resize:vertical;box-sizing:border-box}
.ci-ctx-memo:focus{border-color:var(--green);background:var(--bg)}

/* 모달 (담당자 지정·업무요청 전환 공용) */
.ci-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9999;display:flex;align-items:center;justify-content:center}
.ci-modal{background:var(--bg);border-radius:12px;padding:20px;min-width:380px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,0.2)}
.ci-modal-title{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:14px}
.ci-modal-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.ci-modal-row label{font-size:12px;color:var(--txt2);min-width:60px;padding-top:8px;font-weight:500}
.ci-modal-input,.ci-modal-sel,.ci-modal-textarea{flex:1;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--txt);font-family:inherit;outline:none;box-sizing:border-box}
.ci-modal-input:focus,.ci-modal-sel:focus,.ci-modal-textarea:focus{border-color:var(--green)}
.ci-modal-textarea{min-height:120px;resize:vertical;line-height:1.5}
.ci-modal-btns{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}

/* 우클릭 컨텍스트 메뉴 */
.ci-ctx-menu{position:fixed;background:var(--bg);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);z-index:9998;min-width:140px;padding:4px 0}
.ci-ctx-menu-item{padding:8px 14px;font-size:12px;color:var(--txt);cursor:pointer;transition:background .08s}
.ci-ctx-menu-item:hover{background:var(--bg2)}
.ci-ctx-menu-danger{color:#E24B4A}
.ci-ctx-menu-danger:hover{background:#FCEBEB}

/* KPI 카드 클릭 시 상태 탭 펄스 애니메이션 */
@keyframes ciTabPulse {
  0% { background: transparent; }
  30% { background: rgba(91,107,82,0.2); }
  100% { background: transparent; }
}
.ci-status-tab.ci-tab-pulse { animation: ciTabPulse .6s ease-out; }
/* KPI 카드 호버 피드백 */
.ci-kpi-card[style*="cursor:pointer"]:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06) }
.ci-kpi-card[style*="cursor:pointer"]:active { transform: translateY(0) }

/* ══════════════════════════════════════════════════
   DB 탭 (전체 문의 기록 조회)
   ══════════════════════════════════════════════════ */
.ci-db-wrap{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:var(--bg)}
.ci-db-filters{display:flex;align-items:flex-end;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg3);flex-wrap:wrap;flex-shrink:0}
.ci-db-filter-group{display:flex;flex-direction:column;gap:4px}
.ci-db-filter-group label{font-size:10px;color:var(--txt3);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.ci-db-sel{font-size:12px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--txt);font-family:inherit;outline:none;min-width:110px}
.ci-db-sel:focus{border-color:var(--green)}
.ci-db-search{font-size:12px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--txt);font-family:inherit;outline:none;min-width:180px;width:100%;box-sizing:border-box}
.ci-db-search:focus{border-color:var(--green)}

.ci-db-summary{display:flex;gap:18px;padding:8px 18px;border-bottom:1px solid var(--border);background:var(--bg2);font-size:11px;color:var(--txt2);flex-shrink:0}
.ci-db-summary-item b{font-size:13px;font-weight:700;color:var(--txt);margin-right:3px}

.ci-db-table-wrap{flex:1;overflow:auto;min-height:0}
.ci-db-table{border-collapse:collapse;font-size:12px;width:max-content;min-width:100%}
.ci-db-table thead{position:sticky;top:0;background:var(--bg2);z-index:10}
.ci-db-th{padding:9px 10px;text-align:left;font-weight:600;color:var(--txt2);border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none;transition:background .08s}
.ci-db-th:hover{background:var(--bg3);color:var(--txt)}
.ci-db-table tbody td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.ci-db-row{cursor:pointer;transition:background .08s}
.ci-db-row:hover{background:var(--bg2)}
.ci-db-row:hover td{color:var(--txt)}

/* DB 상세 모달 */
.ci-db-dm-meta-strip{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;background:var(--bg2);border-radius:6px;font-size:11px;color:var(--txt2);margin-bottom:12px}
.ci-db-dm-msgs{flex:1;overflow-y:auto;background:var(--bg3);border-radius:8px;padding:12px;margin-bottom:12px;min-height:240px;max-height:440px}
.ci-db-dm-msg{margin-bottom:8px;padding:8px 10px;border-radius:6px;background:var(--bg);max-width:80%}
.ci-db-dm-cu{background:var(--bg);border:1px solid var(--border)}
.ci-db-dm-ag{background:var(--green-bg);margin-left:auto}
.ci-db-dm-meta{font-size:10px;color:var(--txt3);margin-bottom:3px}
.ci-db-dm-text{font-size:12px;color:var(--txt);line-height:1.5;word-break:break-word}
.ci-db-dm-memo{font-size:11px;color:var(--txt2);background:#FAEEDA;padding:8px 12px;border-radius:6px;margin-bottom:10px}

/* ═══════════════════════════════════════════════════════════════════════════
   CS 응대 UI v3 — cs2 네임스페이스
   2026-04-09 전면 개편: 압축 헤더, 3컬럼, FAQ 추천 답변, 상품 자동 템플릿
   ═══════════════════════════════════════════════════════════════════════════ */

.cs2-root{
  --cs2-bg:#FFFFFF;
  --cs2-surface:#FFFFFF;
  --cs2-border:#EAEAEA;
  --cs2-border-strong:#D4D4D4;
  --cs2-ink:#1A1A1A;
  --cs2-ink-2:#3A3A3A;
  --cs2-ink-3:#6B6B6B;
  --cs2-muted:#9A9A9A;
  --cs2-muted-2:#C4C4C4;
  --cs2-bg-2:#F5F5F5;
  --cs2-bg-chat:#FAFAFA;
  --cs2-danger:#D14343;
  --cs2-danger-bg:#FDECEC;
  --cs2-warn-bg:#FEF3DA;
  --cs2-warn-ink:#7A4A08;
  --cs2-info-bg:#E6F1FB;
  --cs2-info-ink:#1565C0;
  --cs2-ok-bg:#E1F5EE;
  --cs2-ok-ink:#0F6E56;
  --cs2-purple-bg:#EEEDFE;
  --cs2-purple-ink:#3C3489;
  /* 포인트 컬러 — 향담 브랜드톤 앰버/골드 */
  --cs2-accent:#D97706;
  --cs2-accent-hover:#B45309;
  --cs2-accent-soft:#FEF3DA;
  --cs2-accent-softer:#FFFBF0;
  --cs2-success:#0F6E56;
  --cs2-success-hover:#0A5942;
  display:flex;flex-direction:column;flex:1;min-height:0;background:var(--cs2-bg);
  font-size:13px;color:var(--cs2-ink);
}

/* ── 전체화면 모드 (inquiries 섹션) — 전역 헤더 + 바깥 섹션탭 숨김 ── */
#page-csguide.cs2-fullscreen > .header{display:none}
#page-csguide.cs2-fullscreen .csg-section-tabs{display:none}
/* csguideBody 내부 스크롤 방지 (cs2-root가 이미 flex 꽉 채움) */
#page-csguide.cs2-fullscreen #csguideBody{overflow:hidden}

/* ── 섹션 전환 탭 (cs2-top 내부 압축 버전) ── */
.cs2-top-sectab{display:flex;gap:2px;padding-right:12px;border-right:1px solid var(--cs2-border);margin-right:2px;flex-shrink:0}
.cs2-top-sec{
  padding:6px 11px;font-size:12px;color:var(--cs2-ink-3);
  background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;
  transition:background .1s;white-space:nowrap;
}
.cs2-top-sec:hover{background:#F5F5F5;color:var(--cs2-ink)}
.cs2-top-sec.on{background:var(--cs2-ink);color:#FFFFFF;font-weight:600}
.cs2-top-sec-n{margin-left:3px;opacity:0.7;font-weight:400}

/* ── 상단 압축 헤더 ── */
.cs2-top{
  flex-shrink:0;display:flex;align-items:center;gap:10px;
  padding:10px 16px;background:var(--cs2-surface);
  border-bottom:1px solid var(--cs2-border);
}
.cs2-top-title{font-size:15px;font-weight:600;color:var(--cs2-ink)}
.cs2-top-kpis{display:flex;align-items:center;gap:14px;flex-shrink:0}
.cs2-kpi{display:flex;align-items:baseline;gap:5px;cursor:pointer;padding:2px 4px;border-radius:4px;transition:background .1s}
.cs2-kpi:hover{background:#F5F5F5}
.cs2-kpi-n{font-size:16px;font-weight:600;color:var(--cs2-ink)}
.cs2-kpi-n.warn{color:var(--cs2-accent)}
.cs2-kpi-n.muted{color:var(--cs2-ink-3)}
.cs2-kpi-u{font-size:11px;color:var(--cs2-muted)}
.cs2-top-spacer{flex:1}
.cs2-top-search{
  width:160px;padding:6px 10px;font-size:12px;color:var(--cs2-ink);
  border:1px solid var(--cs2-border);border-radius:6px;background:var(--cs2-surface);
  font-family:inherit;flex-shrink:0;
}
.cs2-top-search:focus{outline:none;border-color:var(--cs2-ink)}
.cs2-top-btn{
  padding:6px 10px;font-size:12px;background:transparent;border:1px solid var(--cs2-border);
  border-radius:6px;color:var(--cs2-ink-3);cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;
}
.cs2-top-btn:hover{background:#F5F5F5;color:var(--cs2-ink)}

/* ── 3컬럼 본문 ── */
.cs2-main{
  flex:1;display:grid;grid-template-columns:270px minmax(0,1fr) 230px;min-height:0;
}
.cs2-left{display:flex;flex-direction:column;min-height:0;background:var(--cs2-surface);border-right:1px solid var(--cs2-border)}
.cs2-center{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--cs2-surface)}
.cs2-right{display:flex;flex-direction:column;min-height:0;background:var(--cs2-surface);border-left:1px solid var(--cs2-border);overflow-y:auto}

/* ── 좌측: 상태탭 + 채널칩 + 리스트 ── */
.cs2-tabs{
  flex-shrink:0;padding:8px 12px;display:flex;gap:2px;
  border-bottom:1px solid var(--cs2-border);background:var(--cs2-surface);
}
.cs2-tab{
  flex:1;padding:7px 6px;font-size:12px;color:var(--cs2-ink-3);
  background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;
  transition:background .1s;
}
.cs2-tab:hover{background:var(--cs2-bg-2)}
.cs2-tab.on{background:var(--cs2-accent);color:#FFFFFF;font-weight:600}
.cs2-tab-n{margin-left:3px;font-weight:400}
.cs2-tab.on .cs2-tab-n{color:rgba(255,255,255,0.8)}
.cs2-tab .cs2-tab-n.warn{color:var(--cs2-accent);font-weight:600}

.cs2-chips{
  flex-shrink:0;padding:7px 12px;display:flex;gap:4px;overflow-x:auto;
  border-bottom:1px solid var(--cs2-border);background:var(--cs2-surface);
}
.cs2-chips::-webkit-scrollbar{height:0}
.cs2-chip{
  padding:4px 9px;font-size:11px;color:var(--cs2-ink-3);
  background:transparent;border:1px solid var(--cs2-border);border-radius:11px;
  cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .1s;
}
.cs2-chip:hover{border-color:var(--cs2-border-strong)}
.cs2-chip.on{background:var(--cs2-accent);color:#FFFFFF;border-color:var(--cs2-accent)}

.cs2-sort{
  flex-shrink:0;padding:6px 12px;display:flex;gap:6px;align-items:center;
  border-bottom:1px solid var(--cs2-border);background:var(--cs2-surface);font-size:11px;
}
.cs2-sort-lab{color:var(--cs2-muted)}
.cs2-sort-btn{
  padding:3px 8px;font-size:11px;background:transparent;border:none;
  color:var(--cs2-ink-3);cursor:pointer;font-family:inherit;border-radius:3px;
}
.cs2-sort-btn:hover{color:var(--cs2-ink)}
.cs2-sort-btn.on{color:var(--cs2-accent);font-weight:600}

.cs2-list{flex:1;overflow-y:auto;min-height:0}
.cs2-list-empty{padding:40px 20px;text-align:center;font-size:12px;color:var(--cs2-muted)}

.cs2-card{
  padding:12px 14px;border-bottom:1px solid var(--cs2-border);cursor:pointer;
  border-left:3px solid transparent;transition:background .1s;
}
.cs2-card:hover{background:#FAFAFA}
.cs2-card.on{background:var(--cs2-accent-softer);border-left-color:var(--cs2-accent)}
/* 새로 배정된 문의 — 왼쪽에 빨간 라인 + 옅은 빨간 배경 + 점 */
.cs2-card.newdot{background:#FFF7F7;border-left-color:#E74C3C}
.cs2-card.newdot.on{background:var(--cs2-accent-softer);border-left-color:#E74C3C}
.cs2-card-newdot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#E74C3C;margin-right:4px;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(231,76,60,0.2);
  animation:cs2dotPulse 2s ease-in-out infinite;
}
@keyframes cs2dotPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(231,76,60,0.2)}
  50%{box-shadow:0 0 0 5px rgba(231,76,60,0.1)}
}
.cs2-card-row1{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cs2-badge{
  width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}
.cs2-badge.tt{background:var(--cs2-warn-bg);color:var(--cs2-warn-ink)}
.cs2-badge.ss{background:var(--cs2-ok-bg);color:var(--cs2-ok-ink)}
.cs2-badge.cp{background:var(--cs2-warn-bg);color:var(--cs2-warn-ink)}
.cs2-badge.wc{background:var(--cs2-purple-bg);color:var(--cs2-purple-ink)}
.cs2-badge.kk{background:#FEF4C7;color:#7C5F00}
.cs2-badge.em{background:var(--cs2-bg-2);color:var(--cs2-ink-3)}
.cs2-badge.nv{background:var(--cs2-ok-bg);color:var(--cs2-ok-ink)}
.cs2-card-name{font-size:13px;font-weight:600;color:var(--cs2-ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs2-card-wait{font-size:10px;color:var(--cs2-muted);flex-shrink:0}
.cs2-card-wait.warn{color:var(--cs2-warn-ink);font-weight:600}
.cs2-card-wait.danger{color:var(--cs2-danger);font-weight:600}
.cs2-card-msg{font-size:12px;color:var(--cs2-ink-2);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.cs2-card-row3{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cs2-prodtag{
  font-size:10px;background:var(--cs2-surface);border:1px solid var(--cs2-border);
  color:var(--cs2-ink-3);padding:1px 6px;border-radius:3px;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cs2-card-meta{font-size:10px;color:var(--cs2-muted)}
.cs2-card-unread{
  font-size:10px;background:var(--cs2-danger);color:var(--cs2-surface);
  padding:1px 6px;border-radius:8px;font-weight:600;margin-left:auto;
}

/* ── 중앙: 상단 정보 + 채팅 + 추천답변 + 입력 ── */
.cs2-c-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--cs2-muted);font-size:13px;background:var(--cs2-bg-chat)}
.cs2-c-empty-icon{font-size:36px;opacity:0.3;margin-bottom:10px}

.cs2-c-head{
  flex-shrink:0;padding:13px 24px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--cs2-border);background:var(--cs2-surface);
}
.cs2-c-head-l{flex:1;min-width:0}
.cs2-c-head-title{display:flex;align-items:center;gap:8px}
.cs2-c-head-name{font-size:15px;font-weight:600;color:var(--cs2-ink)}
.cs2-c-head-badge{
  font-size:10px;padding:2px 7px;border-radius:3px;font-weight:600;
}
.cs2-c-head-badge.danger{background:var(--cs2-danger-bg);color:var(--cs2-danger)}
.cs2-c-head-badge.warn{background:var(--cs2-warn-bg);color:var(--cs2-warn-ink)}
.cs2-c-head-badge.ok{background:var(--cs2-ok-bg);color:var(--cs2-ok-ink)}
.cs2-c-head-meta{font-size:11px;color:var(--cs2-muted);margin-top:3px}
.cs2-c-btn{
  padding:7px 13px;font-size:12px;background:#FFFFFF;
  border:1px solid var(--cs2-border);border-radius:6px;color:var(--cs2-ink-2);
  cursor:pointer;font-family:inherit;white-space:nowrap;
}
.cs2-c-btn:hover{background:#F5F5F5;border-color:var(--cs2-border-strong)}
.cs2-c-btn-primary{
  padding:7px 14px;font-size:12px;background:var(--cs2-success);color:#FFFFFF;
  border:none;border-radius:6px;font-weight:600;cursor:pointer;font-family:inherit;
}
.cs2-c-btn-primary:hover{background:var(--cs2-success-hover)}

.cs2-c-body{
  flex:1;padding:18px 24px;overflow-y:auto;background:var(--cs2-bg-chat);
  min-height:0;display:flex;flex-direction:column;
}
.cs2-c-date{text-align:center;font-size:11px;color:var(--cs2-muted);margin:4px 0 14px;user-select:none}
.cs2-c-msg{margin-bottom:14px;max-width:78%;display:flex;flex-direction:column}
.cs2-c-msg.ag{margin-left:auto;align-items:flex-end}
.cs2-c-bubble{
  background:var(--cs2-surface);border:1px solid var(--cs2-border);
  padding:12px 16px;border-radius:12px;font-size:14px;color:var(--cs2-ink);
  line-height:1.6;word-break:break-word;white-space:pre-wrap;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.cs2-c-msg.ag .cs2-c-bubble{background:#2B3340;color:#FFFFFF;border-color:#2B3340}
.cs2-c-msg-time{font-size:10px;color:var(--cs2-muted);margin-top:4px}

/* 시스템/자동응답 메시지 (가운데 정렬, 작은 회색) */
.cs2-c-sys{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:10px 0;padding:0 20px;
}
.cs2-c-sys-tag{
  font-size:10px;background:#EEEEEE;color:#5B5B5B;padding:2px 8px;border-radius:10px;font-weight:600;
  flex-shrink:0;
}
.cs2-c-sys-text{
  font-size:11px;color:var(--cs2-muted);line-height:1.5;text-align:center;
  max-width:480px;
}

/* 상품 카드 버블 */
.cs2-c-prod{
  background:var(--cs2-surface);border:1px solid var(--cs2-border);border-radius:10px;
  overflow:hidden;display:flex;cursor:pointer;transition:border-color .1s;
}
.cs2-c-prod:hover{border-color:var(--cs2-border-strong)}
.cs2-c-prod-img{
  width:68px;height:68px;background:var(--cs2-bg-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--cs2-muted);object-fit:cover;
}
.cs2-c-prod-img img{width:100%;height:100%;object-fit:cover}
.cs2-c-prod-body{padding:10px 14px;min-width:0;flex:1}
.cs2-c-prod-tag{font-size:10px;color:var(--cs2-warn-ink);margin-bottom:3px;font-weight:600}
.cs2-c-prod-store{font-size:10px;color:var(--cs2-muted);margin-bottom:2px}
.cs2-c-prod-title{font-size:13px;font-weight:600;color:var(--cs2-ink);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs2-c-prod-price{font-size:13px;color:var(--cs2-ink);font-weight:600}
.cs2-c-prod-price-old{font-size:10px;color:var(--cs2-muted);text-decoration:line-through;font-weight:400;margin-left:4px}

/* 이미지 메시지 */
.cs2-c-img{max-width:200px;border-radius:8px;display:block;cursor:pointer}

/* ── 하단 추천답변 + 입력 영역 ── */
.cs2-c-foot{flex-shrink:0;background:var(--cs2-surface);border-top:1px solid var(--cs2-border)}
.cs2-sug-tabs{
  display:flex;gap:2px;padding:10px 24px 0;align-items:center;
  border-bottom:1px solid var(--cs2-border);
}
.cs2-sug-tab{
  padding:7px 12px;font-size:12px;background:transparent;border:none;
  color:var(--cs2-muted);cursor:pointer;font-family:inherit;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.cs2-sug-tab:hover{color:var(--cs2-ink-2)}
.cs2-sug-tab.on{color:var(--cs2-accent);font-weight:600;border-bottom-color:var(--cs2-accent)}
.cs2-sug-tab-n{color:var(--cs2-muted);font-weight:400;margin-left:4px}
.cs2-sug-refresh{
  margin-left:auto;padding:4px 9px;font-size:10px;background:transparent;
  border:1px solid var(--cs2-border);border-radius:4px;color:var(--cs2-ink-3);
  cursor:pointer;font-family:inherit;margin-bottom:6px;
}
.cs2-sug-refresh:hover{background:var(--cs2-bg-2)}

.cs2-sug-list{max-height:320px;overflow-y:auto;padding:10px 24px 8px;display:flex;flex-direction:column;gap:6px}
.cs2-sug-empty{padding:20px 12px;text-align:center;font-size:11px;color:var(--cs2-muted)}

.cs2-sug-card{
  border:1px solid var(--cs2-border);border-radius:8px;padding:11px 14px;
  background:var(--cs2-surface);cursor:pointer;display:flex;gap:12px;align-items:flex-start;
  transition:all .1s;
}
.cs2-sug-card:hover{border-color:var(--cs2-border-strong);background:#FAFAFA}
.cs2-sug-card.top{border-color:var(--cs2-accent);background:var(--cs2-accent-softer);border-width:1.5px}
.cs2-sug-score{
  width:30px;height:30px;border-radius:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;flex-shrink:0;color:var(--cs2-surface);
}
.cs2-sug-score.s1{background:var(--cs2-accent)}
.cs2-sug-score.s2{background:var(--cs2-ink-3)}
.cs2-sug-score.s3{background:var(--cs2-muted)}
.cs2-sug-score.s4{background:var(--cs2-muted-2)}
.cs2-sug-score-n{font-size:10px;font-weight:700;line-height:1}
.cs2-sug-score-l{font-size:7px;opacity:0.7;line-height:1;margin-top:1px}
.cs2-sug-body{flex:1;min-width:0}
.cs2-sug-head{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.cs2-sug-title{font-size:12px;font-weight:600;color:var(--cs2-ink)}
.cs2-sug-tag{font-size:10px;padding:1px 6px;border-radius:3px;font-weight:500}
.cs2-sug-tag.auto{background:var(--cs2-accent);color:var(--cs2-surface)}
.cs2-sug-tag.b2b{background:var(--cs2-purple-bg);color:var(--cs2-purple-ink)}
.cs2-sug-tag.prod{background:var(--cs2-warn-bg);color:var(--cs2-warn-ink)}
.cs2-sug-tag.ship{background:var(--cs2-info-bg);color:var(--cs2-info-ink)}
.cs2-sug-tag.rma{background:var(--cs2-danger-bg);color:var(--cs2-danger)}
.cs2-sug-tag.faq{background:#F5F5F5;color:var(--cs2-ink-3);border:1px solid var(--cs2-border)}
.cs2-sug-tag.stock{background:var(--cs2-warn-bg);color:var(--cs2-warn-ink)}
.cs2-sug-text{
  font-size:13px;color:var(--cs2-ink-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.cs2-quick-list{padding:12px 24px 10px;display:flex;flex-wrap:wrap;gap:6px}
.cs2-quick-btn{
  padding:6px 12px;font-size:11px;background:#FFFFFF;border:1px solid var(--cs2-border);
  border-radius:14px;color:var(--cs2-ink-2);cursor:pointer;font-family:inherit;
}
.cs2-quick-btn:hover{background:#F5F5F5;border-color:var(--cs2-border-strong)}

.cs2-input-wrap{
  padding:12px 24px;display:flex;gap:10px;align-items:flex-end;
  border-top:1px solid var(--cs2-border);
}
.cs2-input{
  flex:1;resize:none;min-height:48px;max-height:160px;padding:12px 14px;
  border:1px solid var(--cs2-border);border-radius:8px;font-size:14px;
  font-family:inherit;background:var(--cs2-surface);color:var(--cs2-ink);line-height:1.55;
}
.cs2-input:focus{outline:none;border-color:var(--cs2-accent);box-shadow:0 0 0 3px var(--cs2-accent-soft)}
.cs2-send{
  padding:12px 22px;font-size:14px;background:var(--cs2-accent);color:#FFFFFF;
  border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;
}
.cs2-send:hover{background:var(--cs2-accent-hover)}
.cs2-send:disabled{background:var(--cs2-muted-2);cursor:not-allowed}

/* ── 우측 사이드 ── */
.cs2-r-sec{padding:14px 16px;border-bottom:1px solid var(--cs2-border);background:var(--cs2-surface)}
.cs2-r-sec:last-child{border-bottom:none}
.cs2-r-label{font-size:10px;color:var(--cs2-muted);font-weight:600;margin-bottom:8px;letter-spacing:0.3px;text-transform:uppercase}
.cs2-r-avatar-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cs2-r-avatar{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;
}
.cs2-r-avatar.tt{background:var(--cs2-warn-bg);color:var(--cs2-warn-ink)}
.cs2-r-avatar.ss{background:var(--cs2-ok-bg);color:var(--cs2-ok-ink)}
.cs2-r-avatar.cp{background:var(--cs2-warn-bg);color:var(--cs2-warn-ink)}
.cs2-r-avatar.wc{background:var(--cs2-purple-bg);color:var(--cs2-purple-ink)}
.cs2-r-name{font-size:13px;font-weight:600;color:var(--cs2-ink)}
.cs2-r-sub{font-size:10px;color:var(--cs2-muted)}
.cs2-r-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cs2-r-stat{background:#F5F5F5;border-radius:6px;padding:7px 9px}
.cs2-r-stat-k{font-size:10px;color:var(--cs2-muted)}
.cs2-r-stat-v{font-size:12px;font-weight:600;color:var(--cs2-ink)}
.cs2-r-prodcard{
  border:1px solid var(--cs2-border);border-radius:6px;padding:9px;display:flex;gap:9px;
  cursor:pointer;transition:border-color .1s;
}
.cs2-r-prodcard:hover{border-color:var(--cs2-border-strong)}
.cs2-r-prodcard-img{
  width:44px;height:44px;background:var(--cs2-bg-2);border-radius:4px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--cs2-muted);
}
.cs2-r-prodcard-img img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.cs2-r-prodcard-body{flex:1;min-width:0}
.cs2-r-prodcard-name{font-size:11px;font-weight:600;color:var(--cs2-ink);line-height:1.3;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs2-r-prodcard-price{font-size:12px;color:var(--cs2-ink);font-weight:600}
.cs2-r-prodcard-meta{font-size:10px;color:var(--cs2-muted);margin-top:2px}
.cs2-r-sidebtn{
  width:100%;padding:8px 10px;font-size:11px;background:#FFFFFF;border:1px solid var(--cs2-border);
  border-radius:6px;margin-bottom:4px;text-align:left;color:var(--cs2-ink-2);cursor:pointer;font-family:inherit;
}
.cs2-r-sidebtn:hover{background:#F5F5F5;border-color:var(--cs2-border-strong)}
.cs2-r-sidebtn:last-child{margin-bottom:0}

/* 우측 사이드 담당자 드롭다운 */
.cs2-r-assign{margin-bottom:8px}
.cs2-r-assign-lab{font-size:10px;color:var(--cs2-muted);margin-bottom:4px}
.cs2-r-assign-sel{
  width:100%;padding:8px 10px;font-size:12px;background:#FFFFFF;
  border:1px solid var(--cs2-border);border-radius:6px;color:var(--cs2-ink);
  font-family:inherit;cursor:pointer;
}
.cs2-r-assign-sel:hover{border-color:var(--cs2-border-strong)}
.cs2-r-assign-sel:focus{outline:none;border-color:var(--cs2-ink)}
.cs2-r-assign-meta{font-size:10px;color:var(--cs2-muted);margin-top:4px}

/* 중앙 헤더 담당자 드롭다운 */
.cs2-c-assign{
  padding:7px 12px;font-size:12px;background:#FFFFFF;
  border:1px solid var(--cs2-border);border-radius:6px;color:var(--cs2-ink-2);
  cursor:pointer;font-family:inherit;white-space:nowrap;
  max-width:140px;
}
.cs2-c-assign:hover{background:#F5F5F5;border-color:var(--cs2-border-strong)}
.cs2-c-assign:focus{outline:none;border-color:var(--cs2-ink)}
.cs2-r-memo{
  width:100%;resize:none;height:70px;padding:8px;border:1px solid var(--cs2-border);border-radius:5px;
  font-size:12px;font-family:inherit;box-sizing:border-box;background:#FAFAFA;color:var(--cs2-ink);
}
.cs2-r-memo:focus{outline:none;border-color:var(--cs2-ink)}

/* ── 다크모드 (토큰만 덮어씀, 구조 동일) ── */
body.dark .cs2-root{
  --cs2-bg:#1a1917;
  --cs2-surface:#242220;
  --cs2-border:#3a3733;
  --cs2-border-strong:#4d4a45;
  --cs2-ink:#EDEAE4;
  --cs2-ink-2:#C8C4BC;
  --cs2-ink-3:#9A9690;
  --cs2-muted:#6F6C67;
  --cs2-muted-2:#4f4c47;
  --cs2-bg-2:#2d2b28;
}
body.dark .cs2-c-btn-primary:hover,body.dark .cs2-send:hover{background:#555}

/* ─────────────────────────────────────────────────────
   CS 배정 알림 UI (토스트, 빨간 점, 카드 하이라이트, 뱃지 펄스)
   ───────────────────────────────────────────────────── */

/* 사이드바 뱃지 펄스 애니메이션 — 새 배정 있을 때 주의 끌기 */
@keyframes cs2-badge-pulse-anim {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,119,6,0.6); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(217,119,6,0); }
}
.cs2-badge-pulse {
  animation: cs2-badge-pulse-anim 1.6s ease-in-out infinite;
  background: #D97706 !important;
}

/* 카드 새 배정 빨간 점 */
.cs2-card-newdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D97706;
  box-shadow: 0 0 0 2px rgba(217,119,6,0.2);
  flex-shrink: 0;
  margin-right: 2px;
  animation: cs2-newdot-pulse 2s ease-in-out infinite;
}
@keyframes cs2-newdot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(217,119,6,0.2); }
  50%      { box-shadow: 0 0 0 5px rgba(217,119,6,0.05); }
}

/* 카드 자체도 하이라이트 (새 배정) */
.cs2-card.newdot {
  background: #FFFBF0;
  border-left: 3px solid #D97706;
}
.cs2-card.newdot:hover {
  background: #FEF3DA;
}

/* ─── 클릭 가능한 "CS 배정 도착" 토스트 (5초) ─── */
.cs2-toast-assign {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 320px;
  max-width: 420px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid #D97706;
  border-left: 4px solid #D97706;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  cursor: pointer;
  animation: cs2-toast-slide 0.3s ease-out;
  transition: transform 0.15s;
}
.cs2-toast-assign:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.22);
}
@keyframes cs2-toast-slide {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cs2-toast-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cs2-toast-body {
  flex: 1;
  min-width: 0;
}
.cs2-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 3px;
}
.cs2-toast-sub {
  font-size: 12px;
  color: #5F5F5F;
  line-height: 1.4;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs2-toast-hint {
  font-size: 11px;
  color: #D97706;
  font-weight: 600;
}
.cs2-toast-close {
  background: transparent;
  border: none;
  font-size: 14px;
  color: #9A9A9A;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.cs2-toast-close:hover {
  color: #1A1A1A;
}

/* 다크모드 지원 */
body.dark .cs2-toast-assign {
  background: #2d2b28;
  border-color: #D97706;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
body.dark .cs2-toast-title { color: #EDEAE4; }
body.dark .cs2-toast-sub { color: #B4B2A9; }
body.dark .cs2-card.newdot { background: rgba(217,119,6,0.08); }
body.dark .cs2-card.newdot:hover { background: rgba(217,119,6,0.15); }

/* "내 담당" KPI 강조 — 할 일이 있으면 앰버 배경 */
.cs2-kpi-my-on {
  background: #FFFBF0;
  border-radius: 6px;
  padding: 2px 6px;
}
.cs2-kpi-n.accent {
  color: #D97706 !important;
  font-weight: 700;
}
.cs2-kpi-newdot {
  display: inline-block;
  background: #D97706;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 3px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   내 CS 담당 플로팅 버튼 (우측 하단 플로팅 스택 중 하나)
   2026-04-09: 내게 배정된 CS 문의 미처리 건수 표시 + 클릭 시 내 담당 필터로 이동
   ═══════════════════════════════════════════════════════════════════════════ */
.cs2-fab-mycs {
  position: fixed;
  right: 20px;
  bottom: 280px; /* 채팅(216) 버그(152) 검색(88) 위 */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #D97706; /* 앰버 포인트 */
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
  z-index: 9500;
  display: none; /* 기본 숨김, 담당 건 있을 때만 표시 */
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  padding: 0;
}
.cs2-fab-mycs.show {
  display: flex;
}
.cs2-fab-mycs:hover {
  background: #B45309;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.45);
}
.cs2-fab-mycs:active {
  transform: translateY(0);
}
/* 숫자 뱃지 */
.cs2-fab-mycs-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  line-height: 1;
}
/* 새 배정 있을 때만 pulse */
.cs2-fab-mycs.has-new {
  animation: cs2-fab-mycs-pulse 1.8s ease-in-out infinite;
}
@keyframes cs2-fab-mycs-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35), 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50%      { box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35), 0 0 0 12px rgba(220, 38, 38, 0); }
}
/* 다크모드 */
body.dark .cs2-fab-mycs {
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.5);
}

/* 플로팅 FAB - 미할당 모드 (관리자용, 연한 색상) */
.cs2-fab-mycs.mode-unassigned {
  background: #6B7280;
}
.cs2-fab-mycs.mode-unassigned:hover {
  background: #4B5563;
}