/* ============================================================
   Formula X 단순 급여 화면 (공통 변형 secondary stylesheet)
   ------------------------------------------------------------
   .fx-payroll-simple / .fx-payroll-self 컨테이너 스코프 안에서만 동작한다.
   Formula X 중립 토큰만 쓰고 브랜드 전용 색·서체는 쓰지 않는다.
   ============================================================ */
.fx-payroll-simple,
.fx-payroll-self {
  --sgp-bg: var(--bg, #f9fafb);
  --sgp-surface: var(--card, #ffffff);
  --sgp-text: var(--text, #111827);
  --sgp-sub: color-mix(in srgb, var(--text-sub, #64748b) 88%, var(--text, #1e293b));
  --sgp-border: var(--border, #e5e7eb);
  --sgp-fill: var(--primary-fill, var(--primary, #7c3aed));
  --sgp-fill-ink: #ffffff;
  --sgp-amber-ink: #b45309;
  --sgp-green-ink: #166534;
  --sgp-red-ink: #b91c1c;
  --sgp-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sgp-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 네이티브 컨트롤(월 선택 등)이 테마와 같은 스킴으로 그려지게 한다. */
  color-scheme: light;
}
/* 다크 오버라이드는 Formula 다크 트리거(:root[data-formula-theme="dark"])와
   같은 선택자에만 둔다. 배경 토큰(--bg·--card)도 같은 트리거에서 바뀌므로
   다크 잉크가 라이트 배경에 새지 않는다. */
:root[data-formula-theme="dark"] .fx-payroll-simple,
:root[data-formula-theme="dark"] .fx-payroll-self {
  --sgp-sub: var(--text-sub, #9aa4b2);
  --sgp-amber-ink: #fbbf24;
  --sgp-green-ink: #86efac;
  --sgp-red-ink: #fca5a5;
  color-scheme: dark;
}
.fx-payroll-simple,
.fx-payroll-self {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 24px 16px 32px;
  background: var(--sgp-bg);
  color: var(--sgp-text);
  font-family: var(--sgp-body);
  font-size: 14px;
  line-height: 1.5;
}
.fx-payroll-simple *,
.fx-payroll-self * { box-sizing: border-box; }
.fx-payroll-simple-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── 머리 ── */
.fx-payroll-simple-head { margin-bottom: 16px; }
.fx-payroll-simple-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fx-payroll-simple-title { margin: 0; font-size: 22px; line-height: 1.3; }
.fx-payroll-simple-month {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sgp-sub);
}
.fx-payroll-simple-branch { margin: 8px 0 0; font-size: 14px; }
.fx-payroll-simple-branches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fx-payroll-simple-headline { margin: 8px 0 0; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.fx-payroll-simple-more { position: relative; }
.fx-payroll-simple-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sgp-border);
  border-radius: 4px;
  background: var(--sgp-surface);
  color: var(--sgp-text);
  font-size: 14px;
}
.fx-payroll-simple-more summary::-webkit-details-marker { display: none; }
.fx-payroll-simple-more-body {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  padding: 8px;
  background: var(--sgp-surface);
  border: 1px solid var(--sgp-border);
  border-radius: 6px;
}
.fx-payroll-simple-notice { margin: 12px 0 0; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-hint { font-size: 13px; color: var(--sgp-sub); }
p.fx-payroll-simple-hint { margin: 8px 0 0; }

/* ── 버튼 ── */
.fx-payroll-simple-button,
.fx-payroll-self-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.fx-payroll-simple-button.is-primary,
.fx-payroll-self-button.is-primary {
  background: var(--sgp-fill);
  color: var(--sgp-fill-ink);
}
.fx-payroll-simple-button.is-outline,
.fx-payroll-self-button.is-outline {
  background: var(--sgp-surface);
  border-color: var(--sgp-border);
  color: var(--sgp-text);
}
.fx-payroll-simple-button.is-quiet,
.fx-payroll-self-button.is-quiet {
  background: transparent;
  color: var(--sgp-text);
  border-color: transparent;
}
.fx-payroll-simple-button:disabled,
.fx-payroll-self-button:disabled { opacity: 0.55; cursor: default; }
.fx-payroll-simple-button:focus-visible,
.fx-payroll-self-button:focus-visible,
.fx-payroll-simple summary:focus-visible,
.fx-payroll-simple input:focus-visible,
.fx-payroll-simple select:focus-visible,
.fx-payroll-self input:focus-visible {
  outline: 2px solid var(--sgp-fill);
  outline-offset: 2px;
}

/* ── 칩·상태 ── */
.fx-payroll-simple-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid var(--sgp-border);
  background: var(--sgp-surface);
  color: var(--sgp-text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.fx-payroll-simple-chip.is-active { border-color: var(--sgp-fill); }
.fx-payroll-simple-chip.is-todo { color: var(--sgp-amber-ink); border-color: currentColor; }
.fx-payroll-simple-todo-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.fx-payroll-simple-chips-label { font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-status {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}
.fx-payroll-simple-status.is-warn { color: var(--sgp-amber-ink); }
.fx-payroll-simple-status.is-ok { color: var(--sgp-green-ink); }
.fx-payroll-simple-status.is-muted { color: var(--sgp-sub); }

/* ── 집계 카드 ── */
.fx-payroll-simple-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.fx-payroll-simple-card {
  background: var(--sgp-surface);
  border: 1px solid var(--sgp-border);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fx-payroll-simple-card-label { font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-card strong { font-size: 20px; line-height: 1.25; }
.fx-payroll-simple-card-sub { display: block; font-size: 13px; font-weight: 400; color: var(--sgp-sub); }
.fx-payroll-simple-todo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 14px; }

/* ── 표 ── */
.fx-payroll-simple-table-wrap { margin-top: 12px; overflow-x: auto; }
.fx-payroll-simple-table { width: 100%; border-collapse: collapse; background: var(--sgp-surface); }
.fx-payroll-simple-table th,
.fx-payroll-simple-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 8px;
  border-bottom: 1px solid var(--sgp-border);
  font-size: 14px;
}
.fx-payroll-simple-table th { font-size: 13px; color: var(--sgp-sub); font-weight: 600; white-space: nowrap; }
.fx-payroll-simple-table th:nth-child(1) { min-width: 200px; }
.fx-payroll-simple-table th:nth-child(2) { min-width: 130px; }
.fx-payroll-simple-table th:nth-child(3) { min-width: 140px; }
.fx-payroll-simple-table th:nth-child(5) { min-width: 130px; }
.fx-payroll-simple-table th:nth-child(6) { min-width: 70px; }
.fx-payroll-simple-table .fx-payroll-simple-button { min-height: 36px; }
.fx-payroll-simple-name { display: block; font-weight: 600; }
.fx-payroll-simple-amount { font-family: var(--sgp-mono); font-size: 14px; white-space: nowrap; }
.fx-payroll-simple-sub { display: block; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-inline-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sgp-sub); margin-right: 8px; }

/* ── 입력 ── */
.fx-payroll-simple input[type="text"],
.fx-payroll-simple input[type="month"],
.fx-payroll-simple select,
.fx-payroll-self input[type="month"] {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--sgp-border);
  border-radius: 4px;
  background: var(--sgp-surface);
  color: var(--sgp-text);
  font-size: 14px;
  font-family: inherit;
}
.fx-payroll-simple input[type="radio"] { width: 20px; height: 20px; accent-color: var(--sgp-fill); }
.fx-payroll-simple-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.fx-payroll-simple-form label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-radio-row { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; }
.fx-payroll-simple-radio-row label { flex-direction: row; align-items: center; gap: 8px; color: var(--sgp-text); font-size: 14px; }
.fx-payroll-simple-advanced { margin-top: 8px; }
.fx-payroll-simple-advanced summary { cursor: pointer; font-size: 13px; color: var(--sgp-sub); min-height: 44px; display: inline-flex; align-items: center; }
.fx-payroll-simple-advanced ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
/* 목록 끝 접힌 제외 구간(이름·사유·되돌리기). */
.fx-payroll-simple-excluded { margin-top: 12px; }
.fx-payroll-simple-excluded summary { cursor: pointer; font-size: 13px; color: var(--sgp-sub); min-height: 44px; display: inline-flex; align-items: center; }
.fx-payroll-simple-excluded ul { margin: 8px 0 0; padding: 0; list-style: none; }
.fx-payroll-simple-excluded-row { padding: 8px 0; border-top: 1px solid var(--sgp-border); }

/* ── 상세·시트 ── */
.fx-payroll-simple-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 21, 36, 0.55);
}
.fx-payroll-simple-sheet {
  width: min(1180px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--sgp-surface);
  color: var(--sgp-text);
  border: 1px solid var(--sgp-border);
  border-radius: 10px;
  padding: 20px 20px 24px;
}
.fx-payroll-simple-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.fx-payroll-simple-sheet-head h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.fx-payroll-simple-sheet-status { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-detail h4,
.fx-payroll-simple-sheet h4 { margin: 20px 0 8px; font-size: 15px; }
.fx-payroll-simple-step { border: 1px solid var(--sgp-border); border-radius: 6px; margin-top: 8px; }
.fx-payroll-simple-step summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.fx-payroll-simple-step > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.fx-payroll-simple-step > *:last-child { margin-bottom: 14px; }
.fx-payroll-simple-step-value { margin: 8px 0 0; font-size: 14px; }
.fx-payroll-simple-basis { margin: 0; }
.fx-payroll-simple-basis-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sgp-border);
}
.fx-payroll-simple-basis-row dt { color: var(--sgp-sub); font-size: 14px; }
.fx-payroll-simple-basis-row dd { margin: 0; text-align: right; font-family: var(--sgp-mono); font-size: 14px; }
.fx-payroll-simple-basis-row dd .fx-payroll-simple-sub { font-family: var(--sgp-body); }
.fx-payroll-simple-basis-row.is-total dt,
.fx-payroll-simple-basis-row.is-total dd { font-weight: 700; color: var(--sgp-text); }
.fx-payroll-simple-contrast,
.fx-payroll-simple-source { margin: 8px 0 0; font-size: 14px; }
.fx-payroll-simple-center { margin-top: 12px; border: 1px solid var(--sgp-border); border-radius: 6px; background: var(--sgp-surface); padding: 14px; }
.fx-payroll-simple-center h3 { margin: 0; font-size: 15px; }
.fx-payroll-simple-center p { margin: 8px 0 0; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-center-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.fx-payroll-simple-center-form label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-empty { margin-top: 12px; }
.fx-payroll-simple-empty p { margin: 0 0 12px; }
.fx-payroll-simple-link-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-payroll-simple-link-card { border: 1px solid var(--sgp-border); border-radius: 6px; padding: 12px 14px; }
.fx-payroll-simple-sheet-nav { display: flex; gap: 8px; margin-top: 12px; }
.fx-payroll-simple-sheet-cta { margin-top: 16px; display: flex; gap: 12px; align-items: center; }
.fx-payroll-simple-sheet-cta .fx-payroll-simple-button.is-primary { flex: 1; min-height: 52px; font-size: 16px; }
.fx-payroll-simple-amount-card {
  margin-top: 12px;
  border: 1px solid var(--sgp-border);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fx-payroll-simple-amount-card span { font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-amount-card strong { font-family: var(--sgp-mono); font-size: 24px; line-height: 1.2; }
.fx-payroll-simple-footnote { margin: 12px 0 0; font-size: 13px; color: var(--sgp-sub); }

/* ── 강사 카드 목록(좁은 폭) ── */
.fx-payroll-simple-cards-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-payroll-simple-trainer-card { margin: 0; }
.fx-payroll-simple-trainer-open {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name amount" "meta chevron";
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  padding: 14px;
  background: var(--sgp-surface);
  border: 1px solid var(--sgp-border);
  border-radius: 6px;
  color: var(--sgp-text);
  font-family: inherit;
  cursor: pointer;
}
.fx-payroll-simple-card-name { grid-area: name; font-size: 16px; font-weight: 600; }
.fx-payroll-simple-trainer-open > .fx-payroll-simple-amount { grid-area: amount; font-size: 18px; }
.fx-payroll-simple-card-meta { grid-area: meta; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-payroll-simple-chevron { grid-area: chevron; font-size: 20px; color: var(--sgp-sub); }

/* ── 하단 고정 CTA(좁은 폭) ── */
/* bottom: 실제 하단 내비(.mobile-nav-bottom 60px + safe-area, 컨텍스트바는
   768px 이하 숨김 — style.css @media 768px) 위에 8px 간격으로 둔다.
   --mobile-nav-height(72px) 토큰을 그대로 써 셸과 함께 움직인다.
   z-index: 스크롤되는 카드·더보기(30) 위, 상세 시트(200)·하단 내비(1300) 아래. */
.fx-payroll-simple-cta-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--mobile-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 60;
}
.fx-payroll-simple-button.is-cta { width: 100%; min-height: 52px; font-size: 16px; }

/* ── 본인 화면 ── */
.fx-payroll-self-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fx-payroll-self-title { margin: 0; font-size: 22px; }
.fx-payroll-self-month { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-self-amount {
  background: var(--sgp-surface);
  border: 1px solid var(--sgp-border);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fx-payroll-self-amount span { font-size: 14px; }
.fx-payroll-self-amount strong { font-family: var(--sgp-mono); font-size: 28px; line-height: 1.2; }
.fx-payroll-self-note { font-size: 13px; color: var(--sgp-sub); }
p.fx-payroll-self-note { margin: 12px 0 0; }
.fx-payroll-self-section { margin: 20px 0 8px; font-size: 15px; }
.fx-payroll-self-list { margin: 0; }
.fx-payroll-self-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sgp-border);
}
.fx-payroll-self-row dt { color: var(--sgp-sub); font-size: 14px; }
.fx-payroll-self-row dd { margin: 0; text-align: right; font-size: 14px; }
.fx-payroll-self-sub { display: block; font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-self-blocked { margin-top: 12px; }
.fx-payroll-self-blocked h3 { margin: 0; font-size: 17px; }
.fx-payroll-self-blocked p { margin: 8px 0 0; color: var(--sgp-sub); }
.fx-payroll-self-blocked .fx-payroll-self-button { margin-top: 12px; }
.fx-payroll-self-notice { margin: 12px 0 0; font-size: 13px; color: var(--sgp-sub); }

/* ── 좁은 폭 ── */
@media (max-width: 1050px) {
  .fx-payroll-simple,
  .fx-payroll-self { padding: 16px 12px 32px; }
  /* 목록 끝 여백은 CTA 점유(bottom + 높이 52px)보다 커야 마지막 카드가
     CTA 뒤에 숨지 않는다: 내비 72 + safe + 간격 8 + CTA 52 + 여유 12. */
  .fx-payroll-simple { padding-bottom: calc(var(--mobile-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + 8px + 52px + 12px); }
  .fx-payroll-simple-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-payroll-simple-card strong { font-size: 24px; }
  .fx-payroll-simple-button,
  .fx-payroll-self-button,
  .fx-payroll-simple-chip { min-height: 44px; }
  .fx-payroll-simple-table .fx-payroll-simple-button { min-height: 44px; }
  .fx-payroll-simple input[type="text"],
  .fx-payroll-simple input[type="month"],
  .fx-payroll-simple select,
  .fx-payroll-self input[type="month"] { min-height: 44px; }
  .fx-payroll-simple-more summary { min-height: 44px; }
  .fx-payroll-simple-overlay { padding: 0; align-items: flex-end; }
  .fx-payroll-simple-sheet {
    width: 100%;
    max-height: 92vh;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
  }
  .fx-payroll-simple-sheet-cta {
    position: sticky;
    bottom: 0;
    background: var(--sgp-surface);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
@media (min-width: 768px) and (max-width: 1050px) {
  .fx-payroll-simple-cards-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 769~1050px: 좁은 화면이지만 하단 내비가 없다(app-shell MOBILE_BREAKPOINT=768).
   CTA 를 바닥(safe-area + 8px)에 붙이고 목록 끝 여백도 그 점유에 맞춘다. */
@media (min-width: 769px) and (max-width: 1050px) {
  .fx-payroll-simple-cta-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  .fx-payroll-simple { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px + 52px + 12px); }
}
@media (max-width: 680px) {
  .fx-payroll-simple-title-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-payroll-simple-sheet { transition: none; }
}

/* ── 회원별 수업·결제(A)·이용권 결제 연결(B) ── */
.fx-payroll-simple-sheet.is-ledger { width: min(1180px, 100%); }
.fx-payroll-simple-sheet.is-link { width: min(720px, 100%); margin-left: auto; margin-right: auto; }
.fx-payroll-simple-sheet-buttons { display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; }
.fx-payroll-simple-ledger-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.fx-payroll-simple-ledger-meta .fx-payroll-simple-branches { margin-top: 0; }
.fx-payroll-simple-ledger-meta .fx-payroll-simple-headline { margin-top: 0; }

/* 회원별 표 */
.fx-payroll-simple-ledger-wrap { margin-top: 12px; overflow-x: auto; }
.fx-payroll-simple-ledger { border-collapse: collapse; background: var(--sgp-surface); min-width: 100%; }
.fx-payroll-simple-ledger th, .fx-payroll-simple-ledger td { padding: 8px 6px; border-bottom: 1px solid var(--sgp-border); font-size: 14px; vertical-align: middle; white-space: nowrap; }
.fx-payroll-simple-ledger th { font-size: 13px; color: var(--sgp-sub); font-weight: 600; }
.fx-payroll-simple-ledger th:nth-child(1) { min-width: 110px; }
.fx-payroll-simple-ledger th:nth-child(2) { min-width: 180px; }
.fx-payroll-simple-ledger .is-sticky { position: sticky; left: 0; background: var(--sgp-surface); z-index: 1; }
.fx-payroll-simple-ledger .is-sticky-2 { left: 110px; }
.fx-payroll-simple-ledger td.is-member-dup { color: var(--sgp-sub); }
.fx-payroll-simple-ledger td.is-money { text-align: right; font-family: var(--sgp-mono); }
.fx-payroll-simple-ledger td[role="button"] { cursor: pointer; }
.fx-payroll-simple-ledger td[role="button"]:focus-visible { outline: 2px solid var(--sgp-fill); outline-offset: -2px; }

/* 날짜 칸 */
.fx-payroll-simple-day { width: 28px; min-width: 28px; padding: 0; text-align: center; font-family: var(--sgp-mono); font-size: 12px; line-height: 28px; }
.fx-payroll-simple-day.is-pay { background: color-mix(in srgb, var(--sgp-fill) 14%, var(--sgp-surface)); color: var(--sgp-text); }
.fx-payroll-simple-day.is-skip { background: var(--sgp-border); color: var(--sgp-text); }
:root[data-formula-theme="dark"] .fx-payroll-simple-day.is-pay { background: color-mix(in srgb, var(--sgp-fill) 22%, var(--sgp-surface)); }
.fx-payroll-simple-day[role="button"] { cursor: pointer; }
.fx-payroll-simple-day[role="button"]:focus-visible { outline: 2px solid var(--sgp-fill); outline-offset: -2px; }

/* 회원 카드(좁은 폭) */
.fx-payroll-simple-member-open {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name amount" "sub sub" "meta chevron";
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  padding: 14px;
  background: var(--sgp-surface);
  border: 1px solid var(--sgp-border);
  border-radius: 6px;
  color: var(--sgp-text);
  font-family: inherit;
  cursor: pointer;
}
.fx-payroll-simple-member-open:focus-visible { outline: 2px solid var(--sgp-fill); outline-offset: 2px; }
.fx-payroll-simple-member-open > .fx-payroll-simple-card-name { grid-area: name; }
.fx-payroll-simple-member-open > .fx-payroll-simple-amount { grid-area: amount; font-size: 18px; }
.fx-payroll-simple-member-open > .fx-payroll-simple-card-sub { grid-area: sub; }
.fx-payroll-simple-member-open > .fx-payroll-simple-card-meta { grid-area: meta; }
.fx-payroll-simple-member-open > .fx-payroll-simple-chevron { grid-area: chevron; }
.fx-payroll-simple-card-action { margin-top: 8px; }

/* 결제 선택 */
.fx-payroll-simple-pay-list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--sgp-border); border-radius: 6px; }
.fx-payroll-simple-pay-list > li { margin: 0; }
.fx-payroll-simple-pay-row { display: grid; grid-template-columns: 20px 52px minmax(0, 1fr) auto auto auto; gap: 8px 12px; align-items: center; min-height: 44px; padding: 8px 12px; border-top: 1px solid var(--sgp-border); cursor: pointer; }
.fx-payroll-simple-pay-list > li:first-child .fx-payroll-simple-pay-row { border-top: none; }
.fx-payroll-simple-pay-row.is-disabled { color: var(--sgp-sub); cursor: default; }
.fx-payroll-simple-pay-row.is-selected { background: color-mix(in srgb, var(--sgp-fill) 8%, var(--sgp-surface)); }
.fx-payroll-simple-pay-date { font-family: var(--sgp-mono); font-size: 13px; white-space: nowrap; }
.fx-payroll-simple-pay-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-payroll-simple-pay-amount { font-family: var(--sgp-mono); text-align: right; white-space: nowrap; }
.fx-payroll-simple-pay-method { font-size: 13px; color: var(--sgp-sub); white-space: nowrap; }
.fx-payroll-simple-pay-tag { white-space: nowrap; }
.fx-payroll-simple-pay-tag:empty { display: none; }
.fx-payroll-simple-pay-meta { display: none; }

/* 배분 미리보기 */
.fx-payroll-simple-preview { margin: 8px 0 0; font-family: var(--sgp-mono); font-size: 16px; }
.fx-payroll-simple-preview.is-empty { font-family: var(--sgp-body); font-size: 13px; color: var(--sgp-sub); }
.fx-payroll-simple-field-error { margin: 4px 0 0; font-size: 13px; color: var(--sgp-amber-ink); }

/* 이번 달 수업 */
.fx-payroll-simple-session-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; margin: 8px 0 0; font-size: 14px; }
.fx-payroll-simple-session-grid [aria-current="true"] { outline: 1px solid var(--sgp-fill); outline-offset: 2px; border-radius: 4px; }

/* 연결 시트 CTA(데스크톱 우측 정렬) */
.fx-payroll-simple-sheet-cta-end { justify-content: flex-end; }
.fx-payroll-simple-sheet-cta-end .fx-payroll-simple-button.is-primary { flex: none; min-height: 40px; font-size: 14px; }

@media (max-width: 1050px) {
  .fx-payroll-simple-pay-row { grid-template-columns: 24px auto minmax(0, 1fr) auto; grid-template-areas: "radio date title tag" "radio meta meta meta"; min-height: 56px; row-gap: 2px; }
  .fx-payroll-simple-pay-row > input[type="radio"] { grid-area: radio; }
  .fx-payroll-simple-pay-date { grid-area: date; }
  .fx-payroll-simple-pay-title { grid-area: title; }
  .fx-payroll-simple-pay-tag { grid-area: tag; }
  .fx-payroll-simple-pay-meta { grid-area: meta; display: block; font-size: 13px; color: var(--sgp-sub); }
  .fx-payroll-simple-pay-amount, .fx-payroll-simple-pay-method { display: none; }
  .fx-payroll-simple-session-grid { grid-template-columns: 1fr; }
  .fx-payroll-simple-sheet-cta-end { justify-content: stretch; }
  .fx-payroll-simple-sheet-cta-end .fx-payroll-simple-button.is-primary { flex: 1; min-height: 52px; font-size: 16px; }
}
@media (min-width: 1440px) {
  .fx-payroll-simple-sheet.is-ledger { width: min(1560px, 100% - 32px); }
}