/* Specific Bullet & Active Text/Border Colors */
.filter-btn[data-filter="진행"] .filter-bullet {
  background-color: #168044;
  color: #168044;
}

.filter-btn[data-filter="진행"].active {
  color: #168044;
  border-color: #168044;
  background: #f0fdf4;
}

.filter-btn[data-filter="상시"] .filter-bullet {
  background-color: #2257c7;
  color: #2257c7;
}

.filter-btn[data-filter="상시"].active {
  color: #2257c7;
  border-color: #2257c7;
  background: #f0f7ff;
}

.filter-btn[data-filter="대기"] .filter-bullet {
  background-color: #b76518;
  color: #b76518;
}

.filter-btn[data-filter="대기"].active {
  color: #b76518;
  border-color: #b76518;
  background: #fffcf0;
}

.filter-btn[data-filter="홀딩"] .filter-bullet {
  background-color: #d97706;
  color: #d97706;
}

.filter-btn[data-filter="홀딩"].active {
  color: #d97706;
  border-color: #d97706;
  background: #fefbeb;
}

.filter-btn[data-filter="완료"] .filter-bullet {
  background-color: #6f7672;
  color: #6f7672;
}

.filter-btn[data-filter="완료"].active {
  color: #6f7672;
  border-color: #6f7672;
  background: #f8f9fa;
}

.filter-btn[data-filter="all"].active {
  color: #333333;
  border-color: #333333;
  background: #ffffff;
}

/* Task Status Bullet inside Project Card */

.worker-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  user-select: none;
}

.worker-toggle-wrapper:hover {
  background: rgba(0, 0, 0, 0.03);
}

.toggle-label {
  font-size: 14px;
  font-weight: 800;
  color: #7d8983;
}

.toggle-switch {
  width: 32px;
  height: 18px;
  background: #d1d5db;
  border-radius: 99px;
  position: relative;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch.active {
  background: #168044;
}

.toggle-knob {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-switch.active .toggle-knob {
  transform: translateX(14px);
}

.divider-bar {
  opacity: 0.4;
}

.cards {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

.dept-card-new {
  display: flex;
  flex-direction: row;
  /* 가로 대칭 배치 */
  height: 100%;
  min-height: 0;
  /* grid 1fr 행 안에서 콘텐츠 높이만큼 커지지 않도록 */
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 100%);
  /* 샴페인 골드 글래스모피즘 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 2px 4px 0 rgba(154, 143, 124, 0.2), inset -8px -8px 16px rgba(255, 249, 239, 0.4);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dept-card-new.team-coop {
  grid-column: 1;
  grid-row: 1;
  --dept-tone: var(--team-cell-collab);
}

.dept-card-new.team-video {
  grid-column: 2;
  grid-row: 1;
  --dept-tone: var(--team-cell-video);
}

.dept-card-new.team-ux {
  grid-column: 1;
  grid-row: 2;
  --dept-tone: var(--team-cell-ux);
}

.dept-card-new.team-edit {
  grid-column: 2;
  grid-row: 2;
  --dept-tone: var(--team-cell-edit);
}

/* 대칭형 레이아웃: 썸네일 45% + 리스트 나머지 폭 */
.rep-thumbnail-container {
  width: 45%;
  flex-shrink: 0;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.compact-list-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.dept-scroll-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* 스크롤은 내부 scroller에서만 */
}

.dept-scroll-shell.compact-list-container {
  padding: 10px 12px 16px;
}

.dept-card-new.right-side .dept-scroll-shell.compact-list-container {
  padding-right: 8px;
}

.dept-card-new.left-side .dept-scroll-shell.compact-list-container {
  padding-left: 8px;
}

/* 프로젝트 3개 이상: 블릿 열 여백을 shell에 고정 (canScroll 토글과 무관) */
.dept-card-new.right-side .dept-scroll-shell.compact-list-container.has-dept-scroll-indicator {
  padding-right: 22px;
}

.dept-card-new.left-side .dept-scroll-shell.compact-list-container.has-dept-scroll-indicator {
  padding-left: 22px;
}

.dept-card-new.no-projects .compact-list-container {
  width: 100%;
  flex: 1 1 100%;
}

/* 썸네일 예외 처리 */
.rep-thumbnail-empty {
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border: 1px dashed rgba(168, 157, 145, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a89d91;
  font-size: 13px;
  font-weight: 500;
}

/* 대표 썸네일 카드의 여백과 패딩 교정 */
.rep-thumbnail-container .project-thumbnail-card {
  margin: 0 !important;
  border-radius: 0px !important;
}

/* 리스트 비었을 때 fallback */
.list-empty-fallback {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a89d91;
  font-size: 13px;
  font-weight: 500;
  border: 1px dashed rgba(168, 157, 145, 0.2);
  border-radius: 12px;
}

/* 중앙 컨트롤 패널 스타일 */
.center-panel-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-panel-container.center-hub-overlay {
  width: min(360px, 84%);
  max-width: 360px;
  height: 210px;
  aspect-ratio: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}

.center-hub-overlay>.center-panel-bg {
  z-index: 1;
}

.center-panel-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-panel-svg {
  width: 100%;
  height: auto;
  max-width: min(560px, 100%);
  aspect-ratio: 969 / 371;
  overflow: visible;
  pointer-events: none !important;
  user-select: none !important;
}

.center-panel-svg image,
.center-panel-svg text,
.center-panel-svg tspan {
  pointer-events: none !important;
  user-select: none !important;
}

.dept-head-new {
  display: none;
}

.dept-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dept-name-new {
  font-size: 34px;
  font-weight: 800;
  color: #35291c;
  /* 진한 브라운 */
  letter-spacing: -0.6px;
}

.dept-representative-btn {
  margin-left: 8px;
  background: transparent;
  color: #666666;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.dept-representative-btn:hover {
  background: #f5f5f5;
  color: #111111;
}

.dept-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 15px;
  color: #a89d91;
  /* Denominator 연한 브라운 */
}

.count-progress {
  font-size: 34px;
  font-weight: 800;
  color: #35291c;
  /* Numerator 진한 브라운 */
  margin-right: 1px;
}

.count-slash {
  font-weight: 500;
  font-size: 26px;
  color: #a89d91;
  margin: 0 1px;
}

.count-total {
  font-size: 26px;
  font-weight: 500;
  color: #a89d91;
}

.dept-task-scroller {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  padding: 0 0 8px;
  flex-grow: 1;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
}

.dept-task-scroller::-webkit-scrollbar {
  display: none;
}

.dept-task-scroller .compact-project-card {
  padding-right: 0;
}

.dept-card-indicator {
  position: absolute;
  z-index: 12;
  top: 10px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 8px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.dept-card-new.right-side .dept-card-indicator {
  right: 4px;
}

.dept-card-new.left-side .dept-card-indicator {
  left: 4px;
}

.dept-card-indicator[hidden] {
  display: none !important;
}

.dept-card-indicator-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dept-tone) 28%, rgba(62, 51, 44, 0.22));
  opacity: 0.58;
  transform: scale(0.82);
  transition:
    background-color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.dept-card-indicator-dot.is-active {
  background: var(--dept-tone);
  opacity: 1;
  transform: scale(1.18);
}

.dept-card-indicator-dot.is-active::after {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dept-tone) 18%, transparent);
  content: "";
}

/* 일반 프로젝트 썸네일 카드 (클릭은 JS에서 비활성, 호버 연출은 유지) */
.project-thumbnail-card {
  width: auto !important;
  margin: 0 !important;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0px;
  cursor: default;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
}

.project-thumbnail-card:hover .card-content-wrap {
  background: transparent !important;
}

.project-thumbnail-card.active {
  border-color: var(--brown-main);
}

.project-thumbnail-card.highlighted {
  border-color: var(--red);
  box-shadow: 0 8px 24px rgba(255, 59, 48, 0.08);
}

.card-thumbnail-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  transition: transform 0.4s ease;
  position: relative;
  border-radius: 0 8px 8px 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
  margin-bottom: 0;
  border-left: 1px solid #d1ccc7;
  flex-shrink: 0;
}

.team-video .card-thumbnail-wrap,
.team-edit .card-thumbnail-wrap {
  border-left: none;
  border-right: 1px solid #d1ccc7;
  border-radius: 8px 0 0 8px;
}


.thumbnail-img {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.4s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 목록 카드의 작업기간 줄 — 좁은 화면(1366px 등)에서 종료일과 지연 배지가
   잘려 사라지던 문제. modal.css 의 `.task-date { white-space: nowrap }` 보다
   선택자를 좁혀 카드에서만 줄바꿈을 허용한다.
   날짜 자체는 .task-date-range 로 묶어 중간에 끊기지 않게 한다. */
.compact-project-card .task-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* flex 는 항목 사이 공백 텍스트를 무시하므로 라벨과 날짜 간격을 gap 으로 준다 */
  column-gap: 4px;
  row-gap: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.compact-project-card .task-date .task-date-range {
  white-space: nowrap;
}

/* 이슈 한 줄 — 긴 텍스트가 말줄임 없이 잘리던 문제.
   .task-issue-text 는 flex 항목이라 기본 min-width:auto 로 콘텐츠만큼 늘어나
   카드 폭을 넘겨 버린다. 그러면 자기 overflow 가 발동하지 않아 바깥에서 잘린다.
   컨테이너를 줄어들 수 있게 만들어야 자식의 ellipsis 가 동작한다. */
.compact-project-card .task-issue-text {
  min-width: 0;
  max-width: 100%;
}

.compact-project-card .task-issue-text .issue-text-content {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 로드 실패 표시 — 깨진 이미지가 아니라 의도된 빈 상태로 보이게 한다.
   수정 모달의 .thumbnail-item img.thumb-load-error 처리와 맞춘다. */
.card-thumbnail-wrap img.thumb-load-error {
  object-fit: contain;
  padding: 12px;
  background: #f3f3f3;
  opacity: 0.55;
}

.project-thumbnail-card:hover img.thumb-load-error {
  transform: none;
}

.project-thumbnail-card:hover .thumbnail-img {
  transform: scale(1.05);
}

.thumbnail-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  color: #8e8780;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f2eb 0%, #e1ddd5 100%);
  width: 100%;
  height: 100%;
}

.card-cell-badge {
  height: 20px;
  bottom: 12px;
  backdrop-filter: blur(4px);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 2px;
  font-size: 11px;
  padding: 3px 6px;
  z-index: 5;
}

.card-play-overlay {
  z-index: 1;
  position: absolute;
  right: 12px;
  bottom: 12px;
  /* background: rgba(255, 99, 71, 0.9); */
  width: 32px;
  height: 32px;
  /* border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center; */
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
}

.play-button-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  /* color: var(--card-white); */
  backdrop-filter: blur(4px);
  border: 1px solid rgba(16, 185, 129, 0.5);
  transition: all 0.2s;
}

.project-thumbnail-card:hover .play-button-icon {
  transform: scale(1.08);
  background: rgba(0, 0, 0, 0.65);
}

.card-content-wrap {
  background: transparent;
  padding: 8px 0 6px 0;
  display: flex;
  flex-direction: column;
  display: none;
  gap: 0;
}

.card-title-text {
  margin-bottom: 4px;
  font-size: 26px;
  font-weight: 800;
  color: #000000;
  /* 선명한 블랙 */
  margin: 0 0 5px 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.card-duration-text {
  font-size: 20px;
  color: #8a8175;
  /* 브라운베이지 미디움 회색 */
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 16px;
}

.card-progress-section {
  justify-content: space-between;
  margin-top: auto;
  padding: 0 0px 0px 0px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-progress-track {
  flex: 1;
  width: 70px;
  height: 5px;
  background: #edebe6;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.card-progress-bar {
  transition: width 0.4s ease;
  height: 100%;
  background: #11824a;
  /* HM Green */
  border-radius: 99px;
}

.card-progress-percent {
  font-size: 24px;
  font-weight: 800;
  color: #11824a;
  min-width: 32px;
  text-align: right;
  white-space: nowrap;
}

/* 상시 프로젝트 섹션 */
.always-projects-section {
  padding-top: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #d1ccc7;
  padding: 16px 20px 20px 20px;
  margin-top: 0;
  background: #ffffff;
  flex-shrink: 0;
  background: linear-gradient(180deg, #ece9e7 0%, #ece5df 100%);
  box-shadow: 0 1px 0px #ffffff inset;
}

.always-section-title {
  padding-left: 2px;
  color: #4b3e2e;
  /* 진브라운 상시 타이틀 */
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  margin-bottom: 8px;
  letter-spacing: 0;
}

.always-tasks-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.always-task-bar-new {
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #d8d0c9;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  border: 1px solid #ffffff94
}

.always-task-bar-new:hover {
  border-color: #bad3c7;
  transform: translateX(2px);
  background: #edeae3;
}

.always-task-bar-new.active {
  border-color: #064b36;
  background: #e8f4ef;
}

.always-cell-badge {
  display: inline-flex;
  align-items: center;
  background: #4a3520;
  color: #ffffff;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 800;
  padding: 3px 8px;
  letter-spacing: -0.2px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── Center Hub Overlay Restore ─── */
.dashboard-hub-layout {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(520px, 1.45fr) minmax(300px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-core-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.dashboard-core-quadrants {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.dashboard-core-quadrant {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(42, 34, 26, 0.16);
  border-radius: 8px;
  background: #ebe6dc;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(62, 51, 44, 0.12);
}

.dashboard-core-quadrant:disabled {
  cursor: default;
}

.dashboard-core-quadrant.active {
  border-color: var(--green-brand);
  box-shadow: 0 0 0 3px rgba(6, 75, 54, 0.18), 0 2px 8px rgba(62, 51, 44, 0.14);
}

.dashboard-core-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.dashboard-core-quadrant:hover .dashboard-core-image {
  transform: scale(1.04);
}

.dashboard-core-dim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22)),
    radial-gradient(circle at 50% 50%, rgba(255, 248, 236, 0.02), rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.dashboard-core-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8174;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  background: linear-gradient(135deg, #f7f1e7 0%, #d8d0c6 100%);
}

.dashboard-core-video {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(6, 75, 54, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dashboard-core-stage .center-panel-container.center-hub-overlay {
  width: min(560px, 84%);
  max-width: 560px;
}

.dashboard-hub-layout .dashboard-side-column {
  padding: 0;
}

.dashboard-hub-layout .dashboard-team-section {
  flex: 1;
  min-height: 0;
  border-radius: 8px;
}

.dashboard-hub-layout .dashboard-team-section-header {
  display: none;
}

.dashboard-hub-layout .dashboard-team-body {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.dashboard-hub-layout .dashboard-team-list {
  padding: 16px 18px;
  gap: 0;
}

.dashboard-hub-layout .compact-project-card {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  box-shadow: none;
  background: transparent;
  padding: 13px 0;
}

.dashboard-hub-layout .compact-project-card:first-child {
  padding-top: 0;
}

.dashboard-hub-layout .compact-project-card:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.dashboard-side-column {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 4px;
  /* html scrollbar-color 상속 차단 — 아래 webkit 커스텀이 먹히게 */
  scrollbar-color: auto;
}

.dashboard-side-column::-webkit-scrollbar {
  width: 6px;
}

.dashboard-side-column::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
}

.dashboard-team-section {
  background: var(--card-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(154, 143, 124, 0.12);
  flex-shrink: 0;
}

.dashboard-team-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.dashboard-team-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--brown-dark);
}

.dashboard-team-accent {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.dashboard-team-section.team-coop .dashboard-team-accent {
  background: var(--green);
}

.dashboard-team-section.team-ux .dashboard-team-accent {
  background: var(--blue);
}

.dashboard-team-section.team-video .dashboard-team-accent {
  background: var(--red);
}

.dashboard-team-section.team-edit .dashboard-team-accent {
  background: var(--brown-main);
}

.dashboard-team-count-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-beige);
  padding: 3px 10px;
  border-radius: 99px;
}

.dashboard-team-body {
  display: flex;
  flex-direction: row;
  min-height: 180px;
  max-height: 44vh;
}

.dashboard-team-body.right-side .dashboard-team-thumb {
  order: -1;
}

.dashboard-team-list {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: none;
}

.dashboard-team-thumb {
  width: 42%;
  flex-shrink: 0;
  min-height: 180px;
  border-left: 1px solid var(--border-light);
  background: var(--brown-dark);
  overflow: hidden;
  position: relative;
}

.dashboard-team-body.right-side .dashboard-team-thumb {
  border-left: none;
  border-right: 1px solid var(--border-light);
}

.dashboard-team-thumb .rep-thumbnail-container {
  width: 100%;
  height: 100%;
  min-height: 180px;
}

.dashboard-team-thumb .project-thumbnail-card {
  height: 100%;
  min-height: 180px;
  position: relative;
}

.dashboard-team-thumb .card-thumbnail-wrap {
  flex: 1;
  min-height: 120px;
  height: auto;
  border-left: none;
  border-radius: 0;
}

.dashboard-team-thumb .card-content-wrap {
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: var(--card-white);
}

.dashboard-team-thumb .card-title-text,
.dashboard-team-thumb .card-duration-text,
.dashboard-team-thumb .card-progress-percent {
  color: var(--card-white) !important;
}

.dashboard-team-thumb .rep-thumbnail-empty {
  height: 100%;
  min-height: 180px;
}

.dashboard-team-list .list-empty-fallback {
  min-height: 80px;
  border: none;
  font-size: 12px;
}

/* Planning Hub Center — SVG 다이얼만 사용 */

@media (max-width: 1280px) {
  .center-panel-container.center-hub-overlay {
    width: min(460px, 80%);
    height: 175px;
  }

  .dashboard-core-stage .center-panel-container.center-hub-overlay {
    width: min(460px, 80%);
  }
}