/* APFLOW — 화면. 기준은 public/_proto/(구 프로토타입, 대표가 다듬은 화면)의 구조·밀도·
   구성이다. 색만 tokens.css v2.1 변수로 치환했다. ⚠ 하드코딩 hex 금지. */

/* ── 프로토타입 변수 이름을 실제 토큰에 다리 놓기 ──
   styles.css 원본은 --forest/--paper/--ground/--line/--ink/--muted/--blue/--blue-soft/
   --orange/--mint 를 통해 색을 참조한다. 규칙 대부분이 이 이름을 쓰므로, 여기서 한 번만
   실제 토큰에 연결하면 나머지는 그대로 따라온다(값이 바뀔 뿐 룰은 원본 그대로). */
:root {
  --forest: var(--dark-surface);       /* 레일 배경 — 스킴 무관 고정 다크 */
  --forest-deep: var(--ink-deep);      /* 토스트·강조 칩 배경 — forest보다 한 단 더 깊다 */
  --paper: var(--surface);
  --ground: var(--surface-muted);
  --line: var(--border);
  --muted: var(--muted);
  --blue: var(--moss);                 /* 원본 인터랙션 블루 = 우리 secondary(moss) */
  --blue-soft: var(--sec-50);
  --orange: var(--brand);              /* 원본 pin/강조 오렌지 = 우리 브랜드 마젠타 */
  --mint: var(--brand-pale);
  --on-accent: var(--surface);
}
@media (prefers-color-scheme: dark) {
  :root { --on-accent: var(--ink-deep); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "맑은 고딕", sans-serif;
  color: var(--ink);
  background: var(--ground);
}
/* 버튼/폼 컨트롤은 UA 스타일시트가 color를 검정으로 고정한다(상속 아님) — 명시로 되돌린다.
   그렇지 않으면 다크 스킴에서 어두운 카드 위 검정 글자로 사실상 안 보인다(실측으로 발견). */
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--sec-300); outline-offset: 2px;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
code { font-family: inherit; padding: 1px 5px; border-radius: 4px; background: var(--tint); }

.app-shell { display: grid; grid-template-columns: 248px minmax(600px, 1fr) 350px; min-height: 100vh; transition: grid-template-columns .2s ease; }
/* 레일 접기/펼치기(2026-08-07-레일-접기펼치기-cc) — 폭만 바꾼다(200ms 이내). project-mode·
   tool-mode는 각자 컨텍스트 패널 열을 빼는 별도 규칙이 있어 접힘 폭도 각각 정의해야 한다.
   home-mode는 애초에 레일 열 자체가 없어(랜딩 숨김 우선) rail-collapsed와 같이 있어도
   home-mode 쪽 값이 이기도록 안전망 규칙을 따로 둔다. */
.app-shell.rail-collapsed { grid-template-columns: 72px minmax(600px, 1fr) 350px; }
.app-shell.project-mode { grid-template-columns: 248px minmax(600px, 1fr); }
.app-shell.project-mode.rail-collapsed { grid-template-columns: 72px minmax(600px, 1fr); }
.app-shell.project-mode .context-panel, .app-shell.project-mode #toggle-context { display: none; }
.app-shell.tool-mode { grid-template-columns: 248px minmax(600px, 1fr); }
.app-shell.tool-mode.rail-collapsed { grid-template-columns: 72px minmax(600px, 1fr); }
.app-shell.tool-mode .context-panel, .app-shell.tool-mode #toggle-context { display: none; }
.app-shell.tool-mode .space-tool { min-height: calc(100vh - 146px); padding: 0; }
.app-shell.tool-mode #tool-surface { width: 100%; max-width: none; height: calc(100vh - 146px); margin: 0; padding: 0; }
/* 캔버스 탭 정리(2026-08-07-워크트리화면-개요확장·레이아웃·헤더고정-cc예외, 작업 지시 4) —
   원인: 위 두 규칙이 tool-mode 전체(개요·캔버스·중요 링크·워크플로 공용)의 여백을 0으로
   미는데, 이건 원래 여백을 스스로 챙기는 워크플로 라이브러리/캔버스(.workflow-library 등,
   자체 패딩 보유)를 위한 오버라이드였다. #canvas-note가 쓰는 .tool-empty-head/.tool-empty-body
   셸은 자체 여백이 없어(#tool-surface의 기본 padding:34px에 의존하는 설계) 이 0-패딩이
   그대로 적용되면 제목이 화면 가장자리에 바짝 붙고 본문 textarea도 여백 없이 붙어 "겹쳐
   보이는" 느낌을 준다 — #canvas-note가 안에 있을 때만(:has) 다른 탭과 같은 --s6 여백을
   되돌린다(워크플로 쪽은 이 선택자에 안 걸려 그대로 0-패딩 유지, 회귀 없음). */
.app-shell.tool-mode #tool-surface:not(:has(.flow-canvas)) { padding: var(--s6); }
/* 홈(랜딩)은 레일을 숨긴다(대표 지시, 2026-08-05) — 대신 홈 안의 각 섹션이 그 공간으로
   들어가는 진입점 역할을 한다. 레일-foot의 계정 접근은 .home-account-btn으로 대체. */
.app-shell.home-mode { grid-template-columns: minmax(0, 1fr); }
.app-shell.home-mode .project-rail, .app-shell.home-mode .context-panel, .app-shell.home-mode #toggle-context { display: none; }
/* 랜딩 레일 토글(2026-08-07-딥링크404·랜딩레일토글-cc, 작업 지시 ②) — 기본은 위 규칙대로
   숨김(기존 감각 유지)이지만 rail-collapsed가 붙으면(#rail-toggle-home으로만 켤 수 있다 —
   레일 자체가 숨어 있어 안의 #rail-toggle은 원래 못 누른다) 접힌 형태(72px 아이콘 스트립)로
   되살아난다. 랜딩 전용 완전판(248px)은 새로 안 만들고 기존 rail-collapsed 레이아웃을
   그대로 재사용했다 — "레일 숨김 또는 접힘" 중 접힘을 펼침 상태로 골랐다(판단 근거 명시).*/
.app-shell.home-mode.rail-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.app-shell.home-mode.rail-collapsed .project-rail { display: flex; }
.app-shell.workflow-edit-mode { display: block; }
.app-shell.workflow-edit-mode .project-rail, .app-shell.workflow-edit-mode .workbench-head, .app-shell.workflow-edit-mode .project-tool-tabs { display: none; }
.app-shell.workflow-edit-mode .workbench, .app-shell.workflow-edit-mode .space-tool { width: 100%; min-height: 100vh; height: 100vh; }
.app-shell.workflow-edit-mode .space-tool { padding: 0; }
.app-shell.workflow-edit-mode #tool-surface { width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; }
.app-shell.workflow-edit-mode .workflow-node-builder { max-width: none; }

/* ── 레일 ── */
.project-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px 16px; color: var(--surface); background: var(--forest); }
.rail-head { display: flex; align-items: center; gap: 13px; padding: 0 6px 22px; border-bottom: 1px solid color-mix(in srgb, var(--surface) 15%, transparent); }
.mark { display: grid; place-content: center; width: 48px; height: 52px; border: 1px solid color-mix(in srgb, var(--surface) 50%, transparent); border-radius: 3px; background: transparent; color: var(--surface); font-weight: 900; line-height: .72; letter-spacing: -2px; }
.rail-kicker, .section-code { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.rail-head .rail-kicker { color: var(--sec-pale); }
.rail-head h1 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.04em; }
.nav-label { display: block; padding: 12px 10px 7px; color: var(--sec-pale); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.workspace-nav { display: grid; gap: 4px; }
.workspace-nav button, .workspace-nav a, .channel { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--sec-pale); text-align: left; text-decoration: none; cursor: pointer; }
.workspace-nav button:hover, .workspace-nav a:hover, .channel:hover { background: color-mix(in srgb, var(--surface) 8%, transparent); }
.workspace-nav button.active { background: var(--surface); color: var(--forest); font-weight: 850; }
.workspace-nav b { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; background: var(--brand-fill); color: var(--surface); font-size: 10px; }
.rail-section { margin-top: 24px; }
.channel { grid-template-columns: 22px 1fr; padding-block: 9px; }
.channel.active { color: var(--surface); font-weight: 800; }
.channel svg { opacity: .55; }
/* 레일 아이콘(2026-08-07-레일-SVG아이콘·위클리체크인-cc) — 이모지 대체 SVG, currentColor 상속 */
.workspace-nav svg, .channel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 레일 접기/펼치기 토글(2026-08-07-레일-접기펼치기-cc) */
.rail-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 6px; background: transparent; color: var(--sec-pale); }
.rail-toggle:hover { background: color-mix(in srgb, var(--surface) 8%, transparent); color: var(--surface); }
.rail-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.app-shell.rail-collapsed .rail-toggle svg { transform: rotate(180deg); }
/* 랜딩 전용 토글 버튼 — .project-rail 바깥(app-shell 최상위 자식)에 둬서 레일이 display:none인
   랜딩 기본 상태에서도 항상 보이고 눌린다("버튼은 항상 접근 가능해야 한다", 작업 지시 ②).
   레일이 펼쳐지면(rail-collapsed) 레일 안의 #rail-toggle이 같은 역할을 대신하므로 이 버튼은
   숨겨 버튼 중복 노출을 막는다. */
#rail-toggle-home { display: none; }
.app-shell.home-mode #rail-toggle-home {
  display: grid; place-items: center; position: fixed; top: 18px; left: 18px; z-index: 40;
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: var(--elev-card);
}
.app-shell.home-mode.rail-collapsed #rail-toggle-home { display: none; }
#rail-toggle-home svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* 접힘 상태 — 아이콘만 남는 좁은 레일(작업 지시 2). 라벨 텍스트는 rail-label로 감싸 숨기고,
   호버 시 항목명은 각 버튼의 title 속성(HTML)으로 충분하다고 판단해 별도 툴팁 컴포넌트는
   만들지 않았다. 배지(<b>)는 숫자를 지우고 아이콘 오른쪽 위의 점으로 축약한다. */
.app-shell.rail-collapsed .project-rail { padding-inline: 12px; }
.app-shell.rail-collapsed .rail-head { flex-direction: column; gap: 10px; padding-inline: 0; }
.app-shell.rail-collapsed .rail-toggle { margin: 0; }
.app-shell.rail-collapsed .rail-label { display: none; }
.app-shell.rail-collapsed .workspace-nav button,
.app-shell.rail-collapsed .channel,
.app-shell.rail-collapsed .rail-bottom-nav a {
  position: relative; grid-template-columns: 20px; justify-content: center; padding-inline: 0;
}
.app-shell.rail-collapsed .workspace-nav b {
  position: absolute; top: 6px; right: 10px; min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0;
}
.app-shell.rail-collapsed .rail-foot { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding-inline: 0; }
/* 본 워크스페이스 나비게이션(Notice/Task board/워크트리 보드)과 분리해 계정 영역 바로 위에 —
   margin-top:auto가 이 블록과 뒤따르는 rail-foot을 함께 하단으로 밀어붙인다. */
.rail-bottom-nav { margin-top: auto; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--surface) 15%, transparent); }
.rail-bottom-nav a { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; width: 100%; padding: 11px 12px; border-radius: 8px; background: transparent; color: var(--sec-pale); text-decoration: none; }
.rail-bottom-nav a:hover { background: color-mix(in srgb, var(--surface) 8%, transparent); }
.rail-foot { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; padding: 15px 7px 0; border-top: 1px solid color-mix(in srgb, var(--surface) 15%, transparent); }
.rail-foot strong, .rail-foot small { display: block; }
.rail-foot small { margin-top: 3px; color: var(--sec-pale); font-size: 10px; }
.rail-foot button { border: 0; background: transparent; color: var(--surface); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-pale); color: var(--forest); font-size: 11px; font-weight: 900; }

/* ── 워크벤치 상단 ── */
.workbench { min-width: 0; min-height: 100vh; background: var(--paper); }
/* 헤더 고정(2026-08-07-워크트리화면-개요확장·레이아웃·헤더고정-cc예외, 작업 지시 3) — 스크롤
   컨테이너는 그대로 문서(body)다(레이아웃 재구성 없이 sticky만 추가) — .project-rail이 이미
   같은 방식(position:sticky)으로 고정돼 있는 걸 그대로 재사용한 것. 자식(workbench-head·
   overview-nudge-banner·project-tool-tabs) 각각 다른 background를 이미 갖고 있어(아래) 래퍼
   자체엔 별도 배경이 필요 없다 — 뒤 콘텐츠가 비치는 틈이 없다. */
.workbench-pinned { position: sticky; top: 0; z-index: 15; background: var(--ground); }
.workbench-head { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 26px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.workbench-head h2 { margin: 5px 0 3px; font-size: 23px; letter-spacing: -.045em; }
.workbench-head p { margin: 0; color: var(--muted); font-size: 12px; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.search { display: flex; align-items: center; gap: 7px; width: 215px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--ground); }
.search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; color: var(--ink); }
.outline-btn, .quiet { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 750; }
.send { padding: 10px 14px; border: 0; border-radius: 7px; background: var(--blue); color: var(--surface); font-weight: 800; }

.space { display: none; }
.space.active { display: flex; }

/* ── 프로젝트 도구 탭 ── */
.project-tool-tabs { position: relative; z-index: 12; height: 50px; display: flex; align-items: end; gap: 3px; padding: 0 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.project-tool-tabs[hidden] { display: none; }
.project-tool-tabs > button { position: relative; height: 38px; padding: 0 13px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.project-tool-tabs > button.active { color: var(--ink); }
.project-tool-tabs > button.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--orange); }
.space-tool { min-height: calc(100vh - 146px); padding: 34px; background: var(--ground); }
#tool-surface { width: min(860px, 100%); margin: auto; padding: 34px; background: var(--surface); }
.tool-empty-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.tool-empty-head h3 { margin: 5px 0 0; font-size: var(--fs-h1); }
.tool-empty-body { padding: var(--s6) 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.tool-empty-body textarea { width: 100%; min-height: 220px; padding: 18px; border: 1px solid var(--line); resize: vertical; line-height: 1.7; background: var(--surface); color: var(--ink); }
.workbench:has(.project-tool-tabs:not([hidden])) .space-files { height: calc(100vh - 146px); }
.workbench:has(.project-tool-tabs:not([hidden])) .space-talk, .workbench:has(.project-tool-tabs:not([hidden])) .space-tasks { min-height: calc(100vh - 146px); }

/* ── 워크트리 보드 / Notice·Task board·홈(전체 워크트리 집계, 같은 골격 재사용) ── */
/* 원인 확정(2026-08-07-메일화면-레이아웃·정리대화상자-cc예외, "제목 블록이 잘려 겹쳐
   보인다") — .space.active는 display:flex만 걸고 flex-direction을 안 정해(기본값 row) 이
   목록에 없는 화면은 .project-board-head와 그 다음 레이아웃 div가 가로로 나란히 놓여
   제목이 좁은 폭으로 눌린다. .space-mail이 이 목록에서 빠져 있던 게 원인 — 다른 전체
   집계 화면(Notice·Task board·홈)과 같은 골격으로 맞춘다. .space-weekly도 그때 "이론상
   같은 버그가 있을 수 있다"고 남겨둔 확인 필요 항목이었는데(45번 항목), 2026-08-07-
   위클리체크인-화면통합·레이아웃-cc의 "워크트리 패널 상단 잘림" 증상으로 실제 재현돼
   같이 추가한다 — 원인 동일. */
.space-projects, .space-notice, .space-taskboard, .space-home, .space-mail, .space-weekly { min-height: calc(100vh - 96px); padding: var(--s6); flex-direction: column; background: var(--paper); }
.project-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.project-board-head h3 { margin: 7px 0 5px; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.04em; }
.project-board-head p { margin: 0; color: var(--muted); font-size: 13px; }

/* ── 홈(랜딩, 2026-08-05) — 인사말 + 바로가기 + 내 담당 업무 ── */
.home-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.home-greet h2 { margin: 0 0 6px; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.03em; }
.home-greet p { margin: 0; color: var(--muted); font-size: 13px; }
/* 레일이 홈에서 숨겨지는 동안 rail-foot(계정·로그아웃)을 대신하는 진입점. */
.home-account-btn { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-align: left; }
.home-account-btn strong, .home-account-btn small { display: block; }
.home-account-btn small { color: var(--muted); font-size: 10px; }
.home-section-more { margin-top: var(--s3); }
.home-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); margin: var(--s5) 0 var(--s6); }
.home-shortcut { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4) var(--s3); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 750; text-align: center; text-decoration: none; }
.home-shortcut span { font-size: 20px; }
.home-shortcut:hover { border-color: var(--brand); }
.home-mytasks { padding-top: var(--s5); border-top: 1px solid var(--line); }
.home-mytasks-head h3 { margin: 6px 0 var(--s3); font-size: var(--fs-h2); letter-spacing: -.03em; }
.home-mytasks-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.home-tab { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 800; }
.home-tab.active { border-color: var(--brand); color: var(--ink); }
.home-mytasks-body { min-height: 60px; }
.home-mytasks-list { display: flex; flex-direction: column; gap: 6px; }
/* 접이식 홈 섹션(2026-08-07-홈-워크트리보드섹션-기본접힘-cc) — 헤더 전체가 클릭 대상, 화살표는
   aria-expanded에 맞춰 90도 회전만 한다(별도 아이콘 세트 없이 텍스트 화살표 재사용). */
.home-collapsible-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.home-collapsible-head h3 { margin: 6px 0; }
.home-collapsible-caret { margin-left: auto; color: var(--muted); font-size: 14px; transition: transform .15s ease; }
.home-collapsible-head[aria-expanded="true"] .home-collapsible-caret { transform: rotate(90deg); }
.home-collapsible-body { margin-top: var(--s3); }
.push-dismiss { padding: 10px 14px; color: var(--muted); font-weight: 800; }
.push-actions { display: flex; gap: var(--s2); margin-top: var(--s2); }
.home-mytask-row { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 12px; text-align: left; }
.home-mytask-title { font-weight: 750; }
.home-mytask-wt { color: var(--muted); font-size: 11px; }
.home-mytask-due { font-size: 11px; }
.home-mytask-due.is-overdue { color: var(--negative); font-weight: 800; }
.home-mytask-priority { font-size: 11px; font-weight: 800; }
.home-mytask-parent { color: var(--muted); font-weight: 600; }
.home-mytask-subtasks { margin: 0 0 0 14px; padding: 6px 14px; }
.priority-high { color: var(--negative); }
.priority-low { color: var(--muted); }

/* ── 업무 상세 드로어(2026-08-05) — 뒤 목록을 가리지 않는 슬라이드 패널(백드롭 없음). ── */
.task-drawer { position: fixed; top: 0; right: 0; z-index: 40; width: min(420px, 100%); height: 100vh; overflow-y: auto; padding: var(--s5); border-left: 1px solid var(--line); background: var(--surface); box-shadow: var(--elev-card-hover); transform: translateX(100%); transition: transform .2s; }
.task-drawer.open { transform: none; }
.task-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.task-drawer-head button { border: 0; background: transparent; color: var(--ink); font-size: 22px; }
.task-drawer-status { padding: 3px 10px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 10px; font-weight: 850; }
.task-drawer-status.status-doing { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand); }
.task-drawer-status.status-review { background: color-mix(in srgb, var(--notice) 14%, var(--surface)); color: var(--notice); }
.task-drawer-status.status-done { background: color-mix(in srgb, var(--positive) 14%, var(--surface)); color: var(--positive); }
.task-drawer h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); letter-spacing: -.02em; }
.task-drawer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s4) 0; }
.task-drawer-meta div { display: grid; gap: 3px; }
.task-drawer-meta dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.task-drawer-meta dd { margin: 0; font-size: 13px; }
.task-drawer-meta input[type="date"] { width: 100%; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.task-drawer-block { margin: var(--s4) 0; }
.task-drawer-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.task-drawer-block p { margin: 0; font-size: 12px; }
.task-drawer-progress { height: 8px; border-radius: 999px; background: var(--ground); overflow: hidden; }
.task-drawer-progress-bar { height: 100%; background: var(--brand); }
.task-drawer-block small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.task-drawer-subtasks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.task-drawer-subtasks button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; text-align: left; }
.task-drawer-actions { display: flex; gap: var(--s2); margin: var(--s5) 0; }
.task-drawer-history { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.7; color: var(--muted); }

/* ── 워크트리 트리(탐색기형) — GET /api/tree 그대로. 서버가 준 연도·트랙·폴더명 원문. ── */
.tree-view { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.tree-year { border-bottom: 1px solid var(--line); }
.tree-year:last-child { border-bottom: 0; }
.tree-year-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 4px; border: 0; background: none; text-align: left;
  font-size: 13px; font-weight: 850; color: var(--ink);
}
.tree-year-head:hover { background: var(--ground); }
.tree-caret { display: inline-block; color: var(--muted); font-size: 10px; transition: transform .14s ease; }
.tree-caret.is-collapsed { transform: rotate(0deg); }
.tree-caret:not(.is-collapsed) { transform: rotate(90deg); }
.tree-year-body { padding: 2px 4px 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.tree-track-group { display: flex; flex-direction: column; }
.tree-track-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 4px; border: 0; border-radius: 6px; background: none; text-align: left;
  color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.tree-track-head:hover { background: var(--ground); }
.tree-leaves { display: flex; flex-direction: column; }
.tree-leaf {
  display: flex; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px;
  background: none; text-align: left; color: var(--ink); font-size: 12px;
}
.tree-leaf:hover { background: var(--blue-soft); }
.tree-leaf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-leaf.is-dead .tree-leaf-name { color: var(--negative); }

.tree-archive { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.tree-archive-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 850; color: var(--muted); }
.tree-archive-body { display: flex; flex-direction: column; gap: 4px; }
.tree-archive-body .tree-year { border-bottom: 0; }

/* ── 파일 탭 — lazy, 목록까지만 ── */
.files-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); padding: var(--s4) 0 var(--s1); }
.files-nav-btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 6px; margin-right: 4px; }
.files-nav-btn:hover:not(:disabled) { background: var(--blue-soft); }
.files-nav-btn:disabled { color: var(--muted); opacity: .5; cursor: default; }
.files-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--muted); font-size: 12px; }
.files-crumb { border: 0; background: none; color: var(--moss); font: inherit; padding: 2px 4px; border-radius: 5px; }
.files-crumb:last-child { color: var(--ink); font-weight: 700; }
.files-crumb:hover { background: var(--blue-soft); }
.files-crumb-sep { color: var(--muted); }
.files-list { display: flex; flex-direction: column; margin-top: 8px; }
.files-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 6px; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; color: var(--ink);
}
.files-row:hover { background: var(--blue-soft); }
.files-row-caret { color: var(--muted); font-size: 10px; }
.files-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.files-row.directory .files-row-name { font-weight: 700; }
.files-row-meta { flex: 0 0 auto; color: var(--muted); font-size: 10px; }

/* ── 파일 라이트박스(그래픽 클릭 → 미리보기, 줌·패닝·리사이즈·이동·전체화면) ── */
.preview-dialog { position: relative; width: 95vw; height: 95vh; max-width: none; max-height: none; }
.preview-dialog[open] { display: flex; flex-direction: column; }
.preview-dialog.is-maximized { width: 100vw; height: 100vh; border-radius: 0; }
.preview-dialog .dialog-head { flex: 0 0 auto; padding: 20px 28px 16px; cursor: move; }
.preview-head-actions { display: flex; align-items: center; gap: 2px; cursor: default; }
.preview-head-actions button { border: 0; background: transparent; color: var(--ink); font-size: 18px; line-height: 1; padding: 6px 9px; border-radius: 7px; }
.preview-head-actions button:hover { background: var(--blue-soft); }
.preview-dialog .dialog-head h3 { cursor: default; }
.preview-nav-position { margin-left: 10px; color: var(--muted); font-size: 11px; font-weight: 800; }
/* 리사이즈 핸들 — 다이얼로그 테두리를 감싸는 8방향 손잡이. 전체화면 중엔 숨김(늘릴 화면이 없다). */
/* 손잡이는 다이얼로그 박스 "밖"으로 나가면 안 된다 — showModal() 로 뜬 <dialog> 는 자기 테두리
   바깥으로 렌더된 자식이 있어도 포인터 이벤트를 받지 못한다(실측: 음수 오프셋으로 바깥에 걸친
   손잡이는 elementFromPoint 가 dialog 자신을 반환 — top layer/backdrop 히트테스트 경계가
   dialog 자신의 border box라 그 바깥은 클릭이 안 먹는다). 그래서 전부 0(테두리에 딱 붙임)으로 안쪽에 둔다. */
.preview-resize-handle { position: absolute; z-index: 6; touch-action: none; }
.preview-dialog.is-maximized .preview-resize-handle { display: none; }
.rh-n, .rh-s { left: 10px; right: 10px; height: 9px; cursor: ns-resize; }
.rh-n { top: 0; } .rh-s { bottom: 0; }
.rh-e, .rh-w { top: 10px; bottom: 10px; width: 9px; cursor: ew-resize; }
.rh-e { right: 0; } .rh-w { left: 0; }
.rh-ne, .rh-nw, .rh-se, .rh-sw { width: 16px; height: 16px; }
.rh-ne { top: 0; right: 0; cursor: nesw-resize; }
.rh-nw { top: 0; left: 0; cursor: nwse-resize; }
.rh-se { bottom: 0; right: 0; cursor: nwse-resize; }
.rh-sw { bottom: 0; left: 0; cursor: nesw-resize; }
/* 미지원 형식 → 동명 출력본 자동 표시 안내줄 */
.preview-fallback-note { flex: 0 0 auto; padding: 8px 28px; border-bottom: 1px solid var(--line); background: var(--brand-pale); color: var(--text-accent); font-size: 11px; font-weight: 700; }
.preview-fallback-note[hidden] { display: none; }
.preview-zoom-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 8px 28px; border-bottom: 1px solid var(--line); }
.preview-zoom-toolbar[hidden] { display: none; }
.preview-zoom-toolbar button { min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; }
.preview-zoom-toolbar button:hover { background: var(--blue-soft); }
#preview-zoom-label { min-width: 48px; margin: 0 2px; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
/* 이미지 미리보기 주석(붉은펜) — pdf는 대상 아님(페이지 좌표 문제, 의도적 보류) */
.preview-annot-toolbar { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 28px; border-bottom: 1px solid var(--line); }
.preview-annot-toolbar[hidden] { display: none; }
.preview-annot-group { display: flex; align-items: center; gap: 4px; }
.preview-annot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.preview-annot-tools[hidden] { display: none; }
.preview-annot-toolbar button { min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; }
.preview-annot-toolbar button:hover { background: var(--blue-soft); }
.preview-annot-toolbar button[aria-pressed="true"] { border-color: var(--moss); background: var(--blue-soft); }
.preview-annot-toolbar button[data-annot-color] { min-width: 26px; width: 26px; padding: 0; font-size: 15px; }
.preview-annot-toolbar button[data-annot-color="red"] { color: var(--orange); }
.preview-annot-toolbar button[data-annot-color="orange"] { color: var(--notice); }
.preview-annot-toolbar button[data-annot-color="yellow"] { color: var(--annot-yellow); }
.preview-annot-toolbar button[data-annot-color="green"] { color: var(--positive); }
.preview-annot-toolbar button[data-annot-color="blue"] { color: var(--blue); }
.preview-annot-toolbar button[data-annot-color="purple"] { color: var(--annot-purple); }
.preview-annot-toolbar button[data-annot-color="black"] { color: var(--ink-deep); }
.preview-annot-toolbar button[data-annot-color="white"] { color: var(--annot-white); -webkit-text-stroke: 1px var(--line); } /* 흰 배경 위 흰 스와치도 보이게 얇은 외곽선 */
.preview-annot-status { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 700; }
.preview-annot-pin-editor { position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: 220px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent); }
.preview-annot-pin-editor textarea { min-height: 56px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); font: inherit; resize: vertical; }
.preview-annot-pin-editor-actions { display: flex; justify-content: flex-end; gap: 6px; }
.preview-body-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.preview-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* 좌우 넘기기(2026-08-05) — preview-body는 파일마다 innerHTML이 통째로 교체되므로
   버튼은 preview-body-wrap의 형제로 둬 살아남게 한다. */
.preview-nav-btn { position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; transform: translateY(-50%); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink); font-size: 22px; line-height: 1; box-shadow: var(--elev-card); }
.preview-nav-btn:hover:not(:disabled) { background: var(--blue-soft); }
.preview-nav-btn:disabled { opacity: .3; }
.preview-nav-btn[hidden] { display: none; }
.preview-nav-prev { left: 14px; }
.preview-nav-next { right: 14px; }
.preview-body .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; color: var(--muted); }
.preview-image { position: absolute; top: 0; left: 0; max-width: none; max-height: none; transform-origin: 0 0; cursor: default; user-select: none; -webkit-user-drag: none; }
.preview-image.is-panning { cursor: grabbing !important; }
.preview-annot-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; }
.preview-annot-canvas.is-drawing { cursor: crosshair; }
/* 핀은 캔버스가 아니라 DOM(SVG) — 컨테이너는 이미지·캔버스와 같은 변환을 받아 줌·팬을 따라가고
   (top:0/left:0 자체는 이동 안 함, transform만 공유), 포인터는 개별 핀 버튼에서만 받는다(빈 곳은
   그대로 캔버스·이미지로 통과). --pin-inv-scale(=1/scale)로 아이콘 자체 화면 크기는 줌과 무관하게 고정. */
.preview-annot-pins { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; }
.preview-annot-pin {
  position: absolute; width: 24px; height: 30px; padding: 0; border: 0; background: transparent;
  transform-origin: 0 0; transform: scale(var(--pin-inv-scale, 1)) translate(-50%, -100%);
  cursor: pointer; pointer-events: auto; filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ink) 35%, transparent));
}
.preview-annot-pin svg { display: block; width: 100%; height: 100%; transition: transform .12s ease; }
.preview-annot-pin:hover svg, .preview-annot-pin:focus-visible svg { transform: scale(1.18); }
.preview-annot-pin.is-dragging svg { transform: scale(1.1); }
.preview-annot-pin[data-tip]:hover::after, .preview-annot-pin[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  padding: 4px 8px; border-radius: 6px; background: var(--ink-deep); color: var(--surface);
  font-size: 11px; font-weight: 700; white-space: nowrap; max-width: 240px; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none; z-index: 5;
}
@keyframes preview-annot-pin-blink {
  0%, 100% { filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ink) 35%, transparent)); }
  50% { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 10px currentColor); }
}
.preview-annot-pin.is-highlight { animation: preview-annot-pin-blink .55s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
  .preview-annot-pin svg, .preview-annot-pin.is-highlight { transition: none; animation: none; }
}
.preview-pdf { display: block; width: 100%; height: 100%; border: 0; }
.preview-spinner { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid var(--line); border-top-color: var(--moss); border-radius: 50%; animation: preview-spin .8s linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preview-spinner { animation-duration: 1.6s; } }

/* 표·텍스트·슬라이드 미리보기(2026-08-07-파일미리보기-전수확대-cc예외) — .preview-body가
   overflow:hidden(이미지 팬·줌 전용 설계)이라 이 셋은 각자 position:absolute; inset:0으로
   본문을 꽉 채우고 자체 스크롤을 갖는다(.preview-body .empty와 같은 관례). */
.preview-table-wrap, .preview-text-wrap, .preview-slides-wrap { position: absolute; inset: 0; overflow: auto; padding: 20px 28px; }
.preview-note { margin: 0 0 10px; padding: 6px 10px; border-radius: 6px; background: var(--ground); color: var(--muted); font-size: 11px; }
.preview-table-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.preview-table-tabs button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 750; }
.preview-table-tabs button.is-active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.preview-table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--card-radius-sm); }
.preview-table { border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.preview-table td { padding: 5px 10px; border: 1px solid var(--line); }
.preview-table tr:nth-child(even) { background: var(--ground); }
.preview-text { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--card-radius-sm); background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.preview-slide { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.preview-slide:last-of-type { border-bottom: 0; }
.preview-slide-index { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.preview-slide h4 { margin: 0 0 6px; font-size: 14px; }
.preview-slide h4.empty { font-weight: 400; }
.preview-slide ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--ink); }
/* 미지원 형식 — 공통 규칙(작업 지시 6): 사유 문구 + 다운로드 버튼. */
.preview-unsupported { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 40px; text-align: center; }
.preview-unsupported .empty { position: static; padding: 0; }

/* ── 중요 링크 ── */
.links-list { display: flex; flex-direction: column; }
.resource-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.resource-row a { display: block; min-width: 0; color: var(--ink); text-decoration: none; }
.resource-row a:hover strong { text-decoration: underline; }
.resource-row strong { display: block; font-size: 12px; }
.resource-row small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.resource-row button { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; }
.resource-row button:hover { color: var(--brand); }
.links-form { display: flex; gap: 8px; margin-top: 18px; }
.links-form input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; }
@media (max-width: 620px) { .links-form { flex-direction: column; } }

/* ── 워크트리 개요(2026-08-07-워크트리개요-템플릿·랜딩-cc예외) — 섹션 카드형, 토큰 v3 ── */
.overview-nudge-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--brand); border-radius: var(--card-radius-sm); background: var(--brand-pale); color: var(--ink); font-size: var(--fs-small); }
/* 원인 확정(2026-08-07-개요배너누출·신원확인멈춤-cc, 배너 누출) — display:flex가 클래스
   선택자(작성자 스타일시트)라 브라우저 기본 스타일시트의 [hidden]{display:none}(UA 계층,
   항상 저자 스타일보다 우선순위가 낮음)을 무조건 이겨버려 el.hidden=true를 줘도 안 사라졌다.
   .project-tool-tabs[hidden]/.redeploy-block[hidden] 등 이 파일의 다른 hidden 토글 요소는
   전부 이 override를 이미 갖고 있는데 이 배너만 빠져 있었다. */
.overview-nudge-banner[hidden] { display: none; }
.overview-body { padding-top: var(--s4); }
.overview-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.overview-card { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--card-radius-sm); background: var(--surface); }
.overview-card h4 { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-caption); font-weight: 850; letter-spacing: .04em; }
.overview-card p { margin: 0; color: var(--ink); font-size: var(--fs-small); line-height: 1.6; white-space: pre-line; }
.overview-card-links, .overview-card-contacts, .overview-card-clients { grid-column: 1 / -1; }
.overview-contact-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.overview-contact-list li { display: flex; flex-direction: column; gap: 2px; }
.overview-contact-list strong { font-size: var(--fs-small); color: var(--ink); }
.overview-contact-list small { color: var(--muted); font-size: var(--fs-caption); }
.overview-shortcuts { display: flex; gap: 10px; margin-top: var(--s5); }
/* 개요 자체가 없을 때(작업 지시 1) — 안내 문구 + 버튼 하나로만 정리, 다른 바로가기·상단
   편집 버튼과 안 섞이게 가운데 정렬된 별도 블록으로 격리한다. */
.overview-empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 24px; text-align: center; }
.overview-empty-state .empty { margin: 0; }
.overview-edit-form { display: flex; flex-direction: column; gap: var(--s3); max-width: 560px; }
.overview-edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); font-weight: 750; color: var(--ink); }
.overview-edit-form input, .overview-edit-form textarea { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: var(--fs-small); font-weight: 400; }
/* 개요 폼 전용 섹션 라벨(2026-08-10-개요-연락처확장-UI반영-cc예외, 작업 지시 3) — 전역
   .nav-label(사이드바용, color:var(--sec-pale) + 12/7px 패딩)을 흰 배경 폼에 그대로 쓰면
   흐릿한 밴드처럼 보인다(사양서 3절 실측). 여기서만 불투명 잉크색·작은 패딩으로 덮어쓴다 —
   전역 .nav-label이나 sticky 헤더의 z-index는 건드리지 않는다(요구사항: 필요 없으면 z-index
   추가 금지 — 일반 흐름만으로 겹침이 없으므로 이 규칙에도 z-index를 넣지 않았다). */
.overview-edit-form .nav-label { display: block; padding: 4px 0; background: var(--surface); color: var(--ink); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.overview-links-editor, .overview-contacts-editor, .overview-people-editor, .overview-client-editor, .overview-period-editor { display: flex; flex-direction: column; gap: 6px; }
.overview-link-add-row, .overview-people-add-row { display: flex; gap: 8px; }
.overview-link-add-row input, .overview-people-add-row input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; }
@media (max-width: 620px) { .overview-link-add-row, .overview-people-add-row { flex-direction: column; } }
/* 6필드 추가 행(2026-08-10-개요-연락처확장-UI반영-cc예외, 작업 지시 1·3) — 협력사
   연락처에서 처음 만들었고, 발주처 한 번에 입력(2026-08-10-개요-발주처-한번에입력-cc예외,
   작업 지시 1)이 같은 클래스를 그대로 재사용한다(발주처 입력도 이제 6필드 2행). 기존
   단일 flex 행에 6필드를 더하면 wrap 높이가 내용에 따라 크게 흔들린다(사양서 3절 실측).
   명시적 하위 row 2개(3열/4열)를 grid로 감싸 각 row가 일반 흐름에서 자기 높이를 갖도록
   한다 — absolute/sticky/음수 margin 없음. */
.overview-contact-add-row { display: grid; gap: 8px; }
.overview-contact-add-row-1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.overview-contact-add-row-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.overview-contact-add-row input, .overview-contact-add-row button { min-width: 0; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; }
@media (max-width: 620px) {
  .overview-contact-add-row-1, .overview-contact-add-row-2 { grid-template-columns: 1fr; }
}
/* 담당 다중화·발주처 사전·기간 달력(2026-08-09-개요-담당다중·발주처사전·기간달력-cc예외) —
   칩은 기존 배지류(.mention-badge·.tag)와 같은 필(pill) 어휘를 재사용, 새 색 안 만듦. */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--ground); color: var(--ink); font-size: 11px; }
.chip small { color: var(--muted); font-size: 9px; }
.chip-remove { border: 0; background: transparent; color: var(--muted); font-size: 13px; line-height: 1; padding: 2px; }
.chip-remove:hover { color: var(--brand); }
.overview-period-inputs { display: flex; align-items: center; gap: 8px; }
.overview-period-inputs input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; }
.overview-period-fallback { margin: 4px 0 0; color: var(--muted); font-size: 10px; }

/* ── 웍스 메일(2026-08-07-웍스메일-v2-OAuth단일계정-cc예외) ──
   레이아웃 재구성(2026-08-07-메일화면-레이아웃·정리대화상자-cc예외, 작업 지시 1) — 대표
   지시 "받은 메일함이 더 크게": DOM·그리드 순서를 뒤집어 좌=수신함(주 영역, 유연 폭)
   / 우=쓰기(보조, 고정 320px)로 바꿨다(이전엔 쓰기가 좌측 340px, 수신함이 우측 1fr이라
   시각적 무게가 반대였다). */
/* 쓰기 폼 확대(2026-08-07-메일쓰기확대·홈레일토글·AI다이얼로그·지면2대1-cc, 작업 지시 1) —
   대표 실측 "우측에 좁게 붙어 있다"에 맞춰 고정폭을 320px→640px(2배)로 넓힌다. 수신함은
   여전히 1fr이라 넓은 화면에선 여전히 더 넓은 주 영역이지만, 640px 고정폭 때문에 좁은
   화면에서 수신함이 지나치게 눌리지 않도록 최소폭(minmax 360px)을 두고 두 칸 스택 전환
   기준도 900px→1200px로 올렸다(수신함이 주 영역이라는 원칙은 유지, 판단 근거 명시). */
.mail-layout { display: grid; grid-template-columns: minmax(360px, 1fr) 640px; gap: var(--s4); align-items: start; }
@media (max-width: 1200px) { .mail-layout { grid-template-columns: 1fr; } }
.mail-compose-panel, .mail-inbox-panel { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--card-radius-sm); background: var(--surface); }
.mail-compose-panel h4 { margin: 0 0 var(--s3); font-size: var(--fs-small); font-weight: 850; }
.mail-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.mail-inbox-head h4 { margin: 0; font-size: var(--fs-small); font-weight: 850; }
#mail-send-form { display: flex; flex-direction: column; gap: var(--s3); }
#mail-send-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); font-weight: 750; color: var(--ink); }
#mail-send-form input, #mail-send-form textarea { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--ground); color: var(--ink); font-size: var(--fs-small); font-weight: 400; }
/* 미연결 안내(작업 지시 4) — "받은 메일이 없습니다"만 뜨면 고장으로 오인된다. 미연결
   상태는 수신함 영역 안에서 크게 별도 안내 + 연결 버튼을 보여준다(대표만 버튼, 일반
   직원은 대표에게 요청하라는 안내). */
.mail-disconnected-banner { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s6) var(--s4); text-align: center; color: var(--muted); }
.mail-disconnected-banner p:first-child { color: var(--ink); font-size: var(--fs-body); font-weight: 800; }
.mail-message-list { display: flex; flex-direction: column; gap: 2px; }
.mail-message-row { border-bottom: 1px solid var(--line); }
.mail-message-row:last-child { border-bottom: 0; }
.mail-message-summary { display: flex; align-items: center; gap: var(--s3); padding: 8px 0; }
.mail-message-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px 4px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.mail-message-open strong { overflow: hidden; max-width: 100%; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-open small { color: var(--muted); font-size: 10px; }
.mail-worktree-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--sec-pale); color: var(--sec-700); font-size: 10px; font-weight: 800; white-space: nowrap; }
.mail-worktree-badge.is-unfiled { background: var(--ground); color: var(--muted); }
.mail-message-detail { margin: 0 0 8px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--card-radius-sm); background: var(--ground); font-size: 11px; color: var(--ink); }
.mail-message-detail p { margin: 0 0 4px; }
.mail-detail-attachments { margin: 4px 0 0; padding: 0 0 0 16px; }
.mail-body-text { margin: 4px 0 8px; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--card-radius-sm); background: var(--surface); line-height: 1.5; white-space: normal; }
/* 「정리」 대화상자(작업 지시 3) — 검색 가능·최근 활동 순 워크트리 목록. */
#mail-organize-dialog { width: min(480px, calc(100% - 30px)); }
.mail-organize-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; margin-top: var(--s3); overflow-y: auto; }
.mail-organize-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; text-align: left; }
.mail-organize-item small { color: var(--muted); font-size: 10px; }
.mail-organize-item.is-selected { border-color: var(--brand); background: var(--brand-pale); }
#mail-connect-status { margin: 0 0 8px; }

/* ── 파일 검토 — NAS 목록만(lazy) ── */
.space-files { flex-direction: column; padding: var(--s6); overflow-y: auto; }

/* ── 대화 ── */
.space-talk { min-height: calc(100vh - 96px); flex-direction: column; }
.pulse { position: relative; flex: 1; padding: 28px 38px 12px; }
.pulse::before { content: ""; position: absolute; top: 0; bottom: 0; left: 57px; width: 1px; background: var(--line); }
.pulse-day { position: relative; z-index: 1; margin: 0 0 22px 4px; }
.pulse-day span { padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 800; }
.message { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 14px; margin-bottom: 25px; }
.message .avatar { position: relative; z-index: 1; width: 42px; height: 42px; border: 4px solid var(--surface); }
/* 아바타·본문 겹침(2026-08-07-워크트리화면-개요확장·레이아웃·헤더고정-cc예외, 작업 지시 2) —
   .message-main엔 min-width:0가 없었다. 그리드 아이템의 기본 min-width는 auto(=콘텐츠의
   내재 최소폭)라 긴 토큰(공백 없는 URL·파일명 등)이 있으면 1fr 트랙이 그 내재폭까지
   억지로 늘어나며 42px 아바타 칸을 침범해 겹쳐 보인다 — 이 레포 다른 아바타+본문 목록
   (.mail-message-open)엔 이미 있는 방어를 여기만 빼먹었다(같은 관례 재사용). overflow-wrap도
   같이 줘 긴 줄 자체가 넘치지 않게 한다. */
.message-main { min-width: 0; }
.message-meta { display: flex; align-items: baseline; gap: 8px; }
.message-meta strong { font-size: 13px; }
.message-meta time { color: var(--muted); font-size: 10px; }
.message p { max-width: 70ch; margin: 7px 0 8px; font-size: var(--fs-body); line-height: 1.58; overflow-wrap: anywhere; }
.message-annot-thumb { display: block; overflow: hidden; width: fit-content; max-width: 240px; margin-top: 7px; border: 1px solid var(--line); border-radius: 10px; }
.message-annot-thumb img { display: block; max-width: 240px; max-height: 180px; }
.message.decision .message-main { padding: 13px 15px; border: 1px solid var(--notice); background: color-mix(in srgb, var(--notice) 10%, var(--surface)); }
.message-empty { padding: 40px 0; color: var(--muted); font-size: 12px; text-align: center; }
.mention { color: var(--blue); font-weight: 700; }
.annot-deeplink { color: var(--text-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.composer { position: sticky; bottom: 0; z-index: 5; margin: 8px 28px 26px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--elev-card-hover); }
.composer-tools { display: flex; gap: 5px; margin-bottom: 8px; }
.composer-tools button { padding: 4px 8px; border: 0; border-radius: 4px; background: var(--ground); color: var(--muted); font-size: 10px; }
.composer > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); }
.mention-menu { position: absolute; left: 15px; right: 15px; bottom: 100%; margin-bottom: 6px; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--elev-card-hover); z-index: 5; }
.mention-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 7px 12px; border: 0; background: none; text-align: left; color: var(--ink); font-size: 12px; }
.mention-item span { color: var(--muted); font-size: 10px; }
.mention-item:hover, .mention-item.is-active { background: var(--blue-soft); }
.mention-confirm { margin: 0 0 6px; color: var(--blue); font-size: 11px; font-weight: 700; }
.composer-foot { display: flex; justify-content: space-between; align-items: center; }
.composer-foot > span { color: var(--muted); font-size: 9px; }
kbd { padding: 1px 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--ground); }

/* ── 업무 보드(칸반, 프로토타입 카드 구조 그대로) ── */
.space-tasks { min-height: calc(100vh - 96px); padding: var(--s6); flex-direction: column; background: var(--ground); }
.board-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: var(--s5); }
.board-head h3 { margin: 7px 0 0; font-size: var(--fs-h1); letter-spacing: -.045em; }
.board-columns { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: var(--s3); align-items: start; overflow: auto; }
/* ── 주간회의(2026-08-07-주간회의-주간달력·AI마일스톤-cc예외) — 밀도보다 가독성 우선. ── */
.weekly-week-nav { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--fs-small); font-weight: 750; }
.weekly-week-nav button { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.weekly-week-nav button:hover { border-color: var(--brand); color: var(--brand); }
/* ── 워크트리 패널(작업 지시 ②) — Weekly Checkin 우측 사이드바. 폭 260px→300px로 확대
   (실측 없이 정한 값 — 워크트리 폴더명이 두 줄로 안 접힐 정도라는 요구를 만족하는지는
   대표 확인 필요, 보고에 명시). 패널 자체가 스크롤 영역이 되도록 max-height+overflow-y를
   패널 최상위에 걸었다(작업 지시 2 — "패널 자체 스크롤 영역을 명확히"). */
.weekly-layout { display: flex; gap: var(--s4); align-items: flex-start; }
/* 예전엔 .weekly-layout .weekly-grid { flex: 1 1 auto; min-width: 0; }가 남는 폭을 다
   가져갔다 — 그 클래스를 지웠으니 지면 쪽(#weekly-page-content)에 같은 규칙을 옮겨야
   달력 그리드(1fr 트랙)가 패널 옆 남는 폭을 실제로 채운다(안 걸면 콘텐츠 고유 폭으로
   쪼그라든다). */
#weekly-page-content { flex: 1 1 auto; min-width: 0; }
.weekly-worktree-panel { flex: 0 0 300px; width: 300px; max-height: calc(100vh - 220px); padding: var(--s3); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--card-radius-sm); background: var(--surface); }
.weekly-worktree-panel h4 { margin: 0 0 var(--s2); font-size: var(--fs-caption); font-weight: 850; letter-spacing: .04em; color: var(--muted); }
.weekly-worktree-panel h4 small { font-weight: 700; text-transform: none; letter-spacing: 0; }
.weekly-worktree-list { display: flex; flex-direction: column; gap: 4px; }
.weekly-worktree-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: var(--fs-small); cursor: pointer; }
.weekly-worktree-item input { accent-color: var(--brand); }
.weekly-ai-preview-row { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--card-radius-sm); }
.weekly-ai-preview-row input, .weekly-ai-preview-row textarea { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); font-size: var(--fs-small); }
.weekly-ai-preview-row button { align-self: flex-end; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--negative); font-size: var(--fs-caption); font-weight: 700; }
/* ── Weekly Checkin 메인 화면 = 인쇄 지면(2026-08-07-위클리체크인-화면통합·레이아웃-cc,
   대표 지시 ①) — 이전엔 별도 미리보기 다이얼로그(#weekly-print-dialog) 안에서만 이
   .weekly-print-* 스타일을 썼는데, 이제 화면 달력 자체가 이 스타일을 직접 쓴다(달력
   전용이던 .weekly-grid/.weekly-chip 계열은 전부 삭제 — 두 세트를 유지하면 화면·인쇄가
   달라질 여지가 다시 생긴다는 게 42번 항목이 잡은 WYSIWYG 위반의 재발 조건이었다).
   @media print는 여백(@page)·화면 전용 요소 숨김만 담당하고, 타이포·색은 여기 한 번만
   정의한다. 다크 모드에서도 이 콘텐츠는 흰 배경·검정 글자로 고정(--print-* 토큰, 스킴
   무관) — 화면이 곧 인쇄물이므로 어두운 화면에서도 인쇄물과 같은 대비로 보여야 한다. */
.weekly-print-head { margin-bottom: 25pt; padding-bottom: 10pt; border-bottom: 1pt solid var(--print-ink); }
.weekly-print-head h2 { margin: 0 0 6pt; overflow: hidden; color: var(--print-ink); font-size: 21pt; font-weight: 800; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.weekly-print-meta { margin: 0; color: var(--print-muted); font-size: 10.5pt; }
.weekly-print-empty { margin: 0; color: var(--print-muted); font-size: 10.5pt; font-style: italic; }

/* A4 한 장 고정 — 2026-08-07-위클리인쇄-1장강제·여백최소-cc에서 여백을 15mm/40mm→
   5mm/8mm로 줄이며 지면 높이도 재계산했다(297mm − 상5mm − 하8mm = 284mm, 이전 258mm보다
   오히려 넓어졌다 — 여백이 줄어든 만큼 쓸 수 있는 인쇄 영역이 늘었다). 1페이지 = 달력
   2/3(flex: 2) + 하단 요약 1/3(flex: 1) 비율은 그대로. 화면=인쇄 완전히 같은 DOM·같은
   CSS — 화면에서는 .space-weekly의 자연스러운 문서 스크롤로 284mm 지면 전체를 본다.
   overflow: hidden은 방어적 최종 안전판 — .weekly-print-compact-list의 상한
   (weeklyCompactMaxFor, app.js)이 실제로 넘침을 막고, 이건 그래도 넘을 경우 잘라내
   페이지 2가 생기는 상황을 원천 차단한다. */
/* 284mm→278mm(2026-08-07-위클리인쇄-자동축소-1장확정-cc, 작업 지시 1) — ba19d0c의 계산은
   @page 여백(5mm+8mm)+284mm=297mm로 잉여 0mm였다. 반올림·브라우저 기본 축소율 하나만
   더해져도 넘친다는 게 재발로 증명돼, 여백은 그대로 두고 지면 목표 높이만 6mm 낮춰
   printable area 안에 실측 오차를 흡수할 여유를 남긴다. 폭도 같은 비율(278/284≈97.9%)로
   같이 줄인다 — height만 줄이면 세로 여유는 생겨도 가로 쪽엔 여전히 잉여가 0이라 가로
   방향 반올림에 그대로 노출된다. margin:0으로 컨테이너 뒤 잉여 공백도 방어(작업 지시 3
   "빈 블록 제거"). 인쇄 직전 자동 축소(측정 후 scale)는 아래 @media print 안의 변수
   --weekly-print-scale로 건다 — 이 변수가 정의되는 곳이 @media print 안이라 화면
   렌더링엔 전혀 영향이 없다("화면 표시에는 축소를 적용하지 않는다" 요구를 CSS 스코프
   자체로 보증, JS에서 별도로 되돌릴 필요조차 없다). */
.weekly-print-page1 { height: 278mm; width: 97.9%; margin: 0; display: flex; flex-direction: column; overflow: hidden; break-after: avoid; page-break-after: avoid; }
.weekly-print-page1, .weekly-print-page1 * { break-inside: avoid; page-break-inside: avoid; }
.weekly-print-page1 .weekly-print-head { flex: 0 0 auto; }
.weekly-print-calendar { flex: 2 1 0; min-height: 220pt; display: grid; grid-template-columns: 70pt repeat(7, 1fr); grid-auto-rows: 1fr; gap: 0.5pt; overflow: hidden; border: 0.75pt solid var(--print-line); }
.weekly-print-cal-head, .weekly-print-cal-label { padding: 4pt 6pt; background: var(--print-surface); color: var(--print-muted); font-size: 8.5pt; font-weight: 800; border-bottom: 0.75pt solid var(--print-line); overflow: hidden; }
.weekly-print-cal-head.is-today { color: var(--print-ink); font-weight: 900; }
.weekly-print-cal-cell { padding: 3pt; display: flex; flex-direction: column; gap: 2pt; overflow: hidden; border-bottom: 0.5pt solid var(--print-line); }
/* 달력 칩이 이제 <button>이다(화면에서 클릭해 마일스톤·업무를 바로 열기 위해 — 이전엔
   화면 전용 .weekly-chip이 버튼, 인쇄용 .weekly-print-cal-chip은 정적 span으로 따로
   있었는데 이제 하나로 합쳤다) — 버튼 기본 테두리·배경·폰트를 리셋하고 기존 좌측 룰
   억양은 그대로 유지. 짤림 해소(A4한장-cc)는 그대로: 말줄임 대신 2줄까지 줄바꿈. */
.weekly-print-cal-chip {
  display: -webkit-box; width: 100%; padding: 1pt 4pt; border: 0; border-left: 1.5pt solid var(--print-ink);
  background: transparent; color: var(--print-ink); font: inherit; text-align: left; cursor: pointer;
  font-size: 7.5pt; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.weekly-print-cal-chip.is-task { border-left-style: dashed; }
.weekly-print-cal-chip.is-mine { background: var(--tint); }
/* 개인일정 칩(2026-08-07-위클리-금주프로젝트·개인일정-cc예외, 작업 지시 3 — "업무·마일스톤
   칩과 시각적으로 구분, 연한 배경") — is-mine과 동시에 붙을 수 있어(본인 개인일정) 배경은
   is-mine이 켜지면 그쪽이 우선하도록 순서를 아래에 둔다. */
.weekly-print-cal-chip.is-personal { background: var(--sec-pale); border-left-style: dotted; }
.weekly-print-cal-chip.is-personal.is-mine { background: var(--tint); }
/* 내용량 자동 축소 1단계(작업 지시 2, 임계값 실측 없이 정함 — 직원 행 8명 초과) — 행이
   많아지면 고정 flex:2 높이를 더 많은 행이 나눠 가져 한 행이 얕아진다. 2줄 클램프를
   1줄로 낮춰 칩이 셀 밖으로 밀리지 않게 한다(weeklyCalendarHtml이 .is-dense를 붙인다). */
.weekly-print-calendar.is-dense .weekly-print-cal-chip { -webkit-line-clamp: 1; }
/* 하단 1/3 요약(2026-08-07-위클리-금주프로젝트·개인일정-cc예외, 작업 지시 2·3) — 「금주
   업무」(48번 항목, 마일스톤+업무 통합)를 대체해 「금주 Project」(체크한 워크트리별 진행
   업무)로 바꾸고, 그 아래 최하단에 개인일정 한 줄 요약 띠를 별도로 둔다. flex:1 예산은
   그대로(달력과의 2:1 비율, ba19d0c) — 그 안을 좌우 2:1 컬럼으로 나눈다(작업 지시 4,
   2026-08-07-메일쓰기확대·홈레일토글·AI다이얼로그·지면2대1-cc): 좌(2) = 금주 Project,
   우(1) = 휴가 위 + 개인일정 아래 세로 배치. 좌측은 grid item으로 직접 둬 기존처럼 행
   전체 높이를 자동으로 채우고(align-items:stretch 기본값), 우측만 두 섹션을 세로로
   쌓아야 해서 래퍼(.weekly-print-summary-side)가 필요하다. */
.weekly-print-summary-row { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 16pt; padding-top: 10pt; border-top: 1pt solid var(--print-ink); }
.weekly-print-summary-side { min-height: 0; display: flex; flex-direction: column; gap: 6pt; }
/* 휴가가 개인일정과 세로로 자리를 나눠 쓰므로(이전엔 세로 전부를 혼자 썼다) flex:1로 남는
   높이를 차지하게 하고, 폭도 1/3로 좁아진 만큼 압축 목록의 2열 배치(아래 columns:2)는
   이 안에서만 1열로 되돌렸다 — 안 그러면 글자가 더 잘려 보인다(판단 기록). */
.weekly-print-summary-side .weekly-print-compact { flex: 1 1 0; }
.weekly-print-summary-side .weekly-print-compact-list { columns: 1; }
.weekly-print-compact { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.weekly-print-compact h4 { margin: 0 0 4pt; color: var(--print-ink); font-size: 10.5pt; font-weight: 800; flex: 0 0 auto; }
/* 골든비 배율표(adccae9) 조정치 — 본문 10.5pt(φ⁰)를 압축 목록에서 8pt로 한 단 더
   내렸다(98a4006, 보고에 명시 유지). */
.weekly-print-compact-list { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 10pt; font-size: 8pt; line-height: 1.4; }
.weekly-print-compact-list li { margin: 0; padding: 1pt 0; border-bottom: 0.5pt dotted var(--print-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; break-inside: avoid; }
.weekly-print-compact-list li button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--print-ink); font: inherit; text-align: left; cursor: pointer; }
.weekly-print-compact-list li.is-task { border-left: 1.5pt dashed var(--print-line); padding-left: 3pt; }
.weekly-print-compact-more { color: var(--print-muted); font-style: italic; }
/* 금주 Project(작업 지시 2) — 체크한 워크트리를 프로젝트명(굵게)으로 나열하고 그 아래
   업무를 상태 기호로 들여쓴다. 오른쪽 「휴가」 칸과 폭을 나눠 쓰므로 프로젝트가 여럿이면
   자동으로 좁아진다 — overflow:hidden(부모 .weekly-print-compact)이 최종 안전판. */
.weekly-print-project { margin-bottom: 6pt; break-inside: avoid; }
.weekly-print-project strong { display: block; font-size: 8.5pt; color: var(--print-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-print-project-tasks { margin: 1pt 0 0; padding: 0; list-style: none; font-size: 8pt; line-height: 1.4; }
.weekly-print-project-tasks li { padding-left: 4pt; }
.weekly-print-project-tasks li button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--print-ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-print-project-tasks li button small { color: var(--print-muted); }
.weekly-print-project-empty { padding-left: 4pt; color: var(--print-muted); font-style: italic; }
/* 상태 기호 범례(작업 지시 2 — "범례를 지면에 작게 표기"). */
.weekly-print-legend { margin: 0 0 4pt; color: var(--print-muted); font-size: 7pt; }
/* 개인일정 최하단 요약 띠(작업 지시 3) — 사람별 한 줄, 넘치면 말줄임(2줄 이상 늘어나
   지면을 밀어내지 않게 — flex:0 0 auto로 항상 고정 높이만 차지). */
.weekly-print-personal-summary { flex: 0 0 auto; padding-top: 4pt; border-top: 0.5pt dotted var(--print-line); }
.weekly-print-personal-summary h4 { margin: 0 0 2pt; color: var(--print-ink); font-size: 8.5pt; font-weight: 800; }
.weekly-print-personal-summary p { margin: 0; overflow: hidden; color: var(--print-ink); font-size: 8pt; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

/* 인쇄 전용 — 여백 최소화 + 1장 강제(2026-08-07-위클리인쇄-1장강제·여백최소-cc, 대표
   실측 "여전히 2페이지로 넘어간다"). 원인 확정 — 리빌 체인(body→.app-shell→.workbench→
   .space-weekly→.weekly-layout→#weekly-page-content)이 형제 요소는 전부 지웠지만, 그
   "체인 위의 조상들" 자체가 갖고 있던 높이·폭 제약은 하나도 안 지웠다:
   ① .app-shell은 display:grid + grid-template-columns:248px minmax(600px,1fr) 350px
      — 형제(레일·검토 패널)가 display:none이어도 .workbench는 여전히 첫 트랙(248px)에만
      배치돼 폭이 크게 줄어들 수 있다(그리드는 트랙 자체가 안 지워지면 아이템이 자동으로
      넓어지지 않는다).
   ② .app-shell·.workbench 둘 다 min-height:100vh를 갖고 있어 뷰포트 기준 최소 높이가
      지면 높이 위에 추가로 얹힌다.
   ③ .space-weekly(다른 전체 집계 화면과 공유하는 규칙, 148행)는 padding: var(--s6)를
      가진다 — 이 패딩이 지면(.weekly-print-page1)의 고정 높이 "밖"에서 위아래로 몇
      mm씩 더해져, @page 여백과 합친 총 높이가 297mm를 넘겼다(2페이지로 밀린 실체).
   이 셋을 전부 무력화해야 지면의 height:284mm가 실제로 "총 높이"가 된다. 여백은 상
   5mm : 하 8mm(5×φ≈8.09, 좁:넓 = 1:φ 유지, 절대값만 축소 — 작업 지시 1), 좌우 8mm
   (기존 40mm에서 대폭 축소 — "여백 최소" 지시, 브라우저 기본 머리글·바닥글 여유는 남김,
   아래 총 높이 계산식 참고). */
@media print {
  html, body { background: var(--print-surface) !important; }
  body > *:not(.app-shell) { display: none !important; }
  .app-shell { display: block !important; min-height: 0 !important; }
  .app-shell > *:not(.workbench) { display: none !important; }
  .workbench { min-height: 0 !important; }
  .workbench > *:not(.space-weekly) { display: none !important; }
  .space-weekly { display: block !important; padding: 0 !important; min-height: 0 !important; background: var(--print-surface) !important; }
  .space-weekly > *:not(.weekly-layout) { display: none !important; }
  .weekly-layout { display: block !important; margin: 0 !important; padding: 0 !important; }
  .weekly-layout > *:not(#weekly-page-content) { display: none !important; }
  #weekly-page-content { margin: 0 !important; padding: 0 !important; }
  .weekly-print-only-screen { display: none !important; }
  @page { size: A4 portrait; margin: 5mm 8mm 8mm 8mm; }
  .weekly-print-cal-chip, .weekly-print-compact-list li button { cursor: default; }
  .weekly-print-compact-list li { page-break-inside: avoid; break-inside: avoid; }
  /* 인쇄 직전 자동 축소(작업 지시 2) — html/body가 100vh 등 화면 전용 높이 규칙을 그대로
     들고 있으면 그 여백만으로 다음 빈 페이지가 생길 수 있어 auto로 강제(작업 지시 3).
     scale은 JS가 #weekly-print-page1에 --weekly-print-scale 커스텀 속성만 심고, 그 값을
     실제 transform으로 바꾸는 건 여기(이 규칙 자체가 print 미디어 안이라 화면엔 안 먹는다). */
  html, body { height: auto !important; }
  #weekly-print-page1 { transform: scale(var(--weekly-print-scale, 1)); transform-origin: top left; }
}
/* ── Notice 최상단 집계 ── */
.notice-board { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); max-width: 720px; }
/* .notice-item은 <div>(삭제 버튼과 함께 담는 그릇) — 안의 .notice-item-main이 진짜 클릭 가능한 버튼.
   버튼 안에 버튼을 못 넣으므로(무효 HTML) 이렇게 나눈다. */
.notice-item { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.notice-item.is-unread { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
/* 대형화(2026-08-05) — 핀 공지는 은은한 배경 대신 뚜렷한 강조 테두리+배경으로 더 세게 구분. */
.notice-item.is-pinned { border-width: 2px; border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.notice-item-main { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 18px 20px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.notice-item i { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: var(--blue); }
.notice-item.is-unread i { background: var(--brand); }
.notice-item .notice-body { flex: 1 1 auto; min-width: 0; }
.notice-item p { margin: 0; font-size: 14px; line-height: 1.6; }
.notice-item small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
/* 전사 공지는 개인 알림보다 한 단계 더 — 제목급 굵기·크기(요구사항: 뚜렷한 위계). */
.notice-item.is-announcement p { font-size: 17px; font-weight: 800; line-height: 1.5; }
.notice-lead-emoji { flex: 0 0 auto; margin-top: -2px; font-size: 30px; line-height: 1; }
/* ── 카드 삭제·수정·고정·업무화 버튼(게시글·알림·업무·공지 공용) — 호버·포커스 시에만 드러나는 절제된 조작 ── */
.card-delete, .card-edit, .card-pin, .card-draft-task { position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1; opacity: 0; transition: opacity .12s ease; cursor: pointer; }
.card-delete:hover, .card-delete:focus-visible { background: color-mix(in srgb, var(--negative) 16%, var(--surface)); color: var(--negative); border-color: var(--negative); }
.card-edit { right: 32px; font-size: 11px; }
.card-edit:hover, .card-edit:focus-visible { background: color-mix(in srgb, var(--blue) 16%, var(--surface)); color: var(--blue); border-color: var(--blue); }
.card-pin { right: 58px; }
.card-pin:hover, .card-pin:focus-visible { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--brand); border-color: var(--brand); }
/* 게시글에는 card-pin이 없어 같은 세 번째 슬롯(58px)을 재사용해도 겹치지 않는다. */
.card-draft-task { right: 58px; }
.card-draft-task:hover, .card-draft-task:focus-visible { background: color-mix(in srgb, var(--positive) 16%, var(--surface)); color: var(--positive); border-color: var(--positive); }
.message:hover .card-delete, .message:focus-within .card-delete,
.message:hover .card-edit, .message:focus-within .card-edit,
.message:hover .card-draft-task, .message:focus-within .card-draft-task,
.task-card:hover .card-delete, .task-card:focus-within .card-delete,
.activity:hover .card-delete, .activity:focus-within .card-delete,
.notice-item:hover .card-delete, .notice-item:focus-within .card-delete,
.notice-item:hover .card-edit, .notice-item:focus-within .card-edit,
.notice-item:hover .card-pin, .notice-item:focus-within .card-pin { opacity: 1; }
@media (hover: none) { .card-delete, .card-edit, .card-pin { opacity: 1; } } /* 터치 기기는 호버가 없으니 항상 보이게 */
/* 게시물 인라인 수정 폼 — 컴포저 textarea와 같은 시각 언어 */
.post-edit-form textarea { width: 100%; min-height: 60px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; resize: vertical; }
.post-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* 공지 이모지 피커(2026-08-05) — 고정 팔레트, 텍스트 위 한 줄. 클릭하면 바로 아래 textarea
   커서 위치에 삽입(insertAtCursor) — 그래서 항상 textarea 바로 위에 붙는 구조로 감싼다. */
.emoji-picker-field { display: flex; flex-direction: column; gap: 6px; }
.emoji-picker { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-picker button { padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; background: var(--ground); font-size: 16px; line-height: 1.3; cursor: pointer; }
.emoji-picker button:hover, .emoji-picker button:focus-visible { border-color: var(--brand); background: var(--brand-pale); }

/* ── Task board 간트(2026-08-06, CSS 그리드 — 새 라이브러리 없음) ──
   그리드 열: 1열=좌측 고정 블록(sticky), 2열부터 하루 1열. 막대·주 눈금·오늘선은 전부
   같은 그리드의 아이템으로 grid-column/grid-row를 직접 지정해 행 사이에 자동 정렬된다. */
.gantt-scroll { overflow-x: auto; padding-bottom: 8px; }
.gantt-grid { position: relative; display: grid; grid-auto-rows: 36px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gantt-row-fixed { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 10px; width: 380px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); overflow: hidden; }
.gantt-head .gantt-row-fixed { z-index: 4; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--ground); }
.gantt-row-fixed .gantt-col-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-row-fixed .gantt-col-assignee, .gantt-row-fixed .gantt-col-period { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.gantt-subtask-badge { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 800; } /* 하위업무는 줄로 안 늘리고 완료 수만 배지로(요구사항 6, 재량) */
.gantt-group-row { grid-column: 1 / -1; display: flex; align-items: center; padding: 0 12px; background: var(--ground); color: var(--muted); font-size: 11px; font-weight: 800; border-bottom: 1px solid var(--line); }
.gantt-week-line, .gantt-today-line { grid-row: 1 / -1; width: 0; border-left: 1px solid var(--line); }
.gantt-today-line { border-left: 2px dashed var(--brand); z-index: 2; }
.gantt-week-label { align-self: start; padding-top: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.gantt-bar { align-self: center; height: 16px; margin: 0 2px; border-radius: 5px; background: var(--muted); cursor: pointer; }
.gantt-bar.status-doing { background: var(--brand); }
.gantt-bar.status-review { background: var(--notice); }
.gantt-bar.status-done { background: var(--positive); }
.gantt-bar.is-estimated { opacity: .45; }
.gantt-bar.is-overdue { outline: 2px solid var(--negative); outline-offset: 1px; }
/* ── 중요 이슈 채널(파생 뷰, #pulse 안에 렌더) ── */
.critical-group { margin: 0 0 22px; }
.critical-group h4 { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.critical-group .notice-item { max-width: 640px; margin-bottom: 6px; }
.task-card.is-highlight { animation: preview-annot-pin-blink .55s ease-in-out 3; } /* 핀 하이라이트와 같은 3회 깜빡임 키프레임 재사용 */
.board-column { position: relative; min-height: 320px; padding: 14px 10px 10px; background: var(--surface); border-radius: var(--card-radius-sm); }
.board-column::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--forest); }
.board-column:nth-child(2)::before { background: var(--blue); }
.board-column:nth-child(3)::before { background: var(--notice); }
.board-column:nth-child(4)::before { background: var(--positive); }
.board-column > header { display: flex; justify-content: space-between; padding: 5px 4px 14px; }
.board-column > header strong { font-size: 12px; }
.board-column > header span { color: var(--muted); font-size: 11px; }
.board-column > div { display: flex; flex-direction: column; gap: 8px; }
.task-card { position: relative; margin-bottom: 8px; padding: 13px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--elev-card); display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.task-card .tag { align-self: flex-start; }
.task-card h4 { margin: 0; font-size: 12px; line-height: 1.4; }
.task-meta { display: flex; align-items: center; gap: 8px; }
.task-meta .avatar { width: 27px; height: 27px; font-size: 9px; }
.task-meta strong, .task-meta small { display: block; }
.task-meta strong { font-size: 10px; }
.task-meta small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.handoff { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.handoff select { flex: 1 1 auto; min-width: 0; padding: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 9px; }
.handoff button { flex: 0 0 auto; min-width: 0; padding: 7px; border: 0; background: var(--forest); color: var(--surface); font-weight: 800; font-size: 9px; }
.handoff button:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.handoff button[data-reject] { background: var(--surface); color: var(--negative); border: 1px solid var(--negative); } /* "다음 단계"(정방향)와 시각적으로 구분 */
.task-history { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
/* 하위업무를 부모 카드 안 체크박스로(2026-08-07-하위업무-부모카드내체크박스-cc.md) —
   .task-drawer-subtasks(드로어 안 목록)와 같은 뼈대를 카드 본문용으로 축약. */
.task-card-subtasks-block { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.task-card-subtasks-progress { color: var(--muted); font-size: 9px; font-weight: 800; }
.task-card-subtasks { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.task-card-subtask { display: flex; align-items: center; gap: 6px; }
.task-card-subtask label { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 6px; font-size: 10px; cursor: pointer; }
.task-card-subtask label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-card-subtask input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--positive); }
.task-card-subtask .is-done { color: var(--muted); text-decoration: line-through; }
.task-card-subtask .avatar { flex: 0 0 auto; width: 18px; height: 18px; font-size: 7px; }

/* ── 컨텍스트 패널 ── */
.context-panel { position: sticky; top: 0; height: 100vh; overflow: auto; border-left: 1px solid var(--line); background: var(--ground); }
.context-tabs { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; padding: 10px 16px 0; background: var(--ground); }
.context-tabs button { padding: 13px 5px; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--muted); font-weight: 800; }
.context-tabs button.active { border-bottom-color: var(--blue); color: var(--ink); }
.context-view { display: none; padding: 24px; }
.context-view.active { display: block; }
.context-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.context-heading strong, .context-heading small { display: block; }
.context-heading strong { margin-top: 9px; font-size: 13px; }
.context-heading small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.empty { color: var(--muted); font-size: 11px; line-height: 1.6; }
.activity-list { margin-top: 18px; }
.activity { position: relative; }
.activity:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: -3px; width: 1px; background: var(--line); }
.activity-main { display: grid; grid-template-columns: 12px 1fr; gap: 9px; cursor: pointer; text-align: left; width: 100%; border: 0; background: transparent; padding: 0; }
.activity .card-delete { top: 0; right: 0; }
.activity i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 5px; border: 2px solid var(--ground); border-radius: 50%; background: var(--blue); }
.activity.is-unread i { background: var(--brand); }
.activity.is-mention i { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-pale); }
.activity p { margin: 0; padding-bottom: 20px; font-size: 11px; line-height: 1.5; }
.activity time { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.mention-badge { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 999px; background: var(--brand-pale); color: var(--brand); font-size: 8px; font-weight: 700; vertical-align: middle; }

/* ── 다이얼로그(공용) ── */
dialog { width: min(500px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 14px; box-shadow: var(--elev-card-hover); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: color-mix(in srgb, var(--ink-deep) 62%, transparent); }
#task-form, #identity-form { padding: 25px; }
.dialog-head { display: flex; justify-content: space-between; }
.dialog-head h3 { margin: 5px 0 14px; }
.dialog-head button { border: 0; background: transparent; color: var(--ink); font-size: 22px; }
#task-form label, #identity-form label, #template-ai-view label { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 11px; font-weight: 750; }
#task-form input, #task-form select, #identity-form select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 하위업무 편집(2026-08-07-업무지시-AI초안-엔진1단계-cc예외) — AI 초안 프리필 + 수동 추가 공용. */
.task-subtasks-field { display: grid; gap: 6px; margin-top: 12px; }
.task-subtasks-list-row { display: flex; align-items: center; gap: 6px; }
.task-subtasks-list-row input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; }
.task-subtasks-list-row button { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1; }
.task-subtasks-list-row button:hover { background: color-mix(in srgb, var(--negative) 16%, var(--surface)); color: var(--negative); border-color: var(--negative); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: var(--s5); }
.account-info { display: grid; gap: 4px; margin-top: 14px; }
.account-info strong { font-size: 15px; }
.account-info small { color: var(--muted); font-size: 11px; }
.redeploy-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.redeploy-block[hidden] { display: none; }

/* AI 다이얼로그 정상화(2026-08-07-메일쓰기확대·홈레일토글·AI다이얼로그·지면2대1-cc, 작업
   지시 3) — 원인: 이 다이얼로그만 유일하게 <form> 없이 <label>이 <dialog>(padding:0)의
   직접 자식이었다. #task-form/#identity-form이 label에 주는 `display:grid`도, 워크플로
   노드 템플릿 다이얼로그처럼 `#workflow-node-template-dialog { padding: ... }`로 여백을
   직접 주는 방식도 이 다이얼로그엔 하나도 안 걸렸다 — 그래서 <label>이 기본 inline으로 남아
   안내문 텍스트 뒤에 textarea가 같은 줄로 흘러들어가 겹쳐 보였고(안내문·입력창 겹침·
   입력창 우측 밀림), 여백이 0이라 좌상단 둥근 모서리에 제목이 바짝 붙어 잘려 보였다
   (제목 잘림). 두 관례를 그대로 재사용해 고쳤다 — 워크플로 템플릿처럼 다이얼로그 자체에
   패딩을 주고, task-form처럼 label을 display:grid로 블록화했다. */
#weekly-ai-dialog { padding: 22px 24px 26px; }
#weekly-ai-dialog label { display: grid; gap: 6px; margin: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 750; }
#weekly-ai-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-small); resize: vertical; }
#weekly-ai-parse { margin-bottom: 14px; }
#weekly-ai-preview:not(:empty) { margin-bottom: 14px; }

/* ── 프로젝트(워크트리) 안내 다이얼로그 ── */
#project-dialog { width: min(560px, calc(100% - 28px)); border-radius: 20px; }
.project-dialog-head { padding: 25px 28px 20px; border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.project-dialog-head h3 { margin: 5px 0 4px; font-size: var(--fs-h2); letter-spacing: -.03em; }
.project-dialog-head p { margin: 0; color: var(--muted); font-size: 11px; }
.project-form-body { padding: 22px 28px 8px; font-size: 13px; line-height: 1.7; color: var(--ink); }
#project-dialog .dialog-actions { margin: 8px 0 0; padding: 16px 28px 22px; border-top: 1px solid var(--line); }

.mobile-nav { display: none; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; padding: 10px 15px; transform: translate(-50%, 20px); border-radius: 7px; background: var(--forest-deep); color: var(--surface); font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
/* 토스트 액션 버튼(2026-08-07-업무지시-AI초안-엔진1단계-cc예외 — "간트에서 확인" 등) — 부모의
   pointer-events:none을 자식에서만 되돌려 클릭 가능하게 한다. */
.toast-action { pointer-events: auto; margin-left: 8px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--surface) 40%, transparent); border-radius: 999px; background: transparent; color: var(--surface); font-size: 10px; font-weight: 800; }
.toast-action:hover { background: color-mix(in srgb, var(--surface) 16%, transparent); }

/* ── AI 채팅박스(대표 승인 예외 · 2026-08-06-AI채팅박스-cc예외) ── */
.ai-chat-fab { position: fixed; right: 26px; bottom: 26px; z-index: 42; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand); font-size: 22px; line-height: 1; box-shadow: var(--elev-card-hover); }
.ai-chat-fab.is-open { display: none; }
.ai-chat-panel { position: fixed; top: 0; right: 0; z-index: 41; display: flex; flex-direction: column; width: min(380px, 100%); height: 100vh; border-left: 1px solid var(--line); background: var(--surface); box-shadow: var(--elev-card-hover); transform: translateX(100%); transition: transform .2s; }
.ai-chat-panel.open { transform: none; }
.ai-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.ai-chat-head strong { display: flex; align-items: center; font-size: 14px; }
.ai-chat-head-actions { display: flex; gap: 6px; }
.ai-chat-head-actions button { font-size: 11px; }
.ai-chat-head-actions #ai-chat-close { padding: 0 4px; border: 0; background: transparent; color: var(--ink); font-size: 20px; }
.ai-chat-messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ai-chat-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.ai-chat-msg.role-user { align-self: flex-end; background: var(--brand-pale); color: var(--ink); border-bottom-right-radius: 3px; }
.ai-chat-msg.role-assistant { align-self: flex-start; background: var(--ground); color: var(--ink); border-bottom-left-radius: 3px; }
.ai-chat-status { margin: 0 18px 10px; }
.ai-chat-composer { display: flex; gap: 8px; align-items: flex-end; margin: 0 18px 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ai-chat-composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.ai-chat-composer .send { flex-shrink: 0; padding: 8px 12px; font-size: 11px; }
.ai-chat-composer .send:disabled { opacity: .5; }

@media (max-width: 1250px) {
  .app-shell { grid-template-columns: 220px minmax(560px, 1fr); }
  .context-panel { position: fixed; right: 0; z-index: 30; width: min(350px, 100%); transform: translateX(100%); box-shadow: var(--elev-card-hover); transition: .2s; }
  .context-panel.open { transform: none; }
}
@media (max-width: 850px) {
  .app-shell { display: block; padding-bottom: 60px; }
  .project-rail { display: none; }
  #rail-toggle-home { display: none !important; } /* 모바일은 .mobile-nav가 이미 내비게이션을 대신한다 */
  .workbench-head { height: auto; padding: 15px 16px; }
  .workbench-head p, .search { display: none; }
  /* .space-tasks 모바일 패딩은 이제 --s6→--s4 토큰 재정의로 자동 적용(중복 오버라이드 제거,
     2026-08-07-레이아웃-타이포·스페이스-cc.md 요구사항 5). */
  .board-columns { grid-template-columns: repeat(4, 230px); }
  .mobile-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); height: 60px; border-top: 1px solid var(--line); background: var(--surface); }
  .mobile-nav button { border: 0; background: var(--surface); color: var(--muted); font-weight: 800; }
  .mobile-nav button.active { color: var(--blue); }
  .dialog-grid { grid-template-columns: 1fr; }
  /* 대형화(2026-08-05) — 좁은 화면에서는 여백·이모지 크기를 한 단계 낮춰 카드가 화면을 안 넘치게. */
  .notice-item-main { padding: 14px 16px; gap: 10px; }
  .notice-item.is-announcement p { font-size: 15px; }
  .notice-lead-emoji { font-size: 24px; }
  /* AI 채팅박스 — 모바일 하단 탭바(60px) 위로, 패널은 전면 전환(요구사항 7). */
  .ai-chat-fab { bottom: 76px; }
  .ai-chat-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   워크플로 보드 — public/_proto/app.js 의 renderWorkflowLibraryV2 +
   renderWorkflowBuilderV2 캔버스 그대로 계승. 원본 styles.css의 해당 블록을
   색만 토큰으로 치환했다(레이아웃·치수 불변). V1(체크박스형 구식 빌더)은
   프로토타입 자체에서도 호출되지 않는 죽은 코드라 이식하지 않는다.
   ══════════════════════════════════════════════════════════════════════════ */
.workflow-library, .workflow-builder { max-width: 1180px; margin: 0 auto; padding: 30px; }
.app-shell.tool-mode .workflow-library { display: grid; grid-template-rows: auto minmax(0, 1fr); max-width: none; height: 100%; padding: clamp(20px, 2.4vw, 42px); }
.workflow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.workflow-head-actions { display: flex; gap: 8px; }
/* {변수} 칩 — 표시용 스타일뿐, 치환 로직 없음 */
.wf-var-chip { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 10px; font-weight: 700; }
/* ── 노드 번들 템플릿 갤러리 다이얼로그(2026-08-05 정리) ── */
#workflow-node-template-dialog { padding: 22px 24px 26px; }
#workflow-node-template-dialog .dialog-head { align-items: flex-start; } /* ×를 제목 줄과 겹치지 않는 우상단에 고정 */
#workflow-node-template-dialog .dialog-head h3 { margin: 2px 0 6px; }
#workflow-node-template-dialog .dialog-head p { margin: 0; color: var(--muted); font-size: 12px; }
/* ── 템플릿 AI 대화 빌더(2026-08-07-템플릿-AI대화빌더-cc예외) — one-shot을 대화형으로.
   말풍선은 AI 채팅박스(.ai-chat-msg)와 같은 스타일을 재사용한다(요구사항 — 코드 공유는
   스타일·컴포넌트 수준만, 기능·상태는 완전히 별개). ── */
#workflow-node-template-dialog:has(#template-ai-view:not([hidden])) { width: min(680px, calc(100% - 30px)); }
.template-ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; margin-top: 14px; }
.template-ai-conversation { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.template-ai-turns { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.template-ai-turns:empty { display: none; }
.template-ai-composer { margin-top: 0; }
.template-ai-preview-pane { min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); }
.template-ai-preview-pane > .section-code { display: block; margin-bottom: 8px; }
#template-ai-preview { max-height: 320px; overflow-y: auto; }
#template-ai-preview .tag-branch { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--sec-pale); color: var(--sec-700); font-size: 8px; font-weight: 800; vertical-align: middle; }
.workflow-node-template-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.workflow-node-template-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.workflow-node-template-card > div { flex: 1 1 auto; min-width: 0; }
.workflow-node-template-card strong { display: block; font-size: 14px; }
.workflow-node-template-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.workflow-node-template-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.workflow-node-template-card button { flex-shrink: 0; white-space: nowrap; } /* "보드에\n추가" 줄바꿈 방지 */
.workflow-head h2, .workflow-builder h2 { margin: 4px 0 8px; font-size: var(--fs-h1); letter-spacing: -1.2px; }
.workflow-head p, .workflow-builder > p { margin: 0; color: var(--muted); line-height: 1.6; }
.workflow-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 14px; }
.workflow-section-title h3 { margin: 0; font-size: var(--fs-h3); }
.workflow-section-title span { font-size: 12px; color: var(--muted); }
.workflow-empty { padding: 22px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; background: var(--ground); }
.workflow-filters { display: flex; gap: 8px; overflow: auto; padding-bottom: 4px; }
.workflow-filter { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--paper); color: var(--muted); font-weight: 700; white-space: nowrap; }
.workflow-filter:hover, .workflow-filter.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.workflow-card { display: flex; min-height: 228px; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--elev-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.workflow-card:hover { transform: translateY(-3px); box-shadow: var(--elev-card-hover); }
.workflow-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workflow-category { padding: 5px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800; }
.workflow-card h3 { margin: 18px 0 7px; font-size: var(--fs-h3); }
.workflow-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.workflow-flow { margin: 14px 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--ground); color: var(--ink); font-size: 12px; line-height: 1.5; }
.workflow-card .send { margin-top: auto; align-self: flex-start; }
.workflow-library-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px 190px; gap: 14px; min-height: 0; align-items: stretch; }
.workflow-drop-canvas { position: relative; min-height: 0; height: 100%; overflow: hidden; padding: 22px; border: 1px dashed var(--sec-pale); border-radius: 18px; background-color: var(--ground); transition: border-color .18s ease, background-color .18s ease; }
.workflow-drop-canvas.is-dragover { border-color: var(--blue); background-color: var(--blue-soft); }
.drop-guide { margin: -6px 0 22px; color: var(--muted); font-size: 11px; }
.workflow-board-stage { position: relative; height: calc(100% - 92px); min-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background-color: var(--surface); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; }
.workflow-board-stage:focus-visible { outline: 3px solid var(--sec-300); outline-offset: 2px; }
.workflow-drop-canvas .active-workflow-list { position: relative; z-index: 1; display: block; width: max(100%, 1100px); height: max(100%, 700px); margin: 0; }
.workflow-drop-canvas .workflow-board-node { position: absolute; display: grid; grid-template-columns: 34px minmax(0, 1fr) 76px; gap: 8px; width: 220px; min-height: 68px; padding: 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--elev-card); cursor: grab; touch-action: none; user-select: none; }
.workflow-drop-canvas .workflow-board-node:focus, .workflow-drop-canvas .workflow-board-node:focus-visible { outline: 3px solid var(--sec-300); outline-offset: 2px; }
.workflow-drop-canvas .workflow-board-node.dragging { z-index: 3; cursor: grabbing; box-shadow: var(--elev-card-hover); }
.workflow-board-node .workflow-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; font-size: 16px; }
.workflow-board-node strong { font-size: 12px; }
.workflow-board-node small { font-size: 9px; }
/* 터치 타깃 확대(2026-08-07-템플릿-X확대·내용자동기재-cc예외) — 22×24px는 누르기 어렵다는
   대표 지시. ▶ 실행·× 제거 한 쌍이라 함께 키운다. 부모 그리드 3번째 열(66→76px)도 같이 넓혀
   본문(minmax(0,1fr)) 열을 침범하지 않고 actions 영역만 넓어지게 했다. */
.workflow-node-actions { display: grid; grid-template-columns: repeat(2, 32px); gap: 4px; justify-content: end; align-self: start; }
.workflow-node-actions button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 16px; }
.workflow-node-actions button:hover { color: var(--blue); }
.workflow-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 13px; background: var(--workflow-color, var(--blue-soft)); color: var(--surface); font-size: 21px; }
.workflow-port { position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; transform: translateY(-50%); border: 0; background: transparent; }
.workflow-port::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border: 1.5px solid currentColor; border-radius: 50%; background: var(--surface); transition: transform .16s ease, background .16s ease; }
.workflow-port.in { left: -23px; color: var(--orange); }
.workflow-port.out { right: -23px; color: var(--blue); }
.workflow-port:hover::after, .workflow-port:focus-visible::after, .workflow-port.connecting::after { transform: translate(-50%, -50%) scale(1.35); background: currentColor; }
.workflow-chart-lines { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.workflow-chart-lines path { fill: none; stroke-width: 1.5; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.workflow-chart-lines path.normal { stroke: var(--muted); stroke-dasharray: 6 6; }
.workflow-chart-lines path.important { stroke: var(--text-accent); stroke-width: 2.5; }
.workflow-chart-lines path:hover { stroke: var(--ink); stroke-width: 3; }
.workflow-chart-lines path.draft { stroke: var(--blue); stroke-dasharray: 3 5; pointer-events: none; }
.workflow-link-toolbar { display: flex; align-items: center; gap: 7px; margin: -5px 0 8px; }
.workflow-link-toolbar > span { margin-right: 2px; color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-link-toolbar button { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 800; }
.workflow-link-toolbar button.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.workflow-link-toolbar i { width: 18px; border-top: 2px dashed var(--muted); }
.workflow-link-toolbar [data-link-priority="important"] i { border-top: 2px solid var(--text-accent); }
.workflow-assignees { display: flex; gap: 3px; margin-top: 5px; }
.workflow-assignees button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--mint); color: var(--forest); font-size: 8px; font-weight: 900; }
.workflow-board-node.staff-target { border-color: var(--orange); background: var(--brand-pale); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.workflow-node-detail { grid-column: 1/-1; display: grid; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 800; }
.workflow-node-detail textarea { width: 100%; min-height: 42px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--ground); color: var(--ink); font-size: 9px; line-height: 1.4; resize: vertical; user-select: text; }
/* 노드 내용 자동 기재(2026-08-07-템플릿-X확대·내용자동기재-cc예외) — 카드가 제목만 있고
   속이 비어 보이던 문제. desc는 제목 아래 한 줄, steps는 접힘 목록(<details>, 별도 JS 불필요). */
.workflow-node-desc { grid-column: 1/-1; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.workflow-node-steps { grid-column: 1/-1; margin-top: 2px; }
.workflow-node-steps summary { color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.workflow-node-steps ul { margin: 4px 0 0; padding-left: 14px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.workflow-node-steps li { margin-bottom: 2px; }
/* ── 분기 노드(2026-08-07-워크플로-분기노드-cc예외) — 2출구, 라벨 편집, 온/오프 흐리게 ── */
.workflow-board-node.is-branch-node { border: 1px solid var(--sec-pale); }
.workflow-board-node.is-branch-dimmed { opacity: .4; }
.branch-port::after { border-radius: 3px; }
.branch-port.is-off { color: var(--muted); }
.branch-port.is-off::after { background: var(--ground); }
.workflow-branch-editor { grid-column: 1/-1; display: grid; gap: 4px; margin-top: 4px; }
.branch-editor-row { display: flex; align-items: center; gap: 6px; }
.branch-editor-row.is-off { opacity: .5; }
.branch-editor-row input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--sec-500); }
.branch-label-input { flex: 1; min-width: 0; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); font-size: 9px; }
.workflow-chart-lines path.dimmed { opacity: .35; stroke-dasharray: 2 4; }
.workflow-edge-label { fill: var(--muted); font-size: 9px; font-weight: 800; pointer-events: none; }
.workflow-edge-label.dimmed { opacity: .5; }
.workflow-drop-canvas .staff-board-node { z-index: 4; grid-template-columns: 32px minmax(0, 1fr) 36px; width: 180px; min-height: 58px; padding: 9px; }
.workflow-drop-canvas .staff-board-node.dragging { z-index: 8; }
.staff-node-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--forest); font-size: 9px; font-weight: 900; }
.staff-board-node [data-node-drag] { cursor: grab; }
.staff-board-node.dragging [data-node-drag] { cursor: grabbing; }
/* 같은 X 버튼 계열(터치 타깃 문제 동일) — 워크플로 노드 X와 함께 확대(2026-08-07-템플릿-
   X확대·내용자동기재-cc예외 적용 범위: 메인 워크플로 보드 노드 + 직원 노드. 구형
   workflow-builder-v2(.node-controls)는 이 티켓이 가리키는 화면이 아니라 미포함). */
.staff-board-node > button:not(.workflow-port) { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 16px; }
.workflow-template-panel { min-height: 0; overflow: auto; padding: 0 4px 20px 16px; border-left: 1px solid var(--line); }
.workflow-template-panel .workflow-filters { display: grid; grid-template-columns: repeat(3, 1fr); }
.workflow-template-panel .workflow-filter { padding: 7px 8px; }
.workflow-template-panel .workflow-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.workflow-template-panel .workflow-card { display: grid; grid-template-columns: 38px 1fr; column-gap: 9px; min-height: 0; padding: 12px; border-radius: 12px; box-shadow: none; cursor: grab; }
.workflow-template-panel .workflow-card:active { cursor: grabbing; }
.workflow-template-panel .workflow-card h3 { grid-column: 2; margin: 0; font-size: 12px; }
.workflow-template-panel .workflow-card p { grid-column: 2; margin-top: 4px; font-size: 10px; }
.workflow-template-panel .workflow-flow { display: none; }
.workflow-template-panel .workflow-card-top { grid-row: 1/4; }
.workflow-template-panel .workflow-icon { width: 34px; flex-basis: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
.workflow-template-panel .workflow-category { display: none; }
.workflow-template-panel .workflow-card .quiet { grid-column: 2; justify-self: start; margin-top: 9px; padding: 6px 8px; font-size: 9px; }
.workflow-staff-panel { min-height: 0; overflow: auto; padding: 0 0 20px 14px; border-left: 1px solid var(--line); }
.workflow-staff-panel > p { margin: -5px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.staff-tag-list { display: grid; gap: 8px; }
.staff-tag { display: grid; grid-template-columns: 32px minmax(0, 1fr) 12px; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; cursor: grab; }
.staff-tag:active { cursor: grabbing; }
.staff-tag > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--forest); font-size: 9px; font-weight: 900; }
.staff-tag strong, .staff-tag small { display: block; }
.staff-tag strong { font-size: 11px; }
.staff-tag small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.staff-tag i { color: var(--muted); font-size: 10px; font-style: normal; }
.staff-tag.selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 8%, transparent); }
.workflow-notification-log { display: grid; gap: 7px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.workflow-notification-log > strong { font-size: 11px; }
.workflow-notification-log > span { display: grid; padding: 7px 8px; border-radius: 8px; background: var(--ground); }
.workflow-notification-log b { font-size: 9px; }
.workflow-notification-log small, .workflow-notification-log p { margin: 2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.builder-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.workflow-node-builder { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; max-width: 1120px; height: 100%; padding: 0; }
.node-builder-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 28px; border-bottom: 1px solid var(--line); }
.node-builder-head .quiet { margin-bottom: 18px; }
.node-builder-head h2 { margin: 6px 0 5px; }
.node-builder-head label { display: grid; gap: 7px; width: min(330px, 42%); font-size: 11px; font-weight: 850; }
.node-builder-head input { height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.node-builder-layout { display: grid; grid-template-columns: minmax(560px, 1fr) 260px 220px; grid-template-areas: "canvas settings palette"; min-height: 0; overflow: hidden; }
.node-palette { grid-area: palette; padding: 24px 16px; border-left: 1px solid var(--line); background: var(--ground); }
.node-palette h3 { margin: 0; font-size: 15px; }
.node-palette > p { margin: 6px 0 18px; color: var(--muted); font-size: 11px; }
.node-palette button { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 9px; width: 100%; min-height: 58px; margin-bottom: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; }
.node-palette button:hover { border-color: var(--blue); background: var(--blue-soft); }
.node-palette i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-style: normal; font-size: 12px; font-weight: 900; }
.node-palette b, .node-palette small { display: block; }
.node-palette b { font-size: 11px; }
.node-palette small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.node-palette em { color: var(--blue); font-style: normal; font-size: 18px; }
.flow-canvas { grid-area: canvas; overflow: auto; padding: 0 20px 20px; background-color: var(--ground); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; }
.flow-canvas.is-dragover { background-color: var(--blue-soft); }
.flow-canvas-toolbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; padding: 16px 0; background: var(--ground); color: var(--muted); font-size: 10px; }
.flow-canvas-toolbar b { color: var(--blue); }
.flow-stage { position: relative; width: max(100%, 1100px); height: max(100%, 720px); min-height: 720px; overflow: hidden; }
.flow-lane { position: absolute; z-index: 1; inset: 0; }
.flow-edges { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-edges path { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.flow-edges path:hover { stroke: var(--orange); stroke-width: 4; }
.flow-edges path.draft { stroke-dasharray: 6 5; pointer-events: none; }
.flow-node { position: absolute; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 224px; min-height: 66px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--elev-card); cursor: grab; touch-action: none; user-select: none; }
.flow-node.selected { border-color: var(--blue); box-shadow: var(--elev-card-hover); }
.flow-node.dragging { z-index: 3; cursor: grabbing; box-shadow: var(--elev-card-hover); }
.flow-node > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-style: normal; font-size: 13px; font-weight: 900; }
.flow-node small, .flow-node strong, .flow-node p { display: block; }
.flow-node small { color: var(--muted); font-size: 8px; }
.flow-node strong { margin-top: 2px; font-size: 11px; }
.flow-node p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.trigger-node { border-color: var(--blue); }
.trigger-node > i { background: var(--blue); color: var(--surface); }
.trigger-node select { width: 100%; margin-top: 5px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 750; }
.node-port { position: absolute; top: 50%; z-index: 4; width: 14px; height: 14px; transform: translateY(-50%); border: 2px solid var(--blue); border-radius: 50%; background: var(--surface); cursor: crosshair; transition: transform .16s ease, background .16s ease; }
.node-port.in { left: -8px; }
.node-port.out { right: -8px; }
.node-port:hover, .node-port.connecting { transform: translateY(-50%) scale(1.35); background: var(--blue); }
.node-controls { display: flex; gap: 2px; }
.node-controls button { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 10px; }
.node-controls button:hover { border-color: var(--blue); color: var(--blue); }
.node-controls button:disabled { opacity: .3; cursor: not-allowed; }
.condition-node > i { background: var(--brand-pale); color: var(--brand-fill); }
.branch-preview { display: flex; gap: 6px; margin-top: 8px; }
.branch-preview span { padding: 4px 6px; border-radius: 5px; background: var(--ground); color: var(--muted); font-size: 8px; font-weight: 750; }
.node-settings { grid-area: settings; padding: 24px 16px; border-left: 1px solid var(--line); background: var(--surface); }
.node-settings h3 { margin: 14px 0 5px; font-size: 16px; }
.node-settings > p { margin: 0 0 22px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.node-settings label { display: grid; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 10px; font-weight: 750; }
.node-settings select, .node-settings input, .node-settings textarea { width: 100%; min-height: 39px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 10px; resize: vertical; }
.node-settings .setting-check { display: flex; align-items: flex-start; gap: 8px; }
.node-settings .setting-check input { width: 15px; min-height: 15px; margin: 0; }
.branch-key { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.branch-key span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.branch-key i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.branch-key i.no { background: var(--orange); }
.flow-run-log { display: flex; align-items: center; gap: 10px; overflow: auto; padding: 12px 28px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--positive) 8%, var(--surface)); }
.flow-run-log[hidden] { display: none; }
.flow-run-log > strong { white-space: nowrap; color: var(--positive); font-size: 11px; }
.flow-run-log > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 9px; }
.flow-run-log b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.flow-run-log i { color: var(--positive); font-style: normal; font-weight: 850; }
.workflow-node-builder .builder-footer { margin: 0; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 900px) { .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .active-workflow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1280px) {
  .workflow-library-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .workflow-drop-canvas { grid-row: 1/3; }
  .workflow-template-panel { grid-column: 2; grid-row: 1; }
  .workflow-staff-panel { grid-column: 2; grid-row: 2; }
  .node-builder-layout { grid-template-columns: minmax(420px, 1fr) 220px; grid-template-areas: "canvas palette" "settings settings"; }
  .node-settings { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 760px) {
  .workflow-library-layout { grid-template-columns: 1fr; }
  .workflow-template-panel, .workflow-staff-panel { grid-column: auto; grid-row: auto; position: static; max-height: none; border: 0; padding-left: 0; }
  .workflow-drop-canvas { min-height: 380px; }
  .node-builder-head { display: block; }
  .node-builder-head label { width: 100%; margin-top: 18px; }
  .node-builder-layout { grid-template-columns: 1fr; grid-template-areas: "canvas" "palette" "settings"; }
  .node-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-left: 0; border-top: 1px solid var(--line); }
  .node-palette h3, .node-palette > p { grid-column: 1/-1; }
  .node-palette button { margin: 0; }
  .flow-canvas { min-height: 520px; }
  .node-settings { grid-column: auto; }
}
@media (max-width: 620px) {
  .workflow-library, .workflow-builder { padding: 20px 16px; }
  .workflow-node-builder { padding: 0; }
  .workflow-head { display: block; }
  .workflow-head .send { margin-top: 16px; }
  .workflow-grid, .active-workflow-list { grid-template-columns: 1fr; }
  .workflow-card { min-height: 0; }
  .node-palette { grid-template-columns: 1fr; }
  .node-builder-head { padding: 20px 16px; }
  .flow-canvas { padding-inline: 14px; }
  .workflow-node-builder .builder-footer { padding-inline: 16px; }
}

/* ── 온보딩 — 노션 「신규 직원 온보딩 허브」 이관. 원본은 노션, 여기는 읽기 진입 화면.
   대비 AA(4.5:1) 확보: 본문은 --ink/--muted, 강조 텍스트는 --moss/--positive/--notice
   같은 상태색을 라벨과 함께 쓴다(색만으로 의미 전달 금지). 포커스 표시는 전역 규칙을 그대로 둔다. ── */
#onboarding-surface { width: min(920px, 100%); margin: 0 auto; }
.onboarding-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.onboarding-head h3 { margin: 7px 0 6px; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.04em; }
.onboarding-head p { margin: 0; color: var(--muted); font-size: 13px; }
.onboarding-who { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 10px; font-weight: 700; }

.onboarding-stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0; padding: 0; list-style: none; }
.onboarding-stepper li { margin: 0; }
.onboarding-step-btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 750; }
.onboarding-step-btn:hover { border-color: var(--blue); }
.onboarding-step-btn.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.onboarding-step-num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--forest); color: var(--surface); font-size: 10px; font-weight: 900; }
.onboarding-step-btn.active .onboarding-step-num { background: var(--blue); }
.onboarding-step-mode { color: var(--notice); font-size: 9px; font-weight: 800; }

.onboarding-step-body { margin-top: 6px; }
.onboarding-footer { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.onboarding-footer a { color: var(--blue); font-weight: 700; }

/* 체크리스트 */
.onboarding-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.onboarding-progress-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--ground); overflow: hidden; }
.onboarding-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--positive); transition: width .2s ease; }
.onboarding-progress-count { font-size: 12px; color: var(--ink); white-space: nowrap; }
.onboarding-save-badge { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--notice) 14%, var(--surface)); color: var(--notice); font-size: 10px; font-weight: 800; white-space: nowrap; }
.onboarding-save-badge.is-error { background: color-mix(in srgb, var(--negative) 14%, var(--surface)); color: var(--negative); } /* "저장 대기"(연결 문제)와 구분 — 서버가 거부한 실제 실패 */
.onboarding-category { margin-bottom: 26px; }
.onboarding-category h4 { margin: 0 0 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.onboarding-checklist { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; list-style: none; }
.onboarding-check-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.onboarding-check-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onboarding-check-label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.onboarding-check-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--positive); }
.onboarding-detail-toggle { flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 700; }
.onboarding-detail { margin: 10px 0 0 28px; padding: 12px 14px; border-radius: 10px; background: var(--ground); font-size: var(--fs-small); color: var(--ink); line-height: 1.6; }
/* 노션허브 중첩 세부내용(2026-08-07-노션허브-중첩세부-계층보존-cc예외) — parseHubGuide가
   detail에 "\n"으로 이어붙인 들여쓰기 목록 줄이 실제 줄바꿈으로 보이게 한다. */
.onboarding-detail p { margin: 0 0 6px; white-space: pre-line; }
.onboarding-detail-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.onboarding-detail-links a { color: var(--blue); font-weight: 700; font-size: 11px; }
.onboarding-done-when { color: var(--muted); }
.onboarding-done-when strong { color: var(--ink); }

/* 필터(툴 가이드·FAQ 공용) */
.onboarding-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.onboarding-filters label { display: grid; gap: 4px; font-size: 10px; font-weight: 750; color: var(--muted); }
.onboarding-filters select, .onboarding-filters input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; min-width: 160px; }

/* 툴 가이드 */
.onboarding-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.onboarding-tool-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.onboarding-tool-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.onboarding-tool-card header strong { font-size: 13px; }
.onboarding-tool-priority { padding: 2px 8px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.onboarding-tool-use { margin: 0; font-size: 12px; color: var(--ink); }
.onboarding-tool-meta { display: flex; gap: 8px; margin: 0; font-size: 10px; color: var(--muted); }
.onboarding-tool-howto { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.onboarding-tool-download { align-self: flex-start; margin-top: 2px; color: var(--blue); font-size: 11px; font-weight: 700; }

/* 조직도 */
.onboarding-org-note { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.onboarding-org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.onboarding-org-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.onboarding-org-card strong, .onboarding-org-card small { display: block; }
.onboarding-org-card strong { font-size: 12px; }
.onboarding-org-card small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.onboarding-org-card .onboarding-org-position { color: var(--ink); font-weight: 700; }

/* 자료실·작업 표준(참조 전용) */
.onboarding-reference-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground); }
.onboarding-reference-card p { margin: 0 0 12px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.onboarding-reference-card a { color: var(--blue); font-weight: 800; font-size: 13px; }

/* FAQ */
.onboarding-faq-list { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.onboarding-faq-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.onboarding-faq-item.is-draft { border-style: dashed; }
.onboarding-faq-q { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; background: var(--surface); }
.onboarding-faq-item.is-draft .onboarding-faq-q { color: var(--muted); }
.onboarding-faq-cat { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.onboarding-faq-q-text { flex: 1 1 auto; font-size: 12px; }
.onboarding-faq-draft-badge { flex: 0 0 auto; color: var(--notice); font-size: 9px; font-weight: 800; }
.onboarding-faq-a { padding: 0 14px 14px 14px; background: var(--surface); font-size: 12px; color: var(--ink); line-height: 1.6; }
.onboarding-faq-a p { margin: 0 0 6px; }
.onboarding-faq-ref { color: var(--muted); font-size: 10px; }
/* ── 대표 편집 모드(2026-08-04) ── */
.onboarding-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.onboarding-edit-bar.is-editing { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.onboarding-edit-meta { color: var(--muted); font-size: 11px; }
.onboarding-sync-badge { padding: 3px 9px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.onboarding-sync-badge.is-ok { background: color-mix(in srgb, var(--positive) 14%, var(--surface)); color: var(--positive); }
.onboarding-sync-badge.is-error { background: color-mix(in srgb, var(--negative) 14%, var(--surface)); color: var(--negative); }
.onboarding-notion-notice { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.onboarding-notion-msg { font-weight: 700; }
.onboarding-editor-panel { margin-bottom: 22px; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--ground); }
.onboarding-editor-panel h4 { margin: 0 0 12px; font-size: 12px; }
.onboarding-editor-hint { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
/* 카테고리(소제목) 바로가기 — 스텝 탭 바로 아래, 소제목 3개 이상일 때만 렌더된다(JS에서 판정) */
.onboarding-cat-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 20px; }
.onboarding-cat-jump a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.onboarding-cat-jump a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.onboarding-steps-editor { display: flex; flex-direction: column; gap: 10px; }
.onboarding-step-edit-row { display: grid; grid-template-columns: 24px repeat(3, 1fr); gap: 8px; align-items: end; }
.onboarding-step-edit-row label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--muted); }
.onboarding-step-edit-row input { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; }
.onboarding-check-item.is-editing, .onboarding-tool-card.is-editing, .onboarding-faq-item.is-editing {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px;
}
.onboarding-check-item.is-editing label, .onboarding-tool-card.is-editing label, .onboarding-faq-item.is-editing label {
  display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--muted);
}
.onboarding-check-item.is-editing input, .onboarding-check-item.is-editing textarea,
.onboarding-tool-card.is-editing input, .onboarding-tool-card.is-editing textarea,
.onboarding-faq-item.is-editing input, .onboarding-faq-item.is-editing textarea {
  padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); font-size: 12px; font-family: inherit; resize: vertical;
}
.onboarding-edit-row-actions { display: flex; gap: 6px; }
.onboarding-faq-draft-toggle { flex-direction: row !important; align-items: center; gap: 6px !important; }
.onboarding-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.onboarding-history-row:last-child { border-bottom: 0; }
.onboarding-history-row strong { display: block; font-size: 12px; }
.onboarding-history-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
#onboarding-history-dialog { width: min(560px, 92vw); max-height: 80vh; }
#onboarding-history-list { overflow-y: auto; max-height: 60vh; }

@media (max-width: 720px) {
  .onboarding-filters { flex-direction: column; }
  .onboarding-filters select, .onboarding-filters input { min-width: 0; width: 100%; }
}

/* ── 로그인 화면(login.html) — A5, 근태 앱과 계정을 공유한다 ── */
.auth-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--forest); font-family: inherit; }
.auth-shell { width: min(380px, calc(100% - 32px)); }
.auth-card { padding: 34px 30px; border-radius: 20px; background: var(--surface); box-shadow: var(--elev-card-hover); text-align: center; }
.auth-mark { display: inline-grid; place-content: center; width: 52px; height: 56px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-weight: 900; line-height: .72; letter-spacing: -2px; }
.auth-card .section-code { display: block; margin-bottom: 6px; }
.auth-card h1 { margin: 4px 0 8px; font-size: 22px; letter-spacing: -.03em; }
.auth-desc { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.auth-field { display: grid; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 11px; font-weight: 750; text-align: left; }
.auth-field input { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.auth-field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.auth-submit { width: 100%; margin-top: 6px; padding: 12px; border-radius: 8px; font-size: 13px; }
.auth-err { min-height: 16px; margin: 14px 0 0; color: var(--negative); font-size: 11px; }
.auth-err.is-notice { color: var(--muted); }