/* =============================================================================
 * swnm 버튼 컴포넌트 — .ui-btn  (사인오프 2026-06-10)
 * -----------------------------------------------------------------------------
 * 모든 버튼은 이 컴포넌트로. hex/크기 하드코딩 금지(전부 tokens.css 토큰 사용).
 *
 * 마크업:
 *   <button type="button" class="ui-btn ui-btn--primary">저장</button>
 *   <a class="ui-btn ui-btn--secondary ui-btn--sm">취소</a>
 *   <button class="ui-btn ui-btn--icon" aria-label="닫기">
 *     <i class="ui-ico" style="--ui-ico:url('<%=ctx%>/images/icons/ic_close.svg')"></i>
 *   </button>
 *
 * variant(필수 1개): --primary | --secondary | --danger | --ghost | --icon
 * size(선택, 기본 md): --sm(32) | (md=40) | --lg(46)
 * 기타: --block(가로 꽉), :disabled / .is-disabled
 *
 * 아이콘: .ui-ico (mask + currentColor) → 버튼 글자색을 자동으로 따라감.
 *   다크 primary(흰바탕)=어두운 아이콘 / 라이트 primary(검은바탕)=흰 아이콘 자동.
 *   별도 _dark/_light 파일 불필요. 기존 /images/icons/*.svg 그대로 재사용.
 *
 * 네임스페이스 ui-btn 은 기존 .btn / .btn-* (261곳, Bootstrap 포함)과 충돌하지
 * 않도록 분리한 것. 기존 버튼은 점진적으로 ui-btn 으로 흡수.
 * ============================================================================= */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                /* 아이콘↔글자 8px */

  height: 40px;                       /* md 기본 */
  padding: 0 var(--space-4);          /* 0 16px */

  font-family: var(--font-sans);
  font-size: var(--font-base);        /* 14px */
  font-weight: var(--fw-semibold);    /* 600 */
  line-height: 1;
  white-space: nowrap;

  border: 1px solid transparent;
  border-radius: var(--radius-sm);    /* 4px */
  cursor: pointer;
  user-select: none;
  text-decoration: none;              /* <a> 로 쓸 때 */
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.ui-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ui-btn:disabled,
.ui-btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== size ===== */
/* 2026-06-22 · tanwoo · xs 추가 — 조밀한 팝업(필터 드롭다운 등)용 초소형. report 필터에서 sm(32)이 과해 신설. */
.ui-btn--xs {
  height: 26px;
  padding: 0 var(--space-2);          /* 0 8px */
  font-size: var(--font-xs);          /* 12px */
  font-weight: var(--fw-medium);      /* 500 — 조밀 초소형은 semibold(600)가 무거워 medium */
}

.ui-btn--sm {
  height: 32px;
  padding: 0 var(--space-3);          /* 0 12px */
  font-size: var(--font-sm);          /* 13px */
}

.ui-btn--lg {
  height: 46px;
  padding: 0 var(--space-5);          /* 0 20px */
  font-size: var(--font-md);          /* 16px */
}

/* ===== variant ===== */

/* primary: 대비채움(테마 반전) — 다크=흰바탕/어두운글자, 라이트=검은바탕/흰글자.
   --text-primary 와 --bg-page 가 테마별 자동 반전되므로 토큰 조합만으로 구현됨. */
.ui-btn--primary {
  background: var(--text-primary);
  color: var(--bg-page);
}
.ui-btn--primary:hover { opacity: .85; }

/* secondary: 아웃라인 — 보조/취소. 투명 + 보더만. */
.ui-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.ui-btn--secondary:hover { background: var(--bg-hover); }

/* danger: 빨강 아웃라인 — 파괴적(삭제). 채움 아님(실제 rp-btn--danger와 일치). */
.ui-btn--danger {
  background: transparent;
  color: var(--status-critical);
  border-color: var(--status-critical);
}
.ui-btn--danger:hover { background: var(--status-critical-bg); }

/* ghost: 저강조 — 툴바/텍스트 액션(btn-text 류). 투명, 호버 시 면. */
.ui-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.ui-btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* icon: 아이콘 전용 정사각 — 닫기/줌/내비 등 */
.ui-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
}
.ui-btn--icon:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ui-btn--icon.ui-btn--sm { width: 32px; height: 32px; }
.ui-btn--icon.ui-btn--lg { width: 46px; height: 46px; }

/* ===== modifier ===== */
.ui-btn--block { width: 100%; }

/* =============================================================================
 * 아이콘 헬퍼 — .ui-ico
 * mask + currentColor 로 SVG가 부모 글자색(color)을 따라간다.
 *   <i class="ui-ico" style="--ui-ico:url('<%=ctx%>/images/icons/ic_apply.svg')"></i>
 * - 단색 아이콘 전용(현재 /images/icons/* 대부분 단색이라 OK).
 * - 컬러를 보존해야 하는 아이콘(로고 등)은 기존 <img> 그대로 사용.
 * ============================================================================= */
.ui-ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--ui-ico) center / contain no-repeat;
          mask: var(--ui-ico) center / contain no-repeat;
}
.ui-ico--sm { width: 14px; height: 14px; }
.ui-ico--lg { width: 20px; height: 20px; }