/* === UI 신규 컴포넌트 CSS === */

/* EmptyState */
.ui-empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-8) var(--s-4);text-align:center; }
.ui-empty-state--sm { padding:var(--s-4) var(--s-2);gap:var(--s-1); }
.ui-empty-state__icon { color:var(--text-faint);opacity:.5; }
.ui-empty-state__title { font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text); }
.ui-empty-state--sm .ui-empty-state__title { font-size:var(--text-sm); }
.ui-empty-state__text { font-size:var(--text-sm);color:var(--text-sub);max-width:320px; }
.ui-empty-state__action { margin-top:var(--s-2); }

/* Skeleton */
.ui-skeleton { background:var(--surface-2);border-radius: var(--radius-s);animation:ui-shimmer 1.5s infinite; }
.ui-skeleton--line { height:12px;border-radius: var(--radius-s);margin-bottom:var(--s-1-5); }
.ui-skeleton--circle { border-radius:50%; }
.ui-skeleton--card { width:100%;height:120px;border-radius: var(--radius-s); }
.ui-skeleton--badge { width:60px;height:20px;border-radius: var(--radius-pill); }
.ui-skeleton-group { display:flex;flex-direction:column;gap:var(--s-1); }
@keyframes ui-shimmer { 0%{opacity:.4} 50%{opacity:.7} 100%{opacity:.4} }

/* Stat */
.ui-stat { display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);background:var(--surface);border-radius: var(--radius-s);border:1px solid var(--line);min-width:100px; }
.ui-stat__icon { color:var(--text-sub); }
.ui-stat__label { font-size:var(--text-sm);color:var(--text-sub); }
.ui-stat__value { font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text);font-variant-numeric:tabular-nums; }
.ui-stat--accent .ui-stat__value { color:var(--accent); }
.ui-stat--danger .ui-stat__value { color:var(--red); }
.ui-stat__sub { font-size:var(--text-sm);color:var(--text-faint); }

/* InfoRow */
.ui-info-row { display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1-5) 0;border-bottom:1px solid var(--line);font-size:var(--text-sm); }
.ui-info-row__icon { color:var(--text-faint);flex-shrink:0; }
.ui-info-row__label { color:var(--text-sub);min-width:80px;flex-shrink:0; }
.ui-info-row__value { color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ui-info-row__edit { background:none;border:none;color:var(--text-faint);cursor:pointer;padding:var(--s-0);flex-shrink:0; }
.ui-info-row__edit:hover { color:var(--accent); }

/* Progress */
.ui-progress { display:flex;flex-direction:column;gap:var(--s-1); }
.ui-progress__label { display:flex;justify-content:space-between;font-size:var(--text-sm);color:var(--text-sub); }
.ui-progress__track { height:6px;background:var(--surface-2);border-radius: var(--radius-pill);overflow:hidden; }
.ui-progress--sm .ui-progress__track { height:3px; }
.ui-progress__bar { height:100%;background:var(--accent);border-radius: var(--radius-pill);transition:width var(--duration-moderate) var(--easing-smooth); }
.ui-progress--accent .ui-progress__bar { background:var(--accent); }

/* Spinner */
.ui-spinner { display:inline-flex;align-items:center;gap:var(--s-2); }
.ui-spinner__ring { width:20px;height:20px;border:2px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;animation:ui-spin .6s linear infinite; }
.ui-spinner--sm .ui-spinner__ring { width: var(--s-3-5);height: var(--s-3-5); }
.ui-spinner--lg .ui-spinner__ring { width: var(--s-6);height: var(--s-6);border-width:3px; }
.ui-spinner__text { font-size:var(--text-sm);color:var(--text-sub); }
@keyframes ui-spin { to { transform:rotate(360deg); } }

/* Chip */
.ui-chip { display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-0) var(--s-2);border-radius: var(--radius-pill);background:var(--surface-2);font-size:var(--text-sm);color:var(--text-sub);border:1px solid transparent;transition:all var(--duration-fast); }
.ui-chip--accent { background:var(--accent-dim);color:var(--accent); }
.ui-chip--clickable { cursor:pointer; }
.ui-chip--clickable:hover,.ui-chip.active { border-color:var(--accent);color:var(--accent); }
.ui-chip__icon { display:flex; }
.ui-chip__remove { background:none;border:none;padding:0;cursor:pointer;color:var(--text-faint);display:flex; }
.ui-chip__remove:hover { color:var(--red); }

/* Section */
.ui-section { border:1px solid var(--line);border-radius: var(--radius-s);overflow:hidden; }
.ui-section__header { display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);background:var(--surface);cursor:default; }
.ui-section--collapsible .ui-section__header { cursor:pointer; }
.ui-section__icon { color:var(--text-sub);flex-shrink:0; }
.ui-section__title { font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text);flex:1; }
.ui-section__desc { font-size:var(--text-sm);color:var(--text-faint); }
.ui-section__chevron { color:var(--text-faint);transition:transform var(--duration-base); }
.ui-section.collapsed .ui-section__chevron { transform:rotate(-90deg); }
.ui-section__body { padding:var(--s-3); }
.ui-section.collapsed .ui-section__body { display:none; }
.ui-section-header { display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) 0; }
.ui-section-header__title { font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text);flex:1; }
.ui-section-header__count { font-size:var(--text-sm);color:var(--text-faint);background:var(--surface-2);padding:var(--s-0) var(--s-1-5);border-radius: var(--radius-pill); }
.ui-section-header__action { background:none;border:none;font-size:var(--text-sm);color:var(--accent);cursor:pointer; }

/* Banner */
.ui-banner { 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);margin-bottom:var(--s-2); }
.ui-banner--info { background:var(--surface-2);color:var(--text-sub);border:1px solid var(--line); }
.ui-banner--warning { background:rgba(245,158,11,.08);color:var(--amber);border:1px solid rgba(245,158,11,.2); }
.ui-banner--error { background:rgba(239,68,68,.08);color:var(--red);border:1px solid rgba(239,68,68,.2); }
.ui-banner--success { background:rgba(34,197,94,.08);color:var(--green);border:1px solid rgba(34,197,94,.2); }
.ui-banner__content { display:flex;align-items:center;gap:var(--s-2);flex:1; }
.ui-banner__action { background:none;border:none;font-size:var(--text-sm);color:inherit;cursor:pointer;text-decoration:underline;flex-shrink:0; }
.ui-banner__dismiss { background:none;border:none;color:inherit;cursor:pointer;opacity:.5;flex-shrink:0; }
.ui-banner__dismiss:hover { opacity:1; }

/* CopyButton */
.ui-copy-btn { display:inline-flex;align-items:center;gap:var(--s-1);background:none;border:1px solid var(--line);border-radius: var(--radius-s);padding:var(--s-1) var(--s-2);font-size:var(--text-sm);color:var(--text-sub);cursor:pointer;transition:all var(--duration-fast); }
.ui-copy-btn:hover { border-color:var(--accent);color:var(--accent); }
.ui-copy-btn.copied { border-color:var(--green);color:var(--green); }
.ui-copy-btn--sm { padding:2px 6px;font-size:var(--text-sm); }

/* ConfirmDialog */
.ui-confirm-overlay { position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:var(--glass-blur-xs); }
.ui-confirm-box { background:var(--bg-raised);border:1px solid var(--line);border-radius: var(--radius-s);padding:var(--s-5);max-width:400px;width:90%; }
.ui-confirm-title { font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text);margin-bottom:var(--s-2); }
.ui-confirm-message { font-size:var(--text-sm);color:var(--text-sub);margin-bottom:var(--s-4); }
.ui-confirm-actions { display:flex;gap:var(--s-2);justify-content:flex-end; }

/* Checkbox */
.ui-checkbox { display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:var(--text-sm);color:var(--text); }
.ui-checkbox.disabled { opacity:.5;cursor:not-allowed; }
.ui-checkbox input { display:none; }
.ui-checkbox__box { width:16px;height:16px;border:1.5px solid var(--text-faint);border-radius: var(--radius-s);display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast);color:transparent;background:var(--surface-w3); }
.ui-checkbox input:checked + .ui-checkbox__box { background:var(--accent);border-color:var(--accent);color:#fff; }

/* Select */
.ui-select { position:relative;display:inline-flex; }
.ui-select select { appearance:none;background:var(--surface);border:1px solid var(--line);border-radius: var(--radius-s);padding:var(--s-1-5) var(--s-6) var(--s-1-5) var(--s-2);font-size:var(--text-sm);color:var(--text);cursor:pointer;min-width:120px; }
.ui-select select:focus { border-color:var(--accent);outline:none; }
.ui-select--sm select { padding:var(--s-1) var(--s-5) var(--s-1) var(--s-1-5);font-size:var(--text-sm);min-width:80px; }
.ui-select__chevron { position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-faint); }

/* Input */
.ui-input-wrap { display:flex;flex-direction:column;gap:var(--s-1); }
.ui-input-label { font-size:var(--text-sm);color:var(--text-sub);font-weight:var(--weight-medium); }
.ui-input-inner { display:flex;align-items:center;gap:var(--s-1-5);background:var(--surface);border:1px solid var(--line);border-radius: var(--radius-s);padding:0 var(--s-2); }
.ui-input-inner:focus-within { border-color:var(--accent); }
.ui-input-icon { color:var(--text-faint);flex-shrink:0; }
.ui-input { background:none;border:none;color:var(--text);font-size:var(--text-sm);padding:var(--s-1-5) 0;width:100%;outline:none; }
.ui-input-wrap--sm .ui-input { font-size:var(--text-sm);padding:var(--s-1) 0; }
.ui-textarea-wrap { display:flex;flex-direction:column;gap:var(--s-1); }
.ui-textarea { background:var(--surface);border:1px solid var(--line);border-radius: var(--radius-s);padding:var(--s-2);font-size:var(--text-sm);color:var(--text);resize:vertical;outline:none;font-family:inherit; }
.ui-textarea:focus { border-color:var(--accent); }

/* Modal */
.ui-modal-overlay { position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:var(--glass-blur-xs); }
.ui-modal-box { background:var(--bg-raised);border:1px solid var(--line);border-radius: var(--radius-s);max-width:560px;width:90%;max-height:80vh;display:flex;flex-direction:column; }
.ui-modal-header { display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5) var(--s-2); }
.ui-modal-title { font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text); }
.ui-modal-close { background:none;border:none;color:var(--text-faint);cursor:pointer;padding:var(--s-1); }
.ui-modal-close:hover { color:var(--text); }
.ui-modal-body { padding:var(--s-2) var(--s-5);flex:1;overflow-y:auto; }
.ui-modal-footer { display:flex;gap:var(--s-2);justify-content:flex-end;padding:var(--s-2) var(--s-5) var(--s-4); }

/* Avatar */
.ui-avatar { position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-2);overflow:hidden;flex-shrink:0; }
.ui-avatar__initials { font-weight:var(--weight-semibold);color:var(--text-sub); }
.ui-avatar__status { position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:2px solid var(--bg-raised); }
.ui-avatar__status--online { background:var(--green); }
.ui-avatar__status--offline { background:var(--text-faint); }
.ui-avatar__status--busy { background:var(--red); }

/* ContextMenu */
.ui-context-menu { position:fixed;z-index:10001;background:var(--bg-raised);border:1px solid var(--line);border-radius: var(--radius-s);padding:var(--s-1) 0;min-width:160px;box-shadow:var(--shadow-lg); }
.ui-context-menu__item { display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1-5) var(--s-3);font-size:var(--text-sm);color:var(--text);background:none;border:none;width:100%;cursor:pointer;text-align:left; }
.ui-context-menu__item:hover { background:var(--surface-hover); }
.ui-context-menu__item--danger { color:var(--red); }
.ui-context-menu__divider { height:1px;background:var(--line);margin:var(--s-1) 0; }

/* StatusDot */
.ui-status-dot { display:inline-block;border-radius:50%;flex-shrink:0; }

/* Tooltip (CSS 기반) */
[data-tooltip] { position:relative; }
[data-tooltip]::after { content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);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;opacity:0;pointer-events:none;transition:opacity var(--duration-fast);z-index:100; }
[data-tooltip]:hover::after { opacity:1; }

/* Popover */
.ui-popover { position:absolute;top:calc(100% + 4px);left:0;background:var(--bg-raised);border:1px solid var(--line);border-radius: var(--radius-s);box-shadow:var(--shadow-md);z-index:100;min-width:200px; }

/* ActionButton */
.ui-action-btn { display:flex;align-items:flex-start;gap:var(--s-2);padding:var(--s-2);border-radius: var(--radius-s);border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;transition:all var(--duration-fast);text-align:left;font-size:var(--text-sm);width:100%; }
.ui-action-btn:hover { background:var(--surface-hover);border-color:var(--accent); }
.ui-action-btn.disabled { opacity:.5;cursor:not-allowed; }
.ui-action-btn__icon { color:var(--accent);flex-shrink:0;margin-top:var(--s-0); }
.ui-action-btn__content { flex:1;min-width:0; }
.ui-action-btn__label { font-weight:var(--weight-medium); }
.ui-action-btn__desc { font-size:var(--text-sm);color:var(--text-sub);margin-top:var(--s-0);display:block; }
.ui-action-btn__shortcut { margin-left:auto;padding:var(--s-0) var(--s-1);border-radius: var(--radius-s);background:var(--bg-raised);font-size:10px;font-family:var(--font-mono);color:var(--text-sub);flex-shrink:0;align-self:flex-start; }

/* LoadingState */
.ui-loading-state { display:flex;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-6);color:var(--text-sub);font-size:var(--text-sm); }
.ui-loading-state--sm { padding:var(--s-3);font-size:var(--text-sm); }

/* ErrorState */
.ui-error-state { display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-6);text-align:center; }
.ui-error-state__icon { color:var(--red);opacity:.6; }
.ui-error-state__message { font-size:var(--text-sm);color:var(--text-sub); }

/* DragHandle */
.ui-drag-handle { cursor:grab;color:var(--text-faint);display:inline-flex;padding:var(--s-0);border-radius: var(--radius-s); }
.ui-drag-handle:hover { color:var(--text-sub);background:var(--surface-hover); }
.ui-drag-handle:active { cursor:grabbing; }

/* NotificationCard */
.ui-notif-card { border:1px solid var(--line);border-radius: var(--radius-s);overflow:hidden; }
.ui-notif-card__header { display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);background:var(--surface);font-size:var(--text-sm);font-weight:var(--weight-medium); }
.ui-notif-card__body { padding:var(--s-2) var(--s-3);font-size:var(--text-sm);color:var(--text-sub); }
.ui-notif-card__actions { padding:var(--s-1-5) var(--s-3);border-top:1px solid var(--line);display:flex;gap:var(--s-2); }

/* ExpandCollapse */
.ui-expand { border:1px solid var(--line);border-radius: var(--radius-s);overflow:hidden; }
.ui-expand__summary { display:flex;align-items:center;gap:var(--s-1);padding:var(--s-2) var(--s-3);font-size:var(--text-sm);cursor:pointer;list-style:none;color:var(--text-sub); }
.ui-expand__summary::-webkit-details-marker { display:none; }
.ui-expand__chevron { transition:transform var(--duration-base); }
.ui-expand[open] .ui-expand__chevron { transform:rotate(180deg); }
.ui-expand__content { padding:0 var(--s-3) var(--s-3); }

/* Checklist */
.ui-checklist { display:flex;flex-direction:column; }
.ui-checklist__item { display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1-5) 0;font-size:var(--text-sm);cursor:pointer;border-bottom:1px solid var(--line); }
.ui-checklist__item input { display:none; }
.ui-checklist__item.checked span:last-child { text-decoration:line-through;color:var(--text-faint); }

/* SettingsRow */
.ui-settings-row { display:flex;align-items:center;justify-content:space-between;padding:var(--s-2) 0;border-bottom:1px solid var(--line); }
.ui-settings-row__title { font-size:var(--text-sm);color:var(--text); }
.ui-settings-row__desc { font-size:var(--text-sm);color:var(--text-sub);margin-top:var(--s-0); }

/* FlexRow 유틸 */
.ui-flex { display:flex; }
.ui-flex-col { display:flex;flex-direction:column; }
.ui-flex-center { display:flex;align-items:center;justify-content:center; }
.ui-flex-between { display:flex;align-items:center;justify-content:space-between; }
.ui-flex-wrap { display:flex;flex-wrap:wrap; }
.ui-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2); }
.ui-grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2); }
.ui-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2); }

/* BarChart */
.ui-bar-chart { display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-sm); }
.ui-bar-chart__label { min-width:60px;color:var(--text-sub); }
.ui-bar-chart__track { flex:1;background:var(--surface-2);border-radius: var(--radius-pill);overflow:hidden; }
.ui-bar-chart__bar { height:100%;border-radius: var(--radius-pill);transition:width var(--duration-moderate); }
.ui-bar-chart__value { min-width:36px;text-align:right;color:var(--text-faint);font-variant-numeric:tabular-nums; }

/* MetaItem */
.ui-meta-item { display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--text-sm); }
.ui-meta-item__icon { color:var(--text-faint); }
.ui-meta-item__label { color:var(--text-sub); }
.ui-meta-item__value { color:var(--text); }

/* FormGroup */
.ui-form-group { display:flex;flex-direction:column;gap:var(--s-1);margin-bottom:var(--s-3); }
.ui-form-group__label { font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-sub); }
.ui-form-group__hint { font-size:var(--text-sm);color:var(--text-faint); }

/* WelcomeCard */
.ui-welcome-card { 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-radius: var(--radius-s);cursor:pointer;transition:all var(--duration-fast);font-size:var(--text-sm);color:var(--text); }
.ui-welcome-card:hover { border-color:var(--accent);background:var(--surface-hover); }

/* AgentCard */
.ui-agent-card { padding:var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius: var(--radius-s); }
.ui-agent-card__header { display:flex;align-items:center;gap:var(--s-1-5);font-size:var(--text-sm); }
.ui-agent-card__role { font-size:var(--text-sm);color:var(--text-sub);margin-top:var(--s-1); }
.ui-agent-card__task { font-size:var(--text-sm);color:var(--text-faint);margin-top:var(--s-1); }
.ui-agent-card__model { font-size:var(--text-sm);color:var(--text-faint);margin-top:var(--s-1);font-family:var(--font-mono); }

/* SysmonStat */
.ui-sysmon-stat { display:flex;flex-direction:column;align-items:center;gap:var(--s-1);padding:var(--s-2);min-width:80px; }
.ui-sysmon-stat__icon { color:var(--text-faint); }
.ui-sysmon-stat__value { font-size:var(--text-lg);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums; }
.ui-sysmon-stat__label { font-size:var(--text-sm);color:var(--text-sub); }

/* ModalField */
.ui-modal-field { display:flex;flex-direction:column;gap:var(--s-1); }
.ui-modal-field__label { font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-sub); }

/* SetupStep */
.ui-setup-step { display:flex;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius: var(--radius-s);opacity:.6; }
.ui-setup-step.active { opacity:1;border-color:var(--accent); }
.ui-setup-step__num { width:28px;height:28px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-sm);flex-shrink:0; }
.ui-setup-step.active .ui-setup-step__num { background:var(--accent);color:var(--bg); }
.ui-setup-step__title { font-size:var(--text-sm);font-weight:var(--weight-medium); }
.ui-setup-step__content { font-size:var(--text-sm);color:var(--text-sub);margin-top:var(--s-1); }

/* ── Field 통합 컴포넌트 (캡슐 스타일) ── */
.ui-field { display: flex; flex-direction: column; gap: var(--s-1-5); }
.ui-field__label {
    font-size: var(--text-sm, 11px);
    font-weight: var(--weight-medium, 500);
    color: var(--text-sub);
    letter-spacing: 0.02em;
}
.ui-field__required { color: var(--red); margin-left: var(--s-0); }
.ui-field__input {
    background: var(--surface);
    border: 1px solid var(--line, rgba(255,255,255,.08));
    border-radius: var(--radius-pill);
    padding: var(--s-2) 16px;
    font-size: var(--text-sm, 13px);
    color: var(--text);
    outline: none;
    transition: border-color var(--duration-fast) var(--easing-smooth), box-shadow var(--duration-fast) var(--easing-smooth);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.ui-field__input::placeholder { color: var(--text-faint); }
.ui-field__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim, rgba(45,212,191,.12));
}
.ui-field__input:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.ui-field__input[readonly] {
    cursor: default;
    color: var(--text-sub);
}

/* textarea: 캡슐 대신 둥근 사각형 */
textarea.ui-field__input {
    border-radius: var(--radius, 12px);
    resize: none;
    line-height: 1.5;
    min-height: var(--s-11);
}

/* select: 드롭다운 화살표 */
select.ui-field__input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b92' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--s-7);
}

/* Ghost variant: 배경만, 테두리 없음 */
.ui-field__input--ghost {
    border-color: transparent;
    background: var(--surface-2);
}
.ui-field__input--ghost:focus {
    border-color: var(--accent);
}

/* 사이즈 */
.ui-field--sm .ui-field__input { padding: 5px 12px; font-size: var(--text-sm, 11px); }
.ui-field--lg .ui-field__input { padding: 10px 20px; font-size: var(--text-base, 14px); }
.ui-field--lg textarea.ui-field__input { min-height: var(--s-16); }

/* 에러 상태 */
.ui-field--error .ui-field__input { border-color: var(--red); }
.ui-field--error .ui-field__input:focus { box-shadow: 0 0 0 2px rgba(239,68,68,.15); }
.ui-field__error { font-size: var(--text-sm, 10px); color: var(--red); }
.ui-field__helper { font-size: var(--text-sm, 10px); color: var(--text-faint); }

/* Form 레이아웃 */
.ui-form { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.ui-form--inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.ui-form__footer { display: flex; justify-content: flex-end; padding-top: var(--s-2, 8px); }

/* Divider 원소 */
.ui-divider {
    width: 100%;
    height: 1px;
    background: var(--line);
    border: none;
    flex-shrink: 0;
}
.ui-divider--vertical {
    width: 1px;
    height: 100%;
}