/* Formula X trainer-performance surface. Scoped so existing tabs keep their layout. */
.fx-trainer-performance {
  --fx-tp-ink: var(--text-strong, #17212b);
  --fx-tp-muted: var(--text-muted, #74808c);
  --fx-tp-line: var(--line-hairline, #dfe4e8);
  --fx-tp-card: var(--surface-card, #fff);
  --fx-tp-sunken: var(--surface-sunken, #f5f7f8);
  --fx-tp-accent: var(--cyan-500, #00a9e8);
  color: var(--fx-tp-ink);
  padding: 8px 0 52px;
}
.fx-tp-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:10px 0 24px; }
.fx-tp-eyebrow, .fx-tp-panel-kicker { margin:0 0 7px; color:var(--fx-tp-muted); font:600 11px/1.2 "IBM Plex Mono", monospace; letter-spacing:.12em; }
.fx-tp-header h1 { margin:0; font:700 clamp(27px,3vw,38px)/1.1 Oswald, "Noto Sans KR", sans-serif; letter-spacing:-.02em; }
.fx-tp-subtitle { margin:8px 0 0; color:var(--fx-tp-muted); font-size:14px; }
.fx-tp-header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.fx-tp-source-badge, .fx-tp-status { display:inline-flex; align-items:center; border:1px solid var(--fx-tp-line); border-radius:999px; padding:6px 10px; color:var(--fx-tp-muted); font:600 11px/1 "IBM Plex Mono", monospace; white-space:nowrap; }
.fx-tp-source-badge { color:var(--fx-tp-accent); border-color:color-mix(in srgb, var(--fx-tp-accent) 34%, var(--fx-tp-line)); }
.fx-tp-filters { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:14px 16px; background:var(--fx-tp-card); border:1px solid var(--fx-tp-line); border-radius:8px; box-shadow:0 2px 12px rgba(20,30,40,.04); }
.fx-tp-filters label, .fx-tp-form label { display:flex; flex-direction:column; gap:6px; color:var(--fx-tp-muted); font-size:12px; font-weight:600; }
.fx-tp-filters input, .fx-tp-filters select, .fx-tp-form input, .fx-tp-form select, .fx-tp-form textarea { min-height:36px; border:1px solid var(--fx-tp-line); border-radius:4px; background:var(--fx-tp-card); color:var(--fx-tp-ink); padding:7px 9px; font:inherit; }
.fx-tp-filters input:focus, .fx-tp-filters select:focus, .fx-tp-form input:focus, .fx-tp-form select:focus, .fx-tp-form textarea:focus { outline:2px solid color-mix(in srgb, var(--fx-tp-accent) 45%, transparent); outline-offset:1px; }
.fx-tp-filter-note { margin-left:auto; color:var(--fx-tp-muted); font:11px "IBM Plex Mono", monospace; padding-bottom:9px; }
.fx-tp-quality-row { display:flex; gap:18px; flex-wrap:wrap; margin:12px 2px 0; color:var(--fx-tp-muted); font-size:11px; }
.fx-tp-quality-item b { color:var(--fx-tp-ink); margin-right:4px; }
.fx-tp-sync-state { color:var(--fx-tp-accent); }
.fx-tp-sync-state.loading { color:var(--fx-tp-info, #5aa9ff); }
.fx-tp-sync-state.error { color:var(--fx-tp-danger, #ff7a7a); }
.fx-tp-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:18px 0 20px; }
.fx-tp-kpi { min-height:112px; padding:15px 16px 13px; background:var(--fx-tp-card); border:1px solid var(--fx-tp-line); border-radius:6px; box-shadow:0 2px 10px rgba(20,30,40,.035); }
.fx-tp-kpi.accent { border-top:3px solid var(--fx-tp-accent); padding-top:13px; }
.fx-tp-kpi p { margin:0 0 13px; color:var(--fx-tp-muted); font-size:12px; font-weight:600; }
.fx-tp-kpi strong { display:block; font:700 25px/1.05 Oswald, "Noto Sans KR", sans-serif; letter-spacing:.01em; }
.fx-tp-kpi span { display:block; margin-top:9px; color:var(--fx-tp-muted); font-size:11px; line-height:1.45; }
.fx-tp-kpi.is-muted strong { color:var(--fx-tp-muted); }
.fx-tp-subnav { display:flex; gap:4px; border-bottom:1px solid var(--fx-tp-line); margin-bottom:16px; }
.fx-tp-subnav button { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--fx-tp-muted); padding:10px 13px; font-size:13px; font-weight:700; cursor:pointer; }
.fx-tp-subnav button:hover, .fx-tp-subnav button.is-active { color:var(--fx-tp-ink); border-bottom-color:var(--fx-tp-accent); }
.fx-tp-panel { background:var(--fx-tp-card); border:1px solid var(--fx-tp-line); border-radius:6px; box-shadow:0 2px 10px rgba(20,30,40,.035); overflow:hidden; }
.fx-tp-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 20px 15px; border-bottom:1px solid var(--fx-tp-line); }
.fx-tp-panel-head h2 { margin:0; font-size:18px; letter-spacing:-.02em; }
.fx-tp-panel-caption { color:var(--fx-tp-muted); font:11px "IBM Plex Mono", monospace; }
.fx-tp-table-wrap { overflow-x:auto; }
.fx-tp-table { width:100%; border-collapse:collapse; min-width:720px; }
.fx-tp-table th, .fx-tp-table td { padding:14px 16px; border-bottom:1px solid var(--fx-tp-line); text-align:left; vertical-align:middle; font-size:13px; }
.fx-tp-table thead th { background:var(--fx-tp-sunken); color:var(--fx-tp-muted); font-size:11px; font-weight:700; white-space:nowrap; }
.fx-tp-table tbody tr:last-child th, .fx-tp-table tbody tr:last-child td { border-bottom:0; }
.fx-tp-table tbody tr:hover { background:color-mix(in srgb, var(--fx-tp-accent) 5%, var(--fx-tp-card)); }
.fx-tp-table th strong, .fx-tp-table td strong { display:block; font-weight:700; }
.fx-tp-table th small, .fx-tp-table td small { display:block; margin-top:4px; color:var(--fx-tp-muted); font-size:11px; font-weight:400; white-space:nowrap; }
.fx-tp-status.is-good { color:#157a52; border-color:#9bd6bd; background:#effaf4; }
.fx-tp-status.is-warn { color:#9a6412; border-color:#e9c681; background:#fff8e9; }
.fx-tp-status.is-muted { color:var(--fx-tp-muted); background:var(--fx-tp-sunken); }
.fx-tp-two-column { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:14px; align-items:start; }
.fx-tp-timeline { padding:20px; }
.fx-tp-timeline-item { position:relative; display:flex; gap:13px; padding:0 0 22px 1px; }
.fx-tp-timeline-item:last-child { padding-bottom:0; }
.fx-tp-timeline-item:not(:last-child):after { content:""; position:absolute; left:6px; top:14px; bottom:0; width:1px; background:var(--fx-tp-line); }
.fx-tp-timeline-dot { z-index:1; flex:0 0 12px; width:12px; height:12px; margin-top:3px; border:3px solid var(--fx-tp-card); border-radius:50%; background:var(--fx-tp-accent); box-shadow:0 0 0 1px var(--fx-tp-accent); }
.fx-tp-timeline-body { min-width:0; }
.fx-tp-timeline-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--fx-tp-muted); font-size:11px; }
.fx-tp-timeline-meta strong { color:var(--fx-tp-ink); font-size:13px; }
.fx-tp-timeline-meta b { color:var(--fx-tp-accent); }
.fx-tp-timeline-body h3 { margin:7px 0 8px; font-size:14px; }
.fx-tp-timeline-body p { margin:5px 0; color:var(--fx-tp-muted); font-size:12px; line-height:1.55; white-space:pre-wrap; }
.fx-tp-timeline-body p b { color:var(--fx-tp-ink); margin-right:5px; }
.fx-tp-timeline-body small { display:block; margin-top:9px; color:var(--fx-tp-muted); font-size:11px; }
.fx-tp-form { display:flex; flex-direction:column; gap:12px; padding-bottom:18px; }
.fx-tp-form > label, .fx-tp-form > button, .fx-tp-form > .fx-tp-form-message { margin-left:20px; margin-right:20px; }
.fx-tp-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 20px; }
.fx-tp-form-grid label { min-width:0; }
.fx-tp-form textarea { resize:vertical; min-height:70px; }
.fx-tp-form-message { min-height:16px; margin-top:0; color:#157a52; font-size:12px; }
.fx-tp-form-message.is-error { color:#b24141; }
.fx-tp-readonly-note, .fx-tp-evidence-note { margin:14px 0; padding:12px 14px; border:1px dashed var(--fx-tp-line); border-radius:4px; color:var(--fx-tp-muted); font-size:12px; line-height:1.55; }
.fx-tp-readonly-note { grid-column:1 / -1; }
.fx-tp-evidence-note { margin:0; border-width:0 0 1px; border-radius:0; }
.fx-tp-evidence-note b { color:var(--fx-tp-ink); margin-right:4px; }
.fx-tp-action-list { padding:8px 20px 20px; }
.fx-tp-action-item { display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--fx-tp-line); }
.fx-tp-action-item:last-child { border-bottom:0; }
.fx-tp-action-item h3 { display:inline; margin:0 0 5px 7px; font-size:14px; }
.fx-tp-action-item p { margin:6px 0 0; color:var(--fx-tp-muted); font-size:12px; }
.fx-tp-action-item.is-done h3 { text-decoration:line-through; color:var(--fx-tp-muted); }
.fx-tp-priority { display:inline-flex; padding:4px 6px; border-radius:3px; background:var(--fx-tp-sunken); color:var(--fx-tp-muted); font-size:10px; font-weight:700; }
.fx-tp-priority.p1 { color:#b24141; background:#fff0f0; }
.fx-tp-priority.p2 { color:#9a6412; background:#fff8e9; }
.fx-tp-action-meta { display:flex; flex-direction:column; align-items:flex-end; gap:5px; color:var(--fx-tp-muted); font-size:11px; white-space:nowrap; }
.fx-tp-action-meta .btn { margin-top:4px; }
.fx-tp-empty, .fx-tp-loading { padding:42px 20px; text-align:center; color:var(--fx-tp-muted); }
.fx-tp-empty strong { display:block; color:var(--fx-tp-ink); font-size:14px; }
.fx-tp-empty p { margin:7px 0 0; font-size:12px; }
.fx-tp-spinner { display:inline-block; width:16px; height:16px; margin-right:7px; vertical-align:-3px; border:2px solid var(--fx-tp-line); border-top-color:var(--fx-tp-accent); border-radius:50%; animation:fx-tp-spin .8s linear infinite; }
.fx-tp-alert { margin:12px 0; padding:12px 14px; border-radius:4px; font-size:12px; }
.fx-tp-alert.is-error { color:#a33c3c; background:#fff0f0; border:1px solid #f0c3c3; }
@keyframes fx-tp-spin { to { transform:rotate(360deg); } }
@media (max-width: 1080px) { .fx-tp-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .fx-trainer-performance { padding-top:0; }
  .fx-tp-header { align-items:flex-start; flex-direction:column; gap:14px; }
  .fx-tp-header-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; gap:8px; }
  .fx-tp-header-actions .btn { white-space:nowrap; flex:0 0 auto; }
  .fx-tp-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx-tp-filter-note { grid-column:1 / -1; margin-left:0; padding-bottom:0; }
  .fx-tp-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx-tp-kpi { min-height:100px; padding:13px; }
  .fx-tp-kpi strong { font-size:22px; }
  .fx-tp-two-column { grid-template-columns:1fr; }
  .fx-tp-subnav { overflow-x:auto; }
  .fx-tp-subnav button { flex:0 0 auto; }
}
@media (max-width: 420px) { .fx-tp-filters { grid-template-columns:1fr; } .fx-tp-kpis { grid-template-columns:1fr; } .fx-tp-quality-row { gap:8px 12px; } }

/* ============================================================
   트레이너 프로필(설계 4장, B안 요약 레일). 접두 .fx-tp-p-* 로 기존 .fx-tp-* 와 겹치지 않는다.
   Formula X 세션에는 Be:Move 의미 토큰(--surface-*, --text-strong, --cyan-500)이 없다 —
   시안(profile.css)의 토큰을 --fx-tp-* 와 style.css 의 --primary/--card/--text/--border/
   --success/--warning/--danger 로 옮겼다. 강조색은 하나, --primary(설계 9장).
   ============================================================ */
.fx-trainer-performance, .fx-tp-p-modal {
  --fx-tp-accent: var(--primary, #6366f1);
  --fx-tp-p-accent-light: var(--primary-light, #818cf8);
  --fx-tp-p-good: var(--success, #22c55e);
  --fx-tp-p-warn: var(--warning, #f59e0b);
  --fx-tp-p-bad: var(--danger, #ef4444);
  --fx-tp-p-new: var(--pt, #e87040);
  --fx-tp-p-info: var(--fc, #3b82f6);
  --fx-tp-p-good-text: #15803d;
  --fx-tp-p-warn-text: #b45309;
  --fx-tp-p-bad-text: #b91c1c;
}
/* 회원 상세 모달은 body 에 붙어 .fx-trainer-performance 밖에 있다 — 같은 변수를 다시 준다. */
.fx-tp-p-modal {
  --fx-tp-ink: var(--text-strong, #17212b);
  --fx-tp-muted: var(--text-muted, #74808c);
  --fx-tp-line: var(--line-hairline, #dfe4e8);
  --fx-tp-card: var(--surface-card, #fff);
  --fx-tp-sunken: var(--surface-sunken, #f5f7f8);
  color: var(--fx-tp-ink);
}
/* 다크: style.css 의 Formula 다크 토큰으로 재정의(기존 비교 화면 포함). muted 는 대비 때문에 --text-sub. */
:root[data-formula-theme="dark"] .fx-trainer-performance,
:root[data-formula-theme="dark"] .fx-tp-p-modal {
  --fx-tp-ink: var(--text, #f1f5f9);
  --fx-tp-muted: var(--text-sub, #94a3b8);
  --fx-tp-line: var(--border, #334155);
  --fx-tp-card: var(--card, #1e293b);
  --fx-tp-sunken: var(--bg-sub, #0f172a);
  --fx-tp-p-good-text: #86efac;
  --fx-tp-p-warn-text: #fde68a;
  --fx-tp-p-bad-text: #fca5a5;
}
:root[data-formula-theme="dark"] .fx-tp-status.is-good { color:#86efac; border-color:rgba(134,239,172,.4); background:rgba(34,197,94,.14); }
:root[data-formula-theme="dark"] .fx-tp-status.is-warn { color:#fde68a; border-color:rgba(253,230,138,.4); background:rgba(245,158,11,.14); }
:root[data-formula-theme="dark"] .fx-tp-alert.is-error { color:#fca5a5; background:rgba(239,68,68,.14); border-color:rgba(252,165,165,.4); }
:root[data-formula-theme="dark"] .fx-tp-priority.p1 { color:#fca5a5; background:rgba(239,68,68,.16); }
:root[data-formula-theme="dark"] .fx-tp-priority.p2 { color:#fde68a; background:rgba(245,158,11,.16); }
:root[data-formula-theme="dark"] .fx-tp-form-message { color:#86efac; }
:root[data-formula-theme="dark"] .fx-tp-form-message.is-error { color:#fca5a5; }
.fx-tp-alert.is-warn { color:#9a6412; background:#fff8e9; border:1px solid #e9c681; }
:root[data-formula-theme="dark"] .fx-tp-alert.is-warn { color:#fde68a; background:rgba(245,158,11,.14); border-color:rgba(253,230,138,.4); }

/* 매트릭스 행 · 명부 행 · 월별 행은 버튼처럼 동작한다 */
.fx-tp-row-link { cursor:pointer; }
.fx-tp-row-link:focus-visible { outline:2px solid color-mix(in srgb, var(--fx-tp-accent) 55%, transparent); outline-offset:-2px; }

/* ── 상단 바 · 레일 레이아웃 ── */
.fx-tp-profile { margin-top:18px; }
.fx-tp-p-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.fx-tp-p-back { display:inline-flex; align-items:center; gap:4px; border:0; background:transparent; padding:6px 0; color:var(--fx-tp-muted); font:600 13px/1.2 inherit; font-family:inherit; cursor:pointer; }
.fx-tp-p-back:hover { color:var(--fx-tp-ink); }
.fx-tp-p-back.is-static { cursor:default; }
.fx-tp-p-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.fx-tp-p-actions-list { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
/* ⋯ 메뉴 토글은 모바일에서만(설계 8장). PC 는 목록을 그대로 펼친다. */
.fx-tp-p-more { display:none; }
/* style.css 의 .btn-primary 는 width:100% — 액션 셋·모달 푸터·패널 푸터에서는 내용 폭으로 */
.fx-tp-p-actions .btn, .fx-tp-p-modal-foot .btn, .fx-tp-p-panel-foot .btn { width:auto; }
.fx-tp-p-actions .fx-tp-p-link { text-decoration:none; display:inline-flex; align-items:center; }
.fx-tp-p-mine { display:inline-flex; align-items:center; border:1px solid var(--fx-tp-line); border-radius:999px; padding:6px 10px; color:var(--fx-tp-accent); font:600 11px/1 "IBM Plex Mono", monospace; }
.fx-tp-p-layout { display:grid; grid-template-columns:360px minmax(0,1fr); gap:16px; align-items:start; }
/* 레일이 뷰포트보다 길면(헤더 카드 + KPI 8장 + 목표 + 노트 ≈ 1,000px) 안에서 스크롤한다 — 노트북 높이에서도 노트가 닿게. */
.fx-tp-p-rail { position:sticky; top:64px; display:grid; gap:12px; max-height:calc(100vh - 64px - 16px); overflow-y:auto; overscroll-behavior:contain; padding-bottom:12px; }
.fx-tp-p-main { min-width:0; }
.fx-tp-p-subnav { margin-top:0; }
.fx-tp-p-sections { display:grid; gap:14px; }
.fx-tp-p-panel-body { padding:16px 20px 20px; }
.fx-tp-p-panel-foot { margin-top:12px; }
.fx-tp-p-sections-pair { gap:14px; }
.fx-tp-p-muted { color:var(--fx-tp-muted); font-size:12px; }
.fx-tp-p-push { margin-left:auto; }
.fx-tp-p-caption-line { margin:10px 2px 0; line-height:1.5; }
.fx-tp-p-caption-line b { color:var(--fx-tp-ink); }
.fx-tp-p-sub-h { margin:18px 0 10px; font-size:13px; font-weight:600; color:var(--fx-tp-ink); }
.fx-tp-p-sub-h:first-child { margin-top:0; }
.fx-tp-p-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.fx-tp-p-widget { min-width:0; }
.fx-tp-p-warn { margin:0 0 12px; padding:10px 12px; border-radius:4px; background:color-mix(in srgb, var(--fx-tp-p-warn) 14%, var(--fx-tp-card)); color:var(--fx-tp-ink); font-size:12px; }
.fx-tp-p-linkbtn { border:0; background:transparent; padding:0; color:var(--fx-tp-accent); font:600 12px/1.4 inherit; font-family:inherit; cursor:pointer; }
.fx-tp-p-linkbtn:hover { text-decoration:underline; }
.is-bad { color:var(--fx-tp-p-bad-text); }
.fx-tp-p-table td.is-warn, .fx-tp-p-mcard-line b.is-warn, .fx-tp-p-dl .is-warn { color:var(--fx-tp-p-warn-text); }
.fx-tp-p-table td.is-bad, .fx-tp-p-mcard-line b.is-bad, .fx-tp-p-dl .is-bad { color:var(--fx-tp-p-bad-text); }

/* ── 프로필 헤더 카드 ── */
.fx-tp-p-head-card { padding:18px 20px; display:grid; gap:14px; }
.fx-tp-p-head-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fx-tp-p-name { margin:0; font:700 26px/1.1 Oswald, "Noto Sans KR", sans-serif; letter-spacing:-.02em; color:var(--fx-tp-ink); }
.fx-tp-p-status-chip { padding:4px 8px; font-size:10px; }
.fx-tp-p-meta { margin:6px 0 0; color:var(--fx-tp-muted); font-size:13px; }
.fx-tp-p-badges { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fx-tp-p-badge { display:flex; flex-direction:column; gap:4px; min-width:0; padding:10px 12px; background:var(--fx-tp-sunken); border:1px solid var(--fx-tp-line); border-radius:6px; }
.fx-tp-p-badge-k { color:var(--fx-tp-muted); font-size:11px; font-weight:600; }
.fx-tp-p-badge-v { color:var(--fx-tp-ink); font-size:14px; font-weight:700; line-height:1.3; }
.fx-tp-p-badge-s { color:var(--fx-tp-muted); font-size:11px; line-height:1.3; }
.fx-tp-p-badge.is-good .fx-tp-p-badge-v { color:var(--fx-tp-p-good-text); }
.fx-tp-p-badge.is-mid .fx-tp-p-badge-v { color:var(--fx-tp-p-warn-text); }
.fx-tp-p-badge.is-low .fx-tp-p-badge-v { color:var(--fx-tp-p-bad-text); }

/* ── KPI 8장 (2열) + 평균 대비 기준 세그먼트 ── */
.fx-tp-p-basis { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.fx-tp-p-seg { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--fx-tp-line); border-radius:6px; background:var(--fx-tp-sunken); }
.fx-tp-p-seg button { border:0; border-radius:4px; background:transparent; color:var(--fx-tp-muted); padding:6px 10px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; white-space:nowrap; }
.fx-tp-p-seg button.is-active { background:var(--fx-tp-card); color:var(--fx-tp-ink); box-shadow:0 1px 2px rgba(20,30,40,.12); }
.fx-tp-p-seg button:disabled { cursor:not-allowed; opacity:.55; }
.fx-tp-p-seg button:focus-visible { outline:2px solid color-mix(in srgb, var(--fx-tp-accent) 55%, transparent); }
.fx-tp-p-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.fx-tp-p-kpi { min-height:108px; padding:12px 14px 10px; }
.fx-tp-p-kpi strong { font-size:20px; font-variant-numeric:tabular-nums; }
.fx-tp-p-kpi strong small { font-size:13px; color:var(--fx-tp-muted); font-weight:500; margin-left:2px; font-family:inherit; }
.fx-tp-p-kpi span a { color:var(--fx-tp-accent); font-weight:600; }
.fx-tp-p-bench { margin-top:8px; padding-top:8px; border-top:1px dashed var(--fx-tp-line); }
.fx-tp-p-delta { color:var(--fx-tp-muted); font-size:11px; }
.fx-tp-p-delta b { font-weight:700; font-variant-numeric:tabular-nums; }
.fx-tp-p-delta.is-up b { color:var(--fx-tp-p-good-text); }
.fx-tp-p-delta.is-down b { color:var(--fx-tp-p-bad-text); }
.fx-tp-p-delta.is-flat b { color:var(--fx-tp-muted); }

/* ── 목표 진행 · 인사이트 노트 ── */
.fx-tp-p-goal, .fx-tp-p-notes-card { padding:16px 18px; }
.fx-tp-p-goal-bar { display:flex; align-items:center; gap:12px; }
.fx-tp-p-goal-track { flex:1; min-width:0; }
.fx-tp-p-goal-pct { font:700 22px/1 Oswald, "Noto Sans KR", sans-serif; font-variant-numeric:tabular-nums; }
.fx-tp-p-goal-sub { margin:10px 0 0; color:var(--fx-tp-muted); font-size:12px; line-height:1.5; }
.fx-tp-p-goal-sub b { color:var(--fx-tp-ink); font-weight:600; }
.fx-tp-p-goal-sub a { color:var(--fx-tp-accent); font-weight:600; }
.fx-tp-p-progress-head { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; color:var(--fx-tp-muted); font-size:11px; }
.fx-tp-p-progress-head b { color:var(--fx-tp-ink); font-variant-numeric:tabular-nums; }
.fx-tp-p-progress-track { height:10px; border-radius:999px; background:var(--fx-tp-sunken); border:1px solid var(--fx-tp-line); overflow:hidden; }
.fx-tp-p-progress-track span { display:block; height:100%; border-radius:999px; background:var(--fx-tp-accent); }
/* 인사이트 노트: PC 는 전부 펼치고(설계 4.3), 접힘 토글은 모바일에서만 보인다(설계 8장). */
.fx-tp-p-notes-toggle { display:none; }
.fx-tp-p-notes { display:grid; gap:6px; }
.fx-tp-p-note { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; padding:8px 10px; border:1px solid var(--fx-tp-line); border-radius:4px; background:var(--fx-tp-card); font-size:12px; line-height:1.45; }
.fx-tp-p-note b { color:var(--fx-tp-ink); font-weight:600; }
.fx-tp-p-note.is-good { border-color:color-mix(in srgb, var(--fx-tp-p-good) 45%, var(--fx-tp-line)); background:color-mix(in srgb, var(--fx-tp-p-good) 9%, var(--fx-tp-card)); }
.fx-tp-p-note.is-mid { border-color:color-mix(in srgb, var(--fx-tp-p-warn) 45%, var(--fx-tp-line)); background:color-mix(in srgb, var(--fx-tp-p-warn) 9%, var(--fx-tp-card)); }
.fx-tp-p-note.is-low { border-color:color-mix(in srgb, var(--fx-tp-p-bad) 45%, var(--fx-tp-line)); background:color-mix(in srgb, var(--fx-tp-p-bad) 9%, var(--fx-tp-card)); }
.fx-tp-p-notes-card .fx-tp-p-linkbtn { margin-top:8px; }
/* 섹션 아코디언(설계 8장): PC 는 토글·요약을 숨기고 늘 펼친다. 접힘 규칙은 아래 760px 미디어 쿼리에. */
.fx-tp-p-acc-toggle, .fx-tp-p-acc-summary { display:none; }

/* ── 표(프로필 공통) ── */
.fx-tp-p-table-wrap { overflow-x:auto; }
.fx-tp-p-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.fx-tp-p-table th, .fx-tp-p-table td { padding:9px 10px; border-bottom:1px solid var(--fx-tp-line); text-align:left; vertical-align:middle; white-space:nowrap; }
.fx-tp-p-table thead th { background:var(--fx-tp-sunken); color:var(--fx-tp-muted); font-size:11px; font-weight:600; }
.fx-tp-p-table tbody tr:last-child td { border-bottom:0; }
.fx-tp-p-table td.num, .fx-tp-p-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.fx-tp-p-table td.neg { color:var(--fx-tp-p-bad-text); }
.fx-tp-p-table td small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:var(--fx-tp-muted); }
.fx-tp-p-table tr.is-current td { background:color-mix(in srgb, var(--fx-tp-accent) 8%, var(--fx-tp-card)); }
.fx-tp-p-table tr.fx-tp-row-link:hover td { background:color-mix(in srgb, var(--fx-tp-accent) 5%, var(--fx-tp-card)); }
.fx-tp-p-table .memo { color:var(--fx-tp-muted); white-space:normal; min-width:160px; }
/* 400 미만 보고 — 한 줄에 붙어 오는 보고 문장을 건별 줄로, 메모는 접히지 않게 폭을 준다 */
.fx-tp-p-low-table { table-layout:fixed; }
.fx-tp-p-low-table th:nth-child(1), .fx-tp-p-low-table td:nth-child(1) { width:84px; }
.fx-tp-p-low-table th:nth-child(2), .fx-tp-p-low-table td:nth-child(2) { width:72px; }
.fx-tp-p-low-table td { white-space:normal; vertical-align:top; }
.fx-tp-p-low-table td:nth-child(1), .fx-tp-p-low-table td:nth-child(2) { white-space:nowrap; }
.fx-tp-p-report { font-size:12px; line-height:1.5; }
.fx-tp-p-report > span, .fx-tp-p-report > b { display:block; }
.fx-tp-p-report > b { margin-top:2px; color:var(--fx-tp-ink); }
.fx-tp-p-report-note { min-width:0; line-height:1.5; }
.fx-tp-p-table.is-compact th, .fx-tp-p-table.is-compact td { padding:7px 8px; }
/* 첫 열(일자·월·회원) 고정 — 표가 수평 스크롤될 때(설계 8장) */
.fx-tp-p-table th:first-child, .fx-tp-p-table td:first-child { position:sticky; left:0; background:var(--fx-tp-card); z-index:1; }
.fx-tp-p-table thead th:first-child { background:var(--fx-tp-sunken); }
.fx-tp-p-table tr.is-current td:first-child { background:color-mix(in srgb, var(--fx-tp-accent) 8%, var(--fx-tp-card)); }
.fx-tp-p-tag { display:inline-flex; align-items:center; padding:2px 7px; border-radius:999px; background:var(--fx-tp-sunken); color:var(--fx-tp-muted); font-size:11px; font-weight:600; }
.fx-tp-p-tag.is-new { color:var(--fx-tp-p-new); background:color-mix(in srgb, var(--fx-tp-p-new) 14%, var(--fx-tp-card)); }
.fx-tp-p-tag.is-reg { color:var(--fx-tp-p-info); background:color-mix(in srgb, var(--fx-tp-p-info) 14%, var(--fx-tp-card)); }
.fx-tp-p-chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; background:var(--fx-tp-sunken); color:var(--fx-tp-muted); font-size:11px; font-weight:700; white-space:nowrap; }
.fx-tp-p-chip.is-active, .fx-tp-p-chip.is-good { color:var(--fx-tp-p-good-text); background:color-mix(in srgb, var(--fx-tp-p-good) 16%, var(--fx-tp-card)); }
.fx-tp-p-chip.is-attention, .fx-tp-p-chip.is-mid { color:var(--fx-tp-p-warn-text); background:color-mix(in srgb, var(--fx-tp-p-warn) 18%, var(--fx-tp-card)); }
.fx-tp-p-chip.is-ghost, .fx-tp-p-chip.is-low { color:var(--fx-tp-p-bad-text); background:color-mix(in srgb, var(--fx-tp-p-bad) 14%, var(--fx-tp-card)); }
.fx-tp-p-chip.is-ended, .fx-tp-p-chip.is-neutral, .fx-tp-p-chip.is-unknown { color:var(--fx-tp-muted); }

/* ── B. 수업 · 소진 ── */
.fx-tp-p-stat-line { display:flex; gap:16px 22px; flex-wrap:wrap; align-items:baseline; font-size:13px; color:var(--fx-tp-ink); margin-bottom:12px; }
.fx-tp-p-stat-line b { font-weight:700; font-variant-numeric:tabular-nums; }
.fx-tp-p-weeks { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.fx-tp-p-week { padding:10px 12px; border:1px solid var(--fx-tp-line); border-radius:6px; background:var(--fx-tp-card); }
.fx-tp-p-week.is-current { border-color:var(--fx-tp-accent); }
.fx-tp-p-week.is-future { opacity:.55; }
.fx-tp-p-week .k { color:var(--fx-tp-muted); font-size:11px; }
.fx-tp-p-week .v { margin:4px 0 8px; font:700 20px/1 Oswald, "Noto Sans KR", sans-serif; font-variant-numeric:tabular-nums; }
.fx-tp-p-consumption-table td.fx-tp-p-rate-cell { width:38%; min-width:140px; }
.fx-tp-p-consumption-table .fx-tp-p-bar { height:6px; }
.fx-tp-p-bar { height:8px; border-radius:999px; background:var(--fx-tp-sunken); overflow:hidden; }
.fx-tp-p-bar span { display:block; height:100%; border-radius:999px; min-width:4px; background:var(--fx-tp-p-accent-light); }
.fx-tp-p-bar span.is-current { background:var(--fx-tp-accent); }

/* ── C. OT 깔때기 ── */
.fx-tp-p-funnel { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.fx-tp-p-funnel-step { padding:12px 14px; border-radius:6px; background:var(--fx-tp-sunken); }
.fx-tp-p-funnel-step.is-converted { background:color-mix(in srgb, var(--fx-tp-accent) 12%, var(--fx-tp-card)); }
.fx-tp-p-funnel-step .k { color:var(--fx-tp-muted); font-size:11px; }
.fx-tp-p-funnel-step .v { margin-top:4px; font:700 22px/1 Oswald, "Noto Sans KR", sans-serif; font-variant-numeric:tabular-nums; }
.fx-tp-p-funnel-step .v small { display:block; margin-top:4px; font:400 11px/1.2 inherit; font-family:inherit; color:var(--fx-tp-muted); }

/* ── D. 회원 관리 ── */
.fx-tp-p-mstats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.fx-tp-p-mstat { padding:12px 14px; border:1px solid var(--fx-tp-line); border-radius:6px; background:var(--fx-tp-sunken); display:flex; flex-direction:column; gap:4px; min-width:0; }
.fx-tp-p-mstat > span { color:var(--fx-tp-muted); font-size:11px; font-weight:600; }
.fx-tp-p-mstat > strong { font:700 20px/1.1 Oswald, "Noto Sans KR", sans-serif; font-variant-numeric:tabular-nums; }
.fx-tp-p-mstat > strong small { font-size:12px; font-family:inherit; font-weight:500; color:var(--fx-tp-muted); }
.fx-tp-p-mstat > small { color:var(--fx-tp-muted); font-size:11px; line-height:1.45; }
.fx-tp-p-mstat b { color:var(--fx-tp-ink); font-weight:700; }
.fx-tp-p-mstat .c-active { color:var(--fx-tp-p-good-text); }
.fx-tp-p-mstat .c-attention { color:var(--fx-tp-p-warn-text); }
.fx-tp-p-mstat .c-ghost { color:var(--fx-tp-p-bad-text); }
.fx-tp-p-mfilter { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.fx-tp-p-mtable th, .fx-tp-p-mtable td { padding:9px 8px; }
.fx-tp-p-mtable td small.fx-tp-p-reason { display:block; margin-top:3px; color:var(--fx-tp-muted); font-size:11px; white-space:nowrap; }
.fx-tp-p-prob { display:flex; align-items:center; gap:8px; min-width:120px; }
.fx-tp-p-prob-bar { flex:1; height:6px; border-radius:999px; background:var(--fx-tp-line); overflow:hidden; min-width:56px; }
.fx-tp-p-prob-bar span { display:block; height:100%; border-radius:999px; background:var(--fx-tp-muted); }
.fx-tp-p-prob-v { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fx-tp-p-prob.is-high .fx-tp-p-prob-bar span { background:var(--fx-tp-p-good); }
.fx-tp-p-prob.is-mid .fx-tp-p-prob-bar span { background:var(--fx-tp-p-warn); }
.fx-tp-p-prob.is-low .fx-tp-p-prob-bar span { background:var(--fx-tp-p-bad); }
.fx-tp-p-prob.is-high .fx-tp-p-prob-v { color:var(--fx-tp-p-good-text); }
.fx-tp-p-prob.is-mid .fx-tp-p-prob-v { color:var(--fx-tp-p-warn-text); }
.fx-tp-p-prob.is-low .fx-tp-p-prob-v { color:var(--fx-tp-p-bad-text); }
.fx-tp-p-mcards { display:none; gap:8px; }
.fx-tp-p-mcard { padding:12px 14px; border:1px solid var(--fx-tp-line); border-radius:6px; background:var(--fx-tp-card); cursor:pointer; }
.fx-tp-p-mcard-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fx-tp-p-mcard-top b { font-size:14px; white-space:nowrap; }
.fx-tp-p-mcard-top .fx-tp-p-prob { flex:0 0 104px; min-width:0; }
.fx-tp-p-mcard-line { font-size:12px; margin-top:2px; }
.fx-tp-p-mcard-line b { font-weight:600; }

/* 회원 상세 모달 — 기존 .fx-modal 위에 얹는다. 모바일 바텀시트는 style.css 규칙을 그대로 받는다. */
.fx-tp-p-modal { max-width:760px; }
.fx-tp-p-modal-head { align-items:flex-start; }
.fx-tp-p-modal-head h4 { font:700 20px/1.1 Oswald, "Noto Sans KR", sans-serif; letter-spacing:-.01em; }
.fx-tp-p-modal-head .fx-tp-panel-kicker { margin-bottom:4px; }
.fx-tp-p-modal-foot { gap:8px; }
.fx-tp-p-detail { display:grid; gap:12px; }
.fx-tp-p-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fx-tp-p-dbox { padding:14px; border:1px solid var(--fx-tp-line); border-radius:6px; background:var(--fx-tp-sunken); min-width:0; }
.fx-tp-p-dscore { display:flex; align-items:baseline; gap:10px; }
.fx-tp-p-dbig { font:700 32px/1 Oswald, "Noto Sans KR", sans-serif; font-variant-numeric:tabular-nums; }
.fx-tp-p-dband { font-weight:700; }
.fx-tp-p-dscore.is-high .fx-tp-p-dbig, .fx-tp-p-dscore.is-high .fx-tp-p-dband { color:var(--fx-tp-p-good-text); }
.fx-tp-p-dscore.is-mid .fx-tp-p-dbig, .fx-tp-p-dscore.is-mid .fx-tp-p-dband { color:var(--fx-tp-p-warn-text); }
.fx-tp-p-dscore.is-low .fx-tp-p-dbig, .fx-tp-p-dscore.is-low .fx-tp-p-dband { color:var(--fx-tp-p-bad-text); }
.fx-tp-p-dbox .fx-tp-p-prob { margin-top:8px; }
.fx-tp-p-dl { display:grid; grid-template-columns:84px minmax(0,1fr); gap:8px; padding:5px 0; font-size:12.5px; border-bottom:1px dashed var(--fx-tp-line); }
.fx-tp-p-dl:last-of-type { border-bottom:0; }
.fx-tp-p-dl span { color:var(--fx-tp-muted); }
.fx-tp-p-dl b { color:var(--fx-tp-ink); font-weight:600; }
.fx-tp-p-factors { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.fx-tp-p-factor { padding:3px 8px; border-radius:999px; font-size:11px; font-weight:600; }
.fx-tp-p-factor.is-plus { background:color-mix(in srgb, var(--fx-tp-p-good) 14%, var(--fx-tp-card)); color:var(--fx-tp-p-good-text); }
.fx-tp-p-factor.is-minus { background:color-mix(in srgb, var(--fx-tp-p-bad) 14%, var(--fx-tp-card)); color:var(--fx-tp-p-bad-text); }
.fx-tp-p-sessions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.fx-tp-p-session { padding:3px 8px; border-radius:999px; background:var(--fx-tp-card); border:1px solid var(--fx-tp-line); font-size:11px; }
.fx-tp-p-session.is-absent { color:var(--fx-tp-p-bad-text); border-color:color-mix(in srgb, var(--fx-tp-p-bad) 40%, var(--fx-tp-line)); }
.fx-tp-p-dbox .fx-tp-p-table-wrap { margin-top:8px; }
.fx-tp-p-dbox .fx-tp-p-table th:first-child, .fx-tp-p-dbox .fx-tp-p-table td:first-child { position:static; }

/* ── E. 면담 · 과제 ── */
.fx-tp-p-review { padding:12px 0; border-bottom:1px solid var(--fx-tp-line); }
.fx-tp-p-review:first-child { padding-top:0; }
.fx-tp-p-review:last-child { border-bottom:0; padding-bottom:0; }
.fx-tp-p-review-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--fx-tp-muted); font-size:11px; margin-bottom:4px; }
.fx-tp-p-review h4 { margin:0; font-size:13px; font-weight:600; line-height:1.45; }
.fx-tp-p-review p { margin:4px 0 0; color:var(--fx-tp-muted); font-size:12px; white-space:pre-wrap; }
.fx-tp-p-action { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--fx-tp-line); }
.fx-tp-p-action:last-of-type { border-bottom:0; }
.fx-tp-p-action .t { font-size:13px; font-weight:500; }
.fx-tp-p-action .d { font-size:11px; color:var(--fx-tp-muted); white-space:nowrap; }
.fx-tp-p-action .d.is-over { color:var(--fx-tp-p-bad-text); font-weight:600; }
.fx-tp-p-action.is-done .t { color:var(--fx-tp-muted); text-decoration:line-through; }
.fx-tp-p-prio { width:8px; height:8px; border-radius:50%; background:var(--fx-tp-line); }
.fx-tp-p-prio.p1 { background:var(--fx-tp-p-bad); }
.fx-tp-p-prio.p2 { background:var(--fx-tp-p-warn); }

/* ── 반응형: 레일이 접히고 표는 수평 스크롤 ── */
@media (max-width: 1080px) {
  .fx-tp-p-layout { grid-template-columns:1fr; }
  .fx-tp-p-rail { position:static; max-height:none; overflow:visible; padding-bottom:0; }
  .fx-tp-p-mstats { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
  .fx-tp-p-topbar { align-items:center; }
  .fx-tp-p-back { min-height:44px; }
  /* 액션 셋은 ⋯ 뒤로 접힌다. 열면 목록이 상단 바 아래 한 줄씩 펼쳐진다(탭 타깃 44px). */
  .fx-tp-p-actions { margin-left:auto; justify-content:flex-end; }
  .fx-tp-p-actions.is-open { width:100%; }
  .fx-tp-p-more { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin-left:auto; border:1px solid var(--fx-tp-line); border-radius:6px; background:var(--fx-tp-card); color:var(--fx-tp-ink); font-size:20px; line-height:1; cursor:pointer; }
  .fx-tp-p-more:focus-visible { outline:2px solid color-mix(in srgb, var(--fx-tp-accent) 55%, transparent); }
  .fx-tp-p-actions-list { display:none; flex-basis:100%; }
  .fx-tp-p-actions.is-open .fx-tp-p-actions-list { display:grid; grid-template-columns:1fr; gap:8px; }
  .fx-tp-p-actions .btn, .fx-tp-p-modal-foot .btn, .fx-tp-p-panel-foot .btn { min-height:44px; }
  .fx-tp-p-badges { display:flex; overflow-x:auto; padding-bottom:4px; }
  .fx-tp-p-badge { flex:0 0 auto; min-width:140px; }
  .fx-tp-p-panel-body { padding:14px 14px 16px; }
  .fx-tp-p-panel .fx-tp-panel-head { position:relative; flex-direction:column; gap:6px; padding:14px 52px 12px 14px; min-height:44px; }
  .fx-tp-p-panel .fx-tp-panel-caption { text-align:left; }
  /* 섹션 아코디언: 토글 버튼이 헤더 전체를 덮는 탭 타깃이고, 캡션의 링크 버튼('전체 보기')만 위로 올려 눌리게 한다. */
  .fx-tp-p-acc-toggle { display:block; position:absolute; inset:0; z-index:1; border:0; background:transparent; cursor:pointer; min-height:44px; }
  .fx-tp-p-acc-toggle::after { content:""; position:absolute; right:20px; top:20px; width:9px; height:9px; border-right:2px solid var(--fx-tp-muted); border-bottom:2px solid var(--fx-tp-muted); transform:rotate(45deg); }
  .fx-tp-p-panel.is-open .fx-tp-p-acc-toggle::after { top:24px; transform:rotate(-135deg); }
  .fx-tp-p-acc-toggle:focus-visible { outline:2px solid color-mix(in srgb, var(--fx-tp-accent) 55%, transparent); outline-offset:-2px; }
  .fx-tp-p-panel .fx-tp-panel-caption .fx-tp-p-linkbtn { position:relative; z-index:2; min-height:44px; display:inline-flex; align-items:center; }
  .fx-tp-p-acc-summary { display:block; margin:4px 0 0; color:var(--fx-tp-muted); font-size:12px; font-variant-numeric:tabular-nums; }
  .fx-tp-p-panel:not(.is-open) .fx-tp-p-panel-body { display:none; }
  .fx-tp-p-panel:not(.is-open) .fx-tp-panel-head { border-bottom:0; }
  .fx-tp-p-panel:not(.is-open) .fx-tp-panel-caption { display:none; }
  /* 인사이트 노트는 접힌 채로 시작('인사이트 n건 보기') */
  .fx-tp-p-notes-toggle { display:inline-flex; align-items:center; min-height:44px; margin:0; }
  .fx-tp-p-notes-wrap:not(.is-open) .fx-tp-p-notes { display:none; }
  .fx-tp-p-notes-wrap.is-open .fx-tp-p-notes { margin-top:4px; }
  .fx-tp-p-grid-2, .fx-tp-p-detail-grid { grid-template-columns:1fr; }
  .fx-tp-p-weeks, .fx-tp-p-funnel { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* 회원 요약 카드 2×2(설계 4.7), 세그먼트·필터·행 링크는 44px */
  .fx-tp-p-mstats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx-tp-p-seg button { min-height:44px; padding:6px 12px; }
  .fx-tp-p-mfilter .fx-tp-p-seg { max-width:100%; overflow-x:auto; }
  .fx-tp-p-mfilter > .fx-tp-p-muted { display:none; }
  .fx-tp-p-mtable-wrap { display:none; }
  .fx-tp-p-mcards { display:grid; }
  .fx-tp-p-mcard { min-height:44px; }
  .fx-tp-p-note { grid-template-columns:1fr; gap:2px; }
  .fx-tp-p-table { font-size:12px; }
  .fx-tp-p-table th, .fx-tp-p-table td { padding:8px 6px; }
  .fx-tp-p-table tr.fx-tp-row-link td { padding-top:13px; padding-bottom:13px; }
}