/* 트레이너 화면 — 홈 · 센터 체크리스트 · 내 정산
   ------------------------------------------------------------
   설계: design/checklist-prototype/ 와 Claude Design "BE:MOVE 트레이너 재설계"
   규칙: 브랜드 색을 직접 적지 않는다. 셸의 의미 토큰만 쓴다.
     면    --surface-app / --surface-card / --surface-sunken / --surface-inverse
     액센트 --surface-accent / --surface-accent-soft / --text-accent
     선    --line-hairline / --line-strong / --line-accent
     상태  --state-success / --state-warning / --state-danger
     서체  --font-display(표시) / --font-core(본문) / --font-mono(수치)
     라운딩 --radius-2(컨트롤) / --radius-3(카드) / --radius-4(시트)
   브랜드 값은 css/brand-theme.css 가 body[data-brand] 안에서 넣는다.
   한 화면의 오렌지 채움은 하나다 — 주요 버튼, 진행 중 슬롯 테두리, 다음 수업 행, 체크 완료.
   선택된 탭·슬롯·릴레이 O 는 차콜 채움(--surface-inverse)이다.
   ============================================================ */

.bmt {
  --bmt-gutter: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 4px 0 40px;
  font-family: var(--font-core);
  color: var(--text-body);
}
.bmt *, .bmt *::before, .bmt *::after { box-sizing: border-box; }
.bmt button { font-family: inherit; }

/* ── 마이크로 타이포 ─────────────────────────────────────── */
.bmt-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.bmt-label {
  font: 700 11px/1.3 var(--font-core);
  letter-spacing: .1em;
  color: var(--text-muted);
}
.bmt-h1 {
  font: 400 28px/1.1 var(--font-display);
  letter-spacing: .01em;
  color: var(--text-strong);
  margin: 0;
}
.bmt-sec-title {
  font: 400 19px/1.15 var(--font-display);
  letter-spacing: .01em;
  color: var(--text-strong);
}
/* 카드 제목은 본문 서체 700 — 표시 서체를 18px 아래로 내리지 않기 위해서다. */
.bmt-card-title { font: 700 15px/1.25 var(--font-core); color: var(--text-strong); }
.bmt-sub { font: 400 12px/1.45 var(--font-core); color: var(--text-muted); }
.bmt-faint { color: var(--text-faint); }
.bmt-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bmt-metric {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  letter-spacing: .01em;
}

/* ── 페이지 머리 ─────────────────────────────────────────── */
.bmt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bmt-head-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bmt-head-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bmt-head-aside { display: flex; align-items: center; gap: 18px; }
.bmt-head-stat { text-align: right; }
.bmt-head-rule { width: 1px; align-self: stretch; min-height: 32px; background: var(--line-hairline); }

.bmt-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

/* ── 카드 ────────────────────────────────────────────────── */
.bmt-card {
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-3);
  box-shadow: var(--elev-1);
}
.bmt-card--pad { padding: 16px; }
.bmt-card--flush { padding: 0; overflow: hidden; }
.bmt-card--deep {
  background: var(--surface-inverse);
  border-color: transparent;
  color: var(--text-on-accent);
}
.bmt-card--deep .bmt-metric { color: var(--text-on-accent); }
.bmt-card--sunken { background: var(--surface-sunken); border-color: transparent; box-shadow: none; }
/* 진행 중인 것 하나만 오렌지 테두리를 갖는다. */
.bmt-card--live { border: 1.5px solid var(--surface-accent); }

.bmt-note {
  padding: 9px 11px;
  background: var(--surface-sunken);
  border-radius: var(--radius-2);
  font: 400 12px/1.5 var(--font-core);
  color: var(--text-muted);
}
.bmt-note--live { background: var(--surface-accent-soft); color: var(--text-accent); }

/* 왼쪽 3px 규칙선을 두는 상태 배너 */
.bmt-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-left: 3px solid var(--line-hairline);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
  font: 400 12px/1.55 var(--font-core);
}
.bmt-banner--danger { border-left-color: var(--state-danger); background: color-mix(in srgb, var(--state-danger) 10%, transparent); color: var(--state-danger); }
.bmt-banner--warn { border-left-color: var(--state-warning); background: color-mix(in srgb, var(--state-warning) 14%, transparent); color: var(--text-body); }
.bmt-banner--ok { border-left-color: var(--state-success); background: color-mix(in srgb, var(--state-success) 12%, transparent); color: var(--text-body); }
.bmt-banner--accent { border-left-color: var(--surface-accent); background: var(--surface-accent-soft); color: var(--text-accent); }
.bmt-banner b { font-weight: 700; }

/* ── 칩 ──────────────────────────────────────────────────── */
.bmt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-1);
  border: 1px solid transparent;
  font: 700 11px/1.4 var(--font-core);
  letter-spacing: .04em;
  white-space: nowrap;
}
.bmt-chip--neutral { background: var(--surface-sunken); color: var(--text-muted); }
.bmt-chip--outline { border-color: var(--line-strong); color: var(--text-muted); }
.bmt-chip--accent { background: var(--surface-accent-soft); color: var(--text-accent); }
.bmt-chip--dark { background: var(--surface-inverse); color: var(--text-on-accent); }
.bmt-chip--ok { background: color-mix(in srgb, var(--state-success) 16%, transparent); color: var(--state-success); }
.bmt-chip--warn { background: color-mix(in srgb, var(--state-warning) 22%, transparent); color: var(--text-body); }
.bmt-chip--danger { background: color-mix(in srgb, var(--state-danger) 12%, transparent); color: var(--state-danger); }

/* ── 진행 막대 ───────────────────────────────────────────── */
.bmt-bar { height: 6px; border-radius: var(--radius-pill, 999px); background: var(--surface-sunken); overflow: hidden; }
.bmt-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--surface-accent); }
.bmt-bar--dark > i { background: var(--surface-inverse); }
.bmt-bar--sm { height: 4px; }
.bmt-bar--inverse { background: rgb(255 255 255 / 18%); }

/* ── 버튼 ────────────────────────────────────────────────── */
.bmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: var(--surface-card);
  color: var(--text-strong);
  font: 700 13.5px/1 var(--font-core);
  cursor: pointer;
  transition: background var(--dur-fast, 130ms) ease, border-color var(--dur-fast, 130ms) ease;
}
.bmt-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.bmt-btn--primary { background: var(--surface-accent); color: var(--text-on-accent); }
.bmt-btn--dark { background: var(--surface-inverse); color: var(--text-on-accent); }
.bmt-btn--outline { border-color: var(--line-strong); color: var(--text-body); background: var(--surface-card); }
.bmt-btn--outline:hover { background: var(--surface-hover); }
.bmt-btn--lg { min-height: 48px; font-size: 15px; }
.bmt-btn--block { width: 100%; }
.bmt-btn--stack { flex-direction: column; gap: 3px; }
.bmt-btn[disabled], .bmt-btn[aria-disabled="true"] {
  background: var(--surface-sunken);
  border-color: transparent;
  color: var(--text-faint);
  cursor: not-allowed;
}

/* ── 상단 순위 띠 ────────────────────────────────────────── */
.bmt-rank {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-2);
}
.bmt-rank-item { display: flex; align-items: center; gap: 5px; font: 700 11px/1 var(--font-core); color: var(--text-faint); }
.bmt-rank-item .bmt-num { font-size: 11px; font-weight: 600; color: var(--text-body); }
.bmt-rank-delta { font: 600 10px/1 var(--font-mono); color: var(--text-faint); }
.bmt-rank-delta.is-up { color: var(--state-success); }
.bmt-rank-delta.is-down { color: var(--state-danger); }

/* ── 그리드 ──────────────────────────────────────────────── */
.bmt-grid { display: grid; gap: 16px; }
.bmt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bmt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bmt-grid--main { grid-template-columns: 1.6fr minmax(0, 1fr); gap: 18px; align-items: start; }
.bmt-grid--pay { grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.bmt-grid--kpi { grid-template-columns: 340px repeat(4, minmax(0, 1fr)); gap: 14px; }
.bmt-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* 옆 열의 카드가 열 너비·높이를 다 쓰게 한다. */
.bmt-fill { flex: 1; display: flex; min-width: 0; }
.bmt-fill > .bmt-card { flex: 1; min-width: 0; }

/* ── 슬롯 카드 (홈) ─────────────────────────────────────── */
.bmt-slot { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.bmt-slot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bmt-slot-name { display: flex; align-items: center; gap: 8px; }
.bmt-slot-meter { display: flex; flex-direction: column; gap: 7px; }
.bmt-slot-counts { display: flex; justify-content: space-between; gap: 8px; font: 400 11.5px/1.3 var(--font-core); color: var(--text-muted); white-space: nowrap; }
.bmt-slot-foot { display: flex; align-items: center; justify-content: space-between; min-height: 42px; font: 700 12px/1 var(--font-core); color: var(--text-muted); }

/* ── 오늘의 수업 ────────────────────────────────────────── */
.bmt-class {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 14px;
  border-top: 1px solid var(--line-hairline);
}
.bmt-class:first-child { border-top: 0; }
.bmt-class-time { width: 46px; font: 500 13.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.bmt-class-body { flex: 1; min-width: 0; }
.bmt-class-name { font: 700 14px/1.3 var(--font-core); color: var(--text-strong); }
.bmt-class-desc { font: 400 12px/1.35 var(--font-core); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmt-class-count { font: 400 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
/* 다음 수업 한 행만 오렌지를 갖는다. */
.bmt-class.is-next { background: var(--surface-accent-soft); padding-left: 17px; }
.bmt-class.is-next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--surface-accent); }
.bmt-class.is-done .bmt-class-time { color: var(--text-faint); }
.bmt-class.is-done .bmt-class-name { color: var(--text-muted); }

/* ── 먼저 챙길 회원 ─────────────────────────────────────── */
.bmt-care-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--surface-sunken);
  border-radius: var(--radius-2);
}
.bmt-care-name { width: 56px; font: 700 13px/1.3 var(--font-core); color: var(--text-strong); flex: none; }
.bmt-care-meta { font: 400 12px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-body); white-space: nowrap; }

/* ── 표 ──────────────────────────────────────────────────── */
.bmt-table-wrap { overflow-x: auto; }
.bmt-table { width: 100%; border-collapse: collapse; }
.bmt-table th {
  font: 700 11px/1 var(--font-core);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-hairline);
  white-space: nowrap;
}
.bmt-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-hairline);
  font-size: 13px;
  color: var(--text-body);
}
.bmt-table tbody tr:last-child td { border-bottom: 0; }
.bmt-table .is-right { text-align: right; }
.bmt-table .is-name { font: 700 13px/1 var(--font-core); color: var(--text-strong); }
.bmt-table tbody tr.is-total td { background: var(--surface-sunken); border-top: 1px solid var(--line-hairline); font-weight: 700; }

/* ── 정산 ────────────────────────────────────────────────── */
.bmt-kpi { padding: 14px; }
.bmt-payout { display: flex; align-items: baseline; gap: 6px; }
.bmt-payout .bmt-metric { font-size: 40px; line-height: 1; }
.bmt-payout small { font: 500 15px/1 var(--font-core); color: var(--text-inverse-muted, var(--text-muted)); }
.bmt-card--deep .bmt-label { color: var(--text-accent); }
.bmt-card--deep .bmt-sub { color: var(--text-inverse-muted, var(--charcoal-300)); }

.bmt-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 12.5px/1.4 var(--font-core); color: var(--text-muted); }
.bmt-line .bmt-num { font-weight: 600; color: var(--text-body); }
.bmt-line.is-negative .bmt-num { color: var(--state-danger); }

.bmt-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
}
.bmt-tier.is-now { background: var(--surface-accent-soft); border-color: var(--line-accent); }
.bmt-tier.is-now .bmt-num, .bmt-tier.is-now .bmt-tier-cond { color: var(--text-accent); }
.bmt-tier-lv { width: 40px; font: 600 12px/1 var(--font-mono); color: var(--text-faint); }
.bmt-tier-cond { flex: 1; font: 400 12px/1.35 var(--font-core); color: var(--text-muted); }

.bmt-streak { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 10px; border-radius: var(--radius-2); }
.bmt-streak.is-now { background: color-mix(in srgb, var(--state-success) 14%, transparent); }
.bmt-streak-mark { width: 14px; text-align: center; font: 700 12px/1 var(--font-core); color: var(--text-faint); }
.bmt-streak-mark.is-ok { color: var(--state-success); }
.bmt-streak-mark.is-no { color: var(--state-danger); }

.bmt-bonus {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: var(--surface-sunken);
}
.bmt-bonus.is-applied { background: var(--surface-accent-soft); border-color: var(--line-accent); }
.bmt-bonus.is-applied .bmt-metric, .bmt-bonus.is-applied .bmt-num { color: var(--text-accent); }

/* ── 자동 집계 ───────────────────────────────────────────── */
.bmt-autos { display: flex; gap: 8px; }
.bmt-auto {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-2);
}
.bmt-auto-k { font: 700 10px/1.3 var(--font-core); letter-spacing: .08em; color: var(--text-faint); min-height: 26px; }
.bmt-auto.is-fail .bmt-auto-v { color: var(--state-danger); font: 700 12px/1.5 var(--font-core); }

/* ── 상태 안내 (연결 없음 / 비어 있음 / 오류) ────────────── */
.bmt-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 24px;
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-3);
}
.bmt-empty h3 { margin: 0; font: 400 19px/1.2 var(--font-display); letter-spacing: .01em; color: var(--text-strong); }
.bmt-empty p { margin: 0; font: 400 13px/1.65 var(--font-core); color: var(--text-muted); max-width: 62ch; }
.bmt-loading { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ── 모바일 (390 프레임 기준) ───────────────────────────── */
@media (max-width: 900px) {
  .bmt { gap: 16px; padding: 0 0 24px; }
  .bmt-grid--3, .bmt-grid--2, .bmt-grid--main, .bmt-grid--pay { grid-template-columns: minmax(0, 1fr); }
  /* 실지급 카드는 한 줄을 다 쓰고, 항목 4장은 두 칸씩 접는다. 한 화면에 계산이 다 들어온다. */
  .bmt-grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bmt-grid--kpi > :first-child { grid-column: 1 / -1; }
  .bmt-kpi { padding: 12px; }
  .bmt-kpi .bmt-metric { font-size: 19px !important; }
  .bmt-h1 { font-size: 23px; }
  .bmt-sec-title { font-size: 17px; }
  .bmt-head { align-items: flex-start; }
  .bmt-head-aside { width: 100%; justify-content: space-between; }
  .bmt-rank { justify-content: space-between; }
  .bmt-payout .bmt-metric { font-size: 32px; }
  /* 자동 집계는 가로 스크롤로 6칸을 유지한다. 접거나 반올림하지 않는다. */
  .bmt-autos { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bmt-autos::-webkit-scrollbar { display: none; }
  .bmt-auto { flex: 0 0 132px; }
  .bmt-care-row { flex-wrap: wrap; }
  .bmt-care-name { width: auto; }
  /* 표는 카드 안에서만 가로로 흐른다. 본문이 가로로 밀리지 않게 한다. */
  .bmt-table th, .bmt-table td { padding: 8px 10px; font-size: 12px; }
}

/* 모바일에서 표 대신 카드로 바뀌는 회원별 수업료 */
.bmt-ledger-cards { display: none; }
@media (max-width: 720px) {
  .bmt-ledger-table { display: none; }
  .bmt-ledger-cards { display: grid; gap: 7px; }
  .bmt-ledger-card { padding: 12px; }
  .bmt-ledger-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .bmt-ledger-card-grid { display: flex; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-hairline); }
  .bmt-ledger-card-grid > div { flex: 1; min-width: 0; }
}

/* 화면 아래에 붙는 제출 바 — 모바일에서만 고정한다. */
.bmt-sticky-foot { display: contents; }
@media (max-width: 900px) {
  .bmt-sticky-foot {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 calc(var(--bmt-gutter) * -1);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface-card);
    border-top: 1px solid var(--line-hairline);
    box-shadow: var(--elev-3);
  }
}