/* VibeCrew app.css 분해 (보비·2026-05-30·비비 R3). cascade 순서 보존·shell→views */

/* ==== Hero ==== */
.hero-wrap {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 24px 32px; min-height: calc(100svh - 100px);  /* 100vh→100svh: iOS 주소창 오버플로우 방지 (보비 2026-06-02) */
}
.hero-content { max-width: 760px; width: 100%; text-align: center; }
.hero-title {
  font-size: 38px; font-weight: 700; letter-spacing: 0; margin: 0 0 16px;
  background: linear-gradient(180deg, var(--vc-on-accent) 0%, var(--vc-text-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { font-size: var(--vc-fs-lg); color: var(--vc-muted); margin: 0 0 36px; line-height: 1.6; }
.hero-input-wrap {
  background: var(--vc-input); border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-5); padding: 20px 20px 12px;
  transition: border-color var(--vc-fast); position: relative;
}
.hero-input-wrap:focus-within { border-color: var(--vc-blue); box-shadow: var(--vc-glow-blue); }
.hero-input-wrap textarea {
  width: 100%; min-height: 96px; max-height: 240px;
  background: transparent; border: none; outline: none;
  color: var(--vc-text); font-size: var(--vc-fs-lg); line-height: 1.5;
  resize: vertical; font-family: inherit;
}
.hero-input-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--vc-line);
  font-size: var(--vc-fs-xs); color: var(--vc-muted);
}
.hero-nav-btn {
  min-height: 32px; padding: 6px 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3);
  background: var(--vc-white-04); color: var(--vc-text-2);
  font-size: var(--vc-fs-xs); font-weight: 700; cursor: pointer;
  transition: background var(--vc-fast), border-color var(--vc-fast), color var(--vc-fast);
}
.hero-nav-btn:hover { background: var(--vc-blue-10); border-color: var(--vc-blue-30); color: var(--vc-text); }
.hero-send {
  min-height: 34px; padding: 6px 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--vc-blue-50); border-radius: var(--vc-r-3);
  background: linear-gradient(180deg, var(--vc-blue), var(--vc-blue-h));
  color: var(--vc-on-accent); font: inherit; font-size: var(--vc-fs-sm); font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 12px var(--vc-blue-30);
  transition: opacity var(--vc-fast), transform var(--vc-fast), box-shadow var(--vc-fast);
}
.hero-send:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 8px 18px var(--vc-blue-35); }
.hero-send:focus-visible, .hero-nav-btn:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 2px; }
.hero-chips { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; justify-content: center; align-items: center; }
.hero-chip-label { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-right: 6px; }
.hero-chip {
  padding: 8px 16px; background: var(--vc-white-03);
  border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-pill);
  font-size: var(--vc-fs-sm); cursor: pointer; color: var(--vc-text-2);
  transition: all var(--vc-fast);
}
.hero-chip:hover { background: var(--vc-blue-10); border-color: var(--vc-blue-30); color: var(--vc-text); }
.hero-projects { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--vc-line); }
.hero-projects-label { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-bottom: 12px; text-align: left; }
.hero-projects-list { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.hero-proj-chip {
  padding: 8px 16px; background: var(--vc-white-04);
  border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3);
  font-size: var(--vc-fs-sm); cursor: pointer; color: var(--vc-text);
  transition: all var(--vc-fast);
}
.hero-proj-chip:hover { background: var(--vc-blue-10); border-color: var(--vc-blue-40); }
.hero-footer { margin-top: 32px; font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.hero-thread-actions {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.hero-resume {
  min-height: 38px; padding: 8px 20px; background: var(--vc-blue-10); border: 1px solid var(--vc-blue-20);
  border-radius: var(--vc-r-4); color: var(--vc-text); cursor: pointer;
  font-size: var(--vc-fs-md); transition: all var(--vc-fast);
}
.hero-resume:hover { background: var(--vc-blue-20); border-color: var(--vc-blue-50); }
.hero-resume-secondary {
  background: var(--vc-white-04); border-color: var(--vc-line-2); color: var(--vc-text-2);
}
.hero-resume-secondary:hover { background: var(--vc-white-08); border-color: var(--vc-line-3); color: var(--vc-text); }
.hero-thread-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow-y: auto; text-align: left;
}
.hero-thread-row {
  padding: 12px 16px; background: var(--vc-white-025);
  border: 1px solid var(--vc-line); border-radius: var(--vc-r-4);
  cursor: pointer; transition: all var(--vc-fast);
}
.hero-thread-row:hover { background: var(--vc-blue-10); border-color: var(--vc-blue-40); }
.hero-thread-title { font-size: var(--vc-fs-md); color: var(--vc-text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-thread-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.hero-thread-del, .thread-del { padding: 0 6px; cursor: pointer; opacity: 0.5; font-size: 14px; }
.hero-thread-del:hover, .thread-del:hover { opacity: 1; color: var(--vc-red); }
.thread-row {
  padding: 12px 16px; background: var(--vc-white-03);
  border: 1px solid var(--vc-line); border-radius: var(--vc-r-4);
  cursor: pointer; margin-bottom: 6px; transition: all var(--vc-fast);
}
.thread-row:hover { background: var(--vc-blue-10); border-color: var(--vc-blue-40); }
.thread-row.current { border-color: var(--vc-blue-60); background: var(--vc-blue-10); }

/* ==== Msg Footer Tags ==== */
.msg-footers { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.msg-footer {
  padding: 2px 8px; border-radius: var(--vc-r-pill);
  font-size: var(--vc-fs-xs); font-weight: 600; cursor: default;
  border: 1px solid transparent;
}
.msg-footer.pr { background: var(--vc-blue-10); color: var(--vc-blue-2); border-color: var(--vc-blue-20); cursor: pointer; }
.msg-footer.pr:hover { background: var(--vc-blue-20); }
.msg-footer.deploy { background: var(--vc-green-10); color: var(--vc-green-2); border-color: var(--vc-green-50); }
.msg-footer.merge { background: var(--vc-green-10); color: var(--vc-green-2); border-color: var(--vc-green-40); }
.msg-footer.auto { background: var(--vc-amber-10); color: var(--vc-amber-2); border-color: var(--vc-amber-50); }
.msg-footer.nous { background: var(--vc-white-06); color: var(--vc-text-2); border-color: var(--vc-line); }

/* ==== Empty State ==== */
.empty { text-align: center; padding: 80px 20px; color: var(--vc-muted); }
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 12px; color: var(--vc-muted);
}
.empty-state .empty-icon { font-size: 48px; opacity: 0.4; line-height: 1; }
.empty-state h3 { font-size: 18px; font-weight: 600; color: var(--vc-text-2); margin: 0; letter-spacing: 0; }
.empty-state p { font-size: 14px; margin: 0; text-align: center; line-height: 1.6; max-width: 280px; }

/* ==== Skeleton (로딩) ==== */
@keyframes vc-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--vc-surface) 25%, var(--vc-surface-2) 50%, var(--vc-surface) 75%);
  background-size: 400px 100%;
  animation: vc-shimmer 1.5s infinite;
  border-radius: var(--vc-r-2);
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.med { width: 80%; }
.skeleton-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
}

/* ==== Misc ==== */
.meta-row { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-bottom: 16px; }
.meta-row span { margin-right: 16px; }
.err { color: var(--vc-red); }
.ok { color: var(--vc-green); }
pre {
  background: var(--vc-input); border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-3); padding: 12px; overflow: auto;
  font-size: 11.5px; line-height: 1.55; max-height: 65vh;
  max-width: 100%;
}
.ceo-avatar-corner { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.header-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); }

/* ==== Login ==== */
.login-shell {
  min-height: 100svh; display: flex; align-items: center;  /* 100vh→100svh: iOS 주소창 높이만큼 넘쳐 카드 밀리던 것 방지 (보비 2026-06-02) */
  justify-content: center; padding: 24px; position: relative;
}
.login-shell::before {
  content: ''; position: fixed; inset: 0;
  background: var(--vc-bg);
  pointer-events: none; z-index: 0;
}
.login-shell .login { position: relative; z-index: 1; }
.login-brand {
  text-align: center; font-size: var(--vc-fs-md); color: var(--vc-muted);
  margin-bottom: 24px; letter-spacing: 0.04em;
}
.login-brand strong {
  background: linear-gradient(180deg, var(--vc-on-accent) 0%, var(--vc-text-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 700; font-size: 16px; letter-spacing: 0;
}
.login {
  width: 100%; max-width: 400px; padding: 42px 36px;
  border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4);
  background: var(--vc-surface); box-shadow: var(--vc-elev-3);
}
.login h2 {
  margin: 0 0 8px; font-size: var(--vc-fs-xl); font-weight: 700;
  text-align: center;
  background: linear-gradient(180deg, var(--vc-on-accent) 0%, var(--vc-text-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: 0;
}
.login p { color: var(--vc-muted); font-size: var(--vc-fs-sm); margin: 0 0 26px; text-align: center; line-height: 1.6; }
.login .pwd-wrap { position: relative; }
.login input[type=password], .login input[type=text] {
  width: 100%; padding: 11px 60px 11px 14px;
  background: var(--vc-input); border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-4); color: var(--vc-text); font-size: 14px;
  outline: none; min-height: var(--vc-touch);
}
.login input[type=password]:focus, .login input[type=text]:focus { border-color: var(--vc-blue); }
.login button.pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: auto; padding: 5px 12px; background: transparent;
  border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-1);
  color: var(--vc-muted); cursor: pointer; font-size: var(--vc-fs-xs); margin: 0;
}
.login button.pwd-toggle:hover { color: var(--vc-text); border-color: var(--vc-line-3); }
.login button.submit {
  width: 100%; padding: 11px; margin-top: 16px;
  background: linear-gradient(180deg, var(--vc-blue), var(--vc-blue-h));
  border: none; border-radius: var(--vc-r-4); color: var(--vc-on-accent);
  font-size: 14px; font-weight: 600; cursor: pointer; min-height: var(--vc-touch);
}
.login button.submit:hover { opacity: 0.9; }
.login .err { color: var(--vc-red); font-size: var(--vc-fs-sm); margin-top: 10px; min-height: 1em; text-align: left; }
.login .auto-login {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: var(--vc-fs-sm); color: var(--vc-text); cursor: pointer; user-select: none;
}
.login .auto-login input { width: 15px; height: 15px; accent-color: var(--vc-blue); cursor: pointer; margin: 0; }

/* ==== iPhone 노치·홈 인디케이터 safe-area ==== */
header {
  padding-top: max(0px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.version-badge {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  background: var(--vc-white-05);
  border: 1px solid var(--vc-white-10);
  padding: var(--vc-s-1) var(--vc-s-2);
  border-radius: var(--vc-r-1);
}
.list { padding-bottom: env(safe-area-inset-bottom); }

/* ==== Mobile (≤ 768px) — 탭바 기반 ==== */
@media (max-width: 768px) {
  /* iOS PWA(standalone) 고무줄 바운스·탭바 떠있음 차단.
     핵심: 100svh 는 standalone 에서 실제 화면보다 작게 계산돼 body 가 화면을 못 채우고
     탭바가 위로 떠 큰 여백이 생김. height/svh 대신 position:fixed + inset:0 으로
     실제 visual viewport 에 직접 고정 → svh 계산 자체를 안 씀. body 스크롤 원천 차단. */
  html, body {
    overflow: hidden;
    position: fixed; inset: 0; width: 100%;
    overscroll-behavior: none;
  }
  /* --app-vh = JS(visualViewport)가 박는 실제 보이는 화면 높이 (standalone 정확).
     fallback 100svh. 탭바 떠있음·하단 빈공간의 핵심 — svh/100% 부정확을 우회.
     translateY(--app-vv-offset): 키보드 올라올 때 visual viewport 가 위로 밀린 만큼
     #app 을 내려 보이는 영역에 정렬 → 입력창이 화면 위로 튀는 버그 차단 (보비 2026-06-03).
     transform 으로 #app 이 fixed 자식(.list·tabbar)의 containing block 이 되지만
     offset=0 일 땐 #app=보이는영역 과 동일해 키보드 없을 땐 무영향. */
  #app {
    height: var(--app-vh, 100svh); overflow: hidden;
    transform: translateY(var(--app-vv-offset, 0px));
  }
  /* 헤더 56px + 탭바 56px + safe-area-bottom 을 빼고 남은 높이 */
  .layout {
    display: block;
    height: calc(var(--app-vh, 100svh) - 56px - 56px - env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .rail { display: none; }
  .list {
    position: fixed; top: 0; left: -100%; width: 85%; max-width: 340px;
    height: 100%; z-index: 800; background: var(--vc-bg-2);
    transition: left var(--vc-base); border-right: 1px solid var(--vc-line); padding-top: 60px;
  }
  .list.open { left: 0; box-shadow: var(--vc-elev-3); }
  .list-backdrop { position: fixed; inset: 0; background: var(--vc-black-50); z-index: 799; display: none; }
  .list-backdrop.open { display: block; }
  .nav-toggle { display: inline-flex; }
  .detail { padding: 0; overflow: hidden; }
  .mobile-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-bottom));
    padding: 4px 8px env(safe-area-inset-bottom);
    background: var(--vc-surface-98);
    border-top: 1px solid var(--vc-line);
    display: flex; gap: 4px; z-index: 50;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  /* #6 버튼 기본 스타일 리셋 — iOS 탭 하이라이트·테두리 제거 */
  .mobile-tab {
    flex: 1; min-width: 0; min-height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; font-weight: 500; color: var(--vc-muted);
    cursor: pointer; padding: 5px 2px;
    background: transparent; border: 1px solid transparent; border-radius: var(--vc-r-3); outline: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
  }
  .mobile-tab.active {
    color: var(--vc-blue-2);
    background: var(--vc-blue-10);
    border-color: var(--vc-blue-20);
  }
  .mobile-tab svg { width: 21px; height: 21px; flex-shrink: 0; }
  .mobile-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ==== Mobile drawer (≤ 640px) ==== */
@media (max-width: 640px) {
  /* 로그인 입력 16px: iOS 는 폰트<16px 입력 포커스 시 화면 자동확대 후 복귀 안 함 (보비 2026-06-02) */
  .login input[type=password], .login input[type=text] { font-size: 16px; }
  header {
    padding: max(0px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    height: auto; min-height: 52px;
  }
  h1 { font-size: 15px; }
  .header-sub { display: none; }
  header .project-tabs { display: none; } /* 모바일: 탭바로 대체 */
  .rail { display: none; } /* 모바일: rail 숨김 */
  /* #1 헤더가 52px+safe-area-top 이므로 layout 높이 재보정 (부모 #app=inset:0 실제 viewport) */
  .layout {
    grid-template-columns: 1fr;
    height: calc(var(--app-vh, 100svh) - 52px - env(safe-area-inset-top) - 56px - env(safe-area-inset-bottom));
  }
  .mobile-only { display: initial; }
  /* #8 detail 패딩 제거 — 채팅은 flex:1 으로 채우고 개별 섹션이 패딩 보유 */
  .detail { padding: 0; overflow: hidden; }
  .detail-toolbar { padding: 0 8px 0 12px; gap: 6px; min-height: 46px; }
  .detail-actions { gap: 6px; }
  .detail-action-btn { padding: 6px 10px; }
  .worker-state-chip { display: none; }
  .surface-header { flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .surface-count { align-self: flex-start; }
  .project-tabs { padding: 8px 12px; overflow-x: auto; flex-wrap: nowrap; }
  .project-tab { white-space: nowrap; }
  .detail > pre { overflow-x: auto; padding: 12px 16px; }
  /* 비채팅 섹션에 패딩 복원 */
  .journal-container, .media-grid { padding: 12px 16px; }
  .media-placeholder { padding: 0; }
  .voice-btn,
  .send-btn,
  .btn-menu {
    min-width: 44px;
    min-height: 44px;
  }
  .btn.icon.sm {
    width: 44px;
    height: 44px;
  }
  .hero-wrap { padding: 24px 16px 16px; }
  .hero-title { font-size: 26px; }
  .hero-sub { font-size: var(--vc-fs-md); }
  .hero-input-wrap textarea { font-size: 16px; }
  .item { padding: 8px 12px; }
  .item .name { font-size: var(--vc-fs-md); }
  .avatar.xl { width: 56px; height: 56px; font-size: 18px; }
  .tabs {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, var(--vc-ink) calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, var(--vc-ink) calc(100% - 28px), transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex-shrink: 0; }
  .tab { white-space: nowrap; padding: 0 12px; min-height: 46px; }
  .project-tabs {
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, var(--vc-ink) calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, var(--vc-ink) calc(100% - 28px), transparent);
  }
  .project-tabs::-webkit-scrollbar { display: none; }
  .login { padding: 32px 24px; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 22px; }
}

/* ==== 모션 감소 환경 ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ================================================================
   Tier A UI 개선 — v2 추가 컴포넌트
   ================================================================ */

/* ==== 4. 워커 상세 탭바 개선 ==== */
.detail-tabs {
  display: flex; border-bottom: 1px solid var(--vc-line);
  background: var(--vc-bg); padding: 0 20px;
  position: sticky; top: 0; z-index: 10;
}
.detail-tab {
  padding: 12px 16px; font-size: 13px; font-weight: 500;
  color: var(--vc-muted); border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 0.14s; white-space: nowrap;
  background: none; border-top: none; border-left: none; border-right: none;
}
.detail-tab:hover { color: var(--vc-text-2); }
.detail-tab.active { color: var(--vc-text); border-bottom-color: var(--vc-blue); }

/* ==== 5. system_prompt 편집기 ==== */
.prompt-editor {
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 16px; height: 100%;
  box-sizing: border-box;
}
.prompt-textarea {
  flex: 1; background: var(--vc-input);
  border: 1px solid var(--vc-line-2); border-radius: 12px;
  padding: 16px; color: var(--vc-text); font-size: 13px;
  font-family: var(--vc-mono);
  line-height: 1.6; resize: none; outline: none;
  transition: border-color var(--vc-fast), box-shadow var(--vc-fast);
}
.prompt-textarea:focus {
  border-color: var(--vc-blue-50);
  box-shadow: 0 0 0 3px var(--vc-blue-08);
}
.prompt-footer { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.prompt-char-count { font-size: var(--vc-fs-xs); color: var(--vc-muted); }

/* ==== 6. 프로젝트 탭 (헤더) 개선 ==== */
/* 기존 .project-tab 을 확장 — font-weight·border 세분화 */
.project-tab {
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--vc-text-2); cursor: pointer; border: 1px solid transparent;
  transition: all 0.14s; white-space: nowrap; background: none;
}
.project-tab:hover { background: var(--vc-surface); color: var(--vc-text); }
.project-tab.active {
  background: var(--vc-blue-10); color: var(--vc-blue-2);
  border-color: var(--vc-blue-35);
}
/* add 버튼은 기존 스타일 유지 (override) */
.project-tab.add {
  font-weight: 500; font-size: var(--vc-fs-sm);
  color: var(--vc-muted); border-style: dashed; border-color: var(--vc-line-2);
}
.project-tab.add:hover { background: var(--vc-white-04); color: var(--vc-text-2); border-style: dashed; }

/* ==== Media Grid ==== */
.media-container { padding: 20px 24px; }
.media-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.media-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.media-count { font-size: 13px; color: var(--vc-muted); }
.surface-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.surface-header h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.surface-header p { margin: 5px 0 0; color: var(--vc-muted); font-size: 13px; line-height: 1.45; }
.surface-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.surface-count {
  flex-shrink: 0; padding: 5px 10px; border-radius: var(--vc-r-pill);
  background: var(--vc-blue-10); color: var(--vc-blue-2);
  font-size: 12px; font-weight: 700;
}
.surface-empty {
  min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--vc-muted); padding: 44px 20px;
}
.surface-empty-icon {
  width: 64px; height: 64px; border-radius: var(--vc-r-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--vc-white-035); border: 1px solid var(--vc-line);
  color: var(--vc-text-2); margin-bottom: 14px;
}
.surface-empty h3 { margin: 0; color: var(--vc-text); font-size: 17px; font-weight: 700; }
.surface-empty p { max-width: 360px; margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
.surface-empty-error h3 { color: var(--vc-red-2); }
.journal-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch;
}
.journal-kind-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.journal-kind-tab {
  border: 1px solid var(--vc-line-2);
  background: var(--vc-surface);
  color: var(--vc-muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--vc-fast), background var(--vc-fast), color var(--vc-fast);
}
.journal-kind-tab:hover {
  color: var(--vc-text);
  border-color: var(--vc-line-3);
}
.journal-kind-tab.active {
  border-color: var(--vc-blue);
  background: var(--vc-blue-10);
  color: var(--vc-text);
}
.journal-list { display: grid; gap: 10px; }
.journal-card {
  width: 100%; text-align: left; padding: 14px 16px; cursor: pointer;
  background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: 8px;
  color: var(--vc-text); transition: border-color var(--vc-fast), background var(--vc-fast);
}
.journal-card:hover { background: var(--vc-surface-2); border-color: var(--vc-blue-30); }
.journal-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.journal-kind {
  font-size: 10px; color: var(--vc-blue-2); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.journal-date { font-size: 11px; color: var(--vc-muted); }
.journal-title { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.journal-summary { margin-top: 5px; font-size: 13px; color: var(--vc-text-2); line-height: 1.45; }
.journal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.journal-tags span { font-size: 11px; color: var(--vc-muted); background: var(--vc-bg-2); border-radius: 999px; padding: 3px 8px; }
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.media-placeholder {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.media-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  background: var(--vc-surface-2);
  border: 0;
  padding: 0;
  display: block;
  color: inherit;
}
.media-item img,
.media-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
  display: block;
}
.media-item:hover img,
.media-item:hover video { transform: scale(1.04); }
.media-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, var(--vc-black-70));
  font-size: 11px; color: var(--vc-on-accent);
  opacity: 0; transition: opacity 0.2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-item:hover .media-caption { opacity: 1; }
.media-type-badge {
  position: absolute; top: 6px; right: 6px;
  color: var(--vc-on-accent); opacity: 0.8;
}
.media-play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--vc-on-accent); background: var(--vc-black-12); pointer-events: none;
}
.media-play-badge svg {
  width: 38px; height: 38px; padding: 10px; border-radius: 999px;
  background: var(--vc-black-45); box-shadow: var(--vc-elev-2);
}
.media-item.media-error { background: var(--vc-red-10); }
.media-item.media-error img,
.media-item.media-error video { display: none; }

/* ================================================================
   Mobile Home Screen (VcMobileHome)
   ================================================================ */
.mobile-home-wrap { display: none; }

@media (max-width: 640px) {
  #app:has(.mobile-home-wrap) .hero-wrap { display: none; }
  #app:has(.mobile-home-wrap) .mobile-home-wrap { display: flex; flex-direction: column; }
  #app.mh-show-hero .hero-wrap { display: flex; flex: 1; overflow-y: auto; min-height: 0; }
  #app.mh-show-hero .mobile-home-wrap { display: none; }
  #app:has(.mobile-home-wrap) {
    display: flex; flex-direction: column;
    height: var(--app-vh, 100svh);
  }
  #app:has(.mobile-home-wrap) header { flex-shrink: 0; }

  .mobile-home-wrap { flex: 1; min-height: 0; overflow: hidden; }
  .mh-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; flex-shrink: 0;
  }
  .mh-greeting { font-size: 22px; font-weight: 700; letter-spacing: 0; }
  .mh-greeting-sub { font-size: 13px; color: var(--vc-text-2); margin-top: 2px; }
  .mh-header-actions { display: flex; align-items: center; gap: 8px; }
  .mh-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 0 16px calc(72px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .vc-sec-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--vc-muted);
    margin: 20px 0 10px;
  }
  .vc-sec-label .more { font-size: 11px; color: var(--vc-blue-2); font-weight: 600; }
  .mh-hero-card {
    background: var(--vc-surface);
    border: 1px solid var(--vc-line-2);
    border-radius: var(--vc-r-3); padding: 16px; overflow: hidden; margin-top: 4px;
  }
  .mh-hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
  .mh-live-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--vc-text-2); font-weight: 700;
  }
  .mh-live-label::before {
    content: ''; width: 6px; height: 6px; border-radius: var(--vc-r-pill);
    background: var(--vc-green);
  }
  .mh-status-big { font-size: 26px; font-weight: 700; letter-spacing: 0; margin-top: 4px; line-height: 1; }
  .mh-status-sub { font-size: 13px; color: var(--vc-text-2); margin-top: 6px; }
  .mh-status-mark {
    width: 44px; height: 44px; border-radius: var(--vc-r-3); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--vc-blue-10);
    border: 1px solid var(--vc-blue-20);
    color: var(--vc-blue-2);
  }
  .mh-bars { display: flex; align-items: flex-end; gap: 2px; height: 48px; }
  .mh-bars span { flex: 1; border-radius: 2px 2px 0 0; background: var(--vc-blue-50); transition: height 0.4s ease; }
  .mh-story-rail {
    display: flex; gap: 14px;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 0 8px;
    margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .mh-story-rail::-webkit-scrollbar { display: none; }
  .mh-story-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex-shrink: 0; min-width: 68px; min-height: 82px; background: none; border: none; padding: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mh-story-av {
    width: 62px; height: 62px; border-radius: 50%;
    border: 2px solid var(--vc-blue); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .mh-story-av .avatar { width: 100%; height: 100%; font-size: 20px; }
  .mh-story-av.mh-story-busy { border-color: var(--vc-amber); }
  .mh-story-add { border: 2px dashed var(--vc-green-50); background: var(--vc-green-05); color: var(--vc-green); }
  .mh-story-name { font-size: 11px; color: var(--vc-text-2); max-width: 64px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mh-story-add-label { color: var(--vc-green); }
  .mh-pinned-card {
    background: var(--vc-blue-08); border: 1px solid var(--vc-blue-20);
    border-radius: var(--vc-r-3); padding: 16px; cursor: pointer;
    transition: background var(--vc-fast); -webkit-tap-highlight-color: transparent;
  }
  .mh-pinned-card:hover { background: var(--vc-blue-15); }
  .mh-pinned-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
  .mh-pinned-top .avatar { width: 52px; height: 52px; font-size: 17px; flex-shrink: 0; }
  .mh-pinned-info { flex: 1; min-width: 0; }
  .mh-pinned-name { font-size: 17px; font-weight: 700; letter-spacing: 0; }
  .mh-pinned-meta { font-size: 12px; color: var(--vc-muted); font-family: var(--vc-mono); margin-top: 3px; }
  .mh-pinned-actions { display: flex; gap: 8px; }
  .mh-projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mh-proj-card {
    background: var(--vc-surface); border: 1px solid var(--vc-line-2);
    border-radius: var(--vc-r-3); padding: 14px; text-align: left; cursor: pointer;
    transition: all var(--vc-fast); -webkit-tap-highlight-color: transparent;
  }
  .mh-proj-card:hover { border-color: var(--vc-blue-40); background: var(--vc-blue-10); }
  .mh-proj-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--vc-blue-10); color: var(--vc-blue-2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; margin-bottom: 10px;
  }
  .mh-proj-name { font-weight: 600; font-size: 14px; letter-spacing: 0; margin-bottom: 8px; color: var(--vc-text); }
  .mh-proj-bars { display: flex; gap: 3px; }
  .mh-proj-bars span { flex: 1; height: 3px; border-radius: 2px; }
}

/* 보비 (2026-05-23): test-arti 모니터링 시스템 keyframe + 컴포넌트 */
@keyframes cv-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--vc-amber); }
  50% { box-shadow: 0 0 0 4px var(--vc-amber); }
}
@keyframes skeleton-fade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
.vc-busy-dot-loader {
  display: inline-flex; align-items: center; gap: 4px;
}
.vc-busy-dot-loader::before,
.vc-busy-dot-loader::after,
.vc-busy-dot-loader span {
  content: '';
  width: 6px; height: 6px;
  background-color: var(--vc-amber);
  border-radius: 50%;
  animation: vc-dot-bounce 1.4s infinite ease-in-out both;
}
.vc-busy-dot-loader::before { animation-delay: -0.32s; }
.vc-busy-dot-loader span { animation-delay: -0.16s; }
@keyframes vc-dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

/* 미디어 lightbox 액션 — danger 버튼 (삭제) */
.media-lightbox-actions .btn[data-tone="danger"] {
  color: var(--vc-red-2);
  border-color: var(--vc-red-30);
}
.media-lightbox-actions .btn[data-tone="danger"]:hover {
  background: var(--vc-red-10);
}

/* Media grid card — hover 시 우상단 X 삭제 버튼 노출 */
.media-item-wrap {
  position: relative;
  display: block;
}
.media-item-wrap .media-item { width: 100%; height: 100%; }
.media-item-delete {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--vc-black-60);
  color: var(--vc-text);
  border: 1px solid var(--vc-line-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--vc-fast), background var(--vc-fast);
  z-index: 2;
}
.media-item-wrap:hover .media-item-delete,
.media-item-delete:focus-visible {
  opacity: 1;
}
.media-item-delete:hover {
  background: var(--vc-red);
  border-color: var(--vc-red);
  color: var(--vc-on-accent);
}
.media-item-delete:focus-visible {
  outline: 2px solid var(--vc-blue);
  outline-offset: 2px;
}
/* 모바일: 터치 디바이스에서는 항상 보이게 */
@media (hover: none) {
  .media-item-delete {
    width: 44px;
    height: 44px;
    opacity: 0.9;
  }
}

/* === 모델 현황판 (리안 원안 + 로컬 리소스·바비 2026-05-29) === */
.ms-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin: 2px 3px 2px 0;
  border-radius: var(--vc-r-1);
  background: var(--vc-white-06); border: 1px solid var(--vc-line-2);
  font-size: var(--vc-fs-xs); color: var(--vc-text);
}
.ms-chip b { font-variant-numeric: tabular-nums; }
.ms-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--vc-s-3);
  margin-bottom: var(--vc-s-3);
}
.ms-sum-block { min-width: 0; }
.ms-sum-label { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 600; }
.ms-local {
  background: var(--vc-surface-2); border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-2); padding: var(--vc-s-3); margin-bottom: var(--vc-s-3);
}
.ms-local-head { font-weight: 700; font-size: var(--vc-fs-sm); margin-bottom: var(--vc-s-2); }
.ms-local-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--vc-s-3); }
.ms-ram-bar {
  width: 100%; height: 8px; border-radius: 999px;
  background: var(--vc-white-06); overflow: hidden; margin-top: 4px;
}
.ms-ram-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.ms-running { margin-top: 4px; }
.ms-run-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: var(--vc-fs-sm);
  border-bottom: 1px solid var(--vc-line);
}
.ms-run-row:last-child { border-bottom: none; }
.ms-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.ms-dot.busy { background: var(--vc-green-2); box-shadow: 0 0 0 3px var(--vc-green-15); }
.ms-dot.idle { background: var(--vc-muted); }
.ms-dot.stale { background: var(--vc-amber); box-shadow: 0 0 0 3px var(--vc-amber-15); }

/* 리디자인: 디자인 토큰 기반 상태 칩 배지 */
.ms-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ms-status-badge .ms-dot {
  width: 6px;
  height: 6px;
}
.ms-status-badge.status-running {
  background: var(--vc-green-10);
  color: var(--vc-green-2);
  border: 1px solid var(--vc-green-15);
}
.ms-status-badge.status-running .ms-dot {
  background: var(--vc-green-2);
  box-shadow: 0 0 5px var(--vc-green-2);
}
.ms-status-badge.status-idle {
  background: var(--vc-white-04);
  color: var(--vc-muted);
  border: 1px solid var(--vc-line);
}
.ms-status-badge.status-idle .ms-dot {
  background: var(--vc-muted);
}
.ms-status-badge.status-stale {
  background: var(--vc-amber-10);
  color: var(--vc-amber);
  border: 1px solid var(--vc-amber-15);
}
.ms-status-badge.status-stale .ms-dot {
  background: var(--vc-amber);
  box-shadow: 0 0 5px var(--vc-amber);
}
.ms-table-wrap { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: var(--vc-fs-sm); }
.ms-table thead tr { background: var(--vc-surface-2); text-align: left; }
.ms-table th {
  padding: var(--vc-s-2) var(--vc-s-3); font-size: var(--vc-fs-xs);
  font-weight: 600; color: var(--vc-muted); text-transform: uppercase; letter-spacing: 0.03em;
}
.ms-table td { padding: var(--vc-s-2) var(--vc-s-3); border-bottom: 1px solid var(--vc-line); color: var(--vc-text); vertical-align: top; }
.ms-table tbody tr:last-child td { border-bottom: none; }
.ms-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-top: 1px; }
.ms-muted { color: var(--vc-muted); }
.ms-mono { font-family: var(--vc-mono); }
.ms-tier {
  display: inline-block; padding: 1px 7px; border-radius: var(--vc-r-pill);
  font-size: 10px; font-weight: 600;
  background: var(--vc-white-06); color: var(--vc-muted);
}
.ms-tier-meta { background: var(--vc-blue-15); color: var(--vc-blue-2); }
.ms-tier-admin { background: var(--vc-amber-15); color: var(--vc-amber); }
@media (max-width: 640px) {
  .ms-summary, .ms-local-grid { grid-template-columns: 1fr; }
}

/* === 통합 현황 모달 탭 (바비 2026-05-29) === */
.ms-tabs { display: inline-flex; gap: 4px; }
.ms-tab {
  padding: 4px 12px; border-radius: var(--vc-r-1);
  border: 1px solid var(--vc-line-2); background: transparent;
  color: var(--vc-muted); font-size: var(--vc-fs-sm); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ms-tab:hover { background: var(--vc-blue-10); color: var(--vc-blue-2); }
.ms-tab.active { background: var(--vc-blue-15); color: var(--vc-blue-2); border-color: var(--vc-blue-30); font-weight: 700; }

/* === 사용량·비용 탭 재설계 (runner 카드 + accordion·바비 2026-06-22) ===
   리비 P2 reject(#1173) 대응: inline arbitrary px 를 전부 토큰/클래스로 이관.
   font-size 는 --vc-fs-* 토큰, spacing 은 --vc-s-*, radius 는 --vc-r-*, 터치 44px 는 --vc-touch.
   신규 input 은 모바일 zoom 회귀 방지로 16px(--vc-fs-lg) 이상. */
.usage-note {
  display: flex; gap: var(--vc-s-2); align-items: center; flex-wrap: wrap;
  padding: var(--vc-s-2) var(--vc-s-3); background: var(--vc-white-025);
  border: 1px solid var(--vc-line); border-radius: var(--vc-r-2);
  margin-bottom: var(--vc-s-2); font-size: var(--vc-fs-sm); color: var(--vc-muted);
}
.usage-btn-sm { min-height: var(--vc-touch); padding: 0 var(--vc-s-3); font-size: var(--vc-fs-sm); }
.usage-btn-xs { min-height: var(--vc-touch); padding: 0 var(--vc-s-3); font-size: var(--vc-fs-xs); }
.usage-poll-box {
  padding: var(--vc-s-2) var(--vc-s-3); background: var(--vc-blue-10);
  border: 1px solid var(--vc-blue-30); border-radius: var(--vc-r-2); margin-bottom: var(--vc-s-2);
}
.usage-poll-head {
  display: flex; align-items: center; gap: var(--vc-s-2);
  flex-wrap: wrap; margin-bottom: var(--vc-s-1);
}
.usage-poll-title { font-size: var(--vc-fs-sm); font-weight: 600; }
.usage-muted-xs { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.usage-muted-2xs { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.usage-key-row { margin-top: var(--vc-s-2); display: flex; gap: var(--vc-s-2); align-items: center; flex-wrap: wrap; }
.usage-input {
  min-height: var(--vc-touch); padding: 0 var(--vc-s-3);
  background: var(--vc-input); border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-1); color: var(--vc-text);
  font-size: var(--vc-fs-lg);  /* 모바일 input zoom 회귀 방지: 16px 이상 */
}
.usage-input-key { flex: 1; min-width: var(--usage-w-input); font-family: var(--vc-mono); }
.usage-summary-bar {
  display: flex; gap: var(--vc-s-2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--vc-s-3); font-size: var(--vc-fs-sm);
}
.usage-pill {
  padding: var(--vc-s-1) var(--vc-s-3); background: var(--vc-white-03);
  border: 1px solid var(--vc-line); border-radius: var(--vc-r-pill);
}
.usage-controls {
  display: flex; gap: var(--vc-s-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--vc-s-3);
}
.usage-filter-chips { display: flex; gap: var(--vc-s-1); flex-wrap: wrap; }
.usage-filter-btn {
  min-height: var(--vc-touch); padding: 0 var(--vc-s-3);
  font-size: var(--vc-fs-xs); border-radius: var(--vc-r-pill);
}
.usage-filter-btn.active { background: var(--vc-blue-30); border-color: var(--vc-blue-2); color: var(--vc-text); }
.usage-search {
  margin-left: auto; min-width: var(--usage-w-search);
  min-height: var(--vc-touch); padding: 0 var(--vc-s-3);
  background: var(--vc-input); border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-1); color: var(--vc-text);
  font-size: var(--vc-fs-lg);  /* 모바일 input zoom 회귀 방지 */
}
.usage-zero-toggle {
  display: flex; align-items: center; gap: var(--vc-s-1);
  font-size: var(--vc-fs-xs); color: var(--vc-muted); cursor: pointer;
}
.usage-card {
  background: var(--vc-white-025); border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-3); margin-bottom: var(--vc-s-2); overflow: hidden;
}
.usage-card-head {
  width: 100%; display: flex; align-items: center; gap: var(--vc-s-2);
  padding: var(--vc-s-3); min-height: var(--vc-touch);
  background: none; border: none; color: var(--vc-text); cursor: pointer; text-align: left;
}
.usage-runner-dot { width: var(--vc-s-3); height: var(--vc-s-3); border-radius: 50%; flex-shrink: 0; }
.usage-runner-label { font-weight: 700; }
.usage-billing-tag {
  font-size: var(--vc-fs-xs); padding: 0 var(--vc-s-1);
  border: 1px solid currentColor; border-radius: var(--vc-r-pill);
}
.usage-card-cost { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; min-width: var(--usage-w-cost); }
.usage-cost-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.usage-card-quota { min-width: var(--usage-w-cost); max-width: var(--usage-w-quota); }
.usage-chevron { color: var(--vc-muted); transition: transform var(--vc-fast); }
.usage-row {
  display: flex; align-items: center; gap: var(--vc-s-2);
  padding: var(--vc-s-2) var(--vc-s-3); border-top: 1px solid var(--vc-line); font-size: var(--vc-fs-sm);
}
.usage-row-dot { width: var(--vc-s-2); height: var(--vc-s-2); min-width: var(--vc-s-2); border-radius: 50%; }
.usage-row-name { color: var(--vc-text); font-weight: 700; }
.usage-row-meta { color: var(--vc-muted); font-size: var(--vc-fs-xs); }
.usage-row-meta.mono { font-family: var(--vc-mono); }
.usage-row-cost { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.usage-row-empty {
  padding: var(--vc-s-3); border-top: 1px solid var(--vc-line);
  font-size: var(--vc-fs-xs); color: var(--vc-muted);
}
.usage-bar { height: var(--vc-s-1); background: var(--vc-white-08); border-radius: var(--vc-r-pill); overflow: hidden; margin-top: var(--vc-s-1); }
.usage-bar-fill { height: 100%; }
.usage-gauge-head { display: flex; align-items: center; gap: var(--vc-s-1); font-size: var(--vc-fs-xs); }
.usage-gauge-num { margin-left: auto; font-weight: 700; }
.usage-cell {
  flex: 1; min-width: var(--usage-w-cell); padding: var(--vc-s-2) var(--vc-s-3);
  background: var(--vc-white-03); border: 1px solid var(--vc-line); border-radius: var(--vc-r-2);
}
.usage-cell-head { display: flex; align-items: center; gap: var(--vc-s-1); }
.usage-cell-label { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.usage-cell-num { margin-left: auto; font-weight: 700; font-size: var(--vc-fs-sm); }
.usage-mini {
  flex: 1; min-width: var(--usage-w-mini); padding: var(--vc-s-1) var(--vc-s-2);
  background: var(--vc-white-025); border: 1px solid var(--vc-line); border-radius: var(--vc-r-2);
}
.usage-mini-head { display: flex; gap: var(--vc-s-1); align-items: center; }
.usage-mini-label { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.usage-mini-num { margin-left: auto; font-weight: 600; font-size: var(--vc-fs-sm); }
.usage-flex-wrap { display: flex; gap: var(--vc-s-2); flex-wrap: wrap; }
.usage-flex-wrap.mt { margin-top: var(--vc-s-2); }
.usage-loading { text-align: center; padding: var(--vc-s-8); color: var(--vc-muted); }
.usage-empty { text-align: center; padding: var(--vc-s-8); color: var(--vc-muted); }
.usage-foot { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-top: var(--vc-s-2); }
/* runner 카드 레이아웃용 고정 폭(토큰 외 layout 치수는 CSS 변수로 한 곳에 모음) */
:root {
  --usage-w-input: 200px;
  --usage-w-search: 140px;
  --usage-w-cell: 140px;
  --usage-w-mini: 90px;
  --usage-w-cost: 120px;
  --usage-w-quota: 160px;
}

/* ═══ 운영자 홈 (데스크탑 초기화면) — 온보딩 hero 대체. 모바일(.mobile-home-wrap)은 유지·hero-wrap 숨김 규칙 그대로. (보비 2026-06-11) ═══ */
.oh-host { display: flex; justify-content: center; align-items: flex-start; }
.oh-wrap { width: 100%; max-width: 1040px; }
.oh-head { margin-bottom: 22px; }
.oh-greet { font-size: 30px; font-weight: 700; color: var(--vc-text); letter-spacing: -0.01em; }
.oh-greet-sub { font-size: var(--vc-fs-md); color: var(--vc-text-2); margin-top: 6px; }

.oh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.oh-stat { background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); padding: 16px 18px; }
.oh-stat-n { font-size: 26px; font-weight: 700; color: var(--vc-text); line-height: 1.15; }
.oh-stat-l { font-size: 12px; color: var(--vc-text-2); margin-top: 4px; }

.oh-entries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.oh-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--vc-surface); border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3); padding: 18px;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.oh-card:hover { border-color: var(--vc-purple-30); transform: translateY(-1px); }
.oh-card.feat { border-color: var(--vc-purple-30); border-width: 2px; padding: 17px; }
.oh-card-ic { color: var(--vc-text-2); margin-bottom: 6px; display: flex; }
.oh-card.feat .oh-card-ic { color: var(--vc-purple); }
.oh-card-t { font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.oh-card-s { font-size: 12px; color: var(--vc-text-2); }
.oh-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 700; color: var(--vc-purple);
  background: var(--vc-purple-12); border-radius: 999px; padding: 3px 8px;
}

.oh-sec {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--vc-text-2); margin: 22px 0 11px;
}
.oh-sec-more { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--vc-purple); cursor: pointer; }
.oh-sec-more:hover { text-decoration: underline; }

.oh-story-rail { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.oh-story-rail::-webkit-scrollbar { display: none; }
.oh-story { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: none; flex-shrink: 0; width: 64px; padding: 0; }
.oh-story-av { position: relative; display: inline-flex; }
.oh-story-av.busy::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--vc-green); border: 2px solid var(--vc-surface);
}
.oh-story-name { font-size: 11px; color: var(--vc-text-2); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oh-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); padding: 12px 14px; }
.oh-bars span { flex: 1; border-radius: 2px 2px 0 0; background: var(--vc-blue-50); transition: height 0.4s ease; min-height: 2px; }

/* 운영 중 프로젝트 — 바로가기(oh-jt)와 동일 사이즈 카드 그리드.
   oh-pj-bg = 후속 프로젝트별 배경 이미지(대장 얼굴 등) 슬롯 — style 로 주입 시 표시. */
.oh-projs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.oh-pj { position: relative; overflow: hidden; }
.oh-pj-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.16; pointer-events: none; }
.oh-pj-glyph { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--vc-purple-12); color: var(--vc-purple); font-size: var(--vc-fs-sm); font-weight: 700; }
.oh-empty { color: var(--vc-muted); font-size: 13px; }

/* 빠른 진입 2열 (비비·크루) */
.oh-entries-2 { grid-template-columns: 1.4fr 1fr; }

/* 도구·뷰 — 코드/기억 그래프 큰 카드 + 라운지·PR·대표님공간 칩 (보비 2026-06-11 기능 허브) */
.oh-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 10px; }
.oh-tool { display: flex; align-items: flex-start; gap: 14px; text-align: left; cursor: pointer; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); padding: 18px; transition: border-color 0.15s ease, transform 0.1s ease; }
.oh-tool:hover { border-color: var(--vc-purple-30); transform: translateY(-1px); }
.oh-tool.feat .oh-tool-ic { color: var(--vc-purple); }
.oh-tool-ic { color: var(--vc-text-2); flex-shrink: 0; display: flex; margin-top: 2px; }
.oh-tool-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oh-tool-t { font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.oh-tool-s { font-size: 12px; color: var(--vc-text-2); line-height: 1.45; }

.oh-tools-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.oh-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: 999px; padding: 8px 14px; color: var(--vc-text); font-size: 13px; transition: border-color 0.15s ease; }
.oh-chip:hover { border-color: var(--vc-purple-30); }
.oh-chip svg { color: var(--vc-text-2); flex-shrink: 0; }

.oh-sec-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--vc-muted); font-size: 11px; }

/* 운영자 홈 v2 — 관제판 구조 (보비 2026-06-12): 런처→관제. 결정 대기·라이브가 상단, 도구는 하단 */
.oh-statline { font-size: var(--vc-fs-md); color: var(--vc-text-2); margin-top: 7px; }
.oh-statline b { color: var(--vc-text); font-weight: 600; }
.oh-sec-label { font-size: var(--vc-fs-xs); color: var(--vc-muted); letter-spacing: 0.05em; margin: 20px 2px 8px; display: flex; align-items: center; gap: 12px; }
.oh-sec-label .oh-sec-more { margin-left: auto; }
.oh-sec-label .oh-sec-more + .oh-sec-more { margin-left: 14px; }

.oh-decide { background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); padding: var(--vc-s-1) calc(var(--vc-s-5) - (var(--vc-s-1) / 2)) var(--vc-s-2); }
.oh-decide-head { display: flex; align-items: center; gap: 9px; padding: 13px 0 7px; }
.oh-dh-ic { color: var(--vc-amber); display: flex; }
.oh-dh-t { font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.oh-dh-badge { margin-left: auto; font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-amber); background: var(--vc-amber-15); padding: 3px 11px; border-radius: var(--vc-r-2); }
.oh-drow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 0; background: none; border: none; border-top: 1px solid var(--vc-line); cursor: pointer; text-align: left; color: var(--vc-text); }
.oh-drow:hover { color: var(--vc-purple); }
.oh-drow-ic { color: var(--vc-text-2); display: flex; flex-shrink: 0; }
.oh-drow:hover .oh-drow-ic { color: var(--vc-purple); }
.oh-drow-t { flex: 1; font-size: var(--vc-fs-md); }
.oh-drow-n { font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text-2); }
.oh-drow-go { color: var(--vc-muted); display: flex; }

.hitl-sheet { width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 48px)); overflow: hidden; display: flex; flex-direction: column; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); box-shadow: var(--vc-shadow-2); }
.hitl-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vc-s-4); padding: var(--vc-s-5); border-bottom: 1px solid var(--vc-line); }
.hitl-sheet-head h2 { margin: 0; font-size: var(--vc-fs-xl); color: var(--vc-text); }
.hitl-sheet-head p { margin: 6px 0 0; font-size: var(--vc-fs-sm); color: var(--vc-text-2); }
.hitl-close { border: 1px solid var(--vc-line-2); background: var(--vc-surface-2); color: var(--vc-text); border-radius: var(--vc-r-2); min-height: var(--vc-touch); padding: 0 14px; cursor: pointer; }
.hitl-list { overflow: auto; padding: var(--vc-s-4); display: flex; flex-direction: column; gap: var(--vc-s-3); }
.hitl-card { border: 1px solid var(--vc-line-2); border-left: 3px solid var(--vc-amber); border-radius: var(--vc-r-3); padding: var(--vc-s-4); background: var(--vc-surface-2); }
.hitl-card.status-escalated { border-left-color: var(--vc-red); }
.hitl-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hitl-status, .hitl-urgency { font-size: var(--vc-fs-xs); color: var(--vc-amber); border: 1px solid var(--vc-amber-30); border-radius: var(--vc-r-pill); padding: 3px 9px; }
.hitl-worker { font-size: var(--vc-fs-sm); color: var(--vc-text-2); margin-left: auto; }
.hitl-action { font-size: var(--vc-fs-md); color: var(--vc-text); line-height: 1.45; word-break: break-word; }
.hitl-reason { margin-top: 8px; font-size: var(--vc-fs-sm); color: var(--vc-text-2); line-height: 1.45; }
.hitl-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--vc-s-4); }
.hitl-approve, .hitl-reject { min-height: var(--vc-touch); border-radius: var(--vc-r-2); padding: 0 14px; cursor: pointer; }
.hitl-approve { border: 1px solid var(--vc-green-15); background: var(--vc-green-10); color: var(--vc-green-2); }
.hitl-reject { border: 1px solid var(--vc-red-18); background: var(--vc-red-10); color: var(--vc-red-2); }
.hitl-empty { color: var(--vc-text-2); border: 1px dashed var(--vc-line-2); border-radius: var(--vc-r-3); padding: var(--vc-s-5); text-align: center; }

.oh-now { background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); padding: calc(var(--vc-s-4) - (var(--vc-s-1) / 2)) calc(var(--vc-s-5) - (var(--vc-s-1) / 2)); margin-top: var(--vc-s-3); }
.oh-now-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.oh-nh-ic { color: var(--vc-green); display: flex; }
.oh-nh-t { font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.oh-nh-s { font-size: var(--vc-fs-sm); color: var(--vc-muted); }
.oh-now-live { display: flex; flex-wrap: wrap; gap: 8px; }
.oh-now-w { font-size: var(--vc-fs-sm); color: var(--vc-text); background: var(--vc-surface-2); border: 1px solid var(--vc-green-2); border-radius: var(--vc-r-pill); padding: 4px 13px; }
.oh-now-idle { font-size: var(--vc-fs-sm); color: var(--vc-text-2); margin-bottom: 11px; }
.oh-now-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vc-s-1); padding: var(--vc-s-1); margin: 0 0 var(--vc-s-3); background: var(--vc-black-20); border: 1px solid var(--vc-line); border-radius: var(--vc-r-2); }
.oh-now-tab { min-height: var(--vc-touch); border: 0; border-radius: var(--vc-r-1); background: transparent; color: var(--vc-text-2); font-size: var(--vc-fs-xs); font-weight: 700; cursor: pointer; }
.oh-now-tab.active { background: var(--vc-surface-2); color: var(--vc-text); box-shadow: var(--vc-elev-1); }
.oh-now-pane { display: none; min-height: calc(var(--vc-touch) * 4); }
.oh-now-pane.active { display: block; }
.oh-evs { display: flex; flex-direction: column; }
.oh-evs:not(:first-child) { margin-top: 10px; border-top: 1px solid var(--vc-line); padding-top: 8px; }
.oh-ev { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: var(--vc-fs-sm); min-width: 0; }
.oh-ev-when { color: var(--vc-muted); min-width: 54px; flex-shrink: 0; }
.oh-ev-w { color: var(--vc-text); font-weight: 600; flex-shrink: 0; }
.oh-ev-b { color: var(--vc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.oh-crew { background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); padding: 14px 18px; }
.oh-crew-stat { display: flex; gap: 18px; font-size: var(--vc-fs-sm); color: var(--vc-text-2); margin-bottom: 13px; }
.oh-cs { display: inline-flex; align-items: center; gap: 6px; }
.oh-cs::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--vc-muted); }
.oh-cs.on { color: var(--vc-green); }
.oh-cs.on::before { background: var(--vc-green); }
/* 크루 아바타 — 얼굴 알아보게 크게 + 이름 라벨 (대표님 2026-06-13 '얼굴 못 알아봐') */
.oh-cdots { display: flex; gap: 14px; flex-wrap: wrap; }
.oh-cdot { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; background: none; border: none; padding: 4px 0; cursor: pointer; opacity: 0.78; position: relative; transition: opacity 0.15s ease, transform 0.1s ease; }
.oh-cdot:hover, .oh-cdot.on { opacity: 1; }
.oh-cdot:hover { transform: translateY(-1px); }
.oh-cdot.on::after { content: ''; position: absolute; right: 7px; top: 40px; width: 11px; height: 11px; border-radius: 50%; background: var(--vc-green); border: 2px solid var(--vc-surface); }
.oh-cdot-name { font-size: var(--vc-fs-xs); color: var(--vc-text-2); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oh-cdot.on .oh-cdot-name { color: var(--vc-green); }
.avatar.state-busy { box-shadow: 0 0 0 2px var(--vc-amber); animation: cv-ring-pulse 1.4s infinite; }
.oh-cdot:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 2px; border-radius: var(--vc-r-2); }

.oh-jump { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.oh-jt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 15px 8px; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); cursor: pointer; color: var(--vc-text-2); transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.oh-jt:hover { border-color: var(--vc-purple-30); color: var(--vc-purple); transform: translateY(-1px); }
.oh-jt span { font-size: var(--vc-fs-sm); color: var(--vc-text); }

@media (max-width: 1024px) {
  .oh-stats, .oh-entries { grid-template-columns: repeat(2, 1fr); }
  .oh-entries-2, .oh-tools { grid-template-columns: 1fr; }
  .oh-jump, .oh-projs { grid-template-columns: repeat(2, 1fr); }
}


/* 운영자 홈 관제 정렬 안정화 — 대표님 줄맞춤 기준 2026-06-16 */
.oh-wrap { max-width: 1180px; }
.oh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "decision now"
    "projects now"
    "system   crew"
    "boards   crew"
    "trend    crew";
  gap: 14px 18px;
  align-items: stretch;
}
.oh-decision-block { grid-area: decision; min-width: 0; }
.oh-project-section { grid-area: projects; min-width: 0; }
.oh-group-system { grid-area: system; min-width: 0; }
.oh-group-boards { grid-area: boards; min-width: 0; }
.oh-group-trend { grid-area: trend; min-width: 0; }
.oh-side-now { grid-area: now; min-width: 0; display: flex; }
.oh-side-crew { grid-area: crew; min-width: 0; display: flex; flex-direction: column; }
.oh-grid .oh-sec-label { margin: 0 2px 8px; }
.oh-project-section .oh-sec-label,
.oh-jump-group .oh-sec-label,
.oh-side-crew .oh-sec-label { height: 18px; }
.oh-side-now .oh-now {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 0;
  min-height: calc(var(--vc-touch) * 5 + var(--vc-s-7) - var(--vc-s-1));
  overflow: hidden;
  width: 100%;
}
.oh-side-crew .oh-crew { flex: 1; min-height: 0; box-sizing: border-box; }
.oh-decision-empty { padding: 12px 0 14px; border-top: 1px solid var(--vc-line); color: var(--vc-text-2); font-size: var(--vc-fs-sm); }
.oh-health {
  margin-top: var(--vc-s-3);
  background: var(--vc-surface);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-4);
  padding: var(--vc-s-4);
}
.oh-health-head {
  display: flex;
  align-items: flex-start;
  gap: var(--vc-s-3);
  justify-content: space-between;
  margin-bottom: var(--vc-s-3);
}
.oh-health-actions {
  display: flex;
  align-items: center;
  gap: var(--vc-s-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.oh-health-title {
  color: var(--vc-text);
  font-size: var(--vc-fs-lg);
  font-weight: 700;
}
.oh-health-sub {
  color: var(--vc-muted);
  font-size: var(--vc-fs-xs);
  margin-top: var(--vc-s-1);
}
.oh-health-link {
  min-height: var(--vc-touch);
  padding: 0 var(--vc-s-3);
  border-radius: var(--vc-r-2);
  border: 1px solid var(--vc-line-2);
  background: var(--vc-white-04);
  color: var(--vc-text-2);
  font-size: var(--vc-fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.oh-health-link:hover {
  border-color: var(--vc-blue-30);
  background: var(--vc-blue-10);
  color: var(--vc-text);
}
.oh-health-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vc-s-2);
  margin-bottom: var(--vc-s-3);
}
.oh-health-kpi {
  min-width: 0;
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  padding: var(--vc-s-2) var(--vc-s-3);
  background: var(--vc-white-04);
}
.oh-health-n {
  display: block;
  color: var(--vc-text);
  font-size: var(--vc-fs-xl);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.oh-health-l {
  display: block;
  margin-top: var(--vc-s-1);
  color: currentColor;
  font-size: var(--vc-fs-xs);
  font-weight: 700;
}
.oh-health-issue-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vc-s-2);
  margin: calc(-1 * var(--vc-s-1)) 0 var(--vc-s-3);
  color: var(--vc-muted);
  font-size: var(--vc-fs-xs);
}
.oh-health-issue-strip span {
  min-width: 0;
  padding: var(--vc-s-1) var(--vc-s-2);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-2);
  background: var(--vc-white-025);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.oh-health-list {
  display: flex;
  flex-direction: column;
  gap: var(--vc-s-2);
}
.oh-health-row {
  width: 100%;
  min-height: var(--vc-touch);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--vc-s-2);
  align-items: center;
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  padding: var(--vc-s-2) var(--vc-s-3);
  text-align: left;
  cursor: pointer;
}
.oh-health-row:hover {
  border-color: var(--vc-blue-30);
}
.oh-health-row .op-status-dot {
  grid-row: span 2;
}
.oh-health-name {
  color: var(--vc-text);
  font-size: var(--vc-fs-sm);
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oh-health-project,
.oh-health-reason {
  color: var(--vc-muted);
  font-size: var(--vc-fs-xs);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oh-health-label {
  color: currentColor;
  font-size: var(--vc-fs-xs);
  font-weight: 800;
  white-space: nowrap;
}
.oh-health-reason {
  grid-column: 2 / -1;
}
.oh-health-empty {
  color: var(--vc-text-2);
  font-size: var(--vc-fs-sm);
  padding: var(--vc-s-3) 0;
}
.care-sheet {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: flex;
  justify-content: flex-end;
  background: var(--vc-black-40, rgba(0, 0, 0, 0.4));
}
.care-panel {
  width: min(520px, 100vw);
  height: 100%;
  background: var(--vc-bg);
  border-left: 1px solid var(--vc-line-2);
  box-shadow: var(--vc-shadow-3);
  display: flex;
  flex-direction: column;
}
.care-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vc-s-3);
  padding: var(--vc-s-4);
  border-bottom: 1px solid var(--vc-line-2);
}
.care-title {
  color: var(--vc-text);
  font-size: var(--vc-fs-lg);
  font-weight: 800;
}
.care-sub {
  margin-top: var(--vc-s-1);
  color: var(--vc-muted);
  font-size: var(--vc-fs-xs);
}
.care-close {
  border: 1px solid var(--vc-line-2);
  background: var(--vc-white-04);
  color: var(--vc-text-2);
  border-radius: var(--vc-r-2);
  min-width: var(--vc-touch);
  min-height: var(--vc-touch);
  cursor: pointer;
  font-size: var(--vc-fs-lg);
}
.care-list {
  padding: var(--vc-s-4);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--vc-s-2);
}
.care-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--vc-s-1) var(--vc-s-2);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  padding: var(--vc-s-3);
  background: var(--vc-surface);
}
.care-row-type {
  grid-row: span 2;
  align-self: flex-start;
  color: var(--vc-amber);
  background: var(--vc-amber-10);
  border: 1px solid var(--vc-amber-30);
  border-radius: var(--vc-r-pill);
  padding: 2px 7px;
  font-size: var(--vc-fs-xs);
  font-weight: 800;
}
.care-row-worker {
  color: var(--vc-text);
  font-size: var(--vc-fs-sm);
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.care-row-message {
  color: var(--vc-text-2);
  font-size: var(--vc-fs-xs);
  line-height: 1.45;
}
.care-empty {
  color: var(--vc-text-2);
  text-align: center;
  border: 1px dashed var(--vc-line-2);
  border-radius: var(--vc-r-3);
  padding: var(--vc-s-5);
}
.oh-projs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.oh-pj { min-height: 52px; padding: 9px 12px; flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; }
.oh-pj .oh-pj-glyph { flex: 0 0 auto; }
.oh-pj-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--vc-fs-sm); font-weight: 600; }
.oh-pj-on { border-color: var(--vc-blue); box-shadow: inset 0 0 0 1px var(--vc-blue-50); background: var(--vc-blue-08); }
.oh-pj-meta { border-color: var(--vc-purple-30); background: var(--vc-purple-10); }
.oh-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.oh-jump .oh-jt { min-height: 74px; justify-content: center; }
.oh-side-crew .oh-cdots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; align-content: start; }
.oh-side-crew .oh-cdot { width: 100%; flex-direction: row; justify-content: flex-start; gap: 9px; padding: 3px 0; text-align: left; }
.oh-side-crew .oh-cdot-name { max-width: 82px; }
.oh-side-crew .oh-cdot.on::after { right: auto; left: 31px; top: 35px; }
.oh-side-now .oh-ev { padding: 7px 0; }
.oh-side-now .oh-ev-b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.oh-side-now .oh-now-pane.active {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
/* V2 업무 원장 미니 관제 — 홈·크루챗 공용 */
.oh-work-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vc-s-3);
  border-top: 1px solid var(--vc-line);
  padding: var(--vc-s-3) 0 var(--vc-s-1);
}
.oh-we-col { min-width: 0; }
.oh-we-label {
  font-size: var(--vc-fs-xs);
  font-weight: 700;
  color: var(--vc-muted);
  margin-bottom: var(--vc-s-2);
}
.we-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.we-row {
  border-top: 1px solid var(--vc-line);
  padding: var(--vc-s-2) 0;
  min-width: 0;
}
.we-row:first-child { border-top: 0; padding-top: 0; }
.we-row-top {
  display: flex;
  align-items: center;
  gap: var(--vc-s-2);
  min-width: 0;
  margin-bottom: var(--vc-s-1);
}
.we-kind {
  flex-shrink: 0;
  border: 1px solid var(--vc-blue-30);
  border-radius: var(--vc-r-2);
  color: var(--vc-blue);
  background: var(--vc-blue-08);
  padding: var(--vc-s-1) var(--vc-s-2);
  font-size: var(--vc-fs-xs);
  font-weight: 700;
}
.we-pending .we-kind,
.we-directive .we-kind {
  border-color: var(--vc-amber-30);
  color: var(--vc-amber);
  background: var(--vc-amber-15);
}
.we-blocked .we-kind,
.we-incident .we-kind {
  border-color: var(--vc-red-30);
  color: var(--vc-red-2);
  background: var(--vc-red-10);
}
.we-ack .we-kind,
.we-review_approved .we-kind,
.we-monitor_ok .we-kind {
  border-color: var(--vc-green-2);
  color: var(--vc-green);
  background: var(--vc-green-10);
}
.we-time {
  margin-left: auto;
  color: var(--vc-muted);
  font-size: var(--vc-fs-xs);
  font-variant-numeric: tabular-nums;
}
.we-title {
  color: var(--vc-text);
  font-size: var(--vc-fs-sm);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.we-route {
  color: var(--vc-muted);
  font-size: var(--vc-fs-xs);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: var(--vc-s-1);
}
.we-empty {
  color: var(--vc-muted);
  font-size: var(--vc-fs-sm);
  padding: var(--vc-s-2) 0;
}
.cv-work-events .we-row { padding: var(--vc-s-2) 0; }
.cv-work-events .we-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-info-count {
  color: var(--vc-amber);
  font-variant-numeric: tabular-nums;
  margin-left: var(--vc-s-2);
}
@media (max-width: 1100px) {
  .oh-grid { grid-template-columns: 1fr; grid-template-areas: "decision" "now" "projects" "system" "boards" "trend" "crew"; }
  .oh-side-now .oh-now { min-height: auto; }
  .oh-projs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oh-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oh-side-crew .oh-cdots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oh-work-events { grid-template-columns: 1fr; }
  .oh-health-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oh-health-issue-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 운영자 홈 관제 정렬 안정화 끝 */


/* ===== 운영자 작업 보드 (보비 2026-06-13·대표님 지시) — 칸반 오버레이 ===== */
.tb-overlay { position: fixed; inset: 0; z-index: 950; background: var(--vc-bg); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.tb-overlay.tb-open { opacity: 1; }
.tb-header { display: flex; align-items: center; gap: 10px; padding: 16px 22px; padding-top: max(16px, env(safe-area-inset-top)); border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.tb-title { display: flex; align-items: center; gap: 9px; font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.tb-title svg { color: var(--vc-purple); }
.tb-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.tb-close { background: none; border: none; color: var(--vc-text-2); cursor: pointer; padding: 4px; border-radius: var(--vc-r-2); min-width: var(--vc-touch); min-height: var(--vc-touch); display: inline-flex; align-items: center; justify-content: center; }
.tb-close:hover { color: var(--vc-text); background: var(--vc-bg-2-40); }
/* 프로젝트 탭 (task-board: 11) */
.tb-tabs { display: flex; align-items: center; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.tb-tabs::-webkit-scrollbar { display: none; }
.tb-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--vc-text-2); cursor: pointer; font-family: inherit; font-size: var(--vc-fs-sm); padding: 9px 12px; margin-bottom: -1px; min-height: var(--vc-touch); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.tb-tab:hover { color: var(--vc-text); }
.tb-tab-active { color: var(--vc-purple); border-bottom-color: var(--vc-purple); font-weight: 600; }
.tb-tab-n { font-size: var(--vc-fs-xs); background: var(--vc-bg-2-40); border-radius: var(--vc-r-pill); padding: 1px 6px; color: var(--vc-muted); font-weight: 400; }
.tb-close:focus-visible, .tb-tab:focus-visible, .tb-add-title:focus-visible, .tb-add-btn:focus-visible, .tb-move:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }

.tb-add { display: flex; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.tb-add-title { flex: 1; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); color: var(--vc-text); font-family: inherit; font-size: var(--vc-fs-md); padding: 9px 13px; }
.tb-add-prio { background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); color: var(--vc-text); font-family: inherit; font-size: var(--vc-fs-sm); padding: 0 10px; cursor: pointer; }
.tb-add-btn { background: var(--vc-purple-12); color: var(--vc-purple); border: 1px solid var(--vc-purple-30); border-radius: var(--vc-r-3); padding: 9px 18px; font-size: var(--vc-fs-sm); font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.tb-add-btn:hover { border-color: var(--vc-purple); }
.tb-op-status { display: none; margin: 10px 22px 0; padding: 8px 10px; border-radius: var(--vc-r-2); border: 1px solid var(--vc-line-2); font-size: var(--vc-fs-sm); color: var(--vc-text-2); background: var(--vc-bg-2-40); }
.tb-op-status.tb-op-show { display: block; }
.tb-op-status.tb-op-error { color: var(--vc-red); background: var(--vc-red-10); border-color: var(--vc-red-18); }
.tb-op-status.tb-op-success { color: var(--vc-green); background: var(--vc-green-10); border-color: var(--vc-green-30); }
.tb-op-status.tb-op-info { color: var(--vc-blue); background: var(--vc-blue-08); border-color: var(--vc-blue-20); }

/* 작업보드 레인: 검토 보관/실행 대기/작업/검토/머지·배포/완료 */
.tb-cols { flex: 1; overflow: hidden; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--vc-s-3); padding: 18px 22px; }
.tb-col { display: flex; flex-direction: column; min-height: 0; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); }
.tb-col-head { padding: 12px 14px; font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text-2); border-bottom: 1px solid var(--vc-line-2); display: flex; align-items: center; gap: 7px; }
.tb-col-n { color: var(--vc-muted); font-weight: 400; }
.tb-col-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.tb-col-empty, .tb-empty { color: var(--vc-muted); font-size: var(--vc-fs-sm); text-align: center; padding: 16px 8px; }

.tb-card { position: relative; background: var(--vc-bg); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.tb-card.p1 { border-left: 3px solid var(--vc-red-2); }
.tb-card.p2 { border-left: 3px solid var(--vc-purple); }
.tb-card-blocked { border-color: var(--vc-red-18); }
.tb-dispatch-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 22px; border-bottom: 1px solid var(--vc-line-2); }
.tb-surface-controls { display: inline-flex; align-items: center; gap: 5px; padding: 2px; border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-pill); background: var(--vc-bg); }
.tb-surface-btn { border: 0; background: transparent; color: var(--vc-text-2); border-radius: var(--vc-r-pill); padding: 4px 9px; font-family: inherit; font-size: var(--vc-fs-xs); font-weight: 800; cursor: pointer; white-space: nowrap; }
.tb-surface-btn:hover { color: var(--vc-text); background: var(--vc-white-04); }
.tb-surface-active { color: var(--vc-green); background: var(--vc-green-10); }
.tb-dispatch-chip { font-size: var(--vc-fs-xs); font-weight: 600; padding: 3px 8px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-2); color: var(--vc-text-2); background: var(--vc-bg-2-40); }
.tb-cleanup-report-btn { border: 1px solid var(--vc-blue-20); background: var(--vc-blue-08); color: var(--vc-blue); border-radius: var(--vc-r-pill); padding: 3px 9px; font-size: var(--vc-fs-xs); font-weight: 800; cursor: pointer; }
.tb-cleanup-report-btn:hover { border-color: var(--vc-blue-30); color: var(--vc-text); }
.tb-cleanup-sheet { position: fixed; inset: 0; z-index: 980; display: flex; justify-content: flex-end; background: var(--vc-black-40, rgba(0, 0, 0, 0.4)); }
.tb-cleanup-panel { width: min(560px, 100vw); height: 100%; background: var(--vc-bg); border-left: 1px solid var(--vc-line-2); box-shadow: var(--vc-shadow-3); display: flex; flex-direction: column; }
.tb-cleanup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vc-s-3); padding: var(--vc-s-4); border-bottom: 1px solid var(--vc-line-2); }
.tb-cleanup-title { color: var(--vc-text); font-size: var(--vc-fs-lg); font-weight: 800; }
.tb-cleanup-sub { margin-top: var(--vc-s-1); color: var(--vc-muted); font-size: var(--vc-fs-xs); }
.tb-cleanup-close { border: 1px solid var(--vc-line-2); background: var(--vc-white-04); color: var(--vc-text-2); border-radius: var(--vc-r-2); min-width: var(--vc-touch); min-height: var(--vc-touch); cursor: pointer; font-size: var(--vc-fs-lg); }
.tb-cleanup-list { padding: var(--vc-s-4); overflow: auto; display: flex; flex-direction: column; gap: var(--vc-s-2); }
.tb-cleanup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vc-s-1) var(--vc-s-3); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); padding: var(--vc-s-3); background: var(--vc-surface); }
.tb-cleanup-label { color: currentColor; font-size: var(--vc-fs-sm); font-weight: 800; }
.tb-cleanup-count { color: var(--vc-text); font-size: var(--vc-fs-lg); font-weight: 900; font-variant-numeric: tabular-nums; }
.tb-cleanup-samples { grid-column: 1 / -1; color: var(--vc-muted); font-size: var(--vc-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-queue-executable { color: var(--vc-green); background: var(--vc-green-10); border-color: var(--vc-green-30); }
.tb-queue-contract_missing,
.tb-queue-migration_needed { color: var(--vc-amber); background: var(--vc-amber-10); border-color: var(--vc-amber-30); }
.tb-queue-blocked { color: var(--vc-red); background: var(--vc-red-10); border-color: var(--vc-red-18); }
.tb-queue-backlog,
.tb-queue-parked,
.tb-queue-legacy,
.tb-queue-inactive,
.tb-queue-other { color: var(--vc-muted); background: var(--vc-white-04); border-color: var(--vc-line-2); }
.tb-automation-status { font-size: var(--vc-fs-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-2); color: var(--vc-text-2); background: var(--vc-bg); }
.tb-automation-ok { color: var(--vc-green); background: var(--vc-green-10); border-color: var(--vc-green-30); }
.tb-automation-warn { color: var(--vc-amber); background: var(--vc-amber-10); border-color: var(--vc-amber-30); }
.tb-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tb-prio { font-size: var(--vc-fs-xs); color: var(--vc-muted); flex-shrink: 0; }
.tb-card-title { font-size: var(--vc-fs-md); color: var(--vc-text); line-height: 1.4; flex-basis: 100%; }
.tb-card-detail { font-size: var(--vc-fs-xs); color: var(--vc-text-2); line-height: 1.5; }
.tb-card-meta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.tb-card-actions { display: flex; justify-content: flex-end; }
.tb-move { background: var(--vc-bg-2-40); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); color: var(--vc-text-2); font-size: var(--vc-fs-xs); padding: 4px 11px; min-height: var(--vc-touch); cursor: pointer; font-family: inherit; }
.tb-move:hover { color: var(--vc-purple); border-color: var(--vc-purple-30); }
.tb-reopen:hover { color: var(--vc-text-2); border-color: var(--vc-line-2); }

/* 세부 상태 badge — lifecycle_state 별 색(디자인 토큰). */
.tb-state-badge { font-size: var(--vc-fs-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-2); color: var(--vc-text-2); flex-shrink: 0; }
.tb-state-b { color: var(--vc-muted); background: var(--vc-white-04); border-color: var(--vc-line-2); }
.tb-state-q { color: var(--vc-muted); background: var(--vc-bg-2-40); border-color: var(--vc-line-2); }
.tb-state-w { color: var(--vc-blue); background: var(--vc-blue-12); border-color: var(--vc-blue-30); }
.tb-state-r { color: var(--vc-amber); background: var(--vc-amber-15); border-color: var(--vc-amber-30); }
.tb-state-m { color: var(--vc-purple); background: var(--vc-purple-12); border-color: var(--vc-purple-30); }
.tb-state-d { color: var(--vc-green); background: var(--vc-green-15); border-color: var(--vc-green-30); }
.tb-dispatch-badge { font-size: var(--vc-fs-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-2); color: var(--vc-text-2); background: var(--vc-bg-2-40); flex-shrink: 0; }
.tb-dispatch-execution_ready { color: var(--vc-green); background: var(--vc-green-10); border-color: var(--vc-green-30); }
.tb-dispatch-contract_missing { color: var(--vc-amber); background: var(--vc-amber-10); border-color: var(--vc-amber-30); }
.tb-dispatch-legacy_or_parked { color: var(--vc-muted); background: var(--vc-white-04); border-color: var(--vc-line-2); }
.tb-dispatch-not_dispatch_candidate { color: var(--vc-blue-2); background: var(--vc-blue-08); border-color: var(--vc-blue-20); }
.tb-queue-badge { font-size: var(--vc-fs-xs); font-weight: 700; padding: 1px 7px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-2); color: var(--vc-text-2); background: var(--vc-bg-2-40); flex-shrink: 0; }
.tb-message-route { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--vc-fs-xs); color: var(--vc-text-2); background: var(--vc-bg-2-40); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); padding: 5px 7px; line-height: 1.35; }
.tb-message-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vc-muted); flex-shrink: 0; }
.tb-message-label { font-weight: 700; white-space: nowrap; }
.tb-message-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vc-muted); }
.tb-message-sent { color: var(--vc-green); background: var(--vc-green-10); border-color: var(--vc-green-30); }
.tb-message-sent .tb-message-dot { background: var(--vc-green); }
.tb-message-ready { color: var(--vc-blue); background: var(--vc-blue-08); border-color: var(--vc-blue-20); }
.tb-message-ready .tb-message-dot { background: var(--vc-blue); }
.tb-message-queued { color: var(--vc-amber); background: var(--vc-amber-10); border-color: var(--vc-amber-30); }
.tb-message-queued .tb-message-dot { background: var(--vc-amber); }
.tb-message-blocked, .tb-message-failed { color: var(--vc-red); background: var(--vc-red-10); border-color: var(--vc-red-18); }
.tb-message-blocked .tb-message-dot, .tb-message-failed .tb-message-dot { background: var(--vc-red); }
.tb-approval { display: flex; align-items: center; gap: 6px; min-width: 0; width: fit-content; max-width: 100%; font-size: var(--vc-fs-xs); font-weight: 700; border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); padding: 4px 7px; line-height: 1.35; }
.tb-approval-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tb-approval-id { color: var(--vc-muted); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-approval-pending { color: var(--vc-amber); background: var(--vc-amber-10); border-color: var(--vc-amber-30); }
.tb-approval-approved { color: var(--vc-green); background: var(--vc-green-10); border-color: var(--vc-green-30); }
.tb-approval-rejected { color: var(--vc-red); background: var(--vc-red-10); border-color: var(--vc-red-18); }

/* stale — 오래 멈춘 상태 표시. */
.tb-stale { font-size: var(--vc-fs-xs); color: var(--vc-amber); background: var(--vc-amber-10); border: 1px solid var(--vc-amber-20); border-radius: var(--vc-r-pill); padding: 1px 7px; flex-shrink: 0; }

/* blocked overlay — 막힘(blocker_code) 표시. */
.tb-blocked { display: flex; align-items: center; gap: 5px; font-size: var(--vc-fs-xs); font-weight: 600; color: var(--vc-red); background: var(--vc-red-10); border: 1px solid var(--vc-red-18); border-radius: var(--vc-r-2); padding: 4px 8px; line-height: 1.35; }
.tb-blocked svg { flex-shrink: 0; }

/* 실시간 자동 갱신 표시 (task-board: 14) */
.tb-live { font-size: var(--vc-fs-xs); color: var(--vc-green); display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.tb-live::before { content: '●'; animation: tb-live-pulse 2s ease-in-out infinite; }
@keyframes tb-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (max-width: 1024px) {
  /* 모바일: 5레인 가로 스크롤(세로 압축 대신 lane 유지). safe-area inset 반영. */
  .tb-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(78vw, 320px); overflow-x: auto; overflow-y: hidden; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .tb-col { min-height: 0; scroll-snap-align: start; }
}

/* ── 모델 성능 보드 (model_board.js · 대표님 #25 · 보비 UI) ───────────── */
.mb-overlay { position: fixed; inset: 0; z-index: 950; background: var(--vc-bg); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.mb-overlay.mb-open { opacity: 1; }
.mb-header { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.mb-title { display: flex; align-items: center; gap: 9px; font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.mb-title svg { color: var(--vc-blue); }
.mb-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.mb-close { background: none; border: none; color: var(--vc-text-2); cursor: pointer; padding: 4px; border-radius: var(--vc-r-2); }
.mb-close:hover { color: var(--vc-text); background: var(--vc-bg-2-40); }
.mb-close:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }

.mb-summary { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 22px; border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.mb-chip { font-size: var(--vc-fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-2); color: var(--vc-text-2); }
.mb-chip-total { background: var(--vc-surface); color: var(--vc-text); }
.mb-chip-tier { background: var(--vc-surface); }
.mb-chip.g-s { background: var(--vc-amber-10); color: var(--vc-amber); border-color: var(--vc-amber-15); }
.mb-chip.g-a { background: var(--vc-green-10); color: var(--vc-green); border-color: var(--vc-green-15); }
.mb-chip.g-b { background: var(--vc-blue-10); color: var(--vc-blue-2); border-color: var(--vc-blue-15); }
.mb-chip.g-l { background: var(--vc-purple-12); color: var(--vc-purple); border-color: var(--vc-purple-15); }
.mb-chip-meas { background: var(--vc-green-10); color: var(--vc-green-2); border-color: var(--vc-green-15); }

.mb-grid { flex: 1; overflow: auto; padding: 6px 22px 22px; }
.mb-empty { color: var(--vc-muted); font-size: var(--vc-fs-sm); text-align: center; padding: 30px 8px; }

/* 비교 테이블 (카드→리스트 전환, 대표님 2026-06-13 — 16개 한눈 비교·헤더 클릭 정렬) */
.mb-table { width: 100%; border-collapse: collapse; font-size: var(--vc-fs-sm); }
.mb-table thead th { position: sticky; top: 0; z-index: 1; background: var(--vc-bg); text-align: left; padding: 9px 12px; font-size: var(--vc-fs-xs); font-weight: 600; color: var(--vc-muted); border-bottom: 1px solid var(--vc-line-2); white-space: nowrap; }
th.mb-th[onclick] { cursor: pointer; user-select: none; }
th.mb-th[onclick]:hover { color: var(--vc-text-2); }
.mb-th-on { color: var(--vc-text); }
.mb-arrow { font-size: 9px; margin-left: 3px; color: var(--vc-blue-2); }

.mb-row:hover { background: var(--vc-surface); }
.mb-row td { padding: 8px 12px; border-bottom: 1px solid var(--vc-line); color: var(--vc-text-2); vertical-align: middle; }
.mb-td-grade { width: 1%; white-space: nowrap; }
.mb-row.g-s .mb-td-grade { box-shadow: inset 3px 0 0 var(--vc-amber); }
.mb-row.g-a .mb-td-grade { box-shadow: inset 3px 0 0 var(--vc-green); }
.mb-row.g-b .mb-td-grade { box-shadow: inset 3px 0 0 var(--vc-blue); }
.mb-row.g-l .mb-td-grade { box-shadow: inset 3px 0 0 var(--vc-purple); }
.mb-grade { font-size: var(--vc-fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--vc-r-2); background: var(--vc-surface-2); color: var(--vc-text-2); white-space: nowrap; }
.mb-grade.g-s { background: var(--vc-amber-10); color: var(--vc-amber); }
.mb-grade.g-a { background: var(--vc-green-10); color: var(--vc-green); }
.mb-grade.g-b { background: var(--vc-blue-10); color: var(--vc-blue-2); }
.mb-grade.g-l { background: var(--vc-purple-12); color: var(--vc-purple); }
.mb-td-name { min-width: 150px; }
.mb-name { font-weight: 600; color: var(--vc-text); }
.mb-prov { display: block; font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-top: 1px; }
.mb-manual { font-size: var(--vc-fs-xs); color: var(--vc-amber); }
.mb-td-c { white-space: nowrap; }
.mb-tier-b { font-weight: 600; color: var(--vc-text-2); }
.mb-v { font-weight: 600; }
.mb-v.good { color: var(--vc-green); }
.mb-v.info { color: var(--vc-blue-2); }
.mb-v.warn { color: var(--vc-amber); }
.mb-v.bad { color: var(--vc-red); }
.mb-v.dim { color: var(--vc-muted); }
.mb-td-str { max-width: 360px; line-height: 1.95; }
.mb-tag { display: inline-block; font-size: var(--vc-fs-xs); color: var(--vc-text-2); background: var(--vc-surface-2); border-radius: var(--vc-r-pill); padding: 1px 8px; margin: 0 3px 0 0; }
/* 강점 키워드 카테고리 색 — 한눈에 모델 특징 구분 (대표님 2026-06-13) */
.mb-tag-dev  { color: var(--vc-green-2); background: var(--vc-green-10); }
.mb-tag-info { color: var(--vc-blue-2);  background: var(--vc-blue-10); }
.mb-tag-talk { color: var(--vc-purple);  background: var(--vc-purple-12); }
.mb-tag-plan { color: var(--vc-amber);   background: var(--vc-amber-10); }
/* mb-tag-etc 는 .mb-tag 기본(중립) 사용 */
.mb-legend { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--vc-line-2); }
.mb-lg { font-size: var(--vc-fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--vc-r-pill); }
.mb-lg.dev  { color: var(--vc-green-2); background: var(--vc-green-10); }
.mb-lg.info { color: var(--vc-blue-2);  background: var(--vc-blue-10); }
.mb-lg.talk { color: var(--vc-purple);  background: var(--vc-purple-12); }
.mb-lg.plan { color: var(--vc-amber);   background: var(--vc-amber-10); }
.mb-td-note { max-width: 260px; font-size: var(--vc-fs-xs); color: var(--vc-muted); line-height: 1.45; }
.mb-dash { color: var(--vc-line-3); }

@media (max-width: 760px) {
  .mb-grid { padding: 6px 10px 18px; }
  .mb-table { font-size: var(--vc-fs-xs); }
  .mb-th-note, .mb-td-note { display: none; }   /* 좁으면 비고 열 숨김 */
  .mb-row td, .mb-table thead th { padding: 7px 7px; }
}

/* 프로젝트 공정보드 (대표님 #49·바비 #813 데이터·보비 프론트) — task_board 를 공정 뷰로 */
.pb-overlay { position: fixed; inset: 0; z-index: 950; background: var(--vc-bg); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.pb-overlay.pb-open { opacity: 1; }
.pb-header { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.pb-title { display: flex; align-items: center; gap: 9px; font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.pb-title svg { color: var(--vc-blue); }
.pb-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.pb-close { background: none; border: none; color: var(--vc-text-2); cursor: pointer; padding: 4px; border-radius: var(--vc-r-2); }
.pb-close:hover { color: var(--vc-text); background: var(--vc-bg-2-40); }
.pb-close:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }

.pb-projects { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 22px; border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.pb-chip { font-size: var(--vc-fs-sm); font-weight: 500; padding: 6px 14px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-2); background: var(--vc-surface); color: var(--vc-text-2); cursor: pointer; }
.pb-chip:hover { color: var(--vc-text); border-color: var(--vc-line-3); }
.pb-chip-on { background: var(--vc-blue-10); color: var(--vc-blue-2); border-color: var(--vc-blue-15); }

.pb-body { flex: 1; overflow: auto; padding: 20px 22px; }
.pb-empty { color: var(--vc-muted); font-size: var(--vc-fs-sm); text-align: center; padding: 34px 8px; line-height: 1.6; }

.pb-tracks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pb-track { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); background: var(--vc-surface); color: var(--vc-text-2); cursor: pointer; }
.pb-track:hover { border-color: var(--vc-line-3); color: var(--vc-text); }
.pb-track span { font-size: var(--vc-fs-sm); font-weight: 600; }
.pb-track strong { font-size: var(--vc-fs-sm); color: var(--vc-blue-2); }
.pb-track small { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.pb-track-on { background: var(--vc-blue-10); color: var(--vc-blue-2); border-color: var(--vc-blue-15); }
.pb-track-on small { color: var(--vc-text-2); }

.pb-overall { margin-bottom: 22px; max-width: 560px; }
.pb-overall-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.pb-overall-label { font-size: var(--vc-fs-md); font-weight: 600; color: var(--vc-text); }
.pb-overall-pct { font-size: var(--vc-fs-lg); font-weight: 700; color: var(--vc-blue-2); }
.pb-overall-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-top: 6px; }

.pb-prog { height: 8px; background: var(--vc-surface-2); border-radius: var(--vc-r-pill); overflow: hidden; }
.pb-prog-lg { height: 11px; }
.pb-prog-fill { height: 100%; width: 0; background: var(--vc-blue); border-radius: var(--vc-r-pill); transition: width 0.3s ease; }
.pb-prog-fill.pb-bar-done { background: var(--vc-green); }

.pb-stages { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }
.pb-stage-wrap { display: flex; align-items: center; }
.pb-stage { width: 200px; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; transition: border-color 0.15s; }
.pb-stage:hover { border-color: var(--vc-blue-15); }
.pb-stage.pb-stage-on { border-color: var(--vc-blue); }
.pb-stage-top { display: flex; align-items: center; gap: 8px; }
.pb-seq { font-size: var(--vc-fs-xs); font-weight: 700; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vc-blue-10); color: var(--vc-blue-2); flex-shrink: 0; }
.pb-stage-name { font-size: var(--vc-fs-md); font-weight: 600; color: var(--vc-text); overflow-wrap: anywhere; }
.pb-stage-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pb-pct { font-size: var(--vc-fs-sm); font-weight: 700; color: var(--vc-text); }
.pb-cnt { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.pb-whos { display: flex; flex-wrap: wrap; gap: 5px; }
.pb-who { font-size: var(--vc-fs-xs); color: var(--vc-text-2); background: var(--vc-bg); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-pill); padding: 2px 8px; }
.pb-arrow { color: var(--vc-line-3); font-size: 18px; padding: 0 10px; flex-shrink: 0; }
/* stage 클릭 드릴다운 — 세부 작업·담당자 (#831 데이터·대표님 2026-06-14) */
.pb-drill-hint { font-size: var(--vc-fs-xs); color: var(--vc-blue-2); margin-top: 2px; text-align: right; }
.pb-drill { margin-top: 20px; max-width: 640px; }
.pb-drill-head { display: flex; align-items: center; gap: 8px; font-size: var(--vc-fs-md); font-weight: 600; color: var(--vc-text); margin-bottom: 10px; }
.pb-drill-n { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.pb-drill-empty { color: var(--vc-muted); font-size: var(--vc-fs-sm); padding: 12px 0; }
.pb-task-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--vc-line); }
.pb-task-st { font-size: var(--vc-fs-xs); font-weight: 600; padding: 1px 8px; border-radius: var(--vc-r-pill); flex-shrink: 0; min-width: 34px; text-align: center; }
.pb-t-done { color: var(--vc-green-2); background: var(--vc-green-10); }
.pb-t-doing { color: var(--vc-amber); background: var(--vc-amber-10); }
.pb-t-todo { color: var(--vc-text-2); background: var(--vc-surface-2); }
.pb-task-title { flex: 1; font-size: var(--vc-fs-sm); color: var(--vc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-task-who { font-size: var(--vc-fs-xs); color: var(--vc-text-2); flex-shrink: 0; }
.pb-task-pr { font-size: var(--vc-fs-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--vc-r-pill); background: var(--vc-pr-badge-bg); color: var(--vc-pr-badge-text); text-decoration: none; flex-shrink: 0; }
.pb-task-pr:hover { text-decoration: underline; }

/* 공정보드 타임라인 뷰 (대표님 2026-06-14·보비) — 공정 가로축·작업 행·진도 이름 왼쪽·이어지는 막대 */
.pb-tl-scroll { overflow-x: auto; border: 1px solid var(--vc-line); border-radius: var(--vc-r-3); margin-top: 12px; --pb-left-col: 430px; }
.pb-tl-grid { min-width: max-content; }
.pb-tl-head-row, .pb-tl-row { display: grid; align-items: center; }
.pb-tl-head-row { background: var(--vc-surface-2); border-bottom: 1px solid var(--vc-line); }
.pb-tl-corner { position: sticky; left: 0; background: var(--vc-surface-2); padding: 8px 6px 8px 10px; font-size: var(--vc-fs-xs); color: var(--vc-text-2); z-index: 3; display: flex; align-items: center; gap: 10px; min-width: 0; border-right: 1px solid var(--vc-line); }
.pb-tl-corner-text { min-width: 0; flex: 1; }
.pb-tl-corner-main { color: var(--vc-text-2); font-weight: 600; }
.pb-tl-corner-sub { color: var(--vc-muted); font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tl-resize { align-self: stretch; width: 18px; min-height: 34px; margin-left: auto; border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); background: var(--vc-white-05); cursor: col-resize; position: relative; flex-shrink: 0; touch-action: none; }
.pb-tl-resize::before { content: ''; position: absolute; top: 7px; bottom: 7px; left: 6px; width: 2px; border-radius: var(--vc-r-pill); background: var(--vc-blue-2); opacity: .8; }
.pb-tl-resize::after { content: ''; position: absolute; top: 9px; bottom: 9px; left: 11px; width: 2px; border-radius: var(--vc-r-pill); background: var(--vc-line-3); opacity: .85; }
.pb-tl-resize:hover, .pb-tl-resize:focus-visible { background: var(--vc-blue-10); border-color: var(--vc-blue-2); outline: none; }
.pb-tl-resize:hover::before, .pb-tl-resize:focus-visible::before { background: var(--vc-blue); opacity: 1; }
.pb-tl-col-head { padding: 8px 10px; }
.pb-tl-col-name { font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text); }
.pb-tl-col-prog { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.pb-tl-col-bar { flex: 1; height: 4px; background: var(--vc-surface-3); border-radius: var(--vc-r-pill); overflow: hidden; }
.pb-tl-col-fill { height: 100%; background: var(--vc-blue); }
.pb-tl-col-prog span { font-size: var(--vc-fs-xs); color: var(--vc-text-2); }
.pb-tl-row { border-bottom: 1px solid var(--vc-line); }
.pb-tl-name { position: sticky; left: 0; background: var(--vc-surface); display: flex; align-items: center; gap: 8px; padding: 8px 10px; z-index: 1; border-right: 1px solid var(--vc-line); min-width: 0; }
.pb-tl-prog { font-size: var(--vc-fs-xs); font-weight: 600; padding: 1px 0; border-radius: var(--vc-r-2); min-width: 42px; text-align: center; flex-shrink: 0; }
.pb-tl-title { flex: 1; min-width: 0; font-size: var(--vc-fs-sm); color: var(--vc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-tl-who { font-size: var(--vc-fs-xs); color: var(--vc-text-2); background: var(--vc-surface-2); padding: 1px 7px; border-radius: var(--vc-r-pill); flex-shrink: 0; }
.pb-tl-cell { padding: 5px 6px; }
/* 진도 게이지 (대표님 2026-06-14 제안) — 칸을 진도% 만큼 채우고 0→진도% 차오름·색은 진행 주황/완료 녹색 */
.pb-tl-track { height: 18px; background: var(--vc-surface-2); border-radius: var(--vc-r-2); overflow: hidden; }
.pb-tl-fill { height: 100%; border-radius: var(--vc-r-2); animation: pb-tl-grow 0.7s ease-out; }
@keyframes pb-tl-grow { from { width: 0; } }
.pb-tl-fill.pb-t-done { background: var(--vc-green-2); }
.pb-tl-fill.pb-t-doing { background: var(--vc-amber); }
.pb-tl-fill.pb-t-planned { background: var(--vc-surface-3); }
.pb-tl-fill.pb-t-todo { background: var(--vc-surface-3); }
.pb-resizing, .pb-resizing * { cursor: col-resize !important; user-select: none !important; }

/* 새 프로젝트 기획 버튼·모달 (바비 2026-06-14·#837 lib 연결·POST /api/pipeline/birth) */
.pb-new { font-size: var(--vc-fs-sm); font-weight: 600; padding: 6px 14px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-blue); background: var(--vc-surface); color: var(--vc-blue); cursor: pointer; margin-right: 8px; }
.pb-new:hover { background: var(--vc-bg-2-40); }
.pb-new:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }
.pb-crew { font-size: var(--vc-fs-sm); font-weight: 600; padding: 6px 14px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-green-30); background: var(--vc-green-10); color: var(--vc-green-2); cursor: pointer; }
.pb-crew:hover { background: var(--vc-green-15); border-color: var(--vc-green-50); }
.pb-crew:focus-visible { outline: 2px solid var(--vc-green); outline-offset: 1px; }
.pb-modal-back { position: fixed; inset: 0; background: var(--vc-bg-deep); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.pb-modal { background: var(--vc-bg-elev); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); padding: 22px; width: 400px; max-width: 92vw; display: flex; flex-direction: column; }
.pb-modal-head { font-size: var(--vc-fs-lg); font-weight: 700; color: var(--vc-text); }
.pb-modal-sub { font-size: var(--vc-fs-xs); color: var(--vc-text-2); margin: 4px 0 14px; }
.pb-modal-label { font-size: var(--vc-fs-xs); color: var(--vc-text-2); margin: 10px 0 4px; }
.pb-modal-input { font-size: var(--vc-fs-sm); padding: 8px 10px; border-radius: var(--vc-r-2); border: 1px solid var(--vc-line-2); background: var(--vc-surface); color: var(--vc-text); width: 100%; box-sizing: border-box; }
.pb-modal-input:focus { outline: none; border-color: var(--vc-blue); }
.pb-modal-msg { font-size: var(--vc-fs-xs); color: var(--vc-blue); min-height: 16px; margin: 8px 0 2px; }
.pb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.pb-modal-cancel { font-size: var(--vc-fs-sm); padding: 7px 16px; border-radius: var(--vc-r-2); border: 1px solid var(--vc-line-2); background: var(--vc-surface); color: var(--vc-text-2); cursor: pointer; }
.pb-modal-cancel:hover { background: var(--vc-bg-2-40); }
.pb-modal-ok { font-size: var(--vc-fs-sm); font-weight: 600; padding: 7px 16px; border-radius: var(--vc-r-2); border: 1px solid var(--vc-blue); background: var(--vc-blue); color: var(--vc-text); cursor: pointer; }
.pb-modal-ok:hover { filter: brightness(1.12); }

@media (max-width: 760px) {
  .pb-stages { flex-direction: column; align-items: stretch; }
  .pb-stage { width: auto; }
  .pb-stage-wrap { flex-direction: column; align-items: stretch; }
  .pb-arrow { transform: rotate(90deg); padding: 6px 0; align-self: center; }
}

/* ===== 워커 오케스트레이션 보드 (보비·UI/관제 본업·실행표준 §4.4) — 오버레이·카드·모델별 테두리 ===== */
.wb-overlay { position: fixed; inset: 0; z-index: 950; background: var(--vc-bg); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.wb-overlay.wb-open { opacity: 1; }
.wb-header { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-s-2); padding: var(--vc-s-4) var(--vc-s-5); border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.wb-title { display: flex; align-items: center; gap: var(--vc-s-2); font-size: var(--vc-fs-lg); font-weight: 600; color: var(--vc-text); }
.wb-title svg { color: var(--vc-blue); }
.wb-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.wb-close { background: none; border: none; color: var(--vc-text-2); cursor: pointer; padding: var(--vc-s-1); border-radius: var(--vc-r-2); min-width: var(--vc-touch); min-height: var(--vc-touch); display: inline-flex; align-items: center; justify-content: center; }
.wb-close:hover { color: var(--vc-text); background: var(--vc-bg-2-40); }
.wb-close:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }
.wb-grid { flex: 1; overflow: auto; padding: var(--vc-s-4) max(var(--vc-s-5), env(safe-area-inset-right)) max(var(--vc-s-5), env(safe-area-inset-bottom)) max(var(--vc-s-5), env(safe-area-inset-left)); }
.wb-empty { color: var(--vc-muted); font-size: var(--vc-fs-sm); text-align: center; padding: var(--vc-s-7) var(--vc-s-2); }
.wb-group { margin-bottom: var(--vc-s-5); }
.wb-group-title { display: flex; align-items: center; gap: var(--vc-s-2); font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text-2); margin: 0 0 var(--vc-s-2); }
.wb-group-count { font-size: var(--vc-fs-xs); color: var(--vc-muted); background: var(--vc-bg-2-40); padding: var(--vc-s-1) var(--vc-s-2); border-radius: var(--vc-r-pill); }
.wb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--vc-s-3); }
.wb-card { display: flex; gap: var(--vc-s-2); padding: var(--vc-s-3); background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-left: 3px solid var(--vc-model-unknown); border-radius: var(--vc-r-3); cursor: grab; min-height: var(--vc-touch); transition: border-color 0.15s ease, transform 0.1s ease; position: relative; }
.wb-card:hover { transform: translateY(-1px); }
.wb-card:active { cursor: grabbing; }
.wb-card[data-model="claude"]   { border-left-color: var(--vc-model-claude); }
.wb-card[data-model="codex"]    { border-left-color: var(--vc-model-codex); }
.wb-card[data-model="grok"]     { border-left-color: var(--vc-model-grok); }
.wb-card[data-model="deepseek"] { border-left-color: var(--vc-model-deepseek); }
.wb-card[data-model="gemini"]   { border-left-color: var(--vc-model-gemini); }
.wb-card[data-model="local"]    { border-left-color: var(--vc-model-local); }
.wb-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--vc-r-pill); background: var(--vc-bg-2-40); color: var(--vc-text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--vc-fs-md); }
.wb-card-body { min-width: 0; flex: 1; }
.wb-card-name { font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-card-model { font-size: var(--vc-fs-xs); color: var(--vc-text-2); margin-top: 2px; }
.wb-card-modelid { color: var(--vc-muted); margin-left: 5px; }
.wb-card-role { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-detached { display: inline-block; font-size: var(--vc-fs-xs); color: var(--vc-amber); margin-top: 4px; }
.wb-model-action { flex-shrink: 0; align-self: flex-start; width: 30px; height: 30px; border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); background: var(--vc-bg-2-40); color: var(--vc-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wb-model-action:hover { color: var(--vc-text); border-color: var(--vc-line-3); background: var(--vc-bg-2); }
.wb-model-action:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }
.wb-card.wb-dragging { opacity: 0.5; cursor: grabbing; }
.wb-group.wb-drop-target { background: var(--vc-bg-2-40); border-radius: var(--vc-r-3); }
.wb-model-modal { position: fixed; inset: 0; z-index: 980; background: var(--vc-black-50); display: flex; align-items: center; justify-content: center; padding: var(--vc-s-4); }
.wb-model-dialog { width: min(460px, 100%); background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4); box-shadow: var(--vc-elev-2); overflow: hidden; }
.wb-model-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vc-s-3); padding: var(--vc-s-4); border-bottom: 1px solid var(--vc-line-2); }
.wb-model-title { color: var(--vc-text); font-size: var(--vc-fs-md); font-weight: 700; }
.wb-model-sub, .wb-model-current { color: var(--vc-muted); font-size: var(--vc-fs-xs); margin-top: var(--vc-s-1); }
.wb-model-close { background: transparent; border: none; color: var(--vc-muted); border-radius: var(--vc-r-2); min-width: var(--vc-touch); min-height: var(--vc-touch); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wb-model-close:hover { color: var(--vc-text); background: var(--vc-bg-2-40); }
.wb-model-body { padding: var(--vc-s-4); display: grid; gap: var(--vc-s-3); }
.wb-model-field { display: grid; gap: var(--vc-s-1); color: var(--vc-text-2); font-size: var(--vc-fs-xs); }
.wb-model-field select { min-height: var(--vc-touch); background: var(--vc-input); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); color: var(--vc-text); padding: 0 var(--vc-s-3); }
.wb-model-field select:focus-visible, .wb-model-close:focus-visible, .wb-model-cancel:focus-visible, .wb-model-save:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }
.wb-model-warn { color: var(--vc-amber); background: var(--vc-bg-2-40); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); padding: var(--vc-s-2) var(--vc-s-3); font-size: var(--vc-fs-xs); }
.wb-model-actions { display: flex; justify-content: flex-end; gap: var(--vc-s-2); padding: var(--vc-s-4); border-top: 1px solid var(--vc-line-2); }
.wb-model-cancel, .wb-model-save { min-height: var(--vc-touch); border-radius: var(--vc-r-2); padding: 0 var(--vc-s-4); cursor: pointer; font-weight: 600; }
.wb-model-cancel { background: transparent; color: var(--vc-text-2); border: 1px solid var(--vc-line-2); }
.wb-model-save { background: var(--vc-blue); color: var(--vc-on-accent); border: 1px solid var(--vc-blue); }
.wb-model-save:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 760px) {
  .wb-grid { padding: var(--vc-s-2) max(var(--vc-s-3), env(safe-area-inset-right)) max(var(--vc-s-4), env(safe-area-inset-bottom)) max(var(--vc-s-3), env(safe-area-inset-left)); }
  .wb-cards { grid-template-columns: 1fr; }
}

/* ==== 기획보드(planning) 오버레이 — 재설계·spec docs/planning_board_spec_2026-06-20·design 토큰만 ==== */
.pb2-overlay { position: fixed; inset: 0; z-index: 950; background: var(--vc-bg); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.pb2-overlay.pb2-open { opacity: 1; }
.pb2-header { display: flex; align-items: center; gap: var(--vc-s-3); padding: max(var(--vc-s-4), env(safe-area-inset-top)) max(var(--vc-s-5), env(safe-area-inset-right)) var(--vc-s-4) max(var(--vc-s-5), env(safe-area-inset-left)); border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.pb2-title { display: flex; align-items: center; gap: var(--vc-s-2); font-size: var(--vc-fs-lg); font-weight: 700; color: var(--vc-text); }
.pb2-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.pb2-close { margin-left: auto; min-width: var(--vc-touch); min-height: var(--vc-touch); display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--vc-muted); cursor: pointer; border-radius: var(--vc-r-2); }
.pb2-close:focus-visible, .pb2-q-save:focus-visible, .pb2-d-act:focus-visible, .pb2-m-close:focus-visible, .pb2-empty-btn:focus-visible, .pb2-card:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 2px; }

/* 상단 빠른 입력창 (spec §10) */
.pb2-quick { display: flex; gap: var(--vc-s-2); align-items: stretch; flex-wrap: wrap; padding: var(--vc-s-3) max(var(--vc-s-5), env(safe-area-inset-right)) var(--vc-s-3) max(var(--vc-s-5), env(safe-area-inset-left)); border-bottom: 1px solid var(--vc-line); background: var(--vc-bg-2); flex-shrink: 0; }
.pb2-q-title { flex: 1 1 200px; min-height: var(--vc-touch); padding: 0 var(--vc-s-3); background: var(--vc-input); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); color: var(--vc-text); font-size: var(--vc-fs-sm); }
.pb2-q-raw { flex: 2 1 260px; min-height: var(--vc-touch); padding: var(--vc-s-2) var(--vc-s-3); background: var(--vc-input); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); color: var(--vc-text); font-size: var(--vc-fs-sm); resize: vertical; font-family: inherit; }
.pb2-q-src, .pb2-q-area { min-height: var(--vc-touch); padding: 0 var(--vc-s-2); background: var(--vc-input); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); color: var(--vc-text); font-size: var(--vc-fs-sm); }
.pb2-q-title:focus-visible, .pb2-q-raw:focus-visible, .pb2-q-src:focus-visible, .pb2-q-area:focus-visible, .pb2-reason:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 1px; }
.pb2-q-save { min-height: var(--vc-touch); padding: 0 var(--vc-s-4); background: var(--vc-blue); color: var(--vc-on-accent); border: none; border-radius: var(--vc-r-2); font-weight: 600; cursor: pointer; }
.pb2-q-save:disabled { opacity: 0.5; cursor: progress; }

/* 3구역(좌/중/우) 그리드 (spec §10) */
.pb2-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: var(--vc-s-4); padding: var(--vc-s-4) max(var(--vc-s-5), env(safe-area-inset-right)) max(var(--vc-s-5), env(safe-area-inset-bottom)) max(var(--vc-s-5), env(safe-area-inset-left)); align-items: start; }
.pb2-region { display: flex; flex-direction: column; gap: var(--vc-s-4); min-width: 0; }
.pb2-region-label { font-size: var(--vc-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vc-muted); padding-bottom: var(--vc-s-1); border-bottom: 1px solid var(--vc-line); }
.pb2-region-center { background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-4); padding: var(--vc-s-3); }

.pb2-empty { grid-column: 1 / -1; text-align: center; color: var(--vc-muted); padding: var(--vc-s-8); }
.pb2-empty-cta { display: flex; flex-direction: column; align-items: center; gap: var(--vc-s-3); }
.pb2-empty-icon { color: var(--vc-muted); opacity: 0.7; }
.pb2-empty-h { font-size: var(--vc-fs-lg); font-weight: 700; color: var(--vc-text); }
.pb2-empty-p { font-size: var(--vc-fs-sm); color: var(--vc-muted); line-height: 1.6; }
.pb2-empty-btn { min-height: var(--vc-touch); padding: 0 var(--vc-s-5); margin-top: var(--vc-s-2); background: var(--vc-blue); color: var(--vc-on-accent); border: none; border-radius: var(--vc-r-2); font-weight: 600; cursor: pointer; }

.pb2-lane { display: flex; flex-direction: column; gap: var(--vc-s-2); min-width: 0; }
.pb2-lane-title { font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text); display: flex; align-items: center; gap: var(--vc-s-2); flex-wrap: wrap; }
.pb2-lane-count { font-size: var(--vc-fs-xs); color: var(--vc-muted); background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); }
.pb2-lane-hint { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.pb2-lane-empty { color: var(--vc-muted); font-size: var(--vc-fs-xs); text-align: center; padding: var(--vc-s-3); border: 1px dashed var(--vc-line); border-radius: var(--vc-r-3); }
.pb2-cards { display: flex; flex-direction: column; gap: var(--vc-s-2); }

.pb2-card { background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-3); padding: var(--vc-s-3); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.pb2-card:hover { border-color: var(--vc-line-2); background: var(--vc-surface); }
.pb2-card-ready { border-color: var(--vc-blue-25); }
.pb2-card-title { font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text); line-height: 1.4; }
.pb2-card-meta { display: flex; gap: var(--vc-s-1); flex-wrap: wrap; margin-top: var(--vc-s-2); }
.pb2-chip { font-size: var(--vc-fs-xs); color: var(--vc-muted); background: var(--vc-bg); border: 1px solid var(--vc-line); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); }
.pb2-chip-prio { color: var(--vc-text); }
.pb2-chip-prio[data-p="P0"], .pb2-chip-prio[data-p="P1"] { color: var(--vc-red); border-color: var(--vc-red-30); }
.pb2-card-ratio { font-size: var(--vc-fs-xs); margin-top: var(--vc-s-2); }
.pb2-ratio-complete { color: var(--vc-green); }
.pb2-ratio-incomplete { color: var(--vc-amber); }
.pb2-card-link { font-size: var(--vc-fs-xs); color: var(--vc-blue); margin-top: var(--vc-s-2); font-weight: 600; }
.pb2-card-reason { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-top: var(--vc-s-2); line-height: 1.4; }

/* 카드 상세 / 결정 모달 (spec §10) */
.pb2-modal-back { position: fixed; inset: 0; z-index: 970; background: var(--vc-overlay); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.pb2-modal { width: 100%; max-width: 560px; max-height: calc(100% - max(var(--vc-s-5), env(safe-area-inset-top))); display: flex; flex-direction: column; background: var(--vc-surface); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-5) var(--vc-r-5) 0 0; box-shadow: var(--vc-elev-2); }
.pb2-modal-sm { max-width: 460px; }
.pb2-m-head { display: flex; align-items: center; gap: var(--vc-s-3); padding: var(--vc-s-4); border-bottom: 1px solid var(--vc-line); flex-shrink: 0; }
.pb2-m-title { font-size: var(--vc-fs-md); font-weight: 700; color: var(--vc-text); flex: 1; }
.pb2-m-close { min-width: var(--vc-touch); min-height: var(--vc-touch); display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--vc-muted); cursor: pointer; border-radius: var(--vc-r-2); }
.pb2-m-body { overflow: auto; padding: var(--vc-s-4); display: flex; flex-direction: column; gap: var(--vc-s-5); }
.pb2-m-sec { display: flex; flex-direction: column; gap: var(--vc-s-2); }
.pb2-m-sec-h { font-size: var(--vc-fs-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--vc-muted); display: flex; align-items: center; gap: var(--vc-s-2); }
.pb2-m-count { font-size: var(--vc-fs-xs); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); border: 1px solid var(--vc-line); }
.pb2-m-raw { font-size: var(--vc-fs-sm); color: var(--vc-text); background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-3); padding: var(--vc-s-3); white-space: pre-wrap; line-height: 1.5; }
.pb2-d-row { display: flex; gap: var(--vc-s-3); font-size: var(--vc-fs-sm); }
.pb2-d-k { flex: 0 0 84px; color: var(--vc-muted); }
.pb2-d-v { flex: 1; color: var(--vc-text); line-height: 1.5; }
.pb2-d-muted { font-size: var(--vc-fs-sm); color: var(--vc-muted); }

.pb2-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--vc-s-1) var(--vc-s-3); }
.pb2-check { display: flex; align-items: center; gap: var(--vc-s-2); font-size: var(--vc-fs-sm); }
.pb2-check-mark { width: 18px; text-align: center; font-weight: 700; }
.pb2-check-ok .pb2-check-mark { color: var(--vc-green); }
.pb2-check-no .pb2-check-mark { color: var(--vc-red); }
.pb2-check-ok .pb2-check-label { color: var(--vc-text); }
.pb2-check-no .pb2-check-label { color: var(--vc-muted); }

.pb2-owners { display: flex; flex-direction: column; gap: var(--vc-s-1); }
.pb2-owner { display: flex; gap: var(--vc-s-3); font-size: var(--vc-fs-sm); }
.pb2-owner-role { flex: 0 0 84px; color: var(--vc-muted); }
.pb2-owner-who { color: var(--vc-text); }

.pb2-d-promoted { font-size: var(--vc-fs-sm); color: var(--vc-blue); }
.pb2-d-decided { font-size: var(--vc-fs-sm); color: var(--vc-text); line-height: 1.5; }
.pb2-d-decided-tag { display: inline-block; font-size: var(--vc-fs-xs); font-weight: 700; color: var(--vc-amber); border: 1px solid var(--vc-amber-30); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); margin-right: var(--vc-s-2); }

.pb2-m-foot { display: flex; gap: var(--vc-s-2); padding: var(--vc-s-4) var(--vc-s-4) max(var(--vc-s-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--vc-line); flex-wrap: wrap; flex-shrink: 0; }
.pb2-d-act { min-height: var(--vc-touch); padding: 0 var(--vc-s-4); font-size: var(--vc-fs-sm); background: var(--vc-bg); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); color: var(--vc-text); cursor: pointer; }
.pb2-d-act:disabled { opacity: 0.45; cursor: not-allowed; }
.pb2-d-promote:not(:disabled) { background: var(--vc-blue); color: var(--vc-on-accent); border-color: var(--vc-blue); font-weight: 600; }
.pb2-d-discard { color: var(--vc-red); border-color: var(--vc-red-30); }

.pb2-reason { width: 100%; min-height: var(--vc-touch); padding: var(--vc-s-2) var(--vc-s-3); background: var(--vc-input); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-2); color: var(--vc-text); font-size: var(--vc-fs-sm); font-family: inherit; resize: vertical; }
.pb2-reason-err { font-size: var(--vc-fs-xs); color: var(--vc-red); min-height: var(--vc-fs-md); margin-top: var(--vc-s-1); }

.pb2-toast { position: fixed; left: 50%; bottom: max(var(--vc-s-6), env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(var(--vc-s-5)); z-index: 990; max-width: 90%; padding: var(--vc-s-3) var(--vc-s-4); background: var(--vc-surface-2); color: var(--vc-text); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-3); box-shadow: var(--vc-elev-2); font-size: var(--vc-fs-sm); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.pb2-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .pb2-grid { grid-template-columns: 1fr; }
  .pb2-region-center { background: transparent; border: none; padding: 0; }
  .pb2-checklist { grid-template-columns: 1fr; }
  .pb2-modal { max-width: 100%; }
}

/* ==== RACI 다음담당 큐 보드 (PR6·오버레이·읽기전용) ==== */
.raci-overlay { position: fixed; inset: 0; z-index: 950; background: var(--vc-bg); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.raci-overlay.raci-open { opacity: 1; }
.raci-header { display: flex; align-items: center; gap: var(--vc-s-3); padding: max(var(--vc-s-4), env(safe-area-inset-top)) max(var(--vc-s-5), env(safe-area-inset-right)) var(--vc-s-4) max(var(--vc-s-5), env(safe-area-inset-left)); border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.raci-title { display: flex; align-items: center; gap: var(--vc-s-2); font-size: var(--vc-fs-lg); font-weight: 700; color: var(--vc-text); }
.raci-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.raci-refresh { margin-left: auto; min-width: var(--vc-touch); min-height: var(--vc-touch); display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--vc-line); color: var(--vc-muted); cursor: pointer; border-radius: var(--vc-r-2); }
.raci-close { min-width: var(--vc-touch); min-height: var(--vc-touch); display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--vc-muted); cursor: pointer; border-radius: var(--vc-r-2); }
.raci-refresh:focus-visible, .raci-close:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 2px; }
.raci-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vc-s-4); padding: var(--vc-s-4) max(var(--vc-s-5), env(safe-area-inset-right)) max(var(--vc-s-5), env(safe-area-inset-bottom)) max(var(--vc-s-5), env(safe-area-inset-left)); align-items: start; }
.raci-empty { grid-column: 1 / -1; text-align: center; color: var(--vc-muted); padding: var(--vc-s-8); }
.raci-col { display: flex; flex-direction: column; gap: var(--vc-s-2); min-width: 0; background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-3); padding: var(--vc-s-3); }
.raci-col-title { font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text); display: flex; align-items: center; justify-content: space-between; gap: var(--vc-s-2); margin: 0; }
.raci-col-count { font-size: var(--vc-fs-xs); color: var(--vc-text); background: var(--vc-bg); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); min-width: var(--vc-s-5); text-align: center; }
.raci-col-owner { font-size: var(--vc-fs-xs); color: var(--vc-blue); font-weight: 600; }
.raci-col-review { border-top: 2px solid var(--vc-blue); }
.raci-col-gate { border-top: 2px solid var(--vc-amber); }
.raci-col-decision { border-top: 2px solid var(--vc-green); }
.raci-cards { display: flex; flex-direction: column; gap: var(--vc-s-2); margin-top: var(--vc-s-1); }
.raci-col-empty { color: var(--vc-muted); font-size: var(--vc-fs-xs); text-align: center; padding: var(--vc-s-4); }
.raci-card { background: var(--vc-bg); border: 1px solid var(--vc-line); border-radius: var(--vc-r-2); padding: var(--vc-s-3); }
.raci-card-blocked { border-color: var(--vc-red-30); }
.raci-card-title { font-size: var(--vc-fs-sm); font-weight: 600; color: var(--vc-text); }
.raci-card-meta { display: flex; gap: var(--vc-s-2); flex-wrap: wrap; margin-top: var(--vc-s-2); }
.raci-card-state { font-size: var(--vc-fs-xs); color: var(--vc-text-2); background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); }
.raci-card-owner { font-size: var(--vc-fs-xs); color: var(--vc-blue); }
.raci-card-blocker { font-size: var(--vc-fs-xs); color: var(--vc-red); margin-top: var(--vc-s-2); }
.raci-card-missing { font-size: var(--vc-fs-xs); color: var(--vc-amber); margin-top: var(--vc-s-1); }
@media (max-width: 760px) {
  .raci-grid { grid-template-columns: 1fr; }
}

/* ==== 실행능력 매트릭스(model_matrix) 오버레이 — 모델 × 능력 표·design 토큰만 ==== */
.mm-overlay { position: fixed; inset: 0; z-index: 950; background: var(--vc-bg); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; }
.mm-overlay.mm-open { opacity: 1; }
.mm-header { display: flex; align-items: center; gap: var(--vc-s-3); padding: max(var(--vc-s-4), env(safe-area-inset-top)) max(var(--vc-s-5), env(safe-area-inset-right)) var(--vc-s-4) max(var(--vc-s-5), env(safe-area-inset-left)); border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.mm-title { display: flex; align-items: center; gap: var(--vc-s-2); font-size: var(--vc-fs-lg); font-weight: 700; color: var(--vc-text); }
.mm-sub { font-size: var(--vc-fs-xs); color: var(--vc-muted); font-weight: 400; }
.mm-refresh, .mm-close { min-width: var(--vc-touch); min-height: var(--vc-touch); display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--vc-muted); cursor: pointer; border-radius: var(--vc-r-2); }
.mm-refresh { margin-left: auto; }
.mm-refresh:focus-visible, .mm-close:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 2px; }
.mm-body { flex: 1; overflow: auto; padding: var(--vc-s-4) max(var(--vc-s-5), env(safe-area-inset-right)) max(var(--vc-s-5), env(safe-area-inset-bottom)) max(var(--vc-s-5), env(safe-area-inset-left)); }
.mm-empty { text-align: center; color: var(--vc-muted); padding: var(--vc-s-8); }
.mm-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-s-3); margin-bottom: var(--vc-s-3); }
.mm-sum-item { font-size: var(--vc-fs-sm); font-weight: 600; padding: var(--vc-s-1) var(--vc-s-3); border-radius: var(--vc-r-pill); background: var(--vc-bg-2); }
.mm-sum-meta { font-size: var(--vc-fs-xs); color: var(--vc-muted); margin-left: auto; }
.mm-legend { display: flex; flex-wrap: wrap; gap: var(--vc-s-3); margin-bottom: var(--vc-s-3); font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.mm-legend-item { display: inline-flex; align-items: center; gap: var(--vc-s-1); }
.mm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mm-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.mm-table th, .mm-table td { padding: var(--vc-s-2); text-align: center; border-bottom: 1px solid var(--vc-line); font-size: var(--vc-fs-xs); }
.mm-th-cap { color: var(--vc-muted); font-weight: 600; white-space: nowrap; }
.mm-th-model, .mm-model { text-align: left; position: sticky; left: 0; background: var(--vc-bg); }
.mm-model { display: flex; flex-direction: column; gap: var(--vc-s-1); }
.mm-model-name { font-weight: 600; color: var(--vc-text); white-space: nowrap; }
.mm-runner { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.mm-cell { font-size: var(--vc-fs-sm); }
.mm-yes, .mm-sum-item.mm-yes { color: var(--vc-green); }
.mm-no, .mm-sum-item.mm-no { color: var(--vc-red); }
.mm-untested, .mm-sum-item.mm-untested { color: var(--vc-amber); }
.mm-na, .mm-sum-item.mm-na { color: var(--vc-muted); }
@media (max-width: 760px) {
  .mm-summary { font-size: var(--vc-fs-xs); }
}

/* ==== 실행능력 매트릭스 #1155 — provider(화사) 섹션 그룹핑 + 모델 상세 패널 (대표님 2종 지시) ==== */
/* provider 접기 섹션 */
.mm-section { margin-bottom: var(--vc-s-3); border: 1px solid var(--vc-line); border-radius: var(--vc-r-3); overflow: hidden; }
.mm-sec-head { width: 100%; display: flex; align-items: center; gap: var(--vc-s-2); min-height: var(--vc-touch); padding: var(--vc-s-2) var(--vc-s-3); background: var(--vc-bg-2); border: none; cursor: pointer; text-align: left; color: var(--vc-text); }
.mm-sec-head:hover { background: var(--vc-line); }
.mm-sec-head:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: -2px; }
.mm-sec-caret { display: inline-flex; width: var(--vc-s-4); color: var(--vc-muted); transition: transform 0.15s ease; }
.mm-sec-caret.mm-caret-collapsed { transform: rotate(-90deg); }
.mm-prov-dot { width: var(--vc-s-2); height: var(--vc-s-2); border-radius: var(--vc-r-pill); background: var(--vc-muted); flex-shrink: 0; }
.mm-p-xai { background: var(--vc-text-2); }
.mm-p-openai { background: var(--vc-green); }
.mm-p-anthropic { background: var(--vc-co-orange); }
.mm-p-google { background: var(--vc-blue); }
.mm-p-antigravity { background: var(--vc-co-purple); }
.mm-p-deepseek { background: var(--vc-purple); }
.mm-p-groq { background: var(--vc-red); }
.mm-p-ollama { background: var(--vc-teal-deep); }
.mm-p-free { background: var(--vc-amber); }
.mm-p-other { background: var(--vc-muted); }
.mm-sec-name { font-size: var(--vc-fs-sm); font-weight: 700; color: var(--vc-text); }
.mm-sec-count { font-size: var(--vc-fs-xs); color: var(--vc-muted); background: var(--vc-bg); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); }
.mm-sec-toolyes { font-size: var(--vc-fs-xs); color: var(--vc-green); margin-left: auto; font-weight: 600; }
.mm-sec-body { padding: var(--vc-s-2); }
.mm-sec-body.mm-collapsed { display: none; }
/* 상세 버튼 (각 행) */
.mm-th-detail, .mm-td-detail { text-align: center; }
.mm-detail-btn { min-height: var(--vc-touch); min-width: var(--vc-touch); padding: 0 var(--vc-s-2); background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-2); color: var(--vc-blue); font-size: var(--vc-fs-xs); font-weight: 600; cursor: pointer; }
.mm-detail-btn:hover { background: var(--vc-line); }
.mm-detail-btn:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 2px; }
/* 모델 상세 패널 (모달) */
.mm-detail { position: fixed; inset: 0; z-index: 960; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.18s ease; }
.mm-detail.mm-detail-open { opacity: 1; }
.mm-detail-backdrop { position: absolute; inset: 0; background: var(--vc-bg); opacity: 0.6; }
.mm-detail-card { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: var(--vc-bg); border: 1px solid var(--vc-line-2); border-radius: var(--vc-r-4) var(--vc-r-4) 0 0; overflow: hidden; }
.mm-d-head { display: flex; align-items: center; gap: var(--vc-s-2); padding: var(--vc-s-3) var(--vc-s-4); border-bottom: 1px solid var(--vc-line-2); flex-shrink: 0; }
.mm-d-title { display: flex; align-items: center; gap: var(--vc-s-2); min-width: 0; flex: 1; }
.mm-d-name { font-size: var(--vc-fs-md); font-weight: 700; color: var(--vc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-d-prov { font-size: var(--vc-fs-xs); color: var(--vc-muted); flex-shrink: 0; }
.mm-d-body { flex: 1; overflow-y: auto; padding: var(--vc-s-4) max(var(--vc-s-4), env(safe-area-inset-right)) max(var(--vc-s-5), env(safe-area-inset-bottom)) max(var(--vc-s-4), env(safe-area-inset-left)); }
.mm-d-section-label { font-size: var(--vc-fs-xs); font-weight: 700; color: var(--vc-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--vc-s-4) 0 var(--vc-s-2); }
.mm-d-section-label:first-child { margin-top: 0; }
.mm-d-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vc-s-2); }
.mm-d-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--vc-s-2); padding: var(--vc-s-2) var(--vc-s-3); background: var(--vc-bg-2); border-radius: var(--vc-r-2); }
.mm-d-cap-label { font-size: var(--vc-fs-xs); color: var(--vc-text); }
.mm-d-cap .mm-cell { font-size: var(--vc-fs-xs); font-weight: 600; white-space: nowrap; }
.mm-d-rows { display: flex; flex-direction: column; gap: var(--vc-s-1); }
.mm-d-row { display: flex; align-items: baseline; gap: var(--vc-s-3); padding: var(--vc-s-2) var(--vc-s-3); border-bottom: 1px solid var(--vc-line); }
.mm-d-row-label { font-size: var(--vc-fs-xs); color: var(--vc-muted); min-width: 64px; flex-shrink: 0; }
.mm-d-row-val { font-size: var(--vc-fs-sm); color: var(--vc-text); }
.mm-d-pending { color: var(--vc-muted); font-style: italic; }
.mm-d-evidence { margin-top: var(--vc-s-3); }
.mm-d-evidence-text { font-size: var(--vc-fs-xs); color: var(--vc-text-2); line-height: 1.55; margin: 0; word-break: break-word; white-space: pre-wrap; }
@media (min-width: 640px) {
  .mm-detail { align-items: center; }
  .mm-detail-card { border-radius: var(--vc-r-4); }
}
@media (max-width: 480px) {
  .mm-d-caps { grid-template-columns: 1fr; }
}

/* ==== 공정보드 칸반(A·대표님 2026-06-22) — 공정=컬럼·작업=카드·막대 최소·design 토큰 ==== */
.pb-kanban { display: flex; gap: var(--vc-s-3); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--vc-s-3); }
.pb-k-col { flex: 0 0 240px; display: flex; flex-direction: column; gap: var(--vc-s-2); min-width: 0; }
.pb-k-col-head { display: flex; flex-direction: column; gap: var(--vc-s-1); padding: var(--vc-s-2) var(--vc-s-3); background: var(--vc-bg-2); border-radius: var(--vc-r-2); position: sticky; top: 0; }
.pb-k-col-name { font-size: var(--vc-fs-sm); font-weight: 700; color: var(--vc-text); display: flex; align-items: center; gap: var(--vc-s-2); }
.pb-k-col-count { font-size: var(--vc-fs-xs); color: var(--vc-muted); background: var(--vc-bg); border-radius: var(--vc-r-pill); padding: 0 var(--vc-s-2); }
.pb-k-col-prog { display: flex; align-items: center; gap: var(--vc-s-2); }
.pb-k-col-bar { flex: 1; height: 4px; background: var(--vc-line); border-radius: var(--vc-r-pill); overflow: hidden; }
.pb-k-col-fill { height: 100%; background: var(--vc-blue); border-radius: var(--vc-r-pill); }
.pb-k-col-pct { font-size: var(--vc-fs-xs); color: var(--vc-muted); min-width: 34px; text-align: right; }
.pb-k-cards { display: flex; flex-direction: column; gap: var(--vc-s-2); }
.pb-k-empty { color: var(--vc-muted); font-size: var(--vc-fs-xs); text-align: center; padding: var(--vc-s-3); }
.pb-k-card { background: var(--vc-bg-2); border: 1px solid var(--vc-line); border-radius: var(--vc-r-3); padding: var(--vc-s-3); }
.pb-k-card-title { font-size: var(--vc-fs-sm); color: var(--vc-text); line-height: 1.4; }
.pb-k-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-s-2); margin-top: var(--vc-s-2); }
.pb-k-status { font-size: var(--vc-fs-xs); font-weight: 600; color: var(--vc-muted); border-radius: var(--vc-r-pill); padding: 1px var(--vc-s-2); }
.pb-t-review { color: var(--vc-blue-2); background: var(--vc-blue-10); }
.pb-t-gate { color: var(--vc-purple-2); background: var(--vc-purple-10); }
.pb-k-who { font-size: var(--vc-fs-xs); color: var(--vc-muted); }
.pb-k-next { font-size: var(--vc-fs-xs); color: var(--vc-blue-2); background: var(--vc-blue-10); border-radius: var(--vc-r-pill); padding: 1px var(--vc-s-2); }
.pb-k-owner-mismatch { color: var(--vc-amber-2); background: var(--vc-amber-10); }
.pb-k-pr { font-size: var(--vc-fs-xs); color: var(--vc-blue); text-decoration: none; }
.pb-k-pr:hover { text-decoration: underline; }