/* ══════════════════════════════════════════════════════════
   Components — iBots v4 "Steve Jobs Minimalism"
   모든 UI 기본 요소. 셀렉터 깊이 <= 2. 제로 오버라이드.
   "Less is more." — 불필요한 장식 0, 기능에 충실한 형태.
   ══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   0. Global Focus-Visible
   모든 인터랙티브 요소에 통일된 포커스 링 제공.
   키보드 접근성 WCAG 2.4.7 충족.
   ═══════════════════════════════════════════ */
/* 개별 focus-visible 제거됨 — reset.css 전역 catch-all(L77-86)로 통합 */

/* ═══════════════════════════════════════════
   0.5. Typography Utilities — Heading / Label
   프리미엄 타이포그래피 위계. size + weight + leading + tracking 통합.
   Linear/Vercel/Notion 급 시각적 위계 구현.
   ═══════════════════════════════════════════ */
.heading-2xl {
    font-size: var(--text-2xl-fluid);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tightest);
    color: var(--text);
}
.heading-xl {
    font-size: var(--text-xl-fluid);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text);
}
.heading-lg {
    font-size: var(--text-title-fluid);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text);
}
.heading-md {
    font-size: var(--text-lg-fluid);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}
.heading-sm {
    font-size: var(--text-base-fluid);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}
.heading-xs {
    font-size: var(--text-sm-fluid);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}

/* 라벨 유틸리티 — uppercase 캡션/뱃지 */
.label-caps {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
}
.label-caps-sm {
    font-size: var(--text-3xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-sub);
}

/* 본문 유틸리티 — body 텍스트 위계 (size + leading + tracking 통합) */
.body-lg {
    font-size: var(--text-reading-fluid);
    font-weight: var(--weight-normal);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}
.body-md {
    font-size: var(--text-body-fluid);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}
.body-sm {
    font-size: var(--text-sm-fluid);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-sub);
}

/* 캡션 유틸리티 — 보조 정보, 타임스탬프, 메타데이터 */
.caption {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub);
}
.caption-sm {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
}

/* 오버라인 유틸리티 — 섹션 라벨, 카테고리 태그 */
.overline {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-spaced);
    text-transform: uppercase;
    color: var(--text-sub);
}

/* ═══════════════════════════════════════════
   1. Button
   ═══════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    color: var(--text);
    background: var(--surface);
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--motion-hover);
    white-space: nowrap;
    line-height: var(--leading-none);
}

.btn:hover { background: var(--surface-hover); box-shadow: var(--shadow-soft); transform: translateY(var(--hover-lift-sm)) scale(1.02); }
.btn:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); box-shadow: none; }
.btn:disabled { opacity: 0.35; pointer-events: none; filter: grayscale(0.4); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.btn:hover:focus-visible { box-shadow: var(--shadow-soft), var(--shadow-focus-ring); transform: translateY(var(--hover-lift-sm)); }

/* Flat 버튼 변형 — ghost / fill / sm / accent / danger / lg / icon */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--motion-hover);
    white-space: nowrap;
    line-height: var(--leading-none);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); box-shadow: var(--shadow-subtle); transform: translateY(var(--hover-lift-sm)) scale(1.02); }
.btn-ghost:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.btn-ghost:disabled { opacity: 0.35; pointer-events: none; filter: grayscale(0.4); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.btn-ghost:hover:focus-visible { box-shadow: var(--shadow-subtle), var(--shadow-focus-ring); transform: translateY(var(--hover-lift-sm)); }

.btn-fill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--motion-hover);
    white-space: nowrap;
    line-height: var(--leading-none);
}
.btn-fill:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)) scale(1.02); box-shadow: var(--shadow); }
.btn-fill:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.btn-fill:disabled { opacity: 0.35; pointer-events: none; filter: grayscale(0.4); }
.btn-fill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.btn-fill:hover:focus-visible { box-shadow: var(--shadow), var(--shadow-focus-ring); transform: translateY(var(--hover-lift-sm)); }

.btn-sm { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); }

.btn-accent { background: var(--accent-dim); color: var(--accent); border: none; position: relative; overflow: hidden; }
.btn-accent::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, var(--surface-w8) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform var(--duration-slower) var(--easing-out);  /* 600ms — 시머 스윕 */
}
.btn-accent:hover { background: var(--surface-w20); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-accent-hover-combo), var(--glow-premium); }
.btn-accent:hover::before { transform: translateX(100%); }

/* ── .btn-magnetic — 마그네틱 호버 대상 마커 ──
   JS initMagneticButtons()가 mousemove 이벤트 위임으로 자동 처리.
   will-change: transform으로 GPU 레이어 사전 확보 + 복귀 트랜지션 토큰화.
   화이트리스트: .btn-accent, .btn-cta, .topbar-icon-btn에만 적용 권장. */
.btn-magnetic,
.magnetic-btn {
    will-change: transform;
    transition: transform var(--magnetic-return, 400ms) var(--easing-spring);
}

/* ── 마그네틱 강도 세분화 (JS가 getComputedStyle(btn)으로 읽을 때 활성화) ── */
.btn-accent.btn-magnetic,
.btn-accent.magnetic-btn,
.btn-cta.btn-magnetic,
.btn-cta.magnetic-btn {
    --magnetic-strength: var(--magnetic-strength-cta);  /* 0.35 — CTA 강조 */
}
.topbar-icon-btn.btn-magnetic,
.topbar-icon-btn.magnetic-btn {
    --magnetic-strength: var(--magnetic-strength-nav);  /* 0.2 — 네비 미세 */
}

.btn-active { background: var(--surface-active); color: var(--text); border-color: var(--line-bold); }

.btn-danger { background: var(--red-bg); color: var(--red); border-color: transparent; }
.btn-danger:hover { background: var(--clr-error-bg-lg); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow); }

.btn-xs { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); }

.btn-lg { padding: var(--s-3) var(--s-5); font-size: var(--text-base); }

.btn-icon {
    width: var(--s-6);
    height: var(--s-6);
    padding: 0;
    border-radius: var(--radius-s);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy);
    /* 터치 타겟 44px 보장 — 시각적 크기 유지, 히트 영역 확장 */
    position: relative;
}
/* 투명 ::after로 44px 최소 터치 영역 확보 (WCAG 2.5.8) */
.btn-icon::after {
    content: "";
    position: absolute;
    inset: -6px; /* (44 - 32) / 2 = 6px */
    border-radius: var(--radius-s);
}
.btn-icon:hover { background: var(--surface-hover); color: var(--text); box-shadow: var(--shadow-subtle); transform: translateY(var(--hover-lift-sm)); }
.btn-icon:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); box-shadow: none; }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.btn-icon:hover:focus-visible { box-shadow: var(--shadow-subtle), var(--shadow-focus-ring); transform: translateY(var(--hover-lift-sm)); }
.btn-icon.btn-sm { width: var(--s-5); height: var(--s-5); }
.btn-icon.btn-sm::after { inset: -10px; /* (44 - 24) / 2 = 10px */ }

/* ═══════════════════════════════════════════
   2. Tags / Badges / Counts / Status
   ═══════════════════════════════════════════ */

/* Tag */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    background: var(--surface);
    color: var(--text-sub);
    line-height: var(--leading-snug);
    transition: background-color var(--motion-hover), color var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy);
}
.tag:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.tag:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* Count */
.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--s-4-5);
    height: var(--s-4-5);
    padding: 0 var(--s-1);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    color: var(--text-sub);
    line-height: var(--leading-none);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    background: var(--surface);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    transition: background var(--duration-moderate) var(--ease-in-out),
                color var(--duration-moderate) var(--ease-in-out);
}

.badge--default { background: var(--surface); color: var(--text-sub); }
.badge--success { background: var(--green-bg); color: var(--green); }
.badge--error   { background: var(--red-bg); color: var(--red); }
.badge--warning { background: var(--amber-bg); color: var(--amber); }
.badge--info    { background: var(--teal-bg); color: var(--teal); }
.badge--accent  { background: var(--accent-dim); color: var(--accent); }
.badge--purple  { background: var(--purple-bg); color: var(--purple); }

/* 소형 배지 — 계정 상태, 인라인 라벨 */
.badge--sm {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1-5);
}

/* 마이크로 진행바 — 슬롯/CLI 사용률 등 인라인 표시용 */
.micro-bar {
    height: 3px;
    background: var(--surface-w6);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.micro-bar__fill {
    height: 100%;
    border-radius: var(--radius-s);
    transition: width var(--anim-smooth) var(--ease-out);
}

/* 뱃지 상태 전환 시 부드러운 색상 모핑 */
.badge[class*="s-"] {
    transition: background var(--duration-moderate) var(--ease-in-out),
                color var(--duration-moderate) var(--ease-in-out),
                transform var(--duration-base) var(--easing-spring);
}

/* Job 상태 badge (drawer 내부 등) */
.badge.s-triaging { background: var(--status-triaging-bg); color: var(--status-triaging); }
.badge.s-waiting-input { background: var(--status-input-bg); color: var(--status-input); }
.badge.s-running { background: var(--status-running-bg); color: var(--status-running); }
.badge.s-complete { background: var(--status-complete-bg); color: var(--status-complete); }
.badge.s-error { background: var(--status-error-bg); color: var(--status-error); }
.badge.s-interrupted { background: var(--status-interrupted-bg); color: var(--status-interrupted); }
.badge.s-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); }
.badge.s-queued { background: var(--status-queued-bg); color: var(--status-queued); }
.badge.s-rate-limit-paused { background: var(--status-waiting-bg); color: var(--status-warning); }
.badge.s-reviewing { background: var(--status-reviewing-bg); color: var(--status-reviewing); }
.badge.s-frozen { background: var(--status-frozen-bg); color: var(--status-frozen); }

/* Status badge — 호버 시 미세 스케일 팝 + 부유 그림자 (프리미엄 인터랙션) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    transition: background-color var(--duration-moderate) var(--ease-in-out),
                color var(--duration-moderate) var(--ease-in-out),
                transform var(--duration-base) var(--easing-spring),
                box-shadow var(--motion-hover);
}
.status-badge:hover {
    transform: scale(var(--scale-pop-sm));
    box-shadow: var(--shadow-float);
}

.status-badge.s-running,
.status-badge.s-working { background: var(--status-running-bg); color: var(--status-running); }
.status-badge.s-complete { background: var(--status-complete-bg); color: var(--status-complete); }
.status-badge.s-error { background: var(--status-error-bg); color: var(--status-error); }
.status-badge.s-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); }
.status-badge.s-interrupted { background: var(--amber-bg); color: var(--amber); }
.status-badge.s-queued { background: var(--status-queued-bg); color: var(--status-queued); animation: queue-pulse 2.5s var(--ease-in-out) infinite; }
.status-badge.s-rate-limit-paused { background: var(--status-waiting-bg); color: var(--status-warning); animation: rl-pulse 2s var(--ease-in-out) infinite; }
.status-badge.s-idle { background: var(--status-idle-bg); color: var(--status-idle); }
.status-badge.s-waiting { background: var(--status-waiting-bg); color: var(--status-waiting); }
.status-badge.s-triaging { background: var(--status-triaging-bg); color: var(--status-triaging); }
.status-badge.s-waiting-input { background: var(--status-input-bg); color: var(--status-input); }
.status-badge.s-reviewing { background: var(--status-reviewing-bg); color: var(--status-reviewing); }
.status-badge.s-frozen { background: var(--status-frozen-bg); color: var(--status-frozen); }
.status-badge.s-retrying { background: var(--amber-bg); color: var(--amber); animation: pulse 1.5s var(--ease-in-out) infinite; }
.status-badge.s-fallback { background: var(--surface-active); color: var(--accent-deep); }
.status-badge.s-circuit-open { background: var(--status-error-bg); color: var(--status-error); }

/* 인라인 상태 도트 — 좌측 테두리 대체용 ::before 패턴 */
.has-status-dot {
    position: relative;
    padding-left: calc(var(--s-4) + 8px);
}
.has-status-dot::before {
    content: '';
    position: absolute;
    left: var(--s-2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
}
.has-status-dot.s-working::before  { background: var(--status-running); }
.has-status-dot.s-complete::before { background: var(--status-complete); }
.has-status-dot.s-error::before    { background: var(--status-error); }
.has-status-dot.s-waiting::before  { background: var(--status-waiting); }
.has-status-dot.s-success::before  { background: var(--clr-success); }
.has-status-dot.s-warning::before  { background: var(--amber); }

/* 범용 상태 도트 — 글로우 이펙트 통일 */
.status-dot {
    width: var(--dot-size, 8px);
    height: var(--dot-size, 8px);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-sub);
    transition: background var(--duration-moderate) var(--easing-in-out),
                box-shadow var(--duration-moderate) var(--easing-spring),
                transform var(--duration-base) var(--easing-out);
}
/* 크기 변형 — tokens.css --dot-size-* 연동 */
.status-dot--sm { width: var(--dot-size-sm, 6px); height: var(--dot-size-sm, 6px); }
.status-dot--lg { width: var(--dot-size-lg, 10px); height: var(--dot-size-lg, 10px); }

.status-dot.s-working { background: var(--status-running); animation: statusDotGlow 2s var(--ease-in-out) infinite; box-shadow: var(--shadow-status-running); }
.status-dot.s-complete { background: var(--status-complete); box-shadow: var(--shadow-status-complete); }
.status-dot.s-error { background: var(--status-error); box-shadow: var(--shadow-status-error); }
.status-dot.s-waiting { background: var(--status-waiting); box-shadow: var(--shadow-status-waiting); }
.status-dot.s-idle { background: var(--text-sub); }
.status-dot.s-reviewing { background: var(--status-reviewing); animation: statusDotGlow 2s var(--ease-in-out) infinite; box-shadow: var(--shadow-status-reviewing); }
.status-dot.s-frozen { background: var(--status-frozen); box-shadow: var(--shadow-status-frozen); }
.status-dot.s-retrying { background: var(--amber); animation: statusDotGlow 1.2s var(--ease-in-out) infinite; box-shadow: var(--shadow-status-retrying); }
.status-dot.s-fallback { background: var(--accent-deep); box-shadow: var(--shadow-status-fallback); }
.status-dot.s-circuit-open { background: var(--status-error); box-shadow: var(--shadow-status-error); }

/* 상태 도트 글로우 펄스 — 스케일 + 투명도 (프리미엄) */
@keyframes statusDotGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* Badge 상태 클래스 (JS 동적 할당용: badge-working, badge-idle 등) */
/* 상태 전환 보간 — 클래스 교체 시 색상·배경 부드럽게 전환 */
.badge-working,
.badge-idle,
.badge-error,
.badge-complete,
.badge-warning,
.badge-frozen,
.badge-cancelled,
.badge-waiting,
.badge-queued,
.badge-rate-limit-paused {
    transition: background-color var(--motion-state),
                color var(--motion-state),
                opacity var(--motion-state);
}
.badge-working {
    background: var(--status-running-bg);
    color: var(--status-running);
}
.badge-working::before {
    content: '';
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s var(--ease-in-out) infinite;
}
.badge-idle {
    background: var(--status-idle-bg);
    color: var(--status-idle);
}
.badge-error {
    background: var(--status-error-bg);
    color: var(--status-error);
}
.badge-complete {
    background: var(--status-complete-bg);
    color: var(--status-complete);
}
.badge-warning {
    background: var(--status-waiting-bg);
    color: var(--status-warning);
}
.badge-frozen {
    background: var(--status-frozen-bg);
    color: var(--status-frozen);
}
.badge-cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled);
    opacity: 0.7;
}
.badge-waiting {
    background: var(--status-waiting-bg);
    color: var(--status-waiting);
}
.badge-queued {
    background: var(--status-queued-bg);
    color: var(--status-queued);
    animation: queue-pulse 2.5s var(--ease-in-out) infinite;
}
.badge-rate-limit-paused {
    background: var(--status-waiting-bg);
    color: var(--status-warning);
    animation: rl-pulse 2s var(--ease-in-out) infinite;
}
@keyframes rl-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
@keyframes queue-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* 대기 순서 뱃지 */
.queue-position-badge {
    display: inline-block;
    padding: var(--s-1) var(--s-2);
    background: var(--purple-bg);
    color: var(--purple);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
/* Job 액션 버튼 (Job 카드 내) */
.job-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    background: transparent;
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy);
    white-space: nowrap;
    line-height: var(--leading-none);
}
.job-action-btn:hover {
    background: var(--bg-raised);
    color: var(--text);
    border-color: var(--line-strong);
    transform: translateY(var(--hover-lift-sm));
}
.job-action-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.job-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.job-action-btn.btn-edit:hover { color: var(--text); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }
.job-action-btn.btn-priority { padding: var(--s-1) var(--s-1); min-width: 28px; justify-content: center; }
.job-action-btn.btn-priority:hover { color: var(--clr-info-light); border-color: var(--clr-info-border); transform: translateY(var(--hover-lift-sm)); }
.job-action-btn.btn-cancel:hover { color: var(--red); border-color: var(--clr-error-border); transform: translateY(var(--hover-lift-sm)); }
.job-action-btn.btn-resume:hover { color: var(--clr-success-light); border-color: var(--clr-green-border); transform: translateY(var(--hover-lift-sm)); }
.job-action-btn.btn-retry:hover { color: var(--clr-info-light); border-color: var(--clr-info-border); transform: translateY(var(--hover-lift-sm)); }
.job-action-btn.btn-rework:hover { color: var(--clr-warning-light); border-color: var(--clr-warning-border); transform: translateY(var(--hover-lift-sm)); }
/* 상태 배지를 액션 버튼과 통일된 스타일로 표시 */
.job-action-btn.job-status-label {
    cursor: default;
    pointer-events: none;
}
.job-action-btn.job-status-label.s-complete { color: var(--status-complete); border-color: color-mix(in srgb, var(--status-complete) 20%, transparent); }
.job-action-btn.job-status-label.s-error { color: var(--status-error); border-color: color-mix(in srgb, var(--status-error) 20%, transparent); }
.job-action-btn.job-status-label.s-running { color: var(--status-running); border-color: color-mix(in srgb, var(--status-running) 20%, transparent); }
.job-action-btn.job-status-label.s-cancelled { color: var(--status-cancelled); border-color: color-mix(in srgb, var(--status-cancelled) 20%, transparent); }
.job-action-btn.job-status-label.s-interrupted { color: var(--status-interrupted); border-color: color-mix(in srgb, var(--status-interrupted) 20%, transparent); }
.job-action-btn.job-status-label.s-frozen { color: var(--clr-info-light); border-color: color-mix(in srgb, var(--clr-info-light) 20%, transparent); }
.job-action-btn.job-status-label.s-rate-limit-paused { color: var(--clr-info-light); border-color: color-mix(in srgb, var(--clr-info-light) 20%, transparent); }

/* ═══════════════════════════════════════════
   3. Input / Textarea / Select
   ═══════════════════════════════════════════ */
.input, .textarea, .select,
input[type="text"], input[type="url"], input[type="number"],
input[type="password"], input[type="email"], input[type="search"],
textarea, select {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    background-color: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-family: var(--font);
    color: var(--text);
    transition: border-color var(--motion-hover),
                background-color var(--motion-hover),
                box-shadow var(--motion-hover);
    outline: none;
}

/* 입력 필드 hover — focus 전 미묘한 피드백 */
.input:hover, .textarea:hover, .select:hover,
input[type="text"]:hover, input[type="url"]:hover, input[type="number"]:hover,
input[type="password"]:hover, input[type="email"]:hover, input[type="search"]:hover,
textarea:hover, select:hover {
    background-color: var(--surface-2);
    border-color: var(--line-bold);
}

.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-within-glow);
    transition: border-color var(--motion-hover),
                box-shadow var(--duration-moderate) var(--ease-out);
    /* 프리미엄 포커스 글로우 확산 */
    animation: animFocusGlowExpand var(--duration-moderate) var(--easing-out);
}

::placeholder { color: var(--text-sub); transition: opacity var(--motion-hover); }
:focus::placeholder { opacity: 0.3; }

textarea, .textarea { resize: vertical; min-height: 60px; border-radius: var(--radius); }

select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238b8b92' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: var(--s-5-5);
    /* 프리미엄: 호버 시 화살표 색상 전환 */
    transition: background-color var(--motion-hover),
                border-color var(--motion-hover),
                box-shadow var(--motion-hover),
                background-image var(--motion-hover);
}
select:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ededef' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    transform: translateY(var(--hover-lift-sm));
}
/* ═══════════════════════════════════════════
   4. Card
   ─────────────────────────────────────────
   Hover 패턴 표준 (4-Tier):
     Tier 0 (CTA) — 액센트 CTA: filter: brightness(--hover-brightness/--active-brightness)
     Tier 1 (Strong) — 카드류: translateY(--hover-lift) + --shadow-card-hover
     Tier 2 (Subtle) — 리스트/행: background: var(--surface-hover) 만
     Tier 3 (Minimal) — 아이콘 버튼: background: var(--surface-hover) + color 변경

   Shadow 토큰 분리 규칙:
     - hover 시 → --shadow-card-hover (0 8px 24px, 0.30)
     - 정적 elevation → --elevation-md (0 4px 12px, 0.20)
     - 혼용 금지: hover에 elevation-md 사용 ✗, 정적에 shadow-card-hover 사용 ✗
   ═══════════════════════════════════════════ */
.card {
    padding: var(--s-4);
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-subtle);
    transition: background var(--motion-hover),
                box-shadow var(--motion-hover),
                transform var(--duration-base) var(--easing-spring);
}

.card:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-card-hover-glow);
    transform: translateY(var(--hover-lift));
}
.card:active {
    transform: translateY(0) scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}

/* ═══════════════════════════════════════════
   5. Agent Card
   ═══════════════════════════════════════════ */
.agent-card {
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: none;
    border-radius: var(--radius-s);
    /* transition → animations.css(:767) 단일 권위 선언으로 통합 */
    cursor: pointer;
    min-width: 0;
    min-height: var(--s-11);
    overflow: hidden;
    position: relative;
    /* v6: 깊이감 강화 — 베이스에 미세 그림자 */
    box-shadow: var(--shadow-subtle);
}

/* hover: bg + shadow + transform 통합 관리 (T1+T12+§37: 프리미엄 글로우 + 퍼스펙티브 틸트) */
.agent-card:hover {
    background: var(--surface-hover);
    box-shadow: var(--glow-premium-strong), var(--hover-ring), var(--shadow-medium);
    transform: perspective(600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--hover-lift)) scale(var(--hover-scale));
}
/* active: transform + shadow + 퍼스펙티브 유지 (T1+§37: 프리미엄 눌림 피드백) */
.agent-card:active {
    box-shadow: var(--shadow-inset);
    transform: perspective(600px) translateY(0) scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.agent-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}

/* 상태별 배경 — 미세한 힌트만 (미니멀) + 부드러운 전환, --status-* 토큰 기반 */
.agent-card.s-working {
    background: var(--surface-w5);
    animation: animStateFlash var(--duration-moderate) var(--ease-out);
}
.agent-card.s-complete { background: var(--clr-success-bg-2xs); }
.agent-card.s-error,
.agent-card.rate-limited {
    background: var(--clr-error-bg-2xs);
}
.agent-card.s-waiting { background: var(--clr-warning-bg-2xs); }

/* 카드 헤더 */
.agent-card-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}

/* 카드 상단 */
.agent-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}

/* 상태 도트 — 글로우 이펙트 추가 */
.agent-status-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-sub);
    opacity: 0.5;
    transition: background var(--motion-state),
                box-shadow var(--motion-state),
                opacity var(--motion-state);
}
.agent-status-dot.s-working {
    background: var(--status-running);
    opacity: 1;
    animation: pulse 1.5s var(--ease-in-out) infinite;
}
.agent-status-dot.s-complete {
    background: var(--status-complete);
    opacity: 1;
    box-shadow: var(--shadow-status-complete-lg);
}
.agent-status-dot.s-error {
    background: var(--status-error);
    opacity: 1;
    box-shadow: var(--shadow-status-error-lg);
    animation: animBlink 1.2s var(--ease-in-out) infinite;
}
.agent-status-dot.s-waiting {
    background: var(--status-waiting);
    opacity: 1;
    animation: pulse 1.5s var(--ease-in-out) infinite;
    box-shadow: var(--shadow-status-waiting-lg);
}
.agent-status-dot.s-idle { background: var(--text-sub); opacity: 0.35; }

.agent-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
    white-space: nowrap;
    /* 상태 전환 보간 — s-working/s-retrying/s-fallback 색상 부드럽게 */
    transition: color var(--motion-state);
}

.agent-status {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.agent-status-badge {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-sub); /* WCAG AA: 카드 내부 가독성 확보 */
    flex-shrink: 0;
    /* 상태 전환 보간 — badge 배경·색상 부드럽게 */
    transition: background-color var(--motion-state),
                color var(--motion-state);
}

/* 상태 배지 — badge--* 배경 투명화 (dot이 이미 상태 표시) */
.agent-status-badge.badge--default,
.agent-status-badge.badge--info,
.agent-status-badge.badge--success,
.agent-status-badge.badge--error,
.agent-status-badge.badge--warning {
    background: transparent;
    color: var(--text-sub); /* WCAG AA: 카드 내부 가독성 확보 */
}

/* 모델 배지 */
.agent-model {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-sub); /* WCAG AA: 카드 내부 가독성 확보 */
    flex-shrink: 0;
}
.agent-model.model-opus   { color: var(--clr-model-opus-light); background: var(--clr-model-opus-bg); }
.agent-model.model-codex  { color: var(--clr-model-codex-light); background: var(--clr-model-codex-bg); }
.agent-model.model-sonnet { color: var(--accent); background: var(--clr-model-sonnet-bg); }
.agent-model.model-haiku  { color: var(--clr-model-haiku-light); background: var(--clr-model-haiku-bg); }

.agent-role {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}

.agent-task {
    font-size: var(--text-sm);
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: var(--s-1);
}

.agent-rl-hint {
    font-size: var(--text-sm);
    color: var(--red);
}

.agent-time {
    font-size: var(--text-sm);
    color: var(--text-sub); /* WCAG AA: 카드 내부 가독성 확보 */
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.agent-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-1);
}
/* 리셋 버튼 — 파괴적 액션이므로 호버 시에만 표시 */
.agent-reset-btn {
    opacity: 0;
    transition: opacity var(--motion-hover);
}
.agent-card:hover .agent-reset-btn,
.agent-card:focus-within .agent-reset-btn {
    opacity: 1;
}

/* Agent Grid */
#agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-3);
}

/* 밀도 모드 */
.agent-card.density-compact {
    padding: var(--s-2) var(--s-3);
}
.agent-card.density-compact .agent-role,
.agent-card.density-compact .agent-task { display: none; }

.agent-card.density-expanded {
    padding: var(--s-4) var(--s-5);
}

/* Division Groups */
.agent-division-group { margin-bottom: var(--s-4); }

.agent-division-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    margin-bottom: var(--s-2);
    cursor: pointer;
}

.agent-division-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.agent-division-count {
    font-size: var(--text-sm);
    color: var(--text-sub); /* WCAG AA: 카드 내부 가독성 확보 */
}

.agent-division-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-3);
}

/* ═══════════════════════════════════════════
   6. Agent Summary Bar
   기본 레이아웃/스타일은 pages.css §4에서 정의.
   여기는 공통 유틸리티만 보관.
   ═══════════════════════════════════════════ */
.summary-retry-all-btn {
    margin-top: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    background: var(--red-bg);
    color: var(--red);
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.summary-retry-all-btn:hover { background: var(--clr-error-bg-lg); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-soft); }

/* ═══════════════════════════════════════════
   7. Agent Filter Bar
   ═══════════════════════════════════════════ */
.agent-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-4);
    margin-bottom: var(--s-2);
    flex-wrap: wrap;
}

.agent-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-4);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--motion-hover),
                background var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--motion-hover);
    letter-spacing: var(--tracking-wide);
    position: relative;
    box-shadow: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.agent-filter-btn:hover { color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.agent-filter-btn.active {
    color: var(--accent);
    background: var(--surface-active);
    font-weight: var(--weight-semibold);
}

/* 필터 카운트 (요약바 통합) */
.filter-count {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    margin-left: var(--s-1);
}

.agent-filter-select {
    width: auto;
    padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm);
    border-radius: var(--radius-s);
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text);
    min-width: var(--s-16);
    transition: border-color var(--motion-hover);
}
.agent-filter-select:focus { border-color: var(--accent); }

/* 에이전트 검색 토글 버튼 (cmd-search-btn과 동일 스타일) */
.agent-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--bg-raised);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color var(--motion-hover),
                background var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--motion-hover);
    flex-shrink: 0;
    margin-left: auto;
}
.agent-search-btn:hover { color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.agent-search-btn.active { color: var(--accent); background: var(--surface-active); border-color: var(--accent); }

/* 에이전트 검색바 (토글 시 표시) */
.agent-search-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius-s);
    margin: 0 var(--s-4) var(--s-1);
}
.agent-search-bar-icon { color: var(--text-sub); flex-shrink: 0; }
.agent-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
}
.agent-search-input::placeholder { color: var(--text-sub); opacity: 0.6; }
.agent-search-close {
    background: none; border: none; color: var(--text-sub); cursor: pointer;
    font-size: var(--text-base); line-height: var(--leading-none); padding: 0 var(--s-1);
    transition: color var(--duration-fast) var(--easing-out), opacity var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out);
}
.agent-search-close:hover { color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.agent-search-close:active { opacity: 0.6; }

/* L722 중복 제거됨 → L690 블록으로 통합 */

/* ═══════════════════════════════════════════
   8. Config Bar (Settings로 이관 — 숨김)
   ═══════════════════════════════════════════ */
.overview-config-bar { display: none; }

.config-chips {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.config-tpl-group {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.config-tpl-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
}

/* 템플릿 세그먼트 컨트롤 */
.tpl-segment-control {
    display: flex;
    gap: var(--s-1);
    padding: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius);
}

.tpl-segment-btn {
    padding: var(--s-1) var(--s-3);
    border-radius: calc(var(--radius) - 2px);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
    letter-spacing: var(--tracking-wide);
}

.tpl-segment-btn:hover { color: var(--text-sub); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.tpl-segment-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.tpl-segment-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.tpl-segment-btn.active { background: var(--surface-active); color: var(--text); }

/* Config chip */
.config-chip-wrap { position: relative; }

.config-chip {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    background: var(--surface);
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
    border: none;
}
.config-chip:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.config-chip:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.config-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.config-chip:hover:focus-visible { box-shadow: var(--shadow-subtle), var(--shadow-focus-ring); transform: translateY(var(--hover-lift-sm)); }

.config-chip-icon { font-size: var(--text-sm); }
.config-chip-label { font-weight: var(--weight-medium); }

/* Codex 인라인 에러 (JS inline → CSS 전환) */
.codex-inline-error {
    color: var(--red);
    font-size: var(--text-sm);
    margin-top: var(--s-1);
}

/* GDrive 모달 오버레이 (JS inline → CSS 전환) */
.gdrive-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Job 연결 라벨 (JS inline → CSS 전환) */
.job-linked-label {
    font-size: var(--text-sm);
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--s-20);
    cursor: pointer;
    padding: 0 var(--s-1);
}

/* 개입 이력 항목 (JS inline → CSS 전환) */
.intervention-item {
    color: var(--accent);
    font-size: var(--text-sm);
    padding: var(--s-1) 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* ZIP 뷰어 재시도 버튼 (JS inline → CSS 전환) */
.zip-viewer-retry-btn {
    margin-top: var(--s-4);
    padding: var(--s-2) var(--s-5);
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.codex-status-dot, .owui-status-dot {
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--text-sub);
    transition: background var(--motion-state);
}
.codex-status-dot.connected, .owui-status-dot.connected { background: var(--green); }
.codex-status-text { color: var(--text-sub); font-size: var(--text-sm); }

.gpt-unread-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--accent);
}

/* Config popover */
/* .glass 또는 .glass--light 클래스와 조합 사용 */
.config-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: var(--layout-lg);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-4);
    z-index: var(--z-dropdown);
    animation: animDropdownOpen var(--duration-base) var(--easing-out) both;
}

.config-popover-header {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--s-3);
}

.config-bar-right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.config-cost-hint {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.cost-label { color: var(--text-sub); }
.cost-value { color: var(--text-sub); font-variant-numeric: tabular-nums; }

.config-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.config-settings-btn:hover { background: var(--surface-hover); color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }

/* ═══════════════════════════════════════════
   9. Modal / Drawer
   ═══════════════════════════════════════════ */

/* 모달 열림 시 배경 스크롤 잠금 */
body.modal-open {
    overflow: hidden;
}

/* Modal overlay (프리미엄 frosted glass backdrop — blur 8px) */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--overlay);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    justify-content: center;
    align-items: center;
}
.modal-overlay.active {
    display: flex;
    animation: animFadeIn var(--motion-hover);
}

/* 모달 박스 — .glass 또는 .glass--light 클래스와 조합 사용 */
.modal-box {
    border-radius: var(--radius);
    padding: var(--s-5);
    width: var(--layout-2xl);
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal-layered);
    animation: animSpringIn 350ms var(--easing-spring-gentle) both;
    contain: layout style;
}

/* 동적 모달 .modal-content — .glass 또는 .glass--light 클래스와 조합 사용 */
.modal-content {
    border-radius: var(--radius);
    width: var(--layout-2xl);
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal-layered);
    animation: animSpringIn 350ms var(--easing-spring-gentle) both;
    contain: layout style;
}

/* 동적 모달 헤더 — border 대신 그림자로 구분 */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    box-shadow: var(--shadow-separator-surface);
}
/* 동적 모달 닫기 버튼 */
.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-reading);
    cursor: pointer;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    transition: color var(--motion-hover),
                background var(--motion-hover),
                transform var(--duration-fast) var(--ease-spring);
}
.modal-close-btn:hover {
    color: var(--text);
    background: var(--surface);
    transform: rotate(90deg);
}
.modal-close-btn:active { transform: rotate(90deg) scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.modal-close-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

/* 타이포 → heading-lg / heading-sm 등 HTML 클래스에 위임 (cascade override 방지) */
.modal-title {
    margin-bottom: var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.modal-title-lg { font-size: var(--text-xl); letter-spacing: var(--tracking-tighter); }
.modal-title-close {
    margin-left: auto;
    cursor: pointer;
    color: var(--text-sub);
    font-size: var(--text-lg);
    line-height: var(--leading-none);
    transition: color var(--smooth);
}
.modal-title-close:hover { color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.modal-title-close:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }

.modal-footer {
    display: flex;
    gap: var(--s-3);
    justify-content: flex-end;
    margin-top: var(--s-4);
}

.modal-btn-cancel {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    border: none;
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.modal-btn-cancel:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-soft); }
.modal-btn-cancel:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }

.modal-btn-confirm,
.modal-btn-submit {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    border: none;
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.modal-btn-confirm:hover,
.modal-btn-submit:hover { filter: brightness(var(--hover-brightness)); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-submit-glow); }
.modal-btn-confirm:active,
.modal-btn-submit:active { transform: scale(var(--active-scale-btn)); transition-duration: var(--duration-instant); filter: brightness(var(--active-brightness)); }
.modal-btn-confirm:disabled,
.modal-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.modal-btn-back {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    border: none;
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.modal-btn-back:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-soft); }
.modal-btn-back:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-s);
    background: transparent;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-reading);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.modal-close:hover { background: var(--surface-hover); color: var(--text-sub); transform: translateY(var(--hover-lift-sm)); }

.modal-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.modal-tab:hover { color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.modal-tab:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.modal-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.modal-tab.active { color: var(--text); background: var(--surface-active); box-shadow: var(--shadow-tab-active); }

/* 모달 폼 헬퍼 */
.modal-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
    display: block;
}

.modal-input {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    outline: none;
    transition: border-color var(--motion-hover);
}
.modal-input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-ring-teal);
    transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.modal-input::placeholder { color: var(--text-sub); } /* WCAG AA: 모달 내부 가독성 확보 */

.modal-select {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background-color: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    outline: none;
}
.modal-select:focus { border-color: var(--accent); }

.modal-textarea {
    width: 100%;
    min-height: var(--s-16);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    resize: vertical;
    outline: none;
    line-height: var(--leading-normal);
}
.modal-textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus-ring-teal);
    transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}

.modal-hint {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

/* Drawer (슬라이드 패널) */
/* Agent Detail Drawer — 중앙 팝업 모달 (프리미엄 blur 12px) */
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--overlay);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    align-items: center;
    justify-content: center;
}
.drawer-overlay.open {
    display: flex;
    animation: animFadeIn var(--motion-hover);
}

.drawer {
    position: relative;
    width: min(1100px, 94vw);
    height: min(80vh, 800px);
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 레이어드 섀도우 — 드로어 깊이감 강화 */
    box-shadow: var(--shadow-modal-layered);
    transform: scale(0.92) translateY(16px);
    opacity: 0;
    transition: transform var(--duration-moderate) var(--easing-organic),
                opacity var(--duration-enter) var(--easing-out);
}
.drawer-overlay.open .drawer,
.drawer.open {
    /* 스프링 진입 — 오버슈트 후 안착으로 프리미엄 물리감 */
    animation: animModalSpring var(--duration-spring) var(--easing-spring-gentle) both;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-bottom: none;
    background: var(--surface);
    flex-shrink: 0;
}

.drawer-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.drawer-close {
    width: var(--s-7);
    height: var(--s-7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-reading);
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.drawer-close:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.drawer-close:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }

.drawer-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow: hidden;
}

/* Drawer 3-column layout (에이전트 상세) */
.drawer-col {
    overflow-y: auto;
    padding: var(--s-4);
    border-right: 1px solid var(--border);
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
.drawer-col:last-child { border-right: none; }

/* 드로어 컬럼 스태거 진입 — 3-column 순차 등장 */
.drawer-overlay.open .drawer-col {
    animation: animDrawerCol var(--motion-hover) both;
}
.drawer-overlay.open .drawer-col:nth-child(1) { animation-delay: 50ms; }
.drawer-overlay.open .drawer-col:nth-child(2) { animation-delay: 120ms; }
.drawer-overlay.open .drawer-col:nth-child(3) { animation-delay: 190ms; }
@keyframes animDrawerCol {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* 타이포 → label-caps (HTML 클래스). 레이아웃만 보존 */
.drawer-col-title {
    margin-bottom: var(--s-3);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.drawer-icon-lg { font-size: var(--text-4xl); flex-shrink: 0; }
.drawer-header-info { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.drawer-role-text { font-size: var(--text-sm); color: var(--text-sub); } /* WCAG AA: 드로워 내부 가독성 확보 */

/* ═══════════════════════════════════════════
   10. Create Modal → modals.css로 통합 완료 (캐스케이드 충돌 방지)
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   11. Job Drawer
   → 전체 스타일이 modals.css (L1110~3170)로 이관됨
   → 여기서는 정의하지 않음 (캐스케이드 충돌 방지)
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   12. Session Detail Tabs
   ═══════════════════════════════════════════ */
.sd-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}

.sd-tab:hover { color: var(--text); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.sd-tab:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.sd-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.sd-tab.active { color: var(--accent); background: var(--surface-active); box-shadow: var(--shadow-tab-active); }

.sd-tab-count {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-sub);
    margin-left: var(--s-1);
}
.sd-tab.active .sd-tab-count { color: var(--accent); }

.sd-tab-panel {
    padding: var(--s-3);
    animation: animTabEnter var(--motion-hover) both;
}

.sd-actions-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
}

/* Job context bar → outputs.css (L2076~) 로 이관됨 */

/* ═══════════════════════════════════════════
   13. Toast
   ═══════════════════════════════════════════ */
.output-toast-container, .toast-wrap {
    position: fixed;
    top: calc(var(--topbar-h) + var(--s-3));
    right: var(--s-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-width: var(--layout-xl);
}

/* .glass 또는 .glass--light 클래스와 조합 사용 */
.output-toast {
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4);
    box-shadow: var(--shadow-float-layered);
    cursor: pointer;
    /* §27 notch-enter 진입 애니메이션으로 대체 — animToastIn 제거 */
    transition: background var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--motion-hover),
                opacity var(--duration-moderate) var(--ease-in);
    position: relative;
    overflow: hidden;
}
/* 출력물 토스트 좌측 accent 스트라이프 */
.output-toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: var(--radius-s) 0 0 var(--radius-s);
}

.output-toast:hover {
    background: var(--bg-overlay);
    transform: translateX(-2px) translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-toast-hover);
}
.output-toast-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}

.output-toast-icon { font-size: var(--text-base); display: inline-flex; align-items: center; color: var(--text-sub); }
.output-toast-icon svg { width: var(--s-3-5); height: var(--s-3-5); }
.output-toast-agent { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.output-toast-badge { font-size: var(--text-sm); color: var(--accent); margin-left: auto; }
.output-toast-files { font-size: var(--text-sm); color: var(--text-sub); }

/* 액션 토스트 — showActionToast() */
.output-toast--action { cursor: default; }
.output-toast-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
.toast-action-btn {
    background: var(--bg-overlay);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-3);
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.toast-action-btn:hover { background: var(--bg-raised); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-soft); }
.toast-action-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.toast-action-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.toast-action-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: var(--shadow-toast-primary-glow); transform: translateY(var(--hover-lift-sm)); }
.toast-action-primary:active { filter: brightness(var(--active-brightness)); }

/* 토스트 프리미엄 스프링 진입 — animToastSpring 키프레임 (animations.css) */
.toast-spring-enter {
    animation: animToastSpring var(--duration-spring) var(--easing-spring) both;
}

/* 토스트 퇴장 애니메이션 */
.output-toast.toast-out {
    animation: animToastOut var(--duration-enter) var(--easing-in) both;
    pointer-events: none;
}

/* 프리미엄 토스트 프로그레스 바 — 자동 소멸 타이밍 시각화 */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    transform-origin: left center;
    animation: toastProgressShrink 4000ms linear forwards;
    opacity: 0.6;
}
@keyframes toastProgressShrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
.output-toast--error .toast-progress { background: var(--clr-error); }
.output-toast--warning .toast-progress { background: var(--clr-warning); }
.output-toast--success .toast-progress { background: var(--clr-success); }
.output-toast.toast-out .toast-progress { opacity: 0; }

/* ── 승인 게이트 토스트 (구현 전 사용자 승인 대기) ── */
.approval-gate {
    max-width: var(--layout-xl);
    cursor: default;
    animation: animToastSpring var(--duration-spring) var(--easing-spring) both;
}
.approval-gate::before { background: var(--accent); }
.approval-gate-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-2);
}
.approval-gate-title svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.approval-gate-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.approval-gate-summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.5;
    margin-bottom: var(--s-2);
    max-height: var(--s-9-5);
    overflow: hidden;
    text-overflow: ellipsis;
}
.approval-gate-agents {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
}
.approval-gate-agent-pill {
    font-size: var(--text-3xs);
    padding: 1px var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    color: var(--text-sub);
    white-space: nowrap;
}
.approval-gate-timer {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-faint);
    margin-bottom: var(--s-3);
}
.approval-gate-timer-bar {
    flex: 1;
    height: 3px;
    background: var(--surface-w4);
    border-radius: var(--radius-s);
    overflow: hidden;
}
.approval-gate-timer-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    transition: width var(--duration-dramatic) linear;
}
.approval-gate-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
}
/* ── 승인 게이트 수정 패널 (규모 변경 + 에이전트 선택) ── */
.ag-modify-panel {
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    background: var(--surface-w4);
    border-radius: var(--radius-s);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.ag-modify-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.ag-modify-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ag-scale-group {
    display: flex;
    gap: var(--s-1);
}
.ag-scale-opt {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background: var(--surface-w4);
    color: var(--text-sub);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.ag-scale-opt:hover { background: var(--surface-w8); color: var(--text); }
.ag-scale-opt--active {
    background: var(--accent);
    color: var(--bg);
    font-weight: var(--weight-semibold);
}
.ag-agent-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
}
.ag-agent-check {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: pointer;
    padding: 2px var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-w4);
    transition: background var(--duration-fast);
}
.ag-agent-check:hover { background: var(--surface-w8); }
.ag-agent-check input[type="checkbox"] {
    width: var(--s-3); height: var(--s-3);
    accent-color: var(--accent);
    cursor: pointer;
}
.ag-modify-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}
.ag-modify-btn--active { color: var(--accent); }
/* ── 설계 연동 + AC 준수 배지 (Job 드로어) ── */
.dc-chain-badge,
.dc-ac-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-0-5);
    font-size: var(--text-3xs);
    padding: 1px var(--s-2);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    vertical-align: middle;
    margin-left: var(--s-1);
}
.dc-chain-badge {
    background: var(--surface-w4);
    color: var(--text-sub);
}
.dc-chain-badge svg { flex-shrink: 0; color: var(--text-sub); }
.dc-ac-badge.ac-pass { background: var(--green-bg); color: var(--green); }
.dc-ac-badge.ac-warn { background: var(--amber-bg); color: var(--amber); }
.dc-ac-badge.ac-fail { background: var(--red-bg); color: var(--red); }

/* ── 온보딩 Contextual Tooltip — .glass 또는 .glass--light 클래스와 조합 사용 ── */
.onboard-tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4);
    box-shadow: var(--shadow-popover);
    max-width: var(--layout-lg);
    animation: onboardFadeIn 400ms var(--ease-spring) both;
}
.onboard-tooltip::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: var(--radius-s) 0 0 var(--radius-s);
}
.onboard-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.onboard-tooltip-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
}
.onboard-tooltip-close {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: var(--s-1);
    border-radius: var(--radius-s);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--motion-hover), background var(--motion-hover);
}
.onboard-tooltip-close:hover {
    color: var(--text);
    background: var(--surface);
    transform: translateY(var(--hover-lift-sm));
}
.onboard-tooltip-body {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}
.onboard-tooltip-step {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--weight-normal);
    margin-left: var(--sp-sm);
}
.onboard-tooltip-cta {
    font-size: var(--text-sm);
    color: var(--accent);
    margin-top: var(--sp-sm);
    font-weight: var(--weight-medium);
}
.onboard-tooltip.hiding {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--ease-in), transform var(--duration-base) var(--ease-in);
    pointer-events: none;
}
@keyframes onboardFadeIn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: none; }
}

/* ── 온보딩 하이라이트 (tooltip anchor 강조) ── */
.onboard-highlight {
    position: relative;
    z-index: 100;
    box-shadow: 0 0 0 4px var(--accent-glow);
    border-radius: var(--radius-s);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

/* ── TutorialGuide — 단계별 가이드 오버레이 ── */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-tooltip) + 10);
    background: var(--backdrop-bg-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tutorialFadeIn 300ms var(--ease-out) both;
}
.tutorial-overlay--exit {
    opacity: 0;
    transition: opacity 300ms var(--ease-in);
    pointer-events: none;
}
.tutorial-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: var(--sp-4xl) var(--sp-3xl) var(--sp-2xl);
    max-width: var(--layout-xl);
    width: calc(100% - var(--sp-3xl) * 2);
    text-align: center;
    box-shadow: var(--shadow-popover);
}
.tutorial-card--enter {
    animation: tutorialCardEnter 400ms var(--ease-spring) both;
}
.tutorial-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-9);
    height: var(--s-9);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--accent);
    margin-bottom: var(--sp-xl);
}
.tutorial-card-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--sp-lg);
    line-height: var(--leading-snug);
}
.tutorial-card-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--sp-2xl);
    white-space: pre-line;
    text-align: left;
}
.tutorial-card-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-2xl);
}
.tutorial-step-counter {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-right: var(--sp-sm);
    font-variant-numeric: tabular-nums;
}
.tutorial-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-w8);
    transition: background var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.tutorial-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}
.tutorial-dot.done {
    background: var(--accent-deep);
}
.tutorial-step-counter {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-left: var(--sp-sm);
}
.tutorial-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tutorial-btn {
    border: none;
    border-radius: var(--radius-s);
    padding: var(--sp-md) var(--sp-xl);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--motion-hover), transform var(--motion-hover);
}
.tutorial-btn:active {
    transform: scale(var(--active-scale-btn));
}
.tutorial-btn--primary {
    background: var(--accent);
    color: var(--bg);
}
.tutorial-btn--primary:hover {
    background: var(--accent-deep);
}
.tutorial-btn--secondary {
    background: transparent;
    color: var(--text-sub);
}
.tutorial-btn--secondary:hover {
    color: var(--text);
    background: var(--surface);
}
.tutorial-highlight {
    position: relative;
    z-index: calc(var(--z-tooltip) + 5);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 0 24px var(--accent-glow);
    border-radius: var(--radius-s);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

@keyframes tutorialFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes tutorialCardEnter {
    0% { opacity: 0; transform: translateY(16px) scale(0.96); }
    100% { opacity: 1; transform: none; }
}

/* 모바일 대응 */
@media (max-width: 640px) {
    .tutorial-card {
        padding: var(--sp-2xl) var(--sp-xl) var(--sp-xl);
        max-width: none;
        width: calc(100% - var(--sp-xl) * 2);
    }
    .tutorial-card-icon {
        width: var(--s-8-5);
        height: var(--s-8-5);
    }
    .tutorial-card-icon svg {
        width: var(--s-5);
        height: var(--s-5);
    }
}

/* ── 토스트 유형별 배경 + 좌측 스트라이프 ── */
.output-toast--success { background: var(--toast-success-bg); }
.output-toast--success::before { background: var(--green); }
.output-toast--error { background: var(--toast-error-bg); }
.output-toast--error::before { background: var(--red); }
.output-toast--warning { background: var(--toast-warning-bg); }
.output-toast--warning::before { background: var(--amber); }
.output-toast--info { background: var(--toast-info-bg); }
.output-toast--info::before { background: var(--accent); }
/* 시맨틱 토스트 아이콘 색상 */
.output-toast-icon--success { color: var(--green); }
.output-toast-icon--error { color: var(--red); }
.output-toast-icon--warning { color: var(--amber); }
.output-toast-icon--info { color: var(--accent); }

/* [dead CSS 제거] .toast 기본 클래스 + .toast--{semantic} + .toast-detail-* + .toast--hide
   → 실제 사용: .output-toast--* (showToast/showOutputToast/showActionToast) + .dm-toast--* (showDualModeToast)
   → .toast 계열은 이전 디자인 이터레이션 잔재 — 76줄 제거 (2026-03-14 designer) */

/* showDualModeToast() 전용 토스트 (질문 응답, 연결 상태 등) */
.dm-toast {
    position: fixed;
    top: calc(var(--topbar-h) + var(--s-3));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    background: var(--bg-raised);
    color: var(--text);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-family: var(--font);
    box-shadow: var(--shadow-popover);
    animation: animToastIn 400ms var(--easing-spring-elastic) both;
    max-width: 90vw;
    text-align: center;
    pointer-events: none;
}
.dm-toast--ok { background: var(--toast-success-bg); }
.dm-toast--error { background: var(--toast-error-bg); }
.dm-toast--warn { background: var(--toast-warning-bg); }
.dm-toast--info { background: var(--toast-info-bg); }
.dm-toast--hide {
    animation: animFadeOut 200ms var(--ease-in) forwards;
}

/* 서버 재시작 토스트 */
.server-restart-toast {
    position: fixed;
    top: calc(var(--topbar-h) + var(--s-3));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    background: var(--bg-raised);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    animation: animSlideDown var(--duration-moderate) var(--easing-spring-elastic) both;
}

.server-restart-toast-content {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.server-restart-toast-icon { color: var(--amber); flex-shrink: 0; }
.server-restart-toast-text { display: flex; flex-direction: column; gap: var(--s-1); }
.server-restart-toast-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.server-restart-toast-reason { font-size: var(--text-sm); color: var(--text-sub); }

.server-restart-toast-actions {
    display: flex;
    gap: var(--s-2);
}

.server-restart-dismiss-btn {
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.server-restart-dismiss-btn:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }

.server-restart-btn {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    background: var(--amber-bg);
    color: var(--amber);
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.server-restart-btn:hover { background: var(--clr-warning-bg-lg); transform: translateY(var(--hover-lift-sm)); }

/* PWA 컴포넌트 전체 (pwa-update-toast, pwa-update-btn, pwa-install-*, pwa-push-ask-*, pwa-offline-bar) → pages.css에서 관리 */

/* Toggle Switch — spring easing 마이크로 인터랙션 */
.toggle, .pwa-toggle {
    -webkit-appearance: none;
    appearance: none;
    width: var(--s-7);
    height: var(--s-5-0);
    border-radius: var(--radius-pill);
    background: var(--surface-active);
    position: relative;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-spring),
                box-shadow var(--motion-hover);
    border: none;
    outline: none;
    /* 터치 타겟 44px 보장 */
    padding: var(--s-3) 4px; /* 세로 (44-20)/2=12, 가로 (44-36)/2=4 */
    margin: -12px -4px;
}

.toggle::after, .pwa-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--s-4);
    height: var(--s-4);
    border-radius: 50%;
    background: var(--text-sub);
    /* 핸들 이동에 snap easing — 빠르게 도착 + 살짝 넘침 + 안착 */
    transition: transform var(--duration-moderate) var(--ease-snap),
                background-color var(--motion-hover),
                box-shadow var(--motion-hover);
}

.toggle:hover, .pwa-toggle:hover { background: var(--surface-active); transform: translateY(var(--hover-lift-sm)); }
/* :active 물리감 — 전체 스케일 축소 + 핸들 횡방향 스쿼시 (누르는 느낌) */
.toggle:active, .pwa-toggle:active { transform: scale(0.93); transition-duration: var(--duration-instant); }
.toggle:active::after, .pwa-toggle:active::after { width: 20px; border-radius: var(--radius-s); transition: width var(--duration-instant) var(--ease-spring), border-radius var(--duration-instant) var(--ease-spring), transform var(--duration-moderate) var(--ease-snap), background-color var(--motion-hover), box-shadow var(--motion-hover); }
.toggle:checked:active::after, .pwa-toggle:checked:active::after { transform: translateX(12px); }
.toggle:focus-visible, .pwa-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}
.toggle:checked, .pwa-toggle:checked { background: var(--accent); animation: animToggleCelebrate var(--duration-moderate) var(--easing-spring); box-shadow: var(--shadow-toggle-glow-sm); }
.toggle:checked:hover, .pwa-toggle:checked:hover { background: var(--accent-deep); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-toggle-glow-md); }
.toggle:checked::after, .pwa-toggle:checked::after { transform: translateX(16px); background: var(--accent-on); box-shadow: var(--shadow-toggle-glow-lg); }

/* ═══════════════════════════════════════════
   15. Empty States
   ═══════════════════════════════════════════ */

/* 공통 empty-state 레이아웃 — 모든 변형이 이 패턴을 상속 */
.empty-state,
.sr-empty-state,
.gpt-empty-state,
.gpt-locked-state,
.owui-empty-state,
.draft-empty-state,
.oc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    text-align: center;
    color: var(--text-sub);
    font-size: var(--text-sm);
}

/* 기본 empty-state — 패딩/최소높이/§27 blur-reveal 애니메이션 */
.empty-state {
    padding: var(--s-10) var(--s-5);
    min-height: clamp(140px, 22vw, 200px);
    animation: animBlurReveal var(--blur-reveal-duration) var(--easing-out) both;
    will-change: filter, opacity, transform;
}

/* ── 프리미엄 empty-state (.empty-state-premium) ──
   1000억급 빈 상태 — 글로우 오브 + 대형 일러스트 + 그래디언트 라인 */
.empty-state.empty-state-premium {
    padding: var(--s-8) var(--s-5);
    min-height: var(--card-min);
    animation: animBlurRevealPremium var(--blur-reveal-duration) var(--easing-organic) both;
    will-change: filter, opacity, transform;
    position: relative;
}
/* 글로우 오브 — 배경 중앙 은은한 빛 */
.empty-state.empty-state-premium::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: var(--card-min-sm);
    height: var(--card-min-sm);
    border-radius: 50%;
    background: radial-gradient(circle, var(--clr-accent-bg-xs) 0%, transparent 70%);
    transform: translateX(-50%);
    animation: animEmptyOrbPulse 4s var(--easing-breathe) infinite;
    pointer-events: none;
}
@keyframes animEmptyOrbPulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.8; transform: translateX(-50%) scale(1.15); }
}

/* 프리미엄 아이콘 래퍼 — 더블 링 + 대형 */
.empty-state.empty-state-premium .empty-state-icon {
    width: var(--s-11);
    height: var(--s-11);
    border-radius: 50%;
    background: var(--surface-w5);
    position: relative;
    z-index: 1;
    animation: animEmptyIconFloat 4s var(--easing-breathe) infinite;
}
/* 외곽 링 */
.empty-state.empty-state-premium .empty-state-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--clr-accent-bg-lg), transparent, var(--clr-accent-bg-sm), transparent);
    animation: animEmptyRingRotate 8s linear infinite;
    opacity: 0;
    transition: opacity var(--duration-moderate) var(--easing-out);
}
.empty-state.empty-state-premium:hover .empty-state-icon::before {
    opacity: 1;
}
@keyframes animEmptyIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes animEmptyRingRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 프리미엄 아이콘 SVG — 더 크고 선명 */
.empty-state.empty-state-premium .empty-state-icon svg {
    width: var(--s-6);
    height: var(--s-6);
    color: var(--text-sub);
    opacity: 0.8;
    transition: color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover);
}
.empty-state.empty-state-premium:hover .empty-state-icon svg {
    color: var(--accent);
    opacity: 1;
    transform: scale(1.08);
}

/* 그래디언트 디바이더 — 아이콘 아래 */
.empty-state.empty-state-premium .empty-state-divider {
    width: var(--s-8);
    height: 2px;
    border-radius: var(--radius-hairline);
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin: var(--s-3) auto;
    opacity: 0.4;
    animation: animEmptyDividerShimmer 3s var(--easing-out) infinite;
}
@keyframes animEmptyDividerShimmer {
    0%, 100% { opacity: 0.3; transform: scaleX(1); }
    50%      { opacity: 0.6; transform: scaleX(1.333); }
}

/* 프리미엄 제목 — 더 큰 타이포그래피 */
.empty-state.empty-state-premium .empty-state-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--s-2);
}

/* 프리미엄 설명 */
.empty-state.empty-state-premium .empty-state-text {
    font-size: var(--text-base);
    color: var(--text-sub);
    line-height: var(--leading-relaxed);
    max-width: var(--layout-xl);
}

/* 프리미엄 CTA 버튼 — accent 글로우 */
.empty-state.empty-state-premium .empty-state-action {
    margin-top: var(--s-4);
}
.empty-state.empty-state-premium .empty-state-action .btn-accent {
    box-shadow: var(--glow-premium);
    transition: box-shadow var(--motion-hover), transform var(--motion-hover);
}
.empty-state.empty-state-premium .empty-state-action .btn-accent:hover {
    box-shadow: var(--glow-premium-strong);
    transform: translateY(var(--hover-lift-sm));
}

/* 아이콘 래퍼 — 원형 배경 + SVG + 호흡 모션 */
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-9);
    height: var(--s-9);
    border-radius: 50%;
    background: var(--surface-w5);
    animation: animEmptyBreathe 3s var(--easing-breathe) infinite;
    will-change: transform, box-shadow;
}
@keyframes animEmptyBreathe {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 transparent; }
    50% { transform: translateY(-3px); box-shadow: var(--shadow-breathe-peak); }
}
.empty-state-icon svg {
    width: var(--s-5-5);
    height: var(--s-5-5);
    color: var(--text-sub);
    opacity: 0.7;
    transition: color var(--motion-hover), opacity var(--motion-hover);
}
.empty-state:hover .empty-state-icon svg {
    color: var(--accent);
    opacity: 0.9;
    transform: translateY(var(--hover-lift-sm));
}

/* 제목 — 간결한 한줄 */
.empty-state-title {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    margin-top: var(--s-1);
}

/* 설명 텍스트 */
.empty-state-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    max-width: var(--layout-lg);
}

/* empty-state CTA 버튼 — 시중 SaaS 기준 최소 13px + 충분한 터치 타겟 */
.empty-state-action {
    margin-top: var(--s-3);
}
.empty-state-action .btn,
.empty-state-action .btn-ghost,
.empty-state-action .btn-fill {
    font-size: var(--text-sm);
    padding: var(--s-2) var(--s-3);
}

/* ═══════════════════════════════════════════
   공통 스피너 (Spinner) — 5단계 사이즈
   border-spin 패턴 표준화. 개별 컴포넌트에서 중복 정의하지 말 것.
   @keyframes spin → reset.css에 정의됨.
   사용: <div class="spinner spinner-md"></div>
   ═══════════════════════════════════════════ */
.spinner {
    display: inline-block;
    border-style: solid;
    border-color: var(--surface-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-dramatic) linear infinite;
    flex-shrink: 0;
}
/* 사이즈 변형 */
.spinner-xs  { width: var(--s-3); height: var(--s-3); border-width: 2px; }   /* 인라인 메타 */
.spinner-sm  { width: var(--s-4); height: var(--s-4); border-width: 2px; }   /* 인라인 버튼 */
.spinner-md  { width: var(--s-5); height: var(--s-5); border-width: 2px; }   /* 섹션 로딩 */
.spinner-lg  { width: var(--s-6); height: var(--s-6); border-width: 3px; }   /* 패널 로딩 */
.spinner-xl  { width: var(--s-8); height: var(--s-8); border-width: 3px; }   /* 전체 페이지 */

/* 스피너 래퍼 — 중앙 정렬 */
.spinner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-6) 0;
}

/* 상태 변형 — 재시도 시 amber 톤 */
.spinner.spinner-retry { border-top-color: var(--amber); animation-duration: 0.5s; }

/* 접근성: 모션 감소 설정 시 애니메이션 비활성 */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
}

/* wp-empty → empty-state 호환 (출력물/타임라인 인라인 빈 상태) */
.wp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-10) var(--s-5);
    color: var(--text-sub);
    font-size: var(--text-sm);
    text-align: center;
    min-height: clamp(140px, 22vw, 200px);
}
.wp-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-9);
    height: var(--s-9);
    border-radius: 50%;
    background: var(--surface-w5);
}
.wp-empty-icon svg { width: 28px; height: 28px; color: var(--text-sub); opacity: 0.7; }
.wp-empty p {
    margin-top: var(--sp-md);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.wp-empty p.wp-empty-error {
    color: var(--clr-error);
}

/* chat-empty, chat-empty-text → pages.css에서 관리 */

.chat-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-9);
    height: var(--s-9);
    border-radius: 50%;
    background: var(--surface-w5);
}
.chat-empty-icon svg { width: 28px; height: 28px; color: var(--text-sub); opacity: 0.7; }

/* chat-empty-text → pages.css에서 관리 */

/* ═══════════════════════════════════════════
   16. Feed Components
   ═══════════════════════════════════════════ */
.feed {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
}

.feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-4);
    border-bottom: none;
}

.feed-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.feed-body {
    max-height: 600px;
    overflow-y: auto;
    padding: var(--s-2) var(--s-3);
}

/* ═══════════════════════════════════════════
   17. Scroll to Bottom Button
   ═══════════════════════════════════════════ */
/* .glass 또는 .glass--light 클래스와 조합 사용 */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: var(--s-4);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    z-index: var(--z-base);

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-8-5);
    height: var(--s-8-5);
    border-radius: 50%;
    border: none;
    background: var(--bg-raised);
    box-shadow: var(--shadow-lg);

    color: var(--text-sub);
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--motion-hover),
                visibility var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                background var(--motion-hover);
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.scroll-to-bottom-btn:hover {
    background: var(--surface-hover);
    color: var(--accent);
    box-shadow: var(--shadow-scroll-btn-hover);
    transform: translateY(var(--hover-lift-sm));
}

.scroll-to-bottom-btn:active {
    transform: translateX(-50%) scale(0.92);
    box-shadow: var(--shadow-soft);
}

.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-4);
    height: var(--s-4);
    transition: transform var(--duration-base) var(--easing-spring-bouncy);
}

.scroll-to-bottom-btn:hover .scroll-arrow {
    transform: translateY(1px);
}

.scroll-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: var(--s-5-0);
    height: var(--s-5-0);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s-1);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy);
    pointer-events: none;
}

.scroll-badge.has-count {
    opacity: 1;
    transform: scale(1);
}

.scroll-to-bottom-btn:empty { display: none; }
.scroll-badge:empty { display: none; }

/* ═══════════════════════════════════════════
   18. Template Modal Tabs
   ═══════════════════════════════════════════ */
.tpl-tabs {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-4);
    border-bottom: none;
    padding-bottom: var(--s-2);
}

.tpl-tab {
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}

.tpl-tab:hover { color: var(--text-sub); background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.tpl-tab.active { color: var(--text); background: var(--surface-active); }

.tpl-tab-content {
    display: none;
}
.tpl-tab-content.active {
    display: block;
    animation: animTabReveal var(--duration-base) var(--easing-out) both;
}
/* @keyframes animTabReveal → animations.css 정본 (중복 제거) */

/* ═══════════════════════════════════════════
   19. MCP Modal
   ═══════════════════════════════════════════ */
.mcp-modal {
    max-width: var(--layout-2xl);
}

.mcp-server-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.mcp-server-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius);
    border: none;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.mcp-server-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }

.mcp-server-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    flex: 1;
}

.mcp-server-status {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--text-sub);
    flex-shrink: 0;
}
.mcp-server-status.connected { background: var(--green); }
.mcp-server-status.error { background: var(--red); }

.mcp-server-actions {
    display: flex;
    gap: var(--s-1);
}

.mcp-add-btn {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    background: var(--surface);
    border: 1px dashed var(--line);
    color: var(--text-sub);
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
    width: 100%;
    justify-content: center;
}
.mcp-add-btn:hover { background: var(--surface-hover); border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }

.mcp-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.mcp-form-field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}

/* ═══════════════════════════════════════════
   20. Markdown Rendered Content
   ═══════════════════════════════════════════ */
.msg-content {
    flex: 1;
    min-width: 0;
}

.msg-rendered-md {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text);
    word-break: break-word;
}

.msg-rendered-md h1,
.msg-rendered-md h2,
.msg-rendered-md h3 {
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-top: var(--s-4);
    margin-bottom: var(--s-2);
}

.msg-rendered-md h1 { font-size: var(--text-xl); letter-spacing: var(--tracking-tighter); }
.msg-rendered-md h2 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.msg-rendered-md h3 { font-size: var(--text-base); letter-spacing: var(--tracking-normal); }

.msg-rendered-md p {
    margin-bottom: var(--s-2);
}

.msg-rendered-md ul,
.msg-rendered-md ol {
    padding-left: var(--s-5);
    margin-bottom: var(--s-2);
}

.msg-rendered-md li {
    margin-bottom: var(--s-1);
}

.msg-rendered-md a {
    color: var(--accent);
    text-decoration: none;
}
.msg-rendered-md a:hover { text-decoration: underline; }

.msg-rendered-md strong {
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.msg-rendered-md em {
    font-style: italic;
    color: var(--text-sub);
}

/* 코드 블록 */
.msg-rendered-md code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    background: var(--surface-active);
    color: var(--accent);
}

.msg-rendered-md pre {
    background: var(--bg);
    border: none;
    border-radius: var(--radius);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    overflow-x: auto;
}

.msg-rendered-md pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* 테이블 */
.msg-rendered-md table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--s-3);
    font-size: var(--text-sm);
}

.msg-rendered-md th {
    text-align: left;
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line-bold);
    font-weight: var(--weight-semibold);
    color: var(--text);
    background: var(--surface);
}

.msg-rendered-md td {
    padding: var(--s-2) var(--s-3);
    border-bottom: none;
    color: var(--text-sub);
}

.msg-rendered-md tr:hover td {
    background: var(--surface);
}

/* 인용 */
.msg-rendered-md blockquote {
    position: relative;
    padding: var(--s-3) var(--s-4);
    padding-left: var(--s-5);
    margin: var(--s-3) 0;
    background: var(--surface);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-style: italic;
}
.msg-rendered-md blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--s-2);
    bottom: var(--s-2);
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--line-bold);
}

/* 수평 구분선 */
.msg-rendered-md hr {
    border: none;
    border-top: none;
    margin: var(--s-4) 0;
}

/* ═══════════════════════════════════════════
   21. Chip (범용 재사용)
   ═══════════════════════════════════════════ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    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: var(--surface);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}

.chip:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.chip:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.chip.active { background: var(--surface-active); color: var(--accent); border-color: var(--surface-w15); }

/* ═══════════════════════════════════════════
   22. Progress — 프리미엄 프로그레스 바
   Linear/Vercel 급 글로우 + 시머 + 인디터미네이트
   ═══════════════════════════════════════════ */
.progress-bar {
    height: 3px;
    background: var(--surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    border-radius: var(--radius-pill);
    transition: width var(--anim-slow) var(--easing-out);
    position: relative;
    box-shadow: var(--shadow-chip-glow);
}
.progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--surface-w15), transparent);
    background-size: 200% 100%;
    animation: animSkeletonShimmer 2s linear infinite;
}

/* 인디터미네이트 — 좌→우 반복 슬라이드 */
.progress-bar.indeterminate .progress-fill {
    width: 30% !important;
    animation: progressIndeterminate 1.5s var(--easing-in-out) infinite;
}
@keyframes progressIndeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* 프로그레스 완료 플래시 */
.progress-fill.complete {
    box-shadow: var(--shadow-progress-complete);
    background: linear-gradient(90deg, var(--green), var(--clr-success-light));
}

/* sidebar-tab-bar, sidebar-tab, sidebar-tab-actions, sidebar-tab-content → pages.css에서 관리 */
/* overview-graph-chevron → pages.css에서 관리 */

.live-dot {
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    animation: pulse 2s var(--ease-in-out) infinite;
}

/* ═══════════════════════════════════════════
   24. Misc Components
   ═══════════════════════════════════════════ */

/* PWA 알림 상태 */
.pwa-notif-status {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* 인라인 아이콘 */
.icon-inline {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   Animations — 중복 제거 완료
   fadeIn, slideUp → reset.css에 정본 정의됨
   slideRight → 미사용 제거
   ═══════════════════════════════════════════ */
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════
   Responsive: Tablet (768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Agent Detail Drawer — 태블릿 이하 세로 스택 */
    .drawer {
        width: 96vw;
        height: 90vh;
    }
    .drawer-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .drawer-col {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .drawer-col:last-child { border-bottom: none; }

    .modal-box,
    .modal-content {
        width: 95vw;
        padding: var(--s-4);
    }

    .create-modal {
        width: 95vw;
    }

    /* job-drawer 모바일 오버라이드 → modals.css @media(768px) 블록으로 이관됨 */

    /* scroll-to-bottom-btn 반응형 → command.css에서 통합 관리 (CSS override 충돌 방지) */

    /* summary-bar 반응형은 pages.css §9에서 정의 */
    /* pwa-install-banner, pwa-push-ask 반응형 → mobile.css에서 관리 */

    .mcp-modal { width: 100%; }
}

/* ═══════════════════════════════════════════
   Responsive: Mobile (375px)
   ═══════════════════════════════════════════ */
@media (max-width: 375px) {
    .modal-box,
    .modal-content {
        padding: var(--s-3);
        border-radius: var(--radius-s);
    }

    .modal-title {
        font-size: var(--text-base);
    }

    .modal-footer {
        flex-direction: column;
        gap: var(--s-2);
    }

    .modal-btn-cancel,
    .modal-btn-confirm,
    .modal-btn-submit {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .create-modal-body {
        padding: var(--s-3);
    }

    .create-modal-footer {
        padding: var(--s-3);
        flex-direction: column;
        gap: var(--s-2);
    }

    /* Dashboard 필터바 → cmd-sub-toggle 공유 구조로 이관 (command.css 반응형 적용) */

    #agent-grid {
        grid-template-columns: 1fr;
    }

    .agent-division-grid {
        grid-template-columns: 1fr;
    }

    /* scroll-to-bottom-btn 반응형 → command.css에서 통합 관리 (CSS override 충돌 방지) */
    /* pwa-install-banner, pwa-install-btn 375px 반응형 → mobile.css에서 관리 */
}

/* ═══════════════════════════════════════════
   Custom Checkbox — 물리감 체크 애니메이션
   사용: <label class="custom-check"><input type="checkbox"><span class="check-mark"></span> 라벨</label>
   ═══════════════════════════════════════════ */
.custom-check {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-sm);
    color: var(--text);
    line-height: var(--leading-normal);
}
.custom-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.check-mark {
    width: var(--s-4-5);
    height: var(--s-4-5);
    border-radius: var(--radius-s);
    background: var(--surface);
    border: 1.5px solid var(--line-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--duration-base) var(--ease-spring),
                border-color var(--duration-base) var(--ease-spring),
                box-shadow var(--motion-hover),
                transform var(--duration-instant) var(--ease-spring);
}
/* 체크마크 SVG (인라인) */
.check-mark::after {
    content: "";
    width: var(--s-2-5);
    height: var(--s-2-5);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%2309090b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.5L4.2 7.5L8 3'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--duration-instant) var(--ease-spring),
                transform var(--duration-moderate) var(--easing-spring);
}
/* 호버 */
.custom-check:hover .check-mark {
    border-color: var(--line-strong);
}
/* 체크됨 */
.custom-check input:checked + .check-mark {
    background: var(--accent);
    border-color: var(--accent-deep);
    animation: animCheckBounce var(--duration-moderate) var(--easing-spring);
}
.custom-check input:checked + .check-mark::after {
    opacity: 1;
    transform: scale(1);
}
/* 프레스 — 스쿼시 */
.custom-check:active .check-mark {
    transform: scale(0.85);
    transition-duration: var(--duration-instant);
}
/* 포커스 */
.custom-check input:focus-visible + .check-mark {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}
@keyframes animCheckBounce {
    0%   { transform: scale(0.8); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════
   Toggle Switch
   ═══════════════════════════════════════════ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: var(--s-7);
    height: var(--s-5-0);
    /* 터치 타겟 44px 보장 — 투명 패딩으로 히트 영역 확장 */
    padding: var(--s-3) 4px; /* 세로 (44-20)/2=12, 가로 (44-36)/2=4 */
    margin: -12px -4px; /* padding 상쇄하여 레이아웃 영향 없음 */
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--surface);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-spring),
                border-color var(--duration-base) var(--ease-spring),
                box-shadow var(--motion-hover);
}
.toggle-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: var(--s-3-5);
    height: var(--s-3-5);
    background: var(--text-sub);
    border-radius: 50%;
    /* 핸들 이동에 snap easing 적용 — 빠르게 도착 후 살짝 넘치고 안착 */
    transition: transform var(--duration-moderate) var(--ease-snap),
                background-color var(--motion-hover),
                box-shadow var(--motion-hover),
                width var(--duration-instant) var(--ease-out);
}
.toggle-switch:hover .toggle-slider {
    border-color: var(--line-strong);
}
.toggle-switch:hover .toggle-slider::before {
    background: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
}
.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--surface-active);
    border-color: var(--accent);
    animation: animToggleCelebrate var(--duration-moderate) var(--easing-spring);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background: var(--accent);
    box-shadow: var(--shadow-toggle-active);
}
/* 토글 활성화 시 잔상(trail) 효과 */
.toggle-switch input:checked + .toggle-slider::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: var(--s-3-5);
    height: var(--s-3-5);
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    animation: animToggleTrail var(--duration-moderate) var(--easing-out) forwards;
}
@keyframes animToggleTrail {
    0%   { opacity: 0.3; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(16px) scale(0.6); }
}
.toggle-switch:hover input:checked + .toggle-slider {
    border-color: var(--accent-deep);
    background: var(--accent-glow);
    transform: translateY(var(--hover-lift-sm));
}
/* 토글 :active 눌림 — 핸들 스쿼시 (횡방향 확대 + 캡슐 형태) */
.toggle-switch:active .toggle-slider::before {
    width: var(--s-4-5);
    border-radius: var(--radius-s);
    transition: width var(--duration-instant) var(--ease-spring), border-radius var(--duration-instant) var(--ease-spring);
}
.toggle-switch:active input:checked + .toggle-slider::before {
    transform: translateX(12px);
}

/* ══════════════════════════════════════════════════════════
   Skeleton Loading — 영역별 스켈레톤 플레이스홀더
   base .skeleton 클래스는 animations.css에 정의됨
   ══════════════════════════════════════════════════════════ */

/* 스켈레톤 컨테이너 — 부드러운 크로스페이드 퇴장 */
.skeleton-container {
    transition: opacity var(--duration-moderate) var(--easing-out),
                filter var(--duration-moderate) var(--easing-out),
                transform var(--duration-moderate) var(--easing-out);
}
.skeleton-container.skeleton-hidden {
    opacity: 0;
    filter: var(--glass-blur-xs);
    transform: scale(0.98);
    pointer-events: none;
    position: absolute;
}

/* 실제 콘텐츠 — 프리미엄 등장: 블러 해제 + 슬라이드업 + 페이드 */
.skeleton-loaded {
    animation: animContentReveal var(--duration-moderate) var(--easing-out) both;
}
@keyframes animContentReveal {
    from {
        opacity: 0;
        filter: var(--glass-blur-xs);
        transform: translateY(6px) scale(0.99);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

/* ── 에이전트 카드 스켈레톤 ──
   실제: .agent-card { padding: var(--s-3) var(--s-4); border-radius: var(--radius-s); min-height: 72px; }
         .agent-top { display: flex; gap: var(--s-2); margin-bottom: var(--s-1); }
         .agent-role, .agent-actions 행 */
.skeleton-agent-card {
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-height: var(--s-11);
}
/* .agent-top 대응 — dot + name + model + badge */
.skeleton-agent-top {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}
.skeleton-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-name {
    height: var(--s-3-5);
    width: var(--s-12);
    border-radius: var(--radius-s);
}
.skeleton-model {
    height: var(--s-3);
    width: calc(var(--s-8) + var(--s-1));
    border-radius: var(--radius-pill);
}
.skeleton-badge {
    height: var(--s-3);
    width: var(--s-8);
    border-radius: var(--radius-pill);
    margin-left: auto;
}
.skeleton-role {
    height: var(--s-2-5);
    width: var(--s-20);
    border-radius: var(--radius-s);
}
/* .agent-actions 대응 — 버튼 + 시간 (실제: gap: var(--s-1); margin-top: var(--s-1)) */
.skeleton-agent-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-1);
}
.skeleton-action-btn {
    height: var(--s-2-5);
    width: var(--s-7);
    border-radius: var(--radius-s);
}
.skeleton-time {
    height: var(--s-2-5);
    width: var(--s-7-5);
    border-radius: var(--radius-s);
    margin-left: auto;
}

/* ── 채팅 메시지 스켈레톤 ──
   실제: .msg { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-2); }
         .msg-avatar { width: 30px; height: 30px; border-radius: var(--radius-pill); }
         .msg-content > .msg-meta + .msg-text
         .msg-time { flex-shrink: 0; } */
.skeleton-chat-msg {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-2);
    border-radius: var(--radius-s);
}
.skeleton-avatar {
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}
.skeleton-msg-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
}
/* .msg-meta 대응 — from + arrow + to + type 인라인 */
.skeleton-msg-meta-row {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-bottom: var(--s-1);
}
.skeleton-msg-from {
    height: var(--s-3);
    width: var(--s-9-5);
    border-radius: var(--radius-s);
}
.skeleton-msg-arrow {
    height: var(--s-2);
    width: var(--s-2);
    border-radius: var(--radius-s);
}
.skeleton-msg-to {
    height: var(--s-3);
    width: var(--s-8-5);
    border-radius: var(--radius-s);
}
.skeleton-msg-type {
    height: var(--s-2-5);
    width: calc(var(--s-8) + var(--s-1));
    border-radius: var(--radius-pill);
}
.skeleton-msg-line {
    height: var(--s-2-5);
    border-radius: var(--radius-s);
}
/* .msg-time 대응 — 우측 상단 */
.skeleton-msg-time {
    height: var(--s-2);
    width: var(--s-6);
    border-radius: var(--radius-s);
    flex-shrink: 0;
    margin-top: var(--s-1);
}

/* ── Job 목록 스켈레톤 (V8 — 실제 .completed-job-item 1:1 대응) ──
   실제: .completed-job-item { align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--radius); position: relative; overflow: hidden; }
         ::before 좌측 상태 바 (2px, absolute)
         .completed-job-main > .completed-job-status-icon(32px) + .completed-job-info
         .cj-badge-row (상태 뱃지 행)
         .cj-actions 우측 버튼 영역 */
.skeleton-job-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: transparent;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
/* 좌측 상태 바 — ::before 2px (실제와 동일 구조) */
.skeleton-job-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--s-2);
    bottom: var(--s-2);
    width: 2px;
    border-radius: var(--radius-hairline);
    background: var(--surface-hover);
}
/* .completed-job-main 대응 */
.skeleton-job-main {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 1;
    min-width: 0;
}
/* .completed-job-status-icon 대응 — 실제: 32x32 원형 */
.skeleton-job-status {
    width: var(--s-6);
    height: var(--s-6);
    border-radius: 50%;
    flex-shrink: 0;
}
/* .completed-job-info 대응 */
.skeleton-job-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
/* .completed-job-title 대응 — title + badge 인라인 */
.skeleton-job-title-row {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.skeleton-job-title {
    height: var(--s-3);
    width: var(--card-min-sm);
    border-radius: var(--radius-s);
}
.skeleton-job-badge {
    height: var(--s-2-5);
    width: var(--s-7-5);
    border-radius: var(--radius-pill);
}
/* .cj-badge-row 대응 — 뱃지 행 플레이스홀더 */
.skeleton-job-badge-row {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-1);
}
.skeleton-job-meta {
    height: var(--s-2-5);
    width: clamp(100px, 18vw, 160px);
    border-radius: var(--radius-s);
}
/* .cj-actions 대응 (실제: gap: var(--s-1)) */
.skeleton-job-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-shrink: 0;
}

/* ── 통계 카드 스켈레톤 ──
   실제: .sd-stat-item { padding: var(--s-3); background: var(--bg); border-radius: var(--radius-s); } */
.skeleton-stat-card {
    background: var(--bg);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-height: var(--s-11);
}
.skeleton-stat-label {
    height: var(--s-2-5);
    width: var(--s-9-5);
    border-radius: var(--radius-s);
}
.skeleton-stat-value {
    height: var(--s-5-0);
    width: var(--s-12);
    border-radius: var(--radius-s);
}

/* ── 디비전 섹션 스켈레톤 ──
   실제: .division-section > .division-header + .division-body > .division-grid
         .division-header { gap: var(--s-2); padding: var(--s-1-5) var(--s-3); }
         .division-grid { gap: var(--s-2); padding: var(--s-1) var(--s-2); }
         chevron + emoji + name + count */
.skeleton-division {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-s);
}
.skeleton-division-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1-5) var(--s-3);
}
/* 쉐브론 플레이스홀더 — 실제: .division-chevron { font-size: var(--text-sm); width: 14px; } */
.skeleton-chevron {
    width: var(--s-3-5);
    height: var(--s-3-5);
    border-radius: var(--radius-s);
    flex-shrink: 0;
}
/* 이모지 플레이스홀더 — 실제: .division-emoji { font-size: var(--text-sm); } */
.skeleton-emoji {
    width: var(--s-3-5);
    height: var(--s-3-5);
    border-radius: var(--radius-s);
    flex-shrink: 0;
}
.skeleton-division-title {
    height: var(--s-2-5);
    width: var(--s-16);
    border-radius: var(--radius-s);
}
.skeleton-division-count {
    height: var(--s-2-5);
    width: var(--s-7-5);
    border-radius: var(--radius-s);
    opacity: 0.6;
}
.skeleton-division-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--agent-card-min, 220px), 1fr));
    gap: var(--s-2);
    padding: var(--s-1) var(--s-2);
}

/* ═══════════════════════════════════════════
   Inline Confirm — 파괴적 동작 인라인 확인 패턴
   "삭제" → "정말 삭제?" 인라인 변환 (모달 없이)
   ═══════════════════════════════════════════ */

/*
 * 사용법:
 * 1. 기본 버튼에 .inline-confirm 클래스 추가
 * 2. JS에서 첫 클릭 시 .is-confirming 클래스 토글
 * 3. data-label / data-confirm-label 속성으로 텍스트 전환
 * 4. 3초 후 자동 복귀 (JS setTimeout)
 *
 * HTML 예시:
 *   <button class="btn-ghost btn-sm inline-confirm"
 *           data-label="삭제"
 *           data-confirm-label="정말 삭제?">삭제</button>
 */

/* 기본 상태 — 평소 버튼과 동일 */
.inline-confirm {
    position: relative;
    overflow: hidden;
    transition:
        background-color var(--duration-base) var(--easing-out),
        color            var(--duration-base) var(--easing-out),
        box-shadow       var(--duration-base) var(--easing-out);
}

/* 확인 대기 상태 — 배경 red 전환 + 텍스트 강조 */
.inline-confirm.is-confirming {
    background: var(--clr-error-bg-lg);
    color: var(--clr-error-light);
    animation: inlineConfirmPulse var(--duration-moderate) var(--easing-spring);
}
.inline-confirm.is-confirming:hover {
    background: var(--clr-error-bg-xl);
    transform: translateY(var(--hover-lift-sm));
}

/* 확인 대기 중 미세 펄스 애니메이션 — 주의 환기 */
@keyframes inlineConfirmPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ── Token Health Status Panel ── */
.th-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-2);
}
.th-card {
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    transition: background var(--duration-base) var(--easing-out), transform var(--duration-base) var(--easing-out), box-shadow var(--duration-base) var(--easing-out);
    position: relative;
    overflow: hidden;
}
.th-card:hover { background: var(--surface-w5); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow); }

/* 상단: 서비스 아이콘 + 이름 + 상태 */
.th-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}
.th-card-service {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.th-card-icon {
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: var(--radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--surface-w5);
}
.th-card-icon svg { width: var(--s-4); height: var(--s-4); }
.th-card-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

/* 상태 뱃지 */
.th-status-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background var(--motion-state), box-shadow var(--motion-state);
}
.th-status-dot--healthy { background: var(--green); box-shadow: var(--shadow-dot-healthy); }
.th-status-dot--warning { background: var(--amber); box-shadow: var(--shadow-dot-warning); }
.th-status-dot--critical { background: var(--red); box-shadow: var(--shadow-dot-critical); animation: thPulse 2s infinite; }
.th-status-dot--unknown { background: var(--text-sub); }

@keyframes thPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 메트릭 행 */
.th-card-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.th-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
}
.th-metric-label { color: var(--text-sub); }
.th-metric-value { color: var(--text-sub); font-weight: var(--weight-medium); }
.th-metric-value--good { color: var(--green); }
.th-metric-value--warn { color: var(--amber); }
.th-metric-value--bad { color: var(--red); }

/* 갱신 버튼 */
.th-refresh-btn {
    width: 100%;
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w5);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.th-refresh-btn:hover { background: var(--surface-w10); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.th-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 전체 상태 뱃지 */
.th-overall-badge {
    font-size: var(--text-sm);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.th-overall-badge--healthy { background: var(--green-bg); color: var(--green); }
.th-overall-badge--warning { background: var(--amber-bg); color: var(--amber); }
.th-overall-badge--critical { background: var(--red-bg); color: var(--red); }

/* 스켈레톤 */
.th-card--skeleton {
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    padding: var(--s-4);
}
.th-card-skeleton-line {
    background: var(--surface-w5);
    border-radius: var(--radius-s);
    animation: thShimmer 1.5s infinite;
}
@keyframes thShimmer {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

/* 스케줄러 정보 바 */
.th-scheduler-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    background: var(--surface-w3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--text-sub);
    flex-wrap: wrap;
}
.th-scheduler-bar span { white-space: nowrap; }

/* ═══════════════════════════════════════════
   Contextual Tooltips (1회성 온보딩 팝오버)
   ═══════════════════════════════════════════ */
.ctx-tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    max-width: var(--layout-lg);
    pointer-events: auto;
    animation: animSpringIn 250ms var(--easing-spring-gentle) both;
}
/* .glass 또는 .glass--light 클래스와 조합 사용 */
.ctx-tooltip-body {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-float-layered);
}
.ctx-tooltip-icon {
    flex-shrink: 0;
    width: var(--s-4-5);
    height: var(--s-4-5);
    color: var(--accent);
}
.ctx-tooltip-text {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
    margin: 0;
}
.ctx-tooltip-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5-0);
    height: var(--s-5-0);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-sub);
    cursor: pointer;
    transition: background var(--motion-hover), color var(--motion-hover);
}
.ctx-tooltip-close:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
}
.ctx-tooltip-arrow {
    position: absolute;
    width: var(--s-2-5);
    height: var(--s-2-5);
    background: var(--bg-raised);
    transform: rotate(45deg);
}
.ctx-tooltip[data-pos="top"] .ctx-tooltip-arrow {
    bottom: -5px;
    left: var(--s-5);
}
.ctx-tooltip[data-pos="bottom"] .ctx-tooltip-arrow {
    top: -5px;
    left: var(--s-5);
}
.ctx-tooltip.ctx-tooltip--out {
    animation: animFadeOut var(--duration-exit) var(--easing-in) forwards;
}
@media (max-width: 640px) {
    .ctx-tooltip { max-width: calc(100vw - 32px); }

    /* 드로어 풀스크린 — 640px 이하에서 완전 화면 채움 */
    .drawer {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
}

/* ═══════════════════════════════════════════
   유틸리티: show/hide 토글
   JS에서 classList.add('hidden') / classList.remove('hidden') 사용
   ═══════════════════════════════════════════ */
.hidden { display: none !important; }

/* 레이아웃 유틸리티 — style.display 인라인 대체용 */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }

/* 간격 유틸리티 — 인라인 margin/padding 대체용 */
.ml-1 { margin-left: var(--s-1); }
.ml-2 { margin-left: var(--s-2); }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }

/* ── 레이아웃 유틸리티 (style.* 인라인 대체) ─────────── */
.no-pointer   { pointer-events: none; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-auto    { overflow: auto; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-start  { justify-content: flex-start; }
.flex-col       { flex-direction: column; }
.pos-relative   { position: relative; }
.text-center    { text-align: center; }
.opacity-0      { opacity: 0; }
.opacity-25     { opacity: 0.25; }
.gap-1          { gap: var(--s-1); }
.gap-2          { gap: var(--s-2); }
.gap-3          { gap: var(--s-3); }
.flex-wrap      { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.items-baseline { align-items: baseline; }

/* ── 컴포넌트 유틸 (cssText 인라인 대체) ────────────── */

/* 에러 힌트 — codex, prompts 등 errEl */
.err-hint { color: var(--red); font-size: var(--text-sm); margin-top: var(--s-1); }

/* 빈 상태 텍스트 — prompts emptyEl 등 (프리미엄 빈 상태) */
.text-empty {
    padding: var(--s-6) var(--s-4);
    text-align: center;
    color: var(--text-sub);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
    animation: animFadeIn 400ms var(--easing-out) both;
}

/* 고정 오버레이 중앙 정렬 — 모달/팝업용 (프리미엄 frosted glass) */
.overlay-center {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: var(--overlay-bg);
    backdrop-filter: var(--glass-blur-xs);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    animation: animFadeIn var(--motion-hover);
}

/* 팝업 카드 — overlay-center 내부 카드 (프리미엄 elevation + 입장) */
.popup-card {
    background: var(--bg-raised);
    border: 1px solid var(--surface-w8);
    border-radius: var(--radius);
    padding: var(--s-5);
    min-width: var(--layout-lg); max-width: var(--layout-xl);
    box-shadow: var(--shadow-popover);
    animation: animPopupEnter 300ms var(--easing-out) both;
}
@keyframes animPopupEnter {
    0%   { opacity: 0; transform: scale(0.95) translateY(8px); }
    60%  { opacity: 1; }
    100% { transform: none; }
}

/* 인라인 표시기 — 설정 패널 indicator */
.inline-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: var(--s-2);
}

/* 설정 패널 기본 스타일 */
.settings-panel-box {
    padding: var(--s-3);
    background: var(--surface-w5);
    border-radius: var(--radius-s);
    margin: var(--s-2) 0;
}

/* JD 오버레이 활성 상태 */
.jd-overlay-active {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    align-items: center; justify-content: center;
}

/* 레퍼런스 URL 확장 상태 */
.ref-url-expanded {
    overflow: visible;
    padding: var(--s-3) var(--s-4);
    margin: 0 var(--s-4) var(--s-2);
}

/* 모달 오버레이 — workflow 등 (frosted glass 통일) */
.modal-overlay-center {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay);
    backdrop-filter: var(--glass-blur-xs);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    z-index: 1000;
    display: flex; justify-content: center; align-items: center;
    animation: animFadeIn var(--motion-hover);
}

/* 토큰 입력 활성 상태 — JS inline style 대체 */
.token-input-active {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: var(--s-3);
}

/* 토큰 인증 가이드 메시지 — JS style.cssText 대체 */
.token-input-guide {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: color-mix(in srgb, var(--status-triaging) 8%, transparent);
    border: 1px solid var(--status-triaging-bg);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--status-triaging);
    margin-bottom: var(--s-3);
}

/* ── 환경변수 패널 (server-tools.js 인라인 → CSS) ─── */
.env-btn {
    padding: var(--s-1);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
}
.env-btn + .env-btn { margin-left: var(--s-1); }
.env-btn--danger {
    border-color: var(--clr-error-bg-strong);
    color: var(--clr-error);
}
.env-sensitive-badge {
    display: inline-block;
    margin-left: var(--s-1);
    padding: 1px var(--s-1);
    background: var(--clr-error-bg-lg);
    color: var(--clr-error);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    vertical-align: middle;
}
.env-source-badge {
    display: inline-block;
    padding: 1px var(--s-1);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.env-val-input {
    width: 100%;
    padding: var(--s-1);
    background: var(--bg-raised);
    border: 1px solid var(--accent);
    border-radius: var(--radius-s);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.env-btn-save {
    padding: var(--s-1);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-s);
    color: var(--bg);
    font-size: var(--text-sm);
    cursor: pointer;
    font-weight: var(--weight-medium);
}
.env-btn-cancel {
    padding: var(--s-1);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    margin-left: var(--s-1);
}

/* ── evolution 상세 아이템 (인라인 → CSS) ──────────── */
.evo-detail-items {
    margin-top: var(--s-1);
    border-top: 1px solid var(--line);
    padding-top: var(--s-1);
}

/* ── 컨텍스트 파일 목록 아이템 — access-control.js ─── */
.ctx-file-item {
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    cursor: pointer;
    transition: background var(--motion-hover), transform var(--duration-base) var(--easing-spring-bouncy), box-shadow var(--motion-hover);
}
.ctx-file-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-subtle); }
.ctx-file-item__name { color: var(--accent); font-weight: var(--weight-semibold); }
.ctx-file-item__meta { color: var(--text-sub); font-size: var(--text-sm); }
.ctx-file-item__preview {
    color: var(--text-sub); font-size: var(--text-sm);
    margin-top: var(--s-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 레퍼런스 미리보기 레이아웃 — reference.js ──── */
.ref-preview-col {
    display: flex; flex-direction: column;
    max-height: 100%; overflow-y: auto;
}
.ref-preview-col--center { align-items: center; }
.ref-preview-col--text-center { align-items: center; text-align: center; }
.ref-meta-row {
    display: flex; font-size: var(--text-sm); color: var(--text-sub);
}
.ref-section-toggle {
    cursor: pointer; background: none; color: var(--text);
    font-weight: var(--weight-semibold); font-size: var(--text-sm);
    display: flex; align-items: center; width: 100%; padding: 0;
}
.ref-content-scroll {
    max-height: 300px; overflow-y: auto;
    font-size: var(--text-sm); line-height: var(--leading-relaxed);
    padding: var(--s-2); color: var(--text-sub); white-space: pre-wrap;
}
.ref-method-badge {
    display: inline-flex; align-items: center;
    gap: var(--s-1); padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
}

/* 간격 유틸리티 추가 — reference.js 등 인라인 대체 */
.gap-s2 { gap: var(--s-2); }
.gap-s3 { gap: var(--s-3); }
.p-s3 { padding: var(--s-3); }
.p-s4 { padding: var(--s-4); }
.p-s5 { padding: var(--s-5); }

/* ── cssText 인라인 → CSS 클래스 전환 ──────────── */

/* 인증 필요 오버레이 — core.js showAuthOverlay */
.auth-required-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: var(--overlay-auth); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-4);
}
.auth-modal-box {
    width: min(560px, 96vw);
    background: var(--bg-raised);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius);
    padding: var(--s-5) var(--s-4);
    color: var(--text);
}
.auth-modal-title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
}
.auth-modal-desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.6;
}
.auth-login-btn {
    background: var(--green);
    color: var(--bg);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-s);
    text-decoration: none;
}

/* 서버 모드 전환 토스트 — core.js switchServerMode */
.server-switch-toast {
    position: fixed; top: calc(var(--topbar-h) + var(--s-3)); right: var(--s-4); z-index: var(--z-toast);
    background: var(--accent-deep-solid); color: white;
    padding: var(--s-3) var(--s-4); border-radius: var(--radius-s);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    box-shadow: var(--shadow-lg);
    animation: slideInRight var(--duration-moderate, 0.3s) var(--ease-out, ease);
}

/* 터치 드래그 클론 공통 — agents.js 드래그 앤 드롭 */
.touch-drag-clone {
    position: fixed; z-index: 10000;
    pointer-events: none; opacity: 0.85;
    background: var(--bg-raised); border-radius: var(--radius-s);
    box-shadow: var(--shadow-lg); will-change: transform;
}

/* 스킬 큐 드래그 클론 추가 레이아웃 */
.touch-drag-clone--flex {
    display: flex; align-items: center;
    gap: var(--s-1); padding: var(--s-1);
}

/* ── 인증 설정 위저드 (Auth Setup Wizard) ── */
.auth-setup-card {
    background: var(--bg-raised);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out);
}
.auth-setup-card:hover { transform: translateY(var(--hover-lift-sm)); box-shadow: var(--shadow-card-hover); }
.auth-setup-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    cursor: pointer; user-select: none;
    transition: background var(--duration-fast) var(--easing-out);
}
.auth-setup-card-header:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.auth-setup-card-info { flex: 1; min-width: 0; }
.auth-setup-card-title {
    display: flex; align-items: center; gap: var(--s-1);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text);
}
.auth-setup-card-title svg { color: var(--text-sub); flex-shrink: 0; }
.auth-setup-card-desc { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }
.auth-setup-card-right { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.auth-setup-badge {
    font-size: var(--text-sm); padding: var(--s-1) var(--s-1); border-radius: var(--radius-pill);
    background: var(--bg-raised); color: var(--text-sub); white-space: nowrap;  /* WCAG AA: --text-faint는 --bg-raised 위 ~4.4:1 미충족 → --text-sub(5.2:1) */
}
.auth-setup-badge.configured { background: var(--surface-active); color: var(--accent); }
.auth-setup-chevron { color: var(--text-sub); transition: transform var(--duration-fast) var(--easing-out); flex-shrink: 0; }  /* WCAG AA: --text-faint → --text-sub */
.auth-setup-card-body { padding: 0 var(--s-4) var(--s-4); }
/* 사전 조건 안내 박스 */
.auth-setup-prereq {
    display: flex; gap: var(--s-1); align-items: flex-start;
    padding: var(--s-2); margin-bottom: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-relaxed);
}
.auth-setup-prereq svg { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
/* 스텝 목록 */
.auth-setup-steps { display: flex; flex-direction: column; gap: var(--s-3); }
.auth-setup-step { display: flex; gap: var(--s-2); }
.auth-setup-step-num {
    width: var(--s-5); height: var(--s-5); border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    background: var(--surface-active); color: var(--accent);
    transition: background var(--duration-normal, 200ms) var(--easing-out, ease-out),
                color var(--duration-normal, 200ms) var(--easing-out, ease-out),
                box-shadow var(--duration-normal, 200ms) var(--easing-out, ease-out);
}
/* 위저드 단계 상태별 토큰 매핑 (active/done/inactive) */
.auth-setup-step--inactive .auth-setup-step-num {
    background: var(--surface);
    color: var(--text-sub);
}
.auth-setup-step--active .auth-setup-step-num {
    background: var(--surface-active);
    color: var(--accent);
    box-shadow: var(--shadow-ring-accent);
}
.auth-setup-step--done .auth-setup-step-num {
    background: var(--green-bg, rgba(34,197,94,0.10));
    color: var(--green, #22c55e);
}
/* 미완료 단계 텍스트 흐리게 */
.auth-setup-step--inactive .auth-setup-step-title,
.auth-setup-step--inactive .auth-setup-step-desc,
.auth-setup-step--inactive .auth-setup-step-note { opacity: 0.5; }
/* 완료 단계 제목 보조 색상 */
.auth-setup-step--done .auth-setup-step-title { color: var(--text-sub); }
.auth-setup-step-content { flex: 1; min-width: 0; }
.auth-setup-step-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--s-1); }
.auth-setup-step-desc { font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-relaxed); }
.auth-setup-step-desc code { color: var(--accent); font-family: var(--font-mono); font-size: var(--text-sm); }
.auth-setup-step-note { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); line-height: var(--leading-normal); }  /* WCAG AA: --text-faint → --text-sub */
/* OS 힌트 (터미널 열기 안내) */
.auth-setup-os-hints { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.auth-setup-os-hint {
    display: flex; align-items: center; gap: var(--s-1);
    font-size: var(--text-sm); color: var(--text-sub);
}
.auth-setup-os-label {
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    padding: 1px var(--s-1); border-radius: var(--radius-s);
    background: var(--bg-raised); color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
}
/* 명령어 복사 박스 */
.auth-setup-cmd {
    display: inline-flex; align-items: center; gap: var(--s-1);
    margin-top: var(--s-1); padding: var(--s-1) var(--s-2);
    background: var(--bg); border-radius: var(--radius-s);
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent);
    cursor: pointer; user-select: all;
}
.auth-setup-cmd:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.auth-setup-cmd svg { color: var(--text-sub); flex-shrink: 0; }  /* WCAG AA: --text-faint → --text-sub */
.auth-setup-cmd code { font-family: var(--font-mono); font-size: inherit; color: inherit; }
.auth-setup-cmd-inline {
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent);
    cursor: pointer;
}
.auth-setup-cmd-inline:hover { text-decoration: underline; transform: translateY(var(--hover-lift-sm)); }
.auth-setup-cmd-inline code {
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent);
    padding: 1px var(--s-1); background: var(--bg); border-radius: var(--radius-s);
}
/* 입력 필드 */
.auth-setup-input-wrap {
    display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-1);
}
.auth-setup-input-group {
    display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2);
}
.auth-setup-field { display: flex; flex-direction: column; gap: var(--s-1); }
.auth-setup-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-sub); }
.auth-setup-input,
.auth-setup-text-input {
    width: 100%; padding: var(--s-1) var(--s-2);
    background: var(--bg); border: none; border-radius: var(--radius-s);
    color: var(--text); font-size: var(--text-sm); font-family: var(--font-mono);
    outline: none; resize: vertical;
}
.auth-setup-input:focus,
.auth-setup-text-input:focus { box-shadow: var(--shadow-outline-ring); }
.auth-setup-input::placeholder,
.auth-setup-text-input::placeholder { color: var(--text-sub); font-family: var(--font-mono); }  /* WCAG AA: --text-faint → --text-sub */
/* 저장 버튼 */
.auth-setup-save-btn {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--surface-active);
    color: var(--accent); border: none; border-radius: var(--radius-s);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
    /* transition → animations.css §10b Tier 3 단일 권위 선언으로 통합 */
}
.auth-setup-save-btn:hover { background: var(--surface-active); transform: translateY(var(--hover-lift-sm)); }
.auth-setup-save-btn:active { transform: scale(0.97); }
.auth-setup-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 피드백 메시지 */
.auth-setup-feedback {
    font-size: var(--text-sm); margin-top: var(--s-1);
    /* transition → animations.css §10b Tier 3 단일 권위 선언으로 통합 */
}
.auth-setup-feedback.success { color: var(--accent); }
.auth-setup-feedback.error { color: var(--clr-error); }
/* 문제 해결 (details/summary) */
.auth-setup-troubleshoot {
    margin-top: var(--s-3); font-size: var(--text-sm); color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
}
.auth-setup-troubleshoot summary {
    cursor: pointer; color: var(--text-sub);
    padding: var(--s-1) 0;
}
.auth-setup-troubleshoot summary:hover { color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.auth-setup-troubleshoot-body {
    padding: var(--s-2);
    background: var(--bg); border-radius: var(--radius-s);
    line-height: var(--leading-loose);
}
.auth-setup-troubleshoot-body p { margin: var(--s-1) 0; }
.auth-setup-troubleshoot-body code { color: var(--accent); font-family: var(--font-mono); font-size: var(--text-sm); }
/* 카테고리 헤더 (필수 인증 / 외부 연동) */
.auth-setup-category {
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    padding: var(--s-1) 0;
}
/* 연결 테스트 버튼 */
.auth-setup-test-btn {
    padding: var(--s-1) var(--s-2); border: none; border-radius: var(--radius-pill);
    background: var(--bg-raised); color: var(--text-sub);
    font-size: var(--text-sm); cursor: pointer;
    transition: background var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out);
    white-space: nowrap;
}
.auth-setup-test-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.auth-setup-test-btn:active { transform: scale(0.97); transition-duration: var(--duration-instant); }
/* 설정 완료 시 카드 헤더에 미세한 상태 표시 */
.auth-setup-card.configured .auth-setup-card-title svg { color: var(--accent); }
/* 기존 설정 값 표시 (마스킹) */
.auth-setup-current {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-2); margin-bottom: var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); color: var(--text-sub);
}
.auth-setup-current svg { flex-shrink: 0; color: var(--accent); }
.auth-setup-current code { font-family: var(--font-mono); color: var(--accent); font-size: var(--text-sm); }

/* 초기 설정 안내 배너 (비개발자 온보딩) */
.aw-welcome-inner {
    display: flex; align-items: flex-start; gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius);
    font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-relaxed);
}
.aw-welcome-inner svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.aw-welcome-inner strong { color: var(--text); font-weight: var(--weight-semibold); }

/* ── Admin/User 2-Tier 역할 구분 ── */

/* 역할 배너 — 계정 관리 탭 최상단에 현재 모드 표시 */
.auth-role-banner {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    margin-bottom: var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); color: var(--text-sub);
}
.auth-role-banner svg { flex-shrink: 0; width: var(--s-3-5); height: var(--s-3-5); }
.auth-role-banner .auth-role-label {
    font-weight: var(--weight-semibold); color: var(--text);
}

/* Commander 전용 — "관리자에게 요청" 안내 블록 (카드 body 내) */
.auth-setup-admin-notice {
    display: flex; align-items: flex-start; gap: var(--s-1);
    padding: var(--s-2);
    background: var(--surface);
    border-radius: var(--radius-s);
    font-size: var(--text-sm); color: var(--text-sub); line-height: var(--leading-relaxed);
}
.auth-setup-admin-notice svg { flex-shrink: 0; color: var(--text-sub); margin-top: 1px; }

/* Commander 전용 — 읽기 전용 상태 요약 (카드 body에서 위저드 대신 표시) */
.auth-setup-status-row {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) 0;
    font-size: var(--text-sm); color: var(--text-sub);
}
.auth-setup-status-row .status-dot {
    width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; flex-shrink: 0;
}
.auth-setup-status-row .status-dot.connected { background: var(--green); }
.auth-setup-status-row .status-dot.disconnected { background: var(--text-sub); }
.auth-setup-status-row .status-label { color: var(--text); font-weight: var(--weight-medium); }
.auth-setup-status-row .status-value { color: var(--text-sub); }

/* ── 인증 설정 위저드 반응형 ── */
@media (max-width: 768px) {
    .auth-setup-card-header {
        flex-direction: column; align-items: flex-start; gap: var(--s-1);
    }
    .auth-setup-card-right {
        width: 100%; justify-content: flex-end;
    }
    .auth-setup-card-body { padding: 0 var(--s-2) var(--s-2); }
    .auth-setup-cmd {
        width: 100%; box-sizing: border-box;
        overflow-x: auto; white-space: nowrap;
    }
    .auth-setup-save-btn { width: 100%; justify-content: center; }
    .auth-setup-prereq { flex-direction: column; }
    .aw-welcome-inner { flex-direction: column; }
}
@media (max-width: 640px) {
    .auth-setup-step { flex-direction: column; gap: var(--s-1); }
    .auth-setup-step-num { align-self: flex-start; }
    .auth-setup-os-hints { flex-direction: column; }
    .auth-setup-current { flex-direction: column; align-items: flex-start; }
    .auth-setup-input,
    .auth-setup-text-input { font-size: var(--fs-reading); /* iOS 확대 방지 */ }
}
@media (max-width: 375px) {
    .auth-setup-card-header { padding: var(--s-2); }
    .auth-setup-card-body { padding: 0 var(--s-1) var(--s-1); }
    .auth-setup-step-title { font-size: var(--text-sm); }
    .auth-setup-step-desc { font-size: var(--text-sm); }
}

/* ══════════════════════════════════════════════════════════
   Typography Hierarchy — 시맨틱 타이포그래피 유틸리티
   Linear/Vercel/Notion 급 타이포 위계 시스템
   ══════════════════════════════════════════════════════════ */

/* 디스플레이 — 히어로, 대형 빈상태 */
.typo-display {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tightest);
    color: var(--text);
}

/* H1 — 페이지 최상위 제목 */
.typo-h1 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text);
}

/* H2 — 섹션 제목 */
.typo-h2 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

/* H3 — 카드/패널 제목 */
.typo-h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

/* H4 — 소형 제목 */
.typo-h4 {
    font-size: var(--text-reading);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}

/* Body — 기본 본문 */
.typo-body {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}

/* Body Small — 보조 본문 */
.typo-body-sm {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-sub);
}

/* Caption — 보조 설명, 타임스탬프 */
.typo-body-sm {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub);
}

/* Label — 폼 라벨, UI 소형 라벨 */
.typo-body-sm {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub);
}

/* Overline — 대문자 소형 라벨 (SECTION, STATUS) */
.typo-overline {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
}

/* Mono — 코드, 수치 */
.typo-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
}

/* ═══════════════════════════════════════════
   18. Content Appear Utilities
   동적으로 삽입되는 콘텐츠에 부드러운 등장 애니메이션.
   JS에서 요소 생성 후 클래스 추가로 사용.
   ═══════════════════════════════════════════ */
.u-appear {
    animation: slideUp var(--motion-hover) both;
}
.u-appear-slow {
    animation: slideUp var(--duration-moderate) var(--easing-out) both;
}
.u-appear-fade {
    animation: fadeIn var(--motion-hover) both;
}

/* 순차 등장 — stagger 딜레이 (JS에서 --appear-delay 설정) */
.u-appear-stagger {
    animation: slideUp var(--motion-hover) both;
    animation-delay: var(--appear-delay, 0ms);
}

/* 프리미엄 스프링 등장 — 모달/카드 신규 삽입 시 */
.u-appear-spring {
    animation: animSpringIn 350ms var(--easing-spring-gentle) both;
}

/* 감속 축소 퇴장 — 요소 제거 전 사용 */
.u-disappear {
    animation: animFadeOut var(--motion-hover) both;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   Typography Hierarchy — 토큰 기반 체계적 위계
   Linear/Vercel 급 타이포그래피 정밀도
   ═══════════════════════════════════════════ */

/* 디스플레이 — 히어로, 대형 수치, 빈 상태 */
.type-display {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tightest);
    color: var(--text);
}

/* H1 — 페이지/패널 최상위 제목 */
.type-h1 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text);
}

/* H2 — 섹션 제목, 모달 타이틀 */
.type-h2 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

/* H3 — 카드 헤더, 소제목 */
.type-h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

/* H4 — 인라인 헤딩, 그룹 제목 */
.type-h4 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}

/* Body — 일반 본문 텍스트 */
.type-body {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}

/* Body Small — 목록 아이템, 보조 설명 */
.type-body-sm {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text);
}

/* Caption — 보조 텍스트, 시간, 메타데이터 */
.type-caption {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    color: var(--text-sub);
}

/* Label — 폼 라벨, 섹션 라벨, 필터 태그 */
.type-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
}

/* Overline — 미세 카테고리 표시, 상태 라벨 */
.type-overline {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub (카드/패널 내부 사용 시 AA 미충족 방지) */
}

/* Mono — 코드, 수치, 기술 데이터 */
.type-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
    font-variant-numeric: tabular-nums;
}

/* Numeric — 점수/통계 전용 (가독성 최적화) */
.type-numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: var(--tracking-tight);
}

/* ═══════════════════════════════════════════
   Enhanced Input Group — 라벨+필드 일관 패턴
   ═══════════════════════════════════════════ */

/* 입력 그룹: 라벨 + 입력 필드 + 힌트 */
.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.input-group__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}
.input-group__hint {
    font-size: var(--text-sm);
    color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
    line-height: var(--leading-snug);
}
.input-group__error {
    font-size: var(--text-sm);
    color: var(--red);
    line-height: var(--leading-snug);
}

/* 입력 필드 그룹 내부 포커스 시 라벨 색상 변경 */
.input-group:focus-within .input-group__label {
    color: var(--accent);
    transition: color var(--motion-hover);
}

/* ═══════════════════════════════════════════
   Tab Bar — 패널/탭 전환 인디케이터
   ═══════════════════════════════════════════ */

/* 탭 바 컨테이너 */
.tab-bar {
    display: flex;
    gap: var(--s-1);
    position: relative;
}

/* 탭 아이템 — 프리미엄 마이크로 인터랙션 */
.tab-bar__item {
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    cursor: pointer;
    position: relative;
    border-radius: var(--radius-s);
    transition: color var(--motion-hover),
                background-color var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy);
}
.tab-bar__item:hover {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.tab-bar__item:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.tab-bar__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-ring);
}
.tab-bar__item.active {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* 탭 인디케이터 — 밑줄 슬라이드 */
.tab-bar__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: var(--radius-hairline);
    transition: width var(--duration-base) var(--easing-spring),
                left var(--duration-base) var(--easing-spring);
}
.tab-bar__item.active::after,
.tab-bar__item:hover::after {
    width: 100%;
    left: 0;
}
.tab-bar__item:hover:not(.active)::after {
    background: var(--surface-active);
    transform: translateY(var(--hover-lift-sm));
}

/* ═══════════════════════════════════════════
   Select Chevron Animation
   ═══════════════════════════════════════════ */

/* select 열림 시 chevron 회전 (JS에서 .is-open 클래스 토글) */
.select-wrap {
    position: relative;
}
.select-wrap::after {
    content: '';
    position: absolute;
    right: var(--s-3);
    top: 50%;
    width: var(--s-2-5);
    height: var(--s-2-5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238b8b92' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: transform var(--duration-base) var(--easing-spring);
    pointer-events: none;
}
.select-wrap.is-open::after {
    transform: translateY(-50%) rotate(180deg);
}

/* ═══════════════════════════════════════════
   Divider — 시맨틱 구분선 (border 대안)
   ═══════════════════════════════════════════ */

/* 수평 구분선 — border 대신 배경 그라데이션 */
.divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--line) 15%,
        var(--line) 85%,
        transparent 100%
    );
    margin: var(--s-3) 0;
}

/* 라벨 포함 구분선 */
.divider-label {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-3) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
}
.divider-label::before,
.divider-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ═══════════════════════════════════════════
   Empty State — 빈 상태 패턴
   ═══════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-4);
    text-align: center;
}
.empty-state__icon {
    font-size: var(--text-8xl);
    color: var(--text-sub);  /* WCAG AA: --text-faint → --text-sub */
    opacity: 0.4;
}
.empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
}
.empty-state__desc {
    font-size: var(--text-sm);
    color: var(--text-sub);
    max-width: var(--layout-lg);
    line-height: var(--leading-normal);
}

/* ═══════════════════════════════════════════
   Surface Depth — 깊이감 시스템
   ═══════════════════════════════════════════ */

/* 3단계 깊이: base → raised → floating */
.surface-base { background: var(--bg); box-shadow: none; }
.surface-raised { background: var(--bg-raised); box-shadow: var(--shadow-subtle); }
.surface-floating {
    background: var(--bg-overlay);
    box-shadow: var(--shadow-lg);
}

/* 인터랙티브 서피스 — hover 시 깊이 변화 */
.surface-interactive {
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
    transition: background var(--motion-hover),
                box-shadow var(--duration-moderate) var(--ease-out),
                transform var(--duration-base) var(--easing-spring);
}
.surface-interactive:hover {
    background: var(--surface-hover);
    box-shadow: var(--shadow-float);
    transform: translateY(var(--hover-lift-sm));
}
.surface-interactive:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}

/* ═══════════════════════════════════════════
   20. Premium Micro-Interactions
   Linear/Vercel/Notion 급 인터랙션 polish.
   ═══════════════════════════════════════════ */

/* ── 20.1 Status Badge 상태 전환 스케일 펌프 ── */
.status-badge { transform: scale(1); }
.status-badge.s-running,
.status-badge.s-working {
    animation: statusEnter var(--duration-base) var(--easing-spring) both;
}
@keyframes statusEnter {
    0%   { transform: scale(0.85); opacity: 0.5; }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── 20.2 Select 포커스 미세 확대 + 캐럿 accent ── */
select:focus { transform: scale(1.005); }
/* Select :active 눌림 — 클릭 시 미세 축소 + 빠른 복귀 */
select:active {
    transform: scale(0.98);
    transition-duration: var(--duration-instant);
}

/* ── 20.3 콘텐츠 등장 — skeleton→content 크로스페이드 ── */
.content-reveal {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-moderate) var(--easing-out),
                transform var(--duration-moderate) var(--easing-out);
}
.content-reveal.content-loaded { opacity: 1; transform: none; }

/* ── 20.4 패널 전환 크로스페이드 ── */
.panel-fade { animation: panelEnter var(--duration-moderate) var(--easing-out) both; }
@keyframes panelEnter {
    from { opacity: 0; transform: translateY(4px) scale(0.995); }
    to   { opacity: 1; transform: none; }
}

/* ── 20.5 리스트 아이템 순차 등장 (stagger) ── */
.stagger-item {
    opacity: 0; transform: translateY(8px);
    animation: staggerIn var(--duration-base) var(--easing-out) both;
    animation-delay: calc(var(--stagger-i, 0) * 30ms);
}
@keyframes staggerIn { to { opacity: 1; transform: none; } }

/* ── 20.6 카드 상태별 앰비언트 글로우 ── */
.agent-card.s-running {
    box-shadow: var(--shadow-card-running);
}
.agent-card.s-running:hover {
    box-shadow: var(--shadow-card-running-hover);
    transform: translateY(var(--hover-lift-sm));
}
.agent-card.s-error {
    box-shadow: var(--shadow-card-error);
}
.agent-card.s-error:hover {
    box-shadow: var(--shadow-card-error-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 20.7 아코디언 바디 부드러운 전개 ── */
.toggle-body-anim {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height var(--duration-moderate) var(--easing-out),
                opacity var(--duration-base) var(--easing-out);
}
.toggle-body-anim.open { max-height: 2000px; opacity: 1; }

/* ── 20.8 버튼 로딩 상태 ── */
.btn-loading {
    position: relative; pointer-events: none; color: transparent !important;
}
.btn-loading::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: var(--s-3-5); height: var(--s-3-5);
    border: 2px solid var(--text-sub); border-top-color: var(--accent);
    border-radius: 50%; animation: spin var(--duration-slower) linear infinite;
}

/* ── 20.9 프리미엄 포커스 링 글로우 ── */
.btn:focus-visible, .btn-ghost:focus-visible, .btn-fill:focus-visible {
    animation: focusRingPulse var(--duration-base) var(--easing-out);
}
@keyframes focusRingPulse {
    0%   { box-shadow: var(--shadow-ring-dim-zero); }
    100% { box-shadow: var(--shadow-focus-ring); }
}

/* ── 20.10 입력 캐럿 accent ── */
.input:focus, .textarea:focus, input:focus, textarea:focus { caret-color: var(--accent); }

/* ── 20.11 Tooltip/Popover 등장 ── */
/* 툴팁 — .glass 또는 .glass--light 클래스와 조합 사용 */
.tooltip-anim {
    opacity: 0; transform: translateY(4px) scale(0.96);
    pointer-events: none;
    transition: opacity var(--duration-base) var(--easing-out),
                transform var(--duration-base) var(--easing-spring);
}
.tooltip-anim.tooltip-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ── 20.12 Badge 카운트 변경 범프 ── */
/* 프리미엄 카운트 범프 — 스프링 오버슈트 + 밝기 플래시 */
.count-bump {
    animation: countBump var(--duration-moderate) var(--easing-spring);
    will-change: transform, filter;
}
@keyframes countBump {
    0%   { transform: scale(1);    filter: brightness(1); }
    30%  { transform: scale(1.3);  filter: brightness(1.3); }
    55%  { transform: scale(0.92); filter: brightness(1.05); }
    75%  { transform: scale(1.06); filter: brightness(1); }
    100% { transform: scale(1);    filter: brightness(1); }
}

/* ── 20.14 링크 호버 언더라인 애니메이션 ── */
.link-anim {
    color: var(--accent);
    text-decoration: none;
    position: relative;
    transition: color var(--motion-hover);
}
.link-anim::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--duration-base) var(--easing-spring);
}
.link-anim:hover { color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.link-anim:hover::after { width: 100%; }
.link-anim:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-s); }

/* ── 20.15 (panel-fade §20.4에 정의됨 — 별칭 유지) ── */

/* ── 20.16 리스트 아이템 인터랙티브 행 (Tier 2 호버) ── */
.list-row {
    display: flex;
    align-items: center;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background-color var(--motion-hover),
                color var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy),
                box-shadow var(--motion-hover);
}
.list-row:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.list-row:active { background: var(--surface-active); }
.list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.list-row.active { background: var(--surface-active); color: var(--accent); }

/* ── 20.17 글래스 카드 — .glass 또는 .glass--light 클래스와 조합 사용 ── */
.glass-card {
    border-radius: var(--radius-card);
    transition: box-shadow var(--duration-moderate) var(--ease-out),
                transform var(--duration-base) var(--easing-spring);
}
.glass-card:hover {
    box-shadow: var(--shadow-glass-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 20.18 스크롤 쉐도우 인디케이터 — 오버플로우 컨테이너 깊이감 ── */
.scroll-shadow {
    position: relative;
}
.scroll-shadow::before,
.scroll-shadow::after {
    content: '';
    position: sticky;
    left: 0;
    right: 0;
    height: var(--s-4);
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--duration-base) var(--easing-out);
}
.scroll-shadow::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg-raised) 0%, transparent 100%);
}
.scroll-shadow::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg-raised) 0%, transparent 100%);
}

/* ── 20.19 엠프티 스테이트 프리미엄 애니메이션 ── */
.empty-state {
    animation: animContentEnterScale var(--duration-moderate) var(--easing-out) both;
}
.empty-state-icon {
    transition: transform var(--duration-moderate) var(--easing-spring);
}
.empty-state:hover .empty-state-icon {
    transform: scale(1.08) rotate(-3deg);
}

/* ═══════════════════════════════════════════
   20.21  모달 글래스 백드롭
   ═══════════════════════════════════════════ */
.modal-backdrop-glass {
    backdrop-filter: var(--glass-blur-xs) saturate(120%);
    -webkit-backdrop-filter: var(--glass-blur-xs) saturate(120%);
    background: var(--overlay-modal-glass);
    transition: opacity var(--duration-moderate) var(--easing-out),
                backdrop-filter var(--duration-moderate) var(--easing-out);
}

/* 모달 박스 진입 애니메이션 (spring) */
.modal-enter {
    animation: animModalEnter var(--duration-moderate) var(--easing-spring-gentle) both;
}
@keyframes animModalEnter {
    0%   { opacity: 0; transform: scale(0.94) translateY(12px); }
    60%  { opacity: 1; transform: scale(1.01) translateY(-2px); }
    100% { transform: none; }
}

/* ═══════════════════════════════════════════
   20.22  아코디언 v2 — grid 기반 부드러운 전개
   max-height 방식의 점프 없는 자연스러운 높이 전환.
   사용: JS에서 .accordion-open 클래스 토글.
   ═══════════════════════════════════════════ */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-moderate) var(--easing-out),
                opacity var(--duration-base) var(--easing-out);
    opacity: 0;
}
.accordion-content.accordion-open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.accordion-content > .accordion-inner {
    overflow: hidden;
    min-height: 0;
}

/* ═══════════════════════════════════════════
   20.23  카드 호버 어센트 보더 글로우
   미세한 accent 컬러 가장자리 글로우.
   ═══════════════════════════════════════════ */
.card-hover-accent {
    transition: box-shadow var(--duration-base) var(--easing-out),
                transform var(--duration-base) var(--easing-spring);
}
.card-hover-accent:hover {
    box-shadow: var(--shadow-float),
                0 0 0 1px var(--surface-w10),
                0 0 20px var(--surface-w5);
    transform: translateY(var(--hover-lift-sm));
}
.card-hover-accent:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
    box-shadow: none;
}

/* ═══════════════════════════════════════════
   20.24  슬라이딩 탭 인디케이터 (JS 제어)
   JS에서 .tab-indicator의 --tab-x, --tab-w 변수를 설정.
   ═══════════════════════════════════════════ */
.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: var(--radius-hairline);
    background: var(--accent);
    transform: translateX(var(--tab-x, 0));
    width: var(--tab-w, 0);
    transition: transform var(--duration-base) var(--easing-spring),
                width var(--duration-base) var(--easing-spring);
    will-change: transform, width;
    box-shadow: var(--shadow-toggle-glow);
}

/* ═══════════════════════════════════════════
   20.25  넘버 카운터 스무스 전환
   tabular-nums + transition으로 부드러운 숫자 변화.
   ═══════════════════════════════════════════ */
.num-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transition: transform var(--duration-fast) var(--easing-spring),
                opacity var(--duration-fast) var(--easing-out);
}
.num-counter.num-up {
    animation: numSlideUp var(--duration-fast) var(--easing-spring) both;
}
.num-counter.num-down {
    animation: numSlideDown var(--duration-fast) var(--easing-spring) both;
}
@keyframes numSlideUp {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: none; }
}
@keyframes numSlideDown {
    0%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════
   20.5 Responsive — 1024px 태블릿 가로
   iPad 가로(1024×768), iPad Pro 등 태블릿 최적화
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* 드로어 — 태블릿에서 좀 더 넓게 */
    .drawer {
        width: min(1100px, 96vw);
        height: min(85vh, 780px);
    }
    .drawer-header {
        padding: var(--s-3) var(--s-4);
    }
    .drawer-col {
        padding: var(--s-3);
    }

    /* 모달 — 패딩 미세 축소 */
    .modal-box, .modal-content {
        padding: var(--s-5);
    }

    /* 에이전트 그리드 — 카드 간격 축소 */
    #agent-grid {
        gap: var(--s-2);
    }
    .agent-division-grid {
        gap: var(--s-2);
    }

    /* 에이전트 카드 — 패딩 미세 축소 */
    .agent-card {
        padding: var(--s-2) var(--s-3);
    }

    /* 설정 카드 — 패딩 조정 */
    .setting-card {
        padding: var(--s-4);
    }

    /* 빈 상태 — 패딩 축소 */
    .empty-state {
        padding: var(--s-8) var(--s-5);
    }
}

/* ═══════════════════════════════════════════
   21. Responsive — 960px 태블릿 조정
   ═══════════════════════════════════════════ */
@media (max-width: 960px) {
    /* 모달 → 폭 확대 */
    .modal-box, .modal-content {
        width: 95vw;
        max-width: 95vw;
        padding: var(--s-4);
    }

    /* 탭 바 → 수평 스크롤 */
    .tab-bar {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-bar__item { flex-shrink: 0; }

    /* config chips → 수평 스크롤 */
    .config-chips {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .config-chips::-webkit-scrollbar { display: none; }
    .config-chip { flex-shrink: 0; }

    /* 에이전트 그리드 — 태블릿에서 카드 최소폭 축소 */
    #agent-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--s-2);
    }

    /* 에이전트 카드 — 패딩 축소 */
    .agent-card {
        padding: var(--s-2) var(--s-3);
        min-height: var(--s-10);
    }

    /* 디비전 그리드 — 카드 최소폭 축소 */
    .agent-division-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--s-2);
    }

    /* 3열 그리드 → 2열 */
    .grid-3col {
        grid-template-columns: 1fr 1fr;
    }

    /* 빈 상태 — 패딩 축소 */
    .empty-state {
        padding: var(--s-6) var(--s-4);
    }

    /* 타이포 위계 — 태블릿 미세 축소 */
    .typo-display { font-size: var(--text-xl); }
    .typo-h1 { font-size: var(--text-lg); }
    .type-display { font-size: var(--text-xl); }
    .type-h1 { font-size: var(--text-lg); }
    /* heading 유틸리티 — 태블릿 letter-spacing 완화 */
    .heading-xl { letter-spacing: var(--tracking-tight); }
    .heading-lg { letter-spacing: var(--tracking-tight); }
}

/* ═══════════════════════════════════════════
   21.5 Responsive — 768px 모바일/태블릿 경계
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 에이전트 그리드 — 2열 고정 */
    #agent-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-2);
    }

    /* 디비전 그리드 — 2열 */
    .agent-division-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-2);
    }

    /* 3열 → 1열 */
    .grid-3col {
        grid-template-columns: 1fr;
    }

    /* 에이전트 카드 — 컴팩트 */
    .agent-card {
        padding: var(--s-2);
        min-height: var(--s-9);
    }
    .agent-card .agent-role { font-size: var(--text-sm); }
    .agent-card .agent-task { font-size: var(--text-sm); }

    /* 빈 상태 — 모바일 */
    .empty-state {
        padding: var(--s-5) var(--s-3);
    }
    .empty-state-icon svg { width: var(--s-6); height: var(--s-6); }
    .empty-state-title { font-size: var(--text-base); }

    /* 타이포 위계 — 모바일 축소 */
    .typo-display { font-size: var(--text-lg); }
    .typo-h1 { font-size: var(--text-lg); }
    .typo-h2 { font-size: var(--text-base); }
    .type-display { font-size: var(--text-lg); }
    .type-h1 { font-size: var(--text-lg); }
    .type-h2 { font-size: var(--text-base); }
    /* heading 유틸리티 — 모바일 축소 */
    .heading-xl { font-size: var(--text-lg); letter-spacing: var(--tracking-normal); }
    .heading-lg { font-size: var(--text-base); letter-spacing: var(--tracking-normal); }

    /* 설정 카드 — 풀폭 */
    .setting-card {
        padding: var(--s-3);
    }
}

/* ═══════════════════════════════════════════
   23. Premium Utilities — 프로덕트급 디테일
   ═══════════════════════════════════════════ */

/* ── 23.1 텍스트 말줄임 유틸리티 ── */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 23.2 키보드 단축키 뱃지 ── */
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--s-5-0);
    height: var(--s-5-0);
    padding: 0 var(--s-1);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    color: var(--text-sub);
    background: var(--surface);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-keycap);
}

/* ── 23.3 상태 도트 펄스 (working 상태 도트용) ── */
.dot-pulse {
    position: relative;
}
.dot-pulse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    animation: dotPulseRing 2s var(--easing-breathe) infinite;
}
@keyframes dotPulseRing {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.15; transform: scale(1.8); }
}

/* ── 23.4 프리미엄 카드 내부 섹션 구분 ── */
.card-section {
    padding: var(--s-3) 0;
}
.card-section + .card-section {
    background-image: linear-gradient(90deg, transparent 0%, var(--line) 15%, var(--line) 85%, transparent 100%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
}

/* ── 23.5 프리미엄 텍스트 그래디언트 ── */
.text-gradient {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 50%, var(--teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── 23.6 인터랙티브 카드 오버레이 (마우스 추적 글로우) ── */
.card-interactive {
    position: relative;
    overflow: hidden;
}
.card-interactive::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--surface-w5), transparent 40%);
    opacity: 0;
    transition: opacity var(--motion-hover);
    pointer-events: none;
    border-radius: inherit;
}
.card-interactive:hover::after { opacity: 1; }

/* ── 23.7 프리미엄 프로그레스 바 ── */
.progress-bar {
    height: var(--s-1);
    background: var(--surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    border-radius: var(--radius-pill);
    transition: width var(--duration-moderate) var(--easing-out);
    position: relative;
}
.progress-bar__fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--s-7-5);
    background: linear-gradient(90deg, transparent, var(--surface-w15));
    animation: progressShine 1.5s ease infinite;
}
@keyframes progressShine {
    0%   { opacity: 0; transform: translateX(-40px); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(40px); }
}

/* ── 23.8 아바타 그룹 스택 ── */
.avatar-group {
    display: flex;
    align-items: center;
}
.avatar-group > * + * {
    margin-left: -6px;
}
.avatar-group > *:hover {
    z-index: 1;
    transform: translateY(var(--hover-lift));
    transition: transform var(--duration-base) var(--easing-spring);
}

/* ── 23.9 Subtle 호버 배경 유틸리티 ── */
.hover-surface {
    transition: background-color var(--motion-hover);
}
.hover-surface:hover {
    background-color: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 23.10 포커스 링 강화 — 딥 글로우 ── */
.focus-glow:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus-glow-lg);
}

/* ═══════════════════════════════════════════
   24. Premium Micro-interactions (Wave A)
   Linear/Vercel급 시각적 품질 향상
   ═══════════════════════════════════════════ */

/* ── 24.1 뱃지 상태 전환 팝 애니메이션 ── */
.badge-enter {
    animation: animBadgePop var(--duration-base) var(--easing-spring) both;
}
@keyframes animBadgePop {
    0%   { opacity: 0; transform: scale(0.7); }
    70%  { transform: scale(1.05); }
    100% { opacity: 1; transform: none; }
}

/* 뱃지 수치 변경 시 미세 범프 */
.badge-bump {
    animation: animBadgeBump var(--duration-fast) var(--easing-spring);
}
@keyframes animBadgeBump {
    0%, 100% { transform: none; }
    50%      { transform: scale(1.12); }
}

/* ── 24.2 리스트 행 스태거 진입 ── */
.list-stagger > * {
    opacity: 0;
    transform: translateY(6px);
    animation: animListStagger var(--duration-base) var(--easing-out) both;
}
.list-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.list-stagger > *:nth-child(2) { animation-delay: 0.04s; }
.list-stagger > *:nth-child(3) { animation-delay: 0.06s; }
.list-stagger > *:nth-child(4) { animation-delay: 0.08s; }
.list-stagger > *:nth-child(5) { animation-delay: 0.10s; }
.list-stagger > *:nth-child(6) { animation-delay: 0.12s; }
.list-stagger > *:nth-child(7) { animation-delay: 0.14s; }
.list-stagger > *:nth-child(8) { animation-delay: 0.16s; }
.list-stagger > *:nth-child(n+9) { animation-delay: 0.18s; }
@keyframes animListStagger {
    to { opacity: 1; transform: none; }
}

/* ── 24.3 Chip 호버 프리미엄 ── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    background: var(--surface);
    color: var(--text-sub);
    cursor: pointer;
    transition: background var(--motion-hover),
                color var(--motion-hover),
                transform var(--duration-base) var(--easing-spring),
                box-shadow var(--motion-hover);
}
.chip:hover {
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(var(--hover-lift-sm));
    box-shadow: var(--shadow-subtle);
}
.chip:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.chip.chip-active {
    background: var(--surface-active);
    color: var(--accent);
}
.chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── 24.4 인터랙티브 아이콘 회전/바운스 유틸리티 ── */
.icon-spin-hover:hover svg {
    transform: rotate(90deg);
    transition: transform var(--duration-base) var(--easing-spring);
}
.icon-bounce-hover:hover svg {
    animation: animIconBounce var(--duration-base) var(--easing-spring);
    transform: translateY(var(--hover-lift-sm));
}
@keyframes animIconBounce {
    0%, 100% { transform: none; }
    50%      { transform: translateY(-2px); }
}

/* ── 24.5 프리미엄 구분선 유틸리티 ── */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--line) 15%, var(--line) 85%, transparent 100%);
    margin: var(--s-3) 0;
}
.divider-vertical {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent 0%, var(--line) 15%, var(--line) 85%, transparent 100%);
    margin: 0 var(--s-2);
}

/* ── 24.6 빈 상태 아이콘 부유감 ── */
.empty-float {
    animation: animEmptyFloat 3s var(--ease-in-out) infinite;
}
@keyframes animEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ── 24.7 카운트 뱃지 펄스 (새 알림 등) ── */
.count-badge-new {
    position: relative;
}
.count-badge-new::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    animation: animCountPulse 2s var(--ease-in-out) infinite;
    pointer-events: none;
}
@keyframes animCountPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    30%      { opacity: 0.15; transform: scale(1.3); }
    60%      { opacity: 0; transform: scale(1.5); }
}

/* ── 24.8 스무스 콜랩스 (accordion 대안 — grid 기반) ── */
.smooth-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-moderate) var(--easing-out);
}
.smooth-collapse > * {
    overflow: hidden;
}
.smooth-collapse.is-open {
    grid-template-rows: 1fr;
}

/* ── 24.8b 프리미엄 <details> 열기/닫기 — 콘텐츠 slide + fade ── */
details {
    transition: outline-color var(--duration-base) var(--easing-out);
}
details > summary {
    cursor: pointer;
    list-style: none;
    transition: color var(--duration-base) var(--easing-out),
                transform var(--duration-base) var(--easing-spring-gentle);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ''; }
details > summary:hover { color: var(--text); }
details[open] > summary { color: var(--text); }
details[open] > *:not(summary) {
    animation: animDetailsReveal var(--duration-enter) var(--easing-out) both;
}
@keyframes animDetailsReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ── 24.9 호버 시 카드 상단 액센트 라인 ── */
.card-accent-line {
    position: relative;
    overflow: hidden;
}
.card-accent-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
    opacity: 0;
    transform: scaleX(0);
    transition: opacity var(--motion-hover),
                transform var(--duration-moderate) var(--easing-spring);
}
.card-accent-line:hover::before {
    opacity: 1;
    transform: scaleX(1);

}

/* ── 24.10 텍스트 하이라이트 유틸리티 ── */
.text-highlight {
    background: linear-gradient(120deg, var(--surface-active) 0%, var(--surface-active) 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 88%;
    transition: background-size var(--duration-moderate) var(--easing-out);
}
.text-highlight:hover {
    background-size: 100% 40%;
    transform: translateY(var(--hover-lift-sm));
}

/* ── 24.11 그래디언트 텍스트 유틸리티 (Linear/Vercel 스타일) ── */
.text-gradient {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 50%, var(--clr-purple-semi) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-subtle {
    background: linear-gradient(135deg, var(--text) 0%, var(--text-sub) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Reduced Motion 접근성 (통합) ── */
@media (prefers-reduced-motion: reduce) {
    .stagger-item, .content-reveal, .panel-fade, .tooltip-anim, .toggle-body-anim,
    .dot-pulse::after, .btn-cta::before, .btn-accent::before, .progress-bar__fill::after,
    .num-counter, .num-transition, .badge-enter, .badge-bump, .count-bump,
    .list-stagger > *, .empty-float, .count-badge-new::after,
    .icon-bounce-hover:hover svg,
    .card-shimmer::before {
        animation: none !important; transition-duration: 0.01ms !important;
    }
    .content-reveal, .content-reveal.content-loaded { opacity: 1; transform: none; }
    .panel-fade { opacity: 1; transform: none; }
    .toggle-body-anim.open { max-height: 2000px; opacity: 1; }
    .accordion-content.accordion-open { grid-template-rows: 1fr; opacity: 1; }
    .list-stagger > * { opacity: 1; transform: none; }
    .smooth-collapse.is-open { grid-template-rows: 1fr; }
    /* details 열기 애니메이션 비활성화 */
    details[open] > *:not(summary) { animation: none !important; opacity: 1; transform: none; }
    /* 드로어 컬럼 스태거 비활성화 */
    .drawer-overlay.open .drawer-col { animation: none !important; opacity: 1; transform: none; }
    /* 프리미엄 유틸리티 모션 비활성화 */
    .card-shimmer::before { display: none; }
    .card-glow::after { display: none; }
    /* 마그네틱 복귀 트랜지션 비활성화 */
    .btn-magnetic { will-change: auto; transition: none !important; }
    .btn-cta::before { display: none; }
    /* Wave B 모션 비활성화 */
    .text-shimmer { animation: none !important; background: none !important; -webkit-text-fill-color: var(--text); }
    .status-dot.is-live::after { animation: none !important; display: none; }
    .progress-track__fill::after { animation: none !important; display: none; }
    .num-transition.num-up,
    .num-transition.num-down { animation: none !important; opacity: 1; transform: none; }
    .hover-row::before { transition: none !important; }
}

/* ═══════════════════════════════════════════
   터치 기기 hover 무효화
   — animations.css §33에서 미커버된 components.css 요소
   ═══════════════════════════════════════════ */
@media (hover: none) {
    /* Tier 1 — 카드급 (transform + box-shadow 리셋) */
    .card:hover,
    .surface-interactive:hover,
    .glass-card:hover,
    .card-hover-accent:hover {
        transform: none;
        box-shadow: inherit;

    }

    /* Tier 1b — CTA/특수 버튼 (transform + box-shadow + filter 리셋) */
    .btn-cta:hover {
        transform: none;
        box-shadow: inherit;
        filter: none;

    }
    .btn-cta:hover::before {
        transform: none;

    }

    /* Tier 1c — 상태별 카드 글로우 리셋 */
    .agent-card.s-running:hover,
    .agent-card.s-error:hover {
        box-shadow: inherit;

    }

    /* Tier 2 — 탭/링크/유틸리티 (transform 리셋) */
    .tab-bar__item:hover {
        background: transparent;

    }
    .tab-bar__item:hover:not(.active)::after {
        width: 0;

    }
    .avatar-group > *:hover {
        transform: none;

    }
    .icon-spin-hover:hover svg {
        transform: none;

    }

    /* Tier 3 — 장식 효과 리셋 */
    .card-accent-line:hover::before {
        opacity: 0;
        transform: scaleX(0);

    }
    .card-interactive:hover::after {
        opacity: 0;

    }
    .link-anim:hover::after {
        width: 0;

    }
    .text-highlight:hover {
        background-size: 0% 100%;

    }

    /* Wave B 호버 리셋 */
    .status-badge:hover {
        transform: none;
        box-shadow: inherit;

    }
    .hover-row:hover {
        background-color: inherit;

    }
    .hover-row:hover::before {
        transform: scaleY(0);

    }
    .card-group:hover > .card-group-item:not(:hover) {
        opacity: 1;
        filter: none;

    }
}

/* ═══════════════════════════════════════════
   25. 프리미엄 인터랙션 유틸리티 (Linear/Vercel급)
   ═══════════════════════════════════════════ */

/* ── 25.1 카드 호버 shimmer 스윕 (Apple/Linear 스타일 라이트 스윕) ── */
.card-shimmer {
    position: relative;
    overflow: hidden;
}
.card-shimmer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        var(--surface-w3) 45%,
        var(--surface-w6) 50%,
        var(--surface-w3) 55%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s var(--easing-out);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
.card-shimmer:hover::before {
    transform: translateX(100%);
}

/* ── 25.2 그룹 호버 — 부모 호버 시 자식 요소 reveal ── */
.group-hover .group-hover-target {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--motion-hover),
                transform var(--duration-base) var(--easing-spring-bouncy);
}
.group-hover:hover .group-hover-target,
.group-hover:focus-within .group-hover-target {
    opacity: 1;
    transform: none;
}

/* ── 25.3 글래스 카드 — .glass 또는 .glass--light 클래스와 조합 사용 ── */
.glass-card {
    border-radius: var(--radius-card);
}

/* ── 25.4 숫자 카운터 팝 애니메이션 (통계/메트릭 전용) ── */
.num-counter {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    transition: transform var(--duration-base) var(--easing-spring);
}
.num-counter.num-changed {
    animation: animNumPop var(--duration-base) var(--easing-spring);
}
@keyframes animNumPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ── 25.5 인터랙티브 카드 마우스 추적 글로우 (JS에서 --glow-x/y 설정) ── */
.card-glow {
    position: relative;
}
.card-glow::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at var(--glow-x, 50%) var(--glow-y, 50%),
        var(--surface-w8) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--duration-moderate) var(--ease-out);
    pointer-events: none;
    z-index: 0;
}
.card-glow:hover::after {
    opacity: 1;
}

/* ── 25.6 스크롤 스냅 유틸리티 (가로 스크롤 리스트) ── */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.scroll-snap-x > * {
    scroll-snap-align: start;
}

/* ── 25.7 인라인 상태 전환 (running→complete→error 배경+텍스트 전환) ── */
.status-transition {
    transition: background-color var(--motion-state),
                color var(--motion-state),
                box-shadow var(--motion-state);
}

/* ── 25.8 포커스-위딘 카드 하이라이트 ── */
.focus-within-highlight:focus-within {
    box-shadow: var(--shadow-ring-dim), var(--shadow-soft);
}

/* ── 25.9 CTA 글로우 버튼 — 프리미엄 primary action ── */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-cta-base);
    transition: filter var(--motion-hover),
                transform var(--duration-base) var(--easing-spring),
                box-shadow var(--motion-hover);
    line-height: var(--leading-none);
    white-space: nowrap;
}
.btn-cta::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, var(--surface-w15), transparent);
    animation: animCTASpin 4s linear infinite;
    opacity: 0;
    transition: opacity var(--duration-moderate) var(--ease-out);
}
.btn-cta:hover {
    filter: brightness(var(--hover-brightness));
    transform: translateY(var(--hover-lift)) scale(1.02);
    box-shadow: var(--shadow-cta-hover), var(--glow-premium-strong);
}
.btn-cta:hover::before {
    opacity: 1;
}
.btn-cta:active {
    transform: scale(var(--active-scale-btn));
    transition-duration: var(--duration-instant);
    filter: brightness(var(--active-brightness));
}
.btn-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--shadow-cta-focus);
}
.btn-cta:disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: saturate(0.5);
}
@keyframes animCTASpin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   26. Premium Micro-interactions (Wave B)
   — 스크롤 페이드, 행 호버, 숫자 트랜지션, 포커스 그룹,
     프로그레스 트랙, 텍스트 쉬머, 상태 닷 리플, 카드 그룹 호버
   ═══════════════════════════════════════════ */

/* ── 26.1 스크롤 페이드 마스크 (상하 그라데이션) ── */
.scroll-fade-y {
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}
.scroll-fade-y-sm {
    mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* ── 26.2 인터랙티브 행 (호버 시 좌측 악센트 바 + 배경) ── */
.hover-row {
    position: relative;
    transition: background-color var(--motion-hover);
}
.hover-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--motion-enter);
}
.hover-row:hover {
    background-color: var(--surface-w4);
    transform: translateY(var(--hover-lift-sm));
}
.hover-row:hover::before {
    transform: scaleY(1);

}

/* ── 26.3 숫자 트랜지션 (상승/하강 애니메이션) ── */
.num-transition {
    display: inline-block;
    transition: transform var(--motion-enter), opacity var(--motion-enter);
}
.num-transition.num-up {
    animation: numSlideUp var(--duration-enter) var(--easing-out) both;
}
.num-transition.num-down {
    animation: numSlideDown var(--duration-enter) var(--easing-out) both;
}
@keyframes numSlideUp {
    from { transform: translateY(40%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
@keyframes numSlideDown {
    from { transform: translateY(-40%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── 26.4 포커스-위딘 그룹 (자식 포커스 시 컨테이너 하이라이트) ── */
.focus-within-group {
    transition: box-shadow var(--motion-enter);
    border-radius: var(--radius);
}
.focus-within-group:focus-within {
    box-shadow: var(--shadow-focus-within-glow);
}

/* ── 26.5 프로그레스 트랙 (쉬머 포함) ── */
.progress-track {
    position: relative;
    height: var(--s-1);
    background: var(--surface-w6);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-track__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    border-radius: var(--radius-pill);
    transition: width var(--duration-moderate) var(--easing-out);
    position: relative;
}
.progress-track__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-shimmer);
    animation: progressShimmer 1.8s var(--ease-in-out) infinite;
}
@keyframes progressShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ── 26.6 텍스트 쉬머 (로딩/강조용 반짝이는 텍스트) ── */
.text-shimmer {
    background: linear-gradient(90deg, var(--text-sub) 0%, var(--text) 45%, var(--accent) 50%, var(--text) 55%, var(--text-sub) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 2.5s var(--ease-in-out) infinite;
}
@keyframes textShimmer {
    0%, 100% { background-position: 100% 50%; }
    50%      { background-position: 0% 50%; }
}

/* ── 26.7 상태 닷 리플 (라이브 상태 표시기) ── */
/* 주의: .status-dot 기본 선언은 L379에 있음. 여기서는 is-live 전용 확장만 */
.status-dot.is-live {
    position: relative;
}
.status-dot.is-live::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    animation: dotRipple 2s var(--ease-out) infinite;
}
@keyframes dotRipple {
    0%   { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ── 26.8 카드 그룹 호버 조율 (형제 카드 디밍) ── */
.card-group:hover > .card-group-item:not(:hover) {
    opacity: 0.65;
    filter: saturate(0.7);
    transition: opacity var(--motion-exit), filter var(--motion-exit);
}
.card-group > .card-group-item {
    transition: opacity var(--motion-enter), filter var(--motion-enter), transform var(--duration-base) var(--easing-spring-bouncy);
}
.card-group > .card-group-item:hover {
    opacity: 1;
    filter: saturate(1);
    transform: translateY(var(--hover-lift-sm));
}

/* ── 26.9 그래디언트 디바이더 (하드 보더 대체) ── */
.divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--surface-w10) 20%, var(--surface-w10) 80%, transparent 100%);
    border: none;
}

/* ═══════════════════════════════════════════
   27. 타이포그래피 위계 강화 (§2차 UI 개선)
   — 섹션 헤더/캡션/메타 요소에 토큰 기반 위계 적용
   ═══════════════════════════════════════════ */

/* 섹션 카테고리 라벨 — 디비전 헤더, 패널 서브타이틀 등 */
.section-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-sub);
}

/* 타임스탬프/메타 텍스트 — 에이전트 카드, 작업 목록 등 */
.meta-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* 카드 내 역할/설명 — 에이전트 역할, 작업 설명 등 */
.card-desc {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-sub);
}

/* ═══════════════════════════════════════════
   28. 반응형 태블릿 보강 (768px~1024px)
   ═══════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 모달 — 태블릿에서 너비 최적화 */
    .modal-box,
    .modal-content {
        width: 85vw;
        max-width: 640px;
    }
    .create-modal {
        width: 85vw;
        max-width: 720px;
    }
    /* 드로어 — 태블릿에서 너비 조정 */
    .drawer {
        width: 75vw;
        max-width: var(--layout-2xl);
    }
    /* 인풋 그룹 — 태블릿에서 풀와이드 방지 */
    .input-group {
        max-width: var(--layout-xl);
    }
    /* 헤딩 스케일 축소 — 태블릿에서 과도한 크기 방지 */
    .heading-2xl { font-size: var(--text-xl); }
    .heading-xl  { font-size: var(--text-lg); }
}

/* ═══════════════════════════════════════════
   29. 마이크로 인터랙션 보강 (§2차 UI 개선)
   ═══════════════════════════════════════════ */

/* 콘텐츠 로드 완료 후 리스트 아이템 순차 등장 유틸리티
   — JS에서 container.classList.add('render-stagger') 호출 */
.render-stagger > * {
    opacity: 0;
    transform: translateY(6px);
    animation: renderStaggerIn var(--duration-base) var(--easing-out) both;
    animation-delay: calc(var(--stagger-i, 0) * 25ms);
}
@keyframes renderStaggerIn {
    to { opacity: 1; transform: none; }
}
/* 최대 10개까지 nth-child 딜레이 — JS 없이도 CSS-only 작동 */
.render-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.render-stagger > *:nth-child(2)  { animation-delay: 25ms; }
.render-stagger > *:nth-child(3)  { animation-delay: 50ms; }
.render-stagger > *:nth-child(4)  { animation-delay: 75ms; }
.render-stagger > *:nth-child(5)  { animation-delay: 100ms; }
.render-stagger > *:nth-child(6)  { animation-delay: 125ms; }
.render-stagger > *:nth-child(7)  { animation-delay: 150ms; }
.render-stagger > *:nth-child(8)  { animation-delay: 175ms; }
.render-stagger > *:nth-child(n+9) { animation-delay: 200ms; }

/* reduced-motion 대응 */
@media (prefers-reduced-motion: reduce) {
    .render-stagger > * {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* ═══════════════════════════════════════════
   사용자 AI 상태 패널 — 비관리자 전용 요약 배너
   renderUserAiStatusPanel() (settings.js) 렌더링 대상
   ═══════════════════════════════════════════ */
.acct-info-banner {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-relaxed);
}

/* 상태 점 — 연결 여부 표시 */
.acct-status-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--text-sub);
    flex-shrink: 0;
    display: inline-block;
}
.acct-status-dot.active {
    background: var(--green);
}
.acct-status-dot.inactive {
    background: var(--text-sub);
}
.acct-status-dot.error {
    background: var(--red);
}

/* ═══════════════════════════════════════════
   27. 1000억급 프리미엄 인터랙션 (v1)
   — 모든 버튼 자동 리플, 프리미엄 포커스, 카드 글로우
   ═══════════════════════════════════════════ */

/* ── 27.1 자동 리플: 모든 버튼에 overflow:hidden + position:relative 보장 ── */
.btn, .btn-ghost, .btn-fill, .btn-accent, .btn-cta, .btn-danger, .btn-icon, .btn-lg,
.modal-btn-submit, .modal-btn-cancel, .toast-action-btn, .chip, .tag {
    position: relative;
    overflow: hidden;
}

/* ── 27.2 프리미엄 포커스 글로우 — 키보드 네비게이션 시 주의 끌기 ── */
.btn:focus-visible, .btn-ghost:focus-visible, .btn-fill:focus-visible,
.btn-accent:focus-visible, .btn-cta:focus-visible, .chip:focus-visible,
.toggle:focus-visible, .pwa-toggle:focus-visible {
    animation: animFocusGlowExpand var(--duration-moderate) var(--easing-out);
}

/* ── 27.3 모달 진입 — 스프링 바운스 강화 ── */
.modal-content {
    transition: transform var(--duration-moderate) var(--easing-organic),
                opacity var(--duration-enter) var(--easing-out);
}

/* ── 27.4 탭 인디케이터 — 스냅 이징으로 빠른 이동 ── */
.sd-tab::after, .modal-tab::after {
    transition: left var(--duration-base) var(--easing-snap),
                width var(--duration-base) var(--easing-snap);
}

/* ═══════════════════════════════════════════
   §33 프리미엄 인터랙션 — ripple-wave + data-reveal
   ═══════════════════════════════════════════ */

/* §33-1 리플 웨이브 — 클릭 시 accent 색 원형 확산 (initRipple에서 생성) */
.ripple-accent {
    position: relative;
    overflow: hidden;
}
.ripple-accent .ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--ripple-accent);
    transform: scale(0);
    animation: animRippleWave var(--ripple-duration, 500ms) var(--easing-out) forwards;
    pointer-events: none;
    z-index: 2;
}
@keyframes animRippleWave {
    0%   { transform: scale(0); opacity: 0.6; }
    60%  { opacity: 0.3; }
    100% { transform: scale(1); opacity: 0; }
}

/* §33-2 스크롤 리빌 — [data-reveal] 속성 기반 등장 모션 */
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(var(--blur-reveal-from, 12px));
    transition: opacity var(--blur-reveal-duration, 600ms) var(--easing-out),
                transform var(--blur-reveal-duration, 600ms) var(--easing-organic),
                filter var(--blur-reveal-duration, 600ms) var(--easing-out);
}
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* stagger 인덱스 기반 순차 등장 */
[data-reveal].revealed {
    transition-delay: calc(var(--stagger-i, 0) * var(--scroll-stagger-gap, 50ms));
}

/* §33-3 마그네틱 버튼 — L226 .btn-magnetic과 중복 → 제거. 원본(L226)이 정의 원본. */

/* ═══════════════════════════════════════════
   §40 Tier별 easing 오버라이드 + 컨테이너 프리미엄 스타일
   — Tier 1(btn/ghost/fill/accent/danger): spring-bouncy 유지 (기존)
   — Tier 2(btn-icon/btn-xs): snap easing + 짧은 duration
   — 컨테이너: ripple-host 보장
   ═══════════════════════════════════════════ */

/* ── §40-1 Tier 2 소형 버튼 — 더 빠르고 스냅감 있는 easing ── */
.btn-icon,
.btn-xs {
    transition: background-color var(--motion-hover), color var(--motion-hover),
                transform var(--duration-fast) var(--easing-snap),
                box-shadow var(--motion-hover);
}

/* ── §40-2 Tier 1 강조 버튼 — 호버 시 미세 글로우 강화 ── */
.btn-accent:hover,
.btn-danger:hover {
    box-shadow: var(--shadow), var(--glow-premium);
}

/* ── §40-3 컨테이너 프리미엄 — 패널/카드 호버 트랜지션 통일 ── */
.panel,
.drawer-panel,
.modal-content {
    transition: transform var(--duration-moderate) var(--easing-organic),
                opacity var(--duration-enter) var(--easing-out),
                box-shadow var(--motion-hover);
}

/* ── §40-4 토스트 슬라이드 강화 — organic easing ── */
.toast {
    transition: transform var(--duration-enter) var(--easing-organic),
                opacity var(--duration-exit) var(--easing-in);
}

/* ═══════════════════════════════════════════
   §41  줌 백 버튼 — 자식 요소 스타일
   28×28 아이콘 버튼 내 텍스트 span. 기본은 sr-only,
   호버/포커스 시 버튼 확장 + 텍스트 노출.
   기본 스타일은 agents.css .zoom-back-btn.
   ═══════════════════════════════════════════ */
.zoom-back-label,
.zoom-back-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .btn-icon,
    .btn-xs {
        transition: background-color var(--duration-instant) ease, color var(--duration-instant) ease;
    }
    .toast {
        transition: opacity var(--duration-instant) ease;
    }
}

/* §39 프리미엄 힌트 토스트 */
.premium-hint-toast {
    position: fixed;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-raised);
    color: var(--text-sub);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    font: 13px/1.5 var(--font);
    opacity: 0;
    transition: opacity var(--duration-spring), transform .4s;
    z-index: var(--z-toast);
    pointer-events: none;
    box-shadow: var(--shadow-popover);
    max-width: var(--layout-xl);
    text-align: center;
}
.premium-hint-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.premium-hint-toast.is-exiting {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

/* ═══════════════════════════════════════════
   KPI Dashboard — CEO 실시간 트래킹
   ═══════════════════════════════════════════ */
.kpi-dashboard {
    margin: var(--s-2) 0;
}
.kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-1) var(--s-3);
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-s);
    transition: background var(--duration-fast);
}
.kpi-header:hover {
    background: var(--bg-raised);
}
.kpi-header-left {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.kpi-chevron {
    transition: transform var(--duration-base);
}
.kpi-dashboard.collapsed .kpi-chevron {
    transform: rotate(-90deg);
}
.kpi-title {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-sub);
}
.kpi-live-dot {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--accent);
    animation: kpi-pulse 2s ease-in-out infinite;
}
@keyframes kpi-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.kpi-header-right {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-faint);
    display: flex;
    gap: var(--s-4);
    align-items: center;
}
.kpi-header-right .kpi-mini-stat {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.kpi-body {
    overflow: hidden;
    transition: max-height var(--duration-moderate) var(--easing-smooth), opacity var(--duration-base);
    max-height: 480px;
    opacity: 1;
    padding: 0 var(--s-1);
}
.kpi-dashboard.collapsed .kpi-body {
    max-height: 0;
    opacity: 0;
    padding: 0;
}
.kpi-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.kpi-card {
    background: var(--bg-raised);
    border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4);
    min-height: var(--s-11);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kpi-card-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: var(--s-1);
}
.kpi-card-value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: 1.1;
}
.kpi-card-sub {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-faint);
    margin-top: var(--s-1);
}
.kpi-card-sub .kpi-trend-up { color: #34d399; }
.kpi-card-sub .kpi-trend-down { color: #f87171; }
.kpi-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.kpi-section-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: var(--s-2);
}
.kpi-event-list,
.kpi-schedule-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    max-height: clamp(120px, 20vw, 180px);
    overflow-y: auto;
}
.kpi-event-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-sub);
    transition: background var(--duration-fast);
}
.kpi-event-item:hover {
    background: var(--bg-raised);
}
.kpi-event-dot {
    width: var(--s-1);
    height: var(--s-1);
    border-radius: 50%;
    flex-shrink: 0;
}
.kpi-event-dot.evt-job { background: var(--accent); }
.kpi-event-dot.evt-agent { background: #818cf8; }
.kpi-event-dot.evt-error { background: #f87171; }
.kpi-event-dot.evt-schedule { background: #fbbf24; }
.kpi-event-dot.evt-system { background: var(--text-faint); }
.kpi-event-type {
    flex-shrink: 0;
    min-width: var(--s-12);
    color: var(--text-faint);
    font-size: var(--text-sm);
}
.kpi-event-detail {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kpi-event-time {
    flex-shrink: 0;
    color: var(--text-faint);
    font-size: var(--text-sm);
}
.kpi-schedule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-1) var(--s-1);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-sub);
}
.kpi-schedule-item:hover {
    background: var(--bg-raised);
}
.kpi-schedule-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kpi-schedule-cron {
    color: var(--text-faint);
    font-size: var(--text-sm);
    margin: 0 var(--s-2);
}
.kpi-schedule-next {
    color: var(--text-faint);
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.kpi-schedule-status {
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: var(--s-1);
}
.kpi-schedule-status.sched-active { background: #34d399; }
.kpi-schedule-status.sched-disabled { background: var(--text-faint); }
.kpi-schedule-status.sched-failing { background: #f87171; }
.kpi-empty {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-faint);
    padding: var(--s-4);
    text-align: center;
}
/* 반응형: 768px 이하 */
@media (max-width: 768px) {
    .kpi-metrics { grid-template-columns: repeat(2, 1fr); }
    .kpi-details { grid-template-columns: 1fr; }
    .kpi-card-value { font-size: var(--text-lg); }
}

/* 진행률 바 — TutorialGuide 추가 스타일 */
.tutorial-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--surface-w8);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.tutorial-progress-bar {
    height: 100%;
    background: var(--accent);
    transition: width 400ms var(--ease-out);
    width: 0;
}
.tutorial-step-indicator {
    font-size: var(--text-sm);
    color: var(--text-faint);
    margin-bottom: var(--sp-lg);
    letter-spacing: 0.5px;
}
/* TutorialGuide 네비게이션 — 기존 .tutorial-btn 확장 */
.tutorial-btn--skip { background: transparent; color: var(--text-sub); }
.tutorial-btn--skip:hover { color: var(--text); }
.tutorial-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }
.tutorial-nav-main { display: flex; gap: var(--sp-md); }
.tutorial-card-desc strong { color: var(--accent); font-weight: var(--weight-semibold); }

/* ═══════════════════════════════════════════
   Wave C — 신규 컴포넌트 클래스 8종
   인라인 스타일 → 공통 클래스 전환용.
   tokens.css v3.1 토큰 기반. accent 배경 금지.
   ═══════════════════════════════════════════ */

/* ── 2-A. data-table — 데이터 테이블 공통 ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    padding: var(--s-2);
    text-align: left;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
}
.data-table td {
    padding: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text);
}
.data-table tr:hover { background: var(--surface-hover); }
.data-table thead tr:hover { background: transparent; }

/* ── 2-B. stat-card — 통계 카드 ── */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
}
.stat-card-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text);
}
.stat-card-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ── 2-C. code-display — 코드/로그 표시 ── */
.code-display {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    background: var(--bg);
    padding: var(--s-3);
    border-radius: var(--radius-s);
    overflow-x: auto;
    white-space: pre-wrap;
    color: var(--text);
}

/* ── 2-D. status-message — 상태 메시지 ── */
.status-message {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
}
.status-message--success { background: var(--green-bg);  color: var(--green); }
.status-message--error   { background: var(--red-bg);    color: var(--red); }
.status-message--warning { background: var(--amber-bg);  color: var(--amber); }
.status-message--info    { background: var(--teal-bg);   color: var(--teal); }

/* ── 2-E. nav-item — 드로어/네비게이션 항목 ── */
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--text-sub);
    transition: var(--motion-hover);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active { background: var(--surface-active); color: var(--accent); }

/* ── 2-F. info-row — 키-값 정보 행 ── */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-1) 0;
}
.info-row-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.info-row-value {
    font-size: var(--text-sm);
    color: var(--text);
}

/* ── 2-G. pcn-* — 카드뉴스 CTA 전용 ── */
.pcn-heading {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text);
}
.pcn-teaser {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3);
    background: var(--bg-raised);
    border-radius: var(--radius-s);
}
.pcn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: var(--motion-hover);
}

/* ── 2-H. ont-* — 온톨로지 전용 ── */
.ont-tooltip {
    background: var(--bg-overlay);
    color: var(--text);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    pointer-events: none;
}
.ont-legend {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.ont-node-label {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
}