/* ============================================================
   Proteina Tasks Manager — style.css
   M1 W1.1: 디자인 토큰(design tokens) + 최소 부트(boot) 스타일
   출처: DOCS/03_DESIGN_SYSTEM.md §2~§6, §10
   ============================================================ */

/* ------------------------------------------------------------
   0층 — 한글 부분 폰트(Pretendard subset, ADR-013/W5.4)
   PDF 캡쳐 시 한글 깨짐 방지. vendor 폴더 안에 동봉 — 인터넷 없이 동작.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Pretendard';
  src: url('vendor/fonts/pretendard-subset/PretendardSubset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   1층 — 시스템 토큰 (DESIGN_SYSTEM §2.2~§2.3, §3~§6)
   ------------------------------------------------------------ */
:root {
  /* 표면(surface) — §2.2 */
  --bg-page:        #EFEBE1;
  --bg-app:         #FAFAF7;
  --bg-card:        #FFFFFF;
  --bg-soft:        #FDFBF6;
  --bg-sidebar:     #F5F1EB;
  --bg-row-hover:   #FAF8F2;
  --bg-sub:         #F5F1EB;

  /* 경계(border) */
  --border:         #EAE4DA;
  --border-soft:    #EFEAE0;

  /* 글자(text) */
  --text:           #2C2C2C;
  --text-strong:    #3D2F1F;
  --text-brand:     #5B4A3A;
  --text-muted:     #888888;
  --text-faint:     #9A8A78;

  /* 강조(accent) */
  --accent:         #C8A878;
  --accent-bg:      #E8DFC9;
  --accent-soft:    #FDF5E8;

  /* 의미 토큰(semantic tokens) — §2.3 */
  --color-danger-soft-bg:    #F5D8D8;  --color-danger-soft-text:    #8B4A4A;
  --color-info-soft-bg:      #D8DFF0;  --color-info-soft-text:      #445788;
  --color-purple-soft-bg:    #E5D8F0;  --color-purple-soft-text:    #5B4488;
  --color-success-soft-bg:   #D4E5D4;  --color-success-soft-text:   #3D6B3D;
  --color-warning-soft-bg:   #F0E5D4;  --color-warning-soft-text:   #8B6B3A;
  --color-neutral-soft-bg:   #E8E8E8;  --color-neutral-soft-text:   #666666;

  /* 폰트 크기(font size) — §3.2 */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   15px;
  --fs-xl:   17px;
  --fs-xxl:  22px;

  /* 간격(spacing, 4px 기반) — §4.1 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* 라운드(border-radius) — §5.1 */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 9999px;

  /* 그림자(box-shadow) — §5.2 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* 모션(motion) — §6.1 */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
}

/* 다크 테마 자리 — DESIGN_SYSTEM §2.4 (M6 이후 채움. 현재 비워둠.) */
[data-theme="dark"] {
  /* reserved */
}

/* ------------------------------------------------------------
   리셋(reset) — 최소
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   부트(boot) 스타일 — W1.1 검증 기준: 빈 페이지가 폰트·배경색으로 떠야 함
   ------------------------------------------------------------ */
body {
  background: var(--bg-page);
  color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: var(--fs-base);
  font-feature-settings: 'tnum', 'ss01';
  letter-spacing: -0.01em;
  line-height: 1.5;
  min-height: 100vh;
}

/* ------------------------------------------------------------
   부팅 안내 카드(boot card) — 초기화 실패 시에만 사용.
   ------------------------------------------------------------ */
.boot {
  max-width: 560px;
  margin: var(--sp-7) auto;
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.boot__title {
  margin: 0 0 var(--sp-2);
  color: var(--text-strong);
  font-size: var(--fs-xl);
  font-weight: 800;
}

.boot__body {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.5;
}

/* 인터넷 모드 초기화 실패 화면 (2026-05-19 핫픽스) */
.boot--error {
  max-width: 720px;
}
.boot--error .boot__title { color: #b91c1c; }
.boot__error {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  color: #7f1d1d;
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  word-break: break-word;
}
.boot__details {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.boot__details pre {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-muted, #f5f5f4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  overflow-x: auto;
}
.boot__actions {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-2);
}
.boot__retry {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-strong);
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.boot__retry:hover { background: var(--bg-muted, #f5f5f4); }
.boot__hint {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ============================================================
   앱 셸(app shell) — DESIGN_SYSTEM §8 레이아웃
   ============================================================ */
.app {
  display: flex;
  max-width: 1680px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg-app);
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 180px;
  flex-shrink: 0;
  padding: var(--sp-5) var(--sp-3);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.sidebar__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text-strong);
  flex: 1;
  min-width: 0;
}

.sidebar__settings-btn {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  padding: 4px 10px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.nav-item:hover {
  background: var(--bg-row-hover);
}

.nav-item.active {
  background: var(--accent-bg);
  color: var(--text-strong);
  font-weight: 600;
}

.nav-item__count {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.sidebar__zoom {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.zoom-btn {
  width: 28px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.zoom-btn:hover {
  background: var(--bg-row-hover);
  color: var(--text);
}

.zoom-value {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  user-select: none;
  cursor: pointer;
}
.zoom-value:hover {
  color: var(--text);
}

.nav-item__count--danger {
  color: var(--color-danger-soft-text);
  background: var(--color-danger-soft-bg);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  min-width: 22px;
  text-align: center;
}

/* 메인 영역 */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.topbar__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text-strong);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.save-status {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.save-status[data-kind="dirty"] {
  color: var(--color-warning-soft-text);
  font-weight: 600;
}

.save-status[data-kind="saving"] {
  color: var(--color-info-soft-text);
}

.save-status[data-kind="error"] {
  color: var(--color-danger-soft-text);
}

/* 툴바(toolbar) — M2: 검색 + 필터 칩 */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
}

.toolbar:empty {
  display: none;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.search-bar__input {
  flex: 1;
  font-size: var(--fs-base);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}

.filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.filter-bar__toggles {
  display: flex;
  gap: var(--sp-2);
}

.chip-toggle {
  padding: 4px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip-toggle:hover {
  background: var(--bg-row-hover);
}

.chip-toggle.is-active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--text-strong);
  font-weight: 600;
}

mark.hl {
  background: var(--accent-soft);
  color: var(--text-strong);
  padding: 0 2px;
  border-radius: 2px;
}

.task-list__empty {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: right;
  font-style: italic;
  opacity: 0.7;
}
/* 빈 그룹은 헤더 마진/패딩도 작게 — 전체 뷰(ADR-012)의 빈 카테고리 도배 방지 */
/* task-list가 통째로 비었거나(c2 묶음), 안내 한 줄만 있는 경우(상위 레벨) 모두 매칭 */
.group--c1:has(.task-list:empty),
.group--c1:has(.task-list__empty:only-child),
.group:has(.task-list:empty),
.group:has(.task-list__empty:only-child) {
  margin-bottom: 2px;
}
.group:has(> .task-list:empty) > .group-header,
.group:has(> .task-list > .task-list__empty:only-child) > .group-header {
  /* 가로 여백 0 유지 — 비어있지 않은 헤더와 칩(label)의 좌측 정렬을 맞추기 위함 */
  padding: 2px 0;
  min-height: 22px;
}

/* 콘텐츠 */
.content {
  flex: 1;
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
}

/* ============================================================
   공통 컴포넌트(common components) — DESIGN_SYSTEM §9
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 7px var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

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

.btn-primary {
  background: var(--color-success-soft-bg);
  border-color: var(--color-success-soft-bg);
  color: var(--color-success-soft-text);
}

.btn-secondary {
  background: var(--accent-bg);
  border-color: var(--accent-bg);
  color: var(--text-strong);
}

.btn-save {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

.btn-icon {
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-card);
}

.btn-danger {
  background: var(--color-danger-soft-bg);
  border-color: var(--color-danger-soft-bg);
  color: var(--color-danger-soft-text);
}

.btn:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

/* 칩 */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  color: var(--text);
  font-size: var(--fs-sm);
}

.chip--toggle {
  cursor: pointer;
  user-select: none;
}

.chip--toggle input {
  margin-right: var(--sp-1);
}

.chip--toggle:has(input:checked) {
  background: var(--accent-bg);
  color: var(--text-strong);
  border-color: var(--accent);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* 입력 필드 */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
}

.field__input {
  padding: 9px 11px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
}

.field__input:focus {
  background: var(--bg-card);
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* ============================================================
   모달(modal) — DESIGN_SYSTEM §9.4
   ============================================================ */
#modal-root {
  position: relative;
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  z-index: 100;
}

/* 모달 열린 동안 본화면 스크롤 차단 — 모달 휠 이벤트가 본화면으로 전파되지 않게 */
body.modal-open {
  overflow: hidden;
}

.modal-overlay.is-visible {
  opacity: 1;
}

.modal {
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal--lg { width: 620px; }
.modal--xl { width: 1100px; max-width: 95vw; }
.modal--task { width: 780px; max-width: 94vw; }

/* 업무 수정/새 업무 폼 — 한 화면에 모두 보이도록 컴팩트 */
.task-form--compact .field {
  margin-bottom: var(--sp-2);
  gap: 2px;
}
.task-form--compact .field__label {
  font-size: var(--fs-xs);
}
.task-form--compact .field__input {
  padding: 6px 9px;
  font-size: var(--fs-sm);
}
.task-form--compact .chip-row {
  gap: 4px;
}
.task-form--compact .chip--toggle {
  padding: 2px 8px;
  font-size: var(--fs-xs);
}
.task-form--compact .modal__body,
.modal--task .modal__body {
  padding: var(--sp-4) var(--sp-5);
}

.field-grid--3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
}
.field-grid--4col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--sp-3);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-sub);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}

.modal__header .modal__close { cursor: pointer; }

.modal__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-strong);
}

.modal__close {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
}

.modal__body {
  flex: 1;
  min-height: 0;
  padding: var(--sp-5);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-sub);
  border-top: 1px solid var(--border);
}

.modal__footer-left,
.modal__footer-right {
  display: flex;
  gap: var(--sp-2);
}

/* ============================================================
   리포트 창(개인 리포트 모달) — M4 W4.7
   상단 컨트롤바(인사말 풀 + 3개 액션) → 인사말 입력 → 전폭 미리보기
   ============================================================ */
.report-window__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.report-window__toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.report-window__pool-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 280px;
  min-width: 0;
}

.report-window__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
}

.report-window__select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
}

.report-window__select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
}

.report-window__actions {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.report-window__greeting-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.report-window__greeting-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.report-window__greeting-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
}

.report-window__textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
}

.report-window__textarea:focus {
  background: var(--bg-card);
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: -1px;
}

.report-window__preview-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.report-window__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.report-window__divider::before,
.report-window__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.report-window__divider-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.report-window__preview {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  max-height: 60vh;
  overflow: auto;
}

/* ============================================================
   토스트(toast)
   ============================================================ */
.toast-root {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 200;
  pointer-events: none;
}

.toast {
  min-width: 320px;
  max-width: 420px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  color: var(--text);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
}

.toast--success { border-left-color: var(--color-success-soft-text); }
.toast--info    { border-left-color: var(--color-info-soft-text); }
.toast--warn    { border-left-color: var(--color-warning-soft-text); }
.toast--error   { border-left-color: var(--color-danger-soft-text); }
.toast--partial { border-left-color: var(--color-warning-soft-text); }

.toast__title {
  font-weight: 700;
  color: var(--text-strong);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

.toast__kind {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.toast__body {
  margin-top: var(--sp-1);
  color: var(--text-muted);
}

/* ============================================================
   업무 행(task row) — M1 최소 스타일. M2~M3에서 정교화.
   ============================================================ */
.group {
  margin-bottom: var(--sp-3);
}

.group-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}

.group-header__chip {
  padding: 2px 9px;
  border-radius: var(--radius-xl);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.group-header__chip[data-token="danger-soft"]  { background: var(--color-danger-soft-bg);  color: var(--color-danger-soft-text); }
.group-header__chip[data-token="info-soft"]    { background: var(--color-info-soft-bg);    color: var(--color-info-soft-text); }
.group-header__chip[data-token="purple-soft"]  { background: var(--color-purple-soft-bg);  color: var(--color-purple-soft-text); }
.group-header__chip[data-token="success-soft"] { background: var(--color-success-soft-bg); color: var(--color-success-soft-text); }
.group-header__chip[data-token="warning-soft"] { background: var(--color-warning-soft-bg); color: var(--color-warning-soft-text); }
.group-header__chip[data-token="neutral-soft"] { background: var(--color-neutral-soft-bg); color: var(--color-neutral-soft-text); }

/* 그룹 접기/펴기 — 화살표(▼/▶)만 클릭 트리거 */
.group-header[data-collapse-key] {
  user-select: none;
}
.group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  color: inherit;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
  border-radius: 3px;
}
.group-toggle:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}
.group.is-collapsed > .group__children,
.group.is-collapsed > .task-list {
  display: none;
}
.group.is-collapsed {
  margin-bottom: 4px;
}

.task-list {
  display: flex;
  flex-direction: column;
  padding-left: 22px;
}

.task-row {
  display: grid;
  grid-template-columns: 60px 180px 18px 1fr 160px 180px 64px;
  gap: var(--sp-3);
  align-items: center;
  padding: 5px var(--sp-3);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}

.task-row:hover {
  background: var(--bg-row-hover);
}

.task-row__rail { display: none; }

.task-row--overdue .task-row__name { color: var(--color-danger-soft-text); }
.task-row--overdue .task-row__date { color: var(--color-danger-soft-text); }

.task-row__status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.task-row__status[data-status="in_progress"] { color: var(--color-info-soft-text); }
.task-row__status[data-status="pending"]     { color: var(--color-warning-soft-text); }
.task-row__status[data-status="done"]        { color: var(--color-neutral-soft-text); }

.task-row__date {
  display: grid;
  grid-template-columns: 78px 14px 78px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.task-row__date-cell {
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
  text-align: center;
}
.task-row__date-cell:hover { background: var(--bg-row-hover); color: var(--text); }
.task-row__date-sep { text-align: center; opacity: 0.6; }

.task-row__name[data-inline-field] {
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
}
.task-row__name[data-inline-field]:hover { background: var(--bg-row-hover); }

.inline-edit__input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: var(--bg-card);
  outline: none;
}
select.inline-edit__input { cursor: pointer; }

/* + 카테고리 / + 세부 / + 새 프로젝트 버튼 (인라인 추가) */
.group-add-btn {
  margin-left: auto;
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.group-add-btn:hover {
  border-style: solid;
  background: var(--bg-card);
  color: var(--text);
}
.group-add-btn--editing {
  padding: 2px 6px;
  border-style: solid;
  border-color: var(--accent);
  background: var(--bg-card);
  min-width: 240px;
}
.inline-add__input {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  border: none;
  outline: none;
  background: transparent;
  min-width: 220px;
  width: 100%;
  padding: 1px 2px;
}

/* 프로젝트 순서 변경 ▲/▼ */
.group-move-btn {
  font-size: 9px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
}
.group-move-btn:hover { background: var(--bg-card); color: var(--text); }

/* + 업무 버튼 (c2 헤더) — + 카테고리/+ 세부와 시각 차별 */
.group-add-btn--task {
  border-color: var(--color-info-soft-text);
  color: var(--color-info-soft-text);
}
.group-add-btn--task:hover {
  background: var(--color-info-soft-bg);
  border-style: solid;
}

/* ============================================================
   대시보드 (담당자별 카드 그리드)
   ============================================================ */
.dash-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.dash-toolbar__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.dash-toolbar__hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

.dash-grid {
  display: grid;
  gap: var(--sp-3);
}
.dash-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.dash-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

.dash-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 80px;
}
.dash-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 6px 12px;
  background: var(--color-warning-soft-bg);
  color: var(--color-warning-soft-text);
  border-bottom: 1px solid var(--border-soft);
}
.dash-card__name-head {
  font-weight: 700;
  font-size: var(--fs-sm);
}
.dash-card__role {
  font-size: var(--fs-xs);
  opacity: 0.75;
}
.dash-card__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  opacity: 0.75;
}
.dash-card__body {
  padding: 4px 0;
  max-height: 360px;
  overflow-y: auto;
}
.dash-card__row {
  display: grid;
  grid-template-columns: 50px 170px 1fr;
  gap: var(--sp-2);
  align-items: center;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border-soft);
}
.dash-card__row:last-child { border-bottom: none; }
.dash-card__status {
  font-weight: 600;
  color: var(--text-muted);
}
.dash-card__status[data-status="in_progress"] { color: var(--color-info-soft-text); }
.dash-card__status[data-status="pending"]     { color: var(--color-warning-soft-text); }
.dash-card__status[data-status="holding"]     { color: var(--color-info-soft-text); opacity: 0.7; }
.dash-card__status[data-status="done"]        { color: var(--color-neutral-soft-text); }
.dash-card__status[data-status="cancelled"]   { color: var(--text-faint); text-decoration: line-through; }
.dash-card__date {
  display: grid;
  grid-template-columns: 74px 14px 74px;
  align-items: center;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.dash-card__date-cell { text-align: center; }
.dash-card__date-sep { text-align: center; opacity: 0.6; }
.dash-card__name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-card__empty {
  padding: var(--sp-3) var(--sp-3);
  color: var(--text-faint);
  font-style: italic;
  font-size: var(--fs-xs);
  text-align: center;
}

.task-row__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-base);
  color: var(--text);
}

.task-row__section {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.task-row__priority {
  font-size: var(--fs-base);
  text-align: center;
  line-height: 1;
}

.task-row__priority[data-priority="urgent"] {
  color: var(--color-danger-soft-text);
}

.task-row__fields,
.task-row__assignees {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.task-row__actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* 빈 상태 / 플레이스홀더 */
.empty,
.placeholder {
  padding: var(--sp-7);
  text-align: center;
  color: var(--text-muted);
}

.empty__title,
.placeholder__title {
  font-size: var(--fs-lg);
  color: var(--text-strong);
  margin: 0 0 var(--sp-2);
}

.empty__body,
.placeholder__body {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* 설정 모달 */
.settings__hint {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.settings__section {
  margin-bottom: var(--sp-5);
}

.settings__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.settings__section-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
}

.settings__counter {
  margin-left: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-faint);
}

.settings__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.person-row {
  display: grid;
  grid-template-columns: 28px 90px 110px 110px minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: center;
}

.person-row[data-role="supervisor"],
.person-row[data-role="leader"] {
  grid-template-columns: 28px 90px 110px 110px minmax(0, 1fr);
}

.person-row__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.person-row__mail input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.settings .field__input,
.settings input.field__input {
  min-width: 0;
  width: 100%;
}

/* ------------------------------------------------------------
   설정 — 프로젝트 & 카테고리 트리(2계층 편집)
   ------------------------------------------------------------ */
.settings__projects {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.proj-block {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-soft);
  padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid var(--color-neutral-soft-bg);
}

.proj-block[data-token="danger-soft"]  { border-left-color: var(--color-danger-soft-bg); }
.proj-block[data-token="info-soft"]    { border-left-color: var(--color-info-soft-bg); }
.proj-block[data-token="purple-soft"]  { border-left-color: var(--color-purple-soft-bg); }
.proj-block[data-token="success-soft"] { border-left-color: var(--color-success-soft-bg); }
.proj-block[data-token="warning-soft"] { border-left-color: var(--color-warning-soft-bg); }
.proj-block[data-token="neutral-soft"] { border-left-color: var(--color-neutral-soft-bg); }

.proj-block__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto auto;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-2);
}

.proj-block__name-input {
  font-weight: 600;
  font-size: var(--fs-md);
}

.proj-block__token-select {
  font-size: var(--fs-sm);
}

.proj-block__c1-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border-soft);
}

.c1-row {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: var(--sp-2);
}

.c1-row__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-2);
}

.c1-row__name { font-weight: 500; }

.c1-row__c2-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border-soft);
}

.c2-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: center;
}

/* ------------------------------------------------------------
   끌어 옮기기 (W2.20) — 카테고리1·카테고리2 행
   명세: DOCS/02_ARCHITECTURE.md §8.4
   ------------------------------------------------------------ */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 22px;
  cursor: grab;
  user-select: none;
  color: var(--text-faint);
  padding: 0 6px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
  flex-shrink: 0;
  border-radius: 3px;
}
.drag-handle:hover { background: var(--accent-soft); color: var(--text-muted); }
.drag-handle:active { cursor: grabbing; }

.c1-row.drag-source,
.c2-row.drag-source { opacity: 0.4; }

/* 인서션 마커 — 행 위·아래 경계에 가는 황토색 선 */
.c1-row.drop-before { box-shadow: 0 -2px 0 0 var(--accent) inset; }
.c1-row.drop-after  { box-shadow: 0 2px 0 0 var(--accent) inset; }
.c2-row.drop-before { box-shadow: 0 -2px 0 0 var(--accent) inset; }
.c2-row.drop-after  { box-shadow: 0 2px 0 0 var(--accent) inset; }

/* 빈 컨테이너에 떨어뜨리는 경우 — 옅은 점선 테두리 */
.proj-block__c1-list.drop-end,
.c1-row__c2-list.drop-end {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: var(--accent-soft);
}

.btn-sm {
  font-size: var(--fs-xs);
  padding: 2px 8px;
}

/* ------------------------------------------------------------
   4계층 그룹 들여쓰기 (프로젝트 ▸ 카테고리1 ▸ 카테고리2)
   ------------------------------------------------------------ */
.group--project { margin-bottom: var(--sp-2); }
.group--project > .group__children {
  padding-left: var(--sp-2);
  border-left: 2px solid var(--border-soft);
  margin-top: var(--sp-1);
}

/* 프로젝트 헤더: 전체 폭 띠 + 같은 색 통일 (사장님 지시) */
.group-header--project {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border-bottom: none;
  margin-bottom: var(--sp-1);
}
.group-header--project[data-token="warning-soft"] {
  background: var(--color-warning-soft-bg);
  color: var(--color-warning-soft-text);
}
.group-header--project .group-header__label {
  font-weight: 700;
  font-size: var(--fs-sm);
}
.group--c1 { margin-bottom: var(--sp-1); }
.group--c1 > .group__children {
  padding-left: var(--sp-2);
  border-left: 2px solid var(--border-soft);
  margin-top: 2px;
}

.group--c2 { margin-bottom: 2px; }
.group--c2 > .group__children {
  margin-top: 0;
}

.group-header--c1 .group-header__chip { font-size: var(--fs-sm); }
.group-header--c2 .group-header__chip { font-size: var(--fs-xs); }

/* W2.19 — 카테고리2 묶음 상태 색점(dot). 톤다운 기조(L-07) 유지. */
.group-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 1px;
  background: var(--color-neutral-soft-text);
  opacity: 0.55;
}
.group-status-dot[data-status="active"] {
  background: var(--color-warning-soft-text);
  opacity: 0.75;
}
.group-status-dot[data-status="done"] {
  background: var(--color-neutral-soft-text);
  opacity: 0.35;
}

/* ------------------------------------------------------------
   M3 — 마일스톤 모달 + 간트차트 (DESIGN_SYSTEM §10 톤다운 기조)
   ------------------------------------------------------------ */

/* 마일스톤 모달 ---------------------------------------------- */
.ms-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ms-row__head {
  display: grid;
  grid-template-columns: 1fr 160px 110px auto;
  gap: var(--sp-2);
  align-items: center;
}
.ms-row__name { font-size: var(--fs-md); }
.ms-row__dates {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.ms-row__date-label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.ms-row__date-label > .field__input {
  width: 150px;
}
.ms-row__progress {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 간트차트 본체 ---------------------------------------------- */
.gantt {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gantt__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft);
  flex-wrap: wrap;
}
.gantt__year-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.gantt__range-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.gantt__range-input {
  width: 140px;
  font-size: var(--fs-sm);
  padding: 4px 8px;
}
.gantt__range-sep { color: var(--text-faint); }
.gantt__range-presets {
  display: inline-flex;
  gap: 2px;
  margin-left: var(--sp-2);
}
.gantt__filter-pill {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--text-brand);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-right: var(--sp-2);
}
.gantt__year {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-strong);
  min-width: 64px;
  text-align: center;
}
.gantt__summary {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.gantt__grid {
  position: relative;
  overflow-x: auto;
}
.gantt__row {
  display: grid;
  grid-template-columns: 340px 1fr;
  border-bottom: 1px solid var(--border-soft);
  min-height: 32px;
  align-items: stretch;
}
.gantt__row--head {
  background: var(--bg-sub);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  min-height: 36px;
}
.gantt__row--milestone {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  min-height: 36px;
  font-weight: 600;
}
.gantt__row--milestone + .gantt__row--task {
  border-top: 1px solid var(--border-soft);
}
.gantt__row--task {
  font-size: var(--fs-sm);
}
.gantt__row--task:hover { background: var(--bg-row-hover); }
.gantt__row--milestone:hover { background: var(--accent-soft); }
.gantt__row--projhead {
  background: var(--color-warning-soft-bg);
  color: var(--color-warning-soft-text);
  user-select: none;
  font-weight: 700;
}
.gantt__row-label--projhead {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
}
.gantt__row-label--milestone {
  padding-left: var(--sp-4);
}
.gantt-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  opacity: 0.7;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity 0.15s, background 0.15s;
}
.gantt-toggle:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

.gantt__row--section {
  background: var(--bg-page);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.gantt__row-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
  white-space: nowrap;
}
.gantt__row-label--head { justify-content: flex-end; }
.gantt__row-label--task { padding-left: 56px; }
.gantt__row-label--section { padding: 0 var(--sp-3); }

/* 카테고리1·2 행 (자동 기간 막대) — 화살표만 클릭 트리거 */
.gantt__row--c1 {
  background: var(--bg-card);
  user-select: none;
}
.gantt__row--c2 {
  background: var(--bg-card);
  user-select: none;
  font-size: var(--fs-xs);
}
.gantt__row-label--c1 {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding-left: 24px;
  font-weight: 600;
}
.gantt__row-label--c2 {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding-left: 40px;
  color: var(--text-muted);
}

/* 자동 기간 막대 (집계 막대) — 옅은 색 + 점선 테두리 */
.gantt__bar--auto {
  height: 6px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  opacity: 0.5;
}
.gantt__bar--auto.gantt__bar--proj { height: 10px; opacity: 0.45; }
.gantt__bar--auto.gantt__bar--c1   { height: 8px;  opacity: 0.5; }
.gantt__bar--auto.gantt__bar--c2   { height: 6px;  opacity: 0.55; }
.gantt__row-name {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.gantt__row-progress,
.gantt__row-dates {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  flex-shrink: 0;
}
.gantt__row-chip {
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft-bg);
  color: var(--color-neutral-soft-text);
}
.gantt__row-chip[data-token="danger-soft"]  { background: var(--color-danger-soft-bg);  color: var(--color-danger-soft-text); }
.gantt__row-chip[data-token="info-soft"]    { background: var(--color-info-soft-bg);    color: var(--color-info-soft-text); }
.gantt__row-chip[data-token="purple-soft"]  { background: var(--color-purple-soft-bg);  color: var(--color-purple-soft-text); }
.gantt__row-chip[data-token="success-soft"] { background: var(--color-success-soft-bg); color: var(--color-success-soft-text); }
.gantt__row-chip[data-token="warning-soft"] { background: var(--color-warning-soft-bg); color: var(--color-warning-soft-text); }
.gantt__row-chip[data-token="neutral-soft"] { background: var(--color-neutral-soft-bg); color: var(--color-neutral-soft-text); }

.gantt__months {
  position: relative;
  min-width: 720px;
  height: 28px;
}
.gantt__months--abs {
  position: relative;
}
.gantt__month {
  position: absolute;
  top: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--sp-1) 0;
  border-right: 1px solid var(--border-soft);
  box-sizing: border-box;
  height: 100%;
}
.gantt__month:last-child { border-right: none; }

.gantt__row-track {
  position: relative;
  min-width: 720px;
  background-image:
    linear-gradient(to right,
      transparent calc(100%/12 - 1px),
      var(--border-soft) calc(100%/12 - 1px),
      var(--border-soft) calc(100%/12),
      transparent calc(100%/12));
  background-size: calc(100%/12 * 12) 100%;
}
/* 12등분 격자: 모든 월 경계에 옅은 세로선 */
.gantt__row-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent calc(100%/12), var(--border-soft) calc(100%/12), var(--border-soft) calc(100%/12 + 1px), transparent calc(100%/12 + 1px)),
    linear-gradient(to right, transparent calc(2*100%/12), var(--border-soft) calc(2*100%/12), var(--border-soft) calc(2*100%/12 + 1px), transparent calc(2*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(3*100%/12), var(--border-soft) calc(3*100%/12), var(--border-soft) calc(3*100%/12 + 1px), transparent calc(3*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(4*100%/12), var(--border-soft) calc(4*100%/12), var(--border-soft) calc(4*100%/12 + 1px), transparent calc(4*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(5*100%/12), var(--border-soft) calc(5*100%/12), var(--border-soft) calc(5*100%/12 + 1px), transparent calc(5*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(6*100%/12), var(--border) calc(6*100%/12), var(--border) calc(6*100%/12 + 1px), transparent calc(6*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(7*100%/12), var(--border-soft) calc(7*100%/12), var(--border-soft) calc(7*100%/12 + 1px), transparent calc(7*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(8*100%/12), var(--border-soft) calc(8*100%/12), var(--border-soft) calc(8*100%/12 + 1px), transparent calc(8*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(9*100%/12), var(--border-soft) calc(9*100%/12), var(--border-soft) calc(9*100%/12 + 1px), transparent calc(9*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(10*100%/12), var(--border-soft) calc(10*100%/12), var(--border-soft) calc(10*100%/12 + 1px), transparent calc(10*100%/12 + 1px)),
    linear-gradient(to right, transparent calc(11*100%/12), var(--border-soft) calc(11*100%/12), var(--border-soft) calc(11*100%/12 + 1px), transparent calc(11*100%/12 + 1px));
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 업무 막대 (강조 한도 L-07: soft tone, 1회 강조) */
.gantt__bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-soft-bg);
  border: 1px solid var(--border);
  cursor: pointer;
  min-width: 4px;
}
.gantt__bar[data-token="danger-soft"]  { background: var(--color-danger-soft-bg); }
.gantt__bar[data-token="info-soft"]    { background: var(--color-info-soft-bg); }
.gantt__bar[data-token="purple-soft"]  { background: var(--color-purple-soft-bg); }
.gantt__bar[data-token="success-soft"] { background: var(--color-success-soft-bg); }
.gantt__bar[data-token="warning-soft"] { background: var(--color-warning-soft-bg); }
.gantt__bar[data-token="neutral-soft"] { background: var(--color-neutral-soft-bg); }
.gantt__bar--milestone {
  height: 8px;
  opacity: 0.85;
  border: none;
  overflow: hidden;
  position: relative;
}
.gantt__bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-neutral-soft-text);
  opacity: 0.65;
  border-radius: var(--radius-sm);
}
.gantt__bar-fill[data-token="danger-soft"]  { background: var(--color-danger-soft-text); }
.gantt__bar-fill[data-token="info-soft"]    { background: var(--color-info-soft-text); }
.gantt__bar-fill[data-token="purple-soft"]  { background: var(--color-purple-soft-text); }
.gantt__bar-fill[data-token="success-soft"] { background: var(--color-success-soft-text); }
.gantt__bar-fill[data-token="warning-soft"] { background: var(--color-warning-soft-text); }
.gantt__bar-fill[data-token="neutral-soft"] { background: var(--color-neutral-soft-text); }
.gantt__bar[data-status="done"]      { opacity: 0.45; }
.gantt__bar[data-status="cancelled"] {
  opacity: 0.35;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,0.04) 4px 8px);
}

/* 다이아몬드(◆) 마커 — 마일스톤 종료일. 모든 의미 토큰(semantic token)에 분기. */
.gantt__diamond {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--color-neutral-soft-text);
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--color-neutral-soft-text);
  cursor: pointer;
  z-index: 4;
}
.gantt__diamond[data-token="danger-soft"]  { background: var(--color-danger-soft-text);  border-color: var(--color-danger-soft-text); }
.gantt__diamond[data-token="info-soft"]    { background: var(--color-info-soft-text);    border-color: var(--color-info-soft-text); }
.gantt__diamond[data-token="purple-soft"]  { background: var(--color-purple-soft-text);  border-color: var(--color-purple-soft-text); }
.gantt__diamond[data-token="success-soft"] { background: var(--color-success-soft-text); border-color: var(--color-success-soft-text); }
.gantt__diamond[data-token="warning-soft"] { background: var(--color-warning-soft-text); border-color: var(--color-warning-soft-text); }
.gantt__diamond[data-token="neutral-soft"] { background: var(--color-neutral-soft-text); border-color: var(--color-neutral-soft-text); }
.gantt__diamond[data-status="done"]      { opacity: 0.55; }
.gantt__diamond[data-status="cancelled"] { opacity: 0.4; }

/* 오늘선(today line) — 강조 한도 L-07: 행당 1회. 가시성을 위해 두께/채도 강화. */
.gantt__today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-danger-soft-text);
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
  margin-left: -1px;
}
.gantt__today-line--head {
  opacity: 0.85;
}
/* 헤더에 "오늘" 라벨을 작은 알약(pill)으로 표시 */
.gantt__today-label {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  background: var(--color-danger-soft-bg);
  color: var(--color-danger-soft-text);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}

.gantt__empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ============ 설정 모달 — 이메일 절(ADR-014) ============ */
/*  글자 크기 일관성: 본 절 안의 모든 글자는 var(--fs-sm) 한 종류로 통일. */
.email-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}
.email-row__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.email-row--toggle .email-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text);
}
.email-recipients {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.email-recipients__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
}
.email-recipients__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.email-recipient {
  padding: var(--sp-1) 0;
  border-top: 1px solid var(--border-soft);
}
.email-recipient:first-child {
  border-top: 0;
}
.email-recipient__label {
  display: grid;
  grid-template-columns: 20px 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.email-recipient__role {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.email-recipient__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

/* ============ 보낸 메일 기록 모달 (W5.3) ============ */
.mail-log {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.mail-log__tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border-soft, #ECECEC);
  padding-bottom: var(--sp-1);
}
.mail-log__tab {
  background: transparent;
  border: 0;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.mail-log__tab.is-active {
  background: var(--surface-soft, #F2F2F2);
  color: var(--text-strong);
  font-weight: 600;
}
.mail-log__empty {
  padding: var(--sp-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.mail-log__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.mail-log__row {
  display: grid;
  grid-template-columns: 120px 50px minmax(0, 180px) 50px minmax(0, 1fr) 60px minmax(0, 1fr) 80px;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  align-items: center;
  border-radius: var(--radius-sm, 4px);
}
.mail-log__row--ok {
  background: var(--surface-soft, #FAFAFA);
}
.mail-log__row--fail {
  background: var(--color-danger-soft-bg, #F5D8D8);
  color: var(--color-danger-soft-text, #8B4A4A);
}
.mail-log__subject,
.mail-log__error {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-log__resend {
  padding: 2px 8px;
  font-size: var(--fs-xs);
  border: 1px solid var(--border-soft, #DDD);
  background: #FFFFFF;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}

/* ---------- 계정 (Mw W-Mw.7 후반) ---------- */
.account-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.settings__hint--soft {
  font-size: var(--fs-xs);
  opacity: 0.75;
  margin-top: var(--sp-1);
}
.settings__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  padding: 0 var(--sp-1);
  background: var(--bg-soft, #f3f3f3);
  border-radius: 3px;
}

/* ---------- 백업 / 복원 (W6.3) ---------- */
.backup-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.backup-preview {
  margin-top: var(--sp-3);
}
.backup-preview__card {
  border: 1px solid var(--border-soft, #DDD);
  background: var(--bg-soft, #FAFAFA);
  border-radius: var(--radius-md, 6px);
  padding: var(--sp-3);
}
.backup-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.backup-preview__file {
  font-size: var(--fs-xs);
  color: var(--text-muted, #666);
}
.backup-preview__list {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
}
.backup-preview__warn {
  font-size: var(--fs-sm);
  color: var(--text-muted, #666);
  margin: var(--sp-2) 0;
}
.backup-preview__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* ============================================================
   로그인 화면 (Mw / W-Mw.7) — ARCHITECTURE §17.7
   톤다운 단일 카드, 강조 색 1개(--accent).
   ============================================================ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  padding: var(--sp-4);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-md);
}
.login-card__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xxl);
  color: var(--text-strong);
  font-weight: 600;
  text-align: center;
}
.login-card__subtitle {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}
.login-card__footnote {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.login-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.login-form__label {
  font-size: var(--fs-sm);
  color: var(--text);
}
.login-form__field input {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg-soft);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.login-form__field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-card);
}
.login-form__hint {
  font-size: var(--fs-xs);
  color: var(--color-danger-soft-text);
  font-style: normal;
}
.login-form__submit {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #FFFFFF;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.login-form__submit:hover:not(:disabled) {
  opacity: 0.92;
}
.login-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}