/* ══════════════════════════════════════════════════════════
   Agents — iBots v5 "Unified Minimalism"
   에이전트 그리드, 노드 그래프, 디비전 섹션, 밀도 모드.
   기본 agent-card/model/status/grid는 components.css에서 정의.
   이 파일은 고유 요소만 포함.
   ══════════════════════════════════════════════════════════ */

/* ── Agent Grid 오버라이드 (division 모드) ── */
#agent-grid {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    /* Container Query — 사이드바·드로워 열림 시에도 그리드 자연 조정 */
    container-type: inline-size;
    container-name: agentsgrid;
}

/* division-grid: 각 디비전 내부 카드 그리드 */
.division-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--agent-card-min, 260px), 1fr));
    gap: var(--s-3);
    padding: var(--s-2) 0;
    /* #22: 카드 높이 통일 — currentTask 유무와 무관하게 동일한 높이 */
    align-items: stretch;
}


/* ── Agent Card 상태 + 스프링 진입 (좌측 보더 제거) ── */
.agent-card {
    animation: animSpringIn var(--duration-moderate) var(--easing-organic) backwards;
    border-radius: var(--radius-s);
    will-change: transform, opacity;
    /* 3D 틸트 퍼스펙티브 — JS가 --tilt-x/--tilt-y 주입 */
    transform: perspective(600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--duration-base) var(--easing-out),
                background-color var(--duration-base) var(--easing-out);
    /* 독립 카드 — 내부 레이아웃 변경이 그리드에 영향 없음 */
    contain: layout style;
    /* 뷰포트 밖 카드 렌더링 지연 — UILead P2 성능 최적화 */
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
}
/* ::after は tooltip 전용. sheen은 .sheen-layer 자식 요소로 분리 (§47-4 충돌 해소) */

/* §35+§37 프리미엄 카드 호버 — box-shadow는 components.css 단일 권위 (§37 통합) */
/* .agent-card:hover box-shadow → components.css(:695) 단일 정의 (glow-premium-strong) */

/* 에이전트 카드 호버 시 마우스 추종 시머 이펙트 (§27 glow-trail 원리 — XY 추적, §35 프리미엄 강화) */
.agent-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 180px at var(--mouse-x, -50%) var(--mouse-y, 50%),
        var(--clr-accent-bg-sm) 0%,
        var(--surface-w15) 20%,
        var(--surface) 50%,
        transparent 75%
    );
    opacity: 0;
    transition: opacity var(--duration-base) var(--easing-out);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}
.agent-card:hover::before {
    opacity: 1;
}
/* hover/active transform → components.css 단일 권위 선언 (T1: animations.css에서 이관) */

/* §27-8 동적 틸트 그림자 — JS가 --shadow-dx/--shadow-dy 주입, 틸트 반대 방향으로 그림자 이동 */
.agent-card:hover {
    filter: drop-shadow(
        var(--shadow-dx, 0px)
        var(--shadow-dy, 0px)
        20px rgba(0, 0, 0, 0.12)
    );
}

/* §27-8 프리미엄 완료 파티클 — JS에서 body에 동적 삽입, animationend 후 제거 */
.completion-particle {
    position: fixed;
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--accent);
    pointer-events: none;
    z-index: 9999;
    animation: animCompletionParticle 600ms var(--easing-out) forwards;
}
@keyframes animCompletionParticle {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--px, 30px), var(--py, -30px)) scale(0); opacity: 0; }
}

.agent-card.s-working .agent-name {
    color: var(--accent);
}
/* s-error box-shadow → components.css(:4432) 단일 권위 (shadow-subtle + outline ring + hover) */
.agent-card.s-complete {
    box-shadow: var(--shadow-card-complete-faint);
}
.agent-card.s-waiting {
    box-shadow: var(--shadow-card-waiting-faint);
}

/* Stagger 애니메이션 — 더 자연스러운 캐스케이드 */
.agent-card:nth-child(1)  { animation-delay: 0.02s; }
.agent-card:nth-child(2)  { animation-delay: 0.04s; }
.agent-card:nth-child(3)  { animation-delay: 0.06s; }
.agent-card:nth-child(4)  { animation-delay: 0.08s; }
.agent-card:nth-child(5)  { animation-delay: 0.10s; }
.agent-card:nth-child(6)  { animation-delay: 0.12s; }
.agent-card:nth-child(7)  { animation-delay: 0.14s; }
.agent-card:nth-child(8)  { animation-delay: 0.16s; }
.agent-card:nth-child(9)  { animation-delay: 0.18s; }
.agent-card:nth-child(10) { animation-delay: 0.20s; }
.agent-card:nth-child(11) { animation-delay: 0.22s; }
.agent-card:nth-child(12) { animation-delay: 0.24s; }

/* agent-top: justify-content 오버라이드 (좌-우 배치) */
.agent-top { justify-content: space-between; }

/* agent-task: 멀티라인 말줄임 */
.agent-task {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* agent-top-right 컨테이너 */
.agent-top-right {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════
   Node Graph
   ══════════════════════════════════════════════════════════ */
.node-graph-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.node-graph {
    position: relative;
    width: 100%;
    min-height: var(--layout-lg);
    max-height: 70vh;
    background: var(--bg);
    overflow: hidden;
    border-radius: var(--radius);
}

.node-graph > .force-graph-container,
.node-graph > .scene-container { position: absolute; inset: 0; }
.node-graph canvas { display: block; }

/* 줌 백 버튼 (노드 클릭 줌인 후 표시 — 라벨+Esc 힌트 포함) */
.zoom-back-btn {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    width: auto;
    height: var(--icon-md);
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-s);
    background: var(--bg-raised);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    z-index: 10;
    transition: background-color var(--motion-hover),
                color var(--motion-hover),
                transform var(--motion-hover);
}
.zoom-back-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.zoom-back-btn:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.zoom-back-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}
/* components.css sr-only 오버라이드 — UX P1: 라벨을 시각적으로 표시 */
.zoom-back-label,
.zoom-back-hint {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
}
.zoom-back-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}
.zoom-back-hint {
    font-size: var(--text-xs);
    opacity: 0.5;
    font-family: var(--font-mono);
    padding: var(--s-1);
    background: var(--surface-hover);
    border-radius: var(--radius-s);
}

/* 노드 포커스 인디케이터 (줌인 시 좌상단 미니 배지) */
.node-focus-indicator {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    display: none;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--bg-code);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text);
    z-index: 10;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--easing-smooth), transform var(--duration-base) var(--easing-smooth);
    pointer-events: none;
}
.node-focus-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}
.node-focus-indicator.hiding {
    opacity: 0;
    transform: translateY(-8px);
    transition-duration: 150ms;
}
.nfi-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
}
.nfi-name {
    white-space: nowrap;
    font-weight: 500;
}

/* 3D 그래프 조작 가이드 오버레이 (최초 1회 표시) */
.graph-guide-overlay {
    position: absolute;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 15;
    opacity: 0;
    transition: opacity var(--duration-spring) var(--easing-smooth), transform var(--duration-spring) var(--easing-smooth);
    pointer-events: none;
}
.graph-guide-overlay.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.graph-guide-overlay.hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition-duration: 250ms;
}
.graph-guide-content {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--bg-code);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: nowrap;
}
.graph-guide-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--text);
}
.graph-guide-item svg {
    opacity: 0.5;
    flex-shrink: 0;
}
.graph-guide-sep {
    opacity: 0.3;
}

/* ── 3D 그래프 HUD 반응형 (소형 화면) ── */
@media (max-width: 960px) {
    /* 줌 백 버튼 — 라벨/힌트 숨기고 아이콘만 표시 */
    .zoom-back-label { display: none; }
    .zoom-back-hint { display: none; }
    .zoom-back-btn {
        padding: var(--s-1);
        width: var(--icon-md);
    }
    /* 포커스 인디케이터 — 축소 */
    .node-focus-indicator {
        font-size: var(--fs-sm);
        padding: var(--s-1) var(--s-1);
    }
    /* 조작 가이드 — 컴팩트 (구분점 제거 + 줄바꿈 허용) */
    .graph-guide-content {
        gap: var(--s-1);
        padding: var(--s-1) var(--s-2);
        font-size: var(--fs-sm);
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }
    .graph-guide-sep { display: none; }
    /* 툴팁 — 너비 축소 */
    .graph-tooltip { max-width: clamp(140px, 22vw, 200px); }
}

.node-graph-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.node-item {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1-5) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--surface-w5);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    transition: transform var(--duration-moderate) var(--ease-spring),
                background var(--duration-moderate) var(--ease-out),
                border-color var(--duration-moderate) var(--ease-out),
                box-shadow var(--duration-moderate) var(--ease-out),
                color var(--duration-moderate) var(--ease-out);
    z-index: 2;
    cursor: pointer;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.node-item:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: var(--surface-hover);
    border-color: var(--surface-w10);
    color: var(--text);
    box-shadow: var(--shadow-popover);
    z-index: 3;
}
.node-item:active {
    transform: translate(-50%, -50%) scale(0.98);
    transition-duration: var(--duration-instant);
}
.node-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 노드 상태 — --status-* 토큰 기반 색상 (미니멀 글로우) */
.node-item.working {
    border-color: color-mix(in srgb, var(--status-running) 25%, transparent);
    color: var(--text);
    animation: nodeGlow 3s var(--ease-in-out) infinite;
}

.node-item.complete {
    border-color: color-mix(in srgb, var(--status-complete) 12%, transparent);
    background: color-mix(in srgb, var(--status-complete) 3%, transparent);
}
.node-item.error {
    border-color: color-mix(in srgb, var(--status-error) 20%, transparent);
    box-shadow: var(--shadow-node-error);
}
.node-item.waiting {
    border-color: color-mix(in srgb, var(--status-waiting) 18%, transparent);
    box-shadow: var(--shadow-node-waiting);
}

.node-dot {
    width: var(--s-1); height: var(--s-1);
    border-radius: 50%;
    flex-shrink: 0;
    /* 상태 전환 보간 — 배경·그림자 색상 보간 */
    transition: background var(--motion-state),
                box-shadow var(--motion-state),
                opacity var(--motion-state);
}
.node-dot.s-working  { background: var(--status-running); animation: dotPulse 2.5s infinite; }
.node-dot.s-idle     { background: var(--text-sub); opacity: 0.25; }
.node-dot.s-complete { background: var(--status-complete); box-shadow: var(--shadow-node-dot-complete); }
.node-dot.s-error    { background: var(--status-error); box-shadow: var(--shadow-node-dot-error); }
.node-dot.s-waiting  { background: var(--status-waiting); animation: dotPulse 2.5s infinite; box-shadow: var(--shadow-node-dot-waiting); }
.node-icon { font-size: var(--text-base); }

@keyframes nodeGlow {
    0%, 100% { border-color: color-mix(in srgb, var(--status-running) 25%, transparent); }
    50%      { border-color: color-mix(in srgb, var(--status-running) 40%, transparent); }
}

/* 연결선 — 미세한 트레이스 */
.conn-line {
    fill: none;
    stroke: var(--surface-w3);
    stroke-width: 0.5;
    transition: stroke var(--duration-moderate) ease, stroke-width var(--duration-moderate) ease;
}
.conn-line.hub     { stroke: var(--surface); stroke-width: 0.5; stroke-dasharray: 3 5; }
.conn-line.primary { stroke: var(--surface-w4); stroke-width: 0.8; }
.conn-line.mesh    { stroke: var(--clr-purple-bg-xs); stroke-width: 0.5; stroke-dasharray: 3 4; }
.conn-line.active  { stroke: var(--clr-teal-bg-xl); stroke-width: 1; stroke-dasharray: none; }
.conn-line.mesh.active { stroke: var(--clr-purple-bg-xl); stroke-width: 1; stroke-dasharray: none; }


/* ══════════════════════════════════════════════════════════
   Collapsible Division Sections
   ══════════════════════════════════════════════════════════ */
.division-section {
    margin-bottom: var(--s-4);
    border-radius: var(--radius);
    background: var(--surface-w4);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: background var(--duration-moderate) var(--ease-in-out),
                box-shadow var(--duration-moderate) var(--ease-out),
                border-color var(--duration-moderate) var(--ease-out);
    /* 뷰포트 밖 디비전 렌더링 스킵 — 에이전트 수 많을 때 성능 최적화 */
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.division-section:hover {
    background: var(--surface-w6);
    border-color: var(--line-bold);
    box-shadow: 0 2px 12px var(--shadow-color, rgba(0,0,0,0.08));
}

.division-section.collapsed {
    background: var(--surface-w2);
    border-color: var(--line-faint, var(--line));
}
.division-section.collapsed:hover {
    background: var(--surface-w4);
    border-color: var(--line);
}

/* 디비전 헤더 (base) */
.division-header {
    display: flex;
    align-items: center;
    gap: var(--s-2-5);
    padding: var(--s-3) var(--s-4);
}

/* 접이식 헤더 */
.division-header.clickable {
    cursor: pointer;
    user-select: none;
    transition: background var(--motion-hover), color var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy);
    margin: 0;
    border-radius: var(--radius-s);
}

/* 디비전 이모지/이름/카운트 */
.division-emoji {
    font-size: var(--text-lg);
    flex-shrink: 0;
    line-height: 1;
}

.division-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    transition: color var(--motion-hover);
}
.division-header.clickable:hover .division-name {
    color: var(--accent);
}

.division-count {
    font-size: var(--text-xs);
    color: var(--text-sub);
    margin-left: auto;
    padding: 2px var(--s-2);
    background: var(--surface-w6);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

.division-active-count {
    color: var(--green);
    font-weight: var(--weight-semibold);
    opacity: 1;
    /* v6: 활성 카운트 배경 강조 */
    background: var(--green-bg);
    padding: 1px var(--s-1-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
}

.division-header.clickable:hover  { background: var(--surface-w6); border-radius: var(--radius-s); }
.division-header.clickable:active { background: var(--surface-hover); transform: scale(0.995); transition-duration: var(--duration-instant); }

/* 쉐브론 — 부드러운 회전 */
.division-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--duration-moderate) var(--ease-spring),
                opacity var(--motion-hover);
    opacity: 0.6;
}
.division-chevron svg {
    width: 100%;
    height: 100%;
}

.division-section.collapsed .division-chevron {
    transform: rotate(-90deg);
}
.division-header.clickable:hover .division-chevron { opacity: 0.9; }

/* 디비전 본문 — 부드러운 접기/펼치기 */
.division-body {
    max-height: 2000px;
    opacity: 1;
    transition: max-height var(--duration-moderate) var(--ease-out),
                opacity var(--motion-hover),
                padding var(--motion-hover);
    overflow: hidden;
}

.division-body.hidden {
    display: block !important;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height var(--duration-moderate) var(--ease-in),
                opacity var(--duration-fast) var(--ease-in),
                padding var(--duration-fast) var(--ease-in);
}

/* 접힌 상태 인디케이터 — 미니멀 뱃지 + 팝인 */
.division-collapsed-indicator {
    font-size: var(--text-xs);
    color: var(--accent);
    background: var(--clr-accent-bg-xs);
    padding: 2px var(--s-2);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    white-space: nowrap;

/* #24: 디비전 에러 배지 — 클릭 가능 (클릭 시 해당 디비전 펼침 + 에러 에이전트 하이라이트) */
.division-collapsed-error {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--red);
    background: var(--clr-error-bg-xs);
    padding: 2px var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--clr-error-bg-sm);
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
}
.division-collapsed-error:hover {
    background: var(--clr-error-bg-lg);
    color: var(--clr-error-light);
    transform: translateY(var(--hover-lift-sm));
}
/* #24: 에러 에이전트 하이라이트 — JS에서 .agent-card--error-highlight 토글 (3초) */
.agent-card--error-highlight {
    animation: errorHighlight var(--duration-slower) var(--easing-smooth) 2;
}
@keyframes errorHighlight {
    0%, 100% { box-shadow: 0 0 0 var(--clr-error-transparent); }
    50% { box-shadow: 0 0 12px var(--clr-error-bg-2xl); }
}

.division-collapsed-indicator:empty,
.division-collapsed-error:empty { display: none; }


/* ══════════════════════════════════════════════════════════
   Card Density Modes
   ══════════════════════════════════════════════════════════ */
[data-density="compact"]  { --agent-card-min: 160px; }
[data-density="standard"] { --agent-card-min: 240px; }
[data-density="expanded"] { --agent-card-min: 320px; }

/* Compact */
[data-density="compact"] .agent-card {
    padding: var(--s-2) var(--s-3);
}
[data-density="compact"] .agent-role,
[data-density="compact"] .agent-task,
[data-density="compact"] .agent-time { display: none; }
[data-density="compact"] .agent-name { font-size: var(--text-sm); }
[data-density="compact"] .agent-top  { margin-bottom: 0; }
[data-density="compact"] .agent-card .u-flex-wrap-gap-6,
[data-density="compact"] .agent-card .agent-actions { display: none; }

/* #8: 더보기 메뉴 (리셋 등 파괴적 액션 수납) */
.agent-more-wrap { position: relative; margin-left: auto; }
.agent-more-btn { opacity: 0; transition: opacity var(--motion-hover); pointer-events: none; padding: var(--s-1) var(--s-1); }
.agent-card:hover .agent-more-btn,
.agent-more-btn:focus-visible { opacity: 1; pointer-events: auto; }
.agent-more-menu {
    display: none; position: absolute; right: 0; top: 100%; z-index: 50;
    min-width: var(--s-20);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-dropdown); padding: var(--s-1) 0;
}
/* 드롭다운 메뉴 진입 애니메이션 — scale+fade spring */
.agent-more-menu.open {
    display: block;
    animation: animMenuPopIn var(--duration-base) var(--easing-spring) both;
    transform-origin: top right;
}
@keyframes animMenuPopIn {
    0%   { opacity: 0; transform: scale(0.92) translateY(-4px); }
    60%  { opacity: 1; transform: scale(1.02); }
    100% { transform: none; }
}
.agent-more-item {
    display: block; width: 100%; padding: var(--s-1) var(--s-3);
    background: none; color: var(--text-sub); font-size: var(--text-sm);
    cursor: pointer; text-align: left; transition: background var(--duration-instant) var(--easing-out), color var(--duration-instant) var(--easing-out);
}
.agent-more-item:hover { background: var(--surface-hover); color: var(--text); transform: translateX(2px); }
.agent-more-item:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.agent-more-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-density="compact"] .badge {
    padding: var(--s-1) var(--s-1);
    font-size: var(--text-sm);
}

/* Expanded */
[data-density="expanded"] .agent-card { padding: var(--s-4) var(--s-5); }
[data-density="expanded"] .agent-task { -webkit-line-clamp: 4; }
[data-density="expanded"] .agent-name { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
[data-density="expanded"] .agent-role { font-size: var(--text-base); }
[data-density="expanded"] .agent-time { font-size: var(--text-sm); }

/* 밀도별 모델 배지 */
[data-density="compact"]  .agent-model { display: none; }
[data-density="standard"] .agent-model { font-size: var(--text-sm); padding: var(--s-1) var(--s-2); }
[data-density="expanded"] .agent-model { font-size: var(--text-sm); padding: var(--s-1) var(--s-3); }
.agent-model:empty { display: none; }

/* 에이전트 영문 ID 라벨 (한국어명 옆 소형 표시) — 신규 사용자 UX */
.agent-id-label {
    font-size: var(--text-sm);
    color: var(--text-sub); /* WCAG AA: 카드 내부 가독성 확보 */
    font-family: var(--font-mono);
    margin-left: var(--s-1);
    opacity: 0.7;
}
[data-density="compact"] .agent-id-label { display: none; }
[data-density="expanded"] .agent-id-label { font-size: var(--text-sm); }

/* 에이전트 역할 설명 가시성 개선 — 신규 사용자가 역할을 쉽게 파악 */
.agent-card .agent-role {
    color: var(--text-sub);
    line-height: var(--leading-snug);
}


/* ══════════════════════════════════════════════════════════
   Rate Limit 재시도 버튼 (에이전트 카드 내)
   ══════════════════════════════════════════════════════════ */
.agent-card-retry-btn {
    border: none;
    background: var(--amber-bg);
    color: var(--amber);
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    line-height: var(--leading-none);
    animation: retryPulse 2s infinite;
    transition: background var(--motion-hover);
}
.agent-card-retry-btn:hover  { background: var(--clr-warning-bg-lg); transform: translateY(var(--hover-lift-sm)); }
.agent-card-retry-btn:active { background: var(--clr-warning-bg-xl); transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); }
.agent-card-retry-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }




/* ══════════════════════════════════════════════════════════
   Add Agent Card (+ 새 에이전트 추가)
   ══════════════════════════════════════════════════════════ */
.add-agent-grid {
    margin-top: var(--s-2);
}

.add-agent-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: var(--s-2);
    min-height: var(--s-9-5);
    border: 1px dashed var(--line-bold);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    transition: border-color var(--duration-moderate) var(--ease-out),
                color var(--duration-moderate) var(--ease-out),
                background var(--duration-moderate) var(--ease-out),
                transform var(--duration-base) var(--ease-spring);
}
.add-agent-card:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}
.add-agent-card:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.add-agent-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.add-agent-icon {
    font-size: var(--text-lg);
    opacity: 0.4;
    transition: opacity var(--motion-hover);
    line-height: var(--leading-none);
}
.add-agent-card:hover .add-agent-icon { opacity: 0.8; transform: translateY(var(--hover-lift-sm)); }

.add-agent-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    opacity: 0.7;
}
.add-agent-card:hover .add-agent-label { opacity: 1; transform: translateY(var(--hover-lift-sm)); }

/* ══════════════════════════════════════════════════════════
   3-F1: 확장 상태 배지 — retrying / circuit-open / fallback
   ══════════════════════════════════════════════════════════ */
/* retrying 카드 — 노란색 펄스 (statusPulse 통합) */
.agent-card.s-retrying {
    box-shadow: var(--shadow-card-retrying-faint);
}
.agent-card.s-retrying .agent-name { color: var(--amber); }
.agent-card.s-retrying .agent-status-dot {
    background: var(--amber);
    animation: statusPulse 1.2s var(--ease-in-out) infinite;
}

/* circuit-open 카드 — 에러 강조 */
.agent-card.s-circuit-open {
    box-shadow: var(--shadow-card-circuit-faint);
    opacity: 0.75;
}
.agent-status-dot.s-circuit-open {
    background: var(--status-error);
    animation: statusPulse 2s var(--ease-in-out) infinite;
}

/* fallback 카드 — accent-deep (토큰 통일) */
.agent-card.s-fallback {
    box-shadow: var(--shadow-card-fallback-faint);
}
.agent-card.s-fallback .agent-name { color: var(--accent-deep); }
.agent-card.s-fallback .agent-status-dot {
    background: var(--accent-deep);
    animation: statusPulse 1.5s var(--ease-in-out) infinite;
}

/* 상태 배지 */
.badge--retrying { background: var(--clr-warning-bg); color: var(--status-warning); }
.badge--circuit-open { background: var(--clr-error-bg); color: var(--status-error); }
.badge--fallback { background: var(--accent-dim); color: var(--accent-deep); }

/* 통합 펄스 애니메이션 — retrying(1.2s) / fallback(1.5s) / circuit-open(2s) 공유 */
@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ══════════════════════════════════════════════════════════
   3-E: Progressive Disclosure — 대기 에이전트 접기/펼치기
   ══════════════════════════════════════════════════════════ */
.idle-agents-toggle {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    margin-top: var(--s-2);
    background: none;
    color: var(--text-sub);
    font-size: var(--text-sm, 12px);
    cursor: pointer;
    transition: color var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy);
    width: 100%;
    justify-content: center;
}
.idle-agents-toggle:hover {
    color: var(--accent);
    transform: translateY(var(--hover-lift-sm));
}
.idle-agents-toggle:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.idle-agents-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.idle-agents-toggle svg {
    transition: transform var(--duration-base) var(--easing-spring);
}
.idle-agents-toggle.expanded svg {
    transform: rotate(90deg);
}
.agent-card.agent-idle-hidden {
    display: none;
}

/* ══════════════════════════════════════════════════════════
   3-G: 에이전트 카드 Tooltip (신규 사용자 UX — Phase 1)
   ══════════════════════════════════════════════════════════ */
/* 카드에 overflow: visible 허용 (hover 시 tooltip 표시용) */
.agent-card[data-tooltip]:hover {
    overflow: visible;
    transform: translateY(var(--hover-lift-sm));
}
.agent-card[data-tooltip]::after {
    display: block;
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-tooltip);
    background: var(--bg-raised);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-popover);
    max-width: var(--layout-lg);
    white-space: normal;
    pointer-events: none;
    /* hover-lift-premium::after 누출 차단 (top/right/height/animation) */
    top: auto;
    right: auto;
    height: auto;
    animation: none;
    opacity: 0;
    transition: opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy);
    transform: translateX(-50%) translateY(4px);
}
/* 화살표 제거 — ::before는 shimmer(L40)가 점유.
   tooltip은 ::after만 사용. box-shadow(--shadow-popover)로 충분한 시각 분리. */
/* hover 시 표시 (0.4s 딜레이) — tooltip ::after + shimmer ::before 공존 */
.agent-card[data-tooltip]:hover::after {
    opacity: 1;
    transition-delay: 0.4s;
    transform: translateX(-50%) translateY(0);
}
/* compact 밀도에서는 tooltip 비활성 (공간 부족) — ::before(shimmer)는 유지 */
.density-compact .agent-card[data-tooltip]::after {
    display: none;
}
/* 카드 좌측 끝/우측 끝에서 overflow 방지 */
.division-grid .agent-card[data-tooltip]:first-child::after {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.division-grid .agent-card[data-tooltip]:first-child:hover::after {
    transform: translateX(0) translateY(0);
}
/* 화살표 ::before 제거됨 — first-child 위치 보정 불필요 */

/* ══════════════════════════════════════════════════════════
   3-H: 상태 배지 시각적 강화 (Phase 1 — components.css 기본 투명 override)
   ══════════════════════════════════════════════════════════ */
/* 기본 상태: 배경 없이 text-sub (WCAG AA 보정 완료, components.css 기본 유지) */
/* working 상태 — accent 톤 */
.agent-status-badge.badge--info {
    background: color-mix(in srgb, var(--status-running) 10%, transparent);
    color: var(--status-running);
}
/* 완료 상태 — 녹색 톤 */
.agent-status-badge.badge--success {
    background: color-mix(in srgb, var(--status-complete) 10%, transparent);
    color: var(--status-complete);
}
/* 에러 상태 — 적색 톤 */
.agent-status-badge.badge--error {
    background: var(--clr-error-bg-xs);
    color: var(--status-error);
}
/* 리뷰/경고 상태 — 앰버 톤 */
.agent-status-badge.badge--warning {
    background: var(--clr-warning-bg-xs);
    color: var(--status-warning);
}
/* 상태 배지 공통: 패딩·라운드 추가 (기존엔 텍스트만) */
.agent-status-badge.badge--info,
.agent-status-badge.badge--success,
.agent-status-badge.badge--error,
.agent-status-badge.badge--warning,
.badge--retrying,
.badge--circuit-open,
.badge--fallback {
    padding: 1px var(--s-1-5);
    border-radius: var(--radius-pill, 999px);
    font-weight: var(--weight-medium);
    /* §33 상태 모프 트랜지션 — 배경색+색상 부드럽게 전환 */
    transition: background-color var(--duration-spring) var(--easing-spring-bouncy),
                color var(--duration-spring) var(--easing-spring-bouncy),
                transform var(--duration-fast) var(--easing-spring-bouncy);
}

/* §33 상태 뱃지 등장 팝 — JS에서 morph-transition 토글 시 */
.agent-status-badge.morph-pop {
    animation: animBadgePop var(--duration-spring) var(--easing-spring-bouncy);
}
@keyframes animBadgePop {
    0%   { transform: scale(0.7); opacity: 0.5; }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════
   §40 프리미엄 에이전트 카드 마이크로 인터랙션
   ═══════════════════════════════════════════ */

/* ── §40-1 상태 뱃지 팝인 — 새 상태 진입 시 스프링 바운스 ── */
.agent-status-badge.badge-pop-in {
    animation: animBadgePopIn var(--duration-spring) var(--easing-spring-bouncy);
}
@keyframes animBadgePopIn {
    0%   { transform: scale(0); opacity: 0; }
    40%  { transform: scale(1.2); opacity: 1; }
    65%  { transform: scale(0.9); }
    80%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ── §40-2 토글 글로우 — 토글 활성화 시 미세한 글로우 확산 ── */
.agent-card.toggle-glow {
    animation: animToggleGlow var(--duration-moderate) var(--easing-out);
}
@keyframes animToggleGlow {
    0%   { box-shadow: 0 0 0 0 var(--clr-accent-bg-sm); }
    50%  { box-shadow: 0 0 12px 2px var(--clr-accent-bg-sm); }
    100% { box-shadow: none; }
}

/* ── §40-3 색상 모프 — 상태별 배경색 부드러운 전환 ── */
.agent-card.color-morph-success {
    animation: animColorMorphSuccess var(--duration-spring) var(--easing-out);
}
@keyframes animColorMorphSuccess {
    0%   { background-color: var(--bg-raised); }
    30%  { background-color: var(--clr-success-bg-xs, rgba(34,197,94,0.06)); }
    100% { background-color: var(--bg-raised); }
}
.agent-card.color-morph-error {
    animation: animColorMorphError var(--duration-spring) var(--easing-out);
}
@keyframes animColorMorphError {
    0%   { background-color: var(--bg-raised); }
    30%  { background-color: var(--clr-error-bg-xs, rgba(239,68,68,0.06)); }
    100% { background-color: var(--bg-raised); }
}

/* ── §40-4 에이전트 dot 상태 전환 — 크기 팝 ── */
.agent-status-dot.dot-state-change {
    animation: animDotPop var(--duration-fast) var(--easing-spring-bouncy);
}
@keyframes animDotPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(var(--scale-pop-xl)); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .agent-status-badge.badge-pop-in,
    .agent-card.toggle-glow,
    .agent-card.color-morph-success,
    .agent-card.color-morph-error,
    .agent-status-dot.dot-state-change {
        animation: none;
    }
}

/* ═══════════════════════════════════════════
   Container Queries — 컨테이너 너비 기반 반응형
   뷰포트 대신 .content-area 너비에 반응하여
   사이드바·드로워 열림 시에도 자연스럽게 조정.
   ═══════════════════════════════════════════ */

/* 디비전 그리드 컨테이너 지정 */
.division-section {
    container-type: inline-size;
    container-name: division;
}

/* 좁은 컨테이너 (<480px) — 카드 1열 */
@container content (max-width: 480px) {
    .division-grid {
        grid-template-columns: 1fr;
    }
}

/* 중간 컨테이너 (480~720px) — 카드 최소 200px */
@container content (min-width: 481px) and (max-width: 720px) {
    .division-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* 넓은 컨테이너 (>720px) — 기본 유지, 카드 최소 220px */
@container content (min-width: 721px) {
    .division-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--agent-card-min, 220px), 1fr));
    }
}

/* ── agentsgrid Container Query (A1) ──
   #agent-grid 자체 너비에 반응하여 디비전 그리드 조정.
   사이드바/드로워 개폐 시 content CQ보다 정밀한 반응 제공. */
@container agentsgrid (max-width: 480px) {
    .division-grid {
        grid-template-columns: 1fr;
        gap: var(--s-1);
    }
    .division-header {
        padding: var(--s-1);
    }
}
@container agentsgrid (min-width: 481px) and (max-width: 640px) {
    .division-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}
@container agentsgrid (min-width: 641px) and (max-width: 960px) {
    .division-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ══════════════════════════════════════════════════════════
   Responsive Breakpoints — 뷰포트 기반 반응형
   ══════════════════════════════════════════════════════════ */

/* ── 960px: 태블릿 가로 ── */
@media (max-width: 960px) {
    .division-grid {
        --agent-card-min: 200px;
        gap: var(--s-1-5);
    }
    .division-header {
        padding: var(--s-1) var(--s-2);
    }
    /* 에이전트 카드 shimmer 범위 축소 — 성능 */
    .agent-card::before {
        background: radial-gradient(
            circle 100px at var(--mouse-x, -50%) var(--mouse-y, 50%),
            var(--surface-w15) 0%,
            transparent 60%
        );
    }
    /* 추가 카드 — 라벨 축소 */
    .add-agent-card {
        min-height: calc(var(--s-8) + var(--s-1));
        gap: var(--s-1);
    }
    /* 더보기 메뉴 — 항상 표시 (터치 기기 대응) */
    .agent-more-btn {
        opacity: 0.6;
        pointer-events: auto;
    }
}

/* ═══════════════════════════════════════════
   Premium Agent Polish (Wave A)
   에이전트 그리드 마이크로 인터랙션 향상
   ═══════════════════════════════════════════ */

/* ── 디비전 헤더 — 호버 시 구분선 강조 ── */
.division-header.clickable:hover .division-name {
    color: var(--text);
    transition: color var(--motion-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 활성 카운트 변경 시 스프링 범프 ── */
.division-active-count {
    transition: transform var(--duration-fast) var(--easing-spring),
                background var(--motion-hover);
}
.division-active-count.count-changed {
    animation: animCountBumpPremium var(--duration-spring) var(--easing-spring);
}
@keyframes animCountBumpPremium {
    0%   { transform: none; filter: brightness(1); }
    25%  { transform: scale(1.3) translateY(-2px); filter: brightness(1.2); }
    50%  { transform: scale(0.95); filter: brightness(1); }
    75%  { transform: scale(1.05); }
    100% { transform: none; }
}

/* ── 에이전트 카드 상태 전환 — 역할 분리 (T1 이후) ──
   transition 선언: animations.css (transform/box-shadow/background/border-color)
   hover/active transform: components.css (단일 정의 원본)
   여기서 transition/transform 재선언 금지 — 충돌 방지. */

/* ── §35 상태 전환 시 프리미엄 글로우 플래시 ── */
.agent-card.state-just-changed {
    animation: animStateGlowFlash var(--duration-spring) var(--easing-spring);
}
@keyframes animStateGlowFlash {
    0%   { box-shadow: 0 0 0 0 currentColor; filter: brightness(1); }
    20%  { box-shadow: 0 0 20px 4px currentColor; filter: brightness(1.08); }
    50%  { box-shadow: 0 0 8px 1px currentColor; filter: brightness(1.02); }
    100% { box-shadow: none; filter: none; }
}

/* ── §35 에이전트 이름 — 작업 중 생동감 글로우 ── */
.agent-card.s-working .agent-name {
    text-shadow: 0 0 16px var(--clr-accent-bg-strong);
    transition: text-shadow var(--duration-moderate) var(--easing-out),
                color var(--duration-moderate) var(--easing-out);
}
/* .agent-card.s-working animation → animations.css L1083 단일 권위
   (animAliveGlow + animPremiumPulse). 여기서 재선언 금지 — cascade 충돌 방지. */

/* ── 에이전트 태스크 텍스트 — 새 작업 진입 시 페이드 ── */
.agent-task {
    transition: opacity var(--motion-hover);
}
.agent-task.task-entering {
    animation: animTaskFadeIn var(--duration-base) var(--easing-out);
}
@keyframes animTaskFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ── 노드 그래프 진입 — 부드러운 스케일 업 ── */
.node-graph-wrap {
    animation: animGraphFadeIn var(--duration-moderate) var(--easing-out) both;
}
@keyframes animGraphFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .agent-card {
        transform: none !important;
    }
    .agent-card.state-just-changed,
    .agent-card.s-working,
    .division-active-count.count-changed,
    .agent-task.task-entering,
    .node-graph-wrap {
        animation: none !important;
    }
    .agent-card.s-working .agent-name {
        text-shadow: none;
    }
}

/* ── 1024px: 태블릿 가로/세로 전환 ── */
@media (max-width: 1024px) {
    .division-grid {
        --agent-card-min: 210px;
        gap: var(--s-1-5);
    }
    .division-header {
        padding: var(--s-1-5) var(--s-2);
    }
    /* shimmer 반경 축소 — 터치 정밀도 낮음 */
    .agent-card::before {
        background: radial-gradient(
            circle 120px at var(--mouse-x, -50%) var(--mouse-y, 50%),
            var(--surface-w15) 0%,
            transparent 55%
        );
    }
    /* 디비전 간 간격 조정 */
    .division-section + .division-section {
        margin-top: var(--s-1);
    }
}

/* ── 768px: 태블릿 세로 ── */
@media (max-width: 768px) {
    .division-grid {
        --agent-card-min: 180px;
        gap: var(--s-1);
        padding: var(--s-1);
    }
    .agent-card {
        contain-intrinsic-size: auto 140px;
    }
    .node-graph-wrap { display: none; }
    /* shimmer 비활성 — 터치 기기에서 불필요 */
    .agent-card::before { display: none; }
    /* 더보기 메뉴 — 항상 표시 */
    .agent-more-btn {
        opacity: 1;
        pointer-events: auto;
    }
    /* 더보기 팝업 — 고정 위치 */
    .agent-more-menu {
        position: fixed;
        right: var(--s-3);
        bottom: var(--s-3);
        top: auto;
        left: var(--s-3);
        min-width: auto;
        z-index: var(--z-modal, 1000);
        border-radius: var(--radius-s);
    }
    /* 추가 카드 축소 */
    .add-agent-card {
        min-height: var(--s-8);
    }
    .add-agent-label { font-size: var(--text-sm); }
    /* 대기 에이전트 토글 — 간격 축소 */
    .idle-agents-toggle {
        padding: var(--s-1) var(--s-2);
        font-size: var(--text-sm);
    }
    /* 토글 목록 더보기 아이콘 크기 줄임 */
    .idle-agents-toggle svg { width: var(--s-3-5); height: var(--s-3-5); }
    /* 에이전트 카드 리트라이 버튼 — 터치 편의 */
    .agent-card-retry-btn {
        padding: var(--s-1) var(--s-3);
        font-size: var(--text-sm);
    }
    /* 상태 배지 — 터치 기기 가독성 확보 */
    .agent-status-badge.badge--info,
    .agent-status-badge.badge--success,
    .agent-status-badge.badge--error,
    .agent-status-badge.badge--warning,
    .badge--retrying,
    .badge--circuit-open,
    .badge--fallback {
        font-size: var(--text-sm);
    }
    /* 툴팁 — 터치 기기에서 비활성 (호버 없음) */
    .agent-card[data-tooltip]::after { display: none; }
}

/* ── 640px: 모바일 가로 ── */
@media (max-width: 640px) {
    .division-grid {
        --agent-card-min: 160px;
        padding: var(--s-0-5) var(--s-1);
    }
    .division-name {
        font-size: var(--text-sm);
    }
    .division-header {
        gap: var(--s-1);
    }
    /* 추가 카드 — 라벨 숨김, 아이콘만 */
    .add-agent-label { display: none; }
    .add-agent-card {
        min-height: var(--s-8-5);
        flex-direction: row;
    }
    /* 카운트/배지 타이트닝 */
    .division-count { font-size: var(--text-sm); }
    .division-active-count { font-size: var(--text-sm); }
    /* 에이전트 ID 라벨 숨김 */
    .agent-id-label { display: none; }
    /* 접힌 디비전 인디케이터 축소 */
    .division-collapsed-indicator { gap: var(--s-1); }
    /* 에러 하이라이트 접힌 표시 축소 */
    .division-collapsed-error { font-size: var(--text-sm); padding: var(--s-1) var(--s-1); }
}

/* ── 375px: 모바일 세로 ── */
@media (max-width: 375px) {
    .division-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--s-1);
    }
    .division-header {
        padding: var(--s-1);
    }
    #agent-grid {
        gap: var(--s-1);
    }
    /* 에이전트 역할 텍스트 숨김 — 공간 절약 */
    .agent-card .agent-role { display: none; }
    /* 에이전트 카드 stagger 비활성 — 성능 */
    .agent-card { animation-delay: 0s !important; }
    /* 대기 에이전트 토글 — 풀 너비 */
    .idle-agents-toggle {
        padding: var(--s-1);
        margin-top: var(--s-1);
    }
    /* 디비전 섹션 margin 축소 */
    .division-section { margin-bottom: var(--s-1); }
    /* 밀도 모드 무시 — 375px에서는 standard 강제 */
    [data-density="expanded"] .agent-card { padding: var(--s-2) var(--s-3); }
    [data-density="expanded"] .agent-name { font-size: var(--text-base); }
    [data-density="expanded"] .agent-task { -webkit-line-clamp: 2; }
}

/* ── Command Job Queue D&D 상태 (topbar-q/sq 패턴 동일) ── */
.cj-queued-draggable {
    transition: transform var(--duration-base) var(--ease-out, ease-out),
                box-shadow var(--duration-base) var(--ease-out, ease-out),
                background var(--duration-exit) var(--easing-out);
}
.cj-dragging {
    /* opacity → drag-source-dim 클래스가 제어 (dndApplyGhostLift) */
    box-shadow: var(--shadow-drag) !important;
    background: var(--bg) !important;
    transform: scale(1.02);
    z-index: 10;
}
.cj-drag-over-top {
    background: linear-gradient(180deg, var(--surface-active) 0%, transparent 60%) !important;
    box-shadow: var(--shadow-tab-active-top);
}
.cj-drag-over-bottom {
    background: linear-gradient(0deg, var(--surface-active) 0%, transparent 60%) !important;
    box-shadow: var(--shadow-tab-active);
}
@media (prefers-reduced-motion: reduce) {
    .cj-queued-draggable { transition: none; }
    .cj-dragging { transform: none; }
}

/* ═══════════════════════════════════════════
   §38  프리미엄 인터랙션 보강
   ═══════════════════════════════════════════ */

/* §38-1  s-working 호버 강화 (animation은 animations.css L1083 단일 권위) */
.agent-card.s-working:hover {
    box-shadow: var(--glow-premium-strong), 0 0 20px var(--accent-glow), var(--shadow-medium);
}

/* §38-2  overlay backdrop blur — glass 토큰 사용 */
.drawer-overlay.open,
.job-drawer-overlay.open {
    backdrop-filter: var(--glass-blur-sm) saturate(120%);
    -webkit-backdrop-filter: var(--glass-blur-sm) saturate(120%);
}

/* §38-3  division-body 부드러운 접기/펼치기 */
.division-body {
    transition: max-height var(--duration-moderate) var(--easing-out),
                opacity var(--duration-base) var(--easing-out);
}

/* §38-4  welcome 카드 stagger 진입 */
.welcome-team-card {
    animation: animContentEnterUp var(--duration-moderate) var(--easing-spring) both;
}
.welcome-team-card:nth-child(1) { animation-delay: 100ms; }
.welcome-team-card:nth-child(2) { animation-delay: 200ms; }

/* §38-5  stat 숫자 변경 pop */
.stat-value-pop {
    animation: animValuePop var(--duration-base) var(--easing-spring);
}

/* §38-6  topbar 작업 칩 spring pop-in */
.topbar-job-chip {
    animation: animSpringScaleIn var(--duration-spring) var(--easing-spring) both;
}

@media (prefers-reduced-motion: reduce) {
    .agent-card.s-working { animation: none; }
    .welcome-team-card { animation: none; }
    .stat-value-pop { animation: none; }
    .topbar-job-chip { animation: none; }
    .division-body { transition: none; }
    .drawer-overlay.open,
    .job-drawer-overlay.open {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ═══════════════════════════════════════════
   §  모달 + 퀵에디트 유틸리티 클래스
   ═══════════════════════════════════════════ */
.modal-sm { max-width: 520px; width: 90vw; }
.modal-body {
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.modal-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
}
.u-m0 { margin: 0; }

/* 퀵에디트 폼 */
.qedit-note {
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.qedit-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.qedit-input {
    width: 100%;
    margin-top: var(--s-1);
    padding: var(--s-2);
    background: var(--bg);
    border: 1px solid var(--surface-w10);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--text-sm);
}
.qedit-input-mono { font-family: var(--font-mono); flex: 1; }
.qedit-cwd-custom-wrap {
    margin-top: var(--s-1);
    gap: var(--s-1);
    align-items: center;
}

/* ── 에이전트 에러 상세 ── */
.agent-error-detail {
    margin-top: var(--s-1);
    padding: var(--s-1);
    background: var(--clr-error-bg-xs);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.error-cause { color: var(--status-error); }
.error-actions {
    display: flex;
    gap: var(--s-1);
    margin-top: var(--s-1);
}