/* 디자인 참고: Notion의 담백한 표와 태그, Apple의 넉넉한 여백과 부드러운 모서리.
   외부 폰트·라이브러리 없이 시스템 글꼴만 쓴다. */

:root {
  --text: #37352f;
  --text-muted: #787774;
  --line: #e9e9e7;
  --surface: #fbfbfa;
  --hover: #f7f7f5;
  --accent: #2383e2;
  --danger: #e5484d;
  --danger-bg: #fff4f2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 24px 48px;
}

h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.base-date {
  margin: 0 0 28px;
  font-size: 1rem;
  color: var(--text-muted);
}

/* 담당자 필터 */
.filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.filter label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.filter select {
  appearance: none;
  padding: 7px 34px 7px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23787774' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter select:hover {
  border-color: #d3d3d0;
}

.filter select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.18);
}

/* 표: 둥근 테두리 안에 가로선만 둔다. 좁은 화면에서는 표가 옆으로 스크롤된다 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 16px;
  text-align: left;
  white-space: nowrap;
  border: 0;
  border-bottom: 1px solid var(--line);
}

tbody tr:last-child td {
  border-bottom: 0;
}

th {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
}

td {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

tbody tr:hover td {
  background: var(--hover);
}

/* 지연 행은 배경과 왼쪽 선으로 강조한다 */
tr.delayed td,
tr.delayed:hover td {
  background: var(--danger-bg);
}

tr.delayed td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

/* 완료 행: 기한·제목·담당자(1~3번째 칸) 글자만 흐리게. 상태 배지는 그대로 둔다 */
tr.done td:nth-child(-n + 3) {
  color: rgba(55, 53, 47, 0.4);
}

/* 상태 배지: Notion 태그처럼 옅은 색 바탕. 지연만 진한 빨강으로 눈에 띄게 한다 */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.badge-예정 {
  color: #5a5954;
  background: #ebeced;
}

.badge-진행 {
  color: #1a5fa8;
  background: #d9eaf8;
}

.badge-완료 {
  color: #1f6b43;
  background: #dcf1e4;
}

.badge-지연 {
  color: #fff;
  font-weight: 600;
  background: var(--danger);
}

/* 휴대폰: 여백과 글자를 줄여 한 화면에 더 많이 보이게 한다 */
@media (max-width: 600px) {
  main {
    padding: 28px 16px 32px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .base-date {
    margin-bottom: 20px;
    font-size: 0.9375rem;
  }

  th,
  td {
    padding: 11px 12px;
  }

  td {
    font-size: 0.875rem;
  }
}