/* components.css — 재사용 컴포넌트 패턴
 * 의존: tokens.css (먼저 로드되어야 함)
 * 사용처: 모든 모듈 공용. 새 코드는 여기 정의된 클래스 우선 사용.
 *
 * 패턴 목록:
 *   .btn / .btn-brand / .btn-ghost / .btn-outline  + sizes (.btn-sm)
 *   .kpi-card (BEM-lite: --hero / --warn) + .kpi-card-grid
 *   .badge (success/warn/error/neutral)
 *   .section-title / .section-sub  — 섹션 제목 유틸
 *   .legend-dot / .empty-row / .dim — 테이블·차트 공용 유틸
 *   .trend-pill (up/flat/down/strong) — 추세 인라인 pill
 *   .quad-pill (q-excellent/shallow/heavy/dormant) — 4분면 라벨 pill
 *
 * Flex 전용 컴포넌트 (레이아웃, 테이블, 4분면 카드 등) → css/flex.css
 */

/* ── Button ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base),
    border-color var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variants */
.btn-brand {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.btn-brand:hover:not(:disabled) {
  background: var(--color-brand-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-sub);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.btn-outline {
  background: var(--color-surface);
  color: var(--color-text-label);
  border-color: var(--color-border);
}
.btn-outline:hover:not(:disabled) {
  background: var(--color-surface-alt);
  border-color: var(--color-input-border);
}
.btn-outline.is-active {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}

/* Sizes */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* ── Badge ─────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  min-width: 52px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-align: center;
}
.badge-success {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.badge-warn {
  background: var(--color-warn-soft);
  color: var(--color-warn);
}
.badge-error {
  background: var(--color-error-soft);
  color: var(--color-error);
}
.badge-neutral {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* ── Section 제목 유틸 ─────────────────────────────────────── */
.section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}
.section-sub {
  font-size: var(--text-sm);
  font-weight: normal;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

/* ── KPI Card (통합 컴포넌트) ─────────────────────────────────
 * 베이스 + 사이즈 modifier 패턴 (BEM-lite).
 *   .kpi-card                기본 카드 (mini 사이즈가 default)
 *   .kpi-card--hero          큰 사이즈 (페이지 헤드라인용, brand inset)
 *   .kpi-card--warn          warn 액센트 (왼쪽 회색 띠)
 *
 *   .kpi-card__label / __value / __sub     자식 요소
 *   .kpi-card__unit / .kpi-card__delta (.up/.down)  인라인 보조 칩
 *   .kpi-card-grid                         5컬럼 → 3 → 2 반응형 그리드
 */
.kpi-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-inset-faint), var(--shadow-card-flat);
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 좌측 inset 띠가 곡선 없이 일자로 떨어지도록 */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.kpi-card__label { font-size: var(--text-2sm); color: var(--color-text-muted); }
.kpi-card__value { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text); line-height: 1.1; }
.kpi-card__sub   { font-size: var(--text-2sm); color: var(--color-text-muted); }

/* Modifiers — 기본 mini는 깔끔, hero/warn 등 의미 있는 카드만 inset 띠를 사용.
   inset 띠를 쓰는 카드는 좌측 모서리를 평탄화해 띠가 곡선 없이 일자로 떨어지게 한다. */
.kpi-card--warn {
  box-shadow: inset 3px 0 0 var(--color-text-down), var(--shadow-card-flat);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.kpi-card--hero {
  padding: var(--space-5) var(--space-6);
  box-shadow: inset 4px 0 0 var(--color-brand), var(--shadow-card-flat);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.kpi-card--hero .kpi-card__label { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.kpi-card--hero .kpi-card__value { font-size: var(--text-display); line-height: 1; }
.kpi-card--hero .kpi-card__sub   { font-size: var(--text-lg); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kpi-card--hero .kpi-card__sub .sep { opacity: .4; font-size: var(--text-xl); }
.kpi-card--hero .kpi-card__sub-num {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}

/* Grid container */
.kpi-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1100px) { .kpi-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .kpi-card-grid { grid-template-columns: repeat(2, 1fr); } }

/* 인라인 보조 (label/value 옆) */
.kpi-card__unit { font-size: var(--text-sm); font-weight: normal; color: var(--color-text-muted); margin-left: 2px; }
.kpi-card__delta {
  display: inline-block; margin-left: 4px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: 1px 6px; border-radius: var(--radius-pill);
}
.kpi-card__delta.up   { color: var(--color-brand);      background: var(--color-brand-200); }
.kpi-card__delta.down { color: var(--color-text-down);  background: var(--color-down-100); }

/* ── 공용 유틸 ─────────────────────────────────────────────── */
.empty-row { text-align: center; padding: var(--space-6) !important; color: var(--color-text-muted); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 var(--space-1); vertical-align: middle; }
.legend-dot.up   { background: var(--color-brand); }
.legend-dot.flat { background: var(--color-neutral-500); }
.legend-dot.down { background: var(--color-text-down); }
.dim { color: var(--color-text-muted); font-weight: normal; margin-left: 4px; }

/* ── Trend Pill (추세 인라인 pill) ─────────────────────────── */
.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.trend-pill .trend-arrow { font-size: var(--text-micro); line-height: 1; }
.trend-pill .trend-delta { font-size: var(--text-sm); }
.trend-up   { background: var(--color-brand-400);   color: var(--color-brand); }
.trend-flat { background: var(--color-neutral-200); color: var(--color-text-muted); }
.trend-down { background: var(--color-down-300);    color: var(--color-text-down-strong); }
.trend-pill.trend-strong { border: 1px solid transparent; }
.trend-pill.trend-strong.trend-up   { border-color: var(--color-brand-border); }
.trend-pill.trend-strong.trend-down { border-color: var(--color-down-border); }

/* ── Quad Pill (4분면 라벨 pill) ───────────────────────────── */
.quad-pill {
  display: inline-block;
  font-size: var(--text-sm);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-100);
  color: var(--color-text-muted);
}
.quad-pill.q-excellent { background: var(--color-brand-300);   color: var(--color-brand);          font-weight: var(--weight-semibold); }
.quad-pill.q-shallow   { background: var(--color-brand-100);   color: var(--color-brand); }
.quad-pill.q-heavy     { background: var(--color-neutral-200); color: var(--color-text-muted); }
.quad-pill.q-dormant   { background: var(--color-down-100);    color: var(--color-text-down); }