Release v2.1.8: Company Agent roster overhaul and UI polish

media/sidebar.css

@@ -358,9 +358,56 @@
             list-style: none;
             overflow: hidden;
         }
-        .company-agent-card[data-active="false"] { opacity: 0.55; }
+        /* 비활성 카드는 더 흐릿하게 + 좌측 액센트 바를 떨궈서 한 눈에 그룹 구분되도록. */
+        .company-agent-card[data-active="false"] {
+            opacity: 0.5;
+            background: transparent;
+            border-style: dashed;
+        }
+        .company-agent-card[data-active="true"] {
+            border-left: 3px solid var(--accent);
+        }
+        .company-agent-card[data-locked="true"] {
+            border-left-color: #FACC15;          /* CEO는 골드 액센트 */
+            background: linear-gradient(180deg, rgba(250,204,21,0.06) 0%, transparent 100%);
+        }
         .company-agent-card[data-locked="true"] .company-agent-toggle { cursor: not-allowed; opacity: 0.4; }
 
+        /* 삭제 버튼 — 평소엔 다른 controls 톤과 동일, 파이프라인에서 사용 중이면 disabled. */
+        .company-agent-delete { color: var(--text-dim); }
+        .company-agent-delete:hover:not(.disabled) {
+            color: var(--error); border-color: var(--error);
+        }
+        .company-agent-delete.disabled {
+            opacity: 0.35; cursor: not-allowed;
+        }
+
+        /* 숨겨진 빌트인 복원 영역 — 평소엔 시야에 안 들어오게 차분한 톤. */
+        .company-agent-hidden-section {
+            margin-top: 12px; padding: 10px 12px;
+            border: 1px dashed var(--border); border-radius: 8px;
+            background: transparent; list-style: none;
+        }
+        .company-agent-hidden-head {
+            font-size: 11px; color: var(--text-dim); font-weight: 600;
+            margin-bottom: 2px;
+        }
+        .company-agent-hidden-hint {
+            font-size: 10px; color: var(--text-dim); opacity: 0.8;
+            margin-bottom: 8px;
+        }
+        .company-agent-hidden-list {
+            display: flex; flex-wrap: wrap; gap: 6px;
+        }
+        .company-agent-hidden-chip {
+            background: var(--surface); border: 1px solid var(--border);
+            color: var(--text-primary); font-size: 10.5px;
+            padding: 4px 9px; border-radius: 999px; cursor: pointer;
+        }
+        .company-agent-hidden-chip:hover {
+            border-color: var(--accent); color: var(--accent);
+        }
+
         .company-agent-head {
             display: flex;
             align-items: center;