/* ===========================================================================
   milestone-redesign.css — 마일스톤(간트) 헤더 + KPI를 칸반/현황관리/역량평가 톤과 일치
   board-redesign.css는 #mainBoardContent:not(.view-mode-milestone)로 마일스톤을 헤더 톤에서
   제외한다. 여기서 .view-mode-milestone 스코프로 동일 값을 재적용 → board-redesign.css 무수정
   (칸반 회귀 0). operations-redesign.css와 같은 방식. index.html에서 milestone.css 뒤에 로드.
   토큰은 lobby-redesign.css의 --lobby-rd-* 사용. 1단계 = 헤더 + KPI(간트 본문 색은 다음 단계).
   =========================================================================== */

/* ---------- 좌우 여백 = 칸반과 동일 ----------
   칸반은 카드/제목도트가 46px 인셋(#mainBoardContent 패딩 24 + 본문 22). 마일스톤은 #milestoneBoard
   패딩(--ms-pad-x)만 24라 24px 인셋이었음 → 46으로 올려 헤더·KPI·본문 전체를 칸반과 동일 여백으로.
   --ms-pad-x는 milestone.css:87(#milestoneBoard padding) 한 곳에서만 쓰여 안전. */
#mainBoardContent.view-mode-milestone {
  /* 보드 배경 = 공용 로비 톤(4화면 통일). #milestoneBoard는 투명이라 여기서 비침. */
  background: var(--lobby-rd-bg);
  /* 좌우 여백 = 제품 공용 거터(로비 기준 24px). 헤더·KPI·본문 함께·풀폭 stretch라 헤더-본문 항상 정렬.
     #milestoneBoard 패딩 한 곳(milestone.css:87)만 제어. --app-gutter로 5화면 통일 시작. */
  --ms-pad-x: var(--app-gutter, 24px);
  /* 배경색 통일 = 칸반 톤. 마일스톤 기존 보라빛(group rgb(243,243,247)·panel #fdfbff)을
     칸반 컬럼(#f6f8fb)·카드(흰색)와 동일하게. */
  --ms-group-bg: #f6f8fb;
  --ms-card-bg: #ffffff;
}
/* 타임라인 주(week) 눈금 배경도 그룹 톤과 동일하게(하드코딩 rgb(243,243,247) 보정) */
#mainBoardContent.view-mode-milestone .ms-ruler-weeks { background: #f6f8fb; }

/* ---------- 헤더 컨테이너 ---------- */
/* 좌우 인셋은 #milestoneBoard 패딩(--ms-pad-x 22)이 담당 → 현황관리와 동일. 여기선 정렬/세로만. */
#mainBoardContent.view-mode-milestone .ms-top-bar-row {
  align-items: center;
  padding: 0;
  margin-top: -3px;
  margin-bottom: 16px;
}

/* ---------- 제목 영역 = 칸반 구조 그대로 이식 ----------
   .title-zone > .proj-dot-lg + .title-edit > .project-title(.editable-title) + .ms-header-pm
   board-redesign/operations와 동일 값 → 도트-제목 간격 = gap 11 + title-edit padding-left 12 = 23px(칸반 동일). */
#mainBoardContent.view-mode-milestone .ms-header-title.title-zone {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 0 1 auto;
}
#mainBoardContent.view-mode-milestone .ms-header-title .proj-dot-lg {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--lobby-rd-primary-2, #2d8fe6);
  box-shadow: 0 0 0 4px rgba(45, 143, 230, 0.13);
}
#mainBoardContent.view-mode-milestone .ms-header-title .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;
}
#mainBoardContent.view-mode-milestone .ms-header-title .project-title {
  display: block;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  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);
  caret-color: var(--lobby-rd-primary, #0061a4);
}
/* PM 셀렉터 — muted 톤 통일 */
#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm { margin-left: 6px; }
#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lobby-rd-text-soft, #8a94a3);
}
#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn:hover {
  background: var(--lobby-rd-primary-soft, #eef4fb);
}
#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn:hover .ms-header-pm-btn-text {
  color: var(--lobby-rd-primary, #0061a4);
}
#mainBoardContent.view-mode-milestone .ms-header-title .ms-header-pm-btn-text {
  color: var(--lobby-rd-text-muted, #5a6573);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- 통합 컨트롤 바 ---------- */
#mainBoardContent.view-mode-milestone .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;
  flex-wrap: nowrap;
  transition: border-color 0.2s ease;
}
#mainBoardContent.view-mode-milestone .ms-top-actions.integrated-control-bar:hover {
  border-color: var(--lobby-rd-ring-strong, #cdd5e0);
}
#mainBoardContent.view-mode-milestone .ms-top-actions > svg {
  flex: none;
  color: var(--lobby-rd-text-soft, #8a94a3);
}

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

/* 구분선 — 전역 .bar-divider{opacity:.3} 보정 */
#mainBoardContent.view-mode-milestone .ms-top-actions .bar-divider {
  width: 1px;
  height: 18px;
  margin: 0 8px;
  flex: 0 0 auto;
  background: var(--lobby-rd-border-strong, #dfe4ec);
  opacity: 1;
}

/* 텍스트 알약 버튼 (Add Team/Add Epic/Add Day off/Task Management) */
#mainBoardContent.view-mode-milestone .ms-top-actions .my-task-btn,
#mainBoardContent.view-mode-milestone .ms-top-actions .my-task-btn.ms-neutral-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  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;
  transition: background 0.18s ease, color 0.18s ease;
}
#mainBoardContent.view-mode-milestone .ms-top-actions .my-task-btn:hover,
#mainBoardContent.view-mode-milestone .ms-top-actions .my-task-btn.ms-neutral-btn:hover {
  background: var(--lobby-rd-primary-soft, #eef4fb);
  color: var(--lobby-rd-primary, #0061a4);
}
#mainBoardContent.view-mode-milestone .ms-top-actions .my-task-btn.active {
  background: var(--lobby-rd-primary-soft, #eef4fb);
  color: var(--lobby-rd-primary, #0061a4);
}
/* Task Management 내부 span의 인라인 보라색(#9333ea)을 muted로 — JS에서도 제거하나 안전망. inherit이면 바 기본 진한색 상속해 옆 알약(muted)보다 진해짐 → muted 고정 */
#mainBoardContent.view-mode-milestone .ms-top-actions #msTeamMenuBtn span { color: var(--lobby-rd-text-muted, #5a6573) !important; }

/* 아이콘 그룹 (성과요약 접기·멤버현황·멤버초대) — desktop.css transform/top 보정 */
#mainBoardContent.view-mode-milestone .ms-top-actions .icon-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  transform: none;
}
#mainBoardContent.view-mode-milestone .ms-top-actions .icon-group .icon-btn,
#mainBoardContent.view-mode-milestone .ms-top-actions .icon-group .icon-btn:last-child {
  position: static;
  top: auto;
  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);
  box-shadow: inset 0 1px 0 var(--lobby-rd-surface-alt, #f8fafc);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
#mainBoardContent.view-mode-milestone .ms-top-actions .icon-group .icon-btn:hover {
  background: var(--lobby-rd-primary-soft, #eef4fb);
  border-color: var(--lobby-rd-ring-strong, #cdd5e0);
  color: var(--lobby-rd-primary, #0061a4);
  transform: translateY(-1px);
}
#mainBoardContent.view-mode-milestone .ms-top-actions .icon-group .icon-btn svg {
  width: 16px;
  height: 16px;
}
/* 성과요약 차트 아이콘 인라인 보라색(#6c40d3) 중화 — JS에서도 제거하나 안전망 */
#mainBoardContent.view-mode-milestone .ms-top-actions #msStatsCollapseBtn span { color: inherit !important; }

/* ===========================================================================
   KPI 카드 — 회색 박스 → 흰 카드 + 소프트섀도 + 3지표(구분선) + primary fill
   =========================================================================== */
#mainBoardContent.view-mode-milestone .ms-stats-bar-row { margin-bottom: 16px; }

#mainBoardContent.view-mode-milestone .ms-progress-card {
  border-radius: var(--lobby-rd-radius-lg, 18px);
  padding: 16px 22px;
  background: linear-gradient(180deg, var(--lobby-rd-surface, #fff) 0%, var(--lobby-rd-surface-elevated, #fcfdff) 100%);
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  box-shadow: var(--lobby-rd-shadow-card, 0 1px 2px rgba(16,24,40,.04), 0 10px 28px -14px rgba(16,32,64,.16));
  gap: 0;
}
#mainBoardContent.view-mode-milestone .ms-progress-item {
  padding: 2px 0;
  background: transparent;
  border-radius: 0;
}
#mainBoardContent.view-mode-milestone .ms-progress-item + .ms-progress-item {
  border-left: 1px solid var(--lobby-rd-border-soft, #edf2f7);
  padding-left: 28px;
  margin-left: 28px;
}
#mainBoardContent.view-mode-milestone .ms-progress-head { justify-content: space-between; }
#mainBoardContent.view-mode-milestone .ms-progress-head .ttl {
  font-size: 13px;
  font-weight: 700;
  color: var(--lobby-rd-text, #11151c);
}
#mainBoardContent.view-mode-milestone .ms-progress-head .meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--lobby-rd-text-soft, #8a94a3);
}
#mainBoardContent.view-mode-milestone .ms-progress-row { gap: 12px; }
#mainBoardContent.view-mode-milestone .ms-progress-track {
  height: 6px;
  border: 1px solid var(--lobby-rd-border-soft, #edf2f7);
  background: var(--lobby-rd-surface-subtle, #eef1f6);
  box-shadow: inset 0 1px 0 #ffffff;
}
#mainBoardContent.view-mode-milestone .ms-progress-fill {
  background: linear-gradient(90deg, var(--lobby-rd-primary-2, #2d8fe6), var(--lobby-rd-primary, #0061a4));
}
/* pct: 절대배치 → 트랙 우측 인라인, 18px primary */
#mainBoardContent.view-mode-milestone .ms-progress-pct {
  position: static;
  top: auto;
  right: auto;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--lobby-rd-primary, #0061a4);
  flex: 0 0 auto;
}

/* ===========================================================================
   2단계 — 간트 본문 (B안 "솔리드 필", 2026-07-12 봉길님 확정)
   시안: _design/milestone-body-redesign.html (B). 라이트 테마만 재정의(다크는 기존 유지).
   바 = 상태색 soft 트랙 + solid 진행 채움 pill. 상태색 = lobby 단일소스
   (진행 #2d8fe6 / 완료 #138a65 / 지연 #e5484d / 예정 무채색 #b9c2cf).
   진행률 채움 폭은 JS(31_project_milestone.js 카드 렌더)가 --ms-pct(0~100)로 주입.
   기존 milestone.css의 !important(완료 페이드·지연 핑크배경)와 싸우므로
   동일 prefix(html:not([data-theme="dark"])) + !important + 후행 로드로 이긴다.
   =========================================================================== */

/* ---------- 에픽 바: 난이도(Lv)색 카드 → 상태색 필 pill ---------- */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card {
  /* 기본 = 예정(todo) 무채색. 상태별로 아래에서 재정의 — 자식(pct)도 이 변수 상속 */
  --bar-solid: #b9c2cf;
  --bar-soft: #f0f3f7;
  background-color: var(--bar-soft) !important;
  background-image: none !important;
  border: 0 !important;              /* 난이도 border-left 색 제거 */
  border-radius: 999px;
  /* 1px 헤어라인 링 — 바 디테일(2026-07-12 봉길님 확정, 시안 milestone-refine 2안) */
  box-shadow: inset 0 0 0 1px rgba(17, 21, 28, 0.05) !important;
  padding: 0;
  opacity: 1 !important;             /* 완료 페이드(0.45/0.6) 해제 — B안은 솔리드 표시 */
  filter: none !important;
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="doing"] {
  --bar-solid: var(--lobby-rd-doing, #2d8fe6);
  --bar-soft: var(--lobby-rd-doing-soft, #eef4fb);
  background-color: var(--bar-soft) !important;
}
/* background-color 재명시: 기존 [data-status="done"]{background:#fff !important}(2396)가
   속성 셀렉터로 특이도가 더 높아 base 룰을 이김 → 동일 특이도+후행으로 재정의 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"],
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done {
  --bar-solid: var(--lobby-rd-success, #138a65);
  --bar-soft: var(--lobby-rd-success-soft, #e8f6f0);
  background-color: var(--bar-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(17, 21, 28, 0.05) !important; /* 링 — 기존 done{box-shadow:none !important} 무력화 */
}
/* 완료 톤다운 (2026-07-12 봉길님 확정, 시안 _design/milestone-bar-tone.html 1안):
   완료는 solid 채움 없이 soft 트랙 + 그린 텍스트로 가라앉힘 —
   진한 색은 진행(블루)·지연(레드)만 남겨 "주의가 필요한 것만 색을 갖는다" */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"]::before,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done::before {
  display: none;
}
/* 지연은 todo/doing 상태값을 덮는다(done엔 is-overdue가 안 붙음 — JS에서 제외) */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue {
  --bar-solid: var(--lobby-rd-danger, #e5484d);
  --bar-soft: var(--lobby-rd-danger-soft, #fdecec);
  background-color: var(--bar-soft) !important;  /* 기존 #fffafa !important 무력화 */
  box-shadow: inset 0 0 0 1px rgba(17, 21, 28, 0.05) !important; /* 기존 빨간 링 → 헤어라인 링 */
}
/* 진행 채움 — pill 좌측부터 --ms-pct 폭 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--ms-pct, 0%);
  background: var(--bar-solid);
  border-radius: 999px;
}
/* 채움 미세 그라데이션(상→하) — 바 디테일 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="doing"]:not(.is-overdue)::before {
  background: linear-gradient(180deg, #45a2f1 0%, var(--lobby-rd-doing, #2d8fe6) 100%);
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue::before {
  background: linear-gradient(180deg, #eb666b 0%, var(--lobby-rd-danger, #e5484d) 100%);
}
/* 호버 — 기존 transform/핑크배경/링 전부 무력화, 소프트 섀도만 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card:hover,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue:hover,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done:hover,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"]:hover {
  background-color: var(--bar-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(17, 21, 28, 0.07), 0 3px 10px -2px rgba(16, 32, 64, 0.22) !important;
  transform: none !important;
  opacity: 1 !important;
}

/* ---------- 바 텍스트 ---------- */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-content {
  position: relative;      /* ::before(채움) 위에 표시 */
  z-index: 1;
  padding: 0 12px;
  align-items: center;
  gap: 10px;                /* 에픽명-완료율 최소 간격(겹침 보정) */
}
/* 체크(완료 표식) + 3자식(체크·제목·%)에서도 제목이 좌측 정렬 유지되도록 flex 명시 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-title { flex: 1 1 auto; min-width: 0; }
#mainBoardContent.view-mode-milestone .ms-task-chk {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--lobby-rd-success-strong, #0f7657);
  margin-right: -4px;       /* gap 10 - 체크·제목 간은 6 정도로 타이트하게 */
}
/* 좁은 바(<80px, JS가 is-narrow 부여): 완료율 숨겨 제목과 겹침 방지 */
#mainBoardContent.view-mode-milestone .ms-task-card.is-narrow .ms-task-pct { display: none; }

/* ---------- 투톤 클립: 채움 위 글자 = 흰색, 채움 밖 = 본문색 ----------
   기본 텍스트 레이어 위에 동일 레이아웃 오버레이(흰 글자)를 겹치고
   clip-path로 채움 폭(--ms-pct)만큼만 노출 → 경계에서 정확히 색 전환.
   다크 테마는 채움 미적용 상태라 오버레이 숨김. */
.ms-task-content-onfill { display: none; }
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-content-onfill {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--ms-pct, 0%)) 0 0);
}
/* 오버레이 흰색은 어떤 상태별 텍스트색 룰(!important)보다도 이겨야 함 —
   지연 제목(.is-overdue .ms-task-title)·todo pct 등 상위 특이도 룰을 카드 레벨로 눌러줌 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card .ms-task-content-onfill .ms-task-title,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card .ms-task-content-onfill .ms-task-pct,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue .ms-task-content-onfill .ms-task-title,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="todo"]:not(.is-overdue) .ms-task-content-onfill .ms-task-pct {
  color: #ffffff !important;
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;           /* 한글/라틴 혼용 수직 정렬 고정 */
  color: var(--lobby-rd-text, #11151c);
  opacity: 1 !important;
}
/* pct = 상태색 텍스트(카드의 --bar-solid 상속). 기존 pct-low/high 색(!important) 무력화 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card .ms-task-pct {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  margin-top: 0;
  color: var(--bar-solid) !important;
  opacity: 1 !important;
}
/* 예정(0%)은 무채색 solid가 옅어 muted 텍스트로 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="todo"]:not(.is-overdue) .ms-task-pct {
  color: var(--lobby-rd-text-soft, #8a94a3) !important;
}
/* 완료 = soft 트랙 위 그린 텍스트(취소선) + 기존 opacity .5/#c53030 무력화 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"] .ms-task-title,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"] .ms-task-pct,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done .ms-task-title,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done .ms-task-pct {
  color: var(--lobby-rd-success-strong, #0f7657) !important;
  opacity: 1 !important;
}
/* 취소선 제거(2026-07-12 봉길님) — 완료 표현은 soft 트랙+그린 텍스트만으로 충분 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card[data-status="done"] .ms-task-title,
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-done .ms-task-title {
  text-decoration: none;
}
/* 지연 제목 = 기존 #c53030 !important 무력화(본문색 유지, 상태는 채움/pct가 표현) */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-task-card.is-overdue .ms-task-title {
  color: var(--lobby-rd-text, #11151c) !important;
}

/* ---------- 타임라인 눈금 — 800/하드코딩 블루 제거, 로비 톤 ---------- */
#mainBoardContent.view-mode-milestone .ms-ruler-month {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lobby-rd-primary, #0061a4);
  white-space: nowrap;   /* 좁은 월 조각에서 줄바꿈 깨짐 방지(라벨은 JS가 폭 기준 축약) */
  overflow: hidden;
}
#mainBoardContent.view-mode-milestone .ms-ruler-week {
  font-weight: 500;
  color: var(--lobby-rd-text-soft, #8a94a3);
  white-space: nowrap;   /* 좁은 조각 줄바꿈 깨짐 방지(라벨은 JS가 폭 기준 축약) */
  overflow: hidden;
}
#mainBoardContent.view-mode-milestone .ms-ruler-daynum {
  font-weight: 500;
  color: rgba(17, 21, 28, 0.78);
}
#mainBoardContent.view-mode-milestone .ms-ruler-dow {
  font-weight: 400;
  color: var(--lobby-rd-text-soft, #8a94a3);
}
/* 주말 = soft red(#ef4444 → 시맨틱 danger 저채도) */
#mainBoardContent.view-mode-milestone .ms-ruler-day.weekend .ms-ruler-daynum { color: rgba(229, 72, 77, 0.72); }
#mainBoardContent.view-mode-milestone .ms-ruler-day.weekend .ms-ruler-dow { color: rgba(229, 72, 77, 0.5); }
/* 오늘 = 컬럼 하이라이트(#dbeafe) 대신 primary pill.
   ⚠️정렬: 모든 날짜 숫자를 동일한 20px 박스로 렌더(오늘만 배경) — 오늘만 커지면
   다른 일자와 수직 정렬이 깨진다(봉길님 지적). 분기 줌은 셀이 좁아 박스 해제 */
#mainBoardContent.view-mode-milestone .ms-ruler-daynum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
}
#mainBoardContent.view-mode-milestone #milestoneBoard.is-zoom-quarter .ms-ruler-daynum {
  width: auto;
  height: auto;
  border-radius: 0;
}
#mainBoardContent.view-mode-milestone .ms-ruler-day.is-today { background-color: transparent; }
#mainBoardContent.view-mode-milestone .ms-ruler-day.is-today .ms-ruler-daynum {
  background: var(--lobby-rd-primary, #0061a4);
  color: #ffffff;
  font-weight: 600;
}
#mainBoardContent.view-mode-milestone .ms-ruler-day.is-today .ms-ruler-dow {
  color: var(--lobby-rd-primary, #0061a4);
  font-weight: 500;
}

/* ---------- 연결선 — 기본 뉴트럴 그레이, 지연만 danger ----------
   JS가 stroke를 "속성"으로 지정(#6498dc / rgb(253, 116, 116)) → CSS가 속성을 이김.
   1.5px(기존 1.1 — 격자선에 묻힘)·화살표는 markerUnits=strokeWidth라 자동 확대.
   출발점 도트(circle)는 JS drawStartDot이 추가, 색은 여기서 오버라이드. */
#mainBoardContent.view-mode-milestone .ms-succ-layer path[stroke="#6498dc"] {
  stroke: #b6c1cf;
  stroke-width: 1.5;
}
#mainBoardContent.view-mode-milestone .ms-succ-layer marker#msSuccArrow path { fill: #b6c1cf; }
#mainBoardContent.view-mode-milestone .ms-succ-layer circle[fill="#6498dc"] { fill: #b6c1cf; }
#mainBoardContent.view-mode-milestone .ms-succ-layer path[stroke="rgb(253, 116, 116)"] {
  stroke: var(--lobby-rd-danger, #e5484d);
  stroke-width: 1.5;
}
#mainBoardContent.view-mode-milestone .ms-succ-layer marker#msSuccArrowDelay path { fill: var(--lobby-rd-danger, #e5484d); }
#mainBoardContent.view-mode-milestone .ms-succ-layer circle[fill="rgb(253, 116, 116)"] { fill: var(--lobby-rd-danger, #e5484d); }

/* ---------- 우하단 뷰 컨트롤 — 14px/800 pill → 세그먼트 표준 톤 ---------- */
#mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-zoom-controls {
  border-radius: 12px;
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--lobby-rd-shadow-soft, 0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,32,64,.12));
  padding: 5px 6px;
  gap: 2px;
}
#mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-zoom-controls button {
  padding: 7px 13px;
  border-radius: 8px;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--lobby-rd-text-soft, #8a94a3);
}
#mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-zoom-controls button:hover {
  background: var(--lobby-rd-surface-alt, #f8fafc);
  color: var(--lobby-rd-text-muted, #5a6573);
}
#mainBoardContent.view-mode-milestone #msBodyRightBottom .ms-zoom-controls button.is-active {
  background: var(--lobby-rd-primary-soft, #eef4fb);
  color: var(--lobby-rd-primary, #0061a4);
  font-weight: 600;
}

/* ---------- 좌측 패널 A(기간) — 800/블루 하드코딩 톤다운 ---------- */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-label {
  font-weight: 500;
  color: var(--lobby-rd-text-soft, #8a94a3);
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-value { color: var(--lobby-rd-text, #11151c); }
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-date { font-weight: 600; }
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-date-wrap:hover .ms-pa-date { color: var(--lobby-rd-primary, #0061a4); }

/* ---------- 좌측 패널 B(카테고리 리스트) — 800→600, 블루 텍스트→본문색 ---------- */
#mainBoardContent.view-mode-milestone .ms-category-item.ms-team-header {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--lobby-rd-text, #11151c);
}
#mainBoardContent.view-mode-milestone .ms-category-item.ms-team-header .ms-team-title .text {
  color: var(--lobby-rd-text, #11151c);
}
#mainBoardContent.view-mode-milestone .ms-accordion-arrow { color: var(--lobby-rd-text-soft, #8a94a3); }
#mainBoardContent.view-mode-milestone .ms-team-count {
  background: var(--lobby-rd-surface-subtle, #eef1f6);
  color: var(--lobby-rd-text-muted, #5a6573);
  font-weight: 600;
}

/* ===========================================================================
   3단계 폴리시 (2026-07-12) — 오늘 컬럼·좌측 패널 디테일·스크롤바
   =========================================================================== */

/* 오늘 컬럼: 강한 #dbeafe 밴드 → 옅은 primary 틴트 (룰러 pill이 오늘을 이미 표시) */
#mainBoardContent.view-mode-milestone .ms-timeline-col.is-today {
  background-color: rgba(45, 143, 230, 0.07);
}

/* 잔여일: 900/#2563eb → 600/primary, 경과 표기는 soft(기존 인라인 #3b3b3b → .ms-pa-elapsed) */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-remaining {
  font-weight: 600;
  color: var(--lobby-rd-primary, #0061a4);
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-remaining .ms-pa-elapsed {
  font-size: 90%;
  font-weight: 400;
  color: var(--lobby-rd-text-soft, #8a94a3);
}

/* 뷰 전환 버튼: 블루 보더/800 → 고스트 세컨더리(헤어라인+muted 500) */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-add-cat-btn {
  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-family: "Google Sans", "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-add-cat-btn:hover {
  border-color: var(--lobby-rd-ring-strong, #cdd5e0);
  background: var(--lobby-rd-surface-alt, #f8fafc);
  color: var(--lobby-rd-primary, #0061a4);
}

/* 좌측 카테고리 행: 700/#1e293b → 500/muted (위계는 색으로) */
#mainBoardContent.view-mode-milestone .ms-cat-title {
  font-weight: 500;
  color: var(--lobby-rd-text-muted, #5a6573);
}

/* ===========================================================================
   5단계 — 통합 보드 (2026-07-12 봉길님 확정, 시안 _design/milestone-unified.html 1안)
   분리 4카드(기간/리스트/눈금/차트) → 단일 카드 2×2, 내부는 헤어라인으로만 구분.
   DOM 무수정 — ms-body-grid를 카드 프레임으로, ms-group/panel은 투명화.
   상단 높이 = --ms-mini-panel-h 하나가 기간존·눈금 공유(눈금 행이 fr 단위라 자동 신축).
   =========================================================================== */
/* 기간존 높이 120 — 112는 경과 캡션과 전환 버튼 사이가 4px로 답답(봉길님 지적).
   버튼이 margin-top:auto라 늘어난 공간이 전부 캡션-버튼 사이 숨통이 됨. 눈금(fr행)은 자동 신축 */
#mainBoardContent.view-mode-milestone { --ms-mini-panel-h: 120px; }

/* 좌/우 영역은 별도 카드로 분리(봉길님: 붙어 있으면 경계가 안 보여 마감 덜 된 느낌)
   — 카드 프레임은 그룹(좌=기간존+리스트 / 우=눈금+차트)에, 그리드는 간격만 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-body-grid {
  gap: 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-group {
  background: var(--lobby-rd-surface, #ffffff);
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: var(--lobby-rd-radius-lg, 18px);
  box-shadow: var(--lobby-rd-shadow-soft, 0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,32,64,.12));
  overflow: hidden;
  padding: 0;
  gap: 0;
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-panel-card {
  background: transparent;
  border-radius: 0;
}
/* 기간존(panel-a)·눈금(panel-c) = "헤더 밴드" — 본문과의 경계 강화(봉길님 확정 절충):
   배경 한 톤 깊게 + 하단 경계선 border-soft → border-strong */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone #msBodyLeftTop.ms-panel-a {
  border: 0;
  border-bottom: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  border-radius: 0;
  padding: 12px 16px 11px;
  background: linear-gradient(180deg, #fdfeff 0%, #f7f9fc 100%);
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-panel-card.ms-panel-c {
  border-bottom: 1px solid var(--lobby-rd-border-strong, #dfe4ec);
  background: linear-gradient(180deg, #fdfeff 0%, #f7f9fc 100%);
}
/* 주(週) 밴드 배경도 눈금 톤에 흡수(1단계 #f6f8fb 대체) */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-ruler-weeks { background: transparent; }

/* 눈금 가로 구분선 — 월/주차/일 행 사이 헤어라인(봉길님: 구분선 없으니 만들다 만 느낌).
   기존 milestone.css가 border-bottom: none !important라 !important로 재정의 */
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-ruler-months {
  border-bottom: 1px solid var(--lobby-rd-border-soft, #edf2f7) !important;
}
html:not([data-theme="dark"]) #mainBoardContent.view-mode-milestone .ms-ruler-weeks {
  border-bottom: 1px solid var(--lobby-rd-border-soft, #edf2f7) !important;
}

/* ---------- 기간존 내부 (아이브로 + D-day 뱃지 + 경과 트랙) ---------- */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-panel-a-wrap { gap: 4px; justify-content: center; }
/* 슬롯을 flex column으로 — 기존 block이라 버튼의 margin-top:auto가 무효(캡션-버튼 0px 붙음) */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-slot-all {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-row { margin-bottom: 0; }
/* 원라인 미터: 날짜(좌) + 남음(우) 한 줄 */
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-line1 .ms-pa-value { font-size: 12.5px; }
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-rm {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lobby-rd-primary, #0061a4);
  white-space: nowrap;
  line-height: 1;
  flex: 0 0 auto;
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-el {
  font-size: 11px;
  color: var(--lobby-rd-text-soft, #8a94a3);
  line-height: 1.2;
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--lobby-rd-surface-subtle, #eef1f6);
  overflow: hidden;
  margin: 3px 0 4px;
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lobby-rd-primary-2, #2d8fe6), var(--lobby-rd-primary, #0061a4));
}
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-pa-actions { margin-top: auto; width: 100%; }
#mainBoardContent.view-mode-milestone #msBodyLeftTop .ms-add-cat-btn { height: 28px; }

/* ---------- 카테고리 행 상태 도트 ---------- */
/* 기존 .ms-cat-content는 column flex(도트가 이름 아래로 떨어짐) → row로 전환 */
#mainBoardContent.view-mode-milestone .ms-tree-child .ms-cat-content {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
#mainBoardContent.view-mode-milestone .ms-tree-child .ms-cat-title { flex: 0 1 auto; min-width: 0; }
#mainBoardContent.view-mode-milestone .ms-cat-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  padding-right: 2px;
  flex: 0 0 auto;
}
/* 에픽 2개 이상(멀티 레인) 행: 도트를 세로로 쌓아 각 레인과 1:1 정렬 —
   레인 피치 = 카드 32 + 갭 4 = 36px → 도트(6px) 간 gap 30px이면 중심 간격 36px */
#mainBoardContent.view-mode-milestone .ms-cat-dots:has(i + i) {
  flex-direction: column;
  gap: 30px;
}
#mainBoardContent.view-mode-milestone .ms-cat-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
#mainBoardContent.view-mode-milestone .ms-cat-dots i.done { background: var(--lobby-rd-success, #138a65); }
#mainBoardContent.view-mode-milestone .ms-cat-dots i.doing { background: var(--lobby-rd-doing, #2d8fe6); }
#mainBoardContent.view-mode-milestone .ms-cat-dots i.overdue { background: var(--lobby-rd-danger, #e5484d); }
#mainBoardContent.view-mode-milestone .ms-cat-dots i.todo { background: #b9c2cf; }

/* ---------- 카테고리 보기 모드 (스마트 플랫, 2026-07-12 봉길님 확정 2안) ---------- */
/* 보라 장식색 제거 → 팀 뷰와 동일 톤 */
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-category-item.ms-team-header {
  background-color: var(--lobby-rd-surface-alt, #f8fafc);
  color: var(--lobby-rd-text, #11151c);
}
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-category-item.ms-team-header .ms-team-title .text {
  color: var(--lobby-rd-text, #11151c);
}
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-track-row.ms-header-track {
  background-color: var(--lobby-rd-surface-alt, #f8fafc);
}
#mainBoardContent.view-mode-milestone #milestoneBoard.ms-view-category .ms-category-item.ms-team-header.is-team-selected .ms-team-title .text {
  color: var(--lobby-rd-primary, #0061a4) !important;
}
/* 플랫 행: 카테고리명(본문색) + 팀 보조 텍스트 + 도트, 들여쓰기 없음 */
#mainBoardContent.view-mode-milestone .ms-cat-flat { padding-left: 16px; }
#mainBoardContent.view-mode-milestone .ms-cat-flat .ms-cat-title {
  color: var(--lobby-rd-text, #11151c);
  flex: 0 1 auto;
  min-width: 0;
}
#mainBoardContent.view-mode-milestone .ms-cat-team {
  font-size: 11px;
  color: var(--lobby-rd-text-soft, #8a94a3);
  margin-left: 7px;
  flex: 0 0 auto;
  line-height: 1;
}

/* ---------- 에픽 바 커스텀 툴팁 (body 직속 — view-mode 스코프 밖) ---------- */
.ms-bar-tooltip {
  position: fixed;
  z-index: 4000;
  display: none;
  max-width: 300px;
  padding: 10px 12px 9px;
  background: var(--lobby-rd-surface, #ffffff);
  border: 1px solid var(--lobby-rd-border, #e9edf3);
  border-radius: 10px;
  box-shadow: var(--lobby-rd-shadow-overlay, 0 18px 48px -24px rgba(15, 23, 42, 0.38));
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  font-family: "Google Sans", "Roboto", sans-serif;
}
.ms-bar-tooltip.is-on { opacity: 1; transform: none; }
.ms-bar-tooltip .tt-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lobby-rd-text, #11151c);
  margin-bottom: 6px;
  line-height: 1.35;
}
.ms-bar-tooltip .tt-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.ms-bar-tooltip .tt-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}
.ms-bar-tooltip .tt-chip.tt-done    { background: var(--lobby-rd-success-soft, #e8f6f0); color: var(--lobby-rd-success-strong, #0f7657); }
.ms-bar-tooltip .tt-chip.tt-doing   { background: var(--lobby-rd-doing-soft, #eef4fb); color: var(--lobby-rd-primary, #0061a4); }
.ms-bar-tooltip .tt-chip.tt-overdue { background: var(--lobby-rd-danger-soft, #fdecec); color: var(--lobby-rd-danger, #e5484d); }
.ms-bar-tooltip .tt-chip.tt-todo    { background: var(--lobby-rd-surface-subtle, #eef1f6); color: var(--lobby-rd-text-muted, #5a6573); }
.ms-bar-tooltip .tt-pct { font-size: 11.5px; font-weight: 600; line-height: 1; }
.ms-bar-tooltip .tt-pct.tt-done-t    { color: var(--lobby-rd-success-strong, #0f7657); }
.ms-bar-tooltip .tt-pct.tt-doing-t   { color: var(--lobby-rd-doing, #2d8fe6); }
.ms-bar-tooltip .tt-pct.tt-overdue-t { color: var(--lobby-rd-danger, #e5484d); }
.ms-bar-tooltip .tt-pct.tt-todo-t    { color: var(--lobby-rd-text-soft, #8a94a3); }
.ms-bar-tooltip .tt-lv { font-size: 10.5px; color: var(--lobby-rd-text-soft, #8a94a3); margin-left: auto; line-height: 1; }
.ms-bar-tooltip .tt-dates { font-size: 11.5px; color: var(--lobby-rd-text-muted, #5a6573); line-height: 1; }

/* ---------- 아코디언 셰브런(SVG) 회전 ---------- */
#mainBoardContent.view-mode-milestone .ms-accordion-arrow svg { display: block; transition: transform 0.15s ease; }
#mainBoardContent.view-mode-milestone .ms-team-header.is-collapsed .ms-accordion-arrow svg { transform: rotate(-90deg); }

/* 하단 여백 = 칸반과 동일 20px (푸터 제거로 카드가 바닥까지 붙던 문제) */
#mainBoardContent.view-mode-milestone #milestoneBoard {
  padding-bottom: 20px;
}

/* 타임라인·좌측 리스트 스크롤바 슬림화 (로비 토큰) */
#mainBoardContent.view-mode-milestone .ms-d-scroll::-webkit-scrollbar,
#mainBoardContent.view-mode-milestone .ms-category-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#mainBoardContent.view-mode-milestone .ms-d-scroll::-webkit-scrollbar-thumb,
#mainBoardContent.view-mode-milestone .ms-category-list::-webkit-scrollbar-thumb {
  background: var(--lobby-rd-scroll-thumb, rgba(100, 116, 139, 0.32));
  border-radius: 999px;
}
#mainBoardContent.view-mode-milestone .ms-d-scroll::-webkit-scrollbar-track,
#mainBoardContent.view-mode-milestone .ms-category-list::-webkit-scrollbar-track {
  background: transparent;
}