/* ══════════════════════════════════════════════════════════
   home-glass.css — 홈 탭 Liquid Glass 스타일
   design-knowledge.md + tokens.css 기반. !important 금지.
   ══════════════════════════════════════════════════════════ */


/* ── Agent Card V2 ── */
.agent-card-v2 {
    position: relative;
    overflow: hidden;
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    min-height: 120px;
}

.agent-card-v2 .sheen-layer {
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        var(--clr-accent-bg-xs), transparent 40%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease-out;
}

.agent-card-v2:hover .sheen-layer {
    opacity: 1;
}

/* 상태별 좌측 바 */
.agent-card-v2::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--s-3);
    bottom: var(--s-3);
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--text-faint);
    opacity: 0.5;
    transition: background 200ms ease-out, opacity 200ms ease-out;
}

.agent-card-v2.s-working::before { background: var(--accent); opacity: 1; }
.agent-card-v2.s-error::before { background: var(--red); opacity: 1; }
.agent-card-v2.s-complete::before { background: var(--green); opacity: 1; }
.agent-card-v2.s-retrying::before { background: var(--amber); opacity: 1; }
.agent-card-v2.s-circuit-open::before { background: var(--red); opacity: 0.7; }
.agent-card-v2.s-fallback::before { background: var(--purple); opacity: 1; }
.agent-card-v2.s-reviewing::before { background: var(--amber); opacity: 0.8; }
.agent-card-v2.rate-limited::before { background: var(--red); opacity: 1; }

/* working 상태 좌측 바 pulse */
.agent-card-v2.s-working::before {
    animation: bar-pulse 2s ease-in-out infinite;
}

@keyframes bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Agent Top Row ── */
.agent-card-v2 .agent-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 24px;
}

.agent-card-v2 .agent-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-faint);
    transition: background 200ms ease-out;
}

.agent-card-v2 .agent-status-dot.s-working { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.agent-card-v2 .agent-status-dot.s-error { background: var(--red); }
.agent-card-v2 .agent-status-dot.s-complete { background: var(--green); }
.agent-card-v2 .agent-status-dot.s-waiting { background: var(--text-faint); }
.agent-card-v2 .agent-status-dot.s-idle { background: var(--text-faint); }
.agent-card-v2 .agent-status-dot.s-retrying { background: var(--amber); }
.agent-card-v2 .agent-status-dot.s-circuit-open { background: var(--red); }
.agent-card-v2 .agent-status-dot.s-fallback { background: var(--purple); }
.agent-card-v2 .agent-status-dot.s-reviewing { background: var(--amber); }

.agent-card-v2 .agent-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    letter-spacing: var(--tracking-tight);
}

.agent-card-v2 .agent-id-label {
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wide);
}

.agent-card-v2 .agent-model {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 2px var(--s-1-5);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.agent-card-v2 .model-opus { background: var(--purple-bg); color: var(--purple-light); }
.agent-card-v2 .model-sonnet { background: var(--teal-bg); color: var(--accent); }
.agent-card-v2 .model-haiku { background: var(--gray-bg); color: var(--gray-light); }
.agent-card-v2 .model-codex { background: var(--blue-bg); color: var(--blue-light); }

.agent-card-v2 .agent-status-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 2px var(--s-1-5);
    border-radius: var(--radius-pill);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Agent Body ── */
.agent-card-v2 .agent-role {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agent-card-v2 .agent-task {
    font-size: var(--text-sm);
    color: var(--accent);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: var(--s-1) var(--s-2);
    background: var(--accent-bg);
    border-radius: var(--radius-s);
}

.agent-card-v2 .agent-error-detail {
    font-size: var(--text-sm);
    color: var(--red);
    line-height: var(--leading-snug);
    padding: var(--s-1) var(--s-2);
    background: var(--red-bg);
    border-radius: var(--radius-s);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Agent Actions ── */
.agent-card-v2 .agent-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-2);
    border-top: 1px solid var(--line);
}

.agent-card-v2 .agent-time {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-left: auto;
    font-family: var(--font-mono);
}

.agent-card-v2 .agent-rl-hint {
    font-size: var(--text-xs);
    color: var(--red);
    font-family: var(--font-mono);
}

/* ── Squad Section ── */
.squad-section-v2 {
    margin-bottom: var(--s-5);
}

.squad-header-v2 {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 150ms ease-out;
    user-select: none;
}

.squad-header-v2:hover {
    background: var(--surface);
}

.squad-header-v2 .squad-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
}

.squad-header-v2 .squad-count {
    font-size: var(--text-xs);
    color: var(--text-sub);
    font-family: var(--font-mono);
}

.squad-header-v2 .squad-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-faint);
    transition: transform 200ms ease-out;
    flex-shrink: 0;
}

.squad-header-v2.collapsed .squad-chevron {
    transform: rotate(-90deg);
}

.squad-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-3);
    padding: var(--s-2) 0;
}

.squad-grid-v2[data-density="compact"] {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-2);
}

.squad-grid-v2[data-density="wide"] {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--s-4);
}

/* 필터 바 — .glass--light 클래스와 조합 사용 */
.filter-bar-v2 {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-l);
    flex-wrap: wrap;
}

.filter-bar-v2 .filter-segment {
    display: flex;
    gap: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius-pill);
    padding: 2px;
}

.filter-bar-v2 .filter-segment-btn {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 150ms ease-out;
    white-space: nowrap;
}

.filter-bar-v2 .filter-segment-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.filter-bar-v2 .filter-segment-btn.active {
    color: var(--text);
    background: var(--surface-active);
}

.filter-bar-v2 .filter-search {
    flex: 1;
    min-width: 120px;
    max-width: 240px;
    padding: var(--s-1) var(--s-3);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    transition: border-color 150ms ease-out;
}

.filter-bar-v2 .filter-search::placeholder {
    color: var(--text-faint);
}

.filter-bar-v2 .filter-search:focus {
    border-color: var(--accent);
}

/* 설정 바 — .glass--light 클래스와 조합 사용 */
.config-bar-v2 {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-l);
    flex-wrap: wrap;
}
/* KPI 대시보드 — .glass--light 클래스와 조합 사용 */
.kpi-dashboard-v2 {
    border-radius: var(--radius);
    overflow: hidden;
}

.kpi-dashboard-v2 .kpi-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    cursor: pointer;
    transition: background 150ms ease-out;
}

.kpi-dashboard-v2 .kpi-header:hover {
    background: var(--surface);
}

.kpi-dashboard-v2 .kpi-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-2);
    padding: 0 var(--s-4) var(--s-3);
}

.kpi-metric-card {
    padding: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius);
    text-align: center;
    transition: background 150ms ease-out;
}

.kpi-metric-card:hover {
    background: var(--surface-hover);
}

.kpi-metric-card .metric-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
}

.kpi-metric-card .metric-label {
    font-size: var(--text-xs);
    color: var(--text-sub);
    margin-top: var(--s-1);
    letter-spacing: var(--tracking-wide);
}

/* ── Skeleton Card V2 ── */
.skeleton-card-v2 {
    padding: var(--s-4) var(--s-5);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.skeleton-card-v2 .skeleton-line {
    height: 12px;
    background: var(--surface);
    border-radius: var(--radius-s);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-card-v2 .skeleton-line.w-40 { width: 40%; }
.skeleton-card-v2 .skeleton-line.w-60 { width: 60%; }
.skeleton-card-v2 .skeleton-line.w-80 { width: 80%; }
.skeleton-card-v2 .skeleton-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--surface);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.2; }
}

/* 사이드바 글라스 — .glass--light 클래스와 조합 사용 */
.sidebar-glass-v2 {
    border-radius: var(--radius);
    overflow: hidden;
}

.sidebar-tab-bar-v2 {
    display: flex;
    gap: 2px;
    padding: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius-l);
    margin: var(--s-2);
}

.sidebar-tab-v2 {
    flex: 1;
    padding: var(--s-1-5) var(--s-2);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: all 150ms ease-out;
    white-space: nowrap;
}

.sidebar-tab-v2:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.sidebar-tab-v2.active {
    color: var(--text);
    background: var(--surface-w8);
}

/* V2 카드는 .sheen-layer div 사용 → 구 .agent-card::before 시머 비활성화 */
.agent-card.agent-card-v2::before {
    content: none;
}

/* ── Skeleton 헬퍼 클래스 (인라인 스타일 제거용) ── */
.skeleton-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.skeleton-badge {
    margin-left: auto;
    width: var(--s-8);
    height: var(--s-4);
}

/* ── backdrop-filter 활성화: compositing boundary 제거 ──
   agents.css의 contain/will-change/transform + layout.css의 mask-image가
   .glass의 backdrop-filter를 차단함. 홈 탭 V2 카드 전용 해제. */
.agent-card-v2.glass {
    contain: none;
    will-change: auto;
    transform: none;
}
.agent-card-v2.glass:hover {
    transform: perspective(600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--hover-lift)) scale(var(--hover-scale));
    will-change: transform;
}
.agent-card-v2.glass:active {
    transform: perspective(600px) translateY(0) scale(var(--active-scale));
}

/* ── FilterBar V2: 칩 + 구분선 ── */
/* filter-chip-group 제거 — 칩은 bar 직계자식 */



.filter-chip {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 150ms ease-out, background 150ms ease-out;
    white-space: nowrap;
    line-height: var(--leading-snug);
}

.filter-chip:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.filter-chip.active {
    color: var(--text);
    background: var(--surface-active);
}

.filter-divider {
    width: 1px;
    height: var(--s-4);
    background: var(--line);
    flex-shrink: 0;
    margin: 0 var(--s-2);
}


/* ══════════════════════════════════════════════════════════
   KPI Dashboard V2 — Liquid Glass 리디자인
   .glass 유틸리티 클래스로 글래스 효과 적용.
   이 파일에 backdrop-filter 재선언 절대 금지.
   ══════════════════════════════════════════════════════════ */

/* ── 컨테이너 레이아웃 ── */
.kpi-dashboard-v2 {
    border-radius: var(--radius-m);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    transition: opacity var(--duration-moderate) var(--easing-smooth);
}

/* ── 접힌 상태 ── */
.kpi-dashboard-v2.collapsed .kpi-body-v2 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    pointer-events: none;
}

/* ── 헤더 (접기/펼치기 토글) ── */
.kpi-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: var(--s-1) 0;
    border-radius: var(--radius-s);
    transition: background var(--duration-fast) var(--easing-smooth);
}

.kpi-header-v2:hover {
    background: var(--surface-w2);
}

.kpi-header-v2__left {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.kpi-header-v2__right {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-family: var(--font-mono);
}

/* 셰브론 — 기존 kpi.css .kpi-chevron 클래스 재사용 */

/* 타이틀 */
.kpi-title-v2 {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ── 본문 (애니메이션) ── */
.kpi-body-v2 {
    max-height: 800px;
    opacity: 1;
    overflow: hidden;
    padding-top: var(--s-3);
    transition: max-height var(--duration-moderate) var(--easing-smooth),
                opacity var(--duration-moderate) var(--easing-smooth),
                padding-top var(--duration-moderate) var(--easing-smooth);
}

/* kpi.js toggleKpiDashboard()가 .kpi-body-collapsed 클래스를 토글 */
.kpi-body-v2.kpi-body-collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
}

/* ── 메트릭 카드 그리드 ── */
.kpi-metrics-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

/* 개별 메트릭 카드 — .glass .glass 중첩 방지 (부모가 .glass이므로 inner card는 plain) */
.kpi-metrics-v2 .kpi-card {
    background: var(--surface-w2);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: var(--s-2) var(--s-2-5);
    text-align: center;
    transition: background var(--duration-fast) var(--easing-smooth),
                border-color var(--duration-fast) var(--easing-smooth);
}

.kpi-metrics-v2 .kpi-card:hover {
    background: var(--surface-w4);
    border-color: var(--line-bold);
}

/* 중첩 glass 클래스 제거 — V2에서는 kpi-card에 glass 안 붙임
   하지만 kpi.js _kpiRenderCards()가 .glass를 붙이므로 중첩 방지 규칙 보강 */
.kpi-dashboard-v2 .kpi-card.glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* ── 탭 버튼 영역 (수평 스크롤 필 탭) ── */
.kpi-tabs-v2 {
    display: flex;
    gap: var(--s-1);
    overflow-x: auto;
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kpi-tabs-v2::-webkit-scrollbar {
    display: none;
}

/* 탭 버튼 (필 스타일) */
.kpi-tab-btn {
    flex-shrink: 0;
    padding: var(--s-1) var(--s-2-5);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--easing-smooth),
                color var(--duration-fast) var(--easing-smooth),
                border-color var(--duration-fast) var(--easing-smooth);
}

.kpi-tab-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.kpi-tab-btn.active {
    background: var(--surface-active);
    color: var(--text);
    border-color: var(--line-bold);
    font-weight: var(--weight-semibold);
}

/* ── 탭 패널 컨테이너 ── */
.kpi-tab-panels-v2 {
    position: relative;
}

/* 기존 kpi.css의 .kpi-tab-panel 규칙 재사용 — 여기서는 보강만 */
.kpi-tab-panels-v2 .kpi-tab-panel {
    display: none;
}

.kpi-tab-panels-v2 .kpi-tab-panel.active {
    display: block;
}

/* ── 반응형 ── */
@media (max-width: 640px) {
    .kpi-metrics-v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-tabs-v2 {
        gap: var(--s-0-5);
    }

    .kpi-tab-btn {
        padding: var(--s-0-5) var(--s-2);
        font-size: var(--text-2xs);
    }
}

@media (max-width: 420px) {
    .kpi-metrics-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-1);
    }

    .kpi-dashboard-v2 {
        padding: var(--s-2);
    }
}