/* il-button: 리뉴얼 버튼 테마 (Bootstrap 5.3 .btn 위에 얹는다)
   - 문서: docs/components/il-button.md, 예시: /ComponentGuide
   - 새 클래스를 만들지 않고 Bootstrap 버튼 클래스(.btn, .btn-primary, .btn-outline-primary …)를 그대로 쓴다.
     색·크기는 이 파일에서만 정하고, 페이지 규칙(site-v5.css)은 너비·여백 같은 배치만 바꾼다.
   - 페이지별로 버튼 색을 덮어쓰지 않는다. 주 행동은 항상 .btn-primary(브랜드 primary 500)다.
   - 선택자는 .label-v5 :where(...)로 써서 우선순위를 낮게 둔다(0,1,0).
     이 파일은 site-v5.css 뒤에 로드되므로, 낮춰 두어야 페이지 배치 규칙(.label-v5 .xxx .btn)이 계속 이긴다.
   - 값은 디자인 시스템 토큰(--il-*)과 그에 연결된 --ds-*만 쓴다. */

/* 공통 — 기본 모양·크기 (.btn, .btn-lg, .btn-sm) */
.label-v5 :where(.btn) {
  /* 모서리: 기본은 네모 버튼(--ds-radius-sm = 원본 --il-r-md 8px). 둥근 버튼은 아래 .btn-pill을 붙인다 */
  --bs-btn-border-radius: var(--ds-radius-sm);
  --bs-btn-font-size: var(--ds-font-size-body);
  --bs-btn-font-weight: var(--ds-font-weight-semibold);
  --bs-btn-line-height: var(--il-lh-normal);
  display: inline-flex;
  min-height: var(--il-11);
  align-items: center;
  justify-content: center;
  gap: var(--il-2);
}

.label-v5 :where(.btn-lg) {
  --bs-btn-border-radius: var(--ds-radius-sm);
  --bs-btn-font-size: var(--ds-font-size-body);
  min-height: var(--il-12);
}

.label-v5 :where(.btn-sm) {
  --bs-btn-border-radius: var(--ds-radius-sm);
  --bs-btn-font-size: var(--ds-font-size-meta);
  min-height: var(--il-9);
}

/* 둥근 버튼 시리즈 — .btn-pill (모서리 --il-r-max 999px)
   색(.btn-primary 등)·크기(.btn-lg, .btn-sm)와 함께 붙인다. 예: class="btn btn-primary btn-pill"
   모서리가 둥근 만큼 좌우 여백을 한 단계 넓힌다. 위 크기 규칙보다 뒤에 있어 모서리가 이긴다. */
.label-v5 :where(.btn-pill) {
  --bs-btn-border-radius: var(--il-r-max);
  --bs-btn-padding-x: var(--il-5);
}

.label-v5 :where(.btn-pill.btn-sm) {
  --bs-btn-padding-x: var(--il-4);
}

.label-v5 :where(.btn-pill.btn-lg) {
  --bs-btn-padding-x: var(--il-6);
}

/* 모달 안 버튼은 클래스를 따로 붙이지 않아도 둥근 버튼으로 보인다 */
.label-v5 :where(.modal .btn) {
  --bs-btn-border-radius: var(--il-r-max);
}

/* ─────────────────────────────────────────────
   버튼 이름표 (디자인 시안 이름 ↔ 클래스)
   1. 브랜드 컬러 BG 강조    .btn-primary
   2. 브랜드 컬러 Line 강조  .btn-outline-primary
   3. 일반 Line 강조         .btn-outline-secondary
   4. 위험 BG 강조           .btn-danger
   5. 위험 Line 강조         .btn-outline-danger
   6. 흰색 BG (어두운 배경)  .btn-white
   모양: 기본은 네모(모서리 8px). 둥근 버튼은 어느 종류에나 .btn-pill을 함께 붙인다. 모달 안 버튼은 자동으로 둥글다.
   ※ 시안의 "일반 BG 강조", "일반 Line 비강조", "BG 비강조"는 아직 대응 클래스가 없다.
   상태: Default / Hover(:hover) / Focus(:focus-visible) / Active(눌림) / Disabled([disabled])
   ───────────────────────────────────────────── */

/* 1. 브랜드 컬러 BG 강조 — .btn-primary
   화면의 주 행동(다음 단계, 결과 보기, 구매). 한 영역에 하나만 둔다. */
.label-v5 :where(.btn-primary) {
  --bs-btn-color: var(--ds-color-on-brand);
  --bs-btn-bg: var(--ds-color-brand-primary);
  --bs-btn-border-color: var(--ds-color-brand-primary);
  --bs-btn-hover-color: var(--ds-color-on-brand);
  --bs-btn-hover-bg: var(--ds-color-brand-hover);
  --bs-btn-hover-border-color: var(--ds-color-brand-hover);
  --bs-btn-focus-shadow-rgb: var(--ds-color-brand-primary-rgb);
  --bs-btn-active-color: var(--ds-color-on-brand);
  --bs-btn-active-bg: var(--ds-color-brand-active);
  --bs-btn-active-border-color: var(--ds-color-brand-active);
  --bs-btn-disabled-color: var(--ds-color-on-brand);
  --bs-btn-disabled-bg: var(--ds-color-brand-primary);
  --bs-btn-disabled-border-color: var(--ds-color-brand-primary);
}

/* 2. 브랜드 컬러 Line 강조 — .btn-outline-primary
   보조 행동. 브랜드 테두리·글자, 마우스 올림 시 채움. */
.label-v5 :where(.btn-outline-primary) {
  --bs-btn-color: var(--ds-color-brand-primary);
  --bs-btn-border-color: var(--ds-color-brand-primary);
  --bs-btn-hover-color: var(--ds-color-on-brand);
  --bs-btn-hover-bg: var(--ds-color-brand-hover);
  --bs-btn-hover-border-color: var(--ds-color-brand-hover);
  --bs-btn-focus-shadow-rgb: var(--ds-color-brand-primary-rgb);
  --bs-btn-active-color: var(--ds-color-on-brand);
  --bs-btn-active-bg: var(--ds-color-brand-active);
  --bs-btn-active-border-color: var(--ds-color-brand-active);
  --bs-btn-disabled-color: var(--ds-color-brand-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--ds-color-brand-primary);
}

/* 3. 일반 Line 강조 — .btn-outline-secondary
   덜 중요한 행동(초기화, 목록으로). Bootstrap 기본 회색 대신 보조 글자색 테두리. */
.label-v5 :where(.btn-outline-secondary) {
  --bs-btn-color: var(--ds-color-text-default);
  --bs-btn-border-color: var(--ds-color-text-default);
  --bs-btn-hover-bg: var(--ds-color-text-default);
  --bs-btn-hover-border-color: var(--ds-color-text-default);
  --bs-btn-active-bg: var(--ds-color-text-default);
  --bs-btn-active-border-color: var(--ds-color-text-default);
}

/* 4·5. 위험 BG/Line 강조 공통 — .btn-danger, .btn-outline-danger
   삭제·주문 취소 같은 위험 행동. 상태 danger 색(브랜드 빨강과 다른 색). */
.label-v5 :where(.btn-danger, .btn-outline-danger) {
  --bs-btn-hover-color: var(--ds-color-on-danger);
  --bs-btn-hover-bg: var(--ds-color-status-danger-hover);
  --bs-btn-hover-border-color: var(--ds-color-status-danger-hover);
  --bs-btn-focus-shadow-rgb: var(--ds-color-status-danger-rgb);
  --bs-btn-active-color: var(--ds-color-on-danger);
  --bs-btn-active-bg: var(--ds-color-status-danger-active);
  --bs-btn-active-border-color: var(--ds-color-status-danger-active);
  --bs-btn-border-color: var(--ds-color-status-danger);
  --bs-btn-disabled-border-color: var(--ds-color-status-danger);
}

/* 4. 위험 BG 강조 — .btn-danger */
.label-v5 :where(.btn-danger) {
  --bs-btn-color: var(--ds-color-on-danger);
  --bs-btn-bg: var(--ds-color-status-danger);
  --bs-btn-disabled-color: var(--ds-color-on-danger);
  --bs-btn-disabled-bg: var(--ds-color-status-danger);
}

/* 5. 위험 Line 강조 — .btn-outline-danger */
.label-v5 :where(.btn-outline-danger) {
  --bs-btn-color: var(--ds-color-status-danger);
  --bs-btn-disabled-color: var(--ds-color-status-danger);
}

/* 6. 흰색 BG — .btn-white
   어두운 배경(배너 등) 위에서만 쓴다. */
.label-v5 :where(.btn-white) {
  --bs-btn-color: var(--ds-color-text-strong);
  --bs-btn-bg: var(--il-white);
  --bs-btn-border-color: var(--il-white);
  --bs-btn-hover-color: var(--ds-color-brand-primary);
  --bs-btn-hover-bg: var(--ds-color-surface-page);
  --bs-btn-hover-border-color: var(--ds-color-surface-page);
  --bs-btn-active-color: var(--ds-color-brand-primary);
  --bs-btn-active-bg: var(--ds-color-surface-page);
  --bs-btn-active-border-color: var(--ds-color-surface-page);
}

/* 필수 선택을 빠뜨린 버튼(폼 검증). 마우스 올림·포커스 때도 빨간 테두리가 남도록 우선순위를 낮추지 않는다. */
.label-v5 .btn.is-invalid {
  border-color: var(--ds-color-status-danger);
  box-shadow: 0 0 0 var(--il-1) rgba(var(--ds-color-status-danger-rgb), .18);
}