:root {
  /* ── 색 체계 개편 (2026-07-30) ────────────────────────────────
     바꾼 이유
     · 이전 팔레트는 위험 색(빨강 #dc2626·주황 #d97706·보라 #7c3aed)이 어두운 배경 위에서
       탁해 눈에 안 들어왔다. 어두운 화면에는 채도보다 '밝기'가 대비를 만든다
     · 표면 단계가 3개뿐이라 카드 안에 카드가 들어가면 구분이 사라졌다 → 4단계로
     · 강조색을 인디고로 옮겼다. 수익화 등급의 보라와 부딪히지 않으면서
       파랑보다 차분하다
     ───────────────────────────────────────────────────────── */

  /* 표면 — 아래로 갈수록 한 단계씩 밝아진다 */
  --bg:     #090b10;
  --panel:  #11141b;
  --panel2: #181c25;
  --panel3: #202530;          /* 카드 안의 카드 */
  --line:      #272d3a;
  --line-soft: #1c2029;       /* 표 안쪽처럼 존재감이 없어야 하는 선 */

  /* 글자 — 3단계로 위계를 만든다 */
  --ink:  #eef1f7;
  --ink2: #bcc5d4;            /* 보조 설명 */
  --dim:  #8a93a6;            /* 라벨·비활성 */

  /* 강조 */
  --accent:   #6d7cff;
  --accent-2: #4f5ee0;
  --accent-soft: rgba(109,124,255,.14);
  /* 예전 이름을 쓰는 규칙이 많아 남겨둔다 (같은 색을 가리킨다) */
  --blue: #6d7cff; --blue2: #4f5ee0;

  /* 상태 — 어두운 배경에서 읽히도록 밝기를 올렸다 */
  --red:   #ff6b73;
  --amber: #f7b34a;
  --green: #45d98a;
  --violet:#b07cff;

  --radius: 14px; --radius-sm: 10px; --radius-xs: 8px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 10px 30px -10px rgba(0,0,0,.6);
  --ring: 0 0 0 2px rgba(109,124,255,.5);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif;
}
header {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 10;
}
h1 { font-size: 19px; margin: 0; font-weight: 700; }
h1 .dim { font-weight: 400; }
.dim { color: var(--dim); font-weight: 400; font-size: .88em; }
.viewswitch { display: flex; gap: 6px; }
.viewswitch button {
  background: var(--panel2); color: var(--dim); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.viewswitch button.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.period { margin-left: auto; color: var(--dim); font-size: 13px; }

/* [hidden] 안전장치 — 특정 display 규칙(flex/grid)이 UA의 [hidden]{display:none}을 덮는 것을 막는다.
   부책센 로그인 시 뷰스위치(.viewswitch display:flex)가 숨겨지지 않던 문제 포함. */
#login[hidden], #app[hidden], .modal[hidden], .viewswitch[hidden],
.viewswitch button[hidden], .userbar [hidden] { display: none; }

/* ── 유저바 ── */
/* 좁은 화면(375px)에서 header가 줄바꿈될 때 이름·버튼 글자가 단어 중간에서
   줄바꿈되어 "책임센터장"이 "책임센터"+"장"으로 잘려 보이던 문제 (디자인팀 2026-08-11).
   flex-wrap: wrap 도 추가 — nowrap만 걸면 버튼들이 줄어들 곳이 없어 옆으로 밀려
   화면 밖으로 잘릴 수 있어, 필요하면 사용자바 자체가 다음 줄로 넘어가게 한다. */
.userbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.userbar .uname { color: var(--ink); font-size: 13px; font-weight: 600; margin-right: 4px; white-space: nowrap; }
.userbar .ghost { white-space: nowrap; }

/* ── 로그인 화면 ── */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #172033, var(--bg)); z-index: 100; }
.login-card { width: 340px; max-width: calc(100vw - 40px); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.login-brand { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.login-label { font-size: 12px; color: var(--dim); margin-top: 6px; }
.login-card select, .login-card input {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; width: 100%; }
.login-card button[type="submit"] {
  margin-top: 14px; background: var(--blue); color: #fff; border: none;
  border-radius: 8px; padding: 11px; font-size: 15px; font-weight: 600; cursor: pointer; }
.login-card button[type="submit"]:hover { background: var(--blue2); }
.login-error { color: var(--red); font-size: 13px; min-height: 16px; margin-top: 8px; }
.login-hint { color: var(--dim); font-size: 12px; margin-top: 4px; }

/* ── 모달(비번변경 / 계정관리) — 버튼으로만 진입, 메인 위에 오버레이 ── */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start;
  justify-content: center; padding: 80px 20px 20px; background: rgba(4,7,12,.62); overflow-y: auto; }
.modal-card { width: 420px; max-width: calc(100vw - 40px); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.modal-card.wide { width: 620px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-x { background: none; border: none; color: var(--dim); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.modal-x:hover { background: var(--panel2); color: var(--ink); }
.modal-form { display: flex; flex-direction: column; gap: 10px; }
.modal-form input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.modal-form button, .acct-set button { background: var(--blue); color: #fff; border: none;
  border-radius: 8px; padding: 10px 14px; font-size: 14px; cursor: pointer; }
.panel-title { font-size: 15px; font-weight: 600; }
.panel-msg { font-size: 12px; }
.panel-msg.ok { color: var(--green); }
.panel-msg.err { color: var(--red); }
.acct-sub { font-size: 12px; font-weight: 700; color: var(--dim); margin: 14px 0 6px; }
.acct-create { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; background: var(--panel2); }
.acct-create .acct-sub { margin-top: 0; }
.acct-create-form { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.acct-create-form input, .acct-create-form select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13px; }
.acct-create-form input[name="id"], .acct-create-form input[name="name"] { flex: 1 1 120px; }
.acct-create-form button { background: var(--blue); color: #fff; border: none; border-radius: 7px; padding: 8px 14px; cursor: pointer; font: inherit; }
.acct-create-form .panel-msg { flex-basis: 100%; }
.acct-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line); }
.acct-who { font-size: 14px; }
.acct-flag { font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
.acct-flag.set { background: #12331f; color: var(--green); }
.acct-flag.unset { background: #33231a; color: var(--amber); }
.acct-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-set input { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* ── 면담취합 경과일 배지 (앱개선 5회차) ── */
.gap-days { display: inline-block; font-size: 11px; font-weight: 600; color: var(--dim);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 0 7px; margin-left: 4px; }
.gap-days.warn { color: #201400; background: var(--amber); border-color: var(--amber); }

/* ── 센터장 탭 팀 완료율 진행바 (앱개선 2회차) ── */
.col-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.col-head h3 { margin: 0; }
.team-progress { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 140px; }
.team-progress .tp-bar { flex: 1; height: 8px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; }
.team-progress .tp-bar span { display: block; height: 100%; background: var(--amber); border-radius: 6px;
  transition: width .3s ease; }
.team-progress.full .tp-bar span { background: var(--green); }
.team-progress .tp-num { font-size: 12px; color: var(--ink); white-space: nowrap; }

/* ── 11주차 관문 임박 표시 (앱개선 3회차) ── */
tr.gate11 td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.gate-badge { display: inline-block; font-size: 10px; font-weight: 700; color: #201400;
  background: var(--amber); border-radius: 8px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; cursor: help; }

/* ── 졸업 임박 표시 (앱개선 4회차) ── */
tr.gradsoon td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.grad-badge { display: inline-block; font-size: 10px; font-weight: 700; color: #052012;
  background: var(--green); border-radius: 8px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; cursor: help; }

/* ── 이상징후 회원명 검색 (앱개선 1회차) ── */
.sig-search { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.sig-search input { flex: 1; min-width: 260px; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.sig-search input:focus { outline: none; border-color: var(--blue); }
.sig-search-result { font-size: 12px; color: var(--dim); }
tr.hit td { background: rgba(59,130,246,.14); }
tr.hit td:first-child { font-weight: 700; box-shadow: inset 3px 0 0 var(--blue); }

main { max-width: 1100px; margin: 0 auto; padding: 22px 24px; display: grid; gap: 18px; }
/* hidden 뷰는 반드시 숨긴다 — main의 display:grid가 UA의 [hidden]{display:none}을 덮으므로 명시적으로 재지정.
   이게 없으면 모든 탭이 동시에 쌓여 보인다(업무지시 폼이 부책센 탭에도 노출되던 원인). */
main.view[hidden] { display: none; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card h2 { font-size: 15px; margin: 0 0 14px; }

.taskform { display: grid; gap: 10px; }
.taskform input, .taskform textarea, .taskform select {
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  padding: 10px 12px; border-radius: 8px; font: inherit; width: 100%;
}
.taskform textarea { min-height: 52px; resize: vertical; }
.taskform .row { display: flex; gap: 10px; }
.taskform .row select { flex: 1; }
.assignees { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 0; }
.assignees .alabel { color: var(--dim); font-size: 13px; }
.assignees label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.assignees input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.taskform button.ghost { background: transparent; border: 1px solid var(--line); color: var(--dim); padding: 6px 12px; font-weight: 500; }
.taskform button.ghost:hover { color: var(--ink); border-color: var(--dim); }
.taskform button, .board button.primary {
  background: var(--blue); color: #fff; border: none; padding: 10px 18px;
  border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap;
}
.taskform button:hover { background: var(--blue2); }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.col h3 { font-size: 13px; color: var(--dim); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.cadence-group { margin-bottom: 14px; }
.cadence-group .label { font-size: 12px; color: var(--dim); margin: 6px 0; }

.task {
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 8px; padding: 11px 13px; margin-bottom: 8px;
}
.task.important { border-left-color: var(--amber); background: #241f14; }
.task.important.unreported { border-left-color: var(--red); background: #2a1717; box-shadow: 0 0 0 1px rgba(239,68,68,.25); }
.task.done { border-left-color: var(--green); background: #10241a; }
/* 방금 완료한 카드 초록 플래시 (16회차) */
@keyframes flashDone { 0% { background: #1c7a48; box-shadow: 0 0 0 2px var(--green); } 100% { background: #10241a; box-shadow: none; } }
.task.flash-done { animation: flashDone .7s ease-out; }
.task .t-top { display: flex; align-items: flex-start; gap: 8px; }
.task .t-title { font-weight: 600; flex: 1; }
.task.done .t-title { color: #7ee2a8; }
.task.done .t-title::before { content: "✓ "; font-weight: 800; color: var(--green); }
.task .done-time { color: var(--green); font-size: 12px; margin-top: 6px; }
.task .t-detail { color: var(--dim); font-size: 13px; margin-top: 4px; white-space: pre-wrap; }
.task .badges { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--dim); }
/* 등록 후 경과일 (17회차): 기본은 은은하게, 주기 초과 시 빨강 강조 */
.badge.age { color: var(--dim); border-color: var(--line); }
.badge.age.over { color: #fecaca; border-color: var(--red); background: #2a1717; font-weight: 700; }
.badge.important { color: var(--amber); border-color: var(--amber); }
.badge.report-wait { color: var(--red); border-color: var(--red); }
.badge.reported { color: var(--green); border-color: var(--green); }
.badge.done { color: #05230f; background: var(--green); border-color: var(--green); font-weight: 700; }

.task .actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.task .actions button {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  padding: 5px 11px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px;
}
.task .actions button:hover { color: var(--ink); border-color: var(--dim); }
.task .actions button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.task .actions button.star.on { background: var(--amber); border-color: var(--amber); color: #1a1206; }
.task .actions button.done-btn.on { background: var(--green); border-color: var(--green); color: #05230f; }
.task .report-note { margin-top: 8px; }
.task .report-note input {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  padding: 7px 10px; border-radius: 7px; font: inherit; font-size: 13px;
}
.empty { color: var(--dim); font-size: 13px; padding: 10px 0; }

.assignee-header { max-width: none; margin: 22px 0 0; padding: 0 32px; }
.assignee-header .who { font-size: 20px; font-weight: 700; }
.assignee-header .alert {
  margin-top: 10px; padding: 12px 16px; border-radius: 10px;
  background: #2a1717; border: 1px solid var(--red); color: #fecaca; display: none;
}
.assignee-header .alert.show { display: block; }
#assigneeBoard { max-width: none; margin: 0; padding: 18px 32px; display: grid; gap: 16px; }
/* 내 업무: 일간·주간·월간 카드를 항상 3칸 가로 병렬(줄바꿈 없이 균등 분할) */
.cadence-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: nowrap; }
.cadence-row > .card { flex: 1 1 0; min-width: 0; }

/* 이상징후 — 6유형 */
.typecards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.typecard { display: flex; align-items: center; gap: 7px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 13px; cursor: pointer; font: inherit; color: var(--ink); }
.typecard:hover { border-color: var(--dim); }
.typecard.on { border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.typecard .tc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); }
.typecard .tc-n { font-size: 18px; font-weight: 800; color: var(--tc); }
.typecard .tc-l { font-size: 12.5px; color: var(--dim); }
.team-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.team-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .15s; }
.team-card:hover { border-color: var(--dim); }
.team-card.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.team-card .tname { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.team-card .nums { display: flex; gap: 18px; }
.team-card .num b { font-size: 24px; color: var(--tc, var(--ink)); }
.team-card .num span { color: var(--dim); font-size: 12px; margin-left: 4px; }
.gbadge, .chip { font-size: 11px; padding: 2px 9px; border-radius: 20px; color: var(--tc); border: 1px solid var(--tc); white-space: nowrap; }
/* 수익화위험 칩 강조 (11·20회차): 채운 배경+굵게 — 이상징후·부책센 요약 공통 */
.chip.chip-mono, .gbadge.chip-mono { background: var(--tc); color: #fff; font-weight: 700; }
.trainer-head .chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
/* 이상징후 → 면담취합 바로가기 버튼 (13회차) */
.goto-iv { margin-left: 10px; font-size: 11px; padding: 3px 9px; border-radius: 8px;
  background: var(--panel2); color: var(--dim); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.goto-iv:hover { color: var(--ink); border-color: var(--blue); }

.trainer-row {
  border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; overflow: hidden; background: var(--panel2);
}
.trainer-row.overload { border-color: var(--red); }
.trainer-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; flex-wrap: wrap; }
.trainer-head:hover { background: #20262f; }
.trainer-head .tn { font-weight: 600; }
.trainer-head .meta { color: var(--dim); font-size: 12px; }
.trainer-head .spacer { flex: 1; }
.trainer-head .cnt { font-size: 13px; }
.trainer-head .cnt .g1 { color: var(--red); font-weight: 700; }
.trainer-head .cnt .g2 { color: var(--amber); font-weight: 700; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); color: var(--dim); }
.tag.new { color: var(--blue); border-color: var(--blue); }
.tag.tmatch { color: #fff; background: var(--blue); border-color: var(--blue); font-weight: 700; }
.tag.overload { color: var(--red); border-color: var(--red); }
/* 과부하 배지에 판정 근거를 함께 보여준다 — '과부하'만 있으면 사람에 대한 평결처럼 읽힌다.
   기준이 초기 회원 수의 절대치라서 신입이 쉽게 걸린다는 걸 숫자로 드러내는 목적 (2026-07-30) */
.tag-why { font-weight: 700; opacity: .85; margin-left: 3px; font-size: 10.5px; }
.trainer-members { display: none; padding: 4px 14px 12px; }
.trainer-row.open .trainer-members { display: block; }
.trainer-members table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trainer-members th { text-align: left; color: var(--dim); font-weight: 500; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.trainer-members td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.trainer-members td .gg1 { color: var(--red); } .trainer-members td .gg2 { color: var(--amber); }
.overload-note { margin: 10px 0 0; padding: 10px 14px; background: #2a1717; border: 1px solid var(--red); border-radius: 9px; color: #fecaca; font-size: 13px; }

/* 면담 취합 */
.ivfilter { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.ivfilter button { background: var(--panel2); color: var(--dim); border: 1px solid var(--line); padding: 6px 13px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; }
.ivfilter button.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.ivfilter .spacer { flex: 1; }
/* 센터장 탭 '중요·미보고만' 토글 (15회차) */
.imponly-btn { float: right; background: var(--panel2); color: var(--dim); border: 1px solid var(--line);
  padding: 4px 12px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px; }
.imponly-btn:hover { color: var(--ink); border-color: var(--dim); }
.imponly-btn.active { background: var(--amber); color: #201400; border-color: var(--amber); font-weight: 700; }

.ivfilter button.ghost { background: transparent; }
.ivfilter button:disabled { opacity: .5; cursor: default; }

/* 최신화 결과/경고 메시지 */
.iv-refresh-msg { margin: 8px 0 4px; padding: 9px 12px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.iv-refresh-msg hr { border: none; border-top: 1px solid var(--line); margin: 6px 0; }
.iv-refresh-msg .err { color: var(--red); }
.iv-refresh-msg .pend { color: var(--amber); font-weight: 700; }

/* 센터장 탭 상단 · 이번 주 회원 증감 */
/* 센터장 상단 3대 지표(크게) */
.center-kpi-card { padding: 16px 20px; }
.center-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ck-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 12px;
  background: var(--panel2, rgba(255,255,255,.03)); border: 1px solid var(--dim); }
.ck-tile .ck-lbl { font-size: 13px; font-weight: 700; color: var(--muted, var(--dim)); }
.ck-tile .ck-val { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; color: var(--ink); }
.ck-tile .ck-sub { font-size: 12px; color: var(--dim); }
.ck-tile.up .ck-val { color: var(--green); }
.ck-tile.down .ck-val { color: var(--red); }
/* 수집이 오래돼 이번 기간 값이 "진짜 0"인지 "아직 안 걷어옴"인지 모를 때.
   red/green(성과 색)을 쓰면 오늘 실적처럼 읽히므로 amber 점선으로 "확정 아님"만 표시한다. */
.ck-tile.stale { border-style: dashed; border-color: rgba(247,179,74,.5); }
.ck-tile.stale .ck-val { color: var(--dim); }
.ck-tile.stale .ck-sub { color: var(--amber); font-weight: 600; }
@media (max-width: 720px) { .center-kpi { grid-template-columns: 1fr; } }

.member-delta-card { padding: 14px 20px; }
.member-delta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.member-delta .md-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.member-delta .md-net { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.member-delta .md-net.up { color: var(--green); }
.member-delta .md-net.down { color: var(--red); }
.member-delta .md-net.flat { color: var(--dim); }
.member-delta .md-total { margin-left: auto; font-size: 13px; }

/* CR 관리 — 당일 전환 (기간 선택과 무관, 항상 '오늘'. 히어로보다 작게 두어 위계가 뒤집히지 않게 함) */
.cr-today { margin-top: 8px; padding: 7px 13px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-size: 13.5px; }
.cr-today b { font-weight: 800; }
.cr-today.today-ok b { color: var(--blue); }
.cr-today.today-zero { color: var(--dim); }
/* 미수집 상태 — 아래 '수집이 N일 전' 경고와 같은 진한 amber를 쓰면 경고가 두 번 겹쳐 보인다.
   여기는 실선 대신 점선으로 '확정 값 아님'만 표시하고, 강한 경고색은 roster-health 쪽에 남긴다. */
.cr-today.today-unknown { color: var(--dim); border-style: dashed; }

/* CR 관리 — 이번 주 성과 크게 */
.cr-hero { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.cr-stat { display: flex; flex-direction: column; gap: 2px; }
.cr-stat .cr-val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); line-height: 1; }
.cr-stat .cr-lbl { font-size: 12px; color: var(--dim); }
.cr-stat.big .cr-val { font-size: 46px; color: var(--blue); }
.cr-stat.up .cr-val { color: var(--green); }
.cr-stat.bad .cr-val { color: var(--red); }
.cr-stat.grad { padding-left: 20px; margin-left: 6px; border-left: 1px solid var(--line); }
.cr-stat.grad .cr-val { color: var(--green); font-size: 22px; }
.cr-hero-sub { flex-basis: 100%; margin-top: 4px; font-size: 12.5px; color: var(--dim); }
.cr-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cr-row:last-child { border-bottom: none; }
.cr-name { font-weight: 700; min-width: 68px; }
.cr-week { font-size: 13px; min-width: 150px; }
.cr-week .rate { color: var(--blue); }
.cr-bar { flex: 1; min-width: 120px; height: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.cr-bar span { display: block; height: 100%; background: var(--blue); }
.cr-total { font-size: 12px; }

/* CR 콜 상태 퍼널 */
.cr-funnel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cr-funnel-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-fchip { font-size: 13px; padding: 4px 12px; border-radius: 7px; background: var(--panel2); border: 1px solid var(--line); }
.cr-fchip.ok { border-color: var(--green); } .cr-fchip.ok b { color: var(--green); }
.cr-fchip.wait { border-color: var(--amber); } .cr-fchip.wait b { color: var(--amber); }
.cr-fchip.no { border-color: var(--red); } .cr-fchip.no b { color: var(--red); }
.cr-fwait { font-size: 12px; margin-top: 8px; color: var(--ink); }

/* 탈퇴 관리 — 구간·교차 분석 */
.churn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.churn-block { }
.churn-bt { font-size: 13px; font-weight: 700; color: var(--dim); margin-bottom: 8px; }
.churn-bar-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; flex-wrap: wrap; }
.churn-k { flex: 0 0 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.churn-bar { flex: 1; height: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.churn-bar span { display: block; height: 100%; background: var(--red); }
.churn-n { flex: 0 0 28px; text-align: right; font-weight: 700; }
.churn-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.churn-trend { margin: 10px 0 4px; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; }
.churn-trend .churn-k { flex: 0 0 120px; }
.churn-bar-row.clickable { cursor: pointer; border-radius: 5px; }
.churn-bar-row.clickable:hover { background: var(--panel2); }
/* 히어로의 유예 항목 — 눌러서 명단을 펼친다 (2026-07-30) */
.cr-stat.clickable { cursor: pointer; border-radius: 8px; padding: 4px 8px; margin: -4px -8px;
  transition: background .12s; }
.cr-stat.clickable:hover { background: var(--panel2); }
.churn-drill { margin-top: 14px; }
.churn-drill-h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.churn-drill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3px 14px; }
.churn-drill-i { font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.ghost.sm { font-size: 11px; padding: 2px 8px; }
/* 드릴 — 트레이너별 그룹 */
.churn-drill-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 16px; }
.churn-drill-g { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.churn-drill-gt { font-size: 13px; font-weight: 700; margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.churn-drill-gt b { color: var(--red); margin-left: 4px; }
.churn-drill-i2 { font-size: 12px; padding: 2px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.churn-drill-i2 .cm { font-weight: 600; }
.churn-names { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.churn-nm { font-size: 13px; padding: 2px 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.drill-pinbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 6px; }
/* 커서 옆 떠다니는 팝업 */
.churn-float { position: fixed; z-index: 1000; display: none; max-width: 460px; max-height: 60vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--dim); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.churn-float .churn-drill-groups { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* 센터장 홈 통합 위젯 */
.home-widget { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hw-tile { flex: 1 1 120px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; }
.hw-tile .hw-val { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.hw-tile .hw-val.up { color: var(--green); }
.hw-tile .hw-val.down { color: var(--red); }
.hw-tile .hw-lbl { font-size: 11.5px; color: var(--dim); }

/* KPI 목표 */
.kpi-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.kpi-row:last-child { border-bottom: none; }
.kpi-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpi-label { font-weight: 700; min-width: 140px; }
/* 지표의 기간 범위 — 누적값을 '이번 주'로 인용하는 것을 막는 표시 (2026-07-30) */
.kpi-scope { font-size: 11.5px; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.kpi-cur { font-size: 18px; font-weight: 800; }
.kpi-cur.ok { color: var(--green); } .kpi-cur.no { color: var(--red); }
.kpi-bar { height: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 7px 0; }
.kpi-bar span { display: block; height: 100%; background: var(--blue); }
.kpi-bar span.ok { background: var(--green); } .kpi-bar span.no { background: var(--amber); }
.kpi-edit { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.kpi-edit input { width: 110px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; }

/* 수익화 리스트 */
.monet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; }
.monet-item { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 2px 0; }

/* 면담 세부 지표 */
.mx-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.mx-item { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12.5px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.mx-k { color: var(--dim); }
.mx-v { font-weight: 700; }

/* 면담 주차 선택 */
.iv-week { background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 10px; font: inherit; font-size: 12.5px; max-width: 220px; }
.iv-week:focus { outline: none; border-color: var(--blue); }

/* 탈퇴에서 제외된 회원(재적명단에 아직 있음) — 조용히 빼지 않고 드러낸다 */
.churn-excluded { margin: 8px 0 4px; }

/* 탈퇴 회원 이름검색 결과 (2026-07-30) — 재문의 응대 중에 훑는 화면이라 한 건이 한 줄로 */
.churn-hits { margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px;
  max-height: 340px; overflow-y: auto; }
.churn-hit { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.churn-hit .ch-name { font-weight: 800; font-size: 14px; }
.churn-hit .ch-meta { font-size: 12px; color: var(--dim); white-space: nowrap; }
/* 사유는 길다. 한 줄로 자르고 전체는 title 로 (여기서 줄바꿈하면 목록을 훑을 수 없다) */
.churn-hit .ch-reason { flex-basis: 100%; font-size: 12px; color: var(--ink2, var(--ink));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.cx-toggle { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.cx-toggle:hover { border-color: var(--accent); }
.cx-head { border: 1px solid #b45309; border-left-width: 4px; background: rgba(180,83,9,.10);
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
.cx-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cx-item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.cx-foot { font-size: 12px; margin-top: 6px; }

/* 기간 선택 (이번/지난/지지난) — 탈퇴 탭·회원 증감 공통 */
.offset-sep { color: var(--line); margin: 0 2px; }
.offset-pick, .md-pick { display: inline-flex; gap: 4px; }
.offset-pick button, .md-pick button { background: transparent; color: var(--dim); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.offset-pick button:hover, .md-pick button:hover { color: var(--ink); }
.offset-pick button.active, .md-pick button.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.md-wk { margin-left: 6px; opacity: .7; }

/* 재적명단 정합성 경고 — 숫자가 조용히 낡는 걸 막는다 */
.roster-health { border: 1px solid #b45309; border-left-width: 4px; background: rgba(180, 83, 9, .10);
  border-radius: 8px; padding: 10px 14px; margin: 8px 0 4px; font-size: 13px; }
.rh-head { font-weight: 700; margin-bottom: 6px; }
.rh-list { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 3px; line-height: 1.55; }
.rh-foot { font-size: 12px; }

/* 면담 후속 미해결 항목 — 개수가 아니라 내용을 보여준다 */
.fu-list { display: grid; gap: 6px; margin: 4px 0 10px; }
.fu-item { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.5;
  background: var(--panel2); border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px; padding: 6px 10px; }
.fu-item.cont { border-left-color: #d97706; }
.fu-item.new  { border-left-color: var(--accent); }
.fu-kind { flex: none; font-size: 11px; font-weight: 700; opacity: .8; }
.fu-seq  { flex: none; font-size: 11px; color: var(--dim); }
.fu-text { flex: 1; white-space: pre-wrap; }
.fu-since { flex: none; font-size: 11px; color: var(--dim); }

/* 유형 카드 필터 시 다른 유형 행 — 숨기지 않고 흐리게만 (3종을 항상 함께 본다) */
.trainer-members tr.type-off { opacity: .42; }
.trainer-members tr.type-off:hover { opacity: 1; }

/* 수익화 완료 체크 — 트레이너별 명단 행 끝 버튼 */
.trainer-members td.td-act { width: 1%; white-space: nowrap; text-align: right; }
.monet-check { background: transparent; color: var(--dim); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; font: inherit; font-size: 11.5px; cursor: pointer; opacity: .55; transition: all .12s; }
.monet-check:hover { opacity: 1; color: #fff; background: var(--violet); border-color: var(--violet); }

/* 수익화 완료로 제외한 회원 — 되돌리기 패널 */
.monet-done-box { margin: 8px 0 4px; }
.monet-done-toggle { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.monet-done-toggle:hover { border-color: var(--violet); }
.monet-done-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.monet-done-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 10px; }
.monet-done-item button { background: transparent; color: var(--dim); border: 0; font: inherit; font-size: 11.5px;
  cursor: pointer; padding: 2px 6px; border-radius: 999px; }
.monet-done-item button:hover { color: #fff; background: var(--line); }

/* 자료실 검색·분류 필터·그룹 그리드 */
.res-catbar { margin-bottom: 8px; }
.res-search { margin-bottom: 12px; }
.res-search input { width: 100%; max-width: 340px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 13px; }
.res-group { margin-bottom: 16px; }
.res-group-h { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.res-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.res-card-top { display: flex; align-items: flex-start; gap: 6px; }
.res-card-top .res-link { flex: 1; font-weight: 600; }
.res-card .res-sub { font-size: 11px; word-break: break-all; }
.res-card .res-note { font-size: 12px; color: #cdd5e0; margin: 2px 0; }
.res-card .res-by { font-size: 10.5px; margin-top: 2px; }
.del.sm { font-size: 14px; line-height: 1; padding: 0 5px; color: var(--red); }

/* 반응형: 탭이 많아지면 좁은 화면에서 가로 스크롤 */
@media (max-width: 760px) {
  .viewswitch { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .viewswitch button { white-space: nowrap; flex: 0 0 auto; }
  .home-widget .hw-tile { flex-basis: 44%; }
}

/* 자료실 */
.res-upload { display: flex; gap: 16px; flex-wrap: wrap; }
.res-form { flex: 1 1 300px; display: flex; flex-direction: column; gap: 7px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.res-form-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.res-form input { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13px; }
.res-form button { background: var(--blue); color: #fff; border: none; border-radius: 7px; padding: 8px; font: inherit; cursor: pointer; }
.res-row { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.res-row:last-child { border-bottom: none; }
.res-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.res-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.res-link:hover { text-decoration: underline; }
.res-cat { font-size: 11px; background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; color: var(--dim); }
.res-note { font-size: 12.5px; color: #cdd5e0; margin: 3px 0; }
.res-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.res-meta .del { margin-left: auto; }

/* 교육관리 */
.edu-form .row { display: flex; gap: 8px; flex-wrap: wrap; }
.edu-form select, .edu-form input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; }
.edu-row { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; background: var(--panel2); overflow: hidden; }
.edu-row.done { opacity: .82; }
.edu-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; flex-wrap: wrap; }
.edu-head .tn { font-weight: 700; }
.edu-head .spacer { flex: 1; }
.edu-badge { font-size: 12px; color: var(--dim); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 1px 8px; }
.edu-st { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 5px; }
.edu-st.wait { color: #201400; background: var(--amber); }
.edu-st.ok { color: #04120a; background: var(--green); }
.edu-body { display: none; padding: 0 14px 14px; }
.edu-row.open .edu-body { display: block; }
.edu-cols { display: flex; gap: 18px; flex-wrap: wrap; }
.edu-input-col { flex: 1 1 320px; }
.edu-check-col { flex: 1 1 320px; border-left: 1px solid var(--line); padding-left: 18px; }
.edu-sub { font-size: 12px; font-weight: 700; color: var(--dim); margin: 12px 0 6px; }
.edu-cmt { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; padding: 4px 0; }
.edu-cmt-t { flex: 1; line-height: 1.5; }
.del.sm { font-size: 11px; padding: 0 6px; }
.dim.sm { font-size: 12px; }
.edu-cmt-form { display: flex; gap: 6px; margin-top: 6px; }
.edu-cmt-form input { flex: 1; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font: inherit; font-size: 12.5px; }
.edu-cmt-form button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 12.5px; }
.edu-check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 6px; background: var(--panel); }
.edu-check.on { border-color: var(--green); background: rgba(34,197,94,.08); }
.edu-check-stage { font-size: 11px; font-weight: 700; color: var(--dim); min-width: 24px; }
.edu-check-t { flex: 1; font-size: 13px; line-height: 1.45; }
.edu-check-memo { width: 110px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 4px 7px; font: inherit; font-size: 12px; }
.edu-final { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.edu-note { flex: 1 1 200px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; }
.edu-final button { background: var(--blue); color: #fff; border: none; border-radius: 7px; padding: 8px 14px; cursor: pointer; font: inherit; }
.edu-final button.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); }
.edu-final button.del { background: transparent; color: var(--red); border: 1px solid var(--line); }

/* 교육관리 재설계 (에센셜 개정안) */
.edu-crit-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.edu-crit-bar input { flex: 0 1 220px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; }
.edu-crit-title { font-weight: 700; margin-bottom: 8px; }
.crit-item { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 0; }
.crit-item span { flex: 1; line-height: 1.5; }
.edu-track-hint { font-size: 11.5px; margin-top: 6px; line-height: 1.5; }
.edu-track { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 5px; }
.edu-track.t3 { color: #04122a; background: #93c5fd; }
.edu-track.t2 { color: #201400; background: var(--amber); }
.edu-track.t1 { color: #fff; background: #64748b; }
.edu-stages { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.edu-res { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--dim); }
.edu-res.ok { color: #04120a; background: var(--green); border-color: var(--green); }
.edu-res.no { color: #fff; background: var(--red); border-color: var(--red); }
.edu-res.wait { color: var(--dim); }
.edu-stage { margin-bottom: 14px; }
.edu-by { margin-left: 6px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; width: 150px; }
.edu-stage-res { margin-top: 6px; font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.edu-resbtn { font-size: 12px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); cursor: pointer; font: inherit; }
.edu-resbtn.on { font-weight: 700; }
.edu-resbtn.on.ok { color: #04120a; background: var(--green); border-color: var(--green); }
.edu-resbtn.on.no { color: #fff; background: var(--red); border-color: var(--red); }
.edu-resbtn.on:not(.ok):not(.no) { color: var(--ink); border-color: var(--dim); }
.edu-focus { border: 1px solid var(--amber); background: rgba(245,158,11,.08); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.edu-focus-t { font-size: 12px; font-weight: 700; color: var(--amber); margin-bottom: 6px; }
.edu-focus-i { font-size: 12.5px; line-height: 1.6; padding: 2px 0; }
.edu-obs { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 6px 0; }
.edu-by-row { font-size: 12px; color: var(--dim); margin: 8px 0; display: flex; align-items: center; gap: 6px; }
.edu-by-row .edu-note { flex: 1; }
.iv-refresh-msg .warn { color: #201400; background: var(--amber); border-radius: 5px; padding: 1px 7px; margin-top: 4px; display: inline-block; font-size: 12px; }

/* 링크 설정 모달 */
.sheet-form .sheet-row { display: flex; flex-direction: column; gap: 4px; }
.sheet-form .sheet-team { font-size: 12px; color: var(--dim); font-weight: 700; }
.sheet-form .sheet-when { font-size: 11px; color: var(--dim); }
.sheet-hint { margin-top: 10px; font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.ivfilter button.ghost:hover { color: var(--ink); border-color: var(--dim); }

.iv-row { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; background: var(--panel2); overflow: hidden; }
.iv-row.risk-high { border-left: 3px solid var(--red); }
.iv-row.risk-mid { border-left: 3px solid var(--amber); }
.iv-row.risk-low { border-left: 3px solid var(--green); }
.iv-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; flex-wrap: wrap; }
.iv-head:hover { background: #20262f; }
.iv-head .tn { font-weight: 600; }
.iv-head .meta { color: var(--dim); font-size: 12px; }
.iv-head .spacer { flex: 1; }
.iv-head .sig-count { font-size: 11px; padding: 2px 9px; border-radius: 20px; color: var(--violet); border: 1px solid var(--violet); white-space: nowrap; }
.iv-head .st { font-size: 12px; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--line); }
.iv-head .st.정상 { color: var(--green); border-color: var(--green); }
.iv-head .st.주의 { color: var(--amber); border-color: var(--amber); }
.iv-head .st.보통 { color: var(--dim); }
.iv-head .st.위험 { color: var(--red); border-color: var(--red); }
.iv-head .fu { font-size: 12px; color: var(--amber); }
.iv-head .nodata { color: var(--dim); font-size: 12px; font-style: italic; }
.iv-body { display: none; padding: 4px 14px 14px; }
.iv-row.open .iv-body { display: block; }
.iv-summary { font-size: 13.5px; color: #cdd5e0; margin: 6px 0 12px; line-height: 1.6; white-space: pre-wrap; }
.iv-sub { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.iv-timeline { display: grid; gap: 6px; }
.iv-item { font-size: 13px; display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.iv-item .d { color: var(--dim); white-space: nowrap; min-width: 92px; }
.iv-item .ty { color: var(--blue); font-size: 11px; }
.fu-list { display: grid; gap: 6px; }
.fu-item { font-size: 13px; padding: 8px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
.fu-item .k { font-size: 11px; padding: 1px 7px; border-radius: 20px; margin-right: 7px; }
.fu-item .k.계속확인 { color: var(--amber); border: 1px solid var(--amber); }
.fu-item .k.신규 { color: var(--blue); border: 1px solid var(--blue); }
.src { font-size: 11px; color: var(--dim); margin-top: 8px; }

@media (max-width: 760px) { .board, .team-totals { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   UI 개편 (2026-07-30) — 센터장 지시 "색상·UI 다 바꿔줘"
   구조·기능은 건드리지 않는다. HTML·JS 그대로, 보이는 것만 다시 짠다.
   되돌리려면 이 커밋 하나만 revert하면 된다.
   ══════════════════════════════════════════════════════════════════ */

body { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
.t-title, .t-detail, .iv-summary, .fu-text, .cx-item, .monet-done-item { font-variant-numeric: normal; }
main { max-width: 1240px; }

/* ── 헤더 · 탭 ──────────────────────────────────────────────
   탭을 네모 버튼에서 '알약'으로 바꿨다. 9개가 나란히 있을 때 네모는 벽처럼 보인다. */
header {
  background: rgba(17,20,27,.82); backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line); padding: 14px 24px;
}
h1 { font-size: 18px; letter-spacing: -.02em; }
.viewswitch { gap: 4px; background: var(--panel2); padding: 4px; border-radius: 12px; border: 1px solid var(--line); }
.viewswitch button {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  padding: 6px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.viewswitch button:hover:not(.active) { background: rgba(255,255,255,.05); color: var(--ink); }
.viewswitch button.active {
  background: var(--accent); color: #fff; border-color: transparent; font-weight: 600;
  box-shadow: 0 2px 12px -2px rgba(109,124,255,.65);
}
.userbar .ghost, .ghost {
  background: transparent; border: 1px solid var(--line); color: var(--ink2);
  border-radius: var(--radius-xs); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ghost:hover { background: var(--panel2); color: var(--ink); border-color: #333b4a; }

/* ── 카드 ─────────────────────────────────────────────────
   테두리를 지우고 그림자와 배경 단계로 띄운다. 선이 사라지면 화면이 조용해진다. */
.card {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-1);
}
.card h2 { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 16px; color: var(--ink); }
.col h3 { font-size: 11px; letter-spacing: .1em; color: var(--dim); }

/* ── 버튼 ───────────────────────────────────────────────── */
.taskform button, .board button.primary, .modal-form button,
.acct-set button, .acct-create-form button, .login-card button[type="submit"] {
  background: var(--accent); border: none; border-radius: var(--radius-xs);
  font-weight: 600; transition: background .15s ease, transform .06s ease;
}
.taskform button:hover, .modal-form button:hover, .acct-set button:hover,
.acct-create-form button:hover, .login-card button[type="submit"]:hover { background: var(--accent-2); }
.taskform button:active, .ghost:active, .viewswitch button:active { transform: translateY(1px); }

/* ── 입력 ───────────────────────────────────────────────── */
.taskform input, .taskform textarea, .taskform select,
.modal-form input, .acct-set input, .acct-create-form input, .acct-create-form select,
.sig-search input, .iv-week, .login-card input, .login-card select {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-xs);
  color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }
::placeholder { color: #5f6878; }

/* ── 업무 카드 ─────────────────────────────────────────────
   왼쪽 색 막대를 3px→4px로 키우고 배경을 낮춰 색이 튀지 않게 */
.task { background: var(--panel2); border: 1px solid var(--line-soft); border-left: 4px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .15s ease; }
.task:hover { border-color: var(--line); }
.task.important { border-left-color: var(--amber); background: rgba(247,179,74,.07); }
.task.important.unreported { border-left-color: var(--red); background: rgba(255,107,115,.09); box-shadow: none; }
.task.done { border-left-color: var(--green); background: rgba(69,217,138,.07); }
.task.done .t-title { color: var(--green); }
.task .t-detail { color: var(--ink2); }
.task .actions button { border-radius: var(--radius-xs); border-color: var(--line); color: var(--ink2); }
.task .actions button:hover { color: var(--ink); border-color: #3a4356; background: var(--panel3); }
@keyframes flashDone { 0% { background: rgba(69,217,138,.35); } 100% { background: rgba(69,217,138,.07); } }

/* ── 칩 · 배지 ─────────────────────────────────────────────
   전부 알약 모양으로 통일하고, 색은 테두리+옅은 배경으로 (채운 색은 시끄럽다) */
.badge, .chip, .gbadge, .tag, .gap-days, .acct-flag { border-radius: 999px; font-weight: 600; }
.badge { border-color: var(--line); color: var(--ink2); padding: 3px 10px; }
.gbadge, .chip { padding: 3px 10px; background: transparent; background: color-mix(in srgb, var(--tc) 14%, transparent); }
.chip.chip-mono, .gbadge.chip-mono { background: var(--tc); color: #0d1017; font-weight: 700; }
.tag.new { background: var(--accent-soft); border-color: transparent; color: #a9b3ff; }
.gap-days { background: var(--panel3); border-color: var(--line); padding: 1px 9px; }
.gap-days.warn { color: #2a1c04; background: var(--amber); }

/* ── 유형 카드 (초기·멈춤·수익화) ───────────────────────────
   대시보드에서 가장 먼저 보는 곳. 숫자를 키우고 눌린 상태를 분명히 */
.typecards { gap: 10px; }
.typecard { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 16px; transition: background .15s ease, border-color .15s ease; }
.typecard:hover { background: var(--panel3); border-color: #333b4a; }
.typecard.on { background: var(--panel3); background: color-mix(in srgb, var(--tc) 12%, var(--panel2)); border-color: var(--tc); box-shadow: none; }
.typecard .tc-n { font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.typecard .tc-l { font-size: 12.5px; color: var(--ink2); }
.typecard .tc-dot { width: 8px; height: 8px; }

/* ── 팀 카드 ───────────────────────────────────────────── */
.team-card { background: var(--panel2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 16px 18px; box-shadow: var(--shadow-1); }
.team-card:hover { border-color: var(--line); }
.team-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.team-card .tname { font-size: 14px; letter-spacing: -.01em; }
.team-card .num b { font-size: 26px; letter-spacing: -.03em; }
.team-card .num span { color: var(--dim); }

/* ── 트레이너 행 · 면담 행 ─────────────────────────────── */
.trainer-row, .iv-row { background: var(--panel2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); margin-bottom: 8px; transition: border-color .15s ease; }
.trainer-row:hover, .iv-row:hover { border-color: var(--line); }
.trainer-row.open, .iv-row.open { border-color: #3a4356; }
.trainer-row.overload { border-color: rgba(255,107,115,.5); }
.trainer-head, .iv-head { padding: 12px 15px; }
.trainer-head:hover, .iv-head:hover { background: rgba(255,255,255,.03); }
.trainer-head .meta, .iv-head .meta { color: var(--dim); }
.goto-iv { background: var(--panel3); border-color: var(--line); color: var(--ink2); border-radius: 999px; }
.goto-iv:hover { border-color: var(--accent); color: var(--ink); }

/* ── 표 ───────────────────────────────────────────────── */
.trainer-members table { font-size: 13px; }
.trainer-members th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); font-weight: 700; padding: 8px; border-bottom: 1px solid var(--line); }
.trainer-members td { padding: 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink2); }
.trainer-members td:first-child { color: var(--ink); font-weight: 500; }
.trainer-members tbody tr:last-child td { border-bottom: 0; }
.trainer-members tbody tr:hover td { background: rgba(255,255,255,.03); }
tr.hit td { background: var(--accent-soft); }
tr.hit td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ── 진행바 ───────────────────────────────────────────── */
.team-progress .tp-bar, .cr-bar { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.team-progress .tp-bar span, .cr-bar span { border-radius: 999px; }

/* ── 경고·알림 블록 ───────────────────────────────────── */
.roster-health { background: rgba(247,179,74,.09); border-color: rgba(247,179,74,.5); border-radius: var(--radius-sm); }
.cx-head { background: rgba(247,179,74,.09); border-color: rgba(247,179,74,.5); border-radius: var(--radius-sm); }
.iv-refresh-msg { color: var(--ink2); }
.empty { color: var(--dim); }

/* ── 모달 · 로그인 ────────────────────────────────────── */
.modal { background: rgba(4,6,11,.7); backdrop-filter: blur(4px); }
.modal-card { border-color: var(--line); box-shadow: var(--shadow-2); border-radius: var(--radius); }
.login { background: radial-gradient(1100px 560px at 50% -12%, #1a1f3a, var(--bg)); }
.login-card { border-color: var(--line); box-shadow: var(--shadow-2); }

/* ── 스크롤바 · 선택 ──────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #333b4a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #333b4a; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #434d61; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(109,124,255,.35); }

/* ── 폰 ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  header { padding: 12px 14px; gap: 12px; }
  /* 375px 화면에서 탭 전체 폭은 879px인데 345px만 보인다 — 10개 중 6개가 화면 밖이다.
     스크롤바까지 숨겨 놔서(아래 height:0) 더 있다는 단서가 하나도 없었고, 둥근 모서리로
     깔끔하게 끝나 "여기까지가 전부"로 읽혔다 (2026-07-30 디자인팀 지적 → 브라우저 실측 확인).
     스크롤바는 계속 숨기되, 양 끝 그림자로 이어짐을 알린다. 그림자는 실제로 넘칠 때만
     보이고 끝까지 스크롤하면 사라진다(background-attachment: local 의 성질). */
  .viewswitch { flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    background-image:
      linear-gradient(to right, var(--panel2) 40%, rgba(0,0,0,0)),
      linear-gradient(to left,  var(--panel2) 40%, rgba(0,0,0,0)),
      linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,0)),
      linear-gradient(to left,  rgba(0,0,0,.45), rgba(0,0,0,0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll; }
  .viewswitch::-webkit-scrollbar { height: 0; }
  .viewswitch button { white-space: nowrap; }
  main { padding: 14px 12px; gap: 12px; }
  .card { padding: 14px 15px; border-radius: 12px; }
  .cadence-row { flex-wrap: wrap; }
  .trainer-members { overflow-x: auto; }
  .trainer-members table { min-width: 460px; }
}

/* 교육관리 — 주차 버튼바·평가자 라벨·참고 항목 (2026-07-30) */
.edu-weekbar { margin-bottom: 12px; }
.edu-weekbar button .dim { margin-left: 5px; font-size: 11px; opacity: .8; }
.edu-lbl { font-size: 12px; color: var(--dim); align-self: center; white-space: nowrap; }
.edu-refblk { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* 평가 생성 폼의 주차 선택 — 트레이너·평가자와 같은 드롭다운 (센터장 지시 2026-07-30) */
#eduWeek:disabled { opacity: .55; cursor: not-allowed; }
.edu-weekpick-hint { margin-top: 5px; }
.edu-weekpick-hint.warn { color: var(--amber, #f59e0b); font-weight: 600; }

/* 계정별 탭 권한 (2026-07-30) */
.acct-perm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 4px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 8px; font-size: 12.5px; }
.acct-permlbl { color: var(--dim); font-weight: 700; }
.acct-permchk { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.acct-permstate { font-size: 11.5px; color: var(--dim); margin-left: auto; }
.acct-permstate.custom { color: var(--accent); font-weight: 700; }
.temp-pw { font-size: 15px; letter-spacing: .04em; font-family: ui-monospace, monospace;
  background: var(--panel3, var(--panel2)); padding: 2px 7px; border-radius: 6px; }

/* 교육관리 평가 카드 — 「에센셜 0주차 시뮬레이션 평가표 v1」 구조 (2026-07-30) */
.ev-head { padding: 12px 14px; background: var(--panel2); border-radius: 10px; margin-bottom: 12px; }
.ev-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 10px; }
.ev-branch, .ev-verdict { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-lbl { font-size: 12px; color: var(--dim); font-weight: 700; margin-right: 4px; }
.edu-pill { background: var(--panel3, var(--panel2)); color: var(--ink2, var(--ink)); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.edu-pill:hover { border-color: var(--accent); }
.edu-pill.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.edu-pill.on.ok { background: var(--green); border-color: var(--green); }
.edu-pill.on.no { background: var(--red); border-color: var(--red); }
.edu-pill.sq { border-radius: 8px; min-width: 54px; padding: 9px 10px; text-align: center;
  font-size: 15px; font-weight: 800; letter-spacing: .02em; border-width: 2px; }
/* 미선택 상태에서도 O/X 를 색으로 구분해 한눈에 보이게 (센터장 지시 2026-07-30).
   반드시 :not(.on) 으로 한정한다 — 빼먹으면 이 규칙이 아래 .on 규칙보다 우선해서
   초록 배경에 초록 글자, 빨강 배경에 빨강 글자가 되어 눌린 O·X 가 안 보인다. */
.ev-item-s .edu-pill.sq:not(.on):nth-child(1) { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ev-item-s .edu-pill.sq:not(.on):nth-child(2) { color: var(--red);   border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.ev-item-s .edu-pill.sq:not(.on):nth-child(3) { color: var(--dim); }
.edu-pill.sq:hover { transform: translateY(-1px); }
/* 선택된 것만 채워지고, 나머지는 흐려져 대비가 생긴다 */
.ev-item-s:has(.on) .edu-pill.sq:not(.on) { opacity: .35; }
/* 눌린 버튼은 흰 글자 — 위 :nth-child 규칙을 확실히 넘도록 같은 자리에서 한정한다 */
.ev-item-s .edu-pill.sq.on { color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
/* 미입력 항목은 왼쪽에 표시를 둬서 빠진 걸 못 지나치게.
   참고(상황) 항목은 판정에 들어가지 않으므로 강조하지 않는다 — 안 그러면 경고가 상시 켜져 있다. */
.ev-stage:not(.ref) .ev-item:not(:has(.on)) { background: color-mix(in srgb, var(--amber, #f59e0b) 7%, transparent);
  border-left: 3px solid var(--amber, #f59e0b); padding-left: 8px; }

.ev-stage { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.ev-stage.ref { border-style: dashed; }
.ev-stage-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; }
.ev-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: start;
  padding: 9px 0; border-top: 1px solid var(--line); }
.ev-item:first-of-type { border-top: 0; }
.ev-item-t { font-size: 13.5px; line-height: 1.5; }
.ev-no { display: inline-block; min-width: 18px; font-weight: 800; color: var(--accent); }
.ev-item-s { display: flex; gap: 5px; }
.ev-memo { grid-column: 1 / -1; width: 100%; font-size: 12.5px; padding: 5px 8px; }
.ev-extra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-num { width: 66px; }
.ev-date { font-size: 12.5px; }
.ev-free { margin-top: 9px; }
.ev-free .ev-lbl { display: block; margin-bottom: 3px; }
.ev-free input { width: 100%; font-size: 13px; padding: 6px 9px; }
@media (max-width: 720px) { .ev-item { grid-template-columns: 1fr; } }

/* 확인 버튼 · 1차에서 불러온 항목 표식 (2026-07-30) */
.ev-confirm { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); text-align: right; }
.ev-ok { background: var(--accent); color: #fff; border: 0; border-radius: 9px;
  padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ev-ok:hover { filter: brightness(1.08); }
.ev-carried { margin-left: 7px; font-size: 11px; color: var(--accent); font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 5px; padding: 1px 5px; }

/* ── 교육생 관리 (2026-08-15, 2026-08-15 디자인 개편) ─────────
   신규 기수 온보딩 체크리스트. 주차별 표 + 과제 제출 링크.
   이 블록의 색은 전부 :root 변수를 쓴다 — 처음 붙였을 때 라이트모드 하드코딩 색이
   섞여 있어(#fff, #eef1f6 등) 어두운 대시보드 위에서 이 탭만 하얗게 떠 보였다. */
.tr-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.tr-add input, .tr-add select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13.5px; background: var(--panel2); color: var(--ink); }
.tr-add input[name=name] { min-width: 140px; }
.tr-add input[name=gisu] { width: 72px; }
/* [hidden]과 .tr-add{display:flex}가 부딪히면 작성자 스타일이 이겨서 폼이 항상 열려 보였다.
   센터장이 탭을 열자마자 '교육생 추가' 폼이 펼쳐진 채로 보이던 버그의 원인. */
.tr-add[hidden] { display: none; }

.tr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tr-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--panel2); transition: border-color .12s, box-shadow .12s, background .12s; }
.tr-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--panel3); }
.tr-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--panel3); }
/* 확인 대기가 있는 교육생 카드는 테두리로도 눈에 띄어야 한다 — 배지 하나로는 놓치기 쉬웠다 */
.tr-card.has-wait { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.tr-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.tr-top b { font-size: 15px; color: var(--ink); }
.tr-st { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px;
  background: var(--panel3); color: var(--dim); }
.tr-bar { height: 6px; border-radius: 4px; background: var(--panel3); overflow: hidden; }
.tr-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.tr-num { font-size: 12.5px; font-weight: 700; margin-top: 6px; color: var(--ink2); }

/* 주차 블록 — <details>로 접고 펼친다. 36행×4주가 한 번에 다 펼쳐져 있으면 스크롤이 너무 길어서,
   기본은 진행 중인 주차 + 확인 대기가 있는 주차만 열어둔다 (app.js 쪽 open 판정). */
.tr-week { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel2); }
.tr-week:first-of-type { margin-top: 16px; }
.tr-wh { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--panel3); font-size: 14px; cursor: pointer; list-style: none; }
.tr-wh::-webkit-details-marker { display: none; }
.tr-wh-l { display: flex; align-items: baseline; gap: 8px; }
.tr-wh-r { display: flex; align-items: center; gap: 8px; }
.tr-chev { color: var(--dim); font-size: 11px; transition: transform .15s ease; }
.tr-week[open] .tr-chev { transform: rotate(90deg); }
.tr-table { width: 100%; border-collapse: collapse; }
.tr-table th { background: var(--panel2); border: 1px solid var(--line); border-top: 0;
  padding: 7px 10px; text-align: left; font-size: 11.5px; color: var(--dim); font-weight: 700; }
.tr-table td { border: 1px solid var(--line); padding: 9px 12px; font-size: 13.5px; vertical-align: top; color: var(--ink2); }
/* 확인완료는 소거가 아니라 성취다 — 취소선 대신 왼쪽 초록 표시 + 체크(✓)만 (2026-08-15) */
.tr-table tr.is-done td { background: color-mix(in srgb, var(--green) 7%, transparent); }
.tr-table tr.is-done td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.tr-table tr.is-done .tr-title { color: var(--ink2); }
.tr-table tr.is-rej td { background: color-mix(in srgb, var(--red) 6%, transparent); }
.tr-table tr.is-rej td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.c-st { width: 84px; }
.c-dv { width: 86px; }
.c-du { width: 100px; white-space: nowrap; font-weight: 600; }
.c-lk { width: 30%; }
.tr-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.tr-tag.common { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.tr-tag.edu { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tr-tag.train { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet); }
.tr-title { display: block; font-weight: 600; color: var(--ink); }
.tr-note { display: block; font-size: 12px; color: var(--dim); margin-top: 3px; }
.tr-when { display: block; font-size: 11px; color: var(--dim); margin-top: 3px; }
.tr-url { width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; background: var(--panel2); color: var(--ink); }
.tr-open { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--accent); }

/* 교육생 제출 상태 (2026-08-15) — 미제출 → 확인대기 → 확인완료 / 반려
   클래스명은 tr-chip. 센터장 탭이 이미 .chip(알약형 배지)을 쓰고 있어서, 여기서 같은 이름을
   다시 정의하면 그쪽 배지의 모양이 바뀌어 버린다 — 반드시 tr- 접두사를 쓴다. */
.tr-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.tr-chip.none { background: var(--panel3); color: var(--dim); }
.tr-chip.wait { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
.tr-chip.ok   { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.tr-chip.rej  { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.tr-lkrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tr-lkrow .tr-url { flex: 1; min-width: 120px; }
.tr-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tr-btn.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.tr-btn.ok { background: var(--green); border-color: var(--green); color: #0d1017; }
.tr-btn.no { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); }
.tr-btn.undo { color: var(--dim); }
.tr-btn:hover { filter: brightness(1.08); }
.tr-rev { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tr-rnote { display: block; font-size: 11.5px; color: var(--red); margin-top: 4px; }
.tr-wait { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
.tr-rej { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }

/* 모바일 — 교육생 본인이 폰으로 링크를 붙여넣는 경우가 많다. 가로 스크롤 표 대신
   한 업무 항목이 카드 한 장이 되도록 쌓는다 (2026-08-15). */
@media (max-width: 720px) {
  .tr-table thead { display: none; }
  .tr-table, .tr-table tbody, .tr-table tr { display: block; width: 100%; }
  .tr-table tr { border: 1px solid var(--line); border-radius: 10px; margin: 10px; overflow: hidden; }
  .tr-week { padding-bottom: 2px; }
  .tr-table td { display: flex; gap: 10px; align-items: flex-start; border: none;
    border-bottom: 1px solid var(--line-soft); padding: 9px 12px; width: auto !important; }
  .tr-table td:last-child { border-bottom: 0; }
  .tr-table td::before { content: attr(data-label); flex: 0 0 64px; color: var(--dim);
    font-size: 11px; font-weight: 700; padding-top: 3px; }
  .tr-table td.c-lk { display: block; }
  .tr-table td.c-lk::before { display: block; margin-bottom: 6px; }
}