/* ===================================
   폰트 설정 (Pretendard + Inter)
   =================================== */

/* Pretendard - 한글 최적화 폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* Inter - 영문/숫자 최적화 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 전역 폰트 설정 */
* {
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', 'Apple SD Gothic Neo', 'Roboto', 'Helvetica Neue', 
               Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 숫자/영문 전용 (작업ID, 진행율, 날짜 등) */
.task-id,
.progress-text,
.task-number,
input[type="number"],
.font-mono {
  font-family: 'Inter', 'Pretendard', 'Courier New', monospace;
  font-feature-settings: 'tnum' 1; /* 숫자 고정폭 */
}

/* 제목 폰트 */
h1, h2, h3, h4, h5, h6 { 
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 600;
}

h4 {
  font-weight: 600;
}

/* ===================================
   폰트 크기 & 굵기 최적화
   =================================== */

/* 기본 본문 크기 */
body {
  font-size: 0.8125rem; /* 13px */
  font-weight: 400;
  line-height: 1.5;
}

/* 헤더 텍스트 */
.header-text {
  font-size: 0.8125rem; /* 13px */
  font-weight: 500; /* Medium */
}

/* 테이블 셀 기본 */
.table-cell-text {
  font-size: 0.8125rem; /* 13px */
  font-weight: 400; /* Regular */
}

/* 작업 제목 */
.task-title {
  font-size: 0.8125rem; /* 13px */
  font-weight: 500; /* Medium */
}

/* 작업 ID (숫자 강조) */
.task-id-text {
  font-size: 0.75rem; /* 12px */
  font-weight: 600; /* Semi-bold */
}

/* 상태 뱃지 */
.badge-text {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600; /* Semi-bold */
}

/* 진행율 텍스트 */
.percentage-text {
  font-size: 0.75rem; /* 12px */
  font-weight: 600; /* Semi-bold */
}

/* 버튼 텍스트 */
button {
  font-weight: 500; /* Medium */
  font-family: 'Pretendard', 'Inter', sans-serif;
}

/* ===================================
   모달 & 폼 요소 폰트
   =================================== */

/* 모달 제목 */
.modal-title,
h3.text-xl,
h4.text-sm {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-weight: 600;
}

/* 모달 레이블 */
label {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-weight: 500;
  font-size: 0.8125rem;
}

/* 입력 필드 */
input,
textarea,
select {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 0.8125rem;
  font-weight: 400;
}

/* placeholder 텍스트 */
input::placeholder,
textarea::placeholder {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-weight: 400;
}

/* 버튼 내부 아이콘 + 텍스트 */
button i {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}

/* 옵션 텍스트 */
option {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 0.8125rem;
}

/* Tailwind CSS 클래스 오버라이드 */
.text-xl {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
}

.text-2xl {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
}

.text-lg {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
}

.text-sm {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 0.8125rem !important; /* 13px */
}

.text-xs {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 0.75rem !important; /* 12px */
}

/* 폰트 굵기 조정 */
.font-bold {
  font-weight: 600 !important; /* Bold → Semi-bold */
}

.font-semibold {
  font-weight: 600 !important;
}

.font-medium {
  font-weight: 500 !important;
}

/* 모든 텍스트 요소 */
p, span, div, a {
  font-family: 'Pretendard', 'Inter', sans-serif;
}

/* ===================================
   간트 차트 스타일 (frappe-gantt v0.10.0)
   =================================== */

/* 전체 컨테이너 */
#gantt-chart {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  min-height: 400px;
}

/* 간트 차트 배경 */
.gantt-container {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
}

/* 작업 바 스타일 */
.gantt .bar-todo {
  fill: #cbd5e1 !important; /* 회색 - 할일 */
}

.gantt .bar-progress {
  fill: #3b82f6 !important; /* 파랑 - 진행중 */
}

.gantt .bar-done {
  fill: #10b981 !important; /* 초록 - 완료 */
}

/* 프로젝트 타임라인 바 (범위 표시용) */
.gantt .bar-project-timeline {
  fill: #f59e0b !important; /* 주황 - 프로젝트 전체 기간 */
  opacity: 0.3 !important;
  stroke: #f59e0b !important;
  stroke-width: 2 !important;
  stroke-dasharray: 5, 5 !important; /* 점선 */
}

.gantt .bar-project-timeline .bar-label {
  font-weight: 700 !important;
  fill: #d97706 !important;
  font-size: 13px !important;
}

/* 진행율 표시 */
.gantt .bar-progress-wrapper {
  fill: rgba(59, 130, 246, 0.2) !important;
}

/* 호버 효과 */
.gantt .bar-wrapper:hover .bar {
  opacity: 0.85;
  filter: brightness(0.95);
}

/* 작업명 텍스트 */
.gantt .bar-label {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  fill: #333 !important;
}

/* 날짜 헤더 */
.gantt .upper-text,
.gantt .lower-text {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 12px !important;
  fill: #666 !important;
}

/* 그리드 라인 */
.gantt .grid-row {
  fill: #fafafa;
}

.gantt .grid-row:nth-child(even) {
  fill: #f5f5f5;
}

/* 오늘 날짜 하이라이트 */
.gantt .today-highlight {
  fill: rgba(59, 130, 246, 0.1) !important;
}

/* 팝업 스타일 */
.gantt-popup {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 작업 카드 호버 효과 */
.task-card {
  transition: all 0.2s ease;
  cursor: grab;
}

.task-card:hover {
  transform: translateY(-2px);
}

.task-card:active {
  cursor: grabbing;
}

/* 드래그 중인 카드 */
.task-card.opacity-50 {
  opacity: 0.5;
}

/* 드롭 존 하이라이트 */
[data-status].bg-blue-50 {
  background-color: #eff6ff !important;
  transition: background-color 0.2s ease;
}

/* 프로젝트 아이템 */
.project-item {
  transition: background-color 0.2s ease;
}

/* 모달 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fixed.bg-black {
  animation: fadeIn 0.2s ease;
}

.bg-white.rounded-lg.shadow-xl {
  animation: slideUp 0.3s ease;
}

/* ===================================
   Phase 1: ClickUp 스타일 헤더 + 행
   =================================== */

/* 테이블 헤더 스타일 - 제거 (이제 인라인으로 처리) */

/* 작업 행 스타일 */
.task-row {
  border-bottom: 1px solid #f1f3f5;
  transition: background-color 0.15s ease;
  font-size: 0.8125rem; /* 13px */
  font-weight: 400;
  min-height: 44px; /* 최소 행 높이 */
}

.task-row:hover {
  background-color: #f8f9fa;
}

/* 선택된 행 강조 */
.task-row-selected {
  background-color: #e3f2fd !important; /* 부드러운 파랑 */
  border-left: 3px solid #1976d2;
  box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.1);
}

.task-row-selected:hover {
  background-color: #bbdefb !important; /* 호버 시 더 진한 파랑 */
}

/* 라디오 버튼 커스텀 */
.task-radio {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #228be6;
}

.task-radio:hover {
  transform: scale(1.1);
  transition: transform 0.15s ease;
}

/* 체크박스 커스텀 (향후 사용) */
.task-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #228be6;
  border-radius: 4px;
}

/* 셀 패딩 */
.task-cell {
  padding: 12px 10px; /* 패딩 증가 */
  font-size: 0.8125rem; /* 13px */
  font-family: 'Pretendard', 'Inter', sans-serif;
  color: #212529;
  vertical-align: middle;
  letter-spacing: -0.01em; /* 한글 자간 조정 */
}

/* 계층 들여쓰기 */
.task-indent {
  display: inline-block;
}

/* 접기/펼치기 아이콘 */
.toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: #868e96;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.toggle-icon:hover {
  background-color: #e9ecef;
  color: #495057;
}

.toggle-icon.expanded {
  transform: rotate(90deg);
}

/* 작업 ID/이름 링크 스타일 */
.task-link {
  color: #1976d2; /* 더 진한 파랑 */
  text-decoration: none;
  font-weight: 500;
  font-family: 'Pretendard', 'Inter', sans-serif;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.task-link:hover {
  color: #1565c0; /* 호버 시 더 어두운 파랑 */
  text-decoration: none;
}

/* 편집 가능 필드 호버 */
.editable-field {
  cursor: pointer;
  padding: 6px 8px; /* 패딩 증가 */
  border-radius: 4px;
  transition: background-color 0.15s ease, outline 0.15s ease;
}

.editable-field:hover {
  background-color: #f8f9fa;
  outline: 1px solid #e9ecef;
}

/* ===================================
   Phase 2: 상태/진행율 시각화
   =================================== */

/* 상태 뱃지 스타일 (ClickUp 스타일) */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  font-family: 'Pretendard', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 상태 색상 개선 (ClickUp 스타일) */
.status-todo {
  background-color: #f1f3f5;
  color: #5c7080;
  border: 1px solid #dee2e6;
}

.status-in-progress {
  background-color: #e3f2fd;
  color: #1976d2;
  border: 1px solid #90caf9;
}

.status-done {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #81c784;
}

/* 진행율 프로그레스 바 */
.progress-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 간격 증가 */
  width: 100%;
  padding: 2px 0; /* 상하 여백 */
}

.progress-bar-wrapper {
  flex: 1;
  height: 8px; /* 높이 증가 */
  background-color: #e9ecef;
  border-radius: 4px; /* 둥근 모서리 증가 */
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* 입체감 */
}

.progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 입체감 */
}

/* 진행율 색상 개선 (ClickUp 스타일) */
.progress-low {
  background-color: #ef5350; /* 부드러운 빨강 */
}

.progress-medium {
  background-color: #ffa726; /* 따뜻한 주황 */
}

.progress-high {
  background-color: #66bb6a; /* 신선한 초록 */
}

.progress-complete {
  background-color: #43a047; /* 진한 초록 */
}

.progress-text {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Inter', 'Pretendard', sans-serif;
  min-width: 36px;
  text-align: right;
  font-feature-settings: 'tnum' 1; /* 숫자 고정폭 */
}

/* 포/백워드 아이콘 */
.base-date-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #495057;
}

.base-date-icon i {
  color: #868e96;
}

/* 담당자/생성자 아바타 스타일 (향후 구현) */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #228be6;
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ===================================
   아이콘 스타일
   =================================== */

/* 필드 내부 아이콘 */
.fa-user,
.fa-user-circle,
.fa-clock,
.fa-calendar-day,
.fa-calendar-check,
.fa-exclamation-circle {
  font-size: 0.625rem; /* 10px */
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

/* 호버 시 아이콘 강조 */
.editable-field:hover .fa-user,
.editable-field:hover .fa-clock,
.editable-field:hover .fa-calendar-day,
.editable-field:hover .fa-calendar-check {
  opacity: 1;
}

/* 경고 아이콘 (마감일 지남) */
.fa-exclamation-circle {
  opacity: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ===================================
   Phase 3: 계층 표시 개선
   =================================== */

/* 계층별 배경색 (ClickUp 스타일 - 깊이감) */
.task-row[data-depth="0"] {
  background-color: #ffffff;
}

.task-row[data-depth="1"] {
  background-color: #fafafa;
}

.task-row[data-depth="2"] {
  background-color: #f5f5f5;
}

.task-row[data-depth="3"] {
  background-color: #f0f0f0;
}

.task-row[data-depth="4"] {
  background-color: #ebebeb;
}

/* 계층별 호버 효과 */
.task-row[data-depth="0"]:hover {
  background-color: #f8f9fa;
}

.task-row[data-depth="1"]:hover {
  background-color: #f1f3f5;
}

.task-row[data-depth="2"]:hover {
  background-color: #e9ecef;
}

.task-row[data-depth="3"]:hover {
  background-color: #dee2e6;
}

.task-row[data-depth="4"]:hover {
  background-color: #ced4da;
}

/* 드래그 핸들 개선 */
.drag-handle {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.task-row:hover .drag-handle {
  opacity: 1;
}

/* 오른쪽 고정 선택 칼럼 hover 배경 */
.task-row:hover .select-column-sticky {
  background-color: #f9fafb !important;
}

/* 작업 ID 스타일 개선 */
.task-id {
  font-family: 'Inter', 'Pretendard', monospace;
  font-weight: 600;
  color: #495057;
  font-size: 0.75rem;
  font-feature-settings: 'tnum' 1; /* 숫자 고정폭 */
  letter-spacing: 0.01em;
}

/* ===================================
   Resizable Columns (Excel-like)
   =================================== */

.resizable-column {
  position: relative;
  box-sizing: border-box;
}

.column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  user-select: none;
}

.column-resizer:hover {
  background: rgba(59, 130, 246, 0.3);
}

.column-resizer:active,
.column-resizer.resizing {
  background: rgba(59, 130, 246, 0.6);
}