/* ===========================================================================
   operations-redesign.css — 현황관리(상시 업무) 헤더를 칸반/역량평가 톤과 일치
   board-redesign.css는 #mainBoardContent:not(.view-mode-operations)로 operations를
   헤더 톤에서 제외한다. 여기서 .view-mode-operations 스코프로 동일 값을 재적용 →
   board-redesign.css 무수정(칸반 회귀 0). index.html에서 board-redesign.css 뒤에 로드.
   토큰은 lobby-redesign.css의 --lobby-rd-* 사용.
   =========================================================================== */

/* 헤더 컨테이너 — 칸반 .header-main과 동일 배치 (제목 좌 / 컨트롤바 우, space-between) */
#mainBoardContent.view-mode-operations .header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: none;   /* desktop.css의 .header-main max-width:var(--max-width,1248) 무력화 → 본문 폭과 일치 */
  min-width: 0;
  margin: 0;
  padding-right: var(--app-gutter, 24px);   /* 좌우 거터 = 로비 기준(--app-gutter). 5화면 통일 */
  box-sizing: border-box;
}

/* 제목 영역 — 칸반 title-zone과 동일 (도트 12px + 제목 26/700, 좌패딩 22, flex로 폭 차지) */
#mainBoardContent.view-mode-operations .title-zone {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1 1 auto;
  padding-left: var(--app-gutter, 24px);
}
#mainBoardContent.view-mode-operations .proj-dot-lg {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--lobby-rd-primary-2, #2d8fe6);
  box-shadow: 0 0 0 4px rgba(45, 143, 230, 0.13);
}
/* title-edit 래퍼 — 칸반과 동일: 도트~제목~연필 간격 + 편집 시 박스(테두리·링) */
#mainBoardContent.view-mode-operations .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;
}
#mainBoardContent.view-mode-operations .title-zone.is-editing .title-edit {
  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;
}
#mainBoardContent.view-mode-operations .project-title,
#mainBoardContent.view-mode-operations .editable-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 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);
}
#mainBoardContent.view-mode-operations .editable-title::placeholder { color: var(--lobby-rd-text-soft, #8a94a3); }
#mainBoardContent.view-mode-operations .editable-title[readonly] {
  pointer-events: none;
  caret-color: transparent;
}
#mainBoardContent.view-mode-operations .title-zone.is-editing .editable-title {
  pointer-events: auto;
  caret-color: var(--lobby-rd-primary, #0061a4);
}

/* 통합 컨트롤 바 — 사각 라운드 12px + 회색 보더 + 연회색 배경 + inset 하이라이트 */
#mainBoardContent.view-mode-operations .integrated-control-bar,
#mainBoardContent.view-mode-operations .ms-top-actions.integrated-control-bar {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  min-height: 44px;
  padding: 5px 10px;
  border: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 12px;
  background: var(--lobby-rd-surface, #ffffff);   /* 필터 컨트롤 바 = 흰색(V2 통일) */
  box-shadow: inset 0 1px 0 #ffffff;
}
#mainBoardContent.view-mode-operations .integrated-control-bar:hover {
  border-color: var(--lobby-rd-ring-strong, #cdd5e0);
}
#mainBoardContent.view-mode-operations .integrated-control-bar > svg,
#mainBoardContent.view-mode-operations .filter-wrapper svg {
  color: var(--lobby-rd-text-soft, #8a94a3);
}

/* 제목 편집 연필 — 칸반 .title-edit-pen과 동일(평소 opacity 0.55, hover 1, 편집 중 숨김) */
#mainBoardContent.view-mode-operations .title-edit-pen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  padding: 0;
  flex: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lobby-rd-text-soft, #8a94a3);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#mainBoardContent.view-mode-operations .title-zone:hover .title-edit-pen { opacity: 1; }
#mainBoardContent.view-mode-operations .title-edit-pen:hover,
#mainBoardContent.view-mode-operations .title-edit-pen:focus-visible {
  opacity: 1;
  background: var(--lobby-rd-surface-alt, #f8fafc);
  border-color: var(--lobby-rd-border-strong, #dfe4ec);
  color: var(--lobby-rd-primary, #0061a4);
  outline: none;
}
#mainBoardContent.view-mode-operations .title-zone.is-editing .title-edit-pen { display: none; }

/* 저장/취소 그룹 — 편집(is-editing) 시에만 노출 */
#mainBoardContent.view-mode-operations .title-save-group {
  display: none;
  gap: 8px;
  margin-left: 16px;
  flex: none;
  white-space: nowrap;
}
#mainBoardContent.view-mode-operations .title-zone.is-editing .title-save-group { display: inline-flex; }
#mainBoardContent.view-mode-operations .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, #5a6573);
  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;
}
#mainBoardContent.view-mode-operations .title-s-btn.save {
  border-color: var(--lobby-rd-primary, #0061a4);
  background: var(--lobby-rd-primary, #0061a4);
  color: #ffffff;
}
#mainBoardContent.view-mode-operations .title-s-btn:hover,
#mainBoardContent.view-mode-operations .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;
}
#mainBoardContent.view-mode-operations .title-s-btn.save:hover,
#mainBoardContent.view-mode-operations .title-s-btn.save:focus-visible {
  border-color: var(--lobby-rd-primary, #0061a4);
  background: var(--lobby-rd-primary-deep, #00518c);
}

/* 담당자 필터 select — applyDropdownStyle 인라인(color:inherit·bg:#fff)을 눌러 칸반 필터 톤(muted·투명)으로 */
#mainBoardContent.view-mode-operations #operationsAssigneeFilter {
  color: var(--lobby-rd-text-muted, #5a6573) !important;
  background-color: transparent !important;
}

/* 검색 입력 */
#mainBoardContent.view-mode-operations .search-input {
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 13px;
  color: var(--lobby-rd-text, #11151c);
  flex: 1 1 160px;
  min-width: 120px;
  margin-left: 8px;
  padding: 0;
}
#mainBoardContent.view-mode-operations .search-input::placeholder {
  color: var(--lobby-rd-text-soft, #8a94a3);
}

/* 구분선 */
#mainBoardContent.view-mode-operations .bar-divider {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--lobby-rd-border-strong, #dfe4ec);
  opacity: 1;
  flex: 0 0 auto;
}

/* 필터(담당자 등) */
#mainBoardContent.view-mode-operations .filter-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;   /* 필터 라벨 = 보조정보, 600→500 가볍게(위계는 색으로). 컨트롤바 텍스트 통일 */
  color: var(--lobby-rd-text-muted, #5a6573);
  cursor: pointer;
  white-space: nowrap;
}
#mainBoardContent.view-mode-operations .filter-wrapper:hover {
  background: rgba(0, 97, 164, 0.06);
}

/* 탭/토글 버튼 (내 업무만·섹션추가·수정·삭제 등) — 알약, 활성=primary-soft */
#mainBoardContent.view-mode-operations .my-task-btn,
#mainBoardContent.view-mode-operations .ms-top-actions .my-task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;   /* 컨트롤바 텍스트 통일(필터 라벨과 동일 500) */
  color: var(--lobby-rd-text-muted, #5a6573);
  cursor: pointer;
  white-space: nowrap;
}
#mainBoardContent.view-mode-operations .my-task-btn:hover {
  background: var(--lobby-rd-primary-soft, #eef4fb);
}
#mainBoardContent.view-mode-operations .my-task-btn.active {
  background: var(--lobby-rd-primary-soft, #eef4fb);
  color: var(--lobby-rd-primary, #0061a4);
}
/* 행 선택 시 'Update Selected' 텍스트 파란색 */
#mainBoardContent.view-mode-operations #operationsUpdateSelectedBtn.has-selection {
  color: var(--lobby-rd-primary, #0061a4);
}

/* ===== 리스트 셀 디자인 (프로토타입 이식): 보안 배지 + ID/PW 모노 ===== */
#operationsBoard .ops-sec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
#operationsBoard .ops-sec svg { width: 11px; height: 11px; flex: 0 0 auto; }
#operationsBoard .ops-sec.pub { background: var(--lobby-rd-success-soft, #e8f6f0); color: var(--lobby-rd-success, #138a65); }
#operationsBoard .ops-sec.pri { background: var(--lobby-rd-surface-subtle, #eef1f6); color: var(--lobby-rd-text-muted, #5a6573); }
#operationsBoard .ops-mono {
  font-family: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: var(--lobby-rd-text-muted, #5a6573);
  letter-spacing: 0.01em;
}

/* ===== 리스트 상단 KPI 슬림바 (A안) — 칸반 progress-card 톤 ===== */
#operationsBoard .ops-kpi {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: var(--app-gutter, 24px);   /* 좌우 거터 = 로비 기준(--app-gutter) */
  margin-right: var(--app-gutter, 24px);
  min-height: 58px;   /* 칸반 KPI(progress-card) 높이와 동일 */
  padding: 0 20px;
  background: var(--lobby-rd-surface, #ffffff);
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,40,80,0.04), 0 10px 30px -18px rgba(20,40,80,0.18);
  box-sizing: border-box;
}
#operationsBoard .ops-kpi-lab { display: inline-flex; align-items: center; line-height: 1; font-size: 12px; font-weight: 600; color: var(--lobby-rd-text-muted, #5a6573); white-space: nowrap; margin-right: 14px; }
#operationsBoard .ops-kpi-sp { flex: 1 1 auto; }
#operationsBoard .ops-kpi-upd { font-size: 11.5px; color: var(--lobby-rd-text-soft, #8a94a3); white-space: nowrap; }
#operationsBoard .ops-kpi-upd b { color: var(--lobby-rd-text-muted, #4a5360); font-weight: 600; font-family: "Roboto Mono", ui-monospace, monospace; }

/* 칩 나열형 — 칸반 progress의 status-chip과 동일 표준(배경 통일·도트색으로만 구분) */
#operationsBoard .ops-kpi-chips { display: flex; align-items: center; gap: 8px; }
#operationsBoard .ops-kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--lobby-rd-surface-alt, #f8fafc);
  border: 1px solid var(--lobby-rd-border-soft, #eef1f5);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* 한글 라벨 + 라틴 숫자 세로 정렬: line-height 1 고정 + inline-flex 박스 중앙(폰트 줄높이 차이로 숫자가 뜨던 것 교정) */
#operationsBoard .ops-kpi-chip .l { display: inline-flex; align-items: center; line-height: 1; color: var(--lobby-rd-text-muted, #5a6573); }
#operationsBoard .ops-kpi-chip .v { display: inline-flex; align-items: center; line-height: 1; color: var(--lobby-rd-text, #11151c); font-weight: 700; font-variant-numeric: tabular-nums; }
#operationsBoard .ops-kpi-chip .d { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; background: #b9c2cf; }
#operationsBoard .ops-kpi-chip.pub .d { background: var(--lobby-rd-success, #138a65); }

/* ===== 섹션 헤더 — cce 평가그룹 동일(섹션명 더블클릭 편집 + 업무등록·삭제 버튼) ===== */
/* 섹션명 인라인 편집 (cce cce2-gname 동일) */
#operationsBoard .ops-section-title.editable { cursor: text; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; transition: background 0.12s, box-shadow 0.12s; }
#operationsBoard .ops-section-title.editable:hover { background: var(--lobby-rd-surface-subtle, #eef1f6); }
#operationsBoard .ops-section-title.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); }
/* 업무 등록 버튼 (cce cce2-addbtn 동일) */
#operationsBoard .ops-section-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: #ffffff;
  color: #51607a; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; flex: 0 0 auto;
}
#operationsBoard .ops-section-addbtn:hover { background: var(--lobby-rd-surface-alt, #f8fafc); border-color: var(--lobby-rd-border-strong, #dfe4ec); }
#operationsBoard .ops-section-addbtn svg { opacity: .75; flex: 0 0 auto; }
/* 섹션 삭제 직통 버튼(.ops-section-delbtn)은 폐기 — 삭제는 ⋮ 메뉴(.ops-header-controls) 안으로 이동 */

/* 아이콘 버튼 그룹 (멤버현황·초대) — 32x32 사각 라운드.
   desktop.css의 .icon-group{transform:translateY(-3px)}·.icon-btn:last-child{top:2px}가
   operations에 적용돼 버튼이 위로 떠 어긋나던 것 리셋(칸반은 board-redesign이 리셋, operations는 제외됨). */
#mainBoardContent.view-mode-operations .icon-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: none;
}
#mainBoardContent.view-mode-operations .icon-group .icon-btn:last-child {
  top: auto;
}
#mainBoardContent.view-mode-operations .icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: 10px;
  background: var(--lobby-rd-surface, #ffffff);
  color: var(--lobby-rd-text-soft, #8a94a3);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
#mainBoardContent.view-mode-operations .icon-btn:hover {
  background: var(--lobby-rd-primary-soft, #eef4fb);
  border-color: var(--lobby-rd-border-strong, #dfe4ec);
  color: var(--lobby-rd-primary, #0061a4);
  transform: translateY(-1px);
}
#mainBoardContent.view-mode-operations .icon-btn svg {
  width: 16px;
  height: 16px;
}

/* 하단 푸터(app-signature "Designed & Developed by …") 제거 — 현황관리에서만 (봉길님 요청).
   operationsBoard는 inset:0 0 40px 0(인라인)로 하단 40px를 푸터 자리로 비워두므로,
   푸터 숨김 + bottom:0(!important로 인라인 override)로 바닥까지 채워 빈 띠 제거. */
#mainBoardContent.view-mode-operations > #globalFooter { display: none !important; }
#mainBoardContent.view-mode-operations #operationsBoard { bottom: 0 !important; }

/* 수정 버튼 호버 노출(봉길님): 평소 숨김, 행 호버 시 노출. 편집중(.is-editing=완료)은 항상 노출.
   컬럼 너비는 유지되어 레이아웃 안 흔들림(opacity만 토글). 데스크톱 기준. */
#operationsBoard .ops-section-table .ops-edit-btn {
  opacity: 0;
  transition: opacity 0.15s ease;
}
#operationsBoard .ops-section-table tr:hover .ops-edit-btn,
#operationsBoard .ops-section-table .ops-edit-btn.is-editing,
#operationsBoard .ops-section-table .ops-edit-btn:focus-visible {
  opacity: 1;
}