/* =========================================
   BADGE.CSS — 라벨 / 태그 / 뱃지 / 칩 스타일
   ========================================= */

/* ── 기본 뱃지 ───────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-sans);
  line-height: 1.4;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* ── 색상 변형 ───────────────────────────── */
.badge--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.badge--accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.badge--outline-accent {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.badge--soft {
  background: rgba(26, 58, 110, 0.1);
  color: var(--color-primary);
}

.badge--soft-accent {
  background: rgba(201, 168, 76, 0.15);
  color: #8a6d1a;
}

.badge--light {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ── 분양 상태 뱃지 ──────────────────────── */
.badge--open {
  background: #e8f5e9;
  color: #2e7d32;
} /* 분양중 */
.badge--soon {
  background: #fff3e0;
  color: #e65100;
} /* 분양예정 */
.badge--soldout {
  background: #fce4ec;
  color: #c62828;
} /* 완판 */
.badge--closed {
  background: #f5f5f5;
  color: #9e9e9e;
} /* 마감 */
.badge--special {
  background: var(--color-accent);
  color: var(--color-white);
} /* 특별공급 */

/* ── 크기 변형 ───────────────────────────── */
.badge--sm {
  padding: 2px 8px;
  font-size: 10px;
}

.badge--lg {
  padding: 7px 18px;
  font-size: var(--fs-sm);
}

/* ── 태그 (클릭 가능) ────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  white-space: nowrap;
}

.tag:hover,
.tag.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* 태그 그룹 */
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ── 라벨 (테이블/폼 옆 설명) ────────────── */
.label {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.label--new {
  background: var(--color-primary);
  color: #fff;
}
.label--hot {
  background: #e74c3c;
  color: #fff;
}
.label--gold {
  background: var(--color-accent);
  color: #fff;
}
.label--info {
  background: #2980b9;
  color: #fff;
}

/* ── 카운트 뱃지 (숫자) ──────────────────── */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 10px;
  line-height: 1;
}

/* ── 골드 리본 뱃지 (아파트 타입 강조) ───── */
.ribbon {
  position: absolute;
  top: 12px;
  right: -6px;
  padding: 5px 16px 5px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background: var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
  letter-spacing: 0.05em;
  z-index: 1;
}

.ribbon--primary {
  background: var(--color-primary);
}

/* 리본 그림자 */
.ribbon::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 0;
  width: 6px;
  height: 6px;
  background: var(--color-accent-dark);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ribbon--primary::after {
  background: var(--color-primary-dark);
}