/* VibeCrew overlays — overlays.css(2,952줄) 기능별 분해 (보비·2026-05-30·비비 R3 배치).
   cascade 순서 보존: base→media→panels→mobile→ceo. index.html 에서 이 순서로 로드. */

/* VibeCrew modal, overlay, popover, and mobile sheet styles split from app.css. */

/* ==== Toast ==== */
.toast {
  position: fixed; top: 20px; right: 20px;
  padding: 12px 20px; border-radius: 12px;
  font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text); z-index: 1500;
  box-shadow: 0 8px 24px var(--vc-black-40), 0 0 0 1px var(--vc-white-06);
  max-width: 380px; line-height: 1.4;
  animation: vc-fade-up 0.22s var(--vc-ease-out);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.toast.ok {
  background: var(--vc-green-10);
  border: 1px solid var(--vc-green-30);
  color: var(--vc-green-2);
}
.toast.err {
  background: var(--vc-red-10);
  border: 1px solid var(--vc-red-30);
  color: var(--vc-red-2);
}
.toast.info {
  background: var(--vc-blue-10);
  border: 1px solid var(--vc-blue-30);
  color: var(--vc-blue-2);
}
.toast a { color: inherit; text-decoration: underline; }
@keyframes vc-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==== Modal ==== */
.modal-bg {
  position: fixed; inset: 0;
  background: var(--vc-overlay);
  backdrop-filter: blur(4px);
  /* z-index 1100: settings-page-overlay (1000) 위·toast/tooltip (1500) 아래.
     설정 페이지에서 워커 모달 열어도 페이지 가려지지 않도록 (PR var(--vc-green-deep) 후속 fix). */
  z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal {
  background: var(--vc-surface);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-4);
  box-shadow: var(--vc-elev-3);
  padding: 28px; width: 380px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  animation: vc-scale-in 0.22s var(--vc-ease-out);
}
.modal.lg { width: 560px; }
.modal h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--vc-text); }
.modal .row { margin-bottom: 12px; font-size: var(--vc-fs-sm); color: var(--vc-muted); }
.modal label { display: block; margin-bottom: 4px; font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.modal input, .modal select {
  width: 100%; padding: 8px 12px;
  background: var(--vc-input); border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3); color: var(--vc-text); font-size: 14px;
  outline: none; min-height: var(--vc-touch);
}
.modal input:focus, .modal select:focus { border-color: var(--vc-blue); box-shadow: var(--vc-glow-blue); }
.modal textarea:not(.chat-input-area) {
  width: 100%; padding: 8px 12px;
  background: var(--vc-input); border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3); color: var(--vc-text); font-size: var(--vc-fs-sm);
  min-height: 140px; font-family: var(--vc-mono); outline: none; resize: vertical;
}
.modal textarea:not(.chat-input-area):focus { border-color: var(--vc-blue); }
.modal textarea.ask-supervisor-textarea-short {
  min-height: calc(var(--vc-s-8) + var(--vc-s-7));
}
.modal textarea.ask-supervisor-textarea-tall {
  min-height: calc(var(--vc-s-9) + var(--vc-s-8) + var(--vc-s-2));
}
.modal label.ask-supervisor-task-toggle {
  display: flex;
  align-items: center;
  gap: var(--vc-s-2);
  min-height: var(--vc-touch);
  margin-bottom: var(--vc-s-3);
  color: var(--vc-text);
}
.modal input.ask-supervisor-task-toggle-input {
  width: var(--vc-s-4);
  height: var(--vc-s-4);
  min-height: var(--vc-s-4);
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--vc-blue);
}
.ask-supervisor-task-toggle span {
  font-size: var(--vc-fs-sm);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 16px; flex-wrap: wrap;
}
.orch-task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}
.orch-task-kv {
  border: 1px solid var(--vc-line-2);
  background: var(--vc-surface-2);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.orch-task-kv span:first-child {
  display: block;
  color: var(--vc-muted);
  font-size: var(--vc-fs-xs);
  margin-bottom: 4px;
}
.orch-task-kv code,
.orch-task-kv strong,
.orch-task-kv a {
  overflow-wrap: anywhere;
}
.orch-task-section {
  border-top: 1px solid var(--vc-line-2);
  padding-top: 12px;
  margin-top: 12px;
}
.orch-task-section-title {
  color: var(--vc-text);
  font-weight: 700;
  margin-bottom: 8px;
}
.orch-task-section pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--vc-text);
  background: var(--vc-surface-2);
  border: 1px solid var(--vc-line-2);
  border-radius: 8px;
  padding: 10px;
}
.orch-task-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--vc-line-2);
  border-radius: 8px;
  background: var(--vc-surface-2);
  color: var(--vc-text);
  text-align: left;
  cursor: pointer;
}
.orch-task-row:hover {
  border-color: var(--vc-blue-30);
}
.orch-task-row span {
  min-width: 0;
}
.orch-task-row strong,
.orch-task-row small {
  display: block;
  overflow-wrap: anywhere;
}
.orch-task-row small {
  color: var(--vc-muted);
  margin-top: 4px;
}
.orch-task-row em {
  font-style: normal;
  flex-shrink: 0;
}
.ok { color: var(--vc-green); }
.danger { color: var(--vc-red); }
.autonomy-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  background: var(--vc-white-025);
  cursor: pointer;
  transition: border-color var(--vc-fast), background var(--vc-fast), box-shadow var(--vc-fast);
}
.modal label.autonomy-choice { margin-bottom: 8px; color: var(--vc-text); }
.autonomy-choice:hover { border-color: var(--vc-blue-30); background: var(--vc-blue-10); }
.autonomy-choice.is-active { border-color: var(--vc-blue); background: var(--vc-blue-10); box-shadow: var(--vc-glow-blue); }
.modal input.autonomy-choice-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
}
.autonomy-choice-radio {
  width: 20px;
  height: 20px;
  border-radius: var(--vc-r-pill);
  border: 2px solid var(--vc-line-3);
  background: var(--vc-input);
  box-shadow: inset 0 0 0 5px var(--vc-input);
  flex-shrink: 0;
}
.autonomy-choice.is-active .autonomy-choice-radio {
  border-color: var(--vc-blue);
  background: var(--vc-blue);
}
.autonomy-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.autonomy-choice-text strong { font-size: 13px; color: var(--vc-text); font-family: var(--vc-mono); }
.autonomy-choice-text span { font-size: 13px; color: var(--vc-text-2); }

/* ==== Lightbox ==== */
.lightbox {
  position: fixed; inset: 0; background: var(--vc-black-88);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; padding: 32px;
}
.lightbox img {
  max-width: 90vw; max-height: 70vh;
  min-width: min(60vmin,400px); min-height: min(60vmin,400px);
  object-fit: contain; border-radius: var(--vc-r-6);
  box-shadow: var(--vc-elev-3); background: var(--vc-black-30);
}
.lightbox-close {
  position: absolute; top: 16px; right: 24px;
  width: var(--vc-touch); height: var(--vc-touch);
  color: var(--vc-on-accent); font-size: 24px; cursor: pointer;
  background: var(--vc-black-40); border: none;
  border-radius: var(--vc-r-pill); opacity: 0.8;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-history { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 90vw; }
.lightbox-history-item {
  width: 60px; height: 60px; border-radius: var(--vc-r-pill);
  background-size: cover; background-position: center;
  cursor: pointer; border: 2px solid transparent;
  transition: border-color var(--vc-fast), transform var(--vc-fast);
}
.lightbox-history-item:hover { border-color: var(--vc-blue); transform: scale(1.06); }
.lightbox-history-item.current { border-color: var(--vc-green); }
.lightbox-history-item.previewing { border-color: var(--vc-blue); transform: scale(1.1); box-shadow: 0 0 0 3px var(--vc-blue-15); }
.lightbox-caption { color: var(--vc-on-accent); font-size: var(--vc-fs-md); }


/* ==== 2. ⌘K 커맨드 팔레트 ==== */
.cmd-palette {
  position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
  width: 560px; max-width: 90vw;
  background: var(--vc-surface);
  border: 1px solid var(--vc-line-2);
  border-radius: 16px;
  box-shadow: var(--vc-elev-3);
  overflow: hidden;
  z-index: 200;
  animation: vc-scale-in 0.18s var(--vc-ease-out);
}
.cmd-palette-input {
  width: 100%; padding: 16px 20px;
  background: none; border: none; outline: none;
  font-size: 16px; color: var(--vc-text);
  border-bottom: 1px solid var(--vc-line);
}
.cmd-palette-input::placeholder { color: var(--vc-muted); }
.cmd-palette-list { max-height: 360px; overflow-y: auto; padding: 6px 0; }
.cmd-item {
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; font-size: 14px; color: var(--vc-text-2);
  transition: background var(--vc-fast), color var(--vc-fast);
}
.cmd-item:hover, .cmd-item.focused { background: var(--vc-blue-10); color: var(--vc-text); }
.cmd-item .cmd-icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--vc-surface-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px;
}
.cmd-item .cmd-label { flex: 1; }
.cmd-item .cmd-shortcut {
  font-size: 11px; color: var(--vc-muted);
  font-family: var(--vc-mono);
}
.cmd-palette-footer {
  padding: 8px 16px; border-top: 1px solid var(--vc-line);
  font-size: 11px; color: var(--vc-muted); display: flex; gap: 12px;
}

/* ==== 3. 액션 시트 (모바일 바텀 시트) ==== */
.action-sheet-bg {
  position: fixed; inset: 0;
  background: var(--vc-overlay);
  backdrop-filter: blur(4px);
  z-index: 1100;
}
.action-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--vc-surface);
  border-top: 1px solid var(--vc-line-2);
  border-radius: 20px 20px 0 0;
  padding: 8px 0 calc(20px + env(safe-area-inset-bottom));
  z-index: 1101;
  animation: slide-up 0.28s var(--vc-ease-out);
}
.action-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--vc-line-3); margin: 0 auto 16px;
}
.action-sheet-item {
  padding: 14px 24px; display: flex; align-items: center; gap: 14px;
  font-size: 15px; color: var(--vc-text); cursor: pointer;
  transition: background var(--vc-fast);
}
.action-sheet-item:hover { background: var(--vc-surface-2); }
.action-sheet-item .action-sheet-icon {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--vc-text-2); flex-shrink: 0;
}
.action-sheet-item .action-sheet-icon svg { width: 18px; height: 18px; display: block; }
.action-sheet-item.disabled { opacity: 0.42; cursor: not-allowed; }
.action-sheet-item.disabled:hover { background: transparent; }
.action-sheet-item.danger { color: var(--vc-red); }
.action-sheet-item.danger .action-sheet-icon { color: var(--vc-red); }
.action-sheet-sep { height: 1px; background: var(--vc-line); margin: 4px 0; }
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* 워커 카드 우클릭 — 카드 옆 popover (action-sheet 의 desktop 변형) */
.action-popover-bg {
  position: fixed; inset: 0; z-index: 1100;
}
.action-popover {
  position: fixed;
  background: var(--vc-surface);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  min-width: 240px; max-width: 320px;
  z-index: 1101;
  animation: popover-in 0.14s var(--vc-ease-out);
  transform-origin: top left;
}
.action-popover-item {
  padding: 8px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--vc-text); cursor: pointer;
  transition: background var(--vc-fast);
}
.action-popover-item:hover { background: var(--vc-surface-2); }
.action-popover-item .action-popover-icon {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--vc-text-2); flex-shrink: 0;
}
.action-popover-item .action-popover-icon svg { width: 14px; height: 14px; display: block; }
.action-popover-item.disabled { opacity: 0.42; cursor: not-allowed; }
.action-popover-item.disabled:hover { background: transparent; }
.action-popover-item.danger { color: var(--vc-red); }
.action-popover-item.danger .action-popover-icon { color: var(--vc-red); }
.action-popover-sep { height: 1px; background: var(--vc-line); margin: 4px 0; }
@keyframes popover-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}


/* ==== 알림 센터 ==== */
.notif-btn { position: relative; padding: 6px 10px; }
.notif-badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; border-radius: 99px;
  background: var(--vc-red); color: var(--vc-on-accent);
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
.notif-panel {
  position: fixed; top: 64px; right: 16px;
  width: 340px; max-height: 440px; overflow-y: auto;
  background: var(--vc-surface);
  border: 1px solid var(--vc-line-2);
  border-radius: 14px;
  box-shadow: var(--vc-elev-3);
  z-index: 1200;
  animation: vc-fade-up 0.18s var(--vc-ease-out);
}
.notif-panel-head {
  padding: 12px 16px; border-bottom: 1px solid var(--vc-line);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 14px; position: sticky; top: 0;
  background: var(--vc-surface);
}
.notif-mark-all { font-size: 12px; color: var(--vc-blue-2); background: none; border: none; cursor: pointer; }
.notif-item {
  width: 100%; text-align: left; background: none; border: none; color: inherit;
  padding: 12px 16px; border-bottom: 1px solid var(--vc-line);
  display: flex; gap: 10px; cursor: pointer;
  transition: background var(--vc-fast);
}
.notif-item:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: -2px; }
.notif-item:hover { background: var(--vc-surface-2); }
.notif-item.unread { border-left: 3px solid var(--vc-blue); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.notif-dot.info { background: var(--vc-blue); }
.notif-dot.warn { background: var(--vc-amber); }
.notif-dot.error { background: var(--vc-red); }
.notif-dot.success { background: var(--vc-green); }
.notif-title { font-size: 13px; font-weight: 600; color: var(--vc-text); }
.notif-body { font-size: 12px; color: var(--vc-muted); margin-top: 2px; }
.notif-empty { padding: 24px; text-align: center; color: var(--vc-muted); font-size: 13px; }

/* Profile menu (헤더 아바타 click) */
#profile-menu-popover {
  position: fixed; top: 58px; right: var(--vc-s-3);
  z-index: 1300;
  background: var(--vc-surface);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  box-shadow: var(--vc-elev-3);
  min-width: 200px;
  padding: var(--vc-s-1);
  animation: vc-fade-up var(--vc-fast) var(--vc-ease-out);
}
.profile-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: var(--vc-s-2);
  padding: var(--vc-s-2) var(--vc-s-3);
  background: none; border: none; cursor: pointer;
  color: var(--vc-text);
  font-size: var(--vc-fs-sm);
  font-family: inherit;
  text-align: left;
  border-radius: var(--vc-r-1);
  transition: background var(--vc-fast);
}
.profile-menu-item:hover { background: var(--vc-blue-10); }
.profile-menu-item:focus-visible {
  outline: 2px solid var(--vc-blue);
  outline-offset: -2px;
}
.profile-menu-icon { width: 16px; height: 16px; display: inline-flex; flex-shrink: 0; }
.profile-menu-icon svg { width: 100%; height: 100%; }
.profile-menu-divider {
  height: 1px;
  background: var(--vc-line);
  margin: var(--vc-s-1) 0;
}

.media-lightbox .media-lightbox-inner {
  max-width: 92vw; max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.media-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--vc-r-pill);
  border: 1px solid var(--vc-white-18);
  background: var(--vc-input-72);
  color: var(--vc-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--vc-fast), border-color var(--vc-fast), transform var(--vc-fast);
}
.media-lightbox-nav:hover { background: var(--vc-blue-20); border-color: var(--vc-blue-30); transform: translateY(-50%) scale(1.04); }
.media-lightbox-prev { left: clamp(14px, 4vw, 48px); }
.media-lightbox-next { right: clamp(14px, 4vw, 48px); }
.media-lightbox-nav[hidden] { display: none; }
.media-lightbox img,
.media-lightbox video {
  max-width: 92vw; max-height: 78vh;
  min-width: 0; min-height: 0;
  border-radius: 12px; object-fit: contain;
  box-shadow: var(--vc-elev-3); background: var(--vc-black-35);
}
.media-lightbox-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: min(92vw, 860px);
  color: var(--vc-text-2);
  font-size: 14px;
  text-align: center;
}
.media-lightbox-counter {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--vc-white-12);
  border-radius: var(--vc-r-pill);
  color: var(--vc-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--vc-white-06);
}
.media-lightbox-actions { display: flex; justify-content: center; gap: 8px; }

/* === 코드 그래프 오버레이 (Understand-Anything 뷰어 iframe·보비 2026-06-01) === */
.cg-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--vc-bg); display: flex; flex-direction: column;
  opacity: 0; transition: opacity var(--vc-fast) var(--vc-ease-out);
}
.cg-overlay.cg-open { opacity: 1; }
.cg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--vc-line);
  background: var(--vc-bg-2); flex-shrink: 0;
}
.cg-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--vc-text);
}
.cg-title svg { color: var(--vc-blue-2); }
.cg-sub { font-size: 12px; font-weight: 400; color: var(--vc-muted); margin-left: 4px; }
.cg-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--vc-line); color: var(--vc-text-2);
  cursor: pointer; transition: background var(--vc-fast), color var(--vc-fast);
}
.cg-close:hover { background: var(--vc-surface); color: var(--vc-text); }
.cg-actions { display: flex; align-items: center; gap: var(--vc-s-2); }
.cg-share {
  display: flex; align-items: center; justify-content: center; gap: var(--vc-s-2);
  min-height: var(--vc-touch); min-width: var(--vc-touch); padding: 0 var(--vc-s-3); border-radius: var(--vc-r-2);
  background: transparent; border: 1px solid var(--vc-line); color: var(--vc-text-2);
  font-size: var(--vc-fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--vc-fast), color var(--vc-fast), border-color var(--vc-fast);
}
.cg-share:hover { background: var(--vc-surface); color: var(--vc-text); border-color: var(--vc-blue-2); }
.cg-frame { flex: 1; width: 100%; border: none; background: var(--vc-bg); }
/* 컨트롤타워 컴백브리핑 (보비 2026-07-01 재설계 — 데이터 나열 박스 X·합성된 브리핑)
   원칙: 헤드라인이 먼저 말한다 → 동일 원인은 그룹핑돼 보인다 → 프로젝트는 흐름(깔때기)으로 보인다.
   대표님 피드백(2026-07-01): "박스와 텍스트의 나열" 지적 — 4박스 동급 그리드를 전면 폐기. */
.ct-scroll { flex: 1; overflow-y: auto; padding: var(--vc-s-5); background: var(--vc-bg); display: flex; flex-direction: column; gap: var(--vc-s-5); }
.ct-empty { padding: var(--vc-s-6); text-align: center; color: var(--vc-muted); }
.ct-empty-inline { padding: var(--vc-s-3) 0; color: var(--vc-muted); font-style: italic; font-size: var(--vc-fs-sm); }
.ct-stale-note { padding-top: var(--vc-s-2); color: var(--vc-muted); font-size: var(--vc-fs-xs); }
.ct-badge { font-size: var(--vc-fs-xs); font-weight: 700; color: var(--vc-on-accent); background: var(--vc-blue); border-radius: var(--vc-r-pill); padding: var(--vc-s-1) var(--vc-s-2); }

/* 헤드라인 — "지금 뭘 봐야 하는지" 한 줄로. 좌측 강조 보더 + severity 틴트 배경. */
.ct-headline { border-left: var(--vc-s-1) solid var(--vc-line); border-radius: var(--vc-r-3); padding: var(--vc-s-4) var(--vc-s-5); }
.ct-headline-title { font-size: var(--vc-fs-xl); font-weight: 800; color: var(--vc-text); }
.ct-headline-sub { font-size: var(--vc-fs-sm); color: var(--vc-text-2); margin-top: var(--vc-s-1); }
.ct-headline-who { color: var(--vc-muted); }

/* 크루 — 동급 박스 6개 대신 한 줄 스트립. */
.ct-crew-strip { display: flex; align-items: baseline; gap: var(--vc-s-2); flex-wrap: wrap; font-size: var(--vc-fs-sm); color: var(--vc-muted); padding: 0 var(--vc-s-1); }
.ct-crew-n { font-size: var(--vc-fs-lg); font-weight: 800; color: var(--vc-text); }
.ct-crew-l { margin-right: var(--vc-s-3); }
.ct-crew-dot { width: var(--vc-s-2); height: var(--vc-s-2); border-radius: var(--vc-r-pill); display: inline-block; }
.ct-crew-dot-ok { background: var(--vc-green); }
.ct-crew-dot-bad { background: var(--vc-red); }

.ct-section-h { font-size: var(--vc-fs-md); font-weight: 700; color: var(--vc-text); margin: 0 0 var(--vc-s-3); display: flex; align-items: center; gap: var(--vc-s-2); }

/* 결정큐 — 원인별 1줄(펼치면 영향 워커). 중복 에러를 9줄로 나열하지 않는다. */
.ct-dq-row { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-3); padding: var(--vc-s-3) var(--vc-s-4); margin-bottom: var(--vc-s-2); }
.ct-dq-row summary { display: flex; align-items: center; gap: var(--vc-s-3); cursor: pointer; list-style: none; min-height: var(--vc-touch); }
.ct-dq-row summary::-webkit-details-marker { display: none; }
.ct-dq-dot { width: var(--vc-s-2); height: var(--vc-s-2); border-radius: var(--vc-r-pill); flex-shrink: 0; }
.ct-dq-text { flex: 1; font-size: var(--vc-fs-sm); color: var(--vc-text); }
.ct-dq-detail { margin-top: var(--vc-s-2); padding-top: var(--vc-s-2); border-top: 1px solid var(--vc-line); font-size: var(--vc-fs-xs); color: var(--vc-muted); }

/* 프로젝트 흐름 — count 비례 폭 깔때기. 정체 구간이 한눈에 보인다. */
.ct-funnel { display: flex; border-radius: var(--vc-r-3); overflow: hidden; }
.ct-funnel-seg { background: var(--vc-surface); border: 1px solid var(--vc-line); padding: var(--vc-s-3) var(--vc-s-2); display: flex; flex-direction: column; align-items: center; gap: var(--vc-s-1); min-width: 0; }
.ct-funnel-n { font-size: var(--vc-fs-lg); font-weight: 800; color: var(--vc-blue); }
.ct-funnel-l { font-size: var(--vc-fs-xs); color: var(--vc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 768px) { .ct-funnel { flex-wrap: wrap; } .ct-funnel-seg { flex-grow: 1 !important; flex-basis: 30%; } }