/* ═══════════════════════════════════════════════════════════════
   UNI:SOL 공통 컴포넌트 (ui-4F①) — ui-spec 3절 구현. 토큰만(hex 0).
   tokens.css 다음에 로드. 신설 클래스: .btn(+변형)·.badge(+변형)·.field.
   기존 페이지 클래스와 공존 — JS 훅 클래스는 그대로 두고 이 클래스를 추가로 부여.
   ═══════════════════════════════════════════════════════════════ */

/* ── 버튼 (스펙 3절: PC 40 / 폰 48, 패딩 0 16, 반경 8, 14/600, 아이콘 20+6) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 16px;
  border: none; border-radius: var(--radius-8);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) { .btn { height: 40px; } }
.btn svg, .btn i[data-lucide] { width: 20px; height: 20px; flex-shrink: 0; }
.btn:disabled, .btn[disabled] {
  background: var(--bg-disabled); color: var(--text-disabled); cursor: not-allowed;   /* [5D①] gray-200→별칭(다크 라이트블록 방지) */
  /* opacity 로 처리하지 않는다 — 스펙 3절 */
}

.btn-primary   { background: var(--btn-primary-bg); color: var(--text-on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-hover); }
.btn-secondary { background: var(--bg-sunken); color: var(--text-primary); }   /* [5C①] 원시 gray-100 → 별칭: 다크에서 배경=글자(#F2F4F6) 대비 1.00 해소. 라이트는 동일값 */
.btn-ghost     { background: transparent; color: var(--text-link); }
.btn-danger    { background: var(--state-err-solid); color: var(--text-on-brand); }
.btn-danger-soft { background: var(--state-err-bg); color: var(--state-err-text); }   /* 4F③: 파괴 동작의 저강도형(로그아웃 등) */

/* 4F③: 헤더 행 인라인 동작 전용 소형 버튼 */
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-8); }
@media (min-width: 1024px) { .btn.btn-sm { height: 32px; } }

/* ── 상태 배지 (12/600, 반경 4, 패딩 2 8 — 채워진 진한 변형 없음) ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-4);
  font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
}
.badge-ok   { background: var(--state-ok-bg);  color: var(--state-ok-text); }
.badge-run  { background: var(--state-ok-strong-bg); color: var(--state-ok-text); }
.badge-warn { background: var(--state-warn-bg); color: var(--state-warn-text); }
.badge-err  { background: var(--state-err-bg);   color: var(--state-err-text); }
.badge-idle { background: var(--bg-sunken); color: var(--text-tertiary); }   /* [5C⑥] 원시 gray → 별칭: 다크 미관제 배지 라이트 배경 고착 해소. 라이트는 동일값 */
.badge-pill { border-radius: var(--radius-pill); }

/* ── 입력 필드 (라벨 위 고정, 입력 높이 = 버튼) ── */
.field { display: block; }
.field-label, .field > label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea, .field-input {
  width: 100%; height: 48px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius-8);
  background: var(--bg-surface); color: var(--text-primary);
  font-family: inherit; font-size: 14px;
}
@media (min-width: 1024px) { .field input, .field select, .field-input { height: 40px; } }
.field textarea { height: auto; min-height: 96px; padding: 10px 12px; }
body .field input:focus, body .field select:focus, body .field textarea:focus, body .field-input:focus {   /* 4F③: 페이지 규칙(.field input.la-addr 등 0,2,1)과의 동률·순서 패배 방지 — (0,2,2) */
  outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus);   /* 2px 시각 두께 */
}
.field input::placeholder, .field textarea::placeholder, .field-input::placeholder { color: var(--text-tertiary); }
.field-error input, .field-error select, .field-error textarea, input.field-error {
  border-color: var(--state-err-solid);
}
.field-error-msg { font-size: 13px; color: var(--state-err-text); margin-top: 6px; }