/*
 * ui.css — 공용 컴포넌트 계층 스타일 (js/ui.js가 emit하는 클래스)
 * ─────────────────────────────────────────────────────────────
 * 원칙:
 *   - 값은 전부 scale.css 토큰 + tokens.css 색 토큰. px·hex 하드코딩 금지.
 *   - 카드 모양·표 모양·여백을 바꾸려면 "이 파일 한 곳"만 고친다.
 *   - 기존 SSoT는 재사용: 버튼=.btn(styles.css) / 상태=.status-tag
 *     (.status-tag는 스킨 파일에만 있고 base 정의가 없어 여기서 보강)
 *   - 스킨은 scale.css 토큰만 재정의하면 이 컴포넌트 전체에 반영됨.
 *
 * 로드 순서: tokens.css → scale.css → styles.css → ui.css → skin-*.css
 */

/* ── 상태 의미색 (전경색 단일 출처) ─────────────────────────
   배경 틴트는 styles.css의 --bg-*-soft 재사용. 스킨은 이 토큰만 재정의하면 됨. */
:root {
  --st-ok-fg: #15803d;
  --st-warn-fg: #b45309;
  --st-danger-fg: #b91c1c;
  --st-info-fg: #1e40af;
  --st-danger-line: #ef4444;
}

/* ── 카드 ───────────────────────────────────────────────── */
.ui-card {
  background: var(--bg-card);
  border: var(--bw-hair) solid var(--border-color);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-card);
}
/* 세로로 이어질 때만 간격 — 레이아웃 컨테이너 안에서는 컨테이너의 gap이 담당한다.
   (이 리셋이 없으면 grid/row 안에서 이중 간격이 생기고, 래퍼로 감싸다 등높이를 잃는다) */
.ui-card + .ui-card { margin-top: var(--sp-3); }
.ui-grid > .ui-card, .ui-row > .ui-card, .ui-stack > .ui-card { margin-top: 0; }
/* 그리드 아이템은 행 높이를 채워 카드 하단선이 나란히 맞는다(등높이) */
.ui-grid > .ui-card { height: 100%; }
.ui-card.is-flat { background: none; border: none; padding: 0; }
.ui-card.is-tint { background: var(--bg-subtle); }
/* 톤 + 틴트 = 콜아웃(경고 박스). 배경·좌측바·글자색 3중 신호로 안전 신호를 강하게 */
.ui-card.is-tint.t-ok     { background: var(--bg-success-soft); }
.ui-card.is-tint.t-warn   { background: var(--bg-warn-soft); }
.ui-card.is-tint.t-danger { background: var(--bg-danger-soft); }
.ui-card.is-tint.t-info   { background: var(--bg-info-soft); }
/* 좌측 강조 바 — 상태 톤 */
.ui-card.t-ok      { border-left: var(--bw-accent) solid var(--accent-green); }
.ui-card.t-warn    { border-left: var(--bw-accent) solid var(--accent-orange); }
.ui-card.t-danger  { border-left: var(--bw-accent) solid var(--st-danger-line); }
.ui-card.t-info    { border-left: var(--bw-accent) solid var(--accent-blue); }

.ui-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.ui-card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  color: var(--text-main);
  letter-spacing: -0.2px;
}
.ui-card-sub {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--text-tertiary);
  line-height: var(--lh-normal);
}
.ui-card-actions { display: flex; gap: var(--sp-1h); align-items: center; }

/* ── 섹션 라벨(작은 머리글) ─────────────────────────────── */
.ui-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-1h);
}

/* ── 표 ─────────────────────────────────────────────────── */
.ui-table-wrap { overflow-x: auto; }
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.ui-table thead th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  text-align: left;
  padding: var(--sp-1h) var(--sp-2h);
  border-bottom: var(--bw-hair) solid var(--border-color);
  white-space: nowrap;
}
.ui-table tbody td {
  padding: var(--sp-2) var(--sp-2h);
  color: var(--text-main);
  border-top: var(--bw-hair) solid var(--border-color);
  vertical-align: middle;
}
.ui-table tbody tr:first-child td { border-top: none; }
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table .is-mid { text-align: center; }
.ui-table .is-sub { color: var(--text-tertiary); font-size: var(--fs-sm); }
.ui-table .is-strong { font-weight: var(--fw-bold); }
.ui-table tfoot td { padding: var(--sp-2) var(--sp-2h); border-top: var(--bw-thick) solid var(--border-color);
  font-weight: var(--fw-bold); color: var(--text-main); }
.ui-table tbody tr.is-clickable { cursor: pointer; }
.ui-table tbody tr.is-clickable:hover { background: var(--bg-subtle); }

/* ── 키-값 목록 ─────────────────────────────────────────── */
.ui-kv { display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-1h) 0; border-bottom: var(--bw-hair) solid var(--border-color); }
.ui-kv:last-child { border-bottom: none; }
.ui-kv > .k { font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; }
.ui-kv > .v { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-main); text-align: right; }

/* ── 폼 필드 ────────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: var(--sp-1h); }
.ui-field > .lbl { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.ui-field > .lbl .req { color: var(--st-danger-line); margin-left: 2px; }
.ui-field > .hint { font-size: var(--fs-xs); color: var(--text-faint); line-height: var(--lh-normal); }

/* ── 빈 상태 ────────────────────────────────────────────── */
.ui-empty {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
/* 확장형 빈 상태(안내+CTA) — ui.empty 객체형이 emit. 다음 행동을 지시하는 첫 사용 화면용 */
.ui-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-secondary); }
.ui-empty-desc { margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--text-tertiary); }
.ui-empty-actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-2h); justify-content: center; flex-wrap: wrap; }
.ui-empty-hint { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-faint); }
/* 시작 상태(온보딩 빈 화면) — 여백을 넉넉히 잡아 안내가 화면 중심에 오게 */
.ui-empty.is-start { padding: var(--sp-8) var(--sp-4); }

/* ── 상태 태그 base — ⚠ .status-tag가 아니라 .ui-tag 전용 ─────
   기존 화면 43곳이 .status-tag를 인라인 style과 함께 쓰는데, 거기에 base를 주면
   classic(운영, 스킨 OFF)에서 display:inline→inline-flex·gap 추가로 레이아웃이 밀린다.
   ui.tag()는 두 클래스를 함께 달아(status-tag ui-tag) 스킨 규칙도 그대로 받는다. */
.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px var(--sp-1h);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.ui-tag.is-lg { font-size: var(--fs-lg); font-weight: var(--fw-heavy); padding: var(--sp-1) var(--sp-3); }
.ui-tag.is-lg .ico { width: 7px; height: 7px; }
.ui-tag .ico { width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; flex: 0 0 auto; }
.ui-tag.t-ok     { color: var(--st-ok-fg); background: var(--bg-success-soft); }
.ui-tag.t-warn   { color: var(--st-warn-fg); background: var(--bg-warn-soft); }
.ui-tag.t-danger { color: var(--st-danger-fg); background: var(--bg-danger-soft); }
.ui-tag.t-info   { color: var(--st-info-fg); background: var(--bg-info-soft); }
.ui-tag.t-muted  { color: var(--text-tertiary); background: var(--bg-muted); }

/* ── 작은 셀렉트(표 안 인라인 조작용) ───────────────────── */
.ui-select-sm {
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-1h);
  border: var(--bw-hair) solid var(--border-color);
  border-radius: var(--input-radius, var(--r-md));
  background: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  cursor: pointer;
}
.ui-select-sm + .btn { margin-left: var(--sp-1); }

/* ── 레이아웃 유틸(최소) ────────────────────────────────── */
.ui-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ui-row.is-between { justify-content: space-between; }
.ui-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.ui-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(var(--ui-grid-min, 280px), 1fr)); }
.ui-spacer { flex: 1; }