/* work-surface 캐스케이드 8/8 — 업무 화면 라운드 3 개편(사용자 결정 2026-10-03).
   첫 화면(확인할 것 + 내 업무), 팀 보드 도구줄(보기 전환 메뉴·카드 필터), 프로젝트 레일·패널, 카드 플래그·프로젝트 배지,
   상세의 하위 업무 체크리스트. ax-work-surface-operator.css 바로 다음에 로드된다. 로드 순서가 곧 캐스케이드다.
   밀도·타이포는 운영 로그 허브(journal-hub.css)의 감각을 따른다 — 얇은 테두리 카드, 13~14px 굵은 소제목 + 개수 알약,
   테두리 없는 줄 목록(구분선만), 짧은 빈 상태. 세그먼트 탭(.ui-tabs)은 래퍼(.work-tabbar)로만 배치하고 덧칠하지 않는다.
   색은 전부 design-tokens.css 토큰이다. */

/* ===== 머리: 제목 · [확인·내 업무 | 팀 보드] 탭 · 요약 둘 … 오른쪽 버튼 =====
   라운드 3d(사용자 피드백 2026-10-04): 위 탭이 따로 쓰던 한 줄을 없애고 머리 줄 안 제목과 요약 칩 사이로 옮겼다. 좁으면
   이 묶음이 자연스럽게 줄을 바꾼다(제목 → 탭 → 칩). */
.work-header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
}

.work-header-main .work-summary {
  margin: 0;
}

/* 머리가 한 단으로 쌓이는 본문 폭(responsive.css 의 work-review ≤ 760px)에서는 오른쪽 버튼 묶음도 왼쪽에서 시작한다 — 제목·탭·칩과
   같은 왼쪽 선에 맞춘다(오른쪽에 홀로 떠 있지 않게). */
@container work-review (max-width: 760px) {
  .work-board-page .work-review-header .work-toolbar-actions {
    justify-content: flex-start;
  }
}

.work-summary-item[data-pending="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.work-summary-item[data-pending="true"] .work-summary-value {
  color: var(--accent);
}

/* 위 탭은 머리 줄 안(위 참고). 팀 보드 도구줄은 머리 바로 아래 자기 줄이다(라운드 3c) — 근거는 자리 고정이다: 머리 줄에
   함께 두면 줄이 꺾이는 지점이 보기·프로젝트 칩마다 달라 공통 묶음이 보기마다 다른 줄에 선다. 실측(본문 1160px@1440): 공통 377 +
   보기별 컨트롤(보드 385 · 타임라인 428 · 캘린더 403, 프로젝트 칩이 붙으면 타임라인 586 · 캘린더 561)에 머리의 제목·탭·칩·버튼
   (≈ 800)까지 한 줄에는 들어가지 않는다. */
.work-tabbar {
  flex: 0 1 280px;
  min-width: 0;
  max-width: 280px;
}

/* 탭 배지는 ui-primitives.css 의 .ui-tab-badge 를 그대로 쓴다(재스킨 없음, 라벨과의 간격만 래퍼에서). */
.work-tabbar .ui-tab-badge {
  margin-left: 6px;
}

/* ===== 첫 화면: 확인할 것 + 내 업무 ===== */
.work-home {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 0;
}

.work-home[hidden] {
  display: none;
}

.work-home-section {
  min-width: 0;
  padding: 18px 20px 20px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 16px;
  transition: box-shadow 200ms ease;
}

.work-home-section.is-focused {
  box-shadow: 0 0 0 2px var(--accent);
}

.work-home-head {
  margin-bottom: 14px;
}

.work-home-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.work-home-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.work-home-count {
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--surface-control-track);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.work-home-count:empty {
  display: none;
}

.work-home-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: 14px 2px 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.work-home-empty[hidden] {
  display: none;
}

.work-attn-empty {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.work-home-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.work-home-empty-sub {
  font-size: 12px;
}

/* 확인할 것 — 묶음(프로젝트 · 업무 후보) */
.work-attn-group + .work-attn-group {
  margin-top: 18px;
}

.work-attn-group[hidden] {
  display: none;
}

.work-attn-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-attn-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.work-attn-more {
  appearance: none;
  margin: 0 0 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.work-attn-more::after {
  content: " \2192";
}

.work-attn-more:hover {
  color: var(--accent);
}

.work-attn-list {
  display: flex;
  flex-direction: column;
}

.work-attn-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.work-attn-row:first-child {
  padding-top: 2px;
}

.work-attn-row:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.work-attn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.work-attn-kind {
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}

.work-attn-kind[data-kind="close"],
.work-attn-kind[data-kind="reopen"] {
  background: var(--warning-soft);
  color: var(--warning);
}

.work-attn-kind[data-kind="po-change"] {
  background: var(--surface-control-track);
  color: var(--text-secondary);
}

.work-attn-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.work-attn-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.work-attn-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.work-attn-shares {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.work-attn-share .work-project-percent {
  min-width: 0;
}

.work-attn-row .work-project-request {
  background: var(--surface-panel-soft);
}

.work-attn-row .work-project-editor {
  background: var(--surface-panel-soft);
}

.work-attn-actions {
  align-items: center;
}

.work-attn-open {
  margin-left: auto;
}

.work-attn-candidates {
  display: grid;
  gap: 10px;
}

.work-attn-candidate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 처리된 후보 결과 줄: 사용자가 닫을 때까지 남긴다. */
.work-attn-candidate[data-resolved="true"] {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.work-attn-candidate[data-resolved="true"] > .work-inline-card {
  flex: 1;
  min-width: 0;
}

.work-attn-candidate-close {
  appearance: none;
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--surface-panel);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.work-attn-candidate-close:hover {
  color: var(--text-primary);
  border-color: var(--border);
}

.work-attn-candidate-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.work-attn-candidate-fallback {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* 내 업무 — 마감 묶음 + 테두리 없는 줄 목록(운영 로그 허브 최근 줄과 같은 결) */
.work-mine-group + .work-mine-group {
  margin-top: 16px;
}

.work-mine-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.work-mine-group[data-group="overdue"] .work-mine-group-title {
  color: var(--error);
}

.work-mine-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.work-mine-row {
  appearance: none;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid transparent;
  background: var(--surface-panel);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease;
}

.work-mine-row:last-child {
  border-bottom: none;
}

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

.work-mine-row.selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.work-mine-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.work-mine-status {
  justify-self: start;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--surface-control-track);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.work-mine-status[data-status="in_progress"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.work-mine-status[data-status="blocked"] {
  background: var(--error-soft);
  color: var(--error);
}

.work-mine-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.work-mine-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-mine-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}

.work-mine-parent {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-mine-children,
.work-mine-role {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.work-mine-role[data-role="owner"] {
  color: var(--text-secondary);
  font-weight: 600;
}

.work-mine-due {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.work-mine-due[data-tone="soon"] { color: var(--loading); }
.work-mine-due[data-tone="overdue"] { color: var(--error); }

/* ===== 팀 보드 도구줄(라운드 3c, 사용자 피드백 2026-10-04) =====
   탭 줄 아래 자기 줄. 왼쪽 = 지금 보기의 컨트롤 묶음([data-tools-for], 좁으면 이 묶음만 줄바꿈), 오른쪽 끝 = 공통 세 묶음
   [휴지통] [전체 업무 / 내 업무] [보드 | 타임라인 | 캘린더]. 공통 묶음은 flex:none + 맨 오른쪽이라 보기를 바꿔도 x 가 같고,
   align-items:flex-start 라 왼쪽 묶음이 두 줄이 돼도 y 가 같다(test/work-r3c-toolbar-browser-smoke 가 세 보기의 사각형을 맞댄다). */
.work-team[hidden] {
  display: none;
}

/* 세로 스크롤바가 보기마다 생겼다 없어지면 오른쪽 정렬 묶음이 스크롤바 폭만큼 움직인다 — 자리를 늘 비워 둔다. */
#view-work .work-scroll {
  scrollbar-gutter: stable;
}

.work-team-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  min-width: 0;
  margin: -4px 0 14px;
}

.work-team-toolbar[hidden] {
  display: none;
}

.work-view-tools {
  flex: 1 1 auto;
  min-width: 0;
}

.work-view-tools-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.work-view-tools-group[hidden] {
  display: none;
}

.work-common-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 좁은 본문(업무 화면 컨테이너 work-review ≤ 660px — 뷰포트가 아니라 사이드바를 뺀 본문 폭 기준): 공통 세 묶음이 맨 위(보기를
   바꿔도 같은 자리), 보기 탭은 그 안에서 한 줄을 다 쓴다. 보기별 컨트롤은 그 아래에서 줄을 바꾼다(가로 스크롤로 숨기지 않는다).
   기준 660px = 공통 묶음 377px + 간격 16px + 가장 넓은 단일 컨트롤(캘린더 이동 ≈250px). 이보다 좁으면 옆에 둔 왼쪽 묶음이
   그 컨트롤 하나도 담지 못해 공통 묶음 밑으로 넘친다(768px 뷰포트·본문 528px 에서 실측). */
@container work-review (max-width: 660px) {
  .work-team-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .work-common-tools {
    order: -1;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .work-common-tools .work-view-tabbar {
    flex: 1 1 100%;
  }
}

/* 보기 탭은 .ui-tabs 프리미티브 그대로 — 폭만 래퍼가 정한다(덧칠 없음). */
.work-view-tabbar {
  flex: none;
}

/* 도구줄 안 필드 라벨(업무 범위·처리 상태)은 화면에서 감추고 읽기 도구에만 남긴다(radiogroup 이름은 aria). */
.work-team-toolbar .work-filter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.work-board-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.work-board-filters[hidden] {
  display: none;
}

/* 알약 필터(운영 로그 허브 .jh-chip 과 같은 결) */
.work-board-filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-panel);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.work-board-filter:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.work-board-filter[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.work-board-filter[data-empty="true"]:not([aria-pressed="true"]) {
  color: var(--text-muted);
}

.work-board-filter-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.work-board-filter-count:empty {
  display: none;
}

.work-board-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== 팀 보드 몸: 프로젝트 레일 + (패널 · 레인) ===== */
.work-team-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.work-team-layout:not([data-team-view="board"]) {
  grid-template-columns: minmax(0, 1fr);
}

.work-team-layout:not([data-team-view="board"]) .work-project-rail,
.work-team-layout:not([data-team-view="board"]) .work-project-panel {
  display: none;
}

.work-team-main {
  min-width: 0;
}

.work-team-main > .work-tab-panel {
  margin-top: 0;
}

/* ===== 팀 보드 "보드" 보기는 화면 높이를 채운다(사용자 피드백 2026-10-05, 운영 로그 일지와 같은 골격) =====
   일지(journal.css .journal-scroll · journal-hub.css .journal-hub-panel)처럼 높이를 내용이 아니라 화면이 정한다: 페이지를
   세로 flex 로 잇고 팀 보드 몸이 남은 높이를 다 쓴다. 레일·세 레인은 같은 높이로 늘어 하단선이 한 줄이고, 레인 카드
   목록·레일 프로젝트 목록은 각자 안쪽 스크롤. 프로젝트 패널이 위에 뜨면 레인은 최소 360px 을 지키고 넘치면 오른쪽 몸이
   스크롤한다. 레일이 위쪽 가로 줄로 접히는 좁은 폭(≤1100px)·첫 화면·타임라인·캘린더는 예전처럼 페이지가 스크롤한다. */
.work-scroll:has(> .work-board-page > #work-team:not([hidden]) > .work-team-layout[data-team-view="board"]) {
  display: flex;
  flex-direction: column;
}

.work-scroll > .work-board-page:has(> #work-team:not([hidden]) > .work-team-layout[data-team-view="board"]) {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

@container work-review (min-width: 1101px) {
  #work-team:not([hidden]):has(> .work-team-layout[data-team-view="board"]) {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .work-team-layout[data-team-view="board"] {
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  .work-team-layout[data-team-view="board"] .work-project-rail {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* 프로젝트 목록만 줄어든다(넘치면 안쪽 스크롤) — 위·아래 묶음과 머리는 그대로, 남는 높이는 레일 아래 빈 곳. */
  .work-team-layout[data-team-view="board"] .work-project-rail > * {
    flex-shrink: 0;
  }

  .work-team-layout[data-team-view="board"] .work-rail-scroll {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
  }

  .work-team-layout[data-team-view="board"] .work-team-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .work-team-layout[data-team-view="board"] #work-tab-board {
    flex: 1 0 360px;
    display: flex;
    flex-direction: column;
  }

  .work-team-layout[data-team-view="board"] .board-shell {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .work-team-layout[data-team-view="board"] .lane-grid {
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }

  .work-team-layout[data-team-view="board"] .lane-column {
    min-height: 0;
  }

  .work-team-layout[data-team-view="board"] .lane-cards {
    min-height: 0;
    max-height: none;
  }
}

/* 좁은 폭에서는 팀 보드 몸이 페이지 높이를 넘쳐 페이지가 스크롤한다 — 페이지 아래 여백을 몸 쪽에 둔다. */
@container work-review (max-width: 1100px) {
  #work-team:not([hidden]):has(> .work-team-layout[data-team-view="board"]) {
    padding-bottom: 20px;
  }
}

.work-project-rail {
  position: sticky;
  top: 12px;
  min-width: 0;
  padding: 12px 10px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 위(전체 업무)·아래(프로젝트 없음)는 프로젝트가 아닌 묶음 — 보조 스타일과 구분선으로 프로젝트 목록과 떼어 놓는다. */
.work-rail-views .work-rail-label {
  color: var(--text-secondary);
  font-weight: 600;
}

.work-rail-views {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.work-rail-views--bottom {
  padding: 8px 0 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--border-light);
  border-bottom: none;
}

.work-rail-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 6px 6px;
}

.work-rail-colhead {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 프로젝트가 늘어도 레일이 끝없이 길어지지 않게 — 프로젝트 목록만 안쪽 스크롤. */
.work-rail-scroll {
  max-height: min(56vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.work-rail-search {
  width: 100%;
  margin: 0 0 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--surface-panel-soft);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}

.work-rail-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.work-rail-entry[hidden],
.work-rail-note[hidden] {
  display: none;
}

.work-rail-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.work-rail-progress-text {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.work-rail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.work-rail-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.work-rail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-rail-item {
  appearance: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 8px 8px 8px 9px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease;
}

.work-rail-item:hover {
  background: var(--bg-hover);
}

.work-rail-item[aria-pressed="true"] {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.work-rail-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.work-rail-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.work-rail-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.work-rail-item[data-rail-project="__none__"] .work-rail-label,
.work-rail-item[data-legacy="true"] .work-rail-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.work-rail-item[aria-pressed="true"] .work-rail-label {
  color: var(--accent);
}

.work-rail-pending {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--neutral-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}

.work-rail-item[data-sheet-status="closing"] .work-rail-label::after {
  content: " · 마감 요청 중";
  color: var(--warning);
  font-size: 11px;
  font-weight: 600;
}

.work-rail-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 14px;
}

.work-rail-num {
  flex-shrink: 0;
  min-width: 20px;
  margin-left: auto;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.work-progress-track {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--surface-control-track);
  overflow: hidden;
}

.work-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--status-success);
  transition: width 300ms ease;
}

.work-rail-closed {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.work-rail-closed-summary {
  padding: 2px 6px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.work-rail-note {
  margin: 8px 6px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== 고른 프로젝트 패널 — 운영표 카드(ax-work-surface-board.css 부품)를 패널 크기로 ===== */
.work-project-panel {
  margin-bottom: 14px;
}

.work-project-panel[hidden] {
  display: none;
}

.work-project-panel .work-project-card {
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.work-project-panel .work-project-card[data-pending] {
  box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm);
}

.work-project-panel .work-project-card.is-focused {
  box-shadow: 0 0 0 2px var(--accent);
}

.work-project-panel .work-project-name {
  font-size: 16px;
}

.work-project-head .work-projects-switch {
  margin-left: auto;
}

.work-project-pending + .work-projects-switch {
  margin-left: 8px;
}

.work-project-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.work-project-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.work-project-col--progress {
  padding-left: 16px;
  border-left: 1px solid var(--border-light);
}

.work-project-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.work-project-progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.work-project-progress-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.work-project-progress .work-progress-track {
  flex: none;
  height: 6px;
}

.work-project-done-summary {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
}

.work-project-done-count {
  font-variant-numeric: tabular-nums;
}

.work-project-done-list {
  display: flex;
  flex-direction: column;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.work-project-done-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px;
  border: none;
  border-bottom: 1px solid var(--border-light);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.work-project-done-list li:last-child .work-project-done-item {
  border-bottom: none;
}

.work-project-done-item:hover {
  background: var(--bg-hover);
}

.work-project-done-check {
  flex-shrink: 0;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.work-project-done-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-primary);
}

.work-project-done-owner {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ===== 팀 보드 카드: 레인 점 · 플래그 · 프로젝트 배지 ===== */
.lane-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lane-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
}

.lane-column[data-lane="doing"] .lane-dot { background: var(--accent); }
.lane-column[data-lane="done"] .lane-dot { background: var(--status-success); }

.empty-lane--drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.work-lane-link {
  appearance: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.work-card-flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-control-track);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.work-card-flag[data-tone="error"] {
  background: var(--error-soft);
  color: var(--error);
}

.work-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.work-card-meta .work-card-progress {
  flex: 1 1 120px;
}

.work-card-project {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 1px 8px 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-panel-soft);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-card-project-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ===== 상세: 하위 업무 체크리스트 ===== */
.work-detail-children {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.work-detail-children:empty,
.work-detail-children:has(> .work-detail-empty) {
  border: none;
}

.work-child-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-panel);
}

.work-child-row:last-child {
  border-bottom: none;
}

.work-child-row[data-status="done"] .work-detail-child-title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.work-child-check {
  display: inline-flex;
  align-items: center;
}

.work-child-toggle {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--status-success);
  cursor: pointer;
}

.work-child-toggle:disabled {
  cursor: not-allowed;
}

.work-child-row .work-detail-child {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 2px;
  border: none;
  background: none;
  box-shadow: none;
}

.work-child-row .work-detail-child-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-child-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.work-child-due,
.work-child-owner {
  max-width: 128px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-panel-soft);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
}

.work-child-due:hover,
.work-child-owner:hover {
  border-color: var(--border);
}

/* 키보드 포커스는 분명히 보이게(outline 을 지우지 않는다). */
.work-child-due:focus-visible,
.work-child-owner:focus-visible,
.work-child-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.work-child-locked {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--error);
}

.work-child-recheck {
  appearance: none;
  padding: 2px 8px;
  border: 1px solid var(--status-error-border);
  border-radius: var(--radius-full);
  background: var(--surface-panel);
  color: var(--error);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* ===== 반응형 ===== */
/* 폭은 화면이 아니라 업무 페이지 컨테이너(.work-board-page = container work-review) 기준이다 — 사이드바·아바타 패널이
   열려 있으면 같은 화면 폭에서도 업무 영역이 좁다. */
@container work-review (max-width: 1040px) {
  .work-home {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container work-review (max-width: 1100px) {
  /* 레일은 위쪽 가로 알약 줄로 접는다(옆으로 넘기며 고른다). 레인 셋이 폭을 다 쓴다. */
  .work-team-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .work-project-rail {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .work-project-rail::-webkit-scrollbar {
    display: none;
  }

  .work-project-rail .work-rail-head,
  .work-project-rail .work-rail-note,
  .work-rail-item .work-rail-progress {
    display: none;
  }

  .work-project-rail .work-rail-search {
    flex: none;
    width: 160px;
    margin: 0;
  }

  .work-rail-views,
  .work-rail-views--bottom {
    flex: none;
    margin: 0;
    padding: 0;
    border: none;
  }

  .work-rail-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    max-height: none;
    overflow: visible;
  }

  .work-project-rail .work-rail-list {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .work-project-rail .work-rail-list::-webkit-scrollbar {
    display: none;
  }

  .work-rail-entry {
    flex: none;
  }

  .work-rail-item {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 220px;
    padding: 6px 10px;
    border-left: none;
    border-radius: var(--radius-full);
    background: var(--surface-panel-soft);
  }

  .work-rail-item[aria-pressed="true"] {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  .work-rail-item .work-progress-track {
    display: none;
  }

  .work-rail-item[data-sheet-status="closing"] .work-rail-label::after {
    content: none;
  }

  .work-rail-closed {
    flex: none;
    margin: 0;
    padding: 0;
    border-top: none;
  }

  .work-rail-closed[open] {
    display: flex;
    align-items: center;
    gap: 6px;
  }

}

@container work-review (max-width: 760px) {
  .work-project-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-project-col--progress {
    padding-left: 0;
    border-left: none;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
  }
}

@media (max-width: 720px) {
  .work-header-main {
    width: 100%;
  }

  /* 좁으면 위 탭이 머리 줄에서 한 줄을 다 쓴다(제목 → 탭 → 요약 칩 순으로 줄바꿈). */
  .work-tabbar {
    flex: 1 1 100%;
    max-width: none;
  }

  /* 시트는 좁은 화면에서 꽉 차므로 폭 조절 손잡이를 감춘다. */
  .work-detail-resizer,
  .work-sheet-resizer {
    display: none;
  }

  /* 머리의 [새 프로젝트]·[업무 등록]은 한 줄에 나란히(보조 · 주 버튼). */
  .work-review-header .work-toolbar-actions {
    flex-wrap: nowrap;
  }

  .work-home-section {
    padding: 14px 14px 16px;
  }

  .work-mine-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 10px;
  }

  .work-mine-status {
    grid-column: 1 / -1;
  }

  .work-attn-meta {
    margin-left: 0;
    white-space: normal;
  }

  .work-attn-open {
    margin-left: 0;
  }

  .work-team-toolbar .work-filter-field,
  .work-team-toolbar .work-filter-field > *,
  .work-team-toolbar .work-lifecycle-switch,
  .work-team-toolbar .scope-switch--single {
    width: auto;
    flex: none;
  }

  .work-team-toolbar .work-filter-label {
    display: none;
  }

  /* 응답 버튼은 한 줄에 나란히(전역 모바일 규칙의 버튼 100% 폭을 이 줄에서만 푼다). */
  .work-attn-actions .ax-button,
  .work-project-actions .ax-button {
    width: auto;
    flex: 1 1 auto;
  }

  .work-board-filter {
    flex: none;
  }

  .work-project-panel .work-project-card {
    padding: 14px;
  }

  .work-child-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .work-child-controls {
    grid-column: 2;
  }
}

/* ===== 상위 카드 아래 하위 업무 펼침(사용자 피드백 2026-10-03) ===== */
.work-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.work-card-subtoggle {
  appearance: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.work-card-subtoggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.work-card-subtoggle:focus-visible,
.work-sub-title:focus-visible,
.work-sub-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.work-card-subtoggle-mark {
  width: 10px;
  color: var(--text-muted);
}

.work-card-subs {
  display: flex;
  flex-direction: column;
  margin: 0 0 2px 14px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--border-light);
  list-style: none;
}

.work-sub-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}

.work-sub-toggle {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--status-success);
  cursor: pointer;
}

.work-sub-title {
  appearance: none;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.work-sub-title:hover {
  text-decoration: underline;
}

.work-sub-row[data-status="done"] .work-sub-title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.work-sub-owner,
.work-sub-due,
.work-sub-empty {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.work-sub-due[data-tone="soon"] { color: var(--loading); }
.work-sub-due[data-tone="overdue"] { color: var(--error); }

/* ===== 업무 사이드 시트(상세·업무 등록·새 프로젝트·휴지통) — 같은 폭(utils/panel-resizer, #view-work --work-sheet-width) ===== */
/* 기본값을 여기서 정의한다(css-token-guard: 같은 파일 정의). 손잡이를 끌면 panel-resizer 가 #view-work 인라인 스타일로 덮는다. */
#view-work {
  --work-sheet-width: 560px;
}

.work-board-detail-root .work-board-detail-sidepanel,
.work-sheet-root .work-sheet {
  width: min(var(--work-sheet-width, 560px), 100vw);
}

.work-sheet-root {
  z-index: 44;
}

.work-sheet {
  display: flex;
  flex-direction: column;
}

.work-sheet-form {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.work-sheet-header .ax-button {
  flex: none;
  width: auto;
}

.ax-detail-sidepanel-titlegroup h2.work-sheet-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.work-sheet-body {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* 새로 적는 칸이라 상세(제자리 편집)와 달리 빈 칸 테두리를 처음부터 보인다 — 줄 배치·라벨 열·글꼴은 상세와 같다. */
.work-sheet-title-input,
.work-sheet-props .work-detail-control {
  border-color: var(--border-light);
  background: var(--surface-panel-soft);
}

.work-sheet-props .work-detail-control {
  cursor: auto;
}

.work-sheet-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-panel);
}

.work-sheet-footer .ax-button {
  flex: none;
  width: auto;
}

.work-project-create-existing {
  margin-left: 4px;
}

.work-register-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--error-soft);
  color: var(--error);
  font-size: 12.5px;
}

.work-register-error[hidden] {
  display: none;
}

/* ===== 라운드 3b(2026-10-04): 최근 완료 · 휴지통 · 프로젝트 삭제 ===== */
.lane-note {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.work-lane-more {
  align-self: center;
  margin-top: 4px;
}

.work-card-project[data-deleted="true"] {
  border-style: dashed;
  color: var(--text-muted);
}

.work-card-project[data-deleted="true"] .work-card-project-dot {
  background: var(--text-muted);
}

.work-trash-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.work-trash-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.work-trash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.work-trash-row:last-child {
  border-bottom: none;
}

.work-trash-row .ax-button {
  flex: none;
  width: auto;
}

.work-trash-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.work-trash-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.work-trash-meta,
.work-trash-children {
  font-size: 11.5px;
  color: var(--text-muted);
}

.work-trash-children {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.work-trash-message {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.work-trash-message[data-tone="error"] {
  color: var(--error);
}

.work-trash-footnote {
  margin-right: auto;
}

.work-detail-notice--trash {
  display: flex;
  align-items: center;
  gap: 10px;
}

.work-detail-notice--trash .ax-button {
  flex: none;
  width: auto;
}

.work-detail-footer .work-detail-trash-btn {
  margin-left: auto;
  color: var(--error);
}

.work-project-delete:not(:disabled) {
  color: var(--error);
}

.work-project-delete-why {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--text-muted);
}

.work-project-open-work {
  margin: 0;
  padding: 0;
  list-style: none;
}