/* Payroll coach linking section. It always mounts inside .bm-payroll-admin, so
   every --payroll-* token below is inherited from web/css/formula-payroll-admin.css
   (light/dark, Formula/Be:Move scopes). This file defines no --bm-* or color
   of its own: text uses --payroll-*-ink, filled buttons use --payroll-orange-solid.
   Radius keeps the same var(--bm-radius-*, px) shape as formula-payroll-admin.css. */
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-links{
  box-sizing: border-box;
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--payroll-border);
  border-radius: var(--bm-radius-card, 6px);
  background: var(--payroll-surface);
  color: var(--payroll-text);
  font-family: var(--payroll-body);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-kicker{
  margin: 0 0 4px;
  color: var(--payroll-orange-ink, var(--payroll-orange));
  font: 700 14px/1 var(--payroll-display);
  letter-spacing: .14em;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-head h3{
  margin: 0 0 4px;
  /* 제목은 상속에 맡기지 않는다: 비무브 다크에서 부모의 어두운 글자를 물려받아 대비가 깨진다. */
  color: var(--payroll-text);
  font: 600 20px/1.3 var(--payroll-display);
  letter-spacing: .02em;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-head p{
  margin: 0;
  color: var(--payroll-sub);
  font-size: 14px;
  line-height: 1.5;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-tabs{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-tab{
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--payroll-border);
  border-radius: var(--bm-radius-control, 4px);
  background: transparent;
  color: var(--payroll-sub);
  font: 600 14px/1 var(--payroll-body);
  cursor: pointer;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-tab.is-active{
  border-color: var(--payroll-orange);
  background: var(--payroll-orange-soft);
  color: var(--payroll-orange-ink, var(--payroll-orange));
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-summary{
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--payroll-border);
  border-radius: var(--bm-radius-control, 4px);
  background: var(--payroll-bg);
  font-size: 15px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-summary strong{
  color: var(--payroll-orange-ink, var(--payroll-orange));
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-summary span{
  display: block;
  margin-top: 4px;
  color: var(--payroll-sub);
  font-size: 13px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-scope{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 44px;
  margin: 0 0 12px;
  color: var(--payroll-sub);
  font-size: 13px;
  cursor: pointer;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-links .fx-coach-link-scope input{
  /* .bm-payroll-admin input(텍스트 입력 규칙: min 40px·min-width·테두리·배경)이
     체크박스에 그대로 상속돼 40px 회색 네모가 된다. 전부 되돌리고 18px로 고정한다. */
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--payroll-orange-solid, var(--payroll-orange));
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-scope span{
  color: var(--payroll-sub);
  font-size: 13px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-error{
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--payroll-red);
  border-radius: var(--bm-radius-control, 4px);
  font-size: 14px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-notice{
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--payroll-green);
  border-radius: var(--bm-radius-control, 4px);
  font-size: 14px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-table-wrap{
  overflow-x: auto;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-table th,
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--payroll-border);
  text-align: left;
  vertical-align: top;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-table th{
  /* 전역 style.css의 bare th { background: #f8fafc }가 다크에도 남으므로
     페이롤 본 표(formula-payroll-admin.css 표 머리)와 같은 토큰으로 덮는다. */
  background: color-mix(in srgb, var(--payroll-border) 45%, var(--payroll-surface));
  color: var(--payroll-sub);
  font-weight: 600;
  white-space: nowrap;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-id{
  color: var(--payroll-text);
  font-family: var(--payroll-mono);
  word-break: break-all;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-count{
  color: var(--payroll-text);
  font-family: var(--payroll-mono);
  text-align: right;
  white-space: nowrap;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-status{
  display: inline-block;
  padding: 4px 10px;
  /* 배경을 주는 변형(is-linked·is-unlinked)이 덮기 전 기본 글자색. 상속에 맡기면 비무브 다크에서 반전된 어두운 색이 남는다. */
  color: var(--payroll-sub);
  border-radius: var(--bm-radius-control, 4px);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-status.is-linked{
  background: var(--payroll-orange-soft);
  color: var(--payroll-orange-ink, var(--payroll-orange));
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-status.is-unlinked{
  background: var(--payroll-bg);
  color: var(--payroll-sub);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-picker{
  min-height: 44px;
  max-width: 220px;
  padding: 0 12px;
  border: 1px solid var(--payroll-border);
  border-radius: var(--bm-radius-control, 4px);
  background: var(--payroll-surface);
  color: var(--payroll-text);
  font-size: 14px;
  cursor: pointer;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-options{
  margin: 8px 0 0;
  padding: 0;
  /* 목록 컨테이너도 글자색을 명시한다: 옵션 버튼 사이 빈 영역의 상속색 대비를 고정한다. */
  color: var(--payroll-text);
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--payroll-border);
  border-radius: var(--bm-radius-control, 4px);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-option{
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  border-bottom: 1px solid var(--payroll-border);
  background: var(--payroll-surface);
  color: var(--payroll-text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-option.is-selected{
  background: var(--payroll-orange-soft);
  color: var(--payroll-orange-ink, var(--payroll-orange));
  font-weight: 700;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-option.is-taken{
  color: var(--payroll-sub);
  cursor: default;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-actions{
  display: flex;
  /* 카드 안 액션 컨테이너도 글자색을 명시한다. 버튼 사이 텍스트가 상속에 의존하지 않는다. */
  color: var(--payroll-text);
  gap: 8px;
  flex-wrap: wrap;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-button{
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--payroll-border);
  border-radius: var(--bm-radius-control, 4px);
  background: var(--payroll-surface);
  color: var(--payroll-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-button.is-primary{
  border-color: var(--payroll-orange-solid, var(--payroll-orange));
  background: var(--payroll-orange-solid, var(--payroll-orange));
  color: #fff;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-button.is-quiet{
  border-color: transparent;
  color: var(--payroll-sub);
}
/* 비활성 버튼은 opacity로 흐리지 않는다: 흐린 흰 글자+오렌지가 2.57:1이었다. 미연결 배지와 같은 --payroll-sub/--payroll-bg 중립 쌍으로 둔다. */
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-button:disabled,
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-button:is(.is-primary, .is-quiet, .is-outline, .is-change):disabled{
  opacity: 1;
  border-color: var(--payroll-border);
  background: var(--payroll-bg);
  color: var(--payroll-sub);
  cursor: not-allowed;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-sync{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px dashed var(--payroll-border);
  border-radius: var(--bm-radius-control, 4px);
  font-size: 14px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-sync p{
  margin: 0;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-sync-note{
  color: var(--payroll-sub);
  font-size: 13px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-empty{
  margin: 0 0 12px;
  padding: 16px;
  color: var(--payroll-sub);
  font-size: 14px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-cards{
  display: none;
  margin: 0;
  padding: 0;
  /* 카드 목록 컨테이너도 글자색을 명시한다: 배경(섹션 표면)을 그대로 쓰므로 본문색을 고정한다. */
  color: var(--payroll-text);
  list-style: none;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card{
  padding: 16px;
  border: 1px solid var(--payroll-border);
  border-radius: var(--bm-radius-card, 6px);
  background: var(--payroll-surface);
  /* 배경을 주는 카드 규칙에는 반드시 color도 명시한다. 상속에 맡기면 비무브 다크에서 반전된 어두운 색이 남는다. */
  color: var(--payroll-text);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card + .fx-coach-link-card{
  margin-top: 12px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  /* 카드 머리 컨테이너도 글자색을 명시한다. */
  color: var(--payroll-text);
  font-size: 15px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-head strong{
  color: var(--payroll-text);
  font-family: var(--payroll-mono);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-head span{
  color: var(--payroll-sub);
  font-size: 13px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-facts{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  /* «수업 42» 라벨이 상속에 의존하면 비무브 다크에서 대비 1.11까지 떨어진다. */
  color: var(--payroll-sub);
  font-size: 14px;
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-facts span{
  color: var(--payroll-sub);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-facts strong{
  color: var(--payroll-text);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-pick{
  margin-bottom: 12px;
  /* 카드 안 선택 영역 컨테이너도 글자색을 명시한다. */
  color: var(--payroll-text);
}
:is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-card-pick .fx-coach-link-picker{
  width: 100%;
  max-width: none;
}
@media (max-width: 1050px){
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-links{
    padding: 16px;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-head{
    flex-direction: column;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-table-wrap{
    display: none;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-cards{
    display: block;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-scope{
    align-items: flex-start;
    row-gap: 4px;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-links .fx-coach-link-scope input{
    /* 첫 줄(13px) 윗변에 맞춘다: flex-start 행에서 광학 정렬용 최소 여백. */
    margin-top: 1px;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-scope span{
    /* 1050px 이하에서는 인원수를 다음 줄로 내려 체크박스+라벨과 같은 왼선에 둔다. */
    flex: 1 1 100%;
    margin-left: 26px;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-sync{
    flex-direction: column;
    align-items: stretch;
  }
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-actions .fx-coach-link-button,
  :is(body[data-app-mode="formula"], body[data-app-mode="bemove"], body[data-bemove-brand="1"]) .fx-coach-link-sync .fx-coach-link-button{
    width: 100%;
  }
}