/* ===== 디자인 토큰 ===== */
:root {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --text: #1F2937;
  --muted: #6B7280;
  --border: #E5E7EB;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --danger: #DC2626;
  --track: #E5E7EB;

  --cat-work: #3B82F6;
  --cat-personal: #10B981;
  --cat-study: #8B5CF6;
  /* 배지 배경: 흰 글자와 대비 4.5:1 이상 */
  --badge-work: #2563EB;
  --badge-personal: #047857;
  --badge-study: #7C3AED;

  --tab-active-bg: #1F2937;
  --tab-active-fg: #FFFFFF;
  --edit-bg: #EFF6FF;
  --success: #047857;
  --warn-bg: #FEF3C7;
  --warn-fg: #92400E;
  --warn-border: #FCD34D;

  color-scheme: light;

  --radius: 12px;
  --gap: 12px;
}

/* ===== 다크 모드 (운영체제 설정을 따름) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --surface: #1F2937;
    --text: #F3F4F6;
    --muted: #9CA3AF;
    --border: #374151;
    --primary: #3B82F6;
    --primary-hover: #2563EB;
    --danger: #F87171;
    --track: #374151;

    --tab-active-bg: #F3F4F6;
    --tab-active-fg: #111827;
    --edit-bg: #1E3A5F;
    --success: #34D399;
    --warn-bg: #422006;
    --warn-fg: #FDE68A;
    --warn-border: #92400E;

    color-scheme: dark;
  }
}

/* ===== 움직임 줄이기 설정 존중 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== 기본 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* 페이지 전체 스크롤 없음 */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ===== 앱 레이아웃: 창 높이에 맞춤 ===== */
.app {
  height: 100vh; /* 구형 브라우저 대비 */
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* 목록을 제외한 영역은 줄어들지 않고 고정 */
.app > * {
  flex-shrink: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ===== 헤더 ===== */
.app-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.app-header h1 {
  margin: 0;
  font-size: 1.5rem;
}

#today {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ===== 저장 불가 경고 ===== */
.storage-warning {
  margin: 0;
  padding: 10px 14px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  font-size: 0.9rem;
}

.storage-warning[hidden] {
  display: none;
}

/* ===== 진행률 ===== */
.progress {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.progress-title {
  font-weight: 700;
}

.progress-count {
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.bar {
  height: 8px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}

.bar-lg {
  height: 12px;
}

.bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.bar-work { background: var(--cat-work); }
.bar-personal { background: var(--cat-personal); }
.bar-study { background: var(--cat-study); }

.progress-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

.progress-message {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.progress-message:empty {
  display: none;
}

.progress-message.complete {
  color: var(--success);
  font-weight: 700;
  animation: pop 0.4s ease;
}

@keyframes pop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 카테고리 색 점 */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-work { background: var(--cat-work); }
.dot-personal { background: var(--cat-personal); }
.dot-study { background: var(--cat-study); }

/* ===== 입력 폼 ===== */
.todo-form {
  display: flex;
  gap: 8px;
}

.form-row {
  display: flex;
  gap: 8px;
}

#todo-input {
  flex: 1;
  min-width: 0;
}

#todo-input,
#todo-category {
  height: 44px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

#todo-category {
  cursor: pointer;
}

/* 빈 입력 시 오류 강조 (0.4초) */
#todo-input.input-error {
  border-color: var(--danger);
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--danger);
  border-color: var(--danger);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== 필터 탭 ===== */
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto; /* 아주 좁은 화면에서도 페이지 가로 스크롤 방지 */
  scrollbar-width: none;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--primary);
}

.filter-btn.active {
  background: var(--tab-active-bg);
  border-color: var(--tab-active-bg);
  color: var(--tab-active-fg);
}

.filter-count {
  font-size: 0.8rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* ===== 목록 (내부 스크롤) ===== */
.list-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-check {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.todo-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.todo-item.done .todo-text {
  text-decoration: line-through;
  opacity: 0.5;
}

.badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.badge-work { background: var(--badge-work); }
.badge-personal { background: var(--badge-personal); }
.badge-study { background: var(--badge-study); }

.icon-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
}

.icon-btn:hover {
  background: var(--bg);
  opacity: 1;
}

/* 편집 모드 */
.todo-item.editing {
  background: var(--edit-bg);
}

.edit-input,
.edit-category {
  height: 36px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 8px;
}

.edit-input {
  flex: 1;
  min-width: 0;
}

.edit-category {
  flex-shrink: 0;
  border-color: var(--border);
  cursor: pointer;
}

.todo-item.editing .icon-btn {
  opacity: 1;
}

.empty {
  margin: 0;
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
}

/* ===== 푸터 ===== */
.app-footer {
  display: flex;
  justify-content: flex-end;
}

/* ===== 모바일 (< 768px) ===== */
@media (max-width: 767px) {
  .app {
    gap: 10px;
  }

  .app-header h1 {
    font-size: 1.25rem;
  }

  .todo-form {
    flex-direction: column;
  }

  #todo-input {
    flex: none; /* 세로 배치에서 높이가 줄어들지 않도록 */
  }

  #todo-category {
    flex: 1;
  }

  .progress {
    padding: 12px 14px;
    gap: 10px;
  }

  /* 카테고리 진행률: 세로로 쌓되 한 줄(라벨 · 막대 · 개수)로 압축 */
  .progress-categories {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .progress-cat {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .progress-cat .progress-head {
    display: contents;
  }

  .progress-cat .cat-label {
    order: 1;
    width: 3.5em;
  }

  .progress-cat .bar {
    order: 2;
    flex: 1;
  }

  .progress-cat .progress-count {
    order: 3;
    min-width: 2.5em;
    text-align: right;
  }

  /* 필터 탭 4개가 한 줄에 모두 보이도록 */
  .filters {
    gap: 6px;
  }

  .filter-btn {
    flex: 1;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
    font-size: 0.9rem;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .filter-btn {
    min-height: 44px;
  }
}

/* 좁은 화면 (< 420px): 필터 탭의 색 점 생략 (개수 "10/20" 까지 한 줄에 들어가도록) */
@media (max-width: 419px) {
  .filter-btn .dot {
    display: none;
  }
}