/* ══════════════════════════════════════════════════════════
   UI — UI Components v2.0
   tokens.css v3.1 정규 토큰만 참조. DEPRECATED 토큰 금지.
   BEM: .ui-{컴포넌트}__{요소}--{변형}
   ══════════════════════════════════════════════════════════ */

/* ═══ Button ═══ */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-sm);
    background: var(--surface-active);
    color: var(--text);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    cursor: pointer;
    transition: all var(--motion-hover);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.ui-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.ui-btn--loading { pointer-events: none; }
.ui-btn--loading .ui-btn__label { opacity: 0; }
.ui-btn--loading::after {
    content: '';
    position: absolute;
    width: var(--s-3-5); height: var(--s-3-5);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: ui-spin var(--duration-slower) linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 크기 */
.ui-btn--sm { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); border-radius: var(--radius-pill); }
.ui-btn--md { padding: var(--s-1-5) var(--s-3); font-size: var(--text-base); }
.ui-btn--lg { padding: var(--s-2) var(--s-4); font-size: var(--text-base); }

/* 변형 */
.ui-btn--danger { background: var(--red); color: var(--text); }
.ui-btn--danger:hover:not(:disabled) { opacity: 0.85; }
.ui-btn--ghost { background: transparent; color: var(--text-sub); }
.ui-btn--ghost:hover:not(:disabled) { background: var(--bg-raised); color: var(--text); }
/* accent */
.ui-btn--accent { background: var(--accent); color: var(--bg); }
.ui-btn--accent:hover:not(:disabled) { background: var(--accent-deep); }

/* outline */
.ui-btn--outline { background: transparent; color: var(--text-sub); border: 1px solid var(--line-emphasis); }
.ui-btn--outline:hover:not(:disabled) { border-color: var(--accent); color: var(--text); background: var(--surface); }

/* action */
.ui-btn--action { background: transparent; color: var(--text-sub); border: 1px solid var(--line); }
.ui-btn--action:hover:not(:disabled) { background: var(--surface); color: var(--text); border-color: var(--text-sub); }

/* tab */
.ui-btn--tab { background: transparent; color: var(--text-sub); border-radius: var(--radius-pill); }
.ui-btn--tab:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.ui-btn--tab.active { background: var(--surface-active); color: var(--text); }

/* icon-btn */
.ui-btn--icon-btn { background: transparent; color: var(--text-sub); padding: var(--s-1); border-radius: var(--radius-pill); }
.ui-btn--icon-btn:hover:not(:disabled) { background: var(--surface); color: var(--text); }

/* icon-only */
.ui-btn--icon-only { padding: var(--s-1); }
.ui-btn--icon-only .ui-btn__label { display: none; }
/* search — 캡슐 outline */
.ui-btn--search { border-radius: var(--radius-pill); background: transparent; color: var(--text-sub); border: 1px solid var(--line-emphasis); }
.ui-btn--search:hover:not(:disabled) { border-color: var(--accent); color: var(--text); background: var(--surface); }
.ui-btn--search.active, .ui-btn--search[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }

/* square */
.ui-btn--square { border-radius: var(--radius-s); }

/* cancel -> ghost 별칭 삭제, ghost가 곧 cancel */
/* ═══ Card ═══ */
.ui-card {
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: var(--s-5);
}
.ui-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(var(--hover-lift));
}
.ui-card--compact { padding: var(--s-3); border-radius: var(--radius-s); }
.ui-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
}
.ui-card__title-group { display: flex; flex-direction: column; gap: var(--s-1); }
.ui-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}
.ui-card__subtitle {
    font-size: var(--text-sm);
    color: var(--text-sub);
}
.ui-card__actions { display: flex; gap: var(--s-1); align-items: center; }
.ui-card__body {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.6;
}
.ui-card__footer {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
}

/* ═══ Modal ═══ */
.ui-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 1000);
    animation: ui-fade-in var(--duration-fast) var(--easing-out);
}
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ui-modal {
    background: var(--bg-raised);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 85vh;
    overflow-y: auto;
    animation: ui-scale-in var(--duration-enter) var(--easing-spring);
}
@keyframes ui-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.ui-modal--sm { width: min(380px, 90vw); }
.ui-modal--md { width: min(520px, 90vw); }
.ui-modal--lg { width: min(720px, 90vw); }

.ui-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) var(--s-5) var(--s-3);
}
.ui-modal__title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}
.ui-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--s-5) + var(--s-1)); height: calc(var(--s-5) + var(--s-1));
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: background var(--motion-hover), color var(--motion-hover);
}
.ui-modal__close:hover { background: var(--surface-hover); color: var(--text); }
.ui-modal__body {
    padding: 0 var(--s-5) var(--s-4);
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: 1.6;
}
.ui-modal__footer {
    padding: var(--s-3) var(--s-5) var(--s-5);
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
}

/* ═══ Badge ═══ */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-family: var(--font);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    line-height: var(--leading-none);
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
}
.ui-badge--sm { padding: 3px var(--s-2); font-size: 11px; }
.ui-badge--md { padding: var(--s-1) 10px; font-size: var(--text-sm); }

/* 배지 dot */
.ui-badge__dot {
    width: calc(var(--s-1) + 2px); height: calc(var(--s-1) + 2px);
    border-radius: var(--radius-pill);
    background: currentColor;
    flex-shrink: 0;
}
.ui-badge__remove {
    background: none; border: none; color: inherit; cursor: pointer;
    padding: 2px; display: flex; opacity: 0.5;
    transition: opacity var(--motion-hover);
}
.ui-badge__remove:hover { opacity: 1; }

/* 배지 변형 */
.ui-badge--default { background: var(--surface-active); color: var(--text-sub); }
.ui-badge--success { background: var(--clr-success-bg-lg); color: var(--green); }
.ui-badge--warning { background: var(--amber-bg); color: var(--amber); }
.ui-badge--danger  { background: var(--red-bg); color: var(--red); }
.ui-badge--info    { background: var(--blue-bg); color: var(--blue-light); }
.ui-badge--accent  { background: var(--accent-dim); color: var(--accent); }

/* Status dot pulse (working/running 상태) */
.ui-status-dot--pulse {
    animation: ui-status-pulse 2s ease-in-out infinite;
}
@keyframes ui-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ═══ Form ═══ */
.ui-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.ui-form--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}
.ui-form--inline .ui-form__group { flex: 1; min-width: clamp(120px, 18vw, 180px); }
.ui-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.ui-form__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    line-height: var(--leading-none);
}
.ui-form__input {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: var(--s-2) var(--s-3);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    outline: none;
    transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.ui-form__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.ui-form__input--error {
    border-color: var(--red);
}
.ui-form__textarea {
    resize: vertical;
    min-height: var(--s-12);
}
.ui-form__select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238b8b92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    padding-right: var(--s-6);
}
.ui-form__error {
    font-size: var(--text-sm);
    color: var(--red);
    min-height: var(--s-3-5);
    line-height: var(--leading-tight);
}
.ui-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
    padding-top: var(--s-2);
}

/* ═══ Toast ═══ */
.ui-toast-container {
    position: fixed;
    top: var(--s-4);
    right: var(--s-4);
    z-index: var(--z-toast, 9999);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    pointer-events: none;
    max-width: var(--layout-xl);
}
.ui-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    background: var(--bg-overlay);
    border-radius: var(--radius-pill);
    padding: var(--s-3) var(--s-4);
    pointer-events: auto;
    box-shadow: var(--shadow-lg);
    min-width: var(--layout-lg);
    animation: ui-toast-in var(--duration-enter) var(--easing-spring);
}
@keyframes ui-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ui-toast--exit {
    animation: ui-toast-out var(--duration-exit) var(--easing-in) forwards;
}
@keyframes ui-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

.ui-toast__icon { flex-shrink: 0; margin-top: 1px; }
.ui-toast__text { flex: 1; min-width: 0; }
.ui-toast__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--s-0-5);
}
.ui-toast__message {
    font-size: var(--text-sm);
    color: var(--text-sub);
    line-height: var(--leading-normal);
}
.ui-toast__close {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: var(--s-1);
    border-radius: var(--radius-pill);
    display: flex;
    flex-shrink: 0;
    transition: color var(--motion-hover);
}
.ui-toast__close:hover { color: var(--text); }

/* 토스트 타입별 좌측 스트라이프 */
.ui-toast--info { box-shadow: inset 3px 0 0 var(--blue), 0 4px 12px rgba(0,0,0,0.3); }
.ui-toast--info .ui-toast__icon { color: var(--blue); }
.ui-toast--success { box-shadow: inset 3px 0 0 var(--green), 0 4px 12px rgba(0,0,0,0.3); }
.ui-toast--success .ui-toast__icon { color: var(--green); }
.ui-toast--warning { box-shadow: inset 3px 0 0 var(--amber), 0 4px 12px rgba(0,0,0,0.3); }
.ui-toast--warning .ui-toast__icon { color: var(--amber); }
.ui-toast--error { box-shadow: inset 3px 0 0 var(--red), 0 4px 12px rgba(0,0,0,0.3); }
.ui-toast--error .ui-toast__icon { color: var(--red); }

/* ═══ Table ═══ */
.ui-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    color: var(--text);
}
.ui-table thead th {
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub, var(--text-secondary));
    background: var(--surface, var(--surface-w5));
    padding: var(--sp-md) var(--sp-lg);
    white-space: nowrap;
    user-select: none;
}
.ui-table th[aria-sort] {
    cursor: pointer;
}
.ui-table th[aria-sort]:hover {
    color: var(--text);
    background: var(--surface-hover, rgba(255,255,255,0.07));
}
.ui-table thead th[aria-sort="ascending"],
.ui-table thead th[aria-sort="descending"] {
    color: var(--accent);
}
.ui-table tbody td {
    padding: var(--sp-md) var(--sp-lg);
    color: var(--text-sub, var(--text-secondary));
    font-size: var(--text-sm);
    line-height: 1.5;
}
.ui-table tbody tr {
    transition: background var(--duration-instant) var(--easing-smooth);
}
.ui-table tbody tr:hover {
    background: var(--surface, var(--surface-w5));
}
.ui-table--compact thead th,
.ui-table--compact tbody td {
    padding: var(--sp-xs) var(--sp-md);
    font-size: var(--text-sm);
}
.ui-table--striped tbody tr:nth-child(even) {
    background: var(--surface, var(--surface-w5));
}
.ui-table--striped tbody tr:nth-child(even):hover {
    background: var(--surface-hover, var(--surface-w5));
}
.ui-table__sort-icon {
    margin-left: var(--sp-2xs);
    font-size: var(--text-sm);
    opacity: 0.5;
    transition: opacity var(--duration-fast);
}
th[aria-sort="ascending"] .ui-table__sort-icon,
th[aria-sort="descending"] .ui-table__sort-icon {
    opacity: 1;
}
.ui-table__empty {
    text-align: center;
    padding: var(--sp-4xl) var(--sp-lg);
    color: var(--text-muted, var(--text-faint));
    font-style: italic;
}

/* ═══ Tabs ═══ */
.ui-tabs {
    display: flex;
    flex-direction: column;
}
.ui-tabs__nav {
    display: flex;
    gap: var(--s-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ui-tabs__nav::-webkit-scrollbar { display: none; }

.ui-tabs__btn {
    background: none;
    border: none;
    font-family: var(--font);
    font-weight: var(--weight-medium);
    color: var(--text-faint);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--easing-smooth), background var(--duration-fast) var(--easing-smooth);
    position: relative;
}
.ui-tabs__btn:hover { color: var(--text); }

/* Underline 변형 (기본) */
.ui-tabs--underline .ui-tabs__nav {
    gap: 0;
}
.ui-tabs--underline .ui-tabs__btn {
    padding: var(--s-2) var(--s-3);
}
.ui-tabs--underline .ui-tabs__btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--s-3);
    right: var(--s-3);
    height: 2px;
    background: transparent;
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--easing-smooth);
}
.ui-tabs--underline .ui-tabs__btn--active {
    color: var(--accent);
}
.ui-tabs--underline .ui-tabs__btn--active::after {
    background: var(--accent-deep);
}

/* Pill 변형 */
.ui-tabs--pill {
    flex-direction: row;
    align-items: center;
    gap: var(--s-1);
}
.ui-tabs--pill .ui-tabs__btn {
    padding: 0;
    border-radius: var(--radius-pill);
}
.ui-tabs--pill .ui-tabs__btn--active {
    opacity: 1;
    font-weight: 600;
}

/* 크기 */
.ui-tabs--sm .ui-tabs__btn { font-size: var(--text-sm); }
.ui-tabs--md .ui-tabs__btn { font-size: var(--text-sm); }

/* 탭 본문 */
.ui-tabs__body {
    padding-top: var(--s-3);
}
.ui-tabs__panel {
    animation: ui-fade-in var(--duration-fast) var(--easing-smooth);
}

/* ═══ Toggle ═══ */
.ui-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    user-select: none;
    position: relative;
}
.ui-toggle--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ui-toggle__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.ui-toggle__track {
    position: relative;
    background: var(--surface-hover);
    border-radius: var(--radius-pill);
    transition: background var(--duration-base) var(--easing-smooth);
    flex-shrink: 0;
}
.ui-toggle__track--on { 
    background: var(--accent-deep);
}
.ui-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--text);
    border-radius: 50%;
    transition: transform var(--duration-base) var(--easing-smooth);
}

/* md 크기 (기본) */
.ui-toggle--md .ui-toggle__track {
    width: var(--s-7);
    height: var(--s-5-0);
}
.ui-toggle--md .ui-toggle__thumb {
    width: var(--s-4);
    height: var(--s-4);
}
.ui-toggle--md .ui-toggle__track--on .ui-toggle__thumb {
    transform: translateX(16px);
}

/* sm 크기 */
.ui-toggle--sm .ui-toggle__track {
    width: calc(var(--s-5) + var(--s-1));
    height: var(--s-4);
}
.ui-toggle--sm .ui-toggle__thumb {
    width: var(--s-3);
    height: var(--s-3);
}
.ui-toggle--sm .ui-toggle__track--on .ui-toggle__thumb {
    transform: translateX(12px);
}

.ui-toggle__label {
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

/* ═══ Dropdown ═══ */
.ui-dropdown {
    position: relative;
    display: inline-flex;
}
.ui-dropdown__trigger { font-size: var(--text-sm); }
.ui-dropdown__trigger svg {
    transition: transform var(--duration-fast) var(--easing-smooth);
}
.ui-dropdown__trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.ui-dropdown__menu {
    position: fixed;
    min-width: clamp(120px, 20vw, 180px);
    border-radius: var(--radius);
    overflow: visible;
    z-index: var(--z-dropdown, 9000);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--easing-smooth), transform var(--duration-fast) var(--easing-smooth);
}
.ui-dropdown__menu--open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ui-dropdown__menu--left { left: 0; }
.ui-dropdown__menu--right { right: 0; }
.ui-dropdown__scroll {
    max-height: min(300px, 70vh);
    overflow-y: auto;
    padding: var(--s-1) 0;
}

.ui-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--text-sub);
    padding: var(--s-2) var(--s-3);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-instant) var(--easing-smooth), color var(--duration-instant) var(--easing-smooth);
}
.ui-dropdown__item:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.ui-dropdown__item--danger {
    color: var(--red);
}
.ui-dropdown__item--danger:hover {
    background: var(--clr-error-bg);
    color: var(--red);
}
.ui-dropdown__divider {
    height: 1px;
    background: var(--line-bold);
    margin: var(--s-1) 0;
}

/* Chip */
.ui-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; transition: all var(--duration-fast) var(--easing-smooth); }
.ui-chip:hover { background: var(--surface-hover); border-color: var(--accent); }
.ui-chip--active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.ui-chip--sm { padding: var(--s-1) var(--s-1); font-size: var(--text-sm); }
.ui-chip__icon { display: flex; }
.ui-chip__remove { margin-left: var(--s-1); opacity: .5; cursor: pointer; }
.ui-chip__remove:hover { opacity: 1; color: var(--red); }

/* Timeline */
.ui-timeline { display: flex; flex-direction: column; gap: 0; padding-left: var(--s-3); }
.ui-timeline__item { display: flex; gap: var(--s-1); padding-bottom: var(--s-3); position: relative; border-left: var(--s-1) solid var(--line); padding-left: var(--s-3); }
.ui-timeline__item:last-child { border-left-color: transparent; }
.ui-timeline__dot { position: absolute; left: -5px; top: 2px; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--text-faint); border: 2px solid var(--bg); flex-shrink: 0; }
.ui-timeline__item.active .ui-timeline__dot { background: var(--accent-deep); box-shadow: 0 0 6px var(--accent); }
.ui-timeline__item.tl-complete .ui-timeline__dot { background: var(--green); }
.ui-timeline__item.tl-error .ui-timeline__dot { background: var(--red); }
.ui-timeline__item.tl-working .ui-timeline__dot { background: var(--accent-deep); animation: pulse 1.5s infinite; }
.ui-timeline__body { min-width: 0; }
.ui-timeline__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.ui-timeline__desc { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }
.ui-timeline__time { font-size: var(--text-sm); color: var(--text-faint); margin-top: var(--s-1); }

/* Stat */
.ui-stat { display: inline-flex; align-items: baseline; gap: var(--s-1-5); }
.ui-stat--vertical { flex-direction: column; align-items: center; gap: var(--s-1); }
.ui-stat__value { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); font-variant-numeric: tabular-nums; }
.ui-stat__label { font-size: var(--text-sm); color: var(--text-sub); }
.ui-stat-group { display: flex; gap: var(--s-5); align-items: center; }

/* Skeleton */
.skeleton--text { border-radius: var(--radius-s); }
.skeleton--avatar { border-radius: 50%; }
.skeleton--card { border-radius: var(--radius-s); }

/* Dashboard Card */
.ui-dashboard-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.ui-dashboard-card__header { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.ui-dashboard-card__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.ui-dashboard-card__body { padding: var(--s-4); }

/* Skip Banner */
.ui-skip-banner { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-left: var(--s-1) solid var(--amber); border-radius: var(--radius-s); font-size: var(--text-sm); color: var(--text-sub); }
.ui-skip-banner__icon { color: var(--amber); flex-shrink: 0; display: flex; }
.ui-skip-banner__text { flex: 1; }

/* Avatar */
.ui-avatar { border-radius: 50%; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.ui-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar__initials { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-sub); }
.ui-avatar--online::after, .ui-avatar--offline::after, .ui-avatar--busy::after { content: ""; position: absolute; bottom: 0; right: 0; width: var(--s-2); height: var(--s-2); border-radius: 50%; border: 2px solid var(--bg); }
.ui-avatar--online::after { background: var(--green); }
.ui-avatar--offline::after { background: var(--text-faint); }
.ui-avatar--busy::after { background: var(--red); }

/* Connection Badge */
.ui-conn-badge { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); color: var(--text-sub); }
.ui-conn-badge__dot { width: var(--s-1); height: var(--s-1); border-radius: 50%; flex-shrink: 0; }
.ui-conn-badge--on .ui-conn-badge__dot { background: var(--green); box-shadow: 0 0 4px var(--green); }
.ui-conn-badge--off .ui-conn-badge__dot { background: var(--text-faint); }

/* Config Chip */
.ui-config-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); color: var(--text-sub); font-size: var(--text-sm); cursor: pointer; transition: all var(--duration-fast) var(--easing-smooth); }
.ui-config-chip:hover { border-color: var(--accent); }
.ui-config-chip--active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.ui-config-chip--anthropic.ui-config-chip--active { border-color: #d97757; background: rgba(217,119,87,.12); color: #d97757; }
.ui-config-chip--google.ui-config-chip--active { border-color: #4285f4; background: rgba(66,133,244,.12); color: #4285f4; }
.ui-config-chip--openai.ui-config-chip--active { border-color: #10a37f; background: rgba(16,163,127,.12); color: #10a37f; }
.ui-config-chip__icon { display: flex; }
.ui-config-chip__label { font-weight: var(--weight-medium); }
.ui-config-chip__meta { color: var(--text-faint); font-size: var(--text-sm); }

/* Collapsible */
.ui-collapsible { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.ui-collapsible + .ui-collapsible { margin-top: var(--s-1); }
.ui-collapsible__header { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2-5) var(--s-3); width: 100%; background: var(--surface); border: none; color: var(--text); font-size: var(--text-sm); cursor: pointer; transition: background var(--duration-fast) var(--easing-smooth); }
.ui-collapsible__header:hover { background: var(--surface-hover); }
.ui-collapsible__emoji { font-size: var(--text-base); }
.ui-collapsible__title { flex: 1; text-align: left; font-weight: var(--weight-medium); }
.ui-collapsible__count { font-size: var(--text-sm); background: var(--surface-2); padding: var(--s-1) var(--s-1); border-radius: var(--radius-pill); color: var(--text-sub); }
.ui-collapsible__arrow { transition: transform var(--duration-base) var(--easing-smooth); display: flex; }
.ui-collapsible--open .ui-collapsible__arrow { transform: rotate(180deg); }
.ui-collapsible__body { max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--easing-smooth); }
.ui-collapsible--open .ui-collapsible__body { max-height: 2000px; padding: var(--s-2) var(--s-3) var(--s-3); }

/* Tooltip */
.ui-tooltip { position: absolute; background: var(--bg-overlay); color: var(--text); font-size: var(--text-sm); padding: var(--s-1) var(--s-2); border-radius: var(--radius-s); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--easing-smooth); z-index: 999; }
.ui-tooltip--visible { opacity: 1; }
.ui-tooltip--top { bottom: calc(100% + var(--s-2)); left: 50%; transform: translateX(-50%); }
.ui-tooltip--bottom { top: calc(100% + var(--s-2)); left: 50%; transform: translateX(-50%); }
.ui-tooltip--left { right: calc(100% + var(--s-2)); top: 50%; transform: translateY(-50%); }
.ui-tooltip--right { left: calc(100% + var(--s-2)); top: 50%; transform: translateY(-50%); }

/* Popover */
.ui-popover { position: relative; display: inline-block; }
.ui-popover__panel { position: absolute; z-index: 100; min-width: 200px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(4px); transition: all var(--duration-fast) var(--easing-smooth); }
.ui-popover__panel--open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ui-popover__panel--bottom { top: calc(100% + var(--s-1)); left: 0; }
.ui-popover__panel--top { bottom: calc(100% + var(--s-1)); left: 0; }
.ui-popover__title { font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); color: var(--text); }
.ui-popover__body { padding: var(--s-3); font-size: var(--text-sm); color: var(--text-sub); }
/* Card Outline */
.ui-card--outline {
    background: transparent;
    border: 1px solid var(--line);
}
.ui-card--outline:hover {
    border-color: var(--accent);
}

/* Container Outline (범용 테두리 컨테이너) */
.ui-container--outline {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: var(--s-4);
}

/* Badge Outline */
.ui-badge--outline {
    background: transparent;
    border: 1px solid currentColor;
}

/* Chip Outline */
.ui-chip--outline {
    background: transparent;
    border: 1px solid var(--line);
}
.ui-chip--outline:hover {
    border-color: var(--accent);
}

/* Input Outline (기본이 이미 outline이지만, ghost와 구분) */
.ui-field__input--ghost {
    border-color: transparent;
    background: var(--surface);
}
.ui-field__input--ghost:focus {
    border-color: var(--accent);
}
/* ── Search Input ────────────────────────────────────── */
.ui-search {
    display: flex;
    align-items: center;
    gap: var(--s-1-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-1) var(--s-2);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.ui-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.ui-search__icon {
    color: var(--text-sub);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.ui-search__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font);
    min-width: 0;
}
.ui-search__input::placeholder { color: var(--text-faint); }
.ui-search__clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-sub);
    padding: 0 var(--s-1);
    font-size: var(--text-base);
    line-height: 1;
    display: flex;
    align-items: center;
}
.ui-search__clear:hover { color: var(--text); }

/* ══ Container ══════════════════════════════════════ */
.ui-container { background: var(--surface-card); }
.ui-container--l { border-radius: var(--radius-l); padding: var(--s-5); }
.ui-container--m { border-radius: var(--radius);   padding: var(--s-4); }
.ui-container--s { border-radius: var(--radius-s); padding: var(--s-3); }
.ui-container--bordered { border: 1px solid var(--border); }
/* 글라스 컨테이너 — .glass--light 클래스와 조합 사용 */
.ui-container--glass {
    color: var(--text);
    position: relative;
    z-index: 10;
    overflow: visible;
}

/* 글라스 바 — .glass--light 클래스와 조합 사용 */
.ui-glass-bar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    border-radius: var(--radius-pill);
    color: var(--text);
    width: fit-content;
    position: relative;
    z-index: 10;
    overflow: visible;
}
/* 광택 하이라이트 (상단 빛 반사) */
.ui-glass-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--surface-w15), transparent);
    border-radius: var(--radius-pill);
}

/* 탭 버튼 */
.ui-glass-bar__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-pill);
    opacity: 0.6;
    transition: all var(--duration-base) var(--easing-out);
    position: relative;
    z-index: 1;
}
.ui-glass-bar__tab svg { width: var(--s-3); height: var(--s-3); flex-shrink: 0; }
.ui-glass-bar__tab:hover {
    opacity: 0.85;
}
.ui-glass-bar__tab.active {
    opacity: 1;
    font-weight: 600;
}

/* 사이즈 */
.ui-glass-bar--sm { padding: var(--s-0) var(--s-1-5); gap: var(--s-4); font-size: var(--text-sm); }
.ui-glass-bar--md { height: 32px; padding: 0 var(--s-3); gap: var(--s-4); font-size: var(--text-sm); } /* 기본 글라스 32px */
.ui-glass-bar--lg { height: 36px; padding: 0 var(--s-4); gap: var(--s-4); font-size: var(--text-sm); } /* 대형 글라스 36px */

/* 상단 고정 */
.ui-glass-bar--fixed {
    position: fixed;
    top: var(--s-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* ══ SearchExpand ══════════════════════════════════ */
.ui-search-expand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: var(--radius-pill);
    transition: background var(--duration-base) var(--easing-out);
}
.ui-search-expand--open {
    background: var(--surface-w3);
    border: 1px solid var(--line-strong);
}
.ui-search-expand:not(.ui-search-expand--open) {
    border: 1px solid transparent;
}
.ui-search-expand__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--s-5) + var(--s-1));
    height: calc(var(--s-5) + var(--s-1));
    border: none;
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    border-radius: 50%;
    transition: color var(--duration-fast), background var(--duration-fast);
    flex-shrink: 0;
}
.ui-search-expand__btn:hover {
    color: var(--text);
    background: var(--surface-w8);
}
.ui-search-expand__input {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-sm);
    outline: none;
    transition: width var(--duration-moderate) var(--easing-out),
                opacity var(--duration-moderate) var(--easing-out),
                padding var(--duration-moderate) var(--easing-out);
}
.ui-search-expand__input::placeholder {
    color: var(--text-sub);
}

/* ── GlassBar 내부 자식 자동 ghost 스타일 ── */
/* 버튼 */
.ui-glass-bar .ui-btn,
.ui-glass-bar .ui-dropdown__trigger {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--text-sub);
    font-size: inherit;
}
.ui-glass-bar .ui-btn:hover,
.ui-glass-bar .ui-dropdown__trigger:hover {
    background: var(--surface-w8);
    color: var(--text);
}
.ui-glass-bar .ui-btn.active,
.ui-glass-bar .ui-glass-bar__tab.active {
    color: var(--text);
}
/* 서브탭 active — 불투명도로 구분 */

/* SVG 아이콘 */
.ui-glass-bar svg {
    opacity: 0.7;
}
.ui-glass-bar .active svg,
.ui-glass-bar :hover svg {
    opacity: 1;
}
/* select/input */
.ui-glass-bar select,
.ui-glass-bar input {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-sub);
    border-radius: var(--radius-pill);
    font-size: inherit;
}

/* ── GlassBar 내부 select ghost 스타일 강제 ── */
.ui-glass-bar select,
.ui-glass-bar .cmd-inline-filter,
.ui-glass-bar .feed-filter {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-sub);
    font-size: inherit;
    padding: var(--s-0-5) var(--s-2);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ui-glass-bar select:hover,
.ui-glass-bar .cmd-inline-filter:hover {
    color: var(--text);
    background: var(--surface-w8);
    border-radius: var(--radius-pill);
}

/* ── GlassBar 내부 ui-tabs gap 풀기 ── */
.ui-glass-bar .ui-tabs {
    gap: var(--s-1);
}
.ui-glass-bar .cmd-sub-tools {
    gap: var(--s-1);
}
/* separator 투명하게 */
.ui-glass-bar .cmd-sub-tools-sep {
    background: var(--surface-w12);
}

/* ── GlassBar separator (구분선 |) ── */
.ui-glass-bar__sep {
    width: 1px;
    min-height: var(--s-4);
    background: var(--line-glass);
    flex-shrink: 0;
    align-self: center;
    display: inline-block;
}

/* ── GlassBar 내부 래퍼 풀기 — display:contents로 직계자식화 ── */
.ui-glass-bar .ui-tabs,
.ui-glass-bar .cmd-sub-tools {
    display: contents;
}

/* ── GlassBar 글자 잘림 방지 ── */
.ui-glass-bar {
    overflow: visible;
}
.ui-glass-bar__tab,
.ui-glass-bar .ui-btn,
.ui-glass-bar .ui-tabs__btn,
.ui-glass-bar .cmd-sub-btn,
.ui-glass-bar .kpip-subtab {
    overflow: visible;
    white-space: nowrap;
}

/* 서브탭 기본 — 반투명, active 시 불투명 */
.ui-glass-bar .cmd-sub-btn,
.ui-glass-bar .ui-tabs__btn,
.ui-glass-bar .kpip-subtab {
    opacity: 0.5;
    transition: opacity var(--duration-fast);
}
.ui-glass-bar .cmd-sub-btn:hover,
.ui-glass-bar .ui-tabs__btn:hover,
.ui-glass-bar .kpip-subtab:hover {
    opacity: 0.8;
}
.ui-glass-bar .cmd-sub-btn.active,
.ui-glass-bar .ui-tabs__btn--active,
.ui-glass-bar .kpip-subtab.active {
    opacity: 1;
    color: var(--text);
    font-weight: var(--weight-semibold);
}

/* ══ Sidebar ═══════════════════════════════════════ */
.ui-sidebar {
    width: var(--panel-w-sm);
    height: calc(100dvh - var(--s-6));
    position: fixed;
    left: var(--s-3); top: var(--s-3);
    z-index: var(--z-sidebar, 50);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    overflow: hidden;
    transition: width var(--duration-moderate) var(--easing-out), opacity var(--duration-moderate);
}
.ui-sidebar__nav,.ui-sidebar__monitor {    border-radius: var(--radius-l);    padding: var(--s-3);}
.ui-sidebar__nav { flex-shrink: 0; }
.ui-sidebar__monitor { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ui-sidebar--collapsed { width: 0; border-right: none; }
.ui-sidebar--collapsed .ui-sidebar__section { display: none; }

.ui-sidebar__toggle {
    position: absolute;
    right: -24px; top: 50%;
    transform: translateY(-50%);
    width: var(--s-5); height: calc(var(--s-5) * 2);
    background: var(--surface-w3);
    border: 1px solid var(--line-bold);
    border-left: none;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    color: var(--text-sub);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--duration-fast);
}
.ui-sidebar__toggle:hover { color: var(--text); }
.ui-sidebar__toggle svg { transition: transform var(--duration-moderate); }

.ui-sidebar__section {
    padding: var(--s-3);
    border-bottom: 1px solid var(--line);
    overflow-y: auto;
}
.ui-sidebar__section--chat { flex: 1; min-height: 0; }

.ui-sidebar__section-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-sub);
    margin-bottom: var(--s-2);
}

.ui-sidebar__empty {
    font-size: var(--text-xs, 11px);
    color: var(--text-sub);
    opacity: 0.5;
    padding: var(--s-2) 0;
}

/* 에이전트 항목 */
.ui-sidebar__agent { border-radius: var(--radius-s); margin-bottom: 2px; }
.ui-sidebar__agent-header {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-1) var(--s-1-5);
    cursor: pointer;
    border-radius: var(--radius-s);
    transition: background var(--duration-fast);
}
.ui-sidebar__agent-header:hover { background: var(--surface-w6); }
.ui-sidebar__agent-dot {
    width: calc(var(--s-1) + 2px); height: calc(var(--s-1) + 2px);
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.ui-sidebar__agent-name {
    font-size: var(--text-xs, 11px);
    font-weight: var(--weight-medium);
    color: var(--text);
    flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-sidebar__agent-chevron {
    font-size: 9px; color: var(--text-sub);
    transition: transform var(--duration-fast);
}
.ui-sidebar__agent.expanded .ui-sidebar__agent-chevron { transform: rotate(90deg); }

/* 에이전트 펼침 영역 */
.ui-sidebar__agent-detail {
    display: none;
    padding: var(--s-1) var(--s-1-5) var(--s-2) var(--s-4);
}
.ui-sidebar__agent.expanded .ui-sidebar__agent-detail { display: block; }

.ui-sidebar__agent-job {
    font-size: var(--text-xs); color: var(--text-sub);
    margin-bottom: var(--s-1);
}
.ui-sidebar__agent-thinking {
    font-size: var(--text-xs); color: var(--accent);
    opacity: 0.8;
    margin-bottom: var(--s-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-sidebar__cmd-input {
    width: 100%;
    font-size: var(--text-xs);
    padding: var(--s-0-5) var(--s-1-5);
    background: var(--surface-w5);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-s);
    color: var(--text);
    outline: none;
}
.ui-sidebar__cmd-input:focus { border-color: var(--accent); }
.ui-sidebar__cmd-input::placeholder { color: var(--text-sub); opacity: 0.4; }

/* 진행 작업 */
.ui-sidebar__job { margin-bottom: var(--s-2); }
.ui-sidebar__job-title {
    font-size: var(--text-xs); color: var(--text);
    font-weight: var(--weight-medium);
    margin-bottom: 2px;
}
.ui-sidebar__job-bar {
    height: calc(var(--s-1) - 1px);
    background: var(--surface-w3);
    border-radius: calc(var(--radius-s) / 4);
    overflow: hidden;
}
.ui-sidebar__job-fill {
    height: 100%;
    background: var(--accent);
    border-radius: calc(var(--radius-s) / 4);
    transition: width var(--duration-base);
}
.ui-sidebar__job-detail {
    font-size: 9px; color: var(--text-sub);
    margin-top: 1px;
}

/* 소통 로그 (게임 채팅) */
.ui-sidebar__chat-log {
    overflow-y: auto;
    max-height: clamp(150px, 25vh, 250px);
    scroll-behavior: smooth;
}
.ui-sidebar__chat-line {
    font-size: var(--text-xs);
    padding: 1px 0;
    line-height: 1.4;
    animation: sidebarChatIn var(--duration-fast) var(--easing-out);
}
@keyframes sidebarChatIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.ui-sidebar__chat-from { color: var(--accent); font-weight: var(--weight-medium); }
.ui-sidebar__chat-arrow { color: var(--text-sub); opacity: 0.4; margin: 0 2px; }
.ui-sidebar__chat-to { color: var(--text-sub); }
.ui-sidebar__chat-msg { color: var(--text); }
.ui-sidebar__chat-time { color: var(--text-sub); opacity: 0.3; font-size: 9px; margin-left: var(--s-1); }

/* 사이드바가 있을 때 메인 콘텐츠 밀기 */
body.has-sidebar #content-area,
body.has-sidebar .topbar {
    margin-left: 256px;
    transition: margin-left var(--duration-moderate) var(--easing-out);
}
body.has-sidebar.sidebar-collapsed #content-area,
body.has-sidebar.sidebar-collapsed .topbar {
    margin-left: 0;
}

/* 사이드바 네비 탭 — 세로 리스트 */
.ui-sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    margin-bottom: var(--s-2);
}
.ui-sidebar__logo img { border-radius: calc(var(--radius-s) / 2); }
.ui-sidebar__team-btn {
    width: 100%;
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w5);
    border: 1px solid var(--line-bold);
    border-radius: var(--radius-s);
    color: var(--text-sub);
    font-size: var(--text-xs, 11px);
    cursor: pointer;
    text-align: left;
    margin-bottom: var(--s-2);
    transition: background var(--duration-fast);
}
.ui-sidebar__team-btn:hover { background: var(--surface-w8); color: var(--text); }
.ui-sidebar__tabs {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ui-sidebar__tab {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1-5) var(--s-2);
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-s);
    transition: background var(--duration-fast), color var(--duration-fast);
    text-align: left;
    width: 100%;
}
.ui-sidebar__tab:hover { background: var(--surface-w6); color: var(--text); }
.ui-sidebar__tab.active { background: var(--surface-w10); color: var(--text); font-weight: var(--weight-semibold); }
.ui-sidebar__tab-icon { font-size: var(--text-base); width: var(--s-4); text-align: center; }
.ui-sidebar__tab-label { flex: 1; }

/* 유저 영역 */
.ui-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--s-1-5);
    padding: var(--s-2) var(--s-3);
    font-size: var(--text-xs, 11px);
    color: var(--text-sub);
}
.ui-sidebar__user-dot {
    width: calc(var(--s-1) + 2px); height: calc(var(--s-1) + 2px);
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* 사이드바 아이콘 크기 */
.ui-sidebar__tab-icon {
    width: var(--s-4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-sidebar__tab-icon svg {
    width: var(--s-4);
    height: var(--s-4);
    stroke: currentColor;
}

/* 사이드바 아코디언 서브탭 */
.ui-sidebar__subtabs {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-moderate) var(--easing-out);
    overflow: hidden;
    padding-left: 0;
}
.ui-sidebar__subtabs.open {
    grid-template-rows: 1fr;
}
.ui-sidebar__subtabs > * {
    overflow: hidden;
    min-height: 0;
}

.ui-sidebar__subtab {
    padding: var(--s-1) var(--s-2);
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-s);
    text-align: left;
    transition: background var(--duration-fast), color var(--duration-fast);
    position: relative;
}
.ui-sidebar__subtab::before { display: none; }
.ui-sidebar__subtab:hover { background: var(--surface-w6); color: var(--text); }
.ui-sidebar__subtab.active { color: var(--accent); font-weight: var(--weight-medium); }
/* 사이드바 있을 때 topbar/콘텐츠 padding 조정 */
body.has-sidebar .topbar { padding-left: var(--s-2) !important; }

/* Container glass 상단 빛 — glass-bar와 동일 */
.ui-container--glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--surface-w15), transparent);
    border-radius: var(--radius-pill);
}

/* 온톨로지 배경 모드 — 전역 배경으로 */
.ontology-bg-mode {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    
}
.ontology-bg-mode canvas {
    width: 100% !important;
    height: 100% !important;
}
/* 배경 모드일 때 원래 위치의 wrapper 숨김 */
/* 온톨로지 배경 모드 — 전체 화면, UI 숨김 */
body.ontology-bg .overview-ontology {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    opacity: 0.2;
    pointer-events: none;
    
}
body.ontology-bg .overview-ontology .ont-header,
body.ontology-bg .overview-ontology .ont-tabs,
body.ontology-bg .overview-ontology .ont-stats,
body.ontology-bg .overview-ontology .ont-controls,
body.ontology-bg .overview-ontology .ont-search-wrap,
body.ontology-bg .overview-ontology #ontology-detail,
body.ontology-bg .overview-ontology .ont-legend,
body.ontology-bg .overview-ontology .ont-graph-wrap {
    display: block;
    width: 100vw;
    height: 100vh;
    flex: none;
}
body.ontology-bg .overview-ontology .ont-graph-wrap #ontology-3d-container {
    width: 100vw;
    height: 100vh;
}
body.ontology-bg .overview-ontology .ont-toolbar {
    display: none;
}
body.ontology-bg .overview-ontology .scene-nav-info {
    display: none;
}
body.ontology-bg #ontology-3d-container {
    width: 100vw;
    height: 100vh;
}

/* 유저 이름 없으면 dot 숨김 */
.ui-sidebar__user:empty { display: none; }
.ui-sidebar__user-name:empty ~ .ui-sidebar__user-dot { display: none; }

/* 배경 모드 온톨로지 UI 전부 숨김 */
body.ontology-bg .overview-ontology > *:not(.ont-graph-wrap) { display: none; }

/* ontology-3d-container 강제 크기 (배경 모드) */
body.ontology-bg #ontology-3d-container {
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    display: block;
}

/* 온톨로지 배경 — body 배경을 html로 이동시켜 ontology가 body 위에 보이게 */
body.ontology-bg {
    background: transparent !important;
}
html.ontology-bg-html {
    background: var(--bg, #09090b);
}

/* ── 4계층 트리뷰 ── */
#hierarchy-tree-root { display: flex; flex-direction: column; gap: var(--s-2); }
#hierarchy-tree-root .ui-collapsible { border-left: 2px solid var(--border); padding-left: var(--s-2); }
#hierarchy-tree-root .hierarchy-ticket-list { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
#hierarchy-tree-root .hierarchy-ticket-card { margin-left: var(--s-2); }
#hierarchy-tree-root .ui-progress { flex-shrink: 0; }

/* ═══ 사이드바 모니터링 아이템 스타일 ═══ */
.ui-sidebar__empty { color: var(--text-faint); font-size: 11px; padding: var(--sp-sm) 0; text-align: center; }
.ui-sidebar__agent-item { padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); cursor: pointer; transition: background 200ms ease-out; }
.ui-sidebar__agent-item:hover { background: var(--surface-w5); }
.ui-sidebar__agent-header { display: flex; align-items: center; gap: var(--sp-sm); }
.ui-sidebar__agent-icon { font-size: var(--text-sm); }
.ui-sidebar__agent-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sidebar__agent-job { font-size: var(--text-xs); color: var(--text-sub); padding-left: 22px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sidebar__agent-thinking { font-size: var(--text-xs); color: var(--text-faint); padding-left: 22px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.ui-sidebar__job-item { padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm); cursor: pointer; transition: background 200ms ease-out; }
.ui-sidebar__job-item:hover { background: var(--surface-w5); }
.ui-sidebar__job-title { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.ui-sidebar__job-bar { height: calc(var(--s-1) - 1px); background: var(--surface-w6); border-radius: calc(var(--radius-s) / 4); overflow: hidden; }
.ui-sidebar__job-fill { height: 100%; background: var(--accent); border-radius: calc(var(--radius-s) / 4); transition: width 300ms ease-out; }
.ui-sidebar__job-detail { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; }
.ui-sidebar__chat-log { max-height: clamp(120px, 20vh, 200px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-bold) transparent; }
.ui-sidebar__chat-line { font-size: var(--text-xs); color: var(--text-sub); padding: 2px var(--sp-md); line-height: 1.5; animation: sidebarChatIn 200ms ease-out; }
.ui-sidebar__chat-from { color: var(--accent); font-weight: var(--weight-medium); }
.ui-sidebar__chat-to { color: var(--text); }
.ui-sidebar__chat-time { color: var(--text-faint); font-size: 9px; float: right; }
@keyframes sidebarChatIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }