/* OT 관리 화면. 브랜드 중립 표면이다.
   색·서체·반지름은 셸의 의미 토큰만 참조하고, 실제 값은 브랜드 테마
   레이어(web/gymtoss/css/brand-theme.css, body[data-brand=...])가 정한다.
   이 파일에 브랜드 색을 직접 적으면 다른 브랜드가 같은 기능을 쓸 수 없다. */
body[data-app-mode="bemove"] .fx-ot-management {
  --ot-accent: var(--cyan-500, #00aeef);
  --ot-accent-strong: var(--cyan-600, #0090c6);
  --ot-accent-soft: var(--surface-accent-soft, #e8f8fe);
  --ot-surface: var(--surface-card, #fff);
  --ot-surface-muted: var(--surface-sunken, #e8ebed);
  --ot-page: var(--surface-app, #f4f6f7);
  --ot-text: var(--text-strong, #14171a);
  --ot-text-sub: var(--text-body, #33383c);
  --ot-border: var(--line-hairline, #d6dbde);
  --ot-success: var(--green-500, var(--state-success, #2e9e5b));
  --ot-success-soft: var(--green-100, #e2f4e9);
  --ot-warning: var(--amber-500, var(--state-warning, #f2b01e));
  --ot-danger: var(--red-500, var(--state-danger, #d93a3a));
  --ot-danger-soft: var(--red-100, #fbe4e4);
  --ot-info: var(--blue-500, var(--text-accent, #2f6fd0));
  --ot-info-soft: var(--blue-100, #e4edfb);
  --ot-font-display: var(--font-display, "Gothic A1", "Apple SD Gothic Neo", sans-serif);
  --ot-font-body: var(--font-core, "Gothic A1", "Apple SD Gothic Neo", sans-serif);
  --ot-font-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --ot-control-radius: var(--radius-3, 8px);
  --ot-card-radius: var(--radius-3, 8px);
  --ot-sheet-radius: var(--radius-4, 12px);
  --ot-shadow: var(--elev-1, 0 1px 2px rgb(20 23 26 / 6%));
  --ot-ring-focus: var(--ring-focus, 0 0 0 2px var(--ot-page), 0 0 0 4px var(--ot-accent));
  width: 100%;
  /* 열이 많아 표가 넓다. 1440px 상한을 두면 넓은 화면에서 양옆이 비고 표만 좁아진다. */
  max-width: none;
  min-height: 100%;
  margin: 0;
  padding: 32px 24px 56px;
  background: var(--ot-page);
  color: var(--ot-text);
  font-family: var(--ot-font-body);
}

body[data-app-mode="bemove"] .fx-ot-management {
  color-scheme: light;
}

:root[data-formula-theme="dark"] body[data-app-mode="bemove"] .fx-ot-management {
  --ot-surface: var(--surface-card, #202427);
  --ot-surface-muted: var(--surface-sunken, #0c0e10);
  --ot-page: var(--surface-app, #14171a);
  --ot-text: var(--text-strong, #fff);
  --ot-text-sub: var(--text-body, #d6dbde);
  --ot-border: var(--line-hairline, rgb(255 255 255 / 10%));
  --ot-accent-soft: var(--surface-accent-soft, rgb(0 174 239 / 14%));
}

body[data-app-mode="bemove"] .fx-ot-management *,
body[data-app-mode="bemove"] .fx-ot-management *::before,
body[data-app-mode="bemove"] .fx-ot-management *::after { box-sizing: border-box; }

body[data-app-mode="bemove"] .fx-ot-header,
body[data-app-mode="bemove"] .fx-ot-section-head,
body[data-app-mode="bemove"] .fx-ot-header-actions,
body[data-app-mode="bemove"] .fx-ot-modal-actions,
body[data-app-mode="bemove"] .fx-ot-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body[data-app-mode="bemove"] .fx-ot-header-actions .btn {
  flex: 0 0 auto;
  min-width: 112px;
  white-space: nowrap;
}

body[data-app-mode="bemove"] .fx-ot-header { margin-bottom: 32px; align-items: flex-end; }
body[data-app-mode="bemove"] .fx-ot-header h1,
body[data-app-mode="bemove"] .fx-ot-modal h2,
body[data-app-mode="bemove"] .fx-ot-drawer h2,
body[data-app-mode="bemove"] .fx-ot-section-head h2,
body[data-app-mode="bemove"] .fx-ot-section-head h3 {
  margin: 0;
  color: var(--ot-text);
  font-family: var(--ot-font-display);
  letter-spacing: .01em;
  line-height: 1.15;
}
body[data-app-mode="bemove"] .fx-ot-header h1 { margin-top: 6px; font-size: clamp(32px, 4vw, 40px); }
body[data-app-mode="bemove"] .fx-ot-header p,
body[data-app-mode="bemove"] .fx-ot-modal header p,
body[data-app-mode="bemove"] .fx-ot-section-head p { margin: 5px 0 0; color: var(--ot-text-sub); }
body[data-app-mode="bemove"] .fx-ot-eyebrow {
  color: var(--ot-accent);
  font-family: var(--ot-font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-app-mode="bemove"] .fx-ot-filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface);
}
body[data-app-mode="bemove"] .fx-ot-filters label,
body[data-app-mode="bemove"] .fx-ot-modal label,
body[data-app-mode="bemove"] .fx-ot-session-form label,
body[data-app-mode="bemove"] .fx-ot-tm-form label,
body[data-app-mode="bemove"] .fx-ot-feedback-form label {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  gap: 5px;
  color: var(--ot-text-sub);
  font-size: 12px;
  font-weight: 700;
}
body[data-app-mode="bemove"] .fx-ot-management :where(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-control-radius);
  background: var(--ot-surface);
  color: var(--ot-text);
  font: inherit;
}
body[data-app-mode="bemove"] .fx-ot-management label small { color: var(--ot-text-sub); font-size: 10px; font-weight: 500; line-height: 1.45; }
body[data-app-mode="bemove"] .fx-ot-management .btn {
  /* 레거시 앱의 전역 .btn-primary 는 로그인 폼용으로 width:100% 다.
     이 화면은 두 앱이 같은 파일을 쓰므로 폭을 여기서 되돌린다. */
  width: auto;
  min-height: 48px;
  font-family: var(--ot-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
body[data-app-mode="bemove"] .fx-ot-management textarea { resize: vertical; line-height: 1.55; }
body[data-app-mode="bemove"] .fx-ot-management :where(input, select, textarea):focus-visible {
  border-color: var(--ot-accent);
  outline: none;
  box-shadow: var(--ot-ring-focus) !important;
}

body[data-app-mode="bemove"] .fx-ot-management .btn-primary {
  border: 2px solid var(--ot-accent);
  background: var(--ot-accent);
  color: var(--text-on-accent, #fff);
  box-shadow: none;
}
body[data-app-mode="bemove"] .fx-ot-management .btn-primary:hover { border-color: var(--ot-accent-strong); background: var(--ot-accent-strong); }
body[data-app-mode="bemove"] .fx-ot-management .btn-outline { border: 2px solid var(--ot-text); background: var(--ot-surface); color: var(--ot-text); }
body[data-app-mode="bemove"] .fx-ot-management :where(button, .btn):focus-visible {
  outline: none;
  box-shadow: var(--ot-ring-focus) !important;
}

body[data-app-mode="bemove"] .fx-ot-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(128px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
body[data-app-mode="bemove"] .fx-ot-kpi {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ot-border);
  border-top: 2px solid var(--ot-border);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface);
}
body[data-app-mode="bemove"] .fx-ot-kpi--converted,
body[data-app-mode="bemove"] .fx-ot-kpi--rate,
body[data-app-mode="bemove"] .fx-ot-kpi--contract,
body[data-app-mode="bemove"] .fx-ot-kpi--paid { border-top-color: var(--ot-accent); }
body[data-app-mode="bemove"] .fx-ot-kpi span {
  display: block;
  color: var(--ot-text-sub);
  font-family: var(--ot-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
body[data-app-mode="bemove"] .fx-ot-kpi strong {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  color: var(--ot-text);
  font-family: var(--ot-font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-app-mode="bemove"] .fx-ot-manager-dashboard { display: grid; gap: 16px; margin-bottom: 24px; }
body[data-app-mode="bemove"] .fx-ot-dashboard-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface);
}
body[data-app-mode="bemove"] .fx-ot-dashboard-card > .fx-ot-section-head { min-height: 72px; padding: 16px 20px; border-bottom: 1px solid var(--ot-border); }
body[data-app-mode="bemove"] .fx-ot-dashboard-card > .fx-ot-section-head h2 { font-size: 20px; }
body[data-app-mode="bemove"] .fx-ot-dashboard-card > .fx-ot-section-head p { font-size: 12px; }
body[data-app-mode="bemove"] .fx-ot-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px;
  list-style: none;
}
body[data-app-mode="bemove"] .fx-ot-funnel li {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--ot-border);
  border-left: 3px solid var(--ot-accent);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface-muted);
}
body[data-app-mode="bemove"] .fx-ot-funnel span,
body[data-app-mode="bemove"] .fx-ot-funnel small { display: block; color: var(--ot-text-sub); font-size: 11px; font-weight: 700; }
body[data-app-mode="bemove"] .fx-ot-funnel strong {
  display: block;
  margin: 6px 0 3px;
  color: var(--ot-text);
  font-family: var(--ot-font-display);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
body[data-app-mode="bemove"] .fx-ot-dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; }
body[data-app-mode="bemove"] .fx-ot-dashboard-table-wrap { overflow: auto; }
body[data-app-mode="bemove"] .fx-ot-dashboard-table { width: 100%; min-width: 760px; border-collapse: collapse; }
body[data-app-mode="bemove"] .fx-ot-dashboard-table th,
body[data-app-mode="bemove"] .fx-ot-dashboard-table td { padding: 11px 12px; border-bottom: 1px solid var(--ot-border); color: var(--ot-text); text-align: right; vertical-align: middle; }
body[data-app-mode="bemove"] .fx-ot-dashboard-table th { background: var(--ot-surface-muted); color: var(--ot-text-sub); font-family: var(--ot-font-body); font-size: 11px; letter-spacing: .08em; }
body[data-app-mode="bemove"] .fx-ot-dashboard-table :where(th, td):first-child { text-align: left; }
body[data-app-mode="bemove"] .fx-ot-dashboard-table td:not(:first-child) { font-family: var(--ot-font-mono); font-variant-numeric: tabular-nums; }
body[data-app-mode="bemove"] .fx-ot-dashboard-table td small { display: block; margin-top: 3px; color: var(--ot-text-sub); font: 10px var(--ot-font-body); }
body[data-app-mode="bemove"] .fx-ot-text-button {
  min-height: 48px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ot-text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--ot-accent);
  text-underline-offset: 3px;
  cursor: pointer;
}
body[data-app-mode="bemove"] .fx-ot-pending-total { color: var(--ot-accent-strong); font-family: var(--ot-font-mono); font-size: 18px; white-space: nowrap; }
body[data-app-mode="bemove"] .fx-ot-pending-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body[data-app-mode="bemove"] .fx-ot-pending-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ot-border); }
body[data-app-mode="bemove"] .fx-ot-pending-list li:last-child { border-bottom: 0; }
body[data-app-mode="bemove"] .fx-ot-pending-list li > div { min-width: 0; }
body[data-app-mode="bemove"] .fx-ot-pending-list :where(strong, span, small) { display: block; }
body[data-app-mode="bemove"] .fx-ot-pending-list strong { overflow: hidden; color: var(--ot-text); text-overflow: ellipsis; white-space: nowrap; }
body[data-app-mode="bemove"] .fx-ot-pending-list span,
body[data-app-mode="bemove"] .fx-ot-pending-list small { margin-top: 3px; color: var(--ot-text-sub); font-size: 11px; }
body[data-app-mode="bemove"] .fx-ot-dashboard-empty { padding: 28px 16px; color: var(--ot-text-sub); text-align: center; }

body[data-app-mode="bemove"] .fx-ot-list-card,
body[data-app-mode="bemove"] .fx-ot-empty,
body[data-app-mode="bemove"] .fx-ot-state,
body[data-app-mode="bemove"] .fx-ot-detail-section,
body[data-app-mode="bemove"] .fx-ot-session-form {
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface);
}
body[data-app-mode="bemove"] .fx-ot-list-card { overflow: hidden; }
body[data-app-mode="bemove"] .fx-ot-list-card > .fx-ot-section-head { padding: 15px 18px; border-bottom: 1px solid var(--ot-border); }
body[data-app-mode="bemove"] .fx-ot-table-wrap { overflow: auto; }
body[data-app-mode="bemove"] .fx-ot-table { min-width: 920px; border-collapse: collapse; background: var(--ot-surface); }
body[data-app-mode="bemove"] .fx-ot-table th,
body[data-app-mode="bemove"] .fx-ot-table td { padding: 12px 14px; border-bottom: 1px solid var(--ot-border); color: var(--ot-text); text-align: left; vertical-align: middle; }
body[data-app-mode="bemove"] .fx-ot-table th { background: var(--ot-surface-muted); color: var(--ot-text-sub); font-family: var(--ot-font-body); font-size: 11px; letter-spacing: .08em; }
body[data-app-mode="bemove"] .fx-ot-table td small { display: block; margin-top: 3px; color: var(--ot-text-sub); font-size: 11px; }
body[data-app-mode="bemove"] .fx-ot-table tbody tr:hover td { background: var(--ot-accent-soft); }
/* 열이 많아 칸이 좁아지면 '트레이너'·'미기록'·'PT 계약' 같은 짧은 말이 두 줄로 접혔다.
   가로 스크롤은 이미 .fx-ot-table-wrap 이 맡으므로 글자를 접지 않는다.
   길어질 수 있는 특이사항만 아래에서 말줄임으로 따로 다룬다. */
body[data-app-mode="bemove"] .fx-ot-table th,
body[data-app-mode="bemove"] .fx-ot-table td { white-space: nowrap; }
body[data-app-mode="bemove"] .fx-ot-table td small { white-space: nowrap; }
body[data-app-mode="bemove"] .fx-ot-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--ot-border); color: var(--ot-text-sub); font-size: 12px; }
body[data-app-mode="bemove"] .fx-ot-pagination > div { display: flex; gap: 8px; }

body[data-app-mode="bemove"] .fx-ot-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-control-radius);
  background: var(--ot-surface-muted);
  color: var(--ot-text-sub);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
/* Keep status variants at least as specific as the generic form-control rule
   above; :where() would make these semantic colors lose the cascade. */
body[data-app-mode="bemove"] .fx-ot-management :is(.fx-ot-status--assigned, .fx-ot-status--scheduled, .fx-ot-status--ot1_scheduled, .fx-ot-status--ot2_scheduled, .fx-ot-status--in_progress, .fx-ot-status--ot1_completed, .fx-ot-status--ot2_completed) {
  border-color: color-mix(in srgb, var(--ot-info) 45%, var(--ot-border));
  background: var(--ot-info-soft);
  color: var(--ot-info);
}
body[data-app-mode="bemove"] .fx-ot-management .fx-ot-status--converted {
  border-color: color-mix(in srgb, var(--ot-success) 45%, var(--ot-border));
  background: var(--ot-success-soft);
  color: var(--ot-success);
}
body[data-app-mode="bemove"] .fx-ot-management :is(.fx-ot-status--lost, .fx-ot-status--cancelled, .fx-ot-status--rejected) {
  border-color: color-mix(in srgb, var(--ot-danger) 45%, var(--ot-border));
  background: var(--ot-danger-soft);
  color: var(--ot-danger);
}

body[data-app-mode="bemove"] .fx-ot-inline-status-form {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
body[data-app-mode="bemove"] .fx-ot-status-select {
  min-width: 96px;
  min-height: 36px;
  max-width: 100%;
  padding: 6px 28px 6px 10px;
  border: 2px solid var(--ot-border);
  border-radius: var(--ot-control-radius);
  background: var(--ot-surface);
  color: var(--ot-text);
  font: 800 12px/1.2 var(--ot-font-body);
  cursor: pointer;
}
body[data-app-mode="bemove"] .fx-ot-status-select:focus {
  outline: none;
  box-shadow: var(--ot-ring-focus);
}
body[data-app-mode="bemove"] .fx-ot-status-select:disabled { cursor: wait; opacity: .65; }
body[data-app-mode="bemove"] .fx-ot-management :is(.fx-ot-status-select.fx-ot-status--assigned, .fx-ot-status-select.fx-ot-status--scheduled, .fx-ot-status-select.fx-ot-status--ot1_scheduled, .fx-ot-status-select.fx-ot-status--ot2_scheduled, .fx-ot-status-select.fx-ot-status--in_progress, .fx-ot-status-select.fx-ot-status--ot1_completed, .fx-ot-status-select.fx-ot-status--ot2_completed) {
  border-color: color-mix(in srgb, var(--ot-info) 58%, var(--ot-border));
  background: var(--ot-info-soft);
  color: var(--ot-info);
}
body[data-app-mode="bemove"] .fx-ot-management .fx-ot-status-select.fx-ot-status--converted {
  border-color: color-mix(in srgb, var(--ot-success) 58%, var(--ot-border));
  background: var(--ot-success-soft);
  color: var(--ot-success);
}
body[data-app-mode="bemove"] .fx-ot-management :is(.fx-ot-status-select.fx-ot-status--lost, .fx-ot-status-select.fx-ot-status--cancelled, .fx-ot-status-select.fx-ot-status--rejected) {
  border-color: color-mix(in srgb, var(--ot-danger) 58%, var(--ot-border));
  background: var(--ot-danger-soft);
  color: var(--ot-danger);
}

/* Read-only terminal chips should occupy the same footprint as editable status controls. */
body[data-app-mode="bemove"] .fx-ot-table .fx-ot-status {
  width: 116px;
  min-width: 116px;
  height: 48px;
  min-height: 48px;
  justify-content: center;
  padding: 8px 12px;
  border-width: 2px;
  font-size: 12px;
}
body[data-app-mode="bemove"] .fx-ot-table .fx-ot-status-select {
  width: 116px;
  min-width: 116px;
  height: 48px;
  min-height: 48px;
}

body[data-app-mode="bemove"] .fx-ot-empty,
body[data-app-mode="bemove"] .fx-ot-state { padding: 48px 24px; text-align: center; }
body[data-app-mode="bemove"] .fx-ot-empty h3,
body[data-app-mode="bemove"] .fx-ot-state h2 { margin: 0; color: var(--ot-text); }
body[data-app-mode="bemove"] .fx-ot-empty p,
body[data-app-mode="bemove"] .fx-ot-state p { margin: 8px 0 18px; color: var(--ot-text-sub); }
body[data-app-mode="bemove"] .fx-ot-state--error { border-color: color-mix(in srgb, var(--ot-danger) 42%, var(--ot-border)); }
body[data-app-mode="bemove"] .fx-ot-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  border: 3px solid var(--ot-border);
  border-top-color: var(--ot-accent);
  border-radius: 50%;
  animation: fx-ot-spin .8s linear infinite;
}
@keyframes fx-ot-spin { to { transform: rotate(360deg); } }

body[data-app-mode="bemove"] .fx-ot-notice,
body[data-app-mode="bemove"] .fx-ot-toast,
body[data-app-mode="bemove"] .fx-ot-action-status,
body[data-app-mode="bemove"] .fx-ot-local-status {
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: var(--ot-control-radius);
  color: var(--ot-text-sub);
  font-size: 12px;
}
body[data-app-mode="bemove"] .fx-ot-notice { border: 1px solid color-mix(in srgb, var(--ot-warning) 40%, var(--ot-border)); background: var(--ot-surface); }
body[data-app-mode="bemove"] .fx-ot-toast { border: 1px solid color-mix(in srgb, var(--ot-success) 40%, var(--ot-border)); background: var(--ot-surface); color: var(--ot-success); }
body[data-app-mode="bemove"] .fx-ot-action-status:empty { display: none; }
body[data-app-mode="bemove"] .fx-ot-local-status:empty { display: none; }
body[data-app-mode="bemove"] :where(.fx-ot-action-status, .fx-ot-local-status).is-error { border: 1px solid color-mix(in srgb, var(--ot-danger) 40%, var(--ot-border)); color: var(--ot-danger); }
body[data-app-mode="bemove"] .fx-ot-modal > .fx-ot-local-status { margin: 12px 20px 0; }
body[data-app-mode="bemove"] .fx-ot-conversion-guide { margin: 12px 20px 0; color: var(--ot-text-sub); font-size: 12px; line-height: 1.5; }
body[data-app-mode="bemove"] .fx-ot-kpi small { display: block; margin-top: 4px; color: var(--ot-text-sub); font-size: 10px; line-height: 1.35; }
body[data-app-mode="bemove"] .fx-ot-payment-sources {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface-muted);
}
body[data-app-mode="bemove"] .fx-ot-payment-sources legend {
  padding: 0 4px;
  color: var(--ot-text);
  font-size: 13px;
  font-weight: 800;
}
body[data-app-mode="bemove"] .fx-ot-payment-source-help,
body[data-app-mode="bemove"] .fx-ot-payment-source-warning {
  margin: 0;
  color: var(--ot-text-sub);
  font-size: 11px;
  line-height: 1.5;
}
body[data-app-mode="bemove"] .fx-ot-payment-source-warning { margin-top: 6px; color: var(--ot-warning); }
body[data-app-mode="bemove"] .fx-ot-payment-sources--empty {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 12px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface-muted);
}
body[data-app-mode="bemove"] .fx-ot-payment-sources--empty strong { display: block; color: var(--ot-text); font-size: 13px; }
body[data-app-mode="bemove"] .fx-ot-payment-sources--empty p { margin: 5px 0 0; color: var(--ot-text-sub); font-size: 11px; line-height: 1.5; }
body[data-app-mode="bemove"] .fx-ot-payment-source-list { display: grid; gap: 8px; margin-top: 10px; }
body[data-app-mode="bemove"] .fx-ot-payment-source-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-control-radius);
  background: var(--ot-surface);
  color: var(--ot-text);
  cursor: pointer;
}
body[data-app-mode="bemove"] .fx-ot-payment-source-row:has(input:checked) {
  border-color: var(--ot-info);
  background: var(--ot-info-soft);
}
body[data-app-mode="bemove"] .fx-ot-payment-source-row.is-disabled { opacity: .62; cursor: not-allowed; }
body[data-app-mode="bemove"] .fx-ot-payment-source-row input {
  width: 24px;
  min-width: 24px;
  min-height: 48px;
  margin: 0 auto;
  accent-color: var(--ot-info);
}
body[data-app-mode="bemove"] .fx-ot-payment-source-copy { min-width: 0; }
body[data-app-mode="bemove"] .fx-ot-payment-source-copy strong,
body[data-app-mode="bemove"] .fx-ot-payment-source-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-app-mode="bemove"] .fx-ot-payment-source-copy strong { color: var(--ot-text); font-size: 12px; }
body[data-app-mode="bemove"] .fx-ot-payment-source-copy small { margin-top: 3px; color: var(--ot-text-sub); font-size: 10px; }
body[data-app-mode="bemove"] .fx-ot-payment-source-row > b { color: var(--ot-text); font-family: var(--ot-font-mono); font-size: 12px; white-space: nowrap; }
body[data-app-mode="bemove"] .fx-ot-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-control-radius);
  background: var(--ot-surface-muted);
  color: var(--ot-text-sub);
  font-size: 11px;
  line-height: 1.5;
}
body[data-app-mode="bemove"] .fx-ot-payment-summary strong { display: block; margin-top: 2px; color: var(--ot-text); font-family: var(--ot-font-mono); font-size: 13px; }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail { border: 1px solid var(--ot-border); border-radius: var(--ot-card-radius); background: var(--ot-surface); }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail .fx-ot-section-head { align-items: flex-start; }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--ot-border); border-radius: var(--ot-control-radius); background: var(--ot-surface-muted); }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail-list li span,
body[data-app-mode="bemove"] .fx-ot-payment-source-detail-list li small { display: block; }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail-list li span { color: var(--ot-text); font-size: 12px; }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail-list li small { margin-top: 2px; color: var(--ot-text-sub); font-size: 10px; }
body[data-app-mode="bemove"] .fx-ot-payment-source-detail-list li strong { color: var(--ot-text); font-family: var(--ot-font-mono); font-size: 12px; white-space: nowrap; }

body[data-app-mode="bemove"] .fx-ot-backdrop,
body[data-app-mode="bemove"] .fx-ot-modal-backdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  background: rgb(20 18 17 / 58%);
}
body[data-app-mode="bemove"] .fx-ot-drawer {
  position: fixed;
  z-index: 1110;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(880px, 94vw);
  overflow: auto;
  border-left: 1px solid var(--ot-border);
  border-radius: var(--ot-sheet-radius) 0 0 var(--ot-sheet-radius);
  background: var(--ot-page);
  box-shadow: var(--ot-shadow);
}
body[data-app-mode="bemove"] .fx-ot-drawer > header,
body[data-app-mode="bemove"] .fx-ot-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ot-border);
  background: var(--ot-surface);
}
body[data-app-mode="bemove"] .fx-ot-icon-button {
  min-width: 48px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-control-radius);
  background: var(--ot-surface);
  color: var(--ot-text);
  cursor: pointer;
}
body[data-app-mode="bemove"] .fx-ot-drawer-body { padding: 18px; }
body[data-app-mode="bemove"] .fx-ot-detail-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body[data-app-mode="bemove"] .fx-ot-detail-summary > div { padding: 12px; border: 1px solid var(--ot-border); border-radius: var(--ot-card-radius); background: var(--ot-surface); }
body[data-app-mode="bemove"] .fx-ot-detail-summary span { display: block; color: var(--ot-text-sub); font-size: 11px; }
body[data-app-mode="bemove"] .fx-ot-detail-summary strong { display: block; margin-top: 5px; color: var(--ot-text); }
body[data-app-mode="bemove"] .fx-ot-status-form { display: grid; gap: 8px; margin-top: 5px; }
body[data-app-mode="bemove"] .fx-ot-status-form label { display: grid; gap: 4px; color: var(--ot-text-sub); font-size: 11px; }
body[data-app-mode="bemove"] .fx-ot-status-form select,
body[data-app-mode="bemove"] .fx-ot-status-form input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ot-border); border-radius: var(--ot-control-radius); background: var(--ot-surface); color: var(--ot-text); }
body[data-app-mode="bemove"] .fx-ot-status-form .btn { justify-self: start; }
body[data-app-mode="bemove"] .fx-ot-status-help { display: block; margin-top: 2px; color: var(--ot-text-sub); font-size: 11px; line-height: 1.45; }
body[data-app-mode="bemove"] .fx-ot-summary-status > .fx-ot-status-help { margin-top: 7px; }
body[data-app-mode="bemove"] .fx-ot-datetime-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-app-mode="bemove"] .fx-ot-datetime-fields legend {
  grid-column: 1 / -1;
  padding: 0;
  color: var(--ot-text-sub);
  font-size: 11px;
  font-weight: 700;
}
body[data-app-mode="bemove"] .fx-ot-datetime-fields > small {
  grid-column: 1 / -1;
  color: var(--ot-text-sub);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
}
body[data-app-mode="bemove"] .fx-ot-detail-section { margin-top: 14px; padding: 15px; }
body[data-app-mode="bemove"] .fx-ot-session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
body[data-app-mode="bemove"] .fx-ot-session-form { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 12px; background: var(--ot-surface-muted); }
body[data-app-mode="bemove"] .fx-ot-session-form > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body[data-app-mode="bemove"] .fx-ot-session-form h4 { margin: 0; color: var(--ot-text); }
body[data-app-mode="bemove"] .fx-ot-phone { display: block; margin-top: 4px; color: var(--ot-text-sub); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
body[data-app-mode="bemove"] .fx-ot-tm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
body[data-app-mode="bemove"] .fx-ot-tm-form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-card-radius);
  background: var(--ot-surface-muted);
}
body[data-app-mode="bemove"] .fx-ot-tm-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body[data-app-mode="bemove"] .fx-ot-tm-form h4 { margin: 2px 0 0; color: var(--ot-text); font-size: 18px; }
body[data-app-mode="bemove"] .fx-ot-tm-kicker { display: block; color: var(--ot-accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
body[data-app-mode="bemove"] .fx-ot-tm-form textarea { min-height: 76px; resize: vertical; }
body[data-app-mode="bemove"] .fx-ot-tm-form .btn { align-self: flex-start; }
body[data-app-mode="bemove"] .fx-ot-tm-legacy { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ot-border); }
body[data-app-mode="bemove"] .fx-ot-tm-legacy .fx-ot-tm-detail-at > span { display: inline; color: var(--ot-text-sub); font-size: 12px; }
body[data-app-mode="bemove"] .fx-ot-tm-plan-cell { min-width: 124px; }
body[data-app-mode="bemove"] .fx-ot-tm-plan-cell strong { display: block; font-variant-numeric: tabular-nums; }
body[data-app-mode="bemove"] .fx-ot-tm-summary-note { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-app-mode="bemove"] .fx-ot-feedback-list { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
body[data-app-mode="bemove"] .fx-ot-feedback-list li { padding: 11px; border-left: 3px solid var(--ot-accent); background: var(--ot-surface-muted); }
body[data-app-mode="bemove"] .fx-ot-feedback-list li > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body[data-app-mode="bemove"] .fx-ot-feedback-list time { color: var(--ot-text-sub); font-size: 11px; }
body[data-app-mode="bemove"] .fx-ot-feedback-list p { margin: 8px 0 0; color: var(--ot-text); line-height: 1.55; }
body[data-app-mode="bemove"] .fx-ot-feedback-form { display: grid; gap: 10px; margin-top: 12px; }
body[data-app-mode="bemove"] .fx-ot-drawer-actions { justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ot-border); }
body[data-app-mode="bemove"] .fx-ot-drawer-state { padding: 30px; color: var(--ot-text-sub); text-align: center; }
body[data-app-mode="bemove"] .fx-ot-drawer-state--error { color: var(--ot-danger); }

body[data-app-mode="bemove"] .fx-ot-modal-backdrop { display: grid; place-items: center; padding: 16px; }
body[data-app-mode="bemove"] .fx-ot-modal {
  /* 폼이 2열 그리드라 680px 에서는 한 열이 310px 밖에 안 돼 답답했다. */
  width: min(880px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-sheet-radius);
  background: var(--ot-surface);
  box-shadow: var(--ot-shadow);
}
/* 회원 명부는 열이 많아 기본 모달보다 넓게 연다. 좁은 화면에서는 아래
   미디어쿼리의 width: 100% 가 그대로 이긴다. */
body[data-app-mode="bemove"] .fx-ot-modal--wide { width: min(1320px, 100%); }
/* 모달 본문의 표·상태 블록은 form 처럼 감싸는 요소가 없어 테두리에 1px 로 붙는다.
   그러면 왼쪽 글자가 테두리에 닿고, 행이 많아 세로 스크롤바(17px)가 생기면
   오른쪽 마지막 칸을 덮어 양쪽이 잘린 것처럼 보인다. 같은 여백으로 들여쓴다. */
body[data-app-mode="bemove"] .fx-ot-modal > .fx-ot-table-wrap,
body[data-app-mode="bemove"] .fx-ot-modal > .fx-ot-pagination,
body[data-app-mode="bemove"] .fx-ot-modal > .fx-ot-state { margin-right: 20px; margin-left: 20px; }
body[data-app-mode="bemove"] .fx-ot-modal > .fx-ot-pagination { padding-bottom: 20px; }
body[data-app-mode="bemove"] .fx-ot-modal form { padding: 18px 20px 20px; }
body[data-app-mode="bemove"] .fx-ot-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-app-mode="bemove"] .fx-ot-form-full { grid-column: 1 / -1; }
body[data-app-mode="bemove"] .fx-ot-modal-actions { justify-content: flex-end; margin-top: 18px; }
body[data-app-mode="bemove"] .fx-ot-request-id { overflow-wrap: anywhere; margin: 14px 0 0; color: var(--ot-text-sub); font-size: 11px; }
body[data-app-mode="bemove"] .fx-ot-request-id code { color: var(--ot-text); }
body[data-app-mode="bemove"] .fx-ot-refund-warning { margin: 0 20px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ot-danger) 35%, var(--ot-border)); border-radius: var(--ot-control-radius); background: color-mix(in srgb, var(--ot-danger) 8%, var(--ot-surface)); color: var(--ot-text); font-size: 13px; line-height: 1.55; }
body[data-app-mode="bemove"] .fx-ot-muted { color: var(--ot-text-sub); }

@media (max-width: 1180px) {
  body[data-app-mode="bemove"] .fx-ot-kpis { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
  body[data-app-mode="bemove"] .fx-ot-dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body[data-app-mode="bemove"] .fx-ot-management { width: 100%; padding: 24px 20px 40px; }
  body[data-app-mode="bemove"] .fx-ot-header { align-items: flex-start; flex-direction: column; }
  body[data-app-mode="bemove"] .fx-ot-header-actions { width: 100%; }
  body[data-app-mode="bemove"] .fx-ot-header-actions .btn { flex: 1 1 0; min-width: 0; }
  body[data-app-mode="bemove"] .fx-ot-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-app-mode="bemove"] .fx-ot-filters label { min-width: 0; }
  body[data-app-mode="bemove"] .fx-ot-filters .btn { grid-column: 1 / -1; width: 100%; }
  body[data-app-mode="bemove"] .fx-ot-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-app-mode="bemove"] .fx-ot-kpi { padding: 11px; }
  body[data-app-mode="bemove"] .fx-ot-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  body[data-app-mode="bemove"] .fx-ot-funnel li { padding: 11px; }
  body[data-app-mode="bemove"] .fx-ot-dashboard-card > .fx-ot-section-head { align-items: flex-start; min-height: 0; }
  body[data-app-mode="bemove"] .fx-ot-pending-list li { align-items: stretch; flex-direction: column; }
  body[data-app-mode="bemove"] .fx-ot-pending-list .btn { width: 100%; }
  body[data-app-mode="bemove"] .fx-ot-table { min-width: 0; }
  body[data-app-mode="bemove"] .fx-ot-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body[data-app-mode="bemove"] .fx-ot-table,
  body[data-app-mode="bemove"] .fx-ot-table tbody,
  body[data-app-mode="bemove"] .fx-ot-table tr,
  body[data-app-mode="bemove"] .fx-ot-table td { display: block; width: 100%; }
  body[data-app-mode="bemove"] .fx-ot-table tbody { display: grid; gap: 10px; padding: 10px; background: var(--ot-page); }
  body[data-app-mode="bemove"] .fx-ot-table tr { overflow: hidden; border: 1px solid var(--ot-border); border-left: 3px solid var(--ot-accent); border-radius: var(--ot-card-radius); background: var(--ot-surface); }
  body[data-app-mode="bemove"] .fx-ot-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 9px 11px; }
  body[data-app-mode="bemove"] .fx-ot-table td::before { content: attr(data-label); color: var(--ot-text-sub); font-size: 11px; font-weight: 700; }
  /* 카드로 접히는 좁은 화면에서는 한 줄 고정을 풀어야 값이 잘리지 않는다. */
  body[data-app-mode="bemove"] .fx-ot-table th,
  body[data-app-mode="bemove"] .fx-ot-table td,
  body[data-app-mode="bemove"] .fx-ot-table td small { white-space: normal; }
  body[data-app-mode="bemove"] td.fx-ot-note-cell { overflow: visible; text-overflow: clip; }
  body[data-app-mode="bemove"] .fx-ot-note-cell { max-width: none; }
  body[data-app-mode="bemove"] .fx-ot-table td .btn { width: 100%; }
  body[data-app-mode="bemove"] .fx-ot-pagination { align-items: stretch; flex-direction: column; }
  body[data-app-mode="bemove"] .fx-ot-pagination > div .btn { flex: 1; }
  body[data-app-mode="bemove"] .fx-ot-drawer { top: 8%; width: 100%; border-radius: var(--ot-sheet-radius) var(--ot-sheet-radius) 0 0; }
  body[data-app-mode="bemove"] .fx-ot-detail-summary,
  body[data-app-mode="bemove"] .fx-ot-tm-grid,
  body[data-app-mode="bemove"] .fx-ot-session-grid,
  body[data-app-mode="bemove"] .fx-ot-form-grid,
  body[data-app-mode="bemove"] .fx-ot-payment-summary { grid-template-columns: 1fr; }
  body[data-app-mode="bemove"] .fx-ot-form-full { grid-column: auto; }
  body[data-app-mode="bemove"] .fx-ot-modal-backdrop { align-items: end; padding: 0; }
  body[data-app-mode="bemove"] .fx-ot-modal { width: 100%; max-height: 92dvh; border-radius: var(--ot-sheet-radius) var(--ot-sheet-radius) 0 0; }
  body[data-app-mode="bemove"] .fx-ot-drawer-actions,
  body[data-app-mode="bemove"] .fx-ot-modal-actions { align-items: stretch; flex-direction: column-reverse; }
  body[data-app-mode="bemove"] .fx-ot-drawer-actions .btn,
  body[data-app-mode="bemove"] .fx-ot-modal-actions .btn { width: 100%; }
  body[data-app-mode="bemove"] .fx-ot-management[data-role="trainer"] .fx-ot-header-actions { display: none; }
  body[data-app-mode="bemove"] .fx-ot-management :where(button, .btn, input, select) { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-mode="bemove"] .fx-ot-spinner { animation: none; }
}

/* BodyCodi 회원 전환 모달 */
body[data-app-mode="bemove"] .fx-ot-candidate-filters {
  /* 좌우 여백은 모달 헤더(20px)·표와 같아야 한다. 0 이면 왼쪽은 테두리에 닿고
     오른쪽은 세로 스크롤바에 가려 양쪽이 잘린 것처럼 보인다. */
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--ot-border);
  margin-bottom: 12px;
}
body[data-app-mode="bemove"] .fx-ot-candidate-filters .fx-ot-modal-actions { justify-content: flex-end; margin-top: 12px; }
body[data-app-mode="bemove"] .fx-ot-linked-member {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ot-accent);
  background: var(--ot-accent-soft);
  color: var(--ot-text);
  font-size: 13px;
  line-height: 1.5;
}
body[data-app-mode="bemove"] .fx-ot-muted { color: var(--ot-text-sub); font-size: 12px; }

/* 목록의 세일즈 힌트 칸. 표 안에서 바로 고치는 컨트롤이라 행 높이를 키우지 않는다. */
body[data-app-mode="bemove"] .fx-ot-hint-input {
  width: 100%;
  min-width: 68px;
  max-width: 120px;
  padding: 4px 6px;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-control-radius);
  background: var(--ot-surface);
  color: var(--ot-text);
  font-family: var(--ot-font-body);
  font-size: 12px;
  line-height: 1.3;
}
body[data-app-mode="bemove"] .fx-ot-hint-input:focus-visible {
  outline: 2px solid var(--ot-accent);
  outline-offset: 1px;
}
body[data-app-mode="bemove"] .fx-ot-hint-input:disabled { opacity: .6; }
body[data-app-mode="bemove"] .fx-ot-hint-age { max-width: 72px; text-align: right; }
/* 연동 회원 명부에서 자동으로 채운 값. 손으로 적은 값과 눈으로 구분된다. */
body[data-app-mode="bemove"] [data-ot-hint-auto="1"] {
  border-style: dashed;
  color: var(--ot-text-sub);
}
body[data-app-mode="bemove"] td[data-ot-hint-auto="1"] { font-style: italic; }

/* TM 칸: 기록 전에는 버튼만, 기록한 뒤에는 그 결과만 둔다. 칸을 좁게 유지한다. */
body[data-app-mode="bemove"] .fx-ot-tm-cell {
  white-space: nowrap;
  font-size: 12px;
}
body[data-app-mode="bemove"] .fx-ot-tm-button {
  min-width: 56px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}
body[data-app-mode="bemove"] .fx-ot-tm-button.is-recorded {
  border-color: var(--ot-border);
  color: var(--ot-text);
}

/* 상세의 TM 기록. 목록에서 뺀 '지우기' 가 여기 있다. */
body[data-app-mode="bemove"] .fx-ot-tm-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body[data-app-mode="bemove"] .fx-ot-tm-detail-at {
  margin: 0;
  font-size: 13px;
  color: var(--ot-text);
}
body[data-app-mode="bemove"] .fx-ot-tm-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body[data-app-mode="bemove"] .fx-ot-tm-clear { color: var(--ot-danger); }

/* 가능 시간대: 시작·종료 두 칸을 한 셀에 붙인다. */
body[data-app-mode="bemove"] .fx-ot-hour-cell {
  white-space: nowrap;
  font-size: 12px;
}
body[data-app-mode="bemove"] .fx-ot-hour-input {
  min-width: 44px;
  max-width: 52px;
  padding: 4px 2px;
  text-align: center;
}
body[data-app-mode="bemove"] .fx-ot-hour-sep {
  margin: 0 2px;
  color: var(--ot-text-sub);
}

/* 특이사항: 나머지 칸으로 표현되지 않는 것을 적는다. */
body[data-app-mode="bemove"] .fx-ot-note-cell { max-width: 180px; }
body[data-app-mode="bemove"] .fx-ot-note-input {
  max-width: 100%;
  min-width: 96px;
  text-align: left;
}
body[data-app-mode="bemove"] td.fx-ot-note-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-app-mode="bemove"] .fx-ot-probability-input { max-width: 76px; }

/* PT 전환 전에는 목록에서 계약·수납·횟수를 한 번에 적는다. */
body[data-app-mode="bemove"] .fx-ot-contract-cell { min-width: 270px; }
body[data-app-mode="bemove"] .fx-ot-contract-cell > strong,
body[data-app-mode="bemove"] .fx-ot-contract-cell > small { display: block; }
body[data-app-mode="bemove"] .fx-ot-contract-cell > strong {
  color: var(--ot-text);
  font-family: var(--ot-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
body[data-app-mode="bemove"] .fx-ot-inline-conversion-form {
  display: grid;
  min-width: 250px;
  gap: 6px;
}
body[data-app-mode="bemove"] .fx-ot-inline-conversion-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(54px, .75fr);
  gap: 5px;
}
body[data-app-mode="bemove"] .fx-ot-inline-conversion-fields label {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: var(--ot-text-sub);
  font-size: 10px;
  font-weight: 700;
}
body[data-app-mode="bemove"] .fx-ot-inline-conversion-fields input {
  min-width: 0;
  min-height: 34px;
  padding: 5px 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
body[data-app-mode="bemove"] .fx-ot-inline-conversion-form > .btn {
  width: 100%;
  min-height: 36px;
  padding: 5px 8px;
  font-size: 11px;
}

@media (max-width: 760px) {
  body[data-app-mode="bemove"] .fx-ot-inline-conversion-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-app-mode="bemove"] .fx-ot-inline-conversion-fields label:last-child {
    grid-column: 1 / -1;
  }
  body[data-app-mode="bemove"] .fx-ot-inline-conversion-form > .btn {
    min-height: 48px;
  }
}