/* Modal Styles */
.edit-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-modal {
  background: #fff;
  border-radius: 6px;
  width: 96%;
  max-width: 1000px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.edit-modal-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid #e1e4e8;
  background: #fff;
}

.edit-modal-header h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
  color: #333;
}

.edit-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

/* 폼 섹션 그룹화 */
.form-section-group {
  margin-bottom: 24px;
  padding: 0;
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 24px;
  margin-bottom: 16px;
  width: 100%;
}

.bottom-grid {
  margin-top: 16px;
}

/* 기본 정보 3열 그리드 (레거시 지원용 유지) */
.form-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
  width: 100%;
}

/* 좌우 2컬럼 분할 레이아웃 및 세로 구분선 */
.form-split-layout {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.form-left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-vertical-divider {
  width: 1px;
  background-color: #f0f0f0;
  /* 연하고 은은한 구분선 색상 */
  align-self: stretch;
  margin: 4px 0;
}

.form-right-panel {
  flex: 2.2;
  /* 우측 영역의 2열 그리드가 여유있게 배치되도록 조정 */
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.form-grid-2col .col-span-2 {
  grid-column: span 2;
}

.col-span-2-3col {
  grid-column: span 2;
}

/* 작업 상태/셀: 각 1/3, 오른쪽 1/3 여백 */
.form-row-flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.status-select-field {
  min-width: 0;
}

.status-override-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-override-stack select {
  width: 100%;
}

.pf-status-override {
  gap: 8px;
}

.pf-status-display-readonly {
  display: flex;
  align-items: center;
}

.pf-status-display {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: #f4f4f5;
  color: #5c4a3a;
}

.pf-status-display[data-status-display="ongoing"] {
  background: #e8f5ee;
  color: #11824a;
}

.pf-status-display[data-status-display="waiting"],
.pf-status-display[data-status-display="holding"] {
  background: #fef3e2;
  color: #d97706;
}

.pf-status-display[data-status-display="regular"] {
  background: #e8f5ee;
  color: #11824a;
}

.pf-status-display[data-status-display="completed"] {
  background: #f4f4f5;
  color: #73726f;
}

.cell-checkbox-field {
  min-width: 0;
}

/* 일정 날짜 3열 + PM/담당자 2열 */
.schedule-assignee-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-schedule-dates-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.form-schedule-expand-slot {
  width: 100%;
}

.form-schedule-people-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  overflow: visible;
}

/* PM 1칸에서도 4열 멤버 목록이 people-row 전체로 넘쳐 보이게 */
.pm-select-field {
  overflow: visible;
  position: relative;
}

.pm-select-field:has(.multi-select-header.active) {
  z-index: 30;
}

.pm-select-field .multi-select-list {
  left: 0;
  right: auto;
  width: calc(150% + 12px);
  max-height: 240px;
  overflow-y: auto;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.col-span-2 {
  grid-column: span 2;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #777;
  margin-top: 0;
  display: block;
}

.field-label-with-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.field-label-with-help > label {
  margin-bottom: 0;
}

.field-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
  background: #f5f5f5;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
}

.field-help-trigger:hover,
.field-help-trigger:focus-visible {
  border-color: var(--brown-main, #8b6914);
  color: var(--brown-main, #8b6914);
  outline: none;
}

.field-help-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: min(320px, 70vw);
  padding: 8px 10px;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: #555;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.field-label-with-help:hover .field-help-tooltip,
.field-label-with-help:focus-within .field-help-tooltip {
  opacity: 1;
  visibility: visible;
}

.schedule-deadline-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-textarea {
  width: 100%;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
}

.edit-modal .sdp-field {
  width: 100%;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-modal .sdp-field .sdp-field-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #6b7280;
  opacity: 0.85;
}

.edit-modal .sdp-field .sdp-field-icon svg {
  display: block;
}

.edit-modal .sdp-field .sdp-field-value {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.edit-modal .sdp-field:hover:not(:disabled) {
  border-color: #c9ced6;
}

.edit-modal .sdp-field:focus {
  border-color: #5b8aff;
  box-shadow: 0 0 0 3px rgba(91, 138, 255, 0.1);
}

.edit-modal .sdp-field.is-readonly,
.edit-modal .sdp-field:disabled {
  background: #f5f5f5;
  color: #6b7280;
  cursor: not-allowed;
}

.form-group input:focus,
.form-group select:focus,
.form-textarea:focus {
  border-color: #5b8aff;
  box-shadow: 0 0 0 3px rgba(91, 138, 255, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.checkbox-group {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background: #fafbfc;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #333;
  margin: 0;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  vertical-align: bottom;
  margin-right: 4px;
}

.multi-select-dropdown {
  position: relative;
  width: 100%;
}

.draft-confirmed-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #10b981;
  cursor: pointer;
  background: #ecfdf5;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #d1fae5;
  transition: all 0.2s ease;
  user-select: none;
  animation: fadeIn 0.3s ease;
}

.draft-confirmed-label:hover {
  background: #d1fae5;
  border-color: #a7f3d0;
}

.draft-confirmed-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #10b981;
  margin: 0;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.multi-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
}

.multi-select-header:hover {
  border-color: #5b8aff;
}

.multi-select-header.active {
  border-color: #5b8aff;
  box-shadow: 0 0 0 3px rgba(91, 138, 255, 0.1);
}

.selected-names {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 30px);
}

/* multi-select 헤더 안에 선택값을 태그(칩)로 표시 */
.multi-select-header .ms-tag-list {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  gap: 6px;
}

.multi-select-header .ms-tag-list .tag {
  padding: 4px 6px 4px 12px;
}

.dropdown-arrow {
  color: #888;
  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.multi-select-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.dropdown-item {
  padding: 8px 12px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.dropdown-item:hover {
  background: #f0f4ff;
}

/* 멤버 선택 드롭다운 — 셀(파트)별 열.
   열 사이는 세로 구분선으로 나눈다. gap 대신 열 좌우 패딩(4px)+항목 패딩(8px)으로
   간격을 만들어야 구분선 양옆 여백이 12px 로 같아진다. */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  width: 100%;
}

.ms-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 4px;
}

.ms-col + .ms-col {
  border-left: 1px solid var(--edit-divider);
}

/* 헤더 좌측 패딩은 .ms-item 과 맞춰 체크박스와 같은 x 에서 시작한다 */
.ms-col-head {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--edit-label);
  padding: 4px 8px;
  margin-bottom: 4px;
}

/* .detail-add-task-panel label (gap:6px) 보다 우선하도록 리스트를 함께 건다 */
.multi-select-list .ms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  padding: 8px;
}

.ms-item input[type="checkbox"],
.ms-item input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  cursor: pointer;
}

.ms-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-divider {
  border: 0;
  border-top: 0px solid #e1e4e8;
  margin: 24px 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.tag-list .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid #dbeafe;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05);
  transition: all 0.2s ease;
  box-sizing: border-box;
  word-break: break-all;
  white-space: normal;
}

.tag-list .tag>button {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  cursor: pointer;
  margin-top: 0;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.tag-list .tag>button:hover {
  opacity: 1;
}

/* 이슈 전용 태그 리스트 및 스타일 개편 */
.issue-tag-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}

.issue-tag-list .tag.issue-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 20px;
  box-sizing: border-box;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
  word-break: break-all;
  white-space: normal;
}

.issue-tag-list .tag.issue-tag:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.issue-tag-list .tag.issue-tag.pinned {
  border-left: 4px solid #ee5b5b;
  background: #fff8f8;
  border-color: #fcd5d5;
}

.issue-content-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  text-align: left;
}

.issue-text {
  font-weight: 600;
  color: #1e293b;
}

.issue-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}

.pin-btn-small,
.edit-btn-small,
.del-btn-small {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
}

.pin-btn-small:hover,
.edit-btn-small:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

.pin-btn-small.active {
  background: #fef3c7;
  color: #d97706;
  border-color: #fcd34d;
}

.del-btn-small:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}

/* 관련 링크 스타일 개편 */
.links-input-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.link-input-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.link-title-input {
  flex: 1 !important;
}

.link-url-input {
  flex: 2.5 !important;
}

.link-delete-btn {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #ef4444;
  border-radius: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.link-delete-btn:hover {
  background: #fecaca;
  color: #dc2626;
  border-color: #f87171;
}

.add-link-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  background: #e2e8f0;
  color: #475569;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease;
}

.add-link-btn:hover {
  background: #cbd5e1;
  color: #1e293b;
}

.no-links-text {
  font-size: 13px;
  color: #94a3b8;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  text-align: center;
  margin-top: 8px;
}


.loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f7f5;
  font-size: 20px;
  font-weight: 900;
  color: var(--dark-green);
  z-index: 10000;
}

/* Status Icons for Summary Section */

/* Task Rate Styling */
.dual-monitor-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dual-monitor-icon-wrap .m-icon {
  position: absolute;
}

.dual-monitor-icon-wrap .m-back {
  top: 0px;
  left: -3px;
  opacity: 0.5;
}

.dual-monitor-icon-wrap .m-front {
  bottom: 0px;
  right: -3px;
}

/* Project Context Menu */
.project-context-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  padding: 6px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  width: 100%;
}

.context-menu-item:hover {
  background: rgba(6, 75, 54, 0.08);
  color: #064b36;
}

.context-menu-item.delete {
  color: #ff3b30;
}

.context-menu-item.delete:hover {
  background: #fff0ee;
  color: #ff3b30;
}

.context-menu-item svg {
  color: inherit;
  opacity: 0.8;
}

/* Versioned Task List Styles */

/* 팀 인원 현황 전체 보기 대응 */
.member-tooltip.is-static {
  grid-area: tooltip;
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
  width: 100%;
  margin-top: 0;
  min-width: 240px;
  background: #f8faf9;
  border: 1px solid #e1ece7;
  color: #333;
  box-shadow: none;
  padding: 12px;
  pointer-events: auto;
  border-radius: 8px;
  z-index: 1;
  min-height: 160px;
}

.team-tree-scroll.show-all-tooltips .tree-member-card,
.team-tree-scroll.show-all-tooltips .tree-leader-card {
  display: grid;
  grid-template-areas:
    "avatar tooltip"
    "info tooltip";
  grid-template-columns: 110px 1fr;
  /* 첫 번째 열의 너비를 96px로 넉넉히 변경 */
  grid-template-rows: auto 1fr;
  /* 아바타 행은 콘텐츠 높이에 맞추고 info 행이 남는 높이 영역을 흡수하도록 설정 */
  align-items: flex-start;
  gap: 12px 18px;
  /* 아바타와 인적정보 간의 세로 간격은 항상 gap(12px)으로 칼같이 고정 유지 */
  height: auto;
  /* 툴팁 크기에 맞춰 카드 높이가 유연하게 늘어나도록 설정 복구 */
  min-height: unset;
  padding: 16px 20px;
  border: 1.5px solid #c8dfd5;
  background: #fff;
  border-radius: 18px;
}

.team-tree-scroll.show-all-tooltips .tree-cell-col {
  max-width: 530px;
  min-width: 350px;
}

.team-tree-scroll.show-all-tooltips .member-info-wrap,
.team-tree-scroll.show-all-tooltips .leader-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 좌측 정렬 */
  text-align: left;
  /* 좌측 정렬 */
  width: 100%;
}

.team-tree-scroll.show-all-tooltips .tooltip-header {
  color: #064b36;
  border-bottom-color: #e1ece7;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.team-tree-scroll.show-all-tooltips .tooltip-name {
  color: #444;
  word-break: keep-all;
}

.team-tree-scroll.show-all-tooltips .tooltip-dot {
  background: #10b981;
}

.team-tree-scroll.show-all-tooltips .leader-avatar,
.team-tree-scroll.show-all-tooltips .member-avatar {
  grid-area: avatar;
  margin-bottom: 0;
  justify-self: start;
  /* 아바타도 좌측 정렬하여 수직 정렬선 일치 */
}

/* 휴대폰 번호 줄바꿈 금지 스타일 추가 */
.team-tree-scroll.show-all-tooltips .member-contact {
  white-space: nowrap;
  /* 휴대폰 번호 줄바꿈 강제 금지 */
}

/* meta(작업기간·PM 태그)는 항상 렌더되며 전체보기(show-all-tooltips)에서만 노출 */
.member-tooltip .tooltip-meta {
  display: none;
}

.team-tree-scroll.show-all-tooltips .tooltip-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
}

.team-tree-scroll.show-all-tooltips .tooltip-date {
  color: #666;
}

.team-tree-scroll.show-all-tooltips .tooltip-pm-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #11824a;
  background: rgba(17, 130, 74, 0.12);
  border: 1px solid rgba(17, 130, 74, 0.25);
}

/* 호버 툴팁(어두운 패널): 밝은 배지색 / 전체보기(.is-static): 진한 배지색 */
.member-tooltip .tooltip-status-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  color: #a8dec0;
  border: 1px solid rgba(168, 222, 192, 0.4);
  background-color: rgba(168, 222, 192, 0.15);
}

.member-tooltip .tooltip-status-badge[data-status="hold"],
.member-tooltip .tooltip-status-badge[data-status="waiting"] {
  color: #fbd38d;
  border-color: rgba(251, 211, 141, 0.4);
  background-color: rgba(251, 211, 141, 0.15);
}

.member-tooltip.is-static .tooltip-status-badge {
  color: #11824a;
  border-color: rgba(17, 130, 74, 0.25);
  background-color: rgba(17, 130, 74, 0.12);
}

.member-tooltip.is-static .tooltip-status-badge[data-status="hold"],
.member-tooltip.is-static .tooltip-status-badge[data-status="waiting"] {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.3);
  background-color: rgba(217, 119, 6, 0.12);
}

/* 툴팁 행 — 레이아웃 + 호버/전체보기 활성·선택상세 테마 */
.member-tooltip .tooltip-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 4px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  background-color: transparent;
  transition: background 0.15s ease;
}

.member-tooltip .tooltip-item.active {
  background-color: rgba(255, 255, 255, 0.08);
}

.member-tooltip.is-static .tooltip-item.active {
  background-color: rgba(17, 130, 74, 0.08);
}

.member-tooltip .tooltip-item-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.member-tooltip .tooltip-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.member-tooltip .tooltip-item-title .tooltip-dot {
  flex-shrink: 0;
}

.member-tooltip .tooltip-item-title .tooltip-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.member-tooltip .tooltip-task-members {
  font-size: 12px;
  color: #a8dec0;
  padding-left: 14px;
  opacity: 0.95;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 4px;
}

.member-tooltip .tooltip-task-members-inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(33, 102, 71, 0.1);
  padding-left: 6px;
}

.member-tooltip .tooltip-task-members strong {
  color: #fff;
}

.member-tooltip.is-static .tooltip-task-members {
  color: #333;
}

.member-tooltip.is-static .tooltip-task-members strong {
  color: var(--green-brand);
}

/* 팀 현황 전체보기 토글 버튼 */
.team-view-toggle {
  display: flex;
  width: 135px;
  height: 34px;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: #555;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.team-view-toggle:hover {
  background: rgba(0, 0, 0, 0.12);
}

.team-view-toggle.active {
  background: #174C3A;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  color: #C2F9E6;
}

.team-view-toggle.active:hover {
  background: #135a45;
}

.team-view-toggle-label {
  color: #555;
  text-align: center;
  /* font-family 지정 없음 — 전역 Pretendard 스택을 그대로 상속한다.
     "Noto Sans CJK KR" 를 직접 요구하면 그 폰트가 없는 환경에서 이 라벨만 두부로 깨진다. */
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

.team-view-toggle.active .team-view-toggle-label {
  color: #C2F9E6;
}

.team-view-switch {
  width: 23px;
  height: 12.27px;
  flex-shrink: 0;
  position: relative;
  border-radius: 6.13px;
  background: #fff;
  box-shadow:
    inset 0 1.75px 0.875px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(208, 208, 208, 0.5);
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-view-toggle.active .team-view-switch {
  background: #E6FFF7;
  box-shadow:
    inset 0 1.75px 0.875px rgba(128, 174, 153, 1),
    0 0 0 0.5px #C2F9E6;
}

/* pr_guard local_endpoint 규칙이 두 자리 정수+소수점 리터럴을 막아 calc 로 표기한다 */
.team-view-knob {
  width: calc(21.46px / 2);
  height: calc(21.46px / 2);
  border-radius: 50%;
  position: absolute;
  top: 0.77px;
  left: 0.77px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(165deg, #DDDDDD 0%, #9A9A9A 65.625%, #6C6C6C 100%);
  box-shadow:
    inset 0.875px 0.875px 1.75px rgba(255, 255, 255, 0.4),
    0 0 0 0.5px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.team-view-toggle.active .team-view-knob {
  transform: translateX(calc(21.46px / 2));
  background: linear-gradient(165deg, #C5FFE6 0%, #41A683 65.625%);
  box-shadow:
    inset 0.875px 0.875px 1.75px rgba(255, 255, 255, 0.4),
    0 0 0 0.5px #0C714E;
}

.v-draft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.v-draft-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.v-draft-item[draggable="true"] {
  cursor: grab;
}

.v-draft-item.is-dragging {
  opacity: 0.35;
  transform: scale(0.92);
  cursor: grabbing;
}

.v-draft-media {
  position: relative;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #111827;
}

.v-draft-media img,
.v-draft-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v-draft-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  min-width: 0;
}

.v-draft-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-draft-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}

.v-draft-copy:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}

.v-draft-del {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ff3b30;
  z-index: 1;
}

/* Sidebar Version Styles */

/* Version Task Editing Styles */

/* Sidebar Accordion Styles - Reference Match */

/* 다크 패널 내부 ver-cat 오버라이드 */

/* 업무 추가 패널 커스텀 스타일 */
.detail-add-task-panel .panel-header-top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.detail-add-task-panel .panel-header .subtitle {
  font-size: 13px;
  color: #6b7280;
}

.detail-add-task-panel .header-divider {
  width: 100%;
  margin-top: 8px;
  border-bottom: 1px solid #2d3139;
}

/* 필수 표시 — 프로젝트 모달·업무 패널 공통 표기 */
.detail-add-task-panel .label-required::after,
.edit-modal .label-required::after {
  content: "*";
  display: inline-block;
  color: #ff4444;
  margin-left: 2px;
  line-height: 1;
  vertical-align: middle;
}

.detail-add-task-panel input[type="text"],
.detail-add-task-panel input[type="date"],
.detail-add-task-panel input[type="url"],
.detail-add-task-panel textarea,
.detail-add-task-panel .sdp-field {
  background: #24282d;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-add-task-panel .link-field {
  padding-left: 38px;
}

.detail-add-task-panel input[type="text"]:focus,
.detail-add-task-panel input[type="date"]:focus,
.detail-add-task-panel input[type="url"]:focus,
.detail-add-task-panel textarea:focus {
  border-color: #00c471;
  box-shadow: 0 0 0 3px rgba(0, 196, 113, 0.15);
  outline: none;
}

.detail-add-task-panel .title-field-wrap {
  position: relative;
}

.detail-add-task-panel .char-counter {
  position: absolute;
  right: 4px;
  top: 16px;
  font-size: 14px;
  color: #6b7280;
}

/* 상세 화면 폰트 기준: 업무 추가 폼 본문/서브 (다른 모달에는 영향 없음) */
.detail-add-task-panel .form-textarea {
  font-size: 20px;
}

/* 다크 패널 담당자 선택 — 이웃 인풋/날짜 필드 톤에 맞춤 */
.detail-add-task-panel .task-assignee-field .multi-select-header {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
  color: #fff;
  box-shadow: none;
}

.detail-add-task-panel .task-assignee-field .multi-select-header:hover,
.detail-add-task-panel .task-assignee-field .multi-select-header.active {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.detail-add-task-panel .task-assignee-field .selected-names {
  font-size: 14px;
  color: #e5e7eb;
}

.detail-add-task-panel .task-assignee-field .dropdown-arrow {
  color: #9ca3af;
}

.detail-add-task-panel .task-assignee-field .ms-tag-list .tag,
.detail-add-task-panel .task-assignee-field .tag-list .tag {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px 4px 10px;
}

.detail-add-task-panel .task-assignee-field .ms-tag-list .tag > button,
.detail-add-task-panel .task-assignee-field .tag-list .tag > button {
  color: #fff;
  opacity: 0.85;
}

.detail-add-task-panel .task-assignee-field .ms-tag-list .tag > button:hover,
.detail-add-task-panel .task-assignee-field .tag-list .tag > button:hover {
  opacity: 1;
}

.detail-add-task-panel .task-assignee-field .multi-select-list {
  background: #1e252b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  color: #e5e7eb;
}

.detail-add-task-panel .task-assignee-field .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.detail-add-task-panel .task-assignee-field .checkbox-label {
  color: #e5e7eb;
}

.detail-add-task-panel .task-assignee-field .ms-col-head {
  color: #fff;
}

.detail-add-task-panel .task-assignee-field .ms-col + .ms-col {
  border-left-color: rgba(255, 255, 255, 0.14);
}

/* 홀딩·대기 체크박스(.task-holding-check)와 같은 초록 */
.detail-add-task-panel .task-assignee-field .ms-item input {
  accent-color: #00c471;
}

.detail-add-task-panel .task-assignee-field .ms-item:has(input:checked) .ms-item-name {
  color: #00c471;
  font-weight: 600;
}

.detail-add-task-panel .shortcut-chip {
  font-size: 18px;
}

.detail-add-task-panel .date-error {
  border-color: #ff4444;
}

.progress-row-container {
  display: flex;
  align-items: center;
  gap: 16px;
  /* margin-bottom: 12px; */
}

.detail-add-task-panel .task-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.detail-add-task-panel .task-progress-header > label {
  margin: 0;
}

.progress-row-container .slider-wrap {
  flex: 1;
  height: 32px;
}

.progress-row-container .current-val {
  color: #00c471;
  font-size: 18px;
  font-weight: 700;
  min-width: 45px;
  text-align: right;
}

/* 자식 있는 상위 업무: 타임라인 바는 computedProgress(하위 평균)임을 안내 */
.detail-add-task-panel .task-progress-hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.4;
}

/* (?) 아이콘: 라벨 길이와 무관하게 같은 세로선·간격 */
.detail-add-task-panel label:has(.field-help-tip) {
  display: inline-grid;
  grid-template-columns: 11.5em auto;
  align-items: center;
  justify-items: start;
  column-gap: 6px;
  row-gap: 0;
  min-height: 28px;
}

.detail-add-task-panel .field-help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  flex-shrink: 0;
  outline: none;
}

.detail-add-task-panel .field-help-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #6b7280;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  text-transform: none;
  letter-spacing: 0;
}

.detail-add-task-panel .field-help-tip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  top: auto;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 12px;
  border-radius: 8px;
  background: #1f2937;
  border: 1px solid #374151;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  word-break: keep-all;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 30;
}

.detail-add-task-panel .field-help-tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
  border-bottom-color: transparent;
}

.detail-add-task-panel .field-help-tip--below .field-help-tip__bubble {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateX(-50%);
}

.detail-add-task-panel .field-help-tip--below .field-help-tip__bubble::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #1f2937;
}

.detail-add-task-panel .field-help-tip--start .field-help-tip__bubble {
  left: 0;
  right: auto;
  transform: none;
}

.detail-add-task-panel .field-help-tip--start .field-help-tip__bubble::after {
  left: 10px;
  right: auto;
  transform: none;
}

.detail-add-task-panel .field-help-tip--end .field-help-tip__bubble {
  left: auto;
  right: 0;
  transform: none;
}

.detail-add-task-panel .field-help-tip--end .field-help-tip__bubble::after {
  left: auto;
  right: 10px;
  transform: none;
}

.detail-add-task-panel .field-help-tip--below.field-help-tip--start .field-help-tip__bubble,
.detail-add-task-panel .field-help-tip--below.field-help-tip--end .field-help-tip__bubble {
  transform: none;
}

.detail-add-task-panel .field-help-tip:hover .field-help-tip__bubble,
.detail-add-task-panel .field-help-tip:focus .field-help-tip__bubble,
.detail-add-task-panel .field-help-tip:focus-within .field-help-tip__bubble {
  opacity: 1;
  visibility: visible;
}

.detail-add-task-panel .task-holding-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  color: #9ca3af;
}

.detail-add-task-panel .task-holding-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00c471;
}

.detail-add-task-panel .task-hold-checks {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  flex-shrink: 0;
}

.detail-add-task-panel .task-hold-checks .task-holding-check {
  margin: 0;
}

.task-hold-hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: #9ca3af
}

.slider-wrap {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
}

.custom-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    #0EB96B 0%,
    #0EB96B var(--slider-fill, 0%),
    #374151 var(--slider-fill, 0%),
    #374151 100%
  );
  border-radius: 3px;
  outline: none;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0EB96B;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.progress-shortcuts {
  display: flex;
  gap: 6px;
}

.shortcut-chip {
  height: 32px;
  padding: 0 12px;
  background: #374151;
  color: #9ca3af;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.shortcut-chip:hover {
  background: #4b5563;
}

.shortcut-chip.active {
  background: #00c471;
  color: #fff;
}

.dropzone {
  border: 2px dashed #4b5563;
  border-radius: 8px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #6b7280;
  /* <button> 전환 시 기본 스타일 무력화 — div와 동일 외형 유지 */
  width: 100%;
  background: transparent;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.dropzone:hover {
  border-color: #00c471;
  background: rgba(0, 196, 113, 0.05);
}

.dropzone span {
  font-size: 13px;
}

.upload-progress-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
}

.upload-progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: #00c471;
  transition: width 0.1s ease;
  border-radius: 0 0 8px 8px;
}

.upload-progress-text {
  font-size: 14px;
  font-weight: 700;
  color: #00c471;
  z-index: 1;
}

.register-btn {
  width: 100%;
  height: 48px;
  background: #00c471;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.register-btn:hover:not(:disabled) {
  background: #00a862;
}

.register-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.register-btn:disabled {
  background: #374151;
  color: #6b7280;
  cursor: not-allowed;
}

.register-btn.success-state {
  background: #1e2227;
  color: #00c471;
  pointer-events: none;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-count-badge {
  font-size: 12px;
  color: #9CA3AF;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
}

.detail-tasks-panel .panel-header .task-count-badge {
  margin-left: 0;
}

/* PM/담당자 이름, 업무 내역 라벨 기본 폰트 */
.detail-pm-assignees,
.detail-tasks-title {
  font-size: 14px;
}

/* 상세 패널 헤더 행 (PM/담당자 + 업무 내역) — 기본은 가로 배치 */
.detail-tasks-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* 듀얼모드 자식 창(프로젝트 상세)에서 업무내역 갯수·라벨·PM/담당자 폰트 1.5배 */
.app.timeline-only-view .task-count-badge {
  font-size: 20px;
  font-weight: 500;
}

.app.timeline-only-view .detail-pm-assignees {
  font-size: 20px;
}

.app.timeline-only-view .detail-tasks-title {
  font-size: 22px;
}

/* 듀얼모드: PM/담당자 줄과 업무 내역 줄을 분리 */
.app.timeline-only-view .detail-tasks-header-row {
  flex-direction: column;
  align-items: stretch;
}

/* 듀얼모드: 업무 내역 줄을 맨 위로 올리고 + 버튼을 오른쪽 끝으로 */
.app.timeline-only-view .detail-tasks-title-row {
  order: -1;
  justify-content: space-between;
  width: 100%;
}

.detail-tasks-panel .panel-header .detail-task-add-full-btn {
  margin-top: 0;
}

.task-item-new {
  animation: taskFadeIn 0.3s ease-out forwards;
}

.task-item-highlight {
  border-left: 3px solid #00c471;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: #6b7280;
}

.empty-state svg {
  color: #374151;
}

.empty-state .empty-title {
  font-size: 16px;
  font-weight: 600;
}

.empty-state .empty-desc {
  font-size: 14px;
  color: #4b5563;
}

/* 업무 컨텍스트 메뉴 스타일 */
.task-context-menu {
  position: fixed;
  z-index: 10000;
  background: #1e2227;
  border: 1px solid #374151;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  padding: 6px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: taskCmFadeIn 0.15s ease-out;
}

@keyframes taskCmFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.issue-section {
  padding: 0;
}

.deadline-change-section {
  margin-top: 4px;
  width: 100%;
}

.deadline-change-empty {
  padding: 10px 12px;
  border: 1px dashed rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  background: rgba(248, 250, 252, 0.9);
}

.early-close-locked-notice {
  margin: 8px 0 0;
  padding: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.deadline-reschedule-box .early-close-locked-notice {
  margin: 0 0 8px;
}

.deadline-change-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deadline-change-item {
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.9);
  font-size: 13px;
  line-height: 1.4;
}

.deadline-change-meta {
  color: #64748b;
  font-size: 12px;
  margin-bottom: 2px;
}

.deadline-change-range {
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.deadline-change-reason {
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}

.issue-header-row {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
}

.add-issue-toggle-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  background: #fef2f2;
  color: #ef4444;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 700;
}

.add-issue-toggle-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.issue-input-box {
 /* background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;*/
  margin-bottom: 12px;
  animation: slideDown 0.3s ease;
}

.deadline-reschedule-box.issue-input-box {
  padding: 0;
  margin-top: 8px;
}

@keyframes slideDown {}

.issue-input-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.issue-input-fields input,
.issue-input-fields textarea {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  color: #000000;
  font-size: 13px;
  outline: none;
}

.issue-input-fields input:focus,
.issue-input-fields textarea:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.issue-input-fields input::placeholder,
.issue-input-fields textarea::placeholder {
  color: #6b7280;
}

.issue-input-fields textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.issue-input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* 이슈 캘린더 표시 토글 + 날짜 선택 / 일정 지연 토글 + 기간 — 한 줄 배치 */
.issue-calendar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: nowrap;
}

.issue-calendar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.issue-calendar-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.issue-calendar-date {
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 14px;
  min-width: 0;
}

.issue-calendar-hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
}

.issue-delay-dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.issue-delay-tilde {
  color: var(--text-muted);
}

/* 프로젝트 일정 지연 요약 (캘린더 연동) */
.project-delay-summary {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #f0d9b0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 229, 176, 0.35) 0%, rgba(198, 135, 69, 0.12) 100%);
}

.project-delay-summary.active {
  border-color: #e8c48a;
  box-shadow: inset 0 0 0 1px rgba(198, 135, 69, 0.08);
}

.project-delay-summary-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.project-delay-summary-title {
  font-size: 13px;
  font-weight: 700;
  color: #695642;
}

.project-delay-summary-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(198, 135, 69, 0.18);
  color: #8a5a2b;
  font-size: 12px;
  font-weight: 700;
}

.project-delay-clear-btn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #e8c48a;
  border-radius: 6px;
  background: #fff;
  color: #8a5a2b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.project-delay-clear-btn:hover {
  background: #fff8ee;
}

.project-delay-summary-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-delay-date {
  padding: 6px 10px;
  border: 1px solid #e8c48a;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-main);
  background: #fff;
}

.project-delay-tilde {
  color: #8a5a2b;
}

.project-delay-summary-meta,
.project-delay-summary-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.issue-delay-badge,
.pf-issue-delay-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(198, 135, 69, 0.18);
  color: #8a5a2b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.issue-tag.delay-tag {
  background: rgba(109, 100, 94, 0.06);
  border-color: rgba(109, 100, 94, 0.28);
}

.issue-tag.delay-tag .issue-text {
  font-weight: 600;
}

.issue-tag.delay-issue .issue-text {
  font-weight: 600;
}

button.cancel-issue-btn,
button.save-issue-btn {
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

button.cancel-issue-btn {
  background: #fff !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button.cancel-issue-btn:hover {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #94a3b8 !important;
}

button.save-issue-btn {
  background: #064b36 !important;
  color: #fff !important;
  border: 1px solid #064b36 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button.save-issue-btn:hover {
  background: #043527 !important;
  border-color: #043527 !important;
}

button.save-issue-btn:disabled {
  background: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* 이슈 상세 입력은 textarea 로 전환. (색상 툴바가 있던 rich-editor-* 규칙은 마크업과 함께 제거)
   치수는 바로 위 형제인 이슈 제목 input 에 맞춘다 — 그쪽은 `input[type="text"]` 라
   특정도가 높아 패널 기준(14px / 12px 14px / 8px)을 받는데, 타입 선택자뿐인 textarea 는
   `.issue-input-fields textarea`(13px / 8px 12px / 6px)에 밀려 혼자 작아진다. */
.issue-input-fields textarea[data-issue-detail],
.issue-input-fields textarea[data-editing-issue-detail] {
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  line-height: 1.6;
  max-height: 200px;
  font-family: inherit;
  word-break: break-word;
}

.task-cm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #d1d5db;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  /* button 기본값 리셋 — div와 동일 외형 유지 */
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.task-cm-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.task-cm-item.delete {
  color: #ff4d4d;
}

.task-cm-item.delete:hover {
  background: rgba(255, 77, 77, 0.1);
  color: #ff4d4d;
}

.task-cm-item svg {
  opacity: 0.7;
}

.task-cm-item:hover svg {
  opacity: 1;
}

.task-item-editing {
  background: rgba(0, 196, 113, 0.08);
  border-left: 3px solid #00c471;
  border-color: rgba(0, 196, 113, 0.3);
}

.task-item-editing .detail-task-name {
  color: #00c471;
  font-weight: 600;
}

/* .task-item-viewing {
  background: rgba(0, 196, 113, 0.08);
  border-left: 3px solid #00c471;
} */

.task-item-viewing .detail-task-name {
  color: #00c471;
  font-weight: 600;
  font-size: 26px;
}

/* 수정 중이면서 보고 있는 경우 수정 스타일 우선 */
.task-item-editing.task-item-viewing {
  border-left: 3px solid #00c471;
  background: rgba(0, 196, 113, 0.1);
}

/* 업무 내역 리스트 인디케이터 스타일 */

.task-link-btn svg {
  color: #00c471;
}

/* Issue Tag Editing Styles */
.issue-tag {
  transition: all 0.2s ease;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.issue-tag.pinned {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f630;
}

.issue-text {
  flex: 1;
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
  margin-right: 12px;
}

.issue-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.edit-btn-small,
.del-btn-small,
.pin-btn-small {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.edit-btn-small:hover {
  background: #f3f4f6;
  color: #10b981;
  border-color: #10b981;
}

.del-btn-small:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #ef4444;
}

.pin-btn-small.active {
  background: #eff6ff;
  color: #3b82f6;
  border-color: #3b82f6;
}

.pin-btn-small:hover:not(.active) {
  background: #f1f5f9;
  color: #3b82f6;
}

.fixed-skill-info-wrapper {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 10000;
  width: 60px;
  height: 60px;
  display: none;
}

.fixed-skill-trigger {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #007342, #007342);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 196, 113, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.fixed-skill-trigger:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 15px 35px rgba(0, 196, 113, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}

.fixed-skill-tooltip {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 20px;
  width: 300px;
  background: rgba(17, 24, 39, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.fixed-skill-info-wrapper:hover .fixed-skill-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fixed-skill-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 22px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(17, 24, 39, 0.98);
}

.skill-tooltip-title {
  color: #00c471;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.skill-tooltip-content {
  color: #f9fafb;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
  word-break: keep-all;
}

/* Thumbnail Selection in Edit Modal */
.thumbnail-select-section {
  padding: 20px 0;
}

.thumbnail-select-section label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  display: block;
}

.thumbnail-grid-wrap {
  position: relative;
  margin-top: 10px;
}

.thumbnail-grid-wrap.has-more .thumbnail-grid {
  padding-bottom: 28px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #f9f9f9;
}

.thumbnail-item {
  width: 100%;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #eee;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  background:
    linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: thumb-skeleton-shimmer 1.2s ease-in-out infinite;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.thumbnail-item:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
  z-index: 5;
}

.thumbnail-item.selected {
  border-color: #168044;
  box-shadow: 0 0 0 3px rgba(22, 128, 68, 0.2);
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #fff;
}

.thumbnail-item img.thumb-load-error {
  object-fit: contain;
  padding: 8px;
  background: #f3f3f3;
  opacity: 0.55;
}

.thumbnail-grid-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 6;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.thumbnail-more-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 180px;
  height: 38px;
  padding: 0;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.thumbnail-more-chevron {
  flex-shrink: 0;
  display: block;
}

.thumbnail-more-btn:hover {
  background: #fafafa;
  border-color: #bbb;
}

.thumbnail-more-btn:focus-visible {
  outline: 2px solid #168044;
  outline-offset: 2px;
}

@keyframes thumb-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.thumbnail-item:has(img.thumb-ready),
.thumbnail-item:has(img.thumb-load-error) {
  animation: none;
  background: #fff;
}

.selected-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #168044;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 2px solid #fff;
  z-index: 10;
}

.no-images-text {
  grid-column: span 5;
  text-align: center;
  padding: 50px 0;
  color: #aaa;
  font-size: 14px;
  background: #fafafa;
  border: 1px dashed #ddd;
  border-radius: 10px;
}

.edit-modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fff;
  border-radius: 0 0 15px 15px;
}

.edit-modal-footer button {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.edit-modal-footer .cancel-btn {
  background: #fff;
  border: 1px solid #ddd;
  color: #666;
}

.edit-modal-footer .cancel-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.edit-modal-footer .save-btn {
  background: #168044;
  border: none;
  color: #fff;
}

.edit-modal-footer .save-btn:hover {
  background: #126636;
  box-shadow: 0 4px 12px rgba(22, 128, 68, 0.3);
}

.edit-modal-footer .save-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
}

/* 저장 중 스피너+텍스트 정렬 (플렉스 아이템은 blockify되어 .spinner 크기 적용됨) */
.save-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.issue-detail-sub {
  font-size: 14px;
  color: #6b7280;
  font-weight: 400;
  white-space: pre-wrap;
  display: inline-block;
  vertical-align: top;
}

.task-issue-text {
  display: flex;
  align-items: base-line;
  gap: 4px;
  margin-top: 4px;
  font-size: 14px;
  color: #ff3b30;
  font-weight: 600;
}

.issue-text-content {
  font-size: 20px;
}

.issue-content-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-issue-tooltip {
  position: fixed;
  width: 480px;
  background: #ffffff;
  border: 2px solid #dbdee2;
  border-radius: 8px;
  padding: 16px;
  z-index: 1000;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  cursor: default;
  animation: tooltipFadeIn 0.2s ease forwards;
  transition: none;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* .custom-issue-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 16px;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  transform: rotate(45deg);
} */

.custom-issue-tooltip .tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 700;
}

.tooltip-date {
  font-weight: 500;
  opacity: 0.8;
  font-size: 13px;
}

.custom-issue-tooltip .tooltip-body {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  background: #f5f5f5;
  padding: 12px;
  border-radius: 6px;
  border: 1px dashed #b8b8b8;
  white-space: pre-wrap;
}

.tooltip-detail-label {
  font-size: 13px;
  font-weight: 500;
  color: #999999;
  margin-bottom: 0px;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task {
  position: relative;
}

.task.active {
  z-index: 40;
}

.custom-issue-tooltip .tooltip-title {
  font-size: 20px;
  color: #1e293b;
  font-weight: 800;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
  white-space: pre-wrap;
}

.related-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.related-link-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.related-link-btn span {
  font-weight: 500;
}

/* ==========================================================================
   부서별 프로젝트 3단 분리 렌더링 스타일 (대표 / 일반 / 상시)
   ========================================================================== */

/* 1. 부서 헤더 신규 스타일 */

/* 2. 대표업무 선택 드롭다운 */
.dept-representative-dropdown-container {
  position: relative;
}

.dept-rep-dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 1000;
  background: #ffffff;
  border: 1px solid #e2ede8;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(6, 75, 54, 0.15);
  width: 220px;
  max-height: 250px;
  overflow-y: auto;
  padding: 6px 0;
  animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dept-rep-dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  color: #333333;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dept-rep-dropdown-item:hover {
  background: #f0f6f3;
  color: #064b36;
  font-weight: 700;
}

.dept-rep-dropdown-section {
  padding: 4px 0;
}

.dept-rep-dropdown-section:not(:last-child) {
  border-bottom: 1px solid #f0f6f3;
}

.dept-rep-dropdown-section-title {
  padding: 6px 16px 2px 16px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #8c8276;
  letter-spacing: 0.5px;
}

.dept-rep-dropdown-item.active {
  background: #f0f6f3;
  color: #11824a;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.dept-rep-dropdown-empty {
  padding: 10px 16px;
  font-size: 12px;
  color: #999999;
  font-style: italic;
}

/* 3. 부서 업무 스크롤 영역 */

/* 스크롤바 미려하게 커스텀 */

/* 4. 대표/일반 그룹의 가로 행 */
.project-group-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
  width: 100%;
}

.group-cards-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* overflow: hidden; */
}

/* 5. 대표 프로젝트 3D 카드 */

.thumbnail-placeholder span {
  font-size: 18px;
  font-weight: 700;
  color: #6b6158;
  letter-spacing: 1px;
}

/* 6. 일반 프로젝트 컴팩트 카드 (이전 .task 기반 복원) */
.compact-project-card {
  flex: 0 0 auto;
  min-height: 68px !important;
  display: grid !important;
  /* 우측 rate: 「검토」 등 라벨이 잘리지 않도록 max-content */
  grid-template-columns: minmax(0, 1fr) minmax(58px, max-content) !important;
  align-items: start;
  cursor: pointer;
  border-radius: 8px !important;
  padding: 10px 4px !important;
  margin: 0 !important;
  border: 1.5px solid transparent !important;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  background: transparent;
  gap: 8px;
}

/* compact-card-body 내부 본문 영역 */
.compact-card-body {
  min-width: 0;
  overflow: hidden;
}

/* 구분선: ::after 가상요소 */
.compact-project-card::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -6px;
  height: 1px;
  background: #eceae4;
  pointer-events: none;
}

.compact-project-card:last-child::after {
  display: none;
}

.compact-project-card:hover,
.compact-project-card.hovered {
  background: linear-gradient(#fff6ed 0%, #fdf9f4 100%);
  box-shadow: 0 2px 4px #00000014;
  border-color: #d8bfa3 !important;
}

/* .compact-project-card:hover::after,
.compact-project-card.hovered::after {
  display: none;
} */


.compact-project-card.active,
.compact-project-card.thumbnail-active {
  background: linear-gradient(90deg, #ffdbb526 0%, rgba(255, 219, 181, 0.00) 100%) !important;
  border-radius: 8px !important;
  border: 0;
  mix-blend-mode: multiply;
}


.compact-project-card.active {
  background: linear-gradient(#fef5ec 0%, #ffeed7 100%) !important;
  box-shadow: 0 2px 4px #00000014 !important;
  border-color: #f7c791 !important;
  border-width: 1.5px !important;
}

.compact-project-card.highlighted {
  background: #fffaf4 !important;
  border-radius: 8px !important;
  border: 1.5px solid #d4c5b9 !important;
  box-shadow: 0 4px 14px rgba(104, 78, 66, 0.07) !important;
}

.compact-project-card.highlighted::after {
  display: none;
}

.task-title {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  white-space: normal;
  overflow: hidden;
  color: #000000;
}

.task-title-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #168044;
  padding: 3px 0;
  width: 56px;
  border-radius: 100px;
  margin-left: 0;
  vertical-align: middle;
  line-height: 1.2;
  user-select: none;
  font-family: inherit;
  border: 1px solid rgba(22, 128, 68, 0.08);
  box-sizing: border-box;
}

.task-date {
  margin-top: 5px !important;
}

.task-delay-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  margin-bottom: 2px;
  padding: 0 8px;
  height: 22px;
  border-radius: 999px;
  background: rgba(229, 72, 77, 0.12);
  color: #e5484d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.compact-project-card .task-title .core-project-badge,
.project-thumbnail-card .card-title-text .core-project-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0px;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.2px;
  white-space: nowrap;
  color: var(--card-white);
}

.compact-project-card .core-project-badge.ongoing,
.compact-project-card .core-project-badge.진행,
.project-thumbnail-card .core-project-badge.ongoing,
.project-thumbnail-card .core-project-badge.진행 {
  background-color: #168044;
}

.compact-project-card .core-project-badge.always,
.compact-project-card .core-project-badge.상시,
.compact-project-card .core-project-badge.regular,
.project-thumbnail-card .core-project-badge.always,
.project-thumbnail-card .core-project-badge.상시,
.project-thumbnail-card .core-project-badge.regular {
  background-color: #168044;
}

.compact-project-card .core-project-badge.waiting,
.compact-project-card .core-project-badge.대기,
.compact-project-card .core-project-badge.standby,
.project-thumbnail-card .core-project-badge.waiting,
.project-thumbnail-card .core-project-badge.대기,
.project-thumbnail-card .core-project-badge.standby {
  background-color: #d97706;
}

.compact-project-card .core-project-badge.completed,
.compact-project-card .core-project-badge.완료,
.project-thumbnail-card .core-project-badge.completed,
.project-thumbnail-card .core-project-badge.완료 {
  background-color: #888888;
}

.compact-project-card .core-project-badge.completion-review,
.compact-project-card .core-project-badge.완료검토,
.project-thumbnail-card .core-project-badge.completion-review,
.project-thumbnail-card .core-project-badge.완료검토 {
  background-color: #168044;
}

.compact-project-card .core-project-badge.issue,
.compact-project-card .core-project-badge.지연,
.project-thumbnail-card .core-project-badge.issue,
.project-thumbnail-card .core-project-badge.지연 {
  background-color: #e5484d;
}

.compact-project-card .core-project-badge.holding,
.compact-project-card .core-project-badge.홀딩,
.compact-project-card .core-project-badge.보류,
.project-thumbnail-card .core-project-badge.holding,
.project-thumbnail-card .core-project-badge.홀딩,
.project-thumbnail-card .core-project-badge.보류 {
  background-color: #d97706;
}

.task-date,
.task-workers,
.task-issue-text {
  font-size: 20px;
  color: #555;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-issue-text {
  display: flex !important;
  align-items: center;
  gap: 4px;
  color: #ff3b30;
  font-size: 16px;
  font-weight: 600;
  margin-top: 6px !important;
  overflow: hidden;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

.task-issue-text.has-detail {

  border-radius: 4px !important;
  width: fit-content !important;
  cursor: pointer !important;
}

.task-issue-text.has-detail:hover {
  background-color: rgba(255, 59, 48, 0.08) !important;
  color: #ff1a0f !important;
}

.task-issue-text span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.task-workers {
  font-weight: 600 !important;
  color: #68736e;
  font-size: 13px;
  margin-top: 5px;
  transition: opacity .16s ease, height .16s ease;
}

.task-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 2px;
  min-width: 58px;
  flex-shrink: 0;
}

.task-rate {
  font-size: 20px;
  font-weight: 800;
  color: var(--team-color);
  text-align: right;
  width: 100%;
  white-space: nowrap;
}



/* 7. 상시 업무 영역 */

/* ==========================================================================
   Design System Overrides (Sian Matching)
   ========================================================================== */

.stats {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 12px 16px 14px 16px;
  border-bottom: 1px solid #eeece8;
  margin-bottom: 16px;
  background: #fcf9f6;
  box-shadow: none;
  border-radius: 0;
  gap: 0;
}

.stats>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  gap: 4px;
}

.stats>div span {
  font-size: 18px;
  color: #d1c9be;
  /* 비활성 연한 브라운베이지 */
  font-weight: 600;
  transition: color 0.2s;
}

.stats>div b {
  font-size: 25px;
  font-weight: 800;
  color: #b0a495;
  /* 비활성 연한 회색 */
  transition: color 0.2s;
}

.stat-progress b {
  color: #00c896;
}

.stat-always b {
  color: #2d7ff9;
}

.stat-waiting b {
  color: #d49b6a;
}

.stat-holding b {
  color: #e59b12;
}

.stat-done b {
  color: #a6a5a2;
}

.card-duration-text {
  color: #888888;
  font-size: 20px;
}

.card-progress-percent {
  color: #00c896;
  font-size: 18px;
  font-weight: 800;
}

.card-progress-bar {
  background: #00c896;
  border-radius: 99px;
}

.card-progress-track {
  background: #ececec;
  border-radius: 99px;
}


/* ==========================================================================
   Premium Header Design System Overrides → header.css로 이동
   ========================================================================== */
.detail-top .side-title-main,
.detail-top .side-title-main *,
.detail-top .detail-issue-inline,
.detail-top .side-desc-text-top,
.detail-top .related-link-btn span,
.detail-top .detail-cell-badge,
.bar-project-name,
.duration-badge,
.detail-task-name,
.detail-task-desc,
.card-cell-badge,
.always-cell-badge {
  text-shadow:
    -1px -1px 0 #00000040,
    1px -1px 0 #00000040,
    -1px 1px 0 #00000040,
    1px 1px 0 #00000040;
}

/* ==========================================================================
   Figma Match: Dept Card Component Full Redesign
   ========================================================================== */

/* ---- 카드 헤더 아이콘 ---- */
.dept-head-icon {
  display: inline-flex;
  align-items: center;
  color: #4b3e2e;
  flex-shrink: 0;
}

/* 대표 카운트 (예: 3/4) */
.dept-head-right {
  display: flex;
  align-items: baseline;
}

/* ---- 통계 행 구분선 ---- */

.stats>div:not(.stats-divider) {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0 4px;
  gap: 4px;
  flex: 1;
}

.stats-divider {
  width: 1px;
  background: #eae8e2;
  align-self: stretch;
  margin: 2px 0;
  flex-shrink: 0;
}

/* 기본 비활성화 상태의 텍스트와 숫자 스타일 */

/* 활성화(active) 상태의 레이블 스타일 */
.stats>div.active span {
  color: #8a8175;
  /* 활성 뚜렷한 브라운베이지 */
}

/* 활성화(active) 상태의 숫자 고유 컬러 스타일 */
.stat-progress.active b {
  color: #11824a;
}

/* 선명한 HM 초록 */
.stat-always.active b {
  color: #175ec2;
}

/* 선명한 HM 파랑 */
.stat-waiting.active b {
  color: #ad692e;
}

/* 활성 HM 대기 브라운/오렌지 */
.stat-holding.active b {
  color: #d97706;
}

/* 활성 HM 홀딩 선명한 주황 */
.stat-done.active b {
  color: #73726f;
}

/* 활성 HM 완료 슬레이트 그레이 */

/* ---- 대표 썸네일 카드 ---- */

/* 썸네일 카드 하단 콘텐츠 영역 */

/* 날짜 + 프로그레스 같은 행 */

/* ---- 일반(compact) 프로젝트 카드 ---- */

/* 날짜+프로그레스 한 행 */
.compact-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
  margin-top: 0;
}

/* ---- 상시 영역 ---- */

/* 상시 태그 뱃지: "편집|영상" 형태 */

/* 상시 업무명 */
.always-task-name {
  font-size: 20px;
  color: #111111;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* 대표 프로젝트와 일반 프로젝트 목록 사이의 dotted 구분선 */
.rep-group {
  border-bottom: 1px solid #d5d1c9;
  padding-bottom: 8px;
}

/* ─── 자식창 헤더 작업셀 뱃지 스타일 ─── */
.detail-cell-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
}

.detail-cell-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 99px;
  color: #ffffff;
  background-color: #0000004f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  letter-spacing: -0.2px;
  border: 1px solid #000000;
}

/* ─── 대시보드 카드 발주처 및 금액 리스트 스타일 ─── */
.task-client-amount {
  font-size: 20px;
  font-weight: 500;
  color: #555;
  /* 부드러운 중회색 */
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  letter-spacing: -0.3px;
}

.task-client-amount .amount-item {
  white-space: nowrap;
}

.task-client-amount .client-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── 중앙 메탈 휠 내부 필터 패널 스타일 ─── */
.central-filter-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 152px;
  height: 152px;
  border-radius: 50%;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 4px 0;
  display: none;
}

.central-filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.central-filter-row.top-row {
  margin-top: 10px;
  margin-bottom: 2px;
}

.central-filter-row.middle-row {
  margin-top: 6px;
  justify-content: space-between;
  padding: 0 16px;
}


/* 구분선 */
.central-divider {
  width: 76%;
  height: 1px;
  background: rgba(91, 83, 64, 0.18);
  margin: 3px 0;
}

/* 체크박스 스타일 */
.central-checkbox-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}

.central-checkbox-label.all-checkbox {
  flex-direction: row;
  gap: 5px;
}

.central-checkbox-label.all-checkbox .checkbox-text {
  font-size: 16px;
  font-weight: 700;
  color: #32281E;
}

.central-checkbox-label:not(.all-checkbox) {
  flex-direction: column;
  gap: 4px;
}

.central-checkbox-label:not(.all-checkbox) .checkbox-text {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.central-checkbox-label.진행-checkbox .checkbox-text {
  color: #1b6e4c;
}

.central-checkbox-label.대기-checkbox .checkbox-text {
  color: #9e5700;
}

.central-checkbox-label.완료-checkbox .checkbox-text {
  color: #737373;
}

/* 숨겨진 input */
.central-checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 커스텀 체크박스 사각형 */
.checkbox-custom {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

/* 박스 내부 원 기본 구조 (scale 0으로 숨김) */
.checkbox-custom::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 체크 되었을 때 내부 원 활성화 */
.central-checkbox-label input:checked~.checkbox-custom::after {
  transform: scale(1);
}

/* 1. 전체 (all-box) */
.checkbox-custom.all-box {
  border: 1.5px solid #6c6450;
  background: #aea288;
}

.checkbox-custom.all-box::after {
  background: #eee4cd;
}

/* 2. 진행 (진행-box) */
.checkbox-custom.진행-box {
  border: 1.5px solid #70c382;
  background: rgba(112, 195, 130, 0.18);
}

.checkbox-custom.진행-box::after {
  background: #046a3e;
}

/* 3. 대기 (대기-box) */
.checkbox-custom.대기-box {
  border: 1.5px solid #d7a76c;
  background: rgba(215, 167, 108, 0.6);
}

.checkbox-custom.대기-box::after {
  background: #9e5700;
}

/* 4. 완료 (완료-box) */
.checkbox-custom.완료-box {
  border: 1.5px solid #a0a0a0;
  background: #cbcbcb;
}

.checkbox-custom.완료-box::after {
  background: #6a6456;
}

/* disabled 투명 피드백 */
.central-checkbox-label input:disabled~.checkbox-custom {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 이슈 버튼 스타일 */
.central-issue-btn {
  background: transparent;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 3px 12px;
  border-radius: 12px;
  transition: all 0.2s ease;
  user-select: none;
  pointer-events: auto;
}

.issue-bullet-red {
  width: 7px;
  height: 7px;
  background-color: #FF0000;
  border-radius: 50%;
  display: inline-block;
}

.issue-label-text {
  font-size: 15px;
  font-weight: 700;
  color: #5b5340;
}

.central-issue-btn.active .issue-label-text {
  color: #C02424;
}

@media (min-width: 3800px) {

  /* 3840px 이상일 때 .app에 detail-docked가 적용되며, 메인과 라이트 패널이 50%씩 분할배치 */
  .app.detail-docked .main {
    flex: 0 0 50vw !important;
    width: 50vw !important;
    min-width: 50vw !important;
  }

  .right {
    flex: 0 0 50vw !important;
    width: 50vw !important;
    max-width: 50vw !important;
    display: block !important;
  }

  /* 타임라인 왼쪽 라벨 영역도 넓은 화면에 맞춰 확장 */
  .timeline-left {
    width: 400px !important;
  }

  .timeline-body {
    grid-template-columns: 400px 1fr !important;
  }
}

.tree-leader-card.highlighted-member,
.tree-member-card.highlighted-member {
  border: 1px solid #24694a !important;
  background: linear-gradient(180deg, #e7f1ed 0%, #ffffff 100%) !important;
  z-index: 99;
}