/* ---- 디자인 토큰(2026-08-19, 다크 "커맨드센터" 3단계 — 색/폰트/간격/라운드/그림자) ----
   변수 이름은 이전 단계(토스 스타일)와 대부분 동일하게 유지하고 값만 다크 팔레트로
   교체했다 — 템플릿 인라인 스타일 포함 var(--primary) 등을 참조하는 모든 곳이 자동으로
   새 톤을 받는다. --panel/--line/--critical/--high/--normal/--unset은 요청받은 디자인
   시스템의 변수명을 그대로 살려뒀고, --card-bg/--border는 하위 호환을 위해 같은
   값(panel/line)을 가리키는 별칭으로 남겨서 기존 코드 전부가 그대로 동작한다. */
:root {
  --bg: #09090a;
  --panel: #1c1c1f;
  --card-bg: #1c1c1f;
  --line: #38383d;
  --border: #38383d;
  --surface-hover: #26262a;
  --text: #f5f5f7;
  --muted: #9d9da3;

  /* 4단계 상태/우선순위 팔레트 — critical > high > normal > unset 순으로 강조.
     카드/뱃지는 이 색을 배경에 그대로 채우고 텍스트는 --bg 또는 흰색으로 대비시킨다. */
  --critical: #ff4b42;
  --high: #ff9f0a;
  --normal: #ffd60a;
  --unset: #8e8e93;
  --ok: #30d158;

  /* 일반 인터랙션 악센트(브랜드색) — 4단계 팔레트와 별개로 버튼/링크/포커스에 쓴다. */
  --accent: #0a84ff;
  --primary: #0a84ff;
  --primary-hover: #3ea0ff;
  --primary-active: #086cd9;
  --primary-dark: #6fc4ff;
  --primary-wash: rgba(10,132,255,0.16);
  --primary-wash-strong: rgba(10,132,255,0.28);

  --warn-bg: rgba(255,159,10,0.14);
  --warn-text: #ffb340;
  --ok-bg: rgba(48,209,88,0.14);
  --ok-text: var(--ok);
  --alert-bg: rgba(255,75,66,0.14);
  --alert-text: #ff6b62;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-card: clamp(10px, 1vw, 14px);
  --radius-pill: 999px;
  /* 미니멀 플랫 다크(Linear/Vercel류) — 카드는 그림자로 띄우지 않고 테두리 하나로만
     구분한다. 모달/드롭다운처럼 진짜 떠 있는 표면만 별도 elevation 그림자를 쓴다. */
  --shadow-1: none;
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.55);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 28px;
  --space-8: 40px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Arial, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 15% 5%, rgba(255,255,255,0.025), transparent 30%),
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: auto, 100% 92px;
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 클래스 없이 쓰인 일반 <a>가 브라우저 기본 링크색(밝은 배경 전제, 어두운 파랑)으로
   떨어지지 않게 기본값을 지정한다. .nav a/.breadcrumbs a 등 더 구체적인 규칙이 이미
   있는 곳은 우선순위대로 그대로 덮어써서 영향 없다. */
a { color: var(--primary-dark); }
a:visited { color: var(--primary-dark); }
a:hover { color: var(--primary-hover); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 다크 배경에서 브라우저 기본(밝은) 스크롤바가 튀지 않도록. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3a3f; }
* { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }

.topbar {
  background: rgba(9,9,10,0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

/* Linear/Vercel류 언더라인형 내비 — 색 강조 대신 밑줄로 hover/포커스를 표시한다. */
.nav a {
  color: var(--text); text-decoration: none; padding-bottom: 3px;
  border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease;
}
.nav a:hover { color: var(--primary-dark); border-bottom-color: var(--primary-dark); }
.nav .logout { color: var(--muted); }
.user-tag { color: var(--muted); }

/* 상단 nav 그룹 드롭다운('영업 업무') + topbar 오른쪽 '상세 설정' 톱니바퀴.
   둘 다 그 안에 보일 항목이 하나도 없는 사용자에게는 버튼 자체가 렌더링 안 되고,
   좁은 화면에서도 topbar/nav가 이미 flex-wrap이라 줄바꿈되며 깨지지 않는다. */
.topbar-right { display: flex; align-items: center; gap: 10px; }

.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  background: none; border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 5px 12px; cursor: pointer; font-size: 0.92rem; color: var(--text);
  display: inline-flex; align-items: center; gap: 4px; transition: background 0.15s ease;
}
.nav-dropdown-btn:hover { background: var(--surface-hover); }
.nav-caret { font-size: 0.7rem; color: var(--muted); }
.nav-settings-btn {
  border-radius: 50%; width: 32px; height: 32px; padding: 0; justify-content: center;
  color: var(--muted); font-size: 1rem;
}
.nav-dropdown-panel {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 8px;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); padding: 6px; min-width: 170px;
  flex-direction: column; gap: 1px; z-index: 20;
}
.nav-dropdown-panel a {
  padding: 8px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: background 0.12s ease;
}
.nav-dropdown-panel a:hover { background: var(--surface-hover); }
.nav-dropdown.open .nav-dropdown-panel { display: flex; }
.nav-dropdown-panel-right { left: auto; right: 0; }
.nav-dropdown-heading { font-size: 0.78rem; color: var(--muted); padding: 4px 10px; font-weight: 700; }

.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 12px; cursor: pointer; color: var(--text); font-size: 0.9rem;
  transition: background 0.15s ease;
}
.user-menu-btn:hover { background: var(--surface-hover); }
.user-menu-caret { font-size: 0.7rem; color: var(--muted); }
.user-menu-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  min-width: 190px; padding: 6px; z-index: 50;
}
.user-menu-dropdown.open { display: block; }
.user-menu-dropdown a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text);
  text-decoration: none; font-size: 0.9rem; transition: background 0.12s ease;
}
.user-menu-dropdown a:hover { background: var(--surface-hover); }
.user-menu-role {
  padding: 4px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 0.8rem; font-weight: 600;
}
.notif-badge {
  display: inline-block;
  background: var(--critical);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 2px;
}

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
}
.status-submitted { background: var(--warn-bg); color: var(--warn-text); }
.status-dept_reviewed { background: var(--primary-wash); color: var(--primary-dark); }
.status-exec_confirmed { background: var(--ok-bg); color: var(--ok-text); }

.report-item-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; flex-wrap: wrap; }

.comment-item { border-bottom: 1px solid var(--border); padding: 10px 0; }
.comment-item:last-child { border-bottom: none; }
.comment-meta { color: var(--muted); font-size: 0.82rem; margin-bottom: 4px; }
.comment-body { white-space: pre-wrap; }

.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

h1 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: var(--space-4); }
h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-3); }
h3 { font-size: 0.95rem; font-weight: 700; color: var(--muted); margin: 0 0 var(--space-2); }

/* 카드 제목(예: #해시태그) — 이 클래스가 붙은 곳만 스펙의 굵은 타이트 타이포를 쓴다. */
.card-title-lg { font-size: clamp(18px, 2.1vw, 29px); font-weight: 800; letter-spacing: -0.04em; }
.kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-dark); }
.kicker-muted { color: var(--muted); }

.date-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

/* 상태/우선순위가 있는 카드에 붙이는 윗변 강조. --accent는 카드마다 인라인
   style="--accent: var(--critical)" 식으로 지정한다(안 하면 --unset 회색).
   미니멀 플랫 톤에 맞춰 두껍지 않게(2px) — 색은 정보 전달용, 장식은 최소화. */
.card-accent { border-top: 2px solid var(--accent, var(--unset)); }

.login-card { max-width: 380px; margin: 40px auto; }
.subtitle { color: var(--muted); margin-top: -8px; }

label { display: block; font-size: 0.88rem; font-weight: 700; margin: 14px 0 6px; }
label:first-of-type { margin-top: 0; }

input[type=text], input[type=password], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  outline: none; background: var(--card-bg); box-shadow: 0 0 0 2px var(--primary);
}
input[type=checkbox], input[type=radio] { accent-color: var(--primary); cursor: pointer; width: 18px; height: 18px; }

textarea { resize: vertical; }

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.btn:hover { background: var(--surface-hover); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); }
.btn-block { width: 100%; margin-top: 16px; text-align: center; }
.btn-sm { padding: 6px 14px; font-size: 0.82rem; }

.hint { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
.hint code { background: var(--bg); padding: 1px 6px; border-radius: 4px; }

.alert { background: var(--alert-bg); color: var(--alert-text); padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 14px; font-size: 0.9rem; }
.ok-msg { background: var(--ok-bg); color: var(--ok-text); padding: 10px 14px; border-radius: var(--radius-md); margin: 0; }
.warn-msg { background: var(--warn-bg); color: var(--warn-text); padding: 10px 14px; border-radius: var(--radius-md); margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.status-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.status-list { list-style: none; padding: 0; margin: 0; }
.status-list li { padding: 4px 0; font-size: 0.92rem; }
.muted { color: var(--muted); }

.project-list { list-style: none; padding: 0; margin: 0; }
.project-list li { border-bottom: 1px solid var(--border); }
.project-list li:last-child { border-bottom: none; }
.project-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  text-decoration: none;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  background: var(--primary-wash);
  color: var(--primary-dark);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}

.tag-lg { font-size: 1.1rem; padding: 4px 14px; }

.tag-sub {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn-text);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}

.project-group { border-bottom: 1px solid var(--border); padding: 10px 2px; }
.project-group:last-child { border-bottom: none; }
.project-group summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
  list-style: none;
}
.project-group summary::-webkit-details-marker { display: none; }
.project-group summary::before { content: "▸ "; color: var(--muted); }
.project-group[open] summary::before { content: "▾ "; }
.project-children { list-style: none; margin: 6px 0 4px 20px; padding: 0; }
.project-children li { border-bottom: 1px dashed var(--border); }
.project-children li:last-child { border-bottom: none; }

.tag-input-wrap { position: relative; display: inline-block; }
.tag-dropdown {
  display: none; position: absolute; left: 0; top: 100%; z-index: 40;
  width: max(220px, 100%); max-height: 260px; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); margin-top: 4px;
}
.tag-dropdown.open { display: block; }
.tag-dropdown-item { padding: 9px 12px; font-size: 0.88rem; cursor: pointer; display: flex; align-items: center; }
.tag-dropdown-item:hover, .tag-dropdown-item.highlighted { background: var(--surface-hover); }

.pending-badge {
  display: inline-block; background: var(--warn-bg); color: var(--warn-text);
  padding: 2px 9px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700;
}

.tag-manage-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tag-manage-row:last-child { border-bottom: none; }
.tag-manage-row form { display: flex; gap: 6px; align-items: center; }
.tag-manage-row input[type=text] { width: 160px; padding: 4px 8px; }
.tag-manage-children { margin-left: 24px; }

.timeline { border-left: 2px solid var(--border); padding-left: 18px; margin-top: 20px; }
.timeline-item { position: relative; margin-bottom: 22px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
}
.timeline-date { font-weight: 700; margin-bottom: 6px; }
.timeline-author { font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; }
.field-block { margin-bottom: 10px; }
.field-block:last-child { margin-bottom: 0; }
.field-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.field-body { font-size: 0.94rem; white-space: pre-wrap; }

/* 표 컨테이너는 항상 overflow-x:auto — 넓은 화면에서 열이 넉넉히 펼쳐지고
   담을 폭이 부족할 때만 스크롤된다(열 숨김/데이터 생략 없음). display:block으로
   감싸도 thead/tbody/tr/td는 기본 table-* display를 유지해 표 정렬이 깨지지 않는다. */
.user-table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.user-table th {
  text-align: left; padding: 11px 10px; border-bottom: none; background: var(--bg);
  white-space: nowrap; color: var(--muted); font-weight: 700; font-size: 0.82rem;
}
.user-table thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.user-table thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.user-table td {
  text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.user-table tbody tr:last-child td { border-bottom: none; }
.user-table tbody tr:hover { background: var(--bg); }

/* 좁은 화면(폰 세로)에서는 기존처럼 촘촘하게. */
@media (max-width: 560px) {
  .status-cols { grid-template-columns: 1fr; gap: 10px; }
  .container { padding: 14px 10px 50px; }
  .card { padding: 14px; }
  .user-table th, .user-table td { padding: 6px 8px; font-size: 0.85rem; }
}

/* 데스크탑 모드 기준점: 가로 1024px 이상이면 앱 전체 컨테이너의 860px 캡을 풀어
   넓게 펼친다(표 페이지는 더 넓게). 1024px 미만은 기존 860px 캡을 유지한다 —
   브라우저 창을 좁히면 그 시점부터 다시 이 캡이 적용되어 좁은 레이아웃으로 돌아간다. */
@media (min-width: 1024px) {
  .container { max-width: 1400px; }
  .container.container-wide { max-width: 1700px; }
}

.breadcrumbs { font-size: 0.92rem; }
.breadcrumbs a { color: var(--primary-dark); text-decoration: none; }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.inline-form input[type=text] { width: auto; flex: 1; min-width: 140px; }

.search-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search-form input { width: auto; flex: 1; min-width: 120px; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.dropzone.dragover { background: var(--primary-wash); border-color: var(--primary); color: var(--primary-dark); }
.dropzone p { margin: 0; font-size: 0.9rem; }

.file-pick-list { margin-top: 8px; font-size: 0.85rem; }
.file-pick-item { padding: 3px 0; }
.file-pick-error { color: var(--alert-text); }

.progress-wrap { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.progress-wrap { background: var(--border); border-radius: var(--radius-pill); height: 8px; flex: 1; overflow: hidden; position: relative; }
.progress-bar { background: var(--primary); height: 100%; width: 0%; transition: width 0.15s; }
#progress-text { position: static; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

.drive-list { list-style: none; padding: 0; margin: 0; }
.drive-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}
.drive-row:hover { background: var(--surface-hover); }
.drive-row:last-child { border-bottom: none; }
.drive-name { text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.94rem; flex: 1; min-width: 160px; }
.drive-meta { font-size: 0.8rem; }
.drive-actions { display: flex; gap: 6px; }
.action-forms { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding: var(--space-2); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 4px; }

.cur-version { background: var(--primary-wash); }

.chat-layout { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.chat-sidebar { padding: 12px; }
.conv-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 2px; }
.conv-list a {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--text); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.12s ease;
}
.conv-list a.active, .conv-list a:hover { background: var(--surface-hover); }
.conv-item { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.conv-item a { flex: 1; min-width: 0; }
.conv-actions { display: flex; gap: 2px; opacity: 0.5; }
.conv-item:hover .conv-actions { opacity: 1; }
.conv-action-btn {
  border: none; background: none; cursor: pointer; font-size: 0.78rem; padding: 2px 3px; border-radius: var(--radius-sm);
}
.conv-action-btn:hover { background: var(--border); }

.chat-main { display: flex; flex-direction: column; padding: 16px; min-height: 60vh; }
.chat-messages { flex: 1; overflow-y: auto; max-height: 60vh; display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.chat-bubble { max-width: 90%; }
.chat-user { align-self: flex-end; text-align: right; }
.chat-assistant { align-self: flex-start; }
.chat-role { font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; }
.chat-content {
  display: inline-block; padding: 10px 14px; border-radius: var(--radius-lg); font-size: 0.92rem;
  white-space: pre-wrap; text-align: left;
}
.chat-user .chat-content { background: var(--primary); color: #fff; }
.chat-assistant .chat-content { background: var(--bg); border: 1px solid var(--line); color: var(--text); }

.file-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.file-result-item {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--primary-wash);
  color: var(--primary-dark); text-decoration: none; font-size: 0.86rem; transition: background 0.12s ease;
}
.file-result-item:hover { background: var(--primary-wash-strong); }

.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-input-row textarea { flex: 1; }

.kanban-board {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start;
}
.kanban-column {
  flex: 0 0 280px; background: var(--card-bg); border: 1px solid var(--line);
  border-top: 2px solid var(--col-color, var(--primary));
  border-radius: var(--radius-lg); display: flex; flex-direction: column; max-height: 75vh;
}
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.kanban-col-count { font-size: 0.78rem; white-space: nowrap; }
.kanban-cards { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.kanban-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.88rem;
}
.kanban-card-meta { color: var(--muted); font-size: 0.76rem; margin-bottom: 5px; }
.kanban-card-body { white-space: pre-wrap; }
.kanban-card-link { display: inline-block; margin-top: 6px; font-size: 0.8rem; }

.kanban-column-highlight { box-shadow: 0 0 0 3px var(--primary); transition: box-shadow 0.3s; }

/* 영업관리 보고 '파이프라인 보기' 전용 조밀 카드. 단계(컬럼) 구조/건수 표시는 그대로
   .kanban-column/.kanban-col-header를 쓰고, 카드 내부만 최대 3줄로 압축한다 — 관리내용
   원문·활동 타임라인·불발사유 전문은 카드 클릭 시 이동하는 기존 계약 상세 페이지
   (/nara/contracts/{id}, nara_timeline.html)에서 그대로 보여준다. .pipeline-board로만
   범위를 좁혀서 프로젝트 화면의 .kanban-card(다른 용도)에는 영향이 없다. */
.pipeline-board .kanban-column { max-height: 82vh; }
.pipeline-board .kanban-cards { padding: 6px; gap: 6px; }
.pipeline-card {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  height: 58px; padding: 6px 10px; box-sizing: border-box; overflow: hidden;
  text-decoration: none; color: inherit;
}
.pipeline-card-title {
  font-size: 0.85rem; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipeline-card-meta {
  font-size: 0.74rem; color: var(--muted); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipeline-card-badge-row { height: 15px; line-height: 15px; }
.pipeline-fail-badge { font-size: 0.66rem; padding: 0 6px; border-radius: var(--radius-sm); }

.landing-col-header { text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.landing-col-header:hover .tag-lg { filter: brightness(0.95); }
.landing-card {
  display: block; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
  text-decoration: none; color: var(--text); transition: background 0.15s;
}
.landing-card:hover { background: var(--primary-wash-strong); }
.landing-card-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.landing-card-preview { font-size: 0.8rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }

.help-wrap { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.help-icon {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--muted); cursor: pointer; font-size: 0.78rem;
  line-height: 1; padding: 0;
}
.help-icon:hover { background: var(--surface-hover); }
.help-popover {
  display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  width: 270px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); padding: 12px 14px; font-size: 0.85rem; text-align: left;
}
.help-popover.open { display: block; }
.help-popover strong { display: block; margin-bottom: 6px; }
.help-popover ul { margin: 0; padding-left: 18px; }
.help-popover li { margin-bottom: 4px; line-height: 1.4; }

.tutorial-modal {
  background: #151517; border-radius: 22px; width: min(480px, 92vw);
  padding: 30px 28px 20px; position: relative; box-shadow: 0 30px 100px rgba(0,0,0,0.6);
  text-align: center; border: 1px solid var(--line);
}
.tutorial-close {
  position: absolute; top: 14px; right: 14px; border: none; background: none;
  font-size: 1.1rem; cursor: pointer; color: var(--muted);
}
.tutorial-slide { display: none; min-height: 220px; }
.tutorial-slide.active { display: block; }
.tutorial-icon { font-size: 2.6rem; margin-bottom: 8px; }
.tutorial-slide h2 { margin: 6px 0 14px; font-size: 1.2rem; }
.tutorial-slide p { margin: 0 0 10px; line-height: 1.55; color: var(--text); text-align: left; }
.tutorial-example { text-align: center !important; font-size: 1.05rem; }
.tutorial-example code { background: var(--bg); padding: 3px 10px; border-radius: var(--radius-sm); }
.tutorial-dots { display: flex; justify-content: center; gap: 8px; margin: 10px 0 18px; }
.tutorial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; }
.tutorial-dot.active { background: var(--primary); }
.tutorial-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 14px; }
.tutorial-dontshow { font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tutorial-nav-buttons { display: flex; gap: 8px; }

.tab-bar { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.tab-btn {
  background: none; border: none; padding: 10px 18px; cursor: pointer; font-size: 0.95rem;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-decoration: none; display: inline-block; transition: color 0.12s ease;
}
.tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 700; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* 프로젝트 화면 '프로젝트별/직원별' 토글 — 밑줄 탭이 아니라 알약(pill) 버튼으로,
   선택된 쪽은 진한 배경으로 강조한다. .view-toggle-bar로 범위를 좁혀서 다른 곳의
   기본 .tab-bar/.tab-btn(예: 영업관리 보고의 직원별 탭)에는 영향이 없다. */
.view-toggle-bar { border-bottom: none; gap: 8px; margin-bottom: 16px; }
.view-toggle-bar .tab-btn {
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 20px;
  background: var(--card-bg); color: var(--text); margin-bottom: 0;
}
.view-toggle-bar .tab-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700;
}

/* 대분류/직원 카드 — 글 개수 비율로 폭이 스케일된다(백엔드 _scaled_card_width).
   기본 .project-card는 flex-basis로 자동 줄바꿈되는데, 스케일 카드는 인라인 width를
   그대로 써야 해서 flex-grow/shrink를 끄고 자동 줄바꿈 그리드로 배치한다. */
.project-card-scaled { flex: 0 0 auto; max-width: none; }

#ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--primary); color: #fff; font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
  transition: background 0.15s ease;
}
#ai-fab:hover { background: var(--primary-hover); }

.ai-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.74); z-index: 300;
  align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ai-modal-overlay.open { display: flex; }
.ai-modal {
  background: #151517; border-radius: 22px; width: min(920px, 96vw); height: min(680px, 90vh);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,0.6);
  border: 1px solid var(--line);
}
.ai-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700;
}
.ai-modal-header-actions { display: flex; gap: 6px; }
.ai-modal-body { flex: 1; display: flex; min-height: 0; }
.ai-sidebar { width: 210px; border-right: 1px solid var(--border); padding: 10px; overflow-y: auto; flex-shrink: 0; }
.ai-main { flex: 1; display: flex; flex-direction: column; padding: 14px; min-width: 0; }
.ai-main .chat-messages { max-height: none; }

@media (max-width: 720px) {
  .ai-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .ai-sidebar { position: absolute; left: 0; top: 49px; bottom: 0; background: var(--card-bg); width: 220px; display: none; z-index: 5; }
  .ai-sidebar.open { display: block; }
}

.calendar-header {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-weight: 700; margin-bottom: 10px;
}
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 0.85rem;
}
.cal-dow { color: var(--muted); font-weight: 600; padding: 4px 0; font-size: 0.78rem; }
.cal-cell {
  position: relative; padding: 8px 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.12s ease;
}
.cal-cell:hover { background: var(--surface-hover); }
.cal-empty { cursor: default; }
.cal-empty:hover { background: none; }
.cal-today { font-weight: 700; color: var(--primary-dark); }
.cal-dot {
  display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
  margin: 3px auto 0;
}

.reports-feed { display: flex; flex-direction: column; gap: 4px; }
.report-card { transition: background 0.4s; }
.report-card.highlight { background: var(--primary-wash); }
.report-date-badge { font-weight: 700; margin-bottom: 10px; }

.recent-report-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.recent-report-item:last-child { border-bottom: none; }
.recent-report-date { font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }
.recent-report-snippet { font-size: 0.88rem; }

.task-items { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.task-item {
  display: grid;
  grid-template-columns: auto 140px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.task-num { font-weight: 700; color: var(--muted); padding-top: 8px; }
.task-tag { width: 100%; }
.task-item > .tag-input-wrap { display: block; width: 100%; }
.task-desc { width: 100%; resize: vertical; }
.task-remove { align-self: start; }
#add-task-item { margin-top: 8px; }

@media (max-width: 560px) {
  .task-item { grid-template-columns: auto 1fr; grid-template-areas: "num tag" "desc desc" "remove remove"; }
  .task-item .tag-input-wrap { grid-area: tag; }
  .task-item .task-desc { grid-area: desc; }
  .task-item .task-remove { grid-area: remove; justify-self: start; }
}

.ai-summary {
  margin-top: 14px; padding: 14px; background: var(--primary-wash); border-radius: var(--radius-md);
  font-size: 0.92rem; white-space: pre-wrap; line-height: 1.6;
}

@media (max-width: 700px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-sidebar { order: 2; }
}

.nara-filter-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.nara-filter-form input, .nara-filter-form select { padding: 6px 8px; }
.nara-pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; }
.nara-pagination .muted { font-size: 0.85rem; }

.project-search-box {
  width: 100%; padding: 12px 14px; margin-bottom: 14px; font-size: 0.95rem;
  border: none; border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
}

/* 대분류 칸반 카드 + 그 아래 소분류 탭(project_board.js가 펼침/탭전환을 담당). */
.project-board { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.project-card {
  flex: 1 1 300px; max-width: 400px; background: var(--card-bg); border: 1px solid var(--line);
  border-top: 2px solid var(--col-color, var(--primary)); border-radius: var(--radius-lg); overflow: hidden;
}
.project-card-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 12px 14px; border: none; background: none; cursor: pointer; font: inherit; text-align: left; flex-wrap: wrap;
}
.project-card-header:hover { background: var(--surface-hover); }
.project-caret { display: inline-block; transition: transform 0.15s; }
.project-card-header[aria-expanded="true"] .project-caret { transform: rotate(-180deg); }
.project-card-subs { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.project-sub-chip {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; transition: background 0.15s;
  text-decoration: none; color: var(--text); font-size: 0.88rem;
}
.project-sub-chip:hover { background: var(--primary-wash-strong); }
.project-detail[hidden] { display: none; }
.project-detail { border-top: 1px solid var(--border); padding: 12px 14px; }
.project-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.project-subtab-btn {
  border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: 0.82rem; cursor: pointer;
}
.project-subtab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.project-subtab-panel[hidden] { display: none; }
.project-subtab-panel { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }

.ai-polish-wrap { margin: 4px 0 12px; }
.ai-polish-controls { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.ai-polish-controls select { padding: 4px 6px; font-size: 0.85rem; }
.ai-polish-btn { white-space: nowrap; }
.ai-polish-preview { margin-top: 6px; padding: 10px; background: var(--primary-wash); border-radius: var(--radius-sm); }
.ai-polish-preview-text { white-space: pre-wrap; font-size: 0.9rem; margin-bottom: 8px; }
.ai-polish-preview-actions { display: flex; gap: 6px; }
.ai-assisted-badge {
  display: inline-block; font-size: 0.75rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 6px;
}

.sales-activity-wrap { margin-top: 6px; }
.sales-activity-form {
  margin-top: 6px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.sales-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; align-items: center; }
.sales-row:last-child { margin-bottom: 0; }
.sales-row select, .sales-row input[type=text], .sales-row input[type=date], .sales-row input[type=tel] {
  padding: 5px 7px; font-size: 0.85rem; flex: 1; min-width: 110px;
}
.sales-row label { font-size: 0.85rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.readonly-field { background: var(--bg); color: var(--muted); cursor: default; }

/* 영업관리 보고 장표: 발주처가 여러 줄로 갈라지지 않도록 병합된 행의 관리내용을
   날짜별로 쌓아 보여준다(sales_activity_row.html). .sales-activity-row는 일부러
   .sales-row(위 flex 입력폼 전용 클래스)와 이름을 다르게 둬서, tr에 flex가 걸려
   표 정렬이 깨지는 걸 막는다. */
.sales-history { display: flex; flex-direction: column; gap: 4px; }
.sales-history-line { text-align: left; }
.sales-history-date { display: block; font-size: 0.76rem; }

/* .user-table th/td 기본값(white-space:nowrap)은 다른 표(직원목록/입찰목록 등)엔
   맞지만, 이 장표는 수요기관/관리내용처럼 긴 텍스트가 많아 강제 nowrap이면 한 줄로
   넘쳐서 오른쪽으로 쏠려 보인다 — 이 표에서만 줄바꿈 + 왼쪽 정렬로 되돌린다
   (지역/수요기관/담당·접촉 칸은 각 셀의 인라인 style로 여전히 nowrap 유지됨,
   인라인 스타일이 이 규칙보다 우선한다).*/
.sales-table th, .sales-table td { white-space: normal; text-align: left; }

.sales-stage-wrap {
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.sales-stage-wrap label { font-size: 0.8rem; display: block; margin-bottom: 3px; }
.sales-stage-wrap select, .sales-stage-wrap textarea { width: 100%; font-size: 0.85rem; padding: 5px 7px; margin-bottom: 6px; }
.sales-substage-wrap, .sales-fail-wrap { margin-top: 2px; }

.sales-org-autocomplete { position: relative; flex: 1; min-width: 220px; }
.sales-org-autocomplete input { width: 100%; }
.sales-org-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-height: 220px; overflow-y: auto; box-shadow: var(--shadow-1);
}
.sales-org-dropdown.open { display: block; }
.sales-org-dropdown-item { padding: 6px 10px; font-size: 0.85rem; cursor: pointer; }
.sales-org-dropdown-item:hover { background: var(--surface-hover); }

.sales-contact-types { align-items: center; }
.sales-type-btn { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.sales-type-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.sales-more-wrap { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sales-contact-new { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sales-contact-new input { padding: 5px 7px; font-size: 0.85rem; flex: 1; min-width: 100px; }
.sales-reject-wrap { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sales-reject-wrap select, .sales-reject-wrap textarea { flex: 1; min-width: 140px; padding: 5px 7px; font-size: 0.85rem; }

/* 주간 영업관리 보고 장표 — 참고 장표(첨부 HTML)와 동일한 배지 색상 체계.
   대면=초록(기본) · 유선=회색(.phone) · 현장=노랑(.field) · 내부·기타=회색(.etc) */
.contact-wrapper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge-date {
  background: var(--primary-wash); color: var(--primary-dark); padding: 2px 7px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500; white-space: nowrap; display: inline-block;
}
.badge-type {
  background: var(--ok-bg); color: var(--ok-text); padding: 2px 7px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; white-space: nowrap; display: inline-block;
}
.badge-type.phone { background: var(--line); color: var(--muted); }
.badge-type.field { background: var(--warn-bg); color: var(--warn-text); }
.badge-type.etc { background: var(--line); color: var(--muted); }
.card-badge {
  background: var(--primary); color: #fff; font-size: 11px; padding: 2px 7px;
  border-radius: var(--radius-pill); font-weight: 600;
}
.summary-card.active { border-color: var(--primary); }

.review-item-flags { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; font-size: 0.82rem; color: var(--muted); }
.review-toggle-label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.review-roster {
  margin: 4px 0 0 20px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 4px; max-width: 320px;
}
.review-person-label { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 0.82rem; }

/* 프로젝트 타임라인 — 세로 목록형(스펙 3-1) */
.timeline-vertical {
  display: flex; flex-direction: column; gap: 0; border-left: 3px solid var(--border); margin-left: 6px;
}
.timeline-milestone { position: relative; padding: 0 0 18px 20px; }
.timeline-milestone::before {
  content: ""; position: absolute; left: -9px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--primary); border: 2px solid var(--card-bg);
}
.timeline-milestone-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.timeline-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.timeline-task-list li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px;
  border-radius: var(--radius-sm); background: var(--bg);
}
.timeline-task-list li.task-done span:not(.muted) { text-decoration: line-through; color: var(--muted); }

/* 프로젝트 타임라인 카드의 단계 나열(신규 스펙 3) — 완료 단계는 흐리게, 현재 단계는
   진하게, 남은 단계는 일반 굵기로 구분한다. */
.stage-text-list { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; padding-top: 4px; }
.stage-text { font-size: 0.82rem; white-space: nowrap; }
.stage-text-sep { font-size: 0.75rem; }
.stage-text.stage-done { color: var(--muted); font-weight: 400; opacity: 0.7; }
.stage-text.stage-current { color: var(--primary-dark); font-weight: 700; }
.stage-text.stage-upcoming { color: var(--text); font-weight: 400; }

/* 프로젝트 타임라인 목록 — 표(table) 대신 카드형 리스트(Linear/Notion류). */
.project-cards { display: flex; flex-direction: column; gap: 12px; }
.project-list-card {
  background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--accent, var(--unset));
  border-radius: var(--radius-card); padding: 16px 20px;
}
.project-list-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.project-list-card-title { font-size: 1.05rem; font-weight: 700; color: var(--text); text-decoration: none; }
.project-list-card-title:hover { color: var(--primary-dark); }
.status-dot-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.project-list-card-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.86rem; color: var(--muted); margin-bottom: 10px;
}
.avatar-circle {
  width: 24px; height: 24px; border-radius: 50%; background: var(--primary-wash-strong); color: var(--primary-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
.project-list-card-progress { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.project-list-card-progress .progress-wrap { margin-top: 0; }

/* 업무보고 ↔ 프로젝트 타임라인 연동(신규 스펙 2) */
.timeline-activity-wrap { margin-top: 6px; }
.timeline-activity-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; background: var(--bg); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.timeline-row, .timeline-new-task-wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.task-activity-list { list-style: none; margin: 4px 0 0 0; padding: 4px 0 0 20px; border-left: 2px solid var(--border); }
.task-activity-list li { margin-top: 2px; }