/* =========================================================
   View Mode Switch — 공통역량평가 진입 시 칸반 UI 숨김
   (milestone.css 의 view-mode-milestone 패턴과 동일)
   ========================================================= */
#mainBoardContent.view-mode-common-competency > .top-app-bar,
#mainBoardContent.view-mode-common-competency > .progress-section,
#mainBoardContent.view-mode-common-competency > .input-area-wrapper,
#mainBoardContent.view-mode-common-competency > .board {
  display: none !important;
}

#commonCompetencyBoard {
  display: none;
  position: absolute;
  inset: 0 0 24px 0;
  z-index: 24;
  padding: 0;                 /* 상단 패딩 제거 → 제목 세로 위치 칸반과 동일(top ~27px) */
  box-sizing: border-box;
  background: var(--lobby-rd-bg, #f5f7fa);
  overflow: hidden;
}

/* 헤더·탭·본문을 칸반과 동일한 frame-width(1600 상한) 중앙정렬 → 제목 시작 위치 칸반과 일치 */
#commonCompetencyBoard .cce-shell {
  /* 로비 기준 풀폭. 1600 프레임 중앙정렬 제거 → 거터는 내부 --app-gutter 패딩이 담당 */
  width: 100%;
  margin: 0;
}
/* shell이 이미 frame이라 header-main은 frame 재적용 없이 꽉 채움(이중 중앙정렬 방지).
   라이브에서 header-main이 width:100%를 무시하고 내용물 폭(1552)으로 줄어드는 현상 확인됨
   (specificity (0,1,2,0) normal 룰로도 안 이기고 !important만 1600으로 채움 — 출처 미상의 고-specificity 룰).
   → 검색/필터 바 오른쪽 끝을 본문 우단(프레임 1600)과 정렬하기 위해 !important로 프레임 폭 강제. */
#commonCompetencyBoard .header-main {
  width: 100% !important;
  max-width: 100%;
  margin: 0;
  /* 검색/필터 바 우측 끝을 카드 우단과 정렬(거터 = --app-gutter 로비 기준) */
  padding-right: var(--app-gutter, 24px);
  box-sizing: border-box;
}

#commonCompetencyBoard .cce-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;   /* 헤더↔콘텐츠 간격 = 칸반·현황관리 20px 리듬 통일 */
}

/* 헤더 하단 패딩 제거 → 헤더↔첫 평가그룹 = cce-shell gap 20만 = 그룹간 20과 일치.
   ⚠️ board-redesign의 `#mainBoardContent:not(milestone):not(operations) .top-app-bar{padding:26px 0 20px}`
   (specificity 1,3,0)가 cce-topbar에도 적용되어 padding-bottom 20을 강제함(cce는 그 :not 제외목록에 없음).
   그걸 이기려면 !important 필요. 상단 패딩(제목 세로위치 26)은 board-redesign 값 유지. */
#commonCompetencyBoard .cce-topbar { padding-bottom: 0 !important; }

#commonCompetencyBoard .cce-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0;
  /* 세로 스크롤바를 숨겨(스크롤 동작은 유지) 스크롤바 폭만큼의 우측 잠식 제거
     → 본문 카드 우단을 검색창 끝(프레임 우단)과 수직 정렬 */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* legacy Edge/IE */
}
#commonCompetencyBoard .cce-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;                       /* Chrome/Edge/Safari — 폭 0 (작동은 유지) */
}

#commonCompetencyBoard .num {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   헤더 높이 = 칸반보드와 100% 동일 (상단 제목영역 + 검색/필터 바)
   렌더 마크업은 칸반 클래스(.title-edit / .editable-title /
   .integrated-control-bar 등)를 그대로 쓰지만, #commonCompetencyBoard 는
   #mainBoardContent 밖이라 board-redesign.css 의 헤더 스코프가 닿지 않음
   → desktop.css 의 옛 알약(height:42px·radius:100px·title 28px) 폴백을 차단하고
     board-redesign.css 와 동일한 높이 결정 속성을 그대로 복제한다.
   ========================================================= */
#commonCompetencyBoard .title-zone {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1 1 auto;
  padding-left: var(--board-title-left-pad, 22px);
}
#commonCompetencyBoard .title-edit {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: 42px;                 /* 칸반 제목 컨테이너 높이 */
  padding: 0 12px;
  margin-right: -12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#commonCompetencyBoard .editable-title {
  display: block;
  width: var(--board-title-w, 320px);
  min-width: 0;
  max-width: var(--board-title-safe-max, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 26px;              /* desktop.css 28px → 칸반 26px */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 42px;           /* 제목 라인박스 = 컨테이너 높이 */
  color: var(--lobby-rd-text, #11151c);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  caret-color: var(--lobby-rd-primary, #0061a4);
}
#commonCompetencyBoard .editable-title::placeholder { color: var(--lobby-rd-text-soft, #94a3b8); }
#commonCompetencyBoard .editable-title[readonly] {
  pointer-events: none;
  caret-color: transparent;
}
/* 편집 모드 진입 시 입력박스 활성 테두리 (칸반 동일) */
#commonCompetencyBoard .title-edit.is-editing {
  background: var(--lobby-rd-surface, #ffffff);
  border-color: var(--lobby-rd-primary, #0061a4);
  box-shadow: 0 0 0 4px var(--lobby-rd-ring, rgba(0, 97, 164, 0.12));
  margin-right: 0;
  cursor: text;
}
#commonCompetencyBoard .title-edit.is-editing .editable-title {
  min-width: 200px;
  pointer-events: auto;
  caret-color: var(--lobby-rd-primary, #0061a4);
}
/* 연필 버튼 — hover 시 노출, 편집 중엔 숨김 (칸반 동일) */
#commonCompetencyBoard .title-edit-pen {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  padding: 0;
  flex: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--lobby-rd-text-soft, #94a3b8);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#commonCompetencyBoard .title-zone:hover .title-edit-pen { opacity: 1; }
#commonCompetencyBoard .title-edit-pen:hover,
#commonCompetencyBoard .title-edit-pen:focus-visible {
  background: var(--lobby-rd-surface-alt, #f8fafc);
  border-color: var(--lobby-rd-border-strong, #dfe4ec);
  color: var(--lobby-rd-primary, #0061a4);
  opacity: 1;
}
#commonCompetencyBoard .title-edit-pen:focus-visible { outline: none; }
#commonCompetencyBoard .title-zone.is-editing .title-edit-pen { display: none; }
/* 저장/취소 그룹 — 편집 중에만 노출 (칸반 동일) */
#commonCompetencyBoard .title-save-group {
  display: none;
  gap: 8px;
  margin-left: 16px;
  flex: none;
  white-space: nowrap;
}
#commonCompetencyBoard .title-zone.is-editing .title-save-group { display: inline-flex; }
#commonCompetencyBoard .title-s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  flex: none;
  border: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 8px;
  background: var(--lobby-rd-surface, #ffffff);
  color: var(--lobby-rd-text-muted, #51606f);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#commonCompetencyBoard .title-s-btn.save {
  border-color: var(--lobby-rd-primary, #0061a4);
  background: var(--lobby-rd-primary, #0061a4);
  color: var(--md-sys-color-on-primary, #ffffff);
}
#commonCompetencyBoard .title-s-btn:hover,
#commonCompetencyBoard .title-s-btn:focus-visible {
  border-color: var(--lobby-rd-border-strong, #dfe4ec);
  box-shadow: 0 0 0 4px var(--lobby-rd-ring, rgba(0, 97, 164, 0.12));
  outline: none;
}
#commonCompetencyBoard .title-s-btn.save:hover,
#commonCompetencyBoard .title-s-btn.save:focus-visible {
  border-color: var(--lobby-rd-primary, #0061a4);
  background: var(--lobby-rd-primary-strong, #004e87);
}
#commonCompetencyBoard .integrated-control-bar {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  height: auto;                /* desktop.css 고정 42px 해제 */
  min-height: 44px;            /* 칸반 컨트롤 바 높이 */
  margin-left: auto;
  padding: 5px 10px;           /* 칸반과 동일 */
  border: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 12px;         /* 알약 100px → 칸반 12px */
  background: var(--lobby-rd-surface, #ffffff);   /* 필터 컨트롤 바 = 흰색(V2 통일) */
  box-shadow: inset 0 1px 0 var(--lobby-rd-surface, #ffffff);
  flex-wrap: nowrap;
}
#commonCompetencyBoard .integrated-control-bar:hover {
  border-color: var(--lobby-rd-ring-strong, #c3ccd9);
}
/* 칸반(board-redesign)과 동일: 포커스 시 파란 ring 제거, hover와 같은 은은한 회색 테두리만
   → 활성화돼도 섹션이 확장되어 움직이는 인상이 없도록 (봉길님 2026-06-20) */
#commonCompetencyBoard .integrated-control-bar:focus-within {
  border-color: var(--lobby-rd-ring-strong, #c3ccd9);
  box-shadow: inset 0 1px 0 var(--lobby-rd-surface, #ffffff);
}
#commonCompetencyBoard .integrated-control-bar > svg {
  flex: none;
  color: var(--lobby-rd-text-soft, #94a3b8);
}
/* 탭 폰트/굵기는 칸반(board-redesign .my-task-btn = 12px/700 고정, 활성은 색만)을 그대로 상속.
   기존 cce 전용 룰(13px/500 → 활성 600)은 클릭 시 글자 굵기가 변해 폭이 밀리는 "움직임"의 원인이라 제거
   (봉길님 2026-06-20: [인사팀] 칸반처럼 활성화돼도 안 움직이게, 검색필터 UI는 제품 표준으로). */
/* 비관리자: Settings/Results 버튼 보이되 비활성(클릭 불가) */
#commonCompetencyBoard .integrated-control-bar .my-task-btn[data-cce-tab]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
#commonCompetencyBoard .integrated-control-bar :is(.my-task-btn[data-cce-tab], .filter-wrapper, .filter-wrapper span, .search-input) {
  line-height: 1;
}
#commonCompetencyBoard .integrated-control-bar .filter-wrapper span {
  display: inline-flex;
  align-items: center;
}
#commonCompetencyBoard .search-input {
  flex: 1 1 118px;
  min-width: 48px;
  margin-left: 8px;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--lobby-rd-text, #11151c);
  font-size: 13px;
  line-height: 1.35;
}
#commonCompetencyBoard .bar-divider {
  width: 1px;
  height: 18px;
  margin: 0 10px;
  flex: none;
  opacity: 1;
  background: var(--lobby-rd-border-strong, #dfe4ec);
}
#commonCompetencyBoard .filter-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--lobby-rd-text-muted, #51606f);
  font-size: 13px;
  font-weight: 500;   /* 필터 라벨 = 보조정보, 600→500 가볍게(위계는 색으로). 컨트롤바 텍스트 통일 */
  white-space: nowrap;
}
#commonCompetencyBoard button.filter-wrapper {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
#commonCompetencyBoard .filter-wrapper:hover,
#commonCompetencyBoard .cce-filter.is-open .filter-wrapper {
  background: var(--lobby-rd-primary-soft, rgba(0, 97, 164, 0.08));
  color: var(--lobby-rd-primary, #0061a4);
}
#commonCompetencyBoard .cce-filter {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
}
#commonCompetencyBoard .cce-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  display: none;
  min-width: 178px;
  max-height: 300px;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 12px;
  background: var(--lobby-rd-surface, #ffffff);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 32px -12px rgba(16, 32, 64, 0.22);
}
#commonCompetencyBoard .cce-filter.is-open .cce-filter-menu {
  display: block;
}
#commonCompetencyBoard .cce-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lobby-rd-text-muted, #51606f);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
#commonCompetencyBoard .cce-filter-item:hover,
#commonCompetencyBoard .cce-filter-item.is-selected {
  background: var(--lobby-rd-primary-soft, rgba(0, 97, 164, 0.08));
  color: var(--lobby-rd-primary, #0061a4);
}
#commonCompetencyBoard .cce-filter-item .menu-check {
  flex: none;
  opacity: 0;
}
#commonCompetencyBoard .cce-filter-item.is-selected .menu-check {
  opacity: 1;
}
/* board-redesign의 `#mainBoardContent ... :is(input,button){font:inherit}`(2 id)가 메뉴 항목 폰트를
   상속값으로 덮어쓰는 함정 → 2-id specificity로 제품 톤(13px/500) 재고정. (.cce-vbtn과 동일 패턴) */
#mainBoardContent #commonCompetencyBoard .cce-filter-item,
#mainBoardContent #commonCompetencyBoard .cce-filter-item span {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
#commonCompetencyBoard .my-task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--lobby-rd-text-muted, #51606f);
  font-size: 12px;
  font-weight: 500;   /* 컨트롤바 텍스트 통일(700→500, 필터 라벨과 동일 톤) */
  line-height: 1;
  white-space: nowrap;
}
#commonCompetencyBoard .my-task-btn.active {
  background: var(--lobby-rd-primary-soft, rgba(0, 97, 164, 0.08));
  color: var(--lobby-rd-primary, #0061a4);
  box-shadow: inset 0 0 0 1px rgba(0, 97, 164, 0.06);
}
#commonCompetencyBoard .icon-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  transform: none;             /* desktop.css translateY(-3px) 해제 */
}
#commonCompetencyBoard .icon-group .icon-btn:last-child { top: auto; }

/* 헤더 = 칸반 글로벌 헤더 톤 답습 (title-zone + 메타 pill, --lobby-rd-* 토큰) */
#commonCompetencyBoard .cce-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 2px 6px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
}

#commonCompetencyBoard .cce-title-zone {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1 1 auto;
}

#commonCompetencyBoard .cce-proj-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: none;
  background: var(--lobby-rd-primary-2, #2d8fe6);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lobby-rd-primary-2, #2d8fe6) 13%, transparent);
}

#commonCompetencyBoard .cce-eyebrow {
  margin: 0 0 8px;
  color: var(--md-sys-color-primary, #0061a4);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#commonCompetencyBoard .cce-title {
  margin: 0;
  color: var(--lobby-rd-text, #11151c);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#commonCompetencyBoard .cce-title-input {
  flex: 0 1 auto;
  min-width: 120px;
  max-width: min(46vw, 560px);
  margin: 0;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--lobby-rd-text, #11151c);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  outline: none;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#commonCompetencyBoard .cce-title-input:hover:not([readonly]) {
  background: var(--lobby-rd-surface-alt, #f8fafc);
}

#commonCompetencyBoard .cce-title-input:focus {
  background: var(--lobby-rd-surface, #ffffff);
  border-color: var(--lobby-rd-primary, #0061a4);
  box-shadow: 0 0 0 3px var(--lobby-rd-ring, rgba(0, 97, 164, 0.12));
}

#commonCompetencyBoard .cce-title-input[readonly] { cursor: default; }

#commonCompetencyBoard .cce-meta-status {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lobby-rd-primary-soft, rgba(0, 97, 164, 0.08));
  color: var(--lobby-rd-primary, #0061a4);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#commonCompetencyBoard .cce-control-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 320px;
  min-width: 0;
  margin-left: auto;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 12px;
  background: var(--lobby-rd-surface-alt, #f8fafc);
  box-shadow: inset 0 1px 0 var(--lobby-rd-surface, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#commonCompetencyBoard .cce-control-bar:focus-within {
  border-color: var(--lobby-rd-primary, #0061a4);
  box-shadow: inset 0 1px 0 var(--lobby-rd-surface, #ffffff), 0 0 0 4px var(--lobby-rd-ring, rgba(0, 97, 164, 0.12));
}

#commonCompetencyBoard .cce-control-bar > svg {
  flex: none;
  color: var(--lobby-rd-text-soft, #94a3b8);
}

#commonCompetencyBoard .cce-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--lobby-rd-text, #11151c);
  font-size: 13px;
  line-height: 1.35;
}

#commonCompetencyBoard .cce-search-input::placeholder { color: var(--lobby-rd-text-soft, #94a3b8); }

#commonCompetencyBoard .cce-section {
  display: flex;
  flex-direction: column;
  gap: 20px;   /* 섹션 제목↔그룹그리드 간격 = 20px 리듬 통일 */
}

#commonCompetencyBoard .cce-groups {
  /* 좌우 거터 = --app-gutter(로비 기준). 카드 좌/우 여백 동일, 검색바 우단과 정렬 */
  /* 하단(스크롤 끝) 20 = 칸반·현황관리 20px 리듬 통일 */
  padding: 0 var(--app-gutter, 24px) 20px var(--app-gutter, 24px);
  gap: 0;
}

#commonCompetencyBoard .cce-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#commonCompetencyBoard .cce-section-title {
  margin: 0;
  color: var(--md-sys-color-on-surface, #0f172a);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

#commonCompetencyBoard .cce-section-note {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant, #64748b);
  font-size: 13px;
}

#commonCompetencyBoard .cce-card {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 40px -34px rgba(15, 23, 42, 0.42);
}

#commonCompetencyBoard .cce-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;   /* 그룹 카드 간격 = 20px 리듬 통일(현황관리 섹션 카드와 동급) */
}

#commonCompetencyBoard .cce-group-card {
  padding: 18px;
}

#commonCompetencyBoard .cce-group-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#commonCompetencyBoard .cce-group-name {
  margin: 0;
  color: var(--md-sys-color-on-surface, #0f172a);
  font-size: 16px;
  font-weight: 800;
}

#commonCompetencyBoard .cce-group-meta {
  margin: 4px 0 0;
  color: var(--md-sys-color-on-surface-variant, #64748b);
  font-size: 12px;
}

#commonCompetencyBoard .cce-grade-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#commonCompetencyBoard .cce-grade-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-low, #f8fafc);
  color: var(--md-sys-color-on-surface, #0f172a);
  font-size: 12px;
  font-weight: 700;
}

#commonCompetencyBoard .cce-grade-pill.is-custom {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

#commonCompetencyBoard .cce-grade-pill.is-unlimited {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

#commonCompetencyBoard .cce-grade-pill.is-over {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

#commonCompetencyBoard .cce-grade-pill.is-under {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
}

#commonCompetencyBoard .cce-grade-pill em {
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-table-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#commonCompetencyBoard .cce-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 12px;
}

#commonCompetencyBoard .cce-table-wrap {
  overflow: auto;
  padding: 0 8px 8px;
}

#commonCompetencyBoard .cce-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
}

#commonCompetencyBoard .cce-table.wide {
  min-width: 1420px;
}

#commonCompetencyBoard .cce-manage-table {
  min-width: 1280px;
}

#commonCompetencyBoard .cce-second-table {
  min-width: 1720px;
}

#commonCompetencyBoard .cce-table th,
#commonCompetencyBoard .cce-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}

#commonCompetencyBoard .cce-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248, 250, 252, 0.98);
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#commonCompetencyBoard .cce-table tbody tr:hover td {
  background: rgba(248, 250, 252, 0.92);
}

#commonCompetencyBoard .cce-table tbody tr.is-excluded td {
  background: rgba(100, 116, 139, 0.05);
  color: #64748b;
}

#commonCompetencyBoard .cce-table tbody tr.needs-reason td {
  background: rgba(254, 242, 242, 0.72);
}

#commonCompetencyBoard .cce-table tbody tr.needs-feedback td {
  background: rgba(239, 246, 255, 0.62);
}

#commonCompetencyBoard .cce-table tbody tr.has-step-warning td {
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.85);
}

#commonCompetencyBoard .cce-table tbody tr:last-child td {
  border-bottom: none;
}

#commonCompetencyBoard .cce-text-muted {
  color: var(--md-sys-color-on-surface-variant, #64748b);
}

#commonCompetencyBoard .cce-subtext {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

#commonCompetencyBoard .cce-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

#commonCompetencyBoard .cce-status-badge.target {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

#commonCompetencyBoard .cce-status-badge.excluded {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

#commonCompetencyBoard .cce-link-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--md-sys-color-primary, #0061a4);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

#commonCompetencyBoard .cce-link-button:hover {
  text-decoration: underline;
}

#commonCompetencyBoard .cce-target-section {
  padding: 0 14px 16px;
}

#commonCompetencyBoard .cce-target-section + .cce-target-section {
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding-top: 16px;
}

#commonCompetencyBoard .cce-target-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
}

#commonCompetencyBoard .cce-section-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#commonCompetencyBoard .cce-target-section-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-target-section-head h3 span {
  color: #64748b;
  font-size: 12px;
}

#commonCompetencyBoard .cce-target-section-head p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

/* 그룹 섹션 헤더 우측: 단계 마일스톤 + 평균점수 */
#commonCompetencyBoard .cce-ms-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: none;
}
#commonCompetencyBoard .cce-section-avg {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
#commonCompetencyBoard .cce-section-avg-l {
  font-size: 12px;
  color: var(--lobby-rd-text-muted, #5a6573);
  font-weight: 500;
}
#commonCompetencyBoard .cce-section-avg-v {
  font-size: 15px;
  font-weight: 800;
  color: var(--lobby-rd-text, #11151c);
  letter-spacing: -0.02em;
}

/* 단계 마일스톤 — 도넛 진행률 노드 + 진행률만큼 채워지는 연결선 */
/* 등장 애니메이션 제거: renderBoard()마다 재실행되어 평가자 선택 시 깜빡임 유발(봉길님 지적) */
#commonCompetencyBoard .cce-msbar {
  display: inline-flex;
  align-items: center;
}
#commonCompetencyBoard .cce-msstep {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
#commonCompetencyBoard .cce-msnode {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--lobby-rd-surface-subtle, #eef1f6);
  box-sizing: border-box;
}
#commonCompetencyBoard .cce-msnode.full {
  background: linear-gradient(140deg, var(--lobby-rd-primary-2, #2d8fe6), var(--lobby-rd-primary, #0061a4));
  box-shadow: 0 3px 9px -2px rgba(0, 97, 164, 0.45);
}
#commonCompetencyBoard .cce-msnode.full svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 40, 80, 0.2));
}
/* 무한 펄스 제거: 재렌더마다 리셋되어 깜빡임에 가세(봉길님 지적). 도넛 진행률만 정적으로 표시 */
#commonCompetencyBoard .cce-msnode.prog {
  background: conic-gradient(var(--lobby-rd-primary, #0061a4) calc(var(--p) * 3.6deg), var(--lobby-rd-border, #e9edf3) 0deg);
}
#commonCompetencyBoard .cce-msnode.prog::before {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: #fff;
}
#commonCompetencyBoard .cce-msnode-pct {
  position: relative;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--lobby-rd-primary, #0061a4);
  letter-spacing: -0.04em;
}
#commonCompetencyBoard .cce-mslabel {
  font-size: 13px;
  color: var(--lobby-rd-text-muted, #5a6573);
  font-weight: 500;
  letter-spacing: -0.01em;
}
#commonCompetencyBoard .cce-msstep.on .cce-mslabel {
  color: var(--lobby-rd-text, #11151c);
  font-weight: 600;
}
#commonCompetencyBoard .cce-msline {
  flex: none;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  margin: 0 13px;
  background: linear-gradient(to right, var(--lobby-rd-primary, #0061a4) calc(var(--lp, 0) * 1%), var(--lobby-rd-border, #e9edf3) 0);
}
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@keyframes cce-ms-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 97, 164, 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(0, 97, 164, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 97, 164, 0); }
}
@keyframes cce-ms-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #commonCompetencyBoard .cce-msbar,
  #commonCompetencyBoard .cce-msnode.prog { animation: none; }
}

/* ===== 그룹별 섹션 = 프로토타입(eval-dashboard-redesign) 그대로 =====
   독립 카드 + 9컬럼 grid 헤더(평균점수=환산점수칸·대상자추가=수정칸 정렬) + caret 접힘/펼침 */
#commonCompetencyBoard .cce2-group {
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: 14px;
  background: var(--lobby-rd-surface, #ffffff);
  box-shadow: 0 1px 2px rgba(20, 40, 80, 0.04), 0 10px 30px -18px rgba(20, 40, 80, 0.18);
  overflow: hidden;
}
#commonCompetencyBoard .cce2-group + .cce2-group { margin-top: 20px; }   /* 평가그룹 섹션 간 간격 = 20px 리듬 통일 */
#commonCompetencyBoard .cce2-ghead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  background: linear-gradient(180deg, #fbfcfe, var(--lobby-rd-surface-alt, #f8fafc));
  border-bottom: 1px solid var(--lobby-rd-border, #e9edf3);
}
#commonCompetencyBoard .cce2-group.collapsed .cce2-ghead { border-bottom: 0; }
#commonCompetencyBoard .cce2-ghead-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
#commonCompetencyBoard .cce2-ghead-spacer { flex: 1 1 auto; }
#commonCompetencyBoard .cce2-caret {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lobby-rd-text-soft, #8a94a3);
  transition: transform 0.16s ease;
}
#commonCompetencyBoard .cce2-group.collapsed .cce2-caret { transform: rotate(-90deg); }
#commonCompetencyBoard .cce2-gname { font-size: 14px; font-weight: 600; color: var(--lobby-rd-text, #11151c); white-space: nowrap; }
/* 그룹명 더블클릭 인라인 변경 (열 제목과 동일 패턴 — 크기 안 흔들림) */
#commonCompetencyBoard .cce2-gname.editable { cursor: text; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; transition: background 0.12s, box-shadow 0.12s; }
#commonCompetencyBoard .cce2-gname.editable:hover { background: var(--lobby-rd-surface-subtle, #eef1f6); }
#commonCompetencyBoard .cce2-gname.editing { background: #fff; box-shadow: 0 0 0 1px var(--lobby-rd-primary, #0061a4), 0 0 0 4px var(--lobby-rd-ring, rgba(0, 97, 164, 0.12)); outline: none; caret-color: var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard .cce2-gcountchip {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--lobby-rd-surface-subtle, #eef1f6);
  color: var(--lobby-rd-text-soft, #8a94a3);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
}
#commonCompetencyBoard .cce2-gnote { font-size: 12px; color: var(--lobby-rd-text-soft, #8a94a3); white-space: nowrap; }
#commonCompetencyBoard .cce2-ghead-left .cce-msbar { margin-left: 14px; }
#commonCompetencyBoard .cce2-avg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--lobby-rd-border, #e9edf3); }
#commonCompetencyBoard .cce2-avg .l { font-size: 11.5px; line-height: 1; color: var(--lobby-rd-text-soft, #8a94a3); font-weight: 500; }
#commonCompetencyBoard .cce2-avg .v { font-size: 14px; font-weight: 600; color: var(--lobby-rd-text, #11151c); letter-spacing: -0.01em; }
/* 평가항목셋 선택(그룹 헤더 우측, 관리자) — 라벨은 평균점수(.cce2-avg .l)와 동일 톤.
   값 칩 = 옆 '피평가자 추가' 버튼(.cce2-addbtn)과 동일 형태 그대로 재사용(흰 배경·보더·radius 8·height 28·hover 동일).
   고정폭(텍스트 말줄임)+추가 버튼 바로 좌측 고정 → 셋 이름 길이 무관하게 여러 그룹 헤더 간 수평(가로 x) 정렬 유지. */
#commonCompetencyBoard .cce2-catset { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 4px; }
#commonCompetencyBoard .cce2-catset-l { font-size: 11.5px; line-height: 1; color: var(--lobby-rd-text-soft, #8a94a3); font-weight: 500; }
#commonCompetencyBoard .cce2-catset .cce2-catset-val { width: 104px; cursor: pointer; }
#commonCompetencyBoard .cce2-catset .cce2-catset-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#commonCompetencyBoard .cce2-catset .cce2-catset-caret { flex: none; width: 14px; height: 14px; opacity: .75; }
/* 등급별 배분 가능인원 (평균점수 좌측) */
/* 등급 색 팔레트(배분 칩 / 최종등급 칩 공용) */
#commonCompetencyBoard {
  --g-S:#1c3a5e; --g-S-soft:#e7edf4;
  --g-A:#0061a4; --g-A-soft:#e9f1fb;
  --g-B:#2f9e75; --g-B-soft:#e6f5ee;
  --g-C:#c77700; --g-C-soft:#fff4e5;
  --g-D:#e5484d; --g-D-soft:#fdecec;
}
#commonCompetencyBoard .cce2-dist { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--lobby-rd-border, #e9edf3); }
/* 배분 전(예정)=흐림 / 배분 후=또렷 — 2단계 흐림도(봉길님 확정: 중=0.45) */
#commonCompetencyBoard .cce2-dist.pre { opacity: 0.45; }
#commonCompetencyBoard .cce2-dist.post { opacity: 1; }
#commonCompetencyBoard .cce2-dist-label { font-size: 11.5px; line-height: 1; font-weight: 500; margin-right: 1px; color: var(--lobby-rd-text-soft, #8a94a3); }
#commonCompetencyBoard .cce2-dist.post .cce2-dist-label { color: var(--lobby-rd-primary, #0061a4); }
/* 등급 색칩 */
#commonCompetencyBoard .cce2-dseg { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--lobby-rd-surface-subtle, #eef1f6); color: var(--lobby-rd-text-muted, #5a6573); }
#commonCompetencyBoard .cce2-dseg .g { font-weight: 700; }
#commonCompetencyBoard .cce2-dseg.zero { opacity: 0.32; background: var(--lobby-rd-surface-subtle, #eef1f6) !important; color: var(--lobby-rd-text-soft, #8a94a3) !important; }
#commonCompetencyBoard .cce2-dseg.g-S { background: var(--g-S-soft); color: var(--g-S); }
#commonCompetencyBoard .cce2-dseg.g-A { background: var(--g-A-soft); color: var(--g-A); }
#commonCompetencyBoard .cce2-dseg.g-B { background: var(--g-B-soft); color: var(--g-B); }
#commonCompetencyBoard .cce2-dseg.g-C { background: var(--g-C-soft); color: var(--g-C); }
#commonCompetencyBoard .cce2-dseg.g-D { background: var(--g-D-soft); color: var(--g-D); }
/* 평가 기간 컬럼은 날짜 범위가 들어가므로 균등에서 예외로 넓게(봉길님 요청) */
#commonCompetencyBoard .cce2-table th[data-cce-col="period"] { width: 196px; }
#commonCompetencyBoard .cce-period-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
#commonCompetencyBoard .cce-period-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
#commonCompetencyBoard .cce-period-label { width: 64px; flex: 0 0 64px; font-size: 13px; font-weight: 600; color: var(--lobby-rd-text-muted, #5a6573); }
/* .cce-input width:100% 를 이겨야 인라인 유지 → 2클래스 특이성 + flex 고정폭 */
#commonCompetencyBoard .cce-period-row .cce-period-input { width: 170px; flex: 0 0 170px; }
#commonCompetencyBoard .cce-period-tilde { flex: none; color: var(--lobby-rd-text-soft, #8a94a3); }

/* 평가자 미배정 배정 CTA — 평소엔 조용한 회색 고스트, 호버 때만 파랑으로 살아남 */
#commonCompetencyBoard .cce2-assign { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; border: 1px dashed var(--lobby-rd-border-strong, #dfe4ec); background: transparent; color: var(--lobby-rd-text-soft, #8a94a3); font-size: 12px; font-weight: 500; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; }
#commonCompetencyBoard .cce2-assign:hover { color: var(--lobby-rd-primary, #0061a4); border-color: var(--lobby-rd-primary, #0061a4); background: var(--lobby-rd-primary-soft, #eef4fb); }
#commonCompetencyBoard .cce2-assign svg { flex: none; opacity: 0.6; }
/* 평가그룹 추가 (점선 카드) */
#commonCompetencyBoard .cce-group-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 16px; padding: 14px; border: 1.5px dashed var(--lobby-rd-border-strong, #dfe4ec); border-radius: 14px; background: transparent; color: var(--lobby-rd-text-muted, #51607a); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
#commonCompetencyBoard .cce-group-add:hover { background: var(--lobby-rd-surface-alt, #f8fafc); border-color: var(--lobby-rd-primary, #0061a4); color: var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard .cce-group-add svg { width: 16px; height: 16px; }

/* 대상자 추가 = 컬럼추가/보기저장과 동일한 콤팩트 중립 칩(12px) — UI 통일 */
#commonCompetencyBoard .cce2-addbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: 8px;
  background: var(--lobby-rd-surface, #ffffff);
  color: var(--lobby-rd-text-muted, #51607a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#commonCompetencyBoard .cce2-addbtn:hover { background: var(--lobby-rd-surface-alt, #f8fafc); border-color: var(--lobby-rd-border-strong, #dfe4ec); color: var(--lobby-rd-text, #11151c); }
#commonCompetencyBoard .cce2-addbtn svg { width: 14px; height: 14px; opacity: 0.75; }
/* 그룹 삭제 버튼: 헤더 우측, 평소 옅게·호버 시 위험색 */
#commonCompetencyBoard .cce2-gdelbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: 8px;
  background: var(--lobby-rd-surface, #ffffff);
  color: var(--lobby-rd-text-muted, #51607a);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#commonCompetencyBoard .cce2-gdelbtn:hover { background: var(--lobby-rd-danger-soft, #fdecec); border-color: var(--lobby-rd-danger, #e5484d); color: var(--lobby-rd-danger, #e5484d); }
#commonCompetencyBoard .cce2-gdelbtn svg { width: 15px; height: 15px; }
#commonCompetencyBoard .cce2-group.collapsed .cce2-glist { display: none; }
#commonCompetencyBoard .cce2-glist > .cce-member-picker {
  margin: 12px 14px;
}
/* 그룹 카드 안에서는 테이블을 카드 폭에 꽉 맞춰 헤더 grid와 컬럼 정렬 */
#commonCompetencyBoard .cce2-table-wrap {
  overflow-x: auto;
}

/* 프로토타입 톤 9컬럼 테이블 + 칩 (목록 탭) */
#commonCompetencyBoard table.cce2-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  /* 컬럼 폭을 내용과 무관하게 고정 → 행이 편집모드(input)로 바뀌어도 정렬이 안 깨짐 */
  table-layout: fixed;
}
/* 컬럼 균등 분배(봉길님 확정) — table-layout:fixed에서 명시 폭을 두지 않으면 모든 컬럼이 동일 폭으로 분배됨 */
/* '관리' 헤더 + 컬럼추가(+) 버튼 — 텍스트와 버튼 수직 중앙 정렬 */
#commonCompetencyBoard .cce2-th-mngwrap { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; vertical-align: middle; }
#commonCompetencyBoard .cce2-th-mnglabel { display: inline-flex; align-items: center; line-height: 1; }
#commonCompetencyBoard .cce2-th-addcol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; flex: none;
  border: 1px solid var(--lobby-rd-border, #e9edf3); border-radius: 6px;
  background: var(--lobby-rd-surface, #ffffff); color: var(--lobby-rd-text-muted, #51607a);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
#commonCompetencyBoard .cce2-th-addcol:hover { background: var(--lobby-rd-primary-soft, #e9f1fb); border-color: var(--lobby-rd-primary, #0061a4); color: var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard .cce2-th-addcol svg { width: 12px; height: 12px; }
#commonCompetencyBoard .cce2-table thead th {
  position: relative;
  padding: 10px 14px;            /* fixed 레이아웃에서 라벨이 칸에 들어가도록 좌우 패딩 축소(grip/✕는 절대배치) */
  text-align: center;
  background: var(--lobby-rd-surface-alt, #f8fafc);
  color: var(--lobby-rd-text-soft, #8a94a3);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid var(--lobby-rd-border, #e9edf3);
  user-select: none;
}
/* 컬럼 헤더: 드래그 재배치 + hover 시 폭 그대로 살짝 떠오르는 '이동' 느낌 */
#commonCompetencyBoard .cce2-th-drag { cursor: grab; }
/* 커스텀 컬럼 너비 리사이즈 핸들 (우측 경계 드래그) */
#commonCompetencyBoard .cce2-th-resize { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 4; }
#commonCompetencyBoard .cce2-th-resize:hover { background: rgba(0, 97, 164, 0.25); }
#commonCompetencyBoard .cce2-th-inner { display: inline-flex; align-items: center; justify-content: center; transition: transform 0.16s ease; }
#commonCompetencyBoard .cce2-th-drag:hover { background: var(--lobby-rd-surface-subtle, #eef1f6); color: var(--lobby-rd-text, #11151c); box-shadow: inset 0 -2px 0 var(--lobby-rd-primary-2, #2d8fe6); }
#commonCompetencyBoard .cce2-th-drag:hover .cce2-th-inner { transform: translateY(-2px); }
/* 제목: 편집해도 크기/위치 안 흔들리게 padding을 음수 margin으로 상쇄 + box-shadow 링 */
#commonCompetencyBoard .cce2-th-label { cursor: text; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; transition: background 0.12s, box-shadow 0.12s; }
#commonCompetencyBoard .cce2-th-label.editing { background: #fff; box-shadow: 0 0 0 1px var(--lobby-rd-primary, #0061a4), 0 0 0 4px var(--lobby-rd-ring, rgba(0, 97, 164, 0.12)); outline: none; caret-color: var(--lobby-rd-primary, #0061a4); }
/* 그립/✕ = 절대배치라 컬럼 폭에 영향 없음 */
#commonCompetencyBoard .cce2-th-grip { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--lobby-rd-text-soft, #8a94a3); opacity: 0; transition: opacity 0.14s; pointer-events: none; }
#commonCompetencyBoard .cce2-th-drag:hover .cce2-th-grip { opacity: 0.6; }
#commonCompetencyBoard .cce2-th-x { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px; color: var(--lobby-rd-text-soft, #8a94a3); cursor: pointer; opacity: 0; transition: opacity 0.14s, background 0.14s, color 0.14s; }
#commonCompetencyBoard .cce2-th-drag:hover .cce2-th-x { opacity: 0.85; }
#commonCompetencyBoard .cce2-th-x:hover { background: #fbeaec; color: #c2334b; opacity: 1; }
#commonCompetencyBoard .cce2-th-x svg { width: 11px; height: 11px; }
#commonCompetencyBoard .cce2-table th.dragging { opacity: 0.45; }
#commonCompetencyBoard .cce2-table th.dragging .cce2-th-inner { transform: scale(0.96); }
#commonCompetencyBoard .cce2-table th.drop-before::before,
#commonCompetencyBoard .cce2-table th.drop-after::after { content: ""; position: absolute; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard .cce2-table th.drop-before::before { left: -1px; }
#commonCompetencyBoard .cce2-table th.drop-after::after { right: -1px; }
/* 뷰 툴바: 컬럼 추가 · 보기 저장 */
#commonCompetencyBoard .cce-viewbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 14px; padding: 0 2px; }
#commonCompetencyBoard .cce-viewbar-r { display: inline-flex; align-items: center; gap: 7px; }
#commonCompetencyBoard .cce-vbtn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--lobby-rd-border, #e9edf3); border-radius: 8px; background: var(--lobby-rd-surface, #ffffff); color: var(--lobby-rd-text-muted, #51607a); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
#commonCompetencyBoard .cce-vbtn svg { width: 14px; height: 14px; opacity: 0.75; }
#commonCompetencyBoard .cce-vbtn:hover { background: var(--lobby-rd-surface-alt, #f8fafc); color: var(--lobby-rd-text, #11151c); border-color: var(--lobby-rd-border-strong, #dfe4ec); }
#commonCompetencyBoard .cce-vbtn.primary { border-color: var(--lobby-rd-primary, #0061a4); background: var(--lobby-rd-primary, #0061a4); color: #fff; }
#commonCompetencyBoard .cce-vbtn.primary svg { opacity: 0.9; }
#commonCompetencyBoard .cce-vbtn.primary:hover { background: var(--lobby-rd-primary-strong, #004e87); }
#commonCompetencyBoard .cce-vbtn:disabled { opacity: 0.45; cursor: default; background: var(--lobby-rd-surface, #ffffff); color: var(--lobby-rd-text-soft, #8a94a3); border-color: var(--lobby-rd-border, #e9edf3); box-shadow: none; }
/* #commonCompetencyBoard 는 #mainBoardContent 안에 있어 board-redesign의
   `#mainBoardContent:not(...) :is(input,button){font:inherit}` (specificity 1,2,1) 가
   버튼 font 를 16px/400 으로 덮어씀 → 더 높은 specificity(2,1,0)로 12px 고정 */
#mainBoardContent #commonCompetencyBoard .cce-vbtn,
#mainBoardContent #commonCompetencyBoard .cce2-addbtn {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
#mainBoardContent #commonCompetencyBoard .cce-group-add { font-size: 13px; font-weight: 600; }
#commonCompetencyBoard .cce2-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--lobby-rd-border-soft, #edf2f7);
  font-size: 13px;
  color: var(--lobby-rd-text, #11151c);
  vertical-align: middle;
  white-space: nowrap;
  height: 58px;
  text-align: center;
  overflow: hidden;             /* fixed 레이아웃: 긴 내용이 옆 칸 침범 대신 칸 안에서 잘리도록 */
  text-overflow: ellipsis;
}
/* 관리(수정/삭제) 컬럼 + 1차/2차 평가자 배정 셀은 버튼/칩이라 ellipsis 금지
   — 좁은 폭에서 "＋배정" 칩이 잘려 "..."가 뜨던 문제 제거(미배정=.cce2-assign, 배정됨=.cce2-evname) */
#commonCompetencyBoard .cce2-table tbody td:last-child,
#commonCompetencyBoard .cce2-table thead th.cce2-th-fixed,
#commonCompetencyBoard .cce2-table tbody td:has(.cce2-assign),
#commonCompetencyBoard .cce2-table tbody td:has(.cce2-evname) {
  overflow: visible;
  text-overflow: clip;
}
#commonCompetencyBoard .cce2-table tbody tr { cursor: pointer; transition: background 0.12s; }
#commonCompetencyBoard .cce2-table tbody tr.is-editing { cursor: default; }
#commonCompetencyBoard .cce2-table tbody tr:hover td { background: var(--lobby-rd-surface-alt, #f8fafc); }
#commonCompetencyBoard .cce2-table tbody tr.is-editing td { background: var(--lobby-rd-surface, #ffffff); }
#commonCompetencyBoard .cce2-table tbody tr:last-child td { border-bottom: 0; }
#commonCompetencyBoard .cce2-person {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
#commonCompetencyBoard .cce2-av {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
#commonCompetencyBoard .cce2-pname { font-size: 13px; font-weight: 600; color: var(--lobby-rd-text, #11151c); }
#commonCompetencyBoard .cce2-score { font-size: 13.5px; font-weight: 600; color: var(--lobby-rd-text, #11151c); }
#commonCompetencyBoard .cce2-score.none { color: var(--lobby-rd-text-soft, #8a94a3); }
#commonCompetencyBoard .cce2-muted { color: var(--lobby-rd-text-soft, #8a94a3); }
/* 클릭하여 인라인 편집되는 텍스트 셀(이름/소속/직급): 호버 시 편집 가능 표시 */
#commonCompetencyBoard .cce2-celltext { display: inline-block; max-width: 100%; padding: 3px 7px; margin: -3px -7px; border-radius: 7px; cursor: text; transition: background 0.12s, box-shadow 0.12s; }
#commonCompetencyBoard .cce2-celltext:hover { background: var(--lobby-rd-surface-subtle, #eef1f6); box-shadow: inset 0 0 0 1px var(--lobby-rd-border, #e9edf3); }
#commonCompetencyBoard .cce2-cell-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 8px;
  background: var(--lobby-rd-surface, #ffffff);
  color: var(--lobby-rd-text, #11151c);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  outline: none;
  box-sizing: border-box;
}
#commonCompetencyBoard .cce2-cell-input.select {
  padding-right: 6px;
  appearance: auto;
}
#commonCompetencyBoard .cce2-cell-input:focus {
  border-color: var(--lobby-rd-primary, #0061a4);
  box-shadow: 0 0 0 3px var(--lobby-rd-ring, rgba(0, 97, 164, 0.12));
}
#commonCompetencyBoard .cce2-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
/* 관리(수정/삭제) 버튼: 데스크톱은 행 호버 시에만 표시(편집 중 행·터치기기·평가자 진입버튼(.eval)은 항상 표시) */
@media (hover: hover) {
  #commonCompetencyBoard tr:not(.is-editing) .cce2-row-actions:not(.eval) {
    opacity: 0;
    transition: opacity .12s;
  }
  #commonCompetencyBoard tr:not(.is-editing):hover .cce2-row-actions:not(.eval) {
    opacity: 1;
  }
}
#commonCompetencyBoard .cce2-rowbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  padding: 0 9px;
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: 7px;
  background: var(--lobby-rd-surface, #ffffff);
  color: var(--lobby-rd-primary, #0061a4);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
#commonCompetencyBoard .cce2-rowbtn:hover {
  background: var(--lobby-rd-primary-soft, #e9f1fb);
  border-color: var(--lobby-rd-primary, #0061a4);
}
#commonCompetencyBoard .cce2-rowbtn.primary {
  border-color: var(--lobby-rd-primary, #0061a4);
  background: var(--lobby-rd-primary, #0061a4);
  color: #ffffff;
}
#commonCompetencyBoard .cce2-rowbtn.ghost {
  color: var(--lobby-rd-text-muted, #51606f);
}
#commonCompetencyBoard .cce2-rowbtn.danger {
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}
#commonCompetencyBoard .cce2-rowbtn.danger:hover {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.45);
}
#commonCompetencyBoard .cce2-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 23px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: var(--lobby-rd-surface-subtle, #eef1f6);
  color: #1c3a5e;
}
#commonCompetencyBoard .cce2-grade.none {
  background: transparent;
  color: var(--lobby-rd-text-soft, #8a94a3);
  font-weight: 600;
  border: 1px dashed var(--lobby-rd-border-strong, #dfe4ec);
}
/* 최종등급 색칩(배분 칩과 동일 팔레트로 통일) */
#commonCompetencyBoard .cce2-grade.g-S { background: var(--g-S-soft); color: var(--g-S); }
#commonCompetencyBoard .cce2-grade.g-A { background: var(--g-A-soft); color: var(--g-A); }
#commonCompetencyBoard .cce2-grade.g-B { background: var(--g-B-soft); color: var(--g-B); }
#commonCompetencyBoard .cce2-grade.g-C { background: var(--g-C-soft); color: var(--g-C); }
#commonCompetencyBoard .cce2-grade.g-D { background: var(--g-D-soft); color: var(--g-D); }
#commonCompetencyBoard .cce2-st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--lobby-rd-text-muted, #5a6573);
}
#commonCompetencyBoard .cce2-st::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lobby-rd-text-soft, #8a94a3);
  flex: none;
}
#commonCompetencyBoard .cce2-st.prog::before { background: var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard .cce2-st.done::before { background: #2f9e75; }
#commonCompetencyBoard .cce2-st.confirmed::before { background: #1c3a5e; }
#commonCompetencyBoard .cce2-st.adjust::before { background: var(--lobby-rd-amber, #c77700); }
#commonCompetencyBoard .cce2-st.adjust { color: var(--lobby-rd-amber, #c77700); font-weight: 600; }

/* 평가 단계(회차) 셀 */
#commonCompetencyBoard .cce2-stage {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--lobby-rd-text-muted, #5a6573);
}
#commonCompetencyBoard .cce2-evname {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
  color: var(--lobby-rd-text-muted, #5a6573);
}

/* 인라인 오버라이드 드롭다운 트리거(평가 단계 / 진행 상태) — 관리자 */
#commonCompetencyBoard .cce2-cellsel {
  position: relative;            /* caret 절대배치 기준 → 텍스트는 셀 중앙 그대로 */
  gap: 6px;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
#commonCompetencyBoard .cce2-cellsel:hover {
  background: var(--lobby-rd-surface-subtle, #eef1f6);
  border-color: var(--lobby-rd-border-strong, #dfe4ec);
  color: var(--lobby-rd-primary, #0061a4);
}
/* caret을 흐름에서 빼 우측 절대배치(텍스트 중앙 유지) + 호버 시에만 노출 */
#commonCompetencyBoard .cce2-cellsel .cce2-caret {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  opacity: 0;
  flex: none;
  transition: opacity .12s;
  pointer-events: none;
}
#commonCompetencyBoard .cce2-cellsel:hover .cce2-caret { opacity: .5; }

/* 셀 드롭다운 메뉴 — document.body에 부착되므로 보드 스코프 밖(클리핑 회피) */
.cce2-cellmenu {
  position: fixed;
  z-index: 1200;
  min-width: 132px;
  max-width: 280px;
  max-height: 300px;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 32, 56, .16);
  display: none;
}
.cce2-cellmenu.on { display: block; }
.cce2-cellmenu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--lobby-rd-text, #1c2733);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.cce2-cellmenu button:hover { background: var(--lobby-rd-surface-subtle, #eef1f6); }
.cce2-cellmenu button.on { color: var(--lobby-rd-primary, #0061a4); font-weight: 600; }
.cce2-cellmenu .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lobby-rd-text-soft, #8a94a3); flex: none; }
.cce2-cellmenu .dot.prog { background: var(--lobby-rd-primary, #0061a4); }
.cce2-cellmenu .dot.done { background: var(--lobby-rd-success, #138a65); }

#commonCompetencyBoard .cce-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant, #64748b);
  font-size: 14px;
}

#commonCompetencyBoard .cce-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--md-sys-color-on-surface, #0f172a);
  font-size: 15px;
}

#commonCompetencyBoard .cce-empty.compact {
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.36);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.76);
  font-size: 13px;
}

/* 로딩 — 점선 박스 폐기. 중앙 정렬 + 미세 스피너(지연 노출 전용) */
#commonCompetencyBoard .cce-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60vh;
  color: var(--lobby-rd-text-soft, #8a94a3);
  font-size: 13px;
  font-weight: 500;
}

#commonCompetencyBoard .cce-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--lobby-rd-border, #e4e9f0);
  border-top-color: var(--lobby-rd-primary, #0061a4);
  animation: cce-spin 0.7s linear infinite;
}

@keyframes cce-spin {
  to { transform: rotate(360deg); }
}

#commonCompetencyBoard .cce-error {
  padding: 28px;
  border-radius: 22px;
  border: 1px dashed rgba(148, 163, 184, 0.38);
  background: rgba(255, 255, 255, 0.72);
  color: #b91c1c;
  text-align: center;
  font-size: 14px;
}

/* 평가 열람 권한 없음(배정 없음) 안내 — 에러가 아닌 빈 상태 톤 */
#commonCompetencyBoard .cce-noaccess {
  max-width: 460px;
  margin: 64px auto;
  padding: 44px 32px;
  border-radius: 22px;
  background: var(--md-sys-color-surface-container-low, #ffffff);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
}
#commonCompetencyBoard .cce-noaccess-ic {
  color: var(--md-sys-color-primary, #0061a4);
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
}
#commonCompetencyBoard .cce-noaccess-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--md-sys-color-on-surface, #1a1c1e);
}
#commonCompetencyBoard .cce-noaccess-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--md-sys-color-on-surface-variant, #42474e);
}

#commonCompetencyBoard .cce-tabs {
  display: flex;
  gap: 2px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  flex: 0 0 auto;
}

#commonCompetencyBoard .cce-tab {
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lobby-rd-text-muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

#commonCompetencyBoard .cce-tab:hover {
  background: transparent;
  color: var(--lobby-rd-text, #11151c);
}

#commonCompetencyBoard .cce-tab.is-active {
  background: transparent;
  color: var(--lobby-rd-primary, #0061a4);
  font-weight: 700;
}

#commonCompetencyBoard .cce-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--lobby-rd-primary, #0061a4);
}

#commonCompetencyBoard .cce-settings-card {
  padding: 20px;
  margin-bottom: 18px;
}

#commonCompetencyBoard .cce-settings-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

#commonCompetencyBoard .cce-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

#commonCompetencyBoard .cce-btn,
#commonCompetencyBoard .cce-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 10px;
  background: #ffffff;
  color: var(--md-sys-color-on-surface, #0f172a);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

#commonCompetencyBoard .cce-btn:hover,
#commonCompetencyBoard .cce-icon-btn:hover {
  border-color: rgba(0, 97, 164, 0.45);
  background: rgba(0, 97, 164, 0.06);
}

#commonCompetencyBoard .cce-btn.primary {
  border-color: var(--md-sys-color-primary, #0061a4);
  background: var(--md-sys-color-primary, #0061a4);
  color: var(--md-sys-color-on-primary, #ffffff);
}

#commonCompetencyBoard .cce-btn.ghost {
  background: transparent;
}

/* 평가 초기화 버튼 — 일반 ghost 톤(붉은색 제거, 봉길님 2026-06-21). */
#commonCompetencyBoard .cce-btn.ghost.danger {
  color: #64748b;
}

#commonCompetencyBoard .cce-btn.ghost.danger:hover {
  background: #f1f5f9;
  color: #334155;
}

#commonCompetencyBoard .cce-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

#commonCompetencyBoard .cce-icon-btn {
  min-width: 54px;
  padding: 0 10px;
}

#commonCompetencyBoard .cce-icon-btn.danger {
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}

#commonCompetencyBoard .cce-icon-btn.danger:hover {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.45);
}

#commonCompetencyBoard .cce-readonly {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  font-size: 13px;
  line-height: 1.55;
}

#commonCompetencyBoard .cce-warning-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

#commonCompetencyBoard .cce-warning-box span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
}

#commonCompetencyBoard .cce-settings-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

#commonCompetencyBoard .cce-settings-list.compact {
  gap: 10px;
}

#commonCompetencyBoard .cce-category-editor,
#commonCompetencyBoard .cce-row-editor {
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.72);
  padding: 14px;
}

#commonCompetencyBoard .cce-category-head,
#commonCompetencyBoard .cce-row-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(96px, 0.5fr) minmax(96px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
}

#commonCompetencyBoard .cce-row-editor {
  grid-template-columns: minmax(150px, 1fr) minmax(96px, 0.55fr) minmax(96px, 0.55fr) minmax(220px, 1.4fr) minmax(120px, 0.55fr) auto;
}

#commonCompetencyBoard .cce-row-editor.grades {
  grid-template-columns: minmax(78px, 0.5fr) minmax(140px, 1fr) minmax(120px, 0.7fr) minmax(110px, 0.7fr) minmax(96px, 0.55fr) minmax(130px, 0.8fr) minmax(100px, 0.55fr) auto;
}

#commonCompetencyBoard .cce-subitem-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

#commonCompetencyBoard .cce-subitem-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(96px, 0.45fr) minmax(96px, 0.45fr) minmax(240px, 1.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

#commonCompetencyBoard .cce-field,
#commonCompetencyBoard .cce-check {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--md-sys-color-on-surface-variant, #64748b);
  font-size: 12px;
  font-weight: 800;
}

#commonCompetencyBoard .cce-field.wide {
  grid-column: 1 / -1;
  margin-top: 10px;
}

#commonCompetencyBoard .cce-input,
#commonCompetencyBoard .cce-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  background: #ffffff;
  color: var(--md-sys-color-on-surface, #0f172a);
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}

#commonCompetencyBoard .cce-input {
  min-height: 38px;
  padding: 0 10px;
}

#commonCompetencyBoard .cce-input.slim {
  min-height: 34px;
  font-size: 12px;
}

#commonCompetencyBoard .cce-textarea {
  min-height: 76px;
  padding: 10px;
  resize: vertical;
}

#commonCompetencyBoard .cce-input:focus,
#commonCompetencyBoard .cce-textarea:focus {
  border-color: var(--md-sys-color-primary, #0061a4);
  box-shadow: 0 0 0 3px rgba(0, 97, 164, 0.12);
}

#commonCompetencyBoard .cce-input:disabled,
#commonCompetencyBoard .cce-textarea:disabled {
  background: rgba(241, 245, 249, 0.8);
  color: #64748b;
}

#commonCompetencyBoard .cce-check {
  justify-content: center;
  min-height: 60px;
}

#commonCompetencyBoard .cce-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--md-sys-color-primary, #0061a4);
}

#commonCompetencyBoard .cce-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#commonCompetencyBoard .cce-group-editor-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#commonCompetencyBoard .cce-group-editor {
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.84), rgba(255, 255, 255, 0.94));
}

#commonCompetencyBoard .cce-group-editor-head {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 0.8fr) auto;
  gap: 12px;
  align-items: end;
}

#commonCompetencyBoard .cce-group-subgrid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
  gap: 14px;
  margin-top: 14px;
}

#commonCompetencyBoard .cce-mini-title {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-quota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

#commonCompetencyBoard .cce-group-preview {
  min-height: 88px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: #ffffff;
}

#commonCompetencyBoard .cce-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

#commonCompetencyBoard .cce-preview-meta span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0, 97, 164, 0.07);
  color: #0061a4;
  font-size: 11px;
  font-weight: 800;
}

#commonCompetencyBoard .cce-member-picker {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed rgba(0, 97, 164, 0.28);
  border-radius: 14px;
  background: rgba(0, 97, 164, 0.04);
}

#commonCompetencyBoard .cce-member-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 13px;
}

#commonCompetencyBoard .cce-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow: auto;
}

#commonCompetencyBoard .cce-member-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

#commonCompetencyBoard .cce-member-option input {
  margin-top: 2px;
  accent-color: var(--md-sys-color-primary, #0061a4);
}

#commonCompetencyBoard .cce-member-option strong,
#commonCompetencyBoard .cce-member-option em {
  display: block;
}

#commonCompetencyBoard .cce-member-option strong {
  color: #0f172a;
  font-size: 13px;
}

#commonCompetencyBoard .cce-member-option em {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
}

#commonCompetencyBoard .cce-bulk-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  margin: 14px 0 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.92);
}

#commonCompetencyBoard .cce-second-group {
  overflow: hidden;
}

#commonCompetencyBoard .cce-second-group + .cce-second-group {
  margin-top: 16px;
}

#commonCompetencyBoard .cce-second-group.has-warning {
  border-color: rgba(245, 158, 11, 0.42);
}

#commonCompetencyBoard .cce-second-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 12px;
}

#commonCompetencyBoard .cce-second-group-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-second-group-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
}

#commonCompetencyBoard .cce-warning-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
  font-size: 12px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-distribution-summary {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin: 0 20px 12px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.86);
}

#commonCompetencyBoard .cce-distribution-summary.has-warning {
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(255, 251, 235, 0.82);
}

#commonCompetencyBoard .cce-distribution-summary div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#commonCompetencyBoard .cce-distribution-summary strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-distribution-summary span,
#commonCompetencyBoard .cce-distribution-summary p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

#commonCompetencyBoard .cce-distribution-summary.has-warning p {
  color: #92400e;
  font-weight: 900;
}

#commonCompetencyBoard .cce-adjust-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

#commonCompetencyBoard .cce-adjust-badge.none {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

#commonCompetencyBoard .cce-adjust-badge.up {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

#commonCompetencyBoard .cce-adjust-badge.down {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

#commonCompetencyBoard .cce-row-warning,
#commonCompetencyBoard .cce-row-hint {
  margin-top: 5px;
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
}

#commonCompetencyBoard .cce-row-hint {
  color: #b91c1c;
}

#commonCompetencyBoard .cce-inline-textarea {
  min-height: 58px;
  font-size: 12px;
}

#commonCompetencyBoard .cce-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

#commonCompetencyBoard .cce-row-actions .cce-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

#commonCompetencyBoard .cce-summary-cell {
  max-width: 220px;
  margin-bottom: 6px;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

#commonCompetencyBoard .cce-first-result-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(280px, 1.15fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.76);
}

#commonCompetencyBoard .cce-first-result-row + .cce-first-result-row {
  margin-top: 10px;
}

#commonCompetencyBoard .cce-first-result-row strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-first-result-row p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

#commonCompetencyBoard .cce-grade-mini {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(0, 97, 164, 0.08);
  color: #0061a4;
  font-size: 12px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-feedback-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

#commonCompetencyBoard .cce-feedback-summary span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

#commonCompetencyBoard .cce-feedback-summary strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-feedback-note,
#commonCompetencyBoard .cce-feedback-section {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.72);
}

#commonCompetencyBoard .cce-feedback-note strong,
#commonCompetencyBoard .cce-feedback-section h3 {
  display: block;
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-feedback-note p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

#commonCompetencyBoard .cce-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

#commonCompetencyBoard .cce-report-metric {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px -32px rgba(15, 23, 42, 0.42);
}

#commonCompetencyBoard .cce-report-metric span,
#commonCompetencyBoard .cce-report-metric em {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

#commonCompetencyBoard .cce-report-metric strong {
  display: block;
  margin: 8px 0 4px;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-report-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1.2fr);
  gap: 14px;
}

#commonCompetencyBoard .cce-report-card {
  padding: 18px;
}

#commonCompetencyBoard .cce-report-card h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-report-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#commonCompetencyBoard .cce-report-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 97, 164, 0.08);
  color: #0061a4;
  font-size: 12px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-report-pills.compact span {
  min-height: 26px;
  font-size: 11px;
}

#commonCompetencyBoard .cce-report-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#commonCompetencyBoard .cce-report-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.86);
}

#commonCompetencyBoard .cce-report-list div.has-warning {
  background: rgba(255, 251, 235, 0.9);
  color: #92400e;
}

#commonCompetencyBoard .cce-report-list strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-report-list span {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

/* ===== 평가 리포트 A1 (로비 톤·DESIGN.md 고급, 2026-06-21) ===== */
#commonCompetencyBoard .cce-rp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
#commonCompetencyBoard .cce-rp-title { margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; color:#11151c; }
#commonCompetencyBoard .cce-rp-note { margin:4px 0 0; font-size:12px; color:#8a94a3; }
#commonCompetencyBoard .cce-rp-excel { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 14px; border:1px solid #0061a4; border-radius:8px; background:#0061a4; color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; font-family:"Google Sans","Roboto",sans-serif; flex:none; }
#commonCompetencyBoard .cce-rp-excel:hover { background:#00518c; }
#commonCompetencyBoard .cce-rp-excel svg { opacity:.9; }

#commonCompetencyBoard .cce-rp-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:11px; margin-bottom:14px; }
#commonCompetencyBoard .cce-rp-metric { display:flex; flex-direction:column; text-align:center; padding:16px 14px; background:#fff; border:1px solid #e9edf3; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,32,64,.14); }
#commonCompetencyBoard .cce-rp-metric .rp-ml { font-size:11.5px; font-weight:600; color:#5a6573; height:20px; display:flex; align-items:center; justify-content:center; line-height:1; white-space:nowrap; }
#commonCompetencyBoard .cce-rp-metric .rp-mv { font-size:23px; font-weight:700; letter-spacing:-.02em; margin:10px 0 0; color:#11151c; height:28px; display:flex; align-items:center; justify-content:center; line-height:1; }
#commonCompetencyBoard .cce-rp-metric .rp-mn { font-size:11px; color:#8a94a3; margin-top:auto; height:20px; display:flex; align-items:center; justify-content:center; line-height:1; white-space:nowrap; }
#commonCompetencyBoard .cce-rp-grid .cce-rp-metric:nth-child(n+2):nth-child(-n+4) .rp-mv { color:#0061a4; }

#commonCompetencyBoard .cce-rp-card { background:#fff; border:1px solid #e9edf3; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,32,64,.14); padding:18px; margin-bottom:14px; }
#commonCompetencyBoard .cce-rp-card:last-child { margin-bottom:0; }
#commonCompetencyBoard .cce-rp-ch { margin:0 0 13px; font-size:13px; font-weight:700; letter-spacing:-.01em; color:#11151c; }
#commonCompetencyBoard .cce-rp-stack { display:flex; gap:3px; height:34px; }
#commonCompetencyBoard .cce-rp-stack i { display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; font-style:normal; border-radius:6px; min-width:0; }
#commonCompetencyBoard .cce-rp-stack i:first-child { border-top-left-radius:9px; border-bottom-left-radius:9px; }
#commonCompetencyBoard .cce-rp-stack i:last-child { border-top-right-radius:9px; border-bottom-right-radius:9px; }
#commonCompetencyBoard .cce-rp-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:13px; }
#commonCompetencyBoard .cce-rp-legend .rp-lg { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; }
#commonCompetencyBoard .cce-rp-legend .rp-dot { width:10px; height:10px; border-radius:3px; }
#commonCompetencyBoard .cce-rp-legend .rp-lg b { font-weight:700; }
#commonCompetencyBoard .cce-rp-legend .rp-lg span { color:#8a94a3; font-weight:500; }

#commonCompetencyBoard .cce-rp-table { width:100%; border-collapse:collapse; table-layout:fixed; }
#commonCompetencyBoard .cce-rp-table th { text-align:center; font-size:12px; font-weight:500; color:#8a94a3; background:#f8fafc; padding:10px 12px; }
#commonCompetencyBoard .cce-rp-table th:first-child { border-top-left-radius:8px; }
#commonCompetencyBoard .cce-rp-table th:last-child { border-top-right-radius:8px; }
#commonCompetencyBoard .cce-rp-table td { text-align:center; font-size:12.5px; font-weight:400; color:#4a5360; padding:11px 12px; border-bottom:1px solid #f1f4f8; vertical-align:middle; height:46px; line-height:1; }
#commonCompetencyBoard .cce-rp-table td.rp-grp strong { font-weight:600; color:#11151c; }
#commonCompetencyBoard .cce-rp-table td.rp-lo, #commonCompetencyBoard .cce-rp-table td.rp-hi { color:#8a94a3; font-variant-numeric:tabular-nums; }
#commonCompetencyBoard .cce-rp-table td.rp-avg { color:#11151c; font-weight:600; font-variant-numeric:tabular-nums; }
#commonCompetencyBoard .cce-rp-table th.rp-avg, #commonCompetencyBoard .cce-rp-table td.rp-avg { border-left:1px solid #eef1f5; border-right:1px solid #eef1f5; }
#commonCompetencyBoard .cce-rp-table .rp-dist { display:flex; gap:6px; }
#commonCompetencyBoard .cce-rp-table .rp-dist .rp-cpill { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:24px; border-radius:7px; font-size:11px; font-weight:700; }

#commonCompetencyBoard .cce-audit-table td {
  vertical-align: top;
}

#commonCompetencyBoard .cce-audit-table td:nth-child(5) {
  min-width: 280px;
  white-space: normal;
  line-height: 1.55;
}

#commonCompetencyBoard .cce-eval-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

#commonCompetencyBoard .cce-eval-status.waiting {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

#commonCompetencyBoard .cce-eval-status.progress {
  background: rgba(0, 97, 164, 0.1);
  color: #0061a4;
}

#commonCompetencyBoard .cce-eval-status.submitted {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

/* 평가 입력 패널 = Overview 리스트 행 클릭 시 우측에서 슬라이드되는 50% 폭 사이드 패널.
   배경 딤/블러는 평가설정 모달(.cce-set-overlay)과 동일: rgba(0,0,0,.6) + blur(8px). */
#commonCompetencyBoard .cce-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
}

#commonCompetencyBoard .cce-eval-modal {
  width: 40vw;
  min-width: 480px;
  max-width: 880px;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-left: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px 0 0 20px;
  background: #ffffff;
  box-shadow: -28px 0 80px -40px rgba(15, 23, 42, 0.6);
}

/* 애니메이션은 '열 때 1회만'(cce-anim-in). 재렌더(임시저장·스냅샷)마다 재생되면 깜빡임 → 1회 제한. */
#commonCompetencyBoard .cce-modal-backdrop.cce-anim-in {
  animation: cceBackdropFade 0.18s ease;
}

#commonCompetencyBoard .cce-eval-modal.cce-anim-in {
  animation: ccePanelSlideIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cceBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ccePanelSlideIn {
  from { transform: translateX(28px); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}

/* Overview 리스트 행 클릭 = 평가 패널 열기. 행 전체에 클릭 어포던스(인터랙티브 셀은 자체 동작 유지). */
#commonCompetencyBoard tr[data-cce-rowopen] {
  cursor: pointer;
}

#commonCompetencyBoard tr[data-cce-rowopen]:hover {
  background: rgba(0, 97, 164, 0.045);
}

#commonCompetencyBoard .cce-eval-modal-head,
#commonCompetencyBoard .cce-eval-modal-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

#commonCompetencyBoard .cce-eval-modal-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-eval-modal-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#commonCompetencyBoard .cce-eval-modal-foot {
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  border-bottom: 0;
  background: rgba(248, 250, 252, 0.86);
}

#commonCompetencyBoard .cce-eval-modal-foot > span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

#commonCompetencyBoard .cce-eval-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 22px;
}

#commonCompetencyBoard .cce-scale-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 22px 0;
}

#commonCompetencyBoard .cce-scale-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 97, 164, 0.07);
  color: #0061a4;
  font-size: 12px;
}

#commonCompetencyBoard .cce-scale-legend strong {
  font-weight: 900;
}

#commonCompetencyBoard .cce-scale-legend em,
#commonCompetencyBoard .cce-scale-legend b {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}

#commonCompetencyBoard .cce-eval-errors {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 22px 0;
  padding: 12px;
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.07);
}

#commonCompetencyBoard .cce-eval-errors span {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 800;
}

/* ===== 평가 설정(Settings) 재구성 — 평가기간/평가등급/평가항목 3섹션 (2026-06-18) =====
   Overview(cce2-table) 톤 답습. input/button은 font-family 명시(전역 :is(input,button){font:inherit} 회피) */
#commonCompetencyBoard .cce-set-card { background:#fff; border:1px solid #f1f3f7; border-radius:12px; margin-bottom:14px; overflow:hidden; }
#commonCompetencyBoard .cce-set-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid #f1f3f7; }
#commonCompetencyBoard .cce-set-ttl { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#1c2128; letter-spacing:-0.01em; }
#commonCompetencyBoard .cce-set-num { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:#eaf2fb; color:#0061a4; font-size:11px; font-weight:700; }
/* 저장 버튼은 별도 스타일 없이 '피평가자 추가'와 동일한 .cce2-addbtn 클래스를 그대로 사용 (봉길님 2026-06-18) */
/* 헤더 우측 버튼 묶음(등급 추가 + 등급 저장 등) */
#commonCompetencyBoard .cce-set-head-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
#commonCompetencyBoard .cce-set-body { padding:14px 16px; }

/* 평가기간 */
#commonCompetencyBoard .cce-set-period { display:flex; flex-direction:column; gap:10px; padding-left:14px; }
#commonCompetencyBoard .cce-set-prow { display:flex; align-items:center; gap:12px; }
#commonCompetencyBoard .cce-set-plab { width:92px; font-size:12.5px; font-weight:600; color:#3d4552; }
/* 일자 입력은 칸반 등록 폼의 .field--date 칩을 그대로 답습(board-redesign 전역 규칙 상속).
   모달은 좁으므로 칩 폭만 살짝 줄여 1차/2차 두 칩이 한 줄에 들어오게 한다. */
#commonCompetencyBoard .cce-set-period .field--date { width:122px; }
/* 마감일 우측 기간 일수(종료일 포함) */
#commonCompetencyBoard .cce-set-period-days { font-size:12px; font-weight:600; color:#8a94a3; white-space:nowrap; }
/* 배분율 합계(100% 검증) 표시 */
#commonCompetencyBoard .cce-set-gtotal { display:flex; align-items:baseline; gap:10px; margin:12px 0 2px; padding-left:27px; font-size:12.5px; font-weight:600; }
#commonCompetencyBoard .cce-set-gtotal .cce-set-gtotal-main strong { font-weight:800; }
#commonCompetencyBoard .cce-set-gtotal.is-ok { color:#138a65; }
#commonCompetencyBoard .cce-set-gtotal.is-bad { color:#e5484d; }
#commonCompetencyBoard .cce-set-gtotal .cce-set-gtotal-msg { font-size:11.5px; font-weight:600; color:#e5484d; }
#commonCompetencyBoard .cce-set-gtotal.is-ok .cce-set-gtotal-msg { display:none; }

/* 평가등급 테이블 (cce2-table 톤) */
#commonCompetencyBoard .cce-set-gt { width:100%; border-collapse:collapse; }
#commonCompetencyBoard .cce-set-gt th { text-align:center; font-size:12px; font-weight:500; color:#9aa3af; background:#fafbfc; padding:9px 14px; }
#commonCompetencyBoard .cce-set-gt th:first-child { border-top-left-radius:8px; }
#commonCompetencyBoard .cce-set-gt th:last-child { border-top-right-radius:8px; }
#commonCompetencyBoard .cce-set-gt td { text-align:center; padding:9px 14px; border-bottom:1px solid #f4f6fa; font-size:12.5px; font-weight:500; color:#4a5360; vertical-align:middle; }
#commonCompetencyBoard .cce-set-gchip { width:34px; height:24px; border-radius:7px; border:0; font-weight:800; font-size:12px; text-align:center; font-family:"Google Sans","Roboto",sans-serif; }
/* 등급 컬럼(첫 컬럼)도 나머지 열과 동일하게 중앙 정렬 (봉길님 2026-06-18 재지시) */
#commonCompetencyBoard .cce-set-inp { border:1px solid #eef1f5; border-radius:7px; padding:6px 10px; font-size:12.5px; color:#1c2128; background:#fff; font-family:"Google Sans","Roboto",sans-serif; box-sizing:border-box; }
#commonCompetencyBoard .cce-set-inp:focus { outline:none; border-color:#0061a4; }
#commonCompetencyBoard .cce-set-inp.gname { width:120px; text-align:center; }
#commonCompetencyBoard .cce-set-inp.rate { width:104px; text-align:center; }
#commonCompetencyBoard .cce-set-chk { width:15px; height:15px; accent-color:#0061a4; cursor:pointer; }
#commonCompetencyBoard .cce-set-del { border:0; background:transparent; color:#c2ccd8; font-size:12px; cursor:pointer; font-family:"Google Sans","Roboto",sans-serif; }
#commonCompetencyBoard .cce-set-del:hover { color:#ef4444; }
#commonCompetencyBoard .cce-set-empty-cell { color:#8a94a3; padding:18px; font-size:12.5px; }

/* 소수점 처리 세그먼트 */
/* rounding 행: [힌트(좌측)] … [배분인원 라벨][올림/반올림/내림] 우측 정렬(헤더 등급추가/저장 라인 답습, 봉길님 2026-06-18 확정) */
#commonCompetencyBoard .cce-set-rounding { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; padding-top:13px; padding-left:27px; border-top:1px solid #edf1f6; }
#commonCompetencyBoard .cce-set-rlab { font-size:12px; font-weight:600; color:#3d4552; }
/* board-redesign의 :is(input,button){font-size:inherit}가 명시도로 이겨서 버튼 font-size 직접 지정이 무시됨 → 부모 .cce-set-seg에 지정해 상속시킴(등급추가 12px 톤) */
#commonCompetencyBoard .cce-set-seg { display:inline-flex; background:#eef2f7; border-radius:8px; padding:2px; font-size:12px; }
#commonCompetencyBoard .cce-set-seg-btn { border:0; background:transparent; padding:5px 12px; border-radius:6px; font-size:12px; font-weight:600; color:#8a94a3; cursor:pointer; font-family:"Google Sans","Roboto",sans-serif; }
#commonCompetencyBoard .cce-set-seg-btn.is-on { background:#fff; color:#0061a4; box-shadow:0 1px 2px rgba(15,23,42,.08); }
/* 평가 설정 모달 다듬기(DESIGN.md 고급 톤, 2026-06-21) — 소수점 세그/저장 버튼/날짜 칩만 모달 스코프로 톤다운(다른 화면 영향 차단) */
#commonCompetencyBoard .cce-set-rounding .cce-set-seg { background:#f5f7fa; }
#commonCompetencyBoard .cce-set-rounding .cce-set-seg-btn.is-on { color:#4a5360; box-shadow:0 0 0 1px #ededf2; }
#commonCompetencyBoard .cce-set-modal .cce2-addbtn { border-color:#eef1f5; color:#4a5360; font-weight:500; }
#commonCompetencyBoard .cce-set-period .field--date { white-space:nowrap; border-color:#eef1f5; border-radius:7px; }
#commonCompetencyBoard .cce-set-rhint { font-size:11.5px; color:#aeb8c5; order:-1; margin-right:auto; }

/* 평가항목 빈 상태 */
#commonCompetencyBoard .cce-set-empty { text-align:center; padding:30px 20px; color:#8a94a3; }
#commonCompetencyBoard .cce-set-empty svg { width:28px; height:28px; color:#cdd8e4; margin-bottom:9px; }
#commonCompetencyBoard .cce-set-empty strong { display:block; font-size:13px; color:#6b7686; font-weight:600; margin-bottom:4px; }
#commonCompetencyBoard .cce-set-empty span { font-size:12px; }

/* 평가그룹 순서 드래그 (관리자만) — 행 드래그와 동형 */
#commonCompetencyBoard .cce2-ghandle { display:inline-flex; align-items:center; cursor:grab; color:#cbd5e1; margin-right:2px; flex:0 0 auto; }
#commonCompetencyBoard .cce2-ghandle:hover { color:#8a94a3; }
#commonCompetencyBoard .cce2-ghandle:active { cursor:grabbing; }
#commonCompetencyBoard .cce2-group.group-dragging { opacity:.45; }
#commonCompetencyBoard .cce2-group.group-drop-before { box-shadow: inset 0 3px 0 #0061a4; border-radius:8px; }
#commonCompetencyBoard .cce2-group.group-drop-after { box-shadow: inset 0 -3px 0 #0061a4; border-radius:8px; }

/* 빈 상태(평가 대상자 없음) — 로비 연초록 칩 톤의 연파란 버전 + 추가 버튼 */
#commonCompetencyBoard td.cce-empty-chip-cell { padding:14px 16px; }
#commonCompetencyBoard .cce-empty-chip { display:flex; align-items:center; justify-content:center; gap:14px; background:#eaf2fb; border:1px solid #d4e4f6; border-radius:14px; padding:15px 18px; }
#commonCompetencyBoard .cce-empty-chip-ic { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background:#d4e6fa; color:#0061a4; flex:0 0 auto; }
#commonCompetencyBoard .cce-empty-chip-ic svg { width:20px; height:20px; }
#commonCompetencyBoard .cce-empty-chip-txt { display:flex; flex-direction:column; gap:2px; text-align:left; }
#commonCompetencyBoard .cce-empty-chip-txt strong { font-size:13.5px; font-weight:600; color:#1f4e79; }
#commonCompetencyBoard .cce-empty-chip-txt span { font-size:12px; color:#5a7795; }
#commonCompetencyBoard .cce-empty-chip-btn { margin-left:auto; display:inline-flex; align-items:center; gap:5px; border:1px solid #0061a4; background:#0061a4; color:#fff; border-radius:9px; padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:"Google Sans","Roboto",sans-serif; flex:0 0 auto; }
#commonCompetencyBoard .cce-empty-chip-btn:hover { background:#00518a; }

/* 평가 설정 모달 — Settings 클릭 시 Overview 위에 오버레이 (칸반 .modal/.dialog 톤 답습) */
/* 보드는 z:1 stacking context라 그 안의 fixed 오버레이가 사이드바(z:2) 아래 깔림 → 모달 열릴 때만 보드 z 상승 */
#mainBoardContent #commonCompetencyBoard.cce-has-settings-modal,
#mainBoardContent #commonCompetencyBoard.cce-has-modal { z-index:13000 !important; }
#commonCompetencyBoard .cce-set-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:2000; padding:24px 20px; }
#commonCompetencyBoard .cce-set-modal { width:100%; max-width:720px; max-height:85vh; background:#f7f9fc; border-radius:14px; box-shadow:0 18px 48px -24px rgba(15,23,42,.34); overflow:hidden; display:flex; flex-direction:column; }
#commonCompetencyBoard .cce-set-modal.cce-set-modal-wide { max-width:1040px; }
/* 헤더 = 제품 표준 모달(초대/멤버 모달, --tm-* 토큰) 톤에 맞춤: 18px/700 제목 + 36px 투명 닫기 버튼 */
#commonCompetencyBoard .cce-set-modal-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 18px 24px; background:#fff; border-bottom:1px solid #f1f3f7; }
#commonCompetencyBoard .cce-set-modal-head h2 { margin:0; font-size:18px; font-weight:700; color:#1c2128; letter-spacing:-0.02em; }
#commonCompetencyBoard .cce-set-modal-x { flex:0 0 auto; width:36px; height:36px; border:0; background:transparent; color:var(--md-sys-color-outline); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:9px; transition:background .18s, color .18s; }
#commonCompetencyBoard .cce-set-modal-x svg { width:22px; height:22px; }
#commonCompetencyBoard .cce-set-modal-x:hover { color:var(--md-sys-color-on-surface); background:#eef1f6; }
#commonCompetencyBoard .cce-set-modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 16px 20px; }
/* 모달 안에서는 마지막 카드 여백 정리 */
#commonCompetencyBoard .cce-set-modal-body .cce-set-card:last-child { margin-bottom:0; }
/* 1차/2차 라벨을 섹션 제목 텍스트('평가 기간')에 수직 정렬 — 번호칩(19px)+gap(8px)=27px 들여쓰기.
   번호칩은 시각 마커라 정렬 기준이 아니고, 실제 콘텐츠는 제목 텍스트 라인에 맞춘다(봉길님 2026-06-18). */
#commonCompetencyBoard .cce-set-modal-body .cce-set-period { padding-left:27px; }

/* ===== 평가항목 설정 화면(전체 화면 전환 · 모달 아님) ===== */
/* 좌측 22px = 헤더 제목 도트/글자 시작선, 우측 0 = 프레임 우단. 오버뷰(.cce-groups)와 동일선 정렬
   (봉길님 2026-06-20: 정렬 기준은 블록 외곽이 아니라 헤더 도트선. 오버뷰 .cce-groups가 좌측 22를 씀). */
/* 좌우 거터 = --app-gutter(로비 기준, 6/24 5화면 통일과 동일). 우측 0이면 카드가 화면 끝에 붙어 답답 */
#commonCompetencyBoard .cce-cat-view { padding:2px var(--app-gutter, 24px) 24px var(--app-gutter, 24px); }
/* 헤더 = A안 2단 분리(봉길님 확정 2026-06-20): 위=정체성(제목·BARS/BOS·요약) / 아래=컨트롤(그룹탭·척도·액션).
   타이포 통일: 크기 2종(제목 15 / 본문 12.5~13), weight 600·500, 위계는 색으로. */
#commonCompetencyBoard .cce-cat-bar { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
#commonCompetencyBoard .cce-cat-bar-row { display:flex; align-items:center; gap:12px; min-width:0; }
/* 상단행은 center(토글·초기화·저장 등 모든 박스 수직중앙 일치). 단 큰 제목(15px)은 center 시
   baseline이 작은 토글/설명(12px)보다 2px 처지므로, 제목만 2px 끌어올려 텍스트 baseline을 맞춤(레이아웃 영향 없는 시각 보정). */
#commonCompetencyBoard .cce-cat-bar-top .cce-cat-vtitle { position:relative; top:-2px; }
#commonCompetencyBoard .cce-cat-bar-bottom { padding-top:10px; border-top:1px solid #eef1f5; }
#commonCompetencyBoard .cce-cat-methodseg { flex:0 0 auto; }
/* BARS/BOS 토글 옆 현재 방식 한 줄 설명(동적) — 작고 가벼운 muted 톤, 행이 align-items:center라 수직 중앙 정렬 */
#commonCompetencyBoard .cce-cat-methoddesc { flex:0 1 auto; min-width:0; font-size:12.5px; font-weight:400; line-height:1; color:var(--lobby-rd-text-soft,#8a94a3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 풀네임(정식 명칭)은 위계를 색으로 — 진한 muted, 설명은 soft */
#commonCompetencyBoard .cce-cat-methoddesc b { font-weight:600; color:var(--lobby-rd-text-muted,#5a6573); }
#commonCompetencyBoard .cce-cat-methodseg .cce-set-seg-btn:disabled { opacity:.5; cursor:not-allowed; }
/* 아래줄 우측 컨트롤 사이 세로 구분선 */
#commonCompetencyBoard .cce-cat-bar-vdiv { width:1px; height:18px; flex:0 0 auto; background:#e3e7ec; margin:0 2px; }

/* 평가그룹 탭 = 순수 텍스트 탭(박스/배경칠 없음, 탭 사이 넉넉한 간격). 글자색만으로 활성 구분.
   비활성=회색 글자·클릭 전환, 활성=파란 인라인 input(밑줄)·항상 편집 가능 + hover/focus 시 × 삭제. */
/* board-redesign 전역 :is(input,button){font:inherit}(명시도 1,2,1)가 버튼 font를 가로채므로(=텍스트 커짐),
   각 요소에 font를 명시해 둔다. [[cce-button-font-inherit-trap]] */
#commonCompetencyBoard .cce-cat-gtabs { display:inline-flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; max-width:100%; font-size:13px; font-weight:600; line-height:1.2; flex-wrap:wrap; }
/* 패딩·밑줄은 탭(.cce-cat-gtab)에만 둔다 — 활성/비활성이 동일한 박스 모델을 갖도록(이중 패딩 방지).
   비활성도 투명 2px 하단 보더를 둬 활성 밑줄과 높이를 맞춤 → 글자 세로 정렬 완전 일치. */
#commonCompetencyBoard .cce-cat-gtab { position:relative; display:inline-flex; align-items:center; gap:4px; border:0; border-bottom:2px solid transparent; background:transparent; padding:6px 5px; font-size:13px; font-weight:600; color:#8a94a3; cursor:pointer; font-family:"Google Sans","Roboto",sans-serif; white-space:nowrap; line-height:1.2; }
#commonCompetencyBoard .cce-cat-gtab:hover { color:#0061a4; }
#commonCompetencyBoard .cce-cat-gtab.is-on { color:#0061a4; cursor:default; border-bottom-color:#0061a4; }
/* 활성 탭 안의 입력칸 — 패딩/보더 없음(탭이 담당). 글자만 파랑·볼드. */
#commonCompetencyBoard .cce-cat-gname { border:0; background:transparent; font-size:13px; font-weight:600; color:#0061a4; font-family:"Google Sans","Roboto",sans-serif; padding:0; field-sizing:content; width:auto; min-width:2em; max-width:180px; box-sizing:content-box; cursor:text; line-height:1.2; }
#commonCompetencyBoard .cce-cat-gname:focus { outline:none; }
#commonCompetencyBoard .cce-cat-gname::placeholder { color:#9cb6d2; font-weight:600; }
#commonCompetencyBoard .cce-cat-gname:disabled { cursor:default; }
/* × 삭제 — 평소 숨김, 활성 탭 hover/focus 시에만 노출 */
/* 그룹 옵션 = ⋯ 버튼 + 팝오버(이름변경·삭제). hover× 폭 시프트 대체(봉길님 2026-06-20). ⋯는 항상 표시·폭 고정 */
#commonCompetencyBoard .cce-cat-gmenu-btn { flex:0 0 auto; width:20px; height:20px; border:0; background:transparent; color:#9aa6b4; cursor:pointer; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; padding:0; }
#commonCompetencyBoard .cce-cat-gmenu-btn svg { width:14px; height:14px; }
#commonCompetencyBoard .cce-cat-gmenu-btn:hover { background:#eef1f5; color:#0061a4; }
#commonCompetencyBoard .cce-cat-gmenu { position:absolute; top:calc(100% + 6px); left:0; z-index:90; min-width:124px; padding:5px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 28px -12px rgba(16,32,64,.22); }
#commonCompetencyBoard .cce-cat-gmenu-item { display:block; width:100%; padding:7px 10px; border:0; border-radius:7px; background:transparent; color:#1f232b; font-family:"Google Sans","Roboto",sans-serif; font-size:13px; font-weight:500; line-height:1.2; text-align:left; white-space:nowrap; cursor:pointer; }
#commonCompetencyBoard .cce-cat-gmenu-item:hover { background:#eef1f5; }
#commonCompetencyBoard .cce-cat-gmenu-item.is-danger { color:#d92d20; }
#commonCompetencyBoard .cce-cat-gmenu-item.is-danger:hover { background:#fdecec; }
#commonCompetencyBoard .cce-cat-vtitle { margin:0; font-size:15px; font-weight:600; color:#1f232b; letter-spacing:-.2px; white-space:nowrap; }
/* 요약 = 알약 제거하고 텍스트형으로(위계는 색). 숫자만 진하게(ink), 라벨은 muted */
#commonCompetencyBoard .cce-cat-summary { display:inline-flex; align-items:center; gap:8px; color:#8a94a3; font-size:13px; font-weight:600; white-space:nowrap; line-height:1.2; }
#commonCompetencyBoard .cce-cat-summary b { color:#1f232b; font-weight:600; }
#commonCompetencyBoard .cce-cat-sdot { width:3px; height:3px; border-radius:50%; background:#aab2bd; }
#commonCompetencyBoard .cce-cat-spacer { flex:1 1 auto; }
#commonCompetencyBoard .cce-cat-readonly { font-size:12px; color:#8a94a3; }
/* 그룹 추가 — 그룹탭 줄 끝의 약한 텍스트 버튼(탭과 한 묶음) */
#commonCompetencyBoard .cce-cat-gadd { display:inline-flex; align-items:center; gap:4px; border:0; background:transparent; font-family:"Google Sans","Roboto",sans-serif; font-size:13px; font-weight:600; color:#8a94a3; padding:5px 7px; border-radius:7px; cursor:pointer; line-height:1.2; }
#commonCompetencyBoard .cce-cat-gadd:hover { background:#eef1f5; color:#0061a4; }
#commonCompetencyBoard .cce-cat-gadd svg { width:13px; height:13px; opacity:.8; }
/* 초기화 — 약한 텍스트 버튼(저장 옆) */
#commonCompetencyBoard .cce-cat-reset2 { display:inline-flex; align-items:center; height:30px; padding:0 11px; border:0; background:transparent; font-family:"Google Sans","Roboto",sans-serif; font-size:12.5px; font-weight:600; color:#5b6675; border-radius:7px; cursor:pointer; }
#commonCompetencyBoard .cce-cat-reset2:hover { background:#eef1f5; color:#1f232b; }
/* 미저장 변경사항 알림(초기화 좌측) — 척도/방식/항목 변경 후 저장 안 했을 때 노출. amber 톤 + 점 */
#commonCompetencyBoard .cce-cat-dirty-hint { display:inline-flex; align-items:center; gap:6px; margin-right:2px; font-size:12px; font-weight:600; color:#b56c0a; white-space:nowrap; }
#commonCompetencyBoard .cce-cat-dirty-dot { width:6px; height:6px; border-radius:50%; background:#e0922a; flex:0 0 auto; }
/* BARS 척도 단계 수 스테퍼 — 세그/요약 톤에 맞춘 라이트 칩 */
/* 척도 스테퍼 = 플랫(흰 박스/테두리 제거). 다른 컨트롤과 같은 톤으로 시각 무게 낮춤 */
#commonCompetencyBoard .cce-bars-stepper { display:inline-flex; align-items:center; gap:1px; background:transparent; border:0; border-radius:8px; padding:0; }
#commonCompetencyBoard .cce-bars-step-lab { font-size:13px; font-weight:600; color:#6b7280; margin-right:5px; line-height:1.2; }
#commonCompetencyBoard .cce-bars-step { width:24px; height:24px; border:0; background:transparent; color:#0061a4; font-size:15px; font-weight:600; line-height:1; cursor:pointer; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-family:"Google Sans","Roboto",sans-serif; }
#commonCompetencyBoard .cce-bars-step:hover:not(:disabled) { background:#eaf2fb; }
#commonCompetencyBoard .cce-bars-step:disabled { color:#cfd5dc; cursor:not-allowed; }
#commonCompetencyBoard .cce-bars-step-val { min-width:46px; text-align:center; font-size:13px; font-weight:600; color:#1f232b; line-height:1.2; }

/* 평가항목 = 테이블형(Notion 톤). 대분류=가로 카드 + 좌측 컬러 바, 세부항목=컬럼 행.
   타이포는 작고 가볍게(700/800 지양) — 둔탁함 금지. */
#commonCompetencyBoard .cce-cat-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:stretch; }

#commonCompetencyBoard .cce-cat-card { background:#fff; border:1px solid #eceef1; border-radius:10px; overflow:hidden; transition:box-shadow .15s; }
#commonCompetencyBoard .cce-cat-card:hover { box-shadow:0 1px 3px rgba(20,30,50,.05); }
#commonCompetencyBoard .cce-cat-chead { display:flex; align-items:center; gap:10px; padding:10px 14px 10px 11px; border-bottom:1px solid #eceef1; border-left:3px solid var(--cce-gc,#9aa1ac); background:#fafbfc; }
#commonCompetencyBoard .cce-cat-badge { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#eaf2fb; color:#0061a4; font-size:12px; font-weight:600; }
#commonCompetencyBoard .cce-cat-title { flex:0 0 auto; width:auto; field-sizing:content; min-width:48px; max-width:240px; border:1px solid transparent; background:transparent; border-radius:6px; padding:3px 7px; font-size:13px; font-weight:600; color:#1f232b; letter-spacing:-.1px; font-family:"Google Sans","Roboto",sans-serif; box-sizing:content-box; }
#commonCompetencyBoard .cce-cat-title::placeholder { color:#b6c0cc; font-weight:500; }
#commonCompetencyBoard .cce-cat-title:hover { background:#eef0f3; }
#commonCompetencyBoard .cce-cat-title:focus { outline:none; background:#fff; border-color:#0061a4; }
#commonCompetencyBoard .cce-cat-cdesc { flex:1 1 auto; min-width:0; border:1px solid transparent; background:transparent; border-radius:6px; padding:3px 7px; font-size:13px; color:#9aa1ac; font-family:"Google Sans","Roboto",sans-serif; box-sizing:border-box; }
#commonCompetencyBoard .cce-cat-cdesc::placeholder { color:#c2c8d0; }
#commonCompetencyBoard .cce-cat-cdesc:hover { background:#eef0f3; }
#commonCompetencyBoard .cce-cat-cdesc:focus { outline:none; border-color:#0061a4; background:#fff; color:#51596a; }
#commonCompetencyBoard .cce-cat-cdel { flex:0 0 auto; width:28px; height:28px; border:0; background:transparent; color:#c2c8d0; cursor:pointer; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; }
#commonCompetencyBoard .cce-cat-card:hover .cce-cat-cdel { opacity:1; }
#commonCompetencyBoard .cce-cat-cdel svg { width:16px; height:16px; }
#commonCompetencyBoard .cce-cat-cdel:hover { color:#ef4444; background:#fef2f2; }
#commonCompetencyBoard .cce-cat-ccolor { flex:0 0 auto; width:28px; height:28px; border:0; background:transparent; cursor:pointer; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; padding:0; opacity:0; transition:opacity .12s; }
#commonCompetencyBoard .cce-cat-card:hover .cce-cat-ccolor { opacity:1; }
#commonCompetencyBoard .cce-cat-ccolor:hover { background:#eef0f3; }
#commonCompetencyBoard .cce-cat-swatch { width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(20,30,50,.12); }

#commonCompetencyBoard .cce-cat-colhead { display:grid; grid-template-columns:minmax(140px,210px) 1fr 32px; align-items:center; gap:12px; padding:7px 16px; font-size:12px; font-weight:400; color:#9aa1ac; letter-spacing:.02em; border-bottom:1px solid #eceef1; }
#commonCompetencyBoard .cce-cat-row { display:grid; grid-template-columns:minmax(140px,210px) 1fr 32px; align-items:center; gap:12px; padding:6px 16px; border-bottom:1px solid #f1f3f6; }
#commonCompetencyBoard .cce-cat-row:last-child { border-bottom:0; }
#commonCompetencyBoard .cce-cat-row:hover { background:#fafbfc; }
#commonCompetencyBoard .cce-cat-rname { display:flex; align-items:center; gap:8px; min-width:0; }
#commonCompetencyBoard .cce-cat-bullet { flex:0 0 auto; width:6px; height:6px; border-radius:50%; }
#commonCompetencyBoard .cce-cat-iname { flex:1 1 auto; min-width:0; border:1px solid transparent; background:transparent; border-radius:6px; padding:3px 6px; font-size:13px; font-weight:600; color:#1f232b; font-family:"Google Sans","Roboto",sans-serif; box-sizing:border-box; }
#commonCompetencyBoard .cce-cat-iname::placeholder { color:#b6c0cc; font-weight:400; }
#commonCompetencyBoard .cce-cat-iname:hover { background:#eef0f3; }
#commonCompetencyBoard .cce-cat-iname:focus { outline:none; background:#fff; border-color:#0061a4; }
#commonCompetencyBoard .cce-cat-idesc { width:100%; border:1px solid transparent; background:transparent; border-radius:6px; padding:4px 6px; font-size:13px; line-height:1.5; color:#6b7280; font-family:"Google Sans","Roboto",sans-serif; resize:none; overflow:hidden; min-height:0; field-sizing:content; box-sizing:border-box; }
#commonCompetencyBoard .cce-cat-idesc::placeholder { color:#c2c8d0; }
#commonCompetencyBoard .cce-cat-idesc:hover { background:#eef0f3; }
#commonCompetencyBoard .cce-cat-idesc:focus { outline:none; background:#fff; border-color:#0061a4; color:#51596a; height:auto; resize:vertical; }
#commonCompetencyBoard .cce-cat-rdel { display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; }
#commonCompetencyBoard .cce-cat-row:hover .cce-cat-rdel { opacity:1; }
#commonCompetencyBoard .cce-cat-idel { width:24px; height:24px; border:0; background:transparent; color:#c2c8d0; cursor:pointer; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
#commonCompetencyBoard .cce-cat-idel svg { width:14px; height:14px; }
#commonCompetencyBoard .cce-cat-idel:hover { color:#ef4444; background:#fef2f2; }

#commonCompetencyBoard .cce-cat-additem { display:flex; align-items:center; gap:6px; margin:0; padding:9px 16px; width:100%; border:0; border-top:1px solid #f1f3f6; background:#fff; color:#0061a4; font-size:13px; font-weight:600; cursor:pointer; font-family:"Google Sans","Roboto",sans-serif; text-align:left; }
#commonCompetencyBoard .cce-cat-additem svg { width:14px; height:14px; }
#commonCompetencyBoard .cce-cat-additem:hover { background:#f1f7fd; }

#commonCompetencyBoard .cce-cat-addcard { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px; min-height:0; border:1.5px dashed #d8dfe7; background:#fcfdff; color:#6b7280; border-radius:10px; font-size:13px; font-weight:400; cursor:pointer; font-family:"Google Sans","Roboto",sans-serif; }
#commonCompetencyBoard .cce-cat-addcard svg { width:17px; height:17px; }
#commonCompetencyBoard .cce-cat-addcard:hover { background:#f1f7fd; border-color:#0061a4; color:#0061a4; }
#commonCompetencyBoard .cce-cat-empty { text-align:center; padding:40px 20px; color:#8a94a3; font-size:13px; }
/* input/textarea 텍스트 글리프가 한글 baseline 때문에 배지·불릿보다 살짝 아래로 앉는 것 보정 — 1px 위로 */
#commonCompetencyBoard .cce-cat-title,
#commonCompetencyBoard .cce-cat-cdesc,
#commonCompetencyBoard .cce-cat-iname,
#commonCompetencyBoard .cce-cat-idesc { position: relative; top: -1px; }

/* ===== BARS(행동기준평정척도) 화면 — 세부역량별 5단계 배점 + 행동기준 앵커 정의 ===== */
#commonCompetencyBoard .cce-cat-bitem { padding:11px 16px 13px; border-top:1px solid #f1f3f6; }
#commonCompetencyBoard .cce-cat-bitems .cce-cat-bitem:first-child { border-top:0; }
#commonCompetencyBoard .cce-cat-bitem-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
#commonCompetencyBoard .cce-cat-bitem-head .cce-cat-bullet { flex:0 0 auto; width:6px; height:6px; border-radius:50%; }
#commonCompetencyBoard .cce-cat-bitem-head .cce-cat-idel { opacity:0; transition:opacity .12s; }
#commonCompetencyBoard .cce-cat-bitem:hover .cce-cat-idel { opacity:1; }
#commonCompetencyBoard .cce-cat-bscale { display:grid; grid-template-columns:50px 1fr; gap:10px; align-items:center; margin-bottom:6px; }
#commonCompetencyBoard .cce-cat-bscale:last-child { margin-bottom:0; }
#commonCompetencyBoard .cce-cat-bchip { width:100%; font-size:12.5px; font-weight:700; color:#6b7280; background:#eef0f3; border-radius:6px; padding:3px 0; text-align:center; line-height:1.5; white-space:nowrap; }
#commonCompetencyBoard .cce-cat-banchor { width:100%; border:1px solid #eceef1; border-radius:7px; padding:6px 9px; font-family:"Google Sans","Roboto",sans-serif; font-size:13px; line-height:1.55; color:#6b7280; background:#fff; resize:none; overflow:hidden; field-sizing:content; box-sizing:border-box; }
#commonCompetencyBoard .cce-cat-banchor::placeholder { color:#c2c8d0; }
#commonCompetencyBoard .cce-cat-banchor:hover { background:#fafbfc; }
#commonCompetencyBoard .cce-cat-banchor:focus { outline:none; border-color:#0061a4; color:#1f232b; background:#fff; }

/* 평가항목 수동 저장 버튼 — 미저장(is-dirty)일 때만 활성(파랑), 저장 완료면 비활성(회색). */
#commonCompetencyBoard .cce-cat-save { display:inline-flex; align-items:center; height:30px; padding:0 14px; border:1px solid #0061a4; background:#0061a4; color:#fff; border-radius:8px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s; }
#commonCompetencyBoard .cce-cat-save:hover { background:#00558f; }
#commonCompetencyBoard .cce-cat-save.is-saved, #commonCompetencyBoard .cce-cat-save:disabled { background:#eef0f3; border-color:#e2e5e9; color:#9aa1ac; cursor:default; }

@media (max-width: 1100px) {
  #commonCompetencyBoard .cce-cat-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  #commonCompetencyBoard .cce-cat-vtitle { font-size:13px; }
  #commonCompetencyBoard .cce-cat-colhead { grid-template-columns:1fr 1fr 28px; }
  #commonCompetencyBoard .cce-cat-row { grid-template-columns:1fr 1fr 28px; }
}

#commonCompetencyBoard .cce-eval-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#commonCompetencyBoard .cce-eval-category + .cce-eval-category {
  margin-top: 18px;
}

#commonCompetencyBoard .cce-eval-category h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-eval-item {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 0.8fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.7);
}

#commonCompetencyBoard .cce-eval-item.has-error {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(254, 242, 242, 0.9);
}

/* BARS 평가입력: 항목명 → 행동기준 앵커 선택 리스트 → 의견을 세로 한 컬럼으로. */
#commonCompetencyBoard .cce-eval-item.is-bars {
  grid-template-columns: 1fr;
  gap: 10px;
}

#commonCompetencyBoard .cce-bars-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#commonCompetencyBoard .cce-bars-opt {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

#commonCompetencyBoard .cce-bars-opt:hover {
  border-color: rgba(0, 97, 164, 0.45);
  background: rgba(0, 97, 164, 0.03);
}

#commonCompetencyBoard .cce-bars-opt.is-on,
#commonCompetencyBoard .cce-bars-opt:has(input:checked) {
  border-color: #2f73a8;
  background: rgba(47, 115, 168, 0.06);
}

#commonCompetencyBoard .cce-bars-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

#commonCompetencyBoard .cce-bars-opt-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

#commonCompetencyBoard .cce-bars-opt.is-on .cce-bars-opt-score,
#commonCompetencyBoard .cce-bars-opt:has(input:checked) .cce-bars-opt-score {
  background: #2f73a8;
  color: #ffffff;
}

#commonCompetencyBoard .cce-bars-opt-anchor {
  color: #334155;
  font-size: 13px;
  line-height: 1.5;
}

/* 제출된 평가 결과(읽기전용 1차 + 2차 입력) 패널 — 최종안. 카드 대칭(1차/2차), 컬러 액센트 약하게(파스텔),
   환산+실점수, 등급 칩. 타이포 2종(13/12px)·weight 600/400, 위계는 색(typography-keep-small-light). */
#commonCompetencyBoard .cce-rd-head {
  position: relative;
  flex: 0 0 auto;
  padding: 15px 18px 15px 33px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

#commonCompetencyBoard .cce-rd-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: #0f172a;
}

#commonCompetencyBoard .cce-rd-sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  color: #94a3b8;
}

#commonCompetencyBoard .cce-rd-x {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-outline);
  cursor: pointer;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#commonCompetencyBoard .cce-rd-x:hover { background: #f1f5f9; color: var(--md-sys-color-on-surface); }
#commonCompetencyBoard .cce-rd-x svg { width: 22px; height: 22px; }

#commonCompetencyBoard .cce-rd-body {
  padding: 14px 18px 18px;
}

#commonCompetencyBoard .cce-rd-sec {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 13px;
  background: #f8fafc;
  padding: 14px;
}

#commonCompetencyBoard .cce-rd-sec + .cce-rd-sec { margin-top: 14px; }

#commonCompetencyBoard .cce-rd-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

#commonCompetencyBoard .cce-rd-sec-title { font-size: 13px; font-weight: 600; color: #0f172a; }

#commonCompetencyBoard .cce-rd-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(226, 232, 240, 0.55);
  border-radius: 9px;
  background: #ffffff;
  margin-bottom: 11px;
}

#commonCompetencyBoard .cce-rd-info-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#commonCompetencyBoard .cce-rd-info-cell .k { font-size: 10.5px; color: #94a3b8; }
#commonCompetencyBoard .cce-rd-info-cell .v { font-size: 12px; font-weight: 600; color: #1e293b; }

#commonCompetencyBoard .cce-rd-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

#commonCompetencyBoard .cce-rd-conv { font-size: 27px; font-weight: 600; color: #0f172a; line-height: 1; font-variant-numeric: tabular-nums; }
#commonCompetencyBoard .cce-rd-conv-cap { font-size: 11px; color: #94a3b8; }
#commonCompetencyBoard .cce-rd-raw { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
#commonCompetencyBoard .cce-rd-raw b { font-weight: 600; color: #64748b; }

#commonCompetencyBoard .cce-rd-cat {
  border-left: 3px solid var(--rd-bar, #cbd5e1);
  padding: 2px 0 2px 11px;
  margin-top: 12px;
}

#commonCompetencyBoard .cce-rd-cat:first-of-type { margin-top: 0; }

#commonCompetencyBoard .cce-rd-cat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-name, #94a3b8);
}

#commonCompetencyBoard .cce-rd-item > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
}

#commonCompetencyBoard .cce-rd-item > summary::-webkit-details-marker {
  display: none;
}

#commonCompetencyBoard .cce-rd-namewrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#commonCompetencyBoard .cce-rd-name {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

/* 세부항목 설명(설정의 description) — 항목명 아래 항상 노출, 객관 정의 톤(연회색) */
#commonCompetencyBoard .cce-rd-desc {
  font-size: 11.5px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.45;
}

#commonCompetencyBoard .cce-rd-score-v {
  font-size: 12.5px;
  font-weight: 600;
  color: #3f7fb3;
  font-variant-numeric: tabular-nums;
}

#commonCompetencyBoard .cce-rd-chev {
  width: 13px;
  height: 13px;
  color: #94a3b8;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

#commonCompetencyBoard .cce-rd-item[open] > summary .cce-rd-chev {
  transform: rotate(90deg);
}

/* 좌측 0 — 위쪽 설명(.cce-rd-desc)과 좌측 수직 정렬을 맞춘다 */
#commonCompetencyBoard .cce-rd-detail {
  padding: 2px 0 8px 0;
}

#commonCompetencyBoard .cce-rd-anchor {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.5;
}

/* 의견 — 설명과 좌측 정렬, 스타일은 차등(본문 진하게 + '의견' 연회색 라벨) */
#commonCompetencyBoard .cce-rd-cmt {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  line-height: 1.5;
}

#commonCompetencyBoard .cce-rd-cmt-k {
  margin-right: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #9aa6b2;
}

/* 2차 평가 입력(최종등급 조정) — 등급 칩 + 조정사유. 기존 saveSecondEvaluation 핸들러 재사용. */
#commonCompetencyBoard .cce-rd2-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
  margin-bottom: 2px;
}

#commonCompetencyBoard .cce-rd-grades {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

#commonCompetencyBoard .cce-rd-gradecol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#commonCompetencyBoard .cce-rd-gradechip {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  background: #ffffff;
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#commonCompetencyBoard .cce-rd-gradechip.rec { border-style: dashed; border-color: #b9c4d4; }
#commonCompetencyBoard .cce-rd-gradechip.on { background: #2f73a8; border-color: #2f73a8; border-style: solid; color: #ffffff; }
#commonCompetencyBoard .cce-rd-gradechip:disabled { cursor: default; }

#commonCompetencyBoard .cce-rd-gradelab { font-size: 10px; color: #94a3b8; text-align: center; }
#commonCompetencyBoard .cce-rd-gradecol.on .cce-rd-gradelab { color: #2f73a8; font-weight: 600; }

#commonCompetencyBoard .cce-rd2-reason {
  margin-top: 12px;
  min-height: 42px;
}

#commonCompetencyBoard .cce-rd2-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* 2차 강조(확정 버튼)도 조금 톤다운 — 이 패널 안에서만. */
#commonCompetencyBoard .cce-second-detail .cce-btn.primary {
  background: #2f73a8;
  border-color: #2f73a8;
}

/* 평가 패널의 임시저장(ghost) 버튼 — 텍스트 두께/색 차분하게. */
#commonCompetencyBoard .cce-eval-modal .cce-btn.ghost {
  font-weight: 500;
  color: #64748b;
}

/* 제출/확정 버튼 텍스트 두께도 한 단계 낮춤. */
#commonCompetencyBoard .cce-eval-modal .cce-btn.primary {
  font-weight: 500;
}

/* 1차 평가 결과 섹션 → 1차 평가 입력으로 돌아가는 링크(제출 후 수정). */
#commonCompetencyBoard .cce-rd-editlink {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  color: #2f73a8;
  padding: 2px 6px;
  border-radius: 6px;
}

#commonCompetencyBoard .cce-rd-editlink:hover { background: rgba(47, 115, 168, 0.08); }

/* BOS 1차 평가 입력(3안) — 점수 범례 + 넘버링 밑줄 헤더. 평가항목/세부항목 강조, 관찰행동은 보조. */
#commonCompetencyBoard .cce-bos-legend{display:flex;flex-wrap:wrap;gap:4px 10px;padding:9px 22px;background:#f8fafc;border-bottom:1px solid rgba(226,232,240,.92);font-size:10.5px;color:#64748b}
#commonCompetencyBoard .cce-bos-legend b{color:#2f73a8;font-weight:600}
#commonCompetencyBoard .cce-bos-body{padding:12px 18px 16px}
#commonCompetencyBoard .cce-bos-cat{margin-top:16px}
#commonCompetencyBoard .cce-bos-cat:first-child{margin-top:0}
#commonCompetencyBoard .cce-bos-cathead{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:2px solid var(--rd-bar,#cbd5e1);margin-bottom:2px}
#commonCompetencyBoard .cce-bos-catname{font-size:13px;font-weight:600;color:#0f172a}
#commonCompetencyBoard .cce-bos-catcnt{font-size:10.5px;color:#94a3b8}
#commonCompetencyBoard .cce-bos-item{padding:11px 0;border-top:1px solid rgba(226,232,240,.55)}
#commonCompetencyBoard .cce-bos-cathead + .cce-bos-item{border-top:0}
#commonCompetencyBoard .cce-bos-ihead{display:flex;align-items:baseline;gap:8px}
#commonCompetencyBoard .cce-bos-no{font-size:11px;font-weight:600;color:var(--rd-name,#64748b);font-variant-numeric:tabular-nums;flex:0 0 auto}
#commonCompetencyBoard .cce-bos-name{flex:1;font-size:13.5px;font-weight:600;color:#0f172a}
#commonCompetencyBoard .cce-bos-obs{margin:5px 0 0;font-size:12.5px;font-weight:400;color:#64748b;line-height:1.55}
#commonCompetencyBoard .cce-bos-err{display:block;margin-top:4px;font-size:11.5px;color:#c0392b}
#commonCompetencyBoard .cce-bos-seg{display:flex;gap:4px;margin-top:8px}
#commonCompetencyBoard .cce-bos-seg button{flex:1;height:30px;border:1px solid rgba(226,232,240,.9);border-radius:7px;background:#fff;font-size:13px;font-weight:600;color:#64748b;cursor:pointer;font-variant-numeric:tabular-nums}
#commonCompetencyBoard .cce-bos-seg button:hover{border-color:rgba(47,115,168,.45)}
#commonCompetencyBoard .cce-bos-seg button.on{background:#2f73a8;border-color:#2f73a8;color:#fff}
#commonCompetencyBoard .cce-bos-seg button:disabled{cursor:default;opacity:.7}
#commonCompetencyBoard .cce-bos-cmt{margin-top:8px}
#commonCompetencyBoard .cce-bos-cmt > summary{display:inline-flex;align-items:center;gap:5px;list-style:none;cursor:pointer;font-size:11.5px;font-weight:500;color:#94a3b8;padding:2px 0}
#commonCompetencyBoard .cce-bos-cmt > summary::-webkit-details-marker{display:none}
#commonCompetencyBoard .cce-bos-cmt > summary:hover{color:#2f73a8}
#commonCompetencyBoard .cce-bos-cmt > summary svg{width:14px;height:14px}
#commonCompetencyBoard .cce-bos-cmt[open] > summary{color:#2f73a8}
#commonCompetencyBoard .cce-bos-cmt .cce-textarea{margin-top:6px;min-height:40px}

/* BARS 입력을 BOS 골격(밑줄헤더+번호) 안에 통일 — 앵커 라디오는 유지, 간격만 정돈. */
#commonCompetencyBoard .cce-bos-bars .cce-bars-pick{margin-top:8px}

/* 항목 단위 '의견 필수' — 선택된 항목의 의견 details를 '필수'로 강조(척도 무관). */
#commonCompetencyBoard .cce-bos-cmt.is-required > summary{color:#c0392b}
#commonCompetencyBoard .cce-bos-cmt.is-required .cce-bos-cmt-lbl::after{content:" (필수)";font-weight:600}

/* Criteria 평가항목 설정 — 세부항목 '의견 필수' 체크박스. */
#commonCompetencyBoard .cce-cat-reqcmt{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
#commonCompetencyBoard .cce-cat-reqcmt input{cursor:pointer;margin:0}
#commonCompetencyBoard .cce-cat-reqcmt span{font-size:10.5px;color:#94a3b8;white-space:nowrap}

#commonCompetencyBoard .cce-rd2-note {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

#commonCompetencyBoard .cce-eval-item-main strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

#commonCompetencyBoard .cce-eval-item-main p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

#commonCompetencyBoard .cce-eval-item-main em {
  display: block;
  margin-top: 8px;
  color: #b91c1c;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

#commonCompetencyBoard .cce-eval-item .cce-field.wide {
  grid-column: 1 / -1;
  margin-top: 0;
}

@media (max-width: 960px) {
  #commonCompetencyBoard {
    padding: 0;
  }

  #commonCompetencyBoard .cce-shell {
    width: min(calc(100% - 24px), 1600px);
    gap: 14px;
  }

  #commonCompetencyBoard .header-main {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }

  #commonCompetencyBoard .title-zone {
    flex: 1 1 100%;
    padding-left: 0;
  }

  #commonCompetencyBoard .editable-title {
    max-width: min(100%, 520px);
  }

  #commonCompetencyBoard .integrated-control-bar {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: visible;
  }

  #commonCompetencyBoard .cce-groups {
    padding: 0 0 24px;
  }

  #commonCompetencyBoard .cce-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #commonCompetencyBoard .cce-control-bar {
    margin-left: 0;
    flex: 1 1 100%;
  }

  #commonCompetencyBoard .cce-title-input {
    font-size: 22px;
    max-width: 100%;
  }

  #commonCompetencyBoard .cce-settings-toolbar,
  #commonCompetencyBoard .cce-category-head,
  #commonCompetencyBoard .cce-row-editor,
  #commonCompetencyBoard .cce-row-editor.grades,
  #commonCompetencyBoard .cce-subitem-row,
  #commonCompetencyBoard .cce-group-editor-head,
  #commonCompetencyBoard .cce-group-subgrid,
  #commonCompetencyBoard .cce-bulk-panel,
  #commonCompetencyBoard .cce-eval-item,
  #commonCompetencyBoard .cce-distribution-summary,
  #commonCompetencyBoard .cce-first-result-row,
  #commonCompetencyBoard .cce-report-layout {
    grid-template-columns: 1fr;
  }

  #commonCompetencyBoard .cce-second-group-head {
    flex-direction: column;
    align-items: stretch;
  }

  #commonCompetencyBoard .cce-modal-backdrop {
    align-items: stretch;
    padding: 0;
  }

  #commonCompetencyBoard .cce-eval-modal {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-left: 0;
    border-radius: 0;
  }

  #commonCompetencyBoard .cce-settings-toolbar {
    display: grid;
  }

  #commonCompetencyBoard .cce-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  #commonCompetencyBoard {
    padding: 0;
  }

  #commonCompetencyBoard .cce-shell {
    width: min(calc(100% - 20px), 1600px);
  }

  #commonCompetencyBoard .title-edit {
    padding: 0 6px 0 0;
  }

  #commonCompetencyBoard .editable-title {
    width: 100%;
    font-size: 22px;
    line-height: 38px;
  }

  #commonCompetencyBoard .integrated-control-bar {
    padding: 5px 8px;
  }

  #commonCompetencyBoard .cce2-ghead {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 14px;
  }

  #commonCompetencyBoard .cce2-ghead-left {
    flex-wrap: wrap;
  }

  #commonCompetencyBoard .cce2-ghead-spacer { display: none; }

  #commonCompetencyBoard .cce2-ghead-left .cce-msbar {
    width: 100%;
    margin-left: 29px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  #commonCompetencyBoard .cce2-avg,
  #commonCompetencyBoard .cce2-ghead > .cce2-addbtn {
    margin-left: 29px;
  }

  #commonCompetencyBoard table.cce2-table {
    min-width: 1040px;
  }

  #commonCompetencyBoard .cce-header,
  #commonCompetencyBoard .cce-group-card,
  #commonCompetencyBoard .cce-table-toolbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  #commonCompetencyBoard .cce-table th,
  #commonCompetencyBoard .cce-table td {
    padding: 12px 10px;
  }
}

/* ===== 표 본문 텍스트 통일 (봉길님: 이름·소속·직급·평가자·단계·상태·점수·기간 전부 동일 스타일·세련됨) =====
   파일 끝에 둬서 위의 개별 정의(.cce2-pname/score/stage/st 등)를 확실히 덮어씀.
   기준 = 13px / 500 / 기본색. 색칩(최종등급)·상태 점(dot)만 시각 표시로 남기고 텍스트 크기·굵기·색은 통일. */
#commonCompetencyBoard .cce2-table tbody td { font-size: 12.5px; font-weight: 500; color: #3d4552; }
#commonCompetencyBoard .cce2-pname,
#commonCompetencyBoard .cce2-evname,
#commonCompetencyBoard .cce2-stage,
#commonCompetencyBoard .cce2-period,
#commonCompetencyBoard .cce2-score,
#commonCompetencyBoard .cce2-st { font-size: 12.5px; font-weight: 500; color: #3d4552; white-space: nowrap; }
#commonCompetencyBoard .cce2-period { font-variant-numeric: tabular-nums; }
/* 진행 상태: 텍스트는 통일색, 단계 구분은 점(dot) 색으로만 */
#commonCompetencyBoard .cce2-st.prog,
#commonCompetencyBoard .cce2-st.done,
#commonCompetencyBoard .cce2-st.confirmed,
#commonCompetencyBoard .cce2-st.adjust { color: #3d4552; font-weight: 500; }
/* 빈 값(-)은 옅게 유지(통일 예외) */
#commonCompetencyBoard .cce2-table tbody .cce2-score.none,
#commonCompetencyBoard .cce2-table tbody .cce2-muted { color: var(--lobby-rd-text-soft, #8a94a3); font-weight: 500; }
/* 삭제 버튼 텍스트도 동일 스케일 */
#commonCompetencyBoard .cce2-table tbody .cce2-rowbtn { font-size: 13px; font-weight: 500; }
/* 평가등급 빈 값(-)도 환산점수 빈 값과 동일하게 — 점선 칩 박스 제거하고 평범한 muted '-' */
#commonCompetencyBoard .cce2-table tbody .cce2-grade.none {
  display: inline; min-width: 0; height: auto; padding: 0; border: 0; background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--lobby-rd-text-soft, #8a94a3);
}
/* 피평가자 행 드래그 정렬 (관리자) */
#commonCompetencyBoard tr.cce2-row-drag { cursor: grab; }
#commonCompetencyBoard tr.cce2-row-drag:active { cursor: grabbing; }
#commonCompetencyBoard tr.row-dragging { opacity: 0.45; }
#commonCompetencyBoard tr.row-drop-before td { box-shadow: inset 0 2px 0 0 var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard tr.row-drop-after td { box-shadow: inset 0 -2px 0 0 var(--lobby-rd-primary, #0061a4); }

/* ===== 평가 온보딩 개선 (2026-07-16) — 평가하기 진입 버튼 · 첫 사용 안내 · 초대 유도 ===== */
/* 관리 셀: 평가 진입(.eval=항상 표시) + 삭제(호버 표시)가 한 셀에 공존 */
#commonCompetencyBoard .cce2-row-actions.eval { margin-right: 6px; }
/* 첫 사용 안내 바 — empty-chip과 동일 소프트 블루 톤, 표 아래 한 줄 */
#commonCompetencyBoard .cce2-firsthint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 8px 12px;
  background: #eaf2fb;
  border: 1px solid #d4e4f6;
  border-radius: 9px;
  color: var(--lobby-rd-text, #1f2a37);
  font-size: 12.5px;
  font-weight: 400;
}
#commonCompetencyBoard .cce2-firsthint-ic { display: inline-flex; color: var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard .cce2-firsthint-txt strong { font-weight: 600; color: var(--lobby-rd-primary, #0061a4); }
#commonCompetencyBoard .cce2-firsthint-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--lobby-rd-text-muted, #51606f);
  cursor: pointer;
}
#commonCompetencyBoard .cce2-firsthint-x:hover { background: rgba(0, 97, 164, 0.08); }
/* 평가자 배정 팝오버의 "팀원 초대…" 항목 — 멤버 목록과 구분선 + 프라이머리 컬러 */
.cce2-cellmenu button.invite {
  border-top: 1px solid var(--lobby-rd-border, #e9edf3);
  color: var(--lobby-rd-primary, #0061a4);
  font-weight: 500;
}

/* 엠티 칩 버튼화(2026-07-16) — 안내문 클릭 = 피평가자 추가. 버튼 리셋 + 호버 어포던스 */
#commonCompetencyBoard .cce-empty-chip-act {
  appearance: none;
  width: 100%;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
#commonCompetencyBoard .cce-empty-chip-act:hover {
  background: #e0edfa;
  border-color: var(--lobby-rd-primary, #0061a4);
}