/* ─────────────────────────────────────────────────────────────────────────────
   skillbridge.css — SkillBridge 전용 화면 조각.
   공통 셸·카드·표는 base.css/platform.css 를 그대로 쓰고, 여기에는 이 제품에만
   있는 것(5축 레이더 · 증빙 체인 · 3단 검수 보드 · 기수 카드)만 둔다.
   4px 리듬: 모든 padding · margin · gap 은 4px 배수. 인라인 style 속성 0건.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 폭 유틸(pw-*) — 데이터에 따라 달라지는 폭을 인라인 style 없이 준다 ────── */
.pw-0 { width: 0; }
.pw-4 { width: 4%; }
.pw-8 { width: 8%; }
.pw-12 { width: 12%; }
.pw-16 { width: 16%; }
.pw-20 { width: 20%; }
.pw-24 { width: 24%; }
.pw-28 { width: 28%; }
.pw-32 { width: 32%; }
.pw-36 { width: 36%; }
.pw-40 { width: 40%; }
.pw-44 { width: 44%; }
.pw-48 { width: 48%; }
.pw-52 { width: 52%; }
.pw-56 { width: 56%; }
.pw-60 { width: 60%; }
.pw-64 { width: 64%; }
.pw-68 { width: 68%; }
.pw-72 { width: 72%; }
.pw-76 { width: 76%; }
.pw-80 { width: 80%; }
.pw-84 { width: 84%; }
.pw-88 { width: 88%; }
.pw-92 { width: 92%; }
.pw-96 { width: 96%; }
.pw-100 { width: 100%; }

/* ── 언어 전환 ─────────────────────────────────────────────────────────────── */
.langswitch { height: 32px; }
.langswitch button { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ── 5축 레이더 ────────────────────────────────────────────────────────────── */
.radarwrap {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
}
.radar { width: 100%; height: auto; display: block; }
.radar__ring { fill: none; stroke: var(--line); stroke-width: 1; }
.radar__spoke { stroke: var(--line); stroke-width: 1; }
.radar__area {
  fill: rgba(127, 166, 255, 0.16);
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.radar__dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }
.radar__label { fill: var(--text-2); font-size: 11px; font-family: var(--font-ui); }
.radar__score {
  fill: var(--text); font-size: 13px; font-weight: 500;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}

.u-inline { display: inline; }
.row__right small.u-inline { display: inline; margin-left: var(--s1); margin-top: 0; }

.axisrows { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.axisrow {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 32px 64px;
  align-items: center;
  gap: var(--s3);
  font-size: 12px;
}
.axisrow__name { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axisrow__bar {
  display: block; height: 6px; border-radius: 3px;
  background: var(--surface-3); overflow: hidden;
}
.axisrow__fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.axisrow__value { text-align: right; color: var(--text); font-size: 12px; }
.axisrow__meta { color: var(--text-3); text-align: right; white-space: nowrap; }

.pipeline-mini { display: flex; flex-direction: column; gap: var(--s3); }
.pipeline-mini__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 120px 176px;
  align-items: center;
  gap: var(--s3);
  font-size: 12px;
}
.pipeline-mini__idx {
  font-family: var(--font-num); color: var(--text-3); font-size: 11px;
}
.pipeline-mini__name { color: var(--text-2); }
.pipeline-mini__bar { display: block; }
.segbar {
  display: flex; width: 100%; height: 6px; border-radius: 3px;
  background: var(--surface-3); overflow: hidden;
}
.segbar__wait { display: block; height: 100%; background: var(--surface-3); }
.segbar__run { display: block; height: 100%; background: var(--warn); }
.segbar__ok { display: block; height: 100%; background: var(--pos); }
.pipeline-mini__meta { color: var(--text-3); text-align: right; white-space: nowrap; }

/* ── 3단 검수 보드 ─────────────────────────────────────────────────────────── */
.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: start;
}
.board__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  min-width: 0;
}
.board__head {
  display: flex; align-items: center; gap: var(--s2);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s3);
}
.board__idx { font-family: var(--font-num); font-size: 11px; color: var(--text-3); }
.board__title { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); flex: 1; }
.board__count {
  font-family: var(--font-num); font-size: 11px; color: var(--text-2);
  background: var(--surface-3); border-radius: var(--r-sm);
  padding: 0 var(--s2); height: 20px; display: inline-flex; align-items: center;
}
.board__list { display: flex; flex-direction: column; gap: var(--s3); }
.board__card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s3);
}
.board__card-title {
  margin: 0 0 var(--s1); font-size: 13px; line-height: 20px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board__card-meta { margin: 0 0 var(--s3); font-size: 11px; color: var(--text-3); }
.board__card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.board__actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.board__note { margin: var(--s2) 0 0; font-size: 11px; color: var(--text-3); }
.board__more { margin: var(--s3) 0 0; font-size: 11px; color: var(--text-3); text-align: center; }

/* ── 증빙 체인 · DAG 단계 ──────────────────────────────────────────────────── */
.chain {
  display: flex; align-items: stretch; gap: var(--s1);
  padding: var(--s3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.chain__node {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s1);
  padding: var(--s2) 0; border-radius: var(--r-sm);
  color: var(--text-3); border: 1px solid transparent; min-width: 44px;
}
.chain__node.is-on { color: var(--text); border-color: var(--line-strong); background: var(--surface-3); }
.chain__ref {
  font-family: var(--font-num); font-size: 11px; letter-spacing: 0.04em;
}
.chain__label { font-size: 10px; white-space: nowrap; }
.chain__count { font-family: var(--font-num); font-size: 13px; color: var(--text-2); }
.chain__link { align-self: center; width: 8px; height: 1px; background: var(--line-strong); flex: none; }

.stages {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2); margin-top: var(--s4);
}
.stages__item {
  display: flex; align-items: center; gap: var(--s1);
  padding: var(--s1) var(--s2); border-radius: var(--r-sm);
  border: 1px solid var(--line); font-size: 10px; color: var(--text-3);
}
.stages__item.is-done { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
.stages__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-3); flex: none;
}
.stages__item.is-done .stages__dot { background: var(--pos); }
.stages__name { line-height: 16px; }

.evlist { display: flex; flex-direction: column; }
.evrow {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 64px;
  gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s1); border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.evrow:last-child { border-bottom: 0; }
.evrow__ref { font-family: var(--font-num); color: var(--text-3); font-size: 11px; }
.evrow__body { min-width: 0; }
.evrow__title { display: block; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evrow__meta { display: block; margin-top: var(--s1); color: var(--text-3); font-size: 11px; }
.evrow__meta .pill { margin-right: var(--s1); }
.evrow__sep { margin: 0 var(--s1); }
.evrow__state { text-align: right; }

.sheet__h {
  margin: var(--s6) 0 var(--s3);
  font-size: 12px; font-weight: 500; color: var(--text-3);
  letter-spacing: 0.04em; text-transform: none;
}
.sheet__h:first-child { margin-top: 0; }
.bullets { margin: 0; padding-left: var(--s5); color: var(--text-2); font-size: 13px; line-height: 24px; }
.doc-body {
  margin: 0; padding: var(--s4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  font: 400 12px/20px var(--font-num); color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}
.reporthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}

/* ── 기수 카드 ─────────────────────────────────────────────────────────────── */
.cohorts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
}
.cohort {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.cohort:hover { border-color: var(--line-strong); background: var(--surface-2); }
.cohort.is-selected { border-color: var(--accent); }
.cohort__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.cohort__name { font-size: 13px; color: var(--text); line-height: 20px; }
.cohort__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cohort__meta { margin: var(--s2) 0 var(--s3); font-size: 11px; color: var(--text-3); }
.cohort__bar { margin-bottom: var(--s2); }
.cohort__foot {
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: 11px; color: var(--text-3); font-family: var(--font-num);
}

/* ── 매칭 ──────────────────────────────────────────────────────────────────── */
.matchrow { text-decoration: none; }
.matchrow.is-selected { background: var(--surface-2); }
.matchactions { display: inline-flex; gap: var(--s2); }
.kv-flow {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s3); font-size: 12px; color: var(--text-3);
}

/* ── 반응형 ────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .radarwrap { grid-template-columns: 240px minmax(0, 1fr); }
  .board { grid-template-columns: minmax(0, 1fr); }
  .board__col { padding: var(--s4); }
}

@media (max-width: 900px) {
  .radarwrap { grid-template-columns: minmax(0, 1fr); }
  .pipeline-mini__row { grid-template-columns: 20px minmax(0, 1fr) 72px; }
  .pipeline-mini__meta { grid-column: 2 / -1; text-align: left; }
  .chain { overflow-x: auto; }
  .chain__node { min-width: 64px; }
}

@media (max-width: 640px) {
  .axisrow { grid-template-columns: 72px minmax(0, 1fr) 28px; }
  .axisrow__meta { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evrow { grid-template-columns: 44px minmax(0, 1fr); }
  .evrow__state { grid-column: 2 / -1; text-align: left; }
}